/* =========================================================================
   Meijer Schoonmaakdiensten — stylesheet
   1:1 implementatie van het Figma-ontwerp (1728px artboard)
   Bron: Figma "Meijer Schoonmaakdeinsten" – page "Hele Webdesign"
   ========================================================================= */

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design tokens (1:1 uit Figma variables) ---------- */
:root {
  /* Kleuren — Figma color styles */
  --color-2:  #eef6fc;              /* paginavlak / header-pill              */
  --color-3:  #ffffff;
  --color-4:  #1983c7;              /* primair blauw                          */
  --color-5:  #6d6789;              /* bodytekst grijs                        */
  --color-6:  #d9edf8;              /* lichtblauwe kaarten                    */
  --color-7:  #0c013b;              /* donker navy                            */
  --color-orange: #c25920;          /* accentknop                             */
  --color-navy-deep: #0061a1;       /* gradientstop                           */
  --color-cta-title: #e3f4ff;
  --color-border: rgba(6, 120, 194, 0.4);
  --color-line:   rgba(109, 103, 137, 0.5);   /* tijdlijn: lijn + inactieve marker */
  --color-shadow: rgba(6, 120, 194, 0.15);

  /* Gradients */
  --gradient-hero:   linear-gradient(259.72deg, #0061a1 2.46%, #0c013b 89.42%);
  --gradient-cta:    linear-gradient(260.03deg, #0061a1 2.46%, #0c013b 89.42%);
  --gradient-footer: linear-gradient(252.11deg, #0061a1 32.26%, #0c013b 89.44%);

  /* Typografie — Figma text styles */
  --font-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-pagetitel: 55px;   --lh-pagetitel: 70px;
  --fs-h2: 40px;          --lh-h2: 55px;
  --fs-h3: 24px;          --lh-h3: 30px;
  --fs-h4: 20px;          --lh-h4: 30px;
  --fs-intro: 24px;       --lh-intro: 34.8px;
  --fs-p: 17px;
  --fs-menu: 16px;
  --fs-button: 16px;
  --fs-label: 14px;
  --ls-tight: -0.5px;

  /* Radii */
  --radius-xl: 40px;
  --radius-lg: 20px;
  --radius-sm: 5px;
  --radius-pill: 78px;

  /* Layout — artboard 1728px.
     Het paginavlak is 1702px (13px blauwe rand links/rechts).
     Binnen dat vlak: buiten-container 1572px (65px marge),
     content-container 1350px (176px marge), kaart-padding 111px. */
  --page-max: 1702px;
  --pad-outer: clamp(16px, 3.762vw, 65px);
  --pad-inner: clamp(20px, 10.185vw, 176px);
  --pad-card:  clamp(20px, 6.42vw, 111px);

  /* Verticaal ritme — 1:1 uit de Figma y-posities */
  --space-section: clamp(56px, 8.1vw, 140px);
  --space-lg:      clamp(64px, 9.375vw, 162px);
  --space-md:      clamp(48px, 5.5vw, 95px);
  --space-sm:      clamp(36px, 4.05vw, 70px);
}

/* ---------- Basis ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-base);
  font-size: var(--fs-p);
  font-weight: 400;
  color: var(--color-7);
  background: var(--color-4);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--color-orange); outline-offset: 2px; }

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

/* =========================================================================
   Layout-shell — blauwe achtergrond met licht paginavlak
   ========================================================================= */
.site { background: var(--color-4); padding: 17px 13px 42px; }

.site__panel {
  position: relative;
  background: var(--color-2);
  border-radius: var(--radius-xl);
  padding-bottom: 216px;   /* footerkaart overlapt het paneel met 216px */
}

/* Decoratieve witte bellen (Figma: "Background" ellipsen-laag) */
.decor { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-xl); pointer-events: none; z-index: 0; }
.decor__bubble { position: absolute; background: #fff; border-radius: 50%; }

.site__panel > *:not(.decor) { position: relative; z-index: 1; }

/* Containers */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-inner);
}
.container--wide { padding-inline: var(--pad-outer); }

/* =========================================================================
   Knoppen
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding-inline: 24px;
  font-size: var(--fs-button);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 46px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--outline {
  border-radius: var(--radius-pill);
  border-color: var(--color-4);
  background: transparent;
  color: var(--color-7);
}
.btn--outline:hover { background: var(--color-4); color: #fff; }

.btn--outline-light { color: #fff; }
.btn--outline-light:hover { background: var(--color-4); color: #fff; }

.btn--primary { background: var(--color-orange); color: #fff; }
.btn--primary:hover { background: #a94a19; }

.btn--blue { background: var(--color-4); color: #fff; }
.btn--blue:hover { background: #14699f; }

.btn--navy { background: var(--color-7); color: #fff; }
.btn--navy:hover { background: #180a52; }

/* Tekstlink met pijl */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: var(--fs-button);
  font-weight: 500;
  color: var(--color-4);
}
.link-arrow__icon {
  width: 16.44px; height: 16.44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
/* Figma tekent de pijl diagonaal en roteert hem 45° naar rechts */
.link-arrow__icon img { width: 11.62px; height: 11.62px; transform: rotate(45deg); }
.link-arrow:hover .link-arrow__icon { transform: translateX(4px); }

/* =========================================================================
   Typografie-helpers
   ========================================================================= */
.pagetitel {
  font-size: var(--fs-pagetitel);
  line-height: var(--lh-pagetitel);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
}
.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  color: var(--color-7);
}
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; }
.intro { font-size: var(--fs-intro); line-height: var(--lh-intro); font-weight: 400; color: var(--color-5); }
.body-text { font-size: var(--fs-p); line-height: 1.55; color: var(--color-5); }

.eyebrow {
  font-size: var(--fs-menu);
  font-weight: 600;
  color: var(--color-4);
  text-align: center;
}

/* Horizontale scheidingslijn (Figma: Vector 4 / Vector 7) */
.rule { height: 1px; background: var(--color-border); border: 0; }

/* =========================================================================
   Header
   ========================================================================= */
.header { padding: 20px var(--pad-outer) 0; }

.header__inner {
  display: flex;
  align-items: center;
  gap: 69px;
  max-width: 1572px;
  margin-inline: auto;
  padding: 19px 112px 19px 110px;
  background: var(--color-2);
  border-radius: var(--radius-xl);
}

.header__logo { flex: none; width: 192px; height: 87px; }
.header__logo img { width: 192px; height: 87px; }

/* Op desktop bestaat het zijpaneel niet: menu en knoppen zijn dan gewoon
   directe flex-kinderen van de balk. Vanaf 1024px wordt dit een echt paneel. */
.header__drawer { display: contents; }
.header__backdrop { display: none; }
.header__close { display: none; }
.header__nav { display: flex; align-items: center; gap: 30px; }
.header__link {
  font-size: var(--fs-menu);
  font-weight: 400;
  color: #000;
  white-space: nowrap;
  transition: color .2s ease;
}
.header__link:hover,
.header__link[aria-current="page"] { color: var(--color-4); }

.header__actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }

.header__toggle {
  display: none;
  width: 48px; height: 48px;
  margin-left: auto;
  background: none; border: 0; cursor: pointer;
  align-items: center; justify-content: center;
}
.header__toggle span {
  display: block; position: relative;
  width: 24px; height: 2px; background: var(--color-7);
  transition: background .2s ease;
}
.header__toggle span::before,
.header__toggle span::after {
  content: ''; position: absolute; left: 0;
  width: 24px; height: 2px; background: var(--color-7);
  transition: transform .2s ease;
}
.header__toggle span::before { top: -7px; }
.header__toggle span::after  { top: 7px; }
.header__toggle[aria-expanded="true"] span { background: transparent; }
.header__toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.header__toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   Hero
   ========================================================================= */
.hero { padding-top: 19px; }
.hero__inner { max-width: 1572px; margin-inline: auto; position: relative; }

