/* ==========================================================================
   Blue-C — componentbibliotheek
   Elke klasse die een pagina mag gebruiken staat hier. Bouw je een pagina,
   gebruik dan UITSLUITEND deze klassen; voeg geen inline styles toe en
   introduceer geen nieuwe klassenamen zonder ze hier vast te leggen.
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-accent-hover); }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Zichtbaar zodra de gebruiker tabt — eerste element in <body>. */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: calc(var(--z-dialog) + 1);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-ink);
  color: var(--c-white);
  border-radius: var(--radius);
  transition: top var(--t);
}
.skip-link:focus { top: var(--sp-4); color: var(--c-white); }

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

/* --- layout --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--surface { background: var(--c-surface); }
.section--ink { background: var(--c-ink); color: var(--c-white); }
.section--blue { background: var(--c-blue-dark); color: var(--c-white); }
.section--tint { background: var(--c-blue-tint); }

.section--ink h1, .section--ink h2, .section--ink h3,
.section--blue h1, .section--blue h2, .section--blue h3 { color: var(--c-white); }

.section-head { max-width: 46rem; margin-bottom: var(--sp-7); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--c-lime);
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.section-title { font-size: var(--fs-h2); }
/* Dezelfde klasse op een h1 (de paginakop) moet wel op h1-formaat staan. */
h1.section-title { font-size: var(--fs-h1); }
.section-sub { margin-top: var(--sp-4); color: var(--c-text-muted); font-size: 1.0625rem; }
.section--ink .section-sub, .section--blue .section-sub { color: rgb(255 255 255 / 75%); }

/* Lopende tekst: laat opeenvolgende alinea's ademen. */
.prose > * + * { margin-top: var(--sp-4); }
.prose h3 { margin-top: var(--sp-6); font-size: var(--fs-h3); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--sp-2); }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--split { grid-template-columns: 1fr; gap: var(--sp-7); }
@media (width >= 60rem) {
  .grid--split { grid-template-columns: 1fr 1fr; align-items: center; }
  .grid--split.is-reversed > :first-child { order: 2; }
}

/* --- knoppen -------------------------------------------------------------- */
/* Rechte hoeken: zo staan de knoppen ook op de oorspronkelijke site. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.875rem 2.25rem;
  border: 2px solid transparent;
  border-radius: 0;
  background: var(--c-blue);
  color: var(--c-white);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
}
.btn:hover { background: var(--c-blue-dark); color: var(--c-white); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--outline { background: transparent; border-color: var(--c-blue); color: var(--c-blue); }
.btn--outline:hover { background: var(--c-blue); color: var(--c-white); }

.btn--light { background: var(--c-white); color: var(--c-ink); }
.btn--light:hover { background: var(--c-lime); color: var(--c-ink); }

.btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: var(--c-white); color: var(--c-ink); }

/* De verzendknop van het formulier is zwart op de oorspronkelijke site. */
.btn--dark { background: var(--c-ink); color: var(--c-white); }
.btn--dark:hover { background: var(--c-blue-dark); color: var(--c-white); }
.btn--block { width: 100%; justify-content: center; }

/* --- header en navigatie --------------------------------------------------
   De oorspronkelijke site zet geen balk boven de pagina: het merkteken staat
   los in de linkerbovenhoek en de navigatie zweeft als matglazen pil rechts,
   allebei óver de heroafbeelding. Op pagina's zonder hero (de juridische
   teksten) kan dat niet, daar valt de header terug op een gewone balk. */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: var(--z-header);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
  padding-block: var(--sp-4);
}
/* Boven een hero staat de navigatie lager, zoals op de oorspronkelijke site. */
body.has-hero .header-inner { padding-block: var(--sp-7) var(--sp-4); }

body:not(.has-hero) .site-header {
  position: sticky;
  top: 0;
  background: rgb(244 244 244 / 92%);
  backdrop-filter: blur(10px);
  border-bottom: var(--border);
}

/* Het reviewpaneel in de leesversie maakt ruimte door <body> een padding te
   geven. Alles in de normale stroom schuift daardoor mee, maar deze header
   staat absoluut ten opzichte van het venster en blijft dus onder het paneel
   doorlopen. Vandaar dat hij apart wordt ingekort.
   De klasse rv-mode-on bestaat alleen wanneer dat paneel geladen is; op de
   gepubliceerde site doet deze regel niets. De maat volgt die van het paneel
   zelf (380 px breed, maar nooit meer dan 92% van het venster). */
body.rv-mode-on .site-header { right: min(380px, 92vw); }

/* v0.4 (Koen 12/10): het volledige logo linksboven, in dezelfde matglazen pil
   als de navigatie. De hero zelf draagt geen logo meer. */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.logo img { height: 58px; width: auto; }
