/* Nehlee prototype — gedeelde stijl
   Naamgeving: BEM (block__element--modifier) met Engelse namen; toestanden die JS zet heten is-*.
   Kleur: off-black + wit + jade (besluit 2026-10-12). Jade is de actiekleur: alle hoofdknoppen, en accenten
   op donkere vlakken. Op wit is het accent off-black; jade staat nooit als tekst op wit. */

/* ── Tokens ─────────────────────────────── */
:root {
  --color-ink: #1b1e23;
  --color-text: #3d4249;
  --color-muted: #6b7079;
  --color-line: #e3e5e2;
  --color-light: #f4f5f3;
  --color-white: #ffffff;
  --color-brand: #4cc98a;
  --color-brand-soft: #d6f2e3;
  /* Donkere vlakken (hero, afsluiter, header, uitgelicht pakket): off-black met wat licht van boven */
  --color-dark: var(--color-ink);
  --color-header: #24282E;
  --color-dark-glow: #2c3139;
  /* Tekst op donkere vlakken: koppen en knoppen puur wit, lopende tekst iets zachter */
  --color-on-dark: rgba(255,255,255,.88);
  --color-on-dark-muted: rgba(255,255,255,.78);
  --radius: 16px;
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-height: 84px;
  --font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --shadow: 0 50px 100px -40px rgba(0, 0, 0, .65), 0 20px 40px -30px rgba(0, 0, 0, .5);
}

/* ── Lettertypes ───────────────────────── */
/* Lokaal gehost (geen Google Fonts: dan gaat het IP-adres van elke bezoeker naar Google). Latin en latin-ext,
   de browser haalt alleen op wat de pagina nodig heeft. Licentie: assets/fonts/LICENTIE.md.
   Young Serif is alleen voor de nep-bakkerijsite in de hero. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/barlow-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/barlow-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/barlow-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/barlow-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/barlow-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/barlow-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/barlow-condensed-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/barlow-condensed-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/fonts/barlow-condensed-800-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/fonts/barlow-condensed-800-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/young-serif-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/young-serif-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Basis ──────────────────────────────── */
* { box-sizing: border-box; }
/* Verborgen is verborgen, ook als een class display zet (bijv. de bevestiging onder een formulier) */
[hidden] { display: none !important; }
/* Zichtbare focus op elke ondergrond: off-black ring direct om het element, witte ring eromheen */
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-ink); border-radius: 4px; }
html { scroll-behavior: smooth; background: var(--color-dark); }
main { display: block; background: var(--color-white); }
/* Donker op body: Safari op iOS kleurt de statusbalk naar body (theme-color wordt genegeerd); de pagina zelf is wit via main */
body { margin: 0; background: var(--color-dark); color: var(--color-ink); font: 400 18px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 800; line-height: .94; letter-spacing: -.005em; margin: 0; }
h1 { font-size: clamp(3rem, 4.9vw, 4.6rem); }
h2 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); }
h3 { font-size: 1.8rem; line-height: 1; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.section--light { background: var(--color-light); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Placeholder in het prototype: nog in te vullen of te controleren */
.todo { font: 600 11px/1 var(--font-body); background: #fff3c4; color: #6b5800; border: 1px dashed #c9a400; border-radius: 5px; padding: 3px 6px; vertical-align: middle; line-height: 1.6; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.counter { display: inline-block; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }

/* Donkere vlakken: licht van boven, korrel eroverheen */
.hero, .page-hero, .section--dark, .card--dark { background: var(--color-dark); color: var(--color-white); position: relative; isolation: isolate; }
:is(.hero, .page-hero, .section--dark, .card--dark)::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(1200px 600px at 85% -10%, var(--color-dark-glow), transparent 60%),
    radial-gradient(800px 500px at 0% 110%, rgba(0,0,0,.35), transparent 60%); pointer-events: none; }
:is(.hero, .page-hero, .section--dark, .card--dark)::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .07; mix-blend-mode: overlay; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── Knoppen en links ───────────────────── */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 17px 28px; border-radius: 10px; font: 600 17px/1 var(--font-body); text-decoration: none; border: 0; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; position: relative; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
/* Jade = actie: elke hoofdknop jade met off-black tekst, ook op wit (8:1) */
.btn--primary { background: var(--color-brand); color: var(--color-ink); box-shadow: 0 10px 30px -14px rgba(0,0,0,.45); }
.btn--outline { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-ink); }
.btn--outline:hover { background: var(--color-ink); color: var(--color-white); }
.link { font-weight: 600; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.arrow { display: inline-block; transition: transform .2s ease; }
.btn:hover .arrow, .link:hover .arrow { transform: translateX(4px); }

/* ── Verschijnen bij scrollen ───────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .12s; } .reveal[data-delay="2"] { transition-delay: .24s; } .reveal[data-delay="3"] { transition-delay: .36s; }
/* Koppen die woord voor woord verschijnen (site.js knipt de kop in woorden) */
.split-heading__word { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .04em .16em 0; margin-bottom: -.16em; }
.split-heading__word-inner { display: inline-block; transform: translateY(110%); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.split-heading.is-visible .split-heading__word-inner { transform: none; }

/* ── Header ─────────────────────────────── */
/* Bovenaan transparant over de hero; pas bij scrollen een achtergrond */
.site-header { position: sticky; top: 0; z-index: 30; background: transparent; margin-bottom: calc(-1 * var(--header-height)); transition: background .3s ease, box-shadow .3s ease; }
.site-header.is-scrolled { background: var(--color-dark); box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 20px 40px -30px rgba(0,0,0,.7); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); gap: 24px; }
.site-header__logo-img { height: 26px; width: auto; }
.site-header__menu-toggle { display: none; background: none; color: var(--color-white); border: 1.5px solid rgba(255,255,255,.5); border-radius: 8px; padding: 9px 14px; font: 600 15px var(--font-body); cursor: pointer; }
.site-nav { display: flex; align-items: center; gap: 32px; color: var(--color-white); }
.site-nav__link { text-decoration: none; font-weight: 500; font-size: 16px; position: relative; }
.site-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--color-brand); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.site-nav__link:hover::after, .site-nav__link--active::after { transform: scaleX(1); }
.site-nav__cta { padding: 12px 20px; font-size: 16px; font-weight: 500; }

/* ── Hero (homepage) ────────────────────── */
.hero { padding: calc(var(--header-height) + clamp(48px, 6vw, 88px)) 0 clamp(96px, 10vw, 150px); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.hero__highlight { font-style: normal; color: var(--color-brand); }
.hero__intro { font-size: clamp(1.1rem, 1.5vw, 1.3rem); max-width: 34ch; margin-top: 30px; color: var(--color-on-dark); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-top: 40px; }
.hero__note { margin-top: 26px; font-size: 15px; color: var(--color-on-dark-muted); }

/* Het podium: de website van de klant, met de chat ervoor.
   Loopt rechts tot over de schermrand; de tekst blijft op de contentlijn */
.showcase { position: relative; padding: 0 0 72px 64px; margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--container)) / 2))); }

