/* Amped Productions — dark editorial photography site
   Fonts: Montserrat (display/headings), Inter (body) — client specified */

:root {
  --bg: #0C0C0C;
  --bg-alt: #161616;
  --ink: #FFFFFF;
  --cream: #F5F0E8;
  --muted: rgba(255, 255, 255, 0.62);
  --accent: #D4A84B;
  --border: rgba(255, 255, 255, 0.10);
  --overlay: rgba(0, 0, 0, 0.45);

  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --space-section: clamp(5rem, 10vw, 7.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 8px;

  /* z-scale */
  --z-sticky: 100;
  --z-drawer: 200;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

[hidden] { display: none !important; }

h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); }

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

.wrap {
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -3rem;
  background: var(--ink); color: var(--bg);
  padding: 0.5rem 1rem; border-radius: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem;
  text-decoration: none; z-index: calc(var(--z-drawer) + 1);
  transition: top 0.2s ease-out;
}
.skip-link:focus { top: 1rem; }

/* Scroll/focus target for "Go back to top" — see partials/nav.php. Zero-size and never
   sticky, so the fragment link actually has somewhere to scroll to. */
#top { display: block; height: 0; }
#top:focus { outline: none; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.2s cubic-bezier(0.25, 1, 0.5, 1),
              color 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn--pill {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.625rem 1.375rem;
}
.btn--pill:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--ink); }

.btn--solid {
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  padding: 0.875rem 1.75rem;
  font-size: 0.9375rem;
}
.btn--solid:hover { background: var(--cream); }

.link-accent {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.2rem;
  transition: color 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.link-accent:hover { color: var(--accent); }

/* ---------- Nav ---------- */

.site-nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(12, 12, 12, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease-out;
}
.site-nav.scrolled { border-bottom-color: var(--border); }

.site-nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.25rem;
}

.nav-brand {
  display: flex; align-items: center; gap: 0.625rem;
  text-decoration: none;
}
.nav-brand img { width: 34px; height: 40px; }
.nav-brand span {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
}

.nav-links {
  display: flex; align-items: center; gap: 1.75rem;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a:not(.btn) {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.8125rem; letter-spacing: 0.04em;
  color: var(--muted); text-decoration: none;
  transition: color 0.2s ease-out;
}
.nav-links a:not(.btn):hover { color: var(--ink); }

.nav-toggle {
  display: none;
  background: none; border: none; padding: 0.5rem; cursor: pointer;
}
.nav-toggle .bar {
  display: block; width: 22px; height: 2px; background: var(--ink);
  margin: 5px 0; transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s;
}

/* 768px is the narrowest viewport that still gets the desktop nav, and with six items
   plus the wordmark it is the tightest it ever gets. Keep every label on one line and
   close the gaps rather than letting "Over Ferry" and "CONTACT NOW" wrap. */
/* 768px is the narrowest viewport that still gets the desktop nav, and with five items
   plus the wordmark plus the CTA it is the tightest the row ever gets. Rather than let
   "Over Ferry" and "CONTACT NOW" wrap onto a second line, the wordmark drops back to the
   shutter mark alone — the brand guidelines allow the mark to stand by itself, and the
   link keeps its aria-label, so nothing is lost to a screen reader. */
@media (max-width: 61.9375rem) {
  .nav-brand span { display: none; }
  .nav-links { gap: 1.25rem; }
  .nav-links a:not(.btn) { white-space: nowrap; }
  .site-nav .btn--pill { white-space: nowrap; padding-inline: 1.125rem; }
}

@media (max-width: 47.9375rem) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start;
    gap: 0; padding: 0.5rem var(--gutter) 1.5rem;
    background: #0E0E0E;
    border-bottom: 1px solid var(--border);
    display: none; z-index: var(--z-drawer);
  }
  .nav-links.open { display: flex; }
  .site-nav:has(.nav-links.open) {
    background: #0E0E0E;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-links li { width: 100%; }
  .nav-links a:not(.btn) { display: block; padding: 0.875rem 0; font-size: 1rem; }
  .nav-links .btn { margin-top: 0.75rem; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero ---------- */

.hero { position: relative; overflow: hidden; }

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
  min-height: calc(100vh - 4.25rem);
}

.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.available-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}
.available-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}

