/* ============================================================
   CONSTELL COMPONENTS
   Alle herbruikbare bouwstenen van de website.
   ============================================================ */

/* ============================================================
   SECTIE-CATALOGUS  →  volledige uitleg + context in ../../BOUWGIDS.md §5
   Kies een sectiepatroon op context; systeem-secties staan hieronder,
   paginaspecifieke secties in de page-CSS van hun referentiepagina.

   HERO'S            .hero (index) · .hero1/.widget-toestel (sw1) ·
                     .bo-hero (branded) · .em-hero/.em-tabs (em) · .w-hero (esw)
   SOCIAL PROOF      .logo-marquee/.band-logos · .venue-grid+.venue-modal (index #verhaal)
   PRODUCT-IN-ACTIE  .agent (index #agents) · .tabs--knop+frame · .esw stepper (esw) ·
                     .mod apparaat (sw1) · .widget-toestel · .reis SVG-route (sw1) ·
                     .bo-flow keten (branded) · .marge draaiknop · .agentdemo (index) ·
                     .context proef (sw1) · .bo-sw scrollworld · .handdruk scroll-film
   CONTRAST          .compare-grid (index #vergelijk) · .note/.note--wins (index #praktijk)
   IMPACT/CIJFERS    .stats-row/.stat-ring (index #cijfers) · .impact (esw) · .cijferbalk (sw1)
   QUOTE/VERHALEN    .quote-scroll (index) · .verhaal-carrousel (overal)
   FEATURES          .feature-grid · .spec-grid · .em-stack card-stack · .em-fgrid golf ·
                     .em-rij/.bo-rij split-rijen · uitgelicht-rijen
   DOELGROEP/FOTO    .venue-card (index #doelgroepen) · .bo-seizoen · .em-darkhero/.em-strand
   CTA/PRIJS         .em-premium · .price-card (index #prijzen) · .footer
   FAQ/CROSS-SELL    .em-faq <details> · .faq-knop/.bo-faq/.vraag JS-accordion ·
                     .crosssell/.verder · .em-opl-cards switcher
   ============================================================ */

/* ---- Knoppen ------------------------------------------------
   Eén primaire knop: donker vlak, witte tekst, radius 8.
   Nooit oranje of lavender als knopvulling. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--c-ink);
  border: 1px solid var(--c-ink);
  border-radius: var(--r-btn);
  padding: 0.875rem 1.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
/* Het pijltje loopt vooruit bij hover: de knop wijst waar hij heen gaat. */
.btn .btn-pijl { width: 18px; height: 18px; flex: 0 0 auto; transition: transform var(--t-fast) var(--ease); }
.btn:hover .btn-pijl { transform: translateX(3px); }
.btn:hover { background: #2A2A33; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--outline {
  color: var(--c-ink);
  background: var(--c-surface);
  border-color: var(--c-line-strong);
}
.btn--outline:hover { background: var(--c-surface-soft); }

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

/* Secundair op donker: alleen een rand, zodat de primaire knop wint */
.btn--ghost {
  color: var(--c-on-dark);
  background: transparent;
  border-color: rgba(244, 244, 245, 0.4);
}
.btn--ghost:hover { background: rgba(244, 244, 245, 0.12); border-color: var(--c-on-dark); }

/* Compacte maat voor knoppen in menu's en panelen */
.btn--klein { padding: 0.625rem 1.125rem; }

/* ---- Chips & badges ----------------------------------------
   Volledige pill-vorm. Kleur draagt betekenis:
   orange = Constell/actief · lavender = binnenkort/secundair ·
   cream = interactie-labels · butter = "nieuw" · outline = neutraal */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
  padding: 0.5rem 1.125rem;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid transparent;
}
.chip--outline  { border-color: var(--c-line-strong); background: transparent; }
.chip--orange   { background: var(--c-orange); color: var(--c-ink); }
.chip--lavender { background: var(--c-lavender); color: var(--c-ink); }
.chip--cream    { background: var(--c-cream); color: var(--c-ink); }
.chip--butter   { background: var(--c-butter); color: var(--c-ink); }
.chip--gray     { background: var(--c-bg-shade); color: var(--c-ink); }
.chip--dark     { background: var(--c-ink); color: #fff; }

/* Badge: rechthoekig label met kleine ronde hoeken (bijv. "Nieuw & uniek") */
/* Badge: het label dat links boven een sectiekop hangt. Ruim vlak, kleine
   ronde hoeken, en een bliksem in Avondzon als het iets nieuws aankondigt. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-lead);
  font-weight: 500;
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-tile);
}
.badge svg { width: 14px; height: 20px; flex: 0 0 auto; color: var(--c-orange); }
.badge--butter { background: var(--c-butter); color: var(--c-ink); }

/* Rij met alleen een badge: links uitgelijnd, ook boven een gecentreerde kop */
.badge-rij { margin-bottom: var(--sp-6); }

/* ---- Kaarten ---- */
.card {
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-6);
}
.card--soft { background: var(--c-surface-soft); box-shadow: none; }
.card--dark { background: var(--c-dark); color: var(--c-on-dark); --focus-ring: var(--c-on-dark); }

/* Vergelijk-paneel: Constell-variant krijgt oranje rand */
.card--compare-highlight {
  border: 2px solid var(--c-orange);
}

/* ---- Icon-tile ---------------------------------------------
   Klein kaartje met lijn-icoon + label, altijd in een rij/grid. */
.tile {
  background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-surface-soft) 100%);
  border: 1px solid var(--c-line);
  border-radius: var(--r-tile);
  box-shadow: var(--shadow-tile);
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 400;
  min-width: 0;
}
.tile svg { width: 32px; height: 32px; stroke-width: 1.25; }

.tile-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 900px) { .tile-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .tile-row { grid-template-columns: repeat(2, 1fr); } }

/* ---- Lijsten met checks / kruizen ---- */
.list-check, .list-cross {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.list-check li, .list-cross li {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  font-size: var(--fs-small);
}
.list-check li::before {
  content: "✓" / "";
  font-weight: 700;
  flex: 0 0 auto;
}
.list-cross li::before {
  content: "✕" / "";
  color: var(--c-orange-deep);
  font-weight: 700;
  flex: 0 0 auto;
}
.section--dark .list-cross li::before { color: var(--c-orange); }

/* ---- Proces-kaart (1. Aanvraag → 4. Boeking) ---- */
.step-card {
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  position: relative;
}
.step-card .step-num {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
}
.step-card h3 { font-size: var(--fs-kaartkop); margin-bottom: var(--sp-1); }
.step-card .step-sub {
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-3);
}

