/* ============================================================
   alongside · site system
   Source of truth: DESIGN.md (which wins over docs/).
   ============================================================ */
:root{
  --white:#FFFFFF; --ink:#111410; --ink-soft:#515750; --line:#E1E4DF;
  --danube:#25397E; --danube-deep:#1C2B62; --danube-wash:#E9EDF8;
  --amber:#D4784A; --clay:#A64B2A; --dot:#BE5C46;
  --white-25:rgba(255,255,255,.25);
  --font:"Figtree","Helvetica Neue",Arial,sans-serif;
  --r-input:10px; --r-md:16px; --r-lg:24px; --pill:999px;
  --ease:cubic-bezier(0.2,0,0,1);
  --measure:720px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--white); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
::selection{background:var(--danube);color:var(--white)}

.wrap{max-width:1440px;margin:0 auto;padding-inline:48px}
@media(max-width:768px){.wrap{padding-inline:24px}}

/* ---------- type ---------- */
.display{font-size:clamp(52px,5.7vw,88px);font-weight:700;line-height:1.0;letter-spacing:-0.028em;text-wrap:balance}
.h1{font-size:clamp(44px,5vw,72px);font-weight:700;line-height:1.05;letter-spacing:-0.02em;text-wrap:balance}
.h2{font-size:clamp(34px,3.4vw,50px);font-weight:600;line-height:1.1;letter-spacing:-0.012em;max-width:900px;text-wrap:balance}
.h3{font-size:26px;font-weight:600;line-height:1.25}
.lead{font-size:21px;line-height:1.55;color:var(--ink-soft);max-width:760px}
.body{max-width:var(--measure)}
.body p+p{margin-top:16px}
.small{font-size:14px;line-height:1.5;color:var(--ink-soft)}
a{color:var(--danube)}
p a,li a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}

/* ---------- evidence register ---------- */
.ev{font-size:13.5px;line-height:1.55;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ev a{color:var(--danube);text-decoration:underline;text-underline-offset:3px}
.ev-label{display:inline-block;font-size:13px;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:2px 9px;margin-right:8px}
.ev-label--stage{color:var(--danube);border-color:var(--danube)}
.ev-label--pending{color:var(--ink-soft)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:16px;font-weight:600;line-height:1.2;
  padding:14px 26px;border-radius:var(--pill);cursor:pointer;text-decoration:none;border:1px solid transparent;
  transition:background 180ms var(--ease),color 180ms var(--ease),border-color 180ms var(--ease),transform 180ms var(--ease)}
.btn-primary{background:var(--danube);color:var(--white)}
.btn-primary:hover{background:var(--danube-deep);transform:translateY(-1px)}
.btn-secondary{background:var(--white);color:var(--danube);border-color:var(--danube)}
.btn-secondary:hover{background:var(--danube-wash)}
.btn-glass{background:rgba(255,255,255,.20);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.34)}
.btn:focus-visible{outline:3px solid var(--danube);outline-offset:2px}
.btn-primary:focus-visible,.on-danube .btn:focus-visible,.btn-glass:focus-visible{outline:3px solid var(--danube);outline-offset:2px;box-shadow:0 0 0 2px #fff inset}
.textlink{color:var(--danube);font-weight:500;text-decoration:none}
.textlink:hover,.textlink:focus-visible{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--danube);outline-offset:2px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid transparent;transition:border-color 200ms var(--ease)}
.nav.is-scrolled{border-bottom-color:var(--line)}
.nav-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-size:21px;font-weight:600;letter-spacing:-0.01em}
.brand .dot{width:17px;height:17px;border-radius:50%;background:var(--dot);flex:none}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links>a:not(.btn),.nav-links .drop>button,.nav-links .drop>.drop-link{font-family:var(--font);font-size:16px;font-weight:500;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;padding:4px 0}
.nav-links>a:not(.btn):hover,.nav-links .drop>button:hover,.nav-links .drop>.drop-link:hover{color:var(--danube)}
.nav-links a[aria-current="page"]:not(.btn){color:var(--danube);font-weight:600}
/* nav CTA: outlined at scroll 0 on pages with a hero primary; fills after */
.nav .btn{padding:10px 20px;font-size:15px}
/* nav CTA is always the outline pill, never filled (Neil, 3 Sep 2026) */
.nav .nav-cta{background:var(--white);color:var(--danube);border-color:var(--danube)}
.nav .nav-cta:hover{background:var(--danube-wash)}
/* dropdown: the trigger is a link to /labs/; hover or focus reveals the menu, a click navigates */
.drop{position:relative}
.drop>button::after,.drop>.drop-link::after{content:"";display:inline-block;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:7px}
.drop-menu{position:absolute;top:calc(100% + 10px);left:-16px;background:var(--white);border:1px solid var(--line);border-radius:12px;min-width:230px;padding:8px;display:none;box-shadow:0 12px 40px rgba(17,20,16,.10)}
/* invisible bridge over the 10px gap so the pointer can travel from the trigger into the menu */
.drop-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.drop.open .drop-menu{display:block}
.drop-menu a{display:block;padding:10px 14px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:15.5px;font-weight:500}
.drop-menu a:hover,.drop-menu a:focus-visible{background:var(--danube-wash);color:var(--danube)}
/* mobile */
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}
.mobile-menu{display:none}
@media(max-width:900px){
  .nav-inner{height:64px}
  .nav-links{display:none}
  .burger{display:block}
  .mobile-menu{position:fixed;inset:0;background:var(--white);z-index:70;display:none;flex-direction:column;padding:24px}
  .mobile-menu.open{display:flex}
  .mobile-top{display:flex;justify-content:space-between;align-items:center;height:40px}
  .mobile-close{background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:var(--ink);padding:6px 10px}
  .mobile-list{margin-top:32px;overflow:auto;flex:1}
  .mobile-list a{display:block;font-size:30px;font-weight:600;color:var(--ink);text-decoration:none;padding:12px 0;letter-spacing:-0.012em}
  .mobile-list .sub a{font-size:19px;font-weight:500;color:var(--ink-soft);padding:8px 0 8px 20px}
  .mobile-cta{padding:16px 0 max(16px, env(safe-area-inset-bottom))}
  .mobile-cta .btn{width:100%;justify-content:center}
}

