/* ==========================================================================
   ATTILIUS TECHNOLOGIES — homepage styles
   DESIGN SYSTEM TOKENS are in :root. Change them here, everything follows.
   ========================================================================== */

/* Self-hosted fonts (SIL Open Font License; see assets/fonts/FONT-LICENSES.txt) */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/bodoni-moda-latin-opsz-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}

:root{
  /* Colour */
  --void:#050607;      /* page base */
  --ink:#0A0C0E;       /* panels */
  --ink-2:#111418;     /* raised surfaces */
  --graphite:#1B2026;  /* hairlines, terrain grading */
  --slate:#2B323A;
  --ash:#8C9299;       /* tertiary text (6:1 on void) */
  --mist:#B9BDC2;      /* secondary text */
  --bone:#F1EEE8;      /* primary text */
  --gold:#B89A5E;      /* instrument accent ONLY: reticles, periods, active states */
  --gold-hi:#D6BB80;

  /* Type */
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"Manrope","Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);   /* slow "focus pull" */

  /* Layout */
  --safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);
  --m:max(clamp(20px,5vw,72px),var(--safe-l),var(--safe-r));   /* page margin (never under a notch) */
  --fs-xs:.75rem;                       /* smallest permitted text: 12px */
  --gut:clamp(16px,2vw,24px);           /* grid gutter */
  --nav-base:72px;
  --nav-h:calc(var(--nav-base) + var(--safe-t));

  /* Scroll lengths for the pinned sequences */
  --stage-len:640svh;
  --chain-len:430svh;
  --st-len:340svh;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{background:var(--void);color:var(--bone);-webkit-text-size-adjust:100%;scroll-padding-top:0}
body{font:400 1.0625rem/1.7 var(--sans);background:var(--void);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--bone);outline-offset:4px}

/* Film grain over everything (static, very low) */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--bone);color:var(--void);padding:.7rem 1rem;font-weight:600;text-decoration:none;transition:top .3s}
.skip:focus{top:12px}

/* --- Layout helpers ---------------------------------------------------- */
.wrap{width:min(100% - 2*var(--m),1360px);margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}

/* --- Type -------------------------------------------------------------- */
/* Approved logo (assets/logo/02_Attilius_Primary_White.svg), used as supplied */
.logo{display:block;height:auto}
.nav__logo{width:188px;transition:width .6s var(--ease)}
.nav.is-scrolled .nav__logo{width:148px}
.footer__logo{width:150px}
.lockup__logo{width:clamp(240px,45.5vw,570px)}   /* matches the old text lockup's width curve */
.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}
.wm__sub{font:400 var(--fs-xs)/1 var(--sans);letter-spacing:.6em;text-transform:uppercase;color:var(--ash);margin-top:1.1rem;margin-right:-.6em}
.eyebrow{font:500 var(--fs-xs)/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.h2{font:400 clamp(2.15rem,5vw,4.4rem)/1.06 var(--serif);letter-spacing:-.012em;margin-top:1.1rem;text-wrap:balance}
.h2--xl{font-size:clamp(2.4rem,6.6vw,6rem);max-width:15ch;margin-inline:auto}
.h2--md{font-size:clamp(2rem,4vw,3.4rem)}
.lede{font:300 clamp(1.2rem,1.9vw,1.55rem)/1.5 var(--sans);color:var(--bone);margin-top:1.75rem;max-width:34em}
.body{color:var(--mist);margin-top:1.25rem;max-width:34em}
.words{font:200 min(clamp(2.75rem,12vw,9.75rem),17vh)/1.05 var(--sans);letter-spacing:.06em}
.words i,.beat__word i,.hud__dock i{font-style:normal;color:var(--gold)}

/* Placeholders: only visible in review mode */
.ph{display:none;width:fit-content;max-width:100%;margin:1.25rem auto 0;font:500 var(--fs-xs)/1.4 var(--mono);letter-spacing:.06em;color:var(--gold);border:1px dashed rgba(184,154,94,.65);padding:.4em .7em;background:rgba(5,6,7,.6);text-align:left}
html.review .ph{display:block}
html.review .ph--inline{display:inline-block;margin:0 0 0 .3em}
.gt .ph,.sol .ph,.int .ph,.chain__head .ph{margin-left:0}
.review-btn{position:fixed;left:calc(12px + var(--safe-l));bottom:calc(12px + var(--safe-b));z-index:150;font:500 var(--fs-xs)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ash);background:var(--ink);border:1px solid var(--graphite);padding:.65rem .8rem}
.review-btn:hover{color:var(--bone)}

