/* ===================================================================
   abaw.be, style.css (scaffold route B, 21/9/26)
   De basis is de volledige <style> van het goedgekeurde prototype
   workspace/branding/ronde2/index.html (mockup B, de schil), met daarachter
   de CSS die ronde2/offerte.html extra nodig heeft (de markeerstift, D).
   Toegevoegd bij de scaffold, allemaal onzichtbaar tenzij vermeld:
   - de headerfix (menu, nummer en knop op één regel) in de basis van de header
   - het gsm-menu (menuknop onder 1200 pixels, zichtbaar) en de skip-link
   - de foutmelding van het formulier en a[href^="tel:"] { white-space: nowrap }
   - .tag gescoped per effect: .foto .tag (B) en .beeld .tag (D)
   =================================================================== */

/* 1. Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* 2. Tokens */
:root {
    --color-bg: #000000;              /* het zwart van het logo */
    --color-bg-alt: #0c0c0b;          /* tweede vlak, nauwelijks lichter */
    --color-surface: #151514;         /* velden, kaarten */
    --color-accent: #7aea00;          /* lime van het logo, enkel signaal: knop, lijn, labels, een woord */
    --color-accent-hover: #8ff51c;
    --color-on-accent: #000000;       /* tekst op lime: altijd zwart, nooit wit */
    --color-text: #f2f2ee;
    --color-text-subtle: #a8a8a2;     /* 8,9 op 1 op zwart */
    --color-border: #262624;
    --color-glow: rgba(122, 234, 0, .22);
    --color-error: #ff8a7a;           /* foutmelding van het formulier, enkel tekst */

    --font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-label: 'Archivo', 'Arial', sans-serif;

    --fs-display: clamp(3.4rem, 8vw + 1rem, 8.5rem);   /* monumentaal op de startpagina */
    --fs-h2: clamp(2.4rem, 3.5vw + 1rem, 4.5rem);
    --fs-h3: clamp(1.6rem, 1.2vw + 1rem, 2.2rem);
    --fs-body: clamp(1.0625rem, .3vw + 1rem, 1.1875rem);
    --fs-label: .8125rem;

    --spacing-section: 8rem;
    --spacing-section-hero: 9rem;
    --spacing-section-tight: 4rem;
    --spacing-cta: 5rem;
    --spacing-title: 3rem;
    --spacing-block: 1.5rem;
    --spacing-box: 2rem;
    --spacing-heading: 1rem;
    --spacing-paragraph: 1rem;

    --container-width: 1280px;
    --container-padding: 0 2rem;
    --radius-btn: 4px;
    --transition: .2s ease;
}
@media (max-width: 767px) {
    :root {
        --spacing-section: 4.5rem;
        --spacing-section-hero: 5rem;
        --spacing-section-tight: 3rem;
        --spacing-cta: 3rem;
        --spacing-title: 2rem;
        --spacing-box: 1.5rem;
        --container-padding: 0 1.25rem;
    }
}

/* 3. Lettertypes (zelf gehost) */
@font-face { font-family: 'Barlow Condensed'; src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/assets/fonts/barlow-condensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/ibm-plex-sans-400.woff2') format('woff2'); font-weight: 100 700; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-wdth-wght-latin.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

html { background: var(--color-bg); scroll-behavior: smooth; }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body { position: relative; overflow-x: clip; }
/* De footer staat altijd onderaan, ook op een korte pagina zoals de 404 (22/9/26) */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
h1, h2, h3, .kop { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; line-height: .92; letter-spacing: .005em; }
h1, .display { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1; }
.lime { color: var(--color-accent); }
.label { font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent); }
.lead { color: var(--color-text-subtle); max-width: 38em; }
.citaat { font-family: var(--font-body); font-style: italic; color: var(--color-text-subtle); }
.citaat::before { content: '\201C'; } .citaat::after { content: '\201D'; }

/* 4. Layout */
.container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: var(--container-padding); }
.tekstblok { position: relative; z-index: 4; }

/* 5. Header (niet-sticky: scrollt mee weg, op gsm staat onderaan de vaste .gsm-balk) */
.site-header { position: relative; z-index: 20; }
.site-header .container { display: flex; align-items: center; gap: 2.5rem; height: 96px; }
/* flex-shrink 0: anders kromp het woordmerk in de volle header (82 breed i.p.v. 122, op 1200 zelfs 0; 19/10/26) */
.logo { flex-shrink: 0; }
.logo img { height: 48px; width: auto; }
.nav { display: flex; gap: 2rem; margin-left: auto; }
.nav a { font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; color: var(--color-text); }
.nav a:hover { color: var(--color-accent); }
.header-tel { font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-decoration: none; white-space: nowrap; }
@media (max-width: 1023px) { .nav { display: none; } .site-header .container { height: 76px; } .logo img { height: 38px; } .site-header .btn { display: none; } .header-tel { margin-left: auto; } }

