:root{
  --bg: #f7f4ec;
  --bg-alt: #efe8d8;
  --surface: #ffffff;
  --ink: #1f2a22;
  --ink-dim: #4b5a4f;
  /* #8b9186 was 2.65:1 on --bg-alt and 2.94:1 on --bg, under WCAG AA for the
       12.5px to 15px labels that use it (stat labels, listing locations, the
       process numbers and the footer). Same hue, darkened until it clears. */
    --muted: #656A61;
  --gold: #b9925a;
    /* Gold is a brand FILL colour. As small text it only reached 2.35:1 on the
       light backgrounds and 3.39:1 on the green bands, both under WCAG AA.
       These two derive from the same hue so the brand still reads gold, and
       the fill uses of --gold are deliberately left untouched. */
    --gold-text: #826337;      /* gold as text on the light backgrounds */
    --gold-on-dark: #CAAC81;   /* gold as text on the green bands */
  --green: #2f4a3a;
  --green-accent: #2f4a3a;
  --header-bg: rgba(247,244,236,0.92);
  --border: rgba(31,42,34,0.12);
  --border-strong: rgba(31,42,34,0.22);
  --font-head: "Cormorant Garamond", serif;
  --font-body: "Inter", sans-serif;
  color-scheme: light;
}

/* Dark theme: derived from the palette above (not inverted). Applied when the
   OS prefers dark and no explicit choice was made, or when data-theme="dark"
   is set on <html> (toggle button below), persisted via localStorage. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* Must mirror :root[data-theme="dark"]. Without these, a visitor whose OS
       is dark but who has made no explicit choice gets the dark backgrounds
       with the LIGHT gold, which measured 3.11:1 on the hero. */
    --gold-text: #d9b077;
    --gold-on-dark: #CAAC81;
    --bg: #141d18;
    --bg-alt: #1b2620;
    --surface: #1e2b24;
    --ink: #eef0e6;
    --ink-dim: #c3ccc0;
    --muted: #92a08f;
    --gold: #d9b077;
    --green-accent: #8fcaa8;
    --header-bg: rgba(20,29,24,0.92);
    --border: rgba(238,240,230,0.12);
    --border-strong: rgba(238,240,230,0.24);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
    --gold-text: #d9b077;      /* already 8.56:1 on the dark background */
    --gold-on-dark: #CAAC81;
  --bg: #141d18;
  --bg-alt: #1b2620;
  --surface: #1e2b24;
  --ink: #eef0e6;
  --ink-dim: #c3ccc0;
  --muted: #92a08f;
  --gold: #d9b077;
  --green-accent: #8fcaa8;
  --header-bg: rgba(20,29,24,0.92);
  --border: rgba(238,240,230,0.12);
  --border-strong: rgba(238,240,230,0.24);
  color-scheme: dark;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.6; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
section{ padding: clamp(56px, 8vw, 110px) 0; }

.demo-bar{
  background: var(--green); color:#f7f4ec; font-family:var(--font-body); font-weight:600; font-size:13.5px;
  text-align:center; padding:10px 16px; position:sticky; top:0; z-index:200;
}
.demo-bar a{ text-decoration:underline; font-weight:700; color: var(--gold-on-dark); }

/* The header sticks directly under the demo bar. 37px is the bar at one
   line; script.js measures the real height and overwrites --demo-bar-h,
   because the bar wraps to two or three lines on narrow screens. */
