/* ============================================================
   King Of The Wings — Layout
   Navbar, mobile bottom-bar, scroll progress, grids, page shell
   ============================================================ */

/* ============================================================
   Scroll progress bar (top of viewport, fills as page scrolls)
   ============================================================ */

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg,
    var(--color-sunburst-yellow),
    var(--color-sunburst-orange),
    var(--color-wing-red)
  );
  z-index: var(--z-progress);
  /* JS sets transform: scaleX() per scroll — pure composite update,
     no layout/paint. The transform-origin and initial scaleX are set
     in scroll-progress.js so this rule stays presentation-only. */
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  will-change: transform;
}

/* ============================================================
   Navbar (sticky → pill on scroll)
   ============================================================ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-navbar);
  padding-top: var(--space-3);
  transition: padding var(--dur-medium) var(--ease-out);
  pointer-events: none; /* children re-enable */
}

.navbar > * { pointer-events: auto; }

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 14px var(--container-gutter);
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid transparent;
  transition: max-width var(--dur-medium) var(--ease-out),
              padding var(--dur-medium) var(--ease-out),
              background var(--dur-medium) var(--ease-out),
              border-color var(--dur-medium) var(--ease-out),
              box-shadow var(--dur-medium) var(--ease-out),
              backdrop-filter var(--dur-medium) var(--ease-out);
}

.navbar.is-scrolled .navbar-inner {
  max-width: 880px;
  padding: 10px 20px;
  background: rgba(var(--rgb-royal-black), 0.55);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.navbar-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.navbar-logo .logo-mark {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-sunburst);
  border-radius: 50%;
  color: var(--color-royal-black);
  font-family: var(--font-display);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.navbar-logo .logo-img {
  /* Landscape crest (winged crown + KING OF THE WINGS wordmark) — the
     image already includes the wordmark so the separate text is hidden. */
  height: 42px;
  width: auto;
  max-width: 180px;
  border-radius: 0;
  object-fit: contain;
  object-position: left center;
  background: transparent;
  border: 0;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  transition: transform var(--dur-base) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
}

.navbar.is-scrolled .navbar-logo .logo-img {
  height: 36px;
}

.navbar-logo:hover .logo-img {
  filter: drop-shadow(0 0 14px rgba(var(--rgb-sunburst-yellow), 0.55))
          drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  transform: scale(1.02);
}

/* The image now carries the wordmark, so the side-by-side text is
   redundant. Keep the markup in place for accessibility, but hide it. */
.navbar-logo .logo-wordmark {
  display: none;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-links a {
  font-family: var(--font-heading);
  font-size: 1rem;        /* up from 0.875rem for legibility */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.085em; /* widened from 0.04em so the heading face breathes */
  color: var(--text-primary);
  padding: 8px 6px;
  position: relative;
}

.navbar.is-scrolled .navbar-links a {
  font-size: 0.9375rem;   /* slightly smaller once the pill collapses */
  letter-spacing: 0.075em;
}

.navbar-links a:hover {
  color: var(--color-sunburst-orange);
}

.navbar-links a.is-active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 4px;
  right: 4px;
  height: 2px;
  background: var(--color-sunburst-orange);
  border-radius: 2px;
}

.navbar-cta {
  margin-left: var(--space-2);
}

.navbar-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(var(--rgb-cream), 0.06);
  color: var(--text-primary);
}

.navbar-toggle:hover {
  background: rgba(var(--rgb-cream), 0.12);
}

.navbar-toggle .bars,
.navbar-toggle .bars::before,
.navbar-toggle .bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out);
}

.navbar-toggle .bars { position: relative; }
.navbar-toggle .bars::before,
.navbar-toggle .bars::after {
  content: '';
  position: absolute;
  left: 0;
}
.navbar-toggle .bars::before { top: -7px; }
.navbar-toggle .bars::after  { top: 7px; }