.hero__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 1572 / 771;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__card {
  position: relative;
  margin: -268px auto 0;          /* kaart y=684 vs beeld y=181 -> overlap */
  width: min(1338px, 100% - 234px);
  min-height: 442px;
  padding: 76px 20px 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
  color: #fff;
  background: var(--gradient-hero);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 5px 5px 10px var(--color-shadow);
}
.hero__title { max-width: 796px; }
.hero__intro { max-width: 1069px; color: #fff; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }

/* Compacte hero voor binnenpagina's */
.pagehero { padding-top: 40px; }
.pagehero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.pagehero__title { margin-bottom: 15px; }
.pagehero__intro { margin-bottom: 24px; }
.pagehero__actions { display: flex; flex-wrap: wrap; gap: 20px; }
.pagehero__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 570 / 380; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Kruimelpad */
.breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: var(--fs-menu); color: var(--color-4); }
.breadcrumb__sep { opacity: .5; }
.breadcrumb__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--color-4); flex: none; }

/* =========================================================================
   USP-balk
   ========================================================================= */
.usps { padding-top: var(--space-sm); }
.usps__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.usps__item { display: flex; align-items: center; gap: 21px; }
.usps__icon { width: 24px; height: 24px; flex: none; }
.usps__label { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; color: var(--color-7); white-space: nowrap; }
.usps__rule { margin-top: 52px; }

/* =========================================================================
   Intro-sectie (gecentreerde kop + tekst)
   ========================================================================= */
.intro-block { padding-top: clamp(40px, 4.4vw, 76px); text-align: center; }
.intro-block__title { max-width: 667px; margin-inline: auto; }
.intro-block__text { max-width: 1046px; margin: 14px auto 0; }

/* =========================================================================
   Pijlers (4 kaarten)
   ========================================================================= */
.pillars { padding-top: clamp(36px, 3.7vw, 64px); }
.pillars__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 39px; }

.card-pillar {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 24px 19px;
  background: var(--color-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.card-pillar__icon { width: 45px; height: 45px; flex: none; }
.card-pillar__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--color-4); }
.card-pillar__text { font-size: var(--fs-p); line-height: 1.55; color: var(--color-5); }

/* =========================================================================
   Media + lijst (bijv. "De zeven zekerheden")
   ========================================================================= */
.media-list { padding-top: clamp(56px, 8.33vw, 144px); }
.media-list__inner {
  display: grid;
  grid-template-columns: 649fr 579fr;
  gap: clamp(24px, 7.06vw, 122px);
  align-items: start;
}
.media-list__inner--reverse {
  grid-template-columns: 489fr 649fr;
  gap: clamp(24px, 12.27vw, 212px);
}

/* Detailpagina's: beeld 653 en tekst 577, en het beeld is even hoog als de
   content (Figma: beide 409px). Het beeld is daarom absoluut gepositioneerd,
   zodat het geen eigen hoogte inbrengt en de rij door de tekst bepaald wordt. */
.media-list__inner--stretch {
  grid-template-columns: 653fr 577fr;
  gap: clamp(24px, 7.0vw, 121px);
  align-items: stretch;
}
.media-list__inner--stretch .media-list__media {
  position: relative;
  aspect-ratio: auto;
  min-height: 260px;
}
.media-list__inner--stretch .media-list__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-list__body { padding-top: 12px; }
.media-list__title { margin-bottom: 12px; }
.media-list__text { margin-bottom: 29px; width: min(577px, calc(100vw - 2 * var(--pad-inner))); }
.media-list__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 649 / 594; }
.media-list__media img { width: 100%; height: 100%; object-fit: cover; }
.media-list__actions { margin-top: 28px; }

.icon-list { display: flex; flex-direction: column; gap: 13px; }
.icon-list__item { display: flex; align-items: center; gap: 25px; }
.icon-list__icon { width: 45px; height: 45px; flex: none; }
.icon-list__label { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--color-4); white-space: nowrap; }

/* Lijst met scheidingslijnen + pijl (branches) */
.link-list { display: flex; flex-direction: column; gap: 7px; }
.link-list__item {
  display: flex;
  align-items: center;
  gap: 25px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--color-border);
}
.link-list__item:last-child { border-bottom: 0; }
.link-list__icon { width: 45px; height: 45px; flex: none; }
.link-list__label { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--color-4); }
.link-list__arrow {
  width: 16.44px; height: 16.44px; margin-left: auto; flex: none;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.link-list__arrow img { width: 11.62px; height: 11.62px; transform: rotate(45deg); }
.link-list__item:hover .link-list__arrow { transform: translateX(4px); }

/* =========================================================================
   Diensten-carrousel
   ========================================================================= */
.services { padding-top: var(--space-section); }
.services__inner {
  position: relative;
  max-width: 1557px;
  margin-inline: auto;
  padding: clamp(48px, 9.14vw, 158px) 0 clamp(40px, 5.09vw, 88px) var(--pad-card);
  background: var(--color-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.services__layout { display: flex; gap: 72px; align-items: flex-start; }
.services__head { flex: none; width: 274px; display: flex; flex-direction: column; gap: 22px; }
.services__text { color: var(--color-5); }

.services__track {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-right: var(--pad-card);
}
.services__track::-webkit-scrollbar { display: none; }

/* Figma: de kaart die uit beeld loopt vervaagt over ~44px naar de containerkleur.
   JS zet --fade-l / --fade-r op 0 zodra er aan die kant niets meer te scrollen valt. */
.services__track,
.numbered__track {
  --fade-l: 0px;
  --fade-r: 44px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l),
                                      #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l),
                                      #000 calc(100% - var(--fade-r)), transparent 100%);
}

.card-service { flex: none; width: 308px; display: flex; flex-direction: column; gap: 10px; scroll-snap-align: start; }
.card-service__media { border-radius: var(--radius-lg); overflow: hidden; height: 431px; }
.card-service__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card-service:hover .card-service__media img { transform: scale(1.04); }
.card-service__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--color-7); }

.services__next {
  position: absolute;
  right: 32px;
  bottom: clamp(40px, 5.09vw, 88px);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease;
}
.services__next:hover { background: var(--color-6); }
.services__next svg { width: 16px; height: 16px; }

/* =========================================================================
   Logo-strip
   ========================================================================= */
.logos { padding-top: clamp(44px, 4.8vw, 83px); }
.logos__title { margin-top: 79px; margin-bottom: 63px; }
.logos__list { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.logos__item { width: 154px; height: 29px; flex: none; opacity: .85; }
.logos__item img { width: 100%; height: 100%; object-fit: contain; }

/* =========================================================================
   CTA-banner
   ========================================================================= */
.cta { padding-top: var(--space-md); }
.cta__inner { position: relative; max-width: 1572px; margin-inline: auto; padding-top: 118px; }

.cta__avatar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 235px;
  height: 235px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
}
.cta__avatar img { width: 100%; height: 100%; object-fit: cover; }

.cta__card {
  position: relative;
  min-height: 536px;
  padding: 165px var(--pad-card) 113px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
  background: var(--gradient-cta);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
/* Figma: Rectangle 71 heeft een video-fill (mix-blend screen, 35%).
   Zonder mp4 blijft de posterframe staan. */
.cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: .35;
  pointer-events: none;
  border-radius: var(--radius-xl);
}
.cta__card > *:not(.cta__bg) { position: relative; z-index: 1; }
.cta__title { color: var(--color-cta-title); max-width: 900px; }
.cta__text { color: #fff; max-width: 1046px; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }

/* =========================================================================
   Quote / tekst-met-beeld
   ========================================================================= */
.quote { padding-top: var(--space-lg); }
.quote__inner { display: grid; grid-template-columns: 649fr 579fr; gap: clamp(24px, 7.06vw, 122px); align-items: start; }
.quote__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 649 / 492; }
.quote__media img { width: 100%; height: 100%; object-fit: cover; }
.quote__title { margin-bottom: 20px; }
.quote__lead { margin-bottom: 24px; }
.quote__body p + p { margin-top: 20px; }

/* =========================================================================
   Kostenblok (beeld + formulierkaart)
   ========================================================================= */
