/* Header "Book Your Stay" = shell sample 04 "Hairline Frame" (button-shell/, client pick 2026-10-28):
   pale blush sand, fine inset rule, scallop shell leading, Univers caps. Loaded last; overrides
   .pha__book in park-here-aerial-live.css. */
@font-face{font-family:"HBS Univers";src:url("../fonts/library/univers-next-paneuropean/univers-next-paneuropean-400.woff2") format("woff2");font-weight:400;font-display:swap}

.pha__book{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  gap:14px;
  width:auto;
  height:60px;
  padding:0 38px;
  border-radius:2px;
  background:#F6DDD0;
  color:#6E3E2E;
  font:400 14px/1 "HBS Univers","Helvetica Neue",Arial,sans-serif;
  letter-spacing:.3em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 12px 28px -12px rgba(6,34,48,.35);
  transition:transform .5s cubic-bezier(.22,.7,.2,1),box-shadow .5s cubic-bezier(.22,.7,.2,1);
}
/* sand texture + soft top light */
.pha__book::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .98 0 0 0 0 .95 0 0 0 9 -5.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .43 0 0 0 0 .25 0 0 0 0 .17 0 0 0 1.9 -.98'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px,180px 180px;opacity:.55;mix-blend-mode:multiply}
.pha__book::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 45%,rgba(110,62,46,.06))}
.pha__book-frame{position:absolute;inset:5px;border:1px solid rgba(110,62,46,.4);pointer-events:none;transition:inset .5s cubic-bezier(.22,.7,.2,1)}
.pha__book .pha__book-shell{flex:none;width:24px;height:22px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;transition:none}
.pha__book:hover{background:#F6DDD0;transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(6,34,48,.4)}
.pha__book:hover svg{transform:none}
.pha__book:hover .pha__book-frame{inset:8px}
.pha__book:focus-visible{outline:1px solid #B8705A;outline-offset:4px}

@media (max-width:1450px){
  .pha__book{width:auto;height:56px;padding:0 32px;font-size:13px}
}
@media (max-width:900px){
  .pha__book{width:auto;height:48px;padding:0 20px;gap:10px;font-size:11px;letter-spacing:.24em}
  .pha__book .pha__book-shell{width:20px;height:18px}
  .pha__book-frame{inset:4px}
  .pha__book:hover .pha__book-frame{inset:6px}
}
/* small phones: shell only (label hidden by the base sheet's font-size:0) */
@media (max-width:480px){
  .pha__book{width:48px;padding:0;gap:0;border-radius:2px;font-size:0;letter-spacing:0}
  .pha__book .pha__book-shell{width:22px;height:20px}
}
@media (prefers-reduced-motion:reduce){.pha__book,.pha__book-frame{transition:none}}


/* Menu button (client 2026-10-28): no background or frame; heavy caps + thick lines filled with
   the Book Your Stay blush sand (gradient + the same grain, clipped to the letters / lines) so the two
   read as a pair on the dark hero. Middle line is shorter in deeper coral and grows on hover.
   Montserrat (variable, fonts/hero) because the Univers files are 400 only. Overrides hero-aerial-polish.css. */
@font-face{font-family:"HBS Montserrat";src:url("../fonts/hero/montserrat-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
.pha__menu{
  --sand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .98 0 0 0 0 .95 0 0 0 9 -5.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .43 0 0 0 0 .25 0 0 0 0 .17 0 0 0 1.9 -.98'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  gap:14px;
  min-width:0;
  height:60px;
  padding:0 4px;
  border:0;
  border-radius:0;
  background:none;
  color:#F6DDD0;
  font:800 17px/1 "HBS Montserrat","Helvetica Neue",Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
  box-shadow:none;
  filter:drop-shadow(0 2px 10px rgba(5,26,34,.5));
}
.pha__menu-label{
  letter-spacing:.16em;margin-right:-.16em;
  background-image:var(--sand),linear-gradient(180deg,#FBEDE5 0%,#F6DDD0 45%,#EFC9B8 100%);
  background-size:220px 220px,180px 180px,100% 100%;
  background-blend-mode:multiply,multiply,normal;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.pha__menu-lines{width:30px;gap:6px;justify-items:end}
.pha__menu-lines i{
  height:4px;border-radius:2px;
  background-color:#F6DDD0;
  background-image:var(--sand),linear-gradient(180deg,#FBEDE5,#EFC9B8);
  background-size:220px 220px,180px 180px,100% 100%;
  background-blend-mode:multiply,multiply,normal;
  transition:width .45s cubic-bezier(.22,.7,.2,1),transform .45s cubic-bezier(.22,.7,.2,1);
}
.pha__menu-lines i:nth-child(2){width:62%;background-color:#E4B19C;background-image:var(--sand),linear-gradient(180deg,#EFC9B8,#D3937A)}
.pha__menu:hover{background:none;transform:none;box-shadow:none}
.pha__menu:hover .pha__menu-lines i:first-child,.pha__menu:hover .pha__menu-lines i:last-child{transform:none}
.pha__menu:hover .pha__menu-lines i:nth-child(2){width:100%}
.pha__menu:focus-visible{outline:2px solid #F6DDD0;outline-offset:6px}

@media (max-width:1450px){
  .pha__menu{height:56px;font-size:16px;padding:0 4px}
}
@media (max-width:900px){
  .pha__menu{width:48px;min-width:48px;height:48px;padding:0;justify-content:center}
  .pha__menu-lines{width:28px;gap:6px}
}
@media (prefers-reduced-motion:reduce){.pha__menu-lines i{transition:none}}