/* ============================================================
   Dakbedrijf Nooij — Hoogkarspel
   Demo-website Velox Studio. Mobiel-eerst, vanilla CSS.

   Ontwerptaal: leisteen, zink en koper. Alle negen onderzochte
   Nederlandse dakdekkers gebruiken blauw; deze demo bewust niet.
   Signatuur is de schuine daklijn die secties scheidt, plus
   haarlijnen in plaats van kaarten.
   ============================================================ */

:root {
    /* Kleuren */
    --grafiet:       #15181B;
    --grafiet-zacht: #232A2F;
    --leisteen:      #2B333A;
    --zink:          #8E99A2;
    --dauw:          #E9E9E6;   /* paginagrond */
    --dauw-diep:     #DCDCD7;
    --wit:           #FFFFFF;
    --tekst:         #191D21;
    --tekst-zacht:   #4A535B;
    --rand:          #CBCBC5;
    --rand-donker:   rgba(255, 255, 255, 0.14);

    /* Eén accent: koper. Overal hetzelfde, licht en donker. */
    --koper:         #C87D3C;   /* op donker */
    --koper-diep:    #8E4E19;   /* op licht, wit tekstcontrast 6,3:1 */
    --koper-dieper:  #743E12;

    --wa:            #0C6B57;

    --font-kop:  'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;

    --container: 1180px;
    --radius: 4px;
    --schaduw: 0 4px 9px -6px rgba(21, 24, 27, 0.38);
    --overgang: 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
    --traag: 0.55s cubic-bezier(0.16, 1, 0.3, 1);

    --h-spoedbalk: 42px;
    --h-bottombar: 62px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 122px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.68;
    color: var(--tekst);
    background: var(--dauw);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-kop);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--grafiet);
}

p { max-width: 66ch; }
ul, ol { list-style: none; }
strong { font-weight: 700; }

a { color: var(--koper-diep); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 3px solid var(--koper-diep); outline-offset: 2px; border-radius: 2px; }
img, svg { display: block; max-width: 100%; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

.overslaan {
    position: absolute;
    left: -9999px;
    background: var(--grafiet);
    color: var(--wit);
    padding: 12px 18px;
    z-index: 200;
}
.overslaan:focus { left: 12px; top: 12px; }

/* ── Knoppen ── */
.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 24px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--overgang), color var(--overgang),
                border-color var(--overgang), transform 0.09s ease-out;
}
.knop:hover { text-decoration: none; }
.knop:active { transform: translateY(1px); }

.knop-koper { background: var(--koper-diep); color: var(--wit); border-color: var(--koper-diep); }
.knop-koper:hover { background: var(--koper-dieper); border-color: var(--koper-dieper); }

.knop-grafiet { background: var(--grafiet); color: var(--wit); border-color: var(--grafiet); }
.knop-grafiet:hover { background: #000; border-color: #000; }

.knop-lijn { background: transparent; color: var(--grafiet); border-color: var(--grafiet); }
.knop-lijn:hover { background: var(--grafiet); color: var(--wit); }

.knop-lijn-licht { background: transparent; color: var(--wit); border-color: rgba(255, 255, 255, 0.55); }
.knop-lijn-licht:hover { background: var(--wit); color: var(--grafiet); border-color: var(--wit); }

.knop-licht { background: var(--dauw); color: var(--grafiet); border-color: var(--dauw); }
.knop-licht:hover { background: var(--wit); border-color: var(--wit); }

.knop-wa { background: var(--wa); color: var(--wit); border-color: var(--wa); }
.knop-wa:hover { background: #09543F; border-color: #09543F; }

/* ── Spoedbalk ──
   Op de telefoon loopt de tekst over twee regels; dan is de hoogte niet
   meer gelijk aan --h-spoedbalk en schuift hij over de header heen.
   Daarom plakt hij pas vanaf de desktop. Op mobiel staat het nummer
   toch al in de balk onderaan het scherm. */
.spoedbalk {
    position: static;
    z-index: 65;
    background: var(--koper-dieper);
    color: var(--wit);
    font-size: 0.85rem;
    font-weight: 600;
}
.spoedbalk-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 14px;
    min-height: var(--h-spoedbalk);
    padding: 7px 20px;
    text-align: center;
}
.spoedbalk a { color: var(--wit); text-decoration: underline; text-underline-offset: 3px; }
.spoedbalk svg { flex: none; }

/* ── Header ── */
.siteheader {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--dauw);
    border-bottom: 1px solid var(--rand);
    transition: box-shadow var(--overgang);
}
.siteheader.gescrold { box-shadow: 0 6px 22px -14px rgba(21, 24, 27, 0.55); }
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 66px;
    padding: 10px 20px;
    max-width: var(--container);
    margin: 0 auto;
}

