/* Full-width navigation: quiet over the hero, warm and legible after scrolling. */
html{scroll-padding-top:94px}
.showcase-grid>.showcase,.hotel-wall{scroll-margin-top:-94px}
.site-header,
.site-header.is-solid{
  position:fixed;
  inset:0 0 auto;
  width:100%;
  max-width:none;
  height:62px;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  transition:background .32s ease,color .32s ease,box-shadow .32s ease,border-color .32s ease;
}
.site-header{
  color:#fff;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.site-header.is-solid{
  color:#24211e;
  background:rgba(249,247,242,.64);
  border-bottom:1px solid rgba(255,255,255,.55);
  box-shadow:0 9px 28px rgba(35,28,22,.09);
  -webkit-backdrop-filter:blur(28px) saturate(125%);
  backdrop-filter:blur(28px) saturate(125%);
}
.site-header .header-inner{
  width:88%;
  max-width:1320px;
  height:100%;
  margin-inline:auto;
  padding-inline:0;
}
.site-header .brand,
.site-header .primary-nav>a{text-shadow:0 1px 4px rgba(17,12,8,.7),0 2px 18px rgba(17,12,8,.5)}
.site-header .primary-nav>a{transition:color .3s ease,text-shadow .3s ease}
.site-header.is-solid .brand,
.site-header.is-solid .primary-nav>a{text-shadow:none}
.contact-widget{
  position:fixed;
  right:max(6%,calc((100% - 1320px)/2));
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  z-index:60;
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  gap:12px;
  max-width:calc(100% - 36px);
}
.contact-fab{
  flex:none;
  padding:0;
  cursor:pointer;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.48);
  border-radius:50%;
  color:#fffaf3;
  background:rgba(72,58,44,.92);
  box-shadow:0 7px 22px rgba(29,22,16,.18);
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.contact-fab svg{width:21px;height:21px}
.contact-fab:hover{
  transform:translateY(-3px);
  background:#5b4938;
  box-shadow:0 10px 25px rgba(29,22,16,.23);
}
.contact-fab:focus-visible{outline:3px solid #d3b893;outline-offset:4px}
@media(max-width:760px){
  html{scroll-padding-top:70px}
  .showcase-grid>.showcase,.hotel-wall{scroll-margin-top:-70px}
  .site-header,.site-header.is-solid{inset:0 0 auto;width:100%;height:50px;border-radius:0}
  .site-header .header-inner{width:88%;padding-inline:0}
  .site-header .menu-toggle{
    color:inherit;
    width:38px;
    height:38px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.7);
  }
  .site-header.is-solid .menu-toggle{
    background:#eee9e1;
    border-color:#ded6cb;
  }
  .site-header .primary-nav{
    top:50px;
    left:0;
    right:0;
    padding:12px 6% 24px;
    border:0;
    border-radius:0;
    background:#f8f6f1;
    box-shadow:0 16px 28px rgba(40,32,25,.12);
    color:#24211e;
  }
  .site-header .primary-nav>a{text-shadow:none}
  .contact-widget{right:max(18px,6%);bottom:calc(14px + env(safe-area-inset-bottom, 0px));gap:8px}
  .contact-fab{
    width:44px;
    height:44px;
  }
  .contact-fab svg{width:19px;height:19px}
  /* Keep product detail controls clear of the persistent contact button. */
  .showcase .showcase-detail summary{padding-right:54px}
}
@media(prefers-reduced-motion:reduce){.contact-fab{transition:none}.contact-fab:hover{transform:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header.is-solid{background:#f9f7f2}
}
@media(prefers-reduced-transparency:reduce){
  .site-header.is-solid{background:#f9f7f2}
}

/* The number uses the same editable contact field as the footer. */
.contact-phone[hidden]{display:none}
.contact-phone a{display:flex;align-items:center;min-height:48px;padding:10px 18px;border:1px solid #d8cdbd;border-radius:24px;background:#fffaf3;color:#493b2e;font-size:16px;font-weight:500;letter-spacing:.025em;white-space:nowrap;box-shadow:0 7px 22px #1d16102e;animation:contact-number-in .2s ease-out both}
.contact-phone a:hover{background:#fff}
.contact-phone a:focus-visible{outline:3px solid #a68b66;outline-offset:3px}
@keyframes contact-number-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:760px){.contact-phone a{min-height:44px;font-size:14px;padding:10px 14px}}
@media(prefers-reduced-motion:reduce){.contact-phone a{animation:none}}