/* Overtake — overtake.nl v1.0
   Layout and components. Every value here resolves to a brand token; no raw
   hex is introduced that is not already one of the six brand colours. */

/* ==========================================================================
   1. Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* The sticky header must not cover the section a hash link lands on. */
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* `height: auto` on img, not on svg, and it is not cosmetic. The width/height
   attributes on an <img> are applied as presentational hints, so an image with
   height="800" gets a definite height — and a definite height means the
   browser ignores aspect-ratio. Any rule that sets width and aspect-ratio but
   forgets height silently renders the photo at its attribute height instead.
   Defaulting to auto here makes that whole class of bug impossible; a rule
   that genuinely wants a fixed height (.ot-imgslot img) still overrides it.

   svg is left alone deliberately: the icon sprite is <svg width="0" height="0">
   and auto would let it claim layout space. */
img, svg { max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }

a {
  color: var(--text-accent);
  text-decoration: none;
  transition: var(--hover-transition);
}
a:hover { color: var(--ot-lime-bright); }
[data-surface="light"] a:hover,
[data-theme="light"] a:hover { color: var(--ot-asphalt); }

/* Focus is a lime ring, 2px offset, never removed. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Hover is a colour change only — honour a reduced-motion preference anyway. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.ot-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ot-skip {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  background: var(--ot-lime);
  color: var(--ot-asphalt);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-5);
  transition: top var(--dur-base) var(--ease-out);
}
.ot-skip:focus { top: var(--space-4); color: var(--ot-asphalt); }

/* ==========================================================================
   2. Layout primitives
   ========================================================================== */

.ot-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ot-section {
  padding-block: var(--section-y);
  background: var(--surface-base);
  color: var(--text-body);
}
.ot-section--raised { background: var(--surface-raised); }
.ot-section--tight { padding-block: var(--section-y-tight); }

.ot-stack {
  display: flex;
  flex-direction: column;
}

/* Section head: kicker + headline on the left, lede on the right, baseline
   aligned, sitting on a hairline. */
.ot-sectionhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(28px, 5vw, 60px);
  flex-wrap: wrap;
  border-bottom: var(--border-hairline) solid var(--hairline);
  padding-bottom: var(--space-7);
}
.ot-sectionhead__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ot-sectionhead__lede {
  font-size: var(--text-base);
  color: var(--text-muted);
  max-width: 42ch;
}

.ot-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min-card), 100%), 1fr));
}
.ot-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min-wide), 100%), 1fr));
}
.ot-grid--steps {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min-step), 100%), 1fr));
  row-gap: var(--space-8);
  column-gap: 0;
}

/* ==========================================================================
   3. Type
   ========================================================================== */

.ot-display {
  font-family: var(--font-display);
  font-variation-settings: var(--display-width);
  font-weight: var(--display-weight);
  color: var(--text-strong);
  text-wrap: pretty;
}

.ot-hero-title {
  font-size: var(--text-hero);
  letter-spacing: var(--tracking-hero);
  line-height: var(--leading-display);
  text-wrap: balance;
}
.ot-h2 { font-size: var(--text-h2); letter-spacing: var(--tracking-h); line-height: var(--leading-h); }
.ot-h3 { font-size: var(--text-h3); letter-spacing: var(--tracking-h); line-height: var(--leading-h); }
.ot-h4 { font-size: var(--text-h4); font-weight: 700; letter-spacing: var(--tracking-h-tight); line-height: 1.15; }
.ot-h5 { font-size: var(--text-h5); font-weight: 700; letter-spacing: var(--tracking-h-tight); line-height: 1.25; }

.ot-lead {
  font-size: var(--text-lead);
  color: var(--text-body);
}
.ot-prose { font-size: var(--text-base); color: var(--text-body); }
.ot-prose--muted { color: var(--text-muted); }
.ot-prose--sm { font-size: var(--text-sm); color: var(--text-muted); }

/* Mono eyebrow. ALL-CAPS is reserved for these. */
.ot-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent);
  line-height: 1.4;
}
.ot-eyebrow--sm {
  font-size: var(--text-label-sm);
  letter-spacing: var(--tracking-label-tight);
}
.ot-eyebrow--xs {
  font-size: var(--text-label-xs);
  letter-spacing: var(--tracking-label-tight);
}
.ot-eyebrow--muted { color: var(--text-muted); }

/* ==========================================================================
   4. Brand device — the M4 dashes
   Three (or six) bars skewed -24deg, widening and brightening front to back.
   ========================================================================== */

.ot-dashes {
  display: inline-flex;
  align-items: center;
  gap: var(--dash-gap);
  flex: none;
}
.ot-dashes > i {
  display: block;
  height: var(--dash-h);
  background: var(--ot-lime);
  transform: skewX(var(--dash-skew));
}
.ot-dashes > i:nth-child(1) { width: var(--dash-w-1); opacity: var(--dash-fade-1); }
.ot-dashes > i:nth-child(2) { width: var(--dash-w-2); opacity: var(--dash-fade-2); }
.ot-dashes > i:nth-child(3) { width: var(--dash-w-3); opacity: 1; }

