@charset "UTF-8";
/* ═══════════════════════════════════════════════════════
   ENERGIEKE REGIO — DESIGN SYSTEM & STYLESHEET
   Brand: PT Sans, #97c01e green, #363835 dark, white
   ═══════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  --green: #97c01e;
  --green-dark: #7a9e18;
  --green-light: #edf3e7;
  --text: #363835;
  --text-muted: #5a5d58;
  --bg-light: #f8f8f8;
  --white: #ffffff;
  --navy: #1e3a5f;
  --border: #e2e8dc;

  --font-body: "PT Sans", sans-serif;
  --font-display: "PT Sans", Helvetica, Arial, Verdana, sans-serif;

  /* Design system (design-system.html) — canonical names.
     PT Sans is the site's actual font; Roboto is the interface chrome and
     Roboto Condensed is residual use, exactly as the design system itself
     labels them. There's no serif at all: that's why --font-display isn't PT Serif anymore. */
  --er-font-base: "PT Sans", Helvetica, Arial, Verdana, sans-serif;
  --er-font-ui: "Roboto", Helvetica, Arial, Verdana, sans-serif;
  --er-font-cond: "Roboto Condensed", Helvetica, Arial, sans-serif;
  --er-font-logo: Arial, Helvetica, Verdana, sans-serif;

  --radius: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.14);

  --container: 1160px;
  --nav-h: 72px;
  --transition: 0.22s ease;

  /* Accessible companions to --green, added 2026-08-28.
     --green is a BRIGHT yellow-green, so it is a light colour: white on it is
     2.13:1 against WCAG 2.2 SC 1.4.3's 4.5:1, and it is 2.13:1 as text on white
     too. The brand colour is not changed; these carry the jobs it cannot.
     --green-link: green text on a light background. 5.38:1 on white.
     --green-hover: a LIGHTER green, because the button now carries dark text —
     darkening the background would reduce contrast, not improve it. 6.00:1. */
  --green-link: #5b7312;
  --green-link-hover: #4c600f;
  --green-hover: #a1c635;

  /* ── Spacing scale ──────────────────────────────────────────────────────
     A 4px grid. Not chosen from taste: it was measured. Across css/ and
     src/pages/ the dominant spacing values were already 16, 24, 12, 20, 28, 8
     and 32 — every one a multiple of 4. This names what the project was
     mostly doing anyway, so the odd 18px/10px/22px/26px stop being invisible.
     Use these instead of writing a pixel value. */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;

  /* ── Type scale ─────────────────────────────────────────────────────────
     Body sizes in rem so they respond to the reader's browser setting;
     headings keep the fluid clamps the stylesheet already uses. Today the CSS
     mixes 11, 12, 12.5, 13, 13.5, 14, 14.5, 15 and 16px — nine sizes inside a
     5px range is drift, not hierarchy. These are the steps to collapse it
     onto. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  /* Heading scale — from "Pagina Energieke Regio CSS.docx", the brand
     specification: PT Sans 700 at 65 / 44 / 30 / 19px with a line-height per
     level. Those are DESKTOP values: 65px on a 375px screen is five characters
     to a line, so each one is a clamp whose maximum is the brand number and
     whose minimum is what this site already showed on a phone. The maximum is
     reached at 1160px, the container width. Written in rem (65px = 4.0625rem)
     so the reader's own font-size setting still applies — WCAG 2.2 SC 1.4.4. */
  --text-h4: 1.1875rem; /* 19px */
  --text-h3: clamp(1.3rem, 2.6vw, 1.875rem); /* -> 30px */
  --text-h2: clamp(1.6rem, 3.8vw, 2.75rem); /* -> 44px */
  --text-h1: clamp(2rem, 5.6vw, 4.0625rem); /* -> 65px */

  /* The docx gives a line-height per heading level, not one for all four. */
  --lh-base: 1.8; /* 27px on 15px */
  --lh-h4: 1.26; /* 24px on 19px */
  --lh-h3: 1.3; /* 39px on 30px */
  --lh-h2: 1.25; /* 55px on 44px */
  --lh-h1: 1.14; /* 74px on 65px */
  --lh-tight: 1.6; /* copy inside cards and panels */

  /* Paragraph rhythm, set once further down in this file: p has
     margin-bottom 1rem and p:last-child has margin-bottom 0. Never restate
     either as an inline style — inline wins over the stylesheet, which is how
     two sections built to the same pattern ended up closing differently.
     (No braces in this comment on purpose: the :root block is parsed by
     tests/unit/design-tokens.test.mjs with a non-greedy match, so a stray
     closing brace here silently truncates every token below it.) */
  --paragraph-gap: 1rem;
}

/* ── RESET & BASE ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

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

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  font-size: 15px;
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

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

/* ── TYPOGRAPHY ── */
h1,
h2,
h3,
h4 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text);
}

h1 {
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
}
h2 {
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
}
h3 {
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
}
h4 {
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
}

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

.text-green {
  color: var(--green-link);
}
.text-link {
  color: var(--green-link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-link:hover {
  color: var(--green-link-hover);
}

/* ── LAYOUT ── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 80px 0;
}
/* A short section — a welcome of two lines — does not need the full 80px above
   and below; two white sections in a row put 160px between the last line and
   the next heading (measured on the project pages, 2026-09-04). */
.section--compact {
  padding: var(--space-56) 0;
}
.bg-light-green {
  background: var(--green-light);
}
.bg-light-grey {
  background: var(--bg-light);
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 40px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
  text-decoration: none;
}

.btn-primary {
  background: var(--green);
  /* Dark text, not white: white on --green is 2.13:1 (P8-6). This keeps the
     brand green exactly as it is and reaches 5.57:1. */
  color: var(--text);
  border-color: var(--green);
}
.btn-primary:hover {
  /* Lighter on hover, not darker. With dark text a darker background lowers
     contrast: --text on --green-dark is only 3.79:1. This is 6.00:1. */
  background: var(--green-hover);
  border-color: var(--green-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(151, 192, 30, 0.4);
}

.btn-secondary {
  background: transparent;
  color: var(--green-link);
  border-color: var(--green);
}
.btn-secondary:hover {
  background: var(--green);
  color: var(--white);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.7);
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--white);
}

.btn-lg {
  padding: 15px 36px;
  font-size: 16px;
}

/* ── HEADER / NAV ── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--white);
  box-shadow: 0 1px 0 var(--border);
  transition: box-shadow var(--transition);
}

.site-header.scrolled {
  box-shadow: var(--shadow-md);
}

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo {
  flex-shrink: 0;
}
.logo-img {
  height: 44px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.nav-link {
  padding: 6px 14px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text);
  border-radius: 4px;
  transition:
    color var(--transition),
    background var(--transition);
  white-space: nowrap;
}
.nav-link:hover,
.nav-link.active {
  color: var(--green-link);
}
.nav-link.active {
  background: var(--green-light);
}

.nav-cta {
  margin-left: auto;
  white-space: nowrap;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all var(--transition);
}

/* ── SECTION LABELS ── */
.section-label-tag {
  display: inline-block;
  background: var(--green-light);
  color: var(--green-dark);
  border: 1px solid rgba(151, 192, 30, 0.3);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.section-label-tag.light {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Section headers sit on the page's LEFT edge — the same edge as the hero
   title, the intro column, the form labels and the cards below them.

   They were centred until 2026-09-03. 148 of the site's 384 sections opened
   with the centred stack (tag, h2, intro, all on the centre line, 680px wide),
   and on a text-heavy page that is six centred blocks in a row with no left
   edge for the eye to return to; in 60 sections the centred heading then sat
   over left-aligned full-width paragraphs — two axes in one block. Tried on
   /diensten/flexscan/ first, approved, then made the default here rather than
   edited into 148 places. Nothing that should stay centred uses this class:
   the calls to action centre themselves on the <section>. */
/* One reading measure, 720px, for the header, its intro and the prose under it —
   the intro was 680 and the paragraphs 720, so their right edges never met. */
.section-header {
  text-align: left;
  max-width: 720px;
  margin: 0 0 56px;
}

/* The 56px under a header is for a card grid below it. Above running text it is
   a hole: measured 2026-09-04 on /smart-energy-hub/ — heading→intro 16px,
   intro→list 56px, list items 0px apart, list→paragraph 16px. Tight, tight,
   hole, dense. Prose after a header gets the paragraph rhythm instead. */
.section-header:has(+ p),
.section-header:has(+ ul),
.section-header:has(+ ol),
.section-header:has(+ h3) {
  margin-bottom: var(--space-24);
}

/* A subheading inside prose: room above it to close the previous block,
   a small step below it to open its own. Without this an h3 sat 0px from the
   list it introduced (measured on /smart-energy-hub/, 2026-09-04). */
.section > .container > h3,
.delft-narrow > h3 {
  margin: var(--space-32) 0 var(--space-12);
}
.section > .container > .section-header + h3,
.delft-narrow > .section-header + h3 {
  margin-top: 0;
}

/* Items of a prose list are sentences, not menu entries: give them air. */
.section > .container > ul:not([class]) > li + li,
.section > .container > ol:not([class]) > li + li,
.delft-narrow > ul:not([class]) > li + li {
  margin-top: var(--space-8);
}
.section-header h2 {
  margin-bottom: 16px;
}
.section-intro {
  color: var(--text-muted);
  font-size: 16px;
}

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  margin-top: var(--nav-h);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(20, 28, 20, 0.82) 0%,
    rgba(20, 28, 20, 0.55) 55%,
    rgba(20, 28, 20, 0.2) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 40px 24px;
  max-width: 660px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(151, 192, 30, 0.2);
  border: 1px solid rgba(151, 192, 30, 0.5);
  color: #c8e05a;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}

.hero-title {
  font-size: var(--text-h1);
  color: var(--white);
  line-height: var(--lh-h1);
  margin-bottom: 14px;
  font-weight: 700;
}

.hero-subtitle {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.55;
  margin-bottom: 22px;
  max-width: 520px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 20px 28px;
  width: fit-content;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
}

.stat-number {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--green-link);
  line-height: 1;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
  text-align: center;
}

.stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.2);
}

