/* ==========================================================================
   Baan Talent — front-end v2 (Figma "Baan Talent | Brand", oktober 2026)
   Plain CSS, geen build. Componentblokken zijn bewust los te knippen zodat
   ze later 1-op-1 als block-CSS in het Sage-theme kunnen landen.
   ========================================================================== */

@font-face { font-family: "Metropolis"; src: url("../fonts/metropolis-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("../fonts/metropolis-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("../fonts/metropolis-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("../fonts/metropolis-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("../fonts/metropolis-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }

/* --- Tokens (1-op-1 uit de Figma-variabelen) ----------------------------- */
:root {
  --c-orange: #eb6432;
  --c-sand: #e1ddd3;        /* Westar · grey/85 */
  --c-cream: #f7f5f0;       /* sectie-achtergrond vacatures */
  --c-gallery: #eeeeee;     /* grey/93 */
  --c-ink: #1c1b19;         /* Cod Gray · grey/10 */
  --c-tundora: #444444;     /* grey/27 */
  --c-flint: #726f66;       /* grey/42 */
  --c-body: #5c5c5c;
  --c-navy-ink: #001e3c;    /* filter- en linktekst */
  --c-oyster: #989180;      /* filter-dividers */
  --c-white: #ffffff;
  --c-black: #000000;

  --font: "Metropolis", system-ui, sans-serif;
  --font-2: "Inter", system-ui, sans-serif;

  /* Schaal. Het ontwerp is 1920 breed en in px overgenomen; op een laptop oogt dat ingezoomd.
     --px is één ontwerppixel: tot 760 breed gewoon 1px, daarna loopt hij af tot --k (vanaf 1100, waar de desktopindeling begint).
     Vaste maten staan als calc(n * var(--px)); randen van 1-2px en --vw blijven zoals ze zijn.
     Lopende tekst (17px, intro's 20px) schaalt bewust niet mee: die moet goed leesbaar blijven. */
  --k: .9;
  --px: clamp(calc(var(--k) * 1px), calc(1px - (100vw - 760px) * (1 - var(--k)) / 340), 1px);

  /* Maximale paginabreedte (= ontwerp). --vw is 1vw, maar groeit niet boven 1920. */
  --page: 1920px;
  --vw: min(1vw, calc(var(--page) / 100));
  --gutter: clamp(16 * var(--px), calc(3.6 * var(--vw)), 72 * var(--px));
  --wide: calc(1504 * var(--px));           /* contentbreedte vacaturepagina's (208px marge op 1920) */
  --notch: calc(44.55 * var(--px));
}

/* --- Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--c-white); }
/* Figma rendert de kleine letters van Metropolis ~7% breder dan het webfont;
   deze spatiëring brengt de regelval terug op die van het ontwerp. */
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.3; letter-spacing: .032em; color: var(--c-ink); background: var(--c-white); -webkit-font-smoothing: antialiased; max-width: var(--page); margin-inline: auto; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
button { font: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Typografie (Figma text styles) --------------------------------------- */
.t-h1    { font-size: clamp(44 * var(--px), calc(4.2 * var(--vw)), 80 * var(--px)); font-weight: 600; line-height: .9; letter-spacing: -.02em; text-transform: uppercase; }
.t-h2    { font-size: clamp(36 * var(--px), calc(2.92 * var(--vw)), 56 * var(--px)); font-weight: 600; line-height: .9; letter-spacing: -.01em; text-transform: uppercase; }
.t-h2-md { font-size: clamp(32 * var(--px), calc(2.5 * var(--vw)), 48 * var(--px)); font-weight: 600; line-height: .9; letter-spacing: -.01em; text-transform: uppercase; }
.t-h3    { font-size: clamp(22 * var(--px), calc(1.46 * var(--vw)), 28 * var(--px)); font-weight: 400; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
.t-quote { font-size: clamp(22 * var(--px), calc(1.35 * var(--vw)), 26 * var(--px)); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.t-label { font-size: calc(20 * var(--px)); font-weight: 600; line-height: calc(23 * var(--px)); letter-spacing: .02em; }
.t-large { font-size: 20px; line-height: 1.3; }
.t-link  { font-size: calc(16 * var(--px)); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.accent  { color: var(--c-orange); }

/* --- Button ---------------------------------------------------------------
   Hover: een schuine vlak (M0 0 L w 40 V97 H0) schuift van onder naar binnen.
   Oranje knop → zandkleurig vlak, zandkleurige knop → oranje vlak.          */
.btn {
  --btn-bg: var(--c-orange); --btn-fg: var(--c-white);
  --btn-hover-bg: var(--c-sand); --btn-hover-fg: var(--c-ink);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--px));
  padding: calc(20 * var(--px)) calc(30 * var(--px)); border: 0; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font); font-size: calc(16 * var(--px)); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  transition: color .35s ease;
}
.btn::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 200%;
  background: var(--btn-hover-bg);
  clip-path: polygon(0 0, 100% 41%, 100% 100%, 0 100%);
  transform: translateY(100%); transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.btn:hover, .btn:focus-visible { color: var(--btn-hover-fg); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(-45%); }
.btn:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }
.btn img { width: calc(12 * var(--px)); height: calc(12 * var(--px)); transition: filter .35s ease; }
.btn:hover img, .btn:focus-visible img { filter: brightness(0) saturate(100%); }

.btn--sand  { --btn-bg: var(--c-sand); --btn-fg: var(--c-ink); --btn-hover-bg: var(--c-orange); --btn-hover-fg: var(--c-white); }
.btn--white { --btn-bg: var(--c-white); --btn-fg: var(--c-ink); --btn-hover-bg: var(--c-orange); --btn-hover-fg: var(--c-white); }
.btn--ink   { --btn-bg: var(--c-ink); --btn-fg: var(--c-white); --btn-hover-bg: var(--c-white); --btn-hover-fg: var(--c-ink); }
.btn--sm    { padding: calc(16 * var(--px)); align-items: flex-start; }
.btn--md    { padding: calc(16 * var(--px)) calc(24 * var(--px)); align-items: flex-start; }
.btn--xs    { padding: calc(12 * var(--px)) calc(16 * var(--px)); font-size: calc(13.5 * var(--px)); font-weight: 700; line-height: calc(22.28 * var(--px)); letter-spacing: .11em; }
.btn--block { display: flex; width: 100%; min-height: calc(56 * var(--px)); padding: calc(16 * var(--px)) calc(30 * var(--px)); white-space: normal; text-align: center; }

/* --- Inkeping (diamant op de rechterrand van kaarten) ---------------------- */
.has-notch { position: relative; overflow: hidden; }
.has-notch::after {
  content: ""; position: absolute; right: 0; top: var(--notch-top, 50%);
  width: var(--notch); height: var(--notch);
  background: var(--notch-color, var(--c-cream));
  transform: translate(50%, -50%) rotate(45deg);
}

/* ==========================================================================
   Header
   ========================================================================== */
/* Vast bovenin (Figma-prototype): de pagina scrollt eronderdoor. */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; max-width: var(--page); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--px));
  padding: calc(32 * var(--px)) var(--gutter);
  background: url("../img/header-bg.png") center / 100% 100% no-repeat;
}
.site-header__logo img { width: calc(247 * var(--px)); height: calc(24.9675 * var(--px)); }
.site-nav { display: flex; align-items: center; gap: clamp(24 * var(--px), calc(2.5 * var(--vw)), 48 * var(--px)); } /* 48px op 1920, past nog op 1101 */
.site-nav__link { color: var(--c-white); font-size: calc(16 * var(--px)); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--c-orange); }
.site-nav__toggle { display: none; }