.ot-dashes--onlime > i { background: var(--ot-asphalt); }

/* Single skewed bar — used as a list bullet and as the inline "next step" tail.
   This is a bullet, not the brand device. */
.ot-bullet {
  display: inline-block;
  width: 20px;
  height: 6px;
  flex: none;
  margin-top: 7px;
  background: var(--ot-lime);
  transform: skewX(var(--dash-skew));
}
.ot-bullet--asphalt { background: var(--ot-asphalt); }
.ot-bullet--error { background: var(--status-error, #A03A2B); }
.ot-bullet--hollow {
  background: transparent;
  border: var(--border-hairline) solid var(--hairline-strong);
}

/* ==========================================================================
   5. Logo lockup
   ========================================================================== */

.ot-logo {
  /* The lockup scales off the mark: the wordmark is 52% of it and the
     descriptor 20%, matching the LogoLockup ladder in the design system. */
  --logo-mark: 42px;
  --logo-word: 22px;
  --logo-desc: 9px;
  --logo-bearing: 2.55px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  flex: none;
}
.ot-logo--lg {
  --logo-mark: 52px;
  --logo-word: 27px;
  --logo-desc: 10px;
  --logo-bearing: 3.13px;
}
.ot-logo__mark {
  display: block;
  flex: none;
  width: var(--logo-mark);
  height: var(--logo-mark);
}
.ot-logo__text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
.ot-logo__word { display: block; width: auto; height: var(--logo-word); }
/* The wordmark file has a left bearing (the O starts at x=103 of a 5260.7
   viewBox); the descriptor is nudged by the same 11.61% so the O and the L
   line up on the left edge. */
.ot-logo__descriptor {
  font-family: var(--font-mono);
  font-size: var(--logo-desc);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
  margin-left: var(--logo-bearing);
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.ot-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: var(--hover-transition);
  display: inline-flex;
  width: auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
}
.ot-btn--sm { font-size: 14px; padding: 10px 18px; }
.ot-btn--lg { font-size: 16px; padding: 17px 34px; }
.ot-btn--full { display: flex; width: 100%; }

.ot-btn:disabled,
.ot-btn[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; }

/* fill — follows the theme: lime on dark, asphalt on light */
.ot-btn--fill { background: var(--action-fill); color: var(--action-label); }
.ot-btn--fill:hover { background: var(--action-fill-hover); color: var(--action-label); }

/* accent — always lime, whatever the surface */
.ot-btn--accent { background: var(--ot-lime); color: var(--ot-asphalt); }
.ot-btn--accent:hover { background: var(--ot-lime-bright); color: var(--ot-asphalt); }

/* ghost — 1.5px outline, padding compensated so it sits on the same baseline */
.ot-btn--ghost {
  background: var(--ghost-bg);
  border: var(--border-ghost) solid var(--action-ghost-border);
  color: var(--action-ghost-label);
  padding: calc(14px - 1.5px) calc(26px - 1px);
}
.ot-btn--ghost:hover { color: var(--text-accent); }
.ot-btn--ghost.ot-btn--sm { padding: calc(10px - 1.5px) calc(18px - 1px); }
.ot-btn--ghost.ot-btn--lg { padding: calc(17px - 1.5px) calc(34px - 1px); }

/* quiet — a mono label that behaves like a button */
.ot-btn--quiet {
  background: transparent;
  color: var(--text-muted);
  /* The DS Button's quiet variant uses 4px, which lands the line box at 22px —
     under the 24px WCAG 2.2 minimum. 6px clears it at 26px. */
  padding: 6px 0;
  border-radius: var(--radius-none);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  justify-content: flex-start;
}
.ot-btn--quiet:hover { color: var(--text-strong); }
.ot-tile--lime .ot-btn--quiet { color: var(--ot-asphalt); }

/* Inline "next step" link with the skewed tail. */
.ot-arrowlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-accent);
}
.ot-arrowlink::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 5px;
  background: currentColor;
  transform: skewX(var(--dash-skew));
}
.ot-arrowlink--push { margin-top: auto; }

/* ==========================================================================
   7. Badge
   ========================================================================== */

.ot-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  padding: 4px 8px;
  line-height: 1.3;
  white-space: nowrap;
}
.ot-badge--accent { background: var(--ot-lime); color: var(--ot-asphalt); }
.ot-badge--quiet {
  background: transparent;
  color: var(--text-muted);
  border: var(--border-hairline) solid var(--hairline-strong);
}
.ot-badge--solid { background: var(--ot-moss); color: var(--ot-chalk); }

