/* ============================================================
   Pegasus Tuning theme styles.
   Design system reference: /DESIGN.md in the project root.
   ============================================================ */

/* ---------- Tokens ---------------------------------------- */
:root {
  /* Backgrounds */
  --bg-deep:      oklch(0.10 0.010 12);
  --bg-surface:   oklch(0.14 0.012 12);
  --bg-elevated:  oklch(0.18 0.013 12);
  --bg-raised:    oklch(0.22 0.013 12);

  /* Strokes */
  --line-soft:    oklch(0.24 0.010 12);
  --line-firm:    oklch(0.32 0.012 12);
  --line-accent:  oklch(0.395 0.165 12);

  /* Text */
  --text-primary:    oklch(0.96 0.006 12);
  --text-secondary:  oklch(0.74 0.010 12);
  --text-tertiary:   oklch(0.58 0.010 12);
  --text-quiet:      oklch(0.42 0.010 12);

  /* Brand accent (Pegasus burgundy: #9D0D3A) */
  --red-hex:    #9D0D3A;
  --red:        oklch(0.395 0.165 12);   /* #9D0D3A */
  --red-hot:    oklch(0.465 0.190 12);   /* lighter for hover */
  --red-deep:   oklch(0.320 0.145 12);   /* darker for pressed */
  --red-soft:   oklch(0.395 0.165 12 / 0.14);
  --red-glow:   oklch(0.395 0.165 12 / 0.45);

  /* Supporting */
  --success:  oklch(0.70 0.150 145);
  --warning:  oklch(0.78 0.150 75);
  --info:     oklch(0.70 0.120 220);

  /* Type */
  --font-display: "Big Shoulders Display", "Arial Narrow", "Impact", system-ui, sans-serif;
  --font-body:    "Rajdhani", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-overline: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --fs-body-sm:  clamp(0.86rem, 0.84rem + 0.1vw, 0.92rem);
  --fs-body:     clamp(1.00rem, 0.97rem + 0.15vw, 1.10rem);
  --fs-body-lg:  clamp(1.12rem, 1.05rem + 0.30vw, 1.30rem);
  --fs-h6:       clamp(1.20rem, 1.10rem + 0.4vw, 1.45rem);
  --fs-h5:       clamp(1.40rem, 1.25rem + 0.7vw, 1.85rem);
  --fs-h4:       clamp(1.75rem, 1.5rem + 1.0vw, 2.40rem);
  --fs-h3:       clamp(2.20rem, 1.8rem + 1.6vw, 3.20rem);
  --fs-h2:       clamp(2.75rem, 2.1rem + 2.6vw, 4.40rem);
  --fs-h1:       clamp(3.40rem, 2.4rem + 4.2vw, 6.40rem);
  --fs-hero:     clamp(2.75rem, 2.0rem + 3.6vw, 5.4rem);

  /* Spacing */
  --space-1: clamp(0.25rem, 0.20rem + 0.20vw, 0.40rem);
  --space-2: clamp(0.50rem, 0.40rem + 0.40vw, 0.75rem);
  --space-3: clamp(0.75rem, 0.60rem + 0.60vw, 1.25rem);
  --space-4: clamp(1.00rem, 0.80rem + 0.80vw, 1.75rem);
  --space-5: clamp(1.50rem, 1.10rem + 1.60vw, 2.75rem);
  --space-6: clamp(2.50rem, 1.80rem + 2.80vw, 4.50rem);
  --space-7: clamp(4.00rem, 2.80rem + 4.60vw, 7.50rem);
  --space-8: clamp(6.00rem, 4.20rem + 6.80vw, 11.00rem);

  /* Containers */
  --inset:       clamp(1.25rem, 4vw, 5rem);
  --content-w:   1440px;
  --measure:     70ch;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);    /* expo.out */
  --ease-out-q:  cubic-bezier(0.22, 1, 0.36, 1);   /* quart.out */
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 480ms;
  --dur-4: 800ms;
}

/* ---------- Reset, base ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; transition: color var(--dur-2) var(--ease-out); }
a:hover { color: var(--text-primary); }

::selection { background: var(--red); color: var(--text-primary); }
mark { background: var(--red-soft); color: var(--text-primary); }

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

/* ---------- Layout helpers -------------------------------- */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--space-4); top: var(--space-4); background: var(--red); color: var(--text-primary); padding: var(--space-2) var(--space-3); z-index: 1000; font-family: var(--font-mono); font-size: var(--fs-overline); letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--red-hot); }

.shell { padding-inline: var(--inset); }
.shell--wide { padding-inline: clamp(0.75rem, 3vw, 4rem); }
.shell--narrow { padding-inline: clamp(1.25rem, 6vw, 8rem); }

.section { padding-block: var(--space-7); position: relative; }
.section--tight { padding-block: var(--space-6); }
.section--loose { padding-block: var(--space-8); }

.measure { max-width: var(--measure); }

/* ---------- Type ------------------------------------------ */
.display, h1.display, h2.display, h3.display { font-family: var(--font-display); font-weight: 900; line-height: 0.95; letter-spacing: 0.005em; color: var(--text-primary); text-wrap: balance; text-transform: uppercase; }

h1, .h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h1); line-height: 1.0; letter-spacing: 0.005em; color: var(--text-primary); margin: 0; text-wrap: balance; text-transform: uppercase; }
h2, .h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: 0.005em; color: var(--text-primary); margin: 0; text-wrap: balance; text-transform: uppercase; }
h3, .h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); line-height: 1.06; color: var(--text-primary); margin: 0; letter-spacing: 0.01em; text-transform: uppercase; }
h4, .h4 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h4); line-height: 1.1; color: var(--text-primary); margin: 0; letter-spacing: 0.01em; text-transform: uppercase; }
h5, .h5 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h5); line-height: 1.15; color: var(--text-primary); margin: 0; letter-spacing: 0.015em; text-transform: uppercase; }
h6, .h6 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h6); line-height: 1.25; color: var(--text-primary); margin: 0; letter-spacing: 0.02em; text-transform: uppercase; }

.hero-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: 0.94;
  letter-spacing: 0.005em;
  color: var(--text-primary);
  text-wrap: balance;
  text-transform: uppercase;
  margin: 0;
}
.hero-display .em { color: var(--red); display: inline-block; }

p { margin: 0 0 var(--space-3); max-width: var(--measure); }
p.lede { font-size: var(--fs-body-lg); color: var(--text-primary); font-weight: 500; line-height: 1.5; }
p:last-child { margin-bottom: 0; }

strong { color: var(--text-primary); font-weight: 600; }

.overline {
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
}
.overline--accent { color: var(--red); }
.overline::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.overline--no-rule::before { display: none; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "lnum" 1; }

/* ---------- Buttons --------------------------------------- */
.btn {
  --btn-bg: var(--red);
  --btn-fg: var(--text-primary);
  --btn-shadow: 0 0 0 var(--red-glow);
  display: inline-flex;
  align-items: center;
  gap: 0.7ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1.05rem 1.6rem 0.95rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
  will-change: transform;
}
.btn:hover { background: var(--red-hot); color: var(--text-primary); border-color: var(--red-hot); transform: translateY(-1px); box-shadow: 0 12px 32px -8px var(--red-glow); }
.btn:active { transform: translateY(0); background: var(--red-deep); border-color: var(--red-deep); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  border-color: var(--line-firm);
  clip-path: none;
}
.btn--ghost:hover { background: transparent; color: var(--red); border-color: var(--red); box-shadow: none; transform: translateY(-1px); }

.btn--compact {
  padding: 0.7rem 1rem 0.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.btn .arrow { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  color: var(--text-primary);
  font-weight: 600;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1rem;
  border-bottom: 1px solid var(--line-firm);
  padding-block: 0.4em;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.link-arrow:hover { color: var(--red); border-color: var(--red); }
.link-arrow .arrow { transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* ---------- Header / nav --------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: var(--space-3);
  padding-inline: var(--inset);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  background: color-mix(in oklab, var(--bg-deep) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--line-soft); background: color-mix(in oklab, var(--bg-deep) 96%, transparent); }

.brand { display: inline-flex; align-items: center; gap: 0.9ch; color: var(--text-primary); }
.brand__logo { width: clamp(54px, 5.5vw, 68px); height: auto; display: block; }
.brand__logo--footer { width: 84px; }
.brand__tag { display: none; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--text-tertiary); font-weight: 400; text-transform: uppercase; max-width: 14ch; line-height: 1.25; }

.nav { justify-self: end; }
.nav__list { display: flex; gap: clamp(0.5rem, 1.4vw, 1.4rem); list-style: none; padding: 0; margin: 0; align-items: center; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4ch;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-transform: uppercase;
  padding: 1.1rem 0.4rem;
  position: relative;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--text-primary); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  bottom: 14px;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}
.nav__link:hover::after, .nav__link[aria-expanded="true"]::after { transform: scaleX(1); }
.nav__caret { width: 8px; height: 8px; opacity: 0.7; transition: transform var(--dur-2) var(--ease-out); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); color: var(--red); opacity: 1; }

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: -0.5rem;
  min-width: 240px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-firm);
  padding: var(--space-2);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  display: grid;
  gap: 1px;
  box-shadow: 0 18px 40px -16px oklch(0 0 0 / 0.6);
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown,
.nav__link[aria-expanded="true"] + .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.nav__dropdown a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 0.78rem 2.2rem 0.78rem 1rem;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.96rem;
  letter-spacing: 0.005em;
  text-transform: none;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  position: relative;
}
.nav__dropdown a:hover { background: color-mix(in oklab, var(--red) 14%, transparent); color: var(--text-primary); }
.nav__dropdown a::after {
  content: "→";
  position: absolute;
  right: 1rem;
  top: 0.82rem;
  color: var(--red);
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-4px);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.nav__dropdown a:hover::after { opacity: 1; transform: translateX(0); }
.nav__hint { flex-basis: 100%; display: block; margin-top: 0.2em; }
.nav__dropdown a .nav__hint {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--text-quiet);
  text-transform: uppercase;
}
.nav__dropdown a:hover .nav__hint { color: var(--red); }
.nav__list .current-menu-item .nav__link { color: var(--text-primary); }
.nav__list .current-menu-item .nav__link::after { transform: scaleX(1); }

.header-cta { display: flex; align-items: center; gap: var(--space-3); justify-content: flex-end; justify-self: end; }
.header-cta .btn { padding: 0.7rem 1.1rem 0.6rem; font-size: 0.85rem; }
.header-cta__phone { display: inline-flex; align-items: center; gap: 0.5ch; color: var(--text-primary); font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.04em; }
.header-cta__phone:hover { color: var(--red); }

.menu-toggle { display: none; background: none; border: 1px solid var(--line-firm); padding: 0.6rem 0.9rem; color: var(--text-primary); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* Mobile nav — full-screen overlay; top + bottom stay pinned, middle scrolls if needed */
.mobile-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: 0; /* fallback */
  height: 100vh; /* fallback */
  height: 100dvh; /* dynamic viewport — accounts for iOS Safari URL bar */
  background: var(--bg-deep);
  z-index: 60;
  transform: translateY(-100%);
  transition: transform var(--dur-4) var(--ease-out);
  padding: max(env(safe-area-inset-top), 0px) 0 max(env(safe-area-inset-bottom), 0px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overscroll-behavior: contain;
}
.mobile-nav[data-open="true"] { transform: translateY(0); }
body[data-mobile-nav-open="true"] { overflow: hidden; }

.mobile-nav__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--inset);
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav__top .brand__logo { width: 48px; }
.mobile-nav__close {
  background: none;
  border: 1px solid var(--line-firm);
  padding: 0.55rem 0.85rem;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.mobile-nav__close:hover { border-color: var(--red); background: color-mix(in oklab, var(--red) 12%, transparent); }
.mobile-nav__close svg { width: 13px; height: 13px; }

/* Scrollable middle */
.mobile-nav nav {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--space-3) var(--inset) var(--space-4);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mobile-nav__group {
  display: grid;
  gap: 4px;
}
.mobile-nav__group-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 700;
  padding-bottom: 6px;
}

