/* ==========================================================================
   Lettertypes staan in assets/fonts/ en worden dus van je eigen server
   geladen, niet van Google. Scheelt een verzoek naar een derde partij en
   daarmee ook het hele cookie- en toestemmingsverhaal.
   ========================================================================== */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400;
  src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400;
  src: url("../fonts/open-sans-latin-400-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600;
  src: url("../fonts/open-sans-latin-600-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700;
  src: url("../fonts/open-sans-latin-700-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400;
  src: url("../fonts/fraunces-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400;
  src: url("../fonts/fraunces-latin-400-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600;
  src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2"); font-display: swap; }

/* ==========================================================================
   hoofdzaken: haarstyling Ypenburg
   Design system + components
   --------------------------------------------------------------------------
   Palet: mosgroen en saliegroen uit de salon, warme crème, staal en een
   zacht warm accent. Neutralen zijn warm, nooit puur zwart of puur wit.
   Spacing runs on a 4px scale. Elevation = hairline borders for structure,
   soft layered shadows only for things that genuinely float.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
/* Groen komt uit de zaak zelf: de moswand (#434124) en de saliegroen-tint die
   Chantal koos (#898d72). Neutralen zijn warm en nooit puur wit of puur zwart.
   Staal is een koele grijstint voor lijnen en kleine details.
   Spacing loopt op een 4px-schaal. */

:root {
  /* Surfaces & ink */
  --cream:      #f5f2ea;
  --cream-deep: #ebe7db;
  --paper:      #fffefa;
  --sand:       #e8e5d6;
  --ink:        #23261e;
  --ink-2:      #575b4c;
  --ink-3:      #5f6352;

  /* Groen: van de moswand tot saliegroen */
  --moss-900:   #2b3123;
  --moss-800:   #3a4230;
  --moss-700:   #4a533c;
  --moss-600:   #5b6549;
  --moss-400:   #8a9375;
  --sage:       #898d72;
  --sage-200:   #c6cab4;
  --sage-100:   #e2e5d6;
  --on-moss:    #f2f0e4;
  --on-moss-2:  #bcc0aa;
  --moss-line:  #4f5842;

  /* Staal */
  --steel:      #9aa0a0;
  --steel-100:  #e4e6e5;

  /* Roze: het tweede accent naast het groen */
  --blush:      #cf9f8f;
  --blush-500:  #a9705f;   /* alleen voor vlakjes en stipjes, niet voor tekst */
  --blush-600:  #875445;
  --blush-700:  #82503f;
  --blush-100:  #f1ded5;
  --on-blush:   #2a1610;

  /* Lines & shadow */
  --line:       rgba(35, 38, 30, 0.13);
  --line-soft:  rgba(35, 38, 30, 0.07);
  --shadow-sm:  0 1px 2px rgba(35, 38, 30, 0.05), 0 2px 6px rgba(35, 38, 30, 0.04);
  --shadow-md:  0 2px 4px rgba(35, 38, 30, 0.05), 0 8px 20px -6px rgba(35, 38, 30, 0.12);
  --shadow-lg:  0 4px 8px rgba(35, 38, 30, 0.06), 0 24px 48px -16px rgba(35, 38, 30, 0.22);

  /* Focus */
  --focus:      #4a533c;

  /* Type. Open Sans voor alles wat je leest en aanklikt: logo, menu, knoppen,
     labels, lopende tekst. Fraunces alleen voor de grote koppen, dat geeft de
     site karakter zonder dat het druk wordt. */
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* Spacing scale (4px base) */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-30: 120px;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* One documented z-scale. Nothing else gets a z-index. */
  --z-raised: 1;
  --z-sticky: 10;
  --z-header: 20;
  --z-drawer: 40;
  --z-skip:   60;

  --measure: 62ch;
  --wrap: 1180px;

  color-scheme: light;
}

/* ---------- 2. Reset & base --------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* stop sticky header from covering anchor targets */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; }

button { font: inherit; color: inherit; }

::selection { background: var(--blush); color: var(--on-blush); }

/* Focus: one visible, consistent ring everywhere (R11) */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.site-header :focus-visible,
.on-dark :focus-visible,
.moss :focus-visible,
.hero :focus-visible,
.page-head :focus-visible,
.drawer :focus-visible,
footer :focus-visible { outline-color: var(--blush); }

.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-4);
  z-index: var(--z-skip);
  transform: translateY(-200%);
  background: var(--moss-800); color: var(--on-moss);
  padding: var(--s-3) var(--s-5); border-radius: var(--radius-pill);
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
  transition: transform 160ms ease-out;
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---------- 3. Typography ------------------------------------------------ */

.display { font-family: var(--font-display); font-optical-sizing: auto; }
.italic  { font-style: italic; }

/* Accentwoord in koppen: cursief én in kleur. */
h1 em, h2 em, .h1 em, .h2 em { font-style: italic; font-weight: 400; }

h1, .h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  font-weight: 400;
}
h2, .h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(1.8rem, 3.5vw, 2.65rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  font-weight: 400;
}
h3, .h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  line-height: 1.28;
  font-weight: 400;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow-accent { color: var(--blush-600); }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
}

.prose { max-width: var(--measure); color: var(--ink-2); }
.prose > * + * { margin-top: var(--s-4); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--blush-700); }

.small { font-size: 0.875rem; line-height: 1.55; }
.micro { font-size: 0.78rem; line-height: 1.5; color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }

/* Het paneelmotief van de moswand in de salon, als heel zachte textuur op de
   donkere vlakken. Zo komt het beeld uit de foto's terug in de opmaak. */
.moss, .hero, .page-head, .site-footer {
  background-image:
    radial-gradient(circle at 50% 50%,
      transparent 0 29%,
      rgba(242, 240, 228, 0.062) 29% 31.4%,
      transparent 31.4%),
    radial-gradient(circle at 0% 0%,
      transparent 0 29%,
      rgba(242, 240, 228, 0.042) 29% 31.4%,
      transparent 31.4%),
    radial-gradient(circle at 100% 100%,
      transparent 0 29%,
      rgba(242, 240, 228, 0.042) 29% 31.4%,
      transparent 31.4%);
  background-size: 200px 200px;
}