/* ---------- sections ---------- */
.section{padding-block:120px}
.section-compact{padding-block:88px}
@media(max-width:768px){.section{padding-block:72px}.section-compact{padding-block:56px}}
.section-head{max-width:820px;margin-bottom:48px}
.section-head .lead{margin-top:16px}
.center{text-align:center}
.center .lead,.center .body{margin-inline:auto}
hr.rule{border:0;border-top:1px solid var(--line)}

/* ---------- hero (centered thesis) ---------- */
.hero{padding-top:72px;text-align:center}
.hero .display,.hero .h1{max-width:1180px;margin-inline:auto}
.hero .lead{margin:28px auto 0;max-width:760px}
.hero-actions{display:flex;gap:16px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.hero-support{margin-top:16px}
.hero-left{text-align:left}
.hero-left .display,.hero-left .h1,.hero-left .lead,.hero-left .body{margin-inline:0}
.hero-left .hero-actions{justify-content:flex-start}
@media(max-width:768px){
  .hero{text-align:left;padding-top:56px}
  .hero .display,.hero .h1,.hero .lead{margin-inline:0}
  .hero-actions{justify-content:flex-start}
}

/* ---------- hero mosaic (home): title up top, photos hover around and below ---------- */
.hero-m{position:relative;min-height:calc(100vh - 72px);display:flex;flex-direction:column;padding-top:clamp(48px,7vh,84px)}
.hm-content{position:relative;z-index:2;text-align:center;padding-inline:24px;max-width:920px;margin-inline:auto}
.hm-content .h1{font-size:clamp(32px,3.5vw,54px);letter-spacing:-0.024em;line-height:1.07}
.hm-actions{display:flex;gap:16px;justify-content:center;margin-top:28px;flex-wrap:wrap}
/* flank tiles beside the title, wide screens only */
.hm-flank{position:absolute;z-index:1;border-radius:var(--r-md);overflow:hidden;clip-path:inset(0 round var(--r-md));will-change:transform;display:none}
.hm-fl{left:1.5%;top:8%;width:clamp(150px,13vw,225px);aspect-ratio:3/4}
.hm-fr{right:2.5%;top:20%;width:clamp(120px,10.5vw,175px);aspect-ratio:4/5}
@media(min-width:1240px){.hm-flank{display:block}}
/* the band below: art-directed collage, anchors + accents, varied gaps and baselines */
.hm-band{position:relative;z-index:1;flex:1;min-height:clamp(340px,44vh,480px);margin-top:clamp(24px,4vh,48px)}
/* clip-path as well as overflow: the photo moves on its own compositing layer during the
   entrance, and overflow alone only rounds it once the transition has ended */
.hm-tile{position:absolute;border-radius:var(--r-md);overflow:hidden;clip-path:inset(0 round var(--r-md));will-change:transform}
.hm-b1{left:0;top:6%;width:clamp(230px,21vw,330px);aspect-ratio:4/3}
.hm-b2{left:25%;top:48%;width:clamp(110px,10vw,160px);aspect-ratio:1/1}
.hm-b3{left:36.5%;top:0;width:clamp(160px,15vw,240px);aspect-ratio:4/3}
.hm-b4{left:55%;top:34%;width:clamp(125px,11.5vw,185px);aspect-ratio:3/4}
.hm-b5{left:68%;top:4%;width:clamp(210px,19vw,300px);aspect-ratio:4/3}
.hm-b6{right:.5%;top:50%;width:clamp(130px,12vw,190px);aspect-ratio:1/1}
/* emerge: a quiet rise from below, no scaling; the wave starts at the
   bottom of the wall and travels up (site.js orders the delays) */
.hm-tile img,.hm-flank img{width:100%;height:100%;object-fit:cover;opacity:0;transform:translateY(40px);transition:opacity 900ms cubic-bezier(0.22,1,0.36,1),transform 900ms cubic-bezier(0.22,1,0.36,1);transition-delay:var(--d,0ms)}
.hm-tile.in img,.hm-flank.in img{opacity:1;transform:none}
@media(max-width:900px){
  .hero-m{min-height:auto;padding-top:48px}
  .hm-band{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:36px 24px 0;min-height:0}
  .hm-tile{position:static;width:auto;aspect-ratio:1/1}
  .hm-content{text-align:left}
  .hm-actions{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .hm-tile img,.hm-flank img{opacity:1;transform:none;transition:none}
}

/* ---------- photography ---------- */
.ph{border-radius:var(--r-md);overflow:hidden;background:var(--white);border:1px solid var(--line)}
.ph img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.docphoto{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.docphoto img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
@media(max-width:768px){.docphoto img{aspect-ratio:4/3}}
figcaption{margin-top:12px}
.mosaic{display:grid;grid-template-columns:1.2fr .8fr 1.4fr .8fr 1fr;gap:20px;align-items:end;margin-top:56px}
.mosaic .ph{border:0}
.mosaic>:nth-child(1){aspect-ratio:3/4}
.mosaic>:nth-child(2){aspect-ratio:3/4;margin-bottom:40px}
.mosaic>:nth-child(3){aspect-ratio:16/11}
.mosaic>:nth-child(4){aspect-ratio:3/4;margin-bottom:56px}
.mosaic>:nth-child(5){aspect-ratio:3/4;margin-bottom:16px}
@media(max-width:900px){.mosaic{grid-template-columns:1fr 1fr;gap:12px;margin-top:48px}.mosaic>:nth-child(n+4){display:none}}
/* image-led feature */
.feature-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:520px;display:grid;place-items:center;padding:88px 48px}
.feature-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(10,14,10,.32),rgba(10,14,10,.55))}
.feature-photo .inner{position:relative;z-index:2;text-align:center;max-width:860px}
.feature-photo .h2{color:#fff;max-width:none}
.feature-photo .btn{margin-top:32px}
@media(max-width:768px){.feature-photo{min-height:420px;padding:56px 24px}}

/* ---------- stats row ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px}
.stat{padding:8px 40px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font-size:56px;font-weight:700;line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.stat p{margin-top:12px;font-size:16px;color:var(--ink-soft);max-width:300px}
.stats+.ev{margin-top:28px}
@media(max-width:900px){.stats{grid-template-columns:1fr}.stat{border-left:0;padding:20px 0;border-top:1px solid var(--line)}.stat:first-child{border-top:0;padding-top:0}}

/* ---------- editorial columns (border rule: no boxes) ---------- */
.cols{display:grid;gap:32px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.col{border-top:1px solid var(--line);padding-top:20px}
.col h3,.col .h3{font-size:20px;font-weight:600;line-height:1.3}
.col p{margin-top:8px;font-size:15.5px;color:var(--ink-soft)}
@media(max-width:1024px){.cols-4{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

/* numbered editorial list */
.numlist{list-style:none;max-width:var(--measure)}
.numlist li{display:flex;gap:20px;border-top:1px solid var(--line);padding:18px 0}
.numlist li::before{content:counter(nl);counter-increment:nl;font-weight:600;color:var(--danube);font-variant-numeric:tabular-nums;min-width:24px}
.numlist{counter-reset:nl}

/* ---------- case cards ---------- */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.case-grid .case-card--lead{grid-column:span 3}
@media(max-width:900px){.case-grid{grid-template-columns:1fr}.case-grid .case-card--lead{grid-column:span 1}}
.case-card{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;color:#fff}
.case-card--lead{aspect-ratio:21/10}
@media(max-width:900px){.case-card--lead{aspect-ratio:4/5}}
.case-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease)}
.case-card:hover>img{transform:scale(1.02)}
.case-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,14,10,.38) 0%,rgba(10,14,10,.06) 30%,rgba(10,14,10,.48) 58%,rgba(10,14,10,.90) 100%)}
.case-card .top,.case-card .in{position:relative;z-index:2;padding:20px 24px}
.case-card .top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.case-card .top .ev-label{color:#fff;border:0;border-radius:0;background:none;padding:0;margin-right:0;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.case-card .top .ev-label:not(:last-child)::after{content:"\00B7";margin-left:10px;opacity:.7}
.case-card .in h3{font-size:23px;font-weight:600;line-height:1.22;color:#fff}
.case-card--lead .in h3{font-size:clamp(24px,2.4vw,32px)}
.case-card .in p{margin-top:8px;font-size:15px;color:rgba(255,255,255,.88);max-width:480px}
.case-card .in .ev{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.8)}
.case-card .in .ev u{text-decoration:underline;text-underline-offset:3px}

/* ---------- diagrams ---------- */
.diagram{margin-top:48px}
.dg-label{font-size:14px;font-weight:600}
/* gap diagram */
.gapline{display:flex;align-items:center;gap:0;max-width:900px}
.gapline .end{font-size:15px;font-weight:600;white-space:nowrap}
.gapline .track{flex:1;display:flex;align-items:center;margin:0 16px;position:relative}
.gapline .seg{flex:1;height:1.5px;background:var(--ink)}
.gapline .gap{min-width:96px;text-align:center;font-size:13px;color:var(--ink-soft);padding:0 6px;position:relative}
.gapline .gap::before,.gapline .gap::after{content:"";position:absolute;top:50%;width:6px;height:6px;border-radius:50%;background:var(--white);border:1.5px solid var(--ink);transform:translateY(-50%)}
.gapline .gap::before{left:-3px}
.gapline .gap::after{right:-3px}
.gapline .gap span{position:relative;top:14px;display:inline-block}
@media(max-width:768px){.gapline{flex-direction:column;align-items:stretch;gap:8px}.gapline .track{flex-direction:column;margin:8px 0;gap:8px}.gapline .seg{width:1.5px;height:24px;margin-inline:auto}.gapline .gap span{top:0}}
/* role map */
.rolemap{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;max-width:900px;position:relative}
.rolemap .need{grid-column:1 / -1;justify-self:center;border:1.5px solid var(--ink);border-radius:999px;padding:10px 24px;font-weight:600;font-size:15.5px;background:var(--white)}
.role{border-top:1px solid var(--line);padding-top:16px}
.role h3{font-size:18px;font-weight:600}
.role p{margin-top:6px;font-size:15px;color:var(--ink-soft)}
/* pathway / stepper */
.pathway{counter-reset:pw;max-width:820px}
.pw-step{border-top:1px solid var(--line);padding:28px 0 28px 64px;position:relative}
.pw-step::before{content:counter(pw);counter-increment:pw;position:absolute;left:0;top:24px;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-weight:600;font-variant-numeric:tabular-nums;background:var(--white);transition:all 250ms var(--ease)}
.pw-step.active::before{border-color:var(--danube);background:var(--danube);color:#fff}
.pw-step h3{font-size:22px;font-weight:600}
.pw-step .pw-body{margin-top:8px;color:var(--ink-soft);font-size:16px;max-width:640px}
.pw-step .pw-decision{margin-top:12px;font-size:14.5px}
.pw-step .pw-decision b{font-weight:600;color:var(--danube)}
.pw-step .pw-keep{margin-top:12px;font-size:14.5px}
.pw-step .pw-keep b{font-weight:600}
/* compounding */
.compound{display:grid;grid-template-columns:auto 1fr;gap:24px 48px;align-items:start;max-width:900px}
.compound .seed{border:1.5px solid var(--ink);border-radius:999px;padding:10px 22px;font-weight:600;font-size:15px;white-space:nowrap;margin-top:12px}
.compound .outs{display:grid;gap:0}
.compound .out{border-top:1px solid var(--line);padding:16px 0}
.compound .out h3{font-size:18px;font-weight:600}
.compound .out p{margin-top:6px;font-size:15px;color:var(--ink-soft);max-width:560px}
@media(max-width:768px){.compound{grid-template-columns:1fr}}
/* funder rings */
.rings{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:center;max-width:980px}
.rings svg{width:100%;height:auto}
.rings ol{list-style:none;counter-reset:rg}
.rings li{border-top:1px solid var(--line);padding:16px 0 16px 40px;position:relative;max-width:560px}
.rings li::before{content:counter(rg);counter-increment:rg;position:absolute;left:0;top:14px;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--danube);color:var(--danube);display:grid;place-items:center;font-size:13px;font-weight:600}
@media(max-width:768px){.rings{grid-template-columns:1fr}.rings svg{max-width:200px}}
/* journey demo (whatsapp page) */
.journey-demo{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:960px){.journey-demo{grid-template-columns:1fr}}
.chat{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:12px}
.bubble{border-radius:16px;padding:14px 18px;font-size:15.5px;line-height:1.55;max-width:88%}
.bubble-in{background:var(--danube);color:#fff;align-self:flex-end;border-bottom-right-radius:6px}
.bubble-out{border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:6px}
.jd-steps{counter-reset:jd}
.jd-step{border-top:1px solid var(--line);padding:20px 0 20px 52px;position:relative}
.jd-step::before{content:counter(jd);counter-increment:jd;position:absolute;left:0;top:18px;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-size:14px;font-weight:600;background:var(--white)}
.jd-step.active::before{border-color:var(--danube);background:var(--danube);color:#fff}
.jd-step h3{font-size:19px;font-weight:600}
.jd-step p{margin-top:6px;font-size:15px;color:var(--ink-soft);max-width:520px}
.jd-step .msg{margin-top:10px;font-size:14px;border-left:2px solid var(--danube);padding-left:12px;color:var(--ink)}
/* layer stack */
.layers{counter-reset:ly;max-width:820px}
.layer{border:1px solid var(--line);border-radius:12px;padding:18px 20px 18px 64px;position:relative;margin-top:12px}
.layer::before{content:counter(ly);counter-increment:ly;position:absolute;left:20px;top:18px;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--danube);color:var(--danube);display:grid;place-items:center;font-size:13px;font-weight:600}
.layer h3{font-size:18px;font-weight:600}
.layer p{margin-top:4px;font-size:15px;color:var(--ink-soft)}

/* ---------- accordion (FAQ) ---------- */
.acc{max-width:860px}
.acc-item{border-top:1px solid var(--line)}
.acc-item:last-child{border-bottom:1px solid var(--line)}
.acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--font);font-size:19px;font-weight:600;color:var(--ink);padding:22px 0}
.acc-btn:hover{color:var(--danube)}
.acc-ic{flex:none;width:22px;height:22px;display:grid;place-items:center;color:var(--danube);transition:transform 200ms var(--ease)}
.acc-item.open .acc-ic{transform:rotate(45deg)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 200ms var(--ease)}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-panel>div{overflow:hidden}
.acc-panel p{padding:0 48px 22px 0;max-width:760px;color:var(--ink-soft);font-size:16px}
.no-js .acc-panel{grid-template-rows:1fr}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;max-width:860px}
.fld-full{grid-column:1 / -1}
@media(max-width:768px){.form-grid{grid-template-columns:1fr}}
.fld label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.fld input,.fld select,.fld textarea{width:100%;min-height:48px;border:1px solid var(--line);border-radius:var(--r-input);padding:12px 16px;font-family:var(--font);font-size:16px;background:var(--white);color:var(--ink)}
.fld textarea{min-height:120px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:3px solid var(--danube);outline-offset:1px;border-color:var(--danube)}
.fld .helper{font-size:13.5px;color:var(--ink-soft);margin-top:6px}
.fld.error input,.fld.error textarea,.fld.error select{border:1.5px solid var(--clay)}
.fld .err-msg{display:none;color:var(--clay);font-size:14px;margin-top:6px;font-weight:500}
.fld.error .err-msg{display:flex;gap:6px;align-items:baseline}
.consent-row{display:flex;gap:12px;align-items:flex-start;max-width:760px}
.consent-row input{width:20px;height:20px;min-height:0;margin-top:4px;accent-color:var(--danube)}
.form-success{background:var(--danube-wash);border-radius:var(--r-md);padding:32px;max-width:760px}
.form-success h2{font-size:26px;font-weight:600}
.form-success p{margin-top:10px;color:var(--ink)}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---------- amber close (home only) ---------- */
/* the box sizes to its text; the photo is taken out of flow and cropped to the
   box's height so both end on the same line. 88px above, 8px below: with the
   footer inset of 24px the footer follows at 32px, as on labs (Neil, 2026-09-03) */
