/* ═══════════════════════════════════════════════════════════
   Verbrugge Koeltechniek, homepage v2
   Register: brand · Strategie: committed
   Type: Cabinet Grotesk (display + tekst) · Roboto Mono (huisstijl, data)
   Motion: GSAP + ScrollTrigger, zie site.js
   ═══════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* merk */
  --brand:      oklch(44.1% 0.1383 253.6);   /* #00529c */
  --brand-mid:  oklch(62.1% 0.1238 241.9);   /* #338eca  alleen grote tekst / accent */
  --ice:        oklch(89.1% 0.0616 236.6);   /* #b5e2ff */
  --deep:       oklch(36.1% 0.0656 247.4);   /* #1e405e */
  --white:      oklch(99% 0.005 247);

  /* afgeleid, getint naar de merkhue */
  --deep-2:     oklch(40.5% 0.07 248);
  --deep-3:     oklch(31% 0.058 248);
  --ice-soft:   oklch(95.8% 0.024 236.6);
  --paper:      oklch(98.8% 0.004 247);
  --paper-2:    oklch(96.4% 0.009 243);
  --ink:        oklch(22% 0.028 250);
  --muted:      oklch(45% 0.022 250);
  --line:       oklch(88% 0.014 245);
  --line-soft:  oklch(93% 0.01 245);
  --op-donker:  color-mix(in oklab, var(--white) 76%, transparent);
  --lijn-donker: color-mix(in oklab, var(--white) 18%, transparent);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* type */
  --sans: "Cabinet Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --t-s:  clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --t-0:  clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --t-1:  clamp(1.25rem, 1.14rem + 0.45vw, 1.5625rem);
  --t-2:  clamp(1.55rem, 1.3rem + 1vw, 2.25rem);
  --t-3:  clamp(1.95rem, 1.45rem + 1.9vw, 3.1rem);
  --t-h2: clamp(2.2rem, 1.2rem + 3.1vw, 4.4rem);
  --t-h1: clamp(2.1rem, 0.9rem + 3.7vw, 5rem);

  --max: 1320px;
  --pad: clamp(1.25rem, 4.5vw, 4rem);
  --sectie: clamp(6rem, 12vw, 12rem);
  --kop-h: 112px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* geen scroll-behavior: smooth hier: dat breekt de metingen van ScrollTrigger. Zie site.js */

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-0)/1.6 var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.pagina { overflow-x: clip; width: 100%; max-width: 100%; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
sub { font-size: 0.62em; line-height: 0; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }
.donker :focus-visible, .projecten :focus-visible, .storing :focus-visible,
.werk :focus-visible, .voet :focus-visible, .strook :focus-visible { outline-color: var(--ice); }

:target, main section[id] { scroll-margin-top: calc(var(--kop-h) + 1rem); }
section[tabindex="-1"]:focus { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 0.75rem; top: 0.75rem; z-index: 300;
  transform: translateY(-160%);
  background: var(--brand); color: var(--white);
  padding: 0.8rem 1.2rem; font-weight: 700; text-decoration: none; border-radius: 3px;
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

/* ── knoppen en leeslinks ─────────────────────────────── */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 54px; padding: 0.9rem 1.65rem;
  border: 0; border-radius: 3px;
  font: 700 var(--t-0)/1 var(--sans); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: background-color .4s var(--ease), color .4s var(--ease), transform .5s var(--ease);
}
.knop:hover { transform: translateY(-2px); }
.knop--vol  { background: var(--brand); color: var(--white); }
.knop--vol:hover { background: var(--deep); }
/* geen randen om knoppen, pills en tags (29 sept 2026): de tweede knop is een zacht ijsblauw vlak */
.knop--lijn { color: var(--brand); background: var(--ice-soft); }
.knop--lijn:hover { background: var(--ice); }
.knop--wit  { background: var(--white); color: var(--deep); }
.knop--wit:hover { background: var(--ice); }

.lees {
  /* geen streepje achter de link (29 sept 2026); onderstreping die bij aanwijzen dikker wordt */
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; color: var(--brand);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
  transition: text-decoration-thickness .3s var(--ease), text-underline-offset .3s var(--ease);
}
.lees:hover { text-decoration-thickness: 2px; text-underline-offset: 0.36em; }
.lees--licht { color: var(--ice); }

/* ═══ KOP (variant A: gesplitst, logo in het midden) ═══ */

.kop { position: sticky; top: 0; z-index: 100; }

/* ── gedeeld ── */
.logo { display: block; flex: none; }
.logo img { height: 42px; width: auto; transition: height .45s var(--ease); }
.kop.is-klein .logo img { height: 34px; }

.menu { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.25rem); }
.menu > a, .dd__knop {
  position: relative;
  font: 600 0.9875rem/1 var(--sans); letter-spacing: -0.005em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  padding: 0.75rem 0; background: none; border: 0; cursor: pointer;
}
.menu > a:not(.menu__cta)::after, .dd__knop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.35rem; height: 2px;
  background: var(--brand-mid); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.menu > a:hover::after, .dd__knop:hover::after, .dd.is-open .dd__knop::after { transform: scaleX(1); }
/* .menu > .menu__cta weegt zwaarder dan .menu > a, anders wordt de knop onzichtbaar */
.menu > .menu__cta {
  background: var(--brand); color: var(--white);
  padding: 0.8rem 1.25rem; border-radius: 3px;
  transition: background-color .35s var(--ease);
}
.menu > .menu__cta:hover { background: var(--deep); }

