/* 1W2R shared header — cosmetic layer. Geometry lives in the inlined critical CSS. */
/* #main-nav prefix beats the legacy stylesheet's id-level rule for the same property. */
#main-nav.h1-nav{-webkit-backdrop-filter:blur(28px) saturate(1.3);backdrop-filter:blur(28px) saturate(1.3);
 transition:none}
.h1-nav::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;
 width:min(520px,60%);height:1px;
 background:linear-gradient(90deg,transparent,rgba(212,175,55,.85),transparent)}
.h1-aur{position:absolute;inset:-40% -10%;pointer-events:none;opacity:.5;z-index:0}
.h1-aur i{position:absolute;display:block;width:52%;height:220%;border-radius:50%;filter:blur(60px)}
.h1-aur i:nth-child(1){left:-6%;background:radial-gradient(circle,rgba(96,120,255,.30),transparent 65%);
 animation:h1aur 13s ease-in-out infinite}
.h1-aur i:nth-child(2){right:-6%;background:radial-gradient(circle,rgba(190,110,255,.24),transparent 65%);
 animation:h1aur 16s ease-in-out 4s infinite}
@keyframes h1aur{0%,100%{transform:translateX(-8%) scale(1);opacity:.75}
 33%{transform:translateX(18%) scale(1.15);opacity:1}66%{transform:translateX(-20%) scale(.95);opacity:.85}}
.h1-sheen{position:absolute;top:0;bottom:0;left:0;width:40%;
 background:linear-gradient(105deg,transparent,rgba(255,255,255,.06) 45%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 55%,transparent);
 animation:h1sheen 7s ease-in-out infinite}
