/* ============================================================
   RKovera - "The urban mine" teardown hero (light studio)
   Scroll-driven exploded bill-of-materials. Green-only palette,
   project fonts only (Polymath Display Black / Inter / DejaVu
   Sans Mono). Aesthetic per user references: light, premium.
   ============================================================ */
/* woff2, subset to Latin + Latin Extended-A + punctuation + arrows (the CTA chip sets
   its arrow in the mono face). 1,002 KB of unsubset TTF became 64 KB, a 93% cut and
   the largest single performance win on the page. The .ttf originals stay on disk for
   preview/, which still references them, and are excluded from both deploy paths.
   unicode-range lets the browser skip the download entirely for out-of-range text. */
@font-face{font-family:"Polymath Display Black";src:url("assets/fonts/PolymathDisp-Black.woff2") format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0100-017F,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212}
@font-face{font-family:"DejaVu Sans Mono";src:url("assets/fonts/DejaVuSansMono.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0100-017F,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212}
@font-face{font-family:"DejaVu Sans Mono";src:url("assets/fonts/DejaVuSansMono-Bold.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0100-017F,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212}

:root{
  --forest:#0D473B; --deep:#0A3A30; --emerald:#1B7A5E;
  --k:#28A745; --k-dark:#176F2C; --k-bright:#4ECF6E; --k-deep:#145F26;
  --paper:#EDF1EC; --mist:#DFE6E0;
  /* the studio backdrop the hero sits on, light to dark down the sweep */
  --stage-1:#F5F8F3; --stage-2:#E9EFE7; --stage-3:#DBE3DB;
  --ink:#171717; --ink-2:#4a5a54;
  --display:"Polymath Display Black","Inter",sans-serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"DejaVu Sans Mono",ui-monospace,Menlo,monospace;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* --facet / --facet-alt were removed: media run square (the angular clip read as
     agency decoration against the Tesla/Arcwatch register) and the gem survives as
     the flat 2D mark and the section watermark, neither of which needs a clip-path.
     Nothing referenced them. Restore from git if the gesture ever returns to media. */
  --ease-emphasized:cubic-bezier(0.16,1,0.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}

:focus-visible{outline:2px solid var(--k-dark);outline-offset:3px;border-radius:4px}
/* --k-dark is 5.5:1 on paper but only 1.69:1 on forest and 2.02:1 on the footer, so the
   ring vanished on every dark section: the contact links, the contact CTA, the footer,
   and the header whenever it sits over dark. --k-bright reads 5.29:1 on forest and
   6.31:1 on --deep. outline-offset:3px keeps the ring on the section background, so it
   clears the button fill rather than sitting on top of it. */
.sec-forest :focus-visible,
.site-footer :focus-visible,
body.on-dark .hero-top :focus-visible{outline-color:var(--k-bright)}

/* ---------- top bar ---------- */
.hero-top{position:fixed;top:0;left:0;right:0;z-index:15;display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,4vw,54px);gap:20px;color:var(--forest);transition:color .3s ease}
.brand{display:flex;align-items:center;text-decoration:none;color:inherit}
.lockup{height:30px;width:auto;display:block}
.lockup--white{display:none}
/* adaptive header: swap lockup + ink when the dark follow-on is behind the fixed bar */
body.on-dark .lockup--light{display:none}
body.on-dark .lockup--white{display:block}
body.on-dark .hero-top{color:#fff}
body.on-dark .top-nav a{color:#fff;border-color:rgba(255,255,255,0.28);background:rgba(255,255,255,0.07)}
body.on-dark .top-nav a:hover{background:#fff;color:var(--forest)}
.top-nav{display:flex;gap:8px}
.top-nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:0.04em;text-transform:uppercase;color:var(--forest);
  text-decoration:none;padding:9px 16px;border:1px solid rgba(13,71,59,0.16);border-radius:999px;
  background:rgba(255,255,255,0.5);backdrop-filter:blur(8px);transition:background .2s,color .2s,border-color .2s}
.top-nav a:hover{background:var(--forest);color:#fff;border-color:var(--forest)}

/* ---------- stage / sticky scrub ---------- */
.stage{position:relative;height:240vh}
.stage__sticky{position:sticky;top:0;height:100vh;overflow:hidden;
  background:
    radial-gradient(58% 42% at 62% 74%, rgba(27,122,94,0.16), transparent 70%),
    radial-gradient(120% 90% at 84% 2%, rgba(40,167,69,0.10), transparent 55%),
    linear-gradient(168deg,var(--stage-1) 0%,var(--stage-2) 52%,var(--stage-3) 100%)}
/* soft studio floor sweep + vignette to sell the product-shot look */
.stage__sticky::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 60% at 50% 118%, rgba(13,71,59,0.14), transparent 60%)}
.stage__sticky::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.05;mix-blend-mode:multiply;pointer-events:none}

#scene{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
#labels{position:absolute;inset:0;z-index:3;pointer-events:none}

/* ---------- oversized overlapping headline ---------- */
.hero-copy{position:absolute;z-index:4;left:clamp(20px,5vw,72px);top:clamp(90px,12vh,124px);max-width:min(56vw,700px);pointer-events:none}
.hero-copy a{pointer-events:auto}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--k-dark);
  margin-bottom:18px;display:block}
.hero-title{font-family:var(--display);font-weight:400;line-height:0.82;letter-spacing:-0.03em;color:var(--forest);text-transform:lowercase}
.hero-title span{display:block}
.hero-title .l1{font-size:clamp(32px,5vw,74px)}
.hero-title .l2{font-size:clamp(52px,11vw,166px);margin-left:-0.04em}
.hero-title .l3{font-size:clamp(52px,11vw,166px);margin-left:-0.04em}
.hero-title .k{color:var(--k)}
.hero-sub{margin-top:22px;font-size:clamp(14px,1.4vw,17px);line-height:1.6;color:var(--ink-2);max-width:40ch}
.hero-cta-row{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:700;font-size:13px;
  letter-spacing:0.04em;text-transform:uppercase;text-decoration:none;padding:14px 22px;border-radius:999px;transition:background .2s,color .2s,transform .2s,border-color .2s}
/* The fill is --k-dark, not --k: white on #28A745 measures 3.13:1 and the label sets at
   13-14px bold, which WCAG does not count as large text, so the bar is 4.5:1. --k-dark
   carries the same label at 6.28:1. Hover has to travel DARKER for the same reason: the
   old hover went to --k-dark from --k, i.e. it started at a failing ratio. --k stays the
   accent token everywhere else (the wordmark K, chips, rules, the tally). */
.btn--primary{color:#fff;background:var(--k-dark)}
.btn--primary:hover{background:var(--k-deep);transform:translateY(-2px)}
/* On forest the deeper fill is only 1.69:1 against the section, so the button needs a
   boundary of its own to stay a visible shape (WCAG 1.4.11). --k-bright reads 5.29:1
   against the section and 3.13:1 against the fill. */
.sec-forest .btn--primary{box-shadow:inset 0 0 0 1px var(--k-bright)}
.btn--primary .chip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#fff;color:var(--forest);border-radius:6px;font-size:13px}
.btn--ghost{color:var(--forest);background:rgba(255,255,255,0.55);border:1px solid rgba(13,71,59,0.22);backdrop-filter:blur(8px)}
.btn--ghost:hover{background:var(--forest);color:#fff;border-color:var(--forest);transform:translateY(-2px)}

/* ---------- HUD part labels (projected from 3D) ---------- */
/* Spec-sheet annotation, not a tooltip: a long hairline rule runs back toward the
   part and the text sits free on the page. No pill, no blur, no drop shadow. */
.hud-label{position:absolute;top:0;left:0;will-change:transform,opacity;opacity:0;transition:opacity .3s ease;white-space:nowrap;
  padding:0 0 0 4px}
.hud-label::before{content:"";position:absolute;left:calc(-1 * var(--leader,44px));top:calc(50% - 0.5px);width:var(--leader,44px);height:1px;background:rgba(13,71,59,0.30)}
.hud-label::after{content:"";position:absolute;left:calc(-1 * var(--leader,44px) - 3px);top:calc(50% - 2.5px);width:5px;height:5px;border-radius:50%;background:var(--k)}
.hud-n{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:0.14em;color:var(--k-dark);margin-right:8px;vertical-align:1px}
.hud-name{display:inline-block;font-family:var(--display);font-size:15px;font-weight:400;color:var(--forest);letter-spacing:-0.01em;text-transform:capitalize;vertical-align:baseline}
.hud-mat{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:0.10em;color:var(--ink-2);text-transform:uppercase;margin-top:4px;opacity:0.85}

/* ---------- bottom HUD: metals tally + progress ---------- */
.hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:flex-end;justify-content:space-between;
  padding:36px clamp(20px,4vw,54px) 26px;gap:24px;pointer-events:none}
.hero-foot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top, rgba(233,239,231,0.96) 30%, rgba(233,239,231,0) 100%)}
.tally__cap{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.tally__row{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.tally__row li{font-family:var(--mono);font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-2);
  padding:7px 12px;border:1px solid rgba(13,71,59,0.14);border-radius:999px;background:rgba(255,255,255,0.42);
  opacity:.5;transition:opacity .35s ease,color .35s ease,border-color .35s ease,background .35s ease}
.tally__row li b{font-family:var(--display);font-weight:700;color:inherit;margin-right:6px;font-size:12.5px}
.tally__row li.active{opacity:1;color:var(--k-dark);border-color:var(--k);background:rgba(40,167,69,0.10)}
.progress{display:flex;align-items:center;gap:14px}
.progress-read{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;color:var(--k-dark);font-weight:700}
.progress-track{width:min(28vw,240px);height:2px;background:rgba(13,71,59,0.14);position:relative;overflow:hidden}
.progress-track::after{content:"";position:absolute;inset:0;width:var(--p,0%);background:var(--k);transition:width .1s linear}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .top-nav{display:none}
  .hero-copy{max-width:90vw;top:clamp(92px,14vh,140px)}
  .hero-title .l2,.hero-title .l3{font-size:clamp(58px,20vw,120px)}
  #labels{display:none}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:16px}
}
@media (max-width:520px){
  .hero-sub{max-width:34ch}
  .tally__row li{padding:6px 10px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.top-nav a,.tally__row li{transition:none}
  /* no fade/rise: show revealed content immediately */
  .reveal{opacity:1;transform:none;transition:none}
  /* every hover/scale transition, not just the ones that happen to be listed */
  .inside-media img,.inside-card:hover .inside-media img,
  .pay-card,.pillar,.pillar-n,.ops-video,.ops-card:hover .ops-video,
  .hud-label,.progress-track::after{transition:none}
}

/* ============================================================
   FULL PAGE: body sections (light / Polymath grotesk language)
   ============================================================ */
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--forest);color:#fff;padding:10px 16px;border-radius:6px;font-weight:600;font-size:14px;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}

/* header extras */
.top-actions{display:flex;align-items:center;gap:18px}
.lang-toggle{display:flex;align-items:center;gap:6px}
/* 44px hit area on the language switch. It measured 21x23 and this is a bilingual
   site defaulting to EN for a French-speaking market, so it is the one control a
   visitor is most likely to reach for first. The box stays visually the same size:
   the padding grows the target, negative margins keep the glyphs where they were. */
.lang-toggle button{background:none;border:none;cursor:pointer;padding:11px 10px;margin:-11px -8px;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:0.04em;color:inherit;opacity:0.7}
.lang-toggle button[aria-pressed="true"]{opacity:1;color:var(--k-dark)}
body.on-dark .lang-toggle button[aria-pressed="true"]{color:var(--k-bright)}
.lang-sep{opacity:0.4}

/* section scaffold */
/* scroll-margin-top clears the fixed header on in-page jumps. Desktop was saved by
   the section padding, but at <=640px that drops to 64px against a 72px header, so
   the eyebrow of the last sections landed under the bar. */
.sec{position:relative;padding:clamp(76px,12.5vw,196px) 0;scroll-margin-top:80px}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:clamp(20px,5vw,60px)}
.sec-light{background:var(--paper)}
.sec-mist{background:var(--mist)}
.sec-forest{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--forest),var(--deep));color:#fff}
.sec-forest .wrap{position:relative;z-index:2}
.eyebrow--dark{color:var(--k-bright)}
.sec-h2{font-family:var(--display);font-weight:400;font-size:clamp(32px,5.6vw,70px);line-height:0.92;letter-spacing:-0.035em;color:var(--forest);text-wrap:balance}
.sec-h2.on-dark{color:#fff}
.eyebrow + .sec-h2{margin-top:20px;margin-bottom:clamp(40px,5.5vw,72px)}

/* problem */
.stat-figure{font-family:var(--display);font-weight:400;line-height:0.9;color:var(--forest);letter-spacing:-0.02em;font-size:clamp(58px,10vw,120px)}
.stat-unit{font-size:0.3em;color:var(--emerald);letter-spacing:0}
.stat-label{margin-top:12px;color:var(--ink-2);font-size:15px;line-height:1.5}
.health-line{border-left:3px solid var(--k);padding:10px 0 10px 22px;font-family:var(--display);font-weight:400;font-size:clamp(19px,2.4vw,26px);line-height:1.15;color:var(--forest);margin-top:34px;letter-spacing:-0.01em}

/* band */
.band-inner{max-width:860px}
.band-body{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.5vw,30px);line-height:1.28;color:#fff;letter-spacing:-0.015em;max-width:24ch}
.band-watermark{position:absolute;right:-4%;top:-16%;width:min(44vw,480px);opacity:0.07;z-index:1;pointer-events:none}

/* solution pillars */
.pillars{list-style:none;margin:0 0 clamp(40px,6vw,72px)}
/* translate, not padding-left: the old rule animated a layout property on hover. */
.pillar{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);align-items:start;padding:clamp(22px,4vw,38px) 0;border-top:1px solid rgba(13,71,59,0.14);transition:transform .3s}
.pillar:last-child{border-bottom:1px solid rgba(13,71,59,0.14)}
.pillar:hover{transform:translateX(12px)}
/* Lighthouse flags this and .pay-n for contrast (1.46:1). Deliberate and left alone:
   both are aria-hidden decorative counters carrying no information, which WCAG 1.4.3
   exempts as decoration. Reaching 3:1 needs alpha 0.58, which turns a ghost numeral
   into a solid one and changes the editorial register of the whole section. */
