:root{
  --black:#000;
  --ink:#050505;
  --paper:#f4f4f0;
  --mute:#7a7a76;
  --line:rgba(244,244,240, 0.10);
  --volt:#FAE000;
  --volt-deep:#D9C200;
  /* add. brand palette */
  --cy:#A3EFF1;
  --b1:#4A94B8;
  --b2:#1B6298;
  --nv:#1C176C;
  --pp:#6B689F;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --pad-x:clamp(16px, 3.12vw, 44px);
  --display:'Clash Display',system-ui,sans-serif;
  --body:'Satoshi',system-ui,sans-serif;
  --mono:'Satoshi',system-ui,sans-serif;
  --brand:'Clash Display','Satoshi',system-ui,sans-serif;
}

/* ── Type system: Clash Display headings + Satoshi body ─────── */
h1,h2,h3,h4,h5,h6{ font-weight:600; letter-spacing:-.015em }
*{margin:0;padding:0;box-sizing:border-box}
em,i{font-style:normal}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:15.2px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
::selection{background:var(--volt);color:var(--black)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* PILL HEADER */
.site-header{
  position:fixed; top:18px; left:0; right:0; z-index:90;
  display:flex; justify-content:center;
  pointer-events:none;
  transition:transform .4s var(--ease),opacity .4s ease;
}
.site-header.is-hidden{transform:translateY(-150%)}
.site-header.is-scrolled .pillnav{
  background:rgba(5,5,8,0.95);
  border-color:rgba(244,241,232,0.18);
}
.site-header > *{pointer-events:auto}
.site-header .hdr-row{display:flex; align-items:center; gap:18px; flex-wrap:nowrap; margin:0; --bs-gutter-x:0}

.brand{
  display:inline-flex; align-items:center;
  padding:6px 16px;
  background:rgba(12,13,22,0.72);
  border:1px solid rgba(244,241,232,0.12);
  border-radius:999px;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 40px -12px rgba(0,0,0,.6);
  transition:transform .25s var(--ease-out), border-color .25s ease;
}
.brand:hover{ transform:translateY(-1px); border-color:rgba(244,241,232,.22) }
.brand-img{
  display:block;
  height:46px;
  width:auto;
}

.pillnav{
  position:relative; display:flex; align-items:center;
  padding:8px;
  background:rgba(12,13,22,0.72);
  border:1px solid rgba(244,241,232,0.12);
  border-radius:999px;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 40px -12px rgba(0,0,0,.6);
}
.pillnav button{
  position:relative;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  padding:10px 18px; border-radius:999px;
  transition:color .35s var(--ease);
  white-space:nowrap;
}
.pillnav button:hover,.pillnav button.is-active{color:#fff}
.pillnav .indicator{
  position:absolute; bottom:6px; left:0;
  width:20px; height:2px;
  background:var(--volt); border-radius:2px;
  box-shadow:0 0 12px var(--volt);
  transition:left .45s cubic-bezier(.7,0,.2,1),width .45s cubic-bezier(.7,0,.2,1);
  pointer-events:none;
}

.cta-pill{
  display:inline-flex; align-items:center; gap:.6em;
  padding:12px 20px;
  background:var(--volt); color:var(--black);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  border-radius:999px; font-weight:500;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.cta-pill:hover{transform:translateY(-1px);box-shadow:0 14px 40px -8px rgba(250,238,28,.55)}
.cta-pill .arr{transition:transform .35s var(--ease)}
.cta-pill:hover .arr{transform:translateX(4px)}

@media(max-width:880px){
  .pillnav button{padding:7px 8px;font-size:9px;letter-spacing:.11em}
}
@media(max-width:760px){
  .site-header{top:12px}
  .site-header .hdr-row{gap:6px;padding:0 8px}
  .brand{padding:5px 12px}
  .brand-img{height:36px}
  .pillnav{padding:3px}
  .pillnav button{padding:6px 7px;font-size:8px;letter-spacing:.08em}
  .cta-pill{padding:8px 10px;font-size:8px;letter-spacing:.1em}
  .cta-pill .arr{display:none}
}
@media(max-width:560px){
  .site-header .hdr-row{gap:4px;padding:0 6px}
  .brand{padding:4px 10px}
  .brand-img{height:30px}
  .pillnav button{padding:5px 6px;font-size:7.5px;letter-spacing:.06em}
  .pillnav .nav-secondary[data-target="clients"],
  .pillnav .nav-secondary[data-target="team"]{display:none}
  .cta-pill{padding:7px 9px;font-size:8px;letter-spacing:.08em}
}

/* HERO */
.hero{
  min-height:100vh; padding:160px 32px 64px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.hero h1{
  font-family:var(--display);
  font-size:clamp(47.3px, 10.1vw, 160.8px);
  line-height:.88; letter-spacing:-.01em;
  text-transform:uppercase;
}
.hero h1 em{color:var(--volt);font-style:normal}
.hero .tagline{
  max-width:42ch; font-size:17.1px;
  color:var(--paper); margin-top:60px;
}

section{padding:160px 40px}
@media(max-width:760px){section{padding:100px 24px}}

.label{
  font-size:13px; color:var(--mute);
  margin-bottom:56px; letter-spacing:.02em;
}
h2{
  font-family:var(--display);
  font-size:clamp(31.8px, 6vw, 80.8px);
  line-height:.92; letter-spacing:-.005em;
  text-transform:uppercase;
  margin-bottom:56px;
}

/* WORK GRID (home) */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:760px){.work-grid{grid-template-columns:1fr}}
.tile{
  aspect-ratio:5/4; border-radius:8px;
  overflow:hidden; position:relative;
  transition:transform .5s var(--ease);
  cursor:pointer;
}
.tile:hover{transform:translateY(-4px)}
.tile .art{position:absolute;inset:0;transition:transform .8s var(--ease)}
.tile:hover .art{transform:scale(1.03)}
.tile .meta{
  position:absolute; left:24px; bottom:24px; right:24px;
  display:flex; justify-content:space-between; align-items:end;
  z-index:2;
}
.tile .name{font-family:var(--display);font-size:29.4px;text-transform:uppercase}
.tile .cat{font-size:12px;color:var(--paper);opacity:.7;text-align:right}

.art-1{background:#141414}
.art-1 .grid-pat{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(244,244,240, .06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,244,240, .06) 1px,transparent 1px);
  background-size:36px 36px;
}
.art-1 .blob{
  position:absolute; width:48%; height:65%;
  background:var(--volt); border-radius:50%;
  top:18%; left:26%;
  box-shadow:0 0 100px rgba(250,238,28,.25);
}
.art-2{background:var(--volt)}
.art-2 .word{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display);
  font-size:clamp(40.4px, 8vw, 93.7px);
  color:var(--black); text-transform:uppercase;
  letter-spacing:-.01em;
}
.art-3{background:#0e0e0e}
.art-3 .target{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:75%; aspect-ratio:1;
}
.art-3 .target div{
  position:absolute; border:1px solid var(--paper);
  border-radius:50%; top:50%; left:50%;
  transform:translate(-50%,-50%);
}
.art-3 .target div:nth-child(1){width:100%;height:100%;opacity:.3}
.art-3 .target div:nth-child(2){width:65%;height:65%;opacity:.55}
.art-3 .target div:nth-child(3){width:30%;height:30%;background:var(--volt);border-color:var(--volt)}
.art-4{background:#0a0a0a;display:flex;align-items:center;justify-content:center}
.art-4 .digit{
  font-family:var(--display);
  font-size:clamp(93.7px, 18.8vw, 201.2px); line-height:1;
  -webkit-text-stroke:1px var(--paper); color:transparent;
}

/* shell + reveal helpers (used by services/depts) */
.shell{ max-width:1480px; margin:0 auto; padding:0 var(--pad-x) }
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mute);
  display:inline-flex; align-items:center; gap:.7em;
  transition:color .8s var(--ease-out);
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--volt); box-shadow:0 0 12px var(--volt);
  animation:blink 1.6s ease-in-out infinite;
}
.reveal{ opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out) }
.reveal.is-in{ opacity:1; transform:none }
.reveal.delay-1{ transition-delay:.08s }
.reveal.delay-2{ transition-delay:.16s }
.reveal.delay-3{ transition-delay:.24s }

/* ============================================================
   ABOUT / STUDIO — manifesto, about, approach, signature
   ============================================================ */







/* Futuristic unfold reveal — each word emerges from a thin compressed line */
.fx-word{
  display:inline-block;
  position:relative;
  transform-origin:center;
  transform:translateY(14px) scaleY(.08);
  opacity:0;
  filter:blur(5px);
  letter-spacing:.08em;
  transition:
    transform   .9s cubic-bezier(.16,1,.3,1),
    opacity     .7s cubic-bezier(.16,1,.3,1),
    filter      .7s cubic-bezier(.16,1,.3,1),
    letter-spacing .9s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 55ms);
  will-change:transform, opacity, filter;
}
/* Thin glow line under each word during the unfold (vanishes when settled) */
.fx-word::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(163,239,241,.55), transparent);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.about-lede.lede-in .fx-word{
  transform:translateY(0) scaleY(1);
  opacity:1;
  filter:blur(0);
  letter-spacing:-.015em;
}
.about-lede.lede-in .fx-word::before{
  /* brief shimmer during the unfold, gone by the end */
  animation:fxUnfold 0.9s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes fxUnfold{
  0%   { opacity:0 }
  40%  { opacity:1 }
  100% { opacity:0 }
}
@media (prefers-reduced-motion: reduce){
  .fx-word{ transition:none; transform:none; opacity:1; filter:none; letter-spacing:-.015em }
  .fx-word::before{ display:none }
}

@media(max-width:880px){
  
}

.about-col p:last-child{ margin-bottom:0 }













@media(max-width:760px){
  
  
  
  
}

.contact{text-align:center}
.contact .pre{font-size:13px;color:var(--mute);margin-bottom:32px}
.contact h2{margin-bottom:0;font-size:clamp(31.8px, 7.4vw, 107.5px)}
.contact h2 a{
  border-bottom:4px solid transparent; display:inline-block;
  transition:border-color .35s,color .35s;
}
.contact h2 a:hover{color:var(--volt);border-bottom-color:var(--volt)}

footer{
  padding:32px 40px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
  font-size:13px; color:var(--mute);
}
footer .links{display:flex;gap:24px}
footer a:hover{color:var(--volt)}

/* ============================================================
   WORK OVERLAY  +  VIDEO PAGE
   ============================================================ */

/* shared dark-glass pill */
.dg-pill{
  display:inline-flex; align-items:center; gap:.7em;
  padding:12px 18px;
  background:rgba(12,13,22,0.72);
  border:1px solid rgba(244,241,232,0.12);
  border-radius:999px;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 40px -12px rgba(0,0,0,.6);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
  transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s var(--ease-out);
  cursor:pointer;
}
.dg-pill:hover{color:#fff;border-color:rgba(244,241,232,.22);transform:translateY(-1px)}
.dg-pill .x-mark{color:var(--volt);font-size:13.3px;margin-right:4px}

/* WORK OVERLAY */
.work-overlay{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  opacity:0; pointer-events:none;
  transition:opacity .5s var(--ease-out);
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.work-overlay.is-open{opacity:1;pointer-events:auto}

.wo-toprail{
  position:fixed; top:18px; right:var(--pad-x); z-index:250;
  display:flex; align-items:center; gap:10px;
  opacity:0; transform:translateY(-12px); pointer-events:none;
  transition:opacity .5s var(--ease-out) .15s,transform .5s var(--ease-out) .15s;
}
.work-overlay.is-open ~ .wo-toprail{
  opacity:1; transform:none; pointer-events:auto;
}

.wo-watermark{
  position:fixed; bottom:-0.15em; left:50%;
  transform:translateX(-50%);
  font-family:var(--display); font-weight:400;
  font-size:clamp(120.4px, 18.8vw, 254.6px);
  line-height:.85; letter-spacing:-.02em;
  color:rgba(255,255,255,0.025);
  text-transform:uppercase; white-space:nowrap;
  pointer-events:none; user-select:none;
  z-index:1;
}

.wo-column{
  position:relative; z-index:2;
  max-width:560px; margin:0 auto;
  padding:96px var(--pad-x) 200px;
  transition:max-width .5s var(--ease-out);
}
.wo-column.is-grid{max-width:1100px}

.wo-header{
  position:sticky; top:0; z-index:5;
  padding:18px 0 20px;
  background:linear-gradient(180deg,var(--ink) 70%,rgba(5,5,5, 0));
  margin-bottom:24px;
}
.wo-progress{
  height:2px; background:rgba(255,255,255,.08);
  border-radius:2px; overflow:hidden; margin-bottom:14px;
}
.wo-progress .fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--volt) 0%,#ffd633 100%);
  box-shadow:0 0 12px var(--volt);
  transition:width .12s linear;
}
.wo-meta-row{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px;
}
.wo-counter{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  font-variant-numeric:tabular-nums;
}
.wo-counter .cur{color:var(--volt)}
.wo-toggle{
  display:inline-flex; padding:4px;
  background:rgba(12,13,22,.72);
  border:1px solid rgba(244,241,232,.12);
  border-radius:999px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.wo-toggle button{
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  color:rgba(255,255,255,.55);
  transition:background .25s ease,color .25s ease;
}
.wo-toggle button:hover{color:#fff}
.wo-toggle button.is-active{background:var(--paper);color:var(--ink)}
.wo-toggle button svg{width:14px;height:14px}

/* CARDS */
.wo-cards{display:flex;flex-direction:column;gap:14px}
.wo-column.is-grid .wo-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
@media(max-width:760px){
  .wo-column.is-grid .wo-cards{grid-template-columns:repeat(2,1fr)}
}

.wo-card{
  position:relative; border-radius:10px; overflow:hidden;
  cursor:pointer; isolation:isolate;
  transition:transform .5s var(--ease-out),opacity .35s ease;
}
.wo-card.ar-16-9 {aspect-ratio:16/9}
.wo-card.ar-16-11{aspect-ratio:16/11}
.wo-card.ar-4-5  {aspect-ratio:4/5}
.wo-card.ar-21-9 {aspect-ratio:21/9}
.wo-column.is-grid .wo-card{aspect-ratio:16/11 !important}
.wo-card.is-hidden{display:none}
.wo-card:hover{transform:scale(1.01)}

.wo-card .art{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(at 28% 32%,var(--c1) 0%,transparent 50%),
    radial-gradient(at 75% 70%,var(--c2) 0%,transparent 55%),
    linear-gradient(160deg,var(--c2),var(--c3));
}
.wo-card .orb{
  position:absolute; z-index:2;
  width:60%; height:60%; top:20%; left:20%;
  background:radial-gradient(circle,var(--c1) 0%,transparent 60%);
  filter:blur(28px); mix-blend-mode:screen;
  opacity:.55; pointer-events:none;
  animation:orbDrift 11s ease-in-out infinite;
}
@keyframes orbDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(8%,-6%) scale(1.15)}
}
.wo-card .grain{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.10; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.wo-card::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.55) 100%);
}
.wo-card .meta-top{
  position:absolute; top:18px; left:22px; right:22px; z-index:6;
  display:flex; gap:14px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
  opacity:0; transform:translateY(-6px);
  transition:opacity .35s ease,transform .35s var(--ease-out);
}
.wo-card:hover .meta-top{opacity:1;transform:none}
.wo-card .ttl{
  position:absolute; bottom:22px; left:22px; z-index:6;
  font-family:var(--display);
  font-size:clamp(14.7px, 1.4vw, 23px);
  line-height:.9; text-transform:uppercase;
  color:#fff; max-width:calc(100% - 80px);
  text-shadow:0 4px 24px rgba(0,0,0,.4);
}
.wo-card .ttl em{ color:var(--volt) }
.wo-card .idx{
  position:absolute; bottom:22px; right:22px; z-index:6;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; color:rgba(255,255,255,.85);
  font-variant-numeric:tabular-nums;
}
.wo-card .play-glass{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.85);
  width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:17.1px; z-index:6;
  opacity:0;
  transition:opacity .35s ease,transform .45s var(--ease-out);
}
.wo-card:hover .play-glass{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* FILTERS */
.wo-filters{
  position:fixed; top:78px; right:var(--pad-x); z-index:251;
  width:min(420px,calc(100vw - 32px));
  background:rgba(12,13,22,.92);
  border:1px solid rgba(244,241,232,.12);
  border-radius:16px; padding:22px;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none;
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);
}
.wo-filters.is-open{opacity:1;transform:none;pointer-events:auto}
.wo-filters h4{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:10px; font-weight:400;
}
.wo-filters .group + .group{margin-top:16px}
.wo-chips{display:flex;flex-wrap:wrap;gap:6px}
.wo-chip{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  padding:7px 12px; border-radius:999px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.75);
  border:1px solid transparent;
  transition:background .25s ease,color .25s ease;
}
.wo-chip:hover{background:rgba(255,255,255,.12);color:#fff}
.wo-chip.is-active{background:var(--volt);color:var(--ink);border-color:var(--volt)}

/* CASE PAGE */
.video-page{
  position:fixed; inset:0; z-index:300;
  background:var(--ink);
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease-out);
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.video-page.is-open{opacity:1;pointer-events:auto}
.video-page.is-swapping{opacity:.4;transition:opacity .2s ease}

.vp-topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad-x);
  background:linear-gradient(180deg,rgba(5,5,5, .92) 0%,rgba(5,5,5, .4) 70%,transparent);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.vp-topbar .brand-mini{
  font-family:var(--brand); font-size:20.9px; line-height:1;
  letter-spacing:-.02em;
  font-weight:700;
}
.vp-topbar .brand-mini .dot{color:var(--volt);margin-left:1px}
.vp-now{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.65);
}
.vp-now .cur{color:var(--volt);font-variant-numeric:tabular-nums}

