/* =========================================================================
   Hondenservice Denk Helder — stylesheet
   Opbouw:  1 tokens · 2 reset · 3 typografie · 4 layout · 5 knoppen
            6 header · 7 logo-intro · 8 hero · 9 componenten
            10 formulieren · 11 footer · 12 beweging · 13 print
   ========================================================================= */

/* ---------- 1. Tokens --------------------------------------------------- */
:root {
  /* Kleur — natuurlijk, warm, ontleend aan de duinfoto's van Den Helder */
  --color-bg:            #f7f3ea;   /* warm gebroken wit */
  --color-bg-sand:       #efe7d7;   /* zand */
  --color-bg-moss:       #e8ecdf;   /* zeer licht mosgroen */
  --color-surface:       #fffdf8;
  --color-ink:           #1a2b22;   /* diep bosgroen, dient als zwart */
  --color-ink-soft:      #3c5346;
  --color-muted:         #5b6b61;   /* contrast >= 4.5:1 op cremewit */
  --color-line:          #e2d9c7;
  --color-line-strong:   #cfc3ab;

  --color-primary:       #2e5240;   /* bosgroen */
  --color-primary-dark:  #21402f;
  --color-primary-tint:  #dfe7df;
  --color-moss:          #6f7f4e;   /* mosgroen, alleen decoratief */
  --color-accent:        #a64f27;   /* warme klei — contrastveilig op crème */
  --color-accent-bright: #c2643c;   /* zelfde familie, alleen voor vlakken */
  --color-accent-tint:   #f6e6da;

  --color-on-dark:        #f4f1e8;
  --color-on-dark-muted:  #b9c6ba;
  --color-on-dark-accent: #e0b294;   /* bovenkopje op een donker vlak */
  --color-on-primary:     #ffffff;   /* tekst in een gevulde knop */
  --color-section-dark:   #21402f;   /* het donkere tekstvlak */
  --color-scrim:          #101c16;   /* sluier over een foto */
  --color-footer-bg:      #1a2b22;
  --color-shadow:         #1a2b22;
  --color-danger:         #a5382b;

  /* De menubalk heeft eigen kleuren: een aantal paletten kleurt hem volledig
     in, en dan moeten de letters, de lijn en de knop meeveranderen. */
  --color-header-bg:      #f7f3ea;
  --color-header-ink:     #1a2b22;
  --color-header-line:    #e2d9c7;
  --color-header-accent:  #a64f27;
  --color-header-cta:     #2e5240;
  --color-header-cta-ink: #ffffff;
  --color-header-active:  #f6e6da;   /* dekkend vlak achter het menu-item van deze pagina */
  --color-header-hover:   #ebe7de;   /* zelfde tint als een menu-item onder de muis, dekkend */

  /* Dezelfde kleuren nog eens als rgb-triplet. Daarmee kan de stylesheet
     doorzichtige varianten maken: rgb(var(--rgb-ink) / .05).
     theme.css schrijft deze opnieuw bij het gekozen palet. */
  --rgb-ink:        26 43 34;
  --rgb-primary:    46 82 64;
  --rgb-accent:     194 100 60;
  --rgb-moss:       111 127 78;
  --rgb-on-dark:    244 241 232;
  --rgb-scrim:      16 28 22;
  --rgb-header-bg:  247 243 234;
  --rgb-header-ink: 26 43 34;
  --rgb-shadow:     26 43 34;
  --shadow-boost:   1;               /* donkere paletten hebben zwaardere schaduwen nodig */

  /* Typografie — uitsluitend systeemfonts, geen enkele externe request */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                  Georgia, ui-serif, serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;

  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.32rem);
  --step-2:  clamp(1.38rem, 1.24rem + 0.65vw, 1.72rem);
  --step-3:  clamp(1.66rem, 1.42rem + 1.1vw, 2.3rem);
  --step-4:  clamp(1.75rem, 1.25rem + 2.3vw, 3.1rem);
  --step-5:  clamp(2rem, 0.9rem + 4.4vw, 4.1rem);

  /* Ruimte */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 2.5rem;   --space-8: 3rem;     --space-9: 4rem;
  --space-10: 5rem;    --space-11: 6.5rem;

  /* Gehalveerd ten opzichte van de eerste opzet: de secties stonden zo ver
     uit elkaar dat je op een gewoon scherm hele schermen leegte voorbij
     scrolde. Was clamp(3.5rem, 2rem + 6vw, 7rem). */
  --section-y: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  --gutter:    clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
  --container: 1180px;
  --container-wide: 1440px;
  --measure: 62ch;

  /* Vorm */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 34px;
  --radius-pill: 999px;
  /* organische "boog" voor foto's — geeft het ontwerp een eigen handschrift */
  --radius-arch: 46% 46% var(--radius-lg) var(--radius-lg) / 32% 32% var(--radius-lg) var(--radius-lg);

  --shadow-sm: 0 1px 2px rgb(var(--rgb-shadow) / calc(.05 * var(--shadow-boost))),
               0 2px 8px rgb(var(--rgb-shadow) / calc(.04 * var(--shadow-boost)));
  --shadow-md: 0 2px 6px rgb(var(--rgb-shadow) / calc(.06 * var(--shadow-boost))),
               0 14px 30px -14px rgb(var(--rgb-shadow) / calc(.2 * var(--shadow-boost)));
  --shadow-lg: 0 30px 64px -28px rgb(var(--rgb-shadow) / calc(.38 * var(--shadow-boost)));

  --ring: 0 0 0 3px var(--color-bg), 0 0 0 5.5px var(--color-accent);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img, picture, svg, video { display: block; max-width: 100%; }
/* Een <picture> is een gewoon blok met hoogte auto. Zonder deze regel valt de
   height:100% van de <img> erbinnen terug op de natuurlijke hoogte van de foto:
   object-fit doet dan niets en de onderkant van het beeld wordt gewoon
   afgeknipt door de overflow van het kader eromheen. */
.hero__media picture, .cta-panel__media picture, .service__media picture {
  display: block; width: 100%; height: 100%;
}
img { height: auto; }
/* zandkleurige plaatshouder terwijl een foto laadt (niet op transparante logo's) */
.hero__media img, .service__media img, .split__media img, .strip img,
.cta-panel__media img { background-color: var(--color-bg-sand); }

/* Een geüploade video vult zijn kader net als een foto. Zolang de bezoeker
   niet op afspelen klikt is alleen de poster te zien; de video zelf wordt dan
   nog niet geladen (preload="none"), dus de pagina blijft snel. */
/* De video zit in een houder met een grote afspeelknop in het midden. De
   houder ligt boven de onzichtbare kaartlink (sommige kaarten, zoals de
   diensten, zijn helemaal klikbaar), zodat een klik op de video de video start
   in plaats van je door te sturen. De titel en de rest van de kaart blijven
   wél naar de pagina linken. */
.video-holder { position: relative; display: block; z-index: 1; line-height: 0; }
.media-video {
  display: block; width: 100%; height: auto; max-width: 100%;
  background: var(--color-ink); border: 0;
}
.split__media .media-video, figure .media-video { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.split__media--arch .media-video { border-radius: var(--radius-arch); }

/* Mobiel (Android Chrome en iOS Safari) tekent zelf nog een grote startknop
   midden op een video die nog niet gespeeld heeft. Die verbergen we, anders
   staat hij over onze eigen knop heen. De bediening onderin blijft gewoon. */
.media-video::-webkit-media-controls-overlay-play-button,
.media-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.video-play {
  position: absolute; inset: 0; margin: auto; width: 4.2rem; height: 4.2rem; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgb(var(--rgb-ink, 20 30 25) / .5); color: #fff;
  border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.video-play svg { width: 1.9rem; height: 1.9rem; fill: currentColor; margin-left: 3px; }
.video-play:hover { background: rgb(var(--rgb-ink, 20 30 25) / .72); transform: scale(1.06); }
.video-holder.is-playing .video-play { opacity: 0; pointer-events: none; transform: scale(.8); }
@media (prefers-reduced-motion: reduce) { .video-play { transition: none; } }

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

:where(a) { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: .18em; }
:where(a):hover { color: var(--color-accent); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--color-accent-tint); color: var(--color-ink); }

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: 200; background: var(--color-primary); color: var(--color-on-primary);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none; font-weight: 600;
  transition: transform .18s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); color: var(--color-on-primary); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 3. Typografie ----------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  overflow-wrap: break-word;   /* vangnet voor lange samenstellingen op smalle schermen */
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.2; }
h4 { font-size: var(--step-1); line-height: 1.3; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 56ch;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-4);
}
.eyebrow::before {
  content: ""; width: 1.7rem; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .55; flex: none;
}
.eyebrow--center::after {
  content: ""; width: 1.7rem; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .55; flex: none;
}