.pillar-n{font-family:var(--display);font-size:clamp(30px,5vw,52px);color:rgba(13,71,59,0.22);line-height:1;transition:color .3s}
.pillar:hover .pillar-n{color:var(--k)}
.pillar-t{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.6vw,28px);color:var(--forest);line-height:1.05;margin-bottom:10px;letter-spacing:-0.02em}
.pillar-b{color:var(--ink-2);font-size:clamp(15px,1.6vw,17px);line-height:1.7;max-width:56ch}
.vision-line{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--display);font-weight:400;font-size:clamp(18px,2.2vw,24px);color:var(--forest);letter-spacing:-0.01em}
.vision-tag{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--k-dark);background:rgba(40,167,69,0.12);padding:7px 13px;border-radius:999px}

/* ops */
.ops-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:12px}
.ops-card{display:flex;flex-direction:column;gap:16px}
.ops-media{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:4/3;background:var(--deep);box-shadow:0 20px 44px -28px rgba(10,58,48,0.42)}
.ops-media::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(13,71,59,0.28),rgba(10,58,48,0.12));mix-blend-mode:multiply}
.ops-card figcaption span{display:block}
.ops-step{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--k-dark)}
.ops-cap{font-family:var(--display);font-weight:400;font-size:clamp(18px,2vw,22px);color:var(--forest);line-height:1.05;margin-top:8px;letter-spacing:-0.01em}
.ops-desc{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin-top:8px}
.ops-note{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;color:var(--ink-2);max-width:78ch}
.ops-concept{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--k-dark);background:rgba(40,167,69,0.12);padding:6px 11px;border-radius:999px;white-space:nowrap}