/* Headerfix in de basis: menu, nummer en knop op één regel (elke mockup deed dit zelf) */
.nav a, .header-tel, .site-header .btn { white-space: nowrap; }
@media (min-width: 1024px) { .site-header .container { gap: 1.5rem; } .nav { gap: 1.25rem; } }
@media (min-width: 1024px) and (max-width: 1199px) { .nav { display: none; } .header-tel { margin-left: auto; } }
/* Tussen 1200 en 1299 past het telefoonnummer niet naast menu en knop; het staat in de footer en op de offerte */
@media (min-width: 1200px) and (max-width: 1299px) { .header-tel { display: none; } }

/* Menu: het actieve item krijgt een lime lijn */
.nav a[aria-current], .site-header .btn[aria-current] { position: relative; }
.nav a[aria-current]::after, .site-header .btn[aria-current]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; border-radius: 2px; background: var(--color-accent); }

/* Gsm-menu: onder 1200 pixels valt het menu uit de header, dan opent deze knop het volle scherm.
   Het menu staat naast de header (geen kind), zodat niets in de header het vaste vlak kan klemmen. */
.menu-knop { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; cursor: pointer; }
.menu-knop span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--color-text); }
.menu-knop span:nth-child(1) { top: 15px; }
.menu-knop span:nth-child(2) { top: 21px; }
.menu-knop span:nth-child(3) { top: 27px; }
.menu-knop:hover span { background: var(--color-accent); }
@media (max-width: 1199px) { .menu-knop { display: block; } }
@media (max-width: 1023px) { .site-header .container { gap: 1rem; } }

.gsm-menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--color-bg); }
.gsm-menu[hidden] { display: none; }
.gsm-menu__kop { display: flex; align-items: center; justify-content: space-between; height: 76px; flex: none; }
.gsm-menu__sluit { position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; cursor: pointer; }
.gsm-menu__sluit span { position: absolute; left: 10px; right: 10px; top: 21px; height: 2px; border-radius: 2px; background: var(--color-text); }
.gsm-menu__sluit span:nth-child(1) { rotate: 45deg; }
.gsm-menu__sluit span:nth-child(2) { rotate: -45deg; }
.gsm-menu__sluit:hover span { background: var(--color-accent); }
.gsm-menu__nav { display: grid; margin-top: 1.5rem; }
.gsm-menu__nav a { padding: 1rem 0 .85rem; border-bottom: 1px solid var(--color-border); font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.2rem, 6vw + 1rem, 3.4rem); line-height: .92; text-transform: uppercase; text-decoration: none; }
.gsm-menu__nav a:hover, .gsm-menu__nav a[aria-current] { color: var(--color-accent); }
.gsm-menu__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 1024px) { .gsm-menu__kop { height: 96px; } }
@media (min-width: 1200px) { .gsm-menu { display: none; } }
body.menu-open { overflow: hidden; position: fixed; width: 100%; }

/* 6. Knoppen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: 0 1.6rem; border: 0; border-radius: var(--radius-btn); background: var(--color-accent); color: var(--color-on-accent); font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; cursor: pointer; transition: background var(--transition), transform var(--transition); }
.btn:hover { background: var(--color-accent-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn-tel { display: inline-flex; align-items: center; font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .9rem; letter-spacing: .04em; text-decoration: none; border-bottom: 2px solid var(--color-accent); padding-bottom: 2px; min-height: auto; }

/* 9. Offerteformulier (enkel naam en telefoonnummer) */
.offerte-form { display: grid; gap: 1rem; max-width: 560px; }
.offerte-form label { display: grid; gap: .4rem; font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-subtle); }
.offerte-form input { min-height: 56px; padding: 0 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-btn); font-size: 1.0625rem; color: var(--color-text); }
.offerte-form input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: transparent; }
.offerte-form .btn { width: 100%; min-height: 58px; }
.form-noot { font-size: .875rem; color: var(--color-text-subtle); }
.offerte-form .form-melding { grid-column: 1 / -1; font-size: .95rem; color: var(--color-error); }
.offerte-form .form-melding[hidden] { display: none; }
/* Turnstile: zolang de widget niets rendert (lokaal zonder sleutel, of onzichtbaar) neemt hij geen rij in */
/* Verplichte velden (includes/verplicht.php): het sterretje achter het label in het lime van het logo, de uitlegregel bovenaan het formulier */
.verplicht { color: var(--color-accent); margin-left: .2em; }
.offerte-form label .verplicht { font-size: 1rem; line-height: 0; }
.verplicht-uitleg { grid-column: 1 / -1; font-size: .875rem; color: var(--color-text-subtle); }
.verplicht-uitleg .verplicht { margin: 0 .1em; }
.offerte-form .js-turnstile-target { grid-column: 1 / -1; }
.offerte-form .js-turnstile-target:empty { display: none; }

