/* domidok.com
 *
 * One stylesheet for the site and for the pages the api worker renders
 * (dossier tracker, vakman offer, partner portal). The font comes from this
 * domain: the privacy page says no visitor data leaves for a font host, and this
 * is the line that makes it true.
 *
 * Colour roles. The palette block is written by build.py (option 1 dokgroen by
 * default, option 2 baksteen with --palet=baksteen). Brand carries the actions and
 * the icons. Deep is the one dark surface. Licht is the accent on dark only. The
 * page is kalk; white panels and cards sit on it, inset from the edge of the
 * screen. Hairlines are ink at 10 percent. No other colours.
 */

@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hankengrotesk-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap; }

/* palette:start */
:root{--brand:#0D4A40;--door:#8FD3B6;--deep:#0D4A40;--ink:#0F1F1A;--kalk:#F2F4F0;--licht:#8FD3B6;--paper:#ffffff;
  --brand-soft:rgba(13,74,64,.09);--brand-line:rgba(13,74,64,.28);--deep-soft:rgba(13,74,64,.08);
  --ink-2:rgba(15,31,26,.74);--ink-3:rgba(15,31,26,.56);--line:rgba(15,31,26,.10);--line-2:rgba(15,31,26,.18);--shade:rgba(15,31,26,.06);--drop:rgba(15,31,26,.36)}
/* palette:end */

:root {
  --sans: "Hanken Grotesk", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --card: var(--paper);          /* a card on the page; inside a white panel it turns kalk */
  --focus: var(--brand);
  --lift: 0 1px 2px var(--shade), 0 22px 44px -26px var(--line-2);
  --float: 0 2px 6px var(--shade), 0 32px 64px -30px var(--drop);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.625, .05, 0, 1);  /* the long moves: a photo, the header, a panel that opens */
  --r-xl: 28px;
  --r-lg: 20px;
  --r: 14px;
  --wrap: 1320px;
  --gut: clamp(16px, 4vw, 40px);
  --inset: 10px;                 /* the panels stand this far from the edge of the screen */
  --top-pad: 20px;
  --top-h: 80px;                 /* the header: its padding plus the pill */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--kalk); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { background: color-mix(in srgb, var(--brand) 18%, transparent); }
img::selection { background: transparent; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
picture { display: block; }
[hidden] { display: none !important; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
p { margin: 0; text-wrap: pretty; }
b, strong { font-weight: 600; }

h1, h2, h3, .h3 { margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font-weight: 400; font-size: clamp(2.75rem, 6vw, 5.25rem); line-height: .98; letter-spacing: -.04em; }
h2 { font-weight: 400; font-size: clamp(2.125rem, 4.4vw, 4rem); line-height: 1.02; letter-spacing: -.035em; }
h3, .h3 { font-weight: 500; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.012em; }
.lede { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.55; color: var(--ink-2); max-width: 56ch; }
.muted { color: var(--ink-3); }
.small { font-size: .88rem; }
.mono { font-family: var(--mono); font-size: .9em; font-weight: 500; font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: calc(760px + 2 * var(--gut)); }
.stack { display: grid; gap: 24px; align-content: start; }
.stack-lg { display: grid; gap: clamp(36px, 4.5vw, 56px); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }

.sr, .file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* icons: Lucide, one stroke for the whole site */
.ic { width: 20px; height: 20px; flex: none; display: block; }
.ibox { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand); }
.ibox.sm { width: 36px; height: 36px; border-radius: 10px; }
.ibox.sm .ic { width: 18px; height: 18px; }
.ibox.lg { width: 56px; height: 56px; border-radius: 16px; }
.ibox.lg .ic { width: 26px; height: 26px; }

/* ---------------------------------------------------------------- header */
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 999px; font-weight: 500; text-decoration: none; }
.skip:focus { top: 12px; color: var(--paper); }
.demobar { position: relative; z-index: 51; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0;
  padding: 8px var(--gut); background: var(--ink); color: var(--paper); font-size: .875rem; text-align: center; }
.demobar .ic { width: 16px; height: 16px; }

/* the header is a pill that floats over the page */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; padding: var(--top-pad) var(--gut) 0; pointer-events: none;
  transition: transform .55s var(--ease-io); }
.top.away { transform: translateY(calc(-100% - 40px)); }
.top .wrap { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 20px; max-width: 1240px; height: calc(var(--top-h) - var(--top-pad));
  padding: 0 8px 0 22px; border-radius: 999px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: 0 1px 2px var(--shade); transition: box-shadow .3s ease, background-color .3s ease; }
.top.scrolled .wrap { background: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: 0 1px 2px var(--shade), 0 18px 40px -24px var(--drop); }
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.logo { display: block; height: 26px; width: auto; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav > a, .mm > a { padding: 9px 14px; border-radius: 999px; color: var(--ink-2); font-weight: 500; font-size: .97rem; text-decoration: none;
  transition: background-color .2s ease, color .2s ease; }
.nav > a:hover, .mm > a:hover { color: var(--ink); background: var(--shade); }
.nav > a[aria-current="page"], .mm > a[aria-current="page"] { color: var(--ink); background: var(--shade); }
.top .btn.sm { min-height: 44px; padding-inline: 20px; }
.burger { display: none; margin-left: auto; }
.burger > summary { list-style: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px;
  background: var(--shade); cursor: pointer; color: var(--ink); }
.burger > summary::-webkit-details-marker { display: none; }
.sheet { position: absolute; z-index: 2; left: 0; right: 0; top: calc(100% + 8px); display: grid; gap: 2px; padding: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  /* the second shadow dims the page under the open menu; the clip keeps the header itself undimmed */
  box-shadow: var(--lift), 0 0 0 100vmax color-mix(in srgb, var(--ink) 32%, transparent);
  clip-path: inset(-8px -100vmax -100vmax -100vmax); }
.sheet a { padding: 13px 14px; border-radius: 12px; color: var(--ink); font-weight: 500; font-size: 1.06rem; text-decoration: none; }
.sheet a:hover { background: var(--shade); }
.sheet .btn { margin-top: 6px; justify-content: center; color: #fff; }
.sheet { max-height: calc(100svh - var(--top-h) - 24px); overflow-y: auto; overscroll-behavior: contain; }
.sh-x summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 13px 14px;
  border-radius: 12px; color: var(--ink); font-weight: 500; font-size: 1.06rem; cursor: pointer; }
.sh-x summary::-webkit-details-marker { display: none; }
.sh-x summary:hover { background: var(--shade); }
.sh-x .chev { width: 18px; height: 18px; color: var(--ink-3); transition: transform .3s var(--ease); }
.sh-x[open] .chev { transform: rotate(180deg); }
.sh-sub { display: grid; gap: 2px; padding: 0 0 8px; }
.sheet .sh-sub a { display: flex; align-items: center; gap: 12px; padding: 7px 14px; font-size: 1rem; }
.sh-sub a .tag { margin-left: auto; }
.sheet .sh-sub > a:last-child { padding-left: 62px; color: var(--brand); }

/* the problems menu: categories, their first problems, and what comes later */
.mm { display: flex; align-items: center; }
.mm-t { display: grid; place-items: center; width: 30px; height: 36px; margin-left: -8px; padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--ink-3); cursor: pointer; transition: color .2s ease, background-color .2s ease; }
.mm-t:hover { color: var(--ink); background: var(--shade); }
.mm-t .ic { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.mm.open .mm-t { color: var(--ink); }
.mm.open .mm-t .ic { transform: rotate(180deg); }
.mm-t:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mm-p { position: absolute; z-index: 3; left: 0; right: 0; top: calc(100% + 8px); display: grid; gap: 14px; padding: 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--float);
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .2s ease, transform .3s var(--ease), visibility 0s linear .3s; }
.mm-p::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px; } /* a bridge over the gap */
.mm.open .mm-p { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .3s var(--ease), visibility 0s; }
.mm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mm-col { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 6px; }
.mm-h { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; color: var(--ink); text-decoration: none;
  transition: background-color .2s ease; }