#careers{scroll-margin-top:calc(var(--nav-h) + 1.5rem)}

/* --- Buttons & links --------------------------------------------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:1.05rem 1.9rem;border:1px solid var(--gold);color:var(--bone);text-decoration:none;
  font:600 .76rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;background:transparent;transition:background .6s var(--ease),color .6s var(--ease)}
.btn::before,.btn::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--gold);transition:transform .6s var(--ease)}
.btn::before{top:-6px;left:-6px;border-right:0;border-bottom:0}
.btn::after{bottom:-6px;right:-6px;border-left:0;border-top:0}
.btn:hover{background:rgba(184,154,94,.12)}
.btn:hover::before{transform:translate(-4px,-4px)}
.btn:hover::after{transform:translate(4px,4px)}
.btn--sm{padding:.8rem 1.2rem;font-size:var(--fs-xs)}
.link{display:inline-block;font:600 .76rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--mist);padding:.5rem 0;border-bottom:1px solid var(--gold);transition:color .5s var(--ease)}
.link:hover{color:var(--bone)}

/* --- Navigation -------------------------------------------------------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);padding-top:var(--safe-t);display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-inline:var(--m);
  border-bottom:1px solid transparent;transition:background .6s var(--ease),border-color .6s var(--ease),backdrop-filter .6s}
.nav.is-scrolled{background:rgba(5,6,7,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:rgba(255,255,255,.07)}
.nav__brand{display:block;padding:.8rem 0;text-decoration:none;position:relative;z-index:101}   /* padding enlarges the tap area only */
.nav__links{display:flex;gap:clamp(1.5rem,3vw,2.75rem);margin-left:auto}
.nav__links a{position:relative;font:500 var(--fs-xs)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--mist);padding:.6rem 0;transition:color .5s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.nav__links a:hover{color:var(--bone)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__end{display:flex;align-items:center;gap:1rem;position:relative;z-index:101}
.nav__toggle{display:none;width:44px;height:44px;position:relative}
.nav__toggle span{position:absolute;left:10px;right:10px;height:1px;background:var(--bone);transition:transform .5s var(--ease),top .5s var(--ease)}
.nav__toggle span:first-child{top:18px}
.nav__toggle span:last-child{top:26px}
.nav__toggle[aria-expanded="true"] span:first-child{top:22px;transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{top:22px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:99;background:rgba(5,6,7,.98);display:flex;flex-direction:column;justify-content:center;gap:3rem;padding:calc(var(--nav-h) + 1rem) var(--m) calc(3rem + var(--safe-b))}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column;gap:.6rem}
.menu nav a{font:400 clamp(2.2rem,9vw,3.4rem)/1.15 var(--serif);text-decoration:none}
.menu .btn{align-self:flex-start}

/* ==========================================================================
   1 + 2. HERO / DESCENT (pinned scroll stage)
   ========================================================================== */
.stage__track{position:relative;height:calc(100vh + var(--stage-len));height:calc(100svh + var(--stage-len))}
.stage__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--void)}
.stage__layers{position:absolute;inset:0;z-index:0}
.step{display:contents}
.layer{position:absolute;inset:0;transform-origin:var(--origin,50% 50%);will-change:transform,opacity;opacity:0;visibility:hidden;overflow:hidden}
.step:first-child .layer{opacity:1;visibility:visible}
.layer img{width:100%;height:100%;object-fit:cover;display:block}
.layer::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,6,7,.8),rgba(5,6,7,0) 48%),linear-gradient(to right,rgba(5,6,7,.55),rgba(5,6,7,0) 58%)}
.shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 95% at 50% 42%,rgba(5,6,7,0) 40%,rgba(5,6,7,.72) 100%)}

.hero{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:calc(var(--nav-h) + 1rem) var(--m) 9vh;
  transform-origin:28% 50%;transform:scale(calc(1 + var(--hp,0)*1.7));opacity:calc(1 - var(--hp,0)*1.3);will-change:transform,opacity}