.dd { position: relative; }
.dd__knop { display: inline-flex; align-items: center; gap: 0.45rem; }
.dd__pijl {
  width: 0.45rem; height: 0.45rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform .35s var(--ease);
}
.dd.is-open .dd__pijl { transform: translateY(0.1rem) rotate(-135deg); }
.dd__paneel {
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s linear .3s;
}
.dd.is-open .dd__paneel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd__lijst {
  position: absolute; top: calc(100% + 0.5rem); left: -1.25rem;
  width: 23rem; padding: 0.5rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 24px 60px -24px color-mix(in oklab, var(--deep) 45%, transparent);
}
.dd__lijst a {
  display: grid; gap: 0.15rem; padding: 0.8rem 0.9rem; border-radius: 4px;
  text-decoration: none; color: var(--ink);
  transition: background-color .25s var(--ease);
}
.dd__lijst a:hover, .dd__lijst a:focus-visible { background: var(--ice-soft); }
.dd__lijst span { font-weight: 700; letter-spacing: -0.01em; }
.dd__lijst small { font-size: 0.875rem; color: var(--muted); }

.burger {
  display: none; flex: none;
  width: 48px; height: 48px; padding: 0;
  background: var(--ice-soft); border: 0; border-radius: 3px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform .4s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

.paneel {
  position: fixed; left: 0; right: 0; top: var(--kop-h); bottom: 0; pointer-events: auto;
  background: var(--paper); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .4s var(--ease), visibility 0s linear .35s;
}
.paneel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.paneel__in { display: grid; padding-block: 1rem 3rem; }
.paneel__in a {
  display: flex; align-items: center; min-height: 56px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink); text-decoration: none; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em;
}
.paneel__groep {
  margin-top: 1.25rem; padding-bottom: 0.25rem;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.paneel__in a.paneel__sub { font-size: 1.05rem; font-weight: 500; padding-left: 1rem; min-height: 48px; }
.paneel__in a.paneel__tel { margin-top: 1.5rem; color: var(--brand); border-bottom: 0; }
.paneel__in a.paneel__portaal { font-size: 1rem; font-weight: 500; color: var(--muted); border-bottom: 0; min-height: 44px; }

/* ── A · Gesplitst ── */
.strook { background: var(--deep); color: var(--ice); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; }
.strook__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 36px; }
.strook a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.strook__tel { gap: 0.75rem; }
.strook__lbl { color: var(--op-donker); }
.strook__nr { color: var(--white); font-weight: 500; }
.strook__tel:hover .strook__nr, .strook__portaal:hover { text-decoration: underline; text-underline-offset: 3px; }
.strook__portaal::after { content: "\2197"; margin-left: 0.35em; }

.balk {
  background: color-mix(in oklab, var(--paper) 94%, transparent);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.kop.is-klein .balk { background: var(--paper); border-bottom-color: var(--line); }
.balk__in {
  /* logo links, menu rechts (29 sept 2026, gelijk aan de werken-bij site) */
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 84px;
  transition: min-height .45s var(--ease);
}
.kop.is-klein .balk__in { min-height: 66px; }

/* ── responsief ── */
@media (max-width: 1023px) {
  .kv--a .menu { display: none; }
  .kv--a .burger { display: flex; }
  .balk__in { min-height: 68px; }
  .logo img { height: 34px; }
  .strook__lbl { display: none; }
}
@media (min-width: 1024px) { .paneel { display: none; } }

/* ═══ HERO (optie 4, panorama; gekozen 28 sept 2026) ════
   Compact bovenin, zodat bij binnenkomst de helft van het scherm foto is */

.hero {
  position: relative; isolation: isolate; overflow: clip;
  padding-top: clamp(2rem, 4.2vw, 3.75rem);
  background:
    radial-gradient(54rem 30rem at 86% 14%, color-mix(in oklab, var(--ice) 72%, transparent), transparent 70%),
    radial-gradient(40rem 26rem at 4% 0%, color-mix(in oklab, var(--ice) 42%, transparent), transparent 72%),
    var(--paper);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--grain); opacity: 0.05; mix-blend-mode: multiply; pointer-events: none;
}

/* beeldmerk (officieel, assets/beeldmerk.svg): rechts boven het verloop, achter de foto.
   Drie luchtstromen van dik naar dun; site.js tekent ze in en laat er een stroom door lopen */
.hero__merk {
  position: absolute; z-index: -1; pointer-events: none;
  right: clamp(0rem, 1vw, 2.5rem); top: clamp(0rem, 0.6vw, 0.75rem);
  width: clamp(6.5rem, 20vw, 18.5rem); aspect-ratio: 619.29 / 880.92;
  opacity: 0; animation: merk-vangnet 0s 3s forwards;   /* verschijnt ook als JS uitblijft */
}
@keyframes merk-vangnet { to { opacity: 1; } }
.hero__merk svg { width: 100%; height: 100%; overflow: visible; }
.stroom__vorm { fill: var(--brand); opacity: 0.13; }
.stroom[data-i="2"] .stroom__vorm { fill: var(--brand-mid); opacity: 0.24; }
.stroom__glans { stroke: var(--brand); opacity: 0; }
.stroom[data-i="2"] .stroom__glans { stroke: var(--brand-mid); }
@media (prefers-reduced-motion: reduce) { .hero__merk { opacity: 1; animation: none; } }
/* het merk schaalt vloeiend mee met de kop (beide op vw), ook onder 1280px. Het mag achter de knoppen
   langs lopen: die zijn dichte vlakken (29 sept 2026, daarvoor sprong het onder 1280px naar half formaat) */

