/* =========================================================================
   Alethia — replica study of alethia.earth, rebuilt for zakharov.studio.
   Three scroll-driven colour modes (forest / white / black) + lime accent.
   ========================================================================= */
:root{
  --forest:#0F1F10; --forest-2:#16301A; --forest-3:#1D3D22;
  --black:#000000; --white:#FFFFFF; --bone:#F4F5F1;
  --lime:#C9F56B; --lime-2:#B4E64F; --lime-ink:#3F5A12;
  --ink-dark:#0B1A0C; --ink-mid:#2E4630;
  --on-dark:#EDF1E9; --on-dark-2:#A9B7A6; --on-dark-3:#8C9C8A;
  --on-black-2:#B0B0B0;
  --edge-d:rgba(237,241,233,.16); --edge-l:rgba(15,31,16,.14);

  --font:"Familjen Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --shell:clamp(18px,3.4vw,52px);
  --maxw:1400px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;background:var(--forest);color:var(--on-dark);
  transition:background-color .7s var(--ease),color .7s var(--ease)}
body[data-mode="white"]{background:var(--white);color:var(--ink-dark)}
body[data-mode="black"]{background:var(--black);color:var(--white)}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2.5px solid var(--lime);outline-offset:3px;border-radius:4px}
::selection{background:var(--lime);color:var(--ink-dark)}

h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1.04}
h1{font-size:clamp(2.5rem,5.6vw,4.5rem);letter-spacing:-.04em;line-height:1.02}
h2{font-size:clamp(1.7rem,3.4vw,2.85rem);letter-spacing:-.032em;line-height:1.14}
h3{font-size:clamp(1.05rem,1.5vw,1.24rem);letter-spacing:-.024em;line-height:1.28}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--shell)}
.kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;line-height:1.65;
  font-weight:400}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase}

/* the lime pill that labels each chapter */
.pill{display:inline-block;background:var(--lime);color:var(--ink-dark);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;padding:5px 10px;border-radius:3px;font-weight:500}

/* circular lime arrow */
.circ{width:38px;height:38px;border-radius:999px;background:var(--lime);color:var(--ink-dark);display:grid;
  place-items:center;flex:none;transition:transform .38s var(--ease),background .3s}
.circ svg{width:15px;height:15px}
a:hover>.circ,button:hover>.circ,.card:hover .circ{transform:translateX(4px);background:var(--white)}

.btn{display:inline-flex;align-items:center;gap:12px;border:1px solid currentColor;border-radius:3px;
  padding:7px 7px 7px 18px;text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;cursor:pointer;background:none;
  transition:background .32s var(--ease),color .32s var(--ease),border-color .32s var(--ease)}
.btn:hover{background:var(--lime);border-color:var(--lime);color:var(--ink-dark)}
.btn:hover .circ{background:var(--ink-dark);color:var(--lime)}

/* ---- nav ------------------------------------------------------------- */
.nav{position:fixed;inset:0 0 auto;z-index:80;display:flex;align-items:center;gap:26px;
  padding:20px var(--shell);transition:color .7s var(--ease),transform .5s var(--ease),opacity .35s var(--ease)}
.nav[data-hidden="1"]{transform:translateY(-112%);opacity:0;pointer-events:none;visibility:hidden}
.nav:focus-within{transform:none;opacity:1;pointer-events:auto;visibility:visible}
.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:500;letter-spacing:-.03em;
  text-decoration:none}
.brand svg{width:23px;height:23px;flex:none}
.nav-links{display:flex;gap:26px;list-style:none;margin:0 auto;padding:0}
.nav-links a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;display:inline-flex;align-items:center;gap:5px;min-height:26px;padding-block:5px;opacity:.86;transition:opacity .25s}
.nav-links a:hover{opacity:1}
.nav-links svg{width:9px;height:9px}
.navtoggle{display:none;border:1px solid currentColor;background:none;color:inherit;border-radius:3px;padding:7px;
  cursor:pointer;margin-left:auto}
