/* ============================================================
   BEWAIZE v4 — two worlds, one wind.
   Act I  (paper): understand — poster type, landscape, measurements
   Act II (ink):   build — everything after the founders photo
   No cards. No pills. Type, space, photography, and a wind field.
   Voices: Bricolage Grotesque (human) · IBM Plex Mono (system) · Inter (working)
   ============================================================ */

:root{
  --paper:#F6F8F4;
  --mint:#E2EEE6;
  --brand:#469C71;
  --deep:#1F5C40;
  --ink:#0D1F16;
  --muted:#54685C;
  --line:#D5DFD6;
  --surface:#FFFFFF;

  --d-bg:#0D1F16;
  --d-ink:#F2F6F1;
  --d-muted:#8FA79A;
  --d-line:#22392C;
  --d-brand:#55B384;
  --d-surface:#132B1E;

  --disp:'Bricolage Grotesque',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --body:'Inter',sans-serif;

  --fs-micro:17px;
  --fs-label:18px;
  --fs-body:17px;

  --ease:cubic-bezier(.19,1,.22,1);   /* slow settle */
  --wrap:1360px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.scroll-smooth{scroll-behavior:smooth}
body{
  font-family:var(--body); font-size:var(--fs-body); line-height:1.7;
  background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--brand);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(22px,4.5vw,72px)}

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

/* the wind — canvas behind content */
#wind{position:fixed;inset:0;z-index:0;pointer-events:none}
main,header,footer{position:relative;z-index:1}

/* cursor ring (decorative; native cursor stays) */
#cur{
  position:fixed; left:0; top:0; z-index:99; pointer-events:none;
  width:30px; height:30px; border:1.5px solid var(--brand); border-radius:50%;
  transform:translate(-50%,-50%); opacity:.6;
  transition:width .3s var(--ease),height .3s var(--ease),opacity .3s ease,background-color .3s ease;
}
#cur.big{width:56px;height:56px;opacity:.9;background:rgba(70,156,113,.08)}
@media (hover:none), (prefers-reduced-motion:reduce){ #cur{display:none} }

/* ---------- reveal engine — slow, physical ---------- */
.rv{opacity:0;transform:translateY(56px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-st>*{opacity:0;transform:translateY(48px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv-st.in>*{opacity:1;transform:none}
.rv-st.in>*:nth-child(1){transition-delay:.04s}
.rv-st.in>*:nth-child(2){transition-delay:.14s}
.rv-st.in>*:nth-child(3){transition-delay:.24s}
.rv-st.in>*:nth-child(4){transition-delay:.34s}
.rv-st.in>*:nth-child(5){transition-delay:.44s}
.rv-st.in>*:nth-child(6){transition-delay:.54s}
.rv-st.in>*:nth-child(7){transition-delay:.64s}
.rv-st.in>*:nth-child(8){transition-delay:.74s}
@media (prefers-reduced-motion:reduce){
  .rv,.rv-st>*{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- quiet text controls — no pills ---------- */
.btn{
  display:inline-block; font-family:var(--mono); font-weight:500; font-size:17px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:16px 26px; border:1.5px solid currentColor; border-radius:0;
  color:var(--ink); background:transparent; cursor:pointer; line-height:1;
  transition:background-color .3s ease,color .3s ease,transform .35s var(--ease);
}
.btn:hover{transform:translateY(-3px)}
.btn--p{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--p:hover{background:var(--deep);border-color:var(--deep);color:#fff}
.btn--s:hover{background:var(--ink);color:var(--paper)}

.tlink{
  font-family:var(--mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:inherit;
  border-bottom:1.5px solid var(--brand); padding-bottom:4px;
  transition:color .25s ease;
}
.tlink:hover{color:var(--brand)}
.tlink .dot{color:var(--brand)}

/* mono chip → quiet tag (kept for partners/contact/nl/fr) */
.chip{
  display:inline-block; font-family:var(--mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  padding:4px 0; border:0; background:transparent; border-radius:0;
}
.chip::before{content:"· ";color:var(--brand)}
.chip--fill{color:var(--deep);font-weight:500}
.chip--soft{color:var(--muted)}

.stamp{font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.stamp b{color:var(--brand);font-weight:500;margin-right:10px}

/* ---------- header — a masthead: logo row, then oversized nav row ---------- */
.hd{position:absolute;top:0;left:0;right:0;z-index:60;background:transparent;border:0}
.hd-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;padding:24px 0 0}
.logo{font-family:var(--disp);font-weight:800;font-size:clamp(40px,4.4vw,63px);letter-spacing:.005em;text-decoration:none;color:var(--ink);line-height:1}
.logo span{color:var(--brand)}
.nav{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,48px);width:100%;order:3;padding:16px 0 14px;border-top:1.5px solid var(--line);margin-top:14px}
.nav a{
  font-family:var(--disp); font-size:clamp(24px,2.7vw,39px); letter-spacing:-.015em; text-transform:none;
  font-weight:700; text-decoration:none; color:var(--ink); position:relative; line-height:1.1;
}
.nav a::after{content:"";position:absolute;left:0;bottom:-4px;height:2.5px;width:0;background:var(--brand);transition:width .4s var(--ease)}
.nav a:hover::after{width:100%}
.hd-right{display:flex;align-items:center;gap:22px}
.hd-right .btn{padding:14px 22px;font-size:15.5px}
.lang{font-family:var(--mono);font-size:16px;display:flex;align-items:center;gap:8px}
.lang a{text-decoration:none;color:var(--muted);padding:2px 2px}
.lang a[aria-current="true"]{color:var(--ink);font-weight:500;border-bottom:1.5px solid var(--brand)}
.lang .sep{color:var(--line)}
.lang-btn{font-family:var(--mono)}
.menu-btn{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:4px}
.m-menu{display:none;position:relative;z-index:61;background:var(--paper)}
.m-menu.open{display:block;padding-top:10px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.m-menu a{display:block;padding:16px 0;font-size:23px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--line)}
.m-lang{display:flex;gap:24px;margin-top:16px;font-family:var(--mono);font-size:18px}
.m-lang a{border-bottom:none;padding:4px 0}
.m-lang a[aria-current="true"]{color:var(--brand);font-weight:600}

/* ============================================================
   ACT I · 00 HERO — the poster
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:clip}
.hero h1{
  font-family:var(--disp); font-weight:800; line-height:.88; letter-spacing:-.03em;
  padding-top:clamp(170px,24vh,250px);
}
.hero h1 .hl-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.04em}
.hero h1 .hl-line>span{display:block;transform:translateY(115%);transition:transform 1.15s var(--ease)}
.hero.loaded .hl-line>span{transform:none}
.hero.loaded .hl-line:nth-child(2)>span{transition-delay:.12s}
.hero.loaded .hl-line:nth-child(3)>span{transition-delay:.24s}
.hl-a{font-size:clamp(30px,5.4vw,78px)}
.hl-c{font-size:clamp(58px,12.3vw,190px);letter-spacing:-.04em}
.hl-c em{font-style:normal;color:var(--brand)}

/* corner annotations */
.hero-ann{
  position:absolute; font-family:var(--mono); font-size:var(--fs-micro);
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); z-index:2; line-height:2.1;
}
.ann-tl{left:clamp(22px,4.5vw,72px); bottom:34px}
.ann-br{right:clamp(22px,4.5vw,72px); bottom:34px; text-align:right}
.ann-bl{left:clamp(22px,4.5vw,72px); bottom:34px}
.ann-br .aro{display:inline-block;color:var(--brand);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.ann-br .aro{animation:none}}

/* ============================================================
   ACT I · THE FIELD — full-bleed Pajottenland with the statement
   ============================================================ */
.nature{position:relative;min-height:28vh;display:flex;align-items:center;overflow:clip;background:var(--paper);padding:clamp(24px,4.4vh,49px) 0}
.nature-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 55%;filter:saturate(.96);opacity:.5}
.nature-in{position:relative;z-index:2;width:100%}
.nature h2{
  font-family:var(--disp); font-weight:800; font-size:clamp(32px,4.6vw,71px);
  line-height:1.02; letter-spacing:-.025em; color:var(--ink); max-width:24ch;
}
.nature h2 .alt{color:var(--brand)}
.ar{font-family:var(--mono);color:var(--brand)}
@media (max-width:860px){
  .nature{min-height:0}
}

/* ============================================================
   ACT I · 02 — capabilities as an index, not cards
   ============================================================ */
.capdex{position:relative;overflow:clip;padding:clamp(40px,8vh,110px) 0 clamp(80px,13vh,170px)}
.capdex>.wrap{position:relative;z-index:1}
.capdex-head{margin-bottom:clamp(40px,7vh,70px)}
.crow{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(18px,3vw,54px); align-items:baseline;
  padding:clamp(26px,4.5vh,44px) 0; border-top:1.5px solid var(--ink);
  transition:padding-left .45s var(--ease);
}
.crow:hover{padding-left:18px}
.crow:last-child{border-bottom:1.5px solid var(--ink)}
.crow .ix{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;color:var(--brand);min-width:3.4em}
.crow h3{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.4vw,46px);letter-spacing:-.018em;line-height:1.02}
.crow .d{color:var(--muted);font-size:16.5px;max-width:44ch}
.crow .d .ex{display:block;line-height:1.9;font-family:var(--mono);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-top:14px}
.crow .d .ex b{color:var(--deep)}

/* inline client logos in the index rows — real colours, website-small */
.exlogo{height:38px;width:auto;display:inline-block;vertical-align:-13px;margin-right:10px}
/* the WhoTheHeckAmI mark is a yellow head cut out of a dark app: give it its frame back */
.exlogo--wthai{background:rgb(65,65,1);padding:3px}
.crow h3 a{color:inherit;text-decoration:none;border-bottom:2.5px solid var(--brand);padding-bottom:2px;transition:color .25s ease}
.crow h3 a:hover{color:var(--deep)}
.crow h3 .ext{font-family:var(--mono);font-size:.55em;color:var(--brand);margin-left:4px}
.crow .ex a{color:var(--deep);text-decoration:none;border-bottom:1.5px solid var(--brand);padding-bottom:1px}
.crow .ex a:hover{color:var(--brand)}
.crow .ex .ext{font-family:var(--mono);color:var(--brand);margin-left:2px}
.capdex .ledger-note{color:var(--muted);margin-top:clamp(30px,5vh,46px)}
.capdex .ledger-note b{color:var(--ink)}

/* ============================================================
   ACT I · 03 — proof counters + quiet marquee
   ============================================================ */
.proof{padding:0 0 clamp(90px,15vh,180px)}
.proof-head{margin-bottom:clamp(34px,6vh,60px)}
.proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,4.5vw,70px)}
.pair{font-family:var(--mono);font-weight:500;font-size:clamp(38px,4.6vw,72px);line-height:1;display:flex;align-items:baseline;gap:clamp(8px,1.3vw,20px);white-space:nowrap}
.pair .unit{font-size:.4em;letter-spacing:.06em}
.pair .to{color:var(--deep)}
.pair .ar{font-size:.5em}
.pair-cap{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:16px}
.clients{margin-top:clamp(50px,9vh,90px)}
.clients .lbl{display:block;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--brand);margin-bottom:18px}
.mq{overflow:clip;position:relative}
.mq-track{display:flex;gap:70px;width:max-content;animation:mq 30s linear infinite;align-items:baseline}
.mq:hover .mq-track{animation-play-state:paused}
.mq-track span{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.6vw,38px);color:var(--ink);opacity:.9}
.mq-track .dot{color:var(--brand);font-size:20px;opacity:1}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none;width:auto;flex-wrap:wrap;gap:24px}}

/* ============================================================
   THE CROSSING — B/W founders photo blends paper → ink
   ============================================================ */
/* content rides low in the crossing (align-end + small bottom padding) so
   the founders' names hand over to 02 without a dead zone - Eric 2026-08-12 */
.band{position:relative;min-height:86vh;display:flex;align-items:flex-end;overflow:clip;background:var(--ink)}
.band-bg{
  position:absolute; inset:-10% 0; background-size:cover; background-position:76% 18%;
  filter:grayscale(1) contrast(1.05) brightness(.56); will-change:transform;
}
.band::before{content:"";position:absolute;left:0;right:0;top:0;height:11%;z-index:1;
  background:linear-gradient(to bottom,var(--paper),transparent)}
.band::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:22%;z-index:1;
  background:linear-gradient(to top,var(--d-bg),transparent)}
