/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --canvas:#171F4B;
  --canvas-deep:#131940;
  --panel:#1F2A5E;
  --panel-hi:#27336D;
  --line:#3B4889;
  /* section fills: one shared translucent navy base, plus a soft pool of
     blue light on one side and violet on the other. The pools sit at mid
     height and fade out well before the top and bottom edges, so where two
     sections meet both are just the same base and no seam shows. --sec-deep
     and --sec-panel swap the sides so stacked sections alternate. */
  --glow-blue:rgba(47,128,255,.24);
  --glow-violet:rgba(150,60,245,.22);
  --sec-base:rgba(21,28,70,.46);
  --sec:
    radial-gradient(48% 36% at 6% 50%,var(--glow-blue),transparent 72%),
    radial-gradient(44% 34% at 96% 50%,var(--glow-violet),transparent 72%),
    var(--sec-base);
  --sec-deep:
    radial-gradient(48% 36% at 94% 50%,var(--glow-violet),transparent 72%),
    radial-gradient(44% 34% at 4% 50%,var(--glow-blue),transparent 72%),
    var(--sec-base);
  --sec-panel:
    radial-gradient(56% 36% at 50% 50%,rgba(95,79,245,.2),transparent 74%),
    radial-gradient(40% 32% at 98% 50%,var(--glow-blue),transparent 72%),
    var(--sec-base);
  --border-strong:#516A99;   /* interactive borders, 3.4:1 and up */
  --text-primary:#E9EEF6;
  --text-secondary:#A6B6D0;
  --text-muted:#96A7C6;

  --light-text:#12161D;      /* the ink that lands on the film's white out */

  --accent:#47B0FB;          /* logo Sky,    8.37 on ink, carries small text */
  --accent-2:#B946FA;        /* logo Orchid, 5.02 on ink, carries small text */
  --accent-hover:#7AC6FC;    /* Sky lifted,  10.67 on ink */
  --accent-muted:rgba(71,176,251,.22);

  /* the mark is a ramp, not a colour. This one stays between Sky and Orchid so
     it never drops under 5:1 no matter where a letter falls on it. */
  --ramp-text:linear-gradient(104deg,#47B0FB 0%,#7C8FFB 48%,#B946FA 100%);
  /* the true ramp, hue 213 to 276, for strokes and fills that carry no text */
  --ramp:linear-gradient(112deg,#0F70F9 0%,#5F4FF5 50%,#A32FEF 100%);
  /* the same ramp read left to right, for anything wide and short */
  --ramp-x:linear-gradient(90deg,#0F70F9 0%,#5F4FF5 50%,#A32FEF 100%);

  /* the rest of the mark. These are fills, glows and ramps: none of them is
     light enough to sit behind small text, so none of them ever does. */
  --logo-azure:#0F70F9;
  --logo-indigo:#1826DA;
  --logo-violet:#741CED;
  --logo-deep:#10058D;

  --display:'Archivo',system-ui,sans-serif;          /* interface: nav, buttons, labels, body copy */
  --serif:'Cormorant Garamond',Georgia,serif;        /* the voice: headlines, truths, pull quotes */
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --radius:15px;
  --rail-pad:clamp(46px,4.6vw,66px);   /* the method line's offset, shared by the rail and its nodes */                                     /* every box on the site */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,.01,.2,1);

  --tshadow:0 1px 2px rgba(3,5,10,.95),0 3px 12px rgba(3,5,10,.8),0 10px 44px rgba(3,5,10,.82);
  --gut:clamp(20px,5vw,80px);
  --maxw:1320px;
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
/* no CSS scroll-behavior:smooth - ScrollTrigger jumps the page to measure
   pin positions on every refresh, and smooth scrolling turns those jumps into
   animations it then measures mid-flight, parking the triangle pin in the
   wrong place. In-page #links glide via JS instead (see Layout.jsx). */
body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--display);
  font-size:clamp(15.5px,.99vw,17px);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  opacity:0;
  transition:opacity .9s var(--ease);
}
body.lit{opacity:1}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.012em}
p{margin:0}

::selection{background:var(--accent-muted);color:#fff}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#0C1029;padding:12px 20px;border-radius:var(--radius);
  font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:12px;top:12px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* section furniture --------------------------------------- */
.kicker{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
  display:flex;align-items:baseline;gap:14px;
}
.kicker .num{color:var(--text-muted)}
.krule{
  flex:1;max-width:180px;width:100%;height:2px;min-height:2px;
  align-self:center;display:block;overflow:visible;
  /* the fade that used to be a css gradient, kept as a mask so the line itself
     can be a real stroke that DrawSVG can draw */
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 52%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0%,#000 52%,transparent 100%);
}
.krule line{stroke:url(#rampH);stroke-width:1.2;opacity:.85}
.light-sec .krule line,.turn-sec .krule line{stroke:var(--accent)}

.h-sec{
  font-size:clamp(2.5rem,6.2vw,5rem);
  font-weight:400;
  line-height:1.0;
  letter-spacing:-.016em;
}
.lede{
  font-size:clamp(1.05rem,1.45vw,1.28rem);
  color:var(--text-secondary);
  font-weight:300;
  max-width:54ch;
}

.star{width:16px;height:16px;fill:url(#rampH);opacity:.95}
.divider{display:flex;align-items:center;gap:18px;margin:0}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* buttons -------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-size:.86rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;text-decoration:none;
  padding:16px 30px;border-radius:var(--radius);
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
  text-shadow:none;
}
.btn-primary{
  background:var(--ramp-text);background-size:190% 100%;background-position:0% 0;
  color:#0C1029;box-shadow:0 0 0 rgba(71,176,251,0);
  transition:background-position .6s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.btn-primary:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 14px 40px rgba(71,176,251,.26)}
/* A one pixel ring of the mark's ramp with a genuinely transparent middle.
   The usual trick of stacking a padding-box fill over a border-box gradient
   needs an opaque middle, and these buttons sit on the ink, on a panel, on the
   closing band and over the film's white out. A masked ring does not care what
   is behind it. */
.ramp-ring{position:relative;border:0;background:transparent}
.ramp-ring::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--ramp-x);opacity:.82;pointer-events:none;
  transition:opacity .45s var(--ease);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.ramp-ring:hover::before{opacity:1}

.btn-ghost{color:var(--text-primary)}
.btn-ghost:hover{color:var(--text-primary);transform:translateY(-2px);background:rgba(71,176,251,.07)}
.btn .arw{transition:transform .45s var(--ease);flex:0 0 auto}
.btn-t{flex:0 1 auto;text-align:center}
.btn:hover .arw{transform:translateX(4px)}
@media (pointer:coarse){
  .btn{min-height:48px}
  .nav-cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav-logo{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:560px){
  .btn{font-size:.78rem;letter-spacing:.07em;padding:15px 20px;width:100%}
  .static-hero .row,.settle-row{flex-direction:column;align-items:stretch;width:100%}
}

/* ============================================================
   3. THE ENVIRONMENT LAYER (one place, behind everything)
   ============================================================ */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env-glow{
  position:absolute;inset:-25%;
  background:
    radial-gradient(40% 32% at 14% 16%,rgba(15,112,249,.5),transparent 68%),
    radial-gradient(36% 30% at 88% 26%,rgba(116,28,237,.46),transparent 70%),
    radial-gradient(46% 36% at 78% 82%,rgba(163,47,239,.42),transparent 72%),
    radial-gradient(42% 34% at 8% 86%,rgba(15,112,249,.42),transparent 70%),
    radial-gradient(62% 48% at 50% 50%,rgba(95,79,245,.34),transparent 76%);
  animation:envdrift 96s var(--ease-soft) -24s infinite alternate;
}
/* a second, slower cloud layer drifting the other way, so the field never
   reads as a static gradient */
.env-neb{
  position:absolute;inset:-30%;
  background:
    radial-gradient(30% 24% at 32% 62%,rgba(71,176,251,.2),transparent 66%),
    radial-gradient(26% 22% at 66% 12%,rgba(185,70,250,.2),transparent 68%);
  animation:nebdrift 140s linear -40s infinite alternate;
}
@keyframes nebdrift{
  0%{transform:translate3d(3%,2%,0) scale(1.06) rotate(0deg)}
  100%{transform:translate3d(-3%,-2%,0) scale(1.14) rotate(4deg)}
}
@keyframes envdrift{
  0%{transform:translate3d(-2%,-1.5%,0) scale(1.02)}
  100%{transform:translate3d(2.5%,2%,0) scale(1.09)}
}
.env-grain{
  position:absolute;inset:0;opacity:.055;mix-blend-mode:screen;
  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");
}
/* a sixth background layer: two slow neon curves tracing across the
   whole site, fixed with everything else in .env so they read as part
   of the room's atmosphere rather than any one section's decoration */
.env-curves{position:absolute;inset:0}
.env-curves svg{width:100%;height:100%;display:block}
.env-curves .curve{
  fill:none;stroke:url(#rampH);stroke-width:2.2;stroke-linecap:round;
  filter:blur(2px) drop-shadow(0 0 16px rgba(95,79,245,.55));
  opacity:.16;
  animation:curveglow 26s var(--ease-soft) infinite;
}
.env-curves .c2{stroke-width:1.6;animation-delay:-13s;animation-duration:32s}
@keyframes curveglow{
  0%,100%{opacity:.12;transform:translate3d(0,0,0) scale(1)}
  50%{opacity:.34;transform:translate3d(0,-1.4%,0) scale(1.012)}
}
@media (max-width:720px){.env-curves{display:none}}
.env-dust{position:absolute;inset:0}
.env-dust i{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:var(--accent);opacity:.16;
  animation:dust 74s linear infinite;
}
@keyframes dust{
  0%{transform:translate3d(0,8vh,0)}
  100%{transform:translate3d(3vw,-108vh,0)}
}

/* ============================================================
   4. NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  padding:16px var(--gut);
  transition:opacity .5s var(--ease);
}
.nav::before{
  content:"";position:absolute;top:0;left:0;right:0;bottom:-80px;pointer-events:none;
  opacity:0;transition:opacity .6s var(--ease);
  /* a plain navy fade, no backdrop-filter: the blur rendered as a grey band
     with a hard bottom edge on some GPUs. Solid enough at the top to keep
     the links readable over imagery, then an even ramp to nothing. */
  background:linear-gradient(180deg,
    rgba(19,25,64,.94) 0%,
    rgba(19,25,64,.86) 34%,
    rgba(19,25,64,.52) 60%,
    rgba(19,25,64,.18) 82%,
    rgba(19,25,64,0) 100%);
}
.nav > *{position:relative;z-index:1}
/* The film opens clean. The bar is driven by hero.js and only ever hides on the
   home page, where there is a film to keep clear; every other page shows it at
   once. Transform and opacity only, so it stays on the compositor, and it comes
   straight back on keyboard focus so it is never unreachable. */
body.nav-hidden .nav{
  transform:translateY(-108%);
  opacity:0;
  pointer-events:none;
}
body.nav-hidden .nav:focus-within{
  transform:none;
  opacity:1;
  pointer-events:auto;
}
.nav{
  transform:translateY(0);opacity:1;
  transition:transform .7s var(--ease),opacity .5s var(--ease);
}

.nav.solid::before{opacity:1}
body.nav-hidden .nav::before{opacity:0}
.nav-logo{display:block;flex:0 0 auto;order:1}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2vw,30px);order:2;margin-inline:auto}
.nav-links a{
  position:relative;font-family:var(--display);font-size:.72rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;text-decoration:none;
  color:var(--text-secondary);padding:6px 0;
  transition:color .4s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ramp-x);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav-links a:hover,.nav-links a.here{color:var(--accent);text-shadow:0 0 14px rgba(71,176,251,.45)}
.nav-links a:hover::after,.nav-links a.here::after{transform:scaleX(1);transform-origin:left}
.nav-cta{order:3}
.burger{order:4}
.nav-logo img{width:clamp(126px,12vw,168px);height:auto}
.nav-cta{
  font-family:var(--display);font-size:.74rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  padding:11px 20px;border-radius:var(--radius);
  color:var(--text-primary);
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
}
.nav-cta:hover{color:var(--text-primary);background:rgba(71,176,251,.09)}
@media (max-width:900px){
  .nav{padding:12px var(--gut)}
}
@media (max-width:460px){
  .nav-cta{padding:10px 14px;font-size:.66rem;letter-spacing:.08em}
}

/* ============================================================
   5. THE HERO
   ============================================================ */
.hero{position:relative;height:420vh;z-index:1}
.stage{
  position:sticky;top:0;height:100svh;min-height:100vh;
  overflow:hidden;background:#04060A;
}
.stage video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.1s var(--ease);
  will-change:transform;
  transform:translateZ(0);
}
.stage.video-ready video{opacity:1}
.poster{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:opacity 1.1s var(--ease);
}
.stage.video-ready .poster{opacity:0}

/* layer 1: the global base scrim, always on */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 92% at 50% 44%,rgba(4,6,12,0) 32%,rgba(4,6,12,.62) 100%);
}
/* the ink wash that carries the final light band's dark type */
.scrim-light{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 96% 78% at 50% 50%,rgba(240,236,227,.62) 0%,rgba(240,236,227,.34) 52%,rgba(240,236,227,0) 80%);
}

