/* ============================================================
   Schildersbedrijf Grent — Zwaag
   Demo-website Velox Studio. Mobiel-eerst, vanilla CSS.

   Ontwerptaal: grafisch en vlak. Verf is het product, dus de
   kleurvlakken zijn inhoud en geen decoratie. Rechte hoeken
   overal, harde randen, geen zachte schaduwen. Dat zet deze
   demo bewust tegenover de vier bestaande (allemaal afgerond).
   ============================================================ */

:root {
    /* Basis: koel papier, niet de warme kalkwit van de stukadoor-demo */
    --canvas:        #F4F4F2;
    --canvas-diep:   #E7E7E3;
    --inkt:          #16151A;
    --inkt-zacht:    #3A3942;
    --grijs:         #6C6B73;
    --rand:          #D6D5CF;
    --wit:           #FFFFFF;

    /* Eén merkaccent. Overal hetzelfde, van knop tot focusring. */
    --accent:        #C8372A;   /* cadmiumrood, decoratief vlak */
    --accent-diep:   #A9281D;   /* knoppen en links, wit tekstcontrast 7:1 */
    --accent-dieper: #8C2017;

    /* Verfstalen. Alléén inhoud binnen het kleuradvies-blok,
       nooit als interface-kleur. */
    --staal-blauw:   #2C4A8F;
    --staal-oker:    #C08419;
    --staal-groen:   #3F6B4F;
    --staal-zand:    #C9BCA4;
    --staal-grijs:   #7C8189;
    --staal-diep:    #2A2F33;

    --wa:            #0C6B57;   /* WhatsApp-knop, leesbaar met wit */

    --font-kop:  'Unbounded', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Work Sans', 'Segoe UI', system-ui, sans-serif;

    --container: 1200px;
    --overgang: 0.22s cubic-bezier(0.2, 0, 0, 1);
    --traag:    0.6s cubic-bezier(0.16, 1, 0.3, 1);

    --h-bottombar: 62px;
}

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

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

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

h1, h2, h3, h4 {
    font-family: var(--font-kop);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--inkt);
}

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

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

:focus-visible {
    outline: 3px solid var(--accent-diep);
    outline-offset: 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;
    top: 0;
    background: var(--inkt);
    color: var(--wit);
    padding: 12px 18px;
    z-index: 200;
}
.overslaan:focus { left: 12px; top: 12px; }

/* ── Knoppen. Recht, geen radius, fysieke indruk bij klik ── */
.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    border: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--overgang), color var(--overgang),
                border-color var(--overgang), transform 0.08s ease-out;
}
.knop:hover { text-decoration: none; }
.knop:active { transform: translateY(1px); }

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

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

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

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

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

/* ── Topbalk ── */
.topbalk {
    background: var(--inkt);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
    letter-spacing: 0.01em;
}
.topbalk-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 22px;
    padding: 9px 20px;
    text-align: center;
}
.topbalk strong { color: var(--wit); font-weight: 600; }
.topbalk-scheiding { color: rgba(255, 255, 255, 0.3); }

/* ── Header ── */
.siteheader {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--canvas);
    border-bottom: 1px solid var(--rand);
    transition: box-shadow var(--overgang), border-color var(--overgang);
}
.siteheader.gescrold {
    box-shadow: 0 1px 0 var(--inkt);
    border-bottom-color: var(--inkt);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 68px;
    padding: 10px 20px;
    max-width: var(--container);
    margin: 0 auto;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--inkt);
    text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo-vlak {
    width: 34px;
    height: 34px;
    background: var(--accent);
    position: relative;
    flex: none;
}
.logo-vlak::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 38%;
    background: var(--inkt);
}
.logo-tekst {
    font-family: var(--font-kop);
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.logo-plaats {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.73rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--grijs);
}

.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(--inkt);
    cursor: pointer;
}
.menuknop span {
    display: block;
    height: 2px;
    background: var(--inkt);
    transition: transform var(--overgang), opacity var(--overgang);
}
.hoofdnav.open ~ .menuknop span:first-child,
.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(--canvas);
    border-bottom: 2px solid var(--inkt);
    padding: 8px 20px 20px;
}
.hoofdnav.open { display: block; }
.hoofdnav ul {
    display: flex;
    flex-direction: column;
}
.hoofdnav a {
    display: block;
    padding: 13px 2px;
    color: var(--inkt);
    font-weight: 500;
    border-bottom: 1px solid var(--rand);
    text-decoration: none;
}
.hoofdnav a:hover { color: var(--accent-diep); }
.nav-bel { display: none; }