.band-in{position:relative;z-index:2;padding-top:120px;padding-bottom:56px}
.pull{
  font-family:var(--disp); font-weight:700; font-size:clamp(32px,4.7vw,68px);
  line-height:1.06; letter-spacing:-.02em; color:#fff; max-width:19ch;
}
.pull .hl{color:var(--d-brand)}
.band .sub{font-size:17.5px;color:rgba(255,255,255,.85);margin-top:26px;max-width:44ch}
.band-founders{
  display:flex;gap:38px;flex-wrap:wrap;margin-top:48px;
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.8);
}

/* ============================================================
   ACT II — everything below lives on ink
   ============================================================ */
.act-dark{background:var(--d-bg);color:var(--d-ink)}
.act-dark .sec{padding:clamp(100px,15vh,200px) 0}
.sec{position:relative;overflow:clip;padding:clamp(80px,12vh,160px) 0}
.sec-title{
  font-family:var(--disp); font-weight:800; font-size:clamp(34px,5.1vw,78px);
  line-height:.98; letter-spacing:-.025em; margin:20px 0 26px;
}
.lede{font-size:17.5px;line-height:1.65;color:var(--muted);max-width:50ch}
/* a lede straight after the section stamp needs the air the title used to give it */
.stamp + .lede{margin-top:24px}
.lede b,.lede strong{color:var(--ink)}
.act-dark .lede{color:var(--d-muted)}
.act-dark .lede b,.act-dark .lede strong{color:var(--d-ink)}
.act-dark .stamp{color:var(--d-muted)}
.act-dark .stamp b{color:var(--d-brand)}
.act-dark .chip{color:var(--d-muted)}
.act-dark .chip::before{color:var(--d-brand)}
.act-dark .tlink{border-color:var(--d-brand)}
.act-dark .tlink:hover{color:var(--d-brand)}