@media (max-width: 900px) {
  .navbar-links { display: none; }
  .navbar-toggle { display: inline-flex; }
  .navbar-cta .btn { padding: 10px 18px; font-size: 0.9375rem; min-height: 40px; }
}

/* Mobile drawer */

.navbar-drawer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-navbar) - 1);
  background: rgba(var(--rgb-royal-black), 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  padding: 96px var(--container-gutter) var(--space-12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--dur-base) var(--ease-out),
              visibility var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.navbar-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navbar-drawer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.navbar-drawer a {
  display: block;
  padding: var(--space-3) 0;
  font-family: var(--font-display);
  font-size: 2.25rem;
  color: var(--text-primary);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
}

.navbar-drawer a:hover {
  color: var(--color-sunburst-orange);
}

/* ============================================================
   Mobile bottom action bar (sticky 🛵 Order · 📍 Where · 🎉 Catering)
   ============================================================ */

.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bottom-bar);
  display: none; /* shown by media query below */
  padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: rgba(var(--rgb-royal-black), 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-strong);
  transform: translateY(120%);
  transition: transform var(--dur-medium) var(--ease-out);
}

.mobile-bar.is-visible {
  transform: translateY(0);
}

.mobile-bar-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-2);
  align-items: stretch;
}

.mobile-bar a,
.mobile-bar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 8px 6px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.mobile-bar .mb-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.mobile-bar .mb-order {
  background: var(--bg-cta-primary);
  color: var(--text-on-cta);
  box-shadow: var(--glow-cta);
  font-size: 0.875rem;
}

.mobile-bar .mb-where {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}

.mobile-bar .mb-catering {
  background: transparent;
  color: var(--color-sunburst-orange);
  border: 1px solid rgba(var(--rgb-sunburst-orange), 0.4);
}

.mobile-bar .mb-where:hover,
.mobile-bar .mb-catering:hover {
  background: rgba(var(--rgb-cream), 0.06);
}

@media (max-width: 768px) {
  .mobile-bar { display: block; }
  body.has-mobile-bar {
    /* Pages can opt in to reserve space for the bar */
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

/* ============================================================
   Page layout: spacing for fixed navbar
   ============================================================ */

.page-shell {
  position: relative;
  padding-top: 80px; /* navbar clearance */
}

@media (max-width: 768px) {
  .page-shell { padding-top: 72px; }
}

/* ============================================================
   Hero stub (Phase 1 — refined in Phase 2)
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(80px, 12vw, 140px);
  isolation: isolate;
  min-height: 78vh;
}

.hero-has-wings { min-height: 86vh; }

/* Pinned-scroll variant — wraps the hero in a tall container and pins
   the hero to the viewport top while frames play through. The user
   has to scroll the wrapper height before the hero starts moving with
   the rest of the page, which guarantees a long animation window. */

.hero-pin-wrapper {
  position: relative;
  /* Total wrapper height = 1× hero (100vh) + 1.5× pin scroll (150vh) = 250vh.
     During the 150vh of pin scroll, frames 0→119 play.                  */
  height: 250vh;
  /* Above the next section so the navbar's drop-shadow doesn't paint
     over the sticky hero.                                              */
  z-index: 1;
}

.hero-sticky {
  position: sticky;
  top: 0;
  /* 100dvh = dynamic vp height (accounts for mobile chrome bars). The
     min/max clamp guarantees the sticky element stays exactly one
     viewport tall so the pin math is predictable.                       */
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
}

/* Cancel the legacy min-height inside a pin context so the hero-sticky
   rule above wins regardless of selector order.                        */
.hero-sticky.hero,
.hero-sticky.hero-has-wings {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Centre the hero stage vertically within the 100vh box so the
   composition feels intentional during the pin.                       */
.hero-sticky .hero-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  padding-bottom: clamp(56px, 9vh, 96px);
}

.hero-sticky .hero-scroll-hint {
  position: absolute;
  bottom: clamp(16px, 4vh, 32px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-gradient {
  position: absolute;
  inset: -10%;
  background: var(--gradient-sunburst);
  opacity: 0.25;
  filter: blur(20px);
}

.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--rgb-cream), 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--rgb-cream), 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
}

.hero-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.hero-bg-orb-1 {
  width: 520px;
  height: 520px;
  background: var(--color-sunburst-orange);
  opacity: 0.20;
  top: -200px;
  right: -120px;
}

.hero-bg-orb-2 {
  width: 420px;
  height: 420px;
  background: var(--color-wing-red);
  opacity: 0.15;
  bottom: -180px;
  left: -100px;
}

.hero-ember-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 7;
}