/* ==========================================================================
   8. Stat figure — every number is mono, with a mono unit caption beneath
   ========================================================================== */

.ot-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.ot-stat__value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-figure-sm);
  letter-spacing: -0.02em;
  color: var(--text-strong);
  line-height: 1.05;
  white-space: nowrap;
}
.ot-stat--lg .ot-stat__value { font-size: var(--text-figure); }
.ot-stat__label {
  font-family: var(--font-mono);
  font-size: var(--text-label-xs);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
}

.ot-statrow {
  display: flex;
  gap: clamp(24px, 3.5vw, 44px);
  flex-wrap: wrap;
}
.ot-statrow--ruled {
  border-top: var(--border-hairline) solid var(--hairline);
  padding-top: var(--space-7);
}
.ot-statrow--sunken {
  gap: var(--space-8);
  background: var(--surface-sunken);
  padding: 22px var(--space-6);
  margin-top: auto;
}

/* ==========================================================================
   9. Cards, tiles, panels
   ========================================================================== */

/* Depth comes from surface steps and hairlines. There is no shadow system. */
/* A card on a base section steps up to the raised surface... */
.ot-card {
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--hairline);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  min-width: 0;
}
/* ...and a card on a raised section steps back down to base. */
.ot-card--alt { background: var(--surface-base); }
.ot-card--pad-sm { padding: 40px var(--space-8); }
.ot-card--pad-tight { padding: var(--space-8); }

/* A flat lime field. Lime as a field always takes Asphalt / Ink Lime text. */
.ot-tile--lime {
  /* The tile is Lime in either theme, so the dark theme's Lime focus ring
     would land Lime-on-Lime (1:1). Asphalt gives 15.06:1 on this field. */
  --focus-ring: var(--ot-asphalt);
  background: var(--ot-lime);
  color: var(--ot-lime-ink);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ot-tile--lime .ot-display,
.ot-tile--lime .ot-strong { color: var(--ot-asphalt); }
.ot-tile--lime .ot-eyebrow { color: var(--ot-lime-ink); }
.ot-tile--lime a { color: var(--ot-asphalt); }
.ot-tile--lime .ot-ruled { border-top-color: rgba(13, 16, 14, 0.18); }

.ot-ruled {
  border-top: var(--border-hairline) solid var(--hairline);
  padding-top: var(--space-6);
}

.ot-strong { color: var(--text-strong); }

/* Icon tile — a lime square with the glyph flipped to Asphalt. */
.ot-icontile {
  width: 60px;
  height: 60px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ot-lime);
  color: var(--ot-asphalt);
}
.ot-icontile--invert { background: var(--ot-asphalt); color: var(--ot-lime); }
.ot-icon { display: block; flex: none; }

/* The three "voor wie" cards share a floor height so the arrow links align. */
.ot-routecard {
  padding: 40px var(--space-8);
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 340px;
}

/* Feature list with skewed bullets. */
.ot-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ot-checklist li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--text-body);
}
.ot-tile--lime .ot-checklist li { color: var(--ot-asphalt); }

/* ==========================================================================
   10. Image slots
   Photography direction is not settled — these are labelled placeholders.
   Drop an <img> inside and it fills the frame.
   ========================================================================== */

.ot-imgslot {
  position: relative;
  width: 100%;
  min-width: 0;
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Top-left: the hero's lime claim card sits over the bottom-left corner. */
  justify-content: flex-start;
  gap: var(--space-4);
  padding: var(--space-8);
}
.ot-imgslot--hero { aspect-ratio: 4 / 5; }
.ot-imgslot--dealer { aspect-ratio: 5 / 4; }
.ot-imgslot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.ot-imgslot__caption {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--text-placeholder);
  max-width: 26ch;
  line-height: 1.5;
}

/* The lime claim card that overlaps the hero image. */
.ot-claim {
  position: absolute;
  left: clamp(-24px, -1.8vw, 0px);
  bottom: 44px;
  background: var(--ot-lime);
  padding: var(--space-6) 26px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(300px, 86%);
  pointer-events: none;
}
.ot-claim__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ot-lime-ink);
}
.ot-claim__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-width);
  font-size: 21px;
  font-weight: 800;
  color: var(--ot-asphalt);
  letter-spacing: var(--tracking-h-tight);
  line-height: 1.15;
}
.ot-claim__note { font-size: 13px; line-height: 1.5; color: var(--ot-lime-ink); }

.ot-heromedia { position: relative; min-width: 0; }

/* ==========================================================================
   11. Header
   ========================================================================== */

.ot-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ot-asphalt) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--border-hairline) solid var(--hairline);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .ot-header { background: rgba(13, 16, 14, 0.92); }
}
.ot-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-4) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-10);
}
.ot-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4) 26px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ot-nav__link {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-body);
  white-space: nowrap;
}
.ot-nav__link:hover { color: var(--text-accent); }
.ot-nav__link[aria-current] { color: var(--text-strong); }

