/* =======================================================================
   Elke Voetreflexologie — design system
   1-op-1 teruggeport uit de originele styles.css/__root.tsx (Lovable-bron),
   plus alléén de expliciet afgesproken content-wijzigingen. Geen eigen
   herontwerp van kleuren/radius/typografie — dat hoorde er niet in.
   ======================================================================= */

:root{
  /* --- kleur: exacte originele tokens --- */
  --linen:        #F1E2E2;   /* pagina-achtergrond */
  --linen-2:      #EAE1E0;   /* sectie-alt achtergrond */
  --linen-3:      #AC93BE;   /* paars, gesampled uit het echte logo (niet meer roze) */
  --moss:         #705F7E;   /* primaire kleur — knoppen, accenten (2026-09-03 verdiept: was #9B8CA8, gaf met witte knoptekst maar 3.13:1 contrast — WCAG AA vereist 4.5:1) */
  --moss-dark:    #4D4543;   /* kopregels, donkere band, hover (warm bruin-grijs) */
  --moss-deep:    #3F3835;   /* diepste schaduw */
  --ochre:        #BFB2C4;   /* zacht lila-grijs accent */
  --ochre-dark:   #705F7E;   /* eyebrows, labels (2026-09-03 verdiept: was #9B8CA8, gaf maar 2.5–2.9:1 contrast op linen/cream/linen-2 — nu 4.5:1+) */
  --ochre-soft:   #BFB2C4;   /* zachte highlights */
  --cream:        #FDF2F2;   /* kaarten, lichte vlakken */
  --ink:          #4D4543;   /* bodytekst */
  --ink-2:        #6A5F5D;   /* subtiele tekst */
  --line:         rgba(77, 69, 67, 0.12);
  --line-strong:  rgba(77, 69, 67, 0.25);
  --radius:       0.75rem;   /* 12px — origineel, niet 22px */
  --header-h:     76px;
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body:    "Karla", "Segoe UI", sans-serif;
  --shadow-soft:  0 14px 26px -10px rgba(112,95,126,.45);
  --shadow-lift:  0 18px 40px -18px rgba(61,54,52,.35);
}

/* --- reset --- */
*{ box-sizing:border-box; border-color:var(--line); }
*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ overflow-x:clip; }
body{
  margin:0;
  background:var(--linen);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
p{ margin:0; }
button{ font:inherit; cursor:pointer; background:none; border:none; color:inherit; }
input,textarea,select{ font:inherit; }

h1,h2,h3{ font-family:var(--font-display); color:var(--moss-dark); font-weight:500; line-height:1.06; margin:0; }
h4{ font-family:var(--font-display); font-weight:500; margin:0; }
h1 em, h2 em, h3 em{ font-style:italic; color:var(--ochre-dark); font-family:var(--font-display); }

.container{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:1.4rem; }
@media (min-width:768px){ .container{ padding-inline:3rem; } }
.container-narrow{ width:100%; max-width:760px; margin-inline:auto; padding-inline:1.4rem; }
@media (min-width:768px){ .container-narrow{ padding-inline:3rem; } }

section{ position:relative; }
.section{ padding:6rem 0; }         /* py-24, meest gebruikte sectie-padding */
.section-tight{ padding:5rem 0; }    /* py-20, gebruikt op /voetreflex en /over-mij */
.section-alt{ background:var(--linen-2); }
.section-cream{ background:var(--cream); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body); font-weight:700;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ochre-dark);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--ochre-dark); }
.body-text{ font-size:1.02rem; color:var(--ink-2); line-height:1.85; max-width:60ch; }
.lead{ font-size:1.15rem; line-height:1.8; color:var(--ink-2); max-width:46ch; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:1000;
  background:var(--moss-dark); color:#fff; padding:.8rem 1.4rem; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

/* =========================== BUTTONS (exact origineel) =========================== */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.9rem 1.6rem;
  font-family:var(--font-body); font-weight:700;
  font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
  border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .25s, box-shadow .25s, background .25s, color .25s;
  white-space:nowrap;
}
.btn-solid{ background:var(--moss); color:#fff; }
.btn-solid:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); background:var(--moss-dark); color:#fff; }
.btn-line{ border-color:var(--moss-dark); color:var(--moss-dark); background:transparent; }
.btn-line:hover{ background:var(--moss-dark); color:var(--cream); }
.btn-on-dark{ border-color:var(--cream); color:var(--cream); }
.btn-on-dark:hover{ background:var(--cream); color:var(--moss-dark); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* =========================== SCROLL PROGRESS =========================== */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; background:var(--moss);
  z-index:200; width:0%; transition:width .05s linear;
}

