/* ═══════════════════════════════════════════════════════════════
   180DC Frankfurt
   Neutral greys + the chapter green. Buttons 8px, cards 12px.
   ═══════════════════════════════════════════════════════════════ */
/* Inter, hosted with the site (assets/fonts) instead of loaded from
   Google: no visitor data goes to a third party. One variable file per
   character set covers all weights; latin-ext only loads when a page
   uses such a character. Licence: SIL Open Font License, see
   assets/fonts/LICENSE.txt. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:optional;src:url(fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:optional;src:url(fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* ── brand ──
     --brand-180 is the green from the chapter logo; --primary is a
     deeper shade of it so white button text stays readable (AA). */
  --brand-180:#7cb043;
  --primary:#4e8a2a;
  --primary-pressed:#3f7322;
  --primary-deep:#305a19;
  --on-primary:#ffffff;
  --tint-green:#e9f3df;

  /* ── form feedback ── */
  --error:#b83a2e;
  --error-tint:#fbeeec;

  /* ── surface ── */
  --canvas:#ffffff;
  --surface:#f6f5f4;
  --surface-soft:#fafaf9;
  --hairline:#e5e3df;
  --hairline-soft:#ede9e4;
  --hairline-strong:#c8c4be;

  /* ── text ── */
  --ink-deep:#000000;
  --ink:#1a1a1a;
  --charcoal:#37352f;
  --slate:#5d5b54;
  --steel:#787671;
  --stone:#a4a097;
  --muted:#bbb8b1;
  --on-dark:#ffffff;

  /* ── radius ── */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-full:9999px;

  /* ── spacing ── */
  --s-xxs:4px;  --s-xs:8px;   --s-sm:12px;  --s-md:16px;
  --s-lg:20px;  --s-xl:24px;  --s-xxl:32px; --s-xxxl:40px;
  --s-section-sm:48px; --s-section:64px; --s-section-lg:96px;

  /* ── elevation ── */
  --e1:rgba(15,15,15,.04) 0 1px 2px 0;
  --e2:rgba(15,15,15,.08) 0 4px 12px 0;
  --e3:rgba(15,15,15,.12) 0 12px 32px -6px;
  --e4:rgba(15,15,15,.16) 0 16px 48px -8px;

  --container:1280px;
  --gutter:32px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --glide:cubic-bezier(.65,.05,.25,1);
  --nav-h:77px;
  --wipe:cubic-bezier(.77,0,.18,1);
}

*{box-sizing:border-box;margin:0;padding:0}
/* Same layout on every page: always reserve the scrollbar's space, so
   pages of different lengths don't shift sideways when you switch. */
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
/* Arial tuned to Inter's metrics. While the web font loads the text
   already takes Inter's size, so headings don't jump when it swaps in. */
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107.1%;ascent-override:90.4%;descent-override:22.5%;line-gap-override:0%}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:Inter,"Inter Fallback",-apple-system,system-ui,"Segoe UI",Helvetica,sans-serif;
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
/* line breaks: headings share their words evenly across lines, running
   text avoids a single word alone on its last line (site.js ties the
   last two words for browsers without this) */
h1,h2,h3,h4,h5,.t-display,.t-h1,.t-h2,.t-h3,.t-h4,.eyebrow{text-wrap:balance}
p,li,blockquote,figcaption,dd,td,th,.t-body,.t-subtitle,.t-sm{text-wrap:pretty}
.router-line{text-wrap:wrap}
/* long words (German compounds, URLs) break instead of pushing past the edge */
h1,h2,h3,h4,h5,p,li,td,th,dd,blockquote{overflow-wrap:break-word}
/* grid and flex children may shrink below their content, so a long line or
   a large image never widens a column past a small screen */
.grid>*,.benefit>*,.hero-grid>*,.roles>*,.dims>*,.dim>*,.dim-facts>*,.events>*,.cv-grid>*,.quotes>*,.stats>*,.benefits>*,.racer3d-inner,.racer3d-inner>*,.step>*,ol>li>div{min-width:0}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
[hidden]{display:none!important}
/* application window variants stay hidden until site.js has picked the state */
html:not(.apps-ready) [data-apps]{display:none!important}
::selection{background:var(--tint-green);color:var(--primary-deep)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r-xs)}

/* ═══ typography scale ═════════════════════════════════════════ */
.t-display{font-size:56px;font-weight:600;line-height:1.08;letter-spacing:-1.2px}
.t-h1{font-size:48px;font-weight:600;line-height:1.15;letter-spacing:-.5px}
.t-h2{font-size:36px;font-weight:600;line-height:1.20;letter-spacing:-.5px}
.t-h3{font-size:28px;font-weight:600;line-height:1.25}
.t-h4{font-size:22px;font-weight:600;line-height:1.30}
.t-h5{font-size:18px;font-weight:600;line-height:1.40}
.t-subtitle{font-size:18px;font-weight:400;line-height:1.55}
.t-body{font-size:16px;font-weight:400;line-height:1.6}
.t-sm{font-size:14px;font-weight:400;line-height:1.50}
.slate{color:var(--slate)}

/* eyebrow label above section titles */
.eyebrow{display:block;margin-bottom:var(--s-sm);font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--primary)}

/* ═══ layout ═══════════════════════════════════════════════════ */
.wrap{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding:var(--s-section-lg) 0}
.section-sm{padding:var(--s-section) 0}
.soft{background:var(--surface-soft)}
.grid{display:grid;gap:var(--s-xl)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.section-head{max-width:640px;margin-bottom:var(--s-xxxl)}
.section-head p{margin-top:var(--s-md);color:var(--slate)}

/* ═══ buttons ══════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-xs);
  font-size:15px;font-weight:500;line-height:1.30;
  padding:11px 20px;border-radius:var(--r-md);border:0;cursor:pointer;
  min-height:44px;white-space:nowrap;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s var(--ease),box-shadow .2s ease;
}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:none}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-pressed);box-shadow:0 6px 16px -6px rgba(78,138,42,.55)}
.btn-secondary{background:var(--canvas);color:var(--ink);border:1px solid var(--hairline-strong)}
.btn-secondary:hover{border-color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-sm)}
/* download buttons: the arrow points down and dips on hover */
.btn-download:hover svg{transform:translateY(2px)}
.download-note{margin-top:var(--s-sm);font-size:13px;color:var(--steel)}
.text-link{display:inline-flex;align-items:center;gap:var(--s-xs);margin-top:var(--s-xl);font-size:15px;font-weight:500;color:var(--primary)}
.text-link svg{transition:transform .25s var(--ease)}
.text-link:hover svg{transform:translateX(4px)}

/* ═══ scroll progress + nav ════════════════════════════════════ */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:var(--brand-180);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* solid background and a fading gradient instead of backdrop blur and
   an animated box-shadow: both repaint every frame and made the
   logo animation stutter */
.nav{position:sticky;top:0;z-index:50;background:var(--canvas);border-bottom:1px solid var(--hairline)}
.nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;pointer-events:none;background:linear-gradient(rgba(15,15,15,.07),rgba(15,15,15,0));opacity:0;transition:opacity .6s ease}
.nav.scrolled::after{opacity:1}
/* fixed height on purpose: a bar that shrinks while scrolling moves
   the page under it and makes the logo state flicker */
.nav-in{
  max-width:var(--container);margin:0 auto;
  padding:0 var(--gutter);min-height:76px;
  display:flex;align-items:center;gap:var(--s-xxl);
}

/* logo: horizontal at the top of the page; on scroll it glides into
   the centre of the bar and turns into the vertical mark. Globe and
   both wordmarks are separate images; everything animates with
   transform/opacity only. --to-center is measured in site.js. */
.brand{position:relative;display:block;flex:none;width:139px;height:46px;transition:transform 1.1s var(--glide);will-change:transform}
.nav.scrolled .brand{transform:translate3d(var(--to-center,0px),0,0)}
.brand img{position:absolute;left:0;top:0;height:auto;max-width:none;will-change:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.brand .brand-globe{top:3px;width:39px;transition:transform 1.1s var(--glide)}
.brand .brand-word-h{left:51px;top:6px;width:88px;transition:opacity .5s ease .15s,transform 1.1s var(--glide)}
.brand .brand-word-v{top:37px;width:45px;opacity:0;transform:translate3d(0,-4px,0);transition:opacity .35s ease,transform 1.1s var(--glide)}
.nav.scrolled .brand .brand-globe{transform:translate3d(3px,-8px,0) scale(.75) rotate(360deg)}
.nav.scrolled .brand .brand-word-h{opacity:0;transform:translate3d(-14px,0,0);transition-delay:0s,0s}
.nav.scrolled .brand .brand-word-v{opacity:1;transform:translate3d(0,0,0);transition:opacity .6s ease .5s,transform 1.1s var(--glide)}

/* links sit on the right next to the button, so the logo has a free
   path to the centre */
.nav-links{margin-left:auto;display:flex;align-items:center;gap:var(--s-lg);font-size:15px;font-weight:500}
.nav-links a{position:relative;color:var(--charcoal);padding:6px 2px}
.nav-links a::after{content:"";position:absolute;left:2px;right:2px;bottom:0;height:2px;border-radius:2px;background:var(--brand-180);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.nav-links a:hover{color:var(--ink-deep)}
.nav-links a:hover::after,.nav-links a.here::after{transform:scaleX(1)}
.nav-links a.here{color:var(--ink-deep)}
/* Fixed width for the button area on desktop: pages have different
   buttons (or none), and without this the menu links would sit at a
   different spot on every page. */
.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-md);min-width:176px}
.nav-toggle{display:none;background:transparent;border:1px solid var(--hairline-strong);border-radius:var(--r-md);padding:9px 10px;cursor:pointer}
.nav-toggle span{display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.nav-toggle span+span{margin-top:4px}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ═══ mega menu ════════════════════════════════════════════════
   Built by site.js from one menu definition, so every page shares it.
   The plain top-level links still work without JavaScript.
   Desktop: a full-width panel under the bar, opened on hover or focus.
   Mobile: the same entries as an accordion inside the burger menu. */
.nav-links .chev{display:inline-block;width:9px;height:9px;margin-left:6px;vertical-align:1px;transition:transform .3s var(--ease)}
.nav-links a.menu-open .chev{transform:rotate(180deg)}
.nav-links a.menu-open{color:var(--ink-deep)}
.nav-links a.menu-open::after{transform:scaleX(1)}
.mega{
  position:absolute;left:0;right:0;top:100%;z-index:49;
  background:var(--canvas);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);box-shadow:0 24px 40px -20px rgba(15,15,15,.18);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s ease,transform .35s var(--ease-out),visibility 0s linear .35s;
}
.mega.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .35s var(--ease-out),visibility 0s}
.mega-in{max-width:var(--container);margin:0 auto;padding:var(--s-xl) var(--gutter) 0}
.mega-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-md)}
.mega-item{display:block;padding:var(--s-lg);border-radius:var(--r-md);transition:background-color .2s ease}
.mega-item:hover,.mega-item:focus-visible{background:var(--surface-soft)}
.mega-item b{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--ink)}
.mega-item b svg{color:var(--primary);opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .25s var(--ease)}
.mega-item:hover b svg,.mega-item:focus-visible b svg{opacity:1;transform:none}
.mega-item small{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:var(--slate)}
/* one quiet line with the most current thing in this area */
.mega-latest{display:flex;align-items:center;gap:var(--s-sm);margin-top:var(--s-md);padding:var(--s-md) var(--s-lg);border-top:1px solid var(--hairline-soft);font-size:14px;font-weight:500;color:var(--ink)}
.mega-latest span{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--primary)}
.mega-latest svg{color:var(--primary);transition:transform .25s var(--ease)}
.mega-latest:hover svg{transform:translateX(4px)}
.mega.open .mega-item{animation:rise .4s var(--ease-out) both}
.mega.open .mega-item:nth-child(2){animation-delay:.04s}
.mega.open .mega-item:nth-child(3){animation-delay:.08s}
.m-sub{display:none}