.hero__kop {
  position: relative; z-index: 2;
  font-size: var(--t-h1); font-weight: 800;
  letter-spacing: -0.042em; line-height: 0.98;
  max-width: 100%;
}
.regel { display: block; overflow: hidden; padding-bottom: 0.09em; margin-bottom: -0.09em; }
.regel__in { display: block; }
.regel:last-child .regel__in { color: var(--brand); }
@media (min-width: 1100px) { .regel__in { white-space: nowrap; } }

/* lede links, knoppen rechts; het beeldmerk loopt daar achter de knoppen langs */
.hp__rij {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem clamp(1.5rem, 2.5vw, 2.5rem); margin-top: clamp(1.1rem, 2.2vw, 1.75rem);
}
.hero__lede { font-size: var(--t-0); line-height: 1.55; color: var(--muted); max-width: 30rem; text-wrap: pretty; }
.hero__knoppen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; }
/* dicht wit, zodat het beeldmerk er niet doorheen schemert */
.hero .knop--lijn { background: var(--ice-soft); }   /* dicht vlak: het beeldmerk loopt erachter langs */

.hp__lijst {
  margin-top: clamp(1.75rem, 3.2vw, 2.75rem);
  height: clamp(20rem, 46vw, 40rem); overflow: hidden;
  /* in rust binnen de marges; GSAP opent hem bij het scrollen tot de schermrand */
  clip-path: inset(0 var(--pad) 0 var(--pad) round 8px);
}
.hp__lijst img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform-origin: 50% 35%; }   /* drie monteurs; op breed staan ze alle drie in beeld */

@media (max-width: 699px) {
  .hp__rij > * { flex: 1 1 100%; }
  .hero__knoppen { justify-content: stretch; }   /* rechts uitlijnen alleen vanaf tablet */
  .hero__merk { right: -5vw; top: 0.25rem; width: clamp(6.5rem, 30vw, 12rem); }
  .hp__lijst { height: clamp(16rem, 72vw, 22rem); }
  .hp__lijst img { object-position: 15% 30%; }   /* smal: de vrouw bij de manometers en haar collega */
}

/* ═══ SECTIES, GEDEELD ═════════════════════════════════ */

.sectie { padding-block: var(--sectie); }
.sectie__kop { display: grid; gap: 1.25rem; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.sectie__intro { font-size: var(--t-1); line-height: 1.5; color: var(--muted); max-width: 40ch; }
.sectie__intro--licht { color: var(--op-donker); }
@media (min-width: 900px) {
  .sectie__kop--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 4rem; }
}

.h2 { font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.038em; line-height: 1; }
.h2--breed { max-width: 100%; }
.h2--licht { color: var(--white); }

/* ═══ WAT WE DOEN: BENTO ═══════════════════════════════ */

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, clamp(15rem, 21vw, 20.5rem));
  grid-auto-flow: dense;
  gap: clamp(0.75rem, 1.3vw, 1.25rem);
}
.tegel--koel    { grid-column: span 2; grid-row: span 2; }
.tegel--service { grid-column: span 2; grid-row: span 1; }
.tegel--klimaat { grid-column: span 1; grid-row: span 1; }
.tegel--wtw     { grid-column: span 1; grid-row: span 1; }

.tegel {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  border-radius: 4px; text-decoration: none; color: var(--white);
  background: var(--deep);
}
.tegel__foto { position: absolute; inset: 0; z-index: -2; }
.tegel__foto img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.88) contrast(1.06);
  transition: transform .7s var(--ease);
}
.tegel:hover .tegel__foto img { transform: scale(1.05); }
.tegel__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in oklab, var(--deep-3) 92%, transparent) 0%, color-mix(in oklab, var(--deep-3) 40%, transparent) 45%, transparent 75%);
}
.tegel__tekst { display: grid; gap: 0.6rem; max-width: 30rem; }
.tegel h3 { font-size: var(--t-2); letter-spacing: -0.03em; line-height: 1.05; }
.tegel--koel h3 { font-size: var(--t-3); }
.tegel--klimaat h3, .tegel--wtw h3 { font-size: clamp(1.3rem, 0.95rem + 0.9vw, 1.75rem); hyphens: manual; overflow-wrap: break-word; }
.tegel--klimaat, .tegel--wtw { padding: clamp(1.2rem, 1.8vw, 1.6rem); }
.tegel p { font-size: var(--t-s); line-height: 1.55; color: var(--op-donker); }
.tegel--koel p { font-size: var(--t-0); max-width: 34ch; }

.tegel--service { background: var(--deep); }
.tegel--service::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(28rem 18rem at 100% 0%, color-mix(in oklab, var(--brand) 70%, transparent), transparent 70%),
    var(--grain);
  opacity: 1;
}
.tegel__groot {
  font-size: clamp(3.5rem, 7vw, 6.75rem) !important; font-weight: 800;
  letter-spacing: -0.05em; line-height: 0.85;
  color: var(--ice) !important;
  transition: transform .7s var(--ease);
}
.tegel--service:hover .tegel__groot { transform: translateX(0.4rem); }

