/* ============================================================
   WKUV main.css — samengesteld uit de statische pagina's
   Basis + home-secties (bron: static/home.html)
   ============================================================ */

    html, body { overflow-x: clip; }
    /* ==========================================================================
       FONTS (lokaal, woff2)
       LET OP: NewBlack Typeface woff2-bestanden nog aanleveren (custom font).
       ========================================================================== */
    @font-face {
      font-family: 'Poppins';
      src: url('../fonts/Poppins-Regular.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Poppins';
      src: url('../fonts/Poppins-Medium.woff2') format('woff2');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Poppins';
      src: url('../fonts/Poppins-SemiBold.woff2') format('woff2');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Poppins';
      src: url('../fonts/Poppins-Bold.woff2') format('woff2');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'NewBlack Typeface';
      src: url('../fonts/NewBlackTypeface-Medium.woff2') format('woff2');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'NewBlack Typeface';
      src: url('../fonts/NewBlackTypeface-SemiBold.woff2') format('woff2');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'NewBlack Typeface';
      src: url('../fonts/NewBlackTypeface-Bold.woff2') format('woff2');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    /* ==========================================================================
       RESET + DESIGN TOKENS (1:1 uit Figma variables/styles)
       ========================================================================== */
    * { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* Kleuren — Figma color styles */
      --c-zwart: #222326;            /* WKUV Zwart */
      --c-wit: #FFFFFF;              /* WKUV Wit */
      --c-koraal: #E96D3F;           /* WKUV Koraal */
      --c-mid2-groen: #97D2B0;       /* WKUV Mid2 groen */
      --c-licht-groen: #E2F4E8;      /* WKUV Licht groen */
      --c-licht-groen-2: #F1FBF4;    /* WKUV Licht groen 2 */
      --c-donker-groen: #1B2620;     /* WKUV Donker groen */
      --c-beige: #CCC7BD;            /* WKUV Beige */
      --c-licht-grijs: #F7F7F7;      /* WKUV Licht grijs */
      --c-licht-grijs-2: #FBFBFB;    /* WKUV Licht grijs 2 */
      --c-online: #64F25A;           /* Online */

      /* Typografie — Figma text styles (Desktop/) */
      --font-heading: 'NewBlack Typeface', 'Poppins', sans-serif;
      --font-body: 'Poppins', sans-serif;
      /* H1: Medium 70/67, ls 0.39 | H2: Medium 40/50, ls 0.36 | H3: Bold 28/30
         H4: Bold 23/23 | H5: SemiBold 18/25
         Body: 17/23 | Subtitel: 20/27 | Buttons: 20/20 ls 0.5 | Tagline: 15/20 */

      /* Container — design 1728px, content 1468px (130px paddings) */
      --container-max: 1468px;
      --container-pad: clamp(20px, 7.52vw, 130px);

      /* Laat block-size:auto animeren (accordions) — progressive enhancement */
      interpolate-size: allow-keywords;
    }

    body {
      font-family: var(--font-body);
      font-size: 17px;
      line-height: 23px;
      color: var(--c-zwart);
      background: var(--c-wit);
      -webkit-font-smoothing: antialiased;
    }

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

    .container {
      max-width: var(--container-max);
      margin-inline: auto;
      padding-inline: var(--container-pad);
    }

    /* ==========================================================================
       NAVBAR
       ========================================================================== */
    .navbar {
      position: absolute;
      top: 58px;
      left: 50%;
      transform: translateX(-50%);
      width: min(1377px, calc(100vw - 40px));
      height: 93px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--c-wit);
      border-radius: 200px;
      filter: drop-shadow(0px 4px 2px rgba(43, 75, 47, 0.2));
      z-index: 10;
    }
    .navbar__inner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 68px;
      padding-inline: 28px;
    }
    .navbar__logo { width: 206px; height: auto; }
    .navbar__menu {
      display: flex;
      align-items: center;
      gap: 25px;
    }
    .navbar__item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: center;
      padding-top: 4px;
      font-size: 17px;
      line-height: 23px;
      text-align: center;
      white-space: nowrap;
    }
    /* Hover uit Figma (Menu item Variant2): 3px #F06B30 onderstreping, tekst wipt omhoog */
    .navbar__item::after {
      content: "";
      width: 0;
      height: 3px;
      background: #F06B30;
      transition: width .2s ease;
    }
    @media (hover: hover) {
      .navbar__item { transition: transform .2s ease; }
      .navbar__item:hover { transform: translateY(-2px); }
      .navbar__item:hover::after { width: 100%; }
    }
    .navbar__actions {
      display: flex;
      align-items: center;
      gap: 45px;
    }
    .navbar__phone {
      display: flex;
      align-items: center;
      gap: 14px; /* ruimte voor de puls-ring van het bolletje */
    }
    .navbar__phone-link {
      display: flex;
      align-items: center;
      gap: 18px;
      white-space: nowrap;
    }
    .navbar__phone-icon { width: 24px; height: 24px; }
    .navbar__online-dot { width: 13px; height: 13px; border-radius: 50%; animation: wkuv-puls 2s ease-out infinite; }
    @keyframes wkuv-puls {
      0% { box-shadow: 0 0 0 0 rgba(100, 242, 90, 0.55); }
      70% { box-shadow: 0 0 0 6px rgba(100, 242, 90, 0); }
      100% { box-shadow: 0 0 0 0 rgba(100, 242, 90, 0); }
    }
    /* Hamburger (alleen mobiel zichtbaar) — checkbox-hack, geen JS nodig */
    .navbar__toggle { display: none; }
    .navbar__hamburger {
      display: none;
      width: 40px;
      height: 40px;
      cursor: pointer;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 6px;
    }
    .navbar__hamburger img { width: 100%; height: 100%; }
    .navbar__hamburger-lijn {
      width: 24px;
      height: 2.5px;
      border-radius: 2px;
      background: var(--c-zwart);
      transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
    }
    .navbar__hamburger img { transition: transform .35s cubic-bezier(.4, 0, .2, 1); }
    .navbar__toggle:checked ~ .navbar__inner .navbar__hamburger img { transform: rotate(90deg); }
    .navbar__mobielmenu {
      display: none;
      position: absolute;
      text-align: center;
      top: calc(100% + 10px);
      left: 16px;
      right: 16px;
      background: var(--c-wit);
      border-radius: 24px;
      padding: 24px 28px;
      flex-direction: column;
      box-shadow: 0 18px 44px rgba(27, 38, 32, .18);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-12px) scale(.98);
      transform-origin: top center;
      pointer-events: none;
      transition: opacity .28s ease, transform .38s cubic-bezier(.34, 1.35, .64, 1), visibility 0s linear .38s;
    }
    .navbar__toggle:checked ~ .navbar__mobielmenu {
      opacity: 1;
      visibility: visible;
      transform: none;
      pointer-events: auto;
      transition: opacity .28s ease, transform .38s cubic-bezier(.34, 1.35, .64, 1);
    }
    .navbar__mobielmenu a:not(.btn) {
      display: block;
      padding: 14px 4px;
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 21px;
      line-height: 24px;
      border-bottom: 1px solid rgba(34, 35, 38, .08);
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity .25s ease, transform .3s ease;
    }
    .navbar__mobielmenu a:not(.btn):last-of-type { border-bottom: 0; }
    .navbar__toggle:checked ~ .navbar__mobielmenu a:not(.btn) { opacity: 1; transform: none; }
    .navbar__toggle:checked ~ .navbar__mobielmenu a:nth-child(1) { transition-delay: .06s; }
    .navbar__toggle:checked ~ .navbar__mobielmenu a:nth-child(2) { transition-delay: .1s; }
    .navbar__toggle:checked ~ .navbar__mobielmenu a:nth-child(3) { transition-delay: .14s; }
    .navbar__toggle:checked ~ .navbar__mobielmenu a:nth-child(4) { transition-delay: .18s; }
    .navbar__toggle:checked ~ .navbar__mobielmenu a:nth-child(5) { transition-delay: .22s; }
    .navbar__toggle:checked ~ .navbar__mobielmenu a:nth-child(6) { transition-delay: .26s; }
    .navbar__mobielmenu a.navbar__mobielmenu-tel {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }
    .navbar__mobielmenu-tel img { flex-shrink: 0; }
    .navbar__mobielmenu .btn {
      margin-top: 16px;
      justify-content: center;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity .25s ease .28s, transform .3s ease .28s;
    }
    .navbar__toggle:checked ~ .navbar__mobielmenu .btn { opacity: 1; transform: none; }
    /* Floating WhatsApp-knop (alleen mobiel, uit Figma mobiel design) */
    .whatsapp-float-mobiel {
      display: none;
      position: fixed;
      right: 16px;
      bottom: 24px;
      width: 60px;
      height: 60px;
      z-index: 30;
    }
    .whatsapp-float-mobiel img { width: 100%; height: 100%; }
    /* Mobiele vergelijkingstabel (verborgen op desktop) */
    .vergelijk__mobiel { display: none; }

    /* Button — Desktop/Buttons: Poppins 20/20, ls 0.5 */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 45px;
      padding: 13px 20px;
      border: 0;
      border-radius: 50px;
      background: var(--c-koraal);
      color: var(--c-wit);
      font-size: 20px;
      line-height: 20px;
      letter-spacing: 0.5px;
      white-space: nowrap;
      cursor: pointer;
    }
    /* Hovers uit Figma componenten (Background+Shadow / Button black / Button green).
       Glow + witte radial highlight faden in via pseudo-elementen (opacity is altijd
       soepel te animeren; box-shadow-lijsten met/zonder inset zijn dat niet).
       Knoppen behouden hun grootte. */
    @media (hover: hover) {
      .btn {
        position: relative;
        isolation: isolate;
      }
      /* Radial highlight: boven de knop-achtergrond, onder de tekst */
      .btn::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: radial-gradient(ellipse 55% 220% at 50% 50%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0) 70%);
        opacity: 0;
        transition: opacity .35s ease-out;
        pointer-events: none;
      }
      /* Glow (per kleurvariant) */
      .btn::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: 0px 10px 26px 0px rgba(214, 61, 7, 0.26), 0px 0px 22px 0px rgba(233, 109, 63, 0.34);
        opacity: 0;
        transition: opacity .35s ease-out;
        pointer-events: none;
      }
      .btn--zwart::after, .btn--donker::after {
        box-shadow: 0px 10px 26px 0px rgba(8, 8, 8, 0.32), 0px 0px 22px 0px rgba(255, 255, 255, 0.2);
      }
      .btn--groen::after, .btn--groen-donkertekst::after {
        box-shadow: 0px 1px 2px 0px rgba(8, 8, 8, 0.2), 0px 4px 4px 0px rgba(8, 8, 8, 0.08), 0px 10px 26px 0px rgba(8, 8, 8, 0.32), 0px 0px 22px 0px rgba(255, 255, 255, 0.2);
      }
      .btn:hover::before, .btn:hover::after { opacity: 1; }
    }

    /* ==========================================================================
       SECTION: HERO
       ========================================================================== */
    .hero {
      position: relative;
      width: 100%;
      min-height: 1161px;
      background: var(--c-mid2-groen);
      overflow: hidden;
    }
    /* Decoratieve radial blobs (Figma: Ellipse 3 / 54 / 4) */
    .hero__blob {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }
    .hero__blob--rechts {
      width: 1080px; height: 1081px;
      right: -379px; top: -216px;
      background: radial-gradient(50% 50% at 50% 50%, rgba(0, 237, 163, 0.6) 0%, rgba(0, 237, 163, 0) 100%);
    }
    .hero__blob--linksboven {
      width: 1578px; height: 1579px;
      left: -635px; top: -414px;
      background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
    }
    .hero__blob--linksonder {
      width: 1080px; height: 1081px;
      left: -489px; top: 555px;
      background: radial-gradient(50% 50% at 50% 50%, rgba(0, 237, 163, 0.2) 0%, rgba(0, 237, 163, 0) 100%);
    }
    .hero__inner {
      position: relative;
      max-width: 1281px;
      width: min(1281px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      padding-top: 213px;
      display: flex;
      flex-direction: column;
      z-index: 1;
    }
    .hero__intro {
      display: flex;
      flex-direction: column;
      gap: 30px;
      align-items: center;
      max-width: 1086px;
      width: min(1086px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      text-align: center;
    }
    /* Desktop/Subtitel: 20/27 */
    .hero__tagline {
      font-size: 20px;
      line-height: 27px;
      text-transform: uppercase;
    }
    /* Desktop/H1: NewBlack Medium 70/67, ls 0.39 */
    .hero__title {
      font-family: var(--font-heading);
      font-weight: 500;
      font-size: 70px;
      line-height: 67px;
      letter-spacing: 0.3885px;
    }
    .hero__title-accent {
      position: relative;
      font-weight: 700;
      color: var(--c-wit);
      white-space: nowrap;
    }
    /* Golf-onderstreping: in Figma ~12px onder de baseline (net boven de regelgrens).
       De inline-box is hoger dan de regel (font-metrics), dus bottom gecorrigeerd. */
    .hero__title-accent::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 17px;
      height: 7px;
      background: url('../img/title-underline.svg') no-repeat center / 100% 100%;
    }
    .hero__subtitle {
      font-size: 17px;
      line-height: 23px;
    }

    /* Hero kaart: foto links + formulier rechts */
    .hero__card {
      display: flex;
      align-items: stretch; /* foto en formulierkaart altijd even hoog */
      justify-content: space-between;
      margin-top: 84px;
      width: 100%;
    }
    .hero__card-media {
      position: relative;
      width: 631px;
      height: auto;
      min-height: 490px;
      flex-shrink: 0;
      border-radius: 10px 0 0 10px;
      overflow: hidden;
    }
    /* Crop exact volgens Figma: rechterrand van de foto (ingebakken persoon) valt buiten beeld */
    .hero__card-img {
      position: absolute;
      width: 117.29%;
      height: 112.78%;
      left: -3.64%;
      top: -12.71%;
      max-width: none;
    }
    .hero__form-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
      justify-content: center;
      min-height: 490px;
      padding: 26px 26px 26px 93px;
      background: var(--c-wit);
      border-radius: 0 20px 20px 0;
      filter: drop-shadow(0px 14px 12px rgba(0, 0, 0, 0.1));
      flex-shrink: 0;
    }
    /* Persoon-overlay: valt in Figma exact over de ingebakken persoon in de foto,
       zodat zij over de kaartrand heen steekt. Crop 1:1 uit Figma. */
    .hero__persoon {
      position: absolute;
      left: -288px;
      top: 1px;
      bottom: 0;
      width: 377px;
      height: auto;
      overflow: hidden;
      pointer-events: none;
    }
    .hero__persoon img {
      position: absolute;
      width: 197.52%;
      height: 113.47%;
      left: -98.68%;
      top: -13.47%;
      max-width: none;
    }
    .hero__form {
      display: flex;
      flex-direction: column;
      gap: 26px;
      align-items: flex-start;
      width: 531px;
    }
    .hero__form-fields {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 516px;
    }
    /* Desktop/H5: NewBlack SemiBold 18/25 */
    .hero__form-title {
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 18px;
      line-height: 25px;
      text-transform: uppercase;
      transform: rotate(-0.4deg);
      width: 100%;
    }
    .form__row {
      display: flex;
      gap: 16px;
      align-items: center;
    }
    .form__input {
      display: flex;
      align-items: center;
      height: 50px;
      padding-left: 16px;
      width: 100%;
      background: var(--c-wit);
      border: 1px solid var(--c-beige);
      border-radius: 8px;
      font-size: 17px;
      line-height: 23px;
    }
    .form__input::placeholder { color: var(--c-zwart); }
    .form__input--half { width: 250px; }

    /* Grote CTA-knop in formulier */
    .btn--form {
      position: relative;
      width: 527px;
      height: 62px;
      border-radius: 40.8px;
      gap: 16px;
      filter: drop-shadow(0px 1px 1px rgba(8, 8, 8, 0.2)) drop-shadow(0px 4px 2px rgba(8, 8, 8, 0.08));
      box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 6px 12px 0px rgba(255, 255, 255, 0.12);
    }
    .btn__arrow { width: 13.6px; height: 11.9px; }

    /* USP's onder formulier */
    .hero__usps {
      display: flex;
      gap: 30px;
      align-items: center;
    }
    .usp {
      display: flex;
      gap: 11px;
      align-items: center;
      white-space: nowrap;
    }
    .usp__icon { width: 22px; height: 22px; flex-shrink: 0; }
    .usp__text { transform: rotate(-0.4deg); }

    /* Review-pill onderin hero — Desktop/Tagline: 15/20 */
    .hero__reviewbar {
      display: inline-flex;
      align-self: flex-start;
      margin-top: 45px;
      margin-bottom: 40px;
      height: 45px;
      padding: 2px 45px 2px 35px;
      align-items: center;
      background: var(--c-licht-groen);
      border-radius: 50px;
    }
    .hero__reviewbar-inner {
      display: flex;
      gap: 28px;
      align-items: center;
      font-size: 15px;
      line-height: 20px;
      white-space: nowrap;
    }
    .reviewbar__score {
      display: flex;
      gap: 14px;
      align-items: center;
    }
    .reviewbar__sterren { width: 78.6px; height: 13.9px; }
    .reviewbar__divider {
      width: 1px;
      height: 21px;
      background: var(--c-zwart);
    }

    /* ==========================================================================
       SECTION: SPOED CTA-STRIP
       ========================================================================== */
    .spoed {
      background: var(--c-licht-groen);
      padding: 32px 94px 40px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .spoed__pill {
      position: relative;
      width: 100%;
      max-width: 1540px;
      min-height: 198px;
      margin-inline: auto;
      padding: 40px 130px 44px 338px;
      background: var(--c-wit);
      border-radius: 100px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
    }
    .spoed__persoon {
      position: absolute;
      left: 127px;
      bottom: 0; /* onderkant altijd op de pillrand (foto is daar afgesneden) */
      width: 163px;
      height: 263px;
      object-fit: cover;
      object-position: top;
      pointer-events: none;
    }
    .spoed__content {
      display: flex;
      gap: 60px 157px;
      align-items: center;
      flex-wrap: wrap;
      min-width: 0;
    }
    .spoed__tekst {
      display: flex;
      flex-direction: column;
      gap: 7px;
      flex: 1 1 420px;
      max-width: 711px;
    }
    /* Desktop/Subtitel 20/27 */
    .spoed__tagline {
      font-size: 20px;
      line-height: 27px;
      text-transform: uppercase;
    }
    /* Desktop/H2: NewBlack Medium 40/50, ls 0.36 */
    .h2 {
      font-family: var(--font-heading);
      font-weight: 500;
      font-size: 40px;
      line-height: 50px;
      letter-spacing: 0.36px;
    }
    .spoed__actie {
      display: flex;
      flex-direction: column;
      gap: 11px;
      align-items: center;
      padding-top: 20px;
      width: 204px;
      flex-shrink: 0;
    }
    .btn--zwart {
      background: var(--c-zwart);
      width: 100%;
      height: 62px;
      border-radius: 40.8px;
      filter: drop-shadow(0px 1px 1px rgba(8, 8, 8, 0.2)) drop-shadow(0px 4px 2px rgba(8, 8, 8, 0.08));
      box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 6px 12px 0px rgba(255, 255, 255, 0.12);
    }
    .btn--donker { background: var(--c-donker-groen); }
    .spoed__bel {
      font-size: 15px;
      line-height: 20px;
      text-align: center;
      width: 100%;
    }

    /* ==========================================================================
       SECTION: STAPPEN (Zo werkt het in 4 stappen)
       ========================================================================== */
    .stappen {
      background: var(--c-licht-groen);
      padding: 40px 0 80px;
    }
    .stappen__inner {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 42px;
      align-items: center;
    }
    .stappen__header {
      display: flex;
      gap: 32px;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%;
    }
    .stappen__intro {
      width: 417px;
      max-width: 100%;
    }
    .stappen__grid {
      display: flex;
      gap: 20px;
      justify-content: center;
      align-items: flex-start;
      width: 100%;
    }
    .stap-card {
      display: flex;
      flex-direction: column;
      gap: 30px;
      width: 305px;
      height: 390px;
      background: var(--c-donker-groen);
      border-radius: 20px;
      padding-bottom: 20px;
      overflow: hidden;
    }
    /* Hover uit Figma (Frame 6078 Variant2): kaart kantelt licht */
    @media (hover: hover) {
      .stap-card { transition: transform .25s ease; }
      .stap-card:hover { transform: rotate(-2.21deg); }
    }
    .stap-card__media {
      position: relative;
      height: 239px;
      width: 100%;
      border-radius: 20px 20px 10px 10px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .stap-card__img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .stap-card__nummer {
      position: absolute;
      top: 12px;
      left: 11px;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--c-koraal);
      border-radius: 16px;
      color: var(--c-wit);
      font-size: 15px;
      line-height: 20px;
      text-align: center;
    }
    .stap-card__body {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: flex-start;
      width: min(263px, calc(100% - 42px));
      margin-inline: auto;
      color: var(--c-wit);
    }
    /* Desktop/H4: NewBlack Bold 23/23 */
    .stap-card__titel {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 23px;
      line-height: 23px;
    }
    .stap-card__lijn {
      width: 54px;
      height: 3px;
      background: var(--c-mid2-groen);
    }

    /* ==========================================================================
       SECTION: PERSOONLIJK VERHAAL (testimonial)
       ========================================================================== */
    .verhaal {
      padding: 80px 0 40px;
    }
    .verhaal__card {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      gap: 40px;
      align-items: flex-start;
      padding: 41px;
      background: #F2EBDF;
      border-radius: 20px;
    }
    .verhaal__img {
      width: 569px;
      height: auto;
      aspect-ratio: 569 / 487;
      flex-shrink: 0;
      border-radius: 10px;
      object-fit: cover;
    }
    .verhaal__content {
      display: flex;
      flex-direction: column;
      gap: 48px;
      width: 588px;
      max-width: 100%;
    }
    .verhaal__tagline {
      font-size: 20px;
      line-height: 27px;
      text-transform: uppercase;
    }
    .verhaal__quote-blok {
      display: flex;
      flex-direction: column;
      gap: 26px;
      align-items: flex-start;
    }
    .verhaal__quote {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
    }
    .verhaal__quote-teken { width: 53px; height: 33px; }
    .verhaal__quote-tekst {
      font-family: var(--font-heading);
      font-weight: 500;
      font-size: 40px;
      line-height: 50px;
      letter-spacing: 0.36px;
    }
    .verhaal__body { color: var(--c-donker-groen); }
    .verhaal__auteur {
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .verhaal__avatar {
      width: 53px;
      height: 53px;
      border-radius: 50%;
      background: var(--c-mid2-groen);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      line-height: 27px;
      text-transform: uppercase;
      opacity: .9;
      flex-shrink: 0;
    }
    .verhaal__avatar span { opacity: .6; }
    .verhaal__naam {
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 18px;
      line-height: 25px;
    }
    .btn--groen {
      background: var(--c-mid2-groen);
      color: var(--c-zwart);
      align-self: flex-start;
      height: 62px;
      padding: 0 45px;
      border-radius: 40.8px;
      filter: drop-shadow(0px 1px 1px rgba(8, 8, 8, 0.2)) drop-shadow(0px 4px 2px rgba(8, 8, 8, 0.08));
      box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 6px 12px 0px rgba(255, 255, 255, 0.12);
    }

    /* ==========================================================================
       SECTION: WAT U BESPAART
       ========================================================================== */
    .besparen {
      padding: 40px 0 128px;
    }
    .besparen__inner {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 89px;
      align-items: center;
    }
    .besparen__header {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
      text-align: center;
      max-width: 950px;
    }
    .besparen__grid {
      display: flex;
      gap: 20px;
      align-items: center;
      width: 100%;
    }
    .bespaar-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
      justify-content: flex-end;
      width: 413px;
      height: 165px;
      padding: 0 24px 24px;
      background: var(--c-donker-groen);
      border-radius: 20px;
      filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.15));
      color: var(--c-wit);
      text-align: center;
    }
    /* Hover: kaart kleurt naar teal-groen */
    @media (hover: hover) {
      .bespaar-card { transition: background-color .35s ease-out; }
      .bespaar-card:hover { background: #64978A; }
    }
    .bespaar-card__icoon {
      position: absolute;
      top: -58px;
      left: 50%;
      transform: translateX(-50%);
      width: 117px;
      height: 117px;
      border-radius: 50%;
      background: var(--c-mid2-groen);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .bespaar-card__icoon img { width: 63px; height: 64px; }
    .bespaar-card__titel {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 23px;
      line-height: 23px;
    }
    .bespaar-card__tekstblok {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
    }
    @media (max-width: 980px) {
      :root { --container-pad: 22px; }
      .bespaar-card__tekstblok { align-items: flex-start; }
    }

    /* ==========================================================================
       SECTION: WAT HET U OPLEVERT (bento-grid)
       ========================================================================== */
    .oplevert {
      background: var(--c-licht-groen);
      padding: 96px 0;
    }
    .oplevert__inner {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 48px;
      align-items: flex-start;
    }
    .oplevert__header {
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 914px;
    }
    .oplevert__grid {
      display: flex;
      gap: 20px;
      align-items: flex-start;
      width: 100%;
    }
    .oplevert__rechts {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      align-content: flex-end;
      align-items: flex-end;
      width: 955px;
    }
    .bento {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: 305px;
      height: 277px;
      padding: 32px;
      border-radius: 10px;
      background: var(--c-licht-grijs);
      filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.25));
      overflow: hidden;
    }
    .bento__body {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
      width: 247px;
      max-width: 100%;
    }
    .bento__titel {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 23px;
      line-height: 23px;
    }
    /* Variant: hoge fotokaart links */
    .bento--hoog {
      height: 573px;
      padding: 32px 24px 35px 23px;
    }
    .bento--hoog .bento__foto {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 73.5%;
      object-fit: cover;
      object-position: 60% top;
    }
    .bento--hoog::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(247, 247, 247, 0) 36%, #F7F7F7 70%);
    }
    .bento--hoog .bento__body { position: relative; z-index: 1; }
    /* Variant: brede fotokaart */
    .bento--breed {
      width: 629px;
      padding: 100px 24px 74px 362px;
      justify-content: center;
    }
    .bento--breed .bento__foto {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 60%;
      object-fit: cover;
    }
    .bento--breed::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(247, 247, 247, 0) 27%, #F7F7F7 54%);
    }
    .bento--breed .bento__body { position: relative; z-index: 1; width: 243px; }
    /* Variant: kleurkaarten met decoratieve cirkel */
    .bento--groen { background: var(--c-mid2-groen); }
    .bento--koraal { background: var(--c-koraal); }
    .bento--groen, .bento--koraal {
      filter: none;
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    }
    .bento__deco {
      position: absolute;
      left: 50px;
      top: 18px;
      width: 358px;
      height: 227px;
      pointer-events: none;
    }
    /* Variant: icoonkaarten */
    .bento__icoon {
      width: 76px;
      height: 76px;
      margin-bottom: 24px;
      border-radius: 38px;
      background: var(--c-mid2-groen);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .bento__icoon img { width: 49px; height: 49px; }

    /* ==========================================================================
       SECTION: WAT KLANTEN ZEGGEN (review-carousel)
       ========================================================================== */
    .reviews {
      background: var(--c-licht-groen-2);
      padding: 96px 0;
      overflow: hidden;
    }
    .reviews__inner {
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      max-width: 1280px;
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
    .reviews__header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
    }
    .reviews__intro-blok {
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 522px;
    }
    .reviews__nav {
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .reviews__nav-btn {
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: 21px;
      background: var(--c-mid2-groen);
      filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.25));
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .reviews__nav-btn img { width: 24px; height: 13px; }
    .reviews__nav-btn--vorige img { transform: rotate(-90deg); }
    .reviews__nav-btn--volgende img { transform: rotate(90deg); }
    .reviews__track {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      margin-left: calc(-1 * (100vw - min(1280px, 100vw - 2 * var(--container-pad))) / 2);
      padding-left: calc((100vw - min(1280px, 100vw - 2 * var(--container-pad))) / 2);
      scroll-padding-left: calc((100vw - min(1280px, 100vw - 2 * var(--container-pad))) / 2);
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      margin-right: calc(-1 * (100vw - min(1280px, 100vw - 2 * var(--container-pad))) / 2);
      padding-right: 40px;
    }
    .reviews__track::-webkit-scrollbar { display: none; }
    .review-card {
      position: relative;
      width: 351px;
      height: 319px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url('../img/review-bubble.svg') no-repeat center / 100% 100%;
      scroll-snap-align: start;
    }
    .review-card__content {
      display: flex;
      flex-direction: column;
      gap: 21px;
      align-items: flex-start;
      width: 265px;
    }
    .review-card__sterren { width: 152px; height: 28px; }
    /* Desktop/H3: NewBlack Bold 28/30 */
    .review-card__quote {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 28px;
      line-height: 30px;
    }
    .review-card__auteur {
      font-size: 20px;
      line-height: 20px;
      letter-spacing: 0.5px;
    }

    /* ==========================================================================
       SECTION: VERGELIJKING (Makelaar of wijkopenuwvastgoed.nl?)
       ========================================================================== */
    .vergelijk {
      background: var(--c-licht-groen);
      padding: 96px 0;
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: center;
    }
    .vergelijk__header {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
      text-align: center;
      max-width: 706px;
      padding-inline: var(--container-pad);
    }
    .vergelijk__tabel {
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      min-height: 481px;
      background: var(--c-licht-grijs-2);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .vergelijk__tabel-inner {
      display: flex;
      gap: clamp(32px, 4vw, 139px);
      align-items: center;
      max-width: 100%;
    }
    .vergelijk__labels {
      display: flex;
      flex-direction: column;
      gap: 46px;
      align-items: flex-start;
      padding-top: 90px;
      width: 263px;
      flex-shrink: 0;
    }
    .vergelijk__label {
      display: flex;
      gap: 27px;
      align-items: center;
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 18px;
      line-height: 25px;
      white-space: nowrap;
    }
    .vergelijk__label img { width: 23px; height: 24px; flex-shrink: 0; }
    .vergelijk__kolommen {
      display: flex;
      gap: 34px;
      align-items: center;
      flex: 1 1 auto;
      min-width: 0;
      justify-content: center;
    }
    .vergelijk__kolom {
      flex: 0 1 386px;
      min-width: 280px;
      width: auto;
      height: 445px;
      border-radius: 10px;
      background: var(--c-licht-grijs-2);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .vergelijk__kolom--wkuv { background: var(--c-mid2-groen); color: var(--c-zwart); }
    .vergelijk__kolom-kop {
      display: flex;
      flex-direction: column;
      gap: 35px;
      align-items: center;
      width: 247px;
    }
    .vergelijk__logo-pill {
      width: 194px;
      height: 56px;
      background: var(--c-wit);
      border-radius: 55px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .vergelijk__logo-pill img { width: 131px; height: 29px; }
    .vergelijk__kolom-titel {
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 18px;
      line-height: 25px;
      padding-top: 24px;
    }
    .vergelijk__waarden {
      display: flex;
      flex-direction: column;
      gap: 47px;
      width: 100%;
    }
    .vergelijk__cta {
      display: flex;
      gap: 24px;
      align-items: center;
    }
    .btn--groot {
      height: 62px;
      padding: 0 31px;
      border-radius: 40.8px;
      gap: 16px;
      filter: drop-shadow(0px 1px 1px rgba(8, 8, 8, 0.2)) drop-shadow(0px 4px 2px rgba(8, 8, 8, 0.08));
      box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 6px 12px 0px rgba(255, 255, 255, 0.12);
    }
    .btn--groen-donkertekst {
      background: var(--c-mid2-groen);
      color: var(--c-zwart);
    }

    /* ==========================================================================
       SECTION: VOOR WIE IS DIT?
       ========================================================================== */
    .voorwie {
      padding: 96px 0;
    }
    .voorwie__inner {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
    .voorwie__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 40px;
    }
    .voorwie__intro { width: 611px; max-width: 100%; }
    .voorwie__grid {
      display: flex;
      gap: 20px;
      align-items: center;
      flex-wrap: wrap;
    }
    .situatie-card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1 1 240px;
      width: auto;
      height: 161px;
      padding-left: 24px;
      background: var(--c-licht-groen);
      border-radius: 20px;
    }
    .situatie-card__content {
      display: flex;
      flex-direction: column;
      gap: 15px;
      align-items: flex-start;
      width: 263px;
      max-width: 100%;
    }
    .situatie-card__titel {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 23px;
      line-height: 23px;
      white-space: nowrap;
    }
    .situatie-card__lijn {
      width: 54px;
      height: 3px;
      background: var(--c-mid2-groen);
    }

    /* ==========================================================================
       SECTION: EIND-CTA (gradient)
       ========================================================================== */
    .eindcta {
      position: relative;
      min-height: 280px;
      background: linear-gradient(to right, #C6E2D1, #7BC297);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 0;
    }
    .eindcta__content {
      display: flex;
      flex-direction: column;
      gap: 24px;
      align-items: center;
      max-width: 695px;
      text-align: center;
      color: var(--c-wit);
    }
    .eindcta__tekst {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .eindcta__buttons {
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .btn--koraal-donkertekst { color: var(--c-wit); } /* QA: oranje knoppen altijd witte tekst */
    .eindcta__persoon {
      position: absolute;
      left: 209px;
      top: -58px;
      width: 239px;
      height: 338px;
      object-fit: cover;
      pointer-events: none;
    }

    /* ==========================================================================
       FOOTER
       ========================================================================== */
    .footer {
      background: var(--c-donker-groen);
      min-height: 352px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding: 54px 0 24px;
      color: var(--c-wit);
    }
    .footer__inner {
      width: min(1296px, calc(100vw - 2 * var(--container-pad)));
      display: flex;
      flex-direction: column;
      gap: 37px;
    }
    .footer__top {
      display: flex;
      gap: 40px;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: nowrap;
      width: 100%;
    }
    .footer__kolommen { padding-top: 0; }
    .footer__kolom-titel { margin-top: -3px; } /* cap-hoogte optisch gelijk aan de logo-bovenkant */
    .footer__merk {
      display: flex;
      flex-direction: column;
      gap: 46px;
      align-items: flex-start;
      width: 424px;
      max-width: 424px;
      min-width: 0;
      flex-shrink: 1;
    }
    .footer__logo { width: 287px; height: 54px; }
    .footer__kolommen {
      display: flex;
      gap: 32px 48px;
      align-items: flex-start;
      flex-wrap: wrap;
      min-width: 0;
    }
    .footer__kolom {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 182px;
    }
    .footer__kolom-titel {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 23px;
      line-height: 23px;
    }
    .footer__links {
      display: flex;
      flex-direction: column;
      gap: 8px;
      white-space: nowrap;
    }
    .footer__divider {
      width: 100%;
      height: 1px;
      background: var(--c-mid2-groen);
      border: 0;
    }
    .footer__onder {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 15px;
      line-height: 20px;
    }

    /* ==========================================================================
       GRAVITY FORMS-READY — zelfde look als de statische velden, zodat een
       gravity_form()-embed er t.z.t. identiek uitziet. Labels gaan visueel
       schuil (placeholder-patroon), maar blijven voor screenreaders.
       ========================================================================== */
    .gform_wrapper form, .gform_wrapper .gform_fields {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .gform_wrapper .gfield { width: 100%; }
    .gform_wrapper .gform_heading, .gform_wrapper .gfield_label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .gform_wrapper .gfield_label.gfield_label--zichtbaar {
      position: static;
      width: auto;
      height: auto;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
    .gform_wrapper input[type="text"],
    .gform_wrapper input[type="tel"],
    .gform_wrapper input[type="email"],
    .gform_wrapper input[type="number"],
    .gform_wrapper select,
    .gform_wrapper textarea {
      display: block;
      height: 50px;
      padding-left: 16px;
      width: 100%;
      background: var(--c-wit);
      border: 1px solid var(--c-beige);
      border-radius: 8px;
      font: inherit;
      font-size: 17px;
      line-height: 23px;
      color: var(--c-zwart);
    }
    .gform_wrapper textarea { height: auto; min-height: 120px; padding: 13px 16px; }
    .gform_wrapper ::placeholder { color: var(--c-zwart); opacity: 1; }
    /* Radio/checkbox — zelfde custom stijl als .keuze */
    .gform_wrapper .gfield_radio, .gform_wrapper .gfield_checkbox {
      display: flex;
      flex-wrap: wrap;
      gap: 14px 40px;
    }
    .gform_wrapper .gchoice {
      display: flex;
      align-items: flex-start;
      gap: 16.8px;
      font-size: 17px;
      line-height: 23px;
    }
    .gform_wrapper .gchoice input[type="radio"],
    .gform_wrapper .gchoice input[type="checkbox"] {
      appearance: none;
      width: 24px;
      height: 24px;
      margin: 0;
      flex-shrink: 0;
      background: var(--c-licht-grijs-2);
      border: 1.2px solid var(--c-beige);
      border-radius: 50%;
      cursor: pointer;
    }
    .gform_wrapper .gchoice input[type="checkbox"] { border-radius: 5px; }
    .gform_wrapper .gchoice input:checked {
      background: var(--c-koraal);
      border-color: var(--c-koraal);
    }
    /* Submit-knop — zelfde look als .btn */
    .gform_wrapper input[type="submit"],
    .gform_wrapper .gform_button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 62px;
      padding: 0 37px;
      border: 0;
      border-radius: 40.8px;
      background: var(--c-koraal);
      color: var(--c-wit);
      font: inherit;
      font-size: 20px;
      line-height: 20px;
      letter-spacing: 0.5px;
      white-space: nowrap;
      cursor: pointer;
      filter: drop-shadow(0px 1px 1px rgba(8, 8, 8, 0.2)) drop-shadow(0px 4px 2px rgba(8, 8, 8, 0.08));
      box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 6px 12px 0px rgba(255, 255, 255, 0.12);
    }
    /* Validatie in huisstijl */
    .gform_wrapper .gfield_error input, .gform_wrapper .gfield_error textarea { border-color: var(--c-koraal); }
    .gform_wrapper .gfield_validation_message, .gform_wrapper .gform_validation_errors {
      color: var(--c-koraal);
      font-size: 15px;
      line-height: 20px;
    }

    /* ==========================================================================
       RESPONSIVE
       ========================================================================== */
    @media (max-width: 1400px) {
      .hero__inner { max-width: 100%; padding-inline: var(--container-pad); }
      .hero__card { flex-wrap: wrap; justify-content: center; gap: 0; }
      .hero__card-media { width: 100%; max-width: 631px; border-radius: 10px 10px 0 0; }
      .hero__form-card { border-radius: 0 0 20px 20px; padding: 26px; }
      .hero__persoon { display: none; }
    }
    @media (max-width: 1400px) {
      /* Hero: gestapeld — foto boven, formulier eronder, even breed */
      .hero { min-height: 0; padding-bottom: 72px; }
      .hero__inner { padding-top: 190px; }
      .hero__title { font-size: 52px; line-height: 56px; }
      .hero__card { flex-direction: column; align-items: stretch; margin-top: 56px; }
      .hero__card-media {
        width: 100%;
        max-width: none; /* override van de oudere 1400-regel (max 631px) */
        min-height: 0;
        height: 400px;
        border-radius: 20px 20px 0 0;
      }
      .hero__card-img {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        object-fit: cover;
        object-position: center 55%;
      }
      .hero__persoon { display: none; }
      .hero__form-card {
        width: 100%;
        min-height: 0;
        padding: 40px;
        border-radius: 0 0 20px 20px;
        align-items: center;
      }
      .hero__form { width: min(531px, 100%); }
      .hero__form-fields { width: 100%; }
      .btn--form { width: 100%; }
      .hero__usps { flex-wrap: wrap; gap: 12px 24px; justify-content: center; width: 100%; }
      .hero__reviewbar { margin-top: 36px; }

      /* Spoed: pill compacter */
      .spoed__pill { padding: 40px 60px 44px 300px; }

      /* Stappen: 2×2 in plaats van krimpende kaarten */
      .stappen__grid { display: grid; grid-template-columns: repeat(2, 305px); justify-content: center; }
      .stappen__grid .stap-card { width: 305px; }

      /* Persoonlijk verhaal: 50/50 */
      .verhaal__img { width: calc(50% - 20px); height: auto; aspect-ratio: 569 / 487; min-width: 0; }
      .verhaal__content { width: calc(50% - 20px); min-width: 0; }

      /* Wat u bespaart: content onder het icoon i.p.v. eroverheen */
      .besparen__grid { align-items: stretch; }
      .bespaar-card { min-height: 0; padding: 76px 20px 24px; justify-content: flex-start; }

      /* Wat het u oplevert: hoge kaart bovenop, daarna 2-koloms */
      .oplevert__grid { flex-direction: column; align-items: stretch; }
      .oplevert__grid .bento--hoog { width: 100%; height: 380px; }
      .oplevert__grid .bento--hoog .bento__foto { object-position: center 62%; }
      .oplevert__rechts { width: 100%; align-content: flex-start; align-items: stretch; }
      .oplevert__rechts .bento { flex: 1 1 calc(50% - 10px); width: auto; }
      .oplevert__rechts .bento--breed { flex: 1 1 100%; padding: 60px 32px 60px 52%; }
      .bento--breed .bento__foto { width: 45%; }
      .bento--breed::after { background: linear-gradient(to right, rgba(247, 247, 247, 0) 32%, #F7F7F7 50%); }

      /* Voor wie: 2 om 2 */
      .voorwie__grid .situatie-card { flex: 1 1 calc(50% - 10px); }

      /* Eind-CTA: persoon valt anders door de tekst */
      .eindcta__persoon { display: none; }

      /* Footer: merk en kolommen naast elkaar, merk krimpt mee */
      .footer { padding: 54px 0 24px; min-height: 0; }
      .footer__top { flex-direction: row; gap: 40px; align-items: flex-start; flex-wrap: nowrap; }
      .footer__merk { width: auto; max-width: 320px; min-width: 0; flex-shrink: 1; gap: 24px; }
      .footer__kolommen { flex: 1; min-width: 0; justify-content: space-between; gap: 24px; }
    }

    @media (max-width: 1200px) {
      .navbar__menu { display: none; }
      .navbar__inner { gap: 30px; }
      /* Menu-links zijn hier verborgen: toon de hamburger + mobiel menu al */
      .navbar__hamburger { display: flex; }
      .navbar__mobielmenu { display: flex; }
      .hero__title { font-size: 52px; line-height: 52px; }
      .hero__inner { padding-top: 190px; }
    }
    @media (max-width: 1400px) {
      .spoed { padding-inline: var(--container-pad); }
      .spoed__pill { padding: 40px 60px 44px 300px; }
      .spoed__content { gap: 60px; }
    }
    @media (max-width: 1200px) {
      .stappen__header { flex-direction: column; align-items: flex-start; gap: 16px; padding-inline: var(--container-pad); }
      .stappen__grid { flex-wrap: wrap; }
      .oplevert__grid { flex-wrap: wrap; }
      .oplevert__rechts { width: 100%; }
      .bento--breed { width: 100%; }
      .vergelijk__labels { padding-top: 0; }
      .voorwie__header { flex-direction: column; align-items: flex-start; gap: 16px; }
      .voorwie__grid { flex-wrap: wrap; }
      .eindcta__persoon { display: none; }
    }
    /* == MOBIEL — 1:1 naar Figma "Home design" mobiel (629:6003, 402px artboard) == */
    @media (max-width: 980px) {
      body { font-size: 13.5px; line-height: 21px; }

      /* Navbar: pill met logo + hamburger */
      .navbar { top: 16px; height: 81px; width: calc(100vw - 17px); }
      .navbar__inner { width: 100%; padding-inline: 28px; justify-content: space-between; gap: 0; }
      .navbar__inner nav, .navbar__phone, .navbar__actions .btn { display: none; }
      .navbar__actions { gap: 0; }
      .navbar__logo { width: 167px; height: auto; }
      .navbar__hamburger { display: flex; }
      .navbar__mobielmenu { display: flex; }

      /* Hero: linkslijnend, geen fotokaart, formulier direct onder intro */
      .hero { min-height: 0; padding-bottom: 0; }
      .hero__inner { width: 100%; max-width: none; padding: 148px var(--container-pad) 0; }
      .hero__intro {
        max-width: 346px;
        margin: 0;
        text-align: left;
        align-items: flex-start;
        gap: 0;
      }
      .hero__tagline { font-size: 10.5px; line-height: normal; letter-spacing: 1.365px; }
      .hero__title { font-size: 32.3px; line-height: 34.83px; letter-spacing: 0.3px; margin-top: 34px; }
      .hero__title-accent::after { bottom: 6px; height: 5px; }
      .hero__subtitle { font-size: 13.5px; line-height: 20.93px; margin-top: 22px; }
      .hero__card { margin-top: 42px; }
      .hero__card-media, .hero__persoon { display: none; }
      .hero__form-card {
        position: static;
        width: 100%;
        border-radius: 16px;
        padding: 33px 18px 20px;
      }
      .hero__form { width: 100%; gap: 11px; align-items: center; }
      .hero__form-fields { width: 100%; gap: 11px; }
      .hero__form-title { font-size: 11.3px; line-height: normal; letter-spacing: 1.125px; font-weight: 500; }
      .form__row { flex-direction: column; gap: 16px; align-items: stretch; }
      .form__input { font-size: 13.5px; }
      .form__input--half { width: 100%; flex: none; min-width: 0; }
      /* Buttons: mobiele maat uit design */
      .btn {
        height: 52px;
        padding: 0 26px;
        border-radius: 100px;
        font-weight: 500;
        font-size: 14px;
        line-height: normal;
        letter-spacing: 0.4px;
      }
      .btn--form {
        width: 100%;
        height: 52px;
        border-radius: 100px;
        gap: 8px;
        filter: none;
        box-shadow: 0px 2px 6px 0px rgba(8, 8, 8, 0.2), inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 6px 12px 0px rgba(255, 255, 255, 0.12);
      }
      .hero__usps { flex-wrap: wrap; justify-content: center; gap: 3px 23px; font-size: 12px; }
      .usp__icon { width: 16.5px; height: 16.5px; }
      /* Reviewbar: full-width strip i.p.v. pill */
      .hero__reviewbar {
        align-self: stretch;
        margin: 45px calc(-1 * var(--container-pad)) 0;
        border-radius: 0;
        justify-content: center;
        height: auto;
        min-height: 45px;
        padding: 8px 20px;
      }
      .hero__reviewbar-inner { font-size: 12px; line-height: 19.6px; gap: 4px 11px; flex-wrap: wrap; justify-content: center; }
      .hero__reviewbar-inner > *, .reviewbar__score { flex-shrink: 0; }
      .hero__reviewbar-inner .reviewbar__score { gap: 14px; }
      .reviewbar__sterren { width: 70px; height: 12.4px; }

      /* Typografie-schaal secties */
      .h2 { font-size: 25.5px; line-height: 31px; }

      /* Spoed: compacte kaart */
      .spoed { padding: 30px 22px; }
      .spoed__pill {
        min-height: 0;
        padding: 22px 22px 22px 95px;
        border-radius: 30px;
        gap: 8px;
      }
      .spoed__persoon { display: block; left: 8px; top: auto; bottom: 0; width: 80px; height: 129px; }
      .spoed__content { gap: 24px; flex-wrap: wrap; }
      .spoed__tagline { font-size: 10px; line-height: normal; }
      .spoed__tekst { gap: 6px; width: 100%; }
      .spoed__tekst .h2 { font-size: 20px; line-height: 25px; max-width: 184px; }
      .spoed__tekst p:not(.spoed__tagline) { font-size: 12px; line-height: 18px; }
      .spoed__actie { padding-top: 0; width: 100%; align-items: flex-start; }
      .btn--zwart { width: auto; height: 42px; padding: 0 20px; font-size: 13.5px; }
      .spoed__bel { font-size: 12px; text-align: left; }

      /* Stappen: horizontale scroll-kaarten 252px */
      .stappen { padding: 40px 0; }
      .stappen__inner { gap: 22px; }
      .stappen__header { gap: 8px; padding-inline: 22px; width: 100%; }
      .stappen__intro { font-size: 12.8px; line-height: 19px; width: auto; }
      .stappen__grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: clip;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        /* full-bleed naar beide schermranden, kaart 1 op de containerlijn */
        width: auto;
        margin-inline: calc(-1 * var(--container-pad));
        padding-inline: var(--container-pad);
        scroll-padding-left: var(--container-pad);
        align-self: stretch;
      }
      .stappen__grid::-webkit-scrollbar { display: none; }
      .stap-card {
        width: 252px;
        min-height: 268px;
        height: auto;
        flex-shrink: 0;
        border-radius: 16px;
        scroll-snap-align: start;
      }
      .stap-card__media { height: 169px; border-radius: 16px; }
      .stap-card__body { width: auto; margin: 0; padding: 0 22px 6px; gap: 7px; }
      .stap-card__titel { font-size: 15px; line-height: 19px; }
      .stap-card__body p { font-size: 11.7px; line-height: 17px; }

      /* Persoonlijk verhaal: gestapelde kaart (volgorde: tekst → foto → auteur → knop) */
      .verhaal { padding: 40px 22px 50px; }
      .verhaal__card { flex-direction: column; padding: 26px 20px; border-radius: 16px; gap: 9px; }
      .verhaal__content, .verhaal__quote-blok, .verhaal__quote { display: contents; }
      .verhaal__tagline { order: 1; }
      .verhaal__quote-teken { order: 2; }
      .verhaal__quote-tekst { order: 3; }
      .verhaal__body { order: 4; }
      .verhaal__img { order: 5; width: 100%; height: auto; aspect-ratio: 2 / 1; }
      .verhaal__auteur { order: 6; }
      .verhaal__card .btn--groen { order: 7; }
      .verhaal__tagline { font-size: 10.5px; line-height: normal; letter-spacing: 1.365px; }
      .verhaal__quote-blok { gap: 12px; }
      .verhaal__quote { gap: 9px; }
      .verhaal__quote-teken { width: 26px; height: 16px; }
      .verhaal__quote-tekst { font-size: 19.5px; line-height: 24px; }
      .verhaal__body { font-size: 12.3px; line-height: 18px; }
      .verhaal__avatar { width: 42px; height: 42px; font-size: 12.3px; }
      .verhaal__naam { font-size: 12.8px; line-height: 17px; }
      .verhaal__auteur p:not(.verhaal__naam) { font-size: 11.4px; line-height: 16px; }
      .btn--groen {
        height: 52px;
        padding: 0 26px;
        color: var(--c-zwart);
        filter: none;
        box-shadow: 0px 2px 6px 0px rgba(8, 8, 8, 0.1), inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 6px 12px 0px rgba(255, 255, 255, 0.12);
      }

      /* Wat u bespaart: verticale rijen met uitstekende icoon-cirkel links */
      .besparen { padding: 0 22px 50px; }
      .besparen__inner { gap: 7px; align-items: flex-start; }
      .besparen__header { align-items: flex-start; text-align: left; gap: 7px; }
      .besparen__header p { font-size: 12.8px; line-height: 19px; }
      .besparen__grid {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
        padding-left: 20px;
        margin-top: 14px;
      }
      .bespaar-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: auto;
        height: auto;
        min-height: 78px;
        padding: 10px 16px 10px 42px;
        border-radius: 10px;
        text-align: left;
        gap: 3px;
      }
      .bespaar-card > div:not(.bespaar-card__icoon) { display: flex; flex-direction: column; gap: 3px; }
      .bespaar-card__icoon {
        top: 50%;
        left: -21px;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
      }
      .bespaar-card__icoon img { width: 27px; height: 27px; }
      .bespaar-card__titel { font-size: 13.8px; line-height: 18px; }
      .bespaar-card p { font-size: 12px; line-height: 17px; }
      .bespaar-card__tekstblok { display: flex; flex-direction: column; gap: 3px; }

      /* Bento: 2-koloms grid */
      .oplevert { padding: 50px 22px; }
      .oplevert__inner { gap: 8px; }
      .oplevert__header { gap: 7px; }
      .oplevert__header p { font-size: 12.8px; line-height: 19px; }
      .oplevert__grid { flex-direction: column; gap: 10px; margin-top: 16px; }
      .oplevert__rechts { width: 100%; gap: 10px; }
      .bento {
        width: calc(50% - 5px);
        height: auto;
        min-height: 180px;
        padding: 20px 16px;
        border-radius: 12px;
        filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.1));
      }
      .bento__body { width: 100%; gap: 5px; }
      .bento__titel { font-size: 13.8px; line-height: 18px; }
      .bento__body p { font-size: 12px; line-height: 17px; }
      /* Fotokaarten: foto met eigen radius boven, tekst eronder (mobiel ontwerp) */
      .bento--hoog { width: 100%; height: auto; padding: 12px 12px 20px; justify-content: flex-start; }
      .bento--hoog .bento__foto { position: static; width: 100%; height: 240px; border-radius: 12px; display: block; }
      .bento--hoog::after { display: none; }
      .bento--hoog .bento__body { padding-top: 14px; }
      /* Volgorde: [groen | icoon] [icoon | koraal] [brede fotokaart] */
      .oplevert__rechts .bento { order: 2; }
      .oplevert__rechts .bento--groen { order: 1; }
      .oplevert__rechts .bento--koraal { order: 3; }
      /* Specifieker dan de tablet-regel (padding-left 52%): foto boven, tekst eronder */
      .oplevert__rechts .bento--breed { width: 100%; min-height: 0; padding: 12px 12px 20px; justify-content: flex-start; order: 4; }
      .bento--breed .bento__foto { position: static; width: 100%; height: 180px; border-radius: 12px; display: block; }
      .bento--breed::after { display: none; }
      .bento--breed .bento__body { padding-top: 14px; }
      .bento--breed .bento__body { width: 100%; }
      .bento__icoon { width: 46px; height: 46px; border-radius: 23px; margin-bottom: 14px; }
      .bento__icoon img { width: 28px; height: 28px; }
      .bento__deco { width: 300px; height: 190px; left: 40px; top: 14px; }

      /* Reviews: witte kaarten 272×151, horizontale scroll */
      .reviews { padding: 50px 0; }
      .reviews__inner { gap: 20px; }
      .reviews__header { padding-inline: 22px; align-items: flex-end; }
      .reviews__intro-blok { gap: 6px; max-width: 259px; }
      .reviews__intro-blok p { font-size: 12.8px; line-height: 19px; }
      .reviews__nav { gap: 8.6px; }
      .reviews__nav-btn { width: 30px; height: 30px; border-radius: 15px; }
      .reviews__nav-btn img { width: 17px; height: 9px; }
      .reviews__track { padding-inline: 22px; margin-inline: -22px; scroll-padding-left: 22px; }
      .review-card {
        width: 272px;
        height: 151px;
        background: var(--c-wit);
        border-radius: 12px;
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
        padding: 22px 18px;
        align-items: flex-start;
        justify-content: flex-start;
      }
      .review-card__content { width: 100%; gap: 10px; }
      .review-card__sterren { width: 106px; height: 19.6px; }
      .review-card__quote { font-size: 15px; line-height: 18px; }
      .review-card__auteur { font-size: 12px; line-height: 16px; letter-spacing: 0.3px; }

      /* Vergelijking: compacte 3-koloms tabel */
      .vergelijk { padding: 50px 22px; gap: 8px; align-items: stretch; }
      .vergelijk__header { max-width: none; padding-inline: 0; align-items: flex-start; text-align: left; gap: 7px; }
      .vergelijk__header p { font-size: 12.8px; line-height: 19px; }
      .vergelijk__tabel {
        min-height: 0;
        border-radius: 14px;
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
        background: var(--c-licht-grijs-2);
        display: block;
        overflow: hidden;
        margin-top: 16px;
        padding: 0;
      }
      .vergelijk__tabel-inner { display: block; }
      .vergelijk__labels, .vergelijk__kolommen { display: none; }
      .vergelijk__mobiel { display: table; width: 100%; border-collapse: collapse; }
      .vergelijk__mobiel td, .vergelijk__mobiel th {
        padding: 13px 10px;
        font-size: 11.5px;
        line-height: 15px;
        vertical-align: middle;
      }
      .vergelijk__mobiel th:first-child, .vergelijk__mobiel td:first-child {
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 12px;
        text-align: left;
        width: 44%;
      }
      .vergelijk__mobiel td:nth-child(2) { background: rgba(151, 210, 176, 0.14); text-align: center; width: 29%; }
      .vergelijk__mobiel td:nth-child(3) { text-align: center; width: 27%; }
      .vergelijk__mobiel thead td:nth-child(2) { background: #EDF5F1; padding: 13.5px 10px; }
      .vergelijk__mobiel thead td:nth-child(3) { background: var(--c-licht-grijs); }
      .vergelijk__mobiel thead img { width: 85px; height: 19px; margin-inline: auto; }
      .vergelijk__cta { flex-direction: column; gap: 10px; padding: 14px 0 0; align-items: stretch; }
      .vergelijk__cta .btn { justify-content: center; }

      /* Voor wie: 2×2 grid */
      .voorwie { padding: 50px 22px; }
      .voorwie__inner { gap: 24px; }
      .voorwie__header { gap: 7px; }
      .voorwie__intro { font-size: 12.8px; line-height: 19px; }
      .voorwie__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      .situatie-card {
        width: auto;
        height: auto;
        min-height: 0;
        padding: 20px 16px;
        border-radius: 12px;
        justify-content: flex-start;
      }
      .situatie-card__content { width: 100%; gap: 5px; }
      .situatie-card__titel { font-size: 13.8px; line-height: 18px; white-space: normal; }
      .situatie-card__lijn { width: 40px; }
      .situatie-card p { font-size: 12px; line-height: 17px; }

      /* Eind-CTA */
      .eindcta { padding: 52px 22px 0; min-height: 0; position: relative; overflow: hidden; }
      .eindcta__persoon {
        display: block;
        position: absolute;
        right: 8px;
        bottom: 0;
        top: auto;
        left: auto;
        width: min(38vw, 170px);
        height: auto;
      }
      .eindcta__content {
        align-items: flex-start;
        text-align: left;
        max-width: none;
        width: 100%;
        padding-bottom: 40px;
      }
      .eindcta__tekst { text-align: left; padding-right: 90px; }
      .eindcta__tekst p { font-size: 12.8px; line-height: 19px; }
      .eindcta__buttons { flex-direction: column; gap: 10px; width: 220px; max-width: calc(100% - 175px); padding-top: 16px; align-items: stretch; }
      .eindcta__buttons .btn { width: 100%; justify-content: center; }

      /* Footer: gestapeld */
      .footer { padding: 44px 22px 28px; min-height: 0; }
      .footer__inner { width: 100%; gap: 24px; }
      .footer__top { flex-direction: column; gap: 24px; align-items: flex-start; }
      .footer__merk { width: 100%; gap: 20px; }
      .footer__logo { width: 200px; height: auto; }
      .footer__merk p { font-size: 12.3px; line-height: 18px; }
      .footer__kolommen { flex-wrap: wrap; gap: 24px; width: 100%; }
      .footer__kolom { min-width: calc(50% - 12px); gap: 10px; }
      .footer__kolom-titel { font-size: 15px; line-height: 19px; }
      .footer__links { font-size: 12.3px; line-height: 18px; gap: 1px; }
      .footer__onder { flex-direction: column; gap: 8px; align-items: flex-start; font-size: 10.8px; line-height: 15px; }

      /* Floating WhatsApp-knop */
      .whatsapp-float-mobiel { display: flex; }
    }
  

/* ============================================================
   AANVRAAGFLOW (stap 1–3)
   ============================================================ */

    /* ==========================================================================
       SECTION: AANVRAAG (multi-step formulier) — stap 1
       ========================================================================== */
    .aanvraag {
      background: var(--c-licht-groen);
      padding: 200px 0 80px;
      display: flex;
      flex-direction: column;
      gap: 42px;
      align-items: center;
    }
    /* Voortgangsindicator: 3 stippen op stippellijn */
    .voortgang {
      position: relative;
      width: min(1296px, calc(100vw - 2 * var(--container-pad)));
      height: 24px;
    }
    .voortgang__lijn {
      position: absolute;
      left: 12px;
      right: 12px;
      top: 13px;
      border-top: 1.2px dashed var(--c-donker-groen);
    }
    .voortgang__stip {
      position: absolute;
      top: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--c-licht-groen);
      border: 1.2px dashed var(--c-donker-groen);
    }
    .voortgang__stip--1 { left: 0; }
    .voortgang__stip--2 { left: 50%; transform: translateX(-50%); }
    .voortgang__stip--3 { right: 0; }
    .voortgang__stip--actief {
      background: var(--c-koraal);
      border: 0;
    }
    .aanvraag__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
    }
    .aanvraag__intro { width: 710px; max-width: 100%; }
    .aanvraag__formulier {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: flex-start;
    }
    .aanvraag__rij {
      display: flex;
      gap: 20px;
      align-items: flex-start;
    }
    .form-card {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 630px;
      padding: 26px;
      background: var(--c-wit);
      border-radius: 20px;
      filter: drop-shadow(0px 14px 12px rgba(0, 0, 0, 0.1));
    }
    .form-card--breed {
      width: 1280px;
      max-width: 100%;
      gap: 40px;
      align-items: center;
      justify-content: center;
    }
    /* Desktop/H5: NewBlack SemiBold 18/25 */
    .form-card__titel {
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 18px;
      line-height: 25px;
      transform: rotate(-0.4deg);
      width: 100%;
    }
    .form-card__velden {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
    }
    .form__input--klein { width: 84px; flex: 0 0 84px; }
    .keuze-groep {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
    }
    .keuze-groep__titel {
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 18px;
      line-height: 25px;
      text-align: center;
    }
    .keuze-groep__opties {
      display: flex;
      gap: 40px;
      align-items: flex-start;
    }
    /* Custom radio/checkbox volgens Figma (24px, #FBFBFB, border #CCC7BD) */
    .keuze {
      display: inline-flex;
      align-items: flex-start;
      gap: 16.8px;
      cursor: pointer;
      font-size: 17px;
      line-height: 23px;
      color: #000;
    }
    .keuze input {
      appearance: none;
      width: 24px;
      height: 24px;
      margin: 0;
      flex-shrink: 0;
      background: var(--c-licht-grijs-2);
      border: 1.2px solid var(--c-beige);
      border-radius: 50%;
      cursor: pointer;
    }
    .keuze input[type="checkbox"] { border-radius: 5px; }
    .keuze input:checked {
      background: var(--c-koraal);
      border-color: var(--c-koraal);
    }
    .form-card__divider {
      width: 568px;
      max-width: 100%;
      height: 3px;
      background: var(--c-mid2-groen);
      border: 0;
    }
    .aanvraag__acties {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
    }

    /* Stap 2: voltooid segment + extra kaarten */
    .voortgang__lijn--voltooid {
      position: absolute;
      left: 12px;
      right: 50%;
      top: 13px;
      border-top: 1.2px solid var(--c-koraal);
    }
    /* Bedankt-pill (zelfde vorm als spoed-pill home) */
    .bedankt-pill {
      position: relative;
      width: min(1540px, calc(100vw - 2 * var(--container-pad)));
      padding: 40px 130px 44px 338px;
      background: var(--c-wit);
      border-radius: 1000px;
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .bedankt-pill__persoon {
      position: absolute;
      left: 131px;
      top: -24px;
      width: 154px;
      height: 249px;
      object-fit: cover;
      object-position: top;
      pointer-events: none;
    }
    .aanvraag__titel-rij {
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
    }
    .keuze-groep__opties--kolom {
      flex-direction: column;
      gap: 30px;
      align-items: flex-start;
    }
    .form-card--rij { flex: 1 1 0; width: auto; min-width: 0; }
    .aanvraag__rij--vullend { width: 100%; }
    /* Foto-upload kaart */
    .fotos-card {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }
    .fotos-card__links {
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: flex-start;
    }
    .fotos-card__intro {
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-width: 393px;
    }
    .fotos-card__thumbs {
      display: flex;
      gap: 20px;
    }
    .foto-thumb__leeg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: .8;
    }
    .foto-thumb {
      position: relative;
      width: 135.6px;
      height: 130.8px;
      background: #D9D9D9;
      border: 1.2px solid var(--c-beige);
      border-radius: 12px;
    }
    .foto-thumb__verwijder {
      position: absolute;
      top: -8.5px;
      right: -7px;
      width: 25px;
      height: 25px;
      border: 0;
      border-radius: 12.5px;
      background: var(--c-koraal);
      filter: drop-shadow(0px 2.4px 1.2px rgba(0, 0, 0, 0.25));
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .foto-thumb__verwijder img { width: 12px; height: 11px; }
    .fotos-card__dropzone {
      width: 703px;
      height: 293px;
      border: 1.2px dashed var(--c-beige);
      border-radius: 12px;
      flex-shrink: 0;
    }

    /* Stap 3: alles voltooid */
    .voortgang__lijn--voltooid {
      position: absolute;
      left: 12px;
      right: 12px;
      top: 13px;
      border-top: 1.2px solid var(--c-koraal);
    }
    .voortgang__stip--check {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .voortgang__stip--check img { width: 12px; height: 9px; }

    @media (max-width: 1400px) {
      .aanvraag__rij { flex-direction: column; }
      .form-card { width: min(630px, calc(100vw - 2 * var(--container-pad))); }
    }
    @media (max-width: 1024px) {
      .aanvraag { padding-top: 160px; }
      .aanvraag__header { flex-direction: column; align-items: flex-start; gap: 16px; }
      .keuze-groep__opties { flex-direction: column; gap: 16px; }
    }
    @media (max-width: 980px) {
      .aanvraag { padding: 130px 22px 50px; gap: 24px; }
      .voortgang, .aanvraag__header, .aanvraag__acties, .aanvraag__formulier { width: 100%; }
      .aanvraag__intro { font-size: 12.8px; line-height: 19px; }
      .form-card { width: 100%; }
      .form__row { gap: 10px; }
      .form__input--klein { width: 64px; flex: 0 0 64px; }
      .keuze-groep__opties { gap: 14px; }
      .form-card__divider { width: 100%; }
      .aanvraag__acties { flex-direction: column; gap: 10px; align-items: stretch; }
      .aanvraag__acties .btn { justify-content: center; }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
      .bedankt-pill__persoon { display: none; }
    }
    @media (max-width: 1024px) {
      .bedankt-pill { padding: 32px 40px; border-radius: 40px; }
      .fotos-card { flex-direction: column; gap: 32px; }
      .fotos-card__dropzone { width: 100%; }
    }

    @media (max-width: 980px) {
      .bedankt-pill { padding: 22px 22px 22px 95px; border-radius: 30px; width: 100%; }
      .bedankt-pill__persoon { display: block; left: 8px; top: auto; bottom: 0; width: 80px; height: 129px; }
      .bedankt-pill p { font-size: 12px; line-height: 18px; }
      .aanvraag__titel-rij { width: 100%; }
      .fotos-card { gap: 24px; }
      .fotos-card__thumbs { flex-wrap: wrap; }
      .fotos-card__dropzone { height: 160px; }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
    }
    @media (max-width: 1024px) {
    }

    @media (max-width: 980px) {
    }

/* ============================================================
   OVER ONS (pagina-hero, team, waarden, kantoor)
   ============================================================ */

    /* ==========================================================================
       SECTION: PAGINA-HERO (Over ons)
       ========================================================================== */
    .pagina-hero {
      position: relative;
      min-height: 798px;
      background: var(--c-mid2-groen);
      overflow: hidden;
    }
    .pagina-hero__blob {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }
    .pagina-hero__blob--rechts {
      width: 1080px; height: 1081px;
      right: -379px; top: -216px;
      background: radial-gradient(50% 50% at 50% 50%, rgba(0, 237, 163, 0.6) 0%, rgba(0, 237, 163, 0) 100%);
    }
    .pagina-hero__blob--linksboven {
      width: 1578px; height: 1579px;
      left: -635px; top: -414px;
      background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
    }
    .pagina-hero__blob--linksonder {
      width: 1080px; height: 1081px;
      left: -489px; top: 555px;
      background: radial-gradient(50% 50% at 50% 50%, rgba(0, 237, 163, 0.2) 0%, rgba(0, 237, 163, 0) 100%);
    }
    .pagina-hero__inner {
      position: relative;
      max-width: 1223px;
      width: min(1223px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      padding-top: 256px;
      display: flex;
      gap: 24px;
      align-items: center;
      z-index: 1;
    }
    .pagina-hero__content {
      display: flex;
      flex-direction: column;
      gap: 24px;
      align-items: flex-start;
      flex-shrink: 0;
    }
    .pagina-hero__tagline {
      font-size: 20px;
      line-height: 27px;
      text-transform: uppercase;
    }
    /* Desktop/H1: NewBlack Medium 70/67 */
    .pagina-hero__titel {
      font-family: var(--font-heading);
      font-weight: 500;
      font-size: 70px;
      line-height: 67px;
      letter-spacing: 0.3885px;
      max-width: 660px; /* Figma-box is 595, maar webfont rendert breder; 660 geeft de juiste 2-regelige afbreking */
    }
    .pagina-hero__intro { max-width: 630px; }
    .pagina-hero__media {
      align-self: stretch;
      flex: 1 1 480px; /* minimale basis: wrapt naar eigen rij i.p.v. smal afsnijden */
      min-width: 0;
      border-radius: 10px;
      overflow: hidden;
    }
    .pagina-hero__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* Review-pill (zelfde als home-hero) */
    .reviewpill {
      display: inline-flex;
      height: 45px;
      padding: 2px 45px 2px 35px;
      align-items: center;
      background: var(--c-licht-groen);
      border-radius: 50px;
    }
    .reviewpill__inner {
      display: flex;
      gap: 28px;
      align-items: center;
      font-size: 15px;
      line-height: 20px;
      white-space: nowrap;
    }
    .reviewpill__score { display: flex; gap: 14px; align-items: center; }
    .reviewpill__sterren { width: 78.6px; height: 13.9px; }
    .reviewpill__divider { width: 1px; height: 21px; background: var(--c-zwart); }

    /* ==========================================================================
       SECTION: MAAK KENNIS (team)
       ========================================================================== */
    .team {
      background: var(--c-licht-groen);
      padding: 40px 0 80px;
    }
    .team__inner {
      max-width: 1274px;
      width: min(1274px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 42px;
      align-items: center;
    }
    .team__header {
      display: flex;
      gap: 340px;
      align-items: flex-end;
      width: 100%;
    }
    .team__header .h2 { flex: 1; }
    .team__intro { width: 417px; max-width: 100%; }
    .team__grid {
      display: flex;
      gap: 20px;
      justify-content: center;
      align-items: flex-start;
      width: 100%;
      flex-wrap: wrap;
    }
    .team-card {
      display: flex;
      flex-direction: column;
      gap: 30px;
      flex: 1 1 230px;
      max-width: 340px;
      width: auto;
      background: var(--c-donker-groen);
      border-radius: 20px;
      padding-bottom: 20px;
    }
    .team-card__media {
      position: relative;
      height: auto;
      aspect-ratio: 305 / 239; /* schaalt mee met de kaartbreedte */
      width: 100%;
      border-radius: 20px 20px 10px 10px;
      /* Koraal vlak met witte radial glow (uit Figma); cutout steekt erboven uit */
      background:
        radial-gradient(120% 120% at 20% 23%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 60%),
        var(--c-koraal);
    }
    .team-card__foto {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 116%; /* 277px bij een kaart van 305px — steekt boven het vlak uit */
      width: auto;
      max-width: none;
    }
    .team-card__body {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: flex-start;
      width: min(263px, calc(100% - 42px));
      margin-inline: auto;
      color: var(--c-wit);
    }
    .team-card__naam {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 23px;
      line-height: 23px;
    }
    .team-card__lijn {
      width: 54px;
      height: 3px;
      background: var(--c-koraal);
    }

    /* ==========================================================================
       SECTION: WAAR WIJ VOOR STAAN (waarden)
       ========================================================================== */
    .waarden {
      padding: 96px 0;
    }
    .waarden__inner {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
    .waarden__grid {
      display: flex;
      gap: 20px;
      align-items: center;
    }
    .waarde-card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      min-width: 0;
      height: 161px;
      padding-left: 24px;
      background: var(--c-licht-groen);
      border-radius: 20px;
    }
    .waarde-card__content {
      display: flex;
      flex-direction: column;
      gap: 15px;
      align-items: flex-start;
      max-width: 351px;
    }
    .waarde-card__titel {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 23px;
      line-height: 23px;
      white-space: nowrap;
    }
    .waarde-card__lijn { width: 54px; height: 3px; background: var(--c-mid2-groen); }

    /* ==========================================================================
       SECTION: KANTOOR (bezoek ons)
       ========================================================================== */
    .kantoor {
      padding: 0 0 128px;
    }
    .kantoor__card {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      gap: 40px;
      align-items: flex-start;
      justify-content: space-between;
      padding: 41px;
      background: #F2EBDF;
      border-radius: 20px;
    }
    .kantoor__content {
      display: flex;
      flex-direction: column;
      gap: 32px;
      width: 588px;
      max-width: 100%;
    }
    .kantoor__tekst {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .kantoor__tekst p { color: var(--c-donker-groen); }
    .kantoor__items {
      display: flex;
      gap: 64px;
      align-items: flex-start;
    }
    .kantoor-item {
      display: flex;
      gap: 12px;
      align-items: center;
      white-space: nowrap;
    }
    .kantoor-item__icoon { width: 68px; height: 53px; flex-shrink: 0; }
    .kantoor-item__kop {
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 18px;
      line-height: 25px;
    }
    .kantoor__media {
      width: 569px;
      height: 193px;
      flex-shrink: 0;
      border-radius: 10px;
      object-fit: cover;
    }

    /* ==========================================================================
       SECTION: EIND-CTA (gradient — zelfde als home)
       ========================================================================== */

    @media (max-width: 1400px) {
      .pagina-hero__media { height: 420px; align-self: auto; }
      .pagina-hero__inner { padding-inline: var(--container-pad); flex-wrap: wrap; padding-bottom: 60px; }
      .team__inner, .waarden__inner, .kantoor__card { margin-inline: var(--container-pad); }
      .kantoor__card { flex-wrap: wrap; }
    }
    @media (max-width: 1024px) {
      .pagina-hero { min-height: 0; }
      .pagina-hero__inner { padding-top: 190px; }
      .pagina-hero__titel { font-size: 52px; line-height: 52px; }
      .team__header { flex-direction: column; align-items: flex-start; gap: 16px; }
      .team__grid, .waarden__grid { flex-wrap: wrap; }
      .waarde-card { flex: 1 1 300px; }
      .kantoor__items { flex-direction: column; gap: 24px; }
      .kantoor__media { width: 100%; height: auto; aspect-ratio: 569 / 193; }
    }
    @media (min-width: 981px) and (max-width: 1120px) {
      /* Team: 2×2 zodra 4 kaarten niet meer op één rij passen */
      .team__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 305px)); justify-content: center; }
      .team-card { max-width: none; }
    }

    @media (max-width: 980px) {
      .pagina-hero__inner { padding-top: 130px; }
      .pagina-hero__titel { font-size: 38px; line-height: 40px; }
      .reviewpill { height: auto; padding: 10px 20px; }
      .reviewpill__inner { flex-wrap: wrap; gap: 10px 16px; }
      .team-card, .waarde-card { width: 100%; }
      .waarde-card { flex: 0 0 auto; height: auto; min-height: 0; padding: 18px 20px; }
    }

    @media (max-width: 980px) {
      /* Hero: linkslijnend, kleinere schaal (strekking home-mobiel) */
      .pagina-hero__inner { padding: 148px 22px 50px; gap: 24px; }
      .pagina-hero__content { gap: 16px; max-width: 100%; flex-shrink: 1; }
      .pagina-hero__tagline { font-size: 10.5px; line-height: normal; letter-spacing: 1.365px; }
      .pagina-hero__titel { font-size: 32.3px; line-height: 34.83px; letter-spacing: 0.3px; max-width: 100%; }
      .pagina-hero__intro { font-size: 13.5px; line-height: 20.93px; max-width: 100%; }
      .pagina-hero__media { width: 100%; flex: none; height: 220px; }
      .reviewpill { height: auto; padding: 8px 20px; }
      .reviewpill__inner { font-size: 12px; line-height: 19.6px; gap: 11px; }
      .reviewpill__sterren { width: 70px; height: 12.4px; }
      /* Team: horizontale scroll */
      .team { padding: 40px 0; }
      .team__inner { margin-inline: 0; gap: 22px; }
      .team__header { padding-inline: 22px; gap: 8px; }
      .team__intro { width: auto; font-size: 12.8px; line-height: 19px; }
      .team__grid {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-inline: 22px;
        width: 100%;
      }
      .team__grid::-webkit-scrollbar { display: none; }
      /* Waarden + kantoor */
      .waarden { padding: 50px 0; }
      .waarden__inner { margin-inline: 22px; gap: 24px; }
      .waarden__grid { flex-direction: column; gap: 10px; align-items: stretch; }
      .kantoor { padding-bottom: 50px; }
      .kantoor__card { margin-inline: 22px; padding: 26px 20px; border-radius: 16px; gap: 24px; }
      .kantoor__content { gap: 20px; }
      .kantoor__tekst p { font-size: 12.3px; line-height: 18px; }
      .kantoor-item__icoon { width: 52px; height: 40px; }
      .kantoor-item__kop { font-size: 13.8px; line-height: 18px; }
      .kantoor-item p:not(.kantoor-item__kop) { font-size: 12px; line-height: 17px; }
    }

/* ============================================================
   HOE WERKT HET (proces, stap-rijen, faq)
   ============================================================ */

    /* ==========================================================================
       SECTION: PROCES (header + kaarten + 6 stappen in detail)
       ========================================================================== */
    .proces {
      background: var(--c-licht-groen);
      padding: 200px 0 82px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .proces__header {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
    }
    .proces__tagline {
      font-size: 20px;
      line-height: 27px;
      text-transform: uppercase;
    }
    .proces__titelrij {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }
    .proces__titelrij .h2 { max-width: 700px; }
    .proces__intro { width: 449px; max-width: 100%; }

    /* Kaarten-strip (zelfde component als 'Wat u bespaart' op home) */
    .proces__kaarten {
      display: flex;
      gap: 20px;
      align-items: stretch;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-top: 100px;
    }

    /* 6 stappen in detail */
    .proces__stappen-header {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
      text-align: center;
      max-width: 950px;
      margin-top: 142px;
    }
    .proces__rijen {
      display: flex;
      flex-direction: column;
      gap: 42px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-top: 42px;
    }
    /* Stappenblok: foto als achtergrond met fade naar de tekstzijde, om-en-om
       gespiegeld; nummer half over de kaartrand (Figma 798:11943 / 798:11952) */
    .stap-blok {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 282px;
      background: var(--c-licht-grijs);
      border-radius: 20px;
    }
    .stap-blok__media {
      position: absolute;
      inset: 0;
      border-radius: 20px;
      overflow: hidden;
    }
    .stap-blok__media img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .stap-blok__media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--c-licht-grijs) 50%, rgba(247, 247, 247, 0) 74%);
    }
    .stap-blok--omgekeerd .stap-blok__media::after {
      background: linear-gradient(270deg, var(--c-licht-grijs) 50%, rgba(247, 247, 247, 0) 74%);
    }
    .stap-blok__nummer {
      position: absolute;
      left: -29px;
      top: 50%;
      transform: translateY(-50%);
      width: 59px;
      height: 59px;
      border-radius: 50%;
      background: var(--c-koraal);
      color: var(--c-wit);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 27.7px;
      line-height: 36px;
      text-align: center;
      z-index: 1;
    }
    .stap-blok--omgekeerd .stap-blok__nummer { left: auto; right: -29px; }
    .stap-blok__content {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
      width: 719px;
      max-width: 58%;
      margin: 41px 0 41px 60px;
    }
    .stap-blok--omgekeerd .stap-blok__content {
      align-items: flex-end;
      text-align: right;
      margin: 41px 60px 41px auto;
    }
    .stap-blok__tekst {
      color: var(--c-donker-groen);
    }
    .stap-blok__tekst ul {
      list-style: disc;
      margin-top: 23px;
      padding-left: 25.5px;
    }
    .stap-blok--omgekeerd .stap-blok__tekst ul {
      list-style-position: inside;
      padding-left: 0;
    }

    /* ==========================================================================
       SECTION: SPOED CTA-STRIP (zelfde als home)
       ========================================================================== */

    /* ==========================================================================
       SECTION: FAQ (accordion)
       ========================================================================== */
    .faq {
      padding: 96px 0;
    }
    .faq__inner {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
    .faq__lijst {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    .faq-item {
      background: #F9F9F9;
      border-bottom: 0.5px solid #E1E1E1;
      filter: drop-shadow(0px 4px 2px rgba(8, 8, 8, 0.08));
      box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 6px 12px 0px rgba(255, 255, 255, 0.12);
    }
    .faq-item:first-child { border-radius: 20px 20px 0 0; }
    .faq-item:last-child { border-radius: 0 0 20px 20px; border-bottom: 0; }
    .faq-item__vraag {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 20px 24px;
      background: none;
      border: 0;
      font-size: 17px;
      line-height: 23px;
      text-align: left;
      cursor: pointer;
    }
    .faq-item__chevron {
      width: 16px;
      height: 16px;
      transform: rotate(-90deg);
      transition: transform .2s ease;
      flex-shrink: 0;
    }
    .faq-item[open] .faq-item__chevron { transform: rotate(90deg); }
    .faq-item__antwoord {
      padding: 0 24px 20px;
      color: var(--c-donker-groen);
    }
    /* details/summary reset */
    .faq-item summary { list-style: none; }
    .faq-item summary::-webkit-details-marker { display: none; }

    /* ==========================================================================
       SECTION: EIND-CTA (zelfde als home)
       ========================================================================== */

    @media (max-width: 1400px) {
      .faq__inner { margin-inline: var(--container-pad); }
    }
    @media (max-width: 1024px) {
      .proces { padding-top: 160px; }
      .proces__titelrij { flex-direction: column; align-items: flex-start; gap: 16px; }
      .proces__kaarten { flex-direction: column; gap: 78px; }
      .stap-blok__content { max-width: 52%; }
    }
    @media (max-width: 980px) {
      .proces { padding-top: 130px; }
    }

    @media (max-width: 980px) {
      .proces { padding: 148px 22px 50px; }
      .proces__header { width: 100%; gap: 8px; }
      .proces__tagline { font-size: 10.5px; line-height: normal; letter-spacing: 1.365px; }
      .proces__intro { width: auto; font-size: 12.8px; line-height: 19px; }
      /* Kaarten: rij-vorm met icoon links (strekking 'Wat u bespaart' mobiel) */
      .proces__kaarten { flex-direction: column; gap: 20px; width: 100%; padding-left: 20px; margin-top: 40px; }
      .proces__stappen-header { margin-top: 50px; gap: 7px; }
      .proces__stappen-header p { font-size: 12.8px; line-height: 19px; }
      .proces__rijen { width: 100%; gap: 24px; margin-top: 24px; }
      .stap-blok { flex-direction: column; align-items: stretch; min-height: 0; border-radius: 16px; }
      .stap-blok__media { position: relative; inset: auto; height: 190px; border-radius: 16px 16px 0 0; }
      .stap-blok__media img { object-position: right center; }
      .stap-blok--omgekeerd .stap-blok__media img { object-position: left center; }
      .stap-blok__media::after,
      .stap-blok--omgekeerd .stap-blok__media::after { background: linear-gradient(180deg, rgba(247, 247, 247, 0) 55%, var(--c-licht-grijs) 97%); }
      .stap-blok__nummer,
      .stap-blok--omgekeerd .stap-blok__nummer { left: 14px; right: auto; top: 14px; transform: none; width: 40px; height: 40px; font-size: 18px; line-height: 24px; }
      .stap-blok__content,
      .stap-blok--omgekeerd .stap-blok__content { width: auto; max-width: none; margin: 0; padding: 2px 18px 22px; gap: 8px; align-items: flex-start; text-align: left; }
      .stap-blok__content .h2 { font-size: 19.5px; line-height: 24px; }
      .stap-blok__tekst { font-size: 12.3px; line-height: 18px; }
      .stap-blok__tekst ul,
      .stap-blok--omgekeerd .stap-blok__tekst ul { margin-top: 12px; list-style: disc; list-style-position: outside; padding-left: 18px; }
      .faq { padding: 50px 0; }
      .faq__inner { margin-inline: 22px; gap: 24px; }
    }

/* ============================================================
   FAQ-PAGINA (header, filterchips, groepen)
   ============================================================ */

    /* ==========================================================================
       SECTION: FAQ-PAGINA (header + filterchips + groepen)
       ========================================================================== */
    .faqpagina-header {
      background: var(--c-licht-groen);
      padding: 200px 0 32px;
    }
    .faqpagina-header__inner {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .faqpagina-header__tagline {
      font-size: 20px;
      line-height: 27px;
      text-transform: uppercase;
    }
    .faq-overzicht {
      padding: 32px 0 96px;
    }
    .faq-overzicht__inner {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
    .faq-filters {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      justify-content: center;
      align-self: center;
    }
    .faq-filter {
      padding: 8px 24px;
      border: 0;
      border-radius: 40px;
      background: #64978A;
      color: var(--c-wit);
      font-size: 20px;
      line-height: 27px;
      text-transform: uppercase;
      cursor: pointer;
    }
    .faq-groep {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .faq-groep__titel {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 23px;
      line-height: 23px;
    }

    /* Eind-CTA (zelfde als home) */

    @media (max-width: 1400px) {
      .faqpagina-header__inner, .faq-overzicht__inner { margin-inline: var(--container-pad); }
    }
    @media (max-width: 1024px) {
      .faqpagina-header { padding-top: 160px; }
      .faq-filters { flex-wrap: wrap; }
      .eindcta__persoon { display: none; }
    }
    @media (max-width: 980px) {
      .faqpagina-header { padding-top: 130px; }
      .faq-filter { font-size: 16px; }
      .eindcta__buttons { flex-direction: column; }
    }

    @media (max-width: 980px) {
      .faqpagina-header { padding: 148px 0 16px; }
      .faqpagina-header__inner { margin-inline: 22px; gap: 8px; }
      .faqpagina-header__tagline { font-size: 10.5px; line-height: normal; letter-spacing: 1.365px; }
      .faq-overzicht { padding: 16px 0 50px; }
      .faq-overzicht__inner { margin-inline: 22px; gap: 24px; }
      .faq-filter { font-size: 13px; padding: 6px 16px; }
      .faq-groep__titel { font-size: 15px; line-height: 19px; }
    }

/* ============================================================
   VERGELIJKING (drie vragen, grote tabel, rekenvoorbeeld,
   flexibel-carousel, zelftest, wat anderen kozen)
   ============================================================ */

    /* ==========================================================================
       SECTION: VERGELIJK-HEADER + DRIE VRAGEN
       ========================================================================== */
    .vgl-intro {
      background: var(--c-licht-groen);
      padding: 200px 0 82px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .vgl-intro__header {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
    }
    .vgl-intro__tagline { font-size: 20px; line-height: 27px; text-transform: uppercase; }
    .vgl-intro__titelrij {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }
    .vgl-intro__titelrij .h2 { max-width: 700px; }
    .vgl-intro__tekst { width: 449px; max-width: 100%; }
    .vgl-intro__subtitel {
      margin-top: 100px;
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 18px;
      line-height: 25px;
      text-align: center;
    }
    .vgl-intro__kaarten {
      display: flex;
      gap: 20px;
      align-items: stretch;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-top: 96px;
    }

    /* ==========================================================================
       SECTION: GROTE VERGELIJKINGSTABEL
       ========================================================================== */
    .vgl-tabel {
      position: relative;
      background: var(--c-licht-groen-2);
      padding: 96px 0;
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: center;
    }
    .vgl-tabel__header {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
      text-align: center;
      max-width: 706px;
      padding-inline: var(--container-pad);
    }
    .vgl-tabel__whatsapp {
      position: absolute;
      top: 54px;
      right: 42px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--c-koraal);
      display: flex;
      align-items: center;
      justify-content: center;
      filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.25));
    }
    .vgl-tabel__whatsapp svg { width: 26px; height: 26px; fill: var(--c-wit); }
    .vgl-tabel__kaart {
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      background: var(--c-wit);
      border-radius: 20px;
      padding: 16px 56px 32px;
      display: grid;
      grid-template-columns: 1fr 386px 386px;
      column-gap: 34px;
      align-items: stretch;
    }
    .vgl-tabel__cel {
      display: flex;
      align-items: center;
      min-height: 70px; /* rij-pitch uit Figma (rijen op y 0/70/140/…) */
      font-size: 17px;
      line-height: 23px;
    }
    .vgl-tabel__cel--label {
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 18px;
      line-height: 25px;
    }
    .vgl-tabel__cel--wkuv {
      background: var(--c-licht-groen);
      justify-content: center;
      text-align: center;
    }
    .vgl-tabel__cel--makelaar { justify-content: center; text-align: center; }
    .vgl-tabel__cel--kop {
      min-height: 88px;
      justify-content: center;
    }
    .vgl-tabel__cel--wkuv.vgl-tabel__cel--kop { border-radius: 10px 10px 0 0; }
    .vgl-tabel__cel--wkuv.vgl-tabel__cel--laatste { border-radius: 0 0 10px 10px; padding-bottom: 24px; }
    .vgl-tabel__logo-pill {
      width: 194px;
      height: 56px;
      background: var(--c-wit);
      border-radius: 55px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .vgl-tabel__logo-pill img { width: 131px; height: 29px; }
    .vgl-tabel__kolomtitel {
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 18px;
      line-height: 25px;
    }
    .vgl-tabel__voetnoot {
      font-size: 15px;
      line-height: 20px;
      text-align: center;
    }

    /* ==========================================================================
       SECTION: WANNEER IS EEN MAKELAAR BETER?
       ========================================================================== */
    .wanneer {
      padding: 96px 0;
    }
    .wanneer__inner {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
    .wanneer__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }
    .wanneer__noot { max-width: 449px; }
    .wanneer__kaarten {
      display: flex;
      gap: 20px;
      align-items: stretch;
    }
    .lijst-card {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 15px;
      align-items: flex-start;
      padding: 32px;
      background: linear-gradient(160deg, var(--c-licht-groen) 0%, #D7EEDF 100%);
      border-radius: 20px;
    }
    .lijst-card__titel {
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 18px;
      line-height: 25px;
    }
    .lijst-card__lijn { width: 54px; height: 3px; background: var(--c-mid2-groen); }
    .lijst-card ul {
      list-style: disc;
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    /* ==========================================================================
       SECTION: REKENVOORBEELD (koraal met blobs)
       ========================================================================== */
    .reken {
      position: relative;
      background: var(--c-koraal);
      padding: 96px 0;
      overflow: hidden;
      color: var(--c-wit);
    }
    .reken__blob { position: absolute; border-radius: 50%; pointer-events: none; }
    .reken__blob--rechts {
      width: 1080px; height: 1081px;
      right: -440px; top: -482px;
      background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
    }
    .reken__blob--links {
      width: 1578px; height: 1579px;
      left: -617px; top: -293px;
      background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
    }
    .reken__blob--onder {
      width: 1080px; height: 1081px;
      left: 372px; top: 315px;
      background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    }
    .reken__inner {
      position: relative;
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 40px;
      z-index: 1;
    }
    .reken__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      color: var(--c-wit);
    }
    .reken__intro { max-width: 449px; }
    .reken__kaarten {
      display: flex;
      gap: 20px;
      align-items: stretch;
    }
    .reken-card {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: flex-start;
      padding: 32px;
      background: var(--c-wit);
      border-radius: 10px;
      color: var(--c-zwart);
    }
    .reken-card__titel {
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 18px;
      line-height: 25px;
    }
    .reken-card ul {
      list-style: disc;
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .reken-card__plus { font-size: 17px; line-height: 23px; }
    .reken-card__lijn { width: 54px; height: 3px; background: var(--c-mid2-groen); }
    .reken-card__netto {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 23px;
      line-height: 23px;
    }
    .reken-card__noot { font-size: 15px; line-height: 20px; }
    .reken__conclusie { max-width: 720px; color: var(--c-wit); }

    /* ==========================================================================
       SECTION: FLEXIBEL (carousel donkere kaarten)
       ========================================================================== */
    .flexibel {
      background: var(--c-licht-groen);
      padding: 96px 0;
      overflow: hidden;
    }
    .flexibel__inner {
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      max-width: 1280px;
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 48px;
    }
    .flexibel__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .flexibel__intro-blok { display: flex; flex-direction: column; gap: 12px; flex: 1; }
    .flexibel__nav { display: flex; gap: 12px; align-items: center; }
    .flexibel__nav-btn {
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: 21px;
      background: var(--c-mid2-groen);
      filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.25));
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .flexibel__nav-btn img { width: 24px; height: 13px; }
    .flexibel__nav-btn--vorige img { transform: rotate(-90deg); }
    .flexibel__nav-btn--volgende img { transform: rotate(90deg); }
    .flexibel__track {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      /* Full-width bleed naar beide viewportranden (kaart 1 start op de containerlijn) */
      margin-right: calc(-1 * (100vw - min(1280px, 100vw - 2 * var(--container-pad))) / 2);
      padding-right: 40px;
      margin-left: calc(-1 * (100vw - min(1280px, 100vw - 2 * var(--container-pad))) / 2);
      padding-left: calc((100vw - min(1280px, 100vw - 2 * var(--container-pad))) / 2);
      scroll-padding-left: calc((100vw - min(1280px, 100vw - 2 * var(--container-pad))) / 2);
    }
    .flexibel__track::-webkit-scrollbar { display: none; }
    .flex-card {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      width: 912px;
      height: 182px;
      flex-shrink: 0;
      padding: 24px 24px 35px 385px;
      border-radius: 10px;
      background: var(--c-donker-groen);
      filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.25));
      color: var(--c-wit);
      overflow: hidden;
      scroll-snap-align: start;
    }
    .flex-card__foto {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 44%;
      object-fit: cover;
    }
    .flex-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(27, 38, 32, 0) 21%, var(--c-donker-groen) 40%);
    }
    .flex-card__content {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 1;
    }
    .flex-card__titel {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 23px;
      line-height: 23px;
    }
    .flexibel__voetnoot { display: flex; flex-direction: column; gap: 8px; }
    .flexibel__voetnoot-kop {
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 18px;
      line-height: 25px;
    }
    .flexibel__voetnoot-kop span { color: rgba(34, 35, 38, 0.6); }

    /* ==========================================================================
       SECTION: ZELFTEST (accordion)
       ========================================================================== */
    .zelftest {
      padding: 96px 0;
    }
    .zelftest__inner {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
    .zelftest__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }

    /* ==========================================================================
       SECTION: WAT ANDEREN KOZEN
       ========================================================================== */
    .gekozen {
      padding: 0 0 128px;
    }
    .gekozen__inner {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
    .gekozen__kaarten {
      display: flex;
      gap: 20px;
      align-items: stretch;
    }
    .keuze-verhaal {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: flex-start;
      padding: 32px;
      background: #F2EBDF;
      border-radius: 20px;
    }
    .keuze-verhaal__chip {
      padding: 6px 16px;
      border-radius: 40px;
      background: var(--c-koraal);
      color: var(--c-wit);
      font-size: 15px;
      line-height: 20px;
      text-transform: uppercase;
    }
    .keuze-verhaal__quote-teken { width: 34px; height: 21px; }
    .keuze-verhaal__auteur {
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .keuze-verhaal__avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--c-mid2-groen);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      line-height: 20px;
      text-transform: uppercase;
      flex-shrink: 0;
    }
    .keuze-verhaal__avatar span { opacity: .6; }
    .keuze-verhaal__naam {
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 18px;
      line-height: 25px;
    }

    /* Eind-CTA (zelfde als home) */

    @media (max-width: 1400px) {
      .wanneer__inner, .reken__inner, .flexibel__inner, .zelftest__inner, .gekozen__inner { margin-inline: var(--container-pad); }
      .vgl-tabel__kaart { grid-template-columns: 1fr 1fr 1fr; padding: 16px 24px 32px; }
    }
    @media (max-width: 1024px) {
      .vgl-intro { padding-top: 160px; }
      .vgl-intro__titelrij, .wanneer__header, .reken__header, .zelftest__header { flex-direction: column; align-items: flex-start; gap: 16px; }
      .vgl-intro__kaarten { flex-direction: column; gap: 78px; }
      .vgl-tabel__kaart { display: flex; flex-direction: column; gap: 24px; }
      .vgl-tabel__cel { min-height: 0; padding: 4px 0; }
      .vgl-tabel__cel--wkuv, .vgl-tabel__cel--makelaar { justify-content: flex-start; text-align: left; }
      .wanneer__kaarten, .reken__kaarten, .gekozen__kaarten { flex-direction: column; }
      .flex-card { width: min(912px, 90vw); height: auto; min-height: 182px; padding: 24px; }
      .flex-card__foto, .flex-card::after { display: none; }
    }
    @media (max-width: 980px) {
      .vgl-intro { padding-top: 130px; }
      .vgl-tabel__whatsapp { display: none; }
    }

    @media (max-width: 980px) {
      .vgl-intro { padding: 148px 22px 50px; }
      .vgl-intro__header { width: 100%; gap: 8px; }
      .vgl-intro__tagline { font-size: 10.5px; line-height: normal; letter-spacing: 1.365px; }
      .vgl-intro__tekst { width: auto; font-size: 12.8px; line-height: 19px; }
      .vgl-intro__subtitel { margin-top: 40px; font-size: 13px; }
      .vgl-intro__kaarten { flex-direction: column; gap: 20px; width: 100%; padding-left: 20px; margin-top: 24px; }
      /* Grote tabel: compact 3-koloms raster (strekking home-mobiel tabel) */
      .vgl-tabel { padding: 50px 22px; }
      .vgl-tabel__header { padding-inline: 0; align-items: flex-start; text-align: left; }
      .vgl-tabel__header p { font-size: 12.8px; line-height: 19px; }
      .vgl-tabel__kaart {
        display: grid;
        grid-template-columns: 44% 29% 27%;
        gap: 0;
        padding: 0;
        border-radius: 14px;
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }
      .vgl-tabel__cel { min-height: 0; padding: 13px 10px; font-size: 11.5px; line-height: 15px; }
      .vgl-tabel__cel--label { font-size: 12px; line-height: 16px; }
      .vgl-tabel__cel--wkuv { background: rgba(151, 210, 176, 0.14); justify-content: center; text-align: center; }
      .vgl-tabel__cel--makelaar { justify-content: center; text-align: center; }
      .vgl-tabel__cel--kop { min-height: 65px; }
      .vgl-tabel__cel--wkuv.vgl-tabel__cel--kop { background: #EDF5F1; border-radius: 0; }
      .vgl-tabel__cel--makelaar.vgl-tabel__cel--kop { background: var(--c-licht-grijs); }
      .vgl-tabel__cel--wkuv.vgl-tabel__cel--laatste { border-radius: 0; padding-bottom: 13px; }
      .vgl-tabel__logo-pill { width: auto; height: auto; background: none; border-radius: 0; }
      .vgl-tabel__logo-pill img { width: 85px; height: 19px; }
      .vgl-tabel__kolomtitel { font-size: 12px; line-height: 16px; }
      .vgl-tabel__voetnoot { font-size: 11px; line-height: 15px; }
      .wanneer { padding: 50px 0; }
      .wanneer__inner { margin-inline: 22px; gap: 24px; }
      .lijst-card { padding: 20px 16px; border-radius: 12px; }
      .lijst-card__titel { font-size: 13.8px; line-height: 18px; }
      .lijst-card ul { font-size: 12px; line-height: 17px; }
      .reken { padding: 50px 0; }
      .reken__inner { margin-inline: 22px; gap: 24px; }
      .reken__intro { font-size: 12.8px; line-height: 19px; }
      .reken-card { padding: 20px 16px; border-radius: 12px; }
      .reken-card__titel { font-size: 13.8px; line-height: 18px; }
      .reken-card ul, .reken-card__plus { font-size: 12px; line-height: 17px; }
      .reken-card__netto { font-size: 15px; line-height: 19px; }
      .flexibel { padding: 50px 0; }
      .flexibel__inner { margin-inline: 0; gap: 22px; }
      .flexibel__header { padding-inline: 22px; }
      .flexibel__nav-btn { width: 30px; height: 30px; border-radius: 15px; }
      .flexibel__nav-btn img { width: 17px; height: 9px; }
      .flexibel__track { padding-inline: 22px; margin-inline: 0; scroll-padding-left: 22px; }
      .flex-card { width: 300px; height: auto; min-height: 0; padding: 20px 16px; border-radius: 12px; }
      .flex-card__titel { font-size: 13.8px; line-height: 18px; }
      .flex-card p { font-size: 12px; line-height: 17px; }
      .flexibel__voetnoot { padding-inline: 22px; }
      .flexibel__voetnoot-kop { font-size: 13.8px; line-height: 18px; }
      .zelftest { padding: 50px 0; }
      .zelftest__inner { margin-inline: 22px; gap: 24px; }
      .gekozen { padding-bottom: 50px; }
      .gekozen__inner { margin-inline: 22px; gap: 24px; }
      .keuze-verhaal { padding: 20px 16px; border-radius: 12px; }
      .keuze-verhaal p { font-size: 12.3px; line-height: 18px; }
      .keuze-verhaal__naam { font-size: 12.8px; line-height: 17px; }
    }

/* ============================================================
   VERGELIJKEN (paginakop-tabelvariant, eigen verhaal, faq-chips)
   ============================================================ */

    /* ==========================================================================
       SECTION: VERGELIJKINGSTABEL (paginakop)
       ========================================================================== */
    .vgl-tabel--paginakop {
      position: relative;
      background: var(--c-licht-groen);
      padding: 200px 0 96px;
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: center;
    }

    /* ==========================================================================
       SECTION: VOOR WIE IS DIT?
       ========================================================================== */

    /* ==========================================================================
       SECTION: EIGEN VERHAAL (beige quote-kaart)
       ========================================================================== */
    .eigen-verhaal { padding: 0 0 96px; }
    .eigen-verhaal__card {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      gap: 40px;
      align-items: center;
      padding: 41px;
      background: #F2EBDF;
      border-radius: 20px;
    }
    .eigen-verhaal__img {
      width: 426px;
      height: 213px;
      flex-shrink: 0;
      border-radius: 10px;
      object-fit: cover;
    }
    .eigen-verhaal__content {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
    }
    .eigen-verhaal__quote-teken { width: 34px; height: 21px; }
    .eigen-verhaal__quote-tekst {
      font-family: var(--font-heading);
      font-weight: 500;
      font-size: 40px;
      line-height: 50px;
      letter-spacing: 0.36px;
    }
    .btn--groen { background: var(--c-mid2-groen); align-self: flex-start; margin-top: 12px; }

    /* ==========================================================================
       SECTION: FAQ MET CHIPS (koraal)
       ========================================================================== */
    .faq-kort { padding: 0 0 96px; }
    .faq-kort__inner {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .faq-kort__chips { display: flex; gap: 8px; }
    .faq-chip {
      padding: 6px 16px;
      border: 0;
      border-radius: 40px;
      background: var(--c-koraal);
      color: var(--c-wit);
      font-size: 15px;
      line-height: 20px;
      cursor: pointer;
    }

    /* Eind-CTA (zelfde als home) */

    @media (max-width: 1400px) {
      .vgl-tabel__kaart { grid-template-columns: 1fr 1fr 1fr; padding: 16px 24px 32px; }
    }
    @media (max-width: 1024px) {
      .vgl-tabel--paginakop { padding-top: 160px; }
      .vgl-tabel__kaart { display: flex; flex-direction: column; gap: 24px; }
      .vgl-tabel__cel { min-height: 0; padding: 4px 0; }
      .vgl-tabel__cel--wkuv, .vgl-tabel__cel--makelaar { justify-content: flex-start; text-align: left; }
      .eigen-verhaal__card { flex-direction: column; align-items: flex-start; }
      .eigen-verhaal__img { width: 100%; height: auto; aspect-ratio: 2 / 1; }
      .eigen-verhaal__quote-tekst { font-size: 30px; line-height: 38px; }
      .faq-kort__chips { flex-wrap: wrap; }
      .vgl-tabel__whatsapp { display: none; }
    }
    @media (max-width: 980px) {
      .vgl-tabel--paginakop { padding-top: 130px; }
      .vgl-tabel__cta { flex-direction: column; }
    }

    @media (max-width: 980px) {
      .vgl-tabel--paginakop { padding: 148px 22px 50px; }
      .vgl-tabel__header { padding-inline: 0; }
      .vgl-tabel__header p { font-size: 12.8px; line-height: 19px; }
      .vgl-tabel__kaart {
        display: grid;
        grid-template-columns: 44% 29% 27%;
        gap: 0;
        padding: 0;
        border-radius: 14px;
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        background: var(--c-licht-grijs-2);
      }
      .vgl-tabel__cel { min-height: 0; padding: 13px 10px; font-size: 11.5px; line-height: 15px; }
      .vgl-tabel__cel--label { font-size: 12px; line-height: 16px; }
      .vgl-tabel__cel--wkuv { background: rgba(151, 210, 176, 0.14); justify-content: center; text-align: center; }
      .vgl-tabel__cel--makelaar { justify-content: center; text-align: center; }
      .vgl-tabel__cel--kop { min-height: 65px; }
      .vgl-tabel__cel--wkuv.vgl-tabel__cel--kop { background: #EDF5F1; border-radius: 0; }
      .vgl-tabel__cel--makelaar.vgl-tabel__cel--kop { background: var(--c-licht-grijs); }
      .vgl-tabel__cel--wkuv.vgl-tabel__cel--laatste { border-radius: 0; padding-bottom: 13px; }
      .vgl-tabel__logo-pill { width: auto; height: auto; background: none; border-radius: 0; }
      .vgl-tabel__logo-pill img { width: 85px; height: 19px; }
      .vgl-tabel__kolomtitel { font-size: 12px; line-height: 16px; }
      .vgl-tabel__voetnoot { font-size: 11px; line-height: 15px; }
      .vgl-tabel__cta { flex-direction: column; gap: 10px; align-self: stretch; }
      .vgl-tabel__cta .btn { justify-content: center; }
      .eigen-verhaal { padding-bottom: 50px; }
      .eigen-verhaal__card { margin-inline: 22px; padding: 26px 20px; border-radius: 16px; gap: 12px; }
      .eigen-verhaal__img { height: 170px; }
      .eigen-verhaal__quote-tekst { font-size: 19.5px; line-height: 24px; }
      .eigen-verhaal__content p:not(.eigen-verhaal__quote-tekst) { font-size: 12.3px; line-height: 18px; }
      .faq-kort { padding-bottom: 50px; }
      .faq-kort__inner { margin-inline: 22px; gap: 16px; }
      .faq-chip { font-size: 12px; }
    }

/* ============================================================
   LANDINGSPAGINA (waarom-slim, achtergrond-SEO, woningen,
   waarom-ons koraal) — overige secties delen home-CSS
   ============================================================ */

    /* ==========================================================================
       SECTION: HERO (zelfde als home, plaats-variant)
       ========================================================================== */
    /* Persoon-overlay: valt exact over de ingebakken persoon in de foto (crop 1:1 uit Figma) */

    /* ==========================================================================
       SECTION: WAAROM SLIM (3 kaarten)
       ========================================================================== */
    .waarom-slim {
      padding: 40px 0 128px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 89px;
    }
    .waarom-slim__header {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
      text-align: center;
      max-width: 950px;
      padding-inline: var(--container-pad);
    }
    .waarom-slim__grid {
      display: flex;
      gap: 20px;
      align-items: stretch;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
    }

    /* ==========================================================================
       SECTION: SPOED-STRIP (zelfde als home)
       ========================================================================== */

    /* ==========================================================================
       SECTION: STAPPEN (zelfde als home)
       ========================================================================== */

    /* ==========================================================================
       SECTION: ACHTERGROND (SEO-tekst, beige kaart)
       ========================================================================== */
    .achtergrond { padding: 96px 0 40px; }
    .achtergrond__card {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      gap: 40px;
      align-items: flex-start;
      padding: 41px;
      background: #F2EBDF;
      border-radius: 20px;
    }
    /* Fotokader: 569px breed, volle kaarthoogte; crop 1:1 uit Figma (586:865) */
    .achtergrond__media {
      position: relative;
      width: 569px;
      align-self: stretch;
      flex-shrink: 0;
      border-radius: 10px;
      overflow: hidden;
    }
    .achtergrond__media img {
      position: absolute;
      height: 100%;
      width: 163.82%;
      left: -63.85%;
      top: 0;
      max-width: none;
    }
    .achtergrond__content {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
    }
    .achtergrond__tagline { font-size: 20px; line-height: 27px; text-transform: uppercase; }
    .achtergrond__content .h2 { max-width: 588px; }
    .achtergrond__tekst {
      display: flex;
      flex-direction: column;
      gap: 23px;
      color: var(--c-donker-groen);
      max-width: 640px;
    }

    /* ==========================================================================
       SECTION: WELKE WONINGEN
       ========================================================================== */
    .woningen { padding: 40px 0 96px; }
    .woningen__inner {
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
    .woningen__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 40px;
    }
    .woningen__intro { max-width: 449px; }
    .woningen__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .woning-card {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
      padding: 20px 24px;
      background: var(--c-licht-groen);
      border-radius: 20px;
    }
    .woning-card__titel {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 18px;
      line-height: 25px;
    }
    .woning-card__lijn { width: 40px; height: 3px; background: var(--c-mid2-groen); }

    /* ==========================================================================
       SECTION: WAAROM ONS (koraal met blobs)
       ========================================================================== */
    .waarom-ons {
      position: relative;
      background: var(--c-koraal);
      padding: 80px 0;
      overflow: hidden;
      color: var(--c-wit);
    }
    .waarom-ons__blob { position: absolute; border-radius: 50%; pointer-events: none; }
    .waarom-ons__blob--links {
      width: 1080px; height: 1081px;
      left: -290px; top: -244px;
      background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
    }
    .waarom-ons__blob--rechts {
      width: 1080px; height: 1081px;
      right: -440px; top: -482px;
      background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
    }
    .waarom-ons__inner {
      position: relative;
      max-width: 1280px;
      width: min(1280px, calc(100vw - 2 * var(--container-pad)));
      margin-inline: auto;
      display: flex;
      gap: 24px;
      align-items: center;
      z-index: 1;
    }
    .waarom-ons__media {
      width: 668px;
      height: 383px;
      flex-shrink: 0;
      border-radius: 10px;
      object-fit: cover;
    }
    .waarom-ons__content { display: flex; flex-direction: column; gap: 16px; }
    .waarom-ons__content ul {
      list-style: disc;
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    /* ==========================================================================
       SECTION: VERGELIJKINGSTABEL (home-variant)
       ========================================================================== */

    /* ==========================================================================
       SECTION: FAQ + EIND-CTA
       ========================================================================== */

    @media (max-width: 1400px) {
      .achtergrond__card, .woningen__inner, .waarom-ons__inner, .faq__inner { margin-inline: var(--container-pad); }
      .achtergrond__card { flex-wrap: wrap; }
      .waarom-ons__inner { flex-wrap: wrap; }
    }
    @media (max-width: 1024px) {
      .woningen__header { flex-direction: column; align-items: flex-start; gap: 16px; }
      .woningen__grid { grid-template-columns: 1fr; }
      .achtergrond__img { width: 100%; height: auto; aspect-ratio: 424 / 524; max-height: 420px; }
    }
    @media (max-width: 980px) {
      .waarom-slim__grid { flex-direction: column; gap: 78px; }
    }

    @media (max-width: 980px) {
      /* Hero (zelfde behandeling als home-mobiel) */
      /* Waarom slim: bespaar-rijen */
      .waarom-slim { padding: 40px 22px 50px; gap: 0; }
      .waarom-slim__header { padding-inline: 0; align-items: flex-start; text-align: left; gap: 7px; }
      .waarom-slim__header p { font-size: 12.8px; line-height: 19px; }
      .waarom-slim__grid { flex-direction: column; gap: 20px; width: 100%; padding-left: 20px; margin-top: 34px; }
      /* Stappen: horizontale scroll (zelfde als home) */
      /* Achtergrond (SEO): gestapelde kaart */
      .achtergrond { padding: 40px 22px 24px; }
      .achtergrond__card { margin-inline: 0; padding: 26px 20px; border-radius: 16px; gap: 20px; }
      .achtergrond__media { width: 100%; height: 260px; align-self: auto; }
      .achtergrond__tagline { font-size: 10.5px; line-height: normal; letter-spacing: 1.365px; }
      .achtergrond__tekst { font-size: 12.3px; line-height: 18px; gap: 14px; }
      /* Welke woningen: 2-koloms grid */
      .woningen { padding: 24px 22px 50px; }
      .woningen__inner { margin-inline: 0; gap: 24px; }
      .woningen__header { gap: 7px; }
      .woningen__intro { font-size: 12.8px; line-height: 19px; }
      .woningen__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      /* Waarom ons (koraal) */
      .waarom-ons { padding: 50px 0; }
      .waarom-ons__inner { margin-inline: 22px; gap: 20px; }
      .waarom-ons__media { width: 100%; height: auto; }
      .waarom-ons__content ul { font-size: 12.3px; line-height: 18px; }
      /* Vergelijkingstabel: compacte mobiele tabel */
      /* FAQ */
    }

/* Landingspagina-hero: bredere titelkolom voor de juiste regelafbreking
   (Figma-box 1086, webfont rendert breder — zelfde fix als statisch) */
/* ============================================================
   WHATSAPP-CHATVENSTER (opent vanaf de float, stuurt door naar wa.me)
   ============================================================ */
.wa-chat {
  position: fixed;
  right: 34px;
  bottom: 116px;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--c-wit);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(27, 38, 32, .22);
  overflow: hidden;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .28s ease, transform .35s cubic-bezier(.34, 1.35, .64, 1), visibility 0s linear .35s;
}
.wa-chat--open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .28s ease, transform .35s cubic-bezier(.34, 1.35, .64, 1);
}
.wa-chat__kop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--c-donker-groen);
  color: var(--c-wit);
}
.wa-chat__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  background: var(--c-mid2-groen);
  flex-shrink: 0;
}
.wa-chat__naam { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-chat__naam strong { font-size: 15px; line-height: 20px; }
.wa-chat__status { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .8; }
.wa-chat__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-online);
  animation: wkuv-puls 2s ease-out infinite;
}
.wa-chat__sluit {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--c-wit);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.wa-chat__gesprek {
  padding: 18px 16px;
  background: var(--c-licht-groen-2);
  min-height: 96px;
}
.wa-chat__bubbel {
  display: inline-block;
  background: var(--c-wit);
  border-radius: 4px 16px 16px 16px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 20px;
  box-shadow: 0 2px 6px rgba(27, 38, 32, .08);
  max-width: 90%;
}
.wa-chat__invoer {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--c-wit);
  border-top: 1px solid rgba(34, 35, 38, .08);
}
.wa-chat__invoer input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(34, 35, 38, .15);
  border-radius: 100px;
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
}
.wa-chat__invoer input:focus { outline: 2px solid var(--c-mid2-groen); border-color: transparent; }
.wa-chat__invoer button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--c-koraal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: filter .2s ease;
}
.wa-chat__invoer button:hover { filter: brightness(1.08); }
@media (max-width: 980px) {
  .wa-chat { right: 16px; bottom: 100px; }
}
.wa-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 11px;
  background: #F03E3E;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 21px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  animation: wkuv-badge-pop .45s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