.w{display:block;opacity:0;transform:translateY(.14em);filter:blur(8px);animation:rise 1.3s var(--ease) var(--d) forwards}
.w i{opacity:0;animation:dot 1s var(--ease) calc(var(--d) + .75s) forwards}
.hero__line{margin-top:clamp(2rem,7vh,4.5rem);font:400 clamp(1.5rem,3.1vw,2.75rem)/1.22 var(--serif);max-width:22ch;opacity:0;animation:fade 1.4s var(--ease) 2.9s forwards}
@keyframes rise{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes dot{to{opacity:1}}
@keyframes fade{to{opacity:1}}

.cap{position:absolute;left:var(--m);bottom:calc(clamp(2.5rem,10vh,6.5rem) + var(--safe-b));max-width:min(36rem,62vw);opacity:0;will-change:transform,opacity}
.cap__k{font:500 var(--fs-xs)/1 var(--mono);letter-spacing:.2em;color:var(--gold)}
.cap__w{font:200 clamp(2.3rem,6vw,5rem)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:.9rem 0 1rem}
.cap__l{font:300 clamp(1.05rem,1.6vw,1.3rem)/1.45 var(--sans);color:var(--mist)}

.hud{position:absolute;inset:0;z-index:3;pointer-events:none}
/* soft dark scrim behind the right-hand progress rail so 01-05 stay legible over bright imagery */
.hud::before{content:"";position:absolute;top:0;right:0;bottom:0;width:min(24vw,280px);opacity:var(--hud,0);background:linear-gradient(to left,rgba(5,6,7,.98) 0,rgba(5,6,7,.96) 46%,rgba(5,6,7,.5) 76%,rgba(5,6,7,0) 100%)}
.hud__ret{position:absolute;left:50%;top:50%;width:calc(var(--r,62)*1vmin);height:calc(var(--r,62)*1vmin);transform:translate(-50%,-50%);color:var(--gold);opacity:var(--ro,0)}
.hud__ret.locked{color:var(--gold-hi)}
.hud__xh{position:absolute;background:var(--gold);opacity:calc(var(--ro,0)*.22)}
.hud__xh--h{left:0;right:0;top:50%;height:1px;-webkit-mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent)}
.hud__xh--v{top:0;bottom:0;left:50%;width:1px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
.hud__dock{position:absolute;left:calc(var(--m)*.42);top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);font:300 var(--fs-xs)/1 var(--sans);letter-spacing:.42em;color:var(--mist);opacity:calc(var(--hud,0)*.85)}
.hud__rail{position:absolute;right:var(--m);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2.2rem;list-style:none;padding:0;opacity:var(--hud,0)}
.hud__rail li{display:flex;align-items:center;justify-content:flex-end;gap:.8rem;font:500 var(--fs-xs)/1 var(--mono);letter-spacing:.14em;color:var(--mist);text-shadow:0 0 6px rgba(5,6,7,.95),0 0 2px rgba(5,6,7,.95);transition:color .6s var(--ease)}
.hud__rail li::after{content:"";width:14px;height:1px;background:currentColor;transition:width .6s var(--ease)}
.hud__rail li.on{color:var(--gold-hi)}
.hud__rail li.on::after{width:32px}
.hud__meta{position:absolute;right:var(--m);bottom:calc(clamp(1.25rem,4vh,2.4rem) + var(--safe-b));display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;max-width:21rem;text-align:right;opacity:var(--hud,0)}
.coords{font:400 var(--fs-xs)/1 var(--mono);letter-spacing:.14em;color:var(--mist)}
.note{font:400 var(--fs-xs)/1.45 var(--sans);color:var(--ash)}
.hud__cue{position:absolute;left:50%;bottom:calc(clamp(1.25rem,4vh,2.4rem) + var(--safe-b));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.7rem;font:500 var(--fs-xs)/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--mist);opacity:calc((1 - var(--hp,0)*10));animation:fadeCue 1.2s var(--ease) 3.4s backwards}
.hud__cue b{width:1px;height:38px;background:linear-gradient(var(--gold),transparent)}
@keyframes fadeCue{from{opacity:0}}

/* ==========================================================================
   3. GROUND TRUTH
   ========================================================================== */
