/* ============================================================================
   HYPER MAGNET — Neurobranding & Digital Marketing, Coimbatore
   Design system: dipole physics. North = cyan (psychology / research).
                  South = magenta (sales / creative). Field lines connect them.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS -- */
:root{
  /* ground */
  --bg:        #05060B;
  --bg-2:      #080A12;
  --bg-3:      #0C0F1A;
  --panel:     rgba(255,255,255,.028);
  --panel-2:   rgba(255,255,255,.045);
  --line:      rgba(150,168,220,.13);
  --line-2:    rgba(150,168,220,.24);

  /* ink */
  --ink:       #EAEEF8;
  --ink-2:     #A8B1C7;
  --ink-dim:   #737C93;
  --ink-faint: #4A5268;

  /* poles */
  --n:         #12E2FF;
  --n-deep:    #0A8FB8;
  --s:         #FF2D8A;
  --s-deep:    #B01A5C;
  --sig:       #C9FF3D;

  --n-glow:    rgba(18,226,255,.45);
  --s-glow:    rgba(255,45,138,.45);

  /* type */
  --f-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* metrics */
  --shell:     1440px;
  --pad:       clamp(20px, 4.5vw, 72px);
  --sec-y:     clamp(110px, 14vh, 200px);
  --r:         2px;

  /* motion */
  --e-out:     cubic-bezier(.16,1,.3,1);
  --e-io:      cubic-bezier(.65,0,.35,1);
}

/* ----------------------------------------------------------------- RESET -- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:300;
  font-size:16px;
  line-height:1.62;
  letter-spacing:.002em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; height:100vh; }
img,svg,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; background:none; border:0; }
button{ cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--s); color:#fff; }

/* scrollbar */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:#000; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--n-deep),var(--s-deep)); border-radius:9px; }

/* ------------------------------------------------------------- UTILITIES -- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.mono{ font-family:var(--f-mono); font-weight:400; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-mono); font-size:.68rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2);
  margin-bottom:clamp(20px,2.6vw,34px);
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--n); box-shadow:0 0 12px var(--n-glow);
  animation:pulse 2.6s var(--e-io) infinite;
}
.eyebrow .dot--sig{ background:var(--sig); box-shadow:0 0 14px rgba(201,255,61,.6); }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.72);} }

.h2{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(2.1rem, 5.2vw, 4.4rem);
  line-height:.98; letter-spacing:-.032em;
  color:var(--ink);
}
.h2--mega{ font-size:clamp(2.6rem, 7.4vw, 6.6rem); font-weight:700; letter-spacing:-.04em; }

.lede{
  max-width:60ch; color:var(--ink-2);
  font-size:clamp(1rem,1.25vw,1.14rem); line-height:1.66; font-weight:300;
  margin-top:clamp(20px,2.4vw,32px);
}

.sec-head{ margin-bottom:clamp(48px,7vw,96px); }
.sec-head--wide .lede{ max-width:72ch; }

.section{ position:relative; padding-block:var(--sec-y); }

/* reveal ---------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--e-out), transform .9s var(--e-out); transition-delay:calc(var(--i,0) * 70ms); }
.reveal.in{ opacity:1; transform:none; }

/* split text ------------------------------------------------------------ */
/* Per-word mask. The inner <i> is display:block so it can't be shoved around
   by nested inline-block baselines, and the padding/negative-margin pair gives
   descenders (g, y, p) room without widening the layout. */
.sp-line{ display:block; }
.sp-word{
  display:inline-block; vertical-align:top; overflow:hidden;
  padding:0 .06em .2em 0; margin:0 -.06em -.2em 0;
}
.sp-word > i{
  display:block; font-style:inherit;
  transform:translateY(106%) rotate(3deg); opacity:0;
  transition:transform 1.05s var(--e-out), opacity .8s var(--e-out);
  transition-delay:calc(var(--w,0) * 42ms);
}
.in .sp-word > i, .sp-on .sp-word > i{ transform:none; opacity:1; }

/* buttons --------------------------------------------------------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.75em;
  padding:.85em 1.45em; border-radius:var(--r);
  font-family:var(--f-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  border:1px solid var(--line-2);
  overflow:hidden; isolation:isolate;
  transition:color .4s var(--e-out), border-color .4s var(--e-out), transform .5s var(--e-out);
  will-change:transform;
}
.btn > span,.btn > i{ position:relative; z-index:2; }
.btn__arr{ font-style:normal; transition:transform .45s var(--e-out); }
.btn:hover .btn__arr{ transform:translateX(5px); }
.btn::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,var(--n),var(--s));
  transform:translateY(101%); transition:transform .55s var(--e-out);
}
.btn:hover::before{ transform:none; }
.btn--pole{ color:var(--ink); border-color:rgba(255,255,255,.26); }
.btn--pole:hover{ color:#04060C; border-color:transparent; }
.btn--ghost{ color:var(--ink-2); }
.btn--ghost:hover{ color:#04060C; }
.btn--lg{ padding:1.05em 1.9em; font-size:.76rem; }

/* tags ------------------------------------------------------------------ */
.tag{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.42em .85em; border:1px solid var(--line); border-radius:100px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2);
  background:rgba(6,8,15,.55); backdrop-filter:blur(10px);
}
.tag--live{ color:var(--n); border-color:rgba(18,226,255,.3); }
.tag--live i{ width:5px; height:5px; border-radius:50%; background:var(--n); box-shadow:0 0 10px var(--n); animation:pulse 1.8s infinite; }

/* ================================================================= BOOT == */
.boot{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .9s var(--e-out), visibility .9s;
}
.boot.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.boot__grid{
  position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 50%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0%,transparent 72%);
}
.boot__center{ position:relative; width:min(400px,76vw); text-align:center; }
.boot__mark{ height:52px; width:auto; margin:0 auto 30px; color:var(--ink); animation:bootSpin 3.4s var(--e-io) infinite; }
.boot__mark .pn{ fill:var(--n); } .boot__mark .ps{ fill:var(--s); }
@keyframes bootSpin{ 0%,100%{ transform:rotate(0) scale(1);} 50%{ transform:rotate(180deg) scale(1.08);} }
.boot__readout{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.boot__label,.boot__pct{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); }
.boot__pct{ color:var(--ink); font-size:.9rem; letter-spacing:.1em; }
.boot__bar{ height:1px; background:var(--line-2); overflow:hidden; }
.boot__bar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--n),var(--s)); box-shadow:0 0 16px var(--n-glow); }
.boot__lines{ margin-top:22px; min-height:60px; text-align:left; }
.boot__lines span{ display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; color:var(--ink-faint); opacity:0; animation:bootIn .4s forwards; }
@keyframes bootIn{ to{ opacity:1; } }