/* ── TRUST BAR ── */
.trust-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
  background: var(--white);
}

.trust-bar .container {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.trust-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
  margin: 0;
}

.logo-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  flex: 1;
}

.partner-logo-placeholder {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  /* PLACEHOLDER: Replace with actual partner logo images. Recommended height: 32px, grayscale filter applied */
}

/* ── INTRO SECTION ── */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.intro-text h2 {
  margin-bottom: 20px;
}
.intro-text p {
  color: var(--text-muted);
  margin-bottom: 20px;
}

.usp-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 28px 0 32px;
}

.usp-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.usp-icon {
  width: 24px;
  height: 24px;
  background: var(--green);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.usp-item strong {
  display: block;
  margin-bottom: 4px;
}
.usp-item p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: var(--lh-tight);
}

.intro-visual {
  position: relative;
}

.visual-placeholder {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  height: 420px;
  background: var(--bg-light);
}

.intro-img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  padding: 6px 10px;
  font-style: italic;
}
.placeholder-label .ico,
.placeholder-block .ico {
  font-size: 1rem;
  margin-right: 6px;
}

.intro-callout {
  position: absolute;
  bottom: -24px;
  right: -24px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px 24px;
  max-width: 300px;
  box-shadow: var(--shadow-lg);
  border-left: 3px solid var(--green);
}

.mini-quote {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
  font-style: italic;
  margin-bottom: 8px;
}
.mini-quote cite {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--green-dark);
  font-style: normal;
  margin-top: 8px;
}

/* ── SERVICES ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}

.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1.5px solid var(--border);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}

a.service-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.service-card.featured {
  border-color: var(--green);
  background: linear-gradient(135deg, rgba(151, 192, 30, 0.05), var(--white));
}

.service-icon {
  font-size: 2rem;
  margin-bottom: 16px;
}

.service-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 16px;
  display: block;
}

.service-logo--home-product {
  width: 116px;
  height: 116px;
  margin-bottom: 20px;
  transform-origin: center left;
}

.service-logo--home-flexscan {
  transform: scale(1.26);
}

.service-logo--home-qem {
  transform: scale(1.14);
}

.service-logo--home-energy {
  transform: scale(1.18);
}

.service-logo--home-hub {
  transform: scale(1.2);
}

.service-card h3 {
  font-size: var(--text-h4);
  color: var(--text);
  margin-bottom: 10px;
}

.service-card p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: 20px;
  flex: 1;
  line-height: var(--lh-tight);
}

.card-link {
  font-weight: 700;
  color: var(--green-link);
  font-size: 14px;
  margin-top: auto;
  transition: gap var(--transition);
}

a.service-card:hover .card-link {
  letter-spacing: 0.02em;
}

.pain-home-hero {
  margin-top: var(--nav-h);
  padding: 84px 0 72px;
  background:
    linear-gradient(
      120deg,
      rgba(20, 35, 20, 0.96) 0%,
      rgba(20, 35, 20, 0.78) 52%,
      rgba(151, 192, 30, 0.24) 100%
    ),
    url("https://energiekeregio.nl/wp-content/uploads/2023/07/kantoorgebouw_met_zon.jpeg")
      center/cover no-repeat;
}

.pain-home-hero__grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 40px;
  align-items: stretch;
}

.pain-home-hero__content {
  color: var(--white);
}

.pain-home-hero__title {
  color: var(--white);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  margin-bottom: 18px;
}

.pain-home-hero__subtitle {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-md);
  max-width: 700px;
  margin-bottom: 24px;
}

.pain-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}

.pain-home-hero__bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: rgba(255, 255, 255, 0.84);
}

.pain-home-hero__bullets li {
  position: relative;
  padding-left: 18px;
}

.pain-home-hero__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.pain-home-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pain-home-stat-card,
.pain-home-cta-card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--radius-xl);
  padding: 30px;
  box-shadow: var(--shadow-md);
}

.pain-home-stat-card__eyebrow {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-dark);
  font-weight: 700;
  margin-bottom: 10px;
}

.pain-home-stat-card h2 {
  font-size: var(--text-h3);
  margin-bottom: 12px;
  color: var(--green-dark);
}

.pain-home-stat-card p {
  color: var(--text-muted);
  margin: 0;
}

.pain-home-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.pain-home-stat-strip div {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  text-align: center;
  color: var(--white);
}

.pain-home-stat-strip strong {
  display: block;
  font-size: var(--text-h3);
}

.pain-home-stat-strip span {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.74);
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.pain-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.pain-card__label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(151, 192, 30, 0.15);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 700;
}

.pain-card h3 {
  margin-bottom: 12px;
  color: var(--green-dark);
}

.pain-card p {
  color: var(--text-muted);
  margin: 0;
}

.pain-outcome__grid,
.pain-relief__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 36px;
  align-items: start;
}

.pain-outcome__list {
  display: grid;
  gap: 18px;
}

.pain-outcome__item {
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: var(--green-light);
  border: 1px solid rgba(151, 192, 30, 0.32);
}

.pain-outcome__item strong {
  display: block;
  margin-bottom: 8px;
  color: var(--green-dark);
}

.pain-outcome__item p,
.pain-relief__content p {
  color: var(--text-muted);
  margin: 0;
}

.pain-solution-grid {
  display: grid;
  gap: 24px;
}

.pain-solution-card {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 30px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 30px 34px;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.pain-solution-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(151, 192, 30, 0.45);
}

.pain-solution-card__tag {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--green-dark);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.pain-solution-card__text h3 {
  margin-bottom: 10px;
  color: var(--green-dark);
}

.pain-solution-card__text p {
  color: var(--text-muted);
  margin-bottom: 14px;
}

.pain-solution-card__text ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.pain-solution-card__text li {
  position: relative;
  padding-left: 18px;
}

.pain-solution-card__text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.pain-solution-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(151, 192, 30, 0.08), rgba(151, 192, 30, 0.18));
  padding: 8px;
  overflow: hidden;
  position: relative;
}

.pain-solution-card__logo {
  width: min(280px, 96%);
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
  transform-origin: center center;
}

.pain-solution-card__logo--closeup {
  width: min(340px, 122%);
}

.pain-solution-card__logo--energy {
  transform: scale(1.34);
}

.pain-solution-card__logo--qem {
  transform: scale(1.3);
}

.pain-solution-card__logo--flexscan {
  transform: scale(1.4);
}

.pain-solution-card__logo--hub {
  transform: scale(1.38);
}

.pain-relief {
  background: linear-gradient(180deg, var(--white) 0%, rgba(151, 192, 30, 0.08) 100%);
}

.pain-home-cta-card h3 {
  color: var(--green-dark);
  margin-bottom: 12px;
}

.pain-home-cta-card p {
  color: var(--text-muted);
  margin-bottom: 20px;
}

.pain-home-cta-card__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.services-footer {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.services-footer p {
  color: var(--text-muted);
  margin: 0;
}

/* ── PROCESS ── */
.process-steps {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.process-step {
  flex: 1;
  min-width: 180px;
  background: var(--bg-light);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  border: 1.5px solid var(--border);
}

.step-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--green);
  font-family: var(--font-display);
  margin-bottom: 12px;
  line-height: 1;
}

.process-step h3 {
  font-size: var(--text-h4);
  margin-bottom: 8px;
}
.process-step p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.process-arrow {
  font-size: 1.5rem;
  color: var(--green);
  font-weight: 700;
  margin-top: 44px;
  flex-shrink: 0;
}

.process-cta {
  text-align: center;
}

/* ── CASES ── */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.case-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

a.case-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.case-img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--bg-light);
}

.case-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

a.case-card:hover .case-img {
  transform: scale(1.04);
}

/* Variante "Meer bewijs": kaart die doorlinkt naar alle opdrachtgevers */
.case-card--all {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 220px;
  background: var(--bg-light);
  border: 1.5px dashed #cdd8c0;
  box-shadow: none;
}

.case-content {
  padding: 24px;
}

