/* Hallmark · checked: 2026-11-07 · genre: editorial (inferred)
 * floor: 0 FAIL · fixed: 10a, 15, 19, 24a, 34, 48, 50, 63, 67, 9, 10, 26b, 24b, 7b, 11, 29, 3, F1, F24 · structural: 2 printed (42, 58)
 * built: the project · redesign: polish · v2.0.0 */
/* Hallmark · waive 1 · Poppins is self-hosted in /fonts as the Schoonmaakexpert brand face · a polish keeps the project's own type system */

/* ==========================================================================
   De Schoonmaakexpert — style.css
   1. Fonts   2. Variabelen   3. Reset & basis   4. Layout
   5. Componenten (btn, card, section, …)   6. Header   7. Footer
   8. Mobiele balk   9. Animaties   10. Utilities   11. Subpagina's   12. Planner
   13. Mobiel   14. Slogan   15. Bedankt   16. Paginawissel   17. Verfijning   18. Donkere modus
   ========================================================================== */

/* 1. Fonts (self hosted, geen Google CDN) ---------------------------------- */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 2. Variabelen ------------------------------------------------------------ */
:root {
  /* Merkkleuren */
  --brand-blue: #024ff1;
  --brand-blue-dark: #013cbb;   /* hover op blauwe knoppen */
  --brand-blue-soft: #eef3ff;   /* lichte blauwe achtergrond voor iconen */
  --brand-green: #00ea60;       /* NOOIT als tekstkleur op wit, nooit witte tekst erop */
  --brand-green-soft: #e3fcec;

  /* Neutralen */
  /* Warme neutralen: crème en zandtinten in plaats van koel blauwgrijs */
  --ink: #1e1b2e;               /* body tekst en koppen */
  --muted: #6b645c;             /* secundaire tekst */
  --paper: #fffcf8;             /* pagina achtergrond */
  --surface: #f8f2e9;           /* afwisselende secties */
  --sand: #f1e6d6;              /* warme accenten */
  --white: #fffefb;             /* licht getint wit, warm zoals het papier */
  --border: #ebe2d4;
  --field-border: #958a7d;     /* rand van invulvelden: minstens 3:1 contrast (WCAG) */
  --focus: var(--brand-blue);

  /* Rollen (wisselen mee met de kleurmodus, zie sectie 18) */
  --card: var(--white);            /* achtergrond van kaarten, velden en panelen */
  --brand-ink: var(--brand-blue);  /* merkkleur als tekst of icoon op een lichte achtergrond */
  --on-brand: var(--white);        /* tekst op een vlak in de hoofdkleur */
  --dark: #1e1b2e;                 /* vaste donkere tekst, bv. op groen */
  --footer-bg: #1e1b2e;

  /* Afgeleide tinten (alle transparante kleuren lopen via deze tokens) */
  --blue-a05: rgba(2, 79, 241, 0.05);
  --blue-a18: rgba(2, 79, 241, 0.18);
  --blue-a20: rgba(2, 79, 241, 0.2);
  --blue-a25: rgba(2, 79, 241, 0.25);
  --blue-a30: rgba(2, 79, 241, 0.3);
  --blue-a32: rgba(2, 79, 241, 0.32);
  --blue-bright: #2f6dff;
  --on-dark: rgba(255, 254, 251, 0.92);
  --on-dark-strong: rgba(255, 254, 251, 0.85);
  --on-dark-soft: rgba(255, 254, 251, 0.78);
  --on-dark-muted: rgba(255, 254, 251, 0.7);
  --on-dark-line: rgba(255, 254, 251, 0.12);
  --on-dark-wash: rgba(255, 254, 251, 0.1);
  --shade-a06: rgba(74, 52, 30, 0.06);
  --shade-a08: rgba(74, 52, 30, 0.08);
  --ok: #0a8f3c;
  --warn: #b26a00;
  --error: #c62828;

  /* Typografie */
  --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1: clamp(1.875rem, 1.2rem + 3vw, 3.75rem);   /* 30px → 60px */
  --fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);    /* 28px → 40px */
  --fs-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(4rem, 3rem + 4vw, 7rem);

  /* Vormen */
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(74, 52, 30, 0.05), 0 4px 12px rgba(74, 52, 30, 0.05);
  --shadow-md: 0 4px 14px rgba(74, 52, 30, 0.07), 0 14px 36px rgba(74, 52, 30, 0.08);
  --shadow-lg: 0 10px 28px rgba(74, 52, 30, 0.08), 0 28px 60px rgba(74, 52, 30, 0.12);

  /* Zachte warme gloed voor de bovenkant van pagina's */
  --glow: radial-gradient(circle at 12% 18%, rgba(255, 200, 140, 0.32), transparent 42%),
    radial-gradient(circle at 88% 85%, rgba(0, 234, 96, 0.10), transparent 40%);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2rem);
  --header-h: 72px;
  --mobile-bar-h: 72px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* lang uitlopen: voor alles wat in beeld komt */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);  /* klein veertje: voor bolletjes en vinkjes */
}

/* 3. Reset & basis --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html,
body {
  overflow-x: clip;
}

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;  /* geen verspringing als de intro het scrollen even blokkeert */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }

p {
  text-wrap: pretty;
}

a {
  color: var(--brand-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--brand-blue-dark);
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--brand-green);
  color: var(--dark);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  background: var(--brand-blue);
  color: var(--on-brand);
  border-radius: var(--radius-sm);
  font-weight: 500;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-4);
  color: var(--on-brand);
}

/* 4. Layout ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 5. Componenten ----------------------------------------------------------- */

/* Section */
.section {
  position: relative;
  padding-block: var(--space-section);
}

.section--alt {
  background: var(--surface);
}

.section__header {
  max-width: 720px;
  margin-bottom: var(--space-7);
}

.section__header--center {
  margin-inline: auto;
  text-align: center;
}

.section__title {
  margin-bottom: var(--space-4);
}

.section__lead {
  font-size: var(--fs-lead);
  color: var(--muted);
}


/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn:hover {
  transform: translateY(-1px);
}

/* Indrukken: de knop geeft even mee */
.btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.08s;
}

.btn--primary {
  background: var(--brand-blue);
  color: var(--on-brand);
  box-shadow: 0 6px 18px var(--blue-a25);
}

.btn--primary:hover {
  background: var(--brand-blue-dark);
  color: var(--on-brand);
  box-shadow: 0 8px 24px var(--blue-a32);
}

.btn--outline {
  border-color: var(--brand-blue);
  color: var(--brand-ink);
  background: transparent;
}

.btn--outline:hover {
  background: var(--brand-blue-soft);
  color: var(--brand-blue-dark);
}

/* Voor op blauwe of navy vlakken */
.btn--light {
  background: var(--white);
  color: var(--brand-blue);
}

.btn--light:hover {
  background: var(--brand-green);
  color: var(--dark);
}

.btn--outline-light {
  border-color: var(--on-dark-muted);
  color: var(--on-brand);
}

.btn--outline-light:hover {
  border-color: var(--on-brand);
  background: var(--on-dark-wash);
  color: var(--on-brand);
}

.btn--sm {
  min-height: 42px;
  padding: var(--space-2) 1.125rem;
  font-size: 0.9375rem;
}

