/* ==========================================================================
   CONTENTS
   ==========================================================================
   00. Fonts
   01. Root (Design Tokens / CSS Variables)
   02. Base (Reset & Global)
   03. Elements (img, svg, a, forms, tables)
   04. Typography (Scale, Roles, Rhythm)
   05. Utilities (Helpers)
   06. Layout (Containers, Grids, Wrappers, Gutters)
   07. Components (Reusable, page-agnostic UI)
     07.1 Buttons / Cards
     07.2 Site Header & Nav
     07.3 Hero (+ Hero Band)
     07.4 Action Cards
     07.5 Sponsors (logos)
     07.6 Product Logos Rail (“Our Beers”)
     07.7 Scroll Cue
     07.8 Content Split (incl. media-portrait)
     07.9 Section Header (title + lede)
     07.10 Section Divider
     07.12 Events Card / List (generic)
     07.13 Footer & Imprint
   08. Sections (Page-level wrappers & bespoke composition)
     08.0 Section Shells (.section, spacing, snap)
     08.1 HOME
       08.1.1 Home Actions (section wrapper: .actions)
       08.1.2 Home Menu Teaser (.menu-intro …)
       08.1.3 Home Events Teaser (.section--home-events, .home-events-*)
       08.1.4 Home Contact Teaser (.home-contact)
     08.2 ABOUT
       08.2.1 About Intro (.about-intro)
       08.2.2 About Owners/Bios (.bio …)
       08.2.3 Work For Us (#about-work)
     08.3 MENU (intro, food, drinks)
     08.4 EVENTS (events page)
     08.5 CONTACT
     08.6 ACCESSIBILITY
     08.7 COOKIE POLICY
     08.8 PRIVACY
   09. Animations & Effects
   10. Accessibility Helpers
   11. Themes (variables only; no layout overrides)
   ======================================================================= */


/* =========================
   00) FONTS
   ========================= */
@font-face {
  font-family: "Sackers Gothic Std";
  src: url("../assets/fonts/sackers-gothic/sackersgothicstd-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sackers Gothic Std";
  src: url("../assets/fonts/sackers-gothic/sackersgothicstd-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sackers Gothic Std";
  src: url("../assets/fonts/sackers-gothic/sackersgothicstd-heavy.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/lato/lato-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/lato/lato-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/lato/lato-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/lato/lato-bolditalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* =========================
   01) ROOT (DESIGN TOKENS / CSS VARIABLES)
   ========================= */
:root {
  /* ---- Alpha overlays --------------------------------------------------- */
  --alpha-white-05: #ffffff0d;
  --alpha-white-25: #ffffff40;
  --alpha-black-05: #0000000d;
  --alpha-black-08: #00000014;
  --alpha-black-18: #0000002e;

  /* ---- Neutrals & metals ------------------------------------------------ */
  --neutral-0: #000000;
  --neutral-50: #ffffff;
  --neutral-100: #faf8f6;
  --neutral-300: #e6e2de;
  --neutral-500: #666666;
  --neutral-650: #4B4B4B;
  --neutral-700: #333333;
  --neutral-800: #383838;
  --neutral-900: #111111;

  --silver-200: #d9d9d9;
  --silver-300: #eeeeee;
  --silver-350: #e4e4e4;
  --silver-375: #d3d7da;
  --silver-400: #b8b8b8;
  --silver-shimmer: #e8e8e8;

  --brass-500: #c9a45c;
  --brass-400: #dfc27d;
  --brass-600: #b59b63;
  --brass-700: #8f7945;
  --brass-shimmer: #d6b46a;

  /* Palette extensions */
  --teal-800: #122d2d;
  --cream-300: #ede2c4;
  --bronze-600: #443624;
  --bronze-700: #3a2a0a;
  --bronze-800: #241c12;
  --amber-600: #6a4a1a;
  --gold-400: #b8934a;
  --charcoal-700: #2b2418;
  --umber-700: #3b2b16;
  --hot: #c3002f;

  --teal-focus: #0f2020;
  /* dark teal for ink/teal theme */
  --bronze-focus: #2a1f0e;
  /* dark bronze for brass theme */
  --light-focus: #d4d4d4;

  /* ---- Surfaces & on-colours ------------------------------------------- */
  --surface-light: var(--neutral-50);
  --surface-tint-100: #f5f5f5;
  --surface-tint-200: #f0f0f0;
  --surface-shade-100: #e0e0e0;
  --surface-shade-200: #dcdcdc;
  --surface-tint-dark-100: #121212;
  --surface-tint-dark-200: #151515;

  --bg: var(--neutral-100);
  --text: var(--neutral-900);
  --bg-alt: var(--neutral-300);
  --muted: var(--neutral-500);
  --surface: var(--neutral-50);
  --surface-contrast: var(--neutral-650);
  --border: var(--neutral-700);
  --header-bg: var(--neutral-0);
  --header-text: var(--silver-200);
  --brand: var(--teal-800);
  --brand-contrast: var(--silver-200);
  --brand-band: var(--brand);
  --brand-mark: var(--silver-400);
  --accent: var(--silver-300);
  --info-box: var(--hot);
  --link: var(--accent);
  --logo-color: var(--text);
  --logo-plate: var(--neutral-50);
  --text-on-warm: var(--silver-200);
  --rule-on-warm: var(--alpha-white-25);
  --surface-tint: var(--surface-tint-100);
  --surface-shade: var(--surface-shade-100);
  --surface-tint-gradient: linear-gradient(to right, var(--surface-tint-200), var(--surface-tint-100));
  --surface-shade-gradient: linear-gradient(to right, var(--surface-shade-200), var(--surface-shade-100));
  --hero-shimmer: var(--silver-shimmer);
  --footer-bg: var(--brand);
  --footer-text: var(--brand-contrast);
  --nav-mobile-interact-bg: var(--teal-focus);
  --container-pad: clamp(24px, 4vw, 64px);
  --footer-pad-inline: 1.5rem;
  --sponsor-gutter: clamp(8px, 2vw, 4rem);
  --sponsor-w: clamp(140px, 12vw, 260px);
  --brand-rail: clamp(24px, 4vw, 64px);
  --rail-sep: var(--silver-shimmer);

  /* ---- Type scale & rhythm --------------------------------------------- */
  --font-sans: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Sackers Gothic Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gap: 24px;
  --max-width: 1140px;
  --header-h: 72px;
  --font-size-body: 1rem;
  --font-size-heading: 1.5rem;
  --font-size-sm: 0.875rem;
  --rhythm: 1.6;
  --h1: clamp(2rem, 4vw, 3rem);
  --h2: clamp(1.6rem, 3vw, 2.25rem);
  --h3: 1.375rem;
  --h4: 1.125rem;
  --textscale: 1;
  --ticker-h: 2rem;
  /* band height */
  --ticker-gap: 1.25rem;
  /* gap ABOVE the ticker (between content and ticker) */
  --chevron-size: 44px;
  --chevron-offset: 1.25rem;
  --chevron-gap: 10px;
  --chevron-clearance: calc(var(--chevron-size) + var(--chevron-offset) + var(--chevron-gap));


  /* indent for lists on content pages */
  --policy-list-indent: 1.25rem;

  /* ---- Component dimensions -------------------------------------------- */
  --footer-icon-pin: 16px;
  --footer-icon-social: 24px;
  --bio-photo: 200px;
}

/* =========================
   02) BASE (RESET & GLOBAL)
   ========================= */

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: var(--rhythm, 1.6);
  font-synthesis: none;
  font-kerning: normal;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: calc(100% * var(--textscale));
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

[id],
.anchor-target {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

/* =========================
   03) ELEMENTS (IMG, SVG, A, FORMS, TABLES)
   ========================= */

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.06em;
}

/* =========================
   04) TYPOGRAPHY (SCALE, ROLES, RHYTHM)
   ========================= */

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 0.5em;
}

h1 {
  font-size: var(--h1);
}

h2 {
  font-size: var(--h2);
}

h3 {
  font-size: var(--h3);
}

h4 {
  font-size: var(--h4);
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
  line-height: var(--rhythm);
}

nav,
.btn,
.button,
table,
.stats {
  font-variant-numeric: tabular-nums;
}

/* =========================
   05) UTILITIES (HELPERS)
   ========================= */

.u-display {
  font-family: var(--font-display);
  letter-spacing: .06em;
}

.u-uppercase {
  text-transform: uppercase;
  letter-spacing: .08em;
}

.u-tight {
  line-height: 1.2;
}

.u-measure {
  max-width: 66ch;
}

.u-fade {
  opacity: 0.92;
  transition: opacity .25s ease, transform .25s ease;
}

.u-fade:hover,
.u-fade:focus-visible {
  opacity: 1;
}

.u-lift:hover,
.u-lift:focus-visible {
  transform: translateY(-1px);
}

.measure--none {
  max-width: none !important;
}

.prose {
  max-width: 66ch;
}

.prose>*+* {
  margin-top: 0.75em;
}


/* =========================
   06) LAYOUT (CONTAINERS, GRIDS, WRAPPERS, GUTTERS)
   ========================= */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* =========================
   07) COMPONENTS (REUSABLE, PAGE-AGNOSTIC UI)
   ========================= */

/* 07.1 Buttons / Brands / Cards */

.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--brand-contrast);
  --btn-border: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  background-clip: padding-box;
  filter: brightness(.98);
  /* subtle resting dim */
  transition:
    transform .2s ease,
    opacity .2s ease,
    filter .2s ease,
    border-color .18s ease,
    color .18s ease;
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--accent);
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn__label {
  opacity: .92;
  transition: opacity .25s ease;
}