.amber-close{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:stretch;padding:88px 24px 8px}
@media(max-width:900px){.amber-close{grid-template-columns:1fr;padding:56px 24px 8px}}
.amber-box{background:var(--amber);color:var(--ink);border-radius:var(--r-lg);padding:clamp(32px,3.6vw,48px);display:flex;flex-direction:column;justify-content:center}
.amber-box .h2{max-width:none}
.amber-box .sub{font-size:21px;font-weight:500;margin-top:14px}
.amber-box p.bd{margin-top:20px;font-size:17px;max-width:560px}
.amber-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.btn-on-amber{background:var(--white);color:var(--ink)}
.btn-on-amber:hover{background:rgba(255,255,255,.85)}
.btn-ghost-amber{border-color:var(--white);color:var(--white)}
.btn-ghost-amber:hover{background:var(--white);color:var(--ink)}
.amber-box .note-line{margin-top:20px;font-size:14.5px;opacity:.85}
.amber-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:0}
.amber-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media(max-width:900px){.amber-photo{aspect-ratio:4/3}}

/* ---------- footer ---------- */
.footer-wrap{padding:24px;margin-top:120px}
.section+.footer-wrap,.section-compact+.footer-wrap{margin-top:0}
/* a page whose last section already carries the gap to the footer (home) */
.footer-wrap.is-flush{margin-top:0}
.footer{background:var(--danube);color:var(--white);border-radius:var(--r-lg);overflow:hidden;padding:clamp(48px,6vw,88px) clamp(32px,5vw,88px) 0}
.footer .brand{color:#fff}
.footer .mission{margin-top:20px;font-size:19px;font-weight:500;max-width:520px}
.f-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:40px 32px;margin-top:56px;padding-top:40px;border-top:1px solid var(--white-25)}
@media(max-width:900px){.f-cols{grid-template-columns:1fr 1fr}}
.f-cols h2{font-size:14px;font-weight:600;color:rgba(255,255,255,.65);margin-bottom:14px}
.f-cols a{display:block;color:var(--white);text-decoration:none;font-size:15.5px;margin-bottom:10px}
.f-cols a:hover,.f-cols a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.f-cols p{color:rgba(255,255,255,.85);font-size:15.5px;margin-bottom:10px}
.f-legal{display:flex;gap:16px 40px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--white-25);font-size:13.5px;color:rgba(255,255,255,.65)}
.f-wordmark{display:flex;align-items:center;gap:.12em;margin-top:48px;margin-bottom:-0.24em;font-size:clamp(88px,19.5vw,360px);font-weight:700;letter-spacing:-0.045em;line-height:1;color:var(--white);user-select:none}
.f-wordmark .fdot{width:.55em;height:.55em;border-radius:50%;background:var(--amber);flex:none}
@media(max-width:768px){.f-wordmark{font-size:14.5vw;margin-top:36px}}
.on-danube :focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ---------- consent banner ---------- */
.consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--white);border-top:1px solid var(--line);padding:16px 24px;display:none}
.consent-banner.show{display:block}
.consent-inner{max-width:1440px;margin:0 auto;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.consent-inner p{font-size:14.5px;color:var(--ink-soft);max-width:760px}
.consent-actions{display:flex;gap:16px;align-items:center}
.consent-actions .btn{padding:10px 20px;font-size:15px}

/* ---------- reveals ---------- */
.js [data-rv]{opacity:0;transform:translateY(8px);transition:opacity 220ms var(--ease),transform 220ms var(--ease);transition-delay:var(--d,0ms)}
.js [data-rv].rv-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js [data-rv]{opacity:1;transform:none;transition:none}
  .case-card:hover>img{transform:none}
  .btn-primary:hover{transform:none}
}

