/* ═══ Henri Media — Clear Sky v1 ═══ */

:root{
  /* hemel */
  --sky-1:#FBFDFF; --sky-2:#F4F9FF; --sky-3:#E9F3FE;
  --sky-4:#D6E8FD; --sky-5:#BBD9FA; --sky-6:#93C0F4;
  /* mist — bestaat alléén binnen de doorbraaksequentie */
  --mist-100:#EDEFF2; --mist-300:#D3D8E0; --mist-500:#AEB6C2; --mist-700:#7C8593;
  /* inkt */
  --ink:#0A0F1C; --body:#283345; --faint:#6B7488;
  /* actie — nooit decoratief */
  --blue:#2563EB; --blue-hover:#1D4ED8; --blue-press:#1B3EA6;

  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* live door JS gezet */
  --sky-top:#8FBEF4; --sky-bot:#E4F1FE;
  --street-h:clamp(260px,44vh,540px);
  /* framing van de straat — mobiel schuift dit opzij zodat het salon centraal staat */
  --street-scale:112%; --street-shift:-6%; --street-drop:-4%;
  --bank-scale:112%;   --bank-shift:-6%;
  --fore-scale:150%;   --fore-shift:-25%;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--body);
  font-size:18px; line-height:1.62; font-weight:400;
  background:var(--sky-bot);            /* dekt elk gaatje bij de URL-balk */
  overflow-x:hidden;
}
img{display:block;max-width:100%}

/* ── knoppen ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-weight:600;font-size:16px;line-height:1;
  padding:16px 26px;border-radius:999px;text-decoration:none;
  transition:background 90ms ease,transform 160ms cubic-bezier(.22,1,.36,1);
}
.btn--sm{padding:11px 18px;font-size:15px}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 6px 20px rgba(37,99,235,.28)}
.btn--primary:hover{background:var(--blue-hover)}
.btn--primary:active{background:var(--blue-press);transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ── zwevende glazen navigatiepil ──────────────────────── */
.nav{
  position:fixed;z-index:60;top:14px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:28px;
  width:min(1080px,calc(100% - 28px));
  padding:9px 9px 9px 22px;border-radius:999px;
  background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 8px 30px rgba(10,15,28,.10);
  transition:padding 240ms cubic-bezier(.22,1,.36,1),top 240ms cubic-bezier(.22,1,.36,1);
}
.nav.is-stuck{top:8px;padding-top:6px;padding-bottom:6px}
.nav__brand{
  display:flex;align-items:center;gap:9px;
  font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;
}
.nav__mark{width:16px;height:16px;border-radius:5px;background:var(--ink);transform:rotate(45deg)}
.nav__links{display:flex;gap:26px;margin-left:auto}
.nav__links a{
  font-size:15px;font-weight:500;color:var(--body);text-decoration:none;
  transition:color 90ms ease;
}
.nav__links a:hover{color:var(--ink)}
.nav .btn{margin-left:0}
@media (max-width:760px){
  .nav{gap:0;padding-left:18px}
  .nav__links{display:none}
  .nav .btn{margin-left:auto}
}

/* ── het scroll-spoor en het vaste toneel ──────────────── */
.track{position:relative;height:360vh}
.stage{
  position:sticky;top:0;height:100vh;height:100dvh;
  overflow:hidden;isolation:isolate;
}

/* Alles wat met de wolken moet mengen zit in één doos. isolation zorgt dat
   het mengen niet doorwerkt op de tekst erboven. */
.world{position:absolute;inset:0;isolation:isolate;transform-origin:50% 80%;will-change:transform}

.sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}

.layer{position:absolute;left:0;right:0;pointer-events:none;will-change:transform,opacity}
/* max-width:none is essentieel: de globale img-regel knipt anders elke
   uitvergroting van de straat af tot 100% van het kader. */
.layer img{display:block;max-width:none}
.layer--street{bottom:var(--street-drop);height:auto}
.layer--street img{width:var(--street-scale);margin-left:var(--street-shift);height:auto}

/* De wolkenbank. Breedte en stand worden in JS gezet, zodat de onderrand
   altijd voorbij de onderkant van het scherm valt — daar mag nooit een
   rechte kant te zien zijn. */
