/* ==========================================================================
   CircusINC Events — "Immersive Dark Stage"
   A dark, light-driven design system. Photography glows out of black.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* surfaces */
  --ink:        #07070a;
  --ink-2:      #0c0c11;
  --ink-3:      #131319;
  --ink-4:      #1b1b22;

  /* ink on dark */
  --text:       #eeeef4;
  --muted:      #9b9baa;
  --dim:        #6c6c7c;

  /* brand */
  --red:        #e31e24;
  --red-hot:    #ff3b41;
  --gold:       #e8b96a;
  --gold-soft:  #f6dcae;
  --wa:         #25d366;
  --wa-glow:    rgba(37,211,102,.45);

  /* light */
  --beam:       rgba(255,238,208,.10);
  --glow-red:   rgba(227,30,36,.34);
  --glow-gold:  rgba(232,185,106,.24);

  --line:       rgba(255,255,255,.10);
  --line-2:     rgba(255,255,255,.06);

  /* type */
  --display: "Space Grotesk", "Helvetica Neue", sans-serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  /* metrics */
  --wrap: 1280px;
  --gut: clamp(20px, 5vw, 64px);
  --pad: clamp(60px, 8.5vh, 116px);
  --r:   14px;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Base ------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.05; letter-spacing:-.025em; margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
address{ font-style:normal; }
::selection{ background:var(--red); color:#fff; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

.container{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--pad); position:relative; }
.text-center{ text-align:center; }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:9999;
  background:var(--red); color:#fff; padding:12px 20px; border-radius:8px; font-weight:600;
  transition:top .2s;
}
.skip-link:focus{ top:16px; }

/* ---------- 3. Atmosphere (grain, beams, vignette) ----------------------- */
.grain{
  position:fixed; inset:-120%; z-index:9000; pointer-events:none; opacity:.15;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
  mix-blend-mode:overlay;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)} 80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)}
}

/* soft global vignette so photography reads as "lit from within" */
.vignette{
  position:fixed; inset:0; z-index:8000; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 42%, transparent 52%, rgba(0,0,0,.4) 100%);
}

/* stage light beams */
.beams{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.beam{
  position:absolute; top:-30%; left:var(--x,50%);
  width:var(--w,340px); height:150%;
  background:linear-gradient(to bottom, var(--beam) 0%, transparent 72%);
  filter:blur(28px);
  transform-origin:top center;
  transform:rotate(var(--rot,0deg));
  animation:beamSway var(--dur,11s) var(--ease) infinite alternate;
}
.beam.red{ background:linear-gradient(to bottom, rgba(227,30,36,.15) 0%, transparent 70%); }
.beam.gold{ background:linear-gradient(to bottom, rgba(232,185,106,.13) 0%, transparent 70%); }
@keyframes beamSway{
  from{ transform:rotate(var(--rot,0deg)) }
  to  { transform:rotate(calc(var(--rot,0deg) + var(--sway,7deg))) }
}

/* dust motes canvas */
.dust{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; }

/* ---------- 4. Cursor (spotlight) ---------------------------------------- */
.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; z-index:20;
  margin:-260px 0 0 -260px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,240,215,.075) 0%, transparent 66%);
  opacity:0; transition:opacity .4s;
}
.cursor-dot{
  position:fixed; top:0; left:0; width:7px; height:7px; z-index:9500;
  margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--red);
  pointer-events:none; opacity:0; transition:opacity .3s, transform .18s var(--ease);
}
.cursor-ring{
  position:fixed; top:0; left:0; width:38px; height:38px; z-index:9499;
  margin:-19px 0 0 -19px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
  pointer-events:none; opacity:0;
  transition:opacity .3s, width .3s var(--ease), height .3s var(--ease),
             margin .3s var(--ease), background .3s, border-color .3s;
  display:grid; place-items:center;
}
.cursor-ring span{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; opacity:0; transition:opacity .2s; white-space:nowrap;
}
body.cursor-on .cursor-glow,
body.cursor-on .cursor-dot,
body.cursor-on .cursor-ring{ opacity:1; }
body.cursor-hot .cursor-ring{
  width:88px; height:88px; margin:-44px 0 0 -44px;
  background:var(--red); border-color:var(--red);
}
body.cursor-hot .cursor-ring span{ opacity:1; }
body.cursor-hot .cursor-dot{ opacity:0; }

/* ---------- 5. Preloader ------------------------------------------------- */
.stage-load{
  position:fixed; inset:0; z-index:9800; background:var(--ink);
  display:grid; place-items:center; transition:opacity .7s var(--ease-out), visibility .7s;
}
.stage-load.done{ opacity:0; visibility:hidden; }
.stage-load-inner{ text-align:center; position:relative; z-index:2; }
.stage-load img{ width:170px; margin:0 auto 26px; opacity:.95; }
.load-bar{
  width:min(240px,54vw); height:2px; background:rgba(255,255,255,.12);
  margin:0 auto; overflow:hidden; border-radius:2px;
}
.load-bar i{ display:block; height:100%; width:0; background:var(--red); transition:width .3s linear; }
.load-pct{
  font-family:var(--mono); font-size:11px; letter-spacing:.28em; color:var(--dim);
  margin-top:14px; text-transform:uppercase;
}