/* ---------- 4. Layout ---------------------------------------------------- */

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--s-6); }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding-inline: var(--s-6); }
@media (max-width: 600px) {
  .wrap, .wrap-narrow { padding-inline: var(--s-5); }
}

section { padding-block: var(--s-24); }
section.tight { padding-block: var(--s-16); }
@media (max-width: 800px) {
  section { padding-block: var(--s-16); }
  section.tight { padding-block: var(--s-12); }
}
/* Op een telefoon telt elke sectie-marge dubbel: tien secties met veel lucht
   maken de pagina al snel tien schermen lang. Hier iets strakker, zonder dat
   het benauwd wordt. */
@media (max-width: 600px) {
  section { padding-block: var(--s-12); }
  section.tight { padding-block: var(--s-10); }
  .section-head { margin-bottom: var(--s-8); }
}

.moss { background: var(--moss-800); color: var(--on-moss); }
.moss .eyebrow { color: var(--on-moss-2); }
.moss .prose, .moss .lede, .moss .muted, .moss .micro, .moss .small { color: var(--on-moss-2); }
.moss .prose strong { color: var(--on-moss); }

.sand { background: var(--sand); }
.deep { background: var(--cream-deep); }

.section-head { max-width: 60ch; margin-bottom: var(--s-12); }
.section-head .eyebrow { margin-bottom: var(--s-3); }
.section-head > p { margin-top: var(--s-4); }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- 5. Header & navigation --------------------------------------- */

.site-header {
  position: sticky; top: 0;
  z-index: var(--z-header);
  isolation: isolate;
  background: color-mix(in srgb, var(--moss-900) 92%, transparent);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid rgba(242, 240, 228, 0.10);
  color: var(--on-moss);
}
.site-header .wordmark { color: var(--on-moss); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--s-4) var(--s-6);
}
@media (max-width: 600px) { .nav { padding: var(--s-3) var(--s-5); } }

.wordmark {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  line-height: 1;
  padding-block: var(--s-1);
  flex-shrink: 0;
}

.nav-links {
  display: flex; align-items: center; gap: var(--s-6);
  list-style: none;
  font-size: 0.9rem;
}
.nav-links a {
  text-decoration: none;
  color: var(--on-moss-2);
  padding-block: var(--s-2);
  position: relative;
  transition: color 160ms ease-out;
}
.nav-links a:hover { color: var(--on-moss); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: var(--blush);
  transform: scaleX(0); transform-origin: left;
  transition: transform 180ms ease-out;
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--on-moss); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--s-2) var(--s-4);
  font-size: 0.85rem; font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}
.nav-toggle:hover { background: rgba(242,240,228,0.10); border-color: var(--on-moss-2); }
.nav-toggle .bars { display: grid; gap: 3px; }
.nav-toggle .bars i { display: block; width: 16px; height: 1.5px; background: currentColor; }

@media (max-width: 1000px) { .nav-links, .nav-actions .desktop-only { display: none; } }
@media (min-width: 1001px) { .nav-toggle { display: none; } }

/* Onder 700px staat de vaste actiebalk onderaan al klaar met "Bellen" en
   "Afspraak maken". De knop in de header mag daar weg: anders wordt de
   headerregel breder dan het scherm en schuift de hele pagina scheef. */
@media (max-width: 700px) {
  .nav-actions > .btn { display: none; }
  .wordmark { font-size: 1.2rem; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0;
  z-index: var(--z-drawer);
  isolation: isolate;
  background: var(--moss-800);
  color: var(--on-moss);
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s linear 200ms;
}
.drawer[data-open="true"] {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s;
}
.drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--moss-line);
}
.drawer-close {
  background: transparent; border: 1px solid var(--moss-line);
  color: var(--on-moss);
  border-radius: var(--radius-pill);
  padding: var(--s-2) var(--s-4);
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: background-color 160ms ease-out;
}
.drawer-close:hover { background: var(--moss-700); }
.drawer-nav {
  list-style: none;
  padding: var(--s-6) var(--s-5);
  overflow-y: auto;
}
.drawer-nav li + li { border-top: 1px solid var(--moss-line); }
.drawer-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--on-moss);
}
.drawer-nav a[aria-current="page"] { color: var(--blush); }
.drawer-nav a .chev { color: var(--on-moss-2); font-size: 1rem; }
.drawer-foot {
  padding: var(--s-5);
  border-top: 1px solid var(--moss-line);
  display: grid; gap: var(--s-3);
}
body[data-drawer-open="true"] { overflow: hidden; }

/* Mobile sticky action bar: the two things people actually want */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.action-bar .btn { flex: 1; justify-content: center; padding-inline: var(--s-3); }
@media (max-width: 700px) {
  .action-bar { display: flex; }
  body { padding-bottom: 82px; }
}

/* ---------- 6. Buttons --------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-6);
  min-height: 46px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms ease-out, border-color 160ms ease-out,
              color 160ms ease-out, transform 120ms ease-out;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

.btn-primary { background: var(--moss-600); color: var(--on-moss); border-color: var(--moss-600); }
.btn-primary:hover { background: var(--moss-800); border-color: var(--moss-800); }

.btn-outline { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--ink-3); background: var(--paper); }

.btn-sm { padding: var(--s-2) var(--s-4); min-height: 38px; font-size: 0.83rem; }
.btn-lg { padding: var(--s-4) var(--s-8); min-height: 54px; font-size: 0.98rem; }

/* On moss backgrounds */
.moss .btn-primary, .hero .btn-primary, .page-head .btn-primary, .on-dark .btn-primary, .site-header .btn-primary, .drawer .btn-primary {
  background: var(--blush); color: var(--on-blush); border-color: var(--blush);
}
.moss .btn-primary:hover, .hero .btn-primary:hover, .page-head .btn-primary:hover, .on-dark .btn-primary:hover, .site-header .btn-primary:hover, .drawer .btn-primary:hover {
  background: var(--blush-100); border-color: var(--blush-100);
}
/* Let op: .drawer hoort in deze rij thuis. Het uitschuifmenu heeft een
   donkergroene achtergrond, maar stond niet in deze opsomming. De knoppen
   onderin vielen daardoor terug op de standaardopmaak voor een lichte
   achtergrond: donkere letters op donkergroen. "Bel 015 36 10 235" was
   daardoor vrijwel onleesbaar. */
