/* At the top the header is a translucent navy veil over the hero; the hero
   render reaches the viewport top, so no hard image edge shows through.
   Once sticky the surface turns the same opaque navy as before. */
.booking-header{background:#081b2bcc;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom-color:#ffffff14;transition:background .3s,transform .3s,border-color .3s,box-shadow .3s}
.booking-header.scrolled{background:var(--navy);border-bottom-color:#ffffff22;box-shadow:0 10px 30px #06162440}
.booking-header ~ main .hero-image-wrap{top:0}
.booking-header .header-booking{flex-shrink:0;align-self:center;min-height:44px;padding:8px 16px;gap:12px;font-size:16px;white-space:nowrap}
.booking-header .header-booking .button-arrow{width:28px;height:28px;font-size:18px}
.booking-header .header-booking:focus-visible{outline:3px solid white;outline-offset:4px}
.header-booking[aria-busy=true]{cursor:progress;opacity:.8}
.booking-notice,.booking-nojs{position:absolute;top:100%;right:var(--pad);max-width:calc(100% - 2 * var(--pad));padding:16px 20px;background:var(--navy);color:white;border:1px solid var(--cyan);font-size:14px;line-height:1.6}
.booking-notice a{display:flex;align-items:center;min-height:44px;color:var(--cyan);text-decoration:underline}
.booking-header{gap:14px}
.booking-header .desktop-nav{flex-wrap:wrap;column-gap:12px;row-gap:0}
.booking-header .desktop-nav a{padding-block:10px}
@media(max-width:760px){.booking-header .header-phone-number{display:none}}
@media(min-width:601px) and (max-width:900px){
  .booking-header:not(.opportunity-header),.booking-header.scrolled{height:72px;padding-block:0}
}
@media(min-width:901px){
  .booking-header:not(.opportunity-header),.booking-header.scrolled{height:auto;min-height:72px;padding-block:0}
  html:has(.booking-header){scroll-padding-top:96px}
}
@media(max-width:600px){
  .booking-header:not(.opportunity-header),.booking-header.scrolled{height:auto;display:grid;grid-template-columns:1fr 44px 44px;gap:4px 12px;padding-block:8px}
  .booking-header .header-phone{margin:0}
  .booking-header .menu-toggle{grid-column:3;grid-row:1}
  /* On phones the fixed bottom "call / request" bar replaces the header
     booking button; the YClients flow stays reachable on wider screens. */
  .booking-header .header-booking{display:none}
  .booking-header ~ main .hero-content{padding-top:124px}
  html:has(.booking-header){scroll-padding-top:104px}
}
@media(min-width:1300px) and (max-width:1600px){
  .booking-header{padding-inline:32px}
  .booking-header .brand{width:170px}
}
@media(min-width:901px) and (max-width:1100px){
  .booking-header{display:grid;grid-template-columns:1fr auto auto;gap:4px 16px}
  .booking-header .brand{grid-column:1;grid-row:1}
  .booking-header .header-phone{grid-column:2;grid-row:1}
  .booking-header .header-booking{grid-column:3;grid-row:1}
  .booking-header .desktop-nav{grid-column:1 / -1;grid-row:2}
}
html:not(.js-ready) .header-booking{display:none}