/* the loading ring */
.ring-wrap{
  position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);z-index:2;
  color:var(--accent);opacity:.75;
  transition:opacity .6s var(--ease);
}
.stage.video-ready .ring-wrap,.stage.video-failed .ring-wrap{opacity:0;pointer-events:none}
.ring{width:38px;height:38px;transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset .18s linear}

/* The film is grounded into the page: its last stretch fades to the page's own
   colour, so the join to the section below has nothing left to show. The film is
   object-fit:cover, so it crops differently at every window width and the pixel
   at that join is never the same colour twice. Matching it could not hold. This
   ends on --canvas-deep at every size, and the section below starts there.
   It sits clear of the settle text, which has 22vh of room under it at worst. */
.stage::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:20vh;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(19,25,64,0) 0%,
    rgba(19,25,64,.18) 28%,
    rgba(19,25,64,.52) 54%,
    rgba(19,25,64,.84) 78%,
    rgba(19,25,64,.97) 92%,
    var(--canvas-deep) 100%);
}

/* the scroll cue */
.cue{
  position:absolute;left:50%;bottom:6.2vh;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-secondary);
  opacity:0;transition:opacity .7s var(--ease);
  text-shadow:var(--tshadow);pointer-events:none;
}
.stage.video-ready .cue,.stage.video-failed .cue{opacity:.8}
.stage.scrolled .cue{opacity:0}
.cue svg{width:12px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.4;animation:cuedrop 2.8s var(--ease-soft) -.6s infinite}
@keyframes cuedrop{0%,100%{transform:translateY(-3px);opacity:.45}50%{transform:translateY(3px);opacity:1}}

/* ---- caption bands ---- */
.bands{position:absolute;inset:0}
.band{
  position:absolute;inset:0;
  display:flex;align-items:center;
  padding-inline:var(--gut);
  opacity:0;
  text-shadow:var(--tshadow);
  pointer-events:none;
}
.band::before{
  content:"";position:absolute;inset:-6%;pointer-events:none;
  opacity:calc(.24 + .76*var(--k,1));
  background:radial-gradient(ellipse 62% 66% at 27% 52%,rgba(4,5,11,.68) 0%,rgba(4,5,11,.46) 44%,rgba(4,5,11,0) 76%);
}
.band-inner{position:relative;width:min(46ch,52%);padding-block:2vh}
.band .line{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.95rem,4.1vw,3.35rem);
  line-height:1.16;
  letter-spacing:-.016em;
  margin:0;
}
.band .sub{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.1rem,1.75vw,1.5rem);
  color:#C3D0DF;
  margin-top:1.1em;
}
.band .btn{text-shadow:none}

/* band 6, the settle in the light */
.band-settle{justify-content:center;text-align:center}
.band-settle::before{
  background:radial-gradient(ellipse 72% 60% at 50% 46%,rgba(246,243,236,.5) 0%,rgba(246,243,236,.22) 50%,rgba(246,243,236,0) 78%);
}
.band-settle .band-inner{width:min(74ch,94%);text-shadow:none}
.band-settle *{text-shadow:none}
.band-settle .eyebrow{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:#3C4654;
}
.band-settle .line{
  color:var(--light-text);
  font-size:clamp(2.4rem,6vw,4.6rem);
  font-weight:400;
  margin-top:.5em;
}
.band-settle .sub{color:#3E4754;font-style:normal;font-size:clamp(1rem,1.4vw,1.2rem);max-width:44ch;margin-inline:auto}
/* the positioning statement is a full sentence, not a short punch line -
   the settle band's line size (built for "So has everyone.") is too big
   for it, so it gets its own more moderate scale and wider measure */
.band-settle .line.pos-line{font-size:clamp(1.8rem,4vw,3.1rem);max-width:48ch;margin-inline:auto}
.settle-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:2.2em;pointer-events:auto}
.band-settle .btn-primary{background:var(--light-text);color:#F2EFE8}
.band-settle .btn-primary:hover{background:#2A3444;box-shadow:0 14px 40px rgba(18,22,29,.3)}
.band-settle .btn-ghost{color:var(--light-text)}
.band-settle .btn-ghost::before{opacity:1}
.band-settle .btn-ghost:hover{color:var(--light-text);background:rgba(18,22,29,.06)}

/* ---- text splitting + entrances ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vis{display:block}
.w{display:inline-block;white-space:nowrap}
.w .sp{display:inline-block;width:.28em}
.c{display:inline-block;will-change:transform,opacity}

/* (a) blur to sharp, band 1 */
.e-blur .soft{position:absolute;inset:0;filter:blur(13px);opacity:calc(1 - var(--k,0))}
.e-blur .sharp{opacity:var(--k,0)}
.e-blur .band-inner{position:relative}
.e-blur .stack{position:relative}

/* (b) approach from depth, band 2 */
.e-depth .vis{transform:scale(calc(.84 + .16*var(--k,0)));opacity:var(--k,0);transform-origin:left center}

/* (c) scatter assemble, band 3 */
.e-scatter .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}

/* (d) halves parting, band 4 */
.e-halves .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)));
}

/* (e) word by word rise, bands 5 and 6 */
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*26px));
}
.e-rise .sub{--ks:clamp(0,(var(--k,0) - .6)*3.4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*16px))}
.e-rise .eyebrow{--ke:clamp(0,var(--k,0)*4,1);opacity:var(--ke)}
.e-rise .settle-row{--kb:clamp(0,(var(--k,0) - .76)*4.6,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}

/* ---- the static hero (phones, reduced motion) ---- */
.static-hero{
  display:none;
  position:relative;min-height:100svh;
  flex-direction:column;justify-content:flex-end;
  padding:120px var(--gut) clamp(52px,10vh,90px);
  background-image:linear-gradient(180deg,rgba(4,6,11,.72) 0%,rgba(4,6,11,.18) 34%,rgba(19,25,64,.86) 86%,var(--canvas-deep) 100%),url('still-door.jpg');
  background-size:cover;background-position:52% center;
  text-shadow:var(--tshadow);
}
.static-hero .eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--accent);
}
.static-hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,8.6vw,3.2rem);line-height:1.14;letter-spacing:-.018em;
  margin-top:.5em;max-width:18ch;
}
.static-hero h1.pos-line{max-width:23ch}
.static-hero .sub{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:#C3D0DF;font-size:clamp(1.02rem,4vw,1.24rem);
  margin-top:1.1em;max-width:34ch;
}
.static-hero .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:2em}
.static-hero .btn{text-shadow:none}

/* ============================================================
   6. SECTION 01 - RECOGNITION (the turn, coming down out of the light)
   ============================================================ */
/* .turn-sec and the "Where we work" studio section share one continuous
   glow that lives on the wrapping .truth-glow-wrap (see below), so the
   violet doesn't fade toward each section's own edge and collide into a
   hard seam where the two sections meet. */
.truth-glow-wrap{
  position:relative;
  background:
    radial-gradient(70% 44% at 50% 50%,rgba(116,28,237,.85) 0%,transparent 64%),
    radial-gradient(50% 34% at 10% 62%,var(--glow-blue),transparent 70%),
    var(--sec-base);
}
.turn-sec{
  position:relative;z-index:1;
  color:var(--text-primary);
  /* the top padding always clears the descent band below */
  padding-block:clamp(110px,17vh,210px) clamp(90px,14vh,170px);
}

.turn-sec .wrap{position:relative;z-index:1}
.rec-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(34px,6vw,90px);align-items:start;margin-top:clamp(34px,5vh,60px);
}
.rec-head{font-size:clamp(2.2rem,5vw,3.9rem);letter-spacing:-.03em;font-stretch:104%;position:sticky;top:120px}
.rec-head em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--accent)}
.rec-body p{
  font-size:clamp(1.06rem,1.4vw,1.22rem);
  color:var(--text-secondary);font-weight:300;max-width:56ch;
}
.rec-body p + p{margin-top:1.35em}
.rec-body .rec-q{
  font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.4vw,1.85rem);
  color:var(--text-primary);letter-spacing:-.008em;line-height:1.26;
  margin-top:1.8em;padding-left:22px;border-left:2px solid var(--accent-muted);
}
.rec-body .rec-pull{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.35rem,2.5vw,1.95rem);line-height:1.34;
  color:var(--text-primary);margin-top:1.5em;max-width:30ch;
}
.triplet{display:grid;gap:0;margin-top:clamp(48px,8vh,92px);border-top:1px solid var(--line)}
.triplet div{
  padding:clamp(18px,3vh,30px) 0;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.5rem,4vw,2.5rem);letter-spacing:-.012em;
  color:var(--text-primary);
  display:flex;align-items:baseline;gap:clamp(14px,3vw,34px);
}
.triplet .ix{
  flex:0 0 auto;width:clamp(38px,4.4vw,48px);height:clamp(38px,4.4vw,48px);
  display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--border-strong);
  background:rgba(15,112,249,.07);
  transition:border-color .55s var(--ease),background .55s var(--ease),box-shadow .55s var(--ease);
}
.triplet div:hover .ix{
  border-color:var(--accent);background:rgba(71,176,251,.12);
  box-shadow:0 0 0 4px rgba(71,176,251,.07),0 0 18px rgba(71,176,251,.22);
}
.triplet .ix svg{width:47%;height:47%;stroke:var(--accent);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.rec-close{
  margin-top:clamp(38px,6vh,70px);
  font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.34rem);
  color:var(--text-secondary);max-width:46ch;font-weight:400;
}
.rec-close strong{color:var(--text-primary);font-weight:400}
@media (max-width:860px){
  .rec-grid{grid-template-columns:1fr}
  .rec-head{position:static}
}

/* ============================================================
   7. SECTION 02 - HUMAN TRUTH -> STORY -> BRAND -> IMPACT
   A pinned, scroll-scrubbed sequence (see
   src/components/HumanTruthJourney.jsx) rather than the old click-to-open
   Triangle panel. GSAP drives every opacity/scale/drawSVG value directly
   as inline styles; this stylesheet only sets the static look (colour,
   stroke, font, filters) each element has once GSAP reveals it, plus the
   .htj-static fallback for reduced motion / no GSAP.
   ============================================================ */
