/* ══════════════════════════════════════════════════════
   VoetnRelax Veerle — concept
   Warm zand + haar merkgroen. Cormorant Garamond / Jost.
   ══════════════════════════════════════════════════════ */

:root{
  --zand:      #FAF7F3;
  --zand-2:    #F2EDE4;
  --zand-3:    #E9E1D4;
  --lijn:      #E1D8C9;
  --inkt:      #2B2A25;
  --inkt-2:    #6B655B;
  --inkt-3:    #918A7D;

  --groen-900: #2F3F1B;
  --groen-700: #55762F;
  --groen-500: #7BA144;
  --groen-200: #D5E1BE;
  --groen-100: #EDF2E2;
  --klei:      #BC9A6E;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", -apple-system, "Segoe UI", system-ui, sans-serif;

  --max: 1180px;
  --pad: clamp(1.25rem, 5vw, 3.5rem);
  --r: 2px;
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--zand);
  color:var(--inkt);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; height:auto }
a{ color:inherit }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.005em;
  margin:0;
}
h1{ font-size:clamp(2.6rem, 6.2vw, 5rem) }
h2{ font-size:clamp(2rem, 4.2vw, 3.4rem) }
h3{ font-size:clamp(1.3rem, 2vw, 1.6rem); line-height:1.25 }
em{ font-style:italic; color:var(--groen-700) }

p{ margin:0 0 1.1em }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }
.sectie{ padding-block:clamp(4.5rem, 10vw, 9rem) }

.overline{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:400; color:var(--groen-700); margin:0 0 1.2rem;
}
.overline.mid{ text-align:center; margin:clamp(3rem,6vw,5rem) 0 1.75rem }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--groen-700); color:#fff; padding:.75rem 1.25rem;
}
.skip:focus{ left:0 }

:focus-visible{ outline:2px solid var(--groen-700); outline-offset:3px }

