/**
 * EnergyLabel24 Main Stylesheet
 *
 * Design system tokens, base styles, and component styles.
 *
 * @package EnergyLabel24
 * @since 0.1.0
 */

/* ==========================================================================
   Web font (self-hosted)
   --------------------------------------------------------------------------
   Manrope as one variable woff2 (weights 400–800, latin subset), served from
   this theme instead of Google Fonts: no third-party request on the critical
   path, and the file is preloaded from functions.php (el24_preload_fonts).
   font-display: swap paints text in the fallback immediately and swaps once
   the font has arrived.
   ========================================================================== */

/* optional in plaats van swap (keuze Botan, 21-9-2026): de browser wisselt
 * halverwege niet meer van lettertype, dus er verspringt ook geen letter meer.
 * Manrope wordt in wp_head al voorgeladen (el24_preload_fonts), dus in de
 * praktijk is hij op tijd binnen; alleen op een echt trage verbinding ziet een
 * bezoeker die eerste keer de noodfont, en vanaf het tweede bezoek Manrope. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* De noodfont voor de seconde voordat Manrope binnen is.
 *
 * Manrope is hoger dan Arial: stijglijn 1,066em en daallijn 0,300em tegen
 * 1,120em en 0,212em. Bij een vaste regelhoogte betekent dat een ander
 * midden, dus de letters stonden vijf pixels lager en sprongen omhoog zodra
 * Manrope binnen was, terwijl het blok zelf niet van hoogte veranderde. Dat is
 * precies het verspringen dat je ziet. De drie overrides hieronder zijn uit
 * Manrope zelf gemeten (stijglijn 1066, daallijn 300 per 1000 eenheden) en
 * geven Arial hetzelfde midden, zodat de tekst op dezelfde plek blijft staan.
 * size-adjust staat er bewust niet bij: Arial is al even breed als Manrope
 * (afwijking onder de anderhalf procent over een hele zin), en een verkeerde
 * correctie zou de regelval juist opnieuw laten verspringen.
 *
 * Is Arial er niet (Android), dan mislukt deze regel en pakt de browser de
 * volgende naam uit --font-sans, net als voorheen. */
@font-face {
  font-family: "Manrope Fallback";
  font-style: normal;
  font-weight: 400 500;
  src: local("Arial");
  ascent-override: 106.6%;
  descent-override: 30%;
  line-gap-override: 0%;
}

/* Twee gezichten, niet één. Manrope is een variabele font van 400 tot 800,
 * Arial is dat niet. Eén regel voor 400 t/m 800 laat de browser ook koppen in
 * Arial Regular zetten; die is zeven procent smaller dan Arial Bold, waardoor
 * de H1 van een stadspagina op twee regels paste en na het inladen van Manrope
 * op drie. Met een eigen regel voor de vette gewichten is de regelval meteen
 * goed. */
@font-face {
  font-family: "Manrope Fallback";
  font-style: normal;
  font-weight: 600 800;
  src: local("Arial-BoldMT"), local("Arial Bold");
  ascent-override: 106.6%;
  descent-override: 30%;
  line-gap-override: 0%;
}

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   Updated per design/frontend/README.md specs
   ========================================================================== */

:root {
  /* Brand Colors */
  --color-main: #06a651;
  --color-main-dark: #059142;
  /* Text-safe green (5.5:1 on white): links, labels and every button that
     carries white text. #06a651 (--color-main) stays for large headings
     (24px and up), icons and decorative fills, where contrast is not the
     limiting factor. */
  --color-main-text: #047a3c;
  --color-main-text-dark: #03602f;
  --color-second: #bed62e;
  --color-black: #202c3f;
  --color-white: #ffffff;
  /* Placeholdergrijs. #898c97 mat 3,02:1 op de veldvulling #f3f3f3 en 3,35:1
     op wit — te licht, en in het hero-formulier is de placeholder de enige
     veldnaam. #686b77 houdt dezelfde blauwgrijze tint en meet 4,78:1 op
     #f3f3f3, 4,91:1 op #f6f6f6 en 5,31:1 op wit. */
  --color-dark-grey: #686b77;
  --color-grey: #f3f3f3;
  --color-grey-2: #e8ebf3;
  --color-light-grey: #f6f6f6;
  --color-light-green: #f0f8f1;
  --color-dark-green: #0a392c;
  --color-blue: #0088ff;
  --color-yellow: #ffcc00;

  /* Legacy Colors (mapped to new) */
  --color-primary: var(--color-main);
  --color-primary-dark: var(--color-main-dark);
  --color-secondary: var(--color-second);
  --color-text: var(--color-black);
  /* Muted text is #4b5563 (7.5:1 on white). #898c97 stays a brand tint for
     placeholders and icons only; it fails WCAG AA for running text. */
  --color-text-muted: var(--color-text-strong);
  --color-text-light: var(--color-text-strong);
  --color-bg: #ffffff;
  --color-bg-alt: #f9fafb;
  --color-border: var(--color-grey);
  --color-success: var(--color-main);
  --color-success-bg: #d1fae5;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  /* Neutrals / accents used by the advisor profile widget */
  --color-bg-soft: #fafafa;
  --color-text-body: #666666;
  --color-text-secondary: #6b7280;
  --color-text-strong: #4b5563;
  --color-disabled: #9ca3af;
  --color-grey-3: #e5e7eb;
  --color-grey-4: #f3f4f6;
  --color-lime: #c4ff61;
  --color-warning-soft-bg: #fff8e6;
  --color-warning-soft-border: #ffe7a3;

  /* Typography */
  /* Arial en Helvetica staan voor system-ui, niet erachter. Manrope blijft de
     eerste keuze; deze volgorde bepaalt alleen wat er staat in de fractie van
     een seconde voordat Manrope binnen is (font-display: swap). Gemeten op de
     eigen teksten: Arial is 0,3 tot 1,4 procent breder of smaller dan Manrope,
     system-ui (SF Pro, Segoe UI) is 3 tot 10 procent smaller. Daardoor paste de
     H1 van een stads- of gidspagina eerst op twee regels en na het inladen van
     Manrope op drie, en schoof de hele pagina 59 pixels omlaag. Met Arial ervoor
     is de regelval meteen goed en verspringt er niets. */
  --font-sans:
    "Manrope", "Manrope Fallback", Arial, "Helvetica Neue", Helvetica,
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  /* Stijlplan 2026-09: running text is 17px (16px on a phone), every step
     above and below it moved up one notch with it. --font-size-base and
     --font-size-md are the same thing as --text-size; they only survive as
     names because hundreds of rules read them. */
  --font-size-base: var(--text-size);
  --font-size-xs: 13px;
  --font-size-sm: 14px;
  /* Small running text (captions, meta, breadcrumb, notes, footer links).
     14px (--font-size-sm) stays for UI chrome only: chips, badges, hints. */
  --text-sm: 16px;
  --font-size-md: var(--text-size);
  --font-size-lg: 20px;
  --font-size-xl: 22px;
  --font-size-2xl: 26px;
  --font-size-3xl: 34px;
  --font-size-4xl: 40px;
  --line-height-base: 1.6;
  --line-height-tight: 1.2;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Spacing Scale (4px base).
     De schaal heette al "4px base" maar begon met 5/10/10/15: geen van die
     vier is een veelvoud van 4, en 2 en 3 waren allebei 10px, dus de ladder
     had een dode trede en miste een stap tussen 10 en 20. Gemeten over de zes
     pagina's op 390/768/1440px kwam 10px 2045x en 15px 1321x voor als
     berekende spacing. Nu 4/8/12/16, zodat de trede tussen 8 en 20 bestaat en
     de gebruikers ervan (119 groepen) in een keer op het raster schuiven,
     zonder een enkele selector aan te raken. Vanaf --space-5 stond de schaal
     al goed. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Borders & Shadows */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 50%;
  /* Component radii: buttons 8, form fields 10, cards 12, pills 999. */
  --radius-btn: 8px;
  --radius-field: 10px;
  --radius-card: 12px;
  --radius-pill: 999px;
  /* Schaduwen. Er stonden 17 verschillende handgeschreven waarden in dit
     bestand, alle eenlaags, in vijf kleurfamilies: rgba(0,0,0), rgba(10,57,44),
     rgba(32,44,63), rgba(6,166,81) en rgba(14,66,52). Eenlaags leest als een
     vlek en vijf tinten leest als vijf sites. Nu drie trappen, elk tweelaags
     (korte contactlaag + zachte diffuse laag) in een merktint rgba(10,57,44):
     soft voor kleine zwevende bedieningselementen (navpijlen, zoomknop,
     ribbon), card voor kaarten en panelen, raised voor het hoogste vlak
     (hero-formulier, modal). De diffuse laag van card en raised is precies de
     waarde die al op .step-mock__card en .hero-form stond, zodat de hero
     onveranderd oogt. */
  --shadow-soft: 0 1px 2px rgba(10, 57, 44, 0.06), 0 4px 12px rgba(10, 57, 44, 0.07);
  --shadow-card: 0 1px 2px rgba(10, 57, 44, 0.06), 0 10px 26px rgba(10, 57, 44, 0.08);
  --shadow-raised: 0 2px 4px rgba(10, 57, 44, 0.06), 0 18px 44px rgba(10, 57, 44, 0.1);
  /* De oude namen blijven bestaan als alias, zodat de negen var(--shadow-*)-
     verwijzingen elders in het bestand niet hoeven te veranderen. */
  --shadow-sm: var(--shadow-soft);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-raised);

  /* Container (stijlplan): 1320px from a 1440px viewport, 1240px between
     1280 and 1439px (see the media query below), and the full width minus
     the gutter under 1280px. The header, hero and every full-width section
     share this one column; there is no separate header column any more. */
  --container-max: 1320px;
  /* Reading column for long text (legal, guides, city and province pages).
     Botan (9 Sept 2026): "nearly full width" — 1100px inside the 1320px
     column, ~110 characters at 17px. */
  --container-reading: 1100px;
  /* Hero column: title, chips and the search-form card on home, city pages
     Widened from 720px on the same request. */
  --container-hero: 880px;
  /* Hero top padding on phones (exception to --section-y, see .hero). */
  --hero-y-mobile: 20px;
  /* Gutter: 16px on a phone, 24px from 768px up. */
  --container-padding: 16px;

  /* Design canon (typography), stijlplan 2026-09: large and bold. Every
     heading rule in this file reads these tokens; the mobile values are
     swapped in below 768px by redefining the base token, so no per-component
     media query is needed for sizing. Manrope ships weights 400-800, so 800
     is the heaviest weight on the site. */
  --text-size: 18px;
  --text-size-mobile: 17px;
  --text-lh: 1.6;
  /* Running text is medium, not regular: the Dutch comparison sites we
     benchmark against (Humbird, Zorgwijzer, Energievergelijk) all set body
     copy at 500, which is what makes them read as "bold and clear". */
  --text-weight: 500;
  /* Lead: the intro paragraph under a page title, one step above body. */
  --lead-size: 21px;
  --lead-size-mobile: 18px;
  --h1-size: 54px;
  --h1-size-mobile: 38px;
  --h1-lh: 1.1;
  --h1-weight: 800;
  /* The home hero is the one heading allowed above the page-title size. */
  --h1-hero-size: 68px;
  --h1-hero-size-mobile: 42px;
  --h1-hero-lh: 1.05;
  --h1-hero-ls: -0.02em;
  --h2-size: 36px;
  --h2-size-mobile: 30px;
  --h2-lh: 1.2;
  --h3-size: 24px;
  --h3-size-mobile: 22px;
  --h3-lh: 1.3;
  --h4-size: 20px;
  --heading-weight: 800;
  /* Card titles (advisor, value, why, search result): between H4 and H3. */
  --card-title-size: 22px;
  --eyebrow-size: 13px;
  --eyebrow-ls: 0.12em;
  /* Desktop menu labels; the header budget block at the end of this file
     is the only reader. */
  --nav-font: 15px;

  /* Design canon (rhythm). 88px between main sections on desktop, 56px on
     mobile; 24px between a heading and the text below it. --section-y itself
     switches to the mobile value below 768px. */
  --section-y: 88px;
  /* The hero is the one section that does not carry --section-y on desktop.
     With 88px above the headline the form card ended below the fold on a
     laptop (9 September 2026). Documented in docs/stijlplan.md and asserted
     in design-canon.spec.ts. */
  --hero-y-top: 40px;
  --hero-y-bottom: 64px;
  --section-y-mobile: 56px;
  --stack: 24px;

  /* Component canon: one primary button (56px, 18px/800), one secondary
     button (48px), one field (56px, body size), one card (12px radius,
     1px #e8ebf3 border, 28px padding). */
  --btn-height: 56px;
  --btn-height-sm: 48px;
  --btn-font: 18px;
  --btn-weight: 800;
  --field-height: 56px;
  --field-font: var(--text-size);
  --field-bg: var(--color-grey);
  --field-border: 1px solid var(--color-grey-2);
  --card-border: 1px solid var(--color-grey-2);
  --card-pad: 28px;

  /* Aliases that older rules reference; defined here so nothing renders
     transparent or black by accident. */
  --color-bg-muted: var(--color-light-grey);
  --color-error: var(--color-danger);
}

/* Canon mobile values (< 768px). */
@media (max-width: 767px) {
  :root {
    --text-size: var(--text-size-mobile);
    --lead-size: var(--lead-size-mobile);
    --h1-size: var(--h1-size-mobile);
    --h1-hero-size: var(--h1-hero-size-mobile);
    --h1-hero-lh: var(--h1-lh);
    --h2-size: var(--h2-size-mobile);
    --h3-size: var(--h3-size-mobile);
    --section-y: var(--section-y-mobile);
  }
}

/* Container steps: 1240px between 1280 and 1439px; under 1280px the column
   is the viewport minus the gutter, which the max-width no longer reaches. */
@media (max-width: 1439px) {
  :root {
    --container-max: 1240px;
  }
}

/* Breakpoint reference (CSS doesn't support custom properties in media queries):
   sm: 640px
   md: 768px
   lg: 1024px
   xl: 1280px
   2xl: 1536px
*/

/* ==========================================================================
   Reset / Normalize
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-size);
  font-weight: var(--text-weight);
  line-height: var(--text-lh);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Advisor profile page (/adviseur/{slug}) uses a soft grey body background. */
body.advisor-profile-body {
  background-color: #fafafa;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

/* ==========================================================================
   Base Typography
   ========================================================================== */

/* Canon (stijlplan 2026-09): H1 48/800/1.1 (36 mobile), hero H1 60/800/1.05
   (40), H2 34/800/1.2 (28), H3 22/800/1.3 (20), H4 18/800. Template classes
   below (.hero__title, .legal-section h2, ...) read the same tokens, so one
   page renders one scale. */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-height-tight);
  font-weight: var(--heading-weight);
  color: var(--color-text);
}

h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: var(--h1-weight);
  margin-bottom: var(--stack);
}

h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  margin-bottom: var(--stack);
}

h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  margin-bottom: var(--space-4);
}

h4 {
  font-size: var(--h4-size);
  line-height: var(--h3-lh);
  margin-bottom: var(--space-3);
}

/* Eyebrow / label: the short uppercase lead-in above a heading. */
.eyebrow {
  display: inline-block;
  font-size: var(--eyebrow-size);
  font-weight: var(--heading-weight);
  line-height: 1.3;
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  /* Was var(--color-primary) = #06a651: gemeten 2,88:1 op #f3f3f3, 2,95:1 op
     #f6f6f6 en 3,19:1 op wit bij 13px/800 — onder de 4,5:1. De canon reserveert
     #06a651 voor vlakken, iconen en koppen vanaf 24px; een 13px-label hoort op
     de tekstgroen. Nu 4,91 / 5,04 / 5,45:1. */
  color: var(--color-main-text);
}

h5 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2);
}

h6 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-2);
}

p {
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

/* One link colour on the site: the text-safe green, semibold. Editor global
   styles (theme.json) point at the same token, so a link in stored content
   and a link in a template render alike. */
a {
  color: var(--color-main-text);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--color-main-text-dark);
  text-decoration: underline;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* --------------------------------------------------------------------------
   Chamfer utilities — slice corners at 45° with a gradient mask.
   Reused across the site (step cards, value cards, summary bar, FAQ box, …).

   Usage:  add a chamfer-* class and set --chamfer for the cut size
           (defaults to 24px). Pair with border-radius for the corners you
           leave un-chamfered. Cuts to transparency, so it works on any
           background. Per-instance size: style="--chamfer:40px" or set
           --chamfer in the component's own rule.

     .chamfer-tlbr  top-left + bottom-right   (main diagonal)
     .chamfer-trbl  top-right + bottom-left   (anti-diagonal)
     .chamfer-tl / -tr / -bl / -br            single corner
   -------------------------------------------------------------------------- */
.chamfer-tlbr {
  -webkit-mask: linear-gradient(135deg, transparent 0 var(--chamfer, 24px), #000 var(--chamfer, 24px), #000 calc(100% - var(--chamfer, 24px)), transparent calc(100% - var(--chamfer, 24px)));
          mask: linear-gradient(135deg, transparent 0 var(--chamfer, 24px), #000 var(--chamfer, 24px), #000 calc(100% - var(--chamfer, 24px)), transparent calc(100% - var(--chamfer, 24px)));
}

.chamfer-trbl {
  -webkit-mask: linear-gradient(45deg, transparent 0 var(--chamfer, 24px), #000 var(--chamfer, 24px), #000 calc(100% - var(--chamfer, 24px)), transparent calc(100% - var(--chamfer, 24px)));
          mask: linear-gradient(45deg, transparent 0 var(--chamfer, 24px), #000 var(--chamfer, 24px), #000 calc(100% - var(--chamfer, 24px)), transparent calc(100% - var(--chamfer, 24px)));
}

.chamfer-tl {
  -webkit-mask: linear-gradient(135deg, transparent 0 var(--chamfer, 24px), #000 var(--chamfer, 24px));
          mask: linear-gradient(135deg, transparent 0 var(--chamfer, 24px), #000 var(--chamfer, 24px));
}

.chamfer-br {
  -webkit-mask: linear-gradient(315deg, transparent 0 var(--chamfer, 24px), #000 var(--chamfer, 24px));
          mask: linear-gradient(315deg, transparent 0 var(--chamfer, 24px), #000 var(--chamfer, 24px));
}

.chamfer-bl {
  -webkit-mask: linear-gradient(45deg, transparent 0 var(--chamfer, 24px), #000 var(--chamfer, 24px));
          mask: linear-gradient(45deg, transparent 0 var(--chamfer, 24px), #000 var(--chamfer, 24px));
}

.chamfer-tr {
  -webkit-mask: linear-gradient(225deg, transparent 0 var(--chamfer, 24px), #000 var(--chamfer, 24px));
          mask: linear-gradient(225deg, transparent 0 var(--chamfer, 24px), #000 var(--chamfer, 24px));
}

.container {
  width: 100%;
  max-width: var(--container-max) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: fixed;
  top: 5px;
  left: 5px;
  z-index: 100000;
  display: block;
  width: auto;
  height: auto;
  padding: var(--space-4);
  clip: auto;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* Alpine.js cloak - hide elements until Alpine initializes */
[x-cloak] {
  display: none !important;
}

/* ==========================================================================
   Button Component
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-height);
  padding: 0 var(--space-8);
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--primary {
  color: #ffffff;
  background-color: var(--color-main-text);
  border-color: var(--color-main-text);
}

.btn--primary:hover,
.btn--primary:focus {
  color: #ffffff;
  background-color: var(--color-main-text-dark);
  border-color: var(--color-main-text-dark);
  text-decoration: none;
}


/* Secondary buttons: 48px, body size, still 800. */
.btn--ghost {
  min-height: var(--btn-height-sm);
  padding: 0 var(--space-6);
  font-size: var(--text-size);
  color: var(--color-text);
  background-color: transparent;
  border-color: var(--color-grey-2);
}

.btn--ghost:hover,
.btn--ghost:focus {
  color: var(--color-text);
  background-color: var(--color-bg-alt);
  border-color: var(--color-text-muted);
  text-decoration: none;
}


/* ==========================================================================
   Card Component
   ========================================================================== */

.card {
  background-color: var(--color-bg);
  border: var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card__header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-alt);
}

.card__title {
  margin-bottom: 0;
  font-size: var(--card-title-size);
  font-weight: var(--heading-weight);
  line-height: var(--h3-lh);
}

.card__body {
  padding: var(--space-6);
}

.card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-alt);
}

/* ==========================================================================
   Top Bar (Trust Badges)
   ========================================================================== */

.top-bar {
  background-color: var(--color-dark-green);
  color: #ffffff;
  padding: 6px 0;
  font-size: var(--font-size-sm);
}

.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.top-bar__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.top-bar__avatars {
  display: flex;
  align-items: center;
}

.top-bar__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-dark-green);
  margin-left: -8px;
  object-fit: cover;
  background-color: #ffffff;
}

.top-bar__avatar:first-child {
  margin-left: 0;
}

.top-bar__text {
  font-weight: var(--font-weight-medium);
}

.top-bar__count {
  color: var(--color-second);
  font-weight: 700;
}

.top-bar__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.top-bar__google-icon {
  width: 20px;
  height: 20px;
}

.top-bar__review-label {
  font-weight: var(--font-weight-semibold);
}

.top-bar__stars {
  display: flex;
  gap: 1px;
}

.top-bar__star {
  color: var(--color-yellow);
  font-size: var(--text-sm);
  line-height: 1;
}

/* Empty / half states for a dynamic platform rating */
.top-bar__star--empty {
  color: rgba(255, 255, 255, 0.35);
}
.top-bar__star--half {
  background: linear-gradient(
    90deg,
    var(--color-yellow) 50%,
    rgba(255, 255, 255, 0.35) 50%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.top-bar__rating {
  font-weight: var(--font-weight-bold);
}

.top-bar__review-count {
  opacity: 0.9;
}

/* Mobile: Hide some elements on small screens */
@media (max-width: 639px) {
  .top-bar__avatars {
    display: none;
  }

  .top-bar__review-label,
  .top-bar__review-count {
    display: none;
  }

  .top-bar__inner {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .top-bar__left,
  .top-bar__right {
    gap: var(--space-2);
  }
}

/* Tablet: Show most elements */
@media (min-width: 640px) and (max-width: 767px) {
  .top-bar__review-count {
    display: none;
  }
}


.hamburger-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 18px;
}

.hamburger-icon span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  /* 1px op een balk van 2px hoog is een volle pil; met het pil-token rendert
     hij identiek en staat er geen zestiende waarde in de telling. */
  border-radius: var(--radius-pill);
  transition: all 0.3s ease;
}

.hamburger-icon span:nth-child(1) {
  top: 0;
}

.hamburger-icon span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger-icon span:nth-child(3) {
  bottom: 0;
}

.hamburger-icon.is-active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.hamburger-icon.is-active span:nth-child(2) {
  opacity: 0;
}

.hamburger-icon.is-active span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* ==========================================================================
   Site Footer
   ========================================================================== */

.site-footer {
  margin-top: auto;
}

/* "Terug naar boven" boven de footer (12-9-2026): gecentreerd, haarlijn
   eronder binnen de contentkolom. De pijl schuift bij hover een tikje omhoog. */
.back-to-top {
  background-color: #ffffff;
}

.back-to-top .container {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  text-align: center;
}

.back-to-top__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-decoration: none;
}

.back-to-top__link svg {
  transition: transform 0.18s ease;
}

.back-to-top__link:hover,
.back-to-top__link:focus-visible {
  color: var(--color-main-text);
  text-decoration: none;
}

.back-to-top__link:hover svg,
.back-to-top__link:focus-visible svg {
  transform: translateY(-3px);
}

.back-to-top + .footer-main {
  border-top: 1px solid var(--color-grey-2);
}

/* Footer Main */
.footer-main {
  padding: var(--section-y) 0;
}

.footer-grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-10);
  }
}


/* Footer Widget Title */
.footer-widget__title {
  /* Een h2 sinds 12-9-2026 (was h4: een sprong in de kopvolgorde na de
     laatste h2 of h1 van de pagina); dezelfde maat en regelhoogte als eerst. */
  font-size: var(--h4-size);
  line-height: var(--h3-lh);
  font-weight: var(--heading-weight);
  color: var(--color-black);
  margin-bottom: var(--space-4);
}

/* Footer Links */
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: 0;
}

.footer-links a {
  display: inline-block;
  padding: 9px 0;
  line-height: 1.7;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-main-text);
  text-decoration: none;
}

/*
 * Navigation Menu widget parity.
 * When a footer column is filled with a "Navigation Menu" widget, WordPress
 * outputs <ul class="menu"> (inside a .menu-*-container) instead of the
 * fallback's <ul class="footer-links">. Mirror the link styling here so the
 * widget-driven footer matches the hardcoded fallback design (no bullets,
 * correct color, spacing).
 */
.footer-col .menu,
.footer-col .menu-container ul,
.footer-col [class*="menu-"] ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col .menu li {
  margin-bottom: 0;
}

.footer-col .menu a {
  display: inline-block;
  padding: 9px 0;
  line-height: 1.7;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-col .menu a:hover {
  color: var(--color-main-text);
  text-decoration: none;
}

/* Footer Contact */
.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* 44px, net als elk ander tapdoel; de regel was 40px en de link erbinnen
     maar 25,6px hoog. */
  min-height: 44px;
  margin-bottom: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
}

.footer-contact__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.footer-contact a {
  /* De link vult de regel, zodat het raakvlak de volle 44px is en niet
     alleen de tekstregel van 25,6px. */
  display: flex;
  align-items: center;
  align-self: stretch;
  color: var(--color-black);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contact a:hover {
  color: var(--color-main-text);
  text-decoration: none;
}

/* Advisor strip.
   A slim professional band between the sitemap and the legal line: the two
   advisor actions moved out of the header. Hairline rule, no card, no fill —
   the buttons carry the emphasis and the primary one is the smaller 48px
   variant so it never competes with the page's own CTA. */
/* Dezelfde keuze als bij het hulpblok: de haarlijn volgt de contentkolom. */
.footer-pro {
  padding: 0;
}

.footer-pro .container {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  border-top: 1px solid var(--color-grey-2);
}

.footer-pro__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .footer-pro__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
  }
}

.footer-pro__title {
  margin: 0;
  font-size: var(--text-size);
  font-weight: var(--heading-weight);
  color: var(--color-black);
  line-height: 1.4;
}

.footer-pro__sub {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  font-weight: var(--text-weight);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.footer-pro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  width: 100%;
}

@media (min-width: 768px) {
  .footer-pro__actions {
    width: auto;
    flex-shrink: 0;
  }
}

/* The style plan allows one button size; .btn--ghost's 48px variant would
   have made the pair uneven and the design-canon test rejects a primary
   button that is not --btn-height. Both take the canonical size. */
.footer-pro__btn {
  flex: 1 1 auto;
  min-height: var(--btn-height);
  padding: 0 var(--space-6);
  font-size: var(--btn-font);
}

@media (min-width: 768px) {
  .footer-pro__btn {
    flex: 0 0 auto;
  }
}


/* Eén regel (12-9-2026): bedrijfsregel links, juridisch menu rechts; op een
   telefoon stapelt het, links uitgelijnd op de paginagutter. */
.footer-bottom__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  text-align: left;
}

.footer-copyright p {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
  color: var(--color-text-strong);
}

/* Footer Legal Menu */
.footer-legal__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .footer-legal__menu {
    justify-content: flex-end;
  }
}

.footer-legal__menu li {
  display: flex;
  align-items: center;
}

.footer-legal__menu li:not(:last-child)::after {
  content: "\00B7";
  margin-left: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: 1;
  color: var(--color-text-strong);
}

.footer-legal__menu a {
  display: inline-block;
  padding: 6px 0;
  line-height: 1.6;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal__menu a:hover {
  color: var(--color-main-text);
  text-decoration: none;
}

/* Op een telefoon past de rij niet op één regel: dan geen scheidingstekens
   (die blijven anders aan het eind van de regel hangen) en strakke rijen. */
@media (max-width: 599px) {
  .footer-legal__menu {
    gap: 0 var(--space-4);
  }

  .footer-legal__menu li:not(:last-child)::after {
    display: none;
  }

  .footer-legal__menu a {
    padding: 4px 0;
  }
}

/* ==========================================================================
   Site Main Content
   ========================================================================== */

.site-main {
  /* Every page type closes with its own --section-y; nothing is added here. */
  padding-bottom: 0;
}

/* Comparison page has no top padding */
.comparison-page .site-main,
.site-main.comparison-page {
  padding-top: 0;
}


body.el24-menu-open {
  overflow: hidden;
}


/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Mobile (default - mobile-first) */

/* Tablet and up (md: 768px) */
@media (min-width: 768px) {
  :root {
    --container-padding: 24px;
  }


}

/* Desktop nav breakpoint (lg: 1024px) */

/* Large Desktop (xl: 1280px) */

/* Extra Large (2xl: 1536px) */
@media (min-width: 1536px) {
  /* Container width is now controlled via Customizer */
}

/* ==========================================================================
   Page Templates — Component Styles (Module 4.3)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section Title (shared)
   -------------------------------------------------------------------------- */

.section-title {
  text-align: center;
  margin-bottom: var(--space-10);
}

/* --------------------------------------------------------------------------
   Page header (shared) — breadcrumb → [eyebrow] → H1 → intro
   --------------------------------------------------------------------------
   Every page that is not the home page opens the same way. The per-template
   header classes below are aliases of .page-header so stored block content
   keeps working; they carry no layout of their own any more. */

.page-header,
.about-hero__header,
.faq-hero__header,
.contact-page__header,
.ce-header,
.legal-page__header,
.comparison-page__header,
.advisor-register__header,
.advisors-page__header,
.request-form-page__header,
.search-page__header {
  max-width: var(--container-reading);
  margin: var(--space-6) auto var(--space-12);
  padding: 0;
  text-align: center;
}

:is(.page-header, .about-hero__header, .faq-hero__header, .contact-page__header,
    .ce-header, .legal-page__header, .comparison-page__header,
    .advisor-register__header, .advisors-page__header,
    .request-form-page__header, .search-page__header) h1 {
  margin: 0 0 var(--space-4);
}

:is(.page-header, .about-hero__header, .faq-hero__header, .contact-page__header,
    .ce-header, .legal-page__header, .comparison-page__header,
    .advisor-register__header, .advisors-page__header,
    .request-form-page__header, .search-page__header) .eyebrow {
  margin-bottom: var(--space-3);
}

:is(.page-header, .about-hero__header, .faq-hero__header, .contact-page__header,
    .ce-header, .legal-page__header, .comparison-page__header,
    .advisor-register__header, .advisors-page__header,
    .request-form-page__header, .search-page__header) > p {
  max-width: 66ch;
  margin: 0 auto;
  font-size: var(--lead-size);
  line-height: 1.5;
  color: var(--color-text);
}

:is(.page-header, .about-hero__header, .faq-hero__header, .contact-page__header,
    .ce-header, .legal-page__header, .comparison-page__header,
    .advisor-register__header, .advisors-page__header,
    .request-form-page__header, .search-page__header) > p + p {
  margin-top: var(--space-2);
}

@media (max-width: 767px) {
  .page-header,
  .about-hero__header,
  .faq-hero__header,
  .contact-page__header,
  .ce-header,
  .legal-page__header,
  .comparison-page__header,
  .advisor-register__header,
  .advisors-page__header,
  .request-form-page__header,
  .search-page__header {
    margin-bottom: var(--space-8);
  }
}

/* Reading column: guide, city and legal text sits in an 880px column even
   though the page container is 1320px wide, so lines stay under ~80
   characters. Full-width blocks (comparison widget, advisor grids) opt out
   with .is-wide. */
.content-page .legal-section,
.about-page .legal-section,
.comparison-page .legal-section,
.advisor-register-page .legal-section,
.faq-page .faq-more,
.legal-section:not(.is-wide) {
  max-width: var(--container-reading);
  margin-left: auto;
  margin-right: auto;
}

/* Images inside text: rounded like a card, never wider than the column. */
.legal-section .wp-block-image img {
  height: auto;
  border-radius: var(--radius-card);
}

/* Pages that are rendered by a widget or the loop still close on the
   section rhythm. */
.advisor-profile-page-wrap,
.search-page,
.request-form-page {
  padding-bottom: var(--section-y);
}

.search-page__results {
  max-width: var(--container-reading);
  margin: 0 auto;
  display: grid;
  gap: var(--space-4);
}

.search-page__result {
  padding: var(--card-pad);
  background-color: var(--color-white);
  border: var(--card-border);
  border-radius: var(--radius-card);
}

.search-page__result h2 {
  font-size: var(--card-title-size);
  line-height: var(--h3-lh);
  margin-bottom: var(--space-2);
}

.search-page__result p {
  margin: 0;
  color: var(--color-text-strong);
}

.search-page__form {
  max-width: 560px;
  margin: 0 auto var(--space-10);
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: var(--section-y) 0;
  background-color: #ffffff;
  overflow: hidden;
  min-height: 500px;
}

/* Title, chips and the form card share one hero column (--container-hero). */
.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-hero, 880px);
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--space-4);
}

