/* ═══════════════════════════════════════════════════════════
   Werken bij Verbrugge Koeltechniek, homepage
   Losse statische site (map werken-bij/), naast de reguliere site in corporate/.
   Concept: COOL. Register: brand · Strategie: drenched in ijs, committed in blauw.
   Type: Armada Bold (koppen, zoals de uitingen) · Cabinet Grotesk (tekst) · Roboto Mono (gegevens)
   ═══════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* merk, gelijk aan de corporate site */
  --brand:      oklch(44.1% 0.1383 253.6);   /* #00529c */
  --brand-mid:  oklch(62.1% 0.1238 241.9);   /* #338eca  alleen groot, randen, accenten */
  --ice:        oklch(89.1% 0.0616 236.6);   /* #b5e2ff */
  --deep:       oklch(36.1% 0.0656 247.4);   /* #1e405e */
  --white:      oklch(99% 0.005 247);

  /* COOL: de markering onder "cool" in de uitingen, iets voller dan --ice */
  --marker:     oklch(85.5% 0.088 237);      /* ~#9dd6fd */

  --deep-3:     oklch(31% 0.058 248);
  --ice-soft:   oklch(95.6% 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(44% 0.024 250);
  --line:       oklch(88% 0.014 245);
  --op-donker:  color-mix(in oklab, var(--white) 78%, transparent);
  --lijn-donker: color-mix(in oklab, var(--white) 20%, transparent);

  --display: "Armada", "Cabinet Grotesk", ui-sans-serif, system-ui, sans-serif;
  --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.2rem, 1.1rem + 0.45vw, 1.5rem);
  --t-2:  clamp(1.45rem, 1.2rem + 1vw, 2.1rem);
  --t-h2: clamp(2rem, 1.1rem + 3.3vw, 4.4rem);
  --t-h1: clamp(2.6rem, 1.3rem + 4.2vw, 5.9rem);

  --max: 1320px;
  --pad: clamp(1.25rem, 4.5vw, 4rem);
  --sectie: clamp(5.5rem, 11vw, 11rem);
  --kop-h: 80px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* maskervormen, ingebed zodat de pagina ook zonder server (file://) werkt.
     Bron: bronnen/werkenbij/vormen/masker-1..3.svg (uit maskers-fotografie.svg) en hoek-*.svg (strepen uit assets/arc.svg, gedraaid en vergroot) */
  --masker-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='516.54 152.11 401.7 340.95' preserveAspectRatio='none'%3E%3Cpath d='M872.77,493.06h-35.01c-59.8,0-159.57-15.46-209.33-32.43l-.44-56.98c-17.72,1.06-32.13,1.76-42.42,1.84l-13.3-59.9c-10.32.83-20.09,1.49-29.17,1.96l-26.56-59.7c12.61-12.63,30.76-24.78,54.68-36.54l-17.59,5.12-19.56-67.24,33.62-9.78c178.09-51.81,323.19-14.25,329.28-12.63l-3.47,68.4c-.26.04-10.29,1.67-26.77,4.7l18.74,63.97c-14.78,6.78-32.05,13.45-50.75,20.03,36.69.2,65.35,2.68,83.52,8.78l-8.1,68.07c-20.2,1.76-63.25,10.25-109.14,20.59,13.47,1.1,26,1.72,36.77,1.72h35.01v70.02Z'/%3E%3C/svg%3E");
  --masker-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1015.04 154.35 401.51 360.9' preserveAspectRatio='none'%3E%3Cpath d='M1124.76,515.23l-44.57-60.98,30.49-22.28c3.2-2.34,6.59-4.62,10.14-6.84-16.44,3.33-30.58,5.58-41.27,6.35l-13.82-73.76c12.11-3.74,26.58-7.73,43.94-10.83-31.79.18-62.22-1.15-89.59-5.34l-5.04-73.53c28.41-8.44,67.4-16.1,108.68-24.21,3.19-.63,6.39-1.26,9.59-1.89-12.6-1.01-25.04-2.37-36.98-4.17l-37.34-5.65,11.3-74.68,37.34,5.65c40.58,6.14,97.47,7.49,160.19,3.81,58.09-3.41,98.11-9.84,106.63-12.53l36.73,63.99c-23.36,21.19-46.94,34.78-71.02,45,24.61.41,48.15,1.93,69.78,5.24l6.61,73.03c-.85.3-33.94,11.05-79.7,25.03,6.96,1.91,14.01,3.92,21.18,6.05l-9.26,73.94c-.34.01-36.17,1.52-78.9,8.57-52.42,8.65-93.13,22.06-114.64,37.77l-30.49,22.28Z'/%3E%3C/svg%3E");
  --masker-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='65.32 154.35 382.62 315.39' preserveAspectRatio='none'%3E%3Cpath d='M104.4,469.73l-12.71-71.96,35.98-6.36s.1-.02.15-.03c-15.39-.69-29.64-1.37-42.21-2.02l-4.46-72.47c15.41-2.72,30.86-5.29,46.36-7.71l-.15-3.74c-6.8-.54-13.6-1.13-20.39-1.77l-1.27-72.61c8.59-1.12,17.22-2.31,25.86-3.55-9.52.14-18.63.36-27.46.63l-36.52,1.13-2.26-73.04,36.52-1.13c55.1-1.7,110.78-.53,170.2,3.59,50.84,3.53,106.73,9.35,175.9,18.32v72.47c-17.48,2.27-35.09,4.84-52.74,7.6l-.62,24.33,11.83.67-.36,47.85c7.47.35,14.56.7,21.18,1.05l14.06,69.37c-5.61,2.72-12.59,4.92-34.65,8.11l-2.38,48.89c-3.93-.15-8.09-.39-12.45-.7-108.27-5.89-192.81-3.62-251.42,6.73l-35.98,6.36Z'/%3E%3C/svg%3E");
  --hoek-rb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 260'%3E%3Cpath transform='matrix(2.7321 -2.0276 2.0276 2.7321 -301.5674 39.1942)' d='M91.54 171.66C91.54 171.66 54.75 74.12 123.11 0.00L166.95 5.25C166.95 5.25 91.39 56.54 91.54 171.66Z'/%3E%3C/svg%3E");
  --hoek-lo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 110'%3E%3Cpath transform='matrix(9.3396 -3.9913 3.9913 9.3396 -762.6816 -1637.3640)' d='M94.42 237.94C94.42 237.94 40.97 234.46 0.00 194.24L2.72 178.09C2.72 178.09 31.18 216.96 94.42 237.94Z'/%3E%3C/svg%3E");

  /* markering: licht gebogen, zakt naar rechts iets af */
  --marker-vorm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0 0.6C30 0.9 66 2.4 100 5.2L99.2 29.6C66 30 30 28.2 0.6 25.4Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
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;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
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; }
.wie :focus-visible, .elke :focus-visible, .voet :focus-visible { outline-color: var(--ice); }
main section[id] { scroll-margin-top: calc(var(--kop-h) + 1rem); }

