/* antonbensdorp.com — hand-written CSS.
   Reads like the design brief: post-it grounds, pen ink, one vermilion accent,
   drawn structure, Switzer on headers/UI, Spectral for reading.
   Two blues on purpose: --navy is written ink (type), --pen is drawn ink
   (rules, frames, dots). Vermilion means marked by hand, nothing else. */

/* ---------- self-hosted webfonts ----------
   Downloaded from Fontshare (Switzer) and Google Fonts (Spectral) and
   served from this domain: no third-party connection, no extra DNS + TLS
   round trip before the first paint. Latin and latin-ext only for Spectral;
   the browser picks by unicode-range. */
@font-face {
  font-family: "Switzer";
  src: url("fonts/self/switzer-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/self/switzer-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/self/switzer-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/self/switzer-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/self/spectral-300-ext.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/self/spectral-300-lat.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  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: "Spectral";
  src: url("fonts/self/spectral-400-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/self/spectral-400-lat.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: "Spectral";
  src: url("fonts/self/spectral-500-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/self/spectral-500-lat.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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: "Spectral";
  src: url("fonts/self/spectral-600-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/self/spectral-600-lat.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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: "Spectral";
  src: url("fonts/self/spectral-700-ext.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/self/spectral-700-lat.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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;
}

/* ---------- tokens ---------- */
:root {
  --paper: #FFFFFF;
  --hero: #94D5FF;
  --start: #CEE8E5;
  --how: #FEF9F7;
  --experience: #FEF9F7;
  --footer: #F5D2C4;
  --ink: #14161A;
  --navy: #1D2951;        /* written ink: type */
  --pen: #253168;         /* drawn ink: rules, frames, dots. Also hardcoded in img/*.svg */
  --accent: #E8481C;        /* graphics & large text only */
  --accent-text: #A83312;   /* AA-safe accent for text/links */
  --select: #1DACE6;
  --hairline: #E3E1DC;
  --muted: #6B6862;
  --note: #FEF2C6;        /* post-it sheet behind a note. Also hardcoded in main.js */
  --marker: #FBE59B;      /* highlighter swipe. Also hardcoded in the mark data URI */

  --font-display: "Switzer", system-ui, sans-serif;
  --font-head: "Switzer", system-ui, sans-serif;
  --font-ui: "Switzer", system-ui, sans-serif;
  --font-text: "Spectral", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-mono: var(--font-ui);

  --measure: 68ch;
  --content-max: 1240px;
  --page-gutter: 80px;
  --body-gutter: var(--page-gutter);
  --space: 8px;
  /* Previous-band peek under the sticky header. scroll-margin is
     header + this, so the strip stays the same when the header
     grows (safe area on a phone). Desktop: 76 + 20 = 96. */
  --band-peek: 20px;
}

/* off-screen but still announced: keeps the fieldset labelled for screen
   readers while the heading above it does the visible work */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* The canvas is only ever visible where the page rubber-bands past one of its
   ends, and you can only reach an end from that end — so a single colour that
   follows the scroll is enough: hero at the top, the footer's ink at the
   bottom. main.js flips .at-foot past the halfway mark. */
html { background: var(--hero); }
body {
  margin: 0;
  background: var(--page-bg, var(--hero));
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Safari fills the strips behind the status bar and the toolbar from what the
   page paints there, not from theme-color, so <body> has to carry the colour:
   main.js keeps --page-bg on the band under the nav (the footer's ink at the
   very end), pre-darkened by the grain wash so the strips match on screen. */
html.at-foot { background: var(--pen); }
/* faint paper tooth over every band — multiply so cream stays cream */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 400;
  opacity: 0.1;
  background: url("img/paper-grain.svg") repeat;
  background-size: 220px 220px;
  mix-blend-mode: multiply;
}
.mono { font-family: var(--font-ui); font-weight: 400; font-size: 0.8125rem; letter-spacing: 0.02em; }
.muted { color: var(--muted); }
em { font-style: normal; color: var(--accent-text); }
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--select); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 calc(var(--space) * 3); color: var(--navy); }
h1 {
  font-family: var(--font-head);
  font-size: 80px;
  max-width: 28ch;
  font-weight: 700;
  letter-spacing: -0.015em;
}
#hero-title {
  font-size: clamp(1.75rem, 5.4vw, 60px);
  white-space: nowrap;
  max-width: none;
}
h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0;
}
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); max-width: 28ch; font-weight: 700; }
h3 { font-size: 1.25rem; }
p {
  margin: 0 0 calc(var(--space) * 2);
  max-width: var(--measure);
  font-family: var(--font-text);
  font-weight: 400;
  color: var(--navy);
}

/* ---------- header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--nav-bg, var(--hero));
  box-shadow: 0 8px 20px rgb(29 41 81 / 0);
}
/* Ink copy of the bar, clipped from the bottom as Contact rises through it. */
.nav-ink {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--pen);
  color: #fff;
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(calc((1 - var(--nav-wipe, 0)) * 100%) 0 0 0);
}
/* Paint-only. Nav-shown and .nav-lang { pointer-events: auto } would
   otherwise let the clone steal clicks on Contact — desktop links and
   the mobile hamburger. */
.nav-ink,
.nav-ink * {
  pointer-events: none !important;
}
.nav-ink .nav-brand,
.nav-ink .nav-links a,
.nav-ink .nav-lang,
.nav-ink .nav-toggle {
  color: #fff;
}
.nav-ink .nav-links a::after,
.nav-ink .nav-lang > *::after {
  background: #fff;
}
.nav-ink .nav-links > .nav-rule {
  background-color: #fff;
}
/* Opening screen: logo and language switch. Section links and the menu
   button fade in with .nav-shown. Height is reserved either way.
   html:not(.nav-shown) beats the desktop .nav-links > a { opacity: 1 }. */
.nav-toggle,
.nav-links > a,
.nav-links > .nav-rule {
  transition: opacity 320ms ease;
}
html:not(.nav-shown) .nav-toggle,
html:not(.nav-shown) .nav-links > a,
html:not(.nav-shown) .nav-links > .nav-rule {
  opacity: 0;
  pointer-events: none;
}
html.nav-shown .nav-toggle,
html.nav-shown .nav-links > a,
html.nav-shown .nav-links > .nav-rule {
  opacity: 1;
  pointer-events: auto;
}
.nav-lang {
  pointer-events: auto;
}
html:not(.js) .nav-brand,
html:not(.js) .nav-lang { opacity: 1; }
html.js .nav-brand,
html.js .nav-lang {
  opacity: 0;
  transition: opacity 1s ease;
}
html.js .nav-brand.is-in,
html.js .nav-lang.is-in { opacity: 1; }
/* iOS sticks the header to the layout viewport, so rubber-banding or the URL
   bar animating opens a gap above it where the page shows through. Cover it
   with the nav's own colour. Off while the scroll lock moves the header. */