/* Theme switch — "Donker" plus an on/off switch.

   A segmented Donker|Licht control draws its frame around the *group*, so the
   inactive half reads as loose text rather than something you can press. A
   switch carries its own outline in both states, so it always looks operable.
   Geometry and colours are the design system's Switch primitive: 44x24 pill,
   lime when on, --hairline-strong when off, 18px knob. */
.ot-themeswitch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}
.ot-themeswitch__label {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  user-select: none;
}
.ot-themeswitch__track {
  position: relative;
  width: 44px;
  height: 24px;
  flex: none;
  padding: 2px;
  border-radius: var(--radius-pill);
  /* The DS Switch outlines the off state with --hairline-strong, which works on
     a raised form surface but only reaches ~1.9:1 on pure Asphalt — under the
     3:1 WCAG asks of a control boundary. One step down the same grey ladder
     gets it to ~4:1 without leaving the palette. */
  border: var(--border-hairline) solid var(--ot-grey-500);
  background: transparent;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: var(--hover-transition);
}
.ot-themeswitch__knob {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--text-muted);
  /* Travel = 44 - 2px padding x2 - 1px border x2 - 18px knob = 20px. */
  transform: translateX(0);
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.ot-themeswitch__track[aria-checked="true"] {
  background: var(--ot-lime);
  border-color: var(--ot-lime);
}
.ot-themeswitch__track[aria-checked="true"] .ot-themeswitch__knob {
  transform: translateX(20px);
  background: var(--ot-asphalt);
}
/* The track is 44x24 — it clears the 24px WCAG 2.2 minimum by nothing at all,
   and 24px is a mean target on a phone. Extend the hit area to 56x44 without
   changing the visual size. Horizontal reach is kept smaller than vertical so
   it doesn't swallow the whole label to its left. */
.ot-themeswitch__track::after {
  content: "";
  position: absolute;
  inset: -10px -6px;
}

/* Hover is a colour change only, per the motion rules. */
.ot-themeswitch__track:hover { border-color: var(--ot-lime); }
.ot-themeswitch__track[aria-checked="true"]:hover {
  background: var(--ot-lime-bright);
  border-color: var(--ot-lime-bright);
}
.ot-themeswitch:hover .ot-themeswitch__label { color: var(--text-strong); }

/* Mobile menu toggle — a mono label, not an icon. The icon set is closed and
   has no glyph for this, and the dash device may not sit inside a button. */
.ot-menutoggle {
  display: none;
  appearance: none;
  background: transparent;
  border: var(--border-hairline) solid var(--hairline-strong);
  color: var(--text-strong);
  cursor: pointer;
  padding: 9px var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  transition: var(--hover-transition);
}
.ot-menutoggle:hover { color: var(--ot-lime); border-color: var(--ot-lime); }

@media (max-width: 1080px) {
  .ot-menutoggle { display: block; }
  .ot-header__inner { flex-wrap: nowrap; }
  .ot-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    /* The base rule wraps; combined with a column direction and a capped
       height that would break the menu into columns on a short viewport. */
    flex-wrap: nowrap;
    gap: 0;
    background: var(--ot-asphalt);
    border-bottom: var(--border-hairline) solid var(--hairline);
    padding: var(--space-2) var(--gutter) var(--space-6);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
  }
  .ot-nav[data-open="true"] { display: flex; }
  .ot-nav__link {
    padding: var(--space-4) 0;
    border-bottom: var(--border-hairline) solid var(--hairline);
    font-size: 17px;
  }
  .ot-nav .ot-themeswitch { align-self: flex-start; margin-top: var(--space-5); }
  .ot-nav .ot-btn { margin-top: var(--space-4); }
}

/* ==========================================================================
   12. Hero
   ========================================================================== */