/* ----------------------------------------------------------
   Wings reveal as full hero background.
   Mask: soft radial vignette so the canvas blends edge-to-edge
   into the warm gradient — no harsh rectangle.
   ---------------------------------------------------------- */

.hero-bg-wings {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 2;
  /* Soft rectangular feather — wide, multi-stop fade on each edge so
     the food blends naturally into the dark hero background. Uses 4
     intermediate opacity stops per side (~20% feather zone) to mimic
     a gaussian / natural-light falloff rather than a hard digital cut. */
  -webkit-mask-image:
    linear-gradient(to right,
      transparent 0%, rgba(0,0,0,0.12) 4%, rgba(0,0,0,0.45) 10%, rgba(0,0,0,0.78) 16%, #000 22%,
      #000 78%,
      rgba(0,0,0,0.78) 84%, rgba(0,0,0,0.45) 90%, rgba(0,0,0,0.12) 96%, transparent 100%),
    linear-gradient(to bottom,
      transparent 0%, rgba(0,0,0,0.25) 4%, rgba(0,0,0,0.7) 9%, #000 15%,
      #000 85%,
      rgba(0,0,0,0.7) 91%, rgba(0,0,0,0.25) 96%, transparent 100%);
          mask-image:
    linear-gradient(to right,
      transparent 0%, rgba(0,0,0,0.12) 4%, rgba(0,0,0,0.45) 10%, rgba(0,0,0,0.78) 16%, #000 22%,
      #000 78%,
      rgba(0,0,0,0.78) 84%, rgba(0,0,0,0.45) 90%, rgba(0,0,0,0.12) 96%, transparent 100%),
    linear-gradient(to bottom,
      transparent 0%, rgba(0,0,0,0.25) 4%, rgba(0,0,0,0.7) 9%, #000 15%,
      #000 85%,
      rgba(0,0,0,0.7) 91%, rgba(0,0,0,0.25) 96%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  filter: saturate(0.95) contrast(1.02);
  pointer-events: none;
}

/* Contrast scrim — keeps the headline readable over bright food.
   Anchored bottom-left to match where the headline sits.        */

.hero-bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 70% at 25% 55%,
      rgba(14, 14, 16, 0.78) 0%,
      rgba(14, 14, 16, 0.55) 30%,
      rgba(14, 14, 16, 0.22) 55%,
      rgba(14, 14, 16, 0.00) 80%),
    linear-gradient(180deg,
      rgba(14, 14, 16, 0.60) 0%,
      rgba(14, 14, 16, 0.00) 22%,
      rgba(14, 14, 16, 0.00) 70%,
      rgba(14, 14, 16, 0.70) 100%);
}

/* Soft warm halo so the canvas edges sit on a warm bed rather
   than a hard gradient line. Sits ABOVE the wings + scrim so
   it tints both — like neon spill from off-frame.              */

.hero-bg-halo {
  position: absolute;
  inset: -10%;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 50% at 75% 25%,
      rgba(var(--rgb-sunburst-yellow), 0.10), transparent 70%),
    radial-gradient(ellipse 45% 55% at 22% 78%,
      rgba(var(--rgb-wing-red), 0.10), transparent 70%),
    radial-gradient(ellipse 55% 60% at 50% 50%,
      rgba(var(--rgb-sunburst-orange), 0.06), transparent 75%);
  filter: blur(30px);
  mix-blend-mode: screen;
}

