/* ===========================================================
   MyVinyl — shared stylesheet
   Brand: #1d70b7 (primair blauw), #0c2e40 (navy), #e6a337 (amber — promo only)
   Font: Acumin Pro (Light / Regular / Italic / Bold / Bold Italic), loaded locally
   =========================================================== */

@font-face {
  font-family: "Acumin Pro";
  src: url("../brand-assets/fonts/Acumin-RPro.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Acumin Pro";
  src: url("../brand-assets/fonts/Acumin-ItPro.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Acumin Pro";
  src: url("../brand-assets/fonts/Acumin-BdPro.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Acumin Pro";
  src: url("../brand-assets/fonts/Acumin-BdItPro.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Acumin Pro";
  src: url("../brand-assets/fonts/acumin-pro-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand colors */
  --blue: #1d70b7;
  --blue-dark: #175a92;
  --blue-light: #eaf3fa;
  --navy: #0c2e40;
  --navy-soft: #143a4e;
  --amber: #e6a337;
  --amber-dark: #c9862064;

  /* neutrals — warm off-white to match brand paper tone */
  --cream: #faf7f1;
  --cream-deep: #f2ede2;
  --surface: #ffffff;
  --border: #e5e0d3;
  --border-strong: #d3ccb9;
  --ink: #16232b;
  --ink-muted: #58666d;
  --ink-faint: #8b9599;

  /* spacing tokens */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* elevation (navy-tinted, layered, low opacity) */
  --shadow-1: 0 1px 2px rgba(12, 46, 64, 0.06), 0 2px 6px rgba(12, 46, 64, 0.05);
  --shadow-2: 0 4px 10px rgba(12, 46, 64, 0.07), 0 12px 28px rgba(12, 46, 64, 0.09);
  --shadow-3: 0 8px 20px rgba(12, 46, 64, 0.10), 0 24px 56px rgba(12, 46, 64, 0.14);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-brand: 5px; /* shared radius for buttons + photo/image containers */

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Acumin Pro", "Helvetica Neue", Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 var(--sp-4);
  color: var(--navy);
}

h1 { font-size: clamp(2.1rem, 4vw + 1rem, 3.4rem); }
h2 { font-size: clamp(1.6rem, 2.2vw + 1rem, 2.35rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; }

p { margin: 0 0 var(--sp-4); color: var(--ink-muted); }

.eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--sp-3);
}

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

section { padding-block: var(--sp-9); }
@media (max-width: 640px) {
  section { padding-block: var(--sp-7); }
}
/* Over MyVinyl staat op een compacter ritme: 48px boven en onder elk blok,
   dus 96px tussenruimte. De andere pagina's houden het ruimere ritme. */
.page-waarom section { padding-block: var(--sp-7); }
.page-waarom .page-intro { padding-bottom: var(--sp-6); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* focus-visible everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.card:focus-visible {
  outline: 2.5px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ===================== Buttons ===================== */
/* Buttons: label fades out on hover while a pill-shaped arrow badge on the
   right edge expands to fill the button (adapted from the supplied
   GetStartedButton reference, restyled with the brand's own colors). */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.005em;
  padding: 0 66px 0 1.6em;
  border-radius: var(--radius-brand);
  border: 1.5px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.18s var(--ease-spring);
  will-change: transform;
}
.btn:active { transform: scale(0.97); }

.btn__label {
  position: relative;
  z-index: 1;
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out);
}
.btn:hover .btn__label { opacity: 0; transform: translateX(-10px); }

.btn__arrow {
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: 4px;
  width: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.4s var(--ease-spring), border-radius 0.4s var(--ease-out);
}
.btn__arrow svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.3s var(--ease-spring); }
.btn:hover .btn__arrow { width: calc(100% - 8px); border-radius: calc(var(--radius-brand) - 1px); }
.btn:hover .btn__arrow svg { transform: translateX(2px); }
.btn:hover .btn__arrow--download svg { transform: translateY(2px); }

.btn-primary {
  background: var(--blue);
  color: #fff;
}
.btn-primary .btn__arrow { background: var(--blue-dark); color: #fff; }

.btn-outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn-outline .btn__arrow { background: var(--navy); color: #fff; }

.btn-amber {
  background: var(--amber);
  color: var(--navy);
}
.btn-amber .btn__arrow { background: #d9922a; color: var(--navy); }

.btn-ghost {
  background: transparent;
  color: var(--blue);
  padding-inline: 0.2em;
}
.btn-ghost:hover { color: var(--blue-dark); }

.btn-sm { height: auto; padding: 0.55em 2.6em 0.55em 1.1em; font-size: 0.86rem; }
.btn-sm .btn__arrow { width: 1.8em; }
.btn-block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__label, .btn__arrow, .btn__arrow svg { transition: none; }
}

/* Hero CTA — pill button adapted from the supplied MotionButton reference:
   transparent at rest with just a blue circular badge (arrow icon) on the
   left; only on hover does that badge expand to fill the whole pill. */
.btn-hero-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 48px;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.005em;
  padding: 0 1.6em 0 calc(40px + 4px + 0.8em);
  border-radius: 999px;
  background: transparent;
  border: none;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  transition: transform 0.18s var(--ease-spring);
}
.btn-hero-cta:active { transform: scale(0.97); }
.btn-hero-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.btn-hero-cta__badge {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 40px;
  border-radius: 999px;
  background: var(--blue);
  z-index: 1;
  transition: width 0.45s var(--ease-spring);
}
.btn-hero-cta:hover .btn-hero-cta__badge { width: calc(100% - 8px); }

.btn-hero-cta__icon {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 2;
  transition: transform 0.45s var(--ease-spring);
}
.btn-hero-cta__icon svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn-hero-cta:hover .btn-hero-cta__icon { transform: translateX(3px); }

.btn-hero-cta__label {
  position: relative;
  z-index: 2;
  color: #fff;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .btn-hero-cta, .btn-hero-cta__badge, .btn-hero-cta__icon { transition: none; }
}

/* "Laat je zaak groeien" banner CTA — same Hero-knop, just the circle badge
   (and by extension its hover-expanded fill) in navy instead of blue. */
.cta-banner--bright .btn-hero-cta__badge { background: var(--navy); }

/* Hero CTA — navy variant for use on light surfaces (e.g. product cards):
   badge fills navy instead of blue, label reads navy at rest (not white)
   since there's no dark hero photo behind it here. Bordered with the same
   radius as the classic button, and the badge sits on the right edge. */
.btn-hero-cta--navy {
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-brand);
  padding: 0 calc(40px + 4px + 0.8em) 0 1.6em;
  font-size: 13px;
}
.btn-hero-cta--navy .btn-hero-cta__badge {
  left: auto;
  right: 4px;
  background: var(--navy);
}
.btn-hero-cta--navy:hover .btn-hero-cta__badge {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  border-radius: calc(var(--radius-brand) - 1.5px);
}
.btn-hero-cta--navy .btn-hero-cta__icon { left: auto; right: 4px; }
.btn-hero-cta--navy .btn-hero-cta__label { color: var(--navy); transition: color 0.35s var(--ease-out); }
.btn-hero-cta--navy:hover .btn-hero-cta__label { color: #fff; }
.btn-hero-cta--navy:focus-visible { outline-color: var(--navy); }
.btn-hero-cta:hover .btn-hero-cta__icon--download { transform: translateY(3px); }

@media (prefers-reduced-motion: reduce) {
  .btn-hero-cta--navy .btn-hero-cta__label { transition: none; }
}

/* Classic button — a plain background-color hover swap, no arrow badge and
   no label animation (the site's earlier, simpler button treatment). */
.btn-classic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.65em 1.4em;
  border-radius: var(--radius-brand);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: -0.005em;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.btn-classic:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.btn-classic-primary { background: var(--blue); color: #fff; }
.btn-classic-primary:hover { background: var(--blue-dark); }

.btn-classic-outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-classic-outline:hover { background: var(--navy); color: #fff; }

.card__actions .btn-classic { width: 100%; }

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

/* ===================== Header ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
}
/* Blur lives on its own layer (not an ancestor of .site-nav) — backdrop-filter
   on the header itself would create a containing block for the fixed mobile
   nav panel and break its full-viewport-height overlay. */
.site-header__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: blur(10px);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 84px;
}
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: 34px; width: auto; }
.site-header__logo .logo-light { display: none; }

/* Overlay variant — transparent over a full-height hero until the page is
   scrolled, then it gets the same solid header background as every other
   page. Opt-in via the .is-overlay modifier so inner pages (no hero image
   behind the nav) keep the plain sticky/opaque header untouched. */
.site-header.is-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  border-bottom-color: transparent;
}
.site-header.is-overlay .site-header__bg {
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.site-header.is-overlay.is-scrolled {
  border-bottom-color: var(--border);
}
.site-header.is-overlay.is-scrolled .site-header__bg { opacity: 1; }
/* :not(.is-open) — the mobile nav panel has its own solid cream background,
   so its links must stay navy even while the header itself is transparent. */
.site-header.is-overlay:not(.is-scrolled) .site-nav:not(.is-open) .site-nav__links a,
.site-header.is-overlay:not(.is-scrolled) .site-nav:not(.is-open) .lang-switch__trigger { color: #fff; }
.site-header.is-overlay:not(.is-scrolled) .site-nav:not(.is-open) .site-nav__links a::after,
.site-header.is-overlay:not(.is-scrolled) .site-nav:not(.is-open) .lang-switch__trigger::after { background: #fff; }
.site-header.is-overlay:not(.is-scrolled) .logo-dark { display: none; }
.site-header.is-overlay:not(.is-scrolled) .logo-light { display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__links a {
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--navy);
  padding: 0.4em 0.1em;
  position: relative;
}
.site-nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--blue);
  transition: right 0.25s var(--ease-out);
}
.site-nav__links a:hover::after,
.site-nav__links a[aria-current="page"]::after { right: 0; }
.site-nav__links a[aria-current="page"] { color: var(--blue); }

.lang-switch { position: relative; display: inline-flex; align-items: center; }
.lang-switch__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--navy);
  padding: 0.4em 0.1em;
  position: relative;
  cursor: default;
}
.lang-switch__trigger::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--blue);
  transition: right 0.25s var(--ease-out);
}
.lang-switch:hover .lang-switch__trigger::after,
.lang-switch:focus-within .lang-switch__trigger::after { right: 0; }

