/* ===========================================================================
   RECRUIT A STUDENT 2.0, VORMLAAG
   Toegevoegd op 15 oktober 2026. Eerst op de homepage, dezelfde dag op alle
   pagina's in NL, FR en EN gezet (body.v2).

   Wat er verandert is alleen de vorm: grote bogen, foto's in een boog,
   kaarten die zweven, gebogen overgangen tussen secties en kleine fonkels.
   De inspiratie is go.temper.works, maar alleen qua opbouw. Kleuren,
   lettertype, teksten en de volgorde van de secties blijven zoals ze waren:
   alle kleuren hieronder komen uit tokens.css, het lettertype blijft Heebo.
   Waar een lijn of fonkel de kleur van het spoor volgt, staat er
   var(--accent): oranje op studentenpagina's, blauw op werkgeverspagina's.

   De regels werken op de bestaande klassen (.hero, .section--warm, .card,
   .team, .cta ...), zodat elke pagina meedoet zonder eigen markup. Alleen de
   grote hero van de homepages (hero--dia) heeft een paar versierende spans.

   Zonder de klasse v2 op body doet dit bestand niets.
   =========================================================================== */

.v2 {
  --v2-boog: clamp(3rem, 8vw, 8.5rem);   /* straal van de grote sectiehoeken */
  --v2-kaart: 1.5rem;                     /* straal van de kaarten */
  --v2-zweef: 0 1px 2px rgba(17, 37, 64, .05), 0 18px 40px -18px rgba(17, 37, 64, .28);
  --v2-zweef-hoog: 0 2px 4px rgba(17, 37, 64, .06), 0 28px 56px -22px rgba(17, 37, 64, .36);
  /* Dezelfde vorm als boog: rond van boven, recht van onder. */
  --v2-koepel: 50% 50% var(--radius-panel) var(--radius-panel) / 38% 38% var(--radius-panel) var(--radius-panel);
}

/* ---------- Gedeeld: kaarten ---------- */
/* Kaarten zweven: geen rand meer, een zachte schaduw en een grotere straal. */
.v2 main .card {
  border: 0; border-radius: var(--v2-kaart);
  box-shadow: var(--v2-zweef);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.v2 main .card--hover:hover { transform: translateY(-6px); box-shadow: var(--v2-zweef-hoog); }
.v2 main .card--hover::before { border-radius: var(--v2-kaart) var(--v2-kaart) 0 0; }

/* Euro-tekens (hero en sectiehoeken): op 16 oktober 2026 op verzoek
   helemaal weggehaald. */
.v2-cirkel {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%; background: var(--ras-blue-100);
}

/* ---------- Gedeeld: gekleurde secties ---------- */
/* Grote afgeronde hoeken, zoals de vlakken op temper.works. Blauw en de
   blauwe band rechtsboven en linksonder, oranje andersom, zodat de pagina
   golft. overflow: clip in plaats van hidden, want clip laat sticky
   kolommen in de sectie gewoon werken. */
.v2 main .section--soft,
.v2 main .section--warm,
.v2 main .section--band,
.v2 main .hero { position: relative; overflow: clip; isolation: isolate; }
.v2 main .section--soft,
.v2 main .section--band { border-radius: 0 var(--v2-boog) 0 var(--v2-boog); }
.v2 main .section--warm { border-radius: var(--v2-boog) 0 var(--v2-boog) 0; }

/* De eerste sectie onder de header is de kop van de pagina. Die krijgt
   alleen rechtsonder een boog, plus een grote witte cirkel achter de
   inhoud, zoals de boog achter de foto op temper.works. */
.v2 main > section:first-of-type.section--warm,
.v2 main > section:first-of-type.section--soft,
.v2 main .hero { border-radius: 0 0 var(--v2-boog) 0; }
.v2 main > section:first-of-type.section--warm::before,
.v2 main > section:first-of-type.section--soft::before,
.v2 main .hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(44rem, 70vw); aspect-ratio: 1; border-radius: 50%;
  right: -12rem; top: -14rem;
  background: var(--ras-white); opacity: .55;
}

/* Foto's in de kop van een pagina staan in een koepel, met een tweede
   koepel als lijn erachter. */
.v2 .hero__media { isolation: isolate; }
.v2 .hero__media::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 22px -18px -18px 22px;
  border: 3px solid var(--accent); border-radius: var(--v2-koepel);
}
.v2 .hero__media img { border-radius: var(--v2-koepel); box-shadow: var(--v2-zweef-hoog); }

/* De witte kaart in een kop (formulier, feiten) zweeft. */
.v2 .hero .card, .v2 .story__aside { border-radius: var(--v2-kaart); }

/* ---------- Footer ---------- */
.v2 .footer__top { border-radius: var(--v2-boog) 0 0 0; }

/* ===========================================================================
   HOMEPAGES: de grote hero (hero--dia)
   =========================================================================== */
.v2 .hero--dia { overflow: hidden; padding-bottom: var(--space-7); }
.v2 .hero--dia__grid { position: relative; z-index: 1; }
.v2 .hero--dia .v2-cirkel { width: min(51rem, 60vw); aspect-ratio: 1; right: -4rem; top: -7rem; }
@media (max-width: 63.99em) {
  .v2 .hero--dia .v2-cirkel { width: 130vw; right: -55vw; top: 20%; }
}
.v2 .hero--dia__beeld {
  border-radius: 999px 999px var(--radius-panel) var(--radius-panel);
  box-shadow: var(--v2-zweef-hoog);
}
@media (min-width: 64em) { .v2 .hero--dia__beeld { min-height: 34rem; } }
/* Het oranje vlak achter de foto volgt dezelfde boog, maar als lijn. */
.v2 .hero--dia__beeldwrap::before {
  background: transparent;
  border: 3px solid var(--accent);
  border-radius: 999px 999px var(--radius-panel) var(--radius-panel);
}
@media (min-width: 64em) {
  .v2 .hero--dia__beeldwrap::before {
    inset: calc(var(--space-8) + 34px) calc(var(--gutter) + 34px)
           calc(var(--space-8) - 34px) calc(var(--space-7) - 34px);
  }
}

/* Het zoekpaneel: een brede witte balk die over de foto zweeft, met de
   keuzevelden als zachte grijze tegels en een knop over de volle hoogte. */
.v2 .hero--dia__paneel {
  border: 0; border-radius: 1.25rem; padding: var(--space-3);
  box-shadow: 0 30px 70px -28px rgba(17, 37, 64, .45), 0 6px 18px -10px rgba(17, 37, 64, .18);
}
.v2 .hero--dia__velden { gap: var(--space-3); align-items: stretch; }
.v2 .hero--dia__velden p:not(:last-child) {
  padding: var(--space-3) var(--space-4) var(--space-2);
  background: var(--ras-grey-100); border-radius: .875rem;
  transition: background var(--dur-fast) var(--ease-inout);
}
.v2 .hero--dia__velden p:not(:last-child):focus-within { background: var(--ras-blue-100); }
.v2 .hero--dia__paneel label { margin-bottom: 2px; color: var(--ras-grey-700); }
.v2 .hero--dia__velden .select {
  min-height: 2.25rem; padding-left: 0; border: 0; background-color: transparent; box-shadow: none;
}
.v2 .hero--dia__velden p:last-child { display: flex; }
.v2 .hero--dia__velden .btn { min-height: 3.75rem; height: 100%; padding-inline: var(--space-7); border-radius: .875rem; }
/* Op de werkgeverspagina staan beloftes in het paneel in plaats van velden. */
.v2 .hero--dia__paneel .proofbar { padding: var(--space-3) var(--space-4); }

/* ===========================================================================
   ONDERDELEN, overal waar ze voorkomen
   =========================================================================== */