.browser { background: #fff; color: var(--color-ink); border-radius: 14px; overflow: hidden; max-width: 880px; container-type: inline-size; box-shadow: var(--shadow); transform: perspective(1800px) rotateY(-3deg) rotateX(1.5deg); transform-origin: left center; }
.browser__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f1f2f0; border-bottom: 1px solid #e2e4e1; }
.browser__dot { width: 10px; height: 10px; border-radius: 50%; background: #d7d9d6; }
.browser__url { flex: 1; margin-left: 8px; background: #fff; border-radius: 6px; padding: 5px 10px; font-size: 12px; color: var(--color-muted); display: flex; align-items: center; gap: 6px; }
.browser__url::before { content: "🔒"; font-size: 10px; }

/* De nepwebsite van de klant (Bakkerij Bloem): moet eruitzien als iets wat Nehlee oplevert */
.bakery { --bakery-room: #f7f1e6; --bakery-room-2: #efe6d6; --bakery-ink: #2a1d12; --bakery-muted: #7a6a5a; --bakery-accent: #b4562d; --bakery-heading: "Young Serif", Georgia, serif;
  background: var(--bakery-room); color: var(--bakery-ink); font-size: 12.5px; line-height: 1.4; height: 540px; overflow: hidden; position: relative; }
.bakery__banner { position: relative; z-index: 3; background: var(--bakery-accent); color: #fff; text-align: center; font-weight: 600; font-size: 11.5px; padding: 0 12px; max-height: 0; overflow: hidden; transition: max-height .5s ease, padding .5s ease; }
.bakery--holiday .bakery__banner { max-height: 40px; padding: 7px 12px; }
.bakery__nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px; position: absolute; left: 0; right: 0; top: 0; z-index: 2; color: #fff; }
.bakery__logo { font: 400 19px/1 var(--bakery-heading); letter-spacing: -.01em; }
.bakery__logo-accent { color: #f0b98f; }
.bakery__links { display: flex; gap: 16px; font-size: 11.5px; color: rgba(255,255,255,.85); }
.bakery__button { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); color: #fff; font-size: 11px; font-weight: 600; padding: 7px 12px; border-radius: 999px; }

/* Foto's: eerst de oude (wat gedateerd), bij "nieuwe foto's" schuiven de nieuwe eroverheen */
.bakery__photo { position: relative; overflow: hidden; background: #ddd center/cover no-repeat; border-radius: 10px; }
.bakery__photo::before { content: ""; position: absolute; inset: 0; background: inherit; filter: sepia(.45) saturate(.6) contrast(.82) brightness(.95); }
.bakery__photo::after { content: ""; position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity .6s ease, transform .9s ease; background: center/cover no-repeat; }
.bakery--new-photos .bakery__photo::after { opacity: 1; transform: none; }
.bakery--new-photos .bakery__photo[data-photo="2"]::after { transition-delay: .15s; } .bakery--new-photos .bakery__photo[data-photo="3"]::after { transition-delay: .3s; }
.bakery--new-photos .bakery__photo[data-photo="4"]::after { transition-delay: .45s; }
.bakery__photo[data-photo="1"] { background-image: url(assets/bakkerij-oud-2.jpg); } .bakery__photo[data-photo="1"]::after { background-image: url(assets/bakkerij-nieuw-5.jpg); }
.bakery__photo[data-photo="2"] { background-image: url(assets/bakkerij-oud-4.jpg); } .bakery__photo[data-photo="2"]::after { background-image: url(assets/bakkerij-nieuw-1.jpg); }
.bakery__photo[data-photo="3"] { background-image: url(assets/bakkerij-oud-1.jpg); } .bakery__photo[data-photo="3"]::after { background-image: url(assets/bakkerij-nieuw-3.jpg); }
.bakery__photo[data-photo="4"] { background-image: url(assets/bakkerij-oud-5.jpg); } .bakery__photo[data-photo="4"]::after { background-image: url(assets/bakkerij-nieuw-6.jpg); }
.bakery__photo--cover { position: absolute; inset: 0; border-radius: 0; }
.bakery__photo--thumb { width: 46px; height: 34px; border-radius: 6px; flex: none; }

/* Hero van de bakkerij: sfeerfoto over de volle breedte, tekst erop */
.bakery__hero { position: relative; height: 340px; color: #fff; transition: height .5s ease; }
.bakery--holiday .bakery__hero { height: 300px; }
.bakery__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20,12,6,.8) 0%, rgba(20,12,6,.45) 45%, rgba(20,12,6,.08) 75%), linear-gradient(to bottom, rgba(20,12,6,.5), transparent 30%); pointer-events: none; }
.bakery__hero-text { position: absolute; left: 28px; top: 72px; max-width: 330px; z-index: 1; }
.bakery__kicker { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #f0b98f; font-weight: 600; margin-bottom: 10px; }
.bakery__title { font: 400 38px/1 var(--bakery-heading); letter-spacing: -.02em; margin: 0 0 12px; text-shadow: 0 2px 20px rgba(0,0,0,.25); }
.bakery__lead { color: rgba(255,255,255,.85); font-size: 12.5px; max-width: 32ch; margin: 0 0 16px; }
.bakery__cta { display: inline-block; background: var(--bakery-accent); color: #fff; font-weight: 600; font-size: 11.5px; padding: 8px 14px; border-radius: 999px; }

.bakery__bottom { display: grid; grid-template-columns: 170px 1fr 180px; gap: 22px; padding: 16px 28px 16px; background: #fff; }
.bakery__heading { font: 400 15px var(--bakery-heading); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.bakery__hours { font-size: 11.5px; color: var(--bakery-muted); display: grid; gap: 3px; }
.bakery__hours-row { display: flex; justify-content: space-between; gap: 8px; }
.bakery__day { color: var(--bakery-ink); font-weight: 600; }
.bakery__chip { font: 600 9.5px/1 var(--font-body); background: #fbe3d6; color: #8a3b17; border-radius: 999px; padding: 3px 8px; opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .4s ease; }
.bakery--new-prices .bakery__chip { opacity: 1; transform: none; }
.bakery__products { display: grid; gap: 7px; }
.bakery__product { display: flex; align-items: center; gap: 10px; }
.bakery__product-name { flex: 1; font-size: 12px; font-weight: 600; line-height: 1.2; }
.bakery__price { font-size: 12px; color: var(--bakery-muted); position: relative; transition: color .3s ease; display: inline-block; }
.bakery--new-prices .bakery__price { color: var(--bakery-accent); font-weight: 600; }
.bakery--new-prices .bakery__price::after { content: ""; position: absolute; inset: -3px -6px; border-radius: 4px; background: #fbe3d6; z-index: -1; animation: flash 1.6s ease forwards; }
@keyframes flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.bakery__news { display: grid; gap: 8px; }
.bakery__post { display: flex; gap: 9px; align-items: center; }
.bakery__post-thumb { width: 42px; height: 32px; border-radius: 5px; background: var(--bakery-room-2) center/cover no-repeat; flex: none; }
.bakery__post-title { display: block; font-size: 11.5px; line-height: 1.2; font-weight: 600; }
.bakery__post-date { color: var(--bakery-muted); font-size: 10px; }
.bakery__post--new { max-height: 0; opacity: 0; overflow: hidden; transform: translateX(-8px); transition: max-height .5s ease, opacity .5s ease .1s, transform .5s ease .1s; }
.bakery__post--new .bakery__post-thumb { background-image: url(assets/bakkerij-nieuw-1.jpg); }
.bakery--new-post .bakery__post--new { max-height: 40px; opacity: 1; transform: none; }

.bakery__footer { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: 9px 28px; background: var(--bakery-ink); color: rgba(255,255,255,.7); font-size: 10.5px; }
.bakery__status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: rgba(255,255,255,.7); transition: color .3s ease; }
.bakery__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6b6459; transition: background .3s ease, box-shadow .3s ease; }
.bakery--updated .bakery__status { color: #8be0a8; }
.bakery--updated .bakery__status::before { background: #2fb36a; box-shadow: 0 0 0 4px rgba(47,179,106,.18); animation: pulse 1.4s ease 2; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(47,179,106,.05); } }
.bakery__status-text::after { content: attr(data-old); }
.bakery--updated .bakery__status-text::after { content: attr(data-new); }

/* Smal browservenster (bv. op 1200 px of gestapeld): compacter, nieuws en menu weg */
@container (max-width: 660px) {
  .bakery__bottom { grid-template-columns: 150px 1fr; gap: 22px; }
  .bakery__news-col { display: none; }
  .bakery__hero { height: 290px; }
  .bakery__hero-text { max-width: 280px; top: 70px; }
  .bakery__title { font-size: 32px; }
  .bakery__lead { font-size: 11.5px; }
  .bakery__links { display: none; }
}

/* Wijzigingen laten opvallen: korte ring rond wat verandert + label onderin de browser */
.bakery .is-highlighted { animation: highlight 2.2s ease forwards; }
@keyframes highlight { 0% { box-shadow: 0 0 0 0 rgba(180,86,45,0); } 12% { box-shadow: 0 0 0 4px var(--bakery-accent); } 100% { box-shadow: 0 0 0 4px rgba(180,86,45,0); } }
.bakery__price.is-highlighted { border-radius: 4px; }
.bakery__toast { position: absolute; right: 16px; bottom: 44px; background: var(--color-ink); color: #fff; font: 600 11.5px var(--font-body); padding: 8px 12px 8px 10px; border-radius: 999px; display: flex; align-items: center; gap: 7px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; z-index: 3; }
.bakery__toast::before { content: "✓"; color: var(--color-brand); font-weight: 800; }
.bakery__toast.is-visible { opacity: 1; transform: none; }

/* ── Chat: in de hero (vóór de browser) en als demo in de afsluiter ── */
.chat { background: var(--color-white); color: var(--color-ink); border-radius: 22px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.chat--hero { position: absolute; left: 0; bottom: 0; z-index: 2; width: 280px; height: 330px; padding: 16px 16px 18px; }
.chat--demo { height: 500px; padding: 18px; }
.chat__header { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--color-line); margin-bottom: 10px; font-size: 14px; }
.chat__avatar, .report-chat__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--color-ink); color: var(--color-white); display: grid; place-items: center; font: 800 13px var(--font-heading); flex: none; }
.chat__status { display: block; color: var(--color-muted); font-size: 12px; }
.chat__online { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: #3fb96b; box-shadow: 0 0 0 3px rgba(63,185,107,.2); }
.chat__label { margin-left: auto; font: 600 11px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); border: 1px solid var(--color-line); border-radius: 999px; padding: 5px 9px; }
.chat__thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; overflow: hidden; font-size: 14px; line-height: 1.38; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 56px); mask-image: linear-gradient(to bottom, transparent, #000 56px); }
.chat--demo .chat__thread { font-size: 15px; justify-content: flex-start; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px); mask-image: linear-gradient(to bottom, transparent, #000 40px); }
.chat--demo .chat__thread::-webkit-scrollbar { display: none; }
.chat--demo .chat__thread > :first-child { margin-top: auto; }

.chat__message { max-width: 86%; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease, max-height .4s ease, margin .4s ease; }
.chat__message.is-visible { opacity: 1; transform: none; }
.chat__message.is-leaving { opacity: 0; max-height: 0 !important; margin-top: -7px; overflow: hidden; }
.chat__message--client { align-self: flex-start; }
.chat__message--nehlee { align-self: flex-end; text-align: right; }
.chat__bubble { display: inline-block; text-align: left; padding: 9px 13px; border-radius: 15px; }
.chat__message--client .chat__bubble { background: #eeefed; border-bottom-left-radius: 4px; }
.chat__message--nehlee .chat__bubble { background: var(--color-ink); color: var(--color-white); border-bottom-right-radius: 4px; }
.chat__message--done .chat__bubble::after { content: " ✓"; color: var(--color-brand); font-weight: 700; }
.chat__file { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.chat__file::before { content: ""; width: 24px; height: 30px; border-radius: 4px; background: currentColor; opacity: .18; }
.chat__time { display: block; font-size: 10.5px; opacity: .5; margin-top: 2px; }
.chat__day { align-self: center; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .5; padding: 4px 0; }
.chat__typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.chat__typing-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; animation: blink 1.2s infinite; }
.chat__typing-dot:nth-child(2) { animation-delay: .2s; } .chat__typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 30% { opacity: .9; } }

/* Alleen in de demo: lege staat, afsluitende zin, suggesties en invoer */
.chat__empty { color: var(--color-muted); font-size: 15px; align-self: center; text-align: center; padding: 20px; max-width: 32ch; }
.chat__outro { align-self: center; text-align: center; font-size: 14px; color: var(--color-muted); margin-top: 24px; max-width: 36ch; padding: 10px 0 2px; opacity: 0; transition: opacity .5s ease; }
.chat__outro.is-visible { opacity: 1; }
.chat__outro-link { color: var(--color-ink); font-weight: 600; text-underline-offset: 4px; }
.chat__suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chat__suggestion { flex: none; border: 0; border-radius: 999px; background: var(--color-brand); color: var(--color-ink); font: 500 13px var(--font-body); padding: 7px 11px; cursor: pointer; }
.chat__suggestion:hover { background: var(--color-brand-soft); }
.chat__form { display: flex; gap: 8px; margin-top: 12px; border-top: 1px solid var(--color-line); padding-top: 12px; }
.chat__input { flex: 1; border: 1.5px solid var(--color-line); border-radius: 12px; padding: 13px 16px; font: 500 16px var(--font-body); color: var(--color-ink); outline: none; min-width: 0; background: var(--color-white); }
.chat__input:focus { border-color: var(--color-ink); }
.chat__send { width: 50px; flex: none; border: 0; border-radius: 12px; background: var(--color-brand); color: var(--color-ink); font-size: 20px; cursor: pointer; }

/* ── Bewijsstrook onder de hero ─────────── */
.proof { background: var(--color-ink); color: var(--color-on-dark); border-top: 1px solid rgba(255,255,255,.1); }
.proof__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: center; padding: 26px 16px; }
.proof__item { padding: 26px 16px; font-size: 15px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.proof__item + .proof__item { border-left: 1px solid rgba(255,255,255,.12); }
.proof__value { font: 800 2rem/1 var(--font-heading); color: var(--color-white); white-space: nowrap; }

/* ── Live gaan is pas het begin ─────────── */
.problem__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.problem__text { margin-top: 28px; max-width: 42ch; color: var(--color-text); font-size: 20px; }

/* Ergernissen die worden doorgestreept, met onderaan wat wij doen */
.strike-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.strike-list__item { font: 700 clamp(1.6rem, 3vw, 2.6rem)/1.15 var(--font-heading); color: var(--color-muted); position: relative; width: fit-content; }
.strike-list__item::after { content: ""; position: absolute; left: -6px; right: -6px; top: 52%; height: 5px; background: var(--color-ink); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.strike-list.is-visible .strike-list__item::after { transform: scaleX(1); }
.strike-list.is-visible .strike-list__item:nth-child(2)::after { transition-delay: .3s; } .strike-list.is-visible .strike-list__item:nth-child(3)::after { transition-delay: .6s; } .strike-list.is-visible .strike-list__item:nth-child(4)::after { transition-delay: .9s; }
.strike-list__item--ours { color: var(--color-ink); font-size: clamp(2rem, 4vw, 3.4rem); margin-top: 18px; opacity: 0; transform: translateY(10px); transition: opacity .6s ease 1.3s, transform .6s ease 1.3s; }
.strike-list__item--ours::after { display: none; }
.strike-list.is-visible .strike-list__item--ours { opacity: 1; transform: none; }
.problem__list { margin-top: 36px; }

/* Chat waarin Nehlee zelf meldt wat er gedaan is (anders dan de hero, waar de klant vraagt) */
.report-chat { background: var(--color-white); border: 1px solid var(--color-line); border-radius: 22px; padding: 18px; box-shadow: 0 40px 70px -45px rgba(0,0,0,.45); max-width: 460px; width: 100%; justify-self: end; }
.report-chat__header { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--color-line); margin-bottom: 14px; }
.report-chat__status { display: block; color: var(--color-text); font-size: 12.5px; }
.report-chat__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; }
.report-chat__item { max-width: 86%; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.report-chat.is-visible .report-chat__item { opacity: 1; transform: none; }
.report-chat.is-visible .report-chat__item:nth-child(2) { transition-delay: .3s; } .report-chat.is-visible .report-chat__item:nth-child(3) { transition-delay: 1s; } .report-chat.is-visible .report-chat__item:nth-child(4) { transition-delay: 1.7s; } .report-chat.is-visible .report-chat__item:nth-child(5) { transition-delay: 2.4s; } .report-chat.is-visible .report-chat__item:nth-child(6) { transition-delay: 3.1s; }
.report-chat__bubble { display: inline-block; padding: 10px 14px; border-radius: 16px; text-align: left; }
.report-chat__item--nehlee { align-self: flex-end; text-align: right; }
.report-chat__item--nehlee .report-chat__bubble { background: var(--color-ink); color: var(--color-white); border-bottom-right-radius: 4px; }
.report-chat__item--client { align-self: flex-start; }
.report-chat__item--client .report-chat__bubble { background: #eeefed; color: var(--color-ink); border-bottom-left-radius: 4px; }
.report-chat__check { color: var(--color-brand); font-weight: 700; }
.report-chat__time { display: block; font-size: 11px; color: var(--color-text); margin-top: 3px; }
.report-chat__day { align-self: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text); }
@media (prefers-reduced-motion: reduce) { .report-chat__item { opacity: 1; transform: none; transition: none; } }

/* ── Wat je krijgt ──────────────────────── */
.benefits__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.benefits__intro { position: sticky; top: 120px; }
.benefits__intro-text { color: var(--color-text); margin-top: 20px; max-width: 34ch; }
.benefits__list { border-top: 2px solid var(--color-ink); }
.benefits__item { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--color-line); align-items: start; }
.benefits__text { color: var(--color-text); }

/* ── Sectiekop: kop met korte tekst ernaast ── */
.section-header { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-bottom: 64px; }
.section-header__text { color: var(--color-text); max-width: 42ch; }
.section-header--on-dark .section-header__text { color: var(--color-on-dark); }
.section-header__link { color: var(--color-ink); }

/* ── Zo werkt het ───────────────────────── */
.process { overflow: hidden; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: rgba(255,255,255,.15); }
.steps__line { position: absolute; left: 0; top: 30px; height: 2px; background: var(--color-brand); width: 0; transition: width 2.4s cubic-bezier(.2,.7,.2,1); }
.steps.is-visible .steps__line { width: 100%; }
.steps__item { position: relative; display: flex; flex-direction: column; }
.steps__dot { width: 62px; height: 62px; border-radius: 50%; background: var(--color-dark); border: 2px solid rgba(255,255,255,.25); display: grid; place-items: center; font: 800 1.6rem/1 var(--font-heading); margin-bottom: 30px; position: relative; transition: border-color .4s ease, background .4s ease, color .4s ease; }
.steps.is-visible .steps__dot { border-color: var(--color-brand); }
.steps.is-visible .steps__item:nth-child(3) .steps__dot { transition-delay: .5s; } .steps.is-visible .steps__item:nth-child(4) .steps__dot { transition-delay: 1s; } .steps.is-visible .steps__item:nth-child(5) .steps__dot { transition-delay: 1.6s; background: var(--color-brand); color: var(--color-ink); }
.steps__title { margin-bottom: 12px; }
.steps__text { color: var(--color-on-dark); font-size: 16.5px; }
.steps__duration { display: inline-block; align-self: flex-start; margin-top: auto; padding-top: 18px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-brand); }

/* ── Techniek ───────────────────────────── */
.platforms__inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.platforms__option { border-top: 2px solid var(--color-ink); padding-top: 22px; }
.platforms__label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); display: block; margin-bottom: 10px; }
.platforms__text { color: var(--color-text); margin-top: 12px; }

/* ── Abonnementen ───────────────────────── */
.plans { display: grid; grid-template-columns: 1fr 1.18fr; gap: 24px; align-items: center; padding-top: 16px; }
.plans__footnote-link { color: inherit; text-decoration: underline; }
/* Schakelaar per maand / per jaar boven de pakketten (site.js zet hem aan; zonder JS staat er per maand) */
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
.plans__footnote { margin-top: 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--color-text); font-size: 16px; }
.plan { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 44px 40px 40px; position: relative; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease; }
.plan:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(0,0,0,.25); }
.plan__badge { margin: 0 0 12px; color: var(--color-brand); font: 600 15px/1.2 var(--font-body); }
.plan__name { font-size: 2.3rem; }
.plan__summary { color: var(--color-muted); margin-top: 8px; font-size: 16px; }
.plan__price { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 12px; row-gap: 6px; margin: 24px 0; padding-bottom: 24px; border-bottom: 1px solid var(--color-line); }
.plan__amount { font: 800 3.4rem/1 var(--font-heading); }
.plan__period { grid-column: 1 / -1; color: var(--color-muted); font-size: 15px; }
.plan__billing { grid-column: 1 / -1; margin-top: 6px; color: var(--color-text); font-size: 15px; }
.plan__price .todo { justify-self: start; align-self: center; font-size: 15px; }
.plan__features { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 12px; font-size: 16px; flex: 1; }
.plan__feature { display: flex; gap: 12px; }
.plan__feature::before { content: "✓"; flex: none; width: 1em; text-align: center; font-weight: 700; color: var(--color-ink); }
.plan__feature--excluded { color: var(--color-muted); }
.plan__feature--excluded::before { content: "–"; color: var(--color-muted); }
.plan__cta { justify-content: center; }
.plan--featured { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); padding: 52px; box-shadow: 0 40px 70px -40px rgba(0,0,0,.55); }
.plan--featured::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(500px 300px at 100% 0%, var(--color-dark-glow), transparent 60%); pointer-events: none; }
.plan--featured > * { position: relative; }
.plan--featured .plan__name { font-size: 2.8rem; }
.plan--featured .plan__amount { font-size: 4.2rem; }
.plan--featured .plan__summary, .plan--featured .plan__period { color: var(--color-on-dark-muted); }
.plan--featured .plan__billing { color: var(--color-on-dark); }
.plan--featured .plan__price { border-color: rgba(255,255,255,.15); }
.plan--featured .plan__features { font-size: 17px; gap: 14px; }
.plan--featured .plan__feature::before { color: var(--color-brand); }

/* ── Over ───────────────────────────────── */
.about__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.about__quote { margin: 0; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius); background: var(--color-dark); color: var(--color-white); font-family: var(--font-heading); font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; line-height: 1.12; }
.about__quote-highlight { color: var(--color-brand); font-weight: inherit; }
.about__title { margin-bottom: 28px; }
.about__text { color: var(--color-text); }
.about__text + .about__text { margin-top: 16px; }
.about__signature { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.about__photo { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--color-dark); }
.about__name { margin: 0; font-weight: 600; color: var(--color-text); }
.about__role { display: block; font-weight: 400; color: var(--color-muted); }

/* ── FAQ ────────────────────────────────── */
.faq__inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 96px); }
.faq__item { border-bottom: 1px solid var(--color-line); }
.faq__item:first-of-type { border-top: 2px solid var(--color-ink); }
.faq__question { list-style: none; cursor: pointer; padding: 24px 48px 24px 0; font-weight: 600; font-size: 19px; position: relative; }
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 30px/1 var(--font-body); color: var(--color-ink); transition: transform .2s ease; }
.faq__item[open] .faq__question::after { transform: translateY(-50%) rotate(45deg); }
.faq__answer { padding: 0 48px 24px 0; color: var(--color-text); }

