/* V24 — homepage hero layout repair
   Keep copy + vehicle in the first row and place the route form as a full-width second row. */

/* The original hero is flex; with the new form that forced all children into one row.
   Make the homepage hero a normal vertical flow instead. */
.hero{
  display:block!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  padding:118px 0 62px!important;
}

.hero-grid{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  padding-top:24px!important;
  grid-template-columns:minmax(0,1.04fr) minmax(360px,.78fr)!important;
  gap:64px!important;
  align-items:center!important;
}

.hero-copy{min-width:0}
.hero-copy h1{
  max-width:680px!important;
  font-size:clamp(4.25rem,6.7vw,7.25rem)!important;
}
.hero-copy p{max-width:610px!important}

/* Keep the right visual comfortably sized instead of squeezing it. */
.hero-visual{
  width:100%;
  max-width:510px!important;
  justify-self:end;
}

/* Full-width second row below the hero content. */
.home-route-wrap{
  width:min(1180px,calc(100% - 48px));
  margin:44px auto 0!important;
  padding:24px 26px 26px!important;
  border-radius:22px!important;
}
.home-route-head{
  align-items:center!important;
  margin-bottom:18px!important;
}
.home-route-head>div{
  display:block!important;
}
.home-route-kicker{
  display:block;
  margin-bottom:3px;
}
.home-route-head strong{
  display:block;
  font-size:1.55rem!important;
}
.home-route-head p{
  max-width:430px;
  font-size:.78rem!important;
}

.home-route-form{
  grid-template-columns:minmax(180px,1.35fr) minmax(180px,1.35fr) minmax(130px,.85fr) minmax(90px,.55fr) minmax(160px,1fr) auto!important;
  gap:12px!important;
}
.route-field input,
.home-route-submit{
  height:56px!important;
  min-height:56px!important;
}
.home-route-submit{padding-inline:24px!important}

/* The scroll cue should not sit over the new panel. */
.scroll-cue{display:none!important}

@media(max-width:1180px){
  .hero{padding:108px 0 58px!important}
  .hero-grid{
    width:min(100% - 40px,1080px);
    grid-template-columns:minmax(0,1fr) minmax(330px,.75fr)!important;
    gap:46px!important;
  }
  .hero-copy h1{font-size:clamp(3.9rem,7.2vw,6.4rem)!important}
  .hero-visual{max-width:465px!important}
  .home-route-wrap{width:min(100% - 40px,1080px);margin-top:38px!important}
  .home-route-form{
    grid-template-columns:1fr 1fr .78fr .62fr!important;
  }
  .route-phone{grid-column:1/3!important}
  .home-route-submit{grid-column:3/5!important;width:100%}
}

@media(max-width:900px){
  .hero{padding:96px 0 52px!important}
  .hero-grid{
    width:min(100% - 32px,760px);
    grid-template-columns:1fr!important;
    gap:42px!important;
    padding-top:16px!important;
  }
  .hero-copy{max-width:700px}
  .hero-copy h1{max-width:700px!important}
  .hero-visual{
    justify-self:center;
    max-width:480px!important;
  }
  .home-route-wrap{
    width:min(100% - 32px,760px);
    margin-top:38px!important;
  }
}

@media(max-width:700px){
  .home-route-wrap{padding:20px!important}
  .home-route-head{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:8px!important;
  }
  .home-route-head p{text-align:left!important;max-width:none}
  .home-route-form{grid-template-columns:1fr 1fr!important}
  .route-from,.route-to,.route-phone{grid-column:1/-1!important}
  .home-route-submit{grid-column:1/-1!important}
}

@media(max-width:520px){
  .hero{padding:88px 0 44px!important}
  .hero-grid{width:calc(100% - 28px);gap:34px!important}
  .hero-copy h1{font-size:clamp(3.15rem,15vw,4.7rem)!important}
  .hero-visual{max-width:390px!important}
  .home-route-wrap{
    width:calc(100% - 28px);
    margin-top:30px!important;
    padding:18px 16px!important;
  }
  .home-route-form{grid-template-columns:1fr!important;gap:10px!important}
  .route-from,.route-to,.route-phone,.route-passengers,.home-route-submit{grid-column:auto!important}
  .route-field input,.home-route-submit{height:52px!important;min-height:52px!important}
}