.navtoggle svg{width:19px;height:19px;display:block}

/* ---- hero ------------------------------------------------------------ */
.hero{background:var(--forest);color:var(--on-dark);position:relative}
.hero-stage{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:120px 0 90px;overflow:hidden}
/* scrubbed sequence on: the hero grows a scroll runway and the stage pins across it.
   data-seq="scrub" = full fly-in · "still" = one composed frame · absent = float plates. */
.hero[data-seq="scrub"]{height:200svh}
.hero[data-seq="scrub"] .hero-stage{position:sticky;top:0;height:100svh;min-height:0}
.hero[data-seq] .floats{display:none}
/* The sequence is a page-level backdrop, not a hero child. It stays fixed
   behind the content, so the frame the fly-in lands on carries straight on
   underneath the vision section instead of the hero cutting away — the same
   thing alethia.earth does, whose canvas is fixed for the whole document.
   `.seq-local` is the reduced-motion placement, which stays inside the hero. */
/* The ambient scene the fly-in dissolves into. It is a separate fixed layer
   that sits *below* the sequence — both are z-index 0 at body level, so tree
   order decides, and .scene is inserted first. As the sequence's alpha iris
   opens, this is what comes through it. */
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--forest);pointer-events:none;
  transition:opacity .55s var(--ease)}
.scene[data-off="1"]{opacity:0}
.scene video,.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* No background of its own: the last third of the sequence is transparent, and
   a colour here would block the scene instead of letting it through. */
.seq{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  transition:opacity .55s var(--ease)}
.seq-local{position:absolute;background:var(--forest)}
.seq[data-off="1"]{opacity:0}
.seq img,.seq canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.seq canvas{opacity:0;transition:opacity .6s ease}
.seq canvas[data-ready="1"]{opacity:1}
/* The poster only stands in until the first frame is drawn. It has to go after
   that: it is an opaque frame sitting inside the same layer, so once the tail
   turns transparent it would show through the iris instead of the scene. */
.seq img{transition:opacity .5s ease}
.seq[data-painted="1"] img{opacity:0}
/* The fly-in ends on brightly lit moss; the headline is pinned over it the
   whole way. This scrim holds the left column dark enough to read against
   while leaving the island side of the frame untouched. It lifts once the
   hero is gone, because vision's left column is *dark* text on the backdrop. */
.seq::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:var(--scrim,1);
  background:linear-gradient(100deg,rgba(15,31,16,.93) 0%,rgba(15,31,16,.74) 28%,
    rgba(15,31,16,.22) 54%,rgba(15,31,16,0) 74%)}
/* hero and vision go transparent so the one backdrop reads through both */
html[data-backdrop] .hero{background:transparent}
html[data-backdrop] .vision-media img{display:none}

/* The second copy block, carried over the fly-in the way the reference swaps
   its "OUR VISION" card in mid-scrub. Present only while the scrub is live —
   without it there is no scroll to drive the crossfade, and a static duplicate
   would just collide with the H1. */
.seq-copy{position:absolute;inset:0;z-index:4;display:none;place-items:center;text-align:center;
  padding-inline:var(--shell);pointer-events:none;opacity:0}
html[data-backdrop] .seq-copy{display:grid}
.seq-copy .sc-in{max-width:54ch}
.seq-copy h2{color:var(--white);font-size:clamp(1.7rem,3.5vw,3rem);letter-spacing:-.03em;
  line-height:1.1;margin:18px 0 0;text-shadow:0 2px 26px rgba(0,0,0,.45)}
.seq-copy p{color:var(--on-dark);opacity:.86;margin:16px auto 0;max-width:42ch;font-size:15px;
  text-shadow:0 1px 14px rgba(0,0,0,.5)}