/* ---- Stat-ring (op donkere sectie) ---- */
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}
.stat-ring {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 6px solid var(--c-lavender);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2.375rem;
  font-weight: 600;
}
/* Label en toelichting dragen de uitkomst: lead- en body-maat, niet de 14 van
   kaartmeta. Op de donkere band blijft de toelichting rustig maar leesbaar. */
.stat .stat-label { font-weight: 500; font-size: var(--fs-lead); }
.stat .stat-sub { font-size: var(--fs-body); font-weight: 300; opacity: 0.72; max-width: 22ch; }

/* ---- Polaroid-kaart ---- */
.polaroid {
  background: var(--c-surface);
  color: var(--c-ink);   /* ook leesbaar op donkere banden */
  border-radius: var(--r-polaroid);
  box-shadow: var(--shadow-pop);
  padding: 10px 10px 14px;
  width: 200px;
}
.polaroid img {
  width: 100%;
  aspect-ratio: 1 / 1.05;
  object-fit: cover;
  border-radius: var(--r-photo);
}
.polaroid figcaption {
  padding-top: var(--sp-2);
  font-size: 0.8125rem;
  font-weight: 500;
}
.polaroid figcaption .small { display: block; font-weight: 300; }

/* ---- Quote / testimonial ---- */
.quote {
  text-align: center;
  max-width: var(--container-narrow);
  margin-inline: auto;
}
/* De grote scroll-quote: altijd de grotesk, nooit serif. Quotes op een kaart
   (klantverhalen) dragen die kaart en staan wel in de serif. */
.quote blockquote {
  margin: 0 0 var(--sp-7);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.45;
  font-weight: 400;
  text-wrap: balance;
}
.quote .who { font-weight: 500; margin-bottom: var(--sp-1); }
.quote .role { font-size: var(--fs-small); color: var(--c-ink-soft); }

/* ---- Media-frame (foto's, video, product-shots) ---- */
.media-frame {
  border-radius: var(--r-media);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}

/* ---- Feature-kaart met icoon + titel + tekst ----
   Draagt hele zinnen als hoofdinhoud, geen kaartmeta: daarom body-maat (16)
   en niet de 14 van compacte kaarten. Titel en tekst verschillen in gewicht. */
.feature {
  background: var(--c-surface);
  border-radius: var(--r-tile);
  box-shadow: var(--shadow-tile);
  padding: var(--sp-5);
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  font-size: var(--fs-body);
  line-height: 1.5;
}
.feature svg { width: 24px; height: 24px; flex: 0 0 auto; stroke-width: 1.5; }
.feature b { display: block; font-weight: 500; margin-bottom: 0.15rem; }

/* ---- Prijs-kaart ---- */
.price-card {
  border-radius: var(--r-card);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}
.price-card--muted { background: var(--c-bg-shade); box-shadow: none; }
.price-card .price-head {
  display: flex;
  flex-wrap: wrap;   /* op smalle kaarten valt de chip onder de kop */
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
}
.price-card .price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
}
.price-card .price small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 300;
}

/* ---- Navigatie (site-nav, naar origineel ontwerp) ----
   Links: menu-knop (logomark + hamburger) + max. twee toplinks.
   Midden: het logotype. Rechts: Boek een demo (donker) + Login (outline). */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
}
.nav .brand {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  flex-shrink: 0;
  text-decoration: none;
}
/* Logotype op de maat van het origineel (kapitaalhoogte ±22px) */
.nav .brand img { height: 30px; width: auto; max-width: none; }

.nav-left {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.nav-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-3);
}

/* Toplinks: rustig als tekst, bij hover het inkt-knopje uit het origineel */
.nav .links {
  display: flex;
  gap: 0.25rem;
  margin-left: -0.875rem;
  font-size: var(--fs-small);
  font-weight: 400;
}
/* Alleen de toplinks zelf; niet de links binnen een uitklapmenu */
.nav .links > a,
.nav .links .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-btn);
  text-decoration: none;
  color: var(--c-ink);
  background: transparent;
  transition: background 250ms ease-in-out, color 250ms ease-in-out;
}
.nav .links > a:hover,
.nav .links .nav-trigger:hover {
  background: var(--c-ink);
  color: var(--c-on-dark);
}
/* alleen het chevronnetje in de trigger, niet de icoontjes in het mega-menu */
.nav .links > a > svg, .nav .links .nav-trigger > svg { width: 10px; height: 6px; }

/* De menu-knop (naar constell.com): doorzichtig, strakke 1px-lijnen die bij
   hover omhoog wegvallen en het woord MENU onthullen. */
