/* Basis-styles (structuur). Kleuren/typografie komen uit theme-bergen.css;
 * dit bestand bevat géén Bergen-specifieke waarden, de designlaag staat
 * in theme-bergen.css. */

/* Self-hosted Manrope (400 + 700 latin, géén Google-Fonts-runtime). */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-latin-400-700.woff2") format("woff2");
}

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

/* Alle scroll door knoppen/links geanimeerd (respecteert
 * prefers-reduced-motion verderop: daar weer auto). */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 1rem; /* live: 16px Manrope */
  line-height: 1.8; /* live: 28.8px */
  /* Vangnet tegen entrances/reveals die tijdelijk buiten het viewport
   * schalen (bv. hero-bg scale 1.05): `clip` knipt zonder scroll-container,
   * dus `position: sticky` blijft werken (anders dan `hidden`). */
  overflow-x: clip;
}

/* Live ::selection: rgba(53,60,139,.5) met witte tekst. */
::selection {
  background: rgba(53, 60, 139, 0.5);
  color: #fff;
}

img {
  max-width: 100%;
  height: auto;
}

/* WS1 Performance: <picture> uit c-responsive-image neemt geen ruimte in —
 * het <img> erin gedraagt zich exact als vóór (zelfde classes/selectors). */
picture {
  display: contents;
}

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

/* Pagina-transitie — witte wipe zoals PixFort (PLAN.md §8): vult het scherm
 * bij het laden en bij interne navigatie, uitgeveegd met scaleX-transition.
 * `prefers-reduced-motion`: geen beweging (direct zichtbaar). */
.js .page-transition {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--color-bg);
  pointer-events: none;
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 0.35s cubic-bezier(0.27, 0.76, 0.38, 0.87);
}

.js .page-transition.transition-out {
  transform: scaleX(0);
  transform-origin: left center;
}

.js .page-transition.transition-cover {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .js .page-transition {
    transition: none;
  }
}

/* Typografie */
.section-title {
  margin: 0 0 1rem;
  color: var(--color-heading);
  font-weight: 700;
  line-height: 1.25;
}

h1.section-title {
  font-size: clamp(2.25rem, 3.125vw, 3.75rem);
  line-height: 1.28;
}

h2.section-title {
  font-size: clamp(1.75rem, 3.2vw, 3rem);
}

h3.section-title {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
}

h4.section-title {
  font-size: 1.875rem; /* live H4 (brochureband, dienstverlening): 30px/700/lh38.4 */
  line-height: 38.4px;
}

h6.section-title {
  font-size: 1rem;
}

/* Eyebrow-badge (lichtgrijze pill, zoals het origineel). */
.eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  background: var(--color-badge-bg);
  color: var(--color-heading);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Eyebrow-varianten (c-section-heading `eyebrow_variant`):
 * default = lichtgrijze pill; "plain" = kale grijze tekst 16px/400
 * (sectie-eyebrows brochures/contact/vacatures); "red" = offerte-kaart
 * (#982c5e, 18px/700). */
.eyebrow-plain {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 400;
}

.eyebrow-red {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--color-eyebrow-red);
  font-size: 1.125rem; /* live offerte-kaart: 18px/700 */
  font-weight: 700;
}
/* Topbar — live: 40px hoog, witte 14px/700-links op #353c8b. */
.topbar {
  background: var(--color-topbar);
  color: #fff;
}

.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  max-width: var(--container);
  height: 40px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.topbar-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: #fff;
  font-size: 0.875rem; /* live: 14px */
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s ease-in-out;
}

.topbar-link:hover {
  opacity: 0.8;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.topbar-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 991px) {
.topbar {
    display: none;
  }
}

/* Header — live desktop: géén sticky (scrollt weg), wél permanente
 * schaduw `0 1px 5px rgba(0,0,0,.15)`; 111px hoog bij 85px-logo
 * (padding ±13px). Mobiel wél sticky (live `.is-sticky`-header). */
.site-header {
  position: relative;
  z-index: 50; /* dropdowns boven hero/banner (die stacking-contexts maken) */
  background: var(--color-bg);
  box-shadow: var(--shadow-header);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.8rem var(--gutter);
}

.site-header .btn {
  padding: 0.5625rem 1.125rem; /* live: 9px 18px */
  font-size: 0.875rem; /* live: 14px */
  white-space: nowrap;
}

.brand-logo {
  display: block;
  width: auto;
  height: 85px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  position: relative;
}

/* Live menu: 16px/700 #343a40, letter-spacing -0.16px, padding 8px.
 * Live kent géén zichtbare active-styling (alleen WP `active`-class) —
 * daarom geen underline; wel hover-kleur + transitie. */
.nav-link {
  color: var(--color-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.16px;
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-sm);
  transition: color 0.15s ease-in-out;
}

.nav-link:hover {
  color: var(--color-primary);
}

/* Dropdown-parents zijn <button>-toggles (geen #blank-anchor): reset
 * browser-defaults zodat ze eruitzien als de naastliggende nav-links. */
