/* Gedeelde stylesheet voor de blokken-bibliotheek (sectie 4.2/5.9) —
   tenant-agnostisch: elke regel hier leest alleen de semantische
   design-tokens (--color-*, --font-*, --radius, ...) die elke tenant's eigen
   tokens.css (web/templates/tenants/<naam>/tokens.css) invult. Nooit een
   hexcode of tenant-naam in dit bestand — dat zou precies het grep-check
   acceptatiecriterium (2.1/sectie 15) breken als dit bestand in
   internal/core stond, en blijft ook zo als disciplineregel nu het
   toevallig in internal/core/staticassets zit. (Neutrale zwart/wit-waarden
   in rgba() voor schaduwen en overlays zijn geen tenantkleur.)

   Het volledige token-contract, met wat elk token stuurt, staat in
   docs/ARCHITECTURE.md §9 punt 6 en §19 (iteratie 8d). Elk token dat na
   iteratie 5 is toegevoegd heeft hieronder een fallback via var(--x, ...),
   zodat een tenant alleen hoeft te zetten waarin hij afwijkt.

   Zelf-gehost (geen Google Fonts-CDN-request vanuit de bezoekers browser,
   zie docs/ARCHITECTURE.md §9) — twee variable-font-bestanden dekken het
   volledige gewichtsbereik (wght-as), dus elk gewicht dat een tenant via
   --heading-weight kiest is echt, niet synthetisch. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* Relatief pad: zo valt het lettertype onder dezelfde versie in de URL als
     dit bestand zelf (/static/v/<versie>/, staticassets.Cached). */
  src: url('fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-latin.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight, 600);
  color: var(--color-heading);
  line-height: 1.15;
  letter-spacing: var(--heading-tracking, 0);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2rem, 3.2vw + 1rem, 3rem); }
h2 { font-size: clamp(1.6rem, 1.6vw + 1rem, 2.25rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
img { max-width: 100%; display: block; }
/* <picture> only offers a WebP <source> (core.ResponsiveImg); the <img> inside
   keeps laying out exactly as if it stood on its own. */
picture { display: contents; }
a { color: inherit; }
[x-cloak] { display: none !important; }
/* The hidden attribute must beat any display rule below (img { display: block }
   above silently cancelled it — the offering-detail gallery's photo switch). */
[hidden] { display: none !important; }

.container {
  max-width: var(--container-max, 72rem);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 4rem);
}

/* Elke sectie krijgt van core.Sections (web/templates/core/section.templ)
   een view-transition-name — zie ARCHITECTURE.md §6 voor de uitleg en de
   fallback op browsers zonder support. De achtergrond (--alt/--pattern)
   kiest de tenant-code per sectie via blocks.Section.Background, niet het
   component zelf. */
.block {
  view-transition-name: var(--vt-name, none);
  border-bottom: var(--section-divider, none);
}
.block--alt { background: var(--color-bg-alt); }
.block--pattern { background-color: var(--color-bg); background-image: var(--pattern-bg, none); }
.block-inner { padding: clamp(3.5rem, 8vw, 6.25rem) 0; }

/* --- Sectiekop (gedeeld door elk blok) ---
   Uitlijning en het accentlijntje (boven de kop óf eronder) zijn tokens:
   --section-head-align, --kicker-above/--kicker-below (block|none). */
.section-head {
  max-width: 40rem;
  margin: 0 var(--section-head-margin, 0) clamp(2rem, 4vw, 3.25rem);
  text-align: var(--section-head-align, left);
}
.section-head::before,
.section-head h2::after {
  content: "";
  width: var(--kicker-width, 2.25rem);
  height: var(--kicker-height, 2px);
  background: var(--color-highlight, var(--color-accent));
}
/* --section-head-margin: "0" (links uitgelijnd) of "auto" (gecentreerd);
   het lijntje onder de kop volgt dezelfde marge. */
.section-head::before { display: var(--kicker-above, none); margin-bottom: 1.1rem; }
.section-head h2::after { display: var(--kicker-below, none); margin: 1.25rem var(--section-head-margin, 0) 0; }
.section-head h2 { margin-bottom: 0; }
.section-head p { margin: 0.9rem 0 0; color: var(--color-text-muted); }

.eyebrow {
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.more-link { margin-top: 2.25rem; }

/* --- Header / mobiel menu (Alpine.js, sectie 4.2 punt 2) --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg, var(--color-bg));
  -webkit-backdrop-filter: blur(var(--header-blur, 10px));
  backdrop-filter: blur(var(--header-blur, 10px));
  border-bottom: 1px solid var(--color-border-subtle, transparent);
  box-shadow: var(--header-shadow, none);
  transition: background-color 250ms ease, backdrop-filter 250ms ease, -webkit-backdrop-filter 250ms ease;
}
/* Scrollstanden (Alpine in header.templ): terug omhoog scrollen maakt de
   header lichter; bovenaan een pagina met een hero onder de header
   (HeroProps.UnderHeader) nog lichter, zodat de foto erdoor zichtbaar is.
   Een open mobiel menu houdt de gewone achtergrond. Zonder tokens valt
   alles terug op --header-bg/--header-blur, dus verandert er niets. */
.site-header.is-scrolling-up {
  background: var(--header-bg-up, var(--header-bg, var(--color-bg)));
  -webkit-backdrop-filter: blur(var(--header-blur-up, var(--header-blur, 10px)));
  backdrop-filter: blur(var(--header-blur-up, var(--header-blur, 10px)));
}
body:has(.hero--under-header) .site-header.is-top:not(.is-menu-open) {
  background: var(--header-bg-top, var(--header-bg, var(--color-bg)));
  -webkit-backdrop-filter: blur(var(--header-blur-top, var(--header-blur, 10px)));
  backdrop-filter: blur(var(--header-blur-top, var(--header-blur, 10px)));
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: var(--header-height, 4.5rem);
}
.site-header__brand {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight, 600);
  font-size: 1.35rem;
  text-decoration: none;
  color: var(--color-heading);
  flex-shrink: 0;
}
.site-header__brand img { height: 2.1rem; width: auto; }
.site-header__bar > nav { margin-left: auto; }
/* Met een header-knop komt het menu in het midden, zonder rechts. */
.site-header--with-cta .site-header__bar > nav { margin-right: auto; }
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header__nav a {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--nav-color, var(--color-text-muted));
  transition: color 150ms ease;
}
.site-header__nav a:hover,
.site-header__nav a[aria-current="page"] { color: var(--nav-color-active, var(--color-heading)); }
.site-header__cta { flex-shrink: 0; }
/* Een tweede knop staat strak tegen de eerste (de balk zelf heeft 2rem tussenruimte). */
.site-header__cta--extra { margin-right: -1.25rem; }