.case-tag {
  display: inline-block;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.case-content h3 {
  font-size: var(--text-h4);
  margin-bottom: 10px;
  color: var(--green-dark);
}
.case-content p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: var(--lh-tight);
}

.cases-footer {
  text-align: center;
}

/* ── TESTIMONIALS ── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}

.testimonial-card {
  background: var(--bg-light);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  border: 1px solid var(--border);
  position: relative;
}

.quote-mark {
  font-size: 4rem;
  color: var(--green);
  opacity: 0.3;
  font-family: var(--font-display);
  line-height: 1;
  margin-bottom: -12px;
}

.testimonial-card p {
  font-size: var(--text-sm);
  color: var(--text);
  line-height: var(--lh-tight);
  font-style: italic;
  margin-bottom: 24px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.placeholder-avatar {
  background: var(--green-light);
  border: 2px solid var(--green);
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-author strong {
  display: block;
  font-size: 14px;
}
.testimonial-author span {
  font-size: 12px;
  color: var(--text-muted);
}

.video-testimonials-placeholder {
  margin-top: 16px;
}

.placeholder-block {
  background: repeating-linear-gradient(
    45deg,
    var(--bg-light),
    var(--bg-light) 10px,
    rgba(151, 192, 30, 0.08) 10px,
    rgba(151, 192, 30, 0.08) 20px
  );
  border: 2px dashed rgba(151, 192, 30, 0.4);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ── BEDRIJVENTERREINEN TEASER ── */
/* Sections that contain a .dark-overlay MUST establish a positioning context,
   otherwise the absolutely-positioned overlay escapes and covers the whole page. */
.bedrijventerreinen-teaser,
.challenge-cta {
  position: relative;
  overflow: hidden;
}

/* The shared "Daag ons uit" block used to carry four inline styles, on every
   one of the eight pages that include it — 32 values the design guard could
   not see, one of them a 2.5rem heading that is on no scale. The heading now
   takes the brand h2 size like every other h2. */
.dark-overlay--cta {
  background: rgba(30, 40, 30, 0.72);
}
.challenge-cta__inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
.challenge-cta__title {
  margin-bottom: var(--space-16);
}
.challenge-cta__lead {
  max-width: 580px;
  margin: 0 auto var(--space-32);
}

.dark-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 20, 0.72);
}

/* The four values the Smart Energy Hub project template used to write inline.
   Written inline they were multiplied by every project page — forty of them,
   160 of the inline-style count the audit tracks — and none of them could
   follow a token. Named once here instead. */
.dark-overlay--gradient {
  background: linear-gradient(105deg, rgba(20, 35, 20, 0.84) 0%, rgba(20, 35, 20, 0.55) 100%);
}

.eh-hero-note {
  margin-top: var(--space-24);
}

.eh-help {
  text-align: left;
}

.eh-help p {
  color: var(--text-muted);
}

.bedrijventerreinen-content {
  max-width: 680px;
  padding: 80px 0;
}

.bedrijventerreinen-content h2 {
  margin: 12px 0 20px;
}

.bedrijventerreinen-services {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.bedrijventerreinen-service-pill {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}

/* ── ENERGIELOKET TEASER ── */
.energieloket-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.energieloket-text h2 {
  margin-bottom: 16px;
}
.energieloket-text p {
  color: var(--text-muted);
  margin-bottom: 28px;
}

.loket-placeholder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.loket-pill {
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.loket-pill.navy {
  background: var(--navy);
  color: white;
}
.loket-pill.green {
  background: var(--green);
  color: white;
}
.loket-pill span {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.8;
}

a.loket-pill.is-link {
  text-decoration: none;
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}
a.loket-pill.is-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
a.loket-pill.is-link:hover span {
  opacity: 1;
}

.loket-note {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── FOOTER ── */
.site-footer {
  background: #2a2e29;
  color: rgba(255, 255, 255, 0.8);
  padding: 64px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer-logo {
  height: 40px;
  width: auto;
  margin-bottom: 16px;
}

.footer-tagline {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 20px;
  line-height: 1.6;
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  transition: background var(--transition);
}
.social-link:hover {
  background: var(--green);
  color: white;
}

/* h2, not h4: these are the footer's own section headings. As h4 they
   skipped a level after every page h1/h2/h3 and produced a heading-order
   jump on all 52 pages at once — the same defect 52 times, from one file. */
/* These were <h4> until 26-08-2026 and are now <h2>. Keep BOTH selectors:
   the two files are uploaded separately, and new markup arriving before this
   stylesheet leaves the headings falling back to the base h2 rule — 38px of
   dark grey on a dark footer, which reads as "the titles disappeared". */
.footer-col h2,
.footer-col h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.footer-col p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 8px;
}
.footer-col p a {
  color: rgba(255, 255, 255, 0.65);
}
.footer-col p a:hover {
  color: var(--green);
}

.footer-links li {
  margin-bottom: 8px;
}
.footer-links a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--transition);
}
.footer-links a:hover {
  color: var(--green);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
}

.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-bottom span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}
.footer-bottom a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}
.footer-bottom a:hover {
  color: var(--green);
}

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  background: linear-gradient(105deg, #1e2b1e 0%, #2a3d2a 100%);
  padding: 80px 0;
  margin-top: var(--nav-h);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.25;
}

.page-hero-content {
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  color: var(--white);
  margin-bottom: 16px;
}
.page-hero p {
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  font-size: var(--text-md);
}

/* Hero-achtergrond als echte <img> (beter voor afbeeldings-SEO dan inline background-image) */
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.hero-bg .hero-img {
  z-index: 0;
}
.hero-bg .hero-overlay {
  z-index: 1;
}

.legal-content {
  max-width: 860px;
}

.legal-content h2 {
  margin: 36px 0 14px;
  font-size: var(--text-h2);
}

.legal-content p,
.legal-content li {
  color: var(--text);
  line-height: 1.85;
}

.legal-content ul {
  margin: 16px 0 16px 22px;
}

.legal-content .legal-lead {
  font-size: var(--text-md);
}

.legal-content .legal-contact {
  margin-top: 32px;
  padding: 24px 28px;
  background: var(--green-light);
  border: 1px solid rgba(151, 192, 30, 0.35);
  border-radius: var(--radius-lg);
}

/* ── CONTACT FORM ── */
.contact-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 64px;
  align-items: start;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--text);
}

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

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  background: var(--white);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(151, 192, 30, 0.15);
}

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

.contact-info-box {
  background: var(--bg-light);
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--border);
}

.contact-info-box h3 {
  margin-bottom: 20px;
}

.contact-detail {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.contact-detail-icon {
  width: 36px;
  height: 36px;
  background: var(--green-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.contact-detail p {
  margin: 0;
  font-size: 14px;
}
.contact-detail a {
  color: var(--green-link);
  font-weight: 700;
}

/* ── SERVICES (energieadvies page) ── */
.service-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 56px;
}

.service-detail-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border);
  padding: 36px;
  transition: all var(--transition);
}

/* No :hover here on purpose. .service-detail-card is always a plain article, never a link or a
   button, and a card that lifts and glows says "click me". See UX-1 in
   docs/reference/FRONTEND-CRITERIA.md. */

.service-detail-card h3 {
  color: var(--green-dark);
  margin-bottom: 12px;
}
.service-detail-card p {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: 20px;
  line-height: var(--lh-tight);
}

.service-detail-includes {
  list-style: none;
  margin-bottom: 24px;
}

.service-detail-includes li {
  padding: 6px 0;
  padding-left: 20px;
  position: relative;
  font-size: 14px;
  color: var(--text);
}

.service-detail-includes li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--green);
  font-weight: 700;
}

.qem-overview,
.product-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 48px;
  align-items: start;
}

.qem-overview__content h2,
.product-overview__content h2 {
  margin: 16px 0 18px;
  max-width: 700px;
}

.qem-overview__content p,
.product-overview__content p {
  color: var(--text-muted);
  margin-bottom: 18px;
}

.qem-summary-card,
.product-summary-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}

.qem-summary-card h3,
.product-summary-card h3 {
  color: var(--green-dark);
  margin-bottom: 20px;
}

.qem-summary-list,
.product-summary-list {
  margin-bottom: 28px;
}

.qem-price,
.product-price {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--green-dark);
}

.product-notice-bar {
  background: var(--green);
  color: var(--white);
}

.product-notice-bar__inner {
  padding: 16px 0;
  text-align: center;
  font-weight: 700;
}

.service-detail-includes li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

/* ── BEDRIJVENTERREINEN CARDS ── */
.aanpak-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}

.sector-grid-3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .sector-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .sector-grid-3 {
    grid-template-columns: 1fr;
  }
}

.aanpak-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: 32px;
  color: var(--white);
}

