/* custom.css — Anvil Axe Co. design layer
 *
 * Loads after theme.css and site.css. Preserved by sites update-template.
 * Figma: Anvil Axe Co_Home Page (desktop 1920 + mobile 378)
 * Fonts: Oswald (display) + Lato (body)
 * Palette: #0c0a08 dark, #c95a1e primary, #e07b2a accent, #f0eae0 cream, #9a8572 muted
 */

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Oswald:wght@400;500;600;700&display=swap");

/* ── page surface ───────────────────────────────────────────────────── */
html, body {
  background: var(--color-dark) !important;
  color: var(--color-cream);
  font-family: var(--font-body);
  /* Avoid accidental horizontal scroll on mobile from full-bleed media */
  overflow-x: clip;
}

body {
  font-weight: 400;
  line-height: 1.6;
}

/* Safe-area padding for notched phones (header bar already padded; content too) */
@supports (padding: max(0px)) {
  body > header .aa-header-bar,
  body > header > div.aa-header-bar,
  body > header > div {
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }
}

/* ── type ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4,
.aa-display,
.btn-primary,
.btn-outline,
body > header .navlink,
body > header .zk-navgroup-btn {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ── buttons (Anvil primary / secondary CTA motion) ───────────────────
   Primary (.btn-primary): solid brand orange → translucent dark fill on
   hover; thin brand-orange stroke stays put the whole time.
   Secondary (.btn-outline / .aa-btn-outline): reverse — starts as the
   primary hover look, fills solid orange on hover.
   Overrides kit site.css brightness/translate so Anvil owns the motion. */
.btn-primary,
a.btn-primary,
.btn-outline,
a.btn-outline,
.aa-btn-outline {
  --aa-btn-stroke: #c95a1e; /* brand orange — locked frame color */
  --aa-btn-fill-solid: #c95a1e;
  --aa-btn-fill-ghost: rgb(12 10 8 / 0.55);
  --aa-btn-fill-ghost-active: rgb(12 10 8 / 0.72);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* don't clip the stroke / outer ring */
  isolation: isolate;
  border-radius: 0 !important;
  padding: 0.9rem 1.85rem !important;
  font-family: var(--font-display) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
  z-index: 0;
  filter: none !important;
  transform: none !important;
  outline: none !important;
  /* Only fill + type animate; stroke color stays locked */
  transition:
    background-color 650ms cubic-bezier(0.4, 0, 0.2, 1),
    color 650ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 650ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* No sheen / wipe chrome — stroke is the only frame */
.btn-primary::before,
a.btn-primary::before,
.btn-primary::after,
a.btn-primary::after,
.btn-outline::before,
a.btn-outline::before,
.aa-btn-outline::before,
.btn-outline::after,
a.btn-outline::after,
.aa-btn-outline::after {
  content: none !important;
  display: none !important;
}

/* ── Primary: solid orange → translucent dark ───────────────────────── */
.btn-primary,
a.btn-primary {
  background: var(--aa-btn-fill-solid) !important;
  color: var(--color-cream) !important;
  border: 1px solid var(--aa-btn-stroke) !important;
  box-shadow:
    0 0 0 1px var(--aa-btn-stroke),
    0 8px 24px rgb(0 0 0 / 0.35) !important;
}
.btn-primary:hover,
a.btn-primary:hover,
.btn-primary:focus-visible,
a.btn-primary:focus-visible {
  background: var(--aa-btn-fill-ghost) !important;
  color: #ffffff !important;
  border: 1px solid var(--aa-btn-stroke) !important;
  box-shadow:
    0 0 0 1px var(--aa-btn-stroke),
    0 10px 28px rgb(0 0 0 / 0.45) !important;
  transform: none !important;
  letter-spacing: 0.14em !important;
  filter: none !important;
}
.btn-primary:active,
a.btn-primary:active {
  background: var(--aa-btn-fill-ghost-active) !important;
  color: #ffffff !important;
  border: 1px solid var(--aa-btn-stroke) !important;
  transform: none !important;
  box-shadow:
    0 0 0 1px var(--aa-btn-stroke),
    0 4px 14px rgb(0 0 0 / 0.4) !important;
}

/* ── Secondary: reverse of primary (ghost → solid) ──────────────────── */
.btn-outline,
a.btn-outline,
.aa-btn-outline {
  background: var(--aa-btn-fill-ghost) !important;
  color: #ffffff !important;
  border: 1px solid var(--aa-btn-stroke) !important;
  box-shadow:
    0 0 0 1px var(--aa-btn-stroke),
    0 8px 24px rgb(0 0 0 / 0.28) !important;
}
.btn-outline:hover,
a.btn-outline:hover,
.aa-btn-outline:hover,
.btn-outline:focus-visible,
a.btn-outline:focus-visible,
.aa-btn-outline:focus-visible {
  background: var(--aa-btn-fill-solid) !important;
  color: var(--color-cream) !important;
  border: 1px solid var(--aa-btn-stroke) !important;
  box-shadow:
    0 0 0 1px var(--aa-btn-stroke),
    0 10px 28px rgb(0 0 0 / 0.4) !important;
  transform: none !important;
  letter-spacing: 0.14em !important;
  filter: none !important;
}
.btn-outline:active,
a.btn-outline:active,
.aa-btn-outline:active {
  background: #b84f18 !important;
  color: var(--color-cream) !important;
  border: 1px solid var(--aa-btn-stroke) !important;
  transform: none !important;
  box-shadow:
    0 0 0 1px var(--aa-btn-stroke),
    0 4px 14px rgb(0 0 0 / 0.4) !important;
}

/* Edit mode: allow pencil badge to paint outside button corners */
body.zk-editing .btn-primary[data-editable-btn],
body.zk-editing a.btn-primary[data-editable-btn],
body.zk-editing .btn-outline[data-editable-btn],
body.zk-editing a.btn-outline[data-editable-btn],
body.zk-editing .aa-btn-outline[data-editable-btn],
body.zk-editing [data-editable-btn] {
  overflow: visible !important;
}
/* Common section wrappers that also clip badges sticking out of CTAs */
body.zk-editing .aa-hero,
body.zk-editing .aa-hero-inner,
body.zk-editing .aa-cta-row,
body.zk-editing .aa-quote,
body.zk-editing .aa-quote-inner,
body.zk-editing .aa-offers,
body.zk-editing .aa-offers-inner,
body.zk-editing .aa-section-inner {
  overflow: visible;
}
/* Landing must not clip hero edit controls */
body.zk-editing .aa-landing {
  overflow: visible;
}

/* ── Hero edit controls (homepage-visible, clear of fixed header) ───── */
body.zk-editing .aa-hero .zk-hero-btn,
body.zk-editing .aa-ct-hero .zk-hero-btn,
body.zk-editing .aa-vr-hero .zk-hero-btn,
body.zk-editing .aa-ev-hero .zk-hero-btn {
  /* Mid-right of the band so the fixed home header can't cover it */
  top: auto;
  bottom: 5.5rem;
  right: 1rem;
  z-index: 30;
  padding: 0.55rem 1rem;
  font-size: 0.8rem;
  background: rgb(201 90 30 / 0.95);
  border: 1px solid rgb(240 234 224 / 0.85);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.45);
}
body.zk-editing .aa-hero .zk-hero-btn:hover,
body.zk-editing .aa-ct-hero .zk-hero-btn:hover,
body.zk-editing .aa-vr-hero .zk-hero-btn:hover,
body.zk-editing .aa-ev-hero .zk-hero-btn:hover {
  background: rgb(224 123 42 / 0.98);
}
/* On-hero vertical position panel — always visible in edit mode */
.zk-hero-focus {
  display: none;
}
body.zk-editing .zk-hero-focus {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: absolute;
  z-index: 30;
  /* Left side of the window so it doesn't cover the hero CTA/copy */
  left: 1.25rem;
  right: auto;
  bottom: 1.25rem;
  transform: none;
  width: min(20rem, calc(100% - 2.5rem));
  padding: 0.7rem 0.9rem 0.75rem;
  border-radius: 0.5rem;
  background: rgb(12 10 8 / 0.88);
  border: 1px solid rgb(201 90 30 / 0.55);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
  backdrop-filter: blur(8px);
  color: #f0eae0;
  pointer-events: auto;
}
.zk-hero-focus-title {
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary, #c95a1e);
}
.zk-hero-focus-lbl {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  color: rgb(240 234 224 / 0.8);
  margin: 0;
}
.zk-hero-focus-range {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--color-primary, #c95a1e);
  cursor: pointer;
}
.zk-hero-focus-val {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: rgb(240 234 224 / 0.7);
  text-align: center;
}
/* Keep sponsor strip below the focus panel on home */
body.zk-editing .aa-hero .zk-hero-focus {
  bottom: 1rem;
}
/* Quote section: overlay darkness slider (same chrome as hero focus) */
body.zk-editing .aa-quote {
  overflow: visible;
  position: relative;
}
body.zk-editing .aa-quote .zk-overlay-control {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: absolute;
  z-index: 30;
  left: 1.25rem;
  bottom: 1.25rem;
  width: min(20rem, calc(100% - 2.5rem));
  padding: 0.7rem 0.9rem 0.75rem;
  border-radius: 0.5rem;
  background: rgb(12 10 8 / 0.9);
  border: 1px solid rgb(201 90 30 / 0.55);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
  backdrop-filter: blur(8px);
  color: #f0eae0;
  pointer-events: auto;
}
.zk-overlay-control {
  display: none;
}
.zk-overlay-control .zk-hero-focus-title,
.zk-overlay-control .zk-hero-focus-lbl,
.zk-overlay-control .zk-hero-focus-range,
.zk-overlay-control .zk-hero-focus-val {
  /* reuse hero focus type styles */
}
@media (max-width: 640px) {
  body.zk-editing .aa-hero .zk-hero-btn {
    bottom: 7.5rem;
    right: 0.75rem;
  }
  body.zk-editing .aa-quote .zk-overlay-control {
    left: 0.75rem;
    bottom: 0.75rem;
  }
}
/* Venue rentals: chips/buttons/images editable — unclip pencil badges */
body.zk-editing .aa-vr-card,
body.zk-editing .aa-ev-item {
  overflow: visible;
}
body.zk-editing .aa-vr-card-media {
  overflow: hidden; /* keep photo crop */
}
body.zk-editing .aa-vr-card-media .aa-lb-trigger,
body.zk-editing .aa-vr-gal-item {
  cursor: pointer;
}
body.zk-editing .aa-vr-chip[data-editable] {
  min-width: 2.5rem;
  outline-offset: 2px;
}

/* Header Book Now — same primary motion, slightly tighter */
body > header .btn-primary,
body > header a.btn-primary,
.aa-header-cta {
  padding: 0.7rem 1.25rem !important;
  font-size: 0.78rem !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  a.btn-primary,
  .btn-outline,
  a.btn-outline,
  .aa-btn-outline {
    transition: background-color 120ms ease, color 120ms ease !important;
  }
  .btn-primary:hover,
  a.btn-primary:hover,
  .btn-outline:hover,
  a.btn-outline:hover,
  .aa-btn-outline:hover,
  body > header .btn-primary:hover,
  .aa-header-cta:hover {
    transform: none !important;
    letter-spacing: 0.14em !important;
  }
}

/* ── header (Figma: utility strip + logo | nav | Book Now) ───────────
   Interior pages: sticky — sits in document flow so it never covers content.
   Homepage only: fixed overlay so the hero can bleed under a transparent bar. */
body > header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  background: rgba(12, 10, 8, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(201 90 30 / 0.18);
  transition: background-color 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
/* Home: full-bleed hero under the bar (transparent until scroll) */
body:has(.aa-home) > header {
  position: fixed;
  inset-inline: 0;
  background: rgba(12, 10, 8, 0.72);
  border-bottom-color: transparent;
}
body > header.aa-scrolled,
body > header.aa-compact,
body:has(.aa-home) > header.aa-scrolled,
body:has(.aa-home) > header.aa-compact {
  background: rgba(12, 10, 8, 0.97);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.45);
  border-bottom-color: rgb(201 90 30 / 0.18);
}
/* Fallback when :has() isn’t available — JS adds .aa-is-home on body */
body.aa-is-home > header {
  position: fixed;
  inset-inline: 0;
  background: rgba(12, 10, 8, 0.72);
  border-bottom-color: transparent;
}
body.aa-is-home > header.aa-scrolled,
body.aa-is-home > header.aa-compact {
  background: rgba(12, 10, 8, 0.97);
  border-bottom-color: rgb(201 90 30 / 0.18);
}

/* Soft compact: same chrome, shorter — hide utility, shrink logo/padding */
body > header .aa-header-bar,
body > header > div.aa-header-bar,
body > header > div {
  max-width: 80rem;
  margin-inline: auto;
  padding: 0.55rem 1.5rem 0.85rem;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  border: 0;
  background: transparent;
  transition: padding 220ms ease;
}
body > header.aa-compact .aa-header-bar,
body > header.aa-compact > div.aa-header-bar,
body > header.aa-compact > div {
  padding: 0.35rem 1.25rem;
}

.aa-header-shell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: gap 220ms ease;
}
body > header.aa-compact .aa-header-shell {
  gap: 0;
}

