/* HERO layout */
.hero{
  position:relative;
  min-height: 92vh;
  padding-top: 30px; /* header offset */
  overflow:hidden;
  display:block;
}


.hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,.12)),
    var(--hero-img) center/cover no-repeat;
    

  /* Less zoomed-in */
  transform: none;

  /* Show more of the vans area */
  background-position: center 72%;
}

/* Fade at bottom stays */
.hero-fade{
  position:absolute;
  inset:auto 0 0 0;
  height: 42vh;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.92));
  pointer-events:none;
}

/* Content layer */
.hero-content{
  position:relative;
  height: calc(92vh - 96px);
  display:block;
  text-align:center;
}

/* TOP text sits over the vans */
.hero-upper{
  position:absolute;
  left: 0;
  right: 0;

  /* This is the "split point" – tweak this value if needed */
  top: 36%;
  transform: translateY(-50%);
  padding: 0 16px;
}

/* Bottom text + buttons under vans (inside the dark fade area) */
.hero-lower{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  padding: 0 16px;
  color: rgba(255,255,255,.92);
}

/* Title style */
.hero-title{
  margin:0;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.28;
  font-size: clamp(34px, 6vw, 72px);

  /* Helps readability over dark vans */
  color: rgba(10,10,10,.92);
  text-shadow: 0 2px 18px rgba(255,255,255,.45);
}

/* Bottom text */
.hero-sub{
  margin: 0 auto;
  max-width: 780px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.85);
}

.hero-qualifier{
  margin: 10px auto 0;
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.78);
}

/* Buttons under vans */
.hero-cta{
  margin-top: 70px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Make ghost button readable on dark */
.hero-lower .btn-ghost{
  color:#fff;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}

/* Mobile adjustments */
@media (max-width: 900px){
  .hero{ min-height: 88vh; }
  .hero-content{ height: calc(88vh - 96px); }

  .hero-upper{
    top: 34%;
  }

  .hero-lower{
    bottom: 26px;
  }
}


.hero-upper{
  top: 22%;              /* was ~36% */
}

/* 2) Make title a bit more premium: slightly smaller + softer contrast */
.hero-title{
  font-size: clamp(34px, 5.2vw, 66px);  /* slightly smaller */
  letter-spacing: .18em;                /* was .22em */
  color: rgba(0,0,0,.72);               /* softer than near-black */
  text-shadow: 0 2px 22px rgba(255,255,255,.55); /* clean halo */
}

/* 3) Reduce the heavy black at the bottom */
.hero-fade{
  height: 34vh; /* was ~42vh */
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.82));
}


.hero-lower{
  bottom: 5px; /* was ~44px */
}

.hero-sub{
  font-size: 15px;
  max-width: 640px;
  opacity: .92;
}

.hero-qualifier{
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .08em;
  opacity: .85;
}

.hero-cta{
  margin-top: 18px;
  gap: 14px;
}
.hero-bg{
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.00) 0%, rgba(0,0,0,.10) 70%, rgba(0,0,0,.18) 100%),
    linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,.10)),
    var(--hero-img) center/cover no-repeat;
}