.tegel--wtw { background: var(--ice); color: var(--deep); }
.tegel--wtw p { color: color-mix(in oklab, var(--deep) 88%, transparent); }
.tegel--wtw::before {
  content: ""; position: absolute; right: -2.5rem; top: -2.5rem; z-index: -1;
  width: 11rem; height: 11rem; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent);
  box-shadow: 0 0 0 1.6rem color-mix(in oklab, var(--white) 30%, transparent),
              0 0 0 3.2rem color-mix(in oklab, var(--white) 18%, transparent);
  transition: transform .9s var(--ease);
}
.tegel--wtw:hover::before { transform: scale(1.12); }

.tegel__pijl {
  position: absolute; top: clamp(1.1rem, 2vw, 1.6rem); right: clamp(1.1rem, 2vw, 1.6rem);
  width: 46px; height: 46px; border-radius: 50%;
  background: color-mix(in oklab, currentColor 14%, transparent); opacity: 0.9;
  transition: transform .6s var(--ease), background-color .4s var(--ease), opacity .4s var(--ease);
}
.tegel__pijl::before, .tegel__pijl::after { content: ""; position: absolute; left: 50%; top: 50%; }
.tegel__pijl::before { width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%) rotate(-45deg); }
.tegel__pijl::after {
  width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: translate(-30%, -70%);
}
.tegel:hover .tegel__pijl { transform: rotate(45deg); opacity: 1; background: color-mix(in oklab, currentColor 14%, transparent); }

@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: clamp(14rem, 34vw, 18rem); }
  .tegel--koel { grid-column: span 2; grid-row: span 2; }
  .tegel--service { grid-column: span 2; }
}
@media (max-width: 599px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(15rem, auto); }
  .tegel--koel, .tegel--service, .tegel--klimaat, .tegel--wtw { grid-column: span 1; grid-row: span 1; }
  .tegel--koel { min-height: 22rem; }
}

/* ═══ VOOR WIE ═════════════════════════════════════════ */