/* USP-tegels in de tinten van de huisstijl, icoon in een witte cirkel. */
.v2 .usp-row { gap: var(--space-5); }
.v2 .usp-row > .card { padding: var(--space-7) var(--space-6); box-shadow: none; background: var(--ras-blue-100); }
.v2 .usp-row > .card:nth-child(even) { background: var(--ras-orange-100); }
.v2 .usp-row > .card:hover { transform: translateY(-6px); }
.v2 .usp__icon {
  width: 3.75rem; height: 3.75rem; margin-bottom: var(--space-5);
  border-radius: 50%; background: var(--ras-white); box-shadow: var(--v2-zweef);
}
/* Op een gekleurde sectie zouden tinttegels wegvallen: daar wit. */
.v2 .section--soft .usp-row > .card,
.v2 .section--warm .usp-row > .card { background: var(--ras-white); box-shadow: var(--v2-zweef); }

/* Stappenkiezer: de stappen als pillen, het open paneel als zwevende
   kaart met een cirkel erachter. */
.v2 .stapkiezer__knop { border-radius: 999px; padding: var(--space-3) var(--space-4); }
.v2 .stapkiezer__knop[aria-selected="true"] { box-shadow: var(--v2-zweef); }
.v2 .stapkiezer__panelen { position: relative; }
.v2 .stapkiezer__panelen::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 22rem; aspect-ratio: 1; right: -6rem; top: -5rem;
  border-radius: 50%; border: 3px solid var(--ras-orange-300);
}
.v2 .stapkiezer__paneel {
  position: relative; z-index: 1;
  border: 0; border-radius: 1.75rem; box-shadow: var(--v2-zweef-hoog);
  padding: clamp(var(--space-6), 4vw, var(--space-9));
}
.v2 .stapkiezer__paneel p.stapkiezer__grootn { font-size: clamp(4rem, 3rem + 4vw, 7rem); line-height: .9; }
.v2 .stapkiezer__balk { height: 6px; border-radius: 999px; }
.v2 .stapkiezer__balk span { border-radius: 999px; }

/* Stappen in kaarten (andere pagina's): het nummer in een cirkel die zweeft. */
.v2 .step__n { box-shadow: var(--v2-zweef); }

/* Vacaturekaarten. */
.v2 .vac { padding: var(--space-6); }
.v2 .vac--open { border: 2px dashed var(--accent); box-shadow: none; }
.v2 .vac__foot { border-top-style: dashed; }

/* Team: de groepsfoto in een koepel met een tweede koepel als lijn, de
   accountmanagers als zwevende profielkaartjes. */
.v2 .team__group { position: relative; padding: var(--space-4) var(--space-4) 0 0; }
.v2 .team__group::before {
  content: ""; position: absolute; inset: 0 0 var(--space-4) var(--space-4); z-index: 0;
  border: 3px solid var(--ras-blue-600);
  border-radius: 999px 999px var(--radius-panel) var(--radius-panel);
}
.v2 .team__group img {
  position: relative; z-index: 1;
  aspect-ratio: 5 / 4;
  border-radius: 999px 999px var(--radius-panel) var(--radius-panel);
  box-shadow: var(--v2-zweef-hoog);
}
.v2 .team__person {
  padding: var(--space-4); background: var(--ras-white);
  border-radius: 1.25rem; box-shadow: var(--v2-zweef);
  transition: transform .35s var(--ease-out);
}
.v2 .team__person:hover { transform: translateY(-4px) rotate(-.6deg); }
.v2 .team__person img { width: 4rem; height: 4rem; box-shadow: 0 0 0 3px var(--ras-orange-100); }

/* Sectorkaarten */
.v2 .sectorcard { overflow: hidden; text-align: center; }
/* 16-10-2026: lijnicoon in plaats van de PNG (_bouw/sector_iconen.py). De
   kaart is één wit kader met gelijke ruimte rondom en één achtergrond: het
   icoon staat zonder eigen vlakje op het wit, de titel eronder. */
.v2 .sectorcard { background: var(--ras-white); padding: var(--space-6) var(--space-3); align-items: center; gap: var(--space-4); }
.v2 .sectorcard__beeld { display: grid; place-items: center; }
.v2 .sectorcard__ico {
  display: grid; place-items: center;
  background: none; color: var(--ras-blue-600);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.v2 .sectorcard__ico svg { width: 2.75rem; height: 2.75rem; }
.v2 .sectorcard .t-h3 { padding: 0; font-size: var(--fs-h4); text-wrap: balance; }
.v2 .sectorcard .t-h3::after { content: "\00a0\203A"; color: var(--accent); }   /* pijltje blijft bij het laatste woord */
.v2 .sectorcard .t-small { padding: 0; margin-top: calc(var(--space-2) * -1); }
.v2 .sectorcard:hover .sectorcard__ico { transform: translateY(-4px); }
.v2.js-reveal .reveal .sectorcard__ico { opacity: 0; transform: scale(.7); transition: opacity .5s ease .2s, transform .7s cubic-bezier(.16, 1, .3, 1) .2s; }
.v2.js-reveal .reveal.is-in .sectorcard__ico { opacity: 1; transform: scale(1); }
.v2.js-reveal .reveal.is-in:hover .sectorcard__ico { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .v2 .sectorcard__ico, .v2.js-reveal .reveal .sectorcard__ico { opacity: 1; transform: none; transition: none; }
}

/* De blauwe band: een witte zwierlijn op de achtergrond. */
.v2 main .section--band::before {
  content: ""; position: absolute; z-index: -1; inset: -10% -5%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M-40 300 C 180 40, 360 420, 560 200 S 900 -20, 1000 180 S 1180 380, 1260 120' stroke='white' stroke-opacity='.16' stroke-width='38' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Tool-kaarten op de homepages: een korte lijn onder de titel. */
.v2-tools .card { padding: var(--space-6); }
.v2-tools .card .t-h3 { padding-bottom: var(--space-3); border-bottom: 3px solid var(--ras-orange-100); }
.v2-tools .card:nth-child(even) .t-h3 { border-bottom-color: var(--ras-blue-100); }

/* Video en quote. */
.v2 .video { border-radius: 1.75rem; box-shadow: var(--v2-zweef-hoog); }
.v2 .video__ring { box-shadow: 0 0 0 10px rgba(255, 255, 255, .25); }
.v2 .quote {
  border: 0; border-radius: 1.75rem; box-shadow: var(--v2-zweef);
  transform: rotate(1.2deg);
  transition: transform .35s var(--ease-out);
}
.v2 .quote:hover { transform: rotate(0deg) translateY(-4px); }

/* Blogkaarten. */
.v2 .post img { transition: transform .6s var(--ease-out); }
.v2 .post:hover img { transform: scale(1.05); }

/* Beoordelingen op de homepages: grotere cijfers. */
.v2-bewijs .card { padding: var(--space-7) var(--space-6); text-align: center; align-items: center; }
.v2-bewijs .card .t-h3 {
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); line-height: 1.1;
  color: var(--ras-blue-700);
}

/* Afsluitende CTA-vlakken: twee bogen in de hoeken. */
.v2 .cta { position: relative; overflow: hidden; border-radius: 2rem; isolation: isolate; }
.v2 .cta::before,
.v2 .cta::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }
.v2 .cta::before { width: 22rem; aspect-ratio: 1; left: -8rem; bottom: -12rem; border: 3px solid var(--ras-orange-300); }
.v2 .cta::after { width: 16rem; aspect-ratio: 1; right: -5rem; top: -7rem; background: var(--ras-white); opacity: .6; }
.v2 .cta--band::before { border-color: rgba(255, 255, 255, .35); }
.v2 .cta--band::after { opacity: .12; }
.v2 .closing__cross { border-top-style: dashed; }