/* =========================== HEADER =========================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:150;
  padding:1.25rem 0; /* py-5 */
  transition:padding .35s, background .35s, box-shadow .35s;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.site-header.solid{
  padding:.75rem 0; /* py-3 */
  background:rgba(241,226,226,.88);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.brand{ display:inline-flex; align-items:center; }
.brand img{ height:64px; width:auto; transition:height .3s; }
.site-header.solid .brand img{ height:52px; }

.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a{
  position:relative; padding-bottom:4px;
  font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-2); transition:color .3s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--ochre-dark); transform:scaleX(0); transform-origin:left; transition:transform .35s;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--moss-dark); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:1rem; }
.burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:0; }
.burger span{ display:block; width:22px; height:1.6px; background:var(--moss-dark); margin:0 auto; transition:transform .3s, opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:140;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.8rem;
  background:var(--linen);
  transform:translateY(-100%);
  transition:transform .5s cubic-bezier(.7,0,.2,1);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a:not(.btn){ font-family:var(--font-display); font-size:1.9rem; color:var(--moss-dark); }
.mobile-menu .btn{ margin-top:.6rem; }

@media (max-width:1023px){
  .nav-links{ display:none; }
  .header-actions .btn-line{ display:none; }
  .burger{ display:flex; }
}

/* =========================== FOOTER =========================== */
.site-footer{ margin-top:7rem; padding:4rem 0 2rem; background:var(--linen-2); border-top:1px solid var(--line); }
.footer-grid{ display:grid; gap:3rem; grid-template-columns:1.2fr 1fr 1fr; }
@media (max-width:767px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid img{ height:76px; width:auto; }
.footer-tag{ margin-top:1.2rem; font-family:var(--font-display); font-style:italic; font-size:1.05rem; color:var(--ink-2); }
.footer-h{ font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ochre-dark); }
.footer-col nav{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.65rem; }
.footer-col ul{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.65rem; }
.footer-col a{ color:var(--ink-2); font-size:.95rem; transition:color .3s; width:fit-content; }
.footer-col a:hover{ color:var(--moss-dark); }
.footer-addr{ margin-top:.6rem; font-size:.9rem; line-height:1.7; color:rgba(77,69,67,.75); }
.footer-bottom{
  margin-top:3.2rem; padding-top:1.6rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; justify-content:space-between;
  font-size:.78rem; color:rgba(77,69,67,.7);
}
/* Gecertificeerd + "Website gemaakt door Roluve" gestapeld en gelijk uitgelijnd
   (stonden los: middelste flex-item vs. apart page-wide gecentreerde regel — nooit exact onder elkaar) */
.footer-cert{ display:flex; flex-direction:column; align-items:center; gap:.35rem; text-align:center; }
.footer-social{ display:inline-flex; align-items:center; color:rgba(77,69,67,.7); transition:color .3s; }
.footer-social:hover{ color:var(--moss-dark); }
.footer-credit{ font-size:.68rem; color:rgba(77,69,67,.4); }
.footer-credit a{ color:inherit; transition:color .3s; }
.footer-credit a:hover{ color:var(--moss-dark); text-decoration:underline; text-underline-offset:3px; }

/* =========================== HERO =========================== */
/* Layout (gecentreerd, groot logo) is de afgesproken herziening; kleuren/animatie-waarden zijn origineel. */
.hero{
  position:relative; overflow:hidden;
  min-height:92svh;
  display:flex; align-items:center;
  padding:6.5rem 0 7rem;
  text-align:center;
}
.hero-glow{
  position:absolute; z-index:1; pointer-events:none; border-radius:50%;
  top:6%; left:50%;
  width:min(60vw,560px); aspect-ratio:1;
  background:radial-gradient(circle at 42% 42%, var(--ochre-soft), rgba(227,192,132,0) 72%);
  animation:breathe 9s ease-in-out infinite alternate;
  transform:translateX(-50%);
}
.hero-rings{ position:absolute; z-index:1; top:2%; left:50%; transform:translateX(-50%); width:min(64vw,620px); opacity:.55; pointer-events:none; }
.hero-rings circle{ fill:none; stroke:var(--ochre); stroke-width:1.2; stroke-dasharray:2 7; }
.hero-rings .r1{ animation:ringspin 28s linear infinite; }
.hero-rings .r2{ animation:ringspin 40s linear infinite reverse; }
.hero-rings .r3{ animation:ringspin 54s linear infinite; }

.hero-inner{ position:relative; z-index:3; max-width:720px; width:100%; min-width:0; margin:0 auto; }
.hero-logo{ width:min(72vw,360px); margin:0 auto 1.6rem; animation:riseIn .7s .05s cubic-bezier(.2,.7,.3,1) both; }
.hero h1{ font-size:clamp(2.1rem,4.6vw,3.4rem); animation:riseIn .7s .2s cubic-bezier(.2,.7,.3,1) both; }
.hero-tagline{
  font-family:var(--font-display); font-style:italic; color:var(--ochre-dark);
  font-size:clamp(1.25rem,2.6vw,1.65rem); margin:.9rem auto 0;
  animation:riseIn .72s .3s cubic-bezier(.2,.7,.3,1) both;
}
.hero .lead{ margin:1.4rem auto 0; animation:riseIn .75s .38s cubic-bezier(.2,.7,.3,1) both; }
.hero-ctas{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:2.2rem; animation:riseIn .85s .52s cubic-bezier(.2,.7,.3,1) both; }
.hero-chips{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem; animation:riseIn .85s .66s cubic-bezier(.2,.7,.3,1) both; }
.chip{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.72rem; font-weight:700; color:var(--ink-2);
  background:rgba(253,242,242,.7); border:1px solid var(--line);
  border-radius:100px; padding:.5rem 1rem;
}
.chip svg{ width:12px; height:12px; color:var(--moss); flex-shrink:0; }

.hero-waves{ position:absolute; left:0; right:0; bottom:-2px; height:32%; z-index:2; pointer-events:none; }
.hero-waves svg{ position:absolute; bottom:0; left:0; width:200%; height:100%; }
.wave-1{ animation:waveMove 26s linear infinite; }
.wave-2{ animation:waveMove 38s linear infinite reverse; }

.scroll-cue{
  position:absolute; left:1.6rem; bottom:1.4rem; z-index:4;
  display:flex; align-items:center; gap:.6rem;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2);
}
.scroll-cue .line{ display:block; width:1px; height:44px; background:var(--line-strong); animation:drip 2.6s ease-in-out infinite; }
@media (max-width:720px){ .scroll-cue{ display:none; } }

