/* =========================================================================
   Domburg Home — hero voorstellen
   Vier hero's, twee richtingen. Tokens staan per richting op de versieroots,
   zodat een palet van V1 nooit in V2 kan lekken.

   Contrast is bij het definiëren doorgerekend tegen ELK vlak waarop het token
   kan landen (LESSONS regel 1). De uitkomsten staan in de comment erbij.
   ========================================================================= */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #0A2029;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

.ver[hidden] { display: none !important; }

/* Eén focusring zonder specificiteit, dubbel uitgevoerd zodat hij ook op een
   gevulde knop leesbaar blijft: de outline landt op het vlak van de OUDER
   (LESSONS regel 19), de box-shadow eromheen vangt het omgekeerde geval. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--ring-halo);
  border-radius: 3px;
}

/* ------------------------------------------------------------ wisselaar --
   Gereedschap van het voorstel, geen onderdeel van een van beide ontwerpen. */
.vswitch {
  position: fixed; z-index: 90; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  padding: 5px 6px 5px 12px; border-radius: 999px;
  background: #10181C; border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
  --ring: #F2C313; --ring-halo: rgba(0,0,0,.55);
}
.vswitch__label {
  font: 500 10px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .14em; text-transform: uppercase; color: #C6D2D6;
  margin-right: 4px;
}
.vswitch__btn {
  font: 500 12px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .06em;
  padding: 8px 11px; min-height: 32px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: #E7EEF0;
  cursor: pointer;
}
.vswitch__btn:hover { background: rgba(255,255,255,.12); }
.vswitch__btn[aria-pressed="true"] { background: #F2C313; color: #0A2029; }

@media (max-width: 420px) {
  .vswitch { gap: 2px; padding: 4px 5px 4px 9px; }
  .vswitch__btn { padding: 8px 9px; }
}


/* =========================================================================
   RICHTING 1 — "Twee sterren aan zee"
   Vlak: schemerblauw uit de eigen duskfoto's. Accent: het goud van de zon in
   het logo (#F2C313, de bronsite noemt hem zelf zo).
   ========================================================================= */
.v1 {
  --v1-ink:       #0A2029;   /* paginavlak */
  --v1-ink-2:     #0F2E3A;   /* verhoogd vlak */
  --v1-sand:      #F0E7D8;   /* bodytekst op ink   13.7:1  · op ink-2  11.6:1 */
  --v1-muted:     #9FB3BA;   /* labels   op ink     7.7:1  · op ink-2   6.5:1 */
  --v1-gold:      #F2C313;   /* accent   op ink    10.1:1  · ink op goud 10.1:1 */
  --v1-line:      rgba(240,231,216,.22);

  --ring: #F2C313; --ring-halo: rgba(10,32,41,.85);

  background: var(--v1-ink);
  color: var(--v1-sand);
}

.v1-h1 {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  /* Ondergrens gemeten op het langste ondeelbare woord, "Vakantiehuizen":
     14 tekens × ±0,45em. Bij 34px is dat ±214px, past in 320px min 40px. */
  font-size: clamp(2.125rem, 7.4vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
}
.v1-h1 em { font-style: italic; color: var(--v1-gold); }

.v1-eyebrow {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 20px;
  font: 500 clamp(10px, 1.05vw, 12px)/1.4 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .15em; text-transform: uppercase; color: var(--v1-muted);
}
.v1-eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--v1-gold); flex: none; }

.v1-lead {
  margin: 22px 0 0; max-width: 30rem;
  font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.62; color: var(--v1-sand);
}
.v1-note { margin: 18px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--v1-muted); }
.v1-note a { color: var(--v1-sand); text-underline-offset: 3px; }