/* Hero Shape Images (PNG) */
.hero__shape-img {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  width: 180px;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.hero__shape-img--left {
  left: 0;
}

.hero__shape-img--right {
  right: 0;
}

@media (max-width: 1439px) {
  .hero__shape-img {
    width: 150px;
  }
}

@media (max-width: 1279px) {
  .hero__shape-img {
    width: 120px;
  }
}

@media (max-width: 1023px) {
  .hero__shape-img {
    width: 100px;
    opacity: 0.8;
  }
}

@media (max-width: 767px) {
  .hero__shape-img {
    display: none;
  }
}

/* Logo Icons Group — the former "vs" placeholder oval. Its block output is
   replaced by the A–G ribbon at render time (inc/render-fixes.php); this
   rule is the belt to those braces, so the oval can never show again even
   if the filter is removed. The block stays in the page content. */
.hero__logos {
  display: none;
}


.hero__logo-item {
  width: 42px;
  height: 42px;
  background-color: #ffffff;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.hero__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* De ouder is rond met overflow:hidden, dus deze 4px was nooit zichtbaar en
     telde alleen mee als losse radiuswaarde. Volgt nu de ouder. */
  border-radius: var(--radius-full);
}

.hero__logo-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0 -12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-second);
  background-color: var(--color-dark-green);
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

/* Hero Title */
.hero__title {
  font-size: var(--h1-hero-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-hero-ls);
  color: var(--color-black);
  line-height: var(--h1-hero-lh);
  margin-bottom: var(--stack);
}

.hero__title-highlight {
  color: var(--color-main);
}

/* Trust Badges */
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

/* The hero column is 720px wide; the Dutch badge labels are longer than the
   English ones and would wrap onto a second row inside it. On desktop, let the
   row grow to its natural width and centre it over the column, so all three
   badges stay on one line in every language. Mobile keeps the original wrap.
   Deliberately NOT a transform: transforms on layout are what the scroll-reveal
   system overwrites (see .summary-records), and auto margins can't collide. */
@media (min-width: 768px) {
  .hero__badges {
    flex-wrap: nowrap;
    width: max-content;
    max-width: calc(100vw - 32px);
    margin-right: auto;
    margin-left: auto;
  }
}

.hero__badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-main-text);
  background-color: transparent;
  border: 2px solid var(--color-main-text);
  border-radius: 28px;
  transition: all 0.2s ease;
}

.hero__badge:hover {
  background-color: rgba(6, 166, 81, 0.05);
}

.hero__badge-icon {
  width: 18px;
  height: 18px;
  /* Filter to make icon green (#06A651) */
  filter: brightness(0) saturate(100%) invert(48%) sepia(89%) saturate(402%)
    hue-rotate(107deg) brightness(95%) contrast(94%);
}

/* Hero Subtitle: the lead size, semibold. */
.hero__subtitle {
  font-size: var(--lead-size);
  line-height: 1.5;
  color: var(--color-text);
  margin-bottom: var(--space-5);
  font-weight: var(--font-weight-semibold);
}

/* Hero Form */
.hero-form {
  margin: 0 auto;
}

.hero-form__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (max-width: 479px) {
  .hero-form__inputs {
    grid-template-columns: 1fr;
  }
}

.hero-form__group {
  position: relative;
}

/* Zichtbaar veldlabel in het hero-formulier.
   Was fout: postcode, huisnummer en type woning hadden 0 <label>-elementen
   (gemeten op de gerenderde DOM); de placeholder was de enige veldnaam en
   verdween zodra de bezoeker typte. Typografie komt uit de bestaande
   .form-label (16px/700, --color-black), net als op /contact/. Alleen
   display+marge zijn hier nodig: .hero-form__group is position:relative,
   geen flexkolom zoals .form-group, dus het label krijgt zelf zijn
   regelafstand van 8px (--space-2). */
.hero-form__label {
  display: block;
  margin-bottom: var(--space-2);
}

.hero-form__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.hero-form__icon {
  position: absolute;
  left: 16px;
  width: 20px;
  height: 20px;
  pointer-events: none;
  /* Filter to make icon dark grey (#898C97) */
  /* filter: brightness(0) saturate(100%) invert(60%) sepia(5%) saturate(500%) hue-rotate(195deg) brightness(90%) contrast(90%); */
}

.hero-form__input {
  width: 100%;
  padding: 14px 16px 14px 48px;
  font-size: var(--field-font);
  color: var(--color-black);
  background-color: var(--field-bg);
  border: var(--field-border);
  border-radius: var(--radius-field);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  min-height: var(--field-height);
  line-height: 1.5;
}

.hero-form__input::placeholder {
  color: var(--color-dark-grey);
}

.hero-form__input:focus {
  outline: none;
  border-color: var(--color-main);
  box-shadow: 0 0 0 3px rgba(6, 166, 81, 0.1);
  background-color: #ffffff;
}

.hero-form__input.has-error {
  border-color: var(--color-danger);
}


.hero-form__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  /* Same box as text inputs; chevron drawn on the right. Background set
     EXPLICITLY (not inherited) so no browser applies its native select
     tint and both dropdowns always match the text inputs exactly. */
  background-color: var(--field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23898C97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

.hero-form__select.is-placeholder {
  color: var(--color-dark-grey);
}

.hero-form__error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-danger);
}

.hero-form__submit {
  width: 100%;
  padding: 0 var(--space-6);
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  color: #ffffff;
  background-color: var(--color-main-text);
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color 0.2s ease;
  min-height: var(--btn-height);
  line-height: 1.2;
}

.hero-form__submit:hover {
  background-color: var(--color-main-text-dark);
}

.hero-form__submit:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(6, 166, 81, 0.3);
}

.hero-form__note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-strong);
}

/* Hero responsive adjustments: the canon section rhythm above and below. */
@media (min-width: 768px) {
  .hero {
    padding: var(--section-y) 0;
  }
}

/* Mobile: the Compare button has to sit within ~900px of the top of the
   page. Tighter vertical rhythm above the form; chips reduced to one row
   (see .hero__badges below). */
@media (max-width: 767px) {
  .hero {
    /* Deliberate exception to --section-y (Botan, 9 Sept 2026): 32px keeps
       the Vergelijken button inside the first phone screen. */
    padding-top: var(--hero-y-mobile, 32px);
    min-height: 0;
  }
  .hero__title {
    margin-bottom: var(--space-4);
  }
  .hero__subtitle {
    margin-bottom: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   Search Form
   -------------------------------------------------------------------------- */

.search-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 500px;
  margin: 0 auto;
}


.search-form__input {
  padding: 13px 16px;
  font-size: var(--font-size-base);
  border: var(--field-border);
  border-radius: var(--radius-field);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  min-height: var(--field-height);
  line-height: 1.5;
  background-color: var(--field-bg);
}

.search-form__input:focus {
  outline: none;
  border-color: var(--color-main);
  box-shadow: 0 0 0 3px rgba(6, 166, 81, 0.12);
}

.search-form__input.has-error {
  border-color: var(--color-danger);
}


.search-form__submit {
  margin-top: var(--space-2);
}


@media (min-width: 640px) {
  .search-form {
    flex-direction: row;
    align-items: flex-end;
    max-width: 600px;
  }


  .search-form__submit {
    margin-top: 0;
  }

}


/* Top Badge */
.how-it-works__badge {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

/* Global "section badge" pill — the outlined sub-heading chip used above
   section titles (How it work, Why Energielabel24, FAQ, …). Apply the
   .section-badge class to the <span> to reuse this design anywhere. */
.section-badge {
    display: inline-block;
    padding: 6px 20px;
    font-size: var(--text-sm);
    color: var(--color-black);
    background-color: transparent;
    border: 1px solid var(--color-black);
    /* Pilvorm, dus het pil-token. 30px op een 30px hoge chip rendert identiek
       aan 999px, maar telde als een zevende radiuswaarde. */
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-bold);
}
.how-it-works .section-title {
  margin-bottom: var(--space-10);
}

/* Step Headers */
.how-it-works__header {
  display: none;
  align-items: flex-start;
  justify-content: center;
  /* The card belongs to the label above it; 32px read as two separate rows. */
  margin-bottom: var(--space-6);
}

.step-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 auto;
  width: 180px;
}

.step-header__label {
  display: inline-block;
  padding: 6px 16px;
  font-size: var(--eyebrow-size);
  font-weight: var(--heading-weight);
  line-height: 1.3;
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  /* Zelfde reden als bij .eyebrow: #06a651 op de grijze pil (#f3f3f3) mat
     2,88:1 bij 13px/800. Met de tekstgroen 4,91:1. */
  color: var(--color-main-text);
  background-color: var(--color-grey);
  /* Derde badge, derde radiuswaarde (20px). Op een chip van 28px hoog klemt
     de browser 20px al tot een volle pil, dus dit rendert gelijk en haalt een
     waarde uit de telling. */
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-5);
}

.step-header__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
  object-fit: contain;
}

.step-header__title {
  font-size: var(--h3-size);
  font-weight: var(--heading-weight);
  line-height: var(--h3-lh);
  color: var(--color-black);
  margin: 0;
}

.step-header__line {
    flex: 1;
    height: 1px;
    background-color: var(--color-grey-2);
    margin-top: 56px;
    min-width: 60px;
    max-width: 120px;
}

@media (min-width: 768px) {
  .how-it-works__header {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .step-header {
    width: 150px;
  }

  .step-header__icon {
    width: 46px;
    height: 46px;
  }

  .step-header__line {
    max-width: 200px;
    margin-top: 70px;
  }
}

/* Step Cards Grid */
.how-it-works__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--stack);
}

/* Vier stappen (Botan, 12-9-2026: "je moet ook uitleggen dat de adviseur
   langskomt en je je rapport krijgt"). Tussen 768 en 1023px twee per rij en
   de kopstrook uit, daar past de strook met vier koppen en drie lijnen niet. */
@media (min-width: 768px) and (max-width: 1023px) {
  .how-it-works__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .how-it-works__header {
    display: none;
  }

  .step-card__step {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    display: flex; flex-direction: column; align-items: center; margin-bottom: var(--space-4);
  }
}

.step-card {
  text-align: center;
}

.step-card__description {
    color: var(--color-text);
    font-size: var(--font-size-md);
    line-height: var(--text-lh);
    margin: 0;
    padding: 0px 10px;
}

@media (min-width: 1024px) {
  .step-card__description {
    font-size: var(--font-size-base);
  }
}

/* Per-card step label (STEP n + icon + title). Hidden on desktop, which uses
   the horizontal .how-it-works__header strip instead; shown paired with each
   card on mobile where the cards stack. */
.step-card__step {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Mobile: stack the step cards so the image and description get room to breathe
   (3-up squeezes the copy down to one word per line), and pair the step label
   with each card. */
@media (max-width: 767px) {
  /* Geen eigen mobiele kolom: met `max-width: 360px; margin: 0 auto` stond
     deze rij op een telefoon van 414px 11px binnen de paginagutter, terwijl
     de kop erboven en elke andere sectie op 16px beginnen. De kaarten volgen
     nu gewoon de container, net als `.value-card` ernaast. */
  .how-it-works__cards {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* The base rule hides this visually (position/clip), and the mobile
     override only ever flipped `display`. The result: below 768px the
     horizontal strip is display:none and the per-card label is clipped to
     1px, so a phone showed three cards and no step titles at all. Undo the
     whole hiding, not just the display. */
  .step-card__step {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--space-4);
  }

  .step-card__step .step-header__icon {
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-2);
  }

  .step-card__step .step-header__label {
    margin-bottom: var(--space-3);
  }

  /* Idem: de 320px-leesbreedte hier zette de tekst nog eens los van de kaart
     eromheen. De kaart is al de maat. */
  .step-card__description {
    font-size: var(--font-size-base);
  }
}

/* --------------------------------------------------------------------------
   Value Propositions Section
   -------------------------------------------------------------------------- */

.value-props {
  padding: var(--section-y) 0;
  background-color: #ffffff;
}

/* Top Badge */
.value-props__badge {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.value-props .section-title {
  margin-bottom: var(--space-10);
}

/* Main Layout - 3 columns */
.value-props__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack);
}

/* Value Cards Column */
.value-props__column {
  display: flex;
  flex-direction: column;
  gap: var(--stack);
}

/* Value Card.
   The outer bottom corner is sliced at 45° (chamfer) to mirror the step-card
   style: left-column cards use .chamfer-bl (bottom-left), right-column cards
   use .chamfer-br (bottom-right) in the markup. The other corners stay rounded
   via border-radius. */
.value-card {
    position: relative;
    text-align: left;
    padding: var(--card-pad);
    background-color: var(--color-light-grey);
    /* Het stijlplan noemt .value-card bij naam in de kaartenrij met
       --radius-card 12px; hij stond op --radius-md (gemeten 10px). */
    border-radius: var(--radius-card);
    --chamfer: 25px;
    overflow: hidden;
    /* `flex: 1` betekent flex-basis 0 én shrink 1: de kaart mocht kleiner
       worden dan zijn eigen tekst. Gemeten op 390px: kaart 1 clientHeight 217
       tegen scrollHeight 232 en kaart 4 230 tegen 258, dus 15 en 28px tekst
       onder de overflow:hidden weg; op 768px 298 tegen 329. Nu `1 0 auto`:
       basis = de inhoud, groeien mag nog (de kaarten vullen de kolom naast de
       fotokolom), krimpen niet meer. */
    flex: 1 0 auto;
}

.value-card__number {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 64px;
  font-weight: var(--font-weight-bold);
  /* 21-9-2026: stond op 0,05 en was op de lichte kaart nauwelijks te zien. */
  color: rgba(32, 44, 63, 0.14);
  line-height: 1;
}

.value-card__icon {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  object-fit: contain;
}

/* De vier kaarten renderen als core-image-blok: .value-card__icon is de
   <figure> (40x40) en de <img> erin houdt zijn eigen verhouding. Gemeten
   hoogtes in één rij: 40 / 40 / 35,55 (bron 45x40) / 50 (bron 32x40, met
   width/height uit de blokinstelling) — twee maten die op geen enkel
   icoonraster staan, en de laatste stak 10px buiten zijn eigen figuur.
   Zelfde regel als bij .comparison-page__card .step-header__icon > img:
   hoogte vast op 40, breedte volgt. */
.value-card__icon > img {
  width: auto;
  height: 40px;
  max-width: 40px;
  object-fit: contain;
}

.value-card__title {
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  font-weight: var(--heading-weight);
  color: var(--color-black);
  margin-bottom: var(--space-2);
}

.value-card__description {
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: var(--text-lh);
  margin-bottom: 0;
}

/* Center Column - Man Image */
.value-props__center {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.value-props__image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.value-props__image {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 240px;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

.value-props__image-bg {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 20px;
  background-color: var(--color-dark-green);
  border-radius: var(--radius-lg);
  border-bottom-right-radius: 40px;
  margin-top: -240px;
  min-height: 280px;
}

.value-props__btn {
  width: auto;
}

/* Responsive Layout */
@media (min-width: 768px) {
  .value-props__layout {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--stack);
    align-items: stretch;
  }

  .value-props__center {
    order: 0;
  }

  .value-props__column:first-child {
    order: -1;
  }

  .value-props__column:last-child {
    order: 1;
  }

  .value-props__image {
    max-width: 200px;
  }

  .value-props__image-bg {
    margin-top: -200px;
    min-height: 240px;
    border-radius: 16px;
    border-bottom-right-radius: 40px;
  }
}

@media (min-width: 1024px) {
  .value-card__number {
    font-size: 64px;
  }

  .value-card__icon {
    width: 40px;
    height: 40px;
  }

  .value-props__image {
    max-width: 260px;
  }

.value-props__image-bg {
    margin-top: -280px;
    min-height: 280px;
    border-radius: var(--radius-lg);
}

  .value-props__btn {
    min-width: 200px;
  }
}

/* --------------------------------------------------------------------------
   Testimonials Section
   -------------------------------------------------------------------------- */

.testimonials {
  padding: var(--section-y) 0 0;
  background-color: var(--color-main);
  overflow: visible;
}

/* Header Section */
.testimonials__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-8);
}

.testimonials__header-left {
  flex: 1;
}

.testimonials__title {
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--heading-weight);
  color: #ffffff;
  margin-bottom: var(--space-2);
}

.testimonials__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin: 0;
}

.testimonials__header-right {
  flex-shrink: 0;
}

.btn-view-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--btn-height-sm);
    padding: 0 20px;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-extrabold);
    color: #ffffff;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-view-more:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  text-decoration: none;
  color: #ffffff;
}

.btn-view-more svg {
  width: 18px;
  height: 18px;
}

/* The legacy header (partials/legacy) stacks on tablets. */
@media (max-width: 1023px) {
  .testimonials__header {
    flex-direction: column;
    gap: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   Summary Records Bar
   -------------------------------------------------------------------------- */

.summary-records {
  position: relative;
  --chamfer: 34px;
  padding: 36px 60px;
  margin-top: var(--space-10);
  /* Sit half in the green review section, half in the white section below.
     translateY(50%) drops the bar by half its own height, so the green/white
     boundary (the section's bottom edge) lands on the bar's vertical centre
     at every breakpoint, regardless of the bar's height. */
  transform: translateY(50%);
  z-index: 10;
  /* translateY is visual-only and reserves no layout space, so the footer
     would otherwise tuck right under the dropped bar. Reserve breathing room
     (covers the dropped lower half + a white gap before the footer) to match
     the Figma spacing. */
  margin-bottom: 96px;
}

/* Content Layout */
.summary-records__content {
  display: flex;
  align-items: center;
  gap: 80px;
  position: relative;
  z-index: 4;
  padding-right: 120px;
}

.summary-records__title {
  font-size: var(--h3-size);
  font-weight: var(--heading-weight);
  color: #ffffff;
  line-height: var(--h3-lh);
  margin: 0;
  flex-shrink: 0;
}

.summary-records__stats {
  display: flex;
  align-items: center;
  gap: 60px;
}

.summary-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-stat__number {
  font-size: 40px;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-second);
}

.summary-stat__label {
  font-size: var(--text-sm);
  color: var(--color-white);
}

/* Layered chamfered background boxes (top-left + bottom-right cut, same shape
   as the step / value cards). All three share the same left edge and the same
   cut; each is a little narrower than the one behind it, so the wider back
   layers (lime → green) peek out on the right as diagonal bands. The front
   dark-green box is the bar the content sits on. */
.summary-records__shapes {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.summary-records__shape {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

/* Back (widest) → front (narrowest, holds content) */
.summary-records__shape--1 {
  width: 100%;
  background-color: var(--color-second);
  z-index: 1;
}

.summary-records__shape--2 {
    width: 96%;
    background-color: #1F603D;
    z-index: 2;
}

.summary-records__shape--3 {
  width: 92%;
  background-color: var(--color-dark-green);
  z-index: 3;
}

/* Responsive */
@media (max-width: 1200px) {
  .summary-records {
    padding: 32px 40px;
  }

  .summary-records__content {
    gap: 50px;
    padding-right: 100px;
  }

  .summary-records__stats {
    gap: 40px;
  }

  .summary-stat__number {
    font-size: 34px;
  }
}

@media (max-width: 1023px) {
  .summary-records {
    padding: 28px 32px;
  }

  .summary-records__content {
    gap: 40px;
    padding-right: 80px;
  }

  .summary-records__stats {
    gap: 32px;
  }

  .summary-stat__number {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .summary-records {
    padding: 20px 20px;
    --chamfer: 22px;
  }

  .summary-records__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-right: 60px;
  }

  .summary-records__stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .summary-stat {
    flex: 0 0 calc(50% - 10px);
  }

  .summary-stat__number {
    font-size: 26px;
  }
}

/* --------------------------------------------------------------------------
   FAQ Section
   -------------------------------------------------------------------------- */

.faq-section {
  /* Canon rhythm plus 96px head room for the review carousel that overflows
     out of the testimonials band above. */
  padding: calc(var(--section-y) + 96px) 0 var(--section-y);
  background-color: #ffffff;
}

/* Two Column Layout */
.faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 1024px) {
  .faq-layout {
    grid-template-columns: 440px 1fr;
    gap: 50px;
  }
}

/* Left Column - Support Agent */
.faq-support {
  position: relative;
}

.faq-support__image-wrapper {
  position: relative;
}

.faq-support__bg {
    position: absolute;
    top: 160px;
    left: 20px;
    right: 20px;
    bottom: 0;
    --chamfer: 26px;
    background-color: var(--color-dark-green);
    border-radius: 20px;
}

.faq-support__image {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.faq-support__contact {
    position: relative;
    z-index: 3;
    --chamfer: 26px;
    /* Alle tekst in deze pil is wit (titel 24px/800, e-mail 14px/600). Op
       #06a651 mat dat 3,19:1; de 14px-link haalt zo geen 4,5:1. De pil is een
       vlak, dus de tekstgroen #047a3c mag hier als achtergrond: gemeten 5,45:1
       voor de witte tekst. */
    background-color: var(--color-main-text);
    border-radius: 0px 0px 0px 15px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    gap: 32px;
    width: 80%;
    margin-top: -70px;
    margin-left: auto;
    margin-right: 20px;
}

/* Desktop: the card is sized by its content, not by the column. At 80% of the
   440px column (352px) the e-mail address (182px, no break opportunity)
   overflowed the card by 1px and the bottom-right chamfer hid ".nl". The card
   now takes its max-content width (title + e-mail on one row, 387px in Dutch),
   never wider than the dark block behind it (20px in from both edges), and
   wraps the links under the title only if a longer title ever needs it. */
@media (min-width: 1024px) {
  .faq-support__contact {
    width: max-content;
    max-width: calc(100% - 40px);
    flex-wrap: wrap;
    padding: 28px;
    gap: 24px;
  }

  .faq-support__link {
    white-space: nowrap;
  }
}

.faq-support__title {
  font-size: var(--h3-size);
  font-weight: var(--heading-weight);
  color: #ffffff;
  line-height: var(--h3-lh);
  margin: 0;
  flex-shrink: 0;
}

.faq-support__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-support__link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: opacity 0.2s ease;
}

.faq-support__link:hover {
  opacity: 0.8;
  text-decoration: none;
  color: #ffffff;
}

.faq-support__icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* Right Column - FAQ Content */
.faq-content {
  padding-top: 0;
}

.faq-badge {
  display: inline-block;
  margin-bottom: var(--space-4);
}

.faq-title {
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--heading-weight);
  color: var(--color-black);
  margin-bottom: var(--space-8);
}

/* FAQ List *//* Responsive */
@media (max-width: 1023px) {
  /* Gestapeld begon de FAQ-sectie met zijn eigen slot-CTA: illustratie plus
     "Heeft u nog een vraag?" (y=12345), en pas 228px later de sectiekop
     "Veelgestelde vragen" — 701px in de sectie, terwijl elke andere sectiekop
     op de homepage 85 tot 145px lucht boven zich krijgt. Het eerste dat je
     leest hoort de sectie aan te kondigen; de vraag-CTA heeft pas betekenis
     ná de vragen. In het raster zet `order` de kolom onderaan, zonder de
     markup of de desktopindeling (twee kolommen naast elkaar) te raken. */
  .faq-layout > .faq-support {
    order: 1;
  }

  .faq-support {
    max-width: 420px;
    margin: 0 auto;
  }

  .faq-support__bg {
    left: 10px;
    right: 10px;
  }

  .faq-support__contact {
    margin-left: auto;
    margin-right: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
  }
}

@media (max-width: 639px) {
  .faq-section {
    padding-top: calc(var(--section-y) + 32px);
  }

  .faq-support__bg {
    top: 60px;
  }

  .faq-support__contact {
    padding: 20px 20px;
    gap: 12px;
  }

  .faq-support__title {
    font-size: var(--font-size-lg);
  }

  .site-main details.faq-item > summary,
  .site-main details.faq-accordion__item > summary {
    padding: var(--space-4) 0;
  }

  .site-main details.faq-item .faq-item__answer,
  .site-main details.faq-accordion__item .faq-accordion__answer {
    padding: 0 0 var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   Advisors on Platform Section
   -------------------------------------------------------------------------- */

.advisors-platform {
  padding: var(--section-y) 0 120px;
  background-color: var(--color-light-grey);
  overflow: visible;
  position: relative;
  z-index: 1;
}

/* Header */
.advisors-platform__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-8);
}

.advisors-platform__header-left {
  flex: 1;
}

.advisors-platform__title {
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--heading-weight);
  color: var(--color-black);
  margin-bottom: var(--space-2);
}

.advisors-platform__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin: 0;
}

.advisors-platform__header-right {
  flex-shrink: 0;
}

/* Dark View More Button */
.btn-view-more--dark {
  color: var(--color-black);
  border-color: var(--color-black);
}

.btn-view-more--dark:hover {
  background-color: var(--color-black);
  color: #ffffff;
}

/* Carousel */
.advisors-platform__carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: var(--space-10);
}

.advisors-platform__track {
  display: flex;
  gap: 20px;
  transition: transform 0.4s ease;
  padding: 0 10%;
}

/* Advisor Card */
.advisor-card {
  flex: 0 0 calc((100% - 100px) / 6);
  min-width: calc((100% - 100px) / 6);
  --chamfer: 22px;
  display: block;
  background-color: #ffffff;
  border: var(--card-border);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.advisor-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-card);
}

.advisor-card__logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.advisor-card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.advisor-card__name {
    /* Card title size, two lines at most. */
    font-size: var(--card-title-size);
    line-height: var(--h3-lh);
    font-weight: var(--heading-weight);
    color: var(--color-black);
    margin-bottom: 5px;
    white-space: normal;
    overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.advisor-card__rating {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.advisor-card__stars {
  display: flex;
  gap: 1px;
}

.advisor-card__star {
  color: #e8ebf3;
  font-size: var(--font-size-lg);
}

.advisor-card__star--filled {
  color: #fbbc05;
}

.advisor-card__rating-num {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

/* Edge Masks - White gradient */
.advisors-platform__mask {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10%;
  z-index: 2;
  pointer-events: none;
}

.advisors-platform__mask--left {
  left: 0;
  background: linear-gradient(
    to right,
    var(--color-light-grey) 0%,
    transparent 100%
  );
}

.advisors-platform__mask--right {
  right: 0;
  background: linear-gradient(
    to left,
    var(--color-light-grey) 0%,
    transparent 100%
  );
}

/* Navigation Arrows */
.advisors-platform__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid var(--color-grey);
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  transition: all 0.2s ease;
  color: var(--color-black);
  box-shadow: var(--shadow-soft);
}

.advisors-platform__nav:hover:not(:disabled) {
  background-color: var(--color-main);
  border-color: var(--color-main);
  color: #ffffff;
}

.advisors-platform__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.advisors-platform__nav--prev {
  left: 20px;
}

.advisors-platform__nav--next {
  right: 20px;
}

/* Stats Row */
.advisors-platform__stats {
  display: flex;
  justify-content: flex-start;
  gap: 80px;
  padding-top: var(--space-6);
}

.platform-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.platform-stat__number {
  font-size: 36px;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-black);
}

.platform-stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-strong);
}

/* Responsive - Tablet */
@media (max-width: 1023px) {
  .advisors-platform__header {
    flex-direction: column;
    gap: var(--space-4);
  }

  .advisor-card {
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: calc((100% - 40px) / 3);
  }

  .advisors-platform__track {
    padding: 0 8%;
  }

  .advisors-platform__mask {
    width: 8%;
  }

  .advisors-platform__stats {
    gap: 40px;
    flex-wrap: wrap;
  }

  .platform-stat__number {
    font-size: 30px;
  }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
  .advisor-card {
    flex: 0 0 calc(100% - 60px);
    min-width: calc(100% - 60px);
  }

  .advisors-platform__track {
    padding: 0 30px;
    gap: 16px;
  }

  .advisors-platform__mask {
    display: none;
  }

  /* Single-card view: centred arrow row below the card (see testimonials). */
  .advisors-platform__carousel {
    padding-bottom: 64px;
  }

  .advisors-platform__nav {
    width: 40px;
    height: 40px;
    top: auto;
    bottom: 8px;
    transform: none;
  }

  .advisors-platform__nav--prev {
    left: calc(50% - 52px);
    right: auto;
  }

  .advisors-platform__nav--next {
    right: auto;
    left: calc(50% + 12px);
  }

  .advisors-platform__stats {
    gap: 24px;
  }

  .platform-stat {
    flex: 0 0 calc(50% - 12px);
  }

  .platform-stat__number {
    font-size: 26px;
  }
}

/* --------------------------------------------------------------------------
   Advisor CTA Banner
   -------------------------------------------------------------------------- */

.advisor-cta {
  padding: var(--section-y) 0 80px;
  background-color: var(--color-dark-green);
  color: #ffffff;
  overflow: visible;
  position: relative;
  z-index: 1;
}

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

.advisor-cta__content {
  flex: 1;
  max-width: 700px;
  text-align: left;
  padding-right: 40px;
}

.advisor-cta__title {
    font-size: var(--h2-size);
    font-weight: var(--heading-weight);
    color: #ffffff;
    line-height: var(--h2-lh);
    margin-bottom: var(
  --space-2);
    white-space: nowrap;
}
.advisor-cta__highlight {
  color: var(--color-second);
}

.advisor-cta__subtitle {
  font-size: var(--h2-size);
  font-weight: var(--heading-weight);
  color: #ffffff;
  line-height: var(--h2-lh);
  margin-bottom: var(--space-6);
}

.advisor-cta__btn {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-8);
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  color: #ffffff;
  background-color: var(--color-main-text);
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: all 0.2s ease;
  min-height: var(--btn-height);
}

.advisor-cta__btn:hover {
  background-color: var(--color-main-text-dark);
  color: #ffffff;
  text-decoration: none;
}

.advisor-cta__image {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 340px;
  height: 450px;
  z-index: 10;
  overflow: visible;
}

.advisor-cta__image img {
  width: auto;
  max-height: 500px;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  left: auto;
  margin-bottom: -80px;
}

/* Responsive */
@media (min-width: 1200px) {
  .advisor-cta__image {
    width: 400px;
    height: 520px;
    right: 0;
  }
}

@media (max-width: 1023px) {
  .advisor-cta__image {
    width: 300px;
    height: 400px;
    right: 0;
  }

  .advisor-cta__title,
  .advisor-cta__subtitle {
    white-space: normal;
  }

  .advisor-cta__content {
    max-width: 500px;
  }
}