.vp-inner{
  max-width:1280px; margin:0 auto;
  padding:28px var(--pad-x) 120px;
}
.vp-player{
  position:relative; aspect-ratio:16/9;
  border-radius:10px; overflow:hidden;
  isolation:isolate; margin-bottom:56px;
}
.vp-player .art{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(at 25% 30%,var(--c1) 0%,transparent 55%),
    radial-gradient(at 75% 70%,var(--c2) 0%,transparent 60%),
    linear-gradient(160deg,var(--c2),var(--c3));
  transition:background .6s var(--ease-out);
}
.vp-player::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.10; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.vp-rec{
  position:absolute; top:22px; left:24px; z-index:5;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
  padding:6px 12px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.32);
  backdrop-filter:blur(8px); border-radius:4px;
}
.vp-rec::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--volt); box-shadow:0 0 10px var(--volt);
  animation:blink 1.4s ease-in-out infinite;
}
@keyframes blink{50%{opacity:.25}}
.vp-tc{
  position:absolute; top:22px; right:24px; z-index:5;
  font-family:var(--mono); font-size:11px;
  color:var(--volt); letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
  padding:6px 12px;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.12);
  border-radius:4px;
  backdrop-filter:blur(8px);
}
.vp-play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:96px; height:96px; border-radius:50%;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:23.9px; z-index:5;
  transition:transform .4s var(--ease-out),background .25s ease;
}
.vp-play:hover{transform:translate(-50%,-50%) scale(1.1);background:rgba(255,255,255,.24)}

.vp-info{
  display:grid; grid-template-columns:1.6fr 1fr;
  gap:64px; margin-bottom:48px;
}
.vp-eyebrow{
  display:flex; gap:12px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
  margin-bottom:20px;
}
.vp-eyebrow .yr{color:var(--volt)}
.vp-eyebrow .sep{color:rgba(255,255,255,.3)}
.vp-title{
  font-family:var(--display);
  font-size:clamp(37.8px, 4.7vw, 83.4px);
  line-height:.9; text-transform:uppercase;
  margin-bottom:28px; letter-spacing:-.01em;
}
.vp-title em{ color:var(--volt) }
.vp-desc{
  font-size:16.1px; line-height:1.55;
  color:rgba(255,255,255,.78);
  max-width:56ch;
}
.vp-credits{display:flex;flex-direction:column;align-self:end}
.vp-credits dl{
  display:grid; grid-template-columns:1fr 1.6fr;
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.10);
  margin:0;
}
.vp-credits dl:first-child{border-top:1px solid rgba(255,255,255,.10)}
.vp-credits dt{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.vp-credits dd{font-size:13.3px;color:var(--paper);margin:0}
@media(max-width:880px){.vp-info{grid-template-columns:1fr;gap:36px}}

.vp-upnext-eyebrow{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
}
.vp-upnext-eyebrow .line{flex:1;height:1px;background:rgba(255,255,255,.12)}
.vp-upnext{
  position:relative; aspect-ratio:16/7;
  border-radius:12px; overflow:hidden; isolation:isolate;
  cursor:pointer;
  transform:translateY(40px); opacity:0;
  transition:transform .5s var(--ease-out),opacity .5s var(--ease-out);
}
.vp-upnext.is-revealed{transform:none;opacity:1}
.vp-upnext .art{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(at 25% 30%,var(--c1) 0%,transparent 55%),
    radial-gradient(at 75% 70%,var(--c2) 0%,transparent 60%),
    linear-gradient(160deg,var(--c2),var(--c3));
  transition:transform 1.2s var(--ease-out),background .6s var(--ease-out);
}
.vp-upnext:hover .art{transform:scale(1.04)}
.vp-upnext::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(120deg,rgba(0,0,0,.5) 0%,transparent 40%,transparent 60%,rgba(0,0,0,.55) 100%);
}
.vp-upnext .next-content{
  position:absolute; inset:0; z-index:4;
  display:flex; align-items:center; justify-content:space-between;
  padding:36px 44px; gap:24px;
}
.vp-upnext .next-meta{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin-bottom:14px;
}
.vp-upnext .next-title{
  font-family:var(--display);
  font-size:clamp(24.1px, 3vw, 50.7px);
  line-height:.9; text-transform:uppercase;
  color:#fff; letter-spacing:-.01em;
}
.vp-upnext .next-title em{ color:var(--volt) }
.vp-upnext .watch-pill{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 22px;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:#fff;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.vp-upnext:hover .watch-pill{background:var(--volt);color:var(--ink);border-color:var(--volt)}
@media(max-width:760px){
  .vp-upnext{aspect-ratio:4/3}
  .vp-upnext .next-content{flex-direction:column;align-items:flex-start;padding:22px 26px}
}

/* ============================================================
   INTRO SEQUENCE
   ============================================================ */
body.is-intro{overflow:hidden}

.intro{
  position:fixed; inset:0; z-index:999;
  background:#050505;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .55s ease;
  overflow:hidden;
}
.intro.is-done{opacity:0; pointer-events:none}

/* top meta — Reel · Live + frame counter */
.intro-meta-top{
  position:absolute; top:30px; left:0; right:0; z-index:5;
  display:flex; justify-content:space-between; gap:24px;
  padding:0 var(--pad-x);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  opacity:0;
  animation:metaFade 0.45s ease 0.4s forwards;
}
.intro-meta-top .live{
  color:var(--paper);
  display:inline-flex; align-items:center; gap:8px;
}
.intro-meta-top .live::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--volt);
  box-shadow:0 0 10px var(--volt);
  animation:blink 1.2s ease-in-out infinite;
}
.intro-meta-top .count{
  color:var(--paper);
  font-variant-numeric:tabular-nums;
}
@keyframes metaFade{to{opacity:1}}

/* logo — random cipher resolves into the brand mark */
.intro-logo{
  position:relative; z-index:3;
  width:clamp(218px, 34.32vw, 484px);
  opacity:0;
  animation:logoFadeIn 0.4s var(--ease-out) 0.4s forwards;
}
.intro-logo > img{
  display:block;
  width:100%;
  height:auto;
  opacity:0;
  transform:scale(.96);
  transition:opacity .5s ease, transform .6s var(--ease-out);
  will-change:opacity,transform;
}
.intro-logo > img.is-visible{
  opacity:1;
  transform:scale(1);
}
.cipher{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:500;
  font-size:clamp(37.8px, 7.4vw, 93.7px);
  letter-spacing:.04em;
  color:var(--paper);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px rgba(244,244,240, .18);
  user-select:none;
  white-space:nowrap;
  transition:opacity .35s ease, transform .5s var(--ease-out);
  will-change:opacity,transform;
}
.cipher .dot{
  color:var(--volt);
  text-shadow:0 0 18px rgba(250,224,0,.45);
}
.cipher.is-fade{
  opacity:0;
  transform:scale(.96);
  pointer-events:none;
}
@keyframes logoFadeIn{ to{opacity:1} }

.intro-logo{
  transition:
    transform .9s cubic-bezier(.7,0,.2,1),
    opacity   .3s ease .65s,
    filter    .9s cubic-bezier(.7,0,.2,1);
  transform-origin:center center;
  will-change:transform, opacity;
}
.intro-logo.is-flying{
  transform: translate(var(--fly-x, -46vw), var(--fly-y, -46vh)) scale(var(--fly-scale, .18));
  opacity: 0;
  filter: blur(0);
}