body.menu-open { overflow: hidden; }

/* ── Hero: asymmetrische split met verfstaal-wand ── */
.hero {
    padding: 44px 0 40px;
    border-bottom: 2px solid var(--inkt);
}
.hero-grid {
    display: grid;
    gap: 34px;
}
.hero h1 {
    font-size: clamp(2.05rem, 7.6vw, 3.5rem);
    margin-bottom: 18px;
}
/* Eén woordgroep in het accent. Een onderstreping met box-shadow loopt
   over de hele regelbreedte door en oogt als een losse balk. */
.hero h1 em {
    font-style: normal;
    color: var(--accent-diep);
}
.hero-sub {
    font-size: 1.08rem;
    color: var(--inkt-zacht);
    max-width: 46ch;
    margin-bottom: 26px;
}
.hero-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}
.hero-score {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 0.92rem;
    color: var(--inkt-zacht);
}
.sterren { display: inline-flex; gap: 2px; color: var(--accent); flex: none; }

/* Verfstaal-wand: vlakke kleurvlakken in wisselend formaat.
   Dit is inhoud (het kleurenpalet dat Joost meeneemt), geen versiering. */
.staalwand {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 74px;
    border: 2px solid var(--inkt);
}
.staal {
    position: relative;
    overflow: hidden;
    border-right: 1px solid rgba(22, 21, 26, 0.16);
    border-bottom: 1px solid rgba(22, 21, 26, 0.16);
}
.staal:nth-child(4n) { border-right: 0; }
.staal-naam {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 9px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: rgba(22, 21, 26, 0.86);
    color: var(--wit);
    transform: translateY(101%);
    transition: transform var(--overgang);
}
.staal:hover .staal-naam,
.staal:focus-within .staal-naam { transform: translateY(0); }
.staal--groot { grid-column: span 2; grid-row: span 2; }
.staal--breed { grid-column: span 2; }

.s-blauw { background: var(--staal-blauw); }
.s-oker  { background: var(--staal-oker); }
.s-groen { background: var(--staal-groen); }
.s-zand  { background: var(--staal-zand); }
.s-grijs { background: var(--staal-grijs); }
.s-diep  { background: var(--staal-diep); }
.s-rood  { background: var(--accent); }
.s-wit   { background: #EDEAE2; }

.staalwand-bij {
    margin-top: 10px;
    font-size: 0.84rem;
    color: var(--grijs);
    max-width: 40ch;
}

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

/* ── Sectie-basis ── */
.sectie { padding: 62px 0; }
.sectie--rand { border-top: 2px solid var(--inkt); }
.sectie--diep { background: var(--canvas-diep); }

.sectie-kop { margin-bottom: 34px; max-width: 56ch; }
.sectie-kop h2 { font-size: clamp(1.6rem, 4.6vw, 2.45rem); margin-bottom: 12px; max-width: 20ch; }
.sectie-kop p { color: var(--inkt-zacht); max-width: 56ch; }

/* ── Diensten: asymmetrisch, geen drie gelijke kaarten ── */
.diensten {
    display: grid;
    gap: 2px;
    background: var(--inkt);
    border: 2px solid var(--inkt);
}
.dienst {
    background: var(--canvas);
    padding: 26px 22px 24px;
    display: flex;
    flex-direction: column;
    transition: background var(--overgang);
}
.dienst:hover { background: var(--wit); }
.dienst-bovenrand {
    height: 7px;
    margin: -26px -22px 20px;
    background: var(--accent);
}
.dienst:nth-child(2) .dienst-bovenrand { background: var(--staal-blauw); }
.dienst:nth-child(3) .dienst-bovenrand { background: var(--staal-oker); }
.dienst:nth-child(4) .dienst-bovenrand { background: var(--staal-groen); }
.dienst:nth-child(5) .dienst-bovenrand { background: var(--staal-diep); }
.dienst h3 { font-size: 1.16rem; margin-bottom: 9px; }
.dienst p { font-size: 0.94rem; color: var(--inkt-zacht); margin-bottom: 16px; }
.dienst-vanaf {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--rand);
    font-size: 0.88rem;
    color: var(--grijs);
}
.dienst-vanaf b {
    display: block;
    font-family: var(--font-kop);
    font-weight: 600;
    font-size: 1.22rem;
    letter-spacing: -0.03em;
    color: var(--inkt);
}
.dienst--breed { grid-column: 1 / -1; }