.btn--lg {
  min-height: 56px;
  padding: var(--space-4) var(--space-6);
  font-size: 1.0625rem;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--block {
  width: 100%;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Card */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.section--alt .card {
  border-color: transparent;
}

.card--hover {
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Het icoon kleurt mee en het pijltje schuift op zodra de kaart oplicht */
.card--hover .icon-badge {
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.35s var(--ease-spring);
}

.card--hover:hover .icon-badge,
.card--hover:focus-within .icon-badge {
  background: var(--brand-blue);
  color: var(--on-brand);
  transform: scale(1.06);
}

.card--hover:hover .card__link::after {
  transform: translateX(3px);
}

.card__title {
  font-size: var(--fs-h3);
}

.card__text {
  color: var(--muted);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
}

.card__link::after {
  content: "→";
  transition: transform 0.2s var(--ease);
}

.card__link:hover::after {
  transform: translateX(3px);
}

/* Hele kaart klikbaar via de link */
.card__link--stretched::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Icoon in blauw bolletje */
.icon-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-blue-soft);
  color: var(--brand-ink);
}

.icon-badge svg {
  width: 28px;
  height: 28px;
}

/* Lijst met groene vinkjes */
.check-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

.check-list li {
  position: relative;
  padding-left: var(--space-6);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--brand-green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e1b2e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 0.75rem no-repeat;
}

/* Decoratieve X uit de branding (max 2 per pagina) */
.deco-x {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* CTA blok: blauw vlak, witte tekst */
.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, var(--space-6) + 3vw, 4.5rem);
  border-radius: var(--radius-lg);
  background: var(--brand-blue);
  color: var(--on-brand);
  --focus: var(--brand-green);
}

.cta > *:not(.deco-x) {
  position: relative;
  z-index: 1;
}

.cta__title {
  max-width: 18ch;
  margin-bottom: var(--space-4);
}

.cta__text {
  max-width: 52ch;
  margin-bottom: var(--space-6);
  font-size: var(--fs-lead);
  color: var(--on-dark);
}

/* 6. Header ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 2px 16px var(--shade-a06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: var(--header-h);
}

.site-header__logo {
  flex-shrink: 0;
  border-radius: 4px;
}

.site-header__logo img {
  width: 184px;
  height: auto;
}

.nav-toggle {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: calc(var(--space-2) * -1);
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.nav-toggle svg {
  width: 26px;
  height: 26px;
}

/* Menu-icoon draait over in het kruisje */
.nav-toggle svg {
  grid-area: 1 / 1;
  transition: opacity 0.2s var(--ease), transform 0.3s var(--ease-out);
}

.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-menu {
  opacity: 0;
  transform: rotate(-45deg) scale(0.7);
}

.nav-toggle[aria-expanded="true"] .icon-menu {
  transform: rotate(45deg) scale(0.7);
}

.nav-toggle[aria-expanded="true"] .icon-close {
  opacity: 1;
  transform: none;
}

/* Mobiel: uitklappaneel onder de header. Schuift zacht open in plaats van te verspringen;
   visibility houdt de links uit de tabvolgorde zolang het menu dicht is. */
.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--space-4) var(--gutter) var(--space-6);
  background: var(--card);
  box-shadow: var(--shadow-md);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s var(--ease), transform 0.25s var(--ease), visibility 0s 0.25s;
}

.site-nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.25s var(--ease-out), transform 0.35s var(--ease-out), visibility 0s;
}

/* De links komen één voor één mee naar binnen */
.site-nav__list > li,
.site-nav__actions {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.site-nav.is-open .site-nav__list > li,
.site-nav.is-open .site-nav__actions {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out);
  transition-delay: calc(0.04s + var(--i, 0) * 0.035s);
}

.site-nav__list > li:nth-child(2) { --i: 1; }
.site-nav__list > li:nth-child(3) { --i: 2; }
.site-nav__list > li:nth-child(4) { --i: 3; }
.site-nav__list > li:nth-child(5) { --i: 4; }
.site-nav__actions { --i: 5; }

.site-nav__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
}

.site-nav__link {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--brand-ink);
}

.site-nav__actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (min-width: 960px) {
  :root { --header-h: 84px; }

  .site-header__logo img { width: 210px; }

  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-nav__list > li,
  .site-nav__actions {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-nav__actions {
    margin-left: auto;
  }

  /* Menu exact in het midden van de balk, los van de breedte van logo en knoppen */
  .site-header__inner {
    position: relative;
  }

  .site-nav__list {
    position: absolute;
    top: 50%;
    left: 50%;
    flex-direction: row;
    gap: var(--space-2);
    transform: translate(-50%, -50%);
  }

  .site-nav__link {
    position: relative;
    padding: var(--space-2) var(--space-3);
    border: 0;
    font-size: 1rem;
    font-weight: 500;
  }

  .site-nav__link::after {
    content: "";
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: 2px;
    height: 3px;
    border-radius: 2px;
    background: var(--brand-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease);
  }

  .site-nav__link:hover::after,
  .site-nav__link.is-active::after {
    transform: scaleX(1);
  }

  .site-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-top: 0;
  }

  /* Menu-items nooit over twee regels */
  .site-nav__link {
    white-space: nowrap;
  }
}

/* Smallere computerschermen: menu iets compacter, zodat alles op één rij past */
@media (min-width: 960px) and (max-width: 1179px) {
  .site-nav__list {
    gap: 0;
  }

  .site-nav__link {
    padding-inline: var(--space-2);
    font-size: 0.9375rem;
  }

  .site-nav__link::after {
    left: var(--space-2);
    right: var(--space-2);
  }

  .site-nav__actions {
    gap: var(--space-3);
  }

  .site-header__logo img {
    width: 180px;
  }
}

/* 7. Footer ---------------------------------------------------------------- */
.site-footer {
  --focus: var(--brand-green);
  position: relative;
  overflow: hidden;
  padding-top: var(--space-8);
  background: var(--footer-bg);
  color: var(--on-dark-soft);
  font-size: 0.9375rem;
}

.site-footer a {
  color: var(--on-dark-strong);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--white);
  text-decoration: underline;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
}

@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
}

.site-footer__logo {
  display: inline-block;
  margin-bottom: var(--space-4);
}

.site-footer__logo img {
  width: 200px;
}

.site-footer__about {
  max-width: 34ch;
}

.site-footer__title {
  margin-bottom: var(--space-4);
  font-size: 1rem;
  color: var(--white);
}

.site-footer__list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.site-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.site-footer__contact svg {
  width: 18px;
  height: 18px;
  margin-top: 0.2em;
  flex-shrink: 0;
  color: var(--brand-green);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px solid var(--on-dark-line);
  font-size: var(--fs-small);
  color: var(--on-dark-muted);
}

/* Copyright, adres en btw als losse stukjes in plaats van met middelpunten */
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  padding: 0;
}

/* 8. Sticky mobiele balk (bellen + offerte) -------------------------------- */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-2);
  padding: var(--space-3) var(--gutter);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px var(--shade-a08);
}

.mobile-bar .btn {
  min-height: 48px;
  padding-inline: var(--space-3);
}

