/* Hallmark · shape: Statement and ledger · genre: editorial · theme: custom · redesign: full · job: hire · idea: "say plainly what you get and what it costs, nothing staged" · vibe: "white, near-black, deep bordeaux, sharp and modern"
 * paper: oklch(98.3% 0.002 20) · accent: oklch(38% 0.13 15) · display: Clash Grotesk · body: Satoshi · hero: four-line grotesk stack beside the three steps on a bordeaux field that runs off the right edge · nav: edge-aligned on paper · footer: letter close, Tot morgen. · imagery: none, type and the price ledger carry the page · signature: the three steps, preview, kiezen, online, set large on bordeaux on the first screen
 * axes: light/grotesk-sans/chromatic-red · posture: committed (bordeaux carries the hero steps, the plans pick and the quote band; actions are near-black) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H5 E5 S4 R5 V5 · weakest: S, with no pictures the page leans on its words; the steps, the five trades and the plain prices are all facts only Morrow states */
/* Hallmark · waive 77 · privacyverklaring.html is one poster heading and two lines · the page waits for the legal text the owner of Morrow Studio still has to supply */
/* Hallmark · dropped https://commons.wikimedia.org/wiki/File:Traditional_Hand_Plane,_China.jpg, 1280px-Traditional_Hand_Plane%2C_China.jpg · the owner asked for no stand-in pictures; the page carries type and facts until real photographs arrive */
/* Hallmark · dropped "Een site voor hoveniers", "Een site voor schilders", "Een site voor elektriciens", "Een site voor loodgieters", "Een site voor dakdekkers" · the five trades now stand in one statement line instead of five panels */
/* Hallmark · dropped tab-hovenier, tab-schilder, tab-elektricien, tab-loodgieter, tab-dakdekker, vak-hovenier, vak-schilder, vak-elektricien, vak-loodgieter, vak-dakdekker · the trade switcher is gone with its panels; the statement names all five trades */
/* Hallmark · reworded "Eerst zien, dan beslissen", "1. Je krijgt een gratis preview", "2. Jij kiest een pakket", "3. Wij bouwen en zetten hem online" to "Gratis preview", "Jij kiest", "Wij zetten hem online" · the werkwijze moved onto the first screen as three short steps, so the section head workflow-title went with it */
/* Hallmark · dropped workflow-title · the werkwijze section is now the three steps in the hero, reached by the same #werkwijze link */
/* Hallmark · reworded "Gemaakt voor jouw vak" to "Websites voor hoveniers, schilders, elektriciens, loodgieters en dakdekkers." · the statement names the five trades the old switcher listed */
@import url("./tokens.css");
@import url("./base.css");