/* ---------- 6. Scroll progress + nav ------------------------------------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:9200;
  background:linear-gradient(90deg,var(--red),var(--gold));
}

.nav-wrap{ position:fixed; top:0; left:0; right:0; z-index:9100; padding:18px var(--gut); transition:.4s var(--ease); }
.nav-wrap.solid{
  padding-block:11px;
  background:rgba(7,7,10,.78);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line-2);
}
.nav-wrap.hide{ transform:translateY(-115%); }
.site-nav{
  max-width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
}
.brand img{ height:38px; width:auto; transition:.4s var(--ease); }
.nav-wrap.solid .brand img{ height:32px; }
.nav-links{ display:flex; gap:6px; }
.nav-links a{
  position:relative; padding:9px 15px; border-radius:99px;
  font-size:.855rem; font-weight:500; color:var(--muted);
  transition:color .25s, background .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:4px; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current]{ color:var(--text); }
.nav-links a:hover::after,.nav-links a[aria-current]::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:12px; }

.nav-toggle{ display:none; width:44px; height:44px; position:relative; z-index:9600; }
.nav-toggle span{
  position:absolute; left:11px; width:22px; height:1.5px; background:var(--text);
  transition:.35s var(--ease); border-radius:2px;
}
.nav-toggle span:nth-child(1){ top:16px; }
.nav-toggle span:nth-child(2){ top:22px; }
.nav-toggle span:nth-child(3){ top:28px; }
.nav-toggle.open span:nth-child(1){ top:22px; transform:rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; transform:translateX(12px); }
.nav-toggle.open span:nth-child(3){ top:22px; transform:rotate(-45deg); }

/* full-screen stage menu */
.stage-menu{
  position:fixed; inset:0; z-index:9500; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:96px var(--gut) 44px;
  clip-path:circle(0% at calc(100% - 42px) 42px);
  transition:clip-path .8s var(--ease-out); pointer-events:none;
}
.stage-menu.open{ clip-path:circle(150% at calc(100% - 42px) 42px); pointer-events:auto; }
.stage-menu nav{ display:flex; flex-direction:column; gap:2px; max-width:var(--wrap); margin-inline:auto; width:100%; }
.stage-menu nav a{
  font-family:var(--display); font-size:clamp(2rem,7.4vw,4rem); font-weight:600;
  letter-spacing:-.03em; color:var(--dim); padding:6px 0;
  display:flex; align-items:baseline; gap:18px;
  opacity:0; transform:translateY(28px);
  transition:color .3s, opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.stage-menu.open nav a{ opacity:1; transform:none; }
.stage-menu.open nav a:nth-child(1){ transition-delay:.16s }
.stage-menu.open nav a:nth-child(2){ transition-delay:.22s }
.stage-menu.open nav a:nth-child(3){ transition-delay:.28s }
.stage-menu.open nav a:nth-child(4){ transition-delay:.34s }
.stage-menu.open nav a:nth-child(5){ transition-delay:.40s }
.stage-menu nav a b{ font-family:var(--mono); font-size:.7rem; font-weight:400; color:var(--red); letter-spacing:.1em; }
.stage-menu nav a:hover{ color:var(--text); }
.stage-menu-foot{
  max-width:var(--wrap); margin:44px auto 0; width:100%;
  display:flex; flex-wrap:wrap; gap:10px 30px;
  padding-top:26px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.8rem; color:var(--muted);
}
.stage-menu-foot a:hover{ color:var(--red); }

/* ---------- 7. Buttons --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:99px;
  font-family:var(--display); font-size:.9rem; font-weight:600; letter-spacing:.01em;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .35s var(--ease), border-color .35s, transform .35s var(--ease);
}
.btn svg{ width:17px; height:17px; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(5px); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:translateY(101%); transition:transform .45s var(--ease-out);
}
.btn:hover::before{ transform:translateY(0); }

.btn-primary{ background:var(--red); color:#fff; box-shadow:0 10px 42px -10px var(--glow-red); }
.btn-primary::before{ background:var(--gold-soft); }
.btn-primary:hover{ color:var(--ink); }

.btn-ghost{ border:1px solid var(--line); color:var(--text); }
.btn-ghost::before{ background:var(--text); }
.btn-ghost:hover{ color:var(--ink); border-color:var(--text); }

.btn-sm{ padding:11px 20px; font-size:.82rem; }

/* WhatsApp — brand green, used for every "message us" action */
.btn-wa{ background:var(--wa); color:#04231a; box-shadow:0 10px 42px -12px var(--wa-glow); }
.btn-wa::before{ background:#fff; }
.btn-wa:hover{ color:#04231a; }
.btn-wa svg{ width:18px; height:18px; }
.btn-wa:hover svg{ transform:none; }

/* floating chat button */
.wa-float{
  position:fixed; left:24px; bottom:24px; z-index:9000;
  display:inline-flex; align-items:center; gap:0;
  height:52px; padding:0 15px; border-radius:99px;
  background:var(--wa); color:#04231a;
  box-shadow:0 14px 40px -10px var(--wa-glow);
  transition:gap .4s var(--ease), padding .4s var(--ease), transform .3s var(--ease);
}
.wa-float svg{ width:24px; height:24px; flex-shrink:0; }
.wa-float span{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-family:var(--display); font-size:.88rem; font-weight:600;
  transition:max-width .45s var(--ease);
}
.wa-float:hover,.wa-float:focus-visible{ gap:10px; padding-right:22px; transform:translateY(-3px); }
.wa-float:hover span,.wa-float:focus-visible span{ max-width:190px; }

/* WhatsApp contact card — .ccard.ccard-wa so it outranks the later .ccard rules */
.ccard.ccard-wa{ display:block; border-color:rgba(37,211,102,.32); }
.ccard.ccard-wa::before{ background:var(--wa); }
.ccard.ccard-wa h3{ color:var(--wa); display:flex; align-items:center; gap:9px; }
.ccard.ccard-wa h3 svg{ width:16px; height:16px; }
.ccard.ccard-wa:hover{ border-color:rgba(37,211,102,.6); }
.ccard.ccard-wa .big{ color:var(--text); }

/* ---------- 8. Section furniture ----------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:currentColor; opacity:.6; }

.section-head{ max-width:64ch; margin-bottom:clamp(38px,6vw,68px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow::after{ content:""; width:34px; height:1px; background:currentColor; opacity:.6; }
.section-head h2{ font-size:clamp(2rem,5.2vw,3.7rem); margin-bottom:20px; }
.section-head p{ color:var(--muted); font-size:1.06rem; max-width:56ch; }
.section-head.center p{ margin-inline:auto; }

.accent{ color:var(--red); }
.gold{ color:var(--gold); }

/* vertical rail label */
.rail-label{
  position:absolute; left:calc(var(--gut) * .32); top:50%;
  transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.35em; text-transform:uppercase;
  color:var(--dim); pointer-events:none;
}
@media (max-width:1180px){ .rail-label{ display:none; } }

/* hairline divider */
.hairline{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }

/* ---------- 9. Reveal animations ----------------------------------------- */
[data-reveal]{
  opacity:0; transform:translateY(30px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  filter:blur(6px);
}
[data-reveal].in{ opacity:1; transform:none; filter:none; }
[data-reveal][data-delay="1"]{ transition-delay:.09s }
[data-reveal][data-delay="2"]{ transition-delay:.18s }
[data-reveal][data-delay="3"]{ transition-delay:.27s }
[data-reveal][data-delay="4"]{ transition-delay:.36s }
[data-reveal][data-delay="5"]{ transition-delay:.45s }

/* line-by-line headline reveal */
[data-split] .ln{ display:block; overflow:hidden; }
[data-split] .ln > span{
  display:block; transform:translateY(105%);
  transition:transform 1s var(--ease-out);
}
[data-split].in .ln > span{ transform:none; }
[data-split].in .ln:nth-child(2) > span{ transition-delay:.1s }
[data-split].in .ln:nth-child(3) > span{ transition-delay:.2s }

/* image "glows out of black" reveal */
.lit{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--ink-2); }
.lit img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.lit::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(7,7,10,.7) 0%, transparent 55%);
}
.lit.in img{ animation:litIn 1.4s var(--ease-out) both; }
@keyframes litIn{
  from{ opacity:0; transform:scale(1.12); filter:brightness(.25) saturate(.4) blur(10px); }
  to  { opacity:1; transform:scale(1);    filter:none; }
}

/* ---------- 10. HERO ----------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-block:132px 78px; overflow:hidden;
  background:
    radial-gradient(85% 55% at 50% -8%, rgba(227,30,36,.11), transparent 62%),
    radial-gradient(60% 45% at 82% 108%, rgba(232,185,106,.09), transparent 70%);
}
.hero .container{ position:relative; z-index:3; }
.hero-grid{
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,72px); align-items:center;
}
.hero-kicker{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin-bottom:30px;
}
.live{ display:inline-flex; align-items:center; gap:8px; color:var(--text); }
.live i{
  width:6px; height:6px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 0 var(--glow-red); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(227,30,36,.55) }
  70%{ box-shadow:0 0 0 11px rgba(227,30,36,0) }
  100%{ box-shadow:0 0 0 0 rgba(227,30,36,0) }
}
.hero h1{
  font-size:clamp(2.7rem,7.4vw,6rem); line-height:.94; letter-spacing:-.04em; margin-bottom:26px;
}
.hero h1 em{
  font-style:normal; color:var(--red);
  text-shadow:0 0 58px var(--glow-red);
}
.hero-lede{ color:var(--muted); font-size:clamp(1rem,1.25vw,1.14rem); max-width:50ch; margin-bottom:36px; }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; }
.hero-note{ font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--dim); }

/* the stage frame holding the showreel */
.hero-visual{ position:relative; }
.stage-frame{
  position:relative; border-radius:220px 220px 18px 18px; overflow:hidden;
  aspect-ratio:4/5; background:var(--ink-2);
  border:1px solid var(--line);
  box-shadow:0 50px 130px -40px rgba(0,0,0,.95), 0 0 90px -30px var(--glow-red);
  /* forces a paint layer so the border-radius actually clips the
     composited <video> — without it Chrome leaks square corners */
  transform:translateZ(0);
}
/* the arch itself is the stage: a real venue photo, dimmed back */
.stage-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 38%;
  filter:brightness(.5) saturate(.85);
  border-radius:inherit;
}
/* the showreel plays on a 16:9 "screen" hung inside the arch, so the
   video is never cropped — its aspect ratio matches the screen exactly */
.stage-screen{
  position:absolute; left:7%; right:7%; top:19%; z-index:2;
  aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  background:#000; border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 80px -14px var(--glow-red), 0 34px 70px -24px rgba(0,0,0,.95);
}
.stage-screen video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:inherit;
}
.stage-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  border-radius:inherit;
  background:
    radial-gradient(78% 62% at 50% 34%, transparent 46%, rgba(7,7,10,.4) 100%),
    linear-gradient(to top, rgba(7,7,10,.72), transparent 40%);
}
.proscenium{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), inset 0 0 70px rgba(0,0,0,.55);
}
.reel-badge{
  position:absolute; left:18px; bottom:18px; z-index:5;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 15px; border-radius:99px;
  background:rgba(7,7,10,.62); backdrop-filter:blur(12px);
  border:1px solid var(--line);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text);
}
.reel-badge i{ width:5px; height:5px; border-radius:50%; background:var(--red); animation:pulse 2.4s infinite; }
.sound-toggle{
  position:absolute; right:18px; bottom:18px; z-index:5;
  width:42px; height:42px; border-radius:50%;
  background:rgba(7,7,10,.62); backdrop-filter:blur(12px); border:1px solid var(--line);
  display:grid; place-items:center; transition:.3s var(--ease);
}
.sound-toggle:hover{ background:var(--red); border-color:var(--red); }
.sound-toggle svg{ width:17px; height:17px; }
.sound-toggle .on-icon{ display:none; }
.sound-toggle.unmuted .on-icon{ display:block; }
.sound-toggle.unmuted .off-icon{ display:none; }

