/* ==========================================================================
   Puur Jij Kindercoach — huisstijl afgeleid van het logo
   Layout-concept: zacht papier, penseelstreken en ruime witruimte;
   asymmetrische kolommen met organische vormen in salie en poederroze.
   ========================================================================== */

@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url("../fonts/lato-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url("../fonts/lato-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Lato";src:url("../fonts/lato-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Kleur — exacte waarden uit het huisstijldocument (sept. 2026) */
  --cream:#F6F5EF;      /* gebroken wit — achtergrond */
  --paper:#FCFBF7;      /* kaarten, iets lichter dan de achtergrond */
  --linen:#EEECE3;      /* afwisselende secties (gebroken wit, 4% dieper) */
  --sage:#657361;       /* saliegroen — koppen, knoppen, accenten */
  --sage-deep:#4D5A4A;  /* saliegroen donker — hover, contrastrijke koppen */
  --sage-mist:#E1E6DB;  /* saliegroen licht — vlakken */
  --rose:#D79587;       /* zacht oudroze — details en lijnen */
  --rose-ink:#9A5B4F;   /* oudroze donker — alleen voor tekst (AA-contrast) */
  --rose-mist:#F3E2DC;
  --bark:#60564E;       /* warm taupe — lopende tekst */
  --bark-soft:#6B625A;
  --line:#DFDBD0;
  --white:#FFFFFF;

  /* Typografie */
  --f-display:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --f-body:"Lato","Helvetica Neue",Arial,sans-serif;

  --t-xs:.8125rem; --t-sm:.9375rem; --t-base:1.0625rem; --t-md:1.25rem;
  --t-lg:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);
  --t-xl:clamp(2.2rem,1.5rem + 2.6vw,3.4rem);
  --t-2xl:clamp(2.7rem,1.6rem + 4vw,4.6rem);

  --r-sm:10px; --r-md:22px; --r-lg:40px;
  --wrap:1180px; --gutter:clamp(1rem,.5rem + 2.5vw,2.5rem);
  --shadow:0 1px 2px rgba(91,74,61,.05),0 12px 32px -18px rgba(91,74,61,.28);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--bark);font-family:var(--f-body);font-size:var(--t-base);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--sage-deep);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--sage)}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:4px}
::selection{background:var(--rose-mist);color:var(--bark)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;color:var(--sage-deep);line-height:1.12;margin:0 0 .5em;text-wrap:balance;letter-spacing:-.005em}
h1{font-size:var(--t-2xl)}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-lg)}
h4{font-size:var(--t-md);font-family:var(--f-body);font-weight:700;letter-spacing:.01em;color:var(--bark)}
p{margin:0 0 1.1em;max-width:65ch}
em.soft{font-family:var(--f-display);font-style:italic;color:var(--sage)}
ul,ol{padding-left:1.2em}
.skip{position:absolute;left:-999px;top:0;background:var(--sage-deep);color:var(--white);padding:.6rem 1rem;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:760px}
section{padding-block:clamp(4rem,3rem + 4vw,7.5rem)}
.bg-linen{background:var(--linen)}
.bg-paper{background:var(--paper)}

/* Eyebrow — handschrift blijft voorbehouden aan het logo (huisstijl) */
.script{display:flex;align-items:center;gap:.8rem;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.24em;font-weight:700;color:var(--rose-ink);margin-bottom:1.1rem}
.script::before{content:"";width:34px;height:1.5px;background:var(--rose);flex-shrink:0}
.center .script{justify-content:center}
.label{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.22em;color:var(--bark-soft);font-weight:700}
.lead{font-size:var(--t-md);line-height:1.65;color:var(--bark)}
.muted{color:var(--bark-soft)}