/* =========================== MARQUEE (exacte originele tekst) =========================== */
.marquee{ overflow:hidden; padding:1rem 0; background:var(--moss-dark); border-top:1px solid rgba(253,242,242,.1); border-bottom:1px solid rgba(253,242,242,.1); }
.marquee-track{ display:flex; width:max-content; animation:marq 34s linear infinite; }
.marquee-track:hover{ animation-play-state:paused; }
.marquee-track span{
  display:inline-flex; align-items:center; gap:2.4rem; padding-right:2.4rem;
  white-space:nowrap; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  color:rgba(253,242,242,.92);
}
.marquee-track span .sep{ color:var(--ochre-soft); font-size:.55rem; }

/* =========================== FLOATING WHATSAPP BUTTON =========================== */
.whatsapp-float{
  position:fixed; z-index:150; bottom:1.25rem; right:1.25rem;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:0 1rem 0 .875rem; height:52px; border-radius:100px;
  background:#25D366; color:#fff; font-family:var(--font-body);
  font-weight:700; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  box-shadow:0 18px 40px -14px rgba(37,211,102,.65);
  transition:transform .2s;
}
.whatsapp-float:hover{ transform:scale(1.04); }
.whatsapp-float:active{ transform:scale(.98); }
.whatsapp-float .icon{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.18); flex-shrink:0; }
@media (min-width:768px){ .whatsapp-float{ bottom:1.75rem; right:1.75rem; } }
@media (max-width:639px){ .whatsapp-float .label{ display:none; } }

