/* Santpoort, huisstijl 2026. Eén letter (Archivo), twee kleuren uit de S: rood en blauw. */
:root {
  --rood: #D3282F;
  --rood-donker: #B21F26;
  --blauw: #1B2B6B;
  --blauw-vlak: #142057;
  --blauw-diep: #101A45;
  --nacht: #0A0F26;
  --inkt: #121417;
  --papier: #F3F1EC;
  --lijn: #DEDAD2;
  --grijs: #5B606B;
  --zacht: #8A8F98;
  --wit: #FFFFFF;
  --letter: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --rand: 40px;
  --max: 1320px;
  --kop-h: 84px;
  --vloei: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kop-h) - 1px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--letter); font-size: 18px; line-height: 1.6; color: var(--inkt); background: var(--wit); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; font-stretch: 110%; letter-spacing: -0.03em; line-height: 1; text-wrap: balance; }
h1 i, h2 i { font-style: normal; color: var(--rood); }
h2 { font-size: clamp(38px, 5vw, 72px); }
h3 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.02em; line-height: 1.12; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.ic { width: 20px; height: 20px; flex: none; }
.s-boven { fill: var(--s1, #D3282F); }
.s-onder { fill: var(--s2, #1B2B6B); }
:focus-visible { outline: 2px solid var(--rood); outline-offset: 3px; }

/* Verschijnen bij scrollen */
.js .r { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--vloei), transform .9s var(--vloei); }
.js .r.in { opacity: 1; transform: none; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 26px; border: 0; border-radius: 2px; font: inherit; font-size: 16px; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.knop .ic { transition: transform .2s; }
.knop:hover .ic { transform: translateX(4px); }
.knop-rood { background: var(--rood); color: var(--wit); }
.knop-rood:hover { background: var(--rood-donker); }
.knop-glas { background: transparent; color: var(--wit); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.knop-glas:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px var(--wit); }

/* Kop: doorzichtig boven de opening, daarna wit */
.kop { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--lijn); transition: background-color .35s, border-color .35s, color .35s; }
.kop-binnen { display: flex; align-items: center; gap: 32px; height: var(--kop-h); }
.merk { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--inkt); flex: none; }
.merk-s { width: 36px; height: 36px; flex: none; }
.merk-woord { font-weight: 760; font-stretch: 116%; font-size: 27px; letter-spacing: -0.03em; line-height: 1; padding-bottom: 3px; }
.menu { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.menu a { position: relative; font-size: 15px; font-weight: 560; text-decoration: none; white-space: nowrap; padding: 8px 0; }
.menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rood); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--vloei); }
.menu a:hover::after, .menu a.actief::after { transform: scaleX(1); }
.taal { display: flex; flex: none; border: 1px solid var(--lijn); border-radius: 999px; padding: 3px; transition: border-color .35s; }
.taal button { min-width: 38px; height: 30px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 13px; font-weight: 650; color: var(--grijs); cursor: pointer; }
.taal button[aria-pressed="true"] { background: var(--inkt); color: var(--wit); }
.kop-bel { min-height: 46px; padding: 0 20px; font-size: 15px; flex: none; }
.menu-knop { display: none; position: relative; width: 46px; height: 46px; border: 1px solid var(--lijn); border-radius: 2px; background: transparent; cursor: pointer; flex: none; }
.menu-knop span:not(.vh) { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--inkt); transition: transform .2s, top .2s, background-color .35s; }
.menu-knop span:nth-child(1) { top: 17px; }
.menu-knop span:nth-child(2) { top: 26px; }
.menu-knop[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-knop[aria-expanded="true"] span:nth-child(2) { top: 22px; transform: rotate(-45deg); }
.kop.op-held { background: transparent; border-bottom-color: rgba(255, 255, 255, 0); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--wit); }
.kop.op-held .merk { color: var(--wit); --s2: var(--wit); }
.kop.op-held .taal { border-color: rgba(255, 255, 255, .3); }
.kop.op-held .taal button { color: rgba(255, 255, 255, .75); }
.kop.op-held .taal button[aria-pressed="true"] { background: var(--wit); color: var(--inkt); }
.kop.op-held .menu-knop { border-color: rgba(255, 255, 255, .35); }
.kop.op-held .menu-knop span:not(.vh) { background: var(--wit); }