/* Ruimte voor de belbalk: in de (donkere) footer, zodat er onderaan geen lichte strook staat */
.site-footer {
  padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom));
}

@media (min-width: 960px) {
  .mobile-bar { display: none; }
  .site-footer { padding-bottom: 0; }
}

/* 9. Animaties ------------------------------------------------------------- */
/* Enkel verbergen als JS draait, anders blijft alles zichtbaar */
/* main.js geeft elementen die samen in beeld komen automatisch een kleine vertraging
   (--reveal-delay) en haalt .reveal weer weg zodra de animatie klaar is. Daarna gelden
   de gewone hover-overgangen opnieuw (anders zou een kaart 0,8 s traag reageren). */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero: titel, tekst en knoppen komen na elkaar in plaats van als één blok */
.js .hero__content.reveal {
  opacity: 1;
  transform: none;
}

.js .hero__content.reveal > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.js .hero__content.reveal.is-visible > * {
  opacity: 1;
  transform: none;
}

.js .hero__content.reveal > :nth-child(2) { transition-delay: 0.09s; }
.js .hero__content.reveal > :nth-child(3) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal,
  .js .hero__content.reveal > * {
    opacity: 1;
    transform: none;
  }

  .btn:hover,
  .btn:active,
  .card--hover:hover {
    transform: none;
  }
}

/* 10. Utilities ------------------------------------------------------------ */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-muted { color: var(--muted); }

/* 11. Subpagina's ---------------------------------------------------------- */

/* Paginakop */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-7), var(--space-6) + 4vw, 5.5rem);
  background: var(--glow), var(--surface);
}

.page-hero > .container {
  position: relative;
  z-index: 1;
}

/* Groene X in de banner van subpaginas: volledig zichtbaar, in het echte merkgroen.
   Telefoon/tablet: klein logo boven de titel. Computer: rechts, verticaal gecentreerd. */
.page-hero .deco-x {
  position: static;
  display: block;
  width: 56px;
  height: auto;
  margin: 0 0 var(--space-5) var(--gutter);
}

/* Computer: de X vult de volledige hoogte van de banner, strak in de rechterbovenhoek,
   als achtergrond achter de tekst en de snelknoppen */
@media (min-width: 1024px) {
  .page-hero .deco-x {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
    max-width: 42%;
    margin: 0;
    object-fit: contain;
    object-position: right top;
  }
}

.page-hero__title {
  max-width: 20ch;
  margin-bottom: var(--space-4);
}

.page-hero__lead {
  max-width: 60ch;
  font-size: var(--fs-lead);
  color: var(--muted);
}

.page-hero .btn-group {
  margin-top: var(--space-6);
}

/* Snelmenu met ankers */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.chip-list a {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.chip-list a:hover {
  border-color: var(--brand-blue);
  color: var(--brand-ink);
}

/* Logo-X in blauwe blokken: volledig zichtbaar.
   Breed blok: groot rechts in het midden. Smal blok of mobiel: merkteken boven de titel. */
.cta .deco-x--cta {
  position: static;
  width: 56px;
  height: auto;
  margin-bottom: var(--space-5);
}

@media (min-width: 900px) {
  .cta:not(.cta--tile) .deco-x--cta {
    position: absolute;
    top: 50%;
    right: clamp(2.5rem, 1rem + 5vw, 6rem);
    width: clamp(150px, 10vw + 60px, 210px);
    margin: 0;
    transform: translateY(-50%);
  }
}

.cta--tile .deco-x--cta {
  width: 44px;
  margin-bottom: var(--space-4);
}

/* Homepage hero */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-7), var(--space-6) + 5vw, 6.5rem);
  background: var(--glow), var(--surface);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.hero__title {
  margin-bottom: var(--space-5);
}

.hero__lead {
  max-width: 54ch;
  margin-bottom: var(--space-6);
  font-size: var(--fs-lead);
  color: var(--muted);
}

/* Grote logo-X in de hero (hier landt de intro) */
.hero__mark {
  position: relative;
  display: none;
  justify-self: center;
  width: clamp(240px, 22vw, 340px);
  aspect-ratio: 1;
  padding: 0;
  border-radius: var(--radius-md);
  cursor: pointer;  /* klikbaar: speelt de intro opnieuw af, met geluid */
}

.hero__mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Slogan onder de grote X */
.hero__brand {
  display: none;
  justify-items: center;
  gap: var(--space-5);
}

.hero__tagline {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 0.9rem + 0.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
}

.hero__tagline span {
  color: var(--brand-ink);
}

@media (min-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); }
  .hero__brand { display: grid; }
  .hero__mark { display: block; }
}

/* Intro: merkblauw scherm waarop de X samenvliegt (enkel homepage, 1x per sessie) */
.intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--brand-blue);
  cursor: pointer;
}

.intro__stage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.intro-pending {
  overflow: hidden;
}

.intro-pending .intro {
  display: block;
}

/* Tijdens de intro: de X in de hero wacht tot de vliegende X landt */
.intro-pending .hero__mark-front {
  visibility: hidden;
}

/* Vertrouwensbalk onder de hero: witte kaart tussen twee grijze vlakken */
.trust-bar {
  position: relative;
  z-index: 1;
  background: var(--surface);
}

.trust-bar .trust-bar__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-md);
}

.trust-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
}

.trust-bar__item svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--brand-ink);
}

@media (min-width: 960px) {
  .trust-bar .trust-bar__list {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    padding: var(--space-6) var(--space-7);
  }

  .trust-bar__item { font-size: 1rem; }
}

/* Kleine CTA-tegel in een kaartenraster */
.cta--tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6);
}

.cta--tile .cta__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-h3);
}

.cta--tile .cta__text {
  margin-bottom: var(--space-5);
  font-size: var(--fs-body);
}

.cta--tile .btn {
  align-self: flex-start;
}

/* Dezelfde balk los boven een raster (dienstenpagina) */
.cta--banner {
  margin-bottom: var(--space-6);
}

/* Met 8 diensten staat de tegel alleen op de laatste rij: dan een brede balk
   met X, tekst en knop naast elkaar */
@media (min-width: 640px) {
  .cta--tile {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "x title btn" "x text btn";
    align-items: center;
    column-gap: var(--space-5);
  }

  .cta--tile .deco-x--cta { grid-area: x; margin: 0; }
  .cta--tile .cta__title { grid-area: title; max-width: none; align-self: end; }
  .cta--tile .cta__text { grid-area: text; margin: 0; align-self: start; }
  .cta--tile .btn { grid-area: btn; align-self: center; }
}

/* FAQ */
.faq {
  display: grid;
  gap: var(--space-3);
  max-width: 800px;
  margin-inline: auto;
}

.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.faq__item[open] {
  box-shadow: var(--shadow-sm);
}

.faq__item:hover {
  border-color: var(--blue-a25);
}

.faq__item summary {
  position: relative;
  padding: var(--space-5) 3.5rem var(--space-5) var(--space-5);
  font-family: var(--font-heading);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: var(--space-5);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--brand-blue-soft);
  color: var(--brand-ink);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.35s var(--ease-out), background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.faq__item summary {
  transition: color 0.2s var(--ease);
}