.ot-hero {
  padding-block: var(--section-y-tight) clamp(56px, 7vw, 88px);
  background: var(--surface-base);
}
.ot-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: clamp(36px, 4.5vw, 56px);
  align-items: center;
}
.ot-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.ot-hero__kicker {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.ot-hero__lead { max-width: 48ch; }
.ot-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

/* ==========================================================================
   13. Traject — five numbered steps divided by hairlines
   ========================================================================== */

.ot-step {
  padding-inline: var(--space-7);
  border-left: var(--border-hairline) solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.ot-step__num {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ot-step__num > span {
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  font-weight: 600;
  color: var(--text-accent);
  line-height: 1;
}
.ot-step__num > i {
  display: inline-block;
  width: 28px;
  height: 6px;
  background: var(--ot-lime);
  transform: skewX(var(--dash-skew));
}

/* ==========================================================================
   14. Inclusion matrix
   ========================================================================== */

.ot-matrix {
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--hairline);
}
.ot-matrix__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  border-bottom: var(--border-hairline) solid var(--hairline);
  flex-wrap: wrap;
}
.ot-matrix__legend {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  flex-wrap: wrap;
}
.ot-matrix__legend > span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-body);
}
.ot-matrix__swatch {
  display: inline-block;
  width: 20px;
  height: 6px;
  flex: none;
  background: var(--ot-lime);
  transform: skewX(var(--dash-skew));
}
.ot-matrix__swatch--hollow {
  background: transparent;
  border: var(--border-hairline) solid var(--hairline-strong);
}
/* 1px of hairline showing between columns is the divider. */
.ot-matrix__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1px;
  background: var(--hairline);
}
.ot-matrix__col {
  padding: var(--space-7) var(--space-8);
  background: var(--surface-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.ot-matrix__col:nth-child(even) { background: var(--surface-sunken); }
.ot-matrix__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ot-matrix__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
/* Four inclusion states: in / self / own / hand. */
.ot-matrix__row--in { color: var(--text-body); font-weight: 400; }
.ot-matrix__row--self { color: var(--text-muted); font-weight: 400; }
.ot-matrix__row--own { color: var(--text-strong); font-weight: 600; }
.ot-matrix__row--hand { color: var(--text-body); font-weight: 400; }
.ot-matrix__row--self .ot-bullet {
  background: transparent;
  border: var(--border-hairline) solid var(--hairline-strong);
}
.ot-matrix__row--own .ot-bullet { background: var(--ot-asphalt); }
[data-theme="light"] .ot-matrix__row--own .ot-bullet,
[data-surface="light"] .ot-matrix__row--own .ot-bullet { background: var(--ot-asphalt); }
.ot-matrix__row--hand .ot-bullet { background: var(--ot-grey-400); }
.ot-matrix__note {
  font-family: var(--font-mono);
  font-size: var(--text-label-xs);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-left: 6px;
}

/* The one dark anchor block inside the light Leasevormen section. */
.ot-ctastrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  background: var(--surface-base);
  color: var(--text-body);
  padding: var(--space-7) var(--space-10);
  flex-wrap: wrap;
}
.ot-ctastrip p { max-width: 62ch; font-size: var(--text-base); }

/* ==========================================================================
   15. Forms
   ========================================================================== */

.ot-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.ot-field__label {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ot-field__control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--hairline-strong);
  padding: 13px var(--space-4);
  transition: var(--hover-transition);
}
/* The inner input suppresses its own outline (below) so the indicator isn't
   drawn twice; the control carries it instead. A 1px border change alone is a
   thin target, so add a real ring — outline doesn't affect layout, so the
   field doesn't shift when it takes focus. */
