/* ==========================================================================
   Soleva design system
   Structuur gebaseerd op heatpumps-tauranga.nz, kleurstelling navy + zon-geel.
   Een stylesheet voor home en contentpagina's, zodat header en footer overal
   identiek renderen.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --navy:      #152A42;
  --navy-2:    #1F3A57;
  --navy-3:    #0E1D2E;
  --blue:      #2C6CA8;
  --blue-lt:   #EAF2FA;
  --sun:       #F5A81C;
  --sun-dk:    #B87400;
  --sun-lt:    #FFF6E4;
  --green:     #2A6B45;
  --green-lt:  #EAF3EE;
  --white:     #FAF8F5;
  --grey:      #F2F0EC;
  --text:      #17202A;
  --muted:     #56606E;
  --border:    #DCE2E9;

  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 2px 12px rgba(21, 42, 66, 0.09);
  --shadow-md: 0 6px 24px rgba(21, 42, 66, 0.14);

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1180px;
}

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

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

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.22;
  color: var(--navy);
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.85rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.3rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1.1em; }

.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--sun); color: var(--navy);
  padding: 10px 18px; font-weight: 700; z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

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

/* --------------------------------------------------------------- header -- */
.site-header {
  background: var(--navy);
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.header-inner {
  display: flex; align-items: center; gap: 24px;
  min-height: 68px;
}
/* Logotype: S, de zon als letter O, en leva. De zon staat optisch op de plek
   van de O, dus geen gap ernaast maar een kleine negatieve marge zodat de
   stralen tussen de letters mogen vallen. */
.logo {
  display: inline-flex; align-items: center;
  color: #fff; text-decoration: none;
  font-size: 1.42rem; font-weight: 800; letter-spacing: -.01em;
  line-height: 1; flex: 0 0 auto; white-space: nowrap;
}
/* De ring is 37/56 van de totale breedte. Om als O te lezen moet die ring net
   iets boven de kapitaalhoogte uitkomen (ongeveer 5 procent overshoot, zoals
   een ronde letter dat altijd doet): 1,14em geeft precies dat. */
.logo-sun {
  width: 1.14em; height: 1.14em; flex: 0 0 auto;
  color: var(--sun);
  margin: 0 -.055em;               /* stralen mogen de letters net raken */
  transform: translateY(-.01em);
}
.logo-s, .logo-rest { display: inline-block; }
.logo:hover .logo-sun { color: #ffbe45; }

/* Op de donkere footer staat het logotype iets rustiger. */
.logo-footer { font-size: 1.3rem; margin-bottom: 14px; }

.main-nav { margin-left: auto; }
.main-nav ul {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.main-nav a {
  display: block; padding: 9px 12px;
  color: rgba(255, 255, 255, .88); text-decoration: none;
  font-size: .95rem; font-weight: 600; white-space: nowrap;
  border-radius: var(--radius-sm);
}
.main-nav a:hover, .main-nav a[aria-current="page"] {
  color: #fff; background: rgba(255, 255, 255, .1);
}

/* Uitklapmenu: een geneste lijst, open bij hover en bij toetsenbordfocus. */
.main-nav .has-submenu { position: relative; }
.main-nav .has-submenu > a::after {
  content: ""; display: inline-block; margin-left: 7px; vertical-align: middle;
  border: 4px solid transparent; border-top-color: currentColor;
  transform: translateY(2px);
}
.main-nav .submenu {
  display: none; position: absolute; top: 100%; left: 0;
  min-width: 264px; margin: 0; padding: 6px;
  background: var(--navy-2); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  list-style: none; z-index: 110;
}
.main-nav .has-submenu:hover > .submenu,
.main-nav .has-submenu:focus-within > .submenu { display: block; }
.main-nav .submenu a {
  white-space: normal; font-weight: 500; font-size: .92rem; padding: 8px 11px;
}
.main-nav .submenu-all a {
  font-weight: 700; color: var(--sun);
  border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 4px; padding-top: 10px;
}

.header-cta {
  flex: 0 0 auto;
  background: var(--sun); color: var(--navy);
  padding: 10px 18px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: .95rem; text-decoration: none;
  white-space: nowrap;
}
.header-cta:hover { background: #ffbe45; color: var(--navy); }

/* taalwissel */
.lang-switch { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; flex: 0 0 auto; }
.lang-switch a {
  display: block; padding: 6px 9px; border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, .7); text-decoration: none;
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.lang-switch a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.lang-switch a[aria-current="true"] { color: var(--navy); background: var(--sun); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px; padding: 10px;
  background: transparent; border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-sm); cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; background: #fff; border-radius: 2px;
  margin: 4px 0;
}

/* ----------------------------------------------------------------- hero -- */
.hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 58%, #2a4a6b 100%);
  color: #fff;
  padding: 54px 0 48px;
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -140px; top: -120px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 168, 28, .22) 0%, transparent 70%);
  pointer-events: none;
}
/* Hero: tekst links, de eerste afbeelding rechts naast h1 en intro. */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  gap: 44px; align-items: center;
}
.hero-media { margin: 0; }
.hero-media img {
  width: 100%; border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.hero h1 { color: #fff; margin-bottom: .45em; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--sun); margin: 0 0 14px;
}
.hero .eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--sun); border-radius: 2px;
}
.hero p.lead {
  font-size: 1.14rem; line-height: 1.62;
  color: rgba(255, 255, 255, .9); max-width: 60ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.hero-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding: 0; list-style: none; }