/* Top utility: phone + socials, right-aligned — hides when compact */
.aa-header-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  min-height: 1.25rem;
  max-height: 2rem;
  opacity: 1;
  overflow: hidden;
  transition: max-height 220ms ease, opacity 180ms ease, margin 220ms ease;
}
body > header.aa-compact .aa-header-top {
  max-height: 0;
  min-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.aa-header-phone {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary) !important;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.aa-header-phone:hover {
  color: var(--color-accent) !important;
}
.aa-header-top-rule {
  width: 1px;
  height: 0.9rem;
  background: var(--color-primary);
  opacity: 0.7;
}
.aa-header-social {
  display: inline-flex;
  color: var(--color-primary) !important;
  opacity: 0.95;
}
.aa-header-social:hover {
  color: var(--color-accent) !important;
}

/* Main row: logo | nav | CTA */
.aa-header-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 1.25rem;
  min-height: 3.5rem;
  transition: min-height 220ms ease, gap 220ms ease;
}
body > header.aa-compact .aa-header-main {
  min-height: 2.5rem;
  gap: 0.65rem 1rem;
  /* Let the logo hang slightly outside the bar when compact */
  overflow: visible;
}
body > header.aa-compact .aa-header-bar,
body > header.aa-compact > div.aa-header-bar {
  overflow: visible;
}
body > header.aa-compact {
  overflow: visible;
}
/* Full-size logo: large, sits high (can overhang the bar). Compact is fine as-is. */
body > header {
  overflow: visible;
}
.aa-header-main > a:first-child {
  display: flex;
  align-items: center;
  flex: none;
  position: relative;
  z-index: 2;
  /* Full-size: bigger mark needs a stronger upward nudge */
  transform: translate(0.45rem, -0.85rem);
  transition: transform 220ms ease;
}
body > header a img,
.aa-header-main img,
.aa-header-logo-anim,
.aa-header-main .aa-header-logo-anim {
  height: 6.25rem;
  width: auto;
  max-width: 11rem;
  object-fit: contain;
  display: block;
  transition: height 220ms ease, max-width 220ms ease;
}
/* SVGator logo object in header (viewBox ~625×500) */
.aa-header-logo-wrap {
  display: flex;
  align-items: center;
  line-height: 0;
  overflow: visible;
}
.aa-header-logo-anim {
  height: 6.25rem;
  width: auto;
  max-width: 9.75rem;
  aspect-ratio: 625 / 500;
  border: 0;
  background: transparent;
  pointer-events: none;
}
/* Compact / minimized — leave as the good size user already likes */
body > header.aa-compact a img,
body > header.aa-compact .aa-header-main img,
body > header.aa-compact .aa-header-logo-anim {
  height: 3.65rem !important;
  max-width: 6.25rem !important;
}
body > header.aa-compact .aa-header-main > a:first-child {
  transform: translate(0.35rem, -0.35rem);
}
body > header [data-site-title],
.aa-header-main [data-site-title] {
  display: none !important;
}
/* If the animated logo mounted, never also show the kit <img> wordmark. */
.aa-header-main a:has(.aa-header-logo-wrap) > img,
.aa-header-main a.aa-has-anim-logo > img {
  display: none !important;
}

.aa-header-navwrap {
  min-width: 0;
  display: flex;
  justify-content: center;
}
.aa-header-nav,
body > header nav.aa-header-nav,
body > header nav[data-nav].aa-header-nav {
  display: none; /* mobile: hamburger only */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 1.15rem;
  max-width: 100%;
}

.aa-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: end;
}

/* Mobile call button — orange phone icon (Figma prototype) */
.aa-call-btn {
  display: none; /* desktop: phone is in the top utility strip */
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  flex: none;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-cream) !important;
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease;
}
.aa-call-btn:hover {
  background: var(--color-accent);
  transform: scale(1.05);
}
.aa-call-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}
/* Theme toggle is brand-noise on this dark site */
body > header [data-zk-theme] {
  display: none !important;
}

body > header .navlink,
body > header .zk-navgroup-btn,
.aa-header-nav .navlink {
  color: var(--color-muted) !important;
  font-family: var(--font-display) !important;
  font-size: 0.8125rem !important; /* 13px — Figma-ish */
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.35rem 0 !important;
  white-space: nowrap;
  background: none !important;
  border: 0 !important;
  position: relative;
  line-height: 1.2;
}
body > header .navlink:hover,
body > header .navlink.navlink-active,
.aa-header-nav .navlink:hover,
.aa-header-nav .navlink.navlink-active {
  color: var(--color-cream) !important;
}
body > header .navlink::after,
.aa-header-nav .navlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--color-primary);
  transition: width 180ms ease;
  border-radius: 99px;
}
body > header .navlink:hover::after,
body > header .navlink.navlink-active::after,
.aa-header-nav .navlink:hover::after,
.aa-header-nav .navlink.navlink-active::after {
  width: 100%;
}

.aa-header-cta,
a.aa-header-cta {
  display: inline-flex !important;
  flex: none;
  padding: 0.75rem 1.45rem !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.12em !important;
  white-space: nowrap;
  min-height: 2.85rem;
  transition: padding 220ms ease, font-size 220ms ease, min-height 220ms ease;
}
body > header.aa-compact .aa-header-cta {
  padding: 0.55rem 1.1rem !important;
  font-size: 0.8rem !important;
  min-height: 2.4rem;
}
body > header.aa-compact .aa-call-btn {
  width: 2.4rem;
  height: 2.4rem;
}
body > header.aa-compact .navlink,
body > header.aa-compact .aa-header-nav .navlink {
  font-size: 0.72rem !important;
  letter-spacing: 0.05em !important;
  padding: 0.2rem 0 !important;
}
body > header.aa-compact .aa-header-nav,
body > header.aa-compact nav.aa-header-nav {
  gap: 0.1rem 0.75rem;
}

/* Mobile menu button color on dark header */
body > header .zk-mnav-btn {
  color: var(--color-cream) !important;
}
body > header .zk-mnav-panel {
  background: #120e0b;
  border: 1px solid rgb(201 90 30 / 0.35);
  color: var(--color-cream);
}
body > header .zk-mnav-panel .navlink {
  display: block;
  padding: 0.7rem 1rem !important;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  white-space: normal;
}
/* Venue Rentals (and any) nav dropdown — desktop flyout, mobile accordion */
body > header .zk-navgroup {
  position: relative;
}
body > header .zk-navgroup-btn {
  gap: 0.35rem !important;
}
body > header .zk-navgroup-chev {
  color: var(--color-accent);
  opacity: 0.9;
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
}
body > header .zk-navgroup-panel {
  background: #120e0b;
  border: 1px solid rgb(201 90 30 / 0.45);
  border-radius: 0;
  min-width: 15.5rem;
  padding: 0.4rem 0;
  box-shadow: 0 14px 36px rgb(0 0 0 / 0.5);
  z-index: 80;
  top: calc(100% + 0.35rem);
}
body > header .zk-navgroup-item {
  color: var(--color-cream) !important;
  font-family: var(--font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.65rem 1rem !important;
  border-radius: 0 !important;
  white-space: normal;
  line-height: 1.3;
  border-bottom: 1px solid rgb(255 255 255 / 0.05);
}
body > header .zk-navgroup-item:last-child {
  border-bottom: 0;
}
body > header .zk-navgroup-item:hover,
body > header .zk-navgroup-item.navlink-active {
  background: rgb(201 90 30 / 0.18) !important;
  color: var(--color-accent) !important;
}
/* Parent “Venue Rentals” overview link at top of panel */
body > header .zk-navgroup-item:first-child {
  color: var(--color-accent) !important;
  font-size: 0.68rem !important;
  opacity: 0.95;
}

/* Mobile drawer: nested group as accordion */
body > header .zk-mnav-panel .zk-navgroup {
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}
body > header .zk-mnav-panel .zk-navgroup-btn {
  width: 100%;
  justify-content: space-between !important;
  padding: 0.7rem 1rem !important;
  text-align: left;
}
body > header .zk-mnav-panel .zk-navgroup-panel {
  position: static;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  background: rgb(0 0 0 / 0.35);
  padding: 0.15rem 0 0.35rem;
  min-width: 0;
}
body > header .zk-mnav-panel .zk-navgroup-item {
  padding: 0.6rem 1rem 0.6rem 1.35rem !important;
  font-size: 0.7rem !important;
  border-bottom: 1px solid rgb(255 255 255 / 0.04);
}
body > header .zk-mnav-panel .zk-navgroup-item:last-child {
  border-bottom: 0;
}

/* Desktop: show the full nav row */
@media (min-width: 1100px) {
  .aa-header-nav,
  body > header nav.aa-header-nav,
  body > header nav[data-nav].aa-header-nav {
    display: flex !important;
  }
  body > header .zk-mnav {
    display: none !important;
  }
}
/* Mid widths: slightly tighter nav so it still fits */
@media (min-width: 1100px) and (max-width: 1280px) {
  .aa-header-nav {
    gap: 0.1rem 0.7rem;
  }
  body > header .navlink,
  .aa-header-nav .navlink {
    font-size: 0.72rem !important;
    letter-spacing: 0.05em !important;
  }
  body > header:not(.aa-compact) a img,
  body > header:not(.aa-compact) .aa-header-main img,
  body > header:not(.aa-compact) .aa-header-logo-anim {
    height: 5.25rem;
    max-width: 8.5rem;
  }
}
@media (max-width: 1099.98px) {
  .aa-header-top {
    display: none; /* phone is the call icon in the main row */
  }
  .aa-header-main {
    grid-template-columns: auto 1fr auto;
  }
  .aa-header-navwrap {
    display: none;
  }
  body > header:not(.aa-compact) a img,
  body > header:not(.aa-compact) .aa-header-main img,
  body > header:not(.aa-compact) .aa-header-logo-anim {
    height: 4.75rem;
    max-width: 7.75rem;
  }
  body > header:not(.aa-compact) .aa-header-main > a:first-child {
    transform: translate(0.35rem, -0.55rem);
  }
  /* Show phone CTA; hide text Book Now on narrow phones (call is primary) */
  .aa-call-btn {
    display: inline-flex !important;
  }
  .aa-header-cta {
    display: none !important;
  }
}
@media (min-width: 480px) and (max-width: 1099.98px) {
  .aa-header-cta {
    display: inline-flex !important;
    padding: 0.65rem 1.15rem !important;
    font-size: 0.85rem !important;
  }
}

/* ── image lightbox ─────────────────────────────────────────────────── */
.aa-lb-trigger {
  display: block;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
}
.aa-lb-trigger img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 280ms ease, filter 280ms ease;
}
.aa-lb-trigger:hover img {
  filter: brightness(1.06);
}
.aa-lb-trigger::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: rgb(12 10 8 / 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f0eae0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3Cpath d='M11 8v6'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E") center / 1.1rem no-repeat;
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.aa-lb-trigger:hover::after {
  opacity: 1;
  background-color: var(--color-primary);
}

.aa-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Keep room for the close button; never let content push past the viewport */
  padding: 3.5rem 1.25rem 1.5rem;
  box-sizing: border-box;
  background: rgb(8 6 5 / 0.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
  overflow: auto;
}
.aa-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.aa-lightbox[hidden] {
  display: none !important;
}
.aa-lightbox.is-open[hidden] {
  display: flex !important;
}
.aa-lightbox-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* % max-height is useless without a fixed parent height — use viewport units */
  width: min(1100px, 100%);
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  min-height: 0;
}
/* Video slides share the figure with images and get the same fitting rules. */
.aa-lightbox-video {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 6.5rem);
  max-height: calc(100dvh - 6.5rem);
  width: auto;
  height: auto;
  margin-inline: auto;
  background: #000;
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.55);
}
.aa-lightbox-video[hidden] { display: none; }

