/* =====================================================================
   Ardent Esthetics — stylesheet
   =====================================================================

   Huisstijl in lijn met de VISAGE-app: warme crème achtergrond, inktbruine
   tekst, blush als enige accentkleur. Alle kleuren en radii staan als custom
   properties in :root hieronder — pas die aan, niet de losse regels.

   Conventies
   - Klassenamen zijn Nederlands/functioneel en plat (.price-card, .toc, .steps).
     Geen BEM; het bestand is klein genoeg om zonder te kunnen.
   - `.section` is het verticale ritme, `.wrap` de horizontale breedte.
     Voeg `.alt` toe voor een sectie met afwijkende achtergrond, `.narrow` voor
     een smallere tekstkolom, `.center` voor gecentreerde tekst.
   - Media queries staan bewust onderaan, niet per component, zodat je in één
     blik ziet wat er op mobiel afwijkt.

   Inhoud
     1. Tokens (:root) en basis
     2. Topbar, woordmerk en navigatie
     3. Hero (alleen index.html)
     4. Knoppen
     5. Secties en scroll-reveal
     6. Paginakop en inhoudsopgave (subpagina's)
     7. Kaarten
     8. Tekstonderdelen (callout, lijsten, stappen, pijlers)
     9. Prijstabellen
    10. Contactformulier
    11. Footer
    12. Media queries
   ===================================================================== */

/* ---------- 0. Lettertype ---------- */
/* Inter, meegeleverd in fonts/ en dus niet afhankelijk van wat het apparaat
   toevallig heeft: op elk toestel exact dezelfde typografie. Het is een
   variabele font (één bestand voor alle gewichten 100 t/m 900), zodat de
   lichte snede van "esthetics" en de vette koppen uit hetzelfde bestand komen.
   Licentie: SIL Open Font License, zie fonts/LICENSE.txt. Geen extern verzoek,
   dus geen Google Fonts en geen privacykwestie. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap; /* tekst blijft leesbaar terwijl het font laadt */
  src: url("fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable-Italic.woff2") format("woff2");
}