/* ---------- utilities ---------- */
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}
.maxm{max-width:var(--measure)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--danube);padding:12px 20px;z-index:100;border-radius:0 0 10px 0;font-weight:600}
.skip-link:focus{left:0}

/* ---------- homepage hero: the question, the statement, a wall of portraits ---------- */
/* ============================================================
   Homepage hero, one to one from Neil's screenshot (2026-09-03).

   Centred question in three lines, a regular-weight statement under it,
   then eleven portraits in five equal columns. Each column is a flex
   stack; the columns start at different heights (padding-top) so the rows
   never share a seam, and every tile keeps its own aspect ratio, so the
   wall scales with the page instead of being pinned to a canvas.
   Measured off the screenshot: gutter 1.55% of the wall, column 18.76%,
   offsets 0.23 / 0 / 0.395 / 0.088 / 0.345 of a column width.

   Motion, all subtle and all off under prefers-reduced-motion:
   1. entrance: the photos inside the first viewport rise in with a
      stagger (site.css .hm-tile rules), the question and statement follow;
   2. bricks: every photo below the fold waits (.mz-wait) and is placed as
      it scrolls into view, a gentler, shorter rise than the entrance; the
      quote and the logo line arrive the same way (slower data-rv);
   3. hover: a soft zoom on the photo under the cursor once it has settled.
   (No scroll drift: it opened the gutters unevenly. Removed 2026-09-03.)
   ============================================================ */
