/* ===========================================
   BMO Stadium · Venue Page | Angel City FC
   HubSpot self-contained landing page
   /visit/bmo-stadium

   Design system carried over from 2027Renewals:
   Inter only, Sol Rosa accent, signature/dreamy/frost
   section layers. Single light theme, no toggle.
   =========================================== */

:root {
  --sol-rosa: #f1b1a5;
  --sol-rosa-dark: #e0a094;
  --sol-rosa-soft: rgba(241, 177, 165, 0.18);
  --sol-rosa-glow: rgba(241, 177, 165, 0.30);

  /* Palette is Sol Rosa, white and black only. Sol Rosa is a light tint,
     so on this page's light surfaces it carries fills, rules, dots and
     swatches while text stays black; on dark bands the text goes rosa. */

  --bmo-dark: #111111;

  --bmo-surface: #fafaf8;
  --bmo-surface-warm: #f6f4f1;
  --bmo-panel: #ffffff;
  --bmo-panel-edge: #e8e6e3;

  --bmo-cream: #f7f1e8;
  --bmo-paper: #fbf7f0;
  --bmo-paper-edge: #e6ddce;

  --bmo-ink: #121416;
  --asphalt: #1c1c1c;
  --armour: #6b7280;
  --line-white: #ffffff;
  --pitch-black: #000000;
  --text-dark: #1c1c1c;

  /* Elevation scale: e1 resting hairline, e2 cards, e3 hero surfaces */
  --shadow-e1: 0 1px 2px rgba(28, 20, 16, 0.05), 0 1px 3px rgba(28, 20, 16, 0.04);
  --shadow-e2: 0 8px 28px rgba(28, 20, 16, 0.10), 0 2px 6px rgba(28, 20, 16, 0.05);
  --shadow-e3: 0 22px 60px rgba(28, 20, 16, 0.18), 0 4px 12px rgba(28, 20, 16, 0.07);
  --shadow-e3-rosa: 0 22px 60px rgba(28, 20, 16, 0.18), 0 0 0 1px rgba(241, 177, 165, 0.28);

  --shadow-sm: var(--shadow-e1);
  --shadow-card: var(--shadow-e2);
  --shadow-card-hover: var(--shadow-e3-rosa);

  /* Shared hover motion so every premium surface lifts identically */
  --lift-hover: 0 -3px;
  --lift-transition: translate 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s ease;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --transition: all 0.3s var(--ease-out);
  --bmo-scroll-offset: 60px;

  /* Seat map area colors */
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--bmo-scroll-offset);
}

html:has(.acfc-bmo-app) { overflow-x: hidden; }

/* HubSpot SR offer bar (sr-offer-bar-01): omit on this landing page only */
html:has(.acfc-bmo-app) .sr-offer-bar-01 { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .acfc-bmo-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  color: var(--text-dark);
  background: var(--bmo-surface);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* ---------- Scroll reveal ---------- */

.acfc-bmo-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}

.acfc-bmo-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delays listed per transitioned property so a staggered card still reacts to
   hover instantly. Extra values are ignored on opacity/transform-only elements. */
.acfc-bmo-reveal-stagger > .acfc-bmo-reveal:nth-child(2) { transition-delay: 0.08s, 0.08s, 0s, 0s, 0s; }
.acfc-bmo-reveal-stagger > .acfc-bmo-reveal:nth-child(3) { transition-delay: 0.16s, 0.16s, 0s, 0s, 0s; }
.acfc-bmo-reveal-stagger > .acfc-bmo-reveal:nth-child(4) { transition-delay: 0.24s, 0.24s, 0s, 0s, 0s; }
.acfc-bmo-reveal-stagger > .acfc-bmo-reveal:nth-child(5) { transition-delay: 0.32s, 0.32s, 0s, 0s, 0s; }
.acfc-bmo-reveal-stagger > .acfc-bmo-reveal:nth-child(6) { transition-delay: 0.40s, 0.40s, 0s, 0s, 0s; }

/* ---------- App wrapper ---------- */

.acfc-bmo-app {
  width: 100%;
  max-width: 100%;
  background: var(--bmo-surface);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.acfc-bmo-app a,
.acfc-bmo-app button,
.acfc-bmo-app [role="button"] { cursor: pointer; }

/* ---------- Container ---------- */

.angelcity2026-container {
  max-width: 1340px;
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}

@media (max-width: 600px) {
  .angelcity2026-container {
    padding-left: max(25px, env(safe-area-inset-left, 0px));
    padding-right: max(25px, env(safe-area-inset-right, 0px));
  }
}

/* ---------- Shared typography ---------- */

.acfc-bmo-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.7rem, 1.6vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--asphalt);
  margin: 0 0 12px;
}

/* Centred section eyebrows get flanking rules so the label reads as a marker
   rather than a stray line of small caps. */
.acfc-bmo-section-head .acfc-bmo-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.acfc-bmo-section-head .acfc-bmo-eyebrow::before,
.acfc-bmo-section-head .acfc-bmo-eyebrow::after {
  content: '';
  width: clamp(18px, 4vw, 34px);
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--sol-rosa);
}

.acfc-bmo-section-head {
  text-align: center;
  margin-bottom: clamp(28px, 4.5vw, 44px);
}

.acfc-bmo-section-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--bmo-ink);
  margin: 0 0 10px;
  text-wrap: balance;
}

.acfc-bmo-section-title em {
  font-style: normal;
  font-weight: 900;
}

.acfc-bmo-section-lead {
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  color: var(--armour);
  margin: 0 auto;
  max-width: 640px;
  line-height: 1.65;
}

/* ============================================
   SIGNATURE SYSTEM
   frosted glass · dreamy blur
   ============================================ */

.acfc-bmo-signature {
  position: relative;
  isolation: isolate;
  /* overflow: clip clips descendants without creating a scroll container,
     so position:sticky children inside still scroll against the viewport. */
  overflow: clip;
}

.acfc-bmo-signature > .angelcity2026-container {
  position: relative;
  z-index: 1;
}

/* Dreamy blurred photo layer - keeps grit, never loses the image */
.acfc-bmo-dreamy {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.acfc-bmo-dreamy img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  filter: blur(8px) saturate(1.15) contrast(1.06);
}