.mobile-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.mobile-nav__list li { border-top: 1px solid var(--line-soft); }
.mobile-nav__list li:last-child { border-bottom: 1px solid var(--line-soft); }
.mobile-nav__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.75rem 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out), padding-left var(--dur-2) var(--ease-out);
}
.mobile-nav__hint {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--text-quiet);
  font-weight: 500;
  text-transform: uppercase;
  margin-left: auto;
  padding-right: var(--space-3);
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-out);
}
.mobile-nav__list a::after {
  content: "→";
  color: var(--red);
  font-size: 0.85em;
  opacity: 0.55;
  flex-shrink: 0;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.mobile-nav__list a:hover,
.mobile-nav__list a:focus-visible { color: var(--red); padding-left: 0.3rem; }
.mobile-nav__list a:hover .mobile-nav__hint,
.mobile-nav__list a:focus-visible .mobile-nav__hint { color: var(--red); }
.mobile-nav__list a:hover::after,
.mobile-nav__list a:focus-visible::after { opacity: 1; transform: translateX(3px); }

/* Pinned bottom CTAs */
.mobile-nav__cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-3) var(--inset) max(var(--space-3), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
  background: color-mix(in oklab, var(--bg-deep) 96%, transparent);
}
.mobile-nav__cta .btn {
  width: 100%;
  justify-content: center;
  padding-block: 0.85rem;
  font-size: 0.84rem;
}
.mobile-nav__cta .btn:first-child {
  grid-column: 1 / -1; /* full-width offerte button */
}
.mobile-nav__cta .header-cta__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  text-transform: uppercase;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-firm);
  text-decoration: none;
  text-align: center;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.mobile-nav__cta .header-cta__phone::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-right: 0.6ch;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.4 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.4 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mobile-nav__cta .header-cta__phone:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ---------- Hero ----------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 8vw, 7rem);
  overflow: clip;
  isolation: isolate;
  min-height: clamp(560px, 78vh, 820px);
  display: flex;
  align-items: stretch;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: stretch;
  position: relative;
  width: 100%;
}
.hero__copy { position: relative; z-index: 2; padding-block: var(--space-5); align-self: center; }
.hero__overline { margin-bottom: var(--space-4); }
.hero__h1 { margin-bottom: var(--space-4); }
.hero__sub { color: var(--text-secondary); font-size: var(--fs-body-lg); font-weight: 400; line-height: 1.55; max-width: 52ch; margin-bottom: var(--space-5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-3); align-items: center; margin-bottom: var(--space-6); }
.hero__cta-phone { font-family: var(--font-mono); color: var(--text-primary); font-size: 0.95rem; letter-spacing: 0.04em; }
.hero__cta-phone:hover { color: var(--red); }

/* Hero credentials: asymmetric data-card style */
.hero__credentials {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
}
.hero__credential {
  display: grid;
  gap: 0.45em;
  padding: var(--space-3) clamp(0.85rem, 1.5vw, 1.4rem) 0 0;
  border-right: 1px solid var(--line-soft);
  align-content: start;
}
.hero__credential:last-child { border-right: 0; padding-right: 0; }
.hero__credential:nth-child(n+2) { padding-left: clamp(0.85rem, 1.5vw, 1.4rem); }
.hero__credential-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0;
}
.hero__credential-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 0.95;
  color: var(--text-primary);
  display: inline-flex;
  align-items: baseline;
  gap: 0.15ch;
  margin: 0;
}
.hero__credential-value .num { color: var(--text-primary); }
.hero__credential-value .div { color: var(--text-quiet); font-weight: 700; font-size: 0.65em; }
.hero__credential-value .stars { color: var(--red); font-size: 0.55em; letter-spacing: 0.05em; margin-left: 0.5ch; }
.hero__credential-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.4;
}
.hero__credential--rating .hero__credential-value .num { color: var(--red); }

@media (max-width: 640px) {
  .hero__credentials { grid-template-columns: 1fr; gap: 0; }
  .hero__credential { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: var(--space-3) 0; }
  .hero__credential:last-child { border-bottom: 0; }
  .hero__credential:nth-child(n+2) { padding-left: 0; }
}

.hero__visual {
  position: absolute;
  top: calc(var(--space-3) * -1);
  right: calc(var(--inset) * -1);
  bottom: calc(var(--space-3) * -1);
  width: 64vw;
  max-width: 1200px;
  min-width: 0;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
}
.hero__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
  filter: contrast(1.06) saturate(1.05);
}
.hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, var(--bg-deep) 0%, color-mix(in oklab, var(--bg-deep) 80%, transparent) 22%, color-mix(in oklab, var(--bg-deep) 30%, transparent) 50%, transparent 75%);
  pointer-events: none;
  z-index: 1;
}
.hero__visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 24%;
  background: linear-gradient(0deg, var(--bg-deep) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.hero__plate {
  position: absolute;
  bottom: clamp(1rem, 4vw, 2.5rem);
  right: clamp(1rem, 4vw, 3rem);
  background: color-mix(in oklab, var(--bg-deep) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-firm);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: grid;
  gap: 0.35em;
  z-index: 4;
  max-width: 240px;
}
.hero__plate-line { display: flex; justify-content: space-between; gap: 1.5ch; }
.hero__plate-line strong { color: var(--text-primary); font-weight: 700; }
.hero__plate-line--accent strong { color: var(--red); }

/* Decorative angled accent corner — sits above the photo */
.hero__corner {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(140px, 14vw, 220px);
  height: clamp(70px, 7vw, 110px);
  background: var(--red);
  clip-path: polygon(40% 0, 100% 0, 100% 100%);
  z-index: 4;
  opacity: 0.92;
  pointer-events: none;
}
.hero__corner-mono {
  position: absolute;
  top: clamp(0.8rem, 1.6vw, 1.5rem);
  right: clamp(1rem, 3vw, 3rem);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-primary);
  z-index: 5;
  text-transform: uppercase;
}

/* ---------- Services row --------------------------------- */
.services {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}
.service {
  display: grid;
  grid-template-columns: clamp(120px, 14vw, 180px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.25rem, 3.5vw, 3rem);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur-3) var(--ease-out);
  position: relative;
}
.service:hover { background: color-mix(in oklab, var(--bg-surface) 50%, transparent); }

.service__media {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  isolation: isolate;
}
.service__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease-out), filter var(--dur-3) var(--ease-out);
  filter: saturate(0.85) contrast(1.05);
}
.service:hover .service__media img { transform: scale(1.06); filter: saturate(1) contrast(1.08); }
.service__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, color-mix(in oklab, var(--bg-deep) 70%, transparent));
  pointer-events: none;
}
.service__index {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.4rem 0.6rem 0.35rem;
  background: var(--bg-deep);
  border-top: 1px solid var(--line-firm);
  border-right: 1px solid var(--line-firm);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--red);
  z-index: 2;
}
.service__head { }
.service__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); line-height: 1.0; color: var(--text-primary); letter-spacing: -0.01em; }
.service__title em { font-style: normal; color: var(--red); }
.service__body { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.55; margin-top: var(--space-3); max-width: 52ch; }
.service__cta { display: flex; gap: 1.5ch; flex-wrap: wrap; margin-top: var(--space-4); align-items: center; }
.service__arrow {
  justify-self: end;
  width: 56px;
  height: 56px;
  border: 1px solid var(--line-firm);
  display: grid;
  place-items: center;
  color: var(--text-primary);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.service:hover .service__arrow { background: var(--red); border-color: var(--red); color: var(--text-primary); }
.service__arrow svg { width: 22px; height: 22px; }

/* ---------- Why section ---------------------------------- */
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.why__media {
  aspect-ratio: 4/5;
  position: sticky;
  top: clamp(96px, 13vh, 140px);
  overflow: hidden;
  isolation: isolate;
}
.why__media img { width: 100%; height: 100%; object-fit: cover; }
.why__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, color-mix(in oklab, var(--bg-deep) 60%, transparent)); pointer-events: none; }
.why__media-tag {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  background: var(--red);
  color: var(--text-primary);
  padding: 0.45rem 0.85rem 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}

.why__copy { max-width: 60ch; }
.why__title { margin-block: var(--space-3) var(--space-4); }
.why__list { display: grid; gap: var(--space-4); margin-top: var(--space-5); padding: 0; list-style: none; }
.why__item { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--line-soft); }
.why__item:last-child { border-bottom: 1px solid var(--line-soft); padding-bottom: var(--space-3); }
.why__item-num { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; color: var(--red); font-weight: 700; padding-top: 0.5em; }
.why__item-title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h6); color: var(--text-primary); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.01em; }
.why__item p { color: var(--text-secondary); line-height: 1.55; margin: 0; }

/* ---------- Stat strip ----------------------------------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border-block: 1px solid var(--line-soft);
}
.stat {
  padding: var(--space-5) var(--space-4);
  display: grid;
  gap: var(--space-2);
  border-right: 1px solid var(--line-soft);
  position: relative;
}
.stat:last-child { border-right: 0; }
.stat__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.9;
  color: var(--text-primary);
}
.stat__value .unit { color: var(--red); }
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.stat__sub { color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: 1.5; margin-top: var(--space-2); }

/* ---------- Cases ---------------------------------------- */
.cases__head {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 4rem);
  margin-bottom: var(--space-6);
  align-items: end;
}
.cases__h { max-width: 16ch; }
.cases__intro { color: var(--text-secondary); font-size: var(--fs-body-lg); line-height: 1.5; max-width: 36ch; }

.cases__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-5); }

.case {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.case__media { aspect-ratio: 4/3; overflow: hidden; position: relative; border: 1px solid var(--line-soft); }
.case__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
.case:hover .case__media img { transform: scale(1.04); }
.case__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, color-mix(in oklab, var(--bg-deep) 80%, transparent)); pointer-events: none; }
.case__tag {
  position: absolute; left: 0; bottom: 0;
  background: var(--bg-surface);
  color: var(--text-primary);
  padding: 0.6rem 0.85rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-top: 1px solid var(--line-firm);
  border-right: 1px solid var(--line-firm);
  z-index: 2;
}
.case__meta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--text-tertiary); text-transform: uppercase; }
.case__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h5); line-height: 1.05; color: var(--text-primary); }
.case__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.case__stat { padding: var(--space-3) var(--space-3); background: var(--bg-deep); }
.case__stat-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 0.4em; }
.case__stat-value { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--text-primary); }
.case__stat-delta { font-family: var(--font-mono); font-size: 0.85rem; color: var(--red); font-weight: 700; margin-left: 0.5ch; }

/* ---------- Process -------------------------------------- */
.process { position: relative; }
.process__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: clamp(1rem, 4vw, 4rem); margin-bottom: var(--space-6); align-items: end; }
.process__steps { display: grid; gap: var(--space-5); position: relative; }
.process__steps::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: linear-gradient(180deg, var(--red) 0%, var(--line-firm) 100%);
}
.step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-3);
}
.step__bullet {
  width: 44px;
  height: 44px;
  border: 1px solid var(--red);
  background: var(--bg-deep);
  color: var(--red);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
}
.step__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h5); line-height: 1.1; color: var(--text-primary); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.01em; }
.step__body { color: var(--text-secondary); line-height: 1.55; margin: 0; max-width: 52ch; }

/* ---------- FAQ ------------------------------------------ */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__head { position: sticky; top: 100px; align-self: start; }
.faq__list { display: grid; gap: 0; border-top: 1px solid var(--line-soft); }

.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-item__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: var(--space-4);
  align-items: center;
  background: none;
  border: 0;
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h6);
  color: var(--text-primary);
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-out);
}
.faq-item__btn:hover { color: var(--red); }
.faq-item__icon { width: 28px; height: 28px; border: 1px solid var(--line-firm); display: grid; place-items: center; transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); position: relative; }
.faq-item__icon::before,
.faq-item__icon::after { content: ""; position: absolute; background: currentColor; transition: transform var(--dur-3) var(--ease-out); }
.faq-item__icon::before { width: 12px; height: 1px; left: 7px; top: 13px; }
.faq-item__icon::after  { width: 1px; height: 12px; left: 13px; top: 7px; }
.faq-item[data-open="true"] .faq-item__icon { background: var(--red); border-color: var(--red); color: var(--text-primary); }
.faq-item[data-open="true"] .faq-item__icon::after { transform: rotate(90deg); }