/* FAQ en uitklapblokken. */
.v2 .faq__item, .v2 details.card { border-radius: var(--v2-kaart); }
/* 16-10-2026: elke vraag is een volledig kader, met de vraag en het
   antwoord erbinnen, en wat ruimte tussen de kaders. Eerst stond alleen
   een ronde lijn onder de vraag, en raakte de tekst de rand. */
.v2 .faq { border-top: 0; display: grid; gap: var(--space-3); }
.v2 .faq__item {
  border: 1px solid var(--color-border); background: var(--ras-white);
  padding: 0 var(--space-5);
  box-shadow: 0 8px 20px -16px rgba(17, 37, 64, .4);
  transition: border-color var(--dur-fast) var(--ease-inout), box-shadow var(--dur-fast) var(--ease-inout);
}
.v2 .faq__item:hover { border-color: var(--ras-blue-300); }
.v2 .faq__item[data-open="true"] { border-color: var(--ras-blue-300); box-shadow: 0 12px 28px -18px rgba(17, 37, 64, .45); }
.v2 .faq__q { padding: var(--space-4) 0; }
.v2 .faq__a { padding-bottom: var(--space-5); }
@media (min-width: 48em) { .v2 .faq__item { padding: 0 var(--space-6); } }

/* Vacatures en formulieren (blok 49 tot 51 in site.css) volgen dezelfde
   lijn: grotere stralen en zwevende kaarten. */
.v2 .vrij { border: 0; border-radius: var(--v2-kaart); box-shadow: var(--v2-zweef); }
.v2 .vrij:hover { transform: translateY(-4px); box-shadow: var(--v2-zweef-hoog); }
.v2 .vzoek { border-radius: 1.25rem; }
.v2 .vkaart, .v2 .vsol__formkaart { border: 0; border-radius: 1.75rem; box-shadow: var(--v2-zweef-hoog); }
.v2 .vopen { position: relative; overflow: hidden; border-radius: 1.75rem; isolation: isolate; }
.v2 .vopen::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 18rem; aspect-ratio: 1; right: -6rem; bottom: -10rem;
  border-radius: 50%; border: 3px solid rgba(255, 255, 255, .3);
}
.v2 .vlink { border-radius: 1.25rem; box-shadow: var(--v2-zweef); }

/* ---------- Beweging uit ---------- */
@media (prefers-reduced-motion: reduce) {
  .v2 main .card, .v2 .team__person, .v2 .quote, .v2 .vrij { transition: none; }
}

/* ---------- Tweede knop ----------
   Op 15 oktober 2026: "Bekijk vacatures" naast de oranje knop las als een
   losse link. De tweede knop is nu een omlijnde knop: witte vulling, een
   blauwe rand van 2 pixels en blauwe tekst, even hoog als de oranje knop.
   Op de blauwe en oranje vlakken blijft hij wit omlijnd. */
.v2 .btn--plain {
  background: var(--ras-white); color: var(--ras-blue-700);
  border: 2px solid var(--ras-blue-700);
  font-weight: var(--fw-bold);
  padding-block: 8px;   /* 2 px rand + 8 px = even hoog als de oranje knop */
}
.v2 .btn--plain:hover { background: var(--ras-blue-100); color: var(--ras-blue-800); border-color: var(--ras-blue-800); }
.v2 [data-surface="band"] .btn--plain,
.v2 [data-surface="accent"] .btn--plain { background: transparent; color: var(--ras-white); border-color: var(--ras-white); }
.v2 [data-surface="band"] .btn--plain:hover,
.v2 [data-surface="accent"] .btn--plain:hover { background: rgba(255, 255, 255, .14); color: var(--ras-white); }

/* ---------- Apps en tools op de homepages (15 oktober 2026) ----------
   Een bento van vier kaarten, twee per rij. Elk beeldvak heeft dezelfde
   opbouw, zodat de vier beelden op één lijn staan: het beeld begint overal
   op dezelfde afstand onder de bovenrand, staat in het midden en loopt
   onderaan uit het vak. Zachte beweging: het beeld zweeft een paar pixels. */
.v2 .tools { gap: var(--space-5); }
@media (min-width: 48em) { .v2 .tools { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.v2 .tool { overflow: hidden; padding: 0 var(--space-6) var(--space-6) !important; }
.tool__beeld {
  --boven: 1.75rem;
  position: relative; isolation: isolate;
  height: 17rem; margin: 0 calc(var(--space-6) * -1) var(--space-6);
  padding-top: var(--boven);
  display: flex; align-items: flex-start; justify-content: center;
  overflow: hidden;
  border-radius: var(--v2-kaart) var(--v2-kaart) 0 0;
}
.tool__beeld::before {
  content: ""; position: absolute; z-index: -1; width: 22rem; aspect-ratio: 1;
  border-radius: 50%; right: -6rem; bottom: -12rem;
  border: 3px solid var(--ras-blue-300);
}
/* Alle vier de beelden zijn vrijstaand (transparant) en staan op dezelfde
   lichte tint uit de huisstijl, met dezelfde zachte schaduw. */
.tool__beeld { background: var(--ras-blue-100); }
.tool__beeld img {
  flex: 0 0 auto; display: block;
  filter: drop-shadow(0 22px 26px rgba(17, 37, 64, .28));
  animation: tool-zweef 6s cubic-bezier(.45, 0, .55, 1) infinite;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.tool:hover .tool__beeld img { transform: translateY(-4px) scale(1.02); }

.tool__beeld--cv img { width: 82%; height: auto; }
/* op een smal scherm is het venster laag: het vak volgt dan de hoogte van
   het beeld, en het venster loopt net als de telefoons onderaan uit het vak */
@media (max-width: 47.99em) {
  .tool__beeld--cv { height: auto; }
  .tool__beeld--cv img { width: 92%; margin-bottom: -2rem; }
}
.tool__label {
  position: absolute; top: var(--space-4); right: var(--space-4);
  padding: 6px 12px; border-radius: 999px;
  background: var(--ras-orange-500); color: var(--ras-white);
  font-size: var(--fs-meta); font-weight: var(--fw-bold); letter-spacing: .06em;
  box-shadow: 0 10px 20px -8px rgba(255, 110, 50, .6);
  animation: tool-wip 4s cubic-bezier(.45, 0, .55, 1) infinite;
}
/* de studenten staan onderaan op de rand: de foto is daar afgesneden */
.tool__beeld--ambassadeur { align-items: stretch; }
.tool__beeld--ambassadeur img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; animation: none; filter: drop-shadow(0 16px 22px rgba(17, 37, 64, .2)); }
.tool__beeld--poolmanager img,
.tool__beeld--fleet img { height: 125%; width: auto; }
@keyframes tool-zweef { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes tool-wip { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) {
  .tool__beeld img, .tool__label { animation: none; transition: none; }
}

/* ===========================================================================
   VERFIJNING (15 oktober 2026; eerst op de homepage, dezelfde dag op alle pagina's)
   Ontwerpregels uit de skill "design-taste-frontend", binnen de huisstijl:
   het lettertype blijft Heebo, de kleuren blijven, knoppen blijven 10px.
   - Koppen staan links, niet gecentreerd (asymmetrie in plaats van symmetrie).
   - Geen rij van drie gelijke kaarten: USP en blog worden een bento met één
     grote kaart en twee kleinere.
   - Strakkere koppen (letterspatie iets krapper), lopende tekst tot 65 tekens.
   - Eén bewegingscurve voor alles, en een knop die zichtbaar indrukt.
   - Styleguide: geen verloop tussen blauw en oranje, geen oranje tekst.
   Bento's en het asymmetrische raster alleen bij rijen van precies drie
   kaarten; lange lijsten (blogoverzicht, sitemap) blijven gewone rijen.
   =========================================================================== */
.v2 { --zacht: cubic-bezier(.16, 1, .3, 1); }

/* Koppen */
.v2 .t-h2 { letter-spacing: -0.02em; line-height: 1.1; }
.v2 .section__head { max-width: 40rem; }
.v2 .section__head .t-lead { max-width: 65ch; }
.v2 .section__head.center { text-align: left; margin-inline: 0; }

/* Knoppen: indrukken bij klikken, zelfde curve overal */
.v2 .btn { transition: background-color .2s var(--zacht), border-color .2s var(--zacht), color .2s var(--zacht), transform .2s var(--zacht); }
.v2 .btn:active { transform: scale(.98); }
.v2 main .card, .v2 .team__person, .v2 .quote { transition-timing-function: var(--zacht); }

/* Styleguide: geen oranje tekst (het pijltje bij de sectoren wordt blauw) */
.v2 .sectorcard .t-h3::after { color: var(--ras-blue-700); }
/* Styleguide: kleiner vergroten bij aanwijzen */
.v2 .post:hover img { transform: scale(1.02); }

/* ---------- USP: één grote tegel links, twee onder elkaar rechts ---------- */
@media (min-width: 64em) {
  .v2 .usp-row:has(> .card:nth-child(3):last-child) { grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; }
  .v2 .usp-row:has(> .card:nth-child(3):last-child) > .card:first-child {
    grid-row: span 2; justify-content: flex-end;
    padding: var(--space-8) var(--space-7);
    position: relative; overflow: hidden; isolation: isolate;
  }
  .v2 .usp-row:has(> .card:nth-child(3):last-child) > .card:first-child::before {
    content: ""; position: absolute; z-index: -1; width: 26rem; aspect-ratio: 1;
    right: -9rem; top: -9rem; border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .9);
  }
  .v2 .usp-row:has(> .card:nth-child(3):last-child) > .card:first-child .usp__icon { width: 5rem; height: 5rem; margin-bottom: auto; }
  .v2 .usp-row:has(> .card:nth-child(3):last-child) > .card:first-child .usp__icon svg { width: 34px; height: 34px; }
  .v2 .usp-row:has(> .card:nth-child(3):last-child) > .card:first-child .t-h3 { margin-top: var(--space-9); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); letter-spacing: -0.015em; }
  .v2 .usp-row:has(> .card:nth-child(3):last-child) > .card:first-child .t-small { font-size: var(--fs-body); max-width: 34ch; }
  .v2 .usp-row:has(> .card:nth-child(3):last-child) > .card:not(:first-child) { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-5); align-items: start; }
  .v2 .usp-row:has(> .card:nth-child(3):last-child) > .card:not(:first-child) .usp__icon { grid-row: span 2; margin-bottom: 0; }
}