@keyframes wkuv-badge-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ============================================================
   SUBTIELE FADE-UP BIJ INSCROLLEN (klasse via main.js)
   ============================================================ */
.aos-fade {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.aos-zichtbaar {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .aos-fade { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   WHATSAPP-FLOAT (desktop, alle pagina's — Figma Group 5132)
   ============================================================ */
.whatsapp-float {
  position: fixed;
  bottom: 40px;
  right: 34px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.25));
  z-index: 20;
}
.whatsapp-float img {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 980px) {
  .whatsapp-float { display: none; }
}

/* ============================================================
   404-PAGINA
   ============================================================ */
.fout404 .pagina-hero__inner { padding-bottom: 120px; }
.fout404__acties {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* ============================================================
   SNELLE INDICATIE (hero met formulier rechts)
   ============================================================ */
.indicatie-hero .pagina-hero__inner {
  gap: 40px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 96px;
}
.indicatie-hero .pagina-hero__content { max-width: 630px; flex-shrink: 1; }
.indicatie-hero__form {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  background: var(--c-wit);
  border-radius: 20px;
  filter: drop-shadow(0px 14px 12px rgba(0, 0, 0, 0.1));
  flex-shrink: 0;
}
.indicatie-hero__form .hero__form { width: 516px; max-width: 100%; }
@media (max-width: 1200px) {
  .indicatie-hero .pagina-hero__inner { flex-wrap: wrap; }
  .indicatie-hero__form { width: 100%; }
  .indicatie-hero__form .hero__form { width: 100%; }
}

/* ============================================================
   PERSOONSVERHALEN (verhalen-slider + net-verkocht carousel)
   ============================================================ */
.verhalen-slider { padding: 0 0 40px; }
.verhalen-slider__spoor {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.verhalen-slider__spoor::-webkit-scrollbar { display: none; }
.verhalen-slider__spoor {
  gap: 40px;
  padding: 80px calc((100vw - min(1280px, 100vw - 2 * var(--container-pad))) / 2) 40px;
}
.verhalen-slider__slide {
  flex: 0 0 min(1280px, calc(100vw - 2 * var(--container-pad)));
  min-width: 0;
  scroll-snap-align: center;
  display: flex;
}
.verhalen-slider__slide .verhaal__card { width: 100%; }
.verhalen-slider__dots {
  display: flex;
  gap: 54px;
  justify-content: center;
  padding-bottom: 40px;
}
.verhalen-slider__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--c-beige);
  cursor: pointer;
  transition: background .3s ease;
}
.verhalen-slider__dot--actief { background: var(--c-donker-groen); }
.verkocht { padding: 30px 0 96px; }
.verkocht__header {
  width: min(1280px, calc(100vw - 2 * var(--container-pad)));
  margin: 0 auto 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.verkocht__spoor {
  display: flex;
  overflow-x: auto;
  padding-block: 4px;
  scrollbar-width: none;
}
.verkocht__spoor::-webkit-scrollbar { display: none; }
.verkocht__baan {
  display: flex;
  gap: 20px;
  padding-right: 20px;
  flex-shrink: 0;
}
/* Sleepbare carousels */
.is-sleepbaar { cursor: grab; }
.is-slepen { cursor: grabbing; user-select: none; }
.is-slepen a { pointer-events: none; }
.verkocht-kaart {
  position: relative;
  width: 356px;
  height: 362px;
  flex-shrink: 0;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
}
.verkocht-kaart img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.verkocht-kaart__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.verkocht-kaart__label {
  pointer-events: none;
  z-index: 2;

  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--c-licht-groen);
  color: var(--c-zwart);
  border-radius: 100px;
  padding: 14px 24px;
  font-size: 15px;
  line-height: 20px;
  opacity: 0;
  transition: opacity .35s ease-out;
}
@media (hover: hover) {
  .verkocht-kaart:hover .verkocht-kaart__label { opacity: 1; }
}
@media (max-width: 980px) {
  .verhalen-slider__spoor { gap: 22px; padding: 40px 22px 24px; }
  .verhalen-slider__dots { gap: 24px; padding-bottom: 24px; }
  .verkocht { padding: 20px 0 50px; }
  .verkocht__header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .verkocht-kaart { width: 260px; height: 264px; }
}

[class*="tmpl-woning-verkopen"] .hero__intro,
[class*="tmpl-appartement-verkopen"] .hero__intro,
[class*="tmpl-spoed-verkopen"] .hero__intro {
  max-width: 1320px;
  width: min(1320px, calc(100vw - 2 * var(--container-pad)));
}

/* Accordions (faq-item) klappen vloeiend open/dicht bij klik.
   Chrome/Edge animeren block-size via interpolate-size (staat in :root);
   andere browsers openen direct — nette fallback. */
.faq-item::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size .3s ease, content-visibility .3s ease allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }

/* Bespaar-kaarten: contextbreedtes per sectie (basis = home, 413x165) */
.vgl-intro__kaarten .bespaar-card { flex: 1; width: auto; height: auto; min-height: 277px; }
.proces__kaarten .bespaar-card { flex: 1; width: auto; height: auto; min-height: 183px; }
.waarom-slim__grid .bespaar-card { flex: 1; width: auto; height: auto; min-height: 165px; }
@media (max-width: 980px) {
  .vgl-intro__kaarten .bespaar-card,
  .proces__kaarten .bespaar-card,
  .waarom-slim__grid .bespaar-card { min-height: 78px; height: auto; }
}

/* Landing-hero: plaatsnaam-accent met rechte onderstreping (i.p.v. golf) */
.hero__title-accent--streep { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; }
.hero__title-accent--streep::after { display: none; }
@media (max-width: 980px) {
  .hero__title-accent--streep { text-decoration-thickness: 3px; text-underline-offset: 5px; }
}

/* ============================================================
   GRAVITY FORMS — grid + kaartindeling (aanvraagflow)
   ============================================================ */
.gform_wrapper { width: 100%; }
.gform_wrapper fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.gform_wrapper legend { padding: 0; }
.gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.gform_wrapper .gfield { grid-column: 1 / -1; min-width: 0; }
.gform_wrapper .gfield.wkuv-span6 { grid-column: span 6; }
.gform_wrapper .gfield.wkuv-span5 { grid-column: span 5; }
.gform_wrapper .gfield.wkuv-span2 { grid-column: span 2; }
@media (max-width: 980px) {
  /* Mobiel: eind-CTA-persoon rechtsonder naast de knoppen (wint van pagedef-verbergregels) */
  .eindcta .eindcta__persoon {
    display: block;
    position: absolute;
    right: 8px;
    bottom: 0;
    top: auto;
    left: auto;
    width: min(38vw, 170px);
    height: auto;
  }
  /* Mobiel: horizontale keuzerondjes netjes 2 om 2 */
  .gform_wrapper .wkuv-radio-horizontaal .gfield_radio {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    justify-items: start;
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
  }
  /* Mobiel: alle formuliervelden volle breedte */
  .gform_wrapper .gfield.wkuv-span6,
  .gform_wrapper .gfield.wkuv-span5,
  .gform_wrapper .gfield.wkuv-span2 { grid-column: 1 / -1; }
  /* Behalve postcode + huisnummer in het hero-formulier: die blijven naast elkaar */
  #field_1_1, #field_1_2 { grid-column: span 6; }
}
.gform_wrapper input[type="number"] { appearance: textfield; }
.gform_wrapper input[type="number"]::-webkit-outer-spin-button,
.gform_wrapper input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }
/* Section-titel = kaarttitel uit het design */
.gform_wrapper .gsection_title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  transform: rotate(-0.4deg);
}
.wkuv-kaart-centreer .gsection_title { text-align: center; transform: none; }
.gform_wrapper .gsection_description { font-size: 17px; line-height: 23px; margin-top: 20px; }
/* Kaarten (na JS-wrap in main.js): kaart = eigen 12-koloms grid.
   .gform_wrapper-prefix nodig om de grid-regel hierboven te overrulen. */
