/* ===== Theme tokens: dark is the site's original palette (unchanged); light is
   derived from the same navy/steel/orange identity, not a mechanical invert.
   --orange stays constant across themes (it's the brand accent used on solid
   fills/icons); --orange-text is a darkened variant used only where orange sits
   as TEXT, so small labels keep AA contrast on a light background. ===== */
:root{
  color-scheme: dark;
  --bg: #0b1b2b;
  --bg-alt: #0f2438;
  --bg-rgb: 11,27,43;
  --surface: #142e46;
  --ink: #f2f6f9;
  --ink-dim: #b9c8d6;
  --muted: #8296a7;
  --steel: #3e6fa6;
  --orange: #ff7a29;
  --orange-text: #ff7a29;
  --border: rgba(242,246,249,0.1);
  --border-strong: rgba(242,246,249,0.2);
  --font-head: "Barlow Semi Condensed", sans-serif;
  --font-body: "Inter", sans-serif;
}

/* System preference, only when the visitor has never chosen a theme */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    color-scheme: light;
    --bg: #eef2f6;
    --bg-alt: #e3e9ef;
    --bg-rgb: 238,242,246;
    --surface: #ffffff;
    --ink: #0d1f30;
    --ink-dim: #37505f;
    --muted: #54687b;
    --steel: #2f5a86;
    --orange-text: #a3390a;
    --border: rgba(13,31,48,0.12);
    --border-strong: rgba(13,31,48,0.22);
  }
}

/* Explicit choice (toggle button / localStorage) always wins */
:root[data-theme="light"]{
  color-scheme: light;
  --bg: #eef2f6;
  --bg-alt: #e3e9ef;
  --bg-rgb: 238,242,246;
  --surface: #ffffff;
  --ink: #0d1f30;
  --ink-dim: #37505f;
  --muted: #54687b;
  --steel: #2f5a86;
  --orange-text: #a3390a;
  --border: rgba(13,31,48,0.12);
  --border-strong: rgba(13,31,48,0.22);
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0b1b2b;
  --bg-alt: #0f2438;
  --bg-rgb: 11,27,43;
  --surface: #142e46;
  --ink: #f2f6f9;
  --ink-dim: #b9c8d6;
  --muted: #8296a7;
  --steel: #3e6fa6;
  --orange-text: #ff7a29;
  --border: rgba(242,246,249,0.1);
  --border-strong: rgba(242,246,249,0.2);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html, body{ max-width:100%; overflow-x:hidden; }
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; transition:background-color 200ms ease, color 200ms ease; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
section{ padding: clamp(56px, 8vw, 110px) 0; }

/* ===== Accessibility: skip link, visible focus ===== */
.skip-link{
  position:fixed; left:16px; top:-70px; z-index:500;
  background:var(--orange); color:#0b1b2b; font-weight:700; font-size:14px;
  padding:12px 20px; border-radius:4px; transition:top 200ms ease;
}
.skip-link:focus{ top:16px; outline:2px solid #0b1b2b; outline-offset:2px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--orange-text); outline-offset:3px; border-radius:2px;
}

/* ===== Fixed chrome: demo badge + back-to-top ===== */
.demo-badge{
  position:fixed; left:16px; bottom:16px; z-index:250;
  background:var(--surface); color:var(--ink-dim); border:1px solid var(--border-strong);
  font-size:12px; font-weight:600; padding:8px 14px; border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,0.3); pointer-events:none;
}

.back-to-top{
  position:fixed; right:16px; bottom:16px; z-index:250;
  width:44px; height:44px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border-strong); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity 200ms ease, transform 200ms ease, border-color 200ms, color 200ms;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
}
.back-to-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover{ border-color:var(--orange-text); color:var(--orange-text); }
.back-to-top svg{ width:18px; height:18px; }

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

