/* ============================================================
   LIT INTERNATIONAL v2 — page chrome (obeys tokens.css)
   ============================================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html.lenis{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto;}
html,body{margin:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .8s var(--ease-inout);
}
/* scroll-driven section themes: body crossfades between worlds */
body[data-theme="navy"]{background:var(--navy-800);}
a{color:inherit;text-decoration:none;}
::selection{background:oklch(0.56 0.10 264 / 0.22);}
h1,h2,h3,h4,.statement{text-wrap:balance;overflow-wrap:break-word;}
p{text-wrap:pretty;}
[id]{scroll-margin-top:100px;}
img{max-width:100%;height:auto;}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}
:focus:not(:focus-visible){outline:none;}
.skip{
  position:fixed;top:12px;left:12px;z-index:90;
  background:var(--navy-900);color:var(--bone);
  padding:11px 18px;border-radius:var(--r-md);font-weight:600;font-size:.9rem;
  transform:translateY(-160%);transition:transform var(--dur-ui) var(--ease-out);
}
.skip:focus{transform:none;}

.gutter{padding-left:var(--sp-gutter);padding-right:var(--sp-gutter);}
.wrap{max-width:var(--wrap);margin:0 auto;}

/* film grain — one fixed layer, multiply, everywhere */
.grain{
  position:fixed;inset:-50%;z-index:70;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ============ PRELOADER (calibration: pieces land → line draws → lift) ============ */
.loader{
  position:fixed;inset:0;z-index:100;background:var(--navy-900);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:transform .85s var(--ease-inout);
}
.loader.done{transform:translateY(-100%);}
.loader svg{
  width:clamp(90px,14vw,150px);height:auto;overflow:visible;
  transform:scale(1.06);transition:transform 1.2s var(--ease-out);
}
.loader.in svg{transform:scale(1);}
.loader svg > *{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out);}
.loader.in svg > *{opacity:1;transform:none;}
.loader.in svg > *:nth-child(2){transition-delay:.07s;}
.loader.in svg > *:nth-child(3){transition-delay:.14s;}
.loader.in svg > *:nth-child(4){transition-delay:.21s;}
.loader.in svg > *:nth-child(5){transition-delay:.28s;}
.loader .cal{
  width:clamp(90px,14vw,150px);height:2px;border-radius:1px;
  background:var(--brand-gradient);
  transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-inout) .55s;
}
.loader.in .cal{transform:scaleX(1);}
.loader.done svg,.loader.done .cal{
  opacity:0;transform:translateY(-44px);
  transition:transform .5s var(--ease-inout),opacity .45s var(--ease-out);
}

/* ============ SCROLL PROGRESS ============ */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:80;
  background:var(--brand-gradient);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;color:var(--bone);
  transition:background-color .45s var(--ease-out), color .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:20px;padding-bottom:20px;
  transition:padding .45s var(--ease-out);
}
.nav.scrolled{background:oklch(0.975 0.004 255 / 0.88);backdrop-filter:blur(14px);color:var(--ink);box-shadow:var(--shadow-sm);}
.nav.scrolled .wrap{padding-top:12px;padding-bottom:12px;}
body[data-theme="navy"] .nav.scrolled{background:oklch(0.24 0.045 273 / 0.82);color:var(--bone);}
.wordmark{display:flex;align-items:center;gap:13px;}
.logo-mark{
  width:52px;height:34px;flex:none;
  background:url("../img/lit-logo-bone.png") left center / contain no-repeat;
  transition:filter .3s var(--ease-out);
}
.nav.scrolled .logo-mark{background-image:url("../img/lit-logo.png");}
body[data-theme="navy"] .nav.scrolled .logo-mark{background-image:url("../img/lit-logo-bone.png");}
.wordmark small{
  font-weight:500;letter-spacing:.14em;font-size:.68rem;text-transform:uppercase;opacity:.7;
  padding-left:13px;border-left:1px solid currentColor;
}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.3vw,36px);}
.nav-links > a:not(.btn){
  font-size:.88rem;font-weight:550;opacity:.78;position:relative;
  transition:opacity var(--dur-ui) var(--ease-out);
}
.nav-links > a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-5px;height:1.5px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .3s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nav-links > a:not(.btn):hover{opacity:1;}
  .nav-links > a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left;}
}
.lang{display:inline-flex;gap:2px;font-size:.78rem;font-weight:600;}
.lang a{padding:3px 8px;border-radius:var(--r-sm);opacity:.65;transition:opacity var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);}
.lang a.active{opacity:1;background:oklch(0.95 0.006 250 / 0.14);}
.nav.scrolled .lang a.active{background:oklch(0.28 0.03 270 / 0.09);}
.nav-toggle{display:none;}

