/* ==================================================================
   LOOKINGINSIDE — ÉÉN STYLESHEET VOOR DE HELE SITE
   ------------------------------------------------------------------
   FEEDBACK: de site is van één lange pagina naar losse pagina's gegaan.
   De opmaak stond eerst midden in index.php; nu staat ze hier, in één
   bestand dat alle pagina's samen gebruiken. Dat scheelt de bezoeker
   laadtijd: de browser haalt dit bestand één keer op en hergebruikt het
   op elke volgende pagina.

   LET OP — pas je hier iets aan, verhoog dan het versienummer achter
   stijl.css in deel/kop.php (LI_VERSIE). Zonder dat blijft de browser
   het oude bestand tonen dat hij al in zijn geheugen heeft.
   ================================================================== */

:root{
  /* Zachte greige/pastel basis — tussen grijs en beige, naar de sfeer van de praktijkfoto */
  --bg:#f6f2eb;
  --bg-2:#efe9df;
  --panel:#fbf8f3;
  --text:#3a342c;
  --muted:#6f6659;
  --line:rgba(150,122,80,.24);
  --gold:#82602e;
  --gold-soft:#6f5225;
  --on-gold:#fffdf8;
  --clay:#935540;
  /* Feedback: "er staan verschillende lettertypes, dit moet 1 dezelfde
     worden voor de hele website." Daarom wijst --serif hieronder naar
     hetzelfde lettertype als --sans. Elke plek die var(--serif) gebruikt
     (de koppen, "LookingInside", de prijzen, de reviews, het "+"-teken
     bij de FAQ, het menu) toont nu Inter, net als de rest van de site.
     Cursieve accenten blijven gewoon schuin staan: dat komt van
     font-style en staat los van het lettertype.

     Wil je het sierlijke lettertype uit het ontwerp terug? Zet --serif
     dan op "Cormorant Garamond",Georgia,serif en zet het lettertype-
     bestand in deel/kop.php weer bij de Google Fonts-regel. */
  --serif:"Inter",system-ui,sans-serif;
  --sans:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
  --dur:1.1s;
  /* Hoogte van de vaste menubalk. Wordt gebruikt om onder de balk uit te
     komen bij het springen naar een anker en bij de kop van een pagina.
     Nagemeten bij de dichte balk: logo 80px + 2× 8px padding + 1px
     lijntje onderaan = 97px. Afgerond op 98px. */
  --nav-h:98px;
}
*{margin:0;padding:0;box-sizing:border-box}

/* ---------- Vrij scrollen ----------
   Het stoppen per sectie (scroll-snap) is eruit: de pagina haakte daardoor
   bij elke sectie vast, wat als stapsgewijs aanvoelde. Het scrollen gaat nu
   volledig vrij, precies zoals de browser het zelf doet.

   scroll-behavior:smooth blijft staan voor de vloeiende sprong wanneer je
   op een anker klikt, en scroll-padding-top zorgt dat je daarbij netjes
   ónder de vaste menubalk uitkomt in plaats van erachter. */
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--nav-h);
}
body{
  background:var(--bg);color:var(--text);font-family:var(--sans);
  font-weight:300;line-height:1.65;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.01em}
section{position:relative}
.wrap{width:min(1180px,90vw);margin-inline:auto}
.eyebrow{font-family:var(--sans);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:500}

/* ---------- Loader ---------- */
.page-loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:grid;place-items:center;transition:transform 1s cubic-bezier(.76,0,.24,1)}
.page-loader.done{transform:translateY(-100%)}
.loader-inner{text-align:center}
/* Logo op het laadscherm: het merk is het eerste wat je ziet. */
.loader-mark{width:clamp(84px,17vw,120px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;
  display:block;margin:0 auto 1.1rem;background:var(--panel);
  box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(58,52,44,.16);
  opacity:1;animation:loaderMark .9s var(--ease) both}
@keyframes loaderMark{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
.loader-word{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,5vw,2.2rem);color:var(--gold-soft);letter-spacing:.02em;margin-bottom:.4rem}
.loader-count{font-family:var(--serif);font-size:clamp(3.5rem,14vw,7rem);color:var(--text);font-variant-numeric:tabular-nums;line-height:1}
.loader-bar{width:min(200px,50vw);height:1px;background:var(--line);margin:1.4rem auto 0;overflow:hidden}
.loader-bar span{display:block;height:100%;width:0;background:var(--gold);transition:width .2s linear}

/* ---------- Custom cursor ---------- */
/* Start onzichtbaar en buiten beeld: anders stond er bij het laden even een
   rondje linksboven in de hoek. Wordt pas zichtbaar zodra de muis beweegt. */
.cursor{position:fixed;top:-200px;left:-200px;width:30px;height:30px;border:1px solid var(--gold);border-radius:50%;pointer-events:none;z-index:9998;opacity:0;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s,opacity .3s}
.cursor.ready{opacity:1}
.cursor.grow{width:70px;height:70px;background:rgba(157,123,65,.1)}
@media(hover:none){.cursor{display:none}}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;justify-content:space-between;
  padding:.6rem clamp(1rem,5vw,2.4rem);transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s;
  border-bottom:1px solid transparent}
.nav.solid{background:rgba(246,242,235,.86);backdrop-filter:blur(14px);border-bottom-color:var(--line);padding-block:.5rem}
/* Op de startpagina ligt de menubalk bovenaan over de lichte foto. Lichte
   letters zouden daar juist wegvallen, dus staan er donkere letters — met
   een zachte lichte gloed erachter, zodat ze leesbaar blijven waar de
   lichtstralen in de foto het felst zijn.

   Op de andere pagina's staat de balk vanaf de eerste pixel dicht
   (.solid, gezet in deel/kop.php), want daar ligt geen foto onder. */
.nav:not(.solid){--text:#3a2f1e;--muted:#5a4e3b;--gold:#7a5620;--gold-soft:#8a6427;
  --line:rgba(122,86,32,.30);--on-gold:#fffdf8;color:var(--text);
  text-shadow:0 1px 12px rgba(255,251,243,.75)}