body.has-hero .logo {
  padding: var(--sp-2) var(--sp-5);
  background: rgb(255 255 255 / 62%);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 14px rgb(9 9 9 / 8%);
}
@media (width < 30rem) { .logo img { height: 38px; } body.has-hero .logo { padding: var(--sp-2) var(--sp-4); } }
body:not(.has-hero) .logo img { height: 40px; }
.mobile-nav-head img { height: 36px; width: auto; }

.nav { display: none; }
@media (width >= 62rem) { .nav { display: block; } }

/* De matglazen pil. */
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: var(--sp-2) var(--sp-6);
  background: rgb(255 255 255 / 55%);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 14px rgb(9 9 9 / 8%);
}
body:not(.has-hero) .nav-list {
  background: none;
  border-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
  padding-inline: 0;
}

.nav-item { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  color: #3d4650;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  /* Wix gebruikte kleurovergang .4s ease naar het limoenaccent. */
  transition: color var(--t-slow);
}
.nav-link:hover,
.nav-link:focus-visible { color: var(--c-lime); }
.nav-link[aria-current="page"] { color: var(--c-blue); }

.nav-caret { width: 10px; height: 10px; transition: transform var(--t); }
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: 100%;
  left: -var(--sp-4);
  z-index: var(--z-dropdown);
  min-width: 15rem;
  padding: var(--sp-3);
  list-style: none;
  margin: 0;
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  font-size: var(--fs-small);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.dropdown a:hover { background: var(--c-blue-tint); color: var(--c-blue-dark); }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: none;
  border: var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
@media (width >= 62rem) { .menu-toggle { display: none; } }

/* Mobiel menu: <dialog> zodat focus-trap en Escape gratis meekomen. */
.mobile-nav {
  width: min(26rem, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: var(--sp-6) var(--gutter);
  border: 0;
  background: var(--c-surface);
}
.mobile-nav::backdrop { background: rgb(9 9 9 / 45%); }
.mobile-nav-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-6); }
.mobile-nav ul { list-style: none; padding: 0; margin: 0; }
.mobile-nav > ul > li { border-bottom: var(--border); }
.mobile-nav a {
  display: block;
  padding: var(--sp-4) 0;
  color: var(--c-ink);
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
}
.mobile-nav .submenu { padding-bottom: var(--sp-3); }
.mobile-nav .submenu a { padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); font-weight: 400; font-size: var(--fs-small); color: var(--c-text-muted); }
.mobile-nav a:hover { color: var(--c-blue); }

.icon-btn {
  display: inline-flex;
  padding: var(--sp-2);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* --- hero -----------------------------------------------------------------
   Foto over de volle breedte, met daarop één matglazen paneel: links het
   volledige woordmerk, rechts de paginatitel in merkblauw. De foto wordt niet
   verdonkerd — het paneel zorgt zelf voor het contrast onder de tekst. */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(84vh, 47rem);
  padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-8);
  background: var(--c-blue-dark);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

.hero-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  padding: var(--sp-7) clamp(1.5rem, 3.4vw, 3rem);
  background: rgb(236 243 248 / 55%);
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 24px;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px rgb(9 9 9 / 12%);
}
@media (width >= 62rem) {
  .hero-panel { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-8); }
}

.hero-lockup { width: min(100%, 30rem); height: auto; justify-self: center; }

.hero-title {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 0;
  text-align: center;
  color: var(--c-blue);
}
.hero-lead { margin-top: var(--sp-4); text-align: center; color: var(--c-blue-dark); font-size: clamp(1rem, 1.5vw, 1.1875rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); justify-content: center; }

/* --- citaatblok met illustratie -------------------------------------------
   Tekst links, lijnillustratie rechts, knop onder de tekst. */
.quote-split { display: grid; gap: var(--sp-7); align-items: center; }
@media (width >= 60rem) { .quote-split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }

.quote {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-blue-dark);
  text-align: center;
}
.quote p + p { margin-top: var(--sp-5); }
.quote-actions { margin-top: var(--sp-7); display: flex; justify-content: center; }
.quote-figure { display: grid; gap: var(--sp-6); }
.quote-figure::before { content: ""; height: 1px; background: var(--c-line); }
.turbines { width: 100%; height: auto; }
.wt { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.wt--lime { stroke: var(--c-lime); }
.wt--navy { stroke: var(--c-blue-dark); }

/* --- dienstenlijst -------------------------------------------------------
   De vorm van "The Blue-C way" op de oorspronkelijke site: donkerblauw paneel,
   doorlopende foto links, genummerde lijst rechts met limoenkleurige kapitalen
   en dunne scheidingslijnen ertussen. */
.service-list {
  background: var(--c-blue-dark);
  color: var(--c-white);
}
.service-list-inner { display: grid; }
@media (width >= 60rem) {
  .service-list-inner { grid-template-columns: 36% 1fr; align-items: stretch; }
}

/* Twee foto's onder elkaar, samen even hoog als de lijst ernaast. */
.service-list-media { display: grid; grid-auto-rows: 1fr; min-height: 18rem; }
.service-list-media img { width: 100%; height: 100%; object-fit: cover; }

.service-list-items { padding: var(--sp-5) var(--gutter); }
@media (width >= 60rem) { .service-list-items { padding: var(--sp-7) var(--sp-8); } }

.service-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4) var(--sp-5);
  align-items: start;
  padding-block: var(--sp-6);
  border-top: 1px solid rgb(255 255 255 / 22%);
  text-decoration: none;
  color: inherit;
  transition: background var(--t);
}
.service-row:last-child { border-bottom: 1px solid rgb(255 255 255 / 22%); }
.service-row:hover { background: rgb(255 255 255 / 6%); color: inherit; }