.site-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100vh;
  background: inherit;
  pointer-events: none;
}
html.form-open .site-header::before {
  display: none;
}
.site-header.is-scrolled {
  box-shadow: 0 8px 20px rgb(29 41 81 / 0.08);
}
html.on-hero .site-header.is-scrolled {
  box-shadow: 0 10px 28px rgb(29 41 81 / 0.08);
}
html.on-footer .site-header.is-scrolled {
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.125);
}
.nav {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--space) * 3); padding: 16px var(--page-gutter);
}
.nav-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(1.5rem - 4pt);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--navy);
  white-space: nowrap;
}
.nav-brand:hover { opacity: 0.7; }
.nav-right { position: relative; display: flex; align-items: center; gap: calc(var(--space) * 3); }
.nav-links { display: flex; align-items: center; gap: calc(var(--space) * 3); }
.nav-links a {
  position: relative;
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--navy); text-decoration: none; font-size: 0.9375rem;
}
.nav-links a:hover,
.nav-links a:active { opacity: 0.7; }
.nav-links .btn-primary { color: var(--paper); }
.nav-links .btn-primary:hover { color: #fff; }
.nav-lang {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  font-family: var(--font-ui);
  font-weight: 400;
  /* .mono would leave the span at 13px while the link picks up 15px from
     .nav-links a; set it here so both halves stay equal */
  font-size: 0.85rem;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.nav-lang > * { position: relative; }
.nav-lang a {
  color: inherit;
  /* .nav-links a would otherwise win on specificity and leave the link
     bigger than the active span; inherit keeps one size for both */
  font-size: inherit;
  text-decoration: none;
}
.nav-lang a:hover { opacity: 0.7; }
.nav-links a::after,
.nav-lang > *::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 4px;
  background: var(--navy);
  opacity: 0;
  transition: opacity 220ms ease;
  -webkit-mask: url("img/lang-underline.svg?v=3") 0 0 / 100% 100% no-repeat;
  mask: url("img/lang-underline.svg?v=3") 0 0 / 100% 100% no-repeat;
}
.nav-links a[aria-current]::after,
.nav-lang [aria-current]::after {
  opacity: 1;
}
/* Fullscreen contact: ink bar, light marks — not the peach form token. */
html.on-footer .nav-links a,
html.on-footer .nav-lang,
html.on-footer .nav-toggle {
  color: #fff;
}
html.on-footer .nav-links a::after,
html.on-footer .nav-lang > *::after {
  background: #fff;
}
html.on-footer .nav-brand {
  color: #fff;
}
html.on-footer .nav-links > .nav-rule {
  background-color: #fff;
}
.nav-rule { display: none; }
.nav-toggle {
  display: none;
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--navy);
}
.nav-toggle-bar {
  position: absolute;
  left: 3px;
  width: 22px;
  height: 6px;
  overflow: visible;
  transition: transform 220ms ease;
}
.nav-toggle-bar:first-child { top: 8px; }
.nav-toggle-bar:last-child { top: 15px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child {
  transform: translateY(3.5px) rotate(42deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child {
  transform: translateY(-3.5px) rotate(-42deg);
}
/* no JS → no working toggle; hide it (single page stays scrollable) */
html:not(.js) .nav-toggle { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 3px;
  font: inherit; font-size: 0.9375rem; font-weight: 500;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn-primary { background: var(--navy); color: var(--paper); }
.btn-primary:hover { background: var(--accent); color: #fff; }
.btn:disabled,
.btn-primary:disabled {
  opacity: 0.38;
  cursor: default;
}
.btn-primary:disabled:hover { background: var(--navy); color: var(--paper); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); opacity: 0.7; }
.btn-ghost {
  position: relative;
  color: var(--navy);
  background: transparent;
  overflow: visible;
}
.js .btn-ghost { border-color: transparent; }
html:not(.js) .btn-ghost { border-color: var(--pen); }
.btn-ghost:hover { opacity: 1; }
.btn-ghost:hover .pill-frame path { stroke-width: 1.7; }

/* ---------- sections ---------- */
.section, .hero {
  max-width: none;
  width: 100%;
  padding: calc(var(--space) * 12) var(--body-gutter);
  /* --gap-after holds the next section back during a handoff. Padding, so
     the gap is painted by this section rather than showing <body>. */
  padding-bottom: calc(var(--space) * 12 + var(--gap-after, 0px));
  border-bottom: 1px solid var(--hairline);
}
.section-label {
  color: var(--navy); text-transform: uppercase;
  font-weight: 500;
  margin-bottom: calc(var(--space) * 4);
}
.section-label .num { color: var(--accent-text); }

/* ---------- hero ---------- */
/* Fills the first screen so nothing from section 01 shows before a scroll.
   --header-h is written by main.js from the real header height. */
.hero {
  position: relative;
  background: var(--hero);
  border-bottom: none;
  min-height: calc(100vh - var(--header-h, 76px));
  min-height: calc(100svh - var(--header-h, 76px));
  display: flex;
  align-items: center;
  padding-top: calc(var(--space) * 6);
  padding-bottom: calc(var(--space) * 6 + var(--gap-after, 0px));
}
.hero-chevron,
.footer-chevron {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 168px;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 0 28px;
  margin: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: var(--pen);
  line-height: 0;
  cursor: pointer;
  /* One bit of paint so Safari hit-tests the whole button, not just the V. */
  background-color: rgb(0 0 0 / 0.001);
}
.footer-chevron {
  z-index: 1;
  color: #fff;
}
.hero-chevron span,
.footer-chevron span {
  display: block;
  width: 88px;
  height: 26px;
  background: currentColor;
  -webkit-mask: url("img/hero-chevron.svg") center / contain no-repeat;
  mask: url("img/hero-chevron.svg") center / contain no-repeat;
  pointer-events: none;
}
.footer-chevron span {
  transform: scaleY(-1);
  opacity: 0.7;
}
.hero-chevron:hover span { opacity: 0.7; }
.footer-chevron:hover span { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-chevron.is-pulse span {
    animation: hero-chevron-pulse 2.2s ease-in-out infinite;
  }
}
@keyframes hero-chevron-pulse {
  0%, 20% { transform: translateY(0); }
  30% { transform: translateY(7px); }
  40% { transform: translateY(0); }
  50% { transform: translateY(5px); }
  60%, 100% { transform: translateY(0); }
}
/* The headline runs to the gutters, so the copy block cannot cap it. The
   supporting lines carry their own measure instead. */
.hero-copy {
  max-width: none;
  width: 100%;
  overflow: visible;
  transform: translateY(-20px);
  transition: opacity 480ms ease;
}
html.hero-strip .hero-copy {
  opacity: 0;
  pointer-events: none;
}
#hero-title {
  position: relative;
  z-index: 0;
  max-width: none;
  margin-bottom: calc(var(--space) * 5 - 15px);
  font-size: clamp(2.125rem, 6.4vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  white-space: normal;
}
.footer-title {
  font-size: calc(clamp(2.125rem, 6.4vw, 80px) - 5pt);
  line-height: 1.05;
  letter-spacing: -0.022em;
}
/* Balanced so a wrapped headline never orphans a short last line — the swipe
   turns any orphan into a blob. */
.hero-line { display: block; text-wrap: balance; }
.hero-sub-line { display: block; }
#hero-title mark {
  color: inherit;
  font: inherit;
  background: var(--experience);
  border-radius: 0.28em 0.12em 0.32em 0.18em / 0.45em 0.22em 0.4em 0.28em;
  padding: 0.02em 0.06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.js #hero-title mark {
  background: none;
  border-radius: 0;
  /* No extra inset: the swipe already leads the letter, and any padding here
     pushed "understand" right of "Products people" and of the supporting lines. */
  padding: 0;
}
/* The round cap of the swipe sits left of the first marked letter. Pull the
   whole headline left by that overhang so the type shares an edge with
   .hero-sub and the cream hangs in the gutter. --hero-mark-shift is written
   by main.js from the painted stroke. */
.js #hero-title {
  margin-left: var(--hero-mark-shift, 0px);
}
/* One SVG for the whole headline rather than one per mark: a mark that wraps
   needs a stroke per line box, and only a block box gives stable coordinates
   to place them in. */
#hero-title .mark-stroke,
#hero-title .mark-stroke-over {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
#hero-title .mark-stroke { z-index: -1; }
/* The deck lays a second copy of the swipe over the letters, lightening them
   by a tenth where it crosses. A single shape behind the type cannot do that. */
#hero-title .mark-stroke-over {
  z-index: 2;
  opacity: 0.1;
}
.hero-mark-host .mark-stroke path:not(.is-drawn),
.hero-mark-host .mark-stroke-over path:not(.is-drawn) {
  /* Opacity alone does not always hide an SVG stroke. The parked round cap
     still painted a cream circle at the end of the word. */
  visibility: hidden;
  opacity: 0;
  stroke: none;
  stroke-linecap: butt;
}
.hero-mark-host .mark-stroke path.is-drawn,
.hero-mark-host .mark-stroke-over path.is-drawn {
  visibility: visible;
  opacity: 1;
  stroke: #FFFAF1;
}
html.hero-drawing .hero-mark-host .mark-stroke path,
html.hero-drawing .hero-mark-host .mark-stroke-over path {
  /* Snappy start (nib is already down), ease out as the hand slows to lift.
     Duration is the draw only — the lift pause lives in main.js. */
  transition: stroke-dashoffset var(--hero-mark-draw, 720ms) cubic-bezier(0.2, 0.12, 0.12, 1);
}
/* No measure cap: each line is written to be one complete thought, so it must
   break at its <br> and nowhere else. */
.hero-sub {
  position: relative;
  z-index: 0;
  margin: 0;
  max-width: none;
  font-family: var(--font-text);
  font-size: clamp(1.0625rem, 1.45vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.55;
  white-space: normal;
  color: var(--navy);
}
.hero-sub .name { font-weight: 600; }
.hero-sub mark {
  color: inherit;
  font: inherit;
  background: var(--experience);
  border-radius: 0.28em 0.12em 0.32em 0.18em / 0.45em 0.22em 0.4em 0.28em;
  padding: 0.02em 0.06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.js .hero-sub mark {
  background: none;
  border-radius: 0;
  padding: 0;
}
.hero-sub .mark-stroke,
.hero-sub .mark-stroke-over {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hero-sub .mark-stroke { z-index: -1; }
.hero-sub .mark-stroke-over {
  z-index: 2;
  opacity: 0.1;
}
#experience {
  position: relative;
  z-index: 1;
  background: var(--experience);
  border-top: none;
  border-bottom: none;
  scroll-margin-top: calc(var(--header-h, 76px) + var(--band-peek));
}
#how {
  position: relative;
  z-index: 3;
  background: var(--experience);
  border-top: none;
  border-bottom: none;
  scroll-margin-top: calc(var(--header-h, 76px) + var(--band-peek));
}
.proof-case,
.offer,
.phase {
  scroll-margin-top: calc(var(--header-h, 76px) + var(--band-peek));
}
/* ---------- columns ---------- */
.cols-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--space) * 5);
}
.phases {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(var(--space) * 3);
}
.phase {
  border: 8px solid transparent;
  border-image-source: url("img/phase-frame-1.svg?v=match01");
  border-image-slice: 8;
  border-image-width: 8px;
  border-image-repeat: stretch;
  background: transparent;
  padding: calc(var(--space) * 3);
}
.phases .phase:nth-child(2) { border-image-source: url("img/phase-frame-2.svg?v=match01"); }
.phases .phase:nth-child(3) { border-image-source: url("img/phase-frame-3.svg?v=match01"); }
.phases .phase:nth-child(4) { border-image-source: url("img/phase-frame-4.svg?v=match01"); }
.offers .offer p { margin: 0; max-width: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .phases .phase,
  html.js .offers .offer,
  html.js .offers .offer-rule,
  html.js .choice-grid .choice,
  html.js .hero-line,
  html.js .hero-chevron,
  html.js .footer-ask > *,
  html.js .section > .section-label,
  html.js .section > h2,
  html.js .section > .proof-lede,
  html.js .section > .proof-cases-title,
  html.js .proof-arc > li,
  html.js .proof-more {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 960ms ease, transform 960ms ease;
  }
  html.js .hero-line,
  html.js .hero-chevron {
    transform: translateY(-10px);
    transition-duration: 780ms;
  }
  html.js .hero-sub-line {
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 780ms ease, transform 780ms ease;
  }
  html.js .footer-ask > *:nth-child(2) { transition-delay: 90ms; }
  html.js .footer-ask > *:nth-child(3) { transition-delay: 180ms; }
  html.js #experience > .section-label     { transition-delay: 240ms; }
  html.js #experience > h2                 { transition-delay: 300ms; }
  html.js #experience > .proof-lede        { transition-delay: 360ms; }
  html.js #experience > .proof-cases-title { transition-delay: 420ms; }
  html.js #start_here > .section-label,
  html.js #how > .section-label            { transition-delay: 0ms; }
  html.js #start_here > h2,
  html.js #how > h2                        { transition-delay: 70ms; }
  html.js #start_here > .proof-lede,
  html.js #how > .proof-lede               { transition-delay: 140ms; }
  html.js .phases .phase:nth-child(even),
  html.js .choice-grid .choice:nth-child(2) { transition-delay: 70ms; }
  html.js .choice-grid .choice:nth-child(3) { transition-delay: 140ms; }
  html.js .offers .offer,
  html.js .offers .offer-rule {
    transition-duration: 480ms;
  }
  html.js .offers .offer:nth-of-type(1) { transition-delay: 0ms; }
  html.js .offers .offer:nth-of-type(2),
  html.js .offers .offer-rule:nth-of-type(1) { transition-delay: 280ms; }
  html.js .offers .offer:nth-of-type(3),
  html.js .offers .offer-rule:nth-of-type(2) { transition-delay: 560ms; }
  html.js .phases .phase.is-in,
  html.js .offers .offer.is-in,
  html.js .offers .offer-rule.is-in,
  html.js .choice-grid .choice.is-in,
  html.js .hero-line.is-in,
  html.js .hero-sub-line.is-in,
  html.js .footer-ask > .is-in,
  html.js .section > .is-in,
  html.js .proof-arc > li.is-in,
  html.js .proof-more.is-in {
    opacity: 1;
    transform: none;
  }
  html.js .hero-chevron.is-in {
    opacity: var(--hero-chevron-o, 1);
    transform: none;
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  html.js .hero-line,
  html.js .hero-sub-line {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.js #hero-title,
  html.js .hero-sub {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 780ms ease, transform 780ms ease;
  }
  html.js #hero-title.is-in,
  html.js .hero-sub.is-in {
    opacity: 1;
    transform: none;
  }
}
.phase h3,
.offer h3 { margin-bottom: var(--space); }
.phase h3 { font-size: calc(1.5rem + 2pt); font-weight: 700; }
/* Method pills — same visual language as the skill pills in Proof, but each
   one opens a popover explaining the term. Native popover: no JS required. */
.phase-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: 8px;
  row-gap: 10px;
  margin: calc(var(--space) * 3) 0 0;
  padding: 0;
}
.phase-pills > * { display: contents; }
.phase-pills .pill { flex: 0 0 auto; width: max-content; max-width: 100%; }
.pill-pop[popover]:not(:popover-open) { display: none !important; }
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: max-content;
  height: 36px;
  font-family: var(--font-ui); font-weight: 500; font-size: calc(0.8rem + 2pt); letter-spacing: 0.02em;
  color: var(--navy);
  border: 1px solid var(--pen);
  border-radius: 999px;
  padding: 0 14px;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  overflow: visible;
}
.js .pill { border: none; }
.pill-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.pill:hover,
.pill:active,
.pill:focus,
.pill:focus-visible,
.pill:has(+ .pill-pop:popover-open) {
  color: var(--navy);
  background: transparent;
}
.pill:hover .pill-frame path,
.pill:active .pill-frame path {
  stroke-width: 1.7;
}
.pill:has(+ .pill-pop:popover-open) .pill-frame path {
  stroke-width: 2.2;
}
span.pill { cursor: default; }
.pill-pop {
  --pop-pad-t: 32px;
  --pop-pad-r: calc(var(--space) * 7);
  --pop-pad-b: calc(var(--space) * 5);
  --pop-pad-l: calc(var(--space) * 5);
  box-sizing: content-box;
  border: none;
  border-radius: 0;
  background: var(--experience); color: var(--navy);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 20px rgb(29 41 81 / 0.08);
}
.pill-pop-head {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: var(--pop-pad-t) var(--pop-pad-r) 18px var(--pop-pad-l);
  background: var(--experience);
  box-shadow: 0 8px 20px rgb(29 41 81 / 0);
}
.pill-pop-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 var(--pop-pad-r) var(--pop-pad-b) var(--pop-pad-l);
}
.pill-pop-head.is-scrolled {
  box-shadow: 0 8px 20px rgb(29 41 81 / 0.08);
}
.pill-pop[popover]:popover-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  position-anchor: none;
  inset: unset;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin: 0;
  height: auto;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow: hidden;
}
@media (min-width: 769px) {
  .nav-links {
    display: flex;
    position: static;
    clip-path: none;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-links > a { opacity: 1; transition: none; }
  html:not(.js) .nav-links > .nav-lang,
  html.js .nav-links > .nav-lang.is-in { opacity: 1; }
  /* Contact first, Experience last. The reverse on the way out. */
  html:not(.nav-shown) .nav-links > a,
  html.nav-shown .nav-links > a {
    transition: opacity 180ms ease;
  }
  html.nav-shown .nav-links > a:nth-of-type(4) { transition-delay: 0ms; }
  html.nav-shown .nav-links > a:nth-of-type(3) { transition-delay: 45ms; }
  html.nav-shown .nav-links > a:nth-of-type(2) { transition-delay: 90ms; }
  html.nav-shown .nav-links > a:nth-of-type(1) { transition-delay: 135ms; }
  html:not(.nav-shown) .nav-links > a:nth-of-type(1) { transition-delay: 0ms; }
  html:not(.nav-shown) .nav-links > a:nth-of-type(2) { transition-delay: 45ms; }
  html:not(.nav-shown) .nav-links > a:nth-of-type(3) { transition-delay: 90ms; }
  html:not(.nav-shown) .nav-links > a:nth-of-type(4) { transition-delay: 135ms; }
  .nav-toggle { display: none; }
  /* Sized to the marked phrase (~11.7em), which is the longest unbreakable
     run: fill the gutters like the deck cover without tipping into a wrap.
     The subtracted px keeps ~4% slack for font-metric variation. */
  #hero-title { font-size: min(88px, calc(8.15vw - 13px)); }
  .footer-title { font-size: calc(min(88px, calc(8.15vw - 13px)) - 5pt); }
  /* The Dutch claim measures 14.5em against the English 11.7em, so it needs
     its own scale to hold the same two-line shape. */
  html[lang="nl"] #hero-title { font-size: min(71px, calc(6.6vw - 10.5px)); }
  html[lang="nl"] .footer-title { font-size: calc(min(71px, calc(6.6vw - 10.5px)) - 5pt); }
  .pill-pop[popover]:popover-open {
    width: 500px;
    max-width: calc(100vw - 128px);
  }
  .pill-pop-l:popover-open {
    width: 600px;
  }
  .pill-pop-xl:popover-open {
    width: 720px;
  }
}
/* Pinning <body> turns the page into a one-viewport slab: the sticky nav loses
   its scrollport and the strips Safari draws its chrome over run out of page.
   Notes don't need it — they are fixed in the top layer and their body carries
   overscroll-behavior: contain — so only the form pins. */
html.form-open,
html.form-open body {
  overflow: hidden;
  overscroll-behavior: none;
}
html.form-open body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}
html.form-open,
html.form-open body {
  background: var(--footer);
}
.pill-pop-close {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  background: url("img/pop-close.svg") center / 16px 16px no-repeat;
  cursor: pointer;
  opacity: 1;
  transition: opacity 80ms ease;
}
/* Same corner as the form: 16px from the top-right of the sheet. */
.pill-pop-head .pill-pop-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}
.pill-pop-close:hover,
.pill-pop-close:active { opacity: 0.7; }
.pill-pop h4 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--navy);
}
.pill-pop-l h4,
.pill-pop-xl h4 { font-size: calc(1.125rem + 4px); }
.pill-kicker {
  display: block;
  margin: 0 0 2px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.pill-pop p { margin: 0; font-size: 1.125rem; font-weight: 400; line-height: 1.6; color: var(--navy); }
.pill-pop p + p { margin-top: calc(var(--space) * 1.5); }
.pill-pop ul {
  list-style: none;
  margin: calc(var(--space) * 1.5) 0 0;
  padding: 0;
  max-width: none;
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--navy);
}
.pill-pop li {
  position: relative;
  padding-left: 1.35em;
}
.pill-pop li + li { margin-top: 0.4em; }
.pill-pop ul + p { margin-top: calc(var(--space) * 1.5); }
.pill-pop li::before {
  content: "";
  position: absolute;
  left: 0.06em;
  top: 0.48em;
  width: 0.55em;
  height: 0.55em;
  background: url("img/list-dot-1.svg?v=5") center / contain no-repeat;
}
.pill-pop li:nth-child(3n+2)::before {
  background-image: url("img/list-dot-2.svg?v=5");
}
.pill-pop li:nth-child(3n+3)::before {
  background-image: url("img/list-dot-3.svg?v=5");
}
.pill-pop-rule {
  display: block;
  width: 100%;
  height: 3px;
  margin: calc(var(--space) * 3) 0 calc(var(--space) * 2);
  background-color: var(--navy);
  -webkit-mask: url("img/case-rule-1.svg") center / 100% 100% no-repeat;
  mask: url("img/case-rule-1.svg") center / 100% 100% no-repeat;
}
.pill-pop-rule[data-rule="2"] {
  -webkit-mask-image: url("img/case-rule-2.svg");
  mask-image: url("img/case-rule-2.svg");
}
.pill-pop-rule[data-rule="3"] {
  -webkit-mask-image: url("img/case-rule-3.svg");
  mask-image: url("img/case-rule-3.svg");
}
.pill-pop-rule[data-rule="4"] {
  -webkit-mask-image: url("img/case-rule-4.svg");
  mask-image: url("img/case-rule-4.svg");
}
.pill-pop-next {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pill-pop-next:hover { color: var(--accent-text); }
.pill-pop-next + .pill-pop-next {
  display: block;
  margin-top: calc(var(--space) * 2);
}
.pill-pop-jump {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: calc(var(--space) * 4) 0 0;
  padding: calc(var(--space) * 2) calc(var(--space) * 3);
  border: 8px solid transparent;
  border-image-source: url("img/phase-frame-1.svg?v=match01");
  border-image-slice: 8;
  border-image-width: 8px;
  border-image-repeat: stretch;
  background: transparent;
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  color: var(--navy);
}
.pill-pop-jump[data-frame="2"] { border-image-source: url("img/phase-frame-2.svg?v=match01"); }
.pill-pop-jump[data-frame="3"] { border-image-source: url("img/phase-frame-3.svg?v=match01"); }
.pill-pop-jump[data-frame="4"] { border-image-source: url("img/phase-frame-4.svg?v=match01"); }
.pill-pop-jump:hover,
.pill-pop-jump:active {
  color: var(--navy);
  opacity: 0.7;
}
.pill-pop .example-h {
  margin: calc(var(--space) * 3) 0 var(--space);
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  max-width: none;
}
.pill-pop .example-h:first-of-type { margin-top: 0; }
.pill-pop .example-cap {
  margin: calc(var(--space) * 5) 0 calc(var(--space) * 2);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--accent-text);
  max-width: none;
}
.pill-pop .example-cap:first-of-type { margin-top: 0; }
/* Emphasis inside a note reads as a highlighter swipe rather than bold, so the
   reader is pulled along the argument instead of ordered around. A background
   image, not the hero's painted SVG: a phrase that wraps needs a swipe per line,
   which box-decoration-break gives for free. The fill repeats --marker because
   a data URI cannot read a custom property. */