/* ═══ hero (text + photo) ══════════════════════════════════════ */
.hero-split{background:var(--surface-soft);border-bottom:1px solid var(--hairline);padding:var(--s-section-lg) 0}
/* top-aligned, so the headline starts at the same height on every page */
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-section);align-items:start}
.hero-copy h1{margin-bottom:var(--s-lg);max-width:15ch}
.hero-copy .t-subtitle{color:var(--slate);max-width:46ch}
.hero-copy .btn-row{margin-top:var(--s-xxl)}
.hero-copy>*{animation:rise .8s var(--ease-out) both}
.hero-copy>*:nth-child(2){animation-delay:.08s}
.hero-copy>*:nth-child(3){animation-delay:.16s}
.hero-copy>*:nth-child(4){animation-delay:.24s}
.hero-copy>*:nth-child(5){animation-delay:.32s}
.hero-stats{margin-top:var(--s-section);padding-top:var(--s-xxl);border-top:1px solid var(--hairline);animation:rise .8s var(--ease-out) .45s both}
/* home: a quiet link down to "Find your way" instead of buttons */
.hero-cue{display:inline-flex;align-items:center;gap:var(--s-xs);margin-top:var(--s-xxl);font-size:15px;font-weight:500;color:var(--primary)}
.hero-cue svg{transition:transform .35s var(--ease)}
.hero-cue:hover svg{transform:translateY(4px)}
@media(prefers-reduced-motion:no-preference){.hero-cue svg{animation:cue 2.4s var(--ease) 1.4s infinite}}
@keyframes cue{0%,60%,100%{transform:none}30%{transform:translateY(5px)}}
.hero-cue-after{display:none}
@media(max-width:1023px){
  .hero-copy .hero-cue{display:none}
  .hero-cue-after{display:inline-flex;justify-self:start;margin-top:calc(var(--s-xl) - var(--s-xxxl))}
}
.about-stats{margin-top:var(--s-section);padding-top:var(--s-xxl);border-top:1px solid var(--hairline)}

/* ═══ photos ═══════════════════════════════════════════════════ */
.photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--e4)}
.photo.wide{aspect-ratio:16/10}

/* photo reveal: a green curtain wipes across, and the photo settles
   from a slight zoom underneath it as the curtain pulls away */
.rv-img{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);transform:translateZ(0);box-shadow:0 0 0 rgba(15,15,15,0);transition:box-shadow 1s ease .7s}
.rv-img::after{content:"";position:absolute;inset:0;z-index:2;background:var(--primary);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.rv-img .photo{box-shadow:none;border-radius:0;opacity:0;transform:scale(1.2)}
.rv-img.in{box-shadow:var(--e4)}
.rv-img.in::after{animation:curtain 1.3s var(--wipe) forwards}
.rv-img.in .photo{animation:settle 1.6s var(--ease-out) .6s forwards}
@keyframes curtain{
  0%{transform:scaleX(0);transform-origin:0 50%}
  46%{transform:scaleX(1);transform-origin:0 50%}
  54%{transform:scaleX(1);transform-origin:100% 50%}
  100%{transform:scaleX(0);transform-origin:100% 50%}
}
@keyframes settle{from{opacity:1;transform:scale(1.2)}to{opacity:1;transform:none}}

/* ═══ cards ════════════════════════════════════════════════════ */
.card{
  position:relative;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--s-xxl);
  transition:transform .35s var(--ease),box-shadow .35s ease,border-color .35s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--e3);border-color:var(--hairline-soft)}
.card::before{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--brand-180);margin-bottom:var(--s-lg);transition:width .4s var(--ease)}
.card:hover::before{width:56px}
.card .num{display:block;font-size:13px;font-weight:600;color:var(--primary);margin-bottom:var(--s-xs)}
.card h3{margin-bottom:var(--s-xs)}
.card p{color:var(--slate)}

/* ═══ numbered steps ═══════════════════════════════════════════ */
.steps{border-top:1px solid var(--hairline)}
.step{
  display:grid;grid-template-columns:56px 250px 1fr;gap:var(--s-xl);
  padding:var(--s-xl) 0;border-bottom:1px solid var(--hairline-soft);align-items:start;
}
.step .n{font-size:14px;font-weight:600;color:var(--primary)}
.step .meta{display:block;margin-top:6px;font-size:14px;font-weight:500;color:var(--steel)}
.step p{color:var(--slate);max-width:58ch}

/* ═══ checklist ════════════════════════════════════════════════ */
.checks{border-top:1px solid var(--hairline)}
.checks li{display:grid;grid-template-columns:24px 1fr;gap:var(--s-sm);padding:var(--s-md) 0;border-bottom:1px solid var(--hairline-soft);color:var(--slate)}
.checks b{color:var(--ink);font-weight:500}
.ck{color:var(--primary);font-size:14px;line-height:1.7}

/* ═══ stats ════════════════════════════════════════════════════ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-xl)}
.stat b{display:block;font-size:48px;font-weight:600;line-height:1.1;letter-spacing:-1px;color:var(--primary);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:var(--s-xs);font-size:15px;color:var(--steel)}
.stat-row{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--s-section-sm)}

/* ═══ rolling counter countdown ════════════════════════════════
   Each digit sits in its own window; the column behind it rolls
   (site.js). The fades top and bottom make the window read as a drum.
   --odo sets the size of everything. */
.odometer{--odo:64px;display:flex;align-items:flex-start;gap:var(--s-sm);margin-top:var(--s-xxl)}
.odometer.center{justify-content:center}
.odo-group{display:flex;flex-direction:column;align-items:center}
.odo-group>span{margin-top:var(--s-sm);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--steel)}
.odo-digits{display:flex;gap:4px}
.odo-digit{
  position:relative;display:block;width:.74em;height:1.2em;overflow:hidden;
  font-size:var(--odo);font-weight:600;line-height:1.2em;letter-spacing:0;text-align:center;
  font-variant-numeric:tabular-nums;color:var(--ink);
  background:var(--canvas);border:1px solid var(--hairline);border-radius:10px;box-shadow:var(--e2);
}
.odo-digit::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--canvas),rgba(255,255,255,0) 18%,rgba(255,255,255,0) 82%,var(--canvas));
}
.odo-col{display:block;will-change:transform;transition:transform .8s cubic-bezier(.34,1.4,.64,1)}
.odo-col i{display:block;height:1.2em;font-style:normal}
.odo-sep{height:1.2em;font-size:var(--odo);font-weight:500;line-height:1.12em;color:var(--hairline-strong)}
.odo-group[data-c="s"] .odo-digit{color:var(--primary)}
.odometer.closed .odo-digit{color:var(--stone)}

/* ═══ logo wall / marquee ══════════════════════════════════════ */
.logos{padding:var(--s-section) 0;border-top:1px solid var(--hairline)}
.logos .lead-in{text-align:center;font-size:14px;font-weight:500;color:var(--steel);margin-bottom:var(--s-xl)}
.marquee{
  overflow:hidden;
  --fade:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-image:var(--fade);mask-image:var(--fade);
}
.track{display:flex;width:max-content;animation:drift 64s linear infinite;will-change:transform}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-25%,0,0)}}
.tgroup{display:flex;align-items:center;flex:none}
.logo{flex:none;display:block;margin:0 var(--s-xxxl);opacity:.42;filter:grayscale(1);transition:opacity .2s ease,filter .2s ease}
.logos:hover .logo{opacity:.6}
.logo:hover{opacity:1;filter:none}

/* ═══ client testimonials ══════════════════════════════════════ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-xl)}
.quotes-2{grid-template-columns:repeat(2,1fr)}
.quote-card{
  position:relative;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:var(--s-xxl);display:flex;flex-direction:column;gap:var(--s-xl);
  transition:transform .35s var(--ease),box-shadow .35s ease;
}
.quote-card:hover{transform:translateY(-4px);box-shadow:var(--e3)}
.quote-card::before{content:"\201C";display:block;height:28px;font-size:64px;line-height:1;font-family:Georgia,serif;color:var(--brand-180)}
.quote-card blockquote{flex:1;font-size:16px;font-weight:500;line-height:1.65;color:var(--ink)}
.quote-card figcaption{display:flex;align-items:center;gap:var(--s-md);padding-top:var(--s-lg);border-top:1px solid var(--hairline-soft)}
.quote-card img{width:52px;height:52px;border-radius:var(--r-full);object-fit:cover;flex:none}
.quote-card b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.quote-card span{display:block;font-size:14px;color:var(--slate)}

/* ═══ benefit rows (text + photo, alternating) ═════════════════ */
.benefits{display:grid;gap:var(--s-section-lg)}
.benefit{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-section);align-items:center}
.benefit.flip .benefit-media{order:-1}
.benefit h2{margin-bottom:var(--s-md)}
.benefit p{color:var(--slate);max-width:52ch}

/* ═══ membership path ══════════════════════════════════════════ */
.path{position:relative;display:grid;gap:var(--s-section-sm)}
.path::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--brand-180);transform:scaleY(0);transform-origin:50% 0;transition:transform 1.8s var(--ease-out)}
.path.in::before{transform:scaleY(1)}
.path-stage{display:grid;grid-template-columns:48px 1fr;gap:var(--s-xl)}
.path-stage>.n{
  position:relative;z-index:1;width:48px;height:48px;border-radius:var(--r-full);
  background:var(--canvas);border:2px solid var(--brand-180);
  display:grid;place-items:center;font-size:16px;font-weight:600;color:var(--primary);
}
.path-stage h3{margin:10px 0 var(--s-md);color:var(--primary)}
.roles{display:grid;grid-template-columns:repeat(var(--cols,1),1fr);gap:var(--s-lg)}
.role{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--s-xl);transition:transform .35s var(--ease),box-shadow .35s ease}
.role:hover{transform:translateY(-3px);box-shadow:var(--e3)}
.role h4{display:flex;align-items:center;gap:var(--s-sm);margin-bottom:var(--s-sm);font-size:18px;font-weight:600}
.role h4 i{
  width:26px;height:26px;border-radius:var(--r-full);flex:none;font-style:normal;
  background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-size:13px;
}
.role p{font-size:15px;color:var(--slate)}

/* ═══ story rail (students page) ═══════════════════════════════
   One line runs down the left of all chapters. The green part fills
   with reading progress (--story, set in site.js) and each chapter
   dot lights up once it passes the reading line. */
