/* Mobiel menu (alleen op smalle schermen zichtbaar) */
.d-burger{display:none;width:44px;height:44px;padding:0;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;cursor:pointer;align-items:center;justify-content:center;flex:0 0 auto}
.d-burger svg{display:block}
.d-burger.on-dark{color:#FFFFFF}
.d-menu{font-family:'Archivo',system-ui,sans-serif;position:fixed;inset:0;z-index:1000;background:#111111;color:#FFFFFF;display:flex;flex-direction:column;padding:28px 16px 32px;box-sizing:border-box;overflow-y:auto;opacity:0;transform:translateY(-12px);transition:opacity .25s ease,transform .25s ease;visibility:hidden}
.d-menu.open{opacity:1;transform:none;visibility:visible}
.d-menu-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.d-menu-top .d-cond{font-size:26px;letter-spacing:0.02em;color:#FFFFFF;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.d-menu-close{width:44px;height:44px;border:1px solid #FFFFFF;border-radius:999px;background:transparent;color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.d-menu-links{list-style:none;margin:auto 0;padding:48px 0;display:flex;flex-direction:column;gap:6px}
.d-menu-links a{font-family:'Archivo',system-ui,sans-serif;font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:0.95;font-size:64px;color:#FFFFFF;text-decoration:none;display:block;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.14)}
.d-menu-links a[aria-current="page"]{color:#8FD3CB}
.d-menu-foot{display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.5}
.d-menu-foot a{color:#FFFFFF;text-decoration:none}
.d-menu-foot .soc{display:flex;gap:20px;margin-top:8px;font-size:14px;opacity:0.75}
html.d-menu-lock,html.d-menu-lock body{overflow:hidden}
@media (max-width:760px){
.d-burger{display:inline-flex}
header.d-wrap{gap:10px !important}
header.d-wrap > a.d-cond{font-size:22px !important;gap:8px !important}
header.d-wrap > a.d-cond svg{width:22px;height:22px}
.d-nav{gap:8px !important;flex-wrap:nowrap !important}
.d-nav > a:not(.hide-m){padding:0 16px !important}
}
@media (max-width:374px){.d-nav > a:not(.hide-m){display:none !important}}
@media (prefers-reduced-motion:reduce){.d-menu{transition:none}}

/* Contactformulier (homepage en contactpagina) */
.d-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.d-form-status.ok{color:#0E6E68}.d-form-status.err{color:#B3261E}
.d-field input,.d-field textarea{width:100%;min-width:0;box-sizing:border-box}
@media (min-width:761px){form.d-form{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Tablet (761-1100px): blokken met twee kolommen onder elkaar, zodat niets buiten het kader valt */
@media (min-width:761px) and (max-width:1100px){
html body .d-stats{grid-template-columns:minmax(0,1fr)}
html body .d-stats .d-intro{order:-2}
html body .d-stats .ph{order:-1;min-height:420px}
html body .d-contact{grid-template-columns:minmax(0,1fr);gap:32px;padding:48px}
html body .d-svc{grid-template-columns:minmax(0,1fr);gap:32px;padding:48px}
html body .dp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Titels in de 'Over mij'-kaartjes schalen mee met de kolombreedte */
@media (min-width:1101px){html body .d-stat .d-cond{font-size:clamp(30px,2.9vw,44px) !important}}
/* Telefoon: zwart blok met reportagekaarten minder binnenruimte */
@media (max-width:760px){
html body div:has(> .dp-cards){padding:40px 16px 16px !important;border-radius:28px !important}
html body .dp-cards{grid-template-columns:minmax(0,1fr)}
}
.dp-card > div > div:first-child{min-width:0}

/* Koppen in gewone hoofd-/kleine letters in plaats van alles in hoofdletters (het woordmerk blijft in kapitalen) */
html body .d-cond:not(:has(> svg)){text-transform:none;font-stretch:72%;letter-spacing:-0.01em}
/* Lopende tekst in Over mij: breder en iets lichter, dan leest het rustig */
html body .d-cond.d-big{font-stretch:100%;font-weight:700;line-height:1.15 !important;letter-spacing:-0.02em}
html body h1.d-cond,html body h2.d-cond{line-height:0.95}
.d-menu-links a{text-transform:none;font-stretch:72%}

/* ===== Lettertype: EB Garamond op de hele site ===== */
html{font-size-adjust:0.47}
html body,html body *{font-family:'EB Garamond',Georgia,'Times New Roman',serif !important}
/* koppen */
html body .d-cond{font-stretch:normal !important;font-weight:500;letter-spacing:-0.01em;word-spacing:normal;font-size-adjust:none}
html body h1.d-cond,html body h2.d-cond{line-height:1}
html body .d-cond.d-big{font-weight:500;line-height:1.2 !important;letter-spacing:0;font-size-adjust:none}
/* woordmerk linksboven, in het menu en in de footer: rustige kapitalen met ruimte */
html body .d-cond:has(> svg){text-transform:uppercase;letter-spacing:0.12em;font-weight:500;font-size-adjust:none}
header.d-wrap > a.d-cond{font-size:19px !important}
/* kleine labels */
html body .d-label{letter-spacing:0.14em;font-weight:600}
.d-menu-links a{font-stretch:normal;font-weight:500;letter-spacing:-0.01em}
/* openingskop: serif heeft iets meer regelhoogte nodig */
@media (min-width:761px){html body .d-h1{font-size:min(168px, calc((max(560px, min(90vh, 62vw)) - 280px) / 3.05)) !important}}
html body .d-cond:has(> svg){white-space:nowrap}
.d-menu-top .d-cond{font-size:17px !important}
html body .d-label{letter-spacing:0.1em}
@media (max-width:760px){
header.d-wrap > a.d-cond{font-size:15px !important;letter-spacing:0.1em}
html body .d-label{letter-spacing:0.06em}
}
.d-foot .d-cond:has(> svg){font-size:20px !important}
.dc-next > *{min-width:0}
/* Smalle tablets: menu met vijf items past op één regel */
@media (min-width:761px) and (max-width:900px){
html body .d-nav{gap:16px !important}
header.d-wrap > a.d-cond{font-size:16px !important;letter-spacing:0.1em}
}
/* Telefoon: label boven de logo's op één regel houden */
@media (max-width:480px){html body .d-band .d-label{font-size:12px !important;letter-spacing:0.04em;white-space:nowrap}}
@media (max-width:374px){html body .d-band .d-label{font-size:11px !important;letter-spacing:0.02em}}
/* Telefoon: fotogalerijen ook in twee kolommen naast elkaar (zoals de oude site) */
@media (max-width:760px){
html body .dp-gal{flex-direction:row;gap:6px;padding:0 18px}
html body .dp-col{gap:6px}
}
/* Telefoon: Over mij-tekst kleiner, zodat hij niet een heel scherm vult */
@media (max-width:760px){html body .d-cond.d-big{font-size:22px !important;line-height:1.25 !important}}
/* Over mij-tekst: iets kleiner op tablet en desktop, rustige woordafstand */
html body .d-cond.d-big{word-spacing:normal;letter-spacing:-0.005em}
@media (min-width:761px){html body .d-cond.d-big{font-size:34px !important;line-height:1.22 !important}}
@media (min-width:761px) and (max-width:1100px){html body .d-cond.d-big{font-size:30px !important}}
/* Mobiel menu: kleinere items met meer ruimte ertussen */
.d-menu-links{gap:0;padding:32px 0}
.d-menu-links a{font-size:42px;line-height:1.1;padding:16px 0 14px}
@media (max-height:700px){.d-menu-links{padding:20px 0}.d-menu-links a{font-size:36px;padding:11px 0 9px}}
/* Homepage-hero: kop 10% kleiner; kop en ondertitel met een zachte schaduw voor extra contrast op lichte foto's */
@media (max-width:760px){html body .d-hero h1.d-h1{font-size:58px !important}}
@media (min-width:761px){html body .d-hero h1.d-h1{font-size:min(151px, calc((max(560px, min(90vh, 62vw)) - 280px) / 3.39)) !important}}
.d-hero h1.d-h1,.d-hero h1.d-h1 + p{text-shadow:0 1px 2px rgba(0,0,0,.30),0 0 22px rgba(0,0,0,.30)}