/* bottom rail — REC + TC + loading bar */
.intro-rec{
  position:absolute;
  bottom:30px; left:var(--pad-x); z-index:5;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.65);
  display:inline-flex; align-items:center; gap:8px;
  opacity:0;
  animation:metaFade 0.45s ease 0.4s forwards;
}
.intro-rec::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--volt);
  box-shadow:0 0 10px var(--volt);
  animation:blink 1.4s ease-in-out infinite;
}
.intro-tc{
  position:absolute;
  bottom:30px; right:var(--pad-x); z-index:5;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em;
  color:var(--paper);
  font-variant-numeric:tabular-nums;
  opacity:0;
  animation:metaFade 0.45s ease 0.4s forwards;
}
.intro-bar{
  position:absolute;
  bottom:60px; left:var(--pad-x); right:var(--pad-x);
  height:1px;
  background:rgba(255,255,255,.08);
  z-index:5; overflow:hidden;
  opacity:0;
  animation:metaFade 0.45s ease 0.4s forwards;
}
.intro-bar .fill{
  width:0; height:100%;
  background:linear-gradient(90deg, var(--paper) 0%, #ffffff 100%);
  box-shadow:0 0 10px rgba(244,244,240, .4);
  animation:fillBar 1.05s var(--ease-out) 0.7s forwards;
}
@keyframes fillBar{
  to{width:100%}
}

/* header hidden during intro, fades in as logo flies */
.site-header{opacity:0; transition:opacity .5s ease}
body.is-revealing .site-header{opacity:1}

/* HERO override — accommodate reel + message */
.hero{
  position:relative;
  height:100vh; width:100%;
  padding:0; margin:0;
  overflow:hidden;
}

/* SHOWREEL — fills entire hero */
.hero-reel{
  position:absolute; inset:0;
  width:100%; height:100%;
  border-radius:0;
  overflow:hidden; isolation:isolate;
  transform:translateY(110vh);
  transition:transform 1.2s var(--ease-out);
  cursor:pointer;
  z-index:1;
}
body.reel-in .hero-reel{transform:translateY(0)}

.reel-art{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(at 22% 28%, #FAE000 0%, transparent 52%),
    radial-gradient(at 78% 72%, #1B6298 0%, transparent 58%),
    radial-gradient(at 60% 50%, #6B689F 0%, transparent 70%),
    linear-gradient(160deg, #1C176C 0%, #050510 80%);
  background-size:240% 240%;
  animation:reelDrift 18s ease-in-out infinite alternate;
}
@keyframes reelDrift{
  0%{background-position:0% 0%}
  100%{background-position:100% 100%}
}
.reel-orb{
  position:absolute; z-index:2;
  width:60%; height:75%;
  top:8%; left:18%;
  background:radial-gradient(circle, var(--volt) 0%, transparent 60%);
  filter:blur(50px); mix-blend-mode:screen;
  opacity:.5;
  animation:orbDrift 11s ease-in-out infinite;
  pointer-events:none;
}
.reel-grain{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.13; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* slow horizontal light sweep — adds "playing" feel */
.hero-reel::before{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(100deg,
    transparent 30%,
    rgba(255,255,255,0.05) 50%,
    transparent 70%);
  background-size:200% 100%;
  animation:reelSweep 9s linear infinite;
}
@keyframes reelSweep{
  0%{background-position:200% 0}
  100%{background-position:-100% 0}
}
.reel-art::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 25%, transparent 55%, rgba(0,0,0,0.7) 100%);
}

/* Reel chrome — pushed below the header pill */
.reel-rec{
  position:absolute; top:96px; left:40px; z-index:6;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
  padding:7px 13px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(8px); border-radius:4px;
}
.reel-rec::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--volt); box-shadow:0 0 10px var(--volt);
  animation:blink 1.4s ease-in-out infinite;
}
.reel-tc{
  position:absolute; top:96px; right:40px; z-index:6;
  font-family:var(--mono); font-size:11px;
  color:var(--volt); letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
  padding:7px 13px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  border-radius:4px;
  backdrop-filter:blur(8px);
}
.reel-play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:120px; height:120px; border-radius:50%;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:27.6px; z-index:6;
  transition:transform .4s var(--ease-out), background .25s ease;
}
.hero-reel:hover .reel-play{
  transform:translate(-50%,-50%) scale(1.08);
  background:rgba(255,255,255,.22);
}
/* corner label — bottom right of hero */
.reel-bottom{
  position:absolute; bottom:48px; right:40px; z-index:6;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:10px; text-align:right;
}
.reel-label{
  font-family:var(--display);
  font-size:clamp(19.6px, 2.8vw, 36.5px);
  text-transform:uppercase;
  line-height:.95;
  color:#fff;
  text-shadow:0 4px 24px rgba(0,0,0,.4);
}
.reel-label em{ color:var(--volt) }
.reel-spec{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
}

/* MESSAGE — overlays the reel, slides in from right */
.hero-msg{
  position:absolute;
  bottom:48px; left:40px;
  right:40%;
  z-index:8;
  pointer-events:none;
  transform:translateX(110%);
  opacity:0;
  transition:transform 1.05s var(--ease-out),opacity .6s ease;
}
body.msg-in .hero-msg{
  transform:translateX(0);
  opacity:1;
}
.hero-msg h1{
  font-family:var(--display);
  font-size:clamp(31.8px, 5.7vw, 93.7px);
  line-height:.88; letter-spacing:-.01em;
  text-transform:uppercase;
  margin-bottom:18px;
  color:#fff;
  text-shadow:0 4px 30px rgba(0,0,0,.45);
}
.hero-msg h1 em{
  color:var(--volt); font-style:normal;
}
.hero-msg .tagline{
  max-width:42ch;
  font-size:16.1px;
  font-weight:600;
  color:var(--volt);
  text-shadow:0 1px 3px rgba(0,0,0,.95), 0 2px 16px rgba(0,0,0,.85);
}

@media(max-width:760px){
  .reel-rec,.reel-tc{top:80px}
  .reel-rec{left:20px}
  .reel-tc{right:20px}
  .reel-play{width:88px;height:88px;font-size:20.9px}
  .reel-bottom{display:none}
  .hero-msg{
    bottom:32px; left:24px; right:24px;
  }
}

/* ============================================================
   MANIFESTO — scroll-revealed statement
   ============================================================ */
.manifesto{
  position:relative;
  padding:30vh var(--pad-x);
  min-height:100vh;
  display:flex;
  align-items:center;
}
.manifesto-eyebrow{
  position:absolute;
  top:80px; left:var(--pad-x);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute);
}
.manifesto-eyebrow::before{
  content:""; display:inline-block;
  width:32px; height:1px; background:var(--volt);
  margin-right:12px; vertical-align:middle;
}
.manifesto-text{
  font-family:var(--display);
  font-size:clamp(37.8px, 7.4vw, 120.4px);
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:-.01em;
  max-width:18ch;
}
.manifesto-text .word{
  display:inline-block;
  color:rgba(244,244,240, 0.16);
  margin-right:.16em;
  transition:color .4s ease, transform .5s var(--ease-out);
  transform:translateY(8px);
}
.manifesto-text .word.is-lit{
  color:var(--paper);
  transform:translateY(0);
}
.manifesto-text .word.is-lit.accent{ color:var(--volt) }

/* ============================================================
   WORK — two-phase scroll-driven gallery (horizontal then vertical)
   ============================================================ */
.work{ position:relative; z-index:2; background:var(--ink) }
.work-track{
  position:relative;
  height:800vh;
}
.work-sticky{
  position:sticky; top:0;
  height:100vh; min-height:600px;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.work-head{
  flex:0 0 auto;
  padding:24px var(--pad-x) 18px;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  gap:14px 32px;
  align-items:end;
  transition:padding .55s var(--ease);
}
.work-eyebrow{
  grid-column:1; grid-row:1;
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mute);
}
.work-eyebrow .pulse{
  width:8px; height:8px; border-radius:50%;
  background:#ff3b3b;
  box-shadow:0 0 12px rgba(255,59,59,.7);
  animation:blink 1.4s ease-in-out infinite;
}
.work-meter{
  grid-column:2; grid-row:1 / span 2;
  align-self:end;
  display:flex; align-items:baseline; gap:6px;
  font-family:var(--display);
  font-size:clamp(26.7px, 3.6vw, 56.8px);
  line-height:.9;
  font-variant-numeric:tabular-nums;
}
.work-meter .cur{ color:var(--volt) }
.work-meter .sep{ color:var(--mute); font-size:0.5em; transform:translateY(-.22em) }
.work-meter .tot{ color:var(--paper); opacity:.55; font-size:0.5em }

.work-title{
  grid-column:1; grid-row:2;
  font-family:var(--display);
  font-size:clamp(31.8px, 4.7vw, 77.4px);
  line-height:.88; text-transform:uppercase;
  max-height:320px; overflow:hidden;
  transition:opacity .4s ease, max-height .55s var(--ease),
             transform .5s var(--ease), margin .5s var(--ease);
}
.work-title em{ font-style:normal; color:var(--volt) }
.work-track.is-shrunk .work-title{
  opacity:0; max-height:0; transform:translateY(-18px); margin:0;
}
.work-track.is-shrunk .work-head{ padding-bottom:0 }

.work-rail-wrap{
  flex:1 1 auto;
  position:relative;
  overflow:hidden;
}
.work-rail{
  position:absolute; top:0; left:0; height:100%;
  display:flex; align-items:center;
  gap:64px;
  padding:0 calc(50vw - 33vw);
  will-change:transform, opacity;
  transition:opacity .55s var(--ease);
}
.work-rail.is-out{ opacity:0; pointer-events:none }

.work-vrail{
  position:absolute; top:0; left:0; right:0;
  display:flex; flex-direction:column; align-items:center;
  gap:32px;
  will-change:transform, opacity;
  opacity:0; pointer-events:none;
  transition:opacity .55s var(--ease);
}
.work-vrail.is-in{ opacity:1; pointer-events:auto }

.work-card{
  flex:0 0 auto;
  width:clamp(343px, 51.48vw, 889px);
  height:clamp(480px, 74vh, 780px);
  position:relative; overflow:hidden;
  border-radius:6px;
  isolation:isolate;
  transform-origin:center;
  transition:opacity .5s var(--ease);
  will-change:transform, opacity;
  cursor:pointer;
}
.work-card .card-art{
  position:absolute; inset:-8%;
  z-index:1;
  background:
    radial-gradient(at 28% 32%, var(--c1) 0%, transparent 55%),
    radial-gradient(at 75% 70%, var(--c2) 0%, transparent 60%),
    linear-gradient(160deg, var(--c2), var(--c3));
  transition:transform .8s var(--ease);
  will-change:transform;
}
.work-card::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.4) 0%, transparent 25%,
    transparent 55%, rgba(0,0,0,.7) 100%);
}
.work-card::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.10; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.work-card .card-meta-top{
  position:absolute; top:24px; left:28px; right:28px; z-index:5;
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.85);
}
.work-card .card-title{
  position:absolute; left:28px; right:28px; bottom:84px; z-index:5;
  font-family:var(--display);
  font-size:clamp(29.2px, 3.2vw, 61.9px);
  line-height:.9; text-transform:uppercase;
  color:#fff;
  text-shadow:0 4px 32px rgba(0,0,0,.45);
  transition:transform .6s var(--ease);
}
.work-card .card-title em{ color:var(--volt) }
.work-card .card-meta-bot{
  position:absolute; left:28px; right:28px; bottom:24px; z-index:5;
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase;
}
.work-card .card-meta-bot .lhs{ color:var(--volt); max-width:60%; line-height:1.5 }
.work-card .card-meta-bot .rhs{ color:rgba(255,255,255,.75); text-align:right; line-height:1.5 }

.work-card .card-play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.85);
  width:96px; height:96px; border-radius:50%;
  background:var(--volt); color:var(--ink);
  border:none;
  display:flex; align-items:center; justify-content:center;
  z-index:5; opacity:0;
  font-size:22.1px;
  transition:opacity .4s ease, transform .5s var(--ease);
  box-shadow:0 14px 50px -10px rgba(250,224,0,.6);
  cursor:pointer;
}
.work-card.is-active .card-play{ opacity:1; transform:translate(-50%,-50%) scale(1) }
.work-card.is-active:hover .card-play{ transform:translate(-50%,-50%) scale(1.1) }
.work-card.is-active .card-art{ transform:scale(1.06) }
.work-card.is-active .card-title{ transform:translateY(-6px) }

.work-scrub{
  flex:0 0 auto;
  padding:32px var(--pad-x) 48px;
  position:relative;
}
.scrub-rail{ position:relative; height:28px; margin:0 12px; }
.scrub-track{
  position:absolute; left:0; right:0; top:50%;
  height:1px; background:rgba(255,255,255,.14);
  transform:translateY(-50%);
}
.scrub-fill{
  position:absolute; left:0; top:50%;
  height:1px; background:var(--volt); width:0%;
  transform:translateY(-50%);
  box-shadow:0 0 12px var(--volt);
  transition:width .12s linear;
}
.scrub-marker{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.scrub-marker .pin{
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.4);
  transition:all .35s var(--ease);
}
.scrub-marker.is-active .pin{
  background:var(--volt); width:13px; height:13px;
  box-shadow:0 0 14px var(--volt);
}
.scrub-marker .lbl{
  position:absolute; top:22px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.4);
  white-space:nowrap; opacity:0;
  transition:opacity .3s ease, color .3s ease;
}
.scrub-marker.is-active .lbl{ opacity:1; color:var(--volt) }
.scrub-marker:hover .lbl{ opacity:1; color:var(--paper) }

@media (max-width:900px){
  .work-track{ height:auto }
  .work-sticky{ position:relative; height:auto; top:auto; overflow:visible }
  .work-head{ padding:80px var(--pad-x) 24px }
  .work-rail-wrap{ overflow:visible; height:auto; display:block }
  .work-rail{
    position:relative;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    transform:none !important; opacity:1 !important; pointer-events:auto !important;
    padding-bottom:24px;
  }
  .work-card{
    width:86vw;
    height:70vh; min-height:480px; max-height:640px;
    scroll-snap-align:center;
    opacity:1 !important;
  }
  .work-scrub{ display:none }
  .work-meter{ font-size:clamp(24.9px, 5.6vw, 39.2px) }
}

/* ============================================================
   SERVICES — departments grid, yellow sweep-in on scroll
   ============================================================ */