.gt{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-block:clamp(6rem,14vh,10rem);overflow:hidden;isolation:isolate}
.gt__bg{position:absolute;inset:0;z-index:-1;transform:scale(1.18);
  background:linear-gradient(to right,rgba(5,6,7,.94) 0%,rgba(5,6,7,.72) 40%,rgba(5,6,7,.12) 78%),linear-gradient(to top,rgba(5,6,7,.6),rgba(5,6,7,0) 40%),url(../img/ground.jpg) center/cover no-repeat}
.gt__copy{grid-column:1 / span 6}

/* ==========================================================================
   4. THE CHAIN
   ========================================================================== */
.chain__track{position:relative;height:calc(100vh + var(--chain-len));height:calc(100svh + var(--chain-len))}
.chain__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--void)}
.chain__terrain{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;will-change:opacity}
.chain__sticky::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 55% 40%,rgba(5,6,7,0) 30%,rgba(5,6,7,.8) 100%),linear-gradient(to top,rgba(5,6,7,.85),rgba(5,6,7,0) 55%)}
#chainCanvas{position:absolute;inset:0;z-index:1}
.chain__head{position:absolute;z-index:3;top:clamp(5.5rem,14vh,9rem);left:0;right:0}
.chain__body{position:absolute;z-index:3;bottom:calc(clamp(1.5rem,6vh,3.75rem) + var(--safe-b));left:0;right:0}
.chain__defs{position:relative;height:clamp(9.5rem,24vh,12.5rem);margin-bottom:clamp(1.5rem,4vh,2.75rem)}
.def{position:absolute;left:0;bottom:0;max-width:38rem;opacity:0;transform:translateY(14px);transition:opacity .16s linear,transform .16s linear;pointer-events:none}
.def.on{opacity:1;transform:none;pointer-events:auto;transition:opacity .6s var(--ease) .2s,transform .6s var(--ease) .2s}
.def h3{font:200 clamp(2rem,4.6vw,3.6rem)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.def p{margin-top:1rem;font:300 clamp(1.05rem,1.6vw,1.3rem)/1.5 var(--sans);color:var(--mist);max-width:30em}
.rail{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.rail__node{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;width:100%;padding:1.1rem 0 .4rem;text-align:left;color:var(--ash);transition:color .6s var(--ease)}
.rail__node i{position:absolute;top:-4px;width:9px;height:9px;border:1px solid currentColor;background:var(--void);transform:rotate(45deg);transition:background .6s var(--ease),border-color .6s var(--ease)}
.rail__n{font:500 var(--fs-xs)/1 var(--mono);letter-spacing:.14em}
.rail__l{font:500 var(--fs-xs)/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.rail__node.on{color:var(--mist)}
.rail__node.now{color:var(--gold)}
.rail__node.now i{background:var(--gold);border-color:var(--gold)}
/* the rail's connecting hairline sits on top of the nodes */
.rail::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.16)}
.rail::after{content:"";position:absolute;left:0;top:0;height:1px;width:calc(var(--rp,0)*100%);background:var(--gold)}
.rail li{position:relative}

/* ==========================================================================
   5. THE ATTILIUS APPROACH (full-screen brand statement)
   ========================================================================== */
.st__track{position:relative;height:calc(100vh + var(--st-len));height:calc(100svh + var(--st-len))}
.st__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--void)}
.st__eyebrow{position:absolute;z-index:5;top:calc(var(--nav-h) + 1.75rem);left:var(--m)}
.beat{--o:0}
.beat:first-of-type{--o:1}
.beat__bg{position:absolute;inset:0;opacity:var(--bo,var(--o));will-change:opacity}
.beat__bg img{width:100%;height:100%;object-fit:cover}
.beat__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(5,6,7,.78),rgba(5,6,7,.15) 70%),radial-gradient(120% 90% at 50% 45%,rgba(5,6,7,0) 35%,rgba(5,6,7,.7) 100%)}
.beat__bg--disrupt img{filter:brightness(.62) contrast(1.06)}
.contours{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;mix-blend-mode:screen;z-index:1}
.contours--a{background-image:url(../svg/contours-a.svg);opacity:.34}
.contours--b{background-image:url(../svg/contours-b.svg);opacity:.42}
.contours--faint{opacity:.13;mix-blend-mode:normal}
.beat__inst{position:absolute;z-index:2;right:clamp(1.5rem,5vw,6rem);top:46%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--gold)}
.beat__ret{width:clamp(110px,22vmin,230px);height:clamp(110px,22vmin,230px)}
.beat__inst::before,.beat__inst::after{content:"";position:absolute;background:var(--gold);opacity:.3}
.beat__inst::before{left:-60vw;right:-60vw;top:calc(clamp(110px,22vmin,230px)/2);height:1px;-webkit-mask-image:linear-gradient(to right,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(to right,transparent,#000 35%,#000 65%,transparent)}
.beat__inst::after{top:-60vh;bottom:-60vh;left:50%;width:1px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 65%,transparent)}
.beat__tag{font:400 var(--fs-xs)/1 var(--mono);letter-spacing:.14em;color:var(--bone);background:rgba(5,6,7,.6);padding:.4em .65em;margin:-.4em -.65em;white-space:nowrap}   /* plate is paint-only: negative margin keeps the original layout box */
.beat__word{position:absolute;z-index:3;left:var(--m);top:54%;transform:translateY(-50%) scale(var(--bs,1));transform-origin:left center;
  font:200 clamp(3rem,15vw,15rem)/.9 var(--sans);letter-spacing:.03em;opacity:var(--o);will-change:transform,opacity}
.beat .ph--beat{position:absolute;z-index:4;left:var(--m);bottom:clamp(3rem,10vh,6rem);margin:0;opacity:var(--o)}
.st__lockup{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--void);opacity:var(--lo,0);pointer-events:none}
.st__lockup::before{content:"";position:absolute;inset:0;background:url(../svg/contours-a.svg) center/cover no-repeat;opacity:.1}
.lockup__ret{width:clamp(48px,7vmin,72px);height:clamp(48px,7vmin,72px);color:var(--gold);margin-bottom:clamp(1.5rem,4vh,2.5rem);position:relative}
.st__lockup .lockup__logo,.st__lockup .wm__sub,.st__lockup .words{position:relative}
.words--row{font-size:clamp(.95rem,2.6vw,2rem);line-height:1;letter-spacing:.3em;margin-top:clamp(1.75rem,5vh,3.25rem);display:flex;gap:clamp(.9rem,2.6vw,2.4rem);flex-wrap:wrap;justify-content:center;margin-right:-.3em}
.st__ticks{position:absolute;z-index:7;left:var(--m);bottom:calc(clamp(1.25rem,4vh,2.4rem) + var(--safe-b));display:flex;gap:.5rem}
.st__ticks i{width:26px;height:1px;background:var(--slate);transition:background .6s var(--ease)}
.st__ticks i.on{background:var(--gold)}

/* ==========================================================================
   6. INTEGRATED BY DESIGN
   ========================================================================== */
.int{position:relative;isolation:isolate;padding-block:clamp(6rem,14vw,11rem);background:var(--ink)}
.int::before{content:"";position:absolute;inset:0;z-index:-1;will-change:transform;
  background:linear-gradient(to bottom,var(--void) 0%,rgba(10,12,14,.55) 22%,rgba(10,12,14,.72) 100%),url(../img/travertine-faint.jpg) 70% 40%/cover no-repeat}
.int .h2{max-width:20ch}
.int__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:clamp(3rem,7vw,6rem)}
.int__item{position:relative;padding-top:2rem;border-top:1px solid rgba(184,154,94,.5)}
.int__item::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border:1px solid var(--gold);background:var(--ink);transform:rotate(45deg)}
.int__item p{font:300 clamp(1.35rem,2.1vw,1.85rem)/1.3 var(--sans);max-width:15ch}