.moss .btn-outline, .hero .btn-outline, .page-head .btn-outline, .on-dark .btn-outline, .site-header .btn-outline, .drawer .btn-outline {
  border-color: rgba(234, 228, 215, 0.32); color: var(--on-moss); background: transparent;
}
.moss .btn-outline:hover, .hero .btn-outline:hover, .page-head .btn-outline:hover, .on-dark .btn-outline:hover, .site-header .btn-outline:hover, .drawer .btn-outline:hover {
  border-color: var(--on-moss); background: rgba(234, 228, 215, 0.06);
}

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

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: 0.94rem; font-weight: 600;
  color: var(--blush-600);
  /* Zonder deze regel pakt de standaard onderstreping van de browser de hele
     link, dus ook de tussenruimte en het rondje. De streep hoort alleen op
     .lt hieronder te staan. */
  text-decoration: none;
  transition: color 160ms ease-out;
}
/* De onderstreping zit expres alleen op de tekst-span, niet op de hele link:
   anders loopt hij door onder het rondje met pijl en de ruimte ertussen. */
.link-arrow > .lt {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color 160ms ease-out;
}
.link-arrow:hover > .lt { text-decoration-color: currentColor; }
/* Het pijltje in een rondje: dat leest als een knop, niet als opmaak. */
.link-arrow > span[aria-hidden] {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  font-size: 0.85rem; line-height: 1;
  transition: transform 200ms ease-out, background-color 200ms ease-out,
              border-color 200ms ease-out, color 200ms ease-out;
}
.link-arrow:hover { color: var(--blush-700); }
.link-arrow:hover > span[aria-hidden] {
  transform: translateX(3px);
  background: var(--blush-600); border-color: var(--blush-600); color: var(--paper);
}
.moss .link-arrow { color: var(--blush); }
.moss .link-arrow:hover { color: var(--on-moss); }
.moss .link-arrow:hover > span[aria-hidden] {
  background: var(--blush); border-color: var(--blush); color: var(--on-blush);
}

/* ---------- 7. Hero ------------------------------------------------------ */

/* De hero vult precies het stuk scherm onder de header, zodat de roze strip
   eronder netjes op de onderrand van het scherm eindigt en er geen streepje
   van de volgende sectie doorheen piept. --header-h wordt door main.js
   gezet op de echte hoogte van de header; de 76px is alleen de terugval
   voor het allereerste moment van laden. */
.hero {
  background: var(--moss-800);
  color: var(--on-moss);
  position: relative;
  overflow: hidden;
  padding-block: 0;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--header-h, 76px) - var(--actionbar-h, 0px));
}
.hero-grid {
  max-width: var(--wrap); margin: 0 auto; width: 100%;
  padding: var(--s-12) var(--s-6) var(--s-12);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-12);
  align-items: center;
  /* Groeit mee met de ruimte die overblijft; de inhoud blijft in het midden
     staan en de overgebleven ruimte valt er gelijkmatig omheen. */
  flex: 1 0 auto;
  align-content: center;
}
/* De foto mocht niet zo hoog worden dat de hero van een laptopscherm loopt.
   100svh is de zichtbare hoogte, min ruimte voor de header en de marges. */
.hero-grid .shot { max-height: calc(100svh - 260px); min-height: 500px; }
/* Op een laag scherm (veel laptops) wordt de tekstkolom zelf de grens.
   Dan iets minder lucht boven en onder, zodat alles tóch binnen één scherm
   past in plaats van dat de strip net onder de rand valt. */
@media (min-width: 941px) and (max-height: 780px) {
  .hero-grid { padding-block: var(--s-8); }
  .hero-grid .shot { min-height: 420px; }
}
@media (max-width: 940px) and (min-width: 761px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-10); padding-block: var(--s-12) var(--s-10); }
  /* Op tablet werd de staande foto bijna 1100px hoog. Vierkanter bijsnijden,
     maar hoog genoeg dat er geen kruinen af vallen. */
  .hero-grid .shot.tall, .hero-grid .shot.portrait { aspect-ratio: 1 / 1; min-height: 0; }
  .hero-grid .shot img { object-position: 50% 16%; }
}

/* ---------- De hero op een telefoon --------------------------------------
   Op een telefoon staat de foto niet ónder de tekst maar eróchter: hij vult
   het hele eerste scherm en de tekst ligt er overheen. Daarmee is de hero
   meteen een stuk korter, want de foto kost geen extra schermhoogte meer.
   Over de foto ligt een donkere sluier die naar onderen toe sterker wordt,
   zodat de gezichten bovenin zichtbaar blijven en de tekst eronder overal
   leesbaar is, ook als er toevallig een licht stuk foto achter valt.
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: var(--s-10) var(--s-5) var(--s-10);
    /* De tekst hoort onderin, de foto is bovenin te zien. */
    align-content: end;
  }

  .hero-grid .shot,
  .hero-grid .shot.tall,
  .hero-grid .shot.portrait {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
  .hero-grid .shot img {
    width: 100%; height: 100%;
    object-position: 50% 16%;
  }
  /* Geen zoom-op-hover en geen bijschrift als hij achtergrond is. */
  .hero-grid .shot:hover img { transform: none; }
  .hero-grid .shot figcaption { display: none; }
  .hero-grid .shot::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(
      180deg,
      rgba(43, 49, 35, 0.28) 0%,
      rgba(43, 49, 35, 0.62) 16%,
      rgba(43, 49, 35, 0.90) 30%,
      rgba(43, 49, 35, 0.95) 100%
    );
  }

  /* De tekstkolom hoort bovenop de foto te liggen. */
  .hero-grid > div { position: relative; z-index: var(--z-raised); }
  /* En de roze strip ook: de foto ligt met inset:0 over de hele hero, dus
     zonder deze regel verdwijnt de strip eronder. */
  .hero .ticker-wrap { position: relative; z-index: var(--z-raised); }

  /* Over een foto mag de tekst niet gedempt zijn: volle helderheid. */
  .hero .lede { color: var(--on-moss); margin-bottom: var(--s-6); }
  .hero .eyebrow { color: var(--on-moss); }
  /* De knop "Afspraak maken" staat op een telefoon al in de balk onderaan
     én in de header. Eén keer is genoeg; dat scheelt ook hoogte. */
  .hero .btn-row .btn-primary { display: none; }
  .hero .btn-row { margin-bottom: var(--s-2); }
}