.nav:not(.solid) .nav-cta{text-shadow:none}
.brand{font-family:var(--serif);font-size:1.45rem;letter-spacing:.02em;display:flex;align-items:center;gap:.75rem}
.brand b{color:var(--gold);font-weight:600}
/* Feedback: logo groot en met een zachte ring, zodat het merk meteen
   opvalt in de menubalk — dit is het enige exemplaar dat je nog ziet,
   en je ziet het op elke pagina terug.

   FEEDBACK 2026: het logo was ongeveer 58–72px en dat kwam te klein over.
   Gevraagd is 80–90px op de desktop, met 85px als voorkeur. Dat is nu de
   maat. Omdat de merknaam ernaast weg is, is daar ook ruimte voor.

   Het logo kromp vroeger merkbaar zodra je ging scrollen (72 → 58). Die
   sprong is bewust klein gehouden (85 → 80): op alle pagina's behalve de
   startpagina staat de balk namelijk meteen dicht, en dan zou je de
   gevraagde 85px nooit te zien krijgen. De balk zelf verandert nog wel:
   hij loopt vol en krijgt een lijntje onderaan.

   LET OP — verander je deze maat, pas dan ook --nav-h hierboven aan. Die
   moet gelijk zijn aan de hoogte van de dichte balk: logo + 2× de
   padding-block van .nav.solid (.5rem = 8px) + het lijntje eronder.
   Nu: 80 + 16 + 1 = 97px, afgerond 98px. */
.brand-mark{width:85px;height:85px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 1px var(--line),0 4px 14px rgba(58,52,44,.13);background:var(--panel);
  transition:width .5s var(--ease),height .5s var(--ease)}
.nav.solid .brand-mark{width:80px;height:80px}
/* NAGEMETEN — waarom er niets meer naast het logo staat.
   Toen de merknaam eruit ging, bleef hier eerst de regel "Architect van
   innerlijke transformatie" staan. Die regel is ongeveer 340px breed, en
   dat past niet op elke schermbreedte:

     tot 900px    de afspraakknop rechts komt ertegenaan
     901–1180px   past (het menu is dan een knopje)
     1181–1500px  het menu staat weer uitgeklapt: geen ruimte meer,
                  de regel werd platgedrukt tegen "Wie ben ik" aan
     vanaf 1500px past het weer

   Op een doorsnee laptop (1280 of 1440 breed) viel het dus juist stuk.
   In de balk staat nu alleen nog het logo — dat leest rustig en het kan
   op geen enkele breedte meer botsen. De zin zelf is niet verdwenen: hij
   staat in de voettekst van elke pagina, in de titel van het tabblad, en
   op de startpagina als de kop in beeld.

   Wil je hem hier tóch terug? Zet display:none hieronder om naar
   display:flex. Het HTML-blokje staat nog in deel/kop.php. */
.brand-tekst{display:none;flex-direction:column;line-height:1.02}
.brand-rol{font-family:var(--sans);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:400}
.nav-links{display:flex;gap:2rem;align-items:center;font-size:.82rem;letter-spacing:.06em}
.nav-links a{color:var(--muted);transition:color .3s}
.nav-links a:hover{color:var(--text)}

/* FEEDBACK: "waar moet ik klikken om verder te lezen." Op elke pagina
   staat het bijbehorende menupunt aangestreept met een fijn goudlijntje,
   zodat je altijd ziet waar je bent. */
.nav-links a.nu{color:var(--text);position:relative}
.nav-links a.nu::after{content:"";position:absolute;left:0;right:0;bottom:-.5rem;height:1px;background:var(--gold)}
.nav-menu a.nu{color:var(--gold-soft)}

/* Feedback 2: de afspraakknop staat vast in de menubalk, ook op de
   telefoon. Vanaf elke pagina is de agenda dus met één tik bereikbaar. */
.nav-acties{display:flex;align-items:center;gap:.6rem}
.nav-cta{display:inline-flex;align-items:center;gap:.45rem;background:var(--gold);color:var(--on-gold);
  border:1px solid var(--gold);padding:.6rem 1.15rem;border-radius:40px;font-size:.8rem;
  letter-spacing:.04em;white-space:nowrap;transition:background .4s,color .4s}
.nav-cta:hover{background:transparent;color:var(--gold-soft)}
.nav-cta .cta-kort{display:none}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:.4rem}
.nav-toggle span{width:26px;height:1.5px;background:var(--text);transition:.4s var(--ease)}

/* ---------- Taalkeuze: NL / FR ----------
   Twee kleine woordjes naast de afspraakknop. De taal waarin je nu kijkt
   is ingevuld, de andere is een gewone link. Het is bewust géén uitklap-
   menu: met twee talen kost dat alleen maar een extra tik. */
.taalkeuze{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:40px;
  overflow:hidden;font-family:var(--sans);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;flex:none}
.taalkeuze a,.taalkeuze span{display:block;padding:.42rem .6rem;line-height:1;color:var(--muted);transition:color .3s,background .3s}
.taalkeuze a:hover{color:var(--text);background:rgba(150,122,80,.10)}
.taalkeuze .nu{background:var(--gold);color:var(--on-gold);font-weight:500}

/* In het uitklapmenu op de telefoon staat de taalkeuze bovenaan, groter
   en met ruimte eromheen — daar is het een echte keuze en geen detail.
   De regels hieronder zijn expres uitgeschreven: het menu geeft élke <a>
   erin een groot sierlijk lettertype met een lijntje eronder, en dat mag
   deze twee knopjes niet overnemen. */
.nav-menu .taalkeuze{align-self:flex-start;margin-bottom:1.2rem}
.nav-menu .taalkeuze a,.nav-menu .taalkeuze span{
  font-family:var(--sans);font-size:.82rem;letter-spacing:.14em;
  padding:.62rem 1.1rem;border-bottom:0;opacity:1}
.nav-menu .taalkeuze a{color:var(--muted)}
.nav-menu .taalkeuze .nu{color:var(--on-gold)}

/* En onderaan in de voettekst, voor wie daar terechtkomt. flex-basis:100%
   zet hem op een eigen regel onder de footerlinks in plaats van ertussen. */
.foot-taal{flex-basis:100%;margin-top:.4rem}
/* Het menu begint onder de vaste balk en mag scrollen als het niet past. */
.nav-menu{position:fixed;inset:0;z-index:110;background:var(--bg-2);display:flex;flex-direction:column;justify-content:flex-start;gap:.2rem;
  padding:calc(var(--nav-h) + .7rem) clamp(1.4rem,7vw,3rem) 1.6rem;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  transform:translateY(-100%);transition:transform .7s var(--ease);visibility:hidden}
.nav-menu.open{transform:none;visibility:visible}
.nav-menu a{font-family:var(--serif);font-size:clamp(1.6rem,7.4vw,3rem);color:var(--text);padding:.3rem 0;border-bottom:1px solid var(--line);opacity:.9}
.nav-menu a span{font-family:var(--sans);font-size:.7rem;color:var(--gold);letter-spacing:.2em;display:block;margin-bottom:-.2rem}