.btn:hover .btn__label,
.btn:focus-visible .btn__label {
  opacity: 1;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn--hero {
  --btn-bg: var(--surface);
  --btn-fg: var(--brand-contrast);
  --btn-border: var(--brand-contrast);
  border: 1px solid var(--btn-border);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  position: relative;
  overflow: hidden;

  transition:
    opacity .25s ease,
    filter .25s ease,
    border-color .18s ease,
    color .18s ease;
}

.btn--hero:hover,
.btn--hero:focus-visible {
  transform: none;
  filter: brightness(1.05);
  border-color: var(--accent);
}

.btn--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  --ring: 1;
  padding: var(--ring);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  background: linear-gradient(90deg,
      transparent 0%,
      var(--hero-shimmer) 50%,
      transparent 100%) 0 0 / 200% 100% no-repeat;
  background-size: 300% 100%;
  opacity: 0;
  transition: opacity .25s ease;
}

.btn--hero:hover::before,
.btn--hero:focus-visible::before {
  opacity: .95;
  animation: hero-shimmer 5s linear infinite;
}

.btn--surface {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-border: var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.btn--surface:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.btn--surface:hover,
.btn--surface:focus-visible {
  filter: brightness(1.05);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-on-warm);
  --btn-border: currentColor;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  opacity: .9;
}

.btn--paper {
  --btn-bg: var(--neutral-50);
  --btn-fg: var(--neutral-900);
  --btn-border: var(--brass-500);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
}

.btn--paper:hover,
.btn--paper:focus-visible {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
  filter: none;
}

.brands {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  opacity: 0.9;
  text-align: center;
  gap: clamp(16px, 4vw, 40px);
}

.brands img {
  display: block;
  height: clamp(32px, 3.5vw, 44px);
  width: auto;
  opacity: 0.92;
  filter: saturate(0.9) contrast(1.05);
  transition: opacity 0.2s ease;
}

.brands:hover img,
.brands:focus-visible img {
  opacity: 1;
}

.brands a:focus-visible img {
  opacity: 1;
}

.card {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
  border-radius: 1rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  padding: 1.25rem 1.25rem 1rem;
  position: relative;
  z-index: 2;
  margin-bottom: 1.5rem;
}

.cta {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  text-decoration: none;
  color: var(--text);
  opacity: 0.92;
  transition: opacity 0.25s ease;
}

.cta-link:hover,
.cta-link:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Optional: a touch of brand colour for Facebook */
.cta-link--facebook .icon-facebook {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  color: var(--text);
  /* stays theme-aware */
}

.content-text .cta--flow {
  margin-top: clamp(2rem, 2.5vw, 1.75rem);
}

#contact-getintouch {
  scroll-margin-top: calc(var(--header-h) + 12px);
}



.info-box {
  background: var(--hot);
  color: var(--text-on-warm);
  padding: 1.25rem;
  /* equal all-round padding */
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  /* keeps consistent vertical rhythm */
  border-radius: 0;
  /* square corners */
  font-family: var(--font-sans);
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}


.section__ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}

/* Base: any section with a bottom-anchored ticker reserves height+gap */
.section.has-ticker {
  position: relative;
  padding-bottom: calc(5rem + var(--ticker-h) + var(--ticker-gap));
}

/* Home only: lift the ticker above the chevron and reserve extra space */
.section--home.has-cue.has-ticker .section__ticker {
  bottom: var(--chevron-clearance);
}

.section--home.has-cue.has-ticker {
  padding-bottom: calc(5rem + var(--ticker-h) + var(--ticker-gap) + var(--chevron-clearance));
}

/* When the ticker is bottom-anchored, don't add flow margin on the band itself */
.section__ticker .ticker {
  margin-bottom: 0;
}

/* (keep this if you also use in-flow tickers elsewhere) */
.ticker {
  background: var(--brand-band);
  color: var(--text-on-warm);
  height: 2rem;
  display: flex;
  align-items: center;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: auto;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
  overflow: hidden;
  /* margin-bottom only applies to in-flow tickers; suppressed above when bottom-anchored */
  margin-bottom: var(--ticker-gap);
}

.ticker__track {
  display: flex;
  gap: 2rem;
  white-space: nowrap;
  will-change: transform;
  width: 200%;
  animation: ticker-move 28s linear infinite;
}

.ticker__group {
  display: inline-flex;
  gap: 2rem;
  padding-inline: var(--container-pad);
  align-items: center;
}

.ticker__item {
  font-weight: 500;
}

.ticker__sep {
  opacity: .6;
  padding: 0 .4rem;
}

.band-link {
  color: inherit;
  text-decoration: none;
  opacity: .92;
  transition: opacity .25s ease, transform .25s ease;
}

.band-link:hover,
.band-link:focus-visible {
  opacity: .75;
  outline: none;
  transform: none;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}


/* 07.2 Site Header & Nav */

.site-header nav a,
.site-header nav a:link,
.site-header nav a:visited,
.site-header nav a:hover,
.site-header nav a:focus,
.site-header nav a:active {
  text-decoration: none;
  text-decoration-color: transparent;
}


.site-header {
  display: flex;
  position: sticky;
  top: 0px;
  z-index: 100;
  color: var(--header-text);
  align-items: center;
  justify-content: space-between;
  padding-block: 12px;
  padding-inline: clamp(24px, 4vw, 64px);
  border-bottom: 1px solid var(--border);
  background: var(--header-bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(2px);
  min-block-size: var(--header-h);
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: clamp(1.2rem, 0.8vw + 1rem, 1.6rem);
  line-height: 1.1;
  color: var(--header-text);
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--header-text);
  text-decoration: none;
}

.brand .logo {
  width: clamp(28px, 2.2vw + 20px, 48px);
  height: auto;
  display: none;
}

.brand .logo--dark {
  display: block;
}

.brand .logo--light,
.brand .logo--brass {
  display: none;
}

.logo {
  width: clamp(28px, 2.2vw + 20px, 48px);
  height: auto;
  display: none;
}

.logo--dark {
  display: block;
}

.logo--light,
.logo--brass {
  display: none;
}

.site-header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(14px, 1.5vw, 28px);
}

.site-header nav li {
  position: relative;
}

.site-header nav a {
  position: relative;
  display: inline-block;
  color: var(--header-text);
  font: 500 1rem/1 var(--font-display);
  letter-spacing: 0.03em;
  padding-top: 12px;
  padding-bottom: 6px;
  transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
  outline: none;
}

.site-header nav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 5px;
  width: 0;
  background-color: var(--accent);
  transition: width 250ms ease-in-out;
}

.site-header nav a:hover::before {
  width: 100%;
}

.site-header .site-tools {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.theme-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 8px;
  /* tap target */
  margin: 0;
  line-height: 0;
  /* prevents stray inline height from affecting layout */
  cursor: pointer;
  color: var(--header-text);
}

.theme-medallion {
  width: 24px;
  height: 24px;
  display: block;
}

.tm-ring {
  fill: none;
  stroke: var(--header-text);
  stroke-opacity: .4;
  stroke-width: 1.25;
}

.tm-wedge--silver {
  fill: var(--silver-300);
  opacity: .9;
}

.tm-wedge--brass {
  fill: var(--brass-400);
  opacity: .9;
}

.tm-wedge--light {
  fill: var(--neutral-100);
  opacity: .95;
}

.tm-active {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.25;
  opacity: 0;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.site-utilities {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
}

.type-scale {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: transparent;
}

.type-scale__btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--header-text);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  padding: 8px 10px;
  cursor: pointer;
  transition: opacity .18s ease, transform .18s ease;
}

.type-scale__btn+.type-scale__btn {
  border-left: 1px solid var(--border);
}

.type-scale__btn:hover,
.type-scale__btn:focus-visible {
  opacity: .92;
}

.type-scale,
.type-scale__btn {
  transform: none !important;
}