/* Het mengen moet op .band zelf staan. Zet je het op de <img>, dan maakt
   de will-change van .band een eigen laag en mengt de foto met niets —
   dan zie je het zwart gewoon staan. */
.band{position:absolute;left:0;top:0;pointer-events:none;
  mix-blend-mode:screen;will-change:transform,opacity}
.band img{display:block;width:100%;height:auto;max-width:none}

.fog{
  position:absolute;inset:0;opacity:0;
  background:
    radial-gradient(120% 70% at 50% 62%,rgba(255,255,255,.92) 0%,rgba(226,230,236,.85) 45%,rgba(174,182,194,.75) 100%);
  will-change:opacity;
}

/* ── hero-tekst, in dezelfde lucht ─────────────────────── */
.hero{
  position:absolute;z-index:20;left:50%;top:42%;
  transform:translate(-50%,-50%);
  width:min(1040px,calc(100% - 40px));text-align:center;
  will-change:transform,opacity;
}
.hero__title{
  margin:0 0 20px;font-size:clamp(31px,4.9vw,64px);line-height:1.06;
  font-weight:700;letter-spacing:-.035em;color:var(--ink);
  text-wrap:balance;
}
.hero__sub{
  margin:0 auto 30px;max-width:56ch;font-size:clamp(16px,1.5vw,19px);
  color:var(--body);
}
.hero__note{margin:16px 0 0;font-size:14px;color:var(--faint)}
@media (max-width:560px){
  :root{--street-scale:300%; --street-shift:-100%; --street-drop:-2%;
        --bank-scale:380%;   --bank-shift:-140%;
        --fore-scale:340%;   --fore-shift:-120%}
  .hero{width:calc(100% - 34px)}
  .hero__title{font-size:clamp(29px,8.4vw,40px);letter-spacing:-.03em}
  .hero__sub{font-size:16px;margin-bottom:26px}
  .caption{font-size:clamp(26px,7.6vw,36px);letter-spacing:-.03em}
}

/* ── het bijschrift ────────────────────────────────────── */
/* Zelfde behandeling als .hero__title: 700, strakke tracking, korte
   regelafstand. Geen schaduw of gloed — alleen de letter. */
.caption{
  position:absolute;z-index:20;left:50%;transform:translateX(-50%);
  bottom:calc(11vh + env(safe-area-inset-bottom));
  width:min(860px,calc(100% - 44px));margin:0;
  text-align:center;font-size:clamp(28px,3.9vw,52px);line-height:1.1;
  font-weight:700;letter-spacing:-.035em;color:var(--ink);
  opacity:0;text-wrap:balance;will-change:transform,opacity;
}
.caption--1{top:24%;bottom:auto}

/* Het teken moet gelezen worden, niet gezocht: een woord erbij, meer
   contrast, en de hele groep wipt mee. Zonder dit blijft de bezoeker
   op het eerste beeld staan en ziet hij de doorbraak nooit. */