/* Google score next to "beschikbaar voor werk". The whole hero-meta row wraps, so on a
   narrow phone the badge drops to its own line instead of pushing the layout wide. */
.rating-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.rating-badge .stars { color: var(--accent); }
.rating-badge strong { color: var(--ink); font-weight: 600; }
.rating-badge:hover { border-color: rgba(255, 255, 255, 0.6); color: var(--ink); }

.local-time {
  font-size: 0.8125rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.hero h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.375rem, 5.8vw, 5.25rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}
.hero h1 .line { display: block; }
.hero h1 .line--outline { color: rgba(255, 255, 255, 0.5); }

.hero-tagline {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--cream);
  margin-bottom: 2rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }

.hero-figure { position: relative; margin: 0; }
.hero-figure img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  max-height: 76vh;
}
.hero-figure figcaption {
  position: absolute; left: 1rem; bottom: 1rem;
  font-size: 0.75rem; color: rgba(255, 255, 255, 0.9);
  background: rgba(12, 12, 12, 0.55);
  backdrop-filter: blur(4px);
  padding: 0.3rem 0.7rem; border-radius: 999px;
}

@media (max-width: 59.9375rem) {
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; }
  .hero-figure img { max-height: none; aspect-ratio: 4 / 5; }
}

/* ---------- Marquee ---------- */

.marquee {
  border-block: 1px solid var(--border);
  overflow: hidden;
  padding-block: 0.875rem;
  white-space: nowrap;
}
/* Seamless loop — see partials/marquee.php for the full reasoning.
   inline-flex so the track shrink-wraps: -50% is half the CONTENT, not half the
   container. Spacing is NEVER a gap on the track, because a gap sits between items and
   is therefore not part of the repeating unit — half the track would land mid-gap and
   the loop would jump by half a gap on every pass. */
.marquee-track {
  display: inline-flex;
  animation: marquee 48s linear infinite;
  will-change: transform;
}
.marquee-group {
  display: flex; align-items: center;
  flex: 0 0 auto;
  /* Never narrower than the screen, so a short phrase list cannot leave a blank band
     scrolling past before the loop comes round. */
  min-width: 100vw;
  justify-content: space-around;
}
.marquee-track span {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.875rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  /* The trailing space belongs to the item, so it travels with it across the seam. */
  padding-inline-end: 3rem;
}
.marquee-track span b { color: var(--accent); font-weight: 700; margin-right: 3rem; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Sections ---------- */

.section { padding-block: var(--space-section); }
.section--alt { background: var(--bg-alt); }

.section-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 1rem;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
.section-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1;
}
.section-head h2 .en {
  display: block;
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.75rem;
}
.section-head .aside { font-size: 0.9375rem; color: var(--muted); max-width: 26rem; }

/* The right-hand column of a section head when it carries more than a line of intro:
   the slider's counter + buttons, the price section's btw switch. The control sits with
   the content it belongs to rather than floating next to the heading. */
.slider-head__side,
.price-head__side {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1.25rem; max-width: 26rem;
}
.price-head__side .aside { max-width: none; }

/* ---------- Project card (portfolio grid + automotive page) ----------
   The homepage 3-up that this component was born for is gone (replaced by the slider),
   but the card itself still carries /portfolio/ and /automotive/. */

.work-card {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius);
}
.work-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-card:hover img { transform: scale(1.035); }
.work-card figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem 1.25rem 1.125rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
}
.work-card .cat {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.25rem;
}
.work-card .title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.0625rem; color: var(--ink); line-height: 1.3;
}

/* ---------- Slider (homepage #werk) ----------
   Replaces the old Featured 3-up. Fixed-height, variable-width slides: every slide is
   --slide-h tall and takes the width its own photo asks for, so portrait and landscape
   shots sit side by side without a crop. The track is the scroll container — the page
   itself never scrolls sideways. */