.pill-pop mark {
  color: inherit;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='26' viewBox='0 0 100 26' preserveAspectRatio='none'%3E%3Cpath d='M2 14.6 C24 11.6, 46 16.6, 64 13.2 C76 11, 88 15.2, 98 12.8' stroke='%23FBE59B' stroke-opacity='0.5' stroke-width='20' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 100% 1.36em;
  padding: 0 0.22em 0 0.28em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.pill-pop .direction-rule {
  margin: calc(var(--space) * 4) 0 calc(var(--space) * 2);
}
.pill-pop::backdrop {
  background: rgb(29 41 81 / 0.08);
  opacity: 0;
  transition: opacity 200ms ease, overlay 200ms allow-discrete, display 200ms allow-discrete;
}
.pill-pop:popover-open::backdrop { opacity: 1; }
@starting-style {
  .pill-pop:popover-open::backdrop { opacity: 0; }
}
/* Next/prev note: hold the dim so the page does not flash between sheets. */
html.pop-swap .pill-pop::backdrop {
  background: transparent;
  opacity: 1;
  transition: none;
}
@starting-style {
  html.pop-swap .pill-pop:popover-open::backdrop { opacity: 1; }
}
#pop-swap-veil {
  display: none;
  position: fixed;
  inset: 0;
  background: rgb(29 41 81 / 0.08);
  pointer-events: none;
  z-index: 500;
}
html.pop-swap #pop-swap-veil { display: block; }
#how h2 { max-width: 36ch; }