/* ============ BUTTONS (hover = fill sweep, left to right) ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--font);font-size:.92rem;font-weight:600;
  padding:13px 26px;border-radius:var(--r-md);border:1px solid transparent;
  background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  transition:background-size .5s var(--ease-out), color .3s var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background-size:100% 100%;}
}
.btn:active{transform:scale(.975);transition-duration:.08s;}
.btn-bone{background-color:var(--bone);color:var(--navy-900);background-image:linear-gradient(var(--accent-deep),var(--accent-deep));}
.btn-bone:hover{color:var(--bone);}
.btn-ink{background-color:var(--navy-800);color:var(--bone);box-shadow:var(--shadow-sm);background-image:linear-gradient(var(--accent-deep),var(--accent-deep));}
.btn-line{background-color:transparent;color:var(--bone);border-color:var(--line-on-ink);background-image:linear-gradient(oklch(0.95 0.006 250 / 0.12),oklch(0.95 0.006 250 / 0.12));}
.nav .btn{padding:10px 20px;font-size:.85rem;}
.link-accent{
  color:var(--accent-deep);font-weight:560;
  border-bottom:1px solid oklch(0.47 0.10 266 / 0.4);padding-bottom:2px;
  transition:border-color var(--dur-ui) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .link-accent:hover{border-bottom-color:var(--accent-deep);} }
.on-ink .link-accent,[data-dark] .link-accent{color:var(--peri);border-bottom-color:oklch(0.72 0.065 268 / 0.4);}

/* ============ HERO ============ */
/* every zone paints itself — the body crossfade only tints the nav,
   so no section's text can ever sit on the wrong body color */
[data-bg="paper"]{background:var(--paper);}
.hero{
  position:relative;min-height:100svh;color:var(--bone);
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;isolation:isolate;
  background:var(--navy-800);
}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;}
.hero .scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, oklch(0.29 0.055 273/.95) 0%, oklch(0.29 0.055 273/.6) 46%, oklch(0.29 0.055 273/0) 74%),
             linear-gradient(0deg, oklch(0.29 0.055 273/.6) 0%, transparent 22%);
}
.hero-inner{position:relative;z-index:2;width:100%;padding-top:110px;padding-bottom:150px;}
.kicker{
  font-size:var(--t-label);font-weight:620;letter-spacing:.17em;text-transform:uppercase;
  color:var(--peri);display:flex;align-items:center;gap:12px;
}
.kicker .bar{width:26px;height:2px;background:var(--brand-gradient);flex:none;}
.hero .kicker{margin-bottom:30px;}
h1{
  margin:0;font-family:var(--font-serif);font-weight:var(--disp-weight);
  letter-spacing:var(--disp-tracking);line-height:1.02;
  font-size:var(--t-hero);color:var(--bone);max-width:14ch;
}
/* masked word-rise entrance: each line clips its rising span */
.mask-line{display:block;overflow:hidden;padding-block:.06em;margin-block:-.06em;}
.mask-line > span{display:inline-block;transform:translateY(115%);will-change:transform;}
.hero .lede{
  margin:30px 0 0;color:var(--bone-dim);font-weight:400;
  font-size:var(--t-lede);line-height:1.62;max-width:52ch;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px;}
