/* FIXD — hero.
   Full-bleed AC frame, a hard scrim down the left so the real HTML headline
   always wins over the photograph, and a landing scale of 1.04 → 1.00 that is
   over in well under a second. */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 46%;
  transform: scale(1.04);
  transform-origin: 62% 50%;
}
.js .hero__media img { transition: transform 1.1s var(--ease-out); }
.js .hero.is-ready .hero__media img { transform: scale(1); }

/* Two scrims: one from the left for the headline column, one from the bottom
   so the selector strip has something solid to sit on. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, var(--black) 0%, rgba(11, 11, 10, .82) 32%, rgba(11, 11, 10, .12) 68%, rgba(11, 11, 10, .35) 100%),
    linear-gradient(to top, rgba(11, 11, 10, .9) 0%, rgba(11, 11, 10, 0) 46%);
}

.hero__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__content { max-width: 100%; }

.hero__eyebrow {
  color: var(--white-72);
  margin-bottom: clamp(.9rem, 2vh, 1.4rem);
}


.hero__title {
  font-size: var(--t-hero);
  font-weight: 900;
  font-variation-settings: 'wdth' 78;
  letter-spacing: var(--track-mega);
  line-height: .84;
  margin-bottom: clamp(1rem, 2.4vh, 1.6rem);
}
/* the mask box needs a hair of slack so no cap or comma is shaved off */
.hero__title span { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__title b { display: block; font-weight: inherit; }
.hero__title .is-yellow-line { color: var(--yellow); }

/* Load sequence: each line clips up from its own mask, 90ms apart. Fast and
   mechanical — no luxury cross-fade. */
.js .hero__title b { transform: translateY(105%); }
.js .hero.is-ready .hero__title b {
  transform: none;
  transition: transform .5s var(--ease-snap);
  transition-delay: calc(var(--i) * 90ms + 120ms);
}
.js .hero__copy, .js .hero__actions, .js .hero__eyebrow {
  opacity: 0;
  transform: translateY(16px);
}
.js .hero.is-ready .hero__copy,
.js .hero.is-ready .hero__actions,
.js .hero.is-ready .hero__eyebrow {
  opacity: 1;
  transform: none;
  transition: opacity .34s linear, transform .42s var(--ease-snap);
}
.js .hero.is-ready .hero__eyebrow { transition-delay: .06s; }
.js .hero.is-ready .hero__copy { transition-delay: .42s; }
.js .hero.is-ready .hero__actions { transition-delay: .5s; }

.hero__copy {
  font-size: var(--t-lede);
  color: var(--white-72);
  max-width: 34ch;
  margin-bottom: clamp(1.4rem, 3vh, 2rem);
}
.hero__copy strong { color: var(--white); font-weight: 600; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Scroll cue — a short yellow tick that pulses down the page. */
.hero__cue {
  display: none;
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2.5rem, 6vh, 4.5rem);
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--white-48);
}
.hero__cue i {
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(var(--yellow), transparent);
  animation: cue 1.8s var(--ease-in-out) infinite;
  transform-origin: top center;
}
@keyframes cue {
  0%, 100% { transform: scaleY(.35); opacity: .5; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media img { transform: none !important; }
  .hero__title b, .hero__copy, .hero__actions, .hero__eyebrow {
    transform: none !important; opacity: 1 !important;
  }
  .hero__cue i { animation: none; }
}

@media (min-width: 700px) {
  .hero__content { max-width: 58vw; }
  .hero__copy { max-width: 40ch; }
}
@media (min-width: 1200px) {
  .hero__content { max-width: 680px; }
}

@media (min-width: 1000px) {
  .hero { padding-bottom: clamp(4rem, 9vh, 7rem); }
  .hero__media img { object-position: 58% 44%; }
  .hero__cue { display: flex; flex-direction: column; }
  .hero__cue span { writing-mode: vertical-rl; }
}

/* Phones get a harder crop (the portrait file) and a heavier bottom scrim,
   because the headline needs the full width. */
@media (max-width: 699px) {
  .hero__scrim {
    background:
      linear-gradient(to top, var(--black) 6%, rgba(11, 11, 10, .78) 34%, rgba(11, 11, 10, .28) 72%, rgba(11, 11, 10, .55) 100%);
  }
  .hero__media img { object-position: 52% 32%; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
}