.lang-switch__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: var(--sp-2);
  min-width: 96px;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  padding: var(--sp-2);
  opacity: 0;
  transform: translate(-50%, 6px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  z-index: 60;
}
/* Onzichtbare brug over de ruimte tussen "NL" en het menu, zodat de muis
   onderweg naar een taal de hover niet verliest. */
@media (min-width: 901px) {
  .lang-switch__menu::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 100%;
    height: calc(var(--sp-2) + 4px);
  }
}
/* Alleen op desktop: op mobiel staat het menu als vaste rij in het
   fullscreen menu, en een tik telt daar ook als :hover/:focus-within.
   Zonder deze media query schoof de rij bij elke tik 50% naar links. */
@media (min-width: 901px) {
  .lang-switch:hover .lang-switch__menu,
  .lang-switch:focus-within .lang-switch__menu {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }
}
.lang-switch__menu :is(a, span) {
  padding: 0.4em 0.6em;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-muted);
}
.lang-switch__menu a { transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out); }
.lang-switch__menu a:hover,
.lang-switch__menu a:focus-visible { color: var(--navy); background: var(--cream); }
.lang-switch__menu span.is-active { color: var(--blue); background: var(--blue-light); }

.header-actions { display: flex; align-items: center; gap: var(--sp-4); }