.mz-wrap{
  container-type:inline-size;
  max-width:1440px;margin-inline:auto;
  /* no bottom padding: the following section's own rhythm carries the gap */
  padding:clamp(40px,6.4vw,92px) 40px 0;
}
.mz-head{text-align:center;max-width:1200px;margin-inline:auto}
.mz-title{font-size:clamp(34px,3.5vw,50px);line-height:1.08;letter-spacing:-0.026em;text-wrap:initial;margin:0}
.mz-title span{display:block;white-space:nowrap}
.mz-say{
  margin:clamp(20px,2.6vw,38px) auto 0;max-width:640px;
  font-size:17px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty;
}
.mz-say strong{font-weight:600;color:var(--ink)}

/* the wall: five equal columns. The left three and the quote share one
   grid cell so the quote sits in the room beneath them; the right two run
   on down past it, each ending where its photos end. */
.mz{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.55cqw;margin-top:clamp(40px,5vw,72px);align-items:start}
.mz-left{grid-column:1/4;display:flex;flex-direction:column;min-width:0;align-self:stretch}
.mz-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.55cqw;align-items:start}
.mz-col{display:flex;flex-direction:column;gap:1.55cqw;min-width:0}
.mz-c1{padding-top:4.35cqw}
.mz-c3{padding-top:7.4cqw}
.mz-c4{padding-top:1.65cqw}
.mz-c5{padding-top:6.45cqw}
/* site.css sets .hm-tile absolute + 16px radius + the reveal transition; here they sit in flow */
.mz .hm-tile{position:relative;width:100%}
.mz .r45{aspect-ratio:4/5}
.mz .r34{aspect-ratio:3/4}
.mz .r32{aspect-ratio:3/2}
.mz .r11{aspect-ratio:1/1}
.mz .hm-tile img{width:100%;height:100%;object-fit:cover;transition-delay:calc(var(--d,0ms) * 0.4)}
/* below the fold: a quieter placement, less travel, no shrink to speak of */
.mz .hm-tile.mz-wait img{transform:translateY(28px);transition-duration:1100ms}
.mz .hm-tile.mz-wait.in img{transform:none}
/* once a tile's entrance has played, drop its delay so hover is instant */
.mz .hm-tile.settled img{transition-delay:0ms;transition-duration:700ms}
.mz .hm-tile.settled:hover img{transform:scale(1.035)}
/* the quote and the logo line take longer than the site default reveal so
   they read as being set in place, not switched on */