.nav-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: 5.125rem;
  height: 3.375rem;
  padding: 0 0 0 var(--sp-4);
  overflow: hidden;
  font: inherit;
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--c-ink);
  border-radius: var(--r-btn);
  cursor: pointer;
}
.nav-menu-btn img { height: 28px; width: auto; flex-shrink: 0; }
.nav-menu-icon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.nav-menu-btn svg {
  width: 2.8125rem;
  height: 3.125rem;
  stroke-width: 1;
  transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
.nav-menu-label {
  height: 0;
  opacity: 0;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1.5;
  transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
.nav-menu-btn:hover svg { transform: translateY(-25%); opacity: 0; }
.nav-menu-btn:hover .nav-menu-label { height: auto; opacity: 1; transform: translateY(-150%); }

@media (max-width: 800px) {
  .nav .links, .nav-right .btn--outline { display: none; }
}
/* Compacte nav op smalle telefoons: menu + logo + demo moet in 375px passen */
@media (max-width: 480px) {
  .nav { gap: var(--sp-3); }
  .nav .brand img { height: 24px; }
  .nav-right .btn { padding: 0.625rem 0.875rem; }
  .nav-menu-btn { width: 4.5rem; height: 3rem; padding-left: var(--sp-3); }
  .nav-menu-btn img { height: 24px; }
}

/* ---- Oplossingen-menu (mega) ------------------------------
   Eén paneel onder de topbalk: gegroepeerde items met een korte uitleg,
   rechts het event management-paneel, onderin de integraties-balk. */
.nav-item { position: relative; }
.nav-item.open > .nav-trigger { background: var(--c-ink); color: var(--c-on-dark); }
.mega {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: -0.75rem;
  z-index: var(--z-drawer);
  width: max-content;
  max-width: min(64rem, calc(100vw - 3rem));
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-media);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mega[hidden] { display: none; }
.nav-item.open .mega { opacity: 1; transform: none; }
.mega-kolommen { display: grid; grid-template-columns: 17rem 17rem 14rem; gap: var(--sp-5); }
.mega-groep { display: flex; flex-direction: column; gap: 0.125rem; }
.mega-label {
  margin: 0 0 var(--sp-2);
  padding-left: 0.625rem;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-40);
}
.mega-item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: 0.625rem;
  border-radius: var(--r-tile);
  text-decoration: none;
  color: var(--c-ink);
  transition: background var(--t-fast) var(--ease);
}
/* Dezelfde inkt-hover als de toplinks; tekst, uitleg en icoon gaan mee naar krijt */
.mega-item:hover { background: var(--c-ink); color: var(--c-on-dark); }
.mega-item:hover .mega-ic { color: var(--c-on-dark); }
.mega-item:hover .mega-tekst span { color: rgba(244, 244, 245, 0.75); }
.mega-ic {
  width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px;
  color: var(--c-ink);
}
.mega-tekst { display: block; font-size: var(--fs-small); line-height: 1.45; }
.mega-tekst b { display: block; font-weight: 500; }
.mega-tekst span { display: block; color: var(--c-ink-soft); }
/* Het event management-paneel: eigen vlak, kale links */
.mega-groep--paneel {
  padding: var(--sp-4);
  background: var(--c-surface-soft);
  border-radius: var(--r-tile);
}
.mega-kop {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 500;
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--c-ink);
}
.mega-kop svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.mega-kop:hover svg { transform: translateX(3px); }
.mega-sub-intro {
  margin: 0.25rem 0 var(--sp-3);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}
.mega-sub {
  padding: 0.35rem 0.5rem;
  margin-inline: -0.5rem;
  border-radius: var(--r-btn);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  text-decoration: none;
  transition: background 250ms ease-in-out, color 250ms ease-in-out;
}
.mega-sub:hover { background: var(--c-ink); color: var(--c-on-dark); }
/* Onderbalk */
.mega-voet {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: 0.75rem 0.625rem;
  border-top: 1px solid var(--c-line);
  border-radius: 0 0 var(--r-tile) var(--r-tile);
  text-decoration: none;
  color: var(--c-ink);
  transition: background 250ms ease-in-out, color 250ms ease-in-out;
}
.mega-voet:hover { background: var(--c-ink); color: var(--c-on-dark); }
.mega-voet:hover .mega-ic { color: var(--c-on-dark); }
.mega-voet:hover .mega-tekst span { color: rgba(244, 244, 245, 0.75); }
.mega-voet .mega-pijl { width: 18px; height: 18px; margin-left: auto; transition: transform var(--t-fast) var(--ease); }
.mega-voet:hover .mega-pijl { transform: translateX(3px); }

@media (max-width: 1100px) {
  .mega-kolommen { grid-template-columns: 1fr 1fr; }
  .mega-groep--paneel { grid-column: 1 / -1; }
}

/* Uitklapmenu op volledige inkt-band (DESIGN.md §Navigation)
   Opent met --t-med; reduced-motion maakt dit automatisch instant. */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--c-dark);
  color: var(--c-on-dark);
  --focus-ring: var(--c-on-dark);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease),
              visibility 0s linear var(--t-med);
}
.nav-drawer.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.nav-drawer .nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}
.nav-drawer a:not(.btn) {
  font-family: var(--font-display);
  font-size: var(--fs-kaartkop);
  font-weight: 700;
  color: var(--c-on-dark);
  text-decoration: none;
}
.drawer-kolommen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  margin-block: var(--sp-6);
}
.drawer-hoofd { display: grid; gap: var(--sp-3); align-content: start; }
.drawer-groepen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.drawer-groep { display: grid; gap: 0.375rem; align-content: start; }
.drawer-label {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(244, 244, 245, 0.6);
}
.nav-drawer .drawer-groep a {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  color: rgba(244, 244, 245, 0.85);
  text-decoration: none;
}
.nav-drawer .drawer-groep a:hover { color: var(--c-on-dark); }
.drawer-acties { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
@media (max-width: 800px) {
  .drawer-kolommen { grid-template-columns: 1fr; gap: var(--sp-6); }
  .drawer-groepen { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
}
.nav-drawer .nav-drawer-close {
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-on-dark);
  background: none;
  border: 1px solid rgba(244, 244, 245, 0.4);
  border-radius: var(--r-btn);
  padding: 0.5rem 0.875rem;
  cursor: pointer;
}

/* ---- Drawer-plexus (Plexy-achtige logo-reveal in het menu) ----
   Een levend puntennetwerk dat het Constell-sparkle-merkteken onthult zodra het
   menu opent, daarna rustig ademt. Het canvas ligt als achtergrondlaag achter de
   menu-inhoud; het erft de zichtbaarheid van de drawer (alleen zichtbaar als open).
   Zonder JS / met reduced-motion tekent chrome.js één stille eindstand of niets.
   Hoort bij de GEDEELDE chrome: de drawer moet op ELKE pagina identiek zijn, dus
   deze regels leven hier (components.css → chrome.css) en niet in een pagina-CSS. */
.drawer-plexus {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.nav-drawer.is-open .drawer-plexus { opacity: 1; }
/* Menu-inhoud boven de plexus houden. */
.nav-drawer .nav-drawer-head,
.nav-drawer .drawer-kolommen { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .drawer-plexus { transition: none; }
}

/* ---- Subtiele hover op de grote drawer-links (Over ons … Blog) ----
   Alleen de directe serif-links, niet de knoppen in .drawer-acties.
   Groeiende Avondzon-onderlijn + klein zetje; tekst blijft chalk. */
.drawer-hoofd > a {
  width: max-content;
  background-image: linear-gradient(var(--c-orange), var(--c-orange));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 320ms var(--ease), transform 320ms var(--ease);
}
.drawer-hoofd > a:hover,
.drawer-hoofd > a:focus-visible {
  background-size: 100% 2px;
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .drawer-hoofd > a { transition: background-size 320ms var(--ease); }
  .drawer-hoofd > a:hover,
  .drawer-hoofd > a:focus-visible { transform: none; }
}

/* ---- Formulieren ---- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field > label { font-size: var(--fs-small); font-weight: 500; }
.input {
  font: inherit;
  font-weight: 300;
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-btn);
  padding: 0.75rem 1rem;
  transition: border-color var(--t-fast) var(--ease);
}
.input::placeholder { color: var(--c-ink-soft); }
.input:focus-visible { outline-offset: 0; border-color: var(--c-ink); }
.input[disabled] {
  background: var(--c-surface-soft);
  color: var(--c-ink-soft);
  cursor: not-allowed;
}
/* Error: volle inkt met Avondzon-diep kruisje — nooit rood-schreeuwend */
.field--error .input { border: 2px solid var(--c-ink); }
.field-error {
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
  font-size: var(--fs-small);
  font-weight: 400;
}
.field-error::before {
  content: "✕";
  color: var(--c-orange-deep);
  font-weight: 700;
  flex: 0 0 auto;
}

/* ---- Hover-lift (tactiel & zelfverzekerd) ---- */
.lift { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.lift:hover { transform: translateY(-2px); }

/* ---- Logo-strip ---- */
.logo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-8);
  filter: grayscale(1);
  opacity: 0.75;
}

/* ============================================================
   PATRONEN UIT DE HOMEPAGE (gepromoveerd naar het systeem)
   Alles hieronder is herbruikbaar op elke pagina. Pagina-eigen
   composities (hero, scroll-film, offerte-paneel) blijven in de
   CSS van die pagina zelf.
   ============================================================ */

/* ---- Achtergrond-flow ----
   Eén vaste, zeer zachte lichtstroom (2700px cirkel, midden boven het beeld)
   achter alle inhoud. Secties zonder eigen achtergrond laten hem doorschijnen:
   boven iets dieper grijs, naar onderen open. Precies zoals op constell.com. */
.bg-flow {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-flow span {
  position: absolute;
  left: 50%;
  top: -900px;
  width: 2700px;
  height: 2700px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-ink) 0, rgba(215, 215, 215, 0) 71%);
}