@media (max-width: 1100px) {
  .site-header__logo img { width: calc(190 * var(--px)); height: auto; }
  .site-nav__toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: calc(6 * var(--px));
    width: calc(48 * var(--px)); height: calc(48 * var(--px)); padding: calc(12 * var(--px)); border: 0; background: var(--c-orange); cursor: pointer;
  }
  .site-nav__toggle span { display: block; height: 2px; background: var(--c-white); transition: transform .25s, opacity .25s; }
  .site-nav {
    position: absolute; top: 100%; right: var(--gutter); left: var(--gutter);
    flex-direction: column; align-items: stretch; gap: 0; padding: calc(8 * var(--px)) calc(24 * var(--px)) calc(24 * var(--px));
    background: var(--c-ink); visibility: hidden; opacity: 0; transform: translateY(calc(-8 * var(--px)));
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .site-nav .site-nav__link { padding: calc(18 * var(--px)) 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .site-nav .btn { margin-top: calc(20 * var(--px)); }
  .site-header.is-open .site-nav { visibility: visible; opacity: 1; transform: none; }
  .site-header.is-open .site-nav__toggle span:nth-child(1) { transform: translateY(calc(8 * var(--px))) rotate(45deg); }
  .site-header.is-open .site-nav__toggle span:nth-child(2) { opacity: 0; }
  .site-header.is-open .site-nav__toggle span:nth-child(3) { transform: translateY(calc(-8 * var(--px))) rotate(-45deg); }
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.breadcrumb { display: flex; flex-wrap: wrap; gap: calc(7 * var(--px)); font-size: calc(18 * var(--px)); line-height: 1.3; color: rgba(255, 255, 255, .55); }
.breadcrumb a:hover { color: var(--c-white); }
.breadcrumb [aria-current] { color: var(--c-orange); }

/* ==========================================================================
   Home — stage: hero-beeld staat stil achter hero én "Wij zijn"-blok
   (Figma-prototype). Het beeld wordt later een <video>; de .home-stage__media
   container is daarop voorbereid.
   ========================================================================== */
.home-stage { position: relative; overflow: clip; background: #120d08; } /* margin-bottom -100vh liet het beeld een schermhoogte onder de sectie doorlopen; clip houdt sticky werkend */
.home-stage__media { position: sticky; top: 0; z-index: 0; height: 100vh; margin-bottom: -100vh; overflow: hidden; }
.home-stage__media img, .home-stage__media video { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.home-stage > section { position: relative; z-index: 1; }

.home-hero {
  --h: clamp(760 * var(--px), calc(58.4 * var(--vw)), 1121 * var(--px));
  height: var(--h); overflow: hidden; color: var(--c-white);
}
.home-hero__inner { position: relative; height: 100%; max-width: 1920px; margin: 0 auto; padding: 0 var(--gutter); }
/* --hf = breedte van het kader; de payoff rekent daarmee, zodat hij ook bij een kleinere schaal op het kader blijft staan. */
.home-hero__inner { --hf: min(45.95%, calc(882 * var(--px))); }
.home-hero__frame { position: absolute; top: calc(9.74 * var(--vw)); left: 42.76%; width: var(--hf); height: auto; opacity: .85; }
.home-hero__frame img { width: 100%; height: auto; }
.home-hero__match { position: absolute; top: calc(9.74 * var(--vw) + .0315 * var(--hf)); left: calc(42.76% + .7426 * var(--hf)); width: max(calc(110 * var(--px)), .2162 * var(--hf)); height: auto; }
.home-hero__copy {
  position: absolute; top: clamp(180 * var(--px), calc(15.52 * var(--vw)), 298 * var(--px)); left: var(--gutter);
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(22.2 * var(--px)); width: min(731 * var(--px), calc(100% - 2 * var(--gutter)));
}
.home-hero__sub { font-size: clamp(20 * var(--px), calc(1.46 * var(--vw)), 28 * var(--px)); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }

.logo-strip { position: absolute; left: 0; right: 0; bottom: clamp(48 * var(--px), calc(3.5 * var(--vw)), 66 * var(--px)); }
.logo-strip__label { padding: 0 var(--gutter); margin-bottom: calc(29 * var(--px)); font-size: calc(16 * var(--px)); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.marquee { overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.marquee.is-dragging { cursor: grabbing; }
.marquee__track { display: flex; align-items: center; gap: calc(121 * var(--px)); width: max-content; padding-left: var(--gutter); will-change: transform; }
.marquee__item { flex: none; position: relative; overflow: hidden; }
.marquee__item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.marquee__item img.marquee__crop { position: absolute; max-width: none; }
/* Witte logo's die in Figma als alpha-mask zijn opgebouwd */
.marquee__mask { display: block; width: 100%; height: 100%; background: var(--c-white); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* ==========================================================================
   Home — "Wij zijn Baan Talent"
   ========================================================================== */
.intro { padding: calc(129 * var(--px)) var(--gutter) calc(109 * var(--px)); }
.intro__shape { position: relative; width: min(620 * var(--px), 100%); min-height: calc(660 * var(--px)); padding: calc(56 * var(--px)) calc(150 * var(--px)) calc(110 * var(--px)) calc(60 * var(--px)); }
.intro__shape::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("../img/wij-zijn-shape.svg") 0 0 / 100% 100% no-repeat; }
.intro__shape > * { position: relative; }
.intro__title { font-size: clamp(36 * var(--px), calc(2.5 * var(--vw)), 48 * var(--px)); font-weight: 400; line-height: .9; letter-spacing: -.01em; text-transform: uppercase; color: var(--c-black); }
.intro__title b { font-weight: 600; color: var(--c-orange); }
.intro__body { display: grid; gap: calc(26 * var(--px)); max-width: calc(380 * var(--px)); margin: calc(30 * var(--px)) 0 0 calc(4 * var(--px)); font-size: 17px; line-height: 1.4; color: var(--c-black); }

/* ==========================================================================
   Home — werkgevers / kandidaten
   ========================================================================== */
.split { position: relative; overflow: hidden; min-height: clamp(760 * var(--px), calc(56.25 * var(--vw)), 1080 * var(--px)); background: var(--c-tundora); color: var(--c-white); }
.split__photo {
  position: absolute; top: 0; bottom: 0; left: 29.64%; right: -21.3%;
  background: url("../img/professional-tegenlicht.jpg") 0 40% / 100% 136.17% no-repeat;
}
.split__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .7) 32.064%, rgba(102, 102, 102, 0) 90%); }
.split__cut { position: absolute; top: 0; bottom: 0; left: -8.13%; width: 65.13%; }
.split__cut img { width: 100%; height: 100%; object-fit: fill; }
.split__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: end; min-height: inherit; padding: 0 var(--gutter) clamp(56 * var(--px), calc(4.2 * var(--vw)), 80 * var(--px)); }
.split__card { display: flex; flex-direction: column; gap: calc(56 * var(--px)); width: min(576 * var(--px), 100%); padding: calc(40 * var(--px)); }
.split__card:last-child { justify-self: end; width: min(570 * var(--px), 100%); }
.split__head { display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--px)); }
.split__body { display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--px)); }
/* Hover (Figma-prototype): de linkerhelft schuift over de rechter heen of wijkt
   ervoor, en alleen de kant die wijkt dimt. De linker hit-zone heeft dezelfde
   schuine clip-path en beweging als .split__cut (pointer-events volgen de
   clip-path), dus de hover volgt de snede, ook terwijl die schuift. De rechter
   hit-zone ligt eronder over het hele vlak. Alleen muis, alleen brede schermen. */
.split { --split-ease: cubic-bezier(.33, 1, .68, 1); --split-dur: .9s; }
.split__photo { isolation: isolate; } /* houdt de dim-laag van de rechterfoto onder .split__cut */
.split__photo::before,
.split__cut::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transition: opacity var(--split-dur) ease; }
.split__cut,
.split__hit--left { transition: transform var(--split-dur) var(--split-ease); will-change: transform; }
.split__hit { position: absolute; top: 0; bottom: 0; }
.split__hit--right { z-index: 1; left: 0; right: 0; }
.split__hit--left { z-index: 2; left: -8.13%; width: 65.13%; }
.split__grid { z-index: 3; pointer-events: none; }
.split__card { pointer-events: auto; }
@media (hover: hover) and (min-width: 1101px) {
  .split:has(.split__hit--left:hover, .split__card:not(.split__card--right):hover) :is(.split__cut, .split__hit--left) { transform: translateX(12%); }
  .split:has(.split__hit--left:hover, .split__card:not(.split__card--right):hover) .split__photo::before { opacity: 1; }
  .split:has(.split__hit--right:hover, .split__card--right:hover) :is(.split__cut, .split__hit--left) { transform: translateX(-12%); }
  .split:has(.split__hit--right:hover, .split__card--right:hover) .split__cut::after { opacity: 1; }
}
.tag { display: inline-flex; padding: calc(8 * var(--px)); background: var(--c-orange); color: var(--c-white); font-size: calc(16 * var(--px)); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }

/* ==========================================================================
   Vacature-carrousel ("Vacatures geschikt voor jou")
   ========================================================================== */
.jobs-rail { background: var(--c-cream); padding: calc(210 * var(--px)) 0 calc(185 * var(--px)); }
.jobs-rail__title { max-width: calc(615 * var(--px) + 2 * var(--gutter)); padding: 0 var(--gutter); color: var(--c-orange); }
.jobs-rail__scroller {
  display: flex; gap: calc(24 * var(--px)); margin-top: calc(72 * var(--px)); padding: 0 var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; cursor: grab;
}
.jobs-rail__scroller::-webkit-scrollbar { display: none; }
.jobs-rail__scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.jobs-rail__scroller.is-dragging * { pointer-events: none; }
.jobs-rail__cta { margin: calc(72 * var(--px)) var(--gutter) 0; }