/* Uitklapmenu (spec §14 punt 16c): opent bij aanwijzen en met de pijlknop
   (toetsenbord, aanraken — Alpine zet .is-open). Kleuren per tenant via
   --menu-sub-*-tokens; zonder tokens de gewone paginakleuren. */
.site-header__parent {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.site-header__subtoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--nav-color, var(--color-text-muted));
  cursor: pointer;
}
.site-header__subtoggle svg { transition: transform 200ms ease; }
.site-header__parent:hover > .site-header__subtoggle,
.site-header__parent.is-open > .site-header__subtoggle { color: var(--nav-color-active, var(--color-heading)); }
.site-header__parent:hover > .site-header__subtoggle svg,
.site-header__parent.is-open > .site-header__subtoggle svg,
.site-header__group.is-open .site-header__subtoggle svg { transform: rotate(180deg); }
.site-header__sub {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -1.25rem;
  z-index: 60;
  min-width: 14rem;
  max-width: 20rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--menu-sub-bg, var(--color-bg));
  border: 1px solid var(--menu-sub-border, var(--color-border-subtle, var(--color-border)));
  border-radius: var(--menu-sub-radius, var(--radius));
  box-shadow: var(--menu-sub-shadow, 0 18px 40px -18px rgba(0, 0, 0, 0.35));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
/* Onzichtbare brug onder het item, zodat de muis naar het paneel kan. */
.site-header__parent::after {
  content: "";
  position: absolute;
  left: -1.25rem;
  right: 0;
  top: 100%;
  height: 0.95rem;
}
.site-header__parent:hover > .site-header__sub,
.site-header__parent.is-open > .site-header__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}
.site-header__sub a {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: calc(var(--menu-sub-radius, var(--radius)) * 0.6);
  transition: color 150ms ease, background-color 150ms ease;
}
.site-header__sub a:hover,
.site-header__sub a[aria-current="page"] { background: var(--menu-sub-hover-bg, var(--color-bg-alt, rgba(127, 127, 127, 0.12))); }
@media (prefers-reduced-motion: reduce) {
  .site-header__sub, .site-header__subtoggle svg { transition: none; }
}
.site-header__toggle {
  display: none;
  margin-left: auto;
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: 1px solid var(--color-border-subtle, var(--color-border));
  border-radius: var(--radius);
  color: var(--color-heading);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.site-header__toggle span,
.site-header__toggle span::before,
.site-header__toggle span::after {
  display: block;
  width: 1rem;
  height: 1px;
  background: currentColor;
  position: relative;
}
.site-header__toggle span::before,
.site-header__toggle span::after { content: ""; position: absolute; left: 0; }
.site-header__toggle span::before { top: -5px; }
.site-header__toggle span::after { top: 5px; }
.site-header__panel { display: none; }

@media (max-width: 58rem) {
  .site-header__nav { display: none; }
  .site-header__toggle { display: inline-flex; }
  /* De header-knop blijft zichtbaar, compact, direct links van het menu. */
  .site-header__bar { gap: 0.75rem; }
  .site-header .site-header__cta {
    margin-left: auto;
    padding: 0.6rem 0.85rem;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
  }
  .site-header--with-cta .site-header__toggle { margin-left: 0; }
  /* Alleen de eerste knop blijft in de balk; de rest staat in het menu. */
  .site-header .site-header__cta--extra { display: none; }
  /* Dicht tot Alpine .is-open zet. (Zonder JavaScript werkt de knop niet,
     dus houdt SiteLayout's <noscript>-stijl het paneel zichtbaar.) */
  .site-header__panel.is-open {
    display: flex;
    flex-direction: column;
    padding: 0.5rem clamp(1.25rem, 5vw, 4rem) 1.25rem;
    border-top: 1px solid var(--color-border-subtle, transparent);
    background: var(--color-bg);
  }
  .site-header__panel a {
    padding: 0.85rem 0;
    text-decoration: none;
    color: var(--nav-color, var(--color-text-muted));
    border-bottom: 1px solid var(--color-border-subtle, transparent);
  }
  .site-header__panel a:last-child { border-bottom: none; }
  .site-header__panel a[aria-current="page"] { color: var(--color-heading); }
  /* Een item met subitems: link en pijlknop op één rij, de subitems ingesprongen eronder. */
  .site-header__group { display: flex; flex-direction: column; }
  .site-header__grouprow {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border-subtle, transparent);
  }
  .site-header__grouprow a { flex: 1; border-bottom: none; }
  .site-header__grouprow .site-header__subtoggle { width: 2.75rem; height: 2.75rem; }
  .site-header__groupitems {
    display: none;
    flex-direction: column;
    padding-left: 1rem;
    border-bottom: 1px solid var(--color-border-subtle, transparent);
  }
  .site-header__group.is-open .site-header__groupitems { display: flex; }
  .site-header__groupitems a { font-size: 0.95em; }
}
@media (max-width: 26rem) {
  .site-header__brand img { height: 1.7rem; }
}

