.home-page {
  background: #ffffff;
  /* Contain the scroll-in animations' horizontal offsets. The Member Owned Coop
     and Point S Promise cards each start translated 56px to the right of their
     final position, which makes the page scrollable sideways by that much until
     they first scroll into view.

     clip rather than hidden on purpose: hidden would force overflow-y to auto
     and turn .home-page into its own vertical scroll container, breaking page
     scroll. clip has no such side effect and creates no scroll container. */
  overflow-x: clip;
}

.home-page .underline {
  text-decoration: underline;
  cursor: pointer;
}

.home-page .line-height-24 {
  line-height: 24px !important;
}

.home-page .home-page-inner {
  background-color: transparent;
  padding: 0px;
  position: relative;
}

.home-page .home-page-inner #tire-finder {
  position: relative;
  top: 0px;
  margin: auto;
  z-index: 99;
  width: 100%;
  padding: 0px;
}

/* Member Owned Cooperative sits directly under the dark Shop by Vehicle / Size /
   Brand strip here. On mobile its photo already runs full-bleed and flat, so drop
   the section's top padding and let the navy band and the photo meet edge to
   edge rather than separating them with a strip of white. Matches the same
   treatment under the shop band on About.

   Scoped to .home-page and to mobile: About runs the same --media variant but
   follows a light section there, where the padding is still wanted, and desktop
   keeps it everywhere since the photo is inset and rounded above 768px. */
@media (max-width: 767px) {
  .home-page .about-coop--media {
    padding-top: 0;
  }
}