.type-scale__btn,
.theme-toggle {
  line-height: 1;
  vertical-align: middle;
}

.type-scale__btn:hover,
.type-scale__btn:focus-visible,
.theme-toggle:hover,
.theme-toggle:focus-visible {
  opacity: 0.92;
  transform: none;
}

.navbar-toggle {
  position: static;
  top: .75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  line-height: 0;
  align-items: center;
  margin-left: 0.25rem;
}

.navbar-toggle .bar {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  display: block;
  background-color: var(--header-text);
}

/* 07.3 Hero (+ Hero Band) */

.hero {
  position: relative;
  height: 60vh;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  scroll-snap-align: start;
  z-index: 2;
}

.hero__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
  color: var(--text-on-warm);
  font-family: var(--font-display);
  padding: 0 1rem;
  max-width: 90%;
}

.hero__title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .4) 40%, rgba(0, 0, 0, .12) 100%);

  z-index: 1;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--brand-band));
  z-index: 4;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__media img {
  transform: scale(1.05);
  transition: transform 12s ease-out;
}

.hero:hover .hero__media img {
  transform: scale(1);
}

.hero-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2rem;
  background: var(--brand-band);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--text-on-warm);
  padding-inline: var(--container-pad);
  pointer-events: none;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.hero-band p,
.hero-band span {
  margin: 0;
  line-height: 1;
}

.hero-band .band-link {
  color: inherit;
  text-decoration: none;
  opacity: 0.92;
  /* same base as .u-fade */
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: auto;
}

.hero-band .band-link,
.hero-band .band-link:link,
.hero-band .band-link:visited {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

.hero-band .band-link:hover,
.hero-band .band-link:focus-visible {
  opacity: 0.75;
  transform: none;
  background: none;
  outline: none;
}

.band-sep {
  display: inline-block;
  padding: 0 0.4rem;
  /* adjust as needed */
  line-height: 1;
}

/* Subpage banner (shared across subpages) */
/* 07.3.1 Page Hero (Subpage Banner) */
.page-hero {
  position: relative;
  width: 100%;
  height: clamp(180px, 28vh, 420px);
  overflow: clip;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
  margin: 0 0 var(--space-5, 2rem) 0;
}

.page-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay: soft dark tint for consistency with homepage hero */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  /* adjust 0.3–0.45 to taste */
  mix-blend-mode: multiply;
  /* gives a natural contrast lift */
  pointer-events: none;
  z-index: 1;
}

/* Optional: subtle bottom fade (same rhythm as home hero) */
.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 32px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .25) 100%);
  pointer-events: none;
  z-index: 2;
}

/* If your main section directly follows, keep spacing crisp */
.page-hero+.section {
  margin-top: 0;
}

/* 07.4 Action Cards */

.action-card {
  display: grid;
  position: relative;
  flex: 1 1 0;
  grid-template-rows: auto auto auto;
  row-gap: 0.75rem;
  border-radius: 1rem;
  padding: 1.25rem;
  width: 100%;
  min-width: 0;
  min-height: 300px;
  align-content: start;
  justify-items: stretch;
  justify-self: stretch;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  will-change: transform, box-shadow;
  transition: transform .2s ease, box-shadow .2s ease, border-color .18s ease, background-color .25s ease;
  z-index: 1;
}

.action-card__title,
.action-card__text {
  opacity: .92;
  transition: opacity .18s ease, color .18s ease;
}

.action-card:hover .action-card__title,
.action-card:focus-within .action-card__title,
.action-card:hover .action-card__text,
.action-card:focus-within .action-card__text {
  opacity: 1;
}

.action-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(var(--accent) 0turn, var(--accent) var(--sweep), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 0);
  transition: --sweep .35s ease;
}

.action-card__header {
  min-height: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  margin-bottom: 0;
}

.action-card__link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.action-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0;
}

.action-card__text {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--muted);
}

.action-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--surface);
  justify-self: stretch;
}

.action-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform .25s ease;
}

.action-card__caption,
.action-card__text {
  margin: 0;
  text-align: center;
  justify-self: center;
}

.action-card:hover,
.action-card:focus-within {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  --sweep: 1turn;
}

.action-card:hover .action-card__media img,
.action-card:focus-within .action-card__media img {
  transform: scale(1.03);
}

.action-card:not(:hover):not(:focus-within) {
  transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0s, 0s;
}

.action-card:hover .action-card__title,
.action-card:focus-within .action-card__title,
.action-card:hover .action-card__text,
.action-card:focus-within .action-card__text {
  opacity: 1;
}

/* 07.5 Sponsors (logos) */

.sponsor {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
}

.sponsor-logo .glisten {
  opacity: 0.85;
  mix-blend-mode: screen;
  filter: blur(0.8px);
  transform: translateX(-130%) skewX(-20deg);
  animation: glisten 4s ease-in-out infinite;
  pointer-events: none;
  backface-visibility: hidden;
}

.sponsor:hover::after,
.sponsor:focus-within::after {
  animation-play-state: paused;
}

.sponsor-logo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  color: var(--logo-color);
  transition: opacity .25s ease;
  opacity: .92;
}

.sponsor:hover .sponsor-logo,
.sponsor a:focus-visible .sponsor-logo,
.sponsor-logo:hover,
.sponsor-logo:focus-visible {
  opacity: 1;
  transform: none;
}

/* 07.6 Product Logos Rail (“Our Beers”) */

/* 07.7 Scroll Cue */

.scroll-cue {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  z-index: 3;
  opacity: 0.85;
  animation: cuePulse 2s ease-in-out infinite;
  filter: var(--scroll-cue-shadow, drop-shadow(0 0 8px rgba(255, 255, 255, 0.1)));
  bottom: 1.25rem;
}

.scroll-cue::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.scroll-cue:hover {
  opacity: 1;
  transform: translateX(-50%) translateY(-1px);
}

.scroll-cue:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.scroll-cue:hover,
.scroll-cue:focus-visible {
  animation-play-state: paused;
  /* stop the pulse */
  filter: none;
  /* remove glow */
  opacity: 1;
  transform: translateX(-50%);
  /* no translateY/lift */
}

.scroll-cue svg {
  width: 100%;
  height: 100%;
  fill: var(--scroll-cue-color, var(--header-text));
}

.scroll-cue--on-light {
  filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.26));
}

.scroll-cue--on-light:hover,
.scroll-cue--on-light:focus-visible {
  filter: none;
  /* kill dark drop-shadow too */
}

.scroll-cue--on-light svg {
  fill: var(--neutral-900);
}

.scroll-cue:hover svg,
.scroll-cue:focus-visible svg {
  /* keep the chevron itself unchanged (no extra effects) */
  transform: none;
}

#home-menu .scroll-cue {
  filter: none;
}

#home-menu .scroll-cue svg {
  fill: var(--neutral-900);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.20));
}

/* 07.8 Content Split (incl. media-portrait) */