/* Slim, chrome-free icon (no box/border) so it reads as a mark rather than a
   button — colour adapts with the rest of the header (white over the
   transparent hero, navy everywhere else), and turns navy once the fullscreen
   menu is open since that panel is always solid cream underneath it. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-spring), opacity 0.2s var(--ease-out), background-color 0.25s var(--ease-out);
}
.site-header.is-overlay:not(.is-scrolled) .container:not(:has(.site-nav.is-open)) .nav-toggle span { background: #fff; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Fullscreen mobile menu — grows in from the top-right corner (where the
   toggle sits) via a clip-path circle reveal, rather than the boxed dropdown
   panel used at wider widths. Logo + toggle float above it (z-index) so they
   stay visible, recoloured to read against the panel's solid fill. */
.site-header__logo { position: relative; z-index: 2; }
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--cream);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: calc(84px + var(--sp-6)) var(--gutter) var(--sp-6);
    gap: var(--sp-7);
    clip-path: circle(0% at 100% 0%);
    transition: clip-path 0.6s var(--ease-out);
    pointer-events: none;
    overflow-y: auto;
  }
  .site-nav.is-open {
    clip-path: circle(150% at 100% 0%);
    pointer-events: auto;
  }
  .site-nav__links { flex-direction: column; align-items: center; text-align: center; gap: var(--sp-6); }
  .site-nav__links a { font-size: 1.3rem; }
  .header-actions { flex-direction: column; align-items: center; gap: var(--sp-5); width: auto; }
  .lang-switch { align-self: center; }

  /* Language list — flat and horizontal under the button, not a dropdown. */
  .lang-switch__trigger { display: none; }
  .lang-switch__menu {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    flex-direction: row;
    justify-content: center;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: 0.9em;
  }
  .lang-switch__menu :is(a, span) { padding: 0.2em 0.1em; opacity: 0.55; }
  .lang-switch__menu a:hover, .lang-switch__menu a:focus-visible { background: none; opacity: 1; }
  .lang-switch__menu span.is-active { background: none; }

  /* Force the blue logo + navy toggle once the panel is open, regardless of
     the transparent-hero state underneath. */
  .site-header.is-overlay:not(.is-scrolled):has(.site-nav.is-open) .logo-dark { display: block; }
  .site-header.is-overlay:not(.is-scrolled):has(.site-nav.is-open) .logo-light { display: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .site-nav { transition: none; }
}

/* ===================== Hero ===================== */
.hero-media {
  position: relative;
  border-radius: var(--radius-brand);
  overflow: hidden;
  background: var(--cream-deep);
  box-shadow: var(--shadow-2);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 46, 64, 0.55), rgba(12, 46, 64, 0) 55%);
  mix-blend-mode: multiply;
}

.hero {
  padding-top: var(--sp-8);
}
.hero__heading { max-width: 20ch; }
.hero__lede { max-width: 46ch; font-size: 1.1rem; }
.hero__cta-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); }

/* ===================== Full-width hero (image + brand-color scrim) ===================== */
.hero-full {
  position: relative;
  height: 100vh;
  /* `svh` (small viewport height) stays fixed regardless of the mobile
     browser's address bar showing/hiding on scroll — `dvh` tracks that live,
     which was resizing this section (and its cover-fit background image)
     mid-scroll, reading as a jarring "zoom". */
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}
.hero-full__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-full__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Desktop only: the FEEL IT. / LOVE IT. floor variants sit on top of the
   WALK IT. base image and cross-fade in sync with the heading carousel. */
.hero-full__variant {
  position: absolute;
  inset: 0;
  display: none;
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
}
.hero-full__variant.is-active { opacity: 1; }
.hero-full__variant.no-transition { transition: none; }
@media (min-width: 901px) {
  .hero-full__variant { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-full__variant { display: none; }
}
.hero-full__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(125deg, rgba(12,46,64,0.58) 0%, rgba(12,46,64,0.32) 35%, rgba(12,46,64,0.16) 65%, rgba(12,46,64,0.08) 100%),
    linear-gradient(180deg, rgba(12,46,64,0.8) 0%, rgba(12,46,64,0.48) 18%, rgba(12,46,64,0.15) 32%, rgba(12,46,64,0) 44%);
}
@media (max-width: 700px) {
  /* The source photo's dog sits mid-frame once `cover` fills a tall mobile
     viewport (no vertical crop headroom at that aspect ratio); scaling up
     from a bottom transform-origin creates that headroom, trimming the empty
     room/shelf area off the top so the dog lands centred in the frame while
     the floor stays fully visible beneath it. */
  .hero-full__bg img { transform: scale(1.12); transform-origin: center bottom; }
  /* Plain top-to-bottom fade — strongest at the very top (logo + hamburger),
     smoothly and continuously lighter all the way down. */
  .hero-full__scrim { background: linear-gradient(180deg, rgba(12,46,64,0.85) 0%, rgba(12,46,64,0) 100%); }
}
.hero-full .container { position: relative; z-index: 2; width: 100%; }
.hero-full__content { max-width: 50rem; padding-block: var(--sp-8); }
.hero-full__content h1 { color: #fff; font-size: clamp(2.8rem, 5vw + 1.4rem, 5.25rem); }
.hero-full__content .hero__lede {
  color: rgba(255,255,255,0.86);
  max-width: 700px;
}
.hero-full__btn-outline { border-color: #fff; color: #fff; }
.hero-full__btn-outline:hover { border-color: var(--navy); }

.hero__lede--mobile { display: none; }
@media (max-width: 700px) {
  .hero-full__content { text-align: center; margin-inline: auto; transform: translateY(60px); }
  .hero-full__content h1 { font-size: clamp(3rem, 15vw, 4.5rem); }
  .hero__lede--desktop { display: none; }
  .hero__lede--mobile { display: block; margin-inline: auto; }
  .hero-full__content .hero__cta-row { justify-content: center; }
}

/* Bigger single-line variant for the "[word] IT." carousel heading */
.hero__heading--carousel {
  font-size: clamp(3.75rem, 9vw + 1rem, 8rem);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .hero__heading--carousel { white-space: normal; }
}

/* Word carousel — js/main.js swaps the text on an interval and toggles
   .is-leaving / .is-entering so the word slides+fades out, then in. */
.word-carousel {
  display: inline-block;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.word-carousel.is-leaving { opacity: 0; transform: translateY(-20px); }
.word-carousel.is-entering { opacity: 0; transform: translateY(20px); }
@media (prefers-reduced-motion: reduce) {
  .word-carousel { transition: none; }
}

/* Scroll-down cue, centered at the bottom of the hero */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--sp-6);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  padding: var(--sp-2);
  transition: color 0.2s var(--ease-out);
}
.hero-scroll-cue:hover { color: #fff; }
/* Lage telefoonschermen: de gecentreerde (en 60px verlaagde) hero-inhoud komt
   daar tegen de cue aan. Onder 640px hoogte laten we de cue weg; wie zo'n
   klein scherm heeft, ziet de volgende sectie toch al bijna. */
@media (max-width: 700px) and (max-height: 640px) {
  .hero-scroll-cue { display: none; }
}
.hero-scroll-cue__label {
  font-family: "Acumin Pro", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-scroll-cue__icon {
  width: 20px;
  height: 20px;
  animation: scrollCueBounce 1.8s ease-in-out infinite;
}
@keyframes scrollCueBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue__icon { animation: none; }
}

/* ===================== Reveal animations (word-by-word slide-up) ===================== */
/* Shared by headings and body copy alike. js/main.js splits the element into
   one <span class="word" style="--index:N"> per word, then an
   IntersectionObserver adds .is-visible so each word fades + slides up in a
   staggered sequence once the element scrolls into view (or immediately, for
   anything already in view on load, e.g. the hero lede). */
.reveal-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(0.03s * var(--index));
}
.reveal-words.is-visible .word { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal-words .word { opacity: 1; transform: none; transition: none; }
}

/* ===================== Section headers ===================== */
/* Heading above, intro paragraph below across the container's full width
   (a side-by-side split squeezed the intro into a narrow, tall column). */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}