.wie { background: var(--paper-2); }
.wie__raster { display: grid; gap: clamp(2.5rem, 5vw, 5rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 900px) { .wie__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.wie__tekst p { font-size: var(--t-1); line-height: 1.5; color: var(--muted); max-width: 36ch; margin-bottom: 1.5rem; }

.segmenten li { border-top: 1px solid var(--line); }
.segmenten li:last-child { border-bottom: 1px solid var(--line); }
.segmenten a {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: clamp(1rem, 1.9vw, 1.45rem);
  color: var(--ink); text-decoration: none;
  font-size: var(--t-2); font-weight: 700; letter-spacing: -0.028em; line-height: 1.1;
  transition: color .35s var(--ease), padding-inline-start .55s var(--ease);
}
.segmenten a::after {
  content: ""; flex: none; width: 2.2rem; height: 1px; background: var(--brand-mid);
  transition: width .55s var(--ease);
}
.segmenten a:hover { color: var(--brand); padding-inline-start: 0.8rem; }
.segmenten a:hover::after { width: 3.6rem; }
.segmenten__rest { padding-block: 1.1rem; color: var(--muted); font-size: var(--t-s); }

/* marquee */
.marquee {
  margin-block: clamp(4.5rem, 9vw, 8rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__baan { display: flex; width: max-content; animation: loop 46s linear infinite; }
.marquee:hover .marquee__baan { animation-play-state: paused; }
.marquee__rij { display: flex; align-items: center; gap: clamp(3rem, 6vw, 5.5rem); padding-right: clamp(3rem, 6vw, 5.5rem); }
/* optisch gelijk gewicht: ronde merken vullen de hoogte, brede de breedte */
.marquee__rij li { flex: none; width: clamp(7.5rem, 11vw, 9.5rem); height: clamp(3rem, 4.4vw, 3.75rem); display: flex; align-items: center; justify-content: center; }
.marquee__rij img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  filter: grayscale(1) contrast(1.1); opacity: 0.6; mix-blend-mode: multiply;
  transition: filter .5s var(--ease), opacity .5s var(--ease);
}
.marquee__rij img.is-wit { filter: brightness(0); opacity: 0.5; mix-blend-mode: normal; }
.marquee__rij li:hover img { filter: none; opacity: 1; }
.marquee__rij li:hover img.is-wit { filter: brightness(0); opacity: 0.85; }
@keyframes loop { to { transform: translate3d(-50%, 0, 0); } }

/* stem: klantcitaten als tablijst, schaalt van 2 tot 6 klanten */
.stem { margin-top: clamp(0.5rem, 2vw, 1.5rem); }
.stem__kop {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem;
  padding-bottom: 1.25rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--line);
}
.stem__titel { font-size: var(--t-2); font-weight: 800; letter-spacing: -0.03em; }
.stem__bediening { display: flex; align-items: center; gap: 0.75rem; }
.stem__knop {
  width: 48px; height: 48px; border-radius: 50%;
  border: 0; background: var(--white); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .35s var(--ease), transform .5s var(--ease);
}
.stem__knop:hover { background: var(--ice); }
.stem__knop:active { transform: scale(0.94); }
.stem__knop span {
  width: 9px; height: 9px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: translateX(2px) rotate(45deg);
}
.stem__knop--volgende span { transform: translateX(-2px) rotate(-135deg); }
.stem__teller { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); min-width: 3.25rem; text-align: center; font-variant-numeric: tabular-nums; }

.stem__raster { display: grid; gap: clamp(1.75rem, 4vw, 4.5rem); }
@media (min-width: 900px) {
  .stem__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
}

.stem__lijst { display: grid; gap: 0.4rem; }
.stem__tab {
  display: flex; align-items: center; gap: 0.9rem; width: 100%;
  padding: 0.7rem 0.85rem; min-height: 72px;
  border: 0; border-radius: 6px; background: transparent;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  transition: background-color .3s var(--ease), box-shadow .45s var(--ease);
}
.stem__tab:hover { background: color-mix(in oklab, var(--white) 65%, transparent); }
.stem__tab[aria-selected="true"] {
  background: var(--white);
  box-shadow: 0 18px 40px -28px color-mix(in oklab, var(--deep) 50%, transparent);
}
.stem__logo {
  flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; padding: 7px;
  background: var(--white);
}
.stem__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.stem__tab--leeg .stem__logo { background: color-mix(in oklab, var(--muted) 12%, transparent); }
.stem__wie { display: grid; gap: 0.2rem; min-width: 0; }
.stem__wie strong { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; transition: color .3s var(--ease); }
.stem__wie small { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stem__tab[aria-selected="true"] .stem__wie strong { color: var(--brand); }
.stem__tab--leeg .stem__wie strong { color: var(--muted); font-weight: 600; }

/* alle citaten in één cel: de hoogte volgt het langste, dus niets springt */
.stem__panelen { display: grid; }
.stem__citaat {
  grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .7s var(--ease), visibility 0s linear .45s;
}
.stem__citaat.is-actief { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.stem__citaat:focus-visible { outline-offset: 8px; }
.stem blockquote { margin: 0; }
.stem blockquote p {
  font-size: clamp(1.45rem, 1.05rem + 1.3vw, 2.25rem); font-weight: 500;
  letter-spacing: -0.025em; line-height: 1.24; max-width: 30ch; text-wrap: pretty;
}
.stem blockquote p::before { content: "\201C"; color: var(--brand-mid); }
.stem blockquote p::after  { content: "\201D"; color: var(--brand-mid); }
.stem__voorbeeld {
  display: inline-block; margin-bottom: 1.1rem; padding: 0.35rem 0.6rem; border-radius: 3px;
  background: var(--ice); color: var(--deep);
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.stem__citaat:has(.stem__voorbeeld) blockquote p { color: var(--muted); }
.stem figcaption { display: grid; gap: 0.25rem; margin-top: 1.75rem; }
.stem figcaption strong { font-weight: 700; font-size: var(--t-0); }
.stem figcaption span { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 899px) {
  /* op smalle schermen wordt de lijst een veegbare rij */
  .stem__lijst {
    grid-auto-flow: column; grid-auto-columns: minmax(13rem, 72%);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1); padding: 0.25rem var(--pad) 0.75rem;
  }
  .stem__lijst::-webkit-scrollbar { display: none; }
  .stem__tab { scroll-snap-align: start; }
}

/* ═══ WAAROM: HORIZONTALE ACCORDEON ════════════════════ */

.acc { display: flex; gap: clamp(0.5rem, 0.9vw, 0.85rem); height: clamp(28rem, 40vw, 36rem); }
.acc__plak {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1 1 0; min-width: 0;
  border-radius: 4px; background: var(--deep); color: var(--white);
  transition: flex-grow .8s var(--ease);
  contain: paint;
}
.acc__plak.is-open { flex-grow: 4.6; }

.acc__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  transform: scale(1.08);
  transition: filter .8s var(--ease), transform 1.1s var(--ease);
}
.acc__plak::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in oklab, var(--deep-3) 78%, transparent);
  transition: background-color .8s var(--ease);
}
.acc__plak.is-open .acc__foto { filter: grayscale(0) contrast(1.04); transform: scale(1); }
.acc__plak.is-open::after {
  background: linear-gradient(to top, color-mix(in oklab, var(--deep-3) 94%, transparent) 0%, color-mix(in oklab, var(--deep-3) 35%, transparent) 55%, transparent 80%);
}
.acc__plak:not(.is-open):hover::after { background: color-mix(in oklab, var(--deep-3) 62%, transparent); }

.acc__knop {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: none; border: 0; cursor: pointer; color: inherit; text-align: left;
  font: 700 var(--t-1)/1.1 var(--sans); letter-spacing: -0.02em;
}
.acc__knop span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; animation: in-a .5s .2s var(--ease) both; }
.acc__plak.is-open .acc__knop span { opacity: 0; animation: none; }
.acc__knop:focus-visible { outline-offset: -6px; }