.mm-h:hover { background: var(--shade); }
.mm-h b { font-weight: 600; font-size: 1.02rem; }
.mm-h .tag { margin-left: auto; }
.mm-col ul { list-style: none; margin: 0; padding: 0 0 0 48px; display: grid; }
.mm-col li a { display: block; padding: 7px 10px; border-radius: 10px; color: var(--ink-2); font-size: .95rem; text-decoration: none;
  transition: background-color .2s ease, color .2s ease; }
.mm-col li a:hover { color: var(--ink); background: var(--shade); }
.mm-col li a.mm-all { color: var(--brand); font-weight: 500; }
.mm-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 18px;
  border-radius: 18px; background: var(--kalk); }
.mm-foot p { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: .95rem; }
.mm-foot p .ic { flex: none; width: 18px; height: 18px; color: var(--brand); }
.mm-foot .btn { background: var(--paper); }

/* --------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 24px; border-radius: 999px;
  border: 1px solid transparent; background: var(--brand); color: #fff; font: 500 1rem/1.2 var(--sans); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.btn:hover { color: #fff; background: color-mix(in srgb, var(--brand) 86%, #000); }
/* the arrow sits in its own circle at the end of the button */
.btn .go { width: 32px; height: 32px; padding: 8px; margin-right: -16px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.btn.lg { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.btn.lg .go { width: 36px; height: 36px; padding: 9px; margin-right: -18px; }
.btn.sm { min-height: 40px; padding: 0 18px; font-size: .95rem; }
.btn.sm .go { width: 28px; height: 28px; padding: 7px; margin-right: -12px; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { color: var(--ink); background: var(--shade); }
.btn.ghost .go { background: var(--shade); }
.btn.light { background: var(--paper); color: var(--ink); }
.btn.light:hover { color: var(--ink); background: var(--kalk); }
.btn.light .go { background: var(--brand); color: #fff; }
.btn[disabled] { opacity: .6; cursor: progress; }
.go { flex: none; display: inline-grid; overflow: hidden; width: 18px; height: 18px; transition: background-color .25s ease, color .25s ease; }
.go > svg { grid-area: 1 / 1; width: 100%; height: 100%; }
.go > .g2 { transform: translateX(-170%); }
@media (prefers-reduced-motion: no-preference) {
  .go > svg { transition: transform .5s var(--ease-io); }
  :is(a, button):is(:hover, :focus-visible) .go > .g1 { transform: translateX(170%); }
  :is(a, button):is(:hover, :focus-visible) .go > .g2 { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .go > .g2 { display: none; } }

/* tags: a status, a trade, "nog niet" */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; flex: none; justify-self: start;
  background: var(--deep-soft); color: var(--deep); font-size: .82rem; font-weight: 500; line-height: 1.35; white-space: nowrap; }
.tag.off, .tag.no { background: var(--shade); color: var(--ink-3); }
.tag.now, .tag.wait, .tag.y { background: var(--brand-soft); color: var(--brand); }
.tag.plain { background: transparent; padding-inline: 0; color: var(--ink-3); }
.tag .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* who does a step: you, Domidok, our partner */
.who { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px;
  font-size: .84rem; font-weight: 500; white-space: nowrap; align-self: flex-start; }
.who .ic { width: 15px; height: 15px; }
.who-jij { background: var(--shade); color: var(--ink); }
.who-dd { background: var(--brand-soft); color: var(--brand); }
.who-vk { background: color-mix(in srgb, var(--door) 24%, transparent); color: var(--deep); }

/* lists */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks li > .ic { width: 18px; height: 18px; margin-top: 4px; color: var(--brand); }
.checks.no li > .ic { color: var(--ink-3); }
.dots { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--ink-2); }
.dots li::marker { color: var(--brand); }
ol.ask { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: ask; }
ol.ask li { display: flex; gap: 12px; align-items: flex-start; counter-increment: ask; color: var(--ink-2); }
ol.ask li::before { content: counter(ask); flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px;
  border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--ink); font-size: .84rem; font-weight: 600; }
ul.rows { list-style: none; margin: 0; padding: 0; }
ul.rows li { padding: 12px 0; border-bottom: 1px solid var(--line); }
ul.rows li:last-child { border-bottom: 0; }

/* notes and notices */
.note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r);
  background: var(--deep-soft); color: var(--ink); font-size: .96rem; }