.depts{
  background:var(--ink);
  color:var(--paper);
  padding:56px 0 128px;
  position:relative; overflow:hidden; z-index:2;
  isolation:isolate;
}
.depts .sweep{
  position:absolute; inset:0; z-index:-1;
  background:var(--volt);
  opacity:0;
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1);
  will-change:opacity;
}
.depts.is-in{ color:var(--ink) }
.depts.is-in .sweep{ opacity:1 }
.depts.is-in .eyebrow{ color:rgba(5,5,5,.7) }
.depts.is-in .eyebrow::before{ background:var(--ink); box-shadow:0 0 12px rgba(5,5,5,.4) }

.depts h2{
  font-family:var(--display);
  font-size:clamp(37.8px, 6vw, 104.9px);
  line-height:.88; text-transform:uppercase;
  margin:18px 0 64px;
}
.depts .grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-top:1px solid currentColor;
  border-left:1px solid currentColor;
}
.depts .cell{
  padding:48px 28px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  position:relative; min-height:260px;
  display:flex; flex-direction:column; justify-content:flex-start;
  align-items:center;
  text-align:center;
  gap:20px;
  overflow:hidden; isolation:isolate;
  transition:color .25s ease;
  cursor:pointer;
}
.depts.is-in .cell{ color:var(--ink) }

/* FUTURISTIC LOAD — each cell expands from a thin scan line; content fades up inside */
.depts .cell{
  --reveal-delay: 0s;
}
.depts .cell.delay-1{ --reveal-delay: .14s }
.depts .cell.delay-2{ --reveal-delay: .28s }
.depts .cell.reveal{
  opacity:1;
  transform:none;
  clip-path:inset(49% 0 49% 0);
  transition:
    clip-path .85s cubic-bezier(.22,.61,.36,1),
    color     .25s ease;
  transition-delay: var(--reveal-delay), 0s;
  will-change:clip-path;
}
.depts .cell.reveal.is-in{
  clip-path:inset(0 0 0 0);
}
/* Content fades in AFTER the cell has opened */
.depts .cell .top,
.depts .cell h3,
.depts .cell p{
  opacity:0;
  transform:translateY(6px);
  transition:
    opacity   .45s ease,
    transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.depts .cell.is-in .top{ transition-delay: calc(var(--reveal-delay) + .55s) }
.depts .cell.is-in h3 { transition-delay: calc(var(--reveal-delay) + .68s) }
.depts .cell.is-in p  { transition-delay: calc(var(--reveal-delay) + .80s) }
.depts .cell.is-in .top,
.depts .cell.is-in h3,
.depts .cell.is-in p{
  opacity:1;
  transform:translateY(0);
}
/* Scan flash — navy line for contrast on yellow */
.depts .cell.reveal::after{
  content:"";
  position:absolute;
  left:8%; right:8%; top:50%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--ink), transparent);
  opacity:0;
  transform-origin:center;
  transform:scaleX(0);
  pointer-events:none;
  z-index:2;
  box-shadow:0 0 10px rgba(5,5,5,.35);
}
.depts .cell.reveal.is-in::after{
  animation:cellScan .85s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: var(--reveal-delay);
}
@keyframes cellScan{
  0%   { opacity:0; transform:scaleX(0)   }
  35%  { opacity:.95; transform:scaleX(1) }
  100% { opacity:0; transform:scaleX(1)   }
}
@media (prefers-reduced-motion: reduce){
  .depts .cell.reveal{ transition:none; clip-path:inset(0); }
  .depts .cell.reveal::after{ display:none }
  .depts .cell .top,
  .depts .cell h3,
  .depts .cell p{ opacity:1; transform:none; transition:none }
}
.depts .cell::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink);
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.depts .cell:hover::before{ transform:translateY(0) }
.depts .cell:hover{ color:var(--paper) }
.depts .cell .arr{
  display:inline-block; transform:translate(0,0);
  transition:transform .35s var(--ease-out);
}
.depts .cell:hover .arr{ transform:translate(6px,-6px) }

.depts .cell .top{
  display:flex; justify-content:center; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  margin:0;
}
.depts .cell .top .ico{
  width:44px; height:44px; border:1px solid currentColor; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:19px;
  margin:0;
}
.depts .cell .top span:first-child{ display:inline-flex; align-items:center }
.depts .cell > div:not(.top){
  display:flex; flex-direction:column; align-items:center;
  gap:12px;
}
.depts .cell h3{
  font-family:var(--display); font-size:29.4px; line-height:1; text-transform:uppercase;
  margin:0;
}
.depts .cell p{ margin:0; font-size:13.5px; line-height:1.55; max-width:34ch; opacity:.78 }

@media (max-width:900px){ .depts .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .depts .grid{ grid-template-columns:1fr } }


/* ============================================================
   TEAM
   ============================================================ */
.team{ padding:96px var(--pad-x) }
.team-head{ margin-bottom:40px }
.team-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:36px 20px;
}
@media(max-width:1100px){.team-grid{grid-template-columns:repeat(3,1fr);gap:32px 18px}}
@media(max-width:760px){.team-grid{grid-template-columns:repeat(2,1fr);gap:28px 14px}}
@media(max-width:375px){.team-grid{grid-template-columns:1fr;gap:24px}}

.team-member{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.team-member.is-in{ opacity:1; transform:none }
.team-member:nth-child(4n+1).is-in{ transition-delay:0s }
.team-member:nth-child(4n+2).is-in{ transition-delay:.06s }
.team-member:nth-child(4n+3).is-in{ transition-delay:.12s }
.team-member:nth-child(4n+4).is-in{ transition-delay:.18s }

.tm-portrait{
  position:relative;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  isolation:isolate;
  margin:0 auto 14px;
  background:#0a0a0a;
  width:62%;
  max-width:62%;
  box-shadow:0 0 0 2px #1C176C, 0 0 0 3px rgba(28,23,108,.35);
}
@media(max-width:1100px){
  .tm-portrait{ width:58% }
}
@media(max-width:760px){
  .tm-portrait{ width:62% }
}
@media(max-width:480px){
  .tm-portrait{ width:52% }
}
.tm-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
  filter:saturate(1.06) contrast(1.02);
  transition:transform .8s var(--ease-out), filter .5s ease;
  z-index:1;
}
.team-member:hover .tm-photo{
  transform:scale(1.06);
  filter:saturate(1.15) contrast(1.04);
}
.tm-portrait::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));
}
.tm-num{
  position:absolute; top:14px; left:16px; z-index:3;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; color:rgba(255,255,255,.85);
}
.tm-name{
  font-family:var(--body);
  font-size:17.1px;
  font-weight:500;
  line-height:1.2;
  text-align:center;
  letter-spacing:-.005em;
  margin-bottom:6px;
  color:var(--paper);
}
.tm-role{
  font-family:var(--body);
  font-size:13px;
  font-weight:400;
  text-align:center;
  letter-spacing:.005em;
  color:var(--mute);
}

/* CLIENTS styles are defined further down with the new grid-of-boxes block */

/* ============================================================
   INDEX — replaces contact + footer
   ============================================================ */
.index{
  padding:140px var(--pad-x) 48px;
  border-top:1px solid var(--line);
}
.index-head{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:48px;
  align-items:end;
  padding-bottom:56px;
  border-bottom:1px solid var(--line);
  margin-bottom:48px;
}
@media(max-width:760px){
  .index-head{grid-template-columns:1fr;gap:24px}
}
.index-head h2{
  font-family:var(--display);
  font-size:clamp(37.8px, 6vw, 93.7px);
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:-.005em;
  margin:14px 0 0;
}
.index-head h2 .arr{
  display:inline-block;
  color:var(--volt);
  transition:transform .35s var(--ease-out);
}
.index-head h2:hover .arr{ transform:translate(6px,-6px) }
.index-intro{
  font-size:16.1px;
  line-height:1.55;
  color:rgba(244,244,240, .78);
  max-width:38ch;
  padding-bottom:14px;
}

.index-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}
@media(max-width:880px){.index-grid{grid-template-columns:repeat(2,1fr);gap:36px 24px}}
@media(max-width:520px){.index-grid{grid-template-columns:1fr;gap:32px}}

.idx-col h4{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mute);
  margin:0 0 18px;
  font-weight:400;
}
.idx-col ol,.idx-col ul{ list-style:none; margin:0; padding:0 }
.idx-col li{
  border-top:1px solid var(--line);
  font-size:13.3px;
}
.idx-col li:last-child{ border-bottom:1px solid var(--line) }

.idx-col ol li a{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 0;
  position:relative;
  transition:padding .3s var(--ease), color .3s ease;
}
.idx-col ol li a:hover{ padding-left:10px; color:var(--volt) }
.idx-col ol li .n{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  color:var(--mute);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
  transition:color .3s ease;
}
.idx-col ol li a:hover .n{ color:var(--volt) }

.idx-col ul li{
  padding:12px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:var(--paper);
}
.idx-col ul li .role{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
.idx-col ul li a{
  position:relative;
  transition:color .3s ease;
}
.idx-col ul li a:hover{ color:var(--volt) }
.idx-col ul li a span{
  display:inline-block;
  margin-left:4px;
  color:var(--mute);
  transition:transform .3s var(--ease-out), color .3s ease;
}
.idx-col ul li a:hover span{
  color:var(--volt);
  transform:translate(3px,-3px);
}

.index-foot{
  margin-top:56px;
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mute);
}
/* ============================================================
   STATS — counters: Projects · Years · Crew · Clients
   ============================================================ */
.stats{ padding:88px 0 64px; border-bottom:1px solid rgba(255,255,255,0.06); position:relative; z-index:2 }
.stats-intro{
  max-width:1000px;
  margin:8px auto 64px;
  padding:0 var(--pad-x);
  text-align:center;
}
.stats-badge{
  display:inline-block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:34px;
}
.stats-badge strong{ color:var(--paper); font-weight:700; letter-spacing:.06em }
.stats-copy p{
  font-family:var(--body);
  font-size:clamp(15px, 1.35vw, 18px);
  line-height:1.72;
  color:rgba(244,244,240, .72);
  margin:0 auto 20px;
  max-width:840px;
}
.stats-copy p:first-of-type{ color:rgba(244,244,240, .92) }
.stats-copy p:last-child{ margin-bottom:0 }
@media(max-width:760px){ .stats-intro{ margin-bottom:44px } }
.stats .grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:40px 32px;
  padding:0 var(--pad-x);
}
.stat{ position:relative; padding-top:24px; border-top:1px solid var(--line) }
.stat .num{
  font-family:var(--display);
  font-size:clamp(40px, 5.6vw, 88px);
  line-height:.88; color:var(--volt);
  display:flex; align-items:flex-start; gap:6px;
  font-variant-numeric:tabular-nums;
}
.stat .num .suffix{
  font-size:0.5em; color:var(--paper);
  transform:translateY(.2em);
}
.stat .lbl{
  margin-top:16px;
  font-family:var(--mono); font-size:14px; letter-spacing:.12em; font-weight:500;
  text-transform:uppercase; color:rgba(244,244,240,.85);
  display:flex; align-items:center; gap:10px;
  line-height:1.45;
}
.stat .lbl::before{
  content:""; width:24px; height:1px; background:var(--volt); align-self:center;
  flex-shrink:0;
}
@media (max-width:860px){ .stats .grid{ grid-template-columns:repeat(2,1fr); gap:40px 24px } }
@media (max-width:480px){ .stats .grid{ grid-template-columns:1fr; gap:32px } }
/* ============================================================
   COMPANIES — featured brand + sister brands rows
   ============================================================ */


/* ============================================================
   MAP LIGHTBOX
   ============================================================ */
.cb-lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0, .92);
  display:none;
  align-items:center;
  justify-content:center;
  padding:5vh 5vw;
  cursor:zoom-out;
  opacity:0;
  transition:opacity .3s ease;
}
.cb-lightbox.is-open{
  display:flex;
  opacity:1;
}
.cb-lightbox img{
  max-width:100%;
  max-height:90vh;
  width:auto;
  height:auto;
  display:block;
  border-radius:6px;
  box-shadow:0 30px 80px rgba(0,0,0, .6);
  cursor:default;
}
.cb-lightbox-close{
  position:absolute;
  top:24px;
  right:24px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--volt);
  color:var(--ink);
  border:0;
  border-radius:50%;
  font-size:19px;
  cursor:pointer;
  transition:transform .2s ease;
}
.cb-lightbox-close:hover{ transform:scale(1.08) }
.cb-lightbox-cap{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--volt);
}

/* ============================================================
   CONTACT BLOCK — bottom of home page
   ============================================================ */