/* ---------- Blog: één groot artikel links, twee compact rechts ---------- */
@media (min-width: 64em) {
  .v2 .grid.g-3:has(> .post:nth-child(3):last-child) { grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; }
  .v2 .grid.g-3:has(> .post:nth-child(3):last-child) > .post:first-child { grid-row: span 2; }
  .v2 .grid.g-3:has(> .post:nth-child(3):last-child) > .post:first-child img { aspect-ratio: 16 / 10; }
  .v2 .grid.g-3:has(> .post:nth-child(3):last-child) > .post:first-child .post__title { font-size: clamp(1.4rem, 1.1rem + .8vw, 1.75rem); letter-spacing: -0.015em; }
  .v2 .grid.g-3:has(> .post:nth-child(3):last-child) > .post:not(:first-child) {
    display: grid; grid-template-columns: 44% 1fr; align-items: center;
    padding: var(--space-4); gap: var(--space-2);
  }
  /* het hele blogbeeld blijft zichtbaar (er staat tekst in het beeld) */
  .v2 .grid.g-3:has(> .post:nth-child(3):last-child) > .post:not(:first-child) img { aspect-ratio: 16 / 9; height: auto; border-radius: .75rem; }
  .v2 .grid.g-3:has(> .post:nth-child(3):last-child) > .post:not(:first-child) .post__body { padding: var(--space-2) var(--space-3); }
}

/* ---------- Bewijs: kop en bron links, de kaart rechts ---------- */
.v2 .bewijs--een .bewijs__kaart {
  border: 2px solid var(--ras-orange-300);        /* was een verloop naar blauw: mag niet */
  background: var(--ras-white);
}
@media (min-width: 64em) {
  .v2 .v2-bewijs .wrap {
    display: grid; grid-template-columns: 1fr minmax(0, 27rem);
    grid-template-areas: "kop kaart" "noot kaart" "knop kaart";
    column-gap: var(--space-10); align-items: center;
  }
  .v2 .v2-bewijs .section__head { grid-area: kop; margin-bottom: var(--space-5); align-self: end; }
  .v2 .v2-bewijs .bewijs { grid-area: kaart; margin: 0; }
  .v2 .v2-bewijs .bewijs__noot { grid-area: noot; margin: 0; text-align: left; align-self: start; }
  .v2 .v2-bewijs .btn-row { grid-area: knop; justify-content: flex-start; margin-top: var(--space-5) !important; align-self: start; }
}

/* Overige rijen van precies drie kaarten: de eerste kaart iets breder, zodat
   er geen rij van drie gelijke vakken ontstaat. Op tablet en mobiel gewoon
   onder elkaar, zoals voorheen. Niet voor vacaturekaartjes: die hebben een
   foto in vaste verhouding en blijven even breed (16 oktober 2026). Ook
   niet voor sectorkaarten en de kaarten op de landingspagina's: die zijn
   even breed op verzoek van de klant (17 oktober 2026). */
/* 17-10-2026: uitgeschakeld op verzoek van de klant; alle rijen van drie kaarten zijn even breed. */

/* ---------- Sectoren op de werkgevershomepages (15 oktober 2026) ----------
   Een foto-bento met de studiofoto's van de huidige site (blauwe studio-
   achtergrond). Rij 1: transport en het brede schoonmaakbeeld, rij 2: de
   andere drie. Onderaan een donkerblauwe overgang voor de leesbaarheid van
   de witte tekst, en een pijl die meeschuift bij aanwijzen. Geen versiering:
   dit is de werkgeverskant. */
.v2 .tiles--foto { gap: var(--space-4); }
.v2 .tiles--foto .tile {
  aspect-ratio: auto; min-height: 15rem;
  padding: var(--space-6);
  border-radius: var(--v2-kaart);
  background: var(--ras-blue-500);
  box-shadow: var(--v2-zweef);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s cubic-bezier(.16, 1, .3, 1);
}
.v2 .tiles--foto .tile:hover { transform: translateY(-4px); box-shadow: var(--v2-zweef-hoog); }
.v2 .tiles--foto .tile__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 15%;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.v2 .tiles--foto .tile:hover .tile__foto { transform: scale(1.02); }
.v2 .tiles--foto .tile::after {
  background: linear-gradient(180deg, rgba(17, 37, 64, 0) 38%, rgba(17, 37, 64, .55) 66%, rgba(17, 37, 64, .9) 100%);
}
.v2 .tiles--foto .tile__ico { z-index: 2; top: var(--space-5); left: var(--space-5); box-shadow: 0 6px 16px -6px rgba(17, 37, 64, .45); }
.v2 .tiles--foto .tile__txt { z-index: 2; padding-right: 3.25rem; }
.v2 .tiles--foto .tile__txt h3 { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); letter-spacing: -0.015em; line-height: 1.15; }
.v2 .tiles--foto .tile__txt span { font-size: var(--fs-small); color: rgba(255, 255, 255, .9); }
.v2 .tiles--foto .tile__pijl {
  position: absolute; z-index: 2; right: var(--space-5); bottom: var(--space-5);
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--ras-white); color: var(--ras-blue-700);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.v2 .tiles--foto .tile:hover .tile__pijl { transform: translateX(4px); }
.v2 .tiles--foto .tile--schoonmaak .tile__foto { object-position: 50% 30%; }

