/* === Wild Dragon — design tokens === */
:root {
  --color-primary: #0a0a0a;
  --color-secondary: #171717;
  --color-accent: #3b82f6;
  --color-accent-light: #60a5fa;
  --color-surface: #fafafa;
  --color-surface-dark: #f5f5f5;
  --color-muted: #737373;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;

  --font-inter: "Inter";
  --font-mono-stack: "JetBrains Mono";
  --font-display: var(--font-inter);
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: var(--font-mono-stack), ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-sans); color: var(--color-primary); background: #fff; overflow-x: hidden; line-height: 1.5; }

::selection { background-color: var(--color-accent); color: white; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.font-mono { font-family: var(--font-mono); }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease-out, transform .8s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }

section { position: relative; }
.container { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; }

/* Page-load curtain */
.curtain { position: fixed; inset: 0; background: var(--color-primary); z-index: 999; transform-origin: top; animation: curtain 1.1s cubic-bezier(.77,0,.18,1) forwards; pointer-events: none; }
@keyframes curtain { 0% { transform: scaleY(1); } 100% { transform: scaleY(0); } }

/* Cursor follower */
.cursor-dot { position: fixed; top: 0; left: 0; width: 320px; height: 320px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .4s; mix-blend-mode: screen; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--color-accent) 30%, transparent) 0%, transparent 60%); }
body[data-cursor="on"] .cursor-dot { opacity: .8; }
@media (max-width: 900px) { .cursor-dot { display: none; } }

/* Grain overlay (only on dark sections via class) */
.grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMC41NSAwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoJTIzbiknLz48L3N2Zz4="); }

/* === NAV === */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background-color .3s, backdrop-filter .3s, padding .3s, border-color .3s; padding: 1.5rem 0; }
.nav.scrolled { background: rgba(255,255,255,.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--neutral-200); padding: .9rem 0; }
.nav-inner { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: .75rem; }
.nav-logo img { width: 32px; height: 32px; transition: filter .3s; filter: brightness(0) invert(1); }
.nav.scrolled .nav-logo img { filter: brightness(0); }
.nav-logo span { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: white; transition: color .3s; }
.nav.scrolled .nav-logo span { color: var(--color-primary); }
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a { font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.75); transition: color .2s; position: relative; }
.nav.scrolled .nav-links a { color: var(--color-muted); }
.nav-links a::after { content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background: var(--color-accent); transition: right .25s ease; }
.nav-links a:hover { color: var(--color-accent); }
.nav-links a:hover::after { right: 0; }
.nav-toggle { display: none; color: white; }
.nav.scrolled .nav-toggle { color: var(--color-primary); }
.nav-mobile { display: none; background: white; border-top: 1px solid var(--neutral-200); padding: 1rem 1.5rem; }
.nav-mobile.open { display: block; }
.nav-mobile a { display: block; padding: .75rem 0; font-size: .875rem; font-weight: 500; color: var(--color-muted); }
.nav-mobile a:hover { color: var(--color-primary); }
@media (max-width: 768px) { .nav-links { display: none; } .nav-toggle { display: block; } }