.section-head h2 { margin-bottom: 0; }
.section-head p { margin: 0; max-width: none; }
/* Opt-in line break that only applies on desktop; on mobile the text runs on. */
.br-desktop { display: none; }
@media (min-width: 901px) { .br-desktop { display: inline; } }

/* ===================== Collection tiles (homepage) ===================== */
.collection-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 700px) { .collection-tiles { grid-template-columns: 1fr; } }

.collection-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-brand);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  transition: transform 0.3s var(--ease-spring);
}
.collection-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.collection-tile:hover img { transform: scale(1.06); }
.collection-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,46,64,0.88) 0%, rgba(12,46,64,0.32) 55%, rgba(12,46,64,0.1) 100%);
}
.collection-tile__arrow {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.3s var(--ease-spring), background-color 0.2s var(--ease-out);
}
.collection-tile__arrow svg { width: 18px; height: 18px; }
.collection-tile:hover .collection-tile__arrow {
  transform: translate(3px, -3px);
  background-color: var(--blue);
  border-color: var(--blue);
}
.collection-tile__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--sp-6);
  color: #fff;
}
.collection-tile__label {
  display: block;
  font-size: clamp(2rem, 2.8vw + 1.1rem, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.collection-tile__meta {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.82);
  margin-top: 0.1em;
}
.collection-tile__types {
  position: absolute;
  bottom: var(--sp-5);
  right: var(--sp-5);
  z-index: 2;
  display: flex;
  gap: 0.6em;
}
.collection-tile__types img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* ===================== Product cards ===================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 1080px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-brand);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.25s var(--ease-spring);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-2);
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
  pointer-events: none;
}
.card:hover::after { opacity: 1; }

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-deep);
}
.card__media-link { display: block; width: 100%; height: 100%; }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.45s var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.04); }
.card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,46,64,0.35), rgba(12,46,64,0) 45%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.card__tags {
  position: absolute;
  top: var(--sp-3); left: var(--sp-3);
  z-index: 2;
  display: flex;
  gap: 0.4em;
}
.card__tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.92);
  color: var(--navy);
  padding: 0.35em 0.75em;
  border-radius: 999px;
}
.card__tag--promo { background: var(--amber); color: #fff; }

.card__body { padding: var(--sp-5); }
.card__name { font-weight: 700; font-size: 1.05rem; color: var(--navy); margin-bottom: 0.15em; }
.card__meta { font-size: 0.88rem; color: var(--ink-muted); margin-bottom: 0.15em; }
.card__specs {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.15em;
}
.card__sku { font-size: 0.76rem; color: var(--ink-faint); margin-bottom: var(--sp-4); }
.card__actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.card__actions .btn { width: 100%; padding: 0.6em 2.6em 0.6em 0.8em; font-size: 0.85rem; }
.card__actions .btn-hero-cta { width: 100%; display: flex; }
.card__actions .btn-hero-cta .btn-hero-cta__label { flex: 1; text-align: center; }

/* ===================== Trust strip ===================== */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  justify-content: center;
  padding-block: var(--sp-6);
}
.trust-strip li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.95rem;
}
.trust-strip svg {
  width: 22px; height: 22px; flex-shrink: 0;
  color: var(--blue);
}