.slider-section .section-head { align-items: flex-end; }

.slider-track {
  /* Align the first slide with the .wrap content edge, then bleed off the right. */
  --slider-inset: max(var(--gutter), (100% - 78rem) / 2 + var(--gutter));
  --slide-h: clamp(22rem, 62vh, 38rem);

  list-style: none;
  margin: 0;
  display: flex;
  /* Not `stretch`: a flex item stretched to the tallest slide would keep the width its
     own ratio asked for, and the photo inside would be cropped to fill the taller box.
     Centring keeps every slide at exactly its own ratio. */
  align-items: center;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-inline: var(--slider-inset);
  scroll-padding-inline: var(--slider-inset);
  padding-block: 0 1rem;

  /* A visible scrollbar is the affordance when JS is off. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.slider-track::-webkit-scrollbar { height: 6px; }
.slider-track::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); border-radius: 999px; }
.slider-track::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); border-radius: 999px; }
.slider-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  /* Width follows the photo's own ratio; the 88vw cap keeps an extreme panorama on
     screen, and because the height is derived from the width the ratio still holds. */
  width: min(calc(var(--slide-h) * var(--ar)), 88vw);
  margin: 0;
}
.slide img {
  width: 100%;
  height: 100%;
  /* No-op while the stored w/h match the file; a safety net if a photo is swapped. */
  object-fit: cover;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.slider-controls { display: flex; align-items: center; gap: 0.75rem; }
.slider-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}
.slider-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); border-color: var(--ink); }
.slider-btn:disabled { opacity: 0.35; cursor: default; }
.slider-count {
  font-size: 0.8125rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem; text-align: center;
}

.slider-more { margin: 1.5rem 0 0; }

/* A slide with a destination is a link; one that has none stays a plain image. */
.slide__link { display: block; width: 100%; height: 100%; border-radius: var(--radius); }
.slide__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.slide__link img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.slide__link:hover img { transform: scale(1.02); }