.faq__item summary:hover {
  color: var(--brand-ink);
}

.faq__item summary:hover::after {
  background: var(--brand-blue);
  color: var(--on-brand);
}

/* .is-closing zet main.js tijdens het dichtschuiven: het plusje draait dan al terug */
.faq__item[open]:not(.is-closing) summary::after {
  transform: rotate(45deg);
}

/* Het antwoord schuift open (hoogte via main.js) en de tekst vaagt mee in */
.faq__item {
  overflow: hidden;
}

.faq__item[open]:not(.is-closing) p {
  animation: faq-in 0.45s var(--ease-out) both;
}

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
}

.faq__item p {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--muted);
}

/* Tekst links + kaart rechts, verticaal gecentreerd ten opzichte van elkaar */
.service {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.service + .service {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}

.service__intro {
  display: grid;
  gap: var(--space-4);
}

.service__intro p {
  color: var(--muted);
}

/* Het grid zorgt al voor afstand; anders wordt de ruimte onder het label dubbel */
.service__intro .eyebrow {
  margin-bottom: 0;
}

@media (min-width: 960px) {
  .service {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-8);
  }
}

/* Dienstkaarten: 2 per rij */
@media (min-width: 900px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.service-card {
  gap: var(--space-4);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* Foto bovenaan de dienstkaart: loopt door tot de randen van de kaart */
.service-card {
  --card-pad: var(--space-6);
}

.service-card__media {
  position: relative;
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--space-2);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
}

.service-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lege plek zolang de foto nog niet geüpload is */
.service-card__media--empty {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, var(--blue-a05) 14px 28px),
    var(--brand-blue-soft);
}

.service-card__media--empty span {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--brand-ink);
}

.service-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.service-card__head .icon-badge {
  flex-shrink: 0;
}

.service-card__title {
  font-size: var(--fs-h3);
}

.service-card .check-list {
  margin-block: var(--space-2);
}

.service-card__btn {
  align-self: flex-start;
  margin-top: auto;
  white-space: normal;
}

/* CTA als laatste tegel in het raster */
.service-card--cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Met 8 diensten: de CTA neemt de volle breedte van de laatste rij */
@media (min-width: 900px) {
  .service-card--cta { grid-column: 1 / -1; }
}

/* Genummerde stappen */
.step__number {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-blue);
  color: var(--on-brand);
  font-family: var(--font-heading);
  font-weight: 700;
}

/* Contact */
.contact-grid {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 960px) {
  .contact-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

.contact-list {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: flex;
  gap: var(--space-3);
}

.contact-list svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 0.15em;
  color: var(--brand-ink);
}

.contact-list strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
}

/* Formulier */
.form {
  display: grid;
  gap: var(--space-5);
}

.form__row {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .form__row { grid-template-columns: 1fr 1fr; }
}

.form__field {
  display: grid;
  gap: var(--space-2);
}

.form__label {
  font-weight: 500;
}

.form__optional {
  font-weight: 400;
  color: var(--muted);
}

.form__input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--card);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

textarea.form__input {
  min-height: 140px;
  resize: vertical;
}

.form__input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--blue-a18);
}

.form__input:user-invalid {
  border-color: var(--error);
}

.form__check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--muted);
}

.form__check input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.1em;
  accent-color: var(--brand-blue);
}

.form__status {
  font-weight: 500;
}

.form__status:empty {
  display: none;
}

/* Lopende tekst (privacy) */
.prose {
  max-width: 72ch;
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose h2 {
  margin-top: var(--space-7);
  font-size: var(--fs-h3);
}

.prose ul {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: var(--space-2);
}

/* Persoonlijke belofte: warme zandkleurige band */
.promise {
  background: var(--glow), var(--sand);
  text-align: center;
}

.promise__inner {
  max-width: 820px;
  margin-inline: auto;
}

.promise__mark {
  width: 48px;
  margin: 0 auto var(--space-5);
}

.promise__title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-h3);
  color: var(--brand-ink);
}

.promise__text {
  margin-bottom: var(--space-5);
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

.promise__sub {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--muted);
}

/* Over ons: oprichter met foto, citaat en feiten */
.founder {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 960px) {
  .founder { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-8); }
}

.founder__photo {
  position: relative;
  margin: 0;
}

.founder__photo > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Groene X van het logo in een wit bolletje op de hoek van de foto */
.founder__badge {
  position: absolute;
  top: -20px;
  right: -20px;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow-md);
}

.founder__badge img {
  width: 44px;
  height: 44px;
}

.founder__caption {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--card);
  font-size: var(--fs-small);
  font-weight: 500;
}

.founder__text {
  display: grid;
  gap: var(--space-4);
}

.founder__text .eyebrow {
  margin-bottom: 0;
}

.founder__text > p {
  color: var(--muted);
}

.founder__name {
  font-size: var(--fs-h2);
}

.founder__text .founder__role {
  margin-top: calc(var(--space-3) * -1);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--brand-ink);
}

.founder__quote {
  margin-block: var(--space-2);
  padding: 0;
}

.founder__quote p {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.4;
}

.founder__quote cite {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  font-style: normal;
  color: var(--muted);
}

.founder__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: 0;
}


.founder__facts div {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.founder__facts dt {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--muted);
}

.founder__facts dd {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
}

/* 12. Planner (schoonmaakplan.html) ---------------------------------------- */
.planner {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .planner { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--space-7); }
}

.planner__wizard {
  gap: var(--space-5);
  padding: clamp(var(--space-5), var(--space-4) + 2vw, 2.5rem);
}

/* Voortgang */
.planner__top {
  display: grid;
  gap: var(--space-2);
}

.planner__count {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--muted);
}

.planner__progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  overflow: hidden;
}

.planner__progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-blue), var(--blue-bright));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .planner__progress-bar { transition: none; }
}

/* Stappen */
.planner__step {
  display: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.planner__step.is-active {
  display: block;
  animation: planner-in 0.45s var(--ease-out);
}

/* Volgende vraag schuift van rechts binnen, vorige van links (data-dir via plan.js) */
@keyframes planner-in {
  from { opacity: 0; transform: translateX(var(--planner-from, 18px)); }
  to { opacity: 1; transform: none; }
}

[data-dir="back"] .planner__step.is-active {
  --planner-from: -18px;
}

.planner__question {
  margin-bottom: var(--space-5);
  padding: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
}

.planner__question:focus {
  outline: none;
}

.planner__hint {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--muted);
}

/* Hint direct onder de vraag (stap 5) */
.planner__question + .planner__hint {
  margin-top: calc(var(--space-3) * -1);
  margin-bottom: var(--space-4);
}

.planner__sub {
  margin: var(--space-5) 0 var(--space-3);
  font-weight: 500;
}

.planner__sub:first-child {
  margin-top: 0;
}

/* Gedeelde stijl voor tegels, chips en extra's */
.planner__tile > span,
.planner__chip > span,
.planner__extra > span {
  display: flex;
  border: 1.5px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
    color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.planner__tile:hover > span,
.planner__chip:hover > span,
.planner__extra:hover > span {
  border-color: var(--brand-blue);
}

.planner__tile input:focus-visible + span,
.planner__chip input:focus-visible + span,
.planner__extra input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Type pand: liggende tegels (icoon links, tekst rechts), twee per rij */
.planner__tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

@media (min-width: 520px) {
  .planner__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.planner__tile > span {
  align-items: center;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
  hyphens: auto;
}

.planner__tile-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-blue-soft);
  color: var(--brand-ink);
}