/* Lettertypes staan op onze eigen server, zodat er geen derde partij meekijkt */
@font-face { font-family: "Clash Grotesk"; src: url("fonts/clash-grotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root { --nav-h: 88px; }

/* ================= Grounds ================= */
.night { background: var(--color-night); color: var(--color-on-night); --color-focus: var(--color-focus-night); }
.night ::selection { background: var(--color-on-night); color: var(--color-night); }
.night .btn { --btn-bg: var(--color-on-night); --btn-ink: var(--color-night); --btn-hover: var(--color-paper-2); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* ================= Controls ================= */
.btn {
  --btn-bg: var(--color-ink); --btn-ink: var(--color-paper); --btn-hover: var(--color-ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--space-lg);
  border: 0; border-radius: var(--radius-btn);
  background: var(--btn-bg); color: var(--btn-ink);
  font: 500 var(--text-md)/1 var(--font-body);
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--btn-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }

.link-action {
  display: inline-flex; align-items: center; min-height: 44px;
  color: currentColor; font-weight: 500; white-space: nowrap; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat;
  transition: background-size var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.link-action:hover { background-size: 100% 2px; color: var(--color-accent); }
.night .link-action:hover { color: var(--color-on-night-2); }
.link-action:active { opacity: 0.8; }
.link-action:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .link-action { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}

/* ================= Nav ================= */
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.wordmark { display: inline-flex; align-items: baseline; gap: var(--space-xs); color: inherit; text-decoration: none; }
.wordmark-name { font: 500 1.875rem/1 var(--font-display); letter-spacing: -0.02em; }
.wordmark-studio { font-size: var(--text-sm); color: var(--color-muted); }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav-links { display: flex; align-items: center; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); font-weight: 500; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav-links a:hover { color: var(--color-accent); }
.nav-links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nav-cta a { color: var(--color-accent); background: linear-gradient(var(--color-accent), var(--color-accent)) 0 calc(100% - 8px) / 100% 1px no-repeat; transition: background-size var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.nav-cta a:hover { background-size: 100% 2px; }

/* ================= Shared ================= */
.section { padding-block: var(--section-gap); }
.lead { font-size: var(--text-lead); line-height: 1.45; }
h2 { font-weight: 500; font-size: var(--text-section); line-height: 1; letter-spacing: var(--tracking-display); max-width: 18ch; }
h3 { font-weight: 500; letter-spacing: var(--tracking-display); }
.fill { padding: 0 var(--space-2xs); border: 1px dashed currentColor; border-radius: 3px; opacity: 0.8; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ================= 1. Hero: the head, and the three steps on bordeaux ================= */
.hero { padding-block: var(--space-md) var(--space-xl); }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; min-height: calc(100svh - var(--nav-h) - var(--space-md) - var(--space-xl)); }
.hero-grid > .hero-steps { align-self: stretch; display: flex; align-items: center; }
.hero-text { grid-column: 1 / 7; }
.hero h1 { max-width: none; font-weight: 500; font-size: clamp(3rem, 6.1vw, 6rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--color-ink); }
.hero .lead { margin-top: var(--space-xl); max-width: 34ch; color: var(--color-ink-2); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }

.hero-steps {
  grid-column: 7 / -1; margin-right: calc(-1 * var(--gutter));
  padding: var(--space-3xl) var(--gutter) var(--space-3xl) var(--space-2xl);
  border-radius: var(--radius-screen) 0 0 var(--radius-screen);
  scroll-margin-top: var(--space-xl);
}
.steps { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--space-lg); row-gap: var(--space-xs);
  padding-block: var(--space-xl); border-top: 1px solid var(--color-night-3);
}
.step:first-child { padding-top: 0; border-top: 0; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: counter(step); grid-row: 1 / span 2;
  font: 500 4.25rem/0.8 var(--font-display); letter-spacing: -0.04em; color: var(--color-on-night-2);
  font-variant-numeric: tabular-nums;
}
.step-title { max-width: none; font-size: var(--text-2xl); line-height: 1.05; color: var(--color-on-night); }
.step p { color: var(--color-on-night-2); max-width: 46ch; }
.step p a { color: var(--color-on-night); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-thickness var(--dur-short) var(--ease-out); }
.step p a:hover { text-decoration-thickness: 2px; }

/* one settle on load: the three steps arrive in order, visible without script and under reduced motion */
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.step { animation: step-in var(--dur-long) var(--ease-out) both; }
.step:nth-child(2) { animation-delay: 90ms; }
.step:nth-child(3) { animation-delay: 180ms; }
@media (prefers-reduced-motion: reduce) { .step { animation: none; } }

/* ================= 2. Statement ================= */
.statement { padding-block: var(--section-gap) var(--space-3xl); }
.statement-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.statement-text { grid-column: 1 / 12; max-width: none; font-size: clamp(2.25rem, 4.3vw, 4.75rem); line-height: 1.04; letter-spacing: -0.03em; }
.statement-note { grid-column: 7 / -1; display: grid; gap: var(--space-lg); font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }
.statement-note > p { max-width: 38ch; }
.audience { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.audience li { padding: var(--space-2xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--color-ink); }

/* ================= 2a. Werkwijze: vijf stappen ================= */
.process { padding-top: var(--space-3xl); }
.process-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.process-head h2 { grid-column: 1 / 8; }
.process-note { grid-column: 9 / -1; font-size: var(--text-sm); color: var(--color-muted); max-width: 34ch; }
.process-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; counter-reset: none; }
.process-step { display: grid; align-content: start; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); position: relative; }
.process-step::before { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 0; background: var(--color-accent); transition: width 900ms var(--ease-out); }
.process-step.is-in::before { width: 100%; }
.process-num { font: 500 var(--text-3xl)/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.process-step h3 { font-size: var(--text-xl); line-height: 1.1; margin-top: var(--space-xs); }
.process-step p { color: var(--color-ink-2); font-size: var(--text-md); }

/* ================= 2b. Voorbeelden: conceptwebsites ================= */
.work { padding-top: var(--space-3xl); }
.work-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.work-head h2 { grid-column: 1 / 8; }
.work-note { grid-column: 9 / -1; font-size: var(--text-sm); color: var(--color-muted); max-width: 40ch; }
.work-list { margin: var(--space-2xl) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-3xl); }
.case { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: end; padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.case-media { grid-column: 1 / 9; display: block; overflow: hidden; border-radius: var(--radius-screen); background: var(--color-paper-2); }
.case-media img { display: block; width: 100%; height: auto; transition: transform var(--dur-long) var(--ease-out); }
.case-media:hover img { transform: scale(1.015); }
.case-body { grid-column: 9 / -1; display: grid; gap: var(--space-sm); justify-items: start; padding-bottom: var(--space-md); }
.case-kind { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.tag { display: inline-flex; padding: 1px var(--space-xs); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); color: var(--color-accent); font-size: var(--text-xs); font-weight: 500; }
.case-title { font-size: var(--text-2xl); line-height: 1.05; }
.case-body p:not(.case-kind) { color: var(--color-ink-2); max-width: 36ch; }
.case-body .link-action { margin-top: var(--space-xs); }
.case:nth-child(even) .case-media { grid-column: 5 / -1; grid-row: 1; }
.case:nth-child(even) .case-body { grid-column: 1 / 5; grid-row: 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 60rem) {
  .work-head h2, .work-note, .case-media, .case-body, .case:nth-child(even) .case-media, .case:nth-child(even) .case-body { grid-column: 1 / -1; grid-row: auto; }
  .work-note { margin-top: var(--space-sm); }
}
@media (prefers-reduced-motion: reduce) { .case-media img { transition: none; } .case-media:hover img { transform: none; } }

/* ================= 3. Pakketten: the ledger ================= */
.plans-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.plans-head h2 { grid-column: 1 / 8; }
.plans-note { grid-column: 9 / -1; font-size: var(--text-sm); color: var(--color-muted); }
.plan-switch { display: none; }
.ledger { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(13, auto); margin-top: var(--space-2xl); }
.ledger-col { grid-row: 1 / span 13; display: grid; grid-template-rows: subgrid; min-width: 0; }
.cell { display: flex; align-items: center; min-height: 60px; padding: var(--space-sm) var(--space-lg); border-top: 1px solid var(--color-rule); }
.ledger-labels .cell { padding-left: 0; color: var(--color-muted); }
.cell--head { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-xs); border-top: 0; padding-block: var(--space-xl) var(--space-lg); }
.cell--head h3 { font-size: var(--text-2xl); line-height: 1; }
.plan-sub { font-size: var(--text-sm); color: var(--color-ink-2); }
.cell--action { border-top: 1px solid var(--color-rule); padding-block: var(--space-lg) var(--space-xl); }
.price { font: 500 var(--text-3xl)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pick-badge { display: inline-flex; align-self: flex-start; padding: 2px var(--space-sm); border-radius: var(--radius-pill); background: var(--color-on-night); color: var(--color-night); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.02em; }
.yes::before { content: ""; display: inline-block; width: 0.7em; height: 0.4em; margin-right: 0.55em; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.2em) rotate(-45deg); }
.yes { white-space: nowrap; }
.no { color: var(--color-muted); }
.plan--pick .no { color: var(--color-on-night-2); }
.soon { display: inline-flex; padding: 2px var(--space-sm); border: 1px dashed currentColor; border-radius: var(--radius-pill); font-size: var(--text-sm); }
.plans-facts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); margin-top: var(--space-3xl); }
.plans-facts-title { grid-column: 1 / 4; font-size: var(--text-xl); line-height: 1.1; }
.facts { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; }
.facts dt { font-weight: 500; color: var(--color-ink); }
.facts dd { margin: var(--space-2xs) 0 0; color: var(--color-ink-2); max-width: 44ch; }

/* ================= 3b. Over Morrow Studio ================= */
.about { padding-bottom: var(--space-3xl); }
.about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); padding-top: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.about-grid h2 { grid-column: 1 / 6; }
.about-body { grid-column: 7 / -1; display: grid; gap: var(--space-md); color: var(--color-ink-2); }
.about-body .lead { color: var(--color-ink); max-width: 30ch; }
.about-legal { font-size: var(--text-sm); color: var(--color-muted); }
.plan--pick { background: var(--color-night); color: var(--color-on-night); --color-focus: var(--color-focus-night); border-radius: var(--radius-screen); }
.plan--pick .cell { border-top-color: var(--color-night-3); }
.plan--pick .cell--head { border-top: 0; }
.plan--pick .plan-sub { color: var(--color-on-night-2); }
.plan--pick .btn { --btn-bg: var(--color-on-night); --btn-ink: var(--color-night); --btn-hover: var(--color-paper-2); }
.plan-switch button {
  min-height: 44px; padding: 0 var(--space-md); cursor: pointer;
  border: 1px solid var(--color-rule); border-radius: var(--radius-pill);
  background: transparent; color: var(--color-ink); font-size: var(--text-sm); font-weight: 500;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.plan-switch button:hover { background: var(--color-paper-2); }
.plan-switch button[aria-selected="true"] { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.plan-switch button:active { opacity: 0.85; }
.plan-switch button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.plan-switch button:disabled { opacity: 0.55; cursor: not-allowed; }

/* ================= 4. Vragen ================= */
.faq { padding-top: var(--space-3xl); }
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.faq-grid h2 { grid-column: 1 / 5; }
.faq-list { grid-column: 6 / -1; }
.faq-list details { border-top: 1px solid var(--color-rule); }
.faq-list details:last-child { border-bottom: 1px solid var(--color-rule); }
.faq-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg);
  min-height: 80px; padding-block: var(--space-md); cursor: pointer; list-style: none;
  font: 500 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.015em;
  transition: color var(--dur-short) var(--ease-out);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex-shrink: 0; font: 400 var(--text-xl)/1 var(--font-body); transition: transform var(--dur-short) var(--ease-out); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--color-accent); }