/* Zichtbaar gat: tekst die van Mathie moet komen, nooit zelf invullen */
.gat { border: 1.5px dashed var(--color-accent); border-radius: var(--radius-btn); padding: 1rem 1.25rem; color: var(--color-text-subtle); font-size: .95rem; }
.gat::before { content: 'Nog aan te vullen door Mathie'; display: block; margin-bottom: .3rem; font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--color-accent); }

/* 10. Footer */
/* Onderaan 3,5rem; enkel op gsm 7rem, als plaats voor de vaste balk (22/9/26) */
.site-footer { border-top: 1px solid var(--color-border); padding: 4.5rem 0 3.5rem; color: var(--color-text-subtle); font-size: .95rem; }
@media (max-width: 767px) { .site-footer { padding-bottom: 7rem; } }
.site-footer .container { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
.site-footer .logo img { height: 64px; }
.site-footer h2 { font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .75rem; line-height: inherit; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text); margin-bottom: 1rem; }
.site-footer ul { list-style: none; display: grid; gap: .5rem; }
.site-footer a { text-decoration: none; } .site-footer a:hover { color: var(--color-accent); }
.footer-onder { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border); font-size: .85rem; }
.footer-slogan { margin-top: 1rem; font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-subtle); }
@media (max-width: 767px) { .site-footer .container { grid-template-columns: 1fr; gap: 2rem; } }

