/* ================================================
   Huisstijl Fardau Miedema — fardaumiedema.nl
   Kleuren: moude #46352C · linnen #F6F0E6 · linde #8F996B
            koper #A15B32 · okergoud #C08A3E
   Fonts: Josefin Sans (koppen) · Nunito Sans (tekst) · Caveat (handtekening)
   ================================================ */
:root{
  --moude:#46352C;
  --moude-diep:#372A22;
  --linnen:#F6F0E6;
  --linde:#8F996B;
  --koper:#A15B32;
  --oker:#C08A3E;
  --lindelicht:#E9EAD9;
  --koperlicht:#F2E4D2;
  --line:rgba(70,53,44,.16);
  --max:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{font-family:'Nunito Sans',sans-serif;color:var(--moude);background:var(--linnen);line-height:1.7;font-size:17px}
h1,h2,h3,h4{font-family:'Josefin Sans',sans-serif;font-weight:300;line-height:1.25;letter-spacing:.02em}
h3,h4{font-weight:400}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;display:block;margin-bottom:10px;color:var(--oker)}
.tak-foto .eyebrow{color:var(--linde)}
.tak-praktijk .eyebrow{color:var(--koper)}
.naad{width:44px;height:3px;background:linear-gradient(90deg,var(--linde),var(--koper));border:none;margin:22px 0}
.naad.center{margin:22px auto}
a:focus-visible,button:focus-visible{outline:2px solid var(--oker);outline-offset:3px}

