/* ==========================================================================
   Mobile Responsive Styles
   Breakpoint: max-width 920px (was 768px — zie site-overrides.css)
   Based on Figma mobile designs (~403px viewport)
   ========================================================================== */

/* ---- Desktop-only: hide mobile-only elements ---- */
.header__menu-toggle {
  display: none;
}

.client-item__card-image {
  display: none;
}

/* ---- Mobile Menu Overlay (hidden by default, slides in) ---- */
/* Het menu neemt het kader van de pagina over: dezelfde blauwe rand van 8px
   en dezelfde ronde hoeken, zodat het overlegt als een paneel bovenop de
   site in plaats van als een tweede, kaderloos scherm. */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background: var(--blue-100);
  border: 8px solid var(--blue-400);
  border-radius: var(--radius-outer);
  display: flex;
  flex-direction: column;
  padding: 16px 16px 24px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.mobile-menu--open {
  transform: translateX(0);
}

.mobile-menu__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 40px;
  flex-shrink: 0;
}

.mobile-menu__logo {
  display: flex;
  align-items: center;
  color: var(--green-1200);
  text-decoration: none;
}

/* Zelfde getekende woordmerk als in de header en de hero, op de maat die het
   in het ontwerp heeft: 26px hoog, breedte volgt uit de viewBox. */
.mobile-menu__logo-mark {
  display: block;
  height: 26px;
  width: auto;
  aspect-ratio: 488.947 / 124.383;
}

.mobile-menu__close {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  line-height: 1.1;
  color: var(--green-1200);
}

.mobile-menu__close-icon {
  width: 16px;
  height: 24px;
  flex-shrink: 0;
}

.mobile-menu__close-icon img {
  width: 100%;
  height: 100%;
}

/* De menu-items springen een kantlijn in ten opzichte van het woordmerk en de
   sluitknop erboven — dat onderscheidt de lijst van de balk waarin hij hangt. */
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Niet krimpen: met zes items op een kort scherm moet het menu scrollen,
     niet de regels op elkaar duwen. */
  flex: 1 0 auto;
  padding-left: 16px;
}

.mobile-menu__link {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--green-1200);
  text-decoration: none;
  padding: 8px 0;
}

/* Telefoon en mailadres onderaan, op dezelfde kantlijn als de menu-items. */
.mobile-menu__contact {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-top: auto;
  padding-left: 16px;
  padding-top: 32px;
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--green-1200);
}

.mobile-menu__contact a {
  color: inherit;
  text-decoration: none;
  width: fit-content;
}

/* ==========================================================================
   Mobile Breakpoint
   ========================================================================== */