.faq-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
.faq-item[data-open="true"] .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__panel > div { overflow: hidden; min-height: 0; }
.faq-item__body { padding: 0 0 var(--space-4); color: var(--text-secondary); line-height: 1.65; max-width: 70ch; }

/* ---------- FAQ page (categorized) ----------------------- */
.faq-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: var(--space-7);
  align-items: start;
}
.faq-page__sidebar {
  position: sticky;
  top: clamp(96px, 13vh, 140px);
  align-self: start;
  display: grid;
  gap: var(--space-5);
}
.faq-page__nav {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.faq-page__nav-link {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 0.8ch;
  align-items: center;
  padding: 0.78rem 0.95rem;
  background: var(--bg-deep);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: 0.005em;
  text-transform: none;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.faq-page__nav-link svg { color: var(--text-quiet); transition: color var(--dur-2) var(--ease-out); }
.faq-page__nav-link:hover,
.faq-page__nav-link.is-active {
  background: color-mix(in oklab, var(--red) 12%, var(--bg-deep));
  color: var(--text-primary);
}
.faq-page__nav-link:hover svg,
.faq-page__nav-link.is-active svg { color: var(--red); }
.faq-page__nav-count {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--text-quiet);
  background: color-mix(in oklab, var(--bg-surface) 60%, transparent);
  padding: 0.18rem 0.5rem 0.12rem;
  font-weight: 700;
}
.faq-page__nav-link.is-active .faq-page__nav-count { color: var(--red); background: color-mix(in oklab, var(--bg-deep) 50%, transparent); }

.faq-page__sidebar-cta {
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
}

.faq-page__main { display: grid; gap: var(--space-7); }
.faq-cat { scroll-margin-top: clamp(96px, 14vh, 150px); }
.faq-cat__head { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 2px solid var(--red); }
.faq-cat__title { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-top: var(--space-2); }

@media (max-width: 1024px) {
  .faq-page__grid { grid-template-columns: 1fr; }
  .faq-page__sidebar { position: static; top: auto; }
  .faq-page__nav { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .faq-page__sidebar-cta { display: none; }
}

/* ---------- CTA Block (practical, above footer) ---------- */
.cta-block {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-7);
  overflow: clip;
}
.cta-block__bg { position: absolute; inset: 0; z-index: -1; }
.cta-block__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.22; filter: contrast(1.1) saturate(0.7); }
.cta-block__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 75% 50%, color-mix(in oklab, var(--red) 28%, transparent), transparent 65%),
    linear-gradient(180deg, var(--bg-deep) 0%, color-mix(in oklab, var(--bg-deep) 70%, transparent) 40%, color-mix(in oklab, var(--bg-deep) 92%, transparent) 100%);
}

.cta-block__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: stretch;
}
.cta-block__head { align-self: center; }
.cta-block__h { font-size: clamp(2.4rem, 4.5vw, 4rem); line-height: 0.96; margin-top: var(--space-3); margin-bottom: var(--space-4); }
.cta-block__lede { color: var(--text-primary); font-size: var(--fs-body-lg); line-height: 1.5; max-width: 42ch; }

.cta-block__panel {
  background: color-mix(in oklab, var(--bg-surface) 92%, var(--red) 8%);
  border: 1px solid var(--line-firm);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: grid;
  gap: var(--space-4);
  position: relative;
  isolation: isolate;
}
.cta-block__panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 80px; height: 4px;
  background: var(--red);
  z-index: 1;
}

.cta-block__status {
  display: flex;
  align-items: center;
  gap: 0.8ch;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.cta-block__status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-quiet);
  position: relative;
  flex-shrink: 0;
}
.cta-block__status--open .cta-block__status-dot { background: oklch(0.7 0.16 145); box-shadow: 0 0 0 4px oklch(0.7 0.16 145 / 0.18); }
.cta-block__status--open .cta-block__status-dot::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: oklch(0.7 0.16 145);
  opacity: 0.5;
  animation: pulse-dot 2s ease-out infinite;
}
.cta-block__status--soon .cta-block__status-dot { background: oklch(0.78 0.15 75); }
.cta-block__status--closed .cta-block__status-dot { background: oklch(0.55 0.05 25); }
.cta-block__status-msg { color: var(--text-primary); font-weight: 700; margin-left: auto; }
.cta-block__status--open .cta-block__status-msg { color: var(--text-primary); }
.cta-block__status--closed .cta-block__status-msg { color: var(--text-tertiary); }

@keyframes pulse-dot {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.2); opacity: 0; }
}

.cta-block__hours {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin: 0;
}
.cta-block__hours-row {
  background: var(--bg-deep);
  padding: 0.7rem 0.55rem 0.65rem;
  display: grid;
  gap: 0.3em;
  text-align: center;
}
.cta-block__hours-row dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0;
}
.cta-block__hours-row dd {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin: 0;
  text-transform: uppercase;
}
.cta-block__hours-row .muted { color: var(--text-quiet); font-weight: 500; }
.cta-block__hours-row.is-today {
  background: var(--red);
  outline: 1px solid var(--red);
  outline-offset: -1px;
  position: relative;
  z-index: 1;
}
.cta-block__hours-row.is-today dt { color: oklch(0.85 0.04 12); }
.cta-block__hours-row.is-today dd, .cta-block__hours-row.is-today .muted { color: var(--text-primary); }

.cta-block__actions { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.cta-block__btn-primary { justify-self: stretch; justify-content: center; width: 100%; }
.cta-block__alts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.cta-block__alt {
  display: flex;
  align-items: center;
  gap: 0.7ch;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line-firm);
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.cta-block__alt:hover { border-color: var(--red); background: color-mix(in oklab, var(--red) 10%, var(--bg-deep)); }
.cta-block__alt svg { flex-shrink: 0; color: var(--red); }
.cta-block__alt > span { display: grid; gap: 0.1em; line-height: 1.2; }
.cta-block__alt-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); }
.cta-block__alt strong { font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; color: var(--text-primary); }

@media (max-width: 1024px) {
  .cta-block__grid { grid-template-columns: 1fr; }
  .cta-block__h { font-size: clamp(2.2rem, 8vw, 3rem); }
}
@media (max-width: 640px) {
  .cta-block__alts { grid-template-columns: 1fr; }
  .cta-block__hours { grid-template-columns: repeat(7, 1fr); }
  .cta-block__hours-row { padding: 0.55rem 0.2rem 0.5rem; }
  .cta-block__hours-row dt { font-size: 0.6rem; letter-spacing: 0.12em; }
  .cta-block__hours-row dd { font-size: 0.7rem; }
  .cta-block__status-msg { margin-left: 0; flex-basis: 100%; }
}

/* ---------- Footer --------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  background: color-mix(in oklab, var(--bg-deep) 88%, var(--bg-surface));
}

/* Top: map + contact card */
.footer-contact { padding-block: var(--space-6) var(--space-6); }
.footer-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
}

.footer-contact__map {
  margin: 0;
  position: relative;
  border: 1px solid var(--line-firm);
  background: var(--bg-surface);
  aspect-ratio: 5/4;
  overflow: hidden;
}
.map-embed__iframe { width: 100%; height: 100%; border: 0; filter: invert(0.92) hue-rotate(180deg) saturate(0.4) contrast(1.1); }
.footer-contact__map-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.85rem 1rem;
  background: color-mix(in oklab, var(--bg-deep) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-firm);
  display: flex;
  align-items: center;
  gap: 0.8ch;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.footer-contact__map-cap svg { color: var(--red); flex-shrink: 0; }
.footer-contact__map-cap span { flex: 1; min-width: 0; }
.footer-contact__map-cap a { color: var(--text-primary); font-weight: 700; }
.footer-contact__map-cap a:hover { color: var(--red); }

.footer-contact__card { display: grid; gap: var(--space-4); align-content: start; }
.footer-contact__head { display: grid; gap: var(--space-2); }
.footer-contact__h { font-size: clamp(1.5rem, 2.2vw, 2.2rem); line-height: 1.05; color: var(--text-primary); }

.footer-contact__channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line-soft);
}
.footer-contact__channel {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line-soft);
  padding-right: var(--space-3);
}
.footer-contact__channel:nth-child(2n) { padding-right: 0; padding-left: var(--space-3); border-left: 1px solid var(--line-soft); }
.footer-contact__channel dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 0.35em;
}
.footer-contact__channel dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.footer-contact__link { color: var(--text-primary); display: inline-block; }
.footer-contact__link:hover { color: var(--red); }

/* Today status + hours grid */
.footer-hours { display: grid; gap: var(--space-3); }
.footer-hours__status {
  display: flex;
  align-items: center;
  gap: 0.8ch;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-hours__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-quiet); flex-shrink: 0; position: relative; }
.footer-hours__status--open .footer-hours__dot { background: oklch(0.7 0.16 145); }
.footer-hours__status--open .footer-hours__dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: oklch(0.7 0.16 145); opacity: 0.45; animation: pulse-dot 2s ease-out infinite; }
.footer-hours__status--soon .footer-hours__dot { background: oklch(0.78 0.15 75); }
.footer-hours__status--closed .footer-hours__dot { background: oklch(0.55 0.05 25); }
.footer-hours__today { color: var(--text-tertiary); }
.footer-hours__msg { color: var(--text-primary); font-weight: 700; margin-left: auto; }
.footer-hours__status--open .footer-hours__msg { color: oklch(0.78 0.13 145); }

.footer-hours__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin: 0;
}
.footer-hours__row {
  background: var(--bg-deep);
  padding: 0.6rem 0.4rem 0.55rem;
  display: grid;
  gap: 0.25em;
  text-align: center;
}
.footer-hours__row dt { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); margin: 0; }
.footer-hours__row dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.02em; color: var(--text-primary); }
.footer-hours__row .muted { color: var(--text-quiet); font-weight: 500; }
.footer-hours__row.is-today { background: var(--red); }
.footer-hours__row.is-today dt { color: oklch(0.9 0.04 12); opacity: 0.85; }
.footer-hours__row.is-today dd, .footer-hours__row.is-today .muted { color: var(--text-primary); }

/* Middle: navigation columns */
.footer-nav {
  border-top: 1px solid var(--line-soft);
  padding-block: var(--space-5);
}
.footer-nav__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.footer-nav__brand { display: grid; gap: var(--space-3); align-content: start; }
.footer-nav__brand .brand__logo--footer { width: 96px; }
.footer-nav__tagline {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  max-width: 28ch;
}
.footer-nav__tagline span { color: var(--text-tertiary); display: block; margin-top: 0.5em; letter-spacing: 0.02em; }
.footer-nav__col h6 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 var(--space-3);
}
.footer-nav__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.footer-nav__col a { color: var(--text-secondary); font-family: var(--font-body); font-size: 0.94rem; }
.footer-nav__col a:hover { color: var(--text-primary); }

/* Bottom: meta */
.footer-meta {
  border-top: 1px solid var(--line-soft);
  padding: var(--space-4) var(--inset);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.footer-meta__links { display: inline-flex; gap: 0.8ch; align-items: center; flex-wrap: wrap; }
.footer-meta__links a { color: var(--text-tertiary); }
.footer-meta__links a:hover { color: var(--red); }

@media (max-width: 1024px) {
  .footer-contact__grid { grid-template-columns: 1fr; }
  .footer-contact__map { aspect-ratio: 16/10; }
  .footer-nav__grid { grid-template-columns: 1fr 1fr; }
  .footer-nav__brand { grid-column: span 2; }
}
@media (max-width: 640px) {
  .footer-nav__grid { grid-template-columns: 1fr; }
  .footer-nav__brand { grid-column: span 1; }
  .footer-contact__channels { grid-template-columns: 1fr; }
  .footer-contact__channel:nth-child(2n) { padding-left: 0; border-left: 0; }
  .footer-hours__grid { grid-template-columns: repeat(7, 1fr); }
  .footer-hours__row { padding: 0.45rem 0.15rem; }
  .footer-hours__row dt { font-size: 0.56rem; }
  .footer-hours__row dd { font-size: 0.66rem; }
  .footer-hours__msg { margin-left: 0; flex-basis: 100%; }
}

/* ---------- WhatsApp FAB --------------------------------- */
.whatsapp-fab {
  --wa-green: oklch(0.66 0.17 148);
  --wa-green-hot: oklch(0.72 0.18 148);
  position: fixed;
  right: clamp(0.85rem, 2.5vw, 1.75rem);
  bottom: clamp(0.85rem, 2.5vw, 1.75rem);
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  padding: 0.5rem 1.25rem 0.5rem 0.55rem;
  background: var(--wa-green);
  color: oklch(0.18 0.02 148);
  border-radius: 999px;
  box-shadow: 0 18px 32px -10px oklch(0 0 0 / 0.55), 0 4px 10px -2px oklch(0.66 0.17 148 / 0.45);
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
  isolation: isolate;
  font-family: var(--font-body);
  will-change: transform;
}
.whatsapp-fab:hover { transform: translateY(-2px); background: var(--wa-green-hot); color: oklch(0.18 0.02 148); box-shadow: 0 22px 40px -10px oklch(0 0 0 / 0.6), 0 6px 14px -2px oklch(0.66 0.17 148 / 0.6); }
.whatsapp-fab:active { transform: translateY(0); }

.whatsapp-fab__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: oklch(0.96 0.005 148);
  color: var(--wa-green);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  z-index: 1;
}
.whatsapp-fab__icon svg { width: 24px; height: 24px; }