.content-split {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: start;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.content-split--55-45 {
  grid-template-columns: 1.1fr .9fr;
}

.content-split--45-55 {
  grid-template-columns: 1.1fr 1.4fr;
}

.content-split--35-65 {
  display: grid;
  grid-template-columns: 3.5fr 6.5fr;
  /* ≈35% / 65% */
  grid-template-areas: "media text";
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

.content-text h2,
.content-text h3,
.content-text p {
  color: var(--neutral-900);
}

.content-overline {
  margin: 0.25rem 0;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  color: var(--neutral-900);
}

.content-text {
  max-width: 56ch;
  color: var(--text);
}

.content-text .info-box {
  background: var(--info-box);
  /* e.g. #B31B10 from earlier */
  color: var(--text-on-warm);
  padding: 1.25rem;
  /* even padding */
  margin-block: 1rem 1.25rem;
  /* tidy spacing in the text column */
  border-radius: 0;
  /* your square style */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.content-text .info-box,
.content-text .info-box :is(p, a, strong, em, small, span) {
  color: var(--text-on-warm) !important;
}

.content-text .info-box a {
  text-decoration: underline;
  /* optional: keep links obvious on dark bg */
  text-underline-offset: 0.18em;
}

.content-split+.content-split {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  /* breathing space above Lorraine */

}



.content-split--reverse>.content-media,
.content-split--reverse>.content-text {
  order: initial;
}

.content-split--35-65 .content-media {
  grid-area: media;
}

.content-split--35-65 .content-text {
  grid-area: text;
}

.content-split--35-65.content-split--reverse {
  grid-template-columns: 6.5fr 3.5fr;
  /* 65% / 35% */
  grid-template-areas: "text media";
}

.content-split--reverse>.content-media,
.content-split--reverse>.content-text {
  order: initial;
}

.content-split--35-65 .content-text {
  max-width: none !important;
}

.section--duo {
  position: relative;
  overflow: clip;
}

.section--duo .content-split {
  position: relative;
  z-index: 0;
}

.section--duo .content-split> :nth-child(2) {
  position: relative;
  z-index: 1;
}

.duo__ink {
  /* Default (dark) palette akin to section--ink */
  --bg: var(--neutral-0);
  --surface: var(--neutral-700);
  --text: var(--silver-200);
  --muted: var(--silver-400);
  --border: var(--neutral-700);
  --logo-color: var(--silver-200);

  background: var(--surface);
  color: var(--text);
}

.section--duo .content-split> :nth-child(2)::before {
  content: "";
  position: absolute;
  top: -1000px;
  bottom: -1000px;
  left: 0;
  width: 100vw;
  right: auto;
  z-index: -1;
  background: inherit;
}

.section--duo .duo__ink a {
  color: var(--text);
}

.section--duo .duo__ink .card,
.section--duo .duo__ink .btn--surface {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.media-portrait {
  margin: 0;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  background: #fff;
}

.media-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  max-height: min(56vh, 720px);
}

.media-landscape {
  margin: 0;
  border-radius: 1rem;
  /* matches your site’s cards/media */
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  /* consistent soft depth */
}

.media-landscape img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  /* landscape version of 4:5 */
  object-fit: cover;
  object-position: center;
}

/* 07.9 Section Header (title + lede) */

.section__header {
  margin-bottom: 2rem;
}

.section__header h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.2;
}

.section__lede {
  font-family: var(--font-sans);
  color: var(--muted);
  margin-top: 0.5rem;
}

.eyebrow {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.7;
  margin: 0 0 6px 0;
}

/* 07.10 Section Divider */

.section-divider {
  border: none;
  height: 1px;
  width: min(80%, 640px);
  margin: 2rem auto;
  background: var(--border);
  opacity: 0.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.section-divider--block {
  --divider-gap: 2rem;
  height: calc(var(--divider-gap) * 2);
  border: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 0;
  isolation: isolate;
}

/* 07.12 Events Card / List (generic) */
/* 07.13 Footer & Imprint */

.site-footer {
  background: var(--brand-band);
  /* teal */
  color: var(--text-on-warm);
  /* white */
  padding: 3rem var(--footer-pad-inline) 0;
  font-family: var(--font-sans);
}

.site-footer .footer__col a {
  color: var(--text-on-warm);
  /* match footer text (white on teal) */
  text-decoration: none;
  /* remove underline */
  opacity: .92;
  transition: opacity .25s ease;
  display: inline-flex;
  /* so the icon and text align nicely */
  align-items: center;
  gap: 0.4rem;
  /* space between pin and text */
}

.site-footer .footer__col a.js-map svg {
  width: var(--footer-icon-pin);
  height: var(--footer-icon-pin);
}

.site-footer .footer__col a:hover,
.site-footer .footer__col a:focus-visible {
  opacity: 1;
}

.site-footer .footer__col a svg {
  display: inline-block;
  stroke: currentColor;
  fill: none;
}

.site-footer p,
.site-footer address,
.site-footer span {
  opacity: 0.92;
}

.site-footer a {
  opacity: 0.92;
  transition: opacity .25s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  opacity: 1;
}

.footer__inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 1000px;
  margin: 0 auto;
}

.footer__heading {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 1rem 0;
  font-size: 1rem;
}

/* Lists & links */
.footer__nav ul,
.footer__social ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__nav a,
.footer__social a {
  color: var(--text-on-warm);
  text-decoration: none;
  opacity: .92;
  transition: opacity .25s ease;
}

.footer__nav a:hover,
.footer__nav a:focus-visible,
.footer__social a:hover,
.footer__social a:focus-visible {
  opacity: 1;
}

.social-links {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 0 0 0.5rem 0;
  padding: 0;
}

.site-footer address {
  font-style: normal;
  line-height: 1.5;
}

.site-footer p {
  margin: 0.25rem 0;
}

.imprint {
  position: relative;
  border: none;
  text-align: center;
  font-size: var(--font-size-sm);
  opacity: .85;
  margin-top: 2rem;
  padding-block: 0.75rem 1rem;
}

.imprint::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * var(--footer-pad-inline));
  right: calc(-1 * var(--footer-pad-inline));
  height: 1px;
  background: var(--rule-on-warm);
  pointer-events: none;
}

.imprint__meta {
  opacity: 0.92;
}

.imprint__legal ul {
  list-style: none;
  margin: 0.1rem 0 0;
  /* small gap under line 1 */
  padding: 0;
  display: inline-flex;
  gap: 0;
  /* base gap; pipes add visual separation */
}

/* Pipes between items */
.imprint__legal li+li::before {
  content: "|";
  opacity: 0.7;
  margin-left: .5rem;
  margin-right: .5rem;
}

.imprint a,
.imprint a:link,
.imprint a:visited {
  color: inherit;
  text-decoration: none;
  opacity: .92;
  transition: opacity .25s ease;
}

.imprint a:hover,
.imprint a:focus-visible {
  opacity: 1;
}

.site-footer .footer__social .social-links a svg {
  width: var(--footer-icon-social);
  height: var(--footer-icon-social);
  stroke: currentColor;
  fill: none;
  display: block;
  /* avoids stray inline svg baseline gaps */
}

.site-footer .imprint__meta a {
  margin-left: 1rem;
  /* adjust to taste (0.4–0.6rem usually ideal) */
}

.footer__social .social-links {
  margin-top: 1rem;
  /* keeps the visual breathing room */
  padding-left: 0;
  align-items: center;
  justify-content: flex-start;
  margin-left: -5px;
}

.footer__social .social-links li {
  display: flex;
  align-items: center;
  /* vertically center icons */
}

.social-links a {
  color: inherit;
  text-decoration: none;
  opacity: 0.92;
  transition: opacity .25s ease;
}

.social-links a:hover,
.social-links a:focus-visible {
  opacity: 1;
}

/* =========================
   08) SECTIONS (PAGE-LEVEL WRAPPERS & BESPOKE COMPOSITION)
   ========================= */

/* 08.0 Section Shells (.section, spacing, snap) */

html:not([data-snap="off"]) {
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h, 72px);
}

.section--ink {
  --bg: var(--neutral-0);
  --surface: var(--neutral-700);
  --text: var(--silver-200);
  --muted: var(--silver-400);
  --border: var(--neutral-700);
  --logo-color: var(--silver-200);
  background: var(--bg);
  color: var(--text);
}

.section {
  position: relative;
}

.section--pad {
  padding-top: clamp(24px, 4vh, 56px);
  padding-bottom: 5rem;
}

.section--snap {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.section--soft-sep {
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.05) inset;
}

.section--alt {
  background: var(--bg-alt);
}

.section--flow {
  min-height: auto !important;
  padding-bottom: 3rem;
}

.section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

.section--light,
.section--light h2,
.section--light h3,
.section--light p {
  color: var(--neutral-900);
}

/* 08.1 HOME */

.section--home {
  min-height: calc(100vh - var(--header-h));
}

/* 08.1.1 Home Actions (section wrapper: .actions) */

.actions {
  position: relative;
  margin-top: -32px;
  padding-top: calc(32px + 2rem);
  padding-bottom: 5rem;
  min-height: calc(100vh - var(--header-h));
  color: var(--text);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.05) inset;
  z-index: 1;
  overflow: hidden;
}

.actions::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  z-index: 1;
}

.actions::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* full section height */
  width: min(52vw, 780px);
  pointer-events: none;
  z-index: 0;

  /* Watermark image(s) */
  background:
    url("../img/swan-watermark-no-text.png") right -6% center / clamp(360px, 42vw, 900px) auto no-repeat,
    url("../img/swan-watermark-no-text.svg") right -6% center / clamp(360px, 42vw, 900px) auto no-repeat;

  /* Appearance */
  opacity: 0.07;
  /* subtle overall strength */
  color: var(--brand-mark);
  /* tints SVG if it uses currentColor */
  mix-blend-mode: lighten;
  /* lightens against dark ink background */

  -webkit-mask-image: linear-gradient(to left, #000 65%, transparent);
  mask-image: linear-gradient(to left, #000 65%, transparent);

  transform:
    perspective(1200px) rotateY(-18deg) rotateX(4deg) translateY(-2%) translateX(1%);
  transform-origin: right center;
  will-change: transform;

  filter: brightness(0.85) contrast(1.1);
  mask-image:
    linear-gradient(to left, rgba(0, 0, 0, 1) 66%, rgba(0, 0, 0, 0.7) 90%, transparent 100%);

}

.actions__inner {
  display: grid;
  z-index: 1;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  justify-content: center;
  align-items: stretch;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  padding-left: var(--brand-rail);
  padding-right: var(--brand-rail);
}

.actions__sponsors {
  bottom: 3vh;
  position: absolute;
  top: calc(32px + 2.5rem);
  left: var(--container-pad);
  width: var(--sponsor-w);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: flex-start;
  align-self: start;
  justify-content: flex-start;
  pointer-events: auto;
  z-index: 1;
  padding-right: 0.5rem;
}

.actions__sponsors img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
}