.v1-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.v1-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 26px; border-radius: 999px;
  font: 600 15px/1 'Instrument Sans', system-ui, sans-serif;
  text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, background-color .18s ease;
}
.v1-btn--gold  { background: var(--v1-gold); color: var(--v1-ink); }
.v1-btn--ghost { background: rgba(240,231,216,.08); color: var(--v1-sand); border: 1px solid var(--v1-line); }
.v1-btn--line  { background: transparent; color: var(--v1-sand); border: 1px solid rgba(240,231,216,.55); }
.v1-btn:hover  { transform: translateY(-2px); }
.v1-btn--gold:hover { background: #FFD53A; }

/* kop --------------------------------------------------------------------- */
.v1-top { position: relative; z-index: 20; }
/* De kop van 1B ligt op een fel avondbeeld. De scrim staat als background-image
   op de kop zelf, dus op een VOOROUDER van de tekst (LESSONS regel 5): alleen
   zo telt deze tekst als "op beeld", en het lost het echte leesprobleem op. */
.v1-top--over {
  position: absolute; inset: 0 0 auto; padding-bottom: 46px;
  background-image: linear-gradient(to bottom, rgba(6,20,26,.88) 0%, rgba(6,20,26,.66) 46%, rgba(6,20,26,0) 100%);
}
.v1-top__in {
  display: flex; align-items: center; gap: clamp(12px, 3vw, 40px);
  padding: 20px clamp(16px, 4vw, 56px);
  max-width: 1560px; margin: 0 auto;
}
.v1-brand { text-decoration: none; display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.v1-brand__name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(19px, 2vw, 25px); line-height: 1; color: var(--v1-sand);
}
.v1-brand__sub {
  font: 400 9.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em; text-transform: uppercase; color: var(--v1-muted);
}
.v1-top__cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 999px; background: var(--v1-gold); color: var(--v1-ink);
  font: 600 14px/1 'Instrument Sans', sans-serif; text-decoration: none; white-space: nowrap;
}

.v1-nav > summary { list-style: none; }
.v1-nav > summary::-webkit-details-marker { display: none; }
.v1-nav__btn {
  display: none; align-items: center; gap: 8px; cursor: pointer;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--v1-line); color: var(--v1-sand);
  font: 500 13px/1 'Instrument Sans', sans-serif;
}
.v1-nav__bars { position: relative; width: 15px; height: 2px; background: currentColor; box-shadow: 0 -5px currentColor, 0 5px currentColor; }
.v1-nav__list { display: flex; gap: clamp(12px, 2vw, 26px); }
.v1-nav__list a {
  text-decoration: none; color: var(--v1-sand); font-size: 14.5px;
  padding: 6px 2px; border-bottom: 1px solid transparent;
}
.v1-nav__list a:hover { border-bottom-color: var(--v1-gold); }

/* hero 1A ----------------------------------------------------------------- */
.v1-hero {
  position: relative; overflow: hidden;
  min-height: min(92vh, 860px);
  display: flex; align-items: center;
  padding: 40px 0 96px;
}
.v1-ghost {
  position: absolute; left: -.06em; bottom: -.30em; z-index: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: min(30vw, 27rem); line-height: .8; letter-spacing: -.02em;
  /* Vulling transparant + omtrek: een decoratief woord, nooit voorgelezen. */
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-text-stroke: 1.5px rgba(240,231,216,.14);
  white-space: nowrap; pointer-events: none; user-select: none;
}
.v1-hero__grid {
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) 52vw; align-items: center;
}
.v1-hero__copy { min-width: 0; padding: 0 clamp(20px, 3vw, 44px) 0 clamp(16px, 4vw, 56px); }
.v1-hero__stage { position: relative; min-width: 0; }

.v1-shot { margin: 0; }
.v1-shot img {
  width: 100%; height: clamp(360px, 62vh, 620px); object-fit: cover;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
}

.v1-score {
  position: absolute; z-index: 3; left: -38px; top: 30px; margin: 0;
  display: grid; gap: 4px; justify-items: center; align-content: center;
  width: 132px; height: 132px; border-radius: 50%; padding: 0 14px;
  text-align: center;
  background: var(--v1-gold); color: var(--v1-ink);
  box-shadow: 0 12px 34px rgba(0,0,0,.34);
}
.v1-score b { font-family: 'Instrument Serif', Georgia, serif; font-size: 38px; line-height: .9; font-weight: 400; }
.v1-score span { font: 500 8.5px/1.45 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .02em; max-width: 78px; }

