/* Gen-3 — where-to-buy.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;
    --grid-max: 1400px;
    --grid-gutter: max(clamp(20px, 5vw, 64px), calc(50% - (var(--grid-max) / 2)));
    --header-h: 78px;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; overflow-x: hidden; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  html, body { background-color: var(--paper); }
  body {
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
  }
  img, svg { max-width: 100%; }
  a { font-family: inherit; }
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
  }

  /* ============================================================
     HERO — same banner mechanic as The Place / The People: a
     half-height image with a dark scrim, the header sitting
     transparent over it and switching to a compact fixed bar once
     scrolled past (see .hero-header.is-stuck below).
     ============================================================ */
  .hero { position: relative;
    height: 100vh;
    min-height: 520px;
    width: 100%;
    overflow: hidden;
    background: transparent;
  }
  .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-baseline { position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 6px;
    background: var(--red);
    z-index: 4;
    pointer-events: none;
  }
  .hero-content { position: absolute; z-index: 3;
    left: var(--grid-gutter);
    right: var(--grid-gutter);
    bottom: 48px;
  }
  .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;
    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;
  }
  .hero-content .copy {
    margin: 20px 0 0;
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.55;
    color: var(--paper);
    max-width: 46ch;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 250ms ease, transform 250ms ease;
    transition-delay: 400ms;
  }
  .hero.loaded .hero-content .copy { opacity: 0.92; transform: translateY(0); }
  /* Half height, section banner rather than a full-screen opener. */
  .place-hero { height: 50vh; min-height: 320px; overflow: visible; }
  .place-hero img.place-hero-img { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
  }
  /* The firepit shot is dark already — a lighter pass than the
     bright banner images elsewhere is enough for nav/logo contrast. */
  /* Darkened further than the other banners for WCAG AA contrast —
     the firepit shot's flame is bright enough behind the nav/logo
     that the lighter scrim used elsewhere wasn't enough. */
  .place-hero .scrim { background:
      linear-gradient(to bottom, rgba(29,23,17,.80) 0%, rgba(29,23,17,.35) 20%, rgba(29,23,17,.40) 55%, rgba(29,23,17,.55) 72%, rgba(29,23,17,.92) 100%);
  }

  .hero-header {
    position: absolute; top: 0; left: 0; right: 0; z-index: 20;
    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. */
  .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(112px, 12vw, 148px); 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%; }
  .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[aria-current="page"] { color: var(--deep-red); }
  .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; }
  }

  .hero-header > a.nav-link { display: initial; }

  @media (max-width: 780px) {
    .hero-header nav { display: none; }
    .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; }
  }


  /* ============================================================
     STOCKIST FINDER
     ============================================================ */
  .stk {
    background: var(--paper);
    padding: 40px var(--grid-gutter) clamp(48px, 6vw, 80px);
  }
  .stk-frame { max-width: var(--grid-max); margin: 0 auto; }

  .stk-filters { display: flex; flex-direction: column; gap: 16px; margin: 0 0 32px; }
  .stk-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .stk-filter-row + .stk-filter-row { padding-top: 12px; border-top: 1px solid var(--border); }
  .stk-filter-label {
    font-family: var(--font-display); font-size: 13px; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.14em; color: rgba(29,35,42,.55); margin-right: 4px;
  }
  .stk-filter-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
  .stk-filter-pill {
    font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent; color: var(--ink);
    border: 1px solid var(--border); border-radius: 2px;
    padding: 8px 16px; cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  .stk-filter-pill:hover, .stk-filter-pill:focus-visible { border-color: var(--ink); }
  .stk-filter-pill[aria-current="true"] { background: var(--red); border-color: var(--red); color: var(--paper); }
  .stk-filter-select {
    font-family: var(--font-body); font-size: 14px; color: var(--ink);
    padding: 10px 36px 10px 14px;
    border: 1px solid var(--border); border-radius: 2px;
    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;
  }
  .stk-search { flex: 1 1 220px; min-width: 180px; }
  .stk-search input {
    width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--ink);
    padding: 10px 14px; border: 1px solid var(--border); border-radius: 2px; background: #FFFFFF;
  }
  .stk-search input:focus { outline: none; border-color: var(--red); }
  .stk-near-me {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red); background: transparent; border: 1px solid var(--red);
    border-radius: 2px; padding: 8px 14px; cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
  }
  .stk-near-me svg { flex: 0 0 auto; }
  .stk-near-me:hover, .stk-near-me:focus-visible { background: var(--red); color: var(--paper); }
  .stk-near-me[disabled] { opacity: .5; cursor: progress; }

  .stk-split { display: grid; grid-template-columns: 38% 1fr; gap: 32px; align-items: start; }

  .stk-list-panel {
    background: #FFFFFF; border-radius: 2px; padding: 28px;
    max-height: 720px; overflow-y: auto;
  }
  .stk-count {
    font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.14em;
    text-transform: uppercase; color: rgba(29,35,42,.55); margin: 0 0 18px;
  }
  .stk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
  .stk-country-group { list-style: none; }
  .stk-country-heading {
    font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink);
    margin: 0 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--red); display: inline-block;
  }
  .stk-country-note { font-size: 13px; line-height: 1.5; color: #4A4438; margin: 4px 0 10px; }
  .stk-items { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .stk-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(29,35,42,.06); }
  .stk-item.is-featured .stk-item-name::before,
  .stk-item.is-featured .stk-item-link::before { content: "★ "; color: var(--red); }
  .stk-item-name, .stk-item-link { font-size: 14px; line-height: 1.3; color: var(--ink); }
  .stk-item-link { text-decoration: none; }
  .stk-item-link:hover, .stk-item-link:focus-visible { color: var(--red); text-decoration: underline; }
  .stk-type-badge {
    flex: 0 0 auto; display: inline-block;
    font-family: var(--font-display); font-size: 9px; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 3px 7px; border-radius: 3px; white-space: nowrap;
  }
  .stk-type-badge.is-retailer { background: rgba(29,35,42,.08); color: var(--ink); }
  .stk-type-badge.is-online { background: rgba(163,117,41,.15); color: var(--gold-1); }
  .stk-type-badge.is-duty-free { background: rgba(29,35,42,.06); color: rgba(29,35,42,.55); border: 1px solid var(--border); }
  .stk-type-badge.is-distributor { background: rgba(213,33,40,.08); color: var(--red); }
  .stk-empty { font-size: 14px; line-height: 1.4; color: rgba(29,35,42,.55); margin: 16px 0 0; }

  .stk-map-wrap { position: sticky; top: calc(var(--header-h) + 16px); }
  .stk-map { width: 100%; height: 720px; border-radius: 2px; overflow: hidden; background: var(--border); }
  .stk-attribution { font-size: 11px; color: rgba(29,35,42,.5); margin: 6px 0 0; text-align: right; }
  .stk-attribution a { color: inherit; text-decoration: underline; }

  /* Full-bleed red CTA strip closing out the page, in the same
     language as the map watermarks used elsewhere on the site
     (low-opacity West Cork coastline, paper-coloured text/link). */
  section.stk-cta {
    position: relative;
    background: var(--red);
    padding: clamp(56px, 8vw, 96px) var(--grid-gutter);
    overflow: hidden;
    text-align: center;
  }
  .stk-cta-mark {
    position: absolute; top: 50%; right: -40px;
    transform: translateY(-50%);
    z-index: 0;
    width: clamp(320px, 34vw, 480px);
    opacity: 0.16;
    pointer-events: none;
  }
  .stk-cta-mark img { width: 100%; height: auto; display: block; }
  .stk-cta-frame { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
  .stk-cta-eyebrow {
    font-family: var(--font-display); font-weight: 500; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.22em;
    color: var(--paper); opacity: 0.85; margin: 0 0 16px;
  }
  .stk-cta-heading {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: -0.02em; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.15;
    color: var(--paper); margin: 0 0 clamp(28px, 4vw, 40px);
  }
  .stk-cta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px; }
  .stk-cta-btn {
    display: inline-block;
    font-family: var(--font-display); font-weight: 500; font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--paper); background: var(--ink);
    text-decoration: none; padding: 15px 28px; border-radius: 2px;
    transition: background 150ms ease, color 150ms ease;
  }
  .stk-cta-btn:hover, .stk-cta-btn:focus-visible { background: var(--paper); color: var(--ink); }
  .stk-cta-link {
    position: relative; display: inline-block;
    font-family: var(--font-display); font-weight: 500; font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--paper); text-decoration: none; padding-bottom: 7px;
  }
  .stk-cta-link::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 50%;
    background: var(--paper);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .stk-cta-link:hover::after, .stk-cta-link:focus-visible::after { width: 100%; }
  .stk-cta-link:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
  @media (max-width: 640px) {
    .stk-cta-actions { flex-direction: column; align-items: flex-start; gap: 18px; }
    .stk-cta-frame { text-align: left; }
    section.stk-cta { text-align: left; }
    .stk-cta-actions { align-items: flex-start; }
  }

  /* Leaflet tooltip re-skinned to the brand type/colour instead of
     the library default. */
  .leaflet-tooltip.stk-tooltip {
    font-family: var(--font-body); font-size: 13px; color: var(--ink);
    background: #FFFFFF; border: none; border-radius: 2px;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    padding: 6px 10px;
  }
  .leaflet-tooltip.stk-tooltip::before { display: none; }

  @media (max-width: 1100px) {
    .stk-split { grid-template-columns: 1fr; }
    .stk-map-wrap { position: static; order: -1; }
    .stk-map { height: 380px; }
    .stk-list-panel { max-height: none; }
  }
  @media (max-width: 640px) {
    .stk-filter-row { flex-direction: column; align-items: stretch; }
    .stk-near-me { justify-content: center; }
  }

  /* ============================================================
     FOOTER — identical to the rest of the site.
     ============================================================ */
  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[aria-current="page"] { color: var(--gold-2); }
  .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); }
  .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) {
    .footer-top { gap: 40px; }
    .footer-cols { grid-template-columns: repeat(2, 1fr); row-gap: clamp(24px, 4vw, 40px); }
  }
  @media (max-width: 860px) and (min-width: 641px) {
    .footer-awards { padding: 24px 0; }
    .footer-awards-row { gap: 20px; }
    .footer-awards-row img { height: 48px; }
  }
  @media (max-width: 780px) {
    .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; }
  }
  @media (max-width: 480px) {
    .footer-awards-row img { height: 40px; }
  }