/* --- Knoppen (sectie 4.1: gedeeld gedrag, kleur per tenant) ---
   primary = gevulde accentkleur, lichter bij hover, pijltje schuift op;
   secondary/ghost = transparant met rand, bij hover alléén rand+tekst. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--button-padding, 0.95rem 1.6rem);
  border-radius: var(--button-radius, var(--radius));
  font-family: var(--font-body);
  font-size: var(--button-size, 0.95rem);
  font-weight: 600;
  letter-spacing: var(--button-tracking, 0);
  text-transform: var(--button-case, none);
  text-decoration: none;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.arrow-icon { flex-shrink: 0; transition: transform 150ms ease; }
.btn:hover .arrow-icon { transform: translateX(4px); }
.btn--small { padding: 0.7rem 1.3rem; font-size: calc(var(--button-size, 0.95rem) * 0.95); }
.btn--small .arrow-icon { display: none; }

.btn--primary {
  background: var(--button-primary-bg, var(--color-accent));
  color: var(--button-primary-text, var(--color-on-accent, #fff));
}
.btn--primary:hover { background: var(--button-primary-hover-bg, var(--color-accent-hover)); }

/* --button-ghost-bg/--button-ghost-filter: een "glazen" tweede knop over een foto. */
.btn--secondary {
  background: var(--button-ghost-bg, transparent);
  -webkit-backdrop-filter: var(--button-ghost-filter, none);
  backdrop-filter: var(--button-ghost-filter, none);
  color: var(--color-heading);
  border-color: var(--button-ghost-border, var(--color-border));
}
.btn--secondary:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--button-ghost-bg, transparent);
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.arrow-link:hover .arrow-icon { transform: translateX(5px); }

/* --- Pictogrammen (SiteIcon, web/templates/core/site_icons.templ) --- */
.site-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--color-accent); }

/* --- Hero ---
   Drie vormen, gekozen door de tenant-code via HeroProps.Layout:
   "split" (tekst + foto naast elkaar), "card" (foto op de achtergrond, tekst
   in een kaart links) en "center" (foto op de achtergrond, kop gecentreerd). */
.hero { position: relative; overflow: hidden; }
.hero .container {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.hero--split .container { grid-template-columns: 1.1fr 1fr; }
@media (max-width: 48rem) {
  .hero--split .container { grid-template-columns: 1fr; }
}
/* Het accentwoord in de kop: standaard de accentkleur; een tenant kan er een
   kleurverloop van maken (--heading-accent-bg + --heading-accent-color: transparent). */
.hero h1 .accent {
  color: var(--heading-accent-color, var(--color-accent));
  background: var(--heading-accent-bg, none);
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: var(--heading-accent-weight, inherit);
}
.hero__subheading { color: var(--color-text-muted); max-width: 38rem; }
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card, var(--radius));
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

.hero--card,
.hero--center {
  min-height: var(--hero-height, min(88vh, 52rem));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 40%; }
.hero__scrim { position: absolute; inset: 0; background: var(--hero-overlay, rgba(0, 0, 0, 0.35)); }
.hero--card .container,
.hero--center .container { position: relative; width: 100%; }
.hero__features .container { display: block; }
/* HeroProps.UnderHeader: de hero schuift zijn eigen hoogte-deel onder de
   sticky header (die over de foto heen komt te liggen) en houdt de inhoud
   met evenveel ruimte bovenaan uit de balk. */