.aa-lightbox-figure img {
  display: block;
  /* Fit entire image in view (tall product shot was overflowing) */
  max-width: 100%;
  max-height: calc(100vh - 6.5rem);
  max-height: calc(100dvh - 6.5rem);
  width: auto;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.55);
  border: 1px solid rgb(201 90 30 / 0.25);
  opacity: 1;
  transition: opacity 160ms ease;
}
.aa-lightbox.is-loading .aa-lightbox-figure img {
  opacity: 0.25;
}
.aa-lightbox-spinner {
  position: absolute;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 2px solid rgb(240 234 224 / 0.2);
  border-top-color: var(--color-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.aa-lightbox.is-loading .aa-lightbox-spinner {
  opacity: 1;
  animation: aa-lb-spin 0.7s linear infinite;
}
@keyframes aa-lb-spin {
  to { transform: rotate(360deg); }
}
.aa-lightbox-cap {
  flex-shrink: 0;
  margin: 0.65rem 0 0;
  max-width: 100%;
  text-align: center;
  color: rgb(240 234 224 / 0.8);
  font-size: 0.9rem;
  font-family: var(--font-body);
}
.aa-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 999px;
  background: rgb(12 10 8 / 0.72);
  color: var(--color-cream);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 150ms ease, transform 150ms ease;
}
.aa-lightbox-nav:hover {
  background: var(--color-primary);
}
.aa-lightbox-nav:active {
  transform: translateY(-50%) scale(0.96);
}
.aa-lightbox-prev { left: 0.65rem; }
.aa-lightbox-next { right: 0.65rem; }
.aa-lightbox-nav[hidden] { display: none !important; }
.aa-lightbox-nav svg { width: 1.35rem; height: 1.35rem; }
.aa-lightbox-counter {
  position: absolute;
  top: 0.95rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgb(12 10 8 / 0.72);
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}
.aa-lightbox-counter[hidden] { display: none !important; }
@media (max-width: 640px) {
  .aa-lightbox-nav {
    width: 2.5rem;
    height: 2.5rem;
  }
  .aa-lightbox-prev { left: 0.35rem; }
  .aa-lightbox-next { right: 0.35rem; }
  .aa-lightbox {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

.aa-lightbox-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: rgb(12 10 8 / 0.75);
  color: var(--color-cream);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 150ms ease;
}
.aa-lightbox-close:hover {
  background: var(--color-primary);
}
body.aa-lb-open {
  overflow: hidden;
}

/* ── landing: hero + sponsors always fill first viewport ──────────────
   Exact viewport height (not min-height) so the sponsor strip is always on
   the bottom edge on load — short or tall windows. Hero flexes into the
   leftover space. Scrolling past .aa-landing takes the strip with it. */
.aa-landing {
  display: flex;
  flex-direction: column;
  /* Prefer small viewport unit so mobile browser chrome doesn’t push
     the strip below the fold on first paint */
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  max-height: 100vh;
  max-height: 100dvh;
  max-height: 100svh;
  /* Lift sponsor strip ~56px off the absolute bottom edge */
  padding-bottom: 56px;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
/* ── hero ───────────────────────────────────────────────────────────── */
.aa-hero {
  position: relative;
  /* Fill remaining space above the sponsor strip; may shrink on short windows */
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-cream);
  overflow: hidden;
  /* Split bg props so inline background-position (heroFocus) wins cleanly */
  background-color: #0c0a08;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.aa-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Stronger scrim so body copy stays readable on busy bar photos */
  background:
    radial-gradient(ellipse at 50% 42%, rgba(201, 90, 30, 0.1) 0%, transparent 50%),
    linear-gradient(
      180deg,
      rgba(12, 10, 8, 0.72) 0%,
      rgba(12, 10, 8, 0.55) 32%,
      rgba(12, 10, 8, 0.62) 55%,
      rgba(12, 10, 8, 0.88) 82%,
      #0c0a08 100%
    );
  pointer-events: none;
}
.aa-hero-inner {
  position: relative;
  z-index: 1;
  /* Wide enough for “Where the Party” as a single line at Figma-scale type */
  max-width: min(72rem, 100%);
  width: 100%;
  /* Tighter bottom so CTA clears the sponsor band; top clears fixed header */
  padding: clamp(5rem, 12vh, 7.5rem) 1.5rem clamp(1.5rem, 4vh, 3.25rem);
  box-sizing: border-box;
  /* Nudge copy/CTA down ~20px without growing the landing or sponsor strip */
  transform: translateY(20px);
}
.aa-hero h1 {
  /* Fluid but capped so the first line doesn’t wrap mid-phrase on mid widths.
     Also tracks viewport height so short windows don’t blow past the strip. */
  font-size: clamp(2.25rem, min(6.2vw, 12vh), 7.5rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-shadow: 0 4px 18px rgb(0 0 0 / 0.55);
  margin: 0 auto;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: none;
}
@media (max-height: 700px) {
  /* Do not shrink padding-top below the fixed home header (~99px) —
     4.5rem used to tuck the title under the bar on phones. */
  .aa-hero-inner {
    padding-top: calc(6.75rem + env(safe-area-inset-top, 0px));
    padding-bottom: 1.25rem;
  }
  .aa-hero-lead {
    margin-top: 0.85rem !important;
    font-size: 0.95rem !important;
  }
  .aa-hero .btn-primary,
  .aa-hero a.aa-hero-cta {
    margin-top: 1.15rem !important;
  }
}
.aa-hero h1.aa-title-stack {
  align-items: center;
}
.aa-hero h1 .aa-title-line {
  display: block;
  line-height: 0.98;
  white-space: nowrap;
}
.aa-hero h1 .aa-accent {
  color: var(--color-accent);
}
/* Very narrow phones: allow wrap rather than overflowing the viewport */
@media (max-width: 379.98px) {
  .aa-hero h1 .aa-title-line {
    white-space: normal;
  }
}
.aa-hero-lead {
  margin: 1.35rem auto 0;
  max-width: 38rem;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.65;
  /* Full cream + shadow — was 0.75 opacity on a busy photo */
  color: #f5f0e8;
  font-weight: 400;
  text-shadow:
    0 1px 2px rgb(0 0 0 / 0.9),
    0 2px 14px rgb(0 0 0 / 0.65);
}
/* Hero primary CTA spacing — motion comes from global .btn-primary */
.aa-hero .btn-primary,
.aa-hero a.aa-hero-cta {
  margin-top: 1.85rem;
}

/* Phones: the first-viewport lock (exact 100svh + overflow hidden + 56px
   bottom lift) clipped the title under the fixed header and the Book Now
   button under the sponsor strip. Fill the screen when there's room, but
   never clip the type — short windows can grow and scroll. */
@media (max-width: 767.98px) {
  .aa-landing {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    max-height: none;
    padding-bottom: 0;
    overflow: visible;
  }
  .aa-hero {
    flex: 1 1 auto;
    align-items: flex-start;
    overflow: visible;
  }
  .aa-hero-inner {
    transform: none;
    padding-top: calc(6.75rem + env(safe-area-inset-top, 0px));
    padding-bottom: 1.15rem;
  }
  .aa-hero-lead {
    margin-top: 0.8rem;
    font-size: 0.92rem;
    line-height: 1.5;
  }
  .aa-hero-lead + .aa-hero-lead,
  .aa-hero .aa-hero-closer {
    margin-top: 0.55rem;
  }
  .aa-hero .btn-primary,
  .aa-hero a.aa-hero-cta {
    margin-top: 1.1rem;
  }
}

/* ── sponsor strip (drag / swipe / auto-scroll parade) ──────────────── */
.aa-sponsors {
  position: relative;
  z-index: 2;
  flex: 0 0 auto; /* sit at bottom of .aa-landing; never grow */
  width: 100%;
  background: #0c0a08;
  border-block: 1px solid rgb(201 90 30 / 0.15);
  padding: 0.7rem 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y; /* allow vertical page scroll; JS handles horizontal */
}
/* Soft edge fades so logos don't clip hard at the sides */
.aa-sponsors::before,
.aa-sponsors::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 3rem;
  z-index: 2;
  pointer-events: none;
}
.aa-sponsors::before {
  left: 0;
  background: linear-gradient(90deg, #0c0a08 0%, transparent 100%);
}
.aa-sponsors::after {
  right: 0;
  background: linear-gradient(270deg, #0c0a08 0%, transparent 100%);
}
.aa-sponsors-track {
  display: flex;
  gap: 2.25rem;
  width: max-content;
  align-items: center;
  cursor: grab;
  will-change: transform;
  /* animation driven by JS (Stage Stop character-parade model) */
}
.aa-sponsors.is-dragging .aa-sponsors-track {
  cursor: grabbing;
}
.aa-sponsors-track .aa-sponsor {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
  /* Links stay clickable; parade JS suppresses click after a real drag */
  pointer-events: auto;
}
.aa-sponsors-track .aa-sponsor:focus-visible {
  outline: 2px solid rgb(201 90 30 / 0.7);
  outline-offset: 4px;
  border-radius: 2px;
}
.aa-sponsors-track img {
  /* Larger mark — readable without squinting (Chris / first paint) */
  height: 3.15rem;
  width: auto;
  max-width: 11rem;
  object-fit: contain;
  opacity: 0.92;
  filter: brightness(0) invert(1);
  pointer-events: none; /* drag is on the track, not individual imgs */
  -webkit-user-drag: none;
  user-select: none;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
@media (min-width: 768px) {
  .aa-sponsors {
    padding: 1.35rem 0;
  }
  .aa-sponsors-track img {
    height: 5.5rem;
    max-width: 16rem;
  }
  .aa-sponsors-track {
    gap: 4.5rem;
  }
}
.aa-sponsors-track a.aa-sponsor:hover img {
  opacity: 1;
}

/* ── sponsor strip docked to the viewport bottom ──────────────────────
   Gregg, 8/18 (voice): lock the strip to the bottom of the page, let it
   shrink as you scroll down, and send it back to full size on hover so
   it pulls attention back to the sponsors.

   Pointer-and-hover only, deliberately. "Roll their mouse over it" has
   no touch equivalent — on a phone the strip would shrink and never come
   back — and a permanently fixed bar costs too much of a small screen.
   Touch keeps the original in-flow strip at the bottom of the landing. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .aa-sponsors.aa-sponsors-dock {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 30;
    transition: padding 280ms ease;
  }
  .aa-sponsors-dock .aa-sponsors-track img {
    transition: height 280ms ease, max-width 280ms ease, opacity 150ms ease;
  }
  .aa-sponsors-dock.is-compact {
    padding: 0.45rem 0;
  }
  .aa-sponsors-dock.is-compact .aa-sponsors-track img {
    height: 2.6rem;
    max-width: 9rem;
  }
  /* focus-within keeps it reachable by keyboard, not just mouse */
  .aa-sponsors-dock.is-compact:hover,
  .aa-sponsors-dock.is-compact:focus-within {
    padding: 1.35rem 0;
  }
  .aa-sponsors-dock.is-compact:hover .aa-sponsors-track img,
  .aa-sponsors-dock.is-compact:focus-within .aa-sponsors-track img {
    height: 5.5rem;
    max-width: 16rem;
  }
  /* The strip left the flow — hold its space so the hero composition and
     the 56px bottom lift on the landing are unchanged on first paint. */
  body.aa-sponsors-docked .aa-landing {
    padding-bottom: calc(56px + var(--aa-sponsors-h, 8.2rem));
  }
  /* Footer and page tail clear the docked bar at its compact height */
  body.aa-sponsors-docked {
    padding-bottom: var(--aa-sponsors-compact-h, 3.5rem);
  }
}
/* Applied for a single frame while JS measures the compact height — without
   it the transition is still running and we'd measure the full size. */
.aa-sponsors.aa-measuring,
.aa-sponsors.aa-measuring .aa-sponsors-track img {
  transition: none !important;
}

/* While a support recording is minimised, the floating pill sits over the
   bottom-right. Freeze the strip at its compact height so hovering near the
   pill does not expand the strip underneath it mid-narration. */
body.zk-sw-detached .aa-sponsors-dock.is-compact:hover {
  padding: 0.45rem 0;
}
body.zk-sw-detached .aa-sponsors-dock.is-compact:hover .aa-sponsors-track img {
  height: 2.6rem;
  max-width: 9rem;
}

@media (prefers-reduced-motion: reduce) {
  .aa-sponsors-dock,
  .aa-sponsors-dock .aa-sponsors-track img {
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aa-sponsors-track {
    /* Auto-scroll off in JS; still draggable */
  }
}

/* ── section chrome ───────────────────────────────────────────────────
   Horizontal gutters live on .aa-section-inner (not the section) so every
   custom page that uses the inner (contact, venue, walkthru, home) gets
   consistent side padding on mobile and desktop. */
.aa-section {
  padding: 5rem 0;
  background: var(--color-dark);
  color: var(--color-cream);
}
.aa-section-inner {
  max-width: 80rem;
  width: 100%;
  margin-inline: auto;
  padding-inline: 1.5rem;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .aa-section-inner {
    padding-inline: 1.15rem;
  }
  .aa-section {
    padding-block: 3.5rem;
  }
}
.aa-kicker {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.35rem;
}
.aa-title {
  font-size: clamp(1.85rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--color-cream);
}
.aa-title .aa-muted {
  color: var(--color-muted);
}
.aa-body {
  margin-top: 1.15rem;
  font-size: 1rem;
  line-height: 1.75;
  color: rgb(255 255 255 / 0.88);
  font-weight: 300;
  max-width: 36rem;
}

/* ── event types (split) ────────────────────────────────────────────── */
.aa-events {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 960px) {
  .aa-events {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
}
.aa-photo {
  position: relative;
}
.aa-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.aa-photo .aa-lb-trigger img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.aa-photo .aa-stat {
  z-index: 2;
  pointer-events: none;
}
.aa-photo-corners::before,
.aa-photo-corners::after {
  content: "";
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  border-color: var(--color-accent);
  border-style: solid;
  pointer-events: none;
}
.aa-photo-corners::before {
  top: 0;
  right: 0;
  border-width: 3px 3px 0 0;
}
.aa-photo-corners::after {
  bottom: 0;
  left: 0;
  border-width: 0 0 3px 3px;
}
.aa-stat {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  background: var(--color-primary);
  color: var(--color-cream);
  padding: 1rem 1.35rem;
  text-align: center;
  font-family: var(--font-display);
  line-height: 1;
}
.aa-stat b {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
}
.aa-stat span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  font-weight: 600;
}
.aa-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.75rem 0 1.75rem;
}
.aa-tag {
  border: 1px solid rgb(201 90 30 / 0.35);
  background: rgb(201 90 30 / 0.08);
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
}

/* Stacked display titles (second line always breaks) */
.aa-title-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.aa-title-stack .aa-title-line {
  display: block;
  line-height: 1.1;
}
.aa-body-closer {
  margin-top: 1rem !important;
  font-weight: 400 !important;
  color: var(--color-cream) !important;
  max-width: 36rem;
}

/* ── offer cards on wood (Figma Section 02) ────────────────────────────
   Left column stack: copy → 2×2 cards → CTA.
   Right side stays open so the wood logo (bg ~55–80%) is not covered. */
.aa-offers {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 5rem;
  background: #251e17 center / cover no-repeat;
  background-position: center center;
  color: var(--color-cream);
  border-top: 1px solid rgb(201 90 30 / 0.18);
}
.aa-offers::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Dark left for the content column; open right so the wood logo reads */
  background: linear-gradient(
    95deg,
    rgb(0 0 0 / 0.9) 0%,
    rgb(0 0 0 / 0.78) 34%,
    rgb(20 16 12 / 0.32) 58%,
    rgb(20 16 12 / 0.14) 78%,
    rgb(12 10 8 / 0.22) 100%
  );
}
.aa-offers-inner {
  position: relative;
  z-index: 1;
  max-width: 80rem;
  width: 100%;
  margin-inline: auto;
  padding-inline: 1.5rem;
  box-sizing: border-box;
  text-align: left;
  /* Single left column; right half of the section is empty (logo) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
@media (min-width: 960px) {
  .aa-offers-inner {
    /* Cap the left column so cards never spill over the logo */
    max-width: min(80rem, 100%);
    width: 100%;
  }
  .aa-offers-inner > .aa-offers-copy,
  .aa-offers-inner > .aa-offer-grid,
  .aa-offers-inner > .aa-cta-row {
    width: 100%;
    max-width: 32rem;
  }
  .aa-offers-inner > .aa-offer-grid {
    margin-top: 0.5rem;
  }
  .aa-offers-inner > .aa-cta-row {
    margin-top: 0.35rem;
  }
}
@media (min-width: 1280px) {
  .aa-offers-inner > .aa-offers-copy,
  .aa-offers-inner > .aa-offer-grid,
  .aa-offers-inner > .aa-cta-row {
    max-width: 34rem;
  }
}
@media (max-width: 640px) {
  .aa-offers-inner {
    padding-inline: 1.15rem;
  }
}
.aa-offers-copy {
  max-width: 34rem;
}
.aa-offers .aa-title {
  margin-top: 0.35rem;
}
.aa-offers .aa-title .aa-accent {
  color: var(--color-accent);
}
.aa-offers .aa-body {
  margin-top: 1rem;
  max-width: 32rem;
  color: rgb(255 255 255 / 0.92);
  font-weight: 300;
  line-height: 1.75;
}
.aa-offer-grid {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
  width: 100%;
  max-width: 34rem;
  text-align: left;
}
@media (min-width: 640px) {
  .aa-offer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
}
.aa-offer {
  border: 1px solid rgb(154 133 114 / 0.5);
  background: rgb(24 20 16 / 0.8);
  padding: 2rem 1.85rem 1.65rem;
  min-height: 9.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  backdrop-filter: blur(2px);
  transition:
    border-color 280ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 280ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aa-offer:hover {
  border-color: rgb(201 90 30 / 0.55);
  background: rgb(32 26 20 / 0.92);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.35);
}
.aa-offer:hover .aa-offer-icon {
  background: rgb(201 90 30 / 0.22);
  border-color: rgb(201 90 30 / 0.5);
  color: var(--color-cream);
}
.aa-offer-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: rgb(201 90 30 / 0.12);
  border: 1px solid rgb(201 90 30 / 0.25);
  color: var(--color-accent);
  margin-bottom: 1.25rem;
  flex: none;
  /* Match square icon language used elsewhere */
  border-radius: 0;
  transition:
    background-color 280ms ease,
    border-color 280ms ease,
    color 280ms ease;
}
.aa-offer h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cream);
  line-height: 1.3;
}
.aa-offer p { display: none; } /* cards are title-only in the prototype */
.aa-offers .aa-cta-row {
  margin-top: 1.75rem;
}