@media (max-width: 980px) {
  /* Mobile: the wings sit behind the headline (top half of hero) and
     fade out cleanly above the CTAs so Order Now / Where's the truck
     read against pure Royal Black. */
  .hero-bg-wings {
    width: 100%;
    height: 62%;
    left: 0;
    top: 0;
    bottom: auto;
    transform: none;
    -webkit-mask-image:
      linear-gradient(to right,
        transparent 0%, rgba(0,0,0,0.12) 3%, rgba(0,0,0,0.5) 8%, rgba(0,0,0,0.82) 13%, #000 18%,
        #000 82%,
        rgba(0,0,0,0.82) 87%, rgba(0,0,0,0.5) 92%, rgba(0,0,0,0.12) 97%, transparent 100%),
      linear-gradient(to bottom,
        transparent 0%, rgba(0,0,0,0.4) 4%, rgba(0,0,0,0.85) 10%, #000 16%,
        #000 70%,
        rgba(0,0,0,0.55) 84%, rgba(0,0,0,0.18) 94%, transparent 100%);
            mask-image:
      linear-gradient(to right,
        transparent 0%, rgba(0,0,0,0.12) 3%, rgba(0,0,0,0.5) 8%, rgba(0,0,0,0.82) 13%, #000 18%,
        #000 82%,
        rgba(0,0,0,0.82) 87%, rgba(0,0,0,0.5) 92%, rgba(0,0,0,0.12) 97%, transparent 100%),
      linear-gradient(to bottom,
        transparent 0%, rgba(0,0,0,0.4) 4%, rgba(0,0,0,0.85) 10%, #000 16%,
        #000 70%,
        rgba(0,0,0,0.55) 84%, rgba(0,0,0,0.18) 94%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .hero-bg-scrim {
    background:
      /* Darken right behind the headline so cream type reads over the food */
      radial-gradient(ellipse 95% 50% at 50% 38%,
        rgba(14, 14, 16, 0.62) 0%,
        rgba(14, 14, 16, 0.38) 40%,
        rgba(14, 14, 16, 0.10) 70%,
        rgba(14, 14, 16, 0.00) 95%),
      /* Vertical wash — clean at the headline mid-band, opaque again
         in the lower third so CTAs sit on solid Royal Black. */
      linear-gradient(180deg,
        rgba(14, 14, 16, 0.40) 0%,
        rgba(14, 14, 16, 0.10) 22%,
        rgba(14, 14, 16, 0.00) 45%,
        rgba(14, 14, 16, 0.50) 70%,
        rgba(14, 14, 16, 0.92) 100%);
  }
}

.hero-content {
  position: relative;
  z-index: 10; /* above all hero-bg layers (gradient, wings, scrim, halo, embers, loader) */
}

.hero-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

.hero-stage .hero-claim,
.hero-stage .hero-subhead,
.hero-stage .hero-tagline,
.hero-stage .hero-tertiary {
  align-self: center;
}

/* Image-logo replacement for the old <h1> headline */
.hero-stage .hero-logo {
  display: block;
  width: 100%;
  max-width: clamp(280px, 56vw, 640px);
  height: auto;
  margin: var(--space-3) auto var(--space-3);
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 32px rgba(var(--rgb-sunburst-orange), 0.20));
}

@media (max-width: 980px) {
  .hero-stage { max-width: 680px; }
  .hero-stage .hero-logo {
    max-width: clamp(260px, 80vw, 520px);
  }
}

/* Block-letter tagline — sits under the logo, smaller than logo but
   louder than body copy. */
.hero-stage .hero-tagline {
  font-family: var(--font-heading);
  font-size: clamp(0.75rem, 1.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cream);
  margin: var(--space-2) 0 var(--space-4);
  max-width: none;
  white-space: nowrap;
  line-height: 1.3;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.55);
}