.hero--under-header {
  margin-top: calc(-1 * var(--header-height, 4.5rem));
  padding-top: var(--header-height, 4.5rem);
}
.hero__card {
  max-width: 35rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--hero-card-bg, rgba(0, 0, 0, 0.42));
  -webkit-backdrop-filter: blur(var(--hero-card-blur, 14px));
  backdrop-filter: blur(var(--hero-card-blur, 14px));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card, var(--radius));
}
.hero__card h1 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); color: var(--hero-text, var(--color-heading)); }
.hero__card .hero__subheading { color: var(--hero-subtext, var(--color-text)); margin: 1.4rem 0 0; max-width: 44ch; }
.hero--center { text-align: center; }
.hero--center h1 {
  color: var(--hero-text, #fff);
  font-size: var(--hero-heading-size, clamp(2.25rem, 5vw, 4rem));
  font-weight: var(--hero-heading-weight, var(--heading-weight, 600));
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  margin: 0;
}
.hero--center .hero__subheading { color: var(--hero-subtext, #fff); margin: 1rem auto 0; }
.hero--center .hero__actions { justify-content: center; }
.hero__features {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.hero__features ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--hero-features-justify, flex-start);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero__features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.9rem;
  font-family: var(--font-heading);
  color: var(--hero-text, var(--color-heading));
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.hero__features li:first-child { padding-left: 0; border-left: none; }
@media (max-width: 58rem) {
  .hero--card { min-height: 0; padding-top: 4.5rem; }
  .hero--card.hero--under-header { padding-top: calc(var(--header-height, 4.5rem) + 4.5rem); }
  .hero--card .hero__card { max-width: none; margin-bottom: 1.5rem; }
  .hero__features { position: relative; background: var(--color-bg-alt); }
  .hero__features ul { flex-direction: column; gap: 0.9rem; }
  .hero__features li { padding: 0; border-left: none; }
}

/* --- Pagina-intro (page_intro: de kop bovenaan een subpagina) --- */
/* --page-intro-bg: optionele achtergrond (bv. een foto met verloop);
   --page-intro-align/-margin: links (left/0) of gecentreerd (center/auto). */
.page-intro {
  padding: var(--page-intro-padding, clamp(3rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem));
  background: var(--page-intro-bg, none);
  text-align: var(--page-intro-align, left);
}
.page-intro h1 { font-size: var(--page-intro-heading-size, clamp(1.9rem, 3.4vw, 2.75rem)); margin: 0; text-wrap: balance; }
.page-intro p:not(.eyebrow) { margin: 1rem var(--page-intro-margin, 0) 0; max-width: 58ch; color: var(--color-text-muted); font-size: 1.05rem; }

/* Blokken met de kop naast een foto: altijd links uitgelijnd, ook bij een
   tenant die koppen centreert — het token wordt hier lokaal overschreven. */
.about,
.contact-form-block--split { --section-head-align: left; --section-head-margin: 0; }

/* --- About --- */
.about .container {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about--with-image .container { grid-template-columns: 1fr 1fr; }
@media (max-width: 48rem) {
  .about--with-image .container { grid-template-columns: 1fr; }
}
.about .section-head { margin-bottom: 1.5rem; }
/* Zonder foto vult de tekst geen hele containerbreedte (onleesbaar lange regels):
   een kolom van ~768px, links of gecentreerd (--about-text-margin: 0 | auto). */
.about:not(.about--with-image) .about__body {
  max-width: var(--about-text-max, 48rem);
  margin-inline: var(--about-text-margin, 0);
}
.about__body p { color: var(--color-text-muted); }
/* --about-media-*: vorm van de foto (verhouding, ronding, maximale breedte,
   schaduw) — bv. een ronde portretfoto met gloed in plaats van een kader. */
.about__media {
  width: 100%;
  max-width: var(--about-media-max, none);
  margin-inline: auto;
  background: var(--color-surface);
  padding: var(--media-frame-padding, 0);
  box-shadow: var(--about-media-shadow, var(--shadow-card, none));
  border: var(--about-media-border, none);
  border-radius: var(--about-media-radius, var(--radius-card, var(--radius)));
}
.about__media img { width: 100%; aspect-ratio: var(--about-media-ratio, 9 / 10); object-fit: cover; border-radius: var(--about-media-radius, var(--radius-card, var(--radius))); }

/* --- Kaarten (offerings / portfolio "cards") --- */
.card-grid {
  display: grid;
  gap: var(--grid-gap, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.card {
  display: block;
  text-decoration: none;
  background: var(--color-surface);
  border-radius: var(--radius-card, var(--radius));
  overflow: hidden;
  border: var(--card-border, 1px solid var(--color-border-subtle, transparent));
  box-shadow: var(--shadow-card, none);
  -webkit-backdrop-filter: var(--card-filter, none);
  backdrop-filter: var(--card-filter, none);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
a.card:hover { box-shadow: var(--shadow-card-hover, var(--shadow-card, none)); }
.card__media {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
a.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: 1.35rem 1.25rem 1.5rem; }
.card__body h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.card__body p { color: var(--color-text-muted); font-size: 0.95rem; margin: 0; }

/* --- Kleurstalen (offerings_grid, Layout "swatches") --- */
.swatch-grid {
  display: grid;
  gap: clamp(1.25rem, 4vw, 3rem);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 58rem) { .swatch-grid { grid-template-columns: repeat(2, 1fr); } }
.swatch { display: block; text-decoration: none; color: inherit; }
.swatch__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-bg-alt);
  margin-bottom: 1.1rem;
  border-radius: var(--radius-card, var(--radius));
}
.swatch__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
a.swatch:hover .swatch__media img { transform: scale(1.045); }
.swatch__name { font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-heading); margin: 0 0 0.25rem; }
.swatch__sub { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }
.swatch .arrow-link { margin-top: 0.9rem; font-size: 0.78rem; }

/* --- Portfolio: mozaïek / carrousel / projectkaarten --- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 9.5rem;
  grid-auto-flow: dense;
  gap: 0.75rem;
}
.mosaic__tile {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--color-bg-alt);
  border-radius: var(--radius-card, var(--radius));
}
.mosaic__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.2, .7, .2, 1); }
.mosaic__tile:hover img { transform: scale(1.06); }
/* Het vaste ritme per vijf tegels: één hoge, één brede, dan drie gewone —
   altijd een gesloten rechthoek, ook op mobiel (twee kolommen: één grote,
   twee kleine naast elkaar, dan twee hoge). */
.mosaic__tile:nth-child(5n + 1) { grid-row: span 2; }
.mosaic__tile:nth-child(5n + 2) { grid-row: span 2; grid-column: span 2; }
@media (max-width: 48rem) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 7.5rem; gap: 0.5rem; }
  .mosaic__tile:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; }
  .mosaic__tile:nth-child(5n + 2),
  .mosaic__tile:nth-child(5n + 3) { grid-column: span 1; grid-row: span 1; }
  .mosaic__tile:nth-child(5n + 4),
  .mosaic__tile:nth-child(5n + 5) { grid-row: span 2; }
}
/* Bijschrift: verloop onderaan de foto, label (kleur) boven de titel. */
.mosaic__caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 2.5rem 1rem 0.9rem;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  transition: padding-bottom 400ms ease;
}
.mosaic__tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.mosaic__title { font-family: var(--font-heading); font-size: 1.05rem; line-height: 1.2; }
.mosaic__tile:hover .mosaic__caption { padding-bottom: 1.25rem; }
.mosaic__link { position: absolute; inset: 0; z-index: 1; }
.mosaic__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
@media (max-width: 48rem) {
  .mosaic__caption { padding: 1.75rem 0.7rem 0.6rem; }
  .mosaic__title { font-size: 0.9rem; }
  .mosaic__tag { font-size: 0.6rem; }
}
.more-link--button { display: flex; justify-content: center; }
@media (max-width: 48rem) { .more-link--button .btn { width: 100%; justify-content: center; } }