/* ── Afsluiter ──────────────────────────── */
.cta__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.cta--text-only .cta__inner { grid-template-columns: 1fr; }
.cta__text { font-size: 20px; color: var(--color-on-dark); margin-top: 24px; max-width: 36ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-top: 36px; }

/* ── Footer ─────────────────────────────── */
.site-footer { background: var(--color-ink); color: var(--color-on-dark-muted); padding: 80px 0 32px; font-size: 16px; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.12); }
.site-footer__logo-img { height: 28px; width: auto; margin-bottom: 18px; }
.site-footer__heading { color: var(--color-white); font: 600 13px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 18px; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer__logo, .site-footer__link { text-decoration: none; }
.site-footer__link:hover { color: var(--color-white); }
.site-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 28px; font-size: 14px; }

/* ── Responsive (homepage en gedeeld) ───── */
@media (max-width: 1300px) { .chat--hero { width: 260px; } }
@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: 1fr; }
  /* Tablet: tekst boven; site en chat naast elkaar, zonder overlap */
  .showcase { padding: 0; margin-right: 0; display: grid; grid-template-columns: 1fr 270px; gap: 20px; align-items: end; }
  .browser { transform: none; max-width: none; }
  .chat--hero { position: relative; left: auto; right: auto; bottom: auto; width: auto; height: 420px; margin: 0; }
}
@media (max-width: 1000px) {
  .problem__inner, .benefits__inner, .about__inner, .faq__inner, .cta__inner { grid-template-columns: minmax(0, 1fr); }
  .report-chat { justify-self: start; }
  .benefits__intro { position: static; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .steps::before, .steps__line { display: none; }
  .platforms__inner { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; max-width: 560px; row-gap: 40px; }
  .plan--featured { padding: 52px 32px 36px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  /* Header op tablet en telefoon: meteen dekkend in de kleur van de hero (Safari neemt deze kleur voor de statusbalk).
     Met het menu open krijgt hij de tint van het menu, zodat die twee één geheel zijn */
  .site-header { background: var(--color-dark); }
  html.is-menu-open .site-header { background: var(--color-header); box-shadow: none; }
  .site-header__menu-toggle { display: block; }
  /* Open menu: vult het scherm onder de header, de pagina eronder scrolt niet mee */
  .site-nav { display: none; position: fixed; top: var(--header-height); bottom: 0; left: 0; right: 0; overflow-y: auto; background: var(--color-header); flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
  .site-nav.is-open { display: flex; }
  .site-nav__link { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); font: 700 26px/1.15 var(--font-heading); }
  .site-nav__link--active { color: var(--color-brand); }
  .site-nav__link::after { display: none; }
  .site-nav__cta { margin-top: 24px; justify-content: center; }
  html.is-menu-open, html.is-menu-open body { overflow: hidden; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .proof__inner { grid-template-columns: 1fr; padding: 16px 0; }
  .proof__item { padding: 16px 0; }
  .proof__item + .proof__item { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  /* Geen lichte gloed rechtsboven op de telefoon: die viel achter de header (Robin, 2026-11-06) */
  :is(.hero, .page-hero, .section--dark, .card--dark)::before { background: radial-gradient(800px 500px at 0% 110%, rgba(0,0,0,.35), transparent 60%); }
  /* Minder lege ruimte boven de kop, en het gesprek staat er meteen (geen lege plek onder de tekst bij het laden) */
  .hero { padding-top: calc(var(--header-height) + 28px); }
  .hero__note { margin-top: 18px; }
  .showcase.reveal { opacity: 1; transform: none; transition: none; }
  /* Telefoon (richting A, 2026-11-06): het gesprek groot en leesbaar, daaronder de website als kaartje */
  .showcase { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; margin: 8px 0 0; padding: 0; }
  .chat--hero { order: 1; position: static; width: auto; height: 340px; margin: 0; padding: 14px 14px 12px; border-radius: 22px; }
  .chat--hero .chat__thread { justify-content: flex-start; font-size: 15px; gap: 8px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px); mask-image: linear-gradient(to bottom, transparent, #000 24px); }
  .chat__header { padding-bottom: 10px; margin-bottom: 8px; }
  .chat__time { display: none; }
  .browser { order: 2; transform: none; border-radius: 18px; box-shadow: none; }
  .browser__bar { padding: 8px 14px; justify-content: space-between; gap: 8px; background: #f7f1e6; border: 0; }
  .browser__dot { display: none; }
  .browser__bar::before { content: "Jouw website"; font: 600 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #6b5c4c; }
  .browser__url { flex: 0 1 auto; margin: 0; font-size: 11px; padding: 3px 9px; }
  .bakery { height: auto; font-size: 11px; }
  .bakery__links, .bakery__button { display: none; }
  .bakery__nav { padding: 12px 14px; }
  .bakery__hero { height: 160px; }
  .bakery--holiday .bakery__hero { height: 140px; }
  .bakery__hero-text { left: 14px; top: 46px; max-width: 240px; }
  .bakery__title { font-size: 24px; }
  .bakery__lead, .bakery__cta { display: none; }
  .bakery__bottom { display: grid; grid-template-columns: 1fr; padding: 12px 14px 10px; }
  .bakery__hours-col, .bakery__news-col { display: none; }
  .bakery__heading { font-size: 14px; margin-bottom: 6px; }
  .bakery__products { gap: 6px; }
  .bakery__product:nth-child(3) { display: none; }
  .bakery__photo--thumb { width: 40px; height: 30px; }
  .bakery__toast { top: 116px; bottom: auto; right: 12px; font-size: 12px; }
  .bakery--holiday .bakery__toast { top: 136px; }
  .bakery__footer { position: static; justify-content: center; padding: 9px 14px; }
  .bakery__copyright { display: none; }
  .steps, .benefits__item, .site-footer__grid { grid-template-columns: 1fr; }
  .benefits__item { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat__message, .strike-list__item::after, .reveal, .split-heading__word-inner, .steps__line { transition: none; }
  .reveal, .split-heading__word-inner { opacity: 1; transform: none; }
  .chat__typing-dot { animation: none; }
  .comparison-table tbody tr, .month__week::before, .timeline__item::before, .timeline__item::after, .places__group { transition: none; }
  .timeline.reveal .timeline__item::before { background: var(--color-ink); }
  .timeline.reveal .timeline__item::after { transform: none; }
  .places.reveal .places__group { opacity: 1; transform: none; }
  .form-done:not([hidden]) { animation: none; }
  .table-scroll.reveal tbody tr { opacity: 1; transform: none; }
  .month__week::before { transform: none; }
}

/* ═══════════ Subpagina's ═══════════ */
/* Kop van een subpagina: kleiner dan de homepage-hero, met feiten ernaast */
.page-hero { padding: calc(var(--header-height) + clamp(48px, 6vw, 88px)) 0 clamp(56px, 7vw, 96px); }
.page-hero--article { padding-bottom: clamp(40px, 5vw, 64px); }
.page-hero__inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: end; }
.page-hero--article .page-hero__inner { grid-template-columns: 1fr; }
.page-hero__title { font-size: clamp(3rem, 5.4vw, 5.2rem); }
.page-hero__highlight { font-style: normal; color: var(--color-brand); }
.page-hero__intro { font-size: clamp(1.1rem, 1.5vw, 1.3rem); max-width: 40ch; margin-top: 24px; color: var(--color-on-dark); }
.page-hero__actions { margin-top: 32px; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.page-hero__facts { display: grid; gap: 14px; border-left: 2px solid var(--color-brand); padding-left: 24px; }
.page-hero__fact-value { font: 800 2.4rem/1 var(--font-heading); display: block; }
.page-hero__fact-label { color: var(--color-on-dark-muted); font-size: 15px; }
.page-hero__dialog { justify-self: end; width: 100%; max-width: 580px; }

/* Voorbeeldgesprek: een kort chatvenster zoals op de homepage. Berichten verschijnen na elkaar, met typen (site.js) */
.dialog { background: var(--color-white); color: var(--color-ink); border: 1px solid var(--color-line); border-radius: 20px; padding: 16px 18px 18px; box-shadow: 0 30px 60px -36px rgba(0,0,0,.45); max-width: 440px; }
.page-hero .dialog { border-color: transparent; box-shadow: var(--shadow); }
.dialog__header { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-line); font-size: 14px; font-weight: 600; }
.dialog__avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--color-ink); color: var(--color-white); display: grid; place-items: center; font: 800 12px var(--font-heading); }
.dialog__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dialog__who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dialog__message { position: relative; max-width: 86%; font-size: 15px; line-height: 1.4; transition: opacity .35s ease, transform .35s ease; }
.dialog__message--client { align-self: flex-start; }
.dialog__message--nehlee { align-self: flex-end; }
.dialog__text { margin: 0; padding: 9px 13px; border-radius: 15px; transition: opacity .3s ease; }
.dialog__message--client .dialog__text { background: #eeefed; border-bottom-left-radius: 4px; }
.dialog__message--nehlee .dialog__text { background: var(--color-ink); color: var(--color-white); border-bottom-right-radius: 4px; }
.dialog__message--done .dialog__text::after { content: " ✓"; content: " ✓" / ""; color: var(--color-brand); font-weight: 700; }
.dialog__typing { position: absolute; bottom: 0; display: inline-flex; gap: 4px; padding: 13px 14px; border-radius: 15px; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.dialog__message--client .dialog__typing { left: 0; background: #eeefed; border-bottom-left-radius: 4px; }
.dialog__message--nehlee .dialog__typing { right: 0; background: var(--color-ink); color: var(--color-white); border-bottom-right-radius: 4px; }
.dialog__typing-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; animation: blink 1.2s infinite; }
.dialog__typing-dot:nth-child(2) { animation-delay: .2s; } .dialog__typing-dot:nth-child(3) { animation-delay: .4s; }
.dialog__message.is-waiting { opacity: 0; transform: translateY(8px); }
.dialog__message.is-typing .dialog__text { opacity: 0; }
.dialog__message.is-typing .dialog__typing { opacity: 1; }
.split__dialog { margin-top: 32px; }
/* Groot gesprek: in de page-hero en naast een tekst, waar het gesprek het beeld van de sectie is */
:is(.page-hero, .split__dialog) .dialog { max-width: 580px; padding: 24px 26px 26px; border-radius: 24px; }
:is(.page-hero, .split__dialog) .dialog__header { gap: 12px; margin-bottom: 16px; padding-bottom: 16px; font-size: 15px; }
:is(.page-hero, .split__dialog) .dialog__avatar { width: 38px; height: 38px; font-size: 14px; }
:is(.page-hero, .split__dialog) .dialog__list { gap: 12px; }
:is(.page-hero, .split__dialog) .dialog__message { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.45; }
:is(.page-hero, .split__dialog) .dialog__text, :is(.page-hero, .split__dialog) .dialog__typing { padding: 12px 16px; border-radius: 18px; }
:is(.page-hero, .split__dialog) .dialog__message--client :is(.dialog__text, .dialog__typing) { border-bottom-left-radius: 5px; }
:is(.page-hero, .split__dialog) .dialog__message--nehlee :is(.dialog__text, .dialog__typing) { border-bottom-right-radius: 5px; }

/* Lopende tekst (artikelen, verhaal op Over): de inhoud zelf heeft geen classes */
.prose { max-width: 66ch; color: var(--color-text); }
.prose h2 { color: var(--color-ink); font-size: clamp(2rem, 3.4vw, 2.8rem); margin: 56px 0 18px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { color: var(--color-ink); margin: 32px 0 10px; }
.prose p + p { margin-top: 16px; }
.prose ul { padding-left: 22px; margin: 14px 0; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--color-ink); }
.prose strong { color: var(--color-ink); }
.prose blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--color-ink); font-size: 1.15em; color: var(--color-ink); }
.prose__lead { font-size: 1.2em; color: var(--color-ink); }
.prose__link { color: var(--color-ink); font-weight: 600; text-underline-offset: 3px; }

/* Twee kolommen: links een vaste kop met intro, rechts de inhoud */
.split { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.split__intro { position: sticky; top: 120px; }
.split__intro-text { color: var(--color-text); margin-top: 18px; max-width: 34ch; }

/* Fases (werkwijze) */
.phases { display: grid; gap: 0; border-top: 2px solid var(--color-ink); }
.phases__item { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 24px; padding: 40px 0; border-bottom: 1px solid var(--color-line); }
.phases__number { font: 800 3.4rem/1 var(--font-heading); color: var(--color-ink); transition: color .4s ease; }
/* Een lijn van fase naar fase die zich vult terwijl je scrolt (site.js zet --fill); een fase waar je nog niet bent is grijs */
.phases__item { position: relative; }
.phases__item:not(:last-child)::before, .phases__item:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: calc(40px + 3.4rem + 14px); bottom: -30px; width: 2px; background: var(--color-line); }
.phases__item:not(:last-child)::after { background: var(--color-ink); transform: scaleY(var(--fill, 0)); transform-origin: top; }
.phases.is-tracking .phases__item:not(.is-reached) .phases__number { color: var(--color-muted); }
.phases__title { margin-bottom: 8px; }
.phases__duration { color: var(--color-muted); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.phases__text { color: var(--color-text); margin-top: 10px; }
.phases__needs { background: var(--color-light); border-radius: 12px; padding: 18px 20px; font-size: 16px; }
.phases__needs-title { display: block; color: var(--color-ink); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.phases__needs-list { margin: 0; padding-left: 18px; color: var(--color-text); }
.phases--dialog .phases__item { align-items: start; }
.phases--dialog .phases__needs { margin-top: 20px; }
.phases--dialog .dialog { justify-self: end; width: 100%; }

/* Vergelijkingstabel. Celstijlen via :where(), zodat de modifiers (ja/nee/uitgelicht) altijd winnen */
.comparison-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.comparison-table :where(th, td) { text-align: left; padding: 16px 14px; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.comparison-table :where(th) { font: 700 1.3rem/1.1 var(--font-heading); }
.comparison-table :where(thead th) { border-bottom: 2px solid var(--color-ink); }
.comparison-table :where(td) { color: var(--color-text); }
.comparison-table :where(td:first-child) { font-weight: 500; color: var(--color-ink); }
.comparison-table__cell--yes { color: var(--color-ink); font-weight: 700; }
.comparison-table__cell--no { color: var(--color-muted); }
.comparison-table__cell--featured { background: var(--color-light); }
/* Rijen verschijnen na elkaar als de tabel in beeld komt (site.js zet --row) */
.table-scroll.reveal { opacity: 1; transform: none; }
.comparison-table tbody tr { transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--row, 0) * 70ms); }
.table-scroll.reveal:not(.is-visible) tbody tr { opacity: 0; transform: translateY(10px); }
.comparison__note { margin-top: 24px; max-width: 60ch; color: var(--color-text); font-size: 16px; }
.comparison__note-link { color: var(--color-ink); font-weight: 600; text-underline-offset: 3px; }

/* Kaarten */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards--two { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 30px; }
.card__number { font: 800 2.4rem/1 var(--font-heading); color: var(--color-ink); display: block; margin-bottom: 20px; }
.card__title { margin-bottom: 10px; }
.card__text { color: var(--color-text); font-size: 16px; }
.card--dark { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); }
.card--dark .card__text { color: var(--color-on-dark); }

/* Over: vier afspraken als grote zinnen op donker, zonder nummers */
.promises { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.16); }
.promises__item { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); padding: clamp(28px, 3.4vw, 44px) 0; border-bottom: 1px solid rgba(255,255,255,.16); align-items: baseline; }
.promises__title { font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1.05; color: var(--color-white); max-width: 18ch; }
.promises__text { color: var(--color-on-dark); max-width: 46ch; }

/* Werkwijze: wat er in de bouw zit, als lijst in plaats van kaartjes */
.build-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3.4vw, 48px); }
.build-list__item { border-top: 2px solid var(--color-ink); padding: 22px 0 36px; }
.build-list__title { display: flex; align-items: center; gap: 12px; font-size: 1.4rem; margin-bottom: 10px; }
.build-list__title::before { content: "✓"; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--color-brand); color: var(--color-ink); display: grid; place-items: center; font: 700 14px/1 var(--font-body); }
.build-list__text { color: var(--color-text); font-size: 16px; }
.build-list__note { margin-top: 8px; padding: 20px 24px; border-left: 3px solid var(--color-brand); background: var(--color-white); color: var(--color-ink); max-width: 70ch; }