/* Headline claim — bold caps banner above the eyebrow */

.hero-claim {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw + 0.5rem, 1.5rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-sunburst-yellow);
  margin: 0 0 var(--space-3);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.65),
    0 2px 10px rgba(0, 0, 0, 0.60),
    0 0 24px rgba(var(--rgb-sunburst-yellow), 0.25);
}

/* Stronger shadows now that text floats over animated food. */

.hero-headline,
.hero-subhead,
.hero-stage .eyebrow {
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.50),
    0 4px 22px rgba(0, 0, 0, 0.55);
}

/* Loader: corner positioning when it covers the hero background */

.wr-loader--hero {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: clamp(20px, 4vw, 48px);
  gap: var(--space-3);
  background: rgba(var(--rgb-royal-black), 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity var(--dur-medium) var(--ease-out);
  pointer-events: none;
}

.wr-loader--hero .wr-ring {
  width: 56px;
  height: 56px;
}

.wr-loader--hero .wr-ring::before {
  border-width: 1.5px;
}

.wr-loader--hero .wr-arc {
  -webkit-mask: radial-gradient(circle, transparent 23px, #000 24px);
          mask: radial-gradient(circle, transparent 23px, #000 24px);
}

.wr-loader--hero .wr-pct {
  font-size: 0.875rem;
}

.wr-loader--hero .wr-label {
  font-size: 0.625rem;
  align-self: center;
}

@media (max-width: 600px) {
  .wr-loader--hero {
    align-items: center;
    justify-content: center;
  }
}

.hero-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  max-width: 560px;
  margin-inline: auto;
}

.hero-photo-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: visible; /* gradient mask handles the edges */
}

.hero-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-lg);
}

/* ---- Scroll-driven wing-reveal canvas ---- */

.hero-wing-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  /* Soft radial vignette so the canvas edges fade into the surrounding
     hero background — frame outline is invisible.                       */
  -webkit-mask-image:
    radial-gradient(ellipse 90% 92% at 50% 52%, #000 38%, rgba(0,0,0,0.85) 62%, transparent 96%);
          mask-image:
    radial-gradient(ellipse 90% 92% at 50% 52%, #000 38%, rgba(0,0,0,0.85) 62%, transparent 96%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background: var(--color-royal-black);
}

/* Decorative gradient ring drawn behind the canvas — adds a warm halo
   without producing a hard rectangular border.                           */
.hero-photo-frame::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: calc(var(--radius-lg) + 16px);
  background:
    radial-gradient(ellipse at 30% 30%, rgba(var(--rgb-sunburst-yellow), 0.20), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(var(--rgb-wing-red), 0.18), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(var(--rgb-sunburst-orange), 0.12), transparent 65%);
  filter: blur(28px);
  z-index: -1;
  pointer-events: none;
  animation: hero-photo-halo 14s ease-in-out infinite;
}

@keyframes hero-photo-halo {
  0%, 100% { transform: scale(1)    rotate(0deg); opacity: 0.92; }
  50%      { transform: scale(1.04) rotate(2deg); opacity: 1; }
}

/* ---- Loader (over canvas while frames decode) ---- */

.wr-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: rgba(var(--rgb-royal-black), 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
  opacity: 1;
  transition: opacity var(--dur-medium) var(--ease-out);
  z-index: 2;
  pointer-events: none;
}

.wr-loader.is-done {
  opacity: 0;
}

.wr-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  position: relative;
}

.wr-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(var(--rgb-sunburst-orange), 0.15);
}

.wr-arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--color-sunburst-orange) calc(var(--p, 0) * 1%),
    transparent 0
  );
  -webkit-mask: radial-gradient(circle, transparent 30px, #000 31px);
          mask: radial-gradient(circle, transparent 30px, #000 31px);
  transition: background 120ms linear;
}

.wr-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--color-cream);
  letter-spacing: 0.04em;
}