.ot-field__control:focus-within {
  border-color: var(--focus-ring);
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.ot-field__control--select { padding: 12px var(--space-4); }
.ot-field[data-invalid="true"] .ot-field__control { border-color: #C46A5A; }

.ot-field input,
.ot-field select,
.ot-field textarea {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.ot-field textarea { resize: vertical; min-height: 4.5em; }
.ot-field select { appearance: none; cursor: pointer; }
.ot-field select option { color: var(--ot-asphalt); background: var(--ot-paper); }
.ot-field--mono input { font-family: var(--font-mono); }
.ot-field input::placeholder,
.ot-field textarea::placeholder { color: var(--text-placeholder); }

/* The field control already carries the focus ring; don't double it up. */
.ot-field input:focus-visible,
.ot-field select:focus-visible,
.ot-field textarea:focus-visible { outline: none; }

.ot-field__suffix {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--text-muted);
  flex: none;
}
.ot-field__caret {
  font-family: var(--font-mono);
  color: var(--text-accent);
  font-size: 12px;
  flex: none;
}
.ot-field__hint {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

.ot-fieldgrid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.ot-fieldgrid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/* Step progress */
.ot-progress {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.ot-progress__label,
.ot-progress__pct {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.ot-progress__track {
  flex: 1;
  height: 4px;
  background: var(--hairline-strong);
  position: relative;
  overflow: hidden;
}
/* On Chalk, --hairline-strong is too close to the surface to read as a track,
   so the filled portion loses its reference. Step down the grey ladder. */
[data-theme="light"] .ot-progress__track,
[data-surface="light"] .ot-progress__track { background: var(--ot-grey-300); }
.ot-progress__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  background: var(--ot-lime);
  transition: width var(--dur-slow) var(--ease-out);
}

/* Notices. Brick is the only seventh colour and is error-only. */
.ot-notice {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: 18px var(--space-5);
}
.ot-notice__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ot-notice__text { font-size: var(--text-xs); color: var(--text-body); }
/* Error summary: one link per invalid field, jumping straight to it. */
.ot-notice__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.ot-notice__list:empty { display: none; }
.ot-notice__list a {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ot-notice__list a:hover { color: var(--text-accent); }
/* The summary takes focus on a failed submit; it isn't a click target, so it
   only shows a ring when script has moved focus to it. */
.ot-notice[tabindex]:focus { outline: none; }
.ot-notice[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ot-notice--error {
  border: var(--border-hairline) solid #A03A2B;
  background: rgba(160, 58, 43, 0.07);
}
.ot-notice--error .ot-notice__label { color: #A03A2B; }
.ot-notice--error .ot-bullet { background: #A03A2B; }
.ot-notice--ok {
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--hairline);
}
.ot-notice--ok .ot-notice__label { color: var(--text-accent); }
.ot-notice__label {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
}

.ot-formfoot {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  border-top: var(--border-hairline) solid var(--hairline);
  padding-top: 26px;
}
.ot-formfoot--plain { border-top: none; padding-top: 0; }
.ot-formnote { font-size: var(--text-2xs); color: var(--text-body); }

[hidden] { display: none !important; }

/* Honeypot. Taken out of the flow rather than display:none — some bots skip
   display:none fields, and this still can't be seen, focused or reached by a
   screen reader (the wrapper carries aria-hidden and the input tabindex="-1"). */
.ot-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   16. Contact + terugbellen
   ========================================================================== */

.ot-splitgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(36px, 4.5vw, 56px);
  align-items: start;
}
.ot-callbackgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}
.ot-callbackgrid__form { grid-column: span 2; min-width: 0; }
@media (max-width: 900px) {
  .ot-callbackgrid__form { grid-column: auto; }
}
.ot-callbackgrid__aside {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  min-width: 0;
}

.ot-phone {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.ot-phone__number {
  font-family: var(--font-mono);
  font-size: var(--text-figure-sm);
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}
.ot-phone__hours {
  font-family: var(--font-mono);
  font-size: var(--text-label-xs);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--text-accent);
  text-align: right;
  line-height: 1.5;
}
.ot-tile--lime .ot-phone__number { color: var(--ot-asphalt); }
.ot-tile--lime .ot-phone__hours { color: var(--ot-lime-ink); }

.ot-bigfigure {
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  color: var(--ot-asphalt);
}

.ot-contactlinks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ot-contactlinks a { font-size: var(--text-sm); color: var(--text-strong); }
.ot-contactlinks a:hover { color: var(--text-accent); }

/* ==========================================================================
   17. Footer
   ========================================================================== */

.ot-footer {
  background: var(--surface-base);
  color: var(--text-body);
  border-top: var(--border-hairline) solid var(--hairline);
  padding: var(--section-y-tight) var(--gutter) var(--space-8);
}
.ot-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-13);
}
.ot-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(32px, 4vw, 48px);
}
.ot-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ot-footer__col a,
.ot-footer__col span:not(.ot-eyebrow) {
  font-size: 15px;
  color: var(--text-muted);
}
.ot-footer__col a:hover { color: var(--ot-lime); }
.ot-footer__blurb { font-size: var(--text-sm); color: var(--text-muted); max-width: 34ch; }
.ot-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  border-top: var(--border-hairline) solid var(--hairline);
  padding-top: var(--space-7);
}
.ot-footer__legal {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  color: var(--ot-grey-450);
}
.ot-footer__policies {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  /* Cancel the padding the links add below, so the footer bar keeps its rhythm. */
  margin-block: -5px;
}
/* At 13px these line boxes were 21px tall, under the 24px WCAG 2.2 minimum.
   They are standalone links in a row, so the inline-text exception does not
   apply to them. */
.ot-footer__policies a {
  font-size: 13px;
  color: var(--ot-grey-450);
  padding-block: 5px;
}
.ot-footer__policies a:hover { color: var(--ot-lime); }

/* ==========================================================================
   18. Narrow-screen adjustments
   ========================================================================== */

@media (max-width: 640px) {
  .ot-card { padding: var(--space-8) var(--space-6); }
  .ot-routecard { padding: var(--space-8) var(--space-6); min-height: 0; }
  .ot-matrix__head,
  .ot-matrix__col { padding: var(--space-6); }
  .ot-ctastrip { padding: var(--space-6); }
  .ot-step { padding-inline: var(--space-5); }
  .ot-claim { bottom: var(--space-5); padding: var(--space-5); }
  .ot-imgslot { padding: var(--space-5); }
  .ot-btn--lg { padding: 15px 26px; }
  .ot-btn--ghost.ot-btn--lg { padding: calc(15px - 1.5px) calc(26px - 1px); }
}

/* ==========================================================================
   19. WhatsApp button
   Behaviour and config live in assets/js/whatsapp.js.

   NOTE ON THE PALETTE: the fill is WhatsApp green (#25D366) by default, set
   inline from the config — a seventh hue, which the brand rules otherwise
   forbid. It is kept because the green is what makes the button recognisable
   at a glance. `color: '#C6F53F'` brings it inside the palette instead; the
   glyph colour follows automatically (see glyphColor() in whatsapp.js).
   ========================================================================== */

.ot-wa {
  position: fixed;
  bottom: 20px;
  /* Above the sticky header (50) with room left for anything added later. */
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
}
.ot-wa--right { right: 20px; align-items: flex-end; }
.ot-wa--left { left: 20px; align-items: flex-start; }

.ot-wa__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ot-wa__btn {
  order: 2;
  width: 56px;
  height: 56px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  /* Hover is a colour change only, per the brand's motion rules — the original
     widget scaled to 1.03. Restore that here if you prefer its behaviour. */
  transition: filter var(--dur-base) var(--ease-out);
}
/* No `color` here — the glyph colour is set inline from the config, and a
   hover rule would override it. */
.ot-wa__btn:hover { filter: brightness(1.08); }
.ot-wa__btn svg { display: block; width: 24px; height: 24px; }

/* The button floats over whichever section happens to be behind it, so a
   single-colour ring can't be guaranteed to contrast. Two concentric rings
   mean one of them always does. */
.ot-wa__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ot-asphalt),
              0 0 0 6px var(--ot-lime),
              0 2px 12px rgba(0, 0, 0, 0.2);
}