/* clip, not hidden: overflow:hidden would stop .htj-stage from sticking */
.htj{position:relative;z-index:2;overflow:clip}
.htj-head{position:relative;padding-block:clamp(72px,10vh,120px) 0}
.htj-head .h-sec{max-width:14ch}

/* The stage sticks with CSS instead of a GSAP pin. A JS pin swaps to
   position:fixed on the main thread, a frame or more after the browser has
   already scrolled, so a fast fling back up showed the finished triangle
   parked at the bottom of an empty spacer. Sticky is handled by the browser
   during the scroll itself and never lags. The track is one screen for the
   stage plus the scroll distance the timeline is scrubbed over. */
.htj-pin{position:relative;height:calc(100svh + 440vh)}
.htj-stage{
  position:sticky;top:0;height:100svh;min-height:640px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-block:clamp(24px,4vh,48px);
}
.htj-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 48% at 50% 44%,rgba(71,176,251,.08),transparent 70%);
}
.htj-svg{position:relative;width:min(620px,84vw);height:auto;overflow:visible}

/* ---- edges: a soft blurred glow line under a crisp gradient core ----
   opacity:0 here matches the gsap.set() the component runs on mount, so
   there is nothing for React to flash before that effect fires */
.htj-edge{fill:none;opacity:0}
.htj-ln-glow{stroke-width:7;fill:none;opacity:.35;filter:blur(4px)}
.htj-ln-core{
  stroke-width:1.6;fill:none;
  filter:drop-shadow(0 0 6px rgba(71,176,251,.6)) drop-shadow(0 0 14px rgba(163,47,239,.35));
}
.htj-spark{fill:var(--accent);filter:drop-shadow(0 0 7px var(--accent));opacity:0}

/* ---- vertices ---- */
.htj-point{opacity:0}
/* Human Truth shows from the start, matching the component's gsap.set */
#htj-p1{opacity:1}
.htj-vx{fill:var(--accent)}
.htj-vx-halo{opacity:.85}
.htj-vlabel{
  font-family:var(--display);font-size:13.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;fill:var(--text-primary);
}

/* ---- the floor beneath the sphere ---- */
.htj-floor{opacity:.15}

/* ---- impact: just the word, sitting in a soft field of blue light -
   no glass/sphere shading, per client feedback ---- */
.htj-sphere-halo,.htj-sphere-text{opacity:0}
.htj-sphere-text{
  font-family:var(--display);font-size:19px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;fill:var(--text-primary);
  filter:drop-shadow(0 0 12px rgba(71,176,251,.85));
}

/* ---- the copy that swaps per step, always in the same spot ---- */
.htj-copy{
  position:relative;margin-top:clamp(22px,4vh,40px);
  width:min(520px,90vw);min-height:7.4em;text-align:center;
}
.htj-copy-block{position:absolute;inset:0;opacity:0}
.htj-copy-block[data-step="truth"]{opacity:1}
.htj-copy-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;
  color:var(--accent);margin-bottom:.7em;
}
.htj-copy-title{
  font-family:var(--display);font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;color:var(--text-primary);
}
.htj-copy-body{
  margin-top:.55em;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.5;color:var(--text-secondary);
  max-width:36ch;margin-inline:auto;
}

@media (max-width:720px){
  .htj-pin{height:calc(100svh + 280vh)}
  .htj-stage{min-height:560px}
  .htj-svg{width:min(440px,92vw)}
  .htj-vlabel{font-size:11.5px}
}

/* ---- reduced motion (or GSAP unavailable): no pin, everything shown
   at once, exactly as .htj would look at the end of the sequence ---- */
.htj-static .htj-pin{height:auto}
.htj-static .htj-stage{position:relative;height:auto;min-height:0;padding-block:clamp(40px,6vh,64px)}
.htj-static #htj-tri-group{transform:scale(.82);transform-origin:280px 261px}
.htj-static .htj-edge,
.htj-static .htj-point,
.htj-static .htj-vlabel,
.htj-static .htj-sphere-halo,
.htj-static .htj-sphere-text,
.htj-static .htj-floor{opacity:1 !important;visibility:visible !important;transform:none}
.htj-static .htj-spark{display:none}
.htj-static .htj-copy{
  margin-top:clamp(28px,5vh,48px);min-height:0;
  display:grid;gap:clamp(20px,3vh,32px);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  width:min(880px,92vw);text-align:left;
}
.htj-static .htj-copy-block{
  position:static;opacity:1 !important;visibility:visible !important;transform:none !important;
}
.htj-static .htj-copy-body{margin-inline:0}

/* ============================================================
   8. SECTION 03 - THE METHOD
   ============================================================ */
.method{position:relative;z-index:2;background:var(--sec-panel);padding-block:clamp(96px,15vh,180px)}
.method-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.steps{position:relative;margin-top:clamp(46px,7vh,86px);border-top:1px solid var(--line);padding-left:var(--rail-pad)}
.rail{position:absolute;left:0;top:0;width:20px;height:100%;overflow:visible}
.rail-bg{stroke:var(--line);stroke-width:1;fill:none}
.rail-line{stroke:url(#rampV);stroke-width:1.5;fill:none}
.rail-spark{fill:var(--accent);opacity:0;filter:drop-shadow(0 0 6px var(--accent))}
.step{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);
  gap:clamp(16px,3vw,48px);align-items:start;
  padding-block:clamp(26px,4vh,42px);
  border-bottom:1px solid var(--line);
  position:relative;
}
.step::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease);
}
.step:hover::after{transform:scaleX(1)}
/* the number rides the line rather than sitting in a column beside it */
.step .n{
  position:absolute;left:calc(-1 * var(--rail-pad) + 10px);top:clamp(24px,3.4vh,40px);
  transform:translate(-50%,-50%);
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;
  color:var(--text-muted);background:var(--panel);
  border:1px solid var(--line);padding-top:0;
  transition:color .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease);
}
.step.active .n{
  color:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(71,176,251,.08),0 0 16px rgba(71,176,251,.3);
}
.step h3{
  font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.4rem);font-weight:500;
  letter-spacing:-.012em;color:var(--text-primary);
}
.step h3 span{display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.2em;color:var(--text-muted);margin-top:.9em;text-transform:uppercase}
.step p{color:var(--text-secondary);font-weight:300;font-size:clamp(1rem,1.25vw,1.12rem);max-width:52ch}
@media (max-width:820px){
  .method-head{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:10px}
}
.method-foot{
  margin-top:clamp(34px,5vh,60px);display:flex;align-items:flex-start;gap:16px;
  max-width:60ch;
}
.method-foot .star{margin-top:.42em;flex:0 0 auto}
.method-foot p{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--text-secondary);font-size:clamp(1.05rem,1.5vw,1.26rem)}

/* ============================================================
   9. SECTION 04 - THE WORK
   ============================================================ */
.work{position:relative;z-index:2;background:var(--sec);padding-block:clamp(96px,15vh,180px);overflow:hidden}
.work-head .h-sec{max-width:16ch;margin-top:.5em}
.work-head .lede{margin-top:1.2em}

.story{
  margin-top:clamp(48px,8vh,96px);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.story-media{position:relative;border:1px solid var(--line);background:#000;overflow:hidden;border-radius:var(--radius)}
.story-media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform 1.4s var(--ease),opacity .6s var(--ease)}
.story-media:hover img{transform:scale(1.035)}
.story-media video{width:100%;aspect-ratio:16/9;background:#000}
.play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:14px;flex-direction:column;
  background:linear-gradient(180deg,rgba(4,6,11,.28),rgba(4,6,11,.62));
  transition:background .6s var(--ease);
}
.play:hover{background:linear-gradient(180deg,rgba(4,6,11,.18),rgba(4,6,11,.5))}
.play .disc{
  width:66px;height:66px;border-radius:50%;
  border:1px solid rgba(233,238,246,.45);
  display:grid;place-items:center;
  backdrop-filter:blur(6px);background:rgba(8,12,20,.32);
  transition:border-color .5s var(--ease),transform .5s var(--ease),background .5s var(--ease);
}
.play:hover .disc{border-color:var(--accent);transform:scale(1.07);background:rgba(71,176,251,.14)}
.play .disc svg{width:17px;height:17px;fill:var(--text-primary);margin-left:3px}
.play .lbl{
  font-family:var(--display);font-size:.76rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-primary);
  text-shadow:var(--tshadow);
}
.story-rows{display:grid;gap:0;border-top:1px solid var(--line)}
.story-row{
  display:grid;grid-template-columns:minmax(120px,.42fr) minmax(0,1fr);
  gap:clamp(12px,2vw,30px);padding-block:clamp(16px,2.6vh,26px);
  border-bottom:1px solid var(--line);align-items:baseline;
}
.story-row dt{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
.story-row dd{margin:0;color:var(--text-primary);font-weight:300;font-size:clamp(1.02rem,1.3vw,1.16rem)}
.story-row.rw-truth dd{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.75vw,1.45rem);line-height:1.34}
@media (max-width:880px){
  .story{grid-template-columns:1fr}
  .story-row{grid-template-columns:1fr;gap:6px}
}

.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(36px,6vh,64px)}
.slot{
  border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,34px);
  background:linear-gradient(160deg,rgba(17,24,35,.7),rgba(12,17,26,.3));
  min-height:200px;display:flex;flex-direction:column;justify-content:space-between;gap:26px;
  transition:border-color .6s var(--ease),transform .6s var(--ease);
  opacity:0;transform:translateY(24px);
}
.in .slot{opacity:1;transform:none;transition:opacity .85s var(--ease),transform .85s var(--ease),border-color .6s var(--ease)}
.in .slot:nth-child(1){transition-delay:.06s}
.in .slot:nth-child(2){transition-delay:.18s}
.slot:hover{border-color:var(--border-strong)}
.slot .tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:9px}
.slot .tag i{width:5px;height:5px;border-radius:50%;background:var(--accent-2);font-style:normal;animation:pulse 4.2s var(--ease-soft) -2s infinite}
.slot p{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--text-secondary);font-size:clamp(1.05rem,1.5vw,1.24rem);line-height:1.4}

/* ============================================================
   10. SECTION 05 - THE LIBRARY
   ============================================================ */
.library{
  position:relative;z-index:2;padding-block:clamp(96px,15vh,180px);
  background:
    linear-gradient(180deg,var(--canvas) 0%,rgba(17,23,54,.86) 22%,rgba(17,23,54,.9) 78%,var(--canvas) 100%),
    url('still-fog.jpg');
  background-size:cover;background-position:center;background-attachment:scroll;
  /* start and end at the same .46 opacity as the translucent --sec-base
     neighbours (.page-hero.shot above, .cta-band below), so the .env glow
     shows through both sides of each join and no seam appears */
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.46) 0%,#000 clamp(48px,7vh,84px),#000 calc(100% - clamp(72px,11vh,140px)),rgba(0,0,0,.46) 100%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.46) 0%,#000 clamp(48px,7vh,84px),#000 calc(100% - clamp(72px,11vh,140px)),rgba(0,0,0,.46) 100%);
}
.lib-head{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between}
.lib-grid{
  margin-top:clamp(44px,7vh,80px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.2vw,22px);
}
/* .truth reuses SpotlightCard (.aud-card/.aud-glow/.aud-ring) - the same
   pointer-glow card used in "Who it's for" - instead of the old fused
   hairline table, so each truth reads as its own card. */
.truth{
  display:flex;flex-direction:column;gap:22px;
  min-height:190px;
}
.truth:target{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent-muted),0 0 44px -18px rgba(71,176,251,.55);
}
.truth .ix{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}
.truth p{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.14rem,1.65vw,1.38rem);line-height:1.42;color:var(--text-primary);
}
@media (max-width:1040px){.lib-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.lib-grid{grid-template-columns:1fr}}