/* =========================== GRIDS =========================== */
.grid-2{ display:grid; gap:3rem; grid-template-columns:1fr 1fr; align-items:center; }
@media (max-width:1023px){ .grid-2{ grid-template-columns:1fr; } }
.grid-2 > *{ min-width:0; }
.grid-2-wide{ gap:3rem; } /* lg:gap-20 op desktop via modifier hieronder */
@media (min-width:1024px){ .grid-2-wide{ gap:5rem; } }
.grid-2-mid{ gap:3rem; }
@media (min-width:1024px){ .grid-2-mid{ gap:4rem; } }

/* Kolomverhoudingen als klasse i.p.v. inline style — anders wint de inline
   style altijd van de mobiel-collapse media query hierboven en blijft de
   site op elke breedte 2 koloms naast elkaar tonen. */
@media (min-width:1024px){
  .cols-105-95{ grid-template-columns:1.05fr .95fr; }
  .cols-08-12{ grid-template-columns:.8fr 1.2fr; }
  .cols-09-11{ grid-template-columns:.9fr 1.1fr; }
  .cols-11-09{ grid-template-columns:1.1fr .9fr; }
  .cols-085-115{ grid-template-columns:.85fr 1.15fr; }
}

.card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:2rem; }

.blob-photo{ position:relative; }
.blob-photo::before{
  content:""; position:absolute; inset:-4% -4% 6% -4%; z-index:0;
  background:var(--linen-3); opacity:.65;
  border-radius:36% 64% 45% 55% / 42% 46% 54% 58%;
  animation:blobShift 18s ease-in-out infinite alternate;
}
.blob-photo img{
  position:relative; z-index:1; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border-radius:52% 48% 45% 55% / 42% 46% 54% 58%;
  animation:blobShift 16s ease-in-out infinite alternate;
}

/* Benefits list */
.benefit-row{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start; padding:1.15rem 0; border-bottom:1px solid var(--line); }
.benefit-row .dot{ width:11px; height:11px; border-radius:50%; border:2px solid var(--line-strong); margin-top:.4rem; transition:.4s; }
.benefit-row:hover .dot{ border-color:var(--moss); background:var(--ochre-soft); }
.benefit-row h3{ font-size:1.15rem; }
.benefit-row p{ margin-top:.35rem; color:var(--ink-2); font-size:.96rem; line-height:1.7; }

/* Practice blocks (In de praktijk) — nieuwe content, originele kaartstijl */
.practice-grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(2,1fr); }
@media (max-width:820px){ .practice-grid{ grid-template-columns:1fr; } }
.practice-card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:1.75rem; }
.practice-card h3{ font-size:1.3rem; margin-bottom:.6rem; }
.practice-card p{ color:var(--ink-2); font-size:.97rem; line-height:1.75; }