.demo-bar{
  background: var(--orange); color:#0b1b2b; 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; }

/* 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:rgba(var(--bg-rgb),0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-size:21px; font-weight:700; letter-spacing:0.01em; text-transform:uppercase; }
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(--ink); }
.header-actions{ display:flex; align-items:center; gap:16px; }
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; padding:13px 24px; border-radius:4px; transition:transform 200ms, background 200ms, color 200ms; }
.btn-orange{ background:var(--orange); color:#0b1b2b; }
.btn-orange:hover{ transform:translateY(-2px); background:#ff8f4d; }
.btn-outline{ border:1px solid var(--border-strong); color:var(--ink); }
.btn-outline:hover{ border-color:var(--orange-text); color:var(--orange-text); }
.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(--ink); 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); }

.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; text-transform:uppercase; color: var(--ink); }
.mobile-menu .btn{ align-self:flex-start; margin-top:8px; }

/* ===== Dashboard hero (split layout, tracker widget as visual) ===== */
.hero{ padding-top:clamp(70px,10vw,120px); padding-bottom:clamp(48px,7vw,80px); position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; top:-30%; left:-10%; width:70%; height:160%;
  background: radial-gradient(circle, rgba(62,111,166,0.3), transparent 70%);
  pointer-events:none; z-index:0;
}
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--orange-text); border:1px solid var(--border-strong); padding:7px 14px; border-radius:999px; margin-bottom:24px; }
h1{ font-family:var(--font-head); font-size:clamp(2.2rem,5vw,3.8rem); font-weight:700; line-height:1.04; letter-spacing:-0.01em; }
h1 em{ font-style:normal; color:var(--orange-text); }
.hero p.lead{ margin-top:22px; font-size:17px; color:var(--ink-dim); max-width:50ch; }
.hero-cta{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }

/* ===== Tracker widget card ===== */
.tracker-card{
  background:var(--surface); border:1px solid var(--border-strong); border-radius:10px;
  padding:28px; box-shadow:0 24px 60px rgba(0,0,0,0.35);
}
.tracker-card--lg{ padding:36px; max-width:640px; margin:0 auto; }
.tracker-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; gap:12px; }
.tracker-id{ font-family:var(--font-head); font-size:12px; letter-spacing:0.06em; color:var(--muted); text-transform:uppercase; }
.tracker-id strong{ display:block; margin-top:3px; color:var(--ink); font-size:16px; letter-spacing:0.02em; font-weight:600; }
.tracker-status{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,122,41,0.12); color:var(--orange-text); font-family:var(--font-head); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:6px 13px; border-radius:999px; white-space:nowrap; }
.tracker-status i{ width:6px; height:6px; border-radius:50%; background:var(--orange); animation:pulse-dot 1.6s infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }

.tracker-route{ display:flex; justify-content:space-between; align-items:center; font-family:var(--font-head); font-size:14.5px; color:var(--ink); margin-bottom:12px; font-weight:600; }

.route-track{ position:relative; height:3px; background:var(--border); border-radius:999px; margin-bottom:32px; }
.route-progress{ position:absolute; top:0; left:0; height:100%; width:85%; background:var(--orange); border-radius:999px; }
.route-icon{
  position:absolute; top:50%; left:85%; transform:translate(-50%,-50%);
  width:24px; height:24px; background:var(--orange); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#0b1b2b;
}
.route-icon svg{ width:13px; height:13px; }

.tracker-stepper{ position:relative; display:flex; justify-content:space-between; margin-bottom:24px; }
.tracker-stepper::before{ content:""; position:absolute; top:5px; left:12%; right:12%; height:2px; background:var(--border); z-index:0; }
.step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; text-align:center; }
.step-dot{ width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--border-strong); }
.step.is-done .step-dot{ background:var(--orange); border-color:var(--orange); }
.step.is-active .step-dot{ background:var(--bg); border-color:var(--orange); box-shadow:0 0 0 4px rgba(255,122,41,0.18); }
.step-label{ font-size:10.5px; color:var(--muted); line-height:1.3; max-width:72px; }
.step.is-done .step-label, .step.is-active .step-label{ color:var(--ink-dim); }