.whatsapp-fab__label { display: grid; gap: 0.1em; line-height: 1.15; }
.whatsapp-fab__label-title { font-family: var(--font-display); font-weight: 800; font-size: 0.92rem; letter-spacing: 0.02em; text-transform: uppercase; }
.whatsapp-fab__label-sub { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; opacity: 0.78; }

.whatsapp-fab__pulse {
  position: absolute;
  inset: 4px 4px 4px 4px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wa-green);
  opacity: 0.4;
  animation: wa-pulse 2.4s var(--ease-out) infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);    opacity: 0.45; }
  70%  { transform: scale(1.85); opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab__pulse { animation: none; opacity: 0; }
}

@media (max-width: 640px) {
  .whatsapp-fab { padding: 0.4rem 0.5rem; }
  .whatsapp-fab__label { display: none; }
  .whatsapp-fab__icon { width: 48px; height: 48px; }
  .whatsapp-fab__icon svg { width: 26px; height: 26px; }
  .whatsapp-fab__pulse { inset: 0; width: 48px; height: 48px; }
}

/* ---------- Shell variants ------------------------------- */
.shell-wide { padding-inline: 0; overflow: hidden; }
.shell-wide > .shell { padding-inline: var(--inset); }

/* ---------- Reviews -------------------------------------- */
.reviews__head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: end;
  margin-bottom: var(--space-6);
}
.reviews__aggregate { display: grid; gap: var(--space-3); justify-items: end; }
.reviews__google {
  display: inline-flex;
  align-items: center;
  gap: 0.9ch;
  padding: 0.7rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--line-firm);
}
.reviews__google-data { display: grid; line-height: 1.2; }
.reviews__google-data strong { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--text-primary); }
.reviews__google-data strong span { color: var(--text-quiet); font-size: 0.7em; font-weight: 700; }
.reviews__google-data span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--text-tertiary); text-transform: uppercase; }

/* Reviews infinite slider */
.reviews-slider {
  position: relative;
  margin-inline: calc(var(--inset) * -1);
  overflow: hidden;
}
.reviews-slider::before, .reviews-slider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(2rem, 8vw, 6rem);
  z-index: 3;
  pointer-events: none;
}
.reviews-slider::before { left: 0; background: linear-gradient(90deg, var(--bg-deep), transparent); }
.reviews-slider::after  { right: 0; background: linear-gradient(270deg, var(--bg-deep), transparent); }
.reviews-slider__viewport { overflow: hidden; padding: var(--space-2) 0; }
.reviews-slider__track {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  animation: reviews-scroll 80s linear infinite;
  will-change: transform;
  padding-left: var(--inset);
}
.reviews-slider:hover .reviews-slider__track { animation-play-state: paused; }
@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--space-4) / 2)); }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-slider__track { animation: none; }
}

.review {
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: grid;
  gap: var(--space-3);
  align-content: start;
  position: relative;
  width: clamp(280px, 28vw, 380px);
  flex-shrink: 0;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.review:hover {
  background: color-mix(in oklab, var(--red) 6%, var(--bg-surface));
  border-color: var(--red);
  transform: translateY(-2px);
}
.review::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 56px; height: 3px;
  background: var(--red);
}

.review__stars { display: inline-flex; gap: 1px; align-items: center; }
.review__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.4;
  color: var(--text-primary);
  letter-spacing: 0;
  margin: 0;
  text-transform: none;
}
.review--feature .review__text { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }

.review__meta {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 0.15em;
}
.review__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.review__voertuig {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--red);
}
.review__date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-quiet);
  text-transform: uppercase;
  margin-top: 0.4em;
}

@media (max-width: 1024px) {
  .reviews__head { grid-template-columns: 1fr; }
  .reviews__aggregate { justify-items: start; }
}

/* ---------- Brand slider --------------------------------- */
.brand-slider {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line-soft);
  background: color-mix(in oklab, var(--bg-deep) 60%, var(--bg-surface));
}
.brand-slider::before, .brand-slider::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(2rem, 6vw, 5rem);
  z-index: 3;
  pointer-events: none;
}
.brand-slider::before { left: 0; background: linear-gradient(90deg, var(--bg-deep), transparent); }
.brand-slider::after  { right: 0; background: linear-gradient(270deg, var(--bg-deep), transparent); }
.brand-slider__viewport { overflow: hidden; padding-block: clamp(0.85rem, 1.5vw, 1.4rem); }
.brand-slider__track {
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  width: max-content;
  animation: brand-scroll 60s linear infinite;
  will-change: transform;
}
.brand-slider:hover .brand-slider__track { animation-play-state: paused; }
@keyframes brand-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-slider__track { animation: none; }
}

.brand-slider__item { flex-shrink: 0; border-right: 1px solid var(--line-soft); }
.brand-slider__link {
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 0.45em;
  padding: var(--space-4) clamp(1.5rem, 3vw, 3rem);
  min-width: clamp(180px, 16vw, 240px);
  height: 100%;
  color: var(--text-tertiary);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  position: relative;
}
.brand-slider__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-3) var(--ease-out);
}
.brand-slider__link:hover {
  background: color-mix(in oklab, var(--red) 8%, transparent);
  color: var(--text-primary);
}
.brand-slider__link:hover::after { transform: scaleX(0.7); }

.brand-slider__logo {
  width: clamp(70px, 9vw, 110px);
  height: clamp(34px, 4.5vw, 52px);
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.65;
  transition: opacity var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
}
.brand-slider__link:hover .brand-slider__logo {
  opacity: 1;
  filter: brightness(0) invert(0.62) sepia(1) saturate(7) hue-rotate(320deg);
}
.brand-slider__link[data-logo-mode="badge"] .brand-slider__logo {
  filter: none;
  opacity: 0.9;
  background: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  width: auto;
  max-width: clamp(80px, 10vw, 120px);
  height: clamp(30px, 4vw, 46px);
}
.brand-slider__link[data-logo-mode="badge"]:hover .brand-slider__logo {
  filter: none;
  opacity: 1;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--red) 35%, transparent);
}
.brand-slider__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  color: inherit;
  white-space: nowrap;
}
.brand-slider__hint {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.brand-slider__link:hover .brand-slider__hint { opacity: 1; transform: translateY(0); color: var(--red); }

/* Legacy brand-grid keeps working on archive pages */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.brand-grid__tile {
  background: var(--bg-deep);
  padding: var(--space-4) var(--space-3);
  display: grid;
  gap: 0.4em;
  align-content: end;
  min-height: 130px;
  transition: background var(--dur-2) var(--ease-out);
}
.brand-grid__tile:hover { background: color-mix(in oklab, var(--red) 12%, var(--bg-deep)); }
.brand-grid__tile-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); }
.brand-grid__tile-name { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h5); color: var(--text-primary); text-transform: uppercase; line-height: 1; }
.brand-grid__tile:hover .brand-grid__tile-label { color: var(--red); }

/* ---------- Page-level callout block --------------------- */
.callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding-block: var(--space-5);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.callout--reverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.callout__media { aspect-ratio: 4/3; overflow: hidden; border: 1px solid var(--line-soft); position: relative; }
.callout__media img { width: 100%; height: 100%; object-fit: cover; }
.callout__head h3 { font-size: var(--fs-h3); line-height: 1.0; margin-bottom: var(--space-3); }
.callout__list { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-3); }
.callout__list li { display: grid; grid-template-columns: 28px 1fr; gap: 0.8ch; color: var(--text-secondary); line-height: 1.55; }
.callout__list li::before {
  content: "";
  width: 18px; height: 18px;
  background: var(--red);
  clip-path: polygon(20% 50%, 0% 70%, 30% 100%, 100% 30%, 80% 10%, 30% 60%);
  display: block;
  margin-top: 0.3em;
}
@media (max-width: 768px) {
  .callout, .callout--reverse { grid-template-columns: 1fr; }
}

/* ---------- Breadcrumbs ---------------------------------- */
.breadcrumbs { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; color: var(--text-tertiary); text-transform: uppercase; padding-block: var(--space-4); display: flex; gap: 0.6ch; flex-wrap: wrap; }
.breadcrumbs a { color: var(--text-tertiary); }
.breadcrumbs a:hover { color: var(--red); }
.breadcrumbs span[aria-current] { color: var(--text-primary); }
.breadcrumbs .sep { color: var(--line-firm); }

/* ---------- Blog --------------------------------------- */
.blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.blog-cats__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  padding: 0.55rem 0.95rem 0.5rem;
  border: 1px solid var(--line-firm);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.blog-cats__link:hover {
  border-color: var(--red);
  color: var(--text-primary);
  background: color-mix(in oklab, var(--red) 10%, transparent);
}
.blog-cats__link.is-active {
  border-color: var(--red);
  color: var(--text-primary);
  background: var(--red);
}
.blog-cats__count {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  opacity: 0.7;
  padding: 0 0.25ch;
}

/* Meta pills (gebruikt op feature + rows) */
.blog-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45ch;
  padding: 0.32rem 0.55rem 0.28rem;
  background: var(--bg-deep);
  border: 1px solid var(--line-firm);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
  line-height: 1;
}
.blog-meta-pill svg { color: var(--red); }
.blog-meta-pill--cat { background: var(--red); color: var(--text-primary); border-color: var(--red); font-weight: 700; }
.blog-meta-pill--time { color: var(--text-secondary); }

/* Featured blog post */
.blog-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
  overflow: hidden;
  text-decoration: none;
  position: relative;
}
.blog-feature:hover { border-color: var(--red); transform: translateY(-2px); }
.blog-feature__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.blog-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
.blog-feature:hover .blog-feature__media img { transform: scale(1.05); }
.blog-feature__badge {
  position: absolute;
  top: 0; left: 0;
  background: var(--red);
  color: var(--text-primary);
  padding: 0.45rem 0.85rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  z-index: 2;
}

.blog-feature__body { padding: clamp(1.5rem, 3vw, 2.75rem); display: grid; gap: var(--space-4); align-content: center; }
.blog-feature__top { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.blog-feature__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.05;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0;
}
.blog-feature__excerpt { color: var(--text-secondary); line-height: 1.6; max-width: 52ch; font-size: var(--fs-body); margin: 0; }
.blog-feature__more {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  border-bottom: 1px solid currentColor;
  padding-block: 0.4em;
  width: max-content;
  transition: gap var(--dur-2) var(--ease-out);
}
.blog-feature:hover .blog-feature__more { gap: 1ch; }

/* Editorial blog list */
.blog-list {
  display: grid;
  gap: 0;
}
.blog-row {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line-soft);
  align-items: start;
  transition: background var(--dur-3) var(--ease-out);
}
.blog-row:last-child { border-bottom: 1px solid var(--line-soft); }
.blog-row:hover { background: color-mix(in oklab, var(--bg-surface) 50%, transparent); }

.blog-row__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  display: block;
  background: var(--bg-surface);
}
.blog-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
.blog-row:hover .blog-row__media img { transform: scale(1.04); }
.blog-row__index {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--text-primary);
  background: color-mix(in oklab, var(--bg-deep) 80%, transparent);
  backdrop-filter: blur(8px);
  padding: 0.35rem 0.6rem 0.3rem;
  border: 1px solid var(--line-firm);
  font-weight: 700;
}

