/* Dromenbouw — Design system (Custo-style rebuild)
   Design read: achromatic gunmetal gallery, single-family type at monolithic
   display scale, flat surfaces, no shadows/gradients, hairline structure only.
   Dials: variance 2, motion 2, density 2 (per Custo reference).
   Palette: achromatic — gunmetal, obsidian, paper white, anodized graphite.
   Radius scale: 31.35px pill (primary CTA only), 8px everywhere else. */

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-var.woff2") format("woff2-variations"),
       url("../assets/fonts/manrope-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --canvas: #1f2a33;
  --ink: #1f2a33;
  --paper: #ffffff;
  --graphite: #27333d;
  --steel: #5c6570;
  --mist: #b7bec4;
  --hairline: #dde1e4;

  --accent: #0073bb;
  --accent-dark: #00588e;
  --accent-tint: rgba(0, 115, 187, 0.1);

  --text: #1f2a33;
  --text-muted: #5c6570;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #a9b0b8;

  --radius-card: 8px;
  --radius-pill: 31.35px;

  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-caption: 15px;
  --leading-caption: 1.43;
  --text-subheading: 20px;
  --leading-subheading: 1.38;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.25;
  --text-heading: 38px;
  --leading-heading: 1.15;
  --text-display: 57px;
  --leading-display: 1;
  --text-body: 19px;
  --leading-body: 1.42;

  --content-max: 1280px;
  --section-gap: 110px;
  --card-padding: 20px;
  --element-gap: 24px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-feature-settings: "kern" 1, "liga" 1;
  font-weight: 400;
  color: var(--text);
  background: var(--paper);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--text-heading-sm); /* veiligheidsvloer: elke kop zonder eigen size krijgt 30px i.p.v. browser-default */
  line-height: 1.15;
  letter-spacing: normal;
  margin: 0;
  color: inherit;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

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

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) {
  .container { padding-inline: 40px; }
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--accent);
  color: var(--paper);
  padding: 16px 28px;
  border-radius: var(--radius-card);
  z-index: 200;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

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

/* Buttons — ghost pill only, no filled states */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--text-caption);
  line-height: var(--leading-subheading);
  color: var(--ink);
  padding: 16px 28px;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }

.btn-on-dark {
  border-color: var(--paper);
  color: var(--paper);
}
.btn-on-dark:hover { background: var(--paper); color: var(--ink); }

/* Primary CTA — the one accent color in the system, reserved for the main action */
.btn-accent {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-accent:hover { background: var(--accent); color: var(--paper); }
.btn-accent.btn-on-dark { border-color: var(--accent); color: var(--paper); }
.btn-accent.btn-on-dark:hover { background: var(--accent); color: var(--paper); }

/* Language switch — a two-segment pill rather than a single link to the other
   language, so it is visible which language you are on and which exists at all.
   Only rendered on pages that actually have a translation; sending someone to a
   page that is not in their language is worse than not offering the switch. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  overflow: hidden;
  font-size: 13px;
  line-height: 1;
}
.lang-switch a {
  padding: 8px 12px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-switch a[aria-current] {
  background: var(--ink);
  color: var(--paper);
  cursor: default;
}
.lang-switch a:not([aria-current]):hover {
  background: var(--accent-tint);
}

/* In the mobile drawer it sits among full-width links, so it needs to stop
   stretching to the full row. */
.nav-mobile .lang-switch {
  align-self: flex-start;
  margin-top: 4px;
}

/* .nav-mobile a:not(.btn) is (0,2,1) and beat the (0,1,1) rule above, so inside
   the drawer the NL/EN links inherited the 30px menu type, the drawer's link
   underline and its vertical padding — the pill came out nearly twice the size
   it is in the header. This selector is (0,3,1) and puts it back. */
.nav-mobile .lang-switch a:not(.btn) {
  font-size: 13px;
  font-weight: 400;
  padding: 8px 12px;
  border-bottom: 0;
  color: var(--ink);
}

/* Same clash again, this time on colour: the drawer rule and the active-segment
   rule are both (0,2,1), so source order won and the active label went dark on
   a dark fill — invisible. */
.nav-mobile .lang-switch a[aria-current]:not(.btn) {
  color: var(--paper);
}

/* Floating WhatsApp action — on every page, at every scroll position.
   Deliberately NOT in the header: the header already carries logo, nav, language
   switch, CTA and burger, and adding a sixth item is what breaks the layout in
   the band just above the mobile breakpoint. Floating keeps it out of that fight.
   Filled accent rather than WhatsApp green: the system allows one accent hue and
   forbids other colours; the glyph carries recognition. */
.wa-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--paper);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.wa-fab:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
}
.wa-fab .icon {
  width: 22px;
  height: 22px;
}

/* A ring that travels around the button rather than a pulse that fires at the
   whole thing: a halo blinking on a contractor's site reads as an ad. This is a
   thin light sweep along the outline, slow enough to notice only once.
   ::before is the moving sheen, ::after the steady hairline it rides on. */