/* ── knoppen ─────────────────────────────────────── */
.knop{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.78rem; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; text-decoration:none;
  padding:1.05rem 2.1rem; border:1px solid var(--groen-700);
  background:var(--groen-700); color:var(--zand);
  border-radius:var(--r); cursor:pointer;
  transition:background .3s, color .3s, border-color .3s, transform .3s;
}
.knop:hover{ background:var(--groen-900); border-color:var(--groen-900) }
.knop--lijn{ background:transparent; color:var(--inkt); border-color:var(--inkt) }
.knop--lijn:hover{ background:var(--inkt); color:var(--zand); border-color:var(--inkt) }
.knop--licht{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff }
.knop--licht:hover{ background:#fff; color:var(--groen-900); border-color:#fff }
.knop--vol{ width:100%; padding-block:1.15rem }
.knop--klein{ padding:.7rem 1.35rem; font-size:.7rem }

/* ── navigatie ───────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  background:rgba(250,247,243,0); border-bottom:1px solid transparent;
  transition:background .35s, border-color .35s, backdrop-filter .35s;
}
.nav.vast{
  background:rgba(250,247,243,.93);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--lijn);
}
/* bovenaan ligt de balk op de hero-foto: daar moet alles licht zijn */
@media (min-width:921px){
  .nav:not(.vast) .merk__txt,
  .nav:not(.vast) .merk__txt i,
  .nav:not(.vast) .nav__links a{ color:rgba(250,247,243,.92) }
  .nav:not(.vast) .merk__mark{ color:var(--groen-200) }
  .nav:not(.vast) .nav__links a:hover{ color:#fff }
  .nav:not(.vast) .nav__links .knop{
    background:rgba(250,247,243,.12); border-color:rgba(250,247,243,.55);
    backdrop-filter:blur(6px);
  }
  .nav:not(.vast) .nav__links .knop:hover{ background:var(--zand); color:var(--inkt) }
}
.nav__in{
  max-width:var(--max); margin-inline:auto; padding:1.1rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.merk{ display:flex; align-items:center; gap:.7rem; text-decoration:none }
.merk__mark{ width:22px; color:var(--groen-500); flex:none }
.merk__mark svg{ width:100%; height:auto; display:block }
.merk__txt{ font-family:var(--serif); font-size:1.28rem; line-height:1; letter-spacing:.005em }
.merk__txt b{ font-weight:500 }
.merk__txt i{ font-style:italic; color:var(--groen-700); margin-left:.3em }

.nav__links{ display:flex; align-items:center; gap:2rem }
.nav__links a{
  font-size:.82rem; letter-spacing:.06em; text-decoration:none; color:var(--inkt-2);
  transition:color .25s; white-space:nowrap;
}
.nav__links a:hover{ color:var(--groen-700) }
.nav__links .knop{ color:var(--zand) }

.burger{
  display:none; width:44px; height:44px; padding:0; margin-right:-10px;
  background:none; border:0; cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:11px; width:22px; height:1.5px; background:var(--inkt);
  transition:transform .3s, opacity .2s;
}
.burger span:nth-child(1){ top:16px }
.burger span:nth-child(2){ top:21.5px }
.burger span:nth-child(3){ top:27px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg) }

@media (max-width:920px){
  .burger{ display:block }
  .nav{ background:rgba(250,247,243,.93); backdrop-filter:blur(14px); border-bottom-color:var(--lijn) }
  .nav__links{
    position:fixed; inset:4.6rem 0 auto; flex-direction:column; align-items:stretch;
    gap:0; background:var(--zand); border-bottom:1px solid var(--lijn);
    padding:.5rem var(--pad) 2rem;
    transform:translateY(-140%); transition:transform .4s cubic-bezier(.4,0,.2,1);
    max-height:calc(100dvh - 4.6rem); overflow:auto;
  }
  .nav__links.open{ transform:translateY(0) }
  .nav__links a{ padding:1rem 0; border-bottom:1px solid var(--lijn); font-size:1rem }
  .nav__links .knop{ margin-top:1.5rem; border-bottom:0; justify-content:center }
}

/* ── hero ────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:0;
}
.hero__beeld{ position:absolute; inset:0; overflow:hidden; background:var(--zand-3) }
.hero__beeld img{
  width:100%; height:100%; object-fit:cover; object-position:82% 28%;
  animation:zoom 18s ease-out forwards;
}
@media (max-width:760px){ .hero__beeld img{ object-position:64% 22% } }
@keyframes zoom{ from{ transform:scale(1.07) } to{ transform:scale(1) } }
@media (prefers-reduced-motion:reduce){ .hero__beeld img{ animation:none } }
.hero__beeld::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(29,27,22,.72) 0%, rgba(29,27,22,.5) 42%, rgba(29,27,22,.12) 78%),
    linear-gradient(to top, rgba(29,27,22,.6) 0%, transparent 45%);
}
.hero__in{
  position:relative; max-width:var(--max); width:100%;
  margin-inline:auto; padding:8rem var(--pad) clamp(3rem,7vw,5.5rem);
  color:var(--zand);
}
.hero .overline{ color:var(--groen-200) }
.hero h1{ max-width:14ch; margin-bottom:1.5rem }
.hero h1 em{ color:var(--groen-200) }
.hero .lead{
  max-width:46ch; font-size:clamp(1.05rem,1.4vw,1.2rem);
  color:rgba(250,247,243,.88); margin-bottom:2.25rem;
}
.hero__knoppen{ display:flex; flex-wrap:wrap; gap:.9rem }
.hero .knop--lijn{ color:var(--zand); border-color:rgba(250,247,243,.5) }
.hero .knop--lijn:hover{ background:var(--zand); color:var(--inkt); border-color:var(--zand) }

.credentials{
  position:relative; margin:0; padding:1.15rem var(--pad);
  max-width:100%; list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 2.5rem;
  background:var(--groen-900); color:var(--groen-200);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
}
.credentials li{ position:relative }
.credentials li+li::before{
  content:""; position:absolute; left:-1.25rem; top:.55em;
  width:3px; height:3px; border-radius:50%; background:var(--groen-500);
}
@media (max-width:640px){
  .credentials{ gap:.35rem 1.4rem; font-size:.65rem }
  .credentials li+li::before{ left:-.8rem }
}

/* ── koppen van secties ──────────────────────────── */
.kop{ max-width:62ch; margin-bottom:clamp(2.5rem,5vw,4rem) }
.kop--smal{ max-width:52ch }
.kop h2{ text-wrap:balance }
.kop--smal h2{ text-wrap:initial }   /* heeft eigen <br>, laat die met rust */
.kop__lead{ margin-top:1.5rem; color:var(--inkt-2); font-size:1.05rem; max-width:58ch }

/* ── over ────────────────────────────────────────── */
.over{ background:var(--zand) }
.over__grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5.5rem); align-items:start;
}
.over__foto{ position:relative; padding-bottom:5rem }
.over__foto img:first-child{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 28%;
  border-radius:var(--r);
}
.over__foto2{
  position:absolute; right:-1.5rem; bottom:0; width:48%;
  aspect-ratio:3/4; object-fit:cover; object-position:50% 40%;
  border:8px solid var(--zand); border-radius:var(--r);
}
.over__tekst h2{ text-wrap:balance; max-width:18ch }
.proza p{ color:var(--inkt-2) }
.proza p:first-child{ color:var(--inkt); font-size:1.1rem }