.hero-in{position:relative;z-index:3;width:100%}
.hero h1{max-width:15ch;margin-bottom:34px}
.hero .btn{color:var(--on-dark)}
.floats{position:absolute;inset:0;z-index:1;pointer-events:none}
.floats .fl{position:absolute;display:block;will-change:transform}
.floats .fl img{width:100%;height:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.55))}
.f1{width:min(46vw,620px);right:6%;top:14%}
.f2{width:min(15vw,190px);left:6%;bottom:22%}
.f3{width:min(20vw,260px);right:2%;bottom:6%}
@keyframes bobA{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-22px,0) rotate(1.4deg)}}
@keyframes bobB{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(6px,16px,0) rotate(-2deg)}}
.js .f1 img{animation:bobA 15s ease-in-out infinite}
.js .f2 img{animation:bobB 12s ease-in-out infinite}
.js .f3 img{animation:bobA 18s ease-in-out 1.5s infinite reverse}
.hero-foot{position:absolute;inset:auto var(--shell) 46px;z-index:3;display:flex;align-items:flex-end;
  justify-content:space-between;gap:24px;flex-wrap:wrap}
.hero-foot p{max-width:44ch;margin:0;font-size:15.5px;line-height:1.5;color:var(--on-dark)}
.scrollcue{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-2)}
.scrollcue svg{width:15px;height:15px}
@keyframes cueDrop{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(4px);opacity:1}}
.js .scrollcue svg{animation:cueDrop 2.4s ease-in-out infinite}

/* ---- vision: full-bleed terrain + hotspots --------------------------- */
.vision{position:relative;min-height:100svh;display:flex;align-items:flex-start;padding:110px 0 0;overflow:hidden}
.vision-media{position:absolute;inset:0;z-index:0}
.vision-media img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
/* Ramps in from fully transparent instead of starting at 72%: the backdrop now
   runs continuously from the hero into this section, and a gradient that began
   at full strength drew a hard horizontal seam right across it. */
.vision-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(210,216,208,0) 0%,rgba(210,216,208,.70) 13%,
    rgba(160,172,158,.34) 40%,transparent 66%)}
.vision-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
  gap:clamp(20px,4vw,60px);width:100%}
.vision .kick{color:var(--ink-dark);opacity:.72}
.vision h2{color:var(--white);text-shadow:0 2px 20px rgba(0,0,0,.28);max-width:22ch;font-size:clamp(1.5rem,2.9vw,2.4rem)}
.hotspots{position:absolute;inset:0;z-index:3;pointer-events:none}
.hot{position:absolute;display:flex;align-items:center;gap:10px;pointer-events:auto}
.hot .dot{width:38px;height:38px;border-radius:999px;background:var(--lime);display:grid;place-items:center;flex:none;
  position:relative}
.hot .dot::after{content:"";position:absolute;inset:0;border-radius:999px;border:1.5px solid var(--lime)}
.js .hot .dot::after{animation:ping 2.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(2);opacity:0}}
.hot .dot svg{width:16px;height:16px;color:var(--ink-dark)}
.hot .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.5;
  color:var(--white);text-shadow:0 1px 8px rgba(0,0,0,.7);white-space:nowrap}
.h1p{left:28%;top:60%}.h2p{right:24%;top:59%}.h3p{left:4%;bottom:22%}.h4p{left:58%;bottom:15%}

/* ---- solutions (white mode) ------------------------------------------ */
.solutions{background:var(--white);color:var(--ink-dark);padding:clamp(70px,9vw,140px) 0 clamp(70px,9vw,130px)}
.sol-head{margin-bottom:clamp(46px,7vw,96px)}
.sol-head .pill{margin-bottom:26px}
.sol-head h2{max-width:16ch;font-size:clamp(2rem,4.4vw,3.5rem)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.2vw,30px)}
.card{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/11;display:block;text-decoration:none;
  color:var(--white)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover img{transform:scale(1.045)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,transparent 34%,
  transparent 48%,rgba(0,0,0,.72) 100%)}
.card-top{position:absolute;inset:22px 22px auto;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px}
.card-top .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase}
.card-cap{position:absolute;inset:auto 22px 22px;z-index:2;font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:500;
  letter-spacing:-.028em;line-height:1.2;max-width:20ch;margin:0}