.note > .ic { color: var(--deep); margin-top: 2px; }
.note.warn { background: var(--brand-soft); }
.note.warn > .ic { color: var(--brand); }
.note .nb { display: grid; gap: 8px; min-width: 0; }
.note .nb p { margin: 0; }
.note .dots { color: var(--ink); }
a[href^="tel:"] { white-space: nowrap; }
.notice { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--deep-soft); color: var(--ink); font-size: .96rem; }
.notice.warn { background: var(--brand-soft); }
.notice.err { background: var(--brand-soft); border: 1px solid var(--brand-line); font-weight: 500; }
mark.ph { background: var(--brand-soft); color: var(--brand); padding: 1px 6px; border-radius: 6px; font-weight: 500; }
.sample { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: .82rem; }
.sample .ic { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ bands */
.band { padding-block: clamp(64px, 9vw, 136px); }
.band.tight { padding-block: clamp(36px, 4.5vw, 64px); }
.band:not(.paper, .deep, .end) + .band:not(.paper, .deep, .end) { padding-top: 0; }
/* a white panel and the one dark panel: both stand off the edge of the screen like the hero */
.band.paper, .band.deep, .band.end, .band.lost { margin: var(--inset); border-radius: var(--r-xl); }
.band.paper { background: var(--paper); --card: var(--kalk); }
.band.deep { background: var(--deep); color: #fff; --focus: var(--licht); }
.band.deep h2, .band.deep h3 { color: #fff; }
.band.deep .lede { color: rgba(255, 255, 255, .72); }
.band.deep .ibox { background: rgba(255, 255, 255, .08); color: var(--licht); }
.band.deep .who { background: rgba(255, 255, 255, .1); color: #fff; }
.band.deep .who-dd, .band.deep .who-vk { color: var(--licht); }

.shead { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.split .shead, .stack .shead, .stack-lg .shead, .formgrid .shead, .dsplit .shead { margin-bottom: 0; }
.shead .btns { margin-top: 8px; }
.shead.wide { max-width: none; }
@media (min-width: 961px) {
  .shead.wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px 64px; align-items: end; }
  .shead.wide .lede { padding-bottom: .35em; }
}
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split.start, .split.pinned { align-items: start; }
.split.pinned > .shead { position: sticky; top: calc(var(--top-h) + 24px); }

/* ------------------------------------------------------------------- hero */
/* the banner: a real house, and the promise with the search on a white panel. Three layouts until Sam picks one (sa-x39):
   a, the photo stands under the header and the panel steps off its lower edge; b, the photo runs up behind the header,
   and the panel and one note from a dossier sit on it; c, the photo takes the right of the screen and the panel lies over
   its left edge. The pill never ends on the edge of the photo: it stands clear of it, or inside it. */
.hero { position: relative; z-index: 2; }
.banner { position: relative; margin-inline: var(--inset); }
.bn-ph { display: block; overflow: hidden; border-radius: var(--r-xl); background: var(--deep); }
.bn-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bn-in { position: relative; }
.bn-panel { position: relative; z-index: 1; display: grid; gap: 22px; max-width: 590px; padding: clamp(28px, 3vw, 44px);
  border-radius: var(--r-xl); background: var(--paper); box-shadow: var(--float); }
.bn-panel h1 { font-size: clamp(2.75rem, 5.2vw, 5.25rem); line-height: .95; letter-spacing: -.045em; max-width: 10ch; }
.bn-panel .lede { color: var(--ink-2); max-width: 44ch; }
.bn-card { display: grid; gap: 14px; width: min(400px, 100%); margin: 0; padding: 18px 18px 18px 20px;
  border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--float); }
.bc-head { display: flex; align-items: center; gap: 12px; }
.bc-head > div { flex: 1; min-width: 0; }
.bc-ph { flex: none; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--kalk); }
.bc-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bc-call { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--r); background: var(--kalk); }
.bc-call .what { font-weight: 600; }
.bc-call .det { color: var(--ink-2); font-size: .95rem; line-height: 1.45; }
/* the photo from the top of the screen and the pill floats on it, so they never touch; the panel and the note on its lower edge */
.hero { margin-top: calc(-1 * var(--top-h)); }
.banner { display: grid; align-items: end; min-height: clamp(640px, 100svh, 1000px);
  padding-block: calc(var(--top-h) + clamp(100px, 14vh, 200px)) clamp(28px, 3vw, 44px); }
.banner .bn-ph { position: absolute; inset: var(--inset) 0 0; }
.bn-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.bn-in .bn-panel { flex: 0 1 590px; min-width: 0; }
.bn-in .bn-card { flex: none; width: 380px; }
.hero-in { display: grid; gap: clamp(48px, 6vw, 88px); padding-block: clamp(56px, 7vw, 104px) clamp(28px, 3.5vw, 48px); }
.hero-ask { display: grid; gap: 16px; min-width: 0; --focus: var(--brand); }
.hero-ask .sbox { min-height: 60px; border-radius: 999px; padding-inline: 22px; border-color: var(--line-2); background: var(--kalk); }
.hero-ask .sbox:focus-within { border-color: var(--brand); background: var(--paper); box-shadow: 0 0 0 4px var(--brand-soft); }
.ha-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.ha-note { flex: 1 1 200px; display: flex; gap: 8px; align-items: flex-start; color: var(--ink-3); font-size: .875rem; line-height: 1.45; }
.ha-note .ic { width: 17px; height: 17px; margin-top: 1px; color: var(--brand); }

/* every kind of problem, one photo card each: a name, what it covers, and whether we are still finding partners */
.cats { display: grid; gap: clamp(24px, 3vw, 36px); }
.cats-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 40px; }
.cats-head h2 { font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -.035em; line-height: 1.05; }
.cgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cgrid > li { min-width: 0; }
.ccard { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; padding: 8px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--paper); color: var(--ink); text-decoration: none;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease); }
.ccard:hover { color: var(--ink); border-color: var(--line-2); box-shadow: var(--lift); }
.cc-img { display: block; aspect-ratio: 16 / 10; border-radius: calc(var(--r-lg) - 6px); overflow: hidden; background: var(--brand-soft); }
.cc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-io); }
.ccard:hover .cc-img img { transform: scale(1.035); }
.cc-img.noimg { display: grid; place-items: center; }
.cc-b { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 18px 60px 14px 12px; }
.cc-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cc-t b { font-size: 1.1875rem; font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
.cc-t .tag { padding: 3px 9px; font-size: .8rem; }
.cc-m { color: var(--ink-3); font-size: .94rem; line-height: 1.45; }
.ccard > .go { position: absolute; right: 18px; bottom: 18px; width: 34px; height: 34px; padding: 8px; border-radius: 50%;
  background: var(--shade); transition: background-color .35s var(--ease), color .35s var(--ease); }
.ccard:hover > .go { background: var(--brand); color: #fff; }
.cats-f { color: var(--ink-2); font-size: .96rem; max-width: 52ch; }
.cats-f a { color: var(--brand); font-weight: 500; }

/* four promises, side by side under the hero */
.promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.promises li { display: grid; gap: 18px; align-content: start; padding-top: 24px; border-top: 1px solid var(--line); }
.promises li > div { display: grid; gap: 8px; }
.promises p { color: var(--ink-2); font-size: .97rem; }

/* one statement, inked word by word as it scrolls in */
.says { display: grid; gap: 36px; justify-items: start; }
.statement { max-width: 1080px; font-size: clamp(1.75rem, 3.6vw, 3.25rem); line-height: 1.16; letter-spacing: -.03em; color: var(--ink); }
.ink-on .w { color: color-mix(in srgb, var(--ink) 22%, transparent); transition: color .4s ease; }
.ink-on .w.on { color: var(--ink); }

/* the search: hidden until site.js runs */
.search { position: relative; display: grid; gap: 8px; }
.sbox { display: flex; align-items: center; gap: 10px; min-height: 52px; padding-inline: 16px; border: 1px solid var(--line-2);
  border-radius: var(--r); background: var(--paper); color: var(--ink-3); transition: border-color .2s ease, box-shadow .2s ease; }
.sbox:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.sbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 1rem var(--sans); padding: 14px 0; }
.sbox input::placeholder { color: var(--ink-3); }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.results li[aria-selected="true"] .prow { background: var(--brand-soft); }
.results .tag { margin-left: auto; }
.results .tag + .chev { margin-left: 0; }
.results .leeg { padding: 8px; color: var(--ink-2); font-size: .95rem; }
.search.float .results { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; padding: 8px;
  max-height: min(420px, 60vh); overflow-y: auto; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--float); }
.rl { display: grid; gap: 1px; }
.rl small { color: var(--ink-3); font-size: .84rem; font-weight: 400; }
.prow.meld b { color: var(--brand); }
.prow { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: var(--ink);
  font-weight: 500; text-decoration: none; }
.prow:hover { background: var(--shade); color: var(--ink); }
.prow > span:not(.ibox):not(.tag) { flex: 1; min-width: 0; }
.chev { width: 18px; height: 18px; color: var(--ink-3); margin-left: auto; }

.soon-l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.soon-l li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink-2); font-size: .92rem; background: var(--paper); }
.soon-l .ic { width: 17px; height: 17px; color: var(--ink-3); }

/* ---------------------------------------------- what do you see: photo tiles */
.ptiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ptiles > li { min-width: 0; }
.ptile { position: relative; isolation: isolate; display: block; height: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-lg);
  background: var(--deep); color: #fff; text-decoration: none; }