/* ===================== CTA banner ===================== */
.cta-banner {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-7);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(29,112,183,0.45), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(29,112,183,0.22), transparent 50%);
}
.cta-banner__inner { position: relative; }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: rgba(255,255,255,0.78); margin-inline: auto; }
.cta-banner strong { color: #fff; }

/* Bright flat-blue variant — no gradient overlay */
.cta-banner--bright { background: var(--blue); }
.cta-banner--bright::before { display: none; }

/* ===================== Testimonial ===================== */
.testimonial {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
  box-shadow: var(--shadow-1);
  position: relative;
}
.testimonial p.quote {
  font-size: 1.3rem;
  font-style: italic;
  color: var(--navy);
  margin-bottom: var(--sp-3);
  line-height: 1.5;
}
.testimonial .who { font-weight: 700; color: var(--ink-muted); font-size: 0.9rem; }

/* ===================== Footer ===================== */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.82);
  margin-top: var(--sp-9);
}
.site-footer .container {
  padding-block: var(--sp-8);
  display: grid;
  grid-template-columns: 1.3fr 1.4fr 1fr;
  gap: var(--sp-7);
}
@media (max-width: 800px) {
  .site-footer .container { grid-template-columns: 1fr; gap: var(--sp-6); text-align: center; }
  .site-footer .container > div,
  .site-footer .container > nav { display: flex; flex-direction: column; align-items: center; }
  .footer-langs, }
.site-footer__logo img { height: 30px; margin-bottom: var(--sp-4); }
.site-footer address { font-style: normal; line-height: 1.9; font-size: 0.94rem; }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6em; }
.site-footer nav a { font-size: 0.94rem; transition: transform 0.2s var(--ease-out); display: inline-block; }
.site-footer nav a:hover { transform: translateX(3px); color: #fff; }
.footer-heading { font-weight: 700; color: #fff; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.footer-langs { display: flex; gap: 0.8em; flex-wrap: wrap; font-weight: 700; font-size: 0.85rem; }
.footer-langs :is(a, span) { opacity: 0.55; }
.footer-langs a { transition: opacity 0.2s var(--ease-out); }
.footer-langs a:hover, .footer-langs a:focus-visible { opacity: 1; color: #fff; }
.footer-langs span.is-active { opacity: 1; color: #fff; }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: 40px;
  font-size: 0.82rem;
}
.site-footer__bottom .container {
  padding-block: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
@media (min-width: 801px) {
  .site-footer__bottom .container { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-footer__credit { justify-self: end; }
}
@media (max-width: 800px) {
  .site-footer__bottom .container { flex-direction: column; justify-content: center; text-align: center; }
}
.site-footer__bottom .container > .site-footer__legal { display: flex; flex-direction: row; justify-content: center; gap: var(--sp-5); }
.site-footer .site-footer__legal a { font-size: inherit; }
.site-footer .site-footer__legal a:hover { transform: none; }
.site-footer__legal a { color: rgba(255,255,255,0.6); transition: color 0.25s var(--ease-out); }
.site-footer__legal a:hover, .site-footer__legal a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__copyright { opacity: 0.6; }
.site-footer__credit {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  color: rgba(255,255,255,0.6);
  transition: color 0.25s var(--ease-out);
}
.site-footer__credit:hover { color: #fff; }
.site-footer__credit img {
  height: 13px;
  width: auto;
  opacity: 0.6;
  transition: opacity 0.25s var(--ease-out);
}
.site-footer__credit:hover img { opacity: 1; }

/* ===================== Breadcrumb ===================== */
.breadcrumb {
  font-size: 0.88rem;
  color: var(--ink-muted);
  padding-top: var(--sp-6);
}
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .current { color: var(--navy); font-weight: 700; }

.page-intro { padding-bottom: var(--sp-3); }
.page-intro h1 { margin-bottom: var(--sp-3); }
.page-intro p { max-width: none; font-size: 1.08rem; }
.page-intro p + p { margin-top: var(--sp-3); }
.page-intro .page-intro__lead { font-size: 1.35rem; font-weight: 600; color: var(--navy); line-height: 1.45; }
@media (max-width: 640px) { .page-intro .page-intro__lead { font-size: 1.15rem; } }

/* ===================== Collecties layout ===================== */
.collecties-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--sp-7);
  align-items: start;
}
@media (max-width: 900px) {
  .collecties-layout { grid-template-columns: 1fr; }
}

.filters-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  position: sticky;
  top: 104px;
  box-shadow: var(--shadow-1);
}
@media (max-width: 900px) {
  .filters-panel { position: static; }
}
.filters-panel h3 {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--sp-3);
}
.filter-group { margin-bottom: var(--sp-6); }
.filter-group:last-of-type { margin-bottom: var(--sp-5); }
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.4em 0;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}
.checkbox-row input {
  width: 18px; height: 18px;
  accent-color: var(--blue);
  cursor: pointer;
}
.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.results-count { font-weight: 700; color: var(--navy); }
.sort-select {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.6em 1em;
  background: var(--surface);
  cursor: pointer;
}

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

.card[hidden] { display: none; }
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-8);
  color: var(--ink-muted);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
}

/* ===================== Downloads ===================== */
.search-bar {
  display: flex;
  align-items: center;
  gap: 0.7em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.9em 1.2em;
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-1);
}
.search-bar svg { width: 20px; height: 20px; color: var(--ink-faint); flex-shrink: 0; }
.search-bar input {
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 1rem; width: 100%; color: var(--ink);
}

.filter-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.filter-chip {
  padding: 0.55em 1.2em;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--navy);
  cursor: pointer;
  transition: transform 0.2s var(--ease-spring);
}
.filter-chip:hover { transform: translateY(-2px); }
.filter-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