/* ============================================================
   11. SECTION 06 - THE QUESTIONS
   ============================================================ */
.qs{position:relative;z-index:2;background:var(--sec-panel);padding-block:clamp(96px,15vh,180px)}
.qs-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(30px,5vw,80px);margin-top:clamp(34px,5vh,58px)}
.qs-aside{position:sticky;top:120px;align-self:start}
.qs-aside .h-sec{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.qs-aside p{margin-top:1.2em;color:var(--text-secondary);font-weight:300;max-width:34ch}
.q{border-bottom:1px solid var(--line)}
.q:first-child{border-top:1px solid var(--line)}
.q-btn{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:clamp(20px,2.8vh,28px) 0;text-align:left;
  font-family:var(--serif);font-weight:500;font-size:clamp(1.2rem,1.95vw,1.5rem);
  letter-spacing:-.008em;line-height:1.3;color:var(--text-primary);
  transition:color .4s var(--ease);
}
.q-btn:hover{color:var(--accent)}
.q-ic{flex:0 0 auto;width:16px;height:16px;margin-top:.32em;position:relative}
.q-ic::before,.q-ic::after{
  content:"";position:absolute;background:var(--accent);
  transition:transform .5s var(--ease),opacity .4s var(--ease);
}
.q-ic::before{left:0;right:0;top:7.5px;height:1.4px}
.q-ic::after{top:0;bottom:0;left:7.5px;width:1.4px}
.q-btn[aria-expanded="true"] .q-ic::after{transform:scaleY(0);opacity:0}
.q-ans{overflow:hidden;height:0;transition:height .55s var(--ease)}
.q-ans p{
  padding-bottom:clamp(22px,3vh,32px);max-width:62ch;
  color:var(--text-secondary);font-weight:300;font-size:clamp(1rem,1.25vw,1.12rem);
}
@media (max-width:860px){
  .qs-grid{grid-template-columns:1fr}
  .qs-aside{position:static}
}

/* ============================================================
   12. SECTION 07 - DISCOVERY
   ============================================================ */
.discover{
  position:relative;z-index:2;padding-block:clamp(96px,15vh,180px);
  background:var(--sec);
}
/* the photo and its tint sit on their own layer, faded out at the top and
   bottom, so the section meets its neighbours on the shared fill instead of
   on an opaque tinted photo that ended on a hard line */
#homeConsult::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(19,25,64,.88) 0%,rgba(19,25,64,.9) 50%,rgba(19,25,64,.93) 100%),
    url('still-crown.jpg') center 42%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 72%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 72%,transparent 100%);
}
.discover > .wrap{position:relative;z-index:1}
.disc-head{text-align:center;max-width:min(760px,94%);margin-inline:auto}
.disc-head .kicker{justify-content:center}
.disc-head .krule{display:none}
.disc-head .h-sec{margin-top:.55em;font-size:clamp(2rem,4.6vw,3.5rem);max-width:17ch;margin-inline:auto}
.disc-head .sub{
  margin-top:1em;max-width:26ch;margin-inline:auto;font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--text-secondary);font-size:clamp(1.1rem,1.7vw,1.4rem);
}
.form{
  margin:clamp(42px,7vh,78px) auto 0;max-width:780px;
  border:1px solid var(--line);border-radius:var(--radius);background:rgba(8,12,19,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:clamp(26px,4vw,52px);
}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px)}
.field{display:flex;flex-direction:column;gap:9px}
.field.full{grid-column:1 / -1}
.field label{
  font-family:var(--display);font-size:12.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);
  display:flex;gap:11px;align-items:center;
}
.field label .n{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:24px;height:24px;border-radius:50%;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:0;
  color:var(--text-muted);background:var(--panel-hi);
  border:1px solid var(--line);
  transition:color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.field:focus-within label .n{
  color:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(71,176,251,.08),0 0 14px rgba(71,176,251,.3);
}
.field input,.field textarea{
  font-family:var(--display);font-size:1rem;font-weight:400;
  color:var(--text-primary);background:transparent;
  border:0;border-bottom:1px solid var(--border-strong);
  padding:11px 2px;border-radius:var(--radius) var(--radius) 0 0;
  transition:border-color .45s var(--ease),background .45s var(--ease);
}
.field textarea{resize:vertical;min-height:62px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:#6E7D91;font-style:italic}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent);background:rgba(71,176,251,.04)}
.form-foot{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;margin-top:clamp(28px,4vh,42px)}
.form-note{font-family:var(--display);font-size:14px;font-weight:400;line-height:1.65;letter-spacing:.01em;color:var(--text-muted);max-width:38ch}
.form-done{
  display:none;text-align:center;padding:clamp(20px,4vh,40px) 0;
}
.form.sent .fields,.form.sent .form-foot{display:none}
.form.sent .form-done{display:block}
.form-done .star{margin:0 auto 20px;width:22px;height:22px}
.form-done h3{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:500}
.form-done p{margin-top:1em;color:var(--text-secondary);font-weight:300;max-width:42ch;margin-inline:auto}
@media (max-width:640px){.fields{grid-template-columns:1fr}}

/* ============================================================
   13. SECTION 08 - THE STUDIO
   ============================================================ */
.studio{position:relative;z-index:2;background:var(--sec);padding-block:clamp(96px,15vh,180px)}
.studio-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(34px,6vw,90px);margin-top:clamp(34px,5vh,58px);align-items:end}
.studio-grid .h-sec{max-width:14ch}
.studio-body{margin-top:1.5em;display:grid;gap:1.3em}
.studio-body p{color:var(--text-secondary);font-weight:300;font-size:clamp(1.04rem,1.35vw,1.18rem);max-width:52ch}
.studio-body .em{font-family:var(--serif);font-style:italic;color:var(--text-primary);font-size:clamp(1.15rem,1.8vw,1.44rem);line-height:1.38;max-width:38ch}
.studio-note{color:var(--text-secondary);font-weight:300;font-size:clamp(1rem,1.25vw,1.1rem);max-width:40ch}

/* the service list reads as film end credits: department on the left,
   what it covers on the right. A card grid here would turn the page into
   the agency menu the brief rules out. */
.credits{margin-top:clamp(52px,8vh,100px);border-top:1px solid var(--line)}
.dept{
  display:grid;grid-template-columns:minmax(150px,.32fr) minmax(0,1fr);
  gap:clamp(18px,3.4vw,56px);align-items:baseline;
  padding-block:clamp(22px,3.2vh,36px);
  border-bottom:1px solid var(--line);
}
.dept h3{
  font-family:var(--display);font-size:clamp(.74rem,.95vw,.86rem);font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--text-muted);
  text-align:right;line-height:1.5;
  transition:color .5s var(--ease);
}
.dept:hover h3{color:var(--accent)}
.dept ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 .72em}
.dept li{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.04rem,1.4vw,1.24rem);line-height:1.5;color:var(--text-primary);
}
/* the dot trails the item it follows, so a wrapped line never opens with one */
.dept li:not(:last-child)::after{content:"\00B7";color:var(--accent);opacity:.6;margin-left:.72em}
.plat{
  margin-top:.9em;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text-secondary);line-height:2;
}
.credits-close{
  margin-top:clamp(34px,5vh,60px);
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.12rem,1.7vw,1.4rem);color:var(--text-primary);max-width:44ch;
}
@media (max-width:760px){
  .dept{grid-template-columns:1fr;gap:12px}
  .dept h3{text-align:left}
}
.markets{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:clamp(28px,4vh,42px)}
.markets span{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);
}
.markets span b{color:var(--text-secondary);font-weight:500}
@media (max-width:860px){.studio-grid{grid-template-columns:1fr}}

/* ============================================================
   14. CLOSING SCENE
   ============================================================ */
.closing{
  position:relative;z-index:2;background:var(--sec-deep);
  min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(80px,14vh,160px) var(--gut);gap:0;
}
.closing::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(48% 42% at 50% 54%,rgba(71,176,251,.065),transparent 72%);
  animation:closeglow 22s var(--ease-soft) -6s infinite alternate;
}
@keyframes closeglow{0%{opacity:.5}100%{opacity:1}}
.closing .c1,.closing .c2{
  position:relative;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,3.7vw,2.7rem);line-height:1.26;letter-spacing:-.018em;
  max-width:19ch;opacity:0;transform:translateY(20px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
}
.closing .c1{color:var(--text-secondary)}
.closing .c2{color:var(--text-primary);font-style:italic;margin-top:.7em}
.in .closing .c1,.closing.in .c1{opacity:1;transform:none}
.closing.in .c2{opacity:1;transform:none;transition-delay:.55s}
.close-rule{
  position:relative;width:1px;height:clamp(56px,9vh,104px);margin:clamp(34px,5vh,56px) 0;
  background:linear-gradient(180deg,transparent,var(--accent-muted),transparent);
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.1s var(--ease) .7s;
}
.closing.in .close-rule{transform:scaleY(1)}
.close-logo{position:relative;opacity:0;transform:translateY(16px);transition:opacity 1.1s var(--ease) .9s,transform 1.1s var(--ease) .9s}
.closing.in .close-logo{opacity:1;transform:none}
.close-logo img{width:clamp(230px,34vw,420px);height:auto;margin-inline:auto}
.close-cta{position:relative;margin-top:clamp(36px,5.5vh,64px);opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) 1.2s,transform .9s var(--ease) 1.2s}
.closing.in .close-cta{opacity:1;transform:none}

/* ============================================================
   15. FOOTER
   ============================================================ */
.foot{
  position:relative;z-index:2;overflow:hidden;
  background:var(--sec-deep);padding-block:clamp(72px,11vh,130px) clamp(28px,4vh,40px);
}
/* a thin ramp hairline where the page hands over to the footer */
.foot::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1100px,86%);height:1px;background:var(--ramp-x);opacity:.5;
}
.foot .wrap{position:relative}