@media (max-width: 47.9375rem) {
  .slider-track {
    /* Tall enough that a 2:3 portrait is ~58vw wide — the next slide stays in view, which
       is what invites the swipe. A 3:2 landscape wants ~130vw and is capped at 88vw. */
    --slide-h: min(calc(58vw * 1.5), 60svh);
    gap: 0.75rem;
  }
  .slider-section .section-head { align-items: flex-start; }
  .slider-controls { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .slider-track { scroll-behavior: auto; }
}

/* ---------- Over Ferry ---------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.about-grid figure { margin: 0; }
.about-grid img {
  border-radius: var(--radius);
  aspect-ratio: 3 / 4; object-fit: cover; width: 100%;
}
.about-quote {
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.5;
  color: var(--cream);
  margin: 0 0 1.75rem;
}
.about-quote::before { content: "“"; color: var(--accent); }
.about-quote::after { content: "”"; color: var(--accent); }
.about-copy { max-width: 42.5rem; color: rgba(255, 255, 255, 0.82); }
.about-copy strong { color: var(--ink); }
.about-cta { margin-top: 2rem; }

@media (max-width: 59.9375rem) {
  .about-grid { grid-template-columns: 1fr; }
  .about-grid img { aspect-ratio: 4 / 5; }
}

/* ---------- Expertises (numbered — signature pattern) ---------- */

.expertise-list { list-style: none; margin: 0; padding: 0; }
.expertise-list li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1rem 2rem;
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.expertise-list li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.expertise-list .num {
  font-size: 0.8125rem; color: var(--muted);
  padding-top: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.expertise-list h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  line-height: 1.2;
}
.expertise-list h3 small {
  display: block;
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.875rem; color: var(--muted);
  letter-spacing: 0; text-transform: none; margin-top: 0.4rem;
}
.expertise-list .desc { color: rgba(255, 255, 255, 0.78); font-size: 1rem; }

@media (max-width: 47.9375rem) {
  .expertise-list li { grid-template-columns: 3rem minmax(0, 1fr); }
  .expertise-list .desc { grid-column: 2; }
}

/* ---------- Motivatie ---------- */

.motivatie { text-align: left; }
.motivatie .wrap { max-width: 56rem; }
.motivatie blockquote {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.625rem, 4vw, 2.625rem);
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
.motivatie blockquote em { color: var(--accent); font-style: normal; }
.motivatie .rule {
  width: 4.5rem; height: 3px; background: var(--accent);
  border: none; margin: 0 0 2rem;
}
.motivatie .support {
  margin-top: 1.75rem;
  max-width: 40rem;
  font-size: 1.0625rem; line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- Reviews ---------- */

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 1.25rem;
}
/* One review: auto-fit would stretch the single card to the full width and the quote
   would run as one thin line across the page. Give it a reading measure, and keep it on
   the left so its edge lines up with the section heading rather than floating away from
   it — the rest of the page is left-aligned editorial. */
.review-grid--single {
  grid-template-columns: minmax(0, 38rem);
  justify-content: start;
}
.review-card {
  background: var(--bg-alt);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  margin: 0;
}
.review-card blockquote {
  margin: 0; font-style: italic;
  font-size: 0.9875rem; color: var(--cream); line-height: 1.7;
  flex: 1;
}
.review-card .stars { color: var(--accent); font-size: 0.8125rem; letter-spacing: 0.2em; }
.review-card figcaption .name {
  display: block;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
}
.review-card figcaption .role { display: block; font-size: 0.8125rem; color: var(--muted); }

/* Google rating summary, right of the section head. Rendered only when Ferry filled
   in the rating fields in the CMS — see cms_google_rating(). */
.review-summary {
  display: flex; align-items: center; gap: 0.875rem;
  flex-wrap: wrap;
}
.review-summary__score {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.review-summary__meta { display: flex; flex-direction: column; gap: 0.125rem; }
.review-summary .stars { color: var(--accent); font-size: 0.875rem; letter-spacing: 0.18em; }
.review-summary__count { font-size: 0.8125rem; color: var(--muted); }
.review-summary__link { font-size: 0.8125rem; }

/* The reviews sit near the top of the page now, so on a phone they become one
   horizontal scroll-snap row instead of three stacked cards — otherwise the photos
   start three screens down. No JS: the row is a plain overflow container. */
@media (max-width: 47.9375rem) {
  .review-grid:not(.review-grid--single) {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    padding-bottom: 0.75rem;
    margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  }
  .review-grid:not(.review-grid--single)::-webkit-scrollbar { height: 4px; }
  .review-grid:not(.review-grid--single)::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); border-radius: 999px; }
  .review-grid:not(.review-grid--single) .review-card {
    /* Basis, not min-width: a flex item's min-width is a floor, so with an auto basis the
       card would still stretch to the full unwrapped width of its quote. */
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
  .review-summary { width: 100%; }
}

/* ---------- Prijzen (pricing cards — home #prijzen + automotive page) ---------- */

/* The visitor's btw switch. Hidden until main.js is running: the buttons do nothing on
   their own, and a dead control is worse than none — without JS the cards show the view
   the CMS picked, which is a complete price either way. */
.vat-switch { display: none; }
.js .vat-switch {
  display: inline-flex;
  padding: 0.25rem;
  gap: 0.25rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
}
/* On an alt-coloured section the control inverts with the cards (see .price-card). */
.js .section--alt .vat-switch { background: var(--bg); }
.vat-switch__btn {
  appearance: none;
  min-height: 2.75rem;                 /* 44px: a comfortable tap target on its own */
  padding: 0 1rem;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--muted);
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  transition: background 0.2s ease-out, color 0.2s ease-out;
}
.vat-switch__btn:hover { color: var(--cream); }
.vat-switch__btn.is-on {
  background: var(--accent); color: var(--bg);
}
.vat-switch__btn:focus-visible { outline-offset: 2px; }

