/* Shared layout for the main website. The pro stylesheet remains the base. */
.skip-link{position:absolute;left:16px;top:-100px;z-index:1000;background:#fff;color:#0e2c4a;padding:12px 18px}
.skip-link:focus{top:16px}
.container{width:min(100% - 2.4rem,1180px);margin-inline:auto}
main{min-width:0}
[id]{scroll-margin-top:110px}
.page-hero{padding:clamp(48px,6vw,88px) 0;background:var(--paper-2);position:relative}
.page-hero h1{font-size:clamp(2.3rem,5vw,4.2rem);max-width:21ch;text-wrap:balance}
.page-kicker{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:#14639f;margin-bottom:16px}
.page-intro{max-width:720px;font-size:clamp(1.1rem,1.6vw,1.3rem);margin-top:22px;color:var(--muted)}
.page-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn--orange{background:var(--orange-fill);color:#fff}
.page-content{padding:clamp(40px,6vw,80px) 0;background:#fff}
.page-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,5vw,72px);align-items:start}
.page-grid:not(:has(.page-aside)){grid-template-columns:1fr}
.page-article{max-width:850px;min-width:0}
.page-article h2,.page-section h2{font-size:clamp(1.7rem,3vw,2.5rem);margin:36px 0 18px;line-height:1.15}
.page-article h3,.page-section h3{font-size:1.4rem;line-height:1.25;margin:24px 0 12px}
.page-article p,.page-section p{margin:0 0 18px}
.page-article a:not(.btn),.page-section a:not(.btn),.page-faq a,.form-privacy a{color:#14639f;text-decoration:underline;text-underline-offset:3px}
.page-article ul,.page-article ol,.page-list{padding-left:24px;margin:16px 0 24px}
.page-article li,.page-list li{padding-left:5px;margin-bottom:10px}
.page-section+.page-section{margin-top:42px}
.page-aside{background:var(--paper-2);padding:28px;border-radius:20px}
.page-aside h2,.page-aside h3{font-size:1.5rem;margin-bottom:16px}
.page-aside p{margin-bottom:18px}
.page-aside a{overflow-wrap:anywhere}
.page-aside .btn{white-space:normal;line-height:1.3}
.page-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px;margin-top:28px}
.page-card{padding:28px;background:var(--paper-2);border-radius:20px;border:1px solid var(--line)}
.page-card h2,.page-card h3{font-size:1.5rem;margin:0 0 14px}
.page-card p{margin:0 0 18px;color:var(--muted)}
.page-card a{font-weight:700;color:#14639f}
.page-card img{width:100%;height:210px;object-fit:cover;border-radius:12px;margin-bottom:20px}
.page-article img{height:auto;border-radius:18px;margin:24px 0}
.page-faq{max-width:900px}
.page-faq details{border-bottom:1px solid var(--line);padding:20px 0}
.page-faq summary{font-weight:700;font-size:1.1rem;cursor:pointer;color:var(--ink);padding-right:24px}
.page-faq details p{margin:16px 0 0;color:var(--muted)}
.page-content table{width:100%;border-collapse:collapse;margin:24px 0;overflow-wrap:anywhere}
.page-content td,.page-content th{border-bottom:1px solid var(--line);padding:12px;text-align:left}
.form-privacy{font-size:.8rem;line-height:1.5;margin-top:16px;color:#fff}
/* LEAD-341 (gebruikerswens 20:31): privacyregel onder de verzendknop wit, link wit met witte onderstreping, hover iets gedempt. */
.form-privacy a{color:#fff;text-decoration-color:#fff}
.form-privacy a:hover{color:rgba(255,255,255,.85);text-decoration-color:rgba(255,255,255,.6)}
.form-status:not(:empty){padding:14px;border-radius:12px;background:#fff4e6;color:#5e3000;margin-top:16px}
.form-status[data-success]{background:#eef7ef;color:#1c4d22}
.foot__contact a{overflow-wrap:anywhere}
/* Content stays readable without JavaScript and for reduced motion. */
html:not(.reveal-ready) [data-reveal]{opacity:1;transform:none}
@media(max-width:850px){.page-grid{grid-template-columns:1fr}.page-aside{max-width:600px}.page-hero h1{max-width:none}}
@media(max-width:600px){.page-hero{padding:36px 0 44px}.page-content{padding:36px 0}.page-actions .btn{white-space:normal;line-height:1.3}.page-card{padding:24px}.page-aside{padding:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero__video{display:none}}

.lf__field textarea{width:100%;resize:vertical;min-height:90px;border:1px solid #d6e1ec;border-radius:10px;padding:12px 14px;background:#fff;font:inherit;color:var(--ink)}

.page-hero .btn--ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.page-hero .btn--ghost:hover{background:#e0eaf3}

/* LEAD-355 (gebruikerswens 21:08): stapcijfers 01 tot 04 in werkwijzekaarten vol wit, overal gelijk. */
.step__no{color:#fff;opacity:1}

/* LEAD-480: elke pagina krijgt dezelfde hero-uitstraling. De pagina's in de gedeelde shell hebben geen pro-hero,
   maar een .page-hero; die krijgt hier dezelfde banner, dezelfde sluier en dezelfde witte tekst met het oranje
   streepje. style.css blijft bytegelijk aan pro. */
/* LEAD-503: de oranje offertekaart wordt met een NEGATIEVE marge over de hero heen getrokken
   (.of-wrap in style.css, regel 142: margin-top:clamp(-104px,-7.5vw,-56px), en -48px onder 761px).
   Die pull hangt aan de vensterBREEDTE. De hero reserveerde de ruimte ervoor met een onderpadding die
   aan de vensterHOOGTE hing, dus op een breed en laag venster groeide de pull terwijl de reservering
   gelijk bleef en de tekst achter de kaart viel. Hier staat de pull een keer als variabele; de
   heroblokken reserveren pull + lucht, zodat de afstand tot de kaart per definitie gelijk blijft.
   style.css blijft bytegelijk aan pro; tests/verify_site.py bewaakt dat deze waarden blijven kloppen. */
:root{--of-pull:clamp(56px,7.5vw,104px);--hero-lucht:40px}
@media(max-width:760px){:root{--of-pull:48px}}

.page-hero{position:relative;isolation:isolate;overflow:hidden;background:#0a2238;color:#fff;
  display:grid;align-content:end;padding-block:146px clamp(48px,5vw,72px)}
/* min-height, geen height: een vaste hoogte groeit niet mee en knipt langere koppen weg (overflow hidden). */
@media(min-width:761px){.page-hero{min-height:640px}}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("/assets/img/hero/draagkracht-hero-gracht-1920.jpg") center 45%/cover no-repeat}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(9,26,45,.8) 0 34%,rgba(9,26,45,.55) 62%,rgba(9,26,45,.3) 100%)}
.page-hero h1,.page-hero .page-intro,.page-hero p{color:#fff}
.page-hero .page-kicker{color:#fff;display:inline-flex;align-items:center;gap:.55rem}
.page-hero .page-kicker::before{content:"";width:26px;height:2px;background:var(--orange);border-radius:2px}
.page-hero .btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.page-hero .btn--ghost:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px #fff}

/* LEAD-501: lijst met adresvoorstellen (assets/js/adres.js). De lijst hangt aan <body> met position fixed,
   want .of-pill heeft overflow hidden en zou hem afknippen. Tekst uit PDOK komt er als tekst in, nooit als HTML. */
.adres-lijst{position:fixed;z-index:2000;margin:0;padding:6px;list-style:none;background:#fff;color:var(--ink);
  border-radius:14px;box-shadow:0 18px 40px -12px rgba(14,44,74,.45);max-height:272px;overflow:auto}
.adres-optie{padding:9px 12px;border-radius:9px;font-family:"Poppins",sans-serif;font-size:.95rem;line-height:1.35;cursor:pointer}
.adres-optie:hover,.adres-optie.is-actief{background:#FFF1E0}

/* LEAD-501: klein omschrijvingsveld onder de offertebalk. De hint komt per pagina uit inhoud.json
   (slot offerte_omschrijving); een enkele regel, zodat het formulier niet uit balans raakt. */
.of-toelichting{display:flex;align-items:center;gap:14px;margin-top:10px;background:#fff;border-radius:999px;
  padding:12px 22px;box-shadow:0 8px 24px rgba(21,35,59,.18);cursor:text}
.of-toelichting span{font-family:"Poppins",sans-serif;font-size:11px;font-weight:700;color:var(--ink);
  letter-spacing:.02em;line-height:1;text-transform:uppercase;opacity:.78;white-space:nowrap}
.of-toelichting input{flex:1;min-width:0;border:none;outline:none;background:none;font-family:"Poppins",sans-serif;
  font-size:16px;color:var(--ink);line-height:1.4;padding:0}
.of-toelichting input::placeholder{color:#9b9b9b}
@media(max-width:760px){.of-toelichting{flex-direction:column;align-items:flex-start;gap:4px;border-radius:14px;padding:10px 16px}
.of-toelichting input{width:100%}}

/* LEAD-524 (besluit Shahab): de eyebrow BUITEN de hero stond in merkoranje op een bijna wit vlak en haalde
   2,04 tot 2,18, terwijl bij 12,5 px vet de norm 4,5 geldt. De letters worden daarom donker; het oranje
   blijft als streepje ervoor (.eyebrow::before in style.css), dus het merkaccent blijft zichtbaar.
   Eyebrows op een donker vlak hebben een eigen regel met hogere voorrang (hero, teamblok, usp, waarom,
   leadblok, tips) en houden hun kleur; die halen 4,9 tot 16,2 en hoeven niets. */
.eyebrow{color:var(--ink)}
/* Het blok "waarom" staat bij ons op Draagkracht-blauw en niet op het donkere vlak van pro; het zachte
   oranje van style.css haalt daar 2,69. Wit haalt 4,85 en op een donker vlak nog veel meer, dus deze regel
   is veilig waar het blok ook staat. */
.waarom__head .eyebrow{color:#fff}

/* Rectificatie, keuze Shahab 16 september 2026: matglazen kaart op de hero, onder de vaste balk.
   Hij staat in de gewone stroom als eerste rij van de hero, dus de herokop schuift eronder en er
   overlapt niets; de hero groeit mee. De balk is gemeten op 112 px, gelijk op 359 tot 1440, en
   staat fixed op elke pagina met een hero. Op de vijf pagina's met een page-hero staat de balk
   sticky en dus in de stroom, en is die ruimte er al.
   De hero groeit met de kaart mee: de kaart is de eerste rij, de bestaande compositie de tweede,
   en die tweede rij houdt zijn eigen hoogte. De hero wordt dus zo hoog als kaart plus compositie
   zodra dat meer is dan zijn oude ondergrens; er staat geen gemeten getal in de opmaak.
   Deze tekst blijft minimaal tot 5 november 2026 staan; weghalen alleen op woord van Shahab. */
.hero{grid-template-rows:auto 1fr}
.rectificatie{width:min(100% - 2.4rem,var(--maxw));margin:1.25rem auto 0;
  background:rgba(255,255,255,.82);color:var(--ink);border-radius:18px;
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 18px 40px rgba(10,34,56,.28);padding:1.5rem 1.7rem}
.rectificatie p{margin:0;font-size:1.0625rem;line-height:1.65}
.hero > .rectificatie{align-self:start;position:relative;z-index:2;margin-top:calc(112px + 1.25rem)}