/* value */
.chain{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 28px}
.chain-step{flex:1 1 150px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(13,71,59,0.14);border-radius:8px;padding:14px 20px;font-family:var(--display);font-weight:400;color:var(--forest);font-size:17px;counter-increment:cs}
.chain{counter-reset:cs}
.chain-step::before{content:counter(cs);width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--forest);color:#fff;font-family:var(--mono);font-size:12px;display:flex;align-items:center;justify-content:center}
.chain-step--end{background:var(--forest);color:#fff;border-color:var(--forest)}
.chain-step--end::before{background:var(--k)}

/* traction: the only section with no H2. "Where we stand" restated its own eyebrow
   and made no claim, so it was cut and the eyebrow now labels the section (it carries
   the aria-labelledby). It also takes over the gap the heading used to hold, sized
   between the 20px label gap and the 40-72px heading gap the other sections run. */
.traction .eyebrow{margin-bottom:clamp(32px,4vw,52px)}
.traction-list{list-style:none;display:grid;gap:8px;max-width:800px}
.traction-list li{position:relative;padding:26px 0 26px 44px;border-bottom:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.92);font-size:clamp(16px,1.9vw,18px);line-height:1.6}
.traction-list li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:12px;height:12px;background:var(--k-bright);clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}

/* founder */
.founder-inner{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.founder-body{max-width:56ch;font-size:clamp(16px,1.7vw,18px);line-height:1.7;color:var(--ink);margin-top:18px}

/* contact */
.contact-inner{max-width:760px}
.contact-details{display:flex;flex-wrap:wrap;gap:24px 56px;margin:28px 0 36px}
/* padding-top lifts the hit area to 44px; the matching negative margin keeps the text
   and its underline exactly where they were. */
.contact-link{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.6vw,30px);color:#fff;text-decoration:none;border-bottom:2px solid var(--k-bright);padding-top:13px;margin-top:-13px;padding-bottom:4px;letter-spacing:-0.01em}
.contact-link:hover{color:var(--k-bright)}
.btn--lg{padding:17px 30px;font-size:14px}


/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-emphasized),transform .7s var(--ease-emphasized)}
.reveal.is-in{opacity:1;transform:none}