.acfc-bmo-dreamy::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 90% at 16% 0%, rgba(241, 177, 165, 0.32) 0%, transparent 52%),
    linear-gradient(180deg, rgba(251, 247, 240, 0.66) 0%, rgba(247, 241, 232, 0.78) 52%, var(--bmo-cream) 100%);
}

/* Legibility over dreamy photos - text only, no header panel */
.acfc-bmo-signature .acfc-bmo-section-head .acfc-bmo-eyebrow {
  color: var(--asphalt);
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(255, 255, 255, 0.9);
}

.acfc-bmo-signature .acfc-bmo-section-head .acfc-bmo-section-title {
  color: var(--asphalt);
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(255, 255, 255, 0.9),
    0 2px 8px rgba(247, 241, 232, 0.7);
}

.acfc-bmo-signature .acfc-bmo-section-head .acfc-bmo-section-lead {
  color: rgba(28, 28, 28, 0.88);
  text-shadow:
    0 0 16px rgba(255, 255, 255, 0.8),
    0 1px 3px rgba(255, 255, 255, 0.75);
}

/* A quieter alternative: same section rhythm, no photo, just a tonal wash */
.acfc-bmo-tonal {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 100% at 18% 0%, rgba(241, 177, 165, 0.16) 0%, transparent 55%),
    linear-gradient(180deg, var(--bmo-cream) 0%, #efe8dc 48%, #e3dccf 100%);
}/* Solid fallback where backdrop-filter is unsupported */
/* ---------- Buttons ---------- */

.angelcity2026-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 2px solid transparent;
  outline: none;
  border-radius: var(--radius-full);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  padding: 0.95rem 2rem;
  white-space: nowrap;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}

.angelcity2026-btn-primary {
  background: var(--sol-rosa);
  color: var(--pitch-black);
  border-color: var(--sol-rosa);
}

a.angelcity2026-btn.angelcity2026-btn-primary,
a.angelcity2026-btn.angelcity2026-btn-primary:hover,
a.angelcity2026-btn.angelcity2026-btn-primary:focus-visible {
  color: var(--pitch-black);
}

.angelcity2026-btn-primary:hover,
.angelcity2026-btn-primary:focus-visible {
  background: var(--sol-rosa-dark);
  border-color: var(--sol-rosa-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--sol-rosa-glow);
}

/* Secondary on light surfaces */
.angelcity2026-btn-secondary {
  background: transparent;
  color: var(--asphalt);
  border-color: rgba(28, 28, 28, 0.35);
}

a.angelcity2026-btn.angelcity2026-btn-secondary,
a.angelcity2026-btn.angelcity2026-btn-secondary:hover,
a.angelcity2026-btn.angelcity2026-btn-secondary:focus-visible {
  color: var(--asphalt);
}

.angelcity2026-btn-secondary:hover,
.angelcity2026-btn-secondary:focus-visible {
  border-color: var(--asphalt);
  background: rgba(28, 28, 28, 0.05);
}

/* The hero and CTA band sit on dark photography, so their secondary buttons
   keep the light-on-dark treatment. */
.acfc-bmo-hero-actions .angelcity2026-btn-secondary,
.acfc-bmo-hero-actions a.angelcity2026-btn.angelcity2026-btn-secondary,
.acfc-bmo-cta-band .angelcity2026-btn-secondary,
.acfc-bmo-cta-band a.angelcity2026-btn.angelcity2026-btn-secondary {
  color: var(--line-white);
  border-color: rgba(255, 255, 255, 0.45);
}

.acfc-bmo-hero-actions .angelcity2026-btn-secondary:hover,
.acfc-bmo-hero-actions .angelcity2026-btn-secondary:focus-visible,
.acfc-bmo-hero-actions a.angelcity2026-btn.angelcity2026-btn-secondary:hover,
.acfc-bmo-hero-actions a.angelcity2026-btn.angelcity2026-btn-secondary:focus-visible,
.acfc-bmo-cta-band .angelcity2026-btn-secondary:hover,
.acfc-bmo-cta-band .angelcity2026-btn-secondary:focus-visible,
.acfc-bmo-cta-band a.angelcity2026-btn.angelcity2026-btn-secondary:hover,
.acfc-bmo-cta-band a.angelcity2026-btn.angelcity2026-btn-secondary:focus-visible {
  border-color: var(--line-white);
  background: rgba(255, 255, 255, 0.08);
}

.angelcity2026-btn-outline-dark {
  background: transparent;
  color: var(--asphalt);
  border-color: var(--bmo-panel-edge);
}

a.angelcity2026-btn.angelcity2026-btn-outline-dark,
a.angelcity2026-btn.angelcity2026-btn-outline-dark:hover,
a.angelcity2026-btn.angelcity2026-btn-outline-dark:focus-visible {
  color: var(--asphalt);
}

.angelcity2026-btn-outline-dark:hover {
  border-color: var(--sol-rosa);
  background: var(--sol-rosa-soft);
}

.angelcity2026-btn-sm {
  font-size: 0.82rem;
  padding: 0.7rem 1.4rem;
}

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

/* HubSpot's theme stylesheet underlines every anchor and loads after this file,
   so buttons need the rule restated at anchor-plus-class specificity in every
   interaction state. */
a.angelcity2026-btn,
a.angelcity2026-btn:link,
a.angelcity2026-btn:visited,
a.angelcity2026-btn:hover,
a.angelcity2026-btn:active,
a.angelcity2026-btn:focus,
a.angelcity2026-btn:focus-visible,
.angelcity2026-btn,
.angelcity2026-btn:hover,
.angelcity2026-btn:focus {
  text-decoration: none;
}

/* ---------- Hero ---------- */

/* Shorter than the 2027Renewals hero: the source photo is a 16:9 aerial, and
   a taller frame would crop out both the bowl and the skyline behind it. */
.acfc-bmo-hero {
  position: relative;
  min-height: clamp(440px, 62svh, 620px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bmo-dark);
}

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

.acfc-bmo-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*object-position: center 40%;*/
  filter: saturate(1.06) contrast(1.04);
  animation: acfc-bmo-hero-settle 2.6s var(--ease-out) both;
}

@keyframes acfc-bmo-hero-settle {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}