.wa-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.wa-fab::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--wa-angle, 0deg),
    transparent 0deg,
    transparent 300deg,
    rgba(255, 255, 255, 0.9) 340deg,
    rgba(255, 255, 255, 0) 360deg
  );
  /* Mask to the border only, so the sweep runs along the outline and never
     washes over the icon. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: wa-sweep 3.6s linear infinite;
}

@property --wa-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes wa-sweep {
  to {
    --wa-angle: 360deg;
  }
}

/* Browsers without @property cannot animate the custom angle, so the sweep
   would sit frozen on one side. Rotating the element is the fallback. */
@supports not (background: conic-gradient(from var(--x, 0deg), red, blue)) {
  .wa-fab::before {
    background: conic-gradient(transparent 0deg 300deg, rgba(255, 255, 255, 0.9) 340deg, transparent 360deg);
    animation: wa-spin 3.6s linear infinite;
  }
  @keyframes wa-spin {
    to { transform: rotate(360deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab::before {
    animation: none;
    opacity: 0.35;
  }
}

/* On a phone the label costs width that the thumb does not need — the glyph is
   understood on its own, so it collapses to a circle. */
@media (max-width: 640px) {
  .wa-fab {
    gap: 0;
    padding: 0;
    width: 54px;
    height: 54px;
    justify-content: center;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .wa-fab-label {
    display: none;
  }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header.is-scrolled {
  background: var(--paper);
  border-bottom-color: var(--hairline);
  box-shadow: 0 8px 24px -20px rgba(31, 42, 51, 0.5);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--text-subheading);
  color: var(--ink);
}
.logo img {
  display: block;
  height: 40px;
  width: auto;
}
@media (min-width: 900px) {
  .logo img { height: 46px; }
}

.nav-desktop {
  display: none;
}

@media (min-width: 900px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .nav-desktop a:not(.btn) {
    font-weight: 400;
    font-size: var(--text-caption);
    color: var(--ink);
    position: relative;
    padding: 0.5rem 0.9rem;
    transition: opacity 0.2s var(--ease);
  }
  .nav-desktop a:not(.btn):hover { color: var(--accent); }
  .nav-desktop a:not(.btn)[aria-current="page"] {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.nav-divider { display: none; }

.nav-cta { display: none; }
@media (min-width: 900px) {
  .nav-cta { display: inline-flex; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--ink);
}
.nav-toggle .icon { width: 30px; height: 30px; }
.nav-toggle .icon-close { display: none; }
@media (min-width: 900px) {
  .nav-toggle { display: none; }
}

.nav-mobile {
  position: fixed;
  inset: 76px 0 0 0;
  background: var(--paper);
  padding: 24px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  z-index: 90;
}
.nav-mobile.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.nav-mobile a:not(.btn) {
  font-family: var(--font);
  font-size: var(--text-heading-sm);
  font-weight: 400;
  color: var(--ink);
  padding-block: 0.4rem;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 900px) {
  .nav-mobile { display: none; }
}

body.nav-open { overflow: hidden; }

/* Hero — full-bleed photo, monumental type + wordmark laid over the image */
.hero {
  position: relative;
  min-height: min(74vh, 680px);
  display: flex;
  overflow: hidden;
  background: var(--canvas);
  color: var(--text-on-dark);
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  will-change: transform;
}

/* Light slate wash for depth — the SVG is already slate, so keep the drawing visible */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(31, 42, 51, 0.35) 0%, rgba(31, 42, 51, 0) 34%, rgba(31, 42, 51, 0.3) 100%),
    linear-gradient(90deg, rgba(31, 42, 51, 0.65) 0%, rgba(31, 42, 51, 0) 55%);
}

.hero-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding-block: 116px 56px;
}

@media (min-width: 900px) {
  .hero-content { padding-block: 128px 72px; }
}

.hero-copy { display: grid; gap: 20px; max-width: 640px; }

.hero-kicker {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: 0.02em;
  color: var(--text-on-dark);
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1.02;
  color: var(--paper);
}

.hero .lead {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  color: var(--paper);
  max-width: 46ch;
}

/* Two CTAs since 2026-07: needs its own gap, otherwise the buttons touch when
   they wrap onto two lines on a phone. Works both side-by-side and stacked. */
.hero .hero-actions {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* One line under the buttons explaining what the WhatsApp route is for. A third
   pill on its own reads as "another way to contact us"; the point is that you
   can send a photo and get an answer without booking anything. */
.hero .hero-note {
  margin-top: 1rem;
  max-width: 46ch;
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.72);
}

/* Hero blueprint animatie — het huis wordt doorlopend getekend en gewist */
.bp-draw {
  stroke-linecap: round;
  stroke-dasharray: 1 1;      /* pathLength=1: één volle lengte "aan", één "uit" */
  stroke-dashoffset: 1;       /* start onzichtbaar */
  animation: bp-draw 5s ease-in-out infinite;
}
.bp-draw-white    { stroke-width: 1.75; animation-duration: 5s;   animation-delay: 0.15s; }
.bp-draw-blue     { stroke-width: 2.5;  animation-duration: 5.6s; animation-delay: 0s; }
.bp-draw-scaffold { stroke-width: 1.25; animation-duration: 4.4s; animation-delay: 0.4s; opacity: 0.8; }

@keyframes bp-draw {
  0%   { stroke-dashoffset: 1; }    /* onzichtbaar */
  45%  { stroke-dashoffset: 0; }    /* volledig getekend */
  70%  { stroke-dashoffset: 0; }    /* even blijven staan */
  100% { stroke-dashoffset: -1; }   /* weer weggeveegd */
}

/* Maatlijnen: doorlopend "marching ants" */
.bp-dims { animation: bp-march 1.4s linear infinite; }
@keyframes bp-march { to { stroke-dashoffset: -12; } }

/* Scan-band glijdt over de tekening */
.bp-scan { animation: bp-scan 6.5s ease-in-out infinite; }
@keyframes bp-scan {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(1660px); }
}

/* Pulserende meetpunten */
.bp-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: bp-pulse 2.4s ease-in-out infinite;
}
@keyframes bp-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.7); }
}