.hero h1 { color: var(--on-moss); margin: var(--s-4) 0 var(--s-5); }
.hero h1 em { color: var(--blush); }
.hero .eyebrow { color: var(--on-moss-2); }
.hero .lede { color: var(--on-moss-2); margin-bottom: var(--s-8); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--s-12);
  border-top: 1px solid var(--moss-line);
}
.stat-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stat { padding: var(--s-5) var(--s-4) 0 0; border-right: 1px solid var(--moss-line); }
.stat:last-child { border-right: 0; }
.stat:not(:first-child) { padding-left: var(--s-4); }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--on-moss);
  line-height: 1.1;
  margin-bottom: var(--s-1);
}
.stat span {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-moss-2);
}
@media (max-width: 520px) {
  .stat-row { grid-template-columns: 1fr 1fr; margin-top: var(--s-8); }
  .stat { border-right: 0; padding-right: 0; }
  .stat:nth-child(odd) { padding-left: 0; }
  .stat:nth-child(n+3) { padding-top: var(--s-4); border-top: 1px solid var(--moss-line); }

  /* De rij van drie bleef op een telefoon scheef staan: het middelste vakje
     kreeg wél inspringing en de buitenste niet, waardoor de cijfers niet
     meer onder elkaar uitkwamen. Nu drie gelijke vakken zonder inspringing,
     met dunne scheidingslijntjes ertussen. */
  .stat-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .stat-row.cols-3 .stat {
    padding: var(--s-4) var(--s-2) 0;
    border-top: 0;
    border-right: 1px solid var(--moss-line);
    text-align: center;
  }
  .stat-row.cols-3 .stat:first-child { padding-left: 0; }
  .stat-row.cols-3 .stat:last-child { padding-right: 0; border-right: 0; }
  .stat-row.cols-3 .stat b { font-size: 1.35rem; }
  /* Niet kleiner dan 11px: daaronder wordt het op een telefoon onleesbaar.
     (Stond even op 0.6rem = 9,6px, dat was te ver doorgeschoten.) */
  .stat-row.cols-3 .stat span { font-size: 0.69rem; letter-spacing: 0.04em; }
}

/* ------------------------------------------------------------------------
   Foto's. Eén component voor alle beeld op de site: .shot
   ------------------------------------------------------------------------ */
.shot {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--moss-900);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
/* Een <picture> is standaard inline; hij moet het hele vak vullen zodat de
   foto zich net zo gedraagt als een losse <img>. */
.shot picture { display: block; width: 100%; height: 100%; }
.shot img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 30%);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.shot:hover img { transform: scale(1.035); }
.shot figcaption { transition: background-color 200ms ease-out; }
.shot:hover figcaption { background: rgba(28, 33, 22, 0.86); }
.shot.portrait { aspect-ratio: 3 / 4; }
.shot.tall     { aspect-ratio: 5 / 7; }
.shot.square   { aspect-ratio: 1 / 1; }
.shot.wide     { aspect-ratio: 3 / 2; }
.shot.flat     { aspect-ratio: 16 / 10; }
.shot.plain    { box-shadow: none; border: 1px solid var(--line); }

.shot figcaption {
  position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: var(--z-raised);
  max-width: calc(100% - var(--s-8));
  font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--on-moss);
  background: rgba(28, 33, 22, 0.76);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Twee foto's die elkaar overlappen: rustig, niet druk. */
.shot-pair { position: relative; }
.shot-pair .shot:last-child {
  position: absolute; right: -6%; bottom: -9%;
  width: 46%; border: 5px solid var(--cream);
  box-shadow: var(--shadow-md);
}
@media (max-width: 940px) { .shot-pair .shot:last-child { right: 0; bottom: -6%; width: 40%; } }
@media (max-width: 520px) { .shot-pair .shot:last-child { display: none; } }

/* Marquee strip */
.ticker-wrap {
  background: var(--blush);
  color: var(--on-blush);
  overflow: hidden;
  border-block: 1px solid rgba(0,0,0,0.08);
}
.ticker {
  display: flex; gap: var(--s-12); white-space: nowrap;
  width: max-content;
  padding-block: var(--s-3);
  animation: ticker-scroll 40s linear infinite;
}
.ticker span { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Compact page header for subpages */
.page-head {
  background: var(--moss-800); color: var(--on-moss);
  padding-block: var(--s-16) var(--s-16);
}
.page-head h1 { color: var(--on-moss); margin: var(--s-4) 0 var(--s-5); font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.page-head h1 em { color: var(--blush); }
.page-head .lede { color: var(--on-moss-2); max-width: 54ch; }
.page-head .eyebrow { color: var(--on-moss-2); }

/* ------------------------------------------------------------------------
   Paginakop met foto.

   De kop was op een breed scherm vooral leeg: de tekstkolom is zo'n 60ch
   breed, de donkere balk 1132px, dus rechts bleef een flinke lap over. Met
   .has-media wordt de kop een tweekolomsraster en vult een staande foto die
   ruimte. Op een telefoon staat de tekst toch al over de volle breedte, en
   daar willen we de pagina juist korter houden, dus de foto verdwijnt daar.
   ------------------------------------------------------------------------ */
.page-head.has-media .wrap {
  display: grid;
  /* De fotokolom is bewust smal. Alle foto's zijn staand; maak je het vak
     te breed, dan moet de browser er verticaal een flinke hap uit snijden
     om het te vullen, en dan gaan er kruinen of voeten af. Met deze
     verhouding scheelt het vak nog maar een procent of tien met de foto
     zelf, dus er wordt bijna niets weggesneden. */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: var(--s-12);
  align-items: center;
}
.page-head.has-media .ph-text { min-width: 0; }
.page-head.has-media .ph-text .lede { max-width: 46ch; }

.page-head-media {
  margin: 0;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Standaard 4/5, maar elke pagina mag met --ar de eigen verhouding van de
     foto opgeven. Zet je die gelijk aan de foto zelf, dan hoeft de browser
     niets weg te snijden en kan er dus ook niemand een kruin of een voet
     verliezen. Doe dat bij foto's met mensen erop; bij een productplank
     maakt een snee niets uit. */
  aspect-ratio: var(--ar, 4 / 5);
  max-height: 560px;
  /* Een dun randje in dezelfde tint als de balk zelf: de foto komt dan los
     van het groen zonder dat er een harde lijn omheen staat. */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), var(--shadow-lg);
  justify-self: end;
  width: 100%;
}
.page-head-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 35%);
  display: block;
}