.nav-item.has-children > .nav-link {
  appearance: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding-inline: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

.nav-item.is-active > .nav-link {
  color: var(--color-primary);
}

/* Dropdown — live: witte 4px-kaart met zachte schaduw, items 14px/700
 * #212529 met 10px-padding; openen met fade + lichte slide (.25s). */
.nav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  margin: 0;
  padding: var(--space-sm) 0;
  list-style: none;
  background: var(--color-bg);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.nav-item.has-children:hover > .nav-submenu,
.nav-item.has-children:focus-within > .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-sublink {
  display: block;
  padding: 0.625rem 1rem; /* live: 10px top/bottom */
  color: var(--color-submenu-text);
  font-size: 0.875rem; /* live: 14px */
  font-weight: 700;
  letter-spacing: -0.16px;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.nav-sublink:hover {
  background: var(--color-bg-soft);
  color: var(--color-primary);
}

.nav-subitem.is-active > .nav-sublink {
  color: var(--color-primary);
}

/* Mobiel menu */
.mobile-header {
  display: none;
  position: sticky;
  top: 0;
  z-index: 50;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.mobile-header .brand-logo {
  height: 45px;
}

.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  background: none;
  border: 0;
  padding: var(--space-sm);
  cursor: pointer;
}

.hamburger-bar {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-heading);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.hamburger.is-open .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.is-open .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  animation: mobile-nav-in 0.25s var(--ease-reveal);
}

@keyframes mobile-nav-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobiel menu sluiten: exit-animatie (0.2s, spiegel van in), dán pas hidden
 * via JS-timeout — zelfde patroon als .modal.is-closing. */
.mobile-nav.is-closing {
  animation: mobile-nav-out 0.2s ease both;
}

@keyframes mobile-nav-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.mobile-nav .nav-list {
  flex-direction: column;
  align-items: stretch;
}

.mobile-nav .nav-submenu {
  position: static;
  display: block;
  border: 0;
  box-shadow: none;
  min-width: 0;
  padding-left: var(--space-md);
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (max-width: 991px) {
  .site-header {
    display: none;
  }

  .mobile-header {
    display: flex;
  }
}

/* Buttons — live: radius 4px; hovers zijn kleur-only (géén lift):
 * donker #2c3240 → #242934, wit → #f5f5f5; transitie ~0.15s. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  background: var(--color-hero-bg);
  border-color: var(--color-hero-bg);
  color: #fff;
}

/* PixFort "secondary" = donker (Maak een afspraak, Stuur een bericht, Aanvragen). */
.btn-secondary {
  background: var(--color-dark);
  border: 1px solid var(--color-dark);
  color: #fff;
  box-shadow: none;
}

.btn-secondary:hover {
  background: var(--color-dark-hover);
  border-color: var(--color-dark-hover);
  color: #fff;
}

.btn-link {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--color-primary);
  padding-inline: 0;
}

.btn-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Witte button (hero, offerte-top, kaart-knoppen): live 16px/400,
 * padding 10px 24px, schaduw `0 1px 5px rgba(0,0,0,.15)`, hover #f5f5f5. */
.btn-white {
  background: #fff;
  border: 1px solid #fff;
  color: var(--color-heading);
  font-weight: 400;
  padding: 0.625rem 1.5rem;
  box-shadow: var(--shadow-soft);
}

.btn-white:hover {
  background: var(--color-btn-hover-bg);
  border-color: var(--color-btn-hover-bg);
  color: var(--color-heading);
}

/* Tekstlink ("Lees meer", "Bekijk meer"): live géén underline
 * (alleen bij hover) — 16px/400. Geldt voor alle breakpoints. */
.btn-underline {
  background: none;
  border: 0;
  box-shadow: none;
  padding-inline: 0;
  color: var(--color-heading);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
}

.btn-underline:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Pijl-icoontjes achter knoppen en kaart-links (origineel toont arrow-SVG's). */
.hero-buttons .btn::after,
.contact-band .btn::after,
.service-card .card-link::after,
.brochure-band .btn-underline::after {
  content: "›";
  font-size: 1.1em;
  line-height: 1;
}

.intro .btn-underline::before {
  content: "›";
  margin-right: 0.5rem;
  font-size: 1.1em;
  line-height: 1;
}

/* Hero (home) — live sectie 689px hoog op desktop. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 689px;
  overflow: hidden;
  background: var(--color-hero-bg);
}

.hero-title {
  margin: 0 0 var(--space-sm);
  color: #fff;
  font-size: clamp(2rem, 3.125vw, 3.75rem); /* live: 60px */
  font-weight: 700;
  letter-spacing: -1.8px; /* live */
  line-height: 1.28; /* live: 76.8px */
}

.hero-sub {
  margin: 0 0 var(--space-md);
  color: #fff;
  font-size: 1.25rem; /* live: 20px/700 */
  font-weight: 700;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* Dunne scherpe witte onderrand (live pix-divider, 2-laags). */
.hero-divider {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  display: block;
  width: 100%;
  height: clamp(32px, 5vw, 72px);
  pointer-events: none;
}

/* Dienst-hero: groene hero, titel links, overlay-kaart rechts (thema). */
.dienst-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--color-primary-light), var(--color-primary) 60%, var(--color-hero-bg));
}

.dienst-hero-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.dienst-hero-inner {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter) clamp(5rem, 10vw, 7.5rem);
}

.dienst-hero-title {
  margin: 0 0 var(--space-md);
  color: #fff;
  font-size: 3rem; /* live: H2 48px/700/ls-1.44px */
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 1.2;
}