/* responsive (full page) */
@media (max-width:900px){
  .ops-grid{grid-template-columns:1fr;max-width:440px}
  .founder-inner{grid-template-columns:1fr}
  .pillar{grid-template-columns:1fr;gap:10px}
}

/* story bridge (dark chain) + photo credit */

/* graceful degradation if WebGL is unavailable */
.no-webgl #scene{display:none}

/* mobile nav (burger) */
/* 44x44 hit area (it measured 38x32). Negative margins keep its layout footprint at
   the old 32px, so the header height and the .mobile-nav top:70px offset do not move. */
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:14px 11px;margin:-6px -11px -6px 0;color:inherit}
.nav-burger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .22s,opacity .22s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:flex;flex-direction:column;gap:6px;position:fixed;top:70px;left:0;right:0;z-index:14;
  padding:16px clamp(20px,5vw,40px) 26px;background:rgba(237,241,236,0.98);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(13,71,59,0.12);box-shadow:0 18px 40px -24px rgba(10,58,48,0.4)}
.mobile-nav[hidden]{display:none}
.mobile-nav a{color:var(--forest);text-decoration:none;font-family:var(--mono);font-size:14px;text-transform:uppercase;letter-spacing:0.06em;padding:13px 2px;border-bottom:1px solid rgba(13,71,59,0.08)}
.mobile-nav a.btn{border-bottom:none;margin-top:12px;color:#fff;justify-content:center}
@media (max-width:900px){ .nav-burger{display:flex} }
@media (min-width:901px){ .mobile-nav{display:none} }

/* "Who pays" was cut 2026-07-29: the page stated its business model twice, once by payer
   here and once by activity in the four pillars, and the pillars cut was kept. The
   .pay-* rules went with the section. */

/* what's inside (material macros, inside the value section) */
.inside-h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,3.4vw,42px);line-height:1.05;letter-spacing:-0.02em;color:var(--forest);margin-top:clamp(46px,6vw,72px);padding-top:clamp(30px,4vw,44px);border-top:1px solid rgba(13,71,59,0.14)}
.inside-lead{font-size:clamp(16px,1.7vw,18px);line-height:1.7;color:var(--ink-2);max-width:52ch;margin-top:16px;margin-bottom:clamp(36px,4.5vw,54px)}
.inside-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}
.inside-card{display:flex;flex-direction:column;gap:14px}
.inside-media{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:1/1;background:var(--deep);box-shadow:0 20px 44px -28px rgba(10,58,48,0.42)}
.inside-media img{width:100%;height:100%;object-fit:cover;filter:saturate(0.9) contrast(1.04);transition:transform .9s var(--ease-emphasized)}
.inside-card:hover .inside-media img{transform:scale(1.06)}
.inside-card figcaption span{display:block}
.inside-el{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--k-dark)}
.inside-name{font-family:var(--display);font-weight:400;font-size:clamp(17px,1.9vw,21px);color:var(--forest);line-height:1.05;margin-top:7px;letter-spacing:-0.01em}
.inside-desc{font-size:14px;line-height:1.65;color:var(--ink-2);margin-top:9px}
@media (max-width:900px){ .inside-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .inside-grid{grid-template-columns:1fr;max-width:340px} .inside-lead{margin-top:-8px} }