.faq-list summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq-list details p { padding-bottom: var(--space-lg); max-width: 60ch; color: var(--color-ink-2); }
.faq-list details p a { color: var(--color-ink); }

/* ================= 5. Offerte ================= */
.quote { margin-top: var(--section-gap); }
.quote-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.quote-head { grid-column: 1 / 6; display: grid; gap: var(--space-lg); }
.quote-head .lead { color: var(--color-on-night-2); }
.contact { display: grid; gap: var(--space-lg); margin: var(--space-xl) 0 0; }
.contact div { display: grid; gap: var(--space-2xs); }
.contact dt { font-size: var(--text-sm); color: var(--color-on-night-2); }
.contact dd { margin: 0; font-size: var(--text-lead); }
.contact a { text-decoration-thickness: 1px; transition: color var(--dur-short) var(--ease-out); }
.contact a:hover { color: var(--color-on-night-2); }

.quote-side { grid-column: 7 / -1; min-width: 0; }
.quote-form { display: grid; gap: var(--space-xl); }
.form-required { font-size: var(--text-sm); color: var(--color-on-night-2); }
.opt { font-weight: 400; color: var(--color-on-night-2); opacity: 0.85; }
.checks { margin: 0; padding: 0; border: 0; min-width: 0; }
.checks legend { margin-bottom: var(--space-xs); padding: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-on-night-2); }
.check-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--gap-columns); }
.check { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; cursor: pointer; color: var(--color-on-night); font-size: var(--text-md); }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-on-night); flex-shrink: 0; }
.form-privacy { font-size: var(--text-sm); color: var(--color-on-night-2); max-width: 52ch; }
.form-privacy a { color: var(--color-on-night); }
.form-done { display: grid; gap: var(--space-md); padding: var(--space-2xl); border: 1px solid var(--color-night-rule); border-radius: var(--radius-screen); }
.form-done h3 { font-size: var(--text-2xl); line-height: 1.05; }
.form-done p { color: var(--color-on-night-2); max-width: 46ch; }
.form-done a { color: var(--color-on-night); }
.form-done:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.field-group { display: grid; gap: var(--space-2xs); min-width: 0; }
.quote-form label, .quote-form legend { font-size: var(--text-sm); font-weight: 500; color: var(--color-on-night-2); }
.quote-form input[type="text"], .quote-form input[type="email"], .quote-form input[type="tel"], .quote-form select, .quote-form textarea {
  width: 100%; min-height: 52px; padding: 0 var(--space-2xs);
  border: 0; border-bottom: 1px solid var(--color-on-night-2); border-radius: 0;
  background: transparent; color: var(--color-on-night);
  font: 400 var(--text-lg)/1.3 var(--font-body);
  outline: 2px solid transparent; outline-offset: 0;
  transition: border-color var(--dur-short) var(--ease-out);
}
.quote-form textarea { min-height: 128px; padding-block: var(--space-sm); resize: vertical; }
.quote-form select option { color: var(--color-ink); background: var(--color-paper); }
.quote-form input:hover, .quote-form select:hover, .quote-form textarea:hover { border-bottom-color: var(--color-on-night); }
.quote-form input:focus-visible, .quote-form select:focus-visible, .quote-form textarea:focus-visible { outline-color: var(--color-focus); }
.quote-form [aria-invalid="true"] { border-bottom-color: var(--color-error-night); }
.quote-form input:disabled, .quote-form select:disabled, .quote-form textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.select { position: relative; }
.select select { appearance: none; padding-right: var(--space-xl); cursor: pointer; }
.select::after { content: ""; position: absolute; right: var(--space-sm); top: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-75%) rotate(45deg); pointer-events: none; }
.seg { margin: 0; padding: 0; border: 0; min-width: 0; }
.seg legend { margin-bottom: var(--space-xs); padding: 0; }
.seg-options { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); border: 1px solid var(--color-night-rule); color: var(--color-on-night); font-size: var(--text-md); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seg label:hover { background: var(--color-night-2); }
.seg input:checked + label { background: var(--color-on-night); border-color: var(--color-on-night); color: var(--color-night); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg input:disabled + label { opacity: 0.55; cursor: not-allowed; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: grid; gap: var(--space-sm); justify-items: start; }
.form-help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-on-night-2); max-width: 52ch; }
.form-help.is-error { color: var(--color-error-night); }
.form-help.is-ok { color: var(--color-on-night); }