/* Opening */
.held { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-top: calc(var(--kop-h) + 9vh); background: var(--nacht); color: var(--wit); overflow: hidden; }
.held::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 85% 10%, rgba(27, 43, 107, .55), transparent 70%); pointer-events: none; }
.held-tekst { position: relative; }
.kicker { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--grijs); margin-bottom: 32px; }
.kicker::before { content: ''; width: 40px; height: 3px; background: var(--rood); flex: none; }
.held .kicker { color: rgba(255, 255, 255, .7); }
.held h1 { font-size: clamp(38px, 8.2vw, 136px); font-weight: 820; font-stretch: 108%; letter-spacing: -0.045em; line-height: .92; margin-bottom: 48px; }
.held-onder { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px 64px; flex-wrap: wrap; padding-bottom: 64px; }
.held-lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: rgba(255, 255, 255, .8); max-width: 600px; margin: 0; }
.held-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.strook { position: relative; margin-top: auto; height: clamp(150px, 24vh, 270px); overflow: hidden; }
.strook-rij { display: flex; gap: 10px; height: 100%; width: max-content; animation: loop 150s linear infinite; }
.strook-rij img { height: 100%; width: auto; max-width: none; }
.strook:hover .strook-rij { animation-play-state: paused; }
@keyframes loop { to { transform: translateX(-50%); } }

/* Intro */
.intro { padding: 150px 0 140px; }
.intro-zin { font-size: clamp(27px, 3.3vw, 50px); font-weight: 560; font-stretch: 100%; line-height: 1.2; letter-spacing: -0.022em; max-width: 1180px; margin: 0; text-wrap: pretty; }
.intro-zin em { font-style: normal; color: var(--blauw); font-weight: 700; }
.cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin-top: 110px; }
.cijfer { display: grid; align-content: start; gap: 12px; padding-top: 26px; border-top: 1px solid var(--inkt); }
.cijfer strong { font-size: clamp(40px, 4.7vw, 72px); font-weight: 800; font-stretch: 110%; letter-spacing: -0.045em; line-height: .95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cijfer span { font-size: 16px; color: var(--grijs); line-height: 1.4; }

/* Twee deuren, van rand tot rand */
.deuren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.deur { position: relative; display: block; aspect-ratio: 1.8 / 1; overflow: hidden; color: var(--wit); text-decoration: none; background: var(--inkt); }
.deur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--vloei); }
.deur::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 20, 23, .94) 0%, rgba(18, 20, 23, .72) 42%, rgba(18, 20, 23, .2) 78%, rgba(18, 20, 23, .05) 100%); }
.deur-blauw::after { background: linear-gradient(to top, rgba(16, 26, 69, .96) 0%, rgba(16, 26, 69, .76) 42%, rgba(16, 26, 69, .22) 78%, rgba(16, 26, 69, .06) 100%); }
.deur:hover img { transform: scale(1.05); }
.deur-tekst { position: absolute; z-index: 1; left: 56px; right: 140px; bottom: 52px; display: grid; gap: 14px; }
.deur-naam { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.deur-naam::before { content: ''; width: 28px; height: 3px; background: var(--rood); }
.deur-blauw .deur-naam::before { background: var(--wit); }
.deur-titel { font-size: clamp(38px, 4.4vw, 68px); font-weight: 820; font-stretch: 110%; letter-spacing: -0.04em; line-height: .92; }
.deur-regel { font-size: 17px; color: rgba(255, 255, 255, .8); max-width: 420px; }
.deur-pijl { position: absolute; z-index: 1; right: 56px; bottom: 52px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); transition: background-color .3s, box-shadow .3s, color .3s; }
.deur-pijl .ic { width: 24px; height: 24px; }
.deur:hover .deur-pijl { background: var(--rood); box-shadow: none; }
.deur-blauw:hover .deur-pijl { background: var(--wit); color: var(--blauw); }

/* Blokken */
.blok { padding: 150px 0; }
#historie { background: var(--papier); }
.blok-papier { background: var(--papier); }
.label { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grijs); margin-bottom: 28px; }
.label::before { content: ''; width: 32px; height: 3px; background: var(--inkt); flex: none; }
.label-rood { color: var(--rood); }
.label-rood::before { background: var(--rood); }
.label-licht { color: rgba(255, 255, 255, .75); }
.label-licht::before { background: var(--rood); }
.twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 96px; align-items: end; }
.lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.6; color: #2B2F36; margin: 0; }
h2.groot { font-size: clamp(42px, 6.6vw, 108px); line-height: .94; letter-spacing: -0.045em; margin-bottom: 64px; }
.twee-tekst { align-items: start; }