.ptile:hover { color: #fff; }
.ptile-img { position: absolute; inset: 0; z-index: -2; }
.ptile-img picture, .ptile-img img { width: 100%; height: 100%; }
.ptile-img img { object-fit: cover; transition: transform 1s var(--ease); }
.ptile::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 20, 17, 0) 42%, rgba(8, 20, 17, .74) 100%); }
.ptile:hover .ptile-img img { transform: scale(1.04); }
.ptile-b { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: 18px 16px 16px 20px; font-size: 1.1875rem; font-weight: 500; line-height: 1.2; letter-spacing: -.012em; }
.ptile-b .go { flex: none; width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; }
.ptile:hover .ptile-b .go { background: #fff; color: var(--ink); }
.ptile-img.noimg { display: grid; place-items: center; }
.ptile:has(.noimg) { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.ptile:has(.noimg)::after { display: none; }
.ptile:has(.noimg) .ptile-b .go { background: var(--shade); color: var(--ink); }
@media (min-width: 900px) {
  .ptiles.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ptiles.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ptiles.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 561px) and (max-width: 899px) { .ptile { aspect-ratio: 3 / 2; } }

/* a tab per category; without script every category shows under its own heading */
.picker { display: grid; gap: 20px; }
.ctabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ctab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 17px 9px 13px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--paper); color: var(--ink); font-size: .96rem; font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.ctab .ic { width: 18px; height: 18px; color: var(--brand); transition: color .2s ease; }
.ctab:hover { color: var(--ink); border-color: var(--brand); }
.ctab[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.ctab[aria-selected="true"] .ic { color: var(--door); }
.cpanel { display: grid; gap: 14px; }
.cp-h { font-size: 1.25rem; }
/* the last tile of a category: its own page, as wide as the row has room for */
.htile { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; gap: 16px 12px; height: 100%; min-height: 168px;
  padding: 22px; border-radius: var(--r-lg); background: var(--deep); color: #fff; text-decoration: none; transition: background-color .3s ease; }
.htile:hover { color: #fff; background: color-mix(in srgb, var(--deep) 92%, #fff); }
.htile .ibox { background: rgba(255, 255, 255, .08); color: var(--licht); }
.htile > .ibox { grid-area: 1 / 1; }
.htile > .tag { grid-area: 1 / 2; align-self: start; }
.ht-b { grid-area: 3 / 1; display: grid; gap: 6px; max-width: 44ch; }
.ht-b b { font-size: 1.1875rem; font-weight: 500; line-height: 1.2; letter-spacing: -.012em; }
.ht-b span { color: rgba(255, 255, 255, .72); font-size: .96rem; }
.htile > .go { grid-area: 3 / 2; align-self: end; width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.htile:hover > .go { background: #fff; color: var(--ink); }
.htile .tag.prep { background: rgba(143, 211, 182, .16); color: var(--licht); }
@media (min-width: 900px) {
  .ptiles.c4 > .s2 { grid-column: span 2; }
  .ptiles.c4 > .s3 { grid-column: span 3; }
  .ptiles.c4 > .s4 { grid-column: span 4; }
  .ptiles > .s4 .htile { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: auto; align-items: center; gap: 20px; min-height: 0; padding: 18px 20px; }
  .ptiles > .s4 .htile > * { grid-area: auto; align-self: center; }
}
@media (max-width: 899px) { .ptiles > .s2, .ptiles > .s4 { grid-column: 1 / -1; } }
/* a category we are still finding partners for */
.tag.prep { background: color-mix(in srgb, var(--door) 26%, transparent); color: var(--deep); }
.note.prep { background: var(--card); border: 1px solid var(--line-2); }
.note.prep > .ic { color: var(--brand); }
.hint.prep { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); }
.hint.prep .ic { width: 16px; height: 16px; margin-top: 3px; flex: none; color: var(--brand); }

.pick-foot { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.soon-note { display: grid; gap: 14px; align-content: center; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.soon-note > p { color: var(--ink-2); font-size: .96rem; }

/* -------------------------------------------- how it works, in four photos */
.psteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pstep { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ps-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-lg); background: rgba(255, 255, 255, .06); }
.ps-img picture, .ps-img img { width: 100%; height: 100%; }
.ps-img img { object-fit: cover; }
.ps-b { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ps-b .sn { color: var(--licht); }
.ps-b h3 { font-size: 1.375rem; letter-spacing: -.02em; }
.ps-b p:not(.sn) { color: rgba(255, 255, 255, .72); font-size: .98rem; }
.ps-b .who { margin-top: auto; }

/* ------------------------------------------------------------------ steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.step { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-lg); background: var(--card); }
.step .ibox { margin-bottom: 6px; }
.sn { color: var(--brand); font-size: .9rem; font-weight: 500; }
.step p:not(.sn) { color: var(--ink-2); font-size: .97rem; }
.step .who { margin-top: auto; }

/* a small piece of what you will see at each step */
.mini-box { display: grid; align-content: center; min-height: 148px; margin-bottom: 8px; padding: 14px; border-radius: var(--r);
  background: var(--shade); }
.mini { display: grid; gap: 10px; font-size: .9rem; line-height: 1.35; }
.mi-up, .mc-ph { display: flex; gap: 8px; }
.sq { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 10px; background: var(--line); }
.sq img { width: 100%; height: 100%; object-fit: cover; }
.mi-add { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--line-2);
  border-radius: 10px; color: var(--ink-3); background: var(--paper); }
.mi-who { display: flex; align-items: center; gap: 10px; }
.mi-who > div { display: grid; }
.mi-who span { color: var(--ink-3); font-size: .84rem; }
.mi-say { padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: var(--paper); color: var(--ink); }
.mi-row, .mi-doc { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.mi-row .ic, .mi-doc .ic { width: 17px; height: 17px; color: var(--brand); }
.mi-doc b { color: var(--ink); }
.mi-yn { display: flex; flex-wrap: wrap; gap: 6px; }
.mi-ja, .mi-nee { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-weight: 500; font-size: .86rem; }
.mi-ja { background: var(--brand); color: #fff; }
.mi-nee { background: var(--paper); color: var(--ink-2); border: 1px solid var(--line-2); }

/* ----------------------------------------------------- the example dossier */
.dsplit { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.dstage { position: relative; min-width: 0; display: grid; place-items: center; min-height: 600px; padding: clamp(28px, 5vw, 72px) clamp(20px, 5vw, 64px);
  border-radius: var(--r-xl); overflow: hidden; isolation: isolate; background: var(--line); }
.dphoto { position: absolute; inset: 0; z-index: -1; }
.dphoto picture, .dphoto img { display: block; width: 100%; height: 100%; }
.dphoto img { object-fit: cover; }
.dstage .demo-card { position: relative; width: min(440px, 100%); }
.dstage .dossier { box-shadow: var(--float); }
.dstage .demo-card > .sample { justify-self: start; padding: 6px 12px; border-radius: 999px; background: var(--paper); box-shadow: 0 1px 2px var(--shade); }

.demo-card { margin: 0; display: grid; gap: 10px; min-width: 0; }
.dossier, .offer { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 24px);
  box-shadow: var(--lift); min-width: 0; color: var(--ink); }
.dhead, .dossier .head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.dhead > div { flex: 1; min-width: 0; }
.dossier .head { justify-content: space-between; flex-wrap: wrap; }
.ref { font-weight: 600; font-variant-numeric: tabular-nums; }
.sub { color: var(--ink-3); font-size: .9rem; }
.tl, .dossier ol { list-style: none; margin: 0; padding: 0; }
.tl li, .dossier ol li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; align-items: start; }
.pt { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--brand); color: #fff; }
.pt .ic { width: 14px; height: 14px; stroke-width: 2.5; }
.now .pt { background: var(--brand); box-shadow: inset 0 0 0 5px var(--paper); border: 2px solid var(--brand); }
.todo .pt { background: var(--paper); border: 1.5px solid var(--line-2); }
.what { font-weight: 600; font-size: .98rem; }
.det { color: var(--ink-2); font-size: .92rem; }
.todo .what { color: var(--ink-3); }
.dossier .when { color: var(--ink-3); font-size: .85rem; white-space: nowrap; }

.odl { margin: 10px 0 0; display: grid; gap: 12px; }
.odl > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px; }
.odl dt, .offer dl dt { color: var(--ink-3); font-size: .9rem; }
.odl dd, .offer dl dd { margin: 0; font-size: .96rem; }
.offer .bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.offer .in { padding-top: 14px; display: grid; gap: 14px; }
.offer .in > dl { margin: 0; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 10px 14px; }
.tiles { display: flex; gap: 8px; }
.tile { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 10px; background: var(--kalk); color: var(--ink-3); }
.locked { display: flex; align-items: center; gap: 8px; margin: 16px 0 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--kalk); color: var(--ink-2); font-size: .92rem; }
.locked .ic { width: 18px; height: 18px; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* -------------------------------------------------------------------- faq */
.faq { display: grid; gap: 8px; }
.faq details { background: var(--card); border-radius: 16px; transition: background-color .2s ease; }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 18px 18px 24px; cursor: pointer; font-weight: 500; font-size: 1.0625rem; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { margin-left: 0; width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--paper); color: var(--ink);
  transition: transform .3s var(--ease); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .a { padding: 0 24px 22px; display: grid; gap: 10px; color: var(--ink-2); max-width: 68ch; }
.hk-go { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }

/* ------------------------------------------------- the end of every page */
.band.end, .band.lost { padding: 0; overflow: hidden; }
.lost .endpanel { min-height: calc(100svh - var(--top-h) - 3 * var(--inset)); }
.lost .end-in { grid-template-columns: minmax(0, 580px); }
.lost-card { display: grid; gap: 18px; justify-items: start; padding: clamp(24px, 3.2vw, 40px); border-radius: var(--r-xl);
  background: var(--paper); color: var(--ink); --focus: var(--brand); box-shadow: var(--float); }
.lost-card h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.1rem); }
.lost-card .lede { color: var(--ink-2); }
.lost-card .search { width: 100%; }
.lost-card .btns { display: flex; flex-wrap: wrap; gap: 10px; }
.lost-d { width: 48px; height: 48px; fill: var(--brand); }
.endpanel { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(520px, 72vh, 760px);
  background: var(--deep); color: #fff; --focus: #fff; }
.end-bg { position: absolute; inset: 0; z-index: -1; }
.end-bg picture, .end-bg img { width: 100%; height: 100%; }
.end-bg img { object-fit: cover; }
.end-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--deep) 92%, transparent) 0%, color-mix(in srgb, var(--deep) 70%, transparent) 45%,
              color-mix(in srgb, var(--deep) 30%, transparent) 100%); }
.end-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 32px clamp(32px, 6vw, 96px); align-items: end;
  padding-block: clamp(56px, 8vw, 112px); }
