.home-page {
  background: #ffffff;
}

.home-page .section-gray {
  background: #f3f4f6;
}

.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;
}

.home-page .warranty-section {
  padding: 36px 24px;
}

.home-page .warranty-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 0 24px;
}

.home-page .warranty-section-text {
  flex: 1 1 60%;
}

.home-page .warranty-section-eyebrow {
  display: block;
  font-family: Inter;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #3eb049;
  margin-bottom: 0.625rem;
}

.home-page .warranty-section-text h2 {
  font-size: 32px;
  font-weight: 700;
  font-family: Inter;
  color: #1a1a1a;
  line-height: 1.3;
  margin: 0 0 16px;
}

.home-page .warranty-section-accent {
  display: none;
}

.home-page .warranty-section-description {
  font-size: 0.95rem;
  line-height: 1.6;
  font-family: Inter;
  font-weight: 400;
  color: #555;
  margin-bottom: 20px;
}

.home-page .warranty-section-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 0 -23px;
}

.home-page .warranty-section-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.625rem;
  font-family: Inter;
  font-size: 0.95rem;
  color: #333;
  padding-left: 0;
}

.home-page .warranty-section-list-item svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 5px;
  background: rgba(62, 176, 73, 0.7);
  border-radius: 50%;
  box-sizing: content-box;
}

.home-page .warranty-section-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 12px 28px;
  background: #1d4288;
  color: #fff;
  border-radius: 6px;
  font-family: Inter;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(29, 66, 136, 0.25);
  transition: background 200ms ease, box-shadow 200ms ease;
}

.home-page .warranty-section-cta:hover {
  background: #153570;
  box-shadow: 0 3px 10px rgba(29, 66, 136, 0.35);
  color: #fff;
  text-decoration: none;
}

.home-page .warranty-section-cta:focus-visible {
  outline: 2px solid #1d4288;
  outline-offset: 3px;
}

.home-page .warranty-section-image {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  overflow: visible;
}

.home-page .warranty-section-image img,
.home-page .warranty-section-image picture img {
  width: 120%;
  border-radius: 0.75rem;
  object-fit: cover;
  display: block;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 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;
  padding: 60px 24px;
}

.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;
}

/* Service card */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.home-page .warranty-section-image {
  opacity: 0;
}

.home-page .warranty-section-image.in-view {
  animation: fadeInLeft 1.2s ease forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-page .recommend-service .service-card {
  opacity: 0;
}

.home-page .recommend-service .service-card.in-view {
  animation: fadeUp 1.2s ease forwards;
}

.home-page .recommend-service .service-card.in-view:nth-child(2) {
  animation-delay: 0.15s;
}

.home-page .recommend-service .service-card.in-view:nth-child(3) {
  animation-delay: 0.3s;
}

.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%;
  }
}

/* Platinum Partner logo band (see HomeTopPromotion). Live on every hero.
   Desktop: one row in a white pill, top-center. Mobile: full-width row at the
   hero top, logos spread edge-to-edge. */
