/* ===== Demo layer (sales demo only) ===== */
:root{--demo-h:40px}
html{scroll-padding-top:calc(var(--demo-h) + 80px)}
body{padding-top:var(--demo-h)}
.demo-banner{position:fixed;top:0;left:0;right:0;z-index:70;min-height:var(--demo-h);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 14px;padding:8px 16px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));background:#2A1F1A;color:#F3E6CF;font:500 13px/1.35 var(--sans,system-ui,sans-serif);text-align:center;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.demo-banner .demo-tag{display:inline-block;background:var(--tomato,#C8452C);color:#fff;font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:999px;margin-right:2px;vertical-align:1px}
.demo-banner .demo-msg b{color:#fff;font-weight:600}
.demo-banner .demo-contact{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}
.demo-banner .demo-contact a{color:#F6D7A8;text-decoration:none;border-bottom:1px solid rgba(246,215,168,.35);white-space:nowrap}
.demo-banner .demo-contact a:hover{color:#fff;border-color:#fff}
.site-header{top:var(--demo-h)}
.hero{min-height:calc(100svh - var(--demo-h))}
.cat-nav{top:calc(72px + var(--demo-h))}
.menu-section{scroll-margin-top:calc(140px + var(--demo-h))}
/* diagonal DEMO watermark, very faint, never blocks clicks */
.demo-watermark{position:fixed;inset:0;z-index:44;pointer-events:none;overflow:hidden;display:flex;align-items:center;justify-content:center}
.demo-watermark span{transform:rotate(-28deg);font:700 clamp(90px,20vw,280px)/1 var(--serif,Georgia,serif);letter-spacing:.12em;color:rgba(120,90,70,.045);white-space:nowrap;user-select:none}
/* footer credit */
.demo-credit{margin-top:14px;font-size:.8rem;color:#9A8B7E}
.demo-credit a{color:#E9C9A0;text-decoration:none}
.demo-credit a:hover{text-decoration:underline}
/* toast */
.demo-toast{position:fixed;left:50%;bottom:28px;z-index:80;transform:translate(-50%,20px);opacity:0;pointer-events:none;width:max-content;max-width:min(92vw,420px);background:#2A1F1A;color:#F8F2E7;padding:14px 20px;border-radius:14px;box-shadow:0 16px 40px -12px rgba(0,0,0,.55);font:500 15px/1.4 var(--sans,system-ui,sans-serif);text-align:center;transition:opacity .25s,transform .25s}
.demo-toast.show{opacity:1;transform:translate(-50%,0)}
.demo-toast small{display:block;opacity:.7;font-size:12.5px;margin-top:3px}
@media (max-width:860px){
  :root{--demo-h:58px}
  .demo-banner{font-size:12px;gap:2px 10px;padding-top:6px;padding-bottom:6px}
  .demo-banner .demo-long,.demo-banner .demo-ig{display:none}
  .nav{top:var(--demo-h)}
  .demo-toast{bottom:96px}
}
@media (max-width:360px){ .demo-banner{font-size:11px} }
.demo-banner .demo-short{display:none}
@media (max-width:860px){
  .demo-banner .demo-short{display:inline}
  /* backdrop-filter makes the header a containing block and traps the fixed mobile nav; drop it while the menu is open */
  body.nav-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--cream)}
}
/* layout fix: .wrap{padding:0 22px} in the mobile media query was zeroing .hero-inner's padding-top, so on short/narrow phones the hero text slid under the header */
@media (max-width:860px){ .hero-inner{padding-top:104px} }