/* Werkgebied: wat er per plaats verschilt */
.differences { margin: 0; border-top: 2px solid var(--color-ink); }
.differences__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--color-line); }
.differences__term { font: 700 1.5rem/1.1 var(--font-heading); color: var(--color-ink); }
.differences__text { margin: 0; color: var(--color-text); }

/* Wat wel en niet onder aanpassingen valt */
.inclusions { display: grid; grid-template-columns: 1fr; gap: 20px; }
.inclusions__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; color: var(--color-text); }
.inclusions__item { display: flex; gap: 12px; }
.inclusions__item::before { flex: none; font-weight: 700; color: var(--color-ink); }
.inclusions__group--included .inclusions__item::before { content: "✓"; }
.inclusions__group--excluded .inclusions__item::before { content: "→"; }

/* Zo ziet een maand eruit (abonnementen) */
.month { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.month__week { position: relative; border-top: 2px solid rgba(255,255,255,.15); padding-top: 16px; }
/* Per week vult een jade balk zich, een voor een */
.month__week::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--color-brand); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.month__week.is-visible::before { transform: scaleX(1); }
.month__week[data-delay="1"]::before { transition-delay: .45s; } .month__week[data-delay="2"]::before { transition-delay: .9s; } .month__week[data-delay="3"]::before { transition-delay: 1.35s; }
.month__title { display: block; font: 700 1.2rem var(--font-heading); margin-bottom: 8px; }
.month__text { color: var(--color-on-dark); font-size: 15.5px; }