/* Store detail section — 40/60 split */
.store-detail-section.store-detail-section--split {
  position: relative;
  padding: 80px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.store-detail-split {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  border-radius: 12px;
  overflow: hidden;
}

/* Header row at the top of the card -- store name sits left, full width,
   above the image + content row below. Uses the same brand-primary
   background so the card reads as one continuous panel. */
.store-detail-card-header {
  background: var(--brand-primary);
  padding: 2rem 2.5rem 1rem;
}

.store-detail-card-header .store-detail-name {
  margin: 0;
  text-align: left;
}

.store-detail-split-body {
  display: flex;
  flex: 1;
}

.store-detail-split-image {
  width: 50%;
  position: relative;
  overflow: hidden;
  background: var(--brand-primary);
}

.store-detail-split-image .store-detail-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.store-detail-split-content {
  width: 50%;
  background: var(--brand-primary);
  display: flex;
  align-items: center;
  padding: 4rem 5rem;
}

.store-detail-card-inner {
  background: transparent;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  width: 100%;
}

/* Left side: store info — typography for .store-detail-name comes from .section-title in main.css. */
.store-detail-name {
  color: #fff;
  margin: 0 0 0.5rem;
}

.store-detail-address {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--font-secondary);
  font-style: normal;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.store-detail-address .mdi {
  font-size: 18px;
  line-height: 1.6;
  color: inherit;
  flex-shrink: 0;
}

.store-detail-address a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.store-detail-address:hover .mdi,
.store-detail-address:hover a {
  color: #3eb049;
}

.store-detail-address p {
  margin: 0;
}

/* Contact row */
.store-detail-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.store-detail-phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.store-detail-phone svg,
.store-detail-phone .mdi {
  font-size: 18px;
  color: #ffffff;
  flex-shrink: 0;
}

.store-detail-phone a {
  font-family: Inter, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.store-detail-phone:hover svg,
.store-detail-phone:hover .mdi,
.store-detail-phone:hover a {
  color: #3eb049;
}

/* After-hours row: stack the number + label vertically so the label
   reads as a sub-line rather than competing on the same row. */
.store-detail-phone-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.store-detail-phone .store-detail-phone-label {
  font-family: Inter, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

/* Action links */
.store-detail-actions {
  display: flex;
  gap: 1rem;
}

/* Right side: hours title — Bebas to match the section-title family. */
.store-detail-hours-title,
.store-detail-info-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1rem;
}

.store-hours-list {
  display: flex;
  flex-direction: column;
}

.store-hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  margin: 0 -0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: Inter, sans-serif;
}

.store-hours-row:last-child {
  border-bottom: none;
}

.store-hours-day {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}

.store-hours-time {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-align: right;
}

/* Today highlight */
.store-hours-row--today-open {
  background: rgba(67, 176, 42, 0.2);
  border-radius: 0.5rem;
  border-bottom: none;
}

.store-hours-row--today-open .store-hours-day,
.store-hours-row--today-open .store-hours-time {
  font-weight: 700;
  color: #ffffff;
}

.store-hours-row--today-closed {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  border-bottom: none;
}

.store-hours-row--today-closed .store-hours-day,
.store-hours-row--today-closed .store-hours-time {
  font-weight: 700;
  color: #ffffff;
}

/* Store detail responsive */
@media (max-width: 767px) {
  .store-detail-section.store-detail-section--split {
    padding: 56px 16px;
  }

  .store-detail-split {
    min-height: auto;
  }

  /* Card header padding tightens on mobile so the store name doesn't
     eat too much vertical space above the image. */
  .store-detail-card-header {
    padding: 1.25rem 1.5rem 0.75rem;
  }

  /* Collapse the image | content row to a single column: image first,
     then the content section below it. */
  .store-detail-split-body {
    flex-direction: column;
  }

  .store-detail-split-image {
    width: 100%;
    height: 240px;
  }

  .store-detail-split-content {
    width: 100%;
    padding: 2rem 1.5rem;
  }

  .store-detail-card-inner {
    grid-template-columns: 1fr;
  }

  .store-detail-info {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .store-detail-hours {
    padding-top: 1.25rem;
  }

  .store-detail-card-inner {
    gap: 0;
  }

  .store-detail-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

.home-page .main-article .main-article__img {
  display: flex;
  align-items: center;
  height: 100%;
}

.home-page .main-article .main-article__content {
  padding: 28px;
}

.home-page .main-article .main-article__content h3 {
  font-size: 40px;
  line-height: 54px;
  font-family: Inter;
  font-weight: 700;
  color: #1D4288;
  margin-bottom: 46px;
}

.home-page .main-article .main-article__content .separate {
  height: 4px;
  width: 200px;
  display: inline-block;
  background-color: #3EB049;
  margin-bottom: 34px;
}

.home-page .main-article .main-article__content .step-footer h4 {
  font-size: 36px;
  font-family: BebasNeue;
  font-weight: 700;
  color: #1D4288;
  margin-bottom: 25px;
}

.home-page .main-article .main-article__content .shop-menu__header__content__left {
  flex: 0 0 200px;
  color: #1D4288
}

.home-page .main-article .main-article__content .shop-menu__header__content__left span {
  font-size: 14px;
  line-height: 18px;
  font-family: Inter;
  font-weight: 400;
  display: block;
}

.home-page .main-article .main-article__content .shop-menu__header__content__left b,
.home-page .main-article .main-article__content .shop-menu__header__content__left h6 {
  font-size: 12px;
  line-height: 12px;
  font-family: Inter;
  font-weight: 700;
}

.home-page .main-article .main-article__content .shop-menu__header__content__left h5 {
  font-size: 18px;
  font-family: Inter;
  font-weight: 700;
}

.home-page .main-article .main-article__content .shop-menu__header__content__right {
  width: 100%;
}

.home-page .main-article .main-article__content .shop-menu__header__content__right .day-time {
  display: flex;
  justify-content: space-between;
}

.home-page .main-article .main-article__content .shop-menu__header__content__right .day-time .day {
  flex: 0 0 52px;
  font-size: 14px;
  line-height: 24px;
  color: black;
  font-weight: 700;
  opacity: 0.35;
}

.home-page .main-article .main-article__content .shop-menu__header__content__right .day-time .time {
  font-size: 14px;
  line-height: 24px;
  color: black;
  font-weight: 700;
  opacity: 0.35;
}

.home-page .main-article .main-article__content .shop-menu__header__content__right .day-time.active .day,
.home-page .main-article .main-article__content .shop-menu__header__content__right .day-time.active .time {
  opacity: 1;
}

.home-page .main-article .main-article__content .shop-menu__header__content__right .time {
  min-width: 180px;
}

/* Popular services section */
.home-page .recommend-service {
  max-width: 1200px;
  margin: 0 auto;
  /* Top padding tracks .promise's bottom padding (main.css). This section and
     the Point S Promise below it are both .section-gray and sit next to each
     other, so they read as one gray band -- the top of that band should match
     its bottom. Mirrors the same 40 / 56px ladder .promise uses. Bottom padding
     is independent: it meets the service cards, not the band edge. */
  padding: 40px 24px 60px;
}

@media (min-width: 768px) {
  .home-page .recommend-service {
    padding-top: 56px;
  }
}

.home-page .recommend-service .recommend-service-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
}

/* Kicker, title and "View Services" button styled by .section-kicker / .section-title / .btn-cta-green in main.css. */

/* Services grid */
.home-page .recommend-service .services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Popular Services cards render straight away -- no scroll-in animation. The
   section sits between the Member Owned Cooperative and Point S Promise cards,
   both of which slide in, and a third staggered animation between them made
   that stretch of the page read as constant motion. The fadeUp keyframe went
   with it; nothing else used it. */
.home-page .recommend-service .service-card {
  display: flex;
  flex-direction: column;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  background: #fff;
  transition: all 0.2s ease;
}

.home-page .recommend-service .service-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Image link wrapper — contains image + overlay */
.home-page .recommend-service .service-card-image-link {
  position: relative;
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.home-page .recommend-service .service-card-image-link:focus-visible {
  outline: 2px solid #1D4288;
  outline-offset: -2px;
}

/* Show overlay on keyboard focus too */
.home-page .recommend-service .service-card-image-link:focus-visible .service-card-overlay {
  background: rgba(0, 15, 50, 0.5);
}

.home-page .recommend-service .service-card-image-link:focus-visible .service-card-learn {
  opacity: 1;
  transform: translateY(0);
}

.home-page .recommend-service .service-card-image-wrapper {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: #f0f0f0;
}

/* Mobile: shorter image crop so the service card photos read smaller. */
@media (max-width: 767px) {
  .home-page .recommend-service .service-card-image-wrapper {
    aspect-ratio: 16 / 9;
  }
}

.home-page .recommend-service .service-card-image-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.home-page .recommend-service .service-card:hover .service-card-image-wrapper img {
  transform: scale(1.05);
}

/* Dark scrim overlay — fades in on hover */
.home-page .recommend-service .service-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  pointer-events: none;
}

.home-page .recommend-service .service-card:hover .service-card-overlay {
  background: rgba(0, 15, 50, 0.5);
}

/* "Learn More" pill — slides up on hover */
.home-page .recommend-service .service-card-learn {
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  background: #ffffff;
  font-family: Inter;
  font-weight: 600;
  font-size: 0.875rem;
  color: #1a1a1a;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.3s ease;
}

.home-page .recommend-service .service-card:hover .service-card-learn {
  opacity: 1;
  transform: translateY(0);
}

/* Card body — flexbox pins button to bottom */
.home-page .recommend-service .service-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 1.25rem;
}

.home-page .recommend-service .service-card-title {
  color: var(--brand-primary);
  font-family: Inter;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.3;
  margin: 0 0 8px;
}

.home-page .recommend-service .service-card-description {
  margin: 0 0 16px;
  font-family: Inter;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #555;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Schedule Service button: visual via .btn-cta-green; layout (full width, pinned to bottom) here. */
.home-page .recommend-service .service-card-cta {
  width: 100%;
  margin-top: auto;
}

@media (max-width: 991px) {
  .home-page .recommend-service .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-page .recommend-service .recommend-service-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media (max-width: 575px) {
  .home-page .recommend-service .services-grid {
    grid-template-columns: 1fr;
  }

  .home-page .recommend-service {
    padding: 40px 16px;
  }
}

/* === Hero === */
/* Consumer Reports banner. Desktop shows CR in the nav bar (see navBar.vue),
   so this band is hidden there and only appears on mobile — a light band
   between the nav and the hero. */
.home-page .cr-band {
  display: none;
}
/* Shown below the nav's "roomy" width (1365px) — where the nav can no longer
   hold the CR badge alongside the cart — as its own band between the nav and
   the hero. Matches the JS `utilityRoomy` threshold that hides the nav badge. */
@media (max-width: 1364px) {
  .home-page .cr-band {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f6f9;
    padding: 12px 16px;
  }
  .home-page .cr-band__img {
    height: 66px;
    width: auto;
    max-width: 100%;
  }
}

/* The Platinum Partner logo band used to be positioned here, absolutely, over
   the hero. It is now a standalone full-width band between the perks band and
   the Deals promos, so its styles live with the other shared strips in main.css
   under ".brand-strip". */

.home-page .hero {
  position: relative;
  overflow: hidden;
  max-height: 960px;
  min-height: 720px;
  padding-bottom: 48px;
}

.home-page .hero__media {
  position: absolute;
  inset: 0;
}

.home-page .hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Mobile: the campaign artwork is 2:1 landscape going into a portrait container,
   so cover throws away most of the width, and a centered crop lands left of the
   subject. The wheel sits at roughly 33-83% across with the NEXEN sidewall text
   at 60-75%, so biasing the crop to 65% keeps the branded sidewall and the bulk
   of the wheel in frame instead of shearing the right edge off. This trades away
   the left of the tread; no object-position can show more of the width than the
   container's aspect allows, so a purpose-cropped mobile plate is the real fix
   if the whole wheel has to be visible. */
@media (max-width: 767px) {
  .home-page .hero__img {
    object-position: 65% top;
  }
}

.home-page .hero__gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 42% 72% at 50% 50%,
    rgba(0, 0, 0, .62) 0%,
    rgba(0, 0, 0, .3) 42%,
    transparent 70%
  );
}

/* Mobile: no flat wash — a vertical gradient darkest through the middle (behind
   the centered text) that fades clear at top and bottom, leaving the top open
   for the hero logos later. */
@media (max-width: 767px) {
  .home-page .hero__gradient {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 24%,
      rgba(0, 0, 0, 0.5) 44%,
      rgba(0, 0, 0, 0.5) 62%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

.home-page .hero__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* Symmetric with top so justify-content: center lands on the hero's true
     vertical center. This was 48px, which pulled the copy 24px above center. */
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  max-width: 560px;
  margin: 0 auto;
  z-index: 1;
}

.home-page .hero__title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 12px;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.home-page .hero__desc {
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .95);
  margin: 0 0 20px;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
  overflow: visible;
  display: block;
}


.home-page .hero__actions {
  display: flex;
  gap: 12px;
}

/* Hero CTAs styled via .btn-cta-green (primary) and .btn-cta-white (secondary) in main.css. */

/* Mobile: CTAs fill the width, stacking when the promo supplies two. Done on the
   row rather than with main.css's .btn-cta-green--mobile-full modifier because the
   hero emits its CTAs through several branches (multistore, tire finder, plain
   link) across two button classes, and all of them should behave alike. The
   width on the children is required, not redundant: .hero__content centers its
   flex children, so the row would otherwise shrink to its content. */
@media (max-width: 767px) {
  .home-page .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .home-page .hero__actions > * {
    width: 100%;
  }
}

.home-page .hero__legal {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, .7);
  margin-top: 20px;
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

.home-page .hero__legal-link {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, .85);
  margin-top: 20px;
  cursor: pointer;
  text-decoration: underline;
}

