/* ==========================================================================
   QLD BATTERIES — DESIGN SYSTEM
   Direction: "WORKSHOP SIGNAGE"
   Light structural chrome · dark cinematic moments · condensed signage type
   Red (#EE1C25) used as a terminal marker, never as a wash.
   --------------------------------------------------------------------------
   WP HANDOFF: enqueue as the single theme stylesheet. Tokens below map 1:1 to
   theme.json colour + typography settings for Gutenberg block editor parity.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS
   NOTE (legal): PP Formula (Pangram Pangram) + Helvetica Neue (Monotype) are
   licensed desktop/web faces supplied by the client. Confirm WEB licence
   seat count before go-live. [CONTENT TO CONFIRM]
   -------------------------------------------------------------------------- */
/* Display: PP Formula Condensed Bold 700, headings only.
   Metric overrides keep the vertical rhythm tuned for the previous Black cut. */
@font-face{font-family:"PP Formula Cond";src:url("../fonts/PP-Formula-Cond-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;ascent-override:88%;descent-override:28%;line-gap-override:16%;}
@font-face{font-family:"Inter";src:url("../fonts/Inter-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}@font-face{font-family:"Inter";src:url("../fonts/Inter-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}@font-face{font-family:"Inter";src:url("../fonts/Inter-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}


/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Primary red scale — supplied */
  --r50:#FFF1F2; --r100:#FFDFE0; --r200:#FFC5C7; --r300:#FF9DA1; --r400:#FF646B;
  --r500:#FF343D; --r600:#EE1C25; --r700:#C80D15; --r800:#A50F15; --r900:#831419; --r950:#4B0407;
  /* Neutral scale — supplied */
  --n50:#FAFAFA; --n100:#F4F4F5; --n200:#E4E4E7; --n300:#D4D4D8; --n400:#A1A1AA;
  --n500:#71717A; --n600:#52525B; --n700:#3F3F46; --n800:#27272A; --n900:#18181B; --n950:#0E0E11;

  --red:var(--r600);
  --ink:var(--n950);
  --ink-2:var(--n900);
  --ink-3:var(--n700);
  --muted:var(--n500);
  --paper:#FFFFFF;
  --paper-2:var(--n50);
  --paper-3:var(--n100);
  --rule:var(--n200);
  --rule-strong:var(--n300);

  /* Layout */
  --max:1440px;
  --gut:clamp(20px, 5vw, 96px);
  --sec:clamp(64px, 9.5vw, 160px);      /* section vertical rhythm */
  --sec-tight:clamp(48px, 6vw, 104px);
  --radius:4px;                          /* signage, not soft-SaaS */
  --radius-lg:8px;

  /* Type */
  --display:"PP Formula Cond","Arial Narrow",system-ui,sans-serif;
  --signage:var(--body);  /* UI face = body face (see §36) */
  --sub:var(--body);
  --body:"Inter","Helvetica Neue",system-ui,-apple-system,sans-serif;

  /* Motion — emil-design-eng curves */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --ease-settle:cubic-bezier(.22,.72,0,1);

  --header-h:76px;
  --band-h:38px;
}

/* --------------------------------------------------------------------------
   3. RESET / BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:inherit;}
button{font:inherit;color:inherit;}
h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
::selection{background:var(--red);color:#fff;}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px;}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:14px 22px;font-family:var(--signage);text-transform:uppercase;letter-spacing:.06em;font-size:13px;}
.skip:focus{left:8px;top:8px;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* scrollbar — micro-detail */
@media (hover:hover) and (pointer:fine){
  ::-webkit-scrollbar{width:11px;}
  ::-webkit-scrollbar-track{background:var(--n100);}
  ::-webkit-scrollbar-thumb{background:var(--n800);border:3px solid var(--n100);border-radius:99px;}
  ::-webkit-scrollbar-thumb:hover{background:var(--red);}
}

/* --------------------------------------------------------------------------
   4. TYPE SCALE
   -------------------------------------------------------------------------- */
.d-hero{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(46px,11.2vw,110px);line-height:.86;letter-spacing:-.005em;}
.d-1{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(38px,6.6vw,64px);line-height:.9;}
.d-2{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(34px,5.6vw,56px);line-height:.92;}
.d-3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(27px,3.8vw,40px);line-height:.95;}
.d-4{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,2.8vw,32px);line-height:1;}

.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink-3);max-width:56ch;}
.body-lg{font-size:18px;line-height:1.6;}
.body-sm{font-size:16px;line-height:1.6;color:var(--ink-3);}
.util{font-size:14px;line-height:1.5;}
.meas{max-width:68ch;}

/* Eyebrow — the "+ terminal" motif. Signature repeated device. */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--signage);font-weight:700;text-transform:uppercase;
  font-size:11px;letter-spacing:.2em;color:var(--ink-3);margin-bottom:22px;
}
.eyebrow::before{
  content:"";width:10px;height:10px;background:var(--red);flex:none;
  clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%);
}
.eyebrow--line::after{content:"";height:1px;flex:1 1 auto;background:var(--rule);min-width:24px;}
.on-dark .eyebrow,.dark .eyebrow{color:var(--n400);}
.on-dark .eyebrow--line::after,.dark .eyebrow--line::after{background:rgba(255,255,255,.16);}

.accent{color:var(--red);}

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);}
.section{padding-block:var(--sec);position:relative;}
.section--tight{padding-block:var(--sec-tight);}
.dark{background:var(--n950);color:var(--n100);}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff;}
.dark .lede{color:var(--n400);}
.paper-2{background:var(--paper-2);}
.hr{height:1px;background:var(--rule);border:0;}
.dark .hr{background:rgba(255,255,255,.12);}

/* Section head: asymmetric editorial split, never centred */
.sec-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,4.5vw,64px);}
.sec-head__aside{padding-bottom:6px;}
@media (max-width:860px){.sec-head{grid-template-columns:1fr;align-items:start;gap:20px;}}

/* Grain — fixed, pointer-events none (performance guardrail) */
.grain{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");}
@media (max-width:760px){.grain{display:none;}}

/* --------------------------------------------------------------------------
   6. BUTTONS  (44px min target · scale(0.97) press · no pill spam)
   -------------------------------------------------------------------------- */
.btn{
  --bh:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:var(--bh);padding:0 26px;border:1px solid transparent;border-radius:var(--radius);
  font-family:var(--signage);font-weight:700;font-size:14px;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;position:relative;isolation:isolate;overflow:hidden;
  transition:transform 140ms var(--ease-out),background-color 200ms ease,color 200ms ease,border-color 200ms ease;
}
.btn:active{transform:scale(.97);}
.btn__ico{width:26px;height:26px;border-radius:99px;display:grid;place-items:center;flex:none;
  transition:transform 260ms var(--ease-out),background-color 200ms ease;}
.btn__ico svg{width:12px;height:12px;}
.btn:hover .btn__ico{transform:translate(2px,-1px) scale(1.06);}

.btn--primary{background:var(--red);color:#fff;}
.btn--primary .btn__ico{background:rgba(255,255,255,.22);}
.btn--primary:hover{background:var(--r700);}
.btn--primary .btn__ico{color:#fff;}

.btn--dark{background:var(--ink);color:#fff;}
.btn--dark .btn__ico{background:rgba(255,255,255,.14);}
.btn--dark:hover{background:var(--n800);}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong);}
.btn--ghost .btn__ico{background:var(--n100);}
.btn--ghost:hover{border-color:var(--ink);background:var(--n50);}

.btn--onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.28);}
.btn--onDark .btn__ico{background:rgba(255,255,255,.12);}
.btn--onDark:hover{border-color:#fff;background:rgba(255,255,255,.07);}

.btn--lg{--bh:60px;padding:0 32px;font-size:15px;}
.btn--sm{--bh:44px;padding:0 18px;font-size:12.5px;}
.btn--block{width:100%;}

/* text link with rule-grow — micro-detail */
.tlink{display:inline-flex;align-items:center;gap:9px;font-family:var(--signage);font-weight:700;
  font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  padding-bottom:5px;border-bottom:1px solid var(--rule-strong);transition:border-color 200ms ease,color 200ms ease,gap 200ms var(--ease-out);}
.tlink:hover{color:var(--red);border-color:var(--red);gap:14px;}
.dark .tlink{color:#fff;border-color:rgba(255,255,255,.28);}
.dark .tlink:hover{color:var(--r400);border-color:var(--r400);}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}

/* --------------------------------------------------------------------------
   7. CHIPS / BADGES / CONFIRM FLAGS
   Agency convention: anything not yet verified by the client is visibly flagged.
   -------------------------------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:2px;
  font-family:var(--signage);font-weight:700;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  background:var(--n100);color:var(--ink-3);}
.chip--red{background:var(--red);color:#fff;}
.chip--outline{background:transparent;border:1px solid var(--rule-strong);}
.chip--dark{background:rgba(255,255,255,.1);color:#fff;}
.chip--live{background:rgba(0,0,0,.04);color:var(--ink-3);}
.chip--live::before{content:"";width:7px;height:7px;border-radius:99px;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.2);}
.chip--shut::before{background:var(--n400);box-shadow:0 0 0 3px rgba(161,161,170,.18);}

.confirm{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:2px;
  font-family:var(--signage);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:repeating-linear-gradient(-45deg,#FEF3C7 0 7px,#FDE68A 7px 14px);color:#78350F;
  border:1px solid #F5C451;}
.confirm--block{display:flex;width:100%;justify-content:flex-start;padding:10px 14px;font-size:10.5px;line-height:1.5;text-align:left;}
.dark .confirm{background:repeating-linear-gradient(-45deg,#3f2d06 0 7px,#4a3608 7px 14px);color:#FCD34D;border-color:#6b4f0c;}

/* --------------------------------------------------------------------------
   8. SIGNATURE COMPONENT — THE BATTERY PLATE
   The brand's physical world as interface: the label on the side of a battery,
   with terminal posts, a case lip, moulded ridges and a stamped spec grid.
   Used for: Find-My-Battery result, product cards, store card, recon compare.
   -------------------------------------------------------------------------- */
.plate{
  position:relative;background:var(--n950);color:#fff;border-radius:var(--radius);
  border:1px solid var(--n800);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 22px 44px -28px rgba(0,0,0,.5);
  padding:26px 24px 24px;isolation:isolate;overflow:hidden;
}
.plate::before{ /* case lip highlight */
  content:"";position:absolute;inset:0 0 auto;height:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));
  pointer-events:none;}
.plate::after{ /* moulded side ridges */
  content:"";position:absolute;right:0;top:0;bottom:0;width:22px;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 7px);}
.plate--light{background:var(--paper);color:var(--ink);border-color:var(--rule);
  box-shadow:0 1px 0 var(--n100),0 18px 40px -32px rgba(14,14,17,.35);}
.plate--light::before{background:linear-gradient(180deg,rgba(0,0,0,.05),transparent);}
.plate--light::after{background:repeating-linear-gradient(90deg,rgba(0,0,0,.045) 0 1px,transparent 1px 7px);}

/* terminal posts sitting on the plate's top edge */
.plate__terminals{position:absolute;top:-9px;left:24px;right:24px;display:flex;justify-content:space-between;pointer-events:none;z-index:2;}
.term{width:26px;height:16px;border-radius:3px 3px 1px 1px;position:relative;
  background:linear-gradient(180deg,#3b82f6,#1d4ed8);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
.term--pos{background:linear-gradient(180deg,var(--r500),var(--r700));}
.term::after{content:"";position:absolute;inset:3px 5px auto;height:9px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 1px,transparent 1px 4px);}

/* the stamped spec grid */
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:2px;overflow:hidden;}
.plate--light .spec{background:var(--rule);border-color:var(--rule);}
.spec__cell{background:var(--n950);padding:13px 14px;}
.plate--light .spec__cell{background:var(--paper);}
.spec__k{font-family:var(--signage);font-weight:700;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--n500);display:block;margin-bottom:5px;}
.spec__v{font-family:var(--display);font-weight:700;font-size:22px;line-height:1;text-transform:uppercase;letter-spacing:.01em;}
.spec__v--sm{font-size:16px;}
.spec__v--empty{color:var(--n600);}

/* --------------------------------------------------------------------------
   9. HEADER / NAV — rebuilt as the retail header, see §35
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   10. REVEAL ENGINE (paired with a 4s fail-safe in site.js)
   Brand metaphor: content "charges up" — wipes upward into place.
   -------------------------------------------------------------------------- */
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity 760ms var(--ease-settle),transform 900ms var(--ease-settle);}
[data-rv].rv-in{opacity:1;transform:none;}
[data-rv="wipe"]{opacity:1;transform:none;clip-path:inset(100% 0 0 0);transition:clip-path 1000ms var(--ease-settle);}
[data-rv="wipe"].rv-in{clip-path:inset(0 0 0 0);}
[data-rv="scale"]{opacity:0;transform:scale(.96) translateY(18px);}
[data-rv="scale"].rv-in{opacity:1;transform:none;}
.rv-stagger>*{opacity:0;transform:translateY(20px);transition:opacity 700ms var(--ease-settle),transform 820ms var(--ease-settle);}
.rv-stagger.rv-in>*{opacity:1;transform:none;}
.rv-stagger.rv-in>*:nth-child(1){transition-delay:0ms;}
.rv-stagger.rv-in>*:nth-child(2){transition-delay:90ms;}
.rv-stagger.rv-in>*:nth-child(3){transition-delay:180ms;}
.rv-stagger.rv-in>*:nth-child(4){transition-delay:270ms;}
.rv-stagger.rv-in>*:nth-child(5){transition-delay:360ms;}
.rv-stagger.rv-in>*:nth-child(6){transition-delay:450ms;}
.rv-stagger.rv-in>*:nth-child(n+7){transition-delay:520ms;}
@media (prefers-reduced-motion:reduce){
  [data-rv],[data-rv="wipe"],[data-rv="scale"],.rv-stagger>*{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;}
}

/* --------------------------------------------------------------------------
   11. HERO — rebuilt as the split hero + finder dock, see §35
   -------------------------------------------------------------------------- */

/* RETAINED — used outside the hero (product detail spec list, store card) */
.hero__meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:clamp(28px,3.4vw,40px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);}
.hero__meta li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--n300);}
.hero__meta svg{width:14px;height:14px;color:var(--r500);flex:none;}
.hero__phone{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:#fff;padding:12px 4px;}
.hero__phone .lbl{font-family:var(--signage);font-weight:700;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--n400);display:block;}
.hero__phone .num{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.4vw,28px);line-height:1;letter-spacing:.01em;}
.hero__phone:hover .num{color:var(--r400);}

/* --------------------------------------------------------------------------
   12. TRUST STRIP — editorial rhythm, not six identical cards
   -------------------------------------------------------------------------- */
.trust{border-bottom:1px solid var(--rule);background:var(--paper);}
.trust__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.trust__grid>*{border-right:1px solid var(--rule);}
.trust__grid>*:nth-child(3n){border-right:0;}
.trust__grid>*:nth-child(-n+3){border-bottom:1px solid var(--rule);}
.titem{padding:clamp(24px,2.6vw,36px) clamp(18px,2.2vw,34px);display:flex;gap:16px;align-items:flex-start;position:relative;
  transition:background-color 240ms ease;}
.titem:hover{background:var(--n50);}
.titem__n{font-family:var(--display);font-weight:700;font-size:13px;color:var(--red);letter-spacing:.06em;padding-top:4px;flex:none;}
.titem h3{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.9vw,24px);text-transform:uppercase;line-height:1;margin-bottom:8px;}
.titem p{font-size:14.5px;line-height:1.5;color:var(--ink-3);}
.titem--accent{background:var(--n950);}
.titem--accent h3{color:#fff;}
.titem--accent p{color:var(--n400);}
.titem--accent:hover{background:var(--n900);}
@media (max-width:860px){
  .trust__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trust__grid>*{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);}
  .trust__grid>*:nth-child(2n){border-right:0;}
  .trust__grid>*:nth-last-child(-n+2){border-bottom:0;}
}
@media (max-width:520px){
  .trust__grid{grid-template-columns:1fr;}
  .trust__grid>*{border-right:0!important;border-bottom:1px solid var(--rule)!important;}
  .trust__grid>*:last-child{border-bottom:0!important;}
  .titem{padding:20px var(--gut);}
}

/* --------------------------------------------------------------------------
   13. RANGE — two discovery routes
   -------------------------------------------------------------------------- */
.routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,44px);}
@media (max-width:900px){.routes{grid-template-columns:1fr;gap:44px;}}
.route__h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:14px;margin-bottom:6px;border-bottom:2px solid var(--ink);}
.route__h h3{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.1vw,26px);text-transform:uppercase;}
.route__h span{font-family:var(--signage);font-weight:700;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);}
.route__list li{border-bottom:1px solid var(--rule);}
.rrow{display:flex;align-items:center;gap:16px;padding:18px 4px;text-decoration:none;position:relative;transition:padding-left 280ms var(--ease-out),background-color 200ms ease;}
.rrow:hover{padding-left:16px;background:linear-gradient(90deg,var(--n50),transparent);}
.rrow__idx{font-family:var(--signage);font-weight:700;font-size:10px;letter-spacing:.12em;color:var(--n400);width:22px;flex:none;}
.rrow__t{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.8vw,23px);text-transform:uppercase;line-height:1;flex:1;min-width:0;}
.rrow:hover .rrow__t{color:var(--red);}
.rrow__d{font-size:13.5px;color:var(--muted);flex:none;display:none;}
@media (min-width:1080px){.rrow__d{display:block;max-width:230px;text-align:right;line-height:1.35;}}
.rrow__ar{width:28px;height:28px;border-radius:99px;background:var(--n100);display:grid;place-items:center;flex:none;
  transition:background-color 200ms ease,transform 260ms var(--ease-out);}
.rrow__ar svg{width:11px;height:11px;}
.rrow:hover .rrow__ar{background:var(--red);color:#fff;transform:translate(3px,-2px);}

/* --------------------------------------------------------------------------
   14. FIND MY BATTERY — signature moment
   -------------------------------------------------------------------------- */
.finder{background:var(--n950);color:#fff;position:relative;overflow:hidden;}
.finder::before{content:"";position:absolute;inset:0;opacity:.14;
  background:radial-gradient(760px 420px at 12% 0%,rgba(238,28,37,.5),transparent 70%);pointer-events:none;}
.finder__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4.5vw,72px);align-items:start;}
@media (max-width:1000px){.finder__in{grid-template-columns:1fr;}}

.fcard{background:var(--n900);border:1px solid var(--n800);border-radius:var(--radius);overflow:hidden;position:relative;
  box-shadow:0 50px 90px -60px rgba(0,0,0,.95);}
.fcard__hd{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-bottom:1px solid var(--n800);background:var(--n950);flex-wrap:wrap;}
.fcard__hd b{font-family:var(--signage);font-weight:700;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--n400);}

/* charge-level step indicator — the battery filling as you answer */
.clevel{display:flex;align-items:center;gap:8px;}
.clevel__cells{display:flex;gap:3px;padding:3px;border:1px solid var(--n700);border-radius:3px;position:relative;}
.clevel__cells::after{content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:3px;height:9px;background:var(--n700);border-radius:0 2px 2px 0;}
.clevel__c{width:16px;height:12px;background:var(--n800);border-radius:1px;transition:background-color 300ms var(--ease-out);}
.clevel__c.on{background:var(--r600);}
.clevel__pct{font-family:var(--display);font-weight:700;font-size:14px;color:var(--n400);letter-spacing:.02em;min-width:36px;}

.fcard__bd{padding:clamp(20px,2.6vw,30px);}
.ftabs{display:flex;gap:2px;padding:3px;background:var(--n950);border:1px solid var(--n800);border-radius:var(--radius);margin-bottom:22px;}
.ftab{flex:1;min-height:44px;border:0;background:transparent;color:var(--n400);border-radius:2px;cursor:pointer;
  font-family:var(--signage);font-weight:700;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  transition:background-color 200ms ease,color 200ms ease,transform 140ms var(--ease-out);}
.ftab:active{transform:scale(.97);}
.ftab[aria-selected="true"]{background:var(--red);color:#fff;}
.fpane[hidden]{display:none;}

.field{margin-bottom:16px;}
.field__l{display:block;font-family:var(--signage);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--n400);margin-bottom:8px;}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:14px 16px;border-radius:var(--radius);border:1px solid var(--n700);
  background:var(--n950);color:#fff;font-family:var(--body);font-size:16px;outline:0;
  transition:border-color 180ms ease,background-color 180ms ease,box-shadow 180ms ease;}
.field textarea{min-height:128px;resize:vertical;line-height:1.55;}
.field input::placeholder,.field textarea::placeholder{color:var(--n600);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--r500);box-shadow:0 0 0 3px rgba(238,28,37,.2);}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23A1A1AA' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:11px;padding-right:44px;}
.field select:disabled{opacity:.45;cursor:not-allowed;}
.field--rego input{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:.1em;text-transform:uppercase;text-align:center;min-height:68px;
  background:linear-gradient(180deg,#fff,#EDEDEF);color:var(--n950);border:2px solid var(--n700);border-radius:6px;}
.field--rego input::placeholder{color:var(--n400);}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}
.field__hint{font-size:12.5px;color:var(--n500);margin-top:7px;}

.fout{margin-top:22px;padding-top:22px;border-top:1px solid var(--n800);}
.fout[hidden]{display:none;}
.fout__veh{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:13px 16px;background:var(--n950);border:1px solid var(--n800);border-radius:var(--radius);}
.fout__veh svg{width:17px;height:17px;color:#16a34a;flex:none;}
.fout__veh b{font-family:var(--display);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.01em;}
.fout__veh span{font-size:13px;color:var(--n400);display:block;}

.fsteps{display:flex;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--n800);flex-wrap:wrap;}
.fstep{flex:1 1 160px;}
.fstep__n{font-family:var(--display);font-weight:700;font-size:12px;color:var(--r500);letter-spacing:.1em;margin-bottom:7px;}
.fstep__t{font-family:var(--signage);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:5px;}
.fstep__d{font-size:13px;color:var(--n500);line-height:1.45;}

/* --------------------------------------------------------------------------
   15. FAMILY / EDITORIAL SPLIT
   -------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(28px,5vw,88px);align-items:center;}
.split--rev>.split__media{order:2;}
@media (max-width:920px){.split{grid-template-columns:1fr;gap:34px;}.split--rev>.split__media{order:0;}}
.split__media{position:relative;}
.split__media img{width:100%;border-radius:var(--radius);}
.stamp{position:absolute;right:-14px;bottom:-18px;width:clamp(104px,11vw,136px);height:clamp(104px,11vw,136px);
  background:var(--red);border-radius:99px;display:grid;place-items:center;color:#fff;text-align:center;
  box-shadow:0 22px 44px -22px rgba(238,28,37,.75);}
.stamp b{font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,36px);line-height:.85;display:block;}
.stamp span{font-family:var(--signage);font-weight:700;font-size:8.5px;letter-spacing:.17em;text-transform:uppercase;display:block;margin-top:5px;}
@media (max-width:920px){.stamp{right:12px;bottom:-14px;}}
.caption{display:flex;align-items:center;gap:10px;margin-top:14px;font-family:var(--sub);font-size:12.5px;color:var(--muted);letter-spacing:.02em;}
.caption::before{content:"";width:18px;height:1px;background:var(--rule-strong);flex:none;}
.dark .caption{color:var(--n500);}

.pullquote{border-left:3px solid var(--red);padding:4px 0 4px 22px;margin:clamp(22px,3vw,34px) 0;
  font-family:var(--sub);font-size:clamp(19px,2vw,25px);line-height:1.32;color:var(--ink);max-width:36ch;}
.dark .pullquote{color:#fff;}

.vlist{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule);margin:clamp(22px,3vw,32px) 0;}
.vlist li{background:var(--paper);padding:15px 0 15px 2px;display:flex;gap:16px;align-items:baseline;}
.vlist b{font-family:var(--signage);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);width:118px;flex:none;}
.vlist span{font-size:15.5px;color:var(--ink-3);line-height:1.5;}
.dark .vlist{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12);}
.dark .vlist li{background:var(--n950);}
.dark .vlist span{color:var(--n400);}
@media (max-width:520px){.vlist li{flex-direction:column;gap:5px;}.vlist b{width:auto;}}

/* --------------------------------------------------------------------------
   16. ROADSIDE BANNER
   -------------------------------------------------------------------------- */
.roadside{background:var(--n950);color:#fff;position:relative;overflow:hidden;}
.roadside::before{content:"";position:absolute;inset:0;opacity:.1;pointer-events:none;
  background:repeating-linear-gradient(-45deg,var(--r600) 0 24px,transparent 24px 48px);}
.roadside__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:clamp(26px,4vw,64px);align-items:center;}
@media (max-width:940px){.roadside__in{grid-template-columns:1fr;}}
.roadside h2{margin-bottom:16px;}
.hours-card{background:var(--n900);border:1px solid var(--n800);border-radius:var(--radius);padding:22px;}
.hours-card h3{font-family:var(--signage);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--n400);margin-bottom:14px;}
.hours{display:grid;gap:1px;background:var(--n800);border:1px solid var(--n800);border-radius:2px;overflow:hidden;}
.hours li{background:var(--n950);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 14px;font-size:14.5px;}
.hours li span:first-child{color:var(--n400);}
.hours li b{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.02em;color:#fff;}
.hours li.is-shut b{color:var(--n500);}
.dark .hours{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.1);}

/* --------------------------------------------------------------------------
   17. NEW VS RECONDITIONED
   -------------------------------------------------------------------------- */
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);position:relative;}
@media (max-width:860px){.vs{grid-template-columns:1fr;}}
.vs__div{position:absolute;left:50%;top:26px;bottom:26px;width:1px;background:var(--rule);transform:translateX(-50%);}
.vs__div span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--paper);padding:9px 0;
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--n400);letter-spacing:.06em;}
@media (max-width:860px){.vs__div{display:none;}}
.opt{display:flex;flex-direction:column;height:100%;padding:clamp(22px,2.6vw,34px);border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);transition:border-color 260ms ease,transform 400ms var(--ease-out),box-shadow 400ms var(--ease-out);}
.opt:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 28px 52px -40px rgba(14,14,17,.5);}
.opt__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;}
.opt h3{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.2vw,38px);text-transform:uppercase;line-height:.92;}
.opt__p{font-size:15.5px;color:var(--ink-3);line-height:1.55;margin-bottom:20px;}
.opt__list{display:grid;gap:11px;margin-bottom:26px;}
.opt__list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink-2);line-height:1.45;}
.opt__list svg{width:15px;height:15px;color:var(--red);flex:none;margin-top:4px;}
.opt__ft{margin-top:auto;}

/* --------------------------------------------------------------------------
   18. REVIEWS
   -------------------------------------------------------------------------- */
.rsum{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);align-items:center;
  padding:clamp(22px,2.6vw,32px);border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper-2);margin-bottom:clamp(28px,3.4vw,44px);}
@media (max-width:680px){.rsum{grid-template-columns:1fr;gap:18px;}}
.rsum__score{text-align:center;padding-right:clamp(20px,3vw,44px);border-right:1px solid var(--rule);}
@media (max-width:680px){.rsum__score{border-right:0;border-bottom:1px solid var(--rule);padding:0 0 18px;text-align:left;}}
.rsum__n{font-family:var(--display);font-weight:700;font-size:clamp(46px,6vw,68px);line-height:.85;}
.stars{display:flex;gap:3px;margin:9px 0 6px;}
@media (max-width:680px){.stars{justify-content:flex-start;}}
.stars svg{width:15px;height:15px;color:#F5A524;}
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px);}
@media (max-width:980px){.reviews{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.reviews{grid-template-columns:1fr;}}
.rev{display:flex;flex-direction:column;padding:24px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);
  transition:border-color 240ms ease,transform 380ms var(--ease-out);}
.rev:hover{border-color:var(--rule-strong);transform:translateY(-2px);}
.rev__q{font-family:var(--sub);font-size:17px;line-height:1.45;color:var(--ink);margin:14px 0 20px;flex:1;}
.rev__by{display:flex;align-items:center;gap:11px;padding-top:16px;border-top:1px solid var(--rule);}
.rev__av{width:34px;height:34px;border-radius:99px;background:var(--n900);color:#fff;display:grid;place-items:center;flex:none;
  font-family:var(--display);font-weight:700;font-size:14px;}
.rev__nm{font-family:var(--signage);font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;}
.rev__src{font-size:11.5px;color:var(--muted);}

/* --------------------------------------------------------------------------
   19. RECYCLING FLOW
   -------------------------------------------------------------------------- */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,20px);align-items:stretch;}
@media (max-width:820px){.flow{grid-template-columns:1fr;}}
.fnode{position:relative;padding:clamp(22px,2.4vw,30px);border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);}
.dark .fnode{background:var(--n900);border-color:var(--n800);}
.fnode__n{font-family:var(--signage);font-weight:700;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--red);margin-bottom:14px;}
.fnode h3{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.3vw,27px);text-transform:uppercase;margin-bottom:9px;line-height:.98;}
.fnode p{font-size:14.5px;color:var(--ink-3);line-height:1.55;}
.dark .fnode p{color:var(--n400);}
.fnode:not(:last-child)::after{content:"";position:absolute;right:calc(-1 * clamp(14px,2vw,20px) / 2 - 8px);top:50%;transform:translateY(-50%);
  width:16px;height:16px;border-right:2px solid var(--red);border-top:2px solid var(--red);rotate:45deg;}
@media (max-width:820px){.fnode:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:calc(-1 * clamp(14px,2vw,20px) / 2 - 8px);transform:translateX(-50%);rotate:135deg;}}

/* --------------------------------------------------------------------------
   20. LOCATION
   -------------------------------------------------------------------------- */
.loc{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:0;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--paper);}
@media (max-width:940px){.loc{grid-template-columns:1fr;}}
.loc__map{position:relative;min-height:clamp(320px,42vw,520px);background:var(--n200);}
.loc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.55) contrast(1.05);}
.loc__info{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:22px;border-left:1px solid var(--rule);}
@media (max-width:940px){.loc__info{border-left:0;border-top:1px solid var(--rule);}}
.loc__blk h3{font-family:var(--signage);font-weight:700;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:11px;}
.loc__addr{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,32px);text-transform:uppercase;line-height:1;}
.loc__addr span{display:block;}
.hours--light li{background:var(--paper);border-bottom:1px solid var(--rule);padding:10px 0;}
.hours--light{background:none;border:0;border-radius:0;}
.hours--light li:last-child{border-bottom:0;}
.hours--light li span:first-child{color:var(--ink-3);}
.hours--light li b{color:var(--ink);}
.hours--light li.is-shut b{color:var(--n400);}

/* --------------------------------------------------------------------------
   21. GUIDES / ARTICLE CARDS
   -------------------------------------------------------------------------- */
.guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;}
@media (max-width:920px){.guides{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.guides{grid-template-columns:1fr;}}
.gcard{display:flex;flex-direction:column;background:var(--paper);padding:clamp(22px,2.4vw,30px);text-decoration:none;min-height:230px;
  transition:background-color 260ms ease;}
.gcard:hover{background:var(--n50);}
.gcard__cat{font-family:var(--signage);font-weight:700;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--red);margin-bottom:16px;}
.gcard h3{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.2vw,26px);text-transform:uppercase;line-height:.98;margin-bottom:11px;
  transition:color 200ms ease;}
.gcard:hover h3{color:var(--red);}
.gcard p{font-size:14.5px;color:var(--ink-3);line-height:1.5;margin-bottom:22px;}
.gcard__ft{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-family:var(--signage);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.gcard__ar{width:28px;height:28px;border-radius:99px;background:var(--n100);display:grid;place-items:center;color:var(--ink);
  transition:background-color 220ms ease,color 220ms ease,transform 280ms var(--ease-out);}
.gcard__ar svg{width:11px;height:11px;}
.gcard:hover .gcard__ar{background:var(--red);color:#fff;transform:translate(3px,-2px);}

/* --------------------------------------------------------------------------
   22. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq{border-top:1px solid var(--rule);}
.faq__i{border-bottom:1px solid var(--rule);}
.faq__btn{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--display);font-weight:700;font-size:clamp(19px,2vw,25px);text-transform:uppercase;line-height:1.05;color:var(--ink);
  transition:color 200ms ease;}
.faq__btn:hover{color:var(--red);}
.faq__ico{width:30px;height:30px;border-radius:99px;border:1px solid var(--rule-strong);display:grid;place-items:center;flex:none;margin-top:2px;
  transition:background-color 220ms ease,border-color 220ms ease,color 220ms ease;}
.faq__ico svg{width:11px;height:11px;transition:transform 300ms var(--ease-out);}
.faq__btn[aria-expanded="true"] .faq__ico{background:var(--red);border-color:var(--red);color:#fff;}
.faq__btn[aria-expanded="true"] .faq__ico svg{transform:rotate(45deg);}
.faq__p{overflow:hidden;height:0;transition:height 340ms var(--ease-drawer);}
.faq__in{padding:0 60px 26px 0;font-size:16px;line-height:1.62;color:var(--ink-3);max-width:74ch;}
.faq__in p+p{margin-top:12px;}
.faq__in a{color:var(--red);text-underline-offset:3px;}
@media (max-width:620px){.faq__in{padding-right:0;}}
.dark .faq,.dark .faq__i{border-color:rgba(255,255,255,.14);}
.dark .faq__btn{color:#fff;}
.dark .faq__in{color:var(--n400);}
.dark .faq__ico{border-color:rgba(255,255,255,.24);}

/* --------------------------------------------------------------------------
   23. FINAL CTA + FOOTER
   -------------------------------------------------------------------------- */
.fcta{background:var(--n950);color:#fff;position:relative;overflow:hidden;}
.fcta::before{content:"";position:absolute;left:50%;top:-30%;width:120vw;height:120%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(48% 52% at 50% 40%,rgba(238,28,37,.28),transparent 70%);}
.fcta__in{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;}
.fcta h2{margin-bottom:18px;}
.fcta .lede{margin:0 auto 32px;text-align:center;}

.ft{background:var(--n950);color:var(--n400);border-top:1px solid rgba(255,255,255,.1);font-size:14.5px;}
.ft__top{display:grid;grid-template-columns:minmax(0,1.22fr) repeat(3,minmax(0,1fr));gap:clamp(26px,3.4vw,52px);padding-block:clamp(48px,6vw,80px);}
@media (max-width:1000px){.ft__top{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.ft__top{grid-template-columns:1fr;gap:34px;}}
.ft__brand img{width:150px;margin-bottom:20px;}
.ft__brand p{max-width:34ch;line-height:1.55;color:var(--n500);margin-bottom:20px;}
.ft h3{font-family:var(--signage);font-weight:700;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:#fff;margin-bottom:16px;}
.ft ul li+li{margin-top:9px;}
.ft a{text-decoration:none;transition:color 180ms ease;}
.ft__top a:hover{color:var(--r400);}
.ft__contact li{display:flex;gap:11px;align-items:flex-start;line-height:1.5;}
.ft__contact svg{width:14px;height:14px;color:var(--r500);flex:none;margin-top:4px;}
.ft__contact b{color:#fff;font-weight:500;}
.ft__bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:24px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:var(--n500);}
.ft__legal{display:flex;flex-wrap:wrap;gap:8px 22px;}
.ft__social{display:flex;gap:8px;}
.ft__social a{width:40px;height:40px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);display:grid;place-items:center;
  transition:border-color 200ms ease,background-color 200ms ease,transform 200ms var(--ease-out);}
.ft__social a:hover{border-color:var(--r500);background:rgba(238,28,37,.14);transform:translateY(-2px);}
.ft__social svg{width:16px;height:16px;}

/* --------------------------------------------------------------------------
   24. INNER PAGE TEMPLATES
   -------------------------------------------------------------------------- */
.crumbs{background:var(--paper-2);border-bottom:1px solid var(--rule);}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block:13px;font-size:12.5px;color:var(--muted);}
.crumbs a{text-decoration:none;color:var(--ink-3);}
.crumbs a:hover{color:var(--red);}
.crumbs li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--n300);}
.crumbs [aria-current="page"]{color:var(--ink);}

.phero{background:var(--n950);color:#fff;position:relative;overflow:hidden;}
.phero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(640px 320px at 88% 0%,rgba(238,28,37,.25),transparent 70%);}
.phero__in{position:relative;z-index:1;padding-block:clamp(48px,6.5vw,96px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,64px);align-items:end;}
@media (max-width:900px){.phero__in{grid-template-columns:1fr;align-items:start;}}
.phero h1{margin-bottom:18px;}
.phero .lede{color:var(--n400);}

.prose{max-width:72ch;font-size:17px;line-height:1.68;color:var(--ink-2);}
.prose>*+*{margin-top:22px;}
.prose h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,36px);text-transform:uppercase;line-height:1;margin-top:clamp(36px,4vw,56px);}
.prose h3{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.2vw,26px);text-transform:uppercase;line-height:1.05;margin-top:clamp(28px,3vw,40px);}
.prose ul{display:grid;gap:11px;}
.prose ul li{display:flex;gap:12px;align-items:flex-start;}
.prose ul li::before{content:"";width:7px;height:7px;background:var(--red);flex:none;margin-top:9px;
  clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%);}
.prose ol{counter-reset:s;display:grid;gap:12px;}
.prose ol li{counter-increment:s;display:flex;gap:14px;align-items:flex-start;}
.prose ol li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-weight:700;font-size:14px;color:var(--red);flex:none;padding-top:4px;}
.prose a{color:var(--red);text-underline-offset:3px;}
.prose strong{font-weight:500;color:var(--ink);}

.page-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,5vw,72px);align-items:start;}
@media (max-width:980px){.page-grid{grid-template-columns:1fr;}}
.aside{position:sticky;top:calc(var(--header-h) + 22px);display:grid;gap:18px;}
@media (max-width:980px){.aside{position:static;}}
.acard{border:1px solid var(--rule);border-radius:var(--radius);padding:22px;background:var(--paper);}
.acard h3{font-family:var(--display);font-weight:700;font-size:21px;text-transform:uppercase;margin-bottom:11px;line-height:1;}
.acard p{font-size:14.5px;color:var(--ink-3);line-height:1.55;margin-bottom:18px;}
.acard__list li+li{margin-top:2px;}
.acard__list a{display:block;padding:9px 0;border-bottom:1px solid var(--rule);text-decoration:none;font-size:15px;color:var(--ink-2);
  transition:color 180ms ease,padding-left 180ms var(--ease-out);}
.acard__list a:hover{color:var(--red);padding-left:6px;}
.acard__list li:last-child a{border-bottom:0;}

/* Product grid + card (spec-plate variant) */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px);}
@media (max-width:980px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.pgrid{grid-template-columns:1fr;}}
.pcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);overflow:hidden;transition:border-color 240ms ease,transform 380ms var(--ease-out),box-shadow 380ms var(--ease-out);}
.pcard:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 30px 56px -42px rgba(14,14,17,.55);}
.pcard__top{position:relative;padding:20px;background:var(--n950);color:#fff;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;}
.pcard__top::after{content:"";position:absolute;right:0;top:0;bottom:0;width:20px;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 7px);}
.pcard__tag{display:inline-flex;align-self:flex-start;padding:5px 9px;border-radius:2px;background:rgba(255,255,255,.12);
  font-family:var(--signage);font-weight:700;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;}
.pcard__tag--recon{background:var(--r800);}
.pcard__tag--new{background:var(--red);}
.pcard__code{font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,34px);text-transform:uppercase;line-height:.9;letter-spacing:.01em;}
.pcard__bd{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;gap:14px;}
.pcard__nm{font-family:var(--signage);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);line-height:1.35;}
.pcard__spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:2px;overflow:hidden;}
.pcard__spec div{background:var(--paper);padding:9px 10px;}
.pcard__spec dt{font-family:var(--signage);font-weight:700;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;}
.pcard__spec dd{font-family:var(--display);font-weight:700;font-size:15px;margin:0;color:var(--n400);}
.pcard__ft{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.pcard__pr{font-family:var(--display);font-weight:700;font-size:19px;color:var(--n400);}
.pcard__go{font-family:var(--signage);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:7px;}
.pcard:hover .pcard__go svg{transform:translateX(3px);}
.pcard__go svg{width:10px;height:10px;transition:transform 240ms var(--ease-out);}

/* data-state note used wherever client data is pending */
.note{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:1px dashed #F5C451;background:#FFFBEB;border-radius:var(--radius);
  font-size:14px;line-height:1.55;color:#78350F;margin-bottom:clamp(22px,2.6vw,32px);}
.note svg{width:16px;height:16px;flex:none;margin-top:3px;}
.note b{font-family:var(--signage);font-weight:700;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;display:block;margin-bottom:4px;}
.dark .note{background:rgba(245,196,81,.09);color:#FCD34D;}

/* Forms */
.form{display:grid;gap:16px;}
.form--light .field input,.form--light .field select,.form--light .field textarea{background:var(--paper);border-color:var(--rule-strong);color:var(--ink);}
.form--light .field__l{color:var(--ink-3);}
.form--light .field input::placeholder,.form--light .field textarea::placeholder{color:var(--n400);}
.form--light .field input:focus,.form--light .field select:focus,.form--light .field textarea:focus{border-color:var(--red);}
.form--light .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2371717A' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");}
.form__ok{padding:16px 18px;border-radius:var(--radius);background:#ECFDF5;border:1px solid #6EE7B7;color:#065F46;font-size:15px;}
.form__ok[hidden]{display:none;}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--ink-3);line-height:1.5;}
.consent input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--red);}

/* Service area tags */
.areas{display:flex;flex-wrap:wrap;gap:8px;}
.areas li{padding:8px 13px;border:1px solid var(--rule);border-radius:2px;font-size:13.5px;color:var(--ink-3);background:var(--paper);}
.dark .areas li{border-color:rgba(255,255,255,.16);background:transparent;color:var(--n400);}

/* Related / next-step strip */
.nextstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;}
@media (max-width:820px){.nextstrip{grid-template-columns:1fr;}}
.nextstrip a{background:var(--paper);padding:26px;text-decoration:none;display:flex;flex-direction:column;gap:9px;transition:background-color 240ms ease;}
.nextstrip a:hover{background:var(--n50);}
.nextstrip b{font-family:var(--display);font-weight:700;font-size:22px;text-transform:uppercase;line-height:1;}
.nextstrip a:hover b{color:var(--red);}
.nextstrip span{font-size:14px;color:var(--ink-3);line-height:1.45;}

/* 404 */
.e404{min-height:62vh;display:grid;place-items:center;text-align:center;}

/* --------------------------------------------------------------------------
   25. HEADER SEARCH — now an always-visible combobox, see §35
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   26. INNER-PAGE SUPPORT COMPONENTS
   -------------------------------------------------------------------------- */
.phero__facts{display:grid;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);overflow:hidden;}
.phero__facts>div{background:var(--n950);padding:15px 18px;}
.phero__facts span{display:block;font-family:var(--signage);font-weight:700;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--r500);margin-bottom:5px;}
.phero__facts b{font-family:var(--display);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.01em;color:#fff;}

.filters{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  padding:14px 16px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);margin-bottom:clamp(18px,2vw,26px);}
.filters__l,.filters__r{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.filters__lbl{font-family:var(--signage);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:4px;}
.fchip{min-height:40px;padding:0 15px;border:1px solid var(--rule-strong);background:var(--paper);border-radius:3px;cursor:pointer;
  font-family:var(--signage);font-weight:700;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  transition:border-color 180ms ease,background-color 180ms ease,color 180ms ease,transform 140ms var(--ease-out);}
.fchip:hover{border-color:var(--ink);color:var(--ink);}
.fchip:active{transform:scale(.97);}
.fchip.is-on{background:var(--ink);border-color:var(--ink);color:#fff;}
.filters select{min-height:40px;padding:0 38px 0 14px;border:1px solid var(--rule-strong);border-radius:3px;background:var(--paper);
  font-family:var(--body);font-size:14px;color:var(--ink);appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2371717A' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:10px;}
@media (max-width:620px){.filters{flex-direction:column;align-items:stretch;}.filters__r{justify-content:space-between;}.filters select{flex:1;}}

.pcard--pending{border-style:dashed;border-color:var(--rule-strong);background:var(--n50);}
.pcard--pending:hover{transform:none;box-shadow:none;border-color:var(--rule-strong);}
.pcard--pending .pcard__top{background:var(--n200);color:var(--n600);}
.pcard--pending .pcard__top::after{display:none;}
.pcard--pending .pcard__tag{background:rgba(0,0,0,.08);color:var(--n600);}
.pcard__slot{font-family:var(--signage);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:var(--n500);}
.pcard--pending .pcard__spec div{background:var(--n50);}
.pcard--example{border-color:var(--rule-strong);}
.pcard--example .pcard__code{color:var(--n400);}

.benefits{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;}
.benefits li{background:var(--paper);display:flex;gap:14px;align-items:flex-start;padding:18px 20px;}
.benefits svg{width:16px;height:16px;color:var(--red);flex:none;margin-top:4px;}
.benefits b{display:block;font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;line-height:1;margin-bottom:6px;}
.benefits span{font-size:15px;line-height:1.55;color:var(--ink-3);}

/* Review submission / trust signals */
.tsignals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;}
@media (max-width:860px){.tsignals{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:480px){.tsignals{grid-template-columns:1fr;}}
.tsignals div{background:var(--paper);padding:24px 22px;}
.tsignals b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,32px);text-transform:uppercase;line-height:1;margin-bottom:8px;}
.tsignals span{font-size:14px;color:var(--ink-3);line-height:1.5;}

/* Product detail */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;}
@media (max-width:900px){.pdp{grid-template-columns:1fr;}}
.pdp__media{border:1px solid var(--rule);border-radius:var(--radius);background:var(--n100);aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:30px;}
.pdp__media p{font-family:var(--signage);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--n500);line-height:1.7;}
.pdp__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px;}
.pdp__thumbs div{aspect-ratio:1;border:1px dashed var(--rule-strong);border-radius:3px;background:var(--n50);}
.spectable{width:100%;border-collapse:collapse;font-size:15px;}
.spectable th,.spectable td{text-align:left;padding:13px 0;border-bottom:1px solid var(--rule);vertical-align:top;}
.spectable th{font-family:var(--signage);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);width:42%;}
.spectable td{color:var(--ink-2);}

/* generic 2-col utility */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);align-items:start;}
@media (max-width:860px){.two{grid-template-columns:1fr;}}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);}
@media (max-width:900px){.three{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.three{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   27. HEADER FIT CORRECTIONS (responsive QA pass — brief §39)
   -------------------------------------------------------------------------- */
.ft__brand img{width:auto;height:76px;margin-bottom:20px;}

/* --------------------------------------------------------------------------
   29. FAQ PAGE CATEGORIES
   -------------------------------------------------------------------------- */
.faqcats>.faqcat+.faqcat{margin-top:clamp(36px,4.5vw,64px);}
.faqcat>h2{margin-bottom:18px;}
.faqcat[hidden]{display:none;}
.blogslot .gcard__ft{color:var(--n400);}
.ft__social .is-pending{width:40px;height:40px;border:1px dashed rgba(255,255,255,.2);border-radius:var(--radius);
  display:grid;place-items:center;color:var(--n600);cursor:not-allowed;}
.ft__social .is-pending svg{width:16px;height:16px;}

/* --------------------------------------------------------------------------
   30. DISABLED STATES + CHARGE METER SPACING (visual QA pass)
   -------------------------------------------------------------------------- */
.btn:disabled,.btn[disabled]{background:var(--n800);color:var(--n500);border-color:var(--n800);cursor:not-allowed;}
.btn:disabled:hover,.btn[disabled]:hover{background:var(--n800);}
.btn:disabled .btn__ico,.btn[disabled] .btn__ico{background:rgba(255,255,255,.06);}
.btn:disabled:active,.btn[disabled]:active{transform:none;}
.btn--ghost:disabled,.btn--ghost[disabled]{background:transparent;color:var(--n400);border-color:var(--rule);}
.clevel{gap:14px;}
.clevel__cells{margin-right:6px;}
.clevel__pct{min-width:40px;text-align:right;}

/* --------------------------------------------------------------------------
   31. ANCHOR OFFSET + MAP FALLBACK
   -------------------------------------------------------------------------- */
/* stop in-page anchors landing underneath the sticky header */
[id]{scroll-margin-top:calc(var(--header-h) + 24px);}

/* the map iframe sits on top of a real, readable fallback, so a slow, blocked
   or consent-gated embed never renders as an empty grey box */
.loc__map{background:var(--n900);}
.loc__fallback{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
  padding:clamp(22px,3vw,34px);color:#fff;
  background:
    linear-gradient(180deg,rgba(14,14,17,.2),rgba(14,14,17,.88)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 38px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 38px),
    var(--n900);}
.loc__fallback b{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.4vw,28px);text-transform:uppercase;line-height:1;}
.loc__fallback span{font-size:14px;color:var(--n400);}
.loc__fallback .btn{align-self:flex-start;}
.loc__pin{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:99px;
  background:var(--red);box-shadow:0 0 0 7px rgba(238,28,37,.28),0 0 0 15px rgba(238,28,37,.12);}
.loc__map iframe{position:absolute;inset:0;z-index:1;}

/* --------------------------------------------------------------------------
   32. HOMEPAGE VISUAL QA FIXES
   -------------------------------------------------------------------------- */
/* trust strip: it's a link, not a paragraph */
.titem{text-decoration:none;color:inherit;}
.titem__bd{min-width:0;}
.titem:hover h3{color:var(--red);}
.titem--accent:hover h3{color:var(--r400);}

/* pending review stars stay neutral — gold stars would be an implied rating */
.stars--pending svg{color:var(--n300);}
.dark .stars--pending svg{color:var(--n700);}

/* buttons never wrap; tighten padding on small screens instead */
.btn{white-space:nowrap;max-width:100%;}
@media (max-width:430px){
  .btn{padding-inline:20px;font-size:13px;letter-spacing:.07em;gap:10px;}
  .btn--lg{padding-inline:22px;font-size:13.5px;}
}
.acard .btn{width:100%;}

/* family stamp: sit inside the photo on mobile so it never covers the caption */
@media (max-width:920px){
  .stamp{top:14px;right:14px;bottom:auto;width:96px;height:96px;}
  .stamp b{font-size:26px;}
}

/* fixed mobile action bar must not cover the footer */
@media (max-width:820px){
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom));}
}

/* closing CTA glow was too faint to register */
.fcta::before{background:radial-gradient(48% 52% at 50% 40%,rgba(238,28,37,.4),transparent 70%);}
/* at the narrowest phones a wrapped label beats an overflowing one */
@media (max-width:360px){
  .btn{white-space:normal;text-align:center;line-height:1.25;padding-block:12px;}
  .opt .btn,.opt__ft .btn{width:100%;}
}

/* --------------------------------------------------------------------------
   33. MEGA MENU VIEWPORT CLAMP — first panel was clipped off the left edge
   -------------------------------------------------------------------------- */
.nav__item[data-mega]:first-child .mega{left:0;transform:translateX(0) translateY(-6px) scale(.985);transform-origin:top left;}
.nav__item[data-mega]:first-child.is-open .mega{transform:translateX(0) translateY(0) scale(1);}

/* ==========================================================================
   34. RESPONSIVE TYPE SCALE  — typography refinement only.
   Layout, colour, components, imagery and content are untouched.
   Display faces stay PP Formula Condensed; body/UI stays Neue Helvetica.

   Each size is interpolated between the specified anchors with
   calc(<vw> + <px>), banded by breakpoint, so the named widths land on
   their exact values and everything between them scales smoothly rather
   than stepping.
   ========================================================================== */

/* ---- HERO ----------------------------------------------------------------
   320→44 · 375→48 · 390→50 · 430→52 · 768→58 · 1024→64 · 1280→72 · 1440→76 */
.d-hero{font-size:calc(7.2727vw + 20.73px);line-height:.9;letter-spacing:-.004em;}
@media (min-width:431px){ .d-hero{font-size:calc(1.7804vw + 44.35px);line-height:.9;} }
@media (min-width:768px){ .d-hero{font-size:calc(2.3438vw + 40px);line-height:.89;} }
@media (min-width:1024px){ .d-hero{font-size:calc(3.125vw + 32px);line-height:.88;} }
@media (min-width:1280px){ .d-hero{font-size:calc(2.5vw + 40px);line-height:.88;} }
@media (min-width:1440px){ .d-hero{font-size:76px;line-height:.88;} }

/* ---- H1 ---- mobile 42–48 · tablet 48–52 · desktop 56–64 ----------------- */
.d-1{font-size:calc(5.4545vw + 24.55px);line-height:.94;}
@media (min-width:431px){ .d-1{font-size:calc(.5952vw + 45.44px);} }
@media (min-width:768px){ .d-1{font-size:calc(.7843vw + 43.98px);line-height:.95;} }
@media (min-width:1024px){ .d-1{font-size:calc(1.5686vw + 39.94px);line-height:.93;} }
@media (min-width:1280px){ .d-1{font-size:calc(1.8868vw + 35.85px);} }
@media (min-width:1440px){ .d-1{font-size:64px;line-height:.92;} }

/* ---- H2 ---- mobile 36–42 · tablet 42–46 · desktop 48–52 ----------------- */
.d-2{font-size:calc(5.4545vw + 18.55px);line-height:.96;}
@media (min-width:431px){ .d-2{font-size:calc(.2976vw + 40.72px);} }
@media (min-width:768px){ .d-2{font-size:calc(1.1765vw + 33.96px);line-height:.96;} }
@media (min-width:1024px){ .d-2{font-size:calc(.7843vw + 39.97px);line-height:.95;} }
@media (min-width:1280px){ .d-2{font-size:calc(.9434vw + 37.92px);} }
@media (min-width:1440px){ .d-2{font-size:52px;line-height:.94;} }

/* ---- H3 ---- mobile 28–32 · desktop 32–36 -------------------------------- */
.d-3{font-size:calc(1.8182vw + 22.18px);line-height:1.02;}
@media (min-width:431px){ .d-3{font-size:calc(.2976vw + 28.72px);} }
@media (min-width:768px){ .d-3{font-size:calc(.3922vw + 27.99px);} }
@media (min-width:1024px){ .d-3{font-size:calc(.7843vw + 23.97px);line-height:1;} }
@media (min-width:1280px){ .d-3{font-size:calc(.9434vw + 21.92px);} }
@media (min-width:1440px){ .d-3{font-size:36px;line-height:1;} }

/* ---- H4 ---- sits below H3 so the cascade stays readable ----------------- */
.d-4{font-size:clamp(22px,calc(.9vw + 15px),28px);line-height:1.06;}

/* ---- BODY ---- mobile 16 · desktop 16–18 --------------------------------
   Body copy holds 16–17; the lede runs 17–18 so the top of the range is
   spent on hierarchy rather than flattening lede and body together. */
body{font-size:clamp(16px,calc(.22vw + 13.8px),17px);line-height:1.6;}
.lede{font-size:clamp(17px,calc(.28vw + 14.4px),18px);line-height:1.5;}
.prose{font-size:clamp(16px,calc(.22vw + 13.8px),17px);line-height:1.7;}
.body-lg{font-size:clamp(17px,calc(.28vw + 14.4px),18px);}
.body-sm{font-size:16px;line-height:1.6;}
.rev__q{font-size:clamp(17px,calc(.28vw + 14.4px),18px);line-height:1.45;}
.faq__in{font-size:clamp(16px,calc(.22vw + 13.8px),17px);line-height:1.65;}

/* ---- BUTTONS ---- 16px at every breakpoint ------------------------------
   Tracking eased from .09em to .05em and padding rebalanced so the larger
   size doesn't crowd the label or grow the control. */
.btn,.btn--lg,.btn--sm{font-size:16px;letter-spacing:.05em;}
.btn{--bh:54px;padding-inline:28px;}
.btn--lg{--bh:60px;padding-inline:32px;}
.btn--sm{--bh:46px;padding-inline:20px;letter-spacing:.04em;}
@media (max-width:430px){
  /* size stays 16px; the chrome around the label gives back the room */
  .btn,.btn--lg,.btn--sm{font-size:16px;letter-spacing:.02em;}
  .btn{padding-inline:14px;gap:8px;}
  .btn--lg{padding-inline:16px;}
  .btn__ico{width:22px;height:22px;}
  .btn__ico svg{width:10px;height:10px;}
}

/* ---- Supporting rhythm --------------------------------------------------
   Tighter tracking on the big display sizes, and a touch more air under
   headings so the larger body text doesn't sit too close. */
.phero h1{letter-spacing:-.004em;}
.sec-head h2,.sec-head .d-2{letter-spacing:-.002em;}
.prose h2{line-height:1.02;}
.prose h3{line-height:1.06;}
.prose>*+*{margin-top:24px;}
.faq__btn{font-size:clamp(20px,calc(.55vw + 15.8px),25px);line-height:1.12;}
.opt h3{line-height:.95;}
.gcard h3,.fnode h3,.titem h3,.rrow__t{line-height:1.02;}


/* ---- 34b. Fit corrections for the larger type at narrow widths ----------- */
/* long display words can't be allowed to push the page wider than the viewport */
.d-hero,.d-1,.d-2,.d-3,.d-4,.faq__btn,.opt h3,.rrow__t,.gcard h3{overflow-wrap:break-word;}

/* at phone widths a wide 16px label wraps centred rather than overflowing */
@media (max-width:430px){
  .btn{white-space:normal;text-align:center;line-height:1.25;padding-block:13px;}
  .opt .btn,.opt__ft .btn,.acard .btn{width:100%;}
}
/* 375px: the longest labels need the last couple of pixels back */
@media (max-width:389px){
  .btn,.btn--lg,.btn--sm{letter-spacing:.005em;}
  .btn{padding-inline:12px;}
}

/* ==========================================================================
   35. RETAIL HEADER + HERO + FIND MY BATTERY DOCK
   Supersedes the old §9 header/nav, §11 hero and §25 search blocks.
   Structure: utility band → header (logo · search · Find my battery · call)
   → category nav → split hero → finder dock straddling the hero edge.
   Type rule for this zone: PP Formula Condensed Bold 700 is for headings
   only. Every piece of UI (nav, search, buttons, labels, controls, support
   copy) is set in Neue Helvetica 400/500. No 700 is requested from Helvetica,
   so nothing is ever faux-bolded.
   ========================================================================== */
:root{
  --band-h:40px;
  --hdr-main:84px;
  --hdr-nav:50px;
  --header-h:118px;      /* stuck header height, used for anchor offsets */
  --dock-lift:96px;      /* how far the finder dock rises into the hero */
  --split:.52;           /* hero copy / image split, as a share of the container */
}

/* ---- UI type across the zone ------------------------------------------ */
.skip,.band,.hdr,.drawer,.mobar,.hero{font-family:var(--body);}
.skip{font-weight:500;letter-spacing:.04em;}
.hdr .btn,.drawer .btn,.hero .btn,.mobar a{font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.045em;}
.qf .confirm,.band .chip{font-family:var(--body);font-weight:500;}

/* ---- Utility band ------------------------------------------------------ */
.band{background:var(--ink);color:var(--n300);font-size:13px;position:relative;z-index:71;}
.band__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--band-h);}
.band__l,.band__r{display:flex;align-items:center;min-width:0;}
.band__l{gap:18px;flex:1 1 auto;}
.band__r{flex:none;}
.bl-sm{display:none;}
.band__msg{min-width:0;color:var(--n400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.band__link{display:inline-flex;align-items:center;gap:8px;min-height:var(--band-h);padding-inline:16px;
  color:var(--n200);text-decoration:none;white-space:nowrap;position:relative;transition:color 160ms ease;}
.band__link:last-child{padding-right:0;}
.band__link+.band__link::before{content:"";position:absolute;left:0;top:50%;height:14px;width:1px;transform:translateY(-50%);background:rgba(255,255,255,.16);}
.band__link svg{width:14px;height:14px;flex:none;}
.band__link--road svg{color:var(--r500);}
.band__link:hover{color:#fff;}
.band .chip{flex:none;white-space:nowrap;font-size:12px;letter-spacing:.01em;text-transform:none;padding:5px 11px;background:rgba(255,255,255,.08);color:var(--n100);}

/* ---- Header shell ------------------------------------------------------ */
.hdr{position:sticky;top:0;z-index:70;background:#fff;border-bottom:1px solid var(--rule);transition:box-shadow 260ms ease;}
.hdr.is-stuck{box-shadow:0 14px 34px -26px rgba(14,14,17,.55);}
.hdr__main{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"brand search find tools";
  align-items:center;column-gap:clamp(16px,2.2vw,32px);min-height:var(--hdr-main);transition:min-height 320ms var(--ease-out);}
.hdr.is-stuck .hdr__main{min-height:68px;}
.brand{grid-area:brand;display:flex;align-items:center;text-decoration:none;flex:none;}
.brand img{height:60px;width:auto;max-width:none;transition:height 320ms var(--ease-out);}
.hdr.is-stuck .brand img{height:46px;}
.brand__txt{display:none;}

/* ---- Search (combobox) ------------------------------------------------- */
.hsearch{grid-area:search;position:relative;width:100%;max-width:720px;justify-self:center;}
.hsearch__field{display:flex;align-items:center;height:52px;border:1.5px solid var(--n300);border-radius:6px;background:var(--n50);overflow:hidden;
  transition:border-color 160ms ease,background-color 160ms ease,box-shadow 160ms ease;}
.hsearch__field:hover{border-color:var(--n400);}
.hsearch__field:focus-within{border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px rgba(14,14,17,.08);}
.hsearch__ico{width:18px;height:18px;margin-left:16px;color:var(--n500);flex:none;}
.hsearch input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:0 12px;
  font:400 16px/1.2 var(--body);color:var(--ink);-webkit-appearance:none;appearance:none;}
.hsearch input:focus-visible{outline:none;} /* the field itself carries the focus ring */
.hsearch input::placeholder{color:var(--n500);opacity:1;}
.hsearch input::-webkit-search-cancel-button,.hsearch input::-webkit-search-decoration{-webkit-appearance:none;display:none;}
.hsearch__clear{width:36px;height:36px;margin-right:6px;border:0;border-radius:99px;background:transparent;color:var(--n500);
  display:grid;place-items:center;cursor:pointer;flex:none;transition:background-color 160ms ease,color 160ms ease;}
.hsearch__clear[hidden]{display:none;}
.hsearch__clear:hover{background:var(--n100);color:var(--ink);}
.hsearch__clear svg{width:12px;height:12px;}
.hsearch__go{align-self:stretch;display:inline-flex;align-items:center;gap:9px;padding:0 20px;border:0;background:var(--ink);color:#fff;cursor:pointer;
  font:500 14px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;transition:background-color 160ms ease;}
.hsearch__go:hover{background:var(--n800);}
.hsearch__go:focus-visible{outline:3px solid var(--red);outline-offset:-3px;border-radius:0;}
.hsearch__go svg{width:16px;height:16px;}

.hsearch__panel{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:90;background:#fff;border:1px solid var(--rule);border-radius:8px;
  box-shadow:0 30px 64px -30px rgba(14,14,17,.5);padding:8px;max-height:min(66vh,540px);overflow-y:auto;overscroll-behavior:contain;
  transform-origin:top center;animation:hs-in 180ms var(--ease-out);}
.hsearch__panel[hidden]{display:none;}
@keyframes hs-in{from{opacity:0;transform:translateY(-4px) scale(.99);}}
.hsearch__h{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--n500);padding:10px 12px 8px;}
.hsearch__list{display:grid;gap:1px;}
.hsearch__list[hidden]{display:none;}
.hsearch__opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:10px 12px 10px 14px;
  border-radius:4px;color:var(--ink);font-size:15px;line-height:1.3;cursor:pointer;}
.hsearch__opt[aria-selected="true"]{background:var(--n100);}
.hsearch__opt[aria-selected="true"]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--red);}
.hsearch__opt mark{background:transparent;color:inherit;font-weight:500;text-decoration:underline;text-decoration-color:var(--red);
  text-decoration-thickness:2px;text-underline-offset:3px;}
.hsearch__tag{flex:none;font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--n600);}
.hsearch__empty{padding:6px 12px 12px;font-size:15px;line-height:1.5;color:var(--ink-3);}
.hsearch__empty[hidden]{display:none;}
.hsearch__ft{margin-top:6px;padding:12px 12px 6px;border-top:1px solid var(--rule);font-size:13.5px;line-height:1.5;color:var(--n600);}
.hsearch__ft a{color:var(--ink);font-weight:500;text-underline-offset:3px;}
.hsearch__ft a:hover{color:var(--r700);}

/* ---- Find my battery + battery help ------------------------------------ */
.hdr__find{grid-area:find;--bh:52px;padding-inline:22px;gap:10px;font-size:14.5px;}
.hdr__find svg{width:19px;height:19px;flex:none;}
.hdr__find-s{display:none;}
.hdr__tools{grid-area:tools;display:flex;align-items:center;gap:10px;}
.hdr__help{display:flex;align-items:center;gap:12px;min-height:48px;text-decoration:none;color:var(--ink);}
.hdr__help-ico{width:46px;height:46px;border-radius:99px;border:1.5px solid var(--n300);color:var(--red);display:grid;place-items:center;flex:none;
  transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease,transform 220ms var(--ease-out);}
.hdr__help-ico svg{width:18px;height:18px;}
.hdr__help:hover .hdr__help-ico{background:var(--red);border-color:var(--red);color:#fff;}
.hdr__help:active .hdr__help-ico{transform:scale(.94);}
.hdr__help-txt{display:flex;flex-direction:column;gap:4px;line-height:1.1;}
.hdr__help-lbl{font-size:12.5px;color:var(--n500);white-space:nowrap;}
.hdr__help-num{font-size:18px;font-weight:500;letter-spacing:.01em;white-space:nowrap;transition:color 160ms ease;}
.hdr__help:hover .hdr__help-num{color:var(--r700);}

/* ---- Category nav row -------------------------------------------------- */
.hdr__nav{border-top:1px solid var(--rule);background:#fff;}
.hdr__nav-in{display:flex;align-items:stretch;justify-content:space-between;gap:24px;min-height:var(--hdr-nav);}
.nav{display:flex;align-items:stretch;margin-left:-14px;}
.nav__list{display:flex;align-items:stretch;}
.nav__item{position:relative;display:flex;}
.nav__link{position:relative;display:inline-flex;align-items:center;gap:7px;padding:0 14px;min-height:var(--hdr-nav);text-decoration:none;
  font-size:15px;font-weight:500;line-height:1;color:var(--ink-2);white-space:nowrap;transition:color 160ms ease;}
.nav__link::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;background:var(--red);
  transform:scaleX(0);transform-origin:left center;transition:transform 260ms var(--ease-out);}
.nav__link:hover,.nav__item.is-open>.nav__link,.nav__link[aria-current="page"]{color:var(--ink);}
.nav__link:hover::after,.nav__link:focus-visible::after,.nav__item.is-open>.nav__link::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);}
.nav__link:focus-visible{outline-offset:-3px;}
.nav__caret{display:inline-flex;color:var(--n500);transition:transform 220ms var(--ease-out);}
.nav__caret svg{width:9px;height:9px;}
.nav__item.is-open .nav__caret{transform:rotate(180deg);}
.hdr__promise{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-3);white-space:nowrap;}
.hdr__promise svg{width:15px;height:15px;color:var(--red);flex:none;}

/* mega panels drop from the nav row */
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px) scale(.985);transform-origin:top center;
  background:#fff;border:1px solid var(--rule);border-radius:0 0 8px 8px;box-shadow:0 30px 60px -32px rgba(14,14,17,.45);
  padding:24px;width:max-content;max-width:min(92vw,760px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 180ms ease,transform 220ms var(--ease-out),visibility 0s linear 220ms;z-index:80;}
.nav__item.is-open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1);transition-delay:0s;}
.mega__grid{display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));gap:22px 36px;}
.mega__h{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--n500);margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--rule);}
.mega__list li+li{margin-top:1px;}
.mega__a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px;padding:9px 10px;margin-inline:-10px;border-radius:4px;
  text-decoration:none;font-size:15px;color:var(--ink-2);transition:background-color 160ms ease,color 160ms ease;}
.mega__a:hover{background:var(--n100);color:var(--ink);}
.mega__a span{font-size:12.5px;color:var(--n600);}
.mega__cta{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;}
.mega .btn--sm{font-size:13.5px;}

/* scroll "charge level" */
.charge{position:absolute;left:0;bottom:-1px;height:2px;background:var(--red);width:0;z-index:3;box-shadow:0 0 12px rgba(238,28,37,.6);}

/* burger */
.burger{display:none;width:46px;height:46px;border:1.5px solid var(--n300);border-radius:6px;background:#fff;align-items:center;justify-content:center;
  cursor:pointer;flex:none;transition:transform 140ms var(--ease-out),border-color 180ms ease;}
.burger:hover{border-color:var(--ink);}
.burger:active{transform:scale(.95);}
.burger__b{display:block;width:19px;height:2px;background:var(--ink);position:relative;transition:background-color 180ms ease;}
.burger__b::before,.burger__b::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--ink);
  transition:transform 300ms var(--ease-drawer),top 220ms var(--ease-out);}
.burger__b::before{top:-6px;}
.burger__b::after{top:6px;}
.burger[aria-expanded="true"] .burger__b{background:transparent;}
.burger[aria-expanded="true"] .burger__b::before{top:0;transform:rotate(45deg);}
.burger[aria-expanded="true"] .burger__b::after{top:0;transform:rotate(-45deg);}

/* ---- Mobile drawer ----------------------------------------------------- */
.drawer{position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none;}
.drawer__scrim{position:absolute;inset:0;background:rgba(14,14,17,.55);opacity:0;transition:opacity 280ms ease;backdrop-filter:blur(3px);}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--paper);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform 380ms var(--ease-drawer);box-shadow:-30px 0 60px -30px rgba(0,0,0,.5);}
.drawer.is-open{visibility:visible;pointer-events:auto;}
.drawer.is-open .drawer__scrim{opacity:1;}
.drawer.is-open .drawer__panel{transform:translateX(0);}
.drawer__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px var(--gut);border-bottom:1px solid var(--rule);}
.drawer__top .brand img{height:44px;width:auto;}
.drawer__body{flex:1;overflow-y:auto;padding:4px var(--gut) 28px;-webkit-overflow-scrolling:touch;}
.drawer__cta{padding:16px var(--gut) calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);display:grid;gap:10px;background:var(--n50);}
.drawer__cta .btn{font-size:15px;}
.dgrp{border-bottom:1px solid var(--rule);}
.dgrp__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:0;background:none;border:0;cursor:pointer;
  font:500 18px/1.2 var(--body);text-align:left;color:var(--ink);}
.dgrp__btn svg{width:13px;height:13px;color:var(--red);transition:transform 260ms var(--ease-out);flex:none;}
.dgrp__btn[aria-expanded="true"] svg{transform:rotate(45deg);}
.dgrp__panel{overflow:hidden;height:0;transition:height 320ms var(--ease-drawer);}
.dgrp__inner{padding-bottom:16px;display:grid;gap:2px;}
.dgrp__inner a{display:flex;align-items:center;min-height:44px;padding:0 0 0 18px;border-left:2px solid var(--rule);text-decoration:none;font-size:16px;color:var(--ink-3);
  transition:border-color 180ms ease,color 180ms ease,padding-left 180ms var(--ease-out);}
.dgrp__inner a:hover{border-color:var(--red);color:var(--ink);padding-left:23px;}
.dlink{display:flex;align-items:center;min-height:58px;border-bottom:1px solid var(--rule);text-decoration:none;font:500 18px/1.2 var(--body);color:var(--ink);}
.dlink:hover{color:var(--r700);}
.drawer__body .dgrp,.drawer__body .dlink{opacity:0;transform:translateY(14px);transition:opacity 320ms ease,transform 380ms var(--ease-out);}
.drawer.is-open .drawer__body .dgrp,.drawer.is-open .drawer__body .dlink{opacity:1;transform:none;}

/* ---- Mobile quick-action bar ------------------------------------------ */
.mobar{position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;gap:1px;background:var(--n800);padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(102%);transition:transform 360ms var(--ease-drawer);}
.mobar.is-in{transform:translateY(0);}
.mobar a{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;min-height:58px;text-decoration:none;font-size:15px;letter-spacing:.04em;
  background:var(--ink);color:#fff;}
.mobar a.is-primary{background:var(--red);}
.mobar a:active{filter:brightness(.9);}
.mobar svg{width:15px;height:15px;}
@media (max-width:820px){ .mobar{display:flex;} }

/* ---- Header responsive ------------------------------------------------- */
@media (max-width:1340px){ .hdr__promise{display:none;} .nav__link{padding-inline:12px;} .nav__link::after{left:12px;right:12px;} .nav{margin-left:-12px;} }
@media (max-width:1100px){ .band__link--hours{display:none;} }
@media (max-width:1180px){
  :root{--hdr-main:76px;--header-h:66px;}
  .hdr__nav{display:none;}
  .hsearch__go{padding:0 16px;}
  .hsearch__go span{display:none;}
  .hero .btn--lg{padding-inline:24px;}
  .burger{display:inline-flex;}
  .hdr.is-stuck .hdr__main{min-height:64px;}
  .brand img{height:52px;}
  .hdr.is-stuck .brand img{height:42px;}
  .hdr__help-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}
@media (max-width:900px){
  .band__msg{display:none;}
  :root{--header-h:118px;}
  .hdr__main{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand tools" "search find";
    column-gap:8px;row-gap:10px;padding-block:8px 12px;min-height:0;}
  .hdr.is-stuck .hdr__main{min-height:0;padding-block:6px 10px;}
  .brand img{height:44px;}
  .hdr.is-stuck .brand img{height:38px;}
  .hsearch{position:static;max-width:none;}
  .hsearch__field{height:48px;}
  .hsearch__go{display:none;}
  .hsearch__ico{margin-left:14px;}
  .hsearch input{padding:0 8px 0 10px;}
  .hsearch__panel{left:var(--gut);right:var(--gut);top:calc(100% - 4px);max-height:62vh;}
  .hdr__find{--bh:48px;padding-inline:18px;gap:8px;font-size:13.5px;letter-spacing:.03em;}
  .hdr__find svg{width:17px;height:17px;}
  .hdr__tools{gap:8px;}
}
@media (max-width:560px){
  .hdr__find{padding-inline:14px;}
  .hdr__find-l{display:none;}
  .hdr__find-s{display:inline;}
}
@media (max-width:430px){ .hdr__find svg{display:none;} }
@media (max-width:700px){ .band__link--road{display:none;} .band__in{gap:12px;} }
@media (max-width:400px){ .bl-lg{display:none;} .bl-sm{display:inline;} }
@media (max-width:360px){ .hdr__find{padding-inline:12px;letter-spacing:.02em;} }
@media (pointer:coarse){ .band__link{min-height:44px;} .hsearch__clear{width:44px;height:44px;margin-right:2px;} }

.nw{white-space:nowrap;}

/* ==========================================================================
   36. HOMEPAGE REFINEMENT PASS
   Findings from the audit (typography, hierarchy, contrast, motion, copy),
   fixed as one system rather than one-off patches.

   TYPE RULE, whole page: PP Formula Condensed Bold 700 is for headings only.
   Every piece of UI and supporting text (nav, buttons, labels, chips, form
   controls, data, quotes) is Neue Helvetica 400/500. The Semi Extended and
   Semi Condensed faces are retired, so the two old tokens now point at the
   body face and every rule that used them follows automatically.

   COLOUR RULE: #EE1C25 stays the brand red for CTAs, marks, rules and icons.
   Small red TEXT uses --red-ink (r700, 5.9:1 on white) on light surfaces and
   --red-ink-dark (r400) on dark ones. Red SURFACES carrying copy (hero panel,
   stamp) use r700 so white text on them passes AA.

   RADIUS RULE: 2px tags · 4px buttons, cards, inputs · 6px segmented track
   and number plate · 8px floating panels · full circles for icon buttons.
   ========================================================================== */
:root{
  --signage:var(--body);
  --sub:var(--body);
  --red-ink:var(--r700);
  --red-ink-dark:var(--r400);
}
/* Helvetica ships 400 + 500 only: never let the browser fake a bold */
html{font-synthesis:none;}

/* ---- labels, chips, eyebrows: re-set for Helvetica's narrower caps ------ */
.eyebrow{font-weight:500;font-size:12px;letter-spacing:.16em;}
.chip{font-weight:500;font-size:11.5px;letter-spacing:.07em;padding:6px 10px;}
.chip--red{background:var(--r700);}
.confirm{font-weight:500;font-size:11px;letter-spacing:.07em;}
.confirm--block{font-size:12px;letter-spacing:.04em;}
.route__h span,.hours-card h3,.loc__blk h3,.ft h3,.mega__h,.fcard__hd b{font-weight:500;font-size:12px;letter-spacing:.12em;}
.note b{font-weight:500;font-size:12px;letter-spacing:.08em;}
.gcard__cat{font-weight:500;font-size:12px;letter-spacing:.1em;color:var(--red-ink);}
.gcard__ft{font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--n600);}
.vlist b{font-weight:500;font-size:12px;letter-spacing:.1em;color:var(--red-ink);}
.field__l,.spec__k,.fstep__t{font-weight:500;letter-spacing:.1em;}
.ftab{font-weight:500;letter-spacing:.06em;}
.caption{font-size:13px;letter-spacing:0;}
.pullquote{font-weight:500;font-size:clamp(19px,1.8vw,23px);line-height:1.4;letter-spacing:-.005em;}
.btn{font-weight:500;}

/* ---- data and controls leave the display face -------------------------- */
.rrow__t{font-family:var(--body);font-weight:500;font-size:17px;line-height:1.3;text-transform:none;letter-spacing:0;}
.hours li b{font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:0;}
.hours li.is-shut b{color:var(--n400);}
.hours--light li.is-shut b{color:var(--n500);}
.hero__phone .num{font-family:var(--body);font-weight:500;font-size:20px;letter-spacing:.01em;}
.vs__div span{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.12em;color:var(--n500);}
.spec__v,.clevel__pct,.fstep__n,.rev__av,.rsum__n,.fout__veh b{font-family:var(--body);font-weight:500;}
.field--rego input{font-family:var(--body);font-weight:500;letter-spacing:.14em;}
.faq__btn{font-family:var(--body);font-weight:500;font-size:clamp(17px,calc(.4vw + 12.6px),19px);line-height:1.4;text-transform:none;letter-spacing:0;padding:22px 0;}
.faq__ico{margin-top:0;}
.stamp{background:var(--r700);box-shadow:0 22px 44px -22px rgba(200,13,21,.7);}
.stamp span{font-size:10px;letter-spacing:.14em;}
.stamp span,.hero__phone .lbl{font-weight:500;}
.hero__phone{gap:12px;align-items:center;}
.hero__phone > span:first-child{display:inline-grid;place-items:center;flex:none;}
.hero__phone > span:first-child svg{width:18px;height:18px;}
.loc__addr{font-family:var(--body);font-weight:500;font-size:clamp(20px,1.8vw,24px);line-height:1.25;text-transform:none;letter-spacing:-.005em;}
.loc__fallback b{font-family:var(--body);font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1.3;text-transform:none;}

/* ---- section heads: one message, stacked (no split header) -------------- */
.sec-head{grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;}
.sec-head__aside{padding-bottom:0;max-width:60ch;}
.sec-head__aside:empty{display:none;}
.sec-head .lede{max-width:60ch;}
.sec-head .eyebrow--line{max-width:560px;}

/* ---- range: category rows read as a list, not a numbered index --------- */
.rrow{gap:14px;padding:17px 4px;}
.rrow:hover{padding-left:4px;}
.rrow__t{transition:transform 220ms var(--ease-out),color 160ms ease;}
.rrow__d{color:var(--n500);}
.range__foot{margin-top:clamp(32px,4vw,52px);display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;}

/* ---- trust strip: numbering removed, the six items are not a sequence -- */
.titem{gap:0;}

/* ---- finder band: a process, not a second form -------------------------- */
.finder__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,6vw,96px);}
.finder__copy .lede{color:var(--n300);max-width:44ch;margin-top:18px;}
.finder__acts{margin-top:30px;}
.fproc{border-top:1px solid rgba(255,255,255,.14);}
.fproc li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;align-items:start;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.14);}
.fproc__n{width:40px;height:40px;border-radius:99px;border:1.5px solid var(--r500);display:grid;place-items:center;font:500 15px/1 var(--body);color:#fff;}
.fproc h3{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.3vw,30px);line-height:1;text-transform:uppercase;color:#fff;margin:2px 0 8px;}
.fproc p{font-size:15.5px;line-height:1.5;color:var(--n400);}
@media (max-width:900px){ .finder__in{grid-template-columns:1fr;} }

/* ---- reviews: one composed empty state instead of three fake cards ----- */
.rvw{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:start;
  padding:clamp(24px,3vw,40px);border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);}
.rvw__lead .body-sm{max-width:52ch;margin-top:12px;}
.rvw__lead .btn-row{margin-top:24px;}
.rvw__flag{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;font-size:14px;color:var(--ink-3);}
.rvw__slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.rskel{display:flex;flex-direction:column;gap:9px;padding:18px;border:1px dashed var(--rule-strong);border-radius:var(--radius);background:var(--n50);min-height:184px;}
.rskel span,.rskel i,.rskel b{display:block;background:var(--n200);border-radius:2px;}
.rskel__stars{width:78px;height:10px;margin-bottom:6px;}
.rskel__l{height:9px;width:100%;}
.rskel__l--s{width:62%;}
.rskel__by{display:flex!important;align-items:center;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);background:transparent!important;}
.rskel__by i{width:28px;height:28px;border-radius:99px;flex:none;}
.rskel__by b{width:90px;height:9px;}
@media (max-width:1000px){ .rvw{grid-template-columns:1fr;} }
@media (max-width:620px){ .rvw__slots{grid-template-columns:1fr;} .rskel{min-height:0;} .rskel:nth-child(n+2){display:none;} }

/* ---- final CTA + footer contrast --------------------------------------- */
.fcta .lede{color:var(--n300);}
.fcta__meta{margin-top:26px;font-size:13.5px;color:var(--n400);}
.ft__brand p,.ft__bot{color:var(--n400);}

/* ---- hero: remove the overlay caption, the eyebrow rule is drawn -------- */
.hero__dash{display:inline-block;width:18px;height:1px;background:var(--n500);}

/* ---- radius system ------------------------------------------------------ */
.hsearch__field,.burger{border-radius:var(--radius);}

/* ---- motion: transform/opacity only, hover gated to real pointers ------- */
[data-rv]{transform:translateY(16px);transition:opacity 600ms var(--ease-settle),transform 700ms var(--ease-settle);}
[data-rv="scale"]{transform:scale(.97) translateY(14px);}
[data-rv="wipe"]{transform:none;}
.rv-stagger>*{transform:translateY(16px);transition:opacity 560ms var(--ease-settle),transform 660ms var(--ease-settle);}
.rv-stagger.rv-in>*:nth-child(2){transition-delay:70ms;}
.rv-stagger.rv-in>*:nth-child(3){transition-delay:140ms;}
.faq__p{transition:height 280ms var(--ease-drawer);}
.opt{transition:border-color 220ms ease,transform 260ms var(--ease-out),box-shadow 260ms var(--ease-out);}
.dgrp__inner a,.dgrp__inner a:hover{padding-left:18px;}
.acard__list a,.acard__list a:hover{padding-left:0;}
.tlink:hover{gap:9px;}
.tlink svg{transition:transform 220ms var(--ease-out);}
.btn:hover .btn__ico{transform:none;}
.opt:hover,.rev:hover,.pcard:hover{transform:none;}
@media (hover:hover) and (pointer:fine){
  .btn:hover .btn__ico{transform:translate(2px,-1px) scale(1.06);}
  .rrow:hover .rrow__t{transform:translateX(6px);}
  .tlink:hover svg{transform:translateX(3px);}
  .opt:hover{transform:translateY(-3px);}
  .pcard:hover{transform:translateY(-3px);}
}

/* scroll-linked details run on the compositor, no scroll listeners */
.charge{width:100%;transform:scaleX(0);transform-origin:left center;}
@supports (animation-timeline: scroll()){
  .charge{animation:charge-fill linear both;animation-timeline:scroll(root block);}
  @keyframes charge-fill{to{transform:scaleX(1);}}
  @media (min-width:1024px) and (prefers-reduced-motion:no-preference){
    .hero__img-in{animation:hero-drift linear both;animation-timeline:scroll(root block);animation-range:0px 900px;}
    @keyframes hero-drift{to{transform:translate3d(0,64px,0);}}
  }
}
@supports not (animation-timeline: scroll()){ .charge{display:none;} }
@media (prefers-reduced-motion:reduce){
  [data-rv],[data-rv="scale"],.rv-stagger>*{transform:none!important;}
}

/* ==========================================================================
   37. V4 — HOMEPAGE UX, CONVERSION & RESPONSIVE UPDATE
   One finder system (hero card ⇄ drawer/sheet), hero rebuilt around it,
   trust strip, two-pathway range, pricing band, contained roadside card.
   These patterns are the design system for every inner page (see HANDOFF).

   Hero headline, per spec: 1440:76 · 1280:72 · 1024:64 · 768:58 · 430:52 ·
   390:50 · 375:48 · 320:44, interpolated linearly between anchors.
   ========================================================================== */
:root{
  --qf-w:clamp(372px,31vw,432px);          /* hero finder card width */
  --qf-bleed:clamp(40px,5vw,80px);         /* photo visible left of the card */
  --hero-gap:calc(var(--qf-bleed) + clamp(32px,3vw,48px));
  --ease-exit:cubic-bezier(.4,0,1,1);
}
.hero,.qf,.qfd,.qf-launch,.trust,.paths,.pricing,.rsd{font-family:var(--body);}
.qf .btn,.qfd .btn,.paths .btn,.pricing .btn,.rsd .btn,.fcta .btn{font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.045em;}

/* ---- HERO --------------------------------------------------------------- */
.hero{position:relative;background:var(--n950);color:#fff;isolation:isolate;overflow:hidden;}
.hero__media{position:absolute;z-index:0;top:0;bottom:0;right:0;
  left:calc(max(0px,(100% - var(--max)) / 2) + min(100%,var(--max)) - var(--gut) - var(--qf-w) - var(--qf-bleed));}
.hero__img{position:absolute;inset:0;margin:0;overflow:hidden;background:var(--n900);}
.hero__img-in{position:absolute;inset:-8% 0;will-change:transform;}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:30% 46%;filter:saturate(.94) contrast(1.05) brightness(.9);}
.hero__img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--n950) 0%,rgba(14,14,17,.5) 12%,rgba(14,14,17,0) 40%),
             linear-gradient(180deg,rgba(14,14,17,.35) 0%,transparent 26%,transparent 64%,rgba(14,14,17,.62) 100%);}

.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) var(--qf-w);column-gap:var(--hero-gap);
  align-items:center;padding-block:clamp(36px,3.6vw,56px);}
.hero__copy{min-width:0;max-width:780px;}

.hero__eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:12.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--n300);margin-bottom:clamp(16px,1.8vw,24px);}
.hero__tick{width:28px;height:3px;background:var(--red);flex:none;}

.hero__h{line-height:.9;letter-spacing:-.004em;margin-bottom:clamp(16px,1.8vw,24px);}
.hero__h .ln{display:block;overflow:hidden;padding-top:.1em;margin-top:-.1em;padding-bottom:.06em;margin-bottom:-.06em;}
.hero__h .ln>span{display:block;}
.hero__h em{font-style:normal;color:var(--red);}
.hero__h{font-size:calc(7.2727vw + 20.73px);}
@media (min-width:376px){ .hero__h{font-size:calc(13.3333vw - 2px);} }
@media (min-width:391px){ .hero__h{font-size:calc(5vw + 30.5px);} }
@media (min-width:431px){ .hero__h{font-size:calc(1.7751vw + 44.37px);} }
@media (min-width:768px){ .hero__h{font-size:calc(2.3438vw + 40px);line-height:.89;} }
@media (min-width:1024px){ .hero__h{font-size:calc(3.125vw + 32px);line-height:.88;} }
@media (min-width:1280px){ .hero__h{font-size:calc(2.5vw + 40px);} }
@media (min-width:1440px){ .hero__h{font-size:76px;} }

.hero__lede{font-size:clamp(17px,calc(.28vw + 14.4px),19px);line-height:1.55;color:var(--n300);max-width:54ch;margin-bottom:clamp(22px,2.4vw,32px);text-wrap:pretty;}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;}
.hero__acts .btn{font-size:16px;}
.hero__contact{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;margin-top:20px;}
.hero__call{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:#fff;}
.hero__call-ico{width:40px;height:40px;border-radius:99px;display:grid;place-items:center;flex:none;color:var(--r400);
  background:rgba(238,28,37,.14);border:1px solid rgba(238,28,37,.5);transition:background-color 200ms ease,color 200ms ease,transform 260ms var(--ease-out);}
.hero__call-ico svg{width:16px;height:16px;}
.hero__call-txt{display:flex;flex-direction:column;gap:4px;line-height:1.15;}
.hero__call .num{font-size:15px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;transition:color 200ms ease;}
.hero__call .lbl{font-size:13px;color:var(--n400);}
.hero__text{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:15px;color:var(--n200);
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:4px;transition:color 160ms ease,text-decoration-color 160ms ease;}
.hero__text svg{width:16px;height:16px;color:var(--r400);flex:none;}
@media (hover:hover) and (pointer:fine){
  .hero__call:hover .hero__call-ico{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.06);}
  .hero__call:hover .num{color:var(--r300);}
  .hero__text:hover{color:#fff;text-decoration-color:#fff;}
}

/* ---- QUICK-FIND CARD ----------------------------------------------------- */
.hero__find{position:relative;min-width:0;}
.qf{position:relative;background:#fff;color:var(--ink);border-radius:8px;border:1px solid rgba(14,14,17,.08);
  padding:24px 24px 14px;box-shadow:0 1px 0 rgba(14,14,17,.04),0 44px 80px -40px rgba(0,0,0,.8);transition:box-shadow 400ms ease;}
.qf.is-called{box-shadow:0 0 0 4px rgba(238,28,37,.4),0 44px 80px -40px rgba(0,0,0,.8);}
.qf .plate__terminals{top:-11px;left:36px;right:36px;}
.qf__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.qf__title{font-family:var(--display);font-weight:700;font-size:clamp(28px,2.2vw,32px);line-height:.95;text-transform:uppercase;color:var(--ink);}
/* the battery "charge" fills as the vehicle is described (decorative: the hint carries the meaning) */
.qf__meter{position:relative;display:flex;gap:3px;padding:3px;border:1.5px solid var(--n300);border-radius:3px;flex:none;}
.qf__meter::after{content:"";position:absolute;right:-5px;top:50%;width:3px;height:8px;transform:translateY(-50%);background:var(--n300);border-radius:0 2px 2px 0;}
.qf__meter i{width:9px;height:12px;border-radius:1px;background:var(--n100);transition:background-color 280ms var(--ease-out);}
.qf__meter i.on{background:var(--red);}
.qf__meter i:nth-child(2).on{transition-delay:40ms;}
.qf__meter i:nth-child(3).on{transition-delay:80ms;}
.qf__meter i:nth-child(4).on{transition-delay:120ms;}

.qf__types{border:0;margin:0 0 16px;padding:0;min-width:0;}
.qf__legend{padding:0;margin-bottom:9px;font-size:13.5px;line-height:1.3;font-weight:500;color:var(--ink-3);}
.qf__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.qf-tile{position:relative;display:block;cursor:pointer;min-width:0;}
.qf-tile input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1;}
.qf-tile__in{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;height:100%;min-height:82px;padding:12px 10px 11px;
  border:1.5px solid var(--n300);border-radius:4px;background:#fff;font-size:13.5px;font-weight:500;line-height:1.2;color:var(--ink-2);
  transition:border-color 160ms ease,background-color 160ms ease,box-shadow 160ms ease;}
.qf-tile__in>span{text-wrap:balance;}
.qf-tile__in svg{width:26px;height:26px;color:var(--n600);flex:none;transition:color 160ms ease;}
.qf-tile__in::after{content:"";position:absolute;top:9px;right:9px;width:14px;height:14px;border-radius:99px;border:1.5px solid var(--n300);background:#fff;
  transition:border-color 160ms ease,box-shadow 160ms ease;}
.qf-tile input:checked+.qf-tile__in{border-color:var(--ink);background:var(--n50);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink);}
.qf-tile input:checked+.qf-tile__in svg{color:var(--r700);}
.qf-tile input:checked+.qf-tile__in::after{border-color:var(--r700);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px var(--r700);}
.qf-tile input:focus-visible+.qf-tile__in{outline:3px solid var(--red);outline-offset:2px;}
@media (hover:hover) and (pointer:fine){ .qf-tile:hover input:not(:checked)+.qf-tile__in{border-color:var(--n500);} }

.qf__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;margin-bottom:16px;}
.qf__fields[hidden]{display:none;}
.qf-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.qf-field--full{grid-column:1 / -1;}
.qf-field label{font-size:13px;line-height:16px;font-weight:500;color:var(--ink-3);}
.qf-field label span{font-weight:400;color:var(--n600);}
.qf-field select,.qf-field input{width:100%;height:48px;padding:0 36px 0 12px;border:1.5px solid var(--n300);border-radius:4px;background-color:#fff;color:var(--ink);
  font:400 16px/1.2 var(--body);appearance:none;-webkit-appearance:none;transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease;}
.qf-field input{padding-right:12px;}
.qf-field select{cursor:pointer;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230E0E11' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:11px;}
.qf-field select:focus,.qf-field input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,14,17,.12);}
.qf-field select:focus-visible,.qf-field input:focus-visible{outline:3px solid var(--red);outline-offset:1px;}
.qf-field select:disabled{background-color:var(--n50);border-color:var(--n200);color:var(--n500);cursor:not-allowed;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23A1A1AA' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");}
@media (hover:hover) and (pointer:fine){ .qf-field select:not(:disabled):hover,.qf-field input:hover{border-color:var(--n500);} }

.qf__go{--bh:54px;width:100%;}
.qf__go[aria-disabled="true"]{background:var(--n200);color:var(--n600);cursor:not-allowed;}
.qf__go[aria-disabled="true"] .btn__ico{background:rgba(14,14,17,.07);color:var(--n600);}
.qf__go[aria-disabled="true"]:hover{background:var(--n200);}
.qf__go[aria-disabled="true"]:active{transform:none;}
.qf__go:not([aria-disabled="true"]){box-shadow:0 12px 24px -14px rgba(238,28,37,.9);}
.qf__hint{display:flex;align-items:center;gap:7px;margin-top:9px;min-height:20px;font-size:13.5px;line-height:1.4;color:var(--n600);}
.qf__hint.is-ready{color:#15803D;}
.qf__hint.is-ready::before{content:"";width:7px;height:7px;border-radius:99px;background:#16A34A;flex:none;}
.qf__hint.is-warn{color:var(--r700);}
.qf__nojs{display:none;font-size:15px;line-height:1.5;color:var(--ink-3);padding:4px 0 12px;}
.qf__nojs a{color:var(--ink);font-weight:500;}
html:not(.js) .qf__form,html:not(.js) .qf__alt{display:none;}
html:not(.js) .qf__nojs{display:block;}

.qf__alt{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 16px;margin-top:12px;padding-top:6px;border-top:1px solid var(--rule);}
.qf__alt-a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14.5px;font-weight:500;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--n300);text-underline-offset:4px;transition:text-decoration-color 160ms ease,color 160ms ease;}
.qf__alt-a svg{width:13px;height:13px;color:var(--red);flex:none;}
.qf__alt-a:hover{text-decoration-color:var(--ink);}

/* rego mode (phase 2 — hidden until enabled) */
.qf__modes{display:flex;gap:4px;padding:4px;margin-bottom:14px;background:var(--n100);border-radius:6px;}
.qf__modes[hidden],.qf__rego[hidden],.qf__form[hidden]{display:none;}
.qf__mode{flex:1;min-height:40px;border:0;border-radius:4px;background:transparent;font:500 14px/1 var(--body);color:var(--n600);cursor:pointer;}
.qf__mode[aria-checked="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(14,14,17,.14),0 0 0 1px rgba(14,14,17,.06);}

/* result: route + human handover */
.qf__out[hidden]{display:none;}
.qf__out{animation:qf-in 340ms var(--ease-out);}
.qf__out:focus{outline:none;}
.qf__out:focus-visible{outline:3px solid var(--red);outline-offset:6px;border-radius:2px;}
@keyframes qf-in{from{opacity:0;transform:translateY(8px);}}
.qf-veh{display:flex;align-items:center;gap:12px;padding:10px 8px 10px 12px;border:1px solid var(--rule);border-radius:4px;background:var(--n50);margin-bottom:18px;}
.qf-veh__ok{width:30px;height:30px;border-radius:99px;background:#DCFCE7;color:#15803D;display:grid;place-items:center;flex:none;}
.qf-veh__ok svg{width:14px;height:14px;}
.qf-veh__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.qf-veh__k{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--n600);}
.qf-veh__v{font-size:16px;font-weight:500;color:var(--ink);line-height:1.3;overflow-wrap:anywhere;}
.qf-link{flex:none;min-height:44px;padding:0 8px;border:0;background:none;cursor:pointer;font:500 14px/1 var(--body);color:var(--ink);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--n300);}
.qf-link:hover{text-decoration-color:var(--ink);}
.qf-out__k{font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--red-ink);margin-bottom:6px;}
.qf-out__h{font-family:var(--display);font-weight:700;font-size:clamp(26px,2vw,30px);line-height:.98;text-transform:uppercase;color:var(--ink);margin-bottom:10px;text-wrap:balance;}
.qf-out__p{font-size:15px;line-height:1.5;color:var(--ink-3);margin-bottom:8px;}
.qf-out__p[hidden]{display:none;}
.qf-out__help{font-size:15px;line-height:1.5;color:var(--ink);font-weight:500;}
.qf-out__acts{display:grid;gap:8px;margin-top:16px;}
.qf-out__acts .btn{width:100%;}
.qf-out__cat{margin-top:16px;}
.qf-out__cat[hidden]{display:none;}
.qf-out__cat svg{width:12px;height:12px;}

/* ---- MOBILE LAUNCHER (the finder itself opens as a bottom sheet) --------- */
.qf-launch{display:none;}

/* ---- DIALOG: right drawer ≥768 · bottom sheet <768 ----------------------- */
.qfd{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:hidden;}
.qfd::backdrop{background:transparent;}
.qfd__scrim{position:absolute;inset:0;background:rgba(14,14,17,.58);opacity:0;transition:opacity 280ms ease;}
.qfd.is-open .qfd__scrim{opacity:1;}
.qfd__panel{position:absolute;top:0;right:0;bottom:0;width:min(480px,100%);display:flex;flex-direction:column;background:#fff;
  box-shadow:-30px 0 60px -30px rgba(0,0,0,.55);transform:translateX(100%);transition:transform 400ms var(--ease-drawer);}
.qfd.is-open .qfd__panel{transform:none;}
.qfd.is-closing .qfd__scrim{transition-duration:200ms;}
.qfd.is-closing .qfd__panel{transition:transform 220ms var(--ease-exit);}
.qfd__bar{height:16px;flex:none;}
.qfd__grab{display:none;}
.qfd__x{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;border-radius:99px;border:1.5px solid var(--n300);background:#fff;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;transition:border-color 160ms ease,background-color 160ms ease,transform 140ms var(--ease-out);}
.qfd__x svg{width:12px;height:12px;}
.qfd__x:hover{border-color:var(--ink);}
.qfd__x:active{transform:scale(.94);}
.qfd__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px 28px 28px;-webkit-overflow-scrolling:touch;}
.qfd .qf{box-shadow:none;border:0;border-radius:0;padding:0;}
.qfd .qf .plate__terminals{display:none;}
.qfd .qf__hd{padding-right:56px;min-height:40px;}
html.qf-lock{overflow:hidden;}
@media (max-width:767px){
  .qfd__panel{top:auto;left:0;width:100%;max-height:calc(100dvh - 16px);border-radius:8px 8px 0 0;transform:translateY(100%);
    box-shadow:0 -24px 60px -24px rgba(0,0,0,.55);}
  .qfd__bar{position:relative;height:26px;touch-action:none;cursor:grab;}
  .qfd__grab{display:block;position:absolute;left:50%;top:10px;width:40px;height:4px;border-radius:99px;background:var(--n300);transform:translateX(-50%);}
  .qfd__x{top:12px;right:12px;}
  .qfd__body{padding:4px 16px calc(20px + env(safe-area-inset-bottom));}
}
@media (prefers-reduced-motion:reduce){
  .qfd__panel,.qfd.is-closing .qfd__panel{transform:none!important;opacity:0;transition:opacity 160ms ease!important;}
  .qfd.is-open .qfd__panel{opacity:1;}
  .qf__out{animation:none;}
  .qf__meter i{transition:none;}
}

/* ---- HERO: load sequence (gated on html.js) ------------------------------ */
.js .hero__eyebrow,.js .hero__lede,.js .hero__acts,.js .hero__contact{opacity:0;transform:translateY(14px);
  transition:opacity 700ms var(--ease-settle),transform 820ms var(--ease-settle);}
.js .hero__h .ln>span{transform:translateY(108%);transition:transform 1000ms var(--ease-settle);}
.js .hero__img{clip-path:inset(0 0 0 100%);transition:clip-path 1100ms var(--ease-settle);}
.js .hero__img img{transform:scale(1.06);transition:transform 1900ms var(--ease-settle);}
.js .hero__find,.js .qf-launch{opacity:0;transform:translateY(18px);transition:opacity 620ms ease,transform 820ms var(--ease-settle);}
.hero.is-live .hero__eyebrow,.hero.is-live .hero__lede,.hero.is-live .hero__acts,.hero.is-live .hero__contact,
.hero.is-live .hero__h .ln>span,.hero.is-live .hero__img img,.hero.is-live .hero__find,.hero.is-live .qf-launch{opacity:1;transform:none;}
.hero.is-live .hero__img{clip-path:inset(0 0 0 0);}
.hero.is-live .hero__eyebrow{transition-delay:40ms;}
.hero.is-live .hero__h .ln:nth-child(1)>span{transition-delay:90ms;}
.hero.is-live .hero__h .ln:nth-child(2)>span{transition-delay:190ms;}
.hero.is-live .hero__img{transition-delay:80ms;}
.hero.is-live .hero__find,.hero.is-live .qf-launch{transition-delay:240ms;}
.hero.is-live .hero__lede{transition-delay:300ms;}
.hero.is-live .hero__acts{transition-delay:380ms;}
.hero.is-live .hero__contact{transition-delay:460ms;}
@media (prefers-reduced-motion:reduce){
  .hero__eyebrow,.hero__lede,.hero__acts,.hero__contact,.hero__h .ln>span,.hero__img,.hero__img img,.hero__find,.qf-launch,.hero__img-in{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;animation:none!important;}
}

/* ---- HERO responsive ----------------------------------------------------- */
/* short laptop screens (1366×768, 1280×800): keep the finder's CTA above the fold */
@media (min-width:1024px) and (max-height:820px){
  .hero__in{padding-block:24px 28px;}
  .qf{padding-top:20px;}
  .qf__hd{margin-bottom:12px;}
  .qf__types{margin-bottom:12px;}
  .qf-tile__in{min-height:70px;padding-block:9px 9px;gap:6px;}
  .qf-tile__in svg{width:22px;height:22px;}
  .qf__fields{gap:10px;margin-bottom:12px;}
  .qf-field select,.qf-field input{height:44px;}
  .qf__go{--bh:50px;}
  .hero__eyebrow{margin-bottom:14px;}
  .hero__lede{margin-bottom:20px;}
}
@media (max-width:1180px) and (min-width:1024px){ .hero .btn--lg{padding-inline:22px;} }
/* stacked: photo becomes a scrimmed background, finder sits below the copy */
@media (max-width:1023px){
  .hero__in{grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,5vw,40px);padding-block:clamp(32px,5vw,48px) clamp(36px,5vw,52px);}
  .hero__copy{max-width:660px;}
  .hero__media{left:0;}
  .hero__img-in{inset:0;animation:none!important;}
  .hero__img img{object-position:50% 40%;}
  .hero__img::after{background:linear-gradient(180deg,rgba(14,14,17,.84) 0%,rgba(14,14,17,.9) 50%,rgba(14,14,17,.95) 100%);}
  .js .hero__img{clip-path:none;}
}
@media (min-width:768px) and (max-width:1023px){
  .hero__find{max-width:760px;}
  .hero__find .qf{padding:26px 26px 14px;}
  .hero__find .qf__fields{grid-template-columns:repeat(4,minmax(0,1fr));}
  .hero__find .qf-field--full{grid-column:span 2;}
  .hero__find .qf-tile__in{flex-direction:row;align-items:center;min-height:62px;padding-right:30px;}
  .hero__find .qf-tile__in::after{top:50%;margin-top:-7px;}
  .hero__find .qf-out__acts{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:767px){
  .hero__find{display:none;}
  .hero__eyebrow{font-size:12px;letter-spacing:.16em;}
  .hero__lede{font-size:17px;}
  .qf-launch{display:block;background:#fff;color:var(--ink);border-radius:8px;padding:18px 16px 6px;box-shadow:0 30px 60px -34px rgba(0,0,0,.8);}
  .qf-launch__h{font-family:var(--display);font-weight:700;font-size:28px;line-height:.95;text-transform:uppercase;color:var(--ink);}
  .qf-launch__sub{font-size:15px;line-height:1.4;color:var(--ink-3);margin:6px 0 6px;}
  .qf-launch__list li+li{border-top:1px solid var(--rule);}
  .qf-launch__list a{display:flex;align-items:center;gap:14px;min-height:60px;text-decoration:none;font-size:16px;font-weight:500;line-height:1.25;color:var(--ink);}
  .qf-launch__list a:active{background:var(--n50);}
  .qf-launch__ico{width:40px;height:40px;border-radius:4px;background:var(--n100);display:grid;place-items:center;color:var(--ink);flex:none;}
  .qf-launch__ico svg{width:24px;height:24px;}
  .qf-launch__list a>svg:last-child{margin-left:auto;width:8px;height:12px;color:var(--n500);flex:none;}
}
@media (max-width:560px){ .hero__acts .btn{width:100%;} }

/* ---- TRUST STRIP --------------------------------------------------------- */
.trust{background:var(--paper);border-bottom:1px solid var(--rule);}
.trust__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule);}
.trust__list li{display:flex;gap:14px;align-items:flex-start;background:var(--paper);padding:clamp(20px,2vw,28px) clamp(14px,1.5vw,22px);}
.trust__list li:first-child{padding-left:0;}
.trust__list li:last-child{padding-right:0;}
.trust__ico{width:40px;height:40px;border-radius:99px;background:var(--r50);color:var(--r700);display:grid;place-items:center;flex:none;}
.trust__ico svg{width:20px;height:20px;}
.trust__t{display:block;font-size:16px;font-weight:500;line-height:1.3;color:var(--ink);}
.trust__d{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:var(--ink-3);}
@media (max-width:1180px){
  .trust__list{grid-template-columns:repeat(6,minmax(0,1fr));}
  .trust__list li{grid-column:span 2;padding:22px 18px;}
  .trust__list li:nth-child(4),.trust__list li:nth-child(5){grid-column:span 3;}
  .trust__list li:first-child,.trust__list li:nth-child(4){padding-left:0;}
  .trust__list li:nth-child(3){padding-right:0;}
}
@media (max-width:767px){
  .trust__list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trust__list li,.trust__list li:nth-child(4){grid-column:span 1;flex-direction:column;gap:10px;padding:18px 14px 18px 0;}
  .trust__list li:nth-child(2n){padding:18px 0 18px 14px;}
  .trust__list li:last-child{grid-column:1 / -1;flex-direction:row;align-items:center;padding:18px 0;}
  .trust__ico{width:36px;height:36px;}
  .trust__t{font-size:15.5px;}
  .trust__d{font-size:13.5px;}
}

/* ---- RANGE: two pathways -------------------------------------------------- */
.paths{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(28px,4vw,64px);align-items:start;}
.paths .routes{gap:clamp(20px,3vw,40px);}
.paths .route__h{padding-bottom:12px;}
.rrow__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.paths .rrow{align-items:center;padding:16px 2px;}
.paths .rrow__t{flex:none;}
.paths .rrow__d{display:block;max-width:none;text-align:left;font-size:14px;line-height:1.4;color:var(--n600);}
.paths .range__foot{justify-content:flex-start;gap:16px 28px;}
.paths .range__foot .body-sm{max-width:44ch;margin:0;}
.paths__help{position:relative;background:var(--n950);color:#fff;border-radius:8px;padding:clamp(24px,2.4vw,32px);overflow:hidden;}
.paths__help::before{content:"";position:absolute;left:clamp(24px,2.4vw,32px);top:0;width:44px;height:4px;background:var(--red);border-radius:0 0 2px 2px;}
.paths__help h3{color:#fff;margin:6px 0 10px;}
.paths__help>p{color:var(--n300);font-size:15.5px;line-height:1.5;margin-bottom:18px;}
.paths__types{display:grid;gap:8px;}
.paths__types a{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 14px;border:1px solid rgba(255,255,255,.18);border-radius:4px;
  text-decoration:none;color:#fff;font-size:15.5px;font-weight:500;line-height:1.25;transition:border-color 160ms ease,background-color 160ms ease;}
.paths__types a>svg:first-child{width:24px;height:24px;color:var(--r400);flex:none;}
.paths__types a>svg:last-child{margin-left:auto;width:8px;height:12px;color:var(--n400);flex:none;transition:transform 220ms var(--ease-out);}
.paths__types a:hover{border-color:#fff;background:rgba(255,255,255,.05);}
@media (hover:hover) and (pointer:fine){ .paths__types a:hover>svg:last-child{transform:translateX(3px);} }
.paths__contact{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:18px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);}
.paths__contact a{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:#fff;font-size:15px;font-weight:500;text-decoration:none;}
.paths__contact a:hover{color:var(--r300);}
.paths__contact svg{width:15px;height:15px;color:var(--r400);flex:none;}
@media (max-width:1023px){ .paths{grid-template-columns:1fr;} .paths__help{max-width:560px;} }

/* ---- PRICING BAND --------------------------------------------------------- */
.pricing{overflow:hidden;}
.pricing::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:radial-gradient(720px 420px at 8% 0%,rgba(238,28,37,.55),transparent 70%);}
.pricing__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,6vw,96px);align-items:center;}
.pricing .eyebrow{color:var(--n400);}
.pricing h2{max-width:15ch;}
.pricing .lede{color:var(--n300);max-width:50ch;margin-top:20px;}
.pricing__acts{margin-top:30px;}
.pricing__flag{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:22px;font-size:13.5px;color:var(--n400);}
.pricing__send-h{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--n400);margin-bottom:6px;}
@media (max-width:900px){ .pricing__in{grid-template-columns:1fr;} }

/* ---- ROADSIDE: contained card, visible but not dominant ------------------ */
.rsd{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,4vw,64px);align-items:center;
  border-radius:8px;padding:clamp(28px,4vw,56px);overflow:hidden;}
.rsd::before{content:"";position:absolute;left:0;top:clamp(28px,4vw,56px);width:4px;height:64px;background:var(--red);border-radius:0 2px 2px 0;}
.rsd .eyebrow{color:var(--n400);margin-bottom:16px;}
.rsd h2{margin-bottom:14px;}
.rsd .lede{color:var(--n300);max-width:48ch;}
.rsd .btn-row{margin-top:26px;}
.rsd__facts{display:grid;gap:1px;margin:0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:4px;overflow:hidden;}
.rsd__facts>div{background:var(--n900);padding:14px 16px;}
.rsd__facts dt{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);margin-bottom:4px;}
.rsd__facts dd{margin:0;font-size:16px;font-weight:500;line-height:1.4;color:#fff;}
.rsd__facts dd.rsd__flag{margin-top:8px;}
@media (max-width:900px){ .rsd{grid-template-columns:1fr;} }

/* ---- smaller section updates --------------------------------------------- */
.gcard__ft{color:var(--ink-3);}
.fcta__acts{justify-content:center;}
.drawer__text{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--n300);text-underline-offset:4px;}
.drawer__text svg{width:15px;height:15px;color:var(--red);}
.loc__text{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:4px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--n300);text-underline-offset:4px;}
.loc__text svg{width:15px;height:15px;color:var(--red);}
.acard__text{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;font-size:15px;font-weight:500;color:var(--ink);}
.acard__text svg{width:15px;height:15px;color:var(--red);}

/* mobile quick bar: Call · Find my battery · Text */
.mobar a{font-size:14.5px;letter-spacing:.03em;gap:8px;}
.mobar a.is-primary{flex:1.7;}
.mobar a.is-primary svg{width:17px;height:17px;}
@media (max-width:360px){ .mobar a{font-size:13.5px;letter-spacing:.01em;gap:6px;} .mobar svg{width:14px;height:14px;} }

/* utility band: text link + narrow-phone fit */
.band__link--text svg{color:var(--r400);}
@media (max-width:600px){ .bl-lg{display:none;} .bl-sm{display:inline;} }
@media (max-width:400px){ .band__link{padding-inline:10px;} .band__link svg{display:none;} .band__l{gap:10px;} }

/* dark-surface flags in the footer */
.ft .confirm{background:repeating-linear-gradient(-45deg,#3f2d06 0 7px,#4a3608 7px 14px);color:#FCD34D;border-color:#6b4f0c;}
/* phones: section CTAs go full width so long labels never wrap awkwardly */
@media (max-width:560px){
  .rsd .btn-row .btn,.pricing__acts .btn,.fcta__acts .btn,.paths .range__foot .btn{width:100%;}
}
/* finder drawer/sheet footer: the "my car won't start" path from anywhere */
.qfd__ft{flex:none;display:flex;align-items:center;gap:12px;padding:14px 28px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);background:var(--n50);
  font-size:14.5px;line-height:1.4;color:var(--ink-3);}
.qfd__ft svg{width:16px;height:16px;color:var(--red);flex:none;}
.qfd__ft a{color:var(--ink);font-weight:500;text-underline-offset:3px;}
@media (max-width:767px){ .qfd__ft{padding-inline:16px;} .qfd__body{padding-bottom:18px;} }

/* touch targets: last few under 44px */
.loc .hero__phone{min-height:44px;}
.acard__list a{min-height:44px;}
/* 1181–1439: five columns get narrow, so the icon sits above the text */
@media (min-width:1181px) and (max-width:1439px){
  .trust__list li{flex-direction:column;gap:12px;}
  .trust__ico{width:36px;height:36px;}
}
/* ==========================================================================
   38. PREMIUM REFINEMENT PASS — audit findings, fixed as a system
   --------------------------------------------------------------------------
   Every rule here answers a named finding. Nothing below changes the IA,
   copy, palette or component set; it corrects weight, rhythm, contrast,
   repetition and mobile composition. Reusable across every inner page.

   FINDINGS
   A1  Header: search submit is a solid black block competing with the red
       Find button — two heavy CTAs side by side.
   A2  Header: red used four times in one bar (chip, Find, phone ring, tick).
   A3  Sticky header ~134px of chrome on laptop; nav row stays on scroll.
   B1  Hero: photograph confined to a strip behind the card — the section
       reads as flat black. Industrial character lost.
   B2  Hero: contact row is two disconnected elements at two sizes.
   D1  Trust strip: five identical icon-in-red-circle cells (brief §15/§46).
       At 1181–1439 the icons stack above the copy and the strip goes tall.
   F1  Pricing: numbered red circles repeat the same icon-circle pattern.
   I1  New vs Reconditioned: the "OR" divider is illegible.
   O1  Final CTA: the red radial reads as a gradient wash (brief: no
       gradients, don't overuse red).
   Q1  Rhythm: 136px section padding stacks into 222–272px dead gaps between
       consecutive light sections (family → roadside → new-vs).
   Q2  No visual seam between consecutive light sections.
   T1  Card hover, radius and border treatments drift between sections.
   V1  Mobile: hero contact row + CTAs stack tall; trust cells cramped.
   ========================================================================== */

/* ---- Q1/Q2 · SECTION RHYTHM — one scale, seams where surfaces repeat ---- */
:root{
  --sec:clamp(64px,7.6vw,112px);          /* standard */
  --sec-tight:clamp(40px,5vw,72px);        /* contained cards, sub-sections */
}
.section{padding-block:var(--sec);}
.section--tight{padding-block:var(--sec-tight);}
/* the roadside card sits inside the white run between family and new-vs:
   it borrows the neighbours' padding instead of adding its own */
#roadside.section--tight{padding-top:0;padding-bottom:var(--sec);}
#family.section{padding-bottom:var(--sec-tight);}
/* hairline seam whenever two light sections meet, so the page never floats */
main > .section:not(.dark):not(.paper-2) + .section:not(.dark):not(.paper-2){border-top:1px solid var(--rule);}
#roadside + .section{border-top:0;}
#family + #roadside{border-top:0;}
/* dark → light and light → dark transitions get a 1px lift line so the edge
   feels cut, not pasted */
.section.dark{box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.section.paper-2{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}

/* ---- A1/A2/A3 · HEADER — one primary, calmer chrome ---------------------- */
.hsearch__go{background:transparent;color:var(--ink-2);border-left:1px solid var(--rule-strong);padding-inline:16px;}
.hsearch__go:hover{background:var(--n100);color:var(--ink);}
.hsearch__field:focus-within .hsearch__go{border-left-color:var(--ink);}
.hdr__help-ico{color:var(--ink);border-color:var(--n300);}
.hdr__help:hover .hdr__help-ico{background:var(--ink);border-color:var(--ink);color:#fff;}
/* stuck: nav row collapses so the sticky chrome is ~70px, not 134 */
.hdr__nav{transition:height 260ms var(--ease-out),opacity 200ms ease;overflow:hidden;}
.hdr.is-stuck .hdr__nav{height:0;opacity:0;border-top-width:0;}
:root{--header-h:72px;}

/* ---- B1 · HERO — the photograph carries the section --------------------- */
.hero__media{left:0;}
.hero__img img{object-position:60% 48%;filter:saturate(.9) contrast(1.12) brightness(.82);}
.hero__img::after{
  background:
    linear-gradient(90deg,var(--n950) 0%,rgba(14,14,17,.96) 22%,rgba(14,14,17,.78) 44%,rgba(14,14,17,.42) 66%,rgba(14,14,17,.5) 100%),
    linear-gradient(180deg,rgba(14,14,17,.45) 0%,transparent 28%,transparent 62%,rgba(14,14,17,.7) 100%);}
/* B2 · one contact line: rule above, icon + number + text link inline */
.hero__contact{margin-top:clamp(22px,2.4vw,30px);padding-top:18px;border-top:1px solid rgba(255,255,255,.14);gap:8px 22px;max-width:560px;}
.hero__call-ico{width:38px;height:38px;background:transparent;border-color:rgba(255,255,255,.28);color:#fff;}
.hero__call .num{font-size:15.5px;letter-spacing:.03em;}
.hero__call .lbl{font-size:13px;}
.hero__text{font-size:14.5px;color:var(--n300);}
@media (hover:hover) and (pointer:fine){
  .hero__call:hover .hero__call-ico{background:var(--red);border-color:var(--red);color:#fff;}
}

/* ---- D1 · TRUST STRIP — typographic, no icon cells ---------------------- */
.trust{border-bottom:1px solid var(--rule);}
.trust__list li>.trust__ico{display:none;}
.trust__list{grid-template-columns:repeat(5,minmax(0,1fr));gap:0;background:transparent;}
.trust__list li{position:relative;display:block;padding:clamp(22px,2.2vw,30px) clamp(18px,2vw,32px) clamp(22px,2.2vw,30px) 0;border-right:1px solid var(--rule);}
.trust__list li:last-child{border-right:0;}
.trust__list li+li{padding-left:clamp(18px,2vw,32px);}
.trust__list li>span:not(.trust__ico){display:block;}
.trust__list li>span:not(.trust__ico)::before{content:"";display:block;width:22px;height:3px;background:var(--red);margin-bottom:14px;}
.trust__t{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.5vw,22px);line-height:1;text-transform:uppercase;letter-spacing:.005em;color:var(--ink);}
.trust__d{margin-top:6px;font-size:14px;line-height:1.45;color:var(--ink-3);}
@media (min-width:1181px) and (max-width:1439px){
  .trust__list li{flex-direction:row;gap:0;}
}
@media (max-width:1180px){
  .trust__list{grid-template-columns:repeat(6,minmax(0,1fr));}
  .trust__list li,.trust__list li:nth-child(4),.trust__list li:nth-child(5){grid-column:span 2;padding:22px 18px 22px 0;}
  .trust__list li:nth-child(3){border-right:0;}
  .trust__list li:nth-child(n+4){border-top:1px solid var(--rule);}
  .trust__list li:nth-child(4){padding-left:0;}
  .trust__list li:nth-child(5){grid-column:span 4;border-right:0;padding-left:18px;}
}
@media (max-width:767px){
  .trust__list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trust__list li,.trust__list li:nth-child(4),.trust__list li:nth-child(5){grid-column:span 1;padding:18px 14px 18px 0;border-right:1px solid var(--rule);flex-direction:column;}
  .trust__list li:nth-child(2n){border-right:0;padding:18px 0 18px 14px;}
  .trust__list li:nth-child(n+3){border-top:1px solid var(--rule);}
  .trust__list li:last-child{grid-column:1 / -1;border-right:0;padding-left:0;}
  .trust__list li>span:not(.trust__ico)::before{width:18px;margin-bottom:10px;}
  .trust__t{font-size:19px;}
  .trust__d{font-size:13.5px;}
}

/* ---- F1 · PRICING — display numerals instead of circled digits ---------- */
.fproc{display:grid;gap:0;}
.fproc li{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-top:1px solid rgba(255,255,255,.12);}
.fproc li:last-child{border-bottom:1px solid rgba(255,255,255,.12);}
.fproc__n{display:inline-block;white-space:nowrap;width:auto;height:auto;border:0;border-radius:0;background:transparent;
  font-family:var(--display);font-weight:700;font-size:28px;line-height:1;color:var(--r400);
  min-width:34px;padding-top:2px;letter-spacing:.02em;}
.fproc__n::before{content:"0";}
.fproc h3{font-size:clamp(20px,1.6vw,23px);line-height:1;margin-bottom:5px;}
.fproc p{font-size:14.5px;color:var(--n400);line-height:1.5;}
.pricing::before{opacity:.1;}

/* ---- I1 · NEW vs RECONDITIONED — divider that can be read ---------------- */
.vs__div{background:var(--rule-strong);}
.vs__div span{font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--ink-3);padding:10px 0;}
.opt{border-radius:6px;}
.opt:hover{border-color:var(--rule-strong);box-shadow:0 24px 48px -36px rgba(14,14,17,.35);}

/* ---- O1 · FINAL CTA — a mark, not a wash --------------------------------- */
.fcta::before{background:radial-gradient(40% 46% at 50% 36%,rgba(238,28,37,.16),transparent 72%);}
.fcta{box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}

/* ---- T1 · CARD SYSTEM — one hover, one radius family --------------------- */
.gcard,.rev,.fnode,.pcard,.acard{border-radius:4px;}
.gcard{transition:background-color 220ms ease,box-shadow 300ms var(--ease-out),transform 300ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .gcard:hover{background:var(--paper);transform:translateY(-2px);box-shadow:0 20px 40px -34px rgba(14,14,17,.5);position:relative;z-index:1;}
  .fnode:hover{border-color:var(--n700);}
}
.guides{gap:1px;background:var(--rule);}
.gcard h3{font-size:clamp(20px,1.7vw,24px);}
.gcard p{font-size:14.5px;}
/* recycling nodes: chevrons read as connectors, not decoration */
.fnode:not(:last-child)::after{width:12px;height:12px;border-width:1.5px;border-color:var(--n600);}

/* ---- Buttons: icon disc reads on every surface --------------------------- */
.btn--ghost .btn__ico{background:var(--n100);color:var(--ink);}
.btn--onDark .btn__ico{background:rgba(255,255,255,.14);color:#fff;}
.btn--dark .btn__ico{background:rgba(255,255,255,.16);}

/* ---- Eyebrow rule length follows the heading, not the container --------- */
.sec-head .eyebrow--line{max-width:420px;}

/* ---- V1 · MOBILE COMPOSITION -------------------------------------------- */
@media (max-width:767px){
  .hero__contact{max-width:none;gap:6px 18px;}
  .hero__call-ico{width:36px;height:36px;}
  .hero__acts .btn{width:100%;}
  .hero__in{padding-block:clamp(30px,7vw,44px) clamp(28px,6vw,40px);}
}
@media (max-width:430px){
  .hero__lede{font-size:16.5px;max-width:none;}
  .fproc li{gap:14px;padding:16px 0;}
  .fproc__n{font-size:24px;min-width:30px;}
}

/* ---- Reduced motion: nothing above may move ----------------------------- */
@media (prefers-reduced-motion:reduce){
  .gcard,.opt,.hdr__nav{transition:none!important;transform:none!important;}
}

/* ---- Wipe reveal: end state must not clip overhanging children (the family
   stamp was being cut at the image edge) ---------------------------------- */
[data-rv="wipe"].rv-in{clip-path:inset(-40px -40px -40px -40px);}
/* phones: copy sits directly over the photograph, so the scrim goes heavier */
@media (max-width:767px){
  .hero__img img{filter:saturate(.85) contrast(1.1) brightness(.7);}
  .hero__img::after{background:
    linear-gradient(180deg,rgba(14,14,17,.55) 0%,rgba(14,14,17,.82) 34%,rgba(14,14,17,.82) 70%,rgba(14,14,17,.6) 100%);}
}

/* ==========================================================================
   39. REVIEWS — live Google content (source: qldbattery.com.au/reviews-2)
   Replaces the skeleton state. Summary + six latest five-star reviews.
   ========================================================================== */
.rsum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,3vw,48px);align-items:center;
  padding:clamp(22px,2.6vw,32px);border:1px solid var(--rule);border-radius:6px;background:var(--paper);margin-bottom:clamp(20px,2.4vw,28px);}
.rsum__score{text-align:left;padding-right:clamp(22px,3vw,48px);border-right:1px solid var(--rule);min-width:150px;}
.rsum__n{font-family:var(--display);font-weight:700;font-size:clamp(52px,5.6vw,72px);line-height:.9;color:var(--ink);}
.rsum__lbl{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:8px 0 10px;}
.rsum .stars{display:flex;gap:3px;margin:0;}
.stars--live svg{width:15px;height:15px;color:#F5A524;}
.rsum__body h3{margin-bottom:8px;}
.rsum__body .body-sm{max-width:60ch;margin-bottom:18px;}
.rsum__note{margin-top:14px;font-size:13px;color:var(--ink-3);display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;}
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px);}
.rev{display:flex;flex-direction:column;padding:22px 22px 20px;border:1px solid var(--rule);border-radius:4px;background:var(--paper);
  transition:border-color 200ms ease,transform 300ms var(--ease-out),box-shadow 300ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){.rev:hover{border-color:var(--rule-strong);transform:translateY(-2px);box-shadow:0 20px 40px -34px rgba(14,14,17,.45);}}
.rev__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.rev__src{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);}
.rev__g{width:13px;height:13px;color:var(--ink-3);}
.rev__q{font-family:var(--body);font-size:15.5px;line-height:1.55;color:var(--ink);margin:0 0 18px;flex:1;text-wrap:pretty;}
.rev__by{display:flex;align-items:center;gap:11px;padding-top:14px;border-top:1px solid var(--rule);}
.rev__av{width:34px;height:34px;border-radius:99px;background:var(--n900);color:#fff;display:grid;place-items:center;flex:none;font-family:var(--body);font-weight:500;font-size:14px;}
.rev__nm{font-size:14px;font-weight:500;color:var(--ink);}
.rev__dt{font-size:12.5px;color:var(--n500);}
@media (max-width:980px){.reviews{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:680px){
  .rsum{grid-template-columns:1fr;gap:18px;}
  .rsum__score{border-right:0;border-bottom:1px solid var(--rule);padding:0 0 18px;min-width:0;}
}
@media (max-width:600px){.reviews{grid-template-columns:1fr;}}
.rev__src svg,.rev__g{width:13px;height:13px;flex:none;}

/* ==========================================================================
   40. SHOP BATTERIES — homepage quick-shop (replaces the two-pathway range).
   Scoped entirely to .shop / .pc. Uses existing tokens, buttons, eyebrow,
   confirm chip, radius family and the global finder trigger. Nothing here
   reaches outside #range.
   ========================================================================== */
.shop{font-family:var(--body);}
.shop__head{margin-bottom:clamp(20px,2.4vw,28px);}
.shop__head .d-2{margin-bottom:12px;}
.shop__head .lede{max-width:56ch;}

/* ---- discovery bar: separates DISCOVERY from PRODUCTS --------------------- */
.shop__bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;
  padding:16px 0 20px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:clamp(20px,2.4vw,28px);}
.shop__filters{display:flex;gap:10px;flex:1 1 auto;min-width:0;}
.shop__sel{position:relative;display:flex;flex-direction:column;gap:6px;flex:1 1 0;min-width:0;max-width:260px;}
.shop__lbl{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.shop__sel select{width:100%;min-height:46px;padding:0 40px 0 14px;border:1px solid var(--rule-strong);border-radius:4px;background:var(--paper);
  font-family:var(--body);font-size:15px;color:var(--ink);appearance:none;cursor:pointer;
  transition:border-color 160ms ease,background-color 160ms ease;}
.shop__sel select:hover{border-color:var(--ink);}
.shop__sel select:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-color:var(--ink);}
.shop__chev{position:absolute;right:14px;bottom:17px;width:11px;height:8px;color:var(--ink-3);pointer-events:none;}
.shop__chev svg{width:11px;height:8px;display:block;}
.shop__find{flex:none;--bh:46px;padding-inline:20px;gap:9px;}
.shop__find svg{width:18px;height:18px;flex:none;}

/* ---- grid ------------------------------------------------------------------- */
.shop__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden;}
.shop__item[hidden]{display:none;}
.shop__empty{padding:22px 0;font-size:15px;color:var(--ink-3);}
.shop__empty a{color:var(--ink);font-weight:500;text-underline-offset:3px;}
.shop__foot{margin-top:clamp(22px,2.6vw,30px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;}
.shop__foot .body-sm{max-width:56ch;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;}

/* ---- product card: automotive retail hierarchy ------------------------------ */
.pc{position:relative;display:flex;flex-direction:column;height:100%;background:var(--paper);
  transition:box-shadow 260ms var(--ease-out),transform 260ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .pc:hover{transform:translateY(-2px);box-shadow:0 18px 36px -30px rgba(14,14,17,.45);z-index:1;}
  .pc:hover .pc__ph{color:var(--ink-3);}
  .pc:hover .pc__name a{color:var(--red-ink);}
}
.pc__media{position:relative;display:block;aspect-ratio:4/3;background:var(--n50);border-bottom:1px solid var(--rule);text-decoration:none;overflow:hidden;}
.pc__media img{width:100%;height:100%;object-fit:contain;padding:8%;transition:transform 400ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .pc:hover .pc__media img{transform:scale(1.03);} }
.pc__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--n400);
  transition:color 200ms ease;}
.pc__ph svg{width:46px;height:34px;}
.pc__ph span{font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;}
.pc__tag{position:absolute;top:12px;left:12px;padding:5px 9px;border-radius:2px;font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  background:var(--ink);color:#fff;}
.pc__tag--recon{background:var(--r700);}
.pc__bd{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px;}
.pc__brand{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;}
.pc__name{font-family:var(--body);font-size:16px;font-weight:500;line-height:1.35;text-transform:none;letter-spacing:0;margin:0 0 6px;}
.pc__name a{color:var(--ink);text-decoration:none;transition:color 160ms ease;}
.pc__spec{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-3);margin-bottom:14px;}
.pc__slot{display:inline-block;min-width:44px;padding:2px 8px;border:1px dashed var(--rule-strong);border-radius:2px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--n500);}
.pc__dot{color:var(--n400);}
.pc__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:auto;margin-bottom:14px;}
.pc__amt{font-family:var(--display);font-weight:700;font-size:30px;line-height:1;color:var(--red-ink);letter-spacing:.005em;}
.pc__note{font-size:12px;color:var(--n500);}
.pc__acts{display:grid;gap:8px;}
.pc__acts .btn{width:100%;--bh:44px;}

/* ---- responsive ------------------------------------------------------------ */
@media (max-width:1180px){
  .shop__bar{align-items:stretch;}
  .shop__filters{flex-wrap:wrap;}
  .shop__sel{flex:1 1 180px;max-width:none;}
  .shop__find{align-self:flex-end;}
}
@media (max-width:1023px){
  .shop__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:767px){
  /* mobile order: heading → Find my battery → filters → products */
  .shop__bar{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:14px;padding:16px 0;}
  .shop__filters{width:auto;}
  .shop__find{order:-1;width:100%;--bh:50px;}
  .shop__filters{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scrollbar-width:none;}
  .shop__filters::-webkit-scrollbar{display:none;}
  .shop__sel{flex:0 0 min(72vw,240px);scroll-snap-align:start;}
  .shop__foot{flex-direction:column;align-items:stretch;}
  .shop__foot .btn{width:100%;}
}
@media (max-width:600px){
  /* products become a snap carousel — 4 tall cards stacked would push the
     rest of the page too far down on a phone */
  .shop__grid{display:flex;gap:10px;background:transparent;border:0;border-radius:0;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gut));padding:2px var(--gut) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .shop__grid::-webkit-scrollbar{display:none;}
  .shop__item{flex:0 0 min(74vw,300px);scroll-snap-align:start;}
  .pc{border:1px solid var(--rule);border-radius:4px;}
  .pc__bd{padding:14px 16px 16px;}
  .pc__amt{font-size:28px;}
}
@media (prefers-reduced-motion:reduce){
  .pc,.pc__media img,.shop__sel select{transition:none!important;transform:none!important;}
  .shop__grid,.shop__filters{scroll-behavior:auto;}
}
.pc__amt{display:inline-flex;align-items:baseline;gap:6px;}
.pc__slot--price{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.06em;color:var(--red-ink);border-color:var(--r300);min-width:64px;text-align:center;}
/* product photos: white product plate so the packshots read cleanly */
.pc__media--img{background:#fff;}
.pc__media--img img{padding:5% 8%;}
.pc__code{font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:.04em;color:var(--ink);}

/* ==========================================================================
   41. FRAME 126 ALIGNMENT — changes the design frame makes to the build.
   Each block names the section. Mock product data in the frame (prices,
   ratings, invented codes) is deliberately NOT reproduced.
   ========================================================================== */

/* ---- Top band: frame starts at the logo row ------------------------------ */
.band--off{display:none;}
:root{--band-h:0px;}

/* ---- Hero: dark finder card ---------------------------------------------- */
.hero__find .qf{background:var(--n950);color:#fff;border-color:rgba(255,255,255,.1);box-shadow:0 44px 80px -40px rgba(0,0,0,.9);}
.hero__find .qf__title{color:#fff;}
.hero__find .qf__legend,.hero__find .qf-field label{color:var(--n300);}
.hero__find .qf-field label span{color:var(--n500);}
.hero__find .qf__meter{border-color:var(--n700);}
.hero__find .qf__meter::after{background:var(--n700);}
.hero__find .qf__meter i{background:var(--n800);}
.hero__find .qf-tile__in{background:var(--n900);border-color:var(--n700);color:var(--n200);}
.hero__find .qf-tile__in svg{color:var(--n400);}
.hero__find .qf-tile__in::after{background:var(--n900);border-color:var(--n600);}
.hero__find .qf-tile input:checked+.qf-tile__in{background:var(--n800);border-color:#fff;box-shadow:inset 0 0 0 1px #fff;color:#fff;}
.hero__find .qf-tile input:checked+.qf-tile__in svg{color:#fff;}
.hero__find .qf-tile input:checked+.qf-tile__in::after{border-color:#fff;box-shadow:inset 0 0 0 3px var(--n800),inset 0 0 0 7px #fff;}
.hero__find .qf-field select,.hero__find .qf-field input{background-color:var(--n900);border-color:var(--n700);color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23FFFFFF' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");}
.hero__find .qf-field select:disabled{background-color:var(--n950);border-color:var(--n800);color:var(--n500);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2371717A' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");}
.hero__find .qf-field select:focus,.hero__find .qf-field input:focus{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.12);}
.hero__find .qf__go[aria-disabled="true"]{background:var(--n800);color:var(--n500);}
.hero__find .qf__hint{color:var(--n400);}
.hero__find .qf__alt{border-top-color:rgba(255,255,255,.12);}
.hero__find .qf__alt-a{color:#fff;text-decoration-color:rgba(255,255,255,.3);}
.hero__find .qf .plate__terminals .term{box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}

/* ---- Hero: contact chips ------------------------------------------------- */
.hero__contact--chips{display:flex;flex-wrap:wrap;gap:12px 28px;border-top:0;padding-top:0;margin-top:clamp(20px,2.2vw,26px);max-width:none;}
.hero__chip{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#fff;min-height:44px;}
.hero__chip-ico{width:40px;height:40px;border-radius:99px;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;color:var(--r500);flex:none;
  transition:background-color 200ms ease,border-color 200ms ease,transform 240ms var(--ease-out);}
.hero__chip-ico svg{width:16px;height:16px;}
.hero__chip b{display:block;font-weight:500;font-size:15.5px;letter-spacing:.01em;}
.hero__chip small{display:block;font-size:13px;color:var(--n400);margin-top:2px;}
@media (hover:hover) and (pointer:fine){.hero__chip:hover .hero__chip-ico{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.06);}}

/* ---- Trust strip: frame keeps the icon, left of the copy ----------------- */
.trust__list li>.trust__ico{display:grid;width:40px;height:40px;border-radius:99px;background:var(--r50);color:var(--r700);place-items:center;flex:none;}
.trust__list li{display:flex;flex-direction:row;align-items:flex-start;gap:14px;}
.trust__list li>span:not(.trust__ico)::before{display:none;}
.trust__t{font-size:clamp(18px,1.4vw,21px);}
@media (max-width:767px){.trust__list li>.trust__ico{width:36px;height:36px;}}

/* ---- Shop: lede on the right, qty + add to cart ---------------------------- */
.shop__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,64px);align-items:end;}
.shop__head .lede{margin:0 0 4px;}
@media (max-width:860px){.shop__head{grid-template-columns:1fr;align-items:start;}}
.shop__lbl{text-transform:none;letter-spacing:0;font-size:13.5px;}
.pc__buy{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0;}
.pc__buy .btn{border-radius:0 4px 4px 0;}
.pc__qty{position:relative;display:block;}
.pc__qty select{width:100%;height:44px;padding:0 26px 0 14px;border:1px solid var(--red);border-right:0;border-radius:4px 0 0 4px;background:var(--red);color:#fff;
  font:500 15px/1 var(--body);appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23FFFFFF' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:10px;}
.pc__qty::after{content:"";position:absolute;right:0;top:9px;bottom:9px;width:1px;background:rgba(255,255,255,.35);}
.pc__qty select:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}
.pc__amt{font-size:32px;}

/* ---- Pricing: grid texture, frame keeps the circled digits --------------- */
.pricing{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;}
.fproc__n{display:grid;place-items:center;width:34px;height:34px;min-width:0;border:1px solid var(--r500);border-radius:99px;background:transparent;
  font:500 13px/1 var(--body);color:#fff;letter-spacing:0;padding:0;}
.fproc__n::before{content:none;}
.fproc h3{font-family:var(--body);font-weight:500;text-transform:none;font-size:clamp(19px,1.5vw,22px);letter-spacing:0;}

/* ---- Roadside v2 ------------------------------------------------------------ */
.rsd--v2{position:relative;overflow:hidden;display:block;padding:clamp(28px,3.6vw,48px);}
.rsd__bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.rsd__bg img{width:100%;height:100%;object-fit:cover;object-position:80% 50%;opacity:.55;}
.rsd__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--n950) 0%,var(--n950) 42%,rgba(14,14,17,.55) 72%,rgba(14,14,17,.35) 100%);}
.rsd--v2 .rsd__copy{position:relative;z-index:1;max-width:640px;}
.rsd--v2 .d-2 em{font-style:normal;color:var(--red);}
.rsd__tiles{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(22px,2.8vw,34px);}
.rsd__tiles li{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:1px solid rgba(255,255,255,.14);border-radius:4px;background:rgba(14,14,17,.55);backdrop-filter:blur(4px);}
.rsd__ico{width:36px;height:36px;border-radius:99px;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:var(--r500);flex:none;}
.rsd__ico svg{width:15px;height:15px;}
.rsd__tiles b{display:block;font-weight:500;font-size:15px;color:#fff;}
.rsd__tiles small{display:block;font-size:13.5px;color:var(--n400);margin-top:3px;line-height:1.4;}
.rsd__days{display:flex;gap:4px;margin-top:8px;}
.rsd__days i{width:20px;height:20px;border-radius:2px;display:grid;place-items:center;font:500 10px/1 var(--body);color:var(--n500);border:1px solid rgba(255,255,255,.12);font-style:normal;}
.rsd__days i.on{background:var(--red);border-color:var(--red);color:#fff;}
@media (max-width:900px){.rsd__tiles{grid-template-columns:1fr;}}

/* ---- New vs reconditioned: light card / dark wave card ------------------- */
.opt{background:var(--n50);border-color:var(--n100);}
.opt--dark{position:relative;overflow:hidden;background:var(--n950);color:#fff;border-color:var(--n900);}
.opt__bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.opt__bg img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:.55;}
.opt__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--n950) 20%,rgba(14,14,17,.7) 60%,rgba(14,14,17,.35) 100%);}
.opt--dark>*:not(.opt__bg){position:relative;z-index:1;}
.opt--dark h3{color:#fff;}
.opt--dark .opt__p,.opt--dark .opt__list li{color:var(--n200);}
.opt--dark .chip{background:rgba(255,255,255,.12);color:#fff;}
.opt--dark .confirm{background:repeating-linear-gradient(-45deg,#3f2d06 0 7px,#4a3608 7px 14px);color:#FCD34D;border-color:#6b4f0c;}
.opt--dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3);}
.opt--dark .btn--ghost .btn__ico{background:rgba(255,255,255,.14);color:#fff;}
.opt--dark .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.07);}

/* ---- Recycling: neon lines behind, cards translucent ---------------------- */
.recycle--v2{position:relative;overflow:hidden;}
.recycle__bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.recycle__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:.7;}
.recycle__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,17,.55),rgba(14,14,17,.35) 50%,rgba(14,14,17,.7));}
.recycle--v2 .wrap{position:relative;z-index:1;}
.recycle--v2 .fnode{background:rgba(14,14,17,.78);border-color:rgba(255,255,255,.12);backdrop-filter:blur(4px);}

/* ---- Reviews: primary read-all ---------------------------------------------- */
#reviews .rsum .btn--dark{background:var(--red);}
#reviews .rsum .btn--dark:hover{background:var(--r700);}

/* ---- Closing CTA: red, photo behind ----------------------------------------- */
.fcta{background:var(--r700);color:#fff;}
.fcta::before{content:"";position:absolute;inset:0;background:url("../images/banners/warehouse-pallets-floor.webp") center/cover no-repeat;opacity:.16;mix-blend-mode:luminosity;transform:none;width:auto;height:auto;left:0;top:0;}
.fcta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(200,13,21,.2),rgba(131,20,25,.55));pointer-events:none;}
.fcta .wrap{position:relative;z-index:1;}
.fcta .lede{color:rgba(255,255,255,.85);}
.fcta .btn--primary{background:var(--red);color:#fff;border:1px solid rgba(255,255,255,.35);}
.fcta .btn--primary:hover{background:var(--r500);}
.fcta .btn--onDark{border-color:rgba(255,255,255,.45);}
.fcta .btn--onDark:hover{background:rgba(255,255,255,.1);border-color:#fff;}
.fcta p,.fcta small{color:rgba(255,255,255,.8);}
/* frame check: neon lines read stronger on the right; roadside → new-vs gap tightened */
.rsd__bg img{opacity:.8;}
.rsd__bg::after{background:linear-gradient(90deg,var(--n950) 0%,var(--n950) 38%,rgba(14,14,17,.45) 66%,rgba(14,14,17,.2) 100%);}
#roadside.section--tight{padding-bottom:var(--sec-tight);}
/* mobile trust cells: icon above copy, left-aligned, so the title gets the full width */
@media (max-width:767px){
  .trust__list li,.trust__list li:last-child{flex-direction:column;align-items:flex-start;gap:10px;text-align:left;}
  .trust__list li>.trust__ico{width:32px;height:32px;}
  .trust__list li>.trust__ico svg{width:16px;height:16px;}
}

/* ==========================================================================
   42. HERO FINDER CARD — match the "Container" design frame
   Scoped to .hero__find so the drawer version is untouched.
   ========================================================================== */
.hero__find .qf{overflow:visible;padding:26px 26px 18px;border:1px solid #2A2A2E;border-radius:8px;background:#0E0E11;}
/* terminal caps sit fully above the card edge, as drawn */
.hero__find .qf .plate__terminals{top:-14px;left:26px;right:26px;}
.hero__find .qf .term{width:36px;height:16px;border-radius:3px 3px 0 0;box-shadow:none;}
.hero__find .qf .term::after{content:none;}
.hero__find .qf .term{background:#2F6BFF;}
.hero__find .qf .term--pos{background:var(--red);}

.hero__find .qf__hd{margin-bottom:18px;}
.hero__find .qf__title{font-size:28px;letter-spacing:.005em;}
.hero__find .qf__meter{gap:4px;padding:4px;border:1.5px solid #3A3A3F;border-radius:3px;}
.hero__find .qf__meter::after{background:#3A3A3F;width:3px;height:9px;}
.hero__find .qf__meter i{width:10px;height:13px;background:#222226;}
.hero__find .qf__meter i.on{background:var(--red);}

.hero__find .qf__legend{font-size:15px;font-weight:400;color:#E4E4E7;margin-bottom:10px;}
.hero__find .qf__tiles{gap:10px;}
.hero__find .qf-tile__in{min-height:90px;padding:14px 12px 13px;gap:10px;background:#141417;border:1px solid #2E2E32;
  font-size:15px;font-weight:400;line-height:1.3;color:#E4E4E7;border-radius:4px;}
.hero__find .qf-tile__in svg{width:22px;height:22px;color:#A1A1AA;}
.hero__find .qf-tile__in::after{top:11px;right:11px;width:15px;height:15px;background:transparent;border:1.5px solid #52525B;}
.hero__find .qf-tile input:checked+.qf-tile__in{background:#232327;border-color:#fff;box-shadow:none;color:#fff;}
.hero__find .qf-tile input:checked+.qf-tile__in svg{color:#fff;}
.hero__find .qf-tile input:checked+.qf-tile__in::after{border-color:#fff;background:#fff;box-shadow:inset 0 0 0 3px #232327;}
@media (hover:hover) and (pointer:fine){.hero__find .qf-tile:hover input:not(:checked)+.qf-tile__in{border-color:#52525B;background:#18181B;}}

.hero__find .qf__fields{gap:14px 10px;margin:18px 0 22px;}
.hero__find .qf-field label{font-size:15px;color:#fff;}
.hero__find .qf-field label span{color:#71717A;}
.hero__find .qf-field select,.hero__find .qf-field input{height:46px;background-color:#18181B;border:1px solid #3F3F46;color:#fff;font-size:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23FFFFFF' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");}
.hero__find .qf-field select:disabled{background-color:#111114;border-color:#27272A;color:#71717A;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2352525B' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");}
@media (hover:hover) and (pointer:fine){.hero__find .qf-field select:not(:disabled):hover{border-color:#71717A;}}

/* the CTA stays red at every step, as drawn; an early click focuses the next
   field and shows the hint (handled in site.js) */
.hero__find .qf__go{--bh:50px;font-size:16px;}
.hero__find .qf__go[aria-disabled="true"]{background:var(--red);color:#fff;cursor:pointer;box-shadow:none;}
.hero__find .qf__go[aria-disabled="true"] .btn__ico{background:rgba(255,255,255,.22);color:#fff;}
.hero__find .qf__go[aria-disabled="true"]:hover{background:var(--r700);}
.hero__find .qf__go:not([aria-disabled="true"]){box-shadow:none;}
.hero__find .qf__hint{margin-top:12px;font-size:15px;color:#A1A1AA;}

.hero__find .qf__alt{margin-top:14px;padding-top:14px;border-top:1px solid #2A2A2E;}
.hero__find .qf__alt-a{font-size:15.5px;font-weight:500;color:#fff;text-decoration:none;}
.hero__find .qf__alt-a svg{width:14px;height:14px;color:var(--red);}
@media (hover:hover) and (pointer:fine){.hero__find .qf__alt-a:hover{color:var(--r400);}}
/* card proportions per the frame: wider column, two-line tile labels */
@media (min-width:1181px){ :root{--qf-w:clamp(420px,34vw,500px);} }
.hero__find .qf-tile__in>span{text-wrap:pretty;}
.hero__find .qf-tile__in{font-size:14.5px;padding:14px 11px 12px;}

/* ==========================================================================
   43. PRICING BAND — glass bolt (supplied as SVG) between copy and list
   ========================================================================== */
.pricing__in{grid-template-columns:minmax(0,1fr) clamp(220px,22vw,320px) minmax(0,.95fr);gap:clamp(24px,3.5vw,56px);align-items:center;}
.pricing__art{display:flex;justify-content:center;align-items:center;min-width:0;}
.pricing__art img{width:100%;max-width:320px;height:auto;filter:drop-shadow(0 30px 40px rgba(238,28,37,.18));}
@media (max-width:1100px){.pricing__in{grid-template-columns:minmax(0,1fr) clamp(180px,20vw,240px) minmax(0,1fr);}}
@media (max-width:900px){
  .pricing__in{grid-template-columns:1fr;}
  .pricing__art{order:-1;margin-bottom:-8px;}
  .pricing__art img{max-width:200px;}
}
@media (max-width:600px){.pricing__art img{max-width:160px;}}
/* frame check: bolt reads larger; copy column keeps its two CTAs on one row */
@media (min-width:1101px){
  .pricing__in{grid-template-columns:minmax(0,1.05fr) clamp(260px,25vw,360px) minmax(0,.9fr);gap:clamp(20px,3vw,44px);}
  .pricing__art img{max-width:380px;}
  .pricing__acts .btn{padding-inline:22px;}
}

/* ==========================================================================
   44. FOOTER v2 — structured from the site map. Scoped to .ft--v2 / .ft2__*
   so nothing above the footer is touched. Reuses .ft tokens, .ft__social,
   .ft__bot, .ft__legal and .confirm.
   ========================================================================== */
.ft--v2{font-size:14.5px;}
.ft2__top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr) minmax(0,.95fr);gap:clamp(28px,4vw,72px);
  padding-block:clamp(44px,5.5vw,72px) clamp(36px,4vw,52px);border-bottom:1px solid rgba(255,255,255,.1);}
.ft2__brand img{width:auto;height:72px;margin-bottom:18px;}
.ft2__brand p{max-width:36ch;line-height:1.55;color:var(--n400);margin-bottom:20px;}
.ft2__pending{margin-top:12px;font-size:12px;color:var(--n500);}
.ft--v2 h3{font-family:var(--body);font-weight:500;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:16px;}

/* conversion block: the number is the biggest thing in the footer */
.ft2__call{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:#fff;margin-bottom:18px;}
.ft2__call-ico{width:44px;height:44px;border-radius:99px;background:var(--red);display:grid;place-items:center;flex:none;color:#fff;
  transition:background-color 200ms ease,transform 240ms var(--ease-out);}
.ft2__call-ico svg{width:18px;height:18px;}
.ft2__call b{display:block;font-family:var(--display);font-weight:700;font-size:30px;line-height:1;letter-spacing:.01em;}
.ft2__call small{display:block;font-size:13px;color:var(--n400);margin-top:4px;}
@media (hover:hover) and (pointer:fine){.ft2__call:hover .ft2__call-ico{background:var(--r700);transform:scale(1.06);} .ft2__call:hover b{color:var(--r400);}}
.ft2__lines li,.ft2__hours li{display:flex;gap:11px;align-items:flex-start;line-height:1.5;}
.ft2__lines li+li,.ft2__hours li+li{margin-top:10px;}
.ft2__lines svg,.ft2__hours svg{width:14px;height:14px;color:var(--r500);flex:none;margin-top:4px;}
.ft2__lines a{color:var(--n200);}
.ft2__lines a:hover{color:var(--r400);}

.ft2__addr{font-size:17px;font-weight:500;color:#fff;line-height:1.4;margin-bottom:8px;}
.ft2__dir{display:inline-flex;align-items:center;gap:7px;color:var(--r400);font-weight:500;margin-bottom:18px;}
.ft2__dir svg{width:12px;height:12px;transition:transform 200ms var(--ease-out);}
.ft2__dir:hover{color:#fff;} .ft2__dir:hover svg{transform:translateX(3px);}
.ft2__hours b{color:#fff;font-weight:500;}

/* site map columns */
.ft2__nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,48px);padding-block:clamp(36px,4vw,52px);}
.ft2__col ul li+li{margin-top:9px;}
.ft2__col a{color:var(--n400);}
.ft2__col a:hover{color:var(--r400);}
.ft2__col a.is-key{color:#fff;font-weight:500;}

.ft--v2 .ft__bot{padding-block:22px;}
.ft--v2 .ft__legal{gap:8px 24px;}

@media (max-width:1000px){
  .ft2__top{grid-template-columns:1fr 1fr;}
  .ft2__brand{grid-column:1 / -1;max-width:520px;}
  .ft2__nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px clamp(24px,4vw,48px);}
}
@media (max-width:560px){
  .ft2__top{grid-template-columns:1fr;gap:32px;}
  .ft2__nav{grid-template-columns:1fr 1fr;gap:28px 20px;}
  .ft2__call b{font-size:28px;}
}

/* ---- Finder: text inputs must not inherit the select chevron ----------- */
.hero__find .qf-field input[type="text"],.qf .qf-field input[type="text"]{background-image:none;padding-right:14px;}

/* ---- Finder result panel on the dark hero card: legible on #0E0E11 ------ */
.hero__find .qf-out__h{color:#fff;}
.hero__find .qf-out__p{color:#D4D4D8;}
.hero__find .qf-out__help{color:#A1A1AA;}
.hero__find .qf-out__k{color:var(--r400);}
.hero__find .qf-veh{background:#18181B;border-color:#2E2E32;color:#fff;}
.hero__find .qf-veh__k{color:#A1A1AA;}
.hero__find .qf-veh__v{color:#fff;}
.hero__find .qf-link{color:#fff;}
.hero__find .qf-out__acts .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3);}
.hero__find .qf-out__acts .btn--ghost .btn__ico{background:rgba(255,255,255,.14);color:#fff;}
.hero__find .qf-out__acts .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.07);}
.hero__find .qf-out__cat{color:#fff;border-color:rgba(255,255,255,.3);}

/* ==========================================================================
   45. SHOP BATTERIES — 8 products, grid + list view (Frame 77)
   ========================================================================== */
/* bar: filters apply on click; view toggle sits at the far right */
.shop__tools{display:flex;align-items:flex-end;gap:12px;flex:none;}
.shop__apply{--bh:46px;padding-inline:20px;gap:9px;}
.shop__apply svg{width:18px;height:18px;}
.shop__view{display:flex;gap:6px;margin-left:8px;}
.shop__vbtn{width:46px;height:46px;border:1px solid var(--rule-strong);border-radius:4px;background:var(--paper);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;
  transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease,transform 140ms var(--ease-out);}
.shop__vbtn svg{width:16px;height:16px;}
.shop__vbtn:hover{border-color:var(--ink);color:var(--ink);}
.shop__vbtn:active{transform:scale(.95);}
.shop__vbtn.is-on{background:var(--ink);border-color:var(--ink);color:#fff;}
.shop__vbtn:focus-visible{outline:3px solid var(--red);outline-offset:2px;}

/* grid: 2 rows of 4, cards separated by gap rather than hairlines (frame) */
@media (min-width:601px){ .shop__grid[data-view="grid"]{gap:14px;background:transparent;border:0;border-radius:0;overflow:visible;} }
.shop__grid[data-view="grid"] .pc{border:1px solid var(--rule);border-radius:4px;}
.pc__tag--recon{background:var(--n600);}
.pc--pending .pc__media{background:var(--n50);}
.pc--pending .pc__ph span{font-size:11px;}

/* ---- LIST VIEW — one product per row, scan left to right:
       photo · identity · spec · price · actions ------------------------------ */
.shop__grid[data-view="list"]{display:grid;grid-template-columns:1fr;gap:0;background:transparent;border:1px solid var(--rule);border-radius:4px;overflow:hidden;}
.shop__grid[data-view="list"] .shop__item+.shop__item{border-top:1px solid var(--rule);}
.shop__grid[data-view="list"] .pc{display:grid;grid-template-columns:132px minmax(0,1.4fr) minmax(0,.9fr) auto auto;align-items:center;gap:clamp(16px,2vw,32px);
  padding:14px clamp(16px,2vw,24px) 14px 14px;border:0;border-radius:0;background:var(--paper);}
.shop__grid[data-view="list"] .pc:hover{transform:none;box-shadow:none;background:var(--n50);}
.shop__grid[data-view="list"] .pc__media{aspect-ratio:4/3;width:132px;border:1px solid var(--rule);border-radius:3px;background:#fff;}
.shop__grid[data-view="list"] .pc__media img{padding:6%;}
.shop__grid[data-view="list"] .pc__tag{top:6px;left:6px;padding:3px 6px;font-size:9.5px;}
.shop__grid[data-view="list"] .pc__ph svg{width:30px;height:22px;}
.shop__grid[data-view="list"] .pc__ph span{display:none;}
.shop__grid[data-view="list"] .pc__bd{display:contents;}
.shop__grid[data-view="list"] .pc__brand,.shop__grid[data-view="list"] .pc__name{grid-column:2;}
.shop__grid[data-view="list"] .pc__brand{margin:0;align-self:end;}
.shop__grid[data-view="list"] .pc__name{margin:2px 0 0;align-self:start;font-size:16.5px;}
.shop__grid[data-view="list"] .pc__spec{grid-column:3;grid-row:1 / span 2;margin:0;}
.shop__grid[data-view="list"] .pc__price{grid-column:4;grid-row:1 / span 2;margin:0;justify-self:end;white-space:nowrap;}
.shop__grid[data-view="list"] .pc__amt{font-size:28px;}
.shop__grid[data-view="list"] .pc__acts{grid-column:5;grid-row:1 / span 2;display:flex;gap:8px;}
.shop__grid[data-view="list"] .pc__acts .btn{width:auto;white-space:nowrap;}
.shop__grid[data-view="list"] .pc__media,.shop__grid[data-view="list"] .pc__media--img{grid-column:1;grid-row:1 / span 2;}
/* implicit rows for the identity stack */
.shop__grid[data-view="list"] .pc{grid-template-rows:auto auto;}

@media (max-width:1100px){
  .shop__grid[data-view="list"] .pc{grid-template-columns:110px minmax(0,1.3fr) minmax(0,.9fr) auto;}
  .shop__grid[data-view="list"] .pc__media{width:110px;}
  .shop__grid[data-view="list"] .pc__acts{grid-column:2 / -1;grid-row:3;justify-content:flex-start;margin-top:4px;}
  .shop__grid[data-view="list"] .pc{grid-template-rows:auto auto auto;}
  .shop__grid[data-view="list"] .pc__media{grid-row:1 / span 3;}
}
@media (max-width:767px){
  .shop__tools{width:100%;order:-1;justify-content:space-between;}
  .shop__apply{flex:1;}
  .shop__view{margin-left:0;}
}
@media (max-width:640px){
  .shop__grid[data-view="list"] .pc{grid-template-columns:90px minmax(0,1fr);grid-template-rows:auto auto auto auto auto;gap:6px 14px;padding:12px;}
  .shop__grid[data-view="list"] .pc__media{width:90px;grid-row:1 / span 3;}
  .shop__grid[data-view="list"] .pc__brand,.shop__grid[data-view="list"] .pc__name,.shop__grid[data-view="list"] .pc__spec,.shop__grid[data-view="list"] .pc__price,.shop__grid[data-view="list"] .pc__acts{grid-column:2;grid-row:auto;justify-self:start;}
  .shop__grid[data-view="list"] .pc__acts{flex-wrap:wrap;margin-top:6px;}
  .shop__grid[data-view="list"] .pc__acts .btn{--bh:42px;}
}
/* grid on phones keeps the existing snap carousel; list view stacks instead */
@media (max-width:600px){
  .shop__grid[data-view="list"]{display:grid;overflow:hidden;margin-inline:0;padding:0;scroll-snap-type:none;}
  .shop__grid[data-view="list"] .shop__item{flex:none;}
}
.shop__grid[data-view="list"] .pc{row-gap:2px;}
/* phones: apply button follows the filters it applies */
@media (max-width:767px){ .shop__tools{order:1;} }

/* ---- Shop: populated state (sample data) ---------------------------------- */
.pc__chip{display:inline-block;padding:2px 8px;border:1px solid var(--rule);border-radius:2px;font-size:12px;letter-spacing:.04em;color:var(--ink-3);background:var(--n50);}
.pc__amt small{font-size:.62em;font-weight:700;letter-spacing:0;}
.pc__price{justify-content:space-between;align-items:baseline;}
.pc__rating{display:inline-flex;align-items:center;gap:2px;font-size:12.5px;color:var(--ink-3);}
.pc__rating i{display:inline-flex;width:13px;height:13px;color:var(--red);}
.pc__rating i.is-off{color:var(--n300);}
.pc__rating i svg{width:13px;height:13px;}
.pc__rating>span{margin-left:4px;}
.shop__grid[data-view="list"] .pc__rating{display:none;}
.shop__grid[data-view="list"] .pc__price{justify-content:flex-end;}
.pc__amt{gap:0;} .pc__amt small{margin-left:1px;}

/* ==========================================================================
   46. PRICING BAND — per "Section" frame: bigger bolt, side-by-side CTAs,
   uppercase list headings, red glows on the grid, animated liquid.
   ========================================================================== */
.pricing{position:relative;overflow:hidden;}
.pricing::before{opacity:1;background:
  radial-gradient(520px 380px at 6% 10%,rgba(238,28,37,.28),transparent 68%),
  radial-gradient(560px 420px at 50% 55%,rgba(238,28,37,.22),transparent 70%);}
@media (min-width:1101px){
  .pricing__in{grid-template-columns:minmax(0,1fr) clamp(300px,27vw,420px) minmax(0,1fr);gap:clamp(28px,3.4vw,56px);align-items:center;}
  .pricing__art img,.pricing__art .bolt{max-width:440px;}
}
.pricing__copy .d-2{max-width:12ch;}
.pricing__acts{flex-wrap:nowrap;gap:12px;}
.pricing__acts .btn{white-space:nowrap;}
.pricing__art .bolt{width:100%;height:auto;max-width:440px;display:block;overflow:visible;filter:drop-shadow(0 30px 40px rgba(238,28,37,.16));}

/* list: uppercase Helvetica headings as drawn */
.fproc h3{font-family:var(--body);font-weight:700;text-transform:uppercase;font-size:clamp(20px,1.7vw,26px);letter-spacing:.01em;line-height:1.1;}
.fproc li{gap:22px;padding:22px 0;}
.fproc__n{width:36px;height:36px;font-size:14px;}

/* ---- liquid animation: the wave drifts one wavelength (67.4 units) and
   loops seamlessly; the whole fill bobs a few units on a slower cycle;
   the glow breathes. All transform/opacity only. ------------------------ */
@keyframes bolt-wave{from{transform:translateX(0)}to{transform:translateX(-67.4px)}}
@keyframes bolt-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes bolt-glow{0%,100%{opacity:.85}50%{opacity:1}}
.bolt__liquid{animation:bolt-wave 3.6s linear infinite;}
.bolt__bob{animation:bolt-bob 5.2s ease-in-out infinite;}
.bolt__glow{animation:bolt-glow 4s ease-in-out infinite;transform-origin:center;}
@media (prefers-reduced-motion:reduce){.bolt__liquid,.bolt__bob,.bolt__glow{animation:none!important;}}

/* ---- tablet: copy + bolt share a row, list runs full width beneath ------ */
@media (max-width:1100px){
  .pricing__in{grid-template-columns:minmax(0,1fr) clamp(200px,28vw,280px);gap:clamp(24px,4vw,40px) clamp(20px,4vw,48px);align-items:center;}
  .pricing__art{order:0;margin:0;justify-self:end;}
  .pricing__art .bolt{max-width:280px;}
  .pricing__send{grid-column:1 / -1;}
  .pricing__copy .d-2{max-width:14ch;}
  .pricing__acts{flex-wrap:wrap;}
}
/* ---- phones: copy, bolt (small, left-anchored beside the eyebrow), list -- */
@media (max-width:767px){
  .pricing__in{grid-template-columns:1fr;gap:28px;}
  .pricing__art{order:-1;justify-self:start;margin:0 0 -8px;}
  .pricing__art .bolt{max-width:150px;filter:drop-shadow(0 18px 28px rgba(238,28,37,.2));}
  .pricing__copy .d-2{max-width:none;}
  .pricing__acts .btn{width:100%;}
  .pricing::before{background:radial-gradient(360px 260px at 20% 12%,rgba(238,28,37,.26),transparent 70%);}
  .fproc h3{font-size:19px;}
}
/* frame check: copy column needs room for a 3-line heading and both CTAs;
   the bolt canvas overshoots its column so the glow bleeds like the frame */
@media (min-width:1101px){
  .pricing__in{grid-template-columns:minmax(0,1.15fr) 300px minmax(0,1fr);gap:clamp(24px,3vw,48px);}
  .pricing__art{overflow:visible;}
  .pricing__art .bolt{width:165%;max-width:none;margin-left:-32%;}
  .pricing__copy .d-2{max-width:15ch;}
  .pricing{padding-block:clamp(80px,8.5vw,124px);}
}
@media (min-width:1101px) and (max-width:1300px){
  .pricing__in{grid-template-columns:minmax(0,1.2fr) 240px minmax(0,1fr);}
  .pricing__acts{flex-wrap:wrap;}
}
@media (min-width:768px) and (max-width:1100px){ .pricing__copy .d-2{max-width:16ch;} }

/* ==========================================================================
   47. FAMILY — pinned photograph, scrolling copy (Section frame)
   The image column sticks below the collapsed header while the longer copy
   column scrolls past it. Two-column widths only; stacks as before on phones.
   ========================================================================== */
@media (min-width:921px){
  #family .split{align-items:start;}
  #family .split__media{position:sticky;top:calc(var(--header-h) + 24px);align-self:start;}
  /* the wipe reveal clip-path must not create a containing block that breaks sticky */
  #family .split__media[data-rv="wipe"].rv-in{clip-path:none;}
}
@media (prefers-reduced-motion:reduce){ #family .split__media{position:static;} }

/* ---- Roadside: jumper-leads photograph behind the card (Frame 124) ------ */
.rsd__bg--photo img{opacity:.55;object-position:60% 40%;filter:brightness(.72) contrast(1.08);}
.rsd__bg--photo::after{background:
  linear-gradient(90deg,rgba(14,14,17,.9) 0%,rgba(14,14,17,.72) 38%,rgba(14,14,17,.42) 70%,rgba(14,14,17,.5) 100%),
  linear-gradient(180deg,rgba(14,14,17,.35) 0%,transparent 40%,rgba(14,14,17,.55) 100%);}
.rsd--v2 .rsd__tiles li{background:rgba(14,14,17,.62);}
@media (max-width:767px){
  .rsd__bg--photo img{object-position:55% 35%;opacity:.45;}
  .rsd__bg--photo::after{background:linear-gradient(180deg,rgba(14,14,17,.8) 0%,rgba(14,14,17,.7) 60%,rgba(14,14,17,.85) 100%);}
}
/* frame check: the photograph should read — red clamps visible through the copy */
.rsd__bg--photo img{opacity:.9;filter:brightness(.82) contrast(1.05) saturate(.95);}
.rsd__bg--photo::after{background:
  linear-gradient(90deg,rgba(14,14,17,.78) 0%,rgba(14,14,17,.55) 40%,rgba(14,14,17,.22) 72%,rgba(14,14,17,.32) 100%),
  linear-gradient(180deg,rgba(14,14,17,.25) 0%,transparent 45%,rgba(14,14,17,.45) 100%);}
.rsd--v2 .rsd__tiles li{background:rgba(14,14,17,.72);}

/* ==========================================================================
   48. NEW vs RECONDITIONED — Section frame: neon battery art + ribbed panel
   in the reconditioned card; no centre divider.
   ========================================================================== */
.vs{gap:18px;}
.vs__div{display:none;}
.opt--dark{padding-right:clamp(24px,3vw,40px);}
/* ribbed panel over the right third, like the frame's vertical louvres */
.opt__ribs{position:absolute;top:0;bottom:0;right:0;width:32%;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 22px),linear-gradient(90deg,transparent,rgba(14,14,17,.35));}
/* neon battery, anchored bottom-right, clear of the copy column */
.opt__art{position:absolute;right:clamp(12px,2.2vw,30px);bottom:clamp(8px,1.6vw,20px);width:clamp(120px,15vw,190px);z-index:1;pointer-events:none;}
.opt__art img{width:100%;height:auto;display:block;filter:drop-shadow(0 0 18px rgba(238,28,37,.5));}
.opt--dark .opt__p,.opt--dark .opt__list{max-width:calc(100% - clamp(120px,15vw,190px) + 20px);}
.opt--dark .opt__ft{max-width:calc(100% - clamp(120px,15vw,190px) + 20px);}
.opt--dark .opt__ft .btn{white-space:nowrap;}
@media (max-width:1100px){
  .opt__art{width:120px;}
  .opt--dark .opt__p,.opt--dark .opt__list,.opt--dark .opt__ft{max-width:none;}
  .opt--dark .opt__list{padding-right:130px;}
}
@media (max-width:860px){
  .opt__art{width:100px;right:14px;bottom:auto;top:16px;}
  .opt--dark .opt__hd{padding-right:110px;}
  .opt--dark .opt__list{padding-right:0;}
  .opt__ribs{width:40%;}
}
@media (max-width:430px){
  .opt__art{width:80px;}
  .opt--dark .opt__hd{padding-right:90px;}
  .opt--dark .opt__ft .btn{white-space:normal;}
}
/* specificity fix: §41 made every child of the dark card position:relative */
.opt--dark>.opt__art{position:absolute;z-index:1;}
.opt--dark>.opt__ribs{position:absolute;z-index:0;}
@media (min-width:861px){
  #new-vs-reconditioned .sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end;}
  #new-vs-reconditioned .sec-head .lede{margin:0 0 4px;}
}
/* frame check: the battery outline should read at ~160px; its canvas is mostly glow */
.opt__art{width:clamp(220px,23vw,310px);right:clamp(0px,1vw,14px);bottom:clamp(-6px,-.4vw,0px);}
.opt--dark .opt__p,.opt--dark .opt__list,.opt--dark .opt__ft{max-width:calc(100% - 150px);}
@media (max-width:1100px){.opt__art{width:200px;} .opt--dark .opt__list{padding-right:0;}}
@media (max-width:860px){.opt__art{width:170px;top:auto;bottom:-10px;right:0;} .opt--dark .opt__hd{padding-right:0;} .opt--dark .opt__p,.opt--dark .opt__list,.opt--dark .opt__ft{max-width:calc(100% - 120px);}}
@media (max-width:430px){.opt__art{width:140px;} .opt--dark .opt__p,.opt--dark .opt__list{max-width:none;} .opt--dark .opt__ft{max-width:none;padding-right:110px;}}

/* ==========================================================================
   49. RECONDITIONED CARD — Article frame: flat black, red glow, louvres,
   neon battery. The wave photograph is retired from this card.
   ========================================================================== */
.opt--dark{background:#0E0E11;border-color:#1F1F23;}
.opt--dark::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(420px 300px at 0% 0%,rgba(238,28,37,.42),transparent 70%);}
.opt--dark>.opt__ribs{width:36%;
  background:
    radial-gradient(260px 300px at 85% 95%,rgba(238,28,37,.45),transparent 70%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 21px),
    linear-gradient(90deg,rgba(14,14,17,0),rgba(14,14,17,.55) 30%,rgba(14,14,17,.7));}
.opt--dark>.opt__ribs::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 20px,rgba(0,0,0,.35) 20px 21px);}
.opt--dark .chip{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;padding:8px 12px;background:rgba(255,255,255,.14);border-radius:3px;}
.opt .chip{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;padding:8px 12px;}
.opt h3{font-size:clamp(26px,2.6vw,32px);line-height:1;}
.opt--dark .opt__ft .btn{width:100%;max-width:none;justify-content:center;}
.opt--dark .opt__ft{max-width:calc(100% - 150px);}
@media (max-width:860px){.opt--dark .opt__ft{max-width:calc(100% - 120px);}}
@media (max-width:430px){.opt--dark .opt__ft{max-width:none;padding-right:0;} .opt__art{width:120px;bottom:auto;top:12px;right:8px;} .opt--dark .opt__hd{padding-right:100px;}}

/* ==========================================================================
   50. REVIEWS — Frame 74: red count, Helvetica summary heading, joined
   card grid with shared hairlines, white surface.
   ========================================================================== */
#reviews{background:var(--paper);}
#reviews .sec-head{margin-bottom:clamp(24px,3vw,40px);}
#reviews .rsum{grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3.4vw,44px);padding:clamp(24px,3vw,40px);border-radius:4px;background:var(--paper);margin-bottom:clamp(22px,2.8vw,32px);}
#reviews .rsum__score{padding:12px clamp(24px,3vw,40px) 12px 0;min-width:170px;}
#reviews .rsum__n{color:var(--red);font-size:clamp(52px,5.4vw,68px);}
#reviews .rsum__lbl{font-size:13px;letter-spacing:.12em;margin:14px 0 8px;font-weight:400;}
#reviews .rsum__h{font-family:var(--body);font-weight:700;font-size:clamp(22px,2.2vw,28px);text-transform:uppercase;letter-spacing:.005em;line-height:1.15;margin-bottom:10px;color:var(--ink);}
#reviews .rsum__body .body-sm{max-width:none;font-size:15.5px;line-height:1.55;}
#reviews .rsum .btn--dark{background:var(--red);}
#reviews .rsum .btn--dark:hover{background:var(--r700);}
#reviews .rsum .btn--ghost{background:var(--ink);color:#fff;border-color:var(--ink);}
#reviews .rsum .btn--ghost .btn__ico{background:rgba(255,255,255,.16);color:#fff;}
#reviews .rsum .btn--ghost:hover{background:var(--n800);}
/* joined grid: one border around, hairlines between */
#reviews .reviews{gap:0;border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:var(--rule);grid-gap:1px;}
#reviews .rev{border:0;border-radius:0;padding:26px 24px 22px;}
@media (hover:hover) and (pointer:fine){#reviews .rev:hover{transform:none;box-shadow:none;background:var(--n50);}}
#reviews .rev__q{font-size:16px;line-height:1.55;color:var(--ink);}
#reviews .rev__nm{letter-spacing:.1em;font-size:13px;}
#reviews .rev__dt{font-size:13px;}
#reviews .rev__av{background:var(--ink);}
@media (max-width:680px){#reviews .rsum__score{padding:0 0 16px;border-right:0;border-bottom:1px solid var(--rule);min-width:0;}}

/* ==========================================================================
   51. RECYCLING — Section frame: neon lines at full strength, opaque cards,
   lede on the right, and an animated dashed "current" connecting the steps.
   ========================================================================== */
#recycling .recycle__bg img{opacity:1;filter:none;}
#recycling .recycle__bg::after{background:linear-gradient(180deg,rgba(14,14,17,.55) 0%,rgba(14,14,17,.15) 30%,rgba(14,14,17,.15) 70%,rgba(14,14,17,.55) 100%);}
@media (min-width:861px){
  #recycling .sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end;}
  #recycling .sec-head .lede{margin:0 0 4px;color:#fff;}
}
#recycling .flow{gap:clamp(28px,3vw,44px);}
#recycling .fnode{background:#17171A;border:1px solid rgba(255,255,255,.08);backdrop-filter:none;padding:clamp(26px,2.8vw,36px) clamp(24px,2.6vw,32px);border-radius:4px;}
#recycling .fnode h3{font-size:clamp(24px,2.4vw,30px);margin-bottom:14px;}
#recycling .fnode p{color:var(--n400);}

/* connector: replaces the chevron. A 2px dashed red line spans the gap,
   draws in from the left when the row reveals, then a slow dash-flow runs
   through it like current — direction card 1 → 3. */
#recycling .fnode:not(:last-child)::after{
  content:"";position:absolute;top:50%;left:100%;width:clamp(28px,3vw,44px);height:2px;border:0;rotate:0deg;transform:translateY(-50%) scaleX(0);transform-origin:left center;
  background:repeating-linear-gradient(90deg,var(--red) 0 8px,transparent 8px 14px);background-size:14px 2px;
  filter:drop-shadow(0 0 6px rgba(238,28,37,.7));
  transition:transform 700ms var(--ease-settle);}
#recycling .flow.rv-in .fnode:nth-child(1)::after{transform:translateY(-50%) scaleX(1);transition-delay:420ms;animation:current-flow 1.1s linear 1.1s infinite;}
#recycling .flow.rv-in .fnode:nth-child(2)::after{transform:translateY(-50%) scaleX(1);transition-delay:900ms;animation:current-flow 1.1s linear 1.6s infinite;}
@keyframes current-flow{from{background-position:0 0}to{background-position:14px 0}}
/* the pulse arrives: each card's border lights briefly as the current reaches it */
#recycling .fnode{transition:border-color 400ms ease,box-shadow 400ms ease;}
#recycling .flow.rv-in .fnode:nth-child(2){animation:node-arrive 1s ease 1s 1;}
#recycling .flow.rv-in .fnode:nth-child(3){animation:node-arrive 1s ease 1.6s 1;}
@keyframes node-arrive{0%,100%{border-color:rgba(255,255,255,.08);box-shadow:none}40%{border-color:rgba(238,28,37,.7);box-shadow:0 0 0 1px rgba(238,28,37,.35),0 0 28px rgba(238,28,37,.25)}}

@media (max-width:820px){
  #recycling .flow{gap:28px;}
  #recycling .fnode:not(:last-child)::after{top:100%;left:50%;width:2px;height:28px;transform:translateX(-50%) scaleY(0);transform-origin:center top;
    background:repeating-linear-gradient(180deg,var(--red) 0 8px,transparent 8px 14px);background-size:2px 14px;}
  #recycling .flow.rv-in .fnode:nth-child(1)::after,#recycling .flow.rv-in .fnode:nth-child(2)::after{transform:translateX(-50%) scaleY(1);animation-name:current-flow-v;}
  @keyframes current-flow-v{from{background-position:0 0}to{background-position:0 14px}}
}
@media (prefers-reduced-motion:reduce){
  #recycling .fnode::after{transform:translateY(-50%) scaleX(1)!important;animation:none!important;transition:none!important;}
  #recycling .fnode{animation:none!important;}
}

/* ==========================================================================
   52. LOCATION · FAQ · FOOTER — Frames 65 / Section4 / Footer
   ========================================================================== */
/* ---- Location: open layout, map left, hairline divider, info right ------ */
#location .loc{border:0;border-radius:0;background:transparent;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}
#location .loc__map{min-height:clamp(360px,46vw,680px);border:1px solid var(--rule);}
#location .loc__map iframe{filter:none;}
#location .loc__info{border-left:1px solid var(--rule);padding:clamp(20px,3vw,44px) 0 clamp(20px,3vw,44px) clamp(24px,3vw,40px);gap:22px;}
#location .loc__blk h3{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.08em;color:var(--ink-3);margin-bottom:12px;}
#location .loc__blk:not(:first-child) h3{font-family:var(--body);font-weight:400;font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--ink-3);margin-bottom:6px;}
#location .loc__addr{font-family:var(--body);font-weight:500;font-size:clamp(18px,1.5vw,20px);text-transform:none;line-height:1.35;color:var(--ink);}
#location .hours--light li{padding:12px 0;font-size:15.5px;}
#location .hours--light li span:first-child{color:var(--ink);}
#location .hours--light li b{font-family:var(--body);font-weight:400;font-size:17px;color:var(--ink);}
#location .hours--light li.is-shut b{color:var(--n500);}
#location .loc__blk--area .body-sm{font-size:16px;color:var(--ink);}
#location .loc__blk--area{display:grid;gap:10px;}
#location .loc__blk--area .hero__phone{display:inline-flex;}
#location .loc__blk--area .hero__phone .lbl{font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.08em;}
#location .loc__blk--area .hero__phone .num{font-family:var(--body);font-weight:400;font-size:18px;}
#location .loc__contact{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 28px;}
#location .loc__mail{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-size:18px;}
#location .loc__mail svg{width:15px;height:15px;color:var(--red);}
#location .loc__mail:hover{color:var(--red);}
@media (max-width:940px){#location .loc__info{border-left:0;border-top:1px solid var(--rule);padding:24px 0 0;} #location .loc__map{min-height:340px;}}

/* ---- FAQ ------------------------------------------------------------------- */
#faq .faq__btn{font-size:17px;font-weight:500;padding:24px 0;}
#faq .faq__ico{width:32px;height:32px;border-color:var(--ink);}
#faq .acard h3{font-family:var(--display);font-weight:700;font-size:22px;text-transform:uppercase;}
#faq .acard .btn{--bh:52px;}

/* ---- Footer: five nav columns, larger headings, single-line address ------ */
.ft2__nav--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(20px,2.6vw,40px);}
.ft2__nav--5 h3{font-family:var(--body);font-weight:400;font-size:16px;letter-spacing:0;text-transform:uppercase;color:#fff;margin-bottom:18px;}
.ft2__nav--5 a{color:var(--n300);}
.ft2__col ul li+li{margin-top:10px;}
.ft2__addr{font-size:17px;font-weight:400;}
.ft2__dir{color:var(--r400);font-weight:400;}
.ft--v2 h3{font-family:var(--body);font-weight:400;font-size:13px;letter-spacing:.1em;}
.ft2__call b{font-family:var(--body);font-weight:500;font-size:22px;}
.ft2__call-ico{background:transparent;border:1px solid rgba(238,28,37,.6);color:var(--r500);width:40px;height:40px;}
.ft2__top{padding-block:clamp(40px,5vw,60px) clamp(32px,4vw,44px);}
@media (max-width:1000px){.ft2__nav--5{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:640px){.ft2__nav--5{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* footer nav headings: plain 16px uppercase (rule order fix) */
.ft--v2 .ft2__nav--5 h3{font-size:16px;letter-spacing:0;font-weight:400;}
@media (min-width:861px){
  #location .sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end;}
  #location .sec-head .lede{margin:0 0 4px;}
}

/* ---- Reconditioned card: the neon battery spans the full card height ----- */
.opt--dark>.opt__art{top:0;bottom:0;right:0;width:auto;height:100%;display:flex;align-items:flex-end;justify-content:flex-end;}
.opt--dark>.opt__art img{height:100%;width:auto;max-width:none;object-fit:contain;object-position:right bottom;}
.opt--dark .opt__p,.opt--dark .opt__list,.opt--dark .opt__ft{max-width:calc(100% - clamp(150px,18vw,220px));}
@media (max-width:1100px){.opt--dark .opt__p,.opt--dark .opt__list,.opt--dark .opt__ft{max-width:calc(100% - 160px);}}
@media (max-width:860px){.opt--dark>.opt__art{height:100%;top:0;bottom:0;} .opt--dark .opt__p,.opt--dark .opt__list,.opt--dark .opt__ft{max-width:calc(100% - 130px);} .opt--dark .opt__hd{padding-right:0;}}
@media (max-width:430px){.opt--dark>.opt__art{height:62%;top:auto;bottom:0;opacity:.85;} .opt--dark .opt__p,.opt--dark .opt__list{max-width:none;} .opt--dark .opt__ft{max-width:none;padding-right:0;}}
.opt--dark .opt__p,.opt--dark .opt__list,.opt--dark .opt__ft{max-width:calc(100% - clamp(140px,16vw,190px));}

/* ==========================================================================
   53. RESPONSIVE PASS — tablet + mobile. Desktop untouched.
   Several section rules were written with #id specificity after the
   original breakpoints and were quietly beating them; these re-assert the
   small-screen layouts with matching specificity.
   ========================================================================== */
/* ---- Location: stack below 940 (was locked side-by-side) ------------------ */
@media (max-width:940px){
  #location .loc{grid-template-columns:1fr;}
  #location .loc__map{min-height:clamp(280px,60vw,420px);}
  #location .loc__info{border-left:0;border-top:0;padding:8px 0 0;}
  #location .loc__blk--area .loc__contact{align-items:flex-start;flex-direction:column;gap:12px;}
}
@media (max-width:480px){
  #location .loc__blk .btn-row .btn{width:100%;}
  #location .hours--light li{font-size:15px;}
  #location .hours--light li b{font-size:16px;}
}

/* ---- Reviews summary: single column below 680 (was locked two-column) ---- */
@media (max-width:680px){
  #reviews .rsum{grid-template-columns:1fr;gap:16px;padding:22px 20px;}
  #reviews .rsum__score{display:flex;align-items:center;gap:16px;padding:0 0 16px;border-right:0;border-bottom:1px solid var(--rule);min-width:0;}
  #reviews .rsum__n{font-size:48px;}
  #reviews .rsum__lbl{margin:0;}
  #reviews .rsum__score .stars{margin-left:auto;}
  #reviews .rsum__body .btn-row .btn{width:100%;}
}

/* ---- Reconditioned card: copy runs full width on phones, art tucks in ---- */
@media (max-width:430px){
  .opt--dark .opt__p,.opt--dark .opt__list,.opt--dark .opt__ft{max-width:none;}
  .opt--dark>.opt__art{height:58%;top:auto;bottom:0;right:-6px;opacity:.7;}
  .opt--dark>.opt__ribs{width:44%;}
  .opt--dark .opt__ft .btn{width:100%;white-space:normal;text-align:center;line-height:1.25;padding-block:12px;}
  .opt--dark .opt__hd{padding-right:0;flex-wrap:wrap;gap:10px;}
}

/* ---- Shop grid: three-up on tablet so eight cards is three rows, not four - */
@media (min-width:768px) and (max-width:1023px){
  .shop__grid[data-view="grid"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
  .shop__grid[data-view="grid"] .pc__bd{padding:14px 16px 16px;}
  .shop__grid[data-view="grid"] .pc__amt{font-size:26px;}
}

/* ---- Recycling: cards stack (with vertical connectors) below 1024 --------- */
@media (min-width:821px) and (max-width:1023px){
  #recycling .flow{grid-template-columns:1fr;gap:28px;max-width:640px;}
  #recycling .fnode:not(:last-child)::after{top:100%;left:50%;width:2px;height:28px;transform:translateX(-50%) scaleY(0);transform-origin:center top;
    background:repeating-linear-gradient(180deg,var(--red) 0 8px,transparent 8px 14px);background-size:2px 14px;}
  #recycling .flow.rv-in .fnode:nth-child(1)::after,#recycling .flow.rv-in .fnode:nth-child(2)::after{transform:translateX(-50%) scaleY(1);animation-name:current-flow-v;}
}

/* ---- Closing CTA: buttons stack cleanly on phones ------------------------- */
@media (max-width:640px){
  .fcta .btn-row{display:grid;grid-template-columns:1fr;gap:10px;width:100%;}
  .fcta .btn-row .btn{width:100%;}
}

/* ---- Pricing tablet: keep the two CTAs on one row where they fit ---------- */
@media (min-width:600px) and (max-width:1100px){ .pricing__acts{flex-wrap:wrap;} .pricing__acts .btn{white-space:nowrap;} }

/* ---- Roadside tiles: one column earlier, day strip stays readable --------- */
@media (max-width:900px){ .rsd--v2{padding:clamp(22px,4vw,32px);} }
@media (max-width:430px){ .opt--dark>.opt__art{height:50%;bottom:-8px;right:-10px;opacity:.55;} }

/* ==========================================================================
   54. PRICING BAND — bolt video replaces the animated SVG.
   The render has a black background, so it's screen-blended: black drops
   out and the grid/glow behind show through, leaving only the bolt and its
   glow. Reduced-motion users get the poster still instead.
   ========================================================================== */
.pricing__art{position:relative;}
.bolt-video,.bolt-still{display:block;width:165%;max-width:none;height:auto;margin-left:-32%;mix-blend-mode:screen;pointer-events:none;}
.bolt-still{display:none;}
@media (min-width:1101px){ .pricing__art .bolt-video,.pricing__art .bolt-still{width:165%;margin-left:-32%;} }
@media (max-width:1100px){ .bolt-video,.bolt-still{width:130%;max-width:360px;margin-left:-15%;} }
@media (max-width:767px){ .bolt-video,.bolt-still{width:220px;max-width:none;margin-left:-30px;} }
@media (prefers-reduced-motion:reduce){ .bolt-video{display:none;} .bolt-still{display:block;} }
/* screen-blend must see the section background: drop the stacking context
   that .pricing__in's z-index was creating (paint order still keeps ::before
   underneath because it comes first in the DOM) */
.pricing__in{z-index:auto;}
.pricing::before{z-index:auto;}
/* §54 (video) retired — restore the SVG's stacking so the section paints as before */
.pricing__in{z-index:1;}
.pricing::before{z-index:0;}

/* ==========================================================================
   55. QLD BATTERY REBRAND — new wordmark + QB range packshots
   The wordmark is wide (2.6:1) where the old battery mark was near-square,
   so it's sized by width; it reads on both light and dark surfaces as-is.
   ========================================================================== */
.brand img:is([src*="logo-qldbattery"],[data-asset*="logo-qldbattery"]){height:auto;width:clamp(128px,11vw,158px);}
.hdr.is-stuck .brand img:is([src*="logo-qldbattery"],[data-asset*="logo-qldbattery"]){height:auto;width:118px;}
@media (max-width:1180px){ .brand img:is([src*="logo-qldbattery"],[data-asset*="logo-qldbattery"]){width:124px;} .hdr.is-stuck .brand img:is([src*="logo-qldbattery"],[data-asset*="logo-qldbattery"]){width:110px;} }
@media (max-width:520px){ .brand img:is([src*="logo-qldbattery"],[data-asset*="logo-qldbattery"]),.hdr.is-stuck .brand img:is([src*="logo-qldbattery"],[data-asset*="logo-qldbattery"]){width:108px;} }
.drawer__top .brand img:is([src*="logo-qldbattery"],[data-asset*="logo-qldbattery"]){width:112px;height:auto;}
.ft__brand img:is([src*="logo-qldbattery"],[data-asset*="logo-qldbattery"]),.ft2__brand img:is([src*="logo-qldbattery"],[data-asset*="logo-qldbattery"]){height:auto;width:176px;}

/* QB packshots: full-colour product on the white plate, a touch larger */
.pc__media--img img:is([src*="product-qb-"],[data-asset*="product-qb-"]){padding:6% 7%;}
.pc__tag--agm{background:var(--ink);}
.pc__line{font-size:13px;color:var(--ink-3);margin:-8px 0 12px;}
.shop__grid[data-view="list"] .pc__line{grid-column:2;margin:2px 0 0;}
/* match the QB packshots' visual scale to the older range in the row below */
.pc__media--img img:is([src*="product-qb-"],[data-asset*="product-qb-"]){padding:0;transform:scale(1.08);}
.shop__grid[data-view="list"] .pc__media--img img:is([src*="product-qb-"],[data-asset*="product-qb-"]){transform:scale(1.04);}
/* list view: 12V·Ah line sits under the code/CCA chips in the spec column */
@media (min-width:1101px){
  .shop__grid[data-view="list"] .pc:has(.pc__line) .pc__spec{grid-row:1;align-self:end;}
  .shop__grid[data-view="list"] .pc__line{grid-column:3;grid-row:2;align-self:start;margin:4px 0 0;}
}
@media (max-width:1100px) and (min-width:641px){
  .shop__grid[data-view="list"] .pc:has(.pc__line) .pc__spec{grid-row:1;align-self:end;}
  .shop__grid[data-view="list"] .pc__line{grid-column:3;grid-row:2;align-self:start;margin:4px 0 0;}
}
@media (max-width:640px){ .shop__grid[data-view="list"] .pc__line{grid-column:2;grid-row:auto;margin:0;} }

/* ==========================================================================
   56. HERO — Frame 173: review proof, "Quality batteries, unbeatable prices",
   call-first CTAs, three-step strip, six-category two-step finder.
   ========================================================================== */
.hero__proof{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;font-family:var(--body);font-size:clamp(16px,1.35vw,20px);font-weight:400;letter-spacing:0;text-transform:none;color:#E4E4E7;}
.hero__proof .hero__tick,.hero__proof .hero__dash{display:none;}
.hero__stars{display:inline-flex;gap:3px;color:var(--red);} .hero__stars svg{width:18px;height:18px;}
.hero__g{display:inline-flex;color:#A1A1AA;margin:0 2px 0 4px;} .hero__g svg{width:17px;height:17px;}
.hero__proof a{color:inherit;text-decoration:none;} .hero__proof a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.hero__dot{width:5px;height:5px;border-radius:99px;background:currentColor;margin:0 6px;}
.hero__h em{font-style:normal;color:var(--red);}
.hero__lede{max-width:56ch;}

.hero__steps{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px clamp(20px,2.4vw,36px);margin:clamp(24px,2.6vw,32px) 0 0;padding:clamp(18px,2vw,24px) 0 0;border-top:1px solid rgba(255,255,255,.14);counter-reset:hs;max-width:560px;}
.hero__steps li{counter-increment:hs;display:grid;grid-template-columns:auto 1fr;column-gap:6px;row-gap:4px;}
.hero__steps li::before{content:counter(hs) ".";grid-row:1;color:var(--red);font-weight:500;font-size:15px;}
.hero__steps b{grid-column:2;font-weight:500;font-size:15px;text-transform:uppercase;color:#fff;letter-spacing:.01em;}
.hero__steps span{grid-column:2;font-size:13.5px;color:#A1A1AA;}
@media (max-width:560px){.hero__steps{grid-template-columns:1fr;gap:10px;}}

/* finder: 3×2 category grid; yellow selection dot from the new wordmark */
.hero__find .qf__tiles--6{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.hero__find .qf__tiles--6 .qf-tile__in{min-height:88px;font-size:14.5px;}
.hero__find .qf-tile input:checked+.qf-tile__in{background:#2A2A2E;border-color:#71717A;}
.hero__find .qf-tile input:checked+.qf-tile__in::after{border-color:#FFD600;background:#FFD600;box-shadow:inset 0 0 0 3px #2A2A2E;}
.hero__find .qf-tile input:focus-visible+.qf-tile__in{outline:2px solid #FFD600;outline-offset:2px;}

/* step 1: categories only · step 2: that category's fields */
.qf:not(.is-step2) [data-qf-group]{display:none!important;}
.qf.is-step2 .qf__types{display:none;}
.qf__pick{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid #3F3F46;border-radius:4px;background:#18181B;margin-bottom:6px;}
.qf__pick[hidden]{display:none;}
.qf__pick-ico{display:inline-flex;color:#FFD600;} .qf__pick-ico svg{width:20px;height:20px;}
.qf__pick-t{flex:1;font-size:15px;font-weight:500;color:#fff;}
.qf__pick-x{background:none;border:0;color:#fff;font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 0;min-height:44px;}
.qf__pick-x:hover{color:#FFD600;}
.hero__find .qf__alt{justify-content:flex-start;}
@media (max-width:767px){ .qf__tiles--6{grid-template-columns:repeat(2,minmax(0,1fr));} }
/* mobile: launcher lists all six categories in two columns; proof line stays on one row */
.qf-launch__list--6{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
.qf-launch__list--6 li a{font-size:14.5px;}
.qf-launch__list--6 .qf-launch__ico svg{width:20px;height:20px;}
@media (max-width:360px){.qf-launch__list--6{grid-template-columns:1fr;}}
@media (max-width:430px){
  .hero__proof{font-size:14.5px;gap:6px 8px;}
  .hero__stars svg{width:14px;height:14px;} .hero__g svg{width:14px;height:14px;}
  .hero__dot{margin:0 3px;}
}
/* launcher: single compact column reads better than two cramped ones */
.qf-launch__list--6{display:block;}
.qf-launch__list--6 li a{min-height:50px;padding-block:6px;font-size:15.5px;}
.qf-launch__list--6 .qf-launch__ico{width:34px;height:34px;}
/* category chip follows its surface: light in the drawer, dark in the hero */
.qf__pick{background:var(--n50);border-color:var(--rule);}
.qf__pick-t{color:var(--ink);} .qf__pick-x{color:var(--ink);} .qf__pick-x:hover{color:var(--red);}
.qf__pick-ico{color:var(--red);}
.hero__find .qf__pick{background:#18181B;border-color:#3F3F46;}
.hero__find .qf__pick-t,.hero__find .qf__pick-x{color:#fff;} .hero__find .qf__pick-x:hover{color:#FFD600;}
.hero__find .qf__pick-ico{color:#FFD600;}

/* ==========================================================================
   57. TRUST STRIP — type weight per "Why QLD Batteries" frame
   Heavier presence comes from size, not a new weight: titles 24px condensed
   bold, descriptions 17px regular in the tertiary grey.
   ========================================================================== */
.trust .trust__t{font-family:var(--display);font-weight:700;font-size:clamp(20px,1.7vw,24px);line-height:1.05;letter-spacing:.005em;color:var(--ink);}
.trust .trust__d{font-family:var(--body);font-weight:400;font-size:clamp(15px,1.2vw,17px);line-height:1.45;color:#3F3F46;margin-top:8px;}
.trust .trust__list li{gap:16px;}
.trust .trust__list li>.trust__ico{width:44px;height:44px;}
.trust .trust__list li>.trust__ico svg{width:20px;height:20px;}
@media (max-width:767px){
  .trust .trust__t{font-size:19px;}
  .trust .trust__d{font-size:14.5px;}
  .trust .trust__list li>.trust__ico{width:34px;height:34px;}
}
/* measured against the cell width: titles 21px, descriptions 15px — the frame's
   heavier read comes from darker, looser description text, not bigger type */
.trust .trust__t{font-size:clamp(19px,1.46vw,21px);line-height:1.05;}
.trust .trust__d{font-size:15px;line-height:1.5;color:#3F3F46;margin-top:8px;}
.trust .trust__list li>.trust__ico{width:42px;height:42px;}
@media (max-width:767px){ .trust .trust__t{font-size:18px;} .trust .trust__d{font-size:14px;} }
/* trust strip headings: 2% tracking */
.trust .trust__t{letter-spacing:.02em;}
/* keep "Free battery testing" on one line with the added tracking */
.trust .trust__list li{gap:12px;}
.trust .trust__list li+li{padding-left:clamp(16px,1.6vw,26px);}
.trust .trust__list li{padding-right:clamp(14px,1.4vw,24px);}

/* ==========================================================================
   58. GLOBAL HEADING TRACKING — 2% on every heading, body copy untouched.
   !important because several section rules set their own tracking with id
   specificity; this is a deliberate site-wide override. FAQ questions are
   buttons inside h3s, and browsers reset letter-spacing on buttons, so they
   are targeted explicitly.
   ========================================================================== */
:is(h1,h2,h3,h4,h5,h6,.d-hero,.d-1,.d-2,.d-3,.d-4),
:is(h1,h2,h3,h4,h5,h6) :is(span,em,a,b,strong),
:is(h2,h3) > .faq__btn{letter-spacing:.02em !important;}
/* hold the pricing band's frame-specified line breaks under the new tracking */
@media (min-width:1101px){
  .pricing__copy .d-2{max-width:16.5ch;}
  .fproc h3{font-size:clamp(20px,1.55vw,23px);}
}

/* ==========================================================================
   59. SHOP BY RANGE — Frame 125. Six photo cards, each a link to its range.
   Whole card is the target; the red arrow appears on hover/focus (always
   shown on touch, where there's no hover to reveal it).
   ========================================================================== */
.rcs__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end;}
.rcs__head .d-2 em{font-style:normal;color:var(--red);}
.rcs__head .lede{margin:0 0 6px;}
@media (max-width:860px){.rcs__head{grid-template-columns:1fr;align-items:start;gap:14px;}}

.rcs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);}
.rc{position:relative;display:flex;align-items:flex-end;aspect-ratio:2.7/1;min-height:150px;border-radius:8px;overflow:hidden;isolation:isolate;
  text-decoration:none;color:#fff;background:var(--n900);box-shadow:0 1px 2px rgba(14,14,17,.06);
  transition:box-shadow 320ms var(--ease-out),transform 320ms var(--ease-out);}
.rc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 700ms var(--ease-out);}
.rc::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(14,14,17,.62) 0%,rgba(14,14,17,.38) 60%,rgba(14,14,17,.25) 100%),linear-gradient(0deg,rgba(14,14,17,.55) 0%,transparent 60%);}
.rc--car::after{background:linear-gradient(0deg,rgba(14,14,17,.35) 0%,transparent 60%);}  /* photo arrives pre-darkened */
.rc--4wd img{object-position:70% 50%;}
.rc--van img{object-position:50% 45%;}
.rc--truck img{object-position:55% 60%;}
.rc--mower img{object-position:50% 55%;}
.rc--marine img{object-position:65% 40%;}
.rc__bd{display:block;padding:0 clamp(18px,1.8vw,26px) clamp(16px,1.6vw,22px);}
.rc__t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,1.95vw,28px);line-height:1;margin:0 0 8px;color:#fff;}
.rc__d{display:block;font-size:15px;line-height:1.45;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.35);}
.rc__ar{position:absolute;top:clamp(14px,1.4vw,20px);right:clamp(14px,1.4vw,20px);width:28px;height:28px;border-radius:99px;background:var(--red);display:grid;place-items:center;color:#fff;
  opacity:0;transform:translate(-4px,4px) scale(.9);transition:opacity 220ms ease,transform 320ms var(--ease-out);}
.rc__ar svg{width:12px;height:12px;}
@media (hover:hover) and (pointer:fine){
  .rc:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(14,14,17,.55);}
  .rc:hover img{transform:scale(1.04);}
  .rc:hover .rc__ar{opacity:1;transform:none;}
}
.rc:focus-visible{outline:3px solid var(--red);outline-offset:3px;}
.rc:focus-visible .rc__ar{opacity:1;transform:none;}
@media (hover:none){ .rc__ar{opacity:1;transform:none;} }
@media (max-width:1100px){ .rcs__grid{grid-template-columns:repeat(2,minmax(0,1fr));} .rc{aspect-ratio:2.3/1;} }
@media (max-width:600px){ .rcs__grid{grid-template-columns:1fr;gap:12px;} .rc{aspect-ratio:2.2/1;min-height:140px;} .rc__t{font-size:22px;} .rc__d{font-size:14px;} }
@media (prefers-reduced-motion:reduce){ .rc,.rc img,.rc__ar{transition:none!important;} .rc:hover{transform:none;} .rc:hover img{transform:none;} }
@media (min-width:1101px){ .rc__d{font-size:14px;} .rc__bd{padding-inline:clamp(18px,1.6vw,24px);} }
/* aspect-ratio + min-height was widening cards past a 320px viewport */
.rc{width:100%;}
@media (max-width:600px){ .rc{aspect-ratio:auto;min-height:140px;height:clamp(140px,44vw,180px);} }

/* ==========================================================================
   60. SHOP BATTERIES — Frame 77: "Available batteries", red "batteries.",
   filters · OR · code search · view toggle on one bar, grey product plates,
   one row of four.
   ========================================================================== */
:is(#range,.shop--grid) .d-2 em{font-style:normal;color:var(--red);}
:is(#range,.shop--grid) .shop__lbl{font-size:14.5px;color:var(--ink);text-transform:none;letter-spacing:0;font-weight:500;}
:is(#range,.shop--grid) .shop__filters{flex:0 1 auto;}
:is(#range,.shop--grid) .shop__sel{flex:0 0 clamp(170px,15.5vw,220px);}
:is(#range,.shop--grid) .shop__tools{flex:1 1 auto;align-items:flex-end;gap:12px;}
:is(#range,.shop--grid) .shop__apply{--bh:46px;}
.shop__or{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:14px;font-weight:500;color:var(--ink-3);padding-top:22px;}
.shop__or::before,.shop__or::after{content:"";width:1px;flex:1;max-height:10px;background:var(--rule-strong);}
.shop__search{position:relative;display:flex;flex:1 1 280px;max-width:400px;min-width:0;height:46px;}
.shop__search-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-3);pointer-events:none;}
.shop__search-ico svg,.shop__search-go svg{width:16px;height:16px;}
.shop__search input{flex:1;min-width:0;height:100%;padding:0 12px 0 40px;border:1px solid var(--rule-strong);border-right:0;border-radius:4px 0 0 4px;background:var(--paper);font:400 15px/1 var(--body);color:var(--ink);}
.shop__search input::placeholder{color:var(--n500);}
.shop__search input:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-color:var(--ink);}
.shop__search-go{display:inline-flex;align-items:center;gap:8px;padding:0 18px;border:0;border-radius:0 4px 4px 0;background:var(--ink);color:#fff;font:500 15px/1 var(--body);text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:background-color 160ms ease;}
.shop__search-go:hover{background:var(--n800);}
.shop__search-go:active{transform:scale(.98);}
.shop__search-go:focus-visible{outline:3px solid var(--red);outline-offset:2px;}
:is(#range,.shop--grid) .shop__view{margin-left:auto;}

/* grey product plate inside the white card, per the frame */
.pc__media--plate{background:#fff;display:grid;place-items:center;padding:clamp(10px,1.2vw,16px);}
.pc__media--plate img{position:static;width:auto;height:100%;max-width:100%;aspect-ratio:1/1;object-fit:contain;padding:8% !important;background:#F4F4F5;border-radius:4px;transform:none !important;}
@media (hover:hover) and (pointer:fine){ .pc:hover .pc__media--plate img{transform:scale(1.02) !important;} }
.pc__media--plate .pc__tag{top:clamp(10px,1.2vw,16px);left:clamp(10px,1.2vw,16px);}
.pc__tag--new{background:var(--red);}
.shop__grid[data-view="list"] .pc__media--plate{padding:6px;}
.shop__grid[data-view="list"] .pc__media--plate img{height:100%;padding:6% !important;}

@media (max-width:1180px){
  :is(#range,.shop--grid) .shop__tools{flex-wrap:wrap;}
  .shop__search{order:3;flex:1 1 100%;max-width:none;}
  .shop__or{display:none;}
}
@media (max-width:767px){
  :is(#range,.shop--grid) .shop__sel{flex:0 0 min(72vw,240px);}
  :is(#range,.shop--grid) .shop__tools{order:1;}
  .shop__search{order:0;}
}
/* frame check: lede right of heading; square plate; sentence-case tags */
:is(#range,.shop--grid) .shop__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end;}
:is(#range,.shop--grid) .shop__head .lede{margin:0 0 8px;justify-self:end;max-width:44ch;}
@media (max-width:860px){ :is(#range,.shop--grid) .shop__head{grid-template-columns:1fr;} :is(#range,.shop--grid) .shop__head .lede{justify-self:start;} }
:is(#range,.shop--grid) .pc__media.pc__media--plate img{width:auto !important;height:100% !important;max-width:100%;aspect-ratio:1/1;}
:is(#range,.shop--grid) .shop__grid[data-view="grid"] .pc__media--plate{aspect-ratio:4/3.1;}
:is(#range,.shop--grid) .pc__tag{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:400;padding:5px 9px;}
/* plate sized from card width (height:100% can't resolve in an auto grid row) */
:is(#range,.shop--grid) .shop__grid[data-view="grid"] .pc__media--plate{aspect-ratio:auto;padding:clamp(12px,1.3vw,16px) 0;}
:is(#range,.shop--grid) .shop__grid[data-view="grid"] .pc__media.pc__media--plate img{width:72% !important;height:auto !important;max-width:240px;}
:is(#range,.shop--grid) .shop__grid[data-view="list"] .pc__media.pc__media--plate img{width:auto !important;height:100% !important;}
:is(#range,.shop--grid) .pc__media.pc__media--plate img{padding:5% !important;}
/* four products: 2×2 on tablet rather than 3 + 1 */
@media (min-width:601px) and (max-width:1023px){ :is(#range,.shop--grid) .shop__grid[data-view="grid"]{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* ==========================================================================
   61. FOUR FIXES — pricing grid texture · shorter eyebrow rules ·
   one-line shop footnote · roadside per Frame 124 (two tiles, inline days)
   ========================================================================== */
/* 1 · Fair pricing: supplied perspective grid replaces the flat CSS grid */
.pricing{background-image:url("../images/backgrounds/pricing-grid.png");background-size:cover;background-position:center bottom;background-repeat:no-repeat;}

/* 2 · section tags: rule capped rather than running to the column edge */
.eyebrow--line::after{flex:0 0 clamp(64px,8vw,120px);}

/* 3 · shop footnote on one line */
:is(#range,.shop--grid) .shop__foot .body-sm{max-width:none;white-space:nowrap;}
@media (max-width:900px){ :is(#range,.shop--grid) .shop__foot .body-sm{white-space:normal;} }

/* 4 · roadside: two tiles; the weekday strip sits beside the hours */
.rsd__tiles--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.rsd__tiles--2 li{align-items:center;padding:20px 22px;}
.rsd__tiles--2 li>span:not(.rsd__ico):not(.rsd__days){flex:1 1 auto;min-width:0;}
.rsd__tiles--2 .rsd__days{margin:0 0 0 auto;flex:none;gap:4px;}
.rsd__tiles--2 .rsd__days i{width:22px;height:22px;font-size:10.5px;}
.rsd__tiles--2 b{font-size:15.5px;}
.rsd__tiles--2 small{font-size:14.5px;}
@media (max-width:900px){ .rsd__tiles--2{grid-template-columns:1fr;} }
@media (max-width:430px){ .rsd__tiles--2 li{flex-wrap:wrap;} .rsd__tiles--2 .rsd__days{margin:8px 0 0 48px;flex-basis:100%;} }
.rsd__tiles--2 .rsd__days{margin-left:clamp(20px,3vw,48px);margin-right:auto;}
.rsd__tiles--2 .rsd__days i:not(.on){border-color:transparent;}
.rsd__tiles--2 li{padding:26px 24px;}
@media (max-width:430px){ .rsd__tiles--2 .rsd__days{margin:8px 0 0 48px;} }
.rsd__tiles--2 li>span:not(.rsd__ico):not(.rsd__days){flex:0 1 auto;}

/* ==========================================================================
   62. FIVE FIXES — location per Frame 60 · red "Shop new" · one-line
   recycling note · buying guides removed · black call button in closing CTA
   ========================================================================== */
/* Location: larger hours values, roomier groups, big CTAs */
#location .loc__info{gap:30px;}
#location .hours--light li{padding:14px 0;font-size:16px;}
#location .hours--light li b{font-size:clamp(17px,1.35vw,19px);}
#location .loc__blk .btn-row .btn{--bh:54px;padding-inline:28px;}
#location .loc__addr{font-size:clamp(19px,1.6vw,22px);}
#location .loc__blk--area .body-sm{font-size:17px;}

/* Recycling note on one line (wraps naturally below tablet) */
.recycle__note{white-space:nowrap;}
@media (max-width:900px){ .recycle__note{white-space:normal;} }

/* Closing CTA: solid black call button on the red band */
.btn--black{background:var(--ink);color:#fff;border:1px solid var(--ink);}
.btn--black .btn__ico{background:rgba(255,255,255,.16);color:#fff;}
.btn--black:hover{background:#27272A;border-color:#27272A;}
.fcta .btn--black{border-color:var(--ink);}

/* ==========================================================================
   63. FOOTER — type scale per Footer frame (measured at 1440; content is
   unchanged, the frame only re-scales). Brighter secondary text, bigger
   wordmark, wide-tracked block labels, 18px column heads, 17px links.
   ========================================================================== */
.ft--v2 .ft2__brand img:is([src*="logo-qldbattery"],[data-asset*="logo-qldbattery"]){width:clamp(220px,20vw,285px);margin-bottom:22px;}
.ft--v2 .ft2__brand p{font-size:17px;line-height:1.45;color:#D4D4D8;max-width:40ch;margin-bottom:26px;}

/* block labels: wide tracking (beats the global 2% heading rule on purpose) */
.ft--v2 .ft2__top h3{font-family:var(--body);font-weight:400;font-size:14px;letter-spacing:.14em !important;text-transform:uppercase;color:#fff;margin-bottom:20px;}

.ft--v2 .ft2__call{gap:16px;margin-bottom:22px;}
.ft--v2 .ft2__call-ico{width:40px;height:40px;}
.ft--v2 .ft2__call b{font-family:var(--body);font-weight:500;font-size:clamp(24px,2vw,28px);line-height:1.1;letter-spacing:0;}
.ft--v2 .ft2__call small{font-size:15px;color:#A1A1AA;margin-top:6px;}
.ft--v2 .ft2__lines li{font-size:17px;gap:14px;}
.ft--v2 .ft2__lines li+li{margin-top:14px;}
.ft--v2 .ft2__lines a{color:#fff;}
.ft--v2 .ft2__lines svg,.ft--v2 .ft2__hours svg{width:15px;height:15px;margin-top:5px;}

.ft--v2 .ft2__addr{font-size:17px;font-weight:400;color:#fff;margin-bottom:28px;}
.ft--v2 .ft2__dir{font-size:17px;color:var(--r400);margin-bottom:26px;}
.ft--v2 .ft2__hours li{font-size:17px;line-height:1.45;color:#E4E4E7;gap:14px;}
.ft--v2 .ft2__hours li+li{margin-top:12px;}
.ft--v2 .ft2__hours b{font-weight:400;color:#fff;}

/* site-map columns */
.ft--v2 .ft2__nav--5 h3{font-size:clamp(16px,1.3vw,18px);font-weight:400;color:#fff;margin-bottom:24px;}
.ft--v2 .ft2__col a{font-size:clamp(15px,1.2vw,17px);color:#D4D4D8;}
.ft--v2 .ft2__col ul li+li{margin-top:clamp(10px,.9vw,14px);}
.ft--v2 .ft2__col a:hover{color:#fff;}

/* legal row */
.ft--v2 .ft__bot{font-size:15px;}
.ft--v2 .ft__bot > span,.ft--v2 .ft__legal a{font-size:15px;color:#A1A1AA;}
.ft--v2 .ft__legal{gap:10px 26px;}

@media (max-width:767px){
  .ft--v2 .ft2__brand img:is([src*="logo-qldbattery"],[data-asset*="logo-qldbattery"]){width:200px;}
  .ft--v2 .ft2__brand p,.ft--v2 .ft2__lines li,.ft--v2 .ft2__addr,.ft--v2 .ft2__dir,.ft--v2 .ft2__hours li{font-size:15.5px;}
  .ft--v2 .ft2__col a{font-size:15px;}
  .ft--v2 .ft__bot > span,.ft--v2 .ft__legal a{font-size:13.5px;}
}
/* footer sizes re-fitted to the frame's text widths (letter-height reads ran ~8% large) */
.ft--v2 .ft2__brand p{font-size:16px;max-width:392px;}
.ft--v2 .ft2__top h3{font-size:12px;}
.ft--v2 .ft2__call b{font-size:clamp(22px,1.7vw,24px);}
.ft--v2 .ft2__call small{font-size:14px;}
.ft--v2 .ft2__lines li,.ft--v2 .ft2__addr,.ft--v2 .ft2__dir,.ft--v2 .ft2__hours li{font-size:16px;}
.ft--v2 .ft2__nav--5 h3{font-size:16px;}
.ft--v2 .ft2__col a{font-size:16px;}
.ft--v2 .ft__bot > span,.ft--v2 .ft__legal a{font-size:14px;}
@media (max-width:767px){
  .ft--v2 .ft2__brand p,.ft--v2 .ft2__lines li,.ft--v2 .ft2__addr,.ft--v2 .ft2__dir,.ft--v2 .ft2__hours li,.ft--v2 .ft2__col a{font-size:15px;}
  .ft--v2 .ft__bot > span,.ft--v2 .ft__legal a{font-size:13px;}
}

/* ==========================================================================
   64. BOLT SPARK — traced from the reference render, frame by frame.
   A white spark runs along the glass outline (path normalised to 0–100):
   right notch ≈27, tip ≈55. Three strikes per 7s cycle, matching the video:
     2.00→3.00s notch→tip · 3.50→4.25s notch→tip, carries up the left edge
     to ≈68 by 4.75s · 5.25→6.25s notch→tip. Quiet 0–2s and after 6.4s.
   The tip flares as each strike lands. Liquid wave/bob/glow unchanged.
   ========================================================================== */
.bolt__spark{stroke-dasharray:4 96;stroke-dashoffset:-27;opacity:0;animation:bolt-spark-run 7s linear infinite;}
.bolt__spark--halo{animation-name:bolt-spark-run,bolt-spark-fade;animation-duration:7s,7s;animation-timing-function:linear,linear;animation-iteration-count:infinite,infinite;}
.bolt__spark--core{animation-name:bolt-spark-run,bolt-spark-fade;animation-duration:7s,7s;animation-timing-function:linear,linear;animation-iteration-count:infinite,infinite;}
.bolt__spark--halo{stroke-dasharray:6 94;}
@keyframes bolt-spark-run{
  0%,28.57%{stroke-dashoffset:-27}
  42.86%{stroke-dashoffset:-55}          /* 3.00s — tip */
  46%{stroke-dashoffset:-57}
  50%{stroke-dashoffset:-27}             /* reset while hidden */
  60.71%{stroke-dashoffset:-55}          /* 4.25s — tip */
  67.86%{stroke-dashoffset:-68}          /* 4.75s — up the left edge */
  70%{stroke-dashoffset:-70}
  74.99%{stroke-dashoffset:-27}          /* reset while hidden */
  75%{stroke-dashoffset:-27}             /* 5.25s — right notch */
  89.29%{stroke-dashoffset:-55}          /* 6.25s — tip */
  100%{stroke-dashoffset:-57}
}
@keyframes bolt-spark-fade{
  0%,28.4%{opacity:0}
  28.57%,42.86%{opacity:1}
  45%,49.9%{opacity:0}
  50%,67.86%{opacity:1}
  70.5%,74.9%{opacity:0}
  75%,89.29%{opacity:1}
  91.5%,100%{opacity:0}
}
.bolt__tipflash{opacity:0;transform-box:fill-box;transform-origin:center;animation:bolt-tip-flash 7s linear infinite;}
@keyframes bolt-tip-flash{
  0%,40%{opacity:0;transform:scale(.6)}
  42.86%{opacity:.85;transform:scale(1)}
  47%{opacity:0;transform:scale(1.2)}
  58%{opacity:0;transform:scale(.6)}
  60.71%{opacity:.9;transform:scale(1)}
  65%{opacity:0;transform:scale(1.2)}
  86.5%{opacity:0;transform:scale(.6)}
  89.29%{opacity:.85;transform:scale(1)}
  93.5%,100%{opacity:0;transform:scale(1.2)}
}
@media (prefers-reduced-motion:reduce){ .bolt__spark,.bolt__tipflash{animation:none!important;opacity:0!important;} }
/* refinements from the side-by-side: longer streak, subtler tip, strike 2 reaches the left ledge */
.bolt__spark--core{stroke-dasharray:6.5 93.5;}
.bolt__spark--halo{stroke-dasharray:8 92;}
@keyframes bolt-spark-run{
  0%,28.57%{stroke-dashoffset:-25}
  42.86%{stroke-dashoffset:-53}
  46%{stroke-dashoffset:-55}
  50%{stroke-dashoffset:-25}
  60.71%{stroke-dashoffset:-53}
  67.86%{stroke-dashoffset:-72}          /* 4.75s — on the left notch ledge */
  70%{stroke-dashoffset:-75}
  74.99%{stroke-dashoffset:-25}
  75%{stroke-dashoffset:-25}
  89.29%{stroke-dashoffset:-53}
  100%{stroke-dashoffset:-55}
}
.bolt__tipflash{r:7px;}
@keyframes bolt-tip-flash{
  0%,40%{opacity:0;transform:scale(.6)}
  42.86%{opacity:.45;transform:scale(1)}
  46%{opacity:0;transform:scale(1.15)}
  58%{opacity:0;transform:scale(.6)}
  60.71%{opacity:.5;transform:scale(1)}
  64%{opacity:0;transform:scale(1.15)}
  86.5%{opacity:0;transform:scale(.6)}
  89.29%{opacity:.45;transform:scale(1)}
  93%,100%{opacity:0;transform:scale(1.15)}
}

/* ==========================================================================
   65. BOLT LIQUID — matched to the reference render.
   Measured from the video: the surface travels RIGHT at ~32px/s (one 67.35
   unit wavelength every 2.1s), amplitude unchanged, level steady (no bob),
   glow steady (its only brightening is the spark's tip flare).
   ========================================================================== */
@keyframes bolt-wave-r{from{transform:translateX(-67.35px)}to{transform:translateX(0)}}
.bolt__liquid{animation:bolt-wave-r 2.1s linear infinite;}
.bolt__bob{animation:none;}
.bolt__glow{animation:none;opacity:1;}
@media (prefers-reduced-motion:reduce){ .bolt__liquid{animation:none!important;} }

/* ==========================================================================
   66. MOBILE FINDER LAUNCHER — same look as the desktop hero card.
   Colours, type sizes and tile treatment copied from .hero__find .qf;
   laid out 2×3 for phone width. Tiles are links that open the finder at
   step 2 (unchanged behaviour).
   ========================================================================== */
.qf-launch{position:relative;background:#0E0E11;color:#fff;border:1px solid #2A2A2E;border-radius:8px;padding:22px 18px 8px;box-shadow:0 30px 60px -36px rgba(0,0,0,.9);margin-top:14px;}
/* battery terminal tabs, as on desktop */
.qf-launch::before,.qf-launch::after{content:"";position:absolute;top:-12px;width:30px;height:12px;border-radius:3px 3px 0 0;}
.qf-launch::before{left:20px;background:#2F6BFF;}
.qf-launch::after{right:20px;background:var(--red);}
.qf-launch__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.qf-launch__h{font-family:var(--display);font-weight:700;font-size:28px;line-height:1;color:#fff;margin:0;}
.qf-launch .qf__meter{display:inline-flex;gap:4px;padding:4px;border:1.5px solid #3A3A3F;border-radius:3px;position:relative;}
.qf-launch .qf__meter::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:3px;height:9px;background:#3A3A3F;border-radius:0 1px 1px 0;}
.qf-launch .qf__meter i{width:9px;height:12px;background:#222226;border-radius:1px;}
.qf-launch .qf__meter i.on{background:var(--red);}
.qf-launch__sub{font-size:15px;font-weight:400;color:#E4E4E7;margin:0 0 12px;}

.qf-launch__list.qf-launch__list--6{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;}
.qf-launch__list--6 li{border:0 !important;}
.qf-launch__list--6 li a{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;
  min-height:88px;padding:14px 12px 12px;background:#141417;border:1px solid #2E2E32;border-radius:4px;
  font-family:var(--body);font-size:14.5px;font-weight:400;line-height:1.3;color:#E4E4E7;text-decoration:none;
  transition:background-color 160ms ease,border-color 160ms ease,transform 140ms var(--ease-out);}
.qf-launch__list--6 li a:active{transform:scale(.98);background:#232327;border-color:#71717A;}
.qf-launch__list--6 li a:focus-visible{outline:2px solid #FFD600;outline-offset:2px;}
.qf-launch__list--6 .qf-launch__ico{width:auto;height:auto;background:none;border-radius:0;color:#A1A1AA;display:inline-flex;}
.qf-launch__list--6 .qf-launch__ico svg{width:22px;height:22px;}
.qf-launch__list--6 li a > svg:last-child{position:absolute;top:12px;right:10px;width:14px;height:14px;color:#52525B;}
.qf-launch__list--6 li a > span:not(.qf-launch__ico){text-wrap:pretty;}

.qf-launch__ft{margin-top:14px;padding-top:4px;border-top:1px solid #2A2A2E;}
.qf-launch__alt{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15.5px;font-weight:500;color:#fff;text-decoration:none;}
.qf-launch__alt svg{width:14px;height:14px;color:var(--red);}
@media (max-width:340px){ .qf-launch__list--6 li a{min-height:82px;font-size:14px;padding:12px 10px;} }

/* ==========================================================================
   67. FINDER PANEL (drawer / bottom sheet) — dark, mirroring the hero card.
   Auto-mirrored from every .hero__find descendant rule (media context kept)
   so the two presentations can't drift apart.
   ========================================================================== */
@media (min-width:768px) and (max-width:1023px){.qfd__panel .qf{padding:26px 26px 14px;}}
@media (min-width:768px) and (max-width:1023px){.qfd__panel .qf__fields{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (min-width:768px) and (max-width:1023px){.qfd__panel .qf-field--full{grid-column:span 2;}}
@media (min-width:768px) and (max-width:1023px){.qfd__panel .qf-tile__in{flex-direction:row;align-items:center;min-height:62px;padding-right:30px;}}
@media (min-width:768px) and (max-width:1023px){.qfd__panel .qf-tile__in::after{top:50%;margin-top:-7px;}}
@media (min-width:768px) and (max-width:1023px){.qfd__panel .qf-out__acts{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* ---- Hero: dark finder card ---------------------------------------------- */
.qfd__panel .qf{background:var(--n950);color:#fff;border-color:rgba(255,255,255,.1);box-shadow:0 44px 80px -40px rgba(0,0,0,.9);}
.qfd__panel .qf__title{color:#fff;}
.qfd__panel .qf__legend,.qfd__panel .qf-field label{color:var(--n300);}
.qfd__panel .qf-field label span{color:var(--n500);}
.qfd__panel .qf__meter{border-color:var(--n700);}
.qfd__panel .qf__meter::after{background:var(--n700);}
.qfd__panel .qf__meter i{background:var(--n800);}
.qfd__panel .qf-tile__in{background:var(--n900);border-color:var(--n700);color:var(--n200);}
.qfd__panel .qf-tile__in svg{color:var(--n400);}
.qfd__panel .qf-tile__in::after{background:var(--n900);border-color:var(--n600);}
.qfd__panel .qf-tile input:checked+.qf-tile__in{background:var(--n800);border-color:#fff;box-shadow:inset 0 0 0 1px #fff;color:#fff;}
.qfd__panel .qf-tile input:checked+.qf-tile__in svg{color:#fff;}
.qfd__panel .qf-tile input:checked+.qf-tile__in::after{border-color:#fff;box-shadow:inset 0 0 0 3px var(--n800),inset 0 0 0 7px #fff;}
.qfd__panel .qf-field select,.qfd__panel .qf-field input{background-color:var(--n900);border-color:var(--n700);color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23FFFFFF' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");}
.qfd__panel .qf-field select:disabled{background-color:var(--n950);border-color:var(--n800);color:var(--n500);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2371717A' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");}
.qfd__panel .qf-field select:focus,.qfd__panel .qf-field input:focus{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.12);}
.qfd__panel .qf__go[aria-disabled="true"]{background:var(--n800);color:var(--n500);}
.qfd__panel .qf__hint{color:var(--n400);}
.qfd__panel .qf__alt{border-top-color:rgba(255,255,255,.12);}
.qfd__panel .qf__alt-a{color:#fff;text-decoration-color:rgba(255,255,255,.3);}
.qfd__panel .qf .plate__terminals .term{box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}
/* ==========================================================================
   42. HERO FINDER CARD — match the "Container" design frame
   Scoped to .qfd__panel so the drawer version is untouched.
   ========================================================================== */
.qfd__panel .qf{overflow:visible;padding:26px 26px 18px;border:1px solid #2A2A2E;border-radius:8px;background:#0E0E11;}
as drawn */
.qfd__panel .qf .plate__terminals{top:-14px;left:26px;right:26px;}
.qfd__panel .qf .term{width:36px;height:16px;border-radius:3px 3px 0 0;box-shadow:none;}
.qfd__panel .qf .term::after{content:none;}
.qfd__panel .qf .term{background:#2F6BFF;}
.qfd__panel .qf .term--pos{background:var(--red);}
.qfd__panel .qf__hd{margin-bottom:18px;}
.qfd__panel .qf__title{font-size:28px;letter-spacing:.005em;}
.qfd__panel .qf__meter{gap:4px;padding:4px;border:1.5px solid #3A3A3F;border-radius:3px;}
.qfd__panel .qf__meter::after{background:#3A3A3F;width:3px;height:9px;}
.qfd__panel .qf__meter i{width:10px;height:13px;background:#222226;}
.qfd__panel .qf__meter i.on{background:var(--red);}
.qfd__panel .qf__legend{font-size:15px;font-weight:400;color:#E4E4E7;margin-bottom:10px;}
.qfd__panel .qf__tiles{gap:10px;}
.qfd__panel .qf-tile__in{min-height:90px;padding:14px 12px 13px;gap:10px;background:#141417;border:1px solid #2E2E32;
  font-size:15px;font-weight:400;line-height:1.3;color:#E4E4E7;border-radius:4px;}
.qfd__panel .qf-tile__in svg{width:22px;height:22px;color:#A1A1AA;}
.qfd__panel .qf-tile__in::after{top:11px;right:11px;width:15px;height:15px;background:transparent;border:1.5px solid #52525B;}
.qfd__panel .qf-tile input:checked+.qf-tile__in{background:#232327;border-color:#fff;box-shadow:none;color:#fff;}
.qfd__panel .qf-tile input:checked+.qf-tile__in svg{color:#fff;}
.qfd__panel .qf-tile input:checked+.qf-tile__in::after{border-color:#fff;background:#fff;box-shadow:inset 0 0 0 3px #232327;}
@media (hover:hover) and (pointer:fine){.qfd__panel .qf-tile:hover input:not(:checked)+.qf-tile__in{border-color:#52525B;background:#18181B;}}
.qfd__panel .qf__fields{gap:14px 10px;margin:18px 0 22px;}
.qfd__panel .qf-field label{font-size:15px;color:#fff;}
.qfd__panel .qf-field label span{color:#71717A;}
.qfd__panel .qf-field select,.qfd__panel .qf-field input{height:46px;background-color:#18181B;border:1px solid #3F3F46;color:#fff;font-size:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23FFFFFF' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");}
.qfd__panel .qf-field select:disabled{background-color:#111114;border-color:#27272A;color:#71717A;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2352525B' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");}
@media (hover:hover) and (pointer:fine){.qfd__panel .qf-field select:not(:disabled):hover{border-color:#71717A;}}
as drawn; an early click focuses the next
   field and shows the hint (handled in site.js) */
.qfd__panel .qf__go{--bh:50px;font-size:16px;}
.qfd__panel .qf__go[aria-disabled="true"]{background:var(--red);color:#fff;cursor:pointer;box-shadow:none;}
.qfd__panel .qf__go[aria-disabled="true"] .btn__ico{background:rgba(255,255,255,.22);color:#fff;}
.qfd__panel .qf__go[aria-disabled="true"]:hover{background:var(--r700);}
.qfd__panel .qf__go:not([aria-disabled="true"]){box-shadow:none;}
.qfd__panel .qf__hint{margin-top:12px;font-size:15px;color:#A1A1AA;}
.qfd__panel .qf__alt{margin-top:14px;padding-top:14px;border-top:1px solid #2A2A2E;}
.qfd__panel .qf__alt-a{font-size:15.5px;font-weight:500;color:#fff;text-decoration:none;}
.qfd__panel .qf__alt-a svg{width:14px;height:14px;color:var(--red);}
@media (hover:hover) and (pointer:fine){.qfd__panel .qf__alt-a:hover{color:var(--r400);}}
.qfd__panel .qf-tile__in>span{text-wrap:pretty;}
.qfd__panel .qf-tile__in{font-size:14.5px;padding:14px 11px 12px;}
/* ---- Finder: text inputs must not inherit the select chevron ----------- */
.qfd__panel .qf-field input[type="text"]{background-image:none;padding-right:14px;}
/* ---- Finder result panel on the dark hero card: legible on #0E0E11 ------ */
.qfd__panel .qf-out__h{color:#fff;}
.qfd__panel .qf-out__p{color:#D4D4D8;}
.qfd__panel .qf-out__help{color:#A1A1AA;}
.qfd__panel .qf-out__k{color:var(--r400);}
.qfd__panel .qf-veh{background:#18181B;border-color:#2E2E32;color:#fff;}
.qfd__panel .qf-veh__k{color:#A1A1AA;}
.qfd__panel .qf-veh__v{color:#fff;}
.qfd__panel .qf-link{color:#fff;}
.qfd__panel .qf-out__acts .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3);}
.qfd__panel .qf-out__acts .btn--ghost .btn__ico{background:rgba(255,255,255,.14);color:#fff;}
.qfd__panel .qf-out__acts .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.07);}
.qfd__panel .qf-out__cat{color:#fff;border-color:rgba(255,255,255,.3);}
/* finder: 3×2 category grid; yellow selection dot from the new wordmark */
.qfd__panel .qf__tiles--6{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.qfd__panel .qf__tiles--6 .qf-tile__in{min-height:88px;font-size:14.5px;}
.qfd__panel .qf-tile input:checked+.qf-tile__in{background:#2A2A2E;border-color:#71717A;}
.qfd__panel .qf-tile input:checked+.qf-tile__in::after{border-color:#FFD600;background:#FFD600;box-shadow:inset 0 0 0 3px #2A2A2E;}
.qfd__panel .qf-tile input:focus-visible+.qf-tile__in{outline:2px solid #FFD600;outline-offset:2px;}
.qfd__panel .qf__alt{justify-content:flex-start;}
.qfd__panel .qf__pick{background:#18181B;border-color:#3F3F46;}
.qfd__panel .qf__pick-t,.qfd__panel .qf__pick-x{color:#fff;}
.qfd__panel .qf__pick-x:hover{color:#FFD600;}
.qfd__panel .qf__pick-ico{color:#FFD600;}
type sizes and tile treatment copied from .qfd__panel .qf;
   laid out 2×3 for phone width. Tiles are links that open the finder at
   step 2 (unchanged behaviour).
   ========================================================================== */
.qf-launch{position:relative;background:#0E0E11;color:#fff;border:1px solid #2A2A2E;border-radius:8px;padding:22px 18px 8px;box-shadow:0 30px 60px -36px rgba(0,0,0,.9);margin-top:14px;}
/* the panel chrome itself */
.qfd__panel{background:#0E0E11;color:#fff;}
.qfd__panel .qf{background:transparent;border:0;box-shadow:none;color:#fff;}
.qfd__panel .qf .plate__terminals{display:none;}
.qfd__bar{border-bottom-color:#2A2A2E !important;}
.qfd__grab{background:#3F3F46 !important;}
.qfd__x{background:#18181B !important;border-color:#3F3F46 !important;color:#fff !important;}
.qfd__x:hover{background:#27272A !important;}
.qfd__ft{background:#141417 !important;border-top:1px solid #2A2A2E !important;color:#A1A1AA !important;}
.qfd__ft a{color:#fff !important;}
.qfd__panel .qf-out__acts .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3);}

/* ==========================================================================
   68. SHOP FILTER BAR — phones only, per "Filter batteries" frame.
   Stacked full-width selects → full-width Apply → one row: search (icon-only
   button) + grid/list toggle. Desktop and tablet untouched.
   ========================================================================== */
@media (max-width:767px){
  :is(#range,.shop--grid) .shop__bar{display:flex;flex-direction:column;gap:16px;padding:18px 0 20px;}
  :is(#range,.shop--grid) .shop__filters{display:flex;flex-direction:column;flex-wrap:nowrap;gap:16px;overflow:visible;margin-inline:0;padding-inline:0;scroll-snap-type:none;width:100%;}
  :is(#range,.shop--grid) .shop__sel{flex:0 0 auto;width:100%;max-width:none;}
  :is(#range,.shop--grid) .shop__sel select{min-height:52px;font-size:16px;}
  :is(#range,.shop--grid) .shop__lbl{font-size:15px;}
  :is(#range,.shop--grid) .shop__tools{order:0;display:grid;grid-template-columns:1fr;gap:14px;width:100%;}
  :is(#range,.shop--grid) .shop__apply{width:100%;--bh:54px;font-size:16px;}
  .shop__or{display:none;}
  :is(#range,.shop--grid) .shop__search{order:0;grid-column:1;flex:none;max-width:none;width:100%;height:52px;display:flex;}
  :is(#range,.shop--grid) .shop__search input{font-size:16px;padding-left:44px;border-radius:4px 0 0 4px;}
  :is(#range,.shop--grid) .shop__search-go{width:56px;padding:0;justify-content:center;font-size:0;gap:0;}
  :is(#range,.shop--grid) .shop__search-go svg{width:18px;height:18px;}
  /* search row: input + view toggle side by side */
  :is(#range,.shop--grid) .shop__tools{grid-template-columns:1fr auto;grid-template-areas:"apply apply" "search view";align-items:stretch;column-gap:10px;}
  :is(#range,.shop--grid) .shop__apply{grid-area:apply;}
  :is(#range,.shop--grid) .shop__search{grid-area:search;}
  :is(#range,.shop--grid) .shop__view{grid-area:view;margin:0;gap:8px;}
  :is(#range,.shop--grid) .shop__vbtn{width:52px;height:52px;}
}

/* ==========================================================================
   69. FAIR PRICING BACKGROUND — phones. "cover" on a tall, narrow section
   inflated the grid to a few giant cells; use a portrait crop sized by
   height so the cells stay ~50px, and place the glows where the bolt and
   heading actually sit on a phone.
   ========================================================================== */
@media (max-width:767px){
  .pricing::before{background:
    radial-gradient(280px 220px at 30% 8%,rgba(238,28,37,.34),transparent 70%),
    radial-gradient(260px 240px at 70% 30%,rgba(238,28,37,.16),transparent 70%);}
}
@media (max-width:767px){
  .pricing{background-size:1100px auto;background-position:center bottom;background-repeat:no-repeat;}
  .pricing::before{background:
    radial-gradient(280px 220px at 30% 8%,rgba(238,28,37,.34),transparent 70%),
    linear-gradient(180deg,#0E0E11 0%,rgba(14,14,17,.85) 38%,rgba(14,14,17,0) 62%);}   /* plain above, grid fans in below */
}

/* ==========================================================================
   70. FAIR PRICING — LIVE GLASS BOLT
   Replaces the flattened bolt export (.pricing__art .bolt) with the live
   two-layer SVG: liquid (fills on reveal, surface drifts, bubbles rise) and
   glass (wall, inner face, rim, specular streaks, glints).
   The band keeps its own grid and red glows; this block only governs the art.
   Sizes are set on .pb, which holds the 260x440 portrait ratio, so the bolt
   never inflates its column on tablets and phones.
   ========================================================================== */
.pricing__art{display:flex;align-items:center;justify-content:center;min-width:0;position:relative;overflow:visible;}
.pricing__art .pb{position:relative;width:100%;max-width:292px;aspect-ratio:260 / 440;}
.pb__liquid,.pb__glass{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.pb__glass{z-index:2;}
.pb__glow{position:absolute;left:-45%;right:-45%;top:34%;bottom:-12%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(238,28,37,.6),rgba(238,28,37,.18) 55%,transparent);filter:blur(8px);}
.pb__wave{transform-box:view-box;}
.pb__bub{opacity:0;transform-box:fill-box;transform-origin:center;}

/* ---- motion: fill on reveal, then float, drift and bubbles while on screen ---- */
.js .pricing__bolt[data-rv]{transform:none;}
.js .pricing__bolt .pb__fill{transform:translateY(240px);transition:transform 1700ms var(--ease-settle) 350ms;}
.js .pricing__bolt .pb__glow{opacity:.25;transition:opacity 1600ms ease 500ms;}
.pricing__bolt.rv-in .pb__fill{transform:none;}
.pricing__bolt.rv-in .pb__glow{opacity:1;}
@media (prefers-reduced-motion:no-preference){
  .pricing__bolt.is-live .pb{animation:pb-float 7s ease-in-out infinite;}
  .pricing__bolt.is-live .pb__wave{animation:pb-wave 5.5s linear infinite;}
  .pricing__bolt.is-live.rv-in .pb__bub{animation:pb-bub 4.2s cubic-bezier(.4,0,.7,1) var(--d,0s) infinite;}
}
@keyframes pb-float{0%,100%{transform:translate3d(0,0,0) rotate(0deg);}50%{transform:translate3d(0,-10px,0) rotate(.8deg);}}
@keyframes pb-wave{from{transform:translateX(0);}to{transform:translateX(-64px);}}
@keyframes pb-bub{0%{opacity:0;transform:translate(0,0) scale(.6);}15%{opacity:.85;}70%{opacity:.6;}100%{opacity:0;transform:translate(3px,-30px) scale(1);}}
@media (prefers-reduced-motion:reduce){
  .pricing__bolt .pb__fill,.pricing__bolt .pb__glow{transform:none!important;opacity:1!important;transition:none!important;}
  .pricing__bolt .pb,.pricing__bolt .pb__wave,.pricing__bolt .pb__bub{animation:none!important;}
}

/* ---- widths: explicit, because the art column is shrink-to-fit on tablets
   and phones (justify-self), where a percentage width would collapse to 0 ---- */
.pricing__art .pb{width:clamp(236px,20vw,292px);max-width:100%;}
@media (min-width:1101px){
  .pricing__in{grid-template-columns:minmax(0,1.12fr) clamp(236px,20vw,300px) minmax(0,1fr);}
}
@media (min-width:1101px) and (max-width:1300px){
  .pricing__in{grid-template-columns:minmax(0,1.15fr) 232px minmax(0,1fr);}
  .pricing__art .pb{width:224px;}
}
@media (max-width:1100px){
  .pricing__art{justify-self:center;}          /* centred in its column, not jammed on the gutter */
  .pricing__art .pb{width:228px;}
}
@media (max-width:900px){ .pricing__art .pb{width:196px;} }
/* phones: a small bolt above the eyebrow, on the same left edge as the copy */
@media (max-width:767px){
  .pricing__in{gap:24px;}
  .pricing__art{order:-1;justify-self:start;justify-content:flex-start;margin:0;}
  .pricing__art .pb{width:132px;}
  .pb__glow{left:-70%;right:-70%;top:30%;bottom:-16%;}
}
@media (max-width:380px){ .pricing__art .pb{width:116px;} }

/* ---- list headings: the display face, per the type rule (Helvetica is never bold) ---- */
.fproc h3{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(20px,1.7vw,26px);line-height:1.05;}
@media (max-width:767px){ .fproc h3{font-size:21px;} }

/* ==========================================================================
   72. BATTERIES CATALOGUE — parent page + the three category pages
   Built from the homepage's own components. New here, and only where the
   catalogue needs something the homepage doesn't have:
     .phero--cat     compact variant of the internal-page banner
     .catnav         orientation band: copy + the homepage's .route__list rows
     .bcat           category destination card (the .rc card language, larger)
     .brands         brand grid (one verified brand today; scales to many)
     .guides--4      four-up variant of the guide grid
   The product grid is the homepage .shop__grid/.pc, reused via .shop--grid
   (the homepage's #range-scoped product rules now read :is(#range,.shop--grid)).
   Red stays an accent: index numbers, arrows, ticks, emphasis.
   ========================================================================== */

/* ---- 01 banner: compact internal-page hero -------------------------------------- */
.phero--cat .phero__in{padding-block:clamp(40px,5.2vw,76px);align-items:end;}
.phero--cat h1{margin-bottom:16px;max-width:15ch;}
.phero--cat h1 em{font-style:normal;color:var(--r500);}
.phero--cat .eyebrow{color:var(--n400);}
.phero--cat .eyebrow--line::after{background:rgba(255,255,255,.16);}
.phero--cat .lede{max-width:46ch;}
.phero--cat .phero__facts>div{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:14px 18px;}
.phero--cat .phero__facts span{margin:0;flex:none;}
.phero--cat .phero__facts b{font-size:17px;text-align:right;}
@media (max-width:900px){
  .phero--cat .phero__in{gap:22px;}
  .phero--cat h1{max-width:none;}
}
@media (max-width:520px){
  .phero--cat .phero__facts>div{padding:12px 14px;}
  .phero--cat .phero__facts b{font-size:15.5px;}
}

/* ---- 02 catalogue header: the orientation point ---------------------------------- */
.catnav{padding-block:clamp(40px,4.6vw,64px);background:var(--paper-2);border-bottom:1px solid var(--rule);}
.catnav__in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,6vw,104px);align-items:start;}
.catnav .d-3 em{font-style:normal;color:var(--red);}
.catnav .d-3{max-width:19ch;}
.catnav__lede{margin-top:16px;font-size:16px;line-height:1.55;color:var(--ink-3);max-width:46ch;}
.catnav__nav .route__list{border-top:2px solid var(--ink);}
.catnav__nav .rrow{padding-block:20px;}
.catnav__nav .rrow__t{font-size:clamp(17px,1.5vw,20px);}
.catnav__nav .rrow__idx{color:var(--red-ink);}
.catnav__alt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:18px;font-size:14.5px;color:var(--ink-3);}
.catnav__alt .tlink svg,.bbrand__more svg{width:10px;height:10px;flex:none;}
.catnav__alt .tlink,.bbrand__more{white-space:nowrap;}
@media (max-width:900px){
  .catnav__in{grid-template-columns:1fr;gap:26px;}
  .catnav .d-3{max-width:none;}
}
@media (max-width:520px){
  .catnav__nav .rrow{padding-block:17px;}
  .catnav__alt{flex-direction:column;align-items:flex-start;}
}

/* ---- 03 overview: the homepage split, with a stamp and caption ------------------- */
.ovw__body .lede{margin-top:20px;}
.ovw__p{margin-top:14px;font-size:16px;line-height:1.6;color:var(--ink-3);max-width:52ch;}
.ovw .btn-row{margin-top:30px;}
.ovw .d-2{max-width:16ch;}
.ovw .stamp b{font-size:clamp(22px,2.4vw,30px);}
@media (max-width:560px){ .ovw .btn-row .btn{width:100%;} }

/* ---- 04 category destination cards ------------------------------------------------ */
.bcats{background:var(--paper-2);}
.bcats .d-2 em,.popular .d-2 em,.guides-sec .d-2 em{font-style:normal;color:var(--red);}
.bcat__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);}
.bcat__grid>li{display:flex;min-width:0;}
.bcat{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;border-radius:8px;overflow:hidden;isolation:isolate;
  background:var(--n950);color:#fff;text-decoration:none;box-shadow:0 1px 2px rgba(14,14,17,.08);
  transition:transform 320ms var(--ease-out),box-shadow 320ms var(--ease-out);}
.bcat__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px clamp(18px,1.8vw,26px) 0;}
.bcat__n{font-family:var(--display);font-weight:700;font-size:22px;line-height:1;color:var(--r400);}
.bcat__tag{font-size:11.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;line-height:1;padding:6px 10px;
  border:1px solid rgba(255,255,255,.22);border-radius:2px;color:var(--n200);white-space:nowrap;}
.bcat__media{position:relative;display:block;aspect-ratio:4/3;margin:16px clamp(18px,1.8vw,26px) 0;border-radius:4px;overflow:hidden;
  background:radial-gradient(75% 65% at 50% 40%,#2a2a31 0%,#17171b 58%,#101013 100%);}
.bcat__media::before{content:"";position:absolute;left:16%;right:16%;bottom:13%;height:11%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);}
.bcat__im{position:absolute;left:50%;top:50%;width:80%;height:auto;transform:translate(-50%,-50%);
  transition:transform 700ms var(--ease-out);}
.bcat__media--pair .bcat__im--back{width:66%;left:60%;top:42%;}
.bcat__media--pair .bcat__im--front{width:58%;left:38%;top:60%;}
.bcat__media--photo::before{display:none;}
.bcat__media--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 55%;
  filter:saturate(.8) brightness(.78) contrast(1.05);transition:transform 700ms var(--ease-out);}
.bcat__media--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,14,17,.45),transparent 55%);}
.bcat__bd{display:flex;flex-direction:column;flex:1;padding:22px clamp(18px,1.8vw,26px) clamp(20px,2vw,26px);}
.bcat__t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(28px,2.5vw,36px);line-height:.96;
  letter-spacing:0;color:#fff;margin:0 0 12px;}
.bcat__d{display:block;font-size:15.5px;line-height:1.5;color:var(--n300);max-width:38ch;}
.bcat__pts{display:grid;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);}
.bcat__pts li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.4;color:var(--n200);}
.bcat__pts svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--r400);}
.bcat__cta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:26px;
  font-size:14.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#fff;}
.bcat__ar{width:42px;height:42px;border-radius:99px;background:var(--red);display:grid;place-items:center;flex:none;color:#fff;
  transition:transform 320ms var(--ease-out);}
.bcat__ar svg{width:13px;height:13px;}
@media (hover:hover) and (pointer:fine){
  .bcat:hover{transform:translateY(-4px);box-shadow:0 28px 52px -30px rgba(14,14,17,.62);}
  .bcat:hover .bcat__im{transform:translate(-50%,-52%) scale(1.035);}
  .bcat:hover .bcat__media--photo img{transform:scale(1.04);}
  .bcat:hover .bcat__ar{transform:translate(3px,-3px);}
}
.bcat:active{transform:translateY(-1px) scale(.995);}
.bcat:focus-visible{outline:3px solid var(--red);outline-offset:3px;}
/* tablet: two up, the third card runs full width and turns landscape */
@media (min-width:720px) and (max-width:1100px){
  .bcat__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bcat__grid>li:last-child{grid-column:1 / -1;}
  .bcat__grid>li:last-child .bcat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;}
  .bcat__grid>li:last-child .bcat__top{grid-column:1 / -1;}
  .bcat__grid>li:last-child .bcat__media{margin-bottom:clamp(18px,1.8vw,26px);align-self:start;}
  .bcat__grid>li:last-child .bcat__bd{padding-top:16px;}
}
/* phones: full width, shorter media, same hierarchy */
@media (max-width:719px){
  .bcat__grid{grid-template-columns:1fr;gap:14px;}
  .bcat__media{aspect-ratio:16/9;}
  .bcat__im{width:60%;}
  .bcat__media--pair .bcat__im--back{width:50%;left:60%;top:44%;}
  .bcat__media--pair .bcat__im--front{width:44%;left:40%;top:60%;}
  .bcat__t{font-size:30px;}
  .bcat__d{font-size:15px;}
  .bcat__pts li{font-size:14px;}
  .bcat__cta{padding-top:20px;}
}
@media (prefers-reduced-motion:reduce){
  .bcat,.bcat__im,.bcat__media--photo img,.bcat__ar{transition:none!important;}
  .bcat:hover,.bcat:active{transform:none;}
  .bcat:hover .bcat__im{transform:translate(-50%,-50%);}
  .bcat:hover .bcat__media--photo img{transform:none;}
}

/* ---- 05 popular batteries: the homepage product grid, unchanged ------------------- */
.popular .shop__head{margin-bottom:clamp(28px,3.2vw,44px);}

/* ---- 06 brands --------------------------------------------------------------------- */
.brands__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(14px,1.8vw,22px);}
.bbrand{display:flex;flex-direction:column;height:100%;background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;color:var(--ink);text-decoration:none;}
.bbrand__logo{display:grid;place-items:center;aspect-ratio:16/7;background:var(--n950);padding:clamp(18px,3vw,40px);}
.bbrand__logo img{width:min(100%,300px);height:auto;}
.bbrand__bd{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.4vw,30px);}
.bbrand__k{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink);}
.bbrand__t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(28px,2.6vw,38px);line-height:.95;margin:0;}
.bbrand__d{font-size:15.5px;line-height:1.55;color:var(--ink-3);max-width:48ch;}
.bbrand__types{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.bbrand__types li{font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--rule-strong);border-radius:2px;color:var(--ink-2);}
.bbrand--link{transition:border-color 200ms ease,box-shadow 300ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .bbrand--link:hover{border-color:var(--rule-strong);box-shadow:0 20px 40px -34px rgba(14,14,17,.5);} }
.bbrand--link:focus-visible{outline:3px solid var(--red);outline-offset:3px;}
/* one brand: a single wide editorial row instead of a lonely tile */
.brands__grid--solo{grid-template-columns:1fr;}
.brands__grid--solo .bbrand{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}
.brands__grid--solo .bbrand__logo{aspect-ratio:auto;min-height:220px;}
.brands__grid--solo .bbrand__bd{justify-content:center;}
@media (max-width:760px){
  .brands__grid--solo .bbrand{grid-template-columns:1fr;}
  .brands__grid--solo .bbrand__logo{min-height:0;aspect-ratio:16/7;}
}
.bbrand__more{align-self:flex-start;margin-top:12px;}

/* ---- 08 guides: four up ------------------------------------------------------------ */
.guides--4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1100px){ .guides--4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){ .guides--4{grid-template-columns:1fr;} .guides--4 .gcard{min-height:0;} .guides--4 .gcard p{margin-bottom:18px;} }
.guides--4 .gcard{min-height:250px;}
.guides__foot{margin-top:clamp(24px,2.8vw,32px);}

/* ---- 09 FAQ ------------------------------------------------------------------------ */
.faq__more{margin-top:32px;}
@media (max-width:560px){ .faq__more .btn,.guides__foot .btn{width:100%;} }

/* ==========================================================================
   73. SITE-WIDE FIXES (found while building the Batteries page)
   - Reveal content stays visible without JavaScript: [data-rv] was hidden
     unconditionally, so a no-JS visitor saw blank sections on every page.
     Only pages with the .js class (set in <head>) hide content before reveal.
   ========================================================================== */
html:not(.js) [data-rv],html:not(.js) .rv-stagger>*{opacity:1!important;transform:none!important;clip-path:none!important;}
/* - Closed FAQ answers leave the tab order: links inside a collapsed panel were
     still focusable while invisible. Visibility flips after the collapse
     animation, so closing still animates.
   - Without JavaScript the answers are simply shown, since nothing can open them. */
.faq__i:has(> h3 > .faq__btn[aria-expanded="false"]) > .faq__p{visibility:hidden;transition:height 280ms var(--ease-drawer),visibility 0s linear 280ms;}
.faq__i:has(> h3 > .faq__btn[aria-expanded="true"]) > .faq__p{visibility:visible;transition:height 280ms var(--ease-drawer),visibility 0s;}
html:not(.js) .faq__p{height:auto!important;visibility:visible!important;}

/* ---- Reviews: the design pairs a red "Read all reviews" with a black secondary --------
   §41 in site.css painted the dark button red because the old markup used btn--dark for
   the primary. ReviewSummary now uses btn--primary for that, so dark is dark again. */
#reviews .rsum .btn--dark{background:var(--ink);}
#reviews .rsum .btn--dark:hover{background:#000;}

/* ---- Brand mark beside a section heading (reviews) ------------------------------------ */
.sec-head--mark{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,4vw,64px);}
.sec-head--mark .sec-head__aside{display:flex;justify-content:flex-end;align-items:center;max-width:none;padding-bottom:0;}
.sec-head--mark .bmark{display:block;height:auto;width:clamp(168px,20vw,286px);margin-left:auto;}
@media (max-width:860px){
  .sec-head--mark{grid-template-columns:1fr;}
  .sec-head--mark .sec-head__aside{justify-content:flex-start;}
  .sec-head--mark .bmark{margin-left:0;width:clamp(150px,34vw,200px);}
}

/* ==========================================================================
   74. HEADER — DARK TOP BAR (client reference, 30 Sep 2026)
   Measured from the reference at 1440 (4x capture):
     main row   92px, #18181B (--n900)      nav row   74px, #27272A (--n800)
     logo       177px wide                  search    52px, fill --n800, 1px --n700,
     button     --n950 "SEARCH"                        placeholder --n200, icon --n500
     find       211 x 52, brand red         help      46px ring --n300, red icon,
     nav        16px/500 white, carets --n500           label 13px --n200, number 18px/500 white
     gaps       logo→search 43, search→find 17, find→help 41
     promise    16px/500 --n200 with a red tick
   Sticky: the nav row folds away and the main row settles to 72px, as before.
   Dropdown panels stay white (they read as cards against the dark bar).
   ========================================================================== */
.hdr{background:var(--n900);border-bottom:0;color:#fff;}
.hdr.is-stuck{box-shadow:0 18px 40px -26px rgba(0,0,0,.7);}

/* ---- main row -------------------------------------------------------------------- */
@media (min-width:1181px){
  .hdr__main{min-height:92px;column-gap:17px;}
  .hdr .brand{margin-right:26px;}
  .hdr__find{margin-right:24px;}
  .hdr .brand img{width:177px;height:auto;}
  .hdr.is-stuck .hdr__main{min-height:72px;}
  .hdr.is-stuck .brand img[src]{width:140px;height:auto;}
}
/* 1181–1340: the same bar with a smaller logo and tighter gaps, so the search keeps its copy */
@media (min-width:1181px) and (max-width:1340px){
  .hdr .brand img{width:150px;}
  .hdr .brand{margin-right:10px;}
  .hdr__find{margin-right:8px;}
  .hdr.is-stuck .brand img[src]{width:130px;}
}

/* ---- search ---------------------------------------------------------------------- */
.hdr .hsearch{max-width:none;}
.hdr .hsearch__field{height:52px;background:var(--n800);border:1px solid var(--n700);border-radius:var(--radius);box-shadow:none;}
.hdr .hsearch__field:hover{border-color:var(--n600);}
.hdr .hsearch__field:focus-within{background:var(--n800);border-color:var(--n400);box-shadow:0 0 0 3px rgba(238,28,37,.55);}
.hdr .hsearch__ico{width:17px;height:17px;margin-left:17px;color:var(--n500);}
.hdr .hsearch input{padding:0 14px;color:#fff;caret-color:var(--r400);}
.hdr .hsearch input::placeholder{color:var(--n200);}
.hdr .hsearch__clear{color:var(--n400);}
.hdr .hsearch__clear:hover{background:var(--n700);color:#fff;}
.hdr .hsearch__go{background:var(--n950);color:#fff;border-left:1px solid var(--n700);padding-inline:19px;gap:10px;font-size:15.5px;letter-spacing:.01em;}
.hdr .hsearch__go:hover{background:#000;color:#fff;}
.hdr .hsearch__field:focus-within .hsearch__go{border-left-color:var(--n700);}
.hdr .hsearch__go svg{width:17px;height:17px;}

/* ---- find my battery + call ------------------------------------------------------ */
.hdr .hdr__find{font-size:15.5px;letter-spacing:.01em;}
@media (min-width:901px){ .hdr .hdr__find{padding-inline:21px;} }
@media (max-width:900px){ .hdr .hdr__find{font-size:14px;letter-spacing:.02em;} }
.hdr__find:focus-visible,.hdr__help:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.hdr__help{color:#fff;}
.hdr__help-ico{border:1px solid var(--n300);color:var(--red);background:transparent;}
.hdr__help:hover .hdr__help-ico{background:var(--red);border-color:var(--red);color:#fff;}
.hdr__help-txt{gap:8px;}
.hdr__help-lbl{font-size:13px;color:var(--n200);}
.hdr__help-num{font-size:18px;font-weight:500;letter-spacing:0;color:#fff;}
.hdr__help:hover .hdr__help-num{color:#fff;}

/* ---- nav row ----------------------------------------------------------------------- */
.hdr__nav{background:var(--n800);border-top:0;overflow:visible;}   /* visible: the dropdowns hang below it */
.hdr.is-stuck .hdr__nav{overflow:hidden;}
@media (min-width:1181px){ :root{--hdr-nav:74px;} }
.nav{margin-left:-14.5px;}
.nav__link{padding:0 14.5px;font-size:16px;font-weight:500;color:#fff;}
.nav__link::after{left:14.5px;right:14.5px;bottom:0;}
.nav__link:hover,.nav__item.is-open>.nav__link,.nav__link[aria-current="page"]{color:#fff;}
.nav__link:focus-visible{outline:3px solid #fff;outline-offset:-6px;border-radius:4px;}
.nav__caret{color:var(--n500);}
.nav__link:hover .nav__caret,.nav__item.is-open .nav__caret{color:var(--n300);}
.hdr__promise{font-size:16px;font-weight:500;color:var(--n200);gap:11px;}
.hdr__promise svg{width:13px;height:13px;color:var(--red);}
@media (max-width:1340px){
  .nav{margin-left:-12px;}
  .nav__link{padding-inline:12px;}
  .nav__link::after{left:12px;right:12px;}
}
/* dropdowns: hang from the bar's bottom edge; the Find My Battery panel sits under its own link */
.mega{top:100%;border-top:0;border-radius:0 0 8px 8px;}
/* the first two dropdowns open from their link's left edge, so neither runs off-screen */
.nav__item[data-mega]:nth-child(2) .mega{left:0;transform:translateX(0) translateY(-6px) scale(.985);transform-origin:top left;}
.nav__item[data-mega]:nth-child(2).is-open .mega{transform:translateX(0) translateY(0) scale(1);}

/* ---- tablet and phones: same dark bar, controls restyled for it --------------------- */
.hdr .burger{background:transparent;border:1px solid var(--n600);}
.hdr .burger:hover{border-color:var(--n300);}
.hdr .burger__b,.hdr .burger__b::before,.hdr .burger__b::after{background:#fff;}
.hdr .burger[aria-expanded="true"] .burger__b{background:transparent;}
@media (max-width:1180px){
  .hdr__help-ico{border-color:var(--n600);}
}
@media (max-width:900px){
  .hdr .hsearch__field{height:48px;}
  .hdr .hsearch__ico{margin-left:14px;}
  .hdr .hsearch input{padding:0 8px 0 10px;}
}

/* ---- the charge line reads on dark as well ---------------------------------------- */
.charge{bottom:0;}

/* ---- mobile drawer: its top strip matches the dark bar it opens from --------------- */
.drawer__top{background:var(--n900);border-bottom-color:var(--n800);}
.drawer__top .burger{background:transparent;border:1px solid var(--n600);}
.drawer__top .burger:hover{border-color:var(--n300);}
.drawer__top .burger__b::before,.drawer__top .burger__b::after{background:#fff;}

/* ==========================================================================
   75. BATTERIES HERO — GLOW STAGE (client brief, 30 Sep 2026)
   The client's QLD Battery render, lit like a product poster: a speed tunnel
   converging behind the battery, stadium-style floodlights, two orbit rings
   (brand red and white-hot) that pass behind the battery and wrap in front of
   it, embers at the base. Everything aligns on one vanishing point at the
   centre of the stage (see hero_art.py), so it holds together at every size.
   Stacking, bottom to top (section is its own stacking context):
     tunnel 0 · copy scrim 1 · battery cluster 3 · copy 4
   Motion: a short entrance, then comets, ring pulses and embers only while
   the hero is on screen. The battery itself stays still. Reduced motion
   shows the finished, still frame.
   ========================================================================== */
.bhero{--bh-bg:#0B0708;position:relative;overflow:hidden;isolation:isolate;background:var(--bh-bg);color:#fff;}
.bhero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--bh-bg) 0%,rgba(11,7,8,.96) 32%,rgba(11,7,8,.7) 44%,rgba(11,7,8,0) 58%);}
.bhero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,var(--bh-bg),rgba(11,7,8,0));}
.bhero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);align-items:center;gap:clamp(24px,4vw,64px);
  padding-block:clamp(28px,3.4vw,48px) clamp(40px,4.4vw,64px);}

/* ---- copy ------------------------------------------------------------------------ */
.bhero__copy{position:relative;z-index:4;}
.bhero__crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:clamp(22px,2.6vw,38px);font-size:13px;color:var(--n400);}
.bhero__crumbs a{display:inline-block;padding-block:6px;margin-block:-6px;color:var(--n300);text-decoration:none;text-underline-offset:3px;}   /* 24px+ target */
.bhero__crumbs a:hover{color:#fff;text-decoration:underline;}
.bhero__crumbs li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--n600);}
.bhero__crumbs [aria-current="page"]{color:#fff;}
.bhero .eyebrow{color:var(--n300);}
.bhero .eyebrow--line::after{background:rgba(255,255,255,.18);max-width:120px;}
.bhero__h{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.003em;line-height:.9;
  font-size:clamp(46px,calc(3.9vw + 22px),82px);margin:16px 0 22px;color:#fff;}
.bhero__h em{display:block;font-style:normal;color:var(--r500);text-shadow:0 0 26px rgba(238,28,37,.5),0 0 2px rgba(255,52,61,.6);}
.bhero .lede{color:var(--n300);max-width:44ch;}
.bhero__acts{margin-top:30px;}
.bhero__acts .btn--primary{box-shadow:0 14px 34px -14px rgba(238,28,37,.75);}
.bhero__facts{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:14px;line-height:1.35;color:var(--n300);}
.bhero__facts li{display:flex;align-items:center;gap:9px;}
.bhero__facts svg{width:14px;height:14px;flex:none;color:var(--r500);}

/* ---- stage ------------------------------------------------------------------------ */
.bhero__stage{position:relative;width:100%;max-width:620px;aspect-ratio:1;justify-self:center;margin-block:-44px -36px;}   /* the render's empty top and reflection bleed; the copy sets the height */
.bhero__tunnel{position:absolute;left:-200%;top:-150%;width:500%;max-width:none;height:400%;z-index:0;pointer-events:none;overflow:visible;}
.bhero__tunnel--live{will-change:transform;}   /* its own layer: the comets repaint alone */
/* the cluster: layers share the section's stacking order (tunnel 0, scrim 1, cluster 3, copy 4) */
.bhero__float{position:absolute;inset:0;}
.bhero__float>*{z-index:3;}
.bhero__glow{position:absolute;left:-12%;right:-12%;top:4%;bottom:-6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(238,28,37,.5),rgba(238,28,37,.16) 58%,rgba(238,28,37,0));}
.bhero__rings,.bhero__sparks{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.bhero__rings--back{opacity:.5;}   /* seen through the glass case, so dimmer than the near half */
.bhero__battery{position:absolute;left:0;right:0;top:1%;display:block;}   /* the render's black backdrop is keyed to alpha, so the glass case shows the tunnel through it */
.bhero__battery img{display:block;width:100%;height:auto;
  -webkit-mask-image:radial-gradient(ellipse 58% 56% at 50% 49%,#000 76%,transparent 100%);
          mask-image:radial-gradient(ellipse 58% 56% at 50% 49%,#000 76%,transparent 100%);}
.bhero__haze{position:absolute;left:8%;right:8%;bottom:-3%;height:16%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,214,216,.2),rgba(238,28,37,.14) 55%,rgba(238,28,37,0));}

/* travelling light: comets run out along the tunnel, a pulse runs round each ring */
.bh-comet path{stroke-dasharray:80 1000;stroke-dashoffset:-460;}
.bh-pulse path{stroke-dasharray:64 936;stroke-dashoffset:-620;}
.bh-ring--white .bh-pulse path{stroke-dashoffset:-140;}
.bh-spark{transform-box:fill-box;transform-origin:center;}

/* ---- entrance (JS adds .is-in once the render has loaded) ---------------------------- */
.js .bhero__battery{transform:translate3d(0,22px,0) scale(.97);}   /* no fade: the render is the page's LCP, so it paints at once and only settles */
.js .bhero__rings{opacity:0;transform:scale(.9);transform-origin:50% 61%;}
.js .bhero__sparks,.js .bhero__tunnel,.js .bhero__glow{opacity:0;}
.bhero.is-in .bhero__battery{transform:none;transition:transform 1000ms var(--ease-settle);}
.bhero.is-in .bhero__rings{opacity:1;transform:none;transition:opacity 700ms ease 180ms,transform 1100ms var(--ease-settle) 180ms;}
.bhero.is-in .bhero__rings--back{opacity:.5;}
.bhero.is-in .bhero__glow{opacity:1;transition:opacity 900ms ease;}
.bhero.is-in .bhero__tunnel{opacity:1;transition:opacity 1000ms ease 120ms;}
.bhero.is-in .bhero__sparks{opacity:1;transition:opacity 700ms ease 650ms;}

@media (prefers-reduced-motion:no-preference){
  .bhero.is-live .bh-comet path{animation:bh-comet var(--d) linear var(--dl) infinite;}
  .bhero.is-live .bh-pulse path{animation:bh-orbit var(--d) linear infinite;}
  .bhero.is-live .bh-ring--white .bh-pulse path{animation-delay:-2.4s;}
  .bhero.is-live .bh-spark{animation:bh-twinkle var(--d) ease-in-out var(--dl) infinite;}
}
@keyframes bh-comet{from{stroke-dashoffset:0;}to{stroke-dashoffset:-1000;}}
@keyframes bh-orbit{from{stroke-dashoffset:0;}to{stroke-dashoffset:-1000;}}
@keyframes bh-twinkle{0%,100%{opacity:.25;transform:scale(.7);}50%{opacity:1;transform:scale(1);}}
@media (prefers-reduced-motion:reduce){
  .js .bhero__battery,.js .bhero__rings,.js .bhero__sparks,.js .bhero__tunnel,.js .bhero__glow{opacity:1;transform:none;transition:none;}
  .js .bhero__rings--back{opacity:.5;}
}

/* ---- widths ------------------------------------------------------------------------- */
@media (min-width:1600px){ .bhero__stage{max-width:660px;} }
@media (max-width:1180px){
  .bhero__in{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);}
  .bhero__facts{gap:10px 18px;}
}
/* tablet and phones: heading and lede, then the battery, then the actions, so the
   render shows on the first screen without pushing the heading down */
@media (max-width:899px){
  .bhero__in{grid-template-columns:1fr;gap:0;padding-bottom:30px;
    grid-template-areas:"crumbs" "eyebrow" "h" "lede" "stage" "acts" "facts";}
  .bhero__copy{display:contents;}
  .bhero__copy>*{position:relative;z-index:4;}
  .bhero__crumbs{grid-area:crumbs;}
  .bhero .eyebrow{grid-area:eyebrow;}
  .bhero__h{grid-area:h;}
  .bhero .lede{grid-area:lede;}
  .bhero__stage{grid-area:stage;max-width:min(88vw,420px);margin-block:-6px -34px;}
  .bhero__acts{grid-area:acts;margin-top:0;}
  .bhero__facts{grid-area:facts;margin-top:24px;}
  .bhero::before{background:linear-gradient(180deg,var(--bh-bg) 0%,rgba(11,7,8,.9) 30%,rgba(11,7,8,.35) 40%,rgba(11,7,8,0) 46%,
    rgba(11,7,8,0) 64%,rgba(11,7,8,.78) 74%,rgba(11,7,8,.94) 82%);}
}
@media (max-width:560px){
  .bhero__acts .btn{width:100%;}
  .bhero__facts{flex-direction:column;gap:10px;}
  .bhero__crumbs ol{margin-bottom:22px;}
}

/* ==========================================================================
   76. BATTERY CATEGORY PAGES (BatteryCategoryTemplate): New Automotive,
   Reconditioned, AGM & EFB / Start-Stop. Everything else on these pages is the
   homepage's or the parent's own markup and CSS. New here, and only where the
   category page has a job the others don't:
     .bhero--product   the parent's glow banner with real product in place of the render
     .catnav--tabs     compact sibling switcher (the parent CatalogueNav's job, one row)
     .ovw__pts         value points in the overview split (.opt__list style)
     .shop--listing    the homepage quick-shop as the page's main listing
     .opt.is-current   the page's own range marked in the new vs reconditioned pair
   ========================================================================== */

/* ---- header: the Batteries item stays lit on its child pages ---------------------- */
.nav__link[aria-current="true"]{color:#fff;}
.nav__link[aria-current="true"]::after{transform:scaleX(1);}
.mega__a[aria-current="page"]{background:var(--n100);color:var(--ink);font-weight:500;}
.dgrp__inner a[aria-current="page"]{border-color:var(--red);color:var(--ink);}
.ft2__col a[aria-current="page"]{color:#fff;}
.acard__list a[aria-current="page"]{color:var(--ink);font-weight:500;}

/* ---- 01 banner: real product on the glow stage ----------------------------------------
   The product photos are lit for a white studio, so on the dark stage they get a thin
   red rim and a soft red bloom from behind (static filters on still images). The pair
   sits back-left / front-right inside the orbit rings, centred on the stage. */
.bhero--product .bhero__h{font-size:clamp(44px,calc(3.3vw + 22px),76px);text-wrap:balance;}
.bhero--product .bhero__h em{text-wrap:balance;}
/* PP Formula Condensed's hyphen is as wide as a letter and reads as a dash in caps; tighten it */
.bhero__h .hy{display:inline-block;transform:scaleX(.5);margin-inline:-.11em;}
.bhero__products{position:absolute;inset:0;}
.bhero__prod{position:absolute;display:block;height:auto;max-width:none;
  filter:drop-shadow(0 0 1px rgba(255,138,143,.55)) drop-shadow(0 0 26px rgba(238,28,37,.34)) drop-shadow(0 26px 22px rgba(0,0,0,.55));}
.bhero__prod--back{width:66%;left:-7%;top:10%;filter:brightness(.78) saturate(.9) drop-shadow(0 0 1px rgba(255,138,143,.45)) drop-shadow(0 0 22px rgba(238,28,37,.3)) drop-shadow(0 20px 18px rgba(0,0,0,.5));}
.bhero__prod--front{width:86%;left:10%;top:25%;}
.bhero__products:not(:has(.bhero__prod--back)) .bhero__prod--front{width:100%;left:0;top:16%;}
.bhero--product .bhero__glow{top:10%;bottom:-2%;background:radial-gradient(closest-side,rgba(238,28,37,.55),rgba(238,28,37,.18) 58%,rgba(238,28,37,0));}
.bhero--product .bhero__haze{bottom:0;}

/* call line: the banner's support row when a page offers a call instead of ticks */
.bhero__call{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:15px;line-height:1.4;color:var(--n300);}
.bhero__call-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:99px;background:rgba(238,28,37,.16);color:var(--r400);flex:none;}
.bhero__call-ico svg{width:14px;height:14px;}
.bhero__call a{color:#fff;font-weight:500;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px;
  display:inline-block;padding-block:8px;margin-block:-8px;transition:text-decoration-color 160ms ease;}
.bhero__call a:hover{text-decoration-color:var(--red);}
@media (max-width:899px){
  .bhero__call{grid-area:facts;margin-top:24px;}
  /* the pair fills the middle of the square stage: trim its empty top and bottom so the
     actions stay on the first screen (percent margins resolve against the hero width) */
  .bhero--product .bhero__stage{--st:min(82vw,400px);max-width:var(--st);margin-block:calc(var(--st) * -.1) calc(var(--st) * -.09);}
}
@media (max-width:430px){ .bhero--product .bhero__h{font-size:42px;} }
@media (max-width:359px){ .bhero--product .bhero__h{font-size:37px;} }

/* ---- 02 compact category switcher ------------------------------------------------------- */
.catnav--tabs{padding-block:clamp(34px,3.8vw,52px);background:var(--paper-2);border-bottom:1px solid var(--rule);}
.catnav__head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 40px;flex-wrap:wrap;margin-bottom:clamp(18px,2vw,26px);}
.catnav--tabs .d-3{max-width:none;}
.catnav--tabs .catnav__lede{margin-top:10px;font-size:15.5px;}
.catnav--tabs .catnav__alt{margin:0;}
.ctabs__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.ctabs__list>li{display:flex;min-width:0;}
.ctab{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:78px;padding:16px 18px;border:1px solid var(--rule-strong);border-radius:6px;
  background:var(--paper);color:var(--ink);text-decoration:none;
  transition:border-color 160ms ease,box-shadow 240ms var(--ease-out),transform 160ms var(--ease-out);}
.ctab__idx{font-family:var(--display);font-weight:700;font-size:22px;line-height:1;color:var(--red-ink);width:26px;flex:none;}
.ctab__txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.ctab__t{font-size:16.5px;font-weight:500;line-height:1.25;}
.ctab__d{font-size:13.5px;line-height:1.35;color:var(--ink-3);}
.ctab__ar{display:grid;place-items:center;width:34px;height:34px;border-radius:99px;background:var(--n100);color:var(--ink);flex:none;
  transition:background-color 160ms ease,color 160ms ease,transform 220ms var(--ease-out);}
.ctab__ar svg{width:11px;height:11px;}
@media (hover:hover) and (pointer:fine){
  .ctab:not(.is-current):hover{border-color:var(--ink);box-shadow:0 16px 30px -26px rgba(14,14,17,.5);}
  .ctab:not(.is-current):hover .ctab__ar{background:var(--red);color:#fff;transform:translate(2px,-2px);}
}
.ctab:not(.is-current):active{transform:scale(.99);}
.ctab:focus-visible{outline:3px solid var(--red);outline-offset:3px;}
.ctab.is-current{background:var(--n950);border-color:var(--n950);color:#fff;cursor:default;}
.ctab.is-current::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;border-radius:6px 6px 0 0;background:var(--red);}
.ctab.is-current .ctab__idx{color:var(--r400);}
.ctab.is-current .ctab__d{color:var(--n300);}
.ctab__state{flex:none;padding:6px 9px;border:1px solid rgba(255,255,255,.26);border-radius:2px;font-size:11px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;line-height:1;white-space:nowrap;color:#fff;}
@media (max-width:1100px){
  .ctab{padding:14px;gap:12px;}
  .ctab__d{display:none;}
}
/* tablet: three narrow tabs, so the number and state sit on one line and the name gets the full width */
@media (min-width:768px) and (max-width:1100px){
  .ctab{flex-wrap:wrap;align-items:center;row-gap:10px;}
  .ctab__txt{order:3;flex-basis:100%;}
  .ctab__state,.ctab__ar{margin-left:auto;}
}
@media (max-width:767px){
  .catnav__head{flex-direction:column;align-items:flex-start;}
  .ctabs__list{grid-template-columns:1fr;gap:8px;}
  .ctab{min-height:60px;}
  .ctab__t{font-size:16px;}
}
@media (max-width:359px){ .ctab__state{padding:5px 7px;font-size:10px;} }
@media (prefers-reduced-motion:reduce){ .ctab,.ctab__ar{transition:none;} .ctab:active{transform:none;} }

/* ---- 03 overview: value points ------------------------------------------------------------ */
.ovw__pts{margin:24px 0 0;max-width:52ch;}
.ovw__pts li{font-size:15.5px;}
@media (min-width:1101px){ .ovw__pts{grid-template-columns:repeat(2,minmax(0,max-content));column-gap:28px;} }
.page-cat .ovw .split__media img{aspect-ratio:700/952;object-fit:cover;}
@media (min-width:921px){ .page-cat .ovw .split__media{max-width:500px;justify-self:center;} }
@media (max-width:920px){ .page-cat .ovw .split__media img{aspect-ratio:4/3;object-position:50% 62%;} }

/* ---- 04 listing: the homepage quick-shop, as the page's main listing ------------------- */
.shop--listing{background:var(--paper-2);border-block:1px solid var(--rule);}
.shop--listing .shop__head .d-2 em{font-style:normal;color:var(--red);}
.shop--listing .shop__bar{border-color:var(--rule-strong);}
@media (min-width:1181px){ .shop--listing .shop__sel{max-width:220px;} .shop--listing .shop__search{flex:1 1 500px;max-width:500px;} }
.shop__note{display:flex;align-items:flex-start;gap:10px;margin:-6px 0 clamp(18px,2vw,24px);padding:12px 14px;border:1px solid var(--rule-strong);border-radius:4px;
  background:var(--paper);font-size:14.5px;line-height:1.5;color:var(--ink-2);}
.shop__note[hidden]{display:none;}
.shop__note svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--red);}
.shop__note a{color:var(--ink);font-weight:500;text-underline-offset:3px;}
.shop--listing .shop__empty{padding:18px;border:1px dashed var(--rule-strong);border-radius:4px;background:var(--paper);margin-bottom:4px;}
/* phones: the listing is the page's job, so products stack one per row (the homepage
   teaser scrolls sideways instead); the photo plate is a little shorter */
@media (max-width:600px){
  .shop--listing .shop__grid[data-view="grid"]{display:grid;grid-template-columns:1fr;gap:12px;margin-inline:0;padding:0;overflow:visible;}
  .shop--listing .shop__grid[data-view="grid"] .shop__item{flex:none;}
  .shop--listing .shop__grid[data-view="grid"] .pc__media{aspect-ratio:16/10;}
  .shop--listing .shop__grid[data-view="list"]{margin-inline:0;padding:0;overflow:hidden;}
}

/* ---- 05 new vs reconditioned: the page's own range is marked, not ranked ---------------- */
.opt__tags{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;flex:none;}
.opt__now{display:inline-flex;align-items:center;padding:6px 11px;border-radius:2px;background:var(--red);color:#fff;font-size:11.5px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.2;white-space:nowrap;}
.opt.is-current{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);}
.opt.is-current:hover{border-color:var(--red);}
/* phones: the name takes the full width with its tags under it, and the dark card's battery
   art steps aside so it never sits on the full-width button */
@media (max-width:560px){
  .vs-sec .opt__hd{flex-direction:column;gap:10px;}
  .vs-sec .opt__tags{justify-content:flex-start;}
  .vs-sec .opt__art,.vs-sec .opt__ribs{display:none;}
  .vs-sec .opt--dark .opt__p,.vs-sec .opt--dark .opt__list{max-width:none;}
}

/* ==========================================================================
   77. FIND MY BATTERY (FindMyBatteryTemplate). Main page: HOME → FIND MY BATTERY
   → six application pages. Everything else on the page is the homepage's or the
   Batteries pages' own markup and CSS. New here:
     .bhero--compact   the glow banner without a product stage: a darkened photo
     .fpath            the overview's visual, the three-step selection path
     .fmcard            the one Find My Battery category card (×6)
     .fhelp            the help strip under the six cards
   ========================================================================== */

/* ---- 01 banner: compact, vehicle-led ------------------------------------------------- */
.bhero--compact .bhero__in{display:block;padding-block:clamp(26px,3vw,40px) clamp(52px,5.4vw,80px);}
.bhero--compact .bhero__copy{max-width:640px;}
.bhero--compact .bhero__h{font-size:clamp(44px,calc(3.5vw + 20px),78px);text-wrap:balance;}
.bhero--compact::before{background:linear-gradient(90deg,var(--bh-bg) 0%,rgba(11,7,8,.94) 34%,rgba(11,7,8,.6) 50%,rgba(11,7,8,0) 66%);}
.bhero__bg{position:absolute;top:0;right:0;bottom:0;width:min(64%,1040px);z-index:0;pointer-events:none;isolation:isolate;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%);mask-image:linear-gradient(90deg,transparent 0%,#000 34%);}
/* the photo goes monochrome and takes the brand red, so it sits in the banner's palette;
   the headlights keep their white */
.bhero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:66% 46%;
  filter:grayscale(1) contrast(1.2) brightness(.74);}
.bhero__bg::before{content:"";position:absolute;inset:0;z-index:1;background:#EE1C25;mix-blend-mode:color;opacity:.32;}
.bhero__bg::after{content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(50% 60% at 68% 44%,rgba(238,28,37,.16),rgba(238,28,37,0) 70%),linear-gradient(0deg,rgba(11,7,8,.85) 0%,rgba(11,7,8,0) 38%);}
@media (max-width:899px){
  .bhero--compact .bhero__copy{display:block;max-width:none;}
  .bhero--compact .bhero__acts{margin-top:26px;}
  .bhero--compact .bhero__in{padding-bottom:40px;}
  .bhero__bg{width:100%;-webkit-mask-image:none;mask-image:none;}
  .bhero__bg img{object-position:70% 40%;opacity:.7;}
  .bhero--compact::before{background:linear-gradient(180deg,rgba(11,7,8,.9) 0%,rgba(11,7,8,.72) 46%,rgba(11,7,8,.92) 100%);}
}
@media (max-width:560px){ .bhero--compact .bhero__acts .btn{width:100%;} }
@media (max-width:430px){ .bhero--compact .bhero__h{font-size:42px;} }
@media (max-width:359px){ .bhero--compact .bhero__h{font-size:37px;} }

/* ---- 03 overview: the selection path ------------------------------------------------- */
.fov .split{align-items:center;}
.fov .d-2{max-width:17ch;}
.fov .d-2 em{display:block;font-style:normal;color:var(--red);}
.fov__go{margin-top:28px;}
.fov__go svg{width:10px;height:10px;flex:none;}
.fpath{position:relative;display:grid;padding:clamp(24px,2.8vw,40px);border-radius:8px;background:var(--n950);color:#fff;overflow:hidden;isolation:isolate;}
.fpath::before{content:"";position:absolute;right:-18%;bottom:-30%;width:80%;aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(238,28,37,.34),rgba(238,28,37,0));}
.fpath__step{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;padding-bottom:30px;}
.fpath__step:not(:last-child)::after{content:"";position:absolute;left:21px;top:52px;bottom:8px;width:2px;
  background:repeating-linear-gradient(180deg,var(--red) 0 6px,transparent 6px 12px);}
.fpath__step--end{padding-bottom:0;}
.fpath__n{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--red);border-radius:99px;
  font-family:var(--display);font-weight:700;font-size:19px;line-height:1;color:#fff;background:var(--n950);}
.fpath__bd{min-width:0;}
.fpath__t{margin:11px 0 14px;font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--n200);}
.fpath__icons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:372px;}
.fpath__ico{display:grid;place-items:center;aspect-ratio:1;border:1px solid rgba(255,255,255,.14);border-radius:4px;color:var(--n400);}
.fpath__ico svg{width:58%;height:58%;max-width:26px;}
.fpath__ico.is-on{border-color:var(--red);color:#fff;background:rgba(238,28,37,.18);box-shadow:inset 0 0 0 1px var(--red);}
.fpath__chips{display:flex;flex-wrap:wrap;gap:8px;}
.fpath__chips li{padding:9px 16px;border:1px solid rgba(255,255,255,.2);border-radius:3px;font-size:14.5px;line-height:1.2;color:#fff;}
.fpath__d{margin:0;font-size:15px;line-height:1.5;color:var(--n300);max-width:28ch;}
.fpath__step--end{position:static;}   /* so the battery below is placed in the panel, not the step */
.fpath__step--end .fpath__bd{max-width:calc(100% - min(50%,290px));}
/* the battery the path arrives at: bottom right of the panel */
.fpath .fpath__bat{position:absolute;border-radius:0;right:-3%;bottom:-5%;width:min(54%,330px);height:auto;z-index:-1;pointer-events:none;
  filter:drop-shadow(0 0 1px rgba(255,138,143,.5)) drop-shadow(0 0 24px rgba(238,28,37,.32)) drop-shadow(0 18px 18px rgba(0,0,0,.5));}
.fpath{padding-bottom:clamp(40px,4vw,56px);}
@media (max-width:920px){
  .fov .split__media{order:2;}
  .fov .d-2{max-width:none;}
}
@media (max-width:520px){
  .fpath__step{grid-template-columns:36px minmax(0,1fr);column-gap:14px;padding-bottom:24px;}
  .fpath__step:not(:last-child)::after{left:17px;top:44px;}
  .fpath__n{width:36px;height:36px;font-size:16px;}
  .fpath__t{margin-top:8px;}
  .fpath__icons{gap:6px;}
  .fpath__step--end .fpath__bd{max-width:none;}
  .fpath .fpath__bat{position:static;grid-column:2;width:160px;margin:8px 0 -8px;}
  .fpath{padding-bottom:24px;}
}

/* ---- 04–09 the six applications: one card, six times ---------------------------------- */
.fpaths .d-2 em{font-style:normal;color:var(--red);}
.fpaths__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);}
.fpaths__grid>li{display:flex;min-width:0;}
.fmcard{display:flex;flex-direction:column;width:100%;min-width:0;border:1px solid var(--rule-strong);border-radius:6px;overflow:hidden;
  background:var(--paper);color:var(--ink);text-decoration:none;
  transition:border-color 160ms ease,box-shadow 260ms var(--ease-out),transform 260ms var(--ease-out);}
.fmcard__media{position:relative;display:block;aspect-ratio:2/1;overflow:hidden;background:var(--n900);}
.fmcard__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform 700ms var(--ease-out);}
.fmcard__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,14,17,.3),rgba(14,14,17,0) 45%);}
.fmcard__bd{display:flex;flex-direction:column;flex:1;min-width:0;padding:18px clamp(18px,1.6vw,24px) 0;}
.fmcard__n{font-family:var(--display);font-weight:700;font-size:20px;line-height:1;color:var(--red-ink);margin-bottom:10px;}
.fmcard__t{margin:0 0 10px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2vw,30px);line-height:.96;letter-spacing:0;color:var(--ink);overflow-wrap:break-word;}
.fmcard__d{display:block;font-size:15.5px;line-height:1.45;color:var(--ink-2);}
.fmcard__s{display:block;margin:8px 0 20px;font-size:14px;line-height:1.5;color:var(--ink-3);}
.fmcard__cta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding:14px 0 16px;border-top:1px solid var(--rule);
  font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;color:var(--ink);}
.fmcard__ar{display:grid;place-items:center;width:38px;height:38px;border-radius:99px;background:var(--red);color:#fff;flex:none;transition:transform 260ms var(--ease-out);}
.fmcard__ar svg{width:12px;height:12px;}
@media (hover:hover) and (pointer:fine){
  .fmcard:hover{border-color:var(--ink);box-shadow:0 22px 40px -32px rgba(14,14,17,.55);transform:translateY(-2px);}
  .fmcard:hover .fmcard__media img{transform:scale(1.04);}
  .fmcard:hover .fmcard__ar{transform:translate(3px,-3px);}
}
.fmcard:active{transform:scale(.995);}
.fmcard:focus-visible{outline:3px solid var(--red);outline-offset:3px;}
.fmcard.is-picked{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);}
@media (max-width:1100px){ .fpaths__grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
/* phones: a compact row per application (photo beside the words) so all six scan in
   about two screens; the supporting line steps back, everything else stays */
@media (max-width:600px){
  .fpaths__grid{grid-template-columns:1fr;gap:10px;}
  .fmcard{display:grid;grid-template-columns:36% minmax(0,1fr);}
  .fmcard__media{aspect-ratio:auto;height:100%;min-height:150px;}
  .fmcard__bd{padding:14px 14px 0;}
  .fmcard__n{font-size:17px;margin-bottom:6px;}
  .fmcard__t{font-size:21px;margin-bottom:6px;}
  .fmcard__d{font-size:14px;line-height:1.4;}
  .fmcard__s{display:none;}
  .fmcard__cta{margin-top:12px;padding:10px 0 12px;font-size:12px;letter-spacing:.05em;}
  .fmcard__ar{width:30px;height:30px;}
  .fmcard__ar svg{width:10px;height:10px;}
}
@media (prefers-reduced-motion:reduce){ .fmcard,.fmcard__media img,.fmcard__ar{transition:none;} .fmcard:hover,.fmcard:active{transform:none;} .fmcard:hover .fmcard__media img{transform:none;} }

/* ---- help strip ------------------------------------------------------------------------ */
.fhelp{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px 26px;margin-top:clamp(18px,2vw,26px);
  padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,32px);border-radius:6px;background:var(--n950);color:#fff;}
.fhelp__ico{display:grid;place-items:center;width:50px;height:50px;border-radius:99px;background:rgba(238,28,37,.16);color:var(--r400);}
.fhelp__ico svg{width:20px;height:20px;}
.fhelp__t{margin:0 0 6px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.1vw,30px);line-height:1;color:#fff;}
.fhelp p{margin:0;font-size:15px;line-height:1.5;color:var(--n300);max-width:52ch;}
.fhelp__acts{margin:0;flex-wrap:nowrap;}
@media (max-width:1100px){ .fhelp{grid-template-columns:auto minmax(0,1fr);} .fhelp__acts{grid-column:1 / -1;flex-wrap:wrap;} }
@media (max-width:560px){ .fhelp{grid-template-columns:1fr;} .fhelp__ico{display:none;} .fhelp__acts .btn{width:100%;} }

/* ==========================================================================
   78. ROADSIDE BATTERY REPLACEMENT (RoadsideTemplate). One primary action on
   every section: call 0477 577 007 (text is the second). Built from existing
   pieces: the utility band, the internal banner + homepage roadside tiles,
   the process flow, the trust strip, the location block, guide cards, reviews,
   FAQ and the final CTA. New here: .rsk (what to tell us) and the dark CTA.
   ========================================================================== */

/* ---- 01 top band: roadside hours, live state, call / text --------------------------------- */
.band--rs{box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);}
.band--rs .band__msg{color:var(--n300);}
.band--rs .band__msg b{font-weight:500;color:#fff;}
.chip--idle::before{display:none;}
.band--rs .band__link--road{color:#fff;font-weight:500;}
@media (max-width:700px){ .band--rs .band__link--road{display:inline-flex;} .band--rs .band__msg{display:none;} }
.rs-sm{display:none;}
@media (max-width:389px){ .rs-lg{display:none;} .rs-sm{display:inline;} }

/* ---- 02 header: call is the red button here, text is the helper beside it -------------------- */
.page-rs .hdr__find svg{width:17px;height:17px;}

/* ---- 03 banner: the homepage roadside tiles under the actions ------------------------------ */
/* The copy column is narrow, so the day chips sit under the hours text instead of beside it. */
.bhero__tiles.rsd__tiles--2{margin-top:30px;max-width:640px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px;}
.bhero__tiles.rsd__tiles--2 li{flex-wrap:wrap;align-items:flex-start;align-content:flex-start;padding:16px 18px;background:rgba(14,14,17,.66);}
.bhero__tiles.rsd__tiles--2 li>span:not(.rsd__ico):not(.rsd__days){flex:1 1 0;min-width:0;}
.bhero__tiles.rsd__tiles--2 .rsd__days{flex-basis:100%;margin:10px 0 0 48px;}
.bhero__tiles.rsd__tiles--2 b{font-size:15px;line-height:1.3;}
.bhero__tiles.rsd__tiles--2 small{font-size:13.5px;}
@media (max-width:560px){
  .bhero__tiles.rsd__tiles--2{grid-template-columns:1fr;margin-top:24px;}
  .bhero__tiles.rsd__tiles--2 li{padding:14px 16px;}
}

/* ---- 04 what we do: the process flow, four up ---------------------------------------------- */
@media (min-width:1101px){ .flow--4{grid-template-columns:repeat(4,minmax(0,1fr));} }
.rs-service .fnode__n{font-family:var(--display);font-size:22px;letter-spacing:0;line-height:1;}
.rs-service .sec-head .d-2 em,.rs-why .d-2 em,.rs-area .d-2 em,.links-sec .d-2 em{font-style:normal;color:var(--red);}
/* phones: a numbered list, number on the left, so the four steps read in one glance */
@media (max-width:820px){
  .flow--4{gap:14px;}
  .flow--4 .fnode{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:baseline;padding:18px 18px 18px 16px;}
  .flow--4 .fnode__n{grid-row:span 2;margin:0;}
  .flow--4 .fnode h3{margin-bottom:6px;}
}
@media (max-width:1100px) and (min-width:821px){
  .flow--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .flow--4 .fnode:nth-child(2n)::after{display:none;}
}

/* ---- 05 stuck? start here -------------------------------------------------------------------- */
.rsk__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy side" "acts side";
  column-gap:clamp(32px,6vw,104px);row-gap:28px;align-items:start;}
.rsk__copy{grid-area:copy;align-self:end;}
.rsk__side{grid-area:side;align-self:center;}
.rsk__acts{grid-area:acts;margin:0;align-self:start;}
.rsk h2 em{display:block;font-style:normal;color:var(--red);}
.rsk .lede{margin-top:20px;color:#fff;}
.rsk__p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--n300);max-width:46ch;}
.rsk__lbl{margin:0 0 12px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--n400);}
.rsk__list{display:grid;border-top:1px solid rgba(255,255,255,.14);}
.rsk__list li{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.14);}
.rsk__n{font-family:var(--display);font-weight:700;font-size:40px;line-height:1;color:var(--red);}
.rsk__txt b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2vw,28px);line-height:1;color:#fff;}
.rsk__txt small{display:block;margin-top:6px;font-size:14.5px;line-height:1.4;color:var(--n400);}
@media (max-width:900px){
  .rsk__in{grid-template-columns:1fr;grid-template-areas:"copy" "side" "acts";row-gap:26px;}
  .rsk__copy,.rsk__side{align-self:start;}
}
@media (max-width:560px){
  .rsk__list li{grid-template-columns:48px minmax(0,1fr);padding:15px 0;}
  .rsk__n{font-size:32px;}
  .rsk__txt b{font-size:21px;}
  .rsk__acts .btn{width:100%;}
}

/* ---- 06 replacement batteries: three compact guide-style cards ------------------------------ */
.guides--3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:700px){
  .guides--3{grid-template-columns:1fr;}
  .guides--3 .gcard{min-height:0;}
  .guides--3 .gcard__ft{margin-top:0;}
  .guides--3 .gcard p{margin-bottom:18px;}
}

/* ---- 09 reviews: with two columns, the third review takes the full row instead of leaving a gap */
@media (min-width:601px) and (max-width:980px){ .reviews--3 .rev:nth-child(3):last-child{grid-column:1/-1;} .reviews--3 .rev:nth-child(3):last-child .rev__q{max-width:66ch;} }

/* ---- 07 why us: the trust strip as a three-by-two grid -------------------------------------- */
.rs-why .trust__list.trust__list--grid{grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);}
.rs-why .trust__list.trust__list--grid li{grid-column:auto;padding:clamp(22px,2.2vw,30px) clamp(18px,2vw,32px);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);border-top:0;}
.rs-why .trust__list.trust__list--grid li:nth-child(3n){border-right:0;padding-right:0;}
.rs-why .trust__list.trust__list--grid li:nth-child(3n+1){padding-left:0;}
.rs-why .trust__list.trust__list--grid li:nth-last-child(-n+3){border-bottom:0;}
@media (max-width:900px){
  .rs-why .trust__list.trust__list--grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .rs-why .trust__list.trust__list--grid li,.rs-why .trust__list.trust__list--grid li:nth-child(3n),.rs-why .trust__list.trust__list--grid li:nth-child(3n+1){
    padding:20px 16px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);}
  .rs-why .trust__list.trust__list--grid li:nth-child(2n){border-right:0;padding-right:0;}
  .rs-why .trust__list.trust__list--grid li:nth-child(2n+1){padding-left:0;}
  .rs-why .trust__list.trust__list--grid li:nth-last-child(-n+2){border-bottom:0;}
}
@media (max-width:560px){
  .rs-why .trust__list.trust__list--grid{grid-template-columns:1fr;}
  .rs-why .trust__list.trust__list--grid li,.rs-why .trust__list.trust__list--grid li:nth-child(n){padding:18px 0;border-right:0;border-bottom:1px solid var(--rule);}
  .rs-why .trust__list.trust__list--grid li:last-child{border-bottom:0;}
}

/* ---- 08 service area and hours: the location block, roadside first -------------------------- */
.rs-area__note{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ink-3);}
.rs-area__note a{color:var(--ink);font-weight:500;text-underline-offset:3px;}
.rs-area__tel{color:var(--ink);text-decoration:none;}
.rs-area__tel:hover{color:var(--red-ink);}
.rs-area__acts{margin-top:14px;}
.rs-area .loc__map{min-height:clamp(320px,38vw,480px);}

/* ---- 11 final CTA, dark: the roadside photo under a red glow --------------------------------- */
.fcta.fcta--dark{background:var(--n950);}
.fcta.fcta--dark::before{content:"";position:absolute;inset:0;left:0;top:0;width:auto;height:auto;transform:none;
  background:url("../images/banners/warehouse-stock-tall.webp") 60% 40%/cover no-repeat;opacity:.2;filter:grayscale(1);mix-blend-mode:normal;}
.fcta.fcta--dark::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 60% at 50% 42%,rgba(238,28,37,.24),rgba(238,28,37,0) 72%),linear-gradient(180deg,rgba(14,14,17,.55),rgba(14,14,17,.85));}
.fcta--dark .d-1 em{font-style:normal;color:var(--red);}
.fcta--dark .lede{color:var(--n300);max-width:52ch;}
.fcta--dark .btn--primary{border-color:var(--red);}
.fcta__eyebrow{justify-content:center;margin-bottom:16px;color:var(--n300);}
.fcta__info{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:28px;font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);}
.fcta__info li{position:relative;}
.fcta__info li+li::before{content:"";position:absolute;left:-12px;top:50%;width:3px;height:3px;border-radius:99px;background:var(--red);transform:translateY(-50%);}
@media (max-width:560px){ .fcta__info{flex-direction:column;gap:6px;} .fcta__info li+li::before{display:none;} }

/* ==========================================================================
   79. ABOUT / FAMILY BUSINESS (AboutTemplate). The homepage's own sections
   carry the shared information (trust strip, #family, #location, final CTA);
   this adds the work route, the team intro, the principles and the brands
   block. Every colour and face comes from the existing tokens.
   ========================================================================== */

/* ---- 04 family story: the homepage split, with one more paragraph ---------------------------- */
.ab-story .d-2 em{font-style:normal;color:var(--red);}
.ab-story .split{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);}
.ab-story__lede{margin-top:20px;}
.ab-story__p{margin-top:14px;font-size:16.5px;line-height:1.65;color:var(--ink-3);max-width:52ch;}
@media (max-width:920px){ .ab-story .split{grid-template-columns:1fr;} }

/* ---- 04b how we work today: five stops on one line, drawn in order ------------------------- */
.wroute{--g:clamp(16px,2.2vw,32px);--node:44px;margin-top:clamp(64px,8vw,112px);padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--rule);}
.wroute__h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(34px,3.6vw,52px);line-height:.95;}
.wroute__h em{font-style:normal;color:var(--red);}
.wroute__lede{margin-top:12px;font-size:17px;line-height:1.55;color:var(--ink-3);max-width:48ch;}
.wroute__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g);margin-top:clamp(32px,4vw,48px);}
.wroute__stop{position:relative;padding-top:calc(var(--node) + 22px);}
.wroute__n{position:absolute;top:0;left:0;z-index:1;width:var(--node);height:var(--node);border-radius:99px;display:grid;place-items:center;
  background:var(--red);border:2px solid var(--red);color:#fff;font-family:var(--display);font-weight:700;font-size:19px;line-height:1;
  transition:background-color 260ms ease,border-color 260ms ease,color 260ms ease;transition-delay:calc(var(--i) * 240ms);}
/* the line between this stop and the next: a grey track and a red fill on top */
.wroute__stop:not(:last-child)::before,.wroute__stop:not(:last-child)::after{content:"";position:absolute;top:calc(var(--node) / 2 - 1px);
  left:var(--node);right:calc(-1 * var(--g));height:2px;}
.wroute__stop:not(:last-child)::before{background:var(--rule-strong);}
.wroute__stop:not(:last-child)::after{background:var(--red);transform-origin:left center;
  transition:transform 240ms linear;transition-delay:calc(var(--i) * 240ms + 120ms);}
.wroute__t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.1vw,30px);line-height:1;}
.wroute__d{margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink-3);max-width:28ch;}
/* before the block reveals (JS only), the route is unlit; it lights stop by stop */
.js .wroute:not(.rv-in) .wroute__n{background:var(--paper);border-color:var(--rule-strong);color:var(--ink-3);}
.js .wroute:not(.rv-in) .wroute__stop::after{transform:scaleX(0);}
.js .wroute:not(.rv-in) .wroute__n,.js .wroute:not(.rv-in) .wroute__stop::after{transition-delay:0ms;}
.wroute__hist{margin-top:clamp(36px,4vw,52px);}
.wroute__hist-h{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.wroute__hist-list{display:grid;gap:10px;margin-top:12px;}
.wroute__hist-list li{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;}
.wroute__hist-list b{font-family:var(--display);font-weight:700;font-size:22px;color:var(--red-ink);}
@media (max-width:1100px) and (min-width:761px){ .wroute__d{font-size:14.5px;} }
@media (max-width:760px){
  .wroute{--node:40px;}
  .wroute__list{grid-template-columns:1fr;gap:0;}
  .wroute__stop{padding:0 0 26px calc(var(--node) + 18px);min-height:calc(var(--node) + 26px);}
  .wroute__stop:last-child{padding-bottom:0;}
  .wroute__n{font-size:17px;}
  .wroute__t{padding-top:9px;font-size:24px;}
  .wroute__d{max-width:none;}
  .wroute__stop:not(:last-child)::before,.wroute__stop:not(:last-child)::after{top:var(--node);bottom:0;left:calc(var(--node) / 2 - 1px);right:auto;width:2px;height:auto;}
  .wroute__stop:not(:last-child)::after{transform-origin:center top;}
  .js .wroute:not(.rv-in) .wroute__stop::after{transform:scaleY(0);}
}
@media (prefers-reduced-motion:reduce){
  .wroute__n,.wroute__stop::after{transition:none!important;}
  .js .wroute:not(.rv-in) .wroute__n{background:var(--red);border-color:var(--red);color:#fff;}
  .js .wroute:not(.rv-in) .wroute__stop::after{transform:none;}
}

/* ---- 05 team: three plain statements, then the profiles (or the to-confirm row) --------------- */
.team .d-2 em{font-style:normal;color:var(--red);}
.team__head{max-width:760px;}
.team__head .lede{margin-top:18px;max-width:60ch;}
.team__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(32px,4vw,52px);border-top:1px solid var(--rule);}
.team__list li{padding:clamp(24px,2.6vw,34px) clamp(20px,2.4vw,36px);border-right:1px solid var(--rule);}
.team__list li:first-child{padding-left:0;}
.team__list li:last-child{border-right:0;padding-right:0;}
.team__list .trust__ico{margin-bottom:18px;}
.team__t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.1vw,30px);line-height:1;}
.team__d{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--ink-3);max-width:34ch;}
.team__todo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:clamp(20px,2.4vw,28px);padding:16px 18px;
  border:1px dashed var(--rule-strong);border-radius:var(--radius);font-size:14.5px;color:var(--ink-3);}
.team__people{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(24px,3vw,36px);}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);}
.person__n{display:block;margin-top:12px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:24px;line-height:1;}
.person__r{display:block;margin-top:4px;font-size:14.5px;color:var(--ink-3);}
@media (max-width:900px){
  .team__list{grid-template-columns:1fr;}
  .team__list li,.team__list li:first-child,.team__list li:last-child{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;
    padding:22px 0;border-right:0;border-bottom:1px solid var(--rule);}
  .team__list li:last-child{border-bottom:0;}
  .team__list .trust__ico{grid-row:span 2;margin:0;}
  .team__d{max-width:none;}
}

/* ---- 06 the way we do business: dark, five numbered rows --------------------------------- */
.prin__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,104px);align-items:start;}
.prin__copy{position:sticky;top:calc(var(--header-h, 80px) + 32px);}
.prin .d-2 em{display:block;font-style:normal;color:var(--red);}
.prin .lede{margin-top:20px;color:#fff;}
.prin__body{margin-top:10px;font-size:16px;line-height:1.6;color:var(--n300);max-width:44ch;}
.prin__list{border-top:1px solid rgba(255,255,255,.14);}
.prin__list li{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:baseline;gap:14px;padding:clamp(20px,2.2vw,28px) 0;
  border-bottom:1px solid rgba(255,255,255,.14);}
.prin__n{font-family:var(--display);font-weight:700;font-size:clamp(34px,3vw,44px);line-height:1;color:var(--red);}
.prin__t{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.2vw,32px);line-height:1;color:#fff;}
.prin__d{display:block;margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--n300);max-width:48ch;}
@media (max-width:900px){
  .prin__in{grid-template-columns:1fr;gap:28px;}
  .prin__copy{position:static;}
}
@media (max-width:560px){
  .prin__list li{grid-template-columns:48px minmax(0,1fr);gap:10px;}
  .prin__n{font-size:30px;}
  .prin__t{font-size:22px;}
}
@media (prefers-reduced-motion:reduce){ .prin__copy{position:static;} }

/* ---- 07 batteries we supply: the QLD Battery card + a pending slot ---------------------------- */
.brands--about .d-2 em{font-style:normal;color:var(--red);}
.brands__lede{margin-top:16px;max-width:56ch;}
.brands--about .brands__grid{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);margin-top:clamp(28px,3.4vw,44px);}
.bbrand--lead{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);}
.bbrand__shot{display:grid;place-items:center;background:var(--n950);padding:clamp(18px,2.4vw,32px);}
.bbrand__shot img{width:min(100%,400px);height:auto;}
.bbrand--lead .bbrand__bd{justify-content:center;}
.bbrand--pending{background:transparent;border-style:dashed;border-color:var(--rule-strong);}
.bbrand--pending .bbrand__bd{height:100%;justify-content:center;align-items:flex-start;}
.bbrand--pending .bbrand__t{color:var(--ink-3);}
.brands__ranges{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:clamp(24px,3vw,32px);}
.brands__ranges>span{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.brands__ranges ul{display:flex;flex-wrap:wrap;gap:10px 24px;}
.brands__ranges .tlink svg{width:10px;height:10px;flex:none;}
@media (max-width:1100px){
  .brands--about .brands__grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .bbrand--lead{grid-template-columns:1fr;}
  .bbrand__shot img{width:min(100%,300px);}
}

/* ---- 08 visit: the homepage location block, plus the local line ------------------------------ */
#location .d-2 em{font-style:normal;color:var(--red);}
.ab-visit__acts{margin-top:18px;}
#location .loc__blk--area .body-sm{margin:0;}
.local{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,5vw,80px);align-items:end;
  margin-top:clamp(40px,5vw,72px);padding-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--rule);}
.local__line{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(36px,4.4vw,64px);line-height:.95;}
.local__line em{display:block;font-style:normal;color:var(--red);}
.local__text{font-size:17px;line-height:1.6;color:var(--ink-3);max-width:46ch;padding-bottom:4px;}
.local__comm{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:15px;color:var(--ink-3);}
@media (max-width:820px){ .local{grid-template-columns:1fr;align-items:start;} }

/* ---- 09 final CTA (red): three short service lines under the buttons -------------------------- */
.fcta:not(.fcta--dark) .fcta__eyebrow{color:rgba(255,255,255,.88);}
.fcta:not(.fcta--dark) .fcta__eyebrow::before{background:#fff;}
.page-about .fcta .d-1 em{font-style:normal;}
.fcta:not(.fcta--dark) .fcta__info{color:rgba(255,255,255,.9);}
.fcta:not(.fcta--dark) .fcta__info li+li::before{background:rgba(255,255,255,.7);}

/* ==========================================================================
   80. SERVICE PAGES (ServicePageTemplate): Roadside, Free Battery Testing &
   Fitting, Battery Recycling. The sections are the shared components (§78
   flow, link cards, trust grid, dark CTA); this adds the request-help form in
   the banner, the overview's product plate, titled benefits and key line.
   ========================================================================== */

/* ---- header: Call is the red button on every service page --------------------------------- */
.page-svc .hdr__find svg{width:17px;height:17px;}

/* ---- 01/02 banner with the request-help form ------------------------------------------- */
.bhero--form .bhero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,410px);gap:clamp(32px,5vw,88px);align-items:center;}
.bhero--form .bhero__copy{max-width:600px;}
.bhero__aside{position:relative;z-index:4;}
.sform{gap:0;padding:clamp(22px,2.2vw,30px);background:rgba(14,14,17,.8);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 30px 60px -40px rgba(0,0,0,.8);}
.sform__h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(28px,2.4vw,34px);line-height:.95;color:#fff;}
.sform__lede{margin:8px 0 18px;font-size:14.5px;line-height:1.5;color:var(--n300);}
.sform .field{margin-bottom:12px;}
.sform .field-row{gap:12px;}
.sform .field__l{color:var(--n300);}
.sform select{padding-right:34px;text-overflow:ellipsis;}
.sform input::placeholder{color:var(--n500);}

.sform__go{width:100%;justify-content:center;margin-top:6px;}
.sform .form__ok{margin-top:14px;font-size:14.5px;line-height:1.45;}
.form__ok--err{background:#FEF2F2;border-color:#FCA5A5;color:#991B1B;}
.sform__alt{margin-top:14px;text-align:center;font-size:14.5px;color:var(--n300);}
.sform__alt a{color:#fff;font-weight:500;text-underline-offset:3px;}
.sform__note{margin-top:10px;text-align:center;font-size:12.5px;line-height:1.45;color:var(--n400);}
.sform__note a{color:var(--n300);text-underline-offset:2px;}
@media (max-width:1100px) and (min-width:900px){ .bhero--form .bhero__in{grid-template-columns:minmax(0,1fr) minmax(320px,360px);align-items:start;} }
@media (max-width:899px){
  .bhero--form .bhero__in{display:block;}
  .bhero__aside{margin-top:30px;max-width:560px;}
}
@media (max-width:1100px) and (min-width:900px){ .sform .field-row{grid-template-columns:1fr;gap:0;} }
@media (max-width:430px){ .sform .field-row{grid-template-columns:1fr;gap:0;} }

/* ---- 03 overview: product on a dark plate, titled benefits, the key line ---------------------- */
.page-svc .ovw .d-2 em{display:block;font-style:normal;color:var(--red);}
.split__media--plate img{aspect-ratio:4/3;object-fit:contain;padding:clamp(22px,4vw,56px);
  background:radial-gradient(60% 55% at 50% 58%,rgba(238,28,37,.28),rgba(238,28,37,0) 70%),var(--n950);}
.ovw__ben{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin-top:26px;}
.ovw__ben li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;}
.ovw__ben svg{width:16px;height:16px;margin-top:3px;color:var(--red);}
.ovw__ben b{display:block;font-weight:500;font-size:16px;color:var(--ink);}
.ovw__ben span{font-size:15px;line-height:1.5;color:var(--ink-3);}
.ovw__key{margin:30px 0 24px;padding-top:24px;border-top:1px solid var(--rule);
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,2.8vw,42px);line-height:.95;}
.ovw__key em{font-style:normal;color:var(--red);}
@media (max-width:560px){
  .ovw__ben{grid-template-columns:1fr;gap:14px;}
  .page-svc .ovw .btn-row .btn{width:100%;justify-content:center;}
}

/* ---- 08 FAQ: an unconfirmed answer shows the chip first ------------------------------------- */
.faq__in .confirm{margin-right:8px;vertical-align:2px;}
@media (max-width:920px){ .split__media--plate{max-width:600px;} }

/* ==========================================================================
   81. CONTACT (ContactTemplate). The interior banner opens the page and holds
   the six intent tiles; the message form is the site's .form--light fields
   in the FAQ page-grid with an .acard help panel; direct contact is a dark
   three-column strip; the location is the homepage #location block.
   ========================================================================== */

/* ---- 03 intent: the banner, then six choice tiles ------------------------------------------ */
.bhero--intent{background:radial-gradient(55% 75% at 88% 0%,rgba(238,28,37,.16),rgba(238,28,37,0) 62%),var(--bh-bg);}
.bhero--intent .bhero__in{padding-bottom:clamp(26px,2.8vw,36px);}
.bhero--intent .bhero__copy{max-width:720px;}
.bhero--intent .bhero__h em{font-style:normal;color:var(--red);}
.cx-intent{position:relative;z-index:3;padding-bottom:clamp(48px,5.6vw,88px);}
.cx-intent__set{border:0;margin:0;padding:0;min-width:0;}
.cx-intent__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.cx-opt{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);background:rgba(255,255,255,.035);cursor:pointer;color:#fff;
  transition:border-color 180ms ease,background-color 180ms ease,box-shadow 180ms ease,transform 160ms cubic-bezier(.23,1,.32,1);}
.cx-opt__in{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.cx-opt__top{display:flex;align-items:center;justify-content:space-between;}
.cx-opt__n{font-family:var(--display);font-weight:700;font-size:20px;line-height:1;color:var(--red);}
.cx-opt__dot{display:grid;place-items:center;width:20px;height:20px;border-radius:99px;border:1.5px solid rgba(255,255,255,.42);transition:background-color 180ms ease,border-color 180ms ease;}
.cx-opt__dot::after{content:"";width:8px;height:8px;border-radius:99px;background:#fff;transform:scale(0);transition:transform 200ms cubic-bezier(.23,1,.32,1);}
.cx-opt__t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.1vw,30px);line-height:.98;}
.cx-opt__d{font-size:14.5px;line-height:1.5;color:var(--n300);}
@media (hover:hover) and (pointer:fine){ .cx-opt:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.06);} }
.cx-opt:active{transform:scale(.985);}
.cx-opt.is-on,.cx-opt:has(.cx-opt__in:checked){border-color:var(--red);background:rgba(238,28,37,.1);box-shadow:inset 0 0 0 1px var(--red);}
.cx-opt.is-on .cx-opt__dot,.cx-opt:has(.cx-opt__in:checked) .cx-opt__dot{border-color:var(--red);background:var(--red);}
.cx-opt.is-on .cx-opt__dot::after,.cx-opt:has(.cx-opt__in:checked) .cx-opt__dot::after{transform:scale(1);}
.cx-opt:has(.cx-opt__in:focus-visible){outline:3px solid #fff;outline-offset:3px;}
@media (max-width:1023px){ .cx-intent__grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){
  .cx-intent__grid{grid-template-columns:1fr;gap:10px;}
  .cx-opt{display:grid;grid-template-columns:minmax(0,1fr) 20px;column-gap:14px;row-gap:6px;padding:16px 18px 18px;}
  .cx-opt__top{display:contents;}
  .cx-opt__n{grid-column:1;grid-row:1;font-size:16px;}
  .cx-opt__dot{grid-column:2;grid-row:1 / span 2;align-self:center;}
  .cx-opt__t{grid-column:1;font-size:22px;}
  .cx-opt__d{grid-column:1 / -1;font-size:14px;}
}
@media (prefers-reduced-motion:reduce){ .cx-opt,.cx-opt__dot,.cx-opt__dot::after{transition:none;} .cx-opt:active{transform:none;} }

/* ---- 04 the message form -------------------------------------------------------------------- */
.cx-send .page-grid{grid-template-columns:minmax(0,1fr) 340px;}
.cx-send .d-2 em{font-style:normal;color:var(--red);}
.cx-send__head .lede{margin-top:16px;max-width:56ch;}
.cform{margin-top:clamp(28px,3.4vw,40px);}
.cform .field{margin-bottom:16px;}
.cform .field-row{gap:14px;}
.cform .field-row--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cform textarea{min-height:140px;}
.req{color:var(--red-ink);}
.cform__intent{margin-bottom:22px;padding:16px 18px;border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--paper);
  transition:border-color 180ms ease;}
.cform__intent.is-set{border-color:var(--ink);}
.cform__intent.is-urgent{border-left:3px solid var(--red);}
.cform__intent.is-invalid{border-color:#DC2626;}
.cform__pick{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:4px;}
.cform__pick b{font-weight:500;font-size:18px;color:var(--ink-3);}
.cform__intent.is-set .cform__pick b{color:var(--ink);}
.cform__change{font-size:14px;color:var(--ink);text-underline-offset:3px;}
.cform__note{margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink-3);max-width:62ch;}
.cform__note:empty{display:none;}
.cform__urgent{margin-top:12px;}
.cform__urgent[hidden]{display:none;}
.field__err{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:13.5px;line-height:1.4;color:#B91C1C;}
.field__err::before{content:"!";display:grid;place-items:center;flex:none;width:16px;height:16px;border-radius:99px;background:#B91C1C;color:#fff;font-size:11px;font-weight:700;line-height:1;}
.field__err[hidden]{display:none;}
.field.is-invalid input,.field.is-invalid textarea{border-color:#DC2626;}
.cform__veh{margin:4px 0 18px;border-block:1px solid var(--rule);}
.cform__veh summary{display:flex;align-items:center;gap:12px;min-height:52px;cursor:pointer;list-style:none;font-size:15px;font-weight:500;color:var(--ink);}
.cform__veh summary::-webkit-details-marker{display:none;}
.cform__veh summary::after{content:"";width:9px;height:9px;margin-left:auto;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:translateY(-2px) rotate(45deg);transition:transform 200ms cubic-bezier(.23,1,.32,1);}
.cform__veh[open] summary::after{transform:translateY(2px) rotate(-135deg);}
.cform__veh summary:focus-visible{outline:3px solid var(--red);outline-offset:2px;}
.cform__opt{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.cform__veh-in{padding:4px 0 2px;}
.cform__go{margin-top:4px;}
.cform__req{margin-top:12px;font-size:13px;color:var(--ink-3);}
.cform__req span{color:var(--red-ink);}
.cform__ok{padding:clamp(22px,2.6vw,30px);font-size:16px;line-height:1.55;}
.cform__ok p+p{margin-top:6px;}
.cform__ok a{color:inherit;font-weight:500;text-underline-offset:3px;}
.cform__ok-h{margin-bottom:8px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(28px,2.6vw,36px);line-height:.95;}
.cform__again{margin-top:18px;}
.form__ok--err .cform__again{display:none;}
.cx-form.is-sent .cform__fields{display:none;}
.cform__alt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:26px;padding-top:22px;border-top:1px solid var(--rule);font-size:15px;color:var(--ink-3);}
.cform__alt .tlink svg{width:14px;height:14px;flex:none;}
.cform__note-sm{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--ink-3);}
.cform__note-sm a{color:var(--ink-2);text-underline-offset:2px;}
.cx-help p{font-size:15px;line-height:1.5;color:var(--ink-3);}
.cx-help__list{display:grid;gap:10px;margin:14px 0 18px;}
.cx-help__list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:15px;line-height:1.45;color:var(--ink-2);}
.cx-help__list svg{width:15px;height:15px;margin-top:3px;color:var(--red);}
.cx-help__photo{display:flex;align-items:center;gap:10px;min-height:44px;padding-top:14px;border-top:1px solid var(--rule);font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;}
.cx-help__photo svg{width:16px;height:16px;flex:none;color:var(--red);}
.cx-help__photo:hover span{text-decoration:underline;text-underline-offset:3px;}
@media (max-width:980px){
  .cx-send .page-grid{grid-template-columns:1fr;}
  .cx-send .aside{position:static;}
}
@media (max-width:640px){ .cform .field-row--3{grid-template-columns:1fr;gap:0;} }
@media (max-width:560px){ .cform__go{width:100%;justify-content:center;} }

/* ---- 05 contact directly: dark, three columns ------------------------------------------------ */
.cx-direct .d-2 em{font-style:normal;color:var(--red);}
.cx-direct__lede{margin-top:16px;max-width:56ch;color:var(--n300);}
.cx-direct__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(32px,4vw,52px);border-top:1px solid rgba(255,255,255,.14);}
.cx-direct__list li{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;
  padding:clamp(24px,2.6vw,36px) clamp(20px,2.6vw,40px);border-right:1px solid rgba(255,255,255,.12);}
.cx-direct__list li:first-child{padding-left:0;}
.cx-direct__list li:last-child{padding-right:0;border-right:0;}
.cx-direct__k{font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--n400);}
.cx-direct__v{font-family:var(--display);font-weight:700;font-size:clamp(34px,3.4vw,50px);line-height:1;color:#fff;text-decoration:none;}
.cx-direct__v--mail{font-family:var(--body);font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1.3;overflow-wrap:anywhere;}
.cx-direct__v:hover{color:var(--r400);}
.cx-direct__list .btn{margin-top:auto;}
.cx-direct__note{margin-top:28px;font-size:15px;color:var(--n400);}
@media (max-width:820px){
  .cx-direct__list{grid-template-columns:1fr;}
  .cx-direct__list li,.cx-direct__list li:first-child,.cx-direct__list li:last-child{padding:24px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.12);}
  .cx-direct__list li:last-child{border-bottom:0;}
}
@media (max-width:560px){ .cx-direct__list .btn{width:100%;justify-content:center;} }

/* ---- 06/07 visit: warehouse and roadside hours kept clearly apart, then the support note ----- */
.page-contact #location .d-2 em{font-style:normal;color:var(--red);}
.page-contact #location .loc__blk:not(:first-child) h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;letter-spacing:0;color:var(--ink);margin-bottom:4px;}
.loc__sub{margin-bottom:8px;font-size:14px;line-height:1.45;color:var(--ink-3);}
.page-contact #hours{scroll-margin-top:calc(var(--header-h, 80px) + 24px);}
.visit-note{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,5vw,80px);align-items:start;
  margin-top:clamp(40px,5vw,72px);padding-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--rule);}
.visit-note__h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(32px,3.4vw,48px);line-height:.95;}
.visit-note__h em{display:block;font-style:normal;color:var(--red);}
.visit-note__bd p{font-size:17px;line-height:1.6;color:var(--ink-3);max-width:52ch;}
.visit-note__links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:20px;}
.visit-note__links .tlink svg{width:10px;height:10px;flex:none;}
@media (max-width:820px){ .visit-note{grid-template-columns:1fr;} }
.cx-direct .sec-head{margin-bottom:0;}

/* ==========================================================================
   82. BATTERY GUIDES (GuidesTemplate). The featured guide opens the page on the
   dark interior ground; the library is the Batteries page guide grid
   (.guides > .gcard) at full length, closed by an "ask us" tile; the CTA is
   the homepage red final CTA.
   ========================================================================== */

/* ---- 03 featured guide ----------------------------------------------------------------------- */
.gfeat{padding-top:clamp(22px,2.6vw,36px);}
.gfeat__grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:center;}
.gfeat__media{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;border-radius:var(--radius);background:var(--n900);}
.gfeat__media img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;transition:transform 700ms cubic-bezier(.23,1,.32,1);}
.gfeat__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,14,17,0) 55%,rgba(14,14,17,.42)),linear-gradient(90deg,rgba(14,14,17,0) 70%,rgba(14,14,17,.28));}
@media (hover:hover) and (pointer:fine){
  .gfeat__media:hover img,.gfeat__grid:has(.gfeat__acts a:first-child:hover) .gfeat__media img{transform:scale(1.03);}
}
.gfeat__cat{margin:22px 0 14px;color:var(--r400);}
.gfeat__t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(44px,4.4vw,74px);line-height:.92;color:#fff;text-wrap:balance;}
.gfeat__t em{font-style:normal;color:var(--red);}
.gfeat__lede{margin-top:22px;max-width:46ch;color:var(--n300);}
.gfeat__acts{margin-top:30px;}
@media (min-width:921px) and (max-width:1340px){ .gfeat__acts .btn{min-width:308px;justify-content:center;} }
@media (max-width:920px){
  .gfeat__grid{grid-template-columns:1fr;gap:28px;}
  .gfeat__media{aspect-ratio:16/10;}
  .gfeat__cat{margin-top:18px;}
}
@media (max-width:560px){
  .gfeat__t{font-size:clamp(38px,11vw,48px);}
  .gfeat__acts .btn{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){ .gfeat__media img{transition:none;transform:none!important;} }

/* ---- 04 the guide library: eight cards and the "ask us" tile ---------------------------------- */
.page-guides .guides-sec .d-2 em{display:block;}
.gcard--ask{background:var(--n950);color:#fff;}
.gcard--ask:hover{background:var(--n950);}
.gcard--ask h3,.gcard--ask:hover h3{color:#fff;}
.gcard--ask .gcard__cat{color:var(--r400);}
.gcard--ask p{color:var(--n300);}
.gcard__links{display:grid;justify-items:start;gap:12px;margin-top:auto;}
.gcard--ask .tlink{color:#fff;border-color:rgba(255,255,255,.3);}
.gcard--ask .tlink:hover{color:var(--r400);border-color:var(--r400);}
.gcard__links .tlink svg{width:10px;height:10px;flex:none;}
@media (min-width:601px) and (max-width:920px){ .guides--ask .gcard--ask{grid-column:1 / -1;} }

/* ---- 05 final CTA: the heading's second line stays upright ----------------------------------- */
.page-guides .fcta .d-1 em{font-style:normal;}
.page-guides .fcta .d-1{text-wrap:balance;}
/* touch: the ask links become full-width 44px rows */
@media (pointer:coarse), (max-width:600px){
  .gcard__links{gap:0;justify-items:stretch;}
  .gcard__links .tlink{min-height:44px;justify-content:space-between;border-bottom-color:rgba(255,255,255,.16);}
}

/* ==========================================================================
   83. PRODUCT DETAIL (ProductDetailTemplate). Light retail hero under the dark
   header: gallery on a plain plate, the key numbers set in the display face,
   one red action. Below: highlight cards, spec list + dimensions drawing,
   terminal layout (dark panel), documents, compact service reviews, FAQ,
   other batteries (the shared product card) and the red final CTA.
   Prefixes: pdx hero, pdg gallery, pdh highlights, pds/pspec specs,
   pdt terminal, pdd documents, pdr reviews, pda alternatives, dimd drawing.
   Motion: 150–350ms, transform/opacity only, off under reduced motion.
   ========================================================================== */

/* ---- 01 buy box (client design, 8 Oct 2026) -------------------------------------------------
   Gallery on a white plate | a compact retail column: category link, name, code line, price,
   free-fitting bar, the four key numbers, one-line description, two action rows, Add to cart +
   Call our team, checkout row. Small red text uses --red-ink (AA); large display red uses --red. */
.pdx{padding:clamp(16px,2vw,28px) 0 clamp(56px,6.4vw,104px);background:var(--paper);}
.pdx__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,3.2vw,48px);align-items:start;}
.pdx__info{min-width:0;padding-top:clamp(4px,.9vw,14px);}
.pdx__cat{display:inline-block;font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink);
  text-decoration:none;text-underline-offset:3px;padding-block:4px;transition:color 150ms ease;}
.pdx__cat:hover{text-decoration:underline;color:var(--r800);}
.pdx__h{margin-top:4px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(36px,3.3vw,48px);line-height:.95;color:var(--ink);text-wrap:balance;}
.pdx__h em{font-style:normal;color:var(--red);}
.pdx__ids{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:8px;font-size:14.5px;line-height:1.5;}
.pdx__ids div{display:flex;gap:6px;}
.pdx__ids dt{color:var(--muted);}
.pdx__ids dd{color:var(--red-ink);font-weight:500;}
.pdx__price{margin-top:10px;font-family:var(--display);font-weight:700;font-size:clamp(40px,3.5vw,52px);line-height:1;letter-spacing:.01em;color:var(--red);font-variant-numeric:tabular-nums;}

.pdx__fitbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:14px;padding:10px 14px;border:1px solid var(--r100);border-radius:var(--radius);background:var(--r50);}
.pdx__fitbar-ico{display:grid;place-items:center;flex:none;width:18px;height:18px;color:var(--red-ink);}
.pdx__fitbar-ico svg{width:17px;height:17px;}
.pdx__fitbar b{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);}
.pdx__fitbar-tx{padding-left:12px;border-left:1px solid var(--r200);font-size:14px;color:var(--ink-3);}

.pdx__specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:12px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);}
.pdx__specs div{display:grid;gap:4px;padding:12px clamp(12px,1.2vw,16px);}
.pdx__specs div+div{border-left:1px solid var(--rule);}
.pdx__specs dt{font-size:13.5px;color:var(--ink-3);}
.pdx__specs dd{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.2vw,32px);line-height:1;text-transform:uppercase;color:var(--red);}

.pdx__desc{margin-top:14px;max-width:60ch;font-size:15.5px;line-height:1.55;color:var(--ink-3);}

.pdx__rows{display:grid;gap:10px;margin-top:14px;}
.pdx__row{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 16px 10px 12px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);text-decoration:none;
  transition:border-color 150ms ease,background-color 150ms ease,transform 120ms var(--ease-out);}
.pdx__row-ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:99px;color:var(--red-ink);}
.pdx__row-ico--car{background:var(--r50);}
.pdx__row-ico svg{width:18px;height:18px;}
.pdx__row-tx{display:grid;gap:1px;min-width:0;flex:1;}
.pdx__row-tx b{font-size:15px;font-weight:600;line-height:1.35;}
.pdx__row-tx>span:not(.sr){font-size:13.5px;line-height:1.4;color:var(--muted);}
.pdx__row-link{color:var(--red-ink);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}
.pdx__row-ar{display:grid;place-items:center;flex:none;width:16px;color:var(--ink-3);transition:transform 150ms var(--ease-out),color 150ms ease;}
.pdx__row-ar svg{width:8px;height:14px;}
.pdx__row:hover{border-color:var(--n400);background:var(--paper-2);}
@media (hover:hover) and (pointer:fine){ .pdx__row:hover .pdx__row-ar{transform:translateX(3px);color:var(--ink);} }
.pdx__row:active{transform:scale(.99);}
.pdx__row:focus-visible{outline:3px solid var(--red);outline-offset:2px;}

.pdx__buy{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:16px;}
.pdx__buy .btn{--bh:52px;width:100%;padding-inline:18px;}
.pdx__callteam{border-color:var(--n400);}
.pdx__buy .btn__ico{background:none;width:auto;height:auto;}            /* plain icons, as in the design */
.pdx__buy .btn__ico svg{width:17px;height:17px;}
.pdx__cart-note{margin-top:12px;padding:12px 14px;border-left:3px solid var(--red);border-radius:2px;background:var(--paper-2);font-size:14.5px;line-height:1.5;color:var(--ink-2);}
.pdx__cart-note:not([hidden]){animation:pdx-note 200ms var(--ease-out);}
@keyframes pdx-note{from{opacity:0;transform:translateY(-4px);}}
.pdx__cart-note a{color:var(--red-ink);font-weight:600;text-underline-offset:3px;white-space:nowrap;}

.pdx__pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px;font-size:13.5px;color:var(--ink-3);}
.pdx__secure{display:inline-flex;align-items:center;gap:7px;padding-right:14px;border-right:1px solid var(--rule);font-weight:500;}
.pdx__secure svg{width:15px;height:15px;color:var(--ink);}
.pdx__cards{display:flex;flex-wrap:wrap;gap:6px;}
.pdx__cards li{padding:3px 8px;border:1px solid var(--rule);border-radius:3px;font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--ink-2);}
.pdx__pay-confirm .confirm{font-size:10.5px;}

/* the phone CTA: "Call now | 0477 577 007" (used by the final CTA) */
.btn--callnow .btn__num{padding-left:12px;border-left:1px solid rgba(255,255,255,.42);font-variant-numeric:tabular-nums;}
@media (max-width:400px){
  .btn--callnow{padding-inline:16px;gap:10px;}
  .btn--callnow .btn__ico{display:none;}
  .btn--callnow .btn__num{padding-left:10px;}
}

@media (min-width:768px){ .pdg{position:sticky;top:calc(var(--header-h) + 20px);} }
@media (min-width:768px) and (max-width:1023px){
  .pdx__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;}
  .pdx__specs div{padding:10px;}
  .pdx__specs dt{font-size:12.5px;}
}
/* narrow columns: the fitting note drops under its title, aligned with it, no divider */
@media (max-width:1023px){ .pdx__fitbar-tx{flex-basis:100%;padding-left:30px;border-left:0;} }
@media (max-width:767px){
  .pdx__grid{grid-template-columns:1fr;gap:24px;}
  .pdg{max-width:620px;width:100%;margin-inline:auto;}
}
@media (max-width:420px){ .pdx__secure{border-right:0;padding-right:0;width:100%;} }
@media (max-width:360px){
  .pdx__specs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pdx__specs div:nth-child(3){border-left:0;}
  .pdx__specs div:nth-child(n+3){border-top:1px solid var(--rule);}
}
@media (prefers-reduced-motion:reduce){
  .pdx__row,.pdx__row-ar{transition:none;}
  .pdx__row:active{transform:none;}
  .pdx__cart-note:not([hidden]){animation:none;}
}

/* ---- gallery ------------------------------------------------------------------------------- */
.pdg{min-width:0;}
.pdg__stage{position:relative;overflow:hidden;border:1px solid var(--rule);border-radius:var(--radius-lg);background:#fff;}
.pdg__track{display:flex;aspect-ratio:8/7;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.pdg__track::-webkit-scrollbar{display:none;}
.pdg__track:focus-visible{outline:3px solid var(--red);outline-offset:-3px;border-radius:var(--radius-lg);}
.pdg__slide{position:relative;flex:0 0 100%;display:grid;place-items:center;margin:0;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;}
.pdg__slide img{width:100%;height:100%;}
.pdg__slide--contain img{object-fit:contain;padding:clamp(14px,4%,36px);filter:drop-shadow(0 18px 16px rgba(14,14,17,.16));}
.pdg__slide--cover img{object-fit:cover;}
.pdg__slide--dims{background:#fff;}
.pdg__dims{display:grid;place-items:center;width:100%;height:100%;padding:5% 7% 9%;}
.pdg__dims .dimd{max-height:100%;}
.pdg__cap{position:absolute;left:14px;bottom:14px;padding:6px 10px;border-radius:2px;background:rgba(14,14,17,.82);color:#fff;font-size:12.5px;line-height:1.3;letter-spacing:.02em;}
.pdg__tag{z-index:2;top:14px;left:14px;}
.pdg__nav{position:absolute;z-index:2;top:50%;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;padding:0;
  border:1px solid var(--rule-strong);border-radius:99px;background:#fff;color:var(--ink);cursor:pointer;opacity:0;
  transition:opacity 200ms ease,transform 150ms var(--ease-out),border-color 200ms ease,background-color 200ms ease;}
.pdg__nav svg{width:16px;height:16px;}
.pdg__nav--prev{left:14px;}
.pdg__nav--next{right:14px;}
.pdg__stage:hover .pdg__nav,.pdg__nav:focus-visible{opacity:1;}
.pdg__nav:hover{border-color:var(--ink);}
.pdg__nav:active{transform:scale(.92);}
.pdg__count{position:absolute;z-index:2;right:14px;bottom:14px;padding:5px 10px;border:1px solid var(--rule);border-radius:2px;background:#fff;
  font-size:12.5px;line-height:1.3;color:var(--ink-3);font-variant-numeric:tabular-nums;}
html:not(.js) .pdg__nav,html:not(.js) .pdg__count{display:none;}
@media (hover:hover) and (pointer:fine){ .pdg__count{display:none;} }   /* thumbnails show position on desktop */
@media (hover:none),(pointer:coarse){ .pdg__nav{display:none;} }

.pdg__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px;}
.pdg__th{display:grid;gap:7px;width:100%;padding:0;border:0;background:none;color:var(--ink-3);text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.pdg__th-im{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--rule);border-radius:var(--radius);background:#fff;
  transition:border-color 180ms ease,box-shadow 180ms ease,transform 150ms var(--ease-out);}
.pdg__th-im img{width:100%;height:100%;object-fit:cover;transition:transform 300ms var(--ease-out);}
.pdg__th-dims{display:grid;place-items:center;width:100%;height:100%;padding:8% 10%;background:#fff;}
.dimd--th .dimd__lbl,.dimd--th .dimd__dim,.dimd--th .dimd__ext{display:none;}
.pdg__th-l{font-size:12.5px;font-weight:500;line-height:1.3;letter-spacing:.02em;transition:color 180ms ease;}
.pdg__th:hover .pdg__th-im{border-color:var(--n400);}
.pdg__th:hover .pdg__th-l{color:var(--ink);}
@media (hover:hover) and (pointer:fine){ .pdg__th:hover .pdg__th-im img{transform:scale(1.04);} }
.pdg__th:active .pdg__th-im{transform:scale(.97);}
.pdg__th[aria-current="true"] .pdg__th-im{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
.pdg__th[aria-current="true"] .pdg__th-l{color:var(--ink);}
.pdg__th:focus-visible{outline:none;}
.pdg__th:focus-visible .pdg__th-im{outline:3px solid var(--red);outline-offset:2px;}
@media (max-width:560px){
  .pdg__thumbs{gap:8px;}
  .pdg__th-l{font-size:12px;}
  .pdg__cap{left:10px;bottom:10px;}
  .pdg__count{right:10px;bottom:10px;}
  .pdg__tag{top:10px;left:10px;}
}

/* ---- dimensions drawing (cabinet oblique, case only: no terminals) ----------------------- */
.dimd{display:block;width:100%;height:auto;overflow:visible;}
.dimd__front{fill:#fff;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;}
.dimd__top{fill:var(--n100);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;}
.dimd__side{fill:var(--n200);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;}
.dimd__seam{fill:none;stroke:var(--n400);stroke-width:1.2;}
.dimd__panel{fill:var(--n50);stroke:var(--n300);stroke-width:1;}
.dimd__ext{fill:none;stroke:var(--n400);stroke-width:1;stroke-dasharray:3 3;}
.dimd__dim{fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round;}
.dimd__lbl{font-family:var(--body);font-weight:600;font-size:19px;fill:var(--ink);}

/* ---- 02 built for the job ------------------------------------------------------------------- */
.pdh__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);}
.pdh .sec-head{margin-bottom:clamp(24px,3vw,44px);}
.pdh__card{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.2vw,30px);
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);}
.pdh__card::before{content:"";position:absolute;left:-1px;top:-1px;width:40px;height:3px;border-top-left-radius:var(--radius);background:var(--red);}
.pdh__n{font-size:12px;font-weight:500;letter-spacing:.16em;color:var(--muted);font-variant-numeric:tabular-nums;}
.pdh__t{margin-top:clamp(28px,3.6vw,56px);font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,2.6vw,40px);line-height:.92;color:var(--ink);text-wrap:balance;}
.pdh__d{font-size:15.5px;line-height:1.55;color:var(--ink-3);}
@media (max-width:1023px){ .pdh__grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){
  .pdh__grid{grid-template-columns:1fr;gap:10px;}
  .pdh__card{min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;padding:20px;}
  .pdh__n{grid-row:span 2;padding-top:6px;}
  .pdh__t{margin-top:0;font-size:30px;}
}

/* ---- 03 the numbers that matter ------------------------------------------------------------- */
.pds__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(20px,2.6vw,36px);align-items:stretch;}
.pspec{align-self:start;border-top:2px solid var(--ink);}
.pspec__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:16px;padding:16px 4px;border-bottom:1px solid var(--rule);}
.pspec__row dt{font-size:15.5px;color:var(--ink-3);}
.pspec__row dd{font-size:16.5px;font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;}
.pds__dims{display:flex;flex-direction:column;padding:clamp(20px,2.4vw,32px);border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper-2);}
.pds__dims-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;}
.pds__dims-hd h3,.pdd__h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2vw,28px);line-height:1;color:var(--ink);}
.pds__dims-hd span{font-size:13px;letter-spacing:.04em;color:var(--muted);}
.pds__drawing{flex:1;display:grid;place-items:center;padding:clamp(10px,2vw,22px) 0;}
.pds__drawing .dimd{max-width:500px;}
.pds__legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:16px;border-top:1px solid var(--rule);}
.pds__legend dt{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.pds__legend dd{margin-top:6px;font-family:var(--display);font-weight:700;font-size:clamp(28px,2.6vw,36px);line-height:1;color:var(--ink);}
.pds__legend dd span{margin-left:2px;font-family:var(--body);font-size:14px;font-weight:500;color:var(--ink-3);}
.pds__note{margin-top:14px;font-size:14px;line-height:1.5;color:var(--muted);}

/* 04 terminal layout + 05 technical documents */
.pds__more{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(20px,2.6vw,36px);margin-top:clamp(20px,2.6vw,36px);}
.pdt{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start;
  padding:clamp(24px,3vw,40px);border-radius:var(--radius-lg);background:var(--n950);color:#fff;}
.pdt .eyebrow{color:var(--n400);margin-bottom:16px;}
.pdt__h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,2.8vw,42px);line-height:.94;color:#fff;text-wrap:balance;}
.pdt__p{margin-top:16px;max-width:58ch;font-size:16px;line-height:1.62;color:var(--n300);}
.pdt__facts{border-top:1px solid rgba(255,255,255,.16);}
.pdt__facts div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.16);}
.pdt__facts dt{font-size:14px;color:var(--n400);}
.pdt__facts dd{font-size:14.5px;font-weight:600;color:#fff;text-align:right;}
.pdt__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px;}
.pdt .tlink{color:#fff;border-color:rgba(255,255,255,.3);}
.pdt .tlink:hover{color:var(--r400);border-color:var(--r400);}
.pdt .tlink svg{width:14px;height:14px;}
.pdd{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,30px);border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper);}
.pdd__hd{display:flex;align-items:center;gap:12px;}
.pdd__ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--radius);background:var(--n100);color:var(--ink-3);}
.pdd__ico svg{width:20px;height:20px;}
.pdd__empty{font-size:15.5px;line-height:1.5;color:var(--ink);}
.pdd__pill{display:table;margin-bottom:8px;padding:4px 9px;border-radius:2px;background:var(--n100);color:var(--ink-3);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;}
.pdd__help{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);font-size:14px;line-height:1.55;color:var(--muted);}
.pdd__help a{color:var(--ink);font-weight:500;text-underline-offset:3px;text-decoration-color:var(--rule-strong);transition:color 160ms ease;}
.pdd__help a:hover{color:var(--red-ink);}
@media (max-width:980px){
  .pds__grid,.pds__more{grid-template-columns:1fr;}
}
@media (min-width:981px) and (max-width:1180px){ .pds__more{grid-template-columns:1fr;} }
@media (max-width:720px){ .pdt{grid-template-columns:1fr;} }
@media (max-width:560px){
  .pdt__acts .btn{width:100%;}
  .pdt__acts .tlink{min-height:44px;}
  .pds__legend dd span{font-size:13px;}
}

/* ---- 06 compact service reviews -------------------------------------------------------------- */
.pdr__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 48px;margin-bottom:clamp(22px,2.6vw,34px);}
.pdr__copy .eyebrow{margin-bottom:14px;}
.pdr__copy .d-3 em{font-style:normal;color:var(--red);}
.pdr__note{margin-top:12px;max-width:60ch;font-size:15px;line-height:1.55;color:var(--ink-3);}
.pdr__score{display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 14px;padding:16px 20px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);}
.pdr__n{grid-row:span 2;font-family:var(--display);font-weight:700;font-size:52px;line-height:.9;color:var(--ink);}
.pdr__lbl{display:grid;font-size:13px;color:var(--ink-3);}
.pdr__lbl .stars{margin:5px 0 0;}
.pdr__score .tlink{grid-column:1 / -1;justify-self:start;margin-top:12px;}
.pdr__score .tlink svg{width:10px;height:10px;flex:none;}
.rev--compact{padding:20px 20px 18px;}
.rev--compact .rev__top{margin-bottom:10px;}
.rev--compact .rev__q{font-size:15px;margin-bottom:14px;}
.rev--compact .rev__by{padding-top:12px;}
@media (max-width:760px){
  .pdr__head{grid-template-columns:1fr;align-items:start;}
  .pdr__score{justify-self:start;}
}
@media (max-width:620px){
  .pdr__list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gut));padding:2px var(--gut) 6px;scrollbar-width:none;}
  .pdr__list::-webkit-scrollbar{display:none;}
  .pdr__list>.rev{flex:0 0 min(84%,340px);scroll-snap-align:start;}
}

/* ---- 07 FAQ: numbered, answers indented under the question, answer fades in on open ------- */
.page-pdp #faq .faq{counter-reset:pf;border-top:1px solid var(--rule);}
.page-pdp #faq .faq__i{counter-increment:pf;}
.page-pdp #faq .faq__btn{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:0 14px;padding:22px 0;}
.page-pdp #faq .faq__btn::before{content:counter(pf,decimal-leading-zero);font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--muted);
  font-variant-numeric:tabular-nums;transition:color 180ms ease;}
.page-pdp #faq .faq__btn:hover::before,.page-pdp #faq .faq__btn[aria-expanded="true"]::before{color:var(--red-ink);}
.page-pdp #faq .faq__btn[aria-expanded="true"]{color:var(--ink);}
.page-pdp #faq .faq__in{padding:0 60px 26px 58px;}
html.js .page-pdp #faq .faq__in{opacity:0;transform:translateY(-6px);transition:opacity 220ms ease,transform 300ms var(--ease-out);}
html.js .page-pdp #faq .faq__i:has(> h3 > .faq__btn[aria-expanded="true"]) .faq__in{opacity:1;transform:none;transition-delay:60ms;}
@media (max-width:620px){
  .page-pdp #faq .faq__btn{grid-template-columns:32px minmax(0,1fr) auto;gap:0 10px;padding:20px 0;}
  .page-pdp #faq .faq__in{padding:0 0 22px 42px;}
}

/* ---- 08 other batteries: the shared card + an "ask us" tile ------------------------------- */
.pda .shop__head .lede{max-width:40ch;}
.pda__ask{display:flex;flex-direction:column;gap:12px;height:100%;padding:clamp(22px,2vw,28px);border:1px solid var(--rule);border-radius:4px;background:var(--paper-2);color:var(--ink);}
.pda__ask-k{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--red-ink);}
.pda__ask-t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,2.4vw,38px);line-height:.94;color:var(--ink);}
.pda__ask p{font-size:15px;line-height:1.55;color:var(--ink-3);}
.pda__ask-links{display:grid;justify-items:start;gap:14px;margin-top:auto;padding-top:8px;}
.pda__ask .tlink svg{width:10px;height:10px;}
.pda__foot{justify-content:flex-end;}
/* the shared card's two buttons are 14px too wide for a four-up row between 1024 and 1179px:
   tighter padding here only (the same fix would suit the shared card sitewide) */
@media (min-width:1024px) and (max-width:1179px){ .pda .pc__acts .btn{padding-inline:8px;gap:6px;letter-spacing:.03em;} }
@media (pointer:coarse),(max-width:600px){
  .pda__ask-links{gap:0;justify-items:stretch;}
  .pda__ask .tlink{min-height:44px;justify-content:space-between;border-bottom-color:var(--rule);}
}

/* ---- 09 final CTA without a lede ----------------------------------------------------------- */
.fcta--short .d-1{margin-bottom:34px;text-wrap:balance;}
.page-pdp .fcta .d-1 em{font-style:normal;display:block;}

/* ---- reduced motion ----------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pdg__track{scroll-behavior:auto;}
  .pdg__nav,.pdg__th-im,.pdg__th-im img,.pdg__th-l{transition:none;}
  .pdg__th:hover .pdg__th-im img{transform:none;}
  html.js .page-pdp #faq .faq__in{transform:none;transition:none;}
}
/* phones: the current page is the h1 right below, so the trail stops at its parent */
@media (max-width:560px){
  .pdx__crumbs li:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .pdx__crumbs li:nth-last-child(2)::after{content:none;}
}

/* ==========================================================================
   84. BATTERY RANGE TABLE (RangeSection, Passenger Cars & SUVs). The live site's
   "Our range is as follows" table: type chips with counts, a code search, sortable
   CCA / Ah, first 12 rows with "Show all", rows as compact cards on phones.
   Scoped to .rng; uses only the shared tokens, so it drops into the v5 pages and
   the older page template alike. Filtering is instant (it's used repeatedly);
   only presses and the Show-all chevron move, 120–200ms, off under reduced motion.
   ========================================================================== */
.rng .sec-head{margin-bottom:clamp(24px,3vw,40px);}
.rng .d-2 em{font-style:normal;color:var(--red);}

/* ---- toolbar (shown once range-page.js runs; without JS every row is listed) ---------------- */
.rng__tools{display:none;}
.rng.is-enhanced .rng__tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:14px;min-width:0;}
.rng__chips{display:flex;flex-wrap:wrap;gap:8px;}
.rng__chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--rule-strong);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);font-family:var(--body);font-size:14.5px;font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer;
  transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease,transform 120ms var(--ease-out);-webkit-tap-highlight-color:transparent;}
.rng__n{font-size:12.5px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;transition:color 150ms ease;}
.rng__chip:hover{border-color:var(--ink);}
.rng__chip:active{transform:scale(.97);}
.rng__chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}
.rng__chip[aria-pressed="true"] .rng__n{color:var(--n400);}
.rng__chip:focus-visible,.rng__sort:focus-visible,.rng__search input:focus-visible{outline:3px solid var(--red);outline-offset:2px;}
.rng__search{position:relative;flex:0 1 320px;min-width:220px;}
.rng__search-ico{position:absolute;left:14px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--muted);pointer-events:none;}
.rng__search input{width:100%;height:44px;padding:0 14px 0 40px;border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--paper);
  color:var(--ink);font-family:var(--body);font-size:16px;transition:border-color 150ms ease;-webkit-appearance:none;appearance:none;}
.rng__search input::placeholder{color:var(--n500);}
.rng__search input:hover{border-color:var(--n400);}
.rng__search input:focus{border-color:var(--ink);}
.rng__count{margin:0 0 10px;font-size:14px;line-height:1.4;color:var(--ink-3);font-variant-numeric:tabular-nums;}

/* ---- the table ------------------------------------------------------------------------------- */
.rng__frame{border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper);overflow:clip;}
.rng__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;}
.rng__table[hidden]{display:none;}
.rng__c{padding:0 20px;text-align:left;vertical-align:middle;}
.rng__c--code{width:31%;}
.rng__c--cca,.rng__c--ah{width:14%;}
.rng__c--term{width:15%;}
.rng__c--dim{width:26%;}
.rng__table thead th{height:50px;background:var(--paper-2);border-bottom:1px solid var(--rule);font-family:var(--body);font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;}
.rng__unit{margin-left:6px;font-size:11.5px;letter-spacing:.04em;text-transform:none;color:var(--muted);}
@media (min-width:721px){
  .rng__table thead th{position:sticky;top:var(--rng-top,var(--header-h,76px));z-index:2;}
}
.rng__sort{display:inline-flex;align-items:center;gap:7px;min-height:36px;margin-left:-6px;padding:0 6px;border:0;border-radius:var(--radius);background:none;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;transition:color 150ms ease,background-color 150ms ease;}
.rng__sort:hover{color:var(--ink);background:var(--n100);}
.rng__sort-ico{width:8px;height:12px;flex:none;}
.rng__sort-ico path{fill:var(--n300);transition:fill 150ms ease;}
th[aria-sort="descending"] .rng__sort,th[aria-sort="ascending"] .rng__sort{color:var(--ink);}
th[aria-sort="descending"] .rng__sort-dn,th[aria-sort="ascending"] .rng__sort-up{fill:var(--red);}
.rng__row>*{height:56px;}
.rng__row:nth-child(even){background:var(--paper-2);}                       /* no JS: plain zebra */
.rng.is-enhanced .rng__row{background:none;}
.rng.is-enhanced .rng__row.is-alt{background:var(--paper-2);}
@media (hover:hover) and (pointer:fine){
  .rng__row{transition:background-color 120ms ease;}
  .rng .rng__row:hover{background:var(--n100);}
}
.rng__code{font-family:var(--display);font-weight:700;font-size:22px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);}
.rng__c--cca,.rng__c--ah,.rng__c--dim{font-family:var(--body);font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
.rng__c--dim{font-weight:500;white-space:nowrap;}
.rng__mm{font-weight:400;color:var(--muted);}
.rng__table tbody .rng__mm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}  /* unit is in the header; kept for screen readers */
.rng__term{display:inline-grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--ink);border-radius:var(--radius);
  font-family:var(--body);font-size:13.5px;font-weight:700;line-height:1;color:var(--ink);}
.rng__s{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 5px;border:1px solid var(--rule-strong);border-radius:3px;
  background:var(--paper);font-family:var(--body);font-size:11.5px;font-weight:600;line-height:1;color:var(--ink-3);vertical-align:middle;}
.rng__row>*:not(:first-child),.rng__table thead th:not(:first-child){border-left:0;}

/* empty search */
.rng__empty{padding:clamp(24px,3vw,36px) 24px;}
.rng__empty p{max-width:60ch;font-size:16px;line-height:1.55;color:var(--ink-3);}
.rng__empty b{color:var(--ink);font-weight:600;}
.rng__empty-acts{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:16px;}
.rng__empty .tlink{background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;font-family:var(--body);}

/* show all */
.rng__more{display:none;}
.rng.is-enhanced .rng__more{display:flex;justify-content:center;margin-top:16px;}
.rng__more-btn[hidden]{display:none;}
.rng__more-ico{display:inline-grid;place-items:center;width:14px;height:14px;transition:transform 200ms var(--ease-out);}
.rng__more-ico svg{width:12px;height:8px;}
.rng.is-open .rng__more-ico{transform:rotate(180deg);}

/* ---- key + help ---------------------------------------------------------------------------- */
.rng__foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,3vw,40px);align-items:start;margin-top:clamp(24px,3vw,36px);}
.rng__key{display:grid;gap:14px;padding-top:4px;}
.rng__key div{display:flex;align-items:flex-start;gap:14px;}
.rng__key dt{display:flex;gap:6px;flex:none;min-width:62px;}
.rng__key .rng__s--key{margin-left:0;min-width:28px;height:28px;font-size:13px;}
.rng__key dd{padding-top:4px;font-size:14.5px;line-height:1.55;color:var(--ink-3);}
.rng__help{padding:clamp(18px,2vw,24px);border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper);}
.rng__help p{font-size:15.5px;line-height:1.55;color:var(--ink-3);}
.rng__help b{color:var(--ink);font-weight:600;}
.rng__help-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}

/* ---- tablet: tighter cells ------------------------------------------------------------------- */
@media (min-width:721px) and (max-width:1023px){
  .rng__c{padding:0 14px;}
  .rng__code{font-size:20px;}
  .rng__c--code{width:30%;}
  .rng__c--dim{width:29%;}
  .rng__unit{display:block;margin:2px 0 0;}
  .rng__table thead th{height:58px;}
}
@media (max-width:980px){ .rng__foot{grid-template-columns:1fr;} }

/* ---- phones: each battery becomes a compact card row --------------------------------------- */
@media (max-width:720px){
  .rng.is-enhanced .rng__tools{flex-direction:column;flex-wrap:nowrap;align-items:stretch;}   /* nowrap: a wrapping column sizes its line to the chips' full width */
  .rng__chips{flex-wrap:nowrap;min-width:0;max-width:none;width:auto;overflow-x:auto;margin-inline:calc(-1 * var(--gut));padding:2px var(--gut) 4px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);}
  .rng__chips::-webkit-scrollbar{display:none;}
  .rng__chip{flex:none;min-height:44px;scroll-snap-align:start;}
  .rng__search{flex:none;width:100%;min-width:0;}
  .rng__table,.rng__table tbody,.rng__table tr,.rng__table th,.rng__table td{display:block;}
  .rng__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .rng__row{display:grid!important;grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.6fr);gap:10px 12px;padding:14px 16px;}
  .rng__row[hidden]{display:none!important;}
  .rng__row>*{height:auto;padding:0;width:auto;}
  .rng__row+.rng__row{border-top:1px solid var(--rule);}
  .rng__c--code{grid-column:1 / 3;grid-row:1;align-self:center;}
  .rng__c--term{grid-column:3;grid-row:1;justify-self:end;display:flex!important;align-items:center;}
  .rng__c--cca{grid-column:1;grid-row:2;}
  .rng__c--ah{grid-column:2;grid-row:2;}
  .rng__c--dim{grid-column:3;grid-row:2;}
  .rng__c--cca::before,.rng__c--ah::before,.rng__c--dim::before{content:attr(data-label);display:block;margin-bottom:3px;font-size:12px;font-weight:500;
    letter-spacing:.04em;text-transform:none;color:var(--muted);}   /* not uppercased: keeps "Ah" and "mm" correct */
  .rng__c--term::before{content:none;}
  .rng__code{font-size:21px;}
  .rng__c--cca,.rng__c--ah,.rng__c--dim{font-size:15.5px;}
  .rng__more-btn{width:100%;}
  .rng__key div{gap:12px;}
  .rng__help-acts .btn{width:100%;}
}
@media (max-width:360px){
  .rng__row{grid-template-columns:minmax(0,.7fr) minmax(0,.7fr) minmax(0,1.6fr);gap:10px 8px;padding:14px 12px;}
  .rng__c--dim{font-size:14.5px;}
}

@media (prefers-reduced-motion:reduce){
  .rng__chip,.rng__row,.rng__more-ico,.rng__sort,.rng__search input{transition:none;}
  .rng__chip:active{transform:none;}
}

/* ==========================================================================
   86. RECONDITIONED BATTERIES (BatteryCategoryTemplate, 11 Oct 2026)
   The New Automotive Batteries page with reconditioned content. Everything
   here is either a new variant the template opts into from data, or scoped
   to .page-cat--recon, so the New page renders exactly as before.
     .bhero--scene     the glow banner with a real photograph on the stage
     .bhero__note      one supporting line under the hero buttons
     .stamp--dark      the intro stamp in ink (reconditioned, not "new")
     .shop__none       the listing's empty state while no reconditioned
                       product is in the feed
   Motion: the photo settles in (transform only: it is the LCP), nothing
   loops; reduced motion shows the finished frame.
   ========================================================================== */

/* ---- 01 hero: a photograph on the glow stage ---------------------------------------- */
.bhero--scene .bhero__h{font-size:clamp(44px,calc(3.3vw + 22px),76px);text-wrap:balance;}
.bhero--scene .bhero__h em{text-wrap:balance;}
.bhero--scene .lede{max-width:46ch;text-wrap:pretty;}
.bhero--scene .bhero__stage{margin-block:-28px -40px;}
.bhero--scene .bhero__glow{left:-4%;right:-14%;top:2%;bottom:-4%;
  background:radial-gradient(closest-side,rgba(238,28,37,.42),rgba(238,28,37,.12) 60%,rgba(238,28,37,0));}
.bhero__scene{position:absolute;left:-12%;top:7%;width:124%;max-width:none;height:auto;display:block;
  filter:brightness(.8) contrast(1.08) saturate(.92);
  -webkit-mask-image:radial-gradient(ellipse 49% 48% at 52% 50%,#000 52%,rgba(0,0,0,.55) 74%,transparent 100%);
          mask-image:radial-gradient(ellipse 49% 48% at 52% 50%,#000 52%,rgba(0,0,0,.55) 74%,transparent 100%);}
.bhero--scene .bhero__haze{bottom:-6%;opacity:.7;}
.js .bhero__scene{transform:scale(1.045);}
.bhero.is-in .bhero__scene{transform:none;transition:transform 1300ms var(--ease-settle);}
@media (prefers-reduced-motion:reduce){ .js .bhero__scene{transform:none;transition:none;} }

.bhero__note .bhero__call-ico svg{width:15px;height:15px;}
.bhero__note span:last-child{color:var(--n200);}

/* the same banner height as the New page's product hero */
@media (min-width:900px){ .bhero--scene .bhero__in{min-height:clamp(560px,45vw,660px);} }
/* small laptops: the copy keeps room for the one-line headline and both buttons side by side */
@media (min-width:1181px){ .bhero--scene .bhero__in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);} }
@media (min-width:900px) and (max-width:1180px){ .bhero--scene .bhero__in{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);} }
@media (max-width:899px){
  .bhero--scene .bhero__stage{--st:min(88vw,440px);max-width:var(--st);aspect-ratio:1200/900;margin-block:4px -26px;}
  .bhero__scene{left:-8%;top:0;width:116%;}
}
@media (max-width:430px){ .bhero--scene .bhero__h{font-size:42px;} }
@media (max-width:359px){ .bhero--scene .bhero__h{font-size:37px;} }

/* ---- red emphasis on the second line of section titles (this page's copy uses <em>) ---- */
.page-cat .ovw .d-2 em,.page-cat .vs-sec .d-2 em,.page-cat #reviews .d-2 em,.page-cat #faq .d-2 em{font-style:normal;color:var(--red);}
.page-cat--recon .ovw .d-2{max-width:none;}

/* ---- 02 intro stamp: ink, with a thin red ring ------------------------------------------ */
.stamp--dark{background:var(--ink);
  box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 5px rgba(238,28,37,.85),0 22px 44px -22px rgba(14,14,17,.7);}
.stamp--dark>span{padding-inline:16px;}
.stamp--dark>span>span{line-height:1.35;}

/* ---- 03 listing: nothing in the feed yet --------------------------------------------------- */
.shop__none{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(220px,300px);gap:20px clamp(20px,3vw,44px);align-items:start;
  margin-top:8px;padding:clamp(24px,3vw,40px);border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper);}
.shop__none[hidden]{display:none;}
.shop__none-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:99px;background:var(--r50);color:var(--red-ink);}
.shop__none-ico svg{width:24px;height:24px;}
.shop__none-h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,2.2vw,34px);line-height:.98;color:var(--ink);text-wrap:balance;}
.shop__none-p{margin-top:12px;max-width:58ch;font-size:16px;line-height:1.6;color:var(--ink-3);}
.shop__none-acts{margin-top:22px;}
.shop__none-alt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:14.5px;color:var(--ink-3);}
.shop__none-alt .tlink svg{width:10px;height:10px;}
.shop__none-or{color:var(--muted);}
.shop__none-p .tel{white-space:nowrap;}
.shop__none-handy{padding:20px 22px;border-radius:var(--radius);background:var(--paper-2);border:1px solid var(--rule);}
.shop__none-handy h4{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);}
.shop__none-handy ul{display:grid;gap:10px;margin-top:14px;}
.shop__none-handy li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.45;color:var(--ink-2);}
.shop__none-handy svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--red-ink);}
@media (max-width:1100px){
  .shop__none{grid-template-columns:auto minmax(0,1fr);}
  .shop__none-handy{grid-column:2;}
}
@media (max-width:560px){
  .shop__none{grid-template-columns:1fr;padding:22px 18px;}
  .shop__none-handy{grid-column:auto;}
  .shop__none-acts .btn{width:100%;}
}

/* ---- phones ------------------------------------------------------------------------------ */
.bhero__note{flex-wrap:nowrap;align-items:flex-start;}
.bhero__note .bhero__call-ico{margin-top:-5px;}
@media (max-width:560px){
  .shop__none-alt{flex-direction:column;align-items:flex-start;gap:8px;}
  .shop__none-or{display:none;}
}
/* the long "Shop reconditioned batteries" label stays on one line in the dark card: wide screens
   tighten it beside the battery art; narrower cards drop the art and give the button the full width */
.page-cat--recon .vs-sec .opt--dark .opt__ft .btn{padding-inline:18px;font-size:15px;letter-spacing:.04em;}
@media (max-width:1439px){
  .page-cat--recon .vs-sec .opt--dark .opt__art{display:none;}
  .page-cat--recon .vs-sec .opt--dark .opt__ft,.page-cat--recon .vs-sec .opt--dark .opt__p,.page-cat--recon .vs-sec .opt--dark .opt__list{max-width:none;}
}
@media (max-width:560px){ .page-cat--recon .vs-sec .opt--dark .opt__ft .btn{font-size:14px;letter-spacing:.03em;padding-inline:14px;gap:8px;} }
@media (max-width:374px){ .page-cat--recon .vs-sec .opt--dark .opt__ft .btn{font-size:13px;letter-spacing:.02em;padding-inline:12px;} }
/* two filters (no Sort) leave the tools on the filters' row: the search gives way, not Apply */
.page-cat--recon .shop__apply{flex-shrink:0;}

/* ==========================================================================
   87. LEGAL PAGES (LegalPage: privacy-policy.html, 12 Oct 2026)
   A reading page, not a sales page: compact dark title band under the
   shared header, a draft notice while the copy awaits approval, a sticky
   "On this page" list beside numbered sections (a disclosure above them
   below 1024px), plain contact blocks and one closing contact panel.
   Body copy 17px / 1.7 at 68ch; red is kept to markers, the current
   contents item and the primary button.
   Motion: none beyond the site's smooth anchor scroll (off under reduced
   motion) and 150ms colour changes on the contents links.
   Prefix: lgl
   ========================================================================== */

/* ---- title band --------------------------------------------------------------------------- */
.lgl-hero{position:relative;overflow:hidden;isolation:isolate;background:#0B0708;color:#fff;border-bottom:1px solid rgba(255,255,255,.06);}
.lgl-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 140% at 100% 0%,rgba(238,28,37,.2),rgba(238,28,37,.05) 45%,rgba(238,28,37,0) 70%),
             radial-gradient(40% 80% at 0% 100%,rgba(238,28,37,.07),rgba(238,28,37,0) 70%);}
.lgl-hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:clamp(32px,6vw,104px);align-items:end;
  padding-block:clamp(26px,3vw,40px) clamp(44px,5vw,72px);}
.lgl-hero__copy{min-width:0;max-width:760px;}
.lgl-hero .eyebrow{color:var(--n300);}
.lgl-hero .eyebrow--line::after{background:rgba(255,255,255,.18);max-width:120px;}
.lgl-hero__h{margin:16px 0 22px;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.003em;line-height:.9;
  font-size:clamp(50px,calc(4.2vw + 22px),88px);color:#fff;}
.lgl-hero__lede{max-width:60ch;font-size:clamp(17px,calc(.3vw + 15.6px),19px);line-height:1.6;color:var(--n200);}
.lgl-hero__p{margin-top:12px;max-width:60ch;font-size:16px;line-height:1.6;color:var(--n400);}
.lgl-hero__facts{display:grid;align-self:end;border-top:1px solid rgba(255,255,255,.14);}
.lgl-hero__facts div{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);}
.lgl-hero__facts dt{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--n400);}
.lgl-hero__facts dd{font-size:15.5px;line-height:1.45;color:#fff;}
.lgl-hero__facts a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px;transition:text-decoration-color 150ms ease;}
.lgl-hero__facts a:hover{text-decoration-color:var(--red);}
.lgl-hero .confirm{background:repeating-linear-gradient(-45deg,#3f2d06 0 7px,#4a3608 7px 14px);color:#FCD34D;border-color:#6b4f0c;}

/* ---- draft notice (only while the policy awaits approval) ------------------------------------ */
.lgl-draft{background:#FFFBEB;border-bottom:1px solid #F5C451;color:#78350F;}
.lgl-draft__in{display:flex;align-items:flex-start;gap:12px;padding-block:14px;}
.lgl-draft svg{width:18px;height:18px;flex:none;margin-top:2px;}
.lgl-draft p{max-width:110ch;font-size:14.5px;line-height:1.55;}
.lgl-draft b{margin-right:4px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}

/* ---- layout ------------------------------------------------------------------------------------ */
.lgl-body{padding-block:clamp(40px,5vw,88px) clamp(56px,6vw,104px);background:var(--paper);}
.lgl__grid{display:grid;grid-template-columns:minmax(210px,250px) minmax(0,780px);gap:clamp(40px,6.4vw,112px);align-items:start;}
.lgl__main{min-width:0;}

/* contents: sticky list on desktop */
.lgl-toc{position:sticky;top:calc(var(--header-h) + 28px);max-height:calc(100vh - var(--header-h) - 56px);overflow-y:auto;overscroll-behavior:contain;
  padding:2px 4px 8px 2px;scrollbar-width:thin;}
.lgl-toc__h{margin-bottom:14px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.lgl-toc__list{border-left:1px solid var(--rule);}
.lgl-toc__list a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px;margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;
  font-size:14.5px;line-height:1.35;color:var(--ink-3);text-decoration:none;transition:color 150ms ease,border-color 150ms ease;}
.lgl-toc__n{padding-top:1px;font-size:12.5px;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--muted);}
.lgl-toc__list a:hover{color:var(--ink);}
.lgl-toc__list a[aria-current]{color:var(--ink);font-weight:600;border-left-color:var(--red);}
.lgl-toc__list a[aria-current] .lgl-toc__n{color:var(--red-ink);}
.lgl-toc__list a:focus-visible,.lgl-toc__top:focus-visible,.lgl-useful__top:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:2px;}
.lgl-toc__top,.lgl-useful__top{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13.5px;font-weight:500;color:var(--ink-3);text-decoration:none;}
.lgl-toc__top{margin-top:10px;padding-left:2px;}
.lgl-toc__top svg,.lgl-useful__top svg{width:12px;height:12px;}
.lgl-toc__top:hover,.lgl-useful__top:hover{color:var(--ink);}

/* contents: a disclosure above the policy below 1024px */
.lgl-tocm{display:none;margin-bottom:clamp(28px,4vw,40px);border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--paper);}
.lgl-tocm summary{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 18px;cursor:pointer;list-style:none;font-size:15.5px;font-weight:600;color:var(--ink);}
.lgl-tocm summary::-webkit-details-marker{display:none;}
.lgl-tocm summary::after{content:"";width:9px;height:9px;margin-left:auto;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-2px) rotate(45deg);transition:transform 200ms var(--ease-out);}
.lgl-tocm[open] summary::after{transform:translateY(2px) rotate(-135deg);}
.lgl-tocm summary:focus-visible{outline:3px solid var(--red);outline-offset:2px;}
.lgl-tocm__n{font-size:13.5px;font-weight:500;color:var(--muted);}
.lgl-tocm .lgl-toc__nav{padding:4px 18px 16px;border-top:1px solid var(--rule);}
.lgl-tocm .lgl-toc__list{border-left:0;}
.lgl-tocm .lgl-toc__list a{padding:10px 0;border-left:0;margin-left:0;min-height:44px;align-items:center;}
.lgl-tocm .lgl-toc__list li+li a{border-top:1px solid var(--rule);}

/* ---- the policy ----------------------------------------------------------------------------------- */
.lgl-doc{max-width:780px;}
.lgl-sec{padding-block:clamp(30px,3.4vw,46px);border-top:1px solid var(--rule);}
.lgl-sec:first-child{padding-top:0;border-top:0;}
.lgl-sec__h{display:flex;align-items:baseline;gap:14px;margin-bottom:4px;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,calc(1.2vw + 20px),38px);line-height:1;letter-spacing:.004em;color:var(--ink);text-wrap:balance;}
.lgl-sec__n{flex:none;min-width:24px;font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--red-ink);transform:translateY(-5px);}
.lgl-doc p{margin-top:14px;max-width:68ch;font-size:17px;line-height:1.7;color:var(--ink-2);text-wrap:pretty;}
.lgl-doc p a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:1.5px;text-underline-offset:3px;}
.lgl-doc p a:hover{color:var(--red-ink);}
.lgl-doc .confirm{margin-left:4px;vertical-align:2px;}
.lgl-h3{margin-top:28px;font-size:18px;font-weight:600;line-height:1.35;color:var(--ink);}
.lgl-h3+p,.lgl-h3+.lgl-list,.lgl-h3+.lgl-contact{margin-top:10px;}
.lgl-list{display:grid;gap:8px;margin-top:12px;}
.lgl-list li{position:relative;max-width:66ch;padding-left:24px;font-size:17px;line-height:1.6;color:var(--ink-2);text-wrap:pretty;}
.lgl-list li::before{content:"";position:absolute;left:2px;top:.8em;width:10px;height:2px;background:var(--red);}
.lgl-contact{display:grid;max-width:580px;margin-top:14px;padding:2px 0 2px 20px;border-left:2px solid var(--ink);}
.lgl-contact div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:7px 0;}
.lgl-contact dt{padding-top:3px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.lgl-contact dd{font-size:16.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere;}
.lgl-contact a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:3px;transition:text-decoration-color 150ms ease;}
.lgl-contact a:hover{text-decoration-color:var(--red);}
.lgl-note{max-width:40rem;margin:20px 0 0;}

/* closing contact panel */
.lgl-cta{position:relative;overflow:hidden;isolation:isolate;margin-top:18px;padding:clamp(26px,3.2vw,44px);border-radius:var(--radius-lg);background:var(--ink);color:#fff;}
.lgl-cta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 120% at 100% 0%,rgba(238,28,37,.24),rgba(238,28,37,0) 65%);}
.lgl-cta__h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,calc(1.6vw + 18px),44px);line-height:.95;text-wrap:balance;}
.lgl-doc .lgl-cta__p{max-width:56ch;margin-top:12px;color:var(--n300);}
.lgl-doc .lgl-cta__addr{display:grid;gap:2px;margin-top:18px;font-size:15.5px;line-height:1.5;color:var(--n300);}
.lgl-cta__addr b{font-weight:600;color:#fff;}
.lgl-cta__acts{margin-top:26px;}
.lgl-cta__em{text-transform:none;letter-spacing:0;}

/* useful links */
.lgl-useful{margin-top:clamp(40px,4.4vw,60px);padding-top:24px;border-top:1px solid var(--rule-strong);}
.lgl-useful__h{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.lgl-useful__list{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:10px;}
.lgl-useful__list .tlink{min-height:44px;white-space:nowrap;border-bottom:0;}
.lgl-useful__list .tlink svg{width:10px;height:10px;flex:none;}
.lgl-useful__top{margin-top:8px;}

/* ---- widths ------------------------------------------------------------------------------------ */
@media (max-width:1023px){
  .lgl__grid{grid-template-columns:minmax(0,1fr);}
  .lgl-toc{display:none;}
  .lgl-tocm{display:block;}
  .lgl-doc{max-width:none;}
}
@media (max-width:899px){
  .lgl-hero__in{grid-template-columns:minmax(0,1fr);align-items:start;gap:28px;}
  .lgl-hero__facts{align-self:start;}
}
@media (max-width:560px){
  .lgl-hero__h{font-size:46px;}
  .lgl-doc p,.lgl-list li{font-size:16.5px;}
  .lgl-contact{padding-left:16px;}
  .lgl-contact div{grid-template-columns:minmax(0,1fr);gap:2px;padding:8px 0;}
  .lgl-cta__acts .btn{width:100%;}
}
@media (max-width:359px){ .lgl-hero__h{font-size:40px;} .lgl-cta__mail .lgl-cta__em{font-size:13px;} }

/* ---- print: the policy only ------------------------------------------------------------------- */
@media print{
  .lgl-toc,.lgl-tocm,.lgl-useful,.lgl-cta__acts{display:none!important;}
  .lgl-hero,.lgl-cta{background:none!important;color:#000!important;}
  .lgl-hero__h,.lgl-hero__lede,.lgl-hero__p,.lgl-hero__facts dd,.lgl-cta__addr b{color:#000!important;}
  .lgl__grid{display:block;}
  .lgl-sec{break-inside:avoid-page;}
}

/* ==========================================================================
   88. HOMEPAGE — Figma Final Proof (node 66499:26531, applied 14 Oct 2026)
   Everything here is scoped to .page-home so the shared components keep
   rendering exactly as they do on the twelve other pages.
   ========================================================================== */

/* ---- hero: Find my battery leads, Call is the dark secondary -------------- */
/* Figma fills the secondary button #0E0E11 with a #27272A border. The live hero
   sits on a photograph, where that border disappears, so the edge is lifted to
   a legible 3:1 against the plate (WCAG 1.4.11). */
.page-home .hero__acts .btn--dark{border-color:rgba(255,255,255,.42);}
.page-home .hero__acts .btn--dark:hover{background:#000;border-color:rgba(255,255,255,.62);}
/* a leading icon is a label, not a direction: it does not drift on hover */
.btn__ico--lead{order:-1;}
.btn:hover .btn__ico--lead{transform:none;}

/* ---- reviews: red count, dark "Leave a review", brand mark --------------- */
.page-home #reviews .d-2 em{font-style:normal;color:var(--red);}
.page-home #reviews .rsum__n{color:var(--red);}
.page-home #reviews .rsum__body h3{margin-bottom:18px;}

/* ---- brand mark: the logo sits top right of two sections in the design ---- */
.bmark{display:block;height:auto;margin-left:auto;}
/* §41 collapses every .sec-head to one column; the design keeps the mark beside the heading */
@media (min-width:861px){
  .page-home #reviews .sec-head{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,4vw,64px);}
}
.page-home #reviews .sec-head__aside{display:flex;justify-content:flex-end;align-items:center;max-width:none;}
.page-home #reviews .bmark{width:clamp(168px,20vw,286px);}
.page-home #family .split>div:last-child{position:relative;}
.page-home #family .bmark{position:absolute;top:0;right:0;width:clamp(132px,13vw,180px);}
@media (max-width:1180px){.page-home #family .bmark{width:140px;}}
@media (max-width:920px){.page-home #family .bmark{display:none;}}
@media (max-width:860px){
  .page-home #reviews .sec-head__aside{justify-content:flex-start;}
  .page-home #reviews .bmark{margin-left:0;width:clamp(150px,34vw,200px);}
}

/* ---- fix: the "100% family run" stamp escaped under reduced motion ------- */
/* §? turns the sticky family photo off with position:static, which also removes the
   containing block the stamp is positioned against, so the badge landed in the
   section's bottom right corner. position:relative stops the sticky just the same. */
@media (prefers-reduced-motion:reduce){
  .page-home #family .split__media{position:relative;top:auto;}
}

/* ---- trust strip: the design's descriptions run to three lines ----------- */
.page-home .trust__list .trust__d{text-wrap:pretty;}

/* ==========================================================================
   90. HOMEPAGE — client design pass 2 (14 Oct 2026)
   Copy changes need three components to flex. No new layout families, no new
   accent, no new radius: the incumbent system does all of it.
   ========================================================================== */

/* ---- Fair pricing: "what to send us" is two alternatives, not three steps -- */
.fproc--alt li{position:relative;}
.fproc__eg{display:block;margin-top:7px;font-family:var(--body);font-size:13.5px;
  line-height:1.4;color:var(--n400);font-style:italic;}
.fproc__or{position:absolute;left:0;bottom:-15px;z-index:1;
  display:inline-grid;place-items:center;min-width:34px;height:22px;padding:0 9px;
  border:1px solid rgba(255,255,255,.22);border-radius:2px;background:var(--n950);
  font-family:var(--signage);font-weight:500;font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--n400);}

/* ---- Roadside: the terms line sits under the tiles. n400, not n500: the note
   crosses the point where the backdrop gradient lifts, and n500 drops under 4.5:1 there. */
.rsd__note{position:relative;z-index:1;margin-top:14px;font-size:13.5px;line-height:1.5;
  color:var(--n400);max-width:70ch;}

/* ---- Recycling: the design runs four cards, so the row carries four ------ */
.page-home #recycling .flow--4{grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.2vw,30px);}
.page-home #recycling .flow--4 .fnode h3{font-size:clamp(20px,1.7vw,24px);}
.page-home #recycling .flow--4 .fnode{padding:clamp(22px,2.2vw,28px) clamp(20px,2vw,26px);}
@media (max-width:1180px){
  .page-home #recycling .flow--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* the connector only reads along a single row, so it stops at the wrap */
  .page-home #recycling .flow--4 .fnode:nth-child(2)::after{display:none;}
}
@media (max-width:820px){
  .page-home #recycling .flow--4{grid-template-columns:1fr;}
  .page-home #recycling .flow--4 .fnode:nth-child(2)::after{display:block;}
  /* §41 drew the vertical connector for cards 1 and 2 only; four needs three */
  .page-home #recycling .flow--4.rv-in .fnode:nth-child(3)::after{
    transform:translateX(-50%) scaleY(1);animation-name:current-flow-v;}
}

/* ==========================================================================
   89. DISPLAY FACE — Söhne Schmal (14 Oct 2026)

   The Figma file sets every heading in Söhne Schmal Dreiviertelfett, and the
   client supplied the family. Two things to know about these specific files:

   1. LICENCE. They are Klim's TRIAL cut — the family name is literally
      "Test Söhne Schmal" and the embedded licence URL is
      klim.co.nz/licences/test-fonts/, which covers evaluation and mockups,
      not a published site. Drop the licensed webfont over the three
      soehne-schmal woff2 files before launch; nothing else here changes.

   2. COVERAGE. The trial cut carries 68 glyphs: space, comma, hyphen, full
      stop, 0-9, A-Z, a-z, Ö and ö. Eight characters the display type uses
      are absent — & $ ’ ? + / : % — and they appear in headings as prominent
      as "Don’t just take our word for it.", "Car won’t start?", every price
      and the 100% stamp. Those characters fall through the family stack to
      PP Formula Condensed, the outgoing display face, which is also a bold
      condensed grotesque, so the seam is a small weight shift rather than a
      change of voice. size-adjust below lines the two cap heights up
      (Söhne 718/em against PP Formula 800/em) so the borrowed punctuation
      sits at the right height. When the licensed files land, the eight
      characters come from Söhne itself and nothing here needs touching.
   ========================================================================== */

@font-face{font-family:"Soehne Schmal";src:url("../fonts/Soehne-Schmal-600-normal.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
  ascent-override:88%;descent-override:28%;line-gap-override:16%;size-adjust:111%;}
@font-face{font-family:"Soehne Schmal";src:url("../fonts/Soehne-Schmal-700-normal.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
  ascent-override:88%;descent-override:28%;line-gap-override:16%;size-adjust:111%;}
@font-face{font-family:"Soehne Schmal";src:url("../fonts/Soehne-Schmal-800-normal.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap;
  ascent-override:88%;descent-override:28%;line-gap-override:16%;size-adjust:111%;}

/* No unicode-range face is declared for the missing glyphs on purpose. A
   second @font-face in the same family, even one scoped by unicode-range,
   wins the weight match in Chromium and then renders nothing for the
   characters outside its range, so the headings lose the whole family. The
   family stack below does the per-character fallback correctly. */

/* Söhne Mono came with the family. Declared so it is one line away; nothing
   uses it yet, so nothing downloads it. */
@font-face{font-family:"Soehne Mono";src:url("../fonts/Soehne-Mono-700-normal.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;}

:root{
  --display:"Soehne Schmal","PP Formula Cond","Arial Narrow",system-ui,sans-serif;
  --mono:"Soehne Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ==========================================================================
   91. MOBILE PASS (14 Oct 2026)

   From an element-level audit of all thirteen pages at 430, 390, 375 and 320:
   overflow, clipped text, touch-target size and spacing, tiny type and images
   wider than their box. Everything here is inside a phone media query, so the
   desktop layouts are untouched.
   ========================================================================== */

/* ---- 1. A button label must never be clipped -----------------------------
   .btn is white-space:nowrap with max-width:100%, so a label that outgrows its
   box is cut from both sides and reads as broken text rather than a long label.
   On phones a label wraps instead. Phone numbers stay on one line. */
@media (max-width:600px){
  .btn{white-space:normal;text-wrap:pretty;line-height:1.25;padding-block:12px;}
  .btn[href^="tel:"],.btn[href^="sms:"],.btn__num{white-space:nowrap;}
}

/* ---- 2. Recycling cards: the heading was landing in the icon column -------
   §80 gives .flow--4 cards a "44px icon, rest content" grid on phones, which is
   right for the roadside and testing cards because they carry a .fnode__n. The
   homepage recycling cards have no number, so the h3 was being squeezed into
   44px and wrapping one word per line. */
@media (max-width:820px){
  .page-home #recycling .flow--4 .fnode{display:block;padding:clamp(20px,5vw,26px);}
  .page-home #recycling .flow--4 .fnode h3{margin-bottom:10px;}
}

/* ---- 3. Roadside tile: the day chips get their own row --------------------
   Icon, text and the M T W T F S S strip were three flex items on one line, so
   the text wrapped to four lines in a 200px column and the chips ran past the
   tile edge. */
@media (max-width:600px){
  .rsd__tiles li{flex-wrap:wrap;align-items:flex-start;}
  .rsd__tiles li>span:not(.rsd__ico):not(.rsd__days){flex:1 1 0;min-width:0;}
  .rsd__days{flex:1 0 100%;margin-left:48px;margin-top:10px;}
}

/* ---- 4. New vs reconditioned: the battery art sat on the bullets ---------
   .opt__art is decorative and overlapped the list and the button by ~190px.
   It is hidden on phones, where there is no room beside the copy anyway. */
@media (max-width:600px){
  /* .opt--dark>.opt__art wins over a bare .opt__art, so the selector matches it.
     §I1 already hides both on the category pages at 560; the homepage section is
     .vs rather than .vs-sec, so it never got the same treatment. */
  .vs .opt__art,.vs .opt__ribs,.opt--dark>.opt__art{display:none;}
  .opt__list{max-width:none;padding-right:0;}
}

/* ---- 5. Product reviews: a carousel that could not be scrolled ------------
   .pdr__list is a snap carousel on phones, but a later .reviews rule set
   overflow:hidden at the same specificity, so two of the three reviews were
   rendered off the edge with no way to reach them. */
@media (max-width:600px){
  #reviews .reviews.pdr__list{overflow-x:auto;overflow-y:hidden;}
}

/* ---- 6. Find My Battery: the path card was wider than its column ---------- */
@media (max-width:920px){
  .fpath,.fpath__step{min-width:0;}
  .fpath{grid-template-columns:minmax(0,1fr);}
  .fpath__step{grid-template-columns:40px minmax(0,1fr);column-gap:14px;}
}

/* ---- 7. Touch targets ----------------------------------------------------
   Everything the audit found under 44px. Two techniques: controls that own
   their line get a min-height, and links inside a dense row keep their size and
   gain a transparent hit area, so no layout moves. */
@media (max-width:767px){
  .tlink{min-height:44px;display:inline-flex;align-items:center;gap:8px;}
  /* min-width:0 and a wrap rule: a flex item will not shrink on its own, and the
     email address outgrew the column at 375 and below */
  .ft2__lines a,.ft__legal a,.ft2__col a{display:flex;align-items:center;min-height:44px;
    min-width:0;overflow-wrap:anywhere;}
  .ft2__dir{min-height:44px;}
  .ft__social a,.ft__social span{width:44px;height:44px;}

  .hdr__main .brand,.hero__proof a,.bhero__call a{position:relative;}
  .hdr__main .brand::after,.hero__proof a::after,.bhero__call a::after{
    content:"";position:absolute;inset:-11px -8px;border-radius:4px;}
}

/* ---- 8. The rest of the targets the audit turned up ----------------------- */
@media (max-width:767px){
  /* top utility band: two icon links were 34 and 43px wide */
  .band__link{min-width:44px;justify-content:center;}
  /* contact page */
  .cx-direct__v{display:inline-flex;align-items:center;min-height:44px;}
  .cform__change{display:inline-flex;align-items:center;min-height:44px;}
  /* product page category link above the title */
  .pdx__cat{display:inline-flex;align-items:center;min-height:44px;}
  /* range table column sorts */
  .rng__sort{min-height:44px;}
  /* legal pages: phone, email and web links sit inside a definition list, so the
     hit area grows and the line height does not */
  .lgl-hero__facts dd a,.lgl-contact dd a,.lgl__contact a,.lgl dd a{position:relative;display:inline-block;}
  .lgl-hero__facts dd a::after,.lgl-contact dd a::after,.lgl__contact a::after,.lgl dd a::after{
    content:"";position:absolute;inset:-15px -6px;border-radius:4px;}
  /* two columns of links 6px apart */
  .lgl-useful__list{gap:10px 28px;}
}

/* ---- 9. Recycling header over the neon backdrop --------------------------
   At desktop the heading and lede sit in two columns over the dark part of the
   photograph. On a phone they run the full width and cross the bright streaks,
   where white text drops well under 4.5:1. A scrim sits behind the header only. */
@media (max-width:820px){
  .page-home #recycling .sec-head{position:relative;isolation:isolate;}
  .page-home #recycling .sec-head::before{content:"";position:absolute;
    inset:-16px calc(-1 * var(--gut)) -14px;z-index:-1;
    background:linear-gradient(180deg,rgba(14,14,17,.74),rgba(14,14,17,.86));}
}