/* Penseelstreek onder een woord */
.brush{position:relative;white-space:nowrap;z-index:0}
.brush::after{content:"";position:absolute;left:-3%;right:-3%;bottom:.02em;height:.32em;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 17C70 9 160 5 296 11' fill='none' stroke='%23D79587' stroke-width='9' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M20 19C90 13 170 11 280 14' fill='none' stroke='%23D79587' stroke-width='2' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") no-repeat center/100% 100%}

/* Knoppen */
.btn{--bg:var(--sage);--fg:var(--white);display:inline-flex;align-items:center;gap:.6em;background:var(--bg);color:var(--fg);font:700 var(--t-sm)/1 var(--f-body);letter-spacing:.06em;text-decoration:none;padding:1.05em 1.7em;border-radius:999px;border:1.5px solid var(--bg);transition:background .25s,border-color .25s,color .25s,transform .25s;cursor:pointer}
.btn:hover{--bg:var(--sage-deep);color:var(--white);transform:translateY(-1px)}
.btn svg{width:1.05em;height:1.05em;transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}
.btn-ghost{--bg:transparent;--fg:var(--sage-deep);border-color:var(--sage)}
.btn-ghost:hover{--bg:var(--sage-mist);color:var(--sage-deep)}
.btn-light{--bg:var(--cream);--fg:var(--sage-deep)}
.btn-light:hover{--bg:var(--white);color:var(--sage-deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.textlink{font-weight:700;font-size:var(--t-sm);letter-spacing:.04em;color:var(--sage-deep);text-decoration:none;border-bottom:1.5px solid var(--rose);padding-bottom:.15em}
.textlink:hover{color:var(--sage)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(246,245,239,.9);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site-header.scrolled{border-color:var(--line);box-shadow:0 8px 24px -22px rgba(91,74,61,.5)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:84px}
.brand{display:block;flex-shrink:0}
.brand img{height:62px;width:auto}
.menu{display:flex;align-items:center;gap:clamp(1rem,.4rem + 1.2vw,2rem);list-style:none;margin:0;padding:0}
.menu a{color:var(--bark);text-decoration:none;font-size:var(--t-sm);letter-spacing:.03em;position:relative;padding-block:.4rem}
.menu a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--rose);transition:right .3s}
.menu a:not(.btn):hover::after,.menu a[aria-current="page"]::after{right:0}
.menu a[aria-current="page"]{color:var(--sage-deep);font-weight:700}
.menu .btn{padding:.85em 1.35em;color:var(--white)}
.menu-toggle{display:none;background:none;border:0;padding:.6rem;margin-right:-.6rem;cursor:pointer;color:var(--sage-deep)}
.menu-toggle span{display:block;width:26px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s,opacity .3s}
.menu-toggle span+span{margin-top:6px}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:980px){
  .brand img{height:52px}
  .nav{min-height:72px}
  .menu-toggle{display:block}
  .menu{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--cream);padding:1rem var(--gutter) 2rem;border-bottom:1px solid var(--line);box-shadow:0 30px 40px -30px rgba(91,74,61,.35);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;max-height:calc(100vh - 72px);overflow:auto}
  .menu.open{opacity:1;transform:none;visibility:visible}
  .menu li{border-bottom:1px solid var(--line)}
  .menu li:last-child{border:0;padding-top:1.2rem}
  .menu a:not(.btn){display:block;padding:1rem 0;font-size:var(--t-md);font-family:var(--f-display)}
  .menu a:not(.btn)::after{display:none}
  .menu .btn{width:100%;justify-content:center}
}

/* ---------- Hero (home) ---------- */
.hero{padding-block:clamp(2.5rem,1.5rem + 4vw,5.5rem) clamp(4rem,3rem + 4vw,7rem);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.hero-grid>*{min-width:0}
.hero h1{margin-bottom:.35em}
.hero .lead{max-width:34rem;margin-bottom:2rem}
.hero-note{display:flex;align-items:center;gap:.7rem;margin-top:1.8rem;font-size:var(--t-sm);color:var(--bark-soft)}
.hero-note svg{width:22px;flex-shrink:0;color:var(--rose)}
.hero-art{position:relative;aspect-ratio:1/1.05;max-width:520px;width:100%;justify-self:end}
.hero-art svg{width:100%;height:100%}
.heart-draw{stroke-dasharray:640;stroke-dashoffset:0;animation:draw 2.4s .4s cubic-bezier(.6,.1,.3,1) both}
@keyframes draw{from{stroke-dashoffset:640}to{stroke-dashoffset:0}}
.float{animation:float 9s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{max-width:380px;justify-self:center;order:-1;margin-bottom:-1rem}
}

/* ---------- Pagina-kop (subpagina's) ---------- */
.page-head{padding-block:clamp(3rem,2rem + 4vw,6rem) clamp(2.5rem,2rem + 2vw,4rem);position:relative;overflow:hidden}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{font-size:var(--t-xl);max-width:18ch}
.page-head .lead{max-width:40rem}
.page-head::before{content:"";position:absolute;right:-8vw;top:-12vw;width:min(46vw,560px);aspect-ratio:1;background:var(--sage-mist);border-radius:58% 42% 55% 45%/48% 55% 45% 52%;opacity:.8}
.page-head::after{content:"";position:absolute;right:12vw;bottom:-6vw;width:min(16vw,180px);aspect-ratio:1;background:var(--rose-mist);border-radius:50% 50% 45% 55%/55% 45% 55% 45%}
.crumbs{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--bark-soft);margin-bottom:1.4rem}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--sage-deep)}

