/* ============================================================
   Frame Aesthetics Studio — Site header (Option I)
   Dark statement band: large logo + tagline, nav row below,
   Learn dropdown, mobile burger, shrink-on-scroll.
   Loaded after each page's inline <style>, so .fhdr rules win.
   ============================================================ */

.fhdr{
  position:sticky;top:0;z-index:50;
  background:#16161C;
  border-bottom:1px solid #2A2A32;
  backdrop-filter:none;
  --fhh:150px;                 /* logo height, animated on scroll */
}

/* top band --------------------------------------------------- */
.fhdr-top{
  position:relative;text-align:center;
  padding:30px 24px 22px;
  transition:padding .35s cubic-bezier(.4,0,.2,1);
}
.fhdr-logo{display:inline-block;line-height:0;position:relative}
/* trademark mark on the primary logo (site-wide) */
.fhdr-logo::after{content:"\2122";position:absolute;top:3px;right:-15px;line-height:1;
  font-family:'Jost','Avenir Next',system-ui,sans-serif;font-size:13px;font-weight:400;
  color:#C9A86A;opacity:.85;pointer-events:none}
.fhdr.shrunk .fhdr-logo::after{font-size:10px;right:-12px}
@media(max-width:860px){.fhdr-logo::after{font-size:11px;right:-12px}}
.fhdr-logo img{
  height:var(--fhh);width:auto;display:block;margin:0 auto;
  transition:height .35s cubic-bezier(.4,0,.2,1);
}
.fhdr-tag{
  font-family:'Jost','Avenir Next',system-ui,sans-serif;
  font-size:11.5px;letter-spacing:.42em;text-transform:uppercase;
  color:#C9A86A;margin-top:18px;
  overflow:hidden;max-height:24px;opacity:1;
  transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .3s,margin-top .35s;
}

/* nav row ---------------------------------------------------- */
.fhdr-nav{position:relative;border-top:1px solid #2A2A32}
.fhdr-links{
  display:flex;gap:28px;align-items:center;justify-content:center;
  list-style:none;margin:0;padding:15px 0;
}
.fhdr-links>li{position:relative}
.fhdr-links a,.fhdr-trig{
  font-family:'Jost','Avenir Next',system-ui,sans-serif;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;
  color:#C9C9D2;background:none;border:none;cursor:pointer;
  transition:color .2s;white-space:nowrap;
}
.fhdr-links a:hover,.fhdr-trig:hover{color:#C9A86A}
.fhdr-login{color:#C9A86A}
.fhdr-trig{display:inline-flex;align-items:center;gap:6px;padding:0}
.fhdr-caret{display:inline-block;transition:transform .2s}
.fhdr-has.open .fhdr-caret{transform:rotate(90deg)}

/* Learn dropdown -------------------------------------------- */
.fhdr-sub{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(6px);
  background:#1C1C24;border:1px solid #2A2A32;
  list-style:none;margin:0;padding:8px 0;min-width:184px;
  opacity:0;visibility:hidden;
  transition:opacity .2s,transform .2s,visibility .2s;z-index:60;
}
.fhdr-has:hover .fhdr-sub,.fhdr-has.open .fhdr-sub{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.fhdr-sub li{text-align:center}
.fhdr-sub a{display:block;padding:11px 22px;color:#C9C9D2}
.fhdr-sub a:hover{color:#C9A86A}

/* Book button (desktop) ------------------------------------- */
.fhdr-book{
  position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-family:'Jost','Avenir Next',system-ui,sans-serif;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:#fff;border:1px solid #A87E3F;padding:11px 20px;
  transition:background .25s,color .25s;white-space:nowrap;
}
.fhdr-book:hover{background:#A87E3F;color:#fff}
.fhdr-book-m{display:none}

/* Call us — quick tap-to-call (desktop text link + mobile top-bar icon) */
.fhdr-call{display:inline-flex;align-items:center;gap:7px;flex:none;
  font-family:'Jost','Avenir Next',system-ui,sans-serif;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  color:#C9A86A;white-space:nowrap;transition:color .2s}
.fhdr-call:hover{color:#fff}
.fhdr-call svg{flex:none;display:block}
.fhdr-call-m{display:none}

/* burger ----------------------------------------------------- */
.fhdr-burger{
  display:none;position:absolute;right:20px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;padding:8px;
}
.fhdr-burger span{display:block;width:24px;height:1.5px;background:#F3ECDD;margin:6px 0;transition:transform .25s,opacity .25s}
.fhdr-burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.fhdr-burger.open span:nth-child(2){opacity:0}
.fhdr-burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* shrink-on-scroll ------------------------------------------ */
.fhdr.shrunk{--fhh:46px}
.fhdr.shrunk .fhdr-top{padding:12px 24px 10px}
.fhdr.shrunk .fhdr-tag{max-height:0;opacity:0;margin-top:0}

/* mobile ----------------------------------------------------- */
@media(max-width:860px){
  .fhdr-top{padding:20px 20px 16px}
  .fhdr-logo img{height:88px}
  .fhdr.shrunk .fhdr-logo img{height:42px}
  .fhdr.shrunk .fhdr-top{padding:12px 20px 10px}
  .fhdr-burger{display:block}
  .fhdr-links{
    flex-direction:column;gap:0;padding:0;align-items:stretch;
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .fhdr-links.open{max-height:760px}
  .fhdr-links>li{width:100%;text-align:center;border-top:1px solid #23232B}
  .fhdr-links a,.fhdr-trig{display:block;width:100%;padding:15px 0;justify-content:center}
  .fhdr-book{display:none}
  .fhdr-book-m{display:block}
  .fhdr-book-m a{color:#C9A86A;font-weight:500}
  .fhdr-call{display:none}
  .fhdr-call-m{display:inline-flex;align-items:center;justify-content:center;
    position:absolute;right:58px;top:50%;transform:translateY(-50%);
    color:#C9A86A;padding:10px;z-index:3}
  .fhdr-call-m:hover{color:#fff}
  .fhdr-sub{
    position:static;transform:none;opacity:1;visibility:visible;
    background:#111117;border:none;min-width:0;padding:0;
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .fhdr-has.open .fhdr-sub{max-height:420px;padding:4px 0;transform:none}
  .fhdr-has:hover .fhdr-sub{transform:none}
  .fhdr-sub a{padding:13px 0}
}

/* mobile / desktop view toggle (collapsed icon, expands on tap) */
#viewtoggle{position:fixed;left:14px;bottom:16px;z-index:9998;
  font-family:'Jost','Avenir Next',system-ui,sans-serif}
.vt-icon{width:40px;height:40px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(22,22,28,.7);border:1px solid #2B2B33;color:#C9A86A;cursor:pointer;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.7);backdrop-filter:blur(6px);opacity:.62;
  transition:opacity .25s,background .25s,border-color .25s}
.vt-icon:hover,#viewtoggle.open .vt-icon{opacity:1;background:rgba(22,22,28,.92)}
/* panel expands UPWARD from the icon so it never collides with the concierge button */
.vt-panel{position:absolute;left:0;bottom:48px;display:inline-flex;gap:2px;padding:3px;border-radius:999px;
  background:rgba(22,22,28,.92);border:1px solid #33333D;box-shadow:0 10px 24px -10px rgba(0,0,0,.75);
  opacity:0;transform:translateY(8px) scale(.96);transform-origin:left bottom;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease}
#viewtoggle.open .vt-panel{opacity:1;transform:none;pointer-events:auto}
.vt-panel button{border:none;background:none;color:#C9C9D2;cursor:pointer;font-family:inherit;white-space:nowrap;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:7px 13px;border-radius:999px;
  transition:background .2s,color .2s}
.vt-panel button.on{background:#C9A86A;color:#16161C;font-weight:500}
@media(prefers-reduced-motion:reduce){.vt-panel{transition:none}.vt-icon{transition:none}}

/* honor reduced motion -------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .fhdr-top,.fhdr-logo img,.fhdr-tag,.fhdr-links,.fhdr-sub{transition:none}
}

/* desktop nav: keep Book button in flow so it never overlaps the links */
@media(min-width:861px){
  .fhdr-nav{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:nowrap}
  .fhdr-links{padding:15px 0;gap:20px;flex-wrap:wrap;justify-content:center}
  .fhdr-book{position:static;transform:none;right:auto;top:auto;white-space:nowrap;flex:none}
}

/* Frame Concierge — ENABLED, docked bottom-LEFT so it never overlaps
   MangoMint's bottom-right booking bubble. The two coexist. */
#fab-concierge{left:24px!important;right:auto!important;bottom:24px!important}
#fab-concierge #fab-panel{left:0!important;right:auto!important}
@media(max-width:640px){#fab-concierge{left:16px!important;right:auto!important;bottom:18px!important}}
/* follow-up suggestion chips under an answer */
.fab-follow{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px;align-self:flex-start;max-width:95%}
.fab-fchip{font-size:12px;color:var(--ink,#16161C);background:#fff;border:1px solid var(--bronze-soft,#C9A86A);border-radius:16px;padding:6px 12px;cursor:pointer;font-family:var(--body,'Jost',sans-serif);line-height:1.2;transition:background .18s,color .18s,border-color .18s}
.fab-fchip:hover{background:var(--bronze,#A87E3F);color:#fff;border-color:var(--bronze,#A87E3F)}
/* typing indicator */
.fab-typing{display:inline-flex!important;gap:5px;align-items:center;width:auto}
.fab-typing span{width:6px;height:6px;border-radius:50%;background:var(--bronze,#A87E3F);opacity:.35;animation:fabDot 1s infinite}
.fab-typing span:nth-child(2){animation-delay:.15s}
.fab-typing span:nth-child(3){animation-delay:.3s}
@keyframes fabDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.fab-typing span{animation:none;opacity:.5}}