.trust-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 100px; padding: 6px 14px;
  font-size: .86rem; color: rgba(255, 255, 255, .92);
}
.trust-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); }

/* --------------------------------------------------------------- knoppen -- */
.btn {
  display: inline-block; padding: 13px 24px;
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font); font-size: 1rem; font-weight: 700;
  text-align: center; text-decoration: none; line-height: 1.3;
}
.btn-accent { background: var(--sun); color: var(--navy); }
.btn-accent:hover { background: #ffbe45; color: var(--navy); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: #24598b; color: #fff; }
.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn-block { display: block; width: 100%; }

/* ---------------------------------------------------------- offerteblok -- */
.quote-card {
  background: #fff; color: var(--text);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 26px 24px 22px;
  border-top: 4px solid var(--sun);
}
.quote-card h2 { font-size: 1.28rem; margin-bottom: .25em; }
.quote-card .form-note { font-size: .9rem; color: var(--muted); margin-bottom: 18px; }
.form-row { margin-bottom: 13px; }
.form-row label {
  display: block; font-size: .86rem; font-weight: 700;
  color: var(--navy); margin-bottom: 5px;
}
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: .97rem; color: var(--text); background: #fff;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-lt);
}
.form-row textarea { min-height: 84px; resize: vertical; }
.form-fine { font-size: .8rem; color: var(--muted); margin: 12px 0 0; text-align: center; }

/* Offerteformulier als dialoogvenster. Het dialog-element regelt zelf de focus
   en Escape; hier alleen de vormgeving. */
