/* Compact homepage hero, matching the reference site's 400px background area. */
.home-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.home-header.is-scrolled {
  height: 72px;
  background: #fff;
  border-bottom: 1px solid #e7edf4;
  box-shadow: 0 4px 18px #153e6510;
}
.hero {
  height: 400px;
  min-height: 400px;
  background-color: #e7f3ff;
  background-image: url('/assets/ossbuy-hero.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero::after { display: none; }
.hero-inner {
  display: flex;
  align-items: center;
  min-height: 0;
  height: 100%;
  padding-block: 91px 27px;
  gap: 0;
}
.hero-copy { width: 61%; max-width: 730px; }
.hero h1 {
  font-size: clamp(38px, 3.4vw, 49px);
  line-height: 1.12;
  letter-spacing: -1.9px;
}
.hero-description {
  max-width: 600px;
  margin-top: 13px;
  color: #345a7d;
  font-size: 14px;
  line-height: 1.7;
}
.hero .search-form {
  max-width: 650px;
  width: 100%;
  margin-top: 20px;
  border-color: #fff;
  box-shadow: 0 5px 20px #2d6c9f0b;
}
.hero-actions { gap: 22px; margin-top: 16px; }
.hero-actions .button { min-height: 43px; font-size: 12px; }
.hero-secondary { color: #284e73; font-size: 12px; }
@media (min-width: 1600px) {
  .hero-copy { width: 65%; }
  .hero-inner { padding-block: 91px 27px; }
}
@media (max-width: 1100px) {
  .hero { background-position: 75% center; }
  .hero-copy { width: 64%; }
  .hero h1 { font-size: 38px; }
  .hero-description { font-size: 13px; }
}
@media (max-width: 800px) {
  .hero-copy { width: 72%; }
  .hero h1 { font-size: 35px; }
  .hero-description { font-size: 12px; }
  .hero .search-form { width: 100%; }
}
@media (max-width: 600px) {
  .home-header, .home-header.is-scrolled { height: 69px; }
  .home-header:not(.is-scrolled) .site-nav.is-open { background: #fff; }
  .hero {
    height: 400px;
    min-height: 400px;
    background-position: 75% bottom;
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #eef7fff5 0%, #eef7ffe0 45%, #eef7ff24 100%);
    pointer-events: none;
  }
  .hero-inner { display: flex; padding-block: 84px 20px; }
  .hero-copy { width: 100%; max-width: 420px; }
  .hero h1 { font-size: var(--compact-hero-title, 34px); letter-spacing: -1.4px; max-width: 355px; }
  .hero-description { margin-top: 12px; font-size: 12px; max-width: 305px; }
  .hero .search-form { margin-top: 19px; }
  .hero-actions { gap: 15px; margin-top: 15px; }
  .hero-actions .button { font-size: 10px; min-height: 42px; }
  .hero-secondary { font-size: 10px; }
}
/* Keep the complete brand title and both actions clear of the header on narrow phones. */
@media (max-width: 360px) {
  :root { --compact-hero-title: clamp(25px, 8vw, 28px); }
}