/* accentwoord in koppen */
.tint { color: var(--color-accent); font-style: italic; }

.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--space-8); }
.prose h3 { margin-top: var(--space-6); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 var(--space-5); padding-left: 1.25rem; }
.prose li { margin-bottom: .45rem; }
.prose li::marker { color: var(--color-accent); }

/* nette opsomming met vinkje */
.ticks { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.ticks li {
  position: relative; padding-left: 2rem; margin-bottom: .7rem;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--color-primary-tint);
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-primary) / .25);
}
.ticks li::after {
  content: ""; position: absolute; left: .34rem; top: .72em;
  width: .48rem; height: .26rem;
  border-left: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg);
}

/* ---------- 4. Layout ---------------------------------------------------- */
.container {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}
.container--wide { width: min(100% - var(--gutter) * 2, var(--container-wide)); }
.container--narrow { width: min(100% - var(--gutter) * 2, 820px); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * .62); }
.section--sand { background: var(--color-bg-sand); }
.section--moss { background: var(--color-bg-moss); }
.section--dark { background: var(--color-section-dark); color: var(--color-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-on-dark); }
.section--dark .lead { color: var(--color-on-dark-muted); }
.section--dark .eyebrow { color: var(--color-on-dark-accent); }

.section-head { max-width: 46rem; margin-bottom: var(--space-6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

.section-head--split {
  display: grid; gap: var(--space-5); align-items: end;
  grid-template-columns: 1fr;
  max-width: none;
}
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 1fr) auto; }
}

/* zachte duinrand tussen twee vlakken */
.edge {
  display: block; width: 100%; height: clamp(28px, 4vw, 56px);
  color: var(--color-bg);           /* de kleur van het vlak eronder/erboven */
  margin: 0; pointer-events: none;
}
.edge svg { display: block; width: 100%; height: 100%; }

