/* ═══════════════════════════════════════════════════════════════
   DUINSTILTE — Domburg, Zeeland
   ─────────────────────────────────────────────────────────────
   1. Tokens        5. Hero            9. Gastvrouw
   2. Reset         6. Trio-kaarten   10. Vragen (FAQ)
   3. Typografie    7. Duo-blok       11. Slot & footer
   4. Navigatie     8. Donker blok    12. Motion & responsive
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ────────────────────────────────────────────────── */
:root{
  --shell:#fbfaf7;        /* paginavlak                  */
  --tint:#f3efe8;         /* zachte sectie               */
  --sand:#e7e0d4;         /* randen                      */
  --ink:#1a1916;          /* koppen                      */
  --body:#575349;         /* lopende tekst               */
  --muted:#8b857a;        /* bijschriften                */
  --sea:#5b6f66;          /* accent — duingras           */
  --light:#f8f6f1;        /* tekst op donker             */
  --backdrop:#232220;     /* achter het afgeronde vlak   */
  --framepad:14px;        /* rand rond het paginavlak    */

  --sans:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --wrap:1180px;
  --gut:clamp(1.3rem,4.5vw,3.6rem);
  --sect:clamp(4.5rem,10vw,8.5rem);
  --radius:26px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:1s;
}

/* ── 2. RESET ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Moet vóór alle componentregels staan. Zonder dit wint een eigen
   display-waarde (zoals .mob{display:flex}) van het hidden-attribuut,
   en blijft een verborgen paneel als onzichtbare laag over de pagina
   liggen die alle kliks opvangt. */
[hidden]{display:none !important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* ruimte voor de vaste navigatiebalk bij het springen naar een anker */
  scroll-padding-top:6rem;
}

body{
  background:var(--backdrop);
  color:var(--body);
  font-family:var(--sans);
  font-size:clamp(.95rem,.9rem + .25vw,1.03rem);
  line-height:1.7;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
summary::-webkit-details-marker{display:none}

::selection{background:var(--sea);color:var(--light)}

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

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:.9rem 1.4rem;background:var(--ink);color:var(--light);
}
.skip:focus{left:.5rem;top:.5rem}