@media (max-width: 47.99em) {
  .v2 .tiles--foto { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .v2 .tiles--foto .tile { min-height: 13rem; padding: var(--space-4); }
  .v2 .tiles--foto .tile--schoonmaak { grid-column: 1 / -1; }
  .v2 .tiles--foto .tile__txt { padding-right: 0; }
  .v2 .tiles--foto .tile__pijl { display: none; }
  .v2 .tiles--foto .tile__ico { top: var(--space-3); left: var(--space-3); }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .v2 .tiles--foto { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .v2 .tiles--foto .tile--schoonmaak { grid-column: span 2; }
}
@media (min-width: 64em) {
  .v2 .tiles--foto { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; grid-template-rows: 18rem 16rem; }
  .v2 .tiles--foto .tile { grid-column: span 2; }
  .v2 .tiles--foto .tile--schoonmaak { grid-column: span 4; }
}
@media (prefers-reduced-motion: reduce) {
  .v2 .tiles--foto .tile, .v2 .tiles--foto .tile__foto, .v2 .tiles--foto .tile__pijl { transition: none; }
}
/* Op tablet en mobiel staat het brede schoonmaakbeeld bovenaan, zodat de
   andere vier netjes twee aan twee staan en er geen gat naast transport valt. */
@media (max-width: 63.99em) { .v2 .tiles--foto .tile--schoonmaak { order: -1; } }

/* ---------- Google-beoordeling op de werkgevershomepages ----------
   Onder de klantnamen: kop en bron links, dezelfde kaart als op de
   homepage rechts. Op mobiel onder elkaar. */
.v2 .bewijs-wg { margin-top: var(--space-9); }
.v2 .bewijs-wg .bewijs { margin-top: var(--space-6); }
.v2 .bewijs-wg .bewijs__noot { text-align: left; margin-top: var(--space-5); }
@media (min-width: 64em) {
  .v2 .bewijs-wg {
    display: grid; grid-template-columns: 1fr minmax(0, 27rem);
    grid-template-areas: "kop kaart" "noot kaart";
    column-gap: var(--space-10); align-items: center;
  }
  .v2 .bewijs-wg .section__head { grid-area: kop; margin-bottom: 0; align-self: end; }
  .v2 .bewijs-wg .bewijs { grid-area: kaart; margin: 0; }
  .v2 .bewijs-wg .bewijs__noot { grid-area: noot; margin: var(--space-4) 0 0; align-self: start; }
}
/* De gloed achter de kaart mag op een witte sectie niet buiten het scherm
   uitsteken (op de homepage snijdt de gekleurde sectie hem al af). */
.v2 .bewijs-wg { overflow-x: clip; padding-block: var(--space-5); }

/* ---------- Studenten uit de studiosessie (16 oktober 2026) ----------
   Op pagina's met een formulier rechts bleef de linkerkolom onder de
   vinkjes leeg. Daar staat nu een vrijstaande student, direct onder de
   vinkjes, met een witte cirkel erachter. Alleen vanaf 64em: op een
   smal scherm gaat het formulier voor. Het beeld is versiering (alt=""). */
.hero__student { display: none; }
@media (min-width: 64em) {
  .hero--student .hero__grid { align-items: stretch !important; }
  .hero--student .hero__grid > div:first-child { display: flex; flex-direction: column; }
  .hero--student .hero__grid > .card { align-self: start; }
  .hero__student {
    display: block; position: relative; isolation: isolate;
    margin-top: var(--space-6);
    align-self: center; width: min(100%, 21rem);
  }
  .hero__student::before {
    content: ""; position: absolute; z-index: -1; inset: auto 4% 14%;
    aspect-ratio: 1; border-radius: 50%; background: var(--ras-white); opacity: .7;
  }
  /* de foto is op de dijen afgesneden: zacht laten uitlopen in plaats van
     een harde rand midden in het vlak */
  .hero__student img {
    display: block; width: 100%; height: auto; max-height: 26rem; object-fit: contain; object-position: bottom;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
            mask-image: linear-gradient(to bottom, #000 72%, transparent);
  }
}
/* Korte kop (FAQ studenten): de student staat rechts op de rand. */
.kop__student { display: none; }
@media (min-width: 64em) {
  .kop--student { position: relative; min-height: 22rem; display: flex; align-items: center; }
  .kop--student > .wrap { width: 100%; }
  .kop__student {
    display: block; position: absolute; z-index: 0; bottom: 0; top: var(--space-6);
    right: max(var(--gutter), calc((100% - var(--container-narrow)) / 2 - 20rem));
  }
  .kop__student::before {
    content: ""; position: absolute; z-index: -1; inset: auto -12% 0;
    aspect-ratio: 1; border-radius: 50%; background: var(--ras-white); opacity: .7;
  }
  .kop__student img { display: block; height: 100%; width: auto; }
}
/* Stadspagina's: de student staat boven de kaart "Kort samengevat"; de
   kaart valt over de benen, zodat hoofd en schouders erboven uitkomen. */
.stad__student { display: none; }
@media (min-width: 64em) {
  .stad__rechts { position: relative; isolation: isolate; }
  .stad__student {
    display: block; position: relative; z-index: 0;
    width: 15rem; margin: 0 var(--space-7) 0 auto;
  }
  .stad__student::before {
    content: ""; position: absolute; z-index: -1; left: 50%; bottom: -2rem;
    width: 19rem; aspect-ratio: 1; translate: -50% 0;
    border-radius: 50%; background: var(--ras-white); opacity: .7;
  }
  .stad__student img { display: block; width: 100%; height: auto; }
  .stad__student--groep { width: 24rem; }
  .hero--stad .stad__student--groep + .story__aside { margin-top: -5rem; }
  .stad__student--armen { width: 12.5rem; }
  .stad__student--armen img {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%);
            mask-image: linear-gradient(to bottom, transparent, #000 14%);
  }
  .hero--stad .hero__grid { align-items: center !important; }
  .hero--stad .story__aside { position: relative; z-index: 1; margin-top: -10rem; }
}

/* ---------- Landingspagina's werkgevers (16 oktober 2026) ----------
   Opbouw uit _bouw/landing_opmaak.py: kop met vrijstaande student en twee
   zwevende kaartjes, kaarten met lijniconen, stappen met verbindingslijn,
   tekstblokken in twee kolommen, uitgelicht tarief, foto bij
   poolmanagement. Beweging alleen via opacity en transform. */
.lp-ico {
  width: 3.25rem; height: 3.25rem; flex: none;
  display: grid; place-items: center;
  border-radius: 1rem; background: var(--ras-blue-100); color: var(--ras-blue-600);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.lp-ico--groot { width: 4.5rem; height: 4.5rem; border-radius: 1.25rem; }

/* kop: vrijstaande student zonder achtergrondvlak (16-10-2026: geen blauwe gloed);
   op mobiel kleiner onder de knoppen, zonder kaartjes */
.lp-held { position: relative; isolation: isolate; width: 13rem; margin: 0 auto calc(var(--space-7) * -1); }
.lp-held img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.lp-held::before {   /* lichtroze cirkel, zelfde wit-op-oranje als de grote cirkel rechtsboven in de kop */
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: 6%;
  width: 120%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: var(--ras-white); opacity: .55;
}
.lp-chip { display: none; }
@media (min-width: 64em) {
  .lp-chip { display: flex; }
  .lp-hero .hero__grid { align-items: end; }
  .lp-held {
    display: block; position: relative; isolation: isolate;
    justify-self: center; width: min(100%, 22rem); margin-bottom: calc(var(--space-7) * -1);
  }
    .lp-held::before { bottom: 8%; width: 128%; }
  .lp-held img {
    display: block; width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
            mask-image: linear-gradient(to bottom, #000 80%, transparent);
  }
  .lp-chip {
    position: absolute; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
    background: var(--ras-white); border-radius: 1rem; box-shadow: var(--v2-zweef-hoog);
    font-weight: var(--fw-bold); font-size: var(--fs-small); color: var(--color-text); white-space: nowrap;
  }
  .lp-chip__ico {
    width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
    border-radius: .75rem; background: var(--ras-orange-100); color: var(--ras-blue-600);
  }
  .lp-chip--1 { top: 22%; left: -32%; }
  .lp-chip--2 { bottom: 26%; right: -14%; }
  .lp-chip--2 .lp-chip__ico { background: var(--ras-blue-100); }
}
.lp-hero { overflow: hidden; }

/* inleiding */
.lp-kort { position: relative; }
.lp-kort .ticks li { font-weight: var(--fw-medium); }

/* kaarten */
.lp-kaarten { align-items: stretch; }
.lp-kaart { display: flex; flex-direction: column; gap: var(--space-3); transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s; }
.lp-kaart .lp-ico { margin-bottom: var(--space-2); }
.lp-kaart:hover { transform: translateY(-4px); box-shadow: var(--v2-zweef-hoog); }
.lp-kaart:hover .lp-ico { transform: scale(1.06) rotate(-4deg); }
/* 17-10-2026: brede dienstkaart met het icoon los links; de tekst ernaast mag
   uit meer alinea's bestaan (eerder grid, dat liep mis bij een extra alinea) */
.lp-diensten .lp-kaart {
  display: block; position: relative;
  padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 3.25rem + var(--space-5));
}
.lp-diensten .lp-kaart .lp-ico { position: absolute; left: var(--space-6); top: var(--space-6); margin: 0; }
.lp-diensten .lp-kaart > :not(.lp-ico) { margin: 0; }
.lp-diensten .lp-kaart > :not(.lp-ico) + :not(.lp-ico) { margin-top: var(--space-2); }
.lp-diensten .lp-kaart:nth-child(even) .lp-ico { background: var(--ras-orange-100); }
.js-reveal .reveal.lp-kaart .lp-ico { opacity: 0; transform: scale(.6); transition: opacity .5s ease .25s, transform .7s cubic-bezier(.16, 1, .3, 1) .25s; }
.js-reveal .reveal.lp-kaart.is-in .lp-ico { opacity: 1; transform: none; }
.js-reveal .reveal.lp-kaart.is-in:hover .lp-ico { transform: scale(1.06) rotate(-4deg); }

/* stappen */
.lp-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); position: relative; }
.lp-stap { position: relative; padding: var(--space-6); background: var(--ras-white); border-radius: var(--v2-kaart); box-shadow: var(--v2-zweef); }
.lp-stap .step__n { position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--ras-white); }
.lp-stap h3 { margin-top: 0; }
.lp-stap p { margin-top: var(--space-2); }
@media (min-width: 64em) {
  .lp-stappen--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lp-stappen--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* verbindingslijn achter de nummers; tekent zich bij het inschuiven */
  .lp-stappen::before {
    content: ""; position: absolute; z-index: 0; top: calc(var(--space-6) + 1.25rem); left: 6%; right: 6%;
    height: 2px; background: var(--ras-orange-300, var(--accent)); transform-origin: left; opacity: .5;
  }
  .js-reveal .lp-stappen.reveal::before { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1) .2s; }
  .js-reveal .lp-stappen.reveal.is-in::before { transform: scaleX(1); }
}
.js-reveal .lp-stappen.reveal { opacity: 1; transform: none; }