.end-copy { display: grid; gap: 22px; justify-items: start; max-width: 680px; }
.end-copy h2 { color: #fff; font-size: clamp(2.5rem, 5.6vw, 5rem); line-height: .98; letter-spacing: -.04em; }
.end-copy p { color: rgba(255, 255, 255, .82); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); max-width: 46ch; }
.end-copy .btns { margin-top: 8px; }
.vkcard { display: grid; gap: 14px; align-content: start; padding: 26px; border-radius: var(--r-lg); background: var(--paper); color: var(--ink);
  --focus: var(--brand); }
.vkcard > div { display: grid; gap: 6px; }
.vkcard p { color: var(--ink-2); font-size: .97rem; }
.vkcard .btn { justify-self: start; }

/* -------------------------------------------------------------- page head */
.phead { padding-block: clamp(36px, 6vw, 88px) clamp(28px, 3.5vw, 48px); }
.phead + .band { padding-top: clamp(24px, 3vw, 48px); }
.phead.has-side .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.pcopy { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.pcopy h1 { max-width: 16ch; }
.pcopy .ibox.lg { margin-top: 8px; }
.pcopy .search { justify-self: stretch; max-width: 600px; }
.pcopy .search .sbox { min-height: 56px; border-radius: 999px; padding-inline: 20px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--ink-3); font-size: .9rem; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .sep { width: 14px; height: 14px; }
.pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; color: var(--ink-2); }
.pmeta > span { display: inline-flex; align-items: center; gap: 8px; }
.pmeta .ic { width: 18px; height: 18px; color: var(--brand); }
.pmeta b { color: var(--ink); font-weight: 500; }
.herken { background: var(--paper); border-radius: var(--r-lg); padding: clamp(20px, 2.6vw, 28px); display: grid; gap: 14px; }

/* photos in page heads and next to the partner form */
.hphoto, .aphoto { margin: 0; min-width: 0; }
.hphoto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r-xl); background: var(--line); }
.aphoto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-lg); background: var(--line); }
.pside { display: grid; min-width: 0; }
.pside .herken { position: relative; margin: -72px 20px 0; box-shadow: var(--float); }
.pcard.has-img { padding: 0; gap: 0; overflow: hidden; }
.pc-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--kalk); }
.pc-img picture, .pc-img img { width: 100%; height: 100%; }
.pc-img img { object-fit: cover; transition: transform 1s var(--ease); }
.pcard.has-img:hover .pc-img img { transform: scale(1.04); }
.pc-in { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 24px 24px; }
.pc-in > p { color: var(--ink-2); font-size: .97rem; }
.thumb { flex: none; width: 64px; height: 48px; overflow: hidden; border-radius: 10px; background: var(--kalk); }
.thumb picture, .thumb img { width: 100%; height: 100%; }
.thumb img { object-fit: cover; }

/* the credits page */
.credits { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.credit { display: flex; gap: 20px; align-items: flex-start; padding: 16px; border-radius: var(--r-lg); background: var(--card); }
.cr-img { flex: none; width: 128px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--kalk); }
.cr-img picture, .cr-img img { width: 100%; height: 100%; }
.cr-img img { object-fit: cover; }
.cr-b { flex: 1; display: grid; gap: 10px; min-width: 0; }
.cr-b h3 { font-size: 1.04rem; overflow-wrap: anywhere; }
.credit .facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 20px; }
.credit .facts dd { font-weight: 400; overflow-wrap: anywhere; }

/* ---------------------------------------------------- problem index + hub */
.pgroup { display: grid; gap: 24px; }
.pstart { display: grid; gap: 16px; }
.gh { display: flex; gap: 16px; align-items: flex-start; }
.gh > div { display: grid; gap: 8px; }
.gh h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.gh h2 a { color: var(--ink); text-decoration: none; }
.gh h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.gh p { color: var(--ink-2); max-width: 64ch; }
.plinks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plink { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid transparent; border-radius: var(--r);
  background: var(--card); color: var(--ink); text-decoration: none; height: 100%; transition: border-color .2s ease, box-shadow .2s ease; }
.plink:hover { color: var(--ink); border-color: var(--line); box-shadow: var(--lift); }
.pl-b { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pl-b b { font-weight: 500; }
.pl-b span { color: var(--ink-2); font-size: .92rem; }

.pgrid { display: grid; gap: 12px; }
.pgrid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgrid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pgrid.c3 > .anders.span2 { grid-column: span 2; flex-direction: row; align-items: center; }
.pgrid.c3 > .anders.span2 .btn { margin-top: 0; }
.pcard { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid transparent; border-radius: var(--r-lg);
  background: var(--card); color: var(--ink); text-decoration: none; transition: border-color .2s ease, box-shadow .3s ease; }
.pcard:hover { color: var(--ink); border-color: var(--line); box-shadow: var(--lift); }
.pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.pcard h3 { font-size: 1.3rem; letter-spacing: -.02em; }
.pcard > p { color: var(--ink-2); font-size: .97rem; }
.peek { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--ink-2); font-size: .92rem; }
.peek li { display: flex; gap: 10px; }
.peek li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: .62em; border-radius: 50%; background: var(--brand-line); }
.more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; color: var(--brand); font-weight: 500; }

.anders { display: flex; align-items: center; gap: 16px; padding: 24px; border-radius: var(--r-lg); background: var(--card); }
.anders > div { display: grid; gap: 4px; flex: 1; min-width: 0; align-content: start; }
.anders p { color: var(--ink-2); }
.anders .btn { flex: none; }
.anders:not(.wide) { flex-direction: column; align-items: flex-start; }
.anders:not(.wide) .btn { margin-top: auto; }