/* Vaste balk op gsm: bellen en offerte, elk minstens 48 px */
.gsm-balk { display: none; }
@media (max-width: 767px) {
    .gsm-balk { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(0,0,0,.92); border-top: 1px solid var(--color-border); backdrop-filter: blur(8px); }
    .gsm-balk a { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: var(--radius-btn); font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
    .gsm-balk .bel { border: 1.5px solid var(--color-text); color: var(--color-text); }
    .gsm-balk .offerte { background: var(--color-accent); color: var(--color-on-accent); }
}

/* 11. Hulp */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: .75rem 1.1rem; border-radius: var(--radius-btn); background: var(--color-accent); color: var(--color-on-accent); font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.skip-link:focus { top: 1rem; }
a[href^="tel:"] { white-space: nowrap; }   /* telefoonnummers nooit midden in de regel breken */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* 14. Minder beweging: de lijn staat meteen volledig getekend, geen animatie */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ===================================================================
   De schil (B), de startpagina (21/9/26)
   De lijn draait om de inhoud als een appelschil: vóór de foto's dik en
   helder, erachter dun en donker. Twee SVG-lagen, één onder en één boven
   de beelden (includes/penseel.php). Energie zoals Razer: lime gloed
   achter zwevende beelden. Het script: assets/js/components/lijn-schil.js
   =================================================================== */

/* De twee lagen van de schil */
.schil-laag { position: absolute; left: 0; top: 0; width: 100%; height: 0; overflow: hidden; pointer-events: none; }
.schil-achter { z-index: 1; }
.schil-voor { z-index: 3; }
.schil-laag svg { position: absolute; left: 0; top: 0; max-width: none; }
.schil-laag path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Beelden: hoeken 12 px, zwevend, lime gloed erachter */
.foto { position: relative; z-index: 2; border-radius: 12px; background: var(--color-surface);
    box-shadow: 0 46px 90px -34px rgba(122, 234, 0, .42), 0 0 70px -12px var(--color-glow), 0 34px 60px -26px rgba(0, 0, 0, .95); }
.foto img, .foto video { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.foto::after { content: ''; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(242, 242, 238, .07); pointer-events: none; }
/* Het zweven: 8 pixels in 6 seconden, met de versnelling van ease-in-out, in stapjes van hooguit 0,2 pixel aan
   12 beeldjes per seconde. Vloeiend aan 60 beeldjes per seconde hield het zweven de compositor voortdurend bezig,
   ook als je niets deed: op een oud toestel driekwart van een processorkern. De keyframes volgen de ease-in-out-curve,
   steps() houdt elk stuk van een halve seconde op 6 stapjes (gemeten 25/9/26, zie workspace/logboek.md). */
@keyframes zweef { 0% { translate: 0 0; } 8.33% { translate: 0 -0.11px; } 16.67% { translate: 0 -0.45px; } 25% { translate: 0 -1.03px; } 33.33% { translate: 0 -1.85px; } 41.67% { translate: 0 -2.87px; } 50% { translate: 0 -4px; } 58.33% { translate: 0 -5.13px; } 66.67% { translate: 0 -6.15px; } 75% { translate: 0 -6.97px; } 83.33% { translate: 0 -7.55px; } 91.67% { translate: 0 -7.89px; } 100% { translate: 0 -8px; } }
.foto { animation: zweef 6s steps(6, jump-end) infinite alternate; }
.foto:nth-of-type(2n) { animation-duration: 7.5s; animation-delay: -2s; }
.foto:nth-of-type(3n) { animation-duration: 8.5s; animation-delay: -4s; }
.r34 { aspect-ratio: 3 / 4; }
.r43 { aspect-ratio: 4 / 3; }
.r45 { aspect-ratio: 4 / 5; }
.r-scherm { aspect-ratio: 739 / 984; }
.r-video { aspect-ratio: 480 / 848; }
.r-mathie { aspect-ratio: 464 / 832; }
.foto .tag { position: absolute; left: 12px; top: 12px; z-index: 2; padding: .42rem .62rem .38rem; border-radius: 4px; background: rgba(0, 0, 0, .8);
    font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .64rem; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text); }
.foto .tag.na { background: var(--color-accent); color: var(--color-on-accent); }

.sectie { padding-block: var(--spacing-section); }

/* Eerste scherm: kop gecentreerd, drie beelden eromheen, de schil als ring */
.hero { position: relative; height: clamp(740px, 56vw, 820px); }
.hero::before { content: ''; position: absolute; left: 50%; top: 56%; width: min(1240px, 94vw); height: 78%; translate: -50% -50%;
    background: radial-gradient(closest-side, rgba(122, 234, 0, .17), rgba(122, 234, 0, .06) 55%, transparent); pointer-events: none; }
.hero-podium { position: absolute; inset: 0; max-width: 1440px; margin: 0 auto; }
.hero .foto { position: absolute; }
.h-a { left: 3%; top: 15%; width: 18.5%; }
.h-b { right: 4.5%; top: 2%; width: 17%; }
.h-c { right: 4.5%; top: 63%; width: 23.5%; }
.hero-tekst { position: absolute; z-index: 4; left: 50%; top: 11%; translate: -50% 0; width: min(900px, 62%); text-align: center; }
.hero-tekst .label { margin-bottom: 1.3rem; }
.hero-tekst h1 .label { display: block; line-height: 1.3; }
@media (min-width: 1024px) { .hero-tekst h1 { font-size: min(var(--fs-display), 8.6vw); } }
.hero-tekst .lead { margin: 1.8rem auto 0; max-width: 33em; }
.hero-acties { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; align-items: center; margin-top: 2.3rem; }

/* Twee ingangen */
.ingangen { padding-block: var(--spacing-section-tight); }
.projecten { padding-top: var(--spacing-section-tight); }
.ingangen-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 7%; align-items: start; }
.ingang .foto { width: 86%; }
.ingang.bedrijf { display: flex; flex-direction: column; margin-top: 180px; }
.ingang.bedrijf .foto { order: 2; margin-left: auto; }
.ingang-tekst { max-width: 29rem; margin-top: 2.6rem; }
.ingang.bedrijf .ingang-tekst { order: 1; margin: 0 0 2.6rem auto; }
.ingang-tekst h2 { margin-bottom: 1.2rem; }
.ingang-tekst p { color: var(--color-text-subtle); margin-bottom: 1.6rem; }
.pijl-link { display: inline-flex; align-items: center; gap: .75rem; padding-bottom: .4rem; border-bottom: 2px solid var(--color-accent);
    font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.pijl-link svg { width: 20px; height: 12px; flex: none; transition: translate var(--transition); }
.pijl-link:hover svg { translate: 5px 0; }

/* Projecten: versprongen collage */
.sectie-kop { margin-bottom: 5.5rem; }
.sectie-kop .label { margin-bottom: 1rem; }
.project + .project { margin-top: 7.5rem; }
.project-tekst .label { margin-bottom: .9rem; }
.project-tekst h3 { font-size: clamp(2rem, 1.1vw + 1.35rem, 2.6rem); margin-bottom: 1.1rem; }
.project-tekst .citaat { font-size: 1.125rem; max-width: 24em; }

@media (min-width: 1024px) {
    .collage { position: relative; height: 0; padding-bottom: var(--hoogte); }
    .collage > * { position: absolute; top: var(--t, 0); left: var(--l, auto); right: var(--r, auto); width: var(--w); }
}

/* Mathie aan het werk */
.mathie-tekst h2 { margin: 1rem 0 2rem; }
.mathie-tekst p { max-width: 31em; }
.mathie-tekst .citaat { margin-top: 1.5rem; max-width: 31em; font-size: 1.0625rem; line-height: 1.6; }

/* Bewijsrij */
.bewijs { padding-block: var(--spacing-section-tight) var(--spacing-section); }
.bewijs-rij { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.bewijs-rij li { position: relative; padding: 2.4rem 1.8rem 2.2rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.6rem, 1vw + 1.1rem, 2.1rem); line-height: 1; text-transform: uppercase; }
.bewijs-rij li + li { border-left: 1px solid var(--color-border); }
.bewijs-rij li::before { content: ''; display: block; width: 28px; height: 3px; margin-bottom: 1.1rem; border-radius: 2px; background: var(--color-accent); }

/* Offerteband (includes/offerteband.php, onderaan elke pagina behalve /offerte/) */
.offerteband { padding-block: var(--spacing-cta) var(--spacing-section); }
.offerte-grid { display: grid; grid-template-columns: 1.05fr .95fr; column-gap: 6rem; align-items: center; }
.offerte-tekst h2 { margin-bottom: 1.4rem; }
.offerte-tekst .lead { margin-bottom: 2.4rem; }
.offerte-bel { margin-top: 1.8rem; color: var(--color-text-subtle); }
.offerte-bel .btn-tel { margin-left: .5rem; color: var(--color-text); }
.offerteband .form-noot { margin-top: 1rem; max-width: 34em; }
.offerte-foto { width: 84%; margin-left: auto; }

@media (min-width: 1024px) and (max-width: 1279px) {
    .hero { height: 800px; }
    .h-c { top: 67%; width: 24%; }
}

/* Kleiner dan desktop: de collages worden een versprongen stapel */
@media (max-width: 1023px) {
    .hero { height: auto; padding: 2.4rem 0 1rem; display: flex; flex-direction: column; text-align: center; }
    .hero::before { top: 44%; height: 50%; }
    .hero-tekst { display: contents; }
    .hero-tekst > * { position: relative; z-index: 4; margin-inline: 1.25rem; }
    .hero-tekst .label { order: 0; }
    .hero-tekst h1 { order: 1; }
    .hero-podium { order: 2; position: relative; inset: auto; width: 100%; height: 118vw; max-height: 620px; margin: 2.2rem 0 0; }
    .hero-tekst .lead { order: 3; margin: 1.8rem 1.25rem 0; }
    .hero-acties { order: 4; }
    .h-a { left: 5%; top: 0; width: 49%; }
    .h-b { right: 5%; top: 14%; width: 38%; }
    .h-c { left: 17%; top: 55%; width: 66%; }
    .ingangen-grid { grid-template-columns: 1fr; }
    .ingang .foto { width: 88%; }
    .ingang.bedrijf { margin-top: 5rem; }
    .ingang.bedrijf .ingang-tekst { margin: 0 0 2.2rem; }
    .collage { display: flex; flex-direction: column; }
    .collage > .project-tekst, .collage > .mathie-tekst { order: 0; margin-bottom: 2rem; }
    .collage > .na { order: 1; width: 100%; }
    .collage > .voor { order: 2; width: 58%; margin-top: -14%; align-self: flex-end; }
    .collage > .tijdens { display: none; }
    .project:nth-of-type(even) .collage > .voor { align-self: flex-start; }
    .collage > .m-video { order: 1; width: 66%; }
    .collage > .m-shirt { order: 2; width: 54%; margin-top: -40%; align-self: flex-end; }
    .sectie-kop { margin-bottom: 3.5rem; }
    .project + .project { margin-top: 5.5rem; }
    .bewijs-rij { grid-template-columns: 1fr 1fr; }
    .bewijs-rij li { padding: 1.8rem 1.1rem 1.6rem; }
    .bewijs-rij li:nth-child(3) { border-left: 0; }
    .bewijs-rij li:nth-child(n+3) { border-top: 1px solid var(--color-border); }
    .offerte-grid { grid-template-columns: 1fr; row-gap: 4rem; }
    .offerte-foto { width: 64%; margin: 0 auto 0 0; }
}
@media (max-width: 767px) {
    .hero-tekst .lead { margin-top: 1.5rem; }
    .hero-acties { margin-top: 1.8rem; gap: 1.1rem 1.6rem; }
    .hero-acties .btn { width: 100%; }
    .project-tekst h3 { font-size: 2rem; }
    .offerte-foto { width: 72%; }
}

.project h3 a { text-decoration: none; }
.project h3 a:hover { color: var(--color-accent); }

/* ===================================================================
   De markeerstift (D): de pagina's om te lezen en de offertepagina (21/9/26).
   Dezelfde kop, dezelfde beelden, dezelfde streek. De streek is die van de
   startpagina: dun en donkergroen als draad achter de inhoud, vol en lime als
   ellips ervoor. Het script: assets/js/components/lijn-stift.js
   =================================================================== */

/* De twee lagen van de streek, zoals de schil op de startpagina */
.stift-laag { position: absolute; left: 0; top: 0; width: 100%; height: 0; overflow: hidden; pointer-events: none; }
.stift-achter { z-index: 1; }
.stift-voor { z-index: 3; }
.stift-laag svg { position: absolute; left: 0; top: 0; max-width: none; }
.stift-laag path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* De kop, op de D-pagina's gelijk: kruimel, label, kop, tekst */
.kop-pagina { position: relative; padding-top: 2.75rem; }
.kruimel { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin-bottom: 3.25rem; font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .7rem; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-subtle); }
.kruimel a { text-decoration: none; }
.kruimel a:hover { color: var(--color-accent); }
.kruimel [aria-current] { color: var(--color-text); }
.kruimel .schuin { color: #5c5c56; }
.kop-pagina .label { margin-bottom: 1.5rem; }
.kop-pagina h1 { font-size: clamp(3.2rem, 6.4vw + .6rem, 7rem); }
.kop-pagina h1 .r1, .kop-pagina h1 .r2 { display: block; }
.markeer { display: inline-block; }

/* Beelden: enkel echte foto's, vlak, met de hoeken van de startpagina */
.beeld { position: relative; z-index: 2; margin: 0; }
.beeld img, .beeld video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: var(--color-surface); }
.beeld::after { content: ''; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(242, 242, 238, .07); pointer-events: none; }
.beeld--liggend img { aspect-ratio: 4 / 3; }
/* voor in zwart-wit, na in kleur: kleur betekent afgewerkt */
.beeld--voor img { filter: grayscale(1) contrast(1.05) brightness(.8); }