.dienst-hero-intro {
  margin: 0; /* afstand tot toggle regelt .dienst-hero-hoofd .btn (30px) */
  color: #fff;
  font-size: 1.25rem; /* live: 20px/700/lh32 */
  font-weight: 700;
  line-height: 32px;
}

.dienst-hero-hoofd .btn {
  margin-top: 30px; /* live toggle: 30px bovenmarge, 49px hoog */
}

.dienst-hero-kaart {
  background: #fff;
  border-radius: var(--radius-card); /* live: ~5px */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 24px 35px rgba(0, 0, 0, 0.1); /* live: lichtere schaduw */
  padding: 30px 25px; /* live */
}

.dienst-hero-kaart .btn {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: var(--space-md);
  font-weight: 400; /* live card-CTA */
}

@media (min-width: 992px) {
  .dienst-hero-inner {
    grid-template-columns: 1fr 1.05fr;
    column-gap: var(--space-lg);
    align-items: center;
  }
}

/* Werkzaamheden-lijst (in de overlay-kaart): live 20px/700/#343a40,
 * géén rij-padding; iconen in de thema-accentkleur. */
.werkzaamheden-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.werkzaamheden-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
  color: var(--color-heading);
  font-size: 1.25rem;
  font-weight: 700;
}

.werkzaamheden-list svg {
  flex: none;
  color: #5f66c0;
}

/* Introstramien: titel links, tekst + link rechts (zoals het origineel). */
.intro {
  display: grid;
  gap: var(--space-md);
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 5rem) var(--gutter);
}

.intro .section-title {
  margin-top: 0;
}

@media (min-width: 768px) {
  .intro {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-lg);
    align-items: start;
  }

  /* Vacatures: kop links smaller, tekst rechts breder (live ±412:648). */
  .intro-asymmetrisch {
    grid-template-columns: 5fr 8fr;
  }

  .intro-asymmetrisch .intro-tekst p {
    font-size: 1.25rem; /* live: 20px/700/grijs */
    font-weight: 700;
    color: var(--color-text);
  }
}

/* Offerte-top: donkere band met diepe schuine onderrand (live 762px incl.
 * grote divider); witte kaart rechts met 30px/50px-padding. */
.offerte-top {
  padding: clamp(4rem, 9vw, 6rem) 0 calc(clamp(4rem, 9vw, 6rem) + 5rem);
  background: var(--color-primary);
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5rem), 0 100%);
}