/* orbiting stat cards */
.orbit{
  position:absolute; z-index:5; padding:14px 18px; border-radius:12px;
  background:rgba(12,12,17,.82); backdrop-filter:blur(16px);
  border:1px solid var(--line);
  box-shadow:0 22px 60px -22px rgba(0,0,0,.9);
}
.orbit strong{ display:block; font-family:var(--display); font-size:1.5rem; line-height:1; color:var(--text); }
.orbit span{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.orbit.a{ top:12%; left:-38px; animation:float 6s ease-in-out infinite; }
.orbit.b{ bottom:16%; right:-30px; animation:float 6s ease-in-out infinite .8s; }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:11px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--dim);
}
.scroll-cue i{ width:1px; height:52px; background:linear-gradient(var(--red),transparent); }

/* ---------- 11. Marquee -------------------------------------------------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--line); padding-block:22px;
  background:var(--ink-2);
}
.marquee .track{ display:flex; gap:52px; width:max-content; animation:slide 34s linear infinite; }
.marquee span{
  font-family:var(--display); font-size:clamp(1.2rem,2.6vw,2rem); font-weight:600;
  letter-spacing:-.02em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.26);
  white-space:nowrap; display:flex; align-items:center; gap:52px;
}
.marquee span::after{ content:"✦"; -webkit-text-stroke:0; color:var(--red); font-size:.8rem; }
.marquee span:nth-child(even){ color:var(--text); -webkit-text-stroke:0; }
.marquee.slow .track{ animation-duration:56s; }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.marquee:hover .track{ animation-play-state:paused; }

/* client marquee — plain text, smaller */
.marquee-clients{ overflow:hidden; padding-block:20px; }
.marquee-clients .track{ display:flex; gap:56px; width:max-content; animation:slide 40s linear infinite; }
.marquee-clients span{
  font-family:var(--display); font-size:1.15rem; font-weight:600; color:var(--dim);
  white-space:nowrap; transition:color .3s;
}
.marquee-clients:hover span{ color:var(--muted); }