.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); }
.sectie { padding-block: var(--sectie); position: relative; }

/* ── type ─────────────────────────────────────────────── */

.kop-2 {
  font-family: var(--display); font-size: var(--t-h2);
  line-height: 0.98; letter-spacing: -0.005em; color: var(--brand);
}
.kop-2--groot { font-size: calc(var(--t-h2) * 1.14); }
.kop-2--klein { font-size: calc(var(--t-h2) * 0.8); }
html:not([data-kopletter="armada"]) .kop-2.kop-2--groot { font-size: calc(var(--t-h2) * 1.24); }
html:not([data-kopletter="armada"]) .kop-2.kop-2--klein { font-size: calc(var(--t-h2) * 0.88); }
.inleiding { font-size: var(--t-1); line-height: 1.5; color: var(--muted); max-width: 38ch; }
.bovenregel {
  font: 700 var(--t-s)/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 1.25rem;
}

/* COOL-markering: altijd achter het cool-deel van een zin */
.cool { position: relative; z-index: 0; display: inline-block; white-space: nowrap; }
.cool::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0.04em -0.12em -0.1em -0.32em;
  background: var(--marker);
  -webkit-mask: var(--marker-vorm) center / 100% 100% no-repeat;
          mask: var(--marker-vorm) center / 100% 100% no-repeat;
  transform: scaleX(var(--mk, 1)); transform-origin: left center;
}
.cool--klein { font-weight: 700; color: var(--brand); padding-inline: 0.1em; }
.cool--klein::before { inset: -0.05em -0.2em -0.12em -0.3em; }

/* ── knoppen ──────────────────────────────────────────── */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  min-height: 54px; padding: 0.9rem 1.6rem;
  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:active { transform: translateY(1px) scale(0.985); transition-duration: .12s; }
.knop--vol  { background: var(--brand); color: var(--white); }
.knop--vol:hover { background: var(--deep); }
.knop--wit  { background: var(--white); color: var(--brand); }
.knop--wit:hover { background: var(--ice); }
.knop--klein { min-height: 46px; padding: 0.7rem 1.15rem; font-size: 0.975rem; }

.pijl { position: relative; width: 1.1rem; height: 1px; background: currentColor; transition: width .5s var(--ease); }
.pijl::after {
  content: ""; position: absolute; right: 0; top: -3.5px; width: 8px; height: 8px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg);
}
.knop:hover .pijl { width: 1.6rem; }

.lees {
  display: inline-flex; align-items: center; gap: 0.7rem; min-height: 44px;
  font-weight: 700; color: var(--brand); text-decoration: none;
}
.lees--licht { color: var(--ice); }