/* ── Over Joost ── */
.over-grid { display: grid; gap: 28px; align-items: start; }
.over h2 { font-size: clamp(1.6rem, 4.6vw, 2.3rem); margin-bottom: 16px; }
.over p { color: var(--inkt-zacht); margin-bottom: 14px; }
.over-naam {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px solid var(--inkt);
    font-family: var(--font-kop);
    font-weight: 600;
    letter-spacing: -0.02em;
}
.over-naam span {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.88rem;
    color: var(--grijs);
    letter-spacing: 0;
}

/* Beeldplaats: geen foto beschikbaar, dus een eerlijk kleurvlak
   met verfrol-structuur in plaats van een kapot plaatje. */
.portret {
    border: 2px solid var(--inkt);
    background:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.10) 0 3px,
            rgba(0, 0, 0, 0.04) 3px 7px),
        linear-gradient(170deg, #35424F 0%, #253039 58%, #1B232A 100%);
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: flex-end;
    padding: 18px;
}
.portret p {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    max-width: 30ch;
}

/* ── Werkwijze: genummerde tijdlijn, geen kaarten ── */
.stappen { counter-reset: stap; display: grid; gap: 0; }
.stap {
    counter-increment: stap;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 18px;
    padding: 22px 0;
    border-top: 1px solid var(--rand);
}
.stap:last-child { border-bottom: 1px solid var(--rand); }
.stap::before {
    content: counter(stap);
    font-family: var(--font-kop);
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -0.04em;
    color: var(--accent-diep);
    line-height: 1;
}
.stap h3 { font-size: 1.08rem; margin-bottom: 5px; }
.stap p { font-size: 0.94rem; color: var(--inkt-zacht); margin-bottom: 6px; }
.stap-duur {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grijs);
}

/* ── Kostenblok: donker kleurvlak, de prijzen zijn het verhaal ── */
.kosten {
    background: var(--inkt);
    color: var(--wit);
    padding: 62px 0;
}
.kosten h2 { color: var(--wit); font-size: clamp(1.6rem, 4.6vw, 2.45rem); margin-bottom: 12px; }
.kosten .sectie-kop p { color: rgba(255, 255, 255, 0.7); }
.kosten-grid { display: grid; gap: 30px; align-items: start; }

.rekentool {
    background: var(--wit);
    color: var(--inkt);
    border: 2px solid var(--wit);
    padding: 24px 22px;
}
.rekentool h3 { font-size: 1.14rem; margin-bottom: 4px; }
.rekentool > p { font-size: 0.88rem; color: var(--grijs); margin-bottom: 18px; }
.rt-rij { margin-bottom: 15px; }
.rt-rij label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.rt-rij select,
.rt-rij input {
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    font: inherit;
    font-size: 1rem;
    color: var(--inkt);
    background: var(--canvas);
    border: 2px solid var(--inkt);
    border-radius: 0;
}
.rt-rij input { padding: 10px 12px; }
.rt-hint { font-size: 0.78rem; color: var(--grijs); margin-top: 5px; }
.rt-uitkomst {
    margin-top: 18px;
    padding: 18px 18px 16px;
    background: var(--inkt);
    color: var(--wit);
}
.rt-bedrag {
    font-family: var(--font-kop);
    font-weight: 600;
    /* Schaalt mee, zodat "EUR 1.080 tot EUR 1.520" ook op 375px
       op een regel blijft staan. */
    font-size: clamp(1.28rem, 5.2vw, 1.85rem);
    letter-spacing: -0.04em;
    line-height: 1.15;
    color: var(--wit);
    display: block;
}
.rt-toelichting { font-size: 0.84rem; color: rgba(255, 255, 255, 0.72); margin-top: 6px; }