/* ---------- Hero (alleen op de startpagina) ---------- */
.hero{min-height:100svh;min-height:100dvh;display:flex;align-items:flex-end;overflow:hidden;position:relative;
  --text:#3a2f1e;
  --muted:#5a4d38;
  --gold:#684813;
  --gold-soft:#7a5620;
  --line:rgba(122,86,32,.30);
  --panel:rgba(255,252,245,.72);
  --on-gold:#fffdf8;
  color:var(--text)}
.hero-media{position:absolute;inset:0;z-index:0;will-change:transform;
  background:radial-gradient(circle at 50% 40%,#f7ecd4 0%,#eedcb8 58%,#e2caa0 100%)}
/* Omdat de hele foto in beeld blijft, houd je randen over: op een breed
   scherm links en rechts, op een telefoon boven en onder. Die worden
   gevuld met diezelfde foto — uitvergroot en zwaar geblurd — zodat het
   beeld doorloopt in plaats van tegen een harde balk te eindigen. */
.hero-media::before{content:"";position:absolute;inset:0;
  background-image:var(--hero-foto);background-size:cover;background-position:center;
  filter:blur(46px) brightness(1.06) saturate(.92);transform:scale(1.25)}
.hero-media picture{position:absolute;inset:0;display:block}
.hero-media img{position:relative;width:100%;height:100%;
  object-fit:cover;object-position:center 46%}
/* Twee sluiers over de foto, allebei crème. Ze staan bewust ZWAK ingesteld:
   de linkerkant van deze foto is van zichzelf al een rustig, licht vlak.
   Hoger betekent een doffere foto, lager betekent moeilijker leesbare
   kleine letters. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg,rgba(252,247,238,.28) 0%,rgba(252,247,238,.24) 34%,rgba(252,247,238,.14) 52%,rgba(252,247,238,.05) 68%,rgba(252,247,238,0) 82%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(252,247,238,.06) 0%,rgba(252,247,238,.03) 26%,rgba(252,247,238,.12) 58%,rgba(250,244,233,.30) 84%,rgba(249,243,232,.38) 100%)}
.hero-content{position:relative;z-index:2;width:min(1180px,90vw);margin-inline:auto;
  padding-top:clamp(6rem,14vh,8rem);padding-bottom:clamp(3rem,9vh,6rem)}
.hero h1{font-size:clamp(2.4rem,7.5vw,5.4rem);font-weight:400;margin:.5rem 0 1rem;max-width:17ch}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero-sub{max-width:48ch;font-size:clamp(1rem,2.4vw,1.2rem);color:var(--text);margin-bottom:1.2rem}

/* ---------- Identiteit in de hero: nog alleen haar naam en rol ----------
   FEEDBACK: op de laptop stond het merk twee keer onder elkaar bovenaan.
   Een keer in de vaste menubalk (logo + "LookingInside") en een paar
   centimeter lager nog eens precies hetzelfde in het openingsscherm.

   Op de telefoon waren die twee in een eerdere ronde al weggehaald — daar
   was het "perfect". Nu gebeurt hetzelfde op élk scherm, zodat de laptop
   er net zo uitziet als de telefoon. Het exemplaar dat blijft staan is dat
   in de menubalk: dat zie je op elke pagina terug.

   Wat hier blijft staan is de regel die er wél iets bij vertelt: haar naam
   en haar certificering. Die staat nergens anders op de site.

   Wil je het logo of de naam hier ooit terug? Zet dan bij .hero-logo of
   .hero-merk hieronder de display:none om naar display:block. De rest van
   de opmaak staat er nog helemaal klaar voor. */
.hero-identiteit{display:flex;align-items:center;gap:0;margin-bottom:clamp(1rem,3vh,1.7rem)}
.hero-logo{display:none;width:clamp(84px,10vw,128px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;flex:none;
  background:#fbf8f3;box-shadow:0 0 0 1px var(--line),0 12px 30px rgba(90,66,26,.22)}
.hero-merk{display:none;font-family:var(--serif);font-size:clamp(1.5rem,4.4vw,2.3rem);line-height:1.05}
.hero-merk b{color:var(--gold);font-weight:600}
.hero-rol{display:block;font-family:var(--sans);font-size:clamp(.72rem,1.9vw,.86rem);
  letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin-top:0;font-weight:500}
.hero-pijlers{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0 0 1.9rem}
/* Siertje (lijntje + sterretje) uit het telefoonontwerp. Standaard uit:
   op de desktop blijft het kopje "Kijk naar binnen" boven de titel staan. */
.hero-ornament{display:none;align-items:center;gap:.7rem;margin:0 0 1rem}
.hero-ornament .ho-lijn{height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--gold))}
.hero-ornament .ho-lijn-kort{width:26px;background:linear-gradient(90deg,var(--gold),transparent)}
.hero-ornament .ho-ster{width:15px;height:15px;flex:none;fill:var(--gold)}
/* De drie diensten krijgen elk een eigen icoontje in dezelfde fijne
   lijnstijl: een lotus voor de energetische therapie, een blad voor life
   coaching en een bloem-van-het-leven voor de energetische berekening. */
.hero-pijlers li{display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--line);border-radius:40px;padding:.45rem .95rem;
  background:rgba(255,252,245,.62);backdrop-filter:blur(6px)}
.hero-pijlers svg{width:17px;height:17px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-size:.9rem;letter-spacing:.03em;
  padding:1rem 1.7rem;border-radius:48px;cursor:pointer;border:1px solid var(--gold);position:relative;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.btn-primary{color:var(--on-gold)}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);transform-origin:left;transition:transform .5s var(--ease)}
.btn-primary:hover{color:var(--on-gold)}
.btn-primary .arrow{transition:transform .4s var(--ease)}
.btn-primary:hover .arrow{transform:translateX(5px)}
.btn-ghost{color:var(--text);border-color:var(--line)}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--panel);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.btn-ghost:hover::before{transform:scaleX(1);transform-origin:left}
.scroll-hint{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--muted);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase}
.scroll-hint i{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ==================================================================
   PAGINAKOP — het openingsblok van elke ANDERE pagina
   ------------------------------------------------------------------
   FEEDBACK: "ik wil dat de bezoeker op een thema kan klikken en dan naar
   een aparte pagina gaat waar hij rustig kan lezen."

   Elke pagina begint daarom met een rustig, kort blok: het onderwerp in
   kleine gouden letters, de kop eronder, en één inleidende zin. Geen
   schermvullende foto zoals op de startpagina — je bent hier om te lezen,
   dus de tekst begint meteen.
   ================================================================== */
.paginakop{position:relative;background:var(--bg-2);border-bottom:1px solid var(--line);overflow:hidden;
  padding:calc(var(--nav-h) + clamp(2.2rem,7vh,4.2rem)) 0 clamp(2.2rem,7vh,4.2rem)}
.paginakop::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 16% 130%,rgba(157,123,65,.16),transparent 62%)}
.paginakop .wrap{position:relative;z-index:2}
.paginakop h1{font-size:clamp(2.1rem,6vw,4rem);font-weight:400;margin-top:.8rem;max-width:19ch}
.paginakop h1 em{font-style:italic;color:var(--gold-soft)}
.paginakop .paginakop-tekst{color:var(--muted);font-size:1.05rem;margin-top:1.3rem;max-width:54ch}