.blog-row__body { display: grid; gap: var(--space-3); align-content: start; padding-block: var(--space-2); }
.blog-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.blog-row__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  line-height: 1.1;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0;
  max-width: 32ch;
}
.blog-row__title a { color: inherit; transition: color var(--dur-2) var(--ease-out); }
.blog-row__title a:hover { color: var(--red); }
.blog-row__excerpt {
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 1rem;
  margin: 0;
  max-width: 60ch;
}
.blog-row__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--red);
  width: max-content;
  padding-block: 0.3em;
  border-bottom: 1px solid color-mix(in oklab, var(--red) 50%, transparent);
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), gap var(--dur-2) var(--ease-out);
  margin-top: var(--space-2);
}
.blog-row__cta:hover { color: var(--red-hot); border-color: var(--red-hot); gap: 0.9ch; }

/* Related (used on single.php) — keep simpler grid */
.blog-grid--related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

.blog-card { display: grid; gap: var(--space-3); align-content: start; }
.blog-card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  display: block;
}
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, color-mix(in oklab, var(--bg-deep) 80%, transparent));
  pointer-events: none;
}
.blog-card__date {
  position: absolute;
  bottom: 0; left: 0;
  background: var(--bg-deep);
  border-top: 1px solid var(--line-firm);
  border-right: 1px solid var(--line-firm);
  padding: 0.55rem 0.8rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  z-index: 2;
}
.blog-card__body { display: grid; gap: var(--space-2); }
.blog-card__cat {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.blog-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0;
}
.blog-card__title a { color: inherit; }
.blog-card__title a:hover { color: var(--red); }
.blog-card__excerpt { color: var(--text-secondary); line-height: 1.55; font-size: 0.94rem; }
.blog-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 768px) {
  .blog-row { grid-template-columns: 1fr; gap: var(--space-3); padding-block: var(--space-4); }
  .blog-row__title { font-size: clamp(1.2rem, 5vw, 1.5rem); }
}

/* Single blog post */
.blog-post__hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  min-height: 60vh;
  display: flex;
  align-items: end;
  overflow: clip;
}
.blog-post__hero-media { position: absolute; inset: 0; margin: 0; z-index: -1; }
.blog-post__hero-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-post__hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-deep) 30%, transparent) 0%, color-mix(in oklab, var(--bg-deep) 80%, transparent) 60%, var(--bg-deep) 100%);
}
.blog-post__hero-inner { position: relative; width: 100%; padding-block: var(--space-5); }
.blog-post__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--text-primary);
  max-width: 22ch;
  margin: var(--space-3) 0 var(--space-3);
}
.blog-post__lede { color: var(--text-primary); font-size: var(--fs-body-lg); max-width: 56ch; line-height: 1.5; margin-bottom: var(--space-4); }

.blog-post__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  margin: var(--space-4) 0 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in oklab, var(--bg-surface) 60%, transparent);
  backdrop-filter: blur(8px);
}
.blog-post__meta > div {
  padding: var(--space-3) var(--space-3);
  border-right: 1px solid var(--line-soft);
  display: grid;
  gap: 0.3em;
}
.blog-post__meta > div:last-child { border-right: 0; }
.blog-post__meta dt { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); margin: 0; }
.blog-post__meta dd { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.01em; margin: 0; }

.blog-post__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.blog-post__prose { max-width: 65ch; }
.blog-post__prose img, .blog-post__prose figure { margin-block: var(--space-5); }
.blog-post__prose blockquote {
  border-left: 3px solid var(--red);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-5) 0;
  font-style: italic;
  color: var(--text-primary);
  background: color-mix(in oklab, var(--red) 6%, transparent);
}

.blog-post__tags {
  display: flex; gap: 1ch; align-items: center;
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.blog-post__tags a {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem 0.3rem;
  border: 1px solid var(--line-firm);
  color: var(--text-secondary);
  margin-right: 0.5ch;
  text-decoration: none;
}
.blog-post__tags a:hover { border-color: var(--red); color: var(--red); }

.blog-post__aside { position: sticky; top: clamp(96px, 13vh, 140px); display: grid; gap: var(--space-4); align-self: start; }

.blog-share { background: var(--bg-surface); border: 1px solid var(--line-soft); padding: var(--space-4); display: grid; gap: var(--space-3); }
.blog-share__buttons { display: flex; gap: var(--space-2); }
.blog-share__btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--bg-deep);
  border: 1px solid var(--line-firm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.blog-share__btn:hover { border-color: var(--red); color: var(--red); background: color-mix(in oklab, var(--red) 8%, var(--bg-deep)); }

.blog-author { display: grid; grid-template-columns: 60px 1fr; gap: var(--space-3); align-items: start; padding: var(--space-4); border: 1px solid var(--line-soft); background: var(--bg-surface); }
.blog-author__avatar { border-radius: 50%; width: 60px; height: 60px; object-fit: contain; background: var(--bg-deep); padding: 6px; border: 1px solid var(--line-soft); }
.blog-author strong { font-family: var(--font-display); font-weight: 800; font-size: 1rem; text-transform: uppercase; color: var(--text-primary); letter-spacing: 0.005em; display: block; margin-bottom: 0.25em; }
.blog-author p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; margin: 0; }

.blog-post-cta { padding: var(--space-4); background: color-mix(in oklab, var(--red) 12%, var(--bg-surface)); border: 1px solid var(--red); }

@media (max-width: 1024px) {
  .blog-feature { grid-template-columns: 1fr; }
  .blog-feature__media { aspect-ratio: 16/9; }
  .blog-post__layout { grid-template-columns: 1fr; }
  .blog-post__aside { position: static; top: auto; }
}

/* ---------- Merken archive + single ---------------------- */
.merk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.merk-grid--compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.merk-card {
  background: var(--bg-deep);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  text-decoration: none;
  position: relative;
  transition: background var(--dur-2) var(--ease-out);
  isolation: isolate;
}
.merk-card:hover { background: color-mix(in oklab, var(--red) 14%, var(--bg-deep)); }

.merk-card__logo {
  height: clamp(40px, 4.4vw, 54px);
  display: grid;
  place-items: center;
  padding: 0.25rem 0.5rem;
}
.merk-card__logo img {
  max-width: 72%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.72;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.merk-card:hover .merk-card__logo img { opacity: 1; transform: scale(1.04); }

/* Badge mode: complex logos (gradients, multi-color, text-on-shape) render on a white pill at original colors */
.merk-card[data-logo-mode="badge"] .merk-card__logo {
  height: clamp(42px, 4.6vw, 56px);
}
.merk-card[data-logo-mode="badge"] .merk-card__logo img {
  filter: none;
  opacity: 1;
  max-width: 78%;
  max-height: 78%;
  background: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;
}
.merk-card__text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.merk-card__meta {
  display: grid;
  gap: 0.2em;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-soft);
}
.merk-card__name {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
  font-weight: 700;
}
.merk-card__hint {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-quiet);
  transition: color var(--dur-2) var(--ease-out);
}
.merk-card:hover .merk-card__hint { color: var(--red); }

/* Single merk hero */
.merk-hero {
  padding-block: clamp(2.5rem, 5vw, 5rem);
  border-bottom: 1px solid var(--line-soft);
}
.merk-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.merk-hero__logo {
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  place-items: center;
  aspect-ratio: 1;
  position: relative;
}
.merk-hero__logo::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 3px;
  background: var(--red);
}
.merk-hero__logo img {
  max-width: 70%;
  max-height: 65%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.merk-hero__logo[data-logo-mode="badge"] img {
  filter: none;
  background: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  max-width: 80%;
  max-height: 60%;
}
.merk-hero__logo-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-weight: 700;
}

/* Models comparison table */
.merk-models-table {
  border: 1px solid var(--line-soft);
  background: var(--bg-surface);
  overflow-x: auto;
}
.merk-models-table__head, .merk-models-table__row {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(110px, 1fr) minmax(110px, 1fr) minmax(120px, 1fr);
  gap: 1px;
  background: var(--line-soft);
}
.merk-models-table__head > div {
  background: var(--bg-elevated);
  padding: 0.85rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 700;
}
.merk-models-table__head .merk-models-table__delta { color: var(--red); }

.merk-models-table__row > div {
  background: var(--bg-deep);
  padding: 0.9rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--text-secondary);
  transition: background var(--dur-2) var(--ease-out);
}
.merk-models-table__row:hover > div { background: color-mix(in oklab, var(--red) 6%, var(--bg-deep)); }
.merk-models-table__model {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  color: var(--text-primary) !important;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.merk-models-table__delta {
  color: var(--red) !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  .merk-hero__grid { grid-template-columns: 1fr; }
  .merk-hero__logo { aspect-ratio: 16/9; max-width: 320px; }
  .merk-models-table__head, .merk-models-table__row { grid-template-columns: minmax(120px, 2fr) 1fr 1fr 1fr; }
  .merk-models-table__head > div, .merk-models-table__row > div { padding: 0.65rem 0.75rem; font-size: 0.78rem; }
}

/* ---------- Diensten archive ----------------------------- */
.diensten-cat__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--space-3);
  border-bottom: 2px solid var(--red);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
}
.diensten-cat__title {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  margin-top: var(--space-2);
}
.diensten-cat__desc {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 50ch;
}
.diensten-cat__count {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line-firm);
}

.diensten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.dienst-card {
  display: grid;
  gap: var(--space-3);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  position: relative;
  transition: background var(--dur-3) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
  isolation: isolate;
  overflow: hidden;
}
.dienst-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 56px;
  height: 3px;
  background: var(--red);
  z-index: 1;
}
.dienst-card:hover {
  border-color: var(--red);
  background: color-mix(in oklab, var(--red) 7%, var(--bg-surface));
  transform: translateY(-2px);
}

.dienst-card__icon {
  width: 56px;
  height: 56px;
  border: 1px solid var(--line-firm);
  background: var(--bg-deep);
  display: grid;
  place-items: center;
  color: var(--red);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.dienst-card__icon svg { width: 28px; height: 28px; }
.dienst-card:hover .dienst-card__icon { background: var(--red); color: var(--text-primary); border-color: var(--red); }

.dienst-card__tag {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: var(--bg-deep);
  border: 1px solid var(--line-firm);
  padding: 0.28rem 0.55rem 0.24rem;
  z-index: 2;
}

.dienst-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h5);
  line-height: 1.1;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0;
}

.dienst-card__excerpt {
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
}

.dienst-card__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: var(--space-2) 0 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.dienst-card__facts > div {
  padding: 0.6rem 0.75rem 0.55rem;
  background: var(--bg-deep);
  display: grid;
  gap: 0.2em;
}
.dienst-card__facts dt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0;
}
.dienst-card__facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
}

.dienst-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4ch;
}
.dienst-card__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.dienst-card__status--check::before, .dienst-card__status--ok::before { background: oklch(0.7 0.16 145); }
.dienst-card__status--caution::before, .dienst-card__status--overleg::before { background: oklch(0.78 0.15 75); }
.dienst-card__status--no::before { background: oklch(0.6 0.05 25); }
.dienst-card__status--check, .dienst-card__status--ok { color: oklch(0.78 0.13 145); }
.dienst-card__status--caution, .dienst-card__status--overleg { color: oklch(0.85 0.13 75); }

.dienst-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  transition: gap var(--dur-2) var(--ease-out);
}
.dienst-card:hover .dienst-card__cta { gap: 1ch; }
.dienst-card__cta .arrow { transition: transform var(--dur-2) var(--ease-out); }