/* Automotive: one package, so the switch follows the copy above the card. */
.price-solo__copy .vat-switch { margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .vat-switch__btn { transition: none; }
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex; flex-direction: column; gap: 0.875rem;
  margin: 0; padding: 2rem 1.75rem 1.75rem;
  background: var(--bg-alt);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius);
}
/* On an alt-coloured section the card inverts so it still lifts off the background. */
.section--alt .price-card { background: var(--bg); }
.price-card--featured { border-color: var(--accent); }
.price-card__tag {
  position: absolute; top: -0.75rem; left: 1.75rem;
  background: var(--accent); color: var(--bg);
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 999px;
}
.price-card .num {
  font-size: 0.8125rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.price-card h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.2;
}
.price-card__amount {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
  margin: 0.25rem 0 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1; letter-spacing: -0.02em;
  color: var(--ink);
}
.price-card__amount .from {
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.875rem; letter-spacing: 0; color: var(--muted);
}
.price-card__note { margin: 0; font-size: 0.8125rem; color: var(--muted); }
/* The btw label is the one bit of the note a visitor scans for, so lift it slightly
   out of the muted line rather than letting it read as fine print. */
.price-card__note .vat { color: rgba(255, 255, 255, 0.82); }
.price-card__desc { margin: 0.25rem 0 0; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.78); }
.price-card__features {
  list-style: none; margin: 0.5rem 0 0; padding: 1.25rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid; gap: 0.6rem;
  flex: 1;
}
.price-card__features li {
  position: relative; padding-left: 1.5rem;
  font-size: 0.9375rem; color: var(--cream); line-height: 1.55;
}
.price-card__features li::before {
  content: "✦"; position: absolute; left: 0; top: 0.2em;
  color: var(--accent); font-size: 0.75rem;
}
.price-card .btn { align-self: flex-start; margin-top: 0.75rem; }
.price-footnote {
  margin: 2rem 0 0; max-width: 46rem;
  font-size: 0.8125rem; color: var(--muted);
}

/* Single package next to its copy (automotive page). */
.price-solo {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.price-solo .section-head { display: block; margin-bottom: 1.25rem; }
.price-solo__copy p { max-width: 34rem; color: rgba(255, 255, 255, 0.78); }
@media (max-width: 59.9375rem) {
  .price-solo { grid-template-columns: 1fr; }
}

/* ---------- CTA ---------- */

.cta { position: relative; overflow: hidden; }
.cta .bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 62%;
}
.cta::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(12, 12, 12, 0.92) 20%, rgba(12, 12, 12, 0.55));
}
.cta .wrap {
  position: relative; z-index: 1;
  padding-block: clamp(6rem, 14vw, 10rem);
}
.cta h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.25rem, 6.5vw, 4.5rem);
  line-height: 1.02; text-transform: uppercase; letter-spacing: -0.015em;
  margin-bottom: 1.25rem;
}
.cta p { max-width: 32rem; color: var(--cream); margin-bottom: 2.25rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.cta-actions .alt { font-size: 0.9375rem; color: var(--muted); }
.cta-actions .alt a { color: var(--ink); text-decoration-color: var(--accent); }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--border); }

.footer-marquee { overflow: hidden; padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.footer-marquee .marquee-track { animation-duration: 72s; }
.footer-marquee .marquee-group { align-items: baseline; }
.footer-marquee span {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3rem, 9vw, 6rem);
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.14);
  line-height: 1;
}