@media (max-width: 920px) {

  /* Eén inspringing voor alle secties, net als op desktop. Er liepen er twee
     door elkaar: 8 of 9px bij de ene sectie, 16px bij de andere, waardoor de
     kantlijn per sectie verschoof (op de homepage stonden er drie naast
     elkaar: 16, 17 en 24px vanaf de schermrand). 16px is de waarde die de
     meeste secties al aanhielden, inclusief alle pagina-hero's op één na. */
  :root {
    --page-padding-x: 16px;
  }

  /* ===================== Global Layout ===================== */
  .page__inner {
    margin: 8px;
  }

  .page::after {
    border-width: 8px;
  }

  .main-wrapper {
    padding-top: 0;
  }

  .sections {
    gap: 48px;
  }

  /* ===================== Header ===================== */
  .header-wrapper {
    height: 63px;
    padding: 0;
  }

  .header {
    top: calc(8px + var(--admin-bar-h, 0px));
    left: 8px;
    right: 8px;
    /* Zelfde inspringing als de secties eronder, zodat het woordmerk en de
       paginatitel op dezelfde kantlijn beginnen; met 9px stond het logo 7px
       naar links ten opzichte van alles daaronder. */
    padding: 0 var(--page-padding-x);
    height: 63px;
    overflow: clip;
    /* Het woordmerk en "Menu" horen in het midden van de balk te hangen.
       .header staat op `flex-start` (header.css), waar het op desktop een
       balk van 73px met 10px padding vult; op mobiel is die balk 63px zonder
       verticale padding, en dan komt het logo bijna tegen de bovenrand aan —
       5,7px lucht erboven tegen 26,6px eronder. Gecentreerd is dat aan beide
       kanten 16,2px, en "Menu" zakt de 5px mee die het van het midden af
       stond. */
    align-items: center;
  }

  .header__logo {
    height: 42px;
    font-size: 2.625rem;
    align-items: center;
  }

  /* Hide desktop navigation */
  .header__nav-wrapper {
    display: none;
  }

  /* Hide desktop bracket icon */
  .header__lang-icon {
    display: none;
  }

  /* Show mobile menu toggle */
  .header__menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 53px;
    padding: 12px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: var(--fw-semibold);
    font-size: 1rem;
    line-height: 1.1;
    color: var(--green-1200);
  }

  .header__menu-toggle-icon {
    display: none;
  }

  /* ===================== Hero (Homepage) ===================== */
  /*
     Op een telefoon heeft de landingspagina geen hero.
     ----------------------------------------------------------------------
     Het mobiele ontwerp zette hier hetzelfde beeld neer als op desktop: een
     trap van gekleurde balken met daarboven een wit titelblok dat over de
     navigatiebalk heen viel, en een scrollanimatie die dat blok in het kleine
     navlogo liet morfen. Op verzoek is dat er op de telefoon helemaal uit —
     de balk hoort er hetzelfde uit te zien als op elke andere pagina, zonder
     gekleurde blokken eronder.

     Alleen verbergen en niet uit de markup halen: de hero is site-meubilair
     dat op desktop nog gewoon meedoet (zie HomeHero in chrome.tsx), en dit
     is een kwestie van breedte, niet van pagina. Boven 920px staat alles er
     onveranderd bij, inclusief de morph — zie scroll-animation.js, dat op
     dezelfde grens uitgaat.

     Wat er hieronder aan mobiele heromaten stond — de balkhoogtes in vw, het
     witte titelblok op top: -63px, het haakje rechtsboven — is daarmee dode
     opmaak geworden en weg. De desktopwaarden in hero.css blijven ongemoeid.

     Het navlogo moet nu wel meteen zichtbaar zijn: het werd altijd door dit
     titelblok afgedekt en door de animatie aangezet. Zie "Navlogo staat er
     meteen" hieronder.
  */
  .hero {
    display: none;
  }

  /* Zonder hero is de inspringing onder de balk hetzelfde als op de andere
     pagina's: 32px, net als .over__body, .werkenbij__body en
     .werkwijze__body. De 48px tussenruimte stond er al. */
  .hero-area__top {
    padding-bottom: 0;
  }

  .sections {
    padding-top: 32px;
  }

  /* Navlogo staat er meteen
     ----------------------------------------------------------------------
     header.css zet het woordmerk in de navbalk op `opacity: 0`, omdat op
     desktop de scrollanimatie het aanzet zodra de herotitel erin landt. Op
     een telefoon is er geen herotitel en geen animatie meer, dus zonder deze
     regel zou de navbalk op de landingspagina leeg blijven.

     Elke andere pagina zet hem zelf al aan, via `inner-visible` op de nav of
     een regel op de paginaklasse (over.css, werkwijze.css, werkenbij.css).
     Hier staat hij op de klasse zelf, zodat het voor allemaal geldt en er
     niets meer op een animatie wacht. */
  .header__logo-text {
    opacity: 1;
  }

  .hero-area__scroll-spacer {
    display: none;
  }

  /* ===================== Intro ===================== */
  .intro {
    padding: 0 var(--page-padding-x);
  }

  .intro__text {
    font-size: 2.125rem; /* 34px — Mob/Med/H2 */
    line-height: 1.2;
    letter-spacing: -0.68px;
    font-weight: var(--fw-medium);
  }

  /* ===================== Photos ===================== */
  .photos {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 0;
    justify-content: center;
    scrollbar-width: none;
  }

  .photos::-webkit-scrollbar {
    display: none;
  }

  .photos__item {
    flex: 0 0 288px;
    scroll-snap-align: start;
    aspect-ratio: auto;
    height: 397px;
    border-radius: var(--radius-card);
  }

  .photos__item--video,
  .photos__item:nth-child(2) {
    flex: 0 0 240px;
  }

  /* ===================== Section Label (shared) ===================== */
  .section-label {
    gap: 8px;
  }

  .section-label__bracket-char {
    font-size: 1.625rem; /* 26px */
    color: var(--blue-600);
    letter-spacing: -0.13px;
  }

  .section-label__text {
    font-size: 1.125rem; /* 18px — Mob/SBld/P */
    font-weight: var(--fw-semibold);
    letter-spacing: 0.09px;
    line-height: 1.4;
  }

  .section-label__bracket {
    width: 11px;
  }

  /* ===================== Services ===================== */
  .services {
    flex-direction: column;
    gap: 12px;
    padding: 0 var(--page-padding-x);
    align-items: flex-start;
  }

  .services__cards {
    width: 100%;
    align-items: stretch;
  }

  .services__list {
    max-width: 100%;
    gap: 8px;
  }

  .service-card {
    width: 100%;
  }

  .service-card__inner {
    padding: 10px 12px 12px;
  }

  .service-card__content {
    flex-direction: column;
    gap: 6px;
  }

  .service-card__title {
    font-size: 1.375rem; /* 22px — Mob/SBld/H5 */
    font-weight: var(--fw-semibold);
    line-height: 1.22;
  }

  .service-card__desc {
    font-size: 0.9375rem; /* 15px — Mob/Med/Cap */
    font-weight: var(--fw-medium);
    line-height: 1.4;
    letter-spacing: 0.075px;
  }

  .service-card__desc-col {
    gap: 16px;
  }

  .btn {
    padding: 8px 12px;
    gap: 6px;
  }

  .btn__label {
    font-size: 0.8125rem; /* 13px — Mob/SBld/Sm-Cap */
    font-weight: var(--fw-semibold);
    letter-spacing: 0.26px;
    line-height: 1.1;
  }

  .btn__arrow {
    font-family: var(--font-inter);
    font-weight: var(--fw-semibold);
    font-size: 1rem;
    letter-spacing: -0.08px;
    line-height: 1.4;
  }

  /* ===================== Clients / Cases (mobile) ===================== */
  .clients {
    flex-direction: column;
    min-height: auto;
    padding: 0 var(--page-padding-x);
    overflow: visible;
  }

  .clients__bg {
    display: none;
  }

  .clients__content {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 0;
    background: none;
    gap: 12px;
  }

  .clients__list {
    gap: 12px;
  }

  /* Override desktop spacing for all client-items */
  .client-item,
  .client-item:first-child,
  .client-item:last-child,
  .client-item:not(:first-child):not(:last-child) {
    padding: 0;
  }

  /* `cursor` stond hier op `default` zolang de kaart nergens heen ging; nu
     hij een link is hoort de aanwijzer weer bij wat er gebeurt. Op een
     telefoon zie je het niet, op een aangesloten muis of een tablet met
     trackpad wel — en deze regels gelden tot 920px. */
  .client-item {
    display: flex;
    flex-direction: column;
    border-bottom: none;
    position: relative;
    gap: 0;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--radius-small);
  }

  /* Card image — shown on mobile, hidden on desktop */
  .client-item__card-image {
    display: block;
    width: 100%;
    height: 247px;
    position: relative;
    overflow: hidden;
  }

  .client-item__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Logo row overlays the card image at bottom-left */
  .client-item__logo-row {
    position: absolute;
    top: calc(247px - 12px - 38px); /* image height − padding − logo height */
    left: 12px;
    z-index: 2;
  }

  .client-item__logo-box {
    width: auto;
    height: 38px;
    padding: 0 6.909px;
    background: var(--base-200);
    border-radius: var(--radius-small);
    gap: 6.909px;
    transition: none;
  }

  .client-item__name {
    opacity: 1;
    transition: none;
    font-size: 0.9375rem; /* 15px — Mob/Med/Cap */
    letter-spacing: 0.075px;
    line-height: 1.4;
  }

  .client-item__quote {
    font-size: 1.375rem; /* 22px — Mob/Med/H5 */
    font-weight: var(--fw-medium);
    line-height: 1.22;
    background: var(--blue-100);
    padding: 10px 12px 12px;
    border-radius: 0 0 var(--radius-small) var(--radius-small);
  }

  .clients__image {
    display: none;
  }

  /* ===================== Insights ===================== */
  .insights-cta-wrapper {
    gap: 48px;
    padding-top: 0;
    align-items: stretch;
  }

  .insights__inner {
    padding: 24px 16px;
  }

  .insights__layout {
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
    padding-left: 0;
  }

  .insights__label {
    width: auto;
  }

  .insights__cards-wrapper {
    width: 100%;
    flex: 0 0 auto; /* reset desktop flex: 1 that stretches vertically */
  }

  .insights__cards-inner {
    padding-right: 0;
  }

  .insights__cards {
    flex-direction: column;
    gap: 12px;
  }

  /* Insight cards on mobile: grid layout (thumb left, text right) */
  .insight-card {
    width: 100%;
    flex: 0 0 auto; /* reset desktop flex: 1 0 0 that stretches in column */
    display: grid;
    grid-template-columns: 105px 1fr;
    grid-template-rows: 1fr auto;
    background: var(--base-100);
    padding: 8px 10px;
    gap: 0;
    border-radius: var(--radius-card);
    align-items: start;
  }

  /* Stretch card's content wrapper becomes transparent to grid */
  .insight-card--stretch .insight-card__content {
    display: contents;
  }

  .insight-card__image {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 105px;
    height: 111px;
    flex-shrink: 0;
    border-radius: var(--radius-small);
    overflow: hidden;
  }

  .insight-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .insight-card__title {
    grid-column: 2;
    align-self: start;
    padding-left: 12px;
    font-size: 1.125rem; /* 18px — Mob/Med/P */
    font-weight: var(--fw-medium);
    line-height: 1.4;
    letter-spacing: 0.09px;
  }

  .insight-card__date {
    grid-column: 2;
    align-self: end;
    padding-left: 12px;
    font-size: 0.8125rem; /* 13px — Mob/Reg/Sm-Cap */
    font-weight: var(--fw-regular);
    letter-spacing: 0.26px;
    line-height: 1.1;
  }

  /* ===================== CTA ===================== */
  .cta {
    padding: 0 var(--page-padding-x);
    /* mobiel geen tekstkantlijn: dezelfde inspringing als elke sectie */
    padding-left: var(--page-padding-x);
    gap: 16px;
  }

  .cta__text-wrapper {
    padding-right: 0;
    max-width: 100%;
  }

  .cta__heading {
    font-size: 1.75rem; /* 28px — Mob/Med/H3 */
    font-weight: var(--fw-medium);
    line-height: 1.2;
    letter-spacing: -0.28px;
  }

  .cta__button {
    font-size: 0.9375rem; /* 15px */
    font-weight: var(--fw-semibold);
    letter-spacing: 0.15px;
    padding: 12px 16px;
    line-height: 1.4;
  }

  /* ===================== Footer ===================== */
  /* Bars-bg sits exactly above the bottom bar (~53px tall),
     occupying the decoration zone (242px tall) */
  .footer__bars-bg {
    height: 242px;
    top: auto;
    bottom: 53px;
  }

  .footer__container {
    display: flex;
    flex-direction: column;
  }

  .footer__content {
    order: 1;
  }

  /* Footer bar colors differ on mobile (Figma component override) */
  .footer__bar--orange {
    height: 242px;
    width: 100%;
    top: 0;
  }

  .footer__bar--green {
    top: 45px;
    height: 197px;
    width: 88.6%; /* 357/403 */
    background: var(--pink-200); /* pink on mobile, teal on desktop */
  }

  .footer__bar--blue {
    top: 96px;
    height: 146px;
    width: 77.4%; /* 312/403 */
    background: var(--green-800); /* teal on mobile, light blue on desktop */
  }

  .footer__bar--white {
    top: 140px;
    height: 102px;
    width: 66.5%; /* 268/403 */
    background: var(--blue-100); /* blue-100 on mobile, white on desktop */
  }

  /* Footer info: blue-100 bg on mobile (white on desktop) */
  .footer__info {
    padding: 24px 16px;
    background: var(--blue-100);
  }

  .footer__info-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    height: auto;
    padding: 0;
    gap: 0;
  }

  .footer__info-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 243px;
  }

  .footer__info-block {
    padding: 0;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .footer__info-text {
    font-size: 0.9375rem; /* 15px */
    font-weight: var(--fw-medium);
    line-height: 1.4;
    letter-spacing: 0.075px;
    white-space: normal;
  }

  /* Hide arrow spans; show underline on link text blocks */
  .footer__info-link-arrow {
    display: none;
  }

  .footer__info-block:nth-child(4) .footer__info-text,
  .footer__info-block:nth-child(5) .footer__info-text {
    text-decoration: underline;
    text-decoration-color: var(--blue-400);
    text-underline-offset: 2px;
  }

  .footer__partner-logo {
    height: 50px;
    width: 105.846px;
  }

  /* Footer decoration: bars area with Leene text */
  .footer__decoration {
    height: 242px;
    position: relative;
  }

  /* Sizes match Figma imgGroup13's actual content (not the empty SVG canvas):
     Leene letters span 225/403 ≈ 56% wide, bracket spans 36.5/403 ≈ 9% wide */
  .footer__leene-text {
    width: 56%;
    left: 16px;
    bottom: 16px;
    top: auto;
  }

  .footer__corner-mark {
    right: 16px;
    top: 21px;
    width: 9%;
  }

  /* Bottom bar */
  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 16px;
    white-space: nowrap;
    font-size: 0.9375rem; /* 15px */
    letter-spacing: 0.075px;
  }

  .footer__bottom-links {
    gap: 0;
    justify-content: space-between;
    flex: 1;
    padding-left: 32px;
  }

  /* Only show Privacyverklaring and Gedragscode on mobile */
  .footer__bottom-links a:first-child,
  .footer__bottom-links a:last-child {
    display: none;
  }

  /* Underline on bottom bar links */
  .footer__bottom-links a {
    text-decoration: underline;
    text-decoration-color: var(--blue-400);
    text-underline-offset: 2px;
  }

  /* ===================== Expertises Page ===================== */
  /* Figma mobile node 717:8036 — 386px viewport, gap-48px between sections */
  .expertises-page .expertises-content {
    gap: 48px;
    padding: 48px 0;
  }

  .expertises-hero {
    padding: 0 9px;
    gap: 16px;
    width: 100%;
  }

  .expertises-hero__title {
    font-size: 2.75rem; /* 44px — Mob/Med/H1 */
    line-height: 1.1;
    letter-spacing: -1.32px;
    max-width: 100%;
  }

  .expertises-hero__subtitle {
    font-size: 1.375rem; /* 22px — Mob/Reg/H5 */
    line-height: 1.22;
    letter-spacing: 0;
    max-width: 100%;
  }

  /* Section: stack label above cards */
  .expertises-section {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0 8px;
  }

  .expertises-section__label {
    width: auto;
    gap: 8px;
  }

  /* Mobile section label text: 18px Mob/SBld/P (desktop is 22px) */
  .expertises-section__label-text {
    font-size: 1.125rem; /* 18px */
    letter-spacing: 0.09px;
    padding: 10px 0;
  }

  .expertises-cards {
    width: 100%;
    gap: 8px;
  }

  /* Card stays HORIZONTAL on mobile (text left, image right) — matches Figma */
  .expertise-card {
    width: 100%;
    border-radius: var(--radius-small);
  }

  .expertise-card__inner {
    flex-direction: row;
    gap: 17px;
    padding: 12px;
    align-items: stretch;
  }

  .expertise-card__content {
    flex-direction: column;
    justify-content: space-between;
    width: 164px;
    flex: 0 0 164px;
    padding: 0;
    gap: 0;
  }

  .expertise-card__text {
    gap: 8px;
  }

  .expertise-card__title {
    font-size: 1.375rem; /* 22px — Mob/SBld/H5 */
    line-height: 1.22;
    letter-spacing: 0;
  }

  .expertise-card__desc {
    font-size: 0.9375rem; /* 15px — Mob/Med/Cap */
    line-height: 1.4;
    letter-spacing: 0.075px;
  }

  .expertise-card__btn {
    padding: 8px 12px;
    gap: 6px;
    border-radius: var(--radius-card);
  }

  .expertise-card__btn-label {
    font-size: 0.8125rem; /* 13px — Mob/SBld/Sm-Cap */
    letter-spacing: 0.26px;
    line-height: 1.1;
  }

  .expertise-card__btn-arrow {
    font-size: 1rem; /* 16px */
    letter-spacing: -0.08px;
    line-height: 1.4;
  }

  .expertise-card__image {
    width: auto;
    height: auto;
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
  }

  .expertise-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* CTA on expertises page — full width with mobile padding */
  .expertises-page .cta {
    width: 100%;
    padding: 0 var(--page-padding-x);
  }

  /* ===================== Werkwijze Page ===================== */
  .werkwijze__body {
    gap: 48px;
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .werkwijze-hero {
    padding: 0 16px;
    gap: 24px;
  }

  .werkwijze-hero__content {
    gap: 16px;
  }

  .werkwijze-hero__title {
    font-size: 2.75rem; /* 44px — Mob/Med/H1 */
    line-height: 1.1;
    letter-spacing: -1.32px;
  }

  .werkwijze-hero__subtitle {
    font-size: 1.375rem; /* 22px — Mob/Reg/H5 */
    line-height: 1.22;
    letter-spacing: 0;
  }

  /* Static centered layout (Figma mobile node 717:7618):
     middle photo prominent, side photos peek ~6% each side */
  .werkwijze-photos {
    flex-wrap: nowrap;
    overflow: hidden;
    justify-content: center;
    align-items: flex-start;
    gap: 7px;
    padding: 0;
  }

  .werkwijze-photos__item,
  .werkwijze-photos__item:last-child {
    flex: 0 0 101vw; /* sides: 390/386 from Figma — clipped to peek */
    margin: 0;
  }

  .werkwijze-photos__item:nth-child(2) {
    flex: 0 0 84.5vw; /* middle: 326/386 from Figma — fully visible */
  }

  /* Middle photo: 326/386 ≈ 84.5vw — fully visible */
  .werkwijze-photos__image {
    height: auto;
    aspect-ratio: 326 / 378;
    border-radius: 2px;
  }

  /* Side photos are wider (390/386 ≈ 101vw), so they need their own ratio.
     With the middle ratio they came out 74px taller and, being top-aligned,
     their bottom edges no longer lined up. Both ratios resolve to the same
     378/386 height — same convention as .themas-photo. */
  .werkwijze-photos__item:first-child .werkwijze-photos__image,
  .werkwijze-photos__item:last-child .werkwijze-photos__image {
    aspect-ratio: 390 / 378;
  }

  .werkwijze-photos__caption {
    font-size: 0.8125rem; /* 13px — Mob/Reg/Sm-Cap */
  }

  /* Let the caption wrap inside its own photo. The desktop nowrap made the
     long side captions run out of their (mostly off-screen) items and
     collide with the middle one — same treatment as .themas-photo__caption. */
  .werkwijze-photos__caption span {
    white-space: normal;
  }

  .werkwijze-photos__arrow {
    width: 14.5px;
    height: 14.5px;
  }

  /* Wat we doen cards: white bg, no button, compact padding (Figma mobile) */
  .page--werkwijze .services {
    padding: 0 16px;
  }

  .page--werkwijze .service-card__inner {
    background: var(--base-100);
    padding: 10px 12px;
    gap: 0;
  }

  .page--werkwijze .service-card__content {
    gap: 2px;
  }

  .page--werkwijze .service-card__desc-col {
    gap: 2px;
  }

  .page--werkwijze .service-card .btn {
    display: none;
  }

  /* Werkwijze Clients */
  .werkwijze-clients__inner {
    padding: 24px 16px;
  }

  .werkwijze-clients__layout {
    flex-direction: column;
    gap: 12px;
  }

  .werkwijze-clients__label {
    width: auto;
  }

  .werkwijze-clients__content {
    gap: 12px;
    width: 100%;
  }

  .werkwijze-clients__text {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
    padding-right: 0;
  }

  .werkwijze-clients__logos {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
    padding-right: 0;
    justify-content: flex-start;
  }

  .werkwijze-clients__logo-box {
    width: calc(50% - 6px);
  }

  /* ===================== Case Detail Page ===================== */
  /* Figma mobile node 717:7523 — 386px viewport, gap-48px between sections */
  .case-page .case-body {
    gap: 48px;
    padding-bottom: 0;
    align-items: stretch;
  }

  .case-page .case-upper {
    gap: 40px;
  }

  .case-page .case-hero-meta {
    gap: 40px;
  }

  .case-page .case-hero-with-image {
    flex-direction: column;
    gap: 16px;
  }

  .case-hero {
    padding: 0 16px;
    gap: 24px;
  }

  .case-hero__text {
    gap: 16px;
  }

  .case-hero__title {
    font-size: 2.75rem; /* 44px — Mob/Med/H1 */
    line-height: 1.1;
    letter-spacing: -1.32px;
    max-width: 100%;
  }

  .case-hero__subtitle {
    font-size: 1.375rem; /* 22px — Mob/Reg/H5 */
    line-height: 1.22;
    letter-spacing: 0;
    max-width: 100%;
  }

  /* Hero image: full bleed within page__inner */
  .case-hero-image {
    width: 100%;
    padding: 0;
  }

  .case-hero-image__img {
    width: 100%;
    height: 278px;
    max-width: none;
    object-fit: cover;
    border-radius: 3px;
  }

  /* Meta: only Klant shown on mobile (Figma hides service tags) */
  .case-meta {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 0 16px;
  }

  .case-meta__client-label {
    font-size: 0.9375rem; /* 15px — Mob/SBld/Cap */
    letter-spacing: 0.15px;
  }

  .case-meta__client-name {
    font-size: 0.9375rem; /* 15px — Mob/Med/Cap */
    letter-spacing: 0.075px;
  }

  .case-meta__services {
    display: none;
  }

  /* Section label: Mob/SBld/P */
  .case-section-label__bracket-char {
    font-size: 1.625rem; /* 26px */
    letter-spacing: -0.13px;
  }

  .case-section-label__text {
    font-size: 1.125rem; /* 18px — Mob/SBld/P */
    letter-spacing: 0.09px;
  }

  /* Content rows: stack and full width */
  .case-content-row {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
  }

  .case-content-row__body {
    width: 100%;
    padding-right: 0;
  }

  .case-content-row__body p {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
  }

  /* Result section: blue-100 panel */
  .case-result {
    padding: 24px 16px;
    gap: 16px;
    align-items: flex-start;
    overflow: visible;
  }

  .case-result__top {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .case-result__heading-col {
    width: 100%;
    gap: 16px;
  }

  .case-result__heading {
    font-size: 1.75rem; /* 28px — Mob/SBld/H3 */
    line-height: 1.2;
    letter-spacing: -0.28px;
  }

  .case-result__heading-desc {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
  }

  .case-result__items {
    width: 100%;
    gap: 4px;
  }

  .case-result__item {
    padding: 14px 12px 16px;
    border-radius: 2px;
  }

  .case-result__item-text {
    font-size: 1.25rem; /* 20px — Mob/Med/H6 */
    font-weight: var(--fw-medium);
    line-height: 1.3;
    letter-spacing: 0;
  }

  /* Gallery: stack vertically with 370/249 aspect ratio */
  .case-gallery {
    flex-direction: column;
    width: 100%;
    height: auto;
    gap: 16px;
    overflow: visible;
  }

  .case-gallery__item--large,
  .case-gallery__item--medium {
    width: 100%;
    height: auto;
    aspect-ratio: 370 / 249;
    border-radius: 3px;
  }

  .case-gallery__item--large img,
  .case-gallery__item--medium img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Quote: body above attribution (column-reverse since HTML has attribution first) */
  .case-quote {
    flex-direction: column-reverse;
    gap: 12px;
    margin: 0;
    padding: 24px 0 0;
    width: 100%;
  }

  .case-quote__body {
    width: 100%;
    padding-right: 0;
  }

  .case-quote__body p {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
  }

  .case-quote__attribution {
    gap: 8px;
  }

  .case-quote__attribution-text {
    padding: 10px 0;
  }

  .case-quote__attribution-name {
    font-size: 1.125rem; /* 18px — Mob/SBld/P */
    line-height: 1.4;
    letter-spacing: 0.09px;
  }

  .case-quote__attribution-role {
    font-size: 1.125rem; /* 18px — Mob/Reg/P */
    font-weight: var(--fw-regular);
    line-height: 1.4;
    letter-spacing: 0;
  }

  /* CTA on case page */
  .case-page .cta {
    padding: 0 16px 48px;
  }

  /* ===================== Insight Detail Page ===================== */

  /* Page layout: tighter section gap on mobile (Figma: 48px between blocks) */
  .insight-body {
    gap: 48px;
    padding-bottom: 48px;
  }

  /* Breadcrumb hidden on mobile (not in Figma mobile design) */
  .insight-page .insight-breadcrumb {
    display: none;
  }

  /* Hero: stack image first, then text below (Figma mobile order) */
  .insight-hero {
    flex-direction: column-reverse;
    gap: 24px;
  }

  .insight-hero__text {
    width: 100%;
    height: auto;
    padding: 0 var(--page-padding-x);
    gap: 48px;
  }

  .insight-hero__content {
    gap: 48px;
  }

  .insight-hero__heading {
    gap: 9px;
  }

  .insight-hero__title {
    font-size: 2.75rem; /* 44px — Mob/Med/H1 */
    line-height: 1.1;
    letter-spacing: -1.32px;
  }

  .insight-hero__date {
    font-size: 0.9375rem; /* 15px — Mob/Med/Cap */
    line-height: 1.4;
    letter-spacing: 0.075px;
  }

  .insight-hero__author-name,
  .insight-hero__author-role {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.4;
    letter-spacing: 0.075px;
  }

  .insight-hero__image {
    width: 100%;
    height: 278px;
    padding: 0;
  }

  .insight-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Article section (blue-100 bg) */
  .insight-article {
    padding: 40px var(--page-padding-x);
  }

  .insight-article__inner {
    flex-direction: column;
    gap: 48px;
    width: 100%;
    margin: 0;
  }

  /* Share row: horizontal "Delen via | URL | Linkedin" */
  .insight-share {
    width: auto;
    padding: 0;
    order: 1;
  }

  .insight-share__inner {
    flex-direction: row;
    gap: 5px;
    align-items: center;
  }

  .insight-share__label {
    font-size: 1.125rem; /* 18px — Dsktp/SBld/Cap */
    padding: 6px 12px 6px 0;
  }

  .insight-share__buttons {
    flex-direction: row;
    gap: 5px;
  }

  .insight-share__button {
    font-size: 1.125rem; /* 18px */
    padding: 6px 12px;
    border-radius: 3px;
  }

  /* Content body */
  .insight-content {
    order: 2;
    gap: 48px;
  }

  .insight-content__section {
    width: 100%;
    gap: 16px;
  }

  .insight-content__section > p,
  .insight-content__text p,
  .insight-content__list-item p {
    font-size: 1.125rem; /* 18px — Mob/Med/P */
    line-height: 1.4;
    letter-spacing: 0.09px;
  }

  .insight-content__heading {
    font-size: 1.375rem; /* 22px — Mob/SBld/H5 */
    line-height: 1.22;
    letter-spacing: 0;
  }

  .insight-content__list {
    gap: 4px;
  }

  .insight-content__list-item {
    padding: 8px 12px;
  }

  /* Related insights: stack label above cards */
  .insight-related {
    padding: 0 var(--page-padding-x);
  }

  .insight-related__inner {
    flex-direction: column;
    gap: 12px;
    padding-left: 0;
    width: 100%;
  }

  .insight-related__label {
    width: auto;
  }

  .insight-related__cards {
    width: 100%;
  }

  .insight-related__cards-inner {
    width: 100%;
    padding-right: 0;
  }

  /* Section label text smaller on mobile within insight-related */
  .insight-related .case-section-label__text {
    font-size: 1.125rem; /* 18px — Mob/SBld/P */
    letter-spacing: 0.09px;
  }

  /* CTA on insight page: align with article side padding */
  .insight-page .cta {
    padding: 0 var(--page-padding-x);
  }

  /* ===================== Over (About) Page ===================== */
  /* Figma mobile node 717:7754 — 386px viewport, gap-48px between sections */
  .over__body {
    gap: 48px;
    padding-top: 32px;
    padding-bottom: 0;
  }

  /* Override desktop 22px section-label for over page — Figma mobile uses 18px (Mob/SBld/P) */
  .page--over .section-label__text {
    font-size: 1.125rem;
    letter-spacing: 0.09px;
  }

  .over-hero {
    padding: 0 16px;
    gap: 24px;
  }

  .over-hero__content {
    gap: 16px;
  }

  .over-hero__title {
    font-size: 2.75rem; /* 44px — Mob/Med/H1 */
    line-height: 1.1;
    letter-spacing: -1.32px;
  }

  .over-hero__subtitle {
    font-size: 1.375rem; /* 22px — Mob/Reg/H5 */
    line-height: 1.22;
    letter-spacing: 0;
    font-weight: var(--fw-regular);
  }

  /* Static centered layout (Figma mobile node 717:7769):
     middle photo prominent, side photos clipped to peek */
  .over-photos {
    flex-wrap: nowrap;
    overflow: hidden;
    justify-content: center;
    align-items: flex-start;
    gap: 6.594px;
    padding: 0;
  }

  .over-photos__item--left,
  .over-photos__item--right {
    flex: 0 0 101vw; /* sides: 390/386 from Figma — clipped to peek */
    height: auto;
    aspect-ratio: 390 / 320;
    border-radius: 2px;
  }

  .over-photos__item--center {
    flex: 0 0 84.5vw; /* middle: 326/386 from Figma — fully visible */
    height: auto;
    aspect-ratio: 326 / 320;
    border-radius: 2px;
  }

  /* Waarom section */
  .over-waarom {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
  }

  .over-waarom__label {
    width: auto;
  }

  .over-waarom__content {
    width: 100%;
  }

  .over-waarom__text {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
    padding-right: 0;
  }

  /* Geloven section */
  .over-geloven {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
  }

  .over-geloven__label {
    width: auto;
  }

  .over-geloven__content {
    gap: 24px;
    width: 100%;
    max-width: 100%;
  }

  .over-geloven__cards {
    gap: 8px;
    max-width: 100%;
  }

  .value-card {
    width: 100%;
    padding: 12px 12px 16px;
    border-radius: 2px;
  }

  .value-card__content {
    gap: 8px;
    flex-direction: column;
  }

  .value-card__title-col,
  .value-card__desc-col {
    width: 100%;
    align-items: flex-start;
  }

  .value-card__title {
    font-size: 1.375rem; /* 22px — Mob/SBld/H5 */
    line-height: 1.22;
    letter-spacing: 0;
  }

  .value-card__desc {
    font-size: 0.9375rem; /* 15px — Mob/Med/Cap */
    line-height: 1.4;
    letter-spacing: 0.075px;
  }

  .over-geloven__closing {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
    max-width: 100%;
  }

  /* Team section — blue-100 bg wrapper with 24/16 padding (Figma mobile node 717:7801) */
  .over-team {
    width: 100%;
  }

  .over-team__inner {
    background: var(--blue-100);
    padding: 24px 16px;
    gap: 48px;
    align-items: stretch;
  }

  .over-team__header {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .over-team__label {
    width: auto;
  }

  .over-team__intro-text {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
  }

  .over-team__grid,
  .collegas__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
  }

  /* Reset feature card grid spans for 2-col mobile */
  .team-feature--1,
  .team-feature--2,
  .team-feature--3 {
    grid-column: span 1;
    grid-row: span 1;
  }

  .team-card {
    width: 100%;
    border-radius: 3px;
  }

  .team-card__photo {
    aspect-ratio: 4 / 5; /* portret, zoals gevraagd (was 274/284) */
    height: auto;
    border-radius: 3px;
  }

  .team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .team-card__name {
    font-size: 0.9375rem; /* 15px — Mob/SBld/Cap */
    line-height: 1.4;
    letter-spacing: 0.15px;
    padding: 4px 8px 0;
  }

  .team-card__role {
    font-size: 0.8125rem; /* 13px — Mob/Med/Sm-Cap */
    line-height: 1.1;
    letter-spacing: 0.26px;
    padding: 0 8px 8px;
  }

  /* Vacatures section in Over page — blue-100 bg on mobile to match Figma */
  /* ---- Collega-detailpagina ---- */
  .collega-detail {
    padding: 0 16px;
  }

  .collega-detail__inner {
    flex-direction: column;
    gap: 24px;
  }

  .collega-detail__foto {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }

  .collega-detail__bio {
    font-size: 1.125rem; /* 18px */
    line-height: 1.35;
    letter-spacing: 0;
  }

  /* ---- Collega-overzicht ---- */

  .collegas {
    gap: 20px;
    /* Zes mensen tegelijk, zonder sfeerbeeld: het beeld zou hier een hele
       schermhoogte kosten. De component telt mobiel ook op zes per frame. */
  }

  .collegas__sfeerbeeld {
    display: none;
  }

  /* De zoekbalk staat mobiel vooraan en over de volle breedte. */
  .collegas__filters {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .collegas__zoek,
  .collegas__filter {
    flex: 1 1 auto;
  }

  .collegas__zoek-veld,
  .collegas__filter-veld {
    font-size: 1rem; /* 16px — voorkomt inzoomen bij focus op iOS */
    padding: 12px 14px;
  }

  .over-vacatures {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 24px 16px;
    background: var(--blue-100);
  }

  .over-vacatures__label {
    width: auto;
  }

  .over-vacatures__content {
    width: 100%;
    max-width: 100%;
  }

  .over-vacatures__list {
    width: 100%;
    gap: 8px;
    max-width: 100%;
  }

  /* Vacancy row — match Figma mobile node 717:7853
     Title flex-shrinks; hours hidden (Figma render shows only title + arrow);
     blue-200 arrow box pinned to the right via the row's justify-between. */
  .vacancy-row {
    border-radius: 3px;
  }

  .vacancy-row__info {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 12px;
    gap: 17px;
  }

  .vacancy-row__title {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.9375rem; /* 15px — Mob/SBld/Cap */
    line-height: 1.4;
    letter-spacing: 0.15px;
  }

  /* Hours clipped out of view on mobile (Figma design intent) */
  .vacancy-row__hours {
    display: none;
  }

  .vacancy-row__arrow {
    width: 51px;
    height: 51px;
    flex-shrink: 0;
    align-self: stretch;
    padding: 8px;
    background: var(--blue-200);
  }

  .vacancy-row__arrow img {
    width: 24px;
    height: 24px;
  }

  /* Over page CTA — align with side padding, add top padding since Vacatures fills its bg */
  .page--over .cta {
    padding: 24px 16px 48px;
  }

  /* ===================== WerkenBij Page ===================== */
  /* Figma mobile node 717:7922 — 386px viewport, gap-48px between sections */
  .werkenbij__body {
    gap: 48px;
    padding-top: 32px;
    padding-bottom: 48px;
  }

  /* Override desktop 22px section-label — Figma mobile uses 18px (Mob/SBld/P) */
  .page--werkenbij .section-label__text {
    font-size: 1.125rem;
    letter-spacing: 0.09px;
  }

  .werkenbij-hero {
    padding: 0 16px;
    gap: 24px;
  }

  .werkenbij-hero__content {
    gap: 16px;
  }

  .werkenbij-hero__title {
    font-size: 2.75rem; /* 44px — Mob/Med/H1 */
    line-height: 1.1;
    letter-spacing: -1.32px;
  }

  .werkenbij-hero__subtitle {
    font-size: 1.375rem; /* 22px — Mob/Reg/H5 */
    line-height: 1.22;
    letter-spacing: 0;
  }

  /* Static centered layout (Figma mobile node 717:7937):
     middle photo prominent, side photos clipped to peek */
  .werkenbij-photos {
    flex-wrap: nowrap;
    overflow: hidden;
    justify-content: center;
    align-items: flex-start;
    gap: 6.594px;
    padding: 0;
  }

  .werkenbij-photos__item,
  .werkenbij-photos__item:last-child {
    flex: 0 0 101vw; /* sides: 390/386 from Figma — clipped to peek */
    height: auto;
    aspect-ratio: 390 / 320;
    border-radius: 2px;
  }

  .werkenbij-photos__item:nth-child(2) {
    flex: 0 0 84.5vw; /* middle: 326/386 from Figma — fully visible */
    aspect-ratio: 326 / 320;
  }

  /* USP section */
  .werkenbij-usp {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
    align-items: flex-start;
  }

  .werkenbij-usp__label {
    width: auto;
  }

  .werkenbij-usp__cards {
    max-width: 100%;
    gap: 12px;
  }

  .werkenbij-usp__card {
    width: 100%;
    padding: 12px 12px 16px;
    border-radius: 2px;
  }

  .werkenbij-usp__card-title {
    font-size: 1.375rem; /* 22px — Mob/SBld/H5 */
    line-height: 1.22;
    letter-spacing: 0;
  }

  .werkenbij-usp__card-desc {
    font-size: 0.9375rem; /* 15px — Mob/Med/Cap */
    line-height: 1.4;
    letter-spacing: 0.075px;
  }

  /* Seek section */
  .werkenbij-seek {
    flex-direction: column;
    gap: 12px;
    padding: 0 16px;
    width: 100%;
    align-items: flex-start;
  }

  .werkenbij-seek__label {
    width: auto;
  }

  .werkenbij-seek__content {
    width: 100%;
  }

  .werkenbij-seek__text {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
    padding-right: 0;
  }

  /* Vacatures section */
  .werkenbij-vacatures {
    width: 100%;
  }

  .werkenbij-vacatures__inner {
    flex-direction: column;
    gap: 12px;
    padding: 24px 16px;
  }

  .werkenbij-vacatures__label {
    width: auto;
  }

  .werkenbij-vacatures__list {
    width: 100%;
    gap: 8px;
  }

  /* Vacature card keeps row layout on mobile (title | hours | arrow) */
  .vacature-card {
    flex-direction: row;
    padding: 0 0 0 12px;
    gap: 17px;
    align-items: center;
    border-radius: 3px;
  }

  .vacature-card__info {
    flex: 1 1 0;
    min-width: 0;
    gap: 17px;
  }

  .vacature-card__title {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    padding: 13px 0;
    font-size: 0.9375rem; /* 15px — Mob/SBld/Cap */
    line-height: 1.4;
    letter-spacing: 0.15px;
  }

  /* Hours are clipped out of view on mobile (Figma design intent) */
  .vacature-card__hours {
    display: none;
  }

  .vacature-card__arrow {
    width: 51px;
    height: 51px;
    align-self: stretch;
    padding: 8px;
  }

  /* ===================== Vacancy Detail Page ===================== */
  .vacancy__body {
    gap: 48px;
    padding: 32px 0 48px;
  }

  .vacancy-hero {
    padding: 0 16px;
    gap: 24px;
  }

  .vacancy-hero__title {
    font-size: 2.75rem;
    line-height: 1.1;
    letter-spacing: -0.04em;
  }

  .vacancy-hero__subtitle {
    font-size: 1.125rem;
    line-height: 1.4;
  }

  /* Photos — horizontal scroll */
  .vacancy-photos {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 8px;
    padding: 0 16px;
    scrollbar-width: none;
  }

  .vacancy-photos::-webkit-scrollbar {
    display: none;
  }

  .vacancy-photos__item {
    flex: 0 0 75vw;
    height: 350px;
    scroll-snap-align: start;
  }

  .vacancy-photos__item--wide {
    flex: 0 0 80vw;
  }

  .vacancy-photos--bottom .vacancy-photos__item {
    flex: 0 0 70vw;
    height: 280px;
  }

  .vacancy-photos--bottom .vacancy-photos__item--first {
    flex: 0 0 75vw;
  }

  /* Text sections */
  .vacancy-text-section {
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 0 16px;
  }

  .vacancy-text-section__label {
    width: auto;
  }

  .vacancy-text-section__content {
    max-width: 100%;
    padding-right: 0;
  }

  .vacancy-text-section__text {
    font-size: 1.125rem;
    line-height: 1.4;
    letter-spacing: 0.03em;
  }

  .vacancy-list {
    padding-left: 24px;
  }

  .vacancy-list li {
    font-size: 1.125rem;
    line-height: 1.4;
  }

  .vacancy-link {
    font-size: 1.125rem;
  }

  /* ===================== Contact Page ===================== */
  .contact-content {
    gap: 40px;
    padding: 40px 16px 80px;
  }

  .contact-content__title {
    font-size: 2.75rem;
    line-height: 1.1;
    letter-spacing: -0.04em;
  }

  .contact-columns {
    flex-direction: column;
    gap: 40px;
  }

  .contact-cta {
    width: 100%;
  }

  .contact-cta__heading {
    font-size: 1.375rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .contact-cta__button {
    font-size: 1.125rem;
    padding: 12px 16px;
  }

  .contact-details {
    width: 100%;
  }

  .contact-details__group {
    padding: 16px 0;
  }

  .contact-details__label {
    font-size: 0.8125rem;
    letter-spacing: 0.125em;
  }

  .contact-details__link,
  .contact-details__value {
    font-size: 1.125rem;
    line-height: 1.4;
  }

  /* ===================== Breadcrumbs (shared) ===================== */
  .breadcrumb,
  .case-breadcrumb,
  .insight-breadcrumb,
  .themas-breadcrumb__text {
    font-size: 0.875rem;
  }

  /* ===================== Themas Page =====================
     Figma mobile node 717:7390 — 386px viewport, gap-48px between sections */

  .themas-page .themas-body {
    overflow: hidden;
  }

  .themas-page .themas-content {
    gap: 48px;
    /* 48px at the bottom so the closing CTA does not sit flush against the
       footer — same breathing room as .werkwijze__body and .werkenbij__body */
    padding: 8px 0 48px;
  }

  /* Hero */
  .themas-hero {
    padding: 0 var(--page-padding-x);
    gap: 24px;
    width: 100%;
  }

  .themas-breadcrumb__icon {
    width: 20px;
    height: 20px;
  }

  .themas-hero__text {
    gap: 16px;
  }

  .themas-hero__title {
    font-size: 2.75rem; /* 44px — Mob/Med/H1 */
    line-height: 1.1;
    letter-spacing: -1.32px;
    max-width: 100%;
  }

  .themas-hero__subtitle {
    font-size: 1.375rem; /* 22px — Mob/Reg/H5 */
    line-height: 1.22;
    letter-spacing: 0;
    max-width: 100%;
    font-weight: var(--fw-regular);
  }

  /* Photo strip — overflow-center: 3 photos centered, side photos clipped */
  .themas-photos-wrap {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    padding: 0;
  }

  .themas-photos {
    display: flex;
    gap: 6.594px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: center;
    overflow: visible;
    padding: 0;
    width: max-content;
  }

  .themas-photo {
    flex: 0 0 auto;
    flex-shrink: 0;
    gap: 2.638px;
  }

  /* Side photos: 390/386 ≈ 101vw — overflow viewport edges */
  .themas-photo--1 .themas-photo__image,
  .themas-photo--3 .themas-photo__image {
    width: 101vw;
    max-width: none;
    height: auto;
    aspect-ratio: 390 / 378;
    border-radius: 2px;
  }

  /* Middle photo: 326/386 ≈ 84.5vw — fully visible */
  .themas-photo--2 .themas-photo__image {
    width: 84.5vw;
    max-width: none;
    height: auto;
    aspect-ratio: 326 / 378;
    border-radius: 2px;
  }

  .themas-photo__caption {
    font-size: 0.8125rem; /* 13px — Mob/Reg/Sm-Cap */
    letter-spacing: 0.26px;
    line-height: 1.1;
    white-space: normal;
  }

  /* Intro */
  .themas-intro {
    flex-direction: column;
    gap: 12px;
    padding: 0 8px;
    width: 100%;
    align-items: flex-start;
  }

  .themas-intro__label {
    width: auto;
    flex: 0 0 auto;
  }

  .themas-intro__label-text {
    font-size: 1.125rem; /* 18px — Mob/SBld/P */
    line-height: 1.4;
    letter-spacing: 0.09px;
  }

  .themas-intro__body {
    width: 100%;
    padding-right: 0;
  }

  .themas-intro__body p {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
  }

  .themas-intro__body p + p {
    margin-top: 1.3em;
  }

  /* Bracket label sizes (shared) */
  .themas-bracket__char {
    font-size: 1.625rem; /* 26px */
    letter-spacing: -0.13px;
  }

  /* ===== Cases section — mobile shows full image cards with chip overlay ===== */
  .themas-cases-insights {
    width: 100%;
  }

  .themas-cases {
    width: 100%;
    height: auto;
    padding: 0 var(--page-padding-x);
    gap: 12px;
    background: transparent;
    align-items: flex-start;
    overflow: visible;
  }

  .themas-cases__label-text {
    font-size: 1.125rem; /* 18px — Mob/SBld/P */
    letter-spacing: 0.09px;
    line-height: 1.4;
  }

  .themas-cases__list {
    width: 100%;
    gap: 12px;
  }

  .themas-case {
    width: 100%;
  }

  .themas-case + .themas-case {
    border-top: none;
  }

  .themas-case__link {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
  }

  .themas-case:first-child .themas-case__link,
  .themas-case:last-child .themas-case__link {
    padding: 0;
  }

  /* Image card: 247px tall with overlayed chip at bottom-left */
  .themas-case__image {
    display: block;
    width: 100%;
    height: 247px;
    background: var(--base-100);
    overflow: hidden;
    border-radius: 2px 2px 0 0;
    position: relative;
  }

  .themas-case__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .themas-case__chip {
    position: absolute;
    /* image height (247) − chip height (38) − padding (12) = 197 */
    top: 197px;
    left: 12px;
    z-index: 2;
  }

  .themas-case__name {
    font-size: 0.9375rem; /* 15px — Mob/Med/Cap */
    letter-spacing: 0.075px;
    line-height: 1.4;
  }

  /* Title block: blue-100 panel beneath image */
  .themas-case__title {
    background: var(--blue-100);
    padding: 10px 12px 12px;
    font-size: 1.375rem; /* 22px — Mob/Med/H5 */
    font-weight: var(--fw-medium);
    line-height: 1.22;
    letter-spacing: 0;
    border-radius: 0 0 2px 2px;
  }

  /* ===== Insights section ===== */
  .themas-insights {
    padding: 24px var(--page-padding-x);
  }

  .themas-insights__inner {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0;
  }

  .themas-insights__label {
    width: auto;
  }

  .themas-insights__label-text {
    font-size: 1.125rem; /* 18px — Mob/SBld/P */
    letter-spacing: 0.09px;
    line-height: 1.4;
  }

  .themas-insights__cards {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    /* reset desktop flex: 1 0 0 — in this column that 0 is the height, and
       the parent has no free space to grow into, so the strip collapsed to
       0px and site-overrides' overflow clipped the cards away entirely */
    flex: 0 0 auto;
  }

  /* Insight cards: grid layout (105px thumb left, text right) */
  .themas-insight {
    width: 100%;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 105px 1fr;
    grid-template-rows: 1fr auto;
    padding: 8px 10px;
    gap: 0;
    border-radius: 2px;
  }

  .themas-insight__image {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 105px;
    height: 111px;
    border-radius: 2px;
    flex-shrink: 0;
  }

  .themas-insight__title {
    grid-column: 2;
    align-self: start;
    padding-left: 12px;
    font-size: 1.125rem; /* 18px — Mob/Med/P */
    font-weight: var(--fw-medium);
    line-height: 1.4;
    letter-spacing: 0.09px;
  }

  .themas-insight__date {
    grid-column: 2;
    align-self: end;
    padding-left: 12px;
    margin-top: 0;
    font-size: 0.8125rem; /* 13px — Mob/Reg/Sm-Cap */
    letter-spacing: 0.26px;
    line-height: 1.1;
  }

  /* ===== CTA on themas page ===== */
  .themas-page .cta {
    width: 100%;
    padding: 0 var(--page-padding-x);
    /* mobiel geen tekstkantlijn: dezelfde inspringing als elke sectie */
    padding-left: var(--page-padding-x);
  }

}

/* ==========================================================================
   Tussenmaten (769–1300px)
   --------------------------------------------------------------------------
   Het design kende één omslagpunt: 768px (nu 920px). Daarboven gelden de vaste
   desktopmaten, en die passen pas vanaf ±1300px. In het gat daartussen —
   precies het bereik van een gewone laptop — loopt .case-quote__body
   (width: 938px; flex-shrink: 0) buiten beeld en wordt de attributie
   ernaast platgedrukt, waardoor de tekst over de quote heen valt.

   Hier hergebruiken we het staandbeeld dat de ontwerpers zelf al voor
   ≤920px maakten: quote boven, attributie eronder, volle breedte. Boven
   1300px verandert er niets aan het design.
   ========================================================================== */
@media (min-width: 921px) and (max-width: 1439px) {
  .case-quote {
    flex-direction: column-reverse;
    gap: 16px;
    width: 100%;
    margin-left: 0;
    padding: 24px 0 0;
  }

  .case-quote__body {
    width: 100%;
    padding-right: 0;
  }
}

/* ==========================================================================
   Meeschalen boven het mobiele omslagpunt
   --------------------------------------------------------------------------
   Het design legt de inzicht-hero vast op 674px tekst + 725px beeld met
   flex-shrink: 0, in een rij met justify-content: space-between. Samen is
   dat 1399px: precies goed op ontwerpbreedte, maar op een breder scherm
   duwt space-between beide helften uit elkaar en blijft er een leeg gat in
   het midden staan — het beeld oogt dan te klein en plakt aan de rand.

   Dezelfde verhouding, maar dan in procenten: op ontwerpbreedte (±1420px)
   komt dit exact op 674/725px uit, en daarboven schaalt het gewoon mee.
   ========================================================================== */
@media (min-width: 921px) {
  .insight-hero__text {
    width: 47.4648%;   /* 674px op 1420px */
    height: auto;
    min-height: 575px;
    min-width: 0;
  }

  .insight-hero__image {
    width: 51.0563%;   /* 725px op 1420px */
    height: auto;
    min-width: 0;
  }

  .insight-hero__img {
    width: 100%;
    height: auto;
    aspect-ratio: 725 / 574;
    object-fit: cover;
  }
}

/* ==========================================================================
   Sectiecorrecties boven het mobiele omslagpunt
   --------------------------------------------------------------------------
   Het design had één omslagpunt en werkt met vaste pixelmaten die
   pas kloppen rond de ontwerpbreedte. Daartussen — 769px tot ±1440px, dus
   elke gewone laptop — is er geen enkele regel en lopen secties buiten hun
   kader. Omdat .main-wrapper overflow-x: hidden heeft, valt dat niet op als
   een schuifbalk maar als weggesneden tekst.

   Hieronder per sectie het minimum om dat te verhelpen: vaste breedtes
   worden maxima, te grote gaten krimpen, en rijen mogen afbreken. Boven
   1440px verandert er niets aan het ontwerp.
   ========================================================================== */

/* Case-resultaat loopt op élke breedte over: __top is 1176px vast en
   __items 577px, terwijl de tekst daar niet in past. */
@media (min-width: 921px) and (max-width: 1439px) {
  .case-result__top {
    width: 100%;
    max-width: 1176px;
    flex-wrap: wrap;
    gap: 40px;
  }

  .case-result__heading-col {
    flex: 1 1 420px;
    min-width: 0;
  }

  .case-result__items {
    width: 100%;
    max-width: 577px;
    flex: 1 1 360px;
    min-width: 0;
  }
}

@media (min-width: 921px) and (max-width: 1439px) {
  .case-result {
    padding: 64px 32px;
  }

  /* Contact: 580px vaste kolom + 142px gat passen samen niet. */
  .contact-columns {
    gap: 48px;
    flex-wrap: wrap;
  }

  .contact-details {
    width: 100%;
    max-width: 580px;
    flex-shrink: 1;
    min-width: 0;
  }

  /* Gerelateerde inzichten: 120px inspringing + 77px gat + 819px kaarten. */
  .insight-related {
    padding: 60px 32px;
  }

  .insight-related__inner {
    padding-left: 0;
    gap: 32px;
    flex-wrap: wrap;
  }

  .insight-related__cards {
    width: 100%;
    min-width: 0;
  }

  /* Thema's: vaste 1420px met 120px inspringing aan beide kanten. */
  .themas-insights__inner {
    width: 100%;
    padding-left: 32px;
    padding-right: 32px;
    gap: 32px;
    flex-wrap: wrap;
  }

  .werkwijze-clients__layout {
    flex-wrap: wrap;
  }

  .vacancy-text-section {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Teamgrid: vijf vaste kolommen worden te smal voor naam + functie. */
  .over-team__grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    width: 100%;
  }

  /* Waardekaarten: titel- en tekstkolom naast elkaar passen niet meer. */
  .value-card__content {
    flex-wrap: wrap;
    gap: 10px;
  }

  .value-card__title-col,
  .value-card__desc-col {
    min-width: 0;
  }

  /* Vacaturerijen: de vaste titelbreedte (325px) laten meekrimpen, zodat
     titel, uren en pijl op één regel blijven in plaats van dat de pijl
     naar een tweede regel valt. */
  .vacature-card,
  .vacancy-row {
    gap: 16px;
  }

  .vacature-card__info,
  .vacancy-row__info {
    flex: 1 1 0;
    min-width: 0;
  }

  .vacature-card__title,
  .vacancy-row__title {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ---- Restpunten uit de sectie-audit ------------------------------------ */

/* Gerelateerde inzichten: kaartenblok stond vast op 938px mét 120px
   inspringing erbovenop; samen breder dan de ruimte die het krijgt. */
@media (min-width: 921px) and (max-width: 1439px) {
  .insight-related__cards-inner {
    width: 100%;
    max-width: 938px;
    padding-right: 0;
  }
}

@media (min-width: 921px) and (max-width: 1439px) {
  .werkwijze-clients__text {
    padding-right: 32px;
  }
}

/* Teamkaarten zijn smal; een lange functietitel moet kunnen afbreken in
   plaats van de kaart uit te duwen. Geldt op elke breedte. */
.team-card__name,
.team-card__role {
  overflow-wrap: anywhere;
  min-width: 0;
}


/* Case-inhoudsrijen ("De vraag", "Onze rol")
   --------------------------------------------------------------------------
   Elke andere sectie is volle breedte met de inspringing van binnen — zo
   staat de landingspagina er ook bij (.intro, .services, .clients: x=0,
   breedte = volle binnenmaat). Alleen .case-content-row stond vast op
   1300px, en .case-body lijnt rechts uit. Op ontwerpbreedte valt dat samen
   met de 120px inspringing van het ontwerp, maar breder schuift de hele rij
   mee naar rechts: op 1920px begon hij op x=600, op 2560px op x=1240.

   Volle breedte met padding-left, en het label op zijn ontwerpmaat i.p.v.
   meegroeiend (flex: 1). Daarmee staan het label en de tekstkolom op élke
   breedte op dezelfde x — op 1440px exact de maten uit het ontwerp
   (284 + 78 + 938 = 1300). */
@media (min-width: 921px) {
  .case-content-row {
    width: 100%;
    padding-left: 120px;
    justify-content: flex-start;
  }

  .case-section-label {
    flex: 0 0 284px;
  }
}

/* Thema's-cases: vaste 1420px (de binnenbreedte van het ontwerp) met een
   vaste hoogte. Smaller dan de ontwerpbreedte liep de sectie buiten beeld en
   viel het bracketteken rechts weg.

   Die vaste 955px is de hoogte van drie cases in het ontwerp — een maat van
   de tekening, niet van de inhoud. Met één of twee cases bleef de rest van
   het blauwe vlak leeg staan: op /wat-we-doen/vertrouwen, /bekendheid en
   /beweging zo'n 750 tot 790px niets. Dit stond eerder alleen tot 1439px
   goed, waardoor het op precies de ontwerpbreedte en daarboven — dus op de
   meeste schermen — juist wél misging. Vandaar één regel voor alles boven
   het mobiele omslagpunt; ≤920px stapelt de sectie en heeft zijn eigen
   maten. */
@media (min-width: 921px) {
  .themas-cases {
    width: 100%;
    height: auto;
    padding-bottom: 80px;
  }
}

/* ==========================================================================
   Vaste inspringing bóven de ontwerpbreedte
   --------------------------------------------------------------------------
   Deze secties hebben een vaste breedte (1180 of 1420px) en worden
   gecentreerd. Tot en met 1440px is dat prima: het midden valt daar samen
   met de inspringing van het ontwerp. Daarboven schuift alles mee met de
   helft van de extra ruimte — op 2560px stonden de bracketlabels 560px
   verder naar rechts.

   Daarom alleen boven 1440px ingrijpen; daaronder verandert er niets.

   Het ontwerp kent twee kantlijnen, en elke sectie hoort op één ervan:

     x=120   bracketlabels en paginatitels — de inspringing van het ontwerp
     x=480   de tekstkolom ernaast: 120 + labelbreedte (281 of 337) + gap
             (78 of 21). Daar staat ook de afsluitende CTA op.

   .over-waarom, .over-geloven en .over-vacatures telden die inspringing
   dubbel: een gecentreerde kolom van 1180px in een wrapper van 1420px geeft
   al 120px marge, en daar stond nog eens padding 0 120px bovenop. Hun label
   kwam zo op x=240 en hun tekst op x=599 — 120px naast beide kantlijnen. Ze
   volgen nu hetzelfde patroon als .werkenbij-* en .vacancy-*: vaste breedte
   zonder eigen padding, en in dit blok de meeschalende inspringing.
   ========================================================================== */
@media (min-width: 1441px) {
  .over-waarom,
  .over-geloven,
  .over-vacatures,
  .werkenbij-usp,
  .werkenbij-seek,
  .vacancy-text-section,
  .expertises-section {
    width: 100%;
    max-width: none;
    padding-left: var(--page-padding-x);
    padding-right: var(--page-padding-x);
  }

  /* Vaste ontwerpbreedte die boven 1440px gecentreerd raakte: de CTA schoof
     dan met de helft van de extra ruimte mee en stond op 1920px 240px naast
     de tekstkantlijn. Zelfde correctie als in het bereik 921-1440px. */
  .expertises-page .cta,
  .themas-page .cta {
    width: 100%;
  }

  .themas-hero,
  .themas-intro,
  .themas-cases,
  /* Let op: .themas-insights is al 100% breed; de vaste 1420px zit op
     __inner. Die eerst over het hoofd gezien, waardoor "Laatste inzichten"
     als enige label bleef meedrijven. */
  .themas-insights__inner,
  .expertises-hero,
  .over-team,
  .over-team__grid,
  .over-team__header {
    width: 100%;
    max-width: none;
  }
}

/* ==========================================================================
   Tussenbereik (921–1440px): vaste ontwerpbreedtes worden vloeibaar
   --------------------------------------------------------------------------
   Het ontwerp is getekend op 1440px (binnenmaat 1420px) en kent daaronder
   alleen het mobiele artboard (≤920px). Tussen die twee maten hielden een
   aantal secties hun vaste ontwerpbreedte (1420/1180/938px) en werden ze
   afgekapt door de overflow: hidden van hun paginawrapper — op /expertises
   viel op een laptop zelfs de titel deels buiten beeld.

   Aanpak, naar het voorbeeld van de al vloeibare pagina's (over, werkenbij):
   - de inspringing schaalt mee met het venster: 120px op 1440px = 8,33vw;
   - vaste sectiebreedtes worden width: 100% met die inspringing als padding;
   - vaste kolommen in een rij krijgen een px-plafond én een %-aandeel, zodat
     de rij op elke breedte optelt tot de beschikbare ruimte. 362px die
     hieronder terugkomt = labelkolom op ontwerpmaat (284) + kolomgap (78).
   Op precies 1440px vallen alle maten samen met het ontwerp; ≤920px blijft
   het mobiele artboard gelden en boven 1440px het blok hierboven.
   ========================================================================== */
@media (min-width: 921px) and (max-width: 1440px) {
  :root {
    --page-padding-x: clamp(48px, 8.33vw, 120px);
  }

  /* ---- Expertises ---- */
  .expertises-hero {
    width: 100%;
    padding: 0 var(--page-padding-x);
  }

  .expertises-section {
    width: 100%;
    padding-left: var(--page-padding-x);
    padding-right: var(--page-padding-x);
  }

  .expertises-cards {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  .expertise-card {
    width: 100%;
  }

  /* Beeld schaalt mee met de kaart; op ontwerpbreedte weer exact 320px. */
  .expertise-card__image {
    width: min(320px, 42%);
    height: auto;
    aspect-ratio: 1;
  }

  .expertises-page .cta,
  .themas-page .cta {
    width: 100%;
  }

  /* ---- Thema's ---- */
  .themas-hero,
  .themas-insights__inner {
    width: 100%;
    padding-left: var(--page-padding-x);
    padding-right: var(--page-padding-x);
  }

  .themas-intro {
    width: 100%;
    padding-left: var(--page-padding-x);
  }

  .themas-intro__body {
    width: min(938px, calc(100% - 362px));
    padding-right: var(--page-padding-x);
  }

  .themas-cases {
    padding-left: var(--page-padding-x);
  }

  /* ---- Casedetail ---- */
  .case-hero,
  .case-meta,
  .case-hero-image {
    padding-left: var(--page-padding-x);
    padding-right: var(--page-padding-x);
  }

  /* Vaste hoogte (797px) gaf smaller dan 1440px een steeds krappere
     uitsnede; de ontwerpverhouding schaalt mee. */
  .case-hero-image__img {
    height: auto;
    aspect-ratio: 1180 / 797;
  }

  .case-content-row {
    padding-left: var(--page-padding-x);
  }

  .case-content-row__body {
    width: min(938px, calc(100% - 362px));
    padding-right: var(--page-padding-x);
  }

  /* Resultaat, quote en de inzicht-hero hebben hierboven al hun eigen
     tussenmaatregels (wrap resp. staandbeeld resp. procenten); alleen de
     inspringing volgt hier de meeschalende maat. */
  .case-result {
    padding-left: var(--page-padding-x);
    padding-right: var(--page-padding-x);
  }

  /* ---- Inzichtdetail ---- */
  .insight-article__inner {
    width: min(100%, 1366px);
  }

  .insight-content {
    min-width: 0;
  }

  .insight-content__section {
    width: min(698px, 100%);
  }

  .insight-related {
    padding: 60px var(--page-padding-x);
  }

  .insight-related__cards {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  .insight-related__cards-inner {
    width: 100%;
    padding-right: 0;
  }

  /* ---- Werkenbij / vacature / over / werkwijze: vaste 120px-inspringing
     volgt de meeschalende maat (zelfde lijst als het 1441px-blok) ---- */
  .over-waarom,
  .over-geloven,
  .over-vacatures,
  .werkenbij-usp,
  .werkenbij-seek,
  .vacancy-text-section {
    width: 100%;
    padding-left: var(--page-padding-x);
    padding-right: var(--page-padding-x);
  }

  .werkenbij-vacatures__inner,
  .over-team__inner,
  .werkwijze-clients__inner {
    padding-left: var(--page-padding-x);
    padding-right: var(--page-padding-x);
  }

  /* ---- Over: het auto-fit-raster hierboven botst met de vaste
     kolomposities van de sfeerfoto's (grid-column: 3 / span 3) en perst
     extra impliciete kolommen tot letterbrede stroken. Vijf gelijke
     fr-kolommen krimpen zelf al netjes mee. ---- */
  .over-team__grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Tekstkolommen met een vaste 120px-uitlijnmarge rechts volgen dezelfde
     meeschalende maat, zodat de tekst niet onnodig smal wordt. */
  .over-waarom__text,
  .werkenbij-seek__text,
  .werkwijze-clients__text,
  .werkwijze-clients__logos,
  .vacancy-text-section__content {
    padding-right: var(--page-padding-x);
  }

  /* ---- Footer: vaste 68px-gap drukte het partnerlogo uit beeld ---- */
  .footer__info-left {
    gap: clamp(20px, 3vw, 68px);
  }

  /* ---- Contact: twee vaste kolommen (458 + 580px) worden aandelen ---- */
  .contact-content {
    padding-left: var(--page-padding-x);
    padding-right: var(--page-padding-x);
  }

  .contact-columns {
    gap: min(142px, 6%);
  }

  .contact-cta {
    width: min(458px, 42%);
  }

  .contact-details {
    width: min(580px, 52%);
  }
}

/* ==========================================================================
   Laptopbereik (921–1199px): de labelkolom gaat bovenlangs
   --------------------------------------------------------------------------
   Bijna elke sectie is een rij van twee: een bracketlabel in een vaste kolom
   (281/283/284/337/339px) plus een gap (21/46/77/78px), en daarnaast de
   tekst- of kaartkolom. Samen is die labelkolom op élke breedte ~360px.

   Op ontwerpbreedte klopt dat: 360 van 1440 is een kwart, en er blijft 938px
   tekst over — zo'n zestig tekens per regel. Maar de kolom krimpt niet mee.
   Op 960px is diezelfde 360px veertig procent van het scherm, en dan houdt de
   tekst nog ~320px over: dertien regels van negentien tekens voor een alinea
   die er op het ontwerp zes heeft. Het label zelf gebruikt die 360px niet —
   het zijn drie woorden — dus naast de onleesbare tekstkolom staat ook nog
   een halve schermbreedte leeg. Het bereik tussen de twee ontwerpmaten is
   precies waar geen van beide artboards iets over zegt.

   De oplossing staat al in het ontwerp zelf: op ≤920px zetten de ontwerpers
   deze secties stuk voor stuk onder elkaar — label boven, inhoud eronder,
   volle breedte, gap 12px (24px bij de vacaturetekst). Dat patroon halen we
   hier naar voren. Niets nieuws bedacht dus; hetzelfde staandbeeld, alleen
   eerder ingezet — zoals .case-quote hierboven ook al doet.

   Omslagpunt 1200px: daarboven houdt de tekstkolom ~45 tekens per regel
   (1280px geeft 709px tekst) en blijft het ontwerp dus staan; daaronder zakt
   hij daar doorheen. Op 1440px verandert er niets.
   ========================================================================== */

/* Twee binnenmarges rechts die nog op de vaste 120px stonden. Ze horen bij de
   meeschalende inspringing, net als de andere in het blok hierboven. */
@media (min-width: 921px) and (max-width: 1440px) {
  .cta__text-wrapper,
  .insights__cards-inner {
    padding-right: var(--page-padding-x);
  }
}

@media (min-width: 921px) and (max-width: 1199px) {
  /* ---- De rij wordt een kolom ---- */
  .over-waarom,
  .over-geloven,
  .over-vacatures,
  .over-team__header,
  .werkenbij-usp,
  .werkenbij-seek,
  .werkenbij-vacatures__inner,
  .werkwijze-clients__layout,
  .vacancy-text-section,
  .expertises-section,
  .themas-intro,
  .themas-insights__inner,
  .insights__layout,
  .insights-index__inner,
  .insight-related__inner,
  .case-content-row {
    flex-direction: column;
    gap: 12px;
  }

  /* De vacaturetekst krijgt op het mobiele artboard 24px; hier ook. */
  .vacancy-text-section {
    gap: 24px;
  }

  /* ---- Het label is geen kolom meer maar een regel ---- */
  .over-waarom__label,
  .over-geloven__label,
  .over-vacatures__label,
  .over-team__label,
  .werkenbij-usp__label,
  .werkenbij-seek__label,
  .werkenbij-vacatures__label,
  .werkwijze-clients__label,
  .vacancy-text-section__label,
  .expertises-section__label,
  .themas-intro__label,
  .themas-insights__label,
  .insights__label,
  .insights-index__label,
  .insight-related__label,
  .case-section-label {
    width: auto;
    flex: 0 0 auto;
  }

  /* ---- En de kaartstrook eronder klapt anders dicht ----
     Dezelfde val als onder 921px, en om dezelfde reden: .themas-insights__cards
     is zélf de scrollcontainer (site-overrides.css zet er overflow-x op), en
     een scrollcontainer heeft geen automatische minimummaat. Als flexitem met
     basis 0 in een kolom is die 0 dus de hoogte, de ouder heeft geen vrije
     ruimte om in te groeien, en de strook wordt nul pixels hoog — met
     overflow eroverheen verdwijnen de kaarten helemaal. Van "Inzichten van
     onze collega's" bleef tussen 921 en 1199px alleen het label over.

     De reset stond al in het mobiele blok hierboven; die regime-grens is er
     later bij gekomen, en deze is toen niet meegereisd. Alleen de basis hoeft
     terug naar auto: de kaarten blijven hier naast elkaar staan, het is de
     sectie eromheen die een kolom werd.

     De andere kaartstroken (.insights__cards-wrapper, .insights-index__cards,
     .insight-related__cards) hebben dit niet: daar zit de overflow op een
     kind, dus houden zíj hun automatische minimumhoogte. */
  .themas-insights__cards {
    flex: 0 0 auto;
  }

  /* ---- De inhoudskolom pakt de vrijgekomen breedte ----
     Vaste breedtes die op de labelkolom waren afgestemd (100% - 362px) gaan
     naar vol; hun max-width (938px) houdt de regellengte in toom. */
  .themas-intro__body,
  .case-content-row__body {
    width: 100%;
  }

  /* Binnenmarge rechts vervalt waar de sectie zelf al een rechterinspringing
     heeft — anders staat die marge er twee keer en wordt de tekst opnieuw
     onnodig smal. Secties met alleen een linkerinspringing (.themas-intro,
     .case-content-row, .insights__layout) houden hem juist wél. */
  .over-waarom__text,
  .werkenbij-seek__text,
  .werkwijze-clients__text,
  .werkwijze-clients__logos,
  .vacancy-text-section__content {
    padding-right: 0;
  }

  /* ---- Het inzichtartikel kent dezelfde constructie ----
     Geen bracketlabel maar een deelbalk: 253px + 107px gap is opnieuw die
     360px tekstkantlijn. De leeskolom van het artikel — de belangrijkste
     tekst van de site — hield daardoor 388px over op 921px, zo'n dertig
     tekens per regel, met tussenkoppen over vier regels. Het mobiele
     artboard zet de deelbalk ónder het artikel (order: 1); dat doen we hier
     ook, zodat het artikel bovenaan op volle breedte begint. De max-width
     van 698px op .insight-content__section houdt de leesregel in toom. */
  .insight-article__inner {
    flex-direction: column;
    gap: 48px;
  }

  .insight-share {
    width: auto;
    padding: 0;
    order: 1;
  }

  /* ---- De afsluitende CTA volgt dezelfde beweging ----
     Zijn inspringing is de tekstkantlijn (inspringing + 360px labelkolom).
     Nu de secties erboven hun labelkolom niet meer naast zich hebben, is er
     geen tekstkantlijn om op te staan: terug naar de gewone inspringing,
     precies wat het mobiele artboard ook doet. */
  .cta {
    padding-left: var(--page-padding-x);
  }
}

/* ==========================================================================
   Tabletbereik (640–920px): leesregel afkappen
   --------------------------------------------------------------------------
   Het mobiele artboard is getekend op 390px en zet de lopende tekst over de
   volle breedte. Dat klopt op een telefoon — zo'n 25 tekens per regel — maar
   de tekstgrootte blijft mobiel terwijl de kolom meegroeit. Op een tablet van
   900px staat diezelfde alinea op 852px: honderd tekens per regel bij het
   artikel, 91 bij een case, 87 bij een vacature. Een leesregel wordt lastig
   te volgen boven ~75 tekens — je oog verliest bij de terugsprong de juiste
   regel.

   Alleen de lopende tekst krijgt daarom een maximum; koppen, kaarten en
   stroken houden de volle breedte, zodat het artboard verder intact blijft.
   De grens hoort bij de tekstgrootte en niet bij het venster, dus in em.
   Niet in ch: de nul van WF Aprello is ongewoon breed (1ch = 0,67em, terwijl
   een gemiddelde letter 0,49em is), waardoor 62ch op 85 tekens uitkwam in
   plaats van de bedoelde 68. 34em komt bij zowel 18px- als 20px-tekst op
   ongeveer 68 tekens uit.

   Ondergrens 640px: daaronder is de kolom vanzelf al smal genoeg en verandert
   er dus niets aan de telefoonweergave.
   ========================================================================== */
@media (min-width: 640px) and (max-width: 920px) {
  .insight-content__section p,
  .insight-content__text p,
  .case-content-row__body p,
  .case-quote__body,
  .themas-intro__body p,
  .vacancy-text-section__text,
  .over-waarom__text,
  .werkenbij-seek__text,
  .werkwijze-clients__text {
    max-width: 34em;
  }
}