/* ---- technology (black mode) ----------------------------------------- */
.tech{background:var(--black);color:var(--white);position:relative;padding:clamp(80px,11vw,170px) 0;overflow:hidden;text-align:center}
.dome{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(78vw,780px);aspect-ratio:1;
  z-index:0;pointer-events:none}
/* the render is on pure black, same as --black, so it needs no masking */
.dome img{width:100%;height:100%;display:block;object-fit:contain}
.tech-in{position:relative;z-index:2}
.tech .pill{margin-bottom:24px}
.tech h2{color:var(--white);font-size:clamp(2rem,4.6vw,3.7rem);max-width:18ch;margin-inline:auto}
.tech .sub{color:var(--on-black-2);max-width:44ch;margin:26px auto 0;font-size:15px}
.tech .down{margin-top:34px;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;
  border:1.5px solid var(--lime);color:var(--lime);text-decoration:none;transition:background .3s,color .3s}
.tech .down:hover{background:var(--lime);color:var(--black)}
.tech .down svg{width:16px;height:16px}

/* ---- MRV + blockchain split ------------------------------------------ */
.split{background:var(--black);color:var(--white);position:relative;padding:clamp(60px,8vw,120px) 0;overflow:hidden}
.split-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.split .pill{margin-bottom:22px}
.split h2{max-width:16ch}
.split p{max-width:46ch;margin-top:22px;color:var(--on-black-2);font-size:15px}
.split-media{border-radius:14px;overflow:hidden;aspect-ratio:4/3}
.split-media img,.split-media video{width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.72) saturate(.9)}
.ledger{width:100%;border:1px solid var(--edge-d);border-radius:12px;border-collapse:separate;border-spacing:0;
  overflow:hidden;font-family:var(--mono);font-size:11.5px;table-layout:fixed}
.ledger caption{position:absolute;left:-9999px}
.ledger th{text-align:left;padding:11px 15px;border-bottom:1px solid var(--edge-d);color:var(--on-black-2);
  letter-spacing:.1em;text-transform:uppercase;font-size:9.5px;font-weight:400}
.ledger td{padding:11px 15px;border-bottom:1px solid var(--edge-d);vertical-align:middle;white-space:nowrap;color:var(--white)}
.ledger tr:last-child td{border-bottom:0}
.ledger th:first-child,.ledger td:first-child{width:96px}
.ledger th:last-child,.ledger td:last-child{width:92px}
.ledger .hash{color:var(--on-black-2);overflow:hidden;text-overflow:ellipsis}
.ledger .ok{color:var(--lime);display:inline-flex;align-items:center;gap:6px}
.ledger .ok svg{width:12px;height:12px}

/* ---- process --------------------------------------------------------- */
.process{background:var(--forest);color:var(--on-dark);padding:clamp(70px,9vw,130px) 0}
.proc-head{text-align:center;margin-bottom:clamp(40px,5vw,72px)}
.proc-head h2{font-size:clamp(2.2rem,5.4vw,4.2rem);letter-spacing:-.045em;margin-inline:auto;max-width:14ch}
.proc-head .no{color:var(--lime)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--edge-d);
  border:1px solid var(--edge-d);border-radius:12px;overflow:hidden}
.pstep{background:var(--forest);padding:26px 22px 30px;display:flex;flex-direction:column;gap:12px;
  transition:background .34s var(--ease)}
.pstep:hover{background:var(--forest-2)}
.pstep .n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--lime)}
.pstep h3{max-width:16ch}
.pstep p{font-size:13.4px;color:var(--on-dark-2);margin:0;line-height:1.55}

/* ---- case studies + news --------------------------------------------- */
.cases{background:var(--forest);color:var(--on-dark);padding:clamp(60px,8vw,120px) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(28px,3.6vw,48px)}
.sec-head h2{max-width:20ch}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.2vw,26px)}
.case{border:1px solid var(--edge-d);border-radius:14px;overflow:hidden;text-decoration:none;display:flex;
  flex-direction:column;transition:border-color .34s var(--ease),transform .34s var(--ease)}