/* --- Inkomen bij scrollen (static/reveal.js zet .reveal-ready op <html> en
   .is-revealed per element zodra het in beeld komt) ---
   Zonder JavaScript, of met "minder beweging" aan, blijft alles gewoon
   zichtbaar: de begintoestand geldt alleen onder .reveal-ready. --i is de
   volgorde binnen een rij (inline gezet), voor een kleine vertraging per tegel. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }
/* Mozaïek: de foto "opent" van onder naar boven en zoomt uit. (Het clip-path
   staat op de img, niet op de tegel: een volledig weggeknipte tegel telt voor
   IntersectionObserver niet als zichtbaar en zou nooit binnenkomen.) */
.reveal-ready .mosaic__tile[data-reveal] { opacity: 1; transform: none; background: transparent; transition: none; }
.reveal-ready .mosaic__tile[data-reveal] img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.25);
  transition: clip-path 1100ms cubic-bezier(.65, 0, .25, 1), transform 1600ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.reveal-ready .mosaic__tile[data-reveal] .mosaic__caption { opacity: 0; transform: translateY(0.75rem); transition: opacity 600ms ease, transform 600ms ease; transition-delay: calc(var(--i, 0) * 120ms + 700ms); }
.reveal-ready .mosaic__tile[data-reveal].is-revealed img { clip-path: inset(0 0 0 0); transform: none; }
.reveal-ready .mosaic__tile[data-reveal].is-revealed .mosaic__caption { opacity: 1; transform: none; }
.reveal-ready .mosaic__tile[data-reveal].is-revealed:hover img { transform: scale(1.06); transition-delay: 0ms; transition-duration: 900ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal],
  .reveal-ready .mosaic__tile[data-reveal],
  .reveal-ready .mosaic__tile[data-reveal] img,
  .reveal-ready .mosaic__tile[data-reveal] .mosaic__caption { opacity: 1; transform: none; clip-path: none; transition: none; }
}

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 22%);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.25rem 0 1.25rem;
  scrollbar-width: thin;
}
.carousel__item {
  margin: 0;
  scroll-snap-align: start;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-card, var(--radius));
  box-shadow: var(--shadow-card, none);
  background: var(--color-bg-alt);
}
.carousel__item img { width: 100%; height: 100%; object-fit: cover; }
.carousel-controls { display: flex; justify-content: center; gap: 0.75rem; }
.carousel-controls button {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-heading);
  cursor: pointer;
  font-size: 1.1rem;
}
.carousel-controls button:hover { border-color: var(--color-accent); color: var(--color-accent); }
@media (max-width: 48rem) { .carousel { grid-auto-columns: 80%; } }

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
}
@media (max-width: 48rem) { .project-grid { grid-template-columns: 1fr; } }
.project { margin: 0; }
.project__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-alt); border-radius: var(--radius-card, var(--radius)); }
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.project__media { display: flex; align-items: center; justify-content: center; }
.project__fallback { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-text-muted); padding: 1rem; text-align: center; }
.project:hover .project__media img { transform: scale(1.035); }
.project__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.1rem; }
.project__meta h3 { font-size: 1.15rem; margin: 0; }
.project__tag { font-size: 0.8rem; color: var(--color-text-muted); white-space: nowrap; }
.project p { margin: 0.4rem 0 0; font-size: 0.93rem; color: var(--color-text-muted); }

/* --- Voor/na-slider (sectie 4.2 punt 1) ---
   Een doorzichtige <input type=range> ligt over de hele foto: slepen,
   klikken én pijltjestoetsen werken zo native (ook zonder Alpine blijft de
   input bedienbaar); Alpine zet alleen de clip-path en de hendel. */