/* ═══ KOP ═════════════════════════════════════════════ */

.kop {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.kop.is-klein { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px color-mix(in oklab, var(--deep) 60%, transparent); }
.kop__in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: var(--kop-h); }

.kop__logo { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; flex: none; }
.kop__logo img { height: 38px; width: auto; }
.kop__label {
  font: 700 0.8125rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand); padding: 0.45rem 0.6rem; background: var(--marker); border-radius: 2px;
  transform: rotate(-2deg);
}

.menu { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
.menu > a:not(.knop) {
  position: relative; display: inline-flex; align-items: center; gap: 0.45rem;
  font: 600 1rem/1 var(--sans); color: var(--ink); text-decoration: none; padding: 0.8rem 0;
}
.menu > a:not(.knop)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.4rem; height: 2px;
  background: var(--brand-mid); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.menu > a:not(.knop):hover::after { transform: scaleX(1); }
.menu__tel {
  display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding-inline: 0.3rem;
  font: 700 0.75rem/1 var(--sans); color: var(--white); background: var(--brand); border-radius: 99px;
}
.menu__tel[data-leeg], .vac__aantal[data-leeg] { display: none; }

.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;
  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:not(.knop) {
  display: flex; align-items: center; min-height: 60px; border-bottom: 1px solid var(--line);
  color: var(--brand); text-decoration: none; font: 800 1.5rem/1.1 var(--sans); letter-spacing: -0.03em;
}
.paneel__in .knop { margin-top: 2rem; }

@media (max-width: 1023px) {
  .menu { display: none; }
  .burger { display: inline-flex; }
}
@media (min-width: 1024px) { .paneel { display: none; } }
@media (max-width: 420px) { .kop__logo img { height: 32px; } .kop__label { font-size: 0.72rem; } }

/* ═══ IJSSCÈNE ═════════════════════════════════════════
   .ijs__grond   ijsblauwe ondergrond + wazige foto + rijp (hard light)
   .ijs__zone    de plek van de foto. Wazig en scherp delen exact dezelfde zone,
                 zodat het masker een doorkijkje is door het ijs.
   Maskermaat en -plek via --mw, --mh, --mr (rechts), --mb (onder).          */

.ijs {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ice-soft);
  --mw: min(52vw, 860px); --mh: 80%; --mr: var(--pad); --mb: 7%;
  --ms: 1;                                   /* schaal, voor de krab-animatie */
}
.ijs__grond { position: absolute; inset: 0; z-index: -3; isolation: isolate; }
.ijs__zone { position: absolute; inset: 0; overflow: hidden; }
.ijs__foto {
  position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); max-width: none;
  object-fit: cover; object-position: var(--fx, 66%) var(--fy, 45%);
}
.ijs__foto--wazig { filter: blur(10px) saturate(0.9); }
.ijs__rijp {
  position: absolute; inset: 0;
  background: url("img/ijs.jpg") center / cover no-repeat;
  mix-blend-mode: hard-light;
}
.ijs__zone--scherp { z-index: -1; pointer-events: none; }
.ijs__foto--scherp {
  /* de foto zelf loopt 24px buiten de zone, dus de marge daar bij optellen */
  -webkit-mask: var(--masker-2) no-repeat;
          mask: var(--masker-2) no-repeat;
  -webkit-mask-size: calc(var(--mw) * var(--ms)) calc(var(--mh) * var(--ms));
          mask-size: calc(var(--mw) * var(--ms)) calc(var(--mh) * var(--ms));
  -webkit-mask-position: right calc(var(--mr) + 24px) bottom calc(var(--mb) + 24px);
          mask-position: right calc(var(--mr) + 24px) bottom calc(var(--mb) + 24px);
}

/* hoekvormen: de strepen uit het beeldmerk (assets/arc.svg), vergroot en gedraaid zodat hun bolle
   rand van de ene paginarand naar de andere loopt, zoals in de uitingen.
   Rechtsboven de bovenste, dikke streep (3,4x, -37 graden); linksonder de onderste, dunne (10x, -23 graden).
   Kleur via background, vorm via masker, zodat de tokens gelden. */
.boog {
  position: absolute; z-index: -2; pointer-events: none;
  -webkit-mask: var(--boog) center / 100% 100% no-repeat; mask: var(--boog) center / 100% 100% no-repeat;
}
.boog--rb {
  --boog: var(--hoek-rb);
  top: 0; right: 0; width: clamp(110px, 13vw, 260px); aspect-ratio: 140 / 260;
  background: var(--brand);
}
.boog--lo {
  --boog: var(--hoek-lo);
  bottom: 0; left: 0; width: clamp(170px, 20vw, 400px); aspect-ratio: 260 / 110;
  background: var(--brand-mid);
}

.ijs__tekst { position: relative; z-index: 2; }