/* ---- Topbalk ----
   In de pagina meeschuivend en doorzichtig (de flow blijft zichtbaar); zodra je
   voorbij de balk scrolt schuift een tweede, vaste balk van boven in beeld. */
.site-top {
  position: relative;
  z-index: var(--z-sticky);
  background: transparent;
}
.site-top--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--c-surface-soft);
  border-bottom: 1px solid var(--c-ink);
  box-shadow: 0 10px 24px rgba(23, 23, 29, 0.10);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--t-med) ease-in-out, visibility 0s linear var(--t-med);
}
.site-top--fixed.is-in {
  transform: none;
  visibility: visible;
  transition: transform var(--t-med) ease-in-out;
}
.site-top--fixed .nav,
.site-top--fixed .brand img {
  transition: padding var(--t-med) ease-in-out, transform var(--t-med) ease-in-out;
}
/* Naar beneden scrollen = zo klein mogelijk; naar boven = weer wat ruimer */
.site-top--fixed.is-compact .nav { padding-block: var(--sp-2); }
.site-top--fixed.is-compact .brand img { transform: scale(0.9); }
.site-top--fixed.is-scrolled .nav { padding-block: var(--sp-3); }
.site-top--fixed.is-scrolled .brand img { transform: scale(0.95); }
/* Nav-link als knop (dropdown-trigger): erft de vorm van .nav .links hierboven */
.nav .links .nav-trigger {
  font: inherit;
  border: 0;
  cursor: pointer;
}

/* Ritme in een tekstkolom: de laatste regel vóór een knop krijgt overal
   dezelfde lucht (32px), of dat nu een alinea of een lijst is. */
.split > div > p:has(+ .btn) { margin-bottom: var(--sp-6); }

/* ---- Agent-blok ---------------------------------------------
   Beeld naast een tekstkolom die één verhaal draagt: chip, blokkop,
   lead-alinea, checklist en knop. De tekst staat één trede hoger dan
   gewone lopende tekst, want dit blok ís de inhoud van de sectie.
   Ritme: chip 24 → blokkop 24 → alinea 32 → lijst 32 → knop. */
.agent { padding-block: var(--sp-8); }
.agent + .agent { border-top: 1px solid var(--c-line); }
.agent .chip { margin-bottom: var(--sp-5); }
.agent .agent-soon .chip { margin-bottom: 0; }  /* "binnenkort" hoort bij de chip eronder */
.agent-soon { margin-bottom: var(--sp-3); }
.agent .split > div > p { font-size: var(--fs-lead); margin-bottom: var(--sp-6); }
.agent .checklist { margin-block: 0 var(--sp-6); }
.agent .checklist li { font-size: var(--fs-body); }
.agent-media { display: grid; place-items: center; }
.agent-media img { width: 100%; max-width: 30rem; height: auto; }
.agent .tile-row { margin-top: var(--sp-7); max-width: 54rem; }
.agent--media-left .tile-row { margin-left: auto; }
.agent--media-right .tile-row { margin-right: auto; }

/* ---- Checklist ----
   Vinkjes-lijst voor beloftes onder een kop. De groene variant is
   de bevestigingskleur uit het origineel; alleen voor het vinkje. */