.aanpak-card h3 {
  color: var(--white);
  font-size: var(--text-h4);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.aanpak-card p {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-sm);
  line-height: var(--lh-tight);
  margin: 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .services-grid {
    grid-template-columns: 1fr 1fr;
  }
  .process-steps {
    gap: 8px;
  }
  .service-logo--home-product {
    width: 104px;
    height: 104px;
  }
  .service-logo--home-flexscan {
    transform: scale(1.18);
  }
  .service-logo--home-qem {
    transform: scale(1.1);
  }
  .service-logo--home-energy {
    transform: scale(1.12);
  }
  .service-logo--home-hub {
    transform: scale(1.14);
  }
  .pain-home-hero__grid,
  .pain-outcome__grid,
  .pain-relief__grid,
  .pain-solution-card {
    grid-template-columns: 1fr;
  }
  .pain-grid {
    grid-template-columns: 1fr;
  }
  .pain-solution-card__visual {
    min-height: 250px;
    padding: 10px;
  }
  .pain-solution-card__logo--energy {
    transform: scale(1.24);
  }
  .pain-solution-card__logo--qem {
    transform: scale(1.18);
  }
  .pain-solution-card__logo--flexscan {
    transform: scale(1.28);
  }
  .pain-solution-card__logo--hub {
    transform: scale(1.26);
  }
}

@media (max-width: 768px) {
  :root {
    --nav-h: 64px;
  }
  .section {
    padding: 56px 0;
  }

  .main-nav {
    display: none;
  }
  .nav-cta {
    display: none;
  }
  .hamburger {
    display: flex;
    margin-left: auto;
  }

  .main-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--white);
    padding: 16px 24px 24px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    z-index: 99;
  }
  .main-nav.is-open .nav-link {
    padding: 12px 8px;
    font-size: 16px;
  }

  .hero {
    min-height: 100svh;
  }
  .hero-content {
    padding: 48px 24px;
  }
  .pain-home-hero {
    padding: 64px 0 56px;
  }
  .pain-home-hero__actions,
  .pain-home-cta-card__actions {
    flex-direction: column;
  }
  .pain-home-stat-strip {
    grid-template-columns: 1fr;
  }
  .pain-solution-card {
    padding: 24px;
  }
  .pain-solution-card__visual {
    min-height: 210px;
    padding: 8px;
  }
  .pain-solution-card__logo {
    width: min(240px, 92%);
  }
  .pain-solution-card__logo--energy {
    transform: scale(1.16);
  }
  .pain-solution-card__logo--qem {
    transform: scale(1.12);
  }
  .pain-solution-card__logo--flexscan {
    transform: scale(1.2);
  }
  .pain-solution-card__logo--hub {
    transform: scale(1.18);
  }
  .hero-stats {
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    width: 100%;
  }
  .stat-divider {
    width: 80%;
    height: 1px;
  }

  .intro-grid,
  .energieloket-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .intro-callout {
    position: static;
    max-width: 100%;
    margin-top: 20px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }
  .service-logo--home-product {
    width: 96px;
    height: 96px;
    margin-bottom: 16px;
  }
  .service-logo--home-flexscan {
    transform: scale(1.12);
  }
  .service-logo--home-qem {
    transform: scale(1.05);
  }
  .service-logo--home-energy {
    transform: scale(1.08);
  }
  .service-logo--home-hub {
    transform: scale(1.1);
  }
  .cases-grid {
    grid-template-columns: 1fr;
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .service-detail-grid {
    grid-template-columns: 1fr;
  }
  .aanpak-grid {
    grid-template-columns: 1fr;
  }
  .loket-placeholder-grid {
    grid-template-columns: 1fr;
  }

  .process-steps {
    flex-direction: column;
  }
  .process-arrow {
    transform: rotate(90deg);
    margin: -8px auto;
  }

  .footer-grid {
    gap: 32px;
  }
}

@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .services-footer {
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════════════
   HOMEPAGE 2.0 — added components (tokens only)
   ═══════════════════════════════════════════════════════ */

/* ── Accessibility: skip link & focus ── */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 200;
  background: var(--green);
  color: var(--white);
  padding: 10px 18px;
  border-radius: var(--radius);
  font-weight: 700;
  transition: top var(--transition);
}
.skip-link:focus {
  top: 8px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid var(--green-dark);
  outline-offset: 2px;
}

/* ── Hero overline + shorter hero ── */
.hero--short {
  min-height: clamp(360px, 50vh, 500px);
}

.hero-overline {
  display: inline-block;
  color: #c8e05a;
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(151, 192, 30, 0.5);
}

/* ── Partner marquee ── */
.logo-marquee {
  flex: 1;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}

.logo-marquee__group {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 8px;
  margin: 0;
  list-style: none;
}

.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.partner-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  height: 56px;
  min-width: 0;
}

.partner-logo__img {
  display: block;
  height: 42px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track {
    animation: none;
  }
  .logo-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ── Onze aanpak (ordered list reset + 5 steps) ── */
ol.process-steps {
  list-style: none;
  padding: 0;
}
.process-steps--five .process-step {
  min-width: 150px;
}

/* ── Blok 4 — Voor wie ── */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Three-up variant (/acties/). This lives here rather than in a style=""
   attribute because an inline grid-template-columns outranks every media
   query below, so the grid kept three tracks at 375px and pushed the body
   175px wide. Declared before the responsive blocks so they still win. */
.audience-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.audience-card {
  background: #fff;
  border: 1px solid #e7ecdb;
  border-radius: 18px;
  padding: 30px 26px;
  text-align: left;
  box-shadow: 0 6px 18px rgba(54, 66, 31, 0.05);
  transition:
    border-color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}
/* No :hover here on purpose. .audience-card is always a plain div, never a link or a
   button, and a card that lifts and glows says "click me". See UX-1 in
   docs/reference/FRONTEND-CRITERIA.md. */
.audience-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  background: #f1f6e6;
  margin-bottom: 18px;
}
.audience-card h3 {
  font-size: var(--text-h4);
  margin-bottom: 8px;
  color: #26331a;
}
.audience-card p {
  font-size: var(--text-sm);
  color: #5e6b4a;
  margin: 0;
  line-height: var(--lh-tight);
}

/* ── Helpers ── */
.text-white {
  color: var(--white) !important;
}
.text-white-80 {
  color: rgba(255, 255, 255, 0.85) !important;
}
.bt-container {
  position: relative;
  z-index: 2;
}

/* ═══════════════════════════════════════════
   BLOK 6 — ROUTEKAART
════════════════════════════════════════════ */
.routekaart {
  background: var(--white);
}

.routekaart-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.route-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  background: #fff;
  border: 1.5px solid #e2e8d2;
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  font-family: var(--font-body);
  box-shadow: 0 2px 6px rgba(54, 66, 31, 0.04);
  transition: all var(--transition);
}
.route-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(90, 125, 18, 0.12);
}
.route-card.is-active {
  border-color: #97c01e;
  background: #f1f6e6;
  box-shadow: 0 10px 24px rgba(90, 125, 18, 0.12);
}
/* The icon tile: one drawing language for every icon on the site. Born on the
   home page's route cards; shared since 2026-09-04 with the Smart Energy Hub and
   Flexscan cards rather than restated for each. */
.route-card__icon,
.icon-tile {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #f4f7ee;
}
.route-card.is-active .route-card__icon {
  background: #fff;
  box-shadow: 0 3px 8px rgba(54, 66, 31, 0.08);
}
.route-card__title {
  font-family: "PT Sans", Helvetica, Arial, Verdana, sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: #26331a;
  line-height: 1.25;
}
.route-card__sub {
  font-size: var(--text-sm);
  color: #7c8a64;
  line-height: var(--lh-tight);
}

.route-panel {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 36px;
  box-shadow: var(--shadow-sm);
  animation: panel-fade var(--transition);
}
.route-panel[hidden] {
  display: none;
}

@keyframes panel-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .route-panel {
    animation: none;
  }
}

.route-panel__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
}
.route-panel__main h3 {
  color: var(--green-dark);
  margin-bottom: 14px;
  font-size: var(--text-h4);
}
.route-panel__herkenning {
  color: var(--text-muted);
  margin-bottom: 22px;
}
.route-panel__main h4,
.route-panel__faq h4 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text);
  margin-bottom: 14px;
}

.route-panel__solutions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.route-panel__solutions li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.route-panel__solutions li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: -1px;
  width: 20px;
  height: 20px;
  background: var(--green);
  color: var(--white);
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.route-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.route-panel__faq {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.route-panel__faq details {
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}
.route-panel__faq details:last-of-type {
  border-bottom: none;
}
.route-panel__faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text);
  list-style: none;
  position: relative;
  padding-right: 24px;
}
.route-panel__faq summary::-webkit-details-marker {
  display: none;
}
.route-panel__faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  color: var(--green);
  font-size: 1.2rem;
  line-height: 1;
}
.route-panel__faq details[open] summary::after {
  content: "\2013";
}
.route-panel__faq details p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 10px 0 4px;
}

/* ═══════════════════════════════════════════
   BLOK 7 — GESPREK FORM
════════════════════════════════════════════ */
.gesprek {
  background: var(--green-light);
}

.gesprek-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.gesprek-intro h2 {
  margin-bottom: 16px;
}
.gesprek-intro > p {
  color: var(--text-muted);
  margin-bottom: 24px;
}