/* ---------- Secties & rasters ---------- */
.sec-head{max-width:44rem;margin-bottom:clamp(2.2rem,1.5rem + 2vw,3.5rem)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center p{margin-inline:auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1rem + 4vw,5.5rem);align-items:start}
.split.v-center{align-items:center}
.split>*{min-width:0}
.split-40{grid-template-columns:.8fr 1.2fr}
@media (max-width:860px){.split,.split-40{grid-template-columns:1fr}}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,.6rem + 1.5vw,1.75rem)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,.6rem + 1.5vw,1.75rem)}
.grid-3>*,.grid-2>*{min-width:0}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}
@media (max-width:700px){.grid-2{grid-template-columns:1fr}}

/* Herkenning — lijst met blaadjes */
.signals{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.2rem 2.5rem}
.signals li{display:flex;gap:.9rem;align-items:flex-start;padding:.95rem 0;border-bottom:1px solid var(--line)}
.signals svg{flex-shrink:0;width:20px;margin-top:.3rem;color:var(--sage)}
@media (max-width:640px){.signals{grid-template-columns:1fr}}

/* Aanbodkaarten */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.6rem,1.2rem + 1.2vw,2.4rem);display:flex;flex-direction:column;gap:.2rem;transition:transform .35s,box-shadow .35s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .icon{width:58px;height:58px;border-radius:50% 50% 46% 54%/54% 46% 54% 46%;display:grid;place-items:center;background:var(--sage-mist);color:var(--sage-deep);margin-bottom:1.2rem}
.card .icon svg{width:28px}
.card:nth-child(2) .icon{background:var(--rose-mist);color:var(--rose-ink)}
.card h3{font-size:1.75rem;margin-bottom:.2em}
.card .age{font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--bark-soft);font-weight:700;margin-bottom:.9rem}
.card p{font-size:var(--t-sm)}
.card .textlink{margin-top:auto;align-self:flex-start}

/* Stappen — echte volgorde, dus genummerd */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,.5rem + 1.5vw,2rem);counter-reset:step;position:relative}
.steps::before{content:"";position:absolute;top:31px;left:8%;right:8%;height:2px;background:repeating-linear-gradient(90deg,var(--rose) 0 8px,transparent 8px 16px);opacity:.55}
.steps li{position:relative;counter-increment:step;min-width:0}
.steps li::before{content:counter(step);display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--cream);border:1.5px solid var(--sage);font-family:var(--f-display);font-size:1.9rem;color:var(--sage-deep);margin-bottom:1.2rem;position:relative}
.bg-linen .steps li::before{background:var(--linen)}
.steps h3{font-size:1.5rem;margin-bottom:.3em}
.steps p{font-size:var(--t-sm);margin:0}
.steps .meta{display:block;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--rose);font-weight:700;margin-bottom:.4rem}
@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr;row-gap:2.5rem}
  .steps::before{display:none}
}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* Uitgebreide tijdlijn (werkwijze) */
.timeline{list-style:none;margin:0;padding:0;counter-reset:t;position:relative}
.timeline::before{content:"";position:absolute;left:31px;top:10px;bottom:10px;width:2px;background:repeating-linear-gradient(180deg,var(--rose) 0 8px,transparent 8px 16px);opacity:.5}
.timeline>li{counter-increment:t;display:grid;grid-template-columns:64px 1fr;gap:1.6rem;padding-bottom:3rem;position:relative}
.timeline>li:last-child{padding-bottom:0}
.timeline>li::before{content:counter(t);display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--cream);border:1.5px solid var(--sage);font-family:var(--f-display);font-size:1.9rem;color:var(--sage-deep);position:relative}
.timeline>li>div{min-width:0;padding-top:.6rem}
.timeline h3{font-size:1.75rem;margin-bottom:.25em}
.timeline .meta{display:inline-block;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--bark-soft);font-weight:700;margin-bottom:.8rem;background:var(--sage-mist);padding:.35em .8em;border-radius:999px}