/* ---------- proof ---------- */
.proof-current {
  border: 1px solid var(--hairline); border-left: 3px solid var(--accent);
  border-radius: 4px; padding: calc(var(--space) * 3) calc(var(--space) * 4);
  margin-bottom: calc(var(--space) * 6); background: #fff;
}
.proof-tag { color: var(--navy); text-transform: uppercase; margin-bottom: var(--space); }
.proof-arc { list-style: none; margin: 0; padding: 0; }
.proof-arc > li {
  border: none;
  position: relative;
  scroll-margin-top: calc(var(--header-h, 76px) + var(--band-peek));
}
/* focus lands on the case title as a blue rule, not a box around the row:
   the row is wide and mostly empty, so an outline framed nothing useful */
.proof-summary:focus-visible .proof-title::after {
  opacity: 1;
  background: var(--select);
}
.proof-arc > li::before,
.proof-arc > li:last-child::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin: 0;
  border-radius: 999px;
  background-color: var(--pen);
  -webkit-mask: url("img/case-rule-1.svg") center / 100% 100% no-repeat;
  mask: url("img/case-rule-1.svg") center / 100% 100% no-repeat;
}
.proof-arc > li:nth-child(2)::before {
  -webkit-mask-image: url("img/case-rule-2.svg");
  mask-image: url("img/case-rule-2.svg");
}
.proof-arc > li:nth-child(3)::before {
  -webkit-mask-image: url("img/case-rule-3.svg");
  mask-image: url("img/case-rule-3.svg");
}
.proof-arc > li:nth-child(4)::before {
  -webkit-mask-image: url("img/case-rule-4.svg");
  mask-image: url("img/case-rule-4.svg");
}
.proof-arc > li:nth-child(5)::before {
  -webkit-mask-image: url("img/case-rule-5.svg");
  mask-image: url("img/case-rule-5.svg");
}
.proof-arc > li:last-child::after {
  -webkit-mask-image: url("img/case-rule-6.svg");
  mask-image: url("img/case-rule-6.svg");
}
.proof-case { width: 100%; }
.proof-summary {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: calc(var(--space) * 3);
  align-items: baseline;
  padding: calc(var(--space) * 3) 0;
  cursor: pointer;
  list-style: none;
}
.proof-summary::-webkit-details-marker { display: none; }
.proof-summary:focus,
.proof-summary:focus-visible {
  outline: none;
}
html:not(.pop-open) .proof-case[open] .proof-title:hover { opacity: 0.7; }
.proof-case[open] .proof-summary { cursor: default; }
.proof-case[open] .proof-title { cursor: pointer; }
html.pop-open .proof-summary { cursor: default; }
.proof-label { display: flex; flex-direction: column; gap: 4px; }
.proof-label > .mono:not(.proof-fate) {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}
.proof-fate { color: var(--navy); font-size: 0.75rem; }
.proof-overview {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 2);
}
.proof-title {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-text);
  color: var(--navy);
  font-size: 1.25rem; font-weight: 600; line-height: 1.25;
  letter-spacing: 0;
  transition: opacity 150ms ease;
}
.proof-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  border-radius: 999px;
  background: var(--navy);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  /* Same long stroke as the case rules — lang-underline is 28px and
     stretches into a short, pointed mark under a heading. */
  -webkit-mask: url("img/case-rule-1.svg") center / 100% 100% no-repeat;
  mask: url("img/case-rule-1.svg") center / 100% 100% no-repeat;
}
.proof-skills {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.proof-skills-summary { display: none; }
.proof-skills > span {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--navy);
  border: 1px solid var(--navy); border-radius: 999px;
  padding: 3px 10px; background: transparent;
}
.proof-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: default;
}
.proof-body > p {
  margin: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 546ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 364ms ease,
    margin-bottom 364ms ease;
}
@media (hover: hover) and (pointer: fine) {
  html:not(.pop-open) .proof-case:not([open]) .proof-title {
    transition: opacity 400ms ease-out;
  }
  html:not(.pop-open) .proof-case:not([open]) .proof-body > p:first-of-type {
    transition:
      max-height 500ms ease-out,
      opacity 400ms ease-out,
      margin-bottom 400ms ease-out;
  }
  html:not(.pop-open) .proof-case:not([open]) .proof-summary:hover:not(:has(.pill:hover, .phase-pills:hover)) .proof-title::after,
  html:not(.pop-open) .proof-case[open] .proof-title:hover::after {
    opacity: 1;
  }
  html:not(.pop-open) .proof-case:not([open]).is-teasing:not(.no-tease) .proof-title {
    opacity: 0.7;
  }
  html:not(.pop-open) .proof-case:not([open]).is-teasing:not(.no-tease) .proof-body > p:first-of-type {
    max-height: 1lh;
    opacity: 1;
    margin-bottom: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 15%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 15%, transparent 100%);
  }
}
.proof-case[open] .proof-body > p {
  max-height: 24rem;
  opacity: 1;
  margin-bottom: calc(var(--space) * 2);
  -webkit-mask-image: none;
  mask-image: none;
}
.proof-body .phase-pills { margin: 0; }
#experience .section-label { max-width: 72ch; }
#experience h2 { max-width: 36ch; margin-bottom: calc(var(--space) * 2); font-weight: 700; }
.proof-lede {
  margin: 0 0 calc(var(--space) * 4);
  color: var(--navy);
}
.proof-lede a { text-decoration: none; }
.proof-cases-title {
  margin: calc(var(--space) * 6) 0 calc(var(--space) * 4);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}