.case:hover{border-color:var(--lime);transform:translateY(-4px)}
.case .shot{aspect-ratio:16/9;overflow:hidden}
.case .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.case:hover .shot img{transform:scale(1.05)}
.case .body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.case .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--lime)}
.case p{font-size:13.6px;color:var(--on-dark-2);margin:0;line-height:1.55}
.case .metrics{display:flex;gap:26px;margin-top:auto;padding-top:16px;border-top:1px solid var(--edge-d)}
.case .metrics .v{font-size:1.4rem;font-weight:500;letter-spacing:-.04em;display:block}
.case .metrics .k{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-dark-3);display:block;margin-top:5px}
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge-d);border-block:1px solid var(--edge-d)}
.nitem{background:var(--forest);padding:24px 22px 28px;text-decoration:none;display:flex;flex-direction:column;gap:11px;
  transition:background .3s var(--ease)}
.nitem:hover{background:var(--forest-2)}
.nitem .d{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-3)}
.nitem h3{font-size:1.02rem}
.nitem .r{margin-top:auto;display:flex;align-items:center;gap:10px;color:var(--lime);font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase}

/* ---- CTA + footer ---------------------------------------------------- */
.cta{background:var(--forest);position:relative;padding:clamp(80px,11vw,170px) 0;overflow:hidden;text-align:center}
.cta-media{position:absolute;inset:0;z-index:0}
.cta-media img{width:100%;height:100%;object-fit:cover}
.cta-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,31,16,.86),rgba(15,31,16,.94))}
.cta-in{position:relative;z-index:2}
.cta h2{font-size:clamp(2rem,4.8vw,3.8rem);max-width:16ch;margin-inline:auto;color:var(--on-dark)}
.cta p{color:var(--on-dark-2);max-width:44ch;margin:24px auto 32px}
.foot{background:var(--forest);color:var(--on-dark);border-top:1px solid var(--edge-d);padding-top:clamp(40px,5vw,64px)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.7fr));gap:clamp(20px,3.6vw,44px);
  padding-bottom:clamp(32px,4vw,52px)}
.foot-brand p{color:var(--on-dark-3);font-size:13.4px;max-width:32ch;margin:16px 0 0}
.fcol h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;
  color:var(--on-dark-3);font-weight:400}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fcol a{font-size:13.6px;color:var(--on-dark-2);text-decoration:none;transition:color .25s}
.fcol a:hover{color:var(--lime)}
.foot-bar{border-top:1px solid var(--edge-d);padding-block:20px;display:flex;justify-content:space-between;gap:14px;
  flex-wrap:wrap;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-3)}
.foot-bar a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}

/* ---- reveal ---------------------------------------------------------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .86s var(--ease),transform .86s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv-d1{transition-delay:.09s}.js .rv-d2{transition-delay:.18s}.js .rv-d3{transition-delay:.27s}
/* heading reveal: lines rise behind a mask, like the reference */
.js .lines span{display:block;overflow:hidden}
.js .lines i{display:block;font-style:normal;transform:translateY(105%);
  transition:transform .95s var(--ease)}
.js .lines.in i{transform:none}
.js .lines.in i:nth-child(2){transition-delay:.08s}