/* Langzaam draaiende detailcirkels */
.bp-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: bp-spin 48s linear infinite;
}
@keyframes bp-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bp-draw { animation: none; stroke-dashoffset: 0; }   /* toon het voltooide huis */
  .bp-dims, .bp-pulse, .bp-spin { animation: none; }
  .bp-scan { display: none; }
}

/* Intro (two-column text block) */
.intro {
  padding-block: var(--section-gap);
}

.intro .container {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 900px) {
  .intro .container {
    grid-template-columns: 280px 1fr;
    gap: var(--element-gap);
  }
}

.intro-caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--ink);
  max-width: 280px;
}

.intro-copy p + p { margin-top: 1.1rem; }
.intro-copy { color: var(--text); font-size: var(--text-body); line-height: var(--leading-body); }

/* Section heading */
.section-head {
  max-width: 640px;
  margin-bottom: 40px;
}
.section-head p.caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--ink);
  margin-bottom: 16px;
}
.section-head h2 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
}
.section-head p.support {
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.section-head.on-dark p.support { color: var(--text-on-dark-muted); }
.section-head.on-dark h2 { color: var(--paper); }
.section-head.on-dark p.caption { color: var(--paper); }

/* Services — product image card grid */
.services { padding-block: var(--section-gap); }

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--element-gap);
}

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

.service-card {
  position: relative;
  border: 1px solid var(--mist);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  padding: calc(var(--card-padding) + 8px);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.service-card:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 32px -20px rgba(31, 42, 51, 0.45);
}

.service-card .icon-chip {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-card);
  background: var(--accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: background-color 0.2s var(--ease);
}
.service-card:hover .icon-chip { background: var(--accent); }
.service-card .icon-chip .icon {
  width: 26px;
  height: 26px;
  color: var(--accent);
  transition: color 0.2s var(--ease);
}
.service-card:hover .icon-chip .icon { color: var(--paper); }

.service-card-body {
  flex: 1;
}
.service-card h3 {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  margin-bottom: 0.5rem;
}
.service-card p {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--text-muted);
  max-width: 34ch;
}

.service-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--accent);
}
.service-card-arrow .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.2s var(--ease);
}
.service-card:hover .service-card-arrow .icon { transform: translateX(4px); }

/* Why us (anodized graphite dark surface) */
.why-us {
  background: var(--graphite);
  color: var(--text-on-dark);
  padding-block: var(--section-gap);
  position: relative;
}

.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--element-gap);
}

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

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

.pillar {
  padding: calc(var(--card-padding) + 8px);
  border: 1px solid var(--steel);
  border-radius: var(--radius-card);
  transition: border-color 0.2s var(--ease);
}
.pillar:hover { border-color: var(--accent); }

.pillar .icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-card);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.pillar .icon-wrap .icon { width: 24px; height: 24px; color: var(--accent); }

.pillar h3 {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  margin-bottom: 0.4rem;
}

.pillar p {
  color: var(--text-on-dark-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

/* Reviews */
.reviews { padding-block: var(--section-gap); background: var(--paper); }

.reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: var(--text-caption);
}
.stars { color: var(--ink); font-size: 1.1rem; letter-spacing: 0.05em; }
.rating-text { font-weight: 400; }
.rating-link {
  font-weight: 400;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

.review-grid {
  display: grid;
  gap: var(--element-gap);
}
@media (min-width: 620px) {
  .review-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 940px) {
  .review-grid { grid-template-columns: repeat(3, 1fr); }
}

.review-card {
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}
.review-card .stars { display: block; margin-bottom: 0.9rem; }
.review-card blockquote {
  margin: 0 0 1.1rem;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text);
}
.review-card cite {
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.reviews-note {
  margin-top: 1.5rem;
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* Process */
.process { padding-block: var(--section-gap); }

/* Below 760px the four steps stack into one column and nothing in this section
   is meant to sit outside the container any more — the connecting arrow is
   hidden at that width. Clipping the axis makes that guarantee structural, so a
   decorative absolutely-positioned child can never scroll the page sideways
   again. overflow-x:clip rather than hidden: it does not create a scroll
   container and leaves sticky positioning alone. */
@media (max-width: 759px) {
  .process {
    overflow-x: clip;
  }
}

.process .container > .process-intro {
  display: grid;
  gap: 40px;
  align-items: center;
  margin-bottom: 76px;
}

@media (min-width: 900px) {
  .process .container > .process-intro {
    grid-template-columns: 1fr 0.85fr;
    gap: 40px;
  }
}

.process-copy p.caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--ink);
  margin-bottom: 16px;
}
.process-copy h2 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  margin: 0 0 14px;
}
.process-copy .lead {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  margin-bottom: 1rem;
}
.process-copy p:not(.lead):not(.caption) { color: var(--text-muted); font-size: var(--text-body); line-height: var(--leading-body); }
.process-copy p + p { margin-top: 0.9rem; }