/* The aerial is bright at the top (dusk sky) and busy at the bottom (lots),
   so the copy sits bottom-left over a heavier bottom-to-top scrim than the
   left-weighted pocket used on the renewals hero. */
.acfc-bmo-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.42) 40%, rgba(0, 0, 0, 0.08) 70%, transparent 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.54) 26%, rgba(0, 0, 0, 0.16) 55%, transparent 82%),
    radial-gradient(120% 100% at 0% 100%, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.28) 45%, transparent 75%),
    radial-gradient(145% 125% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.38) 100%);
}

/* Padding is symmetric so the content block sits on the true vertical centre
   of the hero rather than being nudged down by a heavier top inset. */
.acfc-bmo-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(40px, 5vw, 60px) 0;
}

/* Both lines share one type size and weight; only colour separates them. */
.acfc-bmo-hero-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
  color: var(--line-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.40);
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  max-width: 22ch;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38), 0 10px 34px rgba(0, 0, 0, 0.45);
}

.acfc-bmo-hero-title-line { display: block; }

.acfc-bmo-hero-title em {
  display: block;
  font-style: normal;
  font-size: 1em;
  font-weight: 800;
  letter-spacing: inherit;
  line-height: inherit;
  color: var(--sol-rosa);
}

.acfc-bmo-hero-address {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(0.85rem, 1.6vw, 0.98rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 10px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

.acfc-bmo-hero-address svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--sol-rosa);
}

.acfc-bmo-hero-body {
  font-size: clamp(0.9rem, 1.5vw, 1.02rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 52ch;
  margin: 0 0 clamp(24px, 3vw, 32px);
  line-height: 1.55;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.acfc-bmo-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.acfc-bmo-hero-actions .angelcity2026-btn { border-width: 1.5px; }
.acfc-bmo-hero-actions .angelcity2026-btn-primary { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34); }

.acfc-bmo-hero-actions .angelcity2026-btn-secondary {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Cascade the hero in rather than landing every element at once. */
.acfc-bmo-hero-title { transition-delay: 0.06s, 0.06s; }
.acfc-bmo-hero-body { transition-delay: 0.15s, 0.15s; }
.acfc-bmo-hero-actions { transition-delay: 0.24s, 0.24s; }

@media (max-width: 768px) {
  .acfc-bmo-hero { min-height: clamp(400px, 76svh, 540px); }

  .acfc-bmo-hero-overlay {
    background:
      linear-gradient(to top, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.35) 100%),
      radial-gradient(140% 110% at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.5) 100%);
  }

  .acfc-bmo-hero-content .angelcity2026-container { text-align: center; }

  .acfc-bmo-hero-title,
  .acfc-bmo-hero-body { margin-inline: auto; }

  .acfc-bmo-hero-address { justify-content: center; }
  .acfc-bmo-hero-actions { justify-content: center; }
}

@media (max-width: 480px) {
  .acfc-bmo-hero-img { object-position: center 45%; }

  .acfc-bmo-hero-actions .angelcity2026-btn {
    width: 100%;
    max-width: 320px;
  }
}

/* ---------- Jump nav ---------- */

.acfc-bmo-jump {
  background: rgba(251, 247, 240, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--bmo-paper-edge);
  position: sticky;
  top: 0;
  z-index: 50;
}

.acfc-bmo-jump-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 10px 0;
}

.acfc-bmo-jump-inner::-webkit-scrollbar { display: none; }

.acfc-bmo-jump-label {
  font-size: 0.62rem;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(28, 28, 28, 0.5);
  white-space: nowrap;
  padding-right: 12px;
  margin-right: 4px;
  border-right: 1px solid var(--bmo-paper-edge);
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 4px;
}

.acfc-bmo-jump-crumb {
  color: rgba(28, 28, 28, 0.5);
  text-decoration: none;
  transition: color 0.15s ease;
}

.acfc-bmo-jump-crumb:hover {
  color: rgba(28, 28, 28, 0.85);
}

.acfc-bmo-jump-crumb--current {
  color: rgba(28, 28, 28, 0.85);
  font-weight: 800;
}

.acfc-bmo-jump-crumb-sep {
  color: rgba(28, 28, 28, 0.3);
}

@media (max-width: 640px) {
  .acfc-bmo-jump-label { display: none; }
}

/* line-height is pinned to a whole pixel that leaves even leading around the
   14px text box (16 - 14 = 2). Fractional leading gets floored, which pushed
   the all-caps label a pixel above the centre of the pill. */
.acfc-bmo-jump-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  line-height: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--armour);
  padding: 0 13px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  background: rgba(28, 28, 28, 0.045);
  white-space: nowrap;
  transition: var(--transition);
}

.acfc-bmo-jump-link:hover,
.acfc-bmo-jump-link:focus-visible {
  color: var(--pitch-black);
  background: var(--sol-rosa);
  border-color: var(--sol-rosa);
}

/* ---------- Section rhythm ---------- */

.acfc-bmo-section { padding: clamp(3.5rem, 7vw, 5.75rem) 0; }

.acfc-bmo-section--paper { background: var(--bmo-paper); }
.acfc-bmo-section--panel { background: var(--bmo-panel); }

/* Hairlines between two sections of the same tone keep the rhythm readable
   without inventing another background colour. */
.acfc-bmo-section--panel + .acfc-bmo-section--panel,
.acfc-bmo-section--paper + .acfc-bmo-section--paper {
  border-top: 1px solid var(--bmo-panel-edge);
}

/* ---------- About + fact strip ---------- */

.acfc-bmo-about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

.acfc-bmo-about-copy p {
  margin: 0 0 1rem;
  font-size: clamp(0.98rem, 1.7vw, 1.06rem);
  line-height: 1.75;
  color: rgba(28, 28, 28, 0.82);
}

.acfc-bmo-about-copy p:last-child { margin-bottom: 0; }

.acfc-bmo-about-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-e3);
}

.acfc-bmo-about-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.acfc-bmo-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

.acfc-bmo-fact {
  padding: 1.35rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--bmo-panel-edge);
  background: var(--bmo-panel);
  box-shadow: var(--shadow-e1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.65s var(--ease-out),
    transform 0.65s var(--ease-out),
    var(--lift-transition);
}