/* ==========================================================================
   7. WHO WE SERVE
   ========================================================================== */
.serve{position:relative;min-height:92vh;min-height:92svh;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate;padding-block:clamp(6rem,12vw,10rem);background:var(--void)}
.serve .wrap{position:relative;z-index:2}
.serve__frame{position:absolute;inset:clamp(1.5rem,6vw,5rem);pointer-events:none;z-index:1}
.serve__frame i{position:absolute;width:30px;height:30px;border:1px solid var(--gold);opacity:.8}
.serve__frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.serve__frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.serve__frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.serve__frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

/* ==========================================================================
   8. SOLUTIONS  (outcomes first, technical descriptor second; travertine wall behind)
   ========================================================================== */
.sol{position:relative;isolation:isolate;padding-block:clamp(6rem,12vw,10rem);background:var(--void)}
.sol__stone{position:absolute;inset:0;z-index:-1;will-change:transform;
  background:linear-gradient(to bottom,var(--void) 0%,rgba(5,6,7,0) 14%,rgba(5,6,7,0) 86%,var(--void) 100%),linear-gradient(to right,rgba(5,6,7,.86) 0%,rgba(5,6,7,.55) 52%,rgba(5,6,7,.3) 100%),url(../img/travertine-wall.jpg) center/cover no-repeat}