.download-section { margin-bottom: var(--sp-8); }
.download-section h2 { font-size: 1.25rem; margin-bottom: var(--sp-4); }
.download-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.download-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  transition: transform 0.2s var(--ease-spring);
}
.download-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.download-row__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--blue-light);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.7rem;
  flex-shrink: 0;
}
.download-row__info { flex: 1; min-width: 0; }
.download-row__name { font-weight: 700; color: var(--navy); }
.download-row__meta { font-size: 0.85rem; color: var(--ink-muted); }
/* Taalkeuze bij de technische fiches: één document per taal. */
.download-langs { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
.download-lang {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.7em;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.download-lang:hover,
.download-lang:focus-visible { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (max-width: 700px) { .download-langs { justify-content: flex-start; } }

/* Mobile — drop the preview thumbnail and the button's text label so the
   document name gets the room, left-aligned; only the download icon remains. */
@media (max-width: 700px) {
  .download-row__preview { display: none; }
  .download-row .btn-classic { padding: 0.65em; }
  .download-row .btn-classic span { display: none; }
  /* Taalknoppen onder de documentnaam in plaats van ernaast. */
  .download-row { flex-wrap: wrap; }
  .download-row__info { flex: 1 1 100%; }
  .download-langs { flex: 1 1 100%; justify-content: flex-start; }
}


/* ===================== Forms (contact / offerte) ===================== */
.form-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } }

.field { margin-bottom: var(--sp-5); }
.field label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
  margin-bottom: 0.5em;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: 0.85em 1em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: transform 0.15s var(--ease-out);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue);
  outline: none;
}
.field textarea { resize: vertical; min-height: 120px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.radio-group { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.radio-chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.65em 1.1em;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  font-weight: 700; font-size: 0.9rem;
  color: var(--navy);
  cursor: pointer;
  transition: transform 0.2s var(--ease-spring);
}
.radio-chip:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; }
.radio-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-chip:hover { transform: translateY(-2px); }

.contact-info-card {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
  box-shadow: var(--shadow-2);
}
.contact-info-card h3 { color: #fff; }
.contact-info-card ul { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.contact-info-card li { display: flex; gap: 0.8em; align-items: flex-start; font-size: 0.95rem; }
.contact-info-card svg { width: 20px; height: 20px; color: #6fa8d6; flex-shrink: 0; margin-top: 0.15em; }
.contact-info-card a:hover { text-decoration: underline; }

.form-success {
  display: none;
  background: var(--blue-light);
  border: 1.5px solid var(--blue);
  color: var(--navy);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  font-weight: 700;
  margin-bottom: var(--sp-5);
}
.form-success.is-visible { display: block; }

/* ===================== Over ons page ===================== */
.split-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
@media (max-width: 900px) { .split-block { grid-template-columns: 1fr; } }
.story p:last-child { margin-bottom: 0; }
.split-block strong { color: var(--navy); }
.signature { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-5); }
.signature__name { font-weight: 700; color: var(--navy); }
.signature__line { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
@media (max-width: 900px) { .mv-grid { grid-template-columns: 1fr; gap: var(--sp-7); } }
.mv-grid__col > p:last-child { margin-bottom: 0; }
.mv-grid .mv-grid__label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.mv-grid .mv-grid__lead { font-size: 1.6rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; margin-bottom: var(--sp-5); text-wrap: balance; }
@media (max-width: 640px) { .mv-grid .mv-grid__lead { font-size: 1.3rem; } }
.mv-grid .mv-grid__close { font-weight: 700; margin-top: var(--sp-5); }

/* Missie & visie: donkerblauw vlak over de volledige breedte */
.page-waarom .mv-section--navy { background: var(--navy); color: rgba(255,255,255,0.72); padding-block: var(--sp-9); margin-block: var(--sp-7); }
.mv-section--navy .mv-grid__label { color: #7fb6e3; }
.mv-section--navy .mv-grid__lead { color: #fff; }
.mv-section--navy p { color: rgba(255,255,255,0.78); }
.mv-section--navy strong { color: #fff; }
.mv-section--navy .mv-grid__close { color: #7fb6e3; }
@media (min-width: 901px) {
  .mv-section--navy .mv-grid__col + .mv-grid__col { border-left: 1px solid rgba(255,255,255,0.16); padding-left: var(--sp-8); }
  .mv-section--navy .mv-grid { gap: var(--sp-8); }
}

.split-block .hero-media { aspect-ratio: 4/3; }

/* Waarom MyVinyl: foto volgt op desktop de hoogte van de tekst ernaast */
.story-figure { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.story-figure__media { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.story-figure__media:hover .product-gallery__zoom,
.story-figure__media:focus-visible .product-gallery__zoom { opacity: 1; transform: translateY(0); }
.story-figure__media:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.story-figure__media .product-gallery__zoom { z-index: 1; }
@media (min-width: 901px) {
  .split-block--story { align-items: stretch; }
  .split-block--story .story-figure__media { aspect-ratio: auto; flex: 1; min-height: 360px; }
  .split-block--story .story-figure__media img { position: absolute; inset: 0; }
}
.lightbox__slide--captioned { margin: 0; flex-direction: column; gap: var(--sp-4); }
.lightbox__slide--captioned img { max-height: 72vh; }
.lightbox__caption { color: rgba(255,255,255,0.8); font-size: 0.92rem; text-align: center; max-width: 60ch; }

.timeline { border-left: 2px solid var(--border-strong); padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-6); }
.timeline-item { position: relative; }
.timeline-item::before {
  content: "";
  position: absolute; left: calc(var(--sp-6) * -1 - 6px);
  top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 2px var(--blue);
}
.timeline-item .year { font-weight: 700; color: var(--blue); font-size: 0.85rem; letter-spacing: 0.06em; }

/* ===================== USP / feature grid (homepage) ===================== */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 900px) { .usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .usp-grid { grid-template-columns: 1fr; } }
.usp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-1);
  transition: transform 0.25s var(--ease-spring);
}
.usp-card:hover { transform: translateY(-4px); }
.usp-card__icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: var(--blue-light);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4);
}
.usp-card__icon svg { width: 26px; height: 26px; }
.usp-card h3 { margin-bottom: var(--sp-2); font-size: 1.05rem; }
.usp-card p { font-size: 0.92rem; margin: 0; }

/* USP row — bordered feature grid with directional hover glow, adapted from
   the supplied FeaturesSectionWithHoverEffects reference. Real brand icon
   badges, same copy/colors as before — only the layout/interaction changed. */
/* 12 items: three rows of 4 on desktop, two columns below that (row
   separators only on the wider layouts). */
.usp-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1000px) { .usp-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .usp-row { grid-template-columns: 1fr; } }

.usp-item {
  position: relative;
  overflow: hidden;
  padding: var(--sp-7) var(--sp-6);
}
@media (min-width: 1001px) {
  .usp-item:nth-child(-n+8) { border-bottom: 1px solid var(--border); }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .usp-item:nth-child(-n+10) { border-bottom: 1px solid var(--border); }
}

.usp-item__icon {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-4);
  transition: transform 0.25s var(--ease-spring);
}
.usp-item:hover .usp-item__icon { transform: translateY(-3px) scale(1.08); }

.usp-item h3 {
  position: relative;
  z-index: 1;
  margin-bottom: var(--sp-2);
  font-size: 1.02rem;
}
/* Bar sits at the true grid edge (x=0 of the item, i.e. outside the content
   padding) so icon/title/paragraph all share one flush left edge */
.usp-item__bar {
  position: absolute;
  left: 0;
  top: var(--sp-6);
  bottom: var(--sp-6);
  width: 1px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background-color 0.2s var(--ease-out), width 0.2s var(--ease-out);
}
.usp-item:hover .usp-item__bar { background: var(--blue); width: 5px; }
.usp-item__title { display: inline-block; transition: transform 0.2s var(--ease-out); }
.usp-item:hover .usp-item__title { transform: translateX(6px); }

.usp-item p { position: relative; z-index: 1; font-size: 0.92rem; margin: 0; max-width: 26rem; }

@media (min-width: 900px) {
  .no-wrap-desktop, p.no-wrap-desktop { white-space: nowrap; max-width: none; }
}

/* ===================== Vloertechnologie — scroll-triggered feature list ===================== */
/* Left column reveals each of the 5 layers as it scrolls through the centre
   of the viewport (IntersectionObserver in js/main.js toggles .is-active);
   right column media stays pinned in view (sticky) and cross-fades to the
   matching image as the active layer changes. */
.tech-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (max-width: 900px) {
  .tech-features { grid-template-columns: 1fr; gap: var(--sp-6); }
  .tech-features__media { order: 1; }
  .tech-features__list { order: 2; }
}
/* Bleed variant — on typical laptop/desktop widths the image breaks out
   flush to the browser's right edge and grows larger; the text column
   keeps the page's usual left margin. Reverts to the standard boxed
   width again on very large screens so the image doesn't blow up. */
@media (min-width: 901px) and (max-width: 1799px) {
  .tech-features {
    max-width: none;
    grid-template-columns: 1fr 1.5fr;
    padding-left: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter));
    padding-right: 0;
  }
}