.ba-slider {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 40rem;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-card, var(--radius));
  background: #000;
  user-select: none;
}
.ba-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba-slider__before { clip-path: inset(0 50% 0 0); }
.ba-slider__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 3;
}
.ba-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  z-index: 2;
  pointer-events: none;
}
.ba-slider__handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
}
.ba-slider__knob {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: #fff;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.ba-slider__range:focus-visible ~ .ba-slider__handle .ba-slider__knob { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.ba-slider__badge {
  position: absolute;
  top: 1.1rem;
  z-index: 2;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  color: #fff;
}
.ba-slider__badge--before { left: 1.1rem; background: rgba(0, 0, 0, 0.7); }
.ba-slider__badge--after { right: 1.1rem; background: var(--color-accent); color: var(--color-on-accent, #fff); }
.ba-slider__label,
.ba-note { font-size: 0.8rem; color: var(--color-text-muted); margin: 1rem 0 2rem; }
@media (max-width: 48rem) { .ba-slider { aspect-ratio: 4 / 5; } }

/* --- Werkwijze (process_steps) --- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.75rem;
  padding: 2.1rem 0;
  border-top: 1px solid var(--color-border-subtle, transparent);
}
.steps li:last-child { border-bottom: 1px solid var(--color-border-subtle, transparent); }
.steps__num { font-family: var(--font-heading); color: var(--color-accent); }
.steps h3 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.steps p { margin: 0; color: var(--color-text-muted); max-width: 56ch; }
@media (max-width: 48rem) { .steps li { grid-template-columns: 3rem 1fr; gap: 1rem; } }

/* --- Tekst (text: lopende tekst met tussenkoppen en opsommingen) ---
   De tekst staat in een leesbare kolom onder de sectiekop, uitgelijnd zoals
   die kop (--section-head-margin). */
.text-block__body {
  max-width: 68ch;
  margin: 0 var(--section-head-margin, 0);
}
.text-block .section-head { max-width: 68ch; }
.text-block__body h3 { margin: 2.25rem 0 0.6rem; font-size: 1.2rem; }
.text-block__body h3:first-child { margin-top: 0; }
.text-block__body p,
.text-block__body li { color: var(--color-text-muted); }
.text-block__body ul { margin: 0 0 1em; padding-left: 1.25rem; display: grid; gap: 0.35rem; }
.text-block__body li::marker { color: var(--color-accent); }
.text-block__body a { color: var(--color-accent); text-underline-offset: 0.2em; overflow-wrap: anywhere; }

/* --- Testimonials --- */
.testimonial-row {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.testimonial {
  margin: 0;
  background: var(--color-surface);
  border-radius: var(--radius-card, var(--radius));
  padding: 1.75rem 1.6rem;
  border: var(--card-border, 1px solid var(--color-border-subtle, transparent));
  border-top: var(--testimonial-top, var(--card-border, 1px solid var(--color-border-subtle, transparent)));
  box-shadow: var(--shadow-card, none);
}
.testimonial blockquote {
  margin: 0 0 1.25rem;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--color-heading);
}
.testimonial__author { display: flex; align-items: center; gap: 0.75rem; font-size: 0.87rem; color: var(--color-text-muted); }
.testimonial__author img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.testimonial__source {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* --- Contact met persoon (contact_intro) --- */
.contact-intro {
  display: grid;
  grid-template-columns: 13.75rem 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.contact-intro__avatar {
  width: 11.25rem;
  height: 11.25rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-subtle, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 4rem;
  color: var(--color-accent);
  margin: 0 auto;
}
.contact-intro__avatar img { width: 100%; height: 100%; object-fit: cover; }
.contact-intro .section-head { margin-bottom: 0; }
.contact-intro__body { margin: 1.25rem 0 1.75rem; color: var(--color-text-muted); max-width: 56ch; }
.contact-lines { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1rem; }
.contact-lines li { display: flex; align-items: center; gap: 0.9rem; font-size: 0.93rem; color: var(--color-text-muted); }
.contact-lines a { text-decoration: none; }
.contact-lines a:hover { color: var(--color-accent); }
@media (max-width: 48rem) {
  .contact-intro { grid-template-columns: 1fr; }
  .contact-intro__avatar { width: 5.5rem; height: 5.5rem; font-size: 2rem; margin: 0; }
}
/* Layout "portrait": een grote, staande foto die opvalt — geen rond
   profielfotootje. Een accentkader valt er schuin achter, het bijschrift
   ligt over de onderrand. Zonder foto: de initiaal groot op het patroon. */
.contact-intro--portrait {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.contact-intro--portrait .contact-intro__avatar {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  margin: 0 1.25rem 1.25rem 0;
  overflow: visible;
  border: none;
  border-radius: var(--radius-card, var(--radius));
  background: none;
  font-size: clamp(6rem, 14vw, 11rem);
}
/* ::before = het accentkader (schuin erachter), ::after = de eigen
   achtergrond eroverheen; allebei achter de foto/initiaal (z-index -1). */
.contact-intro--portrait .contact-intro__avatar::before,
.contact-intro--portrait .contact-intro__avatar::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: var(--radius-card, var(--radius));
}
.contact-intro--portrait .contact-intro__avatar::before {
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 2px solid var(--color-accent);
}
.contact-intro--portrait .contact-intro__avatar::after {
  inset: 0;
  background-color: var(--color-bg-alt);
  background-image: var(--pattern-bg, none);
}
.contact-intro--portrait .contact-intro__avatar img {
  border-radius: var(--radius-card, var(--radius));
  object-position: center 25%;
}
.contact-intro__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 1.25rem 1rem;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
  border-radius: 0 0 var(--radius-card, var(--radius)) var(--radius-card, var(--radius));
}
.contact-intro--portrait .contact-intro__body { font-size: 1.05rem; }
@media (max-width: 48rem) {
  .contact-intro--portrait { grid-template-columns: 1fr; gap: 2.75rem; }
  .contact-intro--portrait .contact-intro__avatar {
    width: calc(100% - 1.25rem);
    height: auto;
    max-width: 26rem;
    font-size: 7rem;
  }
}

/* Layout "cutout": een foto zonder achtergrond (doorzichtige PNG/WebP). De
   persoon staat op een paneel met het patroon, een accentgloed achter het
   hoofd, en steekt boven de bovenrand van het paneel uit; het bijschrift is
   een zwevend naamkaartje. Zonder foto rendert het blok als "portrait". */
.contact-intro--cutout {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.contact-intro--cutout .contact-intro__avatar {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: none;
}
/* ::after = het paneel (onderste ~78%), ::before = de gloed erachter. */
.contact-intro--cutout .contact-intro__avatar::before,
.contact-intro--cutout .contact-intro__avatar::after {
  content: "";
  position: absolute;
}
.contact-intro--cutout .contact-intro__avatar::after {
  z-index: -2;
  inset: 22% 0 0 0;
  background-color: var(--color-bg-alt);
  background-image: var(--pattern-bg, none);
  border: 1px solid var(--color-border-subtle, transparent);
  border-bottom: 3px solid var(--color-accent);
  border-radius: var(--radius-card, var(--radius));
}
.contact-intro--cutout .contact-intro__avatar::before {
  z-index: -1;
  left: 50%;
  top: 4%;
  width: 90%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--cutout-glow, radial-gradient(circle, color-mix(in srgb, var(--color-accent) 55%, transparent) 0%, transparent 65%));
}
.contact-intro--cutout .contact-intro__avatar img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 1.25rem 1.75rem rgba(0, 0, 0, 0.45));
}
.contact-intro--cutout .contact-intro__caption {
  left: -0.75rem;
  right: auto;
  bottom: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  font-size: 1rem;
  color: var(--color-heading);
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle, transparent);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-card, var(--radius));
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35);
}
.contact-intro--cutout .contact-intro__caption::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-accent) 25%, transparent);
}
.contact-intro--cutout .contact-intro__body { font-size: 1.05rem; }
@media (max-width: 48rem) {
  .contact-intro--cutout { grid-template-columns: 1fr; gap: 2.75rem; }
  .contact-intro--cutout .contact-intro__avatar {
    width: 100%;
    height: auto;
    max-width: 26rem;
  }
  .contact-intro--cutout .contact-intro__caption { left: 0.75rem; }
}