.actions__sponsors,
.actions__sponsors .sponsor {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.actions__sponsors .sponsor,
.actions__sponsors img {
  width: 100%;
  height: auto;
  display: block;
}

.actions .products {
  grid-column: 1 / -1;
}

/* 08.1.2 Home Menu Teaser (.menu-intro …) */
/* 08.1.3 Home Events Teaser (.section--home-events, .home-events-*) */

.section--home-events .events-logos {
  display: flex;
  flex-direction: row;
  /* stack Sky / TNT */
  align-items: center;
  gap: 2rem;
  margin-top: 0.25rem;
  /* nudge if needed */
  justify-content: center;
}

.section--home-events .events-logos .sponsor-logo {
  display: block;
  width: clamp(140px, 12vw, 220px);
  /* same feel as your brand rail */
  height: auto;
  color: var(--logo-color);
  /* silver on dark, brass in brass, black in light */
  opacity: .92;
  transition: opacity .25s ease;
}

.section--home-events .events-logos .sponsor-logo:hover,
.section--home-events .events-logos .sponsor a:focus-visible .sponsor-logo {
  opacity: 1;
}

/* 08.1.4 Home Contact Teaser (.home-contact) */

.home-contact__backtop {
  margin-top: 2.5rem;
  /* more breathing space from elements above */
  padding-top: 0.5rem;
  text-align: center;
  /* centered on the page */
}

.home-contact__backtop a {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--text);
  text-decoration: none;
  /* no underline */
  opacity: 0.85;
  /* baseline fade */
  transition: opacity 0.25s ease;
}

.home-contact__backtop a:hover,
.home-contact__backtop a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  opacity: 1;
}

/* 08.2 ABOUT */
/* 08.2.1 About Intro (.about-intro) */
/* 08.2.2 About Owners/Bios (.bio …) */
/* 08.2.3 Work For Us (#about-work) */

#work-for-us .content-split {
  align-items: start;
  /* ensures both columns align at first text line */
}

.job-card {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 1.75rem;
  border-radius: 0.75rem;
  max-width: 720px;
}

.job-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--neutral-900);
}

.job-card__text {
  margin: 0;
  color: var(--neutral-900);
  opacity: 0.9;
}

#work-for-us .card,
#work-for-us .job-card {
  margin-inline: auto;
  max-width: 720px;
}

/* 08.3 MENU (intro, food, drinks) */


.products__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.products__inner>.eyebrow {
  margin-bottom: 2rem;
}

.products .section__header {
  text-align: left;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 1.25rem;
  margin-bottom: 2rem;
}

.products .eyebrow+.section__header {
  border-top: none;
  padding-top: 0;
}

.products .products__rail+.section__header,
.products .section__header+.section__header {
  margin-top: 3rem;
}

.products .section__header h2 {
  line-height: 1.15;
  margin: 0 0 2px 0;
  letter-spacing: -0.01em;
  font-size: 28px;
}

.products .section__lede {
  margin-bottom: 14px;
  opacity: 0.8;
}

.products {
  --rail-sep: var(--silver-shimmer, #e8e8e8);
}

:root[data-accent="brass"]:not([data-theme="light"]) .products {
  --rail-sep: var(--brass-shimmer, #d6b46a);
}

.products .products__rail {
  position: relative;
  min-height: 88px;
  overflow: hidden;
  --fade-w: 40px;
}

.products .products__list {
  padding-inline: var(--fade-w);
}

.products .products__rail {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-w), #000 calc(100% - var(--fade-w)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-w), #000 calc(100% - var(--fade-w)), transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.products .products__list {
  --rail-gap: clamp(12px, 2vw, 20px);
  display: flex;
  align-items: center;
  gap: var(--rail-gap);
  list-style: none;
  margin: 0;
}

.products .products__list>li {
  position: relative;
  min-width: clamp(84px, 9vw, 112px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 12px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-radius: 8px;
}

.products .products__list>li+li::before {
  content: "";
  position: absolute;
  left: calc(-0.5 * var(--rail-gap));
  top: 5%;
  bottom: 5%;
  width: 1px;
  background: color-mix(in srgb, var(--rail-sep) 80%, transparent);
  pointer-events: none;
}

.products .products__list img,
.products .products__list .wm {
  height: 64px;
  width: auto;
  display: block;
  line-height: 0;
}

.products .products__list img.product-thumb {
  height: clamp(72px, 9vw, 120px);
  width: auto;
  display: block;
  object-fit: contain;
  line-height: 0;
}

/* 08.2 ABOUT ------------------------------------------------------------ */

/* 08.4 EVENTS (events page) */

.events-live .brands img {
  display: block;
}

.events-live .cta {
  display: flex;
  flex-wrap: wrap;
  /* safe for smaller screens */
  gap: 0.75rem;
  margin-top: 1.5rem;
  /* spacing above CTA group */
  margin-bottom: 2rem;
  /* breathing room before logos */
}

.events-live .brands {
  display: flex;
  flex-direction: column;
  /* stack Sky / TNT vertically */
  align-items: flex-start;
  /* align left edge */
  margin-top: 4rem;
  gap: 1.25rem;
  /* vertical gap between logos */
}

/* EVENTS — Listings */
.section--events-list .section__header {
  margin-bottom: 1.5rem;
}

.events-list {
  display: grid;
  gap: clamp(16px, 2.5vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-item {
  display: grid;
  grid-template-columns: minmax(120px, 260px) 1fr;
  /* left image, right text */
  gap: clamp(14px, 2vw, 20px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0;
  /* straight edges as requested */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  padding: clamp(12px, 2vw, 16px);
  align-items: start;
}

.event-media {
  margin: 0;
  overflow: hidden;
  /* tidy image edges */
  background: var(--bg-alt);
}

.event-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  /* consistent thumbnail shape */
  object-fit: cover;
  object-position: center;
}

.event-body {
  min-width: 0;
  /* allow text to wrap nicely */
}

.event-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.2vw + 1rem, 1.35rem);
  line-height: 1.2;
  margin: 0 0 .4rem 0;
  color: var(--text);
}

.event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .9rem;
  margin: 0 0 .5rem 0;
  font-family: var(--font-sans);
  font-size: .95rem;
  color: var(--muted);
}

.event-time {
  letter-spacing: .02em;
}

.event-channel {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .2rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  line-height: 1;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
}

.event-channel__logo {
  height: 16px;
  width: auto;
  display: block;
  opacity: .95;
}

.event-channel__label {
  font-size: .9em;
  letter-spacing: .02em;
}

.event-copy {
  margin: 0;
  opacity: .95;
  line-height: var(--rhythm);
}

.section--home-events .sports-stack {
  /* Occupy ~40–55% of the section width; tweak to taste */
  --sports-strips-width: 50%;
  width: var(--sports-strips-width);

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.section--home-events .sport-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* image / header / copy */
  background: #c3002f;
  /* local red for now */
  color: #fff;
  border-radius: 0;
  overflow: hidden;
}

.section--home-events .sport-card__media {
  margin: 0;
  padding: 0;
  line-height: 0;
  /* prevent inline-img whitespace */
  background: #000;
  /* safe fallback under image edge */
}

.section--home-events .sport-card__media img {
  width: 100%;
  height: 220px;
  /* set an initial visible height */
  object-fit: cover;
  /* crop gracefully */
  display: block;
  /* remove inline gaps */
}

.section--home-events .sport-card__header {
  padding: 12px 14px 4px;
}

.section--home-events .sport-card__title {
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.section--home-events .sport-card__copy {
  padding: 4px 14px 14px;
  font-size: 0.98rem;
  opacity: 0.95;
}

.section--home-events {
  position: relative;
  --chevron-clearance: calc(44px + 1.25rem + 8px);
}

.section--home-events .section__inner {
  max-width: 100%;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-lg);
  align-items: start;
  margin-inline: auto;

}

.section--home-events .section__header {
  grid-column: 1 / -1;
  /* span both columns */
  text-align: right;
  /* aligns with right rail of navbar */
}

.section--home-events .home-events-grid {
  display: grid;
  grid-template-columns: 45% 1fr;
  align-items: stretch;
  gap: clamp(3.5rem, 6vw, 7rem);
  width: 100%;
  /* fills section__inner */
  position: relative;
  min-height: 100%;
  padding-bottom: var(--chevron-clearance);
  box-sizing: border-box;
  height: calc(100% - var(--chevron-clearance));
  padding-bottom: 0;
}


.section--home-events .home-events-grid::after {
  content: "";
  position: absolute;
  left: 40%;
  top: 0;
  bottom: 0;
  width: 1px;
}

.section--home-events .sports-stack {
  width: 100%;
  display: grid;
  grid-column: 1;
  align-items: start;
  margin-top: 0;
  padding-top: 0;
  align-self: stretch;
  min-height: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  height: 100%;
  grid-auto-rows: 1fr;
}

.section--home-events .promos-stack {
  grid-column: 2;
  /* sit in the right column of .home-events-grid */
  display: grid;
  grid-template-columns: 1fr;
  /* single column = vertical stack */
  grid-auto-rows: max-content;
  /* each card sizes to its own content */
  gap: 2rem;
  align-content: start;
  /* pin to the top under the header */
  justify-items: stretch;
  /* cards fill the column width */
  height: 100%;
  align-self: stretch;
}

.section--home-events .sport-card {
  display: flex;
  grid-template-rows: auto 1fr auto;
  /* image / header / copy */
  background: #c3002f;
  /* local red for now */
  color: #fff;
  border-radius: 0;
  overflow: hidden;
  height: 100%;
  flex-direction: column;
}

.section--home-events .sport-card__media {
  margin: 0;
  padding: 0;
  line-height: 0;
  background: #000;
}

.section--home-events .sport-card__media img {
  width: 100%;
  height: 220px;
  /* initial visible height */
  object-fit: cover;
  display: block;
  flex-grow: 1;
}

.section--home-events .sport-card__header {
  padding: 12px 14px 4px;
}

.section--home-events .sport-card__title {
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.section--home-events .sport-card__copy {
  padding: 4px 14px 14px;
  font-size: 0.98rem;
  opacity: 0.95;
}

.section--home-events .promo-card {
  background: color-mix(in srgb, var(--surface, #1b1d22) 92%, var(--bg, #0d0f14) 8%);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
  width: 100%;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  color: var(--text, #fff);
}

.section--home-events .promo-card__header {
  margin: 0 0 .4rem 0;
}

.section--home-events .promo-card__title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.section--home-events .promo-card__copy {
  margin: 0;
  line-height: 1.55;
  opacity: .95;
}


.section--home-events .scroll-cue {
  z-index: 10;
}

/* 08.5 CONTACT */

.contact__list {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.contact__item {
  display: grid;
  grid-template-columns: 20px auto;
  align-items: center;
  gap: 0.75rem;
  color: var(--text);
}

.contact__item .icon {
  opacity: 0.82;
}

.contact__tel {
  font-family: var(--font-sans);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
}

.contact__item a {
  color: var(--text);
  text-decoration: none;
}

.contact__item a:hover,
.contact__item a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.contact__list a {
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.contact__list a:hover,
.contact__list a:focus-visible {
  opacity: 0.85;
  filter: brightness(0.95);
}

#find-us .contact__stack {
  display: grid;
  gap: 2rem;
}

.contact__mapwrap {
  grid-column: 2;
  grid-row: auto;
  display: grid;
  grid-template-rows: 1fr;
  align-content: start;
  align-self: stretch;
  position: relative;
}

.contact__map {
  position: relative;
  border-radius: 1rem;
  background: var(--bg-alt);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  min-height: 320px;
  z-index: 1;
}

.contact__map iframe {
  display: block;
  width: 100%;
  height: min(56vh, 560px);
  border: 0;
}

/* Overlay link for entire map */
.contact__map-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
}


#contact-getintouch .form-wrap {
  padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 3vw, 2rem) clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 4rem);
}

#contact-getintouch .contact-form--flush {
  max-width: 640px;
}

#contact-getintouch .contact-form--flush {
  --form-field-bg: var(--surface);
  --form-field-fg: var(--text);
}