/* ---------- Locatie stats row ---------------------------- */
.locatie-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0;
  margin: var(--space-5) 0 0;
  border: 1px solid var(--line-soft);
  background: var(--bg-surface);
}
.locatie-stats__row {
  padding: var(--space-4) var(--space-3);
  border-right: 1px solid var(--line-soft);
  display: grid;
  gap: 0.3em;
}
.locatie-stats__row:last-child { border-right: 0; }
.locatie-stats__row dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.locatie-stats__row dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.45rem;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
}
.locatie-stats__row dd span {
  font-size: 0.7em;
  color: var(--text-tertiary);
  font-weight: 700;
  letter-spacing: 0.05em;
}
@media (max-width: 640px) {
  .locatie-stats__row { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .locatie-stats__row:last-child { border-bottom: 0; }
}

/* ---------- Page header (interior pages) ----------------- */
.page-hero {
  padding-top: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: clamp(2rem, 4vw, 4rem);
  border-bottom: 1px solid var(--line-soft);
}
.page-hero__overline { margin-bottom: var(--space-3); }
.page-hero__title { font-size: var(--fs-h1); line-height: 1.0; max-width: 18ch; }
.page-hero__sub { color: var(--text-secondary); font-size: var(--fs-body-lg); margin-top: var(--space-4); max-width: 56ch; }

/* ---------- Content prose -------------------------------- */
.prose { max-width: var(--measure); color: var(--text-secondary); }
.prose h2, .prose h3, .prose h4 { color: var(--text-primary); margin-top: var(--space-5); margin-bottom: var(--space-3); }
.prose p { line-height: 1.65; }
.prose ul, .prose ol { padding-left: 1.3em; margin-block: var(--space-3); }
.prose li { margin-block: 0.4em; }
.prose a { color: var(--red); border-bottom: 1px solid color-mix(in oklab, var(--red) 50%, transparent); }
.prose a:hover { color: var(--red-hot); border-color: var(--red-hot); }
.prose strong { color: var(--text-primary); }
.prose blockquote { border-left: 1px solid var(--line-firm); padding-left: var(--space-4); margin: var(--space-4) 0; font-style: italic; color: var(--text-primary); }

/* ---------- Calculator stub ------------------------------ */
.calc {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line-firm);
  background: var(--bg-surface);
  max-width: 720px;
}
.calc__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.calc__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.calc__field { display: grid; gap: var(--space-2); }
.calc__field label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); }
.calc__field select, .calc__field input {
  background: var(--bg-deep);
  border: 1px solid var(--line-firm);
  color: var(--text-primary);
  padding: 0.75rem 0.85rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
.calc__field select:focus, .calc__field input:focus { border-color: var(--red); }

.calc__result { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-firm); margin-top: var(--space-3); }
.calc__cell { padding: var(--space-3); background: var(--bg-deep); display: grid; gap: 0.3em; }
.calc__cell-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; color: var(--text-tertiary); text-transform: uppercase; }
.calc__cell-value { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--text-primary); line-height: 1; }
.calc__cell-delta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--red); font-weight: 700; }

/* ---------- Marquee credentials strip -------------------- */
.marquee {
  border-block: 1px solid var(--line-soft);
  background: color-mix(in oklab, var(--bg-deep) 50%, var(--bg-surface));
  position: relative;
  overflow: hidden;
}
.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(2rem, 6vw, 5rem);
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-deep), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg-deep), transparent); }

.marquee__viewport {
  overflow: hidden;
  padding-block: clamp(0.85rem, 1.4vw, 1.2rem);
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.8ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.marquee__item:nth-child(odd) { color: var(--text-primary); }
.marquee__bullet {
  color: var(--red);
  display: inline-flex;
  flex-shrink: 0;
  transform: rotate(0deg);
  transition: transform var(--dur-3) var(--ease-out);
}
.marquee__item:hover .marquee__bullet { transform: rotate(45deg); }
.marquee__text { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; transform: translateX(0); }
}

/* ---------- Reveal-on-scroll defaults -------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  will-change: transform, opacity;
}
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: transform, opacity;
}

/* ---------- Cookie / GDPR notice slot -------------------- */
.cookie-stub {
  position: fixed; left: clamp(0.75rem, 3vw, 1.5rem); bottom: clamp(0.75rem, 3vw, 1.5rem); right: auto;
  background: var(--bg-elevated); border: 1px solid var(--line-firm);
  padding: var(--space-3) var(--space-4); max-width: 360px; z-index: 35;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  display: none;
}
.cookie-stub p { margin: 0 0 var(--space-2); }

/* ---------- 404 ------------------------------------------ */
.notfound { display: grid; place-items: center; gap: var(--space-4); padding-block: var(--space-8); text-align: center; }
.notfound__code { font-family: var(--font-display); font-weight: 900; font-size: clamp(6rem, 18vw, 12rem); color: var(--red); line-height: 1; }
.notfound__msg { color: var(--text-secondary); max-width: 40ch; margin-inline: auto; }

/* ---------- Reduced motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; }
}

/* ---------- Responsive ----------------------------------- */
@media (max-width: 1024px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 0.5ch; }
  .header-cta .btn { display: none; }
  .header-cta { gap: var(--space-2); justify-content: flex-end; width: 100%; }
  .hero { min-height: auto; padding-bottom: 0; flex-direction: column; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual {
    position: relative;
    inset: auto;
    width: auto;
    margin-inline: calc(var(--inset) * -1);
    min-height: clamp(280px, 70vw, 480px);
    max-width: none;
  }
  .hero__visual::before { background: linear-gradient(180deg, var(--bg-deep) 0%, transparent 30%, color-mix(in oklab, var(--bg-deep) 80%, transparent) 90%); }
  .hero__copy { padding-block: var(--space-4) var(--space-5); }
  .service { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); }
  .service__media { width: 96px; }
  .service__arrow { grid-column: 2; justify-self: start; margin-top: var(--space-4); }
  .why { grid-template-columns: 1fr; gap: var(--space-5); }
  .why__media {
    position: static;
    top: auto;
    aspect-ratio: 16/10;
    margin-inline: 0;
  }
  .cases__head { grid-template-columns: 1fr; }
  .process__head { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --inset: 1.25rem; }
  .hero__h1 { font-size: clamp(2.6rem, 14vw, 4.5rem); }
  .hero__cta { gap: var(--space-3); }
  .hero__cta .btn, .hero__cta .btn--ghost { width: 100%; justify-content: center; }
  .hero__cta-phone { width: 100%; text-align: center; margin-top: var(--space-3); }
  .hero__plate { display: none; }
  .hero__corner { width: 110px; height: 60px; }
  .stat { padding: var(--space-4); border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .stat:last-child { border-bottom: 0; }
  .case__stats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .trust-strip { justify-content: flex-start; }
  .header-cta__phone span { display: none; }
}

@media (min-width: 1440px) {
  .brand__tag { display: inline-block; }
}

@media print {
  .site-header, .site-footer, .whatsapp-fab, .cookie-stub { display: none; }
  body { background: white; color: black; }
}

/* ============================================================
   Single Dienst — rich service page blocks
   ============================================================ */
.dienst-hero {
  padding-block: clamp(2.5rem, 5vw, 5rem);
  border-bottom: 1px solid var(--line-soft);
}
.dienst-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-top: var(--space-4);
}
.dienst-hero__title {
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  line-height: 0.96;
  margin-top: var(--space-3);
}
.dienst-hero__lead {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: var(--text-secondary);
  max-width: 60ch;
  margin-top: var(--space-4);
  line-height: 1.55;
}
.dienst-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.dienst-hero__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  align-self: start;
  position: sticky;
  top: 130px;
}
.dienst-hero__stat {
  background: var(--bg-deep);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.dienst-hero__stat--full { grid-column: 1 / -1; }
.dienst-hero__stat dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.dienst-hero__stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 1.6vw, 1.55rem);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.dienst-hero__stat--full dd {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: none;
  color: var(--text-secondary);
  letter-spacing: 0;
}

@media (max-width: 900px) {
  .dienst-hero__grid { grid-template-columns: 1fr; }
  .dienst-hero__stats { position: static; }
}

/* Checklist two-column */
.checklist.checklist--two {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3) var(--space-5);
}
.checklist.checklist--two li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.checklist__icon {
  color: var(--red);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Audience split */
.audience-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
@media (max-width: 720px) { .audience-split { grid-template-columns: 1fr; } }
.audience-block {
  background: var(--bg-deep);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  gap: var(--space-3);
}
.audience-block__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.audience-block--ok .audience-block__head { color: var(--text-primary); }
.audience-block--ok .audience-block__head svg { color: oklch(0.78 0.18 145); }
.audience-block--niet .audience-block__head { color: var(--text-primary); }
.audience-block--niet .audience-block__head svg { color: var(--red); }
.audience-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.audience-block ul li {
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--text-secondary);
  padding-left: 1.2em;
  position: relative;
}
.audience-block--ok ul li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: oklch(0.78 0.18 145);
  font-family: var(--font-mono);
  font-weight: 700;
}
.audience-block--niet ul li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--red);
  font-family: var(--font-mono);
  font-weight: 700;
}

/* Werkwijze steps */
.dienst-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  counter-reset: dst;
}
.dienst-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line-soft);
}
.dienst-step:last-child { border-bottom: 1px solid var(--line-soft); }
.dienst-step__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
  color: var(--red);
  min-width: 2ch;
}
.dienst-step__titel {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-2);
}
.dienst-step__tekst {
  color: var(--text-secondary);
  margin: 0;
  max-width: 70ch;
  line-height: 1.55;
}

/* Tech callout */
.tech-callout {
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  gap: var(--space-3);
  position: relative;
}
.tech-callout::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 3px;
  background: var(--red);
}
.tech-callout__head h3 {
  margin: var(--space-2) 0 0;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}
.tech-callout p {
  margin: 0;
  color: var(--text-secondary);
  max-width: 75ch;
  line-height: 1.6;
}

/* Legal callout */
.legal-callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px dashed var(--red);
  background: var(--red-soft, color-mix(in oklab, var(--red) 8%, transparent));
}
.legal-callout__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--red);
  display: grid;
  place-items: center;
  color: var(--text-primary);
  flex-shrink: 0;
}
.legal-callout p {
  margin: var(--space-2) 0 0;
  color: var(--text-primary);
  line-height: 1.55;
  font-size: 0.95rem;
}

/* FAQ list (lightweight details/summary version) */
.faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}
.faq-list .faq-item {
  border-bottom: 1px solid var(--line-soft);
}
.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  user-select: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list .faq-item__chev {
  transition: transform var(--dur-2) var(--ease-out);
  flex-shrink: 0;
  color: var(--text-tertiary);
}
.faq-list details[open] .faq-item__chev {
  transform: rotate(180deg);
  color: var(--red);
}
.faq-list .faq-item__a {
  padding: 0 0 var(--space-4);
  max-width: 75ch;
}
.faq-list .faq-item__a p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Cross-sell */
.dienst-cross {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.dienst-cross__card {
  background: var(--bg-deep);
  padding: clamp(1.25rem, 2.4vw, 2rem);
  text-decoration: none;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  transition: background var(--dur-2) var(--ease-out);
}
.dienst-cross__card:hover {
  background: color-mix(in oklab, var(--red) 10%, var(--bg-deep));
}
.dienst-cross__card h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: var(--space-2) 0 0;
  color: var(--text-primary);
}
.dienst-cross__card p {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
}
.dienst-cross__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}
.dienst-cross__price {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  font-weight: 700;
}
.dienst-cross__cta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-quiet);
  transition: color var(--dur-2) var(--ease-out);
}
.dienst-cross__card:hover .dienst-cross__cta { color: var(--red); }

/* ============================================================
   Offerte page hero + sidebar
   ============================================================ */
.offerte-hero {
  padding-block: clamp(2.5rem, 5vw, 5rem);
  border-bottom: 1px solid var(--line-soft);
}
.offerte-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-top: var(--space-4);
}
.offerte-hero__title {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 0.96;
  margin-top: var(--space-3);
}
.offerte-hero__lead {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: var(--text-secondary);
  max-width: 60ch;
  margin-top: var(--space-4);
  line-height: 1.55;
}
.offerte-hero__props {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.offerte-hero__props li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: center;
  font-size: 1rem;
  color: var(--text-primary);
}
.offerte-hero__props svg { color: var(--red); }
.offerte-hero__contact {
  position: sticky;
  top: 130px;
}
.offerte-hero__contact-card {
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  padding: var(--space-5);
  position: relative;
}
.offerte-hero__contact-card::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 60px; height: 3px;
  background: var(--red);
}
.offerte-hero__contact-card h3 {
  margin: var(--space-3) 0 var(--space-4);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
}
.offerte-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.offerte-contact-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line-soft);
}
.offerte-contact-list li:first-child { border-top: none; }
.offerte-contact-list__lbl {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.offerte-contact-list__val {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--text-primary);
  text-align: right;
  transition: color var(--dur-2) var(--ease-out);
}
a.offerte-contact-list__val:hover { color: var(--red); }