/* =============================================================== CURSOR == */
.cursor{ position:fixed; top:0; left:0; z-index:9998; pointer-events:none; mix-blend-mode:difference; }
.cursor__ring{
  position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(255,255,255,.6); border-radius:50%;
  transition:width .35s var(--e-out),height .35s var(--e-out),margin .35s var(--e-out),border-color .35s,opacity .3s;
}
.cursor__dot{ position:absolute; width:4px; height:4px; margin:-2px 0 0 -2px; background:#fff; border-radius:50%; }
.cursor__label{
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; opacity:0; transition:opacity .3s; white-space:nowrap;
}
.cursor.is-hot .cursor__ring{ width:72px; height:72px; margin:-36px 0 0 -36px; border-color:rgba(255,255,255,.95); }
.cursor.is-hot .cursor__dot{ opacity:0; }
.cursor.is-label .cursor__label{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }
@media (hover:hover) and (pointer:fine){ body{ cursor:none; } a,button,input,select,textarea,label{ cursor:none; } }

/* ================================================================ STAGE == */
.stage{ position:fixed; inset:0; z-index:0; pointer-events:none; }
#c-field{ width:100%; height:100%; opacity:0; transition:opacity 1.4s var(--e-out); }
#c-field.is-live{ opacity:1; }
/* Readability scrim. The hero and thesis copy is left-aligned, so this lays a
   dark bed under the text column and lets the field stay bright on the right
   where the magnet actually sits. Without it the particles eat the type. */
.stage__scrim{
  position:absolute; inset:0;
  background:linear-gradient(95deg,
    rgba(5,6,11,.93) 0%,
    rgba(5,6,11,.88) 26%,
    rgba(5,6,11,.64) 45%,
    rgba(5,6,11,.26) 62%,
    rgba(5,6,11,.04) 78%,
    rgba(5,6,11,0)   90%);
}
/* narrow screens: text is full-width, so darken the whole plate instead */
@media (max-width:860px){
  .stage__scrim{
    background:radial-gradient(125% 72% at 42% 40%,
      rgba(5,6,11,.90) 0%,
      rgba(5,6,11,.80) 38%,
      rgba(5,6,11,.52) 66%,
      rgba(5,6,11,.18) 86%,
      rgba(5,6,11,.04) 100%);
  }
}

.stage__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(48vw 48vw at 22% 18%, rgba(18,226,255,.09), transparent 62%),
    radial-gradient(52vw 52vw at 80% 76%, rgba(255,45,138,.085), transparent 62%);
  mix-blend-mode:screen;
}
.stage__vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 45%, transparent 32%, rgba(3,4,8,.72) 100%);
}
.stage__grain{
  position:absolute; inset:-150%; opacity:.032; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0);} 16%{ transform:translate(-3%,-4%);} 33%{ transform:translate(-6%,2%);}
  50%{ transform:translate(3%,-5%);} 66%{ transform:translate(-2%,6%);} 83%{ transform:translate(5%,3%);}
}

/* ================================================================== NAV == */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px var(--pad);
  transition:padding .5s var(--e-out), background .5s, border-color .5s, transform .6s var(--e-out);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding-block:13px;
  background:rgba(5,6,11,.72); backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav.is-hidden{ transform:translateY(-110%); }

.nav__brand{ display:flex; align-items:center; gap:12px; will-change:transform; }
.nav__mark{ height:28px; width:auto; color:var(--ink); flex:none; transition:transform .6s var(--e-out); }
.nav__mark .pn{ fill:var(--n); } .nav__mark .ps{ fill:var(--s); }
.nav__brand:hover .nav__mark{ transform:rotate(180deg); }
.nav__word{ display:flex; flex-direction:column; line-height:1; font-family:var(--f-display); }
.nav__word b{ font-size:.86rem; font-weight:700; letter-spacing:.14em; }
.nav__word em{ font-style:normal; font-size:.86rem; font-weight:400; letter-spacing:.235em; color:var(--ink-dim); }

.nav__links{ display:flex; align-items:center; gap:clamp(14px,1.9vw,30px); }
.nav__links a{
  position:relative; display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-dim); padding-block:6px; transition:color .35s; white-space:nowrap;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:linear-gradient(90deg,var(--n),var(--s));
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--e-out);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after,.nav__links a.is-current::after{ transform:none; transform-origin:left; }
.nav__links a.is-current{ color:var(--ink); }
.nav__links .flag{
  font-style:normal; font-size:.52rem; letter-spacing:.14em; padding:.2em .45em;
  border:1px solid rgba(201,255,61,.35); color:var(--sig); border-radius:2px;
}

.nav__actions{ display:flex; align-items:center; gap:12px; }
.pwr{
  display:inline-flex; align-items:center; gap:.5em; padding:.55em .8em;
  border:1px solid var(--line); border-radius:2px;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; color:var(--ink-dim);
  transition:border-color .35s,color .35s;
}
.pwr:hover{ border-color:var(--line-2); color:var(--ink-2); }
.pwr b{ color:var(--n); font-weight:500; }
.pwr__led{ width:5px; height:5px; border-radius:50%; background:var(--n); box-shadow:0 0 8px var(--n); }
.pwr[aria-pressed="false"] b{ color:var(--ink-faint); }
.pwr[aria-pressed="false"] .pwr__led{ background:var(--ink-faint); box-shadow:none; }