/* ================= Footer: letter close ================= */
.site-footer { padding-block: var(--space-4xl) var(--space-2xl); }
.footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: end; }
.signoff { grid-column: 1 / 8; font: 500 var(--text-poster)/0.9 var(--font-display); letter-spacing: -0.04em; }
.footer-facts { grid-column: 9 / -1; display: grid; gap: var(--space-2xs); color: var(--color-ink-2); }
.footer-name { font: 500 var(--text-xl)/1.1 var(--font-display); color: var(--color-ink); margin-bottom: var(--space-xs); }
.footer-facts a { transition: color var(--dur-short) var(--ease-out); }
.footer-facts a:hover { color: var(--color-accent); text-decoration-thickness: 2px; }

/* ================= Privacyverklaring ================= */
.legal-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.legal-grid h1 { grid-column: 1 / -1; font-weight: 500; font-size: var(--text-poster); line-height: 0.95; letter-spacing: -0.03em; }
.legal-body { grid-column: 6 / -1; display: grid; gap: var(--space-md); }
.legal-body { max-width: 68ch; color: var(--color-ink-2); }
.legal-body .lead { color: var(--color-ink); }
.legal-date { font-size: var(--text-sm); color: var(--color-muted); }
.legal-body h2 { max-width: none; margin-top: var(--space-xl); font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.015em; color: var(--color-ink); }
.legal-body ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2xs); }
.legal-body a:not(.link-action) { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.legal-body a:not(.link-action):hover { color: var(--color-accent); }
.legal-body .link-action { margin-top: var(--space-xl); }

/* ================= Tablet and phone ================= */
@media (max-width: 60rem) {
  :root { --nav-h: 72px; }
  .nav-links li:not(.nav-cta) { display: none; }
  .hero { padding-block: var(--space-xl) 0; }
  .hero-grid { min-height: 0; }
  .hero-grid { row-gap: var(--space-2xl); }
  .hero-text, .hero-steps, .statement-text, .statement-note, .plans-head h2, .plans-note,
  .faq-grid h2, .faq-list, .quote-head, .quote-form, .quote-side, .signoff, .footer-facts, .legal-body,
  .process-head h2, .process-note, .plans-facts-title, .facts, .about-grid h2, .about-body { grid-column: 1 / -1; }
  .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .process-note { margin-top: var(--space-sm); }
  .hero h1 { font-size: clamp(3rem, 11vw, 5rem); }
  .hero-steps { margin-inline: calc(-1 * var(--gutter)); padding: var(--space-2xl) var(--gutter); border-radius: 0; }
  .faq-grid h2 { margin-bottom: var(--space-lg); }
  .quote-head { margin-bottom: var(--space-xl); }

  .plan-switch { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xl); }
  html:not(.js) .plan-switch { display: none; }
  .ledger { display: block; margin-top: var(--space-lg); }
  .ledger .ledger-labels { display: none; }
  .ledger-col { display: block; }
  .js .ledger[data-show="zelf"] .plan:not([data-plan="zelf"]),
  .js .ledger[data-show="zorgeloos"] .plan:not([data-plan="zorgeloos"]),
  .js .ledger[data-show="groei"] .plan:not([data-plan="groei"]) { display: none; }
  .plan + .plan { margin-top: var(--space-xl); }
  .cell { justify-content: space-between; gap: var(--space-md); min-height: 52px; padding-inline: var(--space-lg); text-align: end; }
  .cell[data-label]::before { content: attr(data-label); color: var(--color-muted); text-align: start; }
  .plan--pick .cell[data-label]::before { color: var(--color-on-night-2); }
  .cell--head, .cell--action { text-align: start; }
}
@media (max-width: 40rem) {
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .process-list { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .check-options { grid-template-columns: minmax(0, 1fr); }
  .cell { padding-inline: var(--space-md); }
  .step { grid-template-columns: 3rem minmax(0, 1fr); }
  .step::before { font-size: 3rem; }
  .signoff { font-size: clamp(3.5rem, 18vw, 5rem); }
}

/* ================= Subtiele beweging ================= */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { transform: translateY(16px); opacity: 0.001; transition: transform 700ms var(--ease-out), opacity 700ms var(--ease-out); }
  .js .reveal.is-in { transform: none; opacity: 1; }
  .js .process-step.reveal:nth-child(2) { transition-delay: 80ms; }
  .js .process-step.reveal:nth-child(3) { transition-delay: 160ms; }
  .js .process-step.reveal:nth-child(4) { transition-delay: 240ms; }
  .js .process-step.reveal:nth-child(5) { transition-delay: 320ms; }
}