/* ── hero ── */
.ijs--hero { min-height: min(calc(100dvh - var(--kop-h)), 980px); display: grid; align-items: center; }
.ijs--hero .ijs__tekst { padding-block: clamp(4rem, 9vw, 8rem); }
.hero__kop {
  font-family: var(--display); font-size: var(--t-h1);
  line-height: 0.96; letter-spacing: -0.01em; color: var(--brand);
  max-width: 11ch;
}
.regel { display: block; overflow: clip; padding-bottom: 0.2em; margin-bottom: -0.2em; }
.regel__in { display: block; }
.regel:last-child { overflow: visible; }
.hero__lede { margin-top: clamp(1.5rem, 2.6vw, 2.25rem); font-size: var(--t-1); line-height: 1.45; max-width: 27ch; color: var(--ink); font-weight: 500; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }

@media (max-width: 899px) {
  /* telefoon: tekst boven, foto in het onderste deel, zoals de staande uitingen */
  .ijs--hero { align-items: start; min-height: 0; }
  .ijs--hero .ijs__tekst { padding-block: 2.5rem 0; }
  .ijs--hero .ijs__zone { top: auto; height: min(118vw, 520px); }
  .ijs--hero { padding-bottom: calc(min(118vw, 520px) - 2rem); }
  .ijs--hero { --mw: calc(100% - 2 * var(--pad) + 1.5rem); --mh: 86%; --mr: calc(var(--pad) - 0.75rem); --mb: 6%; }
  .ijs--hero .ijs__foto { --fx: 64%; --fy: 40%; }
}

/* ── hero met kant-en-klaar ijsbeeld (29 sept 2026) ──
   Het beeld bevat foto, ijs en doorkijkje al; alleen de bogen en de tekst liggen erboven. */
.hero__beeld { display: block; position: relative; z-index: -3; }
.hero__beeld img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
  .ijs--beeld .hero__beeld { position: absolute; inset: 0; }
  /* de monteur staat rechts in het beeld; bij smallere schermen schuift de uitsnede mee naar rechts */
  .ijs--beeld .hero__beeld img { height: 100%; object-fit: cover; object-position: 78% 50%; }
}
@media (max-width: 899px) {
  .ijs--hero.ijs--beeld { padding-bottom: 0; display: flex; flex-direction: column; }
  .ijs--beeld .ijs__tekst { order: 1; }
  /* het staande beeld onder de tekst; de bovenste, lege ijsrand schuift achter de knoppen en vloeit over */
  .ijs--beeld .hero__beeld {
    order: 2; margin-top: -48vw;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
  }
}

/* ── leren ── */
.ijs--leren { padding-block: var(--sectie); }
.ijs--leren .ijs__foto { --fx: 72%; --fy: 50%; }
.ijs--leren .ijs__foto--scherp {
  -webkit-mask-image: var(--masker-3); mask-image: var(--masker-3);
}
.ijs--leren { --mw: min(46vw, 760px); --mh: 72%; --mb: 14%; }
.leren__kop { font-size: clamp(2rem, 1rem + 2.7vw, 3.75rem); }
.leren__lede { margin-top: 1.75rem; font-size: var(--t-1); font-weight: 500; max-width: 30ch; }
.stappen { margin-block: 2.25rem 2.5rem; display: grid; gap: 0; max-width: 34rem; }
.stappen li {
  position: relative; padding: 0.95rem 0;
  border-top: 1px solid color-mix(in oklab, var(--brand) 22%, transparent);
  color: var(--ink); line-height: 1.45;
}
.stappen li span { font-weight: 700; color: var(--brand); }
.ijs--leren .ijs__tekst { max-width: var(--max); }
.ijs--leren .ijs__tekst > * { max-width: min(34rem, 40%); }
.ijs--leren .ijs__tekst > .leren__kop { max-width: min(40rem, 44%); }

@media (max-width: 899px) {
  .ijs--leren { padding-block: var(--sectie) calc(min(96vw, 460px) + 1rem); }
  .ijs--leren .ijs__zone { top: auto; height: min(104vw, 500px); }
  .ijs--leren { --mw: calc(100% - 2 * var(--pad) + 1rem); --mh: 88%; --mr: calc(var(--pad) - 0.5rem); --mb: 5%; }
  .ijs--leren .ijs__tekst > *, .ijs--leren .ijs__tekst > .leren__kop { max-width: none; }
  .ijs--leren .ijs__foto { --fx: 70%; }
}

/* ═══ MASKERS (los, zonder ijs) ═══════════════════════ */

.masker { position: relative; overflow: hidden; }
.masker img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%);
  transition: transform 1.2s var(--ease);
}
.masker--1 { -webkit-mask: var(--masker-1) center / 100% 100% no-repeat; mask: var(--masker-1) center / 100% 100% no-repeat; }
.masker--2 { -webkit-mask: var(--masker-2) center / 100% 100% no-repeat; mask: var(--masker-2) center / 100% 100% no-repeat; }
.masker--3 { -webkit-mask: var(--masker-3) center / 100% 100% no-repeat; mask: var(--masker-3) center / 100% 100% no-repeat; }