.logo { display: inline-flex; align-items: center; gap: 11px; color: var(--grafiet); }
.logo:hover { text-decoration: none; }
.logo-merk {
    width: 36px;
    height: 36px;
    flex: none;
    background: var(--grafiet);
    border-radius: var(--radius);
    display: grid;
    place-items: center;
}
.logo-merk svg { color: var(--koper); }
.logo-tekst {
    font-family: var(--font-kop);
    font-weight: 700;
    font-size: 1.04rem;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.logo-plaats {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.73rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--tekst-zacht);
}

.menuknop {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 10px;
    background: none;
    border: 2px solid var(--grafiet);
    border-radius: var(--radius);
    cursor: pointer;
}
.menuknop span { display: block; height: 2px; background: var(--grafiet); transition: transform var(--overgang), opacity var(--overgang); }
.menuknop[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
.menuknop[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menuknop[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }

.hoofdnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--dauw);
    border-bottom: 1px solid var(--rand);
    box-shadow: var(--schaduw);
    padding: 8px 20px 20px;
}
.hoofdnav.open { display: block; }
.hoofdnav ul { display: flex; flex-direction: column; }
.hoofdnav a {
    display: block;
    padding: 13px 2px;
    color: var(--grafiet);
    font-weight: 600;
    border-bottom: 1px solid var(--rand);
}
.hoofdnav a:hover { color: var(--koper-diep); }
.nav-bel { display: none; }
body.menu-open { overflow: hidden; }

/* ── Hero: donker veld met schuine daklijn ── */
.hero {
    position: relative;
    background: var(--grafiet);
    color: var(--wit);
    padding: 48px 0 92px;
    overflow: hidden;
}
.hero::after {
    /* De daklijn. Scheidt het donkere veld van de pagina eronder. */
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -1px;
    height: 74px;
    background: var(--dauw);
    clip-path: polygon(0 100%, 50% 6%, 100% 100%);
}
.dakspant {
    position: absolute;
    right: -12%;
    top: 8%;
    width: 70%;
    max-width: 560px;
    color: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}
.hero-grid { position: relative; z-index: 2; display: grid; gap: 30px; }
.hero h1 {
    color: var(--wit);
    font-size: clamp(2.05rem, 7.4vw, 3.4rem);
    margin-bottom: 16px;
}
.hero h1 span { color: var(--koper); }
.hero-sub {
    font-size: 1.08rem;
    color: rgba(255, 255, 255, 0.76);
    max-width: 44ch;
    margin-bottom: 26px;
}
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.hero-score {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.72);
}
.sterren { display: inline-flex; gap: 2px; color: var(--koper); flex: none; }

/* Materiaalstrook in de hero: de drie daktypen die Erik doet */
.materialen {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius);
    overflow: hidden;
}
.materiaal { background: var(--grafiet-zacht); padding: 16px 18px; }
.materiaal b {
    display: block;
    font-family: var(--font-kop);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wit);
    margin-bottom: 2px;
}
.materiaal span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.62); }

/* ── Triage: het pad kiezen. Geen concurrent doet dit. ── */
.triage { padding: 8px 0 58px; }
.triage-kop { margin-bottom: 22px; max-width: 56ch; }
.triage-kop h2 { max-width: 20ch; }
.triage-kop h2 { font-size: clamp(1.5rem, 4.4vw, 2.1rem); margin-bottom: 10px; }
.triage-kop p { color: var(--tekst-zacht); }