.wr-label {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(var(--rgb-cream), 0.7);
}

/* ---- Trophy chip overlay (kept) ---- */

.hero-photo-chip {
  position: absolute;
  left: -16px;
  top: -16px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-royal-black);
  border: 1.5px solid var(--color-sunburst-yellow);
  border-radius: var(--radius-pill);
  color: var(--color-cream);
  box-shadow: var(--glow-yellow);
  z-index: 2;
  transform: rotate(-2deg);
}

.hero-photo-chip .chip-mark {
  font-size: 1.25rem;
}

.hero-photo-chip .chip-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.hero-photo-chip .chip-text strong {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-cream);
}

.hero-photo-chip .chip-text small {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-sunburst-yellow);
  letter-spacing: 0.04em;
}

@media (max-width: 600px) {
  .hero-photo { max-width: 360px; }
  .hero-photo-chip { left: -10px; top: -10px; padding: 6px 12px; }
  .hero-photo-chip .chip-mark { font-size: 1rem; }
  .hero-photo-chip .chip-text strong { font-size: 0.75rem; }
  .hero-photo-chip .chip-text small { font-size: 0.625rem; }
}


.hero-headline {
  margin: 0 0 var(--space-5);
  font-size: clamp(2.5rem, 6vw + 0.5rem, 5.25rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
}

.hero-headline .line {
  display: block;
}

.hero-headline .line-since {
  font-size: 0.78em;
  margin-top: 2px;
}

.hero-headline .accent {
  display: inline-block;
  background: linear-gradient(180deg, var(--color-sunburst-yellow) 0%, var(--color-sunburst-orange) 60%, var(--color-deep-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 30px rgba(var(--rgb-sunburst-orange), 0.20);
}

.hero-copy .eyebrow {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-eyebrow);
  margin-bottom: var(--space-4);
  color: var(--color-sunburst-orange);
}

.hero-copy .hero-subhead {
  max-width: 50ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(var(--rgb-cream), 0.82);
  margin-bottom: var(--space-3);
}

.hero-copy .hero-subhead-fine {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 0.9375rem;
  color: rgba(var(--rgb-cream), 0.62);
  margin-bottom: var(--space-6);
  max-width: 52ch;
}

@media (max-width: 980px) {
  .hero-headline { font-size: clamp(2.5rem, 9vw, 4.5rem); }
  .hero-copy .hero-subhead { max-width: 52ch; }
}

.hero-subhead {
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto var(--space-8);
}

.hero-ctas {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

.hero-tertiary {
  margin-top: var(--space-5);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.hero-tertiary a {
  color: var(--text-primary);
}

.hero-scroll-hint {
  margin-top: var(--space-10);
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.hero-scroll-hint .arrow {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: currentColor;
  position: relative;
  animation: hint-bounce 2.2s var(--ease-in-out) infinite;
}

.hero-scroll-hint .arrow::after {
  content: '';
  position: absolute;
  left: -3px;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

@media (max-width: 600px) {
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }
  .hero-ctas .btn { width: 100%; }
}

/* ============================================================
   Footer (Phase 1 stub — refined later)
   ============================================================ */

.footer {
  position: relative;
  border-top: 1px solid var(--border-default);
  padding: var(--space-10) 0 var(--space-8);
  background: var(--bg-page);
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.footer-logo-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-royal-black);
  border: 1.5px solid rgba(var(--rgb-sunburst-orange), 0.5);
  flex-shrink: 0;
}

.footer-brand .logo {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.footer-brand .tagline {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  max-width: 32ch;
}

.footer-col h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-col a {
  color: var(--text-secondary);
  font-size: var(--fs-body);
}

.footer-col a:hover {
  color: var(--color-sunburst-orange);
}

.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-default);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.footer-bottom a {
  color: var(--text-muted);
}

.footer-bottom a:hover {
  color: var(--color-sunburst-orange);
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  .footer-brand { grid-column: 1 / -1; }
}