/* ghost numeral — one per section, huge, off the edge */
.gnum{
  position:absolute; top:-.05em; right:-.06em; z-index:0; pointer-events:none;
  font-family:var(--disp); font-weight:800; line-height:.8;
  font-size:clamp(160px,26vw,380px); color:transparent;
  -webkit-text-stroke:1.5px rgba(85,179,132,.22); user-select:none;
}
.gnum--l{right:auto;left:-.06em}
.sec>.wrap{position:relative;z-index:1}

/* 04 · people — typographic, no boxes */
/* Eric's compressed rhythm (2026-08-12/13): the crossing hands over at
   ~30% of the default gap, founders→star stays at 30%, and everything
   from the star down (star → how → why → book, why moved last 2026-08-13)
   runs at half. Values are tuned against the RENDERED gaps (the star box
   carries ~60px of internal slack), not the tokens. */
#people{padding-top:clamp(30px,4.5vh,60px);padding-bottom:clamp(24px,3.6vh,48px)}
#bench{padding-top:clamp(24px,3.6vh,48px);padding-bottom:clamp(60px,9vh,120px)}
#why{padding-top:clamp(50px,7.5vh,100px);padding-bottom:clamp(45px,7vh,90px)}
#how{padding-top:clamp(60px,9vh,120px);padding-bottom:clamp(50px,7.5vh,100px)}
#book{padding-top:clamp(45px,7vh,90px)}
/* the how stamp is a full instruction now - runs 20% under stamp size;
   "click" pops 20% larger, green, and types itself letter by letter in a
   loop - the wipe leaves and returns left to right (Eric: draw the eye) */
#how .stamp{font-size:27.2px}
#how .stamp .clk{font-size:1.2em;color:var(--d-brand)}
.people-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,110px);margin-top:clamp(50px,9vh,90px)}
.f-card{background:transparent;border:0;border-radius:0;padding:0}
.f-card h3{font-family:var(--disp);font-weight:800;font-size:clamp(30px,3.7vw,54px);line-height:.98;letter-spacing:-.025em}
.f-role{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--d-brand);margin:16px 0 8px}
.f-stamps{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.f-card p{font-size:16px;color:var(--d-muted);max-width:38ch}
.f-card p b{color:var(--d-ink)}
.f-link{
  display:inline-block;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.15em;
  color:var(--d-ink);text-decoration:none;border-bottom:1.5px solid var(--d-brand);padding-bottom:4px;margin-top:24px;
}
.f-link:hover{color:var(--d-brand)}
.f-chips{display:flex;flex-wrap:wrap;gap:8px 30px;margin-top:clamp(44px,8vh,80px)}

/* 05 · pipeline — bare words that light up */
.pipe{display:flex;align-items:baseline;gap:clamp(14px,2vw,30px);flex-wrap:wrap;margin-top:clamp(40px,6vh,60px)}
.pipe .st{
  font-family:var(--disp); font-weight:700; font-size:clamp(24px,3.2vw,46px); letter-spacing:-.015em;
  color:var(--d-line); transition:color .6s ease,transform .6s var(--ease);
}
.pipe .st.lit{color:var(--d-muted);transform:translateY(-4px)}
.pipe .st--go{color:var(--d-line)}
.pipe .st--go.lit{color:var(--d-brand);text-shadow:0 0 50px rgba(85,179,132,.5)}
.pipe .sep{font-family:var(--mono);color:var(--d-line);font-size:clamp(18px,2vw,28px);transition:color .6s ease}
.pipe .sep.lit{color:var(--d-brand)}
.pipe-note{font-size:17px;color:var(--d-muted);max-width:50ch;margin-top:clamp(36px,6vh,54px)}
.pipe-note b{color:var(--d-ink)}

/* 06 · work — bare ledger rows */
.ledger{margin-top:clamp(50px,8vh,80px);display:grid;gap:clamp(34px,6vh,56px)}
.lrow{
  display:grid; grid-template-columns:minmax(160px,.9fr) minmax(0,1.9fr) minmax(170px,.9fr);
  gap:clamp(16px,2.5vw,44px); align-items:baseline;
  transition:transform .5s var(--ease);
}
.lrow:hover{transform:translateX(14px)}
.lrow .who a{color:inherit;text-decoration:none;border-bottom:2.5px solid var(--d-brand);padding-bottom:2px;transition:color .25s ease}
.lrow .who a:hover{color:var(--d-brand)}
.lrow .who .ext{font-family:var(--mono);font-size:.55em;color:var(--d-brand)}
.lrow .who{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.015em;line-height:1.05;color:var(--d-ink)}
.lrow .who small{display:block;font-family:var(--mono);font-size:16px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--d-muted);margin-top:8px}
.lrow .what{font-size:16.5px;color:var(--d-muted);max-width:52ch}
.lrow .what b{color:var(--d-ink)}
.lrow .side{text-align:right}
.lrow .met{font-family:var(--mono);font-weight:500;font-size:clamp(15px,1.5vw,19px);letter-spacing:.04em;color:var(--d-brand);white-space:nowrap}
.tag{
  display:block;font-family:var(--mono);font-size:16px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--d-muted);margin-top:10px;border:0;background:transparent;padding:0;border-radius:0;white-space:nowrap;
}
.tag::before{content:"● ";color:var(--d-muted)}
.tag--live::before{color:var(--d-brand)}
.tag--dev::before{color:#C9A44C}
.ledger-note{font-size:17px;color:var(--d-muted);max-width:60ch;margin-top:clamp(40px,7vh,64px)}
.ledger-note b{color:var(--d-ink)}

/* 07 · think — the five words */
/* the process line (Eric 2026-08-13): reading order = process order,
   LEFT TO RIGHT. Four columns - Listen above Understand on the left,
   then Train, Build, Improve - each branch tucked under its word, so
   the running light travels left to right. Word baselines align. */
.think{font-family:var(--disp);font-weight:800;line-height:1;letter-spacing:-.02em;margin-top:26px;
  display:grid;grid-template-columns:repeat(4,minmax(0,auto));justify-content:space-between;
  align-items:baseline;column-gap:clamp(16px,2vw,22px);row-gap:10px}
.think .w2{grid-column:1;grid-row:1}
.think .w3{grid-column:2;grid-row:1}
.think .w4{grid-column:3;grid-row:1}
.think .w5{grid-column:4;grid-row:1}
.think .w{display:flex;flex-direction:column;align-items:flex-start;
  opacity:0;transform:translateY(60px);transition:opacity .8s var(--ease),transform .8s var(--ease),color .45s var(--ease)}
.think .w .wb{margin-top:14px;margin-left:10px}
.think.in .w{opacity:1;transform:none}
.think.in .w2{transition-delay:0s}
.think.in .w3{transition-delay:.25s}
.think.in .w4{transition-delay:.5s}
.think.in .w5{transition-delay:.85s}
/* the two-line lede statement above the nature band - carries the old w1
   voice, sized so the longest (FR) first line holds one line */
.think-lede{font-family:var(--disp);font-weight:800;font-size:clamp(17px,1.6vw,23px);line-height:1.35;letter-spacing:-.01em;color:var(--d-muted);margin-top:26px}
/* the Pajottenland band lives inside #how now, between the lede and the words */
#how .nature{margin:38px 0 20px}
.think .w2{font-size:clamp(38px,4.35vw,62px);color:var(--d-ink)}
.think .w3{font-size:clamp(33px,3.75vw,55px);color:var(--d-muted)}
.think .w4{font-size:clamp(55px,8.25vw,116px);color:var(--d-brand);letter-spacing:-.035em}
.think .w5{font-size:clamp(33px,3.75vw,55px);color:var(--d-muted)}
/* NL and FR words run longer than EN at the same clamps - per-language
   trims keep the four-column line collision-free (measured 1920/1280/1150) */
:lang(nl) .think .w2{font-size:clamp(33px,4.2vw,60px)}
:lang(nl) .think .w4{font-size:clamp(50px,6.6vw,88px)}
:lang(nl) .think .w5{font-size:clamp(30px,3.4vw,48px)}
:lang(nl) .wb-t{font-size:clamp(16px,1.5vw,19px)}
:lang(fr) .think .w2{font-size:clamp(33px,4.1vw,52px)}
:lang(fr) .wb-t{font-size:clamp(15px,1.45vw,16.5px)}
/* the process line needs real width: below this the words re-stack
   with their branches back beside them and a small staircase indent */
@media (max-width:1250px){
  .think{display:block}
  .think .w{display:block}
  .think .w .wb{margin-top:0;margin-left:clamp(10px,1.8vw,24px)}
  .think .w2{padding-left:10vw}
  .think .w3{padding-left:5vw}
  .think .w4{padding-top:10px}
  .think .w5{padding-left:8vw}
}
@media (prefers-reduced-motion:reduce){.think .w{opacity:1;transform:none;transition:none}}

/* the word branches - Understand/Train/Build/Improve each grow a twig to
   a small pixel plate that jumps to where that step lives on the site.
   Same speck language as the AI tiles: green pixels, steps() runs on
   hover only, the finished picture when still or under reduced motion.
   The whole twig sways gently from its root, like the rest of the wind. */
#train{scroll-margin-top:56px}
/* --wbd staggers the reveal; --wbk phases the blink rotation so exactly
   one plate flashes every .8s, strictly top to bottom */
.think .w2{--wbd:.6s;--wbk:2.6s}
.think .w3{--wbd:.85s;--wbk:3.4s}
.think .w4{--wbd:1.15s;--wbk:4.2s}
.think .w5{--wbd:1.5s;--wbk:5s}
.wb{display:inline-flex;align-items:center;vertical-align:middle;margin-left:clamp(10px,1.8vw,24px);
  color:var(--d-muted);text-decoration:none;transform-origin:left center;animation:wbSway 7s ease-in-out infinite}
.wb-discover{animation-delay:-1.1s}
.wb-train{animation-delay:-3.2s}
.wb-build{animation-delay:-5.3s}
.wb-improve{animation-delay:-2.1s}
@keyframes wbSway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-1.3deg)}}
.wb:focus-visible{outline:2px solid var(--d-brand);outline-offset:6px}
/* the pointing hand + "click here" - Eric's affordance ask, replaces the
   twig elbow so the branch still fits the four-column line */