/* closing line + the one call to action */
.foot-close{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(24px,4vw,48px);
  padding-bottom:clamp(48px,7vh,80px);border-bottom:1px solid var(--line);
}
.foot-close-line{
  margin:0;max-width:18ch;
  font-family:var(--serif);font-weight:400;line-height:1.08;
  font-size:clamp(2.1rem,4.6vw,3.9rem);color:var(--text-primary);
}
.foot-close-line em{
  font-style:italic;
  background:var(--ramp-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.foot-close .btn{flex:0 0 auto}

/* brand block + link columns */
.foot-grid{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,1.3fr);
  gap:clamp(36px,5vw,80px);padding-block:clamp(48px,7vh,80px);
}
.foot-logo{display:inline-block}
.foot-logo img{display:block;width:clamp(150px,14vw,190px);height:auto}
.foot-brand p{
  margin:1.4em 0 0;max-width:34ch;color:var(--text-secondary);
  font-size:.98rem;line-height:1.65;
}
.foot-mail{
  display:inline-flex;align-items:center;gap:.5em;margin-top:1.6em;
  font-family:var(--display);font-size:1.02rem;font-weight:500;
  color:var(--text-primary);text-decoration:none;
  padding-bottom:.3em;border-bottom:1px solid var(--border-strong);
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.foot-mail:hover{color:var(--accent);border-color:var(--accent)}
.foot-mail span{transition:transform .4s var(--ease)}
.foot-mail:hover span{transform:translate(2px,-2px)}

.foot-col h4{
  margin:0 0 1.5em;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.85em}
/* flowing columns rather than a grid, so a label that wraps to two lines
   doesn't open a gap in the row beside it */
.foot-col--services ul{display:block;columns:2;column-gap:clamp(20px,3vw,40px)}
.foot-col--services li{break-inside:avoid;margin-bottom:.85em}
.foot-col a{
  position:relative;color:var(--text-secondary);text-decoration:none;font-size:.95rem;
  transition:color .4s var(--ease);
}
.foot-col a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.foot-col a:hover{color:var(--text-primary)}
.foot-col a:hover::after{transform:scaleX(1)}
.foot-col a[aria-current="page"]{color:var(--accent)}

/* oversized, barely-there wordmark - texture, not content */
.foot-mark{
  margin:0 0 clamp(-10px,-1vw,-4px);text-align:center;user-select:none;pointer-events:none;
  font-family:var(--display);font-weight:600;line-height:.8;letter-spacing:-.02em;
  font-size:clamp(3.4rem,14.5vw,12rem);white-space:nowrap;
  background:linear-gradient(180deg,rgba(124,143,251,.16) 0%,rgba(124,143,251,0) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.foot-in{
  display:flex;flex-wrap:wrap;gap:10px 32px;align-items:center;justify-content:space-between;
  padding-top:clamp(20px,3vh,28px);border-top:1px solid var(--line);
}
.foot-in span{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);
}

@media (max-width:960px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:560px){
  .foot-close{align-items:flex-start}
  .foot-close .btn{width:100%;justify-content:center}
  .foot-grid{grid-template-columns:1fr;gap:40px}
  .foot-col--services ul{columns:1}
  .foot-in{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (pointer:coarse){.foot-col a,.foot-mail{display:inline-flex;align-items:center;min-height:44px}}

/* ============================================================
   16. SHORT SCREENS
   ============================================================ */
@media (max-height:560px){
  .cue,.ring-wrap{display:none}
}

/* ============================================================
   17. THE FIVE STATIC HERO GATES
   ============================================================ */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:flex}
}

/* ============================================================
   18. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0ms !important;
  }
  body{opacity:1}
  .triplet div,.step,.slot,.truth,.closing .c1,.closing .c2,.close-logo,.close-cta{opacity:1;transform:none}
  .close-rule{transform:scaleY(1)}
  .krule line,.rail-line{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
  .rail-spark{display:none}
  .env-glow,.env-dust,.env-curves{display:none}
}
/* live flip: the same final states, applied by JS */
body.rm .triplet div,body.rm .step,body.rm .slot,body.rm .truth,
body.rm .closing .c1,body.rm .closing .c2,body.rm .close-logo,body.rm .close-cta{opacity:1;transform:none}
body.rm .close-rule{transform:scaleY(1)}
body.rm .krule line,body.rm .rail-line{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
body.rm .rail-spark{display:none}
body.rm .env-glow,body.rm .env-dust,body.rm .env-curves{display:none}

/* pause everything while the tab is hidden or a section is off screen */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ============================================================
   19. MULTI PAGE COMPONENTS
   ============================================================ */

/* ---- the page hero every page except home opens on ---- */
.page-hero{
  position:relative;z-index:2;
  padding-block:clamp(140px,22vh,230px) clamp(56px,9vh,110px);
  overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 52% at 26% 34%,rgba(39,52,74,.42),transparent 72%);
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .h-sec{max-width:15ch;margin-top:.42em}
.page-hero .lede{margin-top:1.4em}
.page-hero.shot::before{content:none}
.page-hero.shot{
  background-size:cover;background-position:center 42%;
  /* the hero ends in opaque --canvas while the sections below are the
     translucent --sec-base over the fixed .env glow; fading the bottom
     padding down to that same .46 opacity lets the glow through and
     removes the seam */
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - clamp(56px,9vh,110px)),rgba(0,0,0,.46) 100%);
          mask-image:linear-gradient(180deg,#000 calc(100% - clamp(56px,9vh,110px)),rgba(0,0,0,.46) 100%);
}
.page-hero.shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,23,54,.82) 0%,rgba(17,23,54,.74) 46%,var(--canvas) 82%,var(--canvas) 100%);
}
.page-hero.shot .wrap{z-index:2}
.page-hero--soft.shot::after{
  background:linear-gradient(180deg,rgba(17,23,54,.8) 0%,rgba(17,23,54,.7) 46%,var(--canvas) 84%,var(--canvas) 100%);
}
.page-hero--compact{
  padding-block:clamp(110px,15vh,160px) clamp(40px,6vh,70px);
}
.page-hero-img{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  aspect-ratio:1086/1448;max-width:100%;
  background:center/cover no-repeat;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 72%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 72%,transparent 100%);
}
.page-hero--tall{
  padding-block:clamp(140px,16vh,180px) clamp(90px,14vh,160px);
  min-height:82vh;
  display:flex;align-items:center;
}

/* ---- the services index ---- */
.svc-list{margin-top:clamp(44px,7vh,86px);border-top:1px solid var(--line)}
.svc-row{
  display:grid;grid-template-columns:auto minmax(0,.86fr) minmax(0,1.3fr) auto;
  gap:clamp(16px,3vw,48px);align-items:baseline;
  padding-block:clamp(26px,4vh,44px);
  border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;position:relative;
  transition:padding-left .55s var(--ease);
}
.svc-row:hover{padding-left:clamp(8px,1.4vw,18px)}
.svc-row::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease);
}
.svc-row:hover::after{transform:scaleX(1)}
.svc-row .n{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--text-muted);transition:color .5s var(--ease)}
.svc-row:hover .n{color:var(--accent)}
.svc-row h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.5rem,3.2vw,2.5rem);letter-spacing:-.012em;line-height:1.06;
  color:var(--text-primary);
}
.svc-row p{color:var(--text-secondary);max-width:46ch;font-size:clamp(.98rem,1.2vw,1.06rem)}
.svc-row .go{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);white-space:nowrap;transition:color .5s var(--ease),transform .5s var(--ease);
}
.svc-row:hover .go{color:var(--accent);transform:translateX(4px)}
@media (max-width:900px){
  .svc-row{grid-template-columns:auto 1fr;gap:10px 18px}
  .svc-row p{grid-column:2}
  .svc-row .go{grid-column:2}
}

/* ---- the services index, as a grid of cards ---- */
.svc-grid{
  margin-top:clamp(44px,7vh,86px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,28px);
}
.svc-gcard{
  display:flex;flex-direction:column;
  border-radius:var(--radius);border:1px solid var(--line);
  background:var(--panel);overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 24px 54px -30px rgba(3,5,10,.85);
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.svc-gcard:hover{
  border-color:var(--border-strong);transform:translateY(-4px);
  box-shadow:0 30px 64px -24px rgba(71,176,251,.35);
}
.svc-gcard-media{width:100%;height:clamp(160px,20vw,220px);overflow:hidden}
.svc-gcard-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.svc-gcard:hover .svc-gcard-media img{transform:scale(1.05)}
.svc-gcard-body{padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;flex:1}
.svc-gcard-n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent)}
.svc-gcard-body h2{
  margin-top:.6em;font-family:var(--serif);font-weight:500;
  font-size:clamp(1.15rem,1.8vw,1.45rem);letter-spacing:-.01em;line-height:1.14;
  color:var(--text-primary);
}
.svc-gcard-body p{margin-top:.6em;color:var(--text-secondary);font-size:.94rem;flex:1}
.svc-gcard-go{
  margin-top:1.2em;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);transition:color .4s var(--ease),transform .4s var(--ease);
}
.svc-gcard:hover .svc-gcard-go{color:var(--accent);transform:translateX(4px)}
@media (max-width:960px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .svc-grid{grid-template-columns:1fr}
}

/* ---- a service page, "what it covers" as spotlight cards ----
   .cover reuses SpotlightCard (see .aud-card/.aud-glow/.aud-ring), the
   same pointer-tracked glow used in the "Who it's for" grid, plus the
   existing scroll-triggered fade+rise stagger in sectionMotion.js which
   already targets the .cover class. */
.covers{
  margin-top:clamp(44px,7vh,86px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(16px,2.2vw,22px);
}
.cover .n{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--accent)}
.cover h3{
  margin-top:.7em;font-family:var(--serif);font-weight:500;
  font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.01em;line-height:1.14;color:var(--text-primary);
}
.cover p{margin-top:.6em;color:var(--text-secondary);font-size:.96rem}

.tie{
  position:relative;margin-top:clamp(56px,9vh,110px);
  padding:clamp(30px,4.6vw,60px);
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(150deg,rgba(17,24,35,.72),rgba(12,17,26,.28));
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:start;
}
.tie .star{margin-top:.5em;width:18px;height:18px;flex:0 0 auto}
.tie p{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.28rem,2.2vw,1.75rem);line-height:1.34;color:var(--text-primary);max-width:44ch;
}
@media (max-width:620px){.tie{grid-template-columns:1fr}}

.deliver{margin-top:clamp(48px,7vh,90px)}
.deliver-grid{
  margin-top:clamp(20px,3vh,34px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
.deliver-grid div{
  background:var(--panel);padding:clamp(20px,2.6vw,32px);
  display:flex;align-items:flex-start;gap:14px;
  font-size:clamp(.99rem,1.2vw,1.08rem);color:var(--text-primary);
  transition:background .5s var(--ease);
}
.deliver-grid div:hover{background:var(--panel-hi)}
.deliver-grid .b{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:0 0 auto;margin-top:.62em}

/* ---- the closing call to action every page ends on ---- */
.cta-band{
  position:relative;z-index:2;background:var(--sec-deep);
  padding-block:clamp(84px,13vh,160px);text-align:center;overflow:hidden;
}
.cta-band::before,.cta-band::after{content:none}
/* the text sits above the light */
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.08;letter-spacing:-.014em;
  max-width:20ch;margin-inline:auto;
}
.cta-band p{margin:1.3em auto 0;color:var(--text-secondary);max-width:44ch}
.cta-band .row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(30px,4.6vh,52px)}
@media (max-width:560px){.cta-band .row{flex-direction:column;align-items:stretch}}

/* ---- the consultation page ---- */
.consult-steps{margin-top:clamp(44px,7vh,86px);border-top:1px solid var(--line)}
.cstep{
  display:grid;grid-template-columns:auto minmax(0,.7fr) minmax(0,1.5fr);
  gap:clamp(16px,3vw,48px);align-items:baseline;
  padding-block:clamp(22px,3.2vh,36px);border-bottom:1px solid var(--line);
}
.cstep .n{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--accent);padding-top:.4em}
.cstep h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,2.3vw,1.8rem);letter-spacing:-.01em;color:var(--text-primary)}
.cstep p{color:var(--text-secondary);max-width:54ch;font-size:clamp(.99rem,1.22vw,1.1rem)}
@media (max-width:820px){.cstep{grid-template-columns:auto 1fr;gap:10px 18px}.cstep p{grid-column:2}}

/* ---- about page ---- */
.about-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(34px,6vw,90px);align-items:start;margin-top:clamp(40px,6vh,72px);
}
.about-grid .side{position:sticky;top:120px}
.about-grid h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:400;letter-spacing:-.014em}
.about-body p{color:var(--text-secondary);font-size:clamp(1.02rem,1.3vw,1.14rem);max-width:56ch}
.about-body p + p{margin-top:1.4em}
.about-body .em{
  font-family:var(--serif);font-style:italic;font-weight:400;color:var(--text-primary);
  font-size:clamp(1.35rem,2.4vw,1.95rem);line-height:1.32;max-width:34ch;
}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}.about-grid .side{position:static}}

/* ---- about page: founder ----
   Editorial split: a serif statement lifted from the bio leads, the bio
   follows, and the name closes like a signature. The portrait sits
   frameless and fades into the canvas at its foot. */