.hero-trust{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:38px;}
.hero-trust span{display:flex;align-items:center;gap:9px;font-size:.82rem;font-weight:500;color:var(--bone-dim);}
.hero-trust svg{width:14px;height:14px;color:var(--peri);flex:none;}
.hero .lede,.hero-cta,.hero-trust,.hero .kicker{opacity:0;}   /* entrance sets them */
.instrument{position:absolute;left:0;right:0;bottom:0;z-index:2;border-top:1px solid var(--line-on-ink);opacity:0;}
.instrument .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:15px;padding-bottom:15px;
  font-size:var(--t-label);font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--bone-dim);
}
.instrument .status{display:flex;align-items:center;gap:10px;color:var(--bone);}
.instrument .dot{width:7px;height:7px;border-radius:50%;background:var(--peri);flex:none;transition:background-color .4s var(--ease-out);}
.instrument .dot.calm{background:var(--bone);}

/* ============ MARQUEE (velocity-reactive) ============ */
.marquee{
  position:relative;background:var(--paper-2);border-bottom:1px solid var(--line-on-paper);
  overflow:hidden;padding:20px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand-gradient);z-index:2;}
.mtrack{display:flex;align-items:center;gap:2.4rem;white-space:nowrap;width:max-content;will-change:transform;}
.mtrack span{
  font-family:var(--font);font-weight:620;letter-spacing:.15em;text-transform:uppercase;
  font-size:.8rem;color:var(--ink);
  padding-right:2.4rem;position:relative;
}
.mtrack span::after{
  content:"";position:absolute;right:-4px;top:50%;width:7px;height:7px;
  transform:translateY(-50%) rotate(45deg);background:var(--accent);opacity:.75;
}

/* ============ SECTION GRAMMAR ============ */
section{padding-top:var(--sp-section);padding-bottom:var(--sp-section);}
section.flush-top{padding-top:0;}
.sec-head{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,64px);
  align-items:start;margin-bottom:clamp(52px,6.5vw,92px);
}
.sec-head.no-num{grid-template-columns:1fr;}
.sec-head.no-body{margin-bottom:0;}
.sec-num{
  font-family:var(--font-serif);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(3.6rem,8.5vw,7rem);line-height:.9;user-select:none;
  color:oklch(0.28 0.03 270 / 0.1);position:relative;will-change:transform;
}
.sec-num::after{content:"";position:absolute;left:4px;bottom:-12px;width:44px;height:3px;background:var(--brand-gradient);}
.on-ink .sec-num{color:oklch(0.95 0.006 250 / 0.1);}
.sec-head h2{
  margin:0;font-family:var(--font-serif);font-weight:var(--disp-weight);
  letter-spacing:var(--disp-tracking);line-height:1.06;
  font-size:var(--t-h2);max-width:19ch;
}
.standfirst{margin:22px 0 0;color:var(--ink-mute);font-weight:420;font-size:var(--t-lede);line-height:1.58;max-width:var(--measure);}
.on-ink .standfirst{color:var(--bone-dim);}
.on-ink h2,.on-ink h3{color:var(--bone);}
.on-ink .alt-note{color:var(--bone-dim);}

/* ============ COMPARE (CAPEX vs OPEX) ============ */
.compare{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,56px);margin-top:8px;}
@media(min-width:720px){.compare{grid-template-columns:1fr 1fr;}}
.compare .side{border-top:2px solid var(--line-on-paper);padding-top:22px;}
.compare .side.opex{border-top-color:var(--accent-deep);}
.compare .tag{font-size:var(--t-label);font-weight:620;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);}
.compare .side.opex .tag{color:var(--accent-deep);}
.compare h3{margin:12px 0 16px;font-family:var(--font-serif);font-weight:var(--disp-weight);font-size:var(--t-h3);letter-spacing:var(--disp-tracking);}
.compare ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;color:var(--ink-mute);}
.compare li{padding-left:20px;position:relative;line-height:1.5;}
.compare li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:2px;background:var(--ink-mute);}
.compare .side.opex li::before{background:var(--accent-deep);width:10px;height:3px;}

