/* =========================================================================
   UWBS — shared styles (Porsche-layout language, UWBS brand tokens)
   Loaded on every page. Plain CSS (the Tailwind Play CDN does not compile
   @apply in external files), so component rules use raw brand values.
   Tokens mirror assets/tailwind-config.js + brand/guidelines.md.
   ========================================================================= */

:root {
  /* "navy" is de historische tokennaam — sinds de zwart-restyle zijn de
     donkere vlakken near-black (basis / verhoogd / zwevend). */
  --navy: #0A0A0A;
  --navy-700: #141414;
  --navy-600: #1E1E1E;
  --sand: #F8F7F4;
  --silver: #C0C8D2;
  --ink: #0D0D0D;
  --shell: 1320px;
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--navy);
  color: var(--ink);
  line-height: 1.7;
}
.font-heading { font-family: 'Syne', system-ui, sans-serif; }

/* ---- Layout ------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 24px; }
@media (min-width: 768px) { .shell { padding-inline: 40px; } }

.section { padding-block: 96px; }
@media (min-width: 768px) { .section { padding-block: 140px; } }

/* Sand section: kept calm/flat but with a whisper of depth so large white bands
   read as "crafted paper", not plain. Warm radial from the top + faint silver
   tint bottom-right (2–4% luminance), plus a barely-there paper grain. */
.section-sand {
  position: relative;
  background:
    radial-gradient(115% 85% at 50% -12%, rgba(255,255,255,0.55) 0%, rgba(248,247,244,0) 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(192,200,210,0.12) 0%, rgba(248,247,244,0) 55%),
    var(--sand);
  color: var(--ink);
}
.section-sand > * { position: relative; z-index: 1; }
.section-sand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.028; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Dark (black) section with layered radial depth + grain for richness (not a
   flat fill). Class name .section-navy is historical — it renders black. */
.section-navy {
  position: relative;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(45,45,45,0.55) 0%, rgba(10,10,10,0) 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(192,200,210,0.10) 0%, rgba(10,10,10,0) 55%),
    var(--navy);
  color: #fff;
}
.section-navy.grain::after,
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section-navy > * { position: relative; z-index: 1; }

/* ---- Typography helpers ------------------------------------------------- */
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--silver);
}
.section-sand .eyebrow { color: #6b7686; }
.display {
  font-family: 'Syne', system-ui, sans-serif; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.04;
  font-size: clamp(2.4rem, 5.2vw, 4.5rem);
}
.headline {
  font-family: 'Syne', system-ui, sans-serif; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.08;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
}
.fineprint { font-size: 12.5px; line-height: 1.6; color: #8a93a1; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 15px; font-weight: 500; line-height: 1; border-radius: 14px;
  padding: 18px 30px; cursor: pointer; outline: none; border: 1px solid transparent;
  transition: transform .3s var(--spring), background-color .3s var(--spring),
              color .3s var(--spring), border-color .3s var(--spring), opacity .3s var(--spring);
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 0 4px rgba(10,10,10,0.5); }

/* Primary: solid. On navy → sand fill; on sand → navy fill. */
.btn-primary { background: #fff; color: var(--navy); }
.btn-primary:hover { transform: translateY(-2px); background: var(--sand); }
.section-sand .btn-primary { background: var(--ink); color: #fff; }
.section-sand .btn-primary:hover { background: #000; }

/* Frosted glass — translucent with a thin silver edge. */
.btn-frosted {
  background: rgba(255,255,255,0.12); color: #fff;
  border-color: rgba(255,255,255,0.22); backdrop-filter: blur(10px);
}
.btn-frosted:hover { transform: translateY(-2px); background: rgba(255,255,255,0.20); }
.section-sand .btn-frosted {
  background: rgba(10,10,10,0.05); color: var(--navy); border-color: rgba(10,10,10,0.18);
}
.section-sand .btn-frosted:hover { background: rgba(10,10,10,0.10); }
.btn-frosted:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.85); }

/* Round icon button (card action / carousel nav). */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 999px; flex: none; cursor: pointer; outline: none;
  color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.45);
  backdrop-filter: blur(6px);
  transition: transform .3s var(--spring), background-color .3s var(--spring), color .3s var(--spring);
}
.icon-btn:hover { transform: scale(1.06); background: rgba(255,255,255,0.20); }
.icon-btn:active { transform: scale(0.95); }
.icon-btn:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.9); }
.section-sand .icon-btn { color: var(--navy); background: rgba(10,10,10,0.04); border-color: rgba(10,10,10,0.30); }
.section-sand .icon-btn:hover { background: rgba(10,10,10,0.10); }

/* ---- Pills / chips ------------------------------------------------------ */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
.section-sand .pill { background: rgba(10,10,10,0.06); color: var(--navy); border-color: rgba(10,10,10,0.12); }

/* ---- Cards -------------------------------------------------------------- */
.card { border-radius: 24px; background: var(--navy-700); box-shadow: var(--card); }

/* Full-bleed media card: photo fills, dark gradient seats text, action bottom-right. */
.media-card {
  position: relative; border-radius: 24px; overflow: hidden;
  box-shadow: var(--card); isolation: isolate;
  transition: transform .4s var(--spring), box-shadow .4s var(--spring);
}
.media-card:hover { transform: translateY(-4px); box-shadow: var(--lift); }
.media-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.media-card__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(13,13,13,0.78) 0%, rgba(13,13,13,0.25) 38%, rgba(13,13,13,0) 64%);
}

/* Light card (on sand sections). */
.card-light { border-radius: 24px; background: #fff; border: 1px solid rgba(10,10,10,0.08); box-shadow: 0 18px 48px -22px rgba(10,10,10,0.30); }

/* ---- Subpage hero ------------------------------------------------------- */
.subhero { position: relative; padding-top: 160px; padding-bottom: 96px; }
@media (min-width: 768px) { .subhero { padding-top: 200px; padding-bottom: 130px; } }

/* ---- Service cards ------------------------------------------------------ */
.service { display: flex; flex-direction: column; transition: transform .4s var(--spring), box-shadow .4s var(--spring); }
.service:hover { transform: translateY(-4px); box-shadow: 0 28px 64px -24px rgba(10,10,10,0.40); }

/* ---- Workflow steps ----------------------------------------------------- */
.step-card { display: flex; flex-direction: column; gap: 20px; transition: transform .4s var(--spring), box-shadow .4s var(--spring); }
.step-card:hover { transform: translateY(-4px); box-shadow: 0 28px 64px -24px rgba(10,10,10,0.40); }
@media (min-width: 768px) { .step-card { flex-direction: row; align-items: flex-start; gap: 40px; } }
/* Integration app-icon badge — the marker on each workflow step (replaces the
   old numbering). Square white tile; the colourful logo is optically normalised
   so every partner mark reads at the same visual size. Files in brand/integrations/. */
.logo-badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 16px; background: #fff; overflow: hidden;
  border: 1px solid rgba(10,10,10,0.10); box-shadow: 0 8px 20px -12px rgba(10,10,10,0.35);
}
.logo-badge img { display: block; width: 42px; height: 42px; object-fit: contain; border-radius: 9px; }
.logo-badge.is-nmbrs img { width: 46px; height: 46px; }  /* svg has internal padding */
.logo-badge.is-exact img { width: 45px; height: 45px; }  /* circle reads smaller */

/* ---- Team carousel ------------------------------------------------------ */
.team-scroller {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 8px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.team-scroller::-webkit-scrollbar { display: none; }
.team-card {
  flex: none; width: 78vw; max-width: 320px; scroll-snap-align: start;
}
@media (min-width: 640px) { .team-card { width: 300px; } }
.team-photo {
  display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 20px; background: var(--navy-700);
}
.team-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top;
  /* Per-person zoom + nudge keep every portrait framed consistently
     (defaults = no zoom, no shift). --shiftX/--shiftY re-centre a subject; keep zoom >= 1
     when shifting so no empty background edge appears.
     Photos render in full colour — no grayscale, no hover recolour. */
  transform: translate(var(--shiftX, 0), var(--shiftY, 0)) scale(var(--zoom, 1)); transform-origin: center top;
}

/* ---- Uitjes-filmstrip (vacatures) — doorlopende marquee (JS/rAF, geen
   hover-pauze); de foto het dichtst bij het midden schaalt op en krimpt weer
   zodra hij doorschuift (scale via JS, alleen transform). ----------------- */
.uitjes-marquee {
  position: relative; overflow: hidden; padding-block: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.uitjes-track { display: flex; gap: 20px; width: max-content; will-change: transform; }
.uitje-card { flex: none; width: 74vw; max-width: 400px; }
.uitje-photo {
  display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 20px; background: var(--navy-700); will-change: transform;
}
.uitje-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  /* Geen autonome beweging: statische, handmatig scrollbare strip. */
  .uitjes-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .uitjes-track { padding-inline: 24px; }
}

/* ---- Team grid (over-ons: alle leden, 4 per rij) ------------------------ */
.team-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px;
}
@media (min-width: 640px)  { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; } }
/* In het grid vult de kaart de kolom (i.p.v. de vaste scroller-breedte). */
.team-grid .team-card { width: auto; max-width: none; }
.team-grid .team-photo img { transition: transform .6s var(--spring); }
.team-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.team-li {
  flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; margin-top: 2px;
  border-radius: 10px; color: #4C9FE6;
  background: rgba(10,102,194,0.16); border: 1px solid rgba(76,159,230,0.45);
  transition: transform .3s var(--spring), background-color .3s var(--spring), color .3s var(--spring), border-color .3s var(--spring);
}
.team-li svg { width: 18px; height: 18px; display: block; }
a.team-li:hover { transform: translateY(-2px); color: #fff; background: #0A66C2; border-color: #0A66C2; }
a.team-li:active { transform: translateY(0); }
a.team-li:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(76,159,230,0.8); }
/* Placeholder tot de LinkedIn-URL er is: zichtbaar maar niet-interactief. */
.team-li--soon { opacity: 0.32; }