.sol__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.sol__main{grid-column:1 / span 7}
.sol__side{grid-column:9 / span 4;align-self:stretch}
.sol__label{display:block}
.sol__list{list-style:none;padding:0;margin-top:clamp(2rem,5vw,3.5rem)}
.sol__item{position:relative;padding-block:clamp(2rem,4.4vw,3.4rem);border-top:1px solid rgba(255,255,255,.14)}
.sol__item:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.sol__item::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border:1px solid rgba(255,255,255,.4);background:var(--void);transform:rotate(45deg);transition:background .6s var(--ease),border-color .6s var(--ease)}
.sol__out{font:400 clamp(2rem,4.4vw,3.9rem)/1.08 var(--serif);letter-spacing:-.012em;max-width:17ch;text-wrap:balance}
.sol__cap{margin-top:1.1rem;font:400 var(--fs-xs)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
/* once the script is running, the item nearest the middle of the screen is "on"; the others stay readable but quieter */
.sol-live .sol__out,.sol-live .sol__cap{transition:color .7s var(--ease)}
.sol-live .sol__item .sol__out{color:var(--ash)}
.sol-live .sol__item .sol__cap{color:var(--ash)}
.sol-live .sol__item.is-on .sol__out{color:var(--bone)}
.sol-live .sol__item.is-on .sol__cap{color:var(--mist)}
.sol__item.is-on::before{background:var(--gold);border-color:var(--gold)}
.sol__panel{will-change:transform;position:sticky;top:calc(var(--nav-h) + 10vh);aspect-ratio:4 / 5;max-height:70vh;width:100%;margin-inline:auto;border:1px solid rgba(255,255,255,.14);overflow:hidden;background:var(--ink)}
.sol__vis{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.sol__vis.is-on{opacity:1}
.sol__vis img{width:100%;height:100%;object-fit:cover}
.sol__vis::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,6,7,.55),rgba(5,6,7,.16) 55%,rgba(5,6,7,.16))}
.sol__vis .contours{opacity:.3}
.sol__ret{position:absolute;z-index:2;left:50%;top:50%;width:26%;height:auto;transform:translate(-50%,-50%);color:var(--gold)}
.sol__corner{position:absolute;z-index:3;width:14px;height:14px;border:1px solid var(--gold);opacity:.8}
.sol__corner--tl{top:10px;left:10px;border-right:0;border-bottom:0}
.sol__corner--tr{top:10px;right:10px;border-left:0;border-bottom:0}
.sol__corner--bl{bottom:10px;left:10px;border-right:0;border-top:0}
.sol__corner--br{bottom:10px;right:10px;border-left:0;border-top:0}

/* ==========================================================================
   9. CLOSING  (a quiet, resolved stone surface: close enough to understand it)
   ========================================================================== */
.closing{position:relative;padding-block:clamp(7rem,15vw,12rem);text-align:center;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center}
.closing__bg{position:absolute;inset:0;z-index:-1;will-change:transform;background:linear-gradient(to bottom,var(--ink) 0%,rgba(5,6,7,.45) 38%,rgba(5,6,7,.5) 100%),radial-gradient(70% 60% at 50% 46%,rgba(5,6,7,.7),rgba(5,6,7,0) 100%),url(../img/travertine-close.jpg) 35% center/cover no-repeat}
.closing .wrap{display:flex;flex-direction:column;align-items:center}
.closing__actions{display:flex;flex-wrap:wrap;gap:2rem 2.5rem;align-items:center;justify-content:center;margin-top:clamp(3rem,7vw,5rem)}
.closing .ph{margin-inline:auto}