/* Kaartje in plaats van een foto, voor een pagina waar geen foto past. */
.page-head-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  padding: var(--s-8);
  justify-self: end;
  width: 100%;
}
.page-head-card .stars { color: var(--blush); font-size: 1rem; letter-spacing: 0.1em; }
.page-head-card .score {
  font-family: var(--font-display);
  font-size: 2.4rem; line-height: 1;
  color: var(--on-moss); margin: var(--s-3) 0 var(--s-2);
}
.page-head-card p { color: var(--on-moss-2); margin: 0; }
.page-head-card blockquote {
  margin: var(--s-5) 0 0; padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.14);
  color: var(--on-moss); font-style: italic; font-size: 0.95rem; line-height: 1.55;
}
.page-head-card cite {
  display: block; margin-top: var(--s-3); font-style: normal;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-moss-2);
}

/* ------------------------------------------------------------------------
   Op een telefoon gaat de foto achter de tekst staan, net als de hero op de
   homepage. Hij was eerst verborgen, en dat betekende dat je op de
   saloonpagina wel de Brow Bar zag maar de zaak zelf niet. Nu vult hij de
   hele kop, met een verloop eroverheen zodat de tekst leesbaar blijft. De
   pagina wordt er geen pixel langer van: de foto neemt geen eigen ruimte in,
   hij ligt achter de tekst die er toch al stond.
   ------------------------------------------------------------------------ */
@media (max-width: 940px) {
  .page-head.has-media .wrap { display: block; }
  .page-head.has-media .ph-text .lede { max-width: 54ch; }
  /* Het reviewkaartje op de wachtlijstpagina blijft wel weg: dat is een
     kaartje en geen foto, en achter tekst wordt het onleesbaar. */
  .page-head-card { display: none; }

  .page-head.has-media {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .page-head.has-media .page-head-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    width: auto;
    aspect-ratio: auto;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    justify-self: auto;
  }
  .page-head.has-media .page-head-media img {
    width: 100%; height: 100%;
    object-position: var(--mfocal, 50% 22%);
  }
  .page-head.has-media .page-head-media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(
      180deg,
      /* Bovenaan bewust wat donkerder dan bij de hero op de homepage: daar
         begint de tekst pas lager, hier staat het kruimelpad meteen onder de
         header en dat is kleine tekst. Gemeten op de lichtste foto haalde
         die op 0.34 maar 3,4:1; met 0.62 zit hij boven de eis van 4,5:1. */
      rgba(43, 49, 35, 0.62) 0%,
      rgba(43, 49, 35, 0.76) 18%,
      rgba(43, 49, 35, 0.90) 34%,
      rgba(43, 49, 35, 0.95) 100%
    );
  }
  /* De tekst hoort bovenop te liggen. */
  .page-head.has-media .ph-text { position: relative; z-index: var(--z-raised); }
  /* Over een foto mag de tekst niet gedempt zijn: volle helderheid. */
  .page-head.has-media .ph-text .lede,
  .page-head.has-media .ph-text .eyebrow,
  .page-head.has-media .crumbs,
  .page-head.has-media .crumbs a { color: var(--on-moss); }
}

.crumbs { font-size: 0.78rem; color: var(--on-moss-2); margin-bottom: var(--s-6); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs span { opacity: 0.55; padding-inline: var(--s-2); }

/* ---------- 8. Cards & grids -------------------------------------------- */

/* grid- en flexkinderen mogen nooit breder worden dan hun kolom */
.grid > *, .split > *, .nav > *, .trust > *, .foot-grid > * { min-width: 0; }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
}
.card h3 { margin-bottom: var(--s-3); }
.card p { color: var(--ink-2); font-size: 0.95rem; }
.moss .card {
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out; background: transparent; border-color: var(--moss-line); }
.moss .card-num, .moss .eyebrow-accent { color: var(--blush); }
.moss .card p { color: var(--on-moss-2); }

a.card {
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out; text-decoration: none; display: block; transition: border-color 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out; }
a.card:hover { border-color: var(--blush); transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Ook gewone kaarten reageren, zodat de pagina levend aanvoelt. */
.card:hover { border-color: var(--blush); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.moss .card:hover { border-color: var(--blush); box-shadow: none; background: rgba(242,240,228,0.04); }
.review { transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out; }
.review:hover { border-color: var(--blush); box-shadow: var(--shadow-md); transform: translateY(-3px); }

.card-num {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blush-600);
  display: block;
  margin-bottom: var(--s-4);
  letter-spacing: 0.12em;
}

/* Feature list with a marker */
.checklist { list-style: none; display: grid; gap: var(--s-3); }
.checklist li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3);
  align-items: start;
  color: var(--ink-2);
}
.checklist li::before {
  content: "";
  width: 8px; height: 8px; margin-top: 9px; margin-left: 6px;
  border-radius: 50%;
  background: var(--blush-500);
}
.moss .checklist li { color: var(--on-moss-2); }
.moss .checklist li::before { background: var(--blush); }
.checklist strong { color: var(--ink); font-weight: 600; }
.moss .checklist strong { color: var(--on-moss); }