.job-card {
  flex: none; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(32 * var(--px));
  width: min(580 * var(--px), 86vw); min-height: calc(397 * var(--px)); padding: calc(64 * var(--px)) calc(80 * var(--px)) calc(64 * var(--px)) calc(56 * var(--px));
  background: var(--c-white);
}
.job-card__text { display: flex; flex-direction: column; gap: calc(24 * var(--px)); }
.job-card__title { font-size: calc(28 * var(--px)); font-weight: 700; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; color: var(--c-ink); }
.job-card__desc { font-size: 17px; line-height: 1.3; color: var(--c-body); }
.job-card--all { background: var(--c-orange); }
.job-card--all .job-card__title { font-size: calc(56 * var(--px)); font-weight: 600; line-height: .9; }
.job-card--all .job-card__desc { color: var(--c-gallery); }

.job-meta { display: flex; flex-wrap: wrap; gap: calc(10 * var(--px)); color: var(--c-orange); font-size: calc(16 * var(--px)); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.job-meta li { display: flex; align-items: center; gap: calc(3 * var(--px)); }
.job-meta img { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
ul.job-meta { margin: 0; padding: 0; list-style: none; }

/* ==========================================================================
   CTA-banner + footer (gedeeld door alle pagina's)
   ========================================================================== */
.cta-banner { position: relative; z-index: 1; overflow: hidden; min-height: calc(626 * var(--px)); color: var(--c-white); background: #2f2a26; }
.cta-banner__bg { position: absolute; inset: 0; background: url("../img/professional-in-de-bouw.jpg") 0 34.5% / 100.73% 212.88% no-repeat; }
.cta-banner__bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(92.14deg, rgba(170, 69, 31, .2) .6%, rgba(0, 0, 0, 0) 65.22%); }
.cta-banner__bg::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cta-banner__frame { position: absolute; left: 54.06%; top: calc(17 * var(--px)); width: calc(699 * var(--px)); height: calc(592 * var(--px)); max-width: none; }
.cta-banner__match { position: absolute; left: calc(54.06% + 528 * var(--px)); top: calc(64 * var(--px)); width: calc(145 * var(--px)); height: calc(103 * var(--px)); }
.cta-banner__copy {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: calc(24.7 * var(--px));
  max-width: calc(719 * var(--px)); padding: calc(167 * var(--px)) calc(64 * var(--px)) calc(120 * var(--px)) max(var(--gutter), calc(9.69 * var(--vw)));
}
.cta-banner__copy h2 { max-width: calc(423 * var(--px)); }
.cta-banner__copy p { max-width: calc(470 * var(--px)); color: rgba(255, 255, 255, .75); }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: calc(24 * var(--px)); }

/* Footer: secundaire tekst op 16px, woordmerk groter dan de links, en een eigen onderbalk met een lijn erboven. */
.site-footer { position: relative; z-index: 1; padding: calc(80 * var(--px)) var(--gutter) calc(32 * var(--px)); font-size: 16px; line-height: 1.4; background: var(--c-black); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .6); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 889fr) 282fr 274fr 269fr; gap: calc(48 * var(--px)) calc(24 * var(--px)); }
.site-footer__brand { font-size: calc(28 * var(--px)); line-height: 1; letter-spacing: .02em; color: var(--c-white); }
.site-footer__brand b { font-weight: 800; color: var(--c-orange); }
.site-footer__payoff { max-width: calc(320 * var(--px)); margin-top: calc(20 * var(--px)); font-family: var(--font-2); font-size: 15px; line-height: 1.6; }
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: calc(12 * var(--px)); }
.site-footer__heading { margin-bottom: calc(4 * var(--px)); color: var(--c-white); }
.site-footer__col a:hover { color: var(--c-white); }
.site-footer__social { display: flex; align-items: center; gap: 10px; }
.site-footer__social img { flex: none; width: calc(22 * var(--px)); height: calc(22 * var(--px)); }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(12 * var(--px)) calc(32 * var(--px)); margin-top: calc(72 * var(--px)); padding-top: calc(24 * var(--px)); border-top: 1px solid rgba(255, 255, 255, .12); font-size: 15px; }
.site-footer__bottom .t-link { font-size: 13px; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: calc(8 * var(--px)) calc(28 * var(--px)); }

/* ==========================================================================
   Vacatures — overzicht
   ========================================================================== */