.contact-block{
  padding:56px var(--pad-x) 56px;
  background:var(--ink);
  color:var(--paper);
}
.cb-shell{
  max-width:none;
  margin:0;
  width:100%;
  box-sizing:border-box;
  border-top:1px solid rgba(244,244,240, .10);
  padding-top:48px;
}
.cb-emails{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:40px;
  margin-bottom:48px;
}
.cb-email .cb-eyebrow{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:18px;
}
.cb-email a.cb-mail{
  display:inline-block;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(19.6px, 2.2vw, 33.8px);
  line-height:1;
  letter-spacing:.01em;
  color:var(--paper);
  text-decoration:none;
  padding-bottom:14px;
  border-bottom:1px solid rgba(244,244,240, .25);
  transition:border-color .2s ease, color .2s ease;
}
.cb-email a.cb-mail:hover{
  border-bottom-color:var(--volt);
  color:var(--volt);
}
.cb-divider{
  height:1px;
  background:rgba(244,244,240, .10);
  margin:0 0 40px;
}
.cb-locations{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:48px;
}
.cb-loc{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:24px;
  align-items:start;
}
.cb-map{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  border:0;
  padding:0;
  background:#000;
  border-radius:6px;
  overflow:hidden;
  cursor:zoom-in;
  transition:transform .25s ease, box-shadow .25s ease;
}
.cb-map img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.92;
  transition:opacity .25s ease;
}
.cb-map:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0, .4);
}
.cb-map:hover img{ opacity:1 }
.cb-map-zoom{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13.3px;
  color:var(--ink);
  background:var(--volt);
  border-radius:3px;
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.cb-map:hover .cb-map-zoom,
.cb-map:focus-visible .cb-map-zoom{ opacity:1 }
.cb-loc h3.cb-city{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(24.9px, 2.7vw, 42.7px);
  line-height:.95;
  letter-spacing:.005em;
  color:var(--paper);
  text-transform:uppercase;
  margin:0 0 10px;
}
.cb-loc .cb-country{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--volt);
  margin-bottom:20px;
}
.cb-loc .cb-addr{
  font-family:var(--body);
  font-size:15.2px;
  line-height:1.5;
  color:var(--paper);
  opacity:.78;
  margin:0 0 10px;
}
.cb-loc .cb-phone{
  display:inline-block;
  font-family:var(--body);
  font-size:15.2px;
  color:var(--paper);
  text-decoration:none;
  border-bottom:1px solid rgba(244,244,240, .25);
  padding-bottom:2px;
  transition:border-color .2s ease, color .2s ease;
}
.cb-loc .cb-phone:hover{
  border-bottom-color:var(--volt);
  color:var(--volt);
}
.cb-loc .cb-hours{
  font-family:var(--body);
  font-size:15.2px;
  color:var(--paper);
  opacity:.7;
  margin:0;
}
@media (max-width:1024px){
  .cb-emails{ grid-template-columns:repeat(2, 1fr); gap:36px 32px }
}
@media (max-width:640px){
  .contact-block{ padding:56px var(--pad-x) 56px }
  .cb-shell{ padding-top:40px }
  .cb-emails{ grid-template-columns:1fr; gap:28px; margin-bottom:44px }
  .cb-divider{ margin-bottom:40px }
  .cb-locations{ grid-template-columns:1fr; gap:36px }
  .cb-loc{ grid-template-columns:120px 1fr; gap:20px }
}

/* ============================================================
   LOCATIONS / FIND US (inside footer)
   ============================================================ */
.sf-locations{
  width:100%;
  max-width:900px;
  margin:0 auto 40px;
}
.sf-locations img{
  display:block;
  width:100%;
  height:auto;
  border-radius:4px;
  opacity:.92;
}
@media (max-width:760px){
  .sf-locations{ max-width:100%; margin-bottom:32px }
}

.companies{ padding:48px var(--pad-x) 64px; text-align:center }
.companies-grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:48px;
}
.companies-hero{
  display:flex;
  justify-content:center;
}
.companies-hero img{
  display:block;
  height:140px;
  width:auto;
  max-width:90%;
  object-fit:contain;
}
.companies-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:88px;
  flex-wrap:wrap;
  width:100%;
}
.companies-row img{
  display:block;
  height:88px;
  width:auto;
  max-width:240px;
  object-fit:contain;
}
@media(max-width:980px){
  .companies-hero img{ height:120px }
  .companies-row{ gap:56px }
  .companies-row img{ height:72px; max-width:200px }
}
@media(max-width:680px){
  .companies-hero img{ height:100px }
  .companies-row{ gap:36px }
  .companies-row img{ height:58px; max-width:160px }
}
@media(max-width:760px){
  .companies{ padding:32px var(--pad-x) 40px }
  .companies-grid{ gap:36px }
}

/* ============================================================
   CLIENTS — grid of logo boxes (one box per client)
   ============================================================ */
.clients{ padding:160px var(--pad-x) 120px }
.clients-head{ margin-bottom:60px }
.clients-grid{
  display:flex;
  flex-direction:column;
  gap:64px;
  align-items:center;
}
.clients-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:72px;
  flex-wrap:wrap;
}

.client{
  display:flex;
  align-items:center;
  justify-content:center;
}

.client-logo{
  display:block;
  height:104px;
  width:auto;
  max-width:280px;
  object-fit:contain;
}

@media(max-width:980px){
  .clients-row{ gap:48px }
  .client-logo{ height:82px; max-width:220px }
}
@media(max-width:680px){
  .clients-row{ gap:32px }
  .client-logo{ height:64px; max-width:170px }
}
@media(max-width:760px){
  .clients{ padding:96px var(--pad-x) 72px }
  .clients-head{ margin-bottom:36px }
  .clients-grid{ gap:40px }
}


/* ============================================================
   ABOUT US PAGE — full-screen slide-in overlay
   ============================================================ */
.about-page{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  color:var(--paper);
  transform:translateX(102%);
  visibility:hidden;
  transition:transform .85s cubic-bezier(.7,0,.2,1), visibility 0s linear .85s;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.about-page.is-open{
  transform:translateX(0);
  visibility:visible;
  transition:transform .85s cubic-bezier(.7,0,.2,1), visibility 0s linear 0s;
}

.ap-topbar{
  position:sticky; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px clamp(16px, 3.12vw, 44px);
  background:linear-gradient(180deg, rgba(5,5,5, .96) 0%, rgba(5,5,5, .7) 70%, transparent);
  z-index:10;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.ap-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,244,240, .6);
}
.ap-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--volt);
  box-shadow:0 0 12px var(--volt);
  animation:pulseDot 2.2s ease-in-out infinite;
}
.ap-close{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px;
  background:transparent;
  border:1px solid rgba(244,244,240, .20);
  border-radius:999px;
  color:var(--paper);
  font-family:var(--body);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer;
  transition:border-color .25s, color .25s, background .25s, transform .25s;
}
.ap-close:hover{
  background:var(--volt);
  color:var(--ink);
  border-color:var(--volt);
  transform:translateY(-1px);
}
.ap-close .x{ font-size:13px; opacity:.9 }

.ap-scroll{
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:0 clamp(16px, 3.12vw, 44px) 48px;
  scroll-behavior:smooth;
}
.ap-scroll::-webkit-scrollbar{ width:8px }
.ap-scroll::-webkit-scrollbar-track{ background:transparent }
.ap-scroll::-webkit-scrollbar-thumb{ background:rgba(244,244,240, .10); border-radius:8px }

/* HERO */
.ap-hero{
  padding:32px 0 40px;
  border-bottom:1px solid rgba(244,244,240, .10);
  max-width:1320px; margin:0 auto;
}
.ap-num{
  display:inline-block;
  font-family:var(--body); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--volt);
  margin-bottom:20px;
}
.ap-hero h1{
  font-family:var(--display);
  font-size:clamp(26.7px, 4vw, 59.3px);
  line-height:.92;
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin:0 0 22px;
  max-width:20ch;
}
.ap-lede{
  font-family:var(--body);
  font-size:clamp(15.2px, 1.5vw, 19px);
  line-height:1.5;
  color:rgba(244,244,240, .72);
  max-width:62ch;
  margin:0;
}

/* SECTIONS */
.ap-section{
  padding:56px 0;
  border-bottom:1px solid rgba(244,244,240, .10);
  max-width:1320px; margin:0 auto;
}
.ap-meta{
  font-family:var(--body); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--volt);
  margin-bottom:18px;
}
.ap-section h2{
  font-family:var(--display);
  font-size:clamp(22.2px, 3.1vw, 44.5px);
  line-height:.95;
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin:0 0 28px;
  max-width:22ch;
}
.ap-section h2 span{ color:var(--volt) }

.ap-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  max-width:1080px;
}
@media (max-width:760px){
  .ap-grid{ grid-template-columns:1fr; gap:36px }
}
.ap-grid p{
  font-family:var(--body);
  font-size:14.2px;
  line-height:1.55;
  color:rgba(244,244,240, .74);
  max-width:52ch;
  margin:0;
}
.ap-large{
  font-family:var(--body);
  font-size:clamp(16.1px, 1.7vw, 20.9px);
  line-height:1.45;
  color:var(--paper);
  font-weight:500;
  letter-spacing:-.01em;
  max-width:48ch;
  margin:0;
}

/* PILLARS */
.ap-pillars{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:24px;
}
@media (max-width:880px){ .ap-pillars{ grid-template-columns:1fr; gap:36px } }
.ap-pillars article{
  padding:18px 16px;
  border:1px solid rgba(244,244,240, .18);
  border-radius:6px;
  background:rgba(255,255,255,.02);
}
.ap-pillars article .num{
  font-family:var(--body); font-size:10.5px;
  letter-spacing:.18em;
  color:var(--volt);
  display:block; margin-bottom:8px;
}
.ap-pillars article h3{
  font-family:var(--display);
  font-size:20.9px;
  text-transform:uppercase;
  line-height:1;
  margin:0;
}
.ap-pillars article p{
  font-family:var(--body);
  font-size:13.8px; line-height:1.55;
  color:rgba(244,244,240, .7);
  margin:0;
}

/* STATS */
.ap-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  border-top:1px solid rgba(244,244,240, .18);
  padding-top:24px;
}
@media (max-width:760px){ .ap-stats{ grid-template-columns:repeat(2, 1fr); gap:48px 24px } }
.ap-stats > div{ padding-right:12px }
.ap-stats .n{
  font-family:var(--display);
  font-size:clamp(27.6px, 3.5vw, 49.8px);
  line-height:.85;
  color:var(--volt);
  letter-spacing:-.02em;
  margin-bottom:6px;
  font-variant-numeric:tabular-nums;
}
.ap-stats .l{
  font-family:var(--body); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,244,240, .6);
}

/* SIGNATURE */
.ap-signature{
  padding:32px 0;
  text-align:center;
  border-bottom:1px solid rgba(244,244,240, .10);
  max-width:1100px; margin:0 auto;
}
.ap-signature p{
  font-family:var(--body);
  font-size:clamp(16.6px, 1.8vw, 23.9px);
  line-height:1.35;
  color:var(--paper);
  margin:0 0 12px;
}
.ap-signature p:nth-child(1){ opacity:.5 }
.ap-signature p:nth-child(2){ opacity:.7 }
.ap-signature p:nth-child(3){ opacity:.88 }
.ap-final{
  font-size:clamp(19.6px, 2.8vw, 32.9px) !important;
  font-family:var(--display) !important;
  text-transform:uppercase;
  margin-top:32px !important;
  letter-spacing:-.005em;
  line-height:.95 !important;
}
.ap-final span{ color:var(--volt) }

/* CTA */
.ap-cta{
  padding:56px 0 48px;
  max-width:1320px; margin:0 auto;
  text-align:center;
}
.ap-cta h2{
  margin:0 auto 28px;
  max-width:22ch;
}
.ap-cta-btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 32px;
  background:var(--volt);
  color:var(--ink);
  font-family:var(--body);
  font-size:13px; font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-radius:999px;
  text-decoration:none;
  transition:transform .3s var(--ease-out), background .25s, box-shadow .25s;
  box-shadow:0 0 0 0 rgba(250,224,0,0);
}
.ap-cta-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(250,224,0,.25);
}
.ap-cta-btn .arr{ font-size:15.2px }

@media (max-width:760px){
  .ap-hero{ padding:40px 0 32px }
  .ap-section{ padding:40px 0 }
  .ap-signature{ padding:48px 0 }
  .ap-cta{ padding:40px 0 32px }
  .ap-num,
  .ap-meta{ margin-bottom:14px }
  .ap-hero h1,
  .ap-section h2{ margin-bottom:20px }
  .ap-services{ grid-template-columns:1fr; column-gap:0 }
}


/* ============================================================
   START-A-PROJECT — flash + brief form
   ============================================================ */