/* -------------------------------------------------------- problem article */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(28px, 5vw, 80px); align-items: start; }
.body { display: grid; gap: clamp(32px, 4vw, 48px); min-width: 0; }
.sec { display: grid; gap: 14px; }
.sec h2, .prose h2, .vh { font-size: clamp(1.625rem, 2.6vw, 2.125rem); letter-spacing: -.03em; line-height: 1.1; }
.box { background: var(--card); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); display: grid; gap: 14px; align-content: start; }
.bh { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; }
.causes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cause { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border: 1px solid transparent; border-radius: var(--r); background: var(--card); }
.cause > div { display: grid; gap: 4px; min-width: 0; }
.cause h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.06rem; }
.cause p { color: var(--ink-2); }
.cause.out { background: transparent; border-color: var(--line-2); }
.cause.out h3 { color: var(--ink-2); }
.cn { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand); font-weight: 600; font-size: .9rem; }
.cause.out .cn { background: var(--shade); color: var(--ink-3); }
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.rel { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid transparent; border-radius: var(--r);
  background: var(--card); color: var(--ink); font-weight: 500; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease; }
.rel:hover { color: var(--ink); border-color: var(--line); box-shadow: var(--lift); }
.rel > span:not(.ibox) { flex: 1; min-width: 0; }
.rel .go { color: var(--ink-3); }

.side { display: grid; gap: 16px; position: sticky; top: calc(var(--top-h) + 24px); min-width: 0; transition: top .55s var(--ease-io); }
body:has(.top.away) .side { top: 24px; }
.sidecard { display: grid; gap: 14px; padding: 26px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--lift); }
.sidecard > p { color: var(--ink-2); }
.facts { margin: 0; display: grid; gap: 12px; }
.facts > div { display: grid; gap: 2px; }
.facts dt { color: var(--ink-3); font-size: .86rem; }
.facts dd { margin: 0; font-weight: 500; font-size: .96rem; }
.facts dd ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-weight: 400; }
.sidecard .btn { width: 100%; }

/* the jump list: where you are on a long page, without a track or a line */
.toc { display: grid; gap: 6px; }
.toc p { padding-left: 12px; color: var(--ink-3); font-size: .86rem; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 6px 12px; border-radius: 999px; color: var(--ink-2); font-size: .94rem; text-decoration: none;
  transition: background-color .25s ease, color .25s ease; }
.toc a:hover { color: var(--ink); background: var(--shade); }
.toc a[aria-current] { color: var(--brand); background: var(--brand-soft); font-weight: 500; }
@media (max-height: 820px) { .toc { display: none; } }

.prep2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.prep2 > div { display: grid; gap: 12px; align-content: start; min-width: 0; }
.prep2 h3 { font-size: 1rem; }

/* verder lezen: three named ways on, under the article */
.vcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px 20px; }
.vcol { display: grid; gap: 14px; align-content: start; min-width: 0; }
.vcol h3 { font-size: 1.125rem; }
.vcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vl { display: flex; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; border-radius: var(--r); background: var(--card);
  color: var(--ink); font-weight: 500; text-decoration: none; transition: box-shadow .3s var(--ease), background-color .2s ease; }
.vl > span:not(.thumb):not(.ibox) { flex: 1; min-width: 0; }
.vl .ibox { width: 64px; height: 48px; border-radius: 10px; background: var(--paper); }
.vl .chev { flex: none; width: 18px; height: 18px; color: var(--ink-3); transition: transform .3s var(--ease), color .2s ease; }
.vl .thumb img { transition: transform .6s var(--ease); }
.vl:hover { background: var(--paper); box-shadow: var(--lift); }
.vl:hover .chev { color: var(--brand); transform: translateX(3px); }
.vl:hover .thumb img { transform: scale(1.06); }
.vl-all { padding-left: 8px; }
.vl-all a { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-weight: 500; text-decoration: none; }

/* ------------------------------------------------------------------ table */
.tablebox { overflow-x: auto; border-radius: var(--r-lg); background: var(--card); }
.tbl { width: 100%; border-collapse: collapse; font-size: .96rem; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 16px 20px; }
.tbl thead th { color: var(--ink-3); font-size: .86rem; font-weight: 500; border-bottom: 1px solid var(--line); }
.tbl tbody tr + tr { border-top: 1px solid var(--line); }
.tbl td { color: var(--ink-2); }
.tbl .tag { margin-left: 6px; }
.flow th[scope="row"] { font-weight: 500; white-space: nowrap; }
.flow td:nth-child(2) { white-space: nowrap; }
.n { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%;
  background: var(--paper); color: var(--ink); font-size: .84rem; font-weight: 600; vertical-align: middle; }

.ncard { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border-radius: var(--r-lg); background: var(--card); }
.ncard > div { display: grid; gap: 4px; }
.ncard p { color: var(--ink-2); font-size: .96rem; }

/* blog: the side-by-side cards in an article */
/* all cards on one row, or one under the other on a phone: never one card alone on a row */
.bcards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
@media (max-width: 760px) { .bcards { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); } }
.bcard { display: grid; gap: 16px; align-content: start; padding: 22px; border-radius: var(--r-lg); background: var(--card); min-width: 0; }
.bcard h3 { display: flex; align-items: center; gap: 10px; font-size: 1.06rem; }
.bcard .facts dd { font-weight: 400; color: var(--ink-2); }

/* ------------------------------------------------------------------- form */
.formgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 5vw, 64px); align-items: start; }
.form { display: grid; gap: 20px; min-width: 0; }
.form:not(.aanvraag) { background: var(--card); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); }
.band.paper .form:not(.aanvraag) { background: var(--paper); border: 1px solid var(--line); }
.fs { margin: 0; min-width: 0; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); display: grid; gap: 18px; }
.fs legend { float: left; width: 100%; padding: 0; margin: 0; display: flex; align-items: center; gap: 12px;
  font-size: 1.25rem; font-weight: 500; letter-spacing: -.015em; }
.fs legend + * { clear: both; }
.fs .n { margin-right: 0; background: var(--brand); color: #fff; }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field > label, .lab { font-weight: 500; font-size: .96rem; }
.lab .muted, .field > label .muted { font-weight: 400; }
.hint { color: var(--ink-3); font-size: .88rem; }
.field input:not([type="radio"]):not([type="checkbox"]), .field textarea, .field select {
  width: 100%; min-width: 0; min-height: 52px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper);
  color: var(--ink); font: 400 1rem/1.4 var(--sans); transition: border-color .2s ease, box-shadow .2s ease; }
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sel { position: relative; }
.sel select { -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer; }
.sel .chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--paper); color: var(--ink); font-size: .95rem; font-weight: 500; cursor: pointer; user-select: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.chip:hover { background: var(--shade); }
.choice input:checked + .chip { background: var(--brand); border-color: var(--brand); color: #fff; }
.choice input:focus-visible + .chip { outline: 2px solid var(--focus); outline-offset: 2px; }
.drop { display: grid; gap: 12px; }
.droplab { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px dashed var(--line-2); border-radius: var(--r);
  background: var(--kalk); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.drop.over .droplab, .droplab:hover { border-color: var(--brand); background: var(--brand-soft); }
.file:focus-visible + .droplab { outline: 2px solid var(--focus); outline-offset: 2px; }
.dt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.fcount { color: var(--ink-2); font-size: .92rem; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.thumbs:empty { display: none; }
.thumbs figure { position: relative; margin: 0; }
.thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--kalk); }
.thumbs .rm { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 999px; background: rgba(15, 31, 26, .72); color: #fff; cursor: pointer; }
.thumbs .rm:hover { background: var(--ink); }
.thumbs .rm:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.thumbs .rm .ic { width: 16px; height: 16px; }
.thumbs .noimg { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: var(--kalk); color: var(--ink-3); font-size: .8rem; padding: 6px; text-align: center; overflow-wrap: anywhere; }
/* one step at a time, with script: the bar says where you are and what comes next */
.fprog { display: grid; gap: 10px; }
.fp-t { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; color: var(--ink-2); font-size: .95rem; }
.fp-t:focus { outline: 0; }
.fp-t b { color: var(--ink); font-weight: 500; }
.fp-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.fp-fill { display: block; height: 100%; width: 33.4%; border-radius: inherit; background: var(--brand); transition: width .4s var(--ease); }
.fprog[data-at="2"] .fp-fill { width: 66.7%; }
.fprog[data-at="3"] .fp-fill { width: 100%; }
.aanvraag { scroll-margin-top: calc(var(--top-h) + 16px); }
.fnav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }
.fnav [data-verder], .fnav [type="submit"] { margin-left: auto; }
.fnav .ic:not(.go) { width: 18px; height: 18px; }
.camlab { justify-self: start; }
.check { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: .95rem; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--brand); }

