/* ============================================================
   home-v2.css — Homepage-specific styles (new design)
   ============================================================ */

    /* ════ Layout ════ */
    .wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
    .narrow { max-width: 1100px; margin: 0 auto; padding: 0 32px; }

    /* Halo: cream stroke painted behind the fill so the text stays
       readable when the spine gradient passes behind it. Auto-applied
       to section headings + body copy that sit directly on cream inside
       .page-trail (the wine stats-card and the white pillar/quote/edition
       cards already cover the spine, so their text is excluded). Use the
       .has-halo utility class for one-off opt-ins elsewhere. */
    .has-halo,
    .page-trail .wat h2,
    .page-trail .wat-text,
    .page-trail .testimonials-head h2,
    .page-trail .waarom h2,
    .page-trail .waarom-text,
    .page-trail .missie h2,
    .page-trail .editions h2 {
      -webkit-text-stroke: 4px var(--color-cream);
      paint-order: stroke fill;
    }
    .pg-label {
      font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--color-primary); opacity: 0.45; padding: 24px 32px 0;
    }

    /* ════ Type ════ */
    h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary); line-height: 0.95; }
    h1 { font-size: clamp(48px, 7.5vw, 112px); font-weight: 900; }
    h2 { font-size: clamp(36px, 5vw, 72px); }
    h3 { font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -0.01em; line-height: 1.1; }
    p  { line-height: 1.6; margin: 0; }

    .eyebrow {
      font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
      font-weight: 700; color: var(--color-crimson);
      display: inline-flex; align-items: center; gap: 10px;
    }
    .eyebrow::before {
      content: ""; width: 26px; height: 2px; background: var(--color-crimson);
      display: inline-block;
    }

    /* ════ Hand-drawn squiggle underline under eyebrows/titles ════ */
    .scribble {
      display: block; width: 120px; height: 14px; margin-top: 8px;
      color: var(--color-secondary);
    }
    .scribble path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }

    /* ════════════════════════════════════════════════════════════
       1. HERO
       ════════════════════════════════════════════════════════════ */
    .hero {
      padding: 0;
    }
    .hero-card {
      position: relative;
      border-radius: 0;          /* full bleed, no rounded corners */
      overflow: hidden;
      background: var(--color-cream);
      /* Vaste hero-hoogte: schermvullend op kleinere schermen, maar gecapt
         zodat de layout statisch blijft bij het vergroten van het venster.
         Alle interne maten (foto-naad, overlay) rekenen met deze var. */
      --hero-h: min(calc(100svh - 96px), 720px);
      min-height: var(--hero-h);
      isolation: isolate;
      /* How far left to slide the SVG overlay AND the photo's left edge.
         Larger = less overlay visible, more photo. The seam stays aligned. */
      --overlay-shift: calc(var(--hero-h) * 0.05);
    }
    .hero-card__photo {
      position: absolute;
      top: 0; right: 0; bottom: 0;
      /* The SVG overlay is height-anchored. Its visible top-right convergence
         point sits at viewBox X 214 of a 374×286 box → that's 0.75 × hero_height
         from the SVG's left edge. We then shift both the SVG and the photo
         leftward by `--overlay-shift` so the photo grows and the overlay shrinks
         while their seam stays aligned. Tweak --overlay-shift to taste. */
      left: calc(var(--hero-h) * 0.75 - var(--overlay-shift, 0px));
      z-index: 0;
    }
    /* multiple stacked photos that crossfade between each other every ~5s */
    .hero-card__photo img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover;
      opacity: 0;
      transition: opacity 1.4s ease;
    }
    .hero-card__photo img.is-active { opacity: 1; }

    /* Decorative SVG overlay anchored to the left of the hero. The negative
       --overlay-shift slides the SVG further off-screen to the left so less
       of it is visible (and the photo grows to fill what it vacates). */
    .hero-overlay {
      position: absolute;
      left: calc(0px - var(--overlay-shift, 0px));
      top: 0;
      height: 100%;
      width: auto;
      z-index: 1;
      pointer-events: none;
    }

    /* simple bottom scrim for text readability — no red wash */
    .hero-card__photo::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg,
        rgba(0,0,0,0)   0%,
        rgba(0,0,0,0)   35%,
        rgba(0,0,0,0.55) 80%,
        rgba(0,0,0,0.75) 100%);
    }
    .ember-canvas {
      position: absolute; inset: 0; width: 100%; height: 100%;
      z-index: 1; pointer-events: none;
    }
    .hero-card__content {
      position: relative; z-index: 2;
      padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) clamp(40px, 5vw, 72px);
      min-height: var(--hero-h);
      display: flex; flex-direction: column;
      color: var(--color-primary);
    }
    .hero-top {
      display: flex; justify-content: flex-end; align-items: flex-start;
      gap: 24px; flex-wrap: wrap;
    }
    .hero-center {
      position: absolute;
      top: 0; bottom: 0; left: 0;
      /* even breed als de creme strook (naad ligt op 0.70 × hero-hoogte),
         zodat de kolom niet meebeweegt met de vensterbreedte */
      width: calc(var(--hero-h) * 0.70);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 22px;
      padding: clamp(28px, 4vw, 56px);
    }
    .hero-date {
      background: var(--color-secondary); color: var(--color-primary);
      font-weight: 800; font-size: 13px; letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 12px 20px; border-radius: 999px;
      transform: rotate(-2deg);
      box-shadow: 0 8px 20px -6px rgba(235, 177, 31, 0.55);
    }
    .hero-edition {
      color: #fff; opacity: 0.85;
      font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase;
      font-weight: 600;
    }
    .hero-edition strong {
      color: var(--color-secondary); font-weight: 800; font-size: 14px;
    }
    .hero-title {
      color: #fff;
      margin: 0;
    }
    .hero-title em {
      color: var(--color-secondary);
      font-style: normal;
      display: inline-block;
      transform: rotate(-1.5deg);
    }
    .hero-wordmark {
      width: 640px;
      max-width: 100%;             /* shrink to fit the cream strip */
      height: auto;
      display: block;
      margin: 0;
    }
    .hero-supertagline {
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--color-crimson);
      margin: 0;
      display: inline-flex; align-items: center; gap: 10px;
      white-space: nowrap;
    }
    .hero-supertagline::before,
    .hero-supertagline::after {
      content: "";
      display: inline-block;
      width: 28px; height: 2px;
      background: currentColor;
      opacity: 0.7;
    }
    .hero-tagline {
      color: var(--color-primary);
      font-size: 17px;
      font-weight: 400; max-width: 52ch; line-height: 1.5;
      margin: 0;
      opacity: 0.85;
    }
    .hero-ctas {
      display: flex; flex-direction: row;
      align-items: center; flex-wrap: wrap; justify-content: center;
      gap: 12px; margin-top: 6px;
    }

    /* ── Hero countdown (bottom-right) ── */
    .hero-countdown {
      position: absolute;
      bottom: clamp(20px, 4vw, 48px);
      right: clamp(20px, 4vw, 48px);
      display: flex;
      gap: 16px;
      z-index: 3;
    }
    .hero-countdown__unit { text-align: center; }
    .hero-countdown__number {
      display: block;
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 900;
      color: #fff;
      letter-spacing: -0.04em;
      line-height: 1;
      text-shadow: 0 2px 12px rgba(0,0,0,0.3);
    }
    .hero-countdown__label {
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
      font-weight: 600;
    }

    @media (max-width: 720px) {
      .hero-countdown {
        position: static;
        justify-content: center;
        margin-top: 24px;
      }
    }

    /* ════ Partners band — rounded white card with FIRE behind logos ════ */
    .partners-band {
      position: relative;
      isolation: isolate;
      margin: 24px 16px 0;
      padding: 26px 0;
      background: var(--color-white);
      border-radius: var(--r-md);
      overflow: hidden;
      box-shadow: 0 10px 30px -18px rgba(40, 20, 20, 0.18);
    }
    .partners-band__sparkles {
      position: absolute; inset: 0;
      z-index: 0;
      pointer-events: none;
    }
    .partners-label {
      position: relative; z-index: 1;
      text-align: center;
      font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--color-primary); opacity: 0.75; font-weight: 700;
      margin-bottom: 20px;
    }
    .partners-track-wrap {
      position: relative; z-index: 1;
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }
    .partners-track {
      display: flex; align-items: center; gap: 64px;
      animation: marquee 35s linear infinite;
      width: max-content;
    }
    .partners-track img {
      height: 42px; width: auto; object-fit: contain;
      filter: grayscale(1) brightness(0.9);
      transition: filter .3s ease, transform .3s ease;
    }
    .partners-track:hover {
      animation-play-state: paused;
    }
    .partners-track img:hover {
      filter: grayscale(0) brightness(1)
              drop-shadow(0 0 12px rgba(235, 177, 31, 0.55));
      transform: scale(1.12);
    }
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    /* De partnersstrip moet ook draaien als het toestel 'verminder
       beweging' aanstaat — de globale reduced-motion-regel in
       animations.css zet anders alle animaties stil. */
    @media (prefers-reduced-motion: reduce) {
      .partners-track {
        animation-duration: 35s !important;
        animation-iteration-count: infinite !important;
      }
    }

    /* ════════════════════════════════════════════════════════════
       PAGE SPINE — single continuous brandbook ribbon running vertically
       through the middle of the site. Lives INSIDE sections (positioned
       absolutely behind content) rather than between them. Draws
       progressively as the user scrolls, like a route being walked.
       ════════════════════════════════════════════════════════════ */
    .page-trail {
      position: relative;
    }
    .page-spine {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 0;
      pointer-events: none;
      overflow: visible;
    }
    .page-spine svg {
      width: 100%; height: 100%;
      display: block;
      overflow: visible;
    }
    .spine-path {
      fill: none;
      stroke: url(#spineGrad);
      stroke-width: 36;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;   /* keep stroke width constant under stretching */
      opacity: 0.92;
    }
    /* every section that sits inside the trail needs z-index >= 1 so
       its content reads above the spine */
    .page-trail > section { position: relative; z-index: 1; }

    /* ════════════════════════════════════════════════════════════
       2. WAT IS DE KERSTMARS? — Two column, tilted image card
       ════════════════════════════════════════════════════════════ */
    .wat {
      padding: 60px 0 80px;
    }
    .wat-grid {
      display: grid; grid-template-columns: 1.05fr 1fr;
      gap: 80px; align-items: center;
    }
    .wat h2 { margin: 22px 0 26px; }
    .wat-text { font-size: 17px; color: var(--color-ink); margin-bottom: 18px; max-width: 50ch; }
    .wat-media {
      position: relative;
      transform: rotate(2deg);
    }
    .wat-media__frame {
      border-radius: var(--r-md);
      overflow: hidden;
      box-shadow: 0 30px 60px -20px rgba(99, 9, 9, 0.3);
      border: 6px solid #fff;
    }
    .wat-media__frame img {
      aspect-ratio: 4 / 5; object-fit: cover;
    }
    .wat-media__stamp {
      position: absolute; top: -22px; right: -16px;
      background: var(--color-secondary); color: var(--color-primary);
      width: 110px; height: 110px; border-radius: 50%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      font-weight: 900; font-size: 13px; text-align: center;
      transform: rotate(-12deg);
      box-shadow: 0 10px 24px -8px rgba(235, 177, 31, 0.6);
      line-height: 1.1;
    }
    .wat-media__stamp strong {
      font-size: 22px; display: block; margin-top: 2px;
    }

    /* ════════════════════════════════════════════════════════════
       3. STATS — Wine full-bleed card with amber numbers
       ════════════════════════════════════════════════════════════ */
    .stats {
      margin: 40px 16px 0;
    }
    .stats-card {
      background: var(--color-primary);
      color: #fff;
      border-radius: var(--r-lg);
      padding: clamp(48px, 6vw, 90px) clamp(32px, 6vw, 80px);
      position: relative;
      overflow: hidden;
      box-shadow: 0 40px 100px -40px rgba(99, 9, 9, 0.5);
    }
    .stats-head {
      text-align: center; margin-bottom: 50px;
    }
    .stats-head h2 { color: #fff; }
    .stats-head .eyebrow { color: var(--color-secondary); }
    .stats-head .eyebrow::before { background: var(--color-secondary); }
    .stats-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 40px; position: relative;
    }
    .stat {
      text-align: center;
    }
    .stat__value {
      font-weight: 900; font-size: clamp(48px, 7vw, 96px);
      color: var(--color-secondary);
      letter-spacing: -0.04em; line-height: 1;
      display: inline-block;
    }
    .stat:nth-child(2) .stat__value { color: #fff; }
    .stat:nth-child(2) .stat__value::after {
      content: ""; display: block;
      height: 6px; width: 70%; margin: 8px auto 0;
      background: var(--color-crimson); border-radius: 999px;
      transform: skewX(-12deg);
    }
    .stat__label {
      color: rgba(255,255,255,0.85);
      font-size: 14px; letter-spacing: 0.1em;
      text-transform: uppercase; font-weight: 600;
      margin-top: 14px;
    }

    /* ════════════════════════════════════════════════════════════
       3b. TESTIMONIALS — Quote cards
       ════════════════════════════════════════════════════════════ */
    .testimonials {
      padding: 90px 0 40px;
    }
    .testimonials-head {
      text-align: center; margin-bottom: 50px;
    }
    .testimonials-head .eyebrow { justify-content: center; gap: 0; }
    .testimonials-head .eyebrow::before { display: none; }
    .testimonials-head h2 { margin-top: 14px; }
    .testimonials-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
    }
    .quote {
      background: #fff;
      border-radius: var(--r-md);
      padding: 36px 32px 28px;
      border: 1px solid rgba(99, 9, 9, 0.08);
      box-shadow: 0 16px 36px -22px rgba(99, 9, 9, 0.22);
      position: relative;
      transition: transform .35s ease, box-shadow .35s ease;
    }
    .quote:nth-child(odd)  { transform: rotate(-0.6deg); }
    .quote:nth-child(even) { transform: rotate(0.6deg); }
    .quote:hover {
      transform: rotate(0) translateY(-6px) !important;
      box-shadow: 0 24px 48px -20px rgba(99, 9, 9, 0.3);
    }
    .quote__mark {
      position: absolute; top: 4px; right: 22px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 88px; line-height: 1;
      color: var(--color-secondary); opacity: 0.55;
      font-weight: 900; pointer-events: none;
    }
    .quote__text {
      font-size: 17px; color: var(--color-ink);
      line-height: 1.55; margin-bottom: 18px;
      position: relative; z-index: 1;
    }
    .quote__author {
      font-size: 12px; letter-spacing: 0.14em;
      text-transform: uppercase; font-weight: 700;
      color: var(--color-crimson);
    }

    /* ════════════════════════════════════════════════════════════
       3c. WAAROM TWA — Mirror-layout of Wat (image left, text right)
       ════════════════════════════════════════════════════════════ */
    .waarom {
      padding: 60px 0 80px;
    }
    .waarom-grid {
      display: grid; grid-template-columns: 1fr 1.05fr;
      gap: 80px; align-items: center;
    }
    .waarom h2 { margin: 22px 0 26px; }
    .waarom-text { font-size: 17px; color: var(--color-ink); margin-bottom: 18px; max-width: 50ch; }
    .waarom-media {
      position: relative;
      transform: rotate(-2deg);
    }
    .waarom-media__frame {
      border-radius: var(--r-md);
      overflow: hidden;
      box-shadow: 0 30px 60px -20px rgba(99, 9, 9, 0.3);
      border: 6px solid #fff;
    }
    .waarom-media__frame img {
      aspect-ratio: 4 / 5; object-fit: cover;
      width: 100%; display: block;
    }
    .waarom-media__stamp {
      position: absolute; bottom: -22px; right: -16px;
      background: var(--color-crimson); color: #fff;
      width: 110px; height: 110px; border-radius: 50%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      font-weight: 800; font-size: 11px; text-align: center;
      transform: rotate(8deg);
      box-shadow: 0 10px 24px -8px rgba(175, 5, 5, 0.55);
      line-height: 1.1;
      text-transform: uppercase; letter-spacing: 0.1em;
    }
    .waarom-media__stamp strong {
      font-size: 22px; display: block; margin-top: 2px;
      text-transform: none; letter-spacing: -0.02em;
    }

    /* ════════════════════════════════════════════════════════════
       4. MISSIE — Three tilted pillar cards
       ════════════════════════════════════════════════════════════ */
    .missie {
      padding: 100px 0 80px;
    }
    .missie-head {
      text-align: center; margin-bottom: 70px;
    }
    .missie-head .eyebrow { justify-content: center; }
    .missie-head .eyebrow::before { display: none; }
    .missie-head .eyebrow {
      gap: 0;
    }
    .missie-head h2 { margin-top: 14px; }
    .missie-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
    }
    .pillar {
      background: #fff;
      border-radius: var(--r-md);
      padding: 40px 32px;
      border: 1px solid rgba(99, 9, 9, 0.08);
      box-shadow: 0 20px 40px -24px rgba(99, 9, 9, 0.2);
      position: relative;
      transition: transform .35s ease, box-shadow .35s ease;
    }
    .pillar:nth-child(1) { transform: rotate(-1.5deg); }
    .pillar:nth-child(2) { transform: rotate(0.8deg) translateY(20px); }
    .pillar:nth-child(3) { transform: rotate(-0.6deg); }
    .pillar:hover {
      transform: rotate(0) translateY(-6px) !important;
      box-shadow: 0 28px 56px -20px rgba(99, 9, 9, 0.3);
    }
    .pillar__num {
      position: absolute; top: 20px; right: 24px;
      font-weight: 900; font-size: 48px; color: var(--color-secondary);
      letter-spacing: -0.04em; line-height: 1; opacity: 0.55;
    }
    .pillar__icon {
      width: 60px; height: 60px; border-radius: 50%;
      background: var(--color-primary); color: var(--color-secondary);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 22px;
    }
    .pillar__icon svg { width: 28px; height: 28px; }
    .pillar h3 { margin-bottom: 10px; }
    .pillar__accent {
      width: 40px; height: 3px; background: var(--color-crimson);
      border-radius: 999px; margin: 12px 0;
    }
    .pillar__text {
      font-size: 15px; color: var(--color-ink); opacity: 0.85;
    }

    /* ════════════════════════════════════════════════════════════
       5. EDITIES — Cards with rotated stamps
       ════════════════════════════════════════════════════════════ */
    .editions {
      padding: 80px 0 60px;
    }
    .editions-head {
      text-align: center; margin-bottom: 60px;
    }
    .editions-head .eyebrow::before { display: none; }
    .editions-head .eyebrow { gap: 0; }
    .editions-head h2 { margin-top: 14px; }
    .editions-grid {
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
    }
    .edition {
      background: #fff;
      border-radius: var(--r-md);
      overflow: hidden;
      border: 1px solid rgba(99, 9, 9, 0.08);
      box-shadow: 0 16px 36px -22px rgba(99, 9, 9, 0.22);
      transition: transform .35s ease, box-shadow .35s ease;
      position: relative;
    }
    .edition:hover {
      transform: translateY(-8px) rotate(-1deg);
      box-shadow: 0 28px 56px -20px rgba(99, 9, 9, 0.32);
    }
    .edition__img {
      aspect-ratio: 4 / 3; overflow: hidden; position: relative;
      background: var(--color-primary);
    }
    .edition__img img { width: 100%; height: 100%; object-fit: cover; }
    .edition__year {
      position: absolute; top: 14px; left: 14px;
      background: var(--color-primary); color: #fff;
      font-weight: 800; font-size: 12px; letter-spacing: 0.16em;
      padding: 8px 14px; border-radius: 999px;
    }
    .edition__body { padding: 20px 22px 24px; }
    .edition__amount {
      font-weight: 900; font-size: 28px; color: var(--color-crimson);
      letter-spacing: -0.02em;
    }
    .edition__caption {
      font-size: 13px; color: var(--color-ink); opacity: 0.7;
      margin-top: 4px;
    }
    .edition--latest {
      background: var(--color-secondary);
    }
    .edition--latest .edition__amount { color: var(--color-primary); }
    .edition--latest .edition__caption { color: var(--color-primary); opacity: 0.85; }
    .edition--latest .edition__year {
      background: var(--color-crimson);
    }

    /* Jubilee edition (Editie 5) */
    .edition--jubilee {
      background: var(--color-primary);
      border-color: var(--color-primary);
    }
    .edition--jubilee .edition__img { background: var(--color-primary-dark); }
    .edition--jubilee .edition__amount {
      color: var(--color-secondary);
      font-size: 24px;
    }
    .edition--jubilee .edition__caption {
      color: rgba(255,255,255,0.75);
      opacity: 1;
    }
    .edition--jubilee .edition__year {
      background: var(--color-secondary);
      color: var(--color-primary);
    }
    .edition--jubilee .edition__body { padding-bottom: 20px; }
    .edition__cta {
      display: inline-block;
      margin-top: 10px;
      font-size: 12px;
      font-weight: 700;
      color: var(--color-secondary);
      text-decoration: none;
      letter-spacing: 0.02em;
      transition: color .15s ease;
    }
    .edition__cta:hover { color: #fff; }

    /* ════════════════════════════════════════════════════════════
       CTA — quiet, cream-on-cream call-to-action that doesn't compete
       with the wine footer below it. Just type + amber button.
       ════════════════════════════════════════════════════════════ */
    .cta {
      padding: clamp(70px, 8vw, 130px) 24px clamp(50px, 6vw, 90px);
      text-align: center;
      background: var(--color-cream);
    }
    .cta h2 {
      font-size: clamp(36px, 5.5vw, 76px);
      color: var(--color-primary);
    }
    .cta h2 em {
      color: var(--color-crimson); font-style: normal;
      display: inline-block; transform: rotate(-2deg);
    }
    .cta-sub {
      color: var(--color-ink); opacity: 0.8;
      font-size: clamp(15px, 1.4vw, 20px);
      margin: 16px auto 32px; max-width: 50ch;
    }
    .cta-buttons {
      display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
    }

    /* ════════════════════════════════════════════════════════════
       Walking feet accent (Animation A) — used as section eyebrow
       ════════════════════════════════════════════════════════════ */
    .feet-walker { width: 36px; height: 48px; flex-shrink: 0; }
    .feet-walker .foot--left,
    .feet-walker .foot--right { fill: var(--color-crimson); transform-origin: center; }
    @keyframes step-l {
      0%   { transform: translateY(10px) translateX(-50%) scale(1.25); opacity: 0; }
      40%  { transform: translateY(0)    translateX(-50%) scale(0.875); opacity: 1; }
      90%  { transform: translateY(20px) translateX(-25%) scale(1);    opacity: 0; }
      100% { opacity: 0; }
    }
    @keyframes step-r {
      0%   { transform: translateY(10px) translateX(-25%) scale(1.25); opacity: 0; }
      40%  { transform: translateY(0)    translateX(25%)  scale(0.875); opacity: 1; }
      90%  { transform: translateY(20px) translateX(0)    scale(1);    opacity: 0; }
      100% { opacity: 0; }
    }
    .feet-walker .foot--left  { animation: step-l 1s infinite; }
    .feet-walker .foot--right { animation: step-r 1s infinite; animation-delay: 0.5s; opacity: 0; }

    /* ════════════════════════════════════════════════════════════
       Responsive
       ════════════════════════════════════════════════════════════ */
    @media (max-width: 980px) {
      .wat-grid { grid-template-columns: 1fr; gap: 40px; }
      .waarom-grid { grid-template-columns: 1fr; gap: 40px; }
      .waarom-media { transform: none; margin-top: 8px; }
      .stats-grid { grid-template-columns: 1fr; gap: 50px; }
      .missie-grid { grid-template-columns: 1fr; gap: 24px; }
      .pillar:nth-child(1), .pillar:nth-child(2), .pillar:nth-child(3) { transform: none; }
      .editions-grid { grid-template-columns: repeat(2, 1fr); }
      .testimonials-grid { grid-template-columns: 1fr; }
    }
    /* ── Mobile hero ─ revert to full-bleed photo + dark scrim + white text.
       The cream/overlay split breaks at narrow widths because the SVG overlay
       is sized off hero HEIGHT (which goes huge on portrait) — at mobile we
       hide it entirely and let the photo own the hero. */
    @media (max-width: 720px) {
      /* Eén ontwerp voor alle mobiele breedtes: full-bleed foto,
         gecentreerde verticale stack, CTA's onderaan even groot. */
      .hero-card {
        background: var(--color-primary);          /* under the photo, in case it loads slow */
      }
      .hero-overlay { display: none; }
      .hero-card__photo {
        left: 0;                          /* full bleed again */
      }
      .hero-card__photo::after {
        /* scrim: donker genoeg bovenaan voor de datum-badge,
           luchtig in het midden, stevig onderaan voor tekst + knoppen */
        background: linear-gradient(180deg,
          rgba(0,0,0,0.45) 0%,
          rgba(0,0,0,0.15) 28%,
          rgba(0,0,0,0.30) 55%,
          rgba(0,0,0,0.80) 100%);
      }
      .hero-card__content {
        color: #fff;
        padding: 20px 24px calc(28px + env(safe-area-inset-bottom));
      }
      .hero-top { justify-content: center; }
      .hero-date {
        font-size: 11px;
        padding: 10px 18px;
        letter-spacing: 0.16em;
      }
      .hero-center {
        position: static;
        flex: 1;
        width: 100%;
        max-width: 100%;
        justify-content: flex-end;
        align-items: center;
        text-align: center;
        gap: 18px;
        padding: 0;
      }
      .hero-wordmark {
        filter: brightness(0) invert(1);           /* wine SVG → white */
        width: clamp(220px, 72vw, 340px);
        margin-inline: auto;
      }
      .hero-supertagline {
        color: var(--color-secondary);
        font-size: clamp(10px, 2.8vw, 12px);
        letter-spacing: 0.16em;
      }
      .hero-supertagline::before,
      .hero-supertagline::after { width: 20px; }
      .hero-tagline {
        color: rgba(255,255,255,0.92);
        opacity: 1;
        max-width: 34ch;
        font-size: 16px;
        line-height: 1.55;
      }
      /* CTA's: gestapeld en allemaal exact even groot */
      .hero-ctas {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 400px;
        gap: 12px;
        margin-top: 8px;
      }
      .hero-ctas .btn {
        width: 100%;
        text-align: center;
      }
      .hero-ctas .btn--ghost-dark {
        color: #fff;
        border-color: rgba(255,255,255,0.85);
        background: rgba(255,255,255,0.08);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
      }
      .hero-ctas .btn--ghost-dark:hover {
        background: #fff; color: var(--color-primary);
      }
    }

    @media (max-width: 580px) {
      .editions-grid { grid-template-columns: 1fr; }
      .hero-card__content, .hero-card { min-height: calc(100svh - 92px); }
      .spine-path { stroke-width: 14; }
      h1 { font-size: 56px; }
    }

    /* ════════════════════════════════════════════════════════════
       MOBILE-FIRST OVERRIDES (414px / iPhone XR)
       ════════════════════════════════════════════════════════════ */
    @media (max-width: 480px) {

      /* Hide spine on mobile */
      .page-spine { display: none; }

      /* Hero: geregeld in het 720px-blok hierboven (één mobiel ontwerp).
         Hier alleen fijnafstemming voor kleine schermen. */
      .hero-wordmark { width: clamp(200px, 78vw, 300px); }
      .hero-ctas { max-width: 100%; }

      /* Partners band: tighter */
      .partners-band { margin: 12px 16px 0; padding: 16px 0; }
      .partners-track img { height: 28px; }
      .partners-label { font-size: 10px; margin-bottom: 12px; }

      /* Sections: breathing room */
      .wat, .testimonials, .missie, .editions, .waarom { padding: 56px 0; margin-bottom: 20px; }
      .partners-band { margin-bottom: 40px; }
      .missie-head, .editions-head, .testimonials-head { margin-bottom: var(--space-6); }
      .narrow { padding: 0 24px; }

      /* Section headers: bigger, centered */
      .wat h2, .waarom h2, .missie-head h2, .editions-head h2,
      .testimonials-head h2, .stats-head h2 {
        text-align: center;
        font-size: clamp(32px, 9vw, 44px);
      }
      .wat .eyebrow, .waarom .eyebrow, .missie-head .eyebrow,
      .editions-head .eyebrow, .testimonials-head .eyebrow,
      .stats-head .eyebrow {
        justify-content: center;
        display: flex;
        margin-bottom: 8px;
      }
      .wat-text, .waarom-text { text-align: center; }
      .wat .btn, .waarom .btn { display: block; text-align: center; }

      /* Wat section: stack, no rotate */
      .wat-grid { grid-template-columns: 1fr; gap: 24px; }
      .wat-media { transform: none; }
      .wat-media__frame { border-width: 4px; }

      /* Waarom section: stack, no rotate */
      .waarom-grid { grid-template-columns: 1fr; gap: 24px; }
      .waarom-media { transform: none; }
      .waarom-media__frame { border-width: 4px; }

      /* Stats: full width numbers */
      .stats { margin: 20px 16px 40px; }
      .stats-card { padding: 40px 20px; border-radius: 24px; }
      .stats-grid { grid-template-columns: 1fr; gap: 32px; }
      .stat__value { font-size: clamp(40px, 12vw, 64px); }

      /* Testimonials: horizontal carousel */
      .testimonials-grid {
        grid-template-columns: none;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 12px;
        -webkit-overflow-scrolling: touch;
      }
      .testimonials-grid::-webkit-scrollbar { display: none; }
      .quote {
        flex: 0 0 85vw;
        scroll-snap-align: start;
        transform: none;
      }
      .quote:hover { transform: none !important; }

      /* Missie: horizontal carousel */
      .missie-grid {
        grid-template-columns: none;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 12px;
        -webkit-overflow-scrolling: touch;
      }
      .missie-grid::-webkit-scrollbar { display: none; }
      .pillar {
        flex: 0 0 80vw;
        scroll-snap-align: start;
        transform: none;
        padding: 28px 20px;
      }
      .pillar:nth-child(1), .pillar:nth-child(2), .pillar:nth-child(3) { transform: none; }

      /* Editions: horizontal scroll carousel */
      .editions-grid {
        grid-template-columns: none;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 12px;
        -webkit-overflow-scrolling: touch;
      }
      .editions-grid::-webkit-scrollbar { display: none; }
      .edition {
        flex: 0 0 70vw;
        scroll-snap-align: start;
      }

      /* CTA section */
      .cta { padding: 48px 16px 40px; }
      .cta h2 { font-size: clamp(28px, 8vw, 40px); }
      .cta-buttons { flex-direction: column; align-items: stretch; }

      /* Typography tightening */
      h2 { font-size: clamp(28px, 7vw, 48px); }
      h3 { font-size: clamp(18px, 4.5vw, 24px); }
      .eyebrow { font-size: 11px; }
    }