/* ---------- 5. Knoppen --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .78rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-weight: 650; font-size: var(--step-0); line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-primary); color: var(--color-on-primary);
  box-shadow: 0 1px 2px rgb(var(--rgb-shadow) / calc(.16 * var(--shadow-boost))),
              0 10px 22px -14px rgb(var(--rgb-shadow) / calc(.55 * var(--shadow-boost)));
}
.btn--primary:hover { background: var(--color-primary-dark); color: var(--color-on-primary); }

.btn--ghost {
  background: transparent; color: var(--color-ink);
  border-color: var(--color-line-strong);
}
.btn--ghost:hover { border-color: var(--color-ink); background: rgb(var(--rgb-ink) / .04); color: var(--color-ink); }

.btn--light { background: var(--color-on-dark); color: var(--color-scrim); box-shadow: var(--shadow-sm); }
.btn--light:hover { background: #fff; color: var(--color-scrim); }

.btn--ondark { background: transparent; color: var(--color-on-dark); border-color: rgb(var(--rgb-on-dark) / .38); }
.btn--ondark:hover { background: rgb(var(--rgb-on-dark) / .1); color: #fff; border-color: rgb(var(--rgb-on-dark) / .7); }

.btn--sm { min-height: 2.6rem; padding: .5rem 1.1rem; font-size: var(--step--1); }

.btn .ic { width: 1.15em; height: 1.15em; flex: none; }

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

/* tekstlink met pijl */
.arrow-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 620; text-decoration: none;
  color: var(--color-primary);
}
.arrow-link .ic { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.arrow-link:hover { color: var(--color-accent); }
.arrow-link:hover .ic { transform: translateX(3px); }
.arrow-link u { text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* ---------- 6. Header ---------------------------------------------------- */
.header { position: sticky; top: 0; z-index: 90; }
/* De doorzichtige balk staat in een eigen laag. `backdrop-filter` maakt van een
   element namelijk een houder voor alles wat `position: fixed` is; stond het
   uitklapmenu daarbinnen, dan werd het samengeperst tot de hoogte van de balk
   in plaats van dat het de rest van het scherm vulde. */
.header__balk {
  background: rgb(var(--rgb-header-bg) / .92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--color-header-line);
}
.header__inner {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 4.5rem;
}

.brand {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--color-header-ink); margin-right: auto;
  padding: .25rem 0; min-width: 0;
}
/* Het beeldmerk is de svg van de ontwerper, in het zwart. Op een donkere
   ondergrond wordt hij omgekeerd; dan is de lijnkunst wit, en dat is precies
   de tweede variant die de ontwerper heeft aangeleverd. Of de menubalk donker
   is verschilt per kleurenpalet, dus die keuze staat als 0 of 1 in theme.css.
   Eén bestand, en het werkt ook als je de pagina van de schijf opent. */
.logo-hond { display: block; flex: none; height: auto; }
.brand .logo-hond { width: 2.4rem; filter: invert(var(--logo-kop-om, 0)); }
.brand__name {
  display: block; font-family: var(--font-display);
  font-size: 1.06rem; font-weight: 600; line-height: 1.05; letter-spacing: -.01em;
}
.brand__place {
  display: block; font-size: .69rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: rgb(var(--rgb-header-ink) / .85);
  margin-top: .16rem;
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.9rem; padding: .45rem .9rem .45rem .75rem;
  background: transparent; border: 1px solid var(--color-header-line);
  border-radius: var(--radius-pill); cursor: pointer; font-weight: 600;
  font-size: var(--step--1); color: var(--color-header-ink);
}
.nav-toggle__bars { position: relative; width: 1.1rem; height: .72rem; flex: none; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .22s var(--ease), opacity .16s linear;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav { display: none; }
.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; text-decoration: none; color: var(--color-header-ink);
  font-weight: 560; border-radius: var(--radius-sm); white-space: nowrap;
}
.nav__link[aria-current="page"] { color: var(--color-header-accent); }

.header__cta { display: none; }

/* De knop in de balk krijgt zijn kleur van de balk, niet van de pagina:
   bij een donkergekleurde menubalk werkt de gewone knopkleur niet. */
.header__cta.btn--primary,
.nav-panel .btn--primary {
  background: var(--color-header-cta); color: var(--color-header-cta-ink);
}
.header__cta.btn--primary:hover,
.nav-panel .btn--primary:hover {
  background: var(--color-header-cta); color: var(--color-header-cta-ink);
  filter: brightness(.93);
}

/* mobiel paneel */
.nav-panel {
  display: none;
  /* --kop-h wordt door main.js op de werkelijke hoogte van de balk gezet,
     zodat het paneel ook klopt als de bedrijfsnaam over twee regels valt. */
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--kop-h, 4.5rem); z-index: 88;
  background: var(--color-header-bg);
  border-top: 1px solid var(--color-header-line);
  padding: var(--space-5) 0 var(--space-8);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Op een kort scherm blijft er van het paneel weinig over. Alles daarbinnen
     rekent daarom met deze twee maten, die verderop krimpen. */
  --menu-rij: .85rem;
  --menu-maat: var(--step-1);
}
.nav-panel.is-open { display: block; animation: panel-in .22s var(--ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Kolommen, geen raster: zo loopt de lijst van boven naar beneden en pas dan
   naar de volgende kolom, en blijft de groep Diensten bij elkaar. */
.nav-panel .nav__list { display: block; column-gap: var(--space-6); }
.nav-panel .nav__list > li { break-inside: avoid; }
.nav-panel .nav__link {
  padding: var(--menu-rij) .75rem; font-size: var(--menu-maat);
  font-family: var(--font-display); border-bottom: 1px solid var(--color-header-line);
  margin-bottom: .15rem;
}
.nav-panel .btn { width: 100%; margin-top: var(--space-5); }
.nav-panel__contact {
  margin-top: var(--space-6); display: grid; gap: .35rem;
  font-size: var(--step--1); color: rgb(var(--rgb-header-ink) / .7);
}
.nav-panel__contact a { color: var(--color-header-ink); }

/* Een groep in het uitklapmenu: de knop is daar geen knop maar een kopje,
   met de onderliggende pagina's er ingesprongen onder. */
.nav__groepskop {
  margin: 0; padding: 1.1rem .75rem .35rem;
  /* Alpha .78: bij .55 kwam het kopje in elk palet onder de contrasteis uit. */
  font-weight: 700; color: rgb(var(--rgb-header-ink) / .78);
  font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase;
}
.nav-panel .nav__sub { list-style: none; margin: 0; padding: 0; }

/* Zodra het paneel breed genoeg is, komen de items naast elkaar te staan.
   Dat scheelt hoogte, en dat is precies wat er ontbreekt op een laag scherm. */
@media (min-width: 620px) { .nav-panel .nav__list { column-count: 2; } }
@media (min-width: 980px) { .nav-panel .nav__list { column-count: 3; } }

/* Laag scherm: alles compacter, zodat er rijen bij passen in plaats van dat je
   door een strookje van twee regels moet scrollen. */
@media (max-height: 680px) {
  .nav-panel { padding-block: var(--space-4) var(--space-5); --menu-rij: .55rem; --menu-maat: 1rem; }
  .nav-panel .btn { margin-top: var(--space-4); }
  .nav-panel__contact { margin-top: var(--space-4); }
  .nav-panel .nav__groepskop { padding-top: .7rem; }
}
@media (max-height: 480px) {
  .nav-panel { padding-block: .35rem .6rem; --menu-rij: .14rem; --menu-maat: .88rem; }
  .nav-panel .nav__list { column-count: 2; column-gap: var(--space-5); }
  .nav-panel .nav__link { line-height: 1.25; margin-bottom: 0; }
  .nav-panel .nav__groepskop { padding: .3rem .75rem .1rem; font-size: .68rem; }
  .nav-panel .btn { margin-top: .45rem; min-height: 0; padding-block: .4rem; }
  .nav-panel__contact { margin-top: .55rem; }
}
@media (max-height: 480px) and (min-width: 760px) {
  .nav-panel .nav__list { column-count: 3; }
}
/* Op een heel laag scherm telt elke pixel: de balk zelf wordt dan ook lager,
   zodat er meer van het menu overblijft. */
@media (max-height: 480px) {
  .header__inner { min-height: 3.3rem; }
  .brand .logo-hond { width: 1.9rem; }
  .brand__place { display: none; }
  .nav-toggle { min-height: 2.4rem; padding: .3rem .6rem; }
}

/* Zeven menu-items, de merknaam en de knop passen vanaf ongeveer 1160px naast
   elkaar. Daaronder blijft het uitklapmenu staan. Gemeten: samen 1042 px nodig,
   en bij 1160 px is de container 1082 px breed. */
@media (max-width: 1159px) {
  /* Naast het uitklapmenu is er op een telefoon maar weinig ruimte: de
     winkelwagen wordt daar alleen een icoontje met een teller. */
  .header__wagen { margin-left: .35rem; padding: .45rem .55rem; gap: .25rem; }
  .header__wagen-tel { min-width: 1.2rem; height: 1.2rem; font-size: .68rem; }
  .nav-toggle .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .winkel-body .nav-toggle { padding: .45rem .7rem; }
}
@media (min-width: 1160px) {
  /* Op deze breedte past de naam op één regel; hij mag niet tussen de
     menu-items door breken, en dus ook niet ingedrukt worden. Op smallere
     schermen wikkelt hij gewoon mee. */
  .brand { white-space: nowrap; flex: none; }
  .nav-toggle { display: none; }
  .nav-panel { display: none !important; }
  .nav { display: block; }
  .nav__list { display: flex; align-items: center; gap: .15rem; }
  .nav__link {
    padding: .5rem .55rem; font-size: .92rem;
    transition: background-color .18s var(--ease), color .18s var(--ease);
  }
  .nav__link:hover { background: rgb(var(--rgb-header-ink) / .07); color: var(--color-header-ink); }
  /* Dekkend vlak: de balk zelf is doorzichtig, dus anders hangt de leesbaarheid
     af van de foto die er toevallig onderdoor schuift. */
  .nav__link[aria-current="page"] { background: var(--color-header-active); color: var(--color-header-accent); }
  .header__cta { display: inline-flex; margin-left: var(--space-3); white-space: nowrap; }

  /* Uitklapgroep. De groep zelf is een knop, zodat toetsenbord en
     schermlezer weten dat er iets opengaat; de inhoud is een gewone lijst. */
  .nav__item--groep { position: relative; }
  .nav__knop {
    display: inline-flex; align-items: center; gap: .3rem;
    background: none; border: 0; cursor: pointer;
    font: inherit; font-weight: 560; font-size: .92rem;
    padding: .5rem .55rem; border-radius: var(--radius-sm);
    color: var(--color-header-ink);
    transition: background-color .18s var(--ease), color .18s var(--ease);
  }
  .nav__knop:hover { background: rgb(var(--rgb-header-ink) / .07); }
  .nav__knop[data-hier="ja"] { background: var(--color-header-active); color: var(--color-header-accent); }
  .nav__chevron {
    width: .78rem; height: .78rem; margin-top: .1rem;
    transition: transform .2s var(--ease);
  }
  .nav__knop[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }
  .nav__sub {
    position: absolute; top: calc(100% + .45rem); left: 0; z-index: 5;
    min-width: 13.5rem; list-style: none; margin: 0; padding: .4rem;
    background: var(--color-header-hover);
    border: 1px solid var(--color-header-line);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 34px rgb(var(--rgb-shadow) / calc(.16 * var(--shadow-boost)));
    display: none;
  }
  .nav__item--groep.is-open .nav__sub { display: grid; gap: .1rem; animation: sub-in .16s var(--ease) both; }
  /* Onzichtbare brug over het gaatje tussen de knop en het vlak. Zonder deze
     is de muis daar even boven geen van beide en klapt het menu dicht terwijl
     je op weg bent naar een van de links. */
  .nav__sub::before {
    content: ""; position: absolute; left: 0; right: 0;
    top: calc(-.45rem - 2px); height: calc(.45rem + 2px);
  }
  @keyframes sub-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .nav__sub .nav__link { display: block; padding: .5rem .6rem; white-space: nowrap; }
  .nav__sub .nav__link:hover { background: rgb(var(--rgb-header-ink) / .07); }
  /* Met de winkelwagen erbij is het op winkelpagina's te krap voor de knop.
     De winkelwagen is daar het belangrijkst; kennismaken staat onderaan elke
     pagina en in het uitklapmenu. Vanaf 1280 px past alles alsnog samen. */
  .winkel-body .header__cta { display: none; }
}
@media (min-width: 1280px) {
  .winkel-body .header__cta { display: inline-flex; }
}

/* ---------- 7. Logo-intro ------------------------------------------------ */
.intro { display: none; }

html.intro-on .intro {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 999;
  background: var(--color-bg);
  will-change: opacity;
}
html.intro-on body { overflow: hidden; }

/* display:contents haalt de <picture> uit de opmaak, maar dan wordt ook de
   <source> een rasteritem en krijgt het raster twee rijen: het logo zakt dan
   naar de onderste helft. Vandaar dat de source expliciet weg moet. */
.intro picture { display: contents; }
.intro source { display: none; }
.intro__logo {
  width: clamp(150px, 30vw, 240px); height: auto;
  opacity: 0; transform: scale(.94);
  animation: intro-logo .62s var(--ease) .04s forwards;
}
@keyframes intro-logo {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

.intro.is-leaving {
  animation: intro-out .34s var(--ease) forwards;
  pointer-events: none;
}
@keyframes intro-out { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html.intro-on .intro { display: none; }
  html.intro-on body { overflow: visible; }
}

/* ---------- 8. Hero ------------------------------------------------------ */
.hero {
  position: relative;
  min-height: clamp(30rem, 76svh, 44rem);
  display: grid; align-items: end;
  isolation: isolate;
  padding-block: var(--space-9) calc(var(--space-9) + 1rem);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
/* De honden staan in de onderste helft van de foto. Op een breed, laag scherm
   wordt er verticaal bijgesneden; het beeld wordt daarom laag uitgelijnd,
   anders zie je alleen duin. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 92%; }

/* Op mobiel staat de tekst midden op de foto, dus daar is een sterkere
   verticale sluier nodig; op desktop volstaat een diagonale sluier links. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* De foto is boven licht (lucht) en onder donker (duin en honden). De sluier
       loopt daarom andersom: zwaar waar de lucht zit, licht waar de honden staan.
       Zo blijft de tekst leesbaar zonder de honden weg te poetsen. */
    linear-gradient(to top, rgb(var(--rgb-scrim) / .64) 0%, rgb(var(--rgb-scrim) / .58) 26%,
                            rgb(var(--rgb-scrim) / .66) 50%, rgb(var(--rgb-scrim) / .74) 72%,
                            rgb(var(--rgb-scrim) / .78) 88%, rgb(var(--rgb-scrim) / .62) 100%);
}
@media (min-width: 800px) {
  .hero__scrim {
    background:
      linear-gradient(to top, rgb(var(--rgb-scrim) / .78) 0%, rgb(var(--rgb-scrim) / .46) 40%, rgb(var(--rgb-scrim) / .04) 74%),
      linear-gradient(105deg, rgb(var(--rgb-scrim) / .8) 0%, rgb(var(--rgb-scrim) / .52) 44%, rgb(var(--rgb-scrim) / .04) 76%);
  }
}

.hero__inner { max-width: 40rem; color: var(--color-on-dark); }
.hero h1 { color: #fff; text-shadow: 0 1px 3px rgb(var(--rgb-scrim) / .45), 0 2px 22px rgb(var(--rgb-scrim) / .5); }
/* Op een donker vlak kan het bovenkopje in de accentkleur; over een foto
   haalt die kleur de 4,5:1 voor kleine letters niet. Vandaar bijna wit. */
.hero .eyebrow { color: var(--color-on-dark); text-shadow: 0 1px 3px rgb(var(--rgb-scrim) / .5); }
.hero__lead {
  font-size: var(--step-1); line-height: 1.55; color: rgb(var(--rgb-on-dark) / .93);
  max-width: 34rem; margin-bottom: var(--space-6);
  text-shadow: 0 1px 3px rgb(var(--rgb-scrim) / .4), 0 2px 16px rgb(var(--rgb-scrim) / .45);
}
.hero .btn-row { align-items: center; }
.hero .btn--ondark { border-color: rgba(255, 255, 255, .55); color: #fff; }
.hero .btn--ondark:hover { background: rgba(255, 255, 255, .14); }

/* feitenstrook die over de onderrand van de hero valt */
.trustbar { position: relative; z-index: 2; margin-top: calc(var(--space-8) * -1); }
.trustbar__inner {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: grid; gap: 1px; overflow: hidden;
  grid-template-columns: 1fr;
}
/* Alle vier de items zijn even hoog (grid). De inhoud wordt verticaal
   gecentreerd, zodat een regel die toch afbreekt niet scheef onderuit hangt. */
.trustbar__item {
  display: flex; align-items: center; gap: .8rem;
  padding: 1.1rem 1.15rem;
  min-height: 5.25rem;
  box-shadow: 0 1px 0 var(--color-line);
}
.trustbar__item:last-child { box-shadow: none; }
.trustbar__item .ic { width: 1.45rem; height: 1.45rem; color: var(--color-accent); flex: none; }
.trustbar__item > span { min-width: 0; }
.trustbar__item b {
  display: block; font-weight: 640; line-height: 1.25;
  font-size: .98rem; letter-spacing: -.005em;
}
.trustbar__item b + span {
  display: block; margin-top: .18rem;
  font-size: .84rem; line-height: 1.35; color: var(--color-muted);
  text-wrap: balance;
}

@media (min-width: 700px) {
  .trustbar__inner { grid-template-columns: repeat(2, 1fr); }
  .trustbar__item { box-shadow: 1px 1px 0 var(--color-line); }
}
@media (min-width: 700px) {
  /* Zodra de blokjes naast elkaar staan, staat de inhoud midden in zijn eigen
     vak. Links uitlijnen laat aan de rechterkant van elk vak ruimte over, en
     dat valt vooral op bij het eerste en het laatste blokje. */
  .trustbar__item { justify-content: center; }
}
@media (min-width: 1060px) {
  .trustbar__inner { grid-template-columns: repeat(4, 1fr); }
  .hero { min-height: clamp(32rem, 82svh, 46rem); }
}

/* ---------- 9. Componenten ---------------------------------------------- */

/* 9.1 dienstenraster — bewust ongelijk, geen rij van drie gelijke kaarten */
.services { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) {
  .services { grid-template-columns: repeat(12, 1fr); gap: var(--space-6); }
  .service:nth-child(1) { grid-column: span 7; }
  .service:nth-child(2) { grid-column: span 5; }
  .service:nth-child(3) { grid-column: span 5; }
  .service:nth-child(4) { grid-column: span 7; }
}

.service {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-line-strong); }
.service__media { overflow: hidden; background: var(--color-bg-sand); }
.service__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.service:hover .service__media img { transform: scale(1.035); }
.service__body { padding: var(--space-5) var(--space-5) var(--space-6); display: flex; flex-direction: column; flex: 1; }
.service__body h3 { margin-bottom: .55rem; }
.service__body h3 a { color: inherit; text-decoration: none; }
.service__body h3 a::after { content: ""; position: absolute; inset: 0; }
.service__price {
  /* align-self is nodig: .service__body is een kolom-flex en zou het label
     anders over de volle kaartbreedte uitrekken. */
  display: inline-block; align-self: flex-start; margin-bottom: var(--space-3);
  font-size: var(--step--1); font-weight: 700; letter-spacing: .01em;
  color: var(--color-accent); background: var(--color-accent-tint);
  padding: .28rem .7rem; border-radius: var(--radius-pill);
}
.service__body p { color: var(--color-ink-soft); }
.service__body .arrow-link { margin-top: auto; padding-top: var(--space-4); }

/* 9.2 gesplitste sectie met foto die uit de container loopt */
.split { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); }
  .split--wide-media { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  /* De foto mag een stukje buiten de container lopen, maar nooit buiten het scherm
     en nooit onbeperkt: min() houdt hem binnen, max() begrenst de uitloop op 72px.
     Zonder die bovengrens groeit de fotokolom op brede schermen ongelimiteerd mee. */
  .split__media--bleed-left  { margin-left:  max(-4.5rem, min(0px, calc((var(--container) - 100vw) / 2 + 18px))); }
  .split__media--bleed-right { margin-right: max(-4.5rem, min(0px, calc((var(--container) - 100vw) / 2 + 18px))); }
  .split--reverse .split__media { order: 2; }
}
.split__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
/* Op grote schermen zou een staande foto (4:5) anders veel te hoog worden.
   De hoogte wordt afgetopt; object-fit houdt de verhoudingen intact. */
@media (min-width: 900px) {
  .split__media img { max-height: min(70vh, 660px); object-fit: cover; }
}
/* tussenkoppen in een tekstkolom krijgen lucht boven zich */
.split > div > h3 { margin-top: var(--space-6); }
.split > div > h3:first-child { margin-top: 0; }
.split__media--arch img { border-radius: var(--radius-arch); }

/* kleine bijschriftkaart die over de foto valt */
.media-note {
  position: relative; z-index: 2;
  margin: -3.2rem var(--space-5) 0 auto;
  max-width: 19rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: .95rem 1.1rem;
  font-size: var(--step--1); line-height: 1.5;
}
.media-note b { display: block; font-family: var(--font-display); font-size: 1.02rem; margin-bottom: .15rem; }

/* 9.3 stappen */
.steps { display: grid; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }

.step { position: relative; }
.step__num {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  box-shadow: 0 0 0 6px var(--color-bg);
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}
.step h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.step p { font-size: var(--step--1); color: var(--color-ink-soft); }
.step > p, .step > ul { max-width: 62ch; }

/* verbindingslijn tussen de stappen */
/* Variant met de sectiekop links en de stappen rechts: benut de volle breedte
   en halveert de schuiflengte op een breed scherm. */
.steps-zij { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
  .steps-zij {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .steps-zij > .section-head { position: sticky; top: 7rem; margin-bottom: 0; }
  .steps-zij > .steps { gap: var(--space-6); }
  /* nummer in een eigen smalle kolom links van de tekst: scheelt hoogte */
  .steps-zij .step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.4rem; }
  .steps-zij .step__num { grid-row: 1 / span 3; margin-bottom: 0; }
  .steps-zij .step h3 { grid-column: 2; margin-top: .35rem; }
  .steps-zij .step > p, .steps-zij .step > ul { grid-column: 2; max-width: none; }
}

@media (min-width: 860px) {
  .steps--line .step:not(:last-child)::after {
    content: ""; position: absolute; top: 1.5rem; left: 3.5rem; right: -1rem;
    height: 2px; z-index: 0;
    background: repeating-linear-gradient(to right,
      var(--color-line-strong) 0 6px, transparent 6px 12px);
  }
}

/* 9.4 fotostrook op volle breedte */
/* mozaiek: een groot beeld links, vier kleine rechtsboven, een breed beeld eronder */
.strip {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(8rem, 24vw, 11rem);
}
.strip figure {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius-md); background: var(--color-bg-sand);
}
.strip picture { display: block; position: absolute; inset: 0; }
.strip img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .7s var(--ease);
}
.strip figure:hover img { transform: scale(1.04); }
/* Een video in de mozaïek vult de tegel net als een foto (bijgesneden), zodat
   de grote afspeelknop in het midden van de zichtbare tegel staat en de
   bedieningsbalk onderin niet buiten de tegel wegvalt. */
.strip .video-holder { position: absolute; inset: 0; }
.strip .media-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.strip figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.strip figure:nth-child(6) { grid-column: span 2; }
@media (min-width: 760px) {
  .strip { grid-template-columns: repeat(6, 1fr); gap: var(--space-4); grid-auto-rows: clamp(9rem, 13vw, 13.5rem); }
  .strip figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .strip figure:nth-child(6) { grid-column: span 4; }
}

/* 9.5 quote */
.quote {
  max-width: 46rem; margin-inline: auto; text-align: center;
}
.quote blockquote {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display); font-size: var(--step-3);
  line-height: 1.32; letter-spacing: -.01em;
}
.quote figcaption { font-size: var(--step--1); color: var(--color-muted); letter-spacing: .04em; }