.planner__tile-icon svg {
  width: 22px;
  height: 22px;
}

.planner__tile input:checked + span {
  border-color: var(--brand-blue);
  background: var(--brand-blue-soft);
  box-shadow: 0 0 0 1px var(--brand-blue);
}

.planner__tile input:checked + span .planner__tile-icon {
  background: var(--brand-blue);
  color: var(--on-brand);
}

/* Chips */
.planner__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.planner__chip > span {
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) 1.125rem;
  border-radius: var(--radius-pill);
  font-weight: 500;
}

.planner__chips--round .planner__chip > span {
  min-width: 52px;
  padding-inline: var(--space-3);
}

.planner__chip input:checked + span {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
  color: var(--on-brand);
}

/* Schuifbalk voor de grootte */
.planner__range {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.planner__range-label {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--muted);
}

.planner__range-value {
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  font-weight: 700;
  color: var(--brand-ink);
}

/* Schuifbalk in huisstijl: witte baan, blauw gevuld deel (--fill via plan.js), witte knop met groen hart */
.planner__range input {
  --fill: 50%;
  --track: linear-gradient(to right, var(--brand-blue) 0 var(--fill), var(--card) var(--fill) 100%);
  width: 100%;
  height: 32px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.planner__range input:focus {
  outline: none;
}

/* Baan */
.planner__range input::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--track);
  box-shadow: inset 0 0 0 1px var(--border);
}

.planner__range input::-moz-range-track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border);
}

.planner__range input::-moz-range-progress {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--brand-blue);
}

/* Knop: wit met blauwe rand en een groen bolletje in het midden */
.planner__range input::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: calc((10px - 28px) / 2);  /* thumb gecentreerd op de 10px-baan */
  border: 3px solid var(--brand-blue);
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-green) 0 5px, var(--card) 5.5px);
  box-shadow: 0 4px 12px var(--blue-a30);
  transition: transform 0.15s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.planner__range input::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid var(--brand-blue);
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-green) 0 5px, var(--card) 5.5px);
  box-shadow: 0 4px 12px var(--blue-a30);
  transition: transform 0.15s var(--ease);
}

.planner__range input:hover::-webkit-slider-thumb,
.planner__range input:active::-webkit-slider-thumb {
  transform: scale(1.1);
}

.planner__range input:hover::-moz-range-thumb,
.planner__range input:active::-moz-range-thumb {
  transform: scale(1.1);
}

.planner__range input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px var(--blue-a20), 0 4px 12px var(--blue-a30);
}

.planner__range input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 5px var(--blue-a20), 0 4px 12px var(--blue-a30);
}

@media (prefers-reduced-motion: reduce) {
  .planner__range input::-webkit-slider-thumb { transition: none; }
  .planner__range input:hover::-webkit-slider-thumb,
  .planner__range input:active::-webkit-slider-thumb { transform: none; }
}

.planner__range-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-small);
  color: var(--muted);
}

/* Extra's */
.planner__extras {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .planner__extras { grid-template-columns: 1fr 1fr; }
}

.planner__extra > span {
  position: relative;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: var(--space-4) var(--space-4) var(--space-4) 3.25rem;
  border-radius: var(--radius-md);
}

.planner__extra > span::before {
  content: "";
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-4) + 2px);
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  background: var(--card) center / 14px no-repeat;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.planner__extra small {
  font-size: var(--fs-small);
  color: var(--muted);
}

.planner__extra input:checked + span {
  border-color: var(--brand-blue);
  background: var(--brand-blue-soft);
}

.planner__extra input:checked + span::before {
  border-color: var(--brand-blue);
  background-color: var(--brand-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Postcode */
[data-body="place"] .form__label {
  display: block;
}

.planner__postcode {
  max-width: 180px;
  margin-top: var(--space-2);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
}

.planner__area {
  margin-top: var(--space-3);
  font-weight: 500;
}

.planner__area:empty {
  display: none;
}

.planner__area.is-ok::before,
.planner__area.is-check::before {
  display: inline-block;
  width: 1.25rem;
  margin-right: var(--space-1);
}

.planner__area.is-ok::before { content: "✓"; color: var(--ok); }
.planner__area.is-check::before { content: "!"; color: var(--warn); font-weight: 700; }

/* Foutmelding en knoppen */
.planner__error {
  font-weight: 500;
  color: var(--error);
}

.planner__error:empty {
  display: none;
}

.planner__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.planner__nav [data-next],
.planner__nav [data-send] {
  margin-left: auto;
}

.planner__nav .btn[hidden] {
  display: none;
}

/* Het plan */
.planner__plan {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 1024px) {
  .planner__plan {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
  }
}

.planner__plan-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--brand-blue);
  color: var(--on-brand);
}

.planner__plan-head img {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.planner__plan-label {
  margin-bottom: var(--space-1);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--on-dark-muted);
}

.planner__plan-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
}

.planner__plan-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
}

.planner__empty {
  color: var(--muted);
}

.planner__skeleton {
  display: grid;
  gap: var(--space-3);
}

.planner__skeleton span {
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
}

.planner__skeleton span:nth-child(2) { width: 80%; }
.planner__skeleton span:nth-child(3) { width: 90%; }
.planner__skeleton span:nth-child(4) { width: 60%; }

.planner__rows {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.planner__row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.planner__row-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-blue-soft);
  color: var(--brand-ink);
}

.planner__row-icon svg {
  width: 18px;
  height: 18px;
}

.planner__row dt {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--muted);
}

.planner__row dd {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
}

.planner__tasks-title {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-family: var(--font-heading);
  font-weight: 600;
}

.planner__tasks {
  gap: var(--space-2);
  font-size: 0.9375rem;
}

.planner__note {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-small);
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .planner__step.is-active { animation: none; }
}

/* Koppeling planner en contactformulier */
.page-hero__note {
  margin-top: var(--space-4);
  color: var(--muted);
}

.page-hero__note a {
  font-weight: 600;
}

.form__notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--brand-green-soft);
  font-weight: 500;
}

.form__notice[hidden] {
  display: none;
}

/* Keuzemenu (select) in huisstijl ------------------------------------------
   Alle browsers: eigen blauw pijltje in het gesloten vak.
   Chrome en Edge (appearance: base-select): ook de open lijst in huisstijl.
   Safari en Firefox tonen de open lijst nog als standaardmenu van het systeem. */