/* ============ STACKING PANELS ============ */
.stack{display:block;}
.panel{
  position:sticky;top:calc(88px + var(--k));
  min-height:clamp(400px,54vh,520px);
  border-radius:var(--r-xl);padding:clamp(26px,3.4vw,52px);
  margin-bottom:clamp(18px,2.4vw,30px);
  color:var(--bone);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--shadow-lg);transform-origin:center top;will-change:transform;
}
.panel.depth-a{background:var(--navy-800);}
.panel.depth-b{background:var(--navy-700);}
.panel .meta{display:flex;gap:12px;margin-bottom:auto;}
.pill{
  font-size:var(--t-label);font-weight:620;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--line-on-ink);border-radius:var(--r-pill);
  padding:7px 15px;color:var(--bone-dim);
}
.panel h3{
  margin:clamp(26px,4vh,42px) 0 0;font-family:var(--font-serif);font-weight:var(--disp-weight);
  letter-spacing:var(--disp-tracking);line-height:1.03;
  font-size:clamp(1.9rem,4.2vw,3.4rem);color:var(--bone);max-width:15ch;
}
.panel .who{margin:16px 0 0;font-size:var(--t-label);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--peri);}
.panel p.body{margin:14px 0 0;color:var(--bone-dim);max-width:54ch;font-size:clamp(.98rem,1.15vw,1.06rem);line-height:1.62;}
.panel .go{
  margin-top:clamp(24px,3.6vh,38px);display:inline-flex;align-items:center;gap:10px;width:fit-content;
  font-size:.9rem;font-weight:600;color:var(--bone);
  padding-bottom:4px;border-bottom:1px solid var(--line-on-ink);
  transition:color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), gap var(--dur-ui) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .panel .go:hover{color:var(--peri);border-color:oklch(0.72 0.065 268 / 0.55);gap:15px;}
}
/* per-lever instrument dials: one shared ring + tick grammar, a precise
   mechanism inside each — constructed arcs only, nothing freehand */
.panel .dial{
  position:absolute;top:50%;right:clamp(34px,6vw,110px);transform:translateY(-50%);
  width:clamp(210px,23vw,320px);color:var(--bone);opacity:.5;pointer-events:none;
}
.panel .dial svg{display:block;width:100%;height:auto;}
.panel .dial .hl{color:var(--peri);}
@media (max-width:1023px){ .panel .dial{display:none;} }

/* ============ INSTRUMENT II · THE BASIN ============ */
.basin-sec .sec-head{margin-bottom:clamp(36px,4.5vw,60px);}
.basin-sec h2{color:var(--bone);}
.basin{
  margin:0;position:relative;overflow:hidden;
  height:clamp(420px,72vh,720px);
  border-radius:var(--r-xl);border:1px solid var(--line-on-ink);
  background:
    radial-gradient(120% 130% at 50% -20%, oklch(0.34 0.055 271/.5), transparent 55%),
    var(--navy-900);
  box-shadow:var(--shadow-lg);
}
.basin canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.basin-chrome{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,2.4vw,28px);
  border-top:1px solid var(--line-on-ink);
  font-size:var(--t-label);font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--bone-dim);
}
.basin-chrome .status{display:flex;align-items:center;gap:10px;color:var(--bone);}
.basin-chrome .dot{width:7px;height:7px;border-radius:50%;background:var(--peri);flex:none;transition:background-color .4s var(--ease-out);}
.basin-chrome .dot.calm{background:var(--bone);}
@media (max-width:820px){ .basin{height:64vh;} .basin-chrome .mode{display:none;} }

