/* ============================================================
   HUMANCRAFT AI — shared design system
   ============================================================ */
:root{
  --ink: oklch(0.16 0.012 250);
  --ink-2: oklch(0.22 0.014 250);
  --ink-3: oklch(0.30 0.012 250);
  --bone: oklch(0.94 0.012 80);
  --bone-2: oklch(0.88 0.014 80);
  --bone-3: oklch(0.78 0.014 80);
  --warm-white: oklch(0.97 0.008 80);
  --amber: oklch(0.74 0.135 65);
  --amber-soft: oklch(0.82 0.10 70);
  --amber-deep: oklch(0.55 0.13 50);
  --line: color-mix(in oklab, var(--bone) 86%, transparent);
  --line-on-ink: color-mix(in oklab, var(--bone) 18%, transparent);
  --serif: "Instrument Serif", "GT Sectra", "EB Garamond", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Tweakable */
  --motion-mul: 1;
  --img-saturate: 0.85;
  --img-contrast: 1.05;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--bone);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{scroll-behavior:smooth}
body{overflow-x:hidden;line-height:1.45;font-weight:350}
::selection{background:var(--amber);color:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
/* Focus. Design-system P0 (audit 2026-08-04): no :focus rule existed in this file, so every
   page but index2 fell back to the browser default ring on near-black. One rule, every control,
   amber ring with offset. :focus-visible keeps it off mouse clicks. WCAG 2.4.7 / 2.4.11. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}

.container{max-width:1480px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.eyebrow,.pre{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3);font-weight:400}
.num{font-family:var(--mono);font-feature-settings:"tnum" 1}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em}
.amber{color:var(--amber)}

.grain{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.35;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.85 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%);z-index:2}

/* media tonal treatment */
.tinted-img{
  filter: saturate(var(--img-saturate)) contrast(var(--img-contrast)) brightness(0.7);
  transition: filter .6s ease;
}
.tinted-img.warm{filter: saturate(var(--img-saturate)) contrast(var(--img-contrast)) brightness(0.7) sepia(.18) hue-rotate(-8deg)}
.tinted-img.cool{filter: saturate(var(--img-saturate)) contrast(var(--img-contrast)) brightness(0.6) hue-rotate(180deg) saturate(.6)}

/* ---------- Top nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,4vw,56px);
  transition:background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:color-mix(in oklab, var(--ink) 78%, transparent);backdrop-filter:blur(14px);border-bottom-color:var(--line-on-ink)}
.wordmark{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone)}
.wordmark .glyph{
  width:30px;height:30px;
  background:url("uploads/logoweb.png") center/contain no-repeat;
  display:inline-block;flex:0 0 auto;
}
.wordmark .glyph::before{content:none}
.nav-links{display:flex;gap:32px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-2)}
.nav-links a{position:relative;padding:6px 0;transition:color .2s}
.nav-links a:hover, .nav-links a.is-active{color:var(--amber)}
.nav-links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--amber)}
.nav-cta{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 18px;border:1px solid var(--bone-3);border-radius:999px;color:var(--bone);
  transition:border-color .2s, color .2s, background .2s;
}
.nav-cta:hover{border-color:var(--amber);color:var(--amber)}
@media (max-width:900px){.nav-links{display:none}}

/* ---------- Page transitions ---------- */
.page-transition{position:fixed;inset:0;background:var(--ink);z-index:9999;pointer-events:none;transform:translateY(100%)}
.page-transition.in{transform:translateY(0);transition:transform .6s cubic-bezier(.7,0,.3,1)}
.page-transition.out{transform:translateY(-100%);transition:transform .6s cubic-bezier(.7,0,.3,1)}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.3s}
.reveal[data-delay="4"]{transition-delay:.4s}

/* ---------- Headlines ---------- */
.h-display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(48px,7.6vw,128px);line-height:.96;letter-spacing:-0.02em;
  color:var(--warm-white);text-wrap:balance;
}
.h-display em{font-style:italic;color:var(--amber-soft)}
.h-1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,5.6vw,84px);line-height:1.04;letter-spacing:-0.015em;
  color:var(--warm-white);text-wrap:balance;
}
.h-1 em{font-style:italic;color:var(--amber-soft)}
.h-2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3.4vw,48px);line-height:1.1;letter-spacing:-0.01em;
  color:var(--warm-white);text-wrap:balance;
}

.lead-serif{font-family:var(--serif);font-size:clamp(20px,1.5vw,26px);line-height:1.5;color:var(--bone);font-style:italic;text-wrap:pretty}

.btn{
  display:inline-flex;align-items:center;gap:14px;padding:16px 22px;
  border:1px solid var(--bone);background:transparent;color:var(--bone);
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
  cursor:pointer;
}
.btn:hover{background:var(--bone);color:var(--ink);transform:translateY(-2px)}
.btn.primary{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn.primary:hover{background:transparent;color:var(--amber)}
.btn .arrow{font-family:var(--serif);font-size:18px;letter-spacing:0}

/* ---------- Footer ---------- */
footer{position:relative;background:var(--ink);padding:64px 0 36px;border-top:1px solid var(--line-on-ink);margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;gap:24px}}
.footer-grid h6{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3);margin-bottom:14px;font-weight:400}
.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:8px;font-family:var(--sans);font-size:14px;color:var(--bone-2)}
.footer-grid li a:hover{color:var(--amber)}
.footer-tag{font-family:var(--serif);font-size:32px;line-height:1.1;color:var(--warm-white);max-width:14ch}
.footer-tag em{font-style:italic;color:var(--amber-soft)}
.footer-row{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3);flex-wrap:wrap;gap:24px;padding-top:24px;border-top:1px solid var(--line-on-ink)}
.footer-row a{color:var(--bone-2)}
.footer-row a:hover{color:var(--amber)}
.footer-links{display:flex;gap:24px}

/* ---------- HUDs ---------- */
.hud{
  background:color-mix(in oklab, var(--ink) 72%, transparent);
  backdrop-filter:blur(12px);
  border:1px solid var(--line-on-ink);
  padding:10px 14px;
  font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--bone);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.6);
  min-width:280px;
}
.hud .row{display:flex;justify-content:space-between;gap:18px}
.hud .row span:first-child{color:var(--bone-3)}
.hud .row span:last-child{color:var(--bone)}
.hud .row span:last-child.ok{color:var(--amber)}
.hud .label{display:block;font-size:10px;color:var(--bone-3);letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px}

/* Section helper */
.section{position:relative;padding:clamp(80px,12vh,160px) 0;overflow:hidden}
.section.dark{background:var(--ink)}
.section.bone{background:var(--bone);color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}

/* Honour user-facing motion-intensity tweak */
.motion-low *, .motion-low *::before, .motion-low *::after{animation-duration:calc(var(--anim-d, 1s) * 2) !important}
.motion-off *, .motion-off *::before, .motion-off *::after{animation:none !important}
.motion-off .reveal{opacity:1 !important;transform:none !important}

/* ============================================================
   2026-08-04 · FOCUS + MOBILE NAV, promoted to the shared layer
   A design review found no :focus rule anywhere in the system and no way to
   reach the navigation below 900px on any page. Both belong here rather than
   in one page's inline stylesheet, so every page inherits them.
   ============================================================ */

/* Focus. :focus-visible keeps the ring off mouse clicks but always shows it for
   keyboard users. This is the first focus style the system has had. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--amber); outline-offset:3px; border-radius:2px;
}

/* Header fit. The CTA label is 22 characters of tracked uppercase mono, which
   overflowed its own border on narrow screens at a fixed size. */