select.form__input {
  padding-right: 2.75rem;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23024ff1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 1rem center / 18px no-repeat;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

@supports (appearance: base-select) {
  select.form__input,
  select.form__input::picker(select) {
    appearance: base-select;
  }

  select.form__input {
    display: flex;
    align-items: center;
    padding-right: var(--space-4);
    background-image: none;
  }

  /* Pijltje: blauw, draait om zodra de lijst open is */
  select.form__input::picker-icon {
    content: "";
    width: 18px;
    height: 18px;
    margin-left: auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23024ff1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: rotate 0.2s var(--ease);
  }

  select.form__input:open::picker-icon {
    rotate: 180deg;
  }

  /* De open lijst */
  select.form__input::picker(select) {
    margin-block: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    box-shadow: var(--shadow-lg);
  }

  select.form__input option {
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
  }

  select.form__input option:hover,
  select.form__input option:focus-visible {
    outline: none;
    background: var(--brand-blue-soft);
    color: var(--brand-ink);
  }

  select.form__input option:checked {
    background: var(--brand-blue);
    color: var(--on-brand);
    font-weight: 500;
  }

  /* Vinkje bij de gekozen optie in het groen van het merk */
  select.form__input option::checkmark {
    order: 1;
    margin-left: auto;
    color: var(--brand-green);
  }

  /* "Kies een dienst" is enkel een hint, geen echte keuze */
  select.form__input option[value=""] {
    color: var(--muted);
  }

  select.form__input option[value=""]:checked {
    background: transparent;
    color: var(--muted);
  }
}

/* 13. Mobiel ---------------------------------------------------------------
   Niets mag breder worden dan het scherm, en alles wat tikbaar is meet minstens 44px. */

/* Kolommen en kaarten mogen krimpen tot hun inhoud past (anders duwt één lang woord of
   een knop met lange tekst het hele raster breder dan het scherm) */
.grid > *,
.contact-grid > *,
.service > *,
.founder > *,
.planner > *,
.hero__inner > *,
.trust-bar__item {
  min-width: 0;
}

/* Lange woorden en e-mailadressen breken af in plaats van uit te steken */
.contact-list a,
.site-footer__contact a,
.card__title,
.service-card__title,
.cta__title {
  overflow-wrap: anywhere;
}

/* Tikdoelen: footerlinks krijgen echte hoogte */
.site-footer nav .site-footer__list {
  gap: 0;
}

.site-footer nav .site-footer__list a {
  display: inline-block;
  padding-block: 0.625rem;
}

/* Tikdoelen zonder de opmaak te verschuiven: groter tikvlak via padding,
   zelfde plek via een even grote negatieve marge */
.site-header__logo,
.site-footer__logo {
  padding-block: 0.4rem;
  margin-block: -0.4rem;
}

.contact-list a,
.site-footer__contact a {
  display: inline-block;
  padding-block: var(--space-3);
  margin-block: calc(var(--space-3) * -1);
}

/* Snelknoppen op de dienstenpagina */
.chip-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-4);
}

@media (max-width: 480px) {
  /* Knoppen met lange tekst mogen naar een tweede regel */
  .btn {
    white-space: normal;
  }

  /* Kaarten: iets minder binnenmarge, zodat de tekst meer ruimte krijgt */
  .card {
    padding: var(--space-5);
  }

  .service-card {
    --card-pad: var(--space-5);
  }

  /* Dienstkaarten: icoon boven de titel, zodat lange woorden zoals
     "Restaurantschoonmaak" op één regel passen */
  .service-card__head {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Vertrouwensbalk: één kolom, anders wordt de tekst te krap */
  .trust-bar .trust-bar__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-5);
  }
}

@media (max-width: 639px) {
  /* Footer: "Snelle links" en "Diensten" naast elkaar, over en contact over de volle breedte */
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
  }

  .site-footer__grid > div {
    grid-column: 1 / -1;
  }

}

@media (max-width: 480px) {
  /* Lange knopteksten gelijkmatig over twee regels in plaats van één los woord */
  .btn {
    text-wrap: balance;
  }

  /* Knoppen in blauwe blokken over de volle breedte */
  .cta .btn-group {
    flex-direction: column;
  }

  .cta .btn-group .btn {
    width: 100%;
  }

  /* Blauwe blokken: minder binnenmarge, zodat knopteksten op één regel passen */
  .cta {
    padding: var(--space-6) var(--space-5);
  }

  .btn {
    padding-inline: var(--space-4);
  }

  /* Lange woorden (schoonmaakpartner) afbreken met een koppelteken i.p.v. tegen de rand */
  h1,
  h2 {
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  .hero__title,
  .page-hero__title {
    font-size: 1.75rem;
  }

  /* Homepage: compacte dienstkaartjes, icoon naast de tekst */
  .grid--4 > .card--hover {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    align-items: start;
    padding: var(--space-4) var(--space-5);
  }

  .grid--4 > .card--hover .icon-badge {
    grid-row: span 3;
    width: 44px;
    height: 44px;
  }

  .grid--4 > .card--hover .icon-badge svg {
    width: 22px;
    height: 22px;
  }

  .grid--4 > .card--hover .card__link {
    padding-top: 0;
  }

  .grid--4 {
    gap: var(--space-3);
  }

  /* Dienstenpagina: de foto zegt het al, dus geen extra icoon; knop over de volle breedte */
  .service-card__media + .service-card__head .icon-badge {
    display: none;
  }

  .service-card__btn {
    align-self: stretch;
    font-size: 0.9375rem;
  }
}

/* Heel smalle telefoons (bv. iPhone SE): knopteksten iets kleiner, zodat ze op één regel blijven */
@media (max-width: 360px) {
  .btn,
  .service-card__btn {
    padding-inline: var(--space-3);
    font-size: 0.875rem;
  }

  .cta {
    padding-inline: var(--space-4);
  }
}

/* 14. Slogan ------------------------------------------------------------- */

/* Taalknop NL | EN in het menu */
/* Klein en rustig: gewone tekst "NL / EN", de actieve taal donker, de andere grijs */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-self: start;
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;  /* tikvlak blijft groot genoeg op telefoon */
  padding-inline: var(--space-1);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.lang-switch a + a::before {
  content: "/";
  margin-right: var(--space-2);
  font-weight: 400;
  color: var(--field-border);
}

.lang-switch a:hover {
  color: var(--brand-ink);
}

.lang-switch a[aria-current="true"] {
  font-weight: 600;
  color: var(--ink);
}

/* Footer: Instagram en TikTok */
.site-footer__social {
  display: grid;
  gap: 0;
  margin-top: var(--space-4);
  list-style: none;
  padding: 0;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  font-weight: 500;
}

.site-footer__social svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--brand-green);
}

/* Footer: slogan als afsluiter */
.site-footer__slogan {
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--brand-green);
}

/* 15. Bedankt-animatie na een offerteaanvraag ------------------------------
   Tijdlijn (ms), in blokken met telkens een korte pauze, gelijk met successAt() in sfx.js:
   0 blauwe cirkel · 400 X vliegt samen · 950 glans + sterretjes · (pauze) ·
   1650 "Niet vergeten," · 1950 "altijd proper" · 2300 bedankt-tekst en knop.
   --x en --y (startpunt van de cirkel) zet main.js. */
.sent {
  --x: 50%;
  --y: 50%;
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  overflow-y: auto;
  background: var(--brand-blue);
  color: var(--on-brand);
  text-align: center;
  --focus: var(--brand-green);
  clip-path: circle(0 at var(--x) var(--y));
}

.sent[hidden] {
  display: none;
}