.tarieven { display: grid; gap: 0; }
.tarief {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.tarief:first-child { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.tarief-naam { font-weight: 500; }
.tarief-naam small {
    display: block;
    font-weight: 400;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
}
.tarief-prijs {
    font-family: var(--font-kop);
    font-weight: 600;
    letter-spacing: -0.03em;
    white-space: nowrap;
}
.kosten-noot {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 2px solid var(--accent);
    font-size: 0.87rem;
    color: rgba(255, 255, 255, 0.72);
}

/* ── Projecten met voor/na ── */
.projecten { display: grid; gap: 24px; }
.project { border: 2px solid var(--inkt); background: var(--canvas); }
.vn-venster { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.vn-vlak {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--traag);
    display: flex;
    align-items: flex-end;
    padding: 14px;
}
.vn-vlak.actief { opacity: 1; }
.vn-vlak span {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: rgba(22, 21, 26, 0.86);
    color: var(--wit);
    padding: 5px 9px;
}
.vn-knoppen { display: flex; border-top: 2px solid var(--inkt); }
.vn-knop {
    flex: 1;
    min-height: 46px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    background: var(--canvas);
    color: var(--inkt);
    border: 0;
    border-right: 2px solid var(--inkt);
    cursor: pointer;
    transition: background var(--overgang), color var(--overgang);
}
.vn-knop:last-child { border-right: 0; }
.vn-knop[aria-pressed="true"] { background: var(--inkt); color: var(--wit); }
.project-tekst { padding: 16px 18px 18px; border-top: 2px solid var(--inkt); }
.project-tekst h3 { font-size: 1.04rem; margin-bottom: 5px; }
.project-tekst p { font-size: 0.9rem; color: var(--inkt-zacht); }

/* Vervangende beeldvlakken per project */
.vv-kozijn-voor { background: linear-gradient(160deg, #8C8272 0%, #6E6355 52%, #574E42 100%); }
.vv-kozijn-na   { background: linear-gradient(160deg, #F0EEE8 0%, #D9D6CE 55%, #BFBCB2 100%); }
.vv-gevel-voor  { background: linear-gradient(150deg, #7E7F79 0%, #62635E 60%, #4B4C48 100%); }
.vv-gevel-na    { background: linear-gradient(150deg, #33465E 0%, #263548 58%, #1D2937 100%); }
.vv-woon-voor   { background: linear-gradient(200deg, #B9AE9A 0%, #9C927F 62%, #7D7565 100%); }
.vv-woon-na     { background: linear-gradient(200deg, #EFEDE7 0%, #DCD9D0 58%, #C6C2B7 100%); }

/* ── Reviews ── */
.reviews { display: grid; gap: 20px; }
.review {
    background: var(--canvas);
    border: 2px solid var(--inkt);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
}
.sectie--diep .review { background: var(--wit); }
.review blockquote { font-size: 0.98rem; color: var(--inkt); margin-bottom: 16px; }
.review figcaption {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--rand);
    font-size: 0.86rem;
    color: var(--grijs);
}
.review figcaption b { display: block; color: var(--inkt); font-weight: 600; }
.review .sterren { margin-bottom: 12px; }

.googlescore {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 16px 18px;
    background: var(--inkt);
    color: var(--wit);
    font-size: 0.93rem;
}
.googlescore b { font-family: var(--font-kop); font-weight: 600; letter-spacing: -0.02em; }

/* ── Vertrouwensbalk ── */
.vertrouwen {
    display: grid;
    gap: 2px;
    background: var(--inkt);
    border: 2px solid var(--inkt);
}
.vertrouwen div {
    background: var(--canvas);
    padding: 18px 16px;
}
.sectie--diep .vertrouwen div { background: var(--canvas-diep); }
.vertrouwen b {
    display: block;
    font-family: var(--font-kop);
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
    margin-bottom: 3px;
}
.vertrouwen span { font-size: 0.85rem; color: var(--inkt-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: 500;
    font-size: 1.01rem;
    letter-spacing: -0.02em;
    text-align: left;
    color: var(--inkt);
    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(--accent-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(--inkt-zacht); }
.faq-item.open .faq-antwoord { display: block; }

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

/* ── Contact ── */
.contact-grid { display: grid; gap: 30px; align-items: start; }
.contact-info h3 { font-size: 1.12rem; margin-bottom: 12px; }
.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(--accent-diep); margin-top: 3px; }
.contact-lijst b { display: block; font-weight: 600; }

.formulier {
    background: var(--canvas);
    border: 2px solid var(--inkt);
    padding: 24px 22px;
}
.sectie--diep .formulier { background: var(--wit); }
.formulier h3 { font-size: 1.14rem; margin-bottom: 4px; }
.formulier > p { font-size: 0.88rem; color: var(--grijs); margin-bottom: 18px; }
.veld { margin-bottom: 15px; }
.veld label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.veld input,
.veld select,
.veld textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px;
    font: inherit;
    font-size: 1rem;
    color: var(--inkt);
    background: var(--wit);
    border: 2px solid var(--inkt);
    border-radius: 0;
}
.sectie--diep .veld input,
.sectie--diep .veld select,
.sectie--diep .veld textarea { background: var(--canvas); }
.veld textarea { min-height: 112px; resize: vertical; }
.veld input::placeholder,
.veld textarea::placeholder { color: #5E5D65; }
.veld-hint { font-size: 0.78rem; color: var(--grijs); 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(--inkt);
    color: var(--wit);
}
.form-status.ok { display: block; }

/* ── Slot-CTA ── */
.slot {
    background: var(--accent-diep);
    color: var(--wit);
    padding: 58px 0;
}
.slot h2 { color: var(--wit); font-size: clamp(1.6rem, 4.8vw, 2.4rem); margin-bottom: 12px; max-width: 18ch; }
.slot p { color: rgba(255, 255, 255, 0.85); margin-bottom: 26px; }
.slot-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Footer ── */
.footer {
    background: var(--inkt);
    color: rgba(255, 255, 255, 0.72);
    padding: 48px 0 calc(28px + var(--h-bottombar));
    font-size: 0.9rem;
}
.footer-grid { display: grid; gap: 28px; }
.footer .footer-kop {
    color: var(--wit);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    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 p { font-size: 0.88rem; max-width: 34ch; }
.footer-onder {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    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(--inkt);
    border-top: 2px solid var(--accent);
}
.bottombar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--wit);
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.bottombar a:last-child { border-right: 0; }
.bottombar a:hover { text-decoration: none; background: rgba(255, 255, 255, 0.08); }
.bb-bel { background: var(--accent-diep); }

/* ── Demo-badge ── */
.demo-badge {
    position: fixed;
    right: 10px;
    bottom: calc(var(--h-bottombar) + 10px);
    z-index: 80;
    background: rgba(22, 21, 26, 0.92);
    color: var(--wit);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 7px 11px;
    text-decoration: none;
    max-width: calc(100vw - 20px);
}
.demo-badge:hover { background: var(--inkt); text-decoration: none; color: var(--wit); }

/* ── Cookie-banner ── */
.cookie-banner {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(var(--h-bottombar) + 10px);
    z-index: 90;
    background: var(--wit);
    border: 2px solid var(--inkt);
    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: 600;
    cursor: pointer;
    border: 2px solid var(--inkt);
    border-radius: 0;
}
#cookie-akkoord { background: var(--inkt); color: var(--wit); }
#cookie-weigeren { background: transparent; color: var(--inkt); }

/* ── Losse pagina's ── */
.paginakop {
    padding: 44px 0 38px;
    border-bottom: 2px solid var(--inkt);
}
.paginakop h1 { font-size: clamp(1.9rem, 6vw, 3rem); margin-bottom: 14px; }
.paginakop p { color: var(--inkt-zacht); font-size: 1.04rem; }
.kruimel { font-size: 0.84rem; color: var(--grijs); margin-bottom: 16px; }
.kruimel a { color: var(--grijs); }

.tekstblok { max-width: 720px; }
.tekstblok h2 { font-size: 1.4rem; margin: 34px 0 12px; }
.tekstblok h3 { font-size: 1.1rem; margin: 24px 0 8px; }
.tekstblok p { margin-bottom: 13px; color: var(--inkt-zacht); }
.tekstblok ul { margin: 0 0 16px; }
.tekstblok ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 7px;
    color: var(--inkt-zacht);
}
.tekstblok ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 9px;
    height: 9px;
    background: var(--accent);
}

.fout { padding: 80px 0; text-align: left; }
.fout .cijfer {
    font-family: var(--font-kop);
    font-weight: 600;
    font-size: clamp(4rem, 18vw, 8rem);
    letter-spacing: -0.06em;
    line-height: 0.9;
    color: var(--accent);
}

/* ── Scroll-reveal. Bewust per sectietype anders. ── */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.zichtbaar {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease-out, transform var(--traag);
}
/* De staalwand komt op als een verfrol: van links weggeveegd. */
.wis { clip-path: inset(0 100% 0 0); }
.wis.zichtbaar {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.75s cubic-bezier(0.65, 0, 0.35, 1);
}
[data-reveal-item] { transition-delay: calc(var(--i, 0) * 70ms); }

/* ── Tablet ── */
@media (min-width: 620px) {
    .beloftes-grid { grid-template-columns: 1fr 1fr; }
    .diensten { grid-template-columns: 1fr 1fr; }
    .reviews { grid-template-columns: 1fr 1fr; }
    .vertrouwen { grid-template-columns: 1fr 1fr; }
    .veld-duo { grid-template-columns: 1fr 1fr; }
    .projecten { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .staalwand { grid-auto-rows: 92px; }
}

/* ── Desktop ── */
@media (min-width: 860px) {
    body { font-size: 17px; }
    html { scroll-padding-top: 116px; }

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

    .hero { padding: 66px 0 58px; }
    .hero-grid { grid-template-columns: 1.12fr 0.88fr; gap: 54px; align-items: center; }
    .staalwand { grid-auto-rows: 104px; }

    .beloftes-grid { grid-template-columns: repeat(4, 1fr); gap: 26px; }

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

    /* Asymmetrisch: eerste dienst dubbel breed, daarna twee rijen van twee */
    .diensten { grid-template-columns: repeat(4, 1fr); }
    .dienst:nth-child(1) { grid-column: span 2; }
    .dienst:nth-child(2) { grid-column: span 2; }
    .dienst:nth-child(n+3) { grid-column: span 2; }
    .dienst--breed { grid-column: 1 / -1 !important; flex-direction: row; gap: 30px; align-items: center; }
    .dienst--breed .dienst-bovenrand { display: none; }
    .dienst--breed > div { flex: 1; }
    .dienst--breed .dienst-vanaf { margin: 0; border-top: 0; border-left: 1px solid var(--rand); padding: 4px 0 4px 28px; flex: none; }

    .over-grid { grid-template-columns: 1fr 0.72fr; gap: 56px; }
    .over-grid .portret { order: 2; }

    .kosten-grid { grid-template-columns: 0.92fr 1fr; gap: 54px; }
    .projecten { grid-template-columns: repeat(3, 1fr); }
    .reviews { grid-template-columns: repeat(2, 1fr); }
    .vertrouwen { grid-template-columns: repeat(4, 1fr); }
    .contact-grid { grid-template-columns: 0.8fr 1fr; gap: 56px; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }

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

    .paginakop { padding: 68px 0 56px; }
}

/* ── Rustige weergave ── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .reveal, .wis { opacity: 1; transform: none; clip-path: 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.1rem); 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; }

/* Zes klussen, zes eigen beeldvlakken. Drie paren hergebruiken viel op
   als herhaling zodra ze naast elkaar in het raster stonden. */
.vv-kap-voor    { background: linear-gradient(145deg, #9A9382 0%, #7B7565 58%, #5F5A4D 100%); }
.vv-kap-na      { background: linear-gradient(145deg, #F4F2EC 0%, #E2DFD6 55%, #CAC6BA 100%); }
.vv-stolp-voor  { background: linear-gradient(175deg, #6F7A63 0%, #566049 60%, #414A37 100%); }
.vv-stolp-na    { background: linear-gradient(175deg, #48412F 0%, #363021 58%, #262215 100%); }
.vv-trap-voor   { background: linear-gradient(210deg, #C0B6A6 0%, #A29888 62%, #837A6C 100%); }
.vv-trap-na     { background: linear-gradient(210deg, #FAF9F6 0%, #E9E7E0 55%, #D2CFC5 100%); }