/* ---------- 12. Stats ---------------------------------------------------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--ink-2);
}
.stat{ padding:clamp(26px,3.4vw,40px); position:relative; border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--red),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease-out);
}
.stat.in::before{ transform:scaleX(1); }
.stat strong{
  display:block; font-family:var(--display); font-size:clamp(2.1rem,4.6vw,3.4rem);
  font-weight:600; line-height:1; letter-spacing:-.03em; margin-bottom:9px;
  background:linear-gradient(160deg,#fff,#9b9baa); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }

/* ---------- 13. Spotlight text (Who we are) ------------------------------ */
.spot-copy{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.3rem,3.1vw,2.35rem); line-height:1.34; letter-spacing:-.02em;
}
/* words dim until scrolled through */
.spot-copy .w{ color:rgba(238,238,244,.17); transition:color .35s var(--ease); }
.spot-copy .w.on{ color:var(--text); }

.who-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(34px,6vw,80px); align-items:center; }
.who-media{ position:relative; }
.who-media .lit{ aspect-ratio:4/5; }
.who-media .lit.small{
  position:absolute; right:-8%; bottom:-11%; width:52%; aspect-ratio:1;
  border:5px solid var(--ink); box-shadow:0 30px 70px -24px #000;
}

.value-list{ margin-top:clamp(40px,6vw,64px); border-top:1px solid var(--line); }
.value-row{
  display:grid; grid-template-columns:64px 1fr; gap:clamp(16px,3vw,44px);
  padding:clamp(24px,3.4vw,36px) 0; border-bottom:1px solid var(--line);
  position:relative; transition:padding-left .4s var(--ease);
}
.value-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--red); transform:scaleY(0); transform-origin:top;
  transition:transform .5s var(--ease-out);
}
.value-row:hover{ padding-left:22px; }
.value-row:hover::before{ transform:scaleY(1); }
.value-row .n{ font-family:var(--mono); font-size:.72rem; color:var(--red); letter-spacing:.14em; padding-top:6px; }
.value-row h3{ font-size:clamp(1.15rem,2.1vw,1.55rem); margin-bottom:9px; }
.value-row p{ color:var(--muted); max-width:62ch; }