.burger{ display:none; flex-direction:column; gap:5px; width:34px; padding:8px 4px; }
.burger i{ display:block; height:1px; background:var(--ink); transition:transform .45s var(--e-out),opacity .3s; }
.burger i:first-child{ width:100%; } .burger i:last-child{ width:62%; align-self:flex-end; }
.burger.is-open i:first-child{ transform:translateY(3px) rotate(45deg); }
.burger.is-open i:last-child{ width:100%; transform:translateY(-3px) rotate(-45deg); }

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:880;
  background:rgba(5,6,11,.97); backdrop-filter:blur(24px);
  display:grid; place-items:center;
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--e-out);
  pointer-events:none;
}
.menu.is-open{ clip-path:inset(0); pointer-events:auto; }
.menu__inner{ width:100%; max-width:var(--shell); padding:96px var(--pad) 48px; display:grid; gap:56px; grid-template-columns:1fr; }
.menu__cap{ display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:22px; }
.menu__col a{
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--f-display); font-size:clamp(1.5rem,5vw,2.4rem); font-weight:500; letter-spacing:-.02em;
  padding:10px 0; color:var(--ink-2); transition:color .35s,transform .5s var(--e-out);
}
.menu__col a em{ font-style:normal; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; color:var(--ink-faint); }
.menu__col a:hover{ color:var(--ink); transform:translateX(10px); }
.menu__addr{ color:var(--ink-2); font-size:.94rem; margin-bottom:14px; }
.menu__mail{ color:var(--n); font-family:var(--f-mono); font-size:.8rem; }
.menu__socials{ display:flex; gap:18px; margin-top:26px; }
.menu__socials a{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
.menu__socials a:hover{ color:var(--ink); }

/* progress bar */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:950; background:transparent; }
.progress i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--n),var(--s)); box-shadow:0 0 14px var(--n-glow); }

/* =============================================================== RAIL ==== */
.rail{
  position:fixed; right:calc(var(--pad) * .5); top:50%; transform:translateY(-50%);
  z-index:860; display:flex; flex-direction:column; gap:2px; align-items:flex-end;
}
.rail button{ display:flex; align-items:center; gap:10px; padding:6px 0; }
.rail button span{
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); opacity:0; transform:translateX(8px);
  transition:opacity .4s var(--e-out),transform .4s var(--e-out),color .3s;
}
.rail button i{ display:block; width:22px; height:1px; background:var(--ink-faint); transition:width .45s var(--e-out),background .45s; }
.rail button:hover span{ opacity:1; transform:none; }
.rail button:hover i{ width:34px; background:var(--ink-2); }
.rail button.is-on span{ opacity:1; transform:none; color:var(--ink); }
.rail button.is-on i{ width:44px; background:linear-gradient(90deg,var(--n),var(--s)); box-shadow:0 0 10px var(--n-glow); }

/* ================================================================ HUD === */
.hud{
  position:fixed; left:var(--pad); bottom:26px; z-index:860;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .6s var(--e-out), transform .6s var(--e-out);
  display:flex; flex-direction:column; gap:7px;
  padding:14px 16px; border:1px solid var(--line); border-radius:2px;
  background:rgba(5,6,11,.5); backdrop-filter:blur(14px);
  min-width:206px;
}
body.past-hero .hud{ opacity:1; transform:none; }
/* The Coimbatore Index has its own console readouts; drop the HUD so it
   doesn't sit on top of the lattice. */
body[data-sector="index"] .hud{ opacity:0; transform:translateY(10px); }
.hud__row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.hud__k{ font-family:var(--f-mono); font-size:.55rem; letter-spacing:.2em; color:var(--ink-faint); }
.hud__v{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.12em; color:var(--ink); }
.hud__meter{ position:relative; width:76px; height:2px; background:var(--line-2); overflow:hidden; }
.hud__meter i{ position:absolute; inset:0 auto 0 0; width:12%; background:linear-gradient(90deg,var(--n),var(--s)); transition:width .25s linear; }
.hud__row--pole{ margin-top:3px; padding-top:8px; border-top:1px solid var(--line); }
.hud__pole{ font-family:var(--f-mono); font-size:.5rem; letter-spacing:.14em; }
.hud__pole--n{ color:var(--n); } .hud__pole--s{ color:var(--s); }

/* ================================================================ HERO == */
.hero{ position:relative; z-index:2; min-height:100svh; display:flex; align-items:center; padding-block:140px 120px; }
.hero__inner{ width:100%; }
.hero__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(26px,4vw,46px); }

.hero__title{ position:relative; margin:0 0 clamp(30px,4.4vw,52px); }
/* iron filings sit on top of the letters until the magnet pulls them off */
.dust{
  position:absolute; pointer-events:none; z-index:3;
  transition:opacity .5s var(--e-out);
}
.hero__title .hero__word{
  filter:brightness(.82) saturate(.85) drop-shadow(0 2px 20px rgba(3,4,8,.78));
  transition:filter 1.1s var(--e-out);
}
.hero__title.is-clean .hero__word{ filter:drop-shadow(0 2px 20px rgba(3,4,8,.78)); }
/* No overflow clip here — .sp-line owns the reveal mask and carries the
   padding that keeps a 0.84 line-height from shearing the glyphs. */
.hero__line{ display:block; }
.hero__word{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:clamp(3.4rem, 15.5vw, 15rem); line-height:.84; letter-spacing:-.05em;
  /* NO text-shadow here: with background-clip:text the shadow paints on top
     of the clipped gradient and greys the letters out. Separation comes from
     drop-shadow on the filter chain below, which composites behind instead. */
}
.hero__word[data-pole="s"]{ margin-left:clamp(0px,5.5vw,90px); }
/* The gradient lives on the innermost text node. Splitting wraps the word in
   block-level masks, and background-clip:text does not survive that — so the
   fill is applied to the <i> the splitter creates (and to the bare element as
   the no-JS fallback). */