@keyframes h1sheen{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
.h1-tile{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
 box-shadow:0 10px 30px rgba(0,0,0,.4);animation:h1float 4.5s ease-in-out infinite}
@keyframes h1float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.h1-l{transition:color .2s,letter-spacing .2s}
.h1-l:hover,.h1-l:focus-visible{color:#ffe088;letter-spacing:.26em}
.h1-l[aria-current="page"]{color:#d4af37}
.h1-l[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;
 background:rgba(212,175,55,.8)}
.h1-fin{color:#d4af37}
.h1-bridge{position:absolute;left:-18px;right:-18px;top:100%;height:18px}
/* Frosted glass (owner 2026-08-04). The old white-tint background depended on
   backdrop-filter for legibility, but the nav bar's own backdrop-filter makes it the
   panel's backdrop root, so the panel blurred NOTHING below the bar and rendered as a
   flat gray box over busy content. The dark gradient keeps text readable even where
   the blur can't sample the page behind it. */
.h1-panel{position:absolute;left:-18px;top:calc(100% + 10px);min-width:300px;padding:8px;
 flex-direction:column;gap:2px;border-radius:16px;
 background:linear-gradient(150deg,rgba(26,27,33,.62),rgba(15,16,21,.66));
 -webkit-backdrop-filter:blur(34px) saturate(1.35);backdrop-filter:blur(34px) saturate(1.35);
 border:1px solid rgba(255,255,255,.16);
 box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14)}
.h1-dd:hover .h1-panel,.h1-dd.open .h1-panel,.h1-dd:focus-within .h1-panel{display:flex}
/* More ▾ sits at the row's right edge — its panel opens leftward so it can't overflow. */
.h1-more .h1-panel{left:auto;right:-18px;min-width:230px}
.h1-di{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-radius:9px;
 text-decoration:none;transition:background .16s}
.h1-di:hover,.h1-di:focus-visible{background:rgba(212,175,55,.18)}
.h1-dt{font-size:13.5px;font-weight:700;color:#fff;line-height:1.25;text-shadow:0 1px 2px rgba(0,0,0,.85)}
.h1-ds{font-size:11.5px;font-weight:500;color:rgba(255,255,255,.8);line-height:1.3;text-shadow:0 1px 2px rgba(0,0,0,.85)}
.h1-cta{transition:background .18s,color .18s}
.h1-cta:hover,.h1-cta:focus-visible{background:#d4af37;color:#0b0b0b}
.h1-burger{cursor:pointer}
.h1-burger span{display:block;width:20px;height:2px;background:#fff;box-shadow:0 6px 0 #fff,0 -6px 0 #fff}
/* nav sparks: rise from below the bar, settle along its lower edge, hue-cycle, sway.
   Outer wrapper takes the JS cursor-scatter transform; inner <i> runs the CSS motion. */
.h1-spark{position:absolute;bottom:0;pointer-events:none;z-index:1;
 transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.h1-spark i{display:block;border-radius:50%;
 animation:h1collect var(--cd,3s) cubic-bezier(.2,.7,.3,1) var(--del,0s) both,
  h1hue 6s ease-in-out var(--del,0s) infinite,
  h1sway 5.5s ease-in-out var(--del,0s) infinite}
@keyframes h1collect{0%{transform:translateY(14px);opacity:0}35%{opacity:1}
 70%{transform:translateY(calc(var(--set,-10px) - 5px))}82%{transform:translateY(calc(var(--set,-10px) + 3px))}
 100%{transform:translateY(var(--set,-10px));opacity:.95}}
@keyframes h1hue{0%,100%{background:rgba(140,180,255,.9);box-shadow:0 0 9px rgba(90,140,255,.8)}
 33%{background:rgba(200,150,255,.9);box-shadow:0 0 9px rgba(170,100,255,.8)}
 66%{background:rgba(255,255,255,.95);box-shadow:0 0 10px rgba(255,255,255,.85)}}
/* sway rides the individual `translate` property so it composes with h1collect's
   transform:translateY and stays on the compositor (margin-left forced layout —
   Lighthouse flagged it in the non-composited-animations audit, 2026-08-04). */
@keyframes h1sway{0%,100%{translate:0 0}50%{translate:7px 0}}
.h1-fb{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
 box-shadow:0 8px 26px rgba(0,0,0,.45);transition:transform .18s,background .18s}
.h1-fb:hover{transform:scale(1.08);background:rgba(212,175,55,.22)}
/* ---- mobile menu -------------------------------------------------------------
   Self-contained on purpose. The legacy menu was built at runtime by a guarded
   IIFE in the Autoptimize bundle; the moment this header claims id="main-nav"
   that guard returns early and never creates #mnav. Built from the SAME link
   lists as the desktop dropdowns so the two can't drift, and rendered into the
   HTML so crawlers see it — which they could not on the 74 injected pages. */
/* Owner 2026-08-04 (round 2): the sheet is PURE blurred glass — no dark tint.
   Legibility comes from the black outline on the letters, not from an overlay.
   The near-opaque background is only the fallback for browsers with no
   backdrop-filter, where untinted glass would just be the raw page. */
.h1-m{position:fixed;inset:0;z-index:1001;display:none;overflow-y:auto;overscroll-behavior:contain;
 background:rgba(10,12,16,.92);
 -webkit-backdrop-filter:blur(26px) saturate(1.4) brightness(1.18);
 backdrop-filter:blur(26px) saturate(1.4) brightness(1.18);
 padding:22px 22px 60px}
/* 26px, not 44: at 44 the page behind smeared to a black field (owner's iPhone,
   2026-08-04) — the site is dark, so heavy blur reads as tint. At 26 the photos stay
   recognizable, and brightness(1.18) lifts the dark page so the sheet reads as glass. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .h1-m{background:transparent}}
.h1-m .h1-t1,.h1-m-x,.h1-m-h,.h1-m-l,.h1-m-p b{
 text-shadow:-1px 0 0 #000,1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000,0 2px 8px rgba(0,0,0,.65)}
.h1-m-p span,.h1-m-h .h1-m-c{
 text-shadow:-1px 0 0 #000,1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000}
.h1-m.open{display:block}
.h1-m-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.h1-m-x{width:44px;height:44px;border-radius:10px;background:none;border:1px solid rgba(255,255,255,.28);
 color:#fff;font-size:22px;line-height:1;cursor:pointer}
.h1-m-sec{border-top:1px solid rgba(255,255,255,.12)}
.h1-m-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
 padding:16px 2px;background:none;border:0;cursor:pointer;
 font-family:Montserrat,system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.16em;
 text-transform:uppercase;color:#fff;text-align:left}
.h1-m-h .h1-m-c{color:#d4af37;transition:transform .2s}
.h1-m-h[aria-expanded="true"] .h1-m-c{transform:rotate(180deg)}
.h1-m-p{display:none;padding:0 0 12px}
.h1-m-p.open{display:block}
.h1-m-p a{display:flex;flex-direction:column;gap:2px;padding:11px 12px;border-radius:10px;text-decoration:none}
.h1-m-p a:hover,.h1-m-p a:focus-visible{background:rgba(212,175,55,.16)}
.h1-m-p b{font-size:14px;font-weight:700;color:#fff}
.h1-m-p span{font-size:12px;color:rgba(255,255,255,.7)}
.h1-m-l{display:block;padding:16px 2px;border-top:1px solid rgba(255,255,255,.12);
 font-family:Montserrat,system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.16em;
 text-transform:uppercase;color:#fff;text-decoration:none}
.h1-m-l.fin{color:#d4af37}
.h1-m-cta{display:block;margin-top:22px;padding:16px;text-align:center;background:#d4af37;color:#0b0b0b;
 font-family:Montserrat,system-ui,sans-serif;font-size:13px;font-weight:800;letter-spacing:.16em;
 text-transform:uppercase;text-decoration:none;border-radius:4px}
body.h1-lock{overflow:hidden}
/* the floating stack (z 9999) otherwise sits on top of the open sheet and covers
   the FAQ/Financing tap targets — caught on the 2026-08-04 glass pass */
body.h1-lock .h1-float{display:none}
@media(min-width:1100px){.h1-m{display:none!important}}
@media(max-width:767px){.h1-aur,.h1-spark,.h1-sheen{display:none!important}}
@media(prefers-reduced-motion:reduce){
 .h1-tile{animation:none}.h1-aur,.h1-spark,.h1-sheen{display:none}
 .h1-l,.h1-cta,.h1-di,.h1-fb{transition:none}.h1-fb:hover{transform:none}}

/* ---- card sparks (GO.md 2026-08-04) ---------------------------------------
   The homepage card particle field, ported here so all 101 pages inherit it.
   Differences from the homepage version, both per the owner's spec:
     - HOVER ONLY. The field is opacity:0 and the dots are animation-paused
       until the card is hovered, so an idle page runs zero animations.
     - Built lazily by JS on first hover (see SHARED_JS), so nothing is paid
       for at load and there is no markup change on any page.
   border-radius:inherit + overflow:hidden clips the field to the card, so no
   card needs its own overflow rule. Compositor-only properties (transform +
   opacity) — no layout, no paint, no CLS.
   Hue cycle is the approved peacock ramp already live on the homepage
   (green -> teal -> blue -> violet), NOT the "teal/cyan/gold" wording in the
   request — matching the homepage was the stated intent. */
@keyframes h1PkDrift{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.85}
 80%{opacity:.35}100%{transform:translate3d(var(--dx),var(--rise),0);opacity:0}}
@keyframes h1PkHue{
 0%,100%{background:rgba(74,222,161,.9);box-shadow:0 0 6px rgba(74,222,161,.55)}
 35%{background:rgba(56,201,214,.9);box-shadow:0 0 6px rgba(56,201,214,.55)}
 65%{background:rgba(96,140,255,.9);box-shadow:0 0 6px rgba(96,140,255,.55)}
 85%{background:rgba(167,139,250,.9);box-shadow:0 0 6px rgba(167,139,250,.55)}}
.h1-pk{position:absolute;inset:0;overflow:hidden;border-radius:inherit;
 pointer-events:none;z-index:1;opacity:0;transition:opacity .5s ease}
.h1-pk i{position:absolute;bottom:-6px;border-radius:50%;will-change:transform,opacity;
 animation:h1PkDrift var(--d) linear infinite,h1PkHue calc(var(--d)*.77) ease-in-out infinite;
 animation-delay:var(--del),var(--del);animation-play-state:paused}
.h1-pkh:hover>.h1-pk{opacity:1}
.h1-pkh:hover>.h1-pk i{animation-play-state:running}
@media(max-width:767px){.h1-pk{display:none!important}}
@media(prefers-reduced-motion:reduce){.h1-pk{display:none!important}}