.offerte-top-inner {
  display: grid;
  gap: var(--space-lg);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.offerte-top .section-title {
  color: #fff;
}

.offerte-top-hoofd h2.section-title {
  font-size: 3rem; /* live: H2 48px/ls-1.44px */
  letter-spacing: -1.44px;
}

.offerte-top-hoofd > p {
  color: rgba(255, 255, 255, 0.5); /* live intro: 20px witter */
  font-size: 1.25rem;
  font-weight: 400;
}

.offerte-top-kaart {
  background: #fff;
  border-radius: var(--radius-card); /* live: 5px */
  box-shadow: var(--shadow-lift);
  padding: 30px 50px; /* live */
  color: var(--color-text);
}

.offerte-top-kaart .section-title {
  color: var(--color-heading);
}

.offerte-top-kaart .eyebrow {
  margin-top: 0;
  background: none;
  padding: 0;
  color: var(--color-eyebrow-red);
  font-size: 0.9rem;
}

@media (min-width: 992px) {
  .offerte-top-inner {
    grid-template-columns: 5fr 7fr;
    column-gap: var(--space-lg);
    align-items: center;
  }
}

/* Banden: sectie is full-bleed (achtergrond), .band-inner is de
 * gecentreerde 1140px-container met het grid. */
.band {
  padding: clamp(3.5rem, 8vw, 5rem) 0;
}

.band-inner {
  display: grid;
  justify-items: start;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.band-inner > * {
  width: 100%;
}

.band-inner > .eyebrow,
.band-inner > .btn {
  width: auto;
  justify-self: start;
}

.band .band-text {
  max-width: 600px;
  margin-inline: 0;
}

/* Contactband: kopij links, kaarten rechts (zoals het origineel). */
.contact-band {
  background: var(--color-bg);
}

.contact-band .band-text {
  max-width: 600px;
  margin-bottom: var(--space-md);
}

.contact-cards {
  display: grid;
  gap: var(--space-md);
}

.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  text-decoration: none;
}

.contact-card-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-icon-bg);
  color: var(--color-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

a.contact-card:hover .contact-card-icon {
  background: var(--color-primary);
  color: #fff;
}

a.contact-card:hover .contact-card-title {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 10px; /* live pix-feature-content */
}

.contact-card-title {
  color: var(--color-heading);
  font-size: 1.125rem; /* live: 18px/700 */
  font-weight: 700;
}

.contact-card-value {
  color: var(--color-text);
  font-size: 1rem; /* live home én offerte: 16px/400 */
  font-weight: 400;
}

@media (min-width: 768px) {
  .contact-band-inner {
    grid-template-columns: 1.6fr 1fr;
    column-gap: var(--space-lg);
    align-items: start;
  }

  .contact-band-inner > p.eyebrow,
  .contact-band-inner > h1,
  .contact-band-inner > h2,
  .contact-band-inner > h3,
  .contact-band-inner > h4,
  .contact-band-inner > .band-text,
  .contact-band-inner > .btn {
    grid-column: 1;
    justify-self: start;
  }

  .contact-band-inner > .contact-cards {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    margin: 0;
  }
}

.contact-band-inner > .btn {
  width: auto;
  justify-self: start;
}

/* Maps-shots: volle rij onder de kaarten, binnen de container. */
.contact-band-inner > .maps-shots {
  grid-column: 1 / -1;
  margin-top: var(--space-lg);
}

.maps-shots {
  display: grid;
}

.maps-shot {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.maps-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.maps-shot-mobile {
  display: none;
}

@media (max-width: 767px) {
  .maps-shot-desktop {
    display: none;
  }

  .maps-shot-mobile {
    display: block;
  }
}

/* Brochureband: covers links, kopij rechts (zoals het origineel). */
.brochure-band {
  background: var(--color-bg-soft);
}

.brochure-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* Brochure-covers: live vlak (géén schaduw), radius ~5px; de img vult de
 * kaart exact (live 236×300, ratio ≈ 0.79) via aspect-ratio + object-fit. */
.brochure-cover {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow: none;
  padding: 0;
  aspect-ratio: 236 / 300;
  transition: transform 0.3s ease;
}

.brochure-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.brochure-cover:hover {
  transform: translateY(-4px);
  box-shadow: none;
}

.brochure-cover:hover img {
  transform: scale(1.04);
}

.brochure-band .band-text {
  margin-bottom: var(--space-md);
}

@media (min-width: 992px) {
  .brochure-band-inner {
    grid-template-columns: 2fr 1fr;
    align-items: center;
    column-gap: var(--space-lg);
  }

  .brochure-band-inner .brochure-grid {
    grid-row: 1 / span 3;
    margin: 0;
  }
}

@media (min-width: 992px) {
  .brochure-band .brochure-grid,
  .brochure-grid-pagina {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Brochurepagina-kop: live staan eyebrow + H2 + intro + anchor-knop
 * gestapeld links (vc_col-sm-4), covers rechts (vc_col-sm-8). */
.brochure-hoofd {
  display: grid;
  gap: var(--space-lg);
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 5rem) var(--gutter) var(--space-md);
}

.brochure-intro {
  font-size: 1.25rem; /* live: text-20 */
}

@media (min-width: 992px) {
  .brochure-hoofd {
    grid-template-columns: 1fr 2fr;
    column-gap: var(--space-lg);
    align-items: start;
  }

  .brochure-hoofd .brochure-grid-pagina {
    margin: 0;
    padding: 0;
  }
}

/* Brochurecovers op de brochurepagina: 3 per rij. */
.brochure-grid-pagina {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-md);
}

/* Offerteband: basis-blauwverloop (#9a9cc6 → #353c8b, horizontaal) op ALLE
 * breakpoints; theme-bergen.css vervangt dit door de groene accent-band. */
.offerte-band {
  background: linear-gradient(to right, #9a9cc6, #353c8b);
  color: #fff;
  padding: 3rem 0; /* live rij: ±244px hoog */
}

.offerte-band .section-title {
  color: #fff;
  font-size: 2.25rem; /* live: H3 36px/700/ls-1.08px */
  letter-spacing: -1.08px;
  line-height: 46.08px;
}

.offerte-band .band-text {
  color: rgba(255, 255, 255, 0.85);
}

/* Live "Aanvragen"-button (desktop én mobiel gelijk): 18px/400,
 * padding 12px 32px, radius ~5px, bg #2c3240. */
.offerte-band .btn {
  font-size: 1.125rem;
  font-weight: 400;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-card);
}

.offerte-band .btn::before {
  content: "➤";
  font-size: 0.9em;
}

@media (min-width: 992px) {
  .offerte-band-inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--space-lg);
  }

  .offerte-band-inner > .btn {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
  }
}

/* Dienst-cards */
.service-grid {
  display: grid;
  gap: var(--space-md);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3.5rem, 8vw, 5rem);
}

@media (min-width: 768px) {
  .service-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Dienst-cards: live radius 5px, schaduw `20px 10px 58px rgba(0,0,0,.3)`;
 * hover: lichte lift + diepere schaduw (.3s). */
.service-card {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 420px;
  border-radius: var(--radius-card);
  background: var(--color-hero-bg);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 24px 14px 64px rgba(0, 0, 0, 0.35);
}

.service-card .card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55; /* live: donkere opaake overlay, gebouw nauwelijks zichtbaar */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.service-card:hover .card-image {
  transform: scale(1.04);
}

.service-card .card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: auto;
  padding: var(--space-lg);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.88));
  color: #fff;
}

.service-card .eyebrow {
  background: rgba(255, 255, 255, 0.9);
  align-self: flex-start;
}

.service-card .card-title {
  margin: 0 0 0.5rem;
  color: #fff;
  font-size: 2.25rem; /* live home-cards: 36px/700 */
  font-weight: 700;
  line-height: 1.25;
}

.service-card .card-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.service-card .card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--space-md);
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-heading);
  font-weight: 700;
  text-decoration: none;
}

/* Brede crosslink-kaarten op dienstpagina's (thema: witte kaarten). */
.service-grid-wide {
  grid-template-columns: 1fr;
  padding-bottom: var(--space-xl);
}

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

.service-card-wide {
  min-height: 260px;
}

.service-card-wide .card-image {
  opacity: 0.4;
}