/* Citaatband */
.band{background:var(--sage-deep);color:var(--cream);position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:auto -10% -60% auto;width:60%;aspect-ratio:1;border-radius:50%;background:var(--sage);opacity:.45}
.band .wrap{position:relative}
.band blockquote{margin:0;max-width:52rem;font-family:var(--f-display);font-size:clamp(1.9rem,1.3rem + 2.4vw,3.2rem);line-height:1.2;font-style:italic;font-weight:500;text-wrap:balance}
.band .script{color:var(--rose-mist)}
.band .script::before{background:var(--rose-mist)}
.band p{color:#E9E6DC}
.band h2{color:var(--cream)}

/* Over-mij beeld */
.portrait{position:relative;aspect-ratio:4/5;max-width:460px;width:100%}
.portrait .shape{position:absolute;inset:0;border-radius:48% 52% 44% 56%/40% 42% 58% 60%;background:var(--sage-mist);overflow:hidden}
.portrait img.photo{width:100%;height:100%;object-fit:cover}
.portrait .deco{position:absolute;right:-6%;bottom:6%;width:34%}
.portrait .inner{position:absolute;inset:14% 12%;display:grid;place-items:center;text-align:center}
.portrait .inner img{width:92%}

/* Principes / kenmerken */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.values>div{padding:2rem 1.8rem 2rem 0;border-bottom:1px solid var(--line);min-width:0}
.values>div+div{padding-left:1.8rem;border-left:1px solid var(--line)}
.values h3{font-size:1.6rem}
.values p{font-size:var(--t-sm);margin:0}
@media (max-width:860px){.values{grid-template-columns:1fr}.values>div,.values>div+div{padding:1.6rem 0;border-left:0}}

/* Thema-chips */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:0}
.chips li{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.55em 1.1em;font-size:var(--t-sm)}