/* ================= Hero: de preview bouwt zichzelf ================= */
.hero-grid > .hero-steps { flex-direction: column; justify-content: center; align-items: stretch; gap: var(--space-xl); padding-block: var(--space-xl); }
.hero-steps .step { padding-block: var(--space-md); grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--space-md); row-gap: var(--space-2xs); }
.hero-steps .step:first-child { padding-top: 0; }
.hero-steps .step::before { font-size: 2.75rem; }
.hero-steps .step-title { font-size: var(--text-xl); }
.hero-steps .step p { font-size: var(--text-sm); }
.js .hero-steps.is-playing .step { animation: none; transition: opacity 400ms var(--ease-out); }
.js .hero-steps.is-playing .step:not(.is-active) { opacity: 0.5; }

.pv-wrap { position: relative; }
.pv {
  --pv-paper: #fbf9f8; --pv-ink: #1d1416; --pv-accent: oklch(38% 0.13 15); --pv-ph: oklch(88% 0.006 60);
  container-type: inline-size; position: relative; overflow: hidden;
  border-radius: 10px; background: var(--pv-paper); color: var(--pv-ink);
  box-shadow: 0 24px 60px -24px oklch(10% 0.05 15 / 0.7), 0 0 0 1px oklch(100% 0 0 / 0.08);
}
.pv-bar { display: flex; align-items: center; gap: 3cqw; height: max(28px, 6.4cqw); padding-inline: 3cqw; background: #ece6df; border-bottom: 1px solid #ddd5cc; font: 500 max(10px, 2.3cqw)/1 var(--font-body); }
.pv-dots { display: flex; gap: 1.2cqw; }
.pv-dots i { width: max(7px, 1.6cqw); aspect-ratio: 1; border-radius: 50%; background: #cfc6bc; }
.pv-url { flex: 1; display: flex; align-items: center; gap: 1.2cqw; height: 70%; padding-inline: 2.4cqw; border-radius: 99px; background: #fff; color: #5b5450; overflow: hidden; white-space: nowrap; }
.pv-lock { flex-shrink: 0; color: #3f6b4c; transition: opacity 300ms; }
.pv-url-text::after { content: ""; display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; background: currentColor; opacity: 0; }
.pv[data-phase="3"].is-typing .pv-url-text::after { opacity: 1; }
.pv-live { display: inline-flex; align-items: center; gap: 1cqw; padding: 0.8cqw 1.8cqw; border-radius: 99px; background: #dcebdf; color: #24563a; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.pv-live i { width: max(6px, 1.2cqw); aspect-ratio: 1; border-radius: 50%; background: #2f8a52; box-shadow: 0 0 0 0 #2f8a5266; }
.pv[data-phase="3"] .pv-live i { animation: pv-pulse 1.6s ease-out infinite; }
@keyframes pv-pulse { to { box-shadow: 0 0 0 1.4cqw #2f8a5200; } }

.pv-site { position: relative; }
.pv-nav { display: flex; align-items: center; gap: 4cqw; height: 9cqw; padding-inline: 4cqw; }
.pv-logo { font: 500 3cqw/1 var(--font-display); letter-spacing: -0.02em; }
.pv-links { display: flex; gap: 2.4cqw; margin-left: auto; }
.pv-links i { width: 7cqw; height: 1cqw; border-radius: 99px; background: #c9c1b8; }
.pv-cta { padding: 1.4cqw 2.6cqw; border-radius: 99px; background: var(--pv-ink); color: var(--pv-paper); font: 500 2.1cqw/1 var(--font-body); }
.pv-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4cqw; align-items: center; margin: 1cqw 4cqw 3cqw; }
.pv-copy { display: grid; justify-items: start; gap: 2.2cqw; }
.pv-kicker { font: 500 1.9cqw/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: oklch(38% 0.13 15); }
.pv-h { font: 500 7.6cqw/0.92 var(--font-display); letter-spacing: -0.035em; color: var(--pv-ink); }
.pv-lines { display: grid; gap: 1.2cqw; width: 100%; }
.pv-lines i { display: block; height: 1.3cqw; border-radius: 99px; background: #d9d0c8; }
.pv-lines i:last-child { width: 70%; }
.pv-btn { padding: 1.8cqw 3cqw; border-radius: 99px; background: oklch(38% 0.13 15); color: #fff; font: 500 2.1cqw/1 var(--font-body); border: 1px solid transparent; }
.pv-art { position: relative; aspect-ratio: 1; border-radius: 1.6cqw; overflow: hidden; background: oklch(31% 0.1 15); transition: background-color 600ms var(--ease-out); }
.pv-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-x { opacity: 0; transition: opacity 300ms; }
.pv-shapes > * { transform-box: fill-box; transform-origin: center; transition: transform 800ms var(--ease-out), opacity 500ms var(--ease-out); }
.pv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin: 0 4cqw 4cqw; }
.pv-card { display: flex; align-items: flex-end; height: 7.5cqw; padding: 1.6cqw; border-radius: 1.2cqw; background: #efe7e2; font: 500 2.2cqw/1 var(--font-display); color: var(--pv-ink); }
.pv-ph { transition: color 500ms var(--ease-out), background-color 500ms var(--ease-out), border-color 500ms, outline-color 500ms; }

/* fase 0: wireframe. Grijze blokken, stippellijnen, een leeg vak met een kruis */
.pv[data-phase="0"] .pv-ph { color: transparent; background-color: var(--pv-ph); border-radius: 0.8cqw; }
.pv[data-phase="0"] .pv-btn, .pv[data-phase="0"] .pv-cta { background-color: transparent; border: 1px dashed #8d857c; border-radius: 99px; }
.pv[data-phase="0"] .pv-card { background-color: transparent; border: 1px dashed #b5aca4; }
.pv[data-phase="0"] .pv-art { background: transparent; outline: 1px dashed #a69c94; outline-offset: -1px; }
.pv[data-phase="0"] .pv-x { opacity: 1; }
.pv[data-phase="0"] .pv-s1 { transform: scale(0.2); opacity: 0; }
.pv[data-phase="0"] .pv-s2 { transform: translateY(40%); opacity: 0; }
.pv[data-phase="0"] .pv-s3 { transform: rotate(-60deg); opacity: 0; }
.pv[data-phase="0"] .pv-s4 { transform: translateX(30%); opacity: 0; }
.pv-cta { border: 1px solid transparent; }
.pv[data-phase="1"] .pv-logo { transition-delay: 100ms; }
.pv[data-phase="1"] .pv-kicker { transition-delay: 250ms; }
.pv[data-phase="1"] .pv-h { transition-delay: 400ms; }
.pv[data-phase="1"] .pv-btn { transition-delay: 600ms; }
.pv[data-phase="1"] .pv-s1 { transition-delay: 500ms; }
.pv[data-phase="1"] .pv-s2 { transition-delay: 650ms; }
.pv[data-phase="1"] .pv-s3 { transition-delay: 800ms; }
.pv[data-phase="1"] .pv-s4 { transition-delay: 950ms; }
.pv[data-phase="1"] .pv-card:nth-child(1) { transition-delay: 800ms; }
.pv[data-phase="1"] .pv-card:nth-child(2) { transition-delay: 900ms; }
.pv[data-phase="1"] .pv-card:nth-child(3) { transition-delay: 1000ms; }

/* fase 2: kiezen */
.pv-choose { z-index: 2; position: absolute; left: 3cqw; right: 3cqw; bottom: 3cqw; display: flex; align-items: center; flex-wrap: wrap; gap: 1.6cqw; padding: 2.4cqw; border-radius: 1.6cqw; background: #fff; box-shadow: 0 10px 30px -10px #0005; font: 500 2.3cqw/1 var(--font-body); transform: translateY(130%); opacity: 0; transition: transform 500ms var(--ease-out), opacity 300ms var(--ease-out); }
.pv-choose-t { margin-right: auto; color: #6b625c; }
.pv-chip { padding: 1.4cqw 2.4cqw; border-radius: 99px; border: 1px solid #ddd5cc; transition: background-color 200ms, color 200ms, transform 160ms var(--ease-out); }
.pv[data-phase="2"] .pv-choose { transform: none; opacity: 1; }
.pv.is-picked .pv-chip--pick { background: oklch(31% 0.1 15); border-color: oklch(31% 0.1 15); color: #fff; }
.pv.is-pressing .pv-chip--pick { transform: scale(0.94); }
.pv-cursor { z-index: 3; position: absolute; left: 40%; top: 40%; width: max(14px, 3.4cqw); height: auto; opacity: 0; pointer-events: none; transition: left 900ms var(--ease-in-out), top 900ms var(--ease-in-out), opacity 250ms; }
.pv[data-phase="2"] .pv-cursor { opacity: 1; }

@container (max-width: 440px) { .pv-choose-t { display: none; } .pv-choose { justify-content: flex-end; } }

/* fase 3: online */
.pv:not([data-phase="3"]) .pv-live { opacity: 0; transform: scale(0.9); }
.pv:not([data-phase="3"]) .pv-lock { opacity: 0.35; }

.pv-pause { position: absolute; right: var(--space-xs); bottom: calc(-1 * var(--space-lg) - 4px); padding: 2px 0; border: 0; background: none; color: var(--color-on-night-2); font: 500 var(--text-xs)/1.4 var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.pv-pause:hover { color: var(--color-on-night); }
.pv-pause:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ================= Pakkethulp ================= */
html:not(.js) .advisor { display: none; }
.advisor { margin-top: var(--space-2xl); border: 1px solid var(--color-rule); border-radius: var(--radius-screen); background: var(--color-paper-2); overflow: hidden; }
.advisor-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); padding: var(--space-lg) var(--space-xl); }
.advisor-title { font-size: var(--text-xl); line-height: 1.1; }
.advisor-sub { margin-top: var(--space-2xs); color: var(--color-ink-2); }
.advisor.is-open .advisor-intro { display: none; }
.advisor-body { padding: var(--space-xl); }
.advisor-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.advisor-count { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.advisor-bar { display: flex; gap: 6px; }
.advisor-bar i { width: 40px; height: 4px; border-radius: 99px; background: var(--color-rule); transition: background-color 300ms var(--ease-out); }
.advisor-bar i.is-done { background: var(--color-night); }
.advisor-stage { margin-top: var(--space-lg); }
.advisor-q { font: 500 var(--text-2xl)/1.1 var(--font-display); letter-spacing: -0.02em; max-width: 26ch; }
.advisor-hint { margin-top: var(--space-xs); color: var(--color-ink-2); max-width: 60ch; }
.advisor-opts { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.advisor-opt { min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-md)/1.2 var(--font-body); cursor: pointer; text-align: left; transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out); }
.advisor-opt:hover { background: var(--color-ink); color: var(--color-paper); }
.advisor-opt:active { transform: scale(0.97); }
.advisor-opt:focus-visible, .advisor-again:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.advisor-anim { animation: adv-in 320ms var(--ease-out) both; }
@keyframes adv-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.advisor-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md) var(--space-2xl); align-items: end; }
.advisor-result:focus { outline: none; }
.advisor-kicker { font-size: var(--text-sm); color: var(--color-muted); }
.advisor-plan { margin-top: var(--space-2xs); font: 500 var(--text-section)/0.95 var(--font-display); letter-spacing: -0.03em; color: var(--color-night); }
.advisor-why { margin-top: var(--space-md); max-width: 58ch; color: var(--color-ink-2); }
.advisor-price { margin-top: var(--space-sm); font-weight: 500; color: var(--color-ink); }
.advisor-note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.advisor-actions { display: grid; justify-items: start; gap: var(--space-md); }
.advisor-again { padding: 0; border: 0; background: none; color: var(--color-ink); font: 500 var(--text-md)/1.4 var(--font-body); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.plan.is-match { outline: 2px solid var(--color-ink); outline-offset: 6px; border-radius: var(--radius-screen); }
.plan--pick.is-match { outline-color: var(--color-night); }
@media (prefers-reduced-motion: no-preference) { .plan.is-match { animation: match 700ms var(--ease-out); } }
@keyframes match { from { outline-offset: 18px; outline-color: transparent; } }

/* ================= Formulier in drie stappen ================= */
.form-step { display: grid; gap: var(--space-xl); }
.form-step + .form-step { padding-top: var(--space-xl); border-top: 1px solid var(--color-night-3); }
.form-step-title { display: grid; gap: var(--space-2xs); font-size: var(--text-xl); line-height: 1.1; color: var(--color-on-night); }
.form-step-title:focus { outline: none; }
.form-step-num { font: 500 var(--text-xs)/1 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-on-night-2); }
.form-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.form-back { min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-on-night); font: 500 var(--text-md)/1.4 var(--font-body); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.form-back:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.form-progress { display: none; }
html:not(.js) .form-nav [data-next], html:not(.js) .form-nav [data-prev] { display: none; }
.js .form-step + .form-step { padding-top: 0; border-top: 0; }
.js .form-step-num { display: none; }
.js .form-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.form-progress li { display: flex; align-items: center; gap: var(--space-xs); padding-top: var(--space-sm); border-top: 3px solid var(--color-night-3); color: var(--color-on-night-2); font-size: var(--text-sm); transition: border-color 300ms var(--ease-out), color 300ms var(--ease-out); }
.form-progress li span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.form-progress li.is-current, .form-progress li.is-done { border-top-color: var(--color-on-night); color: var(--color-on-night); }
.form-progress li.is-done span { background: var(--color-on-night); color: var(--color-night); border-color: var(--color-on-night); }
@media (prefers-reduced-motion: no-preference) { .js .form-step.is-entering { animation: adv-in 320ms var(--ease-out) both; } }

@media (max-width: 60rem) {
  .hero-steps { gap: var(--space-xl); }
  .advisor-result { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .advisor-intro, .advisor-body { padding: var(--space-lg); }
  .advisor-opt { width: 100%; }
  .form-progress li { font-size: var(--text-xs); }
  .pv-links { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pv *, .pv { transition: none !important; animation: none !important; }
}