/* === HERO === */
.hero { position: relative; height: 100vh; min-height: 700px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-primary); }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; transform: scale(1.05); animation: heroPan 30s ease-in-out infinite alternate; }
@keyframes heroPan { from { transform: scale(1.05) translate(0,0); } to { transform: scale(1.12) translate(-2%, -1.5%); } }
.hero-grid { position: absolute; inset: 0; opacity: .05; background-image: linear-gradient(color-mix(in oklab, var(--color-accent) 40%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--color-accent) 40%, transparent) 1px, transparent 1px); background-size: 80px 80px; }
.hero-fade-v { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,10,10,.85), rgba(10,10,10,.45), rgba(10,10,10,1)); }
.hero-fade-h { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,10,10,.55), transparent, rgba(10,10,10,.55)); }
.hero-corner { position: absolute; font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.35); z-index: 5; }
.hero-corner.tl { top: 6.5rem; left: 1.5rem; }
.hero-corner.tr { top: 6.5rem; right: 1.5rem; }
.hero-corner.bl { bottom: 1.75rem; left: 1.5rem; }
.hero-corner.br { bottom: 1.75rem; right: 1.5rem; color: var(--color-accent); }
.hero-content { position: relative; z-index: 10; max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; text-align: center; }
.hero-logo { margin-bottom: 2.5rem; }
.hero-logo img { width: 260px; height: auto; margin: 0 auto; opacity: .92; filter: brightness(0) invert(1); }
.hero-tag { height: 1.25rem; margin-bottom: 2.5rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .35em; text-transform: uppercase; color: color-mix(in oklab, var(--color-accent-light) 80%, white); }
.hero-tag .caret { color: color-mix(in oklab, var(--color-accent-light) 50%, transparent); margin-left: 2px; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.hero h1 { font-family: var(--font-display); font-size: clamp(3.25rem, 9vw, 6.5rem); font-weight: 300; color: white; line-height: .98; margin-bottom: 2rem; letter-spacing: -0.02em; }
.hero h1 .last { font-weight: 600; letter-spacing: -.035em; }
.hero-rule { margin: 0 auto 2rem; width: 6rem; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-accent) 60%, transparent), transparent); }
.hero-desc { font-size: 1.125rem; color: rgba(255,255,255,.6); max-width: 38rem; margin: 0 auto 3rem; line-height: 1.65; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.85rem; font-size: .875rem; font-weight: 500; border-radius: .375rem; transition: transform .25s, background .25s, border-color .25s, box-shadow .25s, color .25s; }
.btn-primary { background: var(--color-accent); color: white; }
.btn-primary:hover { background: var(--color-accent-light); box-shadow: 0 14px 32px -10px color-mix(in oklab, var(--color-accent) 50%, transparent); transform: translateY(-1px); }
.btn-ghost-dark { border: 1px solid var(--neutral-700); color: var(--neutral-400); }
.btn-ghost-dark:hover { border-color: var(--neutral-500); color: white; }
.scroll-indicator { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; color: rgba(255,255,255,.45); }
.scroll-indicator span { font-size: 9px; font-family: var(--font-mono); letter-spacing: .25em; text-transform: uppercase; }
.scroll-indicator svg { animation: bounce 1.4s infinite; }
@keyframes bounce { 0%,100% { transform: translateY(0) } 50% { transform: translateY(4px) } }

/* === Section header decor === */
.eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 1rem; }
.eyebrow.center { text-align: center; }
.section-rule { width: 2.5rem; height: 1px; background: var(--color-accent); margin-bottom: 1.5rem; }
.section-rule.center { margin-left: auto; margin-right: auto; }
.section-title { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 3.25rem); font-weight: 600; color: var(--color-primary); line-height: 1.05; letter-spacing: -0.02em; }
.section-lede { color: var(--color-muted); line-height: 1.7; }
.section-counter { font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: color-mix(in oklab, var(--color-accent) 70%, transparent); display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; }
.section-counter .num { color: var(--color-accent); }
.section-counter .bar { width: 1.5rem; height: 1px; background: currentColor; opacity: .5; }
.dark-section .section-title, .dark-section h2, .dark-section h3 { color: white; }
.dark-section .section-lede, .dark-section p { color: rgba(255,255,255,.6); }