.service-row-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 500;
  transition: border-color var(--t), background var(--t);
}
.service-row:hover .service-row-num { border-color: var(--c-lime); background: rgb(183 204 0 / 12%); }

.service-row-title {
  align-self: center;
  color: var(--c-lime);
  font-size: clamp(1.125rem, 2.2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.service-row-text {
  grid-column: 2;
  color: rgb(255 255 255 / 88%);
  font-size: 1.0625rem;
}
@media (width < 36rem) {
  .service-row { grid-template-columns: 1fr; }
  .service-row-text { grid-column: 1; }
}

/* --- beeldtegels ----------------------------------------------------------
   Het rooster bovenaan de dienstenpagina's: foto met lichte sluier en een
   witte titel erop, elke tegel springt naar de bijbehorende sectie. */
.tiles { display: grid; gap: 4px; }
@media (width >= 48rem) { .tiles { grid-template-columns: 1fr 1fr; } }

.tile {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 8.5rem;
  padding: var(--sp-6) var(--sp-5);
  overflow: hidden;
  text-align: center;
  text-decoration: none;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(40 79 119 / 42%);
  transition: background var(--t);
}
.tile:hover img { transform: scale(1.04); }
.tile:hover::after { background: rgb(40 79 119 / 26%); }
.tile-title {
  position: relative;
  z-index: 1;
  color: var(--c-white);
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 400;
  line-height: 1.15;
  text-shadow: 0 1px 8px rgb(9 9 9 / 35%);
}

/* --- dienstensectie -------------------------------------------------------
   Donkerblauw vlak met een foto links die over een wit tekstpaneel rechts
   heen valt. Onder 60rem stapelen ze gewoon. */
.svc { background: var(--c-blue-dark); padding-block: var(--section-y); }
.svc + .svc { padding-top: 0; }
.svc-inner { display: grid; gap: var(--sp-5); }
.svc-media img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 14px 40px rgb(9 9 9 / 28%); }

/* Deze basisregel moet VOOR de mediaquery staan. De verkorte schrijfwijze
   `padding` overschrijft namelijk elke `padding-left` met dezelfde
   specificiteit die eerder in het bestand staat, en dan begint de tekst weer
   achter de foto. */
.svc-panel { background: var(--c-white); padding: clamp(1.75rem, 3.4vw, 3.25rem); }

/* Breed scherm: de foto beslaat 40% en het paneel begint op 32%, zodat ze
   elkaar 8% overlappen. De binnenmarge van het paneel (21% van zijn eigen
   breedte, dus 14% van de container) zet de tekst op 46% — ruim voorbij de
   rechterrand van de foto op 40%. Zonder die marge begint de tekst precies
   op de fotorand en plakt ze ertegenaan. */
@media (width >= 60rem) {
  .svc-inner { grid-template-columns: 40% 1fr; align-items: start; gap: 0; }
  .svc-media { grid-column: 1; grid-row: 1; margin-top: var(--sp-7); z-index: 1; }
  .svc-panel { grid-column: 1 / -1; grid-row: 1; margin-left: 32%; padding-left: 21%; }

  /* Gespiegeld: foto rechts, tekst links, dezelfde tussenruimte. */
  .svc--flip .svc-inner { grid-template-columns: 1fr 40%; }
  .svc--flip .svc-media { grid-column: 2; grid-row: 1; }
  .svc--flip .svc-panel {
    margin-left: 0;
    margin-right: 32%;
    padding-left: clamp(1.75rem, 3.4vw, 3.25rem);
    padding-right: 21%;
  }
}
.svc-title { font-size: clamp(1.5rem, 3vw, 2.35rem); font-weight: 400; color: var(--c-blue-dark); }
.svc-sub { margin-top: var(--sp-3); font-size: clamp(1rem, 1.7vw, 1.25rem); color: var(--c-blue); }
.svc-body { margin-top: var(--sp-6); color: var(--c-blue-dark); }
.svc-body p + p { margin-top: var(--sp-4); }
.svc-body strong { font-weight: 600; }
.svc-body ul { margin-top: var(--sp-4); padding-left: 1.15rem; }
.svc-body li + li { margin-top: var(--sp-2); }
.svc-actions { margin-top: var(--sp-6); }

/* Subthema's binnen een dienstenblok (Management- en Operational Consulting). */
.svc-subs { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
.svc-sub-title { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600; color: var(--c-blue-dark); }
.svc-subs p { margin-top: var(--sp-2); color: var(--c-blue-dark); }

/* --- tussenblok met oproep ------------------------------------------------
   Foto over de volle breedte met een lichte sluier, kop en knop gecentreerd. */
.interstitial { position: relative; padding-block: clamp(3rem, 6vw, 5rem); text-align: center; overflow: hidden; }
.interstitial-media { position: absolute; inset: 0; z-index: 0; }
.interstitial-media img { width: 100%; height: 100%; object-fit: cover; }
.interstitial-media::after { content: ""; position: absolute; inset: 0; background: rgb(228 236 242 / 62%); }
.interstitial .container { position: relative; z-index: 1; }
.interstitial-title { font-size: clamp(1.5rem, 3.2vw, 2.5rem); font-weight: 400; line-height: 1.2; color: var(--c-blue-dark); }
.interstitial .btn { margin-top: var(--sp-6); }

/* Tekstlink met dubbele punthaak, zoals onderaan elk dienstenblok. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-blue-dark);
  font-size: 1.0625rem;
  text-decoration: none;
  transition: color var(--t), gap var(--t);
}
.link-arrow:hover { color: var(--c-blue); gap: var(--sp-4); }
.link-arrow svg { width: 20px; height: 12px; flex: none; }

/* --- missie / visie -------------------------------------------------------
   Twee matglazen kaarten op een lichtgewassen achtergrondfoto. */
.mv { position: relative; padding-block: var(--section-y); overflow: hidden; }
.mv-media { position: absolute; inset: 0; z-index: 0; }
.mv-media img { width: 100%; height: 100%; object-fit: cover; }
.mv-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(224 234 241 / 88%), rgb(214 227 237 / 82%));
}