.paden { display: grid; gap: 12px; margin-bottom: 26px; }
.pad {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 20px 20px 18px;
    text-align: left;
    font: inherit;
    background: var(--wit);
    color: var(--tekst);
    border: 2px solid var(--rand);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--overgang), background var(--overgang), box-shadow var(--overgang);
}
.pad:hover { border-color: var(--zink); }
.pad svg { flex: none; color: var(--koper-diep); margin-top: 3px; }
.pad b {
    display: block;
    font-family: var(--font-kop);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    color: var(--grafiet);
    margin-bottom: 3px;
}
.pad span { font-size: 0.9rem; color: var(--tekst-zacht); }
.pad[aria-selected="true"] {
    background: var(--grafiet);
    border-color: var(--grafiet);
    box-shadow: var(--schaduw);
}
.pad[aria-selected="true"] b { color: var(--wit); }
.pad[aria-selected="true"] span { color: rgba(255, 255, 255, 0.68); }
.pad[aria-selected="true"] svg { color: var(--koper); }

.paneel { display: none; }
.paneel.actief { display: block; }
.paneel-binnen {
    background: var(--wit);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 26px 22px 24px;
}
.paneel h3 { font-size: 1.42rem; margin-bottom: 9px; }
.paneel > .paneel-binnen > p { color: var(--tekst-zacht); margin-bottom: 20px; }

.stappen { counter-reset: stap; }
.stap {
    counter-increment: stap;
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--rand);
}
.stap:first-of-type { border-top: 0; padding-top: 0; }
.stap::before {
    content: counter(stap);
    font-family: var(--font-kop);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--koper-diep);
    line-height: 1.1;
}
.stap h4 { font-size: 1rem; margin-bottom: 4px; }
.stap p { font-size: 0.93rem; color: var(--tekst-zacht); margin-bottom: 5px; }
.stap-duur {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--zink);
}
.paneel-slot {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 2px solid var(--grafiet);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.paneel-prijs {
    font-family: var(--font-kop);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
}
.paneel-prijs small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.82rem; color: var(--tekst-zacht); letter-spacing: 0; }

/* ── Beloftes ── */
.beloftes { background: var(--leisteen); color: var(--wit); padding: 26px 0; }
.beloftes-grid { display: grid; gap: 20px; }
.belofte { display: flex; gap: 12px; align-items: flex-start; }
.belofte svg { flex: none; color: var(--koper); margin-top: 2px; }
.belofte b {
    display: block;
    font-family: var(--font-kop);
    font-weight: 700;
    font-size: 0.97rem;
    letter-spacing: -0.02em;
}
.belofte span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.66); }

/* ── Secties ── */
.sectie { padding: 60px 0; }
.sectie--diep { background: var(--dauw-diep); }
.sectie--wit { background: var(--wit); }
.sectie-kop { margin-bottom: 32px; max-width: 56ch; }
.sectie-kop h2 { font-size: clamp(1.55rem, 4.5vw, 2.35rem); margin-bottom: 11px; max-width: 20ch; }
.sectie-kop p { color: var(--tekst-zacht); max-width: 56ch; }

/* ── Diensten: haarlijnen, geen kaarten ── */
.diensten { display: grid; gap: 0; }
.dienst {
    display: grid;
    gap: 6px;
    padding: 24px 0;
    border-top: 1px solid var(--rand);
}
.dienst:last-child { border-bottom: 1px solid var(--rand); }
.dienst h3 { font-size: 1.34rem; }
.dienst p { font-size: 0.95rem; color: var(--tekst-zacht); }
.dienst-prijs {
    font-family: var(--font-kop);
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: -0.02em;
    color: var(--grafiet);
    white-space: nowrap;
}
.dienst-prijs small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; color: var(--tekst-zacht); letter-spacing: 0; }