.process-media img {
  border-radius: var(--radius-card);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* Steps — horizontal flow, big numbers (no circles), arrow to next step */
.steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 44px; }
}

/* Container is only used as an in-view trigger; neutralise its own reveal transform */
.steps[data-reveal] { opacity: 1; transform: none; transition: none; }

.step {
  position: relative;
  padding-top: 20px;
  border-top: 2px solid var(--accent);
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--reveal-index, 0) * 220ms);
}
.steps.is-visible .step {
  opacity: 1;
  transform: translateX(0);
}

.step-number {
  display: block;
  font-family: var(--font);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 16px;
}

.step h3 { font-size: var(--text-subheading); line-height: var(--leading-subheading); margin-bottom: 0.3rem; }
.step p { color: var(--text-muted); font-size: var(--text-caption); line-height: var(--leading-caption); }

/* Arrow pointing from each step to the next */
.step-arrow {
  position: absolute;
  top: 8px;
  right: -34px;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  transition-delay: calc(var(--reveal-index, 0) * 220ms + 220ms);
}
/* The arrow points from one step to the next and lives in the gap between the
   four columns. Stacked in one column below 760px it points at nothing and,
   being absolutely positioned at right:-34px, it hangs past the container and
   made the whole page scroll sideways at 320px. */
@media (max-width: 759px) {
  .step-arrow {
    display: none;
  }
}

.step-arrow .icon {
  width: 24px;
  height: 24px;
  display: block;
  animation: step-nudge 1.6s var(--ease) infinite;
}
.steps.is-visible .step-arrow { opacity: 1; }

@keyframes step-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

/* Mobile: stacked — arrow points down to the next step */
@media (max-width: 759px) {
  .step-arrow {
    top: auto;
    right: auto;
    left: 0;
    bottom: -30px;
  }
  .step-arrow .icon { transform: rotate(90deg); animation: step-nudge-down 1.6s var(--ease) infinite; }
}
@keyframes step-nudge-down {
  0%, 100% { transform: rotate(90deg) translateX(0); }
  50% { transform: rotate(90deg) translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .step { opacity: 1; transform: none; transition: none; }
  .step-arrow { opacity: 1; }
  .step-arrow .icon { animation: none; }
}

/* FAQ */
/* Projects gallery */
.projects { padding-block: var(--section-gap); background: var(--paper); }

.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--element-gap);
}
@media (min-width: 640px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .projects-grid { grid-template-columns: repeat(3, 1fr); }
}

.project-card {
  position: relative;
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--mist);
  text-decoration: none;
}
.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}
.project-card:hover img { transform: scale(1.06); }
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 42, 51, 0.74) 0%, rgba(31, 42, 51, 0) 58%);
}

.project-caption {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 20px;
  color: var(--paper);
}
.project-caption h3 {
  font-size: var(--text-subheading);
  line-height: 1.2;
  color: var(--paper);
  margin-bottom: 2px;
}
.project-caption span {
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.82);
}

.projects-cta { margin-top: 40px; }

.faq { padding-block: var(--section-gap); background: var(--paper); }

.faq-layout {
  display: grid;
  gap: 40px;
}
@media (min-width: 900px) {
  .faq-layout {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 64px;
    align-items: start;
  }
}

.faq-aside {
  min-width: 0;
}
/* Dutch compounds like "badkamerrenovatie" are longer than the column at 320px;
   let them break rather than widen the page. */
.faq-aside h2 {
  overflow-wrap: break-word;
}