.mv-grid { position: relative; z-index: 1; display: grid; gap: var(--sp-6); }
@media (width >= 60rem) { .mv-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }

.mv-block {
  padding: var(--sp-7) clamp(1.5rem, 3vw, 2.75rem);
  background: rgb(255 255 255 / 58%);
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  text-align: center;
  color: var(--c-blue-dark);
}
.mv-title {
  margin-bottom: var(--sp-5);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--c-blue-dark);
}
.mv-block p + p { margin-top: var(--sp-4); }
.mv-block strong { font-weight: 600; }

/* --- statistieken ---------------------------------------------------------
   Donkerblauw vlak, kop links, cijfers rechts in twee kolommen. Elke waarde
   staat tussen een dikke lijn erboven en een dunne eronder. */
.results { padding-block: var(--section-y); background: var(--c-blue-dark); color: var(--c-white); }
.results-inner { display: grid; gap: var(--sp-7); }
@media (width >= 60rem) {
  .results-inner { grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr); gap: var(--sp-9); align-items: start; }
}
.results-title { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.1; color: var(--c-white); }

.stats { display: grid; gap: var(--sp-6) var(--sp-8); }
@media (width >= 40rem) { .stats { grid-template-columns: 1fr 1fr; } }
.stat {
  padding-block: var(--sp-5) var(--sp-6);
  border-top: 6px solid var(--c-white);
  border-bottom: 1px solid rgb(255 255 255 / 45%);
}
.stat-value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 300;
  line-height: 1;
  color: var(--c-white);
}
.stat-label { display: block; margin-top: var(--sp-4); font-size: var(--fs-small); color: rgb(255 255 255 / 88%); }

/* Lichte variant: zo staat hetzelfde blok op de dienstenpagina's. */
.results--light { background: var(--c-surface); }
.results--light .results-title { color: var(--c-blue-dark); font-weight: 400; }
.results--light .stat { border-top-color: var(--c-lime); border-bottom-color: var(--c-line); }
.results--light .stat-value { color: var(--c-lime); }
.results--light .stat-label { color: var(--c-blue-dark); font-weight: 600; }

/* --- genummerde kernpunten 01-03 ------------------------------------------
   Licht paneel op een achtergrondfoto, drie kolommen gescheiden door een
   dunne lijn, met het nummer groot in merkblauw. */
.numbers { position: relative; padding-block: var(--section-y); overflow: hidden; }
.numbers-media { position: absolute; inset: 0; z-index: 0; }
.numbers-media img { width: 100%; height: 100%; object-fit: cover; }
.numbers-media::after { content: ""; position: absolute; inset: 0; background: rgb(40 79 119 / 38%); }

.numbers-panel { position: relative; z-index: 1; display: grid; background: rgb(246 249 251 / 94%); }
@media (width >= 60rem) { .numbers-panel { grid-template-columns: repeat(3, 1fr); } }

