/* ==========================================================
   ACCEL AIR / A·TEMP — QUOTE BUILDER
   PAGE SHELL
   The site header, the brand mark and the two-column page frame.

   Part 2 of 9. Loaded by index.html in numbered order and
   CASCADES IN THAT ORDER — a rule here can be overridden by any later
   part, so keep the <link> tags in sequence and add new parts at the
   position they belong, not at the end.
   ========================================================== */
/* ══════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════ */
.hdr{
  background:linear-gradient(176deg,color-mix(in srgb,var(--pd) 88%,#fff) 0%,var(--pd) 100%);
  padding:var(--s3) clamp(14px,3vw,28px);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);
  position:sticky;top:0;z-index:50;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07),0 6px 22px rgba(10,38,38,.16);
}
.hdr-title{min-width:0}
/* The brand mark is either the logo image or the text wordmark — the row
   below lays out whichever arrives, plus the "Quote Builder" suffix. */
.hdr-brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap;line-height:1.15}
.brand-logo{display:block;width:auto;height:calc(26px * var(--logo-scale,1));flex-shrink:0}
.brand-word,.hdr-brand .brand-suffix{font-weight:700;font-size:clamp(1rem,2.4vw,1.2rem);
  color:#fff;letter-spacing:-.01em}
.brand-word span{color:var(--pa)}
.hdr-sub{font-size:clamp(.58rem,1.4vw,.66rem);color:rgba(255,255,255,.55);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.4;margin-top:3px}
.hdr-controls{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.hdr-div{width:1px;height:22px;background:rgba(255,255,255,.18)}
.pill-btn{
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;
  border-radius:var(--r-pill);padding:7px 16px;font-weight:600;font-size:.82rem;
  cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.pill-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.pill-btn.on{background:var(--pa);border-color:transparent;font-weight:700;
  box-shadow:0 2px 10px rgba(0,0,0,.18)}

/* ══════════════════════════════════════════════════════════
   PAGE LAYOUT
   ══════════════════════════════════════════════════════════ */
.wrap{
  width:var(--wrapW);max-width:var(--wrapMax);margin:0 auto;
  padding:var(--s5) var(--gutter) var(--s6);
  display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:var(--s5);align-items:start;
}
#leftPanel{min-width:0}