.hero__word[data-pole="n"]:not([data-split-done]),
.hero__word[data-pole="n"] .sp-word > i{
  background-image:linear-gradient(96deg,#FFFFFF 0%,#FFFFFF 58%,#6DEEFF 82%,var(--n) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.hero__word[data-pole="s"]:not([data-split-done]),
.hero__word[data-pole="s"] .sp-word > i{
  background-image:linear-gradient(96deg,var(--s) 0%,#FF9AC8 20%,#FFFFFF 40%,#FFFFFF 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

.hero__body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(26px,4vw,64px); align-items:end; }
.hero__claim{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.35rem,2.7vw,2.15rem); line-height:1.16; letter-spacing:-.025em; color:var(--ink);
  filter:drop-shadow(0 1px 14px rgba(3,4,8,.9));
}
.hero__claim em{
  font-style:normal;
  background:linear-gradient(96deg,var(--n),var(--s));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{
  color:#C2CADC; font-size:clamp(.94rem,1.1vw,1.04rem); max-width:52ch;
  text-shadow:0 0 26px rgba(3,4,8,.95), 0 1px 8px rgba(3,4,8,.85);
}
.hero__cta{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(10px,1.6vw,18px); }

.ticker{ position:absolute; left:0; right:0; bottom:56px; overflow:hidden; border-block:1px solid var(--line); padding-block:11px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.ticker__track{ display:flex; gap:44px; width:max-content; animation:tick 42s linear infinite; }
.ticker__track span{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); display:inline-flex; align-items:center; gap:44px; white-space:nowrap; text-shadow:0 0 14px rgba(3,4,8,.9); }
.ticker__track span::after{ content:''; width:4px; height:4px; border-radius:50%; background:var(--ink-faint); }
@keyframes tick{ to{ transform:translateX(-50%); } }

.cue{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:9px; }
.cue span{ font-family:var(--f-mono); font-size:.54rem; letter-spacing:.3em; color:var(--ink-dim); text-shadow:0 0 14px rgba(3,4,8,.9); }
.cue__line{ width:1px; height:34px; background:linear-gradient(var(--ink-faint),transparent); position:relative; overflow:hidden; }
.cue__line::after{ content:''; position:absolute; top:-100%; left:0; width:1px; height:100%; background:var(--n); animation:cueRun 2.1s var(--e-io) infinite; }
@keyframes cueRun{ to{ top:100%; } }

/* ============================================================== THESIS == */
.thesis{ position:relative; z-index:2; height:320vh; }
.thesis__pin{ position:sticky; top:0; height:100svh; display:flex; align-items:center; }
.thesis__stack{ position:relative; min-height:clamp(200px,26vw,340px); }
.thesis__line{
  position:absolute; inset:0;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.7rem,5.3vw,4.4rem); line-height:1.07; letter-spacing:-.035em;
  color:var(--ink-faint); max-width:19ch;
  opacity:0; transform:translateY(38px) scale(.985); filter:blur(6px);
  transition:opacity .85s var(--e-out),transform .85s var(--e-out),filter .85s var(--e-out),color .85s;
}
.thesis__line.is-on{
  opacity:1; transform:none; color:var(--ink);
  /* replaces the blur; drop-shadow (not text-shadow) so the gradient <b>
     inside keeps its colour instead of being greyed by the halo */
  filter:drop-shadow(0 2px 18px rgba(3,4,8,.92));
}
.thesis__line b{
  font-weight:600; color:var(--ink);
  background:linear-gradient(96deg,var(--n),var(--s));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.thesis__steps{ display:flex; gap:8px; margin-top:clamp(30px,4vw,54px); }
.thesis__steps i{ width:46px; height:2px; background:var(--line-2); transition:background .5s; }
.thesis__steps i.is-on{ background:linear-gradient(90deg,var(--n),var(--s)); box-shadow:0 0 10px var(--n-glow); }

/* ========================================================= DEPARTMENTS == */
.dept{ z-index:2; }
.dept__stage{ position:relative; }
#c-core{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.dept__cards{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:clamp(16px,2.4vw,34px);
  padding-block:clamp(30px,5vw,70px);
}
.dept__card{
  position:relative; padding:clamp(24px,2.7vw,38px);
  border:1px solid var(--line); border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  backdrop-filter:blur(16px) saturate(130%);
  transition:border-color .6s var(--e-out), transform .7s var(--e-out), background .6s;
  overflow:hidden; will-change:transform;
}
.dept__card::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .7s var(--e-out); pointer-events:none;
}
.dept__card--n::before{ background:radial-gradient(70% 60% at 12% 0%, rgba(18,226,255,.14), transparent 70%); }
.dept__card--s::before{ background:radial-gradient(70% 60% at 88% 0%, rgba(255,45,138,.14), transparent 70%); }
.dept__card::after{
  content:''; position:absolute; top:0; left:0; height:2px; width:0; transition:width .8s var(--e-out);
}
.dept__card--n::after{ background:linear-gradient(90deg,var(--n),transparent); }
.dept__card--s::after{ background:linear-gradient(270deg,var(--s),transparent); right:0; left:auto; }
.dept__card.is-hot{ border-color:var(--line-2); }
.dept__card.is-hot::before{ opacity:1; }
.dept__card.is-hot::after{ width:100%; }

.dept__head{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:clamp(22px,2.6vw,34px); }
.dept__num{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.24em; color:var(--ink-faint); }
.dept__pole{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.16em; }
.dept__card--n .dept__pole{ color:var(--n); } .dept__card--s .dept__pole{ color:var(--s); }
.dept__card h3{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.6rem,2.9vw,2.5rem); line-height:1; letter-spacing:-.03em; margin-bottom:14px;
}
.dept__card > p{ color:var(--ink-2); font-size:.98rem; max-width:44ch; }
.dept__card > p em{ font-style:normal; color:var(--ink); font-weight:500; }

.dept__list{ margin:clamp(24px,2.8vw,36px) 0 clamp(20px,2.4vw,30px); border-top:1px solid var(--line); }
.dept__list li{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--line);
  font-size:.92rem; color:var(--ink-2);
  transition:color .35s,padding-left .45s var(--e-out);
}
.dept__list li:hover{ color:var(--ink); padding-left:10px; }
.dept__list li i{ font-style:normal; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; color:var(--ink-faint); }

.dept__roles{ display:flex; flex-wrap:wrap; gap:8px; }
.dept__roles span{
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.4em .7em; border:1px solid var(--line); border-radius:100px; color:var(--ink-dim);
}

.dept__bridge{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding-block:20px; }
.dept__bridge-line{ width:1px; flex:1; min-height:40px; background:linear-gradient(var(--n),transparent); }
.dept__bridge-line:last-child{ background:linear-gradient(transparent,var(--s)); }
.dept__bridge-label{ font-family:var(--f-mono); font-size:.54rem; letter-spacing:.24em; color:var(--ink-faint); writing-mode:vertical-rl; }