.page-hero { position: relative; overflow: hidden; color: var(--c-white); }
.jobs-hero { height: calc(616 * var(--px)); background: #2b2826 url("../img/ov-export.jpg") center / cover no-repeat; }
.jobs-hero::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.jobs-hero__inner { position: relative; height: 100%; max-width: 1920px; margin: 0 auto; }
.jobs-hero__frame { position: absolute; left: 50.5%; top: calc(121 * var(--px)); width: calc(735.5 * var(--px)); height: calc(450 * var(--px)); max-width: none; }
.jobs-hero__match { position: absolute; left: calc(50.5% + 26.5 * var(--px)); top: calc(456.16 * var(--px)); width: calc(125.398 * var(--px)); height: calc(89.0625 * var(--px)); }
.jobs-hero__heading { position: absolute; left: calc(var(--gutter) + 8 * var(--px)); top: calc(221 * var(--px)); display: flex; flex-direction: column; gap: calc(8 * var(--px)); }
.jobs-hero__heading .t-h1 { line-height: 1.12; }
.search-field { position: absolute; left: max(var(--gutter), 11.35%); top: calc(511 * var(--px)); width: min(578 * var(--px), calc(100% - 2 * var(--gutter))); }
.search-field input {
  width: 100%; padding: calc(16 * var(--px)) calc(24 * var(--px)); border: 0; border-bottom: 1px solid #c7c7c7; border-radius: 0;
  background: rgba(255, 255, 255, .1); color: var(--c-white);
  font-family: var(--font); font-size: calc(20 * var(--px)); font-weight: 600; line-height: calc(23 * var(--px)); letter-spacing: -.01em;
}
.search-field input::placeholder { color: var(--c-white); opacity: 1; }
.search-field input:focus { outline: none; border-bottom-color: var(--c-orange); background: rgba(255, 255, 255, .16); }

.jobs-layout { display: grid; grid-template-columns: calc(377 * var(--px)) minmax(0, calc(1036 * var(--px))); justify-content: space-between; gap: calc(64 * var(--px)); max-width: var(--wide); margin: 0 auto; padding: calc(63 * var(--px)) var(--gutter) calc(58 * var(--px)); box-sizing: content-box; }

.filters { display: flex; flex-direction: column; gap: calc(8 * var(--px)); }
.filters__head { display: flex; flex-direction: column; gap: calc(24 * var(--px)); }
.filters__title { color: #343434; }
.filters__reset { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--c-orange); cursor: pointer; }
.filters__reset:hover { text-decoration: underline; }
.filter-group { padding: calc(24 * var(--px)) 0; border: 0; margin: 0; }
.filter-group + .filter-group--ruled, .filter-group--ruled { border-top: 1px solid var(--c-oyster); }
.filter-group:last-child { border-bottom: 1px solid var(--c-oyster); }
.filter-group__toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--c-navy-ink); font-family: var(--font); font-size: calc(20 * var(--px)); font-weight: 600; line-height: calc(23 * var(--px)); letter-spacing: -.01em; text-align: left;
}
.filter-group__icon { position: relative; width: calc(17 * var(--px)); height: calc(3 * var(--px)); background: var(--c-navy-ink); }
.filter-group__icon::after { content: ""; position: absolute; inset: 0; background: inherit; transform: rotate(90deg); transition: transform .2s; }
.filter-group[aria-expanded="true"] .filter-group__icon::after, .filter-group__toggle[aria-expanded="true"] .filter-group__icon::after { transform: rotate(0); }
.filter-group__options { display: flex; flex-direction: column; gap: calc(8 * var(--px)); margin-top: calc(20 * var(--px)); }
.filter-group__options[hidden] { display: none; }
.check { display: inline-flex; align-items: center; gap: calc(17 * var(--px)); cursor: pointer; color: var(--c-navy-ink); font-size: calc(16 * var(--px)); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: calc(20 * var(--px)); height: calc(20 * var(--px)); margin: 0; border: 1px solid #a0a6aa; border-radius: 2px; background: var(--c-white) center / calc(12 * var(--px)) no-repeat; cursor: pointer; }
.check input:checked { border-color: var(--c-orange); background-color: var(--c-orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.2 4.6 9.2 10.5 2.8' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); }
.check input:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }

.job-list { display: flex; flex-direction: column; gap: calc(16 * var(--px)); }
.job-row { display: flex; justify-content: space-between; align-items: stretch; gap: calc(32 * var(--px)); padding: calc(40 * var(--px)); background: var(--c-cream); transition: background-color .25s ease; }
.job-row:hover { background: var(--c-sand); }
.job-row[hidden] { display: none; }
.job-row__text { display: flex; flex-direction: column; gap: calc(24 * var(--px)); max-width: calc(493 * var(--px)); }
.job-row__title { color: var(--c-ink); }
.job-row__meta { display: flex; flex-wrap: wrap; gap: calc(6 * var(--px)) calc(40 * var(--px)); margin: 0; padding: 0; list-style: none; color: var(--c-orange); font-size: calc(16 * var(--px)); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.job-row__desc { color: var(--c-body); }
.job-row__actions { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(16 * var(--px)); width: calc(192 * var(--px)); }
.apply-link { display: inline-flex; align-items: flex-start; gap: calc(7 * var(--px)); color: var(--c-tundora); white-space: nowrap; }
.apply-link a { display: inline-flex; align-items: center; gap: calc(8 * var(--px)); color: var(--c-navy-ink); font-weight: 700; }
.apply-link a:hover { color: var(--c-orange); }
.apply-link img { width: calc(16 * var(--px)); height: calc(16 * var(--px)); transition: transform .2s; }
.apply-link a:hover img { transform: translateX(calc(3 * var(--px))); }
.job-list__empty { padding: calc(40 * var(--px)); background: var(--c-cream); color: var(--c-body); }

/* Teller + knop interne vacatures. "Intern" is in RecruitCRM een vakgebied,
   maar staat hier bewust los van de vakgebiedfilters (call 3 nov). */
.job-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(16 * var(--px)); margin-bottom: calc(16 * var(--px)); }
.job-toolbar__count { color: var(--c-flint); }
.job-toolbar__intern[aria-pressed="true"] { --btn-bg: var(--c-ink); --btn-fg: var(--c-white); }
.job-more { display: flex; justify-content: center; margin-top: calc(32 * var(--px)); }
.job-more[hidden] { display: none; }

/* Afstand: eerst een vertrekpunt, dan pas de kilometerfilters */
.locate { display: flex; flex-direction: column; align-items: flex-start; gap: calc(8 * var(--px)); margin-bottom: calc(12 * var(--px)); }
.locate__gps { padding: 0; border: 0; background: none; color: var(--c-orange); cursor: pointer; }
.locate__gps:hover { text-decoration: underline; }
.locate__label { font-size: calc(16 * var(--px)); color: var(--c-flint); }
.locate__row { display: flex; width: 100%; }
.locate__input { flex: 1; min-width: 0; height: calc(40 * var(--px)); padding: calc(8 * var(--px)) calc(12 * var(--px)); border: 1px solid var(--c-oyster); border-right: 0; border-radius: 0; background: var(--c-white); font: calc(16 * var(--px))/1 var(--font); letter-spacing: inherit; color: var(--c-ink); }
.locate__input:focus { outline: none; border-color: var(--c-orange); }
.locate__go { flex: none; display: grid; place-items: center; width: calc(40 * var(--px)); height: calc(40 * var(--px)); border: 0; border-radius: 0; background: var(--c-orange); cursor: pointer; }
.locate__go img { width: calc(12 * var(--px)); height: calc(12 * var(--px)); }
.locate__status { font-size: calc(14 * var(--px)); color: var(--c-flint); }
.locate__status.is-set { color: var(--c-navy-ink); font-weight: 600; }
.locate__status.is-error { color: #b3261e; }
.check:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.check input:disabled { cursor: not-allowed; }

/* ==========================================================================
   Vacature — detail
   ========================================================================== */
.job-hero {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: calc(168 * var(--px)) var(--gutter) calc(22 * var(--px)) max(var(--gutter), calc(10.83 * var(--vw)));
  background: linear-gradient(101.77deg, #1c1b19 1.54%, #494844 98.72%);
}
.job-hero__text { display: flex; flex-direction: column; gap: calc(25 * var(--px)); max-width: calc(1248 * var(--px)); }
.job-hero__lead { max-width: calc(560 * var(--px)); color: rgba(255, 255, 255, .8); }
.job-facts { display: flex; flex-wrap: wrap; gap: calc(24 * var(--px)) calc(80 * var(--px)); margin: calc(41 * var(--px)) 0 0; }
.job-facts div { display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.job-facts dt { color: var(--c-flint); font-size: calc(16 * var(--px)); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.job-facts dd { margin: 0; color: var(--c-white); font-size: calc(20 * var(--px)); font-weight: 600; line-height: calc(23 * var(--px)); letter-spacing: -.01em; }
.quick-nav { display: flex; flex-wrap: wrap; align-items: center; gap: calc(16 * var(--px)) calc(32 * var(--px)); margin-top: calc(81 * var(--px)); font-size: calc(16 * var(--px)); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.quick-nav__label { width: calc(125 * var(--px)); color: var(--c-flint); }
.quick-nav a { color: var(--c-white); transition: color .2s; }
.quick-nav a:hover, .quick-nav a.is-active { color: var(--c-orange); }

.job-detail { display: grid; grid-template-columns: minmax(0, calc(731 * var(--px))) calc(430 * var(--px)); justify-content: space-between; gap: calc(64 * var(--px)); max-width: calc(1497 * var(--px)); margin: 0 auto; padding: calc(108 * var(--px)) var(--gutter) calc(126 * var(--px)); box-sizing: content-box; }
.article { display: flex; flex-direction: column; gap: calc(18.7 * var(--px)); }
.article__intro { font-size: 20px; color: var(--c-ink); }
.article p { color: var(--c-tundora); }
.article p.muted { color: var(--c-flint); }
.article h2 { padding-top: calc(44 * var(--px)); color: var(--c-ink); scroll-margin-top: calc(100 * var(--px)); }
.article > :first-child > h2:first-child { padding-top: 0; } /* vacature zonder omschrijving: geen witruimte boven de procedure */
.article ul.bullets { display: flex; flex-direction: column; gap: calc(12 * var(--px)); margin: 0; padding: calc(5 * var(--px)) 0 0 calc(27 * var(--px)); color: var(--c-tundora); }
.article ul.bullets li::marker { font-size: .9em; }
.article p + p { margin-top: 0; }
.article__p-top { padding-top: calc(5 * var(--px)); }

.perk-list { display: flex; flex-direction: column; gap: calc(8 * var(--px)); margin: 0; padding: 0; list-style: none; }
.perk { --notch: calc(22.24 * var(--px)); --notch-color: var(--c-white); padding: calc(28 * var(--px)) calc(30 * var(--px)); background: var(--c-gallery); }
.perk--step { background: var(--c-sand); }
.perk__title { color: var(--c-ink); }
.perk__text { color: var(--c-flint); }
.procedure { display: flex; flex-direction: column; gap: calc(24 * var(--px)); }

/* FAQ per vacature (concept, nog niet in Figma): <details> + FAQPage-schema */
.faq { display: flex; flex-direction: column; }
.faq h2 { margin-bottom: calc(18.7 * var(--px)); }
.faq__item { border-top: 1px solid var(--c-oyster); }
.faq__item:last-child { border-bottom: 1px solid var(--c-oyster); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--px)); padding: calc(20 * var(--px)) 0; color: var(--c-navy-ink); cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--c-orange); }
.faq__q .filter-group__icon { flex: none; }
.faq__item[open] .filter-group__icon::after { transform: rotate(0); }
.faq__a { padding: 0 calc(48 * var(--px)) calc(24 * var(--px)) 0; }
.share-bar { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--px)); min-height: calc(53 * var(--px)); padding: calc(10 * var(--px)) calc(24 * var(--px)) calc(11 * var(--px)); background: var(--c-orange); color: var(--c-white); }
.share-bar__links { display: flex; gap: calc(10 * var(--px)); }
.share-bar__links a { display: block; width: calc(32 * var(--px)); height: calc(32 * var(--px)); border-radius: 50%; transition: transform .2s; }
.share-bar__links a:hover { transform: translateY(-2px); }
.share-bar__links img { width: calc(32 * var(--px)); height: calc(32 * var(--px)); }

/* Plakt 32px onder de vaste header; de padding-top (uitlijning met de tekst bij het openen) wordt van top afgetrokken. */
.apply-rail { position: sticky; top: calc(var(--header-h, calc(120 * var(--px))) + 32 * var(--px) - 76 * var(--px)); align-self: start; display: flex; flex-direction: column; gap: calc(40 * var(--px)); padding-top: calc(76 * var(--px)); }
.apply-box { display: flex; flex-direction: column; gap: 2px; padding: calc(34 * var(--px)) calc(58 * var(--px)) calc(40 * var(--px)) calc(34 * var(--px)); background: var(--c-ink); color: var(--c-white); }

.apply-box h2 { padding-top: calc(13 * var(--px)); }
.apply-box p { padding-top: calc(11 * var(--px)); color: rgba(255, 255, 255, .72); }
.apply-box p.apply-box__eyebrow { padding-top: 0; color: var(--c-orange); }
.apply-box .btn--block:first-of-type { margin-top: calc(24 * var(--px)); }
.contact-card { --notch: calc(46.24 * var(--px)); --notch-color: var(--c-white); --notch-top: calc(321 * var(--px)); background: var(--c-sand); }
.contact-card__photo { height: calc(321 * var(--px)); background: url("../img/contactpersoon.jpg") 0 42.7% / 100% 200.91% no-repeat; }
.contact-card__body { display: flex; flex-direction: column; gap: calc(3 * var(--px)); padding: calc(27 * var(--px)) calc(34 * var(--px)) calc(32 * var(--px)); }
.contact-card__label { color: var(--c-flint); }
.contact-card__name { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--px)); padding-top: calc(6 * var(--px)); font-size: calc(28 * var(--px)); font-weight: 700; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
.contact-card__name img { width: calc(24 * var(--px)); height: calc(24 * var(--px)); }
.contact-card__role { color: var(--c-flint); }
.contact-card__links { display: flex; flex-direction: column; gap: calc(6 * var(--px)); padding-top: calc(16 * var(--px)); color: var(--c-orange); }
.contact-card__links a:hover { text-decoration: underline; }

/* ==========================================================================
   Pagina-hero (Contact, Over ons, Diensten, Dienst-detail)
   Lagen zoals in Figma: geëxporteerde achtergrond → blur-vlak met donkere
   verloop links → scherpe foto in kader → tekst.
   ========================================================================== */
.hero { position: relative; overflow: hidden; height: calc(616 * var(--px)); color: var(--c-white); background: #2b2826; }
.hero__bg { position: absolute; top: 0; left: 50%; width: 1920px; min-width: 100%; height: 100%; max-width: none; object-fit: cover; transform: translateX(-50%); }
.hero__shade {
  --shade: linear-gradient(95.78deg, #1c1b19 1.54%, rgba(73, 72, 68, 0) 98.72%);
  position: absolute; inset: 0;
  background: var(--shade) 0 0 / var(--shade-w, calc(971 * var(--px))) 100% no-repeat, rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero__frame { position: absolute; left: 50.5%; top: calc(121 * var(--px)); width: calc(735.5 * var(--px)); height: calc(450 * var(--px)); max-width: none; }
.hero__text { position: absolute; left: calc(var(--gutter) + 10 * var(--px)); top: calc(160 * var(--px)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(8 * var(--px)); width: min(722 * var(--px), calc(100% - 2 * var(--gutter))); }
.hero__sub { font-size: calc(28 * var(--px)); font-weight: 700; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.hero__lead { color: rgba(255, 255, 255, .8); }
.breadcrumb--caps { gap: calc(5 * var(--px)); font-size: calc(16 * var(--px)); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }

/* Diensten-overzicht: diagonaal verloop onder het blur-vlak */
.hero--diensten .hero__shade { --shade: linear-gradient(94.35deg, #1c1b19 1.54%, rgba(73, 72, 68, 0) 98.72%); --shade-w: calc(729 * var(--px)); }
.hero--diensten .hero__intro { padding-top: calc(36.4 * var(--px)); }
.hero--diensten .hero__intro p:last-child { margin-top: calc(23.4 * var(--px)); color: rgba(255, 255, 255, .8); }

/* Dienst-detail: extra schuine lichtbaan (opacity .75) in het blur-vlak */
/* In Figma ligt het verloop van 937px bóven de lichtbaan, dus beide als pseudo-element. */
.hero--dienst .hero__shade { --shade-w: 0; }
.hero--dienst .hero__shade::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(937 * var(--px)); background: linear-gradient(95.58deg, #1c1b19 1.54%, rgba(73, 72, 68, 0) 98.72%); }
.hero--dienst .hero__shade::before {
  content: ""; position: absolute; left: calc(38.64 * var(--px)); top: calc(-579.28 * var(--px)); width: calc(1000.115 * var(--px)); height: calc(1432.535 * var(--px)); opacity: .75;
  background: linear-gradient(81.31deg, #000 10.15%, #e1ddd3 20.69%, #2c2b2b 74.76%, rgba(44, 43, 43, 0) 92.2%);
  transform: rotate(40.37deg);
}
.hero--dienst .hero__text { top: calc(164 * var(--px)); }
.hero--dienst .hero__sub { padding-top: calc(28 * var(--px)); opacity: .8; color: var(--c-white); }

/* Contact: kopblok + oranje uitnodiging die over de hero-rand valt */
.hero--contact { overflow: visible; z-index: 2; }
.hero--contact .hero__clip { position: absolute; inset: 0; overflow: hidden; }
.hero--contact .hero__text { left: var(--gutter); top: calc(161 * var(--px)); gap: calc(22 * var(--px)); }
.hero--contact .t-h1 { padding-top: calc(7 * var(--px)); }
.invite {
  position: absolute; left: var(--gutter); top: calc(410 * var(--px)); z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(16 * var(--px));
  width: min(760 * var(--px), calc(100% - 2 * var(--gutter))); padding: calc(36 * var(--px)) calc(64 * var(--px)) calc(40 * var(--px)) calc(40 * var(--px));
}
.invite::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/contact/invite-shape.svg") 0 0 / 100% 100% no-repeat; }
.invite__tag { padding: calc(8 * var(--px)); background: var(--c-ink); font-size: calc(14 * var(--px)); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.invite__title { font-size: calc(44 * var(--px)); font-weight: 600; line-height: .92; letter-spacing: -.01em; text-transform: uppercase; }
.invite__actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(24 * var(--px)); font-size: calc(16 * var(--px)); font-weight: 600; line-height: 1; }
.invite__actions .btn { padding: calc(20 * var(--px)) calc(28 * var(--px)); gap: calc(12 * var(--px)); }
.invite__actions a[href^="tel"]:hover { text-decoration: underline; }
.arrow { font-family: "Montserrat", var(--font); font-size: calc(18 * var(--px)); font-weight: 600; line-height: 1; color: var(--c-orange); transition: color .35s ease, transform .2s; }
.btn:hover .arrow, .btn:focus-visible .arrow { color: inherit; }
.btn--sand .arrow { color: inherit; }

/* Over ons: 1200px hoge hero met visieblok en USP's */
.hero--over {
  --over-bg: #000;         /* vlak onder de foto (zwart, zoals header en footer) */
  --over-panel: #141414;   /* visieblok */
  --over-shade: #000;      /* donkere verlopen over de foto */
  --over-veil: rgba(0, 0, 0, .45);
  height: calc(1200 * var(--px)); background: var(--over-bg);
}
.hero--over::after { content: ""; position: absolute; left: 0; right: 0; top: calc(512 * var(--px)); height: calc(688 * var(--px)); background: linear-gradient(to top, var(--over-bg) 61.6%, transparent 95.7%); }
.hero--over .hero__shade {
  z-index: 1;
  background:
    linear-gradient(133.11deg, var(--over-shade) 1.48%, rgba(73, 72, 68, 0) 57.66%) 0 0 / calc(825 * var(--px)) 100% no-repeat,
    linear-gradient(18.19deg, #000 0%, rgba(73, 72, 68, 0) 22.56%) 0 0 / calc(825 * var(--px)) 100% no-repeat,
    linear-gradient(263.11deg, var(--over-shade) 3.93%, rgba(73, 72, 68, 0) 66.65%) 100% 0 / calc(295 * var(--px)) 100% no-repeat,
    var(--over-veil);
}
.hero--over .hero__glow { position: absolute; z-index: 1; left: 30.05%; top: calc(209 * var(--px)); width: calc(913 * var(--px)); height: calc(908 * var(--px)); max-width: none; pointer-events: none; }
.hero--over .hero__frame, .hero--over .hero__text, .vision, .usps { z-index: 2; }
.hero--over .hero__text p:last-child { margin-top: calc(23.4 * var(--px)); }
.hero__h1-light { font-weight: 400; }
.hero__h1-bold { font-weight: 700; color: var(--c-orange); }
.vision {
  position: absolute; left: max(var(--gutter), 11.3%); top: calc(580 * var(--px));
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--px));
  width: calc(624 * var(--px)); padding: calc(52 * var(--px)) 0 calc(32 * var(--px)) calc(32 * var(--px));
}
.vision::before {
  content: ""; position: absolute; z-index: -1; left: -2px; top: calc(11.5 * var(--px)); width: calc(745 * var(--px)); height: calc(418 * var(--px));
  background: var(--over-panel); -webkit-mask: url("../img/over/visie-shape.svg") 0 0 / 100% 100% no-repeat; mask: url("../img/over/visie-shape.svg") 0 0 / 100% 100% no-repeat;
}
.vision__head { display: flex; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--px)); }
.vision .t-h1 { font-size: clamp(36 * var(--px), calc(3.2 * var(--vw)), 62 * var(--px)); }
.vision p { max-width: calc(500 * var(--px)); }
.usps { position: absolute; left: calc(66.67% - 5 * var(--px)); top: calc(696 * var(--px)); display: flex; flex-direction: column; gap: calc(32 * var(--px)); width: calc(430 * var(--px)); margin: 0; padding: 0; list-style: none; }
.usps li { display: flex; align-items: center; gap: calc(16 * var(--px)); }
.usps img { flex: none; width: calc(12.75 * var(--px)); height: calc(89 * var(--px)); }
.usps__text { display: flex; flex-direction: column; gap: calc(16 * var(--px)); }
.usps__title { font-size: calc(24 * var(--px)); font-weight: 600; line-height: .9; letter-spacing: -.01em; text-transform: uppercase; }

/* ==========================================================================
   "Snel naar"-balk (oranje) — staat onder de hero en scrolt mee met de pagina
   ========================================================================== */
.quick-bar {
  position: relative; z-index: 40;
  display: flex; align-items: center; gap: calc(10 * var(--px));
  padding: calc(16 * var(--px)) calc(24 * var(--px)) calc(16 * var(--px)) max(var(--gutter), calc(11.25 * var(--vw)));
  background: var(--c-orange); overflow-x: auto; scrollbar-width: none;
}
.quick-bar::-webkit-scrollbar { display: none; }
.quick-bar--back { padding-left: calc(36 * var(--px)); }
.quick-bar__back, .quick-bar__label { flex: none; display: flex; align-items: center; gap: calc(10 * var(--px)); padding-right: calc(10 * var(--px)); font-weight: 700; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.quick-bar__back { width: calc(170 * var(--px)); font-size: calc(14 * var(--px)); letter-spacing: -.01em; color: var(--c-white); }
.quick-bar__back img { transform: rotate(180deg); transition: transform .2s; }
.quick-bar__back:hover img { transform: rotate(180deg) translateX(calc(3 * var(--px))); }
.quick-bar__label { font-size: calc(18 * var(--px)); letter-spacing: -.01em; color: var(--c-ink); }
.quick-bar__label span { width: calc(105 * var(--px)); }
.quick-bar img { width: calc(11 * var(--px)); height: calc(14 * var(--px)); }
.quick-bar__link {
  position: relative; isolation: isolate; overflow: hidden; flex: none;
  padding: calc(14 * var(--px)) calc(16 * var(--px)); border: 2px solid var(--c-white); color: var(--c-white);
  font-size: calc(14 * var(--px)); font-weight: 700; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.quick-bar__link::before {
  content: ""; position: absolute; z-index: -1; inset: 0 -2px; height: 220%;
  background: var(--c-ink); clip-path: polygon(0 0, 100% 46%, 100% 100%, 0 100%);
  transform: translateY(100%); transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.quick-bar__link:hover::before, .quick-bar__link:focus-visible::before, .quick-bar__link.is-active::before { transform: translateY(-50%); }
/* Laag 220% hoog: bij -50% dekt hij boven (schuine rand) en onder volledig af; de rand kleurt mee. */
.quick-bar__link { transition: border-color .45s ease; }
.quick-bar__link:hover, .quick-bar__link:focus-visible, .quick-bar__link.is-active { border-color: var(--c-ink); }
.quick-bar__link:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

/* ==========================================================================
   Diensten-overzicht — oplossingsblokken, links/rechts verspringend
   ========================================================================== */
.solutions { display: flex; flex-direction: column; gap: calc(85 * var(--px)); max-width: 1920px; margin: 0 auto; padding: calc(103 * var(--px)) 0 calc(165 * var(--px)); }
.solution {
  --clip: polygon(0 0, 100% 0, 100% 19.23%, calc(100% - 46.45 * var(--px)) 27.43%, 100% 35.63%, 100% 41.35%, 56.5% 100%, 0 100%);
  position: relative; isolation: isolate; scroll-margin-top: calc(220 * var(--px));
  width: min(1093 * var(--px), calc(100% - 2 * var(--gutter))); min-height: calc(520 * var(--px)); margin-left: max(var(--gutter), 11.2%);
  padding: calc(44 * var(--px)) calc(331 * var(--px)) calc(72 * var(--px)) calc(40 * var(--px));
}
.solution::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--c-cream); clip-path: var(--clip); }
.solution--right {
  --clip: polygon(38.06% 0, 100% 0, 100% 100%, 0 100%, 0 85.58%, calc(37.44 * var(--px)) 79.35%, 0 73.12%, 0 57.69%);
  width: min(1193 * var(--px), calc(100% - max(var(--gutter), 26.51%) - var(--gutter))); margin-left: max(var(--gutter), 26.51%);
  padding: calc(44 * var(--px)) calc(40 * var(--px)) calc(72 * var(--px)) calc(454 * var(--px));
}
.solution__body { display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--px)); max-width: calc(722 * var(--px)); }
.solution__title { color: var(--c-ink); }
.solution__text { display: flex; flex-direction: column; gap: calc(23.4 * var(--px)); color: var(--c-ink); }
.solution__nr {
  position: absolute; z-index: -1; left: calc(763 * var(--px)); bottom: calc(12 * var(--px));
  font-size: calc(200 * var(--px)); font-weight: 900; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 2px var(--c-orange); pointer-events: none; user-select: none;
}
.solution--right .solution__nr { left: calc(103 * var(--px)); top: calc(14 * var(--px)); bottom: auto; }
.btn--arrow { gap: calc(12 * var(--px)); }

/* ==========================================================================
   Dienst-detail — hergebruikt .job-detail / .article / .apply-rail
   ========================================================================== */
.job-detail--dienst { max-width: calc(1487 * var(--px)); padding-top: calc(86 * var(--px)); padding-bottom: calc(175 * var(--px)); }
.job-detail--dienst .apply-rail { top: calc(var(--header-h, calc(120 * var(--px))) + 32 * var(--px) - 7 * var(--px)); padding-top: calc(7 * var(--px)); }
.article--dienst > p { color: var(--c-ink); }
.article--dienst h2 { scroll-margin-top: calc(220 * var(--px)); }
.article--dienst ul.bullets { color: var(--c-tundora); }
.article--dienst ul.bullets b { font-weight: 700; }
.article a.inline { color: var(--c-orange); text-decoration: underline; text-underline-position: from-font; }
.article a.inline:hover { color: var(--c-ink); }
.perk--cream { background: var(--c-cream); }
.perk--cream .perk__title { font-size: calc(18 * var(--px)); font-weight: 700; line-height: 1.3; color: var(--c-tundora); }
.perk--cream .perk__text { color: var(--c-tundora); }
.article__actions { display: flex; flex-wrap: wrap; gap: calc(24 * var(--px)); padding-top: calc(5 * var(--px)); }
.apply-box--dienst h2 { text-transform: uppercase; }
.apply-box--dienst p:not(.apply-box__eyebrow) { font-size: 20px; color: var(--c-white); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: minmax(0, calc(883 * var(--px))) calc(430 * var(--px)); justify-content: space-between; align-items: start; gap: calc(64 * var(--px)); max-width: calc(1489 * var(--px)); margin: 0 auto; padding: calc(129 * var(--px)) var(--gutter) calc(127 * var(--px)); box-sizing: content-box; }
.contact-form { display: flex; flex-direction: column; align-items: flex-start; gap: calc(16 * var(--px)); padding: calc(48 * var(--px)); background: var(--c-cream); border: 1px solid var(--c-sand); }
.contact-form__title { margin-bottom: 0; font-size: calc(26 * var(--px)); font-weight: 600; line-height: calc(33.8 * var(--px)); letter-spacing: .02em; color: var(--c-tundora); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--px)); width: 100%; }
.field { display: flex; flex-direction: column; gap: calc(4 * var(--px)); width: 100%; color: var(--c-tundora); }
.field input, .field textarea {
  width: 100%; height: calc(46 * var(--px)); padding: calc(10 * var(--px)) calc(13 * var(--px)); border: 1px solid var(--c-oyster); border-radius: 3px;
  background: radial-gradient(ellipse at 0 0, #fff, rgba(255, 255, 255, .8)); color: var(--c-ink);
  font: 17px/1.3 var(--font); letter-spacing: inherit;
}
.field textarea { height: calc(151 * var(--px)); padding-top: calc(14 * var(--px)); resize: vertical; }
.field ::placeholder { color: var(--c-flint); opacity: .5; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 1px var(--c-orange); }
.contact-form .btn { min-height: calc(56 * var(--px)); padding: calc(20 * var(--px)) calc(24 * var(--px)); }
.contact-side { display: flex; flex-direction: column; gap: calc(40 * var(--px)); }
.direct-box { display: flex; flex-direction: column; gap: 2px; margin-top: -1px; padding: calc(34 * var(--px)) calc(58 * var(--px)) calc(40 * var(--px)) calc(34 * var(--px)); background: var(--c-ink); color: rgba(255, 255, 255, .72); }
.direct-box h2 { padding-top: calc(13.1 * var(--px)); color: var(--c-white); font-size: calc(26 * var(--px)); font-weight: 600; line-height: calc(33.8 * var(--px)); letter-spacing: .02em; }
.direct-box p { padding-top: calc(11.1 * var(--px)); }
.direct-box a { display: block; }
.direct-box a:hover { color: var(--c-white); }
.map { display: block; overflow: hidden; border: 1px solid var(--c-sand); background: #ebe7de; }
.map img { width: 100%; height: auto; }
.map__link { display: flex; align-items: center; gap: calc(8 * var(--px)); padding: calc(14 * var(--px)) calc(20 * var(--px)); background: var(--c-white); color: var(--c-orange); font-size: calc(14 * var(--px)); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.map__link .arrow { font-size: calc(14 * var(--px)); }
.map:hover .map__link .arrow { transform: translate(2px, -2px); }

.visit { background: var(--c-cream); }
.visit__inner { display: grid; grid-template-columns: minmax(0, calc(580 * var(--px))) minmax(0, calc(825 * var(--px))); justify-content: space-between; align-items: start; gap: calc(64 * var(--px)); max-width: calc(1497 * var(--px)); margin: 0 auto; padding: calc(96 * var(--px)) var(--gutter); box-sizing: content-box; }
.visit__text { display: flex; flex-direction: column; align-items: flex-start; gap: calc(28 * var(--px)); margin-top: calc(61 * var(--px)); }
.visit__title { font-size: calc(48 * var(--px)); font-weight: 600; line-height: .92; letter-spacing: -.01em; text-transform: uppercase; color: var(--c-ink); }
.visit__address { display: flex; align-items: flex-start; gap: calc(16 * var(--px)); font-size: calc(22 * var(--px)); font-weight: 600; line-height: 1.35; color: var(--c-ink); }
.visit__address img { width: calc(22 * var(--px)); height: calc(29 * var(--px)); }
.visit__address span { text-decoration: underline; text-underline-position: from-font; }
.visit__address:hover span { color: var(--c-orange); }
.text-link { display: inline-flex; align-items: center; gap: calc(10 * var(--px)); color: var(--c-orange); font-size: calc(16 * var(--px)); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.text-link:hover .arrow { transform: translateX(calc(3 * var(--px))); }
.visit__photo { width: 100%; height: auto; }

/* ==========================================================================
   Over ons
   ========================================================================== */
.approach { background: var(--c-cream); padding: calc(98 * var(--px)) var(--gutter) calc(159 * var(--px)); }
.approach__head { display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--px)); padding-left: calc(180 * var(--px)); }
.approach__head h2 { color: var(--c-ink); }
.approach__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(24 * var(--px)); margin: calc(72 * var(--px)) 0 0; padding: 0; list-style: none; }
.step { display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--px)); min-height: calc(410 * var(--px)); padding: calc(24 * var(--px)) calc(64 * var(--px)) calc(40 * var(--px)) calc(40 * var(--px)); background: var(--c-white); }
.step__nr { color: var(--c-orange); }
.step__title { font-size: calc(28 * var(--px)); font-weight: 700; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; color: var(--c-ink); }
.step__sub { color: var(--c-orange); }
.step__text { color: var(--c-flint); }

.media-row { display: flex; align-items: center; gap: 0; max-width: 1920px; margin: 0 auto; padding: calc(145 * var(--px)) 0 0 max(var(--gutter), 10.83%); }
.media-row--flip { gap: calc(40 * var(--px)); padding-left: max(var(--gutter), 11.41%); padding-bottom: calc(167 * var(--px)); }
.media-row__text { flex: 0 1 calc(762 * var(--px)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(56 * var(--px)); padding: calc(40 * var(--px)); }
.media-row__head { display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--px)); max-width: calc(722 * var(--px)); }
.media-row__head h2 { color: var(--c-ink); }
.media-row__body { display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--px)); max-width: calc(682 * var(--px)); }
.media-row__body .copy { display: flex; flex-direction: column; gap: calc(23.4 * var(--px)); color: var(--c-ink); }
.media-row__photo { flex: 0 1 calc(698 * var(--px)); width: calc(698 * var(--px)); height: auto; aspect-ratio: 698 / 587; object-fit: cover; }
.btn-row { display: flex; flex-wrap: wrap; gap: calc(24 * var(--px)); }