.sent.is-open {
  animation: sent-reveal 0.45s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.sent.is-closing {
  clip-path: circle(150% at var(--x) var(--y));
  animation: sent-fade-out 0.35s var(--ease) forwards;
}

@keyframes sent-reveal {
  from { clip-path: circle(0 at var(--x) var(--y)); }
  to { clip-path: circle(150% at var(--x) var(--y)); }
}

@keyframes sent-fade-out {
  to { opacity: 0; }
}

.sent__panel {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  max-width: 560px;
}

/* Logo-X met sterretjes */
.sent__mark {
  position: relative;
  width: clamp(110px, 22vw, 150px);
  aspect-ratio: 1;
  margin-bottom: var(--space-2);
}

.sent__x {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sent__piece {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.sent.is-open .sent__piece--1 { animation: sent-piece-1 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards; }
.sent.is-open .sent__piece--2 { animation: sent-piece-2 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s forwards; }
.sent.is-open .sent__piece--3 { animation: sent-piece-3 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards; }

@keyframes sent-piece-1 {
  from { opacity: 0; transform: translate(-60px, -90px); }
  to { opacity: 1; transform: none; }
}

@keyframes sent-piece-2 {
  from { opacity: 0; transform: translate(50px, -70px); }
  to { opacity: 1; transform: none; }
}

@keyframes sent-piece-3 {
  from { opacity: 0; transform: translate(-50px, 70px); }
  to { opacity: 1; transform: none; }
}

/* Kleine "punch" wanneer de X compleet is */
.sent.is-open .sent__x {
  animation: sent-punch 0.35s var(--ease) 0.9s;
}

@keyframes sent-punch {
  40% { transform: scale(1.1); }
}

/* Glans die over de X veegt, als een pas gelapte ruit */
.sent__shine {
  transform-box: view-box;
}

.sent.is-open .sent__shine {
  animation: sent-shine 0.55s ease-in-out 0.95s forwards;
}

@keyframes sent-shine {
  from { transform: rotate(20deg) translateX(0); }
  to { transform: rotate(20deg) translateX(62px); }
}

/* Sterretjes rond de X */
.sent__sparkle {
  position: absolute;
  width: 22px;
  height: 22px;
  opacity: 0;
  background: var(--brand-green);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.sent__sparkle--1 { top: -14%; left: -18%; }
.sent__sparkle--2 { top: 6%; right: -22%; width: 16px; height: 16px; background: var(--white); }
.sent__sparkle--3 { bottom: -10%; right: -14%; }
.sent__sparkle--4 { bottom: 10%; left: -26%; width: 14px; height: 14px; background: var(--white); }

.sent.is-open .sent__sparkle { animation: sent-twinkle 0.7s var(--ease) forwards; }
.sent.is-open .sent__sparkle--1 { animation-delay: 1s; }
.sent.is-open .sent__sparkle--2 { animation-delay: 1.15s; }
.sent.is-open .sent__sparkle--3 { animation-delay: 1.3s; }
.sent.is-open .sent__sparkle--4 { animation-delay: 1.35s; }

@keyframes sent-twinkle {
  0% { opacity: 0; transform: scale(0) rotate(0); }
  45% { opacity: 1; transform: scale(1.2) rotate(45deg); }
  100% { opacity: 0.85; transform: scale(0.8) rotate(90deg); }
}

/* Slogan: woord per woord */
.sent__slogan {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sent__word {
  display: inline-block;
  opacity: 0;
}

.sent__word--2 {
  color: var(--brand-green);
}

.sent.is-open .sent__word--1 { animation: sent-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1.65s forwards; }
.sent.is-open .sent__word--2 { animation: sent-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.95s forwards; }

@keyframes sent-pop {
  from { opacity: 0; transform: translateY(18px) scale(0.85); }
  to { opacity: 1; transform: none; }
}

/* Bedankt-tekst en knop */
.sent__body {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  opacity: 0;
}

.sent.is-open .sent__body {
  animation: sent-up 0.4s var(--ease) 2.3s forwards;
}

@keyframes sent-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.sent__title {
  font-size: var(--fs-h3);
}

.sent__text {
  max-width: 46ch;
  color: var(--on-dark);
}

.sent__body .btn {
  margin-top: var(--space-3);
}

/* Minder beweging: alles meteen zichtbaar, enkel een zachte overgang */
@media (prefers-reduced-motion: reduce) {
  .sent,
  .sent.is-open {
    clip-path: none;
    animation: none;
  }

  .sent__piece,
  .sent__word,
  .sent__body {
    opacity: 1;
    animation: none !important;
  }

  .sent__sparkle,
  .sent__shine {
    display: none;
  }
}

/* 16. Vloeiende paginawissel ---------------------------------------------------
   De groene X glijdt bij elke paginawissel van zijn oude naar zijn nieuwe plek
   (View Transitions; werkt in Chrome, Edge en Safari, andere browsers wisselen gewoon).
   Elke pagina heeft precies één X met deze naam: de grote X op Home, die in de banner elders. */
@view-transition {
  navigation: auto;
}

.hero__mark-front,
.page-hero .deco-x {
  view-transition-name: brand-x;
}

/* De menubalk blijft staan tijdens de wissel */
.site-header {
  view-transition-name: site-header;
}

::view-transition-group(brand-x) {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* 17. Verfijning ---------------------------------------------------------------
   Kleine bewegingen die de site afwerken. Alles is extra: zonder JavaScript of met
   "minder beweging" staat elke pagina er gewoon meteen, zonder iets te missen. */

/* Subpagina's: titel, tekst en snelknoppen komen na elkaar binnen bij het laden */
.page-hero__title,
.page-hero__lead,
.page-hero .chip-list,
.page-hero .btn-group,
.page-hero__note {
  animation: rise 0.8s var(--ease-out) both;
}

.page-hero__lead { animation-delay: 0.08s; }

.page-hero .chip-list,
.page-hero .btn-group,
.page-hero__note { animation-delay: 0.16s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
}

/* Grote X in de hero: geeft mee onder de muis en krijgt een glans, als een pas gelapte ruit.
   De glans is een lichtstreep die door de vorm van de X gemaskeerd wordt. */
.hero__mark {
  transition: transform 0.5s var(--ease-out);
}

.hero__mark:hover {
  transform: scale(1.03);
}

.hero__mark:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

.hero__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 45%, rgba(255, 255, 255, 0.75) 50%, transparent 55%) 100% 0 / 250% 100% no-repeat;
  -webkit-mask: url("../logo/x-groen.svg") center / 100% 100% no-repeat;
  mask: url("../logo/x-groen.svg") center / 100% 100% no-repeat;
}

/* .is-shining zet main.js één keer, zodra de X geland is */
.hero__mark.is-shining::after,
.hero__mark:hover::after {
  animation: x-shine 0.9s ease-in-out;
}

@keyframes x-shine {
  to { background-position: 0 0; }
}

.intro-pending .hero__mark::after {
  display: none;
}

/* Slogan: groene streep trekt zich onder "vlekkeloze" */
.hero__tagline span {
  padding-bottom: 0.08em;
  background: linear-gradient(var(--brand-green), var(--brand-green)) 0 100% / 100% 0.14em no-repeat;
  transition: background-size 0.7s var(--ease-out) 0.55s;
}

.js .hero__tagline.reveal:not(.is-visible) span {
  background-size: 0 0.14em;
}

/* Stapnummers en groene vinkjes veren op hun plek zodra hun kaart in beeld komt */
.step__number {
  transition: transform 0.6s var(--ease-spring), opacity 0.3s var(--ease);
  transition-delay: calc(var(--reveal-delay, 0s) + 0.15s);
}

.js .reveal:not(.is-visible) .step__number {
  opacity: 0;
  transform: scale(0.4);
}

.reveal .check-list li::before {
  transition: transform 0.5s var(--ease-spring);
  transition-delay: calc(var(--reveal-delay, 0s) + 0.25s + var(--n, 0) * 0.06s);
}

.js .reveal:not(.is-visible) .check-list li::before {
  transform: scale(0);
}

.check-list li:nth-child(2) { --n: 1; }
.check-list li:nth-child(3) { --n: 2; }
.check-list li:nth-child(4) { --n: 3; }
.check-list li:nth-child(5) { --n: 4; }

/* Over ons: het bolletje met de X springt op de hoek van de foto */
.founder__badge {
  transition: transform 0.7s var(--ease-spring) 0.35s;
}

.js .founder__photo.reveal:not(.is-visible) .founder__badge {
  transform: scale(0) rotate(-30deg);
}

/* Dienstkaarten: de foto komt heel licht dichterbij onder de muis */
.service-card__media img {
  transition: transform 1.2s var(--ease-out);
}

.service-card:hover .service-card__media img {
  transform: scale(1.04);
}

/* Aangekomen via een link (bv. diensten.html#kantoren): de kaart licht even blauw op */
.service-card:target {
  animation: target-ring 2s var(--ease) 0.4s;
}

@keyframes target-ring {
  0%, 55% { box-shadow: 0 0 0 3px var(--brand-blue), var(--shadow-md); }
  100% { box-shadow: 0 0 0 3px transparent, var(--shadow-sm); }
}

/* Snelknoppen */
.chip-list a {
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.chip-list a:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Invulvelden: rand wordt donkerder onder de muis */
.form__input:hover:not(:focus) {
  border-color: var(--ink);
}

/* Planner: keuzes geven mee bij het tikken, nieuwe regels schuiven in het plan */
.planner__tile > span,
.planner__chip > span,
.planner__extra > span {
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
    color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
}

.planner__tile:active > span,
.planner__chip:active > span,
.planner__extra:active > span {
  transform: scale(0.98);
}

.planner__tile-icon {
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.planner__progress-bar {
  transition-duration: 0.6s;
  transition-timing-function: var(--ease-out);
}

.planner__range-value {
  font-variant-numeric: tabular-nums;
}

.planner__row.is-new,
.planner__tasks li.is-new {
  animation: plan-add 0.5s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes plan-add {
  from { opacity: 0; transform: translateY(8px); }
}

/* Belbalk op telefoon schuift van onder in beeld */
.mobile-bar {
  animation: bar-in 0.6s var(--ease-out) 0.4s both;
}

@keyframes bar-in {
  from { transform: translateY(100%); }
}

/* De X in de blauwe blokken en bij de belofte drijft heel licht mee tijdens het scrollen.
   Zonder JavaScript, enkel in browsers die het kunnen (Chrome, Edge, Safari 26+). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cta:not(.cta--tile) .deco-x--cta,
    .promise__mark {
      animation: drift linear both;
      animation-timeline: view();
    }

    @keyframes drift {
      from { translate: 0 20px; }
      to { translate: 0 -20px; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__mark:hover,
  .hero__mark:active,
  .chip-list a:hover,
  .service-card:hover .service-card__media img,
  .card--hover:hover .icon-badge {
    transform: none;
  }

  .hero__mark::after {
    display: none;
  }

  .service-card:target {
    animation: none;
    box-shadow: 0 0 0 3px var(--brand-blue), var(--shadow-md);
  }

  .mobile-bar {
    animation: none;
  }
}

/* 18. Donkere modus ------------------------------------------------------------
   Schuifknop met zon en maan onderaan in de footer (main.js). De keuze staat als
   data-theme="dark" op <html> en wordt onthouden, ook bij het wisselen van pagina. */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  color: var(--on-dark-muted);
  font-size: var(--fs-small);
}

.theme-switch__track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 60px;
  height: 32px;
  padding-inline: 8px;
  border-radius: var(--radius-pill);
  background: var(--on-dark-line);
  box-shadow: inset 0 0 0 1px var(--on-dark-line);
  transition: background-color 0.3s var(--ease);
}

.theme-switch__track svg {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  transition: color 0.3s var(--ease);
}

/* Het bolletje schuift van de zon naar de maan */
.theme-switch__track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  transition: transform 0.4s var(--ease-spring), background-color 0.3s var(--ease);
}

.theme-switch .icon-sun { color: var(--dark); }
.theme-switch .icon-moon { color: var(--on-dark-muted); }

.theme-switch[aria-checked="true"] .theme-switch__track::before {
  transform: translateX(28px);
  background: var(--brand-green);
}

.theme-switch[aria-checked="true"] .icon-sun { color: var(--on-dark-muted); }
.theme-switch[aria-checked="true"] .icon-moon { color: var(--dark); }

.theme-switch:hover {
  color: var(--white);
}

/* Donker */
[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f3efe8;
  --muted: #aaa3b8;
  --paper: #13111d;
  --surface: #191726;
  --sand: #1f1c2e;
  --card: #211e32;
  --border: #322e47;
  --field-border: #6f6987;
  --footer-bg: #0d0b15;
  --brand-ink: #86a8ff;          /* lichter blauw, leesbaar op donker */
  --brand-blue-dark: #2f6dff;
  --brand-blue-soft: #1c2547;
  --brand-green-soft: #12301f;
  --focus: #86a8ff;
  --ok: #3ddc84;
  --warn: #ffb347;
  --error: #ff7b7b;
  --shade-a06: rgba(0, 0, 0, 0.3);
  --shade-a08: rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.4), 0 28px 60px rgba(0, 0, 0, 0.4);
  --glow: radial-gradient(circle at 12% 18%, rgba(2, 79, 241, 0.2), transparent 42%),
    radial-gradient(circle at 88% 85%, rgba(0, 234, 96, 0.08), transparent 40%);
}

[data-theme="dark"] .site-header__logo img { content: url("../logo/logo-horizontaal-wit.svg"); }
[data-theme="dark"] .promise__mark { content: url("../logo/x-groen.svg"); }
[data-theme="dark"] .btn--outline { border-color: var(--brand-ink); }
[data-theme="dark"] .btn--outline:hover { color: var(--on-brand); }
[data-theme="dark"] .step__number,
[data-theme="dark"] .planner__chip input:checked + span { color: #fffefb; }

/* De X in de bedankt-animatie volgt de accentkleur */
.sent__x g[fill] { fill: var(--brand-green); }

/* Credits: klein, op een eigen regel helemaal onderaan */
.site-footer__credit {
  flex-basis: 100%;
  font-size: 0.75rem;
  color: var(--on-dark-muted);
}