/* hero — interior page hero.
   Navy ground with a photo behind a gradient, so the transparent site header
   (set by unrivaled_base_hero_first()) always has something dark to sit on. */
.hero { position: relative; overflow: hidden; background: var(--color-navy); color: var(--color-white); }

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 40%;
  filter: contrast(1.05) brightness(.95) saturate(1.05);
}
/* Mirrors .hero-home__video. Sits above .hero__bg and below .hero__overlay, so
   the scrim that keeps the headline legible applies to motion and stills alike. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Reduced motion: drop the video, leave the poster showing. */
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }

.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Pastel #32 and #33: the hero copy was unreadable on desktop. The scrim was
     shaped for a photo, not for the words - its weakest stop sat at 30%, while
     the eyebrow, headline and sub-copy all sit between 40% and 68% of the hero
     height. So the one band that had to carry text was the one band left
     almost unfiltered, and on a bright patch of photograph the copy vanished.

     Reshaped rather than uniformly darkened: the dip moves up to 15%, above
     the content, and a plateau runs across 45-72% where the words are. The top
     of the frame stays light so the photograph still reads behind the
     transparent header.

     Measured against the two heroes that were reported, sampling the composited
     pixels under each text block (4.5:1 for the eyebrow and sub-copy, 3:1 for
     the headline):

                        before            after
       /eat/  eyebrow   59.2% failing     0% failing, worst 5.49
              sub       24.2% failing     0% failing, worst 5.36
       /plan/ eyebrow   47.3% failing     0.6% failing, worst 4.22
              headline  12.8% failing     0% failing, worst 4.53
              sub        6.6% failing     0% failing, worst 4.71 */
  background: linear-gradient(180deg, #1d24686b, #1d246857 15%, #1d24689e 45%, #1d2468a3 72%, #0d102ec2);
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max-width);
  margin: 0 auto;
  width: 100%;
  padding: 56px var(--margin);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Pastel #33 named the eyebrow first ("hard to read THIS and the sub-header").
   At 10px bold it was also set at 70% white, which over a photograph left more
   than half of it below 4.5:1. Full strength; the scrim above does the rest. */
.hero__eyebrow { color: var(--color-white); margin: 0; }

.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  color: var(--accent-decor);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero__chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-decor); }

.hero__headline {
  font-family: var(--font-display-poster);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  margin: 0;
  line-height: .95;
  letter-spacing: .01em;
  font-size: clamp(44px, 6vw, 78px);
  max-width: 26ch;
}
.hero__sub {
  /* Was 85% white. Over a photograph the remaining 15% is the difference
     between reading it and squinting at it. */
  color: var(--color-white);
  max-width: 640px;
  margin: 0;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.45;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, max-content));
  gap: 18px 56px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  max-width: 960px;
}
.hero__stat-label {
  color: var(--accent-decor);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: var(--weight-bold);
}
.hero__stat-val {
  display: block;
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 15px;
  margin-top: 4px;
}

@media (min-width: 768px) {
  .hero__inner { min-height: 660px; justify-content: center; padding-top: 140px; padding-bottom: 88px; }
}
@media (max-width: 767px) {
  .hero__inner { padding: 112px var(--margin) 48px; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 18px 20px; }
}

/* Ticker band at the foot of the hero, outside the inner measure. */
.hero { display: flex; flex-direction: column; }
.hero .ticker { margin-top: auto; }
.hero__cta { align-self: flex-start; }

/* Back link, for a page reached from a parent — a restaurant under Dining.
   Sits above the headline, inside the hero, so it reads as part of the page
   rather than as chrome. */
.hero__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: inherit;
  opacity: .8;
}
.hero__back:hover { opacity: 1; }
.hero__back-arrow {
  width: .7em; height: .7em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}