/* ═══ 2. DIT MAAK JE HIER (variant "verhaal", gekozen 29 sept 2026) ════
   De kop blijft staan, het werkwoord en de tekst wisselen mee met de foto in beeld. */

.cool--klein { white-space: nowrap; }
.maak--verhaal { background: var(--ice-soft); overflow: clip; }
.verhaal { display: grid; gap: 2.5rem; }
.verhaal__kop { margin-top: 0.25rem; }
.verhaal__woord { display: inline-block; overflow: clip; overflow-clip-margin: 0.1em; vertical-align: bottom; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.verhaal__woord > span { display: inline-block; }
.verhaal__tekst { margin-top: 1.5rem; font-size: var(--t-1); line-height: 1.5; max-width: 34ch; min-height: 9em; color: var(--ink); font-weight: 500; }
.verhaal__beelden { display: grid; gap: clamp(3.5rem, 12vh, 9rem); }
.verhaal__stuk .masker { aspect-ratio: 1.18; }
.verhaal__onderschrift { display: grid; gap: 0.35rem; margin-top: 1.1rem; max-width: 32rem; }
.verhaal__onderschrift strong { font: 700 var(--t-2)/1.05 var(--display); color: var(--brand); }
.verhaal__onderschrift span { color: var(--muted); line-height: 1.5; }
.verhaal__vast .verhaal__kop, .verhaal__vast .verhaal__tekst { display: none; }
@media (min-width: 900px) {
  .verhaal { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .verhaal__vast { position: sticky; top: calc(var(--kop-h) + 14vh); }
  .verhaal__vast .verhaal__kop, .verhaal__vast .verhaal__tekst { display: block; }
  .verhaal__beelden { padding-block: 8vh 14vh; }
  .verhaal__stuk:nth-child(even) { margin-left: 14%; }
  .verhaal__stuk:nth-child(odd)  { margin-right: 6%; }
  .verhaal__stuk:nth-child(2) .masker { aspect-ratio: 0.9; }
  /* onderschriften blijven voor schermlezers, de vaste kop vertelt het visueel */
  .verhaal__onderschrift { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
  .verhaal__stuk figure { transition: opacity .6s var(--ease); }
  .js-verhaal .verhaal__stuk:not(.is-actief) figure { opacity: 0.35; }
}

/* ═══ 3. VACATURES ═════════════════════════════════════ */

.vac { background: var(--paper-2); }
.vac__kop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.vac__aantal {
  display: inline-grid; place-items: center; vertical-align: top;
  min-width: 1.5em; height: 1.5em; padding-inline: 0.3em; margin-left: 0.15em;
  font: 700 0.34em/1 var(--sans); color: var(--white); background: var(--brand); border-radius: 99px;
  transform: translateY(0.35em);
}
.vac__lijst { border-top: 1px solid var(--line); }
.vac__lijst li { border-bottom: 1px solid var(--line); }
.vacature {
  position: relative; display: grid; gap: 0.5rem 2rem; align-items: center;
  padding: clamp(1.4rem, 2.4vw, 2rem) 3.5rem clamp(1.4rem, 2.4vw, 2rem) 0;
  color: var(--ink); text-decoration: none;
  transition: background-color .45s var(--ease), padding .6s var(--ease);
}
.vacature__groep { font: 700 var(--t-s)/1 var(--sans); color: var(--brand); text-transform: uppercase; letter-spacing: 0.07em; }
.vacature__titel { font: 800 var(--t-2)/1.08 var(--sans); letter-spacing: -0.03em; color: var(--brand); }
.vacature__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vacature__meta span {
  font: 500 var(--t-s)/1 var(--sans); color: var(--ink);
  padding: 0.5rem 0.65rem; border-radius: 2px; background: color-mix(in oklab, var(--ice) 55%, var(--paper));
}
.vacature__pijl {
  position: absolute; right: 0.5rem; top: 50%; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem;
  display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--ice) 55%, var(--paper));
  transition: background-color .45s var(--ease), transform .6s var(--ease);
}
.vacature__pijl::before {
  content: ""; width: 9px; height: 9px; border-top: 1.5px solid var(--brand); border-right: 1.5px solid var(--brand);
  transform: translateX(-2px) rotate(45deg);
}
.vacature:hover { background: color-mix(in oklab, var(--ice) 45%, var(--paper-2)); padding-left: 1.25rem; }
.vacature:hover .vacature__pijl { background: var(--brand); transform: translateX(-0.25rem); }
.vacature:hover .vacature__pijl::before { border-color: var(--white); }
@media (min-width: 900px) {
  .vacature { grid-template-columns: 8rem minmax(0, 1fr) auto; padding-right: 5rem; }
}

.vac__open { margin-top: 2rem; font-size: var(--t-1); color: var(--muted); max-width: 62ch; }
.vac__open a { font-weight: 700; }

.sollic {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2.5rem);
  background: color-mix(in oklab, var(--ice) 40%, var(--paper)); border-radius: 6px;
}
.sollic__kop { font: 800 var(--t-1)/1.2 var(--sans); letter-spacing: -0.02em; color: var(--brand); }
.sollic__stappen { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.sollic__stappen li { line-height: 1.5; color: var(--muted); max-width: 40ch; position: relative; }
.sollic__stappen strong { display: block; color: var(--ink); font-weight: 700; }
.sollic__voorwaarden { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in oklab, var(--brand) 16%, transparent); color: var(--muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; }
.sollic__voorwaarden .lees { min-height: 0; }
@media (min-width: 900px) {
  .sollic__stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  /* pijltje tussen de stappen: de volgorde telt, zonder cijfers */
  .sollic__stappen li + li::before {
    content: ""; position: absolute; left: -1.6rem; top: 0.55em; width: 8px; height: 8px;
    border-top: 1.5px solid var(--brand-mid); border-right: 1.5px solid var(--brand-mid); transform: rotate(45deg);
  }
}

.vac__leeg {
  display: grid; gap: 1rem; justify-items: start; max-width: 40rem;
  padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.vac__leeg[hidden] { display: none; }
.vac__leeg-kop { font: 800 var(--t-2)/1.1 var(--sans); letter-spacing: -0.03em; color: var(--brand); }
.vac__leeg p:not(.vac__leeg-kop) { color: var(--muted); }
.vac__leeg .knop { margin-top: 0.5rem; }

/* ═══ 4. WIE WE ZOEKEN (blauw) ═════════════════════════ */

.wie { background: var(--brand); color: var(--white); }
.wie .kop-2 { color: var(--white); }
.wie .inleiding { color: var(--op-donker); }
.wie__kop { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 900px) { .wie__kop { grid-template-columns: 1.1fr 1fr; align-items: end; } }

.rollen { border-top: 1px solid var(--lijn-donker); margin-bottom: 2.5rem; }
.rollen li { border-bottom: 1px solid var(--lijn-donker); }
.rol {
  display: grid; gap: 0.4rem 2rem; align-items: baseline; position: relative;
  padding-block: clamp(1.3rem, 2.4vw, 2rem); padding-right: 3rem; color: var(--white); text-decoration: none;
}
.rol__naam { font: 700 clamp(1.6rem, 1rem + 2.2vw, 3rem)/1.02 var(--display); transition: transform .7s var(--ease); }
.rol__wat { color: var(--op-donker); line-height: 1.5; max-width: 46ch; }
.rol__wat .cool { color: var(--brand); padding-inline: 0.12em; }
.rol__pijl {
  position: absolute; right: 0.25rem; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-top: 1.5px solid var(--ice); border-right: 1.5px solid var(--ice); transform: rotate(45deg);
  transition: transform .6s var(--ease);
}
.rol:hover .rol__naam, .rol:focus-visible .rol__naam { transform: translateX(0.5rem); }
.rol:hover .rol__pijl { transform: translateX(0.35rem) rotate(45deg); }
@media (min-width: 900px) { .rol { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; } }

/* ═══ 6. KLEIN TEAM ═══════════════════════════════════ */

.klein { background: var(--paper); }
.klein__raster { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.klein__stelling { margin-top: 1.75rem; font-size: var(--t-1); line-height: 1.5; max-width: 30ch; color: var(--ink); font-weight: 500; }
.klein__foto { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 26rem; }
.klein__foto .masker { aspect-ratio: 0.9; }

.punten { display: grid; align-content: start; }
.punt {
  display: grid; gap: 0.6rem;
  padding-block: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--line);
}
.punt:last-child { border-bottom: 1px solid var(--line); }
.punt__kop { font: 800 var(--t-2)/1.05 var(--sans); letter-spacing: -0.03em; color: var(--brand); }
.punt p { color: var(--muted); max-width: 42ch; line-height: 1.55; }

.feiten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line);
}
.feiten div { background: var(--paper); padding: 1.25rem 1.25rem 1.4rem; display: grid; gap: 0.5rem; }
.feiten dt { font: 700 0.75rem/1.2 var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.feiten dd { font: 800 var(--t-2)/1 var(--sans); letter-spacing: -0.03em; color: var(--brand); }

@media (min-width: 900px) {
  .klein__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 7vw, 7rem); }
  .punten { padding-top: clamp(6rem, 12vw, 11rem); }
  .feiten { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .klein__foto { margin-left: clamp(0rem, 4vw, 4rem); }
}

