/* Focused homepage refinement: header logo, hero sizing and reusable bike cards. */

/* Enlarge the visible logo without increasing the header's layout height. */
body.home .sta-header-main {
  grid-template-columns:420px minmax(360px,1fr) auto;
  gap:20px;
  padding-block:10px;
}

body.home .sta-logo img {
  transform:scale(1.5);
  transform-origin:left center;
}

/* Keep the existing hero image and gradient layers untouched. */
.sta-hero {
  min-height:clamp(504px,42.3vw,612px);
}

.sta-hero__copy {
  padding:66px 0 60px;
}

.sta-hero h1 {
  font-size:clamp(42px,4.55vw,66px);
  line-height:.9;
}

/* Reusable Shop-by-Bike taxonomy cards. */
.sta-brand-grid a.sta-brand-card {
  height:72px;
  flex-direction:column;
  gap:6px;
  padding:8px 10px 7px;
  border:1px solid transparent;
  background:#171c22;
}

.sta-brand-card img {
  display:block;
  width:34px;
  height:30px;
  object-fit:contain;
  filter:grayscale(1) brightness(0) invert(1);
  opacity:.92;
  transition:filter .2s ease,opacity .2s ease,transform .2s ease;
}

.sta-brand-card span {
  color:#f2f5f7;
  font-family:"Arial Narrow",Arial,sans-serif;
  font-size:10px;
  font-weight:850;
  line-height:1;
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
}

.sta-brand-card:hover,
.sta-brand-card:focus-visible {
  border-color:var(--sta-blue);
  outline:0;
  background:#1b222a;
  box-shadow:inset 0 -2px var(--sta-blue),0 0 0 1px rgba(22,142,242,.16);
}

.sta-brand-card:hover img,
.sta-brand-card:focus-visible img {
  filter:grayscale(1) brightness(0) saturate(100%) invert(51%) sepia(94%) saturate(2567%) hue-rotate(182deg) brightness(101%) contrast(101%);
  opacity:1;
  transform:translateY(-1px);
}

.sta-brand-card:hover span,
.sta-brand-card:focus-visible span {
  color:var(--sta-blue-light);
}

@media(max-width:1180px) {
  body.home .sta-header-main {
    grid-template-columns:330px minmax(300px,1fr) auto;
    gap:15px;
  }
}

@media(max-width:900px) {
  body.home .sta-header-main {
    grid-template-columns:1fr auto auto;
  }

  body.home .sta-logo img {
    transform:scale(1.42);
  }

  .sta-hero {
    min-height:630px;
  }

  .sta-hero__copy {
    padding:252px 0 48px;
  }

  .sta-hero h1 {
    font-size:clamp(37px,7.2vw,54px);
    line-height:.9;
  }
}

@media(max-width:560px) {
  body.home .sta-logo img {
    transform:scale(1.38);
  }

  .sta-hero {
    min-height:585px;
  }

  .sta-hero__copy {
    padding:220px 0 36px;
  }

  .sta-hero h1 {
    font-size:clamp(32px,9.2vw,40px);
  }

  .sta-brand-grid a.sta-brand-card {
    height:66px;
    gap:5px;
    padding-block:7px 6px;
  }

  .sta-brand-card img {
    width:31px;
    height:27px;
  }

  .sta-brand-card span {
    font-size:9px;
  }
}