/* ---------- 14. Lighting rig (services grid) ----------------------------- */
.rig{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.rig-cell{
  position:relative; isolation:isolate; overflow:hidden;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(26px,3vw,38px); min-height:236px;
  display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  transition:background .5s var(--ease);
}
.rig-cell .shot{
  position:absolute; inset:0; z-index:-2; opacity:0;
  transition:opacity .65s var(--ease-out), transform 1.1s var(--ease-out);
  transform:scale(1.14);
}
.rig-cell .shot img{ width:100%; height:100%; object-fit:cover; }
.rig-cell::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(7,7,10,.94) 12%, rgba(7,7,10,.66) 62%, rgba(7,7,10,.5));
  opacity:0; transition:opacity .65s var(--ease-out);
}
.rig-cell:hover .shot,.rig-cell:focus-visible .shot{ opacity:.9; transform:scale(1); }
.rig-cell:hover::after,.rig-cell:focus-visible::after{ opacity:1; }
.rig-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.rig-cell .n{ font-family:var(--mono); font-size:.68rem; color:var(--dim); letter-spacing:.16em; transition:color .4s; }
.rig-cell:hover .n{ color:var(--gold); }
.rig-icon{
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--muted);
  transition:.45s var(--ease); flex-shrink:0;
}
.rig-icon svg{ width:19px; height:19px; }
.rig-cell:hover .rig-icon{ background:var(--red); border-color:var(--red); color:#fff; transform:rotate(-8deg); }
.rig-cell h3{ font-size:clamp(1.1rem,1.9vw,1.4rem); margin-bottom:9px; }
.rig-cell p{ color:var(--muted); font-size:.93rem; transition:color .4s; }
.rig-cell:hover p{ color:#cfcfda; }

/* ---------- 15. Work index (cursor-follow preview) ----------------------- */
.work-index{ position:relative; border-top:1px solid var(--line); }
.work-row{
  display:grid; grid-template-columns:70px 1fr auto auto;
  align-items:center; gap:clamp(14px,3vw,36px);
  padding:clamp(24px,3.2vw,34px) 0; border-bottom:1px solid var(--line);
  position:relative; isolation:isolate; transition:padding .45s var(--ease);
}
.work-row::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(227,30,36,.1), transparent 55%);
  opacity:0; transition:opacity .45s var(--ease);
}
.work-row:hover{ padding-left:20px; padding-right:20px; }
.work-row:hover::before{ opacity:1; }
.work-row .n{ font-family:var(--mono); font-size:.72rem; color:var(--dim); letter-spacing:.14em; }
.work-row h3{
  font-size:clamp(1.3rem,3.4vw,2.4rem); letter-spacing:-.03em;
  color:var(--muted); transition:color .4s var(--ease);
}
.work-row:hover h3{ color:var(--text); }
.work-row .meta{ font-family:var(--mono); font-size:.7rem; color:var(--dim); letter-spacing:.13em; text-transform:uppercase; text-align:right; }
.work-row .arw{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--muted);
  transition:.45s var(--ease); flex-shrink:0;
}
.work-row .arw svg{ width:17px; height:17px; }
.work-row:hover .arw{ background:var(--red); border-color:var(--red); color:#fff; transform:rotate(-45deg); }

/* floating preview that follows the cursor */
.work-preview{
  position:fixed; top:0; left:0; z-index:30; width:330px; aspect-ratio:4/3;
  margin:-124px 0 0 -165px; border-radius:12px; overflow:hidden; pointer-events:none;
  opacity:0; transform:scale(.86); transition:opacity .4s var(--ease), transform .5s var(--ease-out);
  box-shadow:0 40px 90px -26px rgba(0,0,0,.95);
  border:1px solid var(--line);
}
.work-preview.on{ opacity:1; transform:scale(1); }
.work-preview img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .35s var(--ease);
}
.work-preview img.on{ opacity:1; }
@media (max-width:900px){ .work-preview{ display:none; } }