/* Decorative label. Revealed on hover AND on keyboard focus — the original
   was hover-only, which left keyboard users without it. */
.ot-wa__tooltip {
  order: 1;
  max-width: min(15rem, calc(100vw - 110px));
  padding: 7px 14px;
  border-radius: 16px;
  background: var(--ot-paper);
  color: var(--ot-asphalt);
  font-size: 13px;
  line-height: 1.35;
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
  transition: opacity var(--dur-slow) var(--ease-out) 0.4s,
              transform var(--dur-slow) var(--ease-out) 0.4s;
}
.ot-wa__inner:hover .ot-wa__tooltip,
.ot-wa__btn:focus-visible ~ .ot-wa__tooltip {
  opacity: 1;
  transform: translateX(0);
}
/* Closed: the note is longer than the label, so let it breathe and keep it up. */
.ot-wa[data-open="false"] .ot-wa__tooltip { white-space: normal; }

.ot-wa--left .ot-wa__tooltip { order: 3; transform: translateX(6px); }
.ot-wa--left .ot-wa__inner:hover .ot-wa__tooltip,
.ot-wa--left .ot-wa__btn:focus-visible ~ .ot-wa__tooltip { transform: translateX(0); }

.ot-wa__credit {
  font-size: var(--text-label-sm);
  color: var(--text-muted);
}
.ot-wa__credit a { color: inherit; }
.ot-wa__credit a:hover { color: var(--text-accent); }

@media (max-width: 640px) {
  .ot-wa { bottom: 16px; }
  .ot-wa--right { right: 16px; }
  .ot-wa--left { left: 16px; }
}

@media print {
  .ot-header, .ot-themeswitch, .ot-menutoggle, .ot-skip, .ot-wa { display: none !important; }
  .ot-section, body { background: #fff !important; color: #000 !important; }
}


/* ==========================================================================
   Legal pages (voorwaarden, privacy)

   One measured column of numbered articles. No new tokens: the article number
   is a mono eyebrow, the body is ot-prose, and each article sits on the same
   hairline the rest of the site uses as a divider.
   ========================================================================== */

.ot-legal { max-width: 74ch; }

.ot-legal__article {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-8);
  border-top: var(--border-hairline) solid var(--hairline);
}

.ot-legal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  counter-reset: ot-legal;
}
.ot-legal__list > li {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  gap: var(--space-4);
  font-size: var(--text-base);
  color: var(--text-body);
}
/* The figure is data, so it is mono — same rule as prices and terms. */
.ot-legal__list > li::before {
  counter-increment: ot-legal;
  content: counter(ot-legal) ".";
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--text-accent);
  padding-top: 0.35em;
}
/* Definition list variant: a. b. c. instead of 1. 2. 3. */
.ot-legal__list--alpha { counter-reset: ot-legal-alpha; }
.ot-legal__list--alpha > li::before {
  counter-increment: ot-legal-alpha;
  content: counter(ot-legal-alpha, lower-alpha) ".";
}

.ot-legal__single { font-size: var(--text-base); color: var(--text-body); }

/* Key/value rows — grondslagen, bewaartermijnen. A <dl>, not a <table>: the
   data is one-to-one, and a real table would need horizontal scroll on a
   phone. Two columns on wide screens, stacked below 700px, each row on the
   same hairline the articles use. */