.founder{position:relative;z-index:2;background:var(--sec);padding-block:clamp(40px,8vh,110px) clamp(96px,15vh,180px)}
.founder-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(40px,7vw,120px);align-items:center;margin-top:clamp(40px,6vh,72px);
}
.founder-statement{
  font-family:var(--serif);font-weight:400;color:var(--text-primary);
  font-size:clamp(2.1rem,4.4vw,3.7rem);line-height:1.08;letter-spacing:-.018em;max-width:15ch;
}
.founder-statement em{font-style:italic;color:var(--accent);padding-bottom:.06em}
.founder-body{margin-top:clamp(30px,5vh,52px);display:grid;gap:1.25em;max-width:52ch}
.founder-body p{color:var(--text-secondary);font-weight:300;font-size:clamp(1.02rem,1.3vw,1.14rem);line-height:1.7}
.founder-sign{
  margin-top:clamp(36px,6vh,60px);padding-top:clamp(20px,3vh,28px);
  border-top:1px solid var(--line);max-width:52ch;
}
.founder-name{font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:500;color:var(--text-primary)}
.founder-role{
  margin-top:.7em;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);
}
.founder-photo{
  margin:0;position:relative;aspect-ratio:4/5;max-height:82vh;width:100%;
  border-radius:var(--radius);overflow:hidden;background:var(--canvas-deep);
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
}
.founder-photo img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  filter:saturate(.86) contrast(1.04);
}
/* entrance: the portrait unmasks upward while the copy settles in */
.founder-photo{clip-path:inset(100% 0 0 0 round var(--radius));transition:clip-path 1.3s var(--ease-soft)}
.founder-photo img{transform:scale(1.08);transition:transform 1.8s var(--ease)}
.founder-copy > *{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.founder.in .founder-photo{clip-path:inset(0 0 0 0 round var(--radius))}
.founder.in .founder-photo img{transform:none}
.founder.in .founder-copy > *{opacity:1;transform:none}
.founder.in .founder-copy > :nth-child(2){transition-delay:.15s}
.founder.in .founder-copy > :nth-child(3){transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .founder-photo,.founder-photo img,.founder-copy > *{clip-path:none;transform:none;opacity:1;transition:none}
}
@media (max-width:860px){
  .founder-grid{grid-template-columns:1fr}
  .founder-photo{order:-1;max-width:460px;max-height:none}
}

/* ---- breadcrumb on a service page ---- */
.crumb{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-muted);display:flex;gap:10px;align-items:center;
}
.crumb a{color:var(--text-secondary);text-decoration:none;transition:color .4s var(--ease)}
@media (pointer:coarse){.crumb a{display:inline-flex;align-items:center;min-height:44px}}
.crumb a:hover{color:var(--accent)}
.crumb span{opacity:.5}

/* ---- single project page ---- */
.pj-title{max-width:18ch}
.pj-film{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius);
  background:var(--ramp);box-shadow:0 20px 70px -24px rgba(95,79,245,.55);
}
.pj-film iframe,.pj-film img{
  position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);
  border:0;border-radius:calc(var(--radius) - 2px);object-fit:cover;background:#000;
}
.pj-film .play{inset:2px;border:0;border-radius:calc(var(--radius) - 2px);cursor:pointer;font:inherit}
.pj-film .play .disc{width:84px;height:84px}
.pj-film .play .disc svg{width:22px;height:22px}
.pj-film .pj-soon{cursor:default;background:linear-gradient(180deg,rgba(4,6,11,.4),rgba(4,6,11,.7))}
.pj-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pj-steps li{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,32px);padding-block:clamp(22px,3.4vh,36px);border-bottom:1px solid var(--line)}
.pj-steps .n{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--accent);padding-top:.3em}
.pj-steps h3{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.pj-steps p{margin-top:.7em;color:var(--text-secondary);font-size:clamp(1.02rem,1.3vw,1.14rem);max-width:52ch}
.pj-steps p.em{font-family:var(--serif);font-style:italic;color:var(--text-primary);font-size:clamp(1.35rem,2.4vw,1.95rem);line-height:1.32}

/* ---- nav active state ---- */


/* the one italic word that carries the accent in a page headline */
.h-sec em,.rec-head em{
  font-style:italic;font-weight:400;
  color:var(--accent);                        /* the fallback, if clipping fails */
  background:var(--ramp-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}


/* ============================================================
   20. THE MOBILE MENU
   Thirteen pages need a way through on a phone. The links row hides
   under 900px, so this takes over from there.
   ============================================================ */
.burger{
  display:flex;width:44px;height:44px;flex:0 0 auto;
  align-items:center;justify-content:center;
  position:relative;z-index:70;
}
.burger svg{width:22px;height:22px;overflow:visible}
.burger .bar{stroke:var(--text-primary);stroke-width:1.5;stroke-linecap:round;fill:none}

.menu{
  position:fixed;inset:0;z-index:55;
  padding:86px 10px calc(10px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  pointer-events:none;visibility:hidden;
}
/* clicking the dimmed page closes the menu, so it is a layer of its own */
.menu-bg{
  position:fixed;inset:0;
  background:rgba(19,25,64,.74);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;
}
.menu-inner{position:relative;display:grid;gap:10px;max-width:560px;margin-inline:auto}
.menu-card{
  border-radius:var(--radius);will-change:transform;

  padding:clamp(24px,6vw,34px);
  position:relative;
}

/* 1. the pages, dark with a blue glow */
.menu-card--main{
  background:var(--panel);color:var(--text-primary);border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(71,176,251,.08),0 18px 60px -12px rgba(15,112,249,.45),0 0 90px -20px rgba(71,176,251,.35);
}
.menu-main{list-style:none;margin:0;padding:0}
.menu-main a{
  display:block;padding:.1em 0;text-decoration:none;
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.1rem,9.5vw,2.9rem);line-height:1.22;letter-spacing:-.014em;
  color:var(--text-primary);transition:color .3s var(--ease),transform .4s var(--ease);
}
.menu-main a:hover{transform:translateX(5px);color:var(--accent-hover)}
.menu-main a.here{color:var(--text-primary)}
.menu-main a.here::after{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px var(--accent);margin-left:.42em;vertical-align:.32em;
}
@media (pointer:coarse){.menu-meta a{display:inline-flex;align-items:center;min-height:44px}}
.menu-meta{
  margin-top:clamp(20px,5vw,30px);padding-top:clamp(16px,4vw,22px);
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--text-muted);
}
.menu-meta a{color:var(--text-secondary);text-decoration:none;transition:opacity .3s var(--ease)}
.menu-meta a:hover{opacity:.6}
.menu-meta span{opacity:.4}

/* 2. the one thing the menu is actually for */
.menu-card--cta{
  display:grid;gap:.55em;text-decoration:none;
  background:linear-gradient(132deg,var(--accent) 0%,var(--accent-2) 100%);
  color:#0C1029;
  transition:transform .45s var(--ease);
}
.menu-card--cta:hover{transform:translateY(-2px)}
.menu-card--cta .tag{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;opacity:.72;
}
.menu-card--cta strong{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.35rem,5.6vw,1.7rem);line-height:1.18;letter-spacing:-.01em;
}
.menu-card--cta .go{
  font-family:var(--display);font-size:.76rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin-top:.3em;
  display:inline-flex;align-items:center;gap:8px;
}

/* 3. the departments, back in the dark */
.menu-card--dark{background:var(--panel);border:1px solid var(--line)}
.menu-card--dark h4{
  font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-muted);margin:0 0 1.2em;
}
.menu-svc{list-style:none;margin:0;padding:0;display:grid}
.menu-svc a{
  display:flex;align-items:center;min-height:44px;text-decoration:none;
  color:var(--text-secondary);font-size:.98rem;
  transition:color .3s var(--ease),transform .4s var(--ease);
}
.menu-svc a:hover{color:var(--accent);transform:translateX(4px)}
.menu-svc a.here{color:var(--accent)}
.menu-tag{
  margin-top:clamp(16px,4vw,22px);padding-top:clamp(14px,3.5vw,18px);
  border-top:1px solid var(--line);
  font-family:var(--display);font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);
}

/* the css open state is the fallback for a page where gsap did not load.
   When it did, page.js adds .gsap and the timeline owns the panel instead. */
body.menu-open .menu:not(.gsap){visibility:visible;pointer-events:auto}
body.menu-open .menu:not(.gsap) .menu-bg{opacity:1}
body.menu-open{overflow:hidden}
/* the bar's own background and hairline were the only sharp edges left across
   the dimmed page, and the rule read as a seam above the panels */
body.menu-open .nav::before{opacity:0}

/* On a wide screen the panels sit against the right edge, the way they arrive
   from, rather than centred. The bar keeps its four links there, and the toggle
   opens the same panel for everything else, including the seven department
   pages that do not fit in a bar. */
@media (min-width:901px){
  .menu{padding-right:16px}
  .menu-inner{max-width:620px;margin-left:auto;margin-right:0}
  .burger{margin-left:clamp(12px,1.4vw,20px)}
}
@media (max-width:900px){
  /* the menu takes over from here; the row would squeeze six links into
     a bar that cannot give any of them a 44px target */
  .nav-links{display:none}
  .nav-logo{margin-right:auto}
  .nav{gap:8px}
  .burger{margin-right:0}
  .nav-cta{white-space:nowrap}
}
/* the menu carries its own full width call to action, so a narrow bar does not
   need to squeeze a second one in beside the logo */
@media (max-width:560px){
  .nav-cta{display:none}
  .burger{margin-right:0}
}
@media (prefers-reduced-motion:reduce){
  .menu{transition:none}
}

/* ============================================================
   21. THE TWO ANIMATED HEADINGS
   Split into spans by motion.js. The resting state is the finished
   state, so with no javascript, no GSAP, or reduced motion, the line
   is simply there.
   ============================================================ */
.h-sec .vis{display:block}
.h-sec .aw{display:inline-block;white-space:nowrap}
.h-sec .ac{display:inline-block;will-change:transform,opacity}
.h-sec .asp{display:inline-block;width:.26em}


/* ============================================================
   22. THE VISION SPLIT, THE WORK ROWS, AND THE LIGHT STREAKS
   ============================================================ */

/* ---- a fifth background layer: occasional cinematic streaks ---- */
.env-streak{position:absolute;inset:0;overflow:hidden}
.env-streak i{
  position:absolute;display:block;height:1px;width:46vw;
  background:linear-gradient(90deg,transparent,rgba(71,176,251,.26),rgba(163,47,239,.18),transparent);
  filter:blur(.4px);opacity:0;
  animation:streak 34s var(--ease-soft) infinite;
}
.env-streak i:nth-child(1){top:18%;left:-46vw;animation-delay:-4s}
.env-streak i:nth-child(2){top:62%;left:-46vw;width:34vw;animation-delay:-19s;animation-duration:44s}
@keyframes streak{
  0%{transform:translate3d(0,0,0) rotate(-8deg);opacity:0}
  8%{opacity:.7}
  32%{opacity:0}
  100%{transform:translate3d(190vw,-6vh,0) rotate(-8deg);opacity:0}
}

/* ---- the vision split ---- */
.vision{padding-block:clamp(56px,8vh,108px) clamp(80px,12vh,150px)}
/* the film above ends on solid --canvas-deep, while this section is a
   translucent fill with the glow behind it, so the two never matched and the
   join showed as a line. This picks up at exactly the film's last colour and
   dissolves into the section, so there is no edge left to see. */
.vision::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;
  height:clamp(160px,26vh,300px);
  background:linear-gradient(180deg,
    var(--canvas-deep) 0%,
    rgba(19,25,64,.82) 22%,
    rgba(19,25,64,.45) 55%,
    rgba(19,25,64,.14) 80%,
    rgba(19,25,64,0) 100%);
}