.service-card-wide .card-body {
  background: linear-gradient(100deg, rgba(53, 60, 139, 0.35), rgba(53, 60, 139, 0.65)); /* live: lichtere paarse overlay */
  justify-content: flex-end;
}

.service-card-wide {
  box-shadow: var(--shadow-lift);
}

.service-card-wide .card-title {
  font-size: 2.25rem; /* live crosslinks: 36px/700 */
}

.service-card-wide .card-text:empty {
  display: none;
}

.service-card-wide .card-link {
  display: inline-flex;
  justify-content: flex-start;
  margin-top: var(--space-sm);
  padding: 0;
  background: none;
  box-shadow: none;
  color: #fff;
}

/* Kantoorpagina: intro links met diagonale lichtgrijze vorm erachter,
 * overlappende foto's rechts (live 354×365 + 354×529). */
.kantoor-top {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 5rem) var(--gutter);
  background: var(--color-bg-soft);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3rem), 0 100%);
  padding-bottom: calc(clamp(3.5rem, 8vw, 5rem) + 3rem);
}

.kantoor-top-hoofd .section-title {
  font-size: 3.75rem; /* live intro-H1: 60px */
  letter-spacing: -1.8px;
}

.kantoor-top-hoofd > p {
  font-size: 1.25rem; /* live lead: 20px/700/grijs */
  font-weight: 700;
  color: var(--color-text);
}

/* Medewerkers: sidebar-layout (kop+intro links ±1/4, kaarten rechts);
 * thema: diepgroene band met witte kaarten. */
.team-band {
  background: var(--color-bg-soft);
  padding: clamp(3.5rem, 8vw, 5rem) var(--gutter);
}

.team-band-inner {
  max-width: var(--container);
  margin: 0 auto;
}

.team-band-hoofd {
  margin: 0 auto var(--space-lg);
}

.team-band-hoofd .section-title {
  color: var(--color-primary); /* thema: kop in accent (via theme-bergen.css) */
}

.team-band-hoofd > p {
  font-size: 1.25rem; /* live: text-20 */
}

.team-grid {
  display: grid;
  gap: var(--space-md);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .team-band-inner {
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: var(--space-lg);
    align-items: start;
  }

  .team-band-hoofd {
    margin: 0;
  }

  .team-grid {
    /* Live staan de kaarten kolom-per-kolom (Jeroen/Ronald, Marco/Moniek,
     * Roxane/Annelies): column-flow met 2 rijen. */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    margin: 0;
  }
}

.team-member {
  padding: var(--space-md);
  border-radius: var(--radius); /* live: 4.8px */
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); /* live */
  text-align: center;
  list-style: none;
}

.team-member-name {
  display: block;
  color: var(--color-heading);
  font-size: 1.125rem; /* live: 18px/700 */
  font-weight: 700;
}

.team-member-role {
  display: block;
  margin-top: 10px; /* live */
  color: #34398d; /* live */
  font-size: 0.875rem;
  font-weight: 700;
}

/* Losse paginakopij (buiten banden): gecentreerde leeskollom. */
main#content > h1,
main#content > h2,
main#content > h3,
main#content > h4,
main#content > h5,
main#content > h6,
main#content > p,
main#content > ul {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main#content > .btn {
  display: table;
  margin-left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}

/* Foutpagina's (404/500): gecentreerde band in de container, zelfde ritme
 * als de overige bands (eyebrow + titel + leeskolom + CTA). */
.error-page {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter) clamp(5rem, 10vw, 7.5rem);
  text-align: center;
}

.error-page .section-title {
  margin: 0.75rem auto 0;
  max-width: 30ch;
}

.error-page-tekst {
  max-width: 58ch;
  margin: 1.25rem auto 2.25rem;
}

/* "Volledige dienstverlening"-kop: live staan kop+intro in een smallere
 * kolom (max 800px, links uitgelijnd in de container) boven de cards. */
.dienstverlening-hoofd {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-xl) var(--gutter) 0;
}

.dienstverlening-hoofd .section-title,
.dienstverlening-hoofd > p {
  max-width: 800px;
}

.dienstverlening-hoofd .section-title {
  margin-top: 0;
}

/* Nuttige links: live label 400 in zwart, beschrijving grijs; ruimere
 * rij-hoogte (±80px met padding-top); 11 rijen in 6-links/5-rechts. */
.link-row {
  margin-bottom: var(--space-xs);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-height: 80px;
  padding-top: 0.75rem;
}

.link-row-description {
  order: -1;
  color: var(--color-text);
  font-weight: 400;
}

.link-row-link {
  color: #000; /* live btn-underline-black */
  font-weight: 400;
  text-decoration: none;
}

.link-row-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 992px) {
  main#content > ul {
    display: grid;
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    gap: var(--space-md) var(--space-lg);
  }
}

/* Modal — live (fancybox): donkere overlay; paneel radius 4px met
 * fade + lichte slide-up bij openen (.25s). */
.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 30, 30, 0.9);
  animation: modal-fade 0.25s ease;
}

.modal-panel {
  position: relative;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
  padding: var(--space-lg);
  animation: modal-panel-in 0.25s var(--ease-reveal);
}

@keyframes modal-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-panel-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sluiten: gespiegelde exit (fade + licht wegzakken, 0.2s) — JS zet
 * .is-closing en verbergt pas na het uitspelen (zie main.js). */
.modal.is-closing .modal-backdrop {
  animation: modal-fade-out 0.2s ease both;
}

