:root {
      --black: #f4f2ec;
      --white: #1a1714;
      --gold: #c9a84c;
      --charcoal: #ffffff;
      --mid: #d6d0c1;
      --muted: #6f695d;
    }
    body {
      background: var(--black);
      color: var(--white);
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* ── NAV ──
       The hero behind it is dark footage, so at the top of the page the bar
       is transparent with light text. Past 50px of scroll it lands on the
       cream page and flips back to the light bar the other pages use. */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 48px;
      transition: background 0.3s;
    }
    nav:not(.scrolled) {
      background: linear-gradient(to bottom, rgba(12,10,9,0.72), transparent);
    }
    nav:not(.scrolled) .nav-brand { color: #f5f3ef; }
    nav:not(.scrolled) .nav-links a { color: rgba(245,243,239,0.82); }
    nav:not(.scrolled) .nav-links a:hover,
    nav:not(.scrolled) .nav-links a.current { color: var(--gold); }
    nav:not(.scrolled) .nav-toggle span { background: #f5f3ef; }

    nav.scrolled { background: rgba(255,255,255,0.97); border-bottom: 1px solid #e6e1d6; }

    /* Logo lives in frontend/img/ — swap that file to rebrand. */
    .logo-placeholder {
      width: 38px; height: 38px;
      border: 1.5px solid var(--gold); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 13px; color: var(--gold); letter-spacing: 1px;
    }
    .nav-cta {
      border: 1.5px solid var(--gold); color: var(--gold) !important;
      padding: 9px 22px; border-radius: 2px;
      transition: background 0.25s, color 0.25s !important;
    }

    /* ════════════════════════════════════════
       HERO — full-bleed video slideshow
       ════════════════════════════════════════ */
    .hero {
      height: 100svh;
      min-height: 620px;
      display: flex; align-items: center; justify-content: center;
      padding: 80px 48px 60px;
      position: relative;
      overflow: hidden;
      background: #0c0a09;   /* the colour behind everything, if all else fails */
    }

    .hero-media { position: absolute; inset: 0; z-index: 0; }

    /* Each slide carries its own gradient. With no video file present this
       gradient IS the slide — the slideshow still reads as intentional. */
    .hero-slide {
      position: absolute; inset: 0;
      opacity: 0;
      transition: opacity 1.4s ease;
    }
    .hero-slide.is-active { opacity: 1; }
    .hero-slide:nth-child(1) { background: linear-gradient(160deg, #1d2a33 0%, #2f3b3f 45%, #6b5a3e 100%); }
    .hero-slide:nth-child(2) { background: linear-gradient(160deg, #2a211a 0%, #4a3626 50%, #7a5a34 100%); }
    .hero-slide:nth-child(3) { background: linear-gradient(160deg, #16212a 0%, #2b3a3a 50%, #4d5b4a 100%); }

    .hero-video {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      /* Let the slide gradient tint the footage rather than sitting flat on it */
      filter: saturate(0.92) contrast(1.02);
    }

    /* Readability layer. The bottom is darkest because that's where the
       caption and dots live; the top gets just enough for the nav. */
    .hero-scrim {
      position: absolute; inset: 0;
      background:
        linear-gradient(to bottom, rgba(8,7,6,0.55) 0%, rgba(8,7,6,0.12) 32%, rgba(8,7,6,0.30) 62%, rgba(8,7,6,0.80) 100%),
        radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0,0,0,0.28) 0%, transparent 75%);
    }

    .hero-content {
      position: relative; z-index: 10;
      max-width: 760px; text-align: center;
    }
    .hero-eyebrow {
      font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
      color: var(--gold); margin-bottom: 20px;
      display: flex; align-items: center; justify-content: center; gap: 12px;
      text-shadow: 0 1px 12px rgba(0,0,0,0.5);
    }
    .hero-eyebrow::before, .hero-eyebrow::after {
      content: ''; display: inline-block; width: 28px; height: 1px; background: var(--gold);
    }
    .hero-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(44px, 6.8vw, 96px);
      line-height: 0.95; letter-spacing: 1px; margin-bottom: 8px;
      color: #f7f5f0;
      text-shadow: 0 2px 30px rgba(0,0,0,0.45);
    }
    .hero-title em {
      font-family: 'Playfair Display', serif;
      font-style: italic; color: var(--gold);
      font-size: 0.72em; letter-spacing: 2px;
    }
    .hero-sub {
      font-size: 13.5px; color: rgba(240,237,230,0.82); letter-spacing: 0.4px;
      max-width: 480px; margin: 22px auto 38px; line-height: 1.9;
      text-shadow: 0 1px 16px rgba(0,0,0,0.5);
    }

    .hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

    /* Page default: bold dark ink on the cream page. */
    .btn-primary {
      display: inline-block; padding: 13px 36px;
      border: 1.5px solid #1a1714; color: #f4f2ec;
      font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
      text-decoration: none; transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
      cursor: pointer; font-family: 'Inter', sans-serif; background: #1a1714;
      font-weight: 600; box-shadow: 0 4px 14px rgba(26,23,20,.20);
    }
    .btn-primary:hover { background: var(--gold); border-color: var(--gold); color: #1a1714; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(201,168,76,.40); }
    .btn-ghost {
      display: inline-block; padding: 13px 36px;
      border: 1.5px solid transparent; color: var(--muted);
      font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
      text-decoration: none; transition: color 0.25s, border-color 0.25s;
      cursor: pointer; font-family: 'Inter', sans-serif; background: transparent;
    }
    .btn-ghost:hover { color: var(--white); border-color: #b8b09d; }

    /* On the dark hero the ink button would disappear — invert it there only. */
    .hero .btn-primary {
      background: #f4f2ec; border-color: #f4f2ec; color: #1a1714;
      box-shadow: 0 6px 22px rgba(0,0,0,0.35);
    }
    .hero .btn-primary:hover { background: var(--gold); border-color: var(--gold); color: #1a1714; }
    .hero .btn-ghost { color: rgba(245,243,239,0.9); border-color: rgba(245,243,239,0.35); }
    .hero .btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.08); }

    /* ── Slideshow chrome ── */
    .hero-caption {
      position: absolute; left: 48px; bottom: 34px; z-index: 10;
      font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
      color: rgba(245,243,239,0.72);
      display: flex; align-items: center; gap: 10px;
    }
    .hero-caption::before {
      content: ''; width: 26px; height: 1px; background: var(--gold);
    }

    .hero-dots {
      position: absolute; left: 50%; transform: translateX(-50%);
      bottom: 32px; z-index: 10;
      display: flex; gap: 10px;
    }
    .hero-dot {
      width: 34px; height: 3px; padding: 0;
      border: none; border-radius: 2px; cursor: pointer;
      background: rgba(245,243,239,0.28);
      transition: background 0.3s ease, transform 0.3s ease;
    }
    .hero-dot:hover { background: rgba(245,243,239,0.55); }
    .hero-dot.is-active { background: var(--gold); transform: scaleY(1.6); }
    .hero-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

    /* ════════════════════════════════════════
       BRAND STATEMENT
       ════════════════════════════════════════ */
    #statement {
      background: var(--charcoal);
      padding: 96px 48px 88px;
      text-align: center;
    }
    .statement-inner { max-width: 760px; margin: 0 auto; }
    .statement-inner .label { margin-bottom: 22px; }
    .statement-lead {
      font-family: 'Playfair Display', serif;
      font-size: clamp(20px, 2.6vw, 31px);
      line-height: 1.6; color: #2a251f;
    }
    .statement-lead em { font-style: italic; color: var(--gold); }
    .statement-rule {
      width: 70px; height: 1px; margin: 40px auto;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }
    .statement-stats { display: flex; justify-content: center; gap: clamp(32px, 7vw, 92px); flex-wrap: wrap; }
    .stat { display: flex; flex-direction: column; gap: 8px; }
    .stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 34px; letter-spacing: 2px; color: var(--gold); line-height: 1; }
    .stat-label { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); }

    /* ════════════════════════════════════════
       LIVE INVENTORY RAILS
       ════════════════════════════════════════ */
    #catalogue { background: var(--black); }
    .rail-section { margin-bottom: 72px; }
    .rail-section:last-child { margin-bottom: 0; }
    .rail-head {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 20px; margin-bottom: 28px;
    }
    .rail-head .section-title { margin-bottom: 0; }
    .rail-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .rail-all {
      font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--gold); text-decoration: none; margin-right: 8px;
      border-bottom: 1px solid transparent; transition: border-color 0.2s;
    }
    .rail-all:hover { border-color: var(--gold); }
    .rail-arrow {
      width: 38px; height: 38px; flex: 0 0 38px;
      border: 1px solid #d8d2c4; background: var(--charcoal); color: var(--white);
      border-radius: 50%; cursor: pointer; font-size: 17px; line-height: 1;
      transition: border-color .2s, color .2s, opacity .2s;
    }
    .rail-arrow:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
    .rail-arrow:disabled { opacity: 0.28; cursor: default; }
    .rail-arrow[hidden] { display: none; }

    .rail-track {
      display: flex; gap: 20px; overflow-x: auto; padding-bottom: 10px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none; -ms-overflow-style: none;
    }
    .rail-track::-webkit-scrollbar { display: none; }

    .rail-card {
      flex: 0 0 300px; scroll-snap-align: start;
      background: var(--charcoal); border: 1px solid #e6e1d6; border-radius: 6px;
      overflow: hidden; text-decoration: none; color: inherit;
      display: flex; flex-direction: column;
      transition: transform .3s ease, box-shadow .3s ease;
    }
    .rail-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(26,23,20,0.15); }
    .rail-photo {
      position: relative; aspect-ratio: 16/10; overflow: hidden;
      /* Understudy for a listing that has no photo */
      background: linear-gradient(150deg, #2b2620 0%, #4a4238 55%, #6b6152 100%);
    }
    .rail-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
    .rail-card:hover .rail-photo img { transform: scale(1.06); }
    .rail-badge {
      position: absolute; top: 12px; left: 12px;
      font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
      padding: 5px 10px; border-radius: 20px;
      background: var(--gold); color: #1a1714;
    }
    .rail-body { padding: 20px 20px 18px; display: flex; flex-direction: column; flex: 1; }
    .rail-body h3 { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px; margin-bottom: 5px; }
    .rail-place { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
    .rail-foot {
      margin-top: auto; display: flex; align-items: baseline; justify-content: space-between;
      gap: 12px; border-top: 1px solid #eee9de; padding-top: 14px;
    }
    .rail-price { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1px; }
    .rail-price span {
      font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 1px;
      text-transform: uppercase; color: var(--muted); margin-left: 6px;
    }
    .rail-meta { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); text-align: right; }

    /* Loading placeholders — same footprint as a real card, so the rail
       doesn't jump when the fetch resolves. */
    .rail-skel {
      height: 330px; pointer-events: none; border-color: #eee9de;
      background: linear-gradient(100deg, #f0ece3 30%, #f7f4ee 50%, #f0ece3 70%);
      background-size: 300% 100%;
      animation: railShimmer 1.3s ease-in-out infinite;
    }
    @keyframes railShimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

    .rail-note { font-size: 13px; color: var(--muted); padding: 26px 2px; line-height: 1.8; }
    .rail-note.is-error { color: #a3382f; }

    /* ════════════════════════════════════════
       THE PLACE — the Hideout and the Cafe
       ════════════════════════════════════════ */
    #the-place { background: var(--black); padding-top: 96px; }
    .place-head { max-width: 620px; margin-bottom: 48px; }

    .place-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
    .place-card {
      background: var(--charcoal);
      border: 1px solid #e6e1d6; border-radius: 6px;
      overflow: hidden;
      display: flex; flex-direction: column;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
    .place-card:hover { box-shadow: 0 22px 50px rgba(26,23,20,0.13); transform: translateY(-3px); }

    /* The gradient is the photo's understudy: if img/gallery/*.jpg isn't there
       yet, the inline onerror removes the <img> and this shows instead. */
    .place-photo {
      position: relative; aspect-ratio: 16/10; overflow: hidden;
      background: linear-gradient(150deg, #2b2620 0%, #4a4238 55%, #6b6152 100%);
    }
    .place-photo[data-fallback="cafe"] {
      background: linear-gradient(150deg, #2a211a 0%, #4a3626 55%, #7a5a34 100%);
    }
    .place-photo img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      transition: transform 0.6s ease;
    }
    .place-card:hover .place-photo img { transform: scale(1.05); }
    .place-badge {
      position: absolute; top: 14px; left: 14px;
      font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
      padding: 6px 12px; border-radius: 20px;
      background: rgba(12,10,9,0.62); color: var(--gold);
      border: 1px solid rgba(201,168,76,0.4);
      backdrop-filter: blur(4px);
    }

    .place-body { padding: 32px 30px 30px; display: flex; flex-direction: column; flex: 1; }
    .place-body h3 { font-family: 'Bebas Neue', sans-serif; font-size: 34px; letter-spacing: 1px; margin-bottom: 14px; }
    .place-body > p { font-size: 13px; color: var(--muted); line-height: 1.9; margin-bottom: 22px; }
    .place-actions {
      display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
      margin-top: auto;
    }
    .place-ig {
      font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--muted); text-decoration: none;
      border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s;
    }
    .place-ig:hover { color: var(--gold); border-color: var(--gold); }

    /* ════════════════════════════════════════
       GALLERY — scroll-driven collage
       ════════════════════════════════════════ */
    .card-reveal-zone {
      position: relative;
      height: 500vh;
      background: var(--black);
    }
    .card-reveal-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .card-reveal-sticky::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(201,168,76,0.05) 0%, transparent 70%),
        var(--black);
      z-index: 0;
    }
    .card-reveal-label {
      position: relative; z-index: 5;
      text-align: center;
      pointer-events: none;
    }
    .card-reveal-label .label { margin-bottom: 10px; }
    .card-reveal-label h3 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(28px, 4vw, 46px);
      letter-spacing: 1px;
      color: #4a443a;
    }

    .reveal-card {
      position: absolute;
      z-index: 5;
      border-radius: 6px;
      overflow: hidden;
      /* Stands in for a photo that hasn't been shot yet — see img/gallery/README.md */
      background: linear-gradient(150deg, #2b2620 0%, #4a4238 55%, #6b6152 100%);
      box-shadow: 0 24px 60px rgba(0,0,0,0.72), 0 0 0 1px rgba(0,0,0,0.05);
      opacity: 0;
      transform: translateY(60px) scale(0.85);
      transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease;
      cursor: pointer;
    }
    .reveal-card.is-active { opacity: 1; transform: translateY(0) scale(1); }
    .reveal-card:hover {
      box-shadow: 0 36px 90px rgba(0,0,0,0.85), 0 0 32px rgba(201,168,76,0.22), 0 0 0 1px rgba(201,168,76,0.32);
      z-index: 20;
    }
    .reveal-card::before {
      content: '';
      position: absolute; inset: 0; z-index: 2;
      background: linear-gradient(118deg, transparent 30%, rgba(0,0,0,0.22) 50%, transparent 70%);
      opacity: 0;
      transform: translateX(-100%) skewX(-18deg);
      transition: opacity 0.3s, transform 0.55s ease;
      pointer-events: none; mix-blend-mode: screen;
    }
    .reveal-card:hover::before { opacity: 1; transform: translateX(100%) skewX(-18deg); }
    .reveal-card::after {
      content: '';
      position: absolute; inset: 0; z-index: 1;
      border: 1px solid rgba(201,168,76,0);
      transition: border-color 0.35s;
      pointer-events: none;
    }
    .reveal-card:hover::after { border-color: rgba(201,168,76,0.38); }
    .reveal-card img {
      display: block; width: 100%; height: 100%;
      object-fit: cover;
      filter: brightness(0.82) saturate(0.85);
      transition: filter 0.4s ease, transform 0.4s ease;
    }
    .reveal-card:hover img { filter: brightness(1.08) saturate(1.18) contrast(1.05); transform: scale(1.08); }
    .reveal-card-tag {
      position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
      padding: 10px 12px 12px;
      background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
      font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #f5f3ef;
    }

    .rc-1 { width: 160px; height: 215px; top: 14%; left: 6%; }
    .rc-1.is-active { transform: rotate(-6deg) translateY(0) scale(1); }
    .rc-2 { width: 130px; height: 175px; top: 60%; left: 4%; }
    .rc-2.is-active { transform: rotate(5deg) translateY(0) scale(1); }
    .rc-3 { width: 140px; height: 188px; top: 30%; left: 19%; }
    .rc-3.is-active { transform: rotate(3deg) translateY(0) scale(1); }
    .rc-4 { width: 112px; height: 150px; top: 70%; left: 20%; }
    .rc-4.is-active { transform: rotate(-4deg) translateY(0) scale(1); }
    .rc-5 { width: 168px; height: 226px; top: 12%; right: 6%; }
    .rc-5.is-active { transform: rotate(7deg) translateY(0) scale(1); }
    .rc-6 { width: 124px; height: 167px; top: 58%; right: 4%; }
    .rc-6.is-active { transform: rotate(-5deg) translateY(0) scale(1); }
    .rc-7 { width: 144px; height: 194px; top: 28%; right: 19%; }
    .rc-7.is-active { transform: rotate(-3deg) translateY(0) scale(1); }
    .rc-8 { width: 114px; height: 155px; top: 68%; right: 20%; }
    .rc-8.is-active { transform: rotate(6deg) translateY(0) scale(1); }

    /* ════════════════════════════════════════
       SECTION DIVIDER ANIMATION
       ════════════════════════════════════════ */
    .sec-divider {
      height: 56px; position: relative;
      display: flex; align-items: center; justify-content: center;
      overflow: visible; background: transparent;
    }
    .sec-divider::before {
      content: ''; position: absolute; width: 0; height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      animation: sweepLine 3.2s ease-in-out infinite;
    }
    .sec-divider::after {
      content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%;
      background: var(--gold); box-shadow: 0 0 20px rgba(201,168,76,0.9);
      animation: pulseDot 3.2s ease-in-out infinite;
    }
    @keyframes sweepLine {
      0%   { width: 0;        opacity: 0; }
      20%  { opacity: 1; }
      50%  { width: min(700px, 80vw); opacity: 1; }
      80%  { opacity: 1; }
      100% { width: 0;        opacity: 0; }
    }
    @keyframes pulseDot {
      0%,100% { transform: scale(0.7); opacity: 0.5; }
      50%      { transform: scale(1.3); opacity: 1;   }
    }

    /* ════════════════════════════════════════
       SECTIONS
       ════════════════════════════════════════ */
    section { padding: 80px 48px; position: relative; }
    .label { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
    .section-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(34px, 4.5vw, 58px);
      letter-spacing: 1px; line-height: 1; margin-bottom: 20px;
    }
    .section-intro { color: var(--muted); font-size: 13px; max-width: 560px; line-height: 1.9; }

    /* ── THE PIVOT (our place → the platform) ── */
    #pivot { background: var(--charcoal); }
    .pivot-box {
      max-width: 720px; margin: 0 auto; text-align: left;
      border-left: 2px solid var(--gold); padding-left: 40px;
    }
    .pivot-body { color: var(--muted); font-size: 14px; line-height: 2; margin-bottom: 30px; }

    /* ── HOW IT WORKS (4 pillars: Match / Stay / Eat / Explore) ── */
    #how-it-works { background: var(--black); }
    .pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #e6e1d6; margin-top: 44px; }
    .pillar-card { background: var(--charcoal); padding: 36px 26px; transition: background 0.25s; position: relative; }
    .pillar-card:hover { background: #f1eee7; }
    .pillar-num {
      font-family: 'Bebas Neue', sans-serif; font-size: 13px; color: var(--gold);
      letter-spacing: 2px; margin-bottom: 18px; opacity: 0.7;
    }
    .pillar-icon { width: 38px; height: 38px; margin-bottom: 18px; opacity: 0.9; }
    .pillar-card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 19px; letter-spacing: 1px; margin-bottom: 10px; }
    .pillar-card p { font-size: 12px; color: var(--muted); line-height: 1.8; }
    .pillar-link { display: inline-block; margin-top: 16px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
    .pillar-link:hover { border-color: var(--gold); }

    /* ── MATCH SHOWCASE ── */
    #match-showcase { background: var(--charcoal); }
    .match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    .match-body { color: var(--muted); font-size: 13px; line-height: 1.9; }
    .match-points { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
    .match-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; color: #3d3931; }
    .match-points li::before {
      content: '✦'; color: var(--gold); font-size: 12px; flex-shrink: 0; margin-top: 2px;
    }
    .match-visual {
      aspect-ratio: 4/5; background: var(--black);
      border: 1px solid #dcd6c9; border-radius: 6px;
      position: relative; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .match-visual::before {
      content: '';
      position: absolute; width: 220px; height: 220px; border-radius: 50%;
      background: radial-gradient(circle, rgba(201,168,76,0.16), transparent 70%);
    }
    .match-profile-card {
      position: relative; z-index: 2;
      width: 78%; background: var(--mid); border-radius: 8px;
      padding: 20px; border: 1px solid #c4bcab;
      box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    }
    .match-profile-avatar {
      width: 100%; aspect-ratio: 1; border-radius: 6px; margin-bottom: 14px;
      background: linear-gradient(135deg, #f4f2ec, #ffffff);
    }
    .match-profile-card h4 { font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 1px; margin-bottom: 4px; }
    .match-profile-card p { font-size: 11px; color: var(--muted); }
    .match-tags { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
    .match-tag { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; padding: 4px 9px; border: 1px solid #b8b09d; border-radius: 20px; color: var(--gold); }

    /* The .feature-split blocks that used to live here were replaced by the
       live rails in #catalogue. The chips survive — .place-card still uses them. */
    .feature-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
    .feature-chip { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 12px; border: 1px solid #c4bcab; border-radius: 20px; color: #3d3931; }

    /* ── FOR HOTELS TEASER ── */
    #for-hotels { background: var(--charcoal); }
    .hotels-cta-box {
      border: 1px dashed #ccc5b5; border-radius: 6px;
      padding: 56px 48px; text-align: center;
      background: linear-gradient(135deg, rgba(201,168,76,0.04), transparent);
    }
    .hotels-cta-box h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(28px,3.6vw,46px); letter-spacing: 1px; margin-bottom: 16px; }
    .hotels-cta-box p { color: var(--muted); font-size: 13px; max-width: 480px; margin: 0 auto 28px; line-height: 1.9; }

    /* ── TESTIMONIALS ── */
    #testimonials { background: var(--black); }
    .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
    .testi-card { border: 1px solid #e6e1d6; padding: 32px 26px; position: relative; background: var(--charcoal); }
    .testi-card::before { content: '"'; position: absolute; top: 16px; right: 20px; font-family: 'Playfair Display', serif; font-size: 64px; color: var(--gold); opacity: 0.14; line-height: 1; }
    .testi-text { font-size: 13px; color: #48443b; line-height: 1.9; margin-bottom: 24px; font-style: italic; }
    .testi-author { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
    .testi-role { font-size: 10px; color: var(--muted); margin-top: 4px; }

    /* ── FINAL CTA ── */
    #final-cta {
      background: linear-gradient(135deg, var(--black) 0%, #ffffff 100%);
      text-align: center;
      padding: 100px 48px;
    }
    #final-cta h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(36px, 5vw, 64px); letter-spacing: 1px; margin-bottom: 16px; }
    #final-cta p { color: var(--muted); font-size: 13px; max-width: 460px; margin: 0 auto 32px; }

    /* ── FOOTER ── */
    footer {
      background: var(--charcoal); padding: 40px 48px 28px;
      border-top: 1px solid #e6e1d6;
    }
    .footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; margin-bottom: 28px; }
    .footer-col h5 { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
    .footer-col a { display: block; font-size: 12px; color: var(--muted); text-decoration: none; margin-bottom: 9px; transition: color 0.2s; }
    .footer-col a:hover { color: var(--white); }
    /* Destination quick-links — inventory one click from the page bottom */
    .footer-places { padding: 24px 0; border-top: 1px solid #e6e1d6; }
    .footer-places h5 { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
    .footer-place-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
    .footer-place-links a {
      font-size: 12px; color: var(--muted); text-decoration: none;
      transition: color 0.2s;
    }
    .footer-place-links a:hover { color: var(--white); }

    .footer-bottom {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 24px; border-top: 1px solid #e6e1d6; flex-wrap: wrap; gap: 14px;
    }
    .footer-legal { display: flex; gap: 22px; }
    .footer-legal a { font-size: 10px; letter-spacing: 1px; color: var(--muted); text-decoration: none; transition: color 0.2s; }
    .footer-legal a:hover { color: var(--gold); }
    .footer-socials { display: flex; gap: 16px; }
    .footer-socials a { color: var(--muted); text-decoration: none; font-size: 11px; transition: color 0.2s; }
    .footer-socials a:hover { color: var(--gold); }

    /* ── FADE UP ── */
    .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .fade-up.visible { opacity: 1; transform: none; }

    @media (max-width: 900px) {
      nav { padding: 14px 20px; }
      .nav-links { gap: 16px; }
      .nav-links a:not(.nav-cta) { display: none; }
      section { padding: 60px 20px; }
      .hero { padding: 90px 20px 76px; height: auto; min-height: 100svh; }
      .hero-caption { left: 20px; bottom: 26px; font-size: 9px; letter-spacing: 2px; }
      .hero-caption::before { width: 16px; }
      .hero-dots { bottom: 24px; left: auto; right: 20px; transform: none; }
      .hero-dot { width: 24px; }
      .hero-actions .btn-primary, .hero-actions .btn-ghost { padding: 13px 28px; }
      #statement { padding: 64px 20px 72px; }
      .statement-stats { gap: 30px; }

      .rail-head { flex-direction: column; align-items: flex-start; gap: 16px; }
      .rail-card { flex-basis: 260px; }
      .rail-section { margin-bottom: 56px; }

      #the-place { padding-top: 64px; }
      .place-split { grid-template-columns: 1fr; }
      .pivot-box { padding-left: 22px; }
      .card-reveal-zone { height: 380vh; }
      .rc-1,.rc-2 { width: 110px; height: 148px; }
      .rc-3,.rc-4,.rc-7,.rc-8 { display: none; }
      .rc-5,.rc-6 { width: 100px; height: 134px; }
      .rc-1 { left: 4%; top: 18%; } .rc-2 { left: 4%; top: 60%; }
      .rc-5 { right: 4%; top: 18%; } .rc-6 { right: 4%; top: 60%; }
      .pillars-grid { grid-template-columns: 1fr 1fr; }
      .match-grid { grid-template-columns: 1fr; gap: 40px; }
      .testimonials-grid { grid-template-columns: 1fr; }
      .footer-top { flex-direction: column; }
    }

    /* On phones the caption and dots would collide — the dots win. */
    @media (max-width: 420px) {
      .hero-caption { display: none; }
      .hero-dots { left: 50%; right: auto; transform: translateX(-50%); }
    }

    /* ── Mobile nav (hamburger) ── */
    .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
    .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--white); margin: 5px 0; transition: transform .3s ease, opacity .3s ease; }
    .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2) { opacity: 0; }
    .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    @media (max-width: 900px) {
      .nav-toggle { display: block; position: relative; z-index: 260; }
      .nav-links {
        position: fixed; inset: 0; margin: 0;
        background: rgba(255,255,255,0.98);
        flex-direction: column; align-items: center; justify-content: center;
        gap: 26px; z-index: 250;
        transform: translateX(100%); transition: transform .35s ease;
      }
      .nav-links.open { transform: translateX(0); }
      .nav-links a, .nav-links a:not(.nav-cta) { display: block !important; font-size: 15px !important; letter-spacing: 2px; }
      .nav-links .nav-cta { padding: 12px 28px; }

      /* The open menu is a solid white panel, so its links must go dark again
         even while the nav is still in its light-on-video state. */
      nav:not(.scrolled) .nav-links.open a { color: var(--muted); }
      nav:not(.scrolled) .nav-links.open a:hover { color: var(--gold); }
      nav:not(.scrolled) .nav-toggle.open span { background: var(--white); }
    }

    /* ── Reduced motion: kill the ambient loops and the crossfade ──
       js/home-hero.js separately stops the video and the auto-advance. */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .hero-slide { transition: none; }
      .sec-divider::before, .sec-divider::after { animation: none; }
      .sec-divider::before { width: min(700px, 80vw); opacity: 1; }
      .fade-up { transition: none; opacity: 1; transform: none; }
      .reveal-card { transition: opacity .01s linear; }
      .rail-skel { animation: none; }
      .rail-card { transition: none; }
      .rail-card:hover { transform: none; }
      .rail-track { scroll-behavior: auto; }
    }