.dept__note{
  display:flex; align-items:flex-start; gap:20px;
  margin-top:clamp(34px,4vw,58px); padding:clamp(22px,2.6vw,32px);
  border:1px solid var(--line); border-left:2px solid var(--sig); border-radius:3px;
  background:rgba(201,255,61,.022);
}
.dept__note-mark{ font-style:normal; font-size:1.4rem; color:var(--sig); line-height:1; }
.dept__note p{ color:var(--ink-2); font-size:1rem; max-width:78ch; }
.dept__note b{ color:var(--ink); font-weight:500; }

/* ============================================================ THE INDEX == */
.idx{ z-index:2; }
.idx__aura{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60vw 46vw at 50% 34%, rgba(201,255,61,.055), transparent 66%);
}
.idx__console{
  display:grid; grid-template-columns:1.12fr .88fr; gap:1px;
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  background:var(--line);
}
.idx__viz{ position:relative; background:#03040A; min-height:clamp(360px,52vh,620px); overflow:hidden; }
#c-index{ position:absolute; inset:0; width:100%; height:100%; }
.idx__scanline{
  position:absolute; left:0; right:0; height:140px; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(201,255,61,.055),transparent);
  animation:scan 5.5s var(--e-io) infinite;
}
@keyframes scan{ 0%{ top:-140px; } 100%{ top:100%; } }
.idx__corners i{ position:absolute; width:16px; height:16px; border:1px solid rgba(201,255,61,.4); }
.idx__corners i:nth-child(1){ top:16px; left:16px; border-right:0; border-bottom:0; }
.idx__corners i:nth-child(2){ top:16px; right:16px; border-left:0; border-bottom:0; }
.idx__corners i:nth-child(3){ bottom:16px; left:16px; border-right:0; border-top:0; }
.idx__corners i:nth-child(4){ bottom:16px; right:16px; border-left:0; border-top:0; }
.idx__hud{ position:absolute; inset:30px; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; }
.idx__hud-top,.idx__hud-bot{ display:flex; justify-content:space-between; gap:16px; }
.idx__hud .mono{ font-size:.56rem; color:var(--ink-faint); }
.idx__pulse{ color:var(--sig) !important; display:inline-flex; align-items:center; gap:.5em; }
.idx__pulse::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--sig); animation:pulse 1.6s infinite; }

.idx__panel{ background:var(--bg-2); padding:clamp(22px,2.6vw,34px); display:flex; flex-direction:column; gap:clamp(20px,2.4vw,28px); }
.idx__tabs{ display:flex; flex-wrap:wrap; gap:6px; }
.idx__tabs button{
  padding:.5em .85em; border:1px solid var(--line); border-radius:100px;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim); transition:.35s var(--e-out);
}
.idx__tabs button:hover{ color:var(--ink); border-color:var(--line-2); }
.idx__tabs button.is-on{ color:#04060C; background:var(--sig); border-color:var(--sig); }

.idx__readout{ display:grid; gap:16px; }
.idx__metric{ display:grid; gap:7px; }
.idx__metric-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.idx__metric-k{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
.idx__metric-v{ font-family:var(--f-display); font-size:1.02rem; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.idx__metric-bar{ height:2px; background:var(--line-2); overflow:hidden; }
.idx__metric-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--n),var(--sig)); transition:width 1.1s var(--e-out); }
.idx__note{ font-size:.9rem; color:var(--ink-2); border-left:1px solid var(--line-2); padding-left:14px; }
.idx__note b{ color:var(--ink); font-weight:500; }

.idx__layers{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden; margin-top:auto; }
.idx__layer{ background:var(--bg-2); padding:14px 16px; transition:background .4s; }
.idx__layer:hover{ background:var(--bg-3); }
.idx__layer-k{ display:block; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.2em; color:var(--sig); margin-bottom:5px; }
.idx__layer-v{ display:block; font-size:.84rem; color:var(--ink-dim); line-height:1.5; }

.idx__pipe{ margin-top:clamp(40px,5vw,72px); }
.idx__pipe-cap{ display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:26px; }
.idx__pipe-list{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.idx__pipe-list li{ background:var(--bg); padding:clamp(18px,1.9vw,26px); position:relative; transition:background .45s; }
.idx__pipe-list li::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:linear-gradient(90deg,var(--n),var(--sig)); transition:width .6s var(--e-out); }
.idx__pipe-list li:hover{ background:var(--bg-3); }
.idx__pipe-list li:hover::after{ width:100%; }
.idx__pipe-n{ display:block; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; color:var(--n); margin-bottom:12px; }
.idx__pipe-t{ display:block; font-family:var(--f-display); font-weight:500; font-size:1rem; letter-spacing:-.015em; margin-bottom:7px; }
.idx__pipe-d{ display:block; font-size:.82rem; color:var(--ink-dim); line-height:1.5; }

/* ============================================================== METHOD == */
.method{ position:relative; z-index:2; }
.method__pin{ height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.method__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(30px,4vw,54px); }
.method__head .h2{ flex:1; min-width:260px; }
.method__count{ color:var(--ink-faint); }
.method__count b{ color:var(--ink); font-weight:500; font-size:1.1rem; }
.method__track{ display:flex; gap:clamp(16px,2vw,26px); padding-inline:var(--pad); width:max-content; }
.method__card{
  width:clamp(280px,30vw,400px); padding:clamp(24px,2.6vw,34px);
  border:1px solid var(--line); border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));
  display:flex; flex-direction:column; gap:16px; min-height:clamp(300px,38vh,420px);
  transition:border-color .5s,background .5s;
}
.method__card:hover{ border-color:var(--line-2); }
.method__card-n{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; color:var(--ink-faint); }
.method__card-glyph{ width:56px; height:56px; color:var(--n); }
.method__card:nth-child(n+4) .method__card-glyph{ color:var(--s); }
.method__card h3{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.2rem,1.8vw,1.6rem); letter-spacing:-.025em; line-height:1.1; }
.method__card p{ color:var(--ink-2); font-size:.92rem; }
.method__card-out{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }
.method__card-out span{ display:block; font-family:var(--f-mono); font-size:.55rem; letter-spacing:.18em; color:var(--ink-faint); margin-bottom:5px; }
.method__card-out b{ font-weight:400; font-size:.86rem; color:var(--ink); }