/* ── atmosphere (Figma Section 03) ──────────────────────────────────── */
.aa-atmosphere-section {
  border-top: 1px solid rgb(201 90 30 / 0.18);
  padding-block: 6rem;
}
.aa-atmosphere {
  display: grid;
  gap: 2.75rem;
  align-items: center;
}
@media (min-width: 960px) {
  .aa-atmosphere {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem 4rem;
  }
}
.aa-atmosphere-copy .aa-title .aa-muted {
  color: var(--color-muted);
}
.aa-atmosphere-copy .aa-body {
  max-width: 36rem;
  color: rgb(255 255 255 / 0.92);
  font-weight: 300;
  line-height: 1.8;
}
.aa-atmosphere-photo {
  position: relative;
  overflow: hidden;
}
.aa-atmosphere-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 22rem;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.aa-atmosphere-photo .aa-lb-trigger {
  height: 100%;
}
.aa-atmosphere-photo .aa-lb-trigger img {
  min-height: 22rem;
  height: 100%;
  object-fit: cover;
}
.aa-atmosphere-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgb(12 10 8 / 0.45));
  pointer-events: none;
  z-index: 1;
}
.aa-atmosphere-photo .aa-lb-trigger::after {
  z-index: 2;
}

/* ── quote / custom events CTA (Figma 405:33804) ──────────────────────
   Full-bleed venue photo + brand-tinted scrim. Darkness is editable in
   edit mode via --aa-quote-dark / --aa-quote-tint (meta.home.quoteOverlay). */
.aa-quote {
  /* Defaults: darker for readability (slider 78 → ~0.81 dark) */
  --aa-quote-dark: 0.81;
  --aa-quote-tint: 0.15;
  --aa-quote-overlay: 78;
  position: relative;
  background: #181410 center / cover no-repeat;
  background-position: center 42%;
  color: var(--color-cream);
  overflow: hidden;
  min-height: 40rem;
  display: flex;
  align-items: center;
}
.aa-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Warm brand tint + dark scrim; opacities from --aa-quote-* (edit slider) */
  background:
    linear-gradient(
      180deg,
      rgb(201 90 30 / var(--aa-quote-tint)) 0%,
      rgb(201 90 30 / var(--aa-quote-tint)) 100%
    ),
    linear-gradient(
      105deg,
      rgb(12 10 8 / var(--aa-quote-dark)) 0%,
      rgb(12 10 8 / var(--aa-quote-dark)) 100%
    );
  pointer-events: none;
  z-index: 0;
}
.aa-quote-layout {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(17rem, 34rem) minmax(16rem, 28rem);
  gap: clamp(2rem, 5vw, 4.25rem);
  align-items: center;
  justify-content: center;
  padding-block: 5.5rem 6rem;
  min-height: inherit;
  box-sizing: border-box;
}
.aa-quote-photo {
  width: 100%;
  max-width: 34rem;
  justify-self: end;
}
.aa-quote-photo .aa-lb-trigger {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: 0.7rem;
  overflow: hidden;
  box-shadow:
    0 22px 56px rgb(0 0 0 / 0.5),
    0 0 0 1px rgb(255 255 255 / 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.aa-quote-photo .aa-lb-trigger:hover {
  transform: translateY(-2px);
  box-shadow:
    0 26px 64px rgb(0 0 0 / 0.55),
    0 0 0 1px rgb(255 255 255 / 0.12);
}
.aa-quote-photo .aa-lb-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.aa-quote-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 40%;
  vertical-align: middle;
}
.aa-quote-inner {
  width: 100%;
  max-width: 28rem;
  text-align: left;
  justify-self: start;
}
.aa-quote .aa-kicker {
  margin-bottom: 0.35rem;
  color: var(--color-primary);
  letter-spacing: 0.16em;
}
.aa-quote .aa-title {
  font-size: clamp(2rem, 3.6vw, 3.15rem);
  margin: 0;
  line-height: 1.05;
}
.aa-quote .aa-title-stack {
  gap: 0.12rem;
}
.aa-quote .aa-title .aa-title-line {
  white-space: normal;
}
.aa-quote .aa-title .aa-accent {
  color: var(--color-primary);
}
.aa-quote .aa-body {
  margin-top: 1.4rem;
  color: rgb(255 255 255 / 0.92);
  font-weight: 300;
  line-height: 1.75;
  font-size: 1.02rem;
  max-width: 26rem;
}
.aa-quote .aa-body-closer {
  margin-top: 1.15rem !important;
  margin-bottom: 0.25rem;
  color: rgb(240 234 224 / 0.88) !important;
  font-weight: 400 !important;
  line-height: 1.65;
  max-width: 24rem;
}
.aa-quote .aa-cta-row {
  margin-top: 1.85rem;
}
/* Legacy: transparent left-half hit area — no longer used */
.aa-quote-lb,
.aa-quote .aa-inline-photo {
  display: none !important;
}
@media (max-width: 959.98px) {
  .aa-quote {
    min-height: 0;
    background-position: center top;
  }
  .aa-quote::before {
    /* Keep variable-driven tint/dark on mobile too */
    background:
      linear-gradient(
        180deg,
        rgb(201 90 30 / var(--aa-quote-tint)) 0%,
        rgb(201 90 30 / var(--aa-quote-tint)) 100%
      ),
      linear-gradient(
        180deg,
        rgb(12 10 8 / var(--aa-quote-dark)) 0%,
        rgb(12 10 8 / var(--aa-quote-dark)) 100%
      );
  }
  .aa-quote-layout {
    grid-template-columns: 1fr;
    padding-block: 3.25rem 3.5rem;
    gap: 1.75rem;
  }
  .aa-quote-photo {
    max-width: none;
    justify-self: stretch;
    order: -1;
  }
  .aa-quote-photo img {
    aspect-ratio: 16 / 11;
  }
  .aa-quote-inner {
    justify-self: start;
    max-width: none;
  }
  .aa-atmosphere-section {
    padding-block: 3.5rem;
  }
}

/* ── products (Figma 405:33806) ───────────────────────────────────────
   Left: copy + CTA (top) + cutout graphic under.
   Right: main product photo. Content sits high (start-aligned). */
.aa-products-section {
  /* Slightly tighter top so the left stack reads higher in the band */
  padding-top: 3.75rem;
  padding-bottom: 5.5rem;
  overflow: visible;
}
.aa-products {
  display: grid;
  gap: 2.25rem 2.5rem;
  align-items: start; /* shift copy/CTA up — not vertically centered */
  overflow: visible;
}
@media (min-width: 960px) {
  .aa-products {
    grid-template-columns: minmax(16rem, 0.95fr) minmax(18rem, 1.15fr);
    gap: 2rem 3rem;
  }
  .aa-products > .aa-axes-strip {
    grid-column: 1 / -1;
  }
}
.aa-products-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
  min-width: 0;
  overflow: visible;
  position: relative;
  z-index: 2; /* cutout can sit over the right photo a bit */
}
.aa-products-copy {
  max-width: 32rem;
}
.aa-products-copy .aa-body {
  max-width: 30rem;
}
.aa-products-copy .aa-cta-row {
  margin-top: 1.35rem;
}
/* Products 02 cutout — ~710×314 (+100px wider than 610×270; may spill into right col) */
.aa-products-cutout {
  --aa-cutout-shift: 8%;
  width: 44.375rem; /* 710px */
  max-width: 44.375rem;
  margin-top: 0.75rem;
  margin-left: 0;
  margin-right: 0;
  line-height: 0;
  align-self: flex-start;
  position: relative;
  z-index: 2;
}
/* Reveal-left + resting right nudge */
.aa-products-cutout.aa-reveal-left:not(.is-in) {
  transform: translate3d(calc(-2.5rem + var(--aa-cutout-shift)), 0, 0);
}
.aa-products-cutout.aa-reveal-left.is-in {
  transform: translateX(var(--aa-cutout-shift));
}
.aa-products-cutout img {
  display: block;
  width: 100%;
  max-width: 44.375rem; /* 710px */
  height: auto;
  max-height: 19.625rem; /* 314px — same aspect as 610/270 */
  object-fit: contain;
  object-position: left center;
  background: transparent;
  pointer-events: none;
  user-select: none;
}
body.zk-editing .aa-products-cutout img {
  pointer-events: auto; /* allow replace/crop in edit mode */
}
.aa-products-visual {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.aa-products-visual .aa-lb-trigger {
  display: block;
  width: 100%;
  max-width: 36rem;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: zoom-in;
}
.aa-products-visual img {
  display: block;
  width: 100%;
  max-width: 36rem;
  height: auto;
  object-fit: contain;
}
/* Don't double-show the same product hero under the band */
.aa-products .aa-axes-strip img {
  max-width: min(22rem, 70vw);
  opacity: 0.9;
}
@media (max-width: 959.98px) {
  .aa-products-section {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
  }
  .aa-products-left {
    gap: 1.5rem;
  }
  .aa-products-cutout {
    width: min(100%, 44.375rem);
    max-width: 100%;
    --aa-cutout-shift: 0%;
    order: 2; /* keep cutout under copy on mobile */
  }
  .aa-products-cutout.aa-reveal-left:not(.is-in) {
    transform: translate3d(-1.75rem, 0, 0);
  }
  .aa-products-cutout.aa-reveal-left.is-in {
    transform: none;
  }
  .aa-products-visual {
    order: 3;
  }
}

/* ── contact ────────────────────────────────────────────────────────── */
.aa-contact {
  text-align: center;
  padding-bottom: 2rem;
  /* Band above footer — slightly lifted from pure black */
  background: #181410 !important;
}
.aa-contact .aa-body {
  margin-inline: auto;
  /* Wider than default 36rem so the long inquiry blurb wraps to 2 lines, not 3 */
  max-width: min(42rem, 100%);
}
.aa-contact-grid {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
  text-align: left;
}
@media (min-width: 960px) {
  .aa-contact-grid {
    grid-template-columns: 1fr 1.15fr;
    align-items: start;
  }
}
.aa-contact-list {
  display: grid;
  gap: 1.25rem;
}
.aa-contact-row {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.aa-contact-icon {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  background: rgb(201 90 30 / 0.15);
  color: var(--color-accent);
  /* Square icons to match offer cards / buttons (Chris review) */
  border-radius: 0;
  border: 1px solid rgb(201 90 30 / 0.28);
}
.aa-contact-row strong {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-family: var(--font-display);
  font-weight: 600;
}
.aa-contact-row a,
.aa-contact-row span {
  color: var(--color-cream);
  font-size: 1.05rem;
}
/* Google Business embed — full width of column, taller than a pin stub */
.aa-map {
  position: relative;
  width: 100%;
  /* Taller than the old 16rem stub; scales with viewport */
  height: clamp(22rem, 52vw, 32rem);
  min-height: 22rem;
  border: 1px solid rgb(201 90 30 / 0.25);
  border-radius: 0.25rem;
  background: #1a1612;
  overflow: hidden;
}
.aa-map iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* Keep place card readable — light grade only */
  filter: grayscale(0.15) contrast(1.02);
}
@media (min-width: 960px) {
  .aa-map {
    /* Match contact column visual weight */
    height: clamp(28rem, 38vw, 36rem);
    min-height: 28rem;
  }
  .aa-contact-grid {
    align-items: stretch;
  }
}
@media (max-width: 959.98px) {
  .aa-map {
    height: clamp(20rem, 70vw, 28rem);
  }
}
.aa-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
  width: 100%;
}
.aa-contact-actions .btn-primary,
.aa-contact-actions .aa-btn-outline {
  flex: 1 1 12rem;
  min-width: 11rem;
  text-align: center;
}