/* === CLIENTS — marquee === */
.clients { padding: 5rem 0 5.5rem; background: var(--color-primary); position: relative; overflow: hidden; }
.clients-label { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; color: var(--color-accent); text-align: center; margin-bottom: 2.75rem; }
.marquee { position: relative; overflow: hidden; padding: 1rem 0; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.marquee-track { display: flex; gap: 4rem; width: max-content; animation: marquee 50s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item { flex: 0 0 auto; opacity: .55; filter: brightness(0) invert(1); transition: opacity .3s, transform .3s; display: flex; align-items: center; height: 3rem; }
.marquee-item:hover { opacity: 1; transform: scale(1.05); }
.marquee-item img { max-height: 3rem; max-width: 11rem; width: auto; object-fit: contain; }
/* Static grid fallback */
.clients-static { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem 3.5rem; }
.clients-static .marquee-item { filter: grayscale(1) brightness(0) invert(1); }
.clients-static .marquee-item:hover { filter: brightness(0) invert(1); }

/* === PARTNERS === */
.partners { padding: 2.75rem 0; background: #050505; border-top: 1px solid rgba(38,38,38,.4); }
.partners p { font-family: var(--font-mono); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.22); text-align: center; margin-bottom: 2rem; }
.partners-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem 3.5rem; }
.partner-logo { opacity: .25; transition: opacity .7s, transform .4s; filter: brightness(0) invert(1); }
.partner-logo:hover { opacity: .65; transform: translateY(-2px); }
.partner-logo img { max-height: 2rem; width: auto; object-fit: contain; }

/* === ABOUT === */
.about { padding: 7rem 0 8rem; background: white; }
.about-intro { max-width: 52rem; margin-bottom: 5rem; }
.about-intro h2 { margin: 0 0 2rem; }
.about-intro .body { display: flex; flex-direction: column; gap: 1.25rem; color: var(--color-muted); line-height: 1.8; font-size: 1.0625rem; }
.about-intro .body strong { font-weight: 500; color: var(--color-primary); }
.about-intro .body a.inline { color: var(--color-accent); text-decoration: underline; text-decoration-color: rgba(59,130,246,.3); text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.about-intro .body a.inline:hover { color: var(--color-accent-light); text-decoration-color: var(--color-accent); }
.cap-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cap-grid { grid-template-columns: repeat(4, 1fr); } }
.cap { padding: 1.75rem; border: 1px solid var(--neutral-100); border-radius: .75rem; transition: border-color .3s, transform .3s, box-shadow .3s; background: white; }
.cap:hover { border-color: rgba(59,130,246,.25); transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.18); }
.cap-icon { width: 2.75rem; height: 2.75rem; border-radius: .5rem; background: var(--neutral-100); border: 1px solid var(--neutral-100); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; transition: background .3s, border-color .3s; }
.cap:hover .cap-icon { background: color-mix(in oklab, var(--color-accent) 8%, white); border-color: color-mix(in oklab, var(--color-accent) 25%, transparent); }
.cap-icon svg { color: var(--neutral-400); transition: color .3s; }
.cap:hover .cap-icon svg { color: var(--color-accent); }
.cap h3 { font-size: .9375rem; font-weight: 600; color: var(--color-primary); margin-bottom: .625rem; }
.cap p { font-size: 13px; color: var(--color-muted); line-height: 1.65; }

/* === STATS — dark band === */
.stats { padding: 5rem 0 5.5rem; background: var(--color-primary); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); position: relative; overflow: hidden; }
.stats .container { position: relative; z-index: 1; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
@media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stats-grid > div { padding: 1.25rem 1.75rem; position: relative; }
.stats-grid > div + div::before { content: ""; position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 1px; background: rgba(255,255,255,.08); }
@media (max-width: 1023px) { .stats-grid > div:nth-child(odd)::before { display: none; } }
.stat-value { font-family: var(--font-display); font-size: clamp(3rem, 5.5vw, 4rem); font-weight: 500; color: white; margin-bottom: .375rem; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em; }
.stat-value .suf { color: var(--color-accent); }
.stat-label { font-size: .8125rem; font-weight: 500; color: rgba(255,255,255,.85); margin: .9rem 0 .25rem; }
.stat-desc { font-size: .75rem; color: rgba(255,255,255,.4); }

/* === SERVICES — timeline === */
.services { padding: 7rem 0 8rem; background: var(--color-surface); }
.svc-timeline { position: relative; }
.svc-line { position: absolute; left: 1.4rem; top: 1rem; bottom: 1rem; width: 1px; background: linear-gradient(180deg, transparent, var(--neutral-200) 5%, var(--neutral-200) 95%, transparent); }
@media (min-width: 1024px) { .svc-line { left: 0; right: 0; top: 1.4rem; bottom: auto; height: 1px; width: auto; background: linear-gradient(90deg, transparent, var(--neutral-200) 5%, var(--neutral-200) 95%, transparent); } }
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; position: relative; }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.svc { position: relative; padding-left: 4rem; }
@media (min-width: 1024px) { .svc { padding-left: 0; padding-top: 3rem; } }
.svc-node { position: absolute; left: 0; top: 0; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: white; border: 1px solid var(--neutral-200); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--color-accent); font-weight: 600; z-index: 1; transition: border-color .3s, transform .3s, box-shadow .3s; }
@media (min-width: 1024px) { .svc-node { left: 0; top: 0; } }
.svc:hover .svc-node { border-color: var(--color-accent); transform: scale(1.06); box-shadow: 0 0 0 6px color-mix(in oklab, var(--color-accent) 12%, transparent); }
.svc h3 { font-size: 1.125rem; font-weight: 600; color: var(--color-primary); margin-bottom: .5rem; }
.svc p { font-size: 13.5px; color: var(--color-muted); line-height: 1.7; max-width: 22rem; }
.svc-icon { color: var(--neutral-400); margin-bottom: .9rem; transition: color .3s; }
.svc:hover .svc-icon { color: var(--color-accent); }