/* Tarieven */
.price-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.price-table th,.price-table td{text-align:left;padding:1.4rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.price-table th{font-weight:400}
.price-table .name{font-family:var(--f-display);font-size:1.6rem;color:var(--sage-deep);display:block;line-height:1.2}
.price-table .desc{font-size:var(--t-sm);color:var(--bark-soft);display:block;margin-top:.3rem;max-width:44ch}
.price-table td.amount{text-align:right;font-family:var(--f-display);font-size:1.9rem;color:var(--bark);white-space:nowrap;padding-left:1.5rem}
.price-table td.amount small{display:block;font-family:var(--f-body);font-size:var(--t-xs);color:var(--bark-soft);letter-spacing:.06em}
.featured{background:var(--paper);border:1.5px solid var(--sage);border-radius:var(--r-lg);padding:clamp(1.8rem,1.2rem + 2vw,3rem);position:relative;box-shadow:var(--shadow)}
.featured .tag{position:absolute;top:-.9rem;left:clamp(1.8rem,1.2rem + 2vw,3rem);background:var(--rose);color:var(--white);font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.45em 1em;border-radius:999px}
.featured .big{font-family:var(--f-display);font-size:clamp(3rem,2.4rem + 2vw,4rem);color:var(--sage-deep);line-height:1;margin:.6rem 0 .2rem;font-variant-numeric:tabular-nums}
.check{list-style:none;padding:0;margin:1.4rem 0 1.8rem}
.check li{display:flex;gap:.75rem;padding:.45rem 0;font-size:var(--t-sm)}
.check li::before{content:"";flex-shrink:0;width:18px;height:18px;margin-top:.25rem;border-radius:50%;background:var(--sage-mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%234D5A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.note{background:var(--rose-mist);border-radius:var(--r-md);padding:1.6rem 1.8rem;font-size:var(--t-sm)}
.note h3{font-size:1.45rem;color:var(--bark)}
.note p:last-child{margin-bottom:0}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.5rem 0;font-family:var(--f-display);font-size:clamp(1.3rem,1.15rem + .5vw,1.6rem);color:var(--sage-deep);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--sage);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='%234D5A4A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .3s,background-color .3s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--sage-mist)}
.faq .answer{padding:0 3.5rem 1.6rem 0}
.faq .answer p:last-child{margin-bottom:0}
.faq-group{margin-bottom:3.5rem}
.faq-group>h2{font-size:var(--t-lg);margin-bottom:1rem}

/* Formulier */
.form{display:grid;gap:1.2rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media (max-width:600px){.form .row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.field label,.field .lbl{font-size:var(--t-sm);font-weight:700;color:var(--bark)}
.field .opt{font-weight:400;color:var(--bark-soft)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--bark);background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.85rem 1rem;transition:border-color .2s,box-shadow .2s;width:100%}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 4px var(--sage-mist)}
.field .hint{font-size:var(--t-xs);color:var(--bark-soft)}
.consent{display:flex;gap:.8rem;align-items:flex-start;font-size:var(--t-sm)}
.consent input{width:20px;height:20px;margin-top:.2rem;accent-color:var(--sage);flex-shrink:0}
.hp{position:absolute;left:-5000px}
.form-status{border-radius:var(--r-sm);padding:1rem 1.2rem;font-size:var(--t-sm)}
.form-status.ok{background:var(--sage-mist);color:var(--sage-deep)}
.form-status.err{background:var(--rose-mist);color:var(--rose-ink)}
.contact-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.6rem,1.2rem + 1.5vw,2.6rem)}
.contact-list{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:1.2rem}
.contact-list li{display:flex;gap:1rem;align-items:flex-start}
.contact-list .ic{width:44px;height:44px;border-radius:50%;background:var(--sage-mist);display:grid;place-items:center;flex-shrink:0;color:var(--sage-deep)}
.contact-list .ic svg{width:20px}
.contact-list strong{display:block;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--bark-soft)}

/* Prose (privacy) */
.prose h2{font-size:var(--t-lg);margin-top:2.4rem}
.prose h3{font-size:1.4rem;margin-top:1.6rem}
.prose ul{margin:0 0 1.2em}
.prose li{margin-bottom:.35em}

/* CTA-blok */
.cta{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(2.2rem,1.5rem + 3vw,4.5rem);overflow:hidden;display:grid;grid-template-columns:1.4fr auto;gap:2rem;align-items:center}
.cta>*{min-width:0;position:relative}
.cta::before{content:"";position:absolute;left:-80px;bottom:-120px;width:300px;aspect-ratio:1;border-radius:50%;background:var(--rose-mist);opacity:.8}
.cta h2{font-size:var(--t-xl);margin-bottom:.3em}
.cta p{margin:0}
@media (max-width:760px){.cta{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.site-footer{background:var(--linen);padding-block:clamp(3.5rem,2.5rem + 3vw,5.5rem) 2rem;font-size:var(--t-sm);margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
.foot-grid>*{min-width:0}
.foot-grid img{height:78px;width:auto;margin-bottom:1rem}
.foot-grid h2{font-family:var(--f-body);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--bark-soft);font-weight:700;margin-bottom:1rem}
.foot-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.foot-grid a{color:var(--bark);text-decoration:none}
.foot-grid a:hover{color:var(--sage-deep);text-decoration:underline}
.foot-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;color:var(--bark-soft);font-size:var(--t-xs)}
.foot-bottom a{color:inherit}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Reveal-animatie (zichtbaar in rust; alleen verfraaiing) ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* 404 */
.center-page{min-height:60vh;display:grid;place-items:center;text-align:center}
.center-page p{margin-inline:auto}

/* ---------- Aanvullingen ---------- */
/* Drie pijlers (home) */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,1rem + 2vw,3rem)}
.pillars>div{min-width:0}
.pillars .icon{width:62px;height:62px;border-radius:50% 50% 46% 54%/54% 46% 54% 46%;display:grid;place-items:center;background:var(--sage-mist);color:var(--sage-deep);margin-bottom:1.3rem}
.pillars>div:nth-child(2) .icon{background:var(--rose-mist);color:var(--rose-ink)}
.pillars .icon svg{width:28px}
.pillars h3{font-size:1.75rem;margin-bottom:.35em}
.pillars p{margin:0}
@media (max-width:860px){.pillars{grid-template-columns:1fr}}