.proof-more {
  margin: calc(var(--space) * 4) 0 0;
  font-family: var(--font-mono);
  font-size: calc(0.85rem + 4px);
  color: var(--navy);
}
.proof-more a { color: inherit; }
.proof-build { margin-top: calc(var(--space) * 6); background: var(--ink); color: var(--paper); border-radius: 4px; padding: calc(var(--space) * 4); }
.proof-build a { color: #fff; }

/* ---------- funnel ---------- */
#start_here {
  position: relative;
  z-index: 2;
  background: var(--start);
  border-top: none;
  border-bottom: none;
  scroll-margin-top: calc(var(--header-h, 76px) + var(--band-peek));
}
.offers {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  column-gap: calc(var(--space) * 5);
  align-items: stretch;
  margin-top: calc(var(--space) * 5);
}
.offer-rule {
  position: relative;
  display: block;
  width: 5px;
  align-self: stretch;
  background: none;
  pointer-events: none;
}
.offer-rule .offer-rule-line {
  display: block;
  width: 5px;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
html:not(.js) .offer-rule {
  width: 2.2px;
  background: var(--pen);
}
.form-pop[popover]:not(:popover-open) { display: none !important; }
.form-pop {
  position: relative;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: var(--footer);
  color: var(--navy);
  padding: calc(var(--space) * 5) calc(var(--space) * 6) calc(var(--space) * 5) calc(var(--space) * 5);
}
.form-pop-title { display: none; }
.form-pop-head .pill-pop-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}
.form-pop[popover]:popover-open {
  position: fixed;
  inset: unset;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin: 0;
  width: min(40rem, calc(100vw - 48px));
  max-height: min(90vh, calc(100vh - 48px));
  overflow: auto;
  overscroll-behavior: contain;
}
.form-pop .funnel {
  border: none;
  padding: 0;
}
.form-pop::backdrop {
  background: rgb(29 41 81 / 0.28);
}
.site-footer .nav-lang,
.site-footer .nav-lang a,
.site-footer .nav-lang [aria-current] { color: var(--experience); }
.site-footer .nav-lang > *::after { background: var(--experience); }
.funnel {
  border: 8px solid transparent;
  border-image-source: url("img/phase-frame-2.svg?v=match01");
  border-image-slice: 8;
  border-image-width: 8px;
  border-image-repeat: stretch;
  background: transparent;
  padding: calc(var(--space) * 4);
}
.funnel-progress { color: var(--muted); margin-bottom: calc(var(--space) * 3); }
.funnel-step { border: none; margin: 0; padding: 0; }
.funnel-step legend { font-weight: 600; font-size: 1.7rem; padding: 0 40px 0 0; margin-bottom: calc(var(--space) * 3); }
.js .funnel-step[data-hidden="true"] {
  display: none;
  pointer-events: none;
}