/* ---- responsive ------------------------------------------------------ */
@media (max-width:1080px){
  .vision-in{grid-template-columns:1fr;gap:22px}
  .cards,.case-grid,.split-in{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .news{grid-template-columns:1fr}
  .foot-top{grid-template-columns:repeat(2,1fr)}
  .foot-brand{grid-column:1/-1}
  .f1{width:56vw;right:-6%;top:20%}
  .f2{width:24vw;left:2%;bottom:26%}
  .f3{width:28vw;right:2%;bottom:8%}
}
@media (max-width:760px){
  .nav-links,.nav .btn{display:none}
  .nav[data-navopen="1"] .nav-links,.nav-in[data-navopen="1"] .nav-links{display:flex;flex-direction:column;
    gap:0;position:absolute;left:0;right:0;top:100%;z-index:90;margin:0;padding:6px 0;
    background:rgba(15,31,16,.97);backdrop-filter:blur(16px);border-top:1px solid var(--edge-d);
    box-shadow:0 18px 40px -24px rgba(0,0,0,.6)}
  .nav[data-navopen="1"] .nav-links li,.nav-in[data-navopen="1"] .nav-links li{width:100%}
  .nav[data-navopen="1"] .nav-links a,.nav-in[data-navopen="1"] .nav-links a{display:flex;width:100%;
    padding:13px clamp(16px,4vw,26px);color:var(--on-dark);opacity:1;font-size:14px}
  .navtoggle{display:block}
  .steps{grid-template-columns:1fr}
  .hero-foot{position:static;margin-top:44px;padding-inline:var(--shell)}
  .hero-stage{min-height:auto;padding-bottom:60px}
  .scrollcue{display:none}
  .h1p{left:6%;top:56%}.h2p{right:6%;top:70%}.h3p{left:6%;bottom:18%}.h4p{display:none}
  .hot .lbl{font-size:8.5px}
  .vision{padding-top:88px}
  .vision-in{gap:26px}
  .vision h2{font-size:1.28rem;line-height:1.3}
  /* the hero objects must not sit under the standfirst once it goes static */
  .f1{width:66vw;right:-10%;top:14%;opacity:.9}
  .f2{width:26vw;left:-4%;bottom:auto;top:52%;opacity:.5}
  .f3{width:30vw;right:-6%;bottom:auto;top:66%;opacity:.45}
  .foot-top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .js .lines i{transform:none}
  .floats .fl,.floats .fl img{transform:none!important}
}

/* skip link — fixed, so it is reachable no matter how far the page has scrolled */
.skip{position:fixed;left:12px;top:-80px;z-index:999;padding:11px 18px;border-radius:8px;
  background:#111;color:#fff;font-size:14px;font-weight:600;text-decoration:none;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6);transition:top .2s ease}
.skip:focus{top:12px}

#replicaBadge{position:fixed;right:16px;bottom:16px;z-index:2147482000;margin:0;
  padding:8px 14px;border-radius:999px;background:rgba(12,13,16,.78);color:#EDF1E9;
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);pointer-events:none;
  font:400 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.05em;
  box-shadow:0 12px 34px -16px rgba(0,0,0,.7);max-width:calc(100vw - 32px)}