.hint{
  position:absolute;z-index:20;left:50%;
  bottom:calc(24px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:9px;
  transform:translateX(-50%);
  animation:hintLift 1.9s cubic-bezier(.22,1,.36,1) infinite;
}
.hint__mouse{
  position:relative;display:block;width:26px;height:41px;
  border:2px solid rgba(10,15,28,.55);border-radius:999px;
  background:rgba(255,255,255,.5);
  box-shadow:0 4px 14px rgba(10,15,28,.10);
}
.hint__mouse i{
  position:absolute;left:50%;top:8px;width:3px;height:8px;border-radius:2px;
  background:var(--ink);transform:translateX(-50%);
  animation:hintDrop 1.9s cubic-bezier(.22,1,.36,1) infinite;
}
.hint__txt{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(10,15,28,.62);
}
@keyframes hintDrop{0%,72%,100%{transform:translate(-50%,0);opacity:1}
  36%{transform:translate(-50%,15px);opacity:.15}}
@keyframes hintLift{0%,72%,100%{transform:translate(-50%,0)}
  36%{transform:translate(-50%,6px)}}


/* ═══════════════════════════════════════════════════════════════
   PAGINA ONDER DE LUCHT
   Alles hieronder ligt boven het vaste toneel (z-index 30) en
   is mobiel-eerst opgebouwd: één kolom, breder pas als het past.
   ═══════════════════════════════════════════════════════════════ */

.sec,.cta,.foot{position:relative;z-index:30}
.sec{padding:clamp(60px,11vw,96px) 0}
.sec--white{background:#fff}
.sec--tint{background:var(--sky-2)}
.sec--tint2{background:var(--sky-3)}

.wrap{width:min(760px,calc(100% - 40px));margin:0 auto}
.wrap--wide{width:min(1120px,calc(100% - 40px))}

/* de eerste witte sectie loopt zacht uit de lucht */
.sec--after-sky{overflow:hidden}
.sec--after-sky::before{
  content:"";position:absolute;left:0;right:0;top:0;height:180px;pointer-events:none;
  background:linear-gradient(180deg,rgba(214,232,253,.75) 0%,rgba(233,243,254,.45) 40%,rgba(255,255,255,0) 100%);
}
.sec--after-sky > .wrap{position:relative}

.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

.h2{
  margin:0 0 26px;font-size:clamp(27px,4.2vw,50px);line-height:1.07;
  font-weight:700;letter-spacing:-.035em;color:var(--ink);text-wrap:balance;
}
.h2--sm{font-size:clamp(24px,3.2vw,38px);line-height:1.12}
.h3{margin:0 0 12px;font-size:20px;line-height:1.25;font-weight:700;
  letter-spacing:-.025em;color:var(--ink)}
.h3--lg{font-size:clamp(22px,2.6vw,26px);margin-bottom:16px}
.sec p{margin:0 0 18px;max-width:62ch}
.sec p:last-child{margin-bottom:0}
.note{color:var(--faint);font-size:17px}
a{color:var(--blue)}
a:hover{color:var(--blue-hover)}

/* ── 1. probleem ───────────────────────────────────────── */
.lede{max-width:64ch;margin-bottom:clamp(34px,6vw,54px)}
.proof{display:grid;gap:24px;align-items:start}
@media (min-width:900px){.proof{grid-template-columns:1fr 1fr;gap:28px}}

.serp{
  margin:0;background:#fff;border:1px solid #E4EAF2;border-radius:22px;
  box-shadow:0 12px 34px rgba(20,40,80,.06);overflow:hidden;
}
.serp__bar{display:flex;align-items:center;gap:10px;padding:15px 18px;
  border-bottom:1px solid #EDEFF2;background:#F7F9FC;font-size:13px;color:var(--faint)}
.serp__dot{width:8px;height:8px;border-radius:999px;background:var(--mist-500);flex:none}
.serp__list{list-style:none;margin:0;padding:0}
.serp__row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;border-bottom:1px solid #F1F3F7;font-size:15px}
.serp__name{font-weight:600;color:var(--ink)}
.serp__meta{font-size:12.5px;color:var(--faint);white-space:nowrap}
.serp__cut{display:flex;align-items:center;gap:10px;padding:10px 18px;background:#F7F9FC;
  border-top:1px dashed var(--mist-300);border-bottom:1px dashed var(--mist-300)}
.serp__cut::before,.serp__cut::after{content:"";flex:1;height:1px;background:var(--mist-300)}
.serp__cut .mono{font-size:11px;letter-spacing:.03em;color:var(--faint);white-space:nowrap}
.serp__row--dim{opacity:.55}
.serp__row--rest{opacity:.45;font-size:14.5px;color:var(--faint)}
.serp__row--you{background:#FAFBFD;border-bottom:0;padding-top:17px;padding-bottom:17px}
.serp__row--you .serp__name{font-weight:700}

.vol{background:var(--sky-2);border:1px solid #DCEAFB;border-radius:22px;
  padding:clamp(22px,4vw,28px)}
.vol__head{margin-bottom:22px}
.vol__head .h3{font-size:19px;margin-bottom:6px;text-wrap:balance}
.vol__sub{margin:0;font-size:11.5px;color:var(--faint)}
.vol__list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:15px}
.vol__row{display:grid;grid-template-columns:minmax(72px,auto) 1fr auto;align-items:center;gap:12px}
.vol__place{font-size:15px;font-weight:600;color:var(--ink)}
.vol__track{height:12px;border-radius:999px;background:rgba(37,99,235,.10)}
.vol__fill{display:block;height:100%;width:var(--w);border-radius:999px;
  background:linear-gradient(90deg,var(--blue),#5B8DF3)}
.vol__num{font-size:13px;color:var(--blue);min-width:3ch;text-align:right}
.vol__foot{margin:0;padding-top:18px;border-top:1px solid #DCEAFB;
  font-size:11.5px;color:var(--faint)}

/* ── 2. werk ───────────────────────────────────────────── */
p.lede--tight{margin-bottom:20px}
p.lede--tight + p.lede--tight{margin-bottom:clamp(34px,6vw,52px)}

/* ── 2. werk — carrousel met échte schermafdrukken ─────
   De sites zijn lange pagina's. Ze staan dus in een venster met een
   vaste hoogte; de knop "Hele pagina" laat de opname er rustig
   doorheen zakken. Eén salon tegelijk, links/rechts voor de rest. */
.work{--shot-h:clamp(300px,52vh,520px);position:relative}

.work__viewport{
  list-style:none;margin:0;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.work__viewport::-webkit-scrollbar{display:none}
.work__viewport:focus-visible{outline:3px solid var(--ink);outline-offset:8px;border-radius:24px}
.work__slide{scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;justify-content:center;padding:4px 0}

.shot{margin:0;width:min(880px,100%);display:flex;flex-direction:column;gap:18px}
.shot__frame{
  position:relative;border-radius:20px;background:#fff;
  overflow:hidden;overflow:clip;
  border:1px solid #DCE3ED;box-shadow:0 18px 44px rgba(20,40,80,.13);
}
.shot__bar{display:flex;align-items:center;gap:12px;padding:11px 15px;
  background:#F7F9FC;border-bottom:1px solid #EDEFF2}
.shot__dots{display:flex;gap:6px;flex:none}
.shot__dots i{width:9px;height:9px;border-radius:999px;background:var(--mist-300)}
.shot__url{font-size:12px;line-height:1;color:var(--faint);
  background:#fff;border:1px solid #E7EBF1;border-radius:999px;padding:6px 13px}

/* het venster: een vaste hoogte, de opname begint bovenaan */
.shot__view{height:var(--shot-h);background:var(--sky-2);
  overflow:hidden;overflow:clip;overflow-anchor:none}
.shot__img{width:100%;height:auto;
  transition:transform 900ms cubic-bezier(.22,1,.36,1)}
/* opengeklapt zakt de pagina traag door tot de onderrand */
.shot__frame.is-open .shot__img{
  transform:translateY(calc(var(--shot-h) - 100%));
  transition-duration:5200ms;transition-timing-function:cubic-bezier(.4,0,.35,1);
}

/* zachte rand onderaan: laat zien dat er nog pagina volgt */
.shot__frame::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:96px;
  pointer-events:none;transition:opacity 400ms ease;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.7));
}
.shot__frame.is-open::after{opacity:0}

.shot__peek{
  position:absolute;right:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:10px;
  font:inherit;font-size:13.5px;font-weight:600;line-height:1;color:var(--ink);
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(255,255,255,.85);border-radius:999px;
  padding:11px 15px;cursor:pointer;box-shadow:0 6px 18px rgba(10,15,28,.16);
  transition:transform 160ms cubic-bezier(.22,1,.36,1),background 90ms ease;
}
.shot__peek:hover{background:#fff;transform:translateY(-1px)}
.shot__peek:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.shot__peek-ico{width:8px;height:8px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform 260ms cubic-bezier(.22,1,.36,1)}
.shot__frame.is-open .shot__peek-ico{transform:rotate(-135deg) translate(-1px,-1px)}

.shot__cap{display:flex;flex-direction:column;gap:3px;text-align:center}
.shot__name{font-size:17px;font-weight:600;color:var(--ink)}
.shot__line{font-size:15px;line-height:1.5;color:var(--faint)}

/* ── bediening ─────────────────────────────────────────── */
.work__ctrl{display:flex;align-items:center;justify-content:center;
  gap:10px;margin-top:clamp(22px,3vw,30px)}
.work__arrow{
  width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;
  border-radius:999px;border:1px solid #D8E1EE;background:#fff;color:var(--ink);cursor:pointer;
  transition:background 90ms ease,border-color 90ms ease,transform 160ms cubic-bezier(.22,1,.36,1);
}
.work__arrow svg{width:18px;height:18px}
.work__arrow:hover{background:var(--sky-2);border-color:var(--sky-5)}
.work__arrow:active{transform:scale(.93)}
.work__arrow:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.work__tabs{display:flex;gap:4px;padding:4px;min-width:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  background:rgba(255,255,255,.72);border:1px solid #E1E8F2;border-radius:999px}
.work__tabs::-webkit-scrollbar{display:none}
.work__tab{
  font:inherit;font-size:14.5px;font-weight:500;line-height:1;color:var(--body);
  padding:10px 16px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  flex:none;white-space:nowrap;
  transition:background 90ms ease,color 90ms ease;
}
.work__tab:hover{color:var(--ink);background:rgba(37,99,235,.07)}
.work__tab[aria-current="true"]{background:var(--ink);color:#fff;font-weight:600}
.work__tab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

@media (max-width:520px){
  .work__ctrl{gap:8px}
  .work__arrow{width:40px;height:40px}
  .work__tab{padding:10px 12px;font-size:13.5px}
  .shot__peek{right:10px;bottom:10px;padding:10px 13px;font-size:13px}
  .shot__url{font-size:11px}
}
@media (max-width:400px){
  .work__tab{padding:9px 10px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .work__viewport{scroll-behavior:auto}
  .shot__img,.shot__frame.is-open .shot__img{transition-duration:1ms}
}

/* ── 3. over mij ───────────────────────────────────────── */
.about{display:grid;gap:clamp(30px,5vw,56px);align-items:center}
/* op een telefoon leest de kop eerst en blijft de foto een portret,
   geen beeldvullend blok */
.about__text{order:1}
.about__side{order:2;max-width:330px}
@media (min-width:860px){
  .about{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .about__text{order:2}
  .about__side{order:1;max-width:none}
}
.portrait{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 22%;
  border-radius:22px;background:var(--sky-4);
  box-shadow:0 16px 40px rgba(20,40,80,.12)}
.portrait__cap{
  margin:clamp(22px,3vw,30px) 0 0;padding-top:clamp(16px,2.4vw,22px);
  border-top:1px solid var(--sky-5);
  display:flex;flex-direction:column;gap:7px;
  font-size:15px;line-height:1.5;color:var(--ink);
}
.portrait__name{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
/* Gemeente en nummer staan naast elkaar met een echte tussenruimte in
   plaats van een middelpunt dat tegen de letters aan plakt. */
.portrait__meta{display:flex;flex-wrap:wrap;align-items:center;
  column-gap:14px;row-gap:4px;font-size:15px;color:var(--faint)}
.portrait__meta a{color:var(--blue);font-weight:600;text-decoration:none}
.portrait__meta a:hover{color:var(--blue-hover)}
.about__text .aside{padding-left:20px;border-left:2px solid var(--sky-5)}

/* ── 4. aanbod ─────────────────────────────────────────── */
.cards{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:20px}
@media (min-width:760px){.cards{grid-template-columns:repeat(3,1fr);gap:22px}}
.card{background:#fff;border:1px solid #E4EAF2;border-radius:22px;
  padding:clamp(26px,4vw,32px);box-shadow:0 12px 34px rgba(20,40,80,.05)}
.card p{margin:0;font-size:16.5px}
.h3 + p{max-width:none}

/* ── 5. proces ─────────────────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(28px,4vw,34px)}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step__nr{display:block;font-size:13px;color:var(--blue);margin-bottom:12px}
.step{padding-top:14px;border-top:1px solid #CFE1F8}
.step p{margin:0;font-size:16.5px}

/* ── 6. reviewkaartje ──────────────────────────────────── */
.review{display:grid;gap:clamp(28px,5vw,48px);align-items:center}
@media (min-width:860px){.review{grid-template-columns:1fr 1fr}}
.review__text p{font-size:17.5px}
/* het kaartje staat in een eigen luchtvak: wit product op wit papier
   verdwijnt, een zachte hemel eronder geeft het grond */
.review__img{aspect-ratio:4/5;border-radius:22px;border:1px solid #DCEAFB;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:clamp(20px,3vw,32px);
  width:100%;max-width:400px;margin-inline:auto;
  background:radial-gradient(115% 80% at 50% 100%,var(--sky-4) 0%,var(--sky-2) 58%,var(--sky-1) 100%)}
@media (min-width:860px){.review__img{max-width:440px}}
.review__img img{width:auto;height:100%;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 20px 26px rgba(20,40,80,.16))}

/* ── 7. vragen ─────────────────────────────────────────── */
.faq{border-top:1px solid #E4EAF2;margin-top:34px}
.faq__item{border-bottom:1px solid #E4EAF2}
.faq__h{margin:0;font-size:inherit;font-weight:inherit}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  width:100%;padding:20px 2px;background:none;border:0;cursor:pointer;
  font:600 17.5px/1.4 var(--font);letter-spacing:-.015em;color:var(--ink);text-align:left;
}
.faq__q:hover{color:var(--blue)}
.faq__q:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:8px}
.faq__icon{position:relative;flex:none;width:26px;height:26px;border-radius:999px;
  background:var(--sky-2);transition:background 120ms ease}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;border-radius:2px;
  background:var(--blue);transform:translate(-50%,-50%);transition:transform 240ms cubic-bezier(.22,1,.36,1);
}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq__panel{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 260ms cubic-bezier(.22,1,.36,1)}
.faq__panel.is-open{grid-template-rows:1fr}
.faq__inner{overflow:hidden}
.faq__inner p{margin:0;padding:0 0 22px;max-width:64ch;font-size:16.5px}

/* ── 8. slot ───────────────────────────────────────────── */
.cta{
  padding:clamp(70px,13vw,120px) 0;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,var(--sky-3) 0%,var(--sky-5) 55%,var(--sky-6) 100%);
}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 0%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 60%)}
.cta__in{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}
.cta__title{margin:0;color:var(--ink)}
.cta__lead{margin:0;max-width:60ch;font-size:17.5px;color:#1C2942}
.cta__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  text-align:left;max-width:56ch}
.cta__list li{position:relative;padding-left:22px;font-size:17px;line-height:1.55;color:#1C2942}
.cta__list li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;
  border-radius:999px;background:var(--blue)}
.cta__alt{margin:0;font-size:15px;color:#1C2942}

/* ── footer ────────────────────────────────────────────── */
.foot{background:var(--ink);color:var(--mist-500);padding:clamp(46px,9vw,64px) 0 36px;font-size:15px}
.foot__cols{display:grid;gap:32px;margin-bottom:clamp(30px,5vw,46px)}
@media (min-width:640px){.foot__cols{grid-template-columns:1.4fr 1fr 1fr;gap:36px}}
.foot__col{display:flex;flex-direction:column;gap:8px}
.foot__col p{margin:0;line-height:1.7}
.foot__brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;
  font-size:16px;letter-spacing:-.02em}
.foot__mark{width:16px;height:16px;border-radius:5px;background:#fff;transform:rotate(45deg)}
.foot__label{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.foot__col a{color:var(--mist-300);text-decoration:none}
.foot__mail{overflow-wrap:anywhere}
.foot__col a:hover{color:#fff}
.foot__bar{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  align-items:center;border-top:1px solid #232B3A;padding-top:22px;font-size:13.5px;color:var(--faint)}
.foot__legal{display:flex;gap:16px}
.foot__legal a{color:#8A93A6;text-decoration:none}
.foot__legal a:hover{color:#fff}

/* ── zonder beweging: meteen het eindbeeld ─────────────── */
@media (prefers-reduced-motion:reduce){
  .track{height:auto}
  .stage{position:relative;height:100vh}
  .hint{display:none}
  .hero{top:38%}
  .faq__panel,.faq__icon::before,.faq__icon::after,.btn{transition:none}
}

/* ── ankers: nooit onder de zwevende navigatie ─────────── */
html{scroll-behavior:smooth}
#werk,#over,#aanpak,#vragen,#boeken,#probleem{scroll-margin-top:92px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* ═══════════════════════════════════════════════════════════════
   /afspraak — de boekingspagina
   Bestemming van de QR-code op de brief. Wie hier komt is al
   overtuigd en moet kunnen boeken: geen navigatie bovenaan, geen
   beweging, geen tweede uitgang. Dezelfde kolom (.wrap--wide),
   dezelfde kaartvormen en dezelfde tokens als de homepage.
   ═══════════════════════════════════════════════════════════════ */

.book{position:relative;padding:0 0 clamp(50px,8vw,78px);background:var(--sky-2)}
/* Dezelfde overgang als de eerste witte sectie op de homepage, maar
   omgekeerd: van lucht naar pagina. De hemel is hier een verloop en
   geen foto — een tweede afbeelding is die milliseconden niet waard. */
.book::before{
  content:"";position:absolute;left:0;right:0;top:0;pointer-events:none;
  height:clamp(240px,42vw,420px);
  background:linear-gradient(180deg,var(--sky-4) 0%,rgba(214,232,253,.5) 45%,rgba(244,249,255,0) 100%);
}
.book > .wrap{position:relative}
/* Tekst blijft leesbaar smal, maar begint op dezelfde lijn als de
   kalender eronder. Eén linkerkant over de hele pagina. */
.bcol{max-width:640px}

/* ── wie u voor u hebt ─────────────────────────────────── */
/* Bewust geen link: elke uitgang bovenaan is een boeking minder. */
.idc{display:flex;align-items:center;gap:14px;
  padding:clamp(26px,5vw,40px) 0 clamp(24px,4vw,34px)}
.idc__ph{width:58px;height:58px;flex:none;border-radius:17px;
  background:var(--sky-4);box-shadow:0 6px 18px rgba(20,40,80,.14)}
.idc__name{margin:0;font-size:17px;font-weight:700;letter-spacing:-.02em;
  line-height:1.3;color:var(--ink)}
.idc__org{margin:3px 0 0;display:flex;align-items:center;gap:8px;
  font-size:14.5px;line-height:1.3;color:var(--faint)}
.idc__mark{width:11px;height:11px;flex:none;border-radius:3.5px;
  background:var(--ink);transform:rotate(45deg)}

/* ── de vraag, in zo weinig mogelijk woorden ───────────── */
.book__h1{margin:0 0 18px;font-size:clamp(27px,4.4vw,42px);line-height:1.08;
  font-weight:700;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.book__lead{margin:0 0 13px;font-size:17px;color:var(--body)}
.book__points{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.book__points li{position:relative;padding-left:22px;font-size:16.5px;
  line-height:1.55;color:var(--body)}
.book__points li::before{content:"";position:absolute;left:0;top:9px;
  width:7px;height:7px;border-radius:999px;background:var(--blue)}
.book__meta{margin:0 0 clamp(26px,4.5vw,36px);font-size:12px;
  letter-spacing:.04em;color:var(--faint)}

/* ── de kalender ───────────────────────────────────────── */
/* Google past de hoogte van het kader niet zelf aan, dus die zetten we
   hier — en meteen goed, want een hoogte die achteraf verspringt is
   precies wat op een telefoon een boeking kost. */
/* De hoogte blijft onder die van het scherm. Zou de kalender het scherm
   vullen, dan vangt hij elke veeg op en komt de bezoeker niet meer bij
   de rest van de pagina. */
.cal{position:relative;overflow:hidden;background:#fff;
  border:1px solid #E4EAF2;border-radius:22px;
  box-shadow:0 12px 34px rgba(20,40,80,.06);
  height:min(700px,80vh)}
@media (min-width:700px){.cal{height:640px}}
.cal__frame{position:relative;display:block;width:100%;height:100%;border:0}
.cal.is-ready .cal__ph{display:none}
/* Ligt eronder: zolang het kader nog leeg en doorzichtig is, ziet u dit. */
.cal__ph{position:absolute;inset:0;margin:0;display:flex;align-items:center;
  justify-content:center;padding:22px;text-align:center;
  font-size:12px;letter-spacing:.04em;color:var(--faint);
  background:repeating-linear-gradient(135deg,var(--sky-2) 0 12px,#fff 12px 24px)}

/* ── liever niet via video ─────────────────────────────── */
.alt{margin-top:clamp(26px,4.5vw,36px);background:#fff;
  border:1px solid #E4EAF2;border-radius:22px;
  padding:clamp(24px,4vw,32px);box-shadow:0 12px 34px rgba(20,40,80,.05)}
.alt__h{margin:0 0 10px;font-size:19px;line-height:1.25;font-weight:700;
  letter-spacing:-.025em;color:var(--ink)}
.alt p{margin:0 0 20px;max-width:52ch;font-size:16.5px;color:var(--body)}
.alt__btns{display:grid;gap:10px}
@media (min-width:520px){.alt__btns{grid-auto-flow:column;justify-content:start}}
/* Blauw blijft van de kalender. De uitwijkmogelijkheden krijgen
   dezelfde vorm, maar niet dezelfde nadruk. */
.btn--ghost{background:#fff;color:var(--ink);border:1px solid #CFE1F8;box-shadow:none}
.btn--ghost:hover{background:var(--sky-2);color:var(--ink)}
.btn--ghost:active{background:var(--sky-3);color:var(--ink);transform:translateY(1px)}

.gift{margin:clamp(24px,4vw,32px) 0 0;padding-left:20px;
  border-left:2px solid var(--sky-5);font-size:16px;color:var(--body)}
.gift strong{color:var(--ink);font-weight:600}

/* ── de weg terug naar de site ─────────────────────────── */
/* Staat in de paginastroom, niet zwevend: een vaste balk zou over de
   kalender liggen en die vangt zelf al elke veeg op. De kleur is die
   van de bovenkant van het verloop eronder, dus er is geen naad. */
.bnav{position:relative;z-index:2;background:var(--sky-4)}
.bnav__in{display:flex;align-items:center;gap:20px;
  padding:14px 0;min-height:56px}
.bnav__brand{display:flex;align-items:center;gap:9px;flex:none;
  font-weight:700;font-size:16px;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none}
.bnav__mark{width:16px;height:16px;border-radius:5px;background:var(--ink);
  transform:rotate(45deg)}
.bnav__links{display:flex;align-items:center;gap:22px;margin-left:auto}
.bnav__links a{font-size:15px;font-weight:500;color:var(--body);
  text-decoration:none;transition:color 90ms ease}
.bnav__links a:hover{color:var(--ink)}
.bnav a:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
@media (max-width:520px){
  .bnav__links{gap:16px}
  .bnav__links a{font-size:14px}
}

/* Wie via de QR-code komt wil boeken: één toets voorbij de balk. */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{position:static;display:block;width:100%;padding:12px 20px;
  background:var(--ink);color:#fff;font-weight:600;text-align:center;
  text-decoration:none}

/* De weg terug, ook helemaal onderaan. */
.back{display:inline-block;margin-top:clamp(30px,5vw,42px);
  font-size:16px;font-weight:600;color:var(--blue);text-decoration:none}
.back:hover{color:var(--blue-hover)}
.back:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}

/* Footer zonder de kolom "Site": op deze pagina is er niets te navigeren. */
.foot--slim .foot__cols--two{grid-template-columns:1fr}
@media (min-width:640px){.foot--slim .foot__cols--two{grid-template-columns:1.4fr 1fr}}

/* ═══════════════════════════════════════════════════════════════
   /privacy en /cookies — platte tekstpagina's op dezelfde .book-
   achtergrond en .bnav-balk. Puur leestekst, dus hier pas komt
   er marge tussen p/h2/ul te staan — elders regelt elk component
   dat zelf.
   ═══════════════════════════════════════════════════════════════ */
.legal{max-width:680px}
.legal__updated{margin:0 0 clamp(28px,4.5vw,40px);font-size:13px;color:var(--faint)}
.legal h2{margin:clamp(36px,5vw,48px) 0 14px;font-size:clamp(20px,2.4vw,24px);
  line-height:1.25;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.legal h2:first-of-type{margin-top:0}
.legal p{margin:0 0 16px;max-width:64ch}
.legal ul{margin:0 0 16px;padding-left:20px;max-width:64ch}
.legal li{margin:0 0 8px;line-height:1.6}
.legal a{font-weight:600}