#contact-getintouch .contact-form--flush input,
#contact-getintouch .contact-form--flush textarea {
  width: 100%;
  background: var(--form-field-bg);
  color: var(--form-field-fg);
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0.75rem;
  font: 1rem/1.4 var(--font-sans);
  outline: none;
  resize: vertical;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

#contact-getintouch .contact-form--flush input::placeholder,
#contact-getintouch .contact-form--flush textarea::placeholder {
  color: color-mix(in srgb, var(--form-field-fg) 55%, transparent);
  opacity: 0.85;
}

#contact-getintouch .contact-form--flush input:focus,
#contact-getintouch .contact-form--flush textarea:focus {
  border-bottom-color: var(--accent);
  background: color-mix(in srgb, var(--form-field-bg) 95%, var(--bg) 5%);
}

#contact-getintouch .contact-form--flush h3 {
  margin: 0 0 .75rem 0;
}

#contact-getintouch .contact-form--flush .form-note {
  margin: .25rem 0 0;
  font-size: .9rem;
  opacity: .85;
}

#contact-getintouch .contact-form--flush .form-actions {
  margin-top: .75rem;
}

#contact-getintouch .contact-form--flush input,
#contact-getintouch .contact-form--flush textarea {
  border-bottom-color: var(--silver-500);
}

#contact-getintouch .contact-form--flush input:focus,
#contact-getintouch .contact-form--flush textarea:focus,
#contact-getintouch .contact-form--flush input:not(:placeholder-shown),
#contact-getintouch .contact-form--flush textarea:not(:placeholder-shown) {
  background: var(--surface-contrast);
  transition: background .25s ease, border-color .25s ease;
}


/* 08.6 POLICY PAGES (Accessibility, Cookies, Privacy) */

.policy {
  max-width: none;
  margin: 0;
}

.policy h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.policy p,
.policy ul {
  margin-top: 0;
  margin-bottom: 1rem;
}

.policy ul {
  padding-left: 1.25rem;
  list-style: disc;
}

.policy li {
  margin-bottom: 0.25rem;
}


/* =========================
   09) ANIMATIONS & EFFECTS
   ========================= */

@property --sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0turn;
}

@keyframes hero-shimmer {
  from {
    background-position: -150% 0;
  }

  to {
    background-position: 150% 0;
  }
}


@keyframes glisten {
  from {
    transform: translateX(-130%) skewX(-20deg);
  }

  to {
    transform: translateX(130%) skewX(-20deg);
  }
}

@keyframes cuePulse {

  0%,
  100% {
    opacity: 0.6;
    transform: translateX(-50%) translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(4px);
  }
}

/* Move left by exactly one half (second group width) */
@keyframes ticker-move {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* =========================
   10) ACCESSIBILITY HELPERS
   ========================= */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  z-index: 1000;
  background: var(--neutral-50);
  color: var(--neutral-900);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-footer a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .85);
  outline-offset: 2px;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html:not([data-snap="off"]) {
    scroll-snap-type: none;
    scroll-behavior: auto;
    transition: none !important;
    animation: none !important;
  }

  .btn {
    transition: none;
  }

  .btn:hover,
  .btn:focus {
    transform: none;
  }

  .action-card,
  .action-card__media img,
  .action-card::after {
    transition: none;
  }

  .sponsor::after {
    animation: none;
  }

  .scroll-cue {
    animation: none;
  }

  .ticker__track {
    animation: none;
    transform: none;
  }
}

/* =========================
   11) THEMES (variables only)
   ========================= */

:root[data-accent="brass"]:not([data-theme="light"]) {
  --brand-band: var(--bronze-700);
  --brand-mark: var(--brass-400);
  --text-on-warm: var(--cream-300);
  --text: var(--brass-400);
  --text-heading: var(--brass-500);
  --muted: var(--brass-600);
  --border: var(--brass-700);
  --accent: var(--brass-500);
  --link: var(--brass-400);
  --brand-contrast: var(--brass-400);
  --header-text: var(--brass-500);
  --logo-color: var(--brass-400);
  --hero-shimmer: var(--brass-shimmer);
  --surface: var(--charcoal-700);
  --surface-contrast: var(--bronze-800);
  --rail-sep: var(--brass-shimmer);
  --info-box: var(--bronze-700);
  --nav-mobile-interact-bg: var(--bronze-focus);
}

:root[data-theme="light"] {
  --bg: var(--neutral-100);
  --surface: var(--silver-300);
  --text: var(--neutral-900);
  --muted: var(--neutral-700);
  --border: var(--neutral-300);
  --accent: var(--neutral-900);
  --link: var(--neutral-900);
  --header-text: var(--neutral-900);
  --brand-band: var(--surface);
  --text-on-warm: var(--neutral-900);
  --logo-color: var(--neutral-900);
  color: var(--neutral-900);
  --surface-contrast: var(--silver-375);
  --info-box: var(--silver-300);
  --nav-mobile-interact-bg: var(--light-focus);
}