.tracker-eta{ border-top:1px solid var(--border); padding-top:18px; display:flex; justify-content:space-between; align-items:center; }
.tracker-eta .eta-label{ font-size:12.5px; color:var(--muted); }
.tracker-eta .eta-value{ font-family:var(--font-head); font-size:16px; color:var(--ink); font-weight:600; }

/* ===== KPI tiles ===== */
.kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kpi-tile{ background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:22px; }
.kpi-tile svg{ width:20px; height:20px; color:var(--orange); margin-bottom:16px; }
.kpi-num{ font-family:var(--font-head); font-size:clamp(1.5rem,2.6vw,2rem); color:var(--ink); font-weight:700; }
.kpi-label{ font-size:12.5px; color:var(--muted); margin-top:4px; }

.section-head{ max-width:640px; margin-bottom:48px; }
.tag{ display:inline-block; font-family:var(--font-head); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--orange-text); margin-bottom:14px; }
h2{ font-family:var(--font-head); font-size:clamp(1.8rem,4vw,2.8rem); font-weight:700; letter-spacing:-0.01em; }

/* ===== Capability grid (services, dashboard-tile style) ===== */
.capability-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.capability-grid.cols-2-spotlight{ grid-template-columns:repeat(2,1fr); }
.capability-tile{
  background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:28px;
  display:flex; flex-direction:column; gap:14px;
  transition:transform 200ms, border-color 200ms;
}
.capability-tile:hover{ transform:translateY(-4px); border-color:var(--border-strong); }
.capability-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.capability-tile svg{ width:28px; height:28px; color:var(--orange); }
.capability-metric{
  font-family:var(--font-head); font-size:11.5px; font-weight:700; color:var(--orange-text);
  background:rgba(255,122,41,0.1); padding:5px 11px; border-radius:999px; white-space:nowrap; letter-spacing:0.02em;
}
.capability-tile h3{ font-family:var(--font-head); font-size:20px; font-weight:600; }
.capability-tile p{ color:var(--ink-dim); font-size:14.5px; }
.services-teaser-cta{ text-align:center; margin-top:40px; }

.process{ background:var(--bg-alt); }
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.process-step{ border-top:2px solid var(--orange); padding-top:20px; }
.process-num{ font-family:var(--font-head); font-size:14px; color:var(--muted); }
.process-step h3{ font-family:var(--font-head); font-size:19px; margin:10px 0 10px; }
.process-step p{ color:var(--ink-dim); font-size:14.5px; }

.cta-band{ text-align:center; }
.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; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:440px; margin:0 auto; width:100%; }
  .kpi-row{ grid-template-columns:1fr 1fr; row-gap:16px; }
  .capability-grid{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .process-grid{ grid-template-columns:1fr; }
  .tracker-card{ padding:22px; }
  .step-label{ font-size:9.5px; max-width:56px; }
}

/* ===== Page hero banner (services / tracking / contact) ===== */
.page-hero{ padding: clamp(70px,10vw,120px) 0 56px; position:relative; overflow:hidden; background:var(--bg-alt); border-bottom:1px solid var(--border); }
.page-hero::before{
  content:""; position:absolute; top:-30%; left:-10%; width:70%; height:160%;
  background: radial-gradient(circle, rgba(62,111,166,0.35), transparent 70%);
  pointer-events:none; z-index:1;
}
.page-hero-inner{ position:relative; z-index:2; max-width:680px; }
.page-hero p.lead{ margin-top:18px; font-size:17px; color:var(--ink-dim); max-width:54ch; }