/* Modal styles (retained) */
.header-title {
  font-size: 32px;
  font-weight: 700;
  font-family: Inter;
  color: #1D4288;
}

.close-button-modal {
  background-color: #ffffff;
  height: 53px;
  border: none;
  font-family: Inter;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #1d4288;
  margin: unset !important;
}

.legal-text-style {
  color: #1a1a1a;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-family: Inter;
}

@media (min-width: 576px) {
  .home-page .main-article .main-article__content .shop-menu__header__content__right {
    width: unset;
    justify-content: unset;
  }

  .home-page .hero__title {
    font-size: 3.5rem;
  }

  .home-page .hero__content {
    padding: 40px 5%;
  }
}

/* 4rem only from 992px up, matching the step where the About hero's lg tier
   also reaches 4rem, so the two ladders move together on desktop.

   Held back below 992 on purpose: this title is CMS-authored promo copy of
   unpredictable length, and at ~540px of content box a long title in 64px
   condensed caps wraps to three or four lines and squeezes the description and
   CTAs under it. About's headline is fixed, so it can afford earlier steps. */
@media (min-width: 992px) {
  .home-page .hero__title {
    font-size: 4rem;
  }
}

/* Mobile: shorter bottom padding under Popular Services, matching the trimmed
   top padding on .promise directly below it. Both sections carry .section-gray,
   so they read as one continuous band and the pair of full paddings pooled as
   dead space in its middle. Bounded to mobile because the base 60px bottom also
   serves desktop, where it is not the problem. */