.checklist {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.checklist li {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  font-size: var(--fs-small);
}
.checklist li::before { content: "✓" / ""; font-weight: 700; flex: 0 0 auto; }
.checklist--green li::before { color: var(--c-groen); }

/* ---- Klantlogo-marquee ----
   Doorlopende band met venue-logo's, van links naar rechts.
   Logo's begrensd op hoogte én breedte zodat staande en liggende
   merken optisch even zwaar wegen. */
.band-logos { padding-block: var(--sp-6) var(--sp-7); overflow: hidden; }
.logo-marquee {
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 6vw, 5rem);
  width: max-content;
  padding-inline: clamp(1.5rem, 3vw, 2.5rem);
  animation: logo-loop 55s linear infinite;
}
.logo-track img { height: auto; width: auto; max-height: 58px; max-width: 150px; }
.logo-track img.is-tall { max-height: 70px; }
@keyframes logo-loop {
  from { transform: translateX(-50%); }
  to   { transform: none; }
}

/* ---- Conclusie-pill ----
   De derde accentvorm: serif-Avondzon op een lichter inkt-vlak.
   Uitsluitend op donkere banden, één per pagina, als slotzin
   onder een kop ("Constell doet het werk"). */
.story-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-orange);
  background: rgba(244, 244, 245, 0.08);
  border-radius: 1.125rem;
  padding: 0.16em 1.05em;
}

/* Kicker op een donkere band (krijt op 60%) */
.story-kicker {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(244, 244, 245, 0.6);
  margin-bottom: var(--sp-5);
}

/* ---- Polaroid-waaier ----
   Overlappende polaroids met eigen draai (--tilt) en hoogte (--lift);
   hover richt de kaart op en licht hem. Scrollt horizontaal op smal. */
.fan {
  display: flex;
  justify-content: safe center;
  overflow-x: auto;
  scrollbar-width: none;
  margin-block: var(--sp-8) var(--sp-4);
  padding-block: var(--sp-5);
  padding-inline: var(--sp-5);
}
.fan::-webkit-scrollbar { display: none; }
.polaroid--fan {
  flex: 0 0 auto;
  width: clamp(10rem, 12.5vw, 13rem);
  margin-inline: -0.75rem;
  position: relative;
  cursor: pointer;
  transform: translateY(var(--lift, 0px)) rotate(var(--tilt, 0deg));
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.polaroid--fan > img { aspect-ratio: 1 / 1; }
.polaroid--fan:hover, .polaroid--fan:focus-visible {
  transform: translateY(calc(var(--lift, 0px) - 16px)) rotate(0deg) scale(1.05);
  z-index: 2;
}
.polaroid--fan figcaption {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  min-height: 4.25em;
  font-size: 0.875rem;
}
.polaroid--fan .pol-naam { min-width: 0; }
/* Venue-logo op ware verhouding: reset de foto-regel die hem anders
   in een vierkant perst en de zijkanten afsnijdt. Niet weghalen. */
.polaroid--fan .pol-logo {
  max-height: 30px;
  max-width: 66px;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  flex: 0 0 auto;
  align-self: flex-end;
}

/* ---- Venue-showcase (hover-kaart bij de waaier) ----
   Grote locatiefoto met een glaspaneel dat de uitspraak draagt.
   Functionele glasmorfie: leesbaarheid over beeld, geen decoratie —
   de enige toegestane uitzondering op het glasmorfie-verbod.
   Eén gedeeld element op body-niveau; JS positioneert het. */
.fan-tip {
  position: fixed;
  z-index: var(--z-tooltip);
  width: min(44rem, calc(100vw - 2rem));
  aspect-ratio: 2.2 / 1;
  border-radius: var(--r-media);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease),
              visibility 0s linear 240ms;
  pointer-events: none;
}
.fan-tip.on {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.fan-tip-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  filter: blur(1.2px) saturate(1.12) contrast(1.04);
}
.fan-tip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(23, 23, 29, 0.4) 0%, rgba(23, 23, 29, 0.1) 32%, rgba(23, 23, 29, 0) 55%),
    linear-gradient(180deg, rgba(23, 23, 29, 0) 55%, rgba(23, 23, 29, 0.28) 100%);
}
.fan-tip-mgr {
  position: absolute;
  z-index: 3;
  left: clamp(0.9rem, 3.4%, 1.9rem);
  top: clamp(0.9rem, 8%, 1.75rem);
  width: clamp(8rem, 33%, 13.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 30% 25%, var(--c-orange-wash), var(--c-orange-tint));
  background-size: cover;
  background-position: center;
  color: var(--c-orange-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  border: 4px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px -10px rgba(23, 23, 29, 0.55);
}
.fan-tip-logobox {
  position: absolute;
  z-index: 3;
  left: clamp(0.9rem, 3.4%, 1.9rem);
  bottom: clamp(0.75rem, 6%, 1.4rem);
  min-width: clamp(9rem, 31%, 13rem);
  max-width: 42%;
  display: grid;
  place-items: center;
  padding: 0.7rem 1.25rem;
  background: #fff;
  border-radius: var(--r-tile);
  box-shadow: 0 10px 28px -10px rgba(23, 23, 29, 0.45);
}
.fan-tip-venuelogo {
  max-height: 46px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.fan-tip-logobox:has(.fan-tip-venuelogo:not([src])),
.fan-tip-logobox:has(.fan-tip-venuelogo[src=""]) { display: none; }
.fan-tip-quote {
  position: absolute;
  z-index: 2;
  right: clamp(0.9rem, 3.4%, 1.9rem);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(15rem, 57%, 25rem);
  padding: clamp(1.1rem, 2.6vw, 1.75rem) clamp(1.25rem, 2.8vw, 1.9rem);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--c-ink);
  box-shadow: 0 16px 44px -16px rgba(23, 23, 29, 0.5);
}
.fan-tip blockquote {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  line-height: 1.12;
  text-wrap: balance;
}
.fan-tip-support {
  margin: 0;
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.5;
  color: var(--c-ink);
}
.fan-tip-attr {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}
.fan-tip-attr .fan-tip-rol::before { content: " · "; }
@media (max-width: 640px) {
  .fan-tip {
    width: min(24rem, calc(100vw - 1.5rem));
    aspect-ratio: auto;
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
  }
  .fan-tip-foto::before, .fan-tip::before { background: rgba(23, 23, 29, 0.35); }
  .fan-tip-mgr { position: static; width: clamp(6rem, 34vw, 8rem); }
  .fan-tip-logobox { position: static; order: 3; }
  .fan-tip-quote {
    position: static;
    transform: none;
    width: 100%;
    order: 2;
    text-align: center;
  }
}

/* ---- Uitkomsten-kaart ----
   Witte kaart met Avondzon-bolletjes: de drie beloftes, met een chip
   die over de bovenrand hangt. Werkt op donkere banden en op beeld. */
.outcome-card {
  background: var(--c-surface);
  color: var(--c-ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  max-width: 21rem;
  position: relative;
}
.outcome-card > .chip { position: absolute; top: -1.1rem; right: var(--sp-5); }
.outcome-card ul {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  font-weight: 400;
}
.outcome-card li { display: flex; gap: var(--sp-3); align-items: baseline; }
.outcome-card li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-orange);
  transform: translateY(-1px);
}
.outcome-card .autopilot {
  display: block;
  text-align: right;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* Bijschrift onder beeld op een donkere band */
.media-caption {
  font-size: var(--fs-small);
  color: rgba(244, 244, 245, 0.7);
  text-align: center;
  margin-top: var(--sp-3);
}

/* ---- Doelgroep-kaarten ---- */
/* Vult de volle containerbreedte: de kaarten zijn beelddragers, geen tegels. */
.venue-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-5);
}
/* Beeldkaart: het bijschrift ligt als matglazen balk óver de foto, die bij
   hover langzaam inzoomt. De balk loopt bewust breder dan de kaart en een
   paar pixels onder de onderrand, zodat hij de ronding strak afsnijdt. */