/* Hero-ondertitel */
.hero .subtitle{font-family:var(--f-display);font-style:italic;font-size:clamp(1.6rem,1.2rem + 1.5vw,2.4rem);line-height:1.2;color:var(--bark);margin:0 0 1.6rem;max-width:22ch}
.hero h1{font-size:clamp(3.4rem,2rem + 6vw,6.5rem);line-height:.95;margin-bottom:.25em}

/* Onderwerpen (kindercoaching) */
.topics{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(2rem,1rem + 3vw,4rem)}
.topics>div{padding:1.8rem 0;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:1.2rem;min-width:0}
.topics svg{width:22px;color:var(--sage);margin-top:.35rem}
.topics h3{font-size:1.55rem;margin-bottom:.25em}
.topics p{margin:0;font-size:var(--t-sm)}
@media (max-width:760px){.topics{grid-template-columns:1fr}}

/* Portret-slot: toont de foto zodra assets/img/didi-simons.jpg bestaat */
.portrait .fallback{position:absolute;inset:0;display:grid;place-items:center}
.portrait .fallback svg{width:58%}
.portrait.has-photo .fallback{display:none}
.portrait img.photo{position:absolute;inset:0;object-position:50% 30%}

/* Contactknop mobiel in de header */
.nav-actions{display:flex;align-items:center;gap:.4rem}
.call-mobile{display:none;width:44px;height:44px;border-radius:50%;background:var(--sage-mist);color:var(--sage-deep);place-items:center}
.call-mobile svg{width:20px}
@media (max-width:980px){.call-mobile{display:grid}}

.sig{font-family:var(--f-display);font-style:italic;font-size:1.6rem;color:var(--sage-deep);margin-top:1.4rem}
.inline-list{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.2rem;font-size:var(--t-sm)}
.disclaimer{border-left:2px solid var(--rose);padding:.2rem 0 .2rem 1.4rem;margin-top:2.5rem;font-size:var(--t-sm);max-width:62ch}
.steps.steps-3{grid-template-columns:repeat(3,1fr)}
.steps.steps-3::before{left:4%;right:30%}
@media (max-width:900px){.steps.steps-3{grid-template-columns:1fr}}
.split-contact{grid-template-columns:.85fr 1.15fr}
@media (max-width:860px){.split-contact{grid-template-columns:1fr}}
@media (min-width:981px){.brand img{height:74px}.nav{min-height:96px}}
@media (max-width:860px){.hero-art{max-width:300px}}

/* Hero-illustratie: vingerafdruk die zich rustig tekent */
.ridges path{stroke-dasharray:1;stroke-dashoffset:0;animation:ridge 2.2s cubic-bezier(.5,.1,.3,1) both;animation-delay:var(--d,0s)}
@keyframes ridge{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.hero-art{display:flex;flex-direction:column;gap:.4rem;aspect-ratio:auto}
.hero-art svg{aspect-ratio:520/546;height:auto}
.art-caption{margin:0 0 0 12%;font-family:var(--f-display);font-style:italic;font-size:1.25rem;color:var(--bark-soft)}

/* Over Puur Jij: persoonlijk verhaal */
.about{align-items:start}
@media (min-width:861px){.about-photo{position:sticky;top:130px}}
.story{max-width:38rem}
.story h3{font-size:var(--t-lg);margin-top:2.6rem}
.story .pull{font-family:var(--f-display);font-size:clamp(1.45rem,1.2rem + .8vw,1.85rem);line-height:1.3;color:var(--sage-deep);margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.signoff{display:flex;align-items:baseline;gap:.6rem;margin-top:1.4rem;font-family:var(--f-display);font-size:1.6rem;color:var(--bark)}
.signoff span{font-style:italic}
.signoff strong{font-weight:600;color:var(--sage-deep)}
.signoff svg{width:22px;align-self:center;color:var(--sage)}
.lead .soft{font-size:1.15em}
/* Rode draad: vier momenten, verbonden door een stippellijn */
.thread{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,.5rem + 1.5vw,2rem);position:relative}
.thread::before{content:"";position:absolute;top:9px;left:10px;right:10%;height:2px;background:repeating-linear-gradient(90deg,var(--rose) 0 8px,transparent 8px 16px);opacity:.6}
.thread li{position:relative;min-width:0;padding-top:2.2rem}
.thread li::before{content:"";position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;background:var(--paper);border:2px solid var(--sage)}
.thread li:last-child::before{background:var(--rose);border-color:var(--rose)}
.thread h3{font-size:1.5rem;margin-bottom:.3em}
.thread p{font-size:var(--t-sm);margin:0}
@media (max-width:860px){
  .thread{grid-template-columns:1fr;gap:1.8rem}
  .thread::before{top:10px;bottom:10px;left:9px;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--rose) 0 8px,transparent 8px 16px)}
  .thread li{padding:0 0 0 2.4rem}
}