.story{position:relative;--rail-x:calc(max(0px, (100% - var(--container)) / 2) + var(--gutter) + 10px)}
.story::before,.story::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:var(--s-section-lg);bottom:var(--s-section-lg);left:var(--rail-x);width:2px;border-radius:2px;background:var(--hairline);
}
.story::after{background:var(--brand-180);transform-origin:50% 0;transform:scaleY(var(--story,0))}
.story .wrap{padding-left:calc(var(--gutter) + 56px)}
.chapter{position:relative;display:block;margin-bottom:var(--s-sm);font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--primary)}
.chapter i{
  position:absolute;left:-53px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:var(--r-full);
  background:var(--canvas);border:2px solid var(--hairline-strong);
  transition:background-color .4s ease,border-color .4s ease,box-shadow .4s ease,transform .4s var(--ease);
}
.chapter.passed i{background:var(--brand-180);border-color:var(--brand-180);box-shadow:0 0 0 5px var(--tint-green);transform:scale(1.1)}
.sub-head{margin:var(--s-section-lg) 0 var(--s-xl)}
.sub-head p{margin-top:var(--s-xs);color:var(--slate)}

/* ═══ events ═══════════════════════════════════════════════════ */
.events{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-xl)}
.event{
  display:flex;flex-direction:column;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--s-xxl);
  transition:transform .35s var(--ease),box-shadow .35s ease;
}
.event:hover{transform:translateY(-4px);box-shadow:var(--e3)}
.event-date{display:flex;align-items:baseline;gap:var(--s-xs);margin-bottom:var(--s-lg)}
.event-date b{font-size:44px;font-weight:600;line-height:1;letter-spacing:-1px;color:var(--primary)}
.event-date span{font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--steel)}
.event h3{margin-bottom:var(--s-xs)}
.event p{flex:1;color:var(--slate)}
.event-meta{display:grid;gap:var(--s-xs);margin-top:var(--s-xl);padding-top:var(--s-md);border-top:1px solid var(--hairline-soft);font-size:14px;color:var(--charcoal)}
.event-meta li{display:flex;align-items:center;gap:10px}
.event-meta svg{flex:none;color:var(--primary)}
.event-meta a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}

/* ═══ application process (connected steps) ════════════════════ */
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-xxl)}
.process-step{position:relative}
.process-step:not(:last-child)::after{content:"";position:absolute;top:22px;left:64px;right:calc(-1 * var(--s-xxl) + 16px);border-top:2px dashed var(--hairline-strong)}
.process-step .icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:var(--s-lg);border-radius:var(--r-full);background:var(--tint-green);color:var(--primary)}
.process-step .num{display:block;margin-bottom:var(--s-xxs);font-size:13px;font-weight:600;color:var(--primary)}
.process-step h3{margin-bottom:var(--s-xs)}
.process-step p{color:var(--slate)}
.role h5{margin:var(--s-lg) 0 var(--s-xxs);font-size:15px;font-weight:600;color:var(--ink)}

/* ═══ application form (apply.html) ════════════════════════════ */
/* same top spacing as the other page intros, so headlines line up */
.apply-intro{background:var(--surface-soft);border-bottom:1px solid var(--hairline);padding:var(--s-section-lg) 0 var(--s-section-sm)}
.apply-intro .t-subtitle{margin-top:var(--s-md);color:var(--slate);max-width:52ch}
.back-link{display:inline-flex;align-items:center;gap:var(--s-xs);margin-bottom:var(--s-xl);font-size:14px;font-weight:500;color:var(--steel);transition:color .2s ease}
.back-link svg{transition:transform .25s var(--ease)}
.back-link:hover{color:var(--primary)}
.back-link:hover svg{transform:translateX(-3px)}

.apply-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-section);align-items:start}
.apply-form{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--s-section-sm);box-shadow:var(--e1)}
.apply-closed{margin-bottom:var(--s-xl)}

/* sections */
.form-section{border:0;margin:0;padding:0;min-width:0}
.form-section+.form-section{margin-top:var(--s-section-sm);padding-top:var(--s-section-sm);border-top:1px solid var(--hairline-soft)}
.form-section legend{display:flex;align-items:center;gap:var(--s-sm);margin-bottom:var(--s-xl);padding:0;font-size:22px;font-weight:600;color:var(--ink)}
.step-no{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-full);background:var(--tint-green);color:var(--primary);font-size:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-lg) var(--s-xl)}
.field.full{grid-column:1/-1}

/* labels, inputs, messages */
.field>label,.field>.label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:var(--ink)}
.opt{font-weight:400;color:var(--stone)}
.input{
  display:block;width:100%;height:48px;padding:0 14px;
  font:inherit;font-size:15px;color:var(--ink);background:var(--canvas);
  border:1px solid var(--hairline-strong);border-radius:var(--r-md);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.input::placeholder{color:var(--muted)}
.input:hover{border-color:var(--steel)}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--tint-green)}
select.input{
  -webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23787671' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.input[type=number]{-moz-appearance:textfield}
.input::-webkit-outer-spin-button,.input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hint{margin-top:6px;font-size:13px;color:var(--steel)}
.error{margin-top:6px;font-size:13px;font-weight:500;color:var(--error)}
.error:empty{display:none}
.field.invalid .input{border-color:var(--error)}
.field.invalid .input:focus{box-shadow:0 0 0 4px var(--error-tint)}
.field.invalid .error{animation:rise .3s var(--ease-out)}

/* file drop zones: the real input covers the zone, so clicking and
   dropping a file both hit it directly */
.drop{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:var(--s-xl) var(--s-lg);text-align:center;
  background:var(--surface-soft);border:1.5px dashed var(--hairline-strong);border-radius:var(--r-lg);
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop:hover,.drop.dragover{border-color:var(--primary);background:var(--tint-green)}
.drop:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--tint-green)}
.drop.dragover .drop-icon{transform:translateY(-3px)}
.drop-icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:4px;border-radius:var(--r-full);background:var(--canvas);color:var(--primary);box-shadow:var(--e2);transition:transform .25s var(--ease)}
.drop-text{font-size:15px;color:var(--charcoal)}
.drop-text b{font-weight:600;color:var(--primary)}
.drop-hint{font-size:13px;color:var(--steel)}
.field.invalid .drop{border-color:var(--error);background:var(--error-tint)}
.field.has-file .drop{padding:var(--s-md) var(--s-lg)}
.field.has-file .drop-icon{display:none}
.file-list{display:grid;gap:var(--s-xs)}
.file-list:not(:empty){margin-top:10px}
.file-list li{display:flex;align-items:center;gap:var(--s-sm);padding:10px 10px 10px 14px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-md);animation:rise .35s var(--ease-out)}
.file-list li>svg{flex:none;color:var(--primary)}
.file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500}
.file-size{flex:none;font-size:13px;color:var(--steel)}
.file-remove{display:grid;place-items:center;flex:none;width:30px;height:30px;border:0;border-radius:var(--r-full);background:transparent;color:var(--steel);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.file-remove:hover{background:var(--surface);color:var(--ink)}

/* consent checkbox */
.consent{display:grid;grid-template-columns:22px 1fr;gap:var(--s-sm);align-items:start;padding:var(--s-lg);background:var(--surface-soft);border:1px solid var(--hairline);border-radius:var(--r-lg);cursor:pointer;transition:border-color .2s ease}
.consent:hover{border-color:var(--hairline-strong)}
.consent input{
  -webkit-appearance:none;appearance:none;display:grid;place-items:center;width:22px;height:22px;margin:1px 0 0;
  background:var(--canvas);border:1.5px solid var(--hairline-strong);border-radius:6px;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease;
}
.consent input::after{content:"";width:6px;height:11px;margin-top:-2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s var(--ease)}
.consent input:checked{background:var(--primary);border-color:var(--primary)}
.consent input:checked::after{transform:rotate(45deg) scale(1)}
.consent input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.consent span{font-size:14px;line-height:1.65;color:var(--slate)}
.consent b{font-weight:600;color:var(--ink)}
.consent a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.field.invalid .consent{border-color:var(--error);background:var(--error-tint)}

/* spam trap: off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* submit */
.form-submit{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-md) var(--s-xl);margin-top:var(--s-xxl)}
.form-submit p{font-size:14px;color:var(--steel)}
.btn-lg{min-height:52px;padding:14px 28px;font-size:16px}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn .spinner{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:var(--r-full);animation:spin .7s linear infinite}
.btn.is-loading{opacity:1;cursor:progress}
.btn.is-loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.form-alert{margin-top:var(--s-xl);padding:var(--s-md) var(--s-lg);font-size:14px;color:#7a2219;background:var(--error-tint);border-left:3px solid var(--error);border-radius:0 var(--r-md) var(--r-md) 0;animation:rise .35s var(--ease-out)}
.form-alert a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* success */
.apply-success{padding:var(--s-section) var(--s-xxl);text-align:center;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--e1);animation:rise .6s var(--ease-out)}
.apply-success:focus{outline:none}
.success-mark{margin:0 auto var(--s-xl)}
.success-mark circle{fill:none;stroke:var(--brand-180);stroke-width:3;stroke-dasharray:214;stroke-dashoffset:214;animation:draw .8s var(--ease-out) .1s forwards}
.success-mark path{fill:none;stroke:var(--primary);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:42;stroke-dashoffset:42;animation:draw .5s var(--ease-out) .7s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.apply-success p{max-width:48ch;margin:var(--s-md) auto 0;color:var(--slate)}
.apply-success .btn-row{justify-content:center;margin-top:var(--s-xxl)}

/* sidebar */
.apply-aside{position:sticky;top:100px;display:grid;gap:var(--s-lg)}
.aside-card{padding:var(--s-xl);background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg)}
.progress-list{display:grid;margin:var(--s-md) 0 var(--s-lg);counter-reset:step}
.progress-list li{display:flex;align-items:center;gap:var(--s-sm);padding:7px 0;font-size:15px;color:var(--slate);counter-increment:step;transition:color .3s ease}
.progress-list li::before{
  content:counter(step);display:grid;place-items:center;flex:none;width:26px;height:26px;
  font-size:12px;font-weight:600;color:var(--steel);border:1.5px solid var(--hairline-strong);border-radius:var(--r-full);
  transition:background-color .3s ease,border-color .3s ease,color .3s ease,transform .3s var(--ease);
}
.progress-list li.done{color:var(--ink)}
.progress-list li.done::before{content:"\2713";color:#fff;background:var(--primary);border-color:var(--primary);transform:scale(1.05)}
.aside-deadline{padding-top:var(--s-md);border-top:1px solid var(--hairline-soft);font-size:13px;color:var(--steel)}
.aside-deadline b{display:block;margin-top:2px;font-size:16px;font-weight:600;color:var(--ink)}
.next-list{display:grid;gap:var(--s-md);margin-top:var(--s-md)}
.next-list li{display:grid;grid-template-columns:26px 1fr;gap:var(--s-sm);font-size:14px;line-height:1.5;color:var(--slate)}
.next-list .n{display:grid;place-items:center;width:26px;height:26px;font-size:12px;font-weight:600;color:var(--primary);background:var(--tint-green);border-radius:var(--r-full)}
.next-list b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.aside-contact{margin-top:var(--s-lg);padding-top:var(--s-md);border-top:1px solid var(--hairline-soft);font-size:14px;color:var(--slate)}
.aside-contact a{font-weight:500;color:var(--primary)}

/* ═══ legal page ═══════════════════════════════════════════════ */
.legal{max-width:760px}
.legal h1{margin-bottom:var(--s-xl)}
.legal h2{margin:var(--s-section-sm) 0 var(--s-md);padding-top:var(--s-xl);border-top:1px solid var(--hairline);font-size:28px;font-weight:600;scroll-margin-top:100px}
.legal h3{margin:var(--s-xl) 0 6px;font-size:16px;font-weight:600}
.legal p{color:var(--slate)}
.legal p+p{margin-top:var(--s-md)}
.legal-note{padding:var(--s-md) var(--s-lg);border-left:3px solid var(--brand-180);border-radius:0 var(--r-md) var(--r-md) 0;background:var(--surface-soft)}
.ph{padding:0 4px;border-radius:3px;background:var(--tint-green);color:var(--primary-deep)}
.legal-meta{margin-top:var(--s-section-sm);font-size:13px}

/* ═══ shared bits for the content pages ════════════════════════ */
.page-intro{background:var(--surface-soft);border-bottom:1px solid var(--hairline);padding:var(--s-section-lg) 0 var(--s-section)}
.page-intro .t-subtitle{margin-top:var(--s-lg);color:var(--slate);max-width:60ch}
.page-intro h1{max-width:20ch}
.meta-row{display:flex;flex-wrap:wrap;gap:var(--s-xs) var(--s-xl);margin-top:var(--s-xl);font-size:14px;color:var(--steel)}
.meta-row b{font-weight:600;color:var(--ink)}
.prose{max-width:70ch}
.prose p{color:var(--slate)}
.prose p+p{margin-top:var(--s-md)}
.card-more{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-lg);font-size:14px;font-weight:500;color:var(--primary)}
.card-more svg{transition:transform .25s var(--ease)}
.card:hover .card-more svg,.card-more:hover svg{transform:translateX(4px)}
/* figures are not built yet: a clearly marked placeholder box */
.figure-ph{
  display:grid;place-items:center;gap:6px;min-height:260px;padding:var(--s-xl);text-align:center;
  border:1.5px dashed var(--hairline-strong);border-radius:var(--r-lg);background:var(--surface-soft);
}
.figure-ph b{font-size:15px;font-weight:600;color:var(--ink)}
.figure-ph span{font-size:13px;color:var(--steel);max-width:40ch}
.figure-ph svg{color:var(--stone)}
.quote-line{max-width:28ch;font-size:32px;font-weight:600;line-height:1.25;letter-spacing:-.4px;color:var(--ink)}
.quote-line em{font-style:normal;color:var(--primary)}