.acfc-bmo-fact:hover {
  translate: var(--lift-hover);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(241, 177, 165, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .acfc-bmo-fact:hover { translate: none; }
}

.acfc-bmo-fact-value {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--asphalt);
  margin: 0 0 6px;
}

.acfc-bmo-fact-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--armour);
  margin: 0;
}

.acfc-bmo-notes {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.65rem 1.5rem;
}

.acfc-bmo-notes li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(28, 28, 28, 0.78);
}

.acfc-bmo-notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--sol-rosa);
}

@media (max-width: 900px) {
  .acfc-bmo-about-layout { grid-template-columns: 1fr; }
}

/* ---------- Getting here ---------- */

.acfc-bmo-travel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-items: start;
}

.acfc-bmo-travel-blocks {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.acfc-bmo-travel-card { padding: clamp(1.35rem, 2.5vw, 1.85rem); }

.acfc-bmo-travel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.85rem;
}

.acfc-bmo-travel-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--asphalt);
  margin: 0 0 0.65rem;
}

.acfc-bmo-presented {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.acfc-bmo-presented-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--armour);
}

.acfc-bmo-presented img {
  height: 24px;
  width: auto;
}

.acfc-bmo-presented img.acfc-bmo-logo-metro { height: 34px; }

.acfc-bmo-travel-card p {
  margin: 0 0 1rem;
  font-size: 0.97rem;
  line-height: 1.7;
  color: rgba(28, 28, 28, 0.8);
}

.acfc-bmo-travel-list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.acfc-bmo-travel-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.93rem;
  line-height: 1.6;
  color: rgba(28, 28, 28, 0.78);
}

.acfc-bmo-travel-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sol-rosa);
}

.acfc-bmo-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.acfc-bmo-map-col {
  position: sticky;
  top: calc(var(--bmo-scroll-offset) + 3.5rem);
  align-self: start;
}

.acfc-bmo-map-card { padding: 1rem; }

/* Map card should not lift or turn pink on hover — the trigger button
   handles its own interaction state. */
.acfc-bmo-map-card:hover {
  translate: none;
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow-e3);
}

.acfc-bmo-map-figure { margin: 0; position: relative; }

.acfc-bmo-map-figure img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid rgba(28, 28, 28, 0.08);
  display: block;
  transition: filter 0.2s ease;
}

.acfc-bmo-map-trigger:hover .acfc-bmo-map-figure img {
  filter: brightness(0.7);
}

.acfc-bmo-map-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--armour);
  text-align: center;
}

@media (max-width: 960px) {
  .acfc-bmo-travel-layout { grid-template-columns: 1fr; }

  .acfc-bmo-map-col {
    position: relative;
    top: auto;
  }
}

/* ---------- Seat map ----------
   Ported 1:1 from hubspot/2027Deposits (acfc-dep-* renamed to acfc-bmo-*,
   dep tokens mapped onto this page's equivalents). Zone geometry is
   generated by 2027Deposits/tools/build_zones.py - regenerate there and
   re-copy rather than hand-editing the paths. */

/* ---------- Stadium seat map ----------
   Hotspot paths are traced from the chart image, so they sit in the same
   525x520 space as the <img> underneath and scale with it. */

.acfc-bmo-seatmap {
  background: var(--bmo-surface-warm);
  padding: clamp(40px, 5.5vw, 68px) 0;
}

.acfc-bmo-seatmap .acfc-bmo-eyebrow {
  color: var(--bmo-ink);
}

/* Legend / tier highlight */

.acfc-bmo-seatmap-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: clamp(20px, 3vw, 30px);
}

.acfc-bmo-seatmap-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bmo-ink);
  background: var(--bmo-panel);
  border: 1px solid var(--bmo-panel-edge);
  border-radius: var(--radius-full);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.acfc-bmo-seatmap-legend-item:hover,
.acfc-bmo-seatmap-legend-item:focus-visible {
  border-color: var(--sol-rosa);
  box-shadow: 0 0 0 3px var(--sol-rosa-soft);
  transform: translateY(-1px);
}

.acfc-bmo-seatmap-legend-item[aria-pressed="true"] {
  border-color: var(--sol-rosa);
  background: var(--sol-rosa-soft);
}

.acfc-bmo-seatmap-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.18);
}