@media (max-width: 767px) {
  .advisor-cta {
    padding: var(--section-y) 0 60px;
  }

  .advisor-cta__layout {
    flex-direction: column;
    align-items: flex-start;
  }

  .advisor-cta__content {
    padding-right: 0;
    margin-bottom: var(--space-8);
    max-width: 100%;
  }

  .advisor-cta__title,
  .advisor-cta__subtitle {
    white-space: normal;
  }

  .advisor-cta__image {
    position: relative;
    width: 260px;
    height: auto;
    right: auto;
    bottom: auto;
    align-self: flex-end;
  }

  .advisor-cta__image img {
    position: relative;
    margin-bottom: -40px;
  }
}

/* --------------------------------------------------------------------------
   Confirmation Page
   -------------------------------------------------------------------------- */

.confirmation-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.confirmation {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6) var(--section-y);
  text-align: center;
}

.confirmation__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0 auto var(--space-8);
  color: var(--color-main);
  background-color: var(--color-light-green);
  border: 2px solid var(--color-main);
  border-radius: 50%;
}

.confirmation__icon svg {
  width: 40px;
  height: 40px;
}

.confirmation__title {
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: var(--h1-weight);
  color: var(--color-black);
  margin-bottom: var(--space-4);
}

.confirmation__message {
  font-size: var(--font-size-lg);
  color: var(--color-text-strong);
  margin-bottom: var(--space-8);
}

.confirmation__reference {
  display: inline-block;
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-8);
  background-color: var(--color-success-bg);
  border-radius: var(--radius-md);
}

.reference-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.reference-number {
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

.confirmation__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .confirmation__actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Progress Indicator - Figma Design
   -------------------------------------------------------------------------- */

.progress-bar-container {
  background-color: var(--color-light-green);
  border-bottom: 1px solid var(--color-grey);
  padding: var(--space-3) 0;
}

.progress-indicator {
  margin: 0;
}

.progress-indicator__steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.progress-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.progress-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border: 2px solid var(--color-main);
  border-radius: 50%;
  background-color: white;
  /* Het cijfer is tekst (14px/600) en mat 3,19:1 op wit in #06a651. De rand
     blijft #06a651 — dat is een vlak, geen tekst. Nu 5,45:1. */
  color: var(--color-main-text);
}

.progress-step__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: var(--color-main);
  border-radius: 50%;
}

.progress-step__check svg {
  width: 16px;
  height: 16px;
  stroke: white;
}

.progress-step__line {
  width: 100px;
  height: 2px;
  background-color: var(--color-main);
  margin: 0;
}

.progress-step:not(.progress-step--completed) ~ .progress-step__line {
    background-color: #C9DFCC;
}

/* Current (frontier) line: half-filled to show progress into the next step. */
.progress-step--completed + .progress-step__line:not(.progress-step__line--completed),
.progress-step--active + .progress-step__line:not(.progress-step__line--completed) {
  background: linear-gradient(
    to right,
    var(--color-main) 50%,
    #C9DFCC 50%
  );
}

.progress-step--completed {
  color: var(--color-text);
}

.progress-step--completed .progress-step__label {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.progress-step--active {
  color: var(--color-text);
}

.progress-step--active .progress-step__number {
  background-color: var(--color-main);
  color: white;
  border-color: var(--color-main);
}

.progress-step--active .progress-step__label {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.progress-step__line--completed {
  background-color: var(--color-main) !important;
}

@media (max-width: 639px) {
  .progress-step__label {
    display: none;
  }
  .progress-step__line {
    width: 40px;
  }
}

/* --------------------------------------------------------------------------
   Process Timeline
   -------------------------------------------------------------------------- */

.process-timeline {
  margin-top: var(--space-12);
  padding: var(--space-8);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

.process-timeline h2 {
  text-align: center;
  margin-bottom: var(--space-8);
}

.process-timeline__steps {
  display: grid;
  gap: var(--space-6);
}

.timeline-step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.timeline-step__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  background-color: var(--color-bg);
  border: 2px solid var(--color-primary);
  border-radius: 50%;
}

.timeline-step__content h3 {
  font-size: var(--h3-size);
  margin-bottom: var(--space-1);
}

.timeline-step__content p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .process-timeline__steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  .timeline-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}


.advisor-logo {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
}

.advisor-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}


.star-rating .star {
  font-size: var(--font-size-lg);
}

.review-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
}


.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.service-tag {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-sm);
}

.advisor-reviews {
  margin-bottom: var(--space-8);
}

.advisor-reviews h2 {
  font-size: var(--h2-size);
  margin-bottom: var(--space-4);
}


/* --------------------------------------------------------------------------
   Review Card
   -------------------------------------------------------------------------- */

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.review-card {
  padding: var(--space-5);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.review-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.review-card__author {
  font-weight: var(--font-weight-semibold);
}

.review-card__rating .star {
  font-size: var(--font-size-base);
}

.review-card__date {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.review-card__body p {
  margin-bottom: 0;
}

.review-card__reply {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-bg);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.review-card__reply strong {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.review-card__reply p {
  font-size: var(--font-size-md);
  margin-bottom: 0;
}


.price-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.price-amount {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}


/* --------------------------------------------------------------------------
   Comparison Page - Figma Design
   -------------------------------------------------------------------------- */

/* Breadcrumb */
/* Broodkruimels (v2, 12-9-2026, Botan: "goede alignment, groter, duidelijker"):
   altijd links op de paginagutter, 15/600, chevron van 16px, de huidige
   pagina in inkt 700, de rest gedempt. Op een telefoon blijft alles op één
   regel: de huidige pagina wordt afgekapt, de rest niet. */
.breadcrumb {
  padding: var(--space-5) 0 0;
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: var(--space-2);
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  color: var(--color-text-strong);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb__item:first-child {
  flex-shrink: 0;
}

.breadcrumb__item--current {
  flex: 1 1 auto;
}

.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-strong);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb__link > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
  color: var(--color-main-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb__icon {
  width: 18px;
  height: 18px;
  opacity: 0.85;
}

.breadcrumb__separator {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
}

.breadcrumb__separator svg {
  width: 16px;
  height: 16px;
  stroke: #b9c0cc;
}

.breadcrumb__item--current {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

/* Telefoon: Home alleen als icoon, de huidige pagina krijgt de meeste ruimte. */
@media (max-width: 599px) {
  .breadcrumb__item:first-child .breadcrumb__link > span {
    display: none;
  }

  .breadcrumb__item:not(:first-child):not(.breadcrumb__item--current) {
    flex: 0 1 38%;
  }

  .breadcrumb__item--current {
    flex: 1 1 50%;
  }
}

/* Paginakoppen die de kruimels centreerden: ook daar links (één regel). */
.about-hero__header .breadcrumb__list,
.page-header .breadcrumb__list,
.legal-page .breadcrumb__list {
  justify-content: flex-start;
}

/* Page Header
   --------------------------------------------------------------------------
   De resultatenpagina opende met een gecentreerde H1 en daaronder een rij
   gecentreerde capsules. Nul van de zes vergelijkers die op 9-9-2026 op hun
   RESULTATENpagina zijn gemeten (zorgwijzer, energievergelijk, independer,
   gaslicht, pricewise, woninglabel) centreert die kop: zorgwijzer zet zijn H1
   zelfs 1x1px sr-only weg, gaslicht zet de zijne ONDER de resultaten, de
   andere drie lijnen links uit. Bij ons kostte het extra: de eerste
   resultaatkaart begon op desktop pas op y=447 en op mobiel op y=731.

   De kop houdt zijn leeskolom (--container-reading), maar staat links tegen de
   containerrand in plaats van gecentreerd in de bredere kolom. Op desktop
   blijft de H1 de canonmaat (--h1-size, 54px); alleen op mobiel wijkt hij af,
   zie de media query onderaan dit blok. */
.comparison-page__header {
  margin-right: auto;
  margin-left: 0;
  text-align: left;
}

.comparison-page__title {
  margin-bottom: var(--space-4);
}

/* USP-regel — was: drie gecentreerde witte capsules met 1px rand, 14px/500.
   Nu: één links uitgelijnde regel platte vinkje-plus-tekst op bodymaat, zoals
   woninglabel het onder zijn H1 doet (vinkje + tekst, links, geen pillen).
   Geen rand en geen vlak, dus ook geen element dat er klikbaar uitziet. */
.trust-badges {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  /* 8px tussen omgeslagen regels, 24px tussen de USP's op één regel. */
  gap: var(--space-2) var(--space-6);
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* Het gezaaide blok levert deze drie als <p class="trust-badge">, de partial
     als <span>: beide moeten dezelfde regel opleveren. */
  margin: 0;
  padding: 0;
  font-size: var(--text-size);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--color-text);
  background-color: transparent;
  border: 0;
  border-radius: 0;
}

/* Het vinkje hoort bij de USP-regel zelf, niet bij de markup: de gezaaide
   <p>-versie heeft geen inline-SVG meer. Masker in plaats van een gekleurde
   data-URI, zodat de kleur uit --color-main blijft komen. */
.trust-badge::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background-color: var(--color-main);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

/* De partial had het vinkje nog als inline-SVG; als die markup ergens blijft
   staan, verbergt deze regel het dubbele vinkje. */
.trust-badge svg {
  display: none;
}

@media (max-width: 767px) {
  /* Bewuste, tot deze pagina beperkte afwijking van --h1-size-mobile (38px):
     op 358px kolombreedte loopt "De beste energielabel-adviseurs voor u" op
     38px over DRIE regels (125px), op 32px over twee (70px). Dat scheelt 55px
     precies daar waar het pijn doet — op een scherm van 844px moet de eerste
     adviseur zichtbaar zijn zonder te scrollen. Alleen de resultatenpagina;
     elke andere paginakop houdt 38px. */
  .comparison-page__title {
    font-size: 32px;
  }

  /* Op 390px stonden de drie capsules onder elkaar: 121px opmaak voordat er
     iets bedienbaars stond. Woninglabel houdt er op mobiel precies één over;
     dat doen wij ook, en het is de eerste (prijs), want daar komt de bezoeker
     voor. */
  .trust-badges > :nth-child(n + 2) {
    display: none;
  }
}

/* Widget wrapper */
.comparison-widget-wrapper {
  min-height: 400px;
}

/* Comparison widget layout */
.comparison-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
}

@media (max-width: 767px) {
  /* Zie App.css: `1fr` is `minmax(auto, 1fr)` en laat de track niet krimpen
     onder de min-content van de sorteerbalk. */
  .comparison-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .comparison-layout > * {
    min-width: 0;
  }
}

/* Filter sidebar (React widget) */
.filter-sidebar {
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-md);
}

/* Cards inside comparison container have borders */
.comparison-widget-wrapper .advisor-card,
.comparison-widget-wrapper [class*="rounded-lg"][class*="border"] {
  border: 1px solid var(--color-grey);
}

/* --------------------------------------------------------------------------
   Request Form Page
   -------------------------------------------------------------------------- */

/* Layout comes from the shared .page-header alias above. */
.request-form-page__header {
  text-align: center;
}

.request-form-page__intro {
  color: var(--color-text-muted);
}

.request-form-widget-wrapper {
  min-height: 400px;
}

/* --------------------------------------------------------------------------
   Noscript Message
   -------------------------------------------------------------------------- */

.noscript-message {
  padding: var(--space-8);
  text-align: center;
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.noscript-message p {
  color: var(--color-text);
  margin-bottom: 0;
}

/* ==========================================================================
   Module 4.3-B — Auth + Content Page Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Auth Page (Login, Register)
   -------------------------------------------------------------------------- */

.auth-page {
  padding: 0 0 var(--section-y);
  background-color: var(--color-bg-alt);
  min-height: 60vh;
}

.auth-card {
  max-width: 480px;
  margin: var(--space-6) auto 0;
  padding: var(--space-8);
  background-color: var(--color-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  border: var(--card-border);
}


.auth-card__header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.auth-card__header h1 {
  margin-bottom: var(--space-2);
}

.auth-card__header p {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.auth-card__footer {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.auth-card__footer p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Auth Form
   -------------------------------------------------------------------------- */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}


.auth-form__error,
.contact-form__error {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-danger);
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
}

.contact-form__success {
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-success-bg);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-md);
}

.contact-form__success p {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Form Elements
   -------------------------------------------------------------------------- */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-group--inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}


.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}

.form-label .required {
  color: var(--color-danger);
}

.form-input {
  width: 100%;
  min-height: var(--field-height);
  padding: 14px 16px;
  font-family: inherit;
  font-size: var(--field-font);
  line-height: 1.5;
  color: var(--color-black);
  background-color: var(--field-bg);
  border: var(--field-border);
  border-radius: var(--radius-field);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-main);
  background-color: var(--color-white);
  box-shadow: 0 0 0 3px rgba(6, 166, 81, 0.12);
}

.form-input::placeholder {
  color: var(--color-dark-grey);
}

.form-input:invalid:not(:placeholder-shown) {
  border-color: var(--color-danger);
}

.form-textarea {
  resize: vertical;
  min-height: 130px;
}

.form-help {
  font-size: var(--text-sm);
  color: var(--color-text-strong);
}


.btn--full-width {
  width: 100%;
}


/* --------------------------------------------------------------------------
   Password Toggle
   -------------------------------------------------------------------------- */

.input-with-toggle {
  position: relative;
}

.input-with-toggle .form-input {
  padding-right: var(--space-12);
}

.password-toggle {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  padding: var(--space-2);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-lg);
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.password-toggle:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Checkbox Label
   -------------------------------------------------------------------------- */

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.checkbox-label a {
  text-decoration: underline;
}

.forgot-password-link {
  font-size: var(--font-size-sm);
  color: var(--color-main-text);
}


/* --------------------------------------------------------------------------
   FAQ Page (design/frontend/07-faq-page.png)
   -------------------------------------------------------------------------- */

.faq-page {
  background-color: #ffffff;
}

/* Hero / Customer Care */
.faq-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) 0 var(--space-12);
  background-color: var(--color-light-grey);
}

.faq-hero__shape {
  position: absolute;
  top: 40px;
  width: 200px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.faq-hero__shape--left {
  left: 0;
}

.faq-hero__shape--right {
  right: 0;
}

.faq-hero .container {
  position: relative;
  z-index: 1;
}

.faq-hero__title {
  margin: 0 0 var(--space-4);
}

.faq-hero__subtitle {
  color: var(--color-text);
  font-size: var(--lead-size);
  margin: 0;
}

/* Search */
.faq-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 560px;
  margin: 0 auto;
  background-color: var(--color-light-grey);
  border-radius: 999px;
  padding: 8px 8px 8px 20px;
}

.faq-search__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--color-dark-grey);
}

.faq-search__icon svg {
  width: 22px;
  height: 22px;
}

.faq-search__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--field-font);
  color: var(--color-black);
  padding: 12px 0;
  min-width: 0;
}

.faq-search__input:focus {
  outline: none;
}

.faq-search__input::placeholder {
  color: var(--color-dark-grey);
}

.faq-search__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background-color: var(--color-main-text);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.faq-search__submit:hover {
  background-color: var(--color-main-text-dark);
}

.faq-search__submit svg {
  width: 20px;
  height: 20px;
}

/* Accordion */
.faq-questions {
  padding: var(--space-6) 0 var(--section-y);
}

.faq-questions__title {
  text-align: center;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--heading-weight);
  color: var(--color-black);
  margin: 0 0 var(--space-8);
}


.faq-accordion__answer p {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-size);
  line-height: var(--text-lh);
}

.faq-accordion__empty {
  text-align: center;
  color: var(--color-text-strong);
  padding: var(--space-8) 0;
}

/* Still have a question? CTA */
.faq-cta {
  padding: 0 0 var(--section-y);
}

.faq-cta__box {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  padding: 0 56px 0 40px;
  margin-top: 72px; /* room for the lady's head to overflow above the card */
}

/* Background layer: the dark-green card itself. The global chamfer utility
   (.chamfer-trbl in markup) cleanly slices the top-right + bottom-left corners
   to transparency — no white triangle overlay, so no corner overlap. */
.faq-cta__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    --chamfer: 40px;
    background-color: var(--color-dark-green);
    border-radius: var(--radius-lg);
    background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.03) 0px,
    rgba(255, 255, 255, 0.03) 2px,
    transparent 2px,
    transparent 120px
  );
}

.faq-cta__media {
  position: relative;
  z-index: 1;
  flex: 0 0 300px;
  align-self: flex-end;
}

.faq-cta__img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-top: -96px; /* lifts the head above the card top edge */
}

.faq-cta__content {
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: center;
  padding: var(--space-12) 0;
}

/* Dit was een niet-klikbare <p> van 244x44px in een pil met een 1px limerand
   op 16px/700: precies de vorm en precies de taphoogte van een ghost-knop, en
   het label is een opdracht ("Neem contact met ons op"). Gemeten cursor:auto,
   geen href, geen handler — hij belooft een knop te zijn en doet niets. Nu de
   canon-eyebrow (.eyebrow / .step-header__label): 13px/800, uppercase,
   letter-spacing .12em, geen rand, geen pil. Lime op #0a392c meet 7,9:1. */
.faq-cta__badge {
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--color-second);
  font-size: var(--eyebrow-size);
  font-weight: var(--heading-weight);
  line-height: 1.3;
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.faq-cta__title {
  color: #ffffff;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--heading-weight);
  margin: 0 0 var(--space-6);
}

.faq-cta__contacts {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    /* Zelfde geval als .faq-support__contact: wit op #06a651 mat 3,19:1 bij
       17-18px/700. Met #047a3c als vlak 5,45:1. */
    background-color: var(--color-main-text);
    --chamfer: 15px;
    border-radius: var(--radius-sm);
    /* De groene pil was 258,5x76,2px, maar de padding zat op deze DIV en het
       enige klikbare element erin was de link van 218,5x27,2px: 31% van het
       vlak, met 18px dode ruimte boven en 29px onder. Wie de pil raakt maar
       niet de tekst, klikt niets. De padding verhuist naar de link, zodat het
       hele groene vlak het tapdoel is. */
    padding: 0;
}

.faq-cta__contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Canonknop: 56px hoog, 18px/800. Het hele oppervlak van de pil is nu de
     link (was 27,2px hoog, onder de 44px-ondergrens). */
  min-height: var(--btn-height);
  padding: 0 var(--space-8);
  color: #ffffff;
  text-decoration: none;
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  transition: opacity 0.2s ease;
}

/* Er staat één contactregel in de pil; de scheidingsstreep erna scheidt niets
   en voegde alleen dode hoogte toe. */
.faq-cta__contact-divider:last-child {
  display: none;
}

.faq-cta__contact:hover {
  color: #ffffff;
  opacity: 0.85;
  text-decoration: none;
}

.faq-cta__contact-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.faq-cta__contact-divider {
  width: 1px;
  height: 22px;
  background-color: rgba(255, 255, 255, 0.35);
  margin: 0 var(--space-4);
}

/* FAQ page responsive */
@media (max-width: 767px) {
  .faq-hero__shape {
    display: none;
  }

  .faq-questions__title {
    margin-bottom: var(--space-8);
  }
}

/* Stack the "Still have a question?" CTA on tablet as well as mobile: the
   side-by-side layout keeps a fixed 300px agent image, leaving the contacts
   pill too little room below ~1024px, so the phone number wraps onto several
   lines. Desktop (>=1024px) keeps the horizontal layout. */
@media (max-width: 1023px) {
  .faq-cta__box {
    flex-direction: column;
    align-items: center;
    padding: 0 20px 32px;
    gap: 0;
  }

  .faq-cta__bg {
    -webkit-mask: none; /* drop the chamfer on the stacked card — rounded only */
    mask: none;
  }

  .faq-cta__media {
    flex: 0 0 auto;
    align-self: center; /* override the desktop flex-end so it centres when stacked */
  }

  .faq-cta__img {
    max-width: 220px;
    margin-top: -40px;
  }

  .faq-cta__content {
    padding: var(--space-6) 0 0;
  }

  .faq-cta__contacts {
    flex-direction: column;
    gap: var(--space-3);
    /* Zie de basisregel: de padding hoort bij de link, niet bij de doos. */
    padding: 0;
    /* Gestapeld is dit een blok, geen pil: 14px was een vijfde kaartradius
       naast de canon. Nu --radius-card, zoals elke andere kaart. */
    border-radius: var(--radius-card);
    -webkit-mask: none; /* drop the chamfer slice on the stacked pill */
    mask: none;
  }

  .faq-cta__contact-divider {
    width: 60%;
    height: 1px;
    margin: 0;
  }
}

/* --------------------------------------------------------------------------
   Contact Page (design/frontend/09-contact-page.png)
   -------------------------------------------------------------------------- */

.contact-page {
  padding: 0 0 var(--section-y);
}

.contact-page__title {
  margin: 0 0 var(--space-4);
}

.contact-page__subtitle {
  color: var(--color-text);
  font-size: var(--lead-size);
  margin: 0;
}

.contact-page__grid {
  display: grid;
  gap: var(--space-8);
  /* Sections below the cards keep the canon rhythm. */
  margin-bottom: var(--section-y);
  align-items: stretch;
}

@media (min-width: 1024px) {
  .contact-page__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Shared card */
.contact-card {
  background-color: #ffffff;
  border-radius: var(--radius-card);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  border: var(--card-border);
}

.contact-card__title {
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--heading-weight);
  color: var(--color-black);
  margin: 0 0 var(--space-6);
}

/* Left column form */
.contact-form-card {
  display: flex;
  flex-direction: column;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* De melding stond in de markup tussen het laatste veld en de knop. Gemeten:
   zodra .contact-form__error verschijnt (48,4px) schoof de verzendknop 68,3px
   omlaag op 390px en 68,4px op 1440px — precies weg onder de vinger die net
   getikt had; bij .contact-form__success (70,8px) hetzelfde. De knop mag niet
   verplaatsen door wat de klik oplevert, dus de melding komt als laatste
   flex-item ná de knop te staan: role="alert"/"status" meldt hem toch, hij
   blijft naast de knop staan, en er is geen permanent gat nodig. */
.contact-form__error,
.contact-form__success {
  order: 1;
}

.contact-form__error {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

.contact-form__success {
  color: var(--color-main);
  font-size: var(--font-size-sm);
}

/* Veldmelding (12-9-2026): het formulier heeft novalidate, dus de eigen,
   vertaalde melding staat in #EF4444 direct onder het afgekeurde veld. Hij
   is absoluut gepositioneerd in de 20px-gap onder de groep, zodat de velden
   en de verzendknop niet verspringen als hij verschijnt (DESIGN.md
   "Formulierveld"). Eén regel van 14px past in die gap; de teksten zijn
   daarom kort gehouden. Hetzelfde patroon geldt voor het inlogformulier. */
.contact-form .form-group,
.auth-form .form-group {
  position: relative;
}

.contact-form__field-error,
.auth-form__field-error {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  font-size: var(--font-size-sm);
  line-height: 1.3;
  color: var(--color-danger);
  animation: el24ErrorIn 0.25s var(--el24-ease-out);
}

/* Gestapeld (mobiel) is de rij-gap 16px; de melding van 18px + 2px past
   daar niet in, dus de rij krijgt dezelfde 20px als de rest van het formulier. */
.contact-form__row {
  row-gap: var(--space-5);
}

.auth-form .form-input.has-error,
.review-form .form-input.has-error {
  border-color: var(--color-danger);
}

.contact-form__submit {
  align-self: stretch;
  margin-top: var(--space-2);
}

/* Right column */
.contact-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Direct contact card */
.contact-direct__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-direct__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-black);
}

.contact-direct__item a {
  color: var(--color-black);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-direct__item a:hover {
  color: var(--color-main-text);
}

.contact-direct__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.contact-direct__icon svg {
  width: 20px;
  height: 20px;
}


/* Contact page responsive */
@media (max-width: 767px) {
  .contact-card {
    padding: var(--space-6);
  }

  .contact-form__row {
    grid-template-columns: 1fr;
  }

}

/* --------------------------------------------------------------------------
   About Page (design/frontend/08-about-us.png)
   -------------------------------------------------------------------------- */

.about-page {
  background-color: #ffffff;
}

/* Hero */
/* 13-9-2026: every page that opens with this hero (guides, city and province
   pages, hubs, about, FAQ) opens on the homepage's tinted band, so the site
   reads as one design from the first screen. The guide adds its own grid
   (assets/css/guides.css). */
.about-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) 0 var(--space-12);
  background-color: var(--color-light-grey);
}

/* The body that follows the band keeps its distance from it. */
.site-main .about-hero + .container,
.site-main .about-hero + .wp-block-group {
  padding-top: var(--space-10);
}

/* City, province and hub pages: the hero carries the comparison form. From
   1024px it takes the homepage's hero grid: text left, form card right. */
@media (min-width: 1024px) {
  .content-page .about-hero > .container:has(> .hero__content--inline) {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    column-gap: var(--space-16);
    align-items: center;
  }

  .content-page .about-hero > .container:has(> .hero__content--inline) > .breadcrumb {
    grid-column: 1 / -1;
  }

  .content-page .about-hero > .container:has(> .hero__content--inline) > .about-hero__header {
    grid-column: 1;
    margin: 0;
    text-align: left;
  }

  .content-page .about-hero > .container:has(> .hero__content--inline) > .about-hero__header > * {
    margin-left: 0;
    margin-right: 0;
  }

  .content-page .about-hero > .container:has(> .hero__content--inline) > .hero__content--inline {
    grid-column: 2;
    margin: 0;
    padding: 0;
    max-width: none;
  }
}

.about-hero__shape {
  position: absolute;
  top: 90px;
  width: 200px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.about-hero__shape--left {
  left: 0;
}

.about-hero__shape--right {
  right: 0;
}

.about-hero .container {
  position: relative;
  z-index: 1;
}

.about-hero__title {
  margin: 0 0 var(--space-4);
}

.about-hero__subtitle {
  color: var(--color-text);
  font-size: var(--lead-size);
  margin: 0;
}

.about-hero__banner {
    max-width: 100%;
    margin: 0 auto;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.about-hero__banner img {
  display: block;
  width: 100%;
  height: auto;
}

.about-hero__text {
    margin: var(--space-8) auto 0;
    text-align: center;
    color: var(--color-text);
    font-size: var(
  --font-size-base);
    line-height: var(--text-lh);
}

/* Why Energielabel24 */
.about-why {
  /* First section after the hero: 32px top, canon rhythm below. */
  padding: var(--space-6) 0 var(--section-y);
}

.about-why .section-title {
  margin-bottom: var(--space-10);
}

.about-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack);
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .about-why__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.why-card {
  position: relative;
  display: grid;
  grid-template-columns: 0.8fr 1fr; /* icon + heading column narrower so the heading wraps to two lines */
  gap: var(--space-5);
  align-items: center;
  background-color: var(--color-light-grey);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  /* Reuse the global chamfer utilities: left-column cards add .chamfer-bl,
     right-column cards add .chamfer-br in the markup (same as home value-cards). */
  --chamfer: 25px;
  overflow: hidden;
}

.why-card__num {
  position: absolute;
  top: 14px;
  right: 24px;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: rgba(32, 44, 63, 0.12);
  line-height: 1;
}

.why-card__icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-bottom: var(--space-3);
  display: block;
}

.why-card__title {
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  font-weight: var(--heading-weight);
  color: var(--color-black);
  margin: 0;
}

.why-card__desc {
  font-size: var(--font-size-md); /* 16px */
  color: var(--color-black);
  margin: 0;
  line-height: 1.6;
}

/* Mission & Vision */
.about-mv {
    position: relative;
    margin-top: var(--section-y);
}

.about-mv__band {
  position: absolute;
  inset: 0;
  /* Figma: a flat rectangular band — no diagonal parallelogram tilt. */
  background-color: var(--color-dark-green);
}

.about-mv__band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Thin green accent stripe along the top, full width: flat top edge, full
     thickness across the left half, then tapering thinner from 50% to the right. */
  height: 16px;
  background-color: var(--color-main);
  clip-path: polygon(0 0, 100% 0, 100% 28%, 50% 100%, 0 100%);
}

.about-mv .container {
  position: relative;
  z-index: 2;
}

.about-mv__layout {
  display: grid;
  grid-template-columns: 1fr 280px 1fr;
  align-items: center;
  gap: var(--space-8);
  min-height: 350px;
}

.about-mv__col {
  color: #ffffff;
}

.about-mv__col--left {
  /* Figma: mission text + icon are right-aligned, flush toward the centre man. */
  text-align: right;
}

.about-mv__col--right {
  text-align: left;
}

.about-mv__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: var(--space-4);
}

/* Mission column is right-aligned, so push its icon to the right too. */
.about-mv__col--left .about-mv__icon {
  display: block;
  margin-left: auto;
}

.about-mv__title {
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--heading-weight);
  color: #ffffff;
  margin: 0 0 var(--space-3);
}

.about-mv__text {
  font-size: var(--font-size-md); /* Figma — 16px body, was 13px */
  color: #ffffff;
  line-height: 1.7;
  margin: 0;
}

.about-mv__man {
  align-self: end;
}

.about-mv__man img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: -130px auto 0;
}


/* About page responsive */
@media (max-width: 767px) {
  .about-hero__shape {
    display: none;
  }

  .why-card {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .about-mv__layout {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-mv__col {
    text-align: center;
  }

  .about-mv__man {
    order: -1;
    align-self: center;
  }

  .about-mv__man img {
    margin-top: -100px;
    max-width: 220px;
  }
}


/* ==========================================================================
   Openingsband voor de eigen templates (13-9-2026)
   --------------------------------------------------------------------------
   De gidsen, stadspagina's en de homepage openen op de lichtgrijze band. De
   pagina's met een eigen template (juridisch, klantervaringen, adviseurs,
   aanmelden, bevestiging, inloggen, beoordeling, zoeken) hadden nog een witte
   kop. Hier krijgen de kruimels en de paginakop diezelfde band. De band is
   breder dan zijn container: de schaduw met 100vmax spreiding vult de rest
   van de regel, clip-path laat hem horizontaal naar buiten treden zonder
   verticaal iets af te snijden.
   ========================================================================== */

.legal-page .breadcrumb,
.legal-page .legal-page__header,
.ce-page .breadcrumb,
.ce-page .ce-header,
.advisors-page .breadcrumb,
.advisors-page .advisors-page__header,
.advisor-register-page .breadcrumb,
.advisor-register-page .advisor-register__header,
.confirmation-page .breadcrumb,
.auth-page .breadcrumb,
.review-page .breadcrumb,
.request-form-page .breadcrumb,
.request-form-page .request-form-page__header,
.search-page .breadcrumb,
.search-page .search-page__header {
  background-color: var(--color-light-grey);
  box-shadow: 0 0 0 100vmax var(--color-light-grey);
  clip-path: inset(0 -100vmax);
}

.legal-page .breadcrumb,
.ce-page .breadcrumb,
.advisors-page .breadcrumb,
.advisor-register-page .breadcrumb,
.request-form-page .breadcrumb,
.search-page .breadcrumb {
  padding-top: var(--space-8);
}

/* De kop sluit zonder witte kier op de kruimels aan en draagt de onderrand
   van de band. */
.legal-page .legal-page__header,
.ce-page .ce-header,
.advisors-page .advisors-page__header,
.advisor-register-page .advisor-register__header,
.request-form-page .request-form-page__header,
.search-page .search-page__header {
  margin-top: 0;
  margin-bottom: var(--space-12);
  padding-top: var(--space-6);
  padding-bottom: var(--space-12);
}

/* Bevestiging, inloggen en het beoordelingsformulier hebben geen paginakop:
   daar draagt de kruimelstrook de band en begint de kaart eronder. */
.confirmation-page .breadcrumb,
.auth-page .breadcrumb,
.review-page .breadcrumb {
  padding: var(--space-8) 0 var(--space-8);
  margin-bottom: var(--space-12);
}

/* ==========================================================================
   Berichtenlijst ([el24_news_list], 13-9-2026)
   --------------------------------------------------------------------------
   Dezelfde tegels als "Gerelateerde gidsen", maar hier in main.css in plaats
   van guides.css: de lijst staat ook op de nieuwshub, en die pagina laadt het
   gidsstijlblad niet. Zonder deze regels viel de lijst terug op opsomtekens.
   ========================================================================== */

.news-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: 0 0 var(--space-6);
  padding: 0;
}

@media (min-width: 640px) {
  .news-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.news-list__item {
  --chamfer: 25px;
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--card-pad);
  background-color: var(--color-light-grey);
  border-radius: var(--radius-card);
  transition: background-color 0.15s ease;
}

.news-list__item:hover,
.news-list__item:focus-within {
  background-color: var(--color-light-green);
}

.news-list .guide-related__category {
  display: block;
  margin: 0 0 var(--space-3);
  color: var(--color-main-text);
}

.news-list .guide-related__link {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--card-title-size);
  font-weight: var(--heading-weight);
  line-height: var(--h3-lh);
  color: var(--color-text);
  text-decoration: none;
}