.pf-flash{
  position:fixed; inset:0; z-index:1000;
  background:#fff;
  opacity:0;
  pointer-events:none;
  visibility:hidden;
}
.pf-flash.is-firing{
  visibility:visible;
  animation:pfFlash .42s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes pfFlash{
  0%   { opacity:0   }
  18%  { opacity:1   }
  100% { opacity:0   }
}

.pf{
  position:fixed; inset:0; z-index:300;
  background:rgba(5,5,5, .92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.pf.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity .4s ease, visibility 0s linear 0s;
}

.pf-close{
  position:absolute; top:24px; right:24px; z-index:5;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px;
  background:transparent;
  border:1px solid rgba(244,244,240, .20);
  border-radius:999px;
  color:var(--paper);
  font-family:var(--body);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer;
  transition:border-color .25s, background .25s, color .25s, transform .25s;
}
.pf-close:hover{
  background:var(--volt); color:var(--ink); border-color:var(--volt);
  transform:translateY(-1px);
}
.pf-close .x{ font-size:13px; opacity:.85 }

.pf-shell{
  position:relative;
  width:100%; max-width:720px;
  max-height:calc(100vh - 64px);
  overflow-y:auto;
  padding:48px 56px;
  background:#0a0a10;
  border:1px solid rgba(244,244,240, .10);
  border-radius:8px;
  transform:scale(.96) translateY(8px);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.pf.is-open .pf-shell{ transform:scale(1) translateY(0) }
.pf-shell::-webkit-scrollbar{ width:6px }
.pf-shell::-webkit-scrollbar-thumb{ background:rgba(244,244,240, .12); border-radius:6px }

.pf-meta{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,244,240, .6);
  margin-bottom:22px;
}
.pf-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--volt); box-shadow:0 0 12px var(--volt);
  animation:pulseDot 2.2s ease-in-out infinite;
}
.pf-title{
  font-family:var(--display);
  font-size:clamp(24.9px, 3.8vw, 44.5px);
  line-height:.94;
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin:0 0 14px;
}
.pf-title span{ color:var(--volt) }
.pf-lede{
  font-family:var(--body);
  font-size:14.2px;
  line-height:1.55;
  color:rgba(244,244,240, .7);
  margin:0 0 32px;
  max-width:50ch;
}

.pf-form{ display:flex; flex-direction:column; gap:22px }
.pf-row{ display:contents }
.pf-row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
@media (max-width:560px){ .pf-row-2{ grid-template-columns:1fr } }

.pf-field{
  display:flex; flex-direction:column; gap:6px;
}
.pf-lbl{
  font-family:var(--body); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,244,240, .55);
}
.pf-field input,
.pf-field select,
.pf-field textarea{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(244,244,240, .18);
  color:var(--paper);
  font-family:var(--body);
  font-size:15.2px;
  padding:10px 0 12px;
  outline:none;
  transition:border-color .25s ease;
  border-radius:0;
}
.pf-field input::placeholder,
.pf-field textarea::placeholder{ color:rgba(244,244,240, .32) }
.pf-field input:focus,
.pf-field select:focus,
.pf-field textarea:focus{
  border-bottom-color:var(--volt);
}
.pf-field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1 L5 5 L9 1' fill='none' stroke='%23f4f4f0' stroke-width='1.4' opacity='.6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 4px center;
  padding-right:24px;
  cursor:pointer;
}
.pf-field select option{ background:#0a0a10; color:var(--paper) }
.pf-field textarea{ resize:vertical; min-height:88px; font-family:var(--body) }

.pf-field.is-invalid input,
.pf-field.is-invalid select,
.pf-field.is-invalid textarea{ border-bottom-color:#ff6b6b }
.pf-field.is-invalid .pf-lbl{ color:#ff6b6b }

.pf-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px;
  margin-top:8px;
}
.pf-submit{
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 28px;
  background:var(--volt); color:var(--ink);
  font-family:var(--body); font-size:12px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  border:0; border-radius:999px;
  cursor:pointer;
  transition:transform .3s var(--ease-out), box-shadow .25s;
}
.pf-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(250,224,0,.3);
}
.pf-submit .arr{ font-size:13.3px }
.pf-hint{
  font-family:var(--body); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,244,240, .45);
}

/* Success state — replaces the form after submit */
.pf-success{
  display:none;
  text-align:center;
  padding:24px 0 8px;
}
.pf-success.is-shown{ display:block }
.pf-check{
  width:64px; height:64px;
  margin:0 auto 24px;
  border-radius:50%;
  background:var(--volt);
  color:var(--ink);
  font-size:29.4px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 32px rgba(250,224,0,.35);
  animation:pfCheckPop .55s cubic-bezier(.22,1.4,.36,1) both;
}
@keyframes pfCheckPop{
  from{ transform:scale(.4); opacity:0 }
  to  { transform:scale(1);  opacity:1 }
}
.pf-success h3{
  font-family:var(--display);
  font-size:clamp(20.2px, 2.9vw, 31.3px);
  text-transform:uppercase;
  margin:0 0 12px;
  letter-spacing:-.005em;
}
.pf-success p{
  font-family:var(--body);
  font-size:14.2px;
  color:rgba(244,244,240, .7);
  margin:0;
}

@media (max-width:640px){
  .pf-shell{ padding:32px 24px }
  .pf-close{ top:14px; right:14px; padding:8px 14px; font-size:10px }
}


/* ABOUT US — extra patterns for doc-derived content */
.ap-inline{ color:var(--volt); white-space:nowrap }
.ap-closing{
  font-family:var(--body);
  font-size:clamp(13.3px, 1.3vw, 16.1px);
  line-height:1.5;
  color:rgba(244,244,240, .65);
  max-width:64ch;
  margin:24px 0 0;
}
.ap-services{
  list-style:none; padding:0; margin:24px 0 0;
  border-top:1px solid rgba(244,244,240, .18);
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:48px;
}
.ap-services li{
  display:flex; align-items:baseline; gap:18px;
  padding:14px 0;
  border-bottom:1px solid rgba(244,244,240, .10);
  font-family:var(--display);
  font-size:clamp(17.1px, 1.9vw, 20.9px);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-.005em;
  transition:color .25s ease, padding-left .35s var(--ease-out);
  cursor:default;
}
.ap-services li:hover{
  color:var(--volt);
  padding-left:14px;
}
.ap-srv-num{
  font-family:var(--body); font-size:11px; font-weight:400;
  letter-spacing:.18em; color:var(--volt);
  min-width:36px;
}
.ap-srv-name{ flex:1 }

.ap-pillars article h3{
  font-family:var(--display);
  font-size:31.3px;
  text-transform:uppercase;
  line-height:1;
  margin:0;
}

.ap-signature .ap-mid{
  margin-top:28px !important;
  font-size:clamp(15.2px, 1.7vw, 20.9px) !important;
  opacity:.7 !important;
}
.ap-signature .ap-final{
  margin-top:10px !important;
}

.ap-locations{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin:0 auto 32px;
  max-width:980px;
  text-align:left;
  border-top:1px solid rgba(244,244,240, .18);
  padding-top:24px;
}
@media (max-width:760px){
  .ap-locations{ grid-template-columns:1fr; gap:36px }
}
.ap-loc-city{
  font-family:var(--display);
  font-size:clamp(15.6px, 1.7vw, 21.2px);
  text-transform:uppercase;
  line-height:1;
  margin-bottom:6px;
}
.ap-loc-country{
  font-family:var(--body); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--volt);
  margin-bottom:10px;
}
.ap-loc-addr{
  font-family:var(--body); font-size:13.5px;
  line-height:1.45;
  color:rgba(244,244,240, .72);
  margin-bottom:3px;
}
.ap-loc-addr a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid rgba(244,244,240, .18);
  transition:color .25s, border-color .25s;
}
.ap-loc-addr a:hover{
  color:var(--volt);
  border-bottom-color:var(--volt);
}

/* CTA pulse — softly blinks when user reaches the studio/about section */
@keyframes ctaPulse{
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(250,224,0,.55),
                0 0 18px 0 rgba(250,224,0,.35);
  }
  50% {
    opacity: .55;
    box-shadow: 0 0 0 12px rgba(250,224,0,0),
                0 0 28px 6px rgba(250,224,0,.55);
  }
}
.cta-pill.is-pulsing{
  animation: ctaPulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .cta-pill.is-pulsing{ animation:none; box-shadow:0 0 22px rgba(250,224,0,.45) }
}

/* ABOUT US — inline section on the home page */
.about-inline{
  background:var(--ink);
  color:var(--paper);
  padding:72px clamp(16px, 3.12vw, 44px) 96px;
  border-top:1px solid var(--line);
}
.ai-shell{
  max-width:1320px;
  margin:0 auto;
}
.about-inline .ap-hero,
.about-inline .ap-section,
.about-inline .ap-signature{
  max-width:none;
  padding-left:0;
  padding-right:0;
}

/* ============================================================
   CONTACT PAGE — overlay with creative yellow-curtain reveal
   ============================================================ */
.contact-page{
  position:fixed; inset:0;
  z-index:250;
  background:var(--ink);
  color:var(--paper);
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.contact-page.is-open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition:opacity .3s ease, visibility 0s linear 0s;
}

/* Yellow curtain — sweeps across from right, then off to left */
.cp-curtain{
  position:absolute; inset:0;
  z-index:20;
  background:var(--volt);
  transform:translateX(100%);
  pointer-events:none;
  will-change:transform;
}
.contact-page.is-open .cp-curtain{
  animation:cpCurtain 1.2s cubic-bezier(.7,0,.2,1) forwards;
}
@keyframes cpCurtain{
  0%   { transform:translateX(100%) }
  42%  { transform:translateX(0) }
  100% { transform:translateX(-101%) }
}

.cp-close{
  position:absolute; top:24px; right:24px;
  z-index:30;
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px;
  background:transparent;
  border:1px solid rgba(244,244,240, .20);
  border-radius:999px;
  color:var(--paper);
  font-family:var(--body); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer;
  opacity:0;
  transition:opacity .35s ease, background .25s, color .25s, border-color .25s, transform .25s;
}
.contact-page.is-open .cp-close{
  opacity:1;
  transition-delay: .9s, 0s, 0s, 0s, 0s;
}
.cp-close:hover{
  background:var(--volt); color:var(--ink); border-color:var(--volt);
  transform:translateY(-1px);
}
.cp-close .x{ font-size:13px; opacity:.85 }

.cp-scroll{
  position:relative; height:100%;
  overflow-y:auto; overflow-x:hidden;
  padding:80px clamp(16px, 3.12vw, 44px) 56px;
}
.cp-scroll::-webkit-scrollbar{ width:8px }
.cp-scroll::-webkit-scrollbar-thumb{ background:rgba(244,244,240, .10); border-radius:8px }

/* HERO */
.cp-hero{
  max-width:1320px;
  margin:0 auto 48px;
  border-bottom:1px solid rgba(244,244,240, .10);
  padding-bottom:40px;
}
.cp-num{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,244,240, .55);
  margin-bottom:24px;
}
.cp-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--volt); box-shadow:0 0 12px var(--volt);
  animation:pulseDot 2.2s ease-in-out infinite;
}
.cp-hero h1{
  font-family:var(--display);
  font-size:clamp(37.8px, 7.4vw, 120.4px);
  line-height:.88;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0 0 24px;
}
.cp-hero h1 span{ color:var(--volt) }
.cp-lede{
  font-family:var(--body);
  font-size:clamp(15.2px, 1.5vw, 19px);
  line-height:1.5;
  color:rgba(244,244,240, .72);
  max-width:60ch;
  margin:0;
}

/* EMAIL GRID */
.cp-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
  max-width:1320px;
  margin:0 auto 40px;
}
@media(max-width:880px){ .cp-grid{ grid-template-columns:repeat(2,1fr); gap:28px } }
@media(max-width:480px){ .cp-grid{ grid-template-columns:1fr; gap:24px } }
.cp-col h4{
  font-family:var(--body); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,244,240, .55);
  font-weight:500;
  margin:0 0 12px;
}
.cp-col a{
  display:inline-block;
  font-family:var(--display);
  font-size:clamp(16.6px, 1.8vw, 23.9px);
  text-transform:none; text-decoration:none;
  color:var(--paper);
  letter-spacing:-.005em;
  border-bottom:1px solid rgba(244,244,240, .20);
  padding-bottom:4px;
  transition:color .25s, border-color .25s;
  word-break:break-all;
}
.cp-col a:hover{ color:var(--volt); border-color:var(--volt) }

/* LOCATIONS */
.cp-locations{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px 56px;
  max-width:1240px;
  margin:0 auto 40px;
  padding:46px 0;
  border-top:1px solid rgba(244,244,240, .18);
  border-bottom:1px solid rgba(244,244,240, .18);
  align-items:start;
}
@media(max-width:760px){ .cp-locations{ grid-template-columns:1fr; gap:32px } }
.cp-loc{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:32px;
  align-items:start;
}
.cp-loc .cp-map{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  border:0;
  padding:0;
  background:#000;
  border-radius:4px;
  overflow:hidden;
  cursor:zoom-in;
  transition:transform .25s ease, box-shadow .25s ease;
}
.cp-loc .cp-map img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.92;
  transition:opacity .25s ease;
}
.cp-loc .cp-map:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0, .4);
}
.cp-loc .cp-map:hover img{ opacity:1 }
.cp-loc .cp-map .cb-map-zoom{
  position:absolute; top:6px; right:6px;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
  color:var(--ink);
  background:var(--volt);
  border-radius:3px;
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.cp-loc .cp-map:hover .cb-map-zoom,
.cp-loc .cp-map:focus-visible .cb-map-zoom{ opacity:1 }
@media(max-width:720px){
  .cp-loc{ grid-template-columns:140px 1fr; gap:18px }
}
.cp-loc h4{
  font-family:var(--display) !important;
  font-size:clamp(34px, 4.4vw, 62px);
  text-transform:uppercase;
  line-height:1;
  letter-spacing:-.005em;
  margin:0 0 6px !important;
  font-weight:600;
  color:var(--paper);
}
.cp-loc-country{
  font-family:var(--body); font-size:11.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--volt);
  margin-bottom:14px;
}
.cp-loc p{
  font-family:var(--body); font-size:17px;
  line-height:1.6;
  color:rgba(244,244,240, .72);
  margin:0 0 5px;
}
.cp-loc p a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid rgba(244,244,240, .18);
  transition:color .25s, border-color .25s;
}
.cp-loc p a:hover{ color:var(--volt); border-color:var(--volt) }