/* Kennis: uitgelicht artikel, artikelkaarten en het artikel zelf */
.category { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink); }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.article-card { text-decoration: none; display: flex; flex-direction: column; padding-top: 22px; border-top: 2px solid var(--color-ink); transition: border-color .3s ease; }
.article-card:hover { border-top-color: var(--color-brand); }
.article-card:hover .article-card__title { text-decoration: underline; text-underline-offset: 4px; }
.article-card__title { font-size: 1.5rem; margin: 14px 0 6px; }
.article-card__excerpt { color: var(--color-text); font-size: 15.5px; }
.article-card__date { color: var(--color-muted); font-size: 13px; margin-top: 10px; }
.article-header { max-width: 760px; }
.article-header__category { color: var(--color-brand); }
.article-header__title { font-size: clamp(2.6rem, 4.6vw, 4rem); margin: 16px 0 20px; }
.article-header__meta { color: var(--color-on-dark-muted); font-size: 15px; display: flex; gap: 16px; flex-wrap: wrap; }
.article-header__author { color: var(--color-on-dark); text-underline-offset: 3px; }
.article-layout { display: grid; grid-template-columns: 1fr 280px; gap: clamp(32px, 6vw, 96px); align-items: start; }
.sidebar-cta { position: sticky; top: 120px; background: var(--color-dark); color: var(--color-white); border-radius: var(--radius); padding: 28px; }
.sidebar-cta__title { margin-bottom: 10px; font-size: 1.6rem; line-height: 1.05; }
.sidebar-cta__text { color: var(--color-on-dark); font-size: 15.5px; margin-bottom: 18px; }
.sidebar-cta__button { width: 100%; justify-content: center; text-align: center; }