/* --- CTA-band: kop links, knop rechts --- */
.cta-band {
  background: var(--cta-bg, var(--color-bg-alt));
  color: var(--cta-text, var(--color-text));
}
.cta-band .block-inner { padding: clamp(3rem, 6vw, 5rem) 0; }
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 2.5rem;
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--cta-heading, var(--color-heading)); max-width: 18ch; margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.cta-band p { margin: 0.75rem 0 0; max-width: 48rem; color: var(--cta-text, var(--color-text-muted)); }

/* --- Formulieren (sectie 5.5/6.7): contact_form-blok + het formulier zelf ---
   Alleen tokens uit het tenant-contract; --color-error is optioneel en valt
   terug op een neutraal rood, zodat een tenant er niets voor hoeft te zetten. */
.contact-form-block { max-width: 40rem; }
.contact-form-block--split {
  max-width: var(--container-max, 72rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 58rem) { .contact-form-block--split { grid-template-columns: 1fr; } }
.contact-form-block__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card, var(--radius));
  box-shadow: var(--shadow-card, none);
}
.contact-form-block__aside {
  padding-right: clamp(0rem, 4vw, 3.5rem);
  border-right: 1px solid var(--color-border-subtle, transparent);
  align-self: stretch;
}
.contact-form-block__aside h2 { font-size: 1.5rem; }
.contact-form-block__aside p { color: var(--color-text-muted); }
.check-list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.check-list li { position: relative; padding-left: 1.2rem; font-size: 0.93rem; color: var(--color-text); }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.55rem;
  height: 1px;
  background: var(--color-accent);
}
.contact-form-block--split .section-head { margin-bottom: 1.75rem; }
.contact-form-block--split .section-head h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
@media (max-width: 58rem) {
  .contact-form-block__aside { border-right: none; padding-right: 0; }
}
.contact-form-slot { min-height: 8rem; }
.contact-form-slot__loading { color: var(--color-text-muted); }
.form-page { max-width: 40rem; }

.form {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(var(--form-columns, 1), minmax(0, 1fr));
}
.form__field { display: grid; gap: 0.45rem; align-content: start; }
/* Brede velden (tekstvak, keuze, foto) en alles wat geen veld is, altijd
   over de volle breedte — alleen korte invoervelden delen een rij. */
.form > :not(.form__field--short) { grid-column: 1 / -1; }
@media (max-width: 40rem) { .form { grid-template-columns: 1fr; } }
.form__field label,
.form__field legend { font-weight: 600; font-size: 0.9rem; color: var(--color-heading); padding: 0; }
.form__req { color: var(--color-accent); margin-left: 0.15em; }
/* Eigen checkboxveld (form-builder, iteratie 12): vakje links, label ernaast. */
.form__field--checkbox label { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 400; cursor: pointer; }
.form__field--checkbox input[type="checkbox"] { margin-top: 0.2rem; flex: none; accent-color: var(--color-accent); }
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  font: inherit;
  color: var(--color-text);
  background: var(--input-bg, var(--color-surface, var(--color-bg)));
  border: 1px solid var(--color-border-subtle, var(--color-border));
  border-radius: var(--radius);
}
.form textarea { resize: vertical; min-height: 7rem; }
/* Bestandsveld (foto-upload): border/padding op input[type=file] zelf wordt
   door geen enkele browser consistent gerespecteerd (elke browser rendert
   de knop+tekst-combinatie zelf) — ::file-selector-button kan de knop wél
   meestylen, breed ondersteund, geen JS nodig. */