/* Hero v2: tekst boven, aquarel van kinderen hand in hand over de volle breedte */
.hero-v2{padding-bottom:clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.hero-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1rem + 4vw,5rem);align-items:end}
.hero-top>*{min-width:0}
.hero-top .subtitle{margin-bottom:0}
.hero-top .lead{margin-bottom:1.8rem}
.hero-ill{position:relative;margin:clamp(1.5rem,1rem + 2vw,3rem) auto 0;max-width:1100px}
.hero-ill::before{content:"";position:absolute;left:8%;right:8%;bottom:6%;height:55%;background:radial-gradient(ellipse at center,rgba(101,115,97,.14),rgba(101,115,97,0) 70%);z-index:0}
.hero-ill picture,.hero-ill img{position:relative;z-index:1;display:block;width:100%;height:auto}
.hero-ill img{animation:hand-in-hand 2.6s .25s cubic-bezier(.55,.1,.25,1) both}
@keyframes hand-in-hand{from{clip-path:inset(0 100% 0 0);opacity:.2}40%{opacity:1}to{clip-path:inset(0 0 0 0);opacity:1}}
@media (max-width:860px){
  .hero-top{grid-template-columns:1fr;gap:1.4rem}
  .hero-ill{margin-inline:-6%;max-width:none}
}

/* Hero v2 — tekst én aquarel samen in één scherm (desktop/tablet liggend) */
@media (min-width:861px){
  .hero-v2{min-height:calc(100svh - 96px);display:flex;flex-direction:column;padding-block:clamp(1.25rem,.5rem + 2.5vh,3rem) clamp(1rem,.5rem + 2vh,2.5rem)}
  .hero-v2>.wrap{flex:1;display:flex;flex-direction:column;width:100%}
  .hero-v2 h1{font-size:clamp(3.2rem,1rem + 7vh,6.2rem)}
  .hero-v2 .subtitle{font-size:clamp(1.4rem,.8rem + 2.2vh,2.3rem)}
  .hero-v2 .lead{font-size:clamp(1rem,.8rem + .9vh,1.25rem);margin-bottom:clamp(1rem,.5rem + 1.5vh,1.8rem)}
  .hero-v2 .script{margin-bottom:clamp(.5rem,.2rem + 1vh,1.1rem)}
  .hero-ill{flex:1 1 0;min-height:190px;max-height:440px;width:100%;margin-top:clamp(.75rem,.2rem + 2vh,2rem)}
  .hero-ill picture{position:absolute;inset:0}
  .hero-ill img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
}
@media (min-width:861px) and (max-width:980px){.hero-v2{min-height:calc(100svh - 72px)}}