.venue-card {
  position: relative;
  aspect-ratio: 4 / 7;
  border-radius: var(--r-showcase);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  margin: 0;
}
.venue-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.venue-card:hover img { transform: scale(1.1); }
/* Klikbare doelgroepkaart: de HELE kaart is één echte <a> om de <figure> heen,
   dus geen JS-klikvlak en geen dubbele tab-stop. Alleen kaarten met een bestaande
   doelpagina krijgen deze wrapper — een kaart zonder bestemming blijft een kale
   <figure>, zodat hover-affordance nooit interactie belooft die er niet is. */
.venue-card-link {
  display: block;
  border-radius: var(--r-showcase);
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast) var(--ease);
}
.venue-card-link:hover,
.venue-card-link:focus-visible { transform: translateY(-4px); }
.venue-card-link:hover .venue-card,
.venue-card-link:focus-visible .venue-card { box-shadow: var(--shadow-card), var(--shadow-pop); }
/* Toetsenbord krijgt dezelfde beeldbeweging als de muis. */
.venue-card-link:focus-visible .venue-card img { transform: scale(1.1); }
/* Het bijschrift wint aan contrast zodra de kaart de aandacht heeft. */
.venue-card-link:hover .venue-card figcaption,
.venue-card-link:focus-visible .venue-card figcaption { background: rgba(255, 255, 255, 0.94); }
@media (prefers-reduced-motion: reduce) {
  .venue-card-link,
  .venue-card-link:hover,
  .venue-card-link:focus-visible { transition: none; transform: none; }
}
.venue-card figcaption {
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 125%;
  display: flex;
  align-items: center;
  min-height: 3.4rem;
  /* rechts blijft het overschot van de 125%-balk buiten beeld: tekst erbuiten houden */
  padding: 0.875rem calc(20% + 1.125rem) 1.25rem 1.125rem;
  /* Functionele glasmorfie: de tekst moet leesbaar blijven over elk beeld. */
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  color: var(--c-ink);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
}
/* Vijf kaarten vullen alleen de rij van vijf; smaller springt de zesde bij.
   Is de kaart klikbaar, dan is de <a> het rasteritem: dan moet die verborgen
   worden, anders blijft er een lege maar klikbare kolom staan. */
.venue-card--extra,
.venue-card-link--extra { display: none; }
/* Smaller: minder kolommen én vierkante kaarten, anders worden ze torenhoog */
@media (max-width: 900px) {
  .venue-row { grid-template-columns: repeat(3, 1fr); }
  .venue-card { aspect-ratio: 1; }
  .venue-card--extra,
  .venue-card-link--extra { display: block; }
}
@media (max-width: 560px) { .venue-row { grid-template-columns: repeat(2, 1fr); } }

/* ---- Notitie-kaart ----
   Licht gedraaid briefje voor scenario's ("zonder / met Constell").
   De winnende variant staat op wit met een Avondzon-diep label. */