/* Tijdlijn */
.tijdlijn { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 110px; }
.tijdlijn li { position: relative; padding: 36px 28px 0 0; border-top: 2px solid var(--lijn); }
.tijdlijn li::before { content: ''; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--papier); border: 3px solid currentColor; }
.tijdlijn strong { display: block; font-size: clamp(34px, 3.2vw, 48px); font-weight: 800; font-stretch: 110%; letter-spacing: -0.04em; line-height: 1; margin-bottom: 16px; }
.tijdlijn p { font-size: 15px; line-height: 1.55; color: var(--grijs); margin: 0; }
.t-rood { color: var(--rood); }
.t-blauw { color: var(--blauw); }

/* Technische Handel */
.bel-blok { display: grid; justify-items: end; gap: 6px; }
.bel-groot { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(28px, 2.8vw, 42px); font-weight: 800; font-stretch: 108%; letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; }
.bel-groot .ic { width: 30px; height: 30px; color: var(--rood); }
.bel-groot:hover { color: var(--rood); }
.mail-klein { font-size: 17px; color: var(--grijs); text-decoration: none; }
.mail-klein:hover { color: var(--inkt); }
.breed-foto { width: 100%; aspect-ratio: 2124 / 500; object-fit: cover; margin-top: 88px; }
.lijst-kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 96px; align-items: baseline; margin: 130px 0 0; padding: 28px 0 32px; border-top: 2px solid var(--inkt); }
.lijst-kop h3 { font-size: clamp(30px, 3vw, 44px); letter-spacing: -0.03em; }
.lijst-kop p { margin: 0; color: var(--grijs); font-size: 18px; }
.lijst-kop-licht { border-top-color: var(--wit); }
.lijst-kop-licht p { color: rgba(255, 255, 255, .72); }
.groepen { border-top: 1px solid var(--lijn); }
.groep { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px 32px; align-items: baseline; padding: 26px 0 28px; border-bottom: 1px solid var(--lijn); }
.groep-nr { font-size: 14px; font-weight: 700; color: var(--zacht); font-variant-numeric: tabular-nums; letter-spacing: .04em; transition: color .25s; }
.groep h4 { font-size: clamp(22px, 2vw, 30px); font-weight: 760; letter-spacing: -0.025em; line-height: 1.1; transition: color .25s; }
.groep p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--grijs); }
.groep:hover h4, .groep:hover .groep-nr { color: var(--rood); }

.merken { margin-top: 130px; }
.merken .label { margin-bottom: 36px; }
.merken-band { overflow: hidden; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.merken-rij { display: flex; align-items: center; gap: 96px; width: max-content; height: 128px; padding-right: 96px; animation: loop 45s linear infinite; }
.merken-rij img { height: 52px; width: auto; max-width: none; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.2); opacity: .75; }
.merken-band:hover .merken-rij { animation-play-state: paused; }

.klanten-zin { margin: 130px 0 0; max-width: 1200px; font-size: clamp(24px, 2.7vw, 40px); font-weight: 500; font-stretch: 100%; line-height: 1.32; letter-spacing: -0.02em; color: var(--zacht); text-wrap: pretty; }
.klanten-zin b { color: var(--inkt); font-weight: 700; }
.brug { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 96px; padding: 36px 0; border-top: 1px solid var(--inkt); border-bottom: 1px solid var(--inkt); text-decoration: none; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
.brug b { color: var(--blauw); }
.brug .ic { width: 64px; height: 64px; padding: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--inkt); transition: background-color .3s, color .3s, box-shadow .3s; }
.brug:hover .ic { background: var(--blauw); color: var(--wit); box-shadow: none; }

