/* Phones and tablets. Loaded last so it settles the small-screen layout for every page in both directions. */

.hero-short{display:none}

/* ---------- phones ---------- */
@media (max-width:640px){
  /* Heroes stay full-bleed: the photo fills the screen, the headline sits on it,
     and the first booking question follows on the same dark band. */
  html body .hero,html body .vh,html body .phero{--hp:62vh;position:relative;display:block;min-height:0;padding:0;background:var(--dark);color:#fff;overflow:hidden}
  html body.dir-b .phero,html body.dir-b .phero-short,html body.dir-a .phero{display:block;min-height:0;padding:0;background:var(--dark);color:#fff}
  html body .vh{--hp:62vh}
  html body .phero{--hp:62vh}
  html body .phero-short{--hp:56vh}
  @supports (height:1svh){
    html body .hero{--hp:62svh}html body .vh{--hp:62svh}html body .phero{--hp:62svh}html body .phero-short{--hp:56svh}
  }
  html body .hero-bg,html body.dir-a .hero-bg,html body .vh-v,html body .ph-bg{position:absolute;inset:0 0 auto 0;height:var(--hp);overflow:hidden}
  html body .hero-bg img,html body .vh-v img,html body .ph-bg img{object-position:58% 50%}
  html body .hero-bg::after,html body .ph-bg::after{background:linear-gradient(180deg,rgba(9,15,11,.5) 0,rgba(9,15,11,0) 18%,rgba(9,15,11,0) 52%,rgba(9,15,11,.72) 78%,var(--dark) 94%)}
  html body .vh::before{inset:0 0 auto 0;height:var(--hp);background:linear-gradient(180deg,rgba(8,18,11,.2) 0,rgba(8,18,11,0) 26%,rgba(8,18,11,0) 50%,rgba(8,18,11,.8) 78%,var(--dark) 94%)}
  html body .hero-in,html body .vh-in,html body .ph-in{position:relative;z-index:2;display:block;padding:0 var(--gut) 30px}
  html body .hero-copy,html body .vh-copy,html body .ph-copy{min-height:var(--hp);display:flex;flex-direction:column;justify-content:flex-end;padding:96px 0 24px}
  html body .vh-copy{padding-top:40px}
  /* copy overlaps the bottom of the photo instead of sitting under a fixed-height block */
  html body .hero-copy,html body .vh-copy,html body .ph-copy{min-height:0;margin-top:max(150px,calc(var(--hp) - 270px));padding-top:0}
  html body .phero-short .ph-copy{margin-top:calc(var(--hp) - 190px)}
  html body .hero-copy>p.intro{display:none}
  html body .hero-short{display:block}
  html body .phero-short .ph-in{padding-bottom:0}

  html body .hero h1{font-size:clamp(36px,10.4vw,44px);line-height:.98;color:#fff;white-space:normal}
  html body .vh h1{font-size:clamp(36px,10vw,44px);color:#fff}
  html body .ph-copy h1,html body.dir-a .ph-copy h1,html body.dir-b .ph-copy h1{font-size:clamp(30px,8.6vw,38px);color:#fff}
  html body .hero-copy>p,html body .vh-copy>p,html body .ph-copy>p{color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.5;margin-top:14px}
  html body .crumbs{color:rgba(255,255,255,.7);margin-bottom:12px}
  html body .crumbs a{color:#fff}

  /* proof line wraps as one tidy row, no orphaned bullets */
  html body .proof{flex-direction:row;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font-size:13.5px;color:#fff}
  html body .proof li+li::before{display:none}
  html body .proof a{color:#fff;font-weight:600}
  html body .vh-proof{margin-top:18px;padding-top:14px}
  html body .vh-proof>div{border-left-color:rgba(255,255,255,.22)}
  html body .vh-proof dt{color:#fff;font-size:28px}
  html body .vh-proof dd{color:rgba(255,255,255,.78)}

  /* first booking question: glass on the dark band */
  html body :is(.hero,.vh,.phero) .hs{color:#fff;padding:20px 16px 16px;border-radius:16px;border:0;
    background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 50%),rgba(255,255,255,.04);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.18)}
  html body.dir-b :is(.vh,.phero) .hs{border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 3px 0 var(--lime)}
  html body :is(.hero,.vh,.phero) .hs-t{color:#fff;font-size:22px;padding-right:0}
  html body :is(.hero,.vh,.phero) .hs-s{color:rgba(255,255,255,.74);margin-bottom:0}
  html body :is(.hero,.vh,.phero) .hs-g{margin-top:16px;gap:8px}
  html body :is(.hero,.vh,.phero) .hs-g button{min-height:52px;padding:10px 12px;font-size:14.5px;color:#fff;background:rgba(255,255,255,.08);border:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .2s,transform .2s}
  html body.dir-b :is(.vh,.phero) .hs-g button{border-radius:6px}
  html body :is(.hero,.vh,.phero) .hs-g button svg{opacity:.7}
  html body.dir-b :is(.vh,.phero) .hs-g button svg{color:var(--lime);opacity:1}
  html body :is(.hero,.vh,.phero) .hs-g button:active{background:#fff;color:#111;transform:scale(.98)}
  html body .hs-tog{display:none}
  html body .ph-form,html body .hero-form,html body .vh-form{max-width:none;margin:0}

  /* logo: keep the full wordmark legible next to the leaf */
  .dir-a .logo{gap:11px}
  .dir-a .logo .mono{width:42px}
  .logo-w b{font-size:17px}
  .logo-w span{display:block;font-size:8.2px;margin-top:5px}

  /* tighter section rhythm on a phone */
  .dir-a .sec,.inner .sec{padding:64px 0}
  .dir-b .fsec{padding:60px 0}
  .sec-head{margin-bottom:28px;gap:14px}
  .sec-head p{justify-self:start;font-size:16.5px}
  h2{text-wrap:balance}

  /* small details */
  .c-lab{display:none}
  .lv-ctl{gap:14px}
  .lv-tabs{display:grid;grid-template-columns:1fr 1fr}
  .cf-name{font-size:13.5px}
  .st-note{display:none}
}

@media (max-width:380px){
  .logo-w b{font-size:15.5px}
  .logo-w span{font-size:7.4px;letter-spacing:.22em}
  html body :is(.hero,.vh,.phero) .hs-g button{font-size:13.5px;padding:10px}
}

/* ---------- tablets (iPad portrait and landscape) ---------- */
@media (min-width:641px) and (max-width:1180px){
  /* headline and the first question share the photo, question under the copy at a readable width */
  .dir-a .hero{min-height:min(100svh,1100px)}
  .dir-a .hero-in,.ph-in{gap:28px}
  .dir-a .hero-form,.ph-form,.vh-form{max-width:520px}
  .dir-a .hero h1{white-space:normal;font-size:clamp(52px,8vw,72px)}
  .dir-b .vh-in{grid-template-columns:1fr;gap:28px}
  .dir-b .vh h1{max-width:none}
  /* the hover-to-open card has no hover on a tablet, so keep the choices open */
  .hs-c .hs-x{grid-template-rows:1fr!important}
  .hs-c .hs-g button{opacity:1!important;transform:none!important}
  .hs-tog{display:none!important}
}
@media (min-width:641px) and (max-width:900px){
  .st{height:auto}
}
@media (min-width:901px) and (max-width:1180px){
  .dir-a .hero h1{font-size:clamp(50px,5.6vw,62px)}
  .ph-copy h1,.dir-a .ph-copy h1{font-size:clamp(38px,4.4vw,52px)}
}