.gesprek-usps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.gesprek-usps li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.gesprek-usps li span {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: var(--green);
  color: var(--white);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.gesprek-contact p {
  font-size: 15px;
}
.gesprek-contact a {
  color: var(--green-dark);
  font-weight: 700;
}

.gesprek-form-wrap {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  padding: 36px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-group--full {
  grid-column: 1 / -1;
}
.form-group--full + .form-group--full {
  margin-top: 0;
}

/* Honeypot hidden from users but present for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400 !important;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
}
.checkbox-label input {
  width: auto;
  margin-top: 3px;
  flex-shrink: 0;
}
.checkbox-label a {
  color: var(--green-dark);
  font-weight: 700;
  text-decoration: underline;
}
.checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 20px;
}

/* The dienst chooser was a bare grid of loose checkboxes with nothing marking
   where one choice ended and the next began — reported as "het aanvinkblok ziet
   er wat raar uit". Each option is now a target you can click anywhere on, with
   a visible hover, focus and chosen state. */
.checkbox-group .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.checkbox-group .checkbox-label:hover {
  border-color: var(--green-dark, #6d8f00);
  background: var(--green-light, #f1f5e6);
}
.checkbox-group .checkbox-label:has(input:checked) {
  border-color: var(--green-dark, #6d8f00);
  background: var(--green-light, #f1f5e6);
  font-weight: 600;
}
.checkbox-group .checkbox-label:focus-within {
  outline: 2px solid var(--green-dark, #6d8f00);
  outline-offset: 2px;
}
.checkbox-group .checkbox-label input {
  margin: 2px 0 0;
  flex: 0 0 auto;
}

.gesprek-submit {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}
.form-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
}
.form-hint {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* validation + status */
.form-group input:user-invalid,
.form-group textarea:user-invalid,
.form-group select:user-invalid {
  border-color: #c0392b;
}
.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
  border-color: #c0392b;
}

.field-error {
  color: #c0392b;
  font-size: 12.5px;
  font-weight: 700;
  margin-top: 6px;
}

.form-status {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius);
  font-size: 14.5px;
  font-weight: 700;
}
.form-status.is-success {
  background: var(--green-light);
  color: var(--green-dark);
  border: 1px solid var(--green);
}
.form-status.is-error {
  background: #fdecea;
  color: #a93226;
  border: 1px solid #e6b0aa;
}
.form-status.is-loading {
  background: var(--bg-light);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.form-status a {
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
}

/* ═══════════════════════════════════════════
   CONSENT BANNER
════════════════════════════════════════════ */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  background: var(--text);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
}
.consent-banner[hidden] {
  display: none;
}
.consent-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
  padding-bottom: 18px;
  flex-wrap: wrap;
}
.consent-text {
  font-size: 14px;
  margin: 0;
  max-width: 760px;
}
.consent-text a {
  color: var(--green-link);
  font-weight: 700;
  text-decoration: underline;
}
.consent-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.btn-consent {
  padding: 10px 22px;
}
.consent-banner .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.consent-banner .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* ═══════════════════════════════════════════
   RESPONSIVE — new components
════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .audience-grid {
    grid-template-columns: 1fr 1fr;
  }
  .routekaart-tabs {
    grid-template-columns: 1fr;
  }
  .route-panel__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .gesprek-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ═══════════════════════════════════════════
   DELFT PAGE
════════════════════════════════════════════ */
.delft-hero {
  margin-top: var(--nav-h);
  padding: 48px 0 8px;
  background: var(--white);
}
.delft-hero__overline {
  color: var(--green-dark);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.delft-hero__title {
  font-size: var(--text-h1);
  color: var(--green-link);
  line-height: var(--lh-h1);
}

.delft-intro__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 48px;
  align-items: start;
}
.delft-intro__text h2 {
  margin-bottom: 18px;
}
.delft-intro__text p {
  color: var(--text-muted);
}

.delft-scan-card {
  background: var(--bg-light);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  position: sticky;
  top: calc(var(--nav-h) + 16px);
}
.delft-scan-card__btn {
  width: 100%;
  justify-content: center;
}
.delft-scan-card__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 22px 0 12px;
}
.delft-scan-card__partners {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* A reading-width container that stays on the page's left edge.

   It used to be a 760px container of its own, and .container centres itself —
   so this one sat ~200px to the right of every full-width section around it.
   On the home page that was the FAQ block floating off-axis under a run of
   left-aligned sections (seen 2026-09-03). Now it keeps the normal container
   width and position, and caps its CONTENT at 760px instead: same line length,
   same left edge as everything else. */
.delft-narrow > * {
  max-width: 760px;
}
.delft-narrow h2 {
  margin-bottom: 16px;
}
.delft-narrow p {
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════
   GLOBALE PARAGRAAF-HARMONIE
   Leesbare, consistente regellengte + nettere woordafbreking,
   zodat tekst overal rustig en uniform oogt.
   ══════════════════════════════════════════════════════════════ */
/* Nettere afbreking: voorkomt losse woorden / rommelige laatste regels */
p {
  text-wrap: pretty;
}

/* Sectie-intro's overal identiek: gecentreerd met vaste leesbare breedte
   (lost het verschil op tussen volle-breedte links en smal-gecentreerd) */
.section-intro {
  max-width: 720px;
}

/* Losse tekstparagrafen in een sectie krijgen een leesbare kolom
   i.p.v. de volle containerbreedte (±70-80 tekens per regel) */
.section > .container > p,
/* A heading in the brand's readable green — the same colour the links and the
   product-card titles use, 5.4:1 on white — for the one section on a page that
   asks the visitor to act. Not --green itself: that is a light colour and fails
   contrast as text. */
.section-header--groen h2 {
  color: var(--green-link);
}

/* Only BARE lists — prose — get the reading column. A list with a class is a
   component laying itself out (the five-step flow on the home page is a <ul>),
   and squeezing it into 720px broke it into word-per-line cards. */
.section > .container > p,
.section > .container > ul:not([class]),
.section > .container > ol:not([class]),
.section > .container > blockquote,
.section > .container > .section-header + p {
  /* A reading column on the LEFT edge, not the centre line. It was centred
     with auto margins, which put a 720px block of prose 220px to the right of
     the heading above it once the headers moved left (2026-09-03) — the same
     two-axis mismatch the header change was meant to remove. */
  max-width: 720px;
}

/* Lists were left out of the rule above, so every <ul> in a text section ran the
   full 1160px and started 196px to the left of the paragraphs around it. That is
   the "tekst is niet goed uitgelijnd" reported on the 14 Smart Energy Hub pages
   on 2026-09-01: not the paragraphs, the lists between them. Measured before the
   fix: p at x=265, ul at x=69, in the same container. */
.section > .container > ul:not([class]),
.section > .container > ol:not([class]),
.delft-narrow > ul:not([class]),
.delft-narrow > ol:not([class]) {
  /* A prose list shows its markers. The global reset removes them for menus
     and card lists, and until 2026-09-04 that reached these too: three
     indented sentences with nothing explaining the indent (seen on
     /smart-energy-hub/, «Grootverbruiker of kleinverbruiker?»). */
  list-style: disc;
  padding-left: 22px;
  /* A list in prose had margin-bottom 0 while the paragraphs around it had 16px,
     so whatever followed a list touched it. Measured on
     /energyhub/bakestein/: gap above the list 16px, gap below it 0px, which is
     why "Let op: de kwartier- of uurwaarden…" ran straight into the last
     bullet. Same spacing above and below now, so a list reads as its own block. */
  margin-bottom: 16px;
}

/* ── Baarn page ── */
.baarn-hero__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}
.baarn-samenwerking__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 10px;
}
/* LOGO-variant: logo netjes in een wit kaartje (niet verloren / niet uitgerekt) */
.baarn-samenwerking__logos {
  display: inline-flex;
  align-items: center;
  /* An inline-flex row does not wrap by default, so on a narrow screen the
     partner logos ran straight off the page: measured 140px of horizontal
     overflow on /leidschendam-voorburg/ and 130px on /rijswijk/ at 375px wide.
     Wrapping costs nothing on desktop, where they fit on one line anyway. */
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.baarn-samenwerking__logos img {
  height: 56px;
  width: auto;
  object-fit: contain;
}
/* FOTO-variant (case-study zonder logo): grote, nette projectfoto i.p.v. kaartje */
.baarn-samenwerking--photo .baarn-samenwerking__label {
  margin-bottom: 12px;
}
.baarn-samenwerking--photo .baarn-samenwerking__logos {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.baarn-samenwerking--photo .baarn-samenwerking__logos img {
  height: auto;
  width: 360px;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}

/* ══════════════════════════════════════════════════════════════
   CASE — brede projectfoto (hero-banner) + kerncijfer-strip.
   Gedeeld door alle opdrachtgever-cases (ontwerp 2a). Teksten/
   cijfers komen 1-op-1 uit de bodytekst; hier alleen presentatie.
   ══════════════════════════════════════════════════════════════ */
.case-hero-photo {
  margin: 8px 0 0;
}
.case-hero-photo figure {
  position: relative;
  margin: 0;
}
.case-hero-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
/* The case photos are 3:2 aerial shots dropped into a 21:9 slot, so `cover`
   discards 36% of the height. Centred, that band is fine for a building that
   fills the frame, but De Hoop's roof — the solar panels the photo exists to
   show — sits in the bottom third and was being cut off. This anchors the
   crop to the bottom for those. */
.case-hero-photo--low img {
  object-position: center bottom;
}

.case-hero-photo figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.case-hero-photo figcaption strong {
  color: var(--green-dark);
}

/* LOGO-variant: zelfde brede banner, maar logo netjes gecentreerd
   (contain, niet uitgerekt) op een licht merk-paneel. */
.case-hero-photo--logo figure {
  display: grid;
  place-items: center;
  height: 260px;
  padding: 24px;
  background: var(--green-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.case-hero-photo--logo img {
  width: auto;
  height: auto;
  max-width: 320px;
  max-height: 150px;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

.case-stats {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.case-stats__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.case-stats__item {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  padding: 22px 20px;
  text-align: center;
}
.case-stats__item + .case-stats__item {
  border-left: 1px solid var(--border);
}
.case-stats__num {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1;
}
.case-stats__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
}
@media (max-width: 720px) {
  .case-hero-photo img {
    aspect-ratio: 16 / 9;
  }
  .case-hero-photo--logo figure {
    height: 190px;
  }
  .case-hero-photo--logo img {
    aspect-ratio: auto;
    max-height: 120px;
  }
  .case-stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .case-stats__item {
    border-left: 0 !important;
    border-top: 1px solid var(--border);
  }
  .case-stats__item:nth-child(1),
  .case-stats__item:nth-child(2) {
    border-top: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   Hele case-kaart klikbaar (niet alleen "Lees meer").
   Stretched-link: de bestaande link bedekt de hele kaart.
   ══════════════════════════════════════════════════════════════ */
.case-card,
.case-featured {
  position: relative;
}
.case-card a.card-link::after,
.case-featured a.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.case-card {
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
a.case-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}

.baarn-korting {
  color: var(--green-dark) !important;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 22px;
  padding-left: 16px;
  border-left: 4px solid var(--green);
}

.baarn-offers {
  list-style: none;
  margin: 16px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.baarn-offers li {
  position: relative;
  padding-left: 30px;
  color: var(--text);
}
.baarn-offers li:not(.baarn-offers__of)::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.baarn-offers__of {
  padding-left: 30px;
  font-style: italic;
  color: var(--text-muted);
}

.baarn-product {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 44px;
  align-items: center;
  margin-bottom: 56px;
}
.baarn-product--reverse {
  grid-template-columns: 1fr minmax(200px, 300px);
}
.baarn-product:last-child {
  margin-bottom: 0;
}
.baarn-product__img img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.baarn-product__text h3 {
  color: var(--green-dark);
  margin-bottom: 10px;
}
.baarn-product__text p {
  color: var(--text-muted);
  margin-bottom: 16px;
}
.baarn-subsidie {
  font-size: 14px;
}

.baarn-checklist {
  list-style: none;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.baarn-checklist li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--text);
}
.baarn-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

@media (max-width: 768px) {
  .baarn-product,
  .baarn-product--reverse {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .baarn-product--reverse .baarn-product__img {
    order: -1;
  }
  .baarn-samenwerking__logos img {
    height: 46px;
  }
  .delft-intro__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.partner-badge {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.partners-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  align-items: center;
}

.delft-partner-logo {
  display: block;
  height: 48px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.delft-scan-card__partners {
  align-items: center;
}

/* ── Diemen page ── */
.diemen-logo {
  height: 72px !important;
  width: auto;
}
.diemen-subtitle {
  color: var(--text-muted);
  font-size: var(--text-base);
  margin-top: -6px;
  margin-bottom: 22px;
}
/* The opening "De startvraag" block on the case pages is an <h2>: it is the
   first section of the case study, a peer of "Onze aanpak", and as an <h3> it
   skipped a level straight after the <h1>. The size is pinned here so the
   promotion is semantic only and the page looks exactly as before — without
   this it would inherit the much larger base h2 size. */
.diemen-accent {
  color: var(--green-dark);
  margin-bottom: 12px;
}
/* Heading only. The same class also sits on a <p> in each case-page hero, and
   an unscoped font-size here would resize that paragraph too. */
h2.diemen-accent {
  font-size: var(--text-h3);
}
.diemen-intro .delft-intro__text h2,
.diemen-intro .delft-intro__text h3 {
  margin: 28px 0 10px;
}
.diemen-intro .delft-intro__text h2:first-of-type,
.diemen-intro .delft-intro__text h3:first-of-type {
  margin-top: 0;
}
.diemen-intro .delft-intro__text p {
  color: var(--text);
}
.diemen-card-title {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: 6px;
}
.diemen-card-text {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 18px;
}

/* ── Zakelijk Energieloket (loket-microsite pagina's) ── */
.loket-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.loket-brand__eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--green-dark);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
  border-right: 1px solid var(--border);
  padding-right: 14px;
}
.loket-brand__logo {
  height: 42px;
  width: auto;
  display: block;
}

.loket-footer {
  background: #2a2e29;
  color: rgba(255, 255, 255, 0.75);
  padding: 40px 0;
}
.loket-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
}
.loket-footer a {
  color: var(--green-link);
}
.loket-footer__credit {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 600px) {
  .loket-brand__eyebrow {
    display: none;
  }
}

.loket-enquete {
  background: #cfe9f6;
  border-radius: var(--radius-lg);
  padding: 32px 36px;
}
.loket-enquete h2 {
  color: var(--navy);
  margin-bottom: 2px;
}
.loket-enquete__sub {
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 14px;
}
.loket-enquete p {
  color: #214a64;
}
.loket-enquete .btn {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
.loket-enquete .btn:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.loket-content-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 44px;
  align-items: start;
}
.loket-content-grid > div p {
  color: var(--text-muted);
}
.loket-info-box {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.loket-info-box h3 {
  color: var(--green-dark);
  margin-bottom: 10px;
}
.loket-info-box p {
  font-size: 14px;
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .loket-content-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Zeeland cases strip */
.zeeland-cases {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 680px) {
  .zeeland-cases {
    grid-template-columns: 1fr;
  }
}

/* ── Onze diensten page ── */
.diensten-intro-strip {
  background: var(--white);
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
}
.diensten-intro-strip__inner {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.diensten-intro-strip__inner p {
  max-width: 560px;
  color: var(--text-muted);
  margin: 0;
}

.diensten-actie {
  background: var(--green-light);
  border: 1.5px solid rgba(151, 192, 30, 0.4);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  margin: 40px 0 28px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.diensten-actie h3 {
  margin-bottom: 8px;
}
.diensten-actie p {
  color: var(--text-muted);
  max-width: 520px;
  margin: 0;
}
.diensten-actie__tags {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.diensten-tag {
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.diensten-tag.green {
  background: var(--green);
}
.diensten-tag.navy {
  background: var(--navy);
}

.diensten-andere {
  text-align: center;
  color: var(--text-muted);
}

.diensten-loket-h3 {
  margin: 0 0 16px;
}
.loket-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.diensten-faq details {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 12px;
}
.diensten-faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.diensten-faq summary::-webkit-details-marker {
  display: none;
}
.diensten-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  color: var(--green);
  font-size: 1.3rem;
  line-height: 1;
}
.diensten-faq details[open] summary::after {
  content: "\2013";
}
.diensten-faq details p {
  color: var(--text-muted);
  margin: 12px 0 0;
}

.diensten-cta {
  background: var(--green);
  text-align: center;
}
.diensten-cta h2 {
  color: #fff;
  margin-bottom: 16px;
}
.diensten-cta p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 520px;
  margin: 0 auto 28px;
}

/* ── Iconen (Lucide, self-hosted SVG via CSS-mask; erven de tekstkleur) ── */
.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  flex-shrink: 0;
  vertical-align: middle;
}
.ico-zap {
  --ico: url("../images/icons/zap.svg");
}
.ico-search {
  --ico: url("../images/icons/search.svg");
}
.ico-lightbulb {
  --ico: url("../images/icons/lightbulb.svg");
}
.ico-sun {
  --ico: url("../images/icons/sun.svg");
}
.ico-factory {
  --ico: url("../images/icons/factory.svg");
}
.ico-building {
  --ico: url("../images/icons/building.svg");
}
.ico-building-2 {
  --ico: url("../images/icons/building-2.svg");
}
.ico-landmark {
  --ico: url("../images/icons/landmark.svg");
}
.ico-coins {
  --ico: url("../images/icons/coins.svg");
}
.ico-share-2 {
  --ico: url("../images/icons/share-2.svg");
}
.ico-badge-check {
  --ico: url("../images/icons/badge-check.svg");
}
.ico-map-pin {
  --ico: url("../images/icons/map-pin.svg");
}
.ico-phone {
  --ico: url("../images/icons/phone.svg");
}
.ico-mail {
  --ico: url("../images/icons/mail.svg");
}
.ico-clock {
  --ico: url("../images/icons/clock.svg");
}
.ico-users {
  --ico: url("../images/icons/users.svg");
}
.ico-clipboard-list {
  --ico: url("../images/icons/clipboard-list.svg");
}
.ico-image {
  --ico: url("../images/icons/image.svg");
}

/* Icon-containers krijgen de merkkleur */
.service-icon,
.audience-icon,
.route-card__icon,
.icon-tile {
  color: var(--green);
}
.icon-tile {
  margin-bottom: var(--space-16);
}
.icon-tile--sm {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--radius);
  margin-bottom: 0;
}

/* The six data categories a participant gathers: two columns with a small
   tile each, instead of six bare lines. A classed list, so the prose-list
   reading column leaves it alone. */
.seh-gegevens {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-32);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12) var(--space-32);
  max-width: 720px;
}
.seh-gegevens li {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 600px) {
  .seh-gegevens {
    grid-template-columns: 1fr;
  }
}
.service-card--static {
  cursor: default;
}
.contact-detail-icon {
  color: var(--green-dark);
}

/* ── Leidschendam-Voorburg page ── */
.lsv-voorwaarde {
  font-size: 13px;
  color: var(--text-muted);
}
.lsv-grid .service-detail-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.lsv-kosten {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  margin-top: auto;
  margin-bottom: 16px;
}

/* Video cards */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 44px;
}

/* ── Extra responsive vangnetten (mobiel) ── */
.expect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.contact-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.case-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--border);
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 900px) {
  .video-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .video-grid,
  .expect-grid,
  .contact-fields-grid,
  .case-featured {
    grid-template-columns: 1fr;
  }
}
.video-card {
  margin: 0;
}
.video-card__meta {
  margin-bottom: 12px;
}
.video-card__meta strong {
  display: block;
  color: var(--green-dark);
  font-size: 1.05rem;
}
.video-card__meta span {
  font-size: 14px;
  color: var(--text-muted);
}

.video-card__thumb {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}
.video-card__thumb:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.video-card__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.video-card__play {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(225, 45, 45, 0.92);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition:
    transform var(--transition),
    background var(--transition);
}
.video-card__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
}
.video-card__thumb:hover .video-card__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(225, 45, 45, 1);
}

/* Video lightbox */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.video-modal[hidden] {
  display: none;
}
.video-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
}
.video-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
}
.video-modal__frame {
  position: relative;
  padding-top: 56.25%;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-modal__close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--white);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-modal__close:hover {
  background: var(--green);
  color: #fff;
}

@media (max-width: 900px) {
  .delft-intro__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .delft-scan-card {
    position: static;
  }
  .video-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .trust-bar .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .logo-marquee {
    width: 100%;
  }
  .audience-grid {
    grid-template-columns: 1fr;
  }
  /* The summary card's track floors at 320px, which plus the 48px gap does
     not fit a 375px screen — every /diensten/ page scrolled sideways by 17px.
     One column below 768px; the card stops being sticky because a full-width
     card pinned under the header covers the text it summarises. */
  .qem-overview,
  .product-overview {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .qem-summary-card,
  .product-summary-card {
    position: static;
  }
  .route-panel {
    padding: 24px;
  }
  .gesprek-form-wrap {
    padding: 24px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .consent-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .consent-actions {
    width: 100%;
  }
  .consent-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════
   ONZE AANPAK — geanimeerde proceskaarten (homepage, blok 3)
   Eigen namespace (er-*) zodat het niet botst met .aanpak-card op
   bedrijventerreinen.html. De SVG-illustraties dragen hun eigen
   inline animation-/transform-origin-stijlen; hier staan de keyframes
   en de kaart-/grid-stijlen. Animaties respecteren prefers-reduced-motion.
══════════════════════════════════════════════════════════════════ */
@keyframes erSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes erSunMini {
  to {
    transform: rotate(360deg);
  }
}
@keyframes erFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@keyframes erPulseSoft {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
@keyframes erScan {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  50% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@keyframes erDataA {
  0%,
  100% {
    transform: scaleY(0.4);
  }
  50% {
    transform: scaleY(1);
  }
}
@keyframes erBarW {
  0% {
    transform: scaleX(0.15);
  }
  55%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes erPulseA {
  0% {
    transform: translate(-42px, -24px);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  55%,
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes erPulseB {
  0% {
    transform: translate(42px, -24px);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  55%,
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes erPulseC {
  0% {
    transform: translate(0, 34px);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  55%,
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
/* Reverse of erPulseA/B/C: the hub also sends energy back out to the
   businesses, not just in — matches the bidirectional fix on bedrijventerreinen. */
@keyframes erPulseOutA {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  55%,
  100% {
    transform: translate(-42px, -24px);
    opacity: 0;
  }
}
@keyframes erPulseOutB {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  55%,
  100% {
    transform: translate(42px, -24px);
    opacity: 0;
  }
}
@keyframes erPulseOutC {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  55%,
  100% {
    transform: translate(0, 34px);
    opacity: 0;
  }
}
@keyframes erNode {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.13);
  }
}
@keyframes erLeaf {
  0% {
    transform: translateY(6px) scale(0.5);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translateY(-24px) scale(1);
    opacity: 0;
  }
}
@keyframes erArrow {
  0%,
  100% {
    opacity: 0.3;
    transform: translateX(0);
  }
  50% {
    opacity: 1;
    transform: translateX(5px);
  }
}

.er-aanpak {
  position: relative;
  overflow: hidden;
  background: #eef4e2;
}

/* A section that carries an .er-deco watermark has to clip it and be the
   positioning context for it. Ten municipality pages each wrote those two
   declarations inline, which is ten copies of one decision and ten values the
   design guard cannot see. Named once. */
.section--deco {
  position: relative;
  overflow: hidden;
}

.er-deco {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 230px;
  height: 230px;
  opacity: 0.09;
  color: #5a7d12;
  animation: erSpin 80s linear infinite;
  pointer-events: none;
}

.er-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap;
}

.er-step {
  flex: 1 1 0;
  min-width: 0;
  max-width: 232px;
  background: #fff;
  border-radius: 18px;
  padding: 18px 20px 24px;
  box-shadow: 0 6px 18px rgba(54, 66, 31, 0.07);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.er-arrow {
  flex: 0 0 24px;
  align-self: center;
  display: grid;
  place-items: center;
  color: #97c01e;
  animation: erArrow 2.4s ease-in-out infinite;
}
/* No :hover here on purpose. .er-step is always a plain li, never a link or a
   button, and a card that lifts and glows says "click me". See UX-1 in
   docs/reference/FRONTEND-CRITERIA.md. */
.er-step--final {
  background: #f1f6e6;
  border: 1.5px solid rgba(151, 192, 30, 0.45);
}

.er-ill-box {
  background: #f4f7ee;
  border-radius: 12px;
  height: 128px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.er-step--final .er-ill-box {
  background: #e7f0d6;
}
.er-ill {
  display: block;
  width: 100%;
  max-width: 140px;
  height: auto;
}
.er-ill * {
  transform-box: fill-box;
}

.er-num {
  font-family: "PT Sans", Helvetica, Arial, Verdana, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #97c01e;
}
.er-step--final .er-num {
  color: #5a7d12;
}
.er-step h3 {
  font-size: 18.5px;
  margin: 2px 0 7px;
  color: #26331a;
}
/* Copy inside components shares ONE size and ONE line-height (--text-sm,
   --lh-tight). Measured 2026-09-04: the same 14px paragraph had three different
   line-heights on the home page depending on which card it sat in. */
.er-step p {
  font-size: var(--text-sm);
  line-height: var(--lh-tight);
  color: #5e6b4a;
  margin: 0;
}

/* Responsive: onder ~960px breekt de één-regel-rij af.
   Pijlen verdwijnen en de kaarten gaan netjes naar meerdere rijen. */
@media (max-width: 960px) {
  .er-flow {
    flex-wrap: wrap;
  }
  .er-arrow {
    display: none;
  }
  .er-step {
    flex: 1 1 220px;
    max-width: 300px;
  }
}

/* Klein scherm: één kaart per rij */
@media (max-width: 540px) {
  .er-step {
    flex-basis: 100%;
    max-width: none;
  }
}

/* Toegankelijkheid: geen beweging als de gebruiker dat vraagt */
@media (prefers-reduced-motion: reduce) {
  .er-deco,
  .er-arrow,
  .er-ill * {
    animation: none !important;
  }
}

/* ── Keuzehulp op /diensten/aanmelden/ ──────────────────────────────────────
   In WordPress is dit hulptekst bij het veld "Type elektra-aansluiting", niet
   een eigen pagina-sectie. Ingeklapt, en met dezelfde +/- affordance als de
   FAQ zodat het als uitklapbare hulp leest en niet als een muur tekst. */
.keuzehulp-details {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 22px;
  max-width: 820px;
  margin: 0 auto;
}
.keuzehulp-details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.keuzehulp-details summary::-webkit-details-marker {
  display: none;
}
.keuzehulp-details summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 22px;
  line-height: 1;
  color: var(--green);
}
.keuzehulp-details[open] summary::after {
  content: "–";
}
.keuzehulp-details summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.keuzehulp-details > *:not(summary) {
  max-width: 68ch;
}
.keuzehulp-details h3 {
  font-size: 17px;
  margin: 20px 0 6px;
}

/* Visually hidden, still read by screen readers and still counted in the
   heading outline. Used where a section is obvious to a sighted reader from
   its cards but has no visible heading, which otherwise leaves a gap in the
   outline (an h1 followed straight by h3s). Standard clip-rect technique. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Back to top — the previous site had this at the foot of every page and the
   new site dropped it. It is a plain #top anchor: the HTML spec scrolls to the
   top of the document for that fragment, so no JavaScript and no extra target
   element are needed. The skip link at the top of the page is a different
   control and stays as it is. */
.back-to-top {
  font-size: 13px;
  white-space: nowrap;
}

.back-to-top::before {
  content: "\2191";
  margin-right: 6px;
}

.back-to-top-wrap {
  margin: 16px 0 0;
  text-align: center;
}

/* Inline help that opens in place. Used where an explanation used to be a
   separate section or a link to another page: both took the reader away from
   what they were doing, and in the form a page load threw away what they had
   typed. */
.er-help,
.form-hint details,
details.form-hint {
  margin: 16px 0 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  background: var(--bg-light-grey, #f6f7f3);
}
.er-help > summary,
details.form-hint > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.er-help > summary::-webkit-details-marker,
details.form-hint > summary::-webkit-details-marker {
  display: none;
}
.er-help > summary::before,
details.form-hint > summary::before {
  content: "+";
  font-weight: 700;
  color: var(--green-dark, #6d8f00);
  width: 1em;
  text-align: center;
  flex: 0 0 auto;
}
.er-help[open] > summary::before,
details.form-hint[open] > summary::before {
  content: "3";
}
.er-help > summary:focus-visible,
details.form-hint > summary:focus-visible {
  outline: 2px solid var(--green-dark, #6d8f00);
  outline-offset: 2px;
}
.er-help > p,
details.form-hint > p {
  margin: 0;
  padding: 0 16px 14px;
  color: var(--text-muted);
}
details.form-hint {
  font-size: 14px;
}

/* The site header is position:fixed, so the first section on a page has to
   clear it or its heading is hidden underneath. Pages that open with a
   .page-hero get this from the hero; a page that opens with a plain section
   needs to say so. */
.section--below-nav {
  margin-top: var(--nav-h);
}

/* ── 404 ────────────────────────────────────────────────────────────────── */
.er-404-code {
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 8px;
  color: var(--green-dark, #6d8f00);
  opacity: 0.35;
}
.er-404-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 32px 0 0;
}
.er-404-link {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.er-404-link:hover,
.er-404-link:focus-visible {
  border-color: var(--green-dark, #6d8f00);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}
.er-404-link strong {
  display: block;
  margin-bottom: 4px;
  color: var(--green-dark, #6d8f00);
}
.er-404-link span {
  color: var(--text-muted);
  font-size: 15px;
}
.er-404-help {
  margin: 32px 0 0;
  color: var(--text-muted);
  max-width: 720px;
}

/* The list of running Smart Energy Hub projects on /bedrijventerreinen/. Two
   columns where there is room, one on a phone. */
.er-project-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px 24px;
}
.er-project-list li {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

/* A heading one step below h3, for a label inside a block that already has an
   h3 above it. 1.05rem is design-system/tokens.json `type.h4` — it was written
   here by hand before anyone checked, which is exactly the mistake
   scripts/check-tokens.mjs now catches. */
.er-subhead {
  font-size: 1.05rem; /* type.h4 */
  margin: 0 0 8px;
}

/* ── Partner logos on a Smart Energy Hub project page ────────────────────── */
/* These say who is behind the project, which is what makes a participant trust
   the page enough to hand over their data. At 48px they read as a footnote, so
   they get half as much height again and room to breathe. The values live here
   rather than inline so they follow the system and can be changed in one place. */
/* The partner strip shares the centred axis of the .section-header that
   follows it, and the same 56px breathing room below — so label, logos and
   heading read as one column instead of three. */
.er-partners-strip {
  /* Left, like the heading under it. Centred for a few hours on 2026-09-03 to
     match a centred heading; the heading moved, so this moves with it. */
  text-align: left;
  margin: 0 0 var(--space-56);
}
.er-partners-label {
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 var(--space-16);
}
.er-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-32) var(--space-40);
  margin: 0;
}
.er-partners img {
  max-height: 72px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 600px) {
  .er-partners {
    gap: 24px 28px;
  }
  .er-partners img {
    max-height: 56px;
    max-width: 150px;
  }
}

/* ── Smart Energy Hub ────────────────────────────────────────────────────── */
/* The page explains a mechanism, so the mechanism is the illustration. A stock
   photo of a warehouse tells a business owner nothing they do not already see
   out of their own window; a diagram says we understand the system they are
   stuck in. Drawn rather than bought, so it also costs no licence and never
   turns up watermarked. */
.seh-figure {
  margin: 32px 0 0;
}
.seh-diagram {
  width: 100%;
  height: auto;
  max-width: 720px;
  display: block;
  margin: 0 auto;
}
.seh-figure figcaption {
  margin: 12px auto 0;
  max-width: 620px;
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
}
.seh-line {
  stroke: var(--border);
  stroke-width: 2;
}
.seh-grid,
.seh-hub {
  fill: var(--green-dark, #6d8f00);
}
.seh-box {
  fill: #fff;
  stroke: var(--border);
  stroke-width: 1.5;
}
.seh-label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  fill: var(--text);
}
.seh-sub {
  font-family: var(--font-body);
  font-size: 12.5px;
  fill: var(--text-muted);
}
.seh-on-dark {
  fill: #fff;
}

.seh-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 0 0 28px;
}
.seh-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 20px 22px;
}
.seh-card h3 {
  margin: 0 0 8px;
}
.seh-card p {
  margin: 0;
  color: var(--text-muted);
}
.seh-cta {
  text-align: center;
}
.seh-cta .section-intro {
  margin: 0 auto 24px;
}

.route-panel__faq p {
  font-size: var(--text-sm);
  line-height: var(--lh-tight);
}

/* /bedrijventerreinen/ builds its cards inline, with no component class, so
   its card titles fell back to the 30px section h3 once the inline sizes went.
   Named, they take the card-title step like every other card on the site. */
.bt-card__title {
  font-size: var(--text-h4);
}

/* Where the subject sits in a hero photo. A wide hero shows only a band of the
   image; without a focal point that band is the middle, which on a photo of
   people is their chests. Faces live in the upper third; a scene of people in
   front of a building has them near the bottom. */
.hero-img--faces {
  object-position: center 22%;
}
.hero-img--low {
  object-position: center 78%;
}

/* Footer: every local page, on every page. The anchor names the service and the
   place, which is what a search engine reads as the page's subject. */
.footer-regions {
  padding-top: var(--space-32);
  margin-bottom: var(--space-48);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-regions h2 {
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  margin-bottom: var(--space-16);
}
.footer-regions .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
}
.footer-regions .footer-links li {
  margin: 0;
}

/* Breadcrumb on the local pages: Home › Energieloket & acties › place. */
/* The header is fixed: the breadcrumb takes the offset the hero used to take. */
.breadcrumb {
  margin-top: var(--nav-h);
  padding: var(--space-16) 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.breadcrumb li + li::before {
  content: "›";
  margin-right: var(--space-8);
}
.breadcrumb a {
  color: var(--green-link);
}
.breadcrumb [aria-current="page"] {
  color: var(--text);
}
.breadcrumb + .delft-hero {
  margin-top: 0;
}

/* Ordered prose lists keep their numbers: the global reset drops list-style,
   and the unclassed-ul rule above restores discs only for ul. */
.section > .container > ol:not([class]),
.delft-narrow > ol:not([class]) {
  list-style: decimal;
  padding-left: var(--space-24);
  max-width: 720px;
}

/* Actueel: one post. The listing reuses the case cards. */
.post__header {
  margin-bottom: var(--space-32);
}
.post__meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: 0;
}
.post__image {
  margin: 0 0 var(--space-32);
}
.post__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.post__body > * + * {
  margin-top: var(--space-16);
}
.post__body h2,
.post__body h3 {
  margin-top: var(--space-40);
}
.post__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.post__back {
  margin-top: var(--space-48);
}
.post-card__title {
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
}

/* ── The planner overlay ─────────────────────────────────────────────────
   Opened by er-forms.js once a free-call request is stored, so the visitor
   picks a slot without leaving the page. Sizes come from the design scale. */
.er-scheduler {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 35, 20, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
}
.er-scheduler-panel {
  background: #fff;
  border-radius: var(--radius-lg);
  width: min(100%, 880px);
  height: min(100%, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.er-scheduler-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--border);
}
.er-scheduler-open {
  font-size: var(--text-sm);
}
.er-scheduler-close {
  font-size: var(--text-sm);
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: var(--space-8) var(--space-16);
  cursor: pointer;
}
.er-scheduler-close:hover {
  background: var(--bg-light);
}
.er-scheduler-frame {
  flex: 1;
  width: 100%;
  border: 0;
}