/* ==================================================================
   KAARTEN — de wegwijzer op de startpagina
   ------------------------------------------------------------------
   Zes kaarten, één per pagina. Elke kaart draagt het onderwerp in kleine
   gouden letters en daaronder de kop van die pagina, zodat je in één
   oogopslag ziet wat je waar vindt. Alle teksten komen uit /beheer/ —
   verandert Faïza daar een kop, dan verandert de kaart mee.
   ================================================================== */
.wegwijzer{padding:clamp(4rem,11vh,8rem) 0}
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.2rem;margin-top:clamp(2rem,5vh,3rem)}
.kaart{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:clamp(1.5rem,3vw,2.1rem);min-height:13rem;
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.kaart:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 12px 30px rgba(58,52,44,.08)}
.kaart-label{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:500}
.kaart h3{font-family:var(--serif);font-size:clamp(1.3rem,2.5vw,1.7rem);font-weight:500;margin:.75rem 0 0;line-height:1.16}
.kaart h3 em{font-style:italic;color:var(--gold-soft)}
.kaart-ga{margin-top:auto;padding-top:1.5rem;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
.kaart-ga .arrow{transition:transform .4s var(--ease)}
.kaart:hover .kaart-ga .arrow{transform:translateX(5px)}

/* ==================================================================
   PAGINANAV — verder lezen onderaan elke pagina
   ------------------------------------------------------------------
   Onderaan staat waar je heen kan: de vorige en de volgende pagina, met
   hun eigen naam erbij. Zo loopt een pagina nooit dood en hoef je niet
   terug naar boven om verder te klikken.
   ================================================================== */
.paginanav{border-top:1px solid var(--line);padding:clamp(2rem,5vh,3.2rem) 0}
.paginanav .wrap{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:space-between;align-items:flex-start}
.paginanav a{display:flex;flex-direction:column;gap:.35rem;max-width:min(24rem,100%)}
.paginanav a span{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.paginanav a b{font-family:var(--serif);font-size:clamp(1.15rem,2.6vw,1.4rem);font-weight:500;color:var(--text);transition:color .3s}
.paginanav a:hover b{color:var(--gold-soft)}
.paginanav .volgende{text-align:right;margin-left:auto;align-items:flex-end}

/* ---------- Reveal helpers ---------- */
.reveal-text{overflow:hidden}
.reveal-text .word{display:inline-block;transform:translateY(115%);opacity:0;transition:transform .9s var(--ease),opacity .9s}
.reveal-text .word.emph,.reveal-text .word em{font-style:italic;color:var(--gold-soft)}
.reveal-text.in .word{transform:none;opacity:1}
[data-reveal]{opacity:0;transform:translateY(42px);transition:opacity .9s ease,transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- Intro ---------- */
.intro{padding:clamp(5rem,12vh,9rem) 0}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.intro h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:400;max-width:16ch}
.intro h2 em{font-style:italic;color:var(--gold-soft)}
.intro p{color:var(--muted);font-size:1.05rem;margin-top:1.4rem;max-width:46ch}
/* Staand, zoals haar eigen praktijkfoto (1066x1600). Anders werd de
   foto tot een liggend kadertje geknepen en viel de helft weg. */
.intro-media{position:relative;aspect-ratio:2/3;border-radius:4px;overflow:hidden}
.intro-media img{width:100%;height:100%;object-fit:cover}
.intro-media::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent,rgba(58,52,44,.18))}

/* ---------- Diensten ---------- */
.diensten{padding:clamp(5rem,12vh,9rem) 0}
.sec-head{max-width:760px;margin-bottom:clamp(2.5rem,6vh,4rem)}
.sec-head h2{font-size:clamp(2.2rem,6vw,4rem);font-weight:400;margin-top:.8rem}
.sec-head h2 em{font-style:italic;color:var(--gold-soft)}
.dienst{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center;padding:clamp(2rem,5vh,3.4rem) 0;border-top:1px solid var(--line)}
.dienst:nth-child(even){grid-template-columns:1.1fr 0.9fr}
.dienst:nth-child(even) .dienst-media{order:-1}
.dienst-media{position:relative;aspect-ratio:16/11;border-radius:4px;overflow:hidden}
.dienst-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.media-card:hover img{transform:scale(1.07)}
.dienst-num{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.1rem}
.dienst h3{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:400;margin:.4rem 0 .9rem}
.dienst p{color:var(--muted);max-width:44ch}
.dienst .tag{display:inline-block;margin-top:1.1rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:.2rem}

/* media-card label (mobile-safe) */
.media-card{position:relative;overflow:hidden}
.card-label{position:absolute;left:0;right:0;bottom:0;padding:1.1rem;color:#fff;font-size:.85rem;letter-spacing:.04em;
  transform:translateY(18px);opacity:0;transition:.5s var(--ease);background:linear-gradient(transparent,rgba(15,11,8,.8))}
.media-card:hover .card-label{transform:none;opacity:1}
@media(hover:none){.card-label{opacity:1;transform:none}}