/* het afgeronde paginavlak op donkere achtergrond */
.frame{padding:var(--framepad)}
.page{
  background:var(--shell);
  border-radius:var(--radius);
  overflow:hidden;
  isolation:isolate;
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* ── 3. TYPOGRAFIE ────────────────────────────────────────────── */
.h2{
  font-weight:300;
  font-size:clamp(1.85rem,1.1rem + 2.9vw,3.15rem);
  line-height:1.1;
  letter-spacing:-.028em;
  color:var(--ink);
}
.h2--light{color:var(--light)}

.eyebrow{
  font-size:.78rem;
  letter-spacing:.02em;
  color:var(--muted);
  margin-bottom:.5rem;
}
.eyebrow--light{color:rgba(248,246,241,.66)}

p{text-wrap:pretty}

.mid{text-align:center;max-width:640px;margin:0 auto clamp(2.5rem,5vw,3.8rem)}
.mid__sub{margin-top:1rem;color:var(--muted);font-size:.97rem}

/* pill-knop met icoonbadge */
.pill{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.42rem 1.5rem .42rem .42rem;
  border-radius:999px;
  font-size:.9rem;font-weight:400;
  white-space:nowrap;
  transition:transform .45s var(--ease),background .45s var(--ease),color .45s var(--ease);
}
.pill__ic{
  width:2.15rem;height:2.15rem;flex:none;
  border-radius:50%;
  display:grid;place-items:center;
  transition:background .45s var(--ease),color .45s var(--ease),transform .5s var(--ease);
}
.pill__ic svg{width:1rem;height:1rem}
.pill:hover{transform:translateY(-2px)}
.pill:hover .pill__ic{transform:rotate(45deg)}
.pill--dark:hover .pill__ic,.pill--light:hover .pill__ic{transform:rotate(45deg)}

.pill--light{background:var(--light);color:var(--ink)}
.pill--light .pill__ic{background:var(--ink);color:var(--light)}
.pill--light:hover{background:#fff}

.pill--dark{background:var(--ink);color:var(--light)}
.pill--dark .pill__ic{background:var(--light);color:var(--ink)}
.pill--dark:hover{background:var(--sea)}

.pill--lg{font-size:.98rem;padding:.5rem 1.9rem .5rem .5rem}
.pill--lg .pill__ic{width:2.5rem;height:2.5rem}
.pill--full{width:100%;justify-content:center}

/* telefoon-/mailknop draait niet mee */
.host__knop .pill:hover .pill__ic{transform:none}

/* ── 4. NAVIGATIE ─────────────────────────────────────────────── */
.nav{
  /* boven .mob (150), anders valt de sluitknop onder het open menu:
     de z-index van .burger telt alleen binnen deze stapelcontext */
  position:fixed;z-index:160;
  top:var(--framepad);left:var(--framepad);right:var(--framepad);
  display:flex;align-items:center;gap:2rem;
  padding:clamp(1.1rem,2.2vw,1.7rem) clamp(1.4rem,3.4vw,2.8rem);
  border-radius:18px;
  transition:background .5s var(--ease),padding .5s var(--ease),
             box-shadow .5s var(--ease);
}
.nav__logo{
  font-size:1.2rem;font-weight:400;letter-spacing:-.01em;
  color:var(--light);margin-right:auto;
  transition:color .5s var(--ease);
}

/* voorbij de hero: leesbare balk */
.nav.is-solid{
  background:rgba(251,250,247,.9);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 6px 30px rgba(26,25,22,.1);
  padding-block:.9rem;
}
.nav.is-solid .nav__logo{color:var(--ink)}
.nav.is-solid .nav__links a{color:var(--body)}
.nav.is-solid .nav__links a:hover{color:var(--ink)}
.nav.is-solid .burger span{background:var(--ink)}
.nav__links{display:flex;gap:1.9rem}
.nav__links a{
  font-size:.86rem;color:rgba(248,246,241,.78);
  position:relative;padding-block:.3rem;
  transition:color .4s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:.05rem;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{color:var(--light)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}

.burger{display:none;width:24px;height:16px;position:relative;flex:none}
.burger span{
  position:absolute;left:0;width:100%;height:1.5px;
  background:var(--light);border-radius:2px;
  transition:transform .45s var(--ease),background .4s;
}
.burger span:nth-child(1){top:2px}
.burger span:nth-child(2){bottom:2px}

/* mobiel paneel */
.mob{
  position:fixed;inset:0;z-index:150;
  background:var(--shell);
  display:flex;flex-direction:column;justify-content:center;
  gap:2.6rem;padding:5rem var(--gut) 3rem;
  opacity:0;transition:opacity .45s var(--ease);
}
.mob.is-open{opacity:1}
.mob__links{display:flex;flex-direction:column;gap:.2rem}
.mob__links a{
  font-size:clamp(1.9rem,8.5vw,2.6rem);
  font-weight:300;letter-spacing:-.03em;line-height:1.45;
  color:var(--ink);
}
.mob .pill{align-self:flex-start}

/* burger-kruis — het logo moet mee verkleuren, want de balk staat dan
   over het lichte menupaneel heen */
.nav:has(.burger[aria-expanded="true"]) .nav__logo{color:var(--ink)}
.burger[aria-expanded="true"] span{background:var(--ink)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}

/* ── ACHTERGRONDVIDEO ─────────────────────────────────────────
   Ligt bovenop het bestaande beeld in .hero__media, .dark__media
   en .slot__media. Start onzichtbaar en vervaagt pas in zodra hij
   écht speelt — mislukt dat, dan blijft het beeld gewoon staan.
   De scrims eroverheen blijven ongewijzigd.
   ──────────────────────────────────────────────────────────── */
.bgvid{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;
  transition:opacity 1.1s var(--ease);
  pointer-events:none;
  border:0;
}
.bgvid.is-speelt{opacity:1}
.bgvid::-webkit-media-controls{display:none !important}
.bgvid::-webkit-media-controls-enclosure{display:none !important}

/* ── 5. HERO ──────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:clamp(560px,86svh,880px);
  display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;
  border-radius:var(--radius);
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.07);
  animation:drift 24s var(--ease) forwards;
}
@keyframes drift{to{transform:scale(1)}}

.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(16,15,13,.62) 0%,rgba(16,15,13,.2) 45%,transparent 72%),
    linear-gradient(to bottom,rgba(16,15,13,.44) 0%,transparent 24%);
}

.hero__body{
  padding:0 clamp(1.4rem,3.4vw,2.8rem) clamp(3rem,7vw,4.5rem);
  max-width:760px;
}
.hero__eyebrow{
  font-size:.9rem;font-style:italic;font-weight:300;
  color:rgba(248,246,241,.82);margin-bottom:.9rem;
}
.hero__title{
  font-weight:300;
  font-size:clamp(2.3rem,1rem + 5.4vw,4.4rem);
  line-height:1.05;letter-spacing:-.035em;
  color:var(--light);
  margin-bottom:2rem;
}

/* glaskaart */
.glass{
  background:rgba(28,27,24,.42);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(248,246,241,.14);
  border-radius:18px;
  color:var(--light);
}
.hero__card{
  position:absolute;z-index:10;
  right:clamp(1.4rem,3.4vw,2.8rem);
  bottom:clamp(3rem,7vw,4.5rem);
  width:min(340px,calc(100% - 2.8rem));
  padding:1.15rem 1.3rem 1.3rem;
}
.glass__top{display:flex;align-items:center;gap:.55rem;margin-bottom:.9rem}
.avatars{display:flex}
.avatars span{
  width:1.5rem;height:1.5rem;border-radius:50%;
  border:1.5px solid rgba(248,246,241,.5);
  margin-left:-.5rem;
  background:linear-gradient(140deg,#c9bfae,#8b857a);
}
.avatars span:first-child{margin-left:0}
.avatars span:nth-child(2){background:linear-gradient(140deg,#a8b0a4,#5b6f66)}
.avatars span:nth-child(3){background:linear-gradient(140deg,#d8cdbb,#a1907a)}
.glass__count{font-size:.82rem;color:rgba(248,246,241,.72)}
.glass__label{margin-left:auto;font-size:.72rem;color:rgba(248,246,241,.6)}
.glass__quote{
  font-size:.85rem;font-style:italic;line-height:1.6;
  color:rgba(248,246,241,.78);margin-bottom:.9rem;
}
/* onderrand van de glaskaart: cijfer + sterren links, Google rechts */
.glass__onder{display:flex;align-items:center;gap:.7rem}
.glass__cijfer{display:flex;align-items:center;gap:.5rem}
.glass__score{
  font-size:1.75rem;font-weight:300;letter-spacing:-.02em;line-height:1;
}
.glass__merk{
  margin-left:auto;
  display:flex;align-items:center;gap:.34rem;
  font-size:.76rem;color:rgba(248,246,241,.7);
  white-space:nowrap;
}
.glass__merk .glogo{width:.95rem;height:.95rem;flex:none}

/* ── 6. SECTIES & TRIO ────────────────────────────────────────── */
.section{padding-block:var(--sect)}
.section--pt0{padding-top:0}

/* ── CARROUSEL ────────────────────────────────────────────────
   Eén dia tegelijk, zachte crossfade. Autoplay wordt door
   js/main.js gestuurd en loopt alleen als de slider in beeld is.
   ──────────────────────────────────────────────────────────── */
.slider{
  position:relative;
  margin-inline:var(--gut);
  height:700px;                     /* desktop: binnen 650–750 px */
  border-radius:22px;
  overflow:hidden;
  isolation:isolate;
  background:var(--sand);
  box-shadow:0 34px 80px -38px rgba(26,25,22,.55);
}
.slider:focus{outline:none}
.slider__vlak{position:absolute;inset:0}

.slide{
  position:absolute;inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity 1.15s var(--ease);
}
.slide.is-actief{opacity:1;pointer-events:auto}

/* trage inzoom zolang een dia in beeld staat */
.slide img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  transform:scale(1.07);
  transition:transform 8s linear;
}
.slide.is-actief img{transform:scale(1)}

.slide__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(14,13,11,.84) 0%,rgba(14,13,11,.46) 32%,rgba(14,13,11,.04) 62%),
    linear-gradient(to right,rgba(14,13,11,.55) 0%,rgba(14,13,11,.12) 48%,transparent 72%);
}

.slide__body{
  position:absolute;left:0;bottom:0;
  padding:clamp(2rem,4.6vw,4.2rem);
  max-width:min(620px,72%);
  color:var(--light);
}
/* tekst komt zacht op zodra de dia actief wordt */
.slide__body > *{
  opacity:0;transform:translateY(20px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
}
.slide.is-actief .slide__body > *{opacity:1;transform:none}
.slide.is-actief .slide__body > *:nth-child(1){transition-delay:.18s}
.slide.is-actief .slide__body > *:nth-child(2){transition-delay:.28s}
.slide.is-actief .slide__body > *:nth-child(3){transition-delay:.38s}

.slide__tel{
  font-size:.78rem;letter-spacing:.16em;
  color:rgba(248,246,241,.6);margin-bottom:1rem;
}
.slide__tel span{color:var(--light)}
.slide__titel{
  font-size:clamp(1.6rem,1rem + 2.1vw,2.6rem);
  font-weight:300;letter-spacing:-.028em;line-height:1.1;
  margin-bottom:.9rem;
}
.slide__tekst{
  font-size:clamp(.94rem,.9rem + .25vw,1.05rem);
  line-height:1.65;color:rgba(248,246,241,.82);
  max-width:46ch;
}

/* bediening rechtsonder — weg van de tekst linksonder */
.sctrl{
  position:absolute;z-index:5;
  right:clamp(2rem,4.6vw,4.2rem);
  bottom:clamp(2rem,4.6vw,4.2rem);
  display:flex;align-items:center;gap:clamp(1rem,2vw,1.6rem);
}

.sdots{display:flex;gap:.45rem}
.sdots button{
  width:2.1rem;height:1.6rem;
  display:grid;align-items:center;
}
.sdots span{
  display:block;height:2px;border-radius:2px;
  background:rgba(248,246,241,.38);
  transition:background .55s var(--ease);
}
.sdots button[aria-current="true"] span{background:var(--light)}
.sdots button:hover span{background:rgba(248,246,241,.75)}

.spijlen{display:flex;gap:.5rem}
.spijl{
  width:2.9rem;height:2.9rem;border-radius:50%;
  display:grid;place-items:center;
  color:var(--light);
  background:rgba(248,246,241,.12);
  border:1px solid rgba(248,246,241,.3);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:background .45s var(--ease),border-color .45s var(--ease),
             transform .45s var(--ease);
}
.spijl svg{width:1.05rem;height:1.05rem}
.spijl:hover{background:rgba(248,246,241,.24);border-color:rgba(248,246,241,.55)}
.spijl:active{transform:scale(.94)}

/* ── 7. DUO-BLOK ──────────────────────────────────────────────── */
.duo{
  display:grid;grid-template-columns:1fr 1.1fr;
  gap:clamp(2.2rem,5.5vw,5rem);
  align-items:center;
}
.duo__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;
}
.duo--host{align-items:center}
.duo__media--host img{aspect-ratio:4/5}

/* ── UITGELICHT BLOK · tekst links, groot beeld rechts ────────
   Het beeld rekt mee met de hoogte van de tekstkolom (stretch) en
   heeft daarnaast een eigen minimumhoogte, zodat het altijd als
   hoofdbeeld leest en niet als kaartje.
   ──────────────────────────────────────────────────────────── */
.blok{
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:clamp(2.5rem,5.5vw,6rem);
  align-items:stretch;
}
.blok__tekst{
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(0rem,1.5vw,1.5rem);
}

.kenmerken{margin-top:clamp(2rem,3.6vw,3rem);counter-reset:kenmerk}
.kenmerken > div{
  counter-increment:kenmerk;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 clamp(1rem,1.8vw,1.6rem);
  padding-block:clamp(1.15rem,2vw,1.6rem);
  border-top:1px solid var(--sand);
}
.kenmerken > div:last-child{border-bottom:1px solid var(--sand)}

/* stille editorial nummering — puur decoratief, geen extra tekst */
.kenmerken > div::before{
  content:counter(kenmerk,decimal-leading-zero);
  grid-row:span 2;
  font-size:.74rem;letter-spacing:.12em;
  color:var(--stone);
  padding-top:.5rem;
}

.kenmerken dt{
  font-size:clamp(1.02rem,.96rem + .3vw,1.18rem);
  font-weight:400;color:var(--ink);
  letter-spacing:-.014em;margin-bottom:.34rem;
}
.kenmerken dd{
  font-size:.92rem;font-style:italic;
  color:var(--muted);line-height:1.62;max-width:46ch;
}

.blok__beeld{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  min-height:clamp(430px,46vw,660px);
  background:var(--sand);
  box-shadow:0 34px 80px -42px rgba(26,25,22,.55);
}
.blok__beeld img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}

/* ── 8. DONKER BLOK + REVIEWS ─────────────────────────────────── */
.dark{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(4rem,9vw,7rem);
}
.dark__media{position:absolute;inset:0;z-index:-2}
.dark__media img{width:100%;height:100%;object-fit:cover}
.dark__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(14,14,12,.9) 0%,rgba(14,14,12,.7) 48%,rgba(14,14,12,.55) 100%);
}
.dark__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.dark__head{max-width:560px}
.dark__p{
  color:rgba(248,246,241,.74);
  margin:1.1rem 0 1.9rem;font-size:.97rem;
}
/* ── Google-beoordelingen ─────────────────────────────────────
   Let op: de inhoud is nu nog verzonnen. Zie README.md — echte
   Google-reviews horen hier vóór livegang in te staan.
   ──────────────────────────────────────────────────────────── */
.gsum{
  display:flex;align-items:center;gap:1rem;
  background:var(--shell);
  border-radius:14px;
  padding:1rem 1.4rem;
  margin:clamp(2.8rem,6vw,4.5rem) 0 1rem;
  max-width:520px;
}
.glogo{width:1.7rem;height:1.7rem;flex:none}
.glogo svg{width:100%;height:100%}
.gsum__tekst{margin-right:auto}
.gsum__titel{font-size:.92rem;color:var(--ink);line-height:1.3}
.gsum__meta{font-size:.78rem;color:var(--muted)}
.gsum__meta strong{font-weight:500;color:var(--body)}
.gsum__cijfer{
  font-size:1.6rem;font-weight:400;color:var(--ink);
  letter-spacing:-.02em;line-height:1;
}

.sterren{display:flex;gap:.1rem;color:#fbbc05;font-size:.85rem;line-height:1}
.sterren--lg{font-size:1rem}

.revs{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(.8rem,1.6vw,1.2rem);
}
.grev{
  background:var(--shell);
  border-radius:14px;
  padding:1.2rem 1.25rem 1.3rem;
  display:flex;flex-direction:column;gap:.7rem;
}
.grev__kop{display:flex;align-items:center;gap:.6rem}
.grev__av{
  width:2.1rem;height:2.1rem;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(140deg,#b9ad99,#8b857a);
  color:var(--light);font-size:.85rem;
}
.grev__naam{font-size:.88rem;color:var(--ink);line-height:1.3}
.grev__toen{font-size:.74rem;color:var(--muted);line-height:1.3}
.grev__g{width:1.05rem;height:1.05rem;flex:none;margin-left:auto;align-self:flex-start}
.grev__g svg{width:100%;height:100%}
.grev blockquote{font-size:.86rem;line-height:1.6;color:var(--body)}

/* ── 9. GASTVROUW ─────────────────────────────────────────────── */
.host__bio{margin-top:1.1rem;max-width:46ch;font-size:.97rem}
.cijfers{
  display:flex;flex-wrap:wrap;gap:2.4rem;
  margin:2.2rem 0;
}
.cijfers__n{
  display:block;font-size:1.5rem;font-weight:300;
  font-style:italic;color:var(--ink);letter-spacing:-.02em;
}
.cijfers__l{font-size:.8rem;font-style:italic;color:var(--muted)}
.host__knop{display:flex;flex-wrap:wrap;gap:.7rem}

/* ── 10. VRAGEN ───────────────────────────────────────────────── */
.vragen{
  position:relative;isolation:isolate;
  padding-block:var(--sect);
  background:var(--tint);
}
.vragen__media{position:absolute;inset:0;z-index:-1;opacity:.5}
.vragen__media img{width:100%;height:100%;object-fit:cover}
.vragen::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(243,239,232,.85),rgba(243,239,232,.6));
}

.faq{max-width:720px;margin-inline:auto}
.faq details{
  background:rgba(251,250,247,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(231,224,212,.9);
  border-radius:12px;
  margin-bottom:.6rem;
  overflow:hidden;
  transition:background .4s var(--ease);
}
.faq details[open]{background:rgba(251,250,247,.96)}
.faq summary{
  display:flex;align-items:center;gap:1rem;
  padding:1.05rem 1.3rem;
  cursor:pointer;list-style:none;
  font-size:.98rem;color:var(--ink);
}
.faq__ic{
  margin-left:auto;flex:none;
  width:1.1rem;height:1.1rem;position:relative;
}
.faq__ic::before,.faq__ic::after{
  content:"";position:absolute;top:50%;left:0;
  width:100%;height:1.5px;background:var(--muted);border-radius:2px;
  transition:transform .4s var(--ease);
}
.faq__ic::after{transform:rotate(90deg)}
details[open] .faq__ic::after{transform:rotate(0)}
.faq__a{padding:0 1.3rem 1.15rem}
.faq__a p{font-size:.91rem;color:var(--body);max-width:58ch}

/* ── 11. SLOT & FOOTER ────────────────────────────────────────── */
.slot{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:min(76svh,660px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.slot__media{position:absolute;inset:0;z-index:-2}
.slot__media img{width:100%;height:100%;object-fit:cover}
.slot__scrim{
  position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(16,15,13,.5) 0%,rgba(16,15,13,.85) 76%);
}
.slot__body{padding:var(--sect) var(--gut);max-width:640px}
.slot__title{
  font-weight:300;
  font-size:clamp(2.4rem,1.2rem + 5vw,4.6rem);
  line-height:1.02;letter-spacing:-.035em;
  color:var(--light);margin-bottom:1rem;
}
.slot__p{color:rgba(248,246,241,.76);margin-bottom:2.1rem}

.foot{
  background:var(--ink);color:rgba(248,246,241,.6);
  padding-block:clamp(2.5rem,5vw,3.6rem);
  font-size:.86rem;
}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.4rem}
.foot__brand{font-size:1.15rem;color:var(--light)}
.foot__addr{margin-right:auto}
.foot__links{display:flex;gap:1.5rem;flex-wrap:wrap}
.foot__links a{transition:color .4s var(--ease)}
.foot__links a:hover{color:var(--light)}
.foot__fine{width:100%;font-size:.76rem;color:rgba(248,246,241,.32)}

/* zwevende cta — alleen mobiel */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  padding:.75rem var(--gut) calc(.75rem + env(safe-area-inset-bottom));
  background:rgba(251,250,247,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 -1px 0 rgba(26,25,22,.1);
  transform:translateY(115%);
  transition:transform .5s var(--ease);
  display:none;
}
.dock.is-up{transform:translateY(0)}

/* ── 12. MOTION ───────────────────────────────────────────────── */
.js .reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease);
  will-change:opacity,transform;
}
.js .reveal.is-in{opacity:1;transform:none}

/* hele trage inzoom op een stilstaand beeld — start één keer zodra de
   sectie in beeld komt en loopt daarna niet terug. Bewust een transition
   en geen animation: zo is er geen sprong bij het eindpunt. */
.js .zoomvlak img{
  transform:scale(1);
  transform-origin:center 55%;
  transition:transform 24s cubic-bezier(.33,0,.67,1);
  will-change:transform;
}
.js .zoomvlak.is-in img{transform:scale(1.13)}

/* van rechts inschuiven — één keer, zodra de sectie in beeld komt.
   js/main.js zet .is-in en stopt daarna met observeren. */
.js .inschuif{
  opacity:0;
  transform:translateX(40px);
  transition:opacity .85s cubic-bezier(.16,.84,.44,1),
             transform .85s cubic-bezier(.16,.84,.44,1);
  will-change:opacity,transform;
}
.js .inschuif.is-in{opacity:1;transform:none}


/* ── 13. RESPONSIVE ───────────────────────────────────────────── */
/* twee kolommen zolang er ruimte is; daaronder netjes stapelen */
@media (max-width:900px){
  .blok{grid-template-columns:1fr;gap:clamp(2.2rem,5vw,3.2rem)}
  .blok__beeld{min-height:clamp(340px,58vw,470px)}
  .js .inschuif{transform:translateX(24px)}
}

@media (max-width:1040px){
  .duo{grid-template-columns:1fr}
  .duo__media--host img{aspect-ratio:4/3}
  .revs{grid-template-columns:repeat(2,1fr)}
  .gsum{max-width:none}

  /* tablet: 550–650 px. Tekstblok smal genoeg houden zodat het niet
     tegen de bediening rechtsonder aan loopt. */
  .slider{height:600px}
  .slide__body{max-width:min(500px,58%)}
}

@media (max-width:820px){
  :root{--radius:20px}
  .nav__links{display:none}
  .burger{display:block}
  .dock{display:block}

  /* De glaskaart zakt onder de titel. De hero moet dan kolom worden,
     anders gaan titel en kaart náást elkaar staan en valt de kaart weg. */
  .hero{
    flex-direction:column;
    justify-content:flex-end;
    align-items:stretch;
    min-height:auto;
    padding-top:7rem;
  }
  .hero__body{padding-bottom:1.4rem;max-width:none}
  .hero__card{
    position:static;width:auto;
    margin:0 clamp(1.4rem,3.4vw,2.8rem) clamp(1.4rem,3.4vw,2.8rem);
  }

  /* Geen opgelegde regelafbreking in de subkop op smalle schermen.
     Let op: in de HTML staat een spatie vóór die <br>, zodat de woorden
     niet aan elkaar plakken zodra hij verdwijnt. */
  .mid__sub br{display:none}
}

@media (max-width:560px){
  :root{--framepad:0px}
  .page{border-radius:0}
  .hero{border-radius:0}
  .nav{border-radius:0}
  .revs{grid-template-columns:1fr}
  .gsum{flex-wrap:wrap;gap:.7rem 1rem}
  .gsum__tekst{margin-right:auto}

  /* mobiel: 500–600 px. Bediening naar het midden, tekst eroverheen
     zou anders botsen met de pijlen rechtsonder. */
  .slider{height:540px;margin-inline:0;border-radius:0}
  .slide__body{max-width:100%;padding-bottom:5.6rem}
  .slide__tekst{max-width:none}
  .sctrl{
    left:50%;right:auto;transform:translateX(-50%);
    bottom:1.5rem;gap:1.1rem;
  }
  .spijl{width:2.6rem;height:2.6rem}
  /* liggend beeld op smalle schermen: houd het onderwerp in beeld */
  .slide img{object-position:center 42%}
  .cijfers{gap:1.6rem}
  .foot__in{flex-direction:column;align-items:flex-start}
  .foot__addr{margin-right:0}
}

/* ── 14. TOEGANKELIJKHEID ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal,.js .inschuif{opacity:1;transform:none}
  .hero__media img{transform:none;animation:none}
  .js .zoomvlak img,.js .zoomvlak.is-in img{transform:none}

  /* carrousel: geen inzoom, geen opkomende tekst, geen vertraging.
     Autoplay wordt in js/main.js sowieso uitgezet. */
  .slide,.slide__body > *{transition-delay:0s !important}
  .slide img{transform:none}
  .slide__body > *{opacity:1;transform:none}
}

@media print{
  .nav,.dock,.mob{display:none !important}
  .js .reveal{opacity:1;transform:none}
  .frame{padding:0}
}