/* Gen-3 — the-people.html. Extracted verbatim; do not edit here.
   Regenerate: python3 scripts/extract-gen3-assets.py */

@import url("_fonts.css");

:root {
    --paper: #F4F4F4;
    --ink: #1D232A;
    --red: #D52128;
    --deep-red: #980117;
    --gold-1: #A37529;
    --gold-2: #E2BA73;
    --border: #D9D2C3;
    --font-display: "DIN Stand-in", "Arial Narrow", sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    /* Shared grid — one gutter/max-width system for every section */
    --grid-max: 1400px;
    --grid-gutter: max(clamp(20px, 5vw, 64px), calc(50% - (var(--grid-max) / 2)));
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; overflow-x: hidden; }
  html, body {
    /* Body colour is driven by JS on scroll (ink -> paper) — see script.
       No section owns its own background; this is what shows through as
       the hero's video fades, so there's one continuous page colour, not
       a seam between components. */
    background-color: var(--ink);
    transition: background-color 0.06s linear;
  }
  body {
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
  }
  img, svg { max-width: 100%; }

  /* ============================================================
     HERO
     ============================================================ */
  .hero {
    position: relative;
    height: 100vh;
    min-height: 520px;
    width: 100%;
    overflow: hidden;
    background: transparent;
  }

  .hero video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; opacity: 0;
    transition: opacity 250ms ease;
  }
  .hero.loaded video { opacity: 1; }
  .hero.reduced video { display: none; }

  .hero .poster {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
  }
  .hero.loaded:not(.reduced) .poster { display: none; }

  .hero .scrim {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
      linear-gradient(to bottom, rgba(29,23,17,.60) 0%, rgba(29,23,17,.05) 20%, rgba(29,23,17,.05) 55%, rgba(29,23,17,.20) 72%, rgba(29,23,17,.93) 100%);
    transition: opacity 200ms ease;
  }

  .hero-anchor {
    position: absolute;
    left: 50%; bottom: 0;
    width: clamp(200px, 22vw, 320px);
    opacity: 0.70;
    z-index: 2;
    pointer-events: none;
    transform: translate(calc(-50% + 300px), 30%);
  }
  .hero-anchor svg { width: 100%; height: auto; display: block; }

  .hero-baseline {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 6px;
    background: var(--red);
    z-index: 4;
    pointer-events: none;
  }

  .play-pause {
    position: absolute;
    right: var(--grid-gutter); bottom: 26px;
    z-index: 3;
    width: 38px; height: 38px; border-radius: 2px;
    border: 1px solid rgba(244,244,244,.55);
    background: transparent;
    display: grid; place-items: center;
    cursor: pointer;
    opacity: 0;
    transition: background 150ms ease, border-color 150ms ease, opacity 200ms ease;
  }
  .hero.loaded .play-pause { opacity: 1; }
  .play-pause:hover { background: rgba(244,244,244,.12); border-color: rgba(244,244,244,.85); }
  .play-pause:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
  .pp-icon { position: relative; width: 18px; height: 18px; display: block; }
  .pp-icon svg {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
    transition: transform 320ms cubic-bezier(.65,0,.35,1), opacity 250ms ease;
  }
  .pp-icon .i-play { transform: translate(-50%,-50%) scale(.5); opacity: 0; }
  .play-pause[aria-pressed="true"] .i-pause { transform: translate(-50%,-50%) scale(.5); opacity: 0; }
  .play-pause[aria-pressed="true"] .i-play { transform: translate(-50%,-50%) scale(1); opacity: 1; }

  .hero-header {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    display: flex; align-items: center; gap: 22px;
    padding: 22px var(--grid-gutter);
    opacity: 0;
    transition: opacity 250ms ease;
    transition-delay: 200ms;
  }
  .hero.loaded .hero-header { opacity: 1; }
  /* Once the banner has scrolled past, the header switches from
     absolute-over-the-image to a fixed, compact bar — kept minimal
     (slim padding, translucent dark fill) so it doesn't eat into the
     page below it the way the full banner treatment would. */
  .hero-header.is-stuck {
    position: fixed;
    padding-top: 12px;
    padding-bottom: 12px;
    background: rgba(29, 35, 42, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
  .hero-header .mark { width: clamp(120px, 13vw, 158px); flex: 0 0 auto; display: block; }
  .hero-header .spacer { flex: 1 1 auto; }
  .hero-header nav { display: flex; gap: 26px; flex: 0 0 auto; }
  .hero-header > .nav-link { flex: 0 0 auto; }

  .nav-link {
    position: relative;
    color: var(--paper); text-decoration: none;
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
    padding: 4px 0;
    white-space: nowrap;
  }
  .nav-link::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
    background: var(--red);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .nav-link:hover::after, .nav-link:focus-visible::after { width: 100%; }
  @media (max-width: 780px) { .hero-header nav { display: none; } }

  .burger-wrap { position: relative; flex: 0 0 auto; }
  .burger {
    width: 38px; height: 38px; border-radius: 2px;
    border: 1px solid rgba(244,244,244,.55);
    background: transparent;
    display: grid; place-items: center;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
  }
  .burger[aria-expanded="true"] { background: rgba(244,244,244,.12); border-color: rgba(244,244,244,.85); }
  .burger:hover { background: var(--red); border-color: var(--red); }
  .burger:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
  .burger-icon { position: relative; width: 18px; height: 18px; display: block; }
  .burger-icon svg {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
    transition: transform 320ms cubic-bezier(.65,0,.35,1), opacity 250ms ease;
  }
  .burger-icon .i-close { transform: translate(-50%,-50%) scale(.5); opacity: 0; }
  .burger[aria-expanded="true"] .i-bars { transform: translate(-50%,-50%) scale(.5); opacity: 0; }
  .burger[aria-expanded="true"] .i-close { transform: translate(-50%,-50%) scale(1); opacity: 1; }

  .secondary-menu {
    position: absolute; top: calc(100% + 12px); right: 0;
    min-width: 210px;
    background: var(--paper);
    border-radius: 2px;
    padding: 10px;
    box-shadow: 0 16px 32px rgba(0,0,0,.32);
    display: flex; flex-direction: column; gap: 1px;
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 420ms cubic-bezier(.65,0,.35,1);
    overflow: hidden;
  }
  .secondary-menu::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
  }
  .secondary-menu.open { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); pointer-events: auto; }
  .secondary-menu a {
    display: block;
    color: var(--ink); text-decoration: none;
    font-size: 13px; font-weight: 600;
    padding: 10px 12px;
  }
  .secondary-menu a span {
    position: relative;
    display: inline-block;
  }
  .secondary-menu a span::after {
    content: "";
    position: absolute; left: 0; bottom: -3px;
    height: 1px; width: 0;
    background: var(--red);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .secondary-menu a:hover span::after, .secondary-menu a:focus-visible span::after { width: 100%; }

  .secondary-menu-tier-primary { display: none; }
  .secondary-menu-divider { display: none; height: 1px; background: var(--border); margin: 6px 12px; }
  .secondary-menu a.secondary-menu-primary {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: -0.01em; font-size: 15px;
  }

  /* Full-screen takeover on tablet/mobile — replaces the small
     anchored dropdown with a left-aligned stack of links covering
     the viewport, matching the concept's bold, editorial style. The
     burger button gets a z-index above the overlay so it stays
     visible/clickable as the close control. */
  @media (max-width: 780px) {
    /* .hero-content shares .hero-header's z-index (3) but sits later
       in the DOM, so it would otherwise paint over the open menu
       (a nested stacking context can't out-rank an equal-or-higher
       sibling above it) — bumping the header's z-index here keeps
       it, and the menu inside it, above the hero body on mobile. */
    .hero-header { z-index: 9999; }
    /* Solid grey band instead of the desktop translucent/blurred one —
       backdrop-filter is a common source of mobile Safari rendering
       quirks with position:fixed, so mobile gets a plain opaque fill
       instead of depending on it. */
    .hero-header.is-stuck {
      background: var(--ink);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    /* No reason to let the page scroll behind a full-screen takeover. */
    body.menu-open { overflow: hidden; }
    /* backdrop-filter on the stuck header creates a new containing
       block for position:fixed descendants (spec behaviour) — with
       the menu nested inside .hero-header, that shrank the "full
       screen" takeover down to just the slim stuck bar's own box
       whenever it was opened after scrolling past the hero. Turning
       the blur off while the menu is open avoids that entirely. */
    body.menu-open .hero-header.is-stuck { backdrop-filter: none; -webkit-backdrop-filter: none; }
    /* The full-screen menu (fixed, inset:0, nested in .burger-wrap)
       otherwise paints straight over the logo — lift it above the
       menu's stacking context so it stays visible while open. */
    .site-logo-link { position: relative; z-index: 30; }
    .burger-wrap { position: relative; z-index: 21; }
    .burger { position: relative; z-index: 2; }
    .secondary-menu { z-index: 1; }
    .secondary-menu {
      position: fixed;
      inset: 0;
      width: 100%; height: 100%;
      min-width: 0;
      background: var(--ink);
      border-radius: 0;
      padding: 110px var(--grid-gutter) 40px;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .secondary-menu::before { display: none; }
    .secondary-menu a {
      width: 100%;
      color: var(--paper);
      font-size: 16px;
      padding: 16px 0;
      border-bottom: 1px solid rgba(244,244,244,.15);
    }
    .secondary-menu a.secondary-menu-primary {
      font-size: clamp(28px, 8vw, 36px);
      padding: 14px 0;
    }
    .secondary-menu a span::after { background: var(--red); }
    .secondary-menu-divider { display: block; background: rgba(244,244,244,.15); margin: 8px 0; }
  }

  @media (max-width: 780px) {
    .hero-header > a.nav-link { display: none; }
    .secondary-menu-tier-primary { display: flex; flex-direction: column; }
    .secondary-menu-divider { display: block; }
    .secondary-menu { min-width: 230px; }
  }

  .hero-content {
    position: absolute; z-index: 3;
    left: var(--grid-gutter);
    right: var(--grid-gutter);
    bottom: 100px;
  }
  .hero-content .line {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--paper);
    font-size: clamp(73px, 7.6vw, 104px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 0;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 250ms ease, transform 250ms ease;
    transition-delay: 260ms;
  }
  .hero.loaded .hero-content .line { opacity: 1; transform: translateY(0); }
  .hero-content .line .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    transition: opacity 250ms ease;
  }
  @media (max-width: 640px) { .hero-content .line { white-space: normal; } }

  .hero-copy-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-top: 32px;
    flex-wrap: wrap;
  }
  .hero-copy-text { min-width: 0; flex: 0 0 66.6667%; }

  .hero-content .copy {
    margin: 0;
    font-size: 20px;
    line-height: 1.45;
    color: var(--paper);
    max-width: 100%;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 250ms ease, transform 250ms ease;
    transition-delay: 560ms;
  }
  .hero-content .copy + .copy { margin-top: 0; transition-delay: 640ms; }
  .hero.loaded .hero-content .copy { opacity: 0.92; transform: translateY(0); }

  /* Plain text link — no box, no border, no arrow. An underline at 50% of
     the label's own width, growing to full length on hover/focus. */
  .hero-content .cta {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    margin-left: auto;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--paper);
    text-decoration: none;
    cursor: pointer;
    padding-bottom: 7px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 250ms ease, transform 250ms ease;
    transition-delay: 760ms;
  }
  .hero.loaded .hero-content .cta { opacity: 1; transform: translateY(0); }
  .hero-content .cta:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
  .hero-content .cta::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    height: 1px; width: 50%;
    background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
    opacity: var(--line-fade, 1);
    transition: width 320ms cubic-bezier(.65,0,.35,1), opacity 250ms ease;
  }
  .hero-content .cta:hover::after, .hero-content .cta:focus-visible::after { width: 100%; }

  @media (max-width: 640px) {
    .hero-content { bottom: 100px; }
    .hero-content .copy { max-width: 34ch; }
  }

  /* ============================================================
     CARDS — "Four ways into West Cork."
     ============================================================ */
  section.pillars {
    position: relative;
    padding: clamp(56px, 8vw, 96px) var(--grid-gutter) 100px;
    background: transparent;
  }
  .pillars-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: clamp(28px, 4vw, 44px); flex-wrap: wrap;
  }
  .pillars-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: clamp(24px, 4.6vw, 60px);
    line-height: 0.95;
    margin: 0;
    color: var(--ink);
    white-space: nowrap;
  }
  .pillars-head h2 .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .card-row { position: relative; display: flex; gap: 12px; height: clamp(440px, 60vh, 640px); }
  /* Full-width red band behind the bottom third of the cards, matching
     the homepage's "Welcome to West Cork" treatment — same component,
     same background, wherever this section is placed. z-index:0 (not
     negative — see the note on .place-chapter-mark elsewhere on this
     page re: the overflow-x:hidden + negative-z-index Chromium bug)
     placed first in the DOM, with .pillar-card's own position:relative
     giving it the same stack level so the cards paint on top. Hidden
     at the 860px breakpoint, where the row becomes a 2x2/1-col grid
     with an auto height this percentage math can't track. */
  .pillars-bleed {
    position: absolute;
    left: calc(50% - 50vw);
    width: 100vw;
    top: 66.67%;
    bottom: -100px;
    background: var(--red);
    z-index: 0;
    pointer-events: none;
  }
  @media (max-width: 860px) {
    .pillars-bleed { display: none; }
  }
  .pillar-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 2px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: var(--paper);
    outline: none;
  }

  .pillar-card img.photo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.25,0.1,.25,1);
  }
  .pillar-card:hover img.photo { transform: scale(1.045); }


  .pillar-card .scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(29,35,42,0) 0%, rgba(29,35,42,0) 40%, rgba(29,35,42,.55) 78%, rgba(29,35,42,.92) 100%);
  }
  .pillar-card:focus-visible { box-shadow: inset 0 0 0 3px var(--paper); }

  .pillar-card .num {
    position: absolute; top: 18px; left: 20px;
    font-family: var(--font-body); font-weight: 600; font-size: 11px;
    letter-spacing: 0.12em; color: var(--gold-2);
    font-variant-numeric: tabular-nums;
  }

  .pillar-card .body { position: absolute; left: 20px; right: 20px; bottom: 20px; }
  .pillar-card .kicker {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: -0.01em; font-size: clamp(20px, 2.6vw, 30px);
    line-height: 1; margin: 0;
    white-space: nowrap;
  }

  .pillar-card .arrow {
    position: absolute; right: 18px; bottom: 18px;
    width: 32px; height: 32px; border-radius: 2px;
    border: 1px solid rgba(244,244,244,.55);
    display: grid; place-items: center;
    opacity: 0; transform: translate(6px, 6px) scale(.8);
    transition: opacity 280ms ease, transform 280ms ease, background 200ms ease, border-color 200ms ease;
  }
  .pillar-card:hover .arrow, .pillar-card:focus-visible .arrow {
    opacity: 1; transform: translate(0,0) scale(1);
    background: var(--red); border-color: var(--red);
  }
  .pillar-card .arrow svg { width: 14px; height: 14px; }

  /* Smaller desktop / tablet: with three columns (this page dropped
     The Place card) each is still narrow enough that .kicker's
     white-space:nowrap can overflow before the 860px carousel. */
  @media (max-width: 1100px) {
    .pillar-card .kicker { font-size: clamp(16px, 2.4vw, 24px); white-space: normal; }
  }

  @media (max-width: 860px) {
    /* 4-or-fewer cards stack in a single column on tablet/mobile
       rather than a 2x2 grid, matching the site's mobile pattern. */
    .card-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      height: auto;
    }
    .pillar-card { aspect-ratio: 4 / 3; }
    .pillar-card .arrow { opacity: 1; transform: none; width: 28px; height: 28px; }
    .pillar-card .num { top: 12px; left: 14px; }
    .pillar-card .body { left: 14px; right: 14px; bottom: 14px; }
  }
  @media (max-width: 480px) {
    .pillar-card .kicker { font-size: clamp(15px, 5vw, 20px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-content .line, .hero-content .copy, .hero-content .cta, .hero-header,
    .pillar-card img.photo, .pillar-card .arrow,
    .secondary-menu, .burger-icon svg {
      transition-duration: 200ms !important;
      transform: none !important;
    }
  }

  /* ============================================================
     THE PLACE — "Some places stay with you."
     ============================================================ */
  section.place-story {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--ink);
    background-image:
      linear-gradient(to right, var(--ink) 0%, rgba(29,35,42,.55) 45%, rgba(29,35,42,.2) 100%),
      url("/wp-content/uploads/gen3/assets/images/place-image.jpeg");
    background-position: top, top;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    padding: clamp(90px, 12vw, 140px) var(--grid-gutter) clamp(32px, 4vw, 48px);
  }
  .place-anchor-wash {
    position: absolute;
    z-index: 0;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    max-width: 900px;
    opacity: 0.07;
    pointer-events: none;
  }
  .place-anchor-wash svg { width: 100%; height: auto; display: block; }
  .place-frame {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--grid-max);
    margin: 0 auto;
  }
  .place-headline {
    max-width: 90ch;
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--paper);
    font-size: clamp(26px, 3.6vw, 46px);
    line-height: 1.15;
    margin: 0 0 clamp(14px, 2vw, 22px);
  }
  .place-headline .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .place-row { margin-top: auto; }
  .place-card {
    position: relative;
    z-index: 2;
    width: 42%;
    max-width: 520px;
    margin-left: auto;
    margin-right: 0;
    background: var(--paper);
    border-radius: 2px;
    overflow: hidden;
    padding: 44px 44px 40px;
  }
  .place-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 6px;
    background: var(--red);
  }
  .place-card-body {
    font-size: 14px; line-height: 1.6; color: #4A4438;
    margin: 0 0 24px;
  }
  .place-card-tagline {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 24px;
  }
  .place-card-tagline .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .place-card-link {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink);
    text-decoration: none;
    padding-bottom: 7px;
  }
  .place-card-link::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    height: 1px; width: 50%;
    background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .place-card-link:hover::after, .place-card-link:focus-visible::after { width: 100%; }
  .place-card-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

  @media (max-width: 860px) {
    .place-headline { max-width: 100%; font-size: clamp(24px, 7vw, 34px); }
    .place-card { width: 100%; max-width: none; padding: 32px 28px; }
  }

  /* ============================================================
     RANGE DISCS — "Every bottle tells the same story."
     ============================================================ */
  section.range {
    position: relative;
    padding: clamp(56px, 8vw, 96px) var(--grid-gutter);
  }
  .range-head {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .range-head .eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gold-1); margin: 0 0 12px;
    text-align: center;
    width: 100%;
  }
  .range-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: clamp(42px, 4.6vw, 60px);
    line-height: 0.95;
    margin: 0 0 20px;
    color: var(--ink);
  }
  .range-head h2 .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .range-head p {
    font-size: 16px; line-height: 1.45; color: #4A4438;
    margin: 0 auto; max-width: 56ch;
  }
  .range-head p + p { margin-top: 4px; }

  /* Bottle row: equal flex columns, each bottle letterboxed into an
     identical aspect-ratio frame (object-fit:contain) so all five read
     as the same scale/height regardless of their source PNG's own
     proportions. Name reveals on hover, oversized and centred so it
     bleeds into neighbouring columns; hovering the row dims the other
     bottles and pops the hovered one forward — this is the exact
     mechanic referenced from citadellegin.com, rebuilt with our own
     fonts/colours rather than importing their type or decoration. */
  .bottle-row {
    display: flex;
    gap: clamp(16px, 3vw, 48px);
    margin-top: clamp(48px, 7vw, 72px);
  }
  .bottle-col {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: block;
    text-decoration: none;
    transition: opacity 300ms ease;
  }
  .bottle-row:hover .bottle-col { opacity: .5; }
  .bottle-row .bottle-col:hover { opacity: 1; z-index: 10; }

  .bottle-frame { position: relative; width: 100%; aspect-ratio: 1 / 1.5; }
  .bottle-frame img {
    position: absolute; left: 50%; bottom: 0;
    width: auto; height: 88%;
    transform: translateX(-50%);
    object-fit: contain;
    filter: drop-shadow(0 14px 20px rgba(29,23,17,.16));
  }

  .bottle-title {
    position: absolute;
    left: 50%; top: 40%;
    width: 220%;
    transform: translate(-50%, 10px);
    text-align: center;
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: clamp(22px, 3.2vw, 48px);
    line-height: 1;
    color: var(--ink);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 400ms ease, transform 400ms cubic-bezier(.25,0.1,.25,1);
  }
  .bottle-col:hover .bottle-title, .bottle-col:focus-visible .bottle-title {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .range-cta {
    display: table;
    margin: 90px auto 0;
    padding: 14px 30px;
    border-radius: 2px;
    border: 1px solid var(--gold-1);
    background: transparent;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink);
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  .range-cta:hover, .range-cta:focus-visible {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
  }
  .range-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

  @media (max-width: 860px) {
    .bottle-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px 16px;
    }
    .bottle-col:last-child { grid-column: 1 / -1; }
    .bottle-row:hover .bottle-col { opacity: 1; }
    .bottle-title {
      position: static;
      display: block;
      width: auto;
      transform: none;
      opacity: 1;
      font-size: clamp(16px, 4vw, 20px);
      margin-top: 12px;
    }
    .bottle-frame { aspect-ratio: 1 / 1.1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bottle-col, .bottle-title { transition-duration: 1ms; }
  }

  /* ============================================================
     CASK CONVERSATIONS — film gallery
     ============================================================ */
  section.films {
    position: relative;
    z-index: 0;
    padding: clamp(56px, 8vw, 96px) var(--grid-gutter);
  }
  .films-head { max-width: 640px; }
  .films-head .eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gold-1); margin: 0 0 12px;
  }
  .films-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: clamp(42px, 4.6vw, 60px);
    line-height: 0.95;
    margin: 0 0 20px;
    color: var(--ink);
  }
  .films-head h2 .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .films-head p {
    font-size: 16px; line-height: 1.45; color: #4A4438;
    margin: 0; max-width: 56ch;
  }
  .films-note {
    font-size: 12px; color: #6B6053; margin: 10px 0 0; max-width: 56ch;
  }

  /* Cask Conversations is deliberately NOT another row of equal photo
     tiles — it's a stage + list "episode" player: one large featured
     video with a clickable, numbered list beside it. Selecting a list
     item swaps the stage and plays that conversation; this is the one
     section on the page built around picking from a list rather than
     scanning equal cards. */
  .film-player {
    display: flex;
    align-items: stretch;
    gap: clamp(24px, 4vw, 56px);
    margin-top: clamp(40px, 6vw, 56px);
  }
  .film-stage {
    position: relative;
    flex: 1 1 68%;
    min-width: 0;
    aspect-ratio: 16 / 10;
    border-radius: 2px;
    overflow: hidden;
    background: var(--ink);
    cursor: pointer;
  }
  .film-stage img.film-poster {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(.25,0.1,.25,1), opacity 220ms ease;
  }
  .film-stage:hover img.film-poster { transform: scale(1.03); }
  .film-stage.is-switching img.film-poster,
  .film-stage.is-switching .film-stage-caption {
    opacity: 0;
  }
  .film-stage video, .film-stage iframe {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0;
  }
  .film-stage .film-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(29,23,17,0) 45%, rgba(29,23,17,.65) 100%);
    pointer-events: none;
  }
  .film-stage-caption {
    position: absolute; left: 24px; bottom: 20px; z-index: 1;
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: -0.01em; font-size: clamp(20px, 2.2vw, 28px);
    color: var(--paper); margin: 0;
    transition: opacity 220ms ease;
  }
  .play-btn {
    position: absolute; top: 50%; left: 50%;
    width: 64px; height: 64px;
    border-radius: 2px;
    border: 1px solid rgba(244,244,244,.55);
    background: transparent;
    color: var(--paper);
    display: grid; place-items: center;
    opacity: 0;
    transform: translate(-50%, -50%) translate(6px, 6px) scale(.8);
    transition: opacity 280ms ease, transform 280ms ease, background 200ms ease, border-color 200ms ease;
  }
  .film-stage:hover .play-btn, .film-stage:focus-visible .play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0,0) scale(1);
    background: var(--red); border-color: var(--red);
  }
  .play-btn svg { width: 26px; height: 26px; margin-left: 2px; }

  .film-list { flex: 1 1 32%; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .film-list-item {
    border-top: 1px solid var(--border);
    padding: 22px 2px;
  }
  .film-list li:last-child .film-list-item { border-bottom: 1px solid var(--border); }
  .film-list-item-row {
    display: flex; align-items: center; gap: 16px;
    width: 100%; text-align: left;
    border: none; background: none; cursor: pointer;
    padding: 0; font-family: inherit;
  }
  .film-list-item .num {
    flex: 0 0 28px;
    font-family: var(--font-body); font-weight: 600; font-size: 12px;
    letter-spacing: 0.1em; color: var(--gold-1);
    font-variant-numeric: tabular-nums;
  }
  .film-list-item .name {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: -0.01em; font-size: clamp(18px, 1.8vw, 24px);
    color: var(--ink);
    transition: color 200ms ease;
  }
  .film-list-item-row:hover .name { color: var(--red); }
  .film-list-item.is-active .num { color: var(--red); }
  .film-list-item.is-active .name { font-weight: 600; }
  .film-list-item.is-active .film-list-item-row::after {
    content: ""; margin-left: auto;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--red);
  }
  .film-list-item-expand {
    display: grid;
    grid-template-rows: 0fr;
    padding-left: 44px;
    max-width: 44ch;
    opacity: 0;
    transition: grid-template-rows 400ms cubic-bezier(.25,0.1,.25,1), opacity 300ms ease, margin-top 400ms ease;
  }
  .film-list-item-expand-inner { min-height: 0; overflow: hidden; }
  .film-list-item.is-active .film-list-item-expand {
    grid-template-rows: 1fr; opacity: 1; margin-top: 12px;
  }
  .film-list-item-desc {
    margin: 0;
    font-size: 14px; line-height: 1.6; color: #4A4438;
  }
  .film-list-item-cta {
    position: relative;
    display: inline-block;
    margin-top: 14px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink);
    text-decoration: none;
    padding-bottom: 6px;
  }
  .film-list-item-cta::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    height: 1px; width: 50%;
    background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .film-list-item-cta:hover::after, .film-list-item-cta:focus-visible::after { width: 100%; }
  .film-list-item-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

  @media (max-width: 860px) {
    .film-player { flex-direction: column; }
    .film-stage { aspect-ratio: 4 / 3; }
    .play-btn { opacity: 1; transform: translate(-50%, -50%); }
    /* Once a real <video> with native controls is playing, let the
       stage bleed full viewport width instead of sitting inside the
       grid-gutter — Safari's native control bar doesn't collapse
       extra icons into an overflow menu the way Chrome's does, so a
       narrow, inset container can end up cutting off the fullscreen/
       more-options icons on the right. Full width gives it the most
       room to render every control without truncation. */
    .film-stage:has(video) {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      border-radius: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .film-stage img.film-poster, .film-stage-caption, .play-btn, .film-list-item-expand { transition-duration: 1ms; }
  }

  /* ============================================================
     CASK CONVERSATIONS — grid gallery. Replaces the stage+list
     player with a tile-per-venue grid (per the wireframe's 4-col
     gallery block) — clicking a tile opens the film in a lightbox.
     First 8 tiles show; any beyond that stay hidden behind "Load
     More" so the layout keeps working once more are added.
     ============================================================ */
  .cask-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: clamp(32px, 5vw, 48px);
  }
  .cask-tile {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 2px;
    overflow: hidden;
    display: block;
    width: 100%;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: var(--ink);
    font-family: inherit;
    text-align: left;
  }
  .cask-tile[hidden] { display: none; }
  .cask-tile img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.25,0.1,.25,1);
  }
  .cask-tile:hover img, .cask-tile:focus-visible img { transform: scale(1.045); }
  .cask-tile-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(29,23,17,0) 45%, rgba(29,23,17,.75) 100%);
    pointer-events: none;
  }
  .cask-tile-play {
    position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px;
    border-radius: 2px;
    border: 1px solid rgba(244,244,244,.55);
    background: transparent;
    color: var(--paper);
    display: grid; place-items: center;
    transform: translate(-50%, -50%);
    transition: background 200ms ease, border-color 200ms ease;
  }
  .cask-tile:hover .cask-tile-play, .cask-tile:focus-visible .cask-tile-play {
    background: var(--red); border-color: var(--red);
  }
  .cask-tile-play svg { width: 16px; height: 16px; margin-left: 2px; }
  .cask-tile-name {
    position: absolute; left: 14px; right: 14px; bottom: 14px;
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: -0.01em; font-size: clamp(14px, 1.3vw, 17px);
    color: var(--paper);
  }
  .cask-tile:focus-visible { outline: 2px solid var(--paper); outline-offset: -4px; }

  .cask-load-more {
    display: block;
    position: relative;
    margin: clamp(28px, 4vw, 40px) auto 0;
    font-family: var(--font-display); font-weight: 500; font-size: 15px;
    text-transform: uppercase; letter-spacing: 0.22em;
    color: var(--ink); background: none; border: none; cursor: pointer;
    padding-bottom: 7px;
  }
  .cask-load-more[hidden] { display: none; }
  .cask-load-more::after {
    content: "";
    position: absolute; left: 50%; bottom: 0;
    height: 1px; width: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .cask-load-more:hover::after, .cask-load-more:focus-visible::after { width: 100%; }

  .cask-lightbox {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: center;
    padding: 24px;
  }
  .cask-lightbox[hidden] { display: none; }
  .cask-lightbox-scrim { position: absolute; inset: 0; background: rgba(20,16,12,.92); }
  .cask-lightbox-panel { position: relative; width: min(960px, 100%); z-index: 1; }
  .cask-lightbox-stage {
    position: relative; width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--ink);
    border-radius: 2px;
    overflow: hidden;
  }
  .cask-lightbox-stage video, .cask-lightbox-stage iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  }
  .cask-lightbox-close {
    position: absolute; top: -44px; right: 0;
    width: 36px; height: 36px;
    border-radius: 2px;
    border: 1px solid rgba(244,244,244,.55);
    background: transparent;
    color: var(--paper);
    font-size: 22px; line-height: 1;
    display: grid; place-items: center;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
  }
  .cask-lightbox-close:hover, .cask-lightbox-close:focus-visible { background: var(--red); border-color: var(--red); }

  @media (max-width: 900px) {
    .cask-grid { grid-template-columns: repeat(3, 1fr); }
  }
  /* More than 4 tiles — a touch-swipeable, snap-centred carousel on
     tablet/mobile rather than a squeezed grid, same pattern as the
     homepage's bottle row. */
  @media (max-width: 860px) {
    .cask-grid {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 12px;
    }
    .cask-grid::-webkit-scrollbar { display: none; }
    .cask-tile {
      flex: 0 0 62vw;
      scroll-snap-align: center;
      aspect-ratio: 3 / 4;
    }
    .cask-lightbox-close { top: -40px; }
    /* Less outer padding so the video (and its native controls bar)
       gets as much width as possible — Safari's controls don't
       collapse extra icons into an overflow menu the way Chrome's
       do, so a narrow stage can end up cutting off the fullscreen/
       more-options icons on the right. */
    .cask-lightbox { padding: 8px; }
  }

  /* ============================================================
     SOCIAL WALL — auto-scrolling strip of Instagram/LinkedIn/X
     content. Real posts pulled from the staging site's wcw-sfb
     component (images + platform links), rebuilt here as a
     borderless, edge-to-edge marquee rather than its bento grid.
     Card sequence is duplicated in the DOM (second half marked
     aria-hidden) so translateX(-50%) loops with no visible seam.
     ============================================================ */
  section.social-wall {
    position: relative;
    padding: 0;
  }
  /* Full viewport-width gold rule, flush above and below the carousel —
     same left:calc(50% - 50vw) bleed as the viewport itself. */
  .social-wall-rule {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 2px;
    background: var(--red);
  }
  /* Full viewport-width strip, breaking out of the section's own
     grid-gutter padding — same left:calc(50% - 50vw) bleed used by
     .pillars-bleed and .footer-bottom elsewhere on this page. */
  .social-wall-viewport {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
  }
  .social-wall-track {
    display: flex;
    width: max-content;
    animation: social-wall-scroll 56s linear infinite;
  }
  .social-wall-track:hover { animation-play-state: paused; }
  @keyframes social-wall-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .social-card {
    position: relative;
    flex: 0 0 auto;
    width: 400px;
    height: 400px;
    overflow: hidden;
    display: block;
    text-decoration: none;
  }
  .social-card img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 700ms cubic-bezier(.25,0.1,.25,1);
  }
  .social-card:hover img { transform: scale(1.045); }
  .social-card-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(29,35,42,0) 0%, rgba(29,35,42,0) 40%, rgba(29,35,42,.55) 78%, rgba(29,35,42,.92) 100%);
    pointer-events: none;
  }
  /* Same square badge as .burger: 38px, radius 2px, transparent with
     a translucent paper border by default — and the identical
     hover recipe (solid red fill, icon stays paper via currentColor)
     rather than reinventing a new treatment. */
  .social-card-icon {
    position: absolute; left: 16px; bottom: 16px;
    width: 38px; height: 38px; border-radius: 2px;
    border: 1px solid rgba(244,244,244,.55);
    background: transparent;
    color: var(--paper);
    display: grid; place-items: center;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  .social-card-icon svg { width: 18px; height: 18px; display: block; }
  .social-card:hover .social-card-icon,
  .social-card:focus-visible .social-card-icon {
    background: var(--red);
    border-color: var(--red);
  }
  .social-card:focus-visible { outline: 2px solid var(--paper); outline-offset: -4px; }

  @media (max-width: 640px) {
    .social-card { width: 260px; height: 260px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .social-wall-track { animation: none; }
  }

  
  /* ============================================================
     FOOTER
     ============================================================ */
  footer.site-footer {
    position: relative;
    background: var(--ink);
    padding: clamp(56px, 7vw, 88px) var(--grid-gutter) 0;
  }
  .footer-frame { max-width: var(--grid-max); margin: 0 auto; }
  .footer-top {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
    padding-bottom: clamp(48px, 6vw, 72px);
  }
  .footer-brand { flex: 0 0 auto; max-width: 320px; }
  .footer-mark { width: clamp(150px, 15vw, 190px); display: block; }
  .footer-address {
    font-size: 20px; line-height: 1.4; color: var(--paper);
    margin: 26px 0 0;
  }
  .footer-note {
    font-size: 13px; color: rgba(244,244,244,.5);
    margin: 16px 0 0;
  }
  .footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex: 1 1 auto;
    gap: clamp(24px, 4vw, 56px);
  }
  .footer-col-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: none; padding: 0; margin: 0 0 20px;
    cursor: default; text-align: left; font: inherit; color: inherit;
  }
  .footer-col-toggle h4 { margin: 0; }
  .footer-col-chevron { display: none; color: var(--paper); }
  .footer-col-expand { display: contents; }
  .footer-col h4 {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.14em; font-size: 13px;
    color: var(--paper); margin: 0 0 20px;
  }
  .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .footer-col a {
    position: relative;
    display: inline-block;
    font-size: 15px;
    color: rgba(244,244,244,.65);
    text-decoration: none;
    transition: color 150ms ease;
  }
  .footer-col a::after {
    content: "";
    position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
    background: var(--red);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .footer-col a:hover, .footer-col a:focus-visible { color: var(--paper); }
  .footer-col a:hover::after, .footer-col a:focus-visible::after { width: 100%; }

  .footer-awards {
    border-top: 1px solid rgba(163,117,41,.35);
    padding: 32px 0;
    text-align: center;
  }
  .footer-awards-label {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.14em; font-size: 13px;
    color: rgba(244,244,244,.5); margin: 0 0 24px;
  }
  .footer-awards-row {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: clamp(20px, 3vw, 40px);
  }
  .footer-awards-row img {
    height: 64px; width: auto; display: block;
    opacity: 0.9;
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .footer-awards-row img:hover { opacity: 1; transform: translateY(-2px); }

  @media (max-width: 860px) {
    .footer-awards { padding: 24px 0; }
    .footer-awards-row { gap: 20px; }
    .footer-awards-row img { height: 48px; }
  }

  .footer-bottom {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--red);
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
    padding: 22px clamp(20px, 5vw, 64px);
    font-size: 13px;
    color: rgba(244,244,244,.75);
  }
  .footer-credit { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
  .footer-credit strong { font-weight: 700; text-decoration: none; }
  .footer-legal { display: inline-flex; gap: 8px; }
  .footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .footer-legal a:hover, .footer-legal a:focus-visible { color: var(--paper); }

  @media (max-width: 1100px) and (min-width: 861px) {
    .footer-top { gap: 40px; }
    .footer-cols { grid-template-columns: repeat(2, 1fr); row-gap: clamp(24px, 4vw, 40px); }
  }

  @media (max-width: 860px) {
    .footer-top { flex-direction: column; }
    .footer-cols { display: flex; flex-direction: column; gap: 0; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

    .footer-col { border-top: 1px solid rgba(244,244,244,.15); }
    .footer-col:last-child { border-bottom: 1px solid rgba(244,244,244,.15); }
    .footer-col-toggle { cursor: pointer; padding: 18px 0; margin: 0; }
    .footer-col-chevron { display: block; width: 14px; height: 14px; flex: 0 0 auto; transition: transform 300ms ease; }
    .footer-col-toggle[aria-expanded="true"] .footer-col-chevron { transform: rotate(180deg); }
    .footer-col-expand {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 350ms cubic-bezier(.25,0.1,.25,1);
    }
    .footer-col-expand-inner { overflow: hidden; min-height: 0; }
    .footer-col-toggle[aria-expanded="true"] + .footer-col-expand { grid-template-rows: 1fr; }
    .footer-col ul { padding-bottom: 20px; }
  }

  /* Page (not homepage) background — this page has no hero video to
     fade the body colour on scroll, so it sits on paper throughout,
     with the banner below providing its own dark ground for the
     overlaid nav and title. */
  html, body { background-color: var(--paper); }

  /* ============================================================
     PLACE BANNER — same mechanic as the homepage hero (transparent
     nav fading in over a dark-scrimmed image, headline bottom-left)
     at half the height, since this page doesn't need a full-screen
     opener — it's a section banner, not the front door.
     ============================================================ */
  .place-hero {
    height: 50vh; min-height: 320px;
    /* The map graphic is meant to bleed past the banner into the
       section below on shorter viewports — overflow:visible lets it
       do that instead of .hero's shared overflow:hidden clipping it. */
    overflow: visible;
  }
  .place-hero img.place-hero-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 38%; z-index: 0;
  }
  .place-hero .hero-content { bottom: 48px; }
  /* place image.jpeg is bright — the shared .scrim (tuned for the
     homepage's darker hero footage) isn't enough contrast for the
     white nav/logo sitting directly on it, so this banner gets its
     own darker pass. */
  .place-hero .scrim {
    background:
      linear-gradient(to bottom, rgba(29,23,17,.78) 0%, rgba(29,23,17,.42) 20%, rgba(29,23,17,.42) 55%, rgba(29,23,17,.55) 72%, rgba(29,23,17,.94) 100%);
  }

  /* ============================================================
     PLACE CHAPTERS — structure mapped from the Citadelle Gin
     homepage (asymmetric text/collage split, rotated numeral index,
     rule-plus-flanked-label CTA), rebuilt entirely in this site's
     own fonts, colours and photography. Two instances, mirrored to
     keep the current text orientation: chapter 1 media left/copy
     right, chapter 2 (.rev) copy left/media right.
     ============================================================ */
  .place-chapter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: clamp(32px, 5vw, 80px);
    min-height: clamp(480px, 62vw, 720px);
    padding: clamp(56px, 8vw, 96px) var(--grid-gutter);
  }
  .place-chapter.rev .place-chapter-media { order: 2; }
  /* First chapter sits directly under the banner — extra clearance
     so it doesn't feel like it's butting straight up against it.
     Also the positioning context for .place-chapter-mark below. */
  #place-chapter-1 { padding-top: calc(clamp(56px, 8vw, 96px) + 50px); position: relative; }

  /* Chapter 2 sits on ink instead of paper, so its copy flips to
     light text for contrast — the gold full stop needs no change. */

  /* Staggered main + accent image collage, replacing a single
     full-bleed photo — a smaller image overlaps the top corner of
     the larger one, mirrored toward whichever side is the gutter. */
  .place-chapter-media { position: relative; }
  /* The single photo is clipped into the West Cork coastline outline
     (a client-supplied cutout, reused here as a mask) rather than sat
     in a plain rectangle — replaces the old main+accent photo collage. */
  .place-chapter-img-main {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto;
  }
  .place-chapter-img-main img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  /* A slow-rotating set of images within the square, rather than one
     static photo — founders at work, and the Cask Conversations shot
     around the distillery and in the bars named on this page. Stacked
     absolutely, parked off to the right until it's their turn, then
     slid in over the current image via a JS-toggled .is-active class
     (the container's own overflow:hidden clips the parked images).
     First image is set active in markup so it's correct pre-JS. */
  .people-rotator { position: relative; }
  .people-rotator img {
    position: absolute; inset: 0;
    transform: translateX(100%);
    transition: transform 800ms cubic-bezier(.65,0,.35,1);
    z-index: 1;
  }
  .people-rotator img.is-active { transform: translateX(0); z-index: 2; }
  .people-rotator img.is-prev { transform: translateX(-100%); z-index: 1; }
  @media (prefers-reduced-motion: reduce) {
    .people-rotator img { transition: none; }
  }

  .place-chapter-copy {
    display: flex; flex-direction: column; justify-content: center;
    position: relative;
  }
  .place-chapter-copy .eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gold-1); margin: 0 0 16px;
  }
  .place-chapter-copy .eyebrow::before {
    content: "";
    display: block;
    width: 40px; height: 2px;
    margin: 0 0 14px;
    background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
  }
  .place-chapter-copy h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: clamp(31px, 3.4vw, 44px);
    line-height: 1.02;
    margin: 0 0 24px;
    color: var(--ink);
    max-width: 26ch;
  }
  .place-chapter-copy h2 .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .place-chapter-copy p {
    font-size: 16px; line-height: 1.6; color: #4A4438;
    margin: 0 0 14px; max-width: 46ch;
  }
  .place-chapter-copy p:last-of-type { margin-bottom: 0; }

  /* CTA: the homepage's underline-stroke treatment (place-card-link /
     film-list-item-cta) — a gold-gradient line under the label that
     expands to full width on hover. align-self:flex-start keeps the
     link sized to its own text rather than stretched by the flex
     column parent, so the line tracks the words, not the container. */
  .place-chapter-cta {
    align-self: flex-start;
    position: relative;
    display: inline-block;
    margin-top: 32px;
    font-family: var(--font-display); font-weight: 500; font-size: 15px;
    text-transform: uppercase; letter-spacing: 0.22em;
    color: var(--ink); text-decoration: none;
    padding-bottom: 7px;
  }
  .place-chapter-cta::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    height: 1px; width: 50%;
    background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .place-chapter-cta:hover::after, .place-chapter-cta:focus-visible::after { width: 100%; }
  .place-chapter-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

  @media (max-width: 860px) {
    .place-chapter { grid-template-columns: 1fr; min-height: 0; row-gap: 32px; padding: clamp(28px, 4vw, 48px) var(--grid-gutter); }
    #place-chapter-1 { padding-top: calc(clamp(28px, 4vw, 48px) + 50px); }
    section.pillars { padding: clamp(28px, 4vw, 48px) var(--grid-gutter) 50px; }
    .place-chapter.rev .place-chapter-media { order: 0; }
    .place-chapter-copy h2 { max-width: none; }
  }

  /* ============================================================
     Subtle brand watermark — reused anchor mark, very low opacity,
     sits behind section content purely for texture/depth. Never
     interactive, never affects layout.
     ============================================================ */
  .section-mark {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
  }
  .section-mark svg { width: 100%; height: auto; display: block; }
  .section-mark--pillars { top: -40px; right: -60px; width: clamp(220px, 26vw, 360px); }
  .section-mark--range   { bottom: -60px; left: -80px; width: clamp(220px, 26vw, 360px); }
  .section-mark--films   { top: -30px; left: 50%; transform: translateX(-50%); width: clamp(200px, 22vw, 320px); }

  .pillars-head, .card-row, .range-head, .bottle-row, .range-cta,
  .films-head, .film-player { position: relative; z-index: 1; }

  /* ============================================================
     Reveal-on-scroll — cards/items fade + rise into place, staggered
     within their own group via a JS-set transition-delay. Understated
     by design; fully inert under reduced-motion.
     ============================================================ */
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 650ms cubic-bezier(.25,0.1,.25,1), transform 650ms cubic-bezier(.25,0.1,.25,1);
  }
  [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { transition-duration: 1ms; }
  }

  [data-parallax] { will-change: transform; }