/* cardboard.site. One flow: a line runs down the page, every band sits on it. Tokens first. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/static/fonts/newsreader-normal-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: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/static/fonts/newsreader-normal-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; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url(/static/fonts/newsreader-italic-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: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url(/static/fonts/newsreader-italic-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; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/static/fonts/instrument-sans-normal-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: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/static/fonts/instrument-sans-normal-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; }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/static/fonts/instrument-sans-italic-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; }

:root {
  color-scheme: light;
  --paper: #FBF7EF; --paper-2: #F3ECDF; --card: #FFFDF8;
  --ink: #191816; --ink-2: #4E4A43; --ink-3: #7D776C;
  --muted: #6D675C;                                    /* small grey text: 5.25:1 on paper (--ink-3 is 4.16, under AA); the brand's --cb-neutral-650 */
  --field: #857F75;                                    /* the edge of a field or chip: 3.7:1, WCAG 1.4.11 asks 3 */
  --err: #B4321A;
  --kraft: #DDB78A; --kraft-2: #C9995F; --kraft-ink: #8A5F33; --tape: #EFDDBC;
  --cobalt: #2F5BE3; --cobalt-2: #1F45C2; --sky: #CFDCFF;
  --coral: #EE7A4F; --mustard: #E9B949; --sage: #8DBF6A;
  --navy: #15203A; --navy-2: #22305A; --on-navy: #F4EEE2; --on-navy-2: #B9C0D3;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --lx: clamp(9px, 3.4vw, 60px);                       /* where the line runs down, from the edge */
  --pad: calc(var(--lx) + clamp(14px, 3vw, 44px));     /* where text starts, clear of the line */
  --r: clamp(30px, 6vw, 110px);                        /* the line's corners */
  --line: 1.6px;
  --band: clamp(72px, 10vw, 136px);
  --k: 1;                                              /* scale of the drawn scenes */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 clamp(16px, 1.05vw + 12px, 18px)/1.62 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--cobalt); }
:focus-visible { outline: 2.5px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; line-height: 1.08; margin: 0 0 .5em; text-wrap: balance; font-optical-sizing: auto; }
h1 { font-size: clamp(40px, 4.4vw + 8px, 76px); line-height: 1.02; }
h2 { font-size: clamp(32px, 3.3vw + 12px, 58px); }
h3 { font-size: clamp(22px, 1vw + 16px, 28px); line-height: 1.18; }
h1 em, h2 em { font-style: italic; color: var(--kraft-ink); }
p { margin: 0 0 1em; text-wrap: pretty; }
.lead { font-size: clamp(18px, .6vw + 15px, 22px); line-height: 1.55; color: var(--ink-2); max-width: 44em; }
.small { font-size: 14px; color: var(--muted); }
.eyebrow { font: 600 13px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--kraft-ink); margin: 0 0 18px; }
.wrap { width: min(1180px, 100% - 2 * var(--pad)); margin-inline: auto; position: relative; z-index: 2; }
.narrow { max-width: 780px; }
.center { text-align: center; margin-inline: auto; }
.center .lead { margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }

/* Buttons: the Culdesac pill. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 999px; background: var(--cobalt); color: #fff; font: 600 16px/1.2 var(--sans); text-decoration: none; text-align: center; border: 1.5px solid var(--cobalt); transition: background .2s, transform .2s, box-shadow .2s; cursor: pointer; }
.btn:hover { background: var(--cobalt-2); border-color: var(--cobalt-2); transform: translateY(-1px); box-shadow: 0 8px 22px -12px rgba(31, 69, 194, .7); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }
/* The analysis gets its own colour: kraft, the colour of the box (ink on kraft is about 9.5:1). */
.btn-kraft { background: var(--kraft); color: var(--ink); border-color: var(--ink); }
.btn-kraft:hover { background: var(--kraft-2); border-color: var(--ink); box-shadow: 0 8px 22px -14px rgba(25, 24, 22, .55); }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 15px; white-space: nowrap; }
.btn-sm .s { display: none; }
.btn-lg { min-height: 54px; padding: 14px 28px; font-size: 17px; }
/* The box hint on the buttons to a call or the analysis is the animation team's (build.mjs, boxIcon()).
   Until it is filled, the empty span takes no room. */
.box-ico:empty { display: none; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.ctas.center { justify-content: center; }
.more { display: inline-flex; gap: 6px; font-weight: 600; color: var(--cobalt); text-decoration: none; margin-top: 4px; }
.more:hover { text-decoration: underline; }
.more span { transition: transform .2s; }
.more:hover span { transform: translateX(3px); }

/* Header. */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 97%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: rgba(25, 24, 22, .1); }
.top-in { width: min(1240px, 100% - 2 * var(--pad)); margin-inline: auto; display: flex; align-items: center; gap: 12px 24px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 500 25px/1 var(--serif); letter-spacing: -0.01em; text-decoration: none; min-width: 0; }
.brand .mark { flex: none; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav a { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink-2); }
.nav a:hover, .nav a[aria-current] { color: var(--ink); text-decoration: underline; }
.top-act { display: flex; align-items: center; gap: 14px; flex: none; }
/* With large text the header button would run into "Cardboard": site.js then sets .tight and the button steps aside;
   the hero and the bar on phones carry the same buttons (animation team, review/06-animatie-bouw.md, ronde 3). */