/* De hele tegel is de link. */
.news-list .guide-related__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.news-list__item:hover .guide-related__link,
.news-list__item:focus-within .guide-related__link {
  color: var(--color-main-text);
}

.news-list .guide-related__desc {
  margin: 0 0 var(--space-2);
}

.news-list .guide-related__date {
  margin: auto 0 0;
  padding-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Woningcijfers per stad ([el24_city_facts], 13-9-2026)
   --------------------------------------------------------------------------
   Zes tegels met de open CBS-cijfers voor de gemeente, in de vormentaal van de
   homepage: lichte vlakken, een afgeschuinde buitenhoek, het getal groot en de
   uitleg eronder. De bronregel staat er verplicht bij (CC BY 4.0).
   ========================================================================== */

.city-facts {
  margin: 0 0 var(--stack);
}

.city-facts__intro {
  margin: 0 0 var(--space-5);
}

.city-facts__grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: 0;
}

@media (min-width: 540px) {
  .city-facts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .city-facts__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.city-facts__tile {
  --chamfer: 22px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-light-grey);
  border-radius: var(--radius-card);
}

.city-facts__value {
  font-size: var(--h3-size);
  line-height: 1.15;
  font-weight: var(--heading-weight);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.city-facts__label {
  font-size: var(--text-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  color: var(--color-text);
}

.city-facts__note {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.city-facts__source {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Module 4.3-C: Legal Pages (Privacy Policy, Terms)
   ========================================================================== */

.legal-page {
  padding: 0 0 var(--section-y);
}

.legal-page .container {
  max-width: var(--container-reading);
}

.legal-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Table of Contents */
/* Witte kaart met dezelfde afgeschuinde hoek als "In het kort" op de gidsen,
   en de kicker als opschrift in plaats van een tweede H2-formaat. */
.legal-toc {
  --chamfer: 28px;
  background-color: var(--color-light-grey);
  border: 0;
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  margin-bottom: var(--section-y);
  -webkit-mask: linear-gradient(315deg, transparent 0 var(--chamfer), #000 var(--chamfer));
          mask: linear-gradient(315deg, transparent 0 var(--chamfer), #000 var(--chamfer));
}

.legal-toc__title {
  font-size: var(--eyebrow-size);
  font-weight: var(--heading-weight);
  line-height: 1.3;
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--color-main-text);
  margin-bottom: var(--space-4);
}

.legal-toc__list {
  list-style: decimal;
  margin-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .legal-toc__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.legal-toc__list a {
  color: var(--color-main-text);
  text-decoration: none;
  font-size: var(--text-sm);
}

.legal-toc__list a:hover {
  text-decoration: underline;
}

/* Legal Sections */
.legal-section {
  margin-bottom: var(--section-y);
  scroll-margin-top: var(--space-20);
}

.legal-section h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--heading-weight);
  margin-bottom: var(--stack);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primary);
}

.legal-section h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  font-weight: var(--heading-weight);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.legal-section p {
  line-height: var(--text-lh);
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

/* Source quote (13-9-2026): a literal sentence from RVO or Rijksoverheid under
   a question heading, with the source named in the cite. A plain green rule on
   the left, no icon, no card: the words carry the weight, not the box. */
.legal-section .source-quote {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  border-left: 3px solid var(--color-primary);
  background: none;
}

.legal-section .source-quote p {
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--color-text-strong);
}

.legal-section .source-quote cite {
  display: block;
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.legal-section .source-quote cite a {
  color: var(--color-primary);
  font-weight: 600;
}

.legal-section ul,
.legal-section ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.legal-section li {
  line-height: var(--text-lh);
  margin-bottom: var(--space-2);
}

/* Lead paragraph: the first paragraph after a section heading.
   Seven sections that each open with a heading and then the same grey block of
   text give the reader no way in. The opening line of a section is the answer
   the page was opened for, so it carries a little more weight than the
   paragraphs that qualify it.

   It stays 16px, in --color-text, on every viewport. The design canon fixes
   running text at 16/1.6 and e2e/design-canon.spec.ts reads that back from the
   render for every visible paragraph of 100+ characters, so the emphasis is in
   the weight, not in the size. Only the weight is set here: a converted
   <address> can be the first element after a heading, and
   `.legal-section p:where(.el24-converted)` must keep owning its margin. */
.legal-section > h2 + p {
  font-weight: var(--font-weight-medium);
}

/* Tables inside a content section.

   Core ships these with a 1px border on all four sides of every cell and 8px
   of padding, which turns a five-row price table into a spreadsheet: every
   cell shouts, and the eye has no line to follow. Horizontal rules only, one
   hairline around the whole table, and room to breathe. */
.legal-section figure.wp-block-table {
  /* The table scrolls inside its own figure; the page never scrolls sideways
     because of it. */
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--stack) 0;
}

.legal-section .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-grey-3);
  font-size: var(--text-size);
  line-height: var(--text-lh);
  color: var(--color-text);
}

.legal-section .wp-block-table th,
.legal-section .wp-block-table td {
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--color-grey-3);
  text-align: left;
  vertical-align: top;
}

/* Header row, where the table has one. */
.legal-section .wp-block-table thead th {
  background-color: var(--color-bg-alt);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  border-bottom: 2px solid var(--color-grey-3);
}

/* A two-column fact table carries no <thead>: its first column is the header,
   one label per row. `:first-child:nth-last-child(2)` matches a cell that is
   both the first and the second-to-last in its row, so this is exactly the
   two-column shape and never the four-column advisor table. */
.legal-section .wp-block-table tbody tr > td:first-child:nth-last-child(2) {
  width: 34%;
  background-color: var(--color-bg-alt);
  font-weight: var(--font-weight-semibold);
}

/* The table's own hairline closes the last row. */
.legal-section .wp-block-table tbody tr:last-child > th,
.legal-section .wp-block-table tbody tr:last-child > td {
  border-bottom: 0;
}

/* Caption below a table: canon muted text, 14px in --color-text-strong.
   It lives inside the scrolling figure, so it is pinned to the left edge:
   scrolling a wide table sideways must not carry its explanation off-screen. */
.legal-section .wp-block-table figcaption {
  position: sticky;
  left: 0;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-strong);
}

@media (max-width: 767px) {
  .legal-section .wp-block-table th,
  .legal-section .wp-block-table td {
    padding: 12px;
  }

  /* De vierkoloms adviseurstabel op de stadspagina mat 518,2px in een figure
     van 358px: kolom "Levertijd" werd midden in het woord afgekapt op de
     viewportrand en kolom "Beoordeling" begon 35px daarbuiten. De figure
     scrolt wel zelf, maar zonder zichtbare affordance verdwijnt die vierde
     kolom stilzwijgend. Onder 768px wordt elke rij daarom een kaart: naam als
     titel, de drie feiten eronder als label/waarde-regels.

     De kolomlabels staan hier in de CSS omdat de tabel uit de paginacontent
     komt en geen data-label draagt. Ze hangen dus aan de kolomvolgorde: de
     selectors matchen alleen een rij met exact vier cellen
     (`:nth-child(n):nth-last-child(m)`), zodat een gewijzigde tabel de labels
     laat vervallen in plaats van ze te laten liegen. De tabel bestaat alleen
     in het Nederlands (er is geen /en/-variant van de stadspagina). */
  .legal-section .wp-block-table.city-advisors table,
  .legal-section .wp-block-table.city-advisors tbody,
  .legal-section .wp-block-table.city-advisors tr,
  .legal-section .wp-block-table.city-advisors td {
    display: block;
    width: auto;
  }

  .legal-section .wp-block-table.city-advisors thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .legal-section .wp-block-table.city-advisors tr {
    padding: var(--space-3) 0;
  }

  .legal-section .wp-block-table.city-advisors tr + tr {
    border-top: 1px solid var(--color-grey-3);
  }

  .legal-section .wp-block-table.city-advisors td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-1) var(--space-3);
    border-bottom: 0;
  }

  .legal-section .wp-block-table.city-advisors td:first-child {
    display: block;
    padding-bottom: var(--space-2);
    font-weight: var(--font-weight-bold);
  }

  .legal-section .wp-block-table.city-advisors td::before {
    color: var(--color-text-strong);
    font-weight: var(--font-weight-semibold);
  }

  .legal-section .wp-block-table.city-advisors tbody tr > td:nth-child(2):nth-last-child(3)::before {
    content: "Vanafprijs";
  }

  .legal-section .wp-block-table.city-advisors tbody tr > td:nth-child(3):nth-last-child(2)::before {
    content: "Levertijd";
  }

  .legal-section .wp-block-table.city-advisors tbody tr > td:nth-child(4):nth-last-child(1)::before {
    content: "Beoordeling";
  }
}

/* ==========================================================================
   Content page: closing call to action (rendered by inc/content-cta.php)
   ========================================================================== */

/* 13-9-2026: the closing block is the homepage's dark close band (compact
   form, photo); markup in inc/content-cta.php, band styles under .home-band
   and .home-close. Only the spacing is set here: the band is full-bleed and
   the footer follows it directly. */
.content-cta.home-band {
  margin: 0;
}

.content-cta.home-band .content-cta__badge {
  display: block;
}


/* Zelfde geval als .faq-cta__badge, een maat kleiner: een niet-klikbare pil
   van 144x30px met limerand die "Zelf vergelijken" gebiedt, 260px boven de
   echte knop op dezelfde donkere band. Twee omrande pillen boven elkaar,
   waarvan er één werkt. Ook deze wordt de canon-eyebrow, zodat beide donkere
   CTA-banden hetzelfde kickerpatroon dragen. */
.content-cta__badge {
  display: inline-block;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: var(--eyebrow-size);
  font-weight: var(--heading-weight);
  line-height: 1.3;
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--color-second);
}

.content-cta__title {
  margin: 0 0 var(--space-3);
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--heading-weight);
  color: #ffffff;
}

/* Canon: running text on a dark band is pure white, never a translucent one. */
.content-cta__text {
  margin: 0;
  font-size: var(--text-size);
  line-height: var(--text-lh);
  color: #ffffff;
}


/* The theme's own primary button at canon size: this is the one button on
   the page and the reader is 55+. */
.content-cta__btn {
  min-height: var(--btn-height);
  padding: 0 var(--space-8);
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
}


/* Below the 1024 breakpoint the two columns no longer both fit: the text
   column drops to ~350px and the heading breaks over two lines next to a
   button with empty space under it. Stacked, it reads as one block again. */

/* On a phone the button takes the full width; on a tablet it keeps its own,
   because a 780px-wide button reads as a bar, not as a button. */
@media (max-width: 767px) {

  .content-cta__btn {
    width: 100%;
  }
}

/* Legal Definitions */
.legal-definitions {
  background-color: var(--color-bg-muted);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.legal-definitions dt {
  font-weight: 600;
  margin-top: var(--space-3);
}

.legal-definitions dt:first-child {
  margin-top: 0;
}

.legal-definitions dd {
  margin-left: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Legal Contact */
.legal-contact {
  font-style: normal;
  background-color: var(--color-bg-muted);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  line-height: 1.8;
}

.legal-contact a {
  color: var(--color-main-text);
  text-decoration: none;
}

.legal-contact a:hover {
  text-decoration: underline;
}


/* Full-width submit button */
.btn--block {
  width: 100%;
  justify-content: center;
}

.form-actions {
  margin-top: var(--space-5);
}


@keyframes el24-spin {
  to {
    transform: rotate(360deg);
  }
}


/* ==========================================================================
   Module 4.4: Error Page (API unavailable / 503)
   ========================================================================== */

.error-page {
  padding: var(--space-16) 0;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-page__content {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-8);
  background-color: var(--color-bg-muted);
  border-radius: var(--radius-lg);
}

.error-page__icon {
  display: block;
  font-size: 4rem;
  margin-bottom: var(--space-4);
  opacity: 0.6;
}

.error-page h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: var(--h1-weight);
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

.error-page p {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

.error-page__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

@media (min-width: 480px) {
  .error-page__actions {
    flex-direction: row;
    justify-content: center;
  }
}


.advisor-profile .no-reviews {
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-4);
  text-align: center;
  background-color: var(--color-bg-muted);
  border-radius: var(--radius-md);
}


/* CTA banner */
.ce-cta {
  position: relative;
  /* Extra top margin gives the overflowing head room above the banner. */
  margin-top: calc(var(--section-y) + 70px);
  background-color: var(--color-dark-green);
  border-radius: var(--radius-card);
  padding: var(--space-12) var(--space-10);
  overflow: visible; /* let the figure's head poke out the top */
  min-height: 260px;
  display: flex;
  align-items: center;
}
/* Keep the decorative background within the rounded banner; only the figure overflows. */
.ce-cta__content {
  position: relative;
  z-index: 2;
  max-width: 560px;
}
.ce-cta__image {
  position: absolute;
  right: var(--space-10);
  bottom: 0; /* pin feet/arms to the banner bottom… */
  height: 340px; /* …and stand taller than the banner so the head overflows the top */
  width: auto;
  object-fit: contain;
  object-position: bottom right;
  z-index: 3; /* above content + background */
  pointer-events: none;
}
.ce-cta__eyebrow {
  color: var(--color-second);
  font-style: italic;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl);
  margin: 0 0 var(--space-1);
}
.ce-cta__title {
  color: #fff;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--heading-weight);
  margin: 0 0 var(--space-6);
}
.ce-cta__btn {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-main-text);
  color: #fff;
  padding: 0 var(--space-8);
  border-radius: var(--radius-btn);
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  text-decoration: none;
  transition: background-color 0.15s;
  min-height: var(--btn-height);
}
.ce-cta__btn:hover {
  background-color: var(--color-main-text-dark);
}


/* Responsive */
@media (max-width: 960px) {
  .ce-cta {
    margin-top: calc(var(--section-y) + 50px);
  }
  .ce-cta__image {
    height: 280px;
    opacity: 0.95;
  }
}
@media (max-width: 639px) {
  .ce-cta {
    min-height: 0;
    margin-top: var(--section-y);
    overflow: hidden;
  }
  .ce-cta__image {
    display: none;
  } /* avoid overlapping text on mobile */
  .ce-cta__content {
    max-width: 100%;
  }
}

/* ============================================================
   MOTION SYSTEM — subtle, purposeful animation tokens + helpers
   Enter = ease-out, standard = ease. Durations 200–550ms.
   ============================================================ */
:root {
  --el24-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --el24-ease-out: cubic-bezier(0, 0, 0.2, 1);
}

@keyframes el24FadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes el24ErrorIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes el24Shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* --- Scroll reveal ---------------------------------------------------
   Elements tagged data-el24-reveal fade/slide in the first time they
   scroll into view. The hidden state only applies after main.js adds
   .el24-motion to <html> (JS available + no reduced-motion preference),
   so content is never invisible without JavaScript. Stagger with an
   inline --el24-reveal-delay custom property. */
html.el24-motion [data-el24-reveal] {
  opacity: 0;
  transition:
    opacity 0.4s var(--el24-ease-out),
    transform 0.4s var(--el24-ease-out);
  transition-delay: var(--el24-reveal-delay, 0ms);
}
/* The slide-up half of the effect skips elements whose layout depends on
   their own transform (e.g. .summary-records) — tag those with
   data-el24-reveal="fade" to get an opacity-only reveal. */
html.el24-motion [data-el24-reveal]:not([data-el24-reveal="fade"]) {
  transform: translateY(12px);
}
html.el24-motion [data-el24-reveal].is-revealed {
  opacity: 1;
}
html.el24-motion [data-el24-reveal]:not([data-el24-reveal="fade"]).is-revealed {
  transform: none;
}

/* --- Card hover lift -------------------------------------------------- */
.value-card {
  transition: transform 0.25s var(--el24-ease), box-shadow 0.25s var(--el24-ease);
}
.value-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

/* --- Form feedback ----------------------------------------------------
   Validation errors slide down instead of popping; invalid inputs give a
   brief shake; the success note eases in. Animations replay whenever
   Alpine toggles the element back to display:block. */
.hero-form__error,
.contact-form__error {
  animation: el24ErrorIn 0.25s var(--el24-ease-out);
}
.contact-form__success {
  animation: el24FadeUp 0.35s var(--el24-ease-out);
}
.hero-form__input.has-error,
.contact-form .has-error {
  animation: el24Shake 0.4s var(--el24-ease);
}

/* --- Button press feedback -------------------------------------------- */
.btn,
.hero-form__submit {
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: 0.2s;
  transition-timing-function: var(--el24-ease);
}
.btn:active,
.hero-form__submit:active {
  transform: scale(0.98);
}

/* --- Reduced motion: switch every animation/transition effectively off. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Block Editor Bridge
   --------------------------------------------------------------------------
   Page content is authored as core Gutenberg blocks (see inc/blocks.php). Core
   emits its own wrappers and classes; these rules make that output render
   exactly like the hand-written sections it replaced. The theme's own BEM
   classes ride along on the blocks, so everything above still applies.

   NOTE ON SPACING: all vertical rhythm comes from the BEM rules above, exactly
   as before the conversion. Core's own flow-gap rules are disarmed by
   styles.spacing.blockGap "0px" in theme.json, which emits them inside
   :where() at zero specificity - every theme rule beats them. Do NOT add
   blanket margin rules here: anything with class-level specificity sits after
   the BEM rules in this file and silently overrides their margins (that bug
   shipped once - sections lost their top margins and stuck together).
   ========================================================================== */

/* NOTE: no blanket figure margin rule here on purpose. WP 7 core adds no
   figure margins, the theme reset already zeroes the UA default, and a
   higher-specificity zero rule silently killed BEM margins on converted
   figures (.step-header__icon lost its margin-bottom — that bug shipped). */

/* Converted <span>/<address> elements are paragraphs now, so the base
   `p { margin-bottom: 15px }` prose rule suddenly applies to them — it never
   did in the design.
   `:where()` keeps this at the specificity of a bare element selector: it sits
   later in the file than the base `p` rule so it wins there, while ANY
   component rule (a single class, e.g. `.faq-cta__badge { margin-bottom }` or
   `.step-header__label { margin-bottom }`) still out-ranks it and keeps its
   intended spacing. One rule, no per-class whack-a-mole. */
p:where(.el24-converted) {
  margin-bottom: 0;
}

/* Same idea one level up: the legal pages style their prose with
   `.legal-section p` (0-1-1), which out-ranks the rule above. Match that
   specificity so a converted <address> keeps the zero margin it had. */
.legal-section p:where(.el24-converted) {
  margin-bottom: 0;
}

/* The FAQ empty-state message is a standalone <p> that never carried the prose
   margin (its own padding does the spacing). */
.site-main p.faq-accordion__empty {
  margin-bottom: 0;
}

/* Converted CTA links: the anchor used to be a direct child of its parent, so
   in a flex parent it was a flex item (which blockifies inline-flex buttons).
   `display: contents` on the wrapper paragraph removes its box, restoring the
   anchor to that position in the layout. */
.site-main p.el24-cta {
  display: contents;
}

.site-main figure.wp-block-image:is(
    .hero__shape-img,
    .about-hero__shape,
    .faq-hero__shape,
    .value-props__image,
    .faq-support__image,
    .faq-cta__img
  ) > img {
  display: block;
  width: 100%;
  height: auto;
}

/* 3. Height-driven images: the class sets a height (taller than the container
      so the artwork overflows by design), width follows the aspect. */
.site-main figure.wp-block-image:is(
    .step-card__person,
    .ce-cta__image
  ) > img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Buttons (admin-inserted core buttons; converted CTAs keep their original
   <a class> inside a paragraph and need no bridging at all)
   -------------------------------------------------------------------------- */

.site-main .wp-block-button.ce-cta__btn > .wp-block-button__link {
  display: inline-flex;
  padding: 0 var(--space-8);
  border-radius: var(--radius-btn);
  background-color: var(--color-main-text);
  color: #fff;
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  text-decoration: none;
  transition: background-color 0.15s;
  min-height: var(--btn-height);
  align-items: center;
}

.site-main .wp-block-button.ce-cta__btn > .wp-block-button__link:hover {
  background-color: var(--color-main-text-dark);
}

.site-main .wp-block-button.ce-cta__btn {
  padding: 0;
  background: none;
}

/* --------------------------------------------------------------------------
   Accordion (core Details block) — the ONE style
   --------------------------------------------------------------------------
   Home (.faq-item), FAQ page, guide and province pages, contact and comparison
   (.faq-accordion__item) all render the same rows. Since 11-9-2026 the model is
   the FAQ of overstappen.nl (measured 1440px: question 18px/600 #181D27 in a
   full-width button, 24px chevron at the right, item padding-bottom 24px, a
   1px #E9EAEB line under every item except the last, no background, no
   radius, no shadow). Botan: the grey box with the green edge and the sliced
   corners was "the AI look"; he never wants that kind of border again. So:
   no box at all — the row is the accordion, the hairline separates the rows,
   the answer sits under the question inside the same row. */

.faq-list,
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-accordion {
  max-width: var(--container-reading);
  margin: 0 auto;
}

/* 21-9-2026: elke vraag is een eigen vlak in plaats van een regel met een
   haarlijn eronder. Lichtgrijs, 12px rond met één afgeschuinde hoek, en een
   groene plus rechts die bij het openen een min wordt. Dezelfde blokvorm als
   de rest van de site, nu ook voor de vragen. */
.site-main details.faq-item,
.site-main details.faq-accordion__item {
  --chamfer: 22px;
  margin: 0 0 var(--space-3);
  padding: 0 var(--space-6);
  background: var(--color-light-grey);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: none;
}

.site-main details.faq-item:last-child,
.site-main details.faq-accordion__item:last-child {
  margin-bottom: 0;
}

/* De afgeschuinde hoek zit rechtsonder, zoals bij de blokken elders op de
   site. De klasse chamfer-tlbr uit oude inhoud wordt door deze regel
   overschreven, zodat elk vragenblok dezelfde hoek heeft. */
.site-main details.faq-item.chamfer-tlbr,
.site-main details.faq-accordion__item.chamfer-tlbr,
.site-main details.faq-item,
.site-main details.faq-accordion__item {
  -webkit-mask: linear-gradient(315deg, transparent 0 var(--chamfer), #000 var(--chamfer));
          mask: linear-gradient(315deg, transparent 0 var(--chamfer), #000 var(--chamfer));
}

.site-main details.faq-item > summary,
.site-main details.faq-accordion__item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  list-style: none;
  font-size: var(--font-size-lg);
  font-weight: var(--heading-weight);
  line-height: 1.3;
  color: var(--color-black);
}

.site-main details.faq-item > summary:hover,
.site-main details.faq-accordion__item > summary:hover,
.site-main details.faq-item > summary:focus-visible,
.site-main details.faq-accordion__item > summary:focus-visible {
  color: var(--color-main-text);
}

.site-main details.faq-item > summary::-webkit-details-marker,
.site-main details.faq-accordion__item > summary::-webkit-details-marker {
  display: none;
}

.site-main details.faq-item > summary::marker,
.site-main details.faq-accordion__item > summary::marker {
  content: "";
}

/* De plus: twee balkjes in het merkgroen, getekend met de achtergrond zodat
   er geen icoonbestand aan te pas komt. Bij het openen krimpt het staande
   balkje weg en blijft er een min over. */
.site-main details.faq-item > summary::after,
.site-main details.faq-accordion__item > summary::after {
  content: "";
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border: 0;
  background-color: transparent;
  background-image:
    linear-gradient(var(--color-main), var(--color-main)),
    linear-gradient(var(--color-main), var(--color-main));
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 18px 2.5px, 2.5px 18px;
  transition: background-size 0.2s ease;
}

.site-main details.faq-item[open] > summary::after,
.site-main details.faq-accordion__item[open] > summary::after {
  background-size: 18px 2.5px, 2.5px 0;
}

.site-main details.faq-item .faq-item__answer,
.site-main details.faq-accordion__item .faq-accordion__answer {
  max-width: 66ch;
  padding: 0 var(--space-8) var(--space-6) 0;
  font-size: var(--text-size);
  line-height: var(--text-lh);
}

.site-main .faq-item__answer p,
.site-main .faq-accordion__answer p {
  margin: 0;
  color: var(--color-text);
}

.site-main .faq-item__answer p + p,
.site-main .faq-accordion__answer p + p {
  margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   Legal definitions (dl converted to a run of .legal-definition paragraphs)
   -------------------------------------------------------------------------- */

/* The original .legal-definitions <dl> references --color-bg-muted, which is
   defined nowhere — so the box always rendered TRANSPARENT, with only its
   15px padding indenting the content. Replicate exactly that (a grey panel
   here once shipped as a "restoration" of a background that never existed). */
.site-main .legal-definition {
  margin: 0;
  padding: 0 var(--space-4);
  background: none;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.site-main .legal-definition + .legal-definition {
  margin-top: var(--space-3);
}

.site-main .legal-definition:first-of-type {
  padding-top: var(--space-4);
}

.site-main .legal-definition:last-of-type {
  padding-bottom: var(--space-4);
}

.site-main .legal-definition strong {
  color: var(--color-text);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Contact details list (core/list-item cannot carry classes)
   -------------------------------------------------------------------------- */

.site-main .contact-direct__list > li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Zelfde tapdoel als de contactregels in de footer: de tekstregel was
     27,2px, en dit is op /contact/ juist de directe actie. */
  min-height: 44px;
  font-size: var(--font-size-base);
  color: var(--color-black);
}

.site-main .contact-direct__list > li a {
  display: flex;
  align-items: center;
  align-self: stretch;
  color: var(--color-black);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-main .contact-direct__list > li a:hover {
  color: var(--color-main);
}

/* --------------------------------------------------------------------------
   Converted <address> card (now a paragraph, keeps the class)
   -------------------------------------------------------------------------- */

.site-main p.legal-contact {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Hero trust badges (core/list-item cannot carry the .hero__badge class)
   -------------------------------------------------------------------------- */

.site-main .hero__badges > li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-main-text);
  background-color: transparent;
  border: 2px solid var(--color-main-text);
  border-radius: 28px;
  transition: all 0.2s ease;
}

/* Converted CTA links (paragraph-wrapped anchors): the wrapper must not take
   the prose paragraph margin — anchors never had one. */
.site-main p.el24-cta {
  margin-bottom: 0;
}


/* ==========================================================================
   Header (desktop)
   --------------------------------------------------------------------------
   Between 1024 and 1279px the row does not fit (seven labels, the language
   switch, "Inloggen adviseur" and the button), so that range keeps the
   hamburger menu, like a tablet in landscape. From 1280px the header is one
   row in the shared page column: the menu hangs off the logo at a fixed gap,
   the actions hang off the right edge, and only the words differ in width
   between NL and EN. The size budget itself (15px/700 labels, 8px sides, no
   overlap) is the final block at the end of this file, which must stay last.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Comparison page: the explanatory content below the widget
   --------------------------------------------------------------------------
   The widget answers "which assessor"; this content answers "how does this
   work and what am I looking at". It sits below the widget on purpose, so the
   comparison itself stays the first thing on screen.

   Only the layout lives here. Type, colour and rhythm come from the canon
   tokens, and the cards reuse the existing chamfer, eyebrow and step-label
   classes rather than introducing a second visual language.

   Placed at the end of the file so `.comparison-page__card h3` (0-1-1) wins
   over the equally specific `.legal-section h3` that sits earlier. */

.comparison-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack);
  margin-top: var(--stack);
}

/* Three steps across, four criteria two by two. Single column below the md
   breakpoint, so a 390px phone never scrolls sideways. */
@media (min-width: 768px) {
  .comparison-page__grid--steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .comparison-page__grid--criteria {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Card: white on the page's own soft grey, with one cut corner in the house
   chamfer language. No shadow: the mask that cuts the corner would clip it. */
/* De kaart stond op 0px terwijl het stijlplan hem bij naam in de kaartenrij
   zet (--radius-card 12px). De afgeschuinde hoek is een mask en bijt niet met
   de radius. */
.comparison-page__card {
  --chamfer: 20px;
  padding: var(--card-pad);
  background-color: var(--color-white);
  border: var(--card-border);
  border-radius: var(--radius-card);
}

/* The card sets its own vertical rhythm: the heading leads (no top margin from
   `.legal-section h3`) and the closing paragraph does not push the padding
   open. */
.comparison-page__card h3 {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.comparison-page__card p:last-child {
  margin-bottom: 0;
}

/* Label above the card heading: the step pill from the home page, and the
   plain green eyebrow for the criteria. Both sit closer to their heading here
   than they do in their original section.

   The colour is restated because these labels are paragraphs inside a
   `.legal-section`, whose `.legal-section p` rule (0-1-1) out-ranks the single
   class on `.eyebrow` / `.step-header__label` and would repaint the canon's
   green label in body ink. */
.comparison-page__card .step-header__label {
  margin-bottom: var(--space-4);
  color: var(--color-main-text);
}

/* Deze twee herhaalden var(--color-primary) en hielden daarmee 6 van de 13
   labels op #06a651 staan nadat de basisregels naar de tekstgroen gingen
   (gemeten 3,19:1 op wit). Nu dezelfde tekstgroen als de basisregel. */
.comparison-page__card .eyebrow {
  margin-bottom: var(--space-2);
  color: var(--color-main-text);
}

/* One optical size for the three step icons: their intrinsic heights differ
   (40, 43, 43), which reads as three slightly different icons in a row. */
.comparison-page__card .step-header__icon {
  margin-bottom: var(--space-4);
}

.comparison-page__card .step-header__icon > img {
  width: auto;
  height: 40px;
}

/* Intro line above a card grid: body size, but held to a comfortable measure
   so a 1320px container does not stretch it past what the eye tracks. */
.comparison-page__lead {
  max-width: 62ch;
}

/* Column blocks have no gutter of their own: theme.json sets blockGap to 0,
   which is right for the hand-built section layouts but leaves core column
   blocks in page content touching. Between 768 and 1024 the city links in
   adjacent columns ran into each other with no space at all. */
.wp-block-columns {
  gap: var(--stack, 24px);
}

@media (max-width: 767px) {
  .wp-block-columns {
    gap: 8px;
  }
}


/* --------------------------------------------------------------------------
   Hero form: product toggle, house-number addition, type help, BAG note
   -------------------------------------------------------------------------- */
/* 21-9-2026: twee kolommen in plaats van vrij uitlijnende pillen, want het
   energielabel en het maatwerkadvies zitten nu in één vakje dat twee rijen
   hoog is. Daarnaast blijven de twee losse diensten onder elkaar staan. */
.hero-form__products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 6px;
  margin-bottom: var(--space-3);
}

/* Het vakje van het energielabel: de rand zit om het vakje, niet om de twee
   regels erin. Een maatwerkadvies gaat altijd samen met een label, dus wie
   het advies aanvinkt ziet de regel erboven meevinken, binnen hetzelfde vak. */
/* Elke kolom regelt zijn eigen hoogte: zo blijven de twee losse diensten
   bovenaan staan, ook als het vakje ernaast hoger wordt. */
.hero-form__product-column {
  display: grid;
  align-content: start;
  gap: 6px;
}

.hero-form__product-stack {
  display: grid;
  align-content: start;
  border: 1.5px solid var(--color-grey-2);
  border-radius: 22px;
  background: var(--color-white);
  overflow: hidden;
}

/* Twee klassen, want .hero-form__product staat verderop in het bestand en zou
   anders met zijn eigen rand en ronding over deze regels heen gaan. */
.hero-form__product-stack .hero-form__product {
  justify-content: flex-start;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.hero-form__product-stack .hero-form__product--addon {
  border-top: 1.5px solid var(--color-grey-2);
}

/* Het plusteken tussen het label en het advies: geen zin, één teken dat zegt
   dat deze twee bij elkaar opgeteld worden. */
.hero-form__product-plus {
  margin-right: 2px;
  color: var(--color-main-text);
}

.hero-form__product-stack .hero-form__product:hover {
  background: var(--color-grey);
}

.hero-form__product-stack .hero-form__product.is-active {
  background: var(--color-light-green, #F0F8F1);
}

@media (max-width: 479px) {
  .hero-form__products {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-form__product-column {
    gap: 6px;
  }
}

.hero-form__product {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px 8px 12px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text);
  background: var(--color-white);
  border: 1.5px solid var(--color-grey-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* The box in front of the label: an empty square, a ticked green one when on. */
.hero-form__product-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--color-white);
  background: var(--color-white);
  border: 2px solid var(--color-grey-3, #c9d2c2);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hero-form__product-box svg {
  opacity: 0;
}

.hero-form__product:hover {
  border-color: var(--color-main-text);
}

.hero-form__product.is-active {
  color: var(--color-main-dark, #0A392C);
  background: var(--color-light-green, #F0F8F1);
  border-color: var(--color-main-text);
}

.hero-form__product.is-active .hero-form__product-box {
  background: var(--color-main-text);
  border-color: var(--color-main-text);
}

.hero-form__product.is-active .hero-form__product-box svg {
  opacity: 1;
}

/* De BAG-regel verschijnt pas als het adres bekend is: gevonden geeft één
   kaart van 59px, niet gevonden twee keuzelijsten van 56px. Zonder
   gereserveerde hoogte sprong de knop eronder een regel omlaag zodra de BAG
   antwoordde, en bij een terugkerende bezoeker zelfs pas na twee seconden,
   omdat het opgeslagen adres dan pas werd teruggezet. 60px dekt beide
   toestanden, op de telefoon net zo goed als op een breed scherm.

   Twee ingangen: is-reserved zodra er een adres in de velden staat, en
   el24-has-address die al vóór de eerste tekening wordt gezet door het
   scriptje in wp_head als er een adres in localStorage staat. */
.hero-form__group--bag.is-reserved,
.el24-has-address .hero-form__group--bag {
  min-height: 60px;
}

/* De regel houdt altijd zijn plek in de vorm: zichtbaar of niet, de velden
   eronder blijven staan waar ze staan. visibility in plaats van display, want
   dan leest een schermlezer hem ook alleen voor als hij er echt toe doet. */
.hero-form__products-hint {
  margin: -4px 0 var(--space-3);
  font-size: var(--font-size-sm);
  text-align: center;
  color: var(--color-text-muted, #5b6472);
  visibility: hidden;
}

.hero-form__products-hint.is-visible {
  visibility: visible;
}

.hero-form__number-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.hero-form__number-row .hero-form__input-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}

.hero-form__input--addition {
  flex: 0 0 76px;
  width: 76px;
  padding-left: 12px !important;
  padding-right: 12px !important;
  text-align: center;
}

.hero-form__help {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-block;
  line-height: 0;
}

.hero-form__help-btn {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 26px;
  color: var(--color-text);
  background: var(--color-white);
  border: 1.5px solid var(--color-grey-2);
  border-radius: 50%;
  cursor: pointer;
}

/* 44px hit area around the 28px "?" without moving anything visually. */
/* Het knopje is 28px in beeld; deze ::before is het raakvlak eromheen. Met
   `inset: -8px` werd dat 42px en niet 44: `inset` rekent vanaf het padding-
   vlak, dus binnen de rand van 1,5px (28 - 3 + 16 = 41). De maat staat nu
   los van rand en padding, zodat er 44px staat waar 44px hoort. De z-index
   houdt het raakvlak boven het select-veld eronder, dat er in de bron na
   komt en het anders aan de onder- en rechterkant overnam. */
.hero-form__help-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.hero-form__help-btn {
  z-index: 2;
}

.hero-form__help-text {
  position: absolute;
  right: 0;
  top: 36px;
  z-index: 20;
  width: 280px;
  padding: 10px 12px;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  text-align: left;
  color: var(--color-text);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.hero-form__bagcard {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--field-height);
  padding: 8px 12px 8px 14px;
  font-size: var(--text-sm);
  color: var(--color-black);
  background: #ffffff;
  border: 1.5px solid var(--color-main);
  border-radius: var(--radius-md);
}

.hero-form__bagcard-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--color-main);
}

.hero-form__bagcard-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}

.hero-form__bagcard-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted, #5b6472);
  display: block;
}

.hero-form__bagcard-text strong {
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.hero-form__bagcard-edit {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 6px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-main-text);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

.hero-form__pair {
  display: flex;
  gap: 8px;
}

.hero-form__pair .hero-form__input {
  flex: 1 1 50%;
  min-width: 0;
}

.hero-form__pair .hero-form__select {
  padding-left: 12px !important;
  padding-right: 34px !important;
  font-size: var(--field-font);
  background-position: right 12px center;
}

.hero-form__input--plain {
  padding-left: 16px !important;
}

.hero-form__hint {
  display: block;
  margin: -4px 0 10px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--color-text);
}

/* Below the two-column breakpoint the BAG card / m² + build year pair gets a
   row of its own, so the bold summary never has to break. */
@media (max-width: 1023px) {
  .hero-form__group--bag {
    grid-column: 1 / -1;
  }
}

.hero-form__bag {
  margin: 4px 0 8px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted, #5b6472);
  text-align: center;
}

@media (max-width: 767px) {
  .hero-form__help-text {
    right: -44px;
    left: auto;
  }
}

/* --------------------------------------------------------------------------
   Partner strip ([el24_partners]),
   advisor offer (partials/advisor-offer.php), advisors directory page
   -------------------------------------------------------------------------- */

.el24-partners {
  padding: var(--space-6) 0;
  text-align: center;
}

.el24-partners__title {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted, #5b6472);
}

.el24-partners__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.el24-partners__item img {
  height: 48px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.el24-partners__item img:hover {
  filter: none;
  opacity: 1;
}

.advisor-offer {
  padding: 0 0 var(--space-6);
}

.advisor-offer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--card-pad);
  background: var(--color-white);
  border: var(--card-border);
  border-radius: var(--radius-card);
}

.advisor-offer__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--eyebrow-size);
  font-weight: var(--heading-weight);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--color-main-text);
}