/* Hero still fallback. Visible by DEFAULT, hidden once JS confirms the renderer is
   live. It used to be display:none until JS added .no-webgl from the catch block,
   which meant it never appeared with JS disabled or the module blocked: the hero was
   an empty 240vh stage. Defaulting to visible fails safe instead. */
.stage-fallback{display:block;position:absolute;right:6vw;top:50%;transform:translateY(-50%);
  height:min(78vh,760px);width:auto;max-width:46vw;object-fit:contain;z-index:2}
.has-webgl .stage-fallback{display:none}
@media (max-width:900px){ .stage-fallback{right:50%;transform:translate(50%,-50%);top:62%;height:auto;width:min(70vw,320px);max-width:70vw} }

/* for companies */
.companies-inner{max-width:760px}
/* The lede carries the tension ("you cannot prove what became of a retired machine"),
   which is why a company buys. It sets one step up from the body and in full --ink so
   it reads before the equipment list, on the same scale as .reviva-lead. */
.companies-lede{font-size:clamp(17px,2vw,22px);line-height:1.6;color:var(--ink);max-width:52ch;margin-bottom:20px}
.companies-body{font-size:clamp(16px,1.7vw,18px);line-height:1.7;color:var(--ink-2);max-width:58ch;margin-bottom:34px}