/* ============ SIGNATURE · THE MARK (logo block) ============ */
.mark-scroll{position:relative;height:280vh;}
.mark-viewport{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.mark-stage{width:min(72vw, 118vh);max-width:1080px;position:relative;
  translate:var(--mx,0) var(--my,0);}   /* cursor lean composes with the scrub transform */
.mark-stage svg{width:100%;height:auto;display:block;overflow:visible;}
/* idle drift: CSS on the <g> wrappers (GSAP owns the rects) */
.mark-stage .drift{transform-box:fill-box;transform-origin:center;}
.marked .drift{animation:drift 11s var(--ease-inout) infinite alternate;}
.marked .drift:nth-of-type(2){animation-duration:13s;animation-delay:-4s;}
.marked .drift:nth-of-type(3){animation-duration:9.5s;animation-delay:-2s;}
.marked .drift:nth-of-type(4){animation-duration:12.5s;animation-delay:-6s;}
.marked .drift:nth-of-type(5){animation-duration:10s;animation-delay:-8s;}
@keyframes drift{
  from{transform:translateY(-0.45%) }
  to  {transform:translateY( 0.45%) }
}

/* ============ RULED COLUMNS ============ */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(28px,4vw,60px);}
.col{border-top:1px solid var(--ink);padding-top:22px;}
.col .kw{display:flex;align-items:baseline;gap:14px;font-family:var(--font-serif);font-weight:var(--disp-weight);letter-spacing:var(--disp-tracking);font-size:var(--t-h3);}
.col .kw i{font-style:normal;font-family:var(--font);font-size:.76rem;font-weight:620;letter-spacing:.1em;color:var(--accent-deep);}
.col .sub{margin:6px 0 0;font-size:var(--t-label);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);}
.col p{margin:15px 0 0;color:var(--ink-mute);max-width:40ch;}

/* ============ STAT BAND ============ */
.statband{color:var(--bone);}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(36px,5vw,80px);}
.stat .v{
  font-family:var(--font-serif);font-weight:var(--disp-weight);
  font-size:clamp(3rem,6.4vw,5rem);letter-spacing:-.02em;line-height:1;
  color:var(--bone);font-variant-numeric:tabular-nums;
}
.stat .k{margin-top:16px;font-size:var(--t-label);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--bone-dim);}

/* ============ SEGMENTS ============ */
.segments{display:grid;grid-template-columns:1fr;gap:18px;}
@media(min-width:820px){.segments{grid-template-columns:repeat(3,1fr);}}
.seg{border-top:2px solid var(--navy-700);padding-top:22px;display:flex;flex-direction:column;}
.seg .n{font-family:var(--font-serif);color:var(--accent-deep);font-size:.95rem;}
.seg h3{margin:10px 0;font-family:var(--font-serif);font-weight:var(--disp-weight);font-size:var(--t-h3);letter-spacing:var(--disp-tracking);line-height:1.12;}
.seg p{margin:0 0 18px;color:var(--ink-mute);max-width:36ch;flex:1;}
.seg .go{
  display:inline-flex;align-items:center;gap:8px;width:fit-content;
  font-size:.85rem;font-weight:600;color:var(--accent-deep);
  border-bottom:1px solid oklch(0.47 0.10 266 / 0.4);padding-bottom:3px;
  transition:gap var(--dur-ui) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .seg .go:hover{gap:13px;} }

/* ============ INK BAND ============ */
/* navy zones paint themselves: their bone content never sits on a paper body */
.inkband{color:var(--bone);background:var(--navy-800);}
.basin-sec{background:var(--navy-800);}
.statement{
  margin:0;font-family:var(--font-serif);font-weight:var(--disp-weight);
  letter-spacing:var(--disp-tracking);line-height:1.16;
  font-size:clamp(1.7rem,3.6vw,3rem);max-width:28ch;
}
.statement em{font-style:normal;color:var(--peri);}
.inkband .note{margin:26px 0 0;color:var(--bone-dim);max-width:var(--measure);}
.go-row{margin-top:38px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;}