.note {
  background: var(--c-surface-soft);
  border-radius: var(--r-tile);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  font-size: var(--fs-small);
}
.note[data-tilt="left"] { transform: rotate(-2.5deg); }
.note[data-tilt="right"] { transform: rotate(1.75deg); }
.note--wins { background: var(--c-surface); }
.note .note-meta {
  display: block;
  margin-top: var(--sp-4);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.note--wins .note-meta { color: var(--c-orange-deep); }

/* ---- Widgetknop ----
   Specimen van de sales widget zoals de gast hem op de venue-site ziet:
   afgeronde rechthoek, Constell-ster, subtiele glans. Decoratief —
   nooit als echte knop in de Constell-interface. */
.widget-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.8125rem 1.375rem;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-tile);
}
.widget-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 45%);
  pointer-events: none;
}
.widget-btn svg { width: 16px; height: 24px; flex: 0 0 auto; }
.widget-btn--cream { background: var(--c-cream); color: var(--c-ink); }
.widget-btn--dark { background: var(--c-widget-dark); color: #fff; }
.widget-btn--lavender { background: var(--c-lavender); color: var(--c-ink); }

/* Feature-grid met omlijnde lavendel-iconen */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-grid .feature svg {
  box-sizing: content-box;
  padding: 7px;
  border: 1.5px solid var(--c-lavender);
  border-radius: 10px;
}

/* ---- Tabs ----
   Tekstuele tabs met inkt-onderlijn op de actieve. Voor het wisselen
   van weergaven binnen één paneel. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  margin-block: var(--sp-5) var(--sp-4);
}
.tab {
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-ink-soft);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.375rem 0.125rem;
  cursor: pointer;
}
.tab[aria-selected="true"] { color: var(--c-ink); border-bottom-color: var(--c-ink); }

/* Variant: tabs als knoppenrij (segmented). Voor panelen waar de tab een
   eigen weergave opent, zoals de onderdelen van de branded offerte. */
.tabs--knop { gap: var(--sp-2); }
.tabs--knop .tab {
  padding: 0.625rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: var(--c-surface-soft);
  color: var(--c-ink-soft);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tabs--knop .tab:hover { color: var(--c-ink); }
.tabs--knop .tab[aria-selected="true"] {
  background: var(--c-surface);
  border-color: var(--c-line);
  color: var(--c-ink);
  box-shadow: var(--shadow-tile);
}

/* ---- Carrousel-pijlen ---- */
.car-btn {
  position: absolute;
  top: 40%;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--c-lavender);
  color: var(--c-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-tile);
  transition: transform var(--t-fast) var(--ease);
}
.car-btn:hover { transform: scale(1.08); }
.car-btn svg { width: 18px; height: 18px; }

/* ---- Verhalen-carrousel (kaart naar constell.com) ----
   Grote locatiefoto met de knop op de onderrand, daaronder het portret van de
   verteller met het venue-logo ernaast, en dan pas de uitspraak. Links en
   rechts piept het volgende verhaal mee. */
/* De carrousel loopt van vensterrand tot vensterrand: op brede schermen zie
   je de vorige en volgende kaart ruim mee. De actieve kaart blijft gecentreerd
   en houdt de breedte van de contentkolom. */
.verhaal-carrousel {
  position: relative;
  --kaart: min(60rem, calc(100vw - 8rem));
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.verhaal-venster { overflow: hidden; }
.verhaal-spoor {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  transition: transform 520ms var(--ease);
  will-change: transform;
}
.verhaal-spoor > .verhaal-kaart {
  flex: 0 0 var(--kaart);
  opacity: 0.45;
  transition: opacity 320ms var(--ease);
}
.verhaal-spoor > .verhaal-kaart.is-actief { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .verhaal-spoor { transition: none; } }
@media (max-width: 900px) {
  .verhaal-carrousel { --kaart: calc(100vw - 3rem); }
}
.verhaal-kaart { position: relative; }
.verhaal-beeld { position: relative; }
.verhaal-frame { overflow: hidden; border-radius: var(--r-media); }
.verhaal-beeld img {
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 757;
  object-fit: cover;
  border-radius: var(--r-media);
}
/* De knop hangt half over de onderrand van de foto, rechts uitgelijnd */
.verhaal-link {
  position: absolute;
  right: var(--sp-5);
  bottom: 0;
  transform: translateY(50%);
  box-shadow: var(--shadow-tile);
}
.verhaal-link:hover { box-shadow: var(--shadow-card); }
/* Portret + logo overlappen de onderrand aan de linkerkant */
.verhaal-mensen {
  display: flex;
  align-items: center;
  margin-top: clamp(-6rem, -9vw, -4rem);
  margin-bottom: var(--sp-5);
  position: relative;
  z-index: 1;
}
.verhaal-avatar {
  width: clamp(8rem, 15vw, 13rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.verhaal-logo {
  width: clamp(4.5rem, 8vw, 7rem);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 50%;
  background: var(--c-surface);
  padding: 0.5rem;
  margin-left: clamp(-2.5rem, -3vw, -1.5rem);
}
/* De quote mag breed staan (grote serif, korte regel). De leestekst niet:
   op 52rem liep die naar 91 tekens per regel, 42rem brengt hem terug op ~72. */
.verhaal-tekst { max-width: 52rem; }
.verhaal-tekst p { max-width: 42rem; }
.verhaal-tekst blockquote {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.15;
  text-wrap: balance;
}
.verhaal-tekst p { font-size: var(--fs-lead); }
.verhaal-tekst .who { margin-bottom: 0; font-weight: 500; }
.verhaal-tekst .role { font-size: var(--fs-body); color: var(--c-ink-soft); }
.car-btn--prev { left: calc(50% - var(--kaart) / 2 + var(--sp-4)); }
.car-btn--next { right: calc(50% - var(--kaart) / 2 + var(--sp-4)); }
@media (max-width: 900px) {
  .car-btn--prev { left: 0.5rem; }
  .car-btn--next { right: 0.5rem; }
  /* pijlen op het midden van de foto, niet van de hele kaart */
  .car-btn { top: calc((100vw - 3rem) * 757 / 1400 / 2); }
  /* knop naar de bovenhoek, zodat hij het portret onderaan vrijlaat */
  .verhaal-link { top: var(--sp-3); right: var(--sp-3); bottom: auto; transform: none; }
  .verhaal-mensen { margin-top: clamp(-4rem, -12vw, -2.5rem); }
}
/* Zachte wissel tussen slides */
.story-fade { transition: opacity 260ms var(--ease); }
.story-fade.is-out { opacity: 0; }

/* Ronde avatar die over de onderrand van een mediakaart hangt */
.story-avatar {
  position: absolute;
  left: clamp(0.5rem, 3vw, 2rem);
  bottom: -1.75rem;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--c-surface);
  box-shadow: var(--shadow-tile);
}

/* ---- Stat-ring, tellende variant ----
   SVG-voortgangsring i.p.v. een statische rand; JS zet de
   stroke-dashoffset en telt het cijfer op wanneer de rij in beeld komt. */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-6);
}
.stat-ring:has(svg) {
  border: 0;
  position: relative;
  display: grid;
  place-items: center;
}
.stat-ring:has(svg) svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.stat-ring:has(svg) circle { fill: none; stroke-width: 6; }
.stat-ring:has(svg) .ring-track { stroke: rgba(192, 199, 250, 0.22); }
.stat-ring:has(svg) .ring-prog {
  stroke: var(--c-lavender);
  stroke-linecap: round;
  stroke-dasharray: 364.42;
  stroke-dashoffset: 364.42;
  transition: stroke-dashoffset 1400ms var(--ease);
}

/* ---- Sitefooter ----
   Donkere band: CTA-kop, stappen, logo, vier linkkolommen,
   contact met socials en een onderbalk. Op elke pagina gelijk. */
.footer { padding-block: var(--sp-9) var(--sp-6); }
.footer-cta { text-align: center; margin-bottom: var(--sp-8); }
.footer-cta h2 { font-size: clamp(2.5rem, 5.5vw, 4rem); }
.footer ul.footer-steps {
  padding: 0;
  margin-block: var(--sp-5) var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4) var(--sp-6);
  font-size: var(--fs-small);
}
.footer-steps li { display: flex; align-items: center; gap: var(--sp-2); list-style: none; }
.footer-steps .num {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(244, 244, 245, 0.16);
  display: inline-grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 500;
}
.footer-logo { display: block; height: 40px; width: auto; margin: var(--sp-9) auto var(--sp-8); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h2:not(.footer-cta h2) {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-on-dark);
  margin-bottom: var(--sp-4);
}
.footer .link-group + .link-group { margin-top: var(--sp-6); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.footer-grid a, .footer-contact a { text-decoration: none; color: var(--c-on-dark); font-size: var(--fs-small); opacity: 0.85; }
/* Alleen echte links krijgen een hover-staat. Een <a> zonder href staat voor een
   onderwerp waar nog geen pagina voor is (doelgroepen, Privacy, Terms); die mag
   niet onderstrepen of oplichten, anders leest hij als link maar doet hij niets. */
.footer-grid a[href]:hover, .footer-contact a[href]:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.footer-contact { text-align: right; display: grid; gap: var(--sp-2); justify-items: end; margin-bottom: var(--sp-7); }
.socials { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.socials a {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(244, 244, 245, 0.4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--c-on-dark);
  opacity: 1;
}
.socials a:hover { background: rgba(244, 244, 245, 0.1); }
.socials svg { width: 20px; height: 20px; }
.footer-bottom {
  border-top: 1px solid rgba(244, 244, 245, 0.15);
  padding-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.8125rem;
  color: rgba(244, 244, 245, 0.6);
}
.footer-bottom .sep { margin-inline: 0.5rem; opacity: 0.5; }
.footer-bottom a { color: inherit; }
.footer-bottom a[href]:hover { color: var(--c-on-dark); }
.footer-adres { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-adres svg { width: 16px; height: 16px; }

/* ---- Locatieraster (klantlocaties als proof) --------------
   24 locatiefoto's over de volle breedte. Bij hover/focus draait
   de kaart om naar de naam van de locatie met de stad eronder;
   een klik opent het referentievenster. Zonder JS blijven het
   gewoon foto's. */
.venue-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-2);
  padding-inline: var(--sp-2);
  margin-block: var(--sp-8) var(--sp-7);
}
.venue-kaart {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  perspective: 1000px;
}
.venue-flip {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  transform-style: preserve-3d;
  transition: transform 550ms var(--ease);
}
.venue-kaart:hover .venue-flip,
.venue-kaart:focus-visible .venue-flip { transform: rotateY(180deg); }
.venue-kaart:focus-visible { outline: none; }
.venue-kaart:focus-visible .venue-vlak { box-shadow: 0 0 0 2px var(--c-on-dark); }
.venue-vlak {
  position: absolute;
  inset: 0;
  border-radius: var(--r-btn);
  overflow: hidden;
  backface-visibility: hidden;
}
.venue-vlak--foto img { width: 100%; height: 100%; object-fit: cover; }
.venue-vlak--achter {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: rgba(244, 244, 245, 0.09);
  text-align: center;
}
.venue-naam {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lead);
  line-height: 1.15;
  color: var(--c-on-dark);
  text-wrap: balance;
}
.venue-stad {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--c-on-dark);
  color: var(--c-ink);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  white-space: nowrap;
}
.venue-claim {
  max-width: 44rem;
  margin: 0 auto var(--sp-5);
  color: var(--c-on-dark);
  font-size: var(--fs-lead);
  font-weight: 500;
  text-align: center;
  text-wrap: balance;
}
/* Omgekeerde hover: wit vlak wordt inkt met een dunne witte rand */
.venue-cta { display: flex; width: fit-content; margin: 0 auto; }
.venue-cta:hover {
  background: var(--c-ink);
  border-color: var(--c-on-dark);
  color: var(--c-on-dark);
}