.advisor-offer__title {
  margin: 0 0 var(--space-3);
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}

.advisor-offer__text {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

.advisor-offer__text--small {
  font-size: var(--text-sm);
  color: var(--color-text-muted, #5b6472);
}

.advisor-offer__price {
  margin: var(--space-3) 0;
  font-size: var(--font-size-lg);
}

.advisor-offer__price strong {
  font-size: var(--font-size-2xl);
  color: var(--color-main);
}

.advisor-offer__points {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.advisor-offer__points li {
  padding-left: 28px;
  position: relative;
}

.advisor-offer__points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-main);
}

.advisor-offer__points strong {
  display: block;
  margin-bottom: 2px;
}

.advisor-offer__points span {
  font-size: var(--text-sm);
  color: var(--color-text-muted, #5b6472);
}

.advisor-offer__faq {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border: var(--card-border);
  border-radius: var(--radius-card);
}

.advisor-offer__faq summary {
  cursor: pointer;
  font-weight: var(--font-weight-bold);
}

.advisor-offer__faq dt {
  margin-top: var(--space-3);
  font-weight: var(--font-weight-semibold);
}

.advisor-offer__faq dd {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted, #5b6472);
}

.advisors-page__subtitle {
  max-width: 66ch;
  margin: var(--space-2) auto 0;
  font-size: var(--lead-size);
  color: var(--color-text);
}

.advisors-page__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) 0 0;
}

@media (min-width: 768px) {
  .advisor-offer__grid {
    grid-template-columns: 1.2fr 1fr;
  }
}

/* ==========================================================================
   Audit 2026-09: hero ribbon, chips, footer trust line, tap targets,
   one accordion style, inline search form (city pages)
   ========================================================================== */

/* --- A–G label ribbon (replaces the "vs" oval) ---------------------------- */
.hero__ribbon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.hero__ribbon {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

@media (max-width: 767px) {
  .hero__ribbon-wrap {
    margin-bottom: var(--space-4);
  }
}

/* --- Hero chips: one 36px row on desktop, first chip only on mobile ------- */
.site-main .hero__badges > li,
.hero__badge {
  min-height: 36px;
  padding: 0 16px;
  font-size: var(--font-size-sm);
  line-height: 1.2;
}

.site-main .hero__badges > li .hero__badge-icon,
.hero__badge .hero__badge-icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 767px) {
  .hero__badges {
    flex-wrap: nowrap;
  }
  /* Chip text is page content; on a phone only the first chip stays, so the
     form moves up. (Copy for the first chip: "Betaal pas na ontvangst van uw
     label" — owned by the content team.) */
  .site-main .hero__badges > li:nth-child(n + 2),
  .hero__badges > .hero__badge:nth-child(n + 2) {
    display: none;
  }
}

/* --- Search form outside the home hero (city pages) ----------------------- */
.hero__content--inline {
  position: relative;
  z-index: 2;
  max-width: var(--container-hero, 880px);
  margin: var(--space-6) auto var(--space-8);
  padding: 0 var(--space-4);
  text-align: center;
}

.content-page .about-hero__header + .hero__content--inline {
  margin-top: calc(-1 * var(--space-4));
}

/* --- Tap targets: 40px effective on every small text link ---------------- */
/* City links on the homepage (#steden) and other paragraph links in columns. */
.site-main .wp-block-columns p > a:only-child {
  display: inline-block;
  padding: 8px 0;
}

.site-main .wp-block-columns p {
  margin-bottom: 0;
}

/* --- Advisor directory (/adviseurs/, [el24_advisor_index]) ---------------- */
/* The shortcode prints a plain <nav class="advisor-index"><ul> of links. On
   the directory page that read as a bulleted list; here every advisor is a
   card in the canon (12px radius, 1px #e8ebf3, 28px padding, 20px/800 name),
   three across on desktop, one on a phone. */
.advisor-index > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--stack);
  margin: 0;
  padding: 0;
  list-style: none;
}

.advisor-index > ul > li {
  margin: 0;
}

.advisor-index > ul > li > a {
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: var(--space-5) var(--card-pad);
  font-size: var(--card-title-size);
  font-weight: var(--heading-weight);
  line-height: var(--h3-lh);
  color: var(--color-black);
  background-color: var(--color-white);
  border: var(--card-border);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.advisor-index > ul > li > a:hover,
.advisor-index > ul > li > a:focus {
  color: var(--color-main-text);
  border-color: var(--color-main);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}

.advisor-index__sample {
  font-size: var(--font-size-sm);
  color: var(--color-text-strong);
}

/* ==========================================================================
   Homepage sections below the hero (design brief 2026-09, §4; revised
   9 September 2026)
   --------------------------------------------------------------------------
   Full-bleed bands (.home-band) with the page column inside
   (.home-band__inner: the .container width rules under its own name, so
   main.js does not tag the children for the scroll reveal — brief §4.5 #10).
   Page order since 12-9-2026 (docs/ux-principes.md §5): proof (tint) ·
   prices (white) · the original "Hoe het werkt" (tint) · compare (white) ·
   docs (tint) · reviews (white, honest empty state) · "Vragen en kennis"
   (tint: FAQ, guides, contact card, provinces) · close (dark). Every H2
   left, 34/800, followed by an intro of at most 66ch. Three backgrounds only: white, #F6F6F6 (--tint) and #0A392C
   (--dark); the brand green appears as a fill (list bars, the featured
   letter), never as a fourth band. No gradients; no border + radius ≥ 6px
   outside the form and the accordion (§4.6). This block sits before the
   header-budget block, which stays last.
   ========================================================================== */

.home-band {
  padding: var(--section-y) 0;
  background-color: var(--color-white);
  color: var(--color-text);
}

.home-band--tint {
  background-color: var(--color-light-grey);
}

.home-band--dark {
  background-color: var(--color-dark-green);
  color: var(--color-white);
}

.home-band__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.home-band .eyebrow {
  display: block;
  margin: 0 0 var(--space-3);
  color: var(--color-main-text);
}

.home-band h2,
.home-band .home-band__title {
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--heading-weight);
  text-align: start;
  margin: 0 0 var(--stack);
  color: var(--color-text);
}

.home-band--dark h2,
.home-band--dark .home-band__title {
  color: var(--color-white);
}

/* 21-9-2026: alleen de eyebrow op een donkere band staat in het limegroen uit
   het logo. Dezelfde rol en dezelfde plek als eerst, maar met een accent dat
   van onszelf is. Gemeten contrast op #0a392c: 7,8 op 1. De kop blijft wit;
   twee accenten boven elkaar zou juist onrustig worden. */
.home-band--dark .eyebrow {
  color: var(--color-second);
}

.home-band__intro {
  max-width: 66ch;
  margin: 0 0 var(--stack);
  font-size: var(--text-size);
  line-height: var(--text-lh);
}

.home-band--dark .home-band__intro {
  color: var(--color-white);
}

.home-band__links {
  margin: var(--stack) 0 0;
  font-weight: var(--font-weight-semibold);
}

.home-band__links a + a {
  margin-left: var(--space-6);
}

.home-band__cta {
  margin: var(--space-10) 0 0;
}

/* One button per section, and it may not count as "radius + border" in the
   §4.6 measurement: the fill is the border colour anyway. */
.home-band .btn--primary {
  border: 0;
}

/* --- 1. Proof strip (P1) -------------------------------------------------- */

.home-band--proof {
  padding: 16px 0;
}

/* One row of four: label above its sub-line (P1 allows either), so the four
   items fit the 1320px column without wrapping. */
/* Bewijsstrook onder de hero, 12-9-2026 (Botan: "veel mooier en passender
   bij de website"). Vier gelijke kolommen over de contentbreedte, per feit
   een lijnicoon in merkgroen, kop 18/800, subregel op de metamaat. Alleen
   haarlijnen als scheiding: geen rand, geen vlak, geen schaduw. */
.home-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-proof__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--text-lh);
}

.home-proof__item:first-child {
  padding-left: 0;
}

.home-proof__item:last-child {
  padding-right: 0;
}

.home-proof__item + .home-proof__item {
  border-left: 1px solid var(--color-grey-2);
}

.home-proof__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--color-main);
}

.home-proof__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.home-proof__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.home-proof__label {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.home-proof__sub {
  font-size: 15px;
  color: var(--color-text-strong);
  line-height: var(--text-lh);
}

@media (max-width: 1279px) {
  .home-proof__label {
    font-size: 17px;
  }
}

@media (max-width: 1199px) {
  .home-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-4);
  }

  .home-proof__item {
    padding: 0 var(--space-6);
  }

  .home-proof__item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .home-proof__item:nth-child(even) {
    padding-right: 0;
  }
}

@media (max-width: 599px) {
  .home-proof {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .home-proof__item {
    padding: var(--space-3) 0;
    border-left: 0;
  }

  /* In één kolom ligt de scheiding boven het item, niet ernaast. */
  .home-proof__item + .home-proof__item {
    border-left: 0;
    border-top: 1px solid var(--color-grey-2);
  }

  .home-proof__icon {
    width: 24px;
    height: 24px;
  }
}

/* --- 2. Price table (P2 + P8), tint after the white value-props ---------- */

.home-prices {
  overflow-x: auto;
}

.home-prices__table {
  width: 100%;
  max-width: 880px;
  margin: var(--space-2) 0 var(--space-4);
  border-collapse: collapse;
  font-size: var(--text-size);
  line-height: 1.4;
}

.home-prices__table th,
.home-prices__table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--color-grey-3);
}

.home-prices__table th:first-child,
.home-prices__table td:first-child {
  padding-left: 0;
}

.home-prices__table thead th {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-strong);
  border-bottom: 2px solid var(--color-text);
}

.home-prices__table tbody th {
  font-weight: var(--font-weight-semibold);
}

.home-prices__amount {
  font-size: var(--font-size-xl);
  font-weight: var(--heading-weight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.home-prices__note {
  max-width: 66ch;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-strong);
}

/* Phone: four columns still fit the 343px column with tighter cells. */
@media (max-width: 479px) {
  .home-prices__table th,
  .home-prices__table td {
    padding: 10px 6px;
  }

  .home-prices__table thead th {
    font-size: var(--font-size-sm);
  }

  .home-prices__amount {
    font-size: var(--h4-size);
  }
}

/* --- 4 + 5. Text beside the ribbon / the line drawing (P4) --------------- */

.home-split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-12);
  align-items: center;
}

.home-split--mirror .home-split__text {
  order: 2;
}

.home-split--mirror .home-split__figure {
  order: 1;
}

.home-split__text .home-band__intro {
  max-width: 60ch;
}

ul.home-list {
  list-style: none;
  margin: var(--stack) 0 0;
  padding: 0;
}

ul.home-list > li {
  position: relative;
  margin: 0 0 var(--space-3);
  padding-left: 28px;
}

ul.home-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 16px;
  height: 2px;
  background-color: var(--color-main);
}

ul.home-links {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: var(--stack) 0 0;
  padding: 0;
  font-weight: var(--font-weight-semibold);
}

ul.home-links > li {
  margin: 0;
  padding: 0;
}

.home-ribbon,
.home-docs {
  margin: 0;
}

.home-ribbon__svg,
.home-docs__svg {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}

.home-ribbon__avg {
  font-size: 24px;
}

.home-ribbon__caption {
  max-width: 48ch;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-strong);
}

@media (max-width: 1023px) {
  .home-split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .home-split--mirror .home-split__text {
    order: 1;
  }

  .home-split--mirror .home-split__figure {
    order: 2;
  }
}

/* --- 8. Guides (P11) ------------------------------------------------------ */

.home-guides {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-12);
  align-items: start;
}

ol.home-guides__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-guides__row {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-grey-2);
}

.home-guides__row:last-child {
  border-bottom: 1px solid var(--color-grey-2);
}

.home-guides__category {
  font-size: var(--font-size-xs);
  font-weight: var(--heading-weight);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--color-text-strong);
}

.home-guides__title {
  font-size: var(--font-size-lg);
  line-height: 1.3;
  font-weight: var(--heading-weight);
  color: var(--color-text);
}

.home-guides__title:hover,
.home-guides__title:focus {
  color: var(--color-main-text);
}

.home-guides__intro {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: var(--text-size);
  color: var(--color-text);
}

.home-guides__date {
  font-size: var(--text-sm);
  color: var(--color-text-strong);
}

.home-guides__featured {
  display: block;
  color: var(--color-text);
  text-decoration: none;
}

.home-guides__featured:hover,
.home-guides__featured:focus {
  text-decoration: none;
}

.home-guides__letter {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 320px;
  font-size: 160px;
  line-height: 1;
  font-weight: var(--heading-weight);
  color: var(--color-white);
  background-color: var(--color-main);
}

.home-guides__featured-body {
  display: grid;
  gap: 4px;
  padding-top: var(--space-4);
}

.home-guides__featured-title {
  font-size: var(--font-size-xl);
  line-height: 1.3;
  font-weight: var(--heading-weight);
}

.home-guides__featured:hover .home-guides__featured-title,
.home-guides__featured:focus .home-guides__featured-title {
  color: var(--color-main-text);
}

@media (max-width: 1023px) {
  .home-guides {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .home-guides__letter {
    height: 200px;
    font-size: 120px;
  }
}

/* --- Homepage-indeling 12-9-2026 (docs/ux-principes.md §5) --------------- */

/* Botan's approved order: proof (tint) · prices (white) · "Hoe het werkt"
   (tint) · compare (white, the four USPs as one list) · docs (tint) · reviews
   (white) · "Vragen en kennis" (tint: FAQ, guides, contact card, provinces) ·
   close (dark). The value-props tiles, the advisor showcase and the separate
   coverage, guides and FAQ sections left the content, and the seam rules of
   9 September (proof + how-it-works, reviews + guides, band + FAQ section)
   went with them. */

/* "Hoe het werkt" was tuned as the first section after the hero (32px top,
   white). Third in line now, after the white price band, it takes the tint
   and the canon rhythm top and bottom. Its step cards are white already. */
.how-it-works {
  padding: var(--section-y) 0;
  background-color: var(--color-light-grey);
}

/* Compare band: bold title plus one sentence per USP, a little more air
   between them, and the one button of the section under the list. */
.home-band--compare ul.home-list > li {
  margin-bottom: var(--space-4);
}

.home-band--compare ul.home-list > li:last-child {
  margin-bottom: 0;
}

/* Reviews band: while there are no reviews one honest sentence
   (docs/design-inspiratie.md §4.5 #8): no carousel, no avatars, no stars. It
   is running text, so body size and ink. With reviews see "Klantervaringen
   12-9-2026" at the end of this file. */
.home-reviews__empty {
  max-width: 66ch;
  margin: 0;
  font-size: var(--text-size);
  line-height: var(--text-lh);
  color: var(--color-text);
}

/* "Vragen en kennis": the FAQ accordion left (7), the guides and the contact
   card right (5), the twelve provinces as one line of links under both. */
/* ==========================================================================
   Gidsen als eigen hoofdstuk (21-9-2026)
   --------------------------------------------------------------------------
   De gidsen stonden als smalle lijst naast de vragen. Nu vullen ze een eigen
   band: tegels in een raster, het uitgelichte item voorop. Witte vlakken op de
   lichtgroene band, dezelfde afgeschuinde hoek als de andere tegels op de site.
   ========================================================================== */

/* 21-9-2026: het gidsenhoofdstuk was een raster van zeven even grote witte
   kaarten met afgekapte samenvattingen, waarin niets belangrijker oogde dan de
   rest. Nu draagt één uitgelichte gids met foto de linkerkolom en staat de rest
   ernaast als lijst met haarlijnen, naar het model van Mural en Webflow. De
   titels lopen voluit, er wordt niets meer afgekapt, en de lijst kan naar acht
   of tien gidsen groeien zonder dat de band twee schermen hoog wordt. */
/* De foto sluit onderaan aan op het witte tekstvlak van dezelfde kaart, dus
   daar hoort geen ronding: de kaart zelf rondt de bovenhoeken al af met zijn
   overflow. */
.home-band--guides .home-guides__figure {
  border-radius: 0;
}

.home-band--guides .home-guides {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-10);
  align-items: start;
  margin-top: var(--space-8);
}

/* De uitgelichte gids staat in de broncode ná de lijst; het raster zet hem
   links, zonder de volgorde in de HTML te veranderen. */
.home-band--guides .home-guides__featured {
  grid-column: 1;
  grid-row: 1 / span 2;
  overflow: hidden;
  border-radius: var(--radius-card);
  background-color: var(--color-white);
}

.home-band--guides .home-guides__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.home-band--guides .home-guides__featured-body {
  gap: var(--space-2);
  padding: var(--card-pad);
}

.home-band--guides .home-guides__featured-title {
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
}

/* De uitgelichte gids kapt niets af: die afkapping was juist de aanleiding
   om dit hoofdstuk opnieuw te bouwen. De intro komt uit de samenvatting van de
   gids en is twee zinnen, dus de kaart blijft kort. */
.home-band--guides .home-guides__featured .home-guides__intro {
  display: block;
  overflow: visible;
}

.home-band--guides ol.home-guides__list {
  grid-column: 2;
  grid-row: 1;
  display: block;
  margin: 0;
  border-top: 1px solid rgba(32, 44, 63, 0.12);
}

.home-band--guides .home-guides__row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(32, 44, 63, 0.12);
  background-color: transparent;
}

.home-band--guides .home-guides__category {
  color: var(--color-main-text);
}

/* De hele regel is klikbaar, terwijl de link voor een schermlezer de titel
   blijft. */
.home-band--guides .home-guides__title::after {
  content: "";
  position: absolute;
  inset: 0;
}

.home-band--guides .home-guides__row:hover .home-guides__title,
.home-band--guides .home-guides__row:focus-within .home-guides__title {
  color: var(--color-main-text);
}

/* "Alle gidsen" onderaan het gidsenhoofdstuk, onder de lijst. */
.home-band--guides .home-guides__all {
  grid-column: 2;
  grid-row: 2;
  margin: var(--space-5) 0 0;
}