/* === PROJECTS === */
.projects { padding: 6rem 0 8rem; background: white; }
.projects-head { display: flex; flex-direction: column; margin-bottom: 4rem; }
@media (min-width: 768px) { .projects-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.projects-head .lede { color: var(--color-muted); margin-top: 1rem; max-width: 28rem; }
@media (min-width: 768px) { .projects-head .lede { margin-top: 0; } }

/* Featured (first) project */
.proj-featured { display: block; position: relative; border-radius: 1rem; overflow: hidden; margin-bottom: 1.5rem; aspect-ratio: 21/10; min-height: 360px; cursor: pointer; isolation: isolate; }
.proj-featured img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.6,.2,1); }
.proj-featured:hover img { transform: scale(1.04); }
.proj-featured::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.85) 100%); }
.proj-featured-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 2.25rem 2.25rem; z-index: 1; color: white; display: flex; flex-direction: column; gap: .75rem; }
.proj-featured-meta { display: flex; align-items: center; gap: .75rem; }
.proj-featured-meta .badge { padding: .3rem .65rem; font-size: 10px; font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; background: color-mix(in oklab, var(--color-accent) 25%, transparent); border: 1px solid color-mix(in oklab, var(--color-accent) 40%, transparent); border-radius: .375rem; color: white; }
.proj-featured-meta .yr { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.7); }
.proj-featured h3 { font-family: var(--font-display); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 600; line-height: 1.05; max-width: 36rem; letter-spacing: -.02em; }
.proj-featured p { font-size: .95rem; color: rgba(255,255,255,.75); max-width: 36rem; line-height: 1.6; }
.proj-featured .cta { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 500; color: var(--color-accent-light); margin-top: .25rem; }
.proj-featured .cta svg { transition: transform .3s; }
.proj-featured:hover .cta svg { transform: translateX(4px); }

/* Other project cards — image-led with hover reveal */
.proj-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .proj-grid { grid-template-columns: repeat(3, 1fr); } }
.proj-card { position: relative; display: block; border-radius: .75rem; overflow: hidden; cursor: pointer; aspect-ratio: 4/3; isolation: isolate; background: var(--neutral-900); }
.proj-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.6,.2,1), filter .4s; }
.proj-card:hover img { transform: scale(1.06); filter: brightness(.55); }
.proj-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.85) 100%); transition: opacity .3s; }
.proj-card-body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem 1.5rem 1.5rem; color: white; z-index: 1; }
.proj-card-meta { display: flex; align-items: center; gap: .65rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.proj-card-meta .cat { color: var(--color-accent-light); }
.proj-card-meta .sep { color: rgba(255,255,255,.3); }
.proj-card-meta .yr { color: rgba(255,255,255,.55); }
.proj-card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin-top: .5rem; line-height: 1.2; letter-spacing: -.01em; }
.proj-card .summary { margin-top: .65rem; font-size: .8125rem; color: rgba(255,255,255,.7); line-height: 1.55; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s, opacity .3s, margin-top .3s; }
.proj-card:hover .summary { max-height: 6rem; opacity: 1; }
.proj-card .scope-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .85rem; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.proj-card:hover .scope-chips { opacity: 1; transform: translateY(0); }
.proj-card .scope-chips span { padding: .25rem .55rem; font-size: 10px; font-family: var(--font-mono); letter-spacing: .05em; text-transform: uppercase; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: .3rem; color: rgba(255,255,255,.85); }
.proj-arrow { position: absolute; top: 1rem; right: 1rem; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; color: white; transition: background .3s, transform .3s; opacity: 0; z-index: 2; }
.proj-card:hover .proj-arrow { opacity: 1; }
.proj-card:hover .proj-arrow:hover { background: var(--color-accent); transform: rotate(-45deg); }

/* === TECH — spec sheet === */
.tech { padding: 6rem 0 8rem; background: var(--color-primary); color: white; }
.tech.dark-section .section-title { color: white; }
.tech-table { border-top: 1px solid rgba(255,255,255,.08); }
.tech-row { display: grid; grid-template-columns: 1fr; gap: .75rem; padding: 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,.06); transition: background .25s; }
@media (min-width: 768px) { .tech-row { grid-template-columns: 16rem 1fr; gap: 2rem; align-items: baseline; } }
.tech-row:hover { background: rgba(255,255,255,.02); }
.tech-row h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent); font-weight: 500; padding-top: .25rem; }
.tech-row .items { display: flex; flex-wrap: wrap; gap: .5rem; }
.tech-row .items span { padding: .375rem .75rem; font-size: 12.5px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.85); border-radius: .375rem; transition: all .2s; }
.tech-row .items span:hover { background: color-mix(in oklab, var(--color-accent) 15%, transparent); border-color: color-mix(in oklab, var(--color-accent) 40%, transparent); color: white; }