/* ── Levensduur: grote getallen, geen balken ── */
.levensduur { display: grid; gap: 2px; background: var(--rand); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; }
.duur { background: var(--dauw); padding: 22px 20px; }
.sectie--wit .duur { background: var(--wit); }
.duur-getal {
    font-family: var(--font-kop);
    font-weight: 700;
    font-size: 2.1rem;
    letter-spacing: -0.045em;
    line-height: 1;
    color: var(--koper-diep);
    display: block;
    margin-bottom: 8px;
}
.duur-getal small { font-size: 0.9rem; font-weight: 600; letter-spacing: 0; color: var(--tekst-zacht); }
.duur h3 { font-size: 1.04rem; margin-bottom: 5px; }
.duur p { font-size: 0.88rem; color: var(--tekst-zacht); }
.bronnoot {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 2px solid var(--koper-diep);
    font-size: 0.85rem;
    color: var(--tekst-zacht);
}

/* ── Over Erik ── */
.over-grid { display: grid; gap: 28px; align-items: start; }
.over p { color: var(--tekst-zacht); margin-bottom: 13px; }
.over-naam {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px solid var(--grafiet);
    font-family: var(--font-kop);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.over-naam span { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.88rem; color: var(--tekst-zacht); letter-spacing: 0; }

.portret {
    border-radius: var(--radius);
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: flex-end;
    padding: 18px;
    background:
        repeating-linear-gradient(115deg,
            rgba(255, 255, 255, 0.05) 0 10px,
            rgba(0, 0, 0, 0.07) 10px 21px),
        linear-gradient(165deg, #3C464E 0%, #2A323A 55%, #1C2228 100%);
}
.portret p { font-size: 0.84rem; color: rgba(255, 255, 255, 0.8); margin: 0; max-width: 30ch; }

/* ── Reviews ── */
.reviews { display: grid; gap: 18px; }
.review {
    background: var(--wit);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
}
.sectie--wit .review { background: var(--dauw); }
.review .sterren { margin-bottom: 12px; }
.review blockquote { font-size: 0.97rem; margin-bottom: 15px; }
.review figcaption {
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid var(--rand);
    font-size: 0.86rem;
    color: var(--tekst-zacht);
}
.review figcaption b { display: block; color: var(--grafiet); }

.googlescore {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 13px;
    padding: 15px 18px;
    background: var(--grafiet);
    color: var(--wit);
    border-radius: var(--radius);
    font-size: 0.93rem;
}
.googlescore b { font-family: var(--font-kop); font-weight: 700; letter-spacing: -0.02em; }

/* ── Vertrouwen ── */
.vertrouwen { display: grid; gap: 2px; background: var(--rand); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; }
.vertrouwen div { background: var(--dauw); padding: 18px 16px; }
.sectie--wit .vertrouwen div { background: var(--wit); }
.vertrouwen b {
    display: block;
    font-family: var(--font-kop);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.02em;
    margin-bottom: 3px;
}
.vertrouwen span { font-size: 0.85rem; color: var(--tekst-zacht); }

/* ── FAQ ── */
.faq { max-width: 780px; }
.faq-item { border-bottom: 1px solid var(--rand); }
.faq-item:first-child { border-top: 1px solid var(--rand); }
.faq-vraag {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    padding: 16px 0;
    font: inherit;
    font-family: var(--font-kop);
    font-weight: 700;
    font-size: 1.01rem;
    letter-spacing: -0.02em;
    text-align: left;
    color: var(--grafiet);
    background: none;
    border: 0;
    cursor: pointer;
}
.faq-teken { flex: none; width: 22px; height: 22px; position: relative; }
.faq-teken::before, .faq-teken::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--koper-diep);
    transform: translate(-50%, -50%);
}
.faq-teken::before { width: 16px; height: 2px; }
.faq-teken::after { width: 2px; height: 16px; transition: transform var(--overgang), opacity var(--overgang); }
.faq-vraag[aria-expanded="true"] .faq-teken::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-antwoord { display: none; padding: 0 0 20px; }
.faq-antwoord p { font-size: 0.95rem; color: var(--tekst-zacht); }
.faq-item.open .faq-antwoord { display: block; }

