/* Homepage hero: copy on the left, booking card on the right from tablet up. */
.hero{padding:clamp(44px,7vw,84px) 0 clamp(44px,7vw,80px);background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg-3) 100%)}
.hero .wrap{display:grid;gap:40px;position:relative}
.hero .eyebrow{display:block;margin-bottom:16px}
.hero p.lead{color:var(--ink-2);font-size:1.08rem;max-width:48ch;margin:20px 0 22px}
.hero .checks{margin-bottom:26px}
.hero .cta{display:flex;flex-wrap:wrap;gap:10px}
.faces{display:flex;align-items:center;gap:12px;margin-top:26px;font-size:.88rem;color:var(--ink-2)}
.faces .pics{display:flex;flex:0 0 auto}
.faces img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid var(--bg-2);margin-left:-10px}
.faces img:first-child{margin-left:0}

@media(min-width:768px){ /* breakpoint: tablet */
  .hero .wrap{grid-template-columns:1.05fr .95fr;align-items:start}
}
/* BUG-020: at tablet the card in the .95fr column is ~300px wide, so the date/drop-off pair clips the select text.
   Keep the pair stacked in the hero until the card has room (two-up resumes at desktop). Twin of the BUG-018 rule
   `.contact .pane .two` in contact.css: change both together. (0,3,0) beats form-card.css's `.pane .two`. */
@media(min-width:768px) and (max-width:1023px){ /* breakpoint: tablet only */
  .hero .pane .two{grid-template-columns:1fr}
}