.v1-count {
  position: absolute; z-index: 3; right: clamp(12px, 2vw, 30px); bottom: -20px; margin: 0;
  padding: 11px 17px; border-radius: 999px;
  background: var(--v1-ink-2); border: 1px solid var(--v1-line); color: var(--v1-sand);
  font: 400 12.5px/1 'Instrument Sans', sans-serif; white-space: nowrap;
}
.v1-count b { font-family: 'Instrument Serif', Georgia, serif; font-size: 17px; font-weight: 400; color: var(--v1-gold); }

.v1-star {
  position: absolute; z-index: 4; left: clamp(16px, 4vw, 56px); bottom: 26px;
  display: flex; align-items: flex-start; gap: 13px;
  max-width: min(430px, calc(100vw - 32px));
  padding: 15px 19px; border-radius: 16px;
  background: rgba(15,46,58,.94); border: 1px solid var(--v1-line);
  backdrop-filter: blur(6px);
}
.v1-star__mark { color: var(--v1-gold); font-size: 17px; line-height: 1.35; letter-spacing: .06em; flex: none; }
.v1-star__txt { font-size: 12.8px; line-height: 1.5; color: var(--v1-sand); }
.v1-star__txt b { font-weight: 600; }

/* hero 1B ----------------------------------------------------------------- */
.v1b-hero {
  position: relative; overflow: hidden;
  min-height: min(96vh, 900px); display: flex; align-items: flex-end;
  background: var(--v1-ink);
}
.v1b-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.v1b-in {
  position: relative; z-index: 2; width: 100%;
  max-width: 1560px; margin: 0 auto;
  padding: 150px clamp(16px, 4vw, 56px) 92px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end; gap: clamp(24px, 4vw, 60px);
}
/* De scrim is een background-image op een VOOROUDER van de tekst, nooit een
   losse broer-img: alleen dan telt deze tekst als "op beeld" (LESSONS regel 5). */