/* tekstblokken in twee kolommen */
.lp-tekst__grid { display: grid; gap: var(--space-5); }
.lp-tekst__kop { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.lp-tekst__kop .t-h2 { margin: 0; }
.lp-tekst .prose > :first-child { margin-top: 0; }
.lp-tekst--lijn .wrap { border-top: 1px solid var(--color-border); padding-top: var(--space-9); }
.lp-tekst + .lp-tekst { padding-top: 0; }
@media (min-width: 64em) {
  .lp-tekst__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); }
  .lp-tekst__kop { position: sticky; top: 7rem; align-self: start; }
}
.lp-tekst__kop:hover .lp-ico { transform: translateY(-3px); }

/* poolmanagement met foto */
.lp-foto { display: grid; gap: var(--space-7); align-items: center; }
.lp-foto__beeld { margin: 0; }
.lp-foto__beeld img { display: block; width: 100%; height: auto; border-radius: var(--v2-koepel); box-shadow: var(--v2-zweef-hoog); }
@media (min-width: 64em) { .lp-foto { grid-template-columns: 7fr 5fr; gap: var(--space-9); } }

/* uitgelicht tarief */
.lp-tarief {
  display: grid; gap: var(--space-5); align-items: center;
  padding: var(--space-7); border-radius: var(--v2-kaart);
  background: var(--ras-white); border: 2px solid var(--ras-blue-300); box-shadow: var(--v2-zweef);
}
.lp-tarief .prose > :first-child { margin-top: 0; }
@media (min-width: 64em) { .lp-tarief { grid-template-columns: auto 1fr auto; gap: var(--space-7); padding: var(--space-8); } }