.number-item { padding: clamp(1.5rem, 3vw, 2.75rem); }
.number-item + .number-item { border-top: 1px solid var(--c-line); }
@media (width >= 60rem) {
  .number-item + .number-item { border-top: 0; border-left: 1px solid var(--c-line); }
}
.number-value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--c-blue);
}
.number-item p { margin-top: var(--sp-4); color: var(--c-blue-dark); }
.number-item p + p { margin-top: var(--sp-3); }

/* --- accordion ------------------------------------------------------------ */
.accordion { display: grid; gap: var(--sp-3); }
.accordion-item { background: var(--c-surface); border: var(--border); border-radius: var(--radius); overflow: hidden; }
.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) var(--sp-6);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 600;
  /* Wix zette de hover van accordion-koppen op het merkblauw. */
  transition: color var(--t);
}
.accordion-header:hover { color: var(--c-blue); }
.accordion-icon { flex: none; width: 14px; height: 14px; transition: transform var(--t); }
.accordion-header[aria-expanded="true"] .accordion-icon { transform: rotate(180deg); }
.accordion-panel { padding: 0 var(--sp-6) var(--sp-6); color: var(--c-text-muted); }
.accordion-panel[hidden] { display: none; }

/* --- carrousel (success stories) ------------------------------------------ */
.carousel { position: relative; }
.carousel-viewport { overflow: hidden; }
.carousel-track { display: flex; transition: transform var(--t-slow); }
.carousel-slide { flex: 0 0 100%; padding-inline: var(--sp-2); }
.carousel-controls { display: flex; gap: var(--sp-3); align-items: center; justify-content: center; margin-top: var(--sp-6); }
.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--c-surface);
  border: 2px solid var(--c-line);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.carousel-btn:hover { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); }
.carousel-dots { display: flex; gap: var(--sp-2); }
.carousel-dot { width: 9px; height: 9px; padding: 0; background: var(--c-line); border: 0; border-radius: 50%; cursor: pointer; transition: background var(--t); }
.carousel-dot.is-active { background: var(--c-blue); }

.testimonial { padding: var(--sp-7); background: var(--c-surface); border-radius: var(--radius-lg); }
.testimonial-quote { font-family: var(--font-heading); font-size: clamp(1.0625rem, 2vw, 1.375rem); font-weight: 500; line-height: 1.5; }
.testimonial-meta { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--c-text-muted); }
.testimonial-name { display: block; font-weight: 600; color: var(--c-ink); }

/* --- oprichters -----------------------------------------------------------
   Ronde portretten die over donkerblauwe kaarten heen vallen, samen op een
   paneel met achtergrondfoto. */
.founders-inner { display: grid; gap: var(--sp-7); }
@media (width >= 62rem) {
  .founders-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr); align-items: center; gap: var(--sp-8); }
}
.founders-title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 400; color: var(--c-blue-dark); }
.founders-lead { margin-top: var(--sp-5); font-size: clamp(1rem, 1.7vw, 1.25rem); color: var(--c-blue); }

.founders-panel {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  padding: clamp(1.25rem, 2.6vw, 2.25rem);
  border-radius: 20px;
  overflow: hidden;
}
.founders-panel-media { position: absolute; inset: 0; z-index: 0; }
.founders-panel-media img { width: 100%; height: 100%; object-fit: cover; }

.founder-card { position: relative; z-index: 1; display: grid; gap: var(--sp-4); align-items: center; justify-items: center; }
@media (width >= 48rem) { .founder-card { grid-template-columns: auto 1fr; gap: 0; } }

.founder-photo {
  position: relative;
  z-index: 2;
  width: clamp(8rem, 16vw, 15rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.founder-body {
  width: 100%;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  background: var(--c-blue-dark);
  border-radius: 16px;
  color: rgb(255 255 255 / 92%);
}
@media (width >= 48rem) {
  .founder-body { margin-left: clamp(-3.5rem, -4vw, -2rem); padding-left: clamp(4rem, 6vw, 5.5rem); }
}
.founder-name { color: var(--c-lime); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 400; }
.founder-bio { margin-top: var(--sp-3); font-size: var(--fs-small); line-height: 1.6; }
.founder-mail { display: inline-block; margin-top: var(--sp-4); color: var(--c-lime); text-decoration: none; }
.founder-mail:hover { color: var(--c-white); }

/* --- projectcase ---------------------------------------------------------- */
.case-block { padding-top: var(--sp-6); border-top: 2px solid var(--c-line); }
.case-label { font-family: var(--font-heading); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-blue); }
.case-block h3 { margin-top: var(--sp-2); font-size: var(--fs-h3); }
.case-block p { margin-top: var(--sp-4); }

/* --- media ---------------------------------------------------------------- */
.media { overflow: hidden; border-radius: var(--radius-lg); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.media--zoom:hover img { transform: scale(1.04); }
.media--wide { aspect-ratio: 16 / 9; }
.media--square { aspect-ratio: 1 / 1; }
.media--portrait { aspect-ratio: 3 / 4; }

/* --- formulier ------------------------------------------------------------ */
.form { display: grid; gap: var(--sp-5); max-width: 34rem; }
.form-field { display: grid; gap: var(--sp-2); }
.form-label { font-family: var(--font-heading); font-size: var(--fs-small); font-weight: 600; }
.form-label .req { color: var(--c-lime); }
.form-input,
.form-textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--radius);
  transition: border-color var(--t), box-shadow var(--t);
}
.form-input:focus,
.form-textarea:focus { outline: 0; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgb(29 116 187 / 20%); }
.form-textarea { min-height: 8rem; resize: vertical; }
.form-note { font-size: var(--fs-small); color: var(--c-text-muted); }
/* Honeypot tegen spambots: onzichtbaar voor mensen, ingevuld door bots. */
.form-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* --- footer ---------------------------------------------------------------
   Eén matglazen paneel op een achtergrondfoto, in tweeën gedeeld: links de
   oproep en de bedrijfsgegevens, rechts het formulier. */
.site-footer { position: relative; padding-block: var(--section-y); background: var(--c-blue-dark); overflow: hidden; }
.footer-media { position: absolute; inset: 0; z-index: 0; }
.footer-media img { width: 100%; height: 100%; object-fit: cover; }

.footer-panel {
  position: relative;
  z-index: 1;
  display: grid;
  background: rgb(240 245 249 / 84%);
  border: 1px solid rgb(255 255 255 / 50%);
  backdrop-filter: blur(12px);
  color: var(--c-blue-dark);
}
@media (width >= 62rem) { .footer-panel { grid-template-columns: 1fr 1fr; } }

.footer-cta, .footer-form-side { padding: clamp(1.75rem, 3.6vw, 3.5rem); }
@media (width >= 62rem) { .footer-form-side { border-left: 1px solid rgb(40 79 119 / 30%); } }

.footer-cta-title {
  font-size: clamp(1.9rem, 3.8vw, 3.1rem);
  font-weight: 400;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--c-blue-dark);
}
.footer-rule { height: 1px; margin-block: var(--sp-7) var(--sp-6); background: rgb(40 79 119 / 55%); }

.company-name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--c-blue-dark); }
.footer-contact { display: grid; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-5); }
@media (width >= 40rem) { .footer-contact { grid-template-columns: 1fr 1fr; } }
.footer-contact address { font-style: normal; }
.footer-contact a, .footer-contact address, .footer-contact p {
  color: var(--c-blue);
  font-weight: 600;
  line-height: 1.75;
  text-decoration: none;
}
.footer-contact a:hover { color: var(--c-blue-dark); }

.footer-form-title { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 400; color: var(--c-blue); line-height: 1.2; margin-bottom: var(--sp-6); }
.site-footer .form { max-width: none; gap: var(--sp-4); }
.site-footer .form-input, .site-footer .form-textarea { background: rgb(255 255 255 / 55%); border-color: rgb(40 79 119 / 45%); }

.footer-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  justify-content: space-between;
  margin-top: var(--sp-6);
  font-size: var(--fs-small);
  color: rgb(255 255 255 / 85%);
}
.footer-meta a { color: rgb(255 255 255 / 85%); text-decoration: none; transition: color var(--t-slow); }
.footer-meta a:hover { color: var(--c-lime); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }

/* --- utilities -----------------------------------------------------------
   Genoeg om pagina's op te bouwen zonder ooit een inline style te schrijven.
   Staat een afstand er niet bij, gebruik dan een bestaand component. */
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-7 { margin-bottom: var(--sp-7); }

.text-center { text-align: center; }
.text-muted { color: var(--c-text-muted); }
.text-lime { color: var(--c-lime); }
.measure { max-width: 42rem; }
.measure-center { max-width: 42rem; margin-inline: auto; }

.stack { display: grid; gap: var(--sp-4); align-content: start; }
.stack--lg { display: grid; gap: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.cluster--center { justify-content: center; }

/* --- v0.4 ------------------------------------------------------------------
   Demobeelden (stills uit de WattsUp-film) hebben een witte achtergrond: een
   dunne rand houdt ze los van een witte sectie. */
.media--frame { border: 1px solid var(--c-line); background: var(--c-white); }

/* Inleidende zin boven de dienstenrijen, op de donkerblauwe achtergrond. */
.service-list-intro { max-width: 42rem; margin-bottom: var(--sp-6); color: rgb(255 255 255 / 88%); font-size: 1.0625rem; }

/* De zes hoofdstukken op /wattsup/: nummer links, tekst rechts. */
.chapter-list { display: grid; gap: var(--sp-5); counter-reset: chapter; list-style: none; padding: 0; }
.chapter-list li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--sp-4); align-items: baseline; }
.chapter-list li::before {
  counter-increment: chapter;
  content: counter(chapter, decimal-leading-zero);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--c-blue);
}
.chapter-list strong { color: var(--c-blue-dark); }

/* --- tekeningen "what we do" (v0.4) ---------------------------------------
   Drie eigen SVG's in src/templates/partials/viz-*.html. Ze tonen het verhaal
   van de demo zonder de demo zelf. De losse bronnen zweven; de rest bouwt
   zich een keer op. --d is de vertraging per onderdeel. Wie minder beweging vraagt, krijgt de
   eindtoestand zonder animatie. */
.viz { display: block; width: 100%; height: 100%; background: var(--c-white); font-family: var(--font-body); }
.viz-chip { fill: var(--c-white); stroke: var(--c-blue-tint); stroke-width: 1.2; }
.viz-chip--alert { stroke: var(--c-alert); stroke-opacity: .45; }
.viz-icon { fill: var(--c-blue-tint); }
.viz-wave { fill: none; stroke: var(--c-blue); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.viz-dot-alert { fill: var(--c-alert); }
.viz-node { fill: var(--c-white); stroke: var(--c-blue); stroke-width: 1.2; }
.viz-node--root { fill: var(--c-blue-dark); stroke: var(--c-blue-dark); }
.viz-link { fill: none; stroke: var(--c-blue); stroke-width: 1.2; }
.viz-badge { fill: var(--c-blue); }
.viz-badge--alert { fill: var(--c-alert); }
.viz-badge--missing { fill: var(--c-white); stroke: var(--c-ink-soft); stroke-dasharray: 2 2; }
.viz-axis { fill: none; stroke: var(--c-line); stroke-width: 1.2; }
.viz-curve { fill: none; stroke: var(--c-blue-dark); stroke-width: 2.2; stroke-linejoin: round; }
.viz-now { stroke: var(--c-alert); stroke-width: 1.2; }
.viz-scenario { fill: none; stroke: var(--c-blue); stroke-width: 1.6; stroke-dasharray: 4 3; }
.viz-scenario--alert { stroke: var(--c-alert); }
.viz-text { font-size: 9px; fill: var(--c-ink); }
.viz-text--small { font-size: 7.5px; fill: var(--c-ink-soft); }
.viz-text--light { fill: var(--c-white); }
.viz-text--center { text-anchor: middle; }
.viz-text--end { text-anchor: end; }

.viz-float { animation: viz-float 4s ease-in-out var(--d, 0s) infinite alternate; }

/* Opbouw: site.js zet "viz--armed" op elke tekening (begintoestand) en
   "viz--play" zodra ze in beeld komt; dan bouwt ze zich een keer op en blijft
   staan. Zonder JavaScript is de tekening meteen af. */
.viz--armed .viz-grow { opacity: 0; }
.viz--armed .viz-draw { stroke-dasharray: 100; stroke-dashoffset: 100; }
.viz--play .viz-grow { animation: viz-grow .6s ease-out calc(var(--d, 0s) * .6) both; }
.viz--play .viz-draw { animation: viz-draw 1.4s ease-out both; }

@keyframes viz-float { from { transform: translate(0, 0); } to { transform: translate(3px, -5px); } }
@keyframes viz-grow { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes viz-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .viz-float, .viz--play .viz-grow, .viz--play .viz-draw { animation: none; }
  .viz--armed .viz-grow { opacity: 1; }
  .viz--armed .viz-draw { stroke-dashoffset: 0; }
}

/* --- het filmpje (partials/story-film.html) --------------------------------
   site.js laat een logo van rechts naar links vegen: wat het raakt wordt
   opgezogen, wat erachter ligt komt tevoorschijn. De actieve stap eronder
   krijgt .is-active.
   Zonder "story--armed" (geen JS, of minder beweging) staat scène C er af en
   zijn alle stappen gewoon zwart. */
.story-stage { max-width: 52rem; margin-inline: auto; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-white); }
.story-svg { height: auto; }
.story-svg .viz-text { font-size: 10px; }
.story-svg .viz-text--small { font-size: 8.5px; }

.story-steps { display: grid; gap: var(--sp-5); max-width: 52rem; margin: var(--sp-6) auto 0; padding: 0; list-style: none; }
@media (width >= 48rem) { .story-steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.story-step p { margin-top: var(--sp-2); }
.story-step, .story-step .case-label { transition: color .4s ease; }
.story--armed .story-step, .story--armed .story-step .case-label { color: #a3a3a3; }
.story--armed .story-step.is-active { color: var(--c-ink); }
.story--armed .story-step.is-active .case-label { color: var(--c-lime); }

/* Zonder JavaScript: enkel het eindbeeld (scène C), niet alles over elkaar. */
.story:not(.story--armed) .s-a,
.story:not(.story--armed) .s-b,
.story:not(.story--armed) .s-logo { display: none; }

/* Als het filmpje loopt (site.js, story-film) is elk onderdeel eerst weg.
   .is-in = zichtbaar; .is-out = opgezogen door het vegende logo. Wat net
   tevoorschijn komt, schuift een stukje mee naar links, achter het logo aan. */
.story--armed .s-chip,
.story--armed .s-b > g,
.story--armed .s-c > * { opacity: 0; transform: translateX(22px) scale(.85); }
.story-svg .s-chip,
.story-svg .s-b > g,
.story-svg .s-c > * {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .45s ease, transform .45s ease, stroke-dashoffset 1.4s ease-out;
}
.story--armed .story-svg .is-in { opacity: 1; transform: none; }
.story--armed .story-svg .is-out { opacity: 0; transform: scale(.05); transition-duration: .3s; }
.story--armed .story-svg [data-after].is-in { transition-delay: var(--d, 0s); }

.story--armed .s-draw { stroke-dasharray: 100; stroke-dashoffset: 100; }
.story--armed .s-draw.is-drawn { stroke-dashoffset: 0; }

/* het vegende logo met een vaag spoor */
.s-logo { opacity: 0; transition: opacity .2s ease; }
.s-logo.is-sweeping { opacity: 1; }
.s-logo-wattsup { display: none; }
.s-logo.is-wattsup .s-logo-bluec { display: none; }
.s-logo.is-wattsup .s-logo-wattsup { display: inline; }
.story-logo-name { font-family: var(--font-heading); font-size: 9px; font-weight: 700; fill: var(--c-blue-dark); text-anchor: middle; }
.story-halo { fill: var(--c-white); stroke: var(--c-blue-tint); stroke-width: 2; filter: drop-shadow(0 2px 6px rgb(40 79 119 / 25%)); }
.story-trail { fill: var(--c-blue-tint); opacity: .5; }

/* "Minder beweging" (bv. Windows met animaties uit): de scènes wisselen nog,
   maar zonder vegen, vliegen of vervagen. */
.story--calm .story-svg *, .story--calm .story-step { transition: none !important; animation: none !important; }

/* Groot WattsUp-beeld op home, en een zichtbare kop boven de aanpak (v0.4). */
.wattsup-visual { max-width: 60rem; margin-inline: auto; }
.numbers-head { position: relative; z-index: 1; margin-bottom: var(--sp-6); }
.numbers-title { color: var(--c-white); font-size: var(--fs-h2); text-shadow: 0 1px 12px rgb(0 0 0 / 35%); }
/* Altijd twee kolommen vanaf tabletbreedte: vier kaarten = netjes 2x2. */
.grid--2x2 { grid-template-columns: 1fr; }
@media (width >= 48rem) { .grid--2x2 { grid-template-columns: 1fr 1fr; } }
/* Wettelijke vermeldingen (WVV art. 2:20): klein en grijs, onderaan. */
.footer-legal { display: inline-block; margin-top: var(--sp-2); font-size: .75rem; opacity: .75; }

/* --- hero v0.4 (Koen 12/10): de foto moet zichtbaar zijn ------------------
   Geen glaspaneel meer over de volle breedte, maar een compact paneel
   onderaan. Standaard links; .hero--right zet het rechts, als het onderwerp
   van de foto links onderaan staat (bv. de RIB op /wattsup/). */
.hero { align-items: end; min-height: min(90vh, 52rem); }
.hero-panel {
  width: min(100% - 2 * var(--gutter), 40rem);
  margin-inline: max(var(--gutter), calc((100% - var(--container)) / 2)) auto;
  padding: var(--sp-6) clamp(1.25rem, 2.6vw, 2.25rem);
  gap: var(--sp-4);
  background: rgb(236 243 248 / 78%);
}
@media (width >= 62rem) { .hero-panel { grid-template-columns: 1fr; gap: var(--sp-4); } }
.hero--right .hero-panel { margin-inline: auto max(var(--gutter), calc((100% - var(--container)) / 2)); }
.hero-lockup { width: min(100%, 14rem); justify-self: start; }
.hero-title { text-align: left; font-size: clamp(1.75rem, 3vw, 2.6rem); }
.hero-lead { text-align: left; }
@media (width < 40rem) {
  .hero-panel { padding: var(--sp-5); gap: var(--sp-3); }
  .hero-lockup { width: 9rem; }
  .hero-title { font-size: 1.5rem; }
  .hero-lead { margin-top: var(--sp-2); font-size: .95rem; }
}
/* Hero op home (hero-windfarm-drama): turbine en schip staan op ongeveer 42 %;
   op een smal scherm de uitsnede daarheen schuiven, anders vallen ze weg. */
.hero--sunset .hero-media img { object-position: 42% 50%; }
/* Op home staat enkel de kernzin in het paneel: het paneel krimpt mee. */
.hero--sunset .hero-panel { width: fit-content; max-width: min(100% - 2 * var(--gutter), 40rem); }