/* ============================================================
   VVM Pleisterwerken — één stylesheet
   Basisgeometrie uit het Housiq-designsysteem, zwart-wit-thema,
   en alle eigen onderdelen. Enkel wat de site gebruikt.
   ============================================================ */

/* ---------- Lettertypes (zelf gehost, OFL) ---------- */
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/dm-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/dm-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens: zwart-wit, afgestemd op het logo ---------- */
:root {
  --ink: #0a0a0a;
  --ink-soft: #3f3f3f;
  --mint: #f2f0eb;        /* sectie-achtergrond: warm beige (intro, offerteblok, kaarten) */
  --accent: #0a0a0a;      /* primaire actie = zwart */
  --cream: #eae8e4;
  --line: rgba(10, 10, 10, 0.12);
  --line-soft: rgba(10, 10, 10, 0.18);
  --ease: cubic-bezier(0.44, 0, 0.14, 1);
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Anders wint een eigen display-regel (bv. op knoppen) van het hidden-attribuut. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 118px; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { text-decoration: none; color: inherit; }
button { font: inherit; background: none; border: 0; cursor: pointer; }

body {
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "cv03" on, "cv04" on, "cv09" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container { width: 100%; max-width: 1320px; margin-inline: auto; }

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* ---------- Toegankelijkheid: skip-link en zichtbare focus ---------- */
.skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 30;
  padding: 10px 16px; background: #0a0a0a; color: #fff; border-radius: 8px; font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; outline: 3px solid #fff; outline-offset: -6px; }
main:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #0a0a0a; outline-offset: 3px; box-shadow: none;
}
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 2px; box-shadow: none; }

/* ---------- Typografie ---------- */
.t-display { font-size: 82px; font-weight: 600; line-height: 100%; letter-spacing: -0.06em; color: var(--ink); }
.t-h1      { font-size: 72px; font-weight: 600; line-height: 1.1em; letter-spacing: -0.02em; color: var(--ink); }
.t-h2      { font-size: 48px; font-weight: 600; line-height: 1.1em; letter-spacing: -0.02em; color: var(--ink); }
.t-h3      { font-size: 30px; font-weight: 600; line-height: 1.1em; letter-spacing: -0.01em; color: var(--ink); }
.t-h5      { font-size: 20px; font-weight: 500; line-height: 1.2em; letter-spacing: -0.01em; color: var(--ink); }
.t-body    { font-size: 16px; font-weight: 500; line-height: 1.4em; color: var(--ink-soft); }
.t-body-600 { font-weight: 600; }
.t-eyebrow { font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.3em; text-transform: uppercase; color: var(--ink-soft); }
.t-label   { font-size: 14px; font-weight: 600; line-height: 1.3em; color: var(--ink-soft); }
.t-caption { font-size: 13px; font-weight: 400; line-height: 1.3em; color: var(--ink-soft); }
/* Nooit een woord in twee kappen met een afbreekstreepje. Breekt een woord bij
   uitzondering toch niet, dan schuift het in zijn geheel naar de volgende regel;
   break-word is enkel de noodrem tegen tekst die het scherm uit loopt. */