.nav{gap:14px}
.wordmark{white-space:nowrap;flex:0 0 auto;min-height:44px}
.nav-cta{font-size:clamp(10.5px,1.05vw,12.5px);letter-spacing:.11em;
  padding:11px 16px;white-space:nowrap;flex:0 0 auto}

/* Menu button. Add this markup to any page to switch its mobile nav on:
     <button class="nav-toggle" id="navToggle" type="button" aria-label="Open menu"
             aria-expanded="false" aria-controls="navLinks"><span></span><span></span><span></span></button>
   and give the links container id="navLinks". site.js wires it up. Pages without
   the button are completely unaffected by these rules. */
.nav-toggle{display:none;width:44px;height:44px;flex:0 0 auto;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--line-on-ink);border-radius:50%;background:none;cursor:pointer}
.nav-toggle span{display:block;width:16px;height:1.5px;background:var(--bone);
  transition:transform .3s ease, opacity .2s ease}
.nav-toggle:hover{border-color:var(--amber)}
.nav-toggle:hover span{background:var(--amber)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:900px){
  .nav{flex-wrap:wrap;row-gap:0}
  .nav-toggle{display:flex}
  /* The open panel needs its own surface. Over a hero image the links are unreadable. */
  .nav:has(.nav-links.is-open){background:color-mix(in oklab, var(--ink) 96%, transparent);
    backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);
    border-bottom-color:var(--line-on-ink)}
  .nav-links{order:4;width:100%;flex-direction:column;gap:0;margin-top:10px;
    border-top:1px solid var(--line-on-ink)}
  .nav-links.is-open{display:flex}
  .nav-links a{padding:16px 2px;border-bottom:1px solid var(--line-on-ink);font-size:13px}
  .nav-links a:last-child{border-bottom:none}
  .nav-links a.is-active::after{display:none}
}

/* Phones. A wordmark, a 22-character CTA and a menu button do not fit one 390px
   row, measured overflow about 28px, so the CTA takes its own full-width row. */
@media (max-width:620px){
  .nav{padding-top:12px;padding-bottom:12px}
  .nav-cta{order:3;width:100%;display:flex;align-items:center;justify-content:center;
    min-height:44px;font-size:12px}
}

