/* ============================================================
   Home page section styles
   Source: NYC-Cupola/designs/home/index.html (inline <style>)
   Mirror this file from the design source — do not edit in place
   without updating the source first.
   ============================================================ */

/* Override site.css v1 heading color (--color-navy dark blue) for v2 ink.
   Scoped to <main> so the v1 navbar/footer chrome headings stay untouched
   until Phase 2.5 chrome restructure lands. Remove during Phase 10 token
   consolidation once site.css v1 tokens are dropped. */
main h1, main h2, main h3, main h4, main h5, main h6 {
  color: var(--ink-primary);
}

/* Hero on the home page: video plays behind the Centre 360 header and (when
   present) the notification banner so those two pieces of chrome read as
   translucent overlays on the cinemagraph. The NYC.gov citywide bar stays
   opaque and in-flow at the very top — the hero starts BELOW it.

   Base case (no notification banner): pull up 64px under the sticky header.
   Banner present: pull up extra 46px so the hero also extends behind the
   banner. The `body:has(.notification-banner)` selector makes this
   conditional on the banner actually being rendered, so layout does not
   shift when the banner record is inactive. */
.home-hero {
  min-height: 85vh;
  margin-top: -64px;
  padding-top: calc(64px + var(--space-8, 64px));
}
body:has(.notification-banner) .home-hero {
  margin-top: calc(-1 * (64px + 46px));
  padding-top: calc(64px + 46px + var(--space-8, 64px));
}
.home-hero .hero-content { padding-bottom: var(--space-10); }
.home-hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 260px;
  background: linear-gradient(180deg, transparent 0%, oklch(13% 0.025 268 / 0.7) 55%, var(--surface-base) 100%);
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 768px) {
  .home-hero {
    min-height: calc(100vh - 56px);
    margin-top: -64px;
    padding-top: 80px;
  }
  body:has(.notification-banner) .home-hero {
    margin-top: calc(-1 * (64px + 46px));
    padding-top: calc(64px + 46px + var(--space-4, 16px));
  }
  .home-hero::before { height: 180px; }
}

/* Notification banner uses inline styles for bg + text colors (database-driven),
   so the override here needs !important to take effect. Translucent gold over
   the cinemagraph with a darker theme-appropriate ink for legibility. */
body:has(.home-hero) .notification-banner {
  background: rgba(228, 213, 120, 0.78) !important;
  color: #2c2410 !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%);
          backdrop-filter: blur(8px) saturate(120%);
  position: relative;
  z-index: 30;
}

/* The Centre 360 header is already translucent + blurred from c360.css (.nyc-header).
   It is also sticky with z-index 50, so it naturally floats above the hero.
   The NYC.gov citywide bar stays opaque (default styling in c360.css). */

.stats-band {
  padding: 0;
}
.stats-band .stat-strip { border: 0; }
.stats-band .stat__num { font-size: clamp(36px, 4vw, 52px); line-height: 1; }
.stats-band .stat__label { margin-top: 6px; }

.why { padding: var(--space-10) 0; position: relative; }
.why .section-head { text-align: left; max-width: 720px; }
/* Decorative cluster behind the Why section. Performance notes:
   - Animating opacity ONLY (cheap, GPU-compositable).
   - filter:brightness() is applied STATICALLY at the rest level so it
     doesn't re-rasterize the layer every frame. The original
     animation oscillated brightness 1.25 -> 1.69 inside a 9s loop,
     which forced the GPU to re-paint the whole masked background
     on every frame — same perf class as the Civic Fame rays issue.
   - `contain: paint` + `translateZ(0)` give GPU isolation without
     the permanent texture allocation that `will-change` forces.
   - 14s loop reads as a calmer, almost-imperceptible breath. */