.quote-modal {
  width: min(420px, calc(100vw - 32px));
  padding: 0; border: 0; background: transparent;
  color: var(--text); overflow: visible;
}
.quote-modal::backdrop { background: rgba(14, 29, 46, .62); }
.quote-modal .quote-card { margin: 0; }
.quote-modal-close {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  width: 36px; height: 36px; padding: 0;
  background: var(--navy); color: #fff;
  border: 2px solid #fff; border-radius: 50%;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.quote-modal-close:hover { background: var(--sun); color: var(--navy); }

/* Contactformulier in de content: breder dan de zijbalkversie. */
.contact-form {
  max-width: 560px; margin: 0 0 2em;
  background: #fff; border: 1px solid var(--border);
  border-top: 4px solid var(--sun);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 26px 22px;
}
.contact-form h2 { margin-top: 0; }
.contact-form .opt {
  font-weight: 400; color: var(--muted); font-size: .82rem; margin-left: 5px;
}

/* project-chips: functioneel centerpiece-element */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.chip {
  display: inline-block; padding: 8px 15px;
  background: var(--white); border: 1px solid var(--border); border-radius: 100px;
  font-size: .9rem; font-weight: 600; color: var(--navy);
  cursor: pointer; font-family: var(--font);
}
.chip:hover { border-color: var(--blue); background: var(--blue-lt); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ------------------------------------------------------------- trustbar -- */
.trust-bar { background: var(--navy-3); color: rgba(255, 255, 255, .9); }
.trust-bar-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px;
  padding: 14px 0;
}
.trust-bar-item { display: flex; align-items: center; gap: 9px; font-size: .92rem; }
.trust-bar-item svg { flex: 0 0 auto; color: var(--sun); }

/* ---------------------------------------------------------- breadcrumbs -- */
.breadcrumbs { background: var(--white); border-bottom: 1px solid var(--border); }
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0; padding: 11px 0; font-size: .86rem;
}
.breadcrumbs li { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.breadcrumbs li:not(:last-child)::after { content: "\203A"; color: var(--border); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--blue); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--navy); font-weight: 600; }

/* --------------------------------------------------------------- layout -- */
.section { padding: 52px 0; }
.section-soft { background: var(--white); }
.section-grey { background: var(--grey); }
.section-navy { background: var(--navy); color: rgba(255, 255, 255, .88); }
.section-navy h2, .section-navy h3 { color: #fff; }

.section-header { max-width: 720px; margin: 0 auto 34px; text-align: center; }
.section-header p { color: var(--muted); font-size: 1.05rem; margin: 0; }
.section-navy .section-header p { color: rgba(255, 255, 255, .78); }

/* Contentkolom met het offerteformulier ernaast; de zijbalk scrolt mee. */
.content-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: 46px; align-items: start;
}
/* De kolom loopt over de volle hoogte van de content, zodat het formulier daarin
   kan meescrollen zonder dat de zijbalk een eigen scrollbalk nodig heeft. */
.sidebar { align-self: stretch; }
.sidebar .quote-card { position: sticky; top: 88px; }
.content-grid .prose { max-width: 68ch; min-width: 0; }

/* Zijmenu: de omgeving van de huidige pagina. */
.side-nav {
  margin-top: 18px; padding: 16px 18px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.side-nav h2 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: .8em;
}
.side-nav ul { list-style: none; margin: 0; padding: 0; }
.side-nav li { margin: 0; }
.side-nav a {
  display: block; padding: 6px 9px; margin-left: -9px;
  color: var(--navy); text-decoration: none;
  font-size: .92rem; line-height: 1.4; border-radius: var(--radius-sm);
}
.side-nav a:hover { background: var(--blue-lt); color: var(--blue); }
.side-nav a[aria-current="page"] {
  background: var(--navy); color: #fff; font-weight: 700;
}
.side-nav-up { margin: 0 0 10px; font-size: .88rem; }
.side-nav-up a { color: var(--sun-dk); font-weight: 700; text-decoration: none; }
.side-nav-up a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- prose -- */
.prose { max-width: 74ch; }
.prose > h2 {
  margin-top: 1.9em; padding-top: .55em;
  border-top: 3px solid var(--sun-lt);
}
.prose > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose > h3 { margin-top: 1.5em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--sun-dk); }
.prose strong { color: var(--navy); }
.prose figure { margin: 1.6em 0; }
.prose figure img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
.prose figcaption { font-size: .87rem; color: var(--muted); margin-top: .6em; }
.prose > p > img { border-radius: var(--radius); box-shadow: var(--shadow); margin: 1.6em 0; }

/* Grafieken uit de feitentabellen. Ze scrollen mee binnen hun eigen kader op
   smalle schermen, net als de tabellen. */