/* ---------- 16. Clientele ------------------------------------------------ */
.client-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:center; }
.client-shot{
  border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  background:#fff; padding:clamp(14px,2.2vw,26px);
}
.client-shot img{ width:100%; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.chip{
  padding:8px 15px; border-radius:99px; border:1px solid var(--line);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  transition:.3s var(--ease);
}
.chip:hover{ border-color:var(--red); color:var(--text); }

/* ---------- 17. Presence ------------------------------------------------- */
.presence{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.city{
  position:relative; aspect-ratio:1; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:var(--ink-2);
}
.city img{
  width:100%; height:100%; object-fit:cover; opacity:.84;
  transition:opacity .5s var(--ease), transform 1s var(--ease-out); filter:grayscale(.5);
}
.city:hover img{ opacity:1; transform:scale(1.07); filter:none; }
.city b{
  position:absolute; left:16px; bottom:14px; z-index:2;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:400;
}
.city::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(7,7,10,.88), transparent 52%);
}

/* ---------- 18. Process -------------------------------------------------- */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.6vw,30px); position:relative; }
.process::before{
  content:""; position:absolute; top:26px; left:6%; right:6%; height:1px;
  background:linear-gradient(90deg,transparent,var(--line),var(--line),transparent);
}
.step{ text-align:center; position:relative; }
.step .ring{
  width:54px; height:54px; margin:0 auto 22px; border-radius:50%;
  display:grid; place-items:center; background:var(--ink); color:var(--red);
  border:1px solid var(--line); position:relative; z-index:2;
  transition:.45s var(--ease);
}
.step:hover .ring{ background:var(--red); color:#fff; border-color:var(--red); box-shadow:0 0 42px -6px var(--glow-red); }
.step .ring svg{ width:21px; height:21px; }
.step b{ display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.24em; color:var(--dim); margin-bottom:11px; }
.step h3{ font-size:1.2rem; margin-bottom:10px; }
.step p{ color:var(--muted); font-size:.93rem; }

/* ---------- 19. Manifesto ------------------------------------------------ */
.manifesto{
  position:relative; overflow:hidden; text-align:center;
  background:var(--ink-2); border-block:1px solid var(--line);
}
.manifesto blockquote{
  margin:0; font-family:var(--display); font-weight:500;
  font-size:clamp(1.45rem,4vw,3rem); line-height:1.28; letter-spacing:-.028em;
  max-width:20ch; margin-inline:auto; position:relative; z-index:2;
}
.manifesto cite{
  display:block; margin-top:30px; font-family:var(--mono); font-style:normal;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); position:relative; z-index:2;
}

/* ---------- 20. Finale CTA ----------------------------------------------- */
.finale{
  position:relative; overflow:hidden; text-align:center;
  padding-block:clamp(90px,13vh,150px);
  background:
    radial-gradient(70% 90% at 50% 120%, rgba(227,30,36,.2), transparent 66%),
    var(--ink);
}
.finale h2{ font-size:clamp(2.2rem,7vw,5rem); margin-bottom:22px; position:relative; z-index:2; }
.finale p{ color:var(--muted); font-size:1.06rem; max-width:48ch; margin:0 auto 36px; position:relative; z-index:2; }
.finale .btn{ position:relative; z-index:2; }

/* ---------- 21. Footer --------------------------------------------------- */
.site-footer{ border-top:1px solid var(--line); background:var(--ink-2); padding-top:clamp(52px,7vw,82px); }
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:clamp(28px,4vw,52px);
  padding-bottom:clamp(38px,5vw,58px);
}
.footer-brand img{ height:44px; margin-bottom:20px; }
.footer-brand p{ color:var(--muted); font-size:.93rem; max-width:40ch; margin-bottom:22px; }
.socials{ display:flex; gap:9px; }
.socials a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--muted); transition:.35s var(--ease);
}
.socials a svg{ width:16px; height:16px; }
.socials a:hover{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-3px); }
.footer-col h4{
  font-family:var(--mono); font-size:.68rem; font-weight:400; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); margin-bottom:18px;
}
.footer-col li{ margin-bottom:10px; }
.footer-col a,.footer-col address{ color:var(--muted); font-size:.92rem; transition:color .3s; }
.footer-col a:hover{ color:var(--text); }
.footer-col address{ display:block; margin-bottom:16px; line-height:1.62; }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; align-items:center;
  padding-block:24px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--dim);
}
.footer-bottom .legal{ display:flex; gap:22px; }
.footer-bottom a:hover{ color:var(--red); }

.back-top{
  position:fixed; right:24px; bottom:24px; z-index:9000;
  width:46px; height:46px; border-radius:50%;
  background:var(--red); color:#fff; display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:.4s var(--ease); box-shadow:0 12px 34px -8px var(--glow-red);
}
.back-top.on{ opacity:1; visibility:visible; transform:none; }
.back-top svg{ width:19px; height:19px; }

/* ---------- 22. Page header (inner pages) -------------------------------- */
.page-head{
  position:relative; overflow:hidden;
  padding-block:clamp(140px,19vh,200px) clamp(56px,8vh,86px);
  border-bottom:1px solid var(--line);
}
.page-head .bg{ position:absolute; inset:0; z-index:0; }
.page-head .bg img{ width:100%; height:100%; object-fit:cover; opacity:.32; }
.page-head::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, var(--ink) 4%, rgba(7,7,10,.72) 55%, rgba(7,7,10,.85)),
    radial-gradient(70% 60% at 50% 0%, rgba(227,30,36,.16), transparent 65%);
}
.page-head .container{ position:relative; z-index:2; }
.page-head h1{ font-size:clamp(2.4rem,6.4vw,4.6rem); letter-spacing:-.035em; margin-bottom:18px; }
.page-head p{ color:var(--muted); font-size:1.08rem; max-width:58ch; }
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); margin-bottom:24px;
}
.crumbs a:hover{ color:var(--red); }
.crumbs span{ opacity:.5; }