.why__cluster {
  background-image: url("/imgs/swirl-cluster.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.3;
  filter: brightness(1.4);
  animation: why-cluster-breathe 14s ease-in-out infinite;
  contain: paint;
  transform: translateZ(0);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
@keyframes why-cluster-breathe {
  0%, 100% { opacity: 0.26; }
  50%      { opacity: 0.42; }
}
@media (prefers-reduced-motion: reduce) {
  .why__cluster { animation: none; opacity: 0.3; }
}

.why__pair {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-7);
  align-items: stretch;
}
@media (max-width: 900px) {
  .why__pair { grid-template-columns: 1fr; gap: var(--space-6); }
}
.why-card {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  background: transparent;
}
.why-card__media { position: relative; }
.why-card__media .frame-media { aspect-ratio: 16 / 10; }
.why-card--portrait .frame-media { aspect-ratio: 4 / 5; }
.why-card__anchor {
  display: inline-flex; align-items: baseline; gap: 10px;
  margin-top: var(--space-6);
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 1;
  color: var(--gold-accent);
  letter-spacing: 0.01em;
}
.why-card__anchor sub {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-quiet);
  vertical-align: baseline;
  position: static;
}
.why-card__title {
  margin: var(--space-4) 0 var(--space-3);
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-primary);
  max-width: 22ch;
}
.why-card__body {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 56ch;
}
.why-card__landmarks {
  margin-top: var(--space-5);
  list-style: none;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-5);
  row-gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.why-card__landmarks li::before {
  content: "·";
  color: var(--gold-accent);
  margin-right: 10px;
}

.crown {
  position: relative;
  padding: clamp(248px, calc(18vh + 120px), 340px) 0;
  margin: -140px 0;
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
}
.crown::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-mark);
  z-index: 0;
}
.crown__inner { position: relative; z-index: 1; }
/* Civic Fame rays — perf-tuned.
   - Layer trimmed 2800px -> 1800px (~58% less GPU memory; mask fades to
     transparent at 62% radius anyway, so the larger box was wasted area).
   - Dropped the per-frame breathe transform+opacity on the child; it
     compounded with the parent rotate and forced the whole subtree to
     recomposite twice per frame on slower GPUs.
   - Swapped `will-change: transform` for `contain: paint` so the layer
     gets GPU isolation without the permanent texture allocation
     will-change forces, and added `transform: translateZ(0)` as a
     cheap one-time promotion hint.
   - Removed `will-change` from the child entirely; no animation -> no
     reason to keep it on its own compositor layer. */
.crown__rays-spin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1800px;
  height: 1800px;
  margin: -900px 0 0 -900px;
  pointer-events: none;
  transform-origin: 50% 50%;
  z-index: 0;
  animation: crown-rays-spin 300s linear infinite;
  contain: paint;
  transform: translateZ(0);
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, #000 18%, rgba(0,0,0,0.55) 38%, transparent 62%);
          mask-image: radial-gradient(circle at center, #000 0%, #000 18%, rgba(0,0,0,0.55) 38%, transparent 62%);
}
.crown__rays {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  opacity: 0.28;
}
@keyframes crown-rays-spin {
  from { transform: translateZ(0) rotate(0deg); }
  to   { transform: translateZ(0) rotate(360deg); }
}
@media (max-width: 880px) {
  .crown__rays-spin {
    width: 1200px; height: 1200px;
    margin: -600px 0 0 -600px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .crown__rays-spin { animation: none; }
}
.crown__media { z-index: 1; }
.crown__media .frame-a { position: relative; z-index: 1; }
.crown__inner {
  position: relative; z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-9);
  align-items: center;
}
@media (max-width: 880px) {
  .crown__inner { grid-template-columns: 1fr; gap: var(--space-6); }
}
.crown__media .frame-a { width: 100%; }
.crown__media .frame-media { aspect-ratio: 4 / 5; }
.crown__body { max-width: 56ch; }
.crown__inner:hover .crown__media .frame-a .corner,
.crown__inner:focus-within .crown__media .frame-a .corner {
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  opacity: 1;
}
.crown__eyebrow {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-accent);
  padding: 5px 0;
  border-top: 1px solid var(--gold-soft);
  border-bottom: 1px solid var(--gold-soft);
  margin-bottom: var(--space-5);
}
.crown__title {
  margin: 0 0 var(--space-5);
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.crown__body p {
  margin: 0 0 var(--space-4);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Vantage 3D carousel */
.vantage { padding: var(--space-10) 0; }
.vantage__stage-wrap {
  position: relative;
  margin-top: var(--space-7);
  perspective: 1800px;
  perspective-origin: 50% 40%;
}
.vantage__stage {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--cube-z) * -1)) rotateY(0deg);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  --cube-z: 360px;
}
@media (min-width: 720px)  { .vantage__stage { --cube-z: 500px; } }
@media (min-width: 1100px) { .vantage__stage { --cube-z: 640px; } }