/* Tap targets, WCAG 2.5.8. Links inline in a sentence are exempt and untouched. */
.footer-grid li a, .footer-links a{display:inline-flex;align-items:center;min-height:24px}
@media (pointer:coarse){
  .footer-grid li a, .footer-links a{min-height:44px}
  .footer-grid li{margin-bottom:0}
}


  /* ============ V2 HOME ============ */

  /* ---------- Hero ---------- */
  .hero{position:relative;min-height:100vh;height:100vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
  .hero-stage{position:absolute;inset:0;z-index:0}
  /* 2026-08-03 23:40 founder request: mountains more prominent in the first fold.
     object-position bottom anchors the ridge instead of centre-cropping it away;
     the overlay no longer ends in solid ink, so the ridge reads through it. */
  .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
  .hero-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, color-mix(in oklab, var(--ink) 22%, transparent) 0%, color-mix(in oklab, var(--ink) 40%, transparent) 58%, color-mix(in oklab, var(--ink) 72%, transparent) 100%);z-index:1;pointer-events:none}
  .hero-preloader{
    position:absolute;top:50%;left:50%;width:80px;height:80px;z-index:4;pointer-events:none;
    transform:translate(-50%,-50%);opacity:1;transition:opacity .6s ease-out;
    background:radial-gradient(closest-side, rgba(255,255,255,.92) 0%, rgba(190,210,255,.55) 25%, rgba(130,160,210,.18) 50%, rgba(0,0,0,0) 78%);
    filter:blur(2px);animation:preloader-pulse 0.8s ease-in-out infinite}
  .hero-preloader.is-done{opacity:0}
  @keyframes preloader-pulse{0%,100%{transform:translate(-50%,-50%) scale(.85)}50%{transform:translate(-50%,-50%) scale(1.15)}}
  .star-glow{position:absolute;top:45%;left:50%;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1.6s ease-out}
  .star-glow.is-on{opacity:1}
  .star-glow-pulse{position:absolute;left:-110px;top:-110px;width:220px;height:220px;
    background:radial-gradient(closest-side, rgba(220,235,255,.85) 0%, rgba(180,205,255,.4) 22%, rgba(130,160,210,.16) 45%, rgba(0,0,0,0) 78%);
    filter:blur(2px);animation:star-pulse 1.6s ease-in-out infinite}
  @keyframes star-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.72}}

  /* 2026-08-03 23:58 founder request: headline vertically centred (fold read bottom-heavy);
     meta block stays anchored bottom-right as the counterweight. */
  .hero-content{position:absolute;inset:0;z-index:5;width:100%;padding:80px clamp(20px,4vw,56px) clamp(40px,7vh,84px);display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:end}
  .hero-content > div:first-child{align-self:center}
  .hero-meta{align-self:end}
  @media (max-width:900px){.hero-content{grid-template-rows:1fr auto}}
  .hero-h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.9vw,84px);line-height:1.02;letter-spacing:-0.018em;color:var(--warm-white);text-wrap:balance;max-width:20ch}
  .hero-h1 em{font-style:italic;color:var(--amber-soft)}
  .hero-why{margin-top:26px;max-width:52ch;font-family:var(--serif);font-size:clamp(17px,1.35vw,22px);line-height:1.55;color:var(--bone-2)}
  .hero-why .banks{color:var(--bone)}
  .hero-meta{display:flex;flex-direction:column;gap:13px;align-items:flex-end;justify-self:end;font-family:var(--mono);font-size:11px;color:var(--bone-3);letter-spacing:.14em;text-transform:uppercase;text-align:right;max-width:360px}
  .hero-meta .ts{color:var(--bone-2)}
  .hero-meta .phrase{color:var(--amber-soft);letter-spacing:.18em}
  @media (max-width:900px){.hero-content{grid-template-columns:1fr;gap:26px}.hero-meta{align-items:flex-start;text-align:left;justify-self:start}}

  .scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3);opacity:1;transition:opacity .5s ease-out}
  .scroll-cue.is-hidden{opacity:0;pointer-events:none}
  .scroll-cue .line{width:1px;height:36px;background:linear-gradient(var(--bone-3),transparent);animation:cue 1.2s ease-in-out infinite}
  @keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1)}}
  @media (max-width:900px){.scroll-cue{display:none}}

  /* ---------- Section rail ---------- */
  /* 2026-08-04 founder: the fixed header was clipping the first segment, and the rail now
     carries one segment per stop (sub-sections included), so it starts lower and the
     segments are shorter to keep the whole run inside the viewport. */
  .rail{position:fixed;right:24px;top:132px;transform:translateY(0);z-index:70;display:flex;flex-direction:column;gap:7px;align-items:center;opacity:1;pointer-events:auto;transition:opacity .4s ease}
  .rail.is-visible{opacity:1;pointer-events:auto}
  .rail .seg{width:6px;height:18px;background:var(--bone-3);opacity:.3;transition:opacity .4s,background .4s,height .4s,width .4s;cursor:pointer;border-radius:3px}
  .rail .seg:hover{opacity:.7;width:9px}
  .rail .seg.active{background:var(--amber);opacity:1;height:26px;width:9px}
  @media (max-width:900px){.rail{display:none}}
  @media (max-height:640px){.rail{display:none}}

  /* Header: more see-through once it leaves the top of the page (founder 2026-08-04).
     site.js already toggles .scrolled at 30px; the shared rule sat at 78% ink, which read as
     a solid bar. 52% plus a heavier blur lets the section behind it show through. */
  .nav.scrolled{background:color-mix(in oklab, var(--ink) 52%, transparent);
    backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25)}

  /* Play or pause the guided scroll from wherever the reader is (founder 2026-08-04).
     Sits above the back-to-top button and shares its treatment. */
  /* right:52px, not 27px (founder 2026-08-04): the rail sits at right:24px and its active
     segment is 9px wide, so it occupies 24-33px from the edge. A 44px button at right:27px
     spanned 27-71px and covered the rail's lower segments on short viewports. 52px clears
     the rail by 19px. Both fixed buttons share the value so they stay in one column. */
  .tour-toggle{position:fixed;right:52px;bottom:124px;z-index:80;width:44px;height:44px;border-radius:50%;
    background:color-mix(in oklab, var(--ink) 78%, transparent);backdrop-filter:blur(10px);border:1px solid var(--line-on-ink);
    display:grid;place-items:center;cursor:pointer;color:var(--bone);
    transition:opacity .35s ease, transform .35s ease, color .2s, border-color .2s, background .2s}
  .tour-toggle:hover{color:var(--amber);border-color:var(--amber)}
  .tour-toggle.is-running{color:var(--ink);background:var(--amber);border-color:var(--amber)}
  .tour-toggle svg{width:15px;height:15px;display:block}
  .tour-toggle .icon-pause{display:none}
  .tour-toggle.is-running .icon-pause{display:block}
  .tour-toggle.is-running .icon-play{display:none}
  .tour-toggle::after{content:attr(data-label);position:absolute;right:56px;white-space:nowrap;
    font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-2);
    background:color-mix(in oklab, var(--ink) 88%, transparent);border:1px solid var(--line-on-ink);
    padding:7px 11px;opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .25s,transform .25s}
  .tour-toggle:hover::after{opacity:1;transform:translateX(0)}
  @media (max-width:900px){.tour-toggle{display:none}}

  .back-to-top{position:fixed;right:52px;bottom:70px;z-index:80;width:44px;height:44px;border-radius:50%;
    background:color-mix(in oklab, var(--ink) 78%, transparent);backdrop-filter:blur(10px);border:1px solid var(--line-on-ink);
    display:grid;place-items:center;cursor:pointer;color:var(--bone);
    opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .35s ease, transform .35s ease, color .2s, border-color .2s}
  .back-to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
  .back-to-top:hover{color:var(--amber);border-color:var(--amber)}
  .back-to-top svg{width:16px;height:16px;display:block}

  /* ---------- Problem: pinned scrollytelling ---------- */
  .scrolly{position:relative;background:var(--ink)}
  .scrolly-track{position:relative;height:260vh}
  .scrolly-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
  .moment{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1);padding:0 clamp(20px,5vw,80px)}
  .moment.is-active{opacity:1}
  .moment-inner{max-width:1100px;width:100%;text-align:center;position:relative;z-index:3}
  .moment .step{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3);margin-bottom:36px}
  .moment .after{margin-top:36px;font-family:var(--serif);font-size:clamp(18px,1.5vw,24px);line-height:1.55;color:var(--bone-2);max-width:56ch;margin-left:auto;margin-right:auto}
  .moment .after strong{color:var(--warm-white);font-weight:400}
  .moment-bg{position:absolute;inset:-12% 0;z-index:0;pointer-events:none;background-size:cover;background-position:center}
  .moment-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 50%, color-mix(in oklab, var(--ink) 40%, transparent), var(--ink) 92%)}
  .scan-line{position:absolute;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,var(--amber),transparent);opacity:.55;mix-blend-mode:screen;animation:scan 3s linear infinite;z-index:1}
  @keyframes scan{0%{top:8%}100%{top:92%}}
  @media (prefers-reduced-motion: reduce){.scrolly-track{height:auto}.scrolly-pin{position:relative;height:auto;padding:80px 0}.moment{position:relative;opacity:1;padding:48px 24px}}

  .statband{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;align-items:center;
    background:radial-gradient(70% 90% at 18% 50%, oklch(0.16 0.025 252), transparent 70%),
      linear-gradient(135deg, var(--ink), oklch(0.10 0.018 250));border-top:1px solid var(--line-on-ink)}
  .statband::before{content:"";position:absolute;inset:-25%;z-index:-2;pointer-events:none;
    background:radial-gradient(ellipse at 23% 42%, color-mix(in oklab,var(--amber) 16%,transparent), transparent 28%),
      radial-gradient(ellipse at 82% 58%, color-mix(in oklab,#5e7dbe 18%,transparent), transparent 32%);
    filter:blur(10px);animation:stat-nebula 20s ease-in-out infinite alternate}
  .statband::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.2;
    background-image:linear-gradient(color-mix(in oklab,var(--bone) 15%,transparent) 1px,transparent 1px),
      linear-gradient(90deg,color-mix(in oklab,var(--bone) 15%,transparent) 1px,transparent 1px);
    background-size:72px 72px;mask-image:linear-gradient(90deg,transparent 0%,black 18%,black 82%,transparent 100%);
    animation:stat-grid 26s linear infinite}
  .stat-field{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
  .stat-orbit{position:absolute;border:1px solid color-mix(in oklab,var(--amber) 30%,transparent);border-radius:50%;opacity:.55;transform:rotate(-18deg);animation:stat-orbit 24s linear infinite}
  .stat-orbit::after{content:"";position:absolute;width:7px;height:7px;right:13%;top:50%;border-radius:50%;background:var(--amber);box-shadow:0 0 22px 5px color-mix(in oklab,var(--amber) 55%,transparent)}
  .stat-orbit-a{width:min(64vw,920px);height:min(24vw,340px);left:-10%;top:18%}
  .stat-orbit-b{width:min(50vw,720px);height:min(19vw,270px);right:-8%;bottom:12%;border-color:color-mix(in oklab,#8fa8dc 24%,transparent);animation-duration:31s;animation-direction:reverse}
  .statband .container{position:relative;z-index:1;width:100%;min-height:100svh;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(96px,12vh,150px) clamp(20px,5vw,80px)}
  @media (max-width:900px){.statband .container{grid-template-columns:1fr;align-content:center;gap:clamp(24px,5vh,44px);text-align:center;padding:clamp(92px,12vh,128px) clamp(20px,7vw,48px)}}
  .stat-big{font-family:var(--serif);font-size:clamp(120px,16vw,260px);line-height:.9;color:var(--warm-white);letter-spacing:-0.03em;text-shadow:0 0 42px color-mix(in oklab,var(--amber) 12%,transparent)}
  .stat-big sup{font-size:.35em;color:var(--amber);vertical-align:super}
  .stat-copy{max-width:58ch}
  .stat-copy p{font-family:var(--sans);font-size:clamp(19px,1.6vw,26px);line-height:1.5;color:var(--bone)}
  .stat-copy .src{margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3)}
  .stat-copy .src a{border-bottom:1px solid var(--bone-3);padding-bottom:2px;transition:color .2s,border-color .2s}
  .stat-copy .src a:hover{color:var(--amber);border-color:var(--amber)}
  @keyframes stat-nebula{0%{transform:translate3d(-3%,-2%,0) scale(1)}100%{transform:translate3d(4%,3%,0) scale(1.08)}}
  @keyframes stat-grid{0%{background-position:0 0,0 0}100%{background-position:72px 72px,-72px -72px}}
  @keyframes stat-orbit{0%{transform:rotate(-18deg) translateX(-2%)}100%{transform:rotate(342deg) translateX(2%)}}
  @media (prefers-reduced-motion:reduce){.statband::before,.statband::after,.stat-orbit{animation:none}.statband::before{transform:none}}

  /* ---------- Scorecard ---------- */
  /* 2026-08-04 founder: the two-column boxed grid (tight rows, shrunken ticks and panel)
     is reverted to the 23:55 look below. The fold-fitting block at the end of this
     stylesheet then scales the type and row rhythm so all nine lines sit in the first fold. */
  .score{background:oklch(0.11 0.012 250)}
  .score .grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(40px,6vw,110px);align-items:start}
  @media (max-width:1000px){.score .grid{grid-template-columns:1fr}}
  .score-list{border-top:1px solid var(--line-on-ink);margin-top:40px}
  .score-item{display:grid;grid-template-columns:34px 1fr;gap:20px;align-items:baseline;width:100%;text-align:left;
    padding:20px 12px 20px 4px;border-bottom:1px solid var(--line-on-ink);cursor:pointer;transition:background .3s,padding-left .3s}
  .score-item:hover{background:color-mix(in oklab, var(--bone) 4%, transparent);padding-left:12px}
  .score-item .tick{width:22px;height:22px;border:1px solid var(--bone-3);border-radius:50%;display:grid;place-items:center;
    font-family:var(--mono);font-size:12px;color:transparent;transition:background .25s,border-color .25s,color .25s;align-self:center}
  .score-item.is-on .tick{background:var(--amber);border-color:var(--amber);color:var(--ink)}
  .score-item .txt{font-family:var(--sans);font-size:clamp(15px,1.15vw,17px);line-height:1.5;color:var(--bone-2);transition:color .25s}
  .score-item.is-on .txt{color:var(--warm-white)}
  .score-panel{position:sticky;top:110px;border:1px solid var(--line-on-ink);padding:clamp(28px,3vw,44px);background:color-mix(in oklab, var(--ink) 60%, transparent)}
  .score-panel .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3)}
  .score-num{font-family:var(--serif);font-size:clamp(80px,8vw,150px);line-height:1;color:var(--warm-white);margin:16px 0 4px}
  .score-num span{color:var(--bone-3);font-size:.45em}
  .score-verdict{font-family:var(--serif);font-size:clamp(18px,1.4vw,23px);line-height:1.5;color:var(--bone);min-height:5.5em;transition:opacity .3s}
  .score-verdict em{font-style:italic;color:var(--amber-soft)}
  .score-reset{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
  .score-reset:hover{color:var(--amber);border-color:var(--amber)}

  /* ---------- Method ---------- */
  .method .steps{margin-top:clamp(32px,4vh,48px);border-top:1px solid var(--line-on-ink);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,32px);align-items:start}@media (max-width:900px){.method .steps{grid-template-columns:1fr}}
  .m-step{display:grid;grid-template-columns:90px 1fr;gap:clamp(20px,3vw,48px);padding:24px 0;border-bottom:1px solid var(--line-on-ink);transition:padding-left .35s}
  .m-step:hover{padding-left:16px}
  .m-step .n{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--bone-3);padding-top:8px}
  .m-step h3{font-family:var(--serif);font-size:clamp(20px,2vw,32px);line-height:1.15;color:var(--warm-white);font-weight:400}
  .m-step p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--bone-2);max-width:62ch}
  .method .kicker{margin-top:32px;font-family:var(--serif);font-size:clamp(18px,1.5vw,24px);line-height:1.5;color:var(--bone);max-width:58ch}
  .method .kicker em{font-style:italic;color:var(--amber-soft)}

  /* ---------- Handover artefacts ---------- */
  .handover{background:oklch(0.11 0.012 250)}
  .art-grid{margin-top:clamp(32px,4vh,48px);display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-on-ink);border:1px solid var(--line-on-ink)}
  @media (max-width:1100px){.art-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.art-grid{grid-template-columns:1fr}}
  .art{background:var(--ink);padding:20px 18px 24px;display:flex;flex-direction:column;gap:12px;transition:background .35s}
  .art:hover{background:oklch(0.19 0.014 250)}
  .art .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--amber)}
  .art h4{font-family:var(--serif);font-size:22px;line-height:1.2;color:var(--warm-white);font-weight:400}
  .art p{font-size:13.5px;line-height:1.55;color:var(--bone-3)}

  /* ---------- Offer path: animated flowchart ---------- */
  .flow{position:relative;padding-left:clamp(48px,5.5vw,80px)}
  .flow-spine,.flow-fill{position:absolute;left:clamp(21px,2.55vw,43px);top:22px;bottom:22px;width:2px}
  .flow-spine{background:var(--line-on-ink)}
  .flow-fill{bottom:auto;height:0;background:linear-gradient(180deg, color-mix(in oklab, var(--amber) 40%, transparent), var(--amber));will-change:height}
  .flow-dot{position:absolute;left:50%;bottom:0;width:10px;height:10px;border-radius:50%;background:var(--amber);transform:translate(-50%,50%);box-shadow:0 0 0 6px color-mix(in oklab, var(--amber) 25%, transparent), 0 0 18px 2px color-mix(in oklab, var(--amber) 55%, transparent)}
  .flow-stage{position:relative;padding:0 0 clamp(32px,5vh,56px)}
  .flow-stage:last-of-type{padding-bottom:0}
  .flow-stage .node{position:absolute;left:calc(clamp(21px,2.55vw,43px) - clamp(64px,7vw,110px) + 1px);top:0;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--bone-3);background:var(--ink);display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--bone-2);transition:background .5s,color .5s,border-color .5s,box-shadow .5s;z-index:2}
  .flow-stage.is-on .node{background:var(--amber);border-color:var(--amber);color:var(--ink);box-shadow:0 0 0 8px color-mix(in oklab, var(--amber) 16%, transparent)}
  /* 2026-08-04 founder: "these cards are blurred or translucent, not obvious even when they are
     the one in view." Three things were washing them out at once: a base opacity of .3, a card
     background only 55% opaque over a moving section, and a 2s carousel (now deleted) that dimmed
     whichever card you happened to be reading. Resting state is now legible rather than a ghost,
     and the card at the reading line goes fully solid with an amber edge. */
  .flow-card{border:1px solid var(--line-on-ink);background:color-mix(in oklab, var(--ink) 82%, transparent);padding:clamp(18px,2.2vw,32px);opacity:.55;transform:translateY(14px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),border-color .45s,background .45s,box-shadow .45s}
  .flow-stage.is-on .flow-card{opacity:1;transform:none;border-color:color-mix(in oklab, var(--amber) 30%, var(--line-on-ink))}
  .flow-stage.is-reading .flow-card{opacity:1;transform:none;background:var(--ink);
    border-color:color-mix(in oklab, var(--amber) 62%, var(--line-on-ink));
    box-shadow:0 0 0 1px color-mix(in oklab, var(--amber) 18%, transparent), 0 18px 48px -24px rgba(0,0,0,.9)}
  .flow-stage.is-reading .node{box-shadow:0 0 0 10px color-mix(in oklab, var(--amber) 22%, transparent)}
  .flow-card .eyebrow-row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}
  .flow-card .eyebrow-row .dur{color:var(--amber)}
  .flow-card .body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.5vw,40px)}
  @media (max-width:900px){.flow-card .body{grid-template-columns:1fr}}
  .flow-card h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,42px);line-height:1.05;color:var(--warm-white);font-weight:400}
  .flow-card .sub{margin-top:10px;font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--bone-2);font-style:italic;max-width:44ch}
  .flow-card .holds{font-family:var(--mono);font-size:11px;line-height:1.9;color:var(--bone-2)}
  .flow-card .holds .h{color:var(--bone-3);font-size:9px;letter-spacing:.22em;text-transform:uppercase;display:block;margin-bottom:6px}
  .flow-card .holds li{list-style:none;padding-left:18px;position:relative;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
  .flow-stage.is-on .holds li{opacity:1;transform:none}
  .flow-stage.is-on .holds li:nth-child(2){transition-delay:.1s}
  .flow-stage.is-on .holds li:nth-child(3){transition-delay:.2s}
  .flow-stage.is-on .holds li:nth-child(4){transition-delay:.3s}
  .flow-stage.is-on .holds li:nth-child(5){transition-delay:.4s}
  .flow-card .holds li::before{content:"·";position:absolute;left:0;color:var(--amber)}
  .flow-arrow{position:absolute;left:calc(clamp(21px,2.55vw,43px) - clamp(64px,7vw,110px) + 1px);bottom:clamp(18px,3.2vh,36px);transform:translateX(-50%);color:var(--bone-3);font-size:14px;opacity:.35;transition:color .5s,opacity .5s}
  .flow-stage.is-on .flow-arrow{color:var(--amber);opacity:1}
  @media (prefers-reduced-motion: reduce){
    .flow-fill{display:none}
    .flow-card,.flow-card .holds li{opacity:1 !important;transform:none !important}
    .flow-stage .node{background:var(--amber);border-color:var(--amber);color:var(--ink)}
  }

  /* The .flow-card-auto-scroll rules that sat here were removed 2026-08-04: the class was never
     applied to any element, so all three were dead, and the carousel they styled is gone. */
  /* Wide screens: spine runs down the centre, cards alternate left and right */
  @media (min-width:1001px){
    .flow{padding-left:0}
    .flow-spine,.flow-fill{left:50%;margin-left:-1px}
    .flow-stage .node{left:50%}
    .flow-arrow{left:50%}
    .flow-card{width:calc(50% - clamp(44px,4.5vw,84px));position:relative}
    .flow-stage.right .flow-card{margin-left:auto}
    .flow-card::before{content:"";position:absolute;top:30px;width:clamp(28px,3.2vw,60px);height:1px;background:var(--line-on-ink);transition:background .5s}
    .flow-stage.left .flow-card::before{left:100%}
    .flow-stage.right .flow-card::before{right:100%}
    .flow-stage.is-on .flow-card::before{background:color-mix(in oklab, var(--amber) 55%, transparent)}
    .flow-card .body{grid-template-columns:1fr}
  }


  /* Non-size keepers from the earlier bump (sizes now live in the readability pass above) */
  .flow-card .sub{max-width:none}
  .m-step p{max-width:66ch}
  .art h4{font-size:24px}
  .sector-panel .story{font-size:clamp(18px,1.5vw,22px)}
  .promise{margin-top:clamp(40px,5vh,56px);display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-on-ink);border:1px solid var(--line-on-ink)}
  @media (max-width:900px){.promise{grid-template-columns:1fr}}
  .promise > div{background:oklch(0.13 0.012 250);padding:clamp(20px,2.5vw,32px)}
  .promise .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3);margin-bottom:16px}
  .promise p{font-family:var(--serif);font-size:clamp(17px,1.4vw,22px);line-height:1.55;color:var(--bone)}
  .promise p em{font-style:italic;color:var(--amber-soft)}

  /* ---------- Products ---------- */
  .products{background:oklch(0.11 0.012 250)}
  .prod-grid{margin-top:clamp(32px,4vh,48px);display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-on-ink);border:1px solid var(--line-on-ink)}
  @media (max-width:900px){.prod-grid{grid-template-columns:1fr}}
  .prod{background:var(--ink);padding:clamp(24px,2.8vw,40px);transition:background .4s}
  .prod:hover{background:oklch(0.185 0.016 250)}
  .prod .k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}
  .prod h3{font-family:var(--serif);font-size:clamp(32px,3.5vw,56px);line-height:1;color:var(--warm-white);font-weight:400;margin-top:12px}
  .prod .tag{margin-top:14px;font-family:var(--serif);font-size:clamp(18px,1.5vw,24px);font-style:italic;color:var(--amber-soft);line-height:1.4}
  .prod ul{margin-top:20px;list-style:none}
  .prod li{padding:13px 0 13px 26px;border-top:1px solid var(--line-on-ink);font-size:14.5px;line-height:1.55;color:var(--bone-2);position:relative}
  .prod li::before{content:"→";position:absolute;left:0;color:var(--amber);font-family:var(--serif)}
  .prod-link{display:inline-flex;align-items:center;gap:12px;margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);border-bottom:1px solid transparent;transition:border-color .25s}
  .prod-link:hover{border-color:var(--amber)}
  .prod-link .arrow{font-family:var(--serif);font-size:16px;transition:transform .3s}
  .prod-link:hover .arrow{transform:translateX(6px)}
  .prod-status{margin-top:1px;border:1px solid var(--line-on-ink);border-top:none;background:oklch(0.13 0.012 250);padding:22px clamp(32px,3.6vw,56px);font-family:var(--mono);font-size:12px;line-height:1.7;letter-spacing:.04em;color:var(--bone-3)}
  .prod-status b{color:var(--bone);font-weight:400}
  .prod-wide{border:1px solid var(--line-on-ink);border-top:none;background:var(--ink);padding:clamp(24px,2.8vw,40px);transition:background .4s}
  .prod-wide:hover{background:oklch(0.185 0.016 250)}
  .prod-wide h3{font-family:var(--serif);font-size:clamp(26px,2.8vw,42px);line-height:1.05;color:var(--warm-white);font-weight:400;margin-top:12px}
  .prod-wide h3 em{font-style:italic;color:var(--amber-soft)}
  .standards{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px;list-style:none}
  .standards li{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--bone-2);border:1px solid var(--line-on-ink);padding:9px 14px;transition:border-color .25s,color .25s,background .25s;cursor:default}
  .standards li:hover{border-color:var(--amber);color:var(--amber)}
  .prod-wide .closer{margin-top:26px;font-family:var(--serif);font-size:clamp(18px,1.5vw,24px);line-height:1.45;color:var(--bone);font-style:italic}
  .prod-wide .closer em{color:var(--amber-soft)}
  .prod-wide .forms{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:2;color:var(--bone-3)}

  /* ---------- Transparency record ---------- */
  .record .grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,110px);align-items:start}
  @media (max-width:1000px){.record .grid{grid-template-columns:1fr}}
  .record .q{font-family:var(--serif);font-size:clamp(22px,2vw,32px);line-height:1.4;color:var(--bone);font-style:italic}
  .record .a{margin-top:26px;font-size:15.5px;line-height:1.65;color:var(--bone-2);max-width:52ch}
  .record .a strong{color:var(--warm-white);font-weight:400}
  .ledger{border:1px solid var(--line-on-ink);background:color-mix(in oklab, var(--ink) 55%, transparent);position:relative;overflow:hidden}
  .ledger .head{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line-on-ink);font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3)}
  .ledger .head .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);display:inline-block;margin-right:8px}
  .ledger-row{display:grid;grid-template-columns:44px 1fr 1.25fr;gap:16px;padding:15px 22px;border-bottom:1px solid var(--line-on-ink);font-size:13.5px;transition:background .3s}
  .ledger-row:last-child{border-bottom:none}
  .ledger-row:hover{background:color-mix(in oklab, var(--bone) 4%, transparent)}
  .ledger-row .i{font-family:var(--mono);font-size:11px;color:var(--amber)}
  .ledger-row .f{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--bone)}
  .ledger-row .d{color:var(--bone-3);line-height:1.5}

  /* ---------- Sectors ---------- */
  .sectors{background:oklch(0.11 0.012 250)}
  .tabbar{margin-top:48px;display:flex;gap:0;border:1px solid var(--line-on-ink);width:max-content;max-width:100%;overflow-x:auto}
  .tabbar button{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3);padding:16px 26px;border-right:1px solid var(--line-on-ink);transition:color .25s,background .25s;white-space:nowrap}
  .tabbar button:last-child{border-right:none}
  .tabbar button:hover{color:var(--bone)}
  .tabbar button.is-active{background:var(--amber);color:var(--ink)}
  .sector-panel{display:none;margin-top:56px}
  .sector-panel.is-active{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(40px,6vw,100px);animation:panelin .6s cubic-bezier(.2,.7,.2,1)}
  @media (max-width:1000px){.sector-panel.is-active{grid-template-columns:1fr}}
  @keyframes panelin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .sector-panel .flag{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin-bottom:18px}
  .sector-panel h3{font-family:var(--serif);font-size:clamp(30px,3vw,50px);line-height:1.08;color:var(--warm-white);font-weight:400}
  .sector-panel h3 em{font-style:italic;color:var(--amber-soft)}
  .sector-panel .story{margin-top:24px;font-family:var(--serif);font-size:clamp(17px,1.4vw,21px);line-height:1.6;color:var(--bone-2)}
  .sector-panel .story strong{color:var(--warm-white);font-weight:400}
  .sector-panel .also{font-family:var(--mono);font-size:12px;line-height:2.15;color:var(--bone-3)}
  .sector-panel .also .h{font-size:10px;letter-spacing:.22em;text-transform:uppercase;display:block;margin-bottom:10px;color:var(--bone-3)}
  .sector-panel .also li{list-style:none;border-bottom:1px solid var(--line-on-ink);padding:6px 0;color:var(--bone-2)}

  /* ---------- Fit ---------- */
  .fit-rows{margin-top:52px;border-top:1px solid var(--line-on-ink)}
  .fit-row{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,64px);padding:26px 0;border-bottom:1px solid var(--line-on-ink);align-items:baseline;transition:padding-left .35s}
  .fit-row:hover{padding-left:14px}
  @media (max-width:800px){.fit-row{grid-template-columns:1fr;gap:8px}}
  .fit-row .need{font-family:var(--serif);font-size:clamp(19px,1.7vw,27px);line-height:1.3;color:var(--warm-white)}
  .fit-row .who{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;line-height:1.6;color:var(--bone-3)}
  .fit-row .who b{color:var(--amber);font-weight:400}
  .fit-close{margin-top:44px;font-family:var(--serif);font-size:clamp(20px,1.8vw,28px);line-height:1.5;color:var(--bone);max-width:56ch}
  .fit-close em{font-style:italic;color:var(--amber-soft)}

  /* ---------- Founder-led (compact, company-first) ---------- */
  .founder2{background:oklch(0.11 0.012 250)}
  .founder2 .grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(40px,6vw,110px);align-items:center}
  @media (max-width:900px){.founder2 .grid{grid-template-columns:1fr}}
  .founder2 .bio{margin-top:24px;font-size:15.5px;line-height:1.7;color:var(--bone-2);max-width:60ch}
  .founder2 .bio b{font-weight:400;color:var(--warm-white)}
  .founder2 blockquote{margin-top:28px;padding-left:24px;border-left:2px solid var(--amber);font-family:var(--serif);font-size:clamp(18px,1.5vw,24px);line-height:1.5;color:var(--bone);font-style:italic}
  .founder2 .photo{position:relative;max-width:300px;aspect-ratio:4/5;overflow:hidden;background:var(--ink-2);justify-self:end}
  @media (max-width:900px){.founder2 .photo{justify-self:start}}
  .founder2 .photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.05) brightness(.92)}
  .founder2 .photo .cap{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-2);background:linear-gradient(180deg,transparent,rgba(10,12,18,.85))}

  /* ---------- Proof ---------- */
  .proof .lead{margin-top:26px;font-size:16px;line-height:1.7;color:var(--bone-2);max-width:62ch}
  .proof .lead strong{color:var(--warm-white);font-weight:400}
  .proof-cards{margin-top:clamp(32px,4vh,48px);display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-on-ink);border:1px solid var(--line-on-ink)}
  @media (max-width:900px){.proof-cards{grid-template-columns:1fr}}
  .proof-card{background:var(--ink);padding:clamp(20px,2.5vw,32px);transition:background .35s}
  .proof-card:hover{background:oklch(0.185 0.016 250)}
  .proof-card .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--amber)}
  .proof-card h4{font-family:var(--serif);font-size:clamp(19px,1.8vw,28px);line-height:1.15;color:var(--warm-white);font-weight:400;margin:12px 0 10px}
  .proof-card p{font-size:14.5px;line-height:1.6;color:var(--bone-3)}

  /* ---------- Belief (section 10) ---------- */
  .believe .grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(40px,6vw,110px);align-items:end}
  @media (max-width:1000px){.believe .grid{grid-template-columns:1fr;gap:32px}}
  .believe .closer{font-family:var(--serif);font-size:clamp(20px,1.7vw,28px);line-height:1.45;color:var(--bone);font-style:italic}
  .believe .closer em{font-style:italic;color:var(--amber-soft)}
  .believe .place{font-size:clamp(15px,1.2vw,18px);line-height:1.65;color:var(--bone-2);border-left:2px solid var(--amber);padding-left:22px}
  .believe .place b{font-weight:400;color:var(--warm-white)}
  /* 2026-08-04 founder: the fixed tour and back-to-top buttons sit at right:27px and were
     covering the right edge of this text. Pull the right column clear of them on desktop.
     Below 1000px the grid is single-column and the collision does not occur, so it is scoped. */
  @media (min-width:1000px){.believe .place{margin-right:clamp(48px,5vw,80px)}}

  /* ---------- Speaking and point of view (ported from work.html) ---------- */
  .proof-aux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px)}
  @media (max-width:900px){.proof-aux{grid-template-columns:1fr}}
  .proof-aux .block{border:1px solid var(--line-on-ink);padding:clamp(22px,2.4vw,36px);display:flex;flex-direction:column;gap:14px;transition:border-color .3s, background .3s}
  .proof-aux .block:hover{border-color:var(--amber);background:color-mix(in oklab, var(--amber) 5%, transparent)}
  .proof-aux .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3)}
  .proof-aux h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,30px);line-height:1.2;color:var(--warm-white)}
  .proof-aux a.dl{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:16px;
    font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);
    border-top:1px solid var(--line-on-ink);transition:border-color .25s}
  .proof-aux a.dl:hover{border-top-color:var(--amber)}

  /* ---------- Closing ---------- */
  .closing{position:relative;background:var(--ink);padding:clamp(80px,12vh,140px) 0;overflow:hidden;text-align:center}
  .closing .atmosphere{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%, color-mix(in oklab, var(--amber) 20%, transparent) 0%, transparent 60%),var(--ink);z-index:0}
  .closing-inner{position:relative;z-index:2}
  .closing h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5.5vw,96px);line-height:.98;letter-spacing:-0.02em;color:var(--warm-white);text-wrap:balance}
  .closing h2 em{font-style:italic;color:var(--amber-soft)}
  .closing .sub{font-family:var(--serif);font-size:clamp(19px,1.6vw,26px);line-height:1.5;color:var(--bone);margin:32px auto 14px;max-width:56ch}
  .closing .phrase{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3);margin-bottom:48px}

  /* Footer carries a fifth column on this page (Products) */
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}
  @media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}

  /* Readability pass 2026-08-03 23:36: body sans switched to Inter at weight 400
     (wider letterforms for older readers); small type floors raised again. Headlines untouched. */
  :root{--sans:"Inter","Helvetica Neue",system-ui,sans-serif}
  body{font-weight:400}
  .nav-links{font-size:12.5px}
  .nav-cta{font-size:12.5px}
  .pre,.eyebrow{font-size:12.5px}
  .hero-meta{font-size:11px}
  .scroll-cue{font-size:11px}
  .stat-copy .src{font-size:13px}
  .score-panel .lbl{font-size:12.5px}
  .score-reset{font-size:12px}
  .score-item .txt{font-size:clamp(17px,1.3vw,19px)}
  .m-step .n{font-size:13px}
  .m-step p{font-size:18px}
  .art .n{font-size:12.5px}
  .art p{font-size:16.5px}
  .flow-card .eyebrow-row{font-size:13.5px}
  .flow-card .sub{font-size:clamp(18px,1.5vw,21px)}
  .flow-card .holds{font-size:15px;line-height:1.95}
  .flow-card .holds .h{font-size:12px}
  .promise .lbl{font-size:12px}
  .prod .k{font-size:12.5px}
  .prod li{font-size:17px}
  .prod-status{font-size:15px}
  .prod-wide .forms{font-size:14px}
  .standards li{font-size:14.5px}
  .ledger .head{font-size:12px}
  .ledger-row{font-size:16px}
  .ledger-row .i{font-size:13px}
  .ledger-row .f{font-size:14.5px}
  .record .a{font-size:17.5px}
  .tabbar button{font-size:12.5px}
  .sector-panel .flag{font-size:12.5px}
  .sector-panel .also{font-size:15px}
  .sector-panel .also .h{font-size:12px}
  .fit-row .who{font-size:15.5px}
  .founder2 .bio{font-size:18px}
  .proof-card .n{font-size:12.5px}
  .proof-card p{font-size:17px}
  .proof .lead{font-size:18.5px}
  .closing .phrase{font-size:12.5px}
  .footer-grid h6{font-size:11.5px}
  .footer-grid li{font-size:15px}
  .footer-row{font-size:12px}
  .founder2 .photo .cap{font-size:12px}

  /* ============ FOLD FIT 2026-08-04 ============
     Founder: "every section should FIT within the height of the fold, some sections the title is
     so big it took up so much space that the section height is truncated."

     Cause: .h-1 is clamp(40px,5.6vw,84px). It knows the viewport WIDTH and nothing about its
     HEIGHT, so on a 1512x800 laptop it sat at its 84px ceiling and a two-line headline ate 175px
     of an 800px fold before a word of content. Every headline is now capped against vh as well,
     and the section rhythm scales with vh instead of a fixed px ladder.

     Exempt, because they are deliberately longer than one fold and carry their own stops in the
     rail: the pinned scrolly section, 05 the path (five stages), 06 the products (three blocks).

     Measured before/after at 1512x800, section height in folds:
       03 method 1.46 · 04 handover 1.12 · 07 record 1.11 · 08 sectors 1.01 · 09 fit 1.39
       10 believe 1.02 (its headline alone was 54% of the section) */
  /* ONE headline size for every section on the page. Founder 2026-08-04: "apply consistent h2
     sizing for ALL sections and not fix piece meal." --h2-size is the single token; nothing
     below sets a section headline size of its own, so changing this one line changes them all.
     It is capped against BOTH axes: vw so it scales with column width, vh so it can never eat
     the fold on a short screen. At 1440x800 it resolves to about 50px. */
  :root{--h2-size:min(clamp(30px,4.4vw,62px), 6.2vh)}
  .section .h-1,
  .believe .h-1,
  .scrolly .moment .h-1,
  .closing h2{font-size:var(--h2-size)!important;line-height:1.08}
  .section{padding:clamp(56px,8vh,120px) 0}

  /* Padding is asymmetric on purpose: the fixed header is ~77px tall, so a symmetric box would
     centre tall content underneath it. Extra headroom at the top, less at the foot. */
  .fold{min-height:100vh;display:flex;align-items:center;
    padding-top:clamp(88px,11vh,140px);padding-bottom:clamp(40px,6vh,90px)}
  .fold > .container{width:100%}
  @media (max-width:1000px){.fold{min-height:0;display:block;padding:clamp(72px,10vh,140px) 0}}

  /* 03 · Method: five steps, a kicker and a two-line headline. The step rhythm is the bulk,
     so it takes the deepest trim on this page. */
  .method .h-1{margin-top:clamp(6px,1.3vh,18px)!important}
  .method .steps{margin-top:clamp(12px,2vh,36px)}
  .m-step{padding:clamp(7px,1.4vh,24px) 0}
  .m-step h3{font-size:min(clamp(20px,2vw,32px), 2.75vh)}
  .m-step p{font-size:min(18px, 1.88vh);line-height:1.45;margin-top:4px}
  .m-step .n{padding-top:4px}
  .method .kicker{margin-top:clamp(10px,1.75vh,32px);font-size:min(clamp(18px,1.5vw,24px), 2.25vh)}

  /* 04 · What we build: six artefact cards in a 3x2 grid. */
  .handover .art-grid{margin-top:clamp(18px,3vh,44px)}
  .art{padding:clamp(14px,2vh,22px) 18px clamp(16px,2.2vh,26px)}
  .art h4{font-size:min(24px, 2.9vh)}
  .art p{font-size:min(16.5px, 1.95vh);line-height:1.5}
  .handover .lead-serif{margin-top:clamp(18px,3vh,40px)!important;font-size:min(clamp(20px,1.5vw,26px), 2.5vh)}

  /* 07 · No black box: prose column beside the eight-row ledger. */
  .record .h-1{margin-bottom:clamp(20px,3.4vh,56px)!important}
  .record .q{font-size:min(clamp(22px,2vw,32px), 3.2vh)}
  .record .a{margin-top:clamp(12px,2.2vh,26px);font-size:min(17.5px, 2.05vh);line-height:1.6}
  .ledger .head{padding:clamp(9px,1.5vh,16px) 22px}
  .ledger-row{padding:clamp(8px,1.4vh,15px) 22px;font-size:min(16px, 1.9vh)}

  /* 08 · Where we work: tab bar plus the active sector panel. */
  .sectors .tabbar{margin-top:clamp(20px,3.4vh,48px)}
  .tabbar button{padding:clamp(9px,1.6vh,16px) 26px}
  .sector-panel.is-active{margin-top:clamp(22px,4vh,56px)}
  .sector-panel h3{font-size:min(clamp(30px,3vw,50px), 5vh)}
  .sector-panel .story{margin-top:clamp(12px,2.2vh,24px);font-size:min(clamp(18px,1.5vw,22px), 2.4vh);line-height:1.5}
  .sector-panel .also{font-size:min(15px, 1.85vh);line-height:1.85}
  .sector-panel .also li{padding:clamp(3px,0.7vh,6px) 0}

  /* 09 · Honest fit: four comparison rows and two closing lines. */
  .fit-rows{margin-top:clamp(16px,3vh,52px)}
  .fit-row{padding:clamp(9px,1.75vh,26px) 0}
  .fit-row .need{font-size:min(clamp(19px,1.7vw,27px), 2.7vh)}
  .fit-row .who{font-size:min(15.5px, 1.8vh);line-height:1.45}
  .fit-close{margin-top:clamp(14px,2.5vh,44px);font-size:min(clamp(20px,1.8vw,28px), 2.5vh)}
  .fit-close + .fit-close{margin-top:clamp(10px,1.6vh,18px)!important}

  /* 11 · Commitments runs straight into the speaking and POV pair below it, so the two are
     sized to share one fold rather than each claiming their own. */
  .proof-cards{margin-top:clamp(20px,3.2vh,44px)}
  .proof-card{padding:clamp(16px,2.2vh,26px) clamp(20px,2.5vw,32px)}
  .proof-card h4{font-size:min(clamp(19px,1.8vw,28px), 2.9vh);margin:10px 0 8px}
  .proof-card p{font-size:min(17px, 2vh);line-height:1.5}
  .proof-aux .block{gap:10px}
  .proof-aux h3{font-size:min(clamp(22px,2vw,30px), 3.1vh)}

  /* Scorecard fold fit 2026-08-04 (founder: "make the whole 9 questions fit into the first fold").
     Sits after the readability pass because that block sets .score-item .txt at the same
     specificity and would otherwise win. The section is one viewport tall and its type,
     row padding and panel scale with viewport HEIGHT, so the nine lines plus the score panel
     land inside the fold on a short laptop screen without shrinking on a large one. */
  /* --consent-h is set from JS while the cookie notice is open, and cleared when it is
     dismissed. Without it the notice sits on top of question nine on a short screen, which
     defeats the whole point of fitting all nine into the fold. */
  :root{--consent-h:0px}
  .score{min-height:100vh;display:flex;align-items:center;
    padding:clamp(84px,10.5vh,120px) 0 calc(clamp(32px,5vh,64px) + var(--consent-h))}
  .score .container{width:100%}
  .score .grid{gap:clamp(32px,4vw,80px)}
  .score h2.h-1{font-size:clamp(32px,4.4vh,58px)}
  .score .lead-serif{font-size:clamp(16px,2vh,20px);margin-top:clamp(12px,1.8vh,22px)}
  .score .score-list{margin-top:clamp(12px,2vh,26px)}
  .score .score-item{padding:clamp(6px,1.15vh,15px) 12px clamp(6px,1.15vh,15px) 4px}
  .score .score-item .txt{font-size:clamp(14px,1.75vh,17.5px);line-height:1.4}
  .score .score-panel{padding:clamp(20px,2.8vh,40px)}
  .score .score-num{font-size:clamp(56px,9vh,130px);margin:clamp(8px,1.4vh,16px) 0 4px}
  .score .score-verdict{font-size:clamp(15px,2vh,21px);line-height:1.45}
  @media (max-width:1000px){.score{min-height:0;display:block;padding:clamp(80px,12vh,160px) 0}}

  /* GDPR Consent Banner */
  .gdpr-consent{
    position:fixed;bottom:-200px;left:0;right:0;z-index:1000;
    background:oklch(0.13 0.012 250);border-top:1px solid var(--amber);
    padding:14px clamp(20px,3vw,32px);
    transition:bottom 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow:0 -4px 20px rgba(0,0,0,0.3)}
  .gdpr-consent.is-visible{bottom:0}
  .gdpr-inner{
    max-width:1200px;margin:0 auto;
    display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,40px);align-items:center}
  @media (max-width:700px){.gdpr-inner{grid-template-columns:1fr}}
  .gdpr-content h3{
    font-family:var(--serif);font-size:clamp(18px,1.5vw,22px);
    color:var(--warm-white);margin-bottom:4px;font-weight:400}
  .gdpr-content p{
    font-size:15px;line-height:1.5;color:var(--bone-2);max-width:none}
  .gdpr-link{color:var(--amber);border-bottom:1px solid color-mix(in oklab, var(--amber) 45%, transparent);transition:border-color .2s}
  .gdpr-link:hover{border-bottom-color:var(--amber)}
  .gdpr-accept{
    padding:12px 28px;background:var(--amber);color:var(--ink);border:none;border-radius:4px;
    font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
    cursor:pointer;transition:background .3s,transform .2s;white-space:nowrap}
  .gdpr-accept:hover{background:var(--amber-soft);transform:scale(1.05)}
  .gdpr-accept:active{transform:scale(0.98)}

  /* ============ 2026-08-04 02:25 · PAGE-SPECIFIC TAP TARGETS ============
     v2 (02:25): the focus rule, the header fit, the .nav-toggle menu button, both nav
     media queries and the footer tap targets MOVED OUT of this file into
     shared/site.css, so every page inherits them instead of only this one. They were
     written here first on 2026-08-04 01:40 after the design critique found no :focus
     style anywhere in the system and no way to reach the nav below 900px.
     DO NOT re-add them here: shared/site.js now binds the menu button, and a second
     inline copy of that handler would toggle the menu twice per click and it would
     never open. Only genuinely page-local rules belong below. */
  .score-reset{display:inline-flex;align-items:center;min-height:44px}
  .prod-link{min-height:44px;padding-top:6px;padding-bottom:6px}
  @media (pointer:coarse){
    .standards li{min-height:44px;display:flex;align-items:center}
  }

  /* --- Sector tabs: keyboard focus target inside the bar --- */
  .tabbar button:focus-visible{outline-offset:-3px}

  /* --- 10 · What we believe: photographic backdrop (founder 2026-08-04) ---
     Same construction as the two scrolly moments: an absolutely positioned layer behind
     the content, tinted into the palette by .tinted-img, with an ink wash over it.
     The wash is heavy on purpose. .closer is bone and .place is bone-2, both light text,
     and an untreated photograph behind them would drop contrast below AA. The image
     reads as atmosphere at the vertical edges and stays out of the way behind the copy.
     Oversized by 15% top and bottom so the parallax cannot expose an edge. */
  /* 2026-08-04 founder: crop the bottom ~30% of the image away so the top of Marina Bay Sands
     (the boat-topped towers, ~15% down the source photo) leads and the foreground water/museum
     is gone. Measured at 1440x900 the box is 1425x1170: taller-proportioned than the 1200x926
     photo, so background-size:cover fills the HEIGHT and crops the SIDES, leaving the bottom in
     view. To crop the bottom instead, the photo is scaled TALLER than the box and pinned to the
     top: auto 143% makes it 143% of the box height, so the box shows the top 70% (1 - 1/1.43)
     and the bottom ~30% overflows out. Crop knob: raise the 143% to remove more of the bottom,
     lower it toward 100% to bring the foreground back. */
  .believe-bg{position:absolute;inset:-15% 0;z-index:0;pointer-events:none;
    background-size:auto 143%;background-position:center top;will-change:transform}
  .believe-bg::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 80%, transparent) 45%, var(--ink) 100%)}
  .believe .container{position:relative;z-index:2}

  /* --- Tour button appears only after the first fold (founder 2026-08-04) ---
     It is fixed at right:27px and .hero-meta is right-aligned into the same corner, so
     the line "Operating history across APAC and the Middle East" ran underneath the play
     button and "Middle East" was covered. Rather than reserve a gutter, the button is now
     gated on scroll exactly like .back-to-top: the hero fold carries no fixed controls at
     all, and the tour appears at the point it becomes useful. */
  .tour-toggle{opacity:0;pointer-events:none;transform:translateY(8px)}
  .tour-toggle.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}