/* === ON SET === */
.onset { padding: 7rem 0 8rem; background: var(--color-surface); }
.onset-stack > * + * { margin-top: 6rem; }
.onset-intro { max-width: 52rem; }
.onset-intro h2 { margin-bottom: 1.25rem; }
.onset-intro .light { font-weight: 300; color: var(--color-muted); }
.reel-frame { position: relative; padding-top: 56.25%; border-radius: .75rem; overflow: hidden; border: 1px solid rgba(229,229,229,.8); box-shadow: 0 30px 80px -30px rgba(0,0,0,.25); }
.reel-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.credits-list { border-top: 1px solid var(--neutral-200); }
.credit-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: 1rem .75rem; margin: 0 -.75rem; border-bottom: 1px solid var(--neutral-100); border-radius: .5rem; transition: background .2s, padding .25s; }
@media (min-width: 768px) { .credit-row { grid-template-columns: 2fr 1.5fr 1.5fr .75fr; align-items: baseline; } }
.credit-row:hover { background: white; padding-left: 1.25rem; padding-right: 1.25rem; box-shadow: 0 4px 16px -10px rgba(0,0,0,.1); }
.credit-row .t { font-size: .9375rem; font-weight: 500; color: var(--color-primary); }
.credit-row .r { font-size: .875rem; color: var(--color-muted); }
.credit-row .f { font-size: .8125rem; color: var(--color-muted); display: none; font-family: var(--font-mono); letter-spacing: .05em; text-transform: uppercase; font-size: 10.5px; }
@media (min-width: 768px) { .credit-row .f { display: block; } }
.credit-row .y { font-family: var(--font-mono); font-size: 11px; color: var(--color-accent); text-align: right; }
@media (min-width: 768px) { .credit-row .y { text-align: left; } }
.gear-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .gear-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gear-grid { grid-template-columns: repeat(4, 1fr); } }
.gear-card { background: white; border: 1px solid rgba(229,229,229,.8); border-radius: .75rem; padding: 1.75rem; transition: border-color .3s, box-shadow .3s, transform .3s; height: 100%; }
.gear-card:hover { border-color: rgba(59,130,246,.2); box-shadow: 0 14px 36px -18px rgba(0,0,0,.15); transform: translateY(-2px); }
.gear-card h3 { font-size: 1rem; font-weight: 600; color: var(--color-primary); margin-bottom: 1rem; }
.gear-card ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.gear-card li { font-size: 13px; color: var(--color-muted); display: flex; gap: .5rem; line-height: 1.55; }
.gear-card li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent); margin-top: .55rem; flex-shrink: 0; opacity: .6; }

/* === CONTACT === */
.contact { padding: 7rem 0 8rem; background: white; }
.contact-head { max-width: 40rem; margin: 0 auto 3.5rem; text-align: center; }
.contact-head .section-rule { margin-left: auto; margin-right: auto; width: 2rem; }
.contact-head h2 { margin-bottom: 1.25rem; }
.contact-head .lede { color: var(--color-muted); line-height: 1.7; font-size: 1rem; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 40rem; margin: 0 auto 3.5rem; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-card { display: flex; flex-direction: column; align-items: center; padding: 1.75rem; background: white; border: 1px solid rgba(229,229,229,.8); border-radius: .75rem; transition: border-color .3s, box-shadow .3s, transform .3s; }
.contact-card:hover { border-color: rgba(59,130,246,.2); box-shadow: 0 14px 36px -18px rgba(0,0,0,.12); transform: translateY(-2px); }
.contact-card .icon { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--neutral-100); border: 1px solid var(--neutral-100); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; transition: all .3s; }
.contact-card:hover .icon { background: color-mix(in oklab, var(--color-accent) 8%, white); border-color: color-mix(in oklab, var(--color-accent) 25%, transparent); }
.contact-card .icon svg { color: var(--neutral-400); transition: color .3s; }
.contact-card:hover .icon svg { color: var(--color-accent); }
.contact-card .label { font-size: .9rem; font-weight: 500; color: var(--color-primary); margin-bottom: .25rem; }
.contact-card .val { font-size: .75rem; color: var(--color-muted); }
.cta-banner { position: relative; overflow: hidden; border-radius: 1rem; background: var(--color-primary); padding: 3.5rem 2rem; text-align: center; }
@media (min-width: 768px) { .cta-banner { padding: 4.5rem 3.5rem; } }
.cta-banner-grid { position: absolute; inset: 0; opacity: .04; background-image: linear-gradient(color-mix(in oklab, var(--color-accent) 50%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--color-accent) 50%, transparent) 1px, transparent 1px); background-size: 60px 60px; }
.cta-banner > .inner { position: relative; z-index: 1; }
.cta-banner h3 { font-family: var(--font-display); font-size: clamp(1.625rem, 3.4vw, 2.25rem); font-weight: 600; color: white; margin-bottom: .85rem; letter-spacing: -.02em; }
.cta-banner p { color: rgba(255,255,255,.55); margin: 0 auto 2rem; max-width: 30rem; font-size: 1rem; line-height: 1.7; }