/* ── Werkgebied ── */
.plaatsen { display: flex; flex-wrap: wrap; gap: 8px; }
.plaatsen li {
    padding: 7px 13px;
    background: var(--wit);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    font-size: 0.88rem;
    font-weight: 600;
}
.sectie--wit .plaatsen li { background: var(--dauw); }

/* ── Contact ── */
.contact-grid { display: grid; gap: 30px; align-items: start; }
.contact-lijst { margin-bottom: 22px; }
.contact-lijst li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 11px 0;
    border-bottom: 1px solid var(--rand);
    font-size: 0.95rem;
}
.contact-lijst svg { flex: none; color: var(--koper-diep); margin-top: 3px; }
.contact-lijst b { display: block; }

.formulier {
    background: var(--wit);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 24px 22px;
}
.sectie--wit .formulier { background: var(--dauw); }
.formulier h3 { font-size: 1.14rem; margin-bottom: 4px; }
.formulier > p { font-size: 0.88rem; color: var(--tekst-zacht); margin-bottom: 18px; }
.veld { margin-bottom: 15px; }
.veld label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; }
.veld input, .veld select, .veld textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px;
    font: inherit;
    font-size: 1rem;
    color: var(--tekst);
    background: var(--dauw);
    border: 2px solid var(--leisteen);
    border-radius: var(--radius);
}
.sectie--wit .veld input, .sectie--wit .veld select, .sectie--wit .veld textarea { background: var(--wit); }
.veld textarea { min-height: 110px; resize: vertical; }
.veld input::placeholder, .veld textarea::placeholder { color: #5A636B; }
.veld-hint { font-size: 0.78rem; color: var(--tekst-zacht); margin-top: 5px; }
.veld-duo { display: grid; gap: 15px; }

.form-status {
    display: none;
    margin-top: 16px;
    padding: 15px 17px;
    font-size: 0.92rem;
    background: var(--grafiet);
    color: var(--wit);
    border-radius: var(--radius);
}
.form-status.ok { display: block; }

/* ── Slot ── */
.slot {
    position: relative;
    background: var(--grafiet);
    color: var(--wit);
    padding: 82px 0 56px;
    overflow: hidden;
}
.slot::before {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    top: -1px;
    height: 64px;
    background: var(--dauw);
    clip-path: polygon(0 0, 50% 94%, 100% 0);
}
.sectie--diep + .slot::before { background: var(--dauw-diep); }
.sectie--wit + .slot::before { background: var(--wit); }
.slot .container { position: relative; z-index: 2; }
.slot h2 { color: var(--wit); font-size: clamp(1.55rem, 4.6vw, 2.3rem); margin-bottom: 12px; max-width: 19ch; }
.slot p { color: rgba(255, 255, 255, 0.76); margin-bottom: 24px; }
.slot-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Footer ── */
.footer {
    background: var(--grafiet-zacht);
    color: rgba(255, 255, 255, 0.72);
    padding: 44px 0 calc(26px + var(--h-bottombar));
    font-size: 0.9rem;
}
.footer-grid { display: grid; gap: 26px; }
.footer .footer-kop {
    color: var(--wit);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.footer a { color: rgba(255, 255, 255, 0.72); }
.footer a:hover { color: var(--wit); }
.footer li { padding: 4px 0; }
.footer-merk .logo { color: var(--wit); margin-bottom: 14px; }
.footer-merk .logo-merk { background: var(--koper-dieper); }
.footer-merk .logo-merk svg { color: var(--wit); }
.footer-merk .logo-plaats { color: rgba(255, 255, 255, 0.55); }
.footer-merk p { font-size: 0.88rem; max-width: 34ch; }
.footer-onder {
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--rand-donker);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: space-between;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
}

/* ── Mobiele actiebalk ── */
.bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: flex;
    height: var(--h-bottombar);
    background: var(--grafiet);
    border-top: 2px solid var(--koper);
}
.bottombar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--wit);
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
}
.bottombar a:last-child { border-right: 0; }
.bottombar a:hover { text-decoration: none; background: rgba(255, 255, 255, 0.08); }
.bb-bel { background: var(--koper-dieper); }