.citaat{ margin:2.5rem 0; padding-left:1.5rem; border-left:2px solid var(--groen-500) }
.citaat blockquote{
  margin:0 0 .6rem; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.35rem,2.4vw,1.8rem); line-height:1.32; color:var(--inkt);
}
.citaat figcaption{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--inkt-3) }
.citaat figcaption span{ color:var(--groen-700) }

.feitjes{ list-style:none; margin:2.5rem 0 0; padding:0; display:grid; gap:0 }
.feitjes li{
  display:grid; grid-template-columns:minmax(9rem,auto) 1fr; gap:.4rem 1.5rem;
  padding:1rem 0; border-top:1px solid var(--lijn); align-items:baseline;
}
.feitjes li:last-child{ border-bottom:1px solid var(--lijn) }
.feitjes b{ font-weight:400; font-size:.95rem }
.feitjes span{ color:var(--inkt-2); font-size:.92rem }

@media (max-width:860px){
  .over__grid{ grid-template-columns:1fr }
  .over__foto{ max-width:440px; padding-bottom:3.5rem }
  .over__foto2{ right:0; width:44% }
  .feitjes li{ grid-template-columns:1fr }
}

/* ── voor & na ───────────────────────────────────── */
.voornna{ background:var(--zand-2) }
.voornna .kop{ margin-inline:auto; text-align:center }
.voornna .kop h2{ max-width:20ch; margin-inline:auto }
.voornna .kop__lead{ margin-inline:auto }
.voornna .overline{ text-align:center }

.ba{
  margin:0; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.5rem); align-items:center;
  background:var(--zand); padding:clamp(1.25rem,3vw,2.25rem);
  border:1px solid var(--lijn); border-radius:var(--r);
}
.ba__viewer{
  position:relative; aspect-ratio:194/364; max-height:520px;
  margin-inline:auto; width:100%; max-width:320px;
  overflow:hidden; border-radius:var(--r); cursor:ew-resize;
  background:var(--zand-3); touch-action:pan-y; user-select:none;
}
.ba__viewer img{ width:100%; height:100%; object-fit:cover; pointer-events:none }
/* clip-path i.p.v. een smallere laag: zo blijven beide foto's exact even
   groot en loopt de teen netjes door over de naad heen */
.ba__voorlaag{ position:absolute; inset:0; clip-path:inset(0 50% 0 0) }
.ba__voorlaag img{ width:100%; height:100%; object-fit:cover }

.ba__label{
  position:absolute; bottom:.9rem; z-index:3;
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.35rem .7rem; background:rgba(28,26,21,.72); color:#fff;
  backdrop-filter:blur(4px); border-radius:var(--r); pointer-events:none;
}
.ba__label--l{ left:.9rem }
.ba__label--r{ right:.9rem }

.ba__handvat{
  position:absolute; top:0; bottom:0; left:50%; width:2px; z-index:2;
  background:rgba(255,255,255,.9); transform:translateX(-1px); pointer-events:none;
}
.ba__handvat span{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--zand); box-shadow:0 2px 14px rgba(0,0,0,.3);
  display:grid; place-items:center;
}
.ba__handvat span::before{
  content:"‹ ›"; font-size:.95rem; color:var(--groen-700); letter-spacing:.1em;
}
.ba__viewer:focus-visible{ outline:2px solid var(--groen-700); outline-offset:4px }

.ba figcaption h3{ margin-bottom:.9rem }
.ba figcaption p{ color:var(--inkt-2) }
.ba figcaption b{ font-weight:400; color:var(--inkt) }
.hint{
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--inkt-3); margin-bottom:0;
}
@media (max-width:760px){
  .ba{ grid-template-columns:1fr }
  .ba__viewer{ max-width:280px }
}