/* ── forms on dark ──────────────────────────────────────────────────── */
.aa-section form input,
.aa-section form textarea,
.aa-section form select,
main form input,
main form textarea,
main form select {
  background: rgb(255 255 255 / 0.04) !important;
  border: 1px solid rgb(201 90 30 / 0.3) !important;
  color: var(--color-cream) !important;
  border-radius: 0 !important;
}
main form label {
  color: var(--color-muted);
}

/* ── kit cards / sections on dark ───────────────────────────────────── */
.card {
  background: rgb(255 255 255 / 0.04);
  border-color: rgb(201 90 30 / 0.25);
  color: var(--color-cream);
}
.article {
  color: rgb(255 255 255 / 0.88);
}
.article a { color: var(--color-accent); }
.hero {
  background-color: #0c0a08;
  color: var(--color-cream);
}

/* Interior heroes */
.hero h1,
section.hero h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
}

/* ── footer (Figma node 203:1004) ─────────────────────────────────────
   Oswald throughout (not Lato). Large stacked mark | Explore 2-col |
   Contact Us. All caps + open tracking like the design. */
footer[data-footer],
body > footer {
  background: #0c0a08 !important;
  color: rgb(240 234 224 / 0.85) !important;
  border-top: 1px solid rgb(201 90 30 / 0.28);
  font-family: var(--font-display) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
footer[data-footer] a {
  color: rgb(240 234 224 / 0.85);
  text-decoration: none;
  font-family: var(--font-display) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 150ms ease;
}
footer[data-footer] a:hover {
  color: #fff;
}

/* CTA footer band */
section.bg-\[var\(--color-dark\)\] {
  background: #140f0c !important;
  border-top: 1px solid rgb(201 90 30 / 0.2);
}

/* FAQ on dark */
.zk-faq-item {
  border-color: rgb(201 90 30 / 0.3);
  background: rgb(255 255 255 / 0.03);
}
.zk-faq-q { color: var(--color-cream); }
.zk-faq-a { color: rgb(255 255 255 / 0.8); }

/* Hide default kit homepage hero when we render aa-home */
.aa-home + .cta-footer,
/* mobile spacing under fixed header is handled by hero min-height */

/* ── utilities ──────────────────────────────────────────────────────── */
.aa-center { text-align: center; }
.aa-center .aa-body { margin-inline: auto; }
.aa-cta-row { margin-top: 1.75rem; }
.aa-accent { color: var(--color-accent); }
.aa-primary { color: var(--color-primary); }

@media (max-width: 639.98px) {
  .aa-hero-inner { padding-inline: 1.15rem; }
  .aa-hero-lead { font-size: 0.95rem; }
  body > header a img { height: 3.5rem; }
  /* CTA rows: stack full-width on narrow phones */
  .aa-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .aa-cta-row .btn-primary,
  .aa-cta-row .aa-btn-outline,
  .aa-cta-row a.btn-primary,
  .aa-cta-row a.aa-btn-outline {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .aa-title-stack .aa-title-line {
    word-break: break-word;
  }
}



/* ── Basecamp bar ─────────────────────────────────────────────────────
   Signed-in strip: Needs attention list, Talk, card table. Can minimize
   to a small chip (preference in localStorage).

   Expanded: lives in document flow (and sticks) so it never covers the
   site chrome — the sheet/dropdown may overlay content, the bar itself
   must not. Minimized: floating chip only. */
body.aa-has-open-bar:not(.aa-basecamp-bar-minimized) {
  --aa-bc-bar-h: 2.4rem;
}
.aa-open-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #1a1410;
  border-bottom: 1px solid rgb(201 90 30 / 0.45);
  color: var(--color-cream);
  font-family: var(--font-body);
  /* Keep height stable for --aa-bc-bar-h + header top offset */
  box-sizing: border-box;
}
.aa-open-bar.is-minimized {
  position: fixed;
  top: 0.55rem;
  left: 0.55rem;
  right: auto;
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  z-index: 70;
}
.aa-open-bar.is-minimized .aa-open-bar-inner,
.aa-open-bar.is-minimized .aa-open-panel {
  display: none !important;
}
.aa-open-bar-inner {
  max-width: 80rem;
  margin-inline: auto;
  padding: 0.3rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.35rem;
  box-sizing: border-box;
}

/* Primary CTA in the bar — should feel irresistible when items wait */
.aa-open-bar-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font: inherit;
  color: var(--color-cream);
  cursor: pointer;
  padding: 0.28rem 0.55rem 0.28rem 0.6rem;
  border: 1px solid rgb(201 90 30 / 0.4);
  background: rgb(255 255 255 / 0.04);
  line-height: 1.15;
  min-height: 1.7rem;
  box-sizing: border-box;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}
.aa-open-bar-toggle:hover {
  border-color: var(--color-accent);
  background: rgb(201 90 30 / 0.16);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.28);
}
.aa-open-bar-toggle:active {
  transform: translateY(0);
}
.aa-open-bar-toggle.has-items {
  border-color: color-mix(in srgb, var(--color-accent) 75%, #fff);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 92%, #000) 0%,
    var(--color-primary) 55%,
    color-mix(in srgb, var(--color-accent) 55%, var(--color-primary)) 100%
  );
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.2) inset,
    0 0 18px rgb(201 90 30 / 0.35);
}
.aa-open-bar-toggle.has-items:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.15) inset,
    0 6px 18px rgb(201 90 30 / 0.45);
}
.aa-open-bar.is-open .aa-open-bar-toggle {
  border-color: var(--color-accent);
  background: rgb(201 90 30 / 0.22);
}
.aa-open-bar-pulse {
  display: none;
  position: absolute;
  left: 0.55rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #f5d0a8;
  box-shadow: 0 0 0 0 rgb(245 208 168 / 0.7);
  animation: aa-open-ping 1.6s ease-out infinite;
}
.aa-open-bar-toggle.has-items .aa-open-bar-pulse {
  display: block;
}
.aa-open-bar-toggle.has-items .aa-open-bar-label {
  padding-left: 0.55rem;
}
@keyframes aa-open-ping {
  0% { box-shadow: 0 0 0 0 rgb(245 208 168 / 0.65); }
  70% { box-shadow: 0 0 0 0.55rem rgb(245 208 168 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(245 208 168 / 0); }
}
.aa-open-bar-label {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--color-accent);
  line-height: 1.15;
}
.aa-open-bar-toggle.has-items .aa-open-bar-label {
  color: var(--color-cream);
  text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);
}
.aa-open-bar-count {
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-cream);
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.aa-open-bar-toggle.has-items .aa-open-bar-count {
  background: #1a1410;
  color: var(--color-accent);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25);
  animation: aa-count-pop 0.45s ease-out;
}
.aa-open-bar-count.is-zero {
  background: rgb(255 255 255 / 0.12);
  color: rgb(240 234 224 / 0.55);
}
@keyframes aa-count-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.aa-open-bar-chevron {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  opacity: 0.75;
  transition: transform 0.18s ease, opacity 0.15s ease;
}
.aa-open-bar-toggle:hover .aa-open-bar-chevron {
  opacity: 1;
}
.aa-open-bar.is-open .aa-open-bar-chevron {
  transform: rotate(180deg);
  opacity: 1;
}
.aa-open-bar-who {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  color: rgb(240 234 224 / 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Shared action chrome — Talk + View all must match height */
.aa-open-bar-ask,
.aa-open-bar-bc {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  box-sizing: border-box;
  height: 1.7rem;
  min-height: 1.7rem;
  padding: 0 0.65rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.aa-open-bar-ask {
  color: var(--color-cream);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 88%, #000) 0%,
    var(--color-primary) 55%,
    color-mix(in srgb, var(--color-accent) 70%, var(--color-primary)) 100%
  );
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25) inset;
}
.aa-open-bar-ask:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.aa-open-bar-ask:active {
  transform: translateY(0);
}
.aa-open-bar-ask svg {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  opacity: 0.95;
}
.aa-open-bar-bc {
  color: var(--color-cream) !important;
  text-decoration: none !important;
  background: transparent;
  border-color: rgb(201 90 30 / 0.45);
}
.aa-open-bar-bc:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.aa-open-bar-min {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-right: 0.1rem;
  padding: 0;
  border: 1px solid rgb(201 90 30 / 0.35);
  background: transparent;
  color: rgb(240 234 224 / 0.7);
  cursor: pointer;
  line-height: 0;
  order: -1;
}
.aa-open-bar-min:hover {
  color: var(--color-cream);
  border-color: var(--color-accent);
  background: rgb(201 90 30 / 0.15);
}
/* Minimized chip — icon + count only, compact */
.aa-open-bar-chip {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: var(--color-cream);
  background: #1a1410;
  border: 1px solid rgb(201 90 30 / 0.55);
  padding: 0.35rem 0.45rem;
  min-height: 2rem;
  min-width: 2rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.3);
  line-height: 0;
  border-radius: 0;
}
.aa-open-bar.is-minimized .aa-open-bar-chip {
  display: inline-flex;
}
.aa-open-bar-chip:hover {
  border-color: var(--color-accent);
  background: #241c16;
}
.aa-open-bar-chip-icon {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  color: var(--color-accent);
  display: block;
  opacity: 0.95;
}
.aa-open-bar-chip .aa-open-bar-count {
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  font-size: 0.65rem;
}

/* Dropdown: anchored to Needs attention button (not bar padding) */
.aa-open-bar-drop {
  position: relative;
  flex-shrink: 0;
  z-index: 62;
}
.aa-open-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: auto;
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 26rem);
  overflow-y: auto;
  margin: 0;
  border: 1px solid rgb(201 90 30 / 0.4);
  background: #120e0b;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
  z-index: 63;
}
/* Keep panel on-screen if the toggle is near the right edge */
@media (min-width: 480px) {
  .aa-open-panel {
    min-width: 16rem;
  }
}
.aa-open-panel-inner {
  max-width: none;
  margin: 0;
  padding: 0.7rem 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.aa-open-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgb(201 90 30 / 0.28);
  background: rgb(255 255 255 / 0.03);
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 160ms ease, background 160ms ease;
  box-sizing: border-box;
}
.aa-open-item:hover {
  border-color: var(--color-accent);
  background: rgb(201 90 30 / 0.1);
}
.aa-open-item-col {
  display: block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  line-height: 1.3;
}
.aa-open-item-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-cream);
}
.aa-open-item-meta {
  display: block;
  font-size: 0.8rem;
  color: rgb(240 234 224 / 0.55);
  line-height: 1.35;
  margin-top: 0.1rem;
}
.aa-open-empty {
  margin: 0;
  padding: 0.65rem 0.15rem 0.35rem;
  color: rgb(240 234 224 / 0.65);
  font-size: 0.9rem;
  line-height: 1.45;
}

/*
 * Site header (sticky on interior, fixed on home) must sit *below* the
 * expanded bar — otherwise it stacks at top:0 and the bar looks like it’s
 * overlapping the page. Dropdown sheet stays position:absolute and may
 * cover content; that’s intentional.
 */
body.aa-has-open-bar:not(.aa-basecamp-bar-minimized) > header,
body.aa-has-open-bar:not(.aa-basecamp-bar-minimized).aa-is-home > header,
body.aa-has-open-bar:not(.aa-basecamp-bar-minimized):has(.aa-home) > header {
  top: var(--aa-bc-bar-h, 2.4rem);
}
body.aa-has-open-bar.aa-basecamp-bar-minimized > header {
  top: 0;
}

@media (max-width: 640px) {
  body.aa-has-open-bar:not(.aa-basecamp-bar-minimized) {
    --aa-bc-bar-h: 2.35rem;
  }
  .aa-open-bar-inner {
    padding: 0.28rem 0.85rem;
    gap: 0.5rem;
  }
  .aa-open-bar-who {
    display: none;
  }
  .aa-open-panel {
    left: 0;
    /* Prefer left-align under the toggle; clamp so it never spills past viewport */
    width: min(20rem, calc(100vw - 1.25rem));
    max-width: calc(100vw - 1.25rem);
  }
  .aa-open-panel-inner {
    padding: 0.65rem 0.65rem 0.75rem;
  }
  .aa-open-bar.is-minimized {
    top: auto;
    bottom: 0.85rem;
    left: 0.85rem;
    right: auto;
  }
}

/* ── Checkfront booking page ───────────────────────────────────────────
   High contrast on dark surface — muted taupe fails WCAG on #0c0a08. */