.t-display, .t-h1, .t-h2, .t-h3, .t-h5 { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
.t-h1 a, .t-h2 a, .t-display a { text-decoration: underline; text-decoration-thickness: 0.04em; text-underline-offset: 0.08em; }
.t-body a:not(.btn-plain):not(.btn-yellow):not(.btn-mint) { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Knoppen ---------- */
.roll { display: block; height: 1.3em; overflow: hidden; }
.roll > span { display: flex; flex-direction: column; transition: transform 0.3s var(--ease); }
.roll > span > span { line-height: 1.3em; white-space: nowrap; }
a:hover .roll > span, button:hover .roll > span { transform: translateY(-50%); }

.btn-yellow {
  position: relative; display: inline-flex; align-items: center;
  height: 54px; padding: 0 108px 0 20px;
  background: #0a0a0a; border-radius: 38px;
  font-size: 16px; font-weight: 600; color: #fff;
}
.btn-yellow .circle {
  position: absolute; right: 8px;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: #0a0a0a;
}
.btn-yellow .circle svg { transition: transform 0.3s var(--ease); }
.btn-yellow:hover .circle svg { transform: translateX(2px); }
.btn-yellow:hover { background: #2b2b2b; }

.btn-plain {
  display: inline-flex; align-items: center; height: 54px; padding: 0 24px;
  background: #0a0a0a; border-radius: 38px;
  font-size: 16px; font-weight: 600; color: #fff;
  transition: background 0.3s var(--ease);
}
.btn-plain:hover { background: #2b2b2b; }

.btn-mint {
  display: inline-flex; align-items: center; height: 56px; padding: 0 30px;
  background: #eceae6; border-radius: 38px;
  font-size: 16px; font-weight: 400; color: #0a0a0a;
  transition: background 0.3s;
}
.btn-mint:hover { background: #e0ded9; }

.btn-dark {
  position: relative; display: inline-flex; align-items: center;
  height: 43px; padding: 0 60px 0 16px;
  background: #0a0a0a; border-radius: 38px;
  font-size: 16px; font-weight: 600; color: #fff;
}
.btn-dark .circle {
  position: absolute; right: 4px;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: #0a0a0a;
}
.btn-dark .circle svg { transition: transform 0.3s var(--ease); }
.btn-dark:hover .circle svg { transform: translateX(2px); }

/* ---------- Scroll-reveal (enkel als JavaScript draait) ---------- */
html.js .reveal        { opacity: 0.001; transform: translateY(60px);  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
html.js .reveal-card   { opacity: 0.001; transform: translateY(100px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
html.js .reveal-scale  { opacity: 0.001; transform: scale(1.2);        transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
html.js .is-in         { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .reveal-card, html.js .reveal-scale { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Navigatie — vast bovenaan; het merkteken is bijna vierkant,
   dus de balk krijgt wat meer hoogte om het leesbaar te tonen.
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  background: #fff; padding: 12px 30px;
  display: flex; justify-content: center;
}
.nav-bar { display: flex; align-items: center; justify-content: space-between; height: 78px; width: 100%; max-width: 1320px; }
.nav-left { display: flex; align-items: center; gap: 102px; }
.nav-links { display: flex; align-items: center; gap: 18px; }
.nav-links a { display: flex; align-items: center; gap: 2px; font-size: 16px; color: var(--ink-soft); }
.nav-burger { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-burger span { width: 20px; height: 2px; background: var(--ink); transition: transform 0.3s, opacity 0.3s; }
.nav-panel { display: none; }
.nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.logo { display: block; height: 74px; width: auto; }

/* ============================================================
   Hero (home)
   ============================================================ */
/* Geen vaste hoogte: als de tekstkolom hoger uitvalt, blijft de ondermarge
   (88 px) gelijk aan de bovenmarge van het beige introblok eronder. */
.hero { position: relative; display: flex; justify-content: center; padding: 182px 30px 88px; min-height: 783px; overflow: clip; }
.hero-inner { position: relative; display: flex; align-items: center; max-width: 1320px; width: 100%; min-height: 551px; }
/* Schaalt mee tussen 1025 en 1440 px, zodat de tekst nooit onder de foto
   rechts loopt; boven 1440 blijft de kolom op 654 px staan. */
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 78px; width: 55%; max-width: 654px; }
.hero-copy-top { display: flex; flex-direction: column; gap: 20px; }
.hero-copy-text { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
/* Roterend woord in de hero-kop. Het staat op een eigen regel, zodat de
   wisselende woordlengte de rest van de kop niet verschuift. De overige
   woorden staan er onzichtbaar achter, zodat de kop voluit voorgelezen en
   geïndexeerd wordt: "Strak pleisterwerk voor muren, plafonds, renovatie
   en nieuwbouw". */
.rotor { display: inline-block; }
html.js .rotor { transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }  /* de houder schuift zacht mee */
.rotor-woord { display: inline-block; white-space: nowrap; }
.rotor-letter { display: inline-block; will-change: transform, opacity, filter; }
.rotor-letter.rotor-in { animation: rotor-op 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.rotor-letter.rotor-uit { animation: rotor-af 0.34s cubic-bezier(0.55, 0, 0.85, 0.4) forwards; }

/* Geen omklappende letters meer: elke letter komt uit een lichte waas
   omhoog en zakt bij het vertrek weer weg. Rustiger en fijner dan de
   3D-flip, en de tussenpoos per letter houdt het levendig. */
@keyframes rotor-op {
  0%   { opacity: 0; transform: translateY(0.34em); filter: blur(7px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes rotor-af {
  0%   { opacity: 1; transform: translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-0.26em); filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .rotor { transition: none; }
  .rotor-letter.rotor-in, .rotor-letter.rotor-uit { animation: none; opacity: 1; transform: none; filter: none; }
}

/* De hero-kop breekt geen woorden af: "pleisterwerk" blijft op één regel. */
.hero h1 { text-wrap: wrap; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; word-break: normal; }
html.js .rotor-woord.rotor-uit { transform: translateY(-0.2em); opacity: 0; }
html.js .rotor-woord.rotor-onder { transform: translateY(0.2em); opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .rotor-woord, html.js .rotor-woord.rotor-uit, html.js .rotor-woord.rotor-onder { transition: none; transform: none; opacity: 1; }
}

/* Alleen voor voorleessoftware, niet zichtbaar. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-media {
  position: absolute; top: -160px; right: 4px; z-index: 1;
  width: 570px; max-width: 40%; bottom: 0; /* groeit mee met de tekstkolom en blijft onderaan uitgelijnd */
  border-radius: 16px; overflow: clip;
}
.hero-media .hero-img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Intro (home): statement + [beeld | kaart zustersite]
   ============================================================ */
.intro { padding: 88px 30px 80px; background: var(--mint); }
.intro .container { display: flex; flex-direction: column; gap: 56px; }
.intro-statement { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; max-width: 900px; }
.intro-lede { max-width: 58ch; font-size: 18px; line-height: 1.5; }
.intro-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* Vaste hoogte: anders bepaalt de foto (4:3) de rijhoogte en hangt de kaart ernaast half leeg. */
.intro-row .cell-img { position: relative; height: 340px; border-radius: 16px; overflow: hidden; }
.intro-row .cell-img img { width: 100%; height: 100%; object-fit: cover; }
.intro-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; }
.intro-card .btn-plain { margin-top: 8px; }

/* ============================================================
   Sectiekoppen, kaarten met icoon, pluspunten
   ============================================================ */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }
.sec-head-left { display: flex; flex-direction: column; gap: 16px; }
.sec-head .btn-plain { flex-shrink: 0; }
.card-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); margin-top: auto; }
.card-link:hover { text-decoration: underline; }

.ico-sec { padding: 0 30px 72px; }
.intro + .ico-sec { padding-top: 96px; } /* na het beige introblok heeft de sectie een eigen bovenmarge nodig */
.ico-sec .sec-head { margin-bottom: 40px; }
.ico-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ico-card {
  display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 16px; row-gap: 6px;
  padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
}
.ico-card .ico { grid-row: 1 / span 2; align-self: start; margin-top: 2px; }
.ico-card h3, .ico-card p { grid-column: 2; }
.ico { display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.ico svg { width: 26px; height: 26px; }
.ico.klein svg { width: 24px; height: 24px; }
.ico-lijst { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }
.ico-lijst > div { display: flex; gap: 16px; align-items: flex-start; }
.ico-lijst .ico { flex-shrink: 0; margin-top: 2px; }
.ico-lijst strong { display: block; color: var(--ink); margin-bottom: 2px; }

/* ============================================================
   Werkgebied-sectie (home)
   ============================================================ */
.why { padding: 110px 30px; }
.why-grid { display: grid; grid-template-columns: 654px minmax(0, 1fr); gap: 42px; align-items: center; }
.why-left { display: flex; flex-direction: column; }
.why-left .head { display: flex; flex-direction: column; gap: 20px; }
.why-img { position: relative; margin-top: 50px; height: 633px; border-radius: 16px; overflow: hidden; }
.why-img img { width: 100%; height: 100%; object-fit: cover; }
.why-right { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.why-tekst { display: flex; flex-direction: column; gap: 16px; max-width: 56ch; }

/* ============================================================
   Contact — 2 kolommen, witte formulierkaart
   ============================================================ */
.contact { padding: 96px 30px; background: var(--mint); }
.contact.vraag { background: #fff; }
.contact.vraag .form-card { border: 1px solid var(--line); box-shadow: none; }
.contact .container { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.contact-left { display: flex; flex-direction: column; gap: 28px; }
.contact-rows { display: flex; flex-direction: column; gap: 16px; }
.contact-rows > div { display: flex; align-items: center; gap: 12px; }
.c-ico { display: inline-flex; flex-shrink: 0; }
.form-card { background: #fff; border-radius: 16px; padding: 40px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 1px 0 var(--line); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field input, .field textarea {
  font: inherit; font-size: 16px; color: var(--ink);
  border: 1px solid var(--line-soft); border-radius: 10px; background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input { height: 52px; padding: 0 16px; }
.field textarea { min-height: 132px; padding: 14px 16px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: #0a0a0a; box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12); }
.form-card .btn-plain { width: 100%; justify-content: center; }
.form-card .form-note { font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.form-card .form-note a, .form-status a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.form-status { margin-top: -8px; }
.contact-info { padding: 0 30px 40px; }
.contact-info .net-card a { color: var(--ink); }
.net-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 32px; display: flex; flex-direction: column; gap: 12px;
}

/* ============================================================
   Footer
   ============================================================ */
/* Zwart, met witte tekst; de belknop keert om (wit met zwarte cirkel). */
.footer { padding: 110px 30px 40px; background: #0a0a0a; color: #fff; }
.footer .t-h1, .footer .t-h2, .footer .t-label { color: #fff; }
.footer .t-body, .footer .t-caption, .footer-legal a { color: rgba(255, 255, 255, 0.72); }
.footer .t-body a:not(.btn-plain):not(.btn-yellow):not(.btn-mint) { color: #fff; } /* wint van de algemene linkregel */
.footer a:focus-visible { outline-color: #fff; }
.footer .btn-yellow { background: #fff; color: #0a0a0a; }
.footer .btn-yellow .circle { background: #0a0a0a; color: #fff; }
.footer .btn-yellow:hover { background: #e9e6df; }
.footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 72px; }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.footer-col { display: flex; flex-direction: column; gap: 16px; }
.footer-brand { display: flex; flex-direction: column; gap: 28px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a.t-body:hover { color: #fff; text-decoration: underline; }
/* Witte versie met doorzichtige achtergrond: geen vlak, geen kader. */
.footer .logo { height: 76px; width: auto; align-self: flex-start; flex: 0 0 auto; object-fit: contain; }
.footer-legal { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; }
.footer-legal a:hover { color: #fff; text-decoration: underline; }

/* Belbalk: alleen op mobiel, vast onderaan. Vaklui worden gebeld,
   niet gemaild — dus die knop hoort onder de duim te zitten. */


/* ============================================================
   Subpagina's
   ============================================================ */
.page-hero { padding: 198px 30px 80px; }
.page-hero .container { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.page-hero h1 { max-width: 900px; }
.page-hero .t-body { max-width: 660px; }
.page-hero-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.page-hero.nf { min-height: 70vh; justify-content: center; display: flex; }
.page-hero.nf .container { justify-content: center; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs-sep { color: var(--line-soft); }
.crumbs span[aria-current] { color: var(--ink); }


/* Tekst + beeld */
.split { padding: 80px 30px; }
.split .container { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.split-rev .split-copy { order: 2; }
.split-rev .split-media { order: 1; }
.split-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.split-media { border-radius: 16px; overflow: hidden; }
.split-media img { width: 100%; height: 520px; object-fit: cover; }

.tick-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.tick-list li { display: flex; align-items: flex-start; gap: 16px; }
.tick-list svg { flex-shrink: 0; }
.tick-list.sm { gap: 12px; }
.tick-list.sm svg { width: 20px; height: 20px; }
.tick-list.kernen { gap: 8px; }
.tick-list.kernen .t-caption { color: var(--ink-soft); }

/* Scope-notitie onder de pluspunten: belangrijk genoeg om leesbaar te zijn. */
.scope-note {
  margin-top: -4px; padding-left: 14px; border-left: 2px solid var(--line-soft);
  max-width: 52ch; color: var(--ink-soft); font-size: 15px; line-height: 1.45;
}

/* Kaartrasters */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.werkgebied-list { padding: 20px 30px 100px; }
.werkgebied-list .sec-head { margin-bottom: 36px; }
.city-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.city-card a { color: inherit; }
.city-card h3 a:hover { text-decoration: underline; }
.city-card .card-link { margin-top: auto; }

/* Brede foto onder de paginakop */
.article-media { padding: 0 30px 60px; }
.article-media img { width: 100%; height: 520px; object-fit: cover; border-radius: 16px; }

/* Interne linkstrook */
.regio-strip { padding: 48px 30px 88px; }
.regio-strip .container { border-top: 1px solid var(--line); padding-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.regio-strip .t-h3 { margin-bottom: 4px; }
.regio-strip a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.regio-strip a:hover { color: var(--ink); }

/* Juridische tekst */
.article { padding: 0 30px 110px; }
.article.single .container { display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; }
.article-body { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.rich p { margin-bottom: 14px; }
.rich p:last-child { margin-bottom: 0; }
.rich ul, .rich ol { margin: 0 0 14px 20px; display: flex; flex-direction: column; gap: 8px; }
.rich h2 { font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 28px 0 12px; }
.rich h3 { font-size: 22px; font-weight: 600; color: var(--ink); margin: 22px 0 10px; }
.rich a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.rich strong { color: var(--ink); }

/* ============================================================
   Responsief — tablet ≤ 1024, mobiel ≤ 767
   ============================================================ */
@media (max-width: 1024px) {
  .t-display { font-size: 56px; }
  .t-h1 { font-size: 52px; }
  .t-h2 { font-size: 40px; }
  .nav-links, .nav .btn-dark { display: none; }
  .nav-burger { display: flex; }
  .nav.open .nav-panel {
    display: flex; flex-direction: column; gap: 18px;
    position: absolute; top: 102px; left: 0; right: 0;
    background: #fff; padding: 24px 20px;
    box-shadow: 0 12px 30px rgba(10, 10, 10, 0.08);
  }
  .nav-panel a { font-size: 16px; color: var(--ink-soft); }
  .nav-panel a.btn-dark { display: inline-flex; justify-content: center; color: #fff; }

  .hero { min-height: 0; padding: 138px 24px 64px; }
  .intro { padding-top: 64px; }
  .hero-inner { flex-direction: column; height: auto; align-items: flex-start; }
  .hero-copy { width: 100%; max-width: none; gap: 48px; }
  .hero-media { position: relative; top: auto; right: auto; width: 100%; max-width: none; height: 420px; margin-top: 40px; }

  .why-grid { grid-template-columns: 1fr; gap: 48px; }
  .why-img { height: 460px; }
  .contact .container { grid-template-columns: 1fr; gap: 48px; }
  .form-card { padding: 32px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
  .footer h2 { font-size: 48px; }

  .page-hero { padding: 158px 24px 60px; }
  .split { padding: 60px 24px; }
  .split .container { grid-template-columns: 1fr; gap: 40px; }
  .split-rev .split-copy, .split-rev .split-media { order: 0; }
  .split-media img { height: 400px; }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .article-media img { height: 400px; }
  .ico-grid { grid-template-columns: 1fr 1fr; }
  .ico-sec { padding: 0 24px 56px; }
  .regio-strip { padding: 36px 24px 64px; }
}

@media (max-width: 767px) {
  html { scroll-padding-top: 102px; }
  .t-display { font-size: clamp(34px, 11vw, 44px); }
  /* De paginakop moet de langste gemeentenaam heel kunnen tonen
     (Wezembeek-Oppem), dus een maatje kleiner op een telefoon. */
  .page-hero h1.t-display { font-size: clamp(25px, 8.2vw, 40px); }
  .t-h1 { font-size: 36px; }
  /* Meeschalend, zodat een lange gemeentenaam heel op één regel past. */
  .t-h2 { font-size: clamp(25px, 7.8vw, 32px); }
  .t-h3 { font-size: 24px; }
  .nav { padding: 10px 20px; }
  .nav-bar { height: 66px; }
  .logo { height: 60px; }
  .nav.open .nav-panel { top: 86px; }

  .hero { padding: 114px 20px 48px; }
  .hero-media { height: 300px; }

  .intro { padding: 48px 20px 56px; }
  .intro .container { gap: 40px; }
  .intro + .ico-sec { padding-top: 56px; }
  .intro-lede { font-size: 16px; }
  .intro-row { grid-template-columns: 1fr; }
  .intro-row .cell-img { min-height: 240px; }
  .intro-card { padding: 28px; }

  .sec-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .ico-grid { grid-template-columns: 1fr; gap: 16px; }
  .ico-card { padding: 22px; }
  .ico-sec { padding: 0 20px 44px; }
  .why, .contact { padding: 72px 20px; }
  .why-img { height: 320px; }
  .form-card { padding: 24px; }

  .footer { padding: 72px 20px 32px; }
  .footer h2 { font-size: 36px; margin-bottom: 0; }
  .footer-cta { margin-bottom: 48px; }
  .footer-cols { grid-template-columns: 1fr; gap: 36px; }
  .footer-brand { grid-column: auto; }
  .footer .logo { height: 60px; }
  .footer-legal { flex-direction: column; align-items: flex-start; gap: 12px; }

  .page-hero { padding: 134px 20px 48px; }
  .page-hero .container { gap: 18px; }
  .split { padding: 48px 20px; }
  .split-media img { height: 280px; }
  .cards-grid { grid-template-columns: minmax(0, 1fr); }
  .article-media { padding-left: 20px; padding-right: 20px; }
  .article-media img { height: 260px; }
  .contact-info { padding-left: 20px; padding-right: 20px; }
  .net-card { padding: 24px; }
  .regio-strip .t-body { line-height: 2.1; }

  /* Tikdoelen ≥ 28 px hoog zonder de lay-out te verschuiven */
  .contact-rows a, .footer-col ul a, .footer-legal a, .crumbs a { display: inline-block; padding: 5px 0; }
  .footer-col ul { gap: 2px; }
  .card-link { padding: 5px 0; }

}

/* ============================================================
   Fijnafstelling uit de visuele review: koppen die evenwichtig
   afbreken, de tabletbreedte 768–1024, en de verticale ritmiek.
   ============================================================ */
.nowrap { white-space: nowrap; }
.hero h1, .page-hero h1, .why-left .head h2, .footer-cta h2, .sec-head h2, .split-copy h2 { text-wrap: balance; }
.page-hero h1 { max-width: 1040px; }

/* Gemeentepagina's: hero zonder beeld + sectie erna stapelden twee marges. */
.page-hero + .split { padding-top: 16px; }
.regio-strip { padding: 40px 30px 32px; }
.regio-strip + .contact { padding-top: 88px; }

@media (min-width: 1025px) {
  .why-left .head h2 { font-size: 64px; }
  .footer-cta { flex-wrap: nowrap; }
  .footer-cta h2 { flex: 1 1 auto; max-width: 880px; font-size: clamp(44px, 4.6vw, 72px); }
  .footer-cta .btn-yellow { flex-shrink: 0; }
}

/* 900–1024: er is plaats voor de links en de knop, dus geen hamburger. */
@media (min-width: 900px) and (max-width: 1024px) {
  .nav-links { display: flex; }
  .nav-bar > .btn-dark { display: inline-flex; }
  .nav-burger { display: none; }
  .nav-left { gap: 48px; }
  .nav.open .nav-panel { display: none; }
}
/* 768–899: de knop naast de hamburger. */
@media (min-width: 768px) and (max-width: 899px) {
  .nav-bar > .btn-dark { display: inline-flex; margin-left: auto; }
  .nav-burger { margin-left: 8px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .contact-info .net-card:nth-child(3) { grid-column: 1 / -1; }
  .hero-copy-text > .t-body { max-width: 640px; }
  .intro-row .cell-img { height: 380px; min-height: 0; }
  .page-hero + .split { padding-top: 8px; }
  .regio-strip { padding: 32px 24px 24px; }
}
@media (max-width: 899px) {
  .intro-row { grid-template-columns: 1fr; }
  .intro-row .cell-img { height: 340px; min-height: 0; }
}
@media (max-width: 1024px) {
  .nav.open .nav-panel { gap: 2px; padding: 12px 20px 24px; }
  .nav-panel > a:not(.btn-dark) { display: block; padding: 12px 0; font-size: 18px; }
  .nav-panel .btn-dark { margin-top: 14px; }
}
@media (max-width: 767px) {
  .intro-row .cell-img { height: 260px; }
  .page-hero + .split { padding-top: 0; }
  .regio-strip { padding: 24px 20px 16px; }
  .regio-strip + .contact { padding-top: 56px; }
}

/* ============================================================
   Formulieren: stappen, keuzeknoppen en meldingen
   ============================================================ */
.wizard .stap { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.wizard legend { padding: 0; float: left; width: 100%; margin-bottom: 2px; } /* float zodat de legend in de flex-flow meedoet */
.wizard legend + * { clear: both; }
.wizard .stap > .t-caption { margin-top: -6px; }
.wizard .stap > .t-label { margin-bottom: -6px; }
html.js .wizard .stap:not(.actief) { display: none; }
html:not(.js) .wizard-knoppen, html:not(.js) .wizard-voortgang { display: none; }

.wizard-voortgang { display: flex; align-items: center; gap: 14px; }
.wizard-balk { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.wizard-balk > span { display: block; height: 100%; width: 33.3%; background: var(--ink); transition: width 0.3s var(--ease); }
.wizard-knoppen { display: flex; justify-content: space-between; gap: 12px; }
.wizard-knoppen .btn-mint { height: 54px; }
.wizard-knoppen .wizard-volgende { margin-left: auto; }

.opties { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.opt span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-soft); border-radius: 999px; background: #fff;
  font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.opt:hover span { border-color: var(--ink); }
.opt input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.opt input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }

.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-velden { display: flex; flex-direction: column; gap: 20px; }
.field label .t-caption { font-weight: 400; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* De statusregel staat altijd in de boom (live region); leeg neemt hij geen plaats in. */
.form-status { margin-top: 0; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 10px; }
.form-status:empty { padding: 0; border: 0; height: 0; margin: -20px 0 0; overflow: hidden; }
.form-status.klaar { background: var(--mint); border-color: transparent; }
.form-status strong { color: var(--ink); }
.form-status:focus { outline: none; }

/* Randen van velden en keuzeknoppen: minstens 3:1 op wit (WCAG 1.4.11). */
.field input, .field textarea, .opt span { border-color: rgba(10, 10, 10, 0.5); }

/* Met JavaScript staat de verzendknop naast Vorige in de knoppenrij. */
.wizard-knoppen button[type="submit"] { width: auto; flex: 1; }

/* Op de contactpagina is het offerteblok beige en de vraagsectie wit;
   allebei krijgen ze genoeg lucht om als eigen vlak te lezen. */
.page-hero + .contact { padding-top: 72px; }
.contact.vraag { padding-top: 96px; }
@media (max-width: 767px) { .page-hero + .contact { padding-top: 48px; } .contact.vraag { padding-top: 64px; } }

/* Eén focuskader op velden: de outline hugt de rand, geen dubbele ring. */
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 0; box-shadow: none; }

@media (max-width: 767px) {
  .veld-rij { grid-template-columns: 1fr; }
  .opt span { min-height: 42px; padding: 0 14px; font-size: 14px; }
}

/* Heel smalle telefoons (320 px): knoplabels staan op één regel en kunnen niet
   krimpen, dus daar minder ruimte rond de tekst. */
@media (max-width: 360px) {
  .btn-plain, .btn-mint { padding-left: 16px; padding-right: 16px; font-size: 15px; }
  .btn-yellow { padding-left: 16px; padding-right: 96px; font-size: 15px; }
}

/* Op heel smalle telefoons mag een lang knoplabel over twee regels: anders
   duwt de knop, die niet kan krimpen, de hele pagina breder dan het scherm.
   Het roll-effect bij hover valt daar weg, en dat mist niemand op een touch. */
@media (max-width: 360px) {
  .roll { height: auto; overflow: visible; }
  .roll > span { display: block; transform: none !important; }
  .roll > span > span { white-space: normal; }
  .roll > span > span[aria-hidden] { display: none; }
  .btn-plain, .btn-mint { height: auto; min-height: 48px; padding-top: 12px; padding-bottom: 12px; }
  .btn-yellow { height: auto; min-height: 54px; padding-top: 12px; padding-bottom: 12px; }
  .intro-card { padding: 20px; }
}