:root[data-theme="light"] .logo--dark {
  display: none;
}

:root[data-theme="light"] .logo--light {
  display: block;
}

:root[data-accent="brass"]:not([data-theme="light"]) .logo--dark {
  display: none;
}

:root[data-accent="brass"]:not([data-theme="light"]) .logo--brass {
  display: block;
}

:root[data-accent="brass"]:not([data-theme="light"]) .action-card:hover,
:root[data-accent="brass"]:not([data-theme="light"]) .action-card:focus-within {
  border-color: var(--accent);
}

:root[data-accent="brass"]:not([data-theme="light"]) .section--ink {
  --surface: var(--charcoal-700);
  --text: var(--brass-400);
  --text-heading: var(--brass-500);
  --muted: var(--brass-600);
  --border: var(--brass-600);
  --logo-color: var(--brass-400);
}

:root[data-accent="brass"]:not([data-theme="light"]) .section:not(.section--ink) {
  --bg: var(--neutral-100);
  --surface: var(--neutral-50);
  --text: var(--neutral-900);
  --text-heading: var(--neutral-900);
  --muted: var(--neutral-700);
  --border: var(--neutral-300);
  --link: var(--neutral-900);
  color: var(--text);
}

:root[data-accent="brass"]:not([data-theme="light"]) #find-us .card {
  --text: var(--brass-400);
  --text-heading: var(--brass-500);
  --muted: var(--brass-600);
  --accent: var(--brass-500);
  --border: var(--brass-700);
  color: var(--text);
}

:root[data-accent="brass"]:not([data-theme="light"]) #find-us .card svg {
  color: var(--text);
}

:root[data-theme="light"] .hero-band {
  background: var(--brand-band);
  color: var(--text-on-warm);
  border-color: var(--silver-300);
  box-shadow: none;
}

:root[data-theme="light"] .hero__content {
  color: var(--silver-200);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

:root[data-theme="light"] .hero__title {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

:root[data-theme="light"] .hero::before {
  background: linear-gradient(rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.05) 100%);
}

:root[data-theme="light"] .section--ink {
  background: var(--silver-300);
  --surface: var(--silver-350);
  --text: var(--neutral-900);
  --text-heading: var(--neutral-900);
  --muted: var(--neutral-700);
  --border: var(--silver-300);
  --logo-color: var(--neutral-900);
  box-shadow: none;
}

:root[data-theme="light"] .btn--surface {
  background: var(--surface);
  color: var(--neutral-900);
  border-color: var(--border);
}

:root[data-theme="light"] .btn--hero {
  --btn-fg: var(--neutral-900);
  color: var(--btn-fg);
}

:root[data-theme="light"] .action-card {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

:root[data-theme="light"] .action-card__text {
  color: var(--muted);
}

:root[data-theme="light"] .action-card:hover,
:root[data-theme="light"] .action-card:focus-within {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

:root[data-theme="light"] .products--band {
  background: var(--neutral-300);
}

:root[data-theme="light"] .site-header {
  border-bottom: 1px solid var(--border);
  background: var(--brand-band);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .section--about-intro {
  background: var(--silver-300);
}

:root[data-theme="light"] #home-menu,
:root[data-theme="light"] .section--alt {
  background: var(--neutral-300);
}

:root[data-accent="brass"]:not([data-theme="light"]) .section-divider {
  background: color-mix(in srgb, var(--brass-500) 70%, var(--border) 30%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  opacity: 0.55;
}

:root[data-theme="light"] .section-divider {
  background: color-mix(in srgb, var(--neutral-700) 80%, var(--neutral-300) 20%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  opacity: 0.6;
}

:root[data-accent="brass"]:not([data-theme="light"]) .duo__ink {
  --surface: var(--charcoal-700);
  --text: var(--brass-400);
  --muted: var(--brass-600);
  --border: var(--brass-600);
  --logo-color: var(--brass-400);
}

:root[data-theme="light"] .duo__ink {
  --surface: var(--silver-300);
  --text: var(--neutral-900);
  --muted: var(--neutral-700);
  --border: var(--silver-300);
  --logo-color: var(--neutral-900);
}

:root[data-accent="brass"]:not([data-theme="light"]) #find-us .card {
  --surface: var(--charcoal-700);
  --bg: var(--charcoal-700);
  --text: var(--brass-400);
  --text-heading: var(--brass-500);
  --muted: var(--brass-600);
  --accent: var(--brass-500);
  --border: var(--brass-600);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

:root[data-accent="brass"]:not([data-theme="light"]) #find-us .card svg {
  color: var(--text);
}


@media (max-width: 1746px) {

  .hero__title,
  .hero__headline {
    white-space: nowrap;
    /* keeps entire line together */
  }
}

@media (max-width: 1575px) {
  .actions__inner .action-card {
    grid-row: 1;
  }

  .actions__sponsors {
    position: static;
    /* exit absolute layout */
    grid-column: 1 / -1;
    /* span all 3 columns */
    grid-row: 2;
    /* sit below the cards */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 0;
    text-align: center;
    display: flex;
    flex-direction: row;
    /* forces horizontal */
    gap: var(--sponsor-gutter, 1.5rem);
  }

  .actions__sponsors .sponsor-logo {
    display: block;
    width: clamp(140px, 12vw, 220px);
    height: auto;
  }

  .actions__sponsors .sponsor {
    width: auto;
  }
}

@media (max-width: 1380px) {
  .section--home-events .sports-stack {
    grid-template-columns: 1fr;
    /* single column */
    grid-template-rows: repeat(3, auto);
    justify-items: center;
    /* center each card horizontally */
    gap: 2rem;
    /* consistent spacing between rows */
  }

  .section--home-events .sport-card {
    width: 100%;
    /* optional: limit card width for balance */
  }

  .section--home-events .sport-card__media img {
    height: clamp(150px, 10vw, 200px);
  }

  .section--home-events .sport-card__media img[src*="sport-rugby.jpg"] {
    object-position: center 35%;
  }

  .section--home-events .sport-card__media img[src*="sport-football.jpg"] {
    object-position: center 85%;
  }

  .section--home-events .sport-card .sport-card__copy:first-of-type {
    display: none;
  }
}

@media (max-width: 1028px) {
  .brand-name {
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    white-space: nowrap;
    letter-spacing: 0.03em;
  }
}

@supports (height: 100dvh) {
  @media (max-width: 915px) {
    .site-header nav {
      max-height: calc(100dvh - var(--header-h));
    }
  }
}

@media (max-width: 915px) {
  html {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }

    .section--home,
  .actions {
    min-height: auto !important;
  }

  .section--snap {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

    .section--flow { min-height: auto !important; } 

  .site-utilities {
    gap: 1rem;
    padding-inline-end: calc(44px + 1rem);
  }

  .theme-toggle {
    margin-inline-end: -0.25rem;
  }

  .site-tools {
    position: relative;
  }

  .navbar-toggle {
    position: absolute;
    top: 50%;
    right: calc(var(--container-pad) - 1rem);
    transform: translateY(-50%);
    display: inline-flex;
    width: 28px;
    height: 20px;
    z-index: 101;
    --burger-h: 20px;
  }

  .navbar-toggle .bar {
    width: 100%;
    height: 3px;
    border-radius: 999px;
    display: block;
    background-color: var(--header-text);
    transform-origin: center;
    transition: transform .22s cubic-bezier(.33, .66, .4, 1), opacity .18s ease;
    --bar-h: 3px;
  }

  .site-header {
    padding-inline: clamp(12px, 3vw, 24px);
  }

  .site-header nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    left: auto;
    width: 100%;
    max-height: calc(100vh - var(--header-h));
    overflow: auto;
    background: var(--brand-band);
    z-index: 100;
    transform: translateX(100%);
  }

  .site-header nav.primary-nav {
    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
  }

  .site-header nav ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-header nav li {
    border-top: 1px solid var(--border);
  }

  .site-header nav a {
    display: block;
    width: 100%;
    padding: 16px 20px;
    text-align: center;
    background: transparent;
    color: var(--text-on-warm);
    transition: background-color .18s ease, color .18s ease;
  }

  .site-header nav a::before {
    content: none;
  }

  .site-header nav a:hover,
  .site-header nav a:focus-visible {
    background: var(--nav-mobile-interact-bg);
  }

  .site-header #nav-check:checked~.site-tools .primary-nav {
    transform: translateX(0);
  }

  .site-header #nav-check:checked~.site-tools .navbar-toggle .bar:nth-child(1) {
    transform: translateY(calc((var(--burger-h) - var(--bar-h)) / 2)) rotate(45deg);
  }

  .site-header #nav-check:checked~.site-tools .navbar-toggle .bar:nth-child(2) {
    opacity: 0;
  }

  .site-header #nav-check:checked~.site-tools .navbar-toggle .bar:nth-child(3) {
    transform: translateY(calc(-1 * (var(--burger-h) - var(--bar-h)) / 2)) rotate(-45deg);
  }

  .nav-backdrop {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: rgba(0, 0, 0, .38);
    backdrop-filter: blur(1.5px);
    opacity: 0;
    pointer-events: none;
    z-index: 90;
    transition: opacity .25s ease;
  }

  #nav-check:checked~.nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .actions__inner {
    grid-template-columns: 1fr;      /* 1 column */
    grid-auto-rows: auto;
    gap: 1.25rem;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
  .actions__inner .action-card {
    grid-column: 1 / -1;      
        grid-row: auto;   }
  /* optional: keep sponsors under the cards and centered */
  .actions__sponsors {
    grid-column: 1 / -1;
            grid-row: auto;  
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
        position: static;
  }
    .action-card__media img {
    aspect-ratio: 3 / 2;       /* shallower crop for vertical flow */
    object-position: center top; 
  object-fit: cover;
  }

  .action-card__media {
    max-height: 180px;          /* reduce footprint */
    overflow: hidden;           /* tidy crop edges */
  }
 #home-menu .content-split {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    align-items: center;
  }

  #home-menu .media-portrait {
    order: -1; /* image first */
    width: 100%;
    max-width: 600px;
  }

  #home-menu .media-portrait img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center 45%;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }

  #home-menu .content-text {
    max-width: 600px;
    text-align: center;
    margin-inline: auto;
  }
    #home-events .home-events-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  #home-events .promos-stack {
    order: -1; /* header moves to top */
  }

    #home-events .promos-stack .card {
    width: 100%;
    max-width: 700px;  /* matches sport cards */
    margin-inline: auto;
  }

  #home-events .promos-stack .section__header {
    text-align: center;
    margin-bottom: 1.25rem;
  }

  #home-events .sports-stack {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
        align-items: flex-start; 
  }

    #home-events .sport-card {
    align-self: flex-start;    /* each card only as tall as its content */
    height: auto;              /* ensures no equal-height enforcement */
  }

  #home-events .sport-card,
  #home-events .card {
    max-width: 650px;
    margin-inline: auto;
  }



  #home-events .events-logos {
    justify-content: center;
  }
    #find-us .content-split {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* 2) Keep both columns comfortably narrow and centred */
  #find-us .contact__stack,
  #find-us .contact__mapwrap {
    max-width: 700px;
    width: 100%;
    margin-inline: auto;
  }

  /* 3) Cards & lists breathe a bit on mobile */
  #find-us .card {
    padding: 1.1rem 1.2rem;
  }
  #find-us .contact__list {
    row-gap: 0.6rem;
  }

  /* 4) Map: full width with a reliable height */
  #find-us .contact__map {
    border-radius: 12px;
    overflow: hidden;
  }
  #find-us .contact__map iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;   /* adjust to 4 / 3 if you want it taller */
    height: auto;            /* allow the aspect-ratio to drive height */
    border: 0;
  }

  /* 5) Buttons stack nicely if they wrap */
  #find-us .cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  /* 6) Header alignment for small screens */
  #find-us .section__header {
    text-align: center;
  }

  /* 7) “Back to top” link centred */
  .home-contact__backtop {
    text-align: center;
    margin-top: 1rem;
  }
    .page-hero {
    height: auto;
    aspect-ratio: 16 / 6;       /* wide banner on tablets/large phones */
    margin: 0 0 1.25rem 0;       /* slightly tighter gap below */
  }

  .page-hero picture,
  .page-hero img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 40%; /* lift the crop a touch so subjects don’t vanish */
  }
}