.acc__inhoud {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  width: min(30rem, 100%);
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  opacity: 0; transform: translateY(16px);
  transition: opacity .35s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.acc__plak.is-open .acc__inhoud { opacity: 1; transform: none; transition-delay: .3s, .3s; }
.acc__titel { font-size: var(--t-3); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin-bottom: 0.9rem; }
.acc__inhoud p:not(.acc__titel) { color: var(--op-donker); max-width: 34ch; }

@keyframes in-a { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 899px) {
  .acc { flex-direction: column; height: auto; }
  .acc__plak { flex: none; height: 5.25rem; transition: height .7s var(--ease); }
  .acc__plak.is-open { height: 24rem; }
  .acc__knop { align-items: center; }
  .acc__knop span { writing-mode: horizontal-tb; transform: none; }
  .acc__plak.is-open .acc__knop { align-items: flex-start; }
}

/* ═══ PROJECTEN: KAARTENSTAPEL ═════════════════════════ */

.projecten {
  position: relative; isolation: isolate;
  background:
    radial-gradient(60rem 36rem at 12% 0%, color-mix(in oklab, var(--brand) 55%, transparent), transparent 70%),
    radial-gradient(50rem 40rem at 100% 100%, color-mix(in oklab, var(--deep-3) 90%, transparent), transparent 70%),
    var(--deep);
  color: var(--white);
}
.projecten::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--grain); opacity: 0.09; mix-blend-mode: overlay; pointer-events: none;
}

.stapel { display: grid; gap: clamp(2rem, 5vw, 3.5rem); padding-bottom: 2rem; }

.kaart {
  position: relative; isolation: isolate;
  display: grid; overflow: hidden;
  border-radius: 6px;
  background: var(--deep-2);
  border: 1px solid var(--lijn-donker);
  box-shadow: 0 -30px 80px -40px color-mix(in oklab, var(--deep-3) 95%, transparent);
  transform-origin: 50% 0%;
  --dim: 0;
}
.kaart::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--deep-3); opacity: var(--dim);
}
.kaart__foto { overflow: hidden; min-height: 16rem; }
.kaart__foto img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
  transition: transform .9s var(--ease);
}
.kaart:hover .kaart__foto img { transform: scale(1.05); }

.kaart__tekst { padding: clamp(1.75rem, 3.4vw, 3rem); display: flex; flex-direction: column; }
.kaart__sector {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ice); margin-bottom: 0.9rem;
}
.kaart h3 { font-size: var(--t-3); letter-spacing: -0.035em; }
.kaart__wat { margin-top: 1rem; color: var(--op-donker); max-width: 40ch; }
.kaart__feiten {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  margin-block: clamp(1.5rem, 3vw, 2.25rem);
}
.kaart__feiten > div { border-top: 1px solid var(--lijn-donker); padding-top: 0.8rem; }
.kaart__feiten dt {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in oklab, var(--white) 70%, transparent);
  margin-bottom: 0.35rem;
}
.kaart__feiten dd { font-size: var(--t-2); font-weight: 800; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.kaart__resultaat { margin-top: auto; font-size: var(--t-s); line-height: 1.6; color: var(--op-donker); max-width: 46ch; }
.kaart__resultaat strong { color: var(--ice); font-weight: 700; }

@media (min-width: 900px) {
  .kaart {
    position: sticky;
    top: calc(var(--kop-h) + 1.5rem + var(--n) * 1.4rem);
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    min-height: clamp(27rem, 38vw, 33rem);
  }
}

/* ═══ OVER ONS: SCRUB-VERHAAL ══════════════════════════ */

.over__verhaal {
  font-size: clamp(1.7rem, 0.95rem + 2.5vw, 3.35rem);
  font-weight: 700; letter-spacing: -0.034em; line-height: 1.16;
  max-width: 25em; text-wrap: pretty;
}
.over__verhaal .w { opacity: 0.13; }

.over__beelden {
  display: grid; gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(4rem, 8vw, 7.5rem);
}
.over__groot, .over__klein { overflow: hidden; border-radius: 4px; }
.over__groot img, .over__klein img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.over__groot:hover img, .over__klein:hover img { transform: scale(1.05); }
.over__groot img { aspect-ratio: 4 / 5; object-position: 62% 30%; }
.over__klein img { aspect-ratio: 5 / 4; object-position: 40% 45%; }
.over__klein img[src*="familie"] { object-position: 50% 35%; }
.over__slot p { font-size: var(--t-1); line-height: 1.45; color: var(--muted); max-width: 30ch; margin-bottom: 1.25rem; }

@media (min-width: 900px) {
  .over__beelden { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .over__groot { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .over__klein { grid-column: 8 / span 5; margin-top: clamp(5rem, 12vw, 10rem); }
  .over__slot  { grid-column: 8 / span 5; align-self: end; padding-bottom: 0.5rem; }
}

/* ═══ SERVICE EN STORING: rustig, wel altijd vindbaar ══ */

.storing {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(5rem, 9vw, 8.5rem);
  background:
    radial-gradient(42rem 26rem at 96% 0%, color-mix(in oklab, var(--ice) 75%, transparent), transparent 70%),
    var(--ice-soft);
}
.storing__in { display: grid; gap: clamp(2.25rem, 4.5vw, 3.75rem); }

.storing__tekst { display: grid; gap: 1.25rem clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 900px) {
  .storing__tekst { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; }
}
.storing__kop { font-size: var(--t-3); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; max-width: 19ch; }
.storing__tekst p { font-size: var(--t-1); line-height: 1.5; color: var(--muted); max-width: 44ch; }
.storing__tekst .lees { margin-top: 0.25rem; }
@media (min-width: 900px) { .storing__tekst .lees { grid-column: 2; } }

/* kaart over de volle breedte, plat: geen rand, geen schaduw */
.storing__kaart {
  width: 100%;
  display: grid; align-items: center; gap: 1.25rem clamp(2rem, 4vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3.5vw, 3rem);
  background: var(--white); border-radius: 8px;
}
@media (min-width: 900px) { .storing__kaart { grid-template-columns: auto minmax(0, 1fr) auto; } }
.storing__nummer { display: grid; gap: 0.5rem; }
.storing__status {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.storing__nr {
  font-size: var(--t-3); font-weight: 800; letter-spacing: -0.035em; line-height: 1;
  color: var(--brand); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: color .3s var(--ease);
}
.storing__nr:hover { color: var(--deep); }
.storing__tip { color: var(--muted); font-size: var(--t-s); line-height: 1.55; max-width: 38ch; }
@media (max-width: 899px) { .storing__knop { justify-self: start; } }

/* ═══ WERKEN BIJ ═══════════════════════════════════════ */

.werk {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(32rem, 50vw, 42rem);
  display: flex; align-items: center;
  padding-block: clamp(5rem, 9vw, 8rem);
  background: var(--deep-3); color: var(--white);
}
.werk__foto {
  position: absolute; inset: -6% 0; z-index: -2;
  width: 100%; height: 112%; object-fit: cover; object-position: 50% 45%;
  filter: saturate(0.85) contrast(1.05);
}
.werk::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--deep-3) 94%, transparent) 0%, color-mix(in oklab, var(--deep-3) 78%, transparent) 38%, color-mix(in oklab, var(--deep-3) 10%, transparent) 78%),
    var(--grain);
  background-blend-mode: normal, overlay;
}
.werk__in { display: grid; justify-items: start; gap: 1.5rem; }
.werk__in p { max-width: 36ch; font-size: var(--t-1); line-height: 1.5; color: var(--op-donker); }
.werk .knop { margin-top: 0.75rem; }