header{ position:sticky; top:var(--demo-bar-h, 37px); z-index:100; background:var(--header-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px; gap:12px; }
.header-inner > *{ min-width:0; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-size:clamp(17px,5vw,24px); font-weight:600; letter-spacing:0.01em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.brand svg{ flex:none; }
:root[data-theme="dark"] .brand svg rect{ fill:var(--green-accent); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand svg rect{ fill:var(--green-accent); } }
nav.main-nav{ display:flex; gap:32px; }
nav.main-nav a{ font-size:14.5px; font-weight:500; color:var(--ink-dim); transition:color 200ms; }
nav.main-nav a:hover{ color:var(--green-accent); }
.header-actions{ display:flex; align-items:center; gap:12px; flex:none; }
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; padding:13px 24px; border-radius:2px; transition:transform 200ms, background 200ms, color 200ms, border-color 200ms; }
.btn-gold{ background:var(--gold); color:#1f2a22; }
.btn-gold:hover{ transform:translateY(-2px); background:#cca873; }
.btn-outline{ border:1px solid var(--border-strong); color:var(--ink); }
.btn-outline:hover{ border-color:var(--gold); color: var(--gold-text); }
.btn-outline-light{ border:1px solid rgba(247,244,236,0.4); color:#f7f4ec; }
.btn-outline-light:hover{ border-color:var(--gold); color: var(--gold-on-dark); }
.menu-toggle{ display:none; width:38px; height:38px; flex-direction:column; align-items:center; justify-content:center; gap:5px; flex:none; }
.menu-toggle span{ width:20px; height:2px; background: var(--green-accent); transition: transform 200ms, opacity 200ms; }
.menu-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.theme-toggle{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong);
  color:var(--ink); transition:border-color 200ms, color 200ms, background 200ms;
}
.theme-toggle:hover{ border-color:var(--gold); color: var(--gold-text); }
.theme-toggle svg{ width:19px; height:19px; }
.theme-toggle .icon-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display:none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display:block; }
}

@media (max-width:400px){
  .header-actions .btn-gold{ display:none; }
}

.mobile-menu{
  position:fixed; inset:0; z-index:300;
  background: var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:32px;
  padding: 100px 24px 40px;
  overflow-y:auto;
  transform: translateY(-100%);
  transition: transform 320ms cubic-bezier(.65,0,.35,1);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu nav{ display:flex; flex-direction:column; gap:18px; }
.mobile-menu nav a{ font-family: var(--font-head); font-size: clamp(1.6rem,7vw,2.4rem); font-weight:600; color: var(--ink); }
.mobile-menu nav a:hover{ color: var(--green-accent); }
.mobile-menu .btn{ align-self:flex-start; margin-top:8px; }

.hero{ padding-top:clamp(70px,10vw,120px); position:relative; overflow:hidden; min-height:660px; display:flex; align-items:center; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,26,20,0.5) 0%, rgba(20,26,20,0.62) 55%, rgba(20,26,20,0.9) 100%);
}
.hero-inner{ position:relative; z-index:2; max-width:740px; color:#f7f4ec; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color: var(--gold-text); border:1px solid rgba(247,244,236,0.3); padding:7px 14px; border-radius:999px; margin-bottom:24px; }
h1{ font-family:var(--font-head); font-size:clamp(2.6rem,6.4vw,4.8rem); font-weight:600; line-height:1.04; letter-spacing:-0.01em; }
h1 em{ font-style:italic; color: var(--gold-text); font-weight:500; }
.hero p.lead{ margin-top:22px; font-size:18px; color:rgba(247,244,236,0.82); max-width:52ch; font-family:var(--font-head); }
.hero-cta{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }

.stats-strip{ padding:36px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat-num{ font-family:var(--font-head); font-size:clamp(1.8rem,3.4vw,2.6rem); color:var(--green-accent); font-weight:600; }
.stat-label{ font-size:13px; color:var(--muted); margin-top:6px; }

.section-head{ max-width:620px; margin-bottom:48px; }
.tag{ display:inline-block; font-family:var(--font-body); font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color: var(--gold-text); margin-bottom:14px; font-weight:600; }
h2{ font-family:var(--font-head); font-size:clamp(1.9rem,4vw,3rem); font-weight:600; letter-spacing:-0.01em; }
h2 em{ font-style:italic; color: var(--gold-text); font-weight:500; }

.listing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.listing-card{ background:var(--surface); border:1px solid var(--border); border-radius:6px; overflow:hidden; transition:transform 200ms, border-color 200ms; }
.listing-card:hover{ transform:translateY(-4px); border-color:var(--border-strong); }
.listing-media{ height:170px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #eee7d6, #f7f4ec); position:relative; }
.listing-media svg{ width:76px; height:76px; color:var(--green); opacity:0.85; }
.listing-status{ position:absolute; top:14px; left:14px; background:var(--gold); color:#1f2a22; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:5px 10px; border-radius:2px; }
.listing-body{ padding:22px; }
.listing-body h3{ font-family:var(--font-head); font-size:21px; font-weight:600; }
.listing-loc{ font-size:13px; color:var(--muted); margin-top:4px; }
.listing-meta{ display:flex; gap:14px; margin-top:14px; font-size:13px; color:var(--ink-dim); border-top:1px solid var(--border); padding-top:14px; }
.listing-price{ margin-top:14px; font-family:var(--font-head); font-size:23px; color:var(--green-accent); font-weight:600; }

.process{ background:var(--bg-alt); }
.process-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.process-step{ border-top:2px solid var(--gold); padding-top:20px; }
.process-num{ font-family:var(--font-head); font-size:15px; color:var(--muted); font-style:italic; }
.process-step h3{ font-family:var(--font-head); font-size:22px; margin:10px 0 10px; font-weight:600; }
.process-step p{ color:var(--ink-dim); font-size:15px; }

.cta-band{ text-align:center; background:var(--green); color:#f7f4ec; }
.cta-band .tag{ color: var(--gold-on-dark); }
.cta-band h2{ color:#f7f4ec; }
.cta-band .btn{ margin-top:26px; }

footer{ border-top:1px solid var(--border); padding:40px 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:13.5px; color:var(--muted); }

.reveal{ opacity:0; transform:translateY(20px); transition:opacity 600ms ease, transform 600ms ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (max-width:900px){
  nav.main-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .listing-grid, .process-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr 1fr; row-gap:24px; }
}

/* ==========================================================================
   Added for multi-page conversion, page-hero banner, homepage listings
   teaser and contact page, all reusing the tokens/components above.
   ========================================================================== */

.page-hero{ padding-top:clamp(70px,10vw,120px); position:relative; overflow:hidden; min-height:340px; display:flex; align-items:center; }
.page-hero-inner{ position:relative; z-index:2; max-width:700px; color:#f7f4ec; }
.page-hero-inner h1{ font-size:clamp(2.2rem,4.6vw,3.4rem); margin-top:8px; }

.listing-grid.cols-2{ grid-template-columns:repeat(2,1fr); max-width:800px; margin:0 auto; }
.listings-teaser-cta{ text-align:center; margin-top:44px; }

@media (max-width:900px){
  .listing-grid.cols-2{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Editorial listings, spotlight grid (home) + alternating rows (listings)
   ========================================================================== */
.spotlight-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:stretch; }
.spotlight-main{ position:relative; border-radius:6px; overflow:hidden; display:block; min-height:420px; }
.spotlight-main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 500ms; }
.spotlight-main:hover img{ transform:scale(1.04); }
.spotlight-main::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, rgba(20,26,20,0.92) 100%); }
.spotlight-info{ position:absolute; bottom:0; left:0; right:0; padding:32px; color:#f7f4ec; z-index:1; }
.spotlight-tag{ display:inline-block; background:var(--gold); color:#1f2a22; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:5px 12px; border-radius:2px; margin-bottom:14px; }
.spotlight-info h3{ font-family:var(--font-head); font-size:clamp(1.8rem,3.2vw,2.6rem); font-style:italic; font-weight:500; }
.spotlight-meta{ font-size:13.5px; color:rgba(247,244,236,0.75); margin-top:8px; }
.spotlight-info .price{ font-family:var(--font-head); font-size:1.7rem; color: var(--gold-text); margin-top:10px; font-weight:600; }

.spotlight-side{ display:flex; flex-direction:column; gap:16px; }
.spotlight-side-card{ display:flex; gap:16px; background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:14px; transition:border-color 200ms, transform 200ms; }
.spotlight-side-card:hover{ transform:translateY(-2px); border-color:var(--border-strong); }
.side-media{ width:96px; height:96px; flex:none; border-radius:4px; overflow:hidden; }
.side-media img{ width:100%; height:100%; object-fit:cover; }
.side-body{ display:flex; flex-direction:column; justify-content:center; }
.side-status{ display:inline-block; align-self:flex-start; background:var(--gold); color:#1f2a22; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:3px 8px; border-radius:2px; margin-bottom:6px; }
.side-body h4{ font-family:var(--font-head); font-size:18px; font-weight:600; }
.side-loc{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.side-price{ font-family:var(--font-head); font-size:16px; color:var(--green-accent); font-weight:600; margin-top:8px; }

.editorial-list{ margin-top:8px; }
.editorial-row{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:44px 0; border-bottom:1px solid var(--border); }
.editorial-row:first-child{ padding-top:0; }
.editorial-media{ position:relative; aspect-ratio:4/3; border-radius:6px; overflow:hidden; }
.editorial-media img{ width:100%; height:100%; object-fit:cover; }
.editorial-index{ font-family:var(--font-head); font-style:italic; color:var(--muted); font-size:15px; }
.editorial-content h3{ font-family:var(--font-head); font-size:clamp(1.7rem,2.8vw,2.3rem); font-weight:600; margin:6px 0 8px; }
.editorial-content .loc{ color:var(--muted); font-size:13.5px; margin-bottom:16px; }
.editorial-content .specs{ display:flex; gap:16px; margin-bottom:18px; font-size:13.5px; color:var(--ink-dim); }
.editorial-content .price{ font-family:var(--font-head); font-size:1.6rem; color:var(--green-accent); font-weight:600; margin-bottom:22px; }

@media (max-width:900px){
  .spotlight-grid{ grid-template-columns:1fr; }
  .spotlight-main{ min-height:320px; }
  .editorial-row{ grid-template-columns:1fr; gap:20px; }
  .editorial-row > .editorial-media{ order:-1; }
}

.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start; }
.contact-copy p{ color:var(--ink-dim); margin-top:14px; font-size:15.5px; max-width:44ch; }
.contact-info{ margin-top:28px; display:flex; flex-direction:column; gap:14px; }
.contact-info a{ display:inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--green-accent); font-size:15px; transition:color 200ms; }
.contact-info a:hover{ color: var(--gold-text); }
.contact-info svg{ flex:none; color: var(--gold-text); }

.contact-form{ background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:32px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-field{ margin-bottom:18px; display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:13px; font-weight:600; color:var(--ink-dim); }
.form-field input, .form-field select, .form-field textarea{
  font-family:var(--font-body); font-size:14.5px; color:var(--ink); background:var(--bg);
  border:1px solid var(--border-strong); border-radius:2px; padding:12px 14px; transition:border-color 200ms;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(185,146,90,0.35); }
.form-field textarea{ resize:vertical; min-height:120px; }
.contact-form .btn{ margin-top:6px; width:100%; justify-content:center; }

@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Kirosconsult compliance pass, accessibility and library-standard additions.
   Skip link, visible focus, reduced motion, back-to-top, theme toggle icons,
   fixed demo badge and small-viewport overflow guards. Nothing above this
   block was restyled; this section only adds what was missing.
   ========================================================================== */

/* Skip link */
.skip-link{
  position:absolute; top:-60px; left:16px; z-index:1000;
  background:var(--green); color:#f7f4ec; font-weight:600; font-size:14px;
  padding:12px 20px; border-radius:2px; transition:top 200ms;
}
.skip-link:focus{ top:16px; }

/* Visible focus styles on all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:2px;
}

/* Back-to-top button */
.back-to-top{
  position:fixed; right:20px; bottom:20px; z-index:220;
  width:46px; height:46px; border-radius:50%;
  background:var(--green); color:#f7f4ec;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(20,26,20,0.25);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity 220ms, transform 220ms, visibility 220ms, background 200ms;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--gold); color:#1f2a22; }
.back-to-top svg{ width:20px; height:20px; }

/* Fixed "Demo site by Kirosconsult" badge */
.kiros-badge{
  position:fixed; left:16px; bottom:16px; z-index:210;
  background:var(--surface); color:var(--ink-dim);
  border:1px solid var(--border-strong); border-radius:999px;
  font-size:12.5px; font-weight:600; padding:9px 16px;
  box-shadow:0 6px 18px rgba(20,26,20,0.15);
  transition:color 200ms, border-color 200ms;
}
.kiros-badge:hover{ color: var(--gold-text); border-color:var(--gold); }

@media (max-width:560px){
  .kiros-badge{ font-size:11.5px; padding:7px 12px; }
  .back-to-top{ width:42px; height:42px; right:14px; bottom:14px; }
}

/* Prevent the fixed badge covering the footer credit link on short pages */
footer{ padding-bottom:64px; }

/* prefers-reduced-motion: turn off transitions/animations site-wide */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .back-to-top{ transition:none; }
}

/* No horizontal scroll at narrow widths: grid/flex children default to
   min-width:auto, which can force their track wider than the viewport. */
.stats-grid, .process-grid, .editorial-row, .spotlight-grid, .contact-grid,
.form-row, .footer-inner, .hero-cta{
  min-width:0;
}
.stats-grid > *, .process-grid > *, .editorial-row > *, .spotlight-grid > *,
.contact-grid > *, .form-row > *, .footer-inner > *{
  min-width:0;
}
.stats-grid{ grid-template-columns:repeat(4, minmax(min(140px,100%),1fr)); }
@media (max-width:900px){
  .stats-grid{ grid-template-columns:repeat(2, minmax(min(140px,100%),1fr)); }
}
.container{ max-width:1180px; width:100%; margin:0 auto; padding:0 24px; }


/* ── Kirosconsult shared compliance fixes, 21 Sep 2026 ───────────────────────
   1. The off-canvas menu is moved with transform only, so its links stayed in
      the keyboard tab order while off screen. visibility:hidden takes them out;
      the 320ms delay lets the slide-out animation finish before it disappears.
   2. The menu overlay (z-index 300) sat above the header (100), so the burger
      could not be tapped a second time to close it. The header now sits above
      the overlay. The menu already pads 100px at the top, so nothing is hidden.
   3. The sticky header's top offset is measured at runtime (--demo-bar-h). That
      fix lives on the header rule itself, near the top of this file. */
.mobile-menu{visibility:hidden;transition:transform 320ms cubic-bezier(.65,0,.35,1),visibility 0s linear 320ms}
.mobile-menu.is-open{visibility:visible;transition:transform 320ms cubic-bezier(.65,0,.35,1),visibility 0s linear 0s}
header{z-index:400}
@media (prefers-reduced-motion:reduce){
  .mobile-menu,.mobile-menu.is-open{transition:none}
}

/* Close button inside the overlay. The hamburger in <header> is buried by the
   open .mobile-menu (z-index:300), so the menu carries its own close
   affordance. Fixed, not absolute, so it stays put if the menu has to scroll
   on a short (landscape) viewport; the open menu's transform makes it the
   containing block, and it is hidden outright while the menu is closed. */
.mobile-menu-close{
  position:fixed; top:18px; right:18px;
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: calc(18px + env(safe-area-inset-right, 0px));
  width:44px; height:44px; display:none;
  align-items:center; justify-content:center; color:var(--green-accent);
}
.mobile-menu.is-open .mobile-menu-close{ display:flex; }
.mobile-menu-close svg{ width:24px; height:24px; }

/* Scoped over the shared sweep's header{z-index:400}. The sweep raises the
   header above the overlay so the burger stays tappable; this demo instead
   closes from a button inside the overlay (and Escape), so while the menu is
   open the header drops back under it and stays hidden. One close control,
   not two, and no reliance on backdrop-filter stacking on iOS Safari. */
body.menu-open header{ z-index:100; }


/* ── No-JS fallback for the demo bar height, 21 Sep 2026 ────────────────────
   The header sits under the demo bar using --demo-bar-h, which JavaScript
   measures at runtime. If the script does not run, the hardcoded fallback is
   all there is — and a single value cannot be right at both widths, because
   the bar is about 41px on one line and about 62px once it wraps below ~500px.
   A desktop-tuned fallback overlaps the header on a phone; a mobile-tuned one
   leaves a gap on desktop. Declaring the token responsively gives a sensible
   value at BOTH widths without trading one off against the other. JS still
   overrides it with the measured height the moment it runs. */
:root{ --demo-bar-h: 41px; }
@media (max-width: 500px){ :root{ --demo-bar-h: 62px; } }