/* Hero v3 — tekst links onder elkaar, aquarel rechts op een zachte saliegroene "bühne" tot aan de schermrand */
.hero-v3{padding-block:clamp(2.5rem,1.5rem + 4vh,5rem)}
.hero-grid3{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,.5rem + 3vw,4rem);align-items:center}
.hero-copy{position:relative;z-index:2}
.hero-copy h1{font-size:clamp(3.2rem,1.2rem + 4.2vw + 2vh,5.8rem);line-height:.95;margin-bottom:.2em}
.hero-copy .subtitle{font-size:clamp(1.45rem,1rem + .9vw + .6vh,2.1rem);margin:0 0 clamp(1rem,.5rem + 1.6vh,1.6rem);max-width:17ch}
.hero-copy .lead{font-size:clamp(1rem,.9rem + .25vw + .3vh,1.15rem);line-height:1.7;max-width:31rem;margin-bottom:clamp(1.2rem,.6rem + 2vh,2rem);color:var(--bark)}
.hero-art3{position:relative;margin:0;margin-right:calc(-1 * (max(0px, (100vw - var(--wrap)) / 2) + var(--gutter)));padding-block:clamp(2.5rem,1.5rem + 5vh,5.5rem)}
.hero-art3::before{content:"";position:absolute;top:0;bottom:0;left:9%;right:0;background:var(--sage-mist);border-radius:999px 0 0 999px;opacity:.75}
.hero-art3::after{content:"";position:absolute;top:10%;left:3%;width:clamp(56px,6vw,90px);aspect-ratio:1;border-radius:50%;background:var(--rose-mist)}
.hero-art3 picture,.hero-art3 img{position:relative;z-index:1;display:block;width:100%;height:auto}
.hero-art3 img{width:min(100%,960px);animation:hand-in-hand 2.6s .25s cubic-bezier(.55,.1,.25,1) both}
@media (min-width:861px){
  .hero-v3{min-height:calc(100svh - 96px);display:flex;align-items:center}
  .hero-v3>.wrap{width:100%}
}
@media (min-width:861px) and (max-width:980px){.hero-v3{min-height:calc(100svh - 72px)}}
@media (max-width:860px){
  .hero-grid3{grid-template-columns:1fr;gap:2rem}
  .hero-art3{margin-right:calc(-1 * var(--gutter));padding-block:1.6rem}
  .hero-art3::before{left:6%}
}
@media (min-width:861px) and (max-width:1200px){
  .hero-grid3{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .hero-copy .subtitle{max-width:none}
}
@media (min-width:861px) and (max-height:780px){
  .hero-v3{padding-block:1.25rem}
  .hero-copy .script{margin-bottom:.6rem}
  .hero-copy h1{font-size:clamp(3rem,1rem + 7.5vh,4.6rem)}
  .hero-copy .subtitle{font-size:clamp(1.3rem,.6rem + 2.2vh,1.8rem);margin-bottom:.9rem}
  .hero-copy .lead{font-size:1rem;line-height:1.6;margin-bottom:1.2rem}
  .hero-art3{padding-block:clamp(1.5rem,4vh,3rem)}
}

/* Hero — kinderhanden vormen samen een ster, in een organisch kader */
.hero-hands{position:relative;margin:0;justify-self:end;width:100%;max-width:min(680px,calc((100svh - 96px) * 1.2))}
.hero-hands::before{content:"";position:absolute;left:-4%;top:-5%;width:clamp(60px,7vw,110px);aspect-ratio:1;border-radius:50%;background:var(--rose-mist);z-index:0}
.hero-hands::after{content:"";position:absolute;inset:4% -3% -4% 5%;border:1.5px solid var(--rose);opacity:.45;border-radius:46% 54% 44% 56%/56% 44% 56% 44%;z-index:0}
.hands-frame{position:relative;z-index:1;aspect-ratio:3/2;border-radius:44% 56% 42% 58%/54% 46% 54% 46%;overflow:hidden;background:radial-gradient(ellipse at 51% 46%,#EEF1E9 0%,var(--sage-mist) 70%)}
.hands-frame picture,.hands-frame img{display:block;width:100%;height:100%}
.hands-frame img{object-fit:cover;animation:hands-in 1.6s .15s cubic-bezier(.2,.7,.2,1) both}
@keyframes hands-in{from{transform:scale(1.12);opacity:0}to{transform:none;opacity:1}}
.hands-heart{position:absolute;left:50.7%;top:45.5%;width:9%;transform:translate(-50%,-50%);overflow:visible}
.hands-heart path{stroke-dasharray:1;stroke-dashoffset:0;animation:heart-draw 1.4s 1.3s ease-out both}
@keyframes heart-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (max-width:860px){.hero-hands{justify-self:center;max-width:560px}}