/* Split editorial layout */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-16); align-items: start; }
.split.center { align-items: center; }
/* voor pagina's waar de hoofdkolom moet domineren (bv. de tarievenlijst) */
.split.main-wide { grid-template-columns: 1.6fr 1fr; gap: var(--s-12); }
@media (max-width: 940px) {
  .split, .split.main-wide { grid-template-columns: 1fr; gap: var(--s-10); }
  /* de plakkende zijkolom heeft op mobiel geen zin meer */
  .split > aside .card {
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out; position: static !important; }
}

/* Photo slots: designed placeholders until real salon photos land */
/* Stat / trust strip */
.trust {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.trust > div { padding: var(--s-6); border-right: 1px solid var(--line); }
.trust > div:last-child { border-right: 0; }
.trust b { display: block; font-family: var(--font-display); font-size: 1.4rem; margin-bottom: var(--s-1); }
.trust span { font-size: 0.85rem; color: var(--ink-2); }
@media (max-width: 860px) {
  .trust { grid-template-columns: 1fr 1fr; }
  .trust > div:nth-child(2n) { border-right: 0; }
  .trust > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 460px) {
  .trust { grid-template-columns: 1fr; }
  .trust > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .trust > div:last-child { border-bottom: 0; }
}

/* ---------- 9. Openingstijden & tarieven -------------------------------- */

.hours {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
  height: fit-content;
}
.moss .hours { border-color: var(--moss-line); }
.hours-row {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-size: 0.93rem;
}
.moss .hours-row { border-color: var(--moss-line); }
.hours-row:last-of-type { border-bottom: 0; }
.hours-row[data-today="true"] { font-weight: 600; }
.hours-row[data-today="true"] > span:first-child::after {
  content: "vandaag";
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600;
  color: var(--blush-600);
  margin-left: var(--s-2);
}
.moss .hours-row[data-today="true"] > span:first-child::after { color: var(--blush); }
.hours-row .time { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.moss .hours-row .time { color: var(--on-moss-2); }
.hours-row .closed { color: var(--ink-3); }
/* Geen opacity hier: die maakte "Gesloten" 3,61:1 op het groene vlak,
   onder de norm van 4,5:1. */
.moss .hours-row .closed { color: var(--on-moss-2); }

.open-now {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 0.8rem; font-weight: 600;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  margin-bottom: var(--s-4);
}
.moss .open-now { border-color: var(--moss-line); }
.open-now .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.open-now[data-open="true"] .dot { background: #5f8a4e; }
.open-now[data-open="false"] .dot { background: var(--blush-600); }

/* Price list */
.pricelist { border-top: 1px solid var(--line); }
.moss .pricelist { border-color: var(--moss-line); }
.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4) var(--s-6);
  align-items: baseline;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.moss .price-row { border-color: var(--moss-line); }
.price-row .name { font-family: var(--font-display); font-size: 1.12rem; }
.price-row .desc { grid-column: 1 / 2; font-size: 0.88rem; color: var(--ink-2); margin-top: var(--s-1); max-width: 52ch; }
.moss .price-row .desc { color: var(--on-moss-2); }
.price-row .price {
  grid-row: 1 / 2; grid-column: 2 / 3;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-row .price small { font-size: 0.72rem; color: var(--ink-3); display: block; text-align: right; font-family: var(--font-sans); letter-spacing: 0.04em; }
.moss .price-row .price small { color: var(--on-moss-2); }
/* label in plaats van een bedrag (gebruikt op de homepage, waar geen prijzen staan) */
.price-row .tag {
  grid-row: 1 / 2; grid-column: 2 / 3;
  font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 600; color: var(--blush-600); white-space: nowrap;
}
.moss .price-row .tag { color: var(--blush); }

/* Let op: dit is een flexrij. Zet je er twee alinea's in, dan komen die naast
   elkaar te staan in plaats van onder elkaar. Vandaar de kolomrichting; de
   gap blijft doen wat hij deed toen er nog één alinea in stond. */
.notice {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blush-500);
  border-radius: var(--radius-sm);
  background: var(--blush-100);
  font-size: 0.9rem;
  color: var(--ink-2);
}
.notice strong { color: var(--ink); }
.notice.moss-notice { background: var(--moss-700); border-color: var(--moss-line); border-left-color: var(--blush); color: var(--on-moss-2); }
.notice.moss-notice strong { color: var(--on-moss); }

/* ---------- 10. Reviews -------------------------------------------------- */

.stars { color: var(--blush-600); letter-spacing: 2px; font-size: 0.95rem; }
.moss .stars { color: var(--blush); }
.review {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.review p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
}
.review cite { font-style: normal; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: auto; }

/* ---------- Reviews op een telefoon: naast elkaar in plaats van onder
   elkaar. Vier kaarten onder elkaar kostte bijna een half scherm per stuk.
   Nu veeg je er doorheen; de volgende kaart piept er net in beeld, zodat je
   ziet dat er meer is. Puur CSS, geen extra bibliotheek. ------------------ */
@media (max-width: 760px) {
  .review-row {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    /* Belangrijk: overflow-y expliciet op hidden. Zet je alleen overflow-x op
       auto, dan maakt de browser van overflow-y ook "auto". De rij wordt dan
       stiekem ook verticaal een schuifvlak, en dan voelt vegen alsof het ding
       een beetje op en neer wiebelt in plaats van netjes opzij schuift. */
    overflow-y: hidden;
    /* "proximity" in plaats van "mandatory": dat trekt minder hard aan je
       vinger tijdens het vegen. */
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* laat de rij van rand tot rand lopen, met de wrap-marge als ademruimte */
    margin-inline: calc(var(--s-5) * -1);
    padding-inline: var(--s-5);
    scroll-padding-inline: var(--s-5);
    scrollbar-width: none;
  }
  .review-row::-webkit-scrollbar { display: none; }
  .review-row > .review {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
  .review-row > .review:hover { transform: none; }
  .review-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
  /* De kaarten komen normaal een stukje van onderaf in beeld gleden. In een
     rij waar je zijwaarts doorheen veegt is dat precies de beweging die je
     niet wilt: het oogt alsof de rij op en neer wiebelt, en zolang de
     animatie loopt steekt de kaart ook nog eens onder de rij uit. Hier laten
     we ze dus alleen rustig oplichten, zonder verschuiving. */
  .review-row > [data-reveal] { transform: none; }
  .review-row > [data-reveal][data-revealed="true"] { transform: none; }
  /* Even hoog, wat er ook in staat. */
  .review-row { align-items: stretch; }
}

/* ---------- 11. Map & location ------------------------------------------ */

/* ---------- Kaart -------------------------------------------------------- *
   De kaart is OpenStreetMap via Leaflet, en Leaflet staat in assets/vendor/
   op onze eigen server. Er komt geen script van een derde partij binnen en er
   worden geen cookies gezet, dus de kaart mag gewoon meteen laden en de site
   heeft nog steeds geen cookiemelding nodig. De kaarttegels zelf komen van
   openstreetmap.org; dat is één beeldverzoek per tegel, zonder cookies.
   ------------------------------------------------------------------------- */
.map-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream-deep);
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
/* Het ruitpatroon eronder is wat je ziet terwijl de kaart laadt, en wat er
   overblijft als iemand JavaScript uit heeft staan. Dan blijft het een net
   vlak in plaats van een leeg gat; het adres staat er toch al naast. */
.map-canvas {
  width: 100%;
  aspect-ratio: 5 / 4;
  background:
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, var(--line-soft) 0 1px, transparent 1px 44px),
    var(--sage-100);
}

/* Het speldje op de kaart: hetzelfde vormpje als het pinnetje in de opmaak. */
.map-pin span {
  display: block;
  width: 26px; height: 26px;
  border-radius: 50% 50% 50% 0;
  background: var(--blush-500);
  border: 2px solid var(--paper);
  transform: rotate(-45deg);
  box-shadow: var(--shadow-md);
}

.map-actions {
  display: flex; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--paper);
}
/* De kaart is altijd licht, ook binnen een donkere sectie. De knop erin moet
   dus de lichte behandeling krijgen en niet die van het donkere vlak. */