.footer-main {
  display: flex; flex-wrap: wrap; gap: 2rem;
  justify-content: space-between; align-items: flex-start;
  padding-block: 2.5rem;
  border-top: 1px solid var(--border);
}
.footer-col .label {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.75rem;
}
.footer-col a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.footer-col a:hover { color: var(--ink); }
.footer-col ul { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.footer-col li { margin-bottom: 0.4rem; }
.footer-col address { font-style: normal; font-size: 0.9375rem; color: var(--muted); }

/* Copyright | (algemene voorwaarden) | back to top — wraps cleanly when the middle
   link appears after Ferry publishes the terms. */
.footer-base {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: center;
  padding-block: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem; color: var(--muted);
}
.footer-base a {
  color: var(--muted); text-decoration: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.footer-base a:hover { color: var(--ink); }

/* ---------- Veelgestelde vragen ---------- */

.faq-list {
  max-width: 52rem;
  border-top: 1px solid var(--border);
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.4;
  color: var(--ink);
  list-style: none;                     /* the default marker, replaced below */
}
.faq-item summary::-webkit-details-marker { display: none; }
/* A plus that becomes a minus. Built from the accent colour rather than an icon font,
   and marked aria-hidden by being CSS: the <details> element already tells a screen
   reader whether it is open. */
.faq-item summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.5rem; line-height: 1; color: var(--accent);
  transition: transform 0.2s ease-out;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:hover { color: var(--cream); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.faq-item__answer {
  padding: 0 2.5rem 1.5rem 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9375rem;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}

/* ---------- WhatsApp-knop ----------
   A pill rather than a bare circle: the label says what happens before the click, and it
   collapses to the icon alone on a phone, where the screen is the scarce thing. */

.wa-fab {
  position: fixed; right: var(--gutter);
  bottom: calc(1.5rem + var(--cookiebar-h, 0px) + env(safe-area-inset-bottom));
  z-index: calc(var(--z-drawer) - 1);
  display: inline-flex; align-items: center; gap: 0.625rem;
  min-height: 3.25rem; padding: 0 1.25rem;
  background: #25D366; color: #0C0C0C;
  border-radius: 999px; text-decoration: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.06em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), bottom 0.2s ease-out;
}
.wa-fab:hover { transform: translateY(-2px); }
.wa-fab__icon { flex: 0 0 auto; }

@media (max-width: 47.9375rem) {
  /* Icon only: a label here would sit on top of the photography it is floating over. */
  .wa-fab { padding: 0; width: 3.25rem; justify-content: center; }
  .wa-fab__label {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
  .wa-fab:hover { transform: none; }
}

/* ---------- Cookiemelding ----------
   A bar at the bottom rather than a full-screen overlay: it is a question, not a gate,
   and the photography behind it stays visible while the visitor answers. */

.cookiebar {
  position: fixed; inset: auto 0 0 0;
  z-index: var(--z-drawer);
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  padding: 1.25rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom));
}
.cookiebar__inner {
  max-width: 78rem; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.25rem;
}
.cookiebar__text { max-width: 44rem; }
.cookiebar__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.35rem;
}
.cookiebar p { margin: 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.78); }
.cookiebar a { color: var(--cream); text-decoration: underline; text-underline-offset: 0.25em; }
.cookiebar__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
}
/* Both answers are real buttons at a real size: "weigeren" hidden in small grey text
   next to a big green button is a dark pattern, and it is the one thing regulators
   actually check. */
.cookiebar__actions .btn { min-height: 2.75rem; }