/* ---------- 1. Tokens en basis ---------- */
:root {
  --bg: #faf6f0;
  --bg-glow: radial-gradient(ellipse 900px 600px at 50% -10%, #ffffff 0%, #faf6f0 60%);
  --surface: #ffffff;
  --surface-raised: #f6f0ea;
  --border: rgba(43, 38, 34, 0.10);
  --border-strong: rgba(43, 38, 34, 0.20);
  --ink: #2b2622;
  --muted: #6f6255;
  --accent: #c98f8a;
  --accent-dark: #9c5b53;
  --accent-soft: rgba(201, 143, 138, 0.14);
  --radius: 14px;
  --radius-sm: 9px;

  /* Hoogte van de vaste balken. Deze waarden zijn een benadering voor het geval
     JavaScript niet draait; initStickyOffsets meet ze op en overschrijft ze met
     de echte hoogtes. Alles wat onder de balken uit moet komen (de plakkende
     inhoudsopgave, anker-sprongen) rekent hiermee. */
  --topbar-h: 62px;
  --toc-h: 49px;

  /* Het woordmerk ("ARDENT" met "esthetics" eronder) komt twee keer voor: klein
     in de balk en groot in de hero. Beide gebruiken deze waarden, zodat de
     letterspatiëring en de regelafstand identiek ogen op elk formaat. De waarden
     staan in em, dus ze schalen mee met de tekengrootte. */
  --lockup-track: .26em;      /* spatiëring van de naam */
  --lockup-track-sub: .42em;  /* spatiëring van "esthetics": net iets breder dan de naam erboven */
  /* In de hero staat "esthetics" in een lichtere snede, en die letters zijn
     smaller. Zonder deze extra spatiëring zou het daar niet even ver buiten
     "ARDENT" vallen als in de balk. */
  --lockup-track-sub-hero: .49em;
  --lockup-gap: .24em;        /* afstand tussen de twee regels, in em van de naam */
  /* "esthetics" staat op .744 van de naam erboven (.58rem op .78rem in de balk).
     De hero rekent met dezelfde factor, zodat de twee regels daar in exact
     dezelfde verhouding onder elkaar staan als in de balk. Zonder deze factor
     bleef "esthetics" in de hero een klein regeltje onder een groot woord. */
  --lockup-sub-scale: .744;
  --lockup-size-bar: .78rem;                       /* naamgrootte in de balk */
  --lockup-size-hero: clamp(2rem, 7vw, 3.4rem);    /* naamgrootte in de hero */

  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* De systeemfonts staan er alleen achter voor het geval het bestand niet laadt. */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg-glow), var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

h1, h2, h3 { margin: 0 0 .4em 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 .8em 0; }
a { color: inherit; }

/* Geen losse woorden op een laatste regel. `balance` verdeelt korte teksten over
   even lange regels, `pretty` voorkomt in lopende tekst dat er één woord
   overblijft. Browsers die dit niet kennen, breken gewoon zoals voorheen. */
h1, h2, h3, .claim, .eyebrow, .tagline { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
/* Prijslabels zijn kort; `balance` verdeelt ze over twee even lange regels
   in plaats van er één woord onder te laten hangen. */
dt { text-wrap: balance; }

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

/* ---------- 2. Topbar, woordmerk en navigatie ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(20px, 5vw, 56px);
  /* Lichter dan de crèmekleurige pagina eronder, net als de balk in de app:
     dat geeft scheiding zonder een harde rand nodig te hebben. */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

/* Woordmerk als lockup: "esthetics" hangt onder "Ardent", net als in de hero.
   De twee horen bij elkaar en worden daarom nooit naast elkaar gezet. */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  /* De twee regels staan gecentreerd ten opzichte van elkaar, net als in de hero.
     De padding-left op elke regel compenseert de spatiëring die achter de laatste
     letter blijft hangen; zonder dat staan ze allebei een tikje links. */
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.wordmark-name {
  font-size: var(--lockup-size-bar);
  font-weight: 600;
  letter-spacing: var(--lockup-track);
  text-transform: uppercase;
  color: var(--ink);
  padding-left: var(--lockup-track);
  margin-bottom: var(--lockup-gap); /* in em van de naam; zie .logo in de hero */
}
.wordmark-sub {
  font-size: calc(var(--lockup-size-bar) * var(--lockup-sub-scale));
  font-weight: 400;
  letter-spacing: var(--lockup-track-sub);
  padding-left: var(--lockup-track-sub);
  text-transform: lowercase;
  color: var(--muted);
}

.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px clamp(14px, 2.6vw, 30px); }
.nav > a,
.nav-group-label {
  font-size: .78rem;
  letter-spacing: .14em;
  /* Geen text-transform: de labels staan letterlijk in de HTML geschreven.
     Anders zou "An" als "an" renderen, en een naam hoort een hoofdletter te houden. */
  text-decoration: none;
  color: var(--muted);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav > a:hover,
.nav-group-label:hover { color: var(--ink); border-bottom-color: var(--accent); }
.nav > a[aria-current="page"],
.nav-group-label[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent-dark); }

/* -- Burgerknop. Alleen zichtbaar op smalle schermen (zie media query) en alleen
   met JavaScript; zonder JS valt de navigatie terug op een scrollbare balk. -- */
.nav-toggle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin: -10px -8px -10px 0;   /* ruim raakvlak zonder de balk hoger te maken */
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle-box { position: relative; width: 22px; height: 12px; }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  position: absolute;
  left: 0;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .22s ease, top .22s ease, opacity .15s ease;
}
.nav-toggle-bars { top: 5px; }                  /* middelste streep */
.nav-toggle-bars::before { content: ""; top: -5px; }
.nav-toggle-bars::after { content: ""; top: 5px; }
/* Open: de drie strepen worden een kruis. */
.topbar.nav-open .nav-toggle-bars { background: transparent; }
.topbar.nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.topbar.nav-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

.nav-toggle:focus-visible,
.nav-group-toggle:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 3px;
  border-radius: 6px;
}

/* -- Uitklapmenu "injectables" (botox + fillers).
   Desktop: het paneel opent bij hover én bij een klik op de chevron-knop. Die
   klik (met aria-expanded) is de betrouwbare route — hover alleen is wankel
   omdat de muis makkelijk uit het paneel valt. Op mobiel (media query onderaan)
   wordt het een accordeon binnen het burgerpaneel. -- */
.nav-group { position: relative; display: flex; align-items: center; padding-bottom: 8px; margin-bottom: -8px; }
.nav-group-label { display: inline-flex; align-items: center; }

/* Chevron-knop naast "injectables": opent en sluit het submenu. */
.nav-group-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 24px;
  margin-left: -3px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.nav-group-toggle::after {
  content: "";
  width: 6px; height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease, margin-top .2s ease;
}
.nav-group:hover .nav-group-toggle,
.nav-group.open .nav-group-toggle { color: var(--ink); }
.nav-group.open .nav-group-toggle::after { margin-top: 2px; transform: rotate(-135deg); }

.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 148px;
  padding: 9px 7px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: 0 16px 32px -14px rgba(43, 38, 34, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 15;
}
/* Onzichtbare brug tussen label en paneel: houdt de hover vast in de
   tussenruimte, de klassieke oorzaak van een flikkerend uitklapmenu. */
.submenu::before {
  content: "";
  position: absolute;
  left: -8px; right: -8px; top: -10px; height: 12px;
}
.nav-group:hover .submenu,
.nav-group.open .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(2px);
}
/* Toetsenbordtoegang zonder JavaScript: focus in de groep opent het paneel. */
body:not(.js) .nav-group:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(2px);
}
.nav .submenu a {
  font-size: .78rem;
  letter-spacing: .14em;
  text-decoration: none;
  color: var(--muted);
  padding: 8px 16px;
  border-bottom: 0;
  border-radius: 7px;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.nav .submenu a:hover,
.nav .submenu a:focus-visible {
  color: var(--ink);
  background: var(--accent-soft);
  border-bottom-color: transparent;
}
.nav .submenu a[aria-current="page"] {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-bottom-color: transparent;
}

/* Overslaan-link: alleen zichtbaar zodra hij focus krijgt via het toetsenbord. */
.skip {
  position: absolute;
  left: -9999px;
  z-index: 20;
}
.skip:focus {
  left: 16px;
  top: 16px;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--accent-dark);
  border-radius: 999px;
  font-size: .85rem;
}

/* ---------- 3. Hero (alleen index.html) ---------- */
.hero {
  position: relative;
  /* Laag genoeg dat de keuzes eronder al in beeld komen: de home is een
     vertrekpunt, geen paginavullend openingsbeeld. */
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px 72px;
  overflow: hidden;
}
/* Zachte blush-gloed achter het woordmerk, net als de splash van de app. */
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(620px, 88vw);
  height: min(620px, 88vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 143, 138, 0.20) 0%, rgba(201, 143, 138, 0.07) 45%, transparent 70%);
  animation: glow 4.2s ease-in-out infinite alternate;
}
@keyframes glow {
  from { opacity: .7; transform: translate(-50%, -50%) scale(.96); }
  to   { opacity: 1;  transform: translate(-50%, -50%) scale(1.04); }
}
.hero-inner { position: relative; }

/* Zelfde lockup als in de balk, alleen groter: identieke spatiëring en
   regelafstand. Het padding-left compenseert de spatiëring die achter de laatste
   letter blijft hangen — zonder dat staat een gecentreerde regel optisch links. */
.logo {
  margin: 0 0 var(--lockup-gap);
  font-size: var(--lockup-size-hero);
  font-weight: 600;
  line-height: 1; /* zelfde als .wordmark; zonder dit erft de hero 1.6 van body */
  letter-spacing: var(--lockup-track);
  padding-left: var(--lockup-track);
  text-transform: uppercase;
}

/* De letters komen één voor één op. Belangrijk: hier wordt alleen de
   doorzichtigheid geanimeerd, nooit de letterspatiëring. Een eerdere versie liet
   de tracking van .5em naar de eindwaarde lopen, en dan staat het woordmerk
   tijdens én na de animatie net anders uitgelijnd dan dat in de balk. */
.logo span { opacity: 0; animation: letter-in .5s ease both; }
.logo span:nth-child(1) { animation-delay: .10s; }
.logo span:nth-child(2) { animation-delay: .16s; }
.logo span:nth-child(3) { animation-delay: .22s; }
.logo span:nth-child(4) { animation-delay: .28s; }
.logo span:nth-child(5) { animation-delay: .34s; }
.logo span:nth-child(6) { animation-delay: .40s; }
@keyframes letter-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* "esthetics" hoort direct onder "ARDENT": samen vormen ze het woordmerk.
   Er mag dus niets tussen staan — de streep komt eronder, niet ertussen. */
.tagline {
  margin: 0;
  font-size: calc(var(--lockup-size-hero) * var(--lockup-sub-scale));
  /* Op heroformaat oogt hetzelfde gewicht zwaarder dan in de kleine balk.
     Een lichtere snede trekt de twee optisch weer gelijk. */
  font-weight: 200;
  line-height: 1;
  letter-spacing: var(--lockup-track-sub-hero);
  padding-left: var(--lockup-track-sub-hero);
  text-transform: lowercase;
  color: var(--muted);
  animation: fade-up .8s ease .55s both;
}

.rule {
  width: 150px;
  height: 1px;
  margin: 30px auto 0;
  background: var(--accent-dark);
  transform-origin: center;
  animation: rule-in .9s ease .75s both;
}
@keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* De claim is de enige zin in de hero: iets groter dan body-tekst, maar niet
   zo groot dat hij met het woordmerk gaat concurreren. */
.claim {
  max-width: 26rem;
  margin: 34px auto 36px;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--ink);
  animation: fade-up .8s ease .95s both;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.hero-actions .btn { animation: fade-up .8s ease 1.1s both; }
.hero-actions .btn + .btn { animation-delay: 1.2s; }

/* ---------- 4. Knoppen ---------- */
.btn {
  display: inline-block;
  padding: 13px 30px;
  border: 1px solid var(--accent-dark);
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-dark);
  background: transparent;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.btn:hover {
  background: var(--accent-dark);
  color: var(--bg);
  transform: translateY(-1px);
}
.btn-ghost {
  border-color: var(--border-strong);
  color: var(--muted);
}
.btn-ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

/* In een gecentreerd tekstblok volgt de knop direct op een alinea. Zonder deze
   marge plakt hij tegen de tekst aan. */
.wrap.center .btn { margin-top: 24px; }

/* ---------- 5. Secties en scroll-reveal ---------- */
.section { padding: clamp(64px, 10vw, 112px) clamp(20px, 5vw, 56px); }
/* Voor een sectie die direct onder een paginakop staat: die twee horen bij
   elkaar, dus daar hoeft niet de volle sectieruimte tussen. */
.section-tight { padding-top: clamp(16px, 2.5vw, 28px); }
.section.alt { background: var(--surface-raised); }

.wrap { max-width: 1040px; margin: 0 auto; }
.wrap.narrow { max-width: 640px; }
.wrap.center { text-align: center; }

.eyebrow {
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: .8em;
}
.section h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: .7em; }
.section p { color: var(--muted); }
.sub { margin-top: -.4em; margin-bottom: 2.4em; }

/* Scroll-reveal: zonder JS blijft alles gewoon zichtbaar. */
.reveal { opacity: 1; }
body.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
body.js .reveal.visible { opacity: 1; transform: none; }

/* ---------- 6. Paginakop en inhoudsopgave (subpagina's) ---------- */
.page-head {
  padding: clamp(56px, 8vw, 92px) clamp(20px, 5vw, 56px) clamp(28px, 4vw, 44px);
  text-align: center;
}
.page-head h1 {
  font-size: clamp(2rem, 5vw, 2.9rem);
  letter-spacing: .02em;
  margin-bottom: .5em;
}
.page-head .lede {
  max-width: 34rem;
  margin: 0 auto;
  color: var(--muted);
}
/* Twee ledes onder elkaar (bv. intro + "liever bellen") krijgen lucht ertussen. */
.page-head .lede + .lede {
  margin-top: 1.25em;
}

/* -- Inhoudsopgave --
   Bewust één slanke regel: hij blijft tijdens het scrollen in beeld, dus elke
   extra regel kost permanent leesruimte. Geen kaderlijnen om de links, geen
   zichtbare kop (de nav draagt al aria-label="Op deze pagina"), en nooit
   afbreken naar een tweede regel — past het niet, dan scrolt de rij horizontaal. */
.toc {
  position: sticky;
  top: var(--topbar-h);
  z-index: 5;
  padding: 0 clamp(20px, 5vw, 56px);
  background: rgba(250, 246, 240, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.toc ul {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(14px, 2.4vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.toc ul::-webkit-scrollbar { display: none; }
.toc a {
  display: inline-block;
  padding: 13px 0;
  font-size: .78rem;
  letter-spacing: .06em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.toc a:hover { color: var(--ink); }
/* `current` wordt door initToc gezet: markeert de sectie waar je nu bent. */
.toc a.current { color: var(--ink); border-bottom-color: var(--accent-dark); }

/* Anker-sprongen mogen niet onder de vaste balken verdwijnen. */
:target { scroll-margin-top: calc(var(--topbar-h) + var(--toc-h) + 12px); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- 7. Kaarten (doorverwijzing) ---------- */
.cards {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 34px;
}
.card {
  display: block;
  padding: 32px 30px;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .25s ease, transform .25s ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
/* De aanbevolen ingang op de keuzepagina: over de volle breedte en met een
   blush-rand, zodat wie niets weet vanzelf daar begint. */
.card-lead {
  grid-column: 1 / -1;
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--surface) 0%, var(--accent-soft) 320%);
}
.card h3 {
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 1em;
}
.card p { color: var(--muted); margin-bottom: 1.2em; }
.card-link {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.intro-note { margin-top: 30px; text-align: center; font-size: .9rem; }

/* ---------- 8. Tekstonderdelen ---------- */
.group-title {
  margin: 44px 0 18px;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.group-title:first-of-type { margin-top: 30px; }

/* Uitgelicht tekstblok, gezet als citaat in plaats van als kader: cursief, iets
   groter dan de lopende tekst en met lucht eromheen. Een kort blush-streepje
   erboven markeert het begin zonder dat er een doos omheen hoeft. */
.callout {
  position: relative;
  margin: 40px 0;
  padding: 26px 0 0;
  font-style: italic;
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  line-height: 1.65;
  color: var(--ink);
}
.callout::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 2px;
  background: var(--accent-dark);
}
/* Vetgedrukte woorden binnen het citaat blijven rechtop staan: dat leest
   rustiger dan cursief bovenop cursief. */
.callout strong { font-style: normal; }
.note-block { margin-top: 28px; font-size: .95rem; font-style: italic; }

.check { list-style: none; margin: 0; padding: 0; }
.check li {
  position: relative;
  padding: 0 0 16px 26px;
  margin-bottom: 16px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.check li:last-child { border-bottom: 0; margin-bottom: 0; }
.check li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.check strong { color: var(--ink); }

/* Genummerde stappen; het cijfer komt uit de teller, niet uit de markup. */
.steps { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: step; }
.steps li {
  position: relative;
  counter-increment: step;
  padding: 0 0 26px 52px;
  border-left: 1px solid var(--border);
  margin-left: 15px;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: -15px;
  top: -2px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: .8rem;
  color: var(--accent-dark);
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 50%;
}
.section.alt .steps li::before { background: var(--surface-raised); }
.steps h3 { font-size: 1rem; margin-bottom: .35em; }
.steps p { margin: 0; }
/* Meerdere alinea's binnen één stap: witruimte ertussen, anders plakken ze. */
.steps p + p:not(.note) { margin-top: 1em; }
/* Slotzin na een stappenlijst: uitlijnen met de tekstkolom van de stappen
   (marge 15px + padding 52px = 67px), zodat hij niet links uitspringt. */
.steps-outro { margin: 26px 0 0; padding-left: 67px; }

/* -- Intro met portret (index) --
   Portret links, tekst rechts. Het portret blijft meescrollen (sticky) zolang
   het verhaal ernaast doorloopt. Op mobiel stapelt alles. */
.intro-split {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: 48px;
  align-items: start;
  max-width: 900px;
}
/* De fototop lijnt uit met de kop "Hi, ik ben An.", niet met het kleine
   OVER-labeltje erboven. 1.75rem ≈ de hoogte van dat label plus zijn marge. */
.intro-portrait { margin: 1.75rem 0 0; }
.intro-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 26%; /* houdt het gezicht in beeld bij de crop */
  border-radius: 14px;
  display: block;
  box-shadow: 0 0 0 1px var(--border), 0 22px 45px -22px rgba(43, 38, 34, 0.55);
}
.intro-portrait figcaption {
  margin-top: 12px;
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}

/* -- FAQ: uitklapbare vragen zonder JavaScript (details/summary) -- */
.faq { margin-top: 4px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 20px 40px 20px 0;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-dark); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; border-radius: 3px; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent-dark);
  border-bottom: 2px solid var(--accent-dark);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-answer { padding: 0 0 22px; color: var(--muted); }
.faq-answer p { margin: 0 0 .8em; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: var(--accent-dark); }

/* -- Juridische pagina (privacyverklaring) -- */
.legal h2 { font-size: 1.2rem; margin: 1.9em 0 .5em; }
.legal h2:first-child { margin-top: 0; }
.legal ul { margin: 0 0 1.1em; padding-left: 1.2em; }
.legal li { margin: .3em 0; }
.legal a { color: var(--accent-dark); }

@media (max-width: 760px) {
  .intro-split { grid-template-columns: 1fr; gap: 26px; max-width: 640px; }
  .intro-portrait { position: static; max-width: 320px; margin-top: 0; }
}

/* -- Pijlers -- */
.pillars {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
/* Elk blok deelt de rijen van het raster (subgrid), zodat de tekst overal op
   dezelfde hoogte begint, ook als de ene titel één regel is en de andere twee. */
.pillars li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.pillars h3 { font-size: .95rem; margin-bottom: .5em; }
.pillars p { font-size: .9rem; margin: 0; }

/* ---------- 9. Prijstabellen ---------- */
.price-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px;
}
.price-card h3 {
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 1.4em;
}
.price-list { margin: 0; }
.price-list > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.price-list > div:last-child { border-bottom: 0; }
.price-list dt { flex: 1; font-size: .93rem; }
.price-list dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.note {
  margin: 18px 0 0;
  font-size: .82rem;
  font-style: italic;
  color: var(--muted);
}
.disclaimer {
  margin: 32px 0 0;
  font-size: .82rem;
  text-align: center;
  color: var(--muted);
}

/* ---------- 10. Contactformulier ---------- */
.form { margin-top: 8px; }

.field { margin: 0 0 20px; padding: 0; border: 0; }
.field label,
.field legend {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.optional { text-transform: none; letter-spacing: 0; font-size: .9em; opacity: .75; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 9px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.choices { display: flex; flex-wrap: wrap; gap: 10px; }
/* Specifieker dan `.field label`, anders erven de keuzes de hoofdletterstijl van de veldlabels. */
.field .choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 16px;
  font-size: .9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.field .choice:hover { border-color: var(--accent); }
.field .choice input { accent-color: var(--accent-dark); margin: 0; width: auto; }
.field .choice:has(input:checked) { border-color: var(--accent-dark); background: var(--accent-soft); }

/* De knop in het formulier deelt de stijl van .btn, maar niet de intro-animatie. */
.form .btn { cursor: pointer; font-family: inherit; }
.form .btn:disabled { opacity: .55; cursor: default; }

.form-status { margin: 16px 0 0; font-size: .9rem; min-height: 1.4em; }
.form-status.ok { color: var(--accent-dark); }
.form-status.error { color: #af5148; }

.privacy { margin-top: 14px; font-size: .78rem; opacity: .8; }

.signoff { margin-top: 1.4em; font-style: italic; }

.hours {
  margin-top: 34px;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: lowercase;
  text-align: center;
}

/* ---------- 11. Footer ---------- */
.footer {
  padding: 40px clamp(20px, 5vw, 56px) 52px;
  text-align: center;
  border-top: 1px solid var(--border);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-bottom: 26px;
}
.footer-nav a {
  font-size: .8rem;
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--muted);
  transition: color .2s ease;
}
.footer-nav a:hover { color: var(--accent-dark); }

.footer p { margin: 0 0 6px; font-size: .78rem; color: var(--muted); letter-spacing: .1em; }
.footer .fine {
  margin-top: 10px;
  max-width: 34rem;
  margin-inline: auto;
  letter-spacing: 0;
  font-size: .74rem;
  opacity: .8;
}
/* Onopvallende sneltoets naar de interne baliepagina. Bewust vrijwel onzichtbaar:
   alleen wie hem kent, klikt op het puntje onderaan. Geen SEO-waarde (nofollow,
   en de doelpagina staat op noindex). */
.balie-link {
  display: block;
  margin: 14px auto 0;
  width: 24px;
  color: var(--border-strong);
  text-decoration: none;
  font-size: 1.2rem;
  line-height: 1;
  text-align: center;
  opacity: .4;
  transition: opacity .2s ease, color .2s ease;
}
.balie-link:hover, .balie-link:focus-visible { opacity: 1; color: var(--accent); outline: none; }

/* ---------- 12. Media queries ---------- */

/* Op smalle schermen passen de menu-items niet naast het woordmerk. Ze
   verdwijnen achter een burgerknop die een net paneel open- en dichtklapt.
   Zonder JavaScript is er geen knop; dan valt de balk terug op een horizontaal
   scrollbare rij links (onderaan deze query), zodat alles bereikbaar blijft. */
@media (max-width: 860px) {
  .topbar {
    gap: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .wordmark { flex: 0 0 auto; }
  .wordmark-name { font-size: .68rem; }
  .wordmark-sub { font-size: .52rem; }

  /* ---- Met JavaScript: burgerknop + uitklappaneel ---- */
  body.js .nav-toggle { display: inline-flex; }

  body.js .nav {
    /* Paneel dat over de volle breedte onder de balk uitklapt. Het staat buiten
       de flow (absolute), zodat het over de pagina valt en de balk zelf één
       regel hoog blijft. */
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 4px clamp(20px, 5vw, 56px) 12px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 26px 40px -26px rgba(43, 38, 34, 0.5);
    max-height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
    /* Dicht: uitgeklapt in de DOM maar onzichtbaar en niet aanklikbaar. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  body.js .topbar.nav-open .nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Menu-items als brede, goed aan te tikken rijen. */
  body.js .nav > a,
  body.js .nav-group-label {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 2px;
    font-size: .95rem;
    letter-spacing: .05em;
    color: var(--ink);
    border-bottom: 1px solid var(--border);
  }
  body.js .nav > a:hover,
  body.js .nav-group-label:hover { border-bottom-color: var(--border); }
  body.js .nav > a[aria-current="page"],
  body.js .nav-group-label[aria-current="page"] {
    color: var(--accent-dark);
    border-bottom-color: var(--border);
  }
  body.js .nav > a:last-child { border-bottom: 0; }

  /* De injectables-groep wordt een accordeon: label links, chevron rechts,
     submenu eronder. */
  body.js .nav-group {
    position: static;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--border);
  }
  body.js .nav-group-label { flex: 1 1 auto; border-bottom: 0; }
  body.js .nav-group-toggle {
    width: 48px; height: 48px;
    margin: 0;
    color: var(--muted);
  }
  body.js .nav-group-toggle::after { width: 8px; height: 8px; }

  /* Submenu inklapbaar onder injectables, geen zwevend paneel. */
  body.js .nav .submenu {
    order: 3;
    flex-basis: 100%;
    position: static;
    display: none;
    flex-direction: column;
    min-width: 0;
    padding: 0 0 6px;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  body.js .nav .submenu::before { display: none; }
  body.js .nav-group.open .submenu { display: flex; }
  body.js .nav .submenu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px 0 22px;
    font-size: .9rem;
    letter-spacing: .05em;
    border-radius: 0;
    background: none;
    color: var(--muted);
  }
  body.js .nav .submenu a[aria-current="page"] {
    color: var(--accent-dark);
    background: none;
  }

  /* ---- Zonder JavaScript: terugval op een scrollbare rij links ---- */
  body:not(.js) .nav-toggle,
  body:not(.js) .nav-group-toggle { display: none; }
  body:not(.js) .nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  body:not(.js) .nav::-webkit-scrollbar { display: none; }
  body:not(.js) .nav > a,
  body:not(.js) .nav-group-label { white-space: nowrap; font-size: .74rem; }
  body:not(.js) .nav-group { display: contents; }
  body:not(.js) .submenu {
    position: static; display: contents;
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; box-shadow: none; border: 0; background: none;
    padding: 0; min-width: 0;
  }

  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  body.js .reveal { opacity: 1; transform: none; }
}