.wb-cta{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;font-family:'Inter',sans-serif;font-weight:500;
  font-size:13px;letter-spacing:.02em;color:var(--d-brand);margin-right:7px;white-space:nowrap;opacity:0}
.wb-hand{width:16px;height:12px;flex:0 0 auto}
.wb-hand rect{fill:var(--d-brand)}
.wb-plate{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;margin-left:-4px;
  border:1.5px solid var(--d-line);background:var(--d-surface);opacity:0;
  transition:background .3s,border-color .3s}
.wb-i{width:26px;height:26px;display:block}
.wb-i rect{fill:var(--d-brand);transition:fill .3s}
/* the label wears the site's link uniform (ink + green underline, same as
   every go-link) - Eric: make the clickability obvious */
.wb-t{font-family:var(--mono);font-size:clamp(16px,1.55vw,20px);font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--d-ink);border-bottom:1.5px solid var(--d-brand);padding-bottom:4px;
  margin-left:10px;white-space:nowrap;opacity:0;transition:color .3s}
.wb:hover .wb-t,.wb:focus-visible .wb-t,.wb.on .wb-t{color:var(--d-brand)}
/* reveal: the word lands, the hand + plate arrive. Then a running light:
   each plate holds its inverted (= hover/open) state for .8s and hands it
   straight to the next - one plate lit at any moment, strict rotation,
   no dark gap (Eric 2026-08-13: the off-pause between flashes read as an
   uneven rhythm). Hover and .on cancel it below. */
.think.in .wb-t,.think.in .wb-cta{animation:wbIn .55s var(--ease) both;animation-delay:calc(var(--wbd) + .3s)}
.think.in .wb-plate{animation:wbIn .55s var(--ease) both,wbBlink 3.2s steps(1,end) infinite;
  animation-delay:calc(var(--wbd) + .3s),var(--wbk)}
.think.in .wb-i rect{animation:wbBlinkI 3.2s steps(1,end) infinite;animation-delay:var(--wbk)}
@keyframes wbIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes wbBlink{0%{background:var(--d-brand);border-color:var(--d-brand)}25%,100%{background:var(--d-surface);border-color:var(--d-line)}}
@keyframes wbBlinkI{0%{fill:var(--d-bg)}25%,100%{fill:var(--d-brand)}}
/* hover: the plate inverts, its pixels run, the word answers in green.
   The blink loop is dropped here (and while open) so the static hover /
   open styles actually paint - wbIn stays listed so the plate's reveal
   opacity survives the swap. */
.wb:hover,.wb:focus-visible{color:var(--d-brand)}
.think.in .wb:hover .wb-plate,.think.in .wb:focus-visible .wb-plate,.think.in .wb.on .wb-plate{
  animation:wbIn .55s var(--ease) both;animation-delay:calc(var(--wbd) + .3s)}
.wb:hover .wb-i rect,.wb:focus-visible .wb-i rect,.wb.on .wb-i rect{animation:none}
.wb:hover .wb-plate,.wb:focus-visible .wb-plate{background:var(--d-brand);border-color:var(--d-brand)}
.wb:hover .wb-i rect,.wb:focus-visible .wb-i rect{fill:var(--d-bg)}
.think .w:has(.wb:hover),.think .w:has(.wb:focus-visible){color:var(--d-brand)}
.think .w4:has(.wb:hover),.think .w4:has(.wb:focus-visible){color:var(--d-ink)}
/* a branch whose stage card is open holds the inverted plate (no pixel
   run - that stays a hover reward) so you can see what's open below */