.acfc-bmo-seatmap-legend-item[data-acfc-bmo-tier="supporters"] .acfc-bmo-seatmap-swatch { background: #2f7d4f; }

.acfc-bmo-seatmap-legend-item[data-acfc-bmo-tier="general"]    .acfc-bmo-seatmap-swatch { background: #2f6fb0; }

.acfc-bmo-seatmap-legend-item[data-acfc-bmo-tier="premium"]    .acfc-bmo-seatmap-swatch { background: #8b4bab; }

.acfc-bmo-seatmap-legend-item[data-acfc-bmo-tier="suites"]     .acfc-bmo-seatmap-swatch { background: #c08a2e; }

/* Layout */

.acfc-bmo-seatmap-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(16px, 2.5vw, 32px);
  align-items: start;
}

.acfc-bmo-seatmap-stage-wrap {
  min-width: 0;
}

.acfc-bmo-seatmap-stage {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  aspect-ratio: 525 / 520;
  background: var(--bmo-panel);
  border: 1px solid var(--bmo-panel-edge);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.acfc-bmo-seatmap-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.acfc-bmo-seatmap-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* only the zone paths are interactive, so the gaps between them stay inert */
  pointer-events: none;
}

/* Zones */

.acfc-bmo-seatmap-zone {
  pointer-events: all;
  cursor: pointer;
  fill: transparent;
  stroke: transparent;
  /* a hairline stroke gives the thin loge and bench strips a usable target */
  stroke-width: 2.5;
  stroke-linejoin: round;
  transition: fill 0.22s ease, stroke 0.22s ease, opacity 0.22s ease;
}

.acfc-bmo-seatmap-zone--supporters { --zone-tint: 47, 125, 79; }

.acfc-bmo-seatmap-zone--general    { --zone-tint: 47, 111, 176; }

.acfc-bmo-seatmap-zone--premium    { --zone-tint: 139, 75, 171; }

.acfc-bmo-seatmap-zone--suites     { --zone-tint: 192, 138, 46; }

.acfc-bmo-seatmap-zone:hover,
.acfc-bmo-seatmap-zone:focus-visible,
.acfc-bmo-seatmap-zone.is-active {
  fill: rgba(var(--zone-tint), 0.62);
  stroke: #ffffff;
  outline: none;
}

.acfc-bmo-seatmap-zone.is-active {
  fill: rgba(var(--zone-tint), 0.72);
}

/* Whole-map response: everything that is not the focus of attention recedes,
   so the highlighted area reads instantly instead of competing with the chart.
   The scrim and spotlight live inside the SVG so paint order is explicit. */
.acfc-bmo-seatmap-scrim {
  pointer-events: none;
  fill: #fafaf8;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.acfc-bmo-seatmap-stage.is-engaged .acfc-bmo-seatmap-scrim {
  opacity: 0.66;
}

.acfc-bmo-seatmap-spotlight {
  pointer-events: none;
  fill: rgba(var(--zone-tint, 107, 114, 128), 0.72);
  stroke: #ffffff;
  stroke-width: 2.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px var(--sol-rosa-glow));
}

.acfc-bmo-seatmap-hint {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--armour);
}

/* Detail panel */

.acfc-bmo-seatmap-panel {
  position: relative;
  min-height: 320px;
  padding: clamp(16px, 2vw, 22px);
  background: var(--bmo-panel);
  border: 1px solid var(--bmo-panel-edge);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* Resting state: a nested card so the panel reads as considered rather than
   empty, using the same rosa pill and hairline rules as the rest of the page. */
.acfc-bmo-seatmap-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 280px;
  padding: clamp(20px, 3vw, 30px) clamp(16px, 3vw, 26px);
  border: 1px solid var(--bmo-panel-edge);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(241, 177, 165, 0.16) 0%, rgba(241, 177, 165, 0) 62%),
    linear-gradient(180deg, var(--bmo-panel) 0%, var(--bmo-surface-warm) 100%);
  color: var(--armour);
}

/* the display rule above would otherwise beat the UA [hidden] default */
.acfc-bmo-seatmap-panel-empty[hidden] {
  display: none;
}

.acfc-bmo-seatmap-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-full);
  background: var(--bmo-panel);
  border: 1px solid rgba(241, 177, 165, 0.55);
  box-shadow: 0 0 0 6px rgba(241, 177, 165, 0.12), var(--shadow-sm);
}

.acfc-bmo-seatmap-panel-icon svg {
  width: 26px;
  height: 26px;
  color: var(--sol-rosa-dark);
}

.acfc-bmo-seatmap-panel-kicker {
  display: inline-flex;
  align-items: center;
  margin: 18px 0 0;
  padding: 5px 12px 4px;
  border-radius: var(--radius-full);
  background: rgba(241, 177, 165, 0.14);
  border: 1px solid rgba(241, 177, 165, 0.40);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--bmo-ink);
}

.acfc-bmo-seatmap-panel-empty .acfc-bmo-seatmap-panel-title {
  margin: 12px 0 8px;
}

.acfc-bmo-seatmap-panel-empty .acfc-bmo-seatmap-panel-desc {
  max-width: 34ch;
}

.acfc-bmo-seatmap-panel-meta {
  width: min(100%, 280px);
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--bmo-panel-edge);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--armour);
}

.acfc-bmo-seatmap-panel-title {
  font-family: 'Anton', 'Impact', sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bmo-ink);
  margin: 0;
}

.acfc-bmo-seatmap-panel-desc,
.acfc-bmo-seatmap-panel-blurb {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--armour);
  margin: 0;
}

.acfc-bmo-seatmap-panel-note {
  display: block;
  margin-top: 8px;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--armour);
}

/* The official section images pair the chart with a 2026 price block on the
   right and a title above. The frame below shows only the chart, because
   deposit pricing is confirmed by a rep rather than published here. Offsets
   are percentages of the frame, so the crop holds at any rendered size.
   Two variants because the artwork ships on two canvas heights. */
.acfc-bmo-seatmap-panel-media {
  --thumb-w: 203.4%;
  --thumb-x: -13.6%;
  --thumb-y: -22.7%;
  position: relative;
  aspect-ratio: 227 / 200;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bmo-surface-warm);
  border: 1px solid var(--bmo-panel-edge);
}

.acfc-bmo-seatmap-panel-media.is-tall-art {
  --thumb-w: 176.5%;
  --thumb-x: 1.25%;
  --thumb-y: -19.2%;
}

.acfc-bmo-seatmap-panel-thumb {
  display: block;
  position: absolute;
  width: var(--thumb-w);
  max-width: none; /* overrides the global img rule, which would undo the crop */
  height: auto;
  left: var(--thumb-x);
  top: var(--thumb-y);
}

/* ── panel body info block ─────────────────────────────────────── */

/* Flex column so the title always reads before the price / badge row */
.acfc-bmo-seatmap-panel-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Title + badge on one line: badge sits just to the right of the last
   letter with a small gap. align-items: center pins the pill to the
   cap-height midpoint of the headline. */
.acfc-bmo-seatmap-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 12px;
}

/* All-caps has no descenders, so a symmetrically padded pill reads top-heavy.
   line-height 1 plus one extra pixel above optically centres the label. */
.acfc-bmo-seatmap-tier-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  /* the right inset also drops the trailing letter-space so the label
     sits centred horizontally as well */
  padding: 6px calc(11px - 0.14em) 4px 11px;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  color: #ffffff;
  background: #6b7280;
}