.top.tight .top-act .btn-sm { display: none; }
.lang { font: 600 13px/1 var(--sans); letter-spacing: .08em; text-decoration: none; padding: 8px 4px; color: var(--ink-2); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; cursor: pointer; border-radius: 999px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 22px; height: 1.8px; background: var(--ink); transition: transform .2s; }
.menu[open] summary span:first-child { transform: translateY(4px) rotate(45deg); }
.menu[open] summary span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu-panel { position: absolute; right: 0; top: 52px; width: min(300px, 86vw); background: var(--card); border: 1px solid rgba(25, 24, 22, .12); border-radius: 22px; padding: 10px; box-shadow: 0 20px 50px -24px rgba(25, 24, 22, .35); }
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel a { display: block; padding: 12px 14px; text-decoration: none; border-radius: 10px; font-weight: 500; }
.menu-panel a:hover { background: var(--paper-2); }
.lang-m { color: var(--muted); border-top: 1px solid rgba(25, 24, 22, .1); margin-top: 6px; }

/* The flow: one line, drawn by site.js from where each band ends. */
.flow-root { position: relative; }
.flow-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.flow-line path { fill: none; stroke: var(--ink); stroke-width: var(--line); stroke-linecap: round; stroke-linejoin: round; }
html:not(.js) .band, .no-line .band { border-bottom: var(--line) solid var(--ink); }
.band { position: relative; padding-top: var(--band); }
.band > .wrap:last-child { padding-bottom: clamp(64px, 7vw, 104px); }

/* Scenes: figures and objects stand on the line at the bottom of a band. */
.scene { position: relative; z-index: 2; margin-inline: auto; width: min(1180px, 100% - 2 * var(--lx)); height: calc(var(--sh, 300px) * var(--k)); }
.scene > * { position: absolute; bottom: 0; }
.fig { height: calc(var(--h) * var(--k)); width: auto; max-width: none; }
.obj .ground { display: none; }
.obj { overflow: visible; }
.obj * { vector-effect: non-scaling-stroke; }

/* Hero. One column below 1100 px: the text, the scene on its own ground, then the two ways in (so the box is
   in view when the page opens). From 1100 px two columns: text and buttons left, the scene right, on the line. */
.hero { padding-top: clamp(28px, 4vw, 60px); }
.hero > .wrap:last-child { padding-bottom: 0; }
.hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-text { order: 1; max-width: 860px; }
.hero-text h1 { margin-bottom: 0; }
.hero-text .lead { margin: 18px auto 0; max-width: 660px; }
.s-hero { order: 2; width: 100%; --sh: 330px; margin-top: clamp(20px, 3vw, 36px); }
.hero-act { order: 3; width: min(100%, 640px); margin-top: clamp(28px, 4vw, 40px); padding-bottom: clamp(56px, 7vw, 88px); }
.s-hero .lamp { left: 1%; height: calc(300px * var(--k)); width: auto; }
.s-hero .h-exec { left: 13%; }
.s-hero .hero-box { left: 27%; width: calc(470px * var(--k)); height: auto; }
.s-hero .h-george { left: 63%; }
.s-hero .h-harold { left: 75%; }
.s-hero .tree { right: 0; height: calc(300px * var(--k)); width: auto; }
.rise { transform-box: fill-box; }
.js .s-hero .rise { animation: rise 1.4s cubic-bezier(.2, .8, .2, 1) .5s both; }
@keyframes rise { from { transform: translateY(46%); } to { transform: none; } }
/* The idea field: one pill with the button in it. Without JavaScript a plain button stands in its place,
   because a plain form would put the idea in the address bar. */
.idea-label { display: block; font: 600 14px/1.3 var(--sans); color: var(--ink); margin: 0 0 10px; }
.idea-box { display: grid; gap: 4px; padding: 8px 8px 8px 20px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 26px; text-align: left; box-shadow: 0 18px 40px -30px rgba(25, 24, 22, .5); transition: border-color .15s, box-shadow .15s; }
.idea-box:focus-within { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(47, 91, 227, .2); }
.idea-box input { width: 100%; min-width: 0; border: 0; background: transparent; font: 400 18px/1.4 var(--sans); color: var(--ink); padding: 12px 12px 8px 0; text-overflow: ellipsis; }
.idea-box input:focus { outline: none; }
.idea-box input::placeholder { color: #6E6A62; }
.idea-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; }
.idea-foot .micro { margin: 0; flex: 1 1 auto; }
.idea-foot .btn { flex: none; }
.micro { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.nobr { white-space: nowrap; }
.idea-nojs { display: none; }
html:not(.js) .idea { display: none; }
html:not(.js) .idea-nojs { display: block; }
.hero-or { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 22px; }
.hero-or .or { font: italic 400 21px/1 var(--serif); color: var(--ink-2); }
.hero-or .micro { flex: 1 1 100%; margin: 0; }
@media (min-width: 1100px) {
  .hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "text scene" "act scene"; grid-template-rows: auto 1fr; column-gap: clamp(36px, 4vw, 64px); align-items: start; text-align: left; }
  .hero-text { grid-area: text; max-width: none; }
  .hero-text h1 { font-size: clamp(44px, 3.3vw + 12px, 58px); }
  .hero-text .lead { margin: 16px 0 0; font-size: clamp(18px, .4vw + 14px, 20px); }
  .hero-act { grid-area: act; width: auto; margin-top: 30px; padding-bottom: clamp(40px, 4vw, 56px); }
  .hero-or { justify-content: flex-start; flex-wrap: nowrap; }
  .hero-or .btn { flex: none; }
  .hero-or .micro { flex: 1 1 auto; max-width: 250px; }
  .s-hero { grid-area: scene; align-self: end; margin: 0; --k: .56; --sh: 345px; }
  .s-hero .lamp, .s-hero .tree { display: none; }
  .s-hero .h-exec { left: 0; }
  .s-hero .hero-box { left: 12%; }
  .s-hero .h-george { left: 64%; }
  .s-hero .h-harold { left: 79%; }
}
/* Low laptop screens (1280x720, 1366x768 with the browser bars): the same hero a little tighter, so the box
   is in view when the page opens. */