/* ============ RULED ROWS ============ */
.rows{border-top:1px solid var(--line-on-paper);}
a.row{
  display:grid;grid-template-columns:1fr auto;gap:clamp(18px,3vw,48px);align-items:center;
  padding:clamp(22px,3vw,34px) 10px;border-bottom:1px solid var(--line-on-paper);
  position:relative;isolation:isolate;
}
/* hover surface bleeds past the column so the arrow never touches its edge */
a.row::before{
  content:"";position:absolute;inset:0 calc(-1*clamp(20px,2.8vw,44px));z-index:-1;
  background:var(--paper-2);border-radius:var(--r-md);
  opacity:0;transition:opacity .35s var(--ease-out);
}
a.row .title{font-family:var(--font-serif);font-weight:var(--disp-weight);letter-spacing:var(--disp-tracking);font-size:clamp(1.2rem,2vw,1.65rem);transition:color var(--dur-ui) var(--ease-out);}
a.row .arw{font-size:1.3rem;color:var(--ink-mute);transition:transform var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  a.row:hover::before{opacity:1;}
  a.row:hover .title{color:var(--accent-deep);}
  a.row:hover .arw{color:var(--accent-deep);transform:translateX(8px);}
}

/* ============ CTA / MISC ============ */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:40px;}
.alt-note{color:var(--ink-mute);font-size:.92rem;}

/* ============ CONSULTATION FORM ============ */
.contact-sec{background:var(--navy-800);}
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,84px);}
@media (min-width:900px){ .contact-grid{grid-template-columns:1fr 1.05fr;align-items:start;} }
.consult{
  border:1px solid var(--line-on-paper);border-radius:var(--r-lg);
  background:oklch(0.99 0.002 255);box-shadow:var(--shadow-sm);
  padding:clamp(24px,3vw,40px);
  display:flex;flex-direction:column;gap:24px;
}
.fs-label,.field > span{
  display:block;font-size:var(--t-label);font-weight:620;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:11px;
}
.opts{display:flex;flex-wrap:wrap;gap:8px;}
.opt input{position:absolute;opacity:0;width:1px;height:1px;}
.opt span{
  display:inline-flex;align-items:center;padding:9px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line-on-paper);font-size:.85rem;font-weight:560;color:var(--ink-mute);
  cursor:pointer;user-select:none;
  transition:background-color .2s var(--ease-out), color .2s var(--ease-out),
             border-color .2s var(--ease-out), transform .15s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .opt:hover span{border-color:var(--accent-deep);color:var(--accent-deep);} }
.opt span:active{transform:scale(.95);}
.opt input:checked + span{background:var(--navy-800);border-color:var(--navy-800);color:var(--bone);}
.opt input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px;}
.field input,.field textarea{
  width:100%;font:inherit;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line-on-paper);border-radius:0;
  padding:6px 2px 11px;resize:vertical;
  transition:border-color .25s var(--ease-out);
}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent-deep);}
.field ::placeholder{color:oklch(0.46 0.02 265 / 0.5);}
.consult-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:4px;}
.sticky-cta{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:55;
  opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;
  transition:opacity .4s var(--ease-out), transform .45s var(--ease-out);
  box-shadow:var(--shadow-lg);background:var(--navy-800);color:var(--bone);
}
.sticky-cta.show{opacity:1;transform:none;pointer-events:auto;}

/* ============ FOOTER ============ */
footer{background:var(--navy-900);color:var(--bone-dim);font-size:.88rem;}
footer .top{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(28px,4vw,56px);padding-top:72px;padding-bottom:56px;}
footer h4{margin:0 0 16px;font-size:var(--t-label);font-weight:620;letter-spacing:.13em;text-transform:uppercase;color:var(--bone);}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
footer ul a{transition:color var(--dur-ui) var(--ease-out);}
@media (hover:hover) and (pointer:fine){ footer ul a:hover{color:var(--bone);} }
footer .footer-blurb{margin:14px 0 0;max-width:30ch;}
footer .base{border-top:1px solid var(--line-on-ink);padding-top:24px;padding-bottom:28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.8rem;}

/* ============ REVEAL PRIMITIVE (class-based; GSAP only toggles) ============ */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity var(--dur-reveal) var(--ease-out), transform .8s var(--ease-out);}
[data-reveal].is-visible{opacity:1;transform:none;}
[data-reveal][data-delay="1"]{transition-delay:.08s;}
[data-reveal][data-delay="2"]{transition-delay:.16s;}
[data-reveal][data-delay="3"]{transition-delay:.24s;}