.v1b-copy {
  min-width: 0; padding: 26px 30px 30px; margin: -26px -30px -30px; border-radius: 20px;
  background-image: linear-gradient(105deg, rgba(6,20,26,.92) 0%, rgba(6,20,26,.86) 52%, rgba(6,20,26,.42) 88%, rgba(6,20,26,0) 100%);
}
.v1b-h1 { font-size: clamp(2.125rem, 6.6vw, 5rem); }
.v1b-lead { max-width: 27rem; }
.v1-eyebrow--light { color: #D3DEE1; }

/* Quote en rail vormen samen de rechterkolom. Ze stonden eerst los van elkaar,
   waarbij de absolute quote over het eerste railkaartje viel. */
.v1b-side {
  min-width: 0; display: grid; gap: 12px; align-content: end;
  max-width: 340px; margin-left: auto;
}
.v1b-quote {
  margin: 0; padding: 22px 24px 20px; border-radius: 18px;
  background: rgba(10,32,41,.97); border: 1px solid var(--v1-line);
}
.v1b-quote__mark { display: block; margin-bottom: 8px; font-size: 20px; }
.v1b-quote__q {
  margin: 0 0 12px; font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.08; color: var(--v1-sand);
}
.v1b-quote__src { font-size: 11.8px; line-height: 1.5; color: var(--v1-muted); }

.v1b-rail {
  list-style: none; margin: 0; padding: 0; min-width: 0;
  display: grid; gap: 10px; align-content: end;
}
.v1b-rail li {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 11px 16px; border-radius: 12px;
  background: rgba(10,32,41,.97); border: 1px solid var(--v1-line);
  font-size: 12.6px; line-height: 1.35; color: var(--v1-sand);
}
.v1b-rail b {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 20px; line-height: 1; color: var(--v1-gold);
}

/* voettekst V1 ------------------------------------------------------------ */
.v1-foot {
  padding: 26px clamp(16px, 4vw, 56px) 84px;
  border-top: 1px solid var(--v1-line);
  display: grid; gap: 7px;
}
.v1-foot--b { border-top: 0; }
.v1-foot__c { margin: 0; font-size: 12.6px; line-height: 1.6; color: var(--v1-muted); }
.v1-foot__c a { color: var(--v1-sand); text-underline-offset: 3px; }


/* =========================================================================
   RICHTING 2 — "Op loopafstand"
   Vlak: duinzand. Accent: het mosgroen van de paalhoofden in de eigen
   beeldbank. Bewust geen bijna wit eerste scherm (LESSONS procesregel 13).
   ========================================================================= */
.v2 {
  --v2-sand:   #E4D7BE;   /* paginavlak */
  --v2-sand-2: #D8C8AB;   /* tweede tint */
  --v2-ink:    #17211A;   /* koppen op sand 11.7:1 · op sand-2 10.1:1 */
  --v2-muted:  #434A3F;   /* labels op sand  6.5:1 · op sand-2  5.6:1 */
  --v2-moss:   #2E5140;   /* accent op sand  6.2:1 · sand op moss 6.2:1 */
  --v2-deep:   #1E3428;   /* donker vlak, sand erop 9.4:1 */
  --v2-line:   rgba(23,33,26,.20);

  --ring: #2E5140; --ring-halo: rgba(228,215,190,.95);

  background: var(--v2-sand);
  color: var(--v2-ink);
  font-family: 'Newsreader', Georgia, serif;
}

.v2-h1 {
  margin: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800; font-stretch: 112%;
  /* "Vakantiehuizen" is hier het langste ondeelbare woord en Archivo zet fors
     breder dan een serif: 14 × ±0,62em. Bij 30px is dat ±260px < 280px. */
  font-size: clamp(1.875rem, 6.1vw, 4.5rem);
  line-height: .96; letter-spacing: -.025em; text-transform: none;
}
.v2-eyebrow {
  margin: 0 0 18px;
  font: 500 clamp(10px, 1vw, 11.5px)/1.4 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .17em; text-transform: uppercase; color: var(--v2-muted);
}
.v2-lead {
  margin: 20px 0 0; max-width: 29rem;
  font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.6; color: var(--v2-ink);
}
.v2-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px; border-radius: 4px;
  font-family: 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 15px; line-height: 1;
  text-decoration: none; white-space: nowrap; transition: transform .18s ease;
}
.v2-btn--moss { background: var(--v2-moss); color: var(--v2-sand); }
.v2-btn--line { background: transparent; color: var(--v2-ink); border: 1.5px solid rgba(23,33,26,.42); }
.v2-btn:hover { transform: translateY(-2px); }

/* kop --------------------------------------------------------------------- */
.v2-top { position: relative; z-index: 20; border-bottom: 1px solid var(--v2-line); }
.v2-top__in {
  display: flex; align-items: center; gap: clamp(12px, 3vw, 40px);
  padding: 14px clamp(16px, 4vw, 56px);
  max-width: 1560px; margin: 0 auto;
}
.v2-brand { margin-right: auto; display: block; min-width: 0; }
.v2-brand img { width: clamp(132px, 15vw, 172px); height: auto; }
.v2-top__cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 4px; background: var(--v2-moss); color: var(--v2-sand);
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 14px; line-height: 1;
  text-decoration: none; white-space: nowrap;
}
.v2-nav > summary { list-style: none; }
.v2-nav > summary::-webkit-details-marker { display: none; }
.v2-nav__btn {
  display: none; align-items: center; gap: 8px; cursor: pointer;
  min-height: 44px; padding: 0 14px; border-radius: 4px;
  border: 1.5px solid rgba(23,33,26,.42); color: var(--v2-ink);
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 13px; line-height: 1;
}
.v2-nav__bars { position: relative; width: 15px; height: 2px; background: currentColor; box-shadow: 0 -5px currentColor, 0 5px currentColor; }
.v2-nav__list { display: flex; gap: clamp(12px, 2vw, 26px); }
.v2-nav__list a {
  text-decoration: none; color: var(--v2-ink); font-family: 'Archivo', sans-serif;
  font-size: 14.5px; padding: 6px 2px; border-bottom: 1.5px solid transparent;
}
.v2-nav__list a:hover { border-bottom-color: var(--v2-moss); }