.ot-legal__pairs {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0 var(--space-7);
}
.ot-legal__pairs > dt,
.ot-legal__pairs > dd {
  margin: 0;
  font-size: var(--text-base);
  border-top: var(--border-hairline) solid var(--hairline);
  padding: var(--space-4) 0;
}
.ot-legal__pairs > dt { color: var(--text-strong); font-weight: 600; }
.ot-legal__pairs > dd { color: var(--text-body); }

@media (max-width: 700px) {
  .ot-legal__pairs { grid-template-columns: 1fr; }
  /* The pair is one block now, so only the dt carries the rule and only the
     dd carries the bottom padding. */
  .ot-legal__pairs > dt { padding-bottom: 0; }
  .ot-legal__pairs > dd { border-top: 0; padding-top: 2px; }
}

.ot-legal__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--space-6);
}
.ot-legal__metaitem { display: flex; flex-direction: column; gap: 5px; }

/* A filled button inside a lime tile. Both theme's --action-fill would collide
   with the tile (Asphalt label on light, Lime fill on dark), and the .ot-tile--lime a
   rule pulls the label back to Asphalt — so pin the pair explicitly: Asphalt fill,
   Lime label, the same combination the header's accent button inverts to. */
.ot-tile--lime .ot-btn--fill {
  background: var(--ot-asphalt);
  color: var(--ot-lime);
}
.ot-tile--lime .ot-btn--fill:hover {
  background: #1E2620;
  color: var(--ot-lime-bright);
}

/* .ot-tile--lime is a flex COLUMN, so this has to say row explicitly —
   inheriting the column stacked (and centred) the copy above the button. */
.ot-legal__download {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  text-align: left;
  /* Air between the last article and the tile, so the box does not read as
     part of artikel 16. */
  margin-top: var(--space-14);
}

@media print {
  .ot-legal__download { display: none !important; }
  .ot-legal { max-width: none; }
}


/* ==========================================================================
   Dialog

   Native <dialog>, so the browser owns focus trapping, Esc and the inert
   background. Only the surface is styled here: a square-cornered card on the
   raised surface step, one hairline, no shadow — depth in this system comes
   from surface + hairline, never from a lift.
   ========================================================================== */

.ot-dialog {
  border: var(--border-hairline) solid var(--hairline-strong);
  background: var(--surface-raised);
  color: var(--text-body);
  padding: 0;
  width: min(560px, calc(100vw - var(--space-6)));
  max-height: calc(100vh - var(--space-8));
  margin: auto;
  /* Flex, so the panel is a flex item bounded by the dialog's CONTENT box.
     max-height:inherit on the panel would resolve against the border box and
     leave it 2px taller than its parent — enough for the dialog to grow its
     own scrollbar next to the body's, and to un-pin the close button. */
  display: flex;
  overflow: hidden;
}
.ot-dialog:not([open]) { display: none; }
.ot-dialog::backdrop {
  /* Asphalt at 72% rather than plain black: the backdrop should read as the
     brand's dark surface dimming the page, not as a grey scrim. */
  background: color-mix(in srgb, #0D100E 72%, transparent);
  backdrop-filter: blur(4px);
}

/* The panel is the positioning context for the close button, so it must NOT
   be the scroller: an absolutely-positioned child of a scroll container
   scrolls away with the content. Only the field area scrolls (below), which
   also keeps the heading and the submit row in place on short viewports. */
.ot-dialog__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding: var(--space-8);
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.ot-dialog--narrow { width: min(440px, calc(100vw - var(--space-6))); }
/* Nothing to scroll here: fewer elements, so tighten the rhythm. */
.ot-dialog--narrow .ot-dialog__panel { gap: var(--space-6); padding: var(--space-7); }

.ot-dialog__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-right: var(--space-8);
}
.ot-dialog__head .ot-dashes { margin-bottom: var(--space-2); }

.ot-dialog__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-y: auto;
  /* Without this a flex item refuses to shrink below its content height, so
     the panel would overflow instead of this area scrolling. */
  min-height: 0;
  /* Room for the focus ring on the last field, which would otherwise be
     clipped by the scroll edge. */
  padding: 2px;
  margin: -2px;
}

.ot-dialog__foot {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-top: var(--border-hairline) solid var(--hairline);
  padding-top: var(--space-6);
}

/* 44px hit target, per the minimum in the system. */
.ot-dialog__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  transition: var(--hover-transition);
}
.ot-dialog__close:hover { color: var(--text-accent); }

/* An .ot-arrowlink is an <a> everywhere else; as a dialog trigger it is a
   <button>, which brings its own UA styling that has to be reset. */
button.ot-arrowlink {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

/* The phone number inside the call dialog is the whole point of the dialog,
   so it steps up to the big-figure size. Mono, like every figure. */
.ot-phone--lg .ot-phone__number { font-size: clamp(30px, 5vw, 38px); }
.ot-phone--lg .ot-phone__hours { font-size: var(--text-label); }