/* V235 cache-busted responsive refinements based on V234. */
.tablet-headlight-silhouette{display:none}

/* Homepage title artwork shared by desktop, tablet, and phone. The live H1
   remains in the markup as screen-reader text for SEO and accessibility. */
.hero h1.hero-title-graphic{
  display:block!important;
  width:min(100%,600px)!important;
  max-width:600px!important;
  margin:0!important;
  line-height:0!important;
  letter-spacing:0!important;
  text-shadow:none!important;
}

/* Keep the replacement artwork in the same visual footprint as the original
   live headline at each layout breakpoint. */
@media (min-width:701px) and (max-width:1060px){
  .hero h1.hero-title-graphic{
    width:min(55%,520px)!important;
    max-width:520px!important;
    margin-inline:0!important;
  }
}
@media (max-width:700px){
  .hero h1.hero-title-graphic{
    width:min(88%,420px)!important;
    max-width:420px!important;
    margin-inline:0!important;
  }
}
.hero h1.hero-title-graphic>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  object-fit:contain;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.34));
}

@media (min-width:701px) and (max-width:1060px){
  /* Homepage sequence: copy -> interactive hero -> CTAs -> benefit icons. */
  .hero{
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
  }
  .hero>.hero-copy,
  .hero>.hero-copy>.hero-below{
    display:contents!important;
  }
  /* The legacy rings/diagonal-line graphic loses its containment when the
     tablet copy wrapper becomes display:contents and cuts through the title. */
  .hero>.hero-copy>.hero-orbit{
    display:none!important;
  }
  .hero>.hero-copy>.eyebrow{
    order:1;
    width:min(100%,820px);
    margin-inline:auto!important;
  }
  .hero h1{
    order:2;
    position:relative!important;
    z-index:5!important;
    isolation:isolate;
    width:min(100%,820px);
    margin-inline:auto!important;
  }
  .hero .lede{
    order:3;
    position:relative!important;
    z-index:5!important;
    width:min(100%,820px);
    margin-inline:auto!important;
  }
  .hero>.hero-card{
    order:4;
    width:min(100%,860px)!important;
    margin:32px auto 0!important;
  }
  .hero>.hero-copy .actions{
    order:5;
    position:static!important;
    width:min(100%,780px)!important;
    margin:26px auto 0!important;
  }
  /* The original CTA-anchored silhouette becomes a foreground overlay when
     the tablet layout uses display:contents. The dedicated tablet silhouette
     above replaces it, so suppress this duplicate layer. */
  .hero>.hero-copy .actions>.premium-headlight-silhouette{
    display:none!important;
  }
  .hero>.hero-copy .trust{display:none!important}
  .hero>.benefit-bar{
    order:6!important;
    width:min(100%,920px)!important;
    margin:24px auto 0!important;
  }
  .hero>.mobile-hero-tail{display:none!important}

  /* Preserve the premium headlight watermark in the headline zone. */
  .hero>.tablet-headlight-silhouette{
    position:absolute;
    z-index:0;
    top:-112px;
    right:-28%;
    display:block;
    width:116vw;
    max-width:none;
    height:auto;
    opacity:.18;
    filter:brightness(.62) contrast(1.08) saturate(.82) drop-shadow(0 0 24px rgba(24,174,255,.10));
    mix-blend-mode:normal;
    pointer-events:none;
    user-select:none;
  }
  .hero>.hero-copy,
  .hero>.hero-card,
  .hero>.benefit-bar{position:relative;z-index:1}

  /* Booking page: use the artwork's native CTA faces and place clean,
     accessible click targets over them. This removes the doubled/reversed
     button artwork and prevents clipping. */
  .booking-page .service-area-v213-art::before,
  .booking-page .service-area-v213-art::after{
    display:none!important;
  }
  .booking-page .service-area-v213-action{
    top:59.25%!important;
    width:29.2%!important;
    height:5.9%!important;
    overflow:visible!important;
    border-radius:13px!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .booking-page .service-area-v213-action-book{left:4.1%!important}
  .booking-page .service-area-v213-action-text{left:34.25%!important}
  .booking-page .service-area-v213-action>img{
    opacity:0!important;
  }
  .booking-page .service-area-v213-action:focus-visible{
    outline:3px solid #fff!important;
    outline-offset:2px!important;
  }
}