.acfc-bmo-seatmap-tier-badge[data-tier="supporters"] { background: #2f7d4f; }

.acfc-bmo-seatmap-tier-badge[data-tier="general"]    { background: #2f6fb0; }

.acfc-bmo-seatmap-tier-badge[data-tier="premium"]    { background: #8b4bab; }

.acfc-bmo-seatmap-tier-badge[data-tier="suites"]     { background: #a9761f; }

/* 2026 pricing — hidden; uncomment both blocks to restore.
.acfc-bmo-seatmap-panel-price { margin: 4px 0 10px; } */
.acfc-bmo-seatmap-panel-price {
  display: none;
}

.acfc-bmo-seatmap-panel-price-value {
  display: block;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--armour);
}

.acfc-bmo-seatmap-panel-price-note {
  /*display: block;*/
  display: none;
  margin-top: 3px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--armour);
}

/* Two equal columns at every width. minmax(0, 1fr) keeps the nowrap button
   labels from pushing the tracks wider than the panel. */
.acfc-bmo-seatmap-panel-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.acfc-bmo-seatmap-panel-actions .angelcity2026-btn {
  width: 100%;
  padding-inline: clamp(0.5rem, 2.5vw, 1.25rem);
}

/* "See It In 3D" button: inverted so it reads clearly against the panel
   background and pairs with the rosa primary button without competing. */
.acfc-bmo-seatmap-panel-actions #acfcBmoSeatmap3d {
  background: var(--asphalt);
  color: var(--line-white);
  border-color: var(--asphalt);
}

.acfc-bmo-seatmap-panel-actions #acfcBmoSeatmap3d:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: var(--line-white);
}

.acfc-bmo-seatmap-panel-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--bmo-ink);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--bmo-panel-edge);
  border-radius: var(--radius-full);
  transition: border-color 0.25s ease, color 0.25s ease;
}

.acfc-bmo-seatmap-panel-close svg {
  width: 15px;
  height: 15px;
}

.acfc-bmo-seatmap-panel-close:hover,
.acfc-bmo-seatmap-panel-close:focus-visible {
  border-color: var(--sol-rosa);
  color: var(--sol-rosa-dark);
}

/* Zone list */

.acfc-bmo-seatmap-list-wrap {
  margin-top: clamp(24px, 3.5vw, 38px);
}

.acfc-bmo-seatmap-list-heading {
  font-family: 'Anton', 'Impact', sans-serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bmo-ink);
  margin: 0 0 14px;
}

.acfc-bmo-seatmap-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

.acfc-bmo-seatmap-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  text-align: left;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bmo-ink);
  background: var(--bmo-panel);
  border: 1px solid var(--bmo-panel-edge);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.acfc-bmo-seatmap-list-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.acfc-bmo-seatmap-list-name {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
}

/* .acfc-bmo-seatmap-list-price — hidden; uncomment to restore.
.acfc-bmo-seatmap-list-price {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--armour);
  line-height: 1.2;
} */
.acfc-bmo-seatmap-list-price {
  display: none;
}

.acfc-bmo-seatmap-list-item::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: rgb(var(--zone-tint, 107, 114, 128));
}

.acfc-bmo-seatmap-list-item[data-tier="supporters"] { --zone-tint: 47, 125, 79; }

.acfc-bmo-seatmap-list-item[data-tier="general"]    { --zone-tint: 47, 111, 176; }

.acfc-bmo-seatmap-list-item[data-tier="premium"]    { --zone-tint: 139, 75, 171; }

.acfc-bmo-seatmap-list-item[data-tier="suites"]     { --zone-tint: 192, 138, 46; }

.acfc-bmo-seatmap-list-item:hover,
.acfc-bmo-seatmap-list-item:focus-visible,
.acfc-bmo-seatmap-list-item.is-active {
  border-color: var(--sol-rosa);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  outline: none;
}

.acfc-bmo-seatmap-list-item.is-dimmed {
  opacity: 0.4;
}

/* Tier filter: zones outside the chosen tier step back on the map */
.acfc-bmo-seatmap-zone.is-dimmed {
  opacity: 0.25;
}

@media (max-width: 960px) {
  .acfc-bmo-seatmap-layout {
      grid-template-columns: minmax(0, 1fr);
    }

  .acfc-bmo-seatmap-panel {
      min-height: 0;
    }

  .acfc-bmo-seatmap-panel-empty {
      min-height: 0;
      padding: 24px 20px;
    }
}

/* ── Mobile: hide the SVG map entirely ─────────────────────────────────────
   The map needs enough width to read individual zone labels. Below 680px it
   shrinks past the point of usefulness, so we remove it and let the list +
   panel carry all the interaction. JS auto-selects Standing Supporters so
   the panel is never in an empty state when the map can't be seen. */
@media (max-width: 680px) {
  .acfc-bmo-seatmap-stage-wrap {
      display: none;
    }

  /* Without the map the layout column is already 1fr (960px rule above),
     so the panel now stretches full-width — give it a bit more breathing
     room by removing the aside min-height floor. */
    .acfc-bmo-seatmap-panel {
      min-height: 0;
    }

  /* Centre the zone identity block — title + badge row, then price below */
    .acfc-bmo-seatmap-panel-title-row {
      justify-content: center;
    }

  .acfc-bmo-seatmap-panel-title {
      text-align: center;
    }
}

@media (max-width: 560px) {
  .acfc-bmo-seatmap-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

  .acfc-bmo-seatmap-list-item {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
    }

  /* hide the colour dot on mobile — centering makes it look orphaned */
    .acfc-bmo-seatmap-list-item::before {
      display: none;
    }

  .acfc-bmo-seatmap-panel-actions .angelcity2026-btn {
      justify-content: center;
      font-size: 0.78rem;
    }
}

@media (prefers-reduced-motion: reduce) {
  .acfc-bmo-seatmap-list-item:hover,
    .acfc-bmo-seatmap-list-item.is-active,
    .acfc-bmo-seatmap-legend-item:hover {
      transform: none;
    }
}

.acfc-bmo-seatmap-note {
  margin: 2rem auto 0;
  max-width: 44rem;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(28, 28, 28, 0.62);
}

/* ---------- Info card grids (gates, bags, access, amenities) ---------- */

.acfc-bmo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.acfc-bmo-card {
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--bmo-panel-edge);
  background: var(--bmo-panel);
  box-shadow: var(--shadow-e1);
  transition:
    opacity 0.65s var(--ease-out),
    transform 0.65s var(--ease-out),
    var(--lift-transition);
}

.acfc-bmo-card:hover {
  translate: var(--lift-hover);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(241, 177, 165, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .acfc-bmo-card:hover { translate: none; }
}

/* Frosted variant for cards sitting on a dreamy photo section */
.acfc-bmo-card--frost {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow-e3);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
}

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .acfc-bmo-card--frost { background: rgba(255, 255, 255, 0.93); }
}