/* Contact */
.contact__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-form { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 32px; display: grid; gap: 18px; }
.contact-form__title { font-size: 1.8rem; line-height: 1; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Blok in plaats van grid: dan staat een hint als "(mag leeg)" naast het label en blijven de velden op één lijn */
.contact-form__field { display: block; font-weight: 600; font-size: 15px; }
.contact-form__field .contact-form__control { display: block; margin-top: 6px; }
.contact-form__hint { font-size: 13px; color: var(--color-muted); font-weight: 400; }
.contact-form__control { border: 1.5px solid var(--color-line); border-radius: 10px; padding: 13px 14px; font: 500 16px var(--font-body); color: var(--color-ink); background: var(--color-white); width: 100%; outline: none; }
.contact-form__control:focus { border-color: var(--color-ink); }
/* Keuzemenu in dezelfde stijl als de tekstvelden, met een eigen pijltje in plaats van het systeemmenu */
.contact-form__control--select { -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%231b1e23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center; }
.contact-form__control--select:hover { border-color: var(--color-muted); }
.contact-form__control--textarea { min-height: 120px; resize: vertical; }
.contact-form__submit { justify-content: center; }
.channels { display: grid; gap: 16px; }
.channels__item { display: flex; gap: 18px; align-items: flex-start; padding: 22px; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-white); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.channels__item:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -30px rgba(0,0,0,.3); }
.channels__icon { width: 46px; height: 46px; margin-top: 2px; border-radius: 12px; background: var(--color-dark); color: var(--color-white); display: grid; place-items: center; font: 800 18px var(--font-heading); flex: none; }
.channels__title { display: block; font-size: 17px; }
.channels__text { color: var(--color-muted); font-size: 15px; display: block; margin-top: 2px; }
/* Formulieren: verborgen veld tegen spam, melding als versturen mislukt, bevestiging op de plek van het formulier */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 10px; background: #fdecea; border: 1px solid #f0b4ab; color: #7a1d12; font-size: 15.5px; font-weight: 500; line-height: 1.45; }
.form-status::before { content: "!"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #7a1d12; color: #fff; display: grid; place-items: center; font: 800 14px/1 var(--font-body); margin-top: 1px; }
.form-done:focus { outline: none; }
.form-done:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-ink); }
.form-done__text { color: var(--color-text); }
.form-done__signature { font-weight: 600; }
.contact-form__hint a { color: inherit; }
/* Werkgebied: plaatsen per afstand */
.places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 2px solid var(--color-ink); padding-top: 28px; }
.places__title { font-size: 1.5rem; margin-bottom: 14px; }
.places__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--color-text); }
.places__link { color: var(--color-ink); font-weight: 600; text-underline-offset: 4px; }
/* Groep voor groep in beeld: van om de hoek naar verder weg */
.places.reveal { opacity: 1; transform: none; }
.places__group { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.places.reveal:not(.is-visible) .places__group { opacity: 0; transform: translateY(14px); }
.places__group:nth-child(2) { transition-delay: .25s; } .places__group:nth-child(3) { transition-delay: .5s; }

/* Privacy en voorwaarden: inhoud links, tekst rechts */
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.legal__toc { position: sticky; top: 120px; border-top: 2px solid var(--color-ink); padding-top: 18px; }
.legal__toc-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 16px; }
.legal__toc-link { color: var(--color-ink); font-weight: 600; text-underline-offset: 4px; }
.legal__content h2 { font-size: clamp(1.8rem, 2.6vw, 2.2rem); margin-top: 48px; scroll-margin-top: 110px; }
.legal__note { margin-bottom: 24px; }
.contact-form__noscript { margin: 0 0 20px; padding: 14px 16px; border-left: 3px solid var(--color-ink); background: var(--color-light); color: var(--color-ink); }
.legal__content a { color: var(--color-ink); }