.erows { display: grid; }
.erow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px clamp(24px, 5vw, 80px);
  padding-block: clamp(28px, 3.6vw, 48px); border-top: 1px solid var(--line); }
.erow:first-child { border-top: 0; padding-top: 0; }
.erow h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.erow .eb { display: grid; gap: 14px; max-width: 62ch; min-width: 0; }
.erow .eb p { color: var(--ink-2); font-size: 1.0625rem; }
.prose { max-width: calc(760px + 2 * var(--gut)); display: grid; gap: 14px; }
.prose h2 { margin-top: 28px; }
.prose > h2:first-child, .prose > .notice:first-child + h2 { margin-top: 0; }
.prose p { color: var(--ink-2); }
.prose .checks { margin-block: 4px; }

/* ----------------------------------------------------------------- footer */
.foot { margin: var(--inset); padding-block: clamp(48px, 6vw, 80px) 28px; border-radius: var(--r-xl); background: var(--paper); }
.fgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 44px 32px; }
.fabout { grid-row: span 2; }
.fabout { display: grid; gap: 14px; align-content: start; }
.fabout p { color: var(--ink-2); font-size: .97rem; max-width: 38ch; }
.fabout .small { color: var(--ink-3); font-size: .88rem; }
.foot .logo { height: 28px; }
.fh { font-size: .97rem; font-weight: 500; letter-spacing: 0; line-height: 1.4; margin-bottom: 14px; }
.fh a { color: var(--ink); text-decoration: none; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot ul a, .fh a { color: var(--ink-2); text-decoration: none; font-size: .95rem;
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; padding-bottom: 2px;
  transition: color .2s ease, background-size .4s var(--ease); }
.fh a { color: inherit; font-size: inherit; }
.foot ul a:hover, .fh a:hover { color: var(--ink); background-position: 0 100%; background-size: 100% 1px; }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: clamp(40px, 5vw, 64px); padding-top: 22px;
  border-top: 1px solid var(--line); color: var(--ink-3); font-size: .88rem; }
.ll { display: flex; gap: 20px; }
.ll a { color: var(--ink-2); text-decoration: none; }
.ll a:hover { color: var(--ink); text-decoration: underline; }

/* worker pages: the dossier tracker, the offer, the partner portal */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 2.6vw, 28px); }
.card.soft { background: transparent; border-color: var(--line-2); }
.card.stack { gap: 14px; }

/* ------------------------------------------------- waar in huis: explorer */
.explore { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.house { display: grid; gap: 14px; justify-items: start; padding: clamp(16px, 2.6vw, 32px); border-radius: var(--r-xl); background: var(--card); min-width: 0; }
.hbox { position: relative; width: 100%; }
.hsvg { display: block; width: 100%; height: auto; }
.hsvg .h-line, .hsvg .h-det, .hsvg .h-ground, .hsvg .h-earth { pointer-events: none; }
.hsvg .h-line { stroke: var(--ink); stroke-width: 1.6; opacity: .8; vector-effect: non-scaling-stroke; }
.hsvg .h-det { stroke: var(--ink); stroke-width: 1.25; opacity: .4; vector-effect: non-scaling-stroke; }
.hsvg .h-ground { stroke: var(--ink); stroke-width: 1.6; opacity: .5; vector-effect: non-scaling-stroke; }
.hsvg .h-earth { fill: var(--shade); }
.hsvg .h-stain { stroke: var(--ink); stroke-width: 2.4; opacity: .55; }
.zone { fill: transparent; cursor: pointer; transition: fill .25s ease; }
.zone:hover { fill: var(--brand-soft); }
.zone.on { fill: color-mix(in srgb, var(--brand) 16%, transparent); }
.zone.wall.on { fill: color-mix(in srgb, var(--brand) 30%, transparent); }
.pins { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 2px var(--shade), 0 10px 22px -14px var(--drop); font-size: .88rem; font-weight: 500; line-height: 1.2;
  white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.pin:hover { color: var(--ink); border-color: var(--brand); }
.pin[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.pin .ic { width: 16px; height: 16px; }
.pin.pin-anders { position: static; transform: none; }
/* where each pin sits on the drawing, in percent of its 640 by 540 viewBox */
.p-zolder-dak { left: 50%; top: 20.7%; }
.p-badkamer { left: 31.9%; top: 31.5%; }
.p-plafond { left: 31.9%; top: 59.3%; }
.p-ramen-deuren { left: 70.6%; top: 44.1%; }
.p-wc { left: 52.3%; top: 55.6%; }
.p-keuken { left: 77.2%; top: 56.3%; }
.p-muur-gevel { left: 10.6%; top: 66.7%; }
.p-kelder { left: 53.1%; top: 84.8%; }
.p-garage { left: 92.2%; top: 66.7%; }
.zpanels { min-width: 0; }
.zpanel { display: grid; gap: 18px; }
.zp-head { display: grid; gap: 6px; }
.zp-head h3 { font-weight: 400; font-size: clamp(1.75rem, 2.6vw, 2.25rem); letter-spacing: -.03em; line-height: 1.08; }
.zrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zrow { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); color: var(--ink); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease; }
.zrow:hover { color: var(--ink); border-color: var(--line-2); box-shadow: var(--lift); }
.zpanel > .btn { justify-self: start; }
@media (min-width: 961px) { .house { position: sticky; top: calc(var(--top-h) + 24px); } }

/* the phone button: a spacer in the flow, the bar fixed over it */
.mcta { display: none; }
@media (max-width: 760px) {
  .mcta { display: block; height: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .mcta-bar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--paper) 92%, transparent); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  }
  .mcta-bar.ready { transition: transform .35s var(--ease); }
  .mcta-bar .btn { width: 100%; justify-content: center; }
  .mcta-bar.off { transform: translateY(110%); }
}

/* ------------------------------------------------------------------ motion
   site.js sets .rv on the root only when the visitor allows motion and the
   browser can watch the scroll. Without it every block shows as it is. */