.aa-booking {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  box-sizing: border-box;
  color: var(--color-cream, #f0eae0);
}
.aa-booking-intro .aa-kicker {
  margin-bottom: 0.5rem;
  color: var(--color-accent, #e07b2a);
}
.aa-booking-intro .aa-title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--color-cream, #f0eae0);
}
.aa-booking-intro .aa-body {
  margin: 0 0 1rem;
  max-width: 40rem;
  color: rgb(240 234 224 / 0.92);
  font-size: 1.05rem;
  line-height: 1.6;
}
.aa-booking-notes {
  margin: 0 0 1.75rem;
  padding-left: 1.15rem;
  color: rgb(240 234 224 / 0.88);
  font-size: 0.98rem;
  line-height: 1.6;
}
.aa-booking-notes li {
  margin-bottom: 0.45rem;
}
.aa-booking-notes a {
  color: var(--color-accent, #e07b2a);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.aa-booking-notes a:hover {
  color: #f0a060;
}
/* Light panel for Checkfront DROPLET (dark text, brand cream).
   Height is driven by Checkfront’s own iframe resize — no giant fixed box. */
.aa-booking-widget {
  background: #f7f0e6;
  color: #1a1410;
  border: 1px solid rgb(201 90 30 / 0.45);
  padding: 0.75rem 0.65rem 1rem;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.35);
  overflow: visible;
}
.aa-booking-loader {
  margin: 0;
  padding: 1rem 0.5rem;
  color: #3d342c;
  font-size: 0.95rem;
}
#CHECKFRONT_WIDGET_01 {
  min-height: 28rem; /* initial only; Checkfront grows this */
  width: 100%;
  background: #f7f0e6;
}
/* DROPLET injects an iframe — let it expand; avoid a second nested scroll
   cage when the widget reports a full content height. */
#CHECKFRONT_WIDGET_01 iframe {
  width: 100% !important;
  max-width: 100%;
  border: 0;
  display: block;
  background: #f7f0e6;
}
.aa-booking-fallback {
  margin: 0.85rem 0 0.25rem;
  text-align: center;
  font-size: 0.9rem;
  color: #3d342c;
}
.aa-booking-fallback a {
  color: #a84a12;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.aa-booking-fallback a:hover {
  color: #c95a1e;
}
@media (max-width: 640px) {
  .aa-booking {
    padding: 1.75rem 1rem 3rem;
  }
  #CHECKFRONT_WIDGET_01 {
    min-height: 24rem;
  }
}

/* ── Venue Rentals (custom) ─────────────────────────────────────────── */
.aa-vr-hero {
  position: relative;
  min-height: min(88vh, 46rem);
  display: flex;
  align-items: flex-end;
  background: #0c0a08;
  color: var(--color-cream);
  overflow: hidden;
}
/* Real <img> for LCP (faster than CSS background-image of multi‑MB uploads) */
.aa-vr-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.aa-vr-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgb(12 10 8 / 0.35) 0%, rgb(12 10 8 / 0.55) 40%, rgb(12 10 8 / 0.92) 100%),
    radial-gradient(ellipse at 70% 20%, rgb(201 90 30 / 0.22) 0%, transparent 55%);
  pointer-events: none;
}
.aa-vr-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding: 7rem 1.5rem 3.5rem;
  box-sizing: border-box;
}
.aa-vr-hero h1.aa-title-stack,
.aa-ct-hero h1.aa-title-stack,
.aa-ev-hero h1.aa-title-stack {
  font-size: clamp(2.35rem, 5.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-shadow: 0 4px 18px rgb(0 0 0 / 0.55);
  margin: 0;
}
.aa-vr-hero-lead {
  margin: 1.1rem 0 0;
  max-width: 38rem;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.65;
  color: rgb(240 234 224 / 0.92);
  font-weight: 300;
}
.aa-vr-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.75rem 0 1.5rem;
  max-width: 28rem;
}
@media (min-width: 640px) {
  .aa-vr-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 36rem;
  }
}
.aa-vr-stat {
  border: 1px solid rgb(201 90 30 / 0.4);
  background: rgb(12 10 8 / 0.55);
  padding: 0.75rem 0.85rem;
  text-align: center;
}
.aa-vr-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  line-height: 1.1;
}
.aa-vr-stat span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(240 234 224 / 0.7);
  font-family: var(--font-display);
}
/* on-dark secondary: same reverse-primary motion; slightly deeper ghost
   fill so the translucent rest state reads on dark photo heroes */
.aa-btn-outline-on-dark,
a.aa-btn-outline-on-dark {
  --aa-btn-fill-ghost: rgb(12 10 8 / 0.62);
  color: #ffffff !important;
  border: 1px solid var(--aa-btn-stroke, #c95a1e) !important;
}

.aa-vr-intro {
  padding-block: 4rem;
}
.aa-vr-intro-grid {
  display: grid;
  gap: 1.75rem 3rem;
  align-items: end;
}
@media (min-width: 900px) {
  .aa-vr-intro-grid {
    grid-template-columns: 1.1fr 1fr;
  }
}
.aa-vr-intro-body {
  color: rgb(240 234 224 / 0.9) !important;
  max-width: none !important;
  margin-top: 0.75rem !important;
}

.aa-vr-spaces {
  padding: 1rem 0 4.5rem;
  background:
    radial-gradient(ellipse at 10% 0%, rgb(201 90 30 / 0.08) 0%, transparent 45%),
    var(--color-surface, #0c0a08);
}
.aa-vr-spaces-head {
  margin-bottom: 2.25rem;
  max-width: 36rem;
}
.aa-vr-spaces-head .aa-title {
  margin-top: 0.35rem;
}

.aa-vr-cards {
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}
.aa-vr-card {
  display: grid;
  gap: 0;
  border: 1px solid rgb(201 90 30 / 0.32);
  background: rgb(255 255 255 / 0.02);
  overflow: hidden;
}
@media (min-width: 900px) {
  .aa-vr-card {
    grid-template-columns: 1.05fr 1fr;
    min-height: 22rem;
  }
  .aa-vr-card.is-flip .aa-vr-card-media { order: 2; }
  .aa-vr-card.is-flip .aa-vr-card-body { order: 1; }
}
.aa-vr-card-media {
  position: relative;
  min-height: 16rem;
  background: #1a1410;
}
.aa-vr-card-media .aa-lb-trigger {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 16rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.aa-vr-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 16rem;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.aa-vr-card:hover .aa-vr-card-media img {
  transform: scale(1.04);
}
.aa-vr-card-num {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-cream);
  text-shadow: 0 4px 18px rgb(0 0 0 / 0.65);
  line-height: 1;
  pointer-events: none;
}
.aa-vr-card-body {
  padding: 1.75rem 1.5rem 1.85rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  box-sizing: border-box;
}
.aa-vr-card-title {
  margin: 0.15rem 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-cream);
  line-height: 1.15;
}
.aa-vr-card-blurb {
  margin: 0 0 0.85rem !important;
  max-width: 34rem !important;
  color: rgb(240 234 224 / 0.9) !important;
}
.aa-vr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.15rem;
}
.aa-vr-chip {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid rgb(201 90 30 / 0.45);
  padding: 0.35rem 0.55rem;
  background: rgb(201 90 30 / 0.1);
}
.aa-vr-card .aa-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.25rem;
}
.aa-vr-card .btn-primary,
.aa-vr-card .aa-btn-outline {
  padding: 0.7rem 1.2rem !important;
  font-size: 0.78rem !important;
}

.aa-vr-gallery {
  padding: 3.5rem 0 4.5rem;
  border-top: 1px solid rgb(201 90 30 / 0.2);
}
.aa-vr-gallery-head {
  margin-bottom: 1.5rem;
  max-width: 32rem;
}
.aa-vr-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
@media (min-width: 800px) {
  .aa-vr-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
}
.aa-vr-gal-item {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid rgb(201 90 30 / 0.25);
  background: #1a1410;
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.aa-vr-gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease, filter 0.3s ease;
  filter: saturate(0.95) contrast(1.02);
}
.aa-vr-gal-item:hover img {
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.05);
}

.aa-vr-cta {
  position: relative;
  background: #0c0a08 center / cover no-repeat;
  color: var(--color-cream);
  overflow: hidden;
}
.aa-vr-cta-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgb(12 10 8 / 0.92) 0%, rgb(12 10 8 / 0.72) 48%, rgb(12 10 8 / 0.55) 100%);
  pointer-events: none;
}
.aa-vr-cta-inner {
  position: relative;
  z-index: 1;
  padding-block: 4.5rem;
  max-width: 40rem;
}
.aa-vr-cta-lead {
  margin: 1rem 0 1.5rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgb(240 234 224 / 0.9);
}
.aa-vr-cta .aa-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.aa-vr-cms-edit {
  opacity: 0.85;
  border-top: 1px dashed rgb(201 90 30 / 0.35);
}