/* ── Demo-badge ── */
.demo-badge {
    position: fixed;
    right: 10px;
    bottom: calc(var(--h-bottombar) + 10px);
    z-index: 80;
    background: rgba(21, 24, 27, 0.93);
    color: var(--wit);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 7px 11px;
    border-radius: var(--radius);
    max-width: calc(100vw - 20px);
}
.demo-badge:hover { background: var(--grafiet); color: var(--wit); text-decoration: none; }

/* ── Cookie-banner ── */
.cookie-banner {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(var(--h-bottombar) + 10px);
    z-index: 90;
    background: var(--wit);
    border-radius: var(--radius);
    box-shadow: 0 6px 14px -8px rgba(21, 24, 27, 0.5);
    padding: 16px 18px;
    font-size: 0.88rem;
}
.cookie-banner p { margin-bottom: 12px; max-width: none; }
.cookie-knoppen { display: flex; flex-wrap: wrap; gap: 9px; }
.cookie-knoppen button {
    min-height: 44px;
    padding: 0 16px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid var(--grafiet);
    border-radius: var(--radius);
}
#cookie-akkoord { background: var(--grafiet); color: var(--wit); }
#cookie-weigeren { background: transparent; color: var(--grafiet); }

/* ── Losse pagina's ── */
.paginakop {
    position: relative;
    background: var(--grafiet);
    color: var(--wit);
    padding: 44px 0 76px;
    overflow: hidden;
}
.paginakop::after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -1px;
    height: 56px;
    background: var(--dauw);
    clip-path: polygon(0 100%, 50% 10%, 100% 100%);
}
.paginakop .container { position: relative; z-index: 2; }
.paginakop h1 { color: var(--wit); font-size: clamp(1.85rem, 5.8vw, 2.9rem); margin-bottom: 13px; }
.paginakop p { color: rgba(255, 255, 255, 0.76); font-size: 1.03rem; }
.kruimel { font-size: 0.84rem; color: rgba(255, 255, 255, 0.55); margin-bottom: 15px; }
.kruimel a { color: rgba(255, 255, 255, 0.72); }

.tekstblok { max-width: 720px; }
.tekstblok h2 { font-size: 1.38rem; margin: 32px 0 11px; }
.tekstblok h3 { font-size: 1.08rem; margin: 22px 0 8px; }
.tekstblok p { margin-bottom: 13px; color: var(--tekst-zacht); }
.tekstblok ul { margin: 0 0 16px; }
.tekstblok ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 7px;
    color: var(--tekst-zacht);
}
.tekstblok ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 8px;
    height: 8px;
    background: var(--koper-diep);
    transform: rotate(45deg);
}

.fout { padding: 76px 0; }
.fout .cijfer {
    font-family: var(--font-kop);
    font-weight: 700;
    font-size: clamp(4rem, 17vw, 7.5rem);
    letter-spacing: -0.06em;
    line-height: 0.9;
    color: var(--koper-diep);
}

/* ── Scroll-reveal ── */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.zichtbaar {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s ease-out, transform var(--traag);
}
[data-reveal-item] { transition-delay: calc(var(--i, 0) * 60ms); }

