/* =========================================================
   DUURZAAMHEID: page stylesheet from the static build, scoped to #main.
   Header rules were removed (chrome.css handles them). The hero photo is
   set inline from the ACF field instead of being hardcoded here.
   ========================================================= */

#main{--forest:#142D2D;--forest-deep:#0A1616;--forest-mid:#2C4A46;--ink:#0E1A19;--mist:#6E7A77;--sand:#E4DFD4;--bone:#F2F1EC;--chalk:#FBFAF7;--pad:160px;--gut:40px;--header-h:96px;--hair:1px solid var(--sand);}
body.tpl-duurzaamheid{margin:0;background:#F2F1EC;color:#0E1A19;font-family:'Inter Tight',system-ui,-apple-system,sans-serif;font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
#main h1,#main h2{font-family:'Archivo',system-ui,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.022em;line-height:.96;color:#fff;margin:0;}
#main h1{font-size:clamp(42px,7.2vw,112px);}
#main h2{font-size:clamp(30px,4.4vw,64px);}
#main h3{font-family:'Archivo',system-ui,sans-serif;font-weight:600;letter-spacing:-.01em;color:#fff;font-size:20px;margin:32px 0 16px;}
#main p{margin:0 0 1.15em;}
#main a{color:#fff;text-decoration:none;}
#main ul,#main ol{margin:0 0 1.15em;padding-left:1.1em;}
#main li{margin-bottom:.45em;}
#main .container{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--gut);}
#main .narrow{max-width:800px;}
#main .section{padding:var(--pad) 0;}
#main .section--chalk{background:var(--chalk);}
#main .section--dark{background:var(--forest);color:#fff;}
#main .split{display:flex;gap:96px;align-items:flex-start;}
#main .split--center{align-items:center;}
#main .split__a{flex:0 0 42%;}
#main .split__b{flex:1;}
#main .mb-24{margin-bottom:24px}#main .mb-32{margin-bottom:32px}#main .mb-40{margin-bottom:40px}#main .mb-56{margin-bottom:56px}
#main .eyebrow{font-family:'Archivo',sans-serif;font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mist);margin:0 0 28px;}
#main .lead{font-size:clamp(19px,1.55vw,23px);line-height:1.5;}
#main .btn{display:inline-block;font-family:'Archivo',sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:21px 44px;background:var(--forest);color:#fff;border:1px solid var(--forest);cursor:pointer;text-decoration:none;}
#main .btn:hover{background:var(--forest-mid);}
/* Rounded like the buttons on the other pages. */
#main .btn{border-radius:9999px;}
/* The static page sat below a fixed 96px header (body padding-top) and the
   hero also reserved the header height. The shared header is transparent
   over the hero, so the photo now runs behind it and the text keeps the
   same position: 96px + header-h + 128px. */
#main .page-hero{padding:calc(96px + var(--header-h) + 128px) 0 var(--pad);background-color:#142D2D;}
#main .page-hero h1{margin-bottom:36px;color:#fff !important;}
#main .page-hero .eyebrow{color:rgba(255,255,255,.7);}
#main .page-hero .lead{max-width:620px;margin-bottom:44px;color:rgba(255,255,255,.88);}
#main .ph{display:flex;align-items:center;justify-content:center;background:#E4E0D6;border-radius:20px;aspect-ratio:16/9;cursor:pointer;position:relative;overflow:hidden;}
#main .ph__label{font-size:13px;color:#999;text-align:center;padding:20px;}
@media (max-width:768px){#main .narrow{max-width:600px;}#main .split{flex-direction:column;gap:48px;}#main .split__a{flex:1;}}

/* Editor content: the static page put margin-top:48px on every policy
   heading after the first. */
#main .as-editor h3 ~ h3{margin-top:48px;}
#main .as-editor strong{font-weight:700;}

/* Contrast fixes: headings were white on light sections in the static
   build (invisible). */
#main .section:not(.section--dark) h2,
#main .section:not(.section--dark) h3{color:#142D2D;}