.map-card .btn-outline { border-color: var(--line); color: var(--ink); background: var(--paper); }
.map-card .btn-outline:hover { border-color: var(--ink-3); background: var(--cream); }

/* Leaflet in de huisstijl trekken: eigen lettertype, zachtere randen. */
.leaflet-container {
  font-family: var(--font-sans);
  background: var(--sage-100);
}
.leaflet-container a { color: var(--blush-700); }
.leaflet-bar a,
.leaflet-bar a:hover {
  color: var(--ink);
  border-bottom-color: var(--line);
  background: var(--paper);
}
.leaflet-bar a:hover { background: var(--cream); }
.leaflet-bar {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.leaflet-control-attribution {
  background: rgba(255, 254, 250, 0.86);
  color: var(--ink-3);
  font-size: 0.68rem;
  padding: 2px 6px;
}
.leaflet-popup-content {
  font-size: 0.86rem; line-height: 1.5; color: var(--ink);
  margin: var(--s-3) var(--s-4);
}
.leaflet-popup-content-wrapper { border-radius: var(--radius-sm); }

.addr-line {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}
.addr-line:last-child { border-bottom: 0; }
.addr-line dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.addr-line dd { margin: 0; }
.addr-line a { text-decoration: none; border-bottom: 1px solid var(--line); }
.addr-line a:hover { border-color: var(--blush-600); color: var(--blush-700); }
@media (max-width: 480px) { .addr-line { grid-template-columns: 1fr; gap: var(--s-1); } }

/* ---------- 12. Forms ---------------------------------------------------- */

.form { display: grid; gap: var(--s-5); }
/* align-content:start houdt de invoervelden van twee kolommen op één lijn,
   ook als het ene veld wel een hint heeft en het andere niet */
.field { display: grid; gap: var(--s-2); align-content: start; }
.field label { font-size: 0.85rem; font-weight: 600; }
.field .hint { font-size: 0.8rem; color: var(--ink-3); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-3) var(--s-4);
  min-height: 46px;
  width: 100%;
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--focus); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--blush-700); background: var(--blush-100); }
.field .error { font-size: 0.8rem; color: var(--blush-700); font-weight: 600; display: none; }
.field input[aria-invalid="true"] ~ .error,
.field textarea[aria-invalid="true"] ~ .error,
.field select[aria-invalid="true"] ~ .error,
.field .choice-group[aria-invalid="true"] ~ .error { display: block; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

.choice-group { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choice {
  position: relative;
  display: inline-flex;
}
.choice input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.choice span {
  display: inline-flex; align-items: center;
  padding: var(--s-2) var(--s-4);
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.87rem;
  background: var(--paper);
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.choice input:hover + span { border-color: var(--ink-3); }
.choice input:checked + span { background: var(--moss-700); border-color: var(--moss-700); color: var(--on-moss); font-weight: 600; }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }

.consent { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); align-items: start; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--moss-600); }
.consent label { font-size: 0.85rem; font-weight: 400; color: var(--ink-2); line-height: 1.5; }

.form-status { display: none; }
.form-status[data-state="error"] {
  display: block;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--blush-700);
  border-radius: var(--radius-sm);
  background: var(--blush-100);
  font-size: 0.9rem;
}
.form-success {
  display: none;
  padding: var(--s-10) var(--s-8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-align: center;
}
.form-success[data-state="visible"] { display: block; }
.form-success .mark {
  width: 52px; height: 52px; margin: 0 auto var(--s-5);
  border-radius: 50%;
  background: var(--moss-600); color: var(--on-moss);
  display: grid; place-items: center;
  font-size: 1.4rem;
}
.form-success h3 { margin-bottom: var(--s-3); }
.form-success p { color: var(--ink-2); max-width: 44ch; margin-inline: auto; }

.btn .spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  display: none;
  animation: spin 700ms linear infinite;
}
.btn[data-loading="true"] .spinner { display: block; }
.btn[data-loading="true"] { pointer-events: none; opacity: 0.75; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 13. FAQ (accordion) ----------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding-block: var(--s-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.1rem;
  transition: color 160ms ease-out;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blush-600); }