/* CONTACT DETAILS — centered between the two locations */
.cp-contact-mid{
  grid-column:1 / -1;
  text-align:center;
  margin-top:8px;
  padding-top:34px;
  border-top:1px solid rgba(244,244,240, .12);
}
.cp-cm-block h4{
  font-family:var(--body);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(244,244,240, .55);
  font-weight:500;
  margin:0 0 14px;
}
.cp-cm-block a{
  display:block;
  font-family:var(--body);
  color:var(--paper);
  text-decoration:none;
  transition:color .25s, border-color .25s;
}
.cp-cm-block a:hover{ color:var(--volt) }
.cp-cm-mail{
  font-family:var(--display) !important;
  font-size:clamp(20.2px, 2.2vw, 31.3px);
  letter-spacing:-.005em;
  border-bottom:1px solid rgba(244,244,240, .25);
  padding-bottom:6px;
}
.cp-cm-mail:hover{ border-bottom-color:var(--volt) }
.cp-cm-phones a{
  display:inline-block;
  margin:4px 22px;
  font-size:18px;
  letter-spacing:.04em;
}
@media(max-width:760px){
  .cp-contact-mid{ padding-top:26px; margin-top:2px }
  .cp-cm-phones a{ margin:4px 12px; font-size:17px }
}

/* SOCIAL */
.cp-social{
  max-width:1320px;
  margin:0 auto 40px;
}
.cp-social h4{
  font-family:var(--body); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,244,240, .55);
  font-weight:500;
  margin:0 0 16px;
}
.cp-social ul{
  display:flex; flex-wrap:wrap; gap:16px 28px;
  list-style:none; padding:0; margin:0;
}
.cp-social li a{
  font-family:var(--body); font-size:13px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper); text-decoration:none;
  border-bottom:1px solid rgba(244,244,240, .20);
  padding-bottom:4px;
  transition:color .25s, border-color .25s;
}
.cp-social li a span{ font-size:10px; opacity:.7 }
.cp-social li a:hover{ color:var(--volt); border-color:var(--volt) }

/* CTA */
.cp-cta-row{
  max-width:1320px;
  margin:0 auto 56px;
}
.cp-cta{
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 32px;
  background:var(--volt);
  color:var(--ink);
  font-family:var(--body);
  font-size:13px; font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-radius:999px;
  text-decoration:none;
  transition:transform .3s var(--ease-out), box-shadow .25s;
}
.cp-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(250,224,0,.28);
}

/* FOOTER */
.cp-foot{
  max-width:1320px;
  margin:0 auto;
  padding-top:24px;
  border-top:1px solid rgba(244,244,240, .10);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--body); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,244,240, .5);
}

/* Content reveal — staggered fade-up after curtain passes (~0.6s into curtain) */
.cp-hero,
.cp-grid,
.cp-locations,
.cp-social,
.cp-cta-row,
.cp-foot{
  opacity:0;
  transform:translateY(24px);
}
.contact-page.is-open .cp-hero{
  animation: cpReveal .7s cubic-bezier(.22,.61,.36,1) .75s forwards;
}
.contact-page.is-open .cp-grid{
  animation: cpReveal .7s cubic-bezier(.22,.61,.36,1) .88s forwards;
}
.contact-page.is-open .cp-locations{
  animation: cpReveal .7s cubic-bezier(.22,.61,.36,1) 1.00s forwards;
}
.contact-page.is-open .cp-social{
  animation: cpReveal .7s cubic-bezier(.22,.61,.36,1) 1.12s forwards;
}
.contact-page.is-open .cp-cta-row{
  animation: cpReveal .7s cubic-bezier(.22,.61,.36,1) 1.22s forwards;
}
.contact-page.is-open .cp-foot{
  animation: cpReveal .7s cubic-bezier(.22,.61,.36,1) 1.32s forwards;
}
@keyframes cpReveal{
  to { opacity:1; transform:translateY(0) }
}

@media(max-width:760px){
  .cp-scroll{ padding:60px 18px 40px }
  .cp-hero{ margin-bottom:32px; padding-bottom:24px }
  .cp-hero h1{ margin-bottom:16px }
  .cp-grid{ margin-bottom:28px }
  .cp-locations{ margin-bottom:28px; padding:24px 0 }
  .cp-social{ margin-bottom:28px }
  .cp-cta-row{ margin-bottom:32px }
  .cp-close{ top:14px; right:14px; padding:9px 14px; font-size:10px }
}
@media (prefers-reduced-motion: reduce){
  .cp-curtain{ display:none }
  .contact-page.is-open .cp-hero,
  .contact-page.is-open .cp-grid,
  .contact-page.is-open .cp-locations,
  .contact-page.is-open .cp-social,
  .contact-page.is-open .cp-cta-row,
  .contact-page.is-open .cp-foot{ animation:none; opacity:1; transform:none }
}


/* ============================================================
   ABOUT US — switch accent from yellow to cyan + scroll hint
   ============================================================ */
.about-page{
  /* Override the brand yellow within the About overlay scope.
     Every var(--volt) inside resolves to cyan automatically. */
  --volt: #A3EFF1;
}
/* Targeted overrides for literal yellow values used inside about-page */
.about-page .ap-dot{
  box-shadow: 0 0 12px #A3EFF1;
}
.about-page .ap-close:hover{
  background:#A3EFF1; border-color:#A3EFF1; color:#0a0a10;
}
.about-page .ap-cta-btn:hover{
  box-shadow: 0 8px 32px rgba(163,239,241,.28);
}

/* Scroll hint — pulses at bottom of overlay; fades after user scrolls */
.ap-scroll-hint{
  position:fixed;
  bottom:28px; left:50%;
  transform:translateX(-50%);
  z-index:15;
  display:inline-flex; flex-direction:column;
  align-items:center; gap:6px;
  font-family:var(--body); font-size:10px;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(244,244,240, .6);
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
}
.about-page.is-open .ap-scroll-hint{ opacity:1; transition-delay:.6s }
.about-page.has-scrolled .ap-scroll-hint{ opacity:0; transition-delay:0s }
.ap-scroll-hint .arrow{
  font-size:17.1px; line-height:1;
  color:#A3EFF1;
  animation:scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint{
  0%, 100% { transform:translateY(0);  opacity:.6 }
  50%      { transform:translateY(6px); opacity:1 }
}
@media (prefers-reduced-motion: reduce){
  .ap-scroll-hint .arrow{ animation:none }
}

/* ============================================================
   BOOTSTRAP CONTAINER HELPERS — gentle integration
   The grid CDN provides .container, .row, .col-*. We use a soft
   container wrapper that respects the site’s padding system.
   ============================================================ */
.container-site{
  width:100%;
  margin-right:auto; margin-left:auto;
  padding-right:var(--pad-x);
  padding-left:var(--pad-x);
  max-width:1400px;
}

/* ============================================================
   CONTACT — inline section on home page
   ============================================================ */
.contact-section{
  background:var(--ink);
  color:var(--paper);
  padding:96px clamp(16px, 3.12vw, 44px) 80px;
  border-top:1px solid rgba(244,244,240, .10);
}
.cs-shell{ max-width:1400px; margin:0 auto }

.cs-head{
  margin-bottom:48px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(244,244,240, .10);
}
.cs-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,244,240, .6);
  margin-bottom:20px;
}
.cs-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--volt); box-shadow:0 0 12px var(--volt);
  animation:pulseDot 2.2s ease-in-out infinite;
}
.cs-h2{
  font-family:var(--display);
  font-size:clamp(26.7px, 4.7vw, 64.5px);
  line-height:.9;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0 0 18px;
}
.cs-h2 span{ color:var(--volt) }
.cs-lede{
  font-family:var(--body);
  font-size:clamp(15.2px, 1.5vw, 19px);
  line-height:1.5;
  color:rgba(244,244,240, .72);
  margin:0;
  max-width:60ch;
}

.cs-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  margin-bottom:40px;
  align-items:start;
}
@media(max-width:880px){ .cs-grid{ grid-template-columns:1fr; gap:36px } }

.cs-emails{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.cs-col h4{
  font-family:var(--body); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,244,240, .55);
  font-weight:500;
  margin:0 0 6px;
}
.cs-col a{
  display:inline-block;
  font-family:var(--display);
  font-size:clamp(15.2px, 1.5vw, 20.9px);
  text-transform:none; text-decoration:none;
  color:var(--paper);
  letter-spacing:-.005em;
  border-bottom:1px solid rgba(244,244,240, .20);
  padding-bottom:3px;
  transition:color .25s, border-color .25s;
  word-break:break-all;
}
.cs-col a:hover{ color:var(--volt); border-color:var(--volt) }

.cs-social{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
.cs-social h4{
  font-family:var(--body); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,244,240, .55);
  font-weight:500;
  margin:0 0 14px;
}
.cs-social ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
  gap:14px;
  align-items:flex-end;
}
.cs-social li a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-size:clamp(18.4px, 2vw, 27.6px);
  text-decoration:none;
  color:var(--paper);
  letter-spacing:-.01em;
  line-height:1;
  transition:color .25s, transform .25s;
}
.cs-social li a:hover{ color:var(--volt); transform:translateX(-4px) }
.cs-social .cs-arr{
  font-size:0.5em;
  opacity:.6;
  transition:opacity .25s, transform .25s;
}
.cs-social li a:hover .cs-arr{ opacity:1; transform:translate(4px,-4px) }

@media(max-width:880px){
  .cs-social, .cs-social ul{ align-items:flex-start }
}

.cs-locations{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  margin-bottom:0;
  padding:32px 0 0;
  border-top:1px solid rgba(244,244,240, .18);
}
@media(max-width:720px){ .cs-locations{ grid-template-columns:1fr; gap:32px; padding:24px 0 } }
.cs-loc h3{
  font-family:var(--display);
  font-size:clamp(20.2px, 2.4vw, 31.3px);
  text-transform:uppercase;
  line-height:1;
  letter-spacing:-.005em;
  margin:0 0 6px;
  color:var(--paper);
}
.cs-loc-country{
  font-family:var(--body); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--volt);
  margin-bottom:14px;
}
.cs-loc p{
  font-family:var(--body); font-size:13.3px;
  line-height:1.55;
  color:rgba(244,244,240, .72);
  margin:0 0 4px;
}
.cs-loc p a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid rgba(244,244,240, .18);
  transition:color .25s, border-color .25s;
}
.cs-loc p a:hover{ color:var(--volt); border-color:var(--volt) }











/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:#020203;
  color:var(--paper);
  padding:64px clamp(16px, 3.12vw, 44px) 32px;
  border-top:1px solid rgba(244,244,240, .10);
}
.sf-shell{ max-width:none; margin:0; width:100%; box-sizing:border-box }

.sf-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:32px;
  width:100%;
  padding-bottom:48px;
  border-bottom:1px solid rgba(244,244,240, .10);
}
.sf-brand{
  flex:0 0 auto;
  max-width:300px;
  min-width:0;
}
.sf-col{
  flex:0 0 auto;
  min-width:0;
}
.sf-col:last-child{
  text-align:right;
}
.sf-col:last-child .sf-social{
  justify-content:flex-end;
}
@media (max-width:1100px){
  .sf-top{ flex-wrap:wrap; gap:40px 32px }
  .sf-brand{ flex:1 1 100%; max-width:none }
  .sf-col{ flex:1 1 calc(25% - 24px) }
  .sf-col:last-child{ text-align:left }
  .sf-col:last-child .sf-social{ justify-content:flex-start }
}
@media (max-width:680px){
  .sf-col{ flex:1 1 calc(50% - 16px) }
}
@media (max-width:420px){
  .sf-col{ flex:1 1 100% }
}

.sf-fullmark-img{
  display:block;
  height:auto;
  width:100%;
  max-width:280px;
  margin-bottom:24px;
}
@media (max-width:680px){
  .sf-fullmark-img{ width:220px }
}

/* legacy sf-mark fallback (unused now but kept for safety) */
.sf-mark{
  font-family:var(--brand);
  font-size:27.6px;
  line-height:1;
  margin-bottom:20px;
  letter-spacing:-.01em;
}
.sf-mark .dot{ color:var(--volt) }
.sf-tag{
  font-family:var(--body);
  font-size:13.3px;
  line-height:1.55;
  color:rgba(244,244,240, .6);
  max-width:42ch;
  margin:0;
}


.sf-col h5{
  font-family:var(--body); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,244,240, .5);
  font-weight:500;
  margin:0 0 14px;
}
.sf-col ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:8px;
}
.sf-col li{
  font-family:var(--body); font-size:13.3px;
  color:rgba(244,244,240, .78);
}
.sf-col a{
  color:inherit;
  text-decoration:none;
  transition:color .25s;
}
.sf-col a:hover{ color:var(--volt) }