.footer{background:var(--void);border-top:1px solid rgba(255,255,255,.08);padding-block:3rem calc(4.5rem + var(--safe-b));font-size:.85rem;color:var(--ash)}
.footer__grid{display:grid;grid-template-columns:1fr auto auto;gap:2rem 4rem;align-items:start}
.footer__loc{margin-top:.9rem}
.footer__nav,.footer__legal{display:flex;flex-direction:column;gap:.7rem}
.footer a{text-decoration:none;color:var(--mist);transition:color .4s}
.footer a:hover{color:var(--bone)}

/* ==========================================================================
   TABLET / MOBILE
   ========================================================================== */
@media (max-width:980px){
  .nav__links{display:none}
  .nav__toggle{display:block}
  .gt__copy{grid-column:1 / -1}
  .sol__main{grid-column:1 / -1}
  .sol__side{display:none}
  .int__grid{grid-template-columns:1fr;gap:0}
  .int__item{padding-block:1.75rem 2.25rem}
  .int__item p{max-width:20ch}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__grid > div:first-child{grid-column:1 / -1}
}
@media (max-width:700px){
  :root{--nav-base:64px;--stage-len:520svh;--chain-len:400svh;--st-len:300svh}
  .nav__logo{width:150px}
  .nav.is-scrolled .nav__logo{width:124px}
  .nav__cta{display:none}
  .hero{padding-bottom:12vh}
  .hero .words{font-size:17.5vw}
  .cap{bottom:calc(6rem + var(--safe-b));max-width:calc(100% - var(--m) - 3.5rem)}
  .hud__meta{left:var(--m);right:var(--m);align-items:flex-start;text-align:left;bottom:calc(1.1rem + var(--safe-b))}
  .hud__dock{display:none}
  .hud__rail{right:max(12px,var(--safe-r));gap:1.6rem}
  .hud__rail li{font-size:0}
  .hud__rail li::after{width:12px}
  .hud__rail li.on::after{width:24px}
  .hud__cue{bottom:calc(5.2rem + var(--safe-b))}
  .layer::after{background:linear-gradient(to top,rgba(5,6,7,.86),rgba(5,6,7,0) 55%)}
  .chain__head{top:5.25rem}
  .chain__defs{height:10.5rem}
  .def h3{font-size:clamp(1.4rem,8.4vw,2rem);letter-spacing:.09em}
  .rail__l{display:none}
  .rail__node{gap:.5rem}
  .beat__inst{right:auto;left:var(--m);top:calc(var(--nav-h) + 4.5rem);transform:none;align-items:flex-start}
  .beat__inst::before,.beat__inst::after{display:none}
  .beat__word{top:60%;font-size:17.5vw}
  .beat .ph--beat{bottom:calc(4.5rem + var(--safe-b))}
  .gt__bg{transform:none;background:linear-gradient(rgba(5,6,7,.8),rgba(5,6,7,.8)),url(../img/ground.jpg) 70% center/cover no-repeat}
  .footer__grid{grid-template-columns:1fr}
  .review-btn{bottom:auto;left:auto;top:calc(var(--nav-h) + 6px);right:8px}
}
@media (max-width:700px) and (max-height:620px){
  .hud__cue{display:none}   /* very short portrait phones: the larger headline needs the room */
}
@media (max-height:520px){
  .hero{padding-bottom:6vh}
  .hero .words{font-size:clamp(1.9rem,13vh,3.4rem)}
  .hero__line{font-size:clamp(1rem,4.6vh,1.5rem);margin-top:.75rem}
  .hud__cue{display:none}
  .cap{bottom:calc(3.25rem + var(--safe-b));max-width:min(36rem,56vw)}
  .cap__w{font-size:clamp(1.6rem,9vh,2.4rem);margin:.5rem 0}
  .cap__l{font-size:1rem}
  .hud__meta{left:auto;right:var(--m);align-items:flex-end;text-align:right;bottom:calc(.75rem + var(--safe-b));max-width:16rem}
  .hud__rail{gap:1.1rem}
  .chain__head{top:4.5rem}
  .chain__head .h2{font-size:clamp(1.5rem,8vh,2.2rem);margin-top:.5rem}
  .chain__defs{height:6.5rem;margin-bottom:.9rem}
  .def h3{font-size:clamp(1.3rem,8vh,1.9rem);letter-spacing:.1em}
  .def p{font-size:.95rem;margin-top:.5rem}
  .beat__inst{left:auto;right:clamp(1rem,5vw,4rem);top:50%;transform:translateY(-50%);align-items:center}
  .beat__ret{width:clamp(56px,20vh,110px);height:clamp(56px,20vh,110px)}
  .beat__word{top:56%;font-size:clamp(2.6rem,min(30vh,13.5vw),9rem)}
  .st__eyebrow{top:calc(var(--nav-h) + .75rem)}
  .menu{gap:1.5rem}
  .menu nav a{font-size:clamp(1.6rem,8vh,2.4rem)}
}