.costs { padding-top: clamp(56px, 8.45vw, 146px); }
.costs__inner {
  position: relative;
  max-width: 1572px;
  margin-inline: auto;
  min-height: 821px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #dfe9f3;
}
.costs__bg { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-xl); }
/* Figma: beeld staat op 150.25% x 183.89%, verschoven -37.23% / -41.94% */
.costs__bg img {
  position: absolute;
  left: -37.23%;
  top: -41.94%;
  width: 150.25%;
  height: 183.89%;
  max-width: none;
  object-fit: cover;
}

/* De kaart is in Figma 652×626 met 100px boven, 95px onder en 115px rechts.
   Die marges staan bewust als margin en niet als `top`, want een relatieve
   verschuiving telt niet mee in de hoogte van .costs__inner: de kaart schoof
   dan onder de vaste 821px uit en werd door `overflow: hidden` afgekapt zodra
   de inhoud iets hoger werd dan de placeholder in het ontwerp. Met marges
   groeit de sectie mee en blijft 821px de ondergrens. */
.costs__card {
  position: relative;
  margin: 100px 115px 95px auto;
  width: 652px;
  padding: 72px;
  background: var(--color-4);
  border-radius: var(--radius-lg);
  color: #fff;
}
.costs__card--plain { background: #fff; color: var(--color-7); }
.costs__inner--plain { background: #f0f5fc; border-radius: var(--radius-lg); }
.costs__title { margin-bottom: 15px; color: #fff; }
.costs__card--plain .costs__title { color: var(--color-7); }
.costs__text { margin-bottom: 20px; font-size: var(--fs-p); line-height: 1.4; }
.costs__card--plain .costs__text { color: var(--color-5); }

/* =========================================================================
   Formulieren
   ========================================================================= */
.form { display: grid; gap: 15px 19px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__field--full { grid-column: 1 / -1; }
.form__label { font-size: var(--fs-label); font-weight: 600; }
.form__control {
  width: 100%;
  padding: 11px;
  font-size: var(--fs-p);
  background: transparent;
  border: 1px solid var(--color-4);
  border-radius: var(--radius-sm);
  color: inherit;
}
.form__control::placeholder { color: currentColor; opacity: .85; }
.form__control:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
select.form__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M.35.35 4.5 4.5 8.65.35' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}
textarea.form__control { resize: vertical; min-height: 120px; }
.form__submit { grid-column: 1 / -1; justify-self: start; margin-top: 5px; }

/* Licht formulier (op witte kaart) */
.form--light .form__control { background: #fff; color: var(--color-5); }
.form--light .form__control::placeholder { color: var(--color-5); opacity: 1; }
.form--light .form__control:focus { border-color: var(--color-4); box-shadow: 0 0 0 2px rgba(25,131,199,.25); }
.form--light .form__label { color: var(--color-7); }
.form--light select.form__control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M.35.35 4.5 4.5 8.65.35' fill='none' stroke='%236d6789' stroke-width='1'/%3E%3C/svg%3E");
}
.form__check { display: flex; align-items: flex-start; gap: 10px; grid-column: 1 / -1; font-size: var(--fs-label); }
.form__check input { margin-top: 3px; accent-color: var(--color-4); }

/* =========================================================================
   Testimonial-slider — 1:1 uit Figma (Group 201)
   Middenkaart 1123x353, peek 156, tussenruimte 38, buitenranden vervagen.
   De peeks tonen de vorige/volgende review, precies zoals in het ontwerp.
   ========================================================================= */
.testimonial { padding-top: var(--space-section); }
.testimonial__inner {
  --peek: 156px;
  --tgap: 38px;
  position: relative;
  max-width: 1511px;
  margin-inline: auto;
}

.testimonial__viewport {
  overflow: hidden;
  /* de peek-kaarten lopen naar de rand toe uit beeld, net als in Figma */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 88px, #000 calc(100% - 88px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 88px, #000 calc(100% - 88px), transparent 100%);
}

.testimonial__track {
  display: flex;
  align-items: center;   /* slides rekken elkaar niet op */
  gap: var(--tgap);
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.testimonial__track.is-instant { transition: none; }

.testimonial__slide {
  flex: none;
  width: calc(100% - 2 * (var(--peek) + var(--tgap)));
  display: flex;
}

.testimonial__card {
  flex: 1;
  margin: 0;
  /* 84 + 198 (inhoud) + 71 = 353px, exact de Figma-hoogte */
  padding: 84px 60px 71px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: opacity .6s ease;
}
/* naastgelegen kaarten zijn 60px lager (293px), zoals in het ontwerp */
.testimonial__slide:not(.is-active) .testimonial__card { padding-block: 54px 41px; }

.testimonial__stars { display: flex; gap: 10px; color: var(--color-4); font-size: 20px; line-height: 20px; }
.testimonial__quote {
  margin: 39px 0 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--color-4);
  max-width: 810px;   /* Figma: quote-regel is 805px breed */
}
.testimonial__name { display: block; margin-top: 22px; font-size: var(--fs-p); font-weight: 600; color: var(--color-7); }
.testimonial__role { display: block; margin-top: 5px; font-size: var(--fs-p); color: var(--color-5); }

.testimonial__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-7);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.testimonial__nav:hover { background: var(--color-4); color: #fff; border-color: var(--color-4); }
.testimonial__nav svg { width: 16px; height: 16px; }
.testimonial__nav--prev { left: 82px; }
.testimonial__nav--next { right: 82px; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { padding-top: var(--space-section); }
.faq__head { text-align: center; margin-bottom: 40px; }
.faq__text { margin-top: 12px; }
.faq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 26px; }

.faq__item {
  background: var(--color-6);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 16px 22px;
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--fs-p);
  font-weight: 500;
  color: var(--color-7);
  cursor: pointer;
}
.faq__icon { width: 12px; height: 8px; flex: none; transition: transform .25s ease; }
.faq__question[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }
.faq__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
.faq__answer > div { overflow: hidden; }
.faq__answer p { padding: 0 22px 18px; font-size: var(--fs-p); line-height: 1.55; color: var(--color-5); }

/* =========================================================================
   Stappen / genummerde blokken
   ========================================================================= */
.steps { padding-top: var(--space-section); }
.steps__head { text-align: center; margin-bottom: 40px; }
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.steps__item { display: flex; flex-direction: column; gap: 12px; }
.steps__number {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-4); color: #fff;
  border-radius: 50%;
  font-size: 12px; font-weight: 600;
}
.steps__title { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; color: var(--color-4); }
.steps__text { font-size: var(--fs-p); line-height: 1.55; color: var(--color-5); }

/* =========================================================================
   Donkere feature-kaarten (bijv. zeven zekerheden op dienstpagina)
   ========================================================================= */
.features { padding-top: var(--space-section); }
.features__inner {
  max-width: 1557px; margin-inline: auto;
  padding: 60px var(--pad-card);
  background: var(--color-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.features__head { text-align: center; margin-bottom: 40px; }
.features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.card-dark {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 24px;
  background: var(--gradient-footer);
  border-radius: var(--radius-lg);
  color: #fff;
  min-height: 260px;
}
.card-dark__icon { width: 45px; height: 45px; }
.card-dark__title { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; }
.card-dark__text { font-size: var(--fs-p); line-height: 1.5; opacity: .8; }

/* =========================================================================
   Vacatures
   ========================================================================= */
.jobs { padding-top: var(--space-section); }
/* Secties dragen hun witruimte aan de bovenkant, dus de laatste sectie op een
   pagina heeft er onderaan zelf een nodig. In Figma is dat 120px onder de
   vacaturelijst. Bewust alleen hier: op de homepage loopt het kostenblok juist
   tot tegen de footer aan. */
main > .jobs:last-child { padding-bottom: clamp(48px, 6.94vw, 120px); }
.jobs__head { text-align: center; margin-bottom: 40px; }
.jobs__list { display: flex; flex-direction: column; gap: 42px; }
.job {
  display: flex; align-items: center; gap: 30px;
  padding: 47px clamp(20px, 4.05vw, 70px);
  background: var(--color-6);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.job__title { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; color: var(--color-7); }
.job__meta { font-size: var(--fs-label); color: var(--color-5); margin-left: auto; }
.job__cta { flex: none; }

/* Team-/collega-kaarten */
.team { padding-top: var(--space-section); }
.team__head { text-align: center; margin-bottom: 40px; }
/* Figma: 3 kolommen van 425px, 40px ertussen, alle tekst gecentreerd */
.team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.team-card { margin: 0; text-align: center; }
.team-card__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 425 / 286; }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; }
.team-card__quote {
  margin-top: 20px;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--color-4);
}
.team-card__name { display: block; margin-top: 17px; font-size: var(--fs-p); font-weight: 600; color: var(--color-7); }
.team-card__role { display: block; margin-top: 16px; font-size: var(--fs-p); color: var(--color-5); }

/* =========================================================================
   Contactgegevens
   ========================================================================= */
.contact-info { display: flex; flex-direction: column; gap: 18px; }
.contact-info__row { display: flex; gap: 12px; font-size: var(--fs-p); color: var(--color-5); }
.contact-info__key { width: 90px; flex: none; font-weight: 600; color: var(--color-7); }

/* =========================================================================
   Checklijst
   ========================================================================= */
.checklist { display: flex; flex-direction: column; gap: 12px; }
.checklist__item { display: flex; align-items: flex-start; gap: 14px; font-size: var(--fs-p); line-height: 1.5; color: var(--color-7); }
.checklist__icon { width: 20px; height: 20px; flex: none; margin-top: 3px; }

/* =========================================================================
   Footer
   ========================================================================= */
.footer { position: relative; z-index: 2; margin-top: -216px; padding-inline: var(--pad-outer); }
.footer__inner { position: relative; max-width: 1572px; margin-inline: auto; }

.footer__card {
  position: relative;
  background: var(--gradient-footer);
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: #fff;
}
.footer__top {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  padding: 71px var(--pad-card) 0;
}
.footer__logo { width: 216px; height: 98px; flex: none; }
.footer__actions { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }

.footer__rule { margin: 46px var(--pad-card) 0; height: 1px; background: rgba(255,255,255,.3); border: 0; }

.footer__cols {
  display: grid;
  grid-template-columns: 89px auto auto 350px;
  gap: clamp(32px, 10.4vw, 180px);
  padding: 59px var(--pad-card) 78px;
}
.footer__col-title { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; margin-bottom: 10px; }
.footer__list { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-p); line-height: 1.53; opacity: .6; }
.footer__list a { transition: opacity .2s ease; }
.footer__list a:hover { opacity: .7; text-decoration: underline; }
.footer__address { font-style: normal; }
.footer__contact-row { display: flex; gap: 19px; }
.footer__contact-key { width: 15px; flex: none; }

.footer__bottom {
  display: flex;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
  padding: 45px var(--pad-card) 64px;
  background: rgba(29, 20, 65, .2);
}
.footer__legal { display: flex; gap: 25px; flex-wrap: wrap; font-size: 16.8px; color: var(--color-6); }
.footer__legal a { text-decoration: underline; }
.footer__powered { margin-left: auto; font-size: 16.8px; }
.footer__socials { display: flex; align-items: center; gap: 20px; }
.footer__social { width: 45px; height: 45px; flex: none; transition: transform .2s ease; }
.footer__social:hover { transform: translateY(-2px); }
.footer__social--box {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-4); border-radius: 22.5px;
}
.footer__social--box img { width: 19.5px; height: 19.46px; }