@media (max-width: 1100px) { .venue-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .venue-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px)  {
  .venue-grid { grid-template-columns: repeat(2, 1fr); }
  .venue-naam { font-size: 1rem; }
}

/* ---- Referentievenster ------------------------------------
   Modaal over een inkt-scrim; het paneel draagt de uitspraak,
   de locatiemanager en drie grote foto's van de locatie. */
.venue-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
}
.venue-modal[hidden] { display: none; }
.venue-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 29, 0.72);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.venue-modal.is-open .venue-modal-scrim { opacity: 1; }
.venue-modal-paneel {
  position: relative;
  width: min(68rem, 100%);
  max-height: min(92vh, 56rem);
  overflow-y: auto;
  padding: var(--sp-6);
  border-radius: var(--r-media);
  background: var(--c-surface);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.venue-modal.is-open .venue-modal-paneel { opacity: 1; transform: none; }
.venue-modal-sluit {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-btn);
  background: var(--c-surface);
  color: var(--c-ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.venue-modal-sluit:hover { background: var(--c-surface-soft); }
.venue-modal-sluit svg { width: 16px; height: 16px; }

.vm-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-right: 3rem;
}
.vm-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--r-pill);
  background: var(--c-bg-shade) center / cover no-repeat;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lead);
  color: var(--c-ink);
}
.vm-meta {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.35;
}
.vm-meta .vm-venue { display: block; font-weight: 300; color: var(--c-ink-soft); }
.vm-kop {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 300;
  line-height: 1.35;
  text-wrap: balance;
}
.vm-sub {
  margin: 0 0 var(--sp-5);
  max-width: 44rem;
  color: var(--c-ink-soft);
}
.vm-fotos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.vm-foto { margin: 0; min-width: 0; }
.vm-foto img,
.vm-foto--leeg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-card);
}
.vm-foto--leeg {
  display: grid;
  place-items: center;
  background: var(--c-surface-soft);
  border: 1px dashed var(--c-line-strong);
  color: var(--c-ink-40);
  font-size: var(--fs-small);
}
.vm-cta { display: inline-flex; }

@media (max-width: 700px) {
  .venue-modal { padding: 0; }
  .venue-modal-paneel {
    width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    padding: var(--sp-5);
  }
  .vm-fotos { grid-template-columns: 1fr; }
}