/* A button that has to read as a footer link. */
.footer-link {
  appearance: none; background: none; border: 0; padding: 0;
  color: var(--muted); cursor: pointer;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.footer-link:hover { color: var(--ink); }
/* Reopening the melding needs JavaScript, so the link only exists once JS is running. */
.js-only { display: none; }
.js .js-only { display: inline-block; }

@media (max-width: 47.9375rem) {
  .cookiebar__inner { flex-direction: column; align-items: flex-start; }
  .cookiebar__actions { width: 100%; }
  .cookiebar__actions .btn { flex: 1 1 10rem; justify-content: center; }
}

/* ---------- Contact page ---------- */

.contact-hero { padding-block: clamp(3rem, 7vw, 5rem) var(--space-section); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact-grid > figure { margin: 0; position: sticky; top: 6rem; }
.contact-grid img {
  border-radius: var(--radius);
  aspect-ratio: 3 / 4; object-fit: cover; width: 100%;
}
.contact-intro h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1; margin-bottom: 1rem;
}
.contact-intro p { max-width: 34rem; color: var(--cream); margin-bottom: 2.5rem; }

.contact-form { display: grid; gap: 1.375rem; max-width: 40rem; }
.form-row { display: grid; gap: 1.375rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 35.9375rem) { .form-row { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.8125rem; letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-body); font-size: 1rem;
  padding: 0.8125rem 1rem;
  transition: border-color 0.2s ease-out;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D4A84B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, 0.48); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field .error-msg {
  display: none; font-size: 0.8125rem; color: #E8A9A0; margin-top: 0.4rem;
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #C96A5C; }
.field.invalid .error-msg { display: block; }

.form-note { font-size: 0.8125rem; color: var(--muted); }

.form-success {
  background: var(--bg-alt);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  color: var(--cream);
}

/* server-side validation failure (redirect back with ?fout=1) */
.form-error {
  background: rgba(201, 106, 92, 0.12);
  border: 1px solid #C96A5C;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0 0 1.75rem;
  color: #F2C4BC;
}

.contact-details {
  margin-top: var(--space-section);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 59.9375rem) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid > figure { position: static; order: -1; }
  .contact-grid img { aspect-ratio: 16 / 10; }
}

/* ---------- Reveal (enhance-only: visible without JS) ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .reveal-stagger.in > * { opacity: 1; transform: none; }
.js .reveal-stagger.in > *:nth-child(2) { transition-delay: 0.08s; }
.js .reveal-stagger.in > *:nth-child(3) { transition-delay: 0.16s; }
.js .reveal-stagger.in > *:nth-child(4) { transition-delay: 0.24s; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .work-card:hover img { transform: none; }
  .js .reveal, .js .reveal-stagger > * {
    opacity: 1; transform: none; transition: none;
  }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Portfolio — overzicht + projectpagina
   ========================================================================== */

.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }

.eyebrow {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 0.75rem;
}

.page-head__intro { color: var(--muted); max-width: 42rem; margin: 0; }

/* ---------- Filter tabs (server-side links, work without JS) ---------- */

.filter-bar {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.filter-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.125rem; border-radius: 999px;
  background: transparent; border: 1px solid var(--border);
  color: var(--cream); text-decoration: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.filter-btn:hover { border-color: var(--accent); color: var(--ink); }
.filter-btn.is-active {
  background: var(--cream); border-color: var(--cream); color: var(--bg);
}
.filter-count { font-size: 0.6875rem; opacity: 0.62; }
.filter-btn.is-active .filter-count { opacity: 0.72; }

.empty-state { color: var(--muted); padding-block: 2rem; }
.empty-state .link-accent { margin-left: 0.5rem; }

/* ---------- Portfolio grid ---------- */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: 1.125rem;
}
.portfolio-grid .work-card img { aspect-ratio: 4 / 3; }
.portfolio-grid .work-card a { display: block; text-decoration: none; color: inherit; }
.work-card a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.work-card .meta {
  display: block; margin-top: 0.25rem;
  font-size: 0.8125rem; color: var(--muted);
}
.work-card__noimg {
  display: block; aspect-ratio: 4 / 3; width: 100%;
  background: var(--bg-alt); border: 1px solid var(--border);
}

/* ---------- Project detail ---------- */

.breadcrumb { font-size: 0.8125rem; color: var(--muted); display: flex; gap: 0.5rem; flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

.project-meta {
  display: flex; flex-wrap: wrap; gap: 2rem 2.5rem;
  margin: 0; padding-top: 0.5rem;
}
.project-meta dt {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.25rem;
}
.project-meta dd { margin: 0; color: var(--cream); font-size: 0.9375rem; }

.project-cover img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; }

.project-intro { max-width: 42.5rem; }
.project-intro p { color: var(--cream); margin: 0 0 1.25rem; }
.project-intro p:first-child { font-size: 1.125rem; }

.project-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.125rem; }
.project-gallery figure { margin: 0; }
.project-gallery img {
  width: 100%; border-radius: var(--radius);
  aspect-ratio: 4 / 3; object-fit: cover;
}
/* First image of an odd-length gallery runs full width — editorial rhythm. */
.project-gallery figure:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.project-gallery figure:first-child:nth-last-child(odd) img { aspect-ratio: 16 / 9; }