/* ---------- Sessies ---------- */
.sessies{padding:clamp(4rem,10vh,7rem) 0 clamp(3rem,7vh,5rem)}
.groepkop{font-family:var(--serif);font-style:italic;font-size:1.5rem;font-weight:400;color:var(--gold-soft);
  margin:2.6rem 0 1.2rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.groepkop:first-of-type{margin-top:0}
.sessie-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.3rem}
.sessie-kaart{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:6px;padding:1.7rem;transition:border-color .5s var(--ease),transform .5s var(--ease)}
.sessie-kaart:hover{border-color:var(--gold);transform:translateY(-3px)}
.sessie-kaart.uitgelicht{background:linear-gradient(160deg,var(--panel),rgba(157,123,65,.09))}
.sk-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.7rem}
.sk-meta{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.sk-prijs{font-family:var(--serif);font-size:1.9rem;color:var(--text);line-height:1}
.sessie-kaart h4{font-family:var(--serif);font-size:1.6rem;font-weight:500;margin-bottom:.6rem}
.sessie-kaart p{color:var(--muted);font-size:.96rem;flex:1}
.sk-opbouw{list-style:none;margin:1.1rem 0 0;padding:0}
.sk-opbouw li{color:var(--muted);font-size:.89rem;padding-left:1.1rem;position:relative}
.sk-opbouw li::before{content:"◆";position:absolute;left:0;top:.45rem;color:var(--gold);font-size:.55rem}
.sk-punten{margin-top:1.2rem;border-top:1px solid var(--line);padding-top:1rem}
.sk-punten b{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:.5rem}
.sk-punten ul{list-style:none;padding:0;margin:0}
.sk-punten li{color:var(--muted);font-size:.89rem;padding:.2rem 0 .2rem 1.1rem;position:relative}
.sk-punten li::before{content:"◆";position:absolute;left:0;top:.34rem;color:var(--gold);font-size:.55rem}

/* Sessie en tarief op één plek: de prijs staat op de sessiekaart zelf. */
.sk-tarief{margin-top:1.1rem;border-top:1px solid var(--line);padding-top:.8rem;color:var(--muted);font-size:.87rem}
.sk-tarief b{display:block;color:var(--gold);font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;font-size:.72rem;margin-bottom:.25rem}

/* ---------- De duidelijke afspraakknop ----------
   Eén rustig blok dat rechtstreeks naar de agenda van het boekingssysteem
   gaat, waar de vrije dagen en tijden staan. Staat onderaan elke pagina
   waar dat logisch is. */
.afspraak{margin-top:clamp(2.5rem,6vh,4rem);border:1px solid var(--line);border-radius:6px;
  background:linear-gradient(160deg,var(--panel),rgba(157,123,65,.10));
  padding:clamp(1.5rem,4vw,2.6rem);
  display:grid;grid-template-columns:1fr auto;gap:clamp(1.4rem,4vw,3rem);align-items:center}
.afspraak h3{font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.2rem);font-weight:500;margin-bottom:.5rem}
.afspraak p{color:var(--muted);max-width:54ch;margin:0}
.afspraak .agenda-noot{font-size:.88rem;margin-top:.9rem}
.afspraak-acties{display:flex;flex-direction:column;gap:.8rem}
.afspraak-acties .btn{justify-content:center;white-space:nowrap}
/* Onderaan bij het contactformulier staat één knop, gecentreerd. */
.cta-acties{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:1.8rem}

/* ---------- Waarvoor ----------
   De secties wisselen bewust van achtergrond, zodat je op een lange
   pagina ziet waar het ene onderwerp ophoudt en het volgende begint.
   Op "Mijn methode" is de volgorde: architectuur (licht), voor wie
   (greige), waarvoor (licht). Verplaats je een sectie, kijk dan of
   twee gelijke kleuren niet naast elkaar komen te staan — dan lopen ze
   in elkaar over tot één blok. Staat dat een keer niet anders uit te
   leggen, geef de tweede dan de klasse "streep" mee (zie onderaan). */
.waarvoor{padding:clamp(4rem,10vh,7rem) 0}
.themas{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.6rem 1.6rem;padding:0}
.themas li{color:var(--muted);padding:.55rem 0 .55rem 1.4rem;position:relative;border-bottom:1px solid var(--line)}
.themas li::before{content:"◆";position:absolute;left:0;top:.85rem;color:var(--gold);font-size:.55rem}
.voetnoot{color:var(--muted);margin-top:2rem;max-width:60ch;font-size:.95rem}

/* ---------- Voor wie ---------- */
.voorwie{padding:clamp(4rem,10vh,7rem) 0;background:var(--bg-2)}

/* Een dun scheidingslijntje voor het geval twee secties met dezelfde
   achtergrondkleur toch onder elkaar moeten staan. Zet dan "streep" bij
   de klasse van de tweede: <section class="intro streep"> */
.streep{border-top:1px solid var(--line)}
.wie-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem 2.2rem}
.wie-grid article{border-top:1px solid var(--line);padding-top:1.1rem}
.wie-grid h4{font-family:var(--serif);font-size:1.3rem;font-weight:500;margin-bottom:.5rem}
.wie-grid p{color:var(--muted);font-size:.94rem}

/* ---------- Workshops ---------- */
.workshops{padding:clamp(4rem,10vh,7rem) 0}
.ws-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.ws-lijst{list-style:none;padding:0;margin-top:1.4rem}
.ws-lijst li{color:var(--muted);padding:.7rem 0 .7rem 1.5rem;position:relative;border-bottom:1px solid var(--line)}
.ws-lijst li::before{content:"◆";position:absolute;left:0;top:1.05rem;color:var(--gold);font-size:.55rem}
.ws-lijst b{color:var(--text);font-weight:400;display:block}

/* ---------- Werkwijze (animated step indicator) ---------- */
.werkwijze{padding:clamp(5rem,12vh,9rem) 0;background:var(--bg-2)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.5rem}
.step{position:relative;padding-top:2.2rem}
.step .dot{position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;border:1px solid var(--gold);background:var(--bg-2)}
.step .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform .6s var(--ease)}
.step.on .dot::after{transform:scale(1)}
.step-line{position:absolute;top:6.5px;left:14px;right:-1.4rem;height:1px;background:var(--line);overflow:hidden}
.step-line i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.step.on .step-line i{transform:scaleX(1)}
.step:last-child .step-line{display:none}
.step h4{font-family:var(--serif);font-size:1.5rem;font-weight:500;margin-bottom:.4rem}
.step p{color:var(--muted);font-size:.92rem}

/* ---------- Architectuur ---------- */
.architectuur{padding:clamp(4rem,10vh,7rem) 0}
.arch-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.architectuur h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:400;margin:.8rem 0 1.2rem;max-width:16ch}
.architectuur h2 em{font-style:italic;color:var(--gold-soft)}
.architectuur p{color:var(--muted);font-size:1.05rem;margin-bottom:1rem;max-width:46ch}
.arch-pillars{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.arch-pillars span{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--line);border-radius:40px;padding:.5rem 1rem}