/* ---- Reviews (Google) --------------------------------------------------- */
.stars { display: inline-flex; gap: 3px; color: #F6B73C; line-height: 0; }
.stars svg { width: 18px; height: 18px; display: block; }
/* Google trust badge — the honest, verifiable anchor: real aggregate + link out.
   Reviews live on a sand (white) section, so these read dark-on-light. */
.trust-badge {
  display: inline-flex; align-items: center; gap: 16px; padding: 14px 22px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(10,10,10,0.10); color: var(--navy);
  box-shadow: 0 10px 30px -18px rgba(10,10,10,0.4);
  outline: none; transition: transform .3s var(--spring), box-shadow .3s var(--spring), border-color .3s var(--spring);
}
.trust-badge:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -20px rgba(10,10,10,0.5); border-color: rgba(10,10,10,0.18); }
.trust-badge:focus-visible { box-shadow: 0 0 0 2px rgba(10,10,10,0.6); }
.review-card {
  display: flex; flex-direction: column; height: 100%; padding: 28px; border-radius: 20px;
  background: #fff; border: 1px solid rgba(10,10,10,0.08); box-shadow: 0 18px 48px -24px rgba(10,10,10,0.30);
  transition: transform .4s var(--spring), box-shadow .4s var(--spring), border-color .4s var(--spring);
}
.review-card:hover { transform: translateY(-4px); border-color: rgba(10,10,10,0.14); box-shadow: 0 28px 64px -24px rgba(10,10,10,0.40); }
.review-quote { margin-top: 18px; color: rgba(13,13,13,0.72); line-height: 1.7; }
/* Pin the attribution to the bottom so names align across equal-height cards. */
.review-card figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 24px; }
.review-card .rev-top { display: flex; align-items: center; justify-content: space-between; }
.review-avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(10,10,10,0.10); color: var(--navy);
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px;
}
.review-meta { display: flex; flex-direction: column; min-width: 0; }
.review-name { font-size: 14px; font-weight: 500; color: var(--navy); line-height: 1.25; }
.review-role { font-size: 12px; color: rgba(13,13,13,0.5); margin-top: 2px; }
.stars svg.star-empty { color: rgba(10,10,10,0.16); }

/* ---- Reviews wall — vertical auto-scrolling columns (Over ons) -----------
   The "wall of love" pattern: 3 columns drifting upward at different speeds,
   soft-masked at top/bottom, paused on hover. Fed from assets/reviews.js.     */
.reviews-wall {
  display: flex; justify-content: center; align-items: flex-start; gap: 24px;
  max-height: 620px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
}
.reviews-col { flex: none; width: min(340px, 84vw); }
.reviews-col__track {
  display: flex; flex-direction: column;
  animation: reviews-scroll var(--rev-dur, 44s) linear infinite;
  will-change: transform;
}
/* Spacing via margin (not flex gap) so the duplicated set loops seamlessly at -50%. */
.reviews-col__track .review-card { height: auto; margin-bottom: 24px; }
.reviews-wall:hover .reviews-col__track,
.reviews-wall:focus-within .reviews-col__track { animation-play-state: paused; }
@keyframes reviews-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
/* Column visibility mirrors the reference (2nd from md, 3rd from lg). */
@media (max-width: 1023px) { .reviews-col--lg { display: none; } }
@media (max-width: 767px)  { .reviews-col--md { display: none; } }
/* Calm, static fallback (JS renders a plain grid under reduced-motion). */
.reviews-grid { display: grid; gap: 20px; }
@media (min-width: 768px)  { .reviews-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .reviews-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .reviews-wall { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .reviews-col__track { animation: none; }
}

/* ---- Sector chips (Diensten: "Voor wie wij werken") --------------------- */
.sector-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px; border-radius: 999px; background: #fff; color: var(--navy);
  border: 1px solid rgba(10,10,10,0.10); font-size: 15px; font-weight: 500;
  box-shadow: 0 6px 18px -12px rgba(10,10,10,0.25);
  transition: transform .3s var(--spring), box-shadow .3s var(--spring), border-color .3s var(--spring);
}
.sector-chip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 999px; background: var(--silver); }
.sector-chip:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(10,10,10,0.35); border-color: rgba(10,10,10,0.18); }

/* ---- Footer social icons ------------------------------------------------ */
.social-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 999px; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.15); outline: none;
  transition: transform .3s var(--spring), color .3s var(--spring), border-color .3s var(--spring), background-color .3s var(--spring);
}
.social-ico:hover { transform: translateY(-2px); color: #fff; border-color: rgba(255,255,255,0.40); background: rgba(255,255,255,0.06); }
.social-ico:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.6); }
.social-ico svg { width: 17px; height: 17px; }

/* ---- Koppelingen marquee (infinite logo strip) -------------------------- */
.marquee { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; gap: 32px; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.koppeling-logo {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 26px; border-radius: 16px; background: #fff;
  border: 1px solid rgba(10,10,10,0.08); box-shadow: 0 8px 20px -14px rgba(10,10,10,0.30);
}
.koppeling-logo img { height: 26px; width: auto; max-width: 130px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ---- Contact: appointment planner --------------------------------------- */
.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.mini-dow { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--silver); padding-bottom: 4px; }
.mini-day {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; font-size: 14px; color: rgba(255,255,255,0.85); cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); outline: none;
  transition: transform .3s var(--spring), background-color .3s var(--spring), border-color .3s var(--spring);
}
.mini-day:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }
.mini-day:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.85); }
.mini-day.is-muted { color: rgba(255,255,255,0.30); cursor: default; background: transparent; border-color: rgba(255,255,255,0.06); }
.mini-day.is-muted:hover { transform: none; background: transparent; }

.cal-embed { width: 100%; min-height: 660px; border: 0; border-radius: 18px; display: block; background: #fff; }
/* Light placeholder shown until the real Calendly link is connected. */
.cal-placeholder {
  min-height: 560px; border-radius: 18px; border: 1px dashed rgba(10,10,10,0.16);
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(10,10,10,0.035) 0%, rgba(255,255,255,0) 62%),
    #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 16px; padding: 48px 24px;
}
.cal-placeholder-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px; color: var(--navy); background: rgba(10,10,10,0.06);
}
.cal-placeholder-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 19px; color: var(--navy); }
.cal-placeholder-text { font-size: 14px; line-height: 1.7; color: rgba(10,10,10,0.60); max-width: 46ch; }
.cal-placeholder-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }
.cal-placeholder-actions .btn { padding: 14px 24px; font-size: 14px; }

/* Contact rows (phone / email). */
.contact-row {
  display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 18px;
  background: #fff; border: 1px solid rgba(10,10,10,0.08); outline: none;
  transition: transform .3s var(--spring), box-shadow .3s var(--spring);
}
.contact-row:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -20px rgba(10,10,10,0.35); }
.contact-row:focus-visible { box-shadow: 0 0 0 2px rgba(10,10,10,0.6); }
.contact-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 14px; color: var(--navy); background: rgba(10,10,10,0.06);
}

/* ---- Promo / CTA band --------------------------------------------------- */
.promo {
  position: relative; overflow: hidden; border-radius: 28px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(45,45,45,0.85) 0%, rgba(10,10,10,0) 55%),
    radial-gradient(90% 90% at 0% 100%, rgba(192,200,210,0.14) 0%, rgba(10,10,10,0) 50%),
    var(--navy);
  box-shadow: var(--lift);
}

/* ---- Feature blocks ----------------------------------------------------- */
.feature-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px; color: var(--navy);
  background: rgba(10,10,10,0.06);
}

/* ---- Tier card check ---------------------------------------------------- */
.tick { position: relative; flex: none; width: 18px; height: 18px; border-radius: 999px; background: rgba(192,200,210,0.18); }
.tick::after { content: ""; position: absolute; left: 6px; top: 4px; width: 4px; height: 8px; border: solid var(--silver); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }

/* Dark surfaces — the dark .card panels (tier cards, calculator, ticket, contact
   planner) and the .promo band — keep dark-surface controls even when they sit
   inside a .section-sand. Without this, the .section-sand descendant rules render
   buttons/pills/icons navy-on-navy (near invisible). .card-light is unaffected. */
.card .btn-frosted, .promo .btn-frosted { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.30); }
.card .btn-frosted:hover, .promo .btn-frosted:hover { background: rgba(255,255,255,0.24); }
.card .btn-primary, .promo .btn-primary { background: #fff; color: var(--navy); }
.card .btn-primary:hover, .promo .btn-primary:hover { background: var(--sand); }
.card .icon-btn, .promo .icon-btn { color: #fff; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.45); }
.card .icon-btn:hover, .promo .icon-btn:hover { background: rgba(255,255,255,0.20); }
.card .pill, .promo .pill { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.18); }

/* ---- Segmented control (Maand / Jaar) ----------------------------------- */
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); }
.seg-btn {
  appearance: none; border: 0; cursor: pointer; padding: 7px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.65); background: transparent;
  transition: color .3s var(--spring), background-color .3s var(--spring);
  outline: none;
}
.seg-btn:hover { color: #fff; }
.seg-btn.is-active { background: #fff; color: var(--navy); }
.seg-btn:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.85); }

/* ---- Calculator: entity options ----------------------------------------- */
.entity-opt {
  cursor: pointer; text-align: left; padding: 16px 18px; border-radius: 16px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); outline: none;
  transition: transform .3s var(--spring), background-color .3s var(--spring), border-color .3s var(--spring);
}
.entity-opt:hover { background: rgba(255,255,255,0.08); }
.entity-opt:active { transform: scale(0.99); }
.entity-opt.is-active { background: rgba(255,255,255,0.10); border-color: var(--silver); box-shadow: inset 0 0 0 1px var(--silver); }
.entity-opt:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.85); }

/* ---- Calculator: add-on rows -------------------------------------------- */
.addon {
  padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  transition: background-color .3s var(--spring), border-color .3s var(--spring);
}
.addon-toggle { cursor: pointer; outline: none; }
.addon-toggle:hover { background: rgba(255,255,255,0.07); }
.addon-toggle:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.8); }
.addon-toggle[aria-pressed="true"] { background: rgba(255,255,255,0.10); border-color: var(--silver); }
.addon-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: 12px; color: var(--silver);
  background: rgba(192,200,210,0.10);
}
.check-dot {
  position: relative; flex: none; width: 22px; height: 22px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.30); transition: background-color .3s var(--spring), border-color .3s var(--spring);
}
.addon-toggle[aria-pressed="true"] .check-dot { background: #fff; border-color: #fff; }
.addon-toggle[aria-pressed="true"] .check-dot::after {
  content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px;
  border: solid var(--navy); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Stepper buttons */
.step-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer; outline: none;
  font-size: 18px; line-height: 1; color: #fff;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.30);
  transition: transform .3s var(--spring), background-color .3s var(--spring);
}
.step-btn:hover { background: rgba(255,255,255,0.18); transform: scale(1.06); }
.step-btn:active { transform: scale(0.92); }
.step-btn:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.85); }