/* Label boven de buitenste hoek van een foto: daar komt de ellips nooit */
.beeld .tag { position: absolute; bottom: 100%; left: 0; padding-bottom: .7rem; font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .66rem; line-height: 1; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--color-text-subtle); }
.beeld .tag--rechts { left: auto; right: 0; }
.beeld--na .tag { color: var(--color-accent); }

/* Link met pijl, zoals op de startpagina */
.pijl-link:hover { color: var(--color-accent); }

/* Meetpunten voor de draad: lege goten tussen de kolommen */
.goot { pointer-events: none; }

@media (max-width: 767px) {
    .kop-pagina { padding-top: 1.75rem; }
    .kruimel { margin-bottom: 2.25rem; }
    .kop-pagina .label { margin-bottom: 1.1rem; }
    .goot { display: none; }
}

/* ---------- Offerte: de kop, het formulier en het nummer ---------- */
.offerte-rij { display: grid; grid-template-columns: 5fr 1fr 6fr; margin-top: 3.25rem; align-items: start; }
.offerte-links { grid-column: 1; }
.offerte-intro { margin-bottom: 2.25rem; color: var(--color-text-subtle); }
.offerte-links .offerte-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 470px; }
.offerte-links .offerte-form input { width: 100%; min-width: 0; }
.offerte-links .offerte-form .btn { grid-column: 1 / -1; }
.offerte-links .form-noot { margin-top: 1.25rem; max-width: 470px; }
.offerte-links .form-noot a { color: var(--color-text); }
.bel-blok { grid-column: 3; position: relative; }
.bel-label { font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-subtle); padding-top: .35rem; }
.tel-groot { display: inline-block; margin-top: 5.5rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(3.2rem, 5.2vw + .6rem, 6.2rem); line-height: 1; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; text-decoration: none; }   /* hoofdletters: enkel cijfers, maar zo meet de stift op de kapitaalhoogte */
.tel-groot:hover { color: var(--color-accent); }
.bel-gegevens { list-style: none; display: grid; gap: .45rem; margin-top: 5.5rem; color: var(--color-text-subtle); }
.bel-gegevens a { color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-border); }
.bel-gegevens a:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ---------- Mathie aan het werk ---------- */
.werk { padding-block: 8rem var(--spacing-section); }
.werk-rij { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; }
.werk-beeld { grid-column: 1 / 7; }
/* vierkant: het bestand zelf is rechts uitgesneden, zo staat het mailadres op de mouw van Mathie nergens meer in beeld */
.werk-beeld img { aspect-ratio: 1 / 1; object-position: 100% 50%; }

