/* ══════════════════════════════════════════════════════════
   page-chrome.css — the header / hero-band / footer shared by
   every secondary page (blog, careers, warranty, dealer, …).

   These nine pages each carried their own copy of this block
   inline. One definition here replaces all of them; a change to
   the brand mark or the theme toggle now lands everywhere at once.
   index.html keeps its own bespoke hero chrome in style.css.
   ══════════════════════════════════════════════════════════ */

/* ── sticky header ─────────────────────────────── */
.header{
  position:sticky;top:0;z-index:100;
  background:rgb(var(--surface-rgb) / .92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--hair-0);
  padding-block:var(--sp-5);
}

.header__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);
  width:var(--measure);margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ── brand lockup ──────────────────────────────
   Grey/neutral by intent. The mark carries the colour; the
   wordmark must not pick up an accent on scroll. */
.brand{display:inline-flex;align-items:center;gap:9px}
.brand__mark{width:32px;height:32px;object-fit:contain}
.brand__txt{
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink-soft-0);
}

/* ── theme toggle ──────────────────────────────── */
.theme{
  position:relative;
  display:grid;place-items:center;
  width:40px;height:40px;flex:0 0 40px;
  border-radius:var(--r-pill);
  border:1px solid var(--hair-0);
  color:var(--ink-0);
  transition:border-color var(--dur-1) var(--ease),
             background   var(--dur-1) var(--ease);
}
.theme:hover{border-color:var(--ink-soft-0);background:rgb(var(--chip-rgb) / .7)}
.theme svg,
.theme i{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:18px !important;
  height:18px !important;
  pointer-events:none !important;
  stroke:currentColor !important;
}
.theme__moon{display:none !important}
html[data-theme="dark"] .theme__sun{display:none !important}
html[data-theme="dark"] .theme__moon{display:block !important}

/* ── page hero band ────────────────────────────── */
.hero{
  text-align:center;
  padding:clamp(48px,5.5vw,96px) var(--gutter);
  background:var(--surface-0);
}
@media (max-width:720px){
  .hero{
    padding:clamp(32px,8vw,48px) var(--gutter);
  }
}
.hero__title{
  font-family:var(--font-display);
  font-size:var(--fs-3xl);
  font-weight:900;
  margin-bottom:var(--sp-5);
  opacity:0;transform:translateY(30px);
  animation:reveal-up 1s var(--ease) .2s forwards;
}
.hero__lead{
  font-size:var(--fs-md);
  line-height:var(--lh-normal);
  color:var(--ink-soft-0);
  max-width:60ch;margin-inline:auto;
  opacity:0;transform:translateY(30px);
  animation:reveal-up 1s var(--ease) .3s forwards;
}

/* ── footer ────────────────────────────────────── */
.footer{
  padding:clamp(50px,7vw,100px) var(--gutter);
  background:var(--surface-0);
  border-top:1px solid var(--hair-0);
  text-align:center;
}
.footer__link{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:14px 26px;
  background:var(--brand-grad);
  color:#fff;
  border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:700;
  transition:transform var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.footer__link:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px -12px rgba(240,83,43,.55);
}

@keyframes reveal-up{
  from{opacity:0;transform:translateY(30px)}
  to  {opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .hero__title,.hero__lead{animation:none;opacity:1;transform:none}
}