/* linkkaarten: eenvoudige kaart (lp-link-kaart); de fotovariant (lp-link) blijft beschikbaar */
.lp-link-kaart { display: flex; flex-direction: column; min-height: 9rem; }
.lp-link {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: var(--ras-white); border-radius: var(--v2-kaart); box-shadow: var(--v2-zweef);
  text-decoration: none; color: var(--color-text);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s;
}
.lp-link:hover { color: var(--color-text); transform: translateY(-4px); box-shadow: var(--v2-zweef-hoog); }
.lp-link__beeld { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ras-blue-100); }
.lp-link__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.lp-link:hover .lp-link__beeld img { transform: scale(1.05); }
.lp-link__tekst { display: flex; flex-direction: column; flex: 1; gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-6); }
.lp-link__titel { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: 1.25; text-wrap: balance; }
.lp-link__meer { margin-top: auto; font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--color-link); }
.lp-link__meer .arrow { display: inline-block; transition: transform .3s; }
.lp-link:hover .lp-link__meer .arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .lp-link, .lp-link__beeld img, .lp-link__meer .arrow { transition: none; } .lp-link:hover, .lp-link:hover .lp-link__beeld img { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .lp-ico, .lp-kaart, .lp-stappen::before,
  .js-reveal .reveal.lp-kaart .lp-ico, .js-reveal .lp-stappen.reveal::before { transition: none; opacity: 1; transform: none; }
  .lp-kaart:hover, .lp-kaart:hover .lp-ico, .lp-tekst__kop:hover .lp-ico { transform: none; }
}
@media (min-width: 64em) {
  .lp-hero .hero__grid > div:first-child { align-self: center; padding-block: var(--space-7); }
  .lp-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* bredere foto (twee personen of een groep) en vinkjes in de kop */
@media (min-width: 64em) { .lp-held--breed { width: min(100%, 30rem); } }
@media (max-width: 63.99em) { .lp-held--breed { width: 18rem; } }
.lp-hero__ticks { margin-top: var(--space-6); }
/* de stuur-foto is rechts afgesneden: daar zacht laten uitlopen */
.lp-held img[src*="werkgever-transport"] {
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent), linear-gradient(to right, #000 82%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, #000 80%, transparent), linear-gradient(to right, #000 82%, transparent);
          mask-composite: intersect;
}
/* groepsfoto's: kaartjes boven links en onder rechts, weg van de gezichten */
@media (min-width: 64em) {
  .lp-held--breed .lp-chip--1 { top: 0; left: -16%; }
  .lp-held--breed .lp-chip--2 { bottom: 8%; right: -4%; }
}
@media (min-width: 64em) {
  /* schoonmaakfoto: het eerste kaartje links naast de studente, niet over de ontstopper */
  .lp-held:has(img[src*="werkgever-schoonmaak"]) .lp-chip--1 { top: 52%; left: -30%; }
}
/* dienstkaart op een smal scherm: icoon boven de tekst */
@media (max-width: 47.99em) {
  .lp-diensten .lp-kaart { padding: var(--space-6); }
  .lp-diensten .lp-kaart .lp-ico { position: static; margin-bottom: var(--space-4); }
}

/* ---------- Kaart Belgie en Nederland (17 oktober 2026) ----------
   _bouw/kaart_be_nl.py. Belgie lichtoranje, Nederland lichtblauw, pins die
   naar de vestigingen wijzen; de pins vallen zacht op hun plaats bij het
   inschuiven (alleen transform en opacity). */
.kaart { margin: 0; padding: var(--space-6); background: var(--ras-white); border-radius: var(--v2-kaart); box-shadow: var(--v2-zweef); }
.kaart__svg { display: block; width: 100%; height: auto; max-height: 34rem; overflow: hidden; }
.kaart__buur { fill: var(--ras-blue-50, #f3faff); stroke: var(--color-border); stroke-width: 1; }
.kaart__nl { fill: var(--ras-blue-100); stroke: var(--ras-blue-300); stroke-width: 1.2; stroke-linejoin: round; }
.kaart__be { fill: var(--ras-orange-100); stroke: var(--ras-orange-300); stroke-width: 1.2; stroke-linejoin: round; }
.kaart__pin path { stroke: var(--ras-white); stroke-width: 1.5; }
.kaart__pin circle { fill: var(--ras-white); }
.kaart__pin--nl path { fill: var(--ras-blue-600); }
.kaart__pin--be path { fill: var(--ras-orange-500); }
.kaart__label { font: 700 15px var(--font-sans, Heebo, sans-serif); fill: var(--ras-blue-700); paint-order: stroke; stroke: var(--ras-white); stroke-width: 4px; stroke-linejoin: round; }
.kaart__legenda { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-4); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-text); }
.kaart__legenda span { display: inline-flex; align-items: center; gap: var(--space-2); }
.kaart__stip { width: .75rem; height: .75rem; border-radius: 50%; display: inline-block; }
.kaart__stip--be { background: var(--ras-orange-500); }
.kaart__stip--nl { background: var(--ras-blue-600); }
.js-reveal .kaart.reveal .kaart__pin { opacity: 0; transform: translateY(-14px); transition: opacity .4s ease var(--d, 0ms), transform .6s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0ms); }
.js-reveal .kaart.reveal.is-in .kaart__pin { opacity: 1; transform: none; }
.kaart__pin { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .js-reveal .kaart.reveal .kaart__pin { opacity: 1; transform: none; transition: none; } }

/* teamfoto en kaart naast de tekst (zelfde opbouw als poolmanagement) */
.lp-foto--links .lp-foto__beeld { order: -1; }
@media (min-width: 64em) {
  .lp-foto--links { grid-template-columns: 5fr 7fr; }
  .lp-foto--kaart { grid-template-columns: 7fr 5fr; align-items: start; }
}
.lp-foto__beeld--team img { border-radius: var(--v2-kaart); }