/* ---- two neon light trails hugging the section's corners ---- */
.vision-curves{
  position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;
  /* the corner glows run past the section and get clipped by it; fading
     the layer out at top and bottom keeps that clip from reading as a
     hard line where the next section starts */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 78%,transparent 100%);
}
.vision-curves::before,.vision-curves::after{
  content:"";position:absolute;width:min(60vw,720px);height:min(60vw,720px);
  border-radius:50%;pointer-events:none;
}
.vision-curves::before{
  top:-18%;right:-14%;
  background:radial-gradient(closest-side,rgba(51,179,240,.14),transparent 72%);
}
.vision-curves::after{
  bottom:-20%;left:-16%;
  background:radial-gradient(closest-side,rgba(181,156,242,.12),transparent 72%);
}
.vision-curves svg{width:100%;height:100%;display:block}
.vision-curves .vcurve{
  fill:none;stroke-linecap:round;
  filter:blur(3.5px) drop-shadow(0 0 18px rgba(51,179,240,.35)) drop-shadow(0 0 32px rgba(181,156,242,.22));
}
.vision-curves .vcurve-tr{stroke:url(#vcurveTR);stroke-width:4}
.vision-curves .vcurve-bl{stroke:url(#vcurveBL);stroke-width:3}
@media (max-width:720px){
  .vision-curves::before,.vision-curves::after{width:80vw;height:80vw}
  .vision-curves .vcurve{stroke-width:3}
}
.vision-grid{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.22fr);
  gap:clamp(34px,5.5vw,84px);align-items:center;
}
.eyebrow-lab{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
}
.vision-head{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(3rem,7vw,5.8rem);line-height:.98;letter-spacing:-.02em;
  margin-top:.3em;color:var(--text-primary);
}
.vision-head em{
  font-style:italic;font-weight:400;
  background:var(--ramp-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--accent);
}
.vision-body{margin-top:clamp(26px,3.6vh,40px);display:grid;gap:1.25em}
.vision-body p{color:var(--text-secondary);font-size:clamp(1rem,1.25vw,1.12rem);max-width:52ch}
.vision-quote{
  position:relative;
  margin-top:clamp(28px,4vh,44px);
  padding:clamp(20px,2.8vw,30px) clamp(22px,3vw,32px);
  border:1px solid var(--line);border-radius:var(--radius);
}
.vision-quote .q{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.3rem,2.2vw,1.72rem);line-height:1.26;letter-spacing:-.008em;
  color:var(--text-primary);
  border:none;
}
.vision-quote .a{
  margin-top:.9em;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.12rem,1.75vw,1.4rem);line-height:1.38;color:var(--accent);
  max-width:30ch;
}

/* ---- the cinematic frame ---- */
.vision-media{position:relative}
.vision-frame{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  /* the fade lives on this static frame, not on the img/wash inside it -
     those get scaled and panned by the Ken Burns drift, so a mask on
     them would travel with the transform and stop lining up with the
     box's actual edge, leaving a faint rim exactly like a hard border. */
  /* the radial is centred above the middle, so on its own it never reaches
     zero at the top edge (about 30% opaque there) and the top read as a hard
     line. A linear fade, intersected with it, takes the top to nothing. */
  -webkit-mask-image:
    radial-gradient(ellipse farthest-side at 50% 42%,#000 10%,transparent 100%),
    linear-gradient(180deg,transparent 0%,#000 26%);
  -webkit-mask-composite:source-in;
          mask-image:
    radial-gradient(ellipse farthest-side at 50% 42%,#000 10%,transparent 100%),
    linear-gradient(180deg,transparent 0%,#000 26%);
          mask-composite:intersect;
  background:transparent;
}
.vision-frame img{
  width:100%;height:100%;object-fit:cover;object-position:52% center;
  transform:scale(1.06);
  animation:visiondrift 42s var(--ease-soft) -8s infinite alternate;
}
@keyframes visiondrift{
  0%{transform:scale(1.06) translate3d(-1.2%,1%,0)}
  100%{transform:scale(1.13) translate3d(1.4%,-1.4%,0)}
}
.vision-wash{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(56% 42% at 62% 44%,rgba(71,176,251,.22),transparent 68%),
    radial-gradient(48% 40% at 26% 84%,rgba(163,47,239,.20),transparent 70%),
    linear-gradient(180deg,rgba(19,25,64,.34) 0%,rgba(19,25,64,0) 38%,rgba(19,25,64,.55) 100%);
}
.vision-streak{
  position:absolute;left:-30%;right:-30%;top:38%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(71,176,251,.5),transparent);
  filter:blur(1px);
  animation:vstreak 13s var(--ease-soft) -3s infinite;
}
@keyframes vstreak{
  0%,68%{transform:translateY(0);opacity:0}
  74%{opacity:.85}
  100%{transform:translateY(-16%);opacity:0}
}
@media (max-width:900px){
  .vision-grid{grid-template-columns:1fr;gap:clamp(30px,6vw,48px)}
  .vision-media{order:-1}
  .vision-frame{aspect-ratio:16/11}
}

/* ---- the three principles as rows ---- */
.triplet div{cursor:default}
.triplet .tt{flex:1}
.triplet .tarrow{
  width:16px;height:16px;flex:0 0 auto;stroke:var(--text-muted);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.5;transform:translateX(-6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),stroke .45s var(--ease);
}
.triplet div:hover{transform:translateX(6px)}
.triplet div:hover .tarrow{opacity:1;transform:translateX(0);stroke:var(--accent)}
.triplet div{
  transition:opacity .9s var(--ease),transform .55s var(--ease),border-color .55s var(--ease);
}
.triplet div:hover{border-bottom-color:var(--accent)}

/* ---- the work rows, numbered, swapping the preview ---- */
.story-rows{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.story-row{
  display:grid;grid-template-columns:auto minmax(120px,.42fr) minmax(0,1fr);
  gap:clamp(12px,2vw,28px);align-items:baseline;
  padding-block:clamp(16px,2.6vh,26px);
  border-bottom:1px solid var(--line);
  cursor:default;position:relative;
  transition:padding-left .5s var(--ease),border-color .5s var(--ease);
}
.story-row:hover{padding-left:12px;border-bottom-color:var(--accent)}
.story-row .n{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  color:var(--text-muted);transition:color .45s var(--ease);
}
.story-row:hover .n,.story-row.on .n{color:var(--accent)}
.story-row .t{
  font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
.story-row .d{color:var(--text-primary);font-weight:400;font-size:clamp(1.02rem,1.3vw,1.16rem)}
.story-row.rw-truth .d{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.15rem,1.75vw,1.45rem);line-height:1.34;
}
@media (max-width:880px){
  .story-row{grid-template-columns:auto 1fr;gap:6px 14px}
  .story-row .d{grid-column:2}
}

/* ============================================================
   CTA BAND - Home page shader variant
   Swaps the shared band's still "violet dome" glow for the animated
   WebGL shader, scoped to this one instance via the --shader modifier
   so every other page's .cta-band keeps its original background.
   ============================================================ */
.cta-band--shader::before,.cta-band--shader::after{content:none}
.cta-band-shader{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  /* the shader is bright at the top and darkened at the bottom, so on its
     own it met the sections either side on a hard line. Fading the whole
     layer out at both ends lets the section fill show through at the edges,
     and that fill matches its neighbours. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 70%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 70%,transparent 100%);
}
.cta-band-shader-canvas{width:100%;height:100%}
.cta-band-shader::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(19,25,64,.74) 0%, rgba(19,25,64,.4) 30%,
    rgba(19,25,64,.18) 50%, rgba(19,25,64,.72) 100%);
}
.cta-band--shader h2,.cta-band--shader p{text-shadow:0 2px 20px rgba(19,25,64,.85)}

/* ============================================================
   HOME REDESIGN - every section below the hero
   Scoped to selectors that only ever appear on the home route
   (.vision, .htj, .qs, .home-method, .home-work,
   .cta-band--shader) so every other page that shares .method,
   .work, .story-row or .cta-band keeps its current look untouched.
   ============================================================ */

/* one continuous canvas after the hero, not a stack of differently
   shaded panels - every section below shares the same deep base so the
   page reads as one body instead of a row of cards stacked vertically */
.vision,.htj,.home-method,.home-work,.qs{background:var(--sec-deep)}

.vision-badge{
  position:absolute;left:18px;right:18px;bottom:18px;z-index:1;
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:calc(var(--radius) - 4px);
  background:rgba(17,23,54,.56);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transform:translateY(10px);
  transition:opacity .8s var(--ease) .2s,transform .8s var(--ease) .2s;
}
.in .vision-badge{opacity:1;transform:none}
.vision-badge-num{
  flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--border-strong);
  font-family:var(--mono);font-size:11px;color:var(--accent);
}
.vision-badge-tx{
  font-family:var(--display);font-size:.8rem;font-weight:500;
  color:var(--text-primary);letter-spacing:.01em;line-height:1.32;
}
@media (max-width:560px){.vision-badge{display:none}}

/* ---- 04 work: a faint portrait glows behind the section head ---- */
.home-work{position:relative;overflow:hidden}
.home-work::before{
  content:"";position:absolute;top:0;right:0;bottom:0;
  width:min(640px,58%);pointer-events:none;
  background:url('pinsnap-821695894550102317-story1.jpg') no-repeat center top;
  background-size:cover;
  opacity:.32;
  /* fades in from the left and out at top and bottom, so the portrait
     never ends on a hard edge where the next section starts */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%),linear-gradient(180deg,transparent 0%,#000 22%,#000 45%,transparent 92%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 55%),linear-gradient(180deg,transparent 0%,#000 22%,#000 45%,transparent 92%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.home-work .wrap{position:relative;z-index:1}


/* ---- circular testimonials (src/components/ui/circular-testimonials.jsx) ----
   Ported without styled-jsx, so its CSS lives here like everything else on
   the site. Prefixed ct- since the component is generic/reusable and this
   stylesheet has no other namespacing to collide with. Used inside #films
   to cycle through the nine titles as a circular carousel. */
.ct-container{width:100%;margin-top:clamp(48px,8vh,96px)}
.ct-grid{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
.ct-image-container{
  position:relative;width:100%;aspect-ratio:4/3;
  perspective:1000px;
}
.ct-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:var(--radius);
  box-shadow:0 30px 80px -30px rgba(3,5,10,.9);
}
.ct-content{display:flex;flex-direction:column;justify-content:space-between;min-height:220px}
.ct-content-inner{animation:ctFadeUp .5s var(--ease) both}
@keyframes ctFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.ct-name{font-family:var(--display);font-weight:600;letter-spacing:.01em;margin:0 0 .3em}
.ct-designation{font-family:var(--mono);letter-spacing:.06em;margin:0 0 1.3em}
.ct-quote{font-family:var(--serif);font-style:italic;font-weight:400;line-height:1.6;margin:0}
.ct-word{display:inline-block;filter:blur(10px);opacity:0;transform:translateY(5px);
  animation:ctWordIn .28s var(--ease) forwards;
}
@keyframes ctWordIn{to{filter:blur(0);opacity:1;transform:translateY(0)}}
.ct-arrows{display:flex;gap:14px;padding-top:2.4em}
.ct-arrow{
  width:2.7rem;height:2.7rem;border-radius:50%;display:grid;place-items:center;
  border:none;cursor:pointer;transition:background-color .35s var(--ease),transform .35s var(--ease);
}
.ct-arrow:hover{transform:scale(1.06)}
.ct-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* the optional watch-a-film button/video, shown over the active image only
   (it's centred at inset:0 same as the active .ct-image, see getImageStyle) -
   same visual language as .play/.disc/.lbl used elsewhere on the site */
.ct-play{
  position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  gap:14px;flex-direction:column;border:none;border-radius:var(--radius);cursor:pointer;
  background:linear-gradient(180deg,rgba(4,6,11,.28),rgba(4,6,11,.62));
  transition:background .6s var(--ease);
}
.ct-play:hover{background:linear-gradient(180deg,rgba(4,6,11,.18),rgba(4,6,11,.5))}
.ct-play-disc{
  width:66px;height:66px;border-radius:50%;
  border:1px solid rgba(233,238,246,.45);
  display:grid;place-items:center;color:var(--text-primary);
  backdrop-filter:blur(6px);background:rgba(8,12,20,.32);
  transition:border-color .5s var(--ease),transform .5s var(--ease),background .5s var(--ease);
}
.ct-play:hover .ct-play-disc{border-color:var(--accent);transform:scale(1.07);background:rgba(71,176,251,.14)}
.ct-play-label{
  font-family:var(--display);font-size:.76rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-primary);
}
.ct-video{
  position:absolute;inset:0;z-index:4;width:100%;height:100%;
  border-radius:var(--radius);background:#000;
}

/* VideoModal - a focused overlay for the Drive preview iframe, opened from
   the Projects grid's watch-enabled cards. */
.vmod-scrim{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:5vh 5vw;background:rgba(19,25,64,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.vmod-panel{
  position:relative;width:min(960px,100%);
  border-radius:var(--radius);border:1px solid rgba(81,106,153,.3);
  background:var(--panel);box-shadow:0 40px 90px -30px rgba(2,4,10,.9);
  overflow:hidden;
}
.vmod-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.vmod-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vmod-close{
  position:absolute;top:14px;right:14px;z-index:1;
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(233,238,246,.3);
  display:grid;place-items:center;color:var(--text-primary);
  background:rgba(8,12,20,.55);backdrop-filter:blur(6px);cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.vmod-close:hover{border-color:var(--accent);background:rgba(71,176,251,.18)}
.vmod-close svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;fill:none}
@media (min-width:768px){
  /* minmax(0,1fr), not bare 1fr: .ct-image-container's only children are
     position:absolute (see getImageStyle), so it has no in-flow content to
     give it an intrinsic width - a bare 1fr track sizes from that intrinsic
     width first and collapses to 0. Same fix already used by .story
     above. */
  .ct-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ct-arrows{padding-top:0}
}

/* ============================================================
   19. HOMEPAGE REDESIGN — who it's for / the session
   Same tokens and rule-line language as the rest of the site,
   recoloured toward a soft white/violet atmosphere rather than the
   sitewide blue, per the brief's ask for "black cinematic studio +
   soft white light + subtle violet". The positioning statement itself
   lives inside the hero's settle band (see .pos-line), not its own
   section.
   ============================================================ */

/* .audience and .session share one continuous background image - it lives
   on the wrapping .dual-bg-wrap (see below) so it isn't cut off and
   restarted at the boundary between the two sections. */
.dual-bg-wrap{position:relative;background:var(--sec-deep)}
.dual-bg-wrap::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('pinsnap-707698529006876033.jpg') center 30%/cover no-repeat;
}
.dual-bg-wrap::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:rgba(19,25,64,.68);
}
/* both layers fade out at top and bottom so the wrap hands over to the
   sections around it on the shared fill, with no edge */
.dual-bg-wrap::before,.dual-bg-wrap::after{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 84%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 84%,transparent 100%);
}

.audience{
  position:relative;z-index:1;padding-block:clamp(96px,15vh,180px);overflow:hidden;
}

/* A single light source: the beam sits behind the centred heading and
   its blue/violet falls off toward the cards below, which is also why
   the cards carry their own soft rest-state glow (.aud-card box-shadow)
   instead of only lighting up on hover - they read as lit by the same
   source rather than as isolated hover targets. */
.audience-beam{display:none}
.audience-head{position:relative;z-index:1;text-align:center;max-width:min(760px,94%);margin-inline:auto}
.audience-head .kicker{justify-content:center}
.audience-head .krule{display:none}
.audience-head .h-sec{margin-top:.55em}

.audience-grid{
  position:relative;z-index:1;
  margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.4vw,24px);
}

/* Spotlight cards (src/components/ui/spotlight-card.jsx): a pointer-tracked
   radial glow inside a bordered panel, ported from 21st.dev. --spot-x/-y
   are written on mousemove; the glow itself only fades in on :hover so it
   never shows a stale position before the pointer has entered the card. */
.aud-card{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line);
  padding:clamp(28px,4vh,40px) clamp(24px,3vw,32px);
  box-shadow:0 0 44px -20px rgba(71,176,251,.4),0 0 64px -22px rgba(185,70,250,.32);
  transition:border-color .4s var(--ease),transform .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.aud-card:hover{
  border-color:var(--border-strong);transform:translateY(-4px);background:var(--panel-hi);
  box-shadow:0 0 64px -14px rgba(71,176,251,.55),0 0 90px -18px rgba(185,70,250,.45);
}
.aud-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .4s var(--ease);
  background:radial-gradient(280px circle at var(--spot-x,50%) var(--spot-y,50%),
    rgba(71,176,251,.18),rgba(185,70,250,.1) 45%,transparent 72%);
}
.aud-card:hover .aud-glow{opacity:1}
.aud-ring{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;border-radius:inherit;
  padding:1px;transition:opacity .4s var(--ease);
  background:radial-gradient(220px circle at var(--spot-x,50%) var(--spot-y,50%),var(--accent),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.aud-card:hover .aud-ring{opacity:.6}
.aud-inner{position:relative;z-index:1}
.aud-for{
  font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,1.6vw,1.35rem);
  text-transform:uppercase;letter-spacing:.04em;color:var(--text-primary);
}
.aud-body{
  margin-top:.85em;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.5;color:var(--text-secondary);max-width:32ch;
}
@media (max-width:820px){
  .audience-grid{grid-template-columns:1fr}
}

.session{
  position:relative;z-index:1;padding-block:clamp(90px,14vh,160px);overflow:hidden;
}
.session::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(44% 60% at 50% 50%,rgba(255,255,255,.04),transparent 72%);
}
.session-inner{position:relative;max-width:640px;margin-inline:auto;text-align:center}
.session-mins{
  font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,5vw,3.8rem);
  color:var(--text-primary);letter-spacing:-.01em;
}
.session-mins span{color:var(--accent-2)}
.session-label{
  margin-top:.4em;font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--text-muted);
}
.session-statement{
  margin-top:clamp(22px,3.4vh,32px);font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.48;color:var(--text-primary);
}

/* the new home consultation form reuses .discover/.form wholesale;
   only the select fields need styling the plain input/textarea rules
   below don't already cover */
.field select{
  font-family:var(--display);font-size:1rem;font-weight:400;
  color:var(--text-primary);background-color:transparent;
  border:0;border-bottom:1px solid var(--border-strong);
  padding:11px 22px 11px 2px;border-radius:var(--radius) var(--radius) 0 0;
  transition:border-color .45s var(--ease),background-color .45s var(--ease);
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237789A6' stroke-width='1.4' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:13px;
}
.field select:focus{outline:none;border-bottom-color:var(--accent);background-color:rgba(71,176,251,.04)}
.field select option{background:#18204A;color:var(--text-primary)}

/* ---- closing CTA: the film's last frame, not a contact card ---- */
.cta-band--shader .wrap{display:flex;justify-content:center}
.cta-band--shader .cta-card{
  max-width:min(880px,92%);
  padding:clamp(36px,5vw,56px) clamp(28px,5vw,56px);
}
.cta-band--shader .cta-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.9em;
}
.cta-band--shader h2{
  font-size:clamp(2.6rem,7vw,5.6rem);line-height:.98;letter-spacing:-.02em;
}
.cta-band--shader .cta-card > p:not(.cta-eyebrow){
  font-size:clamp(1.05rem,1.6vw,1.28rem);margin-top:.9em;
}

/* ============================================================
   PROJECTS PAGE - the six-card work grid
   (src/components/ui/progressive-blur-card.jsx)
   ============================================================ */
.projects-grid{
  margin-top:clamp(32px,5vh,52px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,28px);
}
.pbc-card{
  position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;
  border-radius:var(--radius);border:1px solid rgba(81,106,153,.22);
  background:#000;padding:0;font:inherit;text-align:inherit;color:inherit;cursor:pointer;
  box-shadow:0 20px 50px -24px rgba(2,4,10,.75);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.pbc-card:hover{
  transform:translateY(-4px) scale(1.015);
  box-shadow:0 30px 70px -28px rgba(2,4,10,.85);
  border-color:rgba(71,176,251,.4);
}
.pbc-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pbc-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.pbc-card:hover .pbc-image{transform:scale(1.06)}
.pbc-blur{position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none}
.pbc-overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  background:linear-gradient(180deg,transparent 40%,rgba(19,25,64,.55) 72%,rgba(19,25,64,.86) 100%);
}
.pbc-row{
  width:100%;display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;padding:clamp(18px,2.4vw,26px);
}
.pbc-title{
  font-family:var(--display);font-size:clamp(1rem,1.4vw,1.2rem);font-weight:600;
  letter-spacing:.01em;color:var(--text-primary);line-height:1.25;
}
.pbc-sub{
  margin-top:.35em;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--text-secondary);
}
.pbc-cat{
  display:inline-block;margin-top:.8em;padding:.4em .85em;border-radius:999px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);background:rgba(71,176,251,.1);border:1px solid rgba(71,176,251,.32);
}
.pbc-btn{
  flex:0 0 auto;width:2.6rem;height:2.6rem;border-radius:50%;
  display:grid;place-items:center;color:var(--text-primary);
  background:rgba(8,12,20,.5);border:1px solid rgba(233,238,246,.28);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
}
.pbc-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pbc-card:hover .pbc-btn{
  background:rgba(71,176,251,.16);border-color:var(--accent);color:var(--accent);transform:scale(1.08);
}
@media (max-width:960px){.projects-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.projects-grid{grid-template-columns:1fr}}