/* ---------- Thema: één beeld naast één tekst ---------- */
.thema{padding:clamp(4rem,10vh,7rem) 0}
.thema-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.thema-grid.omgekeerd{grid-template-columns:1.05fr 1fr}
.thema-grid.omgekeerd .thema-media{order:2}
.thema-media{position:relative;border-radius:4px;overflow:hidden;background:var(--bg-2)}
.thema-media img{width:100%;height:auto;display:block}
.thema h2{font-size:clamp(2rem,5vw,3.2rem);font-weight:400;margin:.8rem 0 1.2rem;max-width:18ch}
.thema h2 em{font-style:italic;color:var(--gold-soft)}
.thema p{color:var(--muted);font-size:1.05rem;margin-bottom:1rem;max-width:46ch}

/* ---------- Over ---------- */
.over{padding:clamp(4rem,10vh,7rem) 0}
.over-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:center}
/* Staande verhouding, dicht bij die van de portretfoto's zelf
   (1078x1600 en 1103x1600). Zo wordt onderin niets weggesneden:
   in beide foto's staan haar handen daar. */
.over-media{aspect-ratio:11/16;border-radius:4px;overflow:hidden;position:relative}
.over-media img{width:100%;height:100%;object-fit:cover}
.over h2{font-size:clamp(2rem,5vw,3.2rem);font-weight:400;margin:.8rem 0 1.2rem}
.over h2 em{font-style:italic;color:var(--gold-soft)}
.over p{color:var(--muted);margin-bottom:1rem;max-width:48ch}
.sign{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--gold-soft);margin-top:1rem}

/* ---------- Reviews ---------- */
.reviews{padding:clamp(4rem,10vh,7rem) 0;background:var(--bg-2)}
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.6rem;margin-top:2.5rem}
.review-kaart{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:6px;padding:clamp(1.7rem,3.4vw,2.4rem);transition:border-color .5s var(--ease),transform .5s var(--ease)}
.review-kaart:hover{border-color:var(--gold);transform:translateY(-3px)}
.review-mark{font-family:var(--serif);font-style:italic;font-size:2.6rem;line-height:1;color:var(--gold);display:block;margin-bottom:.3rem}
.review-tekst{font-family:var(--serif);font-style:italic;font-size:1.1rem;line-height:1.55;color:var(--text);flex:1}
.review-auteur{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;white-space:nowrap;padding:clamp(2.5rem,6vh,4rem) 0;border-block:1px solid var(--line)}
.marquee-track{display:inline-flex;gap:2.4rem;align-items:center;animation:scrollx 34s linear infinite;will-change:transform}
.marquee-track span{font-family:var(--serif);font-size:clamp(1.8rem,5vw,3rem);color:var(--text);opacity:.85}
.marquee-track b{color:var(--gold);font-size:.8rem}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ---------- FAQ ---------- */
.faq{padding:clamp(4rem,10vh,7rem) 0;background:var(--bg-2)}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:0;color:var(--text);font-family:var(--serif);font-size:clamp(1.2rem,3.4vw,1.8rem);
  text-align:left;padding:1.5rem 3rem 1.5rem 0;cursor:pointer;position:relative;display:flex}
.faq-q::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);color:var(--gold);font-family:var(--sans);font-weight:300;transition:transform .4s var(--ease)}
.faq-item.open .faq-q::after{content:"–"}
.faq-a{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.faq-a p{color:var(--muted);padding:0 3rem 1.6rem 0;max-width:60ch}

/* ---------- CTA ---------- */
.cta{padding:clamp(4rem,11vh,8rem) 0;position:relative;overflow:hidden;text-align:center}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(157,123,65,.13),transparent 60%)}
.cta-inner{position:relative;z-index:2;width:min(720px,90vw);margin-inline:auto}
.cta h2{font-size:clamp(2.4rem,8vw,5rem);font-weight:400}
.cta h2 em{font-style:italic;color:var(--gold-soft)}
.cta p{color:var(--muted);margin:1.2rem auto 2rem;max-width:42ch}
.cta-form{display:grid;gap:1rem;max-width:520px;margin:2.4rem auto 0;text-align:left}
.field{position:relative}
.field label{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.field input,.field textarea{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:4px;
  color:var(--text);font-family:var(--sans);font-size:1rem;padding:.9rem 1rem;transition:border-color .3s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field .err{color:var(--clay);font-size:.78rem;margin-top:.35rem;display:none}
.field.invalid input,.field.invalid textarea{border-color:var(--clay)}
.field.invalid .err{display:block}
.form-note{font-size:.86rem;color:var(--muted);text-align:center}
.form-ok{display:none;background:rgba(157,123,65,.09);border:1px solid var(--line);border-radius:4px;padding:1.2rem;text-align:center;color:var(--gold-soft)}
.form-ok.show{display:block}

/* Contactgegevens onderaan de contactpagina */
.contact-gegevens{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem;
  margin-top:clamp(2.4rem,6vh,3.6rem);text-align:left}
.contact-gegevens article{border-top:1px solid var(--line);padding-top:1.1rem}
.contact-gegevens b{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin-bottom:.45rem}
.contact-gegevens a,.contact-gegevens span{color:var(--muted);font-size:.98rem;transition:color .3s}
.contact-gegevens a:hover{color:var(--gold-soft)}

/* ---------- Footer ---------- */
footer{padding:clamp(2.6rem,7vh,3.6rem) 0;border-top:1px solid var(--line);background:var(--bg-2)}
.foot-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot-brand{font-family:var(--serif);font-size:1.7rem;display:flex;align-items:center;gap:.9rem}
.foot-brand b{color:var(--gold)}
.foot-mark{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;background:var(--panel);
  box-shadow:0 0 0 1px var(--line),0 6px 18px rgba(58,52,44,.12)}
.foot-rol{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-soft)}
footer small{color:var(--muted);display:block;margin-top:.6rem;font-size:.86rem}
.foot-links{display:flex;flex-direction:column;gap:.5rem;font-size:.85rem;color:var(--muted)}
.foot-links a:hover{color:var(--text)}

/* Instagram-icoon dat doorlinkt, en het WhatsApp-nummer ergens duidelijk
   maar stijlvol. Beide staan hier samen in de footer. */
.foot-social{display:flex;gap:.7rem;margin-top:1.1rem}
.foot-social a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line);border-radius:50%;color:var(--gold-soft);transition:border-color .3s,color .3s,transform .3s}
.foot-social a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.foot-social svg{width:18px;height:18px}
.foot-whatsapp-nummer{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);
  font-size:.86rem;margin-top:.6rem;transition:color .3s}
.foot-whatsapp-nummer:hover{color:var(--gold)}