.chart { margin: 1.8em 0; max-width: 100%; }
.chart-box {
  overflow-x: auto; padding: 18px 20px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Zonder deze twee rekt de min-width van de SVG het kader breder dan zijn
     ouder, en duwt de hele contentkolom de pagina horizontaal open. */
  max-width: 100%; min-width: 0;
}
.chart-box svg { display: block; min-width: 30rem; }
.chart figcaption {
  font-size: .87rem; color: var(--muted); margin-top: .7em;
}
/* Waar de cijfers vandaan komen. Kleiner dan de lopende tekst, want het is
   verantwoording en geen betoog, maar wel leesbaar: zonder bron is een tabel
   met merknamen en getallen niet te controleren. */
.prose p.source {
  font-size: .87rem; color: var(--muted);
  border-left: 3px solid var(--border); padding-left: 1em; margin: 1.4em 0;
}

/* gedistilleerd antwoord bovenaan */
.lead-answer {
  background: var(--sun-lt); border-left: 4px solid var(--sun);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px; margin: 0 0 1.6em;
  font-size: 1.08rem;
}
.lead-answer p:last-child { margin-bottom: 0; }

.note {
  background: var(--blue-lt); border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px; margin: 1.6em 0;
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--navy); }

/* ------------------------------------------------------------------ toc -- */
/* De inhoudsopgave staat onder de content en werkt daar als index terug omhoog. */
.toc {
  background: var(--white); border: 1px solid var(--border);
  border-top: 3px solid var(--sun);
  border-radius: var(--radius); padding: 20px 24px; margin: 2.6em 0 0;
}
.toc h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .7em; }
.toc ol { margin: 0; padding-left: 1.2em; font-size: .95rem; }
.toc ol ol { padding-left: 1.1em; margin-top: .3em; }
.toc li { margin-bottom: .35em; }
.toc a { color: var(--navy); text-decoration: none; }
.toc a:hover { color: var(--blue); text-decoration: underline; }

/* --------------------------------------------------------------- tabel -- */
.table-wrap {
  overflow-x: auto; margin: 1.6em 0;
  border-radius: var(--radius); border: 1px solid var(--border);
  max-width: 100%;
}
.table-wrap:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
table.data {
  width: 100%; min-width: 34rem;
  border-collapse: collapse; font-size: .96rem; background: #fff;
}
table.data caption {
  caption-side: top; text-align: left; padding: 12px 16px;
  font-weight: 700; color: var(--navy); background: var(--white);
  border-bottom: 1px solid var(--border);
}
table.data th, table.data td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--border); }
/* De bron levert th zonder thead, dus th wordt altijd als kopcel gestyled. */
table.data th { background: var(--navy); color: #fff; font-size: .9rem; }
table.data tbody tr:nth-child(even) { background: var(--white); }
table.data tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------- kaarten -- */
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;
}
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); position: relative;
}
.card h3 { font-size: 1.08rem; margin-bottom: .4em; }
.card p { color: var(--muted); font-size: .95rem; margin-bottom: 0; }
.card:hover { box-shadow: var(--shadow-md); border-color: var(--blue); }
.card a.card-link { text-decoration: none; }
.card a.card-link::after { content: ""; position: absolute; inset: 0; }

.feature-list { list-style: none; margin: 0 0 1.4em; padding: 0; }
.feature-list li { position: relative; padding-left: 30px; margin-bottom: .6em; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--sun-lt);
  box-shadow: inset 0 0 0 2px var(--sun);
}

/* Overzichtspagina: per hub de secties met al hun pagina's. */
.overview .ov-hub { margin-bottom: 2.6em; }
.overview .ov-hub > h2 {
  border-top: 3px solid var(--sun); padding-top: .5em; margin-bottom: .8em;
}
.overview h3 {
  font-size: 1rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 1.4em 0 .6em;
}
.overview .count {
  display: inline-block; background: var(--grey); color: var(--muted);
  border-radius: 100px; padding: 1px 9px; font-size: .78rem; font-weight: 600;
  vertical-align: middle;
}