.js .mz [data-rv]{transform:translateY(18px);transition-duration:900ms}
.js .mz [data-rv].rv-in{transform:none}

/* the quote: left-bound under the three left columns, navy, Figtree 500,
   four lines set by hand with a hanging opening mark. Air above; the right
   columns wrap around it. */
.mz-quote{margin:clamp(64px,7vw,100px) 0 0 clamp(24px,3cqw,44px);padding:0 0 0 0.42em;width:max-content;max-width:calc(100% - clamp(24px,3cqw,44px))}
.mz-quote p{
  margin:0;font-size:clamp(30px,3.6vw,52px);font-weight:500;line-height:1.16;letter-spacing:-0.02em;
  color:var(--danube);text-align:left;text-wrap:initial;
}
.mz-quote span{display:block}
.mz-quote span:first-child{text-indent:-0.42em}

/* the logo line: one slow endless pass, left to right to left, fading in
   and out at both ends via a mask. Two identical sets, the track slides by
   exactly one set, so the loop has no seam. Logos are navy PNGs cut from
   the strip, sized by height so they read at one weight. */
/* fills what is left under the quote and centres the line in it, so the
   logos sit midway between the quote and the foot of the tallest column */
.mz-logos{
  flex:1;display:flex;align-items:center;
  margin:0 0 0 clamp(24px,3cqw,44px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}
.mz-track{display:flex;flex:none;width:max-content;animation:mz-marquee 46s linear infinite}
.mz-set{display:flex;align-items:center;gap:clamp(40px,5.2cqw,76px);padding-right:clamp(40px,5.2cqw,76px)}
/* each logo keeps its size relative to the others from the source strip
   (--h is its source height in px), scaled together with the page */
.mz-set img{height:calc(var(--h,50) * clamp(0.4px,0.042cqw,0.56px));width:auto;opacity:.92}
.mz-logos:hover .mz-track{animation-play-state:paused}
@keyframes mz-marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mz-track{animation:none}}