@media (prefers-reduced-motion: no-preference) {
  .rv [data-reveal]:not([data-reveal="stagger"]), .rv [data-reveal="stagger"] > * {
    transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .rv [data-reveal]:not([data-reveal="stagger"]):not(.in), .rv [data-reveal="stagger"]:not(.in) > * { opacity: 0; transform: translateY(20px); }
  .rv [data-reveal="stagger"] > :nth-child(2) { transition-delay: .08s; }
  .rv [data-reveal="stagger"] > :nth-child(3) { transition-delay: .16s; }
  .rv [data-reveal="stagger"] > :nth-child(4) { transition-delay: .24s; }
  .rv [data-reveal="stagger"] > :nth-child(5) { transition-delay: .32s; }
  .rv [data-reveal="stagger"] > :nth-child(n+6) { transition-delay: .4s; }

  /* the photo at the top of a problem opens upward, the card settles on it */
  .hphoto img { animation: unveil 1.1s var(--ease-io) both; }
  .pside .herken { animation: settle .8s cubic-bezier(.22, 1, .36, 1) .45s both; }
  .lost-d { animation: settle .8s cubic-bezier(.22, 1, .36, 1) .2s both; }

  /* lazy photos fade in once they have loaded, instead of popping */
  img.fi { opacity: 0; transition: opacity .6s ease; }
  img.fi.ok { opacity: 1; }

  /* the answers and the menu open and close, where the browser can */
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content, .sh-x::details-content {
    block-size: 0; overflow-y: clip; transition: block-size .5s var(--ease-io), content-visibility .5s allow-discrete; }
  .faq details[open]::details-content, .sh-x[open]::details-content { block-size: auto; }

  /* from page to page: the header stays, the page fades through */
  @view-transition { navigation: auto; }
  .top { view-transition-name: top; }
  ::view-transition-old(root) { animation: .2s ease both vt-out; }
  ::view-transition-new(root) { animation: .45s cubic-bezier(.22, 1, .36, 1) both vt-in; }
}
@keyframes unveil { from { clip-path: inset(100% 0 0 0 round var(--r-xl)); transform: scale(1.08); } to { clip-path: inset(0 round var(--r-xl)); transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(22px); } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1060px) {
  .nav, .hide-m { display: none; }
  .burger { display: block; }
}
@media (max-width: 960px) {
  .split, .phead.has-side .wrap, .article, .formgrid, .explore, .dsplit, .end-in, .pick-foot { grid-template-columns: minmax(0, 1fr); }
  .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .house { max-width: 680px; }
  .aphoto { max-width: 420px; }
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .psteps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgrid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgrid.c3 > .anders.span2 { grid-column: auto; flex-direction: column; align-items: flex-start; }
  .pgrid.c3 > .anders.span2 .btn { margin-top: auto; }
  .split.pinned > .shead, .side { position: static; }
  .toc { display: none; }
  .dstage { min-height: 0; }
  .end-in .vkcard { max-width: 480px; }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fabout { grid-column: 1 / -1; grid-row: auto; }
  .bn-in .bn-card { display: none; }
}
@media (max-width: 760px) {
  :root { --inset: 8px; --top-pad: 12px; --top-h: 68px; }
  .erow { grid-template-columns: minmax(0, 1fr); }
  .top .wrap { padding-left: 18px; padding-right: 7px; }
  .plinks, .grid2 { grid-template-columns: minmax(0, 1fr); }
  /* the pins leave the drawing and line up under it as chips */
  .pins { position: static; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .pin { position: static; transform: none; }
  .house { gap: 8px; }
  /* the banner on a phone: the photo edge to edge under the pill, and the panel over its lower edge; no note */
  .bn-panel { gap: 18px; padding: 24px 20px 22px; border-radius: var(--r-lg); box-shadow: var(--lift); }
  .banner { display: block; min-height: 0; padding: 0; margin-inline: 0; }
  .banner .bn-ph { position: relative; inset: auto; height: clamp(320px, 48svh, 480px); border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .bn-in { display: block; margin-top: -44px; padding-inline: 16px; }
  .hero-in { gap: 36px; padding-block: 44px 8px; }
  .hero-ask { gap: 12px; }
  .cgrid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ccard { grid-template-rows: none; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px; border-radius: var(--r); }
  .cc-img { aspect-ratio: 1; border-radius: 10px; }
  .cc-b { gap: 3px; padding: 4px 44px 4px 0; }
  .cc-t b { font-size: 1.0625rem; }
  .cc-t .tag { font-size: .75rem; padding: 2px 8px; }
  .cc-m { font-size: .875rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ccard > .go { top: 50%; bottom: auto; right: 14px; margin-top: -14px; width: 28px; height: 28px; padding: 7px; }
  .ha-row .btn { flex: 1 1 auto; }
  .end-bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--deep) 40%, transparent) 0%, color-mix(in srgb, var(--deep) 92%, transparent) 55%); }
  .end-in { padding-inline: 12px; padding-bottom: 12px; padding-top: max(28svh, 180px); }
  .end-copy { padding-inline: 4px; }
  .end-in .vkcard { max-width: none; }
}
@media (max-width: 640px) {
  .pgrid.c2, .pgrid.c3 { grid-template-columns: minmax(0, 1fr); }
  .anders.wide { flex-direction: column; align-items: flex-start; }
  .prep2 { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .psteps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pstep { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: start; }
  .ps-img { border-radius: var(--r); }
  .ps-b .who { margin-top: 4px; }
  .ctab { padding: 8px 14px 8px 11px; font-size: .9rem; gap: 7px; }
  .ctab .ic { width: 16px; height: 16px; }
}
@media (max-width: 560px) {
  .steps, .row2, .promises { grid-template-columns: minmax(0, 1fr); }
  .bn-panel h1 { font-size: clamp(2.5rem, 11.6vw, 3.1rem); }
  .bn-panel .lede { font-size: 1.0625rem; }
  .ha-note { display: none; }
  /* the kinds of problem two by two: the photo and the name, the whole card is the link */
  .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccard { grid-template-columns: none; grid-template-rows: auto 1fr; align-items: start; gap: 0; padding: 6px; }
  .cc-img { aspect-ratio: 4 / 3; border-radius: 9px; }
  .cc-b { padding: 10px 6px 6px; gap: 6px; }
  .cc-t { gap: 6px; }
  .cc-m, .ccard > .go { display: none; }
  .promises { gap: 0; }
  .promises li { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-block: 18px; }
  .promises li > div { gap: 4px; }
  .promises h3 { font-size: 1.0625rem; }
  .promises p { font-size: .94rem; }
  .dhead { display: grid; grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
  .dhead > .tag { grid-column: 2; justify-self: start; }
  .ptiles { gap: 8px; }
  .ptile-b { padding: 12px 10px 10px 14px; font-size: 1rem; }
  .ptile-b .go { width: 30px; height: 30px; padding: 7px; }
  .dstage { place-items: end center; padding: 160px 12px 12px; border-radius: var(--r-lg); }
  .pside .herken { margin: -44px 12px 0; }
  .faq summary { padding: 16px 14px 16px 18px; font-size: 1rem; }
  .faq .a { padding: 0 18px 20px; }
  .credit { gap: 14px; padding: 14px; }
  .cr-img { width: 84px; }
  .btns .btn.lg { flex: 1 1 auto; }
  .odl > div, .offer .in > dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .droplab { flex-wrap: wrap; }
  .droplab .btn { width: 100%; }
  .fnav { flex-direction: column-reverse; align-items: stretch; }
  .fnav [data-verder], .fnav [type="submit"] { margin-left: 0; }
  .camlab { justify-self: stretch; }
  .flow thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .flow tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 14px 16px; gap: 6px 10px; }
  .flow th, .flow td { padding: 0; }
  .flow th[scope="row"] { white-space: normal; }
  .flow td:last-child { grid-column: 1 / -1; padding-left: 36px; }
  .fgrid { gap: 32px 20px; }
  .legal { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}