/* ============ SUBPAGE HERO ============ */
.page-hero{
  background:var(--navy-800);color:var(--bone);
  padding-top:clamp(150px,20vh,220px);padding-bottom:clamp(56px,8vh,96px);
}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);max-width:16ch;}
.page-hero .kicker{margin-bottom:26px;}
.page-hero .who{margin:18px 0 0;font-size:var(--t-label);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--peri);}
.page-hero .lede{margin:24px 0 0;color:var(--bone-dim);font-size:var(--t-lede);line-height:1.6;max-width:56ch;}

/* ============ METHOD LIST ============ */
.method-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-on-paper);}
.method-list li{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,44px);align-items:baseline;
  padding:clamp(22px,2.8vw,32px) 0;border-bottom:1px solid var(--line-on-paper);
}
.method-list .step{font-family:var(--font-serif);color:var(--accent-deep);font-size:1.05rem;min-width:3ch;}
.method-list h3{margin:0;font-family:var(--font-serif);font-weight:var(--disp-weight);font-size:clamp(1.3rem,2.2vw,1.8rem);letter-spacing:var(--disp-tracking);line-height:1.1;}
.method-list p{margin:8px 0 0;color:var(--ink-mute);max-width:60ch;}

/* ============ COMPETENCIES GRID ============ */
.comps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line-on-paper);border:1px solid var(--line-on-paper);border-radius:var(--r-lg);overflow:hidden;}
.comp{background:var(--paper);padding:clamp(22px,2.4vw,30px);}
.comp .n{font-family:var(--font-serif);color:var(--accent-deep);font-size:.95rem;}
.comp p{margin:10px 0 0;font-family:var(--font-serif);font-weight:var(--disp-weight);font-size:clamp(1.05rem,1.5vw,1.25rem);letter-spacing:var(--disp-tracking);line-height:1.2;}

/* ============ ESTIMATOR ============ */
.estimator{border:1px solid var(--line-on-paper);border-radius:var(--r-lg);background:oklch(0.99 0.002 255);box-shadow:var(--shadow-sm);padding:clamp(24px,3vw,44px);}
.est-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px);}
@media (min-width:880px){ .est-grid{grid-template-columns:1.15fr 1fr;align-items:center;} }
.efield{margin-bottom:26px;}
.efield:last-child{margin-bottom:0;}
.efield .top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px;}
.efield label{font-size:var(--t-label);font-weight:620;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);}
.efield output{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:2px;border-radius:1px;background:var(--line-on-paper);outline:none;}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-deep);border:0;cursor:grab;transition:transform .15s var(--ease-out);}
input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.2);}
input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent-deep);border:0;cursor:grab;}
input[type="range"]:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.est-out .label{font-size:var(--t-label);font-weight:620;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);}
.est-out .big{font-family:var(--font-serif);font-weight:var(--disp-weight);font-size:clamp(2.6rem,5vw,4rem);line-height:1.05;margin-top:10px;color:var(--accent-deep);font-variant-numeric:tabular-nums;}
.est-out .sub{margin:12px 0 0;color:var(--ink-mute);max-width:34ch;}
.est-out .row2{display:flex;gap:clamp(24px,4vw,48px);margin-top:26px;flex-wrap:wrap;}
.est-out .row2 .v{font-family:var(--font-serif);font-weight:var(--disp-weight);font-size:1.5rem;font-variant-numeric:tabular-nums;}
.est-out .row2 .k{margin-top:6px;font-size:var(--t-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);}
.est-note{margin:18px 0 0;font-size:.82rem;color:var(--ink-mute);}

