/* Search-first layout: retain the approved map and branding, reduce the hero. */
.header{height:72px}
.hero{height:240px}
.hero-image{
  inset:0 0 auto auto;
  width:min(900px,78%);
  height:100%;
  object-fit:cover;
  object-position:center top;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%);
  mask-image:linear-gradient(90deg,transparent,#000 24%);
}
.hero-shade{
  background:linear-gradient(90deg,#081722 15%,#081722f2 30%,#0817226b 53%,transparent 72%);
}
.hero-copy{padding-top:28px}
.hero-copy h1{font-size:clamp(38px,3.4vw,48px);line-height:1.04;letter-spacing:-1.8px}
.hero-copy p{font-size:18px;letter-spacing:-.3px;margin-top:10px}
.illustration-note{bottom:64px;right:32px;font-size:9px;padding:3px 5px}
.booking-wrap{margin-top:-54px}
.main-tabs{padding-top:8px}
.main-tabs button{min-height:50px;min-width:150px;padding:10px 18px;font-size:16px}
.booking-card{padding:12px 18px 8px}
.flight-options{margin-bottom:6px}
.field{min-height:70px;padding:11px 13px}
.search-button{min-height:58px}
.benefit{margin-top:12px;padding:12px 15px}
.card-bottom{justify-content:flex-end;padding-block:8px}
.footer{padding-block:24px}

@media(max-width:1150px){
  .hero{height:220px}
  .hero-copy{padding-top:24px}
  .hero-copy h1{font-size:40px}
  .hero-copy p{font-size:17px}
  .illustration-note{right:24px}
  .main-tabs button{min-width:135px;padding-inline:14px}
}

/* Keep all secondary services on one line beside the tabs on small tablets. */
@media(min-width:761px) and (max-width:1000px){
  .secondary-services{gap:3px}
  .secondary-services button{font-size:12px;padding-inline:6px}
}

@media(max-width:760px){
  html{scroll-padding-top:76px}
  .header{height:64px}
  .hero{height:152px}
  .hero-image{
    top:0;bottom:auto;right:-72px;
    width:500px;max-width:none;height:100%;
    object-position:center top;
  }
  .hero-shade{
    background:linear-gradient(90deg,#081722f5 0%,#081722cf 32%,#08172280 62%,#08172220 100%);
  }
  .hero-copy{padding-top:16px;margin-inline:16px}
  .hero-copy h1{font-size:30px;line-height:1.05;letter-spacing:-.9px}
  .hero-copy p{font-size:14px;letter-spacing:-.2px;margin-top:7px}
  .illustration-note{right:10px;bottom:7px;font-size:8px;padding:2px 4px}
  .booking-wrap{margin-top:0}
  .main-tabs{padding:8px 10px 0}
  .main-tabs button{min-width:0;min-height:48px;padding:10px}
  .booking-card{padding:0 12px 8px}
  .field{min-height:60px;padding:8px 12px}
  .field input{font-size:16px}
  .date input{font-size:14px}
  .search-button{min-height:52px}
  .benefit{padding:12px 10px}
}

/* Keep the primary action in view even on short, narrow phone screens. */
@media(max-width:760px) and (max-height:700px){
  .header{height:60px}
  .hero{height:100px}
  .hero-copy{padding-top:8px}
  .hero-copy h1{font-size:26px;line-height:1.04}
  .hero-copy p{font-size:13px;margin-top:6px}
  .illustration-note{font-size:7px;bottom:1px}
  .main-tabs{padding-top:6px}
  .main-tabs button{min-height:44px;padding-block:8px}
}