/* 404 */
.not-found { min-height: 72vh; display: flex; align-items: center; }
.not-found__inner { width: 100%; }
.not-found__code { font: 800 clamp(6rem, 16vw, 13rem)/.8 var(--font-heading); color: var(--color-brand); margin-bottom: 24px; }
.not-found__title { max-width: 18ch; }
.not-found__links { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.not-found__link { display: inline-block; padding: 12px 18px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); color: var(--color-white); font-weight: 600; text-decoration: none; }
.not-found__link:hover { box-shadow: inset 0 0 0 1.5px var(--color-brand); }

.next-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.next-steps__item { border-top: 2px solid var(--color-ink); padding-top: 16px; }
.next-steps__item::before { counter-increment: step; content: counter(step); font: 800 2rem/1 var(--font-heading); color: var(--color-ink); display: block; margin-bottom: 10px; }
.next-steps__title { display: block; font: 700 1.2rem var(--font-heading); margin-bottom: 6px; }
.next-steps__text { color: var(--color-text); font-size: 15.5px; }
/* Naast het contactformulier: wat er na je bericht gebeurt, als rustige tijdlijn */
.timeline { margin-top: 48px; padding: 0 4px; }
.timeline__heading { font-size: 1.6rem; margin-bottom: 24px; }
.timeline__list { list-style: none; margin: 0; padding: 0; }
.timeline__item { position: relative; padding: 0 0 26px 30px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { content: ""; position: absolute; left: 0; top: 7px; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--color-ink); background: var(--color-ink); transition: background .35s ease; }
.timeline__item:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 22px; bottom: 4px; width: 1px; background: var(--color-ink); transform-origin: top; transition: transform .6s ease; }
/* Komt de tijdlijn in beeld, dan kleuren de puntjes een voor een in en loopt de lijn ertussen mee */
.timeline.reveal { opacity: 1; transform: none; }
.timeline.reveal:not(.is-visible) .timeline__item::before { background: var(--color-white); }
.timeline.reveal:not(.is-visible) .timeline__item::after { transform: scaleY(0); }
.timeline__item:nth-child(2)::before { transition-delay: .7s; } .timeline__item:nth-child(3)::before { transition-delay: 1.4s; }
.timeline__item:nth-child(1)::after { transition-delay: .15s; } .timeline__item:nth-child(2)::after { transition-delay: .85s; }
.form-done:not([hidden]) { animation: rise-in .5s cubic-bezier(.2,.7,.2,1); }
.timeline__title { display: block; font-size: 17px; font-weight: 600; color: var(--color-ink); }
.timeline__text { color: var(--color-text); font-size: 15.5px; margin-top: 4px; }