/* =========================================================== VERTICALS == */
.verticals{ z-index:2; }
.vert__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.vert__card{
  position:relative; background:var(--bg); padding:clamp(26px,2.8vw,40px);
  display:flex; flex-direction:column; gap:16px; min-height:clamp(320px,36vw,420px);
  overflow:hidden; transform-style:preserve-3d; transition:background .55s var(--e-out);
}
.vert__card::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .6s var(--e-out); pointer-events:none;
  background:radial-gradient(90% 70% at 50% 110%, var(--vc,rgba(18,226,255,.16)), transparent 72%);
}
.vert__card:hover{ background:var(--bg-3); }
.vert__card:hover::before{ opacity:1; }
.vert__ix{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.2em; color:var(--ink-faint); }
.vert__glyph{ width:44px; height:44px; color:var(--vg,var(--n)); opacity:.9; }
.vert__card h3{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.3rem,2vw,1.75rem); letter-spacing:-.028em; line-height:1; }
.vert__hook{ font-size:.98rem; color:var(--ink); font-weight:400; }
.vert__body{ font-size:.88rem; color:var(--ink-dim); line-height:1.55; }
.vert__trigger{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.vert__trigger span{ font-family:var(--f-mono); font-size:.55rem; letter-spacing:.18em; color:var(--ink-faint); }
.vert__trigger b{ font-family:var(--f-mono); font-size:.62rem; font-weight:400; letter-spacing:.1em; color:var(--vg,var(--n)); text-transform:uppercase; }

/* ======================================================== CAPABILITIES == */
.caps{ z-index:2; }
.caps__marquee{ overflow:hidden; border-block:1px solid var(--line); padding-block:clamp(14px,1.8vw,24px); margin-bottom:clamp(56px,7vw,100px); }
.caps__track{ display:flex; gap:clamp(26px,3vw,52px); width:max-content; animation:tick 34s linear infinite; }
.caps__track em{
  font-style:normal; font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.6rem,4.4vw,3.6rem); letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1px var(--line-2); white-space:nowrap;
  display:inline-flex; align-items:center; gap:clamp(26px,3vw,52px);
}
.caps__track em::after{ content:''; width:7px; height:7px; border-radius:50%; background:var(--s); -webkit-text-stroke:0; flex:none; }
.caps__track em.is-solid{ color:var(--ink); -webkit-text-stroke:0; }

.caps__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.caps__cell{ background:var(--bg); padding:clamp(22px,2.4vw,32px); display:flex; flex-direction:column; gap:11px; min-height:190px; transition:background .45s; position:relative; }
.caps__cell:hover{ background:var(--bg-3); }
.caps__cell-n{ font-family:var(--f-mono); font-size:.55rem; letter-spacing:.2em; color:var(--ink-faint); }
.caps__cell h4{ font-family:var(--f-display); font-weight:500; font-size:1.08rem; letter-spacing:-.02em; }
.caps__cell p{ font-size:.85rem; color:var(--ink-dim); line-height:1.55; }
.caps__cell-tag{ margin-top:auto; font-family:var(--f-mono); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; }
.caps__cell[data-dept="n"] .caps__cell-tag{ color:var(--n); }
.caps__cell[data-dept="s"] .caps__cell-tag{ color:var(--s); }

/* ================================================================ WORK == */
.work{ z-index:2; }
.work__filters{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:clamp(26px,3vw,40px); }
.work__filters button{
  padding:.5em .9em; border:1px solid var(--line); border-radius:100px;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim); transition:.35s var(--e-out);
}
.work__filters button:hover{ color:var(--ink); border-color:var(--line-2); }
.work__filters button.is-on{ color:#04060C; background:var(--ink); border-color:var(--ink); }

.work__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.2vw,18px); }
.work__item{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:3px; background:var(--bg-2); transition:opacity .5s,transform .6s var(--e-out),border-color .5s; }
/* Ghosting read well with 10 placeholders; with 21 real pieces it just makes
   noise, so a filtered-out item leaves the flow and the grid closes up. */
.work__item.is-out{ display:none; }
.work__item:hover{ border-color:var(--line-2); }
.work__slot{ position:relative; width:100%; overflow:hidden; background:#070910; }
.work__slot::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(60% 55% at 28% 18%, rgba(18,226,255,.17), transparent 64%),
    radial-gradient(64% 58% at 76% 84%, rgba(255,45,138,.16), transparent 64%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 2px, transparent 2px 8px);
  transition:transform 1.1s var(--e-out), filter .7s;
}
.work__item:hover .work__slot::before{ transform:scale(1.07); filter:saturate(1.35) brightness(1.12); }
.work__slot::after{
  content:attr(data-fmt); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(234,238,248,.34); border:1px dashed rgba(234,238,248,.16); padding:.55em 1em; border-radius:2px;
  white-space:nowrap;
}
/* The format label is a placeholder for an empty slot. Generated ::after
   content paints after the element's children, so once real media is in the
   slot the label sits on top of the artwork and reads as a watermark. Drop it
   where there is media - .work__meta already prints the format under the
   card. ::before stays: it paints below the children, so the image covers it,
   and it still backs any slot that has no media yet. */
.work__slot:has(img, video)::after{ content:none; }

.work__item img,.work__item video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.work__meta{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border-top:1px solid var(--line); }
.work__meta b{ font-family:var(--f-display); font-weight:500; font-size:.92rem; letter-spacing:-.01em; }
.work__meta span{ font-family:var(--f-mono); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }

/* ============================================================= CLIENTS == */
.clients{ z-index:2; }
/* Full bleed: the wall sits outside .shell so the rows run edge to edge, the
   same treatment .caps__marquee gets. The rules live on the wall rather than
   on each row - two stacked rows each carrying border-block would butt their
   hairlines together and read as one thick line. */
.clients__wall{ display:grid; border-block:1px solid var(--line); }
.clients__row{ overflow:hidden; }
.clients__row + .clients__row{ border-top:1px solid var(--line); }

.clients__track{ display:flex; width:max-content; animation:tick 46s linear infinite; }
.clients__row.is-rev .clients__track{ animation-direction:reverse; }
.clients__lane{ display:flex; }
/* Pause the row under the pointer, not both - let someone read one line while
   the other keeps running. */
.clients__row:hover .clients__track{ animation-play-state:paused; }

/* Names run slower than logos: more to read, and the two speeds stop the rows
   looking like one mirrored strip. */
.clients__row--titles .clients__track{ animation-duration:58s; }
.clients__row--logos  .clients__track{ animation-duration:46s; }