#replicaBadge b{font-weight:600;color:#C9F56B}
@media (max-width:640px){#replicaBadge{right:10px;bottom:10px;font-size:10px;padding:7px 11px}}
@media print{#replicaBadge{display:none!important}}

#backToStudio{position:fixed;left:16px;bottom:16px;z-index:2147483000;display:none;align-items:center;
  padding:9px 15px;border-radius:999px;background:rgba(12,13,16,.84);color:#f5f2ea;
  border:1px solid rgba(255,255,255,.18);text-decoration:none;backdrop-filter:blur(10px);
  font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.07em;
  box-shadow:0 12px 34px -14px rgba(0,0,0,.75);transition:transform .2s ease,background .2s ease,color .2s ease}
#backToStudio:hover{background:#F3B54B;color:#151107;border-color:#F3B54B;transform:translateY(-2px)}
#backToStudio:focus-visible{outline:2px solid #F3B54B;outline-offset:3px}
@media (prefers-reduced-motion:reduce){#backToStudio{transition:none}#backToStudio:hover{transform:none}}
@media print{#backToStudio{display:none!important}}


/* ===== B5 multi-page ===== */
/* Pages added in v4-B5: solutions, technology, company, resources.
   The canvas hero stays on the index. Everything here carries its own
   [data-mode] so the three-mode colour scroll works on every page. */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Every section on the index paints its own background and ink (.solutions,
   .process, .cases, .split …). The sections added here did not, so their text
   rode `body`'s .7s background+color crossfade and both passed through the same
   mid-grey at the halfway point — measured 1.07:1 for ~150ms on a slow scroll.
   Painting each section restores the incumbent behaviour: body only ever shows
   through the gaps. */
body.sub [data-mode="forest"]{background:var(--forest);color:var(--on-dark)}
body.sub [data-mode="white"]{background:var(--white);color:var(--ink-dark)}
body.sub [data-mode="black"]{background:var(--black);color:var(--white)}
.nav-links a[aria-current="page"]{opacity:1;color:var(--lime)}

/* ---- sub-page hero ---------------------------------------------------- */
.page-hero{padding:clamp(120px,13vw,190px) 0 clamp(48px,6vw,88px);border-bottom:1px solid var(--edge-d)}
.page-hero h1{font-size:clamp(2.3rem,5.4vw,4.1rem);line-height:1.02;letter-spacing:-.04em;
  font-weight:500;margin:20px 0 0;max-width:19ch}
.ph-lede{margin:22px 0 0;max-width:62ch;font-size:clamp(15px,1.3vw,17.5px);line-height:1.6;
  color:var(--on-dark-2)}
.ph-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px;color:var(--on-dark-3)}
.ph-meta .mono::before{content:"";display:inline-block;width:5px;height:5px;border-radius:999px;
  background:var(--lime);margin-right:9px;vertical-align:.18em}

/* ---- solutions -------------------------------------------------------- */
.solblock{padding-block:clamp(56px,7vw,110px)}
.solblock-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(28px,5vw,80px);align-items:center}
.solblock-in>*{min-width:0}
.solblock--flip .sol-text{order:2}
.sol-text h2{font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.08;letter-spacing:-.035em;
  font-weight:500;margin:14px 0 20px;max-width:18ch}
.sol-text p{line-height:1.68;margin:0 0 14px;max-width:56ch;opacity:.86}
.sol-media img{width:100%;height:auto;display:block;border-radius:14px;aspect-ratio:4/3;object-fit:cover}
.srows{margin:26px 0 0;padding:0;border-top:1px solid currentColor;border-color:var(--edge-l)}
.srow{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:8px 22px;padding:13px 0;
  border-bottom:1px solid var(--edge-l)}
.srow dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.6;margin:0}
.srow dd{margin:0;font-size:14px;line-height:1.5}
[data-mode="black"] .srows,[data-mode="black"] .srow{border-color:var(--edge-d)}
[data-mode="forest"] .srows,[data-mode="forest"] .srow{border-color:var(--edge-d)}

/* ---- reconciliation table --------------------------------------------- */
/* The four-step strip, the news strip and the case grid are the index's own
   components, reused as they are — nothing here restyles them. */
.recon-sec{padding-block:clamp(56px,7vw,110px)}
.lede-w{max-width:64ch;line-height:1.68;margin:0 0 clamp(24px,3vw,38px);color:var(--on-black-2)}
.tablewrap{overflow-x:auto}
.tablewrap:focus-visible{outline:2.5px solid var(--lime);outline-offset:3px;border-radius:12px}
.ledgerwrap{border:1px solid var(--edge-d);border-radius:12px}
table.ledger-t{width:100%;border-collapse:collapse;min-width:640px;font-size:14px}
.ledger-t th[scope="col"]{text-align:right;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:400;color:var(--on-black-2);padding:14px 16px;
  border-bottom:1px solid var(--edge-d)}
.ledger-t th[scope="col"]:first-child{text-align:left}
.ledger-t th[scope="row"]{text-align:left;font-weight:500;padding:13px 16px;
  border-top:1px solid var(--edge-d);color:var(--white)}
.ledger-t td{text-align:right;padding:13px 16px;border-top:1px solid var(--edge-d);
  font-variant-numeric:tabular-nums;color:var(--white)}