.footer__copyright {
  padding: 18px 20px 0;
  text-align: center;
  font-size: 16.8px;
  font-weight: 600;
  color: #fff;
}

/* =========================================================================
   Zwevende WhatsApp-knop
   ========================================================================= */
.whatsapp {
  position: fixed;
  right: 32px;
  bottom: 32px;
  width: 66px;
  height: 66px;
  z-index: 50;
  transition: transform .2s ease;
}
.whatsapp:hover { transform: scale(1.06); }
.whatsapp img { width: 100%; height: 100%; }

/* =========================================================================
   Responsive — Tablet
   ========================================================================= */
@media (max-width: 1440px) {
  .footer__cols { gap: 80px; }
  .quote__inner { gap: 60px; }
}

@media (max-width: 1240px) {
  :root {
    --fs-pagetitel: 44px;  --lh-pagetitel: 56px;
    --fs-h2: 34px;         --lh-h2: 46px;
    --fs-intro: 20px;      --lh-intro: 30px;
  }
  .header__inner { padding: 16px 28px; gap: 24px; }
  .header__nav { gap: 20px; }
  .media-list__inner,
  .media-list__inner--reverse,
  .quote__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

@media (max-width: 1024px) {
  :root {
    --fs-pagetitel: 38px;  --lh-pagetitel: 48px;
    --fs-h2: 30px;         --lh-h2: 40px;
    --fs-h3: 21px;         --lh-h3: 28px;
    --fs-intro: 18px;      --lh-intro: 28px;
    --radius-xl: 28px;
  }

  /* Mobiel menu: uitschuivend zijpaneel */
  .header__toggle { display: flex; }
  .header__logo, .header__logo img { width: 140px; height: 64px; }

  .header__drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 100;
    width: min(360px, 86vw);
    padding: 24px 28px calc(28px + env(safe-area-inset-bottom));
    background: var(--color-2);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    box-shadow: -24px 0 60px rgba(12, 1, 59, .22);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility .32s;
  }
  .header.is-open .header__drawer { transform: none; visibility: visible; }

  .header__close {
    display: flex;
    align-self: flex-end;
    width: 44px; height: 44px;
    margin-bottom: 8px;
    align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer; color: var(--color-7);
  }
  .header__close span, .header__close span::before { content: ''; position: absolute; width: 20px; height: 2px; background: currentColor; border-radius: 2px; }
  .header__close span { position: relative; transform: rotate(45deg); }
  .header__close span::before { left: 0; transform: rotate(-90deg); }

  /* De menu-items krijgen ruimere raakvlakken dan in de balk. */
  .header__nav { flex-direction: column; align-items: stretch; gap: 0; }
  .header__link {
    padding: 14px 2px;
    font-size: 18px;
    border-bottom: 1px solid var(--color-border);
  }
  .header__actions { flex-direction: column; align-items: stretch; gap: 12px; margin: 24px 0 0; }
  .header__actions .btn { width: 100%; }

  /* Let op de selectorzwaarte: `.site__panel > *:not(.decor)` hierboven zet
     alles in het paneel op `position: relative; z-index: 1`. Die regel weegt
     zwaarder dan een losse klasse, dus zonder deze opbouw krijgt de backdrop
     zijn `position: fixed` niet en schildert `main` — dat later in de DOM
     staat — dwars over het opengeschoven menu heen. */
  .site__panel > .header__backdrop {
    display: block;              /* de basisregel zet hem op none */
    position: fixed; inset: 0; z-index: 90;
    background: rgba(12, 1, 59, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .32s, visibility .32s;
  }
  .site__panel > .header.is-open ~ .header__backdrop { opacity: 1; visibility: visible; }

  /*
   * De header mag hier geen eigen stacking context maken. Doet hij dat wel,
   * dan zitten al zijn kinderen in dezelfde laag als het paneel: het logo komt
   * dan bovenop de overlay in plaats van eronder. En omdat die laag aan
   * `.is-open` hing, viel hij bij het sluiten meteen terug terwijl het paneel
   * nog aan het uitschuiven was — precies het moment waarop je de pagina er
   * doorheen zag.
   *
   * Met `z-index: auto` vergelijken het paneel (100) en de overlay (90) zich
   * rechtstreeks met main (1) en de footer (2), en valt de rest van de header
   * gewoon onder de overlay.
   */
  .site__panel > .header { z-index: auto; }

  /* Achtergrond niet mee laten scrollen zolang het paneel open staat. */
  html.has-menu-open, html.has-menu-open body { overflow: hidden; }

  .hero__card { width: min(100%, 100%); margin-top: -140px; padding: 40px 24px; }
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }

  .usps__list { gap: 24px; }
  .usps__label { font-size: 17px; white-space: normal; }
  .icon-list__label { white-space: normal; }

  .pillars__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .steps__grid, .team__grid { grid-template-columns: 1fr 1fr; }

  .pagehero__inner { grid-template-columns: 1fr; gap: 32px; }
  .media-list__inner,
  .media-list__inner--reverse,
  .quote__inner { grid-template-columns: 1fr; gap: 32px; }
  .media-list__inner--reverse .media-list__media { order: -1; }
  .media-list__inner--stretch .media-list__media { aspect-ratio: 653 / 409; min-height: 0; }

  .services__inner { padding: 60px 0 60px var(--pad-card); }
  .services__layout { flex-direction: column; gap: 32px; }
  .services__head { width: 100%; }
  .services__next { display: none; }

  .cta__card { padding: 150px 24px 60px; min-height: 0; }
  .cta__avatar { width: 180px; height: 180px; }
  .cta__inner { padding-top: 90px; }
  .cta__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }

  .costs__inner { min-height: 0; }
  .costs__card { position: relative; margin: 0; width: 100%; padding: 40px 28px; }
  .costs__bg { position: relative; height: 320px; }
  .costs__bg img { height: 320px; }

  .faq__grid { grid-template-columns: 1fr; }

  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 32px; padding-block: 40px; }
  .footer__top { padding-top: 40px; }
  .footer__actions { margin-left: 0; width: 100%; }
  .footer__powered { margin-left: 0; }
}