/* Price cards */
.price-band{ background:var(--moss-dark); border-radius:var(--radius); overflow:hidden; color:var(--cream); }
.price-row{
  position:relative; display:grid; grid-template-columns:1.15fr 1.5fr auto; gap:1.6rem 2.5rem;
  align-items:center; padding:1.75rem 1.5rem;
  border-top:1px solid rgba(253,242,242,.16);
  transition:transform .4s;
}
.price-row:first-child{ border-top:none; }
.price-row:hover{ transform:translateX(6px); }
.price-row.featured{ border-left:3px solid var(--ochre); background:rgba(253,242,242,.06); }
.price-chip{
  position:absolute; top:-.8rem; left:1.5rem;
  background:var(--ochre); color:var(--moss-deep);
  font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.28rem .7rem; border-radius:100px;
}
.price-row h3{ color:var(--cream); font-size:1.45rem; }
.price-row .meta{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(253,242,242,.65); margin-top:.2rem; }
.price-row ul{ display:flex; flex-direction:column; gap:.35rem; }
.price-row li{ position:relative; padding-left:1.15rem; font-size:.94rem; color:rgba(253,242,242,.85); }
.price-row li::before{ content:""; position:absolute; left:0; top:.6rem; width:5px; height:5px; border-radius:50%; background:var(--ochre-soft); }
.price-row .price{ font-family:var(--font-display); font-size:2.1rem; color:var(--ochre-soft); white-space:nowrap; }
@media (max-width:640px){ .price-row{ grid-template-columns:1fr; text-align:left; } .price-row .price{ justify-self:start; } }

/* Chips (regio) */
.region-chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.region-chip{ background:var(--cream); border:1px solid var(--line); color:var(--moss-dark); font-weight:700; font-size:.78rem; padding:.5rem 1.1rem; border-radius:100px; }

/* Timeline */
.timeline{ position:relative; padding-left:2.2rem; }
.timeline::before{ content:""; position:absolute; left:.55rem; top:.3rem; bottom:.3rem; width:1px; background:var(--line-strong); }
.timeline-item{ position:relative; padding-bottom:2rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-1.72rem; top:.35rem; width:15px; height:15px; border-radius:50%;
  background:var(--ochre); border:2px solid var(--moss-dark); box-shadow:0 0 0 6px rgba(191,178,196,.18);
}
.timeline-item .yr{ font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ochre-dark); }
.timeline-item h3{ font-size:1.15rem; margin-top:.35rem; }
.timeline-item p{ margin-top:.4rem; color:var(--ink-2); font-size:.95rem; max-width:52ch; }

/* Portrait stat cards */
.portrait-wrap{ position:relative; max-width:520px; margin:0 auto; }
.portrait-stats{ display:grid; gap:.9rem; grid-template-columns:1fr 1fr; margin-top:1.6rem; }
@media (max-width:639px){ .portrait-stats{ grid-template-columns:1fr; } }
.stat-card{ background:var(--moss-dark); color:var(--cream); border-radius:16px; padding:1.1rem 1.3rem; box-shadow:var(--shadow-lift); }
.stat-card .num{ display:block; font-family:var(--font-display); font-size:1.7rem; line-height:1; overflow-wrap:break-word; }
.stat-card .lbl{ display:block; margin-top:.4rem; font-size:.75rem; color:rgba(253,242,242,.85); line-height:1.4; }

/* Quote band */
.quote-band{
  position:relative; overflow:hidden; padding:5rem 0; text-align:center;
  background:linear-gradient(120deg, var(--linen-3), #D8CCE0 60%, var(--ochre-soft));
  background-size:170% 170%; animation:gradDrift 18s ease-in-out infinite alternate;
}
.quote-band blockquote{
  max-width:22ch; margin:0 auto; font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1.4; color:var(--moss-deep);
}
.quote-band figcaption{ margin-top:1.2rem; font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ochre-dark); }