.offerte-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.offerte-status__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: oklch(0.65 0.2 145);
  box-shadow: 0 0 0 3px color-mix(in oklab, oklch(0.65 0.2 145) 25%, transparent);
}
.offerte-status--dicht .offerte-status__dot {
  background: var(--red);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 25%, transparent);
}

@media (max-width: 900px) {
  .offerte-hero__grid { grid-template-columns: 1fr; }
  .offerte-hero__contact { position: static; }
}

/* Form section grid */
.offerte-form-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.offerte-form-section__main {
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
}
.offerte-form-section__main::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 60px; height: 3px;
  background: var(--red);
}
.offerte-aside {
  display: grid;
  gap: var(--space-4);
  position: sticky;
  top: 130px;
  align-self: start;
}
.offerte-aside__block {
  background: var(--bg-deep);
  border: 1px solid var(--line-soft);
  padding: var(--space-5);
}
.offerte-aside__block--dense {
  background: var(--bg-surface);
}
.offerte-aside__block--quiet {
  background: transparent;
  border-style: dashed;
}
.offerte-aside__block h3 {
  margin: var(--space-3) 0 var(--space-4);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
}
.offerte-aside__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.offerte-aside__list li {
  display: grid;
  gap: 4px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line-soft);
}
.offerte-aside__list li:first-child { border-top: none; padding-top: 0; }
.offerte-aside__list strong {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 0.98rem;
  color: var(--text-primary);
}
.offerte-aside__list span {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.offerte-aside__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  counter-reset: ostep;
}
.offerte-aside__steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: center;
  font-size: 0.92rem;
  color: var(--text-secondary);
}
.offerte-aside__steps strong {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--red);
  font-size: 1rem;
}
.offerte-aside__block--quiet p {
  margin: var(--space-2) 0 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.offerte-aside__block--quiet a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .offerte-form-section__grid { grid-template-columns: 1fr; }
  .offerte-aside { position: static; }
}

/* ============================================================
   Gravity Forms — full huisstijl override
   ============================================================ */

/* Override ALL Gravity Forms CSS variables to neutralize the orbital theme
   inline <style> block that leaks even with gravity-theme. */
.pegasus-form_wrapper,
.pegasus-form_wrapper.gform-theme,
[data-parent-form^="1_"] {
  --gf-color-primary: var(--red);
  --gf-color-primary-rgb: 157, 13, 58;
  --gf-color-primary-contrast: #ffffff;
  --gf-color-primary-contrast-rgb: 255, 255, 255;
  --gf-color-primary-darker: oklch(0.34 0.16 12);
  --gf-color-primary-lighter: oklch(0.5 0.17 12);
  --gf-color-secondary: var(--bg-deep);
  --gf-color-secondary-rgb: 13, 13, 16;
  --gf-color-secondary-contrast: #ffffff;
  --gf-color-secondary-contrast-rgb: 255, 255, 255;
  --gf-color-secondary-darker: var(--bg-surface);
  --gf-color-secondary-lighter: var(--bg-elevated);
  --gf-color-out-ctrl-light: var(--line-soft);
  --gf-color-out-ctrl-light-rgb: 255, 255, 255;
  --gf-color-out-ctrl-light-darker: var(--line-firm);
  --gf-color-out-ctrl-light-lighter: var(--bg-surface);
  --gf-color-out-ctrl-dark: var(--text-tertiary);
  --gf-color-out-ctrl-dark-rgb: 180, 180, 188;
  --gf-color-out-ctrl-dark-darker: var(--text-primary);
  --gf-color-out-ctrl-dark-lighter: var(--text-secondary);
  --gf-color-in-ctrl: var(--bg-deep);
  --gf-color-in-ctrl-rgb: 13, 13, 16;
  --gf-color-in-ctrl-contrast: var(--text-primary);
  --gf-color-in-ctrl-contrast-rgb: 255, 255, 255;
  --gf-color-in-ctrl-darker: var(--bg-surface);
  --gf-color-in-ctrl-lighter: var(--bg-elevated);
  --gf-color-in-ctrl-primary: var(--red);
  --gf-color-in-ctrl-primary-rgb: 157, 13, 58;
  --gf-color-in-ctrl-primary-contrast: #ffffff;
  --gf-color-in-ctrl-primary-darker: oklch(0.34 0.16 12);
  --gf-color-in-ctrl-primary-lighter: oklch(0.5 0.17 12);
  --gf-color-in-ctrl-light: var(--line-soft);
  --gf-color-in-ctrl-light-darker: var(--line-firm);
  --gf-color-in-ctrl-light-lighter: var(--bg-surface);
  --gf-color-in-ctrl-dark: var(--text-tertiary);
  --gf-color-in-ctrl-dark-darker: var(--text-primary);
  --gf-color-in-ctrl-dark-lighter: var(--text-secondary);
  --gf-radius: 0;
  --gf-font-size-secondary: 14px;
  --gf-font-size-tertiary: 13px;
  --gf-ctrl-border-color: var(--line-soft);
  --gf-ctrl-label-color-primary: var(--text-primary);
  --gf-ctrl-label-color-secondary: var(--text-secondary);
  --gf-field-pg-steps-number-color: var(--text-tertiary);
}

.pegasus-form_wrapper {
  font-family: var(--font-body);
  color: var(--text-primary);
}
.pegasus-form_wrapper form { display: grid; gap: var(--space-4); }

/* Reset fieldset/legend to look like every other label group */
.pegasus-form_wrapper fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
}
.pegasus-form_wrapper legend {
  padding: 0;
  margin-bottom: var(--space-2);
  width: 100%;
}
/* Required asterisk text */
.pegasus-form_wrapper .gfield_required,
.pegasus-form_wrapper .gfield_required_text {
  display: inline-block;
  margin-left: 0.5em;
  color: var(--red);
  font-size: 0.65rem;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
/* Hide the duplicated "(Vereist)" text node — the asterisk is enough */
.pegasus-form_wrapper .gfield_required_text { display: none; }

/* Intro blocks (HTML fields) */
.pegasus-form__intro {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line-soft);
}
.pegasus-form__intro h2 {
  margin: var(--space-2) 0 0;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.05;
}
.pegasus-form__intro p {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: 0.98rem;
  max-width: 55ch;
}

/* Page progress bar */
.pegasus-form_wrapper .gf_progressbar_wrapper {
  margin: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.pegasus-form_wrapper .gf_progressbar_title {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pegasus-form_wrapper .gf_progressbar {
  width: 100%;
  height: 2px;
  background: var(--line-soft);
  overflow: hidden;
  position: relative;
}
.pegasus-form_wrapper .gf_progressbar_percentage {
  height: 100%;
  background: var(--red);
  display: block;
  transition: width var(--dur-3) var(--ease-out);
}
.pegasus-form_wrapper .gf_progressbar_percentage span { display: none; }

/* Field rows */
.pegasus-form_wrapper .gform_fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.pegasus-form_wrapper .gfield {
  display: grid;
  gap: var(--space-2);
}
.pegasus-form_wrapper .gfield--type-html { padding-block: var(--space-2); }

/* Labels */
.pegasus-form_wrapper .gfield_label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
  font-weight: 700;
  margin: 0;
}
.pegasus-form_wrapper .gfield_required {
  color: var(--red);
  margin-left: 0.4em;
  font-weight: 700;
}
.pegasus-form_wrapper .gfield_description,
.pegasus-form_wrapper .gform-field-label--type-sub {
  font-size: 0.82rem;
  color: var(--text-tertiary);
  margin: 4px 0 0;
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

/* Inputs / selects / textareas */
.pegasus-form_wrapper input[type="text"],
.pegasus-form_wrapper input[type="email"],
.pegasus-form_wrapper input[type="tel"],
.pegasus-form_wrapper input[type="number"],
.pegasus-form_wrapper input[type="url"],
.pegasus-form_wrapper select,
.pegasus-form_wrapper textarea {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  outline: none;
  line-height: 1.4;
}
.pegasus-form_wrapper textarea {
  min-height: 140px;
  resize: vertical;
}
.pegasus-form_wrapper select {
  background-image: linear-gradient(45deg, transparent 49%, var(--text-tertiary) 50%, transparent 51%),
                    linear-gradient(135deg, transparent 49%, var(--text-tertiary) 50%, transparent 51%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.85rem) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
  cursor: pointer;
}
.pegasus-form_wrapper input:hover,
.pegasus-form_wrapper select:hover,
.pegasus-form_wrapper textarea:hover {
  border-color: color-mix(in oklab, var(--text-primary) 30%, var(--line-soft));
}
.pegasus-form_wrapper input:focus,
.pegasus-form_wrapper select:focus,
.pegasus-form_wrapper textarea:focus {
  border-color: var(--red);
  background: color-mix(in oklab, var(--red) 4%, var(--bg-deep));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--red) 30%, transparent);
}
.pegasus-form_wrapper input::placeholder,
.pegasus-form_wrapper textarea::placeholder {
  color: var(--text-quiet);
}

/* Radio / checkbox base */
.pegasus-form_wrapper .ginput_container_radio,
.pegasus-form_wrapper .ginput_container_checkbox {
  display: grid;
  gap: var(--space-2);
}
.pegasus-form_wrapper .gchoice {
  margin: 0;
  padding: 0;
}
.pegasus-form_wrapper .gchoice input[type="radio"],
.pegasus-form_wrapper .gchoice input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pegasus-form_wrapper .gchoice label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.85rem 1rem;
  background: var(--bg-deep);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  font-size: 0.96rem;
  color: var(--text-primary);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  line-height: 1.35;
  font-weight: 500;
}
.pegasus-form_wrapper .gchoice label::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--text-tertiary);
  flex-shrink: 0;
  display: inline-block;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
  background: transparent;
}
.pegasus-form_wrapper .ginput_container_radio .gchoice label::before { border-radius: 50%; }
.pegasus-form_wrapper .gchoice label:hover { border-color: color-mix(in oklab, var(--text-primary) 30%, var(--line-soft)); }
.pegasus-form_wrapper .gchoice input:checked + label {
  border-color: var(--red);
  background: color-mix(in oklab, var(--red) 8%, var(--bg-deep));
  color: var(--text-primary);
}
/* Keyboard focus ring — input is visually hidden so the label receives the indicator */
.pegasus-form_wrapper .gchoice input:focus-visible + label {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 35%, transparent);
  border-color: var(--red);
}
.pegasus-form_wrapper .gchoice input:checked + label::before {
  background: var(--red);
  border-color: var(--red);
  box-shadow: inset 0 0 0 3px var(--bg-deep);
}
.pegasus-form_wrapper .ginput_container_checkbox .gchoice input:checked + label::before {
  box-shadow: none;
  background: var(--red) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'><path d='M5 12l5 5L20 7'/></svg>") center / 14px no-repeat;
}