.acfc-bmo-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.acfc-bmo-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--sol-rosa-soft);
  color: var(--asphalt);
}

.acfc-bmo-card-icon svg {
  width: 22px;
  height: 22px;
}

.acfc-bmo-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--asphalt);
  margin: 0;
}

/* A title without an icon still needs the row's bottom spacing. */
.acfc-bmo-card > .acfc-bmo-card-title {
  margin-bottom: 0.6rem;
}

.acfc-bmo-card p {
  margin: 0 0 0.75rem;
  font-size: 0.94rem;
  line-height: 1.65;
  color: rgba(28, 28, 28, 0.78);
}

.acfc-bmo-card p:last-child { margin-bottom: 0; }

.acfc-bmo-card ul {
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.acfc-bmo-card ul:last-child { margin-bottom: 0; }

.acfc-bmo-card li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(28, 28, 28, 0.78);
}

.acfc-bmo-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sol-rosa);
}

/* No underline per the CTA treatment; a rule drawn under the text on hover
   keeps the affordance without the default underline. */
.acfc-bmo-card a {
  color: var(--asphalt);
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
}

.acfc-bmo-card a:hover,
.acfc-bmo-card a:focus-visible {
  color: var(--asphalt);
  background: var(--sol-rosa-soft);
  box-shadow: inset 0 -2px 0 0 var(--sol-rosa);
}

/* Highlight callout inside a card (clear bag spec, gate times) */
.acfc-bmo-callout {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(241, 177, 165, 0.5);
  background: var(--sol-rosa-soft);
}

.acfc-bmo-callout-label {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--asphalt);
  margin-bottom: 4px;
}

.acfc-bmo-callout strong {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--asphalt);
}

/* Clear bag policy: three true columns. The prohibited-items card is far taller
   than the other two, so cards align to the top of the row instead of
   stretching, and the inner list stays single-column at this width. */
.acfc-bmo-bags-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}

.acfc-bmo-bags-grid .acfc-bmo-columns {
  columns: 1;
}

/* Two across: the list card spans the full row, so it can go back to two
   internal columns. */
@media (max-width: 1080px) {
  .acfc-bmo-bags-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acfc-bmo-bags-grid > :last-child { grid-column: 1 / -1; }
  .acfc-bmo-bags-grid .acfc-bmo-columns {
    columns: 2;
    column-gap: 2rem;
  }
}

@media (max-width: 700px) {
  .acfc-bmo-bags-grid { grid-template-columns: minmax(0, 1fr); }
  .acfc-bmo-bags-grid > :last-child { grid-column: auto; }
  .acfc-bmo-bags-grid .acfc-bmo-columns { columns: 1; }
}

.acfc-bmo-columns > li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* ---------- FAQ ---------- */

.acfc-bmo-faq { padding: clamp(3.25rem, 6.5vw, 5.25rem) 0; }

.acfc-bmo-faq-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
}

.acfc-bmo-faq-item {
  background: var(--bmo-panel);
  border-radius: var(--radius-lg);
  border: 1px solid var(--bmo-panel-edge);
  box-shadow: var(--shadow-e2);
  transition: box-shadow 0.3s var(--ease-out), border-color 0.3s ease;
  overflow: hidden;
}

.acfc-bmo-faq-item:hover {
  box-shadow: var(--shadow-e3);
  border-color: rgba(241, 177, 165, 0.45);
}

.acfc-bmo-faq-question {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--asphalt);
  text-align: left;
  cursor: pointer;
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
  transition: color 0.3s ease;
}

.acfc-bmo-faq-question:hover { color: var(--pitch-black); }

.acfc-bmo-faq-question:focus-visible {
  outline: 2px solid var(--sol-rosa);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.acfc-bmo-faq-arrow {
  flex-shrink: 0;
  color: var(--sol-rosa);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.acfc-bmo-faq-arrow.acfc-bmo-faq-expanded { transform: rotate(90deg); }

.acfc-bmo-faq-answer {
  margin-top: 0;
  padding: 0 clamp(1.25rem, 3vw, 2rem) 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--armour);
  line-height: 1.75;
  font-size: 1rem;
}

/* HubSpot base styles can override [hidden]; belt-and-braces so a collapsed
   answer never renders before the toggle script runs. */
.acfc-bmo-faq-answer[hidden] { display: none; }

.acfc-bmo-faq-answer p { margin: 0; }

.acfc-bmo-faq-answer a {
  color: var(--asphalt);
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 0 var(--sol-rosa);
  transition: var(--transition);
}

.acfc-bmo-faq-answer a:hover,
.acfc-bmo-faq-answer a:focus-visible {
  color: var(--asphalt);
  background: var(--sol-rosa-soft);
  box-shadow: inset 0 -2px 0 0 var(--sol-rosa);
}

@media (max-width: 480px) {
  .acfc-bmo-faq-question { min-height: 44px; }
}

/* ---------- CTA band ---------- */

.acfc-bmo-cta-band {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0;
  text-align: center;
  color: var(--line-white);
  border-bottom: 1px solid var(--sol-rosa);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)),
    url('https://www.angelcity.com/hubfs/vrpcuafner6g8rx6b0f0.jpg');
  background-size: cover;
  background-position: center;
}

.acfc-bmo-cta-band::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
}

.acfc-bmo-cta-band .acfc-bmo-eyebrow { color: var(--sol-rosa); }

.acfc-bmo-cta-band-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.6rem, 3.9vw, 2.6rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--line-white);
  margin: 0 0 12px;
  line-height: 1.1;
}

/* Same crescendo as the hero title: the accent line steps up in size, weight,
   and tracking rather than only changing color. */
/* Matches the hero: one size for both lines, colour carries the emphasis. */
.acfc-bmo-cta-band-title em {
  display: block;
  font-style: normal;
  color: var(--sol-rosa);
  font-size: 1em;
  font-weight: 800;
  letter-spacing: inherit;
}

.acfc-bmo-cta-band-lead {
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 560px;
  margin: 0 auto 24px;
}

.acfc-bmo-cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.acfc-bmo-cta-contact-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  margin-top: clamp(32px, 5vw, 48px);
}