@media (max-width: 1023px) {
  .home-band--guides .home-guides {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  /* Onder elkaar blijft de uitgelichte gids bovenaan staan: hij draagt het
     hoofdstuk, ook al staat hij in de broncode na de lijst. */
  .home-band--guides .home-guides__featured {
    grid-column: 1;
    grid-row: 1;
  }

  .home-band--guides ol.home-guides__list {
    grid-column: 1;
    grid-row: 2;
  }

  .home-band--guides .home-guides__all {
    grid-column: 1;
    grid-row: 3;
  }
}

/* De provincielinks als eigen, compacte band. */
.home-band--coverage {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.home-knowledge {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-12);
  align-items: start;
  margin-top: var(--space-4);
}

.home-band .home-knowledge__subtitle {
  margin: 0 0 var(--space-4);
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  font-weight: var(--heading-weight);
  color: var(--color-text);
}

/* The guides shortcode brings its own 7/5 grid (list beside the featured
   guide); in the narrow column the two stack, the photo first. The rows keep
   category, title and date; the intro would only fit as a cut-off fragment
   here, so it is left out, which also keeps the column closer to the height
   of the FAQ beside it. */
.home-knowledge__aside .home-guides {
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.home-knowledge__aside .home-guides__featured {
  order: -1;
}

.home-knowledge__aside .home-guides__figure img {
  min-height: 0;
  aspect-ratio: 2 / 1;
}

.home-knowledge__aside .home-guides__row {
  padding: var(--space-4) 0;
}

.home-knowledge__aside .home-guides__intro {
  display: none;
}

/* The contact card under the guides, the telephone next to the e-mail. Both
   come from EL24_Company; the shortcode prints a bare link, so it inherits
   the white of the row. */
.home-knowledge__aside .faq-support {
  margin-top: var(--space-10);
}

.faq-support__link a {
  color: inherit;
  text-decoration: none;
}

.faq-support__link a:hover,
.faq-support__link a:focus-visible {
  color: inherit;
  text-decoration: underline;
}

/* The provinces under both columns: one paragraph of links at body size,
   generous line height so a wrapped line on a phone still reads as a list. */
.home-knowledge__coverage {
  margin-top: var(--space-12);
}

.home-coverage--inline {
  max-width: none;
  margin: 0;
  font-size: var(--text-size);
  line-height: 1.9;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.home-coverage--inline a {
  color: var(--color-main-text);
  text-decoration: none;
}

.home-coverage--inline a:hover,
.home-coverage--inline a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 1023px) {
  .home-knowledge {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Stacked, the card sits under the guides at the left edge, not centred. */
  .home-knowledge__aside .faq-support {
    margin: var(--space-8) 0 0;
  }
}

/* --- 10. Closing band (P10) ---------------------------------------------- */

/* Afsluitband (Botan, 12-9-2026: "alles heel links, wat is de bedoeling"):
   tekst links (5), het formulier rechts (7), zoals de hero. De adviseurslink
   staat onder de tekst, niet los rechtsboven. */
.home-close {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-12);
  align-items: center;
}

.home-close__text .home-band__intro {
  max-width: none;
}

.home-close__panel {
  min-width: 0;
}

.home-close__panel .home-close__form {
  max-width: none;
  margin-top: 0;
}


.home-band--dark a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-close__aside {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-white);
}

.home-close__aside p {
  margin: 0;
}

.home-close__note {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
}

/* The hero's search form, left-aligned on dark green with white fields. */
.home-close__form {
  margin-top: var(--stack);
  text-align: left;
}

.home-close__form .hero-form {
  margin: 0;
}

.home-close__form .hero-form__products {
  justify-content: flex-start;
}

.home-close__form .hero-form__product {
  color: var(--color-text);
}

.home-close__form .hero-form__input,
.home-close__form .hero-form__select {
  color: var(--color-black);
  background-color: var(--color-white);
  border-color: var(--color-white);
}

.home-close__form .hero-form__input:focus {
  border-color: var(--color-main);
}

.home-close__form .hero-form__submit {
  background-color: var(--color-main);
}

.home-close__form .hero-form__submit:hover,
.home-close__form .hero-form__submit:focus {
  background-color: var(--color-main-dark);
}

/* De tweede kopie van het formulier staat op de donkergroene slotband.
   Het nieuwe veldlabel erft --color-black (#202C3F) uit .form-label; op
   #0A392C is dat 1,09:1 en dus onleesbaar. Wit is hier al de bandregel
   (h2, eyebrow, intro): gemeten 12,85:1. */
.home-close__form .hero-form__label {
  color: var(--color-white);
}

.home-close__form .hero-form__note,
.home-close__form .hero-form__hint {
  text-align: left;
  color: rgba(255, 255, 255, 0.7);
}

.home-close__form .hero-form__error {
  color: #ffc9c9;
}

.home-close__form .hero-form__help-text,
.home-close__form .hero-form__bagcard {
  color: var(--color-text);
}

.home-close__form a {
  color: var(--color-main-text);
  text-decoration: none;
}

@media (max-width: 1023px) {
  .home-close {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   Homepage bands, visual pass (9 September 2026)
   --------------------------------------------------------------------------
   Modelled on real modules of large comparison sites, captured at 1440px:
   Independer's price panel (a white box with rows on a tinted band),
   Consumentenbond's "keuzeadvies" list (photo thumbnail, title, arrow per row)
   and Pricewise's closing band (one bold statement, one paragraph, one action).
   Photos are CC0, credited in assets/img/home/CREDITS.md.
   -------------------------------------------------------------------------- */

/* De vier homepage-vlakken hieronder (prijstabel, foto, dienstenrij, gidsfoto)
   stonden op een eigen 14px, gemeten 8x over de zes pagina's. De canon kent
   maar een kaartradius: --radius-card 12px. */
.home-band--prices .home-prices__table {
  background: var(--color-white);
  border: 1px solid var(--color-grey-2);
  border-radius: var(--radius-card);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: var(--stack);
}

.home-band--prices .home-prices__table th,
.home-band--prices .home-prices__table td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-grey-2);
  vertical-align: middle;
}

.home-band--prices .home-prices__table thead th {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-strong, #4B5563);
  background: var(--color-light-grey, #F6F6F6);
}

.home-band--prices .home-prices__table tbody tr:last-child th,
.home-band--prices .home-prices__table tbody tr:last-child td {
  border-bottom: 0;
}

.home-band--prices .home-prices__table tbody th {
  font-size: var(--text-size);
  font-weight: var(--font-weight-extrabold);
  text-align: left;
}

.home-band--prices .home-prices__amount {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.home-band--compare .home-split {
  align-items: center;
  gap: var(--space-8);
}

.home-figure {
  margin: 0;
}

.home-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* The houses, not the pavement: bias the crop upwards. */
  object-position: center 32%;
  border-radius: var(--radius-card);
}

.home-services {
  list-style: none;
  margin: var(--stack) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.home-services__row {
  margin: 0;
}

.home-services__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-2);
  border-radius: var(--radius-card);
  color: var(--color-black);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-services__link:hover,
.home-services__link:focus-visible {
  border-color: var(--color-main-text);
  box-shadow: var(--shadow-card);
}


.home-services__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.home-services__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.3;
}

/* Dit is lopende tekst, geen metalabel: de vier regels tellen 89-97 tekens en
   liepen op 390px over 4 regels. Ze stonden op 16px/600/1.45 (gemeten 23,2px
   interlinie), terwijl de bodytekst op dezelfde pagina 17px/500/1.6 is; de 600
   erfde deze span bovendien van de <a> eromheen. Nu de bodymaat uit de canon,
   zodat er geen tweede lopende-tekststijl naast de eerste bestaat. */
/* Deze tekst stond op 16px metamaat en is naar de lopende maat gebracht (18/500).
   De gedempte grijstint moest daarbij mee weg: de canon houdt --color-text-strong
   voor meta tot 16px, en boven die maat kost een lichte grijs een 55+ lezer.
   .home-band__intro doet het net zo — geen eigen kleur, gewoon erven (#202c3f). */
.home-services__text {
  font-size: var(--text-size);
  font-weight: var(--text-weight);
  line-height: var(--text-lh);
}

.home-services__price {
  font-size: var(--text-size);
  font-weight: var(--font-weight-extrabold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-main-text);
}

.home-services__arrow {
  font-size: 22px;
  color: var(--color-main-text);
}

@media (max-width: 767px) {
  .home-services__link {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    padding: 14px 16px;
  }

  .home-services__arrow {
    display: none;
  }
}

.home-guides__figure {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.home-guides__figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.home-guides__featured {
  align-items: stretch;
}

.home-band--close h2 {
  font-size: var(--h1-size);
  line-height: 1.1;
}

/* Geen eigen mobiele maat: `--h1-size` is onder 768px al 38px, dus de harde
   36px hier zette deze ene kop op een trede die in de typeschaal niet
   bestaat. De regel erboven volstaat op elke breedte. */


/* --------------------------------------------------------------------------
   "Waarom Energielabel24": the man never covers the button (9 Sept 2026)
   --------------------------------------------------------------------------
   The old layout hung the dark block on the photo with a fixed -280px overlap,
   so whenever the photo was taller than the space above the button (bigger
   type made the side cards 461px, the 260px-wide photo 411px), the photo
   painted over "Vergelijk nu". Now the dark block fills the lower part of the
   column and the photo is anchored ABOVE the button, letterboxed into the
   room that is left; it can only get smaller, never overlap. */
.value-props__center .value-props__image-wrapper {
  position: relative;
  height: 100%;
  min-height: 480px;
  display: block;
}

.value-props__center .value-props__image-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 22%;
  bottom: 0;
  margin: 0;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 20px;
}

.site-main .value-props__center .value-props__image-wrapper figure.value-props__image {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(20px + var(--btn-height, 56px) + 16px);
  top: 0;
  width: 260px;
  max-width: 70%;
  margin: 0 auto;
  z-index: 2;
}

.site-main .value-props__center .value-props__image-wrapper figure.value-props__image > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* --------------------------------------------------------------------------
   Header budget, final word (9 September 2026)
   --------------------------------------------------------------------------
   Seven menu items + language switch + "Inloggen adviseur" + the primary
   button must fit the header column at every desktop width: 1240px between
   1280 and 1439px, 1320px from 1440px. Labels are 15px/700 with 7px sides
   (--nav-font; the Dutch row measures 585px, the column leaves 605px next
   to the actions from 1440px and 683px without the login link below it).
   The nav may shrink and clip but never paints over the actions, and
   "Adviseur worden" never returns to the desktop row (it is in the mobile
   menu, the footer and on /register-advisor/). Measured on 2026-09-09 at
   1280/1440/1680/1920 (see docs/stijlplan.md). This block sits last so it
   wins; keep it last. */

/* --------------------------------------------------------------------------
   Hero (9 September 2026)
   --------------------------------------------------------------------------
   Taken from the reference set Botan gave — Humbird, Zorgwijzer: everything
   hard left instead of centred, on a tinted band, with the form as the one
   white card on the page. Nothing is outlined; the tint and the shadow do the
   separating. No markup change: only alignment, band colour and the card.
   -------------------------------------------------------------------------- */
.hero {
  background-color: var(--color-light-green);
}

.hero__content {
  text-align: left;
  /* Links uitlijnen met de header (Botan, 9-9-2026): de hero-kolom stond als
     880px-blok gecentreerd, waardoor de kop op 295px begon terwijl het logo op
     84px staat. De kolom loopt nu over de volle containerbreedte en houdt
     dezelfde binnenmarge als de header, dus de kop begint exact onder het
     logo. Kop en formulier houden hun eigen leesbreedte. */
  max-width: var(--container-max);
  margin-left: 0;
  margin-right: auto;
  /* De container geeft de marge al; de eigen 15px hier zette de kop precies
     15px naast het logo. */
  padding-left: 0;
  padding-right: 0;
}

/* Volle breedte (Botan, 9-9-2026): kop en formulier lopen over de hele
   kolom, geen eigen leesbreedte meer. */
.hero__title {
  max-width: none;
}

.hero-form {
  max-width: none;
  margin-left: 0;
  /* `width: 100%` hoort hier bij, niet alleen in het tweekolomsblok vanaf
     1024px. Het formulier draagt `container-type: inline-size` (zie de
     containerquery van de dienstenpillen hieronder) en daarmee ook
     inline-size-containment: zijn eigen inhoud telt niet meer mee voor zijn
     breedte. Elke ouder die het formulier op zijn inhoud legt — de flexkolom
     onder 1024px doet dat, want `margin-right: auto` schakelt in de dwarsas
     het uitrekken uit — kwam daardoor uit op breedte 0: 48px in beeld, enkel
     de padding, met de dienstenpillen op 18px en de labels dwars erdoorheen.
     Met een expliciete breedte klopt het in flex, grid en blok. */
  width: 100%;
  margin-right: 0;
}

/* The inline Alpine <script> is a layout child; keep it out of the flow. */
.hero__content > script {
  display: none;
}

/* The old row was one nowrap line centred under a 720px column. Left-aligned
   beside a form it has less room, so it wraps instead of running off-screen —
   which is what it did at 768px once the centring was gone. */
.hero__badges {
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .hero__badges {
    flex-wrap: wrap;
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
  }
}

/* Four services, one row — Botan, 9 September 2026. A wrapping flex row put
   them on two or three lines depending on how wide the form happened to be,
   which made the same control look different on every page. A fixed
   four-column grid always shows four; the Dutch labels are long, so they wrap
   to a second line inside their own box and every box keeps the same height.
   Two columns on a phone, where four would leave 80px per label. */
.hero-form__products {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

/* How many boxes fit is a question about the form, not about the window: the
   same form is 786px wide in the hero and 714px in the dark closing band at
   the very same viewport. So the column count comes from a container query.
   The thresholds are set by the longest label, "Huurpuntentelling" at 147px:
   four boxes need 780px of form, two need 400px, and a phone gets one. */
.hero-form {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .hero-form__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 780px) {
  .hero-form__products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hero-form__product {
  justify-content: flex-start;
  /* "Huurpuntentelling" is 130px at 16px and the narrowest box on the site is
     173px (dark closing band); the box, the gap and the padding together may
     not take more than 43px of that, or the word overflows its own box. */
  gap: 6px;
  padding: 10px 8px;
  line-height: 1.25;
  text-align: left;
  border-radius: 12px;
  /* No hyphens: auto here. It split "Huurpuntentel-ling" even though the word
     fitted; letting the line break at the space before "(WWS)" is cleaner. */
  overflow-wrap: break-word;
}

.hero-form__product-box {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* The form is the page's one card: white on the tinted band, no border. */
.hero-form {
  padding: var(--space-6);
  background-color: #ffffff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
}

/* The four service boxes need about 780px to show four full Dutch labels on
   one row, so the form keeps the whole hero column and the headline sits
   above it rather than beside it. The Humbird cue that survives is the one
   that costs nothing: everything hard left, on a tinted band, with the form
   as the single white card. */
@media (min-width: 1200px) {
  .hero-form {
    padding: var(--space-8);
  }
}

/* The closing band puts the same form on dark green on purpose. It must not
   pick up the white card, and its column has to be wide enough for the four
   boxes — 640px left them overflowing their own row. */
.home-close__form .hero-form {
  padding: 0;
  background: none;
  box-shadow: none;
}

.home-close__form {
  max-width: none;
}

/* --------------------------------------------------------------------------
   "Hoe het werkt": the step visuals (9 September 2026)
   --------------------------------------------------------------------------
   Replaces the stock model on a dark-green panel. Reference: Zorgwijzer's
   "Zo werkt het" band, where every step shows a piece of the product itself
   rather than a photograph.

   The first attempt drew three loose ornaments of three different widths and
   they floated in an empty row. This is one card per step, all three the same
   width and height, so the row reads as three screens of the same product.
   Each card reuses the real thing: the search fields and the green button
   from the hero form, the shortlist from the comparison page, the
   confirmation the copy promises.

   Two rules keep it honest: the shortlist is bars, never amounts, so it can
   never read as a quote; and every card is aria-hidden, because the sentence
   underneath already carries the meaning. Markup: el24_step_mock().
   -------------------------------------------------------------------------- */
/* The label strip had its own flex layout with fixed 150px columns, so
   "Vergelijken" did not sit above its own card — the two rows used different
   geometry. It now shares the cards' three-column grid. The two connector
   lines each span one column boundary and are centred on it, which puts them
   exactly in the gap between two cards. */
@media (min-width: 1024px) {
  .how-it-works__header {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--stack);
    align-items: start;
  }

  .how-it-works__header > .step-header {
    grid-row: 1;
    width: auto;
  }

  .how-it-works__header > .step-header:nth-child(1) { grid-column: 1; }
  .how-it-works__header > .step-header:nth-child(3) { grid-column: 2; }
  .how-it-works__header > .step-header:nth-child(5) { grid-column: 3; }
  .how-it-works__header > .step-header:nth-child(7) { grid-column: 4; }

  .how-it-works__header > .step-header__line {
    grid-row: 1;
    justify-self: center;
    flex: none;
    width: 120px;
    min-width: 0;
    max-width: none;
  }

  .how-it-works__header > .step-header__line:nth-child(2) { grid-column: 1 / 3; }
  .how-it-works__header > .step-header__line:nth-child(4) { grid-column: 2 / 4; }
  .how-it-works__header > .step-header__line:nth-child(6) { grid-column: 3 / 5; }
}

.step-mock {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.step-mock__card {
  display: grid;
  align-content: center;
  gap: 10px;
  width: 100%;
  max-width: 288px;
  /* All three the same height, or the paragraphs underneath start on three
     different lines. The shortlist is the tallest of the three at 162px. */
  min-height: 176px;
  padding: 18px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid var(--color-grey-2);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Step 1: the hero form's two fields and its button, at rest with a value. */
.step-mock__fields {
  display: grid;
  grid-template-columns: 1fr 78px;
  gap: var(--space-2);
}

.step-mock__field {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-dark-grey);
  background-color: var(--field-bg);
  border-radius: 8px;
}

.step-mock__field b {
  font-size: 15px;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-black);
}

.step-mock__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  font-size: 15px;
  font-weight: var(--font-weight-extrabold);
  color: #ffffff;
  background-color: var(--color-main-text);
  border-radius: 8px;
}

/* Step 2: the shortlist, cheapest on top. */
.step-mock__card--list {
  gap: var(--space-2);
}

.step-mock__adv {
  display: grid;
  grid-template-columns: 22px 1fr 30px;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
}

.step-mock__adv--best {
  background-color: var(--color-light-green);
}

.step-mock__logo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: rgba(32, 44, 63, 0.13);
}

.step-mock__adv--best .step-mock__logo {
  background-color: var(--color-main-text);
}

.step-mock__lines {
  display: grid;
  gap: 4px;
}

/* De mock-onderdelen droegen 3px, 4px en 5px: drie eigen kleine radii naast
   --radius-sm. Alle drie nu --radius-sm; op de 6px-balk klemt de browser dat
   tot dezelfde 3px, dus daar verandert de tekening niet. */
.step-mock__bar {
  height: 6px;
  border-radius: var(--radius-sm);
  background-color: rgba(32, 44, 63, 0.13);
}

.step-mock__bar--name { width: 82%; }
.step-mock__bar--meta { width: 52%; }

.step-mock__adv--best .step-mock__bar--name {
  background-color: rgba(4, 122, 60, 0.45);
}

.step-mock__tag {
  height: 12px;
  border-radius: var(--radius-sm);
  background-color: rgba(32, 44, 63, 0.13);
}

.step-mock__adv--best .step-mock__tag {
  background-color: var(--color-main-text);
}

/* Step 3: what the visitor is left looking at. */
.step-mock__card--done {
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.step-mock__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 2px;
  color: #ffffff;
  background-color: var(--color-main-text);
  border-radius: 50%;
}

.step-mock__done-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-black);
}

.step-mock__done-sub {
  font-size: var(--text-sm);
  font-weight: var(--text-weight);
  color: var(--color-text-muted);
}

/* Stap 4: het rapport. */
.step-mock__card--report {
  gap: 8px;
}

.step-mock__report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.step-mock__report-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-black);
}

/* 21-9-2026: stond op 11px/0,04em en week daarmee af van de kicker-canon. */
.step-mock__report-pill {
  flex-shrink: 0;
  padding: 3px 9px;
  font-size: var(--eyebrow-size);
  font-weight: var(--heading-weight);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: #ffffff;
  background-color: var(--color-main-text);
  border-radius: var(--radius-pill);
}

.step-mock__report-sub {
  font-size: 13px;
  font-weight: var(--text-weight);
  color: var(--color-text-muted);
}

.step-mock__card--report .step-mock__lines {
  margin-top: 6px;
  gap: 8px;
}

.step-mock__bar--short { width: 34%; }

/* --------------------------------------------------------------------------
   Hero height (9 September 2026)
   --------------------------------------------------------------------------
   The form card ended at 907px on a 1440x900 window, so on a laptop with
   browser chrome its bottom edge and part of the button sat below the fold.
   Botan: "die witte ding zit niet helemaal erop".

   Nothing is removed and no type is scaled down: the 88px of air above the
   headline and the gaps between the four stacked pieces were simply larger
   than the rhythm needs. Desktop only; the phone hero is tuned separately
   (--hero-y-mobile) and is left alone.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .hero {
    padding-top: var(--hero-y-top);
    padding-bottom: var(--hero-y-bottom);
  }

  .hero__title { margin-bottom: var(--space-4); }

  .hero__badges { margin-bottom: var(--space-4); }

  .hero__subtitle { margin-bottom: var(--space-3); }

  .hero-form { padding: var(--space-6); }
}

/* --------------------------------------------------------------------------
   Middenvak "Waarom Energielabel24": de provinciekaart
   --------------------------------------------------------------------------
   Vervangt de stockfoto die hier stond (9 september 2026). De kaart is de
   standaard; ?vp=p toont het enige alternatief dat Botan wilde bewaren.
   -------------------------------------------------------------------------- */
.vp-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-6);
  min-height: 280px;
  background-color: var(--color-dark-green);
  border-radius: var(--radius-lg);
  border-bottom-right-radius: 40px;
}

.vp-bare__line {
  max-width: 260px;
  margin: 0;
  font-size: var(--text-size);
  font-weight: var(--font-weight-bold);
  line-height: 1.45;
  color: #ffffff;
  text-align: center;
}

.vp-stop {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.55);
}

.vp-stop--end {
  width: 13px;
  height: 13px;
  background-color: var(--color-second);
}

.vp-stops-h {
  display: flex;
  align-items: center;
  width: 236px;
}

.vp-stops-h__line {
  flex: 1;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.28);
}

.vp-provmap {
  display: block;
  width: 100%;
  max-width: 252px;
  height: auto;
}

.vp-prov {
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  transition: fill 0.18s ease, transform 0.18s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.vp-provmap--dark .vp-prov {
  fill: rgba(255, 255, 255, 0.20);
  stroke: var(--color-dark-green);
}

.vp-provmap--dark .vp-prov:hover {
  fill: rgba(255, 255, 255, 0.34);
  transform: translateY(-1.5px);
}

/* De kaart plus zijn eigen label: het label staat absoluut binnen deze doos. */
.vp-map {
  position: relative;
  display: block;
}

/* Eigen tooltip in plaats van die van het besturingssysteem: wit op de donkere
   tegel, meteen zichtbaar, en hij vangt zelf geen muis zodat hoveren doorloopt. */
.vp-map__tip {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, calc(-100% - 12px));
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.vp-map__tip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -55%) rotate(45deg);
  background-color: var(--color-white);
}

.vp-prov__link {
  outline-offset: 2px;
}

.vp-prov__link:focus-visible .vp-prov {
  fill: rgba(255, 255, 255, 0.55);
}

.vp-map__caption {
  max-width: 240px;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-extrabold);
  color: #ffffff;
  text-align: center;
}

/* Eén regel onder de kaart die vertelt wat een klik oplevert. */
.vp-map__sub {
  max-width: 260px;
  margin: var(--space-2) 0 var(--space-5);
  line-height: 1.5;
  color: #ffffff;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .vp-prov { transition: none; }
  .vp-provmap--dark .vp-prov:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   De hero-regel als aankondiging boven de kop (9 september 2026)
   --------------------------------------------------------------------------
   Overstappen.nl en Zorgwijzer openen allebei met een klein label boven de
   kop ("Da's altijd slim!", "ZO WERKT HET") voordat de kop komt. Deze zin
   stond er tussenin en deed niets; als eerste beat van de hero heeft hij een
   rol. Gevuld vlak in het donkergroen, witte tekst, geen rand.
   -------------------------------------------------------------------------- */
/* Onder 1024px geldt de rasterplaatsing niet; daar zorgt de volgorde in de
   flexkolom dat het label ook boven de kop staat in plaats van onder de
   vinkjes, waar het in de paginabron staat. */
@media (max-width: 1023px) {
  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__subtitle { order: -1; margin-bottom: var(--space-4); }
}

.hero__subtitle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: auto;
  padding: 9px 18px;
  font-size: var(--text-sm);
  font-weight: var(--heading-weight);
  line-height: 1.2;
  color: #ffffff;
  background-color: var(--color-dark-green);
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   De vinkjes: onder elkaar, zonder omranding (9 september 2026)
   --------------------------------------------------------------------------
   Botan: "doe deze onder elkaar en geen borders". Drie omlijnde pillen naast
   elkaar lazen als knoppen; een vinkje met tekst leest als een belofte. De
   selectors staan op .site-main omdat de bestaande pilregel daar ook staat en
   anders wint.
   -------------------------------------------------------------------------- */
.hero__badges {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .hero__badges {
    flex-wrap: nowrap;
    width: auto;
  }
}

.site-main .hero__badges > li,
.site-main .hero__badge,
.hero__badge {
  padding: 0;
  background-color: transparent;
  border: 0;
  border-radius: 0;
}

.site-main .hero__badges > li:hover,
.hero__badge:hover {
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   Hero in twee kolommen (9 september 2026)
   --------------------------------------------------------------------------
   Tekst links, het formulier als blok rechts. Kleuren blijven zoals ze waren:
   de lichte band, de donkere kop, de groen omrande vinkjes. De donkere variant
   naar overstappen.nl is teruggedraaid — Botan wilde alleen de verdeling, niet
   het kleurenschema.

   De decoratieve vormen stonden in de lege ruimte naast de oude gecentreerde
   kolom; die ruimte is nu gevuld, dus ze verdwijnen zodra de kolommen splitsen.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .hero__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    grid-template-rows: auto auto auto;
    column-gap: var(--space-16);
    align-items: start;
  }

  /* Label eerst, dan de kop, dan de vinkjes. */
  .hero__subtitle {
    grid-area: 1 / 1 / 2 / 2;
    justify-self: start;
    margin-bottom: var(--space-4);
  }

  .hero__title  { grid-area: 2 / 1 / 3 / 2; }
  .hero__badges { grid-area: 3 / 1 / 4 / 2; }

  /* width en margin-right terugzetten: de auto-marge uit de volle-breedte-
     versie laat een grid-item krimpen tot de inhoud. */
  .hero-form {
    grid-area: 1 / 2 / 4 / 3;
    align-self: center;
    width: 100%;
    margin-right: 0;
  }

  /* In een kolom van 560px passen postcode, huisnummer en toevoeging niet
     naast elkaar zonder dat "Huisnummer" wordt afgeknipt. */
  .hero-form__inputs { grid-template-columns: minmax(0, 1fr); }

  /* De vormen blijven staan (Botan, 9-9-2026), alleen iets kleiner dan de
     180px van de gecentreerde versie, zodat ze de kop en het blok niet in de
     weg zitten. Ze liggen achter de inhoud (z-index 1 tegen 2). */
  .hero__shape-img { width: 140px; }
}

/* Phone header budget (9 September 2026): 343px inner width must hold the
   logo, the compact "Vergelijk" button and the hamburger. The logo shrinks
   first, then the button loses its side padding; nothing may overflow. */

/* --------------------------------------------------------------------------
   Dekking: adviseurs per provincie (10 september 2026)
   --------------------------------------------------------------------------
   De site had 90 stads- en provinciepagina's en de homepage linkte naar geen
   enkele daarvan; de slotband beloofde "in uw regio" en bood alleen het
   aanmeldformulier voor adviseurs. Dit is patroon P6 uit docs/design-inspiratie.md,
   nagemeten bij Comparethemarket (vier kolommen, vette kolomkop, platte
   tekstlinks, ruime regelafstand) en Independer (linkkolommen zonder kaders en
   zonder iconen). Beide doen het zo: geen omranding, geen icoon, geen kaart —
   de ruimte tussen de regels draagt het blok.

   Geen tweede kaart van Nederland: die staat al in "Waarom Energielabel24".
   -------------------------------------------------------------------------- */
.home-band--soft { background-color: var(--color-light-green); }

.home-coverage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .home-coverage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10) var(--space-8); }
}

@media (min-width: 1024px) {
  .home-coverage { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Nabijheid: de kop hoort bij zijn eigen stedenlijst, dus die staat dichtbij
   (8px), terwijl de afstand tot de volgende provincie veel groter is (de
   grid-gap hierboven). Dat is de regel die design-principles.md de meest
   onderschatte noemt. */
.home-coverage__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--heading-weight);
  line-height: 1.2;
  color: var(--color-dark-green);
}

.home-coverage__title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.home-coverage__title a:hover,
.home-coverage__title a:focus-visible {
  border-bottom-color: var(--color-main);
}

.home-coverage__vanaf {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-strong);
}

.home-coverage__cities {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-coverage__cities li { margin: 0; }

.home-coverage__cities a {
  display: inline-block;
  padding: 2px 0;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.9;
  color: var(--color-main-text);
  text-decoration: none;
}

.home-coverage__cities a:hover,
.home-coverage__cities a:focus-visible { text-decoration: underline; }

/* ==========================================================================
   Contactpagina 12-9-2026 v2 (docs/design-inspiratie.md §5.1, "Herbouw v2")

   Botan: "doe contact pagina nog beter, kijk af via mobbin, zoek iets wat
   passend is. Maak het echt veel mooier, uniek. Geen AI look."

   Referenties op Mobbin: In Common With (links een contactregister als
   haarlijntabel, label links en waarde rechts, rechts het formulier), Fiasco
   (register met kleine eyebrows, formulier in een donker paneel "Or fill in
   this form and we'll reach out"), Lightship (keuze "How would you like to
   reach out? e-mail / call" boven het formulier), Savor (rustige
   redactionele intro).

   Opbouw: 1 witte kopband 7/5 met de H1 links en het register rechts, daar-
   onder de keuzelijst als haarlijnrijen over de volle breedte → 2 de ene
   donkere band: "Of stuur een bericht" met de keuze e-mail/telefoon links,
   het formulier rechts (witte velden, knop --color-main) → 3 "Over
   Energielabel24" met de accordeon (tint) → 4 lichtgroene postcodeband.
   Ritme: wit → donker → tint → lichtgroen. Geen kaartjes met rand én
   schaduw, geen icoon-in-cirkel, één donkere band, één knop per band.
   -------------------------------------------------------------------------- */

/* De banden brengen hun eigen vlak mee; de ondergrond is wit en de laatste
   band levert de onderruimte. */
.contact-page {
  background-color: var(--color-white);
  padding-bottom: 0;
}


/* --- Pijl-link: gevuld vierkantje met pijl, dan de tekst ----------------- */

/* Pijllink (Botan, 12-9-2026: "overal waar dezelfde knoppen staan mag het
   wat meer bold"): één stijl voor alle pijllinks op de site, vet, met een
   gevuld groen vierkant dat bij hover meebeweegt. */
.contact-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  font-size: var(--text-size);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--color-main-text);
  text-decoration: none;
}

.contact-arrow__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: var(--color-white);
  background-color: var(--color-main-text);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, transform 0.18s ease;
}

.contact-arrow__mark svg {
  width: 16px;
  height: 16px;
}

.contact-arrow:hover,
.contact-arrow:focus-visible {
  color: var(--color-main-text-dark);
  text-decoration: none;
}

.contact-arrow:hover .contact-arrow__mark,
.contact-arrow:focus-visible .contact-arrow__mark {
  background-color: var(--color-main-text-dark);
  transform: translateX(3px);
}

.contact-arrow:hover .contact-arrow__label,
.contact-arrow:focus-visible .contact-arrow__label {
  text-decoration: underline;
}


/* --- Beweging uit ---------------------------------------------------------- */


/* --- Telefoon (< 768px) -------------------------------------------------- */


/* ==========================================================================
   Keuzehulp diensten 12-9-2026 ([el24_service_helper] in #diensten)
   ========================================================================== */

/* Botan: "doe ook zo keuzehulp bij diensten, dat ze kunnen kiezen welke
   diensten ze nemen." Zijn voorbeeld: getint paneel, klein pill-label
   linksboven, gesegmenteerde voortgang met de teller rechts, de vraag als
   kop, grote witte antwoordknoppen naast elkaar. Hier in de canon: het
   lichtgroen van de postcodeband, radius 12, pill in merkgroen, vraag als
   H3 in inkt, knoppen wit met de haarlijnrand en 20/700 links uitgelijnd.
   Geen schaduw, geen icoon-in-cirkel. Hover en focus: rand in linkgroen;
   gekozen: rand merkgroen plus vinkje. Lijnen binnen het paneel zijn
   groen-getint (de blauwgrijze haarlijn oogt vuil op #F0F8F1). */
.el24-helper {
  --el24-helper-line: #d6e7da;
  margin: var(--stack) 0 0;
  padding: var(--space-8);
  background-color: var(--color-light-green);
  border-radius: var(--radius-card);
  color: var(--color-text);
}

.el24-helper__pill {
  display: inline-block;
  padding: 4px 12px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--color-white);
  background-color: var(--color-main);
  border-radius: var(--radius-pill);
}

.el24-helper__progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
}

.el24-helper__bar {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-2);
}

/* Elk segment vult van links naar rechts; een segment dat al gevuld was
   (is-instant) springt niet opnieuw. */
.el24-helper__bar span {
  position: relative;
  flex: 1 1 0;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background-color: var(--el24-helper-line);
}

.el24-helper__bar span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background-color: var(--color-main);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.el24-helper__bar span.is-active::after {
  transform: scaleX(1);
}

.el24-helper__bar span.is-instant::after {
  transition: none;
}

.el24-helper__count {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
}

.home-band .el24-helper__question {
  margin: 0 0 var(--space-5);
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  font-weight: var(--heading-weight);
  color: var(--color-text);
  outline: none;
}

.el24-helper__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.el24-helper__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex: 1 1 220px;
  max-width: 360px;
  min-height: 72px;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  font-family: inherit;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  text-align: left;
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-2);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.el24-helper__option:hover,
.el24-helper__option:focus-visible {
  border-color: var(--color-main-text);
  outline: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.el24-helper__option:active {
  transform: translateY(0);
  transition-duration: 0.08s;
}

.el24-helper__option.is-selected {
  border-color: var(--color-main);
}

/* Net gekozen: het paneel wacht even zodat de keuze zichtbaar is. */
.el24-helper__option.is-chosen {
  background-color: var(--color-light-green);
  transform: none;
  box-shadow: none;
}

.el24-helper__check {
  display: none;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-main);
}

.el24-helper__option.is-selected .el24-helper__check {
  display: block;
  animation: el24-helper-pop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1.2) both;
}

/* --- Beweging tussen de stappen -------------------------------------------
   Uit: de oude stap schuift een stukje weg en vervaagt (160ms). Hoogte: het
   paneel groeit of krimpt naar de nieuwe stap (320ms) in plaats van te
   springen. In: de vraag eerst, daarna de antwoorden na elkaar, dan de
   navigatie; vooruit komt van rechts, terug van links. */
.el24-helper__step {
  position: relative;
}