/* hero 2A ----------------------------------------------------------------- */
.v2-hero {
  position: relative; overflow: hidden;
  min-height: min(85vh, 790px);
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--v2-sand);
}
.v2-hero__in {
  position: relative; z-index: 2; width: 100%;
  max-width: 1560px; margin: 0 auto;
  padding: clamp(40px, 6vh, 72px) clamp(16px, 4vw, 56px) clamp(36px, 6vh, 72px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: clamp(20px, 4vw, 48px);
}
.v2-hero__copy { min-width: 0; max-width: 40rem; }

/* De gemeten wandeling. Het vlak van de band IS de zee; de duin en het strand
   worden er in de SVG overheen getekend, zodat de waterlijn per definitie op
   de tekening aansluit in plaats van er los naast te liggen. De punten staan
   in de gewone stroom op één stippellijn, van voordeur naar vloedlijn, zodat
   er niets met percentages op zijn plaats gegokt hoeft te worden. */
.v2-band {
  position: relative; z-index: 1;
  min-height: clamp(238px, 32vh, 296px);
  background: var(--v2-deep);
}
.v2-map { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; }

.v2-route {
  position: relative; z-index: 5;
  max-width: 1560px; margin: 0 auto;
  padding: 30px clamp(16px, 4vw, 56px);
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px);
}

.v2-door {
  flex: none; margin: -104px 0 0; z-index: 6;
  width: 264px; height: 264px; border-radius: 50%; overflow: hidden;
  border: 8px solid var(--v2-sand); box-shadow: 0 16px 40px rgba(23,33,26,.3);
}
.v2-door img { width: 100%; height: 100%; object-fit: cover; }