/* Ticket (cost overview) — a touch lifted from the configurator. */
.ticket { background: var(--navy-600); box-shadow: var(--lift); }

/* Overview line items */
.ov-group-label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver); }
.ov-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ov-row span:first-child { color: rgba(255,255,255,0.82); font-size: 14.5px; }
.ov-row span:last-child { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-extra { font-size: 13px; color: rgba(255,255,255,0.6); }

/* ---- Scroll-progress bar (injected by motion.js) ------------------------ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
  background: #fff; mix-blend-mode: difference; pointer-events: none;
}

/* ---- Hero entrance (orchestrated first-paint reveal) -------------------- */
@keyframes heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero-stagger > * { opacity: 0; animation: heroIn .85s var(--spring) both; }
.hero-stagger > *:nth-child(1) { animation-delay: .06s; }
.hero-stagger > *:nth-child(2) { animation-delay: .16s; }
.hero-stagger > *:nth-child(3) { animation-delay: .28s; }
.hero-stagger > *:nth-child(4) { animation-delay: .40s; }
.hero-stagger > *:nth-child(5) { animation-delay: .52s; }
@media (prefers-reduced-motion: reduce) { .hero-stagger > * { opacity: 1; animation: none; } }

/* ---- Stat band ("In cijfers") ------------------------------------------- */
.stat-num {
  font-family: 'Syne', system-ui, sans-serif; font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-variant-numeric: tabular-nums;
}
.stat-label { margin-top: 8px; font-size: 13px; color: #6b7686; }

/* ---- Reveal on scroll (transform/opacity only) -------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--spring), transform .7s var(--spring); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  video { animation: none; }
}

/* =========================================================================
   ONDO-STYLE REMAKE — editorial single-page system (appended, self-contained).
   Light-first canvas, deep-navy dark sections, big display type, two-tone
   headings, sticky nav, aperture hero, tabbed showcase, testimonial carousel.
   Reversible: remove this block to restore the previous look.
   ========================================================================= */
:root { --ink2:#6B7686; --line:rgba(10,10,10,0.10); --line-d:rgba(255,255,255,0.14); }

body { background:#fff; color: var(--ink); }

/* Light sections → clean white (drop the warm sand tint), keep a whisper of grain. */
.section-sand { background:#fff; }
.section-sand::after { opacity:0.02; }

/* Display face → Michroma (matches the UWBS wordmark: wide, techno, monoline).
   Michroma ships a single weight, so disable faux-bold — the wide face already
   reads as substantial, and requested 600/700 fall back cleanly to 400. */
.display, .headline, .font-heading, .stat-num, .h1, .h2, .h3, .tquote {
  font-family:'Michroma',system-ui,sans-serif; font-synthesis:none;
}
/* Michroma ships no euro glyph — render € in Inter wherever it appears in display text. */
.eur { font-family:'Inter',system-ui,sans-serif; }

/* Two-tone editorial headings */
.h1 { font-weight:600; letter-spacing:-0.025em; line-height:1.0; color:var(--ink);
      font-size:clamp(2.9rem, 7vw, 6rem); }
.h2 { font-weight:600; letter-spacing:-0.02em; line-height:1.06; color:var(--ink);
      font-size:clamp(2rem, 4.4vw, 3.6rem); }
/* Kop op één regel houden vanaf tablet/desktop; op mobiel gewoon afbreken. */
@media (min-width: 768px) { .h2--nowrap { white-space: nowrap; } }
.h3 { font-weight:600; letter-spacing:-0.01em; line-height:1.12; color:var(--ink);
      font-size:clamp(1.4rem, 2.4vw, 2rem); }
.dim { color: var(--ink2); }
.section-navy .h1, .section-navy .h2, .section-navy .h3 { color:#fff; }
.section-navy .dim { color: rgba(255,255,255,0.5); }
.lead { font-size:clamp(1.02rem, 1.35vw, 1.2rem); line-height:1.6; color:var(--ink2); }
.section-navy .lead { color: rgba(255,255,255,0.72); }

/* Smooth in-page anchor scrolling, offset for the floating header. */
html { scroll-behavior:smooth; }
section[id], div[id].anchor { scroll-margin-top:110px; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior:auto; } }

/* ---- Header: announcement bar + morphing pill nav (Ondo-style) ---------- */
.header-wrap { position:fixed; inset-inline:0; top:0; z-index:60; color:#fff; pointer-events:none; }
.header-wrap a, .header-wrap button { pointer-events:auto; }

/* Nav row + pill (JS flips max-width / background / radius / padding on scroll). */
.nav { position:relative; padding-inline:clamp(16px,4vw,56px); padding-top:10px; }
.nav-pill { position:relative; width:100%; max-width:2000px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px 0; border-radius:0; background:rgba(11,11,11,0);
  will-change:max-width,padding,background-color,border-radius,margin-top,box-shadow; }
.anim-ready .nav-pill { transition:max-width .6s var(--spring), padding .6s var(--spring), background-color .45s var(--spring),
             border-radius .6s var(--spring), margin-top .45s var(--spring), box-shadow .45s var(--spring); }
.nav-brand { display:flex; align-items:center; outline:none; border-radius:6px; }
.nav-brand:focus-visible { box-shadow:0 0 0 2px rgba(255,255,255,0.8); }
.nav-logo-clip { display:flex; align-items:center; height:26px; overflow:hidden; }
.nav-logo-img { height:100px; width:auto; max-width:none; display:block; }

.nav-links { display:none; align-items:center; gap:18px; }
@media (min-width:960px){ .nav-links{ display:flex; } }
.nav-link { position:relative; appearance:none; border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:500; color:#fff; opacity:0.85; padding:8px 12px;
  border-radius:999px; outline:none; white-space:nowrap; text-decoration:none;
  transition:opacity .25s var(--spring), background-color .25s var(--spring); }
.nav-link:hover, .nav-link:focus-visible { opacity:1; }
.nav-link.is-active { opacity:1; background:rgba(255,255,255,0.14); }
.nav-lang { display:inline-flex; align-items:center; gap:5px; font-size:15px; font-weight:500;
  padding-left:6px; color:#fff; }
.nav-lang a { color:inherit; opacity:0.55; padding:2px 3px; border-radius:5px; outline:none;
  transition:opacity .25s var(--spring); }
.nav-lang > span { opacity:0.35; }
.nav-lang a[aria-current="true"], .nav-lang a:hover, .nav-lang a:focus-visible { opacity:1; }

.nav-actions { display:flex; align-items:center; gap:12px; }
.nav-cta { display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  padding:10px 20px; font-size:14px; font-weight:600; outline:none; white-space:nowrap;
  transition:transform .3s var(--spring), background-color .3s var(--spring),
             box-shadow .3s var(--spring), border-color .3s var(--spring); }
.nav-cta--solid { background:#fff; color:#0a0a0a; border:1px solid #fff; }
.nav-cta--solid:hover { transform:translateY(-1px); box-shadow:0 12px 26px -12px rgba(0,0,0,0.5); }
.nav-cta--ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.32); }
.nav-cta--ghost:hover { border-color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.06); }
.nav-cta:focus-visible { box-shadow:0 0 0 2px rgba(255,255,255,0.9); }
@media (max-width:959px){ .nav-cta--ghost{ display:none; } }
@media (max-width:600px){ .nav-cta--solid{ display:none; } }

.nav-burger { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:12px; border:1px solid rgba(255,255,255,0.4); color:#fff; background:transparent;
  opacity:0.9; outline:none; cursor:pointer; transition:opacity .25s var(--spring); }
.nav-burger:hover { opacity:1; }
@media (min-width:960px){ .nav-burger{ display:none; } }

/* Mobile: shrink the wordmark (same crop ratio) + tighten the gap so the logo
   AND the burger both fit inside the black pill instead of the burger being
   flung past the pill/screen edge by the 305px-wide logo. */
@media (max-width:600px){
  .nav-pill { gap:12px; }
  .nav-logo-clip { height:17px; }
  .nav-logo-img { height:65px; }
  .nav-burger { width:38px; height:38px; }
}

/* ---- Mobile menu (editorial drill-down accordion) ----------------------- */
/* Full-height navy sheet echoing the site's layered surfaces + rounded pill
   language. Top-level items are two-tone (grey index + white Michroma name);
   tapping one reveals the same rich sub-items as the desktop mega-menus.
   Only transform/opacity animate (chevron rotate, staggered item fade-in). */
.mmenu-backdrop { background:rgba(10,16,28,0.55); backdrop-filter:saturate(1.2) blur(8px);
  -webkit-backdrop-filter:saturate(1.2) blur(8px); }
.mmenu-sheet { background:var(--navy); color:#fff; border-right:1px solid rgba(192,200,210,0.14);
  border-radius:0 28px 28px 0; box-shadow:40px 0 90px -40px rgba(0,0,0,0.7);
  background-image:radial-gradient(120% 80% at 90% -10%, rgba(120,150,200,0.20), transparent 55%),
                   radial-gradient(90% 60% at -10% 110%, rgba(10,10,10,0.9), transparent 60%); }
.mmenu-top { display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(22px,6vw,30px) 18px; border-bottom:1px solid rgba(192,200,210,0.12); }
.mmenu-top .nav-logo-clip { height:18px; }
.mmenu-top .nav-logo-img { height:70px; }
.mmenu-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:6px clamp(22px,6vw,30px) 8px; }

.mmenu-group { border-bottom:1px solid rgba(192,200,210,0.12); }
.mmenu-head { width:100%; display:flex; align-items:baseline; gap:16px; padding:22px 2px;
  background:transparent; border:0; cursor:pointer; text-align:left; outline:none;
  color:#fff; transition:opacity .25s var(--spring); }
.mmenu-idx { font-family:'Inter',system-ui,sans-serif; font-size:12px; font-weight:600;
  letter-spacing:0.12em; color:var(--silver); opacity:0.6; min-width:22px;
  font-variant-numeric:tabular-nums; }
.mmenu-name { flex:1; font-family:'Michroma',system-ui,sans-serif; font-synthesis:none;
  font-size:clamp(26px,7.5vw,32px); line-height:1; letter-spacing:-0.02em; color:#fff; }
.mmenu-chev { color:var(--silver); opacity:0.7; flex-shrink:0; align-self:center;
  transition:transform .35s var(--spring), opacity .25s var(--spring); }
.mmenu-head:hover .mmenu-chev, .mmenu-head:focus-visible .mmenu-chev { opacity:1; }
.mmenu-head:focus-visible { box-shadow:0 0 0 2px rgba(255,255,255,0.8); border-radius:8px; }
.mmenu-head[aria-expanded="true"] .mmenu-chev { transform:rotate(180deg); opacity:1; }

.mmenu-panel { padding:2px 0 20px; }
.mmenu-panel[hidden] { display:none; }
.mmenu-cat { font-family:'Inter',system-ui,sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--silver); opacity:0.6;
  margin:14px 0 8px; }
.mmenu-cat:first-child { margin-top:4px; }
.mmenu-item { display:flex; align-items:flex-start; gap:14px; padding:11px 10px 11px 2px;
  border-radius:12px; outline:none; text-decoration:none;
  transition:transform .3s var(--spring), background-color .25s var(--spring);
  /* staggered fade-in when the group opens */
  opacity:0; transform:translateY(8px); }
.mmenu-panel.is-open .mmenu-item { opacity:1; transform:none;
  transition:transform .45s var(--spring), opacity .45s var(--spring), background-color .25s var(--spring); }
.mmenu-panel.is-open .mmenu-item:nth-child(2) { transition-delay:.03s; }
.mmenu-panel.is-open .mmenu-item:nth-child(3) { transition-delay:.06s; }
.mmenu-panel.is-open .mmenu-item:nth-child(4) { transition-delay:.09s; }
.mmenu-panel.is-open .mmenu-item:nth-child(5) { transition-delay:.12s; }
.mmenu-panel.is-open .mmenu-item:nth-child(n+6) { transition-delay:.15s; }
.mmenu-item:hover, .mmenu-item:focus-visible { background:rgba(255,255,255,0.06); transform:translateX(4px); }
.mmenu-item:focus-visible { box-shadow:0 0 0 2px rgba(255,255,255,0.7); }
.mmenu-item:active { transform:translateX(4px) scale(0.99); }
.mmenu-ico { flex-shrink:0; width:38px; height:38px; display:grid; place-items:center;
  border-radius:11px; background:rgba(255,255,255,0.06); border:1px solid rgba(192,200,210,0.18);
  color:#fff; margin-top:1px; }
.mmenu-ico svg { width:19px; height:19px; }
.mmenu-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mmenu-title { font-family:'Inter',system-ui,sans-serif; font-size:15px; font-weight:600;
  color:#fff; line-height:1.3; }
.mmenu-tag { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  font-size:10.5px; font-weight:600; letter-spacing:0.02em; color:var(--silver);
  border:1px solid rgba(192,200,210,0.28); vertical-align:middle; white-space:nowrap; }
.mmenu-desc { font-family:'Inter',system-ui,sans-serif; font-size:13px; line-height:1.45;
  color:rgba(255,255,255,0.6); }

.mmenu-foot { padding:18px clamp(22px,6vw,30px) calc(22px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(192,200,210,0.14); display:flex; flex-direction:column; gap:12px;
  background:rgba(9,15,27,0.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.mmenu-lang { display:flex; align-items:center; justify-content:center; gap:6px; padding-top:4px;
  font-family:'Inter',system-ui,sans-serif; font-size:14px; font-weight:500; color:rgba(255,255,255,0.55); }
.mmenu-lang a { color:inherit; opacity:0.7; padding:2px 6px; border-radius:6px; outline:none;
  text-decoration:none; transition:opacity .25s var(--spring); }
.mmenu-lang a[aria-current="true"], .mmenu-lang a:hover, .mmenu-lang a:focus-visible { color:#fff; opacity:1; }
.mmenu-lang span { opacity:0.3; }
@media (prefers-reduced-motion: reduce) {
  .mmenu-item, .mmenu-panel.is-open .mmenu-item { opacity:1; transform:none; transition:none; }
  .mmenu-chev { transition:none; }
}

/* ---- Mega-menus (dark dropdown panels) ---------------------------------- */
.mega-wrap { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:10px;
  width:min(1040px, calc(100vw - 2 * clamp(16px,4vw,56px))); }
.mega { position:absolute; top:0; left:0; right:0;
  background:#0b0b0b; border:1px solid rgba(255,255,255,0.08); border-radius:26px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.75); padding:26px;
  opacity:0; transform:translateY(-10px) scale(0.99); transform-origin:top center;
  pointer-events:none; visibility:hidden;
  transition:opacity .26s var(--spring), transform .3s var(--spring), visibility 0s linear .3s; }
.mega.is-open { opacity:1; transform:none; pointer-events:auto; visibility:visible;
  transition:opacity .3s var(--spring), transform .35s var(--spring), visibility 0s; }
.mega-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 40px; }
.mega-col { display:flex; flex-direction:column; }
.mega-label { font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(255,255,255,0.4); margin:0 0 8px 12px; }
.mega .mt-7 { margin-top:24px; }
.mega-item { display:flex; gap:14px; align-items:flex-start; padding:11px 12px; border-radius:14px;
  outline:none; transition:background-color .2s var(--spring); }
.mega-item:hover, .mega-item:focus-visible { background:rgba(255,255,255,0.06); }
.mega-ico { flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:11px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:#fff; }
.mega-ico svg { width:19px; height:19px; }
.mega-item:hover .mega-ico { background:rgba(255,255,255,0.13); }
.mega-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.mega-title { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:#fff; }
.mega-tag { font-size:11.5px; font-weight:500; color:rgba(255,255,255,0.45); }
.mega-desc { font-size:13px; line-height:1.5; color:rgba(255,255,255,0.55); }
.mega-visual { position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:212px; padding:22px; border-radius:18px; overflow:hidden; outline:none;
  background:radial-gradient(120% 120% at 72% 18%, #1E1E1E 0%, #121212 52%, #0b0b0b 100%);
  border:1px solid rgba(255,255,255,0.1); transition:border-color .25s var(--spring); }
.mega-visual:hover, .mega-visual:focus-visible { border-color:rgba(255,255,255,0.28); }
.mega-visual-art { position:absolute; inset:0; display:grid; place-items:center; }
.mega-visual-art svg { width:60%; height:auto; }
.mega-visual-cap { position:relative; z-index:1; display:flex; flex-direction:column; gap:3px; }
/* photo fill for the diensten mega tile (image + readability scrim) */
.mega-visual-media { position:absolute; inset:0; }
.mega-visual-media img { width:100%; height:100%; object-fit:cover; object-position:center 62%; display:block;
  transition:transform .5s var(--spring); }
.mega-visual-media--team img { object-position:center 40%; }
.mega-visual-media--contact img { object-position:center 52%; }
.mega-visual:hover .mega-visual-media img, .mega-visual:focus-visible .mega-visual-media img { transform:scale(1.04); }
.mega-visual-scrim { position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,10,18,0.92) 4%, rgba(6,10,18,0.34) 52%, rgba(6,10,18,0.08) 100%); }
@media (max-width:959px){ .mega-wrap{ display:none; } }

/* ---- Hero: Ondo-style scroll transformation ----------------------------- */
/* --p is a *registered* custom property so it can be transitioned: one scroll
   input flips it 0→1 and CSS plays the whole movement (card compress + headline
   split + recolour) as a single motion, rather than scrubbing with the scrollbar. */
@property --p { syntax:'<number>'; inherits:true; initial-value:0; }
:root { --card-size:min(27vw, 45svh, 430px); }
.hero { position:relative; background:#fff; height:100svh; --p:0; --dxL:0px; --dxR:0px; }
.anim-ready .hero { transition:--p .9s cubic-bezier(0.65,0,0.35,1); }
.hero-sticky { position:sticky; top:0; height:100svh; overflow:hidden; }

.hero-card { position:absolute; left:50%; top:50%; width:100vw; height:100svh;
  transform:translate(-50%, -50%); border-radius:0; overflow:hidden; background:var(--navy); z-index:1;
  will-change:width,height,border-radius; }
.hero-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-card-scrim { position:absolute; inset:0; opacity:calc(1 - var(--p));
  background:linear-gradient(to bottom, rgba(8,16,32,0.34), rgba(8,16,32,0) 42%, rgba(8,16,32,0.55)); }

.hero-title { position:absolute; left:0; right:0; top:50%; z-index:3; margin:0;
  transform:translateY(calc(-50% - 3svh));
  display:flex; align-items:center; justify-content:center; gap:0.32em;
  padding-inline:clamp(24px,6vw,96px); pointer-events:none; }
.hero-word { font-family:'Michroma',system-ui,sans-serif; font-synthesis:none; font-weight:400;
  letter-spacing:0; line-height:1; white-space:nowrap;
  font-size:clamp(1.15rem,2.35vw,2.25rem); will-change:transform,color;
  /* Michroma has a single weight — thicken it with a stroke (no advance-width
     change, so the split measurement stays intact) for a bolder headline. */
  -webkit-text-stroke:0.8px currentColor;
  --wc:calc(255 - 245 * var(--p)); color:rgb(var(--wc) var(--wc) var(--wc)); }
.hero-word--l { transform:translateX(calc(var(--dxL) * var(--p))); }
.hero-word--r { transform:translateX(calc(var(--dxR) * var(--p))); }

.hero-cue { position:absolute; inset-inline:0; bottom:118px; z-index:3;
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:rgba(255,255,255,0.75); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  opacity:calc(1 - var(--p) * 2.4); }
.hero-caption { position:absolute; inset-inline:0; z-index:3; margin:0 auto;
  bottom:6svh;
  max-width:58ch; padding-inline:24px; text-align:center; color:var(--ink);
  font-size:clamp(1rem,1.3vw,1.16rem); line-height:1.55; opacity:calc((var(--p) - 0.62) * 3.4); }

/* scroll-driven card compression — desktop only (JS sets --p on .hero) */
@media (min-width:768px){
  .hero { height:180svh; }
  .hero-card {
    width: calc(100vw - var(--p) * (100vw - var(--card-size)));
    height: calc(100svh - var(--p) * (100svh - var(--card-size)));
    border-radius: calc(var(--p) * 34px);
  }
}
/* mobile: static full-bleed hero, stacked centred headline (no split) */
@media (max-width:767px){
  .hero-title { flex-direction:column; gap:2px; }
  .hero-word { white-space:normal; text-align:center; transform:none !important; color:#fff !important; }
  .hero-caption { display:none; }
}

/* ---- Muted logo strip --------------------------------------------------- */
.logo-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:32px 52px; }
.logo-row img { height:26px; width:auto; opacity:0.5; filter:grayscale(1);
  transition:opacity .3s var(--spring), filter .3s var(--spring); }
.logo-row li:hover img, .logo-row a:hover img { opacity:0.9; filter:grayscale(0); }

/* ---- Tabbed showcase ---------------------------------------------------- */
.tabs { display:inline-flex; flex-wrap:wrap; justify-content:center; gap:4px; padding:5px; border-radius:999px;
  background:rgba(10,10,10,0.05); border:1px solid var(--line); }
.tab { appearance:none; border:0; cursor:pointer; padding:10px 20px; border-radius:999px;
  font-size:14px; font-weight:500; color:var(--ink2); background:transparent; outline:none;
  transition:color .3s var(--spring), background-color .3s var(--spring); }
.tab:hover { color:var(--ink); }
.tab.is-active { background:var(--navy); color:#fff; }
.tab:focus-visible { box-shadow:0 0 0 2px rgba(10,10,10,0.5); }
.tab-panel { display:none; }
.tab-panel.is-active { display:block; animation: fadeUp .5s var(--spring) both; }
@keyframes fadeUp { from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ---- Big stat band ------------------------------------------------------ */
.stat-band { display:grid; gap:0; }
@media (min-width:768px){ .stat-band { grid-template-columns:repeat(4,1fr); } }
.stat-cell { padding:24px 0; border-top:1px solid var(--line); }
@media (min-width:768px){ .stat-cell { padding:8px 30px 8px 0; border-top:0; } }
.stat-band .stat-num { font-size:clamp(3rem, 6vw, 5rem); color:var(--ink); }
.section-navy .stat-band .stat-num { color:#fff; }
.stat-band .stat-label { margin-top:6px; font-size:14px; color:var(--ink2); }
.section-navy .stat-band .stat-label { color:rgba(255,255,255,0.6); }

/* ---- Testimonial carousel ----------------------------------------------- */
.tcar { position:relative; }
.tcar-viewport { overflow:hidden; }
.tcar-track { display:flex; transition:transform .6s var(--spring); }
.tcar-slide { flex:0 0 100%; min-width:0; padding:2px; }
.tquote { font-weight:500; font-size:clamp(1.35rem, 2.6vw, 2.1rem); line-height:1.34;
  letter-spacing:-0.01em; color:var(--ink); }
.section-navy .tquote { color:#fff; }
.tcar-foot { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:32px; flex-wrap:wrap; }
.tcar-meta { display:flex; align-items:center; gap:14px; }
.tcar-nav { display:inline-flex; gap:10px; }
.tcar-dots { display:flex; gap:8px; margin-top:22px; }
.tcar-dot { width:8px; height:8px; border-radius:999px; border:0; padding:0; cursor:pointer;
  background:rgba(10,10,10,0.18); outline:none;
  transition:background-color .3s var(--spring), transform .3s var(--spring); }
.tcar-dot.is-active { background:var(--navy); transform:scale(1.3); }
.tcar-dot:focus-visible { box-shadow:0 0 0 2px rgba(10,10,10,0.5); }

/* ---- Tarieven per entiteit — light frame + white cards (same palette as the
   diensten bento: #F1F2F3 frame, #fff cards, navy accents) */
.entity-frame { background:#F1F2F3; border:1px solid rgba(10,10,10,0.06); border-radius:28px; padding:14px; }
.entity-grid { display:grid; gap:14px; }
@media (min-width:820px){ .entity-grid { grid-template-columns:1fr 1fr; } }
.entity-card { display:flex; flex-direction:column; background:#fff; border:1px solid rgba(10,10,10,0.07);
  box-shadow:0 1px 2px rgba(10,10,10,0.04); border-radius:18px;
  padding:36px 36px 30px; color:var(--ink); }
.entity-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.entity-name { font-family:'Michroma',system-ui,sans-serif; font-synthesis:none;
  font-size:clamp(1.02rem,1.5vw,1.3rem); line-height:1.1; min-width:0; }
.entity-tag { flex:none; font-size:12px; color:rgba(10,10,10,0.6); white-space:nowrap;
  border:1px solid rgba(10,10,10,0.14); border-radius:999px; padding:5px 12px; }
.entity-tag--hl { color:#fff; background:var(--navy); border-color:var(--navy); font-weight:600; }
.entity-price { margin-top:28px; display:flex; align-items:baseline; gap:9px;
  font-family:'Michroma',system-ui,sans-serif; font-synthesis:none; color:var(--navy);
  font-size:clamp(1.9rem,3vw,2.7rem); line-height:1; }
.entity-vanaf { font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:rgba(10,10,10,0.5); align-self:center; }
.entity-cur { font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:0.62em; align-self:center; }
.entity-per { font-family:'Inter',sans-serif; font-size:15px; color:rgba(10,10,10,0.5); }
.entity-feat { margin-top:26px; display:flex; flex-direction:column; gap:13px; }
.entity-feat li { display:flex; align-items:center; gap:11px; font-size:15px; color:var(--ink2); }
.entity-check { width:19px; height:19px; flex:none; color:var(--navy); }
.entity-link { margin-top:auto; padding-top:30px; align-self:flex-start; display:inline-flex;
  align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--navy); opacity:1; outline:none;
  border-radius:6px; transition:gap .25s var(--spring), opacity .25s var(--spring); }
.entity-link:hover, .entity-link:focus-visible { gap:12px; opacity:0.72; }
.entity-link:focus-visible { box-shadow:0 0 0 2px rgba(10,10,10,0.5); }
/* Mobile: the name + nowrap tag can't fit on one row (long Michroma name +
   pill), so stack them and tighten padding to prevent horizontal overflow. */
@media (max-width:560px){
  .entity-frame { padding:10px; border-radius:22px; }
  .entity-card { padding:26px 22px 24px; border-radius:16px; }
  .entity-head { flex-direction:column; align-items:flex-start; gap:10px; }
  .entity-name { font-size:1.18rem; }
  .entity-price { margin-top:20px; }
  .entity-feat { margin-top:22px; }
  .entity-link { padding-top:26px; }
}

/* ---- Footer (Ondo-style: black, link columns, giant wordmark) ---------- */
.site-footer { background:#000; color:#fff; padding:84px 0 30px; overflow:hidden; }
.footer-cols { display:grid; grid-template-columns:repeat(2,1fr); gap:40px 24px; }
@media (min-width:820px){ .footer-cols { grid-template-columns:repeat(4,1fr); } }
.footer-head { margin:0 0 18px; font-size:15px; font-weight:600; color:#fff; }
.footer-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.footer-col li { font-size:14.5px; line-height:1.5; color:rgba(255,255,255,0.5); }
.footer-col a { color:rgba(255,255,255,0.5); text-decoration:none; outline:none; border-radius:4px;
  transition:color .2s var(--spring); }
.footer-col a:hover, .footer-col a:focus-visible { color:#fff; }
.foot-ext { font-size:12px; opacity:0.7; }
.footer-wordmark { margin-top:72px; }
.footer-wordmark img { display:block; width:100%; height:auto; }
.footer-bottom { margin-top:34px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.footer-legal { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 24px;
  text-align:center; font-size:13px; color:rgba(255,255,255,0.45); }
.footer-legal a { color:inherit; text-decoration:none; outline:none; transition:color .2s var(--spring); }
.footer-legal a:hover, .footer-legal a:focus-visible { color:#fff; }

/* Light footer variant (Ondo uses both). Base .site-footer stays black; add
   .site-footer--light for the white version (used on the homepage). */
.site-footer--light { background:#fff; color:var(--ink); border-top:1px solid rgba(10,10,10,0.10); }
.site-footer--light .footer-head { color:var(--ink); }
.site-footer--light .footer-col li { color:rgba(13,13,13,0.55); }
.site-footer--light .footer-col a { color:rgba(13,13,13,0.55); }
.site-footer--light .footer-col a:hover, .site-footer--light .footer-col a:focus-visible { color:var(--ink); }
.site-footer--light .footer-wordmark img { filter:invert(1); }   /* white wordmark → black */
.site-footer--light .footer-legal { color:rgba(13,13,13,0.5); }
.site-footer--light .footer-legal a:hover, .site-footer--light .footer-legal a:focus-visible { color:var(--ink); }

/* reduced-motion for remake components */
@media (prefers-reduced-motion: reduce) {
  .hero { height:100svh !important; --p:0 !important; }
  .hero-card { width:100vw !important; height:100svh !important; border-radius:0 !important; }
  .hero-word { transform:none !important; color:#fff !important; }
  .hero-caption { display:none; }
  .tab-panel.is-active { animation:none; }
  .tcar-track { transition:none; }
}

/* ======================================================================
   DIENSTEN-TEASER — Ondo "Ondo Stocks" bento. Light neutral frame holding
   white cards: a tall flagship (Boekhouding), a wide card (Belastingadvies),
   and two half cards (Salaris, Bedrijfsadvies). Monochrome brand palette;
   generated SVG visuals give each card body. Only transform/opacity animate.
   ====================================================================== */
.svc-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.svc-all {
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  color:var(--navy); text-decoration:none; white-space:nowrap; padding-bottom:4px;
  transition:gap .3s var(--spring);
}
.svc-all svg { width:17px; height:17px; }
.svc-all:hover { gap:13px; }
.svc-all:focus-visible { outline:2px solid var(--navy); outline-offset:3px; border-radius:5px; }

.svc-frame {
  background:#F1F2F3; border:1px solid rgba(10,10,10,0.06);
  border-radius:28px; padding:14px;
}
.svc-grid { display:grid; grid-template-columns:0.82fr 1.18fr; gap:14px; align-items:stretch; }
.svc-right { display:grid; grid-template-rows:auto 1fr; gap:14px; }
.svc-sub { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }

.svc-card {
  position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid rgba(10,10,10,0.07); border-radius:20px; padding:28px;
  box-shadow:0 1px 2px rgba(10,10,10,0.04); text-decoration:none; color:inherit;
  transition:transform .5s var(--spring), box-shadow .5s var(--spring);
}
a.svc-card:hover { transform:translateY(-3px); box-shadow:0 24px 48px -28px rgba(10,10,10,0.34); }
a.svc-card:focus-visible { outline:2px solid var(--navy); outline-offset:3px; }
.svc-card--flag { padding:32px; }
.svc-card--wide { min-height:210px; }
.svc-sub .svc-card { min-height:238px; }

.svc-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.svc-ico {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:54px; height:54px; border-radius:15px; background:var(--ink); color:#fff;
}
.svc-ico svg { width:26px; height:26px; }
.svc-card--flag .svc-ico { width:60px; height:60px; border-radius:17px; }
.svc-card--flag .svc-ico svg { width:28px; height:28px; }

.svc-title { font-family:'Inter',system-ui,sans-serif; font-weight:700; letter-spacing:-0.015em; font-size:20px; line-height:1.15; color:var(--ink); }
.svc-title--lg { font-size:clamp(1.55rem, 2.3vw, 2rem); }
.svc-desc { margin-top:11px; font-size:14.5px; line-height:1.6; color:var(--ink2); max-width:44ch; }

.svc-feat { margin-top:24px; display:flex; flex-direction:column; gap:13px; }
.svc-feat li { display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:500; color:var(--ink); }
.svc-check { width:21px; height:21px; flex:none; color:var(--navy); }

.svc-flag-foot { margin-top:auto; padding-top:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.svc-mini { font-size:11px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:#8B93A0; margin-bottom:10px; }
.svc-chips { display:flex; align-items:center; }
.svc-chip {
  display:flex; align-items:center; justify-content:center; flex:none;
  width:40px; height:40px; border-radius:999px; background:#fff; overflow:hidden;
  border:1px solid rgba(10,10,10,0.12); box-shadow:0 2px 8px -3px rgba(10,10,10,0.28);
  margin-left:-10px;
}
.svc-chip:first-child { margin-left:0; }
.svc-chip img { width:22px; height:22px; object-fit:contain; filter:grayscale(1); opacity:.72; }

.svc-cta {
  display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:#fff;
  font-size:14px; font-weight:600; padding:12px 20px; border-radius:13px; text-decoration:none;
  white-space:nowrap; transition:transform .4s var(--spring), background-color .3s ease;
}
.svc-cta svg { width:16px; height:16px; transition:transform .3s var(--spring); }
.svc-cta:hover { transform:translateY(-2px); background:#000; }
.svc-cta:hover svg { transform:translateX(3px); }
.svc-cta:focus-visible { outline:2px solid var(--navy); outline-offset:3px; }

/* Wide card: copy left, generated visual right */
.svc-card--wide { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); align-items:center; gap:24px; }
.svc-card--wide .svc-card-top { margin-bottom:20px; }
.svc-wide-copy { display:flex; flex-direction:column; }
.svc-wide-visual { display:flex; align-items:center; justify-content:flex-end; align-self:stretch; }
.svc-scatter { width:100%; height:auto; max-height:150px; display:block; }

/* Bottom-of-card generated visuals for the two half cards */
.svc-viz { width:100%; height:auto; display:block; margin-top:auto; padding-top:22px; }
.svc-rows { max-height:82px; }
.svc-bars { max-height:104px; }
.svc-plan { max-height:104px; }

@media (max-width: 900px) {
  .svc-grid { grid-template-columns:1fr; }
  .svc-card--wide { grid-template-columns:1fr; }
  .svc-wide-visual { justify-content:flex-start; padding-top:18px; }
}
@media (max-width: 560px) {
  .svc-sub { grid-template-columns:1fr; }
  .svc-card, .svc-card--flag { padding:24px; }
  .svc-flag-foot { flex-direction:column; align-items:flex-start; }
}

/* ======================================================================
   WERKWIJZE — connected app-flow rail (navy section). Five app-icon tiles
   on one pipeline (chevrons between); hover/click/focus swaps the large
   detail panel below. AirBill active by default. Only transform/opacity
   animate; the panel swap is a fade-in on the newly shown panel.
   ====================================================================== */
.wf-rail { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:56px; }
.wf-node {
  -webkit-appearance:none; appearance:none; background:none; border:0; padding:6px;
  cursor:pointer; border-radius:22px; outline:none;
}
.wf-node-logo {
  display:flex; align-items:center; justify-content:center; width:76px; height:76px;
  border-radius:20px; background:#fff; border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 12px 30px -18px rgba(0,0,0,0.7);
  transition:transform .45s var(--spring), box-shadow .45s var(--spring), outline-color .3s ease;
  outline:2px solid transparent; outline-offset:3px;
}
.wf-node-logo img {
  width:46px; height:46px; object-fit:contain;
  filter:grayscale(1); opacity:.5; transition:filter .35s ease, opacity .35s ease;
}
.wf-node:hover .wf-node-logo,
.wf-node.is-active .wf-node-logo { transform:translateY(-4px) scale(1.05); box-shadow:0 22px 44px -18px rgba(0,0,0,0.8); }
.wf-node.is-active .wf-node-logo { outline-color:rgba(255,255,255,0.9); }
.wf-node:hover .wf-node-logo img,
.wf-node.is-active .wf-node-logo img { filter:none; opacity:1; }
.wf-node:focus-visible .wf-node-logo { outline-color:#fff; }

.wf-arrow { color:rgba(255,255,255,0.34); flex:none; display:flex; }
.wf-arrow svg { width:22px; height:22px; display:block; }

.wf-detail { position:relative; margin-top:44px; }
.wf-panel {
  display:none;
  grid-template-columns:auto 1fr; gap:34px; align-items:center;
  position:relative; overflow:hidden;
  background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.10);
  border-radius:24px; padding:44px;
}
.wf-panel.is-active { display:grid; animation:wfIn .5s var(--spring) both; }
@keyframes wfIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

.wf-panel-logo {
  display:flex; align-items:center; justify-content:center; flex:none;
  width:108px; height:108px; border-radius:26px; background:#fff;
  box-shadow:0 16px 40px -20px rgba(0,0,0,0.7);
}
.wf-panel-logo img { width:66px; height:66px; object-fit:contain; }
.wf-panel-body { position:relative; z-index:1; min-width:0; }
.wf-step { display:inline-block; font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.wf-name {
  font-family:'Michroma',system-ui,sans-serif; font-synthesis:none; font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:-0.01em; line-height:1.1;
  color:#fff; margin-top:8px;
}
.wf-desc { margin-top:14px; max-width:62ch; font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.62; color:rgba(255,255,255,0.72); }
.wf-ghost-num {
  position:absolute; right:24px; bottom:-46px; z-index:0; pointer-events:none;
  font-family:'Michroma',system-ui,sans-serif; font-synthesis:none; line-height:1;
  font-size:clamp(140px,17vw,230px); color:rgba(255,255,255,0.05); letter-spacing:-0.02em;
}

@media (max-width:820px) {
  .wf-panel { grid-template-columns:1fr; gap:22px; padding:32px; }
  .wf-panel-logo { width:84px; height:84px; border-radius:22px; }
  .wf-panel-logo img { width:52px; height:52px; }
  .wf-ghost-num { font-size:150px; bottom:-30px; right:14px; }
}
@media (max-width:560px) {
  /* Keep all five apps on one row: no wrap + fluid tiles that always fit. */
  .wf-rail { gap:8px; flex-wrap:nowrap; }
  .wf-arrow { display:none; }   /* flow stays clear via the numbered steps */
  .wf-node { padding:0; flex:1 1 0; min-width:0; }
  .wf-node-logo { width:100%; max-width:64px; height:auto; aspect-ratio:1;
    margin-inline:auto; border-radius:16px; }
  .wf-node-logo img { width:52%; height:52%; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-panel.is-active { animation:none; }
  .wf-node:hover .wf-node-logo, .wf-node.is-active .wf-node-logo { transform:none; }
}

/* Graphite variant of a navy section: neutral charcoal background, keeps the
   .section-navy white-text + grain treatment. Used by #werkwijze. */
.section-navy.section-graphite {
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(90,92,100,0.42) 0%, rgba(26,26,28,0) 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(170,170,180,0.08) 0%, rgba(26,26,28,0) 55%),
    #1B1B1E;
}

/* Headings forced onto one line (desktop) — the .dim word stays the only
   recoloured token. Wraps normally on mobile where one line won't fit. */
@media (min-width:768px) { .h2-1line { white-space:nowrap; } }

/* Werkwijze: after shortening heading + subtext to one line each, add the
   freed vertical space back so the section keeps its full-screen height.
   Desktop-only; mobile stacks naturally. */
@media (min-width:768px) {
  #werkwijze { padding-block: 168px; }
  #werkwijze .wf-rail { margin-top: 92px; }
  #werkwijze .wf-detail { margin-top: 74px; }
}

/* ======================================================================
   WAAROM UWBS — USP grid (graphite) + reviews head. Flat items (no cards)
   so it reads differently than the diensten bento and werkwijze panels.
   ====================================================================== */
.usp-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:38px 28px; }
.usp { display:flex; flex-direction:column; }
.usp-ico {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:52px; height:52px; border-radius:14px; color:#fff;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.13);
}
.usp-ico svg { width:25px; height:25px; }
.usp-title { margin-top:20px; font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:1.05rem; letter-spacing:-0.01em; color:#fff; line-height:1.25; }
.usp-desc { margin-top:9px; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,0.6); }
@media (max-width:980px) { .usp-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:34px 24px; } }
@media (max-width:560px) { .usp-grid { grid-template-columns:1fr; } }

.rev-head { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.rev-score { display:inline-flex; align-items:center; gap:12px; }
.rev-score .stars svg { width:20px; height:20px; }
.rev-score-text { font-size:15px; color:rgba(255,255,255,0.72); }
.rev-score-text strong { color:#fff; font-weight:600; }
.section-navy .svc-all { color:#fff; }

.cta-actions { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ========================================================================
   TARIEVEN PAGE — page hero + calculator (graphite panels, no navy)
   ======================================================================== */
/* Fills the first viewport so the calculator heading sits just below the fold. */
.page-hero { min-height: 100svh; padding-top: clamp(148px, 20vh, 224px); padding-bottom: clamp(56px, 8vh, 104px); }
/* Over ons-hero: titel bovenaan, kengetallen onderaan het eerste scherm (landing). */
.page-hero--split { display: flex; flex-direction: column; }
.page-hero--split .shell { flex: 1 1 auto; display: flex; flex-direction: column; }
.page-hero--split .ov-stats { margin-top: auto; padding-top: clamp(40px, 8vh, 96px); }
.page-hero-title { font-size: clamp(2.35rem, 7vw, 6rem); }
.page-hero-meta { display:flex; flex-wrap:wrap; gap:12px 26px; }
.phm-item { display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:500; color:var(--ink); }
.phm-item svg { width:19px; height:19px; flex:none; color:var(--ink); }

/* Subpages: the nav is the solid black pill from the start (no wide bar).
   motion.js also forces the "on" state when there is no #hero; this rule
   prevents a flash of the transparent nav before the script runs. */
.subpage #navPill {
  max-width:1320px; margin-top:8px; padding-left:26px; padding-right:26px;
  background:rgba(11,11,11,0.98); border-radius:40px;
  -webkit-backdrop-filter:saturate(1.3) blur(12px); backdrop-filter:saturate(1.3) blur(12px);
  box-shadow:0 20px 50px -24px rgba(0,0,0,0.7);
}

/* entity-opt inner labels (calculator entity selector) */
.entity-opt-name { display:block; font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:16px; color:#fff; letter-spacing:-0.01em; }
.entity-opt-price { display:block; margin-top:3px; font-size:13.5px; color:rgba(255,255,255,0.55); }

/* calculator layout */
.calc-wrap { display:grid; gap:14px; grid-template-columns:minmax(0,1fr); }
@media (min-width:960px){ .calc-wrap { grid-template-columns:1.08fr 0.92fr; align-items:start; } }

.calc-panel { display:flex; flex-direction:column; gap:34px; background:#141414; border:1px solid rgba(255,255,255,0.06); border-radius:22px; padding:26px; min-width:0; }
@media (min-width:640px){ .calc-panel { padding:36px; } }
.calc-label { margin:0 0 16px; font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
/* mobile: stack the two entity buttons; 2-up from 420px. minmax(0,1fr) lets
   the long "Werkmaatschappij" name shrink instead of forcing overflow. */
.calc-entities { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:420px){ .calc-entities { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.calc-addons { display:flex; flex-direction:column; gap:12px; }
.addon-body { min-width:0; flex:1 1 auto; }
.addon-name { font-weight:600; font-size:15px; color:#fff; }
.addon-sub { margin-top:2px; font-size:13px; line-height:1.45; color:rgba(255,255,255,0.55); }
.addon-count { width:26px; text-align:center; font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:17px; color:#fff; font-variant-numeric:tabular-nums; }
.addon-price { flex:none; font-size:12.5px; font-weight:600; color:#fff; white-space:nowrap; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); border-radius:999px; padding:6px 12px; }

.calc-ticket { background:#1B1B1E; border:1px solid rgba(255,255,255,0.08); border-radius:22px; padding:26px; color:#fff; box-shadow:0 34px 70px -34px rgba(0,0,0,0.6); min-width:0; }
@media (min-width:640px){ .calc-ticket { padding:32px; } }
@media (min-width:960px){ .calc-ticket { position:sticky; top:104px; } }
.calc-ticket-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.calc-ticket-title { font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:19px; color:#fff; letter-spacing:-0.01em; }
.calc-ov-items { margin-top:24px; display:flex; flex-direction:column; gap:15px; }
.calc-ticket-total { margin-top:24px; border-top:1px solid rgba(255,255,255,0.14); padding-top:20px; }
.calc-total-label { font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.calc-total-ex { margin-top:3px; font-size:11px; color:rgba(255,255,255,0.45); }
.calc-total-num { font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:33px; line-height:1; color:#fff; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
/* white CTA on the dark ticket (overrides .section-sand's black primary) */
.calc-ticket .btn-primary { background:#fff; color:var(--ink); }
.calc-ticket .btn-primary:hover { background:var(--sand); }
.calc-cta { margin-top:26px; width:100%; }
.calc-fine { margin-top:16px; color:rgba(255,255,255,0.45) !important; }

/* ========================================================================
   DIENSTEN PAGE — inverted scheme: white pill header + white footer over a
   continuous dark (graphite) canvas.
   ======================================================================== */

/* --- Light nav variant: white pill, dark logo/text/CTA. `!important` beats
   the dark background motion.js sets inline on #navPill. --------------------- */
body.subpage--light #navPill {
  background:rgba(255,255,255,0.96) !important;
  box-shadow:0 20px 44px -24px rgba(0,0,0,0.30) !important;
}
body.subpage--light .nav-link { color:var(--ink); opacity:0.72; }
body.subpage--light .nav-link:hover, body.subpage--light .nav-link:focus-visible { opacity:1; }
body.subpage--light .nav-link.is-active { opacity:1; background:rgba(10,10,10,0.06); }
body.subpage--light .nav-link:focus-visible { box-shadow:0 0 0 2px rgba(10,10,10,0.4); }
body.subpage--light .nav-lang { color:var(--ink); }
body.subpage--light .nav-lang > span { color:rgba(10,10,10,0.3); }
body.subpage--light .nav-lang a:focus-visible { box-shadow:0 0 0 2px rgba(10,10,10,0.5); }
body.subpage--light .nav-cta--ghost { color:var(--ink); border-color:rgba(10,10,10,0.24); }
body.subpage--light .nav-cta--ghost:hover { border-color:rgba(10,10,10,0.5); background:rgba(10,10,10,0.04); }
body.subpage--light .nav-cta--solid { background:var(--ink); color:#fff; border-color:var(--ink); }
body.subpage--light .nav-cta--solid:hover { box-shadow:0 12px 26px -12px rgba(0,0,0,0.4); }
body.subpage--light .nav-cta:focus-visible { box-shadow:0 0 0 2px rgba(10,10,10,0.6); }
body.subpage--light .nav-burger { color:var(--ink); }
body.subpage--light .nav-brand:focus-visible { box-shadow:0 0 0 2px rgba(10,10,10,0.5); }

/* --- Dark page canvas: one continuous graphite wash (no per-section seams).
   Inner .section-navy blocks go transparent so the body shows through. ------- */
body.page-dark { background:#1B1B1E; }
body.page-dark::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(96,98,108,0.30) 0%, rgba(26,26,28,0) 58%),
    radial-gradient(90% 70% at 100% 100%, rgba(170,170,180,0.06) 0%, rgba(26,26,28,0) 55%);
}
body.page-dark .section-navy { background:transparent; }
/* Footer op donkere pagina's = dezelfde graphite-canvas als de secties (geen zwart blok). */
body.page-dark .site-footer { background:transparent; border-top:1px solid rgba(255,255,255,0.08); }
/* chips read light on the dark hero */
body.page-dark .phm-item { color:rgba(255,255,255,0.74); }
body.page-dark .phm-item svg { color:rgba(255,255,255,0.85); }

/* --- Service cards (dark) -------------------------------------------------- */
.dsv-grid { display:grid; gap:16px; }
@media (min-width:820px){ .dsv-grid { grid-template-columns:1fr 1fr; } .dsv-card--wide { grid-column:1 / -1; } }

/* ---- Eenmalige & losse kosten (tarieven) ---- */
.onetime-list { max-width:640px; margin-inline:auto; border-top:1px solid rgba(10,10,10,0.12); }
.onetime-row { display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:16px 4px; border-bottom:1px solid rgba(10,10,10,0.12); }
.onetime-name { color:var(--ink); font-weight:500; }
.onetime-price { font-family:'Syne', system-ui, sans-serif; font-weight:700; color:var(--navy); white-space:nowrap; }
.onetime-unit { font-family:'Inter', system-ui, sans-serif; font-weight:400; font-size:13px; color:rgba(13,13,13,0.5); }

/* ---- Wat zit er in je pakket? (inbegrepen / optioneel / los) ---- */
.pkg-grid { display:grid; gap:16px; align-items:start; }
@media (min-width:900px){ .pkg-grid { grid-template-columns:repeat(3,1fr); } }
.pkg-card { display:flex; flex-direction:column; background:#fff; border:1px solid rgba(10,10,10,0.08);
  border-radius:22px; padding:30px; box-shadow:0 1px 2px rgba(10,10,10,0.04); }
.pkg-card--included { border-color:rgba(10,10,10,0.18); box-shadow:0 26px 52px -32px rgba(10,10,10,0.30); }
.pkg-head { display:flex; align-items:center; gap:13px; margin-bottom:8px; }
.pkg-badge { flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:rgba(10,10,10,0.06); color:var(--navy); }
.pkg-card--included .pkg-badge { background:var(--navy); color:#fff; }
.pkg-badge svg { width:21px; height:21px; }
.pkg-title { font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:18px; letter-spacing:-0.01em; color:var(--ink); }
.pkg-tag { margin-top:2px; font-size:12.5px; line-height:1.35; color:var(--ink2); }
.pkg-list { margin-top:20px; display:flex; flex-direction:column; }
.pkg-item { display:flex; align-items:flex-start; gap:11px; padding:11px 0; font-size:14.5px; line-height:1.4;
  color:var(--ink); border-top:1px solid rgba(10,10,10,0.08); }
.pkg-item:first-child { border-top:0; }
.pkg-mark { flex:none; width:18px; height:18px; margin-top:1px; color:var(--navy); }
.pkg-mark--muted { color:rgba(10,10,10,0.38); }
.pkg-item-name { flex:1 1 auto; min-width:0; }
.pkg-item-price { flex:none; font-weight:600; color:var(--navy); white-space:nowrap; font-variant-numeric:tabular-nums; }
.pkg-note { margin-top:auto; padding-top:18px; font-size:12.5px; line-height:1.5; color:var(--ink2); }
.pkg-foot { max-width:760px; margin:26px auto 0; text-align:center; font-size:13.5px; line-height:1.6; color:var(--ink2); }
.dsv-card { display:flex; flex-direction:column; background:#141414; border:1px solid rgba(255,255,255,0.07); border-radius:22px; padding:30px; }
@media (min-width:640px){ .dsv-card { padding:38px; } }
.dsv-ico { display:inline-flex; align-items:center; justify-content:center; flex:none; width:56px; height:56px; border-radius:16px; color:#fff; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); }
.dsv-ico svg { width:26px; height:26px; }
.dsv-title { margin-top:22px; font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:22px; letter-spacing:-0.015em; color:#fff; }
.dsv-desc { margin-top:12px; font-size:15px; line-height:1.6; color:rgba(255,255,255,0.62); max-width:46ch; }
.dsv-pills { margin-top:22px; display:flex; flex-wrap:wrap; gap:9px; }
.dsv-pill { font-size:12.5px; font-weight:500; color:rgba(255,255,255,0.82); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:999px; padding:7px 13px; }
.dsv-highlight { margin-top:auto; display:flex; align-items:center; gap:15px; margin-top:28px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:15px 17px; }
.dsv-hl-ico { display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; border-radius:11px; color:#fff; background:rgba(255,255,255,0.08); }
.dsv-hl-ico svg { width:20px; height:20px; }
.dsv-hl-title { font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:15px; color:#fff; }
.dsv-hl-sub { margin-top:2px; font-size:13px; line-height:1.4; color:rgba(255,255,255,0.55); }

/* --- Diensten hero: USP band pinned to the landing fold (title uses the shared
   .page-hero-title scale so it matches the other subpages) --- */
.dsv-usps { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px; width:100%; max-width:940px; margin-inline:auto; }
.dsv-usp { display:flex; align-items:center; justify-content:center; gap:11px; padding:18px 20px;
  border:1px solid rgba(10,10,10,0.12); border-radius:16px; background:rgba(10,10,10,0.02); }
.dsv-usp svg { width:20px; height:20px; flex:none; color:var(--navy); }
.dsv-usp span { font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:15.5px; letter-spacing:-0.01em; color:var(--ink); }
/* dark pages (e.g. Diensten): light-on-dark treatment */
body.page-dark .dsv-usp { border-color:rgba(255,255,255,0.12); background:rgba(255,255,255,0.03); }
body.page-dark .dsv-usp svg { color:#fff; }
body.page-dark .dsv-usp span { color:#fff; }
.page-hero--split .dsv-usps { margin-top:auto; padding-top:clamp(40px,8vh,96px); }

/* --- Diensten overview: category groups + compact service cards.
   Namespaced `dov-` so it never collides with the home `.svc-*` bento. --- */
.dov-cat { padding-block:clamp(40px,6vh,72px); border-top:1px solid rgba(255,255,255,0.09); }
.dov-cat:first-child { border-top:0; padding-top:0; }
.dov-cat-head { max-width:720px; margin-bottom:clamp(26px,3.4vh,40px); }
.dov-cat-eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.dov-cat-eyebrow::before { content:""; width:26px; height:1px; background:rgba(255,255,255,0.35); }
.dov-cat-title { margin-top:14px; font-family:'Inter',system-ui,sans-serif; font-weight:700;
  font-size:clamp(1.6rem,3vw,2.1rem); letter-spacing:-0.02em; color:#fff; }
.dov-cat-intro { margin-top:12px; font-size:15.5px; line-height:1.65; color:rgba(255,255,255,0.6); }
.dov-cards { display:grid; gap:14px; }
@media (min-width:640px){ .dov-cards { grid-template-columns:1fr 1fr; } }
.dov-card { display:flex; gap:16px; align-items:flex-start; background:#141414;
  border:1px solid rgba(255,255,255,0.07); border-radius:18px; padding:24px;
  transition:border-color .25s var(--spring), transform .25s var(--spring); }
.dov-card:hover { border-color:rgba(255,255,255,0.18); transform:translateY(-2px); }
.dov-ico { flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:13px;
  color:#fff; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); }
.dov-ico svg { width:22px; height:22px; }
.dov-card-body { min-width:0; }
.dov-card-title { display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:17px; letter-spacing:-0.01em; color:#fff; }
.dov-tag { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
  border-radius:999px; padding:3px 9px; }
.dov-card-desc { margin-top:9px; font-size:14px; line-height:1.6; color:rgba(255,255,255,0.6); }

/* ========================================================================
   OVER ONS (dark page) — stats band + team nav arrows
   ======================================================================== */
.ov-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:34px 20px; text-align:center; max-width:820px; margin-inline:auto; }
@media (min-width:760px){ .ov-stats { grid-template-columns:repeat(4,1fr); } }
.ov-stat-num { font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:clamp(2.4rem,4.4vw,3.5rem); line-height:1; letter-spacing:-0.02em; color:#fff; font-variant-numeric:tabular-nums; }
.ov-stat-num .eur { font-weight:700; }
.ov-stat-label { margin-top:10px; font-size:13px; letter-spacing:0.02em; color:rgba(255,255,255,0.55); }
.team-nav { display:none; gap:10px; }
@media (min-width:640px){ .team-nav { display:inline-flex; } }

/* ========================================================================
   CONTACT (light page) — two columns: white intake-info panel left, the
   compact Calendly calendar (hide_event_type_details) right. Phone /
   e-mail / address / map arranged below.
   ======================================================================== */
.planner-grid { display:grid; gap:16px; }
@media (min-width:980px){ .planner-grid { grid-template-columns:minmax(0,2fr) minmax(0,3fr); align-items:stretch; } }
.planner-info {
  display:flex; flex-direction:column;
  background:#fff; border:1px solid rgba(10,10,10,0.08); border-radius:24px;
  box-shadow:0 18px 48px -22px rgba(10,10,10,0.30);
  padding:26px;
}
@media (min-width:720px){ .planner-info { padding:32px; } }
.planner-info-title { line-height:1.2; }
.planner-info-meta { margin-top:26px; list-style:none; padding:0; }
.planner-info-meta li { display:flex; align-items:center; gap:13px; padding:12px 0; border-top:1px solid rgba(10,10,10,0.10); font-size:14.5px; color:rgba(10,10,10,0.72); }
.planner-info-meta li strong { color:var(--ink); font-weight:600; }
.planner-info-ico { flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:var(--ink); background:rgba(10,10,10,0.045); border:1px solid rgba(10,10,10,0.10); }
.planner-info-ico svg { width:18px; height:18px; }
.planner-office { margin-top:auto; padding-top:20px; border-top:1px solid rgba(10,10,10,0.10); }
.planner-office-title { font-weight:600; font-size:15px; color:var(--ink); }
.planner-office-text { margin-top:6px; font-size:14px; line-height:1.65; color:rgba(10,10,10,0.60); }
.planner-office .btn { margin-top:16px; padding:14px 22px; font-size:14px; width:100%; }
.planner-office-hours { margin-top:12px; font-size:12.5px; letter-spacing:0.01em; line-height:1.7; color:rgba(10,10,10,0.5); text-align:center; }
.planner-embed {
  border-radius:24px; overflow:hidden; background:#fff;
  border:1px solid rgba(10,10,10,0.08); box-shadow:0 18px 48px -22px rgba(10,10,10,0.30);
}

/* Details + map below the frame. */
.contact-info { display:grid; gap:16px; }
@media (min-width:920px){ .contact-info { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:stretch; } }
.contact-info-col { display:flex; flex-direction:column; gap:16px; }
.contact-map {
  overflow:hidden; border-radius:24px; border:1px solid rgba(10,10,10,0.10);
  box-shadow:0 18px 48px -24px rgba(10,10,10,0.30); min-height:360px;
}
.contact-map iframe { display:block; width:100%; height:100%; min-height:360px; border:0; }

/* ========================================================================
   LEGAL (voorwaarden / privacy) — lange juridische tekst. Smalle leeskolom,
   sticky inhoudsopgave op desktop, artikelen met a/b/c- en i/ii/iii-nummering
   via CSS-counters. Herbruikbaar voor beide juridische pagina's.
   ======================================================================== */
.legal-hero { padding-top: clamp(150px, 18vh, 210px); padding-bottom: clamp(40px, 6vh, 72px); }
.legal-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }

.legal-layout { display:grid; gap:48px; align-items:start; }
@media (min-width:1024px){ .legal-layout { grid-template-columns: 272px minmax(0,1fr); gap:64px; } }

/* Inhoudsopgave — kaart, sticky op desktop. */
.legal-toc {
  background:#fff; border:1px solid rgba(10,10,10,0.10); border-radius:22px;
  padding:24px 20px; box-shadow:0 22px 56px -34px rgba(10,10,10,0.30);
}
@media (min-width:1024px){ .legal-toc { position:sticky; top:112px; } }
.legal-toc-head { padding:0 10px 12px; font-size:11.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:rgba(10,10,10,0.5); }
.legal-toc ol { counter-reset:toc; display:flex; flex-direction:column; gap:1px; }
.legal-toc a {
  counter-increment:toc; display:flex; gap:11px; padding:7px 10px; border-radius:10px;
  font-size:13.5px; line-height:1.45; color:rgba(13,13,13,0.6);
  transition: background .25s var(--spring), color .25s var(--spring);
}
.legal-toc a::before { content:counter(toc, decimal-leading-zero); flex:none; padding-top:1.5px; font-size:11px; font-weight:600; letter-spacing:0.05em; color:rgba(10,10,10,0.4); font-variant-numeric:tabular-nums; }
.legal-toc a:hover, .legal-toc a:focus-visible { background:rgba(10,10,10,0.06); color:var(--ink); }
.legal-toc a:active { background:rgba(10,10,10,0.10); }

/* Artikelen — leeskolom van max ~70 tekens. */
.legal-doc { max-width:70ch; }
.legal-art { scroll-margin-top:118px; }
.legal-art + .legal-art { margin-top:44px; padding-top:44px; border-top:1px solid rgba(10,10,10,0.08); }
.legal-h { display:flex; align-items:baseline; gap:16px; font-size:clamp(1.02rem, 1.5vw, 1.22rem); line-height:1.3; }
.legal-h .legal-num { flex:none; font-family:'Inter',system-ui,sans-serif; font-size:12px; font-weight:600; letter-spacing:0.08em; color:rgba(10,10,10,0.42); font-variant-numeric:tabular-nums; }
.legal-body { margin-top:16px; font-size:15.5px; line-height:1.7; color:rgba(13,13,13,0.76); }
.legal-body p + p { margin-top:12px; }
.legal-body strong { font-weight:600; color:var(--ink); }

/* a/b/c-leden + geneste i/ii/iii-leden. */
.legal-list { counter-reset:lid; display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.legal-list > li { counter-increment:lid; position:relative; padding-left:32px; font-size:15.5px; line-height:1.7; color:rgba(13,13,13,0.76); }
.legal-list > li::before { content:counter(lid, lower-alpha) "."; position:absolute; left:0; top:0; font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums; }
.legal-sublist { counter-reset:sub; display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.legal-sublist > li { counter-increment:sub; position:relative; padding-left:38px; }
.legal-sublist > li::before { content:counter(sub, lower-roman) "."; position:absolute; left:0; top:0; font-weight:600; color:rgba(10,10,10,0.55); }

/* Definitielijst (artikel 1). */
.legal-defs { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.legal-defs > li { position:relative; padding-left:24px; font-size:15.5px; line-height:1.7; color:rgba(13,13,13,0.76); }
.legal-defs > li::before { content:""; position:absolute; left:2px; top:0.72em; width:10px; height:1.5px; background:var(--navy); opacity:0.55; }

/* Disclaimer-noot (EN-vertaling "for convenience"). */
.legal-note {
  display:flex; gap:14px; align-items:flex-start; margin-top:28px; padding:18px 20px;
  border:1px solid rgba(10,10,10,0.12); border-radius:16px; background:rgba(10,10,10,0.035);
  font-size:14px; line-height:1.65; color:rgba(13,13,13,0.7);
}
.legal-note svg { flex:none; width:18px; height:18px; margin-top:2px; color:var(--navy); }