.clients__tile{
  /* Flex, not grid: as a centred grid item an image gets no definite area to
     resolve percentage sizing against, so max-height:100% was ignored and the
     one portrait logo (Secret Confection, 201x251) overflowed its bay and was
     clipped by the row. A flex container with a definite height resolves it. */
  flex:none; display:flex; align-items:center; justify-content:center;
  text-decoration:none;
}
/* Names size to their own length. Logos get a deliberately tall bay: most of
   these marks are square and carry set text under the symbol, so a shallow
   strip shrinks the wordmark to an unreadable smudge. */
.clients__tile--word{ width:auto; height:clamp(58px,6.4vw,88px); padding-inline:clamp(16px,2.2vw,42px); }
/* Square bay: nine of these fourteen marks are square, so a wide bay
   height-constrains them and wastes the sides. Wide marks (Divinol, Classik,
   Lakshna) simply centre with room above and below. The margin separates the
   cards - these files carry their own backgrounds, so without it they butt
   into one continuous band. It applies per tile rather than as a lane gap so
   the seam between the two looping lanes spaces identically. */
.clients__tile--logo{
  width:clamp(104px,11.5vw,156px); height:clamp(104px,11.5vw,156px);
  padding:clamp(8px,1vw,14px);
  margin-inline:clamp(5px,.6vw,10px);
}

.clients__tile img{
  max-width:100%; max-height:100%; object-fit:contain;
  border-radius:var(--r);
}

/* Holds a client's place on the logo row until real art arrives. Reads as an
   empty bay waiting to be filled, not as a broken image. */
.clients__slot{
  display:grid; place-items:center;
  width:100%; height:72%;
  border:1px dashed var(--line-2); border-radius:var(--r);
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em;
  color:var(--ink-faint);
  transition:color .45s var(--e-out), border-color .45s var(--e-out);
}
.clients__tile:hover .clients__slot{ color:var(--ink-2); border-color:var(--line-2); }

.clients__word{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1rem,1.9vw,1.6rem); letter-spacing:-.015em;
  color:var(--ink-dim); white-space:nowrap;
  transition:color .45s var(--e-out);
}
.clients__tile:hover .clients__word{ color:var(--ink); }

/* ========================================================== COLLECTIVE == */
.coll{ z-index:2; }
.coll__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.coll__cell{ background:var(--bg); padding:clamp(24px,2.6vw,34px); display:flex; flex-direction:column; gap:14px; min-height:270px; transition:background .45s; }
.coll__cell:hover{ background:var(--bg-3); }
.coll__av{ position:relative; width:100%; aspect-ratio:1/1; max-width:92px; border-radius:50%; overflow:hidden; border:1px solid var(--line-2); display:grid; place-items:center; background:radial-gradient(circle at 34% 28%, rgba(18,226,255,.2), transparent 62%), radial-gradient(circle at 72% 78%, rgba(255,45,138,.2), transparent 62%), #080A12; }
.coll__av span{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; color:var(--ink-dim); }
.coll__av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.coll__cell h4{ font-family:var(--f-display); font-weight:600; font-size:1.14rem; letter-spacing:-.02em; }
.coll__cell p{ font-size:.86rem; color:var(--ink-dim); line-height:1.55; }
.coll__dept{ margin-top:auto; font-family:var(--f-mono); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; }
.coll__cell[data-dept="n"] .coll__dept{ color:var(--n); }
.coll__cell[data-dept="s"] .coll__dept{ color:var(--s); }
.coll__cell[data-dept="b"] .coll__dept{ color:var(--sig); }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-top:0; border-radius:0 0 4px 4px; overflow:hidden; }
.stats__cell{ background:var(--bg); padding:clamp(24px,2.6vw,34px); }
.stats__v{ font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,3.6vw,3.2rem); letter-spacing:-.04em; line-height:1; background:linear-gradient(100deg,var(--ink),var(--n)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stats__cell:nth-child(even) .stats__v{ background:linear-gradient(100deg,var(--ink),var(--s)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stats__k{ display:block; margin-top:10px; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }

/* ============================================================= CONTACT == */
.contact{ z-index:2; position:relative; }
.contact__aura{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(50vw 40vw at 18% 30%, rgba(18,226,255,.07), transparent 64%), radial-gradient(50vw 40vw at 84% 74%, rgba(255,45,138,.07), transparent 64%); }
.contact__inner{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,100px); align-items:start; }
.contact__meta{ display:grid; gap:14px; margin-top:clamp(32px,4vw,52px); }
.contact__meta > div{ display:grid; grid-template-columns:120px 1fr; gap:14px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.contact__meta .k{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); padding-top:3px; }
.contact__meta .v{ color:var(--ink-2); font-size:.94rem; }
.contact__meta a.v:hover{ color:var(--n); }

.contact__form{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.2vw,28px); padding-top:clamp(10px,2vw,26px); }
.field{ position:relative; display:grid; gap:7px; }
.field--full{ grid-column:1/-1; }
.field label{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }
.field input,.field select,.field textarea{
  width:100%; padding:11px 0 12px; font-size:1rem; color:var(--ink);
  border-bottom:1px solid var(--line); background:transparent; resize:none;
  transition:border-color .4s;
}
.field select{ appearance:none; cursor:pointer; }
.field select option{ background:var(--bg-2); color:var(--ink); }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-faint); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; }
.field__line{ position:absolute; left:0; bottom:0; height:1px; width:0; background:linear-gradient(90deg,var(--n),var(--s)); transition:width .55s var(--e-out); }
.field:focus-within .field__line{ width:100%; }
.field.is-bad input,.field.is-bad textarea{ border-bottom-color:var(--s); }
.contact__submit{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:6px; }
.contact__status{ color:var(--sig); font-size:.6rem; }
.contact__status.is-bad{ color:var(--s); }