.wb.on{color:var(--d-brand)}
.wb.on .wb-plate{background:var(--d-brand);border-color:var(--d-brand)}
.wb.on .wb-i rect{fill:var(--d-bg)}
/* the four runs, all steps(): lens sweeps · cap fills · bricks stack · speck hops */
.wb:hover .wb-i1 rect,.wb:focus-visible .wb-i1 rect{animation:wbRun 1.7s steps(1,end) infinite}
.wb:hover .wb-i1 .s2,.wb:focus-visible .wb-i1 .s2{animation-delay:.17s}
.wb:hover .wb-i1 .s3,.wb:focus-visible .wb-i1 .s3{animation-delay:.34s}
.wb:hover .wb-i1 .s4,.wb:focus-visible .wb-i1 .s4{animation-delay:.51s}
.wb:hover .wb-i1 .s5,.wb:focus-visible .wb-i1 .s5{animation-delay:.75s}
.wb:hover .wb-i2 rect,.wb:focus-visible .wb-i2 rect{animation:wbRun 1.8s steps(1,end) infinite}
.wb:hover .wb-i2 .t2,.wb:focus-visible .wb-i2 .t2{animation-delay:.25s}
.wb:hover .wb-i2 .t3,.wb:focus-visible .wb-i2 .t3{animation-delay:.5s}
.wb:hover .wb-i2 .t4,.wb:focus-visible .wb-i2 .t4{animation-delay:.7s}
.wb:hover .wb-i3 rect,.wb:focus-visible .wb-i3 rect{animation:wbRun 2s steps(1,end) infinite}
.wb:hover .wb-i3 .k2,.wb:focus-visible .wb-i3 .k2{animation-delay:.12s}
.wb:hover .wb-i3 .k3,.wb:focus-visible .wb-i3 .k3{animation-delay:.24s}
.wb:hover .wb-i3 .k4,.wb:focus-visible .wb-i3 .k4{animation-delay:.42s}
.wb:hover .wb-i3 .k5,.wb:focus-visible .wb-i3 .k5{animation-delay:.54s}
.wb:hover .wb-i3 .k6,.wb:focus-visible .wb-i3 .k6{animation-delay:.75s}
.wb-i4 .h1,.wb-i4 .h2,.wb-i4 .h3{opacity:0}
.wb:hover .wb-i4 .h1,.wb:focus-visible .wb-i4 .h1{animation:wbH1 1.5s steps(1,end) infinite}
.wb:hover .wb-i4 .h2,.wb:focus-visible .wb-i4 .h2{animation:wbH2 1.5s steps(1,end) infinite}
.wb:hover .wb-i4 .h3,.wb:focus-visible .wb-i4 .h3{animation:wbH3 1.5s steps(1,end) infinite}
.wb:hover .wb-i4 .h4,.wb:focus-visible .wb-i4 .h4{animation:wbH4 1.5s steps(1,end) infinite}
@keyframes wbRun{0%{fill:rgba(13,31,22,.25)}55%,100%{fill:var(--d-bg)}}
@keyframes wbH1{0%{opacity:1}25%,100%{opacity:0}}
@keyframes wbH2{0%{opacity:0}25%{opacity:1}50%,100%{opacity:0}}
@keyframes wbH3{0%{opacity:0}50%{opacity:1}75%,100%{opacity:0}}
@keyframes wbH4{0%{opacity:0}75%,100%{opacity:1}}
@media (max-width:700px){
  .wb-t{display:none}
  .wb{margin-left:10px}
  .wb-line{width:22px;height:20px}
  .wb-plate{width:36px;height:36px}
  .wb-i{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  .wb{animation:none}
  .think.in .wb-line path,.think.in .wb-plate,.think.in .wb-t,.think.in .wb::after{animation:none}
  .think.in .wb:hover .wb-plate,.think.in .wb:focus-visible .wb-plate,.think.in .wb.on .wb-plate{animation:none}
  .think.in .wb-i rect{animation:none}
  .wb-line path{stroke-dashoffset:0}
  .wb-plate,.wb-t,.wb::after{opacity:1}
  .wb:hover .wb-i rect,.wb:focus-visible .wb-i rect,
  .wb:hover .wb-i4 .h1,.wb:hover .wb-i4 .h2,.wb:hover .wb-i4 .h3,.wb:hover .wb-i4 .h4{animation:none}
  .wb-i4 .h1,.wb-i4 .h2,.wb-i4 .h3{opacity:0}
}

/* the stage cards behind the branches - Eric's old-site 4-stage copy.
   Not modals: each branch toggles its card open inside .flow, an inline
   row under the words. Open cards stay open and sit side by side in
   stage order 1-4 - one flow, like the old site's stepper. */
.flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:22px;margin-top:0}
.flow:has(.pvd.on){margin-top:clamp(36px,6vh,64px)}
.pvd{display:none;position:relative;flex:1 1 270px;min-width:0;box-sizing:border-box;
  border:1.5px solid var(--d-line);background:var(--d-surface);color:var(--d-ink);
  padding:clamp(20px,2.2vw,30px)}
.pvd.on{display:flex;flex-direction:column;animation:pvIn .55s var(--ease)}
@keyframes pvIn{from{opacity:0;transform:translateY(22px)}}
/* the little green dash that stitches adjacent open cards into one flow
   (only where the four columns genuinely fit on one row) */
@media (min-width:1280px){
  .pvd.on:has(~ .pvd.on)::after{content:"";position:absolute;top:38px;right:-19px;width:16px;height:3px;background:var(--d-brand)}
}
.pvd-x{position:absolute;top:14px;right:14px;background:none;border:1.5px solid var(--d-line);color:var(--d-muted);
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 10px;cursor:pointer;transition:color .3s,border-color .3s}
.pvd-x:hover{color:var(--d-brand);border-color:var(--d-brand)}
.pvd .stamp{padding-right:86px}
.pvd h3{font-family:var(--disp);font-weight:700;font-size:clamp(22px,1.9vw,27px);line-height:1.12;letter-spacing:-.015em;
  color:var(--d-ink);margin:12px 0 16px}
.pvd-art{display:block;width:100%;height:clamp(58px,5.4vw,78px);flex:0 0 auto;margin:2px 0 18px}
.pvd-art rect{fill:var(--d-brand)}
.pvd-art .bgp,.pvd-art .stp{fill:var(--d-line)}
.pvd-body{color:var(--d-muted);font-size:15px;line-height:1.6;max-width:54ch}
.pvd-k{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--d-ink);margin:20px 0 2px}
.pvd-list{list-style:none;margin:0;padding:0;width:100%}
.pvd-list li{position:relative;padding:9px 0 9px 20px;color:var(--d-muted);font-size:14px;line-height:1.55;border-top:1px solid var(--d-line)}
.pvd-list li:first-child{border-top:0}
.pvd-list li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;background:var(--d-brand)}
.pvd-list b{color:var(--d-ink);font-weight:600}
.pvd-go{display:inline-block;align-self:flex-start;margin-top:auto;padding-top:26px;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--d-ink);text-decoration:none;border-bottom:1.5px solid var(--d-brand);
  padding-bottom:5px;transition:color .3s}