/* ============ PROSE / LEGAL ============ */
.prose{max-width:70ch;color:var(--ink);line-height:1.7;}
.prose p{margin:0 0 18px;}
.prose b{font-weight:650;}

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--line-on-paper);}
.faq details{border-bottom:1px solid var(--line-on-paper);}
.faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:clamp(20px,2.6vw,28px) 44px clamp(20px,2.6vw,28px) 0;
  font-family:var(--font-serif);font-weight:var(--disp-weight);letter-spacing:var(--disp-tracking);
  font-size:clamp(1.15rem,1.9vw,1.5rem);transition:color var(--dur-ui) var(--ease-out);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;translate:0 -70%;
  border-right:2px solid var(--accent-deep);border-bottom:2px solid var(--accent-deep);
  rotate:45deg;transition:rotate .3s var(--ease-out), translate .3s var(--ease-out);
}
.faq details[open] summary::after{rotate:225deg;translate:0 -30%;}
@media (hover:hover) and (pointer:fine){ .faq summary:hover{color:var(--accent-deep);} }
.faq .a{padding:0 0 26px;color:var(--ink-mute);max-width:65ch;line-height:1.65;}
.faq .a p{margin:0 0 12px;}
.faq .a p:last-child{margin-bottom:0;}

/* ============ COMPANY BLOCK (contact page) ============ */
.company{margin-top:clamp(36px,5vw,60px);display:flex;flex-direction:column;gap:8px;color:var(--bone-dim);}
.company b{color:var(--bone);font-weight:620;}

/* ============ LONG-WORD LANGUAGES ============ */
/* Russian (and German compounds) run long: smaller display sizes, wider
   measures, dictionary hyphenation instead of raw mid-word breaks */
html[lang="ru"] h1,html[lang="ru"] h2,html[lang="ru"] h3,
html[lang="de"] h1,html[lang="de"] h2,html[lang="de"] h3{hyphens:auto;}
html[lang="ru"] .hero h1{font-size:calc(var(--t-hero)*0.82);max-width:none;}
html[lang="ru"] .page-hero h1{font-size:clamp(2.1rem,4.9vw,3.9rem);max-width:22ch;}
html[lang="ru"] .sec-head h2{font-size:calc(var(--t-h2)*0.88);max-width:26ch;}
html[lang="ru"] .panel h3{font-size:clamp(1.6rem,3.5vw,2.8rem);max-width:22ch;}
html[lang="ru"] .statement{font-size:clamp(1.5rem,3.1vw,2.6rem);max-width:36ch;}
html[lang="ru"] .col .kw{font-size:calc(var(--t-h3)*0.85);}
html[lang="ru"] .seg h3{font-size:calc(var(--t-h3)*0.85);}
html[lang="ru"] .comp p{font-size:clamp(0.98rem,1.3vw,1.15rem);}
html[lang="ru"] .method-list h3{font-size:clamp(1.2rem,2vw,1.6rem);}
html[lang="ru"] .faq summary{font-size:clamp(1.05rem,1.7vw,1.35rem);}
html[lang="ru"] .compare h3{font-size:calc(var(--t-h3)*0.88);}

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  .nav-links{display:none;}
  .nav-links.open{
    display:flex;position:absolute;top:100%;left:12px;right:12px;
    flex-direction:column;align-items:flex-start;gap:18px;padding:24px;
    background:var(--paper);color:var(--ink);
    border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  }
  .nav-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;}
  /* bone over the hero, accent blue once the nav has scrolled onto paper */
  .nav.scrolled .nav-toggle{color:var(--accent-deep);}
  body[data-theme="navy"] .nav.scrolled .nav-toggle{color:var(--bone);}
  .nav-toggle span{width:22px;height:2px;background:currentColor;display:block;border-radius:2px;
    transition:transform .3s var(--ease-out), opacity .2s var(--ease-out);}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .sec-head{grid-template-columns:1fr;gap:10px;}
  .panel{min-height:auto;}
  .instrument .mode{display:none;}
  .mark-stage{width:88vw;}
  .mark-scroll{height:220vh;}
}
@media (max-width:560px){
  .hero-cta .btn{flex:1 1 100%;justify-content:center;}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1;transform:none;transition:none;}
  .mask-line > span{transform:none;}
  .hero .lede,.hero-cta,.hero-trust,.hero .kicker,.instrument{opacity:1;}
  .marked .drift{animation:none;}
  .loader{display:none;}
  .panel{position:static;}
  body{transition:none;}
}