/* linkgrid voor hub-pagina's */
.link-grid { columns: 2; column-gap: 32px; list-style: none; margin: 0; padding: 0; }
.link-grid li { break-inside: avoid; margin-bottom: .55em; }
.link-grid a { color: var(--navy); text-decoration: none; }
.link-grid a:hover { color: var(--blue); text-decoration: underline; }

/* ------------------------------------------------------------------ faq -- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 12px; overflow: hidden;
}
.faq details[open] { border-color: var(--sun); box-shadow: var(--shadow); }
.faq summary {
  padding: 16px 50px 16px 20px; cursor: pointer; position: relative;
  font-weight: 700; color: var(--navy); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--sun-dk); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > div, .faq details > p { padding: 0 20px 18px; margin: 0; color: var(--text); }

/* ------------------------------------------------------------- cta-band -- */
.cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff; padding: 44px 0; text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: .35em; }
.cta-band p { color: rgba(255, 255, 255, .85); max-width: 58ch; margin: 0 auto 22px; }
.cta-band .hero-cta { justify-content: center; }

/* --------------------------------------------------------------- footer -- */
.site-footer { background: var(--navy-3); color: rgba(255, 255, 255, .74); padding: 46px 0 0; font-size: .94rem; }
.site-footer h2, .site-footer h3 { color: #fff; font-size: 1rem; margin-bottom: .9em; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; padding-bottom: 36px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .5em; }
.site-footer a { color: rgba(255, 255, 255, .74); text-decoration: none; }
.site-footer a:hover { color: var(--sun); text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 16px 0; font-size: .86rem; }
.footer-bottom .container { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; }

/* --------------------------------------------------- mobiele sticky cta -- */
.mobile-cta { display: none; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  /* Het formulier hoort op mobiel direct onder de hero te staan, dus voor de
     content, terwijl het in de HTML na de content komt. */
  /* align-items: start uit de desktopregel werkt hier door, en laat de kolom
     zich naar zijn breedste kind voegen in plaats van naar zijn ouder. Een
     brede grafiek duwde daarmee de hele pagina horizontaal open. */
  .content-grid {
    display: flex; flex-direction: column; gap: 32px;
    align-items: stretch;
  }
  .sidebar { position: static; order: -1; align-self: auto; }
  .content-grid .prose { order: 0; max-width: none; min-width: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; order: 3; }
  .header-cta { display: none; }
  .lang-switch { order: 2; margin-left: auto; }
  .main-nav {
    display: none; order: 4;
    flex: 0 0 100%; margin: 0 0 12px;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav a { padding: 12px 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 0; }
  .header-inner { flex-wrap: wrap; padding-top: 10px; }

  /* Binnen het hamburgermenu staat het submenu gewoon open en ingesprongen. */
  .main-nav .has-submenu > a::after { display: none; }
  .main-nav .submenu {
    display: block; position: static; min-width: 0;
    background: transparent; border: 0; box-shadow: none;
    padding: 0 0 0 14px; margin: 0;
  }
  .main-nav .submenu a { font-size: .89rem; padding: 9px 10px; opacity: .85; }
  .main-nav .submenu-all a { opacity: 1; }

  .sidebar { max-height: none; overflow: visible; }

  body { padding-bottom: 64px; }
  .mobile-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .mobile-cta a {
    flex: 1; padding: 15px 8px; text-align: center;
    font-weight: 700; font-size: .97rem; text-decoration: none;
  }
  .mobile-cta .m-quote { background: var(--sun); color: var(--navy); }
}

@media (max-width: 620px) {
  html { font-size: 15.5px; }
  .section { padding: 38px 0; }
  .hero { padding: 34px 0 32px; }
  .link-grid { columns: 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .trust-bar-inner { justify-content: flex-start; }
}

@media print {
  .site-header, .mobile-cta, .sidebar, .cta-band, .site-footer { display: none; }
  body { font-size: 11pt; }
}