/* ==========================================================================
   NOLA — demo.css: the concept-demo layer (HexaDev). Loaded after style.css.
   - the fixed notice banner, above everything (navs, phone menu, sticky bar);
   - the layout offset so nothing hides under it (--demo-h, kept exact by demo.js);
   - switched-off controls that keep the look of the links they replace;
   - the small "switched off" status note.
   ========================================================================== */

:root{--demo-h:35px}
@media (max-width:640px){:root{--demo-h:48px}}

/* ------------------------------------------------------------ the banner */
.demo-banner{
  position:fixed;top:0;left:0;right:0;z-index:2147483600;
  background:var(--bottle);color:var(--cream);
  border-bottom:1px solid rgba(246,239,230,.14);
  padding:8px var(--pad-x);
  font-family:var(--font-body);font-size:.75rem;font-weight:500;line-height:1.5;letter-spacing:.01em;
  text-align:center;
}
.demo-banner__text{max-width:var(--container);margin-inline:auto}
.demo-banner a{
  color:var(--rose-light);font-weight:700;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
}
.demo-banner a:hover{color:var(--cream)}
.demo-banner a:focus-visible{outline-color:var(--rose-light)}
.demo-banner__sep{color:rgba(246,239,230,.5);margin:0 .6em}
.demo-banner__name{white-space:nowrap}
.demo-banner__cap{font-size:.6875rem;color:rgba(246,239,230,.74);letter-spacing:.04em}
@media (max-width:640px){
  .demo-banner{padding:6px 16px;letter-spacing:0}
  .demo-banner__main,.demo-banner__cap{display:block}
  .demo-banner__sep{display:none}
}

/* ------------------------------------------------------ offset the page */
body{padding-top:var(--demo-h)}
.nav,.mp-nav{top:var(--demo-h)}
.mobile-menu{top:var(--demo-h)}
.skip-link{top:calc(var(--demo-h) + 10px)}
/* moved down by --demo-h, so hide it by that much more (style.css's -160% left its tail under the banner) */
.skip-link:not(:focus){transform:translateY(calc(-100% - var(--demo-h) - 14px))}
:where(section[id]){scroll-margin-top:calc(88px + var(--demo-h))}
@media (max-width:900px){:where(section[id]){scroll-margin-top:calc(70px + var(--demo-h))}}

/* ------------------------------------- switched-off controls (no href) */
.demo-link{
  font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;text-align:inherit;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
}
.mobile-menu__foot .demo-link{padding:.5rem 0;font-weight:600;color:var(--rose-deep)}
.visit__contact .demo-link{font-size:1.06rem;font-weight:500;text-align:left}
.visit__contact .demo-link:hover{color:var(--rose-deep)}
.footer__col .demo-link{display:block;color:rgba(246,239,230,.9);font-size:.92rem;line-height:1.9;text-align:left}
.footer__col .demo-link:hover{color:var(--rose-light)}
.mp-foot .demo-link{color:var(--rose-deep);font-weight:600}
button.book-bar{width:calc(100% - 24px);font:inherit;font-weight:600;text-align:center}
button.btn{font-family:var(--font-body);line-height:inherit;cursor:pointer}

/* ------------------------------------------------- the "switched off" note */
.demo-note{
  position:fixed;left:50%;bottom:24px;z-index:2147483500;
  width:max-content;max-width:calc(100vw - 32px);
  background:var(--ink);color:var(--cream);
  font-family:var(--font-body);font-size:.86rem;font-weight:500;line-height:1.4;text-align:center;
  padding:.7rem 1.15rem;border-radius:100px;box-shadow:0 14px 30px -14px rgba(35,32,28,.6);
  transform:translate(-50%,8px);opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.demo-note:empty{padding:0;box-shadow:none}
.demo-note.is-on{opacity:1;transform:translate(-50%,0)}
@media (max-width:900px){.demo-note{bottom:calc(88px + env(safe-area-inset-bottom, 0px))}}
@media print{.demo-note{display:none}}