/* ── Tablet ── */
@media (min-width: 620px) {
    .materialen { grid-template-columns: repeat(3, 1fr); }
    .beloftes-grid { grid-template-columns: 1fr 1fr; }
    .paden { grid-template-columns: 1fr 1fr; }
    .levensduur { grid-template-columns: 1fr 1fr; }
    .reviews { grid-template-columns: 1fr 1fr; }
    .vertrouwen { grid-template-columns: 1fr 1fr; }
    .veld-duo { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .dienst { grid-template-columns: 1fr auto; align-items: start; column-gap: 34px; }
    /* Alles behalve de prijs staat links; de prijs staat rechts en loopt
       over alle regels. Zonder deze regel valt een kop in de rechterkolom. */
    .dienst > * { grid-column: 1; }
    /* Prijs naast de kop op de eerste regel; de tekst loopt eronder door.
       Een span over alle rijen rekte het blok onnodig uit. */
    .dienst-prijs { grid-row: 1; grid-column: 2; text-align: right; }
}

/* ── Desktop ── */
@media (min-width: 860px) {
    html { scroll-padding-top: 130px; }

    .spoedbalk { position: sticky; top: 0; }
    .siteheader { top: var(--h-spoedbalk); }

    .menuknop { display: none; }
    .hoofdnav {
        display: block;
        position: static;
        background: none;
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    .hoofdnav ul { flex-direction: row; align-items: center; gap: 2px; }
    .hoofdnav a { padding: 9px 12px; border-bottom: 0; font-size: 0.94rem; }
    .nav-bel { display: inline-flex; margin-left: 10px; min-height: 46px; padding: 0 18px; font-size: 0.94rem; }

    .hero { padding: 72px 0 118px; }
    .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
    .materialen { grid-template-columns: 1fr; }

    .triage { padding: 14px 0 80px; }
    .paneel-binnen { padding: 34px 32px 30px; }

    /* Zoveel kolommen als er stappen zijn, anders blijft er een leeg
       vak over onderin het raster. Het nummer gaat boven de kop staan,
       want naast de kop wordt de kolom te smal. */
    .stappen { display: grid; column-gap: 34px; }
    .stappen--drie { grid-template-columns: repeat(3, 1fr); }
    .stappen--vier { grid-template-columns: repeat(2, 1fr); }
    .stap {
        grid-template-columns: 1fr;
        gap: 4px;
        border-top: 2px solid var(--grafiet);
        padding: 14px 0 0;
    }
    .stap::before { font-size: 1.15rem; }
    /* De mobiele uitzondering op de eerste stap moet hier terug, anders
       mist de eerste kolom zijn streep boven. */
    .stap:first-of-type { border-top: 2px solid var(--grafiet); padding-top: 14px; }

    .sectie { padding: 84px 0; }
    .sectie-kop { margin-bottom: 42px; }

    .levensduur { grid-template-columns: repeat(4, 1fr); }
    .over-grid { grid-template-columns: 1fr 0.68fr; gap: 56px; }
    .over-grid .portret { order: 2; }
    .beloftes-grid { grid-template-columns: repeat(4, 1fr); gap: 26px; }
    .reviews { grid-template-columns: repeat(2, 1fr); }
    .vertrouwen { grid-template-columns: repeat(4, 1fr); }
    .contact-grid { grid-template-columns: 0.78fr 1fr; gap: 54px; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }

    .bottombar { display: none; }
    .footer { padding-bottom: 30px; }
    .demo-badge { bottom: 12px; right: 12px; }
    .cookie-banner { left: auto; right: 12px; bottom: 12px; max-width: 420px; }

    .paginakop { padding: 66px 0 96px; }
    .paginakop::after { height: 68px; }
}

/* ── Rustige weergave ── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ── Koppen binnen een blok ──
   Eén maat voor kaart- en blokkoppen, in plaats van losse inline-maten
   per pagina. Ruim boven de bodytekst, zodat de ladder niet vlak wordt. */
.blok-kop {
    font-size: 1.42rem;
    line-height: 1.16;
    margin-bottom: 0.6rem;
}
.fout-kop { font-size: clamp(1.6rem, 5vw, 2.05rem); margin: 16px 0 12px; }

/* Binnen een kaart of formulier mag de blokkop kleiner, anders
   overstemt hij de inhoud van zo'n smal vak. */
.project-tekst .blok-kop { font-size: 1.08rem; margin-bottom: 0.3rem; }
.formulier .blok-kop { font-size: 1.16rem; margin-bottom: 0.25rem; }
.contact-info .blok-kop,
.contact-grid > div > .blok-kop { font-size: 1.16rem; margin-bottom: 0.7rem; }
.dienst .blok-kop { font-size: 1.3rem; }