/* ═══ CONTACT ══════════════════════════════════════════ */

.contact__intro { margin-top: 1.25rem; }
.contact__raster { display: grid; gap: clamp(3rem, 6vw, 6rem); margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 900px) { .contact__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.contact__gegevens { display: grid; gap: 1.1rem; align-content: start; }
.contact__tel {
  font-size: var(--t-3); font-weight: 800; letter-spacing: -0.035em; line-height: 1;
  color: var(--brand); text-decoration: none; font-variant-numeric: tabular-nums;
}
.contact__tel:hover { color: var(--deep); }
.contact__mail { font-size: var(--t-1); font-weight: 600; color: var(--ink); text-decoration-color: var(--line); overflow-wrap: anywhere; }
.contact__mail:hover { text-decoration-color: var(--brand); }
.contact address { font-style: normal; line-height: 1.6; margin-top: 0.75rem; }
.contact__noot { color: var(--muted); max-width: 34ch; padding-top: 1.1rem; border-top: 1px solid var(--line); margin-top: 0.5rem; }

.form { display: grid; gap: 1.25rem 1.5rem; }
@media (min-width: 600px) { .form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .veld--breed, .form__voet { grid-column: 1 / -1; } }
.veld { display: grid; gap: 0.45rem; }
.veld label { font-weight: 700; font-size: 0.9375rem; }
.veld label span { font-weight: 400; color: var(--muted); }
.veld input, .veld textarea {
  font: 400 var(--t-0)/1.5 var(--sans); color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 3px;
  padding: 0.8rem 0.95rem; min-height: 52px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.veld textarea { resize: vertical; min-height: 140px; }
.veld input:hover, .veld textarea:hover { border-color: color-mix(in oklab, var(--brand) 40%, var(--line)); }
.veld input:focus, .veld textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent); }
.veld.is-fout input, .veld.is-fout textarea { border-color: oklch(52% 0.17 25); }
.form__voet { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.5rem; }
.form__noot { color: var(--muted); font-size: var(--t-s); }
.form__melding { grid-column: 1 / -1; font-size: var(--t-s); color: oklch(46% 0.16 25); }
.form__melding--ok { color: var(--brand); }

/* ═══ VOET ═════════════════════════════════════════════ */