@media (max-width: 640px) {
  .aa-vr-hero {
    min-height: min(78vh, 34rem);
  }
  .aa-vr-hero-inner {
    padding: 5.5rem 1.15rem 2.5rem;
  }
  .aa-vr-hero .aa-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .aa-vr-hero .aa-cta-row > a {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .aa-vr-card-body {
    padding: 1.35rem 1.15rem 1.5rem;
  }
  .aa-vr-card .aa-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .aa-vr-card .aa-cta-row > a {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .aa-vr-intro {
    padding-block: 2.75rem;
  }
  .aa-vr-spaces {
    padding: 0.5rem 0 3rem;
  }
  .aa-vr-gallery {
    padding: 2.5rem 0 3.25rem;
  }
  .aa-vr-cta-inner {
    padding-block: 3.25rem;
  }
  .aa-vr-cta .aa-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .aa-vr-cta .aa-cta-row > a {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .aa-vr-stat b {
    font-size: 1.4rem;
  }
}

/* ── Events calendar page ─────────────────────────────────────────── */
.aa-ev-cal {
  padding: 1rem 0 4.5rem;
  background:
    radial-gradient(ellipse at 80% 0%, rgb(201 90 30 / 0.08) 0%, transparent 45%),
    var(--color-surface, #0c0a08);
}
.aa-ev-cal-head {
  margin-bottom: 1.75rem;
  max-width: 36rem;
}
.aa-ev-cal-head .aa-title { margin-top: 0.35rem; }
.aa-ev-cal-lead {
  margin-top: 0.85rem !important;
  max-width: 36rem !important;
  color: rgb(240 234 224 / 0.9) !important;
}
.aa-ev-cal-panel {
  border: 1px solid rgb(201 90 30 / 0.35);
  background: rgb(255 255 255 / 0.03);
  padding: 1.15rem 1rem 1.5rem;
}
.aa-ev-cal-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  margin-bottom: 1.15rem;
}
.aa-ev-cal-nav h3 {
  margin: 0;
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cream);
}
.aa-ev-cal-dir {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  border: 1px solid rgb(201 90 30 / 0.45);
  padding: 0.4rem 0.7rem;
}
.aa-ev-cal-dir:hover { background: rgb(201 90 30 / 0.15); color: #fff; }
.aa-ev-cal-today {
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(240 234 224 / 0.7);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.aa-ev-dow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.2rem;
  margin-bottom: 0.3rem;
}
.aa-ev-dow span {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(240 234 224 / 0.55);
  text-align: center;
  padding: 0.25rem 0;
}
.aa-ev-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.2rem;
}
.aa-ev-cell {
  min-height: 2.8rem;
  border: 1px solid rgb(201 90 30 / 0.18);
  background: rgb(12 10 8 / 0.45);
  padding: 0.3rem 0.28rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.aa-ev-cell.is-pad { border-color: transparent; background: transparent; }
.aa-ev-cell.is-today {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.aa-ev-cell.has-events { background: rgb(201 90 30 / 0.08); }
.aa-ev-num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgb(240 234 224 / 0.85);
  line-height: 1;
}
.aa-ev-dots {
  display: flex;
  gap: 0.18rem;
  margin-top: auto;
}
.aa-ev-dots i {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 0;
  background: var(--color-accent);
  display: block;
}
.aa-ev-dots i.kind-league { background: var(--color-accent); }
.aa-ev-dots i.kind-tournament { background: #f0eae0; }
.aa-ev-dots i.kind-live-music { background: #c95a1e; }
.aa-ev-dots i.kind-public { background: #9a8572; }
.aa-ev-dots i.kind-other { background: #6e5c4e; }
.aa-ev-cell-events { display: none; }
.aa-ev-dot-label {
  display: block;
  font-size: 0.62rem;
  line-height: 1.25;
  color: rgb(240 234 224 / 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aa-ev-more {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}
@media (min-width: 800px) {
  .aa-ev-cell { min-height: 5.6rem; }
  .aa-ev-dots { display: none; }
  .aa-ev-cell-events { display: flex; flex-direction: column; gap: 0.12rem; }
}
.aa-ev-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.aa-ev-item {
  position: relative;
  border: 1px solid rgb(201 90 30 / 0.32);
  background: rgb(255 255 255 / 0.03);
  padding: 1rem 1.1rem 1.1rem;
}
.aa-ev-item.is-draft { border-style: dashed; opacity: 0.85; }
.aa-ev-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.7rem;
  margin-bottom: 0.35rem;
}
.aa-ev-chip {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid rgb(201 90 30 / 0.45);
  padding: 0.22rem 0.45rem;
  background: rgb(201 90 30 / 0.1);
}
.aa-ev-item-when {
  font-size: 0.88rem;
  color: rgb(240 234 224 / 0.75);
}
.aa-ev-draft {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a8572;
}
.aa-ev-item h3 {
  margin: 0.15rem 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-cream);
}
.aa-ev-item-loc {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  color: rgb(240 234 224 / 0.7);
}
.aa-ev-item-desc {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  color: rgb(240 234 224 / 0.88);
}
.aa-ev-item-link {
  display: inline-block;
  margin-top: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.aa-ev-empty {
  margin: 1.35rem 0 0;
  color: rgb(240 234 224 / 0.72);
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: 36rem;
}
.aa-ev-placeholder { opacity: 0.55; font-style: italic; }
.aa-ev-edit {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.65rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgb(201 90 30 / 0.35);
}
body.zk-editing .aa-ev-edit { display: grid; }
body.zk-editing .aa-ev-item { padding-right: 3.25rem; }
body.zk-editing .aa-ev-cal .zk-eadd {
  border-color: rgb(201 90 30 / 0.55);
  color: var(--color-cream);
  display: inline-flex;
}
.aa-ev-edit label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(240 234 224 / 0.7);
}
.aa-ev-edit input,
.aa-ev-edit select {
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: #1a1410;
  background: #f7f0e6;
  border: 1px solid rgb(201 90 30 / 0.45);
  padding: 0.4rem 0.5rem;
}
.aa-ev-edit .aa-ev-check {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  text-transform: uppercase;
}
.aa-ev-edit .aa-ev-check input { width: auto; }

.aa-ev-watl-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f0eae0;
  padding: 0.65rem 0.85rem;
  margin-bottom: 1rem;
  max-width: 12rem;
}
.aa-ev-watl-mark img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 4.75rem;
  object-fit: contain;
}
.aa-ev-gallery-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 640px) {
  .aa-ev-cal { padding: 0.5rem 0 3rem; }
  .aa-ev-cal-panel { padding: 0.85rem 0.6rem 1.15rem; }
  .aa-ev-cal-dir span { display: none; }
  .aa-ev-item { padding: 0.9rem 0.85rem 1rem; }
}

/* ── 360° Walk-thru (tour is the hero) ─────────────────────────────── */
.aa-walk-tour-hero {
  position: relative;
  background: #0c0a08;
  /* Sit under the sticky header; tour fills the first screen */
  margin-top: 0;
}
.aa-walk-frame-wrap {
  position: relative;
  width: 100%;
  background: #0c0a08;
  overflow: hidden;
}
/* Full-bleed hero player — primary experience on the page */
.aa-walk-frame-wrap--hero {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgb(201 90 30 / 0.28);
  /* Fill remaining viewport under sticky header (utility strip + main row) */
  height: calc(100svh - 10rem);
  height: calc(100dvh - 10rem);
  min-height: 22rem;
  max-height: none;
  box-shadow: none;
}
/* Narrow: utility strip hides — shorter header */
@media (max-width: 1099.98px) {
  .aa-walk-frame-wrap--hero {
    height: calc(100svh - 4.75rem);
    height: calc(100dvh - 4.75rem);
  }
}
.aa-walk-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0c0a08;
}
/* Copy + CTAs live under the tour */
.aa-walk-below {
  background: #0c0a08;
  color: var(--color-cream);
  padding: 3.5rem 0 4.5rem;
  border-top: 0;
}
.aa-walk-below-inner {
  max-width: 48rem;
  text-align: left;
}
.aa-walk-below .aa-kicker {
  margin-bottom: 0.35rem;
  color: var(--color-primary);
}
.aa-walk-below .aa-title {
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.05;
}
.aa-walk-below .aa-title .aa-accent {
  color: var(--color-primary);
}
.aa-walk-below .aa-title-stack {
  gap: 0.12rem;
}
.aa-walk-lead {
  margin-top: 1.25rem !important;
  max-width: 38rem;
  color: rgb(240 234 224 / 0.9) !important;
  font-weight: 300;
  line-height: 1.7;
  font-size: 1.05rem;
}
.aa-walk-below .aa-cta-row {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}
.aa-walk-hint {
  margin: 1.5rem 0 0;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: rgb(240 234 224 / 0.62);
  max-width: 36rem;
  line-height: 1.55;
}
@media (max-width: 960px) {
  .aa-walk-frame-wrap--hero {
    height: calc(100svh - 3.75rem);
    height: calc(100dvh - 3.75rem);
    min-height: 20rem;
  }
  .aa-walk-below {
    padding: 2.75rem 0 3.5rem;
  }
}
@media (max-width: 640px) {
  .aa-walk-frame-wrap--hero {
    /* Phones: still dominant, leave a little room so copy peeks */
    height: min(78svh, 36rem);
    min-height: 18rem;
  }
  .aa-walk-below .aa-cta-row > a {
    flex: 1 1 100%;
    text-align: center;
  }
  .aa-walk-hint {
    font-size: 0.8rem;
  }
}

/* ── Contact page (custom) ─────────────────────────────────────────── */
.aa-contact-page {
  color: var(--color-cream);
}

/* Hero */
.aa-ct-hero {
  position: relative;
  min-height: min(72vh, 36rem);
  display: flex;
  align-items: flex-end;
  /* Split bg props so inline background-position (heroFocus) wins cleanly */
  background-color: #0c0a08;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  color: var(--color-cream);
  overflow: hidden;
}
.aa-ct-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgb(12 10 8 / 0.92) 0%, rgb(12 10 8 / 0.72) 45%, rgb(12 10 8 / 0.45) 100%),
    linear-gradient(to top, rgb(12 10 8 / 0.9) 0%, transparent 55%);
  pointer-events: none;
}
.aa-ct-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 7rem 1.5rem 3.25rem;
  box-sizing: border-box;
}
.aa-ct-hero-lead {
  margin: 1rem 0 0;
  max-width: 36rem;
  font-size: clamp(1.02rem, 1.8vw, 1.15rem);
  line-height: 1.65;
  color: rgb(240 234 224 / 0.9);
}
.aa-ct-hero .aa-cta-row {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Main layout */
.aa-ct-main {
  padding: 3.5rem 0 4rem;
  background: #0c0a08;
  border-top: 1px solid rgb(201 90 30 / 0.2);
}
.aa-ct-main-inner {
  max-width: 72rem;
  /* side padding comes from .aa-section-inner */
}
.aa-ct-layout {
  display: grid;
  gap: 2.5rem;
  min-width: 0; /* prevent grid blowout on mobile */
}
.aa-ct-aside,
.aa-ct-form-panel {
  min-width: 0;
}
@media (min-width: 960px) {
  .aa-ct-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
    gap: 2.75rem;
    align-items: start;
  }
}

/* Aside */
.aa-ct-aside-title {
  margin: 0.35rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--color-cream);
}
.aa-ct-aside-body {
  margin: 0 0 1.25rem !important;
  max-width: 32rem !important;
  color: rgb(240 234 224 / 0.88) !important;
}
.aa-ct-cms {
  margin: 0 0 1.5rem;
  max-width: 34rem;
  font-size: 0.98rem;
  color: rgb(240 234 224 / 0.82);
}
.aa-ct-cms p { margin: 0 0 0.85rem; }

.aa-ct-cards {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
@media (min-width: 560px) and (max-width: 959.98px) {
  .aa-ct-cards {
    grid-template-columns: 1fr 1fr;
  }
}
.aa-ct-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  row-gap: 0.15rem;
  align-items: start;
  padding: 1rem 1.05rem;
  border: 1px solid rgb(201 90 30 / 0.32);
  background: rgb(255 255 255 / 0.03);
  text-decoration: none !important;
  color: inherit;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
a.aa-ct-card:hover {
  border-color: rgb(201 90 30 / 0.65);
  background: rgb(201 90 30 / 0.08);
  transform: translateY(-2px);
}
.aa-ct-card-icon {
  grid-row: 1 / span 2;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: rgb(201 90 30 / 0.16);
  color: var(--color-accent);
  border: 1px solid rgb(201 90 30 / 0.35);
}
.aa-ct-card-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted, #9a8572);
}
.aa-ct-card-value {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-cream);
  line-height: 1.35;
  word-break: break-word;
}
.aa-ct-hours {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgb(240 234 224 / 0.88);
  line-height: 1.45;
}
.aa-ct-hours li {
  display: block;
}
.aa-ct-card-value .aa-ct-hours {
  margin-top: 0.15rem;
}

/* Sits under the walk-in hours: events can be booked outside them. Warm accent
   so it reads as an invitation rather than more fine print. */
.aa-ct-hours-note {
  margin: 0.55rem 0 0;
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--color-accent);
}

.aa-ct-quick {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(201 90 30 / 0.22);
}
.aa-ct-quick-label {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted, #9a8572);
  font-weight: 600;
}
.aa-ct-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
}
.aa-ct-quick-links a {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px solid rgb(201 90 30 / 0.35);
  padding-bottom: 0.1rem;
  transition: color 150ms ease, border-color 150ms ease;
}
.aa-ct-quick-links a:hover {
  color: #f0a060;
  border-color: #f0a060;
}

/* Form panel */
.aa-ct-form-panel {
  border: 1px solid rgb(201 90 30 / 0.4);
  background:
    linear-gradient(165deg, rgb(255 255 255 / 0.05) 0%, rgb(255 255 255 / 0.02) 100%),
    #14100c;
  padding: 1.75rem 1.5rem 1.85rem;
  box-shadow: 0 24px 50px rgb(0 0 0 / 0.35);
  position: relative;
}
.aa-ct-form-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.aa-ct-form-head {
  margin-bottom: 1.35rem;
}
.aa-ct-form-title {
  margin: 0.3rem 0 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-cream);
}
.aa-ct-form-lead {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgb(240 234 224 / 0.82);
  max-width: 28rem;
}

.aa-ct-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.aa-ct-form-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 560px) {
  .aa-ct-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.aa-ct-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(240 234 224 / 0.72);
}
.aa-ct-opt {
  opacity: 0.55;
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85em;
}
.aa-ct-form .input,
.aa-ct-form input,
.aa-ct-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgb(0 0 0 / 0.28) !important;
  border: 1px solid rgb(201 90 30 / 0.35) !important;
  color: var(--color-cream) !important;
  border-radius: 0 !important;
  padding: 0.75rem 0.9rem !important;
  font-size: 1rem !important;
  line-height: 1.4;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.aa-ct-form .input:focus,
.aa-ct-form input:focus,
.aa-ct-form textarea:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgb(201 90 30 / 0.22);
}
.aa-ct-form textarea {
  min-height: 9rem;
  resize: vertical;
}
.aa-ct-form .zk-field-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: rgb(240 234 224 / 0.55);
}
.aa-ct-submit {
  width: 100%;
  margin-top: 0.35rem;
}
.aa-ct-form-note {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: rgb(240 234 224 / 0.55);
  text-align: center;
  line-height: 1.45;
}
.aa-ct-form-error,
.aa-ct-form .zk-form-error {
  padding: 0.75rem 0.9rem;
  border: 1px solid rgb(220 80 60 / 0.55);
  background: rgb(120 30 20 / 0.35);
  color: #ffd8d0;
  font-size: 0.92rem;
}
.aa-ct-turnstile {
  margin-top: 0.25rem;
}

/* Thanks (inline after htmx submit) */
.aa-ct-thanks {
  text-align: center;
  padding: 1.5rem 0.5rem 0.75rem;
}
.aa-ct-thanks-icon {
  display: flex;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}
.aa-ct-thanks-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cream);
}
.aa-ct-thanks-body {
  margin: 0.75rem auto 0;
  max-width: 26rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgb(240 234 224 / 0.88);
}
.aa-ct-thanks-body a {
  color: var(--color-accent);
  font-weight: 600;
}
.aa-ct-thanks-actions {
  justify-content: center;
  margin-top: 1.5rem;
}
.aa-ct-thanks-page {
  min-height: min(70vh, 32rem);
  display: grid;
  place-items: center;
  padding: 5rem 1.25rem 4rem;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgb(201 90 30 / 0.18), transparent 70%),
    #0c0a08;
}
.aa-ct-thanks-standalone {
  max-width: 36rem;
  padding: 2.5rem 1.75rem;
  border: 1px solid rgb(201 90 30 / 0.35);
  background: rgb(255 255 255 / 0.03);
}

/* Map band */
.aa-ct-map-band {
  border-top: 1px solid rgb(201 90 30 / 0.2);
  background: #100d0a;
  padding-top: 3rem;
}
.aa-ct-map-head {
  /* paired with .aa-section-inner → side padding already applied */
  max-width: 40rem;
  margin-inline: 0;
  margin-bottom: 1.75rem;
  width: 100%;
}
.aa-ct-map-lead {
  margin: 0.75rem 0 0 !important;
  color: rgb(240 234 224 / 0.88) !important;
}
.aa-ct-map-head .aa-cta-row {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.aa-ct-map {
  position: relative;
  width: 100%;
  height: clamp(18rem, 48vw, 28rem);
  border-top: 1px solid rgb(201 90 30 / 0.28);
  background: #1a1410;
  overflow: hidden;
}
.aa-ct-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.12) contrast(1.03) saturate(0.95);
}