/* Vaste WhatsApp-knop rechtsonder: op elke pagina met één tik bereikbaar. */
.wa-float{position:fixed;right:clamp(1rem,3vw,1.6rem);bottom:clamp(1rem,3vw,1.6rem);z-index:150;
  display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;box-shadow:0 6px 20px rgba(37,211,102,.4);transition:transform .35s var(--ease),box-shadow .35s}
.wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 26px rgba(37,211,102,.5)}
.wa-float svg{width:28px;height:28px}
/* Zolang het mobiele menu openstaat hoort de knop weg te zijn: hij ligt
   anders (z-index 150 tegen 110) bovenop het menu. */
body.menu-open .wa-float{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s}
@media(max-width:600px){.wa-float{width:50px;height:50px;right:1rem;bottom:1rem}.wa-float svg{width:25px;height:25px}}

/* De vaste balk onderaan de telefoon is op verzoek van Faïza verwijderd en
   komt niet terug. De afspraakknop staat in plaats daarvan in de menubalk
   bovenaan, in het openingsscherm, onder de sessies en op de contactpagina. */

/* ---------- Responsive ---------- */
/* FEEDBACK punt 1: het menupunt heet "Energetische berekening" en niet
   meer kort "Berekening". Dat is ruim twee keer zo lang, en samen met de
   zes menupunten wordt de balk daardoor breed. Hier staan de menupunten
   dichter bij elkaar en iets kleiner, en krimpt het logo een maat, zodat
   ze niet tegen de merknaam links en de afspraakknop rechts aan duwen.

   NAGEMETEN: met deze maten is de hele balk ongeveer 1130px breed. Onder
   die grens past het niet meer op één regel — daarom klapt hij bij
   1180px dicht tot het menuknopje. Maak je een menupunt langer, controleer
   dan of die 1180 nog klopt.

   Sinds er links alleen nog een logo staat, is de balk daar zo'n 350px
   smaller. Het logo hoeft hier daarom niet meer te krimpen: de gevraagde
   85px blijft staan tot aan de telefoon. Wat wél blijft, is dat de
   menupunten hier dichter op elkaar gaan staan. */