.modal.is-closing .modal-panel {
  animation: modal-panel-out 0.2s var(--ease-reveal) both;
}

@keyframes modal-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes modal-panel-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

/* Werkzaamheden-dialog: live 580px breed, radius 10px. */
.modal-panel-sheet {
  max-width: 580px;
  border-radius: 10px;
}

.modal-close {
  position: absolute;
  top: -18px; /* live: grijze cirkel-× rechtsboven BUITEN de modal */
  right: -18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #6c757d;
  border: 0;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.modal-title {
  color: var(--color-heading);
  font-size: 2.25rem; /* live werkzaamheden-titel: H3 36px/700 */
  font-weight: 700;
}

/* Footer — live: witte achtergrond, widget-titels H6 18px/700 mb 0,
 * links 16px/400 #6c757d met underline-hover, copyright 18px (gemeten). */
.site-footer {
  background: #fff;
  padding: var(--space-xl) var(--gutter) var(--space-md);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  max-width: var(--container);
  margin: 0 auto;
}

.footer-col:first-child,
.footer-col:last-child {
  grid-column: 1 / -1;
}

/* Live footer desktop (gemeten 1920px): kolommen 383/192/192/383
 * (≈ 2fr 1fr 1fr 2fr), titels H6 18px mb 0, kolomtekst 18px/26px,
 * copyright 18px gecentreerd. */
@media (min-width: 992px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 2fr;
  }

  .footer-col:first-child,
  .footer-col:last-child {
    grid-column: auto;
  }

  /* Live footer desktop (gemeten): kolommenblok 60px padding boven/onder,
   * titels H6 18px mb 0, kolomtekst 18px/26px, copyright 18px gecentreerd. */
  .site-footer {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .footer-title {
    margin-bottom: 0;
  }

  .footer-col p {
    font-size: 1.125rem;
    line-height: 26px;
  }

  .copyright {
    font-size: 1.125rem;
  }
}

.footer-title {
  margin: 0 0 var(--space-sm);
  color: var(--color-heading);
  font-size: 1.125rem; /* live widget-titels: 18px */
  font-weight: 700;
}

.footer-col p {
  margin: 0 0 0.5rem;
  color: var(--color-text);
  font-size: 1rem;
}

.site-footer a {
  color: var(--color-text); /* live footer-links: 16px/400 #6c757d */
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.site-footer a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

/* Contactregels met icoon; openingstijden met chevron (thema: zand). */
.footer-contact-regel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-contact-regel svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

.footer-tijd::before {
  content: "›";
  margin-right: 0.5rem;
  color: var(--color-primary);
  font-size: 1.1em;
  font-weight: 700;
}

@media (min-width: 992px) {
  /* Live footer desktop (gemeten): kolomtekst 18px/26px, titels mb 0,
   * copyright 18px gecentreerd (60px blok-padding staat bij .footer-grid hierboven). */
  .footer-title {
    margin-bottom: 0;
  }

  .footer-col p {
    font-size: 1.125rem;
    line-height: 26px;
  }

  .site-footer .copyright {
    font-size: 1.125rem;
  }
}

.copyright {
  max-width: var(--container);
  margin: var(--space-lg) auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  color: #adb5bd; /* live: copyright #adb5bd */
  font-size: 0.9rem;
  line-height: 26px; /* live */
  text-align: center;
}

/* Live (min-width 992px) overschrijft copyright op 18px; zie media-query hieronder. */

/* Back to top — live: 50px, bg #f4f4f5, tonen via fade + translateY;
 * hover: accentkleur met wit icoon. */
.back-to-top {
  position: fixed;
  right: 30px; /* live */
  bottom: 30px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px; /* live */
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-backtop);
  box-shadow: var(--shadow-soft);
  color: var(--color-heading);
  font: inherit;
  cursor: pointer;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease, color 0.2s ease;
}

.back-to-top[hidden] {
  display: flex;
  visibility: hidden;
  opacity: 0;
  transform: translateY(30px); /* live */
  pointer-events: none;
}

.back-to-top:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Scroll-reveal + entrances — live revealt via pix-animate (fade /
 * fade-in-right): zelfde aanvoelen met IntersectionObserver + .is-visible.
 * Choreografie per component (alles CSS; JS zet alleen .reveal/.is-visible):
 * - `.reveal` (standaard): fade + 24px omhoog, 0.6s, eenmalig.
 * - `.dienst-hero-kaart`: fade-in-right 28px (zoals live).
 * - `.intro`: redactionele split — kop van links, tekst van rechts.
 * - Stagger (blok statisch, kinderen cascadeden): home-kaarten,
 *   trust-bar, team-grid, brochure-grid-pagina, service-grid en
 *   contact-cards in de band (modal-kaarten expliciet uitgesloten).
 * - Hero's staan bovenaan (altijd in beeld) en entrancen bij load via
 *   keyframes i.p.v. scroll-reveal.
 * Alleen progressief: zonder JS alles zichtbaar; `prefers-reduced-motion`
 * toont alles direct (zie media-query hieronder). */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease-reveal);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Dienst-kaart: schuift van rechts in (live: pix fade-in-right). */
html.js .dienst-hero-kaart.reveal {
  transform: translateX(28px);
}

html.js .dienst-hero-kaart.reveal.is-visible {
  transform: translateX(0);
}