/* ==========================================================================
   NO JAVASCRIPT: keep real navigation on small screens (the menu button needs JS)
   ========================================================================== */
@media (max-width:980px){
  html.no-js{--nav-base:104px}
  html.no-js .nav{flex-wrap:wrap;align-content:center;row-gap:.2rem}
  html.no-js .nav__links{display:flex;order:3;flex:1 0 100%;flex-wrap:wrap;gap:0 1.5rem;margin-left:0}
  html.no-js .nav__toggle{display:none}
  html.no-js .nav__cta{display:inline-flex}
}
html.no-js .review-btn{display:none}   /* review tool needs JS */

/* ==========================================================================
   STATIC MODE: no JavaScript, or "reduce motion". Same content, no pinning.
   ========================================================================== */
html:is(.no-js,.static) .stage__track,
html:is(.no-js,.static) .chain__track,
html:is(.no-js,.static) .st__track{height:auto}
html:is(.no-js,.static) .stage__sticky{position:relative;height:auto;display:flex;flex-direction:column;overflow:visible}
html:is(.no-js,.static) .stage__layers{position:static}
html:is(.no-js,.static) .hero{order:-1;position:relative;inset:auto;min-height:100vh;min-height:100svh;transform:none;opacity:1;
  background:linear-gradient(to top,rgba(5,6,7,.8),rgba(5,6,7,.1) 60%),url(../img/hero-valley.jpg) center/cover no-repeat}
html:is(.no-js,.static) .step{display:block;position:relative;height:72vh;overflow:hidden}
html:is(.no-js,.static) .layer{opacity:1;visibility:visible;transform:none}
html:is(.no-js,.static) .cap{opacity:1;transform:none}
html:is(.no-js,.static) :is(.hud,.shade){display:none}
html:is(.no-js,.static) :is(.w,.w i,.hero__line){animation:none;opacity:1;transform:none;filter:none}
html:is(.no-js,.static) .chain__sticky{position:relative;height:auto;padding:clamp(5rem,12vh,8rem) 0;overflow:visible}
html:is(.no-js,.static) .chain__terrain,html:is(.no-js,.static) #chainCanvas,html:is(.no-js,.static) .chain__sticky::after,html:is(.no-js,.static) .rail{display:none}
html:is(.no-js,.static) :is(.chain__head,.chain__body){position:relative;inset:auto}
html:is(.no-js,.static) .chain__body{margin-top:3rem}
html:is(.no-js,.static) .chain__defs{height:auto;display:grid;gap:2.5rem}
html:is(.no-js,.static) .def{position:relative;opacity:1;transform:none}
html:is(.no-js,.static) .st__sticky{position:relative;height:auto;overflow:visible}
html:is(.no-js,.static) .st__eyebrow{position:relative;top:auto;left:auto;padding:5rem var(--m) 2rem}
html:is(.no-js,.static) .beat{--o:1;position:relative;height:72vh;overflow:hidden}
html:is(.no-js,.static) .beat__word{top:50%}
html:is(.no-js,.static) .st__lockup{position:relative;inset:auto;opacity:1;min-height:70vh;pointer-events:auto}
html:is(.no-js,.static) .st__ticks{display:none}
html:is(.no-js,.static) .hud__cue{display:none}
html:is(.no-js,.static) .sol__side{display:none}
html:is(.no-js,.static) .sol__main{grid-column:1 / -1}
@media (prefers-reduced-motion:reduce){
  .btn,.btn::before,.btn::after,.nav__links a::after,.nav__logo,.sol-live .sol__out,.sol-live .sol__cap,.sol__vis{transition:none}
}