/* vestigingenblok: cijfers en twee kantoorkaarten naast de kaart (17-10-2026) */
.lp-cijfers { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.lp-cijfer { padding: var(--space-4); background: var(--ras-white); border-radius: 1rem; box-shadow: var(--v2-zweef); }
.lp-cijfer::before { content: none !important; }
.lp-cijfer__n { display: block; font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.1; color: var(--ras-blue-700); }
.lp-cijfer__l { display: block; margin-top: var(--space-1); font-size: var(--fs-small); color: var(--color-text-secondary); }
.lp-kantoren { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
@media (min-width: 40em) { .lp-kantoren { grid-template-columns: 1fr 1fr; } }
.lp-kantoor {
  display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5);
  background: var(--ras-white); border-radius: var(--v2-kaart); box-shadow: var(--v2-zweef);
  text-decoration: none; color: var(--color-text);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s;
}
.lp-kantoor:hover { color: var(--color-text); transform: translateY(-4px); box-shadow: var(--v2-zweef-hoog); }
.lp-kantoor .lp-ico { width: 2.75rem; height: 2.75rem; border-radius: .8rem; background: var(--ras-orange-100); }
.lp-kantoor__tekst { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-small); line-height: 1.5; }
.lp-kantoor__tekst strong { font-size: var(--fs-body); }
.lp-kantoor__meer { margin-top: var(--space-2); font-weight: var(--fw-medium); color: var(--color-link); }
.lp-kantoor__meer .arrow { display: inline-block; transition: transform .3s; }
.lp-kantoor:hover .lp-kantoor__meer .arrow { transform: translateX(4px); }
.lp-foto--kaart .prose > p:last-child { margin-top: var(--space-5); }
@media (min-width: 64em) { .lp-foto--kaart { align-items: center; } }
@media (max-width: 30em) { .lp-cijfers { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .lp-kantoor, .lp-kantoor__meer .arrow { transition: none; } .lp-kantoor:hover, .lp-kantoor:hover .lp-kantoor__meer .arrow { transform: none; } }

/* studentenpagina's: Kort samengevat als brede kaart onder de kop (17-10-2026) */
.lp-samenvatting {
  position: relative; margin-bottom: var(--space-8); padding: var(--space-6) var(--space-7);
  background: var(--ras-white); border: 1px solid var(--color-border); border-left: 4px solid var(--ras-orange-500);
  border-radius: var(--v2-kaart); box-shadow: var(--v2-zweef);
}
.lp-samenvatting p { margin-top: var(--space-3); max-width: none; font-size: var(--fs-body); line-height: 1.65; }
.lp-samenvatting-sectie { padding-bottom: 0; }
/* heel hoge foto (armen omhoog): smaller, zodat de kop niet te hoog wordt */
.lp-held--hoog { width: 11rem; }
@media (min-width: 64em) { .lp-held--hoog { width: min(100%, 16rem); } }

/* ---------- Vestigingspagina's Antwerpen en Brussel (17 oktober 2026) ----------
   _bouw/vestiging_opmaak.py: foto in een koepel met een zwevende adreskaart,
   kaart van Google Maps in een afgeronde kaart, vijf sectorkaarten op een rij. */
.vg-held { position: relative; }
.vg-held img { display: block; width: 100%; height: auto; border-radius: var(--v2-koepel); box-shadow: var(--v2-zweef-hoog); }
.vg-adres {
  position: absolute; left: -1.5rem; bottom: 1.5rem; display: flex; gap: var(--space-3); align-items: center;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);
  background: var(--ras-white); border-radius: 1rem; box-shadow: var(--v2-zweef-hoog); font-size: var(--fs-small); line-height: 1.45;
}
.vg-adres .lp-ico { width: 2.75rem; height: 2.75rem; border-radius: .8rem; background: var(--ras-orange-100); }
@media (max-width: 63.99em) { .vg-adres { position: static; margin-top: var(--space-4); } }
.vg-kaart { border-radius: var(--v2-kaart); overflow: hidden; background: var(--ras-white); box-shadow: var(--v2-zweef); aspect-ratio: 4 / 3.4; }
.vg-kaart iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 64em) { .vg-sectoren.grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 40em) and (max-width: 63.99em) { .vg-sectoren.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-kaart .ticks { margin-top: var(--space-2); }

/* ---------- Laatste kale pagina's (17 oktober 2026, _bouw/kaal_opmaak.py) ---------- */
/* werken bij ons: zes redenen als kleine kaarten */
.lp-kaart--klein { flex-direction: row; align-items: center; gap: var(--space-4); padding: var(--space-5); }
.lp-kaart--klein .lp-ico { margin: 0; }
.lp-kaart--klein .t-h3 { margin: 0; font-size: var(--fs-h4); }
.kl-redenen .lp-kaart:nth-child(even) .lp-ico { background: var(--ras-orange-100); }
@media (min-width: 64em) { .kl-redenen.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* faq: themakop met icoon */
.kl-thema { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.kl-thema .t-h2 { margin: 0; }
.kl-direct a { font-weight: var(--fw-medium); }
.kl-faq-student .lp-held { width: 11rem; }
@media (min-width: 64em) { .kl-faq-student .lp-held { width: min(100%, 15rem); } }
[id^="thema-"] { scroll-margin-top: 7rem; }

/* jobstudent inhuren per functie: kaarten met vrijstaande student */
.kl-functies.grid { align-items: stretch; }
@media (min-width: 64em) { .kl-functies.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kl-functie {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; color: var(--color-text);
  background: var(--ras-white); border-radius: var(--v2-kaart); box-shadow: var(--v2-zweef);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s;
}
.kl-functie:hover { color: var(--color-text); transform: translateY(-4px); box-shadow: var(--v2-zweef-hoog); }
.kl-functie__beeld { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 11rem; overflow: hidden; background: var(--ras-orange-100); }
.kl-functie__beeld::before { content: ""; position: absolute; left: 50%; bottom: -3.5rem; width: 12rem; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--ras-white); opacity: .6; }
.kl-functie:nth-child(even) .kl-functie__beeld { background: var(--ras-blue-100); }
.kl-functie__beeld img { position: relative; height: 92%; width: auto; max-width: 90%; object-fit: contain; object-position: bottom; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.kl-functie:hover .kl-functie__beeld img { transform: translateY(-4px) scale(1.03); }
.kl-functie__tekst { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; padding: var(--space-5) var(--space-6) var(--space-6); }
.kl-functie__titel { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: 1.25; }
.kl-functie__beschr { font-size: var(--fs-small); color: var(--color-text-secondary); line-height: 1.55; }
.kl-functie__meer { margin-top: auto; padding-top: var(--space-3); font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--color-link); }
.kl-functie__meer .arrow { display: inline-block; transition: transform .3s; }
.kl-functie:hover .kl-functie__meer .arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .kl-functie, .kl-functie__beeld img, .kl-functie__meer .arrow { transition: none; } .kl-functie:hover, .kl-functie:hover .kl-functie__beeld img { transform: none; } }

/* formulieren: bredere groepsfoto onder de tekst */
@media (min-width: 64em) { .hero__student--breed { width: min(100%, 28rem); } .hero__student--breed img { max-height: 22rem; } }
.kl-functie__titel { margin: 0; }
@media (min-width: 64em) { .hero__student--breed::before { inset: auto 22% 6%; } }
/* FAQ-pagina's: vragen breder dan de leeskolom (17-10-2026, vraag van de klant) */
.wrap--faq { max-width: 62rem; }
/* sectoren op de werkgevershomepage: vrijstaande studenten in vijf even grote kaarten (17-10-2026) */
.v2 .kl-sectoren.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (min-width: 40em) { .v2 .kl-sectoren.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .v2 .kl-sectoren.grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
.kl-sectoren .kl-functie__beeld { height: 10rem; }
.kl-sectoren .kl-functie__tekst { padding: var(--space-4) var(--space-5) var(--space-5); }
.kl-sectoren .kl-functie__titel { font-size: var(--fs-h4); }
.kl-sectoren .kl-functie__meer { padding-top: var(--space-2); }
.kl-sectoren .kl-functie__beeld, .kl-sectoren .kl-functie:nth-child(even) .kl-functie__beeld { background: var(--ras-blue-100); }
/* lijniconen uit de sprite (<use href="#i-...">): de symbolen hebben geen eigen
   lijnstijl, dus anders worden ze als zwarte vlakken getekend (19-10-2026) */
svg:has(> use[href^="#i-"]) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.benefit__ico { color: var(--ras-white); }   /* wit op oranje (huisstijl) */
.btn--store { display: inline-flex; align-items: center; gap: .6rem; }
.btn--store svg { flex: none; margin-top: -2px; }
/* team van vier: vrijstaande foto's op hetzelfde lichte vlak, zodat ze bij elkaar passen (19-10-2026) */
.person__foto {
  position: relative; display: flex; justify-content: center; align-items: flex-end;
  aspect-ratio: 1 / 1; margin-bottom: var(--space-4); overflow: hidden;
  border-radius: var(--radius-card); background: var(--ras-blue-100);
}
.person__foto::before { content: ""; position: absolute; left: 50%; bottom: -18%; width: 82%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--ras-white); opacity: .65; }
.person .person__foto img { position: relative; width: auto; height: 92%; max-width: 100%; aspect-ratio: auto; object-fit: contain; object-position: bottom; border-radius: 0; margin: 0; }

/* Video "Het sollicitatieproces van A tot Z" (21-10-2026): staande video naast
   de vijf vragen; een klik op een vraag springt naar dat deel van de video. */
.v2 .vidproces { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 48em) { .v2 .vidproces { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--space-8); } }
.v2 .vidproces__video { width: 100%; max-width: 20rem; margin-inline: auto; border-radius: 1.75rem; overflow: hidden; box-shadow: var(--v2-zweef-hoog); background: var(--ras-blue-900); }
.v2 .vidproces__video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.v2 .vidproces__stappen { list-style: none; margin: var(--space-3) 0 var(--space-6); padding: 0; display: grid; gap: var(--space-2); }
.v2 .vidproces__stappen button {
  display: flex; align-items: baseline; gap: var(--space-4); width: 100%; padding: var(--space-4) var(--space-5);
  font: inherit; text-align: left; color: var(--color-text); background: var(--ras-white);
  border: 1px solid var(--color-border); border-radius: var(--radius-card); cursor: pointer;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.v2 .vidproces__stappen button:hover { transform: translateX(4px); }
.v2 .vidproces__stappen button:focus-visible { outline: 3px solid var(--ras-blue-300); outline-offset: 2px; }
.v2 .vidproces__stappen button[aria-current="true"] { border-color: var(--ras-orange-500); box-shadow: inset 4px 0 0 var(--ras-orange-500); }
.v2 .vidproces__tijd { flex: none; min-width: 2.75rem; font-weight: var(--fw-bold, 700); color: var(--ras-blue-600); font-variant-numeric: tabular-nums; }
.v2 .vidproces__noot { margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
@media (prefers-reduced-motion: reduce) { .v2 .vidproces__stappen button { transition: none; } .v2 .vidproces__stappen button:hover { transform: none; } }

/* Hero-foto op tablet en mobiel (21-10-2026): onder 64em werd de foto een brede,
   lage strook (min. 20rem hoog), waardoor de boog een ellips werd en de oranje
   lijn naast de foto viel. Nu een vaste verhouding, gecentreerd, en de lijn
   precies 14 px naar linksonder verschoven, net als op desktop. */
@media (max-width: 63.99em) {
  .v2 .hero--dia__beeldwrap { width: 100%; max-width: 34rem; margin-inline: auto; }
  .v2 .hero--dia__beeld { min-height: 0; aspect-ratio: 4 / 5; }
  .v2 .hero--dia__beeldwrap::before {
    inset: 14px calc(var(--gutter) + 14px) -14px calc(var(--gutter) - 14px);
  }
}
@media (max-width: 30em) {
  .v2 .hero--dia__beeld { aspect-ratio: 1 / 1; }
  .v2 .hero--dia__beeldwrap::before { inset: 10px calc(var(--gutter) + 10px) -10px calc(var(--gutter) - 10px); }
}