@media(max-width:1400px){
  .nav-links{gap:1.1rem;font-size:.75rem}
  .brand{font-size:1.2rem;gap:.55rem}
}
@media(max-width:1180px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
}
@media(max-width:900px){
  .intro-grid,.over-grid{grid-template-columns:1fr}
  .intro-media{order:-1;max-width:min(420px,100%);margin-inline:auto}
  .dienst,.dienst:nth-child(even){grid-template-columns:1fr}
  .dienst-media,.dienst:nth-child(even) .dienst-media{order:-1}
  .steps{grid-template-columns:1fr 1fr;gap:1.8rem 1.2rem}
  .step-line{display:none}
  /* Niet platdrukken tot een liggend kader: dan verdwijnen haar handen.
     In plaats daarvan de breedte begrenzen en centreren. */
  .over-media{max-width:min(420px,100%);margin-inline:auto}
  .ws-grid{grid-template-columns:1fr}
  .arch-grid{grid-template-columns:1fr}
  .arch-grid .thema-media{order:-1;max-width:min(520px,100%);margin-inline:auto}
  .thema-grid,.thema-grid.omgekeerd{grid-template-columns:1fr}
  .thema-grid .thema-media,.thema-grid.omgekeerd .thema-media{order:-1;max-width:min(520px,100%);margin-inline:auto}
  .paginanav .wrap{flex-direction:column}
  .paginanav .volgende{text-align:left;margin-left:0;align-items:flex-start}
}
@media(max-width:600px){
  /* De menubalk is op de telefoon lager dan op de desktop. Deze waarde moet
     meebewegen met de hoogte van de balk: logo 68px + 2× 8px padding +
     1px lijntje = 85px. Klopt dit getal niet, dan komt de kop van een
     pagina net onder of net achter de balk uit. */
  :root{--nav-h:85px}
  .nav{padding-inline:.9rem}
  .brand{font-size:1.15rem;gap:.55rem}
  /* Gevraagd voor de telefoon: 65–70px. Hier 68px, en niet kleiner zodra je
     scrolt — naast het logo staan alleen nog de afspraakknop en het
     menuknopje, dus die ruimte is er. */
  .brand-mark,.nav.solid .brand-mark{width:68px;height:68px}
  .nav-cta{padding:.5rem .85rem;font-size:.74rem}
  /* De taalkeuze past er in de balk niet meer bij naast het logo, de
     merknaam, de afspraakknop én het menuknopje. Op de telefoon staat ze
     daarom bovenaan in het uitklapmenu (en nog eens in de voettekst). */
  .nav-acties .taalkeuze{display:none}
  /* In het aangeleverde ontwerp is de knop "Afspraak" bovenin een LICHT
     crèmekleurig pilletje met donkere letters. Zodra je scrolt en de balk
     dichttrekt (.solid), gaat hij terug naar de gewone gouden knop. */
  .nav:not(.solid) .nav-cta{background:rgba(252,246,234,.82);color:#5e4418;
    border-color:rgba(122,86,32,.30);backdrop-filter:blur(6px)}

  /* ==============================================================
     TELEFOON — OPENINGSSCHERM VOLGENS HET AANGELEVERDE ONTWERP
     --------------------------------------------------------------
     Het ontwerp werkt met twee kolommen die in elkaar overlopen:
     LINKS een rustig, licht crèmevlak met alle tekst, RECHTS het
     gouden handbeeld.

     (1) DE HELE HAND IN BEELD. De foto wordt op BREEDTE gezet in
         plaats van bijgesneden: 116% van de schermbreedte. Daarmee
         staat de rechterrand van de hand (85% van het bestand) op
         0,85 x 1,16 = 99% van het scherm — dus net binnen beeld, hoe
         hoog dit vlak ook wordt. 116% is een maximum, geen
         smaakwaarde: hoger en de pink valt weer van het scherm.

         De foto hangt aan de ONDERkant. Daar staan de handpalm, de
         lotus en het gouden lijnwerk. Bovenaan lopen de lichtstralen
         via een korte vervaging over in de geblurde vulling eronder.
     ============================================================== */
  .hero-media img{position:absolute;left:0;right:auto;top:auto;bottom:0;
    width:116%;max-width:none;height:auto;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 15%);
            mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 15%)}
  /* De geblurde vulling eronder pakt dan ook de staande foto. */
  .hero-media::before{background-image:var(--hero-foto-mobiel,var(--hero-foto))}
  /* (2) Een crèmesluier over de linkerkolom. Vanaf ongeveer 86% is hij
     nul, zodat de hand rechts onaangetast in kleur staat. */
  .hero::before{background:linear-gradient(100deg,
    rgba(250,244,234,.62) 0%,rgba(250,244,234,.60) 30%,rgba(250,244,234,.53) 46%,
    rgba(250,244,234,.34) 58%,rgba(250,244,234,.11) 72%,rgba(250,244,234,0) 86%)}
  .hero::after{background:linear-gradient(180deg,
    rgba(252,247,238,0) 0%,rgba(252,247,238,0) 55%,
    rgba(251,245,235,.14) 78%,rgba(250,244,233,.28) 100%)}
  /* Een zachte lichte gloed achter de letters zelf, zodat ze ook op de
     overgang naar de foto rustig leesbaar blijven. */
  .hero-identiteit,.hero h1,.hero-sub{
    text-shadow:0 1px 10px rgba(252,247,238,.7)}
  /* De vaste WhatsApp-knop staat rechtsonder in beeld. Zonder deze extra
     ruimte onderaan ligt hij precies over het rechteruiteinde van de
     onderste knop heen, en tik je op de verkeerde knop. */
  .hero-content{padding-top:5.2rem;padding-bottom:5.4rem}
  /* (3) De tekst blijft links van de gravure. NAGEMETEN op deze foto: de
     gegraveerde vingers beginnen bij 55% van het bestand, en met de foto
     op 116% is dat 64% van het scherm. Zet je deze getallen hoger, dan
     komt de tekst er weer overheen — dat was precies de klacht. */
  .hero-identiteit,.hero h1,.hero-sub,.hero-ornament{max-width:64%}
  .hero-pijlers{max-width:68%}
  /* Op het telefoonontwerp staat boven de titel geen kopje "Kijk naar
     binnen", maar het lijntje met het sterretje. */
  .hero .eyebrow{display:none}
  .hero-ornament{display:flex}
  /* De maat is afgestemd op Inter. Inter is breder dan het sierlijke
     lettertype uit het ontwerp: bij een grotere maat past het langste
     woord ("transformatie") niet meer op één regel in deze kolom. */
  .hero h1{font-size:clamp(1.6rem,7.4vw,2.4rem);line-height:1.2;margin:.1rem 0 1rem}
  .hero-sub{font-size:.93rem;line-height:1.8;margin-bottom:1.6rem}
  /* De drie diensten staan in het ontwerp ONDER elkaar, als open gouden
     pillen in plaats van gevulde labels. */
  .hero-pijlers{flex-direction:column;align-items:flex-start;gap:.65rem;margin-bottom:1.8rem}
  .hero-pijlers li{font-size:.7rem;letter-spacing:.11em;padding:.72rem 1.1rem;
    border-color:rgba(122,86,32,.38);background:rgba(255,252,245,.22);backdrop-filter:none}
  .hero-pijlers svg{width:20px;height:20px;stroke-width:1.15}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  /* In het ontwerp is de afspraakknop een zacht gouden verloop (lichter
     links, dieper naar rechts) in plaats van één vlakke kleur. */
  .hero .btn-primary{border-color:transparent}
  .hero .btn-primary::before{background:linear-gradient(100deg,#c9a44f 0%,#bb8f3f 52%,#a87c33 100%)}
  /* "Bekijk de sessies" heeft geen eigen vulling — alleen een rand en
     tekst in dezelfde kleur — en viel daardoor weg tegen de foto op
     plekken met te weinig contrast. Met een lichte, doorschijnende
     vulling is de knop nu altijd een herkenbaar "kaartje". */
  .hero .btn-ghost{background:rgba(255,252,245,.78);backdrop-filter:blur(6px);border-color:rgba(122,86,32,.35)}
  .steps{grid-template-columns:1fr}
  .scroll-hint{display:none}

  /* Het dubbele logo en de dubbele merknaam in het openingsscherm staan
     nu op élk scherm uit, hierboven bij .hero-identiteit. Wat hier
     overblijft is alleen de krappere marge die een telefoon nodig heeft. */
  .hero-identiteit{margin-bottom:1rem}

  .intro,.diensten,.voorwie,.faq,.thema,.architectuur,.over,
  .workshops,.werkwijze,.waarvoor,.wegwijzer,.reviews{padding-block:clamp(2.4rem,7vh,3.4rem)}
  .sessies{padding:clamp(2.2rem,6vh,3rem) 0 clamp(1.8rem,5vh,2.4rem)}
  .cta{padding-block:clamp(2.8rem,8vh,3.8rem)}
  .paginakop{padding-top:calc(var(--nav-h) + 1.8rem);padding-bottom:1.8rem}
  .sec-head{margin-bottom:1.5rem}
  .sec-head h2{font-size:clamp(1.6rem,7.5vw,2.1rem)}
  .groepkop{margin:1.7rem 0 .9rem;font-size:1.35rem}
  .afspraak{margin-top:1.9rem;grid-template-columns:1fr;gap:1.4rem}
  .afspraak-acties .btn{width:100%}
  .marquee{padding-block:1.8rem}
  .kaart{min-height:0}
  /* Ook hier ruimte vrijhouden voor de vaste WhatsApp-knop rechtsonder. */
  footer{padding:2.2rem 0 5.4rem}
}
/* Korte telefoonschermen (bijvoorbeeld 360x640). Daar was het
   openingsscherm ongeveer 50px te hoog: de onderste knop schoof dan onder
   de vaste WhatsApp-knop, en dan tik je op de verkeerde knop. */
@media(max-width:600px) and (max-height:720px){
  .hero-content{padding-top:5rem;padding-bottom:4.6rem}
  .hero-identiteit{margin-bottom:.7rem}
  .hero h1{font-size:clamp(1.7rem,7.4vw,2.3rem);margin:.3rem 0 .6rem}
  .hero-sub{margin-bottom:.7rem}
  .hero-pijlers{gap:.4rem;margin-bottom:1rem}
  .hero-pijlers li{font-size:.66rem;letter-spacing:.08em;padding:.38rem .7rem}
  .hero-actions{gap:.6rem}
  .btn{padding:.85rem 1.4rem}
}
@media(max-width:440px){
  /* Op een smalle telefoon past "Maak een afspraak" niet naast de merknaam.
     De knop in de balk krijgt dan de korte tekst "Afspraak". */
  .nav-cta .cta-lang{display:none}
  .nav-cta .cta-kort{display:inline}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .page-loader,.reveal-text .word,[data-reveal]{transition:none!important}
  .loader-mark{animation:none}
  .reveal-text .word,[data-reveal]{transform:none;opacity:1}
  .marquee-track,.scroll-hint i{animation:none}
}