/* =========================================================================
   Responsive — Mobile
   ========================================================================= */
@media (max-width: 768px) {
  :root {
    --fs-pagetitel: 30px;  --lh-pagetitel: 40px;
    --fs-h2: 26px;         --lh-h2: 34px;
    --fs-h3: 19px;         --lh-h3: 26px;
    --fs-h4: 18px;         --lh-h4: 26px;
    --fs-intro: 17px;      --lh-intro: 26px;
    --fs-p: 16px;
    --radius-xl: 20px;
    --radius-lg: 14px;
    --space-section: 48px;
  }

  .site { padding: 8px 8px 24px; }
  /* De footer schuift over het paneel heen; op mobiel mag die overlap kleiner,
     anders eet hij een flink stuk van de laatste sectie op.
     De padding is bewust de overlap (120px) plús een sectieafstand: alleen de
     overlap compenseren levert exact 0px tussen de laatste kaart en de footer,
     en dan plakken ze tegen elkaar. */
  .site__panel { padding-bottom: calc(120px + var(--space-section)); }

  .hero { padding-top: 20px; }
  .hero__media { aspect-ratio: 4 / 3; }
  .hero__card { margin-top: -80px; }

  /* Eén ritme voor alle secties; los ingestelde waarden liepen uiteen van
     36 tot 56px, wat de pagina onrustig maakte. */
  .usps, .intro-block, .pillars, .logos,
  .media-list, .services, .cta, .quote, .costs, .faq, .jobs, .team, .apply,
  .numbered, .timeline, .cardlist, .testimonial { padding-top: var(--space-section); }

  .usps__list { flex-direction: column; align-items: flex-start; gap: 16px; }
  .usps__rule { margin-top: 32px; }
  .pillars__grid { grid-template-columns: 1fr; gap: 16px; }
  .features__grid { grid-template-columns: 1fr; }
  .steps__grid, .team__grid { grid-template-columns: 1fr; gap: 24px; }

  .services__inner { padding: 40px 0 40px var(--pad-card); }
  .card-service { width: 260px; }
  .card-service__media { height: 340px; }

  .logos__list { justify-content: center; gap: 24px; }
  .logos__item { width: 120px; }

  .cta__avatar { width: 140px; height: 140px; }
  .cta__inner { padding-top: 70px; }
  .cta__card { padding: 100px 20px 44px; }

  .quote__inner { gap: 24px; }
  .costs__card { padding: 32px 24px 36px; }
  .form { grid-template-columns: 1fr; }


  .job { flex-direction: column; align-items: flex-start; gap: 14px; }
  .job__meta { margin-left: 0; }

  /* Footer: logo en knoppen onder elkaar in plaats van een halfslachtige rij
     die toch omklapt, en strakkere tussenruimtes zodat het blok niet ruim
     duizend pixels hoog wordt. */
  .footer { margin-top: -120px; }
  .footer__top { flex-direction: column; align-items: stretch; gap: 20px; }
  .footer__logo { width: 160px; height: 73px; }
  .footer__actions { flex-direction: column; gap: 12px; margin-left: 0; }
  .footer__actions .btn { width: 100%; }
  .footer__rule { margin-top: 28px; }
  .footer__cols { grid-template-columns: 1fr; gap: 26px; padding-block: 28px; }
  .footer__list { font-size: 15px; gap: 4px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer__legal { flex-direction: column; gap: 10px; font-size: 15px; }
  .footer__powered { margin-left: 0; font-size: 15px; }
  .footer__socials { margin-top: 0; }

  .whatsapp { right: 16px; bottom: 16px; width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================================
   Aanvullende componenten voor de binnenpagina's
   ========================================================================= */

/* ---------- Kruimelpad ---------- */
.breadcrumb__home {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  background: var(--color-4); border-radius: 50%;
}
.breadcrumb__home svg { width: 16px; height: 16px; }
.breadcrumb__link { font-weight: 600; }
.breadcrumb__current { font-weight: 600; color: var(--color-4); }

/* ---------- Pagehero ---------- */
.pagehero__inner { grid-template-columns: 655fr 655fr; gap: clamp(24px, 2.3vw, 40px); }
.pagehero__intro { color: var(--color-7); }
.pagehero__media { aspect-ratio: 655 / 424; }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center;
  padding: 5px 16px;
  border: 1px solid var(--color-4);
  border-radius: 78px;
  font-size: var(--fs-menu);
  color: var(--color-4);
  white-space: nowrap;
}
.badge--light { border-color: rgba(255,255,255,.5); color: #fff; }

/* ---------- Donkere quote-/contactkaart ---------- */
.quote-card {
  padding: 40px;
  background: var(--color-7);
  border-radius: var(--radius-lg);
  color: #fff;
}
.quote-card__quote { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
.quote-card__text { margin-top: 18px; font-size: var(--fs-p); line-height: 1.5; opacity: .8; }
.quote-card__person { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
.quote-card__avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; }
.quote-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote-card__name { font-size: var(--fs-p); font-weight: 600; }
.quote-card__name--blue { color: var(--color-4); }
.quote-card__role { font-size: var(--fs-p); opacity: .8; }
.quote-card__phone { display: flex; gap: 20px; font-size: var(--fs-p); }
.quote-card__phone span { color: var(--color-4); font-weight: 600; }
.quote-card__cta { margin-top: 24px; }

/* ---------- Genummerde donkere kaarten (carrousel) ---------- */
.numbered { padding-top: var(--space-section); }
.numbered__inner {
  max-width: 1577px; margin-inline: auto;
  padding: clamp(40px, 4.6vw, 80px) 0 clamp(40px, 4.6vw, 80px) var(--pad-card);
  background: var(--color-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
}
.numbered__head { max-width: 900px; margin: 0 auto clamp(28px, 3vw, 52px); padding-right: var(--pad-card); text-align: center; }
.numbered__title { color: var(--color-4); }
.numbered__text { margin-top: 14px; color: var(--color-7); }
.numbered__track {
  display: flex; gap: 40px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  padding-right: var(--pad-card);
}
.numbered__track::-webkit-scrollbar { display: none; }

.card-number {
  flex: none; width: 308px; min-height: 477px;
  display: flex; flex-direction: column;
  padding: 35px;
  background: var(--color-7);
  border-radius: var(--radius-lg);
  color: #fff;
  scroll-snap-align: start;
}
.card-number__icon { width: 45px; height: 45px; margin-bottom: auto; }
.card-number__num { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: 2px; margin-bottom: 6px; }
.card-number__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--color-4); margin-bottom: 10px; }
.card-number__text { font-size: var(--fs-p); line-height: 1.5; }

.carousel-next {
  position: absolute; right: 32px; top: 50%;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--color-border); border-radius: 50%;
  cursor: pointer;
}
.carousel-next svg { width: 16px; height: 16px; }

/* ---------- Tijdlijn ---------- */
.timeline { padding-top: var(--space-section); }
.timeline__title { margin-bottom: 44px; }
.timeline__bar { display: flex; align-items: flex-end; gap: 32px; margin-bottom: 56px; }
.timeline__track { position: relative; flex: 1; }

.timeline__line {
  position: absolute;
  left: 6px; right: 6px;  /* halve marker, zodat de lijn in het hart begint */
  bottom: 5px;            /* 6px (halve marker) - 1px (halve lijndikte) */
  height: 2px;
  background: var(--color-line);
}
.timeline__progress {
  display: block;
  width: 0;               /* exacte breedte wordt in JS op de hartlijn gezet */
  height: 4px;
  margin-top: -1px;       /* 4px balk gecentreerd op de 2px lijn */
  background: var(--color-4);
  transition: width .3s ease;
}

.timeline__steps { position: relative; display: flex; justify-content: space-between; align-items: flex-end; }

.timeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 4px 6px 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-5);
}
.timeline__step:first-child { align-items: flex-start; padding-left: 0; }
.timeline__step:last-child  { align-items: flex-end;   padding-right: 0; }