.tech-features__list { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (max-width: 900px) {
  .tech-features__list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--sp-3);
  }
}

.tech-feature {
  padding: var(--sp-5);
  border-radius: var(--radius-md);
  opacity: 0.4;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
@media (max-width: 900px) { .tech-feature { flex-shrink: 0; width: 260px; opacity: 1; transform: none; } }
.tech-feature.is-active { opacity: 1; transform: translateY(0); background: var(--surface); box-shadow: var(--shadow-2); }

.tech-feature__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: var(--blue-light);
  color: var(--blue);
  margin-bottom: var(--sp-3);
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.tech-feature.is-active .tech-feature__icon { background: var(--blue); color: #fff; }

.tech-feature__body h3 { font-size: 1.05rem; margin-bottom: var(--sp-2); color: var(--ink-muted); transition: color 0.3s var(--ease-out); }
.tech-feature.is-active .tech-feature__body h3 { color: var(--navy); }
.tech-feature__body p { font-size: 0.9rem; margin-bottom: 0; color: var(--ink-faint); transition: color 0.3s var(--ease-out); }
.tech-feature.is-active .tech-feature__body p { color: var(--ink-muted); }
.tech-feature__body .tech-feature__lead { font-weight: 600; margin-bottom: var(--sp-2); }
.tech-feature.is-active .tech-feature__body .tech-feature__lead { color: var(--blue); }
.tech-outro { max-width: 760px; margin: 80px auto 0; text-align: center; }
.tech-outro h3 { font-size: 1.5rem; color: var(--navy); margin-bottom: var(--sp-4); }
.tech-outro p { max-width: none; }
.tech-outro p:last-child { margin-bottom: 0; color: var(--navy); }

.tech-features__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: transparent;
}
@media (min-width: 901px) {
  .tech-features__media { position: sticky; top: calc(84px + var(--sp-6)); }
  /* Extra room below the last item so the sticky image (bound to the grid
     row's height, i.e. the list's height) un-pins only after feature 5
     (Kliksysteem) has crossed the IntersectionObserver's centre band and
     lit up — otherwise the list ends and the image releases at almost the
     same scroll position where feature 5 would trigger. */
  .tech-features__list { padding-bottom: 200px; }
}
.tech-features__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateY(40px);
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}
.tech-features__image.is-active { opacity: 1; transform: translateY(0); }
.tech-features__image.is-leaving { opacity: 0; transform: translateY(-40px); }

@media (prefers-reduced-motion: reduce) {
  .tech-feature, .tech-feature__icon, .tech-feature__body h3, .tech-feature__body p, .tech-features__image {
    transition: none;
  }
}

/* ===================== FAQ accordion ===================== */
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 52rem; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: var(--sp-5) var(--sp-6);
  font-weight: 700;
  color: var(--navy);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--blue);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 var(--sp-6) var(--sp-5); margin: 0; }

/* ===================== Downloads — preview + taal ===================== */
.download-row__preview {
  width: 44px; height: 56px;
  object-fit: cover;
  border-radius: var(--radius-brand);
  border: 1px solid var(--border);
  background: var(--cream-deep);
  flex-shrink: 0;
}
.download-row__lang {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-light);
  padding: 0.2em 0.6em;
  border-radius: 999px;
  margin-left: var(--sp-2);
}

/* ===================== Product detail ===================== */
.product-hero-grid {
  margin-top: var(--sp-2);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 900px) { .product-hero-grid { grid-template-columns: 1fr; } }