/* === FOOTER === */
.footer { background: #050505; padding: 4rem 0 2rem; border-top: 1px solid rgba(38,38,38,.5); color: rgba(255,255,255,.4); }
.footer-top { display: grid; grid-template-columns: 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(38,38,38,.4); }
@media (min-width: 768px) { .footer-top { grid-template-columns: 5fr 3fr 3fr; gap: 2rem; } }
.footer-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.footer-brand img { width: 24px; height: 24px; opacity: .6; filter: brightness(0) invert(1); }
.footer-brand span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.footer p.about-line { font-size: .875rem; line-height: 1.7; max-width: 22rem; margin-bottom: 1.5rem; }
.footer-socials { display: flex; gap: 1rem; }
.footer-socials a { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); transition: color .2s, border-color .2s, background .2s; }
.footer-socials a:hover { color: white; border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 15%, transparent); }
.footer-col h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .625rem; }
.footer-col a { font-size: 13px; color: rgba(255,255,255,.5); transition: color .2s; }
.footer-col a:hover { color: white; }
.footer-bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 2rem; }
@media (min-width: 640px) { .footer-bottom { flex-direction: row; } }
.footer-bottom p { font-size: 11px; color: rgba(255,255,255,.25); }

/* === PROJECT OVERLAY — editorial case study === */
.po-mask { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); display: flex; justify-content: center; overflow-y: auto; padding: 0; animation: poFade .35s ease-out; }
@keyframes poFade { from { opacity: 0; } to { opacity: 1; } }
.po { background: white; width: 100%; max-width: 100%; min-height: 100vh; animation: poSlide .55s cubic-bezier(.2,.7,.2,1); }
@keyframes poSlide { from { transform: translateY(24px); opacity: .3; } to { transform: translateY(0); opacity: 1; } }

.po-close { position: fixed; top: 1rem; right: 1rem; z-index: 10; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: white; box-shadow: 0 6px 20px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; color: var(--color-primary); transition: transform .2s, color .2s; }
.po-close:hover { color: var(--color-accent); transform: scale(1.08) rotate(90deg); }

/* nav */
.po-nav { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--neutral-200); padding: 1rem 0; }
.po-nav-inner { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.po-back { display: inline-flex; align-items: center; gap: .5rem; font-size: 13px; color: var(--color-muted); transition: color .2s; }
.po-back:hover { color: var(--color-primary); }
.po-back svg { transition: transform .2s; }
.po-back:hover svg { transform: translateX(-2px); }
.po-counter { display: inline-flex; align-items: baseline; gap: .25rem; justify-self: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em; color: var(--color-muted); }
.po-counter .n { color: var(--color-accent); font-weight: 600; }
.po-counter .d { opacity: .4; }
.po-brand { justify-self: end; font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--color-muted); }
@media (max-width: 720px) { .po-brand { display: none; } .po-nav-inner { grid-template-columns: 1fr auto; } }