/* ---------- narrow screens ---------- */
/* Below 760px five columns get too thin, so the wall becomes a plain
   three column grid of 4:5 crops (the two small landscapes drop out), the
   quote follows the photos, and the statements go left aligned. */
@media(max-width:760px){
  .mz-wrap{padding:40px 20px 0}
  .mz-head{text-align:left;max-width:none}
  .mz-title{font-size:clamp(30px,7.6vw,40px)}
  .mz-title span{display:inline;white-space:normal}
  .mz-say{margin-inline:0;max-width:none}
  .mz{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:40px}
  .mz-left,.mz-cols,.mz-col{display:contents}
  .mz .hm-tile{aspect-ratio:4/5}
  .mz .hm-tile.mz-hide{display:none}
  .mz-quote{grid-column:1/-1;order:1;margin:54px 0 0;width:auto;max-width:none}
  .mz-quote p{font-size:clamp(26px,6.8vw,34px);text-wrap:pretty}
  .mz-quote span{display:inline}
  .mz-logos{grid-column:1/-1;order:2;margin:40px 0 0;flex:none}
  .mz-set img{height:calc(var(--h,50) * 0.42px)}
}

/* if the reveal script never runs, the photos must still be there */
.no-js .mz .hm-tile img{opacity:1;transform:none}

/* ---------- per-offer accent (2026-09-03) ----------
   Capacity Sprint stays navy. alongside labs runs orange: the body class
   remaps the danube tokens so every button, label, link accent, rail control
   and the footer surface follow, and the footer dots turn white on orange.
   The homepage carries both: navy actions, amber highlights. */
.accent-amber{--danube:#D4784A;--danube-deep:#B8623A;--danube-wash:#FBEFE7}
.accent-amber .footer .dot,.accent-amber .footer .fdot{background:var(--white)}

/* home hero: the two highlighted words */
.mz-title .hl{color:var(--amber);font-weight:inherit}

/* coming soon: listed, greyed, not yet released */
.soon{display:block;color:var(--ink-soft);opacity:.55;cursor:default;user-select:none}
.soon small{font-size:inherit;font-weight:inherit}
.drop-menu .soon{padding:10px 14px;font-size:15.5px;font-weight:500;white-space:nowrap}
.mobile-list .sub .soon{font-size:19px;font-weight:500;padding:8px 0 8px 20px}
.f-cols .soon{color:var(--white);font-size:15.5px;margin-bottom:10px}
.case-card.is-soon{cursor:default}
.case-card.is-soon>img{filter:grayscale(1);opacity:.6}
.case-card.is-soon:hover>img{transform:none}
.case-card.is-soon .in{opacity:.8}
.case-card.is-soon .in .ev u{text-decoration:none}
/* launch state (2026-09-03): cards keep their text but are not links yet */
.case-card.is-static{cursor:default}
.case-card.is-static:hover>img{transform:none}

/* ---------- stages accordion (shared, 2026-09-03) ----------
   The numbered one-open accordion first built on /labs/ (.lb-acc there),
   promoted so the homepage can use it. Exactly one item open; the open
   item takes the accent colour. Renders complete without JS. */
.stg{display:flex;flex-direction:column}
.stg h3{margin:0}
.stg-btn{width:100%;display:grid;grid-template-columns:36px 1fr 30px;align-items:center;gap:12px;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--font);padding:16px 0;color:var(--ink-soft);transition:color 200ms var(--ease)}
.stg-btn:hover{color:var(--ink)}
.stg-n{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-soft);transition:color 200ms var(--ease)}
.stg-name{font-size:clamp(24px,2.1vw,30px);font-weight:600;line-height:1.15;letter-spacing:-0.014em}
.stg-ic{position:relative;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);color:var(--ink-soft);transition:transform 260ms var(--ease),border-color 200ms var(--ease),color 200ms var(--ease)}
.stg-ic::before,.stg-ic::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%)}
.stg-ic::before{width:12px;height:1.5px}
.stg-ic::after{width:1.5px;height:12px}
.stg-item.is-open .stg-btn{color:var(--ink)}
.stg-item.is-open .stg-n{color:var(--danube)}
.stg-item.is-open .stg-ic{transform:rotate(45deg);border-color:var(--danube);color:var(--danube)}
.stg-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms var(--ease)}
.stg-item.is-open .stg-panel{grid-template-rows:1fr}
.stg-panel>div{overflow:hidden}
.stg-body{padding:0 48px}
.stg-body p{font-size:16.5px;line-height:1.6;color:var(--ink-soft);max-width:540px;margin:2px 0 24px}
.no-js .stg-panel{grid-template-rows:1fr}
@media(max-width:960px){.stg-body{padding-right:0}}
@media(prefers-reduced-motion:reduce){.stg-panel,.stg-ic{transition:none}}

/* ---------- home · leave more behind (2026-09-03) ----------
   The labs pathway layout mirrored: the picture frame on the left at the
   width of the hands photo in the amber close, the stages on the right. The frame
   stretches to the height of the stages, not the heading. The photo covers the
   frame; the wordmark sits top-left in white over a soft scrim so it reads
   against the busy top edge. On narrow screens the frame keeps a 3:2 ratio. */
.lv-head{max-width:860px}
.lv-head .lead{margin-top:16px}
/* the grid mirrors .amber-close below it: 24px inset, 1fr | 1.25fr, 24px gutter,
   so the frame is exactly the hands photo's width on the opposite side */