.pvd-go:hover{color:var(--d-brand)}
.pvd-x:focus-visible,.pvd-go:focus-visible{outline:2px solid var(--d-brand);outline-offset:4px}

/* the four scenes, one slow steps() loop each; every animated rect rests on
   its finished state, so reduced-motion just shows the completed picture */
@keyframes pvCycle{0%{fill:var(--d-line)}16%,100%{fill:var(--d-brand)}}
/* educate: the board fills line by line, the room lights up seat by seat */
.pv-a1 .e1,.pv-a1 .e2,.pv-a1 .e3,.pv-a1 .e4,
.pv-a1 .s1,.pv-a1 .s2,.pv-a1 .s3,.pv-a1 .s4,.pv-a1 .s5{animation:pvCycle 16.8s steps(1,end) infinite}
.pv-a1 .e2{animation-delay:1.35s}.pv-a1 .e3{animation-delay:2.7s}.pv-a1 .e4{animation-delay:4.05s}
.pv-a1 .s1{animation-delay:6.9s}.pv-a1 .s2{animation-delay:8.1s}.pv-a1 .s3{animation-delay:9.3s}
.pv-a1 .s4{animation-delay:10.5s}.pv-a1 .s5{animation-delay:11.7s}
/* discover: a scan sweeps the process map; three opportunities stay lit */
.pv-a2 .scan{opacity:.3;animation:pvScan 18s steps(30,end) infinite}
@keyframes pvScan{0%{transform:translateX(0)}100%{transform:translateX(174px)}}
.pv-a2 .hA{animation:pvHitA 18s steps(1,end) infinite}
.pv-a2 .hB{animation:pvHitB 18s steps(1,end) infinite}
.pv-a2 .hC{animation:pvHitC 18s steps(1,end) infinite}
@keyframes pvHitA{0%,25%{fill:var(--d-line)}26%,100%{fill:var(--d-brand)}}
@keyframes pvHitB{0%,59%{fill:var(--d-line)}60%,100%{fill:var(--d-brand)}}
@keyframes pvHitC{0%,77%{fill:var(--d-line)}78%,100%{fill:var(--d-brand)}}
/* deliver: the solution stacks up, then the connectors to the systems you
   already run light through */
.pv-a3 .d1,.pv-a3 .d2,.pv-a3 .d3,.pv-a3 .d4,.pv-a3 .d5,.pv-a3 .d6,
.pv-a3 .l1,.pv-a3 .l2,.pv-a3 .l3,.pv-a3 .lc,
.pv-a3 .l4,.pv-a3 .l5,.pv-a3 .l6,.pv-a3 .l7,.pv-a3 .l8,.pv-a3 .l9{animation:pvCycle 19.5s steps(1,end) infinite}
.pv-a3 .d2{animation-delay:.9s}.pv-a3 .d3{animation-delay:1.8s}
.pv-a3 .d4{animation-delay:3s}.pv-a3 .d5{animation-delay:3.9s}.pv-a3 .d6{animation-delay:5.1s}
.pv-a3 .l1{animation-delay:7.8s}.pv-a3 .l2{animation-delay:8.25s}.pv-a3 .l3{animation-delay:8.7s}
.pv-a3 .lc{animation-delay:9.15s}
.pv-a3 .l4{animation-delay:9.6s}.pv-a3 .l5{animation-delay:10.05s}.pv-a3 .l6{animation-delay:10.5s}
.pv-a3 .l7{animation-delay:10.95s}.pv-a3 .l8{animation-delay:11.4s}.pv-a3 .l9{animation-delay:11.85s}
/* partner: two specks climb the same stairs together, one step apart */
.pv-a4 .spL{animation:pvHop 22.5s steps(1,end) infinite}
.pv-a4 .spC{opacity:.55;animation:pvHop 22.5s steps(1,end) 1.5s infinite backwards}
@keyframes pvHop{
  0%{transform:translate(-160px,48px)}11%{transform:translate(-140px,42px)}
  22%{transform:translate(-120px,36px)}33%{transform:translate(-100px,30px)}
  44%{transform:translate(-80px,24px)}55%{transform:translate(-60px,18px)}
  66%{transform:translate(-40px,12px)}77%{transform:translate(-20px,6px)}
  88%,100%{transform:translate(0,0)}
}
@media (max-width:700px){
  .pvd{flex-basis:100%}
  .pvd-x{top:12px;right:12px}
}
@media (prefers-reduced-motion:reduce){
  .pvd.on{animation:none}
  .pvd .pvd-art rect{animation:none}
  .pvd .pv-a2 .scan{display:none}
}

/* 08 · star schema on ink */
.star-wrap{perspective:1200px;margin-top:clamp(30px,5vh,60px)}
.star{position:relative;height:760px;transform-style:preserve-3d}
.star.live{animation:starSway 9s ease-in-out infinite}
@keyframes starSway{
  0%,100%{transform:rotateX(9deg) rotateY(-8deg)}
  50%{transform:rotateX(3deg) rotateY(8deg)}
}
.star svg{position:absolute;inset:0;width:100%;height:100%}
.star svg line{stroke:#55B384;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s var(--ease)}
.star.drawn svg line{stroke-dashoffset:0}
.star svg g:nth-child(2) line{transition-delay:.55s}
.star .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateZ(56px);text-align:center;width:250px}
.star .hub .hub-ph{
  width:200px;height:200px;border-radius:50%;margin:0 auto 18px;overflow:hidden;
  border:3px solid var(--d-line);box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
}
.star .hub .hub-ph img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:grayscale(1) contrast(1.05)}
.star .hub .t{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--d-muted)}
.star .nd{position:absolute;transform:translate(-50%,-50%) translateZ(30px)}
.star .nd--exp{transform:translate(-50%,-50%) translateZ(42px)}
.star .nd .fl{display:inline-block;animation:ndFloat 5.6s ease-in-out infinite}
.star .nd:nth-child(odd) .fl{animation-duration:6.8s;animation-delay:-2.2s}
.star .nd:nth-child(3n) .fl{animation-duration:7.4s;animation-delay:-3.6s}
@keyframes ndFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.star .nd .chip{font-size:var(--fs-label);color:var(--d-muted);background:transparent;white-space:nowrap}
.star .nd .chip::before{color:var(--d-muted)}
.star .nd--exp .chip{color:var(--d-ink);font-weight:500}
.star .nd--exp .chip::before{color:var(--d-brand)}
/* the bench: pixel people between the discipline chips (Eric's ask) */
.star .nd--av .av{width:36px;height:36px;display:block;opacity:.92}
/* "ERP experts" outgrew the far-left extreme: below 1150px the centred
   label would clip the page edge, so the node steps one ring inward */