@media (max-width: 1023px) {
    .offerte-rij { grid-template-columns: 1fr; row-gap: 4.5rem; }
    .bel-blok { grid-column: 1; text-align: center; }   /* gecentreerd: zo blijft de ellips binnen het scherm */
    .bel-gegevens { justify-items: center; }
}
@media (max-width: 767px) {
    .offerte-rij { margin-top: 2.25rem; }
    .offerte-links .offerte-form { grid-template-columns: 1fr; }
    .tel-groot { margin-top: 3.75rem; font-size: 3rem; }
    .bel-gegevens { margin-top: 4.25rem; }
    .werk { padding-block: 5.5rem var(--spacing-section); }
    .werk-rij { display: block; }
}

/* ===================================================================
   De rustige pagina's zonder lijn: bedankt, privacybeleid, 404.
   De kop van de D-pagina's (kruimel, label, kop), daaronder leestekst.
   =================================================================== */
.rustig { padding-block: 3.5rem var(--spacing-section); }
.rustig-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.4rem; margin-top: 2.5rem; }
.kop-tekst .lead { margin-top: 1.8rem; }

.leestekst { max-width: 46rem; }
.leestekst h2 { font-size: clamp(1.9rem, 1.4vw + 1.3rem, 2.6rem); margin: 3.5rem 0 1.2rem; }
.leestekst h3 { font-size: clamp(1.4rem, .6vw + 1.1rem, 1.7rem); margin: 2.2rem 0 .8rem; }
.leestekst p, .leestekst ul { color: var(--color-text-subtle); }
.leestekst p + p, .leestekst p + ul, .leestekst ul + p { margin-top: var(--spacing-paragraph); }
.leestekst ul { padding-left: 1.2rem; display: grid; gap: .35rem; }
.leestekst li::marker { color: var(--color-accent); }
.leestekst strong { color: var(--color-text); font-weight: 600; }
.leestekst a { color: var(--color-text); text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
.leestekst a:hover { color: var(--color-accent); }
.leestekst-info { margin-bottom: 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-btn); color: var(--color-text-subtle); }
.leestekst-datum { font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: 1.5rem; }
.inhoud-lijst { list-style: none; display: grid; gap: .3rem; margin-bottom: 1rem; padding: 0; }
.inhoud-lijst a { text-decoration: none; }