.voet { background: var(--deep); color: var(--white); padding-block: clamp(4rem, 7vw, 6rem) 2rem; }
.voet__raster { display: grid; gap: 2.5rem; }
@media (min-width: 700px)  { .voet__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .voet__raster { grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); } }
.voet__merk img { height: 38px; width: auto; filter: brightness(0) invert(1); margin-bottom: 1.5rem; }
.voet__merk p { color: var(--op-donker); line-height: 1.7; }
.voet a { color: var(--op-donker); text-decoration: none; transition: color .3s var(--ease); }
.voet a:hover { color: var(--white); }
.voet nav { display: grid; align-content: start; gap: 0.2rem; }
.voet nav a { display: inline-flex; align-items: center; min-height: 40px; font-size: 0.975rem; }
.voet__kop { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice); margin-bottom: 0.6rem; }
.voet__onder {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem;
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.5rem;
  border-top: 1px solid var(--lijn-donker);
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em;
  color: color-mix(in oklab, var(--white) 70%, transparent);
}
.voet__juridisch { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

/* ═══ LETTERS VARIANT B: Armada + fonts van de huidige site ═══
   Koppen in Armada Bold. Al het andere zoals verbruggekoeltechniek.nl het nu zet:
   lopende tekst Sunflower Light (300), menu, knoppen en labels Roboto Mono 500 in kapitalen.
   Armada is ongeveer 25% breder, daarom gaan de grootste koppen een stap omlaag. */

html[data-kopletter="armada"] {
  --sans: "Sunflower", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html[data-kopletter="armada"] body { font-weight: 300; }

/* koppen: Armada */
html[data-kopletter="armada"] :is(h1, h2, h3, .acc__titel, .kaart__feiten dd, .storing__nr, .contact__tel, .tegel__groot) {
  font-family: "Armada", var(--sans); font-weight: 700; letter-spacing: -0.005em;
}
html[data-kopletter="armada"] .hero__kop { font-size: calc(var(--t-h1) * 0.84); line-height: 1.02; }
html[data-kopletter="armada"] .h2 { font-size: calc(var(--t-h2) * 0.84); line-height: 1.05; }
html[data-kopletter="armada"] :is(.storing__kop, .kaart h3, .tegel--koel h3, .acc__titel) { font-size: calc(var(--t-3) * 0.86); line-height: 1.06; }
html[data-kopletter="armada"] .tegel h3 { font-size: calc(var(--t-2) * 0.88); }
html[data-kopletter="armada"] :is(.tegel--klimaat h3, .tegel--wtw h3) { font-size: clamp(1.15rem, 0.85rem + 0.75vw, 1.5rem); }
html[data-kopletter="armada"] :is(.storing__nr, .contact__tel) { font-size: calc(var(--t-3) * 0.86); }
html[data-kopletter="armada"] .kaart__feiten dd { font-size: calc(var(--t-2) * 0.84); }
html[data-kopletter="armada"] .tegel__groot { font-size: clamp(3rem, 6vw, 5.75rem) !important; }

/* menu, knoppen, leeslinks, lijstlinks en labels: Roboto Mono in kapitalen, zoals op de huidige site */
html[data-kopletter="armada"] :is(.knop, .menu > a, .dd__knop, .lees, .paneel__in > a, .voet nav a, .veld label, .segmenten a) {
  font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.9rem;
}
html[data-kopletter="armada"] .segmenten a { font-size: var(--t-0); line-height: 1.3; }
html[data-kopletter="armada"] .veld label { font-size: 0.78rem; }
html[data-kopletter="armada"] .paneel__in > a.paneel__sub { text-transform: none; font-family: var(--sans); font-weight: 500; letter-spacing: 0; }
html[data-kopletter="armada"] :is(.stem blockquote p, .over__verhaal) { font-weight: 300; letter-spacing: -0.01em; }

@media (max-width: 599px) {
  html[data-kopletter="armada"] .hero__kop { font-size: 1.6rem; }
  html[data-kopletter="armada"] .h2 { font-size: calc(var(--t-h2) * 0.78); }
}

/* ── presentatieschakelaar ── */
.wissel {
  position: fixed; z-index: 150;
  left: max(1rem, env(safe-area-inset-left, 0px)); bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0.35rem 0.4rem 0.35rem 0.85rem;
  background: var(--ink); color: var(--white); border-radius: 8px;
  box-shadow: 0 18px 40px -18px color-mix(in oklab, var(--ink) 70%, transparent);
  font: 600 0.8125rem/1 var(--sans);
}
.wissel__lbl { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--op-donker); margin-right: 0.35rem; }
.wissel button {
  min-height: 38px; padding: 0 0.85rem; border: 0; border-radius: 5px; cursor: pointer;
  background: transparent; color: var(--white); font: 700 0.875rem/1 var(--sans);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.wissel button[data-kopletter="armada"] { font-family: "Armada", var(--sans); font-weight: 700; letter-spacing: 0.01em; }
.wissel button:hover { background: color-mix(in oklab, var(--white) 14%, transparent); }
.wissel button[aria-pressed="true"] { background: var(--white); color: var(--ink); }

/* ═══ MELDING (links naar nog te ontwerpen pagina's) ═══ */

.melding {
  /* rechtsonder (29 sept 2026); de letterschakelaar staat linksonder */
  position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: max(1rem, env(safe-area-inset-bottom, 0px)); z-index: 200;
  transform: translateY(1rem);
  max-width: min(26rem, calc(100vw - 2rem));
  padding: 0.9rem 1.2rem; border-radius: 4px;
  background: var(--ink); color: var(--white);
  font-size: 0.9375rem; line-height: 1.45;
  box-shadow: 0 20px 50px -20px color-mix(in oklab, var(--ink) 70%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.melding.is-zichtbaar { opacity: 1; transform: none; }
/* smal: boven de schakelaar, anders vallen ze over elkaar */
@media (max-width: 640px) { .melding { bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 3.75rem); } }
.melding code { font-family: var(--mono); font-size: 0.85em; color: var(--ice); }

/* ═══ BEWEGING UIT ═════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__baan { animation: none; width: auto; justify-content: center; }
  .marquee__rij { flex-wrap: wrap; justify-content: center; padding-right: 0; row-gap: 2rem; }
  .marquee__rij[aria-hidden="true"] { display: none; }
  .over__verhaal .w { opacity: 1; }
}

/* ═══ KLEIN SCHERM: FIJNAFSTEMMING ═════════════════════ */
@media (max-width: 559px) {
  .hero__knoppen { display: grid; }
  .hero__knoppen .knop { width: 100%; }
  .hero__lede { font-size: var(--t-0); }
  .kaart__feiten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .kaart__feiten dd { font-size: var(--t-1); }
}