.home-page .hero__brands {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 14px 34px;
  background: #fff;
  border-radius: 9999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.home-page .hero__brand-logo {
  height: 30px;
  width: auto;
  display: block;
}

/* Nexen's mark is near-square (stacked), so it needs more height to carry the
   same visual weight as the wide wordmarks. */
.home-page .hero__brand-logo--tall {
  height: 46px;
}

@media (max-width: 767px) {
  /* Mobile: ditch the restricting pill entirely. Full-width band, logos spread
     edge-to-edge with real breathing room (the whole point — the baked live
     site crams them into a tiny pill; we don't). */
  .home-page .hero__brands {
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: none;
    border-radius: 0;
    justify-content: space-between;
    gap: 8px;
    padding: 20px 8px;
  }

  /* Scale with viewport width so the logos stay as large as possible on any
     phone without overflowing the single row (four wide wordmarks + Nexen). */
  .home-page .hero__brand-logo {
    height: clamp(18px, 6vw, 26px);
  }

  .home-page .hero__brand-logo--tall {
    height: clamp(28px, 9.2vw, 42px);
  }

  /* Per-brand nudges — each asset carries different internal padding, so a
     uniform height reads unevenly. */
  .home-page .hero__brand-logo--falken {
    height: clamp(16px, 5.4vw, 24px);
  }

  .home-page .hero__brand-logo--hankook {
    height: clamp(21px, 7vw, 30px);
  }

  .home-page .hero__brand-logo--nexen {
    height: clamp(30px, 9.8vw, 43px);
  }

  /* Brand spotlight: with one logo in the band, space-between would pin it to
     the left edge of the full-width mobile strip, so center it instead. Remove
     along with the --solo class when the spotlight ends. */
  .home-page .hero__brands--solo {
    justify-content: center;
    /* Scale the mark up without growing the strip: whatever height the logo
       gains, the vertical padding gives back half of it per side, so the sum
       stays exactly what it was at the old 20px padding. Both values derive
       from one base clamp, so they can't drift apart. Raise --solo-logo-scale
       to push the logo further; padding follows on its own. */
    --solo-logo-base: clamp(30px, 9.8vw, 43px);
    --solo-logo-scale: 1.4;
    padding-block: calc(20px - var(--solo-logo-base) * (var(--solo-logo-scale) - 1) / 2);
  }

  .home-page .hero__brands--solo .hero__brand-logo {
    height: calc(var(--solo-logo-base) * var(--solo-logo-scale));
  }
}

.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;
  bottom: 48px;
  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%;
  }
}

@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;
    /* Offset below the logo banner (top); CR now sits in its own band above the
       hero, so no bottom reserve is needed. */
    top: 92px;
    bottom: 24px;
  }

  /* No brand band (non-platinum hero): content starts near the top, no offset
     reserving space for a band that isn't rendered. */
  .home-page .hero--no-brands .hero__content {
    top: 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 (max-width: 767px) {
  .home-page .warranty-section-inner {
    flex-direction: column-reverse;
    gap: 24px;
  }

  .home-page .warranty-section-text,
  .home-page .warranty-section-image {
    flex: 1 1 100%;
  }

  .home-page .warranty-section-image img,
  .home-page .warranty-section-image picture img {
    width: 100%;
  }

  .home-page .warranty-section {
    padding: 32px 0;
  }
}

@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;
  }
}

/* BRAND SPOTLIGHT (temporary): the campaign artwork puts its subject (the Nexen
   tire) dead center, where centered hero copy sits right on top of it. This
   variant anchors the copy to the left instead, on the same 24px gutter and
   1400px content column the sections below the hero use, 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.
   Remove with the rest of the spotlight hardcode; the default hero is centered. */
.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%
    );
  }

  /* Pill left-aligned to stack over the left-aligned copy instead of floating
     center over the artwork's subject. The offset resolves to the same edge the
     headline starts on: the 1400px column's left side plus the 24px gutter,
     collapsing to a flat 24px once the viewport is narrower than the column.
     Scoped to min-width 768px because below that the band drops the pill and
     becomes a full-width strip, where left-aligning has nothing to align to. */
  .home-page .hero__brands--solo {
    left: max(24px, calc((100% - 1400px) / 2 + 24px));
    transform: none;
    /* Drop the band down out of the hero's top corner so it groups with the
       copy. Offset from the copy's own center rather than from the hero's top:
       .hero__content is vertically centered with a 48px bottom inset, so its
       center sits at 50% - 24px, and the copy block's height does not change
       with viewport height. Anchoring here keeps the gap above the headline
       constant at every hero height instead of drifting the way a fixed top or
       a percentage would. The 290px is the one number to nudge. */
    top: calc(50% - 290px);
    /* Rectangle, not a pill: the pill shape suited a row of four wordmarks
       reading as a badge strip. A single spotlighted mark reads as a plate. */
    border-radius: 0;
    /* Tighter than the four-logo pill's 34px so the mark sits close to the
       headline's left edge instead of visibly indented from it. */
    padding: 16px 20px;
  }

  /* Solo mark carries the band on its own, so it goes up well past the 46px
     --tall height tuned for sitting in a row of four. Overrides both
     .hero__brand-logo and --tall via the extra class in the selector. */
  .home-page .hero__brands--solo .hero__brand-logo {
    height: 64px;
  }
}