.timeline__label { font-size: var(--fs-menu); font-weight: 600; color: inherit; transition: color .2s ease; }

/* Inactief: afgerond vierkantje met een 2px rand (Figma) */
.timeline__dot {
  width: 12px; height: 12px;
  background: #f7fbfe;
  border: 2px solid var(--color-line);
  border-radius: 3px;
  transition: background .2s ease, border-color .2s ease;
}

/* alles t/m de actieve stap is 'afgelegd': zelfde afgeronde vorm, gevuld blauw */
.timeline__step.is-done { color: var(--color-4); }
.timeline__step.is-done .timeline__dot {
  background: var(--color-4);
  border-color: var(--color-4);
}
.timeline__step:hover { color: var(--color-4); }
.timeline__step:hover .timeline__dot { border-color: var(--color-4); }

.timeline__nav { display: flex; gap: 14px; flex: none; padding-bottom: 2px; }
.timeline__btn {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--color-4);
  border-radius: 50%;
  color: var(--color-4);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.timeline__btn:hover:not(:disabled) { background: var(--color-4); color: #fff; }
.timeline__btn:disabled { opacity: .35; cursor: default; }
.timeline__btn svg { width: 16px; height: 16px; }

.timeline__panel { display: grid; grid-template-columns: 649fr 655fr; gap: clamp(24px, 2.6vw, 46px); align-items: center; }
.timeline__panel[hidden] { display: none; }
.timeline__year { font-size: var(--fs-menu); font-weight: 600; color: var(--color-4); margin-bottom: 10px; }
.timeline__heading { color: var(--color-4); margin-bottom: 18px; }
.timeline__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 655 / 350; }
.timeline__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Horizontale kaartenlijst (diensten / branches) ---------- */
.cardlist { padding-top: clamp(48px, 6.9vw, 119px); }
/* Figma: 2 kolommen van 656px met 40px tussenruimte */
.cardlist__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
/* de contactkaart staat in kolom 2 en loopt over twee rijen door */
.cardlist__contact { grid-row: span 2; }
/* beeld en tekst zijn even breed: 308 + 40 + 308 */
.card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.card-row__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 308 / 190; }
.card-row__media img { width: 100%; height: 100%; object-fit: cover; }
.card-row__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--color-7); margin-bottom: 10px; }
.card-row__text { font-size: var(--fs-p); line-height: 1.5; color: var(--color-5); margin-bottom: 14px; }

/* ---------- Contactpagina ---------- */
.contact { padding-top: 44px; }
.contact__inner { display: grid; grid-template-columns: 655fr 655fr; gap: clamp(24px, 2.3vw, 40px); align-items: start; }
.contact__rule { margin: 40px 0 30px; }
.contact__name { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--color-4); margin-bottom: 12px; }
.contact__list { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-p); }
.contact__row { display: flex; gap: 20px; }
.contact__key { width: 15px; flex: none; font-weight: 600; }

/* Formulier op lichte pagina */
.form--page .form__control { background: #fff; border-color: var(--color-border); color: var(--color-7); }
.form--page .form__control::placeholder { color: var(--color-5); opacity: 1; }
.form--page .form__control:focus { border-color: var(--color-4); box-shadow: 0 0 0 2px rgba(25,131,199,.25); }
.form--page .form__label { color: var(--color-7); }
.form--page select.form__control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M.35.35 4.5 4.5 8.65.35' fill='none' stroke='%236d6789' stroke-width='1'/%3E%3C/svg%3E");
}
.form__footer { grid-column: 1 / -1; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; margin-top: 10px; }
.form__footer .btn { margin-left: auto; }
.form__options { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.form__option { display: flex; align-items: center; gap: 14px; font-size: var(--fs-p); }
.form__option input { width: 24px; height: 24px; flex: none; accent-color: var(--color-4); }
.form__rule { grid-column: 1 / -1; margin-top: 10px; }

/* ---------- Vacaturedetail ---------- */
.job-detail { padding-top: 63px; }
/* Figma: tekstkolom 864px, beeldkolom 423px, 62px ertussen. Het kruimelpad
   staat binnen de tekstkolom, zodat het beeld rechts op dezelfde hoogte begint. */
.job-detail__inner { display: grid; grid-template-columns: minmax(0, 1fr) 423px; gap: 62px; align-items: start; }
.job-detail__title { margin-bottom: 18px; }
.job-detail__badge { margin-bottom: 22px; }
.job-detail__intro { margin-bottom: 40px; }
.job-detail__block + .job-detail__block { margin-top: 40px; }
.job-detail__block-title { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; margin-bottom: 12px; }
.job-detail__block-text { font-size: var(--fs-p); line-height: 1.55; color: var(--color-5); margin-bottom: 20px; }
.job-detail__rule { margin: 40px 0; }
.job-detail__aside { display: flex; flex-direction: column; }
.job-detail__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 423 / 303; }
.job-detail__media img { width: 100%; height: 100%; object-fit: cover; }
/* In Figma raken beeld en kaart elkaar precies; geen overlap, geen tussenruimte. */
.job-detail__card { margin-top: 0; padding: 32px; }
.checklist__item--bold { font-weight: 600; }

/* ---------- Vacaturelijst ---------- */
.job__head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.job__body { display: flex; flex-direction: column; gap: 8px; }
.job__text { font-size: var(--fs-p); color: var(--color-5); }

/* ---------- Stappen ---------- */
.steps__number { width: 44px; height: 44px; font-size: var(--fs-menu); }