.faq-aside p.caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--ink);
  margin-bottom: 16px;
}
.faq-aside h2 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  margin-bottom: 1rem;
}
.faq-aside-support {
  color: var(--text-muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  max-width: 34ch;
  margin-bottom: 1.75rem;
}
@media (min-width: 900px) {
  .faq-aside { position: sticky; top: 108px; }
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.faq-item:hover { border-color: var(--mist); }
.faq-item.is-open {
  border-color: var(--accent);
  box-shadow: 0 12px 32px -22px rgba(31, 42, 51, 0.5);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  padding: 20px 22px;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  color: var(--ink);
}

/* Plus/minus toggle */
.faq-toggle {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}
.faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.is-open .faq-toggle::after {
  transform: translate(-50%, -50%) rotate(0);
  opacity: 0;
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s var(--ease);
}
.faq-answer > div { overflow: hidden; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer p {
  color: var(--text-muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  padding: 0 22px 22px;
  max-width: 60ch;
}

/* Final CTA */
.cta-final {
  background: var(--canvas);
  color: var(--paper);
  padding-block: 76px;
  text-align: left;
}
.cta-final .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cta-final h2 { font-size: var(--text-heading); line-height: var(--leading-heading); max-width: 26ch; }

/* Footer */
.site-footer {
  background: var(--paper);
  color: var(--text-muted);
  border-top: 1px solid var(--hairline);
  padding-block: 40px 32px;
}

.footer-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
  }
  .footer-brand { max-width: 340px; }
}

.footer-brand .logo { color: var(--ink); }
.footer-brand .logo img { height: 38px; }
.footer-brand p { margin-top: 0.75rem; max-width: 32ch; font-size: var(--text-caption); line-height: var(--leading-caption); }

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  color: var(--ink);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.footer-social .icon { width: 20px; height: 20px; }

.footer-col h3 {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-family: var(--font);
  font-weight: 400;
}
.footer-col ul { display: grid; gap: 0.65rem; }
.footer-col a { font-size: var(--text-caption); color: var(--text); }
.footer-col a:hover { color: var(--accent); }

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.footer-contact .icon { width: 18px; height: 18px; color: var(--accent); }
.footer-contact li a,
.footer-contact li span { font-size: var(--text-caption); color: var(--text); }
.footer-contact li a:hover { color: var(--accent); }

.footer-bottom {
  border-top: 1px solid var(--hairline);
  margin-top: 40px;
  padding-top: 20px;
  font-size: var(--text-caption);
  color: var(--text-muted);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 1.5rem;
  text-align: center;
}
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }
.footer-rating { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.6rem; }
.footer-rating a { color: var(--text-muted); text-decoration: none; }
.footer-rating a:hover { color: var(--accent); }
@media (min-width: 760px) {
  .footer-bottom {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: left;
  }
  .footer-legal { justify-content: flex-start; }
  .footer-copy { justify-self: center; }
  .footer-rating { justify-self: end; justify-content: flex-end; }
}

/* ===== Contact page ===== */
.page-header {
  background: var(--paper);
  padding-block: 140px 8px;
}
.page-header p.caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--ink);
  margin-bottom: 16px;
}
.page-header h1 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  max-width: 20ch;
  margin-bottom: 1rem;
}
.page-header .lead {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  color: var(--text-muted);
  max-width: 56ch;
}

/* .btn is inline-flex, so after a paragraph it becomes an inline-level box on
   the next line. Its 16px vertical padding makes it taller than that line box,
   and an inline box grows upward — so on /totaalrenovatie and
   /badkamer-renovatie the pill sat on top of the last line of the lead.
   Turning it into a block in this context is the fix; the margin is then just
   spacing, not a patch over an overlap. */
.page-header .lead + .btn {
  display: inline-flex;
  margin-top: 28px;
  vertical-align: top;
}
.page-header .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact { padding-block: 56px var(--section-gap); }

.contact-layout {
  display: grid;
  gap: 40px;
}
@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 64px;
    align-items: start;
  }
}

.contact-info h2,
.contact-form-wrap h2 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  margin-bottom: 0.75rem;
}
.contact-info-lead {
  color: var(--text-muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  max-width: 40ch;
  margin-bottom: 28px;
}

.contact-cards {
  list-style: none;
  display: grid;
  gap: 12px;
}
.contact-cards li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  transition: border-color 0.2s var(--ease);
}
.contact-cards li:hover { border-color: var(--mist); }
.contact-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-card);
  background: var(--accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-icon .icon { width: 22px; height: 22px; color: var(--accent); }
.contact-card-label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.contact-cards a,
.contact-cards div > span:last-child {
  font-size: var(--text-body);
  color: var(--ink);
}
.contact-cards a:hover { color: var(--accent); }

.contact-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-size: var(--text-caption);
  color: var(--text-muted);
}
.contact-rating .stars { color: var(--ink); }

.contact-form-wrap {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 32px;
}
@media (min-width: 620px) { .contact-form-wrap { padding: 40px; } }