.sna { padding: calc(160 * var(--px)) max(var(--gutter), 10.83%) calc(129 * var(--px)); background: var(--c-sand); }
.sna__card { display: flex; align-items: center; gap: calc(56 * var(--px)); max-width: calc(1507 * var(--px)); margin: 0 auto; padding: calc(56 * var(--px)) calc(64 * var(--px)); background: var(--c-cream); }
.sna__logo { flex: none; width: calc(174 * var(--px)); height: calc(174 * var(--px)); margin: calc(-4.5 * var(--px)) 0; }
.sna__text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: calc(16 * var(--px)); }
.sna__title { font-size: calc(48 * var(--px)); font-weight: 600; line-height: .95; letter-spacing: -.01em; text-transform: uppercase; color: var(--c-ink); }
.sna__text p { line-height: 1.35; color: var(--c-ink); }
.sna .text-link { font-size: calc(15 * var(--px)); white-space: nowrap; }

.jobs-rail--werken { padding: calc(194 * var(--px)) 0 calc(262 * var(--px)); }

/* Footer-knop "Werken bij Baantalent" */
.site-footer__cta { margin-top: calc(28 * var(--px)); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1260px) {
  .jobs-hero__frame { left: auto; right: var(--gutter); width: 52vw; height: auto; }
  .jobs-hero__match { left: auto; right: calc(var(--gutter) + 52vw - 160 * var(--px)); top: auto; bottom: calc(70 * var(--px)); }
  .job-detail { grid-template-columns: minmax(0, 1fr) calc(380 * var(--px)); }
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

@media (max-width: 1100px) {
  .home-hero__frame { left: 38%; width: 60%; top: calc(140 * var(--px)); }
  .home-hero__match { left: auto; right: 12%; top: calc(170 * var(--px)); }
  .home-hero__copy { top: auto; bottom: calc(200 * var(--px)); } /* bovenin botst de kop met 'Meet your match' */
  .jobs-rail { padding: calc(128 * var(--px)) 0; }
  .job-hero { padding-left: var(--gutter); } /* zelfde lijn als de rest van de pagina */
  .split__grid { grid-template-columns: 1fr; align-content: end; gap: calc(24 * var(--px)); }
  .split__card:last-child { justify-self: start; }
  .split__cut { width: 100%; left: -30%; opacity: .9; }
  .split__photo { left: 0; right: 0; }
  .cta-banner__frame { left: 48%; opacity: .55; }
  .cta-banner__match { display: none; } /* het kader loopt hier rechts uit beeld; de payoff viel half over de rand */
  .jobs-layout { grid-template-columns: 1fr; gap: calc(32 * var(--px)); }
  .filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(240 * var(--px)), 1fr)); column-gap: calc(32 * var(--px)); }
  .filters__head { grid-column: 1 / -1; }
  .filter-group, .filter-group:last-child { border-bottom: 0; border-top: 1px solid var(--c-oyster); }
  .filter-group__toggle { width: 100%; }
  .job-detail { grid-template-columns: 1fr; }
  .apply-rail { position: static; padding-top: 0; flex-direction: row; flex-wrap: wrap; }
  .apply-rail > * { flex: 1 1 calc(340 * var(--px)); }
  .site-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .site-footer__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .t-large, .article__intro { font-size: 18px; }
  .home-hero { --h: max(760px, 100svh); }
  .home-stage__media img { object-position: 72% center; }
  .home-hero__frame { left: 20%; width: 95%; top: 110px; opacity: .5; }
  .home-hero__match { top: 120px; right: var(--gutter); width: 96px; }
  /* Lange knopteksten breken af als ze niet in hun kolom passen; flex-shrink 0 voorkomt dat korte knoppen in een rij onnodig smal worden. */
  .btn { flex-shrink: 0; max-width: 100%; white-space: normal; text-align: center; }
  .marquee__track { gap: 56px; }
  .marquee__item { zoom: .75; }
  .intro { padding: 64px var(--gutter); }
  .intro__shape { min-height: 0; padding: 48px 28px 140px; }
  /* De vorm uit het ontwerp is voor 733×757; smal uitgerekt snijdt de schuine kant door de tekst.
     Mobiel: rechte zijkanten met de inkeping, schuine snede alleen onder de tekst. */
  .intro__shape::before {
    background: var(--c-sand);
    clip-path: polygon(0 0, 100% 0, 100% 64px, calc(100% - 24px) 88px, 100% 112px, 100% calc(100% - 112px), 23% 100%, 0 100%);
  }
  .split__card { padding: 24px 0; gap: 32px; }
  .jobs-rail { padding: 96px 0; }
  .jobs-rail__scroller, .jobs-rail__cta { margin-top: 40px; }
  .job-card { padding: 40px 48px 40px 28px; min-height: 0; }
  .job-card__title { font-size: 22px; }
  .job-card--all .job-card__title { font-size: 40px; }
  .cta-banner { min-height: 0; }
  .cta-banner__frame, .cta-banner__match { display: none; }
  .cta-banner__copy { padding: 96px var(--gutter); }
  .site-footer { padding-top: 56px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .site-footer__grid > :last-child { grid-column: 1 / -1; } /* contact: adres en LinkedIn op één regel */
  .site-footer__bottom { flex-direction: column; align-items: flex-start; margin-top: 48px; }
  .jobs-hero { height: auto; min-height: 520px; }
  .jobs-hero__frame { width: 110vw; right: -30vw; opacity: .5; }
  .jobs-hero__match { display: none; }
  .jobs-hero__heading { position: relative; left: auto; top: auto; padding: 150px var(--gutter) 0; }
  .search-field { position: relative; left: auto; top: auto; margin: 72px var(--gutter) 48px; width: auto; }
  .job-row { flex-direction: column; padding: 28px; }
  .job-row__actions { align-items: flex-start; width: auto; }
  .job-hero { padding: 130px var(--gutter) 22px; }
  .job-hero .t-h1 { font-size: 32px; } /* vacaturetitels zijn lang; 44px gaf 7 regels */
  .job-facts { gap: 20px 40px; }
  .quick-nav { margin-top: 48px; }
  .quick-nav__label { width: auto; }
  .job-detail { padding-top: 56px; padding-bottom: 72px; }
  .apply-box { padding-right: 34px; }

}