.el24-helper__step.is-resizing {
  transition: height 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.el24-helper__step.is-leaving > * {
  animation: el24-helper-leave 0.16s ease-in both;
}

.el24-helper__step.is-back.is-leaving > * {
  animation-name: el24-helper-leave-back;
}

.el24-helper__step .is-entering,
.el24-helper__step .is-entering > .is-entering {
  animation: el24-helper-enter 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.el24-helper__step.is-back .is-entering {
  animation-name: el24-helper-enter-back;
}

.el24-helper__question--result.is-entering {
  animation-name: el24-helper-enter-result;
}

.el24-helper__count.is-entering {
  animation: el24-helper-enter 0.3s ease-out both;
}

@keyframes el24-helper-enter {
  from { opacity: 0; transform: translate3d(28px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes el24-helper-enter-back {
  from { opacity: 0; transform: translate3d(-28px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes el24-helper-enter-result {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes el24-helper-leave {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(-22px, 0, 0); }
}

@keyframes el24-helper-leave-back {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(22px, 0, 0); }
}

@keyframes el24-helper-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .el24-helper *,
  .el24-helper *::after {
    animation: none !important;
    transition: none !important;
  }

  .el24-helper__option:hover,
  .el24-helper__option:focus-visible {
    transform: none;
    box-shadow: none;
  }
}

/* "Terug" staat bovenin de stap als kleine tekstknop; "Opnieuw beginnen" is
   op het resultaat de lichte secundaire knop naast de ene groene. */
.el24-helper__topnav {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.el24-helper__back {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-main-text);
  background: none;
  border: 0;
  cursor: pointer;
}

.el24-helper__back:hover,
.el24-helper__back:focus-visible {
  color: var(--color-main-text-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}

/* Resultaat: intro, de diensten als rijen met een haarlijn (geen kaartjes),
   naam 20/800 met de prijs rechts, de zin eronder, dan de ene knop van de
   sectie en de herstartlink ernaast. */
.el24-helper__intro {
  max-width: 72ch;
  margin: 0;
  font-size: var(--text-size);
  font-weight: var(--text-weight);
  line-height: var(--text-lh);
}


/* Op het resultaat staan "Opnieuw beginnen" en "Terug" naast de knop, zodat
   er geen losse regel onder het paneel hangt. */
.el24-helper__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
}

.el24-helper__restart {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-size);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-main-text);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.el24-helper__restart:hover,
.el24-helper__restart:focus-visible {
  color: var(--color-main-text-dark);
  outline: none;
}

.el24-helper__nojs {
  margin: var(--space-5) 0 0;
  font-size: var(--text-size);
  line-height: var(--text-lh);
}

@media (max-width: 599px) {
  .el24-helper {
    padding: var(--space-5);
  }

  .el24-helper__options {
    flex-direction: column;
  }

  .el24-helper__option {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-height: 60px;
  }

  .el24-helper__actions .btn {
    width: 100%;
  }

}

/* ==========================================================================
   Kostenblok 12-9-2026: tekst links, tabel rechts (7/5), knop onder de tekst.
   Vóór dit lag alles in één kolom van 880px en bleef de rechterhelft leeg.
   ========================================================================== */

.home-band--prices .home-prices--split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-12);
  align-items: start;
}

.home-band--prices .home-prices__text .home-band__intro {
  max-width: none;
}

.home-prices__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin: var(--space-8) 0 0;
}

.home-prices__more {
  font-weight: var(--font-weight-semibold);
}

.home-band--prices .home-prices--split .home-prices__table {
  max-width: none;
}

.home-band--prices .home-prices__panel .home-prices__note {
  max-width: none;
}

.home-band--prices .home-prices__panel {
  min-width: 0;
  overflow-x: auto;
}

@media (max-width: 1023px) {
  .home-band--prices .home-prices--split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
}

@media (max-width: 599px) {
  .home-prices__actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Dienstentabs 12-9-2026 ([el24_home_services layout="tabs"], naar lelynx.fr)
   Eén tabrij met een schuivende onderstreping, daaronder foto links en
   tekst, gidsen en één knop rechts (7/5 via 5/7: beeld iets smaller dan
   tekst). Geen kaartrand, geen schaduw; de tabrij krijgt alleen de haarlijn.
   ========================================================================== */

.service-tabs {
  margin: var(--space-8) 0 0;
}

.service-tabs__list {
  position: relative;
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-8);
  border-bottom: 1px solid var(--color-grey-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.service-tabs__list::-webkit-scrollbar {
  display: none;
}

.service-tabs__tab {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  font-family: inherit;
  font-size: var(--text-size);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--color-text-strong);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.service-tabs__tab:hover,
.service-tabs__tab:focus-visible {
  color: var(--color-main-text);
  outline: none;
}

.service-tabs__tab.is-active {
  color: var(--color-main-text);
}

/* Zonder script draagt de actieve tab zijn eigen streep; met script neemt
   de schuivende indicator het over. */
.service-tabs:not(.is-ready) .service-tabs__tab.is-active {
  border-bottom-color: var(--color-main);
}

.service-tabs__indicator {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 0;
  border-radius: 2px 2px 0 0;
  background-color: var(--color-main);
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

.service-tabs:not(.is-ready) .service-tabs__indicator {
  display: none;
}

.service-tabs__panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-12);
  align-items: stretch;
}

.service-tabs__panel[hidden] {
  display: none;
}

.service-tabs__figure {
  margin: 0;
  min-height: 0;
}

.service-tabs__figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.service-tabs__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.service-tabs__text {
  max-width: 62ch;
  margin: 0;
  font-size: var(--text-size);
  line-height: var(--text-lh);
}

.service-tabs__text strong {
  font-weight: var(--font-weight-bold);
}

/* "vanaf" klein en grijs, het bedrag groot en groen: één regel, geen kaartje. */
.service-tabs__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-strong);
}

.service-tabs__price-amount {
  font-size: 22px;
  font-weight: var(--heading-weight);
  color: var(--color-main-text);
  font-variant-numeric: tabular-nums;
}

.home-band .service-tabs__guides-title {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--font-size-lg);
  line-height: 1.3;
}

/* Gidsen als rijen met een haarlijn en het pijl-vierkantje uit de canon
   (.contact-arrow): de hele rij is de link. */
.site-main .service-tabs__guides {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.site-main .service-tabs__guides li {
  margin: 0;
  padding: 0;
}

.site-main .service-tabs__guides li + li {
  border-top: 1px solid var(--color-grey-2);
}

.site-main .service-tabs__guides a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 52px;
  padding: var(--space-2) 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-main .service-tabs__guides a:hover,
.site-main .service-tabs__guides a:focus-visible {
  color: var(--color-main-text);
  outline: none;
}

.site-main .service-tabs__guides a:hover .service-tabs__guide-label,
.site-main .service-tabs__guides a:focus-visible .service-tabs__guide-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.service-tabs__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: var(--color-white);
  background-color: var(--color-main-text);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, transform 0.18s ease;
}

.site-main .service-tabs__guides a:hover .service-tabs__arrow {
  background-color: var(--color-main-text-dark);
  transform: translateX(3px);
}

.home-band .service-tabs__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* Beweging: het oude paneel vervaagt (140ms), het nieuwe schuift van onder
   in; de foto volgt een tikje later dan de tekst. */
.service-tabs__panel.is-leaving > * {
  animation: service-tabs-leave 0.14s ease-in both;
}

.service-tabs__panel.is-entering .service-tabs__body {
  animation: service-tabs-enter 0.36s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.service-tabs__panel.is-entering .service-tabs__figure {
  animation: service-tabs-enter 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) 0.06s both;
}

@keyframes service-tabs-enter {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes service-tabs-leave {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@media (max-width: 1023px) {
  .service-tabs__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .service-tabs__figure img {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .service-tabs__cta {
    margin-top: 0;
  }
}

@media (max-width: 599px) {
  .service-tabs__tab {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }

  .service-tabs__cta {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-tabs *,
  .service-tabs__indicator {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Tools 12-9-2026 ([el24_tools_cards] op de homepage en /tools/,
   [el24_tool_labelschatter], [el24_tool_huurpunten], [el24_tool_labelsprong])
   ==========================================================================
   Botan: "pak die drie tools over, ander design, andere vragen, even goed
   werkend." De wizard staat in het paneel van de keuzehulp (lichtgroen,
   radius 12, pill, gesegmenteerde voortgang, grote witte antwoordknoppen)
   met daarbovenop: .form-input-velden voor getallen, een gesegmenteerde
   keuze binnen een vragengroep, en een resultaatpaneel met het label als
   grote groene letter. De kaarten van de homepageband volgen DESIGN.md:
   radius 12, 1px haarlijn, geen schaduw, lijnicoon in merkgroen zonder
   cirkel, titel 20/800, twee regels tekst en de pijl-link van .contact-arrow.
   ========================================================================== */

/* --- 1. De kaartenband ---------------------------------------------------- */

.el24-tools__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-6) var(--space-10);
  margin: 0 0 var(--space-8);
}

.el24-tools__head .home-band__intro {
  margin-bottom: 0;
}

.el24-tools__all {
  margin-top: var(--space-2);
  white-space: nowrap;
}

/* Vier kaarten op één rij (homepage); op /tools/ met de lange tekst 2x2. */
.el24-tools__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

.el24-tools__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--card-pad, 28px);
  padding-bottom: 32px;
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-2);
  border-radius: var(--radius-card);
}

.home-band--tint .el24-tools__card {
  border-color: transparent;
}

/* Icoon op een lichtgroen vierkant (Botan, 12-9-2026: "nog passender,
   bolder"): een vlak in plaats van een los lijntje, zwaardere lijn, en de
   kaart reageert op hover omdat de titel klikbaar is. Geen cirkel. */
.el24-tools__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 0 var(--space-5);
  color: var(--color-main-text);
  background-color: var(--color-light-green);
  border-radius: 14px;
}

.el24-tools__icon svg {
  display: block;
  width: 40px;
  height: 40px;
}

.el24-tools__icon svg * {
  stroke-width: 3;
}

.el24-tools__card {
  transition: border-color 0.15s ease;
}

.el24-tools__card:hover,
.el24-tools__card:focus-within {
  border-color: var(--color-main);
}

.home-band--tint .el24-tools__card:hover,
.home-band--tint .el24-tools__card:focus-within {
  border-color: var(--color-main);
}

.site-main .el24-tools__card-title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-lg);
  line-height: 1.3;
  font-weight: var(--font-weight-bold);
}

.el24-tools__card-title a {
  color: var(--color-text);
  text-decoration: none;
}

.el24-tools__card-title a:hover,
.el24-tools__card-title a:focus-visible {
  color: var(--color-main-text);
  text-decoration: underline;
}

.el24-tools__card-link {
  margin-top: auto;
  padding-top: var(--space-3);
}

.el24-tools__card-text {
  flex: 1 1 auto;
  margin: 0 0 var(--space-5);
  font-size: var(--text-size);
  font-weight: var(--text-weight);
  line-height: var(--text-lh);
}

/* --------------------------------------------------------------------------
   Gratis tools op de homepage (21-9-2026)

   De band toonde vier witte kaarten die alle vier hetzelfde wogen en alle vier
   alleen een belofte waren: je moest eerst klikken voor er iets gebeurde. Nu
   staat de labelcheck zelf in de band, met postcode en huisnummer, en komt het
   antwoord uit EP-Online in diezelfde band terug. De drie andere tools staan
   ernaast als donkergroene tegel van één regel, dezelfde kleur als de
   provinciekaart en de slotband.
   -------------------------------------------------------------------------- */

.el24-tools__live {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-8);
}

.el24-tools__rest {
  display: grid;
  gap: var(--space-4);
}

/* Dezelfde blokvorm als de kaarten in "Waarom Energielabel24" en bij de
   gerelateerde gidsen: 12px rond, één afgeschuinde hoek van 25px die per tegel
   wisselt, en dezelfde lichte beweging bij hover. Gevuld in het donkergroen
   van de provinciekaart en de slotband, zodat de drie tegels het tegenwicht
   zijn van het lichte paneel met de labelcheck ernaast. */
.el24-tools__tile {
  --chamfer: 25px;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background-color: var(--color-dark-green);
  /* Eén schuine scheiding in dezelfde richting als de afsnijding: de laatste
     strook van de tegel is een tint lichter. Wit op 4 procent, want een tweede
     groentint zou bij een kleurwijziging los komen te staan van de eerste. */
  background-image: linear-gradient(
    115deg,
    transparent 0 62%,
    rgba(255, 255, 255, 0.04) 62% 100%
  );
  color: var(--color-white);
  text-decoration: none;
  transition: transform 0.25s var(--el24-ease), box-shadow 0.25s var(--el24-ease);
}

.el24-tools__tile:hover,
.el24-tools__tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}

/* 21-9-2026: het icoon in het limegroen uit het logo. Het merkgroen op een
   donkergroene tegel gaf weinig verschil; dit licht op en het is dezelfde
   accentkleur als de eyebrow op de donkere banden. */
.el24-tools__tile-icon svg {
  width: 32px;
  height: 32px;
  color: var(--color-second);
}

.el24-tools__tile-title {
  font-size: var(--font-size-lg);
  line-height: 1.3;
  font-weight: var(--heading-weight);
  color: var(--color-white);
}

.el24-tools__tile-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

.el24-tools__tile-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-color: var(--color-main);
}

.el24-tools__tile-mark svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 1023px) {
  .el24-tools__live {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}

.el24-tools--page .el24-tools__cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

/* Onder 1280px worden vier kaarten te smal (titel op drie regels): 2x2. */
@media (max-width: 1279px) {
  .el24-tools__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .el24-tools__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .el24-tools__all {
    margin-top: 0;
  }
}

@media (max-width: 599px) {
  .el24-tools__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .el24-tools__card {
    padding: var(--space-5);
  }
}

/* --- 2. Het wizardpaneel -------------------------------------------------- */

/* Op de toolpagina's staat het paneel in .legal-section, waarvan de p-regel
   (kleur, marge, regelhoogte) anders elke alinea van het paneel overschrijft;
   de alinea-klassen hieronder staan daarom onder .el24-tool. */

/* Zelfde paneel als de keuzehulp (.el24-helper): lichtgroen, radius 12, pill
   in merkgroen, gesegmenteerde voortgang met de teller rechts, vraag als H3,
   grote witte antwoordknoppen. Daarbovenop: .form-input-velden voor
   getallen, een gesegmenteerde keuze binnen een vragengroep en het
   resultaatpaneel met de grote groene letter of het grote getal. */
.el24-tool {
  --el24-tool-line: #d6e7da;
  margin: var(--stack) 0 0;
  padding: var(--space-8);
  background-color: var(--color-light-green);
  border-radius: var(--radius-card);
  color: var(--color-text);
}

.el24-tool__pill {
  display: inline-block;
  padding: 4px 12px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--color-white);
  background-color: var(--color-main);
  border-radius: var(--radius-pill);
}

.el24-tool__progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
}

.el24-tool__bar {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-2);
}

/* Elk segment vult van links naar rechts; een segment dat al gevuld was
   (is-instant) springt niet opnieuw. */
.el24-tool__bar span {
  position: relative;
  flex: 1 1 0;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background-color: var(--el24-tool-line);
}

.el24-tool__bar span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background-color: var(--color-main);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.el24-tool__bar span.is-active::after {
  transform: scaleX(1);
}

.el24-tool__bar span.is-instant::after {
  transition: none;
}

.el24-tool__count {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
}

.el24-tool__count.is-entering {
  animation: el24-tool-enter 0.3s ease-out both;
}

/* "Terug" staat bovenin de stap als kleine tekstknop, net als in de keuzehulp. */
.el24-tool .el24-tool__topnav {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.el24-tool__back {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-main-text);
  background: none;
  border: 0;
  cursor: pointer;
}

.el24-tool__back:hover,
.el24-tool__back:focus-visible {
  color: var(--color-main-text-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}

.site-main .el24-tool__question {
  margin: 0 0 var(--space-4);
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  font-weight: var(--heading-weight);
  color: var(--color-text);
  outline: none;
}

.el24-tool .el24-tool__help {
  max-width: 66ch;
  margin: 0 0 var(--space-5);
  font-size: var(--text-size);
  font-weight: var(--text-weight);
  line-height: var(--text-lh);
  color: var(--color-text);
}

/* Antwoordknoppen: wit, haarlijn, 20/700 links; hover en focus: rand in
   linkgroen en een tikje omhoog; gekozen: merkgroene rand plus vinkje. */
.el24-tool__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.el24-tool__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex: 1 1 220px;
  max-width: 360px;
  min-height: 72px;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  font-family: inherit;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  text-align: left;
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-2);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.el24-tool__option:hover,
.el24-tool__option:focus-visible {
  border-color: var(--color-main-text);
  outline: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.el24-tool__option:active {
  transform: translateY(0);
  transition-duration: 0.08s;
}

.el24-tool__option.is-selected {
  border-color: var(--color-main);
}

/* Net gekozen: het paneel wacht even zodat de keuze zichtbaar is. */
.el24-tool__option.is-chosen {
  background-color: var(--color-light-green);
  transform: none;
  box-shadow: none;
}

.el24-tool__option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.el24-tool__option-help {
  font-size: var(--text-sm);
  font-weight: var(--text-weight);
  line-height: 1.4;
  color: var(--color-text-strong);
}

.el24-tool__check {
  display: none;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-main);
}

.el24-tool__option.is-selected .el24-tool__check {
  display: block;
  animation: el24-tool-pop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1.2) both;
}

/* Korte antwoorden (de labelletters) staan als raster van zes, niet als
   lange kolom; het ene lange antwoord ("Geen of onbekend") krijgt een
   eigen rij. */
.el24-tool__options--compact {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.el24-tool__options--compact .el24-tool__option {
  flex: none;
  max-width: none;
  min-height: 60px;
}

.el24-tool__options--compact .el24-tool__option--wide {
  grid-column: 1 / -1;
}

/* Vragengroep: label 15/700 boven een veld, wit veld op de tint. */
.el24-tool__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.el24-tool__field {
  max-width: 560px;
}

.el24-tool__label {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--color-text);
}

.el24-tool__optional {
  font-weight: var(--text-weight);
  color: var(--color-text-strong);
}

.el24-tool__input-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.el24-tool .form-input,
.el24-tool__input {
  width: 100%;
  max-width: 240px;
  background-color: var(--color-white);
}

.el24-tool__unit {
  font-size: var(--text-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-strong);
}

/* Een foutmelding staat in een dichtgeklapte houder onder het veld en
   vouwt zacht open, zodat de knop eronder meeschuift in plaats van springt. */
.el24-tool__error-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.24s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.24s ease;
}

.el24-tool__error-wrap.is-shown {
  grid-template-rows: 1fr;
  opacity: 1;
}

.el24-tool__error-wrap--step {
  margin: var(--space-5) 0 0;
}

.el24-tool .el24-tool__error {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  color: var(--color-danger);
}

.el24-tool .el24-tool__error-wrap.is-shown .el24-tool__error {
  padding-top: var(--space-2);
}

.el24-tool .el24-tool__result-inner > .el24-tool__error {
  margin: 0 0 var(--space-4);
}

.el24-tool .el24-tool__field-help {
  max-width: 66ch;
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-strong);
}

/* Gesegmenteerde keuze binnen een groep: kleine witte knoppen naast elkaar. */
.el24-tool__seg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.el24-tool__seg-btn {
  margin: 0;
  padding: 10px 16px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  text-align: left;
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-2);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.el24-tool__seg-btn:hover,
.el24-tool__seg-btn:focus-visible {
  border-color: var(--color-main-text);
  outline: none;
}

.el24-tool__seg-btn.is-selected {
  color: var(--color-white);
  background-color: var(--color-main-text);
  border-color: var(--color-main-text);
}

.el24-tool__check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-size);
  font-weight: var(--text-weight);
  line-height: 1.5;
  cursor: pointer;
}

.el24-tool__check-row input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 3px 0 0;
  accent-color: var(--color-main-text);
}

/* Navigatie: de ene knop van het paneel. Tijdens het rekenen houdt de knop
   zijn breedte en toont "Even rekenen". */
.el24-tool__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin: var(--space-6) 0 0;
}

.el24-tool__next.is-busy {
  opacity: 0.75;
  cursor: progress;
  pointer-events: none;
}

/* --- Beweging tussen de stappen -------------------------------------------
   Uit: de oude stap schuift een stukje weg en vervaagt (160ms). Hoogte: het
   paneel groeit of krimpt naar de nieuwe stap (320ms) in plaats van te
   springen. In: de vraag eerst, daarna de antwoorden of velden na elkaar,
   dan de knop; vooruit komt van rechts, terug van links. Het resultaat
   bouwt op met de grote letter of het grote getal eerst (fade en lichte
   schaal), dan de rest, de knop als laatste. */
.el24-tool__step {
  position: relative;
}

.el24-tool__step.is-resizing {
  transition: height 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.el24-tool__step.is-leaving > * {
  animation: el24-tool-leave 0.16s ease-in both;
}

.el24-tool__step.is-back.is-leaving > * {
  animation-name: el24-tool-leave-back;
}

.el24-tool__step .is-entering {
  animation: el24-tool-enter 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.el24-tool__step.is-back .is-entering {
  animation-name: el24-tool-enter-back;
}

.el24-tool__step .is-entering--big,
.el24-tool__step.is-back .is-entering--big {
  animation: el24-tool-enter-big 0.46s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.el24-tool__step .el24-tool__meter.is-entering span {
  animation: el24-tool-meter 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes el24-tool-enter {
  from { opacity: 0; transform: translate3d(28px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes el24-tool-enter-back {
  from { opacity: 0; transform: translate3d(-28px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes el24-tool-enter-big {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes el24-tool-leave {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(-22px, 0, 0); }
}

@keyframes el24-tool-leave-back {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(22px, 0, 0); }
}

@keyframes el24-tool-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@keyframes el24-tool-meter {
  from { transform: scaleX(0); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .el24-tool *,
  .el24-tool *::after {
    animation: none !important;
    transition: none !important;
  }

  .el24-tool__option:hover,
  .el24-tool__option:focus-visible {
    transform: none;
    box-shadow: none;
  }
}

/* --- 3. Het resultaat ------------------------------------------------------ */

/* Zonder script toont dit paneel het resultaat van een formulierpost; met
   script bouwt het resultaat op in de stap zelf en blijft dit verborgen. */
.el24-tool__result {
  margin-top: var(--space-5);
}

.el24-tool__result[hidden] {
  display: none;
}

.el24-tool__result-inner {
  outline: none;
}

.el24-tool .el24-tool__kicker {
  margin: 0 0 var(--space-2);
  font-size: var(--eyebrow-size);
  font-weight: var(--heading-weight);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-main-text);
}

.site-main .el24-tool__big {
  margin: 0 0 var(--space-3);
  font-size: 96px;
  line-height: 1;
  font-weight: var(--heading-weight);
  letter-spacing: -0.02em;
  color: var(--color-main);
  font-variant-numeric: tabular-nums;
  transform-origin: left center;
}

.site-main .el24-tool__big--text {
  font-size: var(--h1-size);
  letter-spacing: 0;
}

.el24-tool .el24-tool__lead {
  max-width: 66ch;
  margin: 0 0 var(--space-3);
  font-size: var(--lead-size);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}

.el24-tool .el24-tool__text {
  max-width: 66ch;
  margin: 0 0 var(--space-4);
  font-size: var(--text-size);
  font-weight: var(--text-weight);
  line-height: var(--text-lh);
}

.el24-tool .el24-tool__note {
  max-width: 66ch;
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-strong);
}

.site-main .el24-tool__subhead {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--font-size-lg);
  line-height: 1.3;
  font-weight: var(--heading-weight);
}

/* Rijen met haarlijn, label links en waarde rechts (geen kaartjes). */
.site-main .el24-tool__rows {
  list-style: none;
  max-width: 560px;
  margin: 0;
  padding: 0;
}

.site-main .el24-tool__rows > li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-3) 0;
  font-size: var(--text-size);
  line-height: 1.5;
  border-top: 1px solid var(--el24-tool-line);
}

.site-main .el24-tool__rows > li:first-child {
  border-top: 0;
  padding-top: 0;
}

.el24-tool__row-label {
  font-weight: var(--font-weight-bold);
}

.el24-tool__row-value {
  flex-shrink: 0;
  text-align: right;
  font-weight: var(--font-weight-semibold);
  color: var(--color-main-text);
  font-variant-numeric: tabular-nums;
}

.el24-tool__rows--measures .el24-tool__row-value,
.el24-tool__rows--plan .el24-tool__row-value {
  flex-shrink: 1;
  font-weight: var(--text-weight);
  color: var(--color-text-strong);
}

.el24-tool__meter {
  width: 100%;
  max-width: 560px;
  height: 10px;
  margin: 0 0 var(--space-5);
  background-color: var(--el24-tool-line);
  border-radius: 5px;
  overflow: hidden;
}

.el24-tool__meter span {
  display: block;
  height: 100%;
  background-color: var(--color-main);
  border-radius: 5px;
  transform-origin: left center;
}

/* Op het resultaat staat "Opnieuw beginnen" naast de ene groene knop, zodat
   er geen losse regel onder het paneel hangt (zelfde als de keuzehulp). */
.el24-tool__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-6) 0 0;
}

.el24-tool__nav--result {
  margin-top: var(--space-6);
}

.el24-tool__restart {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-size);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-main-text);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.el24-tool__restart:hover,
.el24-tool__restart:focus-visible {
  color: var(--color-main-text-dark);
  outline: none;
}

.el24-tool .el24-tool__disclaimer {
  max-width: 66ch;
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-strong);
}


/* Zonder JavaScript: het gewone formulier, veldsets met een haarlijn. */
.el24-tool__form {
  margin: var(--space-4) 0 0;
}

.el24-tool__fieldset {
  margin: 0 0 var(--space-6);
  padding: var(--space-5) 0 0;
  border: 0;
  border-top: 1px solid var(--el24-tool-line);
}

.el24-tool__fieldset .el24-tool__field {
  margin: 0 0 var(--space-4);
}

.el24-tool__legend {
  padding: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--heading-weight);
  line-height: 1.3;
}

@media (max-width: 1023px) {
  .el24-tool__options--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .el24-tool {
    padding: var(--space-5);
  }

  .el24-tool__options {
    flex-direction: column;
  }

  .el24-tool__options--compact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .el24-tool__option {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-height: 60px;
  }

  .el24-tool .form-input,
  .el24-tool__input {
    max-width: none;
  }

  .el24-tool__nav .btn,
  .el24-tool__actions .btn {
    width: 100%;
  }

  .site-main .el24-tool__big {
    font-size: 72px;
  }

  .site-main .el24-tool__big--text {
    font-size: var(--h2-size);
  }

  .site-main .el24-tool__rows > li {
    flex-direction: column;
    gap: 2px;
  }

  .el24-tool__row-value {
    text-align: left;
  }
}

/* --- 4. Labelcheck 12-9-2026: de vierde tool ([el24_labelcheck]) ----------
   Eén stap (het adres) in hetzelfde paneel: geen voortgangsbalk, drie
   .form-input-velden naast elkaar, en het resultaat met de geregistreerde
   letter groot in merkgroen. De knop naar een nieuw label staat er alleen
   als het label ontbreekt, verlopen is of binnen een jaar verloopt; anders
   een gewone tekstlink. */

.el24-tool--single .el24-tool__progress {
  display: none;
}

.el24-tool--single .el24-tool__pill {
  margin-bottom: var(--space-5);
}

.el24-tool__fields--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4) var(--space-5);
}

.el24-tool__fields--row .el24-tool__field {
  flex: 0 1 auto;
  max-width: none;
}

.el24-tool__fields--row .el24-tool__field .form-input {
  max-width: none;
}

.el24-tool__field--postcode .form-input {
  width: 180px;
}

.el24-tool__field--huisnummer .form-input,
.el24-tool__field--toevoeging .form-input {
  width: 150px;
}

/* Een notitie direct onder de knoppenrij (zonder sleutel) krijgt lucht. */
.el24-tool .el24-tool__actions + .el24-tool__note {
  margin-top: var(--space-4);
}

/* Tekstlinks in het resultaat: de rustige variant van de knop. */
.el24-tool .el24-tool__text a,
.el24-tool .el24-tool__note a {
  color: var(--color-main-text);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.el24-tool .el24-tool__text a:hover,
.el24-tool .el24-tool__note a:hover,
.el24-tool .el24-tool__text a:focus-visible,
.el24-tool .el24-tool__note a:focus-visible {
  color: var(--color-main-text-dark);
}

@media (max-width: 599px) {
  .el24-tool__fields--row {
    flex-direction: column;
    gap: var(--space-4);
  }

  .el24-tool__fields--row .el24-tool__field {
    width: 100%;
  }

  .el24-tool__field--postcode .form-input,
  .el24-tool__field--huisnummer .form-input,
  .el24-tool__field--toevoeging .form-input {
    width: 100%;
  }
}

/* Beeldverantwoording onderaan Over ons (CC BY-foto op de homepage, 12-9-2026). */
.site-main .about-credits {
  max-width: var(--container-reading);
  margin: var(--space-8) auto 0;
  padding: 0 var(--container-padding);
  font-size: var(--text-size);
  line-height: var(--text-lh);
  color: var(--color-text);
}

/* ==========================================================================
   Klantervaringen 12-9-2026 (homepage band #testimonials, tint)
   Pattern: Independer's review band (one big figure with its source line,
   three dated review cards) and MoneySuperMarket's cards (quote, name,
   date). Summary left, cards right; the cards are one native scroller with
   scroll-snap (three visible on desktop, prev/next buttons past three;
   swipe on phones). White panel on the tint, radius 12, hairline, no
   shadow, one brand green for figure and stars. Sample reviews (preview
   switch) carry a pill per card and one note line; both vanish with real
   rows. Content: EL24_Home_Reviews (core plugin).
   ========================================================================== */

.home-reviews__note {
  margin: calc(-1 * var(--space-2)) 0 var(--space-8);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-strong);
}

.home-reviews {
  display: grid;
  /* minmax(0, …): an auto column would size itself to the scroller's
     content and push the cards past the viewport on phones. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.home-reviews__list {
  min-width: 0;
}

@media (min-width: 1024px) {
  .home-reviews {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-16);
  }
}

/* --- Summary: the figure in brand green, stars, source line, how --------- */

.home-reviews__summary {
  max-width: 36ch;
}

.home-reviews__score {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  font-size: 56px;
  font-weight: var(--heading-weight);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-main-text);
}

@media (min-width: 768px) {
  .home-reviews__score {
    font-size: 72px;
  }
}

.home-reviews__score-of {
  font-size: var(--h3-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  color: var(--color-text-strong);
}

.home-reviews__summary .home-reviews__star {
  width: 28px;
  height: 28px;
}

.home-reviews__count {
  margin: var(--space-4) 0 0;
  font-size: var(--text-size);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--color-text);
}

/* 21-9-2026: dit is een alinea van ruim honderd tekens, geen bijschrift, dus
   hij leest op de leesmaat en in de bodykleur. Grijs op 16px was te klein voor
   de zin die uitlegt wie een beoordeling mag achterlaten. */
.home-reviews__how {
  margin: var(--space-3) 0 0;
  font-size: var(--text-size);
  line-height: var(--text-lh);
  color: var(--color-text);
}

/* --- Stars: one SVG, brand green, half star by clip ---------------------- */

.home-reviews__stars {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}

.home-reviews__star {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.home-reviews__star path {
  fill: var(--color-grey-2);
}

.home-reviews__star--full path,
.home-reviews__star .home-reviews__star-fill {
  fill: var(--color-main);
}

/* --- Cards: one scroller, bleeding to the viewport edge on phones -------- */

.home-reviews__cards {
  display: flex;
  gap: var(--space-5);
  margin: 0 calc(-1 * var(--container-padding));
  padding: 0 var(--container-padding);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--container-padding);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.home-reviews__cards::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1024px) {
  .home-reviews__cards {
    margin: 0;
    padding: 0;
    scroll-padding: 0;
  }
}

.home-review {
  display: flex;
  flex: 0 0 84%;
  flex-direction: column;
  gap: var(--space-4);
  /* A flex item's automatic minimum is its content width, and a clamped
     -webkit-box reports the whole quote: without this the card grows to
     the length of the text. */
  min-width: 0;
  box-sizing: border-box;
  padding: var(--space-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-2);
  border-radius: var(--radius-card);
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .home-review {
    flex-basis: calc((100% - var(--space-5)) / 2);
  }
}

@media (min-width: 1024px) {
  .home-review {
    flex-basis: calc((100% - 2 * var(--space-5)) / 3);
  }
}

.home-review__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.home-review__sample {
  flex: 0 0 auto;
  padding: 3px 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-strong);
  border: 1px solid var(--color-grey-2);
  border-radius: var(--radius-pill);
}

/* Quote and "Lees meer" together take the free height, so the button sits
   right under the text and the meta line is pinned to the bottom. */
.home-review__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.home-review__quote {
  margin: 0;
  padding: 0;
  border: 0;
}

.home-review__quote p {
  display: -webkit-box;
  margin: 0;
  font-size: var(--text-size);
  font-weight: var(--text-weight);
  line-height: var(--text-lh);
  color: var(--color-text);
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-review.is-open .home-review__quote p {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.home-review__more {
  align-self: flex-start;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  color: var(--color-main-text);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-review__more:hover,
.home-review__more:focus-visible {
  color: var(--color-main-text-dark);
}

.home-review__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-grey-2);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text-strong);
}

/* Name left, date right; city · service on the full width beneath. */
.home-review__who {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.home-review__who strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.home-review__date {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* --- Foot: text link left, prev/next right (desktop only) ---------------- */

.home-reviews__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.home-reviews__foot .home-reviews__all {
  margin: 0;
}

.home-reviews__nav {
  display: none;
}

@media (min-width: 1024px) {
  .home-reviews__nav {
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
  }
}

.home-reviews__nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-2);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: border-color 0.2s var(--el24-ease), color 0.2s var(--el24-ease);
}

.home-reviews__nav button:hover:not(:disabled),
.home-reviews__nav button:focus-visible {
  color: var(--color-main-text);
  border-color: var(--color-main-text);
}

.home-reviews__nav button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* --- Reviews page: the same sample labelling (preview switch) ------------ */

.ce-note {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-strong);
}

.ce-card__sample {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--color-text-strong);
  border: 1px solid var(--color-grey-2);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   Header, one chapter (22-9-2026). De drie generaties headerregels stonden
   verspreid over het bestand (2025-basis, "Header (desktop)" en de
   herziening van 12-9-2026). Ze staan nu op volgorde bij elkaar; de
   onderlinge volgorde is exact die van voor de verhuizing, zodat de
   cascade niet verschuift. De laatste generatie volgt hieronder.
   ========================================================================== */