@media (max-width:1150px){.star .nd--farl{left:9%!important}}
@media (prefers-reduced-motion:reduce){
  .star.live{animation:none;transform:none}
  .star .nd .fl{animation:none}
  .star svg line{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
}
/* The absolute star needs real width: below this the ring cannot hold
   eleven long labels without collisions, so it reflows into a list. */
@media (max-width:900px){
  .star-wrap{perspective:none}
  .star{height:auto;display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:center;transform:none!important;animation:none!important}
  .star svg{display:none}
  .star .hub{position:static;transform:none;width:100%;margin-bottom:16px}
  .star .nd,.star .nd--exp{position:static;transform:none}
  .star .nd--av{align-self:center}
  .star .nd--av .av{width:24px;height:24px}
}

/* 03 · why AI - five advantage tiles, left to right. Each carries a small
   looping pixel animation in the flock's speck language: steps() timing for
   the pixel feel, and every keyframe starts from the finished state so
   reduced-motion (animation:none) shows the completed picture. */
.ai-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:clamp(36px,6vh,60px)}
@media (max-width:1180px){.ai-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.ai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.ai-grid{grid-template-columns:1fr}}
.aib{border:1.5px solid var(--d-line);background:var(--d-surface);padding:22px 20px 24px;border-radius:0}
.aib h3{font-family:var(--disp);font-weight:700;font-size:clamp(19px,1.6vw,23px);line-height:1.15;color:var(--d-ink);margin:18px 0 8px}
/* five-across only: reserve two title lines so the bodies share a baseline */
@media (min-width:1181px){.aib h3{min-height:2.4em}}
.aib p{font-size:15.5px;line-height:1.55;color:var(--d-muted)}
.aib-anim{width:64px;height:40px;display:block}
.aib-anim rect{fill:var(--d-brand)}

/* 1 · hours back: the day's work completes block by block */
.aib-a1 .t{animation:aibFill 3.2s steps(1,end) infinite}
.aib-a1 .t:nth-child(1){animation-delay:0s}.aib-a1 .t:nth-child(2){animation-delay:.25s}
.aib-a1 .t:nth-child(3){animation-delay:.5s}.aib-a1 .t:nth-child(4){animation-delay:.75s}
.aib-a1 .t:nth-child(5){animation-delay:1s}.aib-a1 .t:nth-child(6){animation-delay:1.25s}
.aib-a1 .t:nth-child(7){animation-delay:1.5s}.aib-a1 .t:nth-child(8){animation-delay:1.75s}
@keyframes aibFill{0%{fill:var(--d-line)}62%,100%{fill:var(--d-brand)}}

/* 2 · reads: a scan bar sweeps the document, lines light up behind it */
.aib-a2 .l{animation:aibRead 3.6s steps(1,end) infinite}
.aib-a2 .l:nth-child(1){animation-delay:0s}.aib-a2 .l:nth-child(2){animation-delay:.55s}
.aib-a2 .l:nth-child(3){animation-delay:1.1s}.aib-a2 .l:nth-child(4){animation-delay:1.65s}
.aib-a2 .scan{fill:var(--d-brand);opacity:.28;animation:aibScan 3.6s steps(4,end) infinite}
@keyframes aibRead{0%{fill:var(--d-line)}15%,100%{fill:var(--d-brand)}}
@keyframes aibScan{0%{transform:translateY(0)}61%{transform:translateY(34px)}61.1%,100%{transform:translateY(0);opacity:0}}

/* 3 · never tired: a steady pulse, identical every beat */
.aib-a3 .p{animation:aibBeat 1.4s steps(1,end) infinite}
.aib-a3 .p:nth-child(1){animation-delay:0s}.aib-a3 .p:nth-child(2){animation-delay:.35s}
.aib-a3 .p:nth-child(3){animation-delay:.7s}.aib-a3 .p:nth-child(4){animation-delay:1.05s}
@keyframes aibBeat{0%{fill:var(--d-line)}25%,100%{fill:var(--d-brand)}}

/* 4 · answers: the bars of a report drawing themselves */
.aib-a4 .b{transform-origin:center bottom;animation-duration:3s;animation-timing-function:steps(5,end);animation-iteration-count:infinite}
.aib-a4 .b1{animation-name:aibBar1}.aib-a4 .b2{animation-name:aibBar2;animation-delay:.2s}
.aib-a4 .b3{animation-name:aibBar3;animation-delay:.4s}.aib-a4 .b4{animation-name:aibBar4;animation-delay:.6s}
@keyframes aibBar1{0%{transform:scaleY(0)}55%,100%{transform:scaleY(.45)}}
@keyframes aibBar2{0%{transform:scaleY(0)}55%,100%{transform:scaleY(.7)}}
@keyframes aibBar3{0%{transform:scaleY(0)}55%,100%{transform:scaleY(.35)}}
@keyframes aibBar4{0%{transform:scaleY(0)}55%,100%{transform:scaleY(1)}}
.aib-a4 .b1{transform:scaleY(.45)}.aib-a4 .b2{transform:scaleY(.7)}
.aib-a4 .b3{transform:scaleY(.35)}.aib-a4 .b4{transform:scaleY(1)}

/* 5 · people included: knowledge spreads through the team cell by cell */
.aib-a5 .g{animation:aibLearn 4s steps(1,end) infinite}
.aib-a5 .g1{animation-delay:0s}.aib-a5 .g2{animation-delay:.3s}.aib-a5 .g4{animation-delay:.3s}
.aib-a5 .g3{animation-delay:.6s}.aib-a5 .g5{animation-delay:.6s}.aib-a5 .g7{animation-delay:.6s}
.aib-a5 .g6{animation-delay:.9s}.aib-a5 .g8{animation-delay:.9s}.aib-a5 .g9{animation-delay:1.2s}
@keyframes aibLearn{0%{fill:var(--d-line)}40%,100%{fill:var(--d-brand)}}

@media (prefers-reduced-motion:reduce){
  .aib-anim rect{animation:none}
  .aib-a2 .scan{display:none}
}

/* 09 · the model — bare columns */
.model{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(34px,5vw,80px) clamp(30px,4vw,70px);margin-top:clamp(44px,7vh,70px)}
.model .m{border:0;border-radius:0;padding:0;border-top:1.5px solid var(--d-line);padding-top:22px}
.model h4{font-family:var(--disp);font-weight:700;font-size:clamp(21px,2.2vw,28px);margin-bottom:10px;color:var(--d-ink)}
.model p{color:var(--d-muted);font-size:16.5px;max-width:36ch}
.wontget{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:clamp(40px,6vh,60px)}
.wontget span{
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--d-muted);text-decoration:line-through;text-decoration-color:var(--d-brand);text-decoration-thickness:2px;
}
.transp{display:flex;flex-wrap:wrap;gap:14px 38px;margin-top:clamp(28px,4vh,44px);font-family:var(--mono);font-size:17px;letter-spacing:.06em;color:var(--d-muted)}
.transp b{color:var(--d-ink);font-weight:500}