/* The per-product copy runs several paragraphs long, so on desktop the gallery
   stretches with the text column instead of sitting in a fixed 4:3 box. */
@media (min-width: 901px) {
  .product-hero-grid { align-items: stretch; }
  .product-gallery__main { aspect-ratio: auto; flex: 1; min-height: 340px; max-height: 620px; }
}
.product-claim { font-weight: 700; color: var(--navy); font-size: 1.05rem; }

/* Gallery — big image on top, small square thumbs in a row below; the main
   image opens the lightbox (see .lightbox further down). */
.product-gallery { display: flex; flex-direction: column; gap: var(--sp-3); }
.product-gallery__main {
  position: relative;
  border-radius: var(--radius-brand);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  aspect-ratio: 4/3;
  background: var(--cream-deep);
  cursor: zoom-in;
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__zoom {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(12, 46, 64, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  pointer-events: none;
}
.product-gallery__zoom svg { width: 16px; height: 16px; }
.product-gallery__main:hover .product-gallery__zoom { opacity: 1; transform: translateY(0); }

.product-gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.product-gallery__thumbs img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--radius-brand);
  border: 1.5px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s var(--ease-out);
}
.product-gallery__thumbs img:hover,
.product-gallery__thumbs img.is-active { border-color: var(--blue); }

/* Compact CTA — same expanding-arrow-badge mechanic as .btn, just smaller;
   a fixed height keeps the arrow badge a perfect circle at the new size. */
.btn--compact { height: 48px; padding-right: 56px; }
.btn--compact .btn__arrow { width: 38px; }

/* Technische specificaties — label in navy, value in a lighter grey weight */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--border); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table th, .spec-table td { text-align: left; padding: 0.85em 0; font-size: 0.94rem; }
.spec-table th { color: var(--navy); font-weight: 700; width: 45%; }
.spec-table td { color: var(--ink-muted); font-weight: 300; }

/* Technische specificaties + Toepassingen/Features side by side */
.product-details-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 900px) { .product-details-grid { grid-template-columns: 1fr; } }

.product-side-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--sp-6);
}
.product-side-panel__block + .product-side-panel__block {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.product-side-panel h3 { font-size: 1.02rem; margin-bottom: var(--sp-3); }

/* Toepassingen — the real label's technical icon block (dikte, afmetingen,
   toplaag, bevel), 2 per row like the physical product label. */
.spec-icon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.spec-icon-item { display: flex; align-items: center; gap: 0.7em; }
.spec-icon-item img { width: 34px; height: 34px; flex-shrink: 0; }
.spec-icon-item__label { display: block; font-size: 0.76rem; color: var(--ink-muted); }
.spec-icon-item__value { display: block; font-size: 0.9rem; font-weight: 700; color: var(--navy); }

.badge-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* Certificaatlogo's — allemaal op dezelfde hoogte, elk op een witte tegel
   zodat logo's met en zonder eigen achtergrond samen één rij vormen. */
.cert-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: stretch; }
.cert-row--center { justify-content: center; }
.cert-row__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.cert-row__item img { height: 72px; width: auto; }
@media (max-width: 560px) {
  .cert-row { gap: var(--sp-3); }
  .cert-row__item { padding: var(--sp-3); flex: 1 1 calc(50% - var(--sp-3)); }
  .cert-row__item img { height: 56px; }
}
.badge-pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.6em 1.1em;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue);
  font-weight: 700;
  font-size: 0.88rem;
}
.badge-pill svg { width: 16px; height: 16px; }

.feature-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.feature-list__item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.feature-list__icon { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.feature-list__icon img { width: 100%; height: 100%; display: block; }
.feature-list__icon[data-tooltip] { cursor: help; }
.feature-list__icon[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 200px;
  background: var(--navy);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  padding: 0.5em 0.8em;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
  z-index: 5;
}
.feature-list__icon[data-tooltip]:hover::after,
.feature-list__icon[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.feature-list__body h4 { font-size: 0.94rem; margin-bottom: 0.2em; }
.feature-list__body p { font-size: 0.86rem; color: var(--ink-muted); margin: 0; }

/* Lightbox — full-screen viewer with a horizontally scrollable, scroll-snap
   filmstrip so every gallery image can be scrolled or paged through. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 24, 32, 0.94);
  backdrop-filter: blur(6px);
  display: none;
}
.lightbox.is-open { display: block; }
body.lightbox-open { overflow: hidden; }

.lightbox__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-9);
}
@media (max-width: 700px) { .lightbox__slide { padding: var(--sp-9) var(--sp-5) var(--sp-6); } }
.lightbox__slide img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-brand);
  box-shadow: var(--shadow-3);
}

.lightbox__close,
.lightbox__nav {
  position: fixed;
  z-index: 2;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.2); }

.lightbox__close { top: var(--sp-5); right: var(--sp-5); width: 44px; height: 44px; }
.lightbox__close svg { width: 18px; height: 18px; }

.lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.lightbox__nav svg { width: 20px; height: 20px; }
.lightbox__nav--prev { left: var(--sp-5); }
.lightbox__nav--next { right: var(--sp-5); }
.lightbox__nav[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }
@media (max-width: 700px) { .lightbox__nav { display: none; } }

.lightbox__dots {
  position: fixed;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 0.6em;
}
.lightbox__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.lightbox__dot.is-active { background: #fff; transform: scale(1.3); }

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

/* Juridische pagina's (privacyverklaring, cookiebeleid) */
.legal-section { padding-top: var(--sp-5); }
.legal { max-width: 760px; }
.legal h2 { font-size: 1.35rem; margin: var(--sp-7) 0 var(--sp-3); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { max-width: none; }
.legal ul { list-style: disc; padding-left: 1.25em; margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-1); }
.legal li::marker { color: var(--blue); }
.legal strong { color: var(--navy); }
.legal a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--navy); }
.legal__updated { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--border); }