.contact-form { display: grid; gap: 20px; margin-top: 10px; }
.form-row { display: grid; gap: 20px; }
@media (min-width: 560px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}
.form-field { display: grid; gap: 8px; }
.form-field label {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--ink);
}
.form-field label span { color: var(--accent); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: var(--font);
  font-size: var(--text-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: var(--radius-card);
  padding: 12px 14px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: #9aa3ab; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.form-submit { justify-self: start; margin-top: 4px; }
.form-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 52ch;
}

/* Contact page — split panel design */
.contact-v2 { padding-block: 56px var(--section-gap); }
.contact-split { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .contact-split { grid-template-columns: 0.92fr 1.08fr; gap: 28px; align-items: stretch; }
}

.contact-panel {
  background: var(--canvas);
  color: var(--text-on-dark);
  border-radius: var(--radius-card);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.contact-panel h2 {
  color: var(--paper);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  margin-bottom: 0.75rem;
}
.contact-panel-top > p {
  color: var(--text-on-dark-muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin-bottom: 32px;
  max-width: 38ch;
}
.contact-methods { list-style: none; display: grid; gap: 22px; }
.contact-methods li { display: flex; align-items: flex-start; gap: 16px; }
.contact-methods .contact-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--steel);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-methods .contact-icon .icon { width: 22px; height: 22px; color: #5ab0ee; }
.contact-methods .m-label { display: block; font-size: 13px; color: var(--text-on-dark-muted); margin-bottom: 3px; }
.contact-methods .m-value,
.contact-methods a { font-size: var(--text-body); color: var(--paper); }
.contact-methods a { transition: color 0.2s var(--ease); }
.contact-methods a:hover { color: #5ab0ee; }

.contact-panel-foot { display: flex; flex-direction: column; gap: 18px; }
.contact-panel-social { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-panel-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--steel);
  color: var(--paper);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.contact-panel-social a:hover { background: var(--accent); border-color: var(--accent); }
.contact-panel-social .icon { width: 20px; height: 20px; }
.contact-panel-rating { display: flex; align-items: center; gap: 10px; font-size: var(--text-caption); color: var(--text-on-dark-muted); }
.contact-panel-rating .stars { color: #f2b705; letter-spacing: 0.05em; }

.contact-form-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 40px;
}
.contact-form-card h2 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  margin-bottom: 1.25rem;
}
@media (max-width: 620px) {
  .contact-panel, .contact-form-card { padding: 28px; }
}

/* Contact page — centered design (v3) */
.contact-v3 { padding-block: 48px var(--section-gap); }

.contact-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
@media (min-width: 700px) {
  .contact-tiles { grid-template-columns: repeat(3, 1fr); }
}
.contact-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
a.contact-tile:hover { border-color: var(--accent); box-shadow: 0 12px 30px -22px rgba(31, 42, 51, 0.5); }
.contact-tile .contact-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-card);
  background: var(--accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-tile .contact-icon .icon { width: 22px; height: 22px; color: var(--accent); }
.contact-tile .t-label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 2px; }
.contact-tile .t-value { font-size: var(--text-body); color: var(--ink); }

.contact-form-panel {
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper);
  padding: 32px;
}
@media (min-width: 620px) { .contact-form-panel { padding: 48px; } }
.contact-form-intro { text-align: center; margin-bottom: 28px; }
.contact-form-intro h2 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  margin-bottom: 0.5rem;
}
.contact-form-intro p { color: var(--text-muted); font-size: var(--text-body); line-height: var(--leading-body); }

.contact-strip {
  max-width: 720px;
  margin: 28px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.contact-strip .contact-social { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-strip .contact-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  color: var(--ink);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.contact-strip .contact-social a:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.contact-strip .contact-social .icon { width: 20px; height: 20px; }
.contact-rating2 { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-caption); color: var(--text-muted); }
.contact-rating2 .stars { color: #f2b705; letter-spacing: 0.05em; }

.contact-map-wrap { margin-top: 56px; }
.contact-map {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  line-height: 0;
}
.contact-map iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
  filter: grayscale(1) contrast(0.96) brightness(1.08);
  transition: filter 0.45s var(--ease);
}
/* Brand-coloured tint over the map (clicks pass through) */
.contact-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: multiply;
  opacity: 0.09;
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
}
.contact-map:hover iframe { filter: none; }
.contact-map:hover::after { opacity: 0; }
@media (max-width: 620px) {
  .contact-map iframe { height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-map iframe { transition: none; }
  .contact-map::after { transition: none; }
}

/* ===== About / Over ons page ===== */
.about { padding-block: 64px var(--section-gap); }
.about-story { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .about-story {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 80px;
    align-items: start;
  }
}
.about-story-head p.caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--ink);
  margin-bottom: 16px;
}
.about-story-head h2 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
}
.about-lead {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  color: var(--ink) !important;
  margin-bottom: 1.5rem;
}
.about-story-copy p {
  color: var(--text-muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.about-story-copy p + p { margin-top: 1.25rem; }

.about-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 640px) {
  .about-stats { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}
.about-stat { display: flex; flex-direction: column; gap: 6px; }
.about-stat-num {
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1;
  font-weight: 600;
  color: var(--accent);
}
.about-stat-label {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--text-muted);
  max-width: 22ch;
}

.team { padding-block: var(--section-gap); }
.team-member { display: grid; gap: 32px; align-items: center; }
@media (min-width: 760px) {
  .team-member { grid-template-columns: 0.7fr 1.3fr; gap: 48px; }
}
.team-photo {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, #eef1f3 0%, var(--accent-tint) 100%);
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.team-info h3 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  margin-bottom: 2px;
}
.team-role {
  color: var(--accent);
  font-size: var(--text-caption);
  margin-bottom: 1rem;
}
.team-info p {
  color: var(--text-muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  max-width: 60ch;
}
.team-info blockquote {
  margin: 1.25rem 0 1.75rem;
  padding-left: 20px;
  border-left: 2px solid var(--accent);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  color: var(--ink);
  max-width: 46ch;
}

/* ===== Projecten page — real project gallery ===== */
.projects-gallery { padding-block: 64px var(--section-gap); }

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--element-gap);
}
@media (min-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

.gallery-card {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 4 / 5;
  background: var(--mist);
  text-decoration: none;
}
.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.gallery-card:hover img { transform: scale(1.05); }
.gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 42, 51, 0.85) 0%, rgba(31, 42, 51, 0.2) 42%, rgba(31, 42, 51, 0) 68%);
}