/* Intro: kop van links, tekst van rechts (20px, tekst 80ms later). */
html.js .intro.reveal {
  opacity: 1;
  transform: none;
}

html.js .intro .intro-hoofd,
html.js .intro .intro-tekst {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s var(--ease-reveal);
}

html.js .intro .intro-hoofd {
  transform: translateX(-20px);
}

html.js .intro .intro-tekst {
  transform: translateX(20px);
  transition-delay: 0.08s;
}

html.js .intro.is-visible .intro-hoofd,
html.js .intro.is-visible .intro-tekst {
  opacity: 1;
  transform: none;
}

/* Stagger-containers: het blok zelf blijft staan, de kinderen cascadeden.
 * Vertragingen bewust klein (≤0.63s) zodat de 2,5s-reveal-vangnet en de
 * e2e-zichtbaarheidschecks nooit in de knel komen. */
html.js .home-kaarten.reveal,
html.js .trust-bar.reveal,
html.js .team-grid.reveal,
html.js .brochure-grid-pagina.reveal,
html.js .service-grid.reveal {
  opacity: 1;
  transform: none;
}

html.js .home-kaarten .home-kaart,
html.js .trust-bar .trust-item,
html.js .team-grid .team-member,
html.js .brochure-grid-pagina .brochure-cover,
html.js .service-grid .service-card,
html.js .contact-band .contact-card {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s var(--ease-reveal);
}

html.js .home-kaarten .home-kaart {
  transform: translateY(24px);
}

html.js .trust-bar .trust-item {
  transform: translateY(12px);
}

html.js .team-grid .team-member {
  transform: translateY(16px);
}

html.js .brochure-grid-pagina .brochure-cover {
  transform: translateY(20px);
}

html.js .service-grid .service-card {
  transform: translateY(20px);
}

html.js .contact-band .contact-card {
  transform: translateY(16px);
}

html.js .home-kaarten.is-visible .home-kaart,
html.js .trust-bar.is-visible .trust-item,
html.js .team-grid.is-visible .team-member,
html.js .brochure-grid-pagina.is-visible .brochure-cover,
html.js .service-grid.is-visible .service-card,
html.js .contact-band.is-visible .contact-card {
  opacity: 1;
  transform: none;
}

html.js .home-kaarten.is-visible .home-kaart:nth-child(2),
html.js .service-grid.is-visible .service-card:nth-child(2) {
  transition-delay: 0.11s;
}

html.js .home-kaarten.is-visible .home-kaart:nth-child(3) {
  transition-delay: 0.22s;
}

html.js .trust-bar.is-visible .trust-item:nth-child(2) {
  transition-delay: 0.08s;
}

html.js .trust-bar.is-visible .trust-item:nth-child(3) {
  transition-delay: 0.16s;
}

html.js .contact-band.is-visible .contact-card:nth-child(2) {
  transition-delay: 0.09s;
}

html.js .contact-band.is-visible .contact-card:nth-child(3) {
  transition-delay: 0.18s;
}

html.js .team-grid.is-visible .team-member:nth-child(2) {
  transition-delay: 0.06s;
}

html.js .team-grid.is-visible .team-member:nth-child(3) {
  transition-delay: 0.12s;
}

html.js .team-grid.is-visible .team-member:nth-child(4) {
  transition-delay: 0.18s;
}

html.js .team-grid.is-visible .team-member:nth-child(5) {
  transition-delay: 0.24s;
}

html.js .team-grid.is-visible .team-member:nth-child(6) {
  transition-delay: 0.3s;
}

html.js .brochure-grid-pagina.is-visible .brochure-cover:nth-child(2) {
  transition-delay: 0.07s;
}

html.js .brochure-grid-pagina.is-visible .brochure-cover:nth-child(3) {
  transition-delay: 0.14s;
}

html.js .brochure-grid-pagina.is-visible .brochure-cover:nth-child(4) {
  transition-delay: 0.21s;
}

html.js .brochure-grid-pagina.is-visible .brochure-cover:nth-child(5) {
  transition-delay: 0.28s;
}

html.js .brochure-grid-pagina.is-visible .brochure-cover:nth-child(6) {
  transition-delay: 0.35s;
}

html.js .brochure-grid-pagina.is-visible .brochure-cover:nth-child(7) {
  transition-delay: 0.42s;
}

html.js .brochure-grid-pagina.is-visible .brochure-cover:nth-child(8) {
  transition-delay: 0.49s;
}

html.js .brochure-grid-pagina.is-visible .brochure-cover:nth-child(9) {
  transition-delay: 0.56s;
}

html.js .brochure-grid-pagina.is-visible .brochure-cover:nth-child(10) {
  transition-delay: 0.63s;
}

/* Hero-entrances (load, geen scroll): tekst cascadeert omhoog terwijl het
 * beeld langzaam tot rust komt. Basis-delay 0.1s zodat de pagina-wipe
 * eerst oplost; `both`-fill verbergt pre-delay zonder flits. */