/* 9.5a reviews
   Twee vormen: een balk met het cijfer van de bron (Google) met daaronder
   kaartjes, of één review groot uitgelicht als citaat. */
.reviewbron {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); margin-bottom: var(--space-6);
}
.reviewbron__cijfer {
  font-family: var(--font-display); font-size: var(--step-3);
  line-height: 1; margin: 0; letter-spacing: -.02em;
}
.reviewbron__uitleg { margin: .3rem 0 0; font-size: var(--step--1); color: var(--color-ink-soft); }
/* op een breed scherm gaat de link naar rechts, op een smal onder elkaar */
@media (min-width: 700px) { .reviewbron .arrow-link { margin-left: auto; } }

.sterren { display: inline-flex; gap: .1em; color: var(--color-accent); }
.sterren .ic { width: 1.1rem; height: 1.1rem; }
.sterren--klein .ic { width: .85rem; height: .85rem; }

.reviews { display: grid; gap: var(--space-4); }
@media (min-width: 760px) {
  .reviews { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}
.review {
  margin: 0; padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  display: grid; gap: .7rem; align-content: start;
}
.review blockquote { margin: 0; color: var(--color-ink-soft); line-height: 1.6; }
.review blockquote p { margin-bottom: .6rem; }
.review blockquote p:last-child { margin-bottom: 0; }
.review figcaption { font-size: var(--step--1); color: var(--color-muted); }
.review figcaption b { color: var(--color-ink); font-weight: 600; }

/* één review uitgelicht: geen kader, gewoon een groot citaat in de huisletter */
.reviews--een { grid-template-columns: 1fr; }
.review--groot {
  background: none; border: 0; padding: 0;
  max-width: 44rem; margin-inline: auto;
  text-align: center; justify-items: center; gap: var(--space-4);
}
.review--groot blockquote {
  font-family: var(--font-display); font-size: var(--step-2);
  line-height: 1.4; letter-spacing: -.01em; color: var(--color-ink);
}
/* Bewust geen aanhalingstekens uit de stylesheet: wie een review overneemt
   plakt ze er vaak zelf al bij, en dan staan ze dubbel. */

/* 9.6 kanalenkaarten (echte social) */
.channels { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
/* auto-fit in plaats van vast drie: zo vult ook een rij van twee kaartjes
   de volle breedte, zonder gat aan de rechterkant. */
@media (min-width: 720px) { .channels { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.channel {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.15rem; text-decoration: none;
  background: var(--color-surface); color: var(--color-ink);
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.channel:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-line-strong); color: var(--color-ink); }
.channel .ic { width: 1.6rem; height: 1.6rem; flex: none; color: var(--color-primary); }
.channel b { display: block; font-weight: 640; }
.channel span { display: block; font-size: var(--step--1); color: var(--color-muted); }

/* 9.7 tarieven */
.rate-group { border-top: 1px solid var(--color-line); padding-top: var(--space-5); margin-bottom: var(--space-7); }
.rate-group > h3 { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.rate-group__note { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 500; color: var(--color-muted); letter-spacing: 0; }
.rates { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.rates li {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .7rem 0; border-bottom: 1px dashed var(--color-line);
}
.rates li:last-child { border-bottom: 0; }
.rates .rate__label { flex: 1; }
.rates .rate__dots { flex: none; }
.rates .rate__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 9.8 accordeon (FAQ) */
.faq { border-top: 1px solid var(--color-line); }
.faq__item { border-bottom: 1px solid var(--color-line); }
.faq__btn {
  display: flex; align-items: flex-start; gap: 1rem; width: 100%;
  padding: 1.15rem .25rem; background: none; border: 0; cursor: pointer;
  text-align: left; font-family: var(--font-display);
  font-size: var(--step-1); font-weight: 600; line-height: 1.3; color: var(--color-ink);
}
.faq__btn:hover { color: var(--color-accent); }
.faq__btn .ic {
  width: 1.15rem; height: 1.15rem; flex: none; margin-top: .3rem;
  color: var(--color-accent); transition: transform .28s var(--ease);
}
.faq__btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.faq__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel .faq__inner { padding: 0 .25rem 1.3rem; max-width: 60ch; color: var(--color-ink-soft); }
.faq__panel p:last-child { margin-bottom: 0; }

/* 9.9 eind-CTA */
.cta-panel {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-scrim); color: var(--color-on-dark);
  isolation: isolate;
}
.cta-panel__media { position: absolute; inset: 0; z-index: -2; }
.cta-panel__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.cta-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgb(var(--rgb-scrim) / .95) 0%, rgb(var(--rgb-scrim) / .84) 46%, rgb(var(--rgb-scrim) / .52) 100%);
}
.cta-panel__inner { padding: clamp(2rem, 5vw, 4rem); max-width: 44rem; }
.cta-panel h2 { color: var(--color-on-dark); }
.cta-panel p { color: rgb(var(--rgb-on-dark) / .9); }
.cta-panel .btn--light:hover { background: #fff; }

.contact-lines { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: .55rem; }
.contact-lines a { color: var(--color-on-dark); text-decoration-color: rgb(var(--rgb-on-dark) / .4); }
.contact-lines a:hover { color: var(--color-on-dark-accent); }
/* Een lang e-mailadres past op een heel smal scherm niet in één keer;
   liever afbreken dan buiten beeld steken. */
.contact-lines li { display: flex; align-items: center; gap: .65rem; overflow-wrap: anywhere; }
.contact-lines .ic { width: 1.15rem; height: 1.15rem; color: var(--color-on-dark-accent); flex: none; }

/* 9.10 kaartjes met tekst (waarom-lijst) */
.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.reason { display: flex; gap: 1rem; }
.reason__icon {
  flex: none; width: 2.7rem; height: 2.7rem; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--color-primary-tint); color: var(--color-primary);
}
.reason__icon .ic { width: 1.4rem; height: 1.4rem; }
.reason h3 { font-size: var(--step-1); margin-bottom: .25rem; }
.reason p { font-size: var(--step--1); color: var(--color-ink-soft); margin: 0; }

/* 9.11 videokaarten met facade: YouTube laadt pas na een klik */
.videos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-6) var(--space-4); grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .videos--2, .videos--3, .videos--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .videos--3 { grid-template-columns: repeat(3, 1fr); }
  .videos--4 { grid-template-columns: repeat(4, 1fr); }
}
.video { display: flex; flex-direction: column; }
.video__titel {
  font-family: var(--font-sans); font-size: var(--step-0); font-weight: 640;
  line-height: 1.35; letter-spacing: 0; margin: .9rem 0 0;
}
.video__tekst { font-size: var(--step--1); color: var(--color-ink-soft); margin: .3rem 0 0; }
/* Een knoppenrij direct onder een kaartraster heeft zelf afstand nodig; de
   andere blokken krijgen die van de alinea of de kop die ertussen staat. */
.videos + .btn-row,
.artikelen + .btn-row { margin-top: var(--space-6); }
.video__melding {
  margin: var(--space-7) 0 0; font-size: var(--step--1);
  color: var(--color-muted); max-width: 58ch;
}
/* Het kader houdt de 16:9-verhouding vast, ook nadat de knop bij het afspelen
   door de iframe is vervangen. Zonder kader verspringt de pagina dan. */
.video__frame {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-scrim); box-shadow: var(--shadow-sm);
}
.video__frame > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-card {
  margin: 0; border: 0; padding: 0; cursor: pointer; display: block;
  background: var(--color-scrim);
}
.video-card picture { display: contents; }
.video-card img, .video__frame iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-card img { transition: transform .6s var(--ease); }
.video-card:hover img { transform: scale(1.04); }
.video-card__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(to top, rgb(var(--rgb-scrim) / .62), rgb(var(--rgb-scrim) / .14));
  transition: background-color .2s var(--ease);
}
.video-card__play span {
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: rgba(255, 255, 255, .92); display: grid; place-items: center;
  box-shadow: var(--shadow-md);
}
.video-card__play span::after {
  content: ""; width: 0; height: 0; margin-left: .22rem;
  border-left: .95rem solid var(--color-scrim);
  border-top: .6rem solid transparent; border-bottom: .6rem solid transparent;
}
.video-card:hover .video-card__play { background: linear-gradient(to top, rgb(var(--rgb-scrim) / .5), rgb(var(--rgb-scrim) / .05)); }
.video-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -3px; }

/* 9.11b fotogalerij: vierkante tegels, twee naast elkaar op een telefoon.
   Een tik opent de foto groot in de lichtbak (zie main.js). */
.galerij {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px) {
  .galerij { gap: var(--space-4); }
  .galerij--3, .galerij--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .galerij--4 { grid-template-columns: repeat(4, 1fr); }
}
.galerij figure { margin: 0; }
.galerij__link {
  display: block; position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius-md); background: var(--color-bg-sand);
}
.galerij__link picture { display: block; position: absolute; inset: 0; }
.galerij__link img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .6s var(--ease);
}
.galerij__link:hover img { transform: scale(1.04); }
.galerij__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.galerij__onderschrift {
  margin: .55rem 0 0; font-size: var(--step--1); line-height: 1.4; color: var(--color-ink-soft);
}
.galerij + .btn-row { margin-top: var(--space-6); }

/* De lichtbak: de foto groot op een donkere achtergrond, met bladeren. */
.lichtbak {
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; color: #fff;
  background: rgb(var(--rgb-scrim) / .95);
}
.lichtbak::backdrop { background: rgb(var(--rgb-scrim) / .95); }
.lichtbak[open] { display: flex; align-items: center; justify-content: center; }
.lichtbak__figuur {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: .8rem;
  max-width: 100%; padding: 4.25rem 1rem 4.75rem;
}
.lichtbak__foto {
  display: block; width: auto; height: auto; max-width: min(100%, 1400px);
  max-height: calc(100vh - 11rem); max-height: calc(100dvh - 11rem);
  border-radius: var(--radius-sm); transition: opacity .2s var(--ease);
}
.lichtbak__foto.is-laden { opacity: .3; }
.lichtbak__bijschrift {
  max-width: 60ch; margin: 0; text-align: center;
  font-size: var(--step--1); line-height: 1.45; color: rgba(255, 255, 255, .9);
}
.lichtbak__bijschrift[hidden] { display: none; }
.lichtbak__teller {
  position: absolute; top: 1.3rem; left: 1.25rem; margin: 0;
  font-size: var(--step--1); color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums;
}
.lichtbak__knop {
  position: absolute; display: grid; place-items: center;
  width: 3rem; height: 3rem; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff;
  transition: background-color .2s var(--ease);
}
.lichtbak__knop:hover { background: rgba(255, 255, 255, .28); }
.lichtbak__knop:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lichtbak__knop svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lichtbak__knop[hidden] { display: none; }
.lichtbak__sluit { top: .75rem; right: .75rem; }
.lichtbak__vorige, .lichtbak__volgende { top: 50%; transform: translateY(-50%); }
.lichtbak__vorige { left: .75rem; }
.lichtbak__volgende { right: .75rem; }
/* Op een telefoon staan de pijlen onderin, zodat ze de foto niet bedekken.
   Vegen naar links of rechts werkt ook. */
@media (max-width: 700px) {
  .lichtbak__vorige, .lichtbak__volgende { top: auto; bottom: .9rem; transform: none; }
  .lichtbak__vorige { left: calc(50% - 3.5rem); }
  .lichtbak__volgende { right: calc(50% - 3.5rem); }
}
/* Achter de lichtbak scrolt de pagina niet mee. */
html.lichtbak-open { overflow: hidden; }

/* De melding na het kopiëren van een link. */
.deel-melding { font-size: var(--step--1); color: var(--color-moss); }
.deel-melding[hidden] { display: none; }

/* 9.12 informatiemelding */
.note {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--color-bg-moss); border: 1px solid rgb(var(--rgb-moss) / .34);
  border-radius: var(--radius-md); padding: 1rem 1.15rem;
  font-size: var(--step--1); color: var(--color-ink-soft);
}
.note .ic { width: 1.25rem; height: 1.25rem; flex: none; color: var(--color-moss); margin-top: .12rem; }

/* 9.13 pagina-kop op subpagina's */
.pagehead {
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
  background: var(--color-bg-sand);
}
/* Een spoor hondenpootjes rechts van de kop: vult de lege ruimte en maakt
   deze site meteen herkenbaar. Het zijn maskers en geen plaatjes, zodat de
   kleur uit het palet komt en ook op de donkere paletten klopt. De vorm is
   dezelfde poot als het icoon i-paw, maar gevuld: een lijntekening leest niet
   bij zo weinig dekking. */
.pagehead::before, .pagehead::after {
  content: ""; position: absolute; pointer-events: none;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
}
.pagehead::before {
  right: 3%; top: 6%; width: min(34vw, 380px); aspect-ratio: 1.15;
  background: rgb(var(--rgb-moss) / .20);
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20transform='rotate%28-12%2012%2012%29'%3E%3Cellipse%20cx='6.6'%20cy='9.2'%20rx='1.9'%20ry='2.5'/%3E%3Cellipse%20cx='11.9'%20cy='6.9'%20rx='1.9'%20ry='2.7'/%3E%3Cellipse%20cx='17.3'%20cy='9.2'%20rx='1.9'%20ry='2.5'/%3E%3Cpath%20d='M11.9%2012.6c2.6%200%204.8%202.1%204.8%204.3%200%201.6-1.3%202.7-2.9%202.7-.9%200-1.3-.4-1.9-.4s-1%20.4-1.9.4c-1.6%200-2.9-1.1-2.9-2.7%200-2.2%202.2-4.3%204.8-4.3Z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20transform='rotate%2816%2012%2012%29'%3E%3Cellipse%20cx='6.6'%20cy='9.2'%20rx='1.9'%20ry='2.5'/%3E%3Cellipse%20cx='11.9'%20cy='6.9'%20rx='1.9'%20ry='2.7'/%3E%3Cellipse%20cx='17.3'%20cy='9.2'%20rx='1.9'%20ry='2.5'/%3E%3Cpath%20d='M11.9%2012.6c2.6%200%204.8%202.1%204.8%204.3%200%201.6-1.3%202.7-2.9%202.7-.9%200-1.3-.4-1.9-.4s-1%20.4-1.9.4c-1.6%200-2.9-1.1-2.9-2.7%200-2.2%202.2-4.3%204.8-4.3Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20transform='rotate%28-12%2012%2012%29'%3E%3Cellipse%20cx='6.6'%20cy='9.2'%20rx='1.9'%20ry='2.5'/%3E%3Cellipse%20cx='11.9'%20cy='6.9'%20rx='1.9'%20ry='2.7'/%3E%3Cellipse%20cx='17.3'%20cy='9.2'%20rx='1.9'%20ry='2.5'/%3E%3Cpath%20d='M11.9%2012.6c2.6%200%204.8%202.1%204.8%204.3%200%201.6-1.3%202.7-2.9%202.7-.9%200-1.3-.4-1.9-.4s-1%20.4-1.9.4c-1.6%200-2.9-1.1-2.9-2.7%200-2.2%202.2-4.3%204.8-4.3Z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20transform='rotate%2816%2012%2012%29'%3E%3Cellipse%20cx='6.6'%20cy='9.2'%20rx='1.9'%20ry='2.5'/%3E%3Cellipse%20cx='11.9'%20cy='6.9'%20rx='1.9'%20ry='2.7'/%3E%3Cellipse%20cx='17.3'%20cy='9.2'%20rx='1.9'%20ry='2.5'/%3E%3Cpath%20d='M11.9%2012.6c2.6%200%204.8%202.1%204.8%204.3%200%201.6-1.3%202.7-2.9%202.7-.9%200-1.3-.4-1.9-.4s-1%20.4-1.9.4c-1.6%200-2.9-1.1-2.9-2.7%200-2.2%202.2-4.3%204.8-4.3Z'/%3E%3C/g%3E%3C/svg%3E");
  mask-position: 34% 2%, 2% 46%;
  -webkit-mask-position: 34% 2%, 2% 46%;
  mask-size: 40% auto, 24% auto;
  -webkit-mask-size: 40% auto, 24% auto;
}
.pagehead::after {
  right: 3%; top: 6%; width: min(34vw, 380px); aspect-ratio: 1.15;
  background: rgb(var(--rgb-accent) / .17);
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20transform='rotate%2826%2012%2012%29'%3E%3Cellipse%20cx='6.6'%20cy='9.2'%20rx='1.9'%20ry='2.5'/%3E%3Cellipse%20cx='11.9'%20cy='6.9'%20rx='1.9'%20ry='2.7'/%3E%3Cellipse%20cx='17.3'%20cy='9.2'%20rx='1.9'%20ry='2.5'/%3E%3Cpath%20d='M11.9%2012.6c2.6%200%204.8%202.1%204.8%204.3%200%201.6-1.3%202.7-2.9%202.7-.9%200-1.3-.4-1.9-.4s-1%20.4-1.9.4c-1.6%200-2.9-1.1-2.9-2.7%200-2.2%202.2-4.3%204.8-4.3Z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20transform='rotate%28-8%2012%2012%29'%3E%3Cellipse%20cx='6.6'%20cy='9.2'%20rx='1.9'%20ry='2.5'/%3E%3Cellipse%20cx='11.9'%20cy='6.9'%20rx='1.9'%20ry='2.7'/%3E%3Cellipse%20cx='17.3'%20cy='9.2'%20rx='1.9'%20ry='2.5'/%3E%3Cpath%20d='M11.9%2012.6c2.6%200%204.8%202.1%204.8%204.3%200%201.6-1.3%202.7-2.9%202.7-.9%200-1.3-.4-1.9-.4s-1%20.4-1.9.4c-1.6%200-2.9-1.1-2.9-2.7%200-2.2%202.2-4.3%204.8-4.3Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20transform='rotate%2826%2012%2012%29'%3E%3Cellipse%20cx='6.6'%20cy='9.2'%20rx='1.9'%20ry='2.5'/%3E%3Cellipse%20cx='11.9'%20cy='6.9'%20rx='1.9'%20ry='2.7'/%3E%3Cellipse%20cx='17.3'%20cy='9.2'%20rx='1.9'%20ry='2.5'/%3E%3Cpath%20d='M11.9%2012.6c2.6%200%204.8%202.1%204.8%204.3%200%201.6-1.3%202.7-2.9%202.7-.9%200-1.3-.4-1.9-.4s-1%20.4-1.9.4c-1.6%200-2.9-1.1-2.9-2.7%200-2.2%202.2-4.3%204.8-4.3Z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20transform='rotate%28-8%2012%2012%29'%3E%3Cellipse%20cx='6.6'%20cy='9.2'%20rx='1.9'%20ry='2.5'/%3E%3Cellipse%20cx='11.9'%20cy='6.9'%20rx='1.9'%20ry='2.7'/%3E%3Cellipse%20cx='17.3'%20cy='9.2'%20rx='1.9'%20ry='2.5'/%3E%3Cpath%20d='M11.9%2012.6c2.6%200%204.8%202.1%204.8%204.3%200%201.6-1.3%202.7-2.9%202.7-.9%200-1.3-.4-1.9-.4s-1%20.4-1.9.4c-1.6%200-2.9-1.1-2.9-2.7%200-2.2%202.2-4.3%204.8-4.3Z'/%3E%3C/g%3E%3C/svg%3E");
  mask-position: 62% 6%, 20% 62%;
  -webkit-mask-position: 62% 6%, 20% 62%;
  mask-size: 30% auto, 17% auto;
  -webkit-mask-size: 30% auto, 17% auto;
}
/* Staat er een foto of een kaartje naast de kop, dan is de rechterkant niet
   leeg meer. Het spoor schuift dan naar de strook ertussen, kleiner, zodat het
   niet half achter de foto verdwijnt. */
@media (min-width: 860px) {
  .pagehead--foto::before, .pagehead--foto::after,
  .pagehead--kaart::before, .pagehead--kaart::after {
    right: min(24rem, 32%); top: 12%; width: min(20vw, 210px);
  }
}
/* Tot 1400 px is de tekstkolom breed ten opzichte van de pagina en komt het
   spoor tegen de titel aan. Daar dus kleiner en verder naar rechts. Gemeten op
   de echte beeldpunten: zo raakt geen enkel pootje de tekst. */
@media (min-width: 860px) and (max-width: 1399px) {
  .pagehead--foto::before, .pagehead--foto::after,
  .pagehead--kaart::before, .pagehead--kaart::after {
    right: min(18rem, 20%); width: min(13vw, 145px);
  }
  /* Zonder foto loopt de tekstkolom door tot 46 rem; het spoor moet daar
     rechts van blijven, dus is er minder ruimte. */
  .pagehead:not(.pagehead--foto):not(.pagehead--kaart)::before,
  .pagehead:not(.pagehead--foto):not(.pagehead--kaart)::after {
    width: min(20vw, 200px);
  }
}
/* Zonder foto loopt de tekst tot 46 rem door. Onder de 1024 px is er dan geen
   plek meer voor het spoor zonder dat het onder de tekst komt; daar blijft het
   weg. Met een foto of kaartje ernaast is er wél een strook vrij. */
@media (max-width: 1023px) {
  .pagehead:not(.pagehead--foto):not(.pagehead--kaart)::before,
  .pagehead:not(.pagehead--foto):not(.pagehead--kaart)::after { display: none; }
}
/* Op een smal scherm staat de tekst over de volle breedte; dan zijn de
   pootjes alleen maar drukte. */
@media (max-width: 859px) {
  .pagehead::before, .pagehead::after { display: none; }
}
.pagehead__inner { position: relative; z-index: 1; max-width: 46rem; }
.pagehead h1 { margin-bottom: var(--space-4); }
.pagehead .lead { margin-bottom: var(--space-5); }

/* Kop met foto ernaast. Bedoeld voor pagina's waar de kop anders erg leeg
   oogt en de bezoeker meteen moet scrollen om iets te zien. */
.pagehead--foto .pagehead__raster { position: relative; z-index: 1; }
.pagehead--foto .pagehead__inner { max-width: 40rem; }
.pagehead--foto .pagehead__inner > :last-child { margin-bottom: 0; }
.pagehead__foto { display: none; }

/* Kaartje naast de kop. Anders dan de foto blijft dit op een telefoon staan:
   het is een link naar het kanaal en dus inhoud, geen versiering. Daar komt
   hij onder de tekst te staan in plaats van ernaast. */
.pagehead__kaart {
  position: relative; z-index: 1;
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 26px rgb(var(--rgb-shadow) / calc(.10 * var(--shadow-boost)));
}
/* Het merkrood van YouTube, niet de paletkleur: daar is een logo aan te
   herkennen. Nagerekend: #f00 haalt zowel op het lichte vlak (4,0:1) als op
   het donkere (3,8:1) de eis van 3:1 voor betekenisvolle beeldelementen. */
.pagehead__kaart-merk { display: block; width: 2.6rem; height: 2.6rem; color: #f00; }
.pagehead__kaart-merk .ic { width: 100%; height: 100%; }
.pagehead__kaart-titel {
  margin: var(--space-4) 0 .35rem;
  font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2;
}
.pagehead__kaart-titel a { color: var(--color-ink); text-decoration: none; }
.pagehead__kaart-titel a:hover { color: var(--color-accent); }
/* De hele kaart is klikbaar; de deelknop ligt er met z-index bovenop. */
.pagehead__kaart-titel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pagehead__kaart-tekst { margin: 0; font-size: var(--step--1); color: var(--color-ink-soft); }
.pagehead__kaart-acties {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-4);
}