/* hero */
.po-hero { position: relative; padding: 7rem 0 5.5rem; background: var(--color-primary); overflow: hidden; }
.po-hero-bg { position: absolute; inset: 0; }
.po-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; transform: scale(1.05); animation: heroPan 22s ease-in-out infinite alternate; }
.po-hero-grid { position: absolute; inset: 0; opacity: .05; background-image: linear-gradient(color-mix(in oklab, var(--color-accent) 60%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--color-accent) 60%, transparent) 1px, transparent 1px); background-size: 80px 80px; }
.po-hero-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.55), rgba(10,10,10,.85) 65%, rgba(10,10,10,.95) 100%); }
.po-hero-inner { position: relative; z-index: 1; }
.po-hero-meta { display: inline-flex; align-items: center; gap: .85rem; padding: .5rem .9rem; border: 1px solid color-mix(in oklab, var(--color-accent) 35%, transparent); background: color-mix(in oklab, var(--color-accent) 10%, transparent); border-radius: 999px; margin-bottom: 2rem; }
.po-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent-light); }
.po-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent); opacity: .6; }
.po-yr { font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; color: rgba(255,255,255,.55); }
.po-title { font-family: var(--font-display); font-size: clamp(2.75rem, 7vw, 5.25rem); font-weight: 600; color: white; line-height: .98; margin-bottom: 1.75rem; letter-spacing: -.03em; max-width: 18ch; }
.po-lede { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); color: rgba(255,255,255,.7); max-width: 52rem; line-height: 1.55; }
.po-hero-rule { width: 4rem; height: 1px; background: var(--color-accent); margin-top: 3rem; opacity: .8; }
.po-hero-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.po-corner-r { color: var(--color-accent); }

/* facts strip */
.po-facts { background: var(--color-primary); border-top: 1px solid rgba(255,255,255,.06); }
.po-facts-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
@media (min-width: 768px) { .po-facts-grid { grid-template-columns: repeat(4, 1fr); } }
.po-facts-grid > div { padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: .4rem; border-top: 1px solid rgba(255,255,255,.06); }
.po-facts-grid > div + div { border-left: 1px solid rgba(255,255,255,.06); }
@media (max-width: 767px) { .po-facts-grid > div:nth-child(odd) { border-left: 0; } }
.po-facts .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.po-facts .val { font-size: .95rem; color: white; font-weight: 500; }

/* sections */
.po-section { padding: 6rem 0; }
@media (max-width: 768px) { .po-section { padding: 4rem 0; } }

/* opening */
.po-opening { background: white; }
.po-opening-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) { .po-opening-grid { grid-template-columns: 16rem 1fr; gap: 4rem; align-items: start; } }
.po-opening-label, .po-body-label { display: flex; align-items: center; gap: .65rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--color-muted); }
.po-opening-label .num, .po-body-label .num { color: var(--color-accent); font-weight: 600; }
.po-opening-label .bar, .po-body-label .bar { width: 1.75rem; height: 1px; background: currentColor; opacity: .4; }
.po-opening-text { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 400; line-height: 1.5; color: var(--color-primary); letter-spacing: -.01em; max-width: 48rem; }

/* feature image */
.po-feature { background: white; padding: 0 0 2rem; }
.po-feature-inner { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; }
.po-feature-inner img { width: 100%; aspect-ratio: 21 / 10; object-fit: cover; border-radius: .75rem; box-shadow: 0 30px 80px -30px rgba(0,0,0,.3); }
.po-feature-cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); }
.po-feature-cap span:last-child { color: var(--color-accent); }

/* body */
.po-body { background: white; }
.po-body-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: start; }
@media (min-width: 1024px) { .po-body-grid { grid-template-columns: minmax(0, 1fr) 22rem; gap: 5rem; } }
.po-body-main { min-width: 0; }
.po-body-prose { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 1.5rem; color: var(--color-muted); line-height: 1.85; font-size: 1.0625rem; max-width: 40rem; }
.po-body-prose p:first-of-type::first-letter { font-family: var(--font-display); font-size: 3.5rem; font-weight: 600; float: left; line-height: 1; padding: .15rem .65rem 0 0; color: var(--color-primary); }

.po-hl { list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 1.5rem; border-top: 1px solid var(--neutral-200); }
.po-hl li { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--neutral-200); transition: padding .25s, background .25s; }
.po-hl li:hover { padding-left: .75rem; padding-right: .75rem; background: var(--color-surface); border-radius: .5rem; }
.po-hl .hl-n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; color: var(--color-accent); font-weight: 600; }
.po-hl .hl-t { font-size: .9375rem; color: var(--color-primary); line-height: 1.55; font-weight: 500; }