/* ---------- 23. Services (detail rows) ----------------------------------- */
.svc-row{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center;
  padding-block:clamp(38px,6vw,68px); border-bottom:1px solid var(--line);
}
.svc-row:nth-child(even) .svc-media{ order:-1; }
.svc-media{ position:relative; }
.svc-media .lit{ aspect-ratio:16/11; }
.svc-media .tag{
  position:absolute; top:16px; left:16px; z-index:2;
  padding:8px 15px; border-radius:99px;
  background:rgba(7,7,10,.7); backdrop-filter:blur(12px); border:1px solid var(--line);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
}
.svc-body .n{ font-family:var(--mono); font-size:.72rem; color:var(--red); letter-spacing:.2em; margin-bottom:16px; display:block; }
.svc-body h2{ font-size:clamp(1.6rem,3.4vw,2.5rem); margin-bottom:18px; }
.svc-body p{ color:var(--muted); font-size:1.02rem; margin-bottom:18px; }
.svc-points{ display:flex; flex-wrap:wrap; gap:8px; }
.svc-points li{
  padding:7px 14px; border-radius:99px; border:1px solid var(--line);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}

/* ---------- 24. Event cards (index) -------------------------------------- */
.event-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,28px); }
.event-card{
  position:relative; display:block; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:var(--ink-2); isolation:isolate;
  transition:border-color .4s var(--ease), transform .5s var(--ease);
}
.event-card:hover{ border-color:rgba(255,255,255,.2); transform:translateY(-4px); }
.event-card .shot{ aspect-ratio:16/10; overflow:hidden; }
.event-card .shot img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.55) brightness(.72);
  transition:transform 1.1s var(--ease-out), filter .6s var(--ease);
}
.event-card:hover .shot img{ transform:scale(1.06); filter:none; }
.event-card .body{ padding:clamp(20px,2.6vw,30px); position:relative; }
.event-card .yr{
  position:absolute; top:-20px; right:clamp(20px,2.6vw,30px); z-index:3;
  padding:8px 15px; border-radius:99px; background:var(--red); color:#fff;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
}
.event-card .client{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px; display:block;
}
.event-card h3{ font-size:clamp(1.2rem,2.2vw,1.6rem); margin-bottom:11px; }
.event-card p{ color:var(--muted); font-size:.94rem; margin-bottom:18px; }
.event-card .foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-top:16px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.event-card .foot em{ font-style:normal; color:var(--text); display:inline-flex; align-items:center; gap:8px; }
.event-card .foot em svg{ width:15px; height:15px; transition:transform .4s var(--ease); }
.event-card:hover .foot em svg{ transform:translateX(5px); }

/* ---------- 25. Gallery + lightbox --------------------------------------- */
.gallery{ columns:3; column-gap:14px; }
.gallery button{
  display:block; width:100%; margin-bottom:14px; padding:0; border-radius:10px; overflow:hidden;
  position:relative; background:var(--ink-2); border:1px solid var(--line);
  break-inside:avoid;
}
.gallery button img{
  width:100%; height:auto; display:block;
  filter:grayscale(.4) brightness(.78);
  transition:transform .8s var(--ease-out), filter .5s var(--ease);
}
.gallery button:hover img{ transform:scale(1.045); filter:none; }
.gallery button::after{
  content:"↗"; position:absolute; right:12px; bottom:10px;
  width:30px; height:30px; border-radius:50%; background:var(--red); color:#fff;
  display:grid; place-items:center; font-size:.85rem;
  opacity:0; transform:scale(.6); transition:.4s var(--ease);
}
.gallery button:hover::after{ opacity:1; transform:scale(1); }

.lightbox{
  position:fixed; inset:0; z-index:9700; background:rgba(4,4,6,.97);
  display:grid; place-items:center; padding:clamp(56px,7vw,80px) clamp(16px,4vw,90px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
  backdrop-filter:blur(8px);
}
.lightbox.on{ opacity:1; visibility:visible; }
.lightbox figure{ margin:0; max-width:100%; display:flex; flex-direction:column; gap:16px; align-items:center; }
.lightbox img{
  max-width:100%; max-height:76vh; width:auto; object-fit:contain; border-radius:8px;
  box-shadow:0 40px 110px -30px #000;
}
.lightbox figcaption{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  text-align:center;
}
.lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%; border:1px solid var(--line);
  background:rgba(12,12,17,.8); display:grid; place-items:center; color:var(--text);
  transition:.3s var(--ease);
}
.lb-btn:hover{ background:var(--red); border-color:var(--red); }
.lb-btn svg{ width:20px; height:20px; }
.lb-prev{ left:clamp(10px,2.6vw,32px); }
.lb-next{ right:clamp(10px,2.6vw,32px); }
.lb-close{
  position:absolute; top:clamp(14px,2.6vw,28px); right:clamp(14px,2.6vw,28px);
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:rgba(12,12,17,.8); display:grid; place-items:center; transition:.3s var(--ease);
}
.lb-close:hover{ background:var(--red); border-color:var(--red); transform:rotate(90deg); }
.lb-close svg{ width:18px; height:18px; }
.lb-count{
  position:absolute; top:clamp(20px,2.6vw,34px); left:clamp(16px,2.6vw,32px);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; color:var(--dim);
}