.gform_wrapper .gform_fields--kaarten { display: flex; flex-direction: column; gap: 20px; }
.gform_wrapper .gform_fields--kaarten .form-card {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  width: auto;
}
.gform_wrapper .gform_fields--kaarten .aanvraag__rij { display: flex; gap: 20px; align-items: stretch; width: 100%; }
.gform_wrapper .gform_fields--kaarten .aanvraag__rij .form-card { flex: 1 1 0; min-width: 0; }
/* GF-variant van de formulierwrapper: vaste designbreedte */
.aanvraag__formulier--gf {
  width: min(1280px, calc(100vw - 2 * var(--container-pad)));
  align-items: stretch;
}
.aanvraag__formulier--gf .gform_wrapper { width: 100%; }
.gform_wrapper fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.gform_wrapper legend { padding: 0; }
/* Radiogroepen */
.gform_wrapper .gfield_radio { display: flex; gap: 14px 40px; }
.wkuv-radio-horizontaal .gfield_radio { justify-content: center; flex-wrap: wrap; }
.wkuv-radio-kolom .gfield_radio { flex-direction: column; gap: 30px; align-items: flex-start; }
.gform_wrapper .gchoice label { cursor: pointer; }
.wkuv-privacy .gfield_checkbox { display: flex; justify-content: center; }
.wkuv-divider { display: flex; justify-content: center; }
.wkuv-divider .form-card__divider { width: 568px; max-width: 100%; }
/* Foto-upload: intro links, dropzone rechts */
.gform_wrapper .gform_fields--kaarten .fotos-card {
  grid-template-columns: minmax(0, 393px) 1fr;
  gap: 40px;
  align-items: center;
}
.fotos-card .gfield--type-section { grid-column: 1; }
.fotos-card .wkuv-upload { grid-column: 2; }
.gform_wrapper .gform_drop_area {
  min-height: 293px;
  border: 1.2px dashed var(--c-beige);
  border-radius: 12px;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
.gform_wrapper .gform_drop_instructions { font-size: 15px; line-height: 20px; color: var(--c-zwart); }
.gform_wrapper .gform_button_select_files {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: 0 24px;
  border: 0;
  border-radius: 50px;
  background: var(--c-mid2-groen);
  color: var(--c-zwart);
  font: inherit;
  font-size: 17px;
  cursor: pointer;
}
.gform_wrapper .ginput_preview_list, .gform_wrapper .gform_fileupload_rules { font-size: 15px; line-height: 20px; }
/* Footer/knoppen */
.gform_wrapper .gform_footer { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.hero__form--gf .gform_wrapper .gform_footer { margin-top: 11px; }
.hero__form--gf .gform_wrapper .gform_footer .btn--form { width: 100%; }
.aanvraag .gform_wrapper .gform_footer { justify-content: space-between; }
.aanvraag .gform_wrapper .gform_footer .gform_button:only-child { margin-left: auto; }
.aanvraag .gform_wrapper { width: 100%; }
.gform_wrapper fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.gform_wrapper legend { padding: 0; }
/* Hero GF-variant: zelfde maat als statisch formulier */
.hero__form--gf { gap: 26px; }
.hero__form--gf .hero__form-fields { gap: 16px; }
.hero__form--gf .gform_wrapper .gform_fields { gap: 16px; }
/* Verborgen GF-elementen */
.gform_wrapper .gform_validation_container, .gform_wrapper .gform_anchor { display: none !important; }
.gform_wrapper .gfield_required { display: none; }
@media (max-width: 980px) {
  .gform_wrapper .gform_fields--kaarten .aanvraag__rij { flex-direction: column; }
  .gform_wrapper .gform_fields--kaarten .fotos-card { grid-template-columns: 1fr; gap: 24px; }
  .fotos-card .wkuv-upload { grid-column: 1; }
  .gform_wrapper .gform_drop_area { min-height: 160px; }
  .wkuv-radio-kolom .gfield_radio { gap: 14px; }
  .aanvraag .gform_wrapper .gform_footer { flex-direction: column; align-items: stretch; }
  .aanvraag .gform_wrapper .gform_footer .btn { justify-content: center; }
}