/* sidecar (sticky on desktop) */
.po-sidecar { position: relative; }
@media (min-width: 1024px) { .po-sidecar { position: sticky; top: 6rem; } }
.po-spec { display: flex; flex-direction: column; padding: 1.75rem; border: 1px solid var(--neutral-200); border-radius: .75rem; background: var(--color-surface); }
.po-spec-row { display: flex; flex-direction: column; gap: .85rem; padding: 1.25rem 0; border-bottom: 1px solid var(--neutral-200); }
.po-spec-row:first-child { padding-top: 0; }
.po-spec-row:last-child { padding-bottom: 0; border-bottom: 0; }
.po-spec-row .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--color-muted); }
.po-spec-row .v { display: flex; flex-wrap: wrap; gap: .4rem; }
.po-spec-row .chip { padding: .35rem .7rem; font-size: 12px; font-weight: 500; background: white; border: 1px solid var(--neutral-200); color: var(--color-primary); border-radius: .375rem; }
.po-spec-row .chip-accent { background: color-mix(in oklab, var(--color-accent) 8%, white); border-color: color-mix(in oklab, var(--color-accent) 25%, transparent); color: var(--color-accent); }

/* CTA */
.po-cta { background: var(--color-surface); padding: 2rem 0 6rem; }
.po-cta-inner { position: relative; overflow: hidden; padding: 3.5rem 2.5rem; border-radius: 1rem; background: var(--color-primary); display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; }
@media (min-width: 768px) { .po-cta-inner { flex-direction: row; align-items: center; justify-content: space-between; padding: 3.5rem 3.5rem; } }
.po-cta-inner h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; color: white; letter-spacing: -.02em; margin: .35rem 0 .75rem; }
.po-cta-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--color-accent); }
.po-cta-desc { color: rgba(255,255,255,.6); max-width: 32rem; line-height: 1.6; font-size: .9375rem; }

/* related */
.po-related { background: white; padding: 5rem 0 6rem; border-top: 1px solid var(--neutral-200); }
.po-related-head { margin-bottom: 2.5rem; }
.po-related-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--color-accent); }
.po-related-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .po-related-grid { grid-template-columns: repeat(3, 1fr); } }
.po-related-card { display: block; cursor: pointer; }
.po-related-card .img { aspect-ratio: 16/10; border-radius: .65rem; overflow: hidden; background: var(--neutral-100); margin-bottom: 1rem; }
.po-related-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.po-related-card:hover .img img { transform: scale(1.05); }
.po-related-card .meta { display: flex; align-items: center; gap: .65rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.po-related-card .cat { color: var(--color-accent); }
.po-related-card .yr { color: var(--color-muted); }
.po-related-card h4 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--color-primary); margin: .4rem 0 .65rem; letter-spacing: -.01em; }
.po-related-card .go { display: inline-flex; align-items: center; gap: .4rem; font-size: 12px; color: var(--color-muted); transition: color .2s, gap .2s; font-weight: 500; }
.po-related-card:hover .go { color: var(--color-accent); gap: .65rem; }

/* prev / next */
.po-prevnext { background: var(--color-primary); border-top: 1px solid rgba(255,255,255,.06); }
.po-prevnext-grid { max-width: 76rem; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; }
.po-prevnext a { padding: 2.5rem 1.75rem; display: flex; align-items: center; gap: 1.5rem; cursor: pointer; transition: background .25s; color: rgba(255,255,255,.85); }
.po-prevnext a:hover { background: rgba(255,255,255,.03); }
.po-prevnext .next { justify-content: flex-end; text-align: right; border-left: 1px solid rgba(255,255,255,.06); }
.po-prevnext .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: .35rem; }
.po-prevnext .name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: white; transition: color .2s; }
.po-prevnext a:hover .name { color: var(--color-accent-light); }
.po-prevnext svg { color: rgba(255,255,255,.35); transition: color .2s, transform .25s; flex-shrink: 0; }
.po-prevnext a:hover svg { color: var(--color-accent); }
.po-prevnext a:hover.prev svg { transform: translateX(-4px); }
.po-prevnext a:hover.next svg { transform: translateX(4px); }

/* foot */
.po-foot { padding: 2.25rem 0; background: #050505; }
.po-foot-inner { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; }
@media (min-width: 768px) { .po-foot-inner { flex-direction: row; } }
.po-foot-inner .brand { font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.4); transition: color .2s; }
.po-foot-inner .brand:hover { color: white; }
.po-foot-inner p { font-size: 11px; color: rgba(255,255,255,.25); }