.faq summary .ind {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1rem; line-height: 1;
  transition: transform 200ms ease-out, background-color 200ms ease-out, color 200ms ease-out;
}
.faq details[open] summary .ind { transform: rotate(45deg); background: var(--moss-600); color: var(--on-moss); border-color: var(--moss-600); }
.faq .answer { padding-bottom: var(--s-5); color: var(--ink-2); font-size: 0.95rem; max-width: 66ch; }
.faq .answer > * + * { margin-top: var(--s-3); }
.moss .faq, .moss .faq details { border-color: var(--moss-line); }
.moss .faq .answer { color: var(--on-moss-2); }
.moss .faq summary .ind { border-color: var(--moss-line); }

/* ---------- 14. Call-to-action bands ------------------------------------ */

.band { background: var(--blush); color: var(--on-blush); }
.band.sage { background: var(--sage-100); color: var(--ink); border-block: 1px solid var(--line-soft); }
section.band { padding-block: var(--s-16); }
@media (max-width: 800px) { section.band { padding-block: var(--s-12); } }
.band .inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-8); flex-wrap: wrap;
}
.band h2 { max-width: 24ch; }
.band .card {
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out; border-color: rgba(42,22,16,0.12); }
.band .card p { color: var(--ink-2); }
.band p { max-width: 48ch; margin-top: var(--s-3); color: rgba(42,22,16,0.78); }
.band.sage p { color: var(--ink-2); }
.band .eyebrow { color: rgba(42,22,16,0.78); }
.band.sage .eyebrow { color: var(--moss-600); }
.band .btn-primary { background: var(--moss-800); color: var(--on-moss); border-color: var(--moss-800); }
.band .btn-primary:hover { background: var(--moss-900); border-color: var(--moss-900); }
.band .btn-outline { border-color: rgba(42,22,16,0.3); color: var(--on-blush); }
.band .btn-outline:hover { border-color: var(--on-blush); background: rgba(42,22,16,0.06); }
.band.sage .btn-outline { border-color: rgba(35,38,30,0.25); color: var(--ink); }
.band.sage .btn-outline:hover { border-color: var(--ink); background: rgba(35,38,30,0.05); }

/* ---------- 15. Footer --------------------------------------------------- */

.site-footer {
  background: var(--moss-900);
  color: var(--on-moss-2);
  padding-block: var(--s-16) var(--s-8);
}
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s-10); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
/* Onder elkaar werd de voettekst op een telefoon bijna een heel scherm lang.
   De drie linkkolommen passen prima naast elkaar in twee kolommen; alleen
   het naam- en adresblok houdt de volle breedte. */
@media (max-width: 560px) {
  .site-footer { padding-block: var(--s-12) var(--s-6); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
.site-footer .wordmark { color: var(--on-moss); display: block; margin-bottom: var(--s-4); }
.site-footer h4 {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-moss); margin-bottom: var(--s-4); font-weight: 600;
}
.site-footer ul { list-style: none; display: grid; gap: var(--s-3); }
.site-footer a { text-decoration: none; font-size: 0.9rem; transition: color 160ms ease-out; }
.site-footer a:hover { color: var(--on-moss); }
.foot-bottom {
  margin-top: var(--s-16); padding-top: var(--s-6);
  border-top: 1px solid var(--moss-line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3);
  font-size: 0.78rem;
}

/* ---------- 16. Motion --------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
[data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .shot:hover img, .card:hover, .review:hover, .btn:hover,
  .link-arrow:hover > span[aria-hidden] { transform: none; }
  html { scroll-behavior: auto; }
  .ticker { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn:active { transform: none; }
  a.card:hover { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 17. Utilities ------------------------------------------------ */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mt-10 { margin-top: var(--s-10); }
.mt-12 { margin-top: var(--s-12); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-8 { margin-bottom: var(--s-8); }

/* ------------------------------------------------------------------------
   Telefoon: de laatste aanscherpingen.

   Deze staan bewust helemaal onderaan. Het zijn overschrijvingen van
   componenten die hierboven zijn gedefinieerd, en bij gelijke specificiteit
   wint in CSS de regel die het laatst staat. Zet je ze hogerop, dan doen ze
   niets. De bedoeling: dezelfde inhoud, minder scrollen.
   ------------------------------------------------------------------------ */
@media (max-width: 600px) {
  .grid { gap: var(--s-4); }
  /* De twee helften van een split staan op een telefoon onder elkaar; 64px
     ertussen was daar te veel lucht. */
  .split, .split.main-wide { gap: var(--s-8); }
  .card { padding: var(--s-5); }
  .price-row { padding-block: var(--s-4); }
  /* Staande foto's buiten de hero: iets minder hoog, scheelt per foto een
     halve schermhoogte zonder dat er iemand af valt. */
  section:not(.hero) .shot.tall { aspect-ratio: 4 / 5; }
  /* De kaart hoeft op een telefoon niet zo hoog te zijn om bruikbaar te zijn. */
  .map-canvas { aspect-ratio: 4 / 3; }

  /* Aantikbaar maken met een duim. De linkjes in de voettekst en in de
     zijkolom stonden op zo'n 19px hoog; dat is te klein om betrouwbaar te
     raken. Met wat lucht eromheen wordt het aantikgebied ruim genoeg zonder
     dat de opmaak verschuift. */
  .site-footer ul { gap: var(--s-1); }
  .site-footer ul a { display: inline-block; padding-block: var(--s-2); }
  .crumbs a { display: inline-block; padding-block: var(--s-1); }
  .nav-toggle { min-height: 44px; }
  .page-nav a { display: inline-block; padding-block: var(--s-2); }
}

@media print {
  .site-header, .action-bar, .drawer, .ticker-wrap, .band { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
}