.form input[type="file"] {
  width: 100%;
  padding: 1.1rem;
  font: inherit;
  color: var(--color-text-muted);
  background: var(--input-bg, var(--color-surface, var(--color-bg)));
  border: 1px dashed var(--color-border-subtle, var(--color-border));
  border-radius: var(--radius);
}
.form input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  padding: 0.6rem 1rem;
  margin-right: 0.9rem;
  color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  cursor: pointer;
}
.form input[type="file"]::file-selector-button:hover {
  background: var(--color-accent);
  color: var(--color-on-accent, #fff);
}
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

/* Keuzekaarten: het desired_offering-veld als foto-kaartjes (radio's) in
   plaats van een keuzelijst, zodra elk aanbod een coverfoto heeft. */
.form__choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.45rem;
}
.choice { position: relative; cursor: pointer; display: block; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__media {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  transition: border-color 150ms ease;
}
.choice__media img { width: 100%; height: 100%; object-fit: cover; }
.choice__label { display: block; margin-top: 0.45rem; font-size: 0.82rem; font-weight: 600; text-align: center; color: var(--color-text-muted); }
.choice:hover .choice__media { border-color: var(--color-border-subtle, var(--color-border)); }
.choice input:checked + .choice__media { border-color: var(--color-accent); }
.choice input:checked ~ .choice__label { color: var(--color-heading); }
.choice input:focus-visible + .choice__media { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.form__help { margin: 0; font-size: 0.82rem; color: var(--color-text-muted); }
.form__error { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--color-error, #d64545); }
.form__field--error input,
.form__field--error select,
.form__field--error textarea { border-color: var(--color-error, #d64545); }
.form__actions { margin-top: 0.5rem; }
.form__actions .btn { cursor: pointer; }
.form__actions .btn[disabled] { opacity: 0.6; cursor: progress; }
.form__privacy { margin: 0; font-size: 0.82rem; color: var(--color-text-muted); }
/* Honeypot: buiten beeld, niet display:none (sommige bots slaan die over). */
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-success {
  padding: 1.5rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-surface, transparent);
}
.form-success p { margin: 0; font-weight: 600; color: var(--color-heading); }

/* --- Aanbod-detailpagina (offering_detail.templ) --- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 2rem; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); }
.detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 58rem) { .detail { grid-template-columns: 1fr; } }
.detail__main {
  aspect-ratio: var(--detail-image-ratio, 3 / 4);
  overflow: hidden;
  background: var(--color-bg-alt);
  border-radius: var(--radius-card, var(--radius));
  margin-bottom: 0.9rem;
}
.detail__main { position: relative; touch-action: pan-y; }
.detail__main img { width: 100%; height: 100%; object-fit: cover; animation: detail-fade 380ms ease; }
@keyframes detail-fade { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
/* Pijltjes + teller over de grote foto (alleen met meer dan één foto). */
.detail__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background-color 150ms ease;
}
.detail__nav:hover { background: var(--color-accent); border-color: var(--color-accent); }
.detail__nav--prev { left: 0.75rem; }
.detail__nav--next { right: 0.75rem; }
.detail__count {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: var(--radius);
}
.detail__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.detail__thumb {
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-alt);
  border: 1px solid transparent;
  border-radius: var(--radius);
  opacity: 0.6;
  transition: opacity 150ms ease, border-color 150ms ease;
}
.detail__thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail__thumb:hover,
.detail__thumb[aria-pressed="true"] { opacity: 1; }
.detail__thumb[aria-pressed="true"] { border-color: var(--color-accent); }
.detail__info { position: sticky; top: 6.5rem; }
@media (max-width: 58rem) { .detail__info { position: static; } }
.detail__info h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.detail__lead { color: var(--color-text-muted); font-size: 1.02rem; }
.detail__cta { margin: 2rem 0 2.5rem; }
.detail__long { color: var(--color-text-muted); }
.detail__lead + .detail__long { margin-top: -0.25rem; }
.spec-table { margin: 0 0 1.5rem; border-top: 1px solid var(--color-border-subtle, transparent); }
.spec-table div {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border-subtle, transparent);
}
.spec-table dt { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.spec-table dd { margin: 0; font-size: 0.93rem; }
@media (max-width: 40rem) { .spec-table div { grid-template-columns: 7.5rem 1fr; } }

/* --- Footer --- */
.site-footer {
  background: var(--color-footer-bg, var(--color-bg-alt));
  color: var(--color-footer-text, var(--color-text));
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem;
  font-size: 0.9rem;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--footer-link-hover, var(--color-accent)); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(var(--footer-columns, 2), 1fr);
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (max-width: 48rem) { .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; } }
.site-footer__brand {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight, 600);
  font-size: 1.3rem;
  color: var(--footer-brand-color, var(--color-footer-text, var(--color-heading)));
  margin-bottom: 1rem;
  text-transform: var(--footer-brand-case, none);
  letter-spacing: var(--footer-brand-tracking, 0);
}
.site-footer__brand img { height: 1.8rem; width: auto; }
.site-footer__tagline { margin: 0; max-width: 40ch; opacity: 0.85; }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--footer-heading-color, var(--color-footer-text));
  text-transform: var(--footer-heading-case, none);
  letter-spacing: var(--footer-heading-tracking, 0);
  margin: 0 0 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: var(--footer-divider, 1px solid rgba(255, 255, 255, 0.1));
  font-size: 0.8rem;
  opacity: 0.75;
}

/* --- View Transitions API, met nette fallback (docs/ARCHITECTURE.md §6) ---
   Zonder support doet de browser gewoon een normale navigatie — niets van
   het bovenstaande hangt daarvan af, dit is puur progressive enhancement. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 220ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}