@media (min-width: 860px) {
  .pagehead__kaart { margin-top: 0; }
  .pagehead--kaart .pagehead__raster {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(16rem, 26vw, 20rem);
    gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  }
  .pagehead--kaart .pagehead__inner { max-width: 40rem; }
  .pagehead--kaart .pagehead__inner > :last-child { margin-bottom: 0; }
  .pagehead--foto .pagehead__raster {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(15rem, 27vw, 21rem);
    gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  }
  .pagehead__foto {
    display: block; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
    aspect-ratio: 4 / 3; box-shadow: 0 14px 34px rgb(var(--rgb-shadow) / calc(.14 * var(--shadow-boost)));
  }
  /* Zie de opmerking bij .hero__media: zonder deze regel houdt <picture> de
     natuurlijke hoogte van de foto en doet object-fit niets. */
  .pagehead__foto picture { display: block; width: 100%; height: 100%; }
  .pagehead__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

.breadcrumb { font-size: var(--step--1); color: var(--color-muted); margin: 0 0 var(--space-4); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: var(--color-line-strong); }
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-accent); }

/* 9.14 tweekoloms feitenlijst */
.factgrid { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .factgrid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
.fact {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); padding: var(--space-5);
}
.fact h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.fact p:last-child { margin-bottom: 0; }
.fact p { color: var(--color-ink-soft); font-size: var(--step--1); }

/* 9.15a eenvoudige lijst zonder opsommingsteken */
.plain-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: .6rem; }
.plain-list li { display: flex; gap: .7rem; align-items: baseline; }
.plain-list .ic { width: 1.05rem; height: 1.05rem; flex: none; color: var(--color-accent); transform: translateY(.15em); }

/* 9.15 gebiedenlijst */
.areas { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.areas li {
  padding: .42rem .95rem; border-radius: var(--radius-pill);
  background: var(--color-surface); border: 1px solid var(--color-line);
  font-size: var(--step--1); font-weight: 560;
}

/* 9.16 blogkaarten en artikelpagina */
.artikelen {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: 1fr;
}
@media (min-width: 700px) { .artikelen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .artikelen--3 { grid-template-columns: repeat(3, 1fr); } }

.artikel {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.artikel:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-line-strong); }
.artikel__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-bg-sand); }
.artikel__media picture { display: block; width: 100%; height: 100%; }
.artikel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.artikel:hover .artikel__media img { transform: scale(1.035); }
.artikel__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.artikel__label {
  display: inline-block; align-self: flex-start; margin-bottom: var(--space-3);
  font-size: var(--step--2); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-accent); background: var(--color-accent-tint);
  padding: .24rem .62rem; border-radius: var(--radius-pill);
}
.artikel__titel { font-size: var(--step-1); margin-bottom: .5rem; }
.artikel__titel a { color: inherit; text-decoration: none; }
.artikel__titel a::after { content: ""; position: absolute; inset: 0; }
.artikel__body p { color: var(--color-ink-soft); font-size: var(--step--1); margin: 0; }
.artikel__meta {
  margin-top: auto; padding-top: var(--space-4);
  font-size: var(--step--2); color: var(--color-muted);
}

/* de losse artikelpagina */
.artikel-tekst { max-width: var(--measure); }
.artikel-tekst .lead { font-size: var(--step-1); color: var(--color-ink-soft); }
.artikel-datum { font-size: var(--step--1); color: var(--color-muted); margin: 0 0 var(--space-4); }
.artikel-terug { margin-top: var(--space-7); }

/* ---------- 10. Formulieren --------------------------------------------- */
.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .form__row { grid-template-columns: repeat(2, 1fr); } }

.field { display: grid; gap: .4rem; }
.field > label { font-weight: 620; font-size: var(--step--1); }
.field .hint { font-size: .82rem; color: var(--color-muted); }
.field .req { color: var(--color-accent); }

.field input, .field textarea, .field select {
  width: 100%; min-height: 3rem; padding: .72rem .9rem;
  background: var(--color-surface); color: var(--color-ink);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.field input:hover, .field textarea:hover { border-color: var(--color-muted); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(var(--rgb-primary) / .18);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--color-danger); }

.form__consent {
  display: flex; gap: .8rem; align-items: flex-start;
  margin-top: var(--space-2); padding: .85rem 1rem;
  background: var(--color-bg-sand); border-radius: var(--radius-md);
  font-size: var(--step--1); line-height: 1.5; color: var(--color-ink-soft);
  cursor: pointer;
}
.form__consent input { width: 1.15rem; height: 1.15rem; min-height: 0; margin-top: .18rem; flex: none; accent-color: var(--color-primary); }
.form .form__fields > .btn-row { margin-top: var(--space-3); }

.form__status {
  display: none; align-items: flex-start; gap: .7rem;
  border-radius: var(--radius-md); padding: 1rem 1.15rem;
  background: var(--color-primary-tint); border: 1px solid rgb(var(--rgb-primary) / .3);
  font-size: var(--step--1);
}
.form__status.is-visible { display: flex; }
.form__status .ic { width: 1.25rem; height: 1.25rem; flex: none; color: var(--color-primary); margin-top: .1rem; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 11. Footer --------------------------------------------------- */
.footer { background: var(--color-footer-bg); color: var(--color-on-dark-muted); padding-block: var(--space-9) var(--space-6); }
.footer a { color: var(--color-on-dark); text-decoration: none; }
.footer a:hover { color: var(--color-on-dark-accent); text-decoration: underline; }

.footer__grid { display: grid; gap: var(--space-7); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1060px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }

.footer__brand { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--space-4); }
.footer__brand .logo-hond { width: 2.6rem; filter: invert(var(--logo-voet-om, 1)); }
.footer__brand b { font-family: var(--font-display); font-size: 1.12rem; color: var(--color-on-dark); font-weight: 600; }
.footer p { font-size: var(--step--1); line-height: 1.6; }

.footer h2 {
  font-family: var(--font-sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--color-on-dark-muted);
  margin-bottom: var(--space-4);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: var(--step--1); }

.footer__social { display: flex; gap: .5rem; margin-top: var(--space-4); }
.footer__social a {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgb(var(--rgb-on-dark) / .22);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.footer__social a:hover { background: rgb(var(--rgb-on-dark) / .12); border-color: rgb(var(--rgb-on-dark) / .5); }
.footer__social .ic { width: 1.15rem; height: 1.15rem; }

.footer__bottom {
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid rgb(var(--rgb-on-dark) / .14);
  display: flex; flex-wrap: wrap; gap: .5rem var(--space-5);
  align-items: center; justify-content: space-between;
  font-size: .82rem;
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
.footer__copy { display: flex; flex-direction: column; gap: .2rem; }
.footer__copy p { margin: 0; }
.footer__credit a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 12. Beweging ------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in:nth-child(2) { transition-delay: .06s; }
.reveal.is-in:nth-child(3) { transition-delay: .12s; }
.reveal.is-in:nth-child(4) { transition-delay: .18s; }

/* de hero-inhoud komt binnen zodra de intro weg is */
.hero__inner > * { opacity: 0; transform: translateY(10px); animation: rise .6s var(--ease) forwards; }
.hero__inner > *:nth-child(1) { animation-delay: .06s; }
.hero__inner > *:nth-child(2) { animation-delay: .14s; }
.hero__inner > *:nth-child(3) { animation-delay: .22s; }
.hero__inner > *:nth-child(4) { animation-delay: .3s; }
html.intro-on .hero__inner > *:nth-child(1) { animation-delay: .95s; }
html.intro-on .hero__inner > *:nth-child(2) { animation-delay: 1.03s; }
html.intro-on .hero__inner > *:nth-child(3) { animation-delay: 1.11s; }
html.intro-on .hero__inner > *:nth-child(4) { animation-delay: 1.19s; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__inner > * { opacity: 1; transform: none; }
}

/* ---------- 13. Print ---------------------------------------------------- */
@media print {
  .header, .nav-panel, .intro, .footer__social, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { min-height: auto; }
  .hero__media, .hero__scrim { display: none; }
  .hero__inner { color: #000; }
  .hero h1, .hero__lead { color: #000; text-shadow: none; }
}