/* Project Supplies */
.blok-blauw { background: var(--blauw-vlak); color: var(--wit); }
.blok-blauw .lead { color: rgba(255, 255, 255, .78); }
.bewijzen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin-top: 110px; }
.bewijzen li { display: grid; align-content: start; gap: 14px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .35); }
.bewijzen strong { font-size: clamp(34px, 3.6vw, 56px); font-weight: 800; font-stretch: 110%; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.bewijzen span { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.ps-foto { margin: 110px 0 0; }
.ps-foto img { width: 100%; aspect-ratio: 2124 / 500; object-fit: cover; }
.ps-foto figcaption { margin-top: 16px; font-size: 15px; color: rgba(255, 255, 255, .62); }

.scope { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.scope-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.scope-knop { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 58px; padding: 12px 2px; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .7); font: inherit; font-size: 18px; font-weight: 560; text-align: left; line-height: 1.25; cursor: pointer; transition: color .2s; }
.scope-knop:hover { color: var(--wit); }
.scope-nr { width: 24px; flex: none; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .4); font-variant-numeric: tabular-nums; }
.scope-naam { flex: 1; }
.scope-knop .ic { opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; color: var(--rood); }
.scope-knop[aria-pressed="true"] { color: var(--wit); font-weight: 700; }
.scope-knop[aria-pressed="true"] .scope-nr { color: var(--rood); }
.scope-knop[aria-pressed="true"] .ic { opacity: 1; transform: none; }
.scope-paneel { position: sticky; top: calc(var(--kop-h) + 32px); padding: 44px 48px 48px; background: var(--wit); color: var(--inkt); }
.scope-paneel h4 { font-size: clamp(30px, 3vw, 44px); letter-spacing: -0.035em; margin-bottom: 28px; }
.scope-paneel ul { columns: 2; column-gap: 36px; }
.scope-paneel li { break-inside: avoid; padding: 11px 0; border-bottom: 1px solid var(--lijn); font-size: 16px; line-height: 1.4; }
.scope-noot { margin: 28px 0 0; font-size: 15px; color: var(--grijs); }
.kolommen { margin-top: 130px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .35); align-items: start; }
.kolommen h3 { margin-bottom: 18px; }
.kolommen p { font-size: 17px; color: rgba(255, 255, 255, .75); margin: 0; }