.sf-social{
  display:flex !important; flex-direction:row !important;
  flex-wrap:nowrap !important; gap:10px !important;
  align-items:center;
}
.sf-social li{ display:inline-flex }
.sf-social li a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border:1px solid rgba(244,244,240, .18);
  border-radius:50%;
  transition:color .25s, border-color .25s, background .25s, transform .25s;
}
.sf-social li a svg{
  width:15px; height:15px;
  display:block;
}
.sf-social li a:hover{
  background:var(--volt);
  border-color:var(--volt);
  color:var(--ink);
  transform:translateY(-2px);
}

.sf-bottom{
  display:flex; flex-wrap:wrap; gap:14px;
  justify-content:center;
  margin-top:32px;
  font-family:var(--body); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,244,240, .45);
  text-align:center;
}

@media (max-width:760px){
  .contact-section{ padding:64px clamp(16px, 3.12vw, 44px) 56px }
  .cs-head{ margin-bottom:32px; padding-bottom:24px }
  .cs-h2{ margin-bottom:14px }
  .cs-grid{ margin-bottom:28px }
  
  .site-footer{ padding:48px 20px 24px }
  .sf-top{ padding-bottom:32px }
}

/* CONTACT PAGE — scroll hint (matches About page pattern) */
.cp-scroll-hint{
  position:fixed;
  bottom:28px; left:50%;
  transform:translateX(-50%);
  z-index:25;
  display:inline-flex; flex-direction:column;
  align-items:center; gap:6px;
  font-family:var(--body); font-size:10px;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(244,244,240, .6);
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
}
.contact-page.is-open .cp-scroll-hint{
  opacity:1;
  transition-delay:1.4s;  /* wait for curtain + content stagger */
}
.contact-page.has-scrolled .cp-scroll-hint{
  opacity:0;
  transition-delay:0s;
}
.cp-scroll-hint .arrow{
  font-size:17.1px; line-height:1;
  color:var(--volt);
  animation:scrollHint 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .cp-scroll-hint .arrow{ animation:none }
}

/* ============================================================
   BURGER + MOBILE MENU
   ============================================================ */
.burger{
  display:none;
  background:transparent;
  border:1px solid rgba(244,244,240, .18);
  border-radius:999px;
  width:42px; height:42px;
  cursor:pointer;
  align-items:center; justify-content:center;
  position:relative;
  pointer-events:auto;
  flex-direction:column; gap:5px;
  padding:0;
  transition:border-color .25s, background .25s, transform .25s;
}
.burger span{
  display:block;
  width:18px; height:1.5px;
  background:var(--paper);
  transition:transform .35s var(--ease-out), opacity .25s ease;
}
.burger:hover{
  border-color:var(--volt);
  background:rgba(250,224,0,.06);
}
.burger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.burger.is-open span:nth-child(2){ opacity:0 }
.burger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

@media (max-width:760px){
  .pillnav, .cta-pill{ display:none !important }
  .burger{ display:inline-flex }
}

.mobile-menu{
  position:fixed; inset:0;
  z-index:240;
  background:var(--ink);
  color:var(--paper);
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease, visibility 0s linear .35s;
  display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start;
  padding:80px 32px 56px;
}
.mobile-menu.is-open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition:opacity .35s ease, visibility 0s linear 0s;
}
.mm-close{
  position:absolute; top:18px; right:18px;
  width:44px; height:44px;
  background:transparent;
  border:1px solid rgba(244,244,240, .20);
  border-radius:50%;
  color:var(--paper);
  font-size:17.1px;
  cursor:pointer;
  transition:background .25s, color .25s, border-color .25s;
}
.mm-close:hover{ background:var(--volt); color:var(--ink); border-color:var(--volt) }
.mm-nav{
  display:flex; flex-direction:column;
  gap:10px; margin-bottom:48px;
}
.mm-nav a{
  font-family:var(--display);
  font-size:clamp(31px, 9.5vw, 55px);
  text-transform:uppercase;
  letter-spacing:-.01em;
  color:var(--paper);
  text-decoration:none;
  line-height:.95;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out), color .25s;
}
.mm-nav a:hover, .mm-nav a:focus{ color:var(--volt) }
.mobile-menu.is-open .mm-nav a{ opacity:1; transform:none }
.mobile-menu.is-open .mm-nav a:nth-child(1){ transition-delay:.1s }
.mobile-menu.is-open .mm-nav a:nth-child(2){ transition-delay:.15s }
.mobile-menu.is-open .mm-nav a:nth-child(3){ transition-delay:.2s }
.mobile-menu.is-open .mm-nav a:nth-child(4){ transition-delay:.25s }
.mobile-menu.is-open .mm-nav a:nth-child(5){ transition-delay:.3s }
.mobile-menu.is-open .mm-nav a:nth-child(6){ transition-delay:.35s }

.mm-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px;
  background:var(--volt); color:var(--ink);
  font-family:var(--body);
  font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  border-radius:999px;
  text-decoration:none;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s var(--ease-out) .45s, transform .45s var(--ease-out) .45s;
}
.mobile-menu.is-open .mm-cta{ opacity:1; transform:none }

/* ============================================================
   HERO MESSAGE
   ============================================================ */
.hero-message{
  position:relative;
  z-index:4;
  max-width:780px;
  padding:0 8px;
  pointer-events:none;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,244,240, .65);
  margin-bottom:18px;
}
.hero-eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--volt);
  box-shadow:0 0 12px var(--volt);
  animation:pulseDot 2.2s ease-in-out infinite;
}
.hero-h1{
  font-family:var(--display);
  font-size:clamp(31px, 5.6vw, 75.7px);
  line-height:.92;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0 0 18px;
  color:var(--paper);
  text-shadow:0 2px 28px rgba(0,0,0,.5);
}
.hero-h1 span{ color:var(--volt) }
.hero-tag{
  font-family:var(--body);
  font-size:clamp(13.3px, 1.3vw, 16.1px);
  line-height:1.5;
  color:rgba(244,244,240, .85);
  margin:0;
  max-width:56ch;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
@media (max-width:760px){
  .hero-message{ padding-top:80px }
  .hero-h1{ margin-bottom:14px }
}

/* ============================================================
   TEAM LEDE + EYEBROW
   ============================================================ */
.team-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,244,240, .6);
  margin-bottom:14px;
}
.team-eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--volt);
  box-shadow:0 0 12px var(--volt);
  animation:pulseDot 2.2s ease-in-out infinite;
}
.team-lede{
  font-family:var(--body);
  font-size:clamp(14.2px, 1.3vw, 17.1px);
  line-height:1.55;
  color:rgba(244,244,240, .72);
  max-width:60ch;
  margin:14px 0 0;
}

/* ============================================================
   ABOUT TEASER — soft bridge between Clients and Contact
   ============================================================ */
.about-teaser{
  padding:80px clamp(16px, 3.2vw, 44px);
  text-align:center;
  border-top:1px solid rgba(244,244,240, .10);
  border-bottom:1px solid rgba(244,244,240, .10);
}
.at-shell{ max-width:1080px; margin:0 auto }
.at-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,244,240, .55);
  margin-bottom:24px;
}
.at-eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--volt);
  box-shadow:0 0 12px var(--volt);
  animation:pulseDot 2.2s ease-in-out infinite;
}
.at-line{
  font-family:var(--display);
  font-size:clamp(24.9px, 4vw, 49.8px);
  line-height:.98;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--paper);
  margin:0 0 32px;
}
.at-line span{ color:var(--volt) }
.at-link{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--body); font-size:12px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper); text-decoration:none;
  padding:14px 24px;
  border:1px solid rgba(244,244,240, .22);
  border-radius:999px;
  transition:background .25s, color .25s, border-color .25s, transform .3s var(--ease-out);
}
.at-link:hover{
  background:var(--volt); color:var(--ink); border-color:var(--volt);
  transform:translateY(-2px);
}
.at-link .arr{ font-size:13.3px; transition:transform .3s var(--ease-out) }
.at-link:hover .arr{ transform:translateX(4px) }

/* ============================================================
   ACCESSIBILITY — focus rings + skip link
   ============================================================ */
:focus-visible{
  outline:2px solid var(--volt);
  outline-offset:3px;
  border-radius:6px;
}
.skip-to-content{
  position:absolute;
  top:8px; left:8px;
  z-index:999;
  background:var(--volt);
  color:var(--ink);
  padding:10px 18px;
  border-radius:6px;
  font-family:var(--body); font-size:12px;
  font-weight:600;
  text-decoration:none;
  letter-spacing:.12em; text-transform:uppercase;
  transform:translateY(-200%);
  transition:transform .3s ease;
}
.skip-to-content:focus{ transform:translateY(0) }

/* ============================================================
   CTA PULSE — keeps animating until page reload (no auto-fade)
   ============================================================ */




.hero-reel{ background:#05060a; cursor:default; }
.reel-video{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.reel-video iframe{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh; border:0; pointer-events:none; }
.reel-mute{ position:absolute; z-index:7; right:40px; top:96px; display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; background:rgba(5,6,10,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(244,244,240,.28); color:var(--paper); font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; cursor:pointer; transition:background .2s,border-color .2s,color .2s; }
.reel-mute:hover{ border-color:var(--volt); color:var(--volt); background:rgba(5,6,10,.7); }
.reel-mute .ico{ font-size:13px; line-height:1; }
@media(max-width:760px){ .reel-mute{ right:14px; top:72px; padding:8px 12px; } }
.work-card .card-art, .wo-card .art{ background-size:cover !important; background-position:center !important; background-repeat:no-repeat; }
.vlb{ position:fixed; inset:0; z-index:300; background:rgba(3,4,8,.93); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s; }
.vlb.is-open{ opacity:1; visibility:visible; transition:opacity .3s ease; }
.vlb-stage{ width:min(1100px,92vw); aspect-ratio:16/9; background:#000; border-radius:8px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.vlb-frame, .vlb-frame iframe{ width:100%; height:100%; border:0; display:block; }
.vlb-title{ font-family:var(--display); font-weight:600; font-size:clamp(18px,2.2vw,28px); color:var(--paper); text-align:center; letter-spacing:-.01em; padding:0 12px; }
.vlb-close{ position:absolute; top:22px; right:26px; width:46px; height:46px; border-radius:50%; background:rgba(244,244,240,.08);
  border:1px solid rgba(244,244,240,.28); color:var(--paper); font-size:20px; cursor:pointer; transition:background .2s,border-color .2s,color .2s; z-index:2; }
.vlb-close:hover{ border-color:var(--volt); color:var(--volt); }



.cp-social ul.social-icons{ display:flex; gap:14px; align-items:center; list-style:none; padding:0; margin:0; }
.cp-social .social-icons li{ margin:0; }
.cp-social .social-icons a{ display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center;
  border:1px solid rgba(244,244,240,.25); border-radius:50%; color:var(--paper);
  transition:border-color .2s, color .2s, background .2s; }
.cp-social .social-icons a:hover{ border-color:var(--volt); color:var(--volt); background:rgba(250,224,0,.06); }
.cp-social .social-icons svg{ width:19px; height:19px; }
.companies-parent{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:40px; }
.companies-parent-label{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); }
.companies-parent-logo{ height:62px; width:auto; opacity:.92; }
@media(max-width:760px){ .companies-parent-logo{ height:46px } }


.cp-grid.cp-grid--single{ grid-template-columns:1fr; max-width:1320px; } .cp-grid--single .cp-col a{ font-size:clamp(26px,3.4vw,42px); }


.companies{ padding:130px var(--pad-x); text-align:center; }
.companies-inner{
  max-width:720px; margin:0 auto;
  border:1px solid rgba(244,244,240,.12); border-radius:18px;
  padding:54px 56px 58px;
  background:radial-gradient(130% 150% at 50% 0%, rgba(255,255,255,.045), rgba(255,255,255,0) 62%);
}
.companies-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--volt); margin-bottom:42px;
}
.companies-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--volt); box-shadow:0 0 10px var(--volt); }
.companies-inner .companies-hero img{ height:118px; width:auto; max-width:78%; object-fit:contain; display:block; margin:0 auto; }
.companies-connect{ display:flex; align-items:center; justify-content:center; gap:18px; margin:40px auto 36px; max-width:360px; }
.companies-connect .cc-line{ flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(244,244,240,.28), transparent); }
.companies-connect .cc-text{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); white-space:nowrap; }
.companies-inner .companies-parent-logo{ height:78px; width:auto; max-width:70%; opacity:.96; display:block; margin:0 auto; }
@media(max-width:680px){
  .companies{ padding:80px var(--pad-x); }
  .companies-inner{ padding:44px 24px 40px; border-radius:14px; }
  .companies-inner .companies-hero img{ height:84px; max-width:88%; }
  .companies-inner .companies-parent-logo{ height:58px; max-width:80%; }
  .companies-eyebrow{ margin-bottom:30px; }
}



.client-logo[alt="Impact BBDO"], .client-logo[alt="Memac Ogilvy"]{ height:62px; }
@media(max-width:980px){ .client-logo[alt="Impact BBDO"], .client-logo[alt="Memac Ogilvy"]{ height:50px; } }
@media(max-width:680px){ .client-logo[alt="Impact BBDO"], .client-logo[alt="Memac Ogilvy"]{ height:40px; } }


.client-logo[alt="Riyadh Season"],.client-logo[alt="Saudi Broadcasting Authority"]{filter:brightness(0) invert(1);}