@media (max-width: 1000px) {
  .page-hero__inner, .split, .article-layout, .contact__inner { grid-template-columns: 1fr; }
  .split__intro, .sidebar-cta, .legal__toc { position: static; }
  .legal { grid-template-columns: minmax(0, 1fr); }
  .places { grid-template-columns: 1fr 1fr; }
  .build-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promises__item { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .phases__item { grid-template-columns: 56px 1fr; }
  .phases__needs { grid-column: 2; }
  .phases--dialog .dialog { grid-column: 2; justify-self: start; }
  .page-hero__dialog { justify-self: start; }
  .cards, .article-grid, .month, .next-steps { grid-template-columns: 1fr 1fr; }
  .comparison-table { font-size: 15px; }
  .comparison-table :where(th, td) { padding: 12px 8px; }
}
@media (max-width: 640px) {
  .cards, .article-grid, .month, .next-steps, .contact-form__row, .places, .build-list, .differences__row { grid-template-columns: minmax(0, 1fr); }
  .differences__row { gap: 8px; }
  .phases__item { grid-template-columns: 1fr; }
  .phases__item::before, .phases__item::after { display: none; }
  .phases__needs { grid-column: 1; }
  .phases--dialog .dialog { grid-column: 1; }
  /* Telefoon: de tabel past in de breedte (geen zijwaarts scrollen); de eerste kolom is het label van de rij */
  .table-scroll { overflow-x: auto; }
  .comparison-table { font-size: 14.5px; line-height: 1.4; }
  .comparison-table :where(th, td) { padding: 12px 6px; }
  .comparison-table :where(th, td):first-child { padding-left: 0; width: 34%; }
  .comparison-table :where(th) { font-size: 1.15rem; }
}
@media (max-width: 400px) {
  /* Lange woorden in een kop (zoals "Privacyverklaring") passen op 320 px */
  .page-hero__title { font-size: 2.6rem; }
}