/* ===================================================================
   404: "deze pagina is nog ruwbouw" (Danilo, 22/9/26)
   De markeerstift tekent de ellips rond 404 en loopt naar het enige beeld in kleur.
   Drie beelden in ruwbouw staan grauw en zonder gloed, het afgewerkte beeld in kleur
   met de lime gloed (brand.md: kleur betekent afgewerkt).
   =================================================================== */
.fout { padding-bottom: 1.5rem; }
.fout-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; align-items: center; margin-top: 1.5rem; }
/* Het getal en de beelden schalen mee met de hoogte van het scherm, zodat de 404 op één scherm past */
.fout-getal { margin: .8rem 0 1rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(4.5rem, min(12vw, 17vh), 12.5rem); line-height: .8; letter-spacing: .01em; }
.site-footer--kort { padding: 0 0 1.4rem; }
.site-footer--kort .footer-onder { padding-top: 1.4rem; border-top: 0; }
.fout-getal span { display: inline-block; position: relative; z-index: 4; }
.fout h1 { font-size: clamp(2.4rem, min(3.2vw + 1rem, 6.4vh), 4.8rem); }
.fout .lead { margin-top: 1.2rem; max-width: 30em; }
.fout .rustig-acties { margin-top: 1.8rem; gap: 1rem 2rem; }
.fout-beelden { position: relative; aspect-ratio: 1 / 1.04; width: min(100%, 55vh); margin-left: auto; }
.fout-beelden .foto { position: absolute; }
.fout-ruw { box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .95); }
.fout-ruw img { filter: grayscale(1) contrast(1.05) brightness(.78); }
.fout-a { left: 0; top: 6%; width: 36%; rotate: -3deg; }
.fout-b { left: 30%; top: 0; width: 31%; rotate: 2deg; }
.fout-c { left: 7%; top: 55%; width: 29%; rotate: 2.5deg; }
.fout-af { right: 1%; top: 28%; width: 47%; z-index: 3; text-decoration: none; }
.fout-af img { transition: scale var(--transition); }
.fout-af:hover img { scale: 1.02; }
@media (max-width: 1023px) {
    .fout-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .fout-beelden { width: 100%; max-width: 560px; margin-inline: auto; }
}