.lv-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;align-items:stretch;margin:40px -24px 0}
.lv-grid .stg{padding-left:clamp(24px,4vw,64px)}
.lv-frame{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--line);min-height:320px;isolation:isolate}
.lv-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.lv-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,20,16,.55) 0%,rgba(17,20,16,.18) 32%,rgba(17,20,16,0) 55%);pointer-events:none}
.lv-mark{position:absolute;top:22px;left:24px;z-index:1;display:inline-flex;align-items:center;gap:9px;color:var(--white);font-size:21px;font-weight:600;letter-spacing:-0.01em;line-height:1}
.lv-mark .dot{width:17px;height:17px;border-radius:50%;background:var(--white);flex:none}
@media(max-width:960px){
  .lv-grid{grid-template-columns:1fr;gap:28px;margin:32px 0 0}
  .lv-grid .stg{padding-left:0}
  .lv-frame{min-height:0;aspect-ratio:3/2}
}

/* ---------- home · welcome (2026-09-03) ----------
   One header and the statement on the left. On the right, the two offers
   as frameless block links: a dot in the offer colour (amber for labs, navy
   for the sprint), the name, one line. No box; the name draws an underline
   in its colour from the left on hover. */
.wl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px clamp(56px,7vw,120px);align-items:center}
.wl-text .h2{max-width:none}
.wl-text p{margin-top:20px;font-size:19px;line-height:1.6;max-width:600px;text-wrap:pretty}
.wl-text .h2+p{margin-top:28px}
.wl-text strong{font-weight:600}
.wl-ways{display:flex;flex-direction:column;gap:clamp(36px,4vw,56px);max-width:520px;padding-left:clamp(0px,2vw,32px)}
.wl-ways-lead{font-size:15px;font-weight:600;color:var(--ink-soft);margin-bottom:calc(-1 * clamp(12px,1.5vw,24px))}
.wl-way{--acc:var(--danube);display:block;color:inherit;text-decoration:none}
.wl-way--labs{--acc:var(--amber)}
.wl-way--sprint{--acc:var(--danube)}
/* the name stays inline (no grid or flex, which would blockify it) so the
   underline runs under the words only; the dot hangs in the left padding */
.wl-way h3{position:relative;padding-left:31px;font-size:clamp(22px,1.8vw,26px);font-weight:600;line-height:1.25;letter-spacing:-0.012em}
.wl-dot{position:absolute;left:0;top:.3em;width:17px;height:17px;border-radius:50%;background:var(--acc)}
.wl-ul{display:inline;background-image:linear-gradient(var(--acc),var(--acc));background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 360ms var(--ease),color 200ms var(--ease)}
.wl-way:hover .wl-ul,.wl-way:focus-visible .wl-ul{background-size:100% 2px;color:var(--acc)}
.wl-way p{margin:8px 0 0 31px;color:var(--ink-soft);font-size:16.5px;line-height:1.6}
@media(max-width:960px){
  .wl{grid-template-columns:1fr;gap:48px;align-items:start}
  .wl-text p{max-width:640px}
  .wl-ways{max-width:560px;padding-left:0}
}
@media(prefers-reduced-motion:reduce){.wl-ul{transition:none}}

/* ---------- case rail (shared, 2026-09-03) ----------
   The horizontal rail of cases and field learning first built on /labs/
   (.lb-rail there), promoted so the homepage can carry the same rail.
   Heading inside the container, cards run to the right edge of the screen,
   two round buttons page by one card. The card markup is generated by
   tools/build-cases.py into every page with rail markers. /labs/ keeps its
   page-scoped copy until Benny migrates it. */
.rail-sec{padding-bottom:0}
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.rail-head .h2{max-width:820px}
.rail-nav{display:flex;gap:10px;flex:none;padding-bottom:6px}
.rail-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:border-color 200ms var(--ease),color 200ms var(--ease),background 200ms var(--ease)}
.rail-btn svg{width:18px;height:18px}
.rail-btn:hover{border-color:var(--danube);color:var(--danube);background:var(--danube-wash)}
.rail-btn[disabled]{opacity:.35;cursor:default;background:var(--white);border-color:var(--line);color:var(--ink)}
.rail{list-style:none;display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px max(48px,calc((100vw - 1440px)/2 + 48px)) 12px;scroll-padding-inline:max(48px,calc((100vw - 1440px)/2 + 48px));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail li{flex:0 0 clamp(280px,25vw,352px);scroll-snap-align:start}
.rail .case-card{height:100%}
.rail .case-card .in p:not(.ev){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rail .case-card .in h3{font-size:21px}
/* alongside's own work carries a small dot in the page accent; external examples do not */
.case-card .top .ev-label--own::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--danube);margin-right:7px;vertical-align:1px}
/* a linked phrase inside a heading: underlined in the accent, coloured on hover */
.title-link{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--danube);transition:color 200ms var(--ease)}
.title-link:hover,.title-link:focus-visible{color:var(--danube)}
@media(max-width:768px){
  .rail{padding-inline:24px;scroll-padding-inline:24px;gap:16px}
  .rail li{flex-basis:78vw}
  .rail-head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:28px}
}
@media(prefers-reduced-motion:reduce){.rail{scroll-behavior:auto}.title-link,.rail-btn{transition:none}}