.project-nav { border-top: 1px solid var(--border); padding-block: 2.5rem; }
.project-nav .wrap { display: flex; justify-content: space-between; gap: 1.5rem; }
.project-nav__link { text-decoration: none; max-width: 20rem; }
.project-nav__link--next { text-align: right; margin-left: auto; }
.project-nav__link .label {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.25rem;
}
.project-nav__link .title {
  font-family: var(--font-display); font-weight: 700;
  color: var(--ink); font-size: 1.0625rem; line-height: 1.3;
}
.project-nav__link:hover .title { color: var(--cream); }

.portfolio-cta { text-align: center; }
.portfolio-cta h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0 0 0.75rem;
}
.portfolio-cta p { color: var(--muted); max-width: 34rem; margin: 0 auto 2rem; }
.portfolio-cta__back { margin: 2rem 0 0; }

@media (max-width: 47.9375rem) {
  .project-gallery { grid-template-columns: 1fr; }
  .project-gallery figure:first-child:nth-last-child(odd) img { aspect-ratio: 4 / 3; }
  .project-nav .wrap { flex-direction: column; }
  .project-nav__link--next { text-align: left; margin-left: 0; }
  .project-meta { gap: 1.25rem 2rem; }
}

/* ==========================================================================
   Legal prose (/algemene-voorwaarden/)
   ========================================================================== */

.legal-meta { font-size: 0.8125rem; color: var(--muted); margin: 1rem 0 0; }

.legal-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); }

@media (min-width: 60rem) {
  .legal-layout { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); align-items: start; }
  .legal-toc { position: sticky; top: 6rem; }
  /* Long enough to scroll on its own on a short viewport, rather than clipping. */
  .legal-toc details { max-height: calc(100vh - 9rem); overflow-y: auto; }
  .legal-toc summary { cursor: default; }
  .legal-toc summary::marker { content: ""; }
}

.legal-toc details { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; }
.legal-toc summary {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
}
.legal-toc summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.legal-toc ol { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: toc; }
.legal-toc li { margin-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.45; }
.legal-toc a { color: var(--muted); text-decoration: none; }
.legal-toc a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }

.legal { max-width: 42rem; }
.legal h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.3;
  margin: 2.5rem 0 0.875rem;
  /* Clears the sticky nav when an anchor link jumps here. */
  scroll-margin-top: 5.5rem;
}
.legal h2:first-child { margin-top: 0; }
.legal p { color: rgba(255, 255, 255, 0.82); margin: 0 0 1rem; }
.legal ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.legal li {
  position: relative; padding-left: 1.5rem;
  color: rgba(255, 255, 255, 0.82); margin-bottom: 0.5rem;
}
.legal li::before {
  content: "✦"; position: absolute; left: 0;
  color: var(--accent); font-size: 0.75rem; top: 0.35em;
}

.legal-company { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 2rem; }
.legal-company dl {
  display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
  gap: 0.5rem 1.5rem; margin: 0;
}
.legal-company dt {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); padding-top: 0.15rem;
}
.legal-company dd { margin: 0; color: var(--cream); font-size: 0.9375rem; }
.legal-company a { color: var(--cream); text-decoration-color: var(--accent); }

.legal-cta { margin-top: 2.5rem; color: var(--muted); }

/* Terms get printed and filed. Give them ink-friendly contrast and drop the chrome. */
@media print {
  body { background: #FFF; color: #000; }
  .site-nav, .site-footer, .legal-toc, .legal-cta, .skip-link { display: none !important; }
  .legal, .legal p, .legal li, .legal-company dd { color: #000; max-width: none; }
  .legal h2 { color: #000; page-break-after: avoid; }
  .legal-company dt { color: #333; }
  .page-head { padding-block: 0 1rem; }
  .page-head h1, .page-head__intro, .legal-meta, .eyebrow { color: #000; }
  a { color: #000; }
}