.v2-pins {
  position: relative; flex: 1 1 auto; min-width: 0;
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.v2-pins::before {
  content: ""; position: absolute; z-index: 0; left: 10px; right: 10px; top: 50%;
  border-top: 1.5px dashed rgba(228,215,190,.42);
}
.v2-pin {
  position: relative; z-index: 1; display: grid; gap: 1px; min-width: 0;
  padding: 9px 13px; border-radius: 4px;
  background: var(--v2-sand); border: 1.5px solid var(--v2-line);
  box-shadow: 0 6px 18px rgba(23,33,26,.18);
}
.v2-pin b {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.1;
  color: var(--v2-ink); white-space: nowrap;
}
.v2-pin span {
  font: 400 10px/1.2 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .06em; color: var(--v2-muted); white-space: nowrap;
}

.v2-score {
  margin: 0; width: 132px; height: 132px; border-radius: 50%; flex: none;
  display: grid; place-content: center; justify-items: center; gap: 3px;
  text-align: center; padding: 0 14px;
  background: var(--v2-moss); color: var(--v2-sand);
}
.v2-score b { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 36px; line-height: 1; }
.v2-score span { font: 400 9px/1.5 'JetBrains Mono', ui-monospace, monospace; max-width: 84px; }

/* hero 2B ----------------------------------------------------------------- */
.v2b-hero {
  position: relative; overflow: hidden;
  min-height: min(90vh, 840px); display: flex; align-items: center;
  background: var(--v2-sand);
}
.v2b-band { position: absolute; z-index: 0; right: 0; top: 0; bottom: 0; width: 47%; background: var(--v2-deep); }
.v2b-in {
  position: relative; z-index: 2; width: 100%;
  max-width: 1560px; margin: 0 auto;
  padding: clamp(40px, 6vh, 70px) clamp(16px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) min(38vw, 460px);
  align-items: center; gap: clamp(20px, 4vw, 56px);
}
.v2b-copy { min-width: 0; position: relative; z-index: 3; }
.v2b-h1 { position: relative; z-index: 3; }
.v2b-meta {
  margin: 26px 0 0; padding-top: 18px; border-top: 1.5px solid var(--v2-line);
  font-size: 14px; line-height: 1.9; color: var(--v2-muted);
}
.v2b-meta b {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; color: var(--v2-ink);
}
/* De foto snijdt door de scheiding tussen het zandvlak en het groene vlak, en
   bloedt boven en onder het scherm uit: een uitsnede, geen foto in een cel. */
.v2b-shot {
  position: relative; z-index: 2; margin: -14vh 46px -14vh -64px; justify-self: end;
  width: calc(min(38vw, 460px) + 18px);
  border-radius: 4px 4px 150px 150px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(23,33,26,.34);
}
.v2b-shot img { width: 100%; height: auto; }

.v2b-pills { list-style: none; margin: 0; padding: 0; }
.v2b-pill {
  position: absolute; z-index: 5; max-width: 14rem;
  padding: 10px 15px; border-radius: 999px;
  background: var(--v2-sand); color: var(--v2-ink);
  border: 1.5px solid var(--v2-line);
  box-shadow: 0 8px 22px rgba(23,33,26,.24);
  font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 12.5px; line-height: 1.25;
}
.v2b-pill--1 { right: calc(clamp(16px, 4vw, 56px) + 74px); top: 13%; }
.v2b-pill--2 { right: calc(clamp(16px, 4vw, 56px) + min(31vw, 372px)); top: 45%; background: var(--v2-moss); color: var(--v2-sand); border-color: transparent; }
.v2b-pill--3 { right: calc(clamp(16px, 4vw, 56px) + 62px); bottom: 12%; }

/* voettekst V2 ------------------------------------------------------------ */
.v2-foot {
  padding: 26px clamp(16px, 4vw, 56px) 84px;
  border-top: 1px solid var(--v2-line);
  display: grid; gap: 7px; background: var(--v2-sand-2);
}
.v2-foot__c { margin: 0; font-family: 'Archivo', sans-serif; font-size: 13px; line-height: 1.6; color: var(--v2-muted); }
.v2-foot__c a { color: var(--v2-ink); text-underline-offset: 3px; }


/* =========================================================================
   Smal scherm
   Het menu gaat achter een hamburger. De <details> staat in de HTML OPEN,
   zodat hij zonder JavaScript een gewone lijst blijft; het script klapt hem
   dicht en zet .has-js, waarna hij pas een zwevende lade mag worden.
   ========================================================================= */
@media (max-width: 860px) {
  .v1-nav__btn, .v2-nav__btn { display: inline-flex; }
  .v1-nav, .v2-nav { order: 3; }

  .v1-nav__list, .v2-nav__list {
    flex-direction: column; gap: 2px; width: 100%;
    padding: 12px 0 4px;
  }
  .v1-nav__list a, .v2-nav__list a { padding: 12px 2px; }

  .has-js .v1-nav, .has-js .v2-nav { position: relative; order: 3; }
  .has-js .v1-nav__list, .has-js .v2-nav__list {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 40;
    width: max-content; min-width: 190px; padding: 10px 16px 12px;
    border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.3);
  }
  .has-js .v1-nav__list { background: var(--v1-ink-2); border: 1px solid var(--v1-line); }
  .has-js .v2-nav__list { background: var(--v2-sand); border: 1.5px solid var(--v2-line); }

  /* Een gesloten <details> is niet te betabben, ook niet als CSS de inhoud
     zichtbaar houdt. Zet de lijst daarom expliciet weg zolang hij dicht is. */
  .v1-nav:not([open]) .v1-nav__list,
  .v2-nav:not([open]) .v2-nav__list { display: none; }

  .v1-top__in, .v2-top__in { flex-wrap: wrap; }
  .v1-brand, .v2-brand { margin-right: auto; }
}