.gallery-caption {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px;
  color: var(--paper);
}
.gallery-num {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}
.gallery-caption h3,
.gallery-title {
  display: block;
  color: var(--paper);
  font-size: var(--text-subheading);
  line-height: 1.25;
  margin-top: 4px;
}
.gallery-loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.85);
}
.gallery-loc .icon { width: 15px; height: 15px; }

/* ===== Diensten page — icon service blocks ===== */
.services-detail { padding-block: 64px var(--section-gap); }
.services-detail .container { display: grid; gap: 0; }

.service-block {
  display: grid;
  gap: 24px;
  padding-block: 56px;
  border-top: 1px solid var(--hairline);
}
.service-block:first-child { border-top: 0; padding-top: 8px; }
@media (min-width: 860px) {
  .service-block {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 64px;
  }
}

.service-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-card);
  background: var(--accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.service-icon .icon { width: 32px; height: 32px; color: var(--accent); }
.service-block-num {
  display: block;
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 8px;
}
.service-block-head h2 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
}
.service-block-body > p {
  color: var(--text-muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  max-width: 54ch;
  margin-bottom: 1.5rem;
}

/* .btn is inline-flex, so straight after the checklist it lands on the next
   line box and its vertical padding overlaps the last list row — the same trap
   as .page-header .lead + .btn. Give it a line of its own and real spacing. */
.service-checklist + .btn {
  display: inline-flex;
  margin-top: 28px;
  vertical-align: top;
}

.service-checklist { list-style: none; display: grid; gap: 12px; }
@media (min-width: 520px) {
  .service-checklist { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
}
.service-checklist li {
  position: relative;
  padding-left: 28px;
  font-size: var(--text-caption);
  line-height: 1.4;
  color: var(--ink);
}
.service-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%230073bb'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

/* ===== Project detail page ===== */
.project-detail { padding-block: 48px 0; }
.project-detail-grid { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .project-detail-grid {
    grid-template-columns: 0.72fr 1.28fr;
    gap: 64px;
    align-items: start;
  }
}

@media (min-width: 900px) {
  .project-meta { position: sticky; top: 104px; }
}
.project-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-bottom: 24px;
  transition: color 0.2s var(--ease);
}
.project-back:hover { color: var(--accent); }
.project-back .icon { width: 16px; height: 16px; }
.project-meta dl { margin: 0; border-top: 1px solid var(--hairline); }
.project-meta dl > div {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.project-meta dt { font-size: 13px; color: var(--text-muted); }
.project-meta dd { margin: 0; font-size: var(--text-body); color: var(--ink); }
.project-meta .btn { margin-top: 28px; }

.project-body .lead {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.project-body > p {
  color: var(--text-muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.project-body h2 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  margin: 2.25rem 0 1.25rem;
}
.project-tasks { list-style: none; display: grid; gap: 18px; }
.project-tasks li { position: relative; padding-left: 30px; }
.project-tasks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%230073bb'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.project-tasks strong {
  display: block;
  color: var(--ink);
  font-size: var(--text-body);
  margin-bottom: 3px;
}
.project-tasks span {
  color: var(--text-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}
.project-result {
  margin-top: 1.5rem;
  color: var(--text-muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.project-gallery-section { padding-block: 64px var(--section-gap); }
.detail-gallery { columns: 1; column-gap: var(--element-gap); }
@media (min-width: 640px) { .detail-gallery { columns: 2; } }
@media (min-width: 1000px) { .detail-gallery { columns: 3; } }
.detail-gallery img {
  width: 100%;
  margin-bottom: var(--element-gap);
  border-radius: var(--radius-card);
  display: block;
  break-inside: avoid;
  background: var(--mist);
}

/* Scroll reveal — content gracefully rises and focuses in from a soft blur */
[data-reveal] {
  opacity: 0;
  transform: translateY(48px) scale(0.985);
  filter: blur(6px);
  transition: opacity 0.85s var(--ease),
              transform 0.95s var(--ease),
              filter 0.85s var(--ease);
  transition-delay: calc(var(--reveal-index, 0) * 110ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.service-card,
.review-card {
  transition: border-color 0.2s var(--ease), transform 0.3s var(--ease),
              opacity 0.85s var(--ease), filter 0.85s var(--ease);
}
.service-card:hover,
.review-card:hover {
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* VCA-sectie (over-ons) — trust card */
.vca { padding-block: 24px 80px; }
.vca-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 56px;
  align-items: center;
  max-width: none;
  background: var(--accent-tint);
  border: 1px solid rgba(0, 115, 187, 0.18);
  border-radius: 14px;
  padding: 40px 44px;
}
.vca-badge {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vca-badge img { width: 190px; max-width: 100%; height: auto; display: block; }
.vca-copy .caption { color: var(--accent); margin-bottom: 8px; }
.vca-copy h2 { margin: 0 0 16px; }
.vca-copy p { color: var(--text-muted); margin: 0 0 12px; line-height: 1.65; }
.vca-copy p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .vca { padding-block: 8px 56px; }
  .vca-card { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; text-align: center; }
  .vca-badge { justify-self: center; padding: 18px 22px; }
  .vca-badge img { width: 160px; }
}

/* VCA-badge in footer */
.footer-vca {
  display: inline-block;
  margin-top: 8px;
}
.footer-vca img { width: 104px; height: auto; display: block; }

/* Brochure / catalogus-blok */
.brochure { padding-block: 8px 88px; }
.brochure-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  grid-template-areas:
    "copy   visual"
    "langs  visual";
  column-gap: 40px;
  align-items: center;
}
.brochure-copy   { grid-area: copy;  align-self: end; }
.brochure-visual { grid-area: visual; align-self: center; }
.brochure-copy .caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--ink);
  margin: 0 0 16px;
}
.brochure-copy h2 { font-size: var(--text-heading); line-height: var(--leading-heading); margin: 0 0 16px; }
.brochure-copy p { color: var(--text-muted); font-size: var(--text-body); margin: 0; line-height: var(--leading-body); max-width: 46ch; }
.brochure-langs { grid-area: langs; align-self: start; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; }
.brochure-visual img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-card);
  animation: brochureFloat 7s ease-in-out infinite;
}
@keyframes brochureFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@media (max-width: 860px) {
  .brochure { padding-block: 8px 56px; }
  .brochure-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "visual" "langs";
    row-gap: 22px;
  }
  .brochure-copy { align-self: auto; }
  .brochure-copy p { max-width: none; }
  .brochure-langs { align-self: auto; margin-top: 0; }
  .brochure-visual img { max-width: 460px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .brochure-visual img { animation: none; }
}

/* ---- Juridische / legal-pagina ---- */
.legal { padding-block: 4px 88px; }
.legal .container { max-width: var(--content-max); }
.legal h2, .legal p, .legal ul, .legal .legal-updated { max-width: 760px; }
.legal h2 { font-size: var(--text-subheading); margin: 40px 0 12px; color: var(--ink); }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--text-muted); line-height: 1.7; margin-bottom: 14px; }
.legal ul { list-style: disc; padding-left: 22px; margin-bottom: 14px; }
.legal li { color: var(--text-muted); line-height: 1.7; margin-bottom: 6px; }
.legal a { color: var(--accent); text-decoration: underline; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal .legal-updated { font-size: var(--text-caption); color: var(--steel); margin-top: 40px; }

/* ---- Footer juridische balk (onderaan) ---- */
.footer-legal-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 16px;
  font-size: var(--text-caption);
  color: var(--text-muted);
}
.footer-legal-bar a,
.footer-legal-bar a:hover,

/* ---- Video / Shorts ---- */
.shorts { padding-block: var(--section-gap); }
/* A grid/flex child defaults to min-width:auto, so the horizontal shorts
   scroller refused to shrink below its content and pushed the page sideways on
   a 320px screen. The same reason the FAQ column overflowed there. */
/* overflow-x:auto alone leaves overflow-y computed as auto, and the cards'
   rounded corners then let the container report a wider scroll box than the
   viewport at 320px. Pinning overflow-y closes the last sideways scroll. */
.shorts-grid {
  min-width: 0;
  max-width: 100%;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
.shorts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.short-card {
  position: relative; display: block;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-card); overflow: hidden;
  background: var(--ink);
}
.short-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.short-card:hover img { transform: scale(1.05); }
.short-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.short-play svg { width: 60px; height: 60px; transition: transform 0.3s var(--ease); filter: drop-shadow(0 2px 10px rgba(0,0,0,0.35)); }
.short-card:hover .short-play svg { transform: scale(1.08); }
.shorts-cta { text-align: center; margin-top: 36px; }
@media (max-width: 640px) {
  .shorts-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .short-card { flex: 0 0 64%; scroll-snap-align: start; }
  .shorts-grid { scroll-padding-left: 20px; }
}

/* Two last 320px overflows, both from the same cause: a grid child that will not
   shrink below its content. .process-copy holds long Dutch compounds; the
   page-header button is nowrap and "Vrijblijvend adviesgesprek aanvragen" is
   simply wider than a 320px column, so below 360px it may wrap. */
.process-copy {
  min-width: 0;
}
@media (max-width: 360px) {
  .page-header .btn,
  .hero-actions .btn {
    white-space: normal;
    text-align: center;
  }
}