/* FAQ accordion */
.faq-search{
  width:100%; padding:1rem 1.3rem; border-radius:var(--radius);
  background:var(--cream); border:1px solid var(--line-strong); color:var(--ink);
  margin-bottom:1.6rem;
}
.faq-search:focus{ outline:2px solid var(--moss); outline-offset:2px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 0; text-align:left;
  font-family:var(--font-display); font-weight:500; font-size:1.12rem; color:var(--moss-dark);
}
.faq-item .plus{ flex-shrink:0; font-size:1.5rem; color:var(--ochre-dark); transition:transform .35s; }
.faq-item[data-open="true"] .plus{ transform:rotate(45deg); }
.faq-item .answer{ max-height:0; overflow:hidden; transition:max-height .4s ease, opacity .35s; opacity:0; }
.faq-item[data-open="true"] .answer{ opacity:1; }
.faq-item .answer p{ padding-bottom:1.25rem; color:var(--ink-2); font-size:.96rem; line-height:1.75; max-width:64ch; }

/* Contra-indicaties */
.warn-list{ display:flex; flex-direction:column; gap:.6rem; margin-top:1.2rem; }
.warn-list li{ position:relative; padding-left:1.4rem; font-size:.95rem; color:var(--ink-2); }
.warn-list li::before{ content:"–"; position:absolute; left:0; color:var(--moss); font-weight:700; }

/* Forms */
.field{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.2rem; }
.field label{ font-size:.8rem; font-weight:700; color:var(--moss-dark); }
.field input, .field textarea{
  padding:.9rem 1.1rem; border-radius:var(--radius); border:1px solid var(--line-strong);
  background:var(--linen); color:var(--ink); transition:border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--moss); box-shadow:0 0 0 3px rgba(112,95,126,.2); }
.field textarea{ resize:vertical; min-height:130px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.2rem; }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }
.form-note{ margin-top:.9rem; font-size:.85rem; color:var(--ink-2); }
.hp-field{ position:absolute; left:-9999px; }

/* Reveal on scroll (exacte originele mechaniek/waarden) */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.rv.in{ opacity:1; transform:translateY(0); }
.rv-d1{ transition-delay:.1s; } .rv-d2{ transition-delay:.2s; } .rv-d3{ transition-delay:.3s; }

/* Booking iframe page */
.booking-frame-wrap{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--cream); box-shadow:var(--shadow-soft); }
.booking-frame-wrap iframe{ width:100%; height:900px; border:0; display:block; }
@media (max-width:640px){ .booking-frame-wrap iframe{ height:1100px; } }

/* =========================== ANIMATIONS (exacte originele keyframes) =========================== */
@keyframes riseIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } }
@keyframes breathe{ from{ transform:translateX(-50%) scale(.88); opacity:.8; } to{ transform:translateX(-50%) scale(1.18); opacity:1; } }
@keyframes ringspin{ to{ stroke-dashoffset:-200; } }
@keyframes waveMove{ to{ transform:translateX(-50%); } }
@keyframes drip{ 0%{ transform:scaleY(0); opacity:1; } 55%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }
@keyframes marq{ to{ transform:translateX(-50%); } }
@keyframes blobShift{ 0%{ border-radius:52% 48% 45% 55% / 42% 46% 54% 58%; } 50%{ border-radius:46% 54% 56% 44% / 52% 42% 58% 48%; } 100%{ border-radius:55% 45% 48% 52% / 46% 56% 44% 54%; } }
@keyframes gradDrift{ from{ background-position:0% 35%; } to{ background-position:100% 65%; } }

/* =========================== REDUCED MOTION (exact origineel) =========================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation:none !important;
  }
  .rv{ opacity:1; transform:none; }
}

/* Grid-items krimpen standaard niet onder hun content-breedte (min-width:auto) —
   dat veroorzaakt overflow op smalle schermen zodra content lang/breed is. */
.footer-grid > *, .practice-grid > *, .price-row > *, .portrait-stats > *, .field-row > *{
  min-width:0;
}

/* =========================== UTIL =========================== */
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; }
.max-narrow{ max-width:680px; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }