/* ============================================================
   IXTE homepage, designproef fase 1
   Tokens en basis
   ============================================================ */

@font-face {
  font-family: "Campton";
  src: url("assets/fonts/CamptonLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Campton";
  src: url("assets/fonts/CamptonBook.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Campton";
  src: url("assets/fonts/CamptonMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Campton";
  src: url("assets/fonts/CamptonSemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Campton";
  src: url("assets/fonts/CamptonMediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --nachtblauw: #004454;
  --nachtblauw-diep: #00323f;
  --leisteen: #80a1a9;
  --ijslicht: #dff0f5;
  --signaalgroen: #19db71;
  --wit: #ffffff;

  --tekst-op-licht: var(--nachtblauw);
  --tekst-op-donker: var(--wit);
  --tekst-zacht-op-donker: rgba(223, 240, 245, 0.82);

  --maat-h1: clamp(3rem, 6.5vw, 5.25rem);
  --maat-h2: clamp(2rem, 4vw, 3rem);
  --maat-h3: 1.375rem;
  --maat-body: 1.0625rem;
  --maat-klein: 0.9375rem;
  --maat-eyebrow: 0.8125rem;
  --maat-kopcijfer: clamp(1.75rem, 2.8vw, 2.5rem);

  --sectie-ruimte: clamp(4rem, 7vw, 7rem);
  --brand-schuin: -27deg;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: "Campton", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--maat-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--tekst-op-licht);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.15;
}

h1 {
  font-size: var(--maat-h1);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

h2 {
  font-size: var(--maat-h2);
  letter-spacing: -0.01em;
  max-width: 22ch;
}

h3 {
  font-size: var(--maat-h3);
  font-weight: 500;
}

p {
  max-width: 34rem;
}

a {
  color: inherit;
}

/* Donkere ring op licht, groene ring op donker (WCAG 1.4.11) */
:focus-visible {
  outline: 2px solid var(--nachtblauw);
  outline-offset: 3px;
}

.hero :focus-visible,
.sectie-factoren :focus-visible,
.sectie-ervaring :focus-visible,
.sectie-kennismaking :focus-visible,
.dienst-donker :focus-visible,
.footer :focus-visible {
  outline-color: var(--signaalgroen);
}

::selection {
  background: var(--nachtblauw);
  color: var(--wit);
}

.skiplink {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  background: var(--wit);
  color: var(--nachtblauw);
  font-size: var(--maat-klein);
  font-weight: 500;
  text-decoration: none;
  padding: 0.7em 1.4em;
  border-radius: 999px;
  translate: 0 -200%;
}
.skiplink:focus-visible {
  translate: 0 0;
}

.binnen {
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.sectie {
  padding-block: var(--sectie-ruimte);
}

/* Accentwoord in koppen: het enige groen in lopende koppen */
.accent {
  font-style: normal;
  color: var(--signaalgroen);
}

/* Eyebrow met parallellogram-marker uit de vormentaal */
.eyebrow {
  font-size: var(--maat-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 0.55em;
  height: 0.8em;
  background: url("assets/img/parallellogram-groen.svg") no-repeat center / contain;
}

/* ============================================================
   Knoppen en links
   ============================================================ */

/* Knoppen een-op-een naar de staging: pilvorm, gap 8px,
   padding 8/17px, groen parallellogram-vlaggetje rechts van het label */
.knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--maat-klein);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 8px 17px;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.knop::after {
  content: "";
  flex: none;
  width: 14px;
  height: 18px;
  background: url("assets/img/parallellogram-groen.svg") no-repeat center / contain;
}

/* Primair: nachtblauw gevuld, witte tekst */
.knop-primair {
  background: var(--nachtblauw);
  color: var(--wit);
  border-color: var(--nachtblauw);
}
.knop-primair:hover {
  background: var(--nachtblauw-diep);
  border-color: var(--nachtblauw-diep);
}

/* Primair op donkere vlakken: wit gevuld, nachtblauwe tekst */
.knop-invers {
  background: var(--wit);
  color: var(--nachtblauw);
  border-color: var(--wit);
}
.knop-invers:hover {
  background: var(--ijslicht);
  border-color: var(--ijslicht);
}

/* Secundair: transparant met 2px groene rand.
   Nu alleen op donker in gebruik; deze lichte variant is
   bedoeld voor vervolgpagina's. */
.knop-secundair {
  background: transparent;
  color: var(--nachtblauw);
  border-color: var(--signaalgroen);
}
.knop-secundair:hover {
  background: rgba(25, 219, 113, 0.08);
}

/* Secundair op donkere vlakken */
.knop-secundair-donker {
  background: transparent;
  color: var(--wit);
  border-color: var(--signaalgroen);
}
.knop-secundair-donker:hover {
  background: rgba(255, 255, 255, 0.07);
}

.tekstlink {
  display: inline-block;
  align-self: start;
  font-size: var(--maat-klein);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2em;
}
.tekstlink::after {
  content: "\2192";
  margin-left: 0.5em;
  display: inline-block;
  transition: transform 160ms ease;
}
.tekstlink:hover::after {
  transform: translateX(0.25em);
}

/* ============================================================
   Navigatie
   ============================================================ */

.nav {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 10;
  padding-block: 1.4rem;
}

.nav-binnen {
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav-logo img {
  width: 111px;
  height: auto;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.nav-lijst {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  list-style: none;
}

.nav-lijst > li {
  position: relative;
}

.nav-lijst a {
  font-size: var(--maat-klein);
  font-weight: 500;
  color: var(--wit);
  text-decoration: none;
  padding-block: 0.5rem;
}

/* Hoofdmenu-items blijven op een regel; anders breekt "Over Ons" op
   smallere laptopschermen in tweeen zodra de balk krap wordt */
.nav-lijst > li > a {
  white-space: nowrap;
}

.nav-lijst > li > a:hover,
.nav-lijst > li > a[aria-current="page"] {
  border-bottom: 2px solid var(--wit);
}

/* Dropdown, CSS-only */
.submenu {
  position: absolute;
  top: 100%;
  left: -1.25rem;
  min-width: 15rem;
  list-style: none;
  background: var(--wit);
  border-radius: 2px;
  box-shadow: 0 18px 44px rgba(0, 40, 50, 0.22);
  padding-block: 0.6rem;
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition: opacity 160ms ease, translate 160ms ease, visibility 160ms;
}
.heeft-sub:hover .submenu,
.heeft-sub:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
.submenu a {
  display: block;
  color: var(--nachtblauw);
  padding: 0.5rem 1.25rem;
}
.submenu a:hover {
  background: var(--ijslicht);
}

/* Ingang naar het IXTE-platform. Bewust lichter dan de kennismakingsknop:
   het is een toegangspunt voor klanten, geen conversiedoel. Het groene
   icoon maakt het herkenbaar als eigen omgeving. */
.nav-platform {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  font-size: var(--maat-klein);
  font-weight: 500;
  color: var(--wit);
  text-decoration: none;
  white-space: nowrap;
}

.nav-platform svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--signaalgroen);
}

.nav-platform:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--signaalgroen);
}

/* Op smallere laptopschermen staat de balk met de platformingang erbij krap.
   Daar knijpen we de tussenruimtes in plaats van de menu-items te laten
   afbreken over twee regels. */
@media (min-width: 64.0625rem) and (max-width: 78rem) {
  .nav-binnen {
    gap: 1.25rem;
  }

  .nav-menu {
    gap: 1.35rem;
  }

  .nav-lijst {
    gap: 1.15rem;
  }
}

.menu-schakel,
.menu-knop {
  display: none;
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  min-height: min(92vh, 60rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay naar Ideno-model: een kleur, alleen de dekking varieert,
   donkerst onderin waar de tekst staat */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 50, 63, 0.97) 0%,
    rgba(0, 50, 63, 0.82) 40%,
    rgba(0, 50, 63, 0.55) 100%
  );
}

.hero-inhoud {
  position: relative;
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  padding-block: 10rem 4.5rem;
  color: var(--tekst-op-donker);
}

.hero-inhoud h1 {
  max-width: 13ch;
}

.hero-lead {
  margin-top: 1.75rem;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
  max-width: 36ch;
}

.hero-tekst {
  margin-top: 1.25rem;
  color: var(--tekst-zacht-op-donker);
}

/* Een accent in de hero valt alleen op als het ook de volle witwaarde
   krijgt; de alinea zelf staat op de zachte tint */
.hero-tekst strong {
  color: var(--tekst-op-donker);
}

.knoppenrij {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ============================================================
   Subpagina-componenten
   ============================================================ */

/* Compactere hero voor subpagina's */
.paginahero {
  min-height: min(58vh, 40rem);
}

.paginahero .hero-inhoud {
  padding-block: 8rem 4.5rem;
}

/* Eyebrow boven de paginakop in de hero */
.hero-eyebrow {
  margin-bottom: 1.5rem;
  color: var(--wit);
}

/* Sectiekop: kop met de introregel er direct onder, niet in een losse kolom */
.sectiekop {
  max-width: 44rem;
}

.sectiekop p {
  margin-top: 1.5rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}

.sectiekop p + p {
  margin-top: 1em;
}

/* Afsluitende tekstsectie: alleen een kop met korte toelichting.
   Krijgt minder ruimte dan een sectie met kaarten of kolommen,
   anders oogt het blok hol tussen de zwaardere secties. */
.sectie-smal {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.sectie-smal .tekst-kolom {
  margin-top: 1.5rem;
}

/* Eén leeskolom: voor tekst die te kort is om over twee kolommen
   te verdelen zonder dat de onderkanten uit elkaar lopen */
.tekst-kolom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 44rem;
}

.tekst-kolom p + p {
  margin-top: 1.25em;
}

/* Twee gelijke tekstkolommen onder een sectiekop */
.tekst-tweeluik {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.tekst-tweeluik p + p {
  margin-top: 1.25em;
}

/* Uitgelichte zin binnen lopende tekst */
.quote-regel {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--nachtblauw);
  padding-left: 1.5rem;
  border-left: 3px solid var(--signaalgroen);
}

/* Contactgegevens als rustige definitielijst */
.infoblok h2 {
  font-size: var(--maat-h3);
  font-weight: 600;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ijslicht);
}

.gegevens {
  margin-top: 1.5rem;
}

.gegevens dt {
  font-size: var(--maat-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--leisteen);
}

.gegevens dd {
  margin-top: 0.4rem;
  font-size: 1.125rem;
  line-height: 1.5;
}

.gegevens dd + dt {
  margin-top: 1.75rem;
}

.gegevens a {
  text-decoration: none;
  border-bottom: 1px solid var(--signaalgroen);
  padding-bottom: 0.1em;
}
.gegevens a:hover {
  border-bottom-width: 2px;
}

/* Pilaren: genummerde inhoudsblokken met een hairline ertussen */
.pilaar + .pilaar {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--ijslicht);
}

.pilaar-kop {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}

.pilaar-nummer {
  flex: none;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 300;
  line-height: 1;
  color: var(--leisteen);
}

.pilaar-kop h2 {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  max-width: none;
}

.pilaar-body {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.pilaar-tekst p + p {
  margin-top: 1.25em;
}

/* Concreet-paneel naast de lopende tekst */
.concreet {
  background: var(--ijslicht);
  padding: clamp(1.75rem, 3vw, 2.25rem);
}

.concreet .eyebrow {
  color: var(--nachtblauw);
  margin-bottom: 1.25rem;
}

.concreet ul {
  list-style: none;
  display: grid;
  gap: 0.9rem;
}

.concreet li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--maat-klein);
  line-height: 1.6;
}

.concreet li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.7rem;
  background: url("assets/img/parallellogram-groen.svg") no-repeat center / contain;
}

/* Sectorvariant van het pilaarblok: subkop en toelichting naast
   elkaar bovenin, de punten daaronder in twee gelijke kolommen.
   Zo ontstaat er geen hoge smalle lijst naast een korte kop. */
.pilaar-body-sector {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--ijslicht);
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.sector-subkop {
  font-size: 1.375rem;
  font-weight: 600;
}

.pilaar-body-sector .pilaar-tekst {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.pilaar-body-sector .pilaar-tekst p {
  margin-top: 0;
}

.pilaar-body-sector .concreet ul {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 2.5rem;
}

/* Breed paneel: verankerd in de reeks erboven met een hairline,
   subkop links en punten rechts, in het ritme van de sectorblokken */
.concreet-breed {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(0, 68, 84, 0.12);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.concreet-breed > .eyebrow {
  font-size: 1.375rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.concreet-breed > .eyebrow::before {
  display: none;
}

.concreet-breed ul {
  margin-top: 0;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

/* Datakaarten: gelijke blokken naast elkaar */
.data-kaarten {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}

.data-kaart {
  border: 1px solid var(--ijslicht);
  padding: clamp(1.75rem, 3vw, 2.25rem);
}

.data-kaarten-drie {
  grid-template-columns: repeat(3, 1fr);
}

/* Casekaarten: logo, naam en sector in een gelijk vlak */
.case-kaarten {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}

/* Bij precies drie cases: een rij van drie, zodat er geen lege plek overblijft.
   Bij vier of meer valt de grid vanzelf terug op twee kolommen. */
@media (min-width: 64.0625rem) {
  .case-kaarten:has(> :last-child:nth-child(3)) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.case-kaart {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border: 1px solid var(--ijslicht);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease, translate 200ms ease, box-shadow 200ms ease;
}

.case-kaart:hover {
  border-color: var(--leisteen);
  translate: 0 -4px;
  box-shadow: 0 20px 38px rgba(0, 40, 50, 0.1);
}

.case-logo {
  height: 34px;
  width: auto;
  max-width: 9rem;
  object-fit: contain;
  object-position: left center;
  filter: grayscale(1);
  opacity: 0.65;
}

.case-kaart:hover .case-logo {
  filter: grayscale(0);
  opacity: 1;
}

.case-kaart h3 {
  font-size: 1.375rem;
  font-weight: 600;
}

.case-sector {
  margin-top: auto;
  font-size: var(--maat-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--leisteen);
}

/* ============================================================
   Casepagina's: eigen layout met logo-chip, sticky feitenpaneel
   en een verhaalkolom. Bewust afwijkend van de overige pagina's.
   ============================================================ */

.case-logo-chip {
  display: inline-flex;
  align-items: center;
  background: var(--wit);
  border-radius: 2px;
  padding: 0.8rem 1.4rem;
  margin-bottom: 1.75rem;
}

.case-logo-chip img {
  height: 36px;
  width: auto;
  max-width: 11rem;
  object-fit: contain;
}

.case-indeling {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.case-feiten {
  position: sticky;
  top: 2rem;
  background: var(--ijslicht);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.case-feiten img {
  height: 40px;
  width: auto;
  max-width: 12rem;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 1.75rem;
}

.case-feiten dt {
  font-size: var(--maat-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--leisteen);
}

.case-feiten dd {
  margin: 0.35rem 0 1.4rem;
  font-size: var(--maat-klein);
  line-height: 1.55;
}

.case-feiten dd:last-child {
  margin-bottom: 0;
}

.case-verhaal h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  max-width: none;
}

.case-verhaal * + h2 {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.case-verhaal h2 + p {
  margin-top: 1rem;
}

.case-verhaal p + p {
  margin-top: 1em;
}

.case-verhaal p {
  max-width: none;
}

.case-verhaal .concreet {
  margin-top: 1.5rem;
}

.case-verhaal .quote-regel {
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* Band naar de volgende case */
.case-volgende {
  background: var(--nachtblauw);
}

.case-volgende .binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.case-volgende-label {
  font-size: var(--maat-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tekst-zacht-op-donker);
}

.case-volgende a {
  color: var(--wit);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 600;
  text-decoration: none;
}

.case-volgende a::after {
  content: "\2192";
  margin-left: 0.6em;
  display: inline-block;
  transition: transform 160ms ease;
}

.case-volgende a:hover::after {
  transform: translateX(0.3em);
}

/* ============================================================
   404: het X-merk groot, met een korte route terug
   ============================================================ */

.foutpagina {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--nachtblauw);
  color: var(--tekst-op-donker);
  overflow: hidden;
  overflow: clip;
  text-align: center;
  padding-block: 6rem 4rem;
}

.foutpagina-x {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: clamp(20rem, 46vw, 38rem);
  height: auto;
  opacity: 0.12;
}

.foutpagina .binnen {
  position: relative;
}

.foutpagina-code {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--signaalgroen);
}

.foutpagina h1 {
  margin-top: 1.5rem;
  max-width: 18ch;
  margin-inline: auto;
}

.foutpagina p {
  margin-top: 1.5rem;
  margin-inline: auto;
  color: var(--tekst-zacht-op-donker);
}

.foutpagina p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.foutpagina .knoppenrij {
  justify-content: center;
}

/* Honingpotveld in de formulieren: onzichtbaar voor mensen, bots vullen het in */
.veld.niet-invullen {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.foutpagina-logo {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  translate: -50% 0;
  width: 100px;
  height: auto;
}

/* Juridische pagina: leeskolom met een duidelijk gemarkeerde
   plek voor de nog aan te leveren tekst */
.juridisch-melding {
  margin-top: 2.5rem;
  border: 1px solid var(--leisteen);
  border-left: 3px solid var(--signaalgroen);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--ijslicht);
}

.juridisch-melding p {
  font-size: var(--maat-klein);
}

.juridisch-melding p + p {
  margin-top: 0.75em;
}

.juridisch-onderdelen {
  margin-top: 2.5rem;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ijslicht);
}

.juridisch-onderdelen li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--ijslicht);
  font-size: var(--maat-klein);
}

.juridisch-onderdelen strong {
  display: block;
  font-size: var(--maat-body);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* ============================================================
   Artikeldetail: een rustige leeskolom, bewust smal
   ============================================================ */

.artikel-kolom {
  max-width: 44rem;
  margin-inline: auto;
}

.artikel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--ijslicht);
  font-size: var(--maat-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--leisteen);
}

.artikel-body {
  margin-top: 2.5rem;
}

.artikel-body p,
.artikel-body ul,
.artikel-body ol {
  max-width: none;
}

.artikel-body > * + * {
  margin-top: 1.25em;
}

.artikel-body h2 {
  margin-top: 2.5em;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  max-width: none;
}

.artikel-body h3 {
  margin-top: 2em;
  font-size: 1.25rem;
  font-weight: 600;
}

.artikel-body h2 + *,
.artikel-body h3 + * {
  margin-top: 1rem;
}

.artikel-body ul,
.artikel-body ol {
  padding-left: 1.5rem;
}

.artikel-body li + li {
  margin-top: 0.6rem;
}

.artikel-body blockquote {
  padding-left: 1.5rem;
  border-left: 3px solid var(--signaalgroen);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
}

.artikel-body blockquote p {
  margin-top: 0;
}

.artikel-body a {
  color: var(--nachtblauw);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.artikel-body a:hover {
  text-decoration-color: var(--signaalgroen);
}

/* ============================================================
   Artikeldetail, publicatieopzet: licht blad, omslag bovenaan,
   inhoudsopgave links en een rustige leeskolom
   ============================================================ */

.artikelkop {
  background: var(--nachtblauw);
}

/* In de artikelkop staat de navigatie in de gewone flow,
   zodat de donkere band precies om de navigatie past */
.artikelkop .nav {
  position: static;
}

.artikelblad {
  padding-block: clamp(2rem, 4vw, 3.25rem) var(--sectie-ruimte);
}

.artikel-raster {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  gap: clamp(2.5rem, 4vw, 4rem);
}

.zijbalk-plakker {
  position: sticky;
  top: 2rem;
  display: grid;
  gap: 2.25rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

.zijbalk-kop {
  max-width: none;
  font-size: var(--maat-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--leisteen);
}

.inhoudsopgave ol {
  margin-top: 0.9rem;
  list-style: none;
  border-left: 1px solid var(--ijslicht);
}

.inhoudsopgave a {
  display: block;
  padding: 0.45rem 0 0.45rem 1rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(0, 68, 84, 0.6);
  text-decoration: none;
}

.inhoudsopgave a:hover {
  color: var(--nachtblauw);
  border-left-color: var(--signaalgroen);
}

.meer-lijst ul {
  margin-top: 0.9rem;
  list-style: none;
}

.meer-lijst li {
  border-top: 1px solid var(--ijslicht);
}

.meer-lijst li:first-child {
  border-top: none;
}

.meer-lijst a {
  display: block;
  padding-block: 0.7rem;
  text-decoration: none;
}

.meer-lijst .meer-titel {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--nachtblauw);
}

.meer-lijst a:hover .meer-titel {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.meer-lijst time {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--leisteen);
}

/* De artikelkolom: omslag bovenaan, daaronder auteursregel, titel en tekst */
.artikel-inhoud {
  max-width: 52rem;
}

.artikel-omslag {
  display: block;
  width: 100%;
  aspect-ratio: 2.15 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--ijslicht);
}

.artikelkop-gegevens {
  max-width: 41.5rem;
  margin-inline: auto;
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(0, 68, 84, 0.62);
}

.artikel-auteur {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  color: var(--nachtblauw);
}

.artikel-auteur img {
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: 50%;
  background: var(--ijslicht);
}

.gegevens-scheider::before {
  content: "\00B7";
  color: var(--leisteen);
}

.artikel-inhoud h1 {
  max-width: 41.5rem;
  margin-inline: auto;
  margin-top: 1.5rem;
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  line-height: 1.25;
  text-align: center;
  color: var(--nachtblauw);
}

.artikelkop-lead {
  max-width: 38rem;
  margin-inline: auto;
  margin-top: 1rem;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(0, 68, 84, 0.62);
}

.artikel-inhoud .artikel-body {
  max-width: 41.5rem;
  margin-inline: auto;
  margin-top: clamp(2rem, 3vw, 2.75rem);
  font-size: 1.0625rem;
  line-height: 1.85;
}

.artikel-inhoud .artikel-body h2 {
  font-size: 1.375rem;
}

.artikel-inhoud .artikel-body h3 {
  font-size: 1.1875rem;
  font-weight: 600;
}

.artikel-body :is(h2, h3)[id] {
  scroll-margin-top: 2rem;
}

/* Beelden in de artikeltekst: op eigen formaat, nooit opgerekt */
.artikel-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  margin-block: 2.25rem;
  border: 1px solid var(--ijslicht);
  border-radius: 8px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Inhoudsopgave in de tekstkolom, alleen voor kleinere schermen */
.inhoudsopgave-mobiel {
  display: none;
}

/* Datum op artikelkaarten */
.artikel-kaart .artikel-datum {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--leisteen);
}

/* De titel is de link. Die link rekt zich met een onzichtbaar vlak over de
   hele kaart uit, zodat elke plek op de kaart klikt en de titel tegelijk
   een echte, op zichzelf staande link blijft. */
.artikel-kaart {
  position: relative;
}

.artikel-kaart h3 a {
  color: inherit;
  text-decoration: none;
}

.artikel-kaart h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.artikel-kaart:hover h3 a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--signaalgroen);
}

.artikel-kaart h3 a:focus-visible {
  outline: none;
}

.artikel-kaart:has(h3 a:focus-visible) {
  outline: 3px solid var(--nachtblauw);
  outline-offset: 3px;
}

.artikel-lees {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  border: 1px solid var(--nachtblauw);
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  color: var(--nachtblauw);
}

.artikel-lees::after {
  content: "";
  width: 0.55em;
  height: 0.8em;
  background: url("assets/img/parallellogram-groen.svg") no-repeat center / contain;
}

.artikel-kaart:hover .artikel-lees {
  background: var(--nachtblauw);
  color: var(--wit);
}

/* Drie kaarten naast elkaar in de strook onder een artikel */
@media (min-width: 64.0625rem) {
  .artikel-kaarten:has(> :last-child:nth-child(3)) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 64rem) {
  .artikel-raster {
    grid-template-columns: 1fr;
  }

  .artikel-zijbalk {
    display: none;
  }

  .inhoudsopgave-mobiel {
    display: block;
    max-width: 41.5rem;
    margin-inline: auto;
    margin-top: 2rem;
    background: var(--ijslicht);
    border-radius: 6px;
    padding: 1.25rem 1.5rem 1.4rem;
  }

  .inhoudsopgave-mobiel ol {
    border-left-color: rgba(0, 68, 84, 0.18);
  }

  .artikel-omslag {
    aspect-ratio: 16 / 10;
  }

  .artikelkop-gegevens {
    justify-content: center;
  }
}

/* ============================================================
   Landingspagina vastgoedfondsen: stappenlijst, merklijsten,
   knoppenrijen tussen de secties en kaarten op wisselende
   achtergronden
   ============================================================ */

.lijst-merk {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin-top: 1rem;
}

.lijst-merk li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.6;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.lijst-merk li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.7rem;
  background: url("assets/img/parallellogram-groen.svg") no-repeat center / contain;
}

.lijst-merk-kolommen {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
}

.stappen {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--ijslicht);
}

/* Staat de stappenlijst direct boven in een sectie, dan is de bovenlijn
   overbodig: de fotosectie erboven markeert de start al */
.stappen-eerste {
  margin-top: 0;
  border-top: none;
}

.stappen-eerste .stap:first-child {
  padding-top: 0;
}

.stap {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 2rem;
  padding-block: clamp(2rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--ijslicht);
}

.stap-nummer {
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--leisteen);
}

.stap-inhoud {
  max-width: 44rem;
}

.stap-inhoud h3 {
  font-size: 1.375rem;
  font-weight: 600;
}

.stap-inhoud p {
  margin-top: 1rem;
  max-width: none;
}

.stap-inhoud .lijst-merk {
  margin-bottom: 0.25rem;
}

.lp-knoppen {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.lp-formule {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  max-width: 44rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}

.lp-kop {
  margin-bottom: 1.5rem;
}

/* Methodekaarten op wit krijgen een lijn, datakaarten op ijslicht worden wit */
.sectie-kern .methode-kaart {
  border: 1px solid var(--ijslicht);
}

.sectie-diensten .data-kaart {
  background: var(--wit);
  border-color: var(--wit);
}

@media (max-width: 40rem) {
  .stap {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .lijst-merk-kolommen {
    grid-template-columns: 1fr;
  }
}

/* Artikelkaarten: titel met samenvatting */
.artikel-kaarten {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}

.artikel-kaart {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--ijslicht);
  padding: 0 0 clamp(1.75rem, 3vw, 2.25rem);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease, translate 200ms ease, box-shadow 200ms ease;
}

/* Uitgelicht beeld boven de kaart, vaste verhouding zodat de
   kaarten in een rij exact even hoog blijven */
.artikel-beeld {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--ijslicht);
}

.artikel-kaart > *:not(.artikel-beeld) {
  margin-inline: clamp(1.75rem, 3vw, 2.25rem);
}

.artikel-kaart .artikel-beeld + * {
  margin-top: 0.5rem;
}

.artikel-kaart:hover {
  border-color: var(--leisteen);
  translate: 0 -4px;
  box-shadow: 0 20px 38px rgba(0, 40, 50, 0.1);
}

.artikel-kaart h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.35;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.artikel-kaart p {
  font-size: var(--maat-klein);
  color: var(--nachtblauw);
}

.artikel-lees {
  margin-top: auto;
  font-size: var(--maat-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--leisteen);
}

.artikel-kaart:hover .artikel-lees,
.case-kaart:hover .case-sector {
  color: var(--nachtblauw);
}

/* Op ijslicht worden datakaarten witte vlakken */
.sectie-methode .data-kaart,
.sectie-aanpak .data-kaart {
  background: var(--wit);
  border-color: var(--wit);
}

/* Subkop boven een kaartenrij, in lijn met de sectorsubkoppen */
.kaarten-kop {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.kaarten-kop + .data-kaarten {
  margin-top: 1.25rem;
}

.data-kaart h3 {
  font-size: var(--maat-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--leisteen);
}

.data-kaart p {
  margin-top: 0.9rem;
}

.pilaar-slot {
  margin-top: 2rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--nachtblauw);
  padding-left: 1.25rem;
  border-left: 3px solid var(--signaalgroen);
  max-width: 44rem;
}

/* Stappenlijst: genummerde rijen met hairlines */
.stappen-intro {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 500;
}

.stappenlijst {
  margin-top: 1.5rem;
  list-style: none;
  border-top: 1px solid var(--ijslicht);
}

.stappenlijst li {
  display: flex;
  align-items: baseline;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--ijslicht);
}

.stap-nummer {
  flex: none;
  font-size: var(--maat-klein);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--leisteen);
}

.stap-tekst {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 500;
}

/* Generieke fotosectie: volledige sectie-inhoud op een beeld met
   overlay, naar het Ideno-model. Kaarten erin worden translucent. */
.fotosectie {
  position: relative;
  color: var(--tekst-op-donker);
  overflow: hidden;
  overflow: clip;
}

.fotosectie-beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fotosectie-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0, 50, 63, 0.95) 0%,
    rgba(0, 50, 63, 0.88) 55%,
    rgba(0, 50, 63, 0.8) 100%
  );
}

.fotosectie .binnen {
  position: relative;
}

.fotosectie .sectiekop p {
  color: var(--tekst-zacht-op-donker);
}

.fotosectie .data-kaart {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(0, 52, 65, 0.55);
}

.fotosectie .data-kaart h3 {
  color: var(--ijslicht);
}

.fotosectie .data-kaart p {
  color: var(--wit);
}

/* Statement op een foto: een rustig moment tussen twee tekstsecties */
.sectie-statement {
  position: relative;
  background: var(--nachtblauw);
  color: var(--tekst-op-donker);
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(5rem, 9vw, 8rem);
}

/* Bronregel onder een quote in een statementsectie */
.statement-bron {
  margin-top: 1.75rem;
  font-size: var(--maat-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tekst-zacht-op-donker);
}

/* Toelichting onder een statementzin, zachter en smaller */
.statement-toelichting {
  margin-top: 1.75rem;
  max-width: 36rem;
}

.statement-toelichting p {
  color: var(--tekst-zacht-op-donker);
}

.statement-toelichting p + p {
  margin-top: 1em;
}

.statement-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.statement-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0, 50, 63, 0.95) 0%,
    rgba(0, 50, 63, 0.88) 55%,
    rgba(0, 50, 63, 0.78) 100%
  );
}

.sectie-statement .binnen {
  position: relative;
}

.sectie-statement .eyebrow {
  color: var(--wit);
  margin-bottom: 1.5rem;
}

.statement-tekst {
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.4;
  max-width: 30ch;
}

/* ============================================================
   Kernboodschap
   ============================================================ */

.kolommen-kern {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}

.kern-tekst p + p {
  margin-top: 1.25em;
}

.kern-tekst .knop {
  margin-top: 2.25rem;
}

/* ============================================================
   Vertrouwensfactoren, signature-sectie
   ============================================================ */

/* Donkere band met diagonale randen in de richting van de merkvormen */
.sectie-factoren {
  position: relative;
  background: var(--nachtblauw);
  color: var(--tekst-op-donker);
  overflow: hidden;
  overflow: clip;
  padding-block: var(--sectie-ruimte);
}

.sectie-factoren .binnen {
  position: relative;
}

/* De vertrouwensbalk: vijf parallellogram-segmenten, breedte = percentage */
.balk {
  display: flex;
  gap: 6px;
  height: clamp(3.25rem, 7vw, 4.5rem);
  padding-inline: 1.25rem;
}

.balk-segment {
  flex: var(--aandeel) 1 0;
  position: relative;
  transform: skewX(var(--brand-schuin));
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.balk-segment span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: skewX(calc(var(--brand-schuin) * -1));
  font-size: var(--maat-klein);
  font-weight: 500;
}

.balk-segment-accent {
  background: var(--signaalgroen);
  border-color: var(--signaalgroen);
}
.balk-segment-accent span {
  color: var(--nachtblauw);
  font-weight: 600;
}

.factor-kaarten {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.factor-kaarten-vier {
  grid-template-columns: repeat(4, 1fr);
}

.factor-kaart {
  background: rgba(0, 52, 65, 0.72);
  padding: 1.75rem 1.5rem 2rem;
}

/* De Fortus-hero draait om het scherm rechts in beeld. Op smalle schermen
   snijdt de standaard uitsnede dat juist weg, dus schuift het brandpunt op.
   Op desktop snijdt deze hero alleen verticaal, daar verandert er niets. */
.hero-foto-fortus {
  object-position: 66% center;
}

/* Kerncijfers direct onder een hero: licht blok zonder eigen foto, zodat
   er geen twee beelden op elkaar staan. De kaarten worden hier wit. */
.sectie-kerncijfers {
  background: var(--ijslicht);
}

/* De scheidingslijnen tussen de kaarten zijn wit en dus onzichtbaar op een
   lichte ondergrond; hier krijgen ze een zichtbare tint */
.sectie-kerncijfers .factor-kaarten {
  background: rgba(0, 68, 84, 0.14);
  border-color: rgba(0, 68, 84, 0.14);
}

.sectie-kerncijfers .factor-kaart {
  background: var(--wit);
}

.sectie-kerncijfers .factor-cijfer {
  color: var(--nachtblauw);
}

.factor-cijfer {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
}

.factor-kaart h3 {
  margin-top: 0.9rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

.factor-kaart p:last-child {
  margin-top: 0.6rem;
  font-size: var(--maat-klein);
  color: var(--tekst-zacht-op-donker);
}

/* ============================================================
   Ervaring en klantlogo's
   ============================================================ */

/* Ervaring als fotoblok naar Ideno-model: beeld op de achtergrond,
   overlay in merkkleur, content erbovenop */
.sectie-ervaring {
  position: relative;
  color: var(--tekst-op-donker);
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(5rem, 9vw, 8rem);
}

.ervaring-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ervaring-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0, 50, 63, 0.95) 0%,
    rgba(0, 50, 63, 0.88) 55%,
    rgba(0, 50, 63, 0.78) 100%
  );
}

.sectie-ervaring .binnen {
  position: relative;
}

.kolommen-ervaring {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}

.kolommen-ervaring .eyebrow {
  margin-bottom: 1rem;
  color: var(--wit);
}

.kolommen-ervaring p:not(.eyebrow) {
  color: var(--tekst-zacht-op-donker);
}

/* Rustige witte band voor de klantlogo's */
.sectie-klanten {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

/* Zeven logo's passen niet in een raster van gelijke kolommen: de brede
   woordmerken zouden dan versmald worden. Op desktop staat de strook daarom
   op een rij die meekrimpt, zodat er nooit een logo op een tweede rij belandt.
   Daaronder wel een raster, met het laatste logo over de volle breedte
   gecentreerd in plaats van links alleen. */
.klantlogos {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 1.75rem;
}

.klantlogos li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
}

.klantlogos img {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  height: auto;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 160ms ease, opacity 160ms ease;
}

@media (max-width: 64rem) {
  .klantlogos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 2.5rem;
  }

  .klantlogos:has(> li:nth-child(7):last-child) > li:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 30rem) {
  .klantlogos {
    grid-template-columns: repeat(2, 1fr);
  }
}

.klantlogos li:hover img {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

/* ============================================================
   Diensten, scroll-snap rij
   ============================================================ */

.sectie-diensten {
  background: var(--ijslicht);
}

.diensten-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.diensten-grid-drie {
  grid-template-columns: repeat(3, 1fr);
}

/* Variant op wit: kaarten met een hairline in plaats van een vlak */
.sectie-diensten-wit {
  background: var(--wit);
}

.dienst-omlijnd {
  background: var(--wit);
  border: 1px solid var(--ijslicht);
}
.dienst-omlijnd:hover {
  border-color: transparent;
}

/* Lange Nederlandse samenstellingen mogen afbreken in kaarten,
   anders rekt een woord als Leadgeneratiecampagnes de kolom op */
.dienst-kaart h3,
.methode-kaart h3,
.factor-kaart h3,
.data-kaart h3 {
  hyphens: auto;
  overflow-wrap: anywhere;
}

.dienst-kaart {
  background: var(--wit);
  padding: 2.25rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: translate 200ms ease, box-shadow 200ms ease;
}

.dienst-kaart:hover {
  translate: 0 -5px;
  box-shadow: 0 22px 40px rgba(0, 40, 50, 0.14);
}

.dienst-icoon {
  width: 49px;
  height: 49px;
  margin-bottom: 0.25rem;
}

.dienst-kaart p {
  font-size: var(--maat-klein);
  flex: 1;
}

.dienst-donker {
  background: var(--nachtblauw);
  color: var(--tekst-op-donker);
}
.dienst-donker p {
  color: var(--tekst-zacht-op-donker);
}

/* ============================================================
   Waarom, met zwevende ratingkaart
   ============================================================ */

.waarom-kop {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}

.voordelen {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

/* Het kleine X-beeldmerk boven elk punt, zoals op de staging */
.voordeel-icoon {
  display: block;
  width: 30px;
  height: auto;
  margin-bottom: 0.8rem;
}

.voordelen p {
  margin-top: 0.35rem;
  font-size: var(--maat-klein);
}

/* Fotoband op volle breedte, met dezelfde diagonale randen
   als de factorenband en een subtiele parallax waar dat kan */
.fotoband {
  position: relative;
  height: clamp(22rem, 58vh, 36rem);
  overflow: hidden;
  overflow: clip;
}

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

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fotoband img {
      height: 126%;
      animation: fotoband-glijden linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes fotoband-glijden {
  from {
    translate: 0 -13%;
  }
  to {
    translate: 0 0;
  }
}

/* ============================================================
   De Shortlist Methode
   ============================================================ */

.sectie-methode {
  position: relative;
  background: var(--ijslicht);
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

/* Het X-merk: een keer per pagina, groot, naast de content, op licht
   zodat beide merkkleuren zichtbaar blijven (NOTES.md) */
.methode-x {
  position: absolute;
  top: clamp(1.5rem, 4vw, 3.5rem);
  right: -4rem;
  width: clamp(11rem, 16vw, 15rem);
  height: auto;
  z-index: -1;
}

.sectie-methode .eyebrow {
  margin-top: 1.25rem;
}

.methode-kaarten {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.methode-kaarten-twee {
  grid-template-columns: repeat(2, 1fr);
}

.methode-kaart {
  position: relative;
  background: var(--wit);
  padding: 2.5rem 2rem 2.25rem;
  overflow: hidden;
  transition: translate 200ms ease, box-shadow 200ms ease;
}

.methode-kaart:hover {
  translate: 0 -5px;
  box-shadow: 0 22px 40px rgba(0, 40, 50, 0.12);
}

.spooknummer {
  position: absolute;
  top: 0.75rem;
  right: 1.25rem;
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(0, 68, 84, 0.07);
}

.methode-kaart p {
  margin-top: 1rem;
  font-size: var(--maat-klein);
}

.sectie-methode .knop {
  margin-top: 2.75rem;
}

/* ============================================================
   Kennismaking en slotboodschap
   ============================================================ */

.sectie-kennismaking {
  position: relative;
  background: var(--nachtblauw);
  color: var(--tekst-op-donker);
  overflow: hidden;
  overflow: clip;
}

.kennismaking-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kennismaking-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 50, 63, 0.97) 0%,
    rgba(0, 50, 63, 0.9) 55%,
    rgba(0, 50, 63, 0.82) 100%
  );
}

.sectie-kennismaking .binnen {
  position: relative;
}

.kolommen-kennismaking {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.slot-tekst p {
  margin-top: 1.5rem;
  color: var(--tekst-zacht-op-donker);
}

.slot-lijst {
  margin-top: 1.5rem;
  list-style: none;
  display: grid;
  gap: 0.9rem;
  max-width: 34rem;
}

.slot-lijst li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--maat-klein);
  line-height: 1.6;
  color: var(--tekst-zacht-op-donker);
}

.slot-lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.7rem;
  background: url("assets/img/parallellogram-groen.svg") no-repeat center / contain;
}

.formulier {
  background: var(--nachtblauw-diep);
  padding: 2.5rem 2.25rem;
  display: grid;
  gap: 1.4rem;
}

.veld {
  display: grid;
  gap: 0.45rem;
}

.veld label {
  font-size: var(--maat-eyebrow);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-zacht-op-donker);
}

.veld input,
.veld textarea {
  font: inherit;
  color: var(--wit);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  padding: 0.75em 0.9em;
  resize: vertical;
}

.veld input:focus-visible,
.veld textarea:focus-visible {
  outline: 2px solid var(--signaalgroen);
  outline-offset: 0;
  border-color: transparent;
}

.formulier .knop {
  justify-self: start;
}

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

.footer {
  background: var(--nachtblauw-diep);
  color: var(--tekst-op-donker);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.footer-kolommen {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2.5fr) minmax(0, 3.5fr);
  gap: clamp(2rem, 3.5vw, 3.25rem);
  padding-bottom: 3.5rem;
}

/* Contactgegevens in de footer: adres en directe kanalen onder elkaar */
.footer-contact address {
  font-style: normal;
  font-size: var(--maat-klein);
  line-height: 1.7;
  color: var(--tekst-zacht-op-donker);
}

.footer-contact ul {
  margin-top: 1.1rem;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.footer-contact a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--signaalgroen);
}

.footer h3 {
  font-size: var(--maat-body);
  font-weight: 500;
  margin-bottom: 1.1rem;
  max-width: 24ch;
}

.footer-merk img {
  width: 100px;
  height: auto;
}

.footer-rating {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--tekst-zacht-op-donker);
  font-size: var(--maat-klein);
  line-height: 1.4;
}

.footer-rating strong {
  color: var(--wit);
}

.footer-google {
  flex: none;
  width: 22px;
  height: 22px;
}

.footer-merk .footer-mailing {
  margin-top: 2rem;
}

/* Sociale kanalen onder de contactgegevens, met merkteken */
.footer-sociaal {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-sociaal a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.footer-sociaal svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.footer-menu ul {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.footer a {
  color: var(--tekst-zacht-op-donker);
  text-decoration: none;
  font-size: var(--maat-klein);
}
.footer a:hover {
  color: var(--wit);
}

.footer .knop {
  color: var(--wit);
}

.footer-onderregel {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--maat-eyebrow);
  color: var(--tekst-zacht-op-donker);
}

.footer-juridisch {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
}

/* ============================================================
   Scrollreveal, alleen waar ondersteund, met respect voor
   prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sectie .binnen > * {
      animation: verschijn linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}

@keyframes verschijn {
  from {
    opacity: 0;
    translate: 0 1.75rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

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

@media (max-width: 64rem) {
  .kolommen-kern,
  .kolommen-ervaring,
  .waarom-kop,
  .tekst-tweeluik,
  .kolommen-kennismaking {
    grid-template-columns: 1fr;
  }

  .factor-kaarten {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Alleen bij een oneven aantal kaarten de laatste over de volle breedte.
     Bij een even aantal zou dat een kaart alleen op een rij achterlaten. */
  .factor-kaarten:has(> :last-child:nth-child(odd)) .factor-kaart:last-child {
    grid-column: 1 / -1;
  }

  .diensten-grid,
  .diensten-grid-drie {
    grid-template-columns: repeat(2, 1fr);
  }

  .voordelen {
    grid-template-columns: 1fr;
  }

  .pilaar-body {
    grid-template-columns: 1fr;
  }

  .methode-kaarten-twee {
    grid-template-columns: 1fr;
  }

  .artikel-kaarten {
    grid-template-columns: repeat(2, 1fr);
  }

  .concreet-breed {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .pilaar-body-sector .pilaar-tekst {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .pilaar-body-sector .concreet ul {
    grid-template-columns: 1fr;
  }

  .data-kaarten,
  .data-kaarten-drie,
  .case-kaarten {
    grid-template-columns: 1fr;
  }

  .case-indeling {
    grid-template-columns: 1fr;
  }

  .case-feiten {
    position: static;
  }

  .methode-kaarten {
    grid-template-columns: 1fr;
  }

  .methode-x {
    width: 9rem;
    right: -3rem;
    top: 1rem;
    opacity: 0.55;
  }

}

@media (max-width: 64rem) {
  /* Vier footerkolommen worden hier te smal; twee naast elkaar leest beter */
  .footer-kolommen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-merk {
    grid-column: 1 / -1;
  }

  /* Checkbox visueel verborgen maar focusbaar voor toetsenbord */
  .menu-schakel {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .menu-knop {
    display: grid;
    gap: 5px;
    padding: 0.6rem;
    cursor: pointer;
    z-index: 12;
  }
  .menu-knop span {
    width: 22px;
    height: 2px;
    background: var(--wit);
    transition: translate 160ms ease, rotate 160ms ease, opacity 160ms ease;
  }

  .menu-schakel:focus-visible ~ .menu-knop {
    outline: 2px solid var(--signaalgroen);
    outline-offset: 3px;
  }

  .nav-menu {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    padding-block: 6rem 3rem;
    background: var(--nachtblauw-diep);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms;
    z-index: 11;
  }

  .menu-schakel:checked ~ .nav-menu {
    opacity: 1;
    visibility: visible;
  }

  /* Pagina achter het open menu scrolt niet mee */
  body:has(.menu-schakel:checked) {
    overflow: hidden;
  }

  /* Sluitknop blijft in beeld, ook als er achter het menu is gescrold */
  .menu-schakel:checked ~ .menu-knop {
    position: fixed;
    top: 1.2rem;
    right: 1.25rem;
  }

  .menu-schakel:checked ~ .menu-knop span:nth-child(1) {
    translate: 0 7px;
    rotate: 45deg;
  }
  .menu-schakel:checked ~ .menu-knop span:nth-child(2) {
    opacity: 0;
  }
  .menu-schakel:checked ~ .menu-knop span:nth-child(3) {
    translate: 0 -7px;
    rotate: -45deg;
  }

  /* Menu als linksuitgelijnde kolom met scheidingslijnen tussen de
     hoofditems. Zo is zichtbaar wat hoofdniveau is en waar een groep stopt. */
  .nav-lijst {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(100% - 3rem, 21rem);
    text-align: left;
    margin-block: auto 0;
  }

  .nav-lijst > li {
    border-top: 1px solid rgba(223, 240, 245, 0.16);
  }
  .nav-lijst > li:first-child {
    border-top: none;
  }

  .nav-lijst a {
    font-size: 1.25rem;
  }

  .nav-lijst > li > a {
    display: block;
    padding-block: 0.8rem;
  }

  .nav-lijst > li > a:hover,
  .nav-lijst > li > a[aria-current="page"] {
    border-bottom: none;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
  }

  /* Op mobiel krijgt de platformingang een eigen omlijnd vak, zodat hij
     tussen de menu-items opvalt zonder de kennismakingsknop te verdringen */
  .nav-platform {
    align-self: center;
    margin-block: 1.75rem 0;
    padding: 0.7rem 1.3rem;
    border: 1px solid rgba(223, 240, 245, 0.32);
    border-radius: 999px;
    font-size: 1rem;
  }

  .nav-platform:hover {
    text-decoration: none;
    border-color: var(--signaalgroen);
  }

  .nav-cta {
    margin-block: 0.9rem auto;
  }

  /* Submenu's op mobiel: altijd opengeklapt, want aanraken kent geen zweven.
     Expertises en Sectoren zijn groepslabels; de onderliggende lijst springt
     in en krijgt een verticale lijn, zodat de groep een afgebakend blok is. */
  .heeft-sub > a {
    pointer-events: none;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--leisteen);
    padding-block: 0.9rem 0.1rem;
  }
  .nav-lijst > li.heeft-sub > a:hover,
  .nav-lijst > li.heeft-sub > a[aria-current="page"] {
    text-decoration: none;
    color: var(--ijslicht);
  }
  .submenu {
    position: static;
    opacity: 1;
    /* Erven, niet forceren. Met "visible" bleef het submenu klikbaar terwijl
       het gesloten menu eromheen onzichtbaar was, waardoor het onzichtbaar
       over de pagina lag en klikken op de inhoud eronder afving. */
    visibility: inherit;
    translate: none;
    background: transparent;
    box-shadow: none;
    display: block;
    min-width: 0;
    margin: 0.4rem 0 0.95rem 0.1rem;
    padding: 0 0 0 1.1rem;
    border-left: 1px solid rgba(223, 240, 245, 0.28);
  }
  .submenu a {
    color: var(--tekst-zacht-op-donker);
    font-size: 1.0625rem;
    padding: 0.45rem 0;
  }
  .submenu a:hover {
    background: transparent;
    color: var(--wit);
  }
}

@media (max-width: 40rem) {
  :root {
    --sectie-ruimte: 4rem;
  }

  .hero-inhoud {
    padding-block: 8rem 3.5rem;
  }

  .balk {
    height: 2.5rem;
    padding-inline: 0.75rem;
  }
  .balk-segment span {
    display: none;
  }

  .factor-kaarten {
    grid-template-columns: 1fr;
  }

  .footer-kolommen {
    grid-template-columns: 1fr;
  }

  .klantlogos {
    justify-content: center;
  }

  .diensten-grid,
  .diensten-grid-drie,
  .artikel-kaarten {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Homepage versie 2, september 2026
   Secties uit de homepagebriefing. De animaties starten via
   IntersectionObserver in /assets/js/homepage.js, spelen een keer af
   en houden de eindstand vast.
   ============================================================ */

/* --- Hoe shortlisting werkt --------------------------------- */

.sectie-shortlist {
  background: var(--nachtblauw);
  color: var(--tekst-op-donker);
}

.sectie-shortlist .eyebrow {
  color: var(--signaalgroen);
  margin-bottom: 1.25rem;
}

.shortlist-intro {
  margin-top: 1.5rem;
  max-width: 35rem;
  color: var(--leisteen);
}

.sl {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.5rem;
}

.sl-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
  font-size: var(--maat-eyebrow);
}

.sl-stage {
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signaalgroen);
}

.sl-col {
  color: var(--leisteen);
}

.sl-rows {
  display: grid;
  gap: 0.5rem;
}

.sl-row {
  position: relative;
  overflow: hidden;
  height: 2.25rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: opacity 800ms ease, height 600ms ease, border-color 600ms ease;
}

.sl-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--voorkeur, 0) * 1%);
  background: rgba(255, 255, 255, 0.1);
  transition: background 600ms ease;
}

.sl-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 100%;
  padding-inline: 1rem;
}

.sl-name {
  font-size: var(--maat-klein);
  color: rgba(255, 255, 255, 0.78);
  transition: font-size 600ms ease, color 600ms ease;
}

.sl-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sl-tag {
  font-size: var(--maat-eyebrow);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signaalgroen);
  opacity: 0;
  transition: opacity 500ms ease;
}

.sl-pct {
  min-width: 2.875rem;
  font-size: var(--maat-klein);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: rgba(255, 255, 255, 0.78);
  transition: font-size 600ms ease, color 600ms ease;
}

.sl-row.is-uit {
  opacity: 0.14;
}

.sl-row.is-gekozen {
  height: 3.75rem;
  border-color: var(--signaalgroen);
}
.sl-row.is-gekozen .sl-fill {
  background: rgba(25, 219, 113, 0.18);
}
.sl-row.is-gekozen .sl-name {
  font-size: 1.375rem;
  color: var(--wit);
}
.sl-row.is-gekozen .sl-pct {
  font-size: 1.375rem;
  color: var(--signaalgroen);
}
.sl-row.is-gekozen .sl-tag {
  opacity: 1;
}

.sl-line {
  margin-top: 1.375rem;
  min-height: 1.5rem;
  color: var(--leisteen);
}

@media (max-width: 30rem) {
  .sl-inner {
    padding-inline: 0.75rem;
  }
  .sl-row.is-gekozen .sl-name,
  .sl-row.is-gekozen .sl-pct {
    font-size: 1.125rem;
  }
}

/* --- Jullie markt werkt anders: nu donker en geanimeerd ------ */

.sectie-factoren .kolommen-kern {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.factor-cijfer-accent {
  color: var(--signaalgroen);
}

/* De balk bouwt van links naar rechts op. skewX staat voor scaleX, zodat
   de parallelogramhoek gelijk blijft terwijl de breedte groeit. */
@media (prefers-reduced-motion: no-preference) {
  [data-factoren] .balk-segment {
    transform: skewX(var(--brand-schuin)) scaleX(0);
    transform-origin: left center;
  }

  [data-factoren] .balk-segment span {
    opacity: 0;
  }

  [data-factoren] .factor-kaart {
    opacity: 0;
    transform: translateY(8px);
  }

  [data-factoren].is-actief .balk-segment {
    transform: skewX(var(--brand-schuin)) scaleX(1);
    transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--stap) * 330ms);
  }

  [data-factoren].is-actief .balk-segment span {
    opacity: 1;
    transition: opacity 220ms ease calc(var(--stap) * 330ms + 260ms);
  }

  [data-factoren].is-actief .factor-kaart {
    opacity: 1;
    transform: none;
    transition: opacity 400ms ease calc(1770ms + var(--stap) * 80ms),
                transform 400ms ease calc(1770ms + var(--stap) * 80ms);
  }
}

/* Aanwijzen met een muis licht segment en bijbehorende kaart samen op */
@media (hover: hover) and (pointer: fine) {
  .balk-segment.is-aangewezen {
    background: rgba(255, 255, 255, 0.23);
  }

  .balk-segment-accent.is-aangewezen {
    background: var(--signaalgroen);
    filter: brightness(1.1);
  }

  .factor-kaart.is-aangewezen {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
  }
}

/* --- Eigen software en Wat wij een lead noemen --------------- */

.sectie-software {
  background: var(--nachtblauw);
  color: var(--tekst-op-donker);
}

.kolommen-software {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.sectie-software h2 {
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
}

.software-kolom > p {
  margin-top: 1.25rem;
}

.software-slot {
  margin-top: 1.5rem;
  font-weight: 500;
}

@media (max-width: 48rem) {
  .kolommen-software {
    grid-template-columns: 1fr;
  }
}

/* --- Bewijs in cijfers --------------------------------------- */

.sectie-bewijs {
  background: var(--nachtblauw);
  color: var(--tekst-op-donker);
}

.bewijs-kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}

.bewijs-kaarten {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.bewijs-kaart {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* De klantlogo's zijn donkere inkt en zijn onleesbaar op nachtblauw.
   Ze staan daarom op een wit vlak: het logo zelf blijft ongewijzigd. */
.bewijs-merk {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--wit);
  border-radius: 2px;
}

.bewijs-merk img {
  display: block;
  height: 30px;
  width: auto;
}

.bewijs-cijfer {
  margin-top: 1.5rem;
  font-size: var(--maat-kopcijfer);
  font-weight: 300;
  line-height: 1.1;
  color: var(--signaalgroen);
}

.bewijs-sub {
  margin-top: 0.85rem;
  font-size: var(--maat-klein);
  color: var(--tekst-zacht-op-donker);
}

.bewijs-tekst {
  margin-top: 1.25rem;
}

.bewijs-tags {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--maat-klein);
  color: var(--tekst-zacht-op-donker);
}

.bewijs-tags + .tekstlink {
  margin-top: 1.25rem;
}

/* De quotes staan als eigen paneel los van de kaarten: diepere tint,
   groene bovenrand, ruimer gezet */
.bewijs-quotes {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(2rem, 4vw, 3.5rem);
  background: var(--nachtblauw-diep);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 3px solid var(--signaalgroen);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
}

.bewijs-quote p {
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
  font-weight: 500;
  line-height: 1.45;
}

.bewijs-naam {
  font-weight: 500;
  color: var(--signaalgroen);
}

.bewijs-functie {
  font-size: var(--maat-klein);
  color: var(--tekst-zacht-op-donker);
}

@media (max-width: 64rem) {
  .bewijs-kop {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .bewijs-kaarten {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  .bewijs-quotes {
    grid-template-columns: 1fr;
  }
}

/* Geen beweging voor wie daarom vraagt: de eindstand verschijnt direct */
@media (prefers-reduced-motion: reduce) {
  .sl-row,
  .sl-fill,
  .sl-name,
  .sl-pct,
  .sl-tag {
    transition: none;
  }
}

/* --- Stand 2026 -------------------------------------------- */

.sectie-stand {
  background: var(--nachtblauw);
  color: var(--tekst-op-donker);
}

/* Live-aanduiding: een groen punt dat rustig pulseert. Zonder beweging
   (prefers-reduced-motion) staat het punt stil. */
.stand-live {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1rem;
  font-size: var(--maat-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signaalgroen);
}

.stand-live-punt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--signaalgroen);
}

@media (prefers-reduced-motion: no-preference) {
  .stand-live-punt {
    animation: stand-puls 1.8s ease-out infinite;
  }
}

@keyframes stand-puls {
  0% { box-shadow: 0 0 0 0 rgba(25, 219, 113, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(25, 219, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(25, 219, 113, 0); }
}

.stand-kaarten {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.stand-kaart {
  container-type: inline-size;
  padding: 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}

/* Het cijfer blijft op een regel: de maat uit de briefing is het plafond,
   de kaartbreedte de grens. Elf tekens Campton SemiBold zijn ongeveer
   6,5 keer de lettergrootte breed; 14,5cqi houdt daar een marge op. */
.stand-cijfer {
  font-size: clamp(44px, 6vw, 72px);
  font-size: min(clamp(44px, 6vw, 72px), 14.5cqi);
  font-weight: 600;
  line-height: 1;
  color: var(--wit);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stand-streep {
  display: block;
  width: 48px;
  height: 3px;
  margin-block: 16px;
  background: var(--signaalgroen);
}

.stand-label {
  max-width: 24rem;
  font-size: 15px;
  line-height: 1.5;
  color: var(--leisteen);
}

/* De eenheid achter het getal, kleiner zodat het getal leidend blijft */
.stand-eenheid {
  margin-left: 0.15em;
  font-size: 0.5em;
  font-weight: 500;
}

.stand-regel {
  margin-top: 0.75rem;
  font-size: var(--maat-eyebrow);
  color: var(--leisteen);
}

@media (max-width: 40rem) {
  .stand-kaarten {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .stand-kaart {
    padding: 1.5rem;
  }
}

/* --- Jullie markt werkt anders: foto links, balk en kaarten los --- */

/* De kaarttekst mag nergens per woord afbreken */
[data-factoren] .factor-kaart,
[data-factoren] .factor-kaart h3 {
  hyphens: none;
  overflow-wrap: normal;
}

/* Het hoofdblok (40%) staat los van de vier andere: eigen kolom, groene
   rand en tint, groter cijfer. De vier andere delen een raster met lijnen
   (.factor-kaarten-vier), dat op tablet 2 bij 2 wordt en op mobiel 1 kolom. */
.factoren-opbouw {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 4fr);
  gap: 1.5rem;
  align-items: stretch;
}

.factoren-opbouw .factor-kaarten {
  margin-top: 0;
}

.factor-kaart-hoofd {
  padding: 2rem 1.75rem 2.25rem;
  background: rgba(25, 219, 113, 0.1);
  border: 1px solid var(--signaalgroen);
}

.factor-kaart-hoofd .factor-cijfer {
  font-size: 3rem;
}

.factor-kaart-hoofd h3 {
  font-size: 1.25rem;
}

/* Onder 1152 px worden de vier kaarten smaller dan 180 px; dan gaat het
   hoofdblok erboven staan */
@media (max-width: 72rem) {
  .factoren-opbouw {
    grid-template-columns: 1fr;
  }
}

/* --- Bewijs in cijfers: klantnaam, vet kopcijfer, quotes ------ */

.bewijs-klant {
  margin-bottom: 1rem;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wit);
}

.bewijs-cijfer {
  font-weight: 600;
}

.bewijs-quote {
  margin: 0;
}

.bewijs-quote blockquote {
  margin: 0;
}

.bewijs-quote p {
  font-style: italic;
}

.bewijs-bron {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-style: normal;
}

/* Portret van de spreker; zolang die ontbreekt staat het klantlogo hier */
.bewijs-portret {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--wit);
}

.bewijs-portret img {
  display: block;
  max-width: 44px;
  max-height: 26px;
  width: auto;
  height: auto;
}

.bewijs-bron-tekst {
  display: grid;
  gap: 0.2rem;
}

/* --- Shortlist: het label Gekozen bestaat pas als er gekozen is --- */

.sl-tag {
  visibility: hidden;
}

.sl-row.is-gekozen .sl-tag {
  visibility: visible;
}

/* --- Het plafond van het netwerk: vijf gekoppelde paren -------- */

.sectie-plafond {
  background: var(--ijslicht);
}

.plafond-paren {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Centrale lijn over de volle hoogte van de lijst */
.plafond-paren::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(0, 68, 84, 0.15);
}

.plafond-koppen,
.plafond-paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr);
}

.plafond-koppen {
  position: relative;
  margin-bottom: 1rem;
}

.plafond-koppen p {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.plafond-koppen p:last-child {
  grid-column: 3;
}

.plafond-paar {
  position: relative;
  align-items: stretch;
}

.plafond-paar + .plafond-paar {
  margin-top: 12px;
}

.plafond-sterk,
.plafond-grens {
  padding: 18px 20px;
  line-height: 1.5;
}

.plafond-sterk {
  background: var(--wit);
  color: var(--nachtblauw);
  border-left: 3px solid var(--signaalgroen);
}

.plafond-grens {
  background: transparent;
  color: var(--leisteen);
  border: 1px dotted var(--leisteen);
  border-left: 3px solid var(--leisteen);
}

.plafond-pijl {
  align-self: center;
  justify-self: center;
  display: flex;
  width: 16px;
  height: 16px;
  color: var(--leisteen);
  background: var(--ijslicht);
  box-shadow: 0 0 0 6px var(--ijslicht);
}

.plafond-pijl svg {
  width: 16px;
  height: 16px;
}

/* Het label in de kaart is er voor schermlezers en voor mobiel; op
   desktop dragen de kolomkoppen die functie zichtbaar. */
.plafond-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.plafond-slot {
  margin-top: 2rem;
  max-width: 44rem;
}

@media (max-width: 56.25rem) {
  .plafond-paren::before,
  .plafond-koppen {
    display: none;
  }

  .plafond-paar {
    grid-template-columns: 1fr;
  }

  .plafond-pijl {
    justify-self: start;
    margin: 8px 0 8px 20px;
    transform: rotate(90deg);
    box-shadow: none;
  }

  .plafond-grens {
    margin-left: 16px;
  }

  .plafond-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--maat-eyebrow);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .plafond-sterk .plafond-label {
    color: rgba(0, 68, 84, 0.72);
  }
}

/* Uitsnede van de foto's op de homepage: de gezichten zitten in de
   bovenste helft van de bronfoto's, dus ligt het brandpunt hoger */
.statement-gesprek .statement-foto {
  object-position: center 35%;
}

.statement-vertrouwen .statement-foto {
  object-position: center 45%;
}

.statement-ilya .statement-foto {
  object-position: center 30%;
}

/* ============================================================
   Proof-ticker onder de hero
   Een smalle marktentape: de reeks staat meerdere keren in het spoor
   en de animatie schuift precies een kopie op, dus de lus sluit
   naadloos. Inhoud komt uit assets/data/ticker.json via deploy/ticker.js.
   ============================================================ */

.ticker {
  background: var(--nachtblauw-diep);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.ticker-spoor {
  display: flex;
  width: max-content;
}

.ticker-reeks {
  flex: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticker-item {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  white-space: nowrap;
  padding-block: 0.95rem;
  padding-inline: clamp(1.5rem, 3vw, 2.75rem);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.ticker-label {
  font-size: var(--maat-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tekst-zacht-op-donker);
}

.ticker-waarde {
  font-size: var(--maat-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--wit);
}

.ticker-waarde-accent {
  color: var(--signaalgroen);
}

.ticker-ster {
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.3em;
  fill: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .ticker-spoor {
    animation: ticker-schuif var(--ticker-duur, 42s) linear infinite;
  }
}

/* Een kopie opschuiven: het spoor bevat --ticker-kopieen identieke reeksen */
@keyframes ticker-schuif {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-100% / var(--ticker-kopieen)), 0, 0);
  }
}

/* Zonder beweging staat de tape stil en is hij met de hand te verschuiven.
   De kopieen vervallen dan, zodat de reeks precies een keer te lezen is. */
@media (prefers-reduced-motion: reduce) {
  .ticker {
    overflow-x: auto;
  }
  .ticker-reeks[aria-hidden="true"] {
    display: none;
  }
}

@media (max-width: 48rem) {
  .ticker-item {
    gap: 0.5rem;
    padding-block: 0.7rem;
    padding-inline: 1.1rem;
  }
  .ticker-label {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }
  .ticker-waarde {
    font-size: 0.9375rem;
  }
  .ticker-spoor {
    --ticker-duur: 30s;
  }
}