/* ═══ 7. WAT WIJ VERWACHTEN ═══════════════════════════ */

.verwacht { background: var(--paper-2); overflow: clip; }
.verwacht__raster { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
/* smallere, gecentreerde kolom (29 sept 2026): kop, intro, checklist en slot op één linkerlijn */
.wrap.verwacht__raster { max-width: calc(46rem + 2 * var(--pad)); }
.verwacht__kop { display: grid; gap: 1.25rem; align-content: start; }
.eisen { display: grid; }
.eisen li {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(1rem, 2.4vw, 1.75rem);
  padding-block: clamp(0.9rem, 1.8vw, 1.4rem); border-bottom: 1px solid color-mix(in oklab, var(--brand) 20%, transparent);
  font: 700 clamp(1.45rem, 0.95rem + 1.8vw, 2.6rem)/1.08 var(--display); color: var(--brand);
}
.eisen li:first-child { border-top: 1px solid color-mix(in oklab, var(--brand) 20%, transparent); }
/* vakje: gevuld vlak zonder rand; wordt blauw met een vinkje zodra de regel is afgevinkt */
.vink {
  display: grid; place-items: center; flex: none;
  width: clamp(2.1rem, 1.5rem + 1.6vw, 3.1rem); aspect-ratio: 1; border-radius: 4px;
  background: color-mix(in oklab, var(--ice) 70%, var(--paper));
  transition: background-color .45s var(--ease), transform .6s var(--ease);
}
.vink svg { width: 62%; height: auto; overflow: visible; }
.vink path {
  fill: none; stroke: var(--white); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 0;
  transition: stroke-dashoffset .55s var(--ease) .12s;
}
.eisen li > span:last-child { transition: color .5s var(--ease); text-wrap: balance; }
.eisen li.is-af .vink { background: var(--brand); transform: rotate(-4deg); }
/* alleen met JS begint een regel onafgevinkt; zonder JS of met rustige beweging staat alles aan */
.js-vink .eisen li:not(.is-af) .vink path { stroke-dashoffset: 26; }
.js-vink .eisen li:not(.is-af) > span:last-child { color: color-mix(in oklab, var(--brand) 55%, var(--paper-2)); }
.js-vink .eisen li:not(.is-af) .vink { background: color-mix(in oklab, var(--ice) 70%, var(--paper)); }
.eisen li .vink { background: var(--brand); }
.verwacht__slot { font-size: var(--t-1); font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
@media (min-width: 900px) {
  /* kop over de volle breedte, zodat hij altijd op twee regels staat: "Daar staat / iets tegenover." */
  /* inleiding direct onder de kop (29 sept 2026) */
}

/* ═══ 8. ELKE ═════════════════════════════════════════ */

.elke { background: var(--deep); color: var(--white); overflow: clip; isolation: isolate; }
.elke .kop-2 { color: var(--white); }
.boog--ijs { background: var(--ice); }
.elke__raster { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.elke__foto { position: relative; max-width: 24rem; }
.elke__foto .masker { aspect-ratio: 0.78; }
.elke__foto figcaption {
  position: absolute; left: 8%; bottom: 6%;
  font: 700 var(--t-2)/1 var(--display); color: var(--brand);
  background: var(--marker); padding: 0.3em 0.5em 0.35em; transform: rotate(-2deg);
}
.elke__lede { margin-top: 1.5rem; font-size: var(--t-1); line-height: 1.5; color: var(--op-donker); max-width: 36ch; }
.elke__kanalen { margin-top: clamp(2rem, 4vw, 3rem); display: grid; border-top: 1px solid var(--lijn-donker); max-width: 36rem; }
.kanaal {
  display: grid; grid-template-columns: 9rem 1fr auto; align-items: center; gap: 1rem;
  min-height: 64px; padding-block: 0.9rem; border-bottom: 1px solid var(--lijn-donker);
  color: var(--white); text-decoration: none;
}
.kanaal::after {
  content: ""; width: 8px; height: 8px; margin-right: 0.35rem;
  border-top: 1.5px solid var(--ice); border-right: 1.5px solid var(--ice); transform: rotate(45deg);
  transition: transform .5s var(--ease);
}
.kanaal:hover::after { transform: translateX(0.35rem) rotate(45deg); }
.kanaal__wat { font: 700 0.8125rem/1 var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ice); }
.kanaal__hoe { font: 700 var(--t-1)/1.2 var(--sans); }
@media (min-width: 900px) {
  .elke__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 8vw, 8rem); }
  .elke__foto { justify-self: end; width: 100%; }
}
@media (max-width: 520px) { .kanaal { grid-template-columns: 1fr auto; } .kanaal__wat { grid-column: 1 / -1; } }

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

