/* Homepage hero treatment for the supplied Mr. Fix Your Chip van photo. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(650px, 61vw, 790px);
  display: flex;
  align-items: center;
  padding: clamp(58px, 7vw, 88px) 0;
  color: var(--color-white);
  background-color: #081b45;
  background-image:
    linear-gradient(90deg, rgba(5, 17, 47, 0.94) 0%, rgba(7, 25, 66, 0.80) 36%, rgba(7, 25, 66, 0.42) 59%, rgba(7, 25, 66, 0.08) 82%),
    url("assets/mfyc-van-hero.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 28%;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(4, 14, 39, 0.38), transparent);
}

.hero-layout {
  width: min(calc(100% - 48px), var(--shell));
  margin-inline: auto;
}

.hero-copy {
  width: min(100%, 650px);
  padding: 0;
  text-shadow: 0 2px 24px rgba(2, 10, 28, 0.28);
}

.hero .review-line {
  margin-bottom: clamp(28px, 4vw, 42px);
  border-bottom-color: var(--color-highlight);
  background: rgba(255, 254, 250, 0.92);
  box-shadow: 0 15px 36px rgba(2, 10, 28, 0.22);
  text-shadow: none;
}

.hero .kicker {
  color: var(--color-highlight-soft);
}

.hero h1 {
  max-width: 650px;
  color: #fff;
  font-size: clamp(68px, 7vw, 104px);
  text-wrap: balance;
}

.hero h1 em {
  color: var(--color-highlight-soft);
}

.hero-intro {
  max-width: 600px;
  margin: clamp(24px, 3vw, 32px) 0;
  color: rgba(255, 255, 255, 0.91);
  line-height: 1.68;
}

.hero .button {
  border-color: var(--color-white);
  color: var(--color-accent-deep);
  background: var(--color-white);
  text-shadow: none;
}

.hero .button:hover {
  color: var(--color-white);
  background: transparent;
}

.hero .text-link {
  color: var(--color-white);
}

.hero-note {
  margin-top: clamp(28px, 4vw, 42px);
  border-left-color: var(--color-highlight-soft);
}

.hero-note p,
.hero-note strong {
  color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 1040px) {
  .hero {
    min-height: 700px;
    background-position: 58% center;
  }

  .hero-copy {
    width: min(100%, 610px);
  }

  .hero h1 {
    max-width: 610px;
  }
}

@media (max-width: 820px) {
  .hero {
    min-height: 690px;
    padding: 54px 0 62px;
    background-image:
      linear-gradient(90deg, rgba(5, 17, 47, 0.91) 0%, rgba(7, 25, 66, 0.72) 62%, rgba(7, 25, 66, 0.42) 100%),
      url("assets/mfyc-van-hero.jpg");
    background-position: 66% center;
  }

  .hero-layout {
    width: min(calc(100% - 36px), var(--shell));
  }

  .hero-copy {
    width: min(100%, 570px);
  }
}

@media (max-width: 580px) {
  .hero {
    min-height: 680px;
    padding: 42px 0 48px;
    background-image:
      linear-gradient(rgba(5, 17, 47, 0.74), rgba(5, 17, 47, 0.84)),
      url("assets/mfyc-van-hero.jpg");
    background-position: 69% center;
  }

  .hero .review-line {
    width: min(100%, 286px);
    margin-bottom: 25px;
  }

  .hero h1 {
    max-width: 520px;
    font-size: clamp(54px, 16vw, 72px);
  }

  .hero-intro {
    margin: 22px 0;
    font-size: 15px;
    line-height: 1.58;
  }

  .hero .button-row {
    gap: 13px;
  }

  .hero-note {
    margin-top: 25px;
  }
}

@media (max-width: 380px) {
  .hero {
    min-height: 710px;
    background-position: 71% center;
  }

  .hero h1 {
    font-size: 52px;
  }
}

/* The hero now carries two primary actions. styles.css stacks every
   .button-row at all widths, so restore a row here where there is space,
   and keep the gold CTA gold instead of inheriting the hero's white fill. */
.hero .button-cta {
  border-color: var(--color-highlight);
  color: var(--color-ink);
  background: var(--color-highlight);
}

.hero .button-cta:hover {
  border-color: var(--color-highlight-soft);
  color: var(--color-ink);
  background: var(--color-highlight-soft);
}

@media (min-width: 760px) {
  .hero .button-row {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
  }
}