@keyframes entrance-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes entrance-beeld {
  from {
    opacity: 0;
    transform: scale(1.05);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Dienst-hero: het beeld is een donkere transparante overlay (opacity 0.35)
 * over de groene gradient — de entrance eindigt dus op 0.35, niet op 1. */
@keyframes entrance-beeld-overlay {
  from {
    opacity: 0;
    transform: scale(1.05);
  }

  to {
    opacity: 0.35;
    transform: scale(1);
  }
}

html.js .hero-sample-tekst > *,
html.js .dienst-hero-hoofd > *,
html.js .offerte-top-hoofd > *,
html.js .kantoor-top-hoofd > * {
  animation: entrance-rise 0.8s var(--ease-reveal) both;
  animation-delay: 0.1s;
}

html.js .hero-sample-tekst > *:nth-child(2),
html.js .dienst-hero-hoofd > *:nth-child(2),
html.js .offerte-top-hoofd > *:nth-child(2),
html.js .kantoor-top-hoofd > *:nth-child(2) {
  animation-delay: 0.22s;
}

html.js .hero-sample-tekst > *:nth-child(n+3),
html.js .dienst-hero-hoofd > *:nth-child(n+3),
html.js .offerte-top-hoofd > *:nth-child(n+3) {
  animation-delay: 0.34s;
}

html.js .hero-sample-bg {
  animation: entrance-beeld 1.4s ease-out both;
}

html.js .dienst-hero-image {
  animation: entrance-beeld-overlay 1.4s ease-out both;
}

html.js .kantoor-collage-achter,
html.js .kantoor-collage-voor {
  animation: entrance-beeld 1.1s ease-out both;
  animation-delay: 0.1s;
}

html.js .kantoor-collage-voor {
  animation-delay: 0.25s;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none;
    transition: none;
    scroll-behavior: auto;
  }

  html.js .reveal {
    opacity: 1;
    transform: none;
  }

  html.js .intro .intro-hoofd,
  html.js .intro .intro-tekst,
  html.js .home-kaarten .home-kaart,
  html.js .trust-bar .trust-item,
  html.js .team-grid .team-member,
  html.js .brochure-grid-pagina .brochure-cover,
  html.js .service-grid .service-card,
  html.js .contact-band .contact-card {
    opacity: 1;
    transform: none;
  }

  /* De `*`-reset hierboven verliest specificiteit van de entrance-
   * keyframes; neutraliseer ze expliciet met gelijke selector. */
  html.js .hero-sample-tekst > *,
  html.js .dienst-hero-hoofd > *,
  html.js .offerte-top-hoofd > *,
  html.js .kantoor-top-hoofd > *,
  html.js .hero-sample-bg,
  html.js .dienst-hero-image,
  html.js .kantoor-collage-achter,
  html.js .kantoor-collage-voor {
    animation: none;
  }

  /* Modal: open- én exit-animaties uit (de `*`-reset hierboven verliest
   * specificiteit van de modal-selectors). */
  .modal-backdrop,
  .modal-panel,
  .modal.is-closing .modal-backdrop,
  .modal.is-closing .modal-panel {
    animation: none;
  }
}

/* Mobiele pariteit 375px — alles gemeten op live (getComputedStyle +
 * screenshot-pixels, sept 2026). Uitsluitend ≤991px/≤767px: desktop en
 * tablet (768px/1920px) blijven ongewijzigd.
 */
@media (max-width: 991px) {
  /* Live mobiele header: 72px hoog, wit. */
  .mobile-header {
    min-height: 72px;
  }

  /* Live submenu's staan dichtgeklapt met chevron; tap toggelt
   * (JS zet .is-open). Zonder JS alles uitgeklapt (progressief). */
  html.js .mobile-nav .nav-submenu {
    display: none;
    padding-left: 0;
  }

  html.js .mobile-nav .has-children.is-open > .nav-submenu {
    display: block;
  }

  /* Echte SVG-chevron (in de button) draait 180° bij openen. */
  .mobile-nav .nav-chevron {
    margin-left: 0.4rem;
    vertical-align: -1px;
    transition: transform 0.2s ease;
  }

  .mobile-nav .has-children.is-open .nav-chevron {
    transform: rotate(180deg);
  }

  /* Live kent géén actieve-highlight in het mobiele menu. */
  .mobile-nav .nav-item.is-active > .nav-link,
  .mobile-nav .nav-subitem.is-active > .nav-sublink {
    color: var(--color-heading);
  }
}

@media (max-width: 767px) {
  /* Brochure-covers: live nagenoeg aaneengesloten op mobiel. */
  .brochure-grid {
    gap: 0.5rem;
  }

  /* Hero home: titel 36px/ls -1.08px, sub 20px/700. */
  .hero-title {
    font-size: 2.25rem;
    letter-spacing: -1.08px;
  }

  .hero-sub {
    font-size: 1.25rem;
  }

  /* Dienst-hero: titel 28.8px/ls -0.864px; live sectie heeft 10px-radius. */
  .dienst-hero {
    border-radius: 10px 10px 0 0;
  }

  .dienst-hero-title {
    font-size: 1.8rem;
    letter-spacing: -0.864px;
  }

  /* Pijl-links ("Bekijk meer", "Lees meer"): live géén underline
   * (alleen bij hover). */
  .btn-underline {
    text-decoration: none;
  }

  .btn-underline:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* Intro witte button: chevron vóór het label (live "› Bekijk …"). */
  .intro .btn-white::before {
    content: "›";
    font-size: 1.1em;
    line-height: 1;
  }

  /* Team: live toont op mobiel platte gecentreerde tekst (géén kaarten). */
  .team-member {
    background: none;
    box-shadow: none;
    padding: 0.5rem 0;
  }

}