.vantage__face {
  position: absolute;
  inset: 0;
  background: var(--surface-mark);
  border: 1px solid var(--gold-faint);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: 50% 50%;
}
.vantage__face[data-angle="0"]   { transform: rotateY(0deg)   translateZ(var(--cube-z)); }
.vantage__face[data-angle="90"]  { transform: rotateY(90deg)  translateZ(var(--cube-z)); }
.vantage__face[data-angle="180"] { transform: rotateY(180deg) translateZ(var(--cube-z)); }
.vantage__face[data-angle="270"] { transform: rotateY(270deg) translateZ(var(--cube-z)); }

.vantage__face img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.18);
  transform-origin: center center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .vantage__face img { transition: none; transform: scale(1.05); }
}
.vantage__corner {
  position: absolute;
  width: 56px; height: 56px;
  border: 1.5px solid var(--gold-accent);
  opacity: 0.55;
  transition: width var(--t-medium), height var(--t-medium), opacity var(--t-medium);
  pointer-events: none;
  z-index: 2;
}
.vantage__corner.tl { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
.vantage__corner.tr { top: 0; right: 0; border-left: 0;  border-bottom: 0; }
.vantage__corner.bl { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.vantage__corner.br { bottom: 0; right: 0; border-left: 0;  border-top: 0; }
.vantage__face:hover .vantage__corner,
.vantage__face:focus-within .vantage__corner,
.vantage__stage-wrap:hover .vantage__face .vantage__corner {
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vantage__corner { transition: none; }
}

.vantage__compass {
  position: absolute;
  top: 22px; right: 24px;
  padding: 6px 12px;
  background: oklch(13% 0.025 268 / 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold-accent);
  text-transform: uppercase;
}
.vantage__placard {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 80%;
  padding: 14px 28px;
  background: oklch(13% 0.025 268 / 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--gold-soft);
  text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
}
.vantage__placard__dir {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--gold-accent);
  text-transform: uppercase;
}
.vantage__placard__rule {
  width: 1px; height: 14px;
  background: var(--gold-soft);
}
.vantage__placard__title {
  margin: 0;
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-primary);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .vantage__placard { padding: 10px 18px; bottom: 18px; gap: 10px; }
  .vantage__placard__title { font-size: 16px; }
}
.vantage__hunt {
  margin: var(--space-6) auto 0;
  max-width: 1280px;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--gold-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.vantage__hunt__copy { max-width: 56ch; }
.vantage__hunt__copy span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--gold-accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.vantage__hunt__copy p {
  margin: 0;
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-primary);
}