/* ---------- Sollicitatieformulier op lichte kaart ---------- */
.apply { padding-top: var(--space-section); }
.apply__inner {
  max-width: 1557px; margin-inline: auto;
  padding: clamp(28px, 3.24vw, 56px) var(--pad-card) clamp(40px, 5.56vw, 96px);
  background: var(--color-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.apply__title { color: var(--color-4); margin-bottom: clamp(20px, 2.03vw, 35px); }

/* Figma: drie kolommen van 411 / 411 / 432px met 50px ertussen. De velden staan
   onder elkaar in kolom 1, het berichtveld vult kolom 2 over die volle hoogte en
   het beeld staat rechts, met zijn onderkant gelijk aan de verzendknop.
   Het formulier beslaat kolom 1 en 2 samen: 411 + 50 + 411 = 872. */
.apply__layout { display: grid; grid-template-columns: 872fr 432fr; gap: 50px; }
.apply__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 432 / 407; align-self: end; }
.apply__media img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   Responsive — aanvullende componenten
   ========================================================================= */
@media (max-width: 1024px) {
  .pagehero__inner,
  .contact__inner,
  .timeline__panel,
  .job-detail__inner,
  .apply__layout { grid-template-columns: 1fr; }
  .cardlist__grid { grid-template-columns: 1fr; gap: 28px; }
  .cardlist__contact { grid-row: auto; }
  .carousel-next { display: none; }
  .apply__media { aspect-ratio: 16 / 9; }
  .job-detail__card { margin-top: 20px; }
}

@media (max-width: 768px) {
  .card-row { grid-template-columns: 1fr; gap: 16px; }
  .card-row__media { aspect-ratio: 16 / 10; }
  .quote-card { padding: 24px; }
  .card-number { width: 260px; min-height: 0; padding: 24px; }
  /* Zes jaartallen naast elkaar passen op deze breedte niet met de
     desktopmaten: de rij liep 8px buiten het paneel en gaf de hele pagina
     horizontale scroll. Kleiner label en krappere tussenruimte lost dat op
     zonder de tijdlijn te hoeven laten scrollen. */
  .timeline__steps { gap: 8px; }
  .timeline__label { font-size: 13px; }
  .timeline__bar { flex-direction: column; align-items: stretch; }
  .timeline__nav { justify-content: flex-end; }
  .form__options { grid-template-columns: 1fr; }
  .form__footer .btn { margin-left: 0; width: 100%; }
}



/* Akkoordvinkje */
.form__check { align-items: center; gap: 14px; font-size: var(--fs-p); }
.form__check input { width: 24px; height: 24px; flex: none; margin-top: 0; border-radius: 4px; }
.form__check a { text-decoration: underline; }

/* Voorkomt horizontale overflow van knopgroepen op smalle schermen */
@media (max-width: 1024px) {
  .hero__actions,
  .cta__actions { max-width: min(340px, 100%); }
  .btn { max-width: 100%; }
}
/* =========================================================================
   Decoratieve witte bellen — 1:1 uit de Figma "Background" ellipsen-laag.
   Posities zijn absolute px t.o.v. de linkerbovenhoek van het paginavlak en
   schalen mee met de artboardbreedte van 1728px.
   ========================================================================= */
.decor { --u: calc(min(100vw, 1728px) / 1728); }
.decor__bubble {
  left:   calc(var(--bx) * var(--u));
  top:    calc(var(--by) * var(--u));
  width:  calc(var(--bs) * var(--u));
  height: calc(var(--bs) * var(--u));
}

/* home — 10 bel(len) */
.decor--home .decor__bubble:nth-child(1) { --bx: 317; --by: 1315; --bs: 38; }
.decor--home .decor__bubble:nth-child(2) { --bx: 64; --by: 1353; --bs: 208; }
.decor--home .decor__bubble:nth-child(3) { --bx: 1588; --by: 2492; --bs: 38; }
.decor--home .decor__bubble:nth-child(4) { --bx: 1418; --by: 2577; --bs: 208; }
.decor--home .decor__bubble:nth-child(5) { --bx: 84; --by: 3616; --bs: 208; }
.decor--home .decor__bubble:nth-child(6) { --bx: 84; --by: 3876; --bs: 38; }
.decor--home .decor__bubble:nth-child(7) { --bx: 967; --by: 4673; --bs: 38; }
.decor--home .decor__bubble:nth-child(8) { --bx: 694; --by: 4744; --bs: 80; }
.decor--home .decor__bubble:nth-child(9) { --bx: 873; --by: 5771; --bs: 38; }
.decor--home .decor__bubble:nth-child(10) { --bx: 703; --by: 5856; --bs: 208; }

/* over-ons — 7 bel(len) */
.decor--over-ons .decor__bubble:nth-child(1) { --bx: 1568; --by: 508; --bs: 38; }
.decor--over-ons .decor__bubble:nth-child(2) { --bx: 1398; --by: 593; --bs: 208; }
.decor--over-ons .decor__bubble:nth-child(3) { --bx: 56; --by: 1070; --bs: 208; }
.decor--over-ons .decor__bubble:nth-child(4) { --bx: 56; --by: 1330; --bs: 38; }
.decor--over-ons .decor__bubble:nth-child(5) { --bx: 986; --by: 1657; --bs: 70; }
.decor--over-ons .decor__bubble:nth-child(6) { --bx: 1398; --by: 3417; --bs: 208; }
.decor--over-ons .decor__bubble:nth-child(7) { --bx: 1568; --by: 3502; --bs: 38; }

/* diensten — 2 bel(len) */
.decor--diensten .decor__bubble:nth-child(1) { --bx: 1568; --by: 508; --bs: 38; }
.decor--diensten .decor__bubble:nth-child(2) { --bx: 1398; --by: 593; --bs: 208; }

/* dienst — 2 bel(len) */
.decor--dienst .decor__bubble:nth-child(1) { --bx: 1568; --by: 508; --bs: 38; }
.decor--dienst .decor__bubble:nth-child(2) { --bx: 1398; --by: 593; --bs: 208; }

/* branches — 2 bel(len) */
.decor--branches .decor__bubble:nth-child(1) { --bx: 1568; --by: 508; --bs: 38; }
.decor--branches .decor__bubble:nth-child(2) { --bx: 1398; --by: 593; --bs: 208; }

/* branche — 2 bel(len) */
.decor--branche .decor__bubble:nth-child(1) { --bx: 1568; --by: 508; --bs: 38; }
.decor--branche .decor__bubble:nth-child(2) { --bx: 1398; --by: 593; --bs: 208; }

/* werken-bij — 2 bel(len) */
.decor--werken-bij .decor__bubble:nth-child(1) { --bx: 1568; --by: 403; --bs: 38; }
.decor--werken-bij .decor__bubble:nth-child(2) { --bx: 1398; --by: 488; --bs: 208; }

/* vacature — 3 bel(len) */
.decor--vacature .decor__bubble:nth-child(1) { --bx: 1568; --by: 403; --bs: 38; }
.decor--vacature .decor__bubble:nth-child(2) { --bx: 1398; --by: 488; --bs: 208; }
.decor--vacature .decor__bubble:nth-child(3) { --bx: 1135; --by: 727; --bs: 70; }

/* contact — 0 bel(len) */
.decor--contact { display: none; }

/* offerte — 1 bel(len) */
.decor--offerte .decor__bubble:nth-child(1) { --bx: 212; --by: 635; --bs: 70; }

/* Onder 768px klapt de layout volledig om; de bellen zouden dan willekeurig
   over de content vallen — daar tonen we ze niet. */
@media (max-width: 768px) {
  .decor { display: none; }
}

/* Bevestiging na het verzenden van een formulier */
.form__status {
  grid-column: 1 / -1;
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: var(--fs-p);
}
.form--page .form__status,
.form--light .form__status {
  background: var(--color-6);
  border-color: var(--color-border);
  color: var(--color-7);
}

/* Carrouseltracks zijn met de pijltjestoetsen te bedienen */
.services__track:focus-visible,
.numbered__track:focus-visible { outline: 3px solid var(--color-orange); outline-offset: 4px; }

/* Testimonial — responsive */
@media (max-width: 1240px) {
  .testimonial__inner { --peek: 90px; --tgap: 24px; }
  .testimonial__nav--prev { left: 30px; }
  .testimonial__nav--next { right: 30px; }
  .testimonial__card { padding: 56px 40px; }
}
@media (max-width: 1024px) {
  .testimonial__inner { --peek: 0px; --tgap: 20px; }
  .testimonial__viewport { -webkit-mask-image: none; mask-image: none; }
  .testimonial__nav--prev { left: -6px; }
  .testimonial__nav--next { right: -6px; }
  .testimonial__slide:not(.is-active) .testimonial__card { padding-block: 56px; }
}
@media (max-width: 768px) {
  .testimonial__card, .testimonial__slide:not(.is-active) .testimonial__card { padding: 36px 24px; }
  .testimonial__nav { width: 40px; height: 40px; }
  .testimonial__nav--prev { left: -4px; }
  .testimonial__nav--next { right: -4px; }
  .testimonial__quote { margin-top: 24px; }
}

/* ============================================================ Gravity Forms ==
   Gravity Forms' eigen stylesheets staan uit (gform_disable_css in
   inc/gravityforms.php). De opmaak hieronder legt GF's markup op dezelfde
   tokens als de statische formulieren hierboven, zodat beide varianten er
   identiek uitzien.

   GF nest de velden in .gform_body > .gform_fields. Die twee krijgen
   display:contents, waardoor de velden én de voettekst directe grid-items van
   het formulier worden — pas dan kunnen de akkoordvraag en de verzendknop
   naast elkaar op één rij staan, zoals in het ontwerp.
   ========================================================================== */

.form:has(.gform_wrapper) { display: block; }
.gform_wrapper form { display: grid; gap: 15px 19px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gform_wrapper .gform_body,
.gform_wrapper .gform_fields { display: contents; }

.gform_wrapper .gfield {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.gform_wrapper .gfield--width-full,
.gform_wrapper .gfield--type-textarea,
.gform_wrapper .gfield--type-checkbox,
.gform_wrapper .gfield--type-html { grid-column: 1 / -1; }

.gform_wrapper .gfield_label { font-size: var(--fs-label); font-weight: 600; margin: 0; padding: 0; }
.gform_wrapper .gfield_label.gfield_label_before_complex { margin-bottom: 0; }

/* Het ontwerp kent geen verplicht-markering; de eis blijft in de HTML staan. */
.gform_wrapper .gfield_required,
.gform_wrapper .gform_required_legend,
.gform_wrapper .gform_validation_container,
.gform_wrapper .gform_hidden { display: none; }
.gform_wrapper .hidden_label > .gfield_label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.gform_wrapper .ginput_container { display: flex; flex-direction: column; }
.gform_wrapper .ginput_container input:not([type="checkbox"]):not([type="radio"]),
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container textarea {
  width: 100%;
  padding: 11px;
  font: inherit;
  font-size: var(--fs-p);
  background: transparent;
  border: 1px solid var(--color-4);
  border-radius: var(--radius-sm);
  color: inherit;
  appearance: none;
}
.gform_wrapper .ginput_container textarea { min-height: 148px; resize: vertical; }
.gform_wrapper .ginput_container ::placeholder { color: currentColor; opacity: .85; }
.gform_wrapper .ginput_container :is(input, select, textarea):focus {
  outline: none;
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}

/* Meerkeuze: dezelfde twee kolommen als .form__options. */
.gform_wrapper .gfield_checkbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.gform_wrapper .gchoice { display: flex; align-items: center; gap: 14px; font-size: var(--fs-p); }
.gform_wrapper .gchoice input { width: 24px; height: 24px; flex: none; accent-color: var(--color-4); border-radius: 4px; }
.gform_wrapper .gchoice label { margin: 0; }

/* Akkoordvraag links, verzendknop rechts — samen één rij. */
.gform_wrapper .gfield--type-consent { justify-content: center; }
.gform_wrapper .ginput_container_consent { flex-direction: row; align-items: center; gap: 14px; font-size: var(--fs-p); }
.gform_wrapper .ginput_container_consent input { width: 24px; height: 24px; flex: none; accent-color: var(--color-4); border-radius: 4px; }
.gform_wrapper .ginput_container_consent label { margin: 0; }
.gform_wrapper .ginput_container_consent a { text-decoration: underline; }

.gform_wrapper .gform_footer { display: flex; align-items: center; justify-content: flex-end; margin: 0; padding: 0; }
.gform_wrapper .gform_ajax_spinner { margin-left: 12px; }

/* Meldingen: zelfde vorm als .form__status. */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message,
.gform_wrapper .gform_submission_error,
.gform_confirmation_message {
  margin-top: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: var(--fs-label);
}
/* Een lege validatieplaats neemt anders alsnog ruimte in. */
.gform_wrapper .validation_message:empty,
.gform_wrapper .gfield_validation_message:empty { display: none; }
.gform_wrapper .gform_validation_errors { grid-column: 1 / -1; }
.gform_confirmation_message { grid-column: 1 / -1; }

/* --- lichte varianten: contact-, offerte- en sollicitatiepagina ------------ */
.form--page .gform_wrapper .ginput_container input:not([type="checkbox"]):not([type="radio"]),
.form--page .gform_wrapper .ginput_container select,
.form--page .gform_wrapper .ginput_container textarea,
.form--light .gform_wrapper .ginput_container input:not([type="checkbox"]):not([type="radio"]),
.form--light .gform_wrapper .ginput_container select,
.form--light .gform_wrapper .ginput_container textarea {
  background: #fff;
  border-color: var(--color-border);
  color: var(--color-7);
}
.form--page .gform_wrapper .ginput_container ::placeholder,
.form--light .gform_wrapper .ginput_container ::placeholder { color: var(--color-5); opacity: 1; }
.form--page .gform_wrapper .ginput_container :is(input, select, textarea):focus,
.form--light .gform_wrapper .ginput_container :is(input, select, textarea):focus {
  border-color: var(--color-4);
  box-shadow: 0 0 0 2px rgba(25, 131, 199, .25);
}
.form--page .gform_wrapper .gfield_label,
.form--light .gform_wrapper .gfield_label { color: var(--color-7); }
.form--page .gform_wrapper select,
.form--light .gform_wrapper select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M.35.35 4.5 4.5 8.65.35' fill='none' stroke='%236d6789' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.form--page .gform_wrapper :is(.gfield_validation_message, .validation_message, .gform_submission_error),
.form--light .gform_wrapper :is(.gfield_validation_message, .validation_message, .gform_submission_error),
.form--page .gform_confirmation_message,
.form--light .gform_confirmation_message {
  background: var(--color-6);
  border-color: var(--color-border);
  color: var(--color-7);
}

/* --- kostencalculator: tweekoloms, knop linksonder ------------------------- */
.costs .gform_wrapper .gform_footer { grid-column: 1 / -1; justify-content: flex-start; margin-top: 5px; }
.costs .gform_wrapper .ginput_container textarea { min-height: 0; }

/* --- sollicitatieformulier: velden links, bericht rechts ------------------- */
.apply .gform_wrapper form { grid-template-columns: 1fr 1fr; column-gap: 50px; row-gap: 17px; }
.apply .gform_wrapper .gfield { grid-column: 1; }
/* Het berichtveld loopt naast de vier velden mee over vier rijen. */
.apply .gform_wrapper .gfield--type-textarea { grid-column: 2; grid-row: 1 / 5; }
.apply .gform_wrapper .gfield--type-textarea .ginput_container { flex: 1; }
.apply .gform_wrapper .gfield--type-textarea textarea { height: 100%; min-height: 0; }
/* Akkoordvraag linksonder, knop rechtsonder — beide op de vijfde rij. */
.apply .gform_wrapper .gfield--type-consent { grid-column: 1; grid-row: 5; align-self: center; }
.apply .gform_wrapper .gform_footer { grid-column: 2; grid-row: 5; justify-content: flex-end; align-self: center; }
/* Het C.V.-veld is een bestandsveld; zelfde doos als de andere invoervelden.
   GF hangt er standaard een regel met toegestane bestandstypen onder en een
   lege validatieplaats. Die staan niet in het ontwerp: de eerste blijft wel in
   de HTML voor schermlezers, de tweede klapt dicht zolang hij leeg is. */
.apply .gform_wrapper .ginput_container_fileupload input[type="file"] {
  width: 100%;
  height: 50px;
  padding: 0 11px;
  font: inherit;
  font-size: var(--fs-p);
  line-height: 48px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-5);
}
.apply .gform_wrapper .gform_fileupload_rules {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.apply .gform_wrapper .ginput_container_fileupload input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 4px 12px;
  font: inherit;
  font-size: var(--fs-label);
  background: var(--color-6);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-7);
  cursor: pointer;
}

@media (max-width: 1024px) {
  .apply .gform_wrapper form { grid-template-columns: 1fr; }
  .apply .gform_wrapper .gfield,
  .apply .gform_wrapper .gfield--type-textarea,
  .apply .gform_wrapper .gfield--type-consent,
  .apply .gform_wrapper .gform_footer { grid-column: 1; grid-row: auto; }
  .apply .gform_wrapper .gfield--type-textarea textarea { height: 180px; }
  .apply .gform_wrapper .gform_footer { justify-content: flex-start; }
}

@media (max-width: 768px) {
  .gform_wrapper form { grid-template-columns: 1fr; }
  .gform_wrapper .gfield_checkbox { grid-template-columns: 1fr; }
  .gform_wrapper .gform_footer { justify-content: flex-start; }
}