@media (max-width: 767px) {
  .home-page .recommend-service {
    padding-bottom: 32px;
  }
}

@media (max-width: 575px) {
  .home-page .hero {
    max-height: none;
    min-height: 460px;
    padding-bottom: 0;
  }

  .home-page .hero__content {
    padding: 24px 20px;
    max-width: 100%;
    justify-content: center;
    /* No top reserve: the logo band moved out of the hero to its own strip below
       the perks band, and CR sits in its own band above the hero, so there is
       nothing overlaying either edge. This was 92px to clear the logo band, with
       a .hero--no-brands escape hatch dropping it back to 24px; that class was
       never applied to any view, and with no hero carrying a band its 24px is
       simply the default now. */
    top: 24px;
    bottom: 24px;
  }

  .home-page .hero__title {
    font-size: 2.25rem;
    margin-bottom: 8px;
  }

  .home-page .hero__desc {
    font-size: 0.95rem;
    margin-bottom: 14px;
  }

  .home-page .hero__legal,
  .home-page .hero__legal-link {
    font-size: 0.65rem;
    margin-top: 16px;
  }
}

@media (min-width: 768px) {
  .home-page .main-article .main-article__content {
    padding: 60px 28px;
  }
}

@media (min-width: 992px) {
  .home-page .main-article .main-article__content {
    padding: 70px 60px 70px 30px;
  }

  .home-page .hero__title {
    font-size: 3.75rem;
  }

  .home-page .hero__content {
    padding: 48px 60px;
    max-width: 740px;
  }

  .home-page .hero__desc {
    font-size: 1.05rem;
  }
}