/* ===================================================================
   Bedankt (Danilo, 29/9/26): de markeerstift zoals op de 404.
   De ellips rond "Bedankt", een draad naar de tv-wand: voor grauw, na in kleur.
   =================================================================== */
.bedankt { padding-bottom: 1.5rem; }
.bedankt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; margin-top: 1.5rem; }
/* de ellips steekt zo'n halve letterhoogte boven en onder het woord uit: label en lead houden die lucht vrij */
.bedankt .label { margin-bottom: clamp(2.2rem, 5.5vh, 3.4rem); }
/* inspringen in em: de ellips steekt een vast deel van de woordbreedte links uit, bij elke lettergrootte */
.bedankt .bedankt-woord { width: fit-content; margin: 0 0 0 .75em; font-size: clamp(3.8rem, min(8.5vw, 12.5vh), 9rem); line-height: .85; }
.bedankt-woord span { display: inline-block; position: relative; z-index: 4; }
.bedankt .lead { margin-top: clamp(2.4rem, 6vh, 3.6rem); max-width: 30em; }
.bedankt-kopje { margin: 2.2rem 0 1rem; font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-subtle); }
.bedankt-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; max-width: 30em; }
.bedankt-stappen li { display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline; gap: .5rem; padding-bottom: .9rem; border-bottom: 1px solid var(--color-border); color: var(--color-text-subtle); }
.bedankt-stappen strong { color: var(--color-text); font-weight: 600; }
.bedankt-nr { font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--color-accent); }
.bedankt .rustig-acties { margin-top: 1.8rem; gap: 1rem 2rem; }
.bedankt-beelden { position: relative; aspect-ratio: 1 / .92; width: min(100%, 62vh); margin-left: auto; }
.bedankt-beelden .foto { position: absolute; }
.bedankt-voor { left: 0; top: 4%; width: 64%; rotate: -3deg; box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .95); }
.bedankt-voor img { filter: grayscale(1) contrast(1.05) brightness(.78); }
.bedankt-na { right: 2%; bottom: 6%; width: 74%; z-index: 3; rotate: 1.5deg; text-decoration: none; }
.bedankt-na .tag { left: 50%; translate: -50% 0; }   /* de ellips snijdt over de hoeken, bovenaan in het midden blijft vrij */
.bedankt-na img { transition: scale var(--transition); }
.bedankt-na:hover img { scale: 1.02; }
@media (max-width: 1023px) {
    .bedankt-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .bedankt-beelden { width: 100%; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 599px) {
    .bedankt .bedankt-woord { font-size: 3.3rem; }
    .bedankt .label { margin-bottom: 2.8rem; }
    .bedankt .lead { margin-top: 2.9rem; }
}

/* Startpagina: onder elk project een link naar de dienst, met de zoekterm (22/9/26) */
.project-tekst .project-dienst { margin-top: 1.3rem; font-size: .8rem; }
/* Offertepagina: de vragen onder het werkbeeld */
.vragen .leestekst h2 { margin-top: 0; }
@media (max-width: 767px) { .site-footer--kort { padding-bottom: 7rem; } }