.acfc-bmo-cta-band a.acfc-bmo-cta-contact-item,
.acfc-bmo-cta-band a.acfc-bmo-cta-contact-item:visited {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--line-white);
  text-decoration: none;
  transition: var(--transition);
}

.acfc-bmo-cta-band a.acfc-bmo-cta-contact-item:hover,
.acfc-bmo-cta-band a.acfc-bmo-cta-contact-item:focus-visible {
  border-color: rgba(241, 177, 165, 0.55);
  background: rgba(255, 255, 255, 0.11);
}

.acfc-bmo-cta-contact-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acfc-bmo-cta-contact-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  color: var(--sol-rosa);
}

.acfc-bmo-cta-contact-icon svg {
  width: 22px;
  height: 22px;
}

.acfc-bmo-cta-contact-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.acfc-bmo-cta-contact-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.acfc-bmo-cta-contact-value {
  font-size: 0.92rem;
  font-weight: 700;
}

@media (max-width: 480px) {
  .acfc-bmo-cta-band-actions .angelcity2026-btn {
    width: 100%;
    max-width: 320px;
  }

  .acfc-bmo-cta-contact-grid { flex-direction: column; }

  .acfc-bmo-cta-band a.acfc-bmo-cta-contact-item { width: 100%; }
}

/* ---------- Map trigger button ---------- */

.acfc-bmo-map-trigger {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: zoom-in;
  text-align: left;
}

.acfc-bmo-map-trigger:focus-visible {
  outline: 2px solid var(--sol-rosa);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

/* Zoom hint: lives in the flow between the image and the caption.
   Fades in on hover, always visible on touch. */
.acfc-bmo-map-zoom-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 14px;
  width: fit-content;
  white-space: nowrap;
  background: rgba(28, 28, 28, 0.62);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.acfc-bmo-map-trigger:hover .acfc-bmo-map-zoom-hint {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .acfc-bmo-map-zoom-hint { transition: none; }
}

/* Always show hint on touch devices where hover doesn't exist */
@media (hover: none) {
  .acfc-bmo-map-zoom-hint { opacity: 1; }
}

/* ---------- Map modal ---------- */

.acfc-bmo-map-modal {
  /* Center in viewport – margin:auto works on positioned dialogs */
  margin: auto;
  padding: 0;
  border: none;
  border-radius: var(--radius-xl, 20px);
  background: transparent;
  /* Prevent the modal from being taller than the viewport */
  max-width: min(92vw, 960px);
  max-height: min(90dvh, 860px);
  width: 100%;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
}

.acfc-bmo-map-modal::backdrop {
  background: rgba(10, 8, 8, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.acfc-bmo-map-modal-inner {
  position: relative;
  background: var(--bmo-panel, #fff);
  border-radius: inherit;
  padding: 1.25rem;
  overflow: hidden;
}

.acfc-bmo-map-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(28, 28, 28, 0.08);
  color: var(--asphalt);
  cursor: pointer;
  transition: background 0.15s ease;
}

.acfc-bmo-map-modal-close:hover {
  background: rgba(28, 28, 28, 0.16);
}

.acfc-bmo-map-modal-close:focus-visible {
  outline: 2px solid var(--sol-rosa);
  outline-offset: 2px;
}

.acfc-bmo-map-modal-figure {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.acfc-bmo-map-modal-figure img {
  width: 100%;
  /* Keep the image inside the modal — subtract inner padding + caption space */
  max-height: calc(min(90dvh, 860px) - 5rem);
  height: auto;
  object-fit: contain;
  display: block;
}

.acfc-bmo-map-modal-figure figcaption {
  margin-top: 0.65rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(28, 28, 28, 0.58);
  text-align: center;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS IMPROVEMENTS
   ========================================================================== */

/* ---- Facts grid: 2-column on small phones ---- */
@media (max-width: 600px) {
  .acfc-bmo-facts {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
  }
  .acfc-bmo-fact {
    padding: 1rem 0.85rem;
  }
  .acfc-bmo-fact-value {
    font-size: clamp(1.25rem, 6vw, 1.6rem);
  }
}

/* ---- Card head: shrink icon + title on narrow screens ---- */
@media (max-width: 480px) {
  .acfc-bmo-card-head {
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }
  .acfc-bmo-card-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  .acfc-bmo-card-icon svg {
    width: 17px;
    height: 17px;
  }
  .acfc-bmo-card-title {
    font-size: 0.9rem;
  }
}

/* ---- Section headings: tighten min sizes on phones ---- */
@media (max-width: 480px) {
  .acfc-bmo-section-title {
    font-size: clamp(1.35rem, 7vw, 2.5rem);
  }
  .acfc-bmo-cta-band-title {
    font-size: clamp(1.35rem, 7.5vw, 2.6rem);
  }
  .acfc-bmo-section-lead {
    font-size: 0.92rem;
  }
}

/* ---- About layout: collapse at tablet, not just 900px ---- */
@media (max-width: 768px) {
  .acfc-bmo-about-layout {
    grid-template-columns: 1fr;
  }
  /* Keep the media image a reasonable height when stacked */
  .acfc-bmo-about-media img {
    aspect-ratio: 16 / 9;
    max-height: 320px;
  }
}

/* ---- Getting Here cards: tighten padding on phones ---- */
@media (max-width: 480px) {
  .acfc-bmo-travel-card {
    padding: 1.1rem 1rem;
  }
  .acfc-bmo-travel-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

}

/* ---- Bag policy grid: force single column below 500px ---- */
@media (max-width: 500px) {
  .acfc-bmo-bags-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- CTA group buttons: stack on narrow phones ---- */
@media (max-width: 400px) {
  .acfc-bmo-cta-group {
    flex-direction: column;
    align-items: flex-start;
  }
  .acfc-bmo-cta-group .angelcity2026-btn {
    width: 100%;
  }
}

/* ---- Jump nav: scale down label and pills on phones ---- */
@media (max-width: 480px) {
  .acfc-bmo-jump-link {
    font-size: 0.65rem;
    padding: 0 10px;
    min-height: 28px;
  }
}

/* ---- Section padding: tighten on phones ---- */
@media (max-width: 480px) {
  .acfc-bmo-section {
    padding: clamp(2.5rem, 6vw, 3.5rem) 0;
  }
}