/* Projecten met kaart */
.blok-wereld { background: var(--nacht); color: var(--wit); }
.blok-wereld .lead { color: rgba(255, 255, 255, .7); }
.wereld { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.wereld h2 { margin-bottom: 24px; }
.projecten { margin-top: 48px; border-top: 1px solid rgba(255, 255, 255, .18); }
.project { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.project-knop { display: grid; gap: 8px; width: 100%; padding: 24px 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.project-plek { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); transition: color .3s; }
.project-plek::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.project-titel { font-size: clamp(22px, 2vw, 28px); font-weight: 750; font-stretch: 108%; letter-spacing: -0.025em; line-height: 1.15; color: rgba(255, 255, 255, .55); transition: color .3s; }
.project-knop:hover .project-titel { color: var(--wit); }
.project.open .project-plek { color: var(--rood); }
.project.open .project-titel { color: var(--wit); }
.project-inhoud { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--vloei); }
.project-inhoud > div { min-height: 0; overflow: hidden; }
.project.open .project-inhoud { grid-template-rows: 1fr; }
.project-inhoud img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 20px; }
.project-inhoud p { margin: 0 0 28px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.wereld-kaart { position: sticky; top: calc(var(--kop-h) + 24px); }
.kaart svg { display: block; width: 100%; height: auto; overflow: visible; }
.k-stip { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 4.4; stroke-linecap: round; }
.k-lijn { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.6; stroke-linecap: round; transition: stroke .4s, stroke-width .4s; }
.k-lijn.actief { stroke: var(--rood); stroke-width: 3.2; stroke-dasharray: 10 10; animation: stroom 1.2s linear infinite; }
@keyframes stroom { to { stroke-dashoffset: -20; } }
.k-doel { fill: rgba(255, 255, 255, .55); transition: fill .3s; }
.k-doel-groep { cursor: pointer; }
.k-doel-groep.actief .k-doel { fill: var(--rood); }
.k-golf-doel { fill: none; stroke: var(--rood); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.k-doel-groep.actief .k-golf-doel { animation: golf 2s ease-out infinite; }
.k-thuis { fill: var(--wit); }
.k-golf { fill: none; stroke: var(--wit); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: golf 2.6s ease-out infinite; }
.k-tekst { font-family: var(--letter); font-size: 20px; font-weight: 600; fill: rgba(255, 255, 255, .55); paint-order: stroke; stroke: var(--nacht); stroke-width: 7px; stroke-linejoin: round; transition: fill .3s; }
.k-doel-groep.actief .k-tekst { fill: var(--wit); font-weight: 750; }
.k-tekst-thuis { font-weight: 800; font-size: 24px; fill: var(--wit); }
@keyframes golf { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: start; }
.contact h2 { margin-bottom: 44px; }
.adres { font-style: normal; font-size: clamp(26px, 2.4vw, 34px); font-weight: 750; font-stretch: 108%; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 16px; }
.route { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--rood); text-decoration: none; }
.route .ic { transition: transform .2s; }
.route:hover .ic { transform: translateX(4px); }
.contact-bedrijven { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
.cb { display: grid; align-content: start; gap: 6px; padding-top: 22px; border-top: 3px solid var(--rood); }
.cb-blauw { border-top-color: var(--blauw); }
.cb-naam { font-weight: 750; margin: 0; line-height: 1.3; }
.cb-sub { font-size: 15px; color: var(--grijs); margin: 0 0 14px; }
.cb a { text-decoration: none; overflow-wrap: anywhere; }
.cb .cb-tel { font-size: clamp(22px, 1.9vw, 27px); font-weight: 750; font-stretch: 106%; letter-spacing: -0.02em; white-space: nowrap; }
.cb a:hover { color: var(--rood); }
.cb-blauw a:hover { color: var(--blauw); }

.formulier { position: relative; background: var(--papier); padding: 48px; }
.formulier h3 { margin-bottom: 28px; }
.keuze { display: flex; gap: 8px; border: 0; padding: 0; margin: 0 0 22px; }
.keuze legend { font-size: 14px; font-weight: 650; margin-bottom: 8px; padding: 0; }
.keuze label { flex: 1; position: relative; cursor: pointer; }
.keuze input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.keuze span { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 8px 14px; border: 1.5px solid var(--lijn); background: var(--wit); font-weight: 650; font-size: 15px; text-align: center; line-height: 1.25; transition: border-color .2s, background-color .2s, color .2s; }
.keuze input:checked + span { border-color: var(--inkt); background: var(--inkt); color: var(--wit); }
.keuze input:focus-visible + span { outline: 2px solid var(--rood); outline-offset: 2px; }
.velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.veld { display: grid; gap: 6px; font-size: 14px; font-weight: 650; }
.veld-breed { grid-column: 1 / -1; }
.veld input, .veld textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--lijn); border-radius: 0; background: var(--wit); font: inherit; font-size: 16px; font-weight: 400; color: var(--inkt); outline: none; transition: border-color .2s; }
.veld textarea { resize: vertical; min-height: 120px; }
.veld input:focus, .veld textarea:focus { border-color: var(--inkt); }
.veld .fout { border-color: var(--rood); }
.form-fout { color: var(--rood); font-weight: 600; font-size: 15px; }
.form-dank { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 48px; background: var(--papier); }
.form-dank[hidden] { display: none; }
.dank-s { width: 56px; height: 56px; margin-bottom: 28px; }
.form-dank h3 { font-size: clamp(32px, 3.4vw, 48px); margin-bottom: 14px; }
.form-dank p { color: var(--grijs); font-size: 18px; max-width: 420px; }
.pand-band { width: 100%; aspect-ratio: 2124 / 500; object-fit: cover; margin-top: 150px; }
#contact { padding-bottom: 0; }

/* Voet */
.voet { background: var(--inkt); color: rgba(255, 255, 255, .72); font-size: 15px; padding: 80px 0 0; }
.voet-rij { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, .8fr); gap: 40px; padding-bottom: 64px; }
.voet a { text-decoration: none; }
.voet a:hover { color: var(--wit); }
.merk-licht { color: var(--wit); margin-bottom: 18px; --s2: var(--wit); }
.voet-merk p { max-width: 280px; }
.voet-kop { color: var(--wit); font-weight: 700; margin-bottom: 10px; }
.voet-menu { display: grid; align-content: start; gap: 8px; }
.voet-onder { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px 0 28px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; color: rgba(255, 255, 255, .5); }