/* Reviva, the core product block that opens the solution section */
.reviva-lead{font-size:clamp(17px,2vw,22px);line-height:1.7;color:var(--ink);max-width:52ch;margin-bottom:clamp(38px,5vw,60px)}
.reviva-actors{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);margin:0 0 clamp(26px,3vw,36px);counter-reset:ra}
.reviva-actor{position:relative;padding-top:20px;border-top:1px solid rgba(13,71,59,0.16);counter-increment:ra}
.reviva-actor::before{content:"0" counter(ra);position:absolute;top:-11px;left:0;background:var(--paper);padding-right:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;color:var(--k-dark)}
.reviva-role{display:block;font-family:var(--display);font-weight:400;font-size:clamp(17px,1.9vw,21px);color:var(--forest);letter-spacing:-0.01em;margin-bottom:8px}
.reviva-body{display:block;font-size:15px;line-height:1.65;color:var(--ink-2)}
.pillars-h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,3.4vw,42px);line-height:1.05;letter-spacing:-0.02em;color:var(--forest);
  margin-top:clamp(52px,7vw,84px);padding-top:clamp(30px,4vw,44px);border-top:1px solid rgba(13,71,59,0.14);margin-bottom:clamp(10px,1.6vw,18px)}
@media (max-width:900px){ .reviva-actors{grid-template-columns:1fr;gap:0}
  .reviva-actor{padding-top:22px;margin-top:16px} }