/* Pill-row variant: radios laid out as icon-tile pills via CSS grid */
.pegasus-form_wrapper .pegasus-pillrow .ginput_container_radio,
.pegasus-form_wrapper .pegasus-pillrow .gfield_radio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
}
.pegasus-form_wrapper .pegasus-pillrow .gchoice { margin: 0; }
.pegasus-form_wrapper .pegasus-pillrow .gchoice label {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.86rem;
  padding: 1rem 0.6rem;
  width: 100%;
  gap: 0.5rem;
}
/* Re-purpose the radio dot ::before as an icon container (mask-image set per choice) */
.pegasus-form_wrapper .pegasus-pillrow .gchoice label::before {
  border: 0 !important;
  border-radius: 0 !important;
  width: 26px;
  height: 26px;
  background-color: currentColor;
  background-image: none !important;
  box-shadow: none !important;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  opacity: 0.65;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.pegasus-form_wrapper .pegasus-pillrow .gchoice input:checked + label::before {
  opacity: 1;
  color: var(--red);
  background-color: currentColor !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: scale(1.06);
}
.pegasus-form_wrapper .pegasus-pillrow .gchoice label:hover::before { opacity: 0.9; }

/* Voertuigtype (field 2): Auto + Motor */
.pegasus-form_wrapper .gchoice_1_2_0 label::before {
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l2-6c.3-.9 1-1.5 2-1.5h10c1 0 1.7.6 2 1.5l2 6'/%3E%3Cpath d='M3 13v5h3v-2h12v2h3v-5'/%3E%3Ccircle cx='7' cy='17' r='1.8'/%3E%3Ccircle cx='17' cy='17' r='1.8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l2-6c.3-.9 1-1.5 2-1.5h10c1 0 1.7.6 2 1.5l2 6'/%3E%3Cpath d='M3 13v5h3v-2h12v2h3v-5'/%3E%3Ccircle cx='7' cy='17' r='1.8'/%3E%3Ccircle cx='17' cy='17' r='1.8'/%3E%3C/svg%3E");
}
.pegasus-form_wrapper .gchoice_1_2_1 label::before {
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='17' r='3'/%3E%3Ccircle cx='19' cy='17' r='3'/%3E%3Cpath d='M5 17l4-7h4l3 4M11 10l1-3h3M16 14l3 3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='17' r='3'/%3E%3Ccircle cx='19' cy='17' r='3'/%3E%3Cpath d='M5 17l4-7h4l3 4M11 10l1-3h3M16 14l3 3'/%3E%3C/svg%3E");
}

/* Brandstof (field 7): Benzine / Diesel / Hybride / Elektrisch */
.pegasus-form_wrapper .gchoice_1_7_0 label::before {
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='9' height='18' rx='1'/%3E%3Cpath d='M4 10h9'/%3E%3Cpath d='M13 7l3 2v8a2 2 0 0 0 2 2 2 2 0 0 1 2 2'/%3E%3Cpath d='M16 5v3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='9' height='18' rx='1'/%3E%3Cpath d='M4 10h9'/%3E%3Cpath d='M13 7l3 2v8a2 2 0 0 0 2 2 2 2 0 0 1 2 2'/%3E%3Cpath d='M16 5v3'/%3E%3C/svg%3E");
}
.pegasus-form_wrapper .gchoice_1_7_1 label::before {
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c2 4 5 6 5 11a5 5 0 0 1-10 0c0-5 3-7 5-11Z'/%3E%3Cpath d='M9 15a3 3 0 0 0 3 3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c2 4 5 6 5 11a5 5 0 0 1-10 0c0-5 3-7 5-11Z'/%3E%3Cpath d='M9 15a3 3 0 0 0 3 3'/%3E%3C/svg%3E");
}
.pegasus-form_wrapper .gchoice_1_7_2 label::before {
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4c-7 0-12 3-12 10 0 2 1 4 2 5 5 1 11-3 11-10 0-2-1-4-1-5z'/%3E%3Cpath d='M8 19c2-4 5-7 9-9'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4c-7 0-12 3-12 10 0 2 1 4 2 5 5 1 11-3 11-10 0-2-1-4-1-5z'/%3E%3Cpath d='M8 19c2-4 5-7 9-9'/%3E%3C/svg%3E");
}
.pegasus-form_wrapper .gchoice_1_7_3 label::before {
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M13 2 L4 14 L11 14 L9 22 L20 9 L13 9 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M13 2 L4 14 L11 14 L9 22 L20 9 L13 9 Z'/%3E%3C/svg%3E");
}

/* Voorkeur contact (field 19): Bellen / Mail / WhatsApp */
.pegasus-form_wrapper .gchoice_1_19_0 label::before {
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.4 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.4 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9z'/%3E%3C/svg%3E");
}
.pegasus-form_wrapper .gchoice_1_19_1 label::before {
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpolyline points='3 7 12 13 21 7'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpolyline points='3 7 12 13 21 7'/%3E%3C/svg%3E");
}
.pegasus-form_wrapper .gchoice_1_19_2 label::before {
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.5-4A8.5 8.5 0 1 1 7 19.5L3 21z'/%3E%3Cpath d='M8 11c.5 2 2.5 4 4.5 4.5l1.5-1c.5-.3 1-.3 1.5 0l1.5 1c.5.3 1 .8.5 1.5-1 2-4 2-7-1s-3-6-1-7c.7-.5 1.2 0 1.5.5l1 1.5c.3.5.3 1 0 1.5l-1 1.5z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.5-4A8.5 8.5 0 1 1 7 19.5L3 21z'/%3E%3Cpath d='M8 11c.5 2 2.5 4 4.5 4.5l1.5-1c.5-.3 1-.3 1.5 0l1.5 1c.5.3 1 .8.5 1.5-1 2-4 2-7-1s-3-6-1-7c.7-.5 1.2 0 1.5.5l1 1.5c.3.5.3 1 0 1.5l-1 1.5z'/%3E%3C/svg%3E");
}

/* Check-grid variant: dense 2-column checkbox grid */
.pegasus-form_wrapper .pegasus-checkgrid .ginput_container_checkbox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}

/* Postcode field narrow */
.pegasus-form_wrapper .pegasus-postcode input { max-width: 220px; }

/* Consent field */
.pegasus-form_wrapper .gfield--type-consent .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.pegasus-form_wrapper .gfield--type-consent input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--red);
  flex-shrink: 0;
  cursor: pointer;
}
.pegasus-form_wrapper .gfield--type-consent .gfield_consent_label {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.5;
  cursor: pointer;
}

/* Name (simple) */
.pegasus-form_wrapper .ginput_container_name { display: block; }

/* Footer / pagination buttons */
.pegasus-form_wrapper .gform_page_footer,
.pegasus-form_wrapper .gform_footer,
.pegasus-form_wrapper .gform-page-footer {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
  margin-top: var(--space-4);
}
/* All input-as-button variants — high specificity to defeat orbital defaults */
.pegasus-form_wrapper input.gform_button,
.pegasus-form_wrapper input.gform_next_button,
.pegasus-form_wrapper input.gform_previous_button,
.pegasus-form_wrapper button.gform_button,
.pegasus-form_wrapper button.gform_next_button,
.pegasus-form_wrapper button.gform_previous_button,
.pegasus-form_wrapper .gform_button.button,
.pegasus-form_wrapper .gform_next_button.button,
.pegasus-form_wrapper .gform_previous_button.button {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
  line-height: 1;
  padding: 1.05rem 1.6rem;
  border: 1px solid var(--text-primary);
  background: var(--text-primary);
  color: var(--bg-deep);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  border-radius: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  text-shadow: none;
  box-shadow: none;
  min-width: 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Primary (next / submit) — red */
.pegasus-form_wrapper input.gform_button,
.pegasus-form_wrapper input.gform_next_button,
.pegasus-form_wrapper button.gform_button,
.pegasus-form_wrapper button.gform_next_button {
  background: var(--red);
  border-color: var(--red);
  color: var(--text-primary);
  margin-left: auto;
}
.pegasus-form_wrapper input.gform_button:hover,
.pegasus-form_wrapper input.gform_next_button:hover,
.pegasus-form_wrapper button.gform_button:hover,
.pegasus-form_wrapper button.gform_next_button:hover,
.pegasus-form_wrapper input.gform_button:focus-visible,
.pegasus-form_wrapper input.gform_next_button:focus-visible {
  background: oklch(0.45 0.175 12);
  border-color: oklch(0.45 0.175 12);
  color: var(--text-primary);
  outline: none;
}
.pegasus-form_wrapper input.gform_button:focus-visible,
.pegasus-form_wrapper input.gform_next_button:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 35%, transparent);
}
/* Secondary (previous) — outline */
.pegasus-form_wrapper input.gform_previous_button,
.pegasus-form_wrapper button.gform_previous_button {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--line-firm);
}
.pegasus-form_wrapper input.gform_previous_button:hover,
.pegasus-form_wrapper button.gform_previous_button:hover,
.pegasus-form_wrapper input.gform_previous_button:focus-visible,
.pegasus-form_wrapper button.gform_previous_button:focus-visible {
  border-color: var(--text-primary);
  background: color-mix(in oklab, var(--text-primary) 8%, transparent);
  color: var(--text-primary);
  outline: none;
}
/* Disabled state */
.pegasus-form_wrapper input[disabled],
.pegasus-form_wrapper button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
/* Spinner */
.pegasus-form_wrapper .gform_ajax_spinner {
  margin-left: var(--space-3);
  vertical-align: middle;
}

/* Validation messages */
.pegasus-form_wrapper .gfield_error .gfield_label { color: var(--red); }
.pegasus-form_wrapper .gfield_error input,
.pegasus-form_wrapper .gfield_error select,
.pegasus-form_wrapper .gfield_error textarea {
  border-color: var(--red);
  background: color-mix(in oklab, var(--red) 5%, var(--bg-deep));
}
.pegasus-form_wrapper .gfield_validation_message,
.pegasus-form_wrapper .validation_message {
  background: color-mix(in oklab, var(--red) 12%, transparent);
  border: 1px solid var(--red);
  padding: 0.55rem 0.85rem;
  font-size: 0.84rem;
  color: var(--text-primary);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  margin-top: var(--space-2);
}
.pegasus-form_wrapper .gform_validation_errors {
  background: color-mix(in oklab, var(--red) 10%, transparent);
  border: 1px solid var(--red);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.pegasus-form_wrapper .gform_validation_errors h2 {
  font-size: 1rem;
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pegasus-form_wrapper .gform_validation_errors a { color: var(--red); text-decoration: underline; }

/* Confirmation message */
.gform_confirmation_wrapper,
.gform_wrapper .gform_confirmation_message {
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  padding: clamp(2rem, 4vw, 3rem);
  position: relative;
}
.gform_confirmation_wrapper::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 80px; height: 3px;
  background: var(--red);
}
.pegasus-form__success { display: grid; gap: var(--space-3); }
.pegasus-form__success h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: var(--space-2) 0 0;
}
.pegasus-form__success p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1rem;
  max-width: 60ch;
  line-height: 1.55;
}

/* Required hint at top */
.gform_required_legend { display: none; }

/* Hide the GF anchor span used for scroll positioning */
.pegasus-form_wrapper .gform_anchor { display: block; height: 0; overflow: hidden; }

/* HTML field — no extra paddings, intro block owns its rhythm */
.pegasus-form_wrapper .gfield_html { padding: 0; }

/* Hidden inputs */
.pegasus-form_wrapper .gform_hidden,
.pegasus-form_wrapper input[type="hidden"] { display: none !important; }

/* Conditional logic transitions feel cleaner */
.pegasus-form_wrapper .gfield {
  transition: opacity var(--dur-2) var(--ease-out);
}
.pegasus-form_wrapper .gfield[style*="display:none"],
.pegasus-form_wrapper .gfield[style*="display: none"] {
  display: none !important;
}

/* AJAX iframe placeholder */
iframe[name^="gform_ajax_frame"] {
  display: none !important;
}

/* Auto-fill background fix on Chrome — keep dark bg on focused autofill inputs */
.pegasus-form_wrapper input:-webkit-autofill,
.pegasus-form_wrapper input:-webkit-autofill:hover,
.pegasus-form_wrapper input:-webkit-autofill:focus,
.pegasus-form_wrapper textarea:-webkit-autofill,
.pegasus-form_wrapper select:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0px 1000px var(--bg-deep) inset;
  box-shadow: 0 0 0px 1000px var(--bg-deep) inset;
  caret-color: var(--text-primary);
  border-color: var(--line-soft);
}

/* Sublabel above for complex name field */
.pegasus-form_wrapper .gfield_label_before_complex {
  display: block;
}

/* Hide GF's added field-label utility class duplications inside choices */
.pegasus-form_wrapper .gform-field-label--type-inline { font-weight: 500; letter-spacing: 0; text-transform: none; }
.pegasus-form_wrapper .gfield .gform-field-label--type-inline { font-family: var(--font-body); }

/* Mobile button stacking */
@media (max-width: 540px) {
  .pegasus-form_wrapper .gform_page_footer,
  .pegasus-form_wrapper .gform_footer,
  .pegasus-form_wrapper .gform-page-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .pegasus-form_wrapper input.gform_button,
  .pegasus-form_wrapper input.gform_next_button,
  .pegasus-form_wrapper input.gform_previous_button {
    width: 100%;
    margin-left: 0;
  }
}