/* 10 · faq on ink */
.faq{max-width:880px;margin:clamp(40px,6vh,64px) auto 0}
.faq details{border-top:1px solid var(--d-line)}
.faq details:last-child{border-bottom:1px solid var(--d-line)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  cursor:pointer;list-style:none;padding:26px 4px;
  font-family:var(--disp);font-weight:700;font-size:clamp(18px,1.9vw,23px);color:var(--d-ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{font-family:var(--mono);color:var(--d-brand);font-size:24px;flex-shrink:0;transition:transform .4s var(--ease)}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq details[open] .faq-body{grid-template-rows:1fr}
.faq .faq-body>p{overflow:hidden;color:var(--d-muted);font-size:16px;max-width:66ch;padding:0 4px}
.faq details[open] .faq-body>p{padding-bottom:28px}
.faq details>p{overflow:hidden;color:var(--d-muted);font-size:16px;max-width:66ch;padding:0 4px 28px}

/* 11 · book — line-form, no card */
.book-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(34px,5vw,80px);margin-top:clamp(44px,7vh,70px)}
.cal-frame{border:1px solid var(--d-line);background:#fff}
.cal-frame iframe{width:100%;height:620px;border:0;display:block}
.cal-alt{
  display:inline-block;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--d-brand);margin-top:18px;text-decoration:none;border-bottom:1.5px solid var(--d-brand);padding-bottom:4px;
}
.lead-form{background:transparent;border:0;border-radius:0;padding:0}
.lead-form .ft{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.2vw,28px);margin-bottom:26px;color:var(--d-ink);background:transparent;border:0;padding:0}
.lead-form label{display:block;font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--d-muted);margin:26px 0 4px}
.lead-form input{
  width:100%;padding:12px 2px;border:0;border-bottom:1.5px solid var(--d-line);border-radius:0;
  background:transparent;color:var(--d-ink);font-family:var(--body);font-size:17px;
  transition:border-color .3s ease;
}
.lead-form input:focus{outline:none;border-bottom-color:var(--d-brand)}
.lead-form input::placeholder{color:#4e6558}
.lead-form button{
  margin-top:36px;padding:16px 30px;border:1.5px solid var(--d-brand);border-radius:0;cursor:pointer;
  background:var(--d-brand);color:var(--d-bg);font-family:var(--mono);font-weight:500;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;
  transition:transform .35s var(--ease),background-color .25s ease,color .25s ease;
}
.lead-form button:hover{transform:translateY(-3px);background:transparent;color:var(--d-brand)}
.lead-form button:disabled{opacity:.6;cursor:wait}
.lead-privacy{display:flex;align-items:center;gap:9px;font-size:16.5px;color:var(--d-muted);margin-top:16px}
.lead-status{display:none;font-size:15px;color:var(--d-brand);margin-top:12px}
.lead-status.show{display:block}
.book-fund{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--d-muted);margin-top:22px;line-height:2}

/* ---------- footer ---------- */
.ft{background:var(--d-bg);color:var(--d-ink);border-top:1px solid var(--d-line)}
.ft-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,64px);padding:clamp(52px,8vh,90px) 0 clamp(34px,5vh,54px)}
.ft .logo{color:var(--d-ink);font-size:34px}
.ft p{color:var(--d-muted);font-size:16.5px;margin-top:16px;line-height:1.9}
.ft h3{font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--d-brand);margin-bottom:20px}
.ft ul{list-style:none}
.ft li{margin-bottom:13px}
.ft a{color:var(--d-muted);text-decoration:none;font-size:17px;transition:color .25s ease}
.ft a:hover{color:var(--d-ink)}
.ft-base{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--d-line);padding:26px 0 32px;font-size:16.5px;color:var(--d-muted);
}
.tagline{font-family:var(--mono);font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:var(--d-brand)}

/* ---------- partners page ---------- */
.partner-card{
  background:transparent;border:1.5px solid var(--line);border-radius:0;
  padding:clamp(28px,3.4vw,48px);max-width:660px;margin-top:clamp(34px,6vh,56px);
}
.partner-card h2,.partner-card h3{font-family:var(--disp);font-weight:700;font-size:clamp(24px,2.6vw,34px);margin:16px 0 16px}
.partner-card p{color:var(--muted);font-size:16px;margin-bottom:14px}
/* the partners page is light: the card must not inherit dark-world tokens */
.partner-card .tag{color:var(--muted)}
.partner-card .tag::before{color:var(--brand)}
.partner-card .f-link{color:var(--ink);border-color:var(--brand)}
.partner-card .f-link:hover{color:var(--deep)}

/* pages that are not the homepage need a solid header background */
body.subpage .hd{position:relative;background:var(--paper);border-bottom:1.5px solid var(--line)}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .crow{grid-template-columns:1fr}
  .crow .d{grid-column:1}
  .lrow{grid-template-columns:1fr;gap:10px}
  .lrow .side{text-align:left}
}
@media (max-width:860px){
  .nav{display:none}
  .hd-right .btn,.hd-right .lang{display:none}
  .menu-btn{display:block}
  .hero{min-height:92svh}
  .hl-a{font-size:clamp(19px,5.4vw,42px)}
  .hl-c{font-size:clamp(45px,12.4vw,96px)}
  .ann-tl{display:none}
  .ann-br{display:none}
  .proof-grid{grid-template-columns:1fr;gap:44px}
  .pair{font-size:clamp(40px,11vw,64px)}
  .people-grid{grid-template-columns:1fr;gap:56px}
  .model{grid-template-columns:1fr}
  .book-grid{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr}
  .gnum{font-size:clamp(130px,32vw,220px);opacity:.7}
  .band{min-height:80vh}
}

/* ============================================================
   LEGACY — used only by /nl/ and /fr/ until regenerated.
   ============================================================ */
.caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,44px)}
@media (max-width:860px){.caps{grid-template-columns:1fr}}
.cap{background:transparent;border:1.5px solid var(--line);padding:clamp(24px,3vw,40px)}
.cap .k{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.cap h3{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.4vw,30px);line-height:1.1;margin:14px 0 12px}
.cap p{color:var(--muted);max-width:42ch;font-size:15.5px}
.cap .ex{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.cap .ex b{color:var(--deep)}
.hero-blocks{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.hero-sub{font-size:17px;color:var(--muted);max-width:46ch;margin-bottom:28px}
.hero-chips{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:36px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.hero-founders{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:2.1}
.hero-founders a{color:var(--brand)}
.eyebrow{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:24px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,72px);padding:clamp(110px,16vh,170px) 0 clamp(56px,9vh,120px)}
@media (max-width:1060px){.hero-grid{grid-template-columns:1fr}}
.proof-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 60px;padding:56px 0 34px}
.proof-in .stat .n{font-family:var(--mono);font-weight:500;font-size:clamp(30px,3.4vw,44px)}
.proof-in .stat .c{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.clients :where(span:not(.lbl)){font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-right:22px}
.clients :where(.mq-track span){margin-right:0}
.people-ph{overflow:hidden}
.people-ph img{width:100%;height:100%;object-fit:cover}
.ph-card{overflow:hidden;box-shadow:0 24px 50px -24px rgba(13,31,22,.35)}
.ph-cap{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:16px;line-height:2}
.ph-cap span{display:block}
.ph-cap a{color:var(--brand)}
.underchips{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:clamp(30px,5vh,52px)}
.sec-dark{background:var(--d-bg);color:var(--d-ink)}
.sec-dark .sec-title{color:var(--d-ink)}
.sec-dark .lede{color:var(--d-muted)}
.sec-dark .stamp{color:var(--d-muted)}
.sec-dark .stamp b{color:var(--d-brand)}