/* Left-anchored hero copy. Applied via .hero__content--left in
   HomeTopPromotion. It arrived with the Nexen spotlight, whose artwork put its
   subject dead center where centered copy landed right on top of it, and is kept
   on purpose now that the spotlight is over: the copy sits on the same 24px
   gutter and 1400px content column as the sections below the hero, so the
   headline starts flush with them. The text measure is capped separately so the
   lines don't run the full width of that column.

   Must stay after the min-width:992px block above, which sets a competing
   max-width and padding at equal specificity. Dropping the class from the view
   reverts to the centered default, taking the left-weighted scrim with it (it is
   keyed off the same class via :has() further down). */
.home-page .hero__content--left {
  align-items: flex-start;
  text-align: left;
  max-width: 1400px;
  padding-left: 24px;
  padding-right: 24px;
}

.home-page .hero__content--left .hero__title,
.home-page .hero__content--left .hero__desc,
.home-page .hero__content--left .hero__legal {
  max-width: 620px;
}

/* Copy stays centered on mobile: the left-aligned treatment exists to dodge the
   artwork's centered subject, which the narrow crop doesn't have, and the mobile
   scrim is a vertical band built for centered text. This has to sit after the
   --left rules above, not up in the earlier mobile block. Media queries add no
   specificity, so at equal specificity source order decides and the left rules
   would otherwise win at every width. */
@media (max-width: 767px) {
  .home-page .hero__content--left {
    align-items: center;
    text-align: center;
  }
}

/* Scrim follows the copy: the default is a radial ellipse centered at 50% 50%,
   which darkens the middle and leaves the left edge clear, so left-aligned text
   loses its backing. This swaps in a light left-to-right wash that carries the
   copy column and clears out well before the artwork's centered subject.
   Desktop only, so the mobile vertical gradient above is untouched. Keyed off
   :has() (already used elsewhere in the CSS) so removing the hero__content--left
   class reverts the alignment and the scrim together. */
@media (min-width: 768px) {
  .home-page .hero:has(.hero__content--left) .hero__gradient {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, .55) 0%,
      rgba(0, 0, 0, .42) 26%,
      rgba(0, 0, 0, .15) 54%,
      transparent 72%
    );
  }
}