/* founder portrait, graded into the green family like every other photo */
.founder-photo{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:4/5;
  box-shadow:0 20px 44px -28px rgba(10,58,48,0.42)}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:saturate(0.72) contrast(1.05)}
.founder-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(13,71,59,0.34),rgba(10,58,48,0.16));mix-blend-mode:multiply}
.founder-inner{grid-template-columns:minmax(230px,300px) 1fr;align-items:center}
@media (max-width:900px){ .founder-inner{grid-template-columns:1fr} .founder-photo{max-width:320px;aspect-ratio:1/1} }

.chain-rail{margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:0.06em;color:var(--k-bright);opacity:0.9}

/* .sec-divide lived here to join two light-family blocks. Its only user was the
   mist "Who pays" to mist "For companies" seam, which no longer exists. */
.chain--rail{margin-top:30px}
.chain-rail--light{color:var(--k-dark);opacity:1}
.problem-value{margin-top:26px;font-family:var(--display);font-weight:400;font-size:clamp(18px,2.2vw,25px);line-height:1.2;letter-spacing:-0.01em;color:var(--forest)}

/* the gap figure, sized like a Tesla stat */
.gap-stat{display:flex;align-items:baseline;gap:clamp(18px,2.5vw,34px);margin:clamp(34px,4.5vw,52px) 0 clamp(24px,3vw,34px);flex-wrap:wrap}
.gap-figure{font-family:var(--display);font-weight:400;font-size:clamp(64px,11vw,150px);line-height:0.86;letter-spacing:-0.04em;color:#fff;font-variant-numeric:tabular-nums}
.gap-pct{font-size:0.42em;color:var(--k-bright);margin-left:0.06em}
.gap-stat-label{flex:1 1 300px;max-width:44ch;font-size:clamp(14px,1.5vw,16px);line-height:1.55;color:rgba(255,255,255,0.76)}
.gap-close{font-family:var(--display);font-weight:400;font-size:clamp(19px,2.4vw,28px);line-height:1.2;letter-spacing:-0.01em;color:var(--k-bright)}

/* ops footage: motion only when the visitor allows it */
.ops-video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(0.88) contrast(1.03);transition:transform .9s var(--ease-emphasized)}
.ops-card:hover .ops-video{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){ .ops-video{transition:none} }