@media (max-width: 640px) {
  .aa-header-main > a:first-child {
    transform: translate(0.1rem, -0.2rem);
  }
  body > header a img,
  .aa-header-logo-anim,
  .aa-header-main .aa-header-logo-anim {
    height: 4.15rem;
    max-width: 6.75rem;
  }
  .aa-ct-hero {
    min-height: min(68vh, 28rem);
  }
  .aa-ct-hero-inner {
    padding: 5.5rem 1.15rem 2.5rem;
  }
  .aa-ct-hero .aa-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .aa-ct-hero .aa-cta-row > a {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .aa-ct-main {
    padding: 2.5rem 0 3rem;
  }
  .aa-ct-form-panel {
    padding: 1.35rem 1.1rem 1.5rem;
  }
  .aa-ct-form-grid {
    grid-template-columns: 1fr; /* stack name/email on phones */
  }
  .aa-ct-cards {
    grid-template-columns: 1fr;
  }
  .aa-ct-card {
    /* comfortable touch targets */
    min-height: 4.25rem;
    padding: 0.95rem 1rem;
  }
  .aa-ct-map-band {
    padding-top: 2.25rem;
  }
  .aa-ct-map-head {
    margin-bottom: 1.25rem;
  }
  .aa-ct-map-head .aa-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .aa-ct-map-head .aa-cta-row > a {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .aa-ct-map {
    height: clamp(16rem, 62vw, 22rem);
  }
  .aa-ct-thanks-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .aa-ct-thanks-actions > a {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

/* Edit mode: unclip badges on contact cards / form */
body.zk-editing .aa-ct-form-panel,
body.zk-editing .aa-ct-card,
body.zk-editing .aa-ct-hero {
  overflow: visible;
}
body.zk-editing .aa-ct-hero {
  /* keep photo crop on media layer only */
}
body.zk-editing .aa-ct-hero-scrim {
  pointer-events: none;
}

/* ── entrance reveals (Figma / Chris review) ───────────────────────────
   JS toggles .is-in via IntersectionObserver. Without these rules, markup
   had aa-reveal classes but nothing moved. */
.aa-reveal {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--aa-d, 0) * 70ms);
}
.aa-reveal-up { transform: translate3d(0, 1.75rem, 0); }
.aa-reveal-left { transform: translate3d(-1.75rem, 0, 0); }
.aa-reveal-right { transform: translate3d(1.75rem, 0, 0); }
.aa-reveal-fade { transform: none; }
.aa-reveal-scale { transform: scale(0.92); }
.aa-reveal.is-in {
  opacity: 1;
  transform: none;
}
/* data-aa-d="N" stagger */
.aa-reveal[data-aa-d="0"] { --aa-d: 0; }
.aa-reveal[data-aa-d="1"] { --aa-d: 1; }
.aa-reveal[data-aa-d="2"] { --aa-d: 2; }
.aa-reveal[data-aa-d="3"] { --aa-d: 3; }
.aa-reveal[data-aa-d="4"] { --aa-d: 4; }
.aa-reveal[data-aa-d="5"] { --aa-d: 5; }
.aa-reveal[data-aa-d="6"] { --aa-d: 6; }
.aa-reveal[data-aa-d="7"] { --aa-d: 7; }
.aa-reveal[data-aa-d="8"] { --aa-d: 8; }

/* Hero intro logo splash (session once) */
.aa-intro {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: #0c0a08;
  pointer-events: none;
  opacity: 1;
  transition: opacity 480ms ease 180ms;
}
.aa-intro.is-done {
  opacity: 0;
  visibility: hidden;
  display: none;
}
.aa-intro-logo {
  width: min(14rem, 46vw);
  height: auto;
  opacity: 0;
  transform: scale(0.82);
  filter: drop-shadow(0 12px 40px rgb(201 90 30 / 0.35));
  animation: aa-intro-logo 1.05s cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards;
}
@keyframes aa-intro-logo {
  0% { opacity: 0; transform: scale(0.78); }
  55% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
body.aa-intro-active .aa-hero-inner {
  opacity: 0;
}
body.aa-intro-active .aa-hero-inner.is-ready {
  opacity: 1;
  transition: opacity 600ms ease 40ms;
}

/* Atmosphere photo slideshow (lightbox-carousel + editable images) */
.aa-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1a1612;
}
.aa-slideshow-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  opacity: 0;
  transition: opacity 900ms ease;
  /* pointer-events off for inactive so only the visible slide is clickable */
  pointer-events: none;
}
.aa-slideshow-slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}
.aa-slideshow-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* clicks hit the button for lightbox/edit */
}
/* ── video slide in the atmosphere gallery ─────────────────────────────
   A real <video controls>, so fullscreen comes from the browser rather than
   anything we have to build. The slide is a <div>, not the usual <button>,
   because a button wrapping video controls swallows the play/scrub clicks. */
.aa-slideshow-video {
  cursor: default;
  background: #0c0a08;
}
.aa-slide-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0c0a08;
}
/* Opens the clip in the lightbox carousel with the photos. Sits clear of the
   native controls (bottom) and the dots (bottom-centre). */
.aa-slide-expand {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: rgb(12 10 8 / 0.62);
  color: var(--color-cream);
  cursor: zoom-in;
  opacity: 0.85;
  transition: opacity 150ms ease, background-color 150ms ease;
}
.aa-slide-expand:hover,
.aa-slide-expand:focus-visible {
  opacity: 1;
  background: rgb(12 10 8 / 0.85);
}

/* The video's native control bar owns the bottom edge while it is the active
   slide — lift the dots clear of it so they don't sit on the scrubber.
   (The codebase already relies on :has() for the home-page header.) */
.aa-slideshow:has(.aa-slideshow-video.is-active) .aa-slideshow-dots {
  bottom: 3.1rem;
}

.aa-slideshow-dots {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0.75rem;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  pointer-events: none;
}
.aa-slideshow-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: rgb(240 234 224 / 0.35);
}
.aa-slideshow-dot.is-on {
  background: var(--color-accent);
}
/* Edit mode: keep every slide reachable for replace (stack peeks via outline) */
body.zk-editing .aa-slideshow {
  overflow: visible;
}
body.zk-editing .aa-slideshow-slide {
  /* Show all frames as a mini grid so each is replaceable without waiting */
  position: relative;
  inset: auto;
  opacity: 1;
  pointer-events: auto;
  width: calc(50% - 0.25rem);
  height: auto;
  aspect-ratio: 4 / 3;
  display: inline-block;
  margin: 0.15rem;
  vertical-align: top;
  outline: 1px dashed rgb(201 90 30 / 0.45);
  outline-offset: 2px;
  cursor: pointer;
  transition: outline-color 150ms ease;
}
body.zk-editing .aa-slideshow-slide:hover {
  outline-color: var(--color-primary);
  outline-style: solid;
}
body.zk-editing .aa-slideshow-slide img {
  pointer-events: auto; /* meta-img HUD targets the <img> */
}
body.zk-editing .aa-slideshow-dots {
  display: none;
}
body.zk-editing .aa-atmosphere-photo {
  overflow: visible;
}

/* Brand “A” mark above contact */
.aa-brand-mark {
  display: flex;
  justify-content: center;
  margin: 0 auto 1.75rem;
  overflow: hidden;
}
.aa-brand-mark-inner {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgb(201 90 30 / 0.55);
  text-transform: uppercase;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 900ms cubic-bezier(0.16, 1, 0.3, 1),
    color 700ms ease;
}
.aa-brand-mark.is-in .aa-brand-mark-inner {
  opacity: 1;
  transform: scale(1);
  letter-spacing: 0.28em;
  color: rgb(201 90 30 / 0.22);
  -webkit-text-stroke: 1px rgb(201 90 30 / 0.45);
}

/* Decorative axes strip under products */
.aa-axes-strip {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  opacity: 0.85;
}
.aa-axes-strip img {
  width: min(28rem, 88vw);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgb(0 0 0 / 0.4));
}

/* Anvil footer — Figma 203:1004 proportions + Oswald type */
.aa-footer-inner {
  max-width: 75rem;
  margin-inline: auto;
  padding: 4rem 2rem 3.5rem;
  display: grid;
  /* Logo | Explore (2-col links) | Contact — slight air after logo, not pushed to far right */
  grid-template-columns: minmax(10rem, 13rem) minmax(18rem, 1.25fr) minmax(13rem, 16.5rem);
  gap: 2.75rem clamp(3.25rem, 5.5vw, 5.5rem);
  align-items: start;
  box-sizing: border-box;
}
.aa-footer-brand {
  display: flex;
  align-items: flex-start;
  padding-top: 0.15rem;
}
.aa-footer-explore {
  /* nudge Explore right of the logo without packing it against Contact */
  padding-left: clamp(2rem, 4.5vw, 4rem);
}
/* Large stacked wordmark — Figma-scale, not a tiny header chip */
.aa-footer-logo {
  display: block;
  height: auto !important;
  width: 100% !important;
  max-width: 12.75rem;
  max-height: 11.5rem;
  object-fit: contain;
  object-position: left top;
  filter: none !important;
  opacity: 1 !important;
}
/* EXPLORE / CONTACT US — orange Oswald caps, open tracking */
.aa-footer-heading {
  margin: 0 0 1.35rem;
  font-family: var(--font-display) !important;
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c95a1e;
  line-height: 1.15;
}
/* Explore links: two columns, Oswald caps */
.aa-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.75rem, 4vw, 3.25rem);
  row-gap: 0.7rem;
  font-family: var(--font-display) !important;
  font-size: 1rem; /* 16px */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.aa-footer-links a {
  color: rgb(240 234 224 / 0.9) !important;
  font-family: var(--font-display) !important;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.aa-footer-links a:hover {
  color: #fff !important;
}
/* Contact body — same Oswald caps language as Figma */
.aa-footer-contact-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: var(--font-display) !important;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 1.6;
  text-transform: uppercase;
  color: rgb(240 234 224 / 0.88);
}
.aa-footer-hours {
  display: block;
  margin: 0;
  font-family: var(--font-display) !important;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 1.6;
  text-transform: uppercase;
  color: rgb(240 234 224 / 0.88);
}
.aa-footer-line {
  margin: 0;
  font-family: var(--font-display) !important;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.aa-footer-line a {
  color: rgb(240 234 224 / 0.9) !important;
  font-family: var(--font-display) !important;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.aa-footer-line a:hover {
  color: #fff !important;
}
.aa-footer-address {
  margin: 0;
  font-family: var(--font-display) !important;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 1.6;
  text-transform: uppercase;
  color: rgb(240 234 224 / 0.85);
}
.aa-footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  margin-top: 1.25rem;
  font-family: var(--font-display) !important;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.aa-footer-socials a {
  color: rgb(240 234 224 / 0.65) !important;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.aa-footer-bar {
  border-top: 1px solid rgb(201 90 30 / 0.16) !important;
  background: rgb(0 0 0 / 0.4);
}
.aa-footer-bar-inner {
  max-width: 75rem;
  margin-inline: auto;
  padding: 1.15rem 2rem;
  font-family: var(--font-display) !important;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(240 234 224 / 0.45);
  box-sizing: border-box;
  text-align: center;
}
.aa-footer-bar-inner a {
  color: rgb(240 234 224 / 0.5) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.aa-footer-bar-inner a:hover {
  color: #fff !important;
}
.aa-footer-bar-sep {
  opacity: 0.4;
  margin-inline: 0.2rem;
}
@media (max-width: 960px) {
  .aa-footer-inner {
    grid-template-columns: minmax(8rem, 11rem) 1fr;
    gap: 2rem 2.25rem;
    padding: 3.25rem 1.35rem 2.75rem;
  }
  .aa-footer-explore {
    padding-left: 0;
  }
  .aa-footer-contact {
    grid-column: 1 / -1;
    max-width: 22rem;
  }
  .aa-footer-logo {
    max-width: 10.5rem;
    max-height: 9.5rem;
  }
}
@media (max-width: 640px) {
  .aa-footer-inner {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    padding: 2.75rem 1.15rem 2.25rem;
  }
  .aa-footer-explore {
    padding-left: 0;
  }
  .aa-footer-links {
    column-gap: 1.75rem;
    font-size: 0.95rem;
  }
  .aa-footer-heading {
    margin-bottom: 1rem;
  }
  .aa-footer-bar-inner {
    padding-inline: 1.15rem;
  }
}
/* Intro — SVGator logo (no CSS scale keyframes; animation is in the SVG) */
.aa-intro-logo {
  width: min(16rem, 52vw);
  height: auto;
  max-height: 42vh;
  display: block;
  border: 0;
  background: transparent;
  /* SVGator drives motion; soft entrance only */
  opacity: 0;
  animation: aa-intro-fade 0.35s ease 0.05s forwards;
}
@keyframes aa-intro-fade {
  to { opacity: 1; }
}

/* SVGator hosts (Lazy Days pattern: <object type="image/svg+xml">) */
.aa-svgator {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.aa-svgator-obj {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 0;
  background: transparent;
  pointer-events: none; /* host handles hover/click replay */
}
.aa-svgator-game .aa-svgator-obj {
  max-width: min(36rem, 92vw);
  min-height: 3.5rem;
  /* viewBox is 500×85 — keep aspect */
  aspect-ratio: 500 / 85;
}
/* Game icons strip — Contact band (above "Contact Us Today!") */
.aa-contact .aa-game-icons,
.aa-brand-mark.aa-game-icons {
  display: flex;
  justify-content: center;
  margin: 0 auto 1.75rem;
  padding: 0;
  max-width: min(36rem, 92vw);
}
.aa-contact .aa-svgator-game {
  width: 100%;
}
/* Brand mark host for contact-row animations */
.aa-brand-mark {
  display: flex;
  justify-content: center;
  margin: 0 auto 1.5rem;
  overflow: visible;
}
.aa-brand-mark .aa-svgator {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aa-brand-mark.is-in .aa-svgator,
.aa-brand-mark.aa-reveal.is-in .aa-svgator {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .aa-reveal,
  .aa-reveal-up,
  .aa-reveal-left,
  .aa-reveal-right,
  .aa-reveal-scale,
  .aa-intro-logo,
  .aa-brand-mark-inner,
  .aa-slideshow-slide {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .aa-intro { display: none !important; }
}