/* Tussenmaten */
@media (max-width: 1280px) {
  .menu { gap: 22px; }
  .kop-bel span { display: none; }
  .kop-bel { padding: 0 14px; }
  .tijdlijn { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 56px; }
  .deur-tekst { left: 40px; bottom: 40px; right: 120px; }
  .deur-pijl { right: 40px; bottom: 40px; }
}
@media (max-width: 1100px) {
  .cijfers, .bewijzen { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .voet-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scope { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .scope-paneel { position: static; }
  .wereld { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .wereld-kaart { position: static; order: -1; }
  .deuren { grid-template-columns: minmax(0, 1fr); }
  .deur { aspect-ratio: 2 / 1; }
}
@media (max-width: 1023px) {
  :root { --kop-h: 72px; }
  .menu-knop { display: block; }
  .menu { position: fixed; top: var(--kop-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px var(--rand) 24px; background: var(--wit); color: var(--inkt); border-bottom: 1px solid var(--lijn); box-shadow: 0 18px 30px rgba(18, 20, 23, .1); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; }
  .menu.open { opacity: 1; transform: none; visibility: visible; }
  .menu a { padding: 15px 0; font-size: 19px; border-bottom: 1px solid var(--lijn); }
  .menu a::after { display: none; }
  .taal { margin-left: auto; }
  .blok { padding: 110px 0; }
  .intro { padding: 110px 0 100px; }
  .twee, .lijst-kop, .contact, .kolommen { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bel-blok { justify-items: start; }
  .groep { grid-template-columns: 48px minmax(0, 1fr); }
  .groep p { grid-column: 2; }
  .contact { gap: 64px; }
}
@media (max-width: 760px) {
  :root { --rand: 20px; }
  body { font-size: 17px; }
  .blok { padding: 88px 0; }
  .intro { padding: 88px 0 80px; }
  .merk-woord { font-size: 23px; }
  .merk-s { width: 30px; height: 30px; }
  .kop-binnen { gap: 10px; }
  .held { padding-top: calc(var(--kop-h) + 48px); min-height: 0; }
  .held h1 { margin-bottom: 32px; }
  .held-onder { padding-bottom: 48px; }
  .held-knoppen { width: 100%; }
  .held-knoppen .knop { flex: 1 1 auto; }
  .strook { height: 150px; }
  .cijfers { margin-top: 72px; gap: 40px 20px; }
  .cijfer span { font-size: 15px; }
  .deur { aspect-ratio: 4 / 3; }
  .deur-tekst { left: 22px; right: 22px; bottom: 28px; gap: 10px; }
  .deur-pijl { display: none; }
  .tijdlijn { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 72px; border-left: 2px solid var(--lijn); margin-left: 6px; }
  .tijdlijn li { border-top: 0; padding: 0 0 36px 30px; }
  .tijdlijn li::before { top: 6px; left: -8px; }
  h2.groot { margin-bottom: 40px; }
  .breed-foto, .ps-foto img, .pand-band { aspect-ratio: 16 / 9; }
  .breed-foto { margin-top: 56px; }
  .lijst-kop { margin-top: 88px; }
  .groep { grid-template-columns: 36px minmax(0, 1fr); gap: 6px 12px; padding: 20px 0 22px; }
  .merken { margin-top: 88px; }
  .merken-rij { height: 96px; gap: 56px; padding-right: 56px; }
  .merken-rij img { height: 40px; }
  .klanten-zin { margin-top: 88px; }
  .brug { gap: 20px; }
  .brug .ic { width: 52px; height: 52px; padding: 15px; }
  .bewijzen { grid-template-columns: minmax(0, 1fr); margin-top: 72px; row-gap: 36px; }
  .ps-foto { margin-top: 72px; }
  .scope-lijst { grid-template-columns: minmax(0, 1fr); }
  .scope-paneel { padding: 28px 22px 30px; }
  .scope-paneel ul { columns: 1; }
  .kolommen { margin-top: 88px; }
  .contact-bedrijven { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .formulier { padding: 30px 20px; }
  .form-dank { padding: 30px 20px; }
  .velden { grid-template-columns: minmax(0, 1fr); }
  .keuze { flex-direction: column; }
  .pand-band { margin-top: 88px; }
  .voet-rij { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .k-tekst { font-size: 28px; stroke-width: 9px; }
  .k-tekst-thuis { font-size: 30px; }
}
@media (max-width: 400px) {
  .kop-bel { display: none; }
  .taal button { min-width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .r { opacity: 1; transform: none; }
}