/* ============================================================
   CAREERS (WordPress theme)
   Everything else on the careers pages reuses existing blocks:
   .svc-row for the role list, .covers for values, .deliver-grid for
   duties and requirements, .markets for the role facts, .form for applying.
   ============================================================ */
.field [aria-invalid="true"]{border-bottom-color:#E0607E}
.jobs-empty{margin-top:clamp(28px,4vh,42px);padding-top:clamp(22px,3vh,32px);border-top:1px solid var(--line);color:var(--text-secondary);max-width:52ch}
.job-body p{color:var(--text-secondary);max-width:62ch}
.job-body p + p{margin-top:1em}
.job-section{margin-top:clamp(48px,7vh,90px)}
.job-apply-head{max-width:40ch;margin-bottom:clamp(28px,4vh,44px)}
.job-apply-head p{margin-top:1em;color:var(--text-secondary)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{margin-top:clamp(18px,3vh,26px);color:#F08BA3;font-size:14px}
.cv-drop{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  margin-top:6px;padding:clamp(18px,2.6vh,26px) clamp(18px,2vw,26px);
  border:1px dashed var(--border-strong);border-radius:14px;background:rgba(71,176,251,.03);
  cursor:pointer;transition:border-color .35s var(--ease),background .35s var(--ease)
}
.cv-drop:hover,.cv-drop.is-over{border-color:var(--accent);background:rgba(71,176,251,.07)}
.cv-drop:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(71,176,251,.1)}
.cv-drop.is-invalid{border-color:#E0607E}
.cv-drop.has-file{border-style:solid}
.field .cv-drop{font-size:1rem;font-weight:400;letter-spacing:normal;text-transform:none;display:flex}
.cv-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cv-icon{width:26px;height:26px;flex:0 0 auto;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cv-text{font-family:var(--display);font-size:1rem;color:var(--text-secondary)}
.cv-text strong{color:var(--text-primary);font-weight:500;border-bottom:1px solid var(--accent-muted)}
.cv-chosen{color:var(--text-primary);word-break:break-all}
.cv-hint{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
@media (max-width:560px){.cv-hint{margin-left:0;flex-basis:100%}}
.form button[disabled]{opacity:.6;pointer-events:none}