.voet { background: var(--deep-3); 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.4fr 1fr 1fr 1fr; } }
.voet__merk img { height: 36px; 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.1rem; }
.voet nav a { display: inline-flex; align-items: center; min-height: 40px; }
.voet__kop { font: 700 0.75rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ice); margin-bottom: 0.75rem; }
.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-size: var(--t-s); color: var(--op-donker);
}

/* ═══ LETTERVARIANT: Cabinet Grotesk in plaats van Armada ════
   Zelfde schakelaar als op de corporate site (?kopletter=armada|cabinet). Cabinet is de standaard
   (29 sept 2026); Armada, zoals in de uitingen, is de variant. Cabinet is smaller, dus de koppen gaan een stap omhoog en krijgen 800 en strakke spatiëring. */
html:not([data-kopletter="armada"]) { --display: var(--sans); }
html:not([data-kopletter="armada"]) :is(.kop-2, .hero__kop, .verhaal__onderschrift strong,
  .vac__leeg-kop, .rol__naam,
  .eisen li, .elke__foto figcaption, .paneel__in > a:not(.knop)) {
  font-weight: 800; letter-spacing: -0.035em;
}
html:not([data-kopletter="armada"]) .hero__kop { font-size: calc(var(--t-h1) * 1.1); line-height: 0.92; letter-spacing: -0.045em; }
html:not([data-kopletter="armada"]) .kop-2 { font-size: calc(var(--t-h2) * 1.1); line-height: 0.94; letter-spacing: -0.042em; }
html:not([data-kopletter="armada"]) :is(.rol__naam, .eisen li) { letter-spacing: -0.03em; }
.wissel button[data-kopletter="armada"] { font-family: "Armada", var(--sans); font-weight: 700; }
.wissel button[data-kopletter="cabinet"] { font-family: var(--sans); font-weight: 800; }