.ledger-t .up{color:var(--lime);font-weight:500}
.ledger-t .tot th,.ledger-t .tot td{font-weight:600;border-top:1.5px solid var(--lime)}
.fine{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  opacity:.5;margin:18px 0 0}

/* ---- specs list (technology splits) ----------------------------------- */
.specs{margin:26px 0 0;padding:0}
.specs>div{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:8px 22px;
  padding:12px 0;border-top:1px solid var(--edge-d)}
.specs dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.55;margin:0}
.specs dd{margin:0;font-size:14px;line-height:1.5;color:var(--on-dark)}
.split--flip .split-in>*:first-child{order:2}

/* ---- milestones ------------------------------------------------------- */
.ms-sec{padding-block:clamp(56px,7vw,110px)}
.mslist{list-style:none;margin:clamp(24px,3vw,38px) 0 0;padding:0}
.ms{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:14px clamp(20px,3vw,48px);
  padding:24px 0;border-top:1px solid var(--edge-l)}
.ms:last-child{border-bottom:1px solid var(--edge-l)}
/* the body colour crossfades between the three modes, so anything pinned to a
   single mode's ink goes unreadable mid-transition — follow currentColor */
.ms-y{font-family:var(--mono);font-size:12px;letter-spacing:.13em;color:inherit;opacity:.55}
.ms h3{font-size:19px;font-weight:500;letter-spacing:-.028em;margin:0 0 8px}
.ms p{margin:0;line-height:1.62;max-width:62ch;opacity:.78;font-size:14.5px}

/* ---- resources -------------------------------------------------------- */
/* .nitem is the index's news card; the library needs a summary line under the
   headline, which the three-item strip on the index never had */
.reads{padding-block:clamp(56px,7vw,110px) 0}
.contact-rows{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,44px);
  max-width:900px;margin:clamp(26px,3.4vw,40px) auto 0;text-align:left}
.contact-rows>*{min-width:0}
.crow{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--edge-d);padding-top:16px}
.crow .mono{color:var(--on-dark-3)}
.clink{font-size:clamp(16px,1.6vw,20px);letter-spacing:-.02em;color:var(--lime);text-decoration:none;
  border-bottom:1px solid transparent;align-self:flex-start;transition:border-color .25s}
.clink:hover{border-bottom-color:var(--lime)}
.cnote{font-size:13.5px;line-height:1.55;color:var(--on-dark-2);max-width:42ch}
.cta-in .fine{text-align:center}
@media (max-width:720px){.contact-rows{grid-template-columns:1fr}}

.nitem--static{cursor:default}
.nitem--static:hover{transform:none}
.ni-sum{margin:0;font-size:13.5px;line-height:1.6;color:var(--on-dark-2);flex:1}
/* a bare .news rule here would outrank the index's own max-width:1080px stack,
   because a media query adds no specificity — hence the modifier */
.news--library{grid-template-columns:repeat(3,1fr)}

.rfaq-sec{padding-block:clamp(56px,7vw,110px)}
.rfaqs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,44px);
  margin-top:clamp(24px,3vw,38px)}
.rfaqs>*{min-width:0}
.rfaq h3{font-size:17px;font-weight:500;letter-spacing:-.025em;margin:0 0 10px;color:var(--white)}
.rfaq p{margin:0;line-height:1.66;font-size:14.5px;color:var(--on-black-2);max-width:56ch}

/* ---- responsive ------------------------------------------------------- */
@media (max-width:1000px){
  .news--library{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .solblock-in{grid-template-columns:1fr}
  .solblock--flip .sol-text{order:0}
  .sol-media{order:-1}
  .rfaqs{grid-template-columns:1fr}
}
@media (max-width:640px){
  .news--library{grid-template-columns:1fr}
  .ms{grid-template-columns:1fr;gap:6px}
  .srow,.specs>div{grid-template-columns:1fr;gap:4px}
  .page-hero{padding-top:clamp(104px,26vw,140px)}
}