/* ==========================================================================
   Site Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Canon: 77px tall on mobile, 92px on desktop, in every language. Flex
     centring keeps the bar centred inside the min-height; .mobile-nav is
     absolutely positioned, so it stays out of the flex flow. */
  display: flex;
  align-items: center;
  min-height: 77px;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-grey);
}

@media (min-width: 1024px) {
    .site-header {
      min-height: 92px;
    }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Logo */
.site-branding {
  flex-shrink: 0;
}

.site-branding .custom-logo-link {
  display: block;
}

.site-branding .custom-logo {
  height: 32px;
  width: auto;
}

.site-logo {
  /* Het beeldmerk is 26px hoog op een telefoon (headerbudget, zie het blok
     onderaan); de link eromheen was daarmee een tapdoel van 26px. De hoogte
     van het beeld blijft, alleen het raakvlak groeit naar 44px. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.site-logo__img {
  height: 32px;
  width: auto;
}

.site-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.site-logo:hover .site-title,
.site-logo:focus .site-title {
  color: var(--color-primary-dark);
}

/* Header Actions (language switch + the one primary button).
   The advisor links (log in, sign up) moved to the footer strip on
   9 September 2026, so this row holds a visitor action only. */
.header-actions {
  align-items: center;
  gap: var(--space-3);
}

/* The one primary action in the header: "Compare advisors". 44px tall,
   text-safe green, white label. */
.header-actions__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
  text-decoration: none;
  background-color: var(--color-main-text);
  border: 1.5px solid var(--color-main-text);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.header-actions__cta:hover,
.header-actions__cta:focus {
  color: #ffffff;
  background-color: var(--color-main-text-dark);
  border-color: var(--color-main-text-dark);
  text-decoration: none;
}

/* Compact variant beside the hamburger; hidden once the full actions show.
   Alleen de zijruimte krimpt — de 44px hoogte van de basisknop blijft, want
   dit is op een telefoon het enige primaire tapdoel in de header. */
.header-actions__cta--compact {
  margin-left: auto;
  padding: 0 var(--space-4);
}

@media (min-width: 1024px) {
    .header-actions__cta--compact {
      display: none;
    }
}

/* ==========================================================================
   Site Navigation
   ========================================================================== */

/* Desktop Navigation - Hidden by default on mobile */
.site-nav--desktop {
  display: none !important;
  flex-grow: 1;
}

/* Header actions - Hidden by default on mobile */
.header-actions {
  display: none !important;
}

/* Menu labels never wrap ("Veelgestelde vragen" used to break onto two lines
   and push the Dutch header 17px taller than the English one). */
.site-nav a {
  white-space: nowrap;
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu > li {
  position: relative;
}

.nav-menu > li > a {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  font-size: var(--nav-font);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.nav-menu > li > a:hover,
.nav-menu > li > a:focus {
  color: var(--color-main-text);
  text-decoration: none;
}

.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a {
  color: var(--color-main-text);
}

/* Dropdown Arrow */
.nav-dropdown-arrow {
  transition: transform 0.2s ease;
}

.nav-menu > li:hover .nav-dropdown-arrow {
  transform: rotate(180deg);
}

/* Dropdown Menu */
.nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: var(--space-2) 0;
  margin: 0;
  list-style: none;
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  z-index: 100;
}

.nav-menu .sub-menu li {
  margin: 0;
}

.nav-menu .sub-menu a {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.15s ease;
}

.nav-menu .sub-menu a:hover {
  color: var(--color-main-text);
  background-color: var(--color-bg-alt);
}

/* Dropdown Transitions */
.dropdown-enter {
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.dropdown-enter-start {
  opacity: 0;
  transform: translateY(-8px);
}

.dropdown-enter-end {
  opacity: 1;
  transform: translateY(0);
}

.dropdown-leave {
  transition:
    opacity 0.1s ease,
    transform 0.1s ease;
}

.dropdown-leave-start {
  opacity: 1;
  transform: translateY(0);
}

.dropdown-leave-end {
  opacity: 0;
  transform: translateY(-8px);
}

/* ==========================================================================
   Mobile Menu Toggle
   ========================================================================== */

.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
  background-color: var(--color-bg-alt);
}

/* ==========================================================================
   Mobile Navigation
   ========================================================================== */

/* Het open menu vult de rest van het scherm en scrolt zelf; de pagina
   eronder staat stil (body.el24-menu-open). Zo schemert de hero niet meer
   onder het menu door (12-9-2026). */
.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100vh - 100%);
  height: calc(100dvh - 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  z-index: 99;
}

.mobile-nav__menu {
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0;
}

.mobile-nav__menu li {
  margin: 0;
}

.mobile-nav__menu > li > a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.15s ease;
}

.mobile-nav__menu > li > a:hover {
  color: var(--color-main-text);
  background-color: var(--color-bg-alt);
}

.mobile-nav__menu .current-menu-item > a,
.mobile-nav__menu .current_page_item > a {
  color: var(--color-primary);
}

/* Mobile Submenu */
.mobile-nav__menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-2) var(--space-4);
}

.mobile-nav__menu .sub-menu a {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}

.mobile-nav__menu .sub-menu a:hover {
  color: var(--color-main-text);
}

/* Mobile Nav Actions */
.mobile-nav__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* Mobile Nav Transitions */
.mobile-nav-enter {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.mobile-nav-enter-start {
  opacity: 0;
  transform: translateY(-10px);
}

.mobile-nav-enter-end {
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav-leave {
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.mobile-nav-leave-start {
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav-leave-end {
  opacity: 0;
  transform: translateY(-10px);
}

@media (min-width: 1024px) {
    /* Show header actions */
    .header-actions {
      display: flex !important;
    }

    /* Hide mobile menu toggle */
    .mobile-menu-toggle {
      display: none !important;
    }

    /* Hide mobile nav */
    .mobile-nav {
      display: none !important;
    }
}

/* ==========================================================================
   Language switcher (NL | EN)
   --------------------------------------------------------------------------
   Sits in the header actions next to Login/Register, and in the mobile menu.
   Styled as a compact segmented control so it reads as a control, not a link
   pair, and never competes with the Register call to action.
   ========================================================================== */

.lang-switch {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1.5px solid var(--color-grey-2);
  border-radius: var(--radius-sm);
}

.lang-switch__item {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 5px 12px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.2;
  color: var(--color-text-strong);
  text-decoration: none;
  background-color: transparent;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.lang-switch__item + .lang-switch__item {
  border-left: 1.5px solid var(--color-grey-2);
}

.lang-switch__item:hover {
  color: var(--color-text);
  background-color: var(--color-grey);
  text-decoration: none;
}

.lang-switch__item.is-active {
  color: var(--color-white);
  background-color: var(--color-main-text);
}

.lang-switch__item.is-active:hover {
  color: var(--color-white);
  background-color: var(--color-main-text-dark);
}

/* Mobile menu: full-width row above the Login/Register buttons. */
.lang-switch--mobile {
  display: flex;
  width: 100%;
  margin-bottom: var(--space-3);
}

.lang-switch--mobile .lang-switch__item {
  flex: 1 1 0;
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-size: var(--font-size-md);
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .site-nav--desktop,
    .header-actions {
      display: none !important;
    }

    .mobile-menu-toggle {
      display: flex !important;
    }

    /* The desktop block force-hides the mobile nav; undo that here, but keep
       Alpine's x-show (an inline display:none) in charge of open/closed. */
    .mobile-nav {
      display: block !important;
    }

    .mobile-nav[style*="display: none"] {
      display: none !important;
    }
}

@media (min-width: 1280px) {
    /* The row fills its container, so "hang off the right edge" means the
       same thing in every language. */
    .site-header__inner {
      width: 100%;
      justify-content: flex-start;
      gap: var(--space-3);
    }

    .nav-menu {
      justify-content: flex-start;
      flex-wrap: nowrap;
      gap: 0;
    }

    .header-actions {
      gap: 8px;
    }

    /* The switch has overflow:hidden for its rounded corners; without
       flex-shrink:0 a long Dutch menu squeezed it and cut the EN button off. */
    .lang-switch {
      flex-shrink: 0;
    }

    .lang-switch__item {
      padding: 5px 8px;
    }
}

@media (min-width: 1024px) {
    /* `overflow: hidden` stond hier tot 12-9-2026 en sneed het uitklapmenu
       onder "Kennis" af (Botan: "de header werkt totaal niet"). De breedte
       is op 1280+ gemeten en past; clippen is niet nodig. */
    .site-nav--desktop {
      flex-grow: 0;
      flex-shrink: 1;
    }

    .header-actions {
      flex-shrink: 0;
    }
}

@media (max-width: 479px) {
    .site-branding .custom-logo,
    .site-logo__img,
    .site-header .site-logo img,
    .site-header .site-branding img {
      height: 26px;
      max-width: 150px;
      width: auto;
    }

    .header-actions__cta--compact {
      padding: 0 12px;
      font-size: 14px;
      white-space: nowrap;
    }

    .site-header__inner {
      gap: 10px;
    }
}

/* ==========================================================================
   Header 12-9-2026 (Botan: "saai, tekst te veel links, NL/EN te veel rechts")
   Het menu staat gecentreerd tussen logo en acties, de links zijn 16/700 met
   een groene onderstreping die bij hover en op de actieve pagina inschuift,
   de taalwissel is een kale NL | EN naast de knop. Dit blok staat na het
   maatblok van de header en wint daarvan; laat het achteraan staan.
   ========================================================================== */
@media (min-width: 1024px) {
  .site-header__inner {
    gap: var(--space-8);
  }

  .site-nav--desktop {
    display: flex !important;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
  }

  .nav-menu {
    gap: var(--space-1);
  }

  .nav-menu > li > a {
    position: relative;
    padding: var(--space-2) 14px;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    border-radius: 0;
  }

  .nav-menu > li > a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--color-main);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .nav-menu > li > a:hover::after,
  .nav-menu > li > a:focus-visible::after,
  .nav-menu > li[x-data] > a[aria-expanded="true"]::after,
  .nav-menu .current-menu-item > a::after,
  .nav-menu .current_page_item > a::after,
  .nav-menu .current-menu-ancestor > a::after {
    transform: scaleX(1);
  }

  /* De taalwissel houdt zijn kader (Botan: "hoe dit origineel was vond ik
     mooier"), met meer lucht tot de groene knop. */
  .header-actions {
    gap: 28px;
    margin-left: 0;
  }

  .header-actions__cta {
    min-height: 46px;
    padding: 0 var(--space-6);
    font-size: 16px;
    transition: background-color 0.18s ease, transform 0.18s ease;
  }

  .header-actions__cta:hover {
    transform: translateY(-1px);
  }
}

/* ==========================================================================
   Tarievenmatrix 12-9-2026 ([el24_home_prices layout="matrix"], naar een
   plan-vergelijktabel op Mobbin): diensten als kolommen, het energielabel
   uitgelicht, vinkjes voor wat erin zit. Tekst erboven, tabel over de
   volle breedte; op een telefoon scrolt de tabel in zijn eigen container
   met de eerste kolom vast.
   ========================================================================== */
.home-band--prices .home-prices--stack .home-prices__text {
  max-width: 66ch;
}

.home-band--prices .home-prices--stack .home-prices__panel {
  margin-top: var(--space-8);
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.home-band--prices .home-prices--stack .home-prices__note {
  margin-top: var(--space-5);
}

.home-matrix__table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-white);
  border: 1px solid var(--color-grey-2);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.home-matrix__table th,
.home-matrix__table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-grey-2);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text);
}

.home-matrix__table th + th,
.home-matrix__table td + td {
  border-left: 1px solid var(--color-grey-2);
}

.home-matrix__table thead th {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-strong);
  background: var(--color-light-grey);
}

.home-matrix__table thead th.is-primary {
  position: relative;
  color: var(--color-main-text);
  background: var(--color-light-green);
}

.home-matrix__flag {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-main-text);
  opacity: 0.85;
}

.home-matrix__table tbody th {
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.home-matrix__table tbody td.is-primary {
  background: #f6fbf7;
}

.home-matrix__table tbody tr:last-child th,
.home-matrix__table tbody tr:last-child td {
  border-bottom: 0;
}

.home-matrix__table .home-prices__amount {
  font-size: 20px;
  font-weight: var(--heading-weight);
  color: var(--color-main-text);
  font-variant-numeric: tabular-nums;
}

.home-matrix__bool {
  display: inline-flex;
  align-items: center;
}

.home-matrix__icon--yes {
  color: var(--color-main);
}

.home-matrix__icon--no {
  color: #b9c0cc;
}

@media (max-width: 1023px) {
  .home-matrix__table thead th,
  .home-matrix__table tbody th,
  .home-matrix__table tbody td {
    padding: 12px 14px;
  }

  .home-matrix__table tbody th,
  .home-matrix__table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-white);
    box-shadow: 1px 0 0 var(--color-grey-2);
  }

  .home-matrix__table thead th:first-child {
    background: var(--color-light-grey);
  }
}

/* ==========================================================================
   Hero-vinkjes 12-9-2026 (Botan: "mogen die niet wat groter?"): de drie
   punten onder de kop op 17/700 met een vinkje van 22px en meer lucht.
   ========================================================================== */
.site-main .hero__badges > li,
.site-main .hero__badge,
.hero__badge {
  min-height: 0;
  gap: 10px;
  font-size: 17px;
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  color: var(--color-text);
}

.hero__badges {
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.site-main .hero__badges > li .hero__badge-icon,
.hero__badge .hero__badge-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .site-main .hero__badges > li,
  .hero__badge {
    font-size: 16px;
  }

  .site-main .hero__badges > li .hero__badge-icon,
  .hero__badge .hero__badge-icon {
    width: 20px;
    height: 20px;
  }
}

/* ==========================================================================
   Tarievenkaarten 12-9-2026 ([el24_home_prices layout="cards"], naar
   Superhuman op Mobbin): één samengevoegd paneel met een kolom per dienst,
   pill "voor wie", naam, één regel, vanafprijs groot, één knop en wat erin
   zit; het energielabel als uitgelichte kolom met een tab erboven. De
   matrix zit eronder in een uitklap.
   ========================================================================== */
.price-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-grey-2);
  border-radius: var(--radius-card);
}

.price-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.price-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.price-cards--1 { grid-template-columns: minmax(0, 1fr); }

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-8) var(--space-6);
}

.price-card + .price-card {
  border-left: 1px solid var(--color-grey-2);
}

.price-card.is-primary {
  margin-top: -1px;
  background: #f6fbf7;
  border: 2px solid var(--color-main-text);
  border-radius: var(--radius-card);
  z-index: 1;
}

.price-card.is-primary + .price-card {
  border-left: 0;
}

.price-card__tab {
  position: absolute;
  top: -1px;
  left: -2px;
  right: -2px;
  transform: translateY(-100%);
  padding: 8px 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--color-white);
  background: var(--color-main-text);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.price-cards:has(.price-card__tab) {
  margin-top: calc(var(--space-6) + 40px);
}

.price-card__for {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
  background: var(--color-light-grey);
  border-radius: var(--radius-pill);
}

.price-card.is-primary .price-card__for {
  color: var(--color-main-text);
  background: var(--color-light-green);
}

.home-band .price-card__name {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 24px;
  line-height: 1.2;
}

.price-card__line {
  min-height: calc(2 * 1.5em);
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-strong);
}

.price-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-strong);
}

.price-card__price strong {
  font-size: 36px;
  font-weight: var(--heading-weight);
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.price-card.is-primary .price-card__price strong {
  color: var(--color-main-text);
}

.price-card__upto {
  margin: var(--space-2) 0 0;
  font-size: 14px;
  color: var(--color-text-strong);
}

.price-card .price-card__cta {
  width: 100%;
  margin-top: var(--space-6);
}

.price-card .btn--ghost.price-card__cta {
  min-height: var(--btn-height);
  font-size: var(--text-size);
  color: var(--color-main-text);
  border-color: var(--color-main-text);
}

.price-card .btn--ghost.price-card__cta:hover {
  color: var(--color-white);
  background: var(--color-main-text);
}

.price-card__includes {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.site-main .price-card__list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-main .price-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.site-main .price-card__list svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-main);
}

/* De matrix als uitklap onder de kaarten. */
.price-cards__details {
  margin-top: var(--space-6);
}

.price-cards__details > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: var(--text-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-main-text);
  cursor: pointer;
  list-style: none;
}

.price-cards__details > summary::-webkit-details-marker {
  display: none;
}

.price-cards__details > summary svg {
  transition: transform 0.2s ease;
}

.price-cards__details[open] > summary svg {
  transform: rotate(180deg);
}

.price-cards__details .home-matrix {
  margin-top: var(--space-4);
  overflow-x: auto;
}

@media (max-width: 1023px) {
  .price-cards,
  .price-cards--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .price-card + .price-card {
    border-left: 0;
  }

  .price-card:nth-child(even) {
    border-left: 1px solid var(--color-grey-2);
  }

  .price-card:nth-child(n + 3) {
    border-top: 1px solid var(--color-grey-2);
  }
}

@media (max-width: 599px) {
  .price-cards,
  .price-cards--3,
  .price-cards--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .price-card {
    padding: var(--space-6) var(--space-5);
  }

  .price-card:nth-child(even) {
    border-left: 0;
  }

  .price-card + .price-card {
    border-top: 1px solid var(--color-grey-2);
  }

  .price-card.is-primary {
    margin-top: 40px;
  }
}


/* ==========================================================================
   Bandverrijking 12-9-2026 (Botan: "mooie overgangen of blokken/secties met
   kleur, met figuren erin of doormidden een andere kleur, zoals de sites
   van Humbird; wel professioneel: less is more")
   --------------------------------------------------------------------------
   Vier trucs van zorgwijzer.nl, energievergelijk.nl en
   uitvaartverzekering.nl, elk één keer, alleen CSS plus één SVG
   (assets/img/band-label-shape.svg: drie labelbalken in één kleur, als
   mask gebruikt zodat kleur en dekking uit de CSS komen):
   1. #kosten: de band wisselt onder de tarievenkaarten van wit naar
      lichtgroen, in twee vlakke stappen; de kaarten liggen over de naad
      (uitvaartverzekering: wit prijspaneel in de sage-band; zorgwijzer:
      de reviewkaart over de fotorand).
   2. #diensten: de labelbalken als figuur rechtsboven in het
      keuzehulp-paneel, merkgroen op 7 procent, door de radius afgesneden
      (uitvaartverzekering: de boom in het donkere paneel). Onder 1024px
      weg, daar zit de tekst in de weg.
   3. #testimonials → #kennis: de tintband loopt in 40px schuin af in de
      witte band; de enige schuine naad op de pagina (energievergelijk:
      schuine vlakken tussen de banden).
   4. #tools → #vergelijk: de vier toolkaarten hangen 72px over de rand
      van de donkere slotband (zorgwijzer: kaart over twee vlakken), en de
      slotband krijgt linksonder dezelfde labelbalken als watermerk in wit
      op 6 procent (energievergelijk: grote vorm in de donkere band).
   Geen verloop, geen schaduw, geen extra kleur; de hero t/m "Waarom
   Energielabel24" blijft onaangeroerd.
   ========================================================================== */

/* --- 1. #kosten: tarievenkaarten over de naad wit → lichtgroen ----------- */

/* Het vlak is 100vw breed en hangt aan het paneel; de band knipt de
   overmaat weg zodat er nooit een horizontale scrollbalk ontstaat. */
.home-band--prices {
  overflow-x: clip;
}

/* De stack (.home-prices, overflow-x auto voor de oude tabel) en het paneel
   (idem voor de matrix) knipten het vlak af; met de kaarten erin scrolt de
   matrix al in zijn eigen uitklap, dus beide mogen open. isolation houdt de
   z-index -1 binnen het paneel. */
.home-band--prices .home-prices--stack:has(.price-cards) {
  overflow: visible;
}

.home-band--prices .home-prices--stack .home-prices__panel:has(.price-cards) {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

/* Vanaf 40% van het paneel (midden in de kaarten, ook als ze op een
   telefoon onder elkaar staan) tot de onderrand van de band. */
.home-band--prices .home-prices--stack .home-prices__panel:has(.price-cards)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 40%;
  bottom: calc(-1 * var(--section-y));
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-color: var(--color-light-green);
  pointer-events: none;
}

/* --- 2. #diensten: labelbalken in de hoek van de keuzehulp --------------- */

.home-band--docs .el24-helper {
  position: relative;
  overflow: hidden;
}

.home-band--docs .el24-helper > * {
  position: relative;
  z-index: 1;
}

.home-band--docs .el24-helper::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -36px;
  right: -44px;
  width: 300px;
  height: 280px;
  background-color: var(--color-main);
  opacity: 0.07;
  -webkit-mask: url("../img/band-label-shape.svg") no-repeat right top / contain;
  mask: url("../img/band-label-shape.svg") no-repeat right top / contain;
  pointer-events: none;
}

@media (max-width: 1023px) {
  .home-band--docs .el24-helper::after {
    display: none;
  }
}

/* --- 3. Schuine naad: klantervaringen (tint) → vragen en kennis (wit) ---- */

/* De onderrand van de tintband loopt van links 0 naar rechts 40px omhoog;
   de witte band eronder vult het driehoekje. De padding van 88px houdt de
   inhoud ruim boven de naad. */
.home-band--reviews {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
}

@media (max-width: 767px) {
  .home-band--reviews {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%);
  }
}

/* --- 4. Toolkaarten over de rand van de slotband, watermerk linksonder --- */

/* De overlap van de toolkaarten over de slotband is eruit (Botan,
   12-9-2026: "die tools zit er strak op, dat is niet de bedoeling"); de
   toolband houdt zijn gewone onderpadding. Alleen het watermerk blijft. */
.home-band--close {
  position: relative;
  overflow: clip;
}

.home-band--close > .home-band__inner {
  position: relative;
  z-index: 1;
}

.home-band--close::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -60px;
  bottom: -70px;
  width: 520px;
  height: 490px;
  background-color: var(--color-white);
  opacity: 0.06;
  -webkit-mask: url("../img/band-label-shape.svg") no-repeat left bottom / contain;
  mask: url("../img/band-label-shape.svg") no-repeat left bottom / contain;
  pointer-events: none;
}

@media (max-width: 767px) {
  .home-band--close::before {
    width: 320px;
    height: 300px;
    left: -50px;
    bottom: -50px;
  }
}

/* ==========================================================================
   Slotband v3 12-9-2026 (Botan, naar energievergelijk.nl: "die groene blok
   mooier, met zo'n vorm door de achtergrond, en niet zoveel velden, gewoon de
   3 velden die nodig zijn, die BAG hoeft er niet te staan").
   Tekst en het compacte formulier links (7), rechts een schuine lichtere
   baan met een ronde foto (5). Op telefoons blijft alleen de tekst met het
   formulier; de foto is decoratie.
   ========================================================================== */
.home-band--close .home-close {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-12);
}

.home-band--close::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 44%;
  background-color: rgba(255, 255, 255, 0.05);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.home-close__panel {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.home-close__photo {
  width: min(100%, 360px);
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Het compacte formulier op donkergroen: witte labels, witte velden. */
.home-close__form--compact {
  max-width: 640px;
  margin-top: var(--space-6);
}

.compact-search__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1.5fr);
  gap: var(--space-3);
}

.compact-search__group {
  min-width: 0;
}

.compact-search__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.compact-search__input {
  width: 100%;
  min-height: var(--field-height);
  padding: 14px 16px;
  font-family: inherit;
  font-size: var(--field-font);
  line-height: 1.5;
  color: var(--color-black);
  background-color: var(--color-white);
  border: 2px solid var(--color-white);
  border-radius: var(--radius-field);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.compact-search__input::placeholder {
  color: var(--color-dark-grey);
}

.compact-search__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23898C97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.compact-search__select.is-placeholder {
  color: var(--color-dark-grey);
}

.compact-search__input:focus {
  outline: none;
  border-color: var(--color-main);
  box-shadow: 0 0 0 3px rgba(6, 166, 81, 0.25);
}

.compact-search__input.has-error {
  border-color: var(--color-danger);
}

.compact-search__error {
  display: block;
  margin-top: var(--space-1);
  font-size: 13px;
  line-height: 1.4;
  color: #ffd7d2;
}

.compact-search__error[hidden] {
  display: none;
}

.compact-search__submit.btn {
  width: 100%;
  margin-top: var(--space-4);
  background-color: var(--color-main);
  border-color: var(--color-main);
}

.compact-search__submit.btn:hover,
.compact-search__submit.btn:focus {
  background-color: var(--color-main-dark);
  border-color: var(--color-main-dark);
}

@media (max-width: 1023px) {
  .home-band--close .home-close {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-band--close::after {
    display: none;
  }

  .home-close__panel {
    display: none;
  }
}

@media (max-width: 599px) {
  .compact-search__fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  }

  .compact-search__group--type {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Helpband 12-9-2026 ([el24_home_help], Botan: "doe dit zo ongeveer onderaan,
   in mijn eigen stijl"). Drie kolommen op wit: lijnicoon, kopje, één zin en
   een pijllink. Geen tegels, geen schaduw, de haarlijn erboven scheidt het
   van de slotband.
   ========================================================================== */
/* 21-9-2026: het blok staat onder de balk "Terug naar boven" en boven de
   footer, met aan beide kanten dezelfde haarlijn als de strook "Voor
   gecertificeerde EP-adviseurs". De lijn loopt mee met de contentkolom en
   niet van rand tot rand: hij hoort bij het blok, niet bij het scherm. */
.home-band--help .home-band__inner {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  border-top: 1px solid var(--color-grey-2);
  border-bottom: 1px solid var(--color-grey-2);
}

/* De sectie zelf heeft dan geen eigen ruimte meer nodig. */
.home-band--help {
  padding: 0;
}

.home-band--help .home-band__title {
  margin-bottom: var(--space-8);
}

/* 21-9-2026: het hulpblok is een strook van drie kolommen, gescheiden door
   verticale haarlijnen. Het icoon staat naast het kopje in plaats van als
   rondje erboven, de eerste kolom draagt het lime uit het logo, en de link
   onderaan lijnt over de drie kolommen uit. */
.home-help {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-help__item {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
}

/* De buitenranden blijven leeg, zodat de eerste kolom op dezelfde marge
   begint als de kop erboven en de strook precies zo breed is als de rest
   van de pagina. */
.home-help__item:first-child {
  padding-left: 0;
}

.home-help__item:last-child {
  padding-right: 0;
}

.home-help__item + .home-help__item {
  border-left: 1px solid var(--color-grey-2);
}

.home-help .home-help__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  font-size: var(--font-size-xs);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-main-text);
}

.home-help__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background-color: var(--color-light-green);
  color: var(--color-main-text);
}

.home-help .home-help__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-lg);
  line-height: 1.3;
  color: var(--color-text);
}

.home-help .home-help__text {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-strong);
}

.home-help__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  align-self: flex-start;
  min-height: 44px;
  font-size: var(--text-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-main-text);
  text-decoration: none;
  border-bottom: 2px solid var(--color-main);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.home-help__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.home-help__link:hover,
.home-help__link:focus-visible {
  color: var(--color-main-text-dark);
  border-bottom-color: var(--color-main-text-dark);
  text-decoration: none;
}

.home-help__link:hover .home-help__arrow,
.home-help__link:focus-visible .home-help__arrow {
  transform: translateX(3px);
}

@media (max-width: 1023px) {
  .home-help {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-help__item {
    padding: var(--space-6) 0;
  }

  .home-help__item + .home-help__item {
    border-left: 0;
    border-top: 1px solid var(--color-grey-2);
  }
}

/* ==========================================================================
   Footer: witte kolommen, gekleurde slotstrook (21-9-2026)

   De kolommen staan op wit. De onderste strook draagt het logo, de
   bedrijfsregel en het juridische menu, en is als enige gekleurd. De
   merkkolom met de omschrijving is vervallen; het logo staat nu onderin.
   ========================================================================== */

.site-footer {
  background-color: var(--color-white);
}

.back-to-top + .site-footer .footer-main {
  border-top: 1px solid var(--color-grey-2);
}

@media (min-width: 1024px) {
  .site-footer .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
  }
}

/* De slotstrook: lichtgroen, met het logo links van de bedrijfsregel. */
.footer-bottom {
  padding: var(--space-6) 0;
  border-top: 0;
  background-color: var(--color-light-green);
}

.footer-bottom .footer-bottom__inner {
  gap: var(--space-3) var(--space-6);
}

.footer-bottom__brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.footer-mark {
  display: inline-flex;
  align-items: center;
}

.footer-mark__img {
  display: block;
  width: auto;
  height: 22px;
}

.footer-bottom .footer-copyright p,
.footer-bottom .footer-legal a {
  color: var(--color-text);
}

.footer-bottom .footer-legal a:hover {
  color: var(--color-main-text);
}

/* --------------------------------------------------------------------------
   Het Kennis-paneel in de header (21-9-2026)

   Het uitklapmenu was een kaal lijstje van vier links. Nu is het een paneel
   van twee kolommen waarin elk item een regel uitleg draagt, zodat je van
   tevoren weet waar je terechtkomt. De uitleg komt uit het menu-item zelf.
   Geen transform in de positionering: de open- en sluitanimatie gebruikt
   translateY, en die twee zouden elkaar overschrijven.
   -------------------------------------------------------------------------- */

.nav-menu .sub-menu:has(.nav-dropdown__desc) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  left: 50%;
  margin-left: -260px;
  width: 520px;
  min-width: 0;
  max-width: calc(100vw - var(--space-8));
  padding: var(--space-3);
  border-radius: var(--radius-card);
}

/* min-width: 0 op beide: een rasteritem is standaard net zo breed als zijn
   langste woordgroep, en dan loopt de uitleg de buurkolom in. */
.nav-menu .sub-menu:has(.nav-dropdown__desc) > li {
  min-width: 0;
}

.nav-menu .sub-menu:has(.nav-dropdown__desc) a {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  line-height: 1.4;
  white-space: normal;
}

.nav-menu .sub-menu:has(.nav-dropdown__desc) a:hover,
.nav-menu .sub-menu:has(.nav-dropdown__desc) a:focus-visible {
  background-color: var(--color-light-green);
}

.nav-dropdown__title {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.nav-dropdown__desc {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--text-weight);
  line-height: 1.45;
  color: var(--color-text-strong);
}

/* De hulpregel onder de slotband: dezelfde maat als de notitieregel erboven,
   met de link in het licht van de band zelf. */
.home-close__help {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-white);
}

.home-close__help a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-close__help a:hover {
  text-decoration: none;
}

/* Het Google-merkje op een beoordelingskaart (21-9-2026): rechtsonder, op de
   regel met de naam en de datum, zodat de bron bij de beoordeling zelf staat. */
.home-review__source {
  display: block;
  margin-top: var(--space-3);
}

.home-review__source img {
  display: block;
  width: auto;
  height: 18px;
  margin-left: auto;
  opacity: 0.9;
}

/* De beoordelingskaart in de footer (21-9-2026): het cijfer dat op ons
   Google-profiel staat, met een link erheen. Alleen als er echte
   beoordelingen zijn; zonder rijen rendert het blok niet. */
.footer-rating {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--color-grey-2);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
  text-align: center;
}

.footer-rating__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}


.footer-rating__logo {
  display: block;
  width: auto;
  height: 16px;
}

.footer-rating__score {
  font-size: 30px;
  line-height: 1;
  font-weight: var(--heading-weight);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.footer-rating__stars {
  display: flex;
  gap: 2px;
  color: #fbbc04;
}

.footer-rating__count {
  font-size: var(--font-size-xs);
  color: var(--color-main-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.footer-rating__count:hover,
.footer-rating__count:focus-visible {
  color: var(--color-main-text-dark);
  text-decoration: underline;
}