/* ---------- Navigatie ---------- */
nav.hoofdnav{position:sticky;top:0;z-index:50;background:rgba(246,240,230,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.nav-merk{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-merk svg{flex:none}
.nav-naam{font-family:'Josefin Sans',sans-serif;font-weight:400;font-size:19px;letter-spacing:.04em}
.nav-links{display:flex;gap:24px;list-style:none;flex-wrap:wrap}
.nav-links a{text-decoration:none;font-size:15px;font-weight:600;padding:4px 0;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a:focus-visible{border-bottom-color:var(--oker)}
.nav-links a.actief{border-bottom-color:var(--oker)}

/* ---------- Hero home: het tweeluik ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:76vh;position:relative}
.hero-half{display:flex;flex-direction:column;justify-content:flex-end;padding:64px 40px 56px;text-decoration:none;position:relative}
.hero-foto{background:var(--moude);color:var(--linnen)}
.hero-praktijk{background:var(--koperlicht);color:var(--moude)}
.hero-half .eyebrow{margin-bottom:10px}
.hero-foto .eyebrow{color:var(--linde)}
.hero-praktijk .eyebrow{color:var(--koper)}
.hero-half h2{font-size:clamp(24px,3.2vw,38px);margin-bottom:12px}
.hero-half p{max-width:36ch;font-size:16px;opacity:.92}
.hero-cta{margin-top:22px;display:inline-block;font-weight:700;font-size:15px}
.hero-cta::after{content:" \2192";transition:margin-left .2s}
.hero-half:hover .hero-cta::after{margin-left:6px}
.hero-naam{position:absolute;top:13%;left:50%;transform:translateX(-50%);font-family:'Josefin Sans',sans-serif;font-weight:300;letter-spacing:.08em;font-size:clamp(52px,10vw,130px);pointer-events:none;white-space:nowrap;z-index:2}
.hero-sub{position:absolute;top:calc(13% + clamp(66px,11vw,150px));left:50%;transform:translateX(-50%);font-size:14px;letter-spacing:.3em;text-transform:uppercase;pointer-events:none;z-index:2;white-space:nowrap}

/* ---------- Pagina-kop (subpagina's) ---------- */
.pagina-kop{padding:76px 0 56px;border-bottom:1px solid var(--line)}
.pagina-kop h1{font-size:clamp(30px,4.4vw,48px);max-width:20ch}
.pagina-kop .intro{max-width:640px;margin-top:18px;font-size:17px}
.pagina-kop.donker{background:var(--moude);color:var(--linnen);border-bottom:none}
.pagina-kop.warm{background:var(--koperlicht)}
.pagina-kop.zacht{background:var(--lindelicht)}

/* ---------- Secties ---------- */
section{padding:76px 0}
section.strak{padding:56px 0}
.sec-kop{max-width:640px;margin-bottom:40px}
.sec-kop h2{font-size:clamp(26px,3.4vw,36px);margin:8px 0 14px}
.blok-donker{background:var(--moude);color:var(--linnen)}
.blok-warm{background:var(--koperlicht)}
.blok-zacht{background:var(--lindelicht)}
.tekst-kolom{max-width:720px}
.tekst-kolom h2{font-size:clamp(24px,3vw,32px);margin:34px 0 12px}
.tekst-kolom h3{font-size:20px;margin:26px 0 8px}
.tekst-kolom p+p{margin-top:16px}
.tekst-kolom ul{margin:14px 0 14px 22px}
.tekst-kolom li{margin:7px 0}

/* ---------- Kaarten ---------- */
.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kaarten.twee{grid-template-columns:repeat(2,1fr)}
.kaart{background:#fff;border:1px solid var(--line);border-radius:3px;padding:30px 26px;text-decoration:none;display:flex;flex-direction:column;transition:border-color .2s, transform .2s}
a.kaart:hover{border-color:var(--oker);transform:translateY(-2px)}
.blok-donker .kaart{background:rgba(255,255,255,.06);border-color:rgba(246,240,230,.22);color:var(--linnen)}
.kaart h3{font-size:20px;margin-bottom:10px}
.kaart p{font-size:15px;opacity:.9}
.kaart .verder{margin-top:auto;padding-top:16px;font-weight:700;font-size:14px}
.kaart .verder::after{content:" \2192"}

/* ---------- Pakketten ---------- */
.pakketten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pakket{background:#fff;border:1px solid var(--line);border-radius:3px;padding:30px 26px;display:flex;flex-direction:column}
.pakket .p-naam{font-family:'Josefin Sans',sans-serif;font-size:21px;font-weight:400;margin-bottom:4px}
.pakket .p-prijs{font-size:26px;font-weight:300;font-family:'Josefin Sans',sans-serif;margin:8px 0 14px}
.pakket .p-prijs small{font-size:13px;font-family:'Nunito Sans',sans-serif;opacity:.7;display:block}
.pakket ul{list-style:none;font-size:15px;margin-bottom:16px}
.pakket li{padding:7px 0;border-bottom:1px solid var(--line)}
.pakket li:last-child{border-bottom:none}
.pakket .p-voor{font-size:14px;opacity:.85;margin-top:auto;padding-top:8px}
.pakket.accent-linde{border-top:4px solid var(--linde)}
.pakket.accent-koper{border-top:4px solid var(--koper)}
.pakket.accent-oker{border-top:4px solid var(--oker)}
.prijs-noot{font-size:14px;opacity:.75;margin-top:22px}

/* ---------- Diensten (praktijk) ---------- */
.dienst-blok{background:#fff;border:1px solid var(--line);border-left:4px solid var(--koper);border-radius:3px;padding:28px;margin-bottom:18px}
.dienst-blok h3{font-size:21px;margin-bottom:8px}
.dienst-blok .tarief{font-weight:700;color:var(--koper);font-size:15px;margin-top:12px}
.dienst-blok.aanvullend{border-left-color:var(--oker)}

/* ---------- Reviews met kader-element ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.review{position:relative;padding:30px 26px;font-size:15px}
.review::before,.review::after,.review .hoek::before,.review .hoek::after{content:"";position:absolute;width:20px;height:20px;border:3px solid var(--linde)}
.review::before{top:0;left:0;border-right:none;border-bottom:none}
.review::after{top:0;right:0;border-left:none;border-bottom:none}
.review .hoek::before{bottom:0;left:0;border-right:none;border-top:none}
.review .hoek::after{bottom:0;right:0;border-left:none;border-top:none}
.review .naam{font-weight:700;margin-top:14px;font-size:14px}

/* ---------- Quote met handtekening ---------- */
.quote-blok{max-width:640px;margin:0 auto;text-align:center}
.quote-blok blockquote{font-family:'Josefin Sans',sans-serif;font-weight:300;font-size:clamp(21px,2.8vw,28px);line-height:1.5}
.handtekening{font-family:'Caveat',cursive;font-size:34px;color:var(--koper);display:inline-block;transform:rotate(-4deg);margin-top:14px}

/* ---------- Ademcirkel decoratie ---------- */
.adem{position:relative}
.adem::before{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;border:2px solid var(--koper);opacity:.25;pointer-events:none}
.adem::after{content:"";position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;border:2px solid var(--oker);opacity:.3;pointer-events:none}

/* ---------- Herken-lijst (praktijk) ---------- */
.herken{list-style:none;max-width:640px}
.herken li{padding:12px 0 12px 34px;position:relative;border-bottom:1px solid var(--line)}
.herken li::before{content:"";position:absolute;left:0;top:18px;width:14px;height:14px;border-radius:50%;border:2px solid var(--koper)}
.herken li:nth-child(even)::before{border-color:var(--oker)}

/* ---------- FAQ ---------- */
details{background:#fff;border:1px solid var(--line);border-radius:3px;margin-bottom:12px}
summary{cursor:pointer;padding:18px 22px;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::after{content:"+";font-family:'Josefin Sans',sans-serif;font-size:22px;font-weight:300;color:var(--oker)}
details[open] summary::after{content:"\2212"}
details .faq-inhoud{padding:0 22px 20px;font-size:15px}

/* ---------- Tijdlijn met de naad ---------- */
.tijdlijn{position:relative;max-width:720px;padding-left:34px}
.tijdlijn::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:3px;background:linear-gradient(180deg,var(--linde),var(--koper))}
.moment{position:relative;padding-bottom:36px}
.moment::before{content:"";position:absolute;left:-32px;top:7px;width:15px;height:15px;border-radius:50%;background:var(--linnen);border:3px solid var(--koper)}
.moment .datum{font-size:13px;letter-spacing:.12em;font-weight:700;color:var(--koper);text-transform:uppercase}
.moment h3{font-size:20px;margin:4px 0 8px}
.moment p{font-size:15px}
.moment a{border-bottom:1px solid var(--oker);text-decoration:none}

/* ---------- Knoppen ---------- */
.knop{display:inline-block;background:var(--moude);color:var(--linnen);padding:14px 30px;font-weight:700;font-size:15px;border-radius:2px;text-decoration:none;border:none;cursor:pointer;font-family:'Nunito Sans',sans-serif}
.knop:hover{background:var(--moude-diep)}
.knop.licht{background:var(--linnen);color:var(--moude)}
.link-naad{font-weight:700;text-decoration:none;border-bottom:2px solid;border-image:linear-gradient(90deg,var(--linde),var(--koper)) 1;padding-bottom:2px}

/* ---------- Kennismaking-blok ---------- */
.kennismaking{background:var(--koperlicht);border-radius:3px;padding:44px 36px;position:relative;overflow:hidden}
.kennismaking h2{font-size:clamp(23px,2.8vw,30px);margin-bottom:12px}
.kennismaking p{max-width:56ch}
.kennismaking .knop{margin-top:22px}

/* ---------- Fotoplaceholders ---------- */
.foto-vlak{background:linear-gradient(135deg,var(--lindelicht),var(--koperlicht));border:1px solid var(--line);border-radius:3px;display:flex;align-items:center;justify-content:center;color:var(--moude);font-size:13px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.foto-vlak.staand{aspect-ratio:4/5}
.foto-vlak.liggend{aspect-ratio:3/2}
.foto-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}

/* ---------- Blog ---------- */
.blog-lijst{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.blog-kaart{background:#fff;border:1px solid var(--line);border-radius:3px;padding:30px;text-decoration:none;transition:border-color .2s}
.blog-kaart:hover{border-color:var(--oker)}
.blog-kaart h3{font-size:21px;margin:8px 0 10px}
.blog-kaart p{font-size:15px;opacity:.9}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px}
.gegevens h3{font-size:18px;margin:22px 0 6px}
.gegevens p{font-size:15px}
.gegevens a{text-decoration:none;border-bottom:1px solid var(--oker)}
form .veld{margin-bottom:16px}
form label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
form input,form select,form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:2px;font-family:'Nunito Sans',sans-serif;font-size:15px;background:#fff;color:var(--moude)}
form textarea{min-height:130px;resize:vertical}
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--oker);outline-offset:1px}

/* ---------- Footer ---------- */
footer{background:var(--moude-diep);color:rgba(246,240,230,.82);padding:56px 0 30px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;margin-bottom:36px}
.footer-grid h4{color:var(--linnen);font-size:16px;margin-bottom:12px}
.footer-grid a{text-decoration:none;border-bottom:1px solid var(--oker)}
.footer-grid p{margin-bottom:6px}
.footer-onder{border-top:1px solid rgba(246,240,230,.16);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------- Mobiel ---------- */
@media(max-width:840px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-half{padding:130px 28px 44px}
  .hero-praktijk{padding-top:44px}
  .hero-naam{top:36px;font-size:clamp(44px,13vw,72px)}
  .hero-sub{display:none}
  .kaarten,.kaarten.twee,.pakketten,.reviews,.blog-lijst,.contact-grid,.foto-rij{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  section{padding:56px 0}
  .adem::before,.adem::after{display:none}
  .nav-links{gap:16px}
}

/* ---------- Tweekoloms tekst+beeld ---------- */
.duo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
.duo-grid.midden{align-items:center}
@media(max-width:840px){.duo-grid{grid-template-columns:1fr}}


/* ---------- Dropdown-navigatie ---------- */
.nav-links>li{position:relative}
.nav-links .submenu{display:none;position:absolute;top:100%;left:-6px;background:#fff;border:1px solid var(--line);border-radius:3px;min-width:200px;padding:6px 0;list-style:none;box-shadow:0 10px 26px rgba(70,53,44,.14);z-index:60}
.nav-links li:hover>.submenu,.nav-links li:focus-within>.submenu{display:block}
.submenu a{display:block;padding:9px 18px;border-bottom:none;font-weight:600;font-size:14px}
.submenu a:hover{background:var(--lindelicht)}
.heeft-sub>a::after{content:" \25BE";font-size:10px;opacity:.6}

/* ---------- Hero-naam in takkleuren ---------- */
.nk-far{color:var(--linde)}
.nk-dau{color:var(--koper)}
.hs-l{color:var(--linde)}
.hs-r{color:var(--koper)}
.hs-m{color:var(--oker)}

/* ---------- Videoplaceholder ---------- */
.video-vlak{background:var(--moude);color:var(--linnen);aspect-ratio:9/16;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:12px}
.media-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px;align-items:start}
@media(max-width:840px){.media-rij{grid-template-columns:repeat(2,1fr)}}

/* ---------- Losse review ---------- */
.review.solo{max-width:680px;margin:0 auto}

/* ---------- Contact: takkeuze ---------- */
.tak-keuze{display:flex;gap:10px;margin-bottom:24px}
.tak-knop{flex:1;padding:13px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:700;font-size:15px;font-family:'Nunito Sans',sans-serif;border-radius:2px;color:var(--moude)}
.tak-knop.actief-tak{background:var(--moude);color:var(--linnen);border-color:var(--moude)}


/* ---------- Foto's ---------- */
.foto{display:block;width:100%;object-fit:cover;border-radius:3px;border:1px solid var(--line);background:var(--lindelicht)}
.foto.liggend{aspect-ratio:3/2}
.foto.staand{aspect-ratio:4/5}
.foto.vierkant{aspect-ratio:1/1}

/* ---------- Video-embed (klik-om-te-laden) ---------- */
.video-embed{position:relative;aspect-ratio:9/16;width:100%;background:var(--moude);border:none;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--linnen);cursor:pointer;text-align:center;padding:16px;font-family:'Nunito Sans',sans-serif;font-size:15px}
.video-embed:hover .play{transform:scale(1.08)}
.video-embed .play{width:56px;height:56px;border-radius:50%;background:var(--oker);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--moude);transition:transform .2s;padding-left:4px}
.video-embed .video-hint{font-size:12px;opacity:.75}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:3px}

/* ---------- YouTube-kanaal blok ---------- */
.kanaal-blok{margin-top:26px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--koper);border-radius:3px;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.kanaal-blok p{font-size:15px;max-width:52ch;margin:0}

/* ---------- Cookiemelding ---------- */
.cookie-melding{position:fixed;left:18px;bottom:18px;max-width:340px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--oker);border-radius:3px;padding:16px 18px;font-size:14px;box-shadow:0 12px 34px rgba(70,53,44,.2);z-index:80;display:none}
.cookie-melding.zichtbaar{display:block}
.cookie-melding p{margin-bottom:12px}
.cookie-melding .knop{padding:9px 20px;font-size:14px}
@media(max-width:480px){.cookie-melding{left:12px;right:12px;bottom:12px;max-width:none}}

/* ---------- Media-rij: foto's even hoog als de video's ---------- */
.media-rij .foto{aspect-ratio:9/16;height:auto}