/* Armada-variant gelijk aan de reguliere site (29 sept 2026): koppen Armada, lopende tekst Sunflower Light,
   menu, knoppen, links en labels Roboto Mono in kapitalen. De Cabinet-variant blijft Cabinet. */
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; }
/* informatiekoppen: Sunflower heeft geen 800, dus 700 */
html[data-kopletter="armada"] :is(.vacature__titel, .vac__leeg-kop, .punt__kop, .feiten dd, .sollic__kop) { font-weight: 700; letter-spacing: -0.01em; }
html[data-kopletter="armada"] :is(.knop, .menu > a:not(.knop), .lees, .paneel__in > a:not(.knop), .voet nav a) {
  font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.9rem;
}
html[data-kopletter="armada"] .paneel__in > a:not(.knop) { font-size: 1.05rem; }
/* mono in kapitalen is breder: menu en knoppen op één regel houden */
html[data-kopletter="armada"] :is(.menu > a, .knop) { white-space: nowrap; }
html[data-kopletter="armada"] .menu { gap: clamp(1rem, 1.8vw, 2rem); }
html[data-kopletter="armada"] :is(.menu > a:not(.knop), .menu .knop) { font-size: 0.84rem; }
html[data-kopletter="armada"] :is(.vacature__groep, .feiten dt, .kanaal__wat, .voet__kop, .bovenregel, .kop__label, .menu__tel, .vac__aantal) {
  font-family: var(--mono); font-weight: 500;
}
html[data-kopletter="armada"] .vacature__meta span { font-family: var(--mono); font-weight: 400; }
html[data-kopletter="armada"] :is(.sollic__stappen strong, .stappen li span) { font-weight: 700; }

/* ═══ PRESENTATIESCHAKELAAR + MELDING ══════════════════ */

.presentatie {
  position: fixed; z-index: 150; display: grid; gap: 0.4rem; justify-items: start;
  left: max(1rem, env(safe-area-inset-left, 0px)); bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}
.wissel {
  display: flex; align-items: center; gap: 0.25rem; padding: 0.3rem 0.3rem 0.3rem 0.8rem;
  background: var(--deep-3); color: var(--white); border-radius: 4px;
  box-shadow: 0 12px 30px -12px color-mix(in oklab, var(--deep-3) 70%, transparent);
}
.wissel__lbl { font: 400 0.7rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ice); margin-right: 0.35rem; }
.wissel button {
  min-width: 40px; padding-inline: 0.6rem; min-height: 36px; border: 0; border-radius: 3px; cursor: pointer;
  font: 500 0.875rem/1 var(--mono); color: var(--op-donker); background: transparent;
}
.wissel button[aria-pressed="true"] { background: var(--ice); color: var(--deep-3); }

.melding {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 150; max-width: 22rem;
  padding: 0.85rem 1rem; background: var(--deep-3); color: var(--white); border-radius: 4px; font-size: 0.9375rem;
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.melding.is-zichtbaar { opacity: 1; transform: none; }
/* smal: boven de schakelaars linksonder, anders vallen ze over elkaar */
@media (max-width: 640px) { .melding { bottom: 7rem; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}