@media (min-width: 1100px) and (max-height: 760px) {
  .hero { padding-top: 22px; }
  .hero-text .eyebrow { margin-bottom: 12px; }
  .hero-text h1 { font-size: clamp(44px, 2.4vw + 18px, 52px); }
  .hero-text .lead { font-size: 18px; margin-top: 12px; }
  .hero-act { margin-top: 22px; padding-bottom: 34px; }
  .idea-label { margin-bottom: 8px; }
  .idea-box input { padding-top: 9px; }
  .hero-or { margin-top: 16px; }
}
@media (min-width: 1280px) { .s-hero { --k: .66; } }
@media (min-width: 1360px) { .s-hero { --k: .72; } }
/* Wide screens: the scene may run into the margin next to the column, clear of the bend in the line. */
@media (min-width: 1700px) { .s-hero { --k: .8; width: calc(100% + min(200px, (100vw - 1180px) / 2 - var(--lx) - var(--r))); } }
@media (max-width: 1099.98px) { .s-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: var(--line) solid var(--ink); border-radius: 2px; } }

/* Proof. */
.proof { padding-top: clamp(48px, 6vw, 80px); }
.proof .wrap:last-child { padding-bottom: clamp(48px, 6vw, 80px); }
.proof-label { font: 600 13px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; }
.proof-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.proof-list li { border-top: 1px solid rgba(25, 24, 22, .16); padding-top: 18px; }
.proof-list b { display: block; font: 400 clamp(36px, 3vw + 10px, 54px)/1 var(--serif); margin-bottom: 10px; }
.proof-list span { display: block; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* Stickers: a number or an icon on a round piece of tape, the same everywhere. */
.sticker, .ic { display: inline-grid; place-items: center; border-radius: 50%; border: var(--line) solid var(--ink); background: var(--tape); color: var(--ink); box-shadow: 3px 3px 0 var(--kraft); }
.sticker { width: 44px; height: 44px; font: 500 17px/1 var(--serif); }
.ic { width: 56px; height: 56px; margin-bottom: 18px; }
.ic .icon { width: 28px; height: 28px; stroke-width: 2.1; }
.bridge { font-size: 18px; color: var(--ink-2); }
.bridge a { font-weight: 600; color: var(--cobalt); text-decoration: none; white-space: nowrap; }
.bridge a:hover { text-decoration: underline; }

/* How we work: three agreements. */
.deal-list { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.deal-list li { border-top: 1px solid rgba(25, 24, 22, .16); padding-top: 24px; }
.deal-list h3 { margin: 18px 0 8px; }
.deal-list p { color: var(--ink-2); margin: 0; }

/* Services: abcMD's benefit cards. */
.cards { list-style: none; margin: 48px 0 32px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { display: flex; gap: 18px; align-items: flex-start; background: var(--card); border: 1px solid rgba(25, 24, 22, .1); border-radius: 22px; padding: 24px 24px 24px 22px; transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(25, 24, 22, .35); }
.card .ic { flex: none; width: 52px; height: 52px; margin: 0; }
.card .ic .icon { width: 26px; height: 26px; }
.card h3 { font-size: 23px; margin: 10px 0 .4em; }
.card p { font-size: 16px; color: var(--ink-2); margin: 0; }
.s-deco { --sh: 150px; margin-top: 0; }
.s-deco-r > * { right: 4%; } .s-deco-l > * { left: 4%; }
.s-deco .boxes { width: calc(190px * var(--k)); height: auto; }
.s-deco .plant { width: calc(100px * var(--k)); height: auto; }
.s-deco .scales { width: calc(170px * var(--k)); height: auto; }
@media (min-width: 861px) { .s-deco { margin-top: calc(var(--sh) * var(--k) * -1 + 72px); } }

/* From cardboard to production: four steps on one road. From 1100 px the four scenes stand on the band's line;
   below that each scene gets a ground of its own. */
.flow4 > .wrap:last-child { padding-bottom: 0; }
.steps4 { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.step4 { display: flex; flex-direction: column; min-width: 0; }
.step4-text { padding-bottom: 28px; }
.step4-text h3 { margin: 16px 0 8px; font-size: clamp(22px, .8vw + 14px, 26px); }
.step4-text p { color: var(--ink-2); font-size: 16px; margin: 0 0 6px; }
.step4 .scene { --k: .58; width: 100%; margin: auto 0 0; }
.s-meet { --sh: 280px; }
.s-meet .meet { left: 2%; width: calc(440px * var(--k)); height: auto; z-index: 2; }
.s-meet .b1 { left: 10%; bottom: calc(96px * var(--k)); z-index: 1; }
.s-meet .b2 { left: 51%; bottom: calc(96px * var(--k)); z-index: 1; }
.s-net { --sh: 250px; }
.s-net .fig { left: 0; }
.s-net .net { right: 0; width: calc(330px * var(--k)); height: auto; }
.s-fold { --sh: 180px; }
.s-fold .folding { left: 0; width: calc(380px * var(--k)); height: auto; }
.s-fold .fig { right: 0; }
.s-review { --sh: 230px; }
.s-review .counter { left: 0; width: calc(330px * var(--k)); height: auto; z-index: 2; }
.s-review .b1 { left: 6%; bottom: calc(100px * var(--k)); z-index: 1; }
.s-review .b2 { left: 32%; bottom: calc(100px * var(--k)); z-index: 1; }
.s-review .review { right: 0; width: calc(250px * var(--k)); height: auto; z-index: 3; }

/* The team around your brain: Joris large, the roles around the jar. */
.team-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 20px; margin: 40px 0 24px; align-items: stretch; }
.joris { background: var(--card); border: 1px solid rgba(25, 24, 22, .1); border-radius: 22px; padding: 22px 22px 26px; display: flex; flex-direction: column; }
.joris .portrait { flex: 1 1 auto; min-height: 220px; border-radius: 12px; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; margin-bottom: 20px; }
.joris .portrait.has-photo { flex: none; aspect-ratio: 1; }
.joris .closed-box { width: 76%; height: auto; }
.joris h3 { font-size: clamp(28px, 1.2vw + 18px, 36px); margin-bottom: .15em; }
.role-line { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.joris p:last-child { color: var(--ink-2); font-size: 16px; margin: 0; }
.photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.role { background: var(--card); border: 1px solid rgba(25, 24, 22, .1); border-radius: 18px; padding: 12px 14px 16px; min-width: 0; }
.role-pic { height: 82px; border-radius: 10px; background: var(--paper-2); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 12px; }
.role-pic.bust { align-items: flex-end; }
/* A role that we build to measure: an open slot with a dashed edge instead of a standee. */
.role-pic:not(.bust) { background: transparent; border: 1.5px dashed rgba(25, 24, 22, .3); }
.role-pic .fig { height: 78px; }
.role-pic .pair { display: flex; align-items: flex-end; }
.role-pic .pair .fig { height: 70px; margin: 0 -8px; }
.role-pic .ic { width: 52px; height: 52px; margin: 0; }
.role-pic .ic .icon { width: 26px; height: 26px; }
.role h3 { font-size: 20px; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.role h3, .role p { overflow-wrap: anywhere; }
.role p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.role-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px; min-width: 0; }
.role-center .obj { width: 118px; height: auto; }
.role-center p { font: italic 400 24px/1.2 var(--serif); color: var(--kraft-ink); margin: 8px 0 0; }
.tag { display: inline-block; font: 700 11px/1 var(--sans); letter-spacing: .12em; padding: 5px 8px 4px; border-radius: 999px; background: var(--tape); color: #734D29; }
.team-note { max-width: 760px; color: var(--ink-2); }

/* Trust: the brain stays yours, the rules are built in, and what we do not do. */
.trust-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: 40px; align-items: start; }
.points { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.points div { border-top: 1px solid rgba(25, 24, 22, .16); padding-top: 14px; }
dt { font: 500 21px/1.25 var(--serif); margin-bottom: 4px; }
dd { margin: 0; color: var(--ink-2); font-size: 16px; }
.rules-h { font: 600 13px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--kraft-ink); margin: 34px 0 14px; }
.rules { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rules li { font: 600 14.5px/1.2 var(--sans); padding: 10px 15px; border-radius: 999px; background: var(--tape); border: 1px solid rgba(25, 24, 22, .2); color: var(--ink); }
.notdo { background: var(--paper-2); border-radius: 22px; padding: clamp(22px, 2.6vw, 32px); }
.notdo h3 { font-size: 24px; margin-bottom: 16px; }
.notdo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.notdo li { position: relative; padding-left: 36px; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.notdo li b { color: var(--ink); font-weight: 600; }
.notdo li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; border: 1.4px solid var(--ink); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7l6 6M13 7l-6 6' fill='none' stroke='%23191816' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/20px no-repeat; }

/* Lab projects. */
.projects { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
.proj { background: var(--card); border: 1px solid rgba(25, 24, 22, .1); border-radius: 22px; padding: 30px; position: relative; }
/* A strip of tape on each card, instead of a coloured bar that thinned out in the corners. */
.proj::before { content: ""; position: absolute; inset: -10px auto auto 28px; width: 76px; height: 22px; border-radius: 2px; transform: rotate(-3deg); opacity: .92; background: var(--kraft); }
.p-praktijk::before { background: var(--sage); } .p-rug::before { background: var(--coral); } .p-analyse::before { background: var(--cobalt); }
.proj p { color: var(--ink-2); }
.ptag { font: 600 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
/* Three cards while one waits off the page (site.config.json lab.hide). Side by side the rows of the cards line up
   (subgrid), so tags, titles, texts and links sit level. From 1280 px three across; from 861 to 1279 px two across
   and the third wide, title left and text right. Four cards keep the two by two above. */
@media (min-width: 861px) {
  .projects3 .proj { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .projects3 .more { justify-self: start; }
}
@media (min-width: 1280px) { .projects3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 861px) and (max-width: 1279.98px) {
  .projects3 .proj:last-child { grid-column: 1 / -1; grid-row: auto; grid-template: auto 1fr auto / minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 4vw, 48px); }
  .projects3 .proj:last-child .ptag { grid-area: 1 / 1; }
  .projects3 .proj:last-child h3 { grid-area: 2 / 1; }
  .projects3 .proj:last-child > p:not(.ptag) { grid-area: 1 / 2 / 3 / 3; }
  .projects3 .proj:last-child .more { grid-area: 3 / 2; }
}

/* Compare. */
.table-wrap { margin-top: 40px; overflow-x: auto; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 17px; }
.cmp th, .cmp td { text-align: left; padding: 15px 18px; border-bottom: 1px solid rgba(25, 24, 22, .12); vertical-align: top; }
.cmp thead th { font: 600 13px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cmp tbody th { font: 500 19px/1.3 var(--serif); width: 22%; }
.cmp td { color: var(--muted); width: 26%; }
.cmp .us, .cmp td:last-child { background: rgba(221, 183, 138, .22); color: var(--ink); font-weight: 500; }
.cmp thead .us { color: var(--kraft-ink); border-radius: 16px 16px 0 0; }
.cmp tbody tr:last-child td:last-child { border-radius: 0 0 16px 16px; }

/* Checks and the form panel. */
.checks { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 34px; color: var(--ink-2); }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l3 3l5-6.5' fill='none' stroke='%23191816' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; border: 1.4px solid var(--ink); }
.panel { background: var(--card); border: 1px solid rgba(25, 24, 22, .12); border-radius: 22px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 30px 60px -40px rgba(25, 24, 22, .35); }
.panel-h { font-size: 28px; }

/* Forms. */
.form { display: grid; gap: 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label, .chips legend { font-size: 14px; font-weight: 600; color: var(--ink); }
.req { color: var(--err); }
.opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea { width: 100%; font: 400 17px/1.4 var(--sans); color: var(--ink); background: var(--paper); border: 1.5px solid var(--field); border-radius: 12px; padding: 12px 14px; transition: border-color .15s, box-shadow .15s; }
.field input::placeholder, .field textarea::placeholder { color: #6E6A62; }
.field textarea { resize: vertical; min-height: 88px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(47, 91, 227, .18); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--err); }
.consent input[aria-invalid="true"] { outline: 2px solid var(--err); outline-offset: 2px; }
.field-err { margin: 0; font-size: 14px; line-height: 1.4; color: var(--err); }
.field-help { margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.chips { border: 0; padding: 0; margin: 0; min-width: 0; }
.chips legend { padding: 0; margin-bottom: 10px; }
.chips > div { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--field); font-size: 15px; background: var(--paper); transition: background .15s, border-color .15s, color .15s; }
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2.5px solid var(--cobalt); outline-offset: 2px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cobalt); flex: none; }
.form-privacy { margin: 0; font-size: 14px; color: var(--ink-2); }
/* The optional part of the call form, folded away. */
.more-info { border-top: 1px solid rgba(25, 24, 22, .14); border-bottom: 1px solid rgba(25, 24, 22, .14); }
.more-info summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; font-size: 15px; font-weight: 600; }
.more-info summary::-webkit-details-marker { display: none; }
.more-info summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.4px solid currentColor; background: linear-gradient(currentColor, currentColor) center/10px 1.6px no-repeat, linear-gradient(currentColor, currentColor) center/1.6px 10px no-repeat; transition: transform .25s; }
.more-info[open] summary::after { transform: rotate(45deg); }
.more-in { display: grid; gap: 18px; padding: 6px 0 22px; }
.form-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.form-note { margin: 0; font-size: 14px; color: var(--muted); }
.form-msg { margin: 0; font-size: 15px; min-height: 1px; }
.form-msg.err { color: var(--err); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form.busy button { opacity: .6; pointer-events: none; }

/* The dark section: abcMD's navy block with waves. */
.dark { position: relative; background: var(--navy); color: var(--on-navy); padding: clamp(80px, 9vw, 130px) 0; margin-top: 70px; }
.dark .wave { position: absolute; left: 0; width: 100%; height: clamp(36px, 5vw, 80px); color: var(--navy); }
.dark .wave-top { bottom: 100%; margin-bottom: -1px; }
.dark .wave-bottom { top: 100%; margin-top: -1px; }
.dark h1, .dark h2 { color: #fff; }
.dark h1 em, .dark h2 em { color: var(--kraft); }
.dark .eyebrow { color: var(--kraft); }
.dark .lead { color: var(--on-navy-2); }
.george-note { display: flex; gap: 18px; align-items: flex-end; margin-top: 30px; padding: 18px 20px 0; border-radius: 22px; background: var(--navy-2); }
.george-note .fig { --h: 150px; flex: none; margin-bottom: 0; }
.george-note p { font-size: 15px; color: var(--on-navy-2); padding-bottom: 18px; }
.dark .panel { background: var(--navy-2); border-color: rgba(255, 255, 255, .08); box-shadow: none; }
.dark .panel-h { color: #fff; }
.dark .field label, .dark .chips legend { color: var(--on-navy); }
.dark .field input, .dark .field textarea { background: transparent; color: #fff; border: 0; border-bottom: 1.5px solid rgba(244, 238, 226, .45); border-radius: 0; padding-left: 0; }
.dark .field input::placeholder, .dark .field textarea::placeholder { color: rgba(244, 238, 226, .62); }
.dark .field input:focus, .dark .field textarea:focus { border-bottom-color: var(--mustard); border-bottom-width: 2px; box-shadow: none; }
.dark .field input[aria-invalid="true"], .dark .field textarea[aria-invalid="true"] { border-bottom-color: #FFB49C; border-bottom-width: 2px; }
.dark .field-err { color: #FFB49C; }
.dark .field-help, .dark .opt { color: var(--on-navy-2); }
.dark :focus-visible, .dark .chip input:focus-visible + span { outline-color: var(--sky); }
.dark .chip span { background: transparent; color: var(--on-navy); border-color: rgba(244, 238, 226, .6); }
.dark .chip input:checked + span { background: var(--mustard); color: var(--navy); border-color: var(--mustard); }
.dark .consent, .dark .form-note, .dark .form-privacy { color: var(--on-navy-2); }
.dark .consent a, .dark .form-privacy a { color: #fff; }
.dark .more-info { border-color: rgba(244, 238, 226, .2); color: var(--on-navy); }
.dark .btn { background: var(--mustard); border-color: var(--mustard); color: var(--navy); }
.dark .btn:hover { background: #F2C95E; border-color: #F2C95E; box-shadow: 0 10px 26px -14px rgba(233, 185, 73, .8); }
.dark .btn-kraft { background: var(--kraft); border-color: var(--kraft); color: var(--ink); }
.dark .btn-kraft:hover { background: var(--tape); border-color: var(--tape); box-shadow: 0 10px 26px -14px rgba(221, 183, 138, .8); }
.dark .form-msg.err { color: #FFB49C; }
.expect-h { font-size: 26px; margin-top: 44px; color: #fff; }
.expect { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.expect li { border-top: 1px solid rgba(244, 238, 226, .16); padding-top: 14px; }
.expect h3, .expect h4 { font: 400 20px/1.25 var(--serif); margin: 0 0 4px; color: #fff; }
.expect p { margin: 0; color: var(--on-navy-2); font-size: 15.5px; }
.book-page { margin-top: 0; padding-top: clamp(56px, 7vw, 96px); }
.book-page h1 { font-size: clamp(38px, 3.6vw + 12px, 64px); }
/* /kennismaken/: the form right of the heading; on a phone straight after it, before George. */
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "text panel" "more panel"; grid-template-rows: auto 1fr; column-gap: clamp(32px, 6vw, 96px); align-items: start; }
.book-text { grid-area: text; }
.book-grid > .panel { grid-area: panel; }
.book-more { grid-area: more; }

/* Your first step: both ways in, side by side. George and Harold stand behind their card. */
.choose { padding-block: clamp(72px, 8vw, 112px); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(84px, 9vw, 112px); }
.choice { position: relative; display: flex; flex-direction: column; background: var(--navy-2); border: 1px solid rgba(255, 255, 255, .08); border-radius: 22px; padding: clamp(24px, 3vw, 40px); }
.choice-fig { position: absolute; right: clamp(20px, 3vw, 40px); bottom: 100%; line-height: 0; }
.choice-fig .fig { height: 104px; }
.choice h3 { color: #fff; font-size: clamp(26px, 1.2vw + 18px, 34px); margin-bottom: .35em; }
.choice > p { color: var(--on-navy-2); margin-bottom: 0; }
.choice .checks { margin: 20px 0 30px; }
.choice .checks li { color: var(--on-navy); }
.choice .btn { margin-top: auto; align-self: flex-start; }

/* FAQ, closing, footer. */
.faq { padding: clamp(110px, 12vw, 170px) 0 clamp(56px, 7vw, 96px); }
.faq-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq-head h2 { margin-bottom: 0; font-size: clamp(32px, 2.2vw + 14px, 46px); }
.qas { border-top: 1px solid rgba(25, 24, 22, .16); }
.qa { border-bottom: 1px solid rgba(25, 24, 22, .16); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 22px 0; font: 400 clamp(20px, .6vw + 16px, 24px)/1.3 var(--serif); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.4px solid var(--ink); background: linear-gradient(var(--ink), var(--ink)) center/12px 1.6px no-repeat, linear-gradient(var(--ink), var(--ink)) center/1.6px 12px no-repeat; transition: transform .25s; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { color: var(--ink-2); max-width: 680px; padding-bottom: 14px; }
.closing { padding-top: clamp(40px, 6vw, 80px); }
.s-close { --sh: 200px; margin-top: 48px; }
.faq.band { padding-top: clamp(120px, 13vw, 180px); padding-bottom: 0; }
.faq.band > .wrap:last-child { padding-bottom: clamp(56px, 6vw, 88px); }
.closing.band { padding-top: clamp(56px, 7vw, 96px); }
.s-close .shipped { left: 50%; transform: translateX(-50%); width: calc(420px * var(--k)); height: auto; }
.foot { padding: clamp(56px, 7vw, 88px) 0 32px; }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 32px; }
.foot h2 { font: 600 13px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot ul a { text-decoration: none; color: var(--ink-2); font-size: 15.5px; }
.foot ul a:hover { color: var(--ink); text-decoration: underline; }
.foot-brand p { margin-top: 16px; color: var(--ink-2); max-width: 320px; font: italic 400 19px/1.4 var(--serif); }
.foot-small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(25, 24, 22, .12); font-size: 13.5px; color: var(--muted); }
.foot-small p { margin: 0; }

/* Phones: the bar with both first steps (site.js shows it). */
.cta-bar { display: none; }

/* Sub pages. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.hero-sub .split { align-items: start; text-align: left; }
.hero-sub h1 { font-size: clamp(38px, 4vw + 12px, 68px); }
.s-sub { --sh: 270px; margin-top: 48px; }
.s-sub .analyse { left: 6%; width: calc(340px * var(--k)); height: auto; }
.s-sub .fig { left: 40%; }
.howto { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.howto li { border-top: var(--line) solid var(--ink); padding-top: 18px; }
.howto .n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--kraft); border: var(--line) solid var(--ink); font: 500 17px/1 var(--serif); margin-bottom: 14px; }
.howto h3 { font-size: 22px; }
.howto p { color: var(--ink-2); font-size: 16px; margin: 0; }
.thanks { padding: clamp(48px, 7vw, 96px) 0; }
.thanks-art { display: flex; justify-content: center; margin-bottom: 24px; border-bottom: var(--line) solid var(--ink); }
.thanks h1 { margin-top: 24px; }
.howto3 { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; margin: 36px 0 24px; }
.howto3 h2 { font-size: 21px; margin: 0 0 6px; }
.thanks-next { margin: 28px 0 0; font-weight: 600; }
.doc { padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 8vw, 112px); }
.doc h2 { font-size: 28px; margin-top: 1.6em; }
.doc p { color: var(--ink-2); }

/* Reveal: scenes arrive when their band scrolls in (site.js adds .in). */
.js .band .scene > * { opacity: 0; translate: 0 18px; transition: opacity .7s ease, translate .9s cubic-bezier(.2, .8, .2, 1); }
.js .band.in .scene > * { opacity: 1; translate: 0 0; }
.js .band.in .scene > *:nth-child(2) { transition-delay: .08s; } .js .band.in .scene > *:nth-child(3) { transition-delay: .16s; }
.js .band.in .scene > *:nth-child(4) { transition-delay: .24s; } .js .band.in .scene > *:nth-child(5) { transition-delay: .32s; }
.js .band.in .scene > *:nth-child(6) { transition-delay: .4s; }
.js .hero .scene > * { opacity: 1; translate: 0 0; }

/* Smaller screens. */
@media (max-width: 1099.98px) {
  .nav { display: none; }
  .menu { display: block; }
  .top-act { margin-left: auto; }
  .proof-list { grid-template-columns: 1fr 1fr; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .steps4 { grid-template-columns: 1fr 1fr; gap: 48px 28px; }
  .flow4 > .wrap:last-child { padding-bottom: clamp(56px, 7vw, 88px); }
  .step4 .scene { --k: .66; }
  .step4 .scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: var(--line) solid var(--ink); border-radius: 2px; }
  .team-grid { grid-template-columns: 1fr; }
  .joris { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 24px; align-items: start; }
  .joris .portrait { grid-row: span 3; min-height: 200px; margin: 0; }
  .joris h3, .joris .role-line, .joris p:last-child { grid-column: 2; }
  .trust-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* One column: the scene without lamp and tree, so Harold never stands in the tree. */
  .s-hero { --k: .86; }
  .s-hero .lamp, .s-hero .tree { display: none; }
  .s-hero .h-exec { left: 4%; }
  .s-hero .hero-box { left: 21%; }
  .s-hero .h-george { left: 62%; }
  .s-hero .h-harold { left: 77%; }
}
@media (max-width: 860px) {
  :root { --k: .74; }
  .split, .projects, .faq-in, .choices { grid-template-columns: minmax(0, 1fr); }
  .deal-list { grid-template-columns: 1fr; gap: 0; }
  .deal-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding: 20px 0 22px; }
  .deal-list .sticker { grid-row: span 2; }
  .deal-list h3 { margin: 6px 0 6px; }
  .howto { grid-template-columns: 1fr 1fr; }
  .s-hero { --k: .74; }
  .s-hero .h-exec { left: 0; }
  .s-hero .hero-box { left: 17%; }
  .s-hero .h-george { left: 58%; }
  .s-hero .h-harold { left: 73%; }
  .book-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "panel" "more"; grid-template-rows: none; }
  .book-grid > .panel { margin-top: 28px; }
  .book-more { margin-top: 8px; }
  .choices { gap: 96px; }
  /* The bar with both first steps, once the hero buttons are scrolled past (site.js adds .on). */
  .cta-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid rgba(25, 24, 22, .14); box-shadow: 0 -12px 30px -24px rgba(25, 24, 22, .5); transform: translateY(110%); visibility: hidden; transition: transform .25s, visibility 0s linear .25s; }
  .cta-bar.on { transform: none; visibility: visible; transition: transform .25s; }
  .cta-bar .btn { min-width: 0; min-height: 46px; padding: 8px 10px; font-size: 15px; line-height: 1.15; }
  body.home { padding-bottom: 72px; }
}
@media (max-width: 600px) {
  :root { --k: .52; --band: 64px; }
  .lang { display: none; }
  .top-act { gap: 6px; }
  .top-act .btn-sm { padding: 8px 14px; font-size: 14px; }
  .btn-sm .l { display: none; } .btn-sm .s { display: inline; }
  /* Each sentence of the promise on a line of its own, like on a laptop. */
  .hero-text h1 { font-size: clamp(27px, 8.6vw, 40px); }
  .hero-text h1 em { display: block; }
  .idea-box { padding: 6px 6px 8px 16px; border-radius: 22px; }
  .idea-box input { font-size: 16px; padding: 12px 10px 8px 0; }
  .idea-foot { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .idea-foot .micro { text-align: center; padding-right: 10px; }
  .proof-list { gap: 22px 18px; }
  .proof-list span { font-size: 14px; }
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tr { border: 1px solid rgba(25, 24, 22, .12); border-radius: 18px; margin-bottom: 10px; overflow: hidden; background: var(--card); }
  .cmp tbody th { width: auto; border-bottom: 0; padding: 12px 14px 4px; }
  .cmp td { width: auto; border-bottom: 0; padding: 5px 14px 6px; display: grid; grid-template-columns: 104px 1fr; gap: 8px; line-height: 1.45; }
  .cmp td::before { content: attr(data-label); font: 600 11px/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .cmp td:last-child { padding: 8px 14px 10px; border-radius: 0; }
  .cmp tbody tr:last-child td:last-child { border-radius: 0; }
  .brand { font-size: 22px; }
  .grid2, .howto, .howto3, .foot-in, .points { grid-template-columns: 1fr; }
  /* Services on a phone: icon left, text right, one card per row. */
  .cards { grid-template-columns: 1fr; gap: 10px; margin: 32px 0 24px; }
  .card { gap: 16px; padding: 18px 18px 18px 16px; }
  .card .ic { width: 46px; height: 46px; margin-top: 2px; }
  .card .ic .icon { width: 24px; height: 24px; }
  .card h3 { font-size: 20px; margin: 8px 0 .25em; }
  .card p { font-size: 15px; }
  .steps4 { grid-template-columns: 1fr; gap: 32px; }
  .step4-text { padding-bottom: 18px; }
  .step4 .scene { --k: .54; }
  .s-hero { --sh: 340px; --k: .52; }
  .s-hero .h-exec { left: -2%; }
  .s-hero .hero-box { left: 19%; width: calc(440px * var(--k)); }
  .s-hero .h-george { left: 61%; }
  .s-hero .h-harold { left: 77%; }
  .cmp { font-size: 15px; }
  .cmp tbody th { font-size: 17px; }
  .george-note .fig { --h: 120px; }
  /* Team on a phone (George, 2026-10-05: figures you can actually see). Joris on top, then the roles two per
     row with the brain first. The build sets --h inline on every figure, so height is set here directly. */
  .joris { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "pic name" "pic role" "bio bio"; column-gap: 16px; padding: 14px; }
  .joris .portrait { grid-area: pic; height: 104px; min-height: 0; margin: 0; }
  .joris .closed-box { width: 86%; }
  .joris h3 { grid-area: name; align-self: end; font-size: 28px; }
  .joris .role-line { grid-area: role; align-self: start; margin: 0; }
  .joris p:last-child { grid-area: bio; margin-top: 14px; font-size: 15px; overflow-wrap: anywhere; }
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .role { padding: 12px 12px 14px; }
  .role-pic { height: 74px; margin-bottom: 10px; }
  .role-pic .fig { height: 70px; }
  .role-pic .pair .fig { height: 62px; margin: 0 -9px; }
  .role-pic .ic { width: 46px; height: 46px; }
  .role h3 { font-size: 18px; }
  .role p { font-size: 14px; }
  .role-center { grid-column: 1 / -1; order: -1; flex-direction: row; gap: 14px; padding: 4px 0 6px; }
  .role-center .obj { width: 76px; }
  .role-center p { margin: 0; }
  .choice-fig .fig { height: 92px; }
  .faq-in { gap: 8px; }
}
/* The header on the smallest phones: the logo box keeps its size and the menu stays on screen. */
@media (max-width: 380px) {
  .top-in { gap: 8px; }
  .brand { font-size: 19px; gap: 6px; }
  .brand .mark { width: 24px; height: 24px; }
  .top-act { gap: 2px; }
  .top-act .btn-sm { padding: 7px 11px; font-size: 13.5px; min-height: 38px; }
  .s-hero { --k: .46; }
  .s-hero .h-exec { display: none; }
  .s-hero .hero-box { left: -2%; width: calc(430px * var(--k)); }
  .s-hero .h-george { left: 58%; }
  .s-hero .h-harold { left: 77%; }
  .role-pic .pair .fig { height: 60px; }
}
/* Page zoom on a small phone (150 percent on 320 px is 213 css px): the scene a size smaller, Harold against the
   right edge, and the service cards stacked so a long word never pushes them out. The lab cards the same: less
   padding, a long word may break, and the link wraps like text so its arrow stays inside. */
@media (max-width: 300px) {
  .s-hero { --k: .38; }
  .s-hero .h-george { left: 50%; }
  .s-hero .h-harold { left: auto; right: -3%; }
  .card { display: block; }
  .card .ic { margin: 0 0 12px; }
  .card h3, .card p { overflow-wrap: anywhere; }
  .proj { padding: 26px 18px 22px; }
  .proj h3, .proj p { overflow-wrap: anywhere; hyphens: auto; }
  .proj .nobr { white-space: normal; }
  .proj .more { display: inline; }
  .field input, .field textarea { min-width: 0; }
}
/* The hero figures around the open box (animation team, review/06-animatie-bouw.md ronde 2): George never in front of
   the box, the woman and Harold clear of it, measured on the drawn pixels (anim/test/scene-fit.mjs). Only places. */
@media (min-width: 381px) and (max-width: 480px) { .s-hero .hero-box { left: 15%; width: calc(400px * var(--k)); } .s-hero .h-george { left: 64%; } .s-hero .h-harold { left: 79%; } }
@media (min-width: 481px) and (max-width: 600px) { .s-hero .hero-box { left: 17%; width: calc(420px * var(--k)); } .s-hero .h-george { left: 62.5%; } .s-hero .h-harold { left: 78%; } }
@media (min-width: 601px) and (max-width: 767.98px) { .s-hero .h-exec { left: -2%; } .s-hero .hero-box { left: 15%; width: calc(440px * var(--k)); } .s-hero .h-george { left: 63%; } .s-hero .h-harold { left: 78.5%; } }
@media (min-width: 861px) and (max-width: 1099.98px) { .s-hero .h-george { left: 63%; } .s-hero .h-harold { left: 78%; } }
/* Point 10: from 1100 to 1279 px the line next to the kraft button would become a narrow column; it goes below. */
@media (min-width: 1100px) and (max-width: 1279.98px) { .hero-or { flex-wrap: wrap; } .hero-or .micro { flex: 1 1 100%; max-width: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .band .scene > *, .js .s-hero .rise { opacity: 1; translate: none; transition: none; animation: none; }
  .btn, .card, .more span, .cta-bar, .cta-bar.on { transition: none; }
}