/* ---------- 26. Contact -------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(30px,5vw,68px); align-items:start; }
.contact-cards{ display:grid; gap:14px; }
.ccard{
  padding:clamp(20px,2.6vw,28px); border-radius:var(--r);
  border:1px solid var(--line); background:var(--ink-2);
  position:relative; overflow:hidden; transition:.4s var(--ease);
}
.ccard::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--red);
  transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease-out);
}
.ccard:hover{ border-color:rgba(255,255,255,.2); }
.ccard:hover::before{ transform:scaleY(1); }
.ccard h3{
  font-family:var(--mono); font-size:.68rem; font-weight:400; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); margin-bottom:12px;
}
.ccard p,.ccard a{ color:var(--muted); font-size:.97rem; line-height:1.6; }
.ccard a:hover{ color:var(--text); }
.ccard .big{ font-family:var(--display); font-size:1.25rem; color:var(--text); }

.form-shell{
  padding:clamp(24px,3.4vw,40px); border-radius:var(--r);
  border:1px solid var(--line); background:var(--ink-2);
}
.field{ margin-bottom:18px; }
.field label{
  display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); margin-bottom:9px;
}
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; border-radius:9px;
  background:var(--ink); border:1px solid var(--line); color:var(--text);
  font-family:var(--body); font-size:.96rem;
  transition:border-color .3s, box-shadow .3s;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(227,30,36,.14);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-note{ font-size:.82rem; color:var(--dim); margin-top:14px; }

/* ---------- 27. Legal / prose -------------------------------------------- */
.prose{ max-width:74ch; }
.prose h2{ font-size:clamp(1.3rem,2.6vw,1.8rem); margin:38px 0 14px; }
.prose h2:first-child{ margin-top:0; }
.prose p,.prose li{ color:var(--muted); margin-bottom:14px; }
.prose ul{ list-style:disc; padding-left:22px; margin-bottom:18px; }
.prose a{ color:var(--red); text-decoration:underline; text-underline-offset:3px; }

/* ---------- 28. 404 ------------------------------------------------------ */
.nf{ min-height:100svh; display:grid; place-items:center; text-align:center; position:relative; overflow:hidden; }
.nf .container{ position:relative; z-index:3; }
.nf h1{
  font-size:clamp(5rem,22vw,15rem); line-height:.85; letter-spacing:-.05em;
  background:linear-gradient(170deg,#fff,#3a3a46); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:18px;
}

/* ---------- 29. Responsive ----------------------------------------------- */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; gap:48px; }
  .hero-visual{ max-width:520px; margin-inline:auto; width:100%; }
  .stage-frame{ aspect-ratio:1/1; border-radius:160px 160px 18px 18px; }
  .stage-screen{ top:26%; }
  .orbit.a{ left:-14px } .orbit.b{ right:-10px }
  .who-grid,.client-grid,.contact-grid{ grid-template-columns:1fr; }
  .who-media{ max-width:480px; }
  .rig{ grid-template-columns:repeat(2,1fr); }
  .process{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
  .process::before{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .gallery{ columns:2; }
}
@media (max-width:820px){
  .nav-links,.nav-cta{ display:none; }
  .nav-toggle{ display:block; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat:nth-child(odd){ border-right:1px solid var(--line); }
  .stat:nth-child(even){ border-right:0; }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .svc-row{ grid-template-columns:1fr; gap:26px; }
  .svc-row:nth-child(even) .svc-media{ order:0; }
  .event-grid{ grid-template-columns:1fr; }
  .presence{ grid-template-columns:repeat(2,1fr); }
  .work-row{ grid-template-columns:auto 1fr auto; gap:14px; }
  .work-row .meta{ display:none; }
}
@media (max-width:620px){
  .rig{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .gallery{ columns:1; }
  .field-row{ grid-template-columns:1fr; }
  .stage-frame{ border-radius:120px 120px 14px 14px; }
  .orbit{ padding:11px 14px; }
  .orbit strong{ font-size:1.2rem; }
  .value-row{ grid-template-columns:1fr; gap:10px; }
  .lb-btn{ width:44px; height:44px; }
  .footer-bottom{ justify-content:flex-start; }
  .who-media .lit.small{ width:46%; right:-4%; }
}

/* ---------- 30. Motion / print preferences ------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; filter:none; }
  [data-split] .ln > span{ transform:none; }
  .lit.in img{ animation:none; }
  .spot-copy .w{ color:var(--text); }
  .cursor-glow,.cursor-dot,.cursor-ring{ display:none; }
  .beam,.dust,.grain{ display:none; }
}
@media print{
  .nav-wrap,.stage-menu,.back-top,.wa-float,.grain,.vignette,.beams,.dust,
  .cursor-glow,.cursor-dot,.cursor-ring,.stage-load{ display:none !important; }
  body{ background:#fff; color:#000; }
}