/* ===== Tracking mock UI ===== */
.track-box{ display:flex; gap:12px; margin-top:28px; max-width:560px; flex-wrap:wrap; }
.track-input{
  flex:1; min-width:240px; background:var(--surface); border:1px solid var(--border); border-radius:4px;
  padding:13px 16px; color:var(--ink); font-family:var(--font-body); font-size:14.5px;
}
.track-input::placeholder{ color:var(--muted); }
.track-input:focus{ outline:2px solid var(--orange-text); outline-offset:2px; border-color:var(--orange-text); }

/* ===== Shipment event timeline ===== */
.event-timeline{ max-width:640px; margin:0 auto; }
.event-row{ display:flex; gap:20px; padding:16px 0; }
.event-dot-col{ display:flex; flex-direction:column; align-items:center; flex:none; padding-top:6px; }
.event-dot{ width:10px; height:10px; border-radius:50%; background:var(--orange); flex:none; }
.event-line{ width:1px; flex:1; background:var(--border); margin-top:6px; min-height:24px; }
.event-body{ flex:1; padding-bottom:4px; }
.event-time{ font-family:var(--font-head); font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }
.event-desc{ font-size:15px; color:var(--ink); margin-top:4px; }

/* ===== Contact page ===== */
.contact-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:56px; align-items:start; }
.contact-details p.lead{ margin-top:14px; margin-bottom:32px; color:var(--ink-dim); font-size:16px; max-width:44ch; }
.contact-detail-item{ margin-bottom:24px; }
.contact-detail-item .detail-label{ display:block; font-family:var(--font-head); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--orange-text); margin-bottom:6px; }
.contact-detail-item .detail-value{ font-size:16.5px; color:var(--ink); }
.contact-form{ background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:32px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; font-size:13.5px; font-weight:500; color:var(--ink-dim); margin-bottom:8px; }
.form-group input, .form-group textarea{
  width:100%; background:var(--bg); border:1px solid var(--border); border-radius:4px;
  padding:13px 16px; color:var(--ink); font-family:var(--font-body); font-size:14.5px;
}
.form-group input::placeholder, .form-group textarea::placeholder{ color:var(--muted); }
.form-group input:focus, .form-group textarea:focus{ outline:2px solid var(--orange-text); outline-offset:2px; border-color:var(--orange-text); }
.form-group textarea{ resize:vertical; min-height:120px; }

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

/* ===== No-horizontal-scroll safety net =====
   Grid/flex children default to min-width:auto, which lets a long word or a
   fixed-width sibling force the track wider than the viewport. Zeroing it out
   lets text wrap and columns shrink instead of overflowing. */
.hero-grid, .kpi-row, .capability-grid, .contact-grid, .form-row, .process-grid,
.header-inner, .footer-inner, .tracker-head, .tracker-route, .contact-detail-item,
.track-box, .event-row, .demo-bar{
  min-width:0;
}
.hero-grid > *, .kpi-row > *, .capability-grid > *, .contact-grid > *, .form-row > *,
.process-grid > *, .header-inner > *, .footer-inner > *, .event-row > *,
.tracker-head > *, .track-box > *{
  min-width:0;
}
.brand span, .brand{ min-width:0; }
nav.main-nav, .header-actions{ min-width:0; }

/* Tightest phones (~360px): the header CTA is redundant with the one already
   in the mobile menu drawer, so drop it here to keep brand + theme toggle +
   hamburger from forcing a horizontal scrollbar. */
@media (max-width:420px){
  .header-inner{ padding-left:16px; padding-right:16px; }
  .header-actions{ gap:10px; }
  .header-actions > a.btn-orange{ display:none; }
  .brand{ font-size:17px; gap:8px; }
  .brand svg{ width:22px; height:22px; }
  .demo-bar{ font-size:12px; padding:10px 12px; }
  .track-box{ flex-direction:column; align-items:stretch; }
  .track-box .btn{ width:100%; justify-content:center; }
}

/* ===== Reduced motion ===== */
@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; }
}


/* ── 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(--ink);
}
.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; } }