/* ═══ case studies ═════════════════════════════════════════════ */
.cs-tabs{position:sticky;top:var(--nav-h);z-index:10;background:rgba(255,255,255,.96);border-bottom:1px solid var(--hairline)}
.cs-tabs .wrap{display:flex;gap:var(--s-xl);overflow-x:auto;scrollbar-width:none}
.cs-tabs a{position:relative;flex:none;padding:var(--s-md) 0;font-size:15px;font-weight:500;color:var(--steel);transition:color .2s ease}
.cs-tabs a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand-180);transform:scaleX(0);transition:transform .3s var(--ease)}
.cs-tabs a:hover,.cs-tabs a.active{color:var(--ink)}
.cs-tabs a.active::after{transform:scaleX(1)}
.cs{display:grid;grid-template-columns:300px 1fr;gap:var(--s-section);scroll-margin-top:150px}
.cs+.cs{margin-top:var(--s-section-lg);padding-top:var(--s-section-lg);border-top:1px solid var(--hairline)}
.cs-side{position:sticky;top:170px;align-self:start}
.cs-side .num{display:block;font-size:13px;font-weight:600;letter-spacing:.5px;color:var(--steel)}
.cs-side h2{margin:var(--s-md) 0 var(--s-xs)}
.cs-side p{font-size:15px;color:var(--slate)}
.cs-facts{margin-top:var(--s-xl);border-top:1px solid var(--hairline)}
.cs-facts div{display:flex;justify-content:space-between;gap:var(--s-md);padding:10px 0;border-bottom:1px solid var(--hairline-soft);font-size:14px}
.cs-facts dt{color:var(--steel)}
.cs-facts dd{font-weight:500;color:var(--ink);text-align:right}
.cs-body h3{margin-bottom:var(--s-xl);max-width:26ch}
.cs-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-lg);margin-top:var(--s-xl)}
.cs-block{padding:var(--s-xl);border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--canvas)}
.cs-block>span{display:block;margin-bottom:var(--s-sm);font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--primary)}
.cs-block p,.cs-block li{font-size:15px;color:var(--slate)}
.cs-block ul{display:grid;gap:6px}
.cs-block li{position:relative;padding-left:16px}
.cs-block li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:var(--r-full);background:var(--brand-180)}
.research-feature{
  display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s-section);align-items:center;padding:var(--s-section);
  border-radius:var(--r-lg);background:var(--surface-soft);border:1px solid var(--hairline);
}
.research-feature p{margin-top:var(--s-md);color:var(--slate)}
.research-feature .btn-row{margin-top:var(--s-xl)}
.research-mini{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-md)}
.research-mini div{padding:var(--s-lg);border-radius:var(--r-md);background:var(--canvas);border:1px solid var(--hairline)}
.research-mini b{display:block;font-size:32px;font-weight:600;line-height:1.1;letter-spacing:-.5px;color:var(--primary)}
.research-mini span{display:block;margin-top:4px;font-size:13px;color:var(--steel)}

/* ═══ research paper (Pole Position for Impact) ════════════════ */
.paper-toc{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-md);counter-reset:toc}
.paper-toc a{counter-increment:toc;display:block;padding:var(--s-md) var(--s-lg);border:1px solid var(--hairline);border-radius:var(--r-md);font-size:15px;font-weight:500;color:var(--ink);transition:border-color .2s ease,transform .25s var(--ease)}
.paper-toc a::before{content:"0" counter(toc);display:block;margin-bottom:2px;font-size:12px;font-weight:600;color:var(--primary)}
.paper-toc a:hover{border-color:var(--brand-180);transform:translateY(-2px)}
.keyfindings{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-lg);counter-reset:kf}
.keyfindings li{counter-increment:kf;position:relative;padding:var(--s-xl) var(--s-xl) var(--s-xl) 72px;border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--canvas);color:var(--slate);font-size:15px}
.keyfindings li::before{content:counter(kf);position:absolute;left:var(--s-xl);top:var(--s-xl);display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-full);background:var(--tint-green);color:var(--primary);font-size:14px;font-weight:600}
.keyfindings b{display:block;margin-bottom:4px;font-size:16px;font-weight:600;color:var(--ink)}
.lighthouses{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-lg)}
.lighthouse h3{font-size:18px;font-weight:600}
.lighthouse .field{display:block;margin:4px 0 var(--s-sm);font-size:13px;color:var(--steel)}
.lighthouse p{font-size:14px}
.method{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden}
.method div{padding:var(--s-xl);background:var(--canvas)}
.method div+div{border-left:1px solid var(--hairline)}
.method b{display:block;font-size:28px;font-weight:600;letter-spacing:-.5px;color:var(--ink)}
.method span{display:block;margin-top:4px;font-size:14px;color:var(--steel)}
.dims{display:grid;gap:var(--s-lg)}
.dim{display:grid;grid-template-columns:260px 1fr;gap:var(--s-xxl);padding:var(--s-xxl);border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--canvas)}
.dim h3{font-size:20px;font-weight:600}
.dim .score{display:block;margin-top:var(--s-sm);font-size:14px;color:var(--steel)}
.dim .score b{font-size:28px;font-weight:600;color:var(--primary);letter-spacing:-.5px;margin-right:4px}
.dim-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-lg)}
.dim-facts div b{display:block;font-size:26px;font-weight:600;line-height:1.1;color:var(--ink)}
.dim-facts div span{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--slate)}
.dim>div>p{margin-top:var(--s-lg);font-size:15px;color:var(--slate)}
.correlations{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-lg)}
.corr{padding:var(--s-xl);border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--canvas)}
.corr .rho{display:block;font-size:34px;font-weight:600;letter-spacing:-.5px;color:var(--primary);font-variant-numeric:tabular-nums}
.corr .p{display:block;font-size:12px;color:var(--steel)}
.corr h3{margin:var(--s-md) 0 6px;font-size:17px;font-weight:600}
.corr p{font-size:14px;color:var(--slate)}
.racer{display:grid;gap:var(--s-lg);counter-reset:racer}
.racer-part{display:grid;grid-template-columns:220px 1fr 1fr;gap:var(--s-xxl);padding:var(--s-xxl);border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--canvas)}
.racer-part .part{display:block;font-size:24px;font-weight:600;letter-spacing:-.3px;color:var(--ink)}
.racer-part .dimension{display:block;margin-top:4px;font-size:14px;color:var(--steel)}
.racer-part h4{margin-bottom:6px;font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--primary)}
.racer-part p{font-size:15px;color:var(--slate)}

/* ═══ pole position: hero with the racer, executive summary ════ */
.pp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-xxl);align-items:start}
.racer-hero{position:relative;margin:0;height:400px;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.racer-hero.is-dragging{cursor:grabbing}
.racer-hero canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .9s ease}
.racer-hero.is-live canvas{opacity:1}
.racer-hero.no-3d{display:none}
.exec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-section);align-items:start}
.levers{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-md)}
.levers li{padding:var(--s-lg);border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--canvas)}
.levers span{display:block;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--primary)}
.levers b{display:block;margin-top:6px;font-size:15px;font-weight:600;line-height:1.4;color:var(--ink)}
@media(max-width:1023px){
  .pp-hero,.exec{grid-template-columns:1fr}
  .exec{gap:var(--s-lg)}
  .racer-hero{height:320px}
  .levers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .racer-hero{height:250px}
  .levers{grid-template-columns:1fr}
}

/* ═══ fold: a <details> block that opens with the FAQ animation ═══ */
.folds{display:grid;gap:var(--s-md)}
.fold{border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--canvas);overflow:hidden}
.fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--s-md);padding:var(--s-lg) var(--s-xl);font-size:17px;font-weight:600;color:var(--ink)}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"+";flex:none;width:24px;text-align:center;margin-left:auto;color:var(--primary);font-weight:400;font-size:24px;line-height:1;transition:transform .3s var(--ease)}
.fold.is-open summary::after{content:"\2212"}
.fold summary .n{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--r-full);background:var(--tint-green);color:var(--primary);font-size:14px;font-weight:600}
.fold-body{padding:0 var(--s-xl) var(--s-xl)}
.fold-body>p{color:var(--slate);max-width:72ch}
.fold-body>p+p,.fold-body>h5+p{margin-top:var(--s-sm)}
.fold-body>h5{margin-top:var(--s-lg);font-size:15px;font-weight:600;color:var(--ink)}
@media(max-width:767px){
  .fold summary{padding:var(--s-md) var(--s-lg);font-size:16px}
  .fold summary .n{width:32px;height:32px;font-size:13px}
  .fold-body{padding:0 var(--s-lg) var(--s-lg)}
}

/* ═══ 3D impact racer (pole-position.html, assets/racer.js) ══════ */
.racer3d{padding-top:var(--s-section-lg)}
.racer3d-head{max-width:760px}
.racer3d-head p{margin-top:var(--s-md);color:var(--slate)}
.racer3d-view{position:relative;margin-top:var(--s-xl);height:460px}
.racer3d-view canvas{display:block;width:100%;height:100%}
.racer3d-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.racer3d-lines .dot circle{fill:var(--brand-180);stroke:var(--canvas);stroke-width:2.5}
.racer3d-lines .dot .halo{fill:var(--brand-180);stroke:none;opacity:0}
.racer3d-lines .dot.is-active .halo{opacity:.3}
.racer3d-lines .dot.is-back{opacity:.35}
.racer3d-lines text{font:600 12px Inter,"Inter Fallback",Arial,sans-serif;fill:#fff;text-anchor:middle;dominant-baseline:central}
/* legend: the five parts, numbered like the points on the car */
.racer3d-labels{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-sm);margin-top:var(--s-lg)}
.racer3d-label{display:grid;grid-template-columns:28px 1fr;column-gap:10px;align-items:start;padding:var(--s-sm) var(--s-md);border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--canvas);transition:border-color .2s ease,background-color .2s ease,opacity .3s ease;outline-offset:2px}
.racer3d-label:hover,.racer3d-label:focus-visible{border-color:var(--brand-180);background:var(--surface-soft)}
.racer3d-label i{display:grid;place-items:center;grid-row:span 2;width:26px;height:26px;border-radius:var(--r-full);background:var(--brand-180);font-style:normal;font-size:12px;font-weight:600;color:#fff}
.racer3d-label b{display:block;font-size:13px;font-weight:600;line-height:1.3;color:var(--ink)}
.racer3d-label span{display:block;margin-top:2px;font-size:13px;line-height:1.3;color:var(--slate)}
.racer3d-label.is-back{opacity:.55}
.racer3d-hint{display:none;margin-top:var(--s-sm);font-size:13px;color:var(--steel);text-align:center}
/* 3D: the stage stays in place while the car turns */
.racer3d.is-3d .racer3d-track{height:300vh}
.racer3d.is-3d .racer3d-sticky{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));display:flex}
.racer3d.is-3d .racer3d-inner{flex:1;display:flex;flex-direction:column;min-height:0;padding-top:var(--s-md);padding-bottom:var(--s-lg)}
.racer3d.is-3d .racer3d-view{flex:1;min-height:240px;height:auto;margin-top:0}
.racer3d.is-3d .racer3d-hint{display:block}
.racer3d.is-3d .racer3d-labels{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .7s var(--ease-out)}
.racer3d.is-live .racer3d-labels{opacity:1;transform:none}
/* no WebGL: the five parts as a plain list */
.racer3d.no-3d{padding-bottom:var(--s-section-lg)}
.racer3d.no-3d .racer3d-view{display:none}
@media(max-width:1023px){
  .racer3d-labels{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:767px){
  .racer3d.is-3d .racer3d-track{height:250vh}
  .racer3d.is-3d .racer3d-inner{padding-top:var(--s-sm);padding-bottom:var(--s-md)}
  .racer3d.is-3d .racer3d-view{min-height:200px}
  .racer3d-labels{grid-template-columns:1fr 1fr;gap:8px;margin-top:var(--s-sm)}
  .racer3d-label{grid-template-columns:22px 1fr;column-gap:8px;padding:8px 10px}
  .racer3d-label i{width:20px;height:20px;font-size:11px}
  .racer3d-label b{font-size:12px}
  .racer3d-label span{font-size:11.5px;margin-top:0}
  .racer3d-hint{margin-top:var(--s-xs)}
}

/* ═══ charts (research page) ═══════════════════════════════════
   Plain HTML bars. Single green hue; grey only where the chart itself
   says "below average". Values are labelled directly, the hover tip
   (site.js) repeats them with context. */
.chart{margin:0;padding:var(--s-xxl);border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--canvas)}
.chart figcaption{margin-bottom:var(--s-xl)}
.chart figcaption small{display:block;font-size:13px;font-weight:600;color:var(--steel)}
.chart figcaption span{display:block;margin-top:2px;font-size:17px;font-weight:600;line-height:1.35;color:var(--ink)}
.chart-note{margin-top:var(--s-md);font-size:13px;color:var(--steel)}
.chart-legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:var(--s-lg);font-size:13px;color:var(--slate)}
.chart-legend span{display:inline-flex;align-items:center;gap:8px}
.chart-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--primary)}
.chart-legend i.low{background:var(--stone)}
.chart-legend i.avg{height:0;border-radius:0;background:none;border-top:1.5px dashed var(--charcoal)}

.vchart{display:grid;grid-template-columns:28px 1fr;height:320px;margin-top:36px}
.vchart .y{position:relative}
.vchart .y span{position:absolute;right:10px;transform:translateY(50%);font-size:12px;color:var(--steel);font-variant-numeric:tabular-nums}
.vchart .plot{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-xl);align-items:end;padding:0 var(--s-md);border-bottom:1px solid var(--hairline-strong)}
.vchart .gl{position:absolute;left:0;right:0;border-top:1px solid var(--hairline-soft)}
.vbar{position:relative;z-index:1;height:var(--h);border-radius:4px 4px 0 0;background:var(--primary);cursor:default;outline-offset:3px}
.vbar.low{background:var(--stone)}
.vbar>span{position:absolute;inset:0;border-radius:inherit;background:inherit;transform-origin:50% 100%;transform:scaleY(0);transition:transform 1.1s var(--ease-out)}
/* values sit inside the bar, near its base, so they never meet the average line */
.vbar b{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:15px;font-weight:600;color:#fff;white-space:nowrap;opacity:0;transition:opacity .4s ease .8s}
.vbar.low b{color:var(--ink)}
.vbar em{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-10px);font-style:normal;font-size:12px;font-weight:600;color:var(--primary-deep);white-space:nowrap;opacity:0;transition:opacity .4s ease 1s}
.chart.in .vbar>span{transform:scaleY(1)}
.chart.in .vbar b,.chart.in .vbar em{opacity:1}
.vbar:nth-child(3)>span{transition-delay:.06s}
.vbar:nth-child(4)>span{transition-delay:.12s}
.vbar:nth-child(5)>span{transition-delay:.18s}
.vbar:nth-child(6)>span{transition-delay:.24s}
.vbar:nth-child(7)>span{transition-delay:.3s}
.vchart .avg{position:absolute;z-index:2;left:0;right:0;border-top:1.5px dashed var(--charcoal);pointer-events:none}
.vchart .avg span{position:absolute;right:0;bottom:4px;padding:0 4px;font-size:12px;font-weight:500;color:var(--charcoal);background:var(--canvas)}
.vchart .plot,.xlabels{grid-template-columns:repeat(5,minmax(0,1fr))}
.xlabels span{overflow-wrap:anywhere;hyphens:auto}
.xlabels{display:grid;gap:var(--s-xl);margin-left:28px;padding:10px var(--s-md) 0}
.xlabels span{font-size:13px;line-height:1.35;text-align:center;color:var(--slate)}
/* narrow phones: short names, set at an angle instead of breaking mid-word */
@media(max-width:599px){
  .chart .xlabels{height:78px;padding-top:4px}
  .chart .xlabels span{position:relative;font-size:0}
  .chart .xlabels span::after{content:attr(data-short);position:absolute;top:6px;right:50%;font-size:11px;line-height:1;white-space:nowrap;color:var(--slate);transform:rotate(-40deg);transform-origin:100% 0}
}

.hbars{display:grid;gap:10px}
.hgroup{margin-top:var(--s-md);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--steel)}
.hgroup:first-child{margin-top:0}
.hbar{display:grid;grid-template-columns:minmax(120px,38%) 1fr 52px;align-items:center;gap:var(--s-sm);font-size:14px;cursor:default;outline-offset:3px}
.hbar>span{color:var(--slate)}
.hbar .bar{height:14px;background:var(--surface)}
.hbar .bar i{display:block;height:100%;width:var(--v);border-radius:0 4px 4px 0;background:var(--primary);transform-origin:0 50%;transform:scaleX(0);transition:transform 1s var(--ease-out)}
.chart.in .hbar .bar i{transform:scaleX(1)}
.hbar b{text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-lg)}

/* hover tip shared by all charts */
.tip{position:fixed;z-index:80;top:0;left:0;max-width:240px;padding:8px 12px;border-radius:var(--r-sm);background:var(--ink);color:#fff;font-size:13px;line-height:1.4;pointer-events:none;opacity:0;transition:opacity .15s ease}
.tip.show{opacity:1}

/* ═══ knowledge base ═══════════════════════════════════════════ */
.kb-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--s-section);align-items:start}
.kb-toc{position:sticky;top:110px}
.kb-toc>span{display:block;margin-bottom:var(--s-sm);font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--steel)}
.kb-toc ol{display:grid;border-left:2px solid var(--hairline)}
.kb-toc a{display:block;margin-left:-2px;padding:8px 0 8px 16px;border-left:2px solid transparent;font-size:14px;line-height:1.4;color:var(--steel);transition:color .2s ease,border-color .2s ease}
.kb-toc a:hover{color:var(--ink)}
.kb-toc a.active{color:var(--ink);font-weight:500;border-left-color:var(--brand-180)}
.kb-chapter{scroll-margin-top:100px}
.kb-chapter+.kb-chapter{margin-top:var(--s-section-lg);padding-top:var(--s-section-lg);border-top:1px solid var(--hairline)}
.kb-chapter>header{margin-bottom:var(--s-xxl)}
.kb-chapter>header .num{display:block;margin-bottom:var(--s-xs);font-size:13px;font-weight:600;color:var(--primary)}
.kb-chapter>header p{margin-top:var(--s-md);max-width:68ch;color:var(--slate)}
.kb-chapter h3{margin:var(--s-section-sm) 0 var(--s-lg);font-size:22px;font-weight:600;scroll-margin-top:100px}
.kb-chapter h4{margin:var(--s-xl) 0 var(--s-sm);font-size:17px;font-weight:600}
.kb-chapter p{color:var(--slate)}
.kb-chapter p+p{margin-top:var(--s-md)}
.callout{padding:var(--s-lg) var(--s-xl);border-left:3px solid var(--brand-180);border-radius:0 var(--r-md) var(--r-md) 0;background:var(--surface-soft);font-size:15px;color:var(--slate)}
.callout b{color:var(--ink);font-weight:600}
.callout a{font-weight:500;color:var(--primary);text-decoration:underline;text-decoration-color:var(--brand-180);text-underline-offset:3px}
.prep-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px}
.callout+*{margin-top:var(--s-xl)}
*+.callout{margin-top:var(--s-xl)}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-lg)}
.fit>div{padding:var(--s-xl);border:1px solid var(--hairline);border-radius:var(--r-lg)}
.fit h3{margin:0 0 var(--s-md);font-size:17px}
.fit li{position:relative;padding:6px 0 6px 28px;font-size:15px;color:var(--slate)}
.fit li::before{position:absolute;left:0;top:6px;font-weight:600}
.fit .yes li::before{content:"\2713";color:var(--primary)}
.fit .no li::before{content:"\2715";color:var(--stone)}
.essay{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-xl) var(--s-xxl)}
.essay p{font-size:15px}
.kb-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--s-md)}
.kb-map a{display:flex;flex-direction:column;padding:var(--s-lg);border:1px solid var(--hairline);border-radius:var(--r-md);transition:border-color .2s ease,transform .25s var(--ease)}
.kb-map a:hover{border-color:var(--brand-180);transform:translateY(-2px)}
.kb-map small{font-size:12px;font-weight:600;color:var(--primary)}
.kb-map b{margin-top:4px;font-size:14px;font-weight:600;line-height:1.35;color:var(--ink)}
/* function x industry x firm type = your role */
.equation{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;gap:var(--s-sm)}
.equation>div{padding:var(--s-lg);border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--canvas)}
.equation>div.result{background:var(--tint-green);border-color:transparent}
.equation>i{display:grid;place-items:center;font-style:normal;font-size:22px;color:var(--stone)}
.equation b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.equation span{display:block;margin-top:4px;font-size:13px;color:var(--slate)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-md)}
.tiles.three{grid-template-columns:repeat(3,1fr)}
.tile{padding:var(--s-lg) var(--s-xl);border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--canvas)}
.tile b{display:block;margin-bottom:4px;font-size:16px;font-weight:600;color:var(--ink)}
.tile p{font-size:14px;line-height:1.55}
.capabilities{display:flex;flex-wrap:wrap;gap:var(--s-sm)}
.capabilities span{display:flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--hairline);border-radius:var(--r-md);font-size:15px;font-weight:500;color:var(--ink)}
.capabilities span::before{content:"";width:8px;height:8px;border-radius:var(--r-full);background:var(--brand-180)}
.myth{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden}
.myth>div{padding:var(--s-xl)}
.myth>div+div{border-left:1px solid var(--hairline);background:var(--surface-soft)}
.myth span{display:block;margin-bottom:6px;font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--steel)}
.myth div+div span{color:var(--primary)}
.myth p{font-size:15px}
/* firm database */
.db-tools{display:grid;grid-template-columns:1fr 260px;gap:var(--s-sm);align-items:center;margin-bottom:var(--s-md)}
.db-count{margin-bottom:var(--s-sm);font-size:13px;color:var(--steel)}
.db-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--r-lg)}
.db{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
.db th{padding:12px 16px;text-align:left;font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--steel);background:var(--surface-soft);border-bottom:1px solid var(--hairline)}
.db td{padding:12px 16px;border-bottom:1px solid var(--hairline-soft);color:var(--slate);vertical-align:middle}
.db tr:last-child td{border-bottom:0}
.db tbody tr{transition:background-color .15s ease}
.db tbody tr:hover{background:var(--surface-soft)}
.db td:first-child{font-weight:600;color:var(--ink)}
.db a{display:inline-flex;align-items:center;gap:4px;font-weight:500;color:var(--primary)}
.db a:hover{text-decoration:underline;text-underline-offset:3px}
.db-empty{padding:var(--s-xxl);text-align:center;color:var(--steel)}
/* CV helpers */
.cv-grid{display:grid;grid-template-columns:260px 1fr;gap:var(--s-xxl);align-items:start}
.cv-paper{position:sticky;top:110px;aspect-ratio:1/1.414;padding:22px 20px;border:1px solid var(--hairline);border-radius:6px;background:var(--canvas);box-shadow:var(--e3)}
.cv-paper .name{height:10px;width:55%;margin:0 auto 6px;border-radius:2px;background:var(--ink)}
.cv-paper .cv-contact{height:5px;width:70%;margin:0 auto 14px;border-radius:2px;background:var(--hairline-strong)}
.cv-paper .sec{margin-top:10px;padding-top:6px;border-top:1px solid var(--ink);font-size:8px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--ink)}
.cv-paper .line{height:4px;margin-top:5px;border-radius:2px;background:var(--hairline)}
.cv-paper .line.s{width:70%}
.cv-paper .line.m{width:88%}
.rules{display:grid;gap:var(--s-sm);counter-reset:rule}
.rules li{counter-increment:rule;display:grid;grid-template-columns:40px 1fr;gap:var(--s-md);padding:var(--s-md) 0;border-bottom:1px solid var(--hairline-soft)}
.rules li::before{content:counter(rule,decimal-leading-zero);font-size:14px;font-weight:600;color:var(--primary);padding-top:2px}
.rules b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.rules p{margin-top:2px;font-size:15px}
.formula{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--s-xs)}
.formula span{padding:12px 16px;border-radius:var(--r-md);background:var(--surface-soft);border:1px solid var(--hairline);font-size:14px;color:var(--ink)}
.formula span.key{background:var(--tint-green);border-color:transparent;font-weight:600;color:var(--primary-deep)}
.formula i{display:grid;place-items:center;font-style:normal;color:var(--stone)}
.example{margin-top:var(--s-md);padding:var(--s-md) var(--s-lg);border-radius:var(--r-md);border:1px dashed var(--hairline-strong);font-size:15px;color:var(--ink)}
.example small{display:block;margin-bottom:4px;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--steel)}
.verbs{width:100%;border-collapse:collapse;font-size:14px}
.verbs th{padding:10px 12px;text-align:left;font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--steel);border-bottom:1px solid var(--hairline)}
.verbs td{padding:12px;border-bottom:1px solid var(--hairline-soft);color:var(--slate);vertical-align:top}
.verbs td:first-child{font-weight:600;color:var(--ink);width:26%}
.verbs tr.weak td{color:var(--stone)}
.stack{display:grid;gap:var(--s-sm);counter-reset:stack}
.stack li{counter-increment:stack;display:grid;grid-template-columns:48px 1fr;gap:var(--s-md);padding:var(--s-lg);border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--canvas)}
.stack li::before{content:counter(stack);display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-full);background:var(--tint-green);color:var(--primary);font-weight:600;font-size:14px}
.stack b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.stack p{margin-top:4px;font-size:15px}
.stack ul{margin-top:6px;display:grid;gap:4px}
.stack ul li{all:unset;display:block;position:relative;padding-left:16px;font-size:14px;color:var(--slate)}
.stack ul li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:var(--r-full);background:var(--stone)}
.dl{display:grid;gap:6px;margin-top:var(--s-md)}
.dl li{position:relative;padding-left:22px;font-size:15px;color:var(--slate)}
.dl li::before{content:"\2192";position:absolute;left:0;color:var(--primary)}
.downloads{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-md)}
.downloads div{display:flex;align-items:center;gap:var(--s-md);padding:var(--s-md) var(--s-lg);border:1px dashed var(--hairline-strong);border-radius:var(--r-md);font-size:14px;color:var(--slate)}
.downloads svg{flex:none;color:var(--primary)}
.downloads b{display:block;font-size:15px;color:var(--ink)}
.formats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-md)}
.formats a{display:block;padding:var(--s-lg);border:1px solid var(--hairline);border-radius:var(--r-md);transition:border-color .2s ease,transform .25s var(--ease)}
.formats a:hover{border-color:var(--brand-180);transform:translateY(-2px)}
.formats small{font-size:12px;font-weight:600;color:var(--primary)}
.formats b{display:block;margin-top:4px;font-size:16px;font-weight:600;color:var(--ink)}
.formats span{display:block;margin-top:4px;font-size:13px;color:var(--steel)}
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden}
.phases div{position:relative;padding:var(--s-lg)}
.phases div+div{border-left:1px solid var(--hairline)}
.phases small{font-size:12px;font-weight:600;color:var(--primary)}
.phases b{display:block;margin:4px 0;font-size:16px;font-weight:600;color:var(--ink)}
.phases p{font-size:14px}
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-md)}
.do-dont>div{padding:var(--s-xl);border:1px solid var(--hairline);border-radius:var(--r-lg)}
.do-dont h5{margin-bottom:var(--s-sm);font-size:14px;font-weight:600;color:var(--ink)}
.do-dont li{position:relative;padding:5px 0 5px 24px;font-size:15px;color:var(--slate)}
.do-dont .do li::before{content:"\2713";position:absolute;left:0;color:var(--primary);font-weight:600}
.do-dont .dont li::before{content:"\2715";position:absolute;left:0;color:var(--stone);font-weight:600}
.principles{display:grid;gap:var(--s-lg)}
.principle{display:grid;grid-template-columns:220px 1fr;gap:var(--s-xxl);padding:var(--s-xxl);border:1px solid var(--hairline);border-radius:var(--r-lg)}
.principle .num{display:block;font-size:13px;font-weight:600;color:var(--primary)}
.principle h4{margin:4px 0 0;font-size:22px}
.principle .why{margin-top:var(--s-md);padding-top:var(--s-md);border-top:1px solid var(--hairline-soft)}

/* ═══ CTA banner + FAQ + footer ════════════════════════════════ */
.cta-banner{background:var(--surface);border-radius:var(--r-lg);padding:var(--s-section);text-align:center}
.cta-banner h2{max-width:20ch;margin:0 auto}
.cta-banner p{max-width:52ch;margin:var(--s-md) auto 0;color:var(--slate)}
.cta-banner .btn-row{margin-top:var(--s-xxl);justify-content:center}

.faq details{border-bottom:1px solid var(--hairline);padding:var(--s-xl) 0;overflow:hidden}
.faq details:first-child{border-top:1px solid var(--hairline)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s-md);font-size:18px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
/* fixed box for the +/×: with a long, wrapping question it would otherwise
   shrink, and the turned cross would be cut off at the edge */
.faq summary::after{content:"+";flex:none;width:24px;text-align:center;color:var(--primary);font-weight:400;font-size:24px;line-height:1;transition:transform .3s var(--ease)}
/* open: a minus instead of a turned plus, which got clipped at the edge */
.faq details.is-open summary::after{content:"\2212"}
.faq p{margin-top:var(--s-sm);color:var(--slate);max-width:70ch}
.faq+.faq details:first-child{border-top:0}
.faq-toggle{margin-top:var(--s-xl)}

.foot{border-top:1px solid var(--hairline);padding:var(--s-section) 0 var(--s-xxl)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(5,minmax(0,1fr));column-gap:var(--s-xxl);row-gap:var(--s-xl)}
/* below 1280px the description gets its own row, so the link columns never crowd it */
@media(min-width:1024px) and (max-width:1279px){
  .foot-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
.foot-brand img{height:52px;width:auto}
.m-latest{color:var(--primary)!important;font-weight:500!important}
.foot-brand p{margin-top:var(--s-md);color:var(--steel);font-size:14px;max-width:30ch}
.foot h5{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:var(--s-sm)}
.foot-grid a:not(.foot-logo):not(.social){display:block;color:var(--steel);font-size:14px;padding:var(--s-xxs) 0;transition:color .2s ease}
.foot-grid a:not(.foot-logo):not(.social):hover{color:var(--primary)}
.socials{display:flex;gap:10px;margin-top:var(--s-lg)}
.socials a{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--hairline);border-radius:var(--r-full);color:var(--charcoal);transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.socials a:hover{color:#fff;background:var(--primary);border-color:var(--primary)}
.foot-note{margin-top:var(--s-xxxl);padding-top:var(--s-lg);border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;gap:var(--s-md);justify-content:space-between;color:var(--stone);font-size:13px}
.foot-legal{display:flex;gap:var(--s-lg)}
.foot-legal a{color:var(--steel);transition:color .2s ease}
.foot-legal a:hover{color:var(--primary)}

/* ═══ find your way (home) ══════════════════════════════════════
   "I'm [role] and I want to [goal]." Each green word is a slot
   machine window: site.js rolls words through it and opens a small
   menu of choices. The card underneath follows the sentence. */
.router-sec{padding:var(--s-section) 0 var(--s-section-lg)}
/* the reveal animation gives line and card their own layers: keep the menus above the card */
.router-line{position:relative;z-index:2;max-width:1080px;font-size:clamp(28px,4.4vw,54px);font-weight:600;line-height:1.3;letter-spacing:-1px;color:var(--ink)}
.router-hint{margin-top:var(--s-sm);font-size:14px;color:var(--steel)}
html:not(.router-live) .router-hint{display:none}
.router-line [data-slot]{color:var(--primary)}
/* Each half of the sentence keeps its own line: "I'm [role]" on top,
   "and I want to [goal]." underneath. Without this the sentence flips
   between one and two lines as the chosen words change length, and the
   whole second half jumps a line during the swap animation. */
.rl-row{display:block}
/* the full stop always stays on the line of the last green word */
.slot-end{white-space:nowrap}

.slot{position:relative;display:inline-block;vertical-align:top}
.slot-btn{
  display:inline-flex;align-items:flex-start;gap:.14em;
  margin:0 -.1em;padding:0 .1em;border:0;border-radius:10px;background:transparent;
  font:inherit;letter-spacing:inherit;line-height:inherit;color:var(--primary);cursor:pointer;
  transition:background-color .25s ease
}
.slot-btn:hover,.slot.open .slot-btn{background:var(--tint-green)}
.slot-btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
/* the window the words roll through; the underline sits under it */
/* clipped top and bottom only: a word leaving upwards disappears, a longer word may stick out sideways while it fades */
.slot-win{position:relative;display:inline-block;height:1.3em;clip-path:inset(0 -100vw);white-space:nowrap;vertical-align:top}
.slot-line{position:absolute;left:0;right:0;bottom:.1em;height:.07em;min-height:3px;border-radius:2px;background:var(--brand-180);transform-origin:0 50%;pointer-events:none}
.slot-word{display:block;width:max-content;white-space:nowrap}
/* a replaced word fading out where it stood */
.router-line .slot-ghost{position:absolute;margin:0;color:var(--primary);line-height:1.3;pointer-events:none}
.slot-chev-w{display:inline-flex;flex:none}
/* single words are boxes, so they can glide to a new line */
.rl-w{display:inline-block}
.slot-chev{flex:none;width:.42em;height:.42em;margin-top:.5em;transition:transform .35s var(--ease)}
.slot.open .slot-chev{transform:rotate(180deg)}

.slot-menu{
  position:absolute;z-index:30;top:calc(100% + 8px);left:0;
  min-width:250px;max-width:calc(100vw - 32px);padding:6px;
  background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--e4);
  font-size:16px;font-weight:500;line-height:1.35;letter-spacing:0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .35s var(--ease-out),visibility 0s linear .35s
}
.slot.open .slot-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .35s var(--ease-out)}
.slot-menu button{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);width:100%;
  padding:10px 12px;border:0;border-radius:var(--r-md);background:transparent;
  font:inherit;color:var(--charcoal);text-align:left;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,color .15s ease
}
.slot-menu button:hover,.slot-menu button:focus-visible{background:var(--surface);color:var(--ink);outline:0}
.slot-menu button[aria-checked="true"]{color:var(--primary)}
.slot-menu button svg{flex:none;width:14px;height:14px;opacity:0}
.slot-menu button[aria-checked="true"] svg{opacity:1}

.router-result{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  margin-top:var(--s-section-sm);min-height:380px;overflow:hidden;
  background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--e2)
}
.rr-text{display:flex;flex-direction:column;justify-content:center;padding:var(--s-section-sm)}
.rr-text .t-h3{max-width:22ch}
.rr-text .t-body{margin-top:var(--s-sm);max-width:52ch;color:var(--slate)}
.rr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-sm) var(--s-xl);margin-top:var(--s-xl)}
.rr-actions .text-link{margin-top:0}
.rr-media{position:relative;min-height:260px;overflow:hidden;background:var(--surface)}
.rr-media-in{position:absolute;inset:0}
.rr-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.router-result{transition:box-shadow .5s var(--ease)}
.router-result:hover{box-shadow:var(--e3)}
.router-fallback{display:flex;flex-wrap:wrap;gap:var(--s-xl);margin-top:var(--s-xl);font-size:15px;font-weight:500;color:var(--primary)}
html.router-live .router-fallback{display:none}
@media(max-width:1023px){
  .router-result{grid-template-columns:1fr}
  .rr-text{padding:var(--s-xxl)}
  .rr-media{min-height:240px;order:-1}
}
@media(max-width:374px){
  /* small phones: the longest green words still fit on one line */
  .router-line{font-size:24px}
}
@media(max-width:767px){
  .router-line{letter-spacing:-.5px}
  .rr-text{padding:var(--s-xl)}
  .rr-media{min-height:200px}
}

/* ═══ scroll reveal ════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(20px)}
.rv.in{animation:rise .7s var(--ease-out) forwards}
.rv.d1.in{animation-delay:.08s}
.rv.d2.in{animation-delay:.16s}
.rv.d3.in{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ═══ responsive ═══════════════════════════════════════════════ */
@media(max-width:1023px){
  :root{--gutter:24px;--s-section-lg:72px}
  .t-display{font-size:44px}
  .t-h1{font-size:38px}
  .t-h2{font-size:30px}
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-in{flex-wrap:wrap}
  /* with the menu open the first row shrinks to its content, so give the
     logo room above and below or the compact globe gets cut off */
  .nav.open .nav-in>.brand{margin:12px 0}
  .nav-right{margin-left:auto;min-width:0}
  .nav.open .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    width:100%;order:9;padding:var(--s-xs) 0 var(--s-md);
    border-top:1px solid var(--hairline);
  }
  .nav.open .nav-links a{padding:10px 0}
  .nav.open .nav-links a::after{display:none}
  .mega{display:none}
  .charts-row{grid-template-columns:1fr}
  .nav-links a[data-menu]{display:flex;align-items:center;justify-content:space-between}
  .nav.open .m-sub{display:grid;gap:2px;max-height:0;overflow:hidden;padding-left:var(--s-md);border-left:2px solid var(--tint-green);transition:max-height .4s var(--ease-out)}
  .nav.open .m-sub.open{max-height:640px;margin-bottom:var(--s-sm)}
  .nav.open .m-sub a{padding:8px 0;font-size:14px;font-weight:400;color:var(--slate)}
  .nav.open .m-sub span{margin-top:var(--s-sm);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--stone)}
  .kb-layout{grid-template-columns:minmax(0,1fr)}
  .kb-toc{display:none}
  .cs{grid-template-columns:1fr;gap:var(--s-xl)}
  .cs-side{position:static}
  .cs-blocks,.keyfindings{grid-template-columns:1fr}
  .research-feature{grid-template-columns:1fr;padding:var(--s-xxl)}
  .paper-toc,.lighthouses,.method,.formats,.phases,.kb-map{grid-template-columns:repeat(2,1fr)}
  .method div+div,.phases div+div{border-left:0}
  .method div,.phases div{border-bottom:1px solid var(--hairline)}
  .dim,.racer-part,.principle,.cv-grid{grid-template-columns:1fr;gap:var(--s-lg)}
  .cv-paper{position:static;max-width:220px}
  .equation{grid-template-columns:1fr}
  .equation>i{transform:rotate(90deg);height:24px}
  .db-tools{grid-template-columns:1fr 1fr}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero-split{padding:var(--s-section) 0}
  /* tablets: every page intro starts at the same height as the hero */
  .page-intro,.apply-intro,main>.section:first-child:has(.legal){padding-top:var(--s-section)}
  .hero-grid,.benefit{grid-template-columns:1fr;gap:var(--s-xxxl)}
  .hero-copy h1{max-width:none}
  .benefit.flip .benefit-media{order:0}
  .benefits{gap:var(--s-section)}
  .quotes,.quotes-2{grid-template-columns:1fr}
  .events,.process{grid-template-columns:1fr}
  .apply-layout{grid-template-columns:1fr;gap:var(--s-xxl)}
  .apply-aside{position:static}
  .process-step:not(:last-child)::after{display:none}
  .foot-grid{grid-template-columns:repeat(3,1fr)}
  .foot-brand{grid-column:1/-1}
  .step{grid-template-columns:40px 1fr;gap:var(--s-sm) var(--s-md)}
  .step p{grid-column:2}
}
@media(max-width:767px){
  .t-display{font-size:36px;letter-spacing:-.6px}
  .t-h1{font-size:32px}
  .t-h2{font-size:26px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .stat b{font-size:38px}
  .roles{grid-template-columns:1fr}
  .apply-form{padding:var(--s-xl) var(--s-lg)}
  .form-grid{grid-template-columns:1fr}
  .apply-success{padding:var(--s-section-sm) var(--s-lg)}
  .story{--rail-x:calc(var(--gutter) + 4px)}
  .story .wrap{padding-left:calc(var(--gutter) + 32px)}
  .chapter i{left:-34px;width:14px;height:14px;margin-top:-7px}
  .path-stage{grid-template-columns:40px 1fr;gap:var(--s-md)}
  .path-stage>.n{width:40px;height:40px;font-size:14px}
  .path::before{left:19px}
  .odometer{--odo:36px;gap:6px}
  .odo-digits{gap:3px}
  .odo-digit{border-radius:7px}
  .cta-banner{padding:var(--s-xxxl) var(--s-lg)}
  .stat-row{padding:var(--s-xxl) var(--s-lg)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .fit,.essay,.myth,.do-dont,.downloads,.tiles,.tiles.three,.dim-facts{grid-template-columns:1fr}
  .myth>div+div{border-left:0;border-top:1px solid var(--hairline)}
  .paper-toc,.lighthouses,.method,.formats,.phases,.kb-map,.research-mini{grid-template-columns:1fr}
  .db-tools{grid-template-columns:1fr}
  .quote-line{font-size:24px}
  .charts-row{grid-template-columns:1fr}
  .chart{padding:var(--s-xl) var(--s-lg)}
  .vchart{height:260px}
  .vchart .plot,.xlabels{gap:8px;padding-left:6px;padding-right:6px}
  .xlabels span{font-size:11px}
  .vbar b{font-size:13px}
  .vbar em{display:none}
  .hbar{grid-template-columns:1fr 48px}
  .hbar>span{grid-column:1/-1}
}
@media(max-width:479px){
  .btn-row{flex-direction:column}
  .btn-row .btn{width:100%}
  .nav-right .btn{padding:8px 12px;font-size:14px}
  .logo{margin:0 var(--s-lg)}
}

/* phones: only the menu button stays in the bar, so the logo glides to the
   centre like on desktop; the call-to-action is repeated inside the open menu */
.nav-links .m-cta{display:none}
@media(max-width:639px){
  .nav-right .btn{display:none}
  .nav.open .nav-links a.m-cta{display:flex;justify-content:center;margin-top:var(--s-sm);padding:12px 20px;color:#fff}
}

/* ═══ case studies (detail) ════════════════════════════════════ */
.cs-side .contact{margin-top:var(--s-xl)}
.cs-question{margin-bottom:var(--s-xxl);padding-left:var(--s-xl);border-left:3px solid var(--brand-180);font-size:24px;font-weight:600;line-height:1.35;letter-spacing:-.3px;color:var(--ink)}
.cs-label{display:block;margin:var(--s-xxl) 0 var(--s-md);font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--primary)}
.cs-body>p{max-width:68ch;color:var(--slate)}
.cs-body>p+p{margin-top:var(--s-md)}
.cs-phases{margin-left:6px;border-left:2px solid var(--hairline)}
.cs-phases li{position:relative;padding:0 0 var(--s-xl) var(--s-xl)}
.cs-phases li:last-child{padding-bottom:0}
.cs-phases li::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:var(--r-full);background:var(--canvas);border:2px solid var(--brand-180)}
.cs-phases small{font-size:13px;font-weight:600;color:var(--steel)}
.cs-phases b{display:block;margin:2px 0 6px;font-size:17px;font-weight:600;color:var(--ink)}
.cs-phases p{font-size:15px;color:var(--slate)}
.cs-results{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden}
.cs-results div{padding:var(--s-xl)}
.cs-results div+div{border-left:1px solid var(--hairline)}
.cs-results b{display:block;font-size:32px;font-weight:600;line-height:1.1;letter-spacing:-.5px;color:var(--primary)}
.cs-results span{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:var(--slate)}
.cs-lasting{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s-lg);align-items:start}
.cs-followup{padding:var(--s-xl);border-radius:var(--r-lg);background:var(--tint-green)}
.cs-followup small{display:block;margin-bottom:6px;font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--primary-deep)}
.cs-followup p{font-size:15px;color:var(--charcoal)}

/* ═══ contact people (filled by site.js) ═══════════════════════ */
.contact{display:flex;align-items:center;gap:14px;padding:var(--s-lg);border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--canvas);text-align:left}
/* links from other pages land on contact.html#area or #person: that card is outlined */
.contact{scroll-margin-top:120px;transition:border-color .3s,box-shadow .3s}
.contact:target,.contact-group:target .contact{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.contact-body{flex:1;min-width:0}
.contact small{display:block;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--steel)}
.contact b{display:block;margin-top:4px;font-size:16px;font-weight:600;color:var(--ink)}
.contact-role{display:block;font-size:14px;color:var(--slate)}
.contact-mail{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--hairline);border-radius:var(--r-full);color:var(--primary);transition:background-color .2s,border-color .2s,color .2s,transform .2s}
.contact-mail:hover{background:var(--primary);border-color:var(--primary);color:#fff;transform:translateY(-1px)}
.contact-mail:active{transform:none}
/* contact page: one row per area, clearly separated */
.contact-groups{border-bottom:1px solid var(--hairline)}
.contact-group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-xxl);padding:var(--s-section-sm) 0;border-top:1px solid var(--hairline);scroll-margin-top:90px}
.contact-group h2{margin-top:var(--s-sm)}
.contact-group p{margin-top:var(--s-sm);color:var(--slate);max-width:36ch}
.contact-group .contacts{align-content:start}
.contact-jump{display:flex;flex-wrap:wrap;gap:var(--s-sm);margin-top:var(--s-xl)}
@media (max-width:1023px){
  .contact-group{grid-template-columns:1fr;gap:var(--s-lg)}
  .contact-group p{max-width:none}
}
@media (max-width:767px){
  .contact-group{padding:var(--s-xxl) 0}
  .contact-jump .btn{padding:8px 14px;font-size:14px}
}
.contacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s-md)}
.contact-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-section);align-items:start}
.contact-band.single{grid-template-columns:minmax(0,1fr) minmax(0,400px);align-items:center}
.contact-band p{margin-top:var(--s-md);color:var(--slate);max-width:44ch}
.aside-contact .contact{padding:0;border:0}

/* ═══ comparison tables (partners, connect) ═══════════════════ */
.compare{width:100%;border-collapse:collapse;font-size:15px}
.compare th,.compare td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hairline-soft)}
.compare thead th{font-size:18px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--hairline);background:var(--surface-soft)}
.compare thead th small{display:block;margin-top:4px;font-size:14px;font-weight:400;line-height:1.45;color:var(--slate)}
.compare tbody th{width:34%;font-weight:500;color:var(--ink)}
.compare td{color:var(--slate)}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.compare .yes{font-weight:600;color:var(--primary)}
.compare .no{color:var(--stone)}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-lg)}
.programme{display:grid;border-top:1px solid var(--hairline)}
.programme li{display:grid;grid-template-columns:72px 1fr;gap:var(--s-md);padding:var(--s-md) 0;border-bottom:1px solid var(--hairline-soft)}
.programme time{font-size:15px;font-weight:600;color:var(--primary);font-variant-numeric:tabular-nums}
.programme b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.programme p{font-size:14px;color:var(--slate)}
.brief-meta{display:block;margin-bottom:var(--s-sm);font-size:13px;color:var(--steel)}
.timeline-mini{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s-xl);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden}
.timeline-mini div{padding:var(--s-lg)}
.timeline-mini div+div{border-left:1px solid var(--hairline)}
.timeline-mini small{font-size:12px;font-weight:600;color:var(--primary)}
.timeline-mini b{display:block;margin-top:4px;font-size:15px;font-weight:600;color:var(--ink)}
.kb-chips{display:none}

/* ═══ touch devices ════════════════════════════════════════════
   No lift-on-hover on touch screens: a tap would leave cards
   stuck in their hover state. */
html{-webkit-tap-highlight-color:transparent}
html.menu-lock{overflow:hidden}
@media(hover:none){
  .btn:hover,.card:hover,.quote-card:hover,.event:hover,.role:hover,.formats a:hover,.kb-map a:hover,.paper-toc a:hover{transform:none;box-shadow:none}
  .card:hover::before{width:28px}
  .btn-primary:hover{background:var(--primary)}
}

/* ═══ tablets and phones ═══════════════════════════════════════ */
@media(max-width:1023px){
  .nav.open .nav-links{max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain}
  .nav.open .nav-links>a{min-height:52px;font-size:17px}
  .nav.open .m-sub a{display:flex;align-items:center;min-height:44px}
  .foot-grid{grid-template-columns:repeat(5,1fr)}
  .kb-chips{display:block}
  .kb-chapter,.kb-chapter h3{scroll-margin-top:140px}
  .contact-band,.contact-band.single{grid-template-columns:1fr;gap:var(--s-xl)}
  .cs-lasting{grid-template-columns:1fr}
}
@media(max-width:767px){
  :root{--gutter:20px;--s-section-lg:56px;--s-section:48px;--s-section-sm:40px;--nav-h:65px}
  .nav-in{min-height:64px;gap:var(--s-sm)}
  .hero-split{padding:var(--s-xxxl) 0 var(--s-section-sm)}
  .page-intro{padding:var(--s-xxxl) 0}
  /* same headline height on phones for the form and legal pages */
  .apply-intro{padding-top:var(--s-xxxl)}
  main>.section:first-child:has(.legal){padding-top:var(--s-xxxl)}
  .t-subtitle{font-size:17px}
  .section-head{margin-bottom:var(--s-xxl)}
  .back-link{margin-bottom:var(--s-lg);min-height:44px}
  .input,.db-tools .input{font-size:16px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s-xxl) var(--s-lg)}
  .foot-note{flex-direction:column;gap:var(--s-sm)}
  .foot-legal a,.foot-grid a:not(.foot-logo):not(.social){padding:8px 0}
  .cs-tabs a{padding:14px 0}
  .cs-question{font-size:20px;padding-left:var(--s-lg)}
  .cs-results{grid-template-columns:1fr}
  .cs-results div+div{border-left:0;border-top:1px solid var(--hairline)}
  .contacts{grid-template-columns:1fr}
  .compare{font-size:14px}
  .compare th,.compare td{padding:12px 14px}
  /* One block per row: the feature on its own line, both options side by
     side underneath it. The two model names stay at the top of the table
     instead of being repeated in small grey print above every single
     value, and they stick below the nav while you read, so it stays
     clear which column is which. */
  .db-wrap:has(.compare){overflow:visible;border:0}
  .compare,.compare thead,.compare tbody{display:block}
  .compare thead{position:sticky;top:var(--nav-h);z-index:2;background:var(--canvas)}
  .soft .compare thead{background:var(--surface-soft)}
  .compare thead tr{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-md);padding:var(--s-sm) 0 var(--s-md);border-bottom:1px solid var(--hairline)}
  /* the first header cell only carries a screen-reader label */
  .compare thead th:first-child{display:none}
  .compare thead th{padding:0;font-size:17px;background:none;border:0}
  .compare thead th small{display:block;margin-top:2px;font-size:13px}
  .compare tr{display:grid;grid-template-columns:1fr 1fr;gap:4px var(--s-md);padding:var(--s-md) 0;border-bottom:1px solid var(--hairline-soft)}
  .compare tr:last-child{border-bottom:0}
  .compare tbody th{grid-column:1/-1;width:auto;padding:0;border:0}
  .compare td{padding:0;border:0}
  .compare td::before{content:none}
  .photo-pair,.timeline-mini{grid-template-columns:1fr}
  .timeline-mini div+div{border-left:0;border-top:1px solid var(--hairline)}
  .chart figcaption span{font-size:16px}
  .vchart .avg span{font-size:11px}
  /* firm database: one card per firm instead of a sideways-scrolling table */
  .db-wrap:has(.db){overflow:visible;border:0}
  .db{min-width:0}
  .db thead{display:none}
  .db,.db tbody,.db tr,.db td{display:block}
  .db tr{margin-bottom:var(--s-sm);padding:var(--s-md);border:1px solid var(--hairline);border-radius:var(--r-md)}
  .db td{display:flex;justify-content:space-between;gap:var(--s-md);padding:4px 0;border:0;text-align:right}
  .db td::before{content:attr(data-label);flex:none;font-size:13px;color:var(--steel);text-align:left}
  .db td:first-child{display:block;padding-bottom:var(--s-xs);font-size:16px;text-align:left}
  .db td:first-child::before{content:none}
  .db td.db-empty{display:block;text-align:center}
  .db td.db-empty::before{content:none}
  .db tbody tr:hover{background:none}
  .verbs td:first-child{width:auto}
  /* action verbs: one block per situation, languages labelled */
  .db-wrap:has(.verbs){overflow:visible;border:0}
  .verbs thead{display:none}
  .verbs,.verbs tbody,.verbs tr,.verbs td{display:block}
  .verbs tr{padding:var(--s-sm) 0;border-bottom:1px solid var(--hairline-soft)}
  .verbs td{padding:2px 0;border:0}
  .verbs td:first-child{margin-bottom:4px}
  .verbs td:nth-child(2)::before{content:"EN  ";font-size:12px;font-weight:600;color:var(--steel)}
  .verbs td:nth-child(3)::before{content:"DE  ";font-size:12px;font-weight:600;color:var(--steel)}
}
@media(max-width:400px){
  .nav-right .btn{min-height:40px;padding:8px 12px;font-size:14px}
}

/* ═══ line breaks on narrow columns ═════════════════════════════
   Four cards in a row leave too little room for two-word headings
   between tablet and laptop width, and on very small phones the
   headings get a little smaller, so no word ends up alone on a line. */
@media(min-width:1024px) and (max-width:1279px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .contact-band .t-h2{font-size:30px}
}
@media(max-width:399px){
  .t-h2{font-size:24px}
  .t-h3,.story .t-h3{font-size:22px}
  .t-h4,.dim h3{font-size:18px}
  .card,.dim,.role{padding:var(--s-lg)}
  .legal h2{font-size:22px}
}
@media(max-width:359px){
  .t-h2{font-size:22px}
  .t-h4,.dim h3{font-size:17px}
  .role p{font-size:14px}
  .fold-body{padding:0 var(--s-sm) var(--s-sm)}
}