/* ============================================================== FOOTER == */
.foot{ position:relative; z-index:2; padding-top:clamp(60px,7vw,110px); border-top:1px solid var(--line); background:linear-gradient(180deg,transparent,rgba(8,10,18,.8)); }
.foot__word{
  font-family:var(--f-display); font-weight:700; font-size:clamp(2.6rem,13.5vw,13rem);
  line-height:.82; letter-spacing:-.05em; text-align:center;
  color:transparent; -webkit-text-stroke:1px rgba(150,168,220,.18);
  margin-bottom:clamp(40px,5vw,72px); user-select:none;
}
.foot__rows{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:clamp(26px,3vw,44px); padding-bottom:clamp(38px,4vw,60px); }
.foot__cap{ display:block; font-family:var(--f-mono); font-size:.55rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; }
.foot__col p,.foot__col a{ display:block; font-size:.9rem; color:var(--ink-dim); line-height:1.72; transition:color .35s; }
.foot__col a:hover{ color:var(--ink); }
.foot__poles{ font-size:.62rem; line-height:2.1; color:var(--ink-dim); }
.foot__poles i{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:8px; }
.foot__poles .pn{ background:var(--n); } .foot__poles .ps{ background:var(--s); }
.foot__base{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-block:24px; border-top:1px solid var(--line); }
.foot__base .mono{ font-size:.56rem; color:var(--ink-faint); }

/* ========================================================== RESPONSIVE == */
@media (max-width:1180px){
  .idx__pipe-list{ grid-template-columns:repeat(3,1fr); }
  .rail{ display:none; }
}
@media (max-width:1024px){
  .nav__links{ display:none; }
  .burger{ display:flex; }
  .pwr{ display:none; }
  .menu__inner{ grid-template-columns:1fr; }
  .idx__console{ grid-template-columns:1fr; }
  .contact__inner{ grid-template-columns:1fr; }
  .hero__body{ grid-template-columns:1fr; align-items:start; }
  .dept__cards{ grid-template-columns:1fr; }
  .dept__bridge{ flex-direction:row; padding:6px 0; }
  .dept__bridge-line{ width:auto; height:1px; flex:1; min-height:0; background:linear-gradient(90deg,var(--n),transparent); }
  .dept__bridge-line:last-child{ background:linear-gradient(90deg,transparent,var(--s)); }
  .dept__bridge-label{ writing-mode:horizontal-tb; }
}
/* short viewports: the hero must never collide with its own copy */
@media (max-height:760px) and (min-width:1025px){
  .hero__word{ font-size:clamp(3rem, 10.5vw, 8.5rem); }
  .hero{ padding-block:120px 100px; }
  .ticker{ display:none; }
}
@media (max-height:600px){
  .hero__word{ font-size:clamp(2.6rem, 8.5vw, 6rem); }
  .cue{ display:none; }
}

@media (max-width:720px){
  body{ font-size:15px; }
  .hud{ display:none; }
  .nav .btn--pole{ display:none; }
  .idx__pipe-list{ grid-template-columns:1fr; }
  .contact__form{ grid-template-columns:1fr; }
  .ticker{ bottom:40px; }
  /* the cue would land inside the ticker at this height, and touch users don't
     need to be told to scroll */
  .cue{ display:none; }
  .thesis{ height:280vh; }
  /* 12-col spans collapse to a simple two-up on phones. No full-width first
     item: a 9:16 tile spanning both columns becomes a ~1000px-tall monster. */
  .work__grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .work__item{ grid-column:span 1 !important; }
  .foot__base{ flex-direction:column; gap:8px; }
}

/* =============================================== MOTION / FALLBACK ====== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .sp-word > i{ transform:none; opacity:1; }
  .thesis{ height:auto; } .thesis__pin{ position:static; height:auto; padding-block:var(--sec-y); }
  .thesis__stack{ min-height:0; display:grid; gap:28px; }
  .thesis__line{ position:static; opacity:1; transform:none; filter:none; color:var(--ink-2); }
  .method__pin{ height:auto; padding-block:var(--sec-y); }
  .method__track{ flex-wrap:wrap; width:auto; }
  /* Without this the global snap parks the marquee at its -50% end state. */
  .clients__track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
  .clients__lane{ flex-wrap:wrap; justify-content:center; }
  .clients__lane[aria-hidden]{ display:none; }
}
/* ------------------------------------------------------------- A11Y ----- */
/* The site hides the native cursor, so keyboard users get almost no feedback
   without this. Signal lime is reserved for data elsewhere, but here it is the
   one hue guaranteed to read against every surface in the palette. */
:focus-visible{
  outline:2px solid var(--sig);
  outline-offset:3px;
  border-radius:2px;
}
:focus:not(:focus-visible){ outline:none; }
.btn:focus-visible,
.nav__links a:focus-visible,
.rail button:focus-visible,
.work__filters button:focus-visible,
.idx__tabs button:focus-visible{ outline-offset:4px; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{ outline-offset:2px; }

/* skip link — first focusable element, invisible until tabbed to */
.skip{
  position:fixed; top:10px; left:10px; z-index:10000;
  padding:.85em 1.3em; border:1px solid var(--sig); border-radius:2px;
  background:var(--bg); color:var(--sig);
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  transform:translateY(-160%); transition:transform .3s var(--e-out);
}
.skip:focus-visible{ transform:none; outline-offset:2px; }

/* a keyboard user needs a pointer back when tabbing through form controls */
@media (hover:hover) and (pointer:fine){
  body:has(:focus-visible){ cursor:auto; }
}

/* ------------------------------------------------- LATTICE CLUSTER LABELS (3D→DOM) == */
.lat-labels{ position:absolute; inset:0; pointer-events:none; transition:opacity .5s; }
.lat-label{
  position:absolute; top:0; left:0; display:inline-flex; align-items:center; gap:.55em;
  padding:.4em .7em; border:1px solid var(--line); border-radius:100px;
  background:rgba(4,6,12,.62); backdrop-filter:blur(8px);
  font-family:var(--f-mono); font-size:.52rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); white-space:nowrap; opacity:0;
  transition:opacity .45s var(--e-out), border-color .35s, color .35s, background .35s;
  will-change:transform, opacity;
}
.lat-label i{ width:6px; height:6px; border-radius:50%; background:var(--c,var(--n)); box-shadow:0 0 10px var(--c,var(--n)); }
.lat-label:hover{ color:var(--ink); border-color:var(--line-2); background:rgba(4,6,12,.85); }
@media (max-width:720px){ .lat-labels{ display:none; } }

html.no-js .reveal{ opacity:1; transform:none; }
html.no-js .boot{ display:none; }
body.no-webgl .stage__glow{ opacity:1; }
body.field-off #c-field,body.field-off #c-core,body.field-off #c-index{ opacity:0 !important; }