/* Gen-3 — privacy-policy.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; }
  }

  /* ============================================================
     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: calc(50vh - 80px); min-height: 240px;
    /* 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;
  }
  /* No photo on the legal pages — a plain grey banner instead, so
     the header/title need to flip to dark-on-light (the sticky bar
     below still switches back to light-on-dark once .is-stuck). */
  /* No photo on the legal pages — a solid grey banner instead, using
     the same white text / gold full-stop treatment as every other
     hero on the site (no need to flip nav/logo colour since it's
     dark already, unlike the previous plain-paper version). */
  .place-hero--plain { background: var(--ink); }
  .place-hero--plain .hero-header .burger[aria-expanded="true"] { background: rgba(213,33,40,.15); border-color: var(--red); }
  .place-hero--plain .hero-header .burger { color: var(--paper); }
  .place-hero img.place-hero-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; 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%);
  }

  /* West Cork map outline — a very low-opacity brand watermark behind
     Chapter 1's media/copy, flush with the container's top-right
     corner. z-index:0 (not negative — negative z-index on a descendant
     is invisible anywhere on this page, since html/body's overflow-x:
     hidden triggers a Chromium quirk that drops negative-z-index
     paint entirely) placed first in the DOM, with the media/copy
     siblings given position:relative so they paint after it at the
     same stack level and so sit visually on top. */
  .place-chapter-mark {
    position: absolute;
    top: 0; right: 0;
    z-index: 0;
    width: clamp(374px, 47vw, 702px);
    opacity: 0.1;
    pointer-events: none;
  }
  .place-chapter-mark svg path { fill: var(--deep-red); }
  .place-chapter-mark svg { width: 100%; height: auto; display: block; }

  /* ============================================================
     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. */
  #place-chapter-2 { background: var(--ink); }
  #place-chapter-2 .place-chapter-copy h2 { color: var(--paper); }
  #place-chapter-2 .place-chapter-copy p { color: rgba(244,244,244,.75); }
  #place-chapter-2 .place-chapter-cta { color: var(--paper); }
  #place-chapter-2 .place-chapter-cta:focus-visible { outline-color: var(--paper); }

  /* 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;
  }

  .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; }
    .place-chapter.rev .place-chapter-media { order: 0; }
    .place-chapter-copy h2 { max-width: none; }
  }

  /* ============================================================
     VISIT & CONTACT — a plain-language enquiry form styled to match
     the site's inputs/selects (see the stockist filters), with a
     solid-fill primary CTA (matching the pillar-card arrow's "fill
     red" hover language) rather than the underline-link CTA used on
     the chapter component elsewhere, since the brief flags this one
     as the page's primary action.
     ============================================================ */
  .visit-cta {
    display: inline-block;
    align-self: flex-start;
    margin-top: clamp(24px, 3vw, 32px);
    background: var(--red); color: var(--paper);
    font-family: var(--font-display); font-weight: 500; font-size: 15px;
    text-transform: uppercase; letter-spacing: 0.22em;
    padding: 14px 28px; border-radius: 2px;
    border: 1px solid var(--red);
    text-decoration: none; cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  .visit-cta:hover, .visit-cta:focus-visible { background: transparent; color: var(--ink); border-color: var(--ink); }

  section.visit-contact { padding: clamp(56px, 8vw, 96px) var(--grid-gutter); }
  .visit-contact-head { max-width: 640px; margin: 0 0 clamp(32px, 5vw, 48px); }
  .visit-contact-head h2 {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.02;
    margin: 0 0 16px;
    color: var(--ink);
  }
  .visit-contact-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;
  }
  .visit-contact-head p { font-size: 16px; line-height: 1.55; color: #4A4438; margin: 0; }

  .visit-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
  .visit-map {
    position: relative; width: 100%; aspect-ratio: 4 / 5;
    border-radius: 2px; overflow: hidden; background: var(--paper-2, #EDE8DC);
  }
  .visit-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.2) contrast(1.02); }
  @media (max-width: 860px) {
    .visit-contact-grid { grid-template-columns: 1fr; }
    .visit-map { aspect-ratio: 16 / 10; }
  }

  .visit-form { display: flex; flex-direction: column; gap: 20px; }
  .visit-form-row { display: flex; flex-direction: column; gap: 8px; }
  .visit-form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .visit-form-row--split > div { display: flex; flex-direction: column; gap: 8px; }
  .visit-form label {
    font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: rgba(29,35,42,.65);
  }
  .visit-form input, .visit-form select, .visit-form textarea {
    font-family: var(--font-body); font-size: 15px; color: var(--ink);
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 2px;
    background: #FFFFFF; width: 100%;
  }
  .visit-form select {
    background: #FFFFFF url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231D232A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 14px center;
    -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 36px;
  }
  .visit-form textarea { resize: vertical; font-family: inherit; }
  .visit-form input:focus, .visit-form select:focus, .visit-form textarea:focus {
    outline: none; border-color: var(--red);
  }
  .visit-form button.visit-cta { align-self: flex-start; margin-top: 4px; }

  /* ============================================================
     LEGAL CONTENT — Privacy / Terms / Cookie policy pages. Plain,
     readable stacked sections; no card treatment, just a hairline
     between entries like the whiskey-specs pattern elsewhere.
     ============================================================ */
  section.legal-intro { padding: clamp(56px, 8vw, 96px) var(--grid-gutter) 0; }
  .legal-intro-inner { max-width: 760px; }
  .legal-intro-inner p { font-size: 19px; line-height: 1.6; color: var(--ink); margin: 0; }

  section.legal-body { padding: clamp(40px, 6vw, 56px) var(--grid-gutter) clamp(64px, 8vw, 96px); }
  .legal-body-inner { max-width: 760px; display: flex; flex-direction: column; }
  .legal-section { padding: clamp(28px, 3.5vw, 36px) 0; border-top: 1px solid var(--border); }
  .legal-section:first-child { border-top: none; padding-top: 0; }
  .legal-section h2 {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: -0.01em; font-size: clamp(19px, 2.1vw, 24px); line-height: 1.2;
    margin: 0 0 16px; color: var(--ink);
  }
  .legal-section-body p { font-size: 15px; line-height: 1.7; color: #4A4438; margin: 0 0 14px; }
  .legal-section-body p:last-child { margin-bottom: 0; }
  .legal-section-body a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
  .legal-section-body a:hover, .legal-section-body a:focus-visible { color: var(--deep-red); }
  @media (max-width: 640px) {
    .visit-form-row--split { grid-template-columns: 1fr; }
  }

  /* ============================================================
     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; }