.klachten{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:clamp(1.25rem,2.5vw,2rem);
}
.klacht{
  background:var(--zand); border:1px solid var(--lijn); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
}
.klacht__foto{ aspect-ratio:4/3; overflow:hidden; background:var(--zand-3) }
.klacht__foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 55% }
.klacht h3{ margin:1.5rem 1.5rem .5rem }
.klacht__herken{
  margin:0 1.5rem .9rem; font-family:var(--serif); font-style:italic;
  font-size:1.1rem; color:var(--groen-700); line-height:1.35;
}
.klacht p:last-child{ margin:0 1.5rem 1.75rem; color:var(--inkt-2); font-size:.95rem }

.voetnoot{
  margin:2.5rem 0 0; text-align:center; font-size:.8rem;
  letter-spacing:.08em; color:var(--inkt-3);
}

/* ── schaamte ────────────────────────────────────── */
.schaamte{
  background:var(--groen-900); color:var(--zand);
  padding-block:clamp(4.5rem,10vw,8rem);
}
.schaamte__in{ max-width:52rem; text-align:center }
.schaamte__stemmen{ list-style:none; margin:0 0 2.5rem; padding:0 }
.schaamte__stemmen li{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.5;
  color:rgba(250,247,243,.52); margin-bottom:.35rem;
}
.schaamte__antwoord{
  font-family:var(--serif); font-size:clamp(1.9rem,4.5vw,3.2rem);
  line-height:1.16; margin:0 0 1.5rem;
}
.schaamte__antwoord em{ color:var(--groen-200); font-style:italic }
.schaamte__na{
  max-width:46ch; margin:0 auto 2.5rem; color:rgba(250,247,243,.75); font-size:1.02rem;
}

/* ── behandelingen ───────────────────────────────── */
.tweeluik{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:clamp(1.25rem,2.5vw,2rem); align-items:start;
}
.kaart{
  background:var(--zand-2); border:1px solid var(--lijn); border-radius:var(--r);
  padding:clamp(1.75rem,3.5vw,2.75rem);
}
.kaart--medisch{ background:var(--groen-100); border-color:var(--groen-200) }
.kaart__tag{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--groen-700); margin-bottom:.8rem;
}
.kaart h3{ margin-bottom:1.75rem; max-width:18ch }

.lijst details{ border-top:1px solid var(--lijn) }
.kaart--medisch .lijst details{ border-top-color:var(--groen-200) }
.lijst details:last-of-type{ border-bottom:1px solid var(--lijn) }
.kaart--medisch .lijst details:last-of-type{ border-bottom-color:var(--groen-200) }
.lijst summary{
  list-style:none; cursor:pointer; padding:.95rem 2rem .95rem 0;
  position:relative; font-size:.98rem; transition:color .25s;
}
.lijst summary::-webkit-details-marker{ display:none }
.lijst summary:hover{ color:var(--groen-700) }
.lijst summary::after{
  content:""; position:absolute; right:.3rem; top:1.42em;
  width:9px; height:9px; border-right:1.3px solid var(--groen-700);
  border-bottom:1.3px solid var(--groen-700);
  transform:translateY(-50%) rotate(45deg); transition:transform .3s;
}
.lijst details[open] summary::after{ transform:translateY(-20%) rotate(225deg) }
.lijst details p{
  margin:0 0 1.25rem; padding-right:1.5rem;
  color:var(--inkt-2); font-size:.93rem; line-height:1.7;
}

.kaart__beeld{ margin:2rem 0 0; display:grid; grid-template-columns:1fr 1fr; gap:.6rem }
.kaart__beeld img{
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r);
  object-position:50% 45%;
}

/* ── wellness ────────────────────────────────────── */
.wellness{ background:var(--zand-2) }
/* exact 3 kolommen: zes tegels vullen precies twee rijen, geen gaten */
.tegels{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--lijn); border:1px solid var(--lijn); border-radius:var(--r);
  overflow:hidden;
}
@media (max-width:900px){ .tegels{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .tegels{ grid-template-columns:1fr } }
.tegel{ background:var(--zand); padding:clamp(1.75rem,3vw,2.5rem) }
.tegel h3{ font-size:1.3rem; margin-bottom:.7rem }
.tegel p{ color:var(--inkt-2); font-size:.95rem; margin:0 }
.tegel--accent{ background:var(--groen-100) }
.tegel__link{
  display:inline-block; margin-top:1.1rem; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--groen-700);
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px;
}

/* ── afspraak ────────────────────────────────────── */
.afspraak__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2.5rem,5vw,5rem); align-items:start;
}
.afspraak__lead{ color:var(--inkt-2); max-width:44ch; margin-top:1.5rem }

