/* =============================================
   AyCare — Schoonheidssalon Baasrode
   Herbouw van de bestaande site in eigen code.
   Elke maat komt uit de berekende stijlen van de bronpagina, gemeten op
   drie indelingen zoals de bron ze heeft:
     desktop  >= 1280px   (vaste maten rond een kolom van 1170)
     tablet   992-1279px  (@media max-width: 1279px)
     telefoon <= 991px    (@media max-width: 991px; onder 768 een paar
                           kleinere kopmaten, zoals de bron)
   Elke sectie staat in zijn geheel op één plek, met de drie indelingen
   onder elkaar. Geen overschrijvende lagen achteraan.
   ============================================= */

/* ── Fonts ──────────────────────────────────── */
@font-face { font-family: 'Boska'; src: url('../assets/fonts/boska-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Boska'; src: url('../assets/fonts/boska-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Boska'; src: url('../assets/fonts/boska-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Boska'; src: url('../assets/fonts/boska-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Boska'; src: url('../assets/fonts/boska-300-italic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../assets/fonts/lato-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../assets/fonts/lato-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
/* Drie lettertypes die de bron maar op één plek gebruikt, daarom alleen de
   tekens die er staan: het bovenkopje van de productsectie, de streep in de
   behandelingskaarten en de downloadknop op de prijspagina. */
@font-face { font-family: 'Radio Canada Big'; src: url('../assets/fonts/radio-canada-big-600-sub.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cantarell'; src: url('../assets/fonts/cantarell-streep.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter-400-sub.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; }
/* Lokale fallback met de maten van het webfont (font-fallback.js op de tekst van
   alle pagina's): tot het lettertype binnen is, loopt de tekst al even breed en
   even hoog, zodat er bij de wissel niets verspringt. Lato 300 en 400 lopen
   anders, daarom een face per gewicht. Op Android ontbreekt Arial; daar valt
   de face weg en rendert system-ui zoals voorheen. */
@font-face { font-family: 'Lato Fallback'; font-weight: 100 349;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica');
  size-adjust: 94.1%; ascent-override: 104.9%; descent-override: 22.6%; line-gap-override: 0%; }
@font-face { font-family: 'Lato Fallback'; font-weight: 350 500;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica');
  size-adjust: 97.7%; ascent-override: 101%; descent-override: 21.8%; line-gap-override: 0%; }
/* Boska recht en cursief 300: niet het gemiddelde over alle tekens (90,9 en 86%)
   maar de waarde waarbij de minste koppen een regel winnen of verliezen, gezocht
   op alle pagina's van 320 tot 1920 per 20px: 15 blokken tegen 34. Cursief loopt
   smaller dan recht en heeft eigen faces, gemeten tegen Arial Italic. */
@font-face { font-family: 'Boska Fallback'; font-weight: 100 500;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica');
  size-adjust: 92.5%; ascent-override: 103.8%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: 'Boska Fallback'; font-weight: 600 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold'), local('Helvetica-Bold');
  size-adjust: 88.8%; ascent-override: 108.2%; descent-override: 28.2%; line-gap-override: 0%; }
@font-face { font-family: 'Boska Fallback'; font-style: italic; font-weight: 100 349;
  src: local('Arial Italic'), local('Arial-ItalicMT'), local('Liberation Sans Italic'), local('Helvetica Oblique'), local('Helvetica-Oblique');
  size-adjust: 87%; ascent-override: 110.3%; descent-override: 28.8%; line-gap-override: 0%; }
@font-face { font-family: 'Boska Fallback'; font-style: italic; font-weight: 350 500;
  src: local('Arial Italic'), local('Arial-ItalicMT'), local('Liberation Sans Italic'), local('Helvetica Oblique'), local('Helvetica-Oblique');
  size-adjust: 89.4%; ascent-override: 107.4%; descent-override: 28%; line-gap-override: 0%; }

/* ── Tokens ─────────────────────────────────── */
:root {
  --text: #080808;
  --white: #ffffff;
  /* Blush verdiept tot AA. De bron gebruikt #BF8F81: wit erop en als tekst op
     wit meet dat 2,81:1. #96685A is dezelfde tint, donkerder, en haalt 4,75:1.
     Overal waar de bron blush met tekst combineert, staat deze waarde. */
  --primary: #96685a;
  --primary-hover: #7a5044;
  --blush-licht: #bf8f81;      /* alleen decoratief, nooit met tekst erop */
  /* De bron kleurt de actieve link in het telefoonmenu zalmroze (#F59B90,
     2,11:1 op wit). Zelfde tint, donker genoeg voor AA: 4,61:1. */
  --actief: #b65a4d;
  --cream: #f5f0ed;
  --sand: #ecd9c1;
  --veldrand: rgba(51, 45, 40, 0.2);

  /* themafont-bewust: 1-op-1-herbouw van de bestaande site, die Lato gebruikt */
  --font: 'Lato', 'Lato Fallback', system-ui, -apple-system, sans-serif;
  --font-heading: 'Boska', 'Boska Fallback', Georgia, 'Times New Roman', serif;

  --radius: 10px;
  --radius-lg: 30px;
  --max-width: 1200px;         /* de basiscontainer van de bron, met 15px binnenrand */
  --nav-height: 101px;
  --transition: 0.25s ease;
}
@media (max-width: 991px) {
  :root { --nav-height: 82px; }
}

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

html {
  /* clip, niet hidden: hidden op html/body sloopt position:sticky */
  overflow-x: clip;
}
/* De mediaquery staat OM de regel: ScrollTrigger schrijft de berekende waarde
   inline op <html>, en een inline-waarde verslaat elke latere @media-regel. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}

/* De bron zet geen marges op alinea's; de ruimte zit in de gaps van de blokken. */
p { margin: 0; }

a { color: inherit; text-decoration: none; }

[id] { scroll-margin-top: calc(var(--nav-height) + 1rem); }

/* Basiscontainer van de bron: 1200 breed met 15px binnenrand, dus inhoud van
   1170 (x=135 op 1440). Op tablet 20px binnenrand, op de telefoon ook. */
.bc {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 15px;
}
@media (max-width: 1279px) {
  .bc { padding-inline: 20px; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--text);
  color: var(--white);
  padding: 12px 20px;
  font-size: 16px;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 2px;
}
.footer :focus-visible,
.hero :focus-visible,
.page-banner :focus-visible,
.nav:not(.nav--wit) :focus-visible { outline-color: var(--white); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Knoppen ────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--white);
  font-family: var(--font);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 18px 24px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--transition);
}
@media (hover: hover) {
  .btn:hover { background: var(--primary-hover); }
}
/* Tablet en telefoon: 16px, dus 55 hoog. De bron zet het label op de
   telefoon in crème; crème op deze blush haalt maar 4,20:1, wit 4,75:1. */
@media (max-width: 1279px) {
  .btn { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATIE
   Vast bovenaan. Op pagina's met een banner doorzichtig met witte links en
   een vervaging van 10px; na de eerste scrolbeweging wit (.nav--wit, zie
   components.js). Desktop en tablet: links | logo | links. Telefoon: logo
   en het menu-icoon van de bron; het menu klapt de witte balk zelf open.
   ═══════════════════════════════════════════════════════════ */
#site-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.nav {
  position: relative;
  height: var(--nav-height);
  padding-top: 24px;
  background: rgba(255, 255, 255, 0);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 0.3s ease;
}
.nav--wit,
.nav.is-open { background: var(--white); }

/* Links 40%, logo 20%, links 40%: zo verdeelt de bron de balk. */
.nav-balk {
  display: flex;
  align-items: center;
  height: 52px;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 15px;
}
.nav-links {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links--rechts { justify-content: flex-end; }

.nav-link {
  display: block;
  color: var(--white);
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.5px;
  /* 24 + 2x10 = 44px raakvlak, de negatieve marge houdt de balk op zijn maat */
  padding-block: 10px;
  margin-block: -10px;
  transition: color 0.3s ease;
}
.nav--wit .nav-link { color: var(--text); }

.nav-logo {
  flex: 0 0 20%;
  display: flex;
  justify-content: center;
}
/* Het logobestand van de bron heeft een witte achtergrond; daardoor staat het
   op de doorzichtige balk als een wit plaatje met afgeronde hoeken. */
.nav-logo img {
  width: 169px;
  height: 70px;
  background: var(--white);
  border-radius: 4px;
}

/* Twee dunne lijnen links en rechts van het logo, alleen op de doorzichtige balk */
.nav-lijnen {
  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
  height: 1px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.nav-lijnen span {
  width: 40%;
  background: rgba(255, 255, 255, 0.25);
}
.nav--wit .nav-lijnen { opacity: 0; }

.menu-knop,
.menu-paneel { display: none; }

@media (max-width: 1279px) {
  .nav-balk { max-width: none; padding-inline: 20px; }
  /* min-height: 2x12,4 + 19,2 rondt in de lay-out af op 43,98 */
  .nav-link { font-size: 16px; line-height: 19.2px; padding-block: 12.4px; margin-block: -12.4px; min-height: 44px; }
}

@media (max-width: 991px) {
  .nav {
    height: auto;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .nav-balk { padding-inline: 20px; justify-content: space-between; }
  .nav-links,
  .nav-lijnen { display: none; }
  .nav-logo { flex: none; }

  /* Icoon van 27x16 op de rand van de 20px-marge, raakvlak 44x44. */
  .menu-knop {
    display: block;
    position: relative;
    width: 44px;
    height: 44px;
    margin-right: -8.5px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .menu-icoon {
    position: absolute;
    right: 8.5px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .menu-icoon--wit { opacity: 1; }
  .nav--wit .menu-icoon--wit { opacity: 0; }
  .nav--wit .menu-icoon--donker { opacity: 1; }
  .nav.is-open .menu-icoon--wit,
  .nav.is-open .menu-icoon--donker { opacity: 0; }
  .nav.is-open .menu-icoon--sluit { opacity: 1; }

  /* Het paneel groeit van 0 naar zijn inhoud. Maten zoals de bron op 390:
     eerste link op y=97, knop van 188x55. Rijen van 44 in plaats van 35 (tikdoel,
     zoals de footer); de eerste link staat op dezelfde plek, knop en balk
     zakken 31,5px. */
  .menu-paneel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.3s ease, visibility 0s linear 0.3s;
  }
  .nav.is-open .menu-paneel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.3s ease, visibility 0s;
  }
  .menu-paneel-binnen {
    overflow: hidden;
    min-height: 0;
    padding-inline: 20px;
  }
  .menu-links {
    list-style: none;
    margin: 17.5px 0 0;
    padding: 0;
  }
  .menu-link {
    display: flex;
    align-items: center;
    height: 44px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.5px;
    color: var(--text);
  }
  .menu-link.active { color: var(--actief); }
  .menu-cta {
    width: 188px;
    height: 55px;
    margin: 23px 0 25px;
    padding: 0 24px;
  }
}
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .menu-paneel,
  .nav.is-open .menu-paneel { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 350px 30px 120px;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* Sluier: de bron heeft er geen. Gemeten op de render valt daar 66% van het
   vlak achter de witte kop onder 3:1, wat grote tekst minstens vraagt. Alleen
   achter de tekst een zachte schaduw; de rest van de foto blijft zoals bij haar.
   Gemeten per pixel op de render: 0% van het tekstvlak onder 3:1. */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 48% 46% at 76% 64%, rgba(8, 8, 8, 0.5) 0%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0) 100%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1224px;
}
.hero-paneel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
}
.hero h1 {
  font-size: 152px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--white);
}
.hero-sub {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 35px;
  line-height: 1.2;
  color: var(--white);
}

@media (max-width: 1279px) {
  .hero { padding: 300px 30px 80px; }
  /* De tekst neemt hier een groter deel van de foto in: ruimere sluier. */
  .hero-media::after {
    background: radial-gradient(ellipse 60% 52% at 70% 63%, rgba(8, 8, 8, 0.52) 0%, rgba(8, 8, 8, 0.4) 50%, rgba(8, 8, 8, 0) 100%);
  }
  .hero-inner { max-width: none; }
  .hero h1 { font-size: 125px; }
  .hero-sub { font-size: 32px; }
}

/* Telefoon: kop en subregel in een afgerond, licht getint paneel. De bron
   tint het met 15% zwart en blur(3px); daarop haalt 46,6% van het vlak achter
   de kop geen 3:1. Zelfde paneel, iets dieper getint. Gecentreerd: de bron zet
   het vanaf 431 breed tegen de rechterrand (keuze Deniz 22-10). */
@media (max-width: 991px) {
  .hero { padding: 190px 20px 30px; justify-content: center; }
  .hero-media::after { content: none; }
  .hero-inner { max-width: 390px; }
  .hero-paneel {
    align-items: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: 20px;
    text-align: center;
  }
  .hero h1 { font-size: 73px; }
  .hero-sub { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════
   OVER AYCARE
   ═══════════════════════════════════════════════════════════ */
.s-over { padding-block: 130px; }
.s-over-bc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
.over-kop {
  width: 100%;
  max-width: 740px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}
.script-title {
  font-size: 48px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.2;
}
.lede {
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
}

.about-grid {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
}
.about-figure {
  flex: 1 1 0;
  /* De foto is 581 breed en steekt op tablet links uit zijn kolom, zoals in de
     bron; zonder min-width 0 duwt hij de tekstkolom opzij. */
  min-width: 0;
  display: flex;
  justify-content: center;
}
.about-figure img {
  width: 581px;
  max-width: none;
  height: 805px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.about-copy {
  flex: 0 0 386px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 50px;
  text-align: right;
}
.about-round {
  width: 386px;
  height: 419px;
  object-fit: cover;
  border-radius: 105px;
}
.about-tekst {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-tekst h3 { font-size: 36px; }
.about-tekst p { font-size: 16px; line-height: 24px; }

@media (max-width: 1279px) {
  .s-over { padding-block: 80px; }
  .s-over-bc { gap: 60px; }
  .lede { font-size: 18px; line-height: 27px; }
  .about-grid { gap: 80px; }
  .about-figure img { height: 801px; }
  .about-copy { flex-basis: 430px; padding-right: 30px; }
  .about-round { width: 320px; }
  .about-tekst { width: 400px; }
}

/* Telefoon: de ronde sfeerfoto valt weg, alles gecentreerd. De bron laat het
   tweekolomsblok hier 84px boven en onder uit zijn kader lopen; de zichtbare
   maten zijn wat telt: beeld 32px onder de inleiding, tekst 40px onder het
   beeld, en de volgende sectie begint vlak onder de knop. */
@media (max-width: 991px) {
  /* De bron geeft deze sectie op de telefoon een vaste hoogte van 1125px en
     centreert de inhoud erin; het tweekolomsblok is 648 hoog en laat beeld en
     tekst er boven en onder uit lopen. Zo nagebouwd, dan vallen alle
     tussenruimtes op elke breedte samen met de bron. */
  .s-over {
    height: 1125px;
    padding-block: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .s-over-bc { flex-shrink: 0; gap: 77px; }
  .over-kop { max-width: 560px; }
  .about-grid {
    flex-direction: column;
    justify-content: center;
    height: 648px;
    gap: 0;
  }
  .about-figure { flex-shrink: 0; padding-block: 40px; }
  .about-copy { flex-shrink: 0; }
  .about-figure img { width: 315px; height: 410px; }
  .about-copy {
    flex-basis: auto;
    width: 100%;
    max-width: 560px;
    padding-right: 0;
    align-items: center;
    gap: 30px;
    text-align: center;
  }
  .about-round { display: none; }
  .about-tekst { width: 100%; }
}
@media (max-width: 767px) {
  .about-tekst h3 { font-size: 32px; }
}

/* ═══════════════════════════════════════════════════════════
   ONZE DIENSTEN (tekst links, halve boog rechts)
   ═══════════════════════════════════════════════════════════ */
.s-diensten {
  position: relative;
  padding-block: 130px;
}
.arch-media {
  position: absolute;
  top: 0;
  right: 0;
  width: 619px;
  height: 100%;
}
.arch-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 300px 0 0 300px;
}
.split-body {
  position: relative;
  width: 597px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
}
.split-tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.pill {
  display: inline-block;
  background: var(--sand);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 10px;
}
.split-tekst h2 { font-size: 48px; max-width: 88%; }

@media (max-width: 1279px) {
  .s-diensten { padding-block: 80px; }
  .arch-media { width: 45%; }
  .split-body { width: 50%; }
}

@media (max-width: 991px) {
  .s-diensten {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 40px;
    padding-block: 75px 80px;
  }
  .arch-media { position: static; width: 95%; height: 400px; }
  .split-body {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    align-items: center;
    gap: 30px;
    text-align: center;
  }
  .s-diensten > .bc { width: 100%; }
  .split-tekst { align-items: center; }
}

/* ═══════════════════════════════════════════════════════════
   ONZE BEHANDELINGEN (homepage)
   ═══════════════════════════════════════════════════════════ */
.s-behandelingen { padding-block: 100px 130px; }
.s-behandelingen .bc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
.section-title {
  font-size: 48px;
  text-align: center;
}
.treatments {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* alle rijen even hoog als de hoogste kaart, zoals het raster van de bron */
  grid-auto-rows: 1fr;
  gap: 30px;
  align-items: start;
}
.treatment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-inline: 10px;
  text-align: center;
}
.treatment-icon {
  width: 84px;
  height: 84px;
  background: var(--sand);
  border-radius: 100px;
  display: grid;
  place-items: center;
}
.treatment-icon img { width: 48px; height: 48px; }
.treatment-badge img {
  width: 100px;
  height: 84px;
  object-fit: cover;
  border-radius: 100px;
}
.treatment h3 { font-size: 36px; }
.treatment p { font-size: 20px; line-height: 30px; }

@media (max-width: 1279px) {
  .s-behandelingen { padding-block: 80px; }
  .s-behandelingen .bc { gap: 60px; }
  .treatment p { font-size: 18px; line-height: 27px; }
}
@media (max-width: 991px) {
  .s-behandelingen { padding-block: 0 80px; }
  .s-behandelingen .bc { gap: 40px; }
  .section-title { font-size: 42px; }
  .treatments { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 767px) {
  .section-title { font-size: 36px; }
  .treatment h3 { font-size: 32px; }
}

/* ═══════════════════════════════════════════════════════════
   PRODUCTEN (crème band, collage links, paneel rechts)
   ═══════════════════════════════════════════════════════════ */
.products {
  position: relative;
  background: var(--cream);
  padding: 50px 30px;
  overflow: hidden;
}
.products-media {
  position: absolute;
  inset: -8px -14px;
}
.products-media img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px); }

/* De zandkleurige golflijn van de bron, twee keer gedraaid in de hoeken. */
.golf {
  position: absolute;
  width: 240px;
  height: 352px;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}
.golf--links { left: -120px; top: -29px; transform: rotate(59deg); }
.golf--rechts { right: -114px; bottom: -118px; transform: rotate(189deg); }

.products-inner {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.collage {
  position: relative;
  flex: 0 0 492px;
  height: 669px;
}
/* De bron rekt deze twee foto's uit tot hun vak (object-fit: fill), per
   indeling anders. Hier ook, vanuit dezelfde originelen. */
.collage img { position: absolute; max-width: none; object-fit: fill; }
.collage-back { left: 157px; top: 0; width: 335px; height: 555px; }
.collage-front { left: 0; bottom: 0; width: 256px; height: 414px; }

.products-panel {
  flex: 0 0 559px;
  background: rgba(245, 240, 237, 0.9);
  border-radius: var(--radius);
  padding: 50px 15px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.eyebrow {
  white-space: nowrap;
  font-family: 'Radio Canada Big', var(--font);
  font-size: 20px;
  font-weight: 600;
  line-height: 34px;
  text-transform: uppercase;
  /* Bron: #BF8F81 (2,32:1 op het crèmepaneel). Deze haalt 4,70:1. */
  color: #8c6154;
}
.products-panel h2 { font-size: 48px; }
.products-panel p:not(.eyebrow) { font-size: 22px; line-height: 33px; }

@media (max-width: 1279px) {
  .products { padding: 80px 15px; }
  .products-inner { max-width: none; flex-direction: column; gap: 60px; }
  .products-panel {
    order: -1;
    flex: none;
    width: 80%;
    align-items: center;
    gap: 30px;
    text-align: center;
  }
  .collage {
    flex: none;
    width: 80%;
    height: auto;
    aspect-ratio: 856 / 1163;
  }
  .collage-back { left: auto; right: 0; width: 61%; height: auto; aspect-ratio: 335 / 555; }
  .collage-front { width: 53%; height: 581px; }
}
@media (max-width: 991px) {
  .products { padding: 30px 20px; }
  .products-inner { gap: 32px; }
  .products-panel { width: 100%; gap: 16px; }
  .products-panel h2 { font-size: 36px; }
  .collage { width: 100%; }
  .collage-back { width: 67%; }
  .collage-front { width: 51%; height: 311px; }
}
@media (max-width: 767px) {
  .products-panel h2 { font-size: 32px; }
}

/* ═══════════════════════════════════════════════════════════
   DIT BEN IK
   Desktop: portret links met de afsluiting eronder, kop en opening rechts.
   Tablet en telefoon: eerst de kop en opening, dan het portret.
   ═══════════════════════════════════════════════════════════ */
.s-persoonlijk { padding: 110px 30px; }
.personal {
  max-width: 1308px;
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  gap: 100px;
}
/* Het portret vult wat de kolom overlaat boven de slotalinea's. */
.personal-left {
  order: -1;
  flex: 0 1 576px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  border-radius: 12px;
  overflow: hidden;
}
.personal-portret {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.personal-portret img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.personal-outro p,
.personal-right p {
  font-size: 20px;
  line-height: 30px;
}
.personal-right {
  flex: 0 1 632px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.personal-right h2 {
  font-size: 60px;
  line-height: 1.2;
  color: var(--primary);
}
.personal-alineas {
  width: 570px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.personal-extra {
  width: 100%;
  height: 727px;
  object-fit: cover;
  border-radius: 12px;
}

@media (max-width: 1279px) {
  .s-persoonlijk { padding: 80px 30px; }
  .personal { flex-direction: column; align-items: center; gap: 50px; }
  .personal-left { order: 0; flex: none; width: 80%; height: 830px; }
  .personal-right { flex: none; width: 80%; }
  .personal-right h2 { max-width: 550px; }
  .personal-alineas { width: 100%; gap: 20px; }
  .personal-extra { height: 575px; object-position: 50% 100%; }
}
@media (max-width: 991px) {
  .s-persoonlijk { padding: 30px 20px; }
  .personal { align-items: flex-start; gap: 40px; }
  .personal-left { width: 100%; height: 790px; }
  .personal-right { width: 100%; max-width: 679px; gap: 20px; }
  .personal-right h2 { font-size: 36px; max-width: none; }
  .personal-alineas { max-width: 570px; gap: 15px; }
  .personal-extra { height: 485px; }
}
@media (max-width: 767px) {
  .personal-right h2 { font-size: 32px; }
}

/* ═══════════════════════════════════════════════════════════
   CTA-BAND
   ═══════════════════════════════════════════════════════════ */
.cta {
  position: relative;
  padding-block: 130px;
  overflow: hidden;
}
.cta-media { position: absolute; inset: 0; }
.cta-media img { width: 100%; height: 100%; object-fit: cover; filter: blur(1px); }
.cta-kader {
  position: relative;
  padding: 10px;
  /* rand zonder eigen ruimte, zoals de ::after-rand van de bron */
  box-shadow: inset 0 0 0 1px var(--white);
}
.cta-panel {
  background: rgba(255, 255, 255, 0.9);
  padding: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  text-align: center;
}
.cta-tekst {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cta-panel h2 { font-size: 48px; }
.cta-panel p { font-size: 20px; line-height: 30px; }

@media (max-width: 1279px) {
  .cta { padding-block: 80px; }
  .cta-panel { padding: 60px 20px; }
}
@media (max-width: 991px) {
  .cta-panel { gap: 30px; }
  .cta-panel h2 { font-size: 26px; }
  .cta-panel p { font-size: 18px; line-height: 27px; }
}

/* ═══════════════════════════════════════════════════════════
   PAGINABANNER (subpagina's met een foto of kleurvlak)
   ═══════════════════════════════════════════════════════════ */
.page-banner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 230px 0 150px;
  overflow: hidden;
  text-align: center;
}
.page-banner-media { position: absolute; inset: 0; }
.page-banner-media img { width: 100%; height: 100%; object-fit: cover; }
/* Sluier: de bron heeft er geen. Zonder meet de witte tekst 1,89:1 gemiddeld
   op behandelingen, met een plek van 1,00:1 in de inleiding. */
.page-banner-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(115% 85% at 50% 42%, rgba(8, 8, 8, 0.56) 0%, rgba(8, 8, 8, 0.40) 58%, rgba(8, 8, 8, 0.22) 100%);
  pointer-events: none;
}
/* Onderrand: de witte boog van de bron (zelfde PNG), 100px hoog. */
.page-banner--boog::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background: url('../assets/images/boog-wit.png') 50% 100% / 100% 100% no-repeat;
  z-index: 1;
}
/* Juridische pagina's: een effen blush vlak in plaats van een foto. */
.page-banner--kleur { background: var(--primary); }

.page-banner-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  padding-inline: 15px;
  display: flex;
  justify-content: center;
}
.page-banner-tekst {
  width: 650px;
  padding: 10px;
  border-radius: 10px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.page-banner h1 {
  font-size: 72px;
  line-height: 1.2;
  color: var(--white);
}
.page-banner-lede {
  font-size: 20px;
  line-height: 30px;
  color: var(--white);
}

@media (max-width: 1279px) {
  .page-banner { padding: 180px 0 90px; }
  .page-banner-inner { padding-inline: 20px; }
  .page-banner h1 { font-size: 62px; }
  .page-banner-lede { font-size: 18px; line-height: 27px; }
}
@media (max-width: 991px) {
  .page-banner { padding: 140px 0 80px; }
  .page-banner--behandelingen { padding-top: 170px; }
  .page-banner--behandelingen .page-banner-inner { padding-inline: 30px; }
  .page-banner-tekst { width: 100%; }
  .page-banner h1 { font-size: 52px; }
  .page-banner--behandelingen h1 { font-size: 42px; }
  /* De bron schaalt de boog hier op breedte in plaats van uit te rekken:
     een ondiepe boog van ~30px op een telefoon. */
  .page-banner--boog::after { background-size: contain; }
}
@media (max-width: 767px) {
  .page-banner--behandelingen h1 { font-size: 36px; }
}

/* ═══════════════════════════════════════════════════════════
   BEHANDELINGEN-OVERZICHT (kaarten)
   ═══════════════════════════════════════════════════════════ */
.s-cards { padding-block: 130px; }
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}
.card {
  position: relative;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
/* Pilvorm: rond boven en onder, rechte zijkanten (radius 300 op 300x367). */
.card-media {
  width: 300px;
  height: 367px;
  border-radius: 300px;
  overflow: hidden;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
@media (hover: hover) {
  .card:hover .card-media img { transform: scale(1.05); }
}
.card-tekst {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Titel en streep naast elkaar, zoals de bron: een "-" in Cantarell op 40px. */
.card h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 24px;
  line-height: 28.8px;
}
.card h2::after {
  content: '-';
  font-family: 'Cantarell', var(--font);
  font-size: 40px;
  font-weight: 400;
  line-height: 48px;
}
.card-sub {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}
.card-sub + p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 24px;
}
.card-link {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: var(--primary);
  padding-bottom: 4px;
  /* onderlijn zonder eigen ruimte, zoals de ::after-rand van de bron */
  box-shadow: inset 0 -1px 0 currentColor;
  transition: color var(--transition);
}
/* In de bron is de hele kaart de link (foto, titel, tekst): het raakvlak van
   "Lees meer" ligt daarom over de volledige kaart. */
.card-link::before { content: ''; position: absolute; inset: 0; }
@media (hover: hover) {
  .card-link:hover { color: var(--primary-hover); }
}

@media (max-width: 1279px) {
  .s-cards { padding-block: 80px; }
  .card-link { font-size: 16px; line-height: 19.2px; }
}
@media (max-width: 991px) {
  .card-media { height: 340px; }
}

/* ═══════════════════════════════════════════════════════════
   GALERIJ
   ═══════════════════════════════════════════════════════════ */
.s-galerij {
  padding-block: 130px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.titelblok {
  width: 100%;
  max-width: 740px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}
.titelblok h2 { font-size: 48px; }
.titelblok h2 em { font-weight: 400; font-style: italic; }
.titelblok p { font-size: 16px; line-height: 24px; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
}
.gallery-grid a {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  line-height: 0;
}
.gallery-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.6s ease;
}
@media (hover: hover) {
  .gallery-grid a:hover img { transform: scale(1.04); }
}

@media (max-width: 1279px) {
  .s-galerij { padding-block: 80px; }
}
@media (max-width: 991px) {
  .titelblok { max-width: 560px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════════ */
.s-contact { padding: 130px 30px 0; }
.contact-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 100px;
}
.contact-intro {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.contact-tekst {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-intro h2 { font-size: 48px; }
.contact-intro h2 em { font-weight: 300; font-style: italic; }
.contact-intro p { font-size: 16px; line-height: 24px; }

.contact-links {
  list-style: none;
  margin: -6px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* de bron: rijen van 32px met 20px ertussen. Hier 44px hoge rijen met 8px
     ertussen: zelfde ritme van 52px, maar een raakvlak van 44px. */
  gap: 8px;
}
.contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  min-height: 44px;
  font-size: 20px;
  line-height: 30px;
  transition: color var(--transition);
}
.contact-links img { width: 32px; height: 32px; flex: none; }
@media (hover: hover) {
  .contact-links a:hover { color: var(--primary); }
}

.contact-form {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.form-velden {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-row { display: flex; gap: 10px; }
.form-row > * { flex: 1 1 0; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  display: block;
  width: 100%;
  height: 56px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--veldrand);
  border-radius: 0;
  padding: 16px 18px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-form textarea { height: 200px; resize: vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(8, 8, 8, 0.6); opacity: 1; }
/* Keuzelijst met het pijltje van de bron, 18px van de rechterrand. */
.contact-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 48px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23080808' stroke-opacity='.6' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center;
}
.contact-form select:has(option[value=""]:checked) { color: rgba(8, 8, 8, 0.6); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(150, 104, 90, 0.2);
  outline: none;
}
.contact-form .btn {
  width: 100%;
  height: 60px;
  border: 1px solid var(--sand);
}
.form-error input,
.form-error textarea,
.form-error select { border-color: #c0392b; }
.form-status { font-size: 16px; }
.form-status:empty { display: none; }
.form-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--cream);
}
.form-notice svg { flex: none; margin-top: 2px; color: var(--primary); }
.checkmark-svg { width: 52px; height: 52px; margin: 0 auto; stroke: #3c8a37; }

/* De kaart loopt over de volle breedte, 350 hoog, 50px onder het formulier. */
.s-kaart { padding-top: 50px; }
.kaart iframe {
  display: block;
  width: 100%;
  height: 350px;
  border: 0;
}

@media (max-width: 1279px) {
  .s-contact { padding-top: 80px; }
  .contact-grid { gap: 60px; }
  .contact-links a { font-size: 18px; line-height: 27px; }
  .contact-form .btn { height: 55px; }
}
@media (max-width: 991px) {
  .contact-grid { flex-direction: column; align-items: stretch; gap: 40px; }
  .contact-intro { align-items: center; text-align: center; }
  .contact-tekst { max-width: 560px; }
  .contact-intro h2 { font-size: 28px; }
  .contact-links { align-items: center; margin: 0; gap: 20px; }
  .contact-links a {
    flex-direction: column;
    gap: 15px;
    min-height: 0;
    white-space: nowrap;
  }
  .contact-links li:nth-child(-n+3) img { width: 40px; height: 40px; }
  .form-row { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════
   PRIJZEN
   ═══════════════════════════════════════════════════════════ */
.s-prijzen { padding-block: 130px 0; }
.s-prijzen .bc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}
.s-prijzen .titelblok h2 { font-weight: 300; font-style: italic; }

.prijs-carrousel {
  position: relative;
  width: 450px;
  height: 825px;
}
.prijs-spoor {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius);
}
.prijs-spoor::-webkit-scrollbar { display: none; }
.prijs-spoor img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: center;
  border-radius: var(--radius);
}
/* Knop van 44x44 (tikdoel), het zichtbare rondje 40x40 zoals de bron:
   de achtergrond blijft binnen 2px padding, het midden staat waar het stond. */
.prijs-knop {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  display: grid;
  place-items: center;
  padding: 2px;
  background: var(--primary);
  background-clip: content-box;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--transition);
}
.prijs-knop img { width: 40px; height: 40px; }
.prijs-knop--vorige { left: -12px; }
.prijs-knop--volgende { right: -12px; }
@media (hover: hover) {
  .prijs-knop:hover { background: var(--primary-hover); }
}
/* Het pilletje met de bolletjes staat in de bron 10px boven de onderrand,
   gecentreerd: left 50% plus translateX(-50%) (de lagenboom toont alleen de
   left). Alle bolletjes even licht, zoals daar. */
.prijs-punten {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  height: 30px;
  display: flex;
  align-items: center;
  padding-inline: 5px;
  background: var(--primary);
  border-radius: 162px;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
.prijs-punt {
  position: relative;
  /* 24 breed met -2px aan elke kant: zelfde plaats als de 20px-vakjes van de
     bron, maar een raakvlak van minstens 24x44 (WCAG 2.5.8). */
  width: 24px;
  height: 30px;
  margin-inline: -2px;
  padding: 10px 7px;
  background: none;
  border: 0;
  cursor: pointer;
}
.prijs-punt::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cream);
}
/* Raakvlak 24x44 per bolletje. De bolletjes staan 20px uit elkaar, dus vier
   vlakken van 24 passen alleen als de buitenste naar buiten uitwijken: samen
   96px rond de rij, elk bolletje volledig in zijn eigen vlak. z-index houdt de
   vlakken boven de knopdozen van de buren (anders wint de volgende knop de
   overlap en blijft er 20 over). Niets verschuift in beeld. */
.prijs-punt::after { content: ''; position: absolute; top: -7px; bottom: -7px; left: 0; right: 0; z-index: 1; }
.prijs-punt:nth-child(1)::after { left: -6px; right: 6px; }
.prijs-punt:nth-child(2)::after { left: -2px; right: 2px; }
.prijs-punt:nth-child(3)::after { left: 2px; right: -2px; }
.prijs-punt:nth-child(4)::after { left: 6px; right: -6px; }

.prijs-download a {
  display: inline-flex;
  align-items: center;
  padding: 10px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50px;
  font-family: 'Inter', var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  transition: background-color var(--transition);
}
@media (hover: hover) {
  .prijs-download a:hover { background: var(--primary-hover); }
}

@media (max-width: 1279px) {
  .s-prijzen { padding-top: 80px; }
  .s-prijzen .bc { gap: 60px; }
}
@media (max-width: 991px) {
  .s-prijzen .bc { gap: 40px; }
  .prijs-carrousel { width: 100%; max-width: 350px; height: 600px; }
}

/* ═══════════════════════════════════════════════════════════
   JURIDISCHE PAGINA'S
   ═══════════════════════════════════════════════════════════ */
.s-legal { padding-top: 130px; }
.legal-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.legal-body p,
.legal-body li { font-size: 16px; line-height: 24px; }
.legal-body strong { font-weight: 400; }
.legal-body ul { margin: 0; padding-left: 27.84px; }
.legal-body a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1279px) {
  .s-legal { padding-top: 80px; }
}
@media (max-width: 991px) {
  .legal-body { max-width: 560px; margin-inline: auto; }
}

/* ═══════════════════════════════════════════════════════════
   BEHANDELINGSPAGINA (subpagina)
   ═══════════════════════════════════════════════════════════ */
.sub-kop {
  background: var(--cream);
  padding: 230px 0 50px;
  text-align: center;
}
.sub-kop .bc { display: flex; flex-direction: column; }
.sub-kop h1 { font-size: 72px; }
.sub-kop p {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.2;
}
/* Het brede beeld staat half op de crème band, half eronder. */
.sub-beeld { position: relative; }
.sub-beeld::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  background: url('../assets/images/band-creme.svg') 50% 50% / cover no-repeat;
}
.sub-beeld .bc { position: relative; }
.sub-beeld img {
  width: 100%;
  /* Bron: 1170x480 op desktop, op tablet dezelfde verhouding maar nooit
     lager dan 440 (1160x476 op 1279, 1060x440 op 1100). */
  height: auto;
  aspect-ratio: 1170 / 480;
  min-height: 440px;
  object-fit: cover;
  border-radius: 300px;
}
.s-sub { padding-block: 130px; }
.prose {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.prose p { font-size: 16px; line-height: 24px; }
.prose strong { font-weight: 400; }

/* FAQ, 50px onder de tekst. De bron klapt elk antwoord open onder zijn vraag;
   hier staan alle antwoorden open (huisregel), met de maten van de open stand
   van de bron: 30px tussen de vragen, 20px van vraag tot antwoord en van
   antwoord tot de lijn. */
.faq {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.faq-kop { font-size: 36px; text-align: center; }
.faq-lijst {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.faq-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 20px;
}
/* lijn zonder eigen ruimte, zoals de ::after-rand van de bron */
.faq-item::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  border-bottom: 1px solid var(--cream);
}
/* Naast elke vraag staat in de bron een rond knopje van 29px, 20px ernaast.
   Het knopje valt weg (er valt niets open te klikken); de ruimte blijft, zodat
   elke vraag op dezelfde plek afbreekt en even hoog is als in de bron. */
.faq-q {
  font-size: 20px;
  line-height: 24px;
  min-height: 29px;
  padding-right: 49px;
}
.faq-a p { font-size: 16px; line-height: 24px; }

@media (max-width: 1279px) {
  .sub-kop { padding: 170px 0 80px; }
  .sub-kop .bc { gap: 25px; }
  .sub-kop h1 { font-size: 62px; }

  .s-sub { padding-block: 80px; }
}
@media (max-width: 991px) {
  .sub-kop { padding: 140px 0 80px; }
  .sub-kop h1 { font-size: 42px; }
  .sub-kop p { font-size: 28px; }
  .sub-beeld img { height: 360px; min-height: 0; aspect-ratio: auto; border-radius: 105px; }
}
@media (max-width: 767px) {
  .sub-kop h1 { font-size: 36px; }
  .faq-kop { font-size: 32px; }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.footer {
  position: relative;
  background: var(--primary);
  color: var(--white);
  padding: 50px 0;
}
/* Witte strook bovenaan en de omgekeerde boog van de bron: wit in de hoeken,
   blush in een koepel in het midden. */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: var(--white);
}
.footer-boog {
  position: relative;
  height: 183px;
  background: url('../assets/images/boog-wit.png') 50% 100% / 100% 100% no-repeat;
  transform: rotate(180deg);
}

.footer-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 50px;
  /* lijn boven en onder zonder eigen ruimte, zoals in de bron */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}

.footer-merk {
  width: 275px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
/* De bron toont hier het logobestand met witte achtergrond, 275x75 met 5px
   afronding en bijgesneden op hoogte. Zelfde beeld met het transparante logo. */
.footer-logo {
  width: 275px;
  height: 75px;
  background: var(--white);
  border-radius: 5px;
  overflow: hidden;
}
.footer-logo img { width: 100%; height: 100%; object-fit: cover; }
.footer-tekst {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.footer-sociaal {
  display: flex;
  gap: 18px;
  margin: 4px -6px -6px;
}
.footer-sociaal a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  transition: opacity var(--transition);
}
.footer-sociaal img { width: 32px; height: 32px; }
@media (hover: hover) {
  .footer-sociaal a:hover { opacity: 0.75; }
}

.footer-kolommen {
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 75px;
}
.footer-kolom {
  /* niet krimpen: past de rij niet, dan steekt ze aan beide kanten uit, zoals
     in de bron op 992px */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-kop {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-links a,
.footer-links button {
  display: block;
  width: fit-content;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.5px;
  /* raakvlak 44px zonder dat de rijen verschuiven */
  padding-block: 10px;
  margin-block: -10px;
  transition: opacity var(--transition);
}
/* "Cookie-instellingen" opent een venster en is dus een knop; hij neemt de
   opmaak van de links ernaast over. */
.footer-links button {
  padding-inline: 0;
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  text-align: inherit;
  cursor: pointer;
}
@media (hover: hover) {
  .footer-links a:hover,
  .footer-links button:hover { opacity: 0.75; }
}
.footer-info {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-info dt,
.footer-info dd {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 21.6px;
  letter-spacing: 0.5px;
}
.footer-info a {
  display: block;
  width: fit-content;
  min-height: 44px;
  padding-block: 11.2px;
  margin-block: -11.2px;
}

.footer-onder {
  margin-top: 50px;
  min-height: 33px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.footer-copy {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.footer-copy .regel-telefoon { display: none; }
/* Cloudpage-attributie: alleen het logo, 120x33, raakvlak 44px hoog. */
.footer-agency {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -5.5px;
  transition: opacity var(--transition);
}
.footer-agency img { width: 120px; height: 33px; }
@media (hover: hover) {
  .footer-agency:hover { opacity: 0.75; }
}

@media (max-width: 1279px) {
  .footer-kolommen { width: 68%; }
  .footer-links a,
  .footer-links button {
    font-size: 16px;
    line-height: 19.2px;
    min-height: 44px;
    padding-block: 12.4px;
    margin-block: -12.4px;
  }
}
/* Onder 1100 is de rij van drie kolommen (720px) breder dan haar vak van 68%:
   gecentreerd steekt ze dan aan beide kanten uit en op 1024 valt het adres
   5px buiten het venster. Alleen hier krimpt de tussenruimte mee tot de rij
   past: 34vw - 300px is op 1099 ruim 73, op 1024 48, op 992 37. */
@media (min-width: 992px) and (max-width: 1099px) {
  .footer-kolommen { gap: clamp(24px, 34vw - 300px, 75px); }
}

/* Telefoon: alles gecentreerd onder elkaar; de kolommen breken af op hun
   eigen breedte, zodat Menu en Legal op 430px naast elkaar staan en op 390
   onder elkaar. Rijen in de linkkolommen 44px: de bron houdt 39,2 aan, maar
   op die afstand overlappen de raakvlakken. */
@media (max-width: 991px) {
  .footer { padding: 25px 0 50px; }
  .footer::before { height: 26px; }
  .footer-boog { height: 40px; }
  .footer-wrapper {
    flex-direction: column;
    gap: 60px;
    padding-block: 40px;
  }
  .footer-merk { width: 300px; max-width: 100%; align-items: center; text-align: center; }
  .footer-logo { width: 300px; max-width: 100%; height: 90px; }
  .footer-sociaal { justify-content: center; }
  .footer-kolommen {
    width: auto;
    flex-wrap: wrap;
    gap: 30px;
  }
  .footer-kolom { align-items: center; text-align: center; }
  .footer-kolom:first-child { min-width: 150px; }
  /* Twee regels, zoals de copyrightregel van de bron op de telefoon */
  .footer-copy .scheiding { display: none; }
  .footer-copy .regel-telefoon { display: inline; }
  .footer-info a { margin-inline: auto; }
  /* Rijen van 44 i.p.v. 39,2: de eerste link staat wel exact op de plek van
     de bron (de helft van het extra raakvlak valt boven de tekst weg). */
  .footer-links { gap: 0; align-items: center; margin-top: -12.4px; }
  .footer-links a,
  .footer-links button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
    margin-block: 0;
  }
  .footer-onder {
    margin-top: 40px;
    flex-direction: column;
    gap: 50px;
    text-align: center;
  }
}

/* ── Statische footer-fallback ──────────────────
   Zichtbaar zolang components.js de footer nog niet heeft ingespoten, en
   permanent voor crawlers die geen JavaScript draaien. */
#site-footer > .footer-legal,
#site-footer > .footer-credit {
  margin: 0;
  padding: 12px 16px;
  text-align: center;
  background: var(--primary);
  line-height: 0;
}
#site-footer > .footer-legal { padding-top: 24px; line-height: 1.4; }
#site-footer > .footer-legal a {
  color: var(--white);
  font-size: 16px;
  margin: 0 10px;
}
#site-footer > .footer-credit { padding-bottom: 24px; }
#site-footer > .footer-credit img { width: 120px; height: 33px; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════
   BACK TO TOP (huisstandaard)
   ═══════════════════════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--white);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: 90;
}
.back-to-top.show { opacity: 1; visibility: visible; }
/* De bron heeft geen terug-naar-bovenknop. Onder 1400 breed schuift hij bij het
   scrollen over tekst (gemeten op alle pagina's: vanaf 1380 vrij, op 1400 16px). */
@media (max-width: 1399px) {
  .back-to-top { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   404 en OFFLINE (bestaan niet in de bron)
   ═══════════════════════════════════════════════════════════ */
.melding {
  min-height: 62svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-height) + 80px) 120px;
  text-align: center;
}
.melding--kaal { min-height: 100svh; padding-top: 120px; }
.melding--kaal img { margin: 0 auto 32px; }
.melding .bc { width: 100%; }
.melding-cijfer {
  font-family: var(--font-heading);
  font-size: clamp(72px, 12vw, 140px);
  line-height: 1;
  color: var(--primary);       /* zand haalde op wit 1,38:1 */
  margin: 0 0 8px;
}
.melding h1 {
  font-size: clamp(32px, 4vw, 48px);
  margin-bottom: 18px;
}
.melding-tekst {
  max-width: 540px;
  margin: 0 auto 36px;
  font-size: 18px;
}
.melding-knoppen {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.btn--licht {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px #ddd3cf;
}
@media (hover: hover) {
  .btn--licht:hover { background: var(--cream); box-shadow: inset 0 0 0 1px var(--primary); }
}
.melding-links {
  margin-top: 36px;
  font-size: 16px;
  color: #6f6360;
}
.melding-links a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* De bron laat blokken 20-40px inschuiven terwijl ze in beeld scrollen. Hier
   niet: niets beweegt op scroll of bij het laden, alles staat meteen op de
   eindpositie van de bron. */

/* ── Toegankelijkheid ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Verhoogd contrast: systeeminstelling van de bezoeker, geen designkeuze. */
@media (prefers-contrast: more) {
  :root {
    --primary: #7a5044;
    --text: #000000;
    --veldrand: rgba(51, 45, 40, 0.6);
  }
  .eyebrow { color: #6d4739; }
  .btn { border: 2px solid currentColor; }
  a:focus-visible, button:focus-visible { outline-width: 3px; }
}