.choice-grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--space) * 2); }
.choice {
  position: relative;
  border: 1px solid var(--pen);
  border-radius: 18px;
  padding: calc(var(--space) * 2) calc(var(--space) * 3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  overflow: visible;
}
.js .choice { border-color: transparent; }
.choice:hover,
.choice:active,
.choice:has(input:checked) { background: transparent; }
.choice:hover .pill-frame path,
.choice:active .pill-frame path {
  stroke-width: 1.7;
}
.choice:has(input:checked) .pill-frame path {
  stroke-width: 2.2;
}
.choice input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.1 2.35 C14.3 2.05, 17.7 5.15, 17.55 10.15 C17.4 14.85, 14.15 17.85, 9.75 17.55 C5.25 17.25, 2.45 13.7, 2.6 9.45 C2.75 5.45, 6.05 2.65, 10.1 2.35 Z' stroke='%23253168' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
.choice-grid .choice:nth-child(2) input[type="radio"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.6 2.4 C13.85 1.85, 17.95 4.95, 17.65 9.95 C17.35 15.15, 13.7 18.15, 10.15 17.55 C5.7 16.95, 2.15 13.55, 2.55 9.25 C2.9 5.35, 5.75 2.9, 9.6 2.4 Z' stroke='%23253168' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.choice-grid .choice:nth-child(3) input[type="radio"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.25 2.55 C14.05 2.85, 17.45 5.7, 17.5 10.05 C17.55 14.55, 14.05 17.35, 9.85 17.85 C5.35 18.35, 2.3 14.15, 2.25 9.7 C2.2 5.65, 6.25 2.25, 10.25 2.55 Z' stroke='%23253168' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.choice input[type="radio"]:checked {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.05 6.15 C12.35 5.9, 14.05 7.45, 13.85 10.05 C13.65 12.4, 12.1 14.0, 9.85 13.75 C7.6 13.5, 6.2 11.95, 6.4 9.7 C6.6 7.5, 8.15 6.4, 10.05 6.15 Z' fill='%23253168'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.1 2.35 C14.3 2.05, 17.7 5.15, 17.55 10.15 C17.4 14.85, 14.15 17.85, 9.75 17.55 C5.25 17.25, 2.45 13.7, 2.6 9.45 C2.75 5.45, 6.05 2.65, 10.1 2.35 Z' stroke='%23253168' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.choice-grid .choice:nth-child(2) input[type="radio"]:checked {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.05 6.15 C12.35 5.9, 14.05 7.45, 13.85 10.05 C13.65 12.4, 12.1 14.0, 9.85 13.75 C7.6 13.5, 6.2 11.95, 6.4 9.7 C6.6 7.5, 8.15 6.4, 10.05 6.15 Z' fill='%23253168'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.6 2.4 C13.85 1.85, 17.95 4.95, 17.65 9.95 C17.35 15.15, 13.7 18.15, 10.15 17.55 C5.7 16.95, 2.15 13.55, 2.55 9.25 C2.9 5.35, 5.75 2.9, 9.6 2.4 Z' stroke='%23253168' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.choice-grid .choice:nth-child(3) input[type="radio"]:checked {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.05 6.15 C12.35 5.9, 14.05 7.45, 13.85 10.05 C13.65 12.4, 12.1 14.0, 9.85 13.75 C7.6 13.5, 6.2 11.95, 6.4 9.7 C6.6 7.5, 8.15 6.4, 10.05 6.15 Z' fill='%23253168'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.25 2.55 C14.05 2.85, 17.45 5.7, 17.5 10.05 C17.55 14.55, 14.05 17.35, 9.85 17.85 C5.35 18.35, 2.3 14.15, 2.25 9.7 C2.2 5.65, 6.25 2.25, 10.25 2.55 Z' stroke='%23253168' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.choice-title { display: block; font-family: var(--font-ui); font-weight: 500; }
.choice-sub {
  display: block;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--navy);
  line-height: 1.4;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--space) * 6);
  row-gap: calc(var(--space) * 4);
}
.field-grid .field { margin-bottom: 0; }
.field-wide { grid-column: 1 / -1; }
.field {
  display: grid;
  margin-bottom: calc(var(--space) * 4);
}
.field label {
  display: block;
  grid-row: 1;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.field-hint {
  display: block;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 2px;
}
.field input, .field select, .field textarea {
  grid-row: 2;
  width: 100%;
  padding: 8px 0 6px;
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--navy);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.field::after {
  content: "";
  grid-row: 3;
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 2px;
  background-color: var(--pen);
  pointer-events: none;
  -webkit-mask: url("img/case-rule-1.svg") center / 100% 100% no-repeat;
  mask: url("img/case-rule-1.svg") center / 100% 100% no-repeat;
}
.field-grid > .field:nth-child(4n + 2)::after {
  -webkit-mask-image: url("img/case-rule-2.svg");
  mask-image: url("img/case-rule-2.svg");
}
.field-grid > .field:nth-child(4n + 3)::after {
  -webkit-mask-image: url("img/case-rule-3.svg");
  mask-image: url("img/case-rule-3.svg");
}
.field-grid > .field:nth-child(4n + 4)::after {
  -webkit-mask-image: url("img/case-rule-4.svg");
  mask-image: url("img/case-rule-4.svg");
}
.field:focus-within::after {
  background-color: var(--select);
}
.field:has([aria-invalid="true"])::after {
  background-color: var(--accent-text);
}
html:not(.js) .field input,
html:not(.js) .field select,
html:not(.js) .field textarea {
  border-bottom: 1.2px solid var(--pen);
}
.field select {
  appearance: none;
  padding-right: 1.4rem;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 5.2 C5.4 7.6, 6.8 8.8, 8 11' stroke='%23253168' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M13 5.2 C10.7 7.5, 9.3 8.7, 8 11' stroke='%23253168' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") right 0 center / 14px 14px no-repeat;
}
.field textarea { min-height: 8rem; resize: none; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
}
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--navy);
  box-shadow: 0 0 0 1000px var(--footer) inset;
  caret-color: var(--navy);
}
.field-error {
  grid-row: 4;
  color: var(--accent-text);
  font-size: 0.875rem;
  margin-top: 6px;
}

.funnel-nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: calc(var(--space) * 2);
  margin-top: calc(var(--space) * 4);
}
.funnel-note {
  margin: calc(var(--space) * 2) 0 0;
  max-width: 100%;
  font-size: 0.875rem;
  color: var(--navy);
}
.funnel-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.funnel-turnstile { display: none; margin: 0; min-height: 0; }
.funnel-turnstile.is-on {
  display: block;
  margin: calc(var(--space) * 3) 0 var(--space);
  min-height: 65px;
}
iframe[src*="challenges.cloudflare.com"],
div[id^="cf-chl-"] {
  z-index: 4000 !important;
}
.funnel-thanks {
  display: none;
  margin: 0;
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--navy);
}
.funnel[data-sent="true"] .funnel-step,
.funnel[data-sent="true"] .funnel-progress,
.funnel[data-sent="true"] .funnel-nav,
.funnel[data-sent="true"] .funnel-turnstile,
.funnel[data-sent="true"] .funnel-note,
.funnel[data-sent="true"] #funnel-status { display: none !important; }
.funnel[data-sent="true"] .funnel-thanks { display: block; }

/* no-JS: all steps visible, nav buttons hidden except submit */
html:not(.js) #funnel-next, html:not(.js) #funnel-back { display: none; }
html:not(.js) #funnel-submit { display: inline-block !important; }
html:not(.js) .funnel-progress { display: none; }

/* ---------- footer ---------- */
.site-footer {
  position: relative;
  z-index: 4;
  background: var(--pen);
  color: var(--experience);
  border-top: none;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: calc(var(--space) * 12) var(--body-gutter);
  padding-top: calc(var(--header-h, 76px) + var(--space) * 12);
  padding-bottom: calc(var(--space) * 12 + env(safe-area-inset-bottom, 0px));
  scroll-margin-top: calc(var(--header-h, 76px) + var(--band-peek));
}
.footer-inner {
  display: flex; flex-direction: column;
  width: 100%;
  gap: calc(var(--space) * 7);
  transform: translateY(-10pt);
}
.footer-title {
  color: var(--experience);
  max-width: none;
}
.footer-alt {
  margin: calc(var(--space) * 3) 0 0;
  color: var(--experience);
  font-family: var(--font-ui);
  font-size: calc(0.9375rem + 4pt);
  max-width: none;
}
.footer-alt a {
  position: relative;
  color: inherit;
  text-decoration: none;
}
.footer-alt a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 4px;
  background: var(--experience);
  -webkit-mask: url("img/lang-underline.svg?v=3") 0 0 / 100% 100% no-repeat;
  mask: url("img/lang-underline.svg?v=3") 0 0 / 100% 100% no-repeat;
}
.footer-alt a:hover { color: inherit; opacity: 0.7; }
.footer-cta {
  height: 56px;
  padding: 0 28px;
  color: var(--pen);
  font-family: var(--font-ui);
  font-size: calc(1.0625rem + 4pt);
  font-weight: 600;
  letter-spacing: 0;
  isolation: isolate;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}
/* CSS beats the stroke/fill attributes the painter writes, so the drawn pill
   fills cream on the dark footer without touching main.js. The label sits
   above the frame so the fill cannot slip behind the footer. */
.footer-cta .pill-frame { z-index: 0; }
.footer-cta .pill-label { position: relative; z-index: 1; }
.footer-cta .pill-frame path { stroke: var(--experience); stroke-width: 1.6; fill: var(--experience); }
.footer-cta:hover,
.footer-cta:active,
.footer-cta:focus-visible {
  outline: none;
  box-shadow: none;
}
.footer-cta:hover .pill-frame path,
.footer-cta:active .pill-frame path,
.footer-cta:focus-visible .pill-frame path {
  stroke-width: 3.6;
}
html:not(.js) .footer-cta {
  background: var(--experience);
  color: var(--pen);
  border-color: var(--experience);
}
/* ---------- responsive ---------- */
/* Nav stays at 80px. Body gets a tighter column on wide displays. */
@media (min-width: 1600px) {
  :root {
    --body-gutter: max(200px, calc((100vw - 1080px) / 2));
  }
}
@media (max-width: 1024px) {
  .cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  /* Notes and the form cover the viewport on small screens. Anything less
     leaves a ring of page around the sheet, and Safari paints its chrome
     from that ring — the colour fight this site cannot win. The sheet is
     the page, so html/body and theme-color take its colour. */
  html.pop-open,
  html.pop-open.at-foot,
  html.pop-open body {
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--experience);
  }
  html.pop-open body {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
  }
  html.pop-open .site-header::before { display: none; }
  .pill-pop::backdrop { background: transparent; }
  html.pop-swap #pop-swap-veil { display: none; }

  .hero { padding-top: 60px; }
  .hero-copy { max-width: none; }
  #hero-title { font-size: 3.5rem; }
  .footer-title { font-size: calc(3.5rem - 5pt); }
  .hero-sub { font-size: 1.3125rem; }
  /* Desktop writes each thought on its own line. On a phone those breaks
     just orphan words — let the heading and the body wrap as two blocks. */
  .hero-line,
  .hero-sub-line { display: inline; }
  .hero-line + .hero-line::before,
  .hero-sub-line + .hero-sub-line::before { content: " "; }
  #proof-title br,
  #how-title br,
  .footer-title br { display: none; }
  #experience h2,
  #how h2 {
    max-width: none;
  }
  .field-grid { grid-template-columns: 1fr; }
  .cols-3 { grid-template-columns: 1fr; }
  .offers { grid-template-columns: 1fr; row-gap: calc(var(--space) * 4); }
  .offer-rule { width: 100%; height: 5px; }
  .offer-rule .offer-rule-line { width: 100%; height: 5px; }
  html:not(.js) .offer-rule { width: 100%; height: 1.2px; }
  .phases { grid-template-columns: 1fr; gap: calc(var(--space) * 6); }
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--space) * 5);
  }
  .footer-contact { align-items: flex-start; text-align: left; }
  .proof-summary {
    grid-template-columns: minmax(0, 1fr) 1.35rem;
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 0;
    align-items: start;
  }
  .proof-overview { display: contents; }
  .proof-label {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0.55em;
    width: 100%;
  }
  .proof-title {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    margin-top: var(--space);
  }
  .proof-body {
    grid-column: 1;
    grid-row: 3;
  }
  .proof-case[open] .proof-body {
    margin-top: calc(var(--space) * 2);
  }
  .proof-case:not([open]) .proof-body .phase-pills { display: none; }
  .proof-summary::after {
    content: "";
    display: block;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    width: 1.35rem;
    height: 1.35rem;
    background: var(--pen);
    -webkit-mask: url("img/case-plus.svg") center / contain no-repeat;
    mask: url("img/case-plus.svg") center / contain no-repeat;
  }
  .proof-case[open] .proof-summary::after {
    -webkit-mask-image: url("img/case-minus.svg");
    mask-image: url("img/case-minus.svg");
  }
  .proof-arc > li::before,
  .proof-arc > li:last-child::after,
  .proof-arc > li:nth-child(2)::before,
  .proof-arc > li:nth-child(3)::before,
  .proof-arc > li:nth-child(4)::before,
  .proof-arc > li:nth-child(5)::before {
    margin-left: 0;
    margin-right: 0;
  }
  /* Mobile header: brand · menu. Links and language live in a full-width
     panel under the header; the CTA sits inside the panel as a block —
     not as hard-sell chrome in a small header. */
  :root { --page-gutter: 20px; --body-gutter: 20px; }
  html.form-open,
  html.form-open.at-foot,
  html.form-open body {
    background: var(--footer);
  }
  .form-pop[popover],
  .form-pop[popover]:popover-open {
    display: flex;
    flex-direction: column;
    inset: 0;
    translate: none;
    margin: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    box-sizing: border-box;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .form-pop-head {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: calc(16px + env(safe-area-inset-top, 0px)) calc(var(--page-gutter) + env(safe-area-inset-right, 0px)) 18px calc(var(--page-gutter) + env(safe-area-inset-left, 0px));
    background: var(--footer);
    box-shadow: 0 8px 20px rgb(29 41 81 / 0);
  }
  .form-pop-head.is-scrolled {
    box-shadow: 0 8px 20px rgb(29 41 81 / 0.16);
  }
  .form-pop-title {
    display: block;
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--font-head);
    font-size: calc(1.125rem + 2px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--navy);
  }
  .form-pop-head .pill-pop-close {
    position: static;
    flex: 0 0 32px;
    margin: 0;
  }
  .form-pop-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 0 calc(var(--page-gutter) + env(safe-area-inset-right, 0px)) calc(var(--space) * 5 + env(safe-area-inset-bottom, 0px)) calc(var(--page-gutter) + env(safe-area-inset-left, 0px));
  }
  .form-pop .funnel-step legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .pill-pop[popover],
  .pill-pop[popover]:popover-open {
    inset: 0;
    translate: none;
    margin: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    box-sizing: border-box;
    box-shadow: none;
    --pop-pad-t: calc(32px + env(safe-area-inset-top, 0px));
    --pop-pad-r: calc(var(--page-gutter) + env(safe-area-inset-right, 0px));
    --pop-pad-b: calc(var(--space) * 5 + env(safe-area-inset-bottom, 0px));
    --pop-pad-l: calc(var(--page-gutter) + env(safe-area-inset-left, 0px));
    padding: 0;
    overflow: hidden;
  }
  .pill-pop-head .pill-pop-close {
    top: calc(16px + env(safe-area-inset-top, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
  }
  .pill-pop-head {
    padding-right: calc(56px + env(safe-area-inset-right, 0px));
  }
  .form-pop::backdrop { background: transparent; }
  .pill-pop p { max-width: none; }
  .nav { position: relative; padding: 12px var(--page-gutter); }
  .nav-right { position: static; }
  .nav-toggle { display: inline-flex; }
  html:not(.nav-shown) .nav-toggle {
    opacity: 1;
    pointer-events: auto;
  }
  /* Closed header is brand + menu. Language lives in the open panel. */
  .nav-links .nav-lang {
    padding: calc(var(--space) * 2) 0 0;
    font-size: 1.0625rem;
  }
  .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--nav-bg, var(--hero));
    border-bottom: none;
    padding: calc(var(--space) * 1) var(--page-gutter) calc(var(--space) * 3);
    z-index: 60;
    visibility: hidden;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
    box-shadow: 0 12px 32px rgb(29 41 81 / 0);
    transition:
      clip-path 260ms ease,
      box-shadow 200ms ease,
      visibility 0s linear 360ms;
  }
  .nav-links.open {
    visibility: visible;
    pointer-events: auto;
    clip-path: inset(0 -40px -48px -40px);
    box-shadow: 0 12px 32px rgb(29 41 81 / 0.22);
    transition:
      clip-path 260ms ease,
      box-shadow 200ms ease,
      visibility 0s;
  }
  .nav-links > a:not([hidden]),
  .nav-links > .nav-lang {
    opacity: 0;
    transition: opacity 90ms ease;
  }
  .nav-links > a:nth-of-type(1) { transition-delay: 0ms; }
  .nav-links > a:nth-of-type(2) { transition-delay: 40ms; }
  .nav-links > a:nth-of-type(3) { transition-delay: 80ms; }
  .nav-links > a:nth-of-type(4) { transition-delay: 120ms; }
  .nav-links > .nav-lang { transition-delay: 160ms; }
  .nav-links.open > a:not([hidden]),
  .nav-links.open > .nav-lang { opacity: 1; }
  /* Same lock as the hamburger: items stay inert until .nav-shown unless
     the overlay is open. Parent .nav-links is already pointer-events: none
     while closed, so this does not leak hits through the clipped panel. */
  html:not(.nav-shown) .nav-links > a {
    pointer-events: auto;
  }
  html:not(.nav-shown) .nav-links.open > a,
  html:not(.nav-shown) .nav-links.open > .nav-lang {
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links.open > a:nth-of-type(1) { transition-delay: 50ms; }
  .nav-links.open > a:nth-of-type(2) { transition-delay: 90ms; }
  .nav-links.open > a:nth-of-type(3) { transition-delay: 130ms; }
  .nav-links.open > a:nth-of-type(4) { transition-delay: 170ms; }
  .nav-links.open > .nav-lang { transition-delay: 210ms; }
  .nav-links.open > a:not([hidden]):hover,
  .nav-links.open > a:not([hidden]):active { opacity: 0.7; }
  html:not(.js) .nav-links {
    display: flex;
    position: static;
    flex-direction: column;
    align-items: flex-start;
    visibility: visible;
    pointer-events: auto;
    clip-path: none;
    box-shadow: none;
  }
  html:not(.js) .nav-links > a,
  html:not(.js) .nav-links > .nav-lang { opacity: 1; }
  .nav-links a:not(.nav-cta) {
    padding: calc(var(--space) * 2) 0;
    border-bottom: none;
    font-size: 1.0625rem;
  }
  .nav-links > a:not([hidden]) {
    align-self: flex-start;
    width: max-content;
  }
  /* Section links keep no word-underline. Current language keeps the
     short hand stroke — same mark as desktop EN/NL, not a straight bar. */
  .nav-links > a::after { display: none; }
  .nav-lang > *::after {
    left: 0;
    right: auto;
    width: 1.35em;
    height: 5px;
    bottom: -4px;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
  .nav-links > .nav-rule {
    display: block;
    width: auto;
    height: 3px;
    flex: 0 0 auto;
    align-self: stretch;
    opacity: 0;
    pointer-events: none;
    background-color: var(--pen);
    -webkit-mask: url("img/case-rule-1.svg") center / 100% 100% no-repeat;
    mask: url("img/case-rule-1.svg") center / 100% 100% no-repeat;
    transition: opacity 90ms ease;
  }
  html:not(.nav-shown) .nav-links.open > .nav-rule,
  html.nav-shown .nav-links.open > .nav-rule,
  html.nav-shown .nav-links > .nav-rule {
    opacity: 1;
  }
  .nav-rule .field-line { display: none; }
  /* Same start/end stagger as the 01 case rules (.proof-arc). */
  .nav-links > .nav-rule:nth-of-type(1) {
    margin-left: 0;
    margin-right: 3px;
  }
  .nav-links > .nav-rule:nth-of-type(2) {
    margin-left: 3px;
    margin-right: 1px;
    -webkit-mask-image: url("img/case-rule-2.svg");
    mask-image: url("img/case-rule-2.svg");
  }
  .nav-links > .nav-rule:nth-of-type(3) {
    margin-left: 1px;
    margin-right: 3px;
    -webkit-mask-image: url("img/case-rule-3.svg");
    mask-image: url("img/case-rule-3.svg");
  }
  .nav-links > .nav-rule:nth-of-type(4) {
    margin-left: 2px;
    margin-right: 0;
    -webkit-mask-image: url("img/case-rule-4.svg");
    mask-image: url("img/case-rule-4.svg");
  }
  .nav-links > .nav-rule:nth-of-type(5) {
    margin-left: 1px;
    margin-right: 2px;
    -webkit-mask-image: url("img/case-rule-5.svg");
    mask-image: url("img/case-rule-5.svg");
  }
  .nav-links .nav-cta {
    margin-top: calc(var(--space) * 3);
    text-align: center;
  }
}
.direction-rule {
  display: block;
  width: 100%;
  height: 3px;
  margin: calc(var(--space) * 7) 0 calc(var(--space) * 2);
  background-color: var(--navy);
  -webkit-mask: url("img/case-rule-1.svg") center / 100% 100% no-repeat;
  mask: url("img/case-rule-1.svg") center / 100% 100% no-repeat;
}

@media (max-width: 480px) {
  .choice-grid { grid-template-columns: 1fr; }
  .funnel-nav { flex-direction: row; }
}