.contactblok{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--lijn);
  border:1px solid var(--lijn); border-radius:var(--r); overflow:hidden; margin:2rem 0 }
.contact{
  background:var(--zand); padding:1.35rem 1.5rem; text-decoration:none;
  display:flex; flex-direction:column; gap:.3rem; transition:background .25s;
}
.contact:hover{ background:var(--groen-100) }
.contact__lbl{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--inkt-3) }
.contact__val{ font-family:var(--serif); font-size:1.2rem; line-height:1.25; color:var(--groen-700) }
@media (max-width:480px){ .contactblok{ grid-template-columns:1fr } }

.praktisch{ list-style:none; margin:0; padding:0 }
.praktisch li{
  padding:.85rem 0; border-top:1px solid var(--lijn);
  color:var(--inkt-2); font-size:.93rem;
}
.praktisch b{ font-weight:400; color:var(--inkt); margin-right:.5rem }

.formulier{
  background:var(--zand-2); border:1px solid var(--lijn); border-radius:var(--r);
  padding:clamp(1.75rem,3.5vw,2.5rem);
}
.formulier__kop{ font-family:var(--serif); font-size:1.65rem; line-height:1.2; margin-bottom:.5rem }
.formulier__sub{ font-size:.9rem; color:var(--inkt-2); margin-bottom:1.75rem }
.formulier label{ display:block; margin-bottom:1.1rem }
.formulier label > span{
  display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--inkt-3); margin-bottom:.45rem;
}
.formulier label i{ text-transform:none; letter-spacing:0; font-style:normal }
.formulier input, .formulier select, .formulier textarea{
  width:100%; font-family:var(--sans); font-size:.97rem; font-weight:300; color:var(--inkt);
  background:var(--zand); border:1px solid var(--lijn); border-radius:var(--r);
  padding:.8rem .9rem; transition:border-color .25s;
}
.formulier input:focus, .formulier select:focus, .formulier textarea:focus{
  border-color:var(--groen-500); outline:none;
}
.formulier textarea{ resize:vertical; min-height:5.5rem }
.formulier input::placeholder, .formulier textarea::placeholder{ color:var(--inkt-3) }
.formulier .knop{ margin-top:.5rem }
.formulier__voet{ margin:1rem 0 0; text-align:center; font-size:.85rem; color:var(--inkt-2) }
.formulier__voet a{ color:var(--groen-700) }

@media (max-width:860px){ .afspraak__grid{ grid-template-columns:1fr } }

/* ── footer ──────────────────────────────────────── */
.voet{ background:var(--groen-900); color:rgba(250,247,243,.8); padding:clamp(3rem,6vw,4.5rem) 0 2rem }
.voet a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(250,247,243,.25) }
.voet a:hover{ border-bottom-color:var(--groen-200); color:#fff }
.voet__in{
  display:grid; grid-template-columns:2fr 1fr 1.4fr 1fr;
  gap:2rem; font-size:.9rem; align-items:start;
}
.voet__merk{ display:flex; gap:1rem; align-items:flex-start }
.voet__merk .merk__mark{ width:26px; color:var(--groen-500) }
.voet__merk b{ font-family:var(--serif); font-size:1.3rem; font-weight:400; color:var(--zand) }
.voet__merk p{ margin:0; line-height:1.55 }
.voet__kol p{ margin:0; line-height:1.9 }
.voet__klein{
  max-width:var(--max); margin:clamp(2.5rem,5vw,4rem) auto 0; padding:1.5rem var(--pad) 0;
  border-top:1px solid rgba(250,247,243,.14);
  font-size:.72rem; letter-spacing:.1em; color:rgba(250,247,243,.45);
}
@media (max-width:820px){ .voet__in{ grid-template-columns:1fr 1fr } .voet__merk{ grid-column:1/-1 } }

/* ── mobiele actiebalk ───────────────────────────── */
.balk{ display:none }
@media (max-width:760px){
  .balk{
    display:grid; grid-template-columns:1fr 1fr; position:fixed; z-index:90;
    inset:auto 0 0; background:var(--zand); border-top:1px solid var(--lijn);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .balk a{
    padding:1.05rem; text-align:center; text-decoration:none;
    font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--inkt);
  }
  .balk__wa{ background:var(--groen-700); color:var(--zand) !important }
  body{ padding-bottom:3.6rem }
  .voet__klein{ padding-bottom:1rem }
}

/* ── reveal ──────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1) }
.reveal.zicht{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none }
}