/* problem: the numbers carry the section, no photograph needed */
.stat-band{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin:clamp(40px,5vw,64px) 0 clamp(34px,4vw,48px);align-items:start}
.stat-cell{border-top:1px solid rgba(13,71,59,0.16);padding-top:clamp(18px,2.4vw,26px)}
.stat-band .stat-figure{font-size:clamp(40px,5.6vw,86px);line-height:0.9;letter-spacing:-0.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-band .stat-unit{font-size:0.3em;letter-spacing:0}
.stat-band .stat-label{margin-top:16px;font-size:14px;line-height:1.6;max-width:30ch}
.problem .health-line{max-width:30ch}
@media (max-width:900px){ .stat-band{grid-template-columns:1fr;gap:0}
  .stat-cell{margin-top:22px} }

/* Mobile keeps the tighter rhythm: the desktop air would become dead space. */
@media (max-width:640px){
  .sec{padding:64px 0}
  .eyebrow + .sec-h2{margin-bottom:32px}
  .traction .eyebrow{margin-bottom:26px}
  .reviva-lead,.inside-lead{margin-bottom:30px}
  .pillars-h3,.inside-h3{margin-top:44px;padding-top:30px}
}

/* scope notes: quiet secondary lines, not new sections */
.band-scope{margin-top:22px;font-size:clamp(14px,1.5vw,16px);line-height:1.65;color:rgba(255,255,255,0.66);max-width:56ch}
.inside-scope{margin-top:clamp(26px,3vw,36px);font-size:14.5px;line-height:1.65;color:var(--ink-2);max-width:60ch}

/* The regulatory gap carries a real paragraph plus a figure, so it sets its body
   as prose rather than display type and runs tighter than a statement band. */
#gap{padding-top:clamp(64px,8vw,124px);padding-bottom:clamp(64px,8vw,124px)}
#gap .band-body{font-family:var(--sans);font-size:clamp(16px,1.7vw,18px);line-height:1.7;letter-spacing:0;color:rgba(255,255,255,0.82);max-width:56ch}
#gap .gap-stat{margin:clamp(30px,3.5vw,42px) 0 clamp(20px,2.5vw,28px)}
#gap .gap-figure{font-size:clamp(56px,8vw,104px)}

/* On the ground runs dark: it separates two light blocks, and the footage reads
   better on forest. Rhythm is F,L,F,L,F,M,F,L,F. Cutting "Who pays" removed the
   M,M pair, so the page now alternates cleanly end to end and no section needs a
   divider to hold its join. */
#operations{color:#fff}
#operations .ops-cap{color:#fff}
#operations .ops-step{color:var(--k-bright)}
#operations .ops-desc{color:rgba(255,255,255,0.72)}
#operations .ops-note{color:rgba(255,255,255,0.6)}
#operations .ops-concept{color:var(--k-bright);background:rgba(78,207,110,0.12)}
#operations .ops-media{box-shadow:0 24px 56px -26px rgba(0,0,0,0.6)}

/* Footer: quiet and structured, three columns, nothing decorative. */
.site-footer{background:var(--deep);color:rgba(255,255,255,0.62);padding:clamp(56px,6vw,84px) 0 30px}
.footer-grid{display:grid;grid-template-columns:minmax(260px,1.5fr) 1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.footer-brand .lockup{height:30px;width:auto;opacity:0.92}
.footer-tagline{margin-top:20px;font-size:14px;line-height:1.65;color:rgba(255,255,255,0.55);max-width:38ch}
/* gap drops to 0 and the rows carry their own vertical padding, so each footer link
   is a 44px target instead of an 18px line of text, with the same visual rhythm. */
.footer-col{display:flex;flex-direction:column;align-items:start;gap:0}
.footer-col a{padding-block:13px}
.footer-h{font-family:var(--mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--k-bright);margin-bottom:5px}
.footer-col a{color:rgba(255,255,255,0.72);text-decoration:none;font-size:14.5px;
  text-underline-offset:4px;transition:color .2s ease}
.footer-col a:hover{color:#fff;text-decoration:underline}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;
  margin-top:clamp(44px,5vw,64px);padding-top:22px;border-top:1px solid rgba(255,255,255,0.12);
  font-family:var(--mono);font-size:11.5px;letter-spacing:0.08em;color:rgba(255,255,255,0.42)}
@media (max-width:820px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;gap:32px} }