/* --- Responsive: Contact, Over ons, Diensten, Dienst-detail ---------------- */
@media (max-width: 1260px) {
  .hero__frame { left: auto; right: var(--gutter); width: 52vw; height: auto; }
  .usps { left: auto; right: var(--gutter); width: min(430 * var(--px), 30vw); }
  .contact-grid { grid-template-columns: minmax(0, 1fr) calc(380 * var(--px)); }
  .visit__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .media-row, .media-row--flip { padding-left: var(--gutter); padding-right: var(--gutter); }
  .media-row__photo { flex: 1 1 0; width: auto; min-width: 0; }
  .solution, .solution--right { width: calc(100% - 2 * var(--gutter)); margin-left: var(--gutter); }
  .solution { padding-right: calc(300 * var(--px)); }
  .solution--right { padding-left: calc(330 * var(--px)); }
  .solution__nr { left: auto; right: calc(40 * var(--px)); }
  .solution--right .solution__nr { left: calc(40 * var(--px)); right: auto; }
  .approach__head { padding-left: 0; }
}

@media (max-width: 1100px) {
  :root { --header-h: calc(112 * var(--px)); }

  .hero { height: auto; min-height: calc(616 * var(--px)); padding: calc(160 * var(--px)) var(--gutter) calc(64 * var(--px)); }
  .hero__text { position: relative; left: auto; top: auto; width: min(722 * var(--px), 100%); }
  .hero__frame { opacity: .45; }
  .hero--contact { padding-bottom: 0; }
  .hero--contact .hero__text { left: auto; top: auto; }
  .invite { position: relative; left: auto; top: auto; margin: calc(56 * var(--px)) 0 calc(-70 * var(--px)); }
  .contact-grid { grid-template-columns: 1fr; gap: calc(40 * var(--px)); padding-top: calc(118 * var(--px)); }
  .contact-side { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--px)); }
  .visit__inner { grid-template-columns: 1fr; gap: calc(40 * var(--px)); padding: calc(72 * var(--px)) var(--gutter); }
  .visit__text { margin-top: 0; }

  .hero--over { height: auto; padding-bottom: calc(96 * var(--px)); }
  .hero--over .hero__glow { display: none; }
  .vision { position: relative; left: auto; top: auto; z-index: 2; width: min(762 * var(--px), 100%); margin-top: calc(64 * var(--px)); padding: calc(56 * var(--px)) calc(40 * var(--px)) calc(48 * var(--px)); }
  .vision::before { inset: 0; left: 0; top: 0; width: auto; height: auto; background: var(--over-panel); -webkit-mask: none; mask: none; }
  .usps { position: relative; left: auto; right: auto; top: auto; width: auto; margin-top: calc(48 * var(--px)); }

  .approach__steps { grid-template-columns: repeat(auto-fill, minmax(calc(260 * var(--px)), 1fr)); }
  .step { min-height: 0; }
  .media-row, .media-row--flip { flex-direction: column; align-items: stretch; gap: calc(32 * var(--px)); padding-top: calc(96 * var(--px)); }
  .media-row--flip { padding-bottom: calc(96 * var(--px)); }
  .media-row--flip .media-row__photo { order: 1; }
  .media-row__text { flex: none; padding: 0; } /* flex-basis 762px zou hier de hoogte worden */
  .media-row__photo { flex: none; width: 100%; }
  .sna { padding: calc(96 * var(--px)) var(--gutter); }
  .sna__card { flex-wrap: wrap; gap: calc(32 * var(--px)); }

  .quick-bar, .quick-bar--back { padding-left: var(--gutter); }
  .solutions { gap: calc(48 * var(--px)); padding: calc(64 * var(--px)) 0 calc(96 * var(--px)); }
  .solution, .solution--right {
    --clip: polygon(0 0, 100% 0, 100% calc(50% - 32 * var(--px)), calc(100% - 32 * var(--px)) 50%, 100% calc(50% + 32 * var(--px)), 100% 100%, 0 100%);
    min-height: 0; padding: calc(120 * var(--px)) calc(48 * var(--px)) calc(56 * var(--px)) calc(32 * var(--px));
  }
  .solution__nr, .solution--right .solution__nr { left: calc(32 * var(--px)); right: auto; top: calc(8 * var(--px)); bottom: auto; font-size: calc(110 * var(--px)); }
  .job-detail--dienst { padding-top: calc(56 * var(--px)); padding-bottom: calc(96 * var(--px)); }
}

@media (max-width: 760px) {
  .hero { min-height: 520px; padding-top: 130px; }
  .hero__frame { width: 110vw; right: -30vw; top: 110px; }
  .hero__sub { font-size: 22px; }
  .invite { padding: 28px 28px 32px 24px; } /* inkeping is hier ~16px; 48px liet "Plan een afspraak" afbreken */
  .invite__title { font-size: 32px; }
  .contact-form { padding: 24px; }
  .contact-form__row { grid-template-columns: 1fr; gap: 16px; }
  .contact-side { grid-template-columns: 1fr; }
  .visit__title { font-size: 36px; }
  .vision { padding: 40px 24px; }
  .media-row__head h2, .sna__title { font-size: 32px; }
  .sna__card { padding: 32px 24px; }
  .sna__logo { width: 120px; height: 120px; margin: 0; }
  .jobs-rail--werken { padding: 96px 0; }
  .solution, .solution--right { padding: 96px 40px 48px 24px; }
  .solution__nr, .solution--right .solution__nr { left: 24px; font-size: 84px; }
  .solution .btn { white-space: normal; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .quick-bar__link::before { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn::before, .btn, .job-row, .split__cut, .split__hit--left, .split__cut::after, .split__photo::before { transition: none; }
}