.vantage__controls {
  margin: var(--space-6) auto 0;
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.vantage__arrow {
  background: transparent;
  color: var(--ink-primary);
  border: 1px solid var(--gold-soft);
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.vantage__arrow:hover { background: var(--gold-accent); color: var(--surface-base); border-color: var(--gold-accent); }
.vantage__arrow svg { width: 18px; height: 18px; }

.vantage__dots {
  display: flex; gap: 18px; align-items: center;
}
.vantage__dot {
  background: transparent;
  border: 0;
  padding: 10px 2px;
  cursor: pointer;
  color: var(--ink-quiet);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  position: relative;
  transition: color var(--t-fast);
}
.vantage__dot::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: var(--gold-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-medium);
}
.vantage__dot[aria-current="true"] { color: var(--gold-accent); }
.vantage__dot[aria-current="true"]::after { transform: scaleX(1); }
.vantage__dot:hover { color: var(--gold-accent); }

@media (max-width: 640px) {
  /* Arrows stay on the same row; dots collapse to a second row underneath. */
  .vantage__controls {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
  }
  .vantage__dots { order: 2; flex-basis: 100%; justify-content: center; }
  .vantage__compass { top: 14px; right: 16px; }
  /* Touch-swipe hint: prevent native horizontal page-scroll while swiping the
     carousel; JS toggles aria-busy during a swipe gesture. */
  .vantage__stage-wrap { touch-action: pan-y; }
}

@media (prefers-reduced-motion: reduce) {
  .vantage__stage { transition: none; }
  .vantage__face { backface-visibility: visible; }
}

/* Visit timeline - elevated moment cards */
.timeline-band {
  padding: var(--space-10) 0;
  background: linear-gradient(
    to bottom,
    var(--surface-base) 0%,
    var(--surface-mark) 18%,
    var(--surface-mark) 82%,
    var(--surface-base) 100%
  );
  position: relative;
  overflow: hidden;
}
.timeline-band__bg {
  position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.timeline-band__bg.bg-swirl--single svg {
  transform: scale(2.2);
  transform-origin: 50% 50%;
}
@media (max-width: 880px) {
  .timeline-band__bg.bg-swirl--single svg { transform: scale(1.6); }
}
.timeline-band > .page { position: relative; z-index: 1; }
.timeline-band__head { max-width: 720px; }
.timeline-em {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: start;
}
.timeline-em > li { display: flex; }
.timeline-em .em-card {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.timeline-em .em-card .frame-a {
  padding: 14px;
}
.timeline-em .em-card .frame-media {
  aspect-ratio: 5 / 4;
}
.timeline-em .em-card .em-content {
  margin-top: -52px;
  margin-left: var(--space-4);
  margin-right: var(--space-4);
  padding: var(--space-5);
  max-width: calc(100% - var(--space-7));
  background: oklch(10% 0.022 268 / 0.94);
  border-top: 1px solid var(--gold-soft);
}
.timeline-em .em-card-h3 {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-primary);
  margin: 0 0 var(--space-3);
}
/* Keep step 02 image behavior consistent with the other timeline cards */
.timeline-em .em-card[data-delay="1"] .frame-media > img {
  object-fit: cover;
  transform: none;
}

/*.em-card--ascent .frame-media > img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
}*/
.em-card--arrival .frame-media > img {
    object-fit: contain;
}

.timeline-em .em-card-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
}
@media (max-width: 960px) {
  .timeline-em { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
@media (max-width: 640px) {
  .timeline-em { grid-template-columns: 1fr; }
  .timeline-em .em-card .em-content { margin-left: var(--space-3); margin-right: var(--space-3); }
}

.cta-band {
  position: relative;
  padding: var(--space-10) var(--container-px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cta-band .bg-photo {
  transform: scale(1.18) translate3d(0, 0, 0);
  will-change: transform;
  transition: none;
  animation: none;
}
.cta-band__inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .cta-band .bg-photo { transform: scale(1.04) !important; }
}
.cta-band__title {
  margin: 0 0 var(--space-4);
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 64px);
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-primary);
}
.cta-band__body {
  margin: 0 0 var(--space-6);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.info-band { padding: var(--space-10) 0; }

.map-band {
  position: relative;
  padding: var(--space-9) 0 0;
  background: var(--surface-mark);
  border-top: 1px solid var(--hairline);
}
.map-band__head {
  max-width: var(--container-max);
  margin: 0 auto var(--space-7);
  padding: 0 var(--container-px);
}
.map-band__frame {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.map-band__frame img {
  width: 100%; height: auto;
  display: block;
  border-top: 1px solid var(--gold-faint);
}
.map-band__cta {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(20px, 4vw, 48px);
  z-index: 2;
}
@media (max-width: 540px) {
  .map-band__cta { right: 16px; bottom: 14px; }
  /* Mobile: crop the map edges so the central detail reads larger.
     Visual width grows to ~140% of viewport, centered, with overflow hidden
     by the section. Negative margins pull the image past the section padding. */
  .map-band { overflow: hidden; }
  .map-band__frame { margin-left: -20%; margin-right: -20%; width: 140%; }
}
.pull-band { padding: var(--space-10) 0 var(--space-7); }

/* Button consistency guard — every CTA on the home page must read identical:
   flat edges (radius 0), same padding, same letter-spacing, same font size,
   same min-height. Belt-and-suspenders against cached overrides. */
.btn-cta, .btn-ghost, .btn-cta-cyan {
  border-radius: 0 !important;
  padding: 14px 26px !important;
  font-size: 13.5px !important;
  letter-spacing: 1.8px !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.hero-actions { gap: var(--space-6); flex-wrap: wrap; align-items: center; }
.hero-actions .btn-cta,
.hero-actions .btn-ghost {
  min-width: 200px;
}
.btn-ghost {
  border-width: 1.5px !important;
  border-color: var(--gold-accent) !important;
  background: transparent !important;
}
.map-band__cta { min-height: 44px !important; padding: 12px 22px !important; }

/* ============================================================
   Moments section · visitor album above Civic Fame.
   Centered single column; stage holds a fixed square bounding box
   so landscape/portrait morphs do not reflow the page below.
   Overlay panel anchors to the card and alternates left/right.
   ============================================================ */
.moments { padding: var(--space-10) 0; position: relative; }

.moments__head {
  max-width: 720px;
  margin: 0 auto var(--space-7);
  padding: 0 var(--container-px);
  text-align: center;
}
.moments__head .hero-eyebrow { display: inline-block; }
.moments__title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-primary);
  margin: var(--space-3) 0 var(--space-4);
}
.moments__lede {
  margin: 0 auto var(--space-4);
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* Theater: reserves room for the stage AND the panel overhang.
   stage(600) + panel hang(240) + breathing(40) = 880. */
.moments__theater {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* Stage: a square bounding box. Pre-allocated, never changes shape. */
.moments__stage {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

/* Card: morphs inside the stage. Centered via absolute positioning. */
.moments__card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1),
              height 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.moments__card[data-aspect="landscape"] { width: 100%; height: 75%; }
.moments__card[data-aspect="portrait"]  { width: 75%;  height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .moments__card { transition: none; }
}
.moments__card .frame-a {
  position: relative;
  width: 100%;
  height: 100%;
}
.moments__card .frame-media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--surface-mark);
}

/* Photos: stacked, crossfade between active states */
.moments__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.moments__photo.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .moments__photo { transition: none; }
}

/* Progress bar: top edge of the frame, 2px gold-bright fill */
.moments__bar {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: rgb(228 213 120 / 0.14);
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}
.moments__bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold-bright);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.moments__bar-fill.is-running {
  transition: transform 5000ms linear;
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .moments__bar { display: none; }
}

/* Overlay panel: anchored to the card's edge; mirrors to either side.
   25% of the panel overlaps the image, 75% hangs clear. */
.moments__panel {
  --panel-width: 320px;
  --panel-overlap: 80px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--panel-width);
  z-index: 5;
  padding: var(--space-5);
  background: var(--surface-raise);
  border: 1px solid var(--hairline);
  box-shadow: 0 14px 28px oklch(0% 0 0 / 0.32),
              0 2px 6px  oklch(0% 0 0 / 0.18);
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.moments__panel,
.moments__panel[data-side="right"] {
  left: 100%;
  right: auto;
  margin-left: calc(-1 * var(--panel-overlap));
  margin-right: 0;
}
.moments__panel[data-side="left"] {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: calc(-1 * var(--panel-overlap));
}
.moments__panel[data-swap="out"] { opacity: 0; }

.moments__panel-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-accent);
  border-top: 1px solid var(--gold-soft);
  border-bottom: 1px solid var(--gold-soft);
  padding: 4px 0;
  margin-bottom: var(--space-4);
}
.moments__panel-title {
  margin: 0 0 var(--space-3);
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--ink-primary);
}
.moments__panel-body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 28ch;
}
.moments__panel-meta {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--ink-quiet);
  text-transform: uppercase;
}

/* Mobile: panel stops overlapping and stacks below the stage */
@media (max-width: 900px) {
  .moments__panel,
  .moments__panel[data-side="left"],
  .moments__panel[data-side="right"] {
    position: static;
    transform: none;
    left: auto; right: auto;
    margin: var(--space-5) auto 0;
    width: min(320px, 100%);
  }
}