@media (max-width: 1039px) {
  /* De hero was op desktop een flexrij. Zodra .v1-star hieronder uit zijn
     absolute positie komt, wordt hij een TWEEDE flexitem en knijpt hij de
     hele kolom tot een derde van het scherm. Blokweergave lost dat bij de
     wortel op, in plaats van de ster een breedte te geven. */
  .v1-hero { display: block; padding: 24px 0 92px; min-height: 0; }
  .v1-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .v1-hero__copy { padding: 0 clamp(16px, 4vw, 56px); }
  .v1-hero__stage { padding: 0 clamp(16px, 4vw, 56px); }
  .v1-shot img { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); border-radius: 6px; height: clamp(280px, 46vh, 420px); }
  .v1-score { left: auto; right: clamp(24px, 6vw, 64px); top: -34px; width: 108px; height: 108px; }
  .v1-score b { font-size: 30px; }
  .v1-count { right: auto; left: clamp(24px, 6vw, 64px); bottom: -18px; }
  .v1-ghost { font-size: 44vw; bottom: -.24em; }
  .v1-star { position: static; margin: 52px clamp(16px, 4vw, 56px) 0; max-width: none; }

  .v1b-hero { display: block; }
  .v1b-in { grid-template-columns: minmax(0, 1fr); padding-top: 128px; padding-bottom: 68px; }
  .v1b-side { max-width: none; margin-left: 0; }
  .v1b-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .v2-hero { min-height: 0; }
  .v2-hero__in { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .v2-band { min-height: 0; }
  .v2-route { flex-wrap: wrap; gap: 18px; padding-top: 22px; padding-bottom: 26px; }
  .v2-door { width: 150px; height: 150px; border-width: 6px; margin-top: -58px; }
  .v2-pins { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; gap: 9px; }
  .v2-pins::before { display: none; }
  .v2-score { width: 112px; height: 112px; }

  .v2b-hero { min-height: 0; }
  .v2b-in { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .v2b-band { width: 100%; height: 46%; top: auto; bottom: 0; }
  .v2b-shot { justify-self: start; width: min(78vw, 400px); margin: 0; border-radius: 4px 4px 120px 120px; }
  .v2b-pills { position: relative; display: flex; flex-wrap: wrap; gap: 9px; }
  .v2b-pill { position: static; max-width: none; }
  .v2b-pill--1, .v2b-pill--3 { background: var(--v2-sand); }
}

@media (max-width: 560px) {
  .v1-star { flex-direction: column; gap: 8px; }
  .v1b-rail { grid-template-columns: minmax(0, 1fr); }
  .v2-door { width: 124px; height: 124px; margin-top: -46px; }
  .v2-pin b { font-size: 12.5px; }
  .v2-pin span { font-size: 9px; }
}

/* =========================================================================
   Beweging. De zichtbare staat is de STANDAARD; .anim voegt alleen een
   entree toe, en die klasse wordt uitsluitend gezet als er script draait EN
   de bezoeker beweging niet heeft uitgezet. Zonder JavaScript of met motion
   uit staat er dus nooit een opacity:0 regel aan (LESSONS regel 7, 8 en 9).
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .anim .v1-hero__copy > *,
  .anim .v1b-copy > *,
  .anim .v2-hero__copy > *,
  .anim .v2b-copy > * { animation: dh-rise .7s cubic-bezier(.22,.8,.3,1) backwards; }
  .anim .v1-hero__copy > :nth-child(2), .anim .v1b-copy > :nth-child(2),
  .anim .v2-hero__copy > :nth-child(2), .anim .v2b-copy > :nth-child(2) { animation-delay: .07s; }
  .anim .v1-hero__copy > :nth-child(3), .anim .v1b-copy > :nth-child(3),
  .anim .v2-hero__copy > :nth-child(3), .anim .v2b-copy > :nth-child(3) { animation-delay: .14s; }
  .anim .v1-hero__copy > :nth-child(4), .anim .v1b-copy > :nth-child(4),
  .anim .v2-hero__copy > :nth-child(4), .anim .v2b-copy > :nth-child(4) { animation-delay: .21s; }

  .anim .v1-score, .anim .v1-count, .anim .v1-star,
  .anim .v1b-quote, .anim .v1b-rail li,
  .anim .v2-pin, .anim .v2-score, .anim .v2b-pill,
  .anim .v2-door { animation: dh-pop .6s cubic-bezier(.22,.8,.3,1) .3s backwards; }
}

@keyframes dh-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes dh-pop  { from { opacity: 0; transform: scale(.94); } }