@media (max-width: 641px) {
  #about .content-split {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  #about .media-portrait {
    order: -1;                /* move image above text */
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }

  #about .media-portrait img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* tune the focal point to keep faces central */
    object-position: center 15%;
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  }

  #about .content-text {
    max-width: 700px;
    margin-inline: auto;
    text-align: center; /* optional — aligns nicely on narrow view */
  }
  #about .cta {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem; /* optional breathing space */
}
  #about-owners .content-split {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center; /* keeps child widths centred */
  }

  /* Always show the image first (works for normal + --reverse rows) */
  #about-owners .content-media {
    order: -1;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
  }

  /* Shallower, tidy crop; adjust focal point as needed */
  #about-owners .content-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 40%; /* ↑ move up by lowering %, e.g. 30% or 20% */
    border-radius: 0.75rem;
  }

  /* Keep text width matching the image for a neat column */
  #about-owners .content-text {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
  }
    #menu-main .content-split {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  #menu-main .media-portrait {
    order: -1;                /* move image above text */
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }

  #menu-main .media-portrait img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center 30%;  /* adjust for correct focal point */
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  }

  #menu-main .content-text {
    max-width: 700px;
    margin-inline: auto;
    text-align: center;
  }
    #events-main .content-split {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  /* Move promo cards (regular + live music) below the text */
  #events-main .content-split > div:last-child {
    order: 2;
  }

  /* Keep text full width and centered */
  #events-main .content-text {
    max-width: 700px;
    margin-inline: auto;
    text-align: center;
  }

  /* Ensure cards fill width and stay neat */
  #events-main .card {
    width: 100%;
    max-width: 700px;
    margin-inline: auto;
  }

  /* Logos: centered and spaced */
  #events-main .brands {
    justify-content: center;
    margin-top: 2rem;
  }
  #events-main .cta {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem; /* optional breathing space */
}

#events-main .cta a {
  margin-inline: auto; /* ensures both the button and link sit centrally */
}
#events-main .content-text .cta + .cta {
  margin-top: 0.75rem;
}
}

@media (max-width: 606px) {
  #work-for-us .content-split {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  #work-for-us .card {
    order: 2;            /* ensures it appears after the text */
    max-width: 700px;
    width: 100%;
    margin-inline: auto;
  }

  /* Optional: keep the text nicely centred and narrow */
  #work-for-us .content-text {
    max-width: 700px;
    margin-inline: auto;
  }
}

@media (max-width: 580px) {

  .hero__title {
    white-space: nowrap;                /* keep single line */
    font-size: clamp(1.2rem, 5vw, 1.8rem); /* smooth, proportional shrink */
    transform-origin: center;           /* ensure it scales evenly */
    max-width: 90vw;                    /* prevents clipping on very narrow screens */
    overflow: hidden;
    text-overflow: ellipsis;            /* graceful fallback if still too long */
  }

  .hero__content {
    left: 50%;
    transform: translateX(-50%);        /* reassert horizontal centering */
    width: 100%;
    text-align: center;
    padding-inline: 1rem;               /* tiny safety buffer */
  }
  .btn--hero {
    margin-top: 0.75rem;
  }
}

@media (max-width: 480px) {
  .type-scale {
    display: none !important;
  }

  /* Optional: space the theme toggle a bit so it doesn’t crowd the burger */
  .theme-toggle {
    margin-right: 0.25rem;
  }

  .hero {
    height: clamp(38vh, 52vw, 52vh);
    min-height: 220px;
  }

  .hero__title {
    font-size: clamp(1.6rem, 6vw, 2.25rem);
  }

  .hero__media img {
    transform: none;
    transition: none;
  }
  .hero::before {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, .1));
  }
    .hero-band { display: none; }


  .hero__content {
    width: 100%;
    padding-inline: 16px;
    left: 50%;
    transform: translate(-50%, -50%); /* keep your existing centering */
    text-align: center;
  }

  /* Make "Proper Buxton Local" stay on one line and shrink smoothly */
  .hero__title {
    white-space: nowrap;                 /* single line */
    text-wrap: normal;                   /* override global balance to stop reflow jumps */
    font-size: clamp(1.05rem, 5.6vw, 1.75rem); /* fluid, smaller ceiling */
    letter-spacing: 0.01em;              /* tighten slightly to save width */
    max-width: calc(100vw - 32px);       /* never exceed viewport minus gutters */
    margin-inline: auto;                 /* keep visually centered */
    overflow: hidden;                    /* safety */
  }
    .page-hero { aspect-ratio: 16 / 8; }  /* taller crop on very small screens */
  .page-hero::after { display: none; } 
}
  @media (max-width: 451px) {
      .hero__title { display: none; }
}



@media (max-width: 360px) {
  .theme-toggle {
    display: none !important;
  }

  .hero {
    height: clamp(32vh, 48vw, 46vh);
    min-height: 200px;
  }
}



html, body { overflow-x: hidden; }

/* 2) Full-bleed background that currently causes overflow */
.section--duo .content-split > :nth-child(2)::before {
  /* center the 100vw pseudo against the viewport, not the container */
  left: 50%;
  width: 100vw;
  right: auto;
  transform: translateX(-50%);
}