/* The two typefaces, served from this server. Google's copy meant a second
   DNS lookup, a second TLS handshake and a stylesheet that held up the first
   paint; these are one file each, and text shows in a fallback until they land.
   DM Sans is a variable font, so one file covers every weight we use. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/dm-sans.woff2') format('woff2-variations'),url('fonts/dm-sans.woff2') format('woff2')}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/dm-serif-display.woff2') format('woff2')}

/* ==========================================================================
   JagBT site styles
   ========================================================================== */
:root{
  --green:#08271d;
  --green-deep:#041912;
  --green-mid:#0d3527;
  --cream:#f2efe7;
  --cream-2:#e9e5db;
  --ink:#101511;
  --ink-2:#4a5049;
  --muted:#7d8179;
  --gold:#a88b55;
  --gold-lt:#c3a76e;
  --line-lt:#d5d1c4;
  --line-dk:rgba(255,255,255,.16);
  --ok:#2f6b4a;
  --warn-bg:#f6efdf;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:132px;
  --pad:clamp(22px,4vw,72px); --maxw:1680px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4,h5{font-family:"DM Serif Display",Georgia,"Times New Roman",serif;font-weight:400;margin:0;letter-spacing:-.02em;text-wrap:balance}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto}
.eyebrow{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;display:block}
.eyebrow.on-dark{color:var(--gold-lt)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:10px;z-index:100;background:#fff;color:var(--green);padding:12px 18px;font-size:13px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;padding:16px 30px;border:1px solid var(--green);background:var(--green);
  color:#fff;transition:background .25s,color .25s,border-color .25s;cursor:pointer;min-height:48px;text-align:center}
.btn:hover{background:var(--green-mid);border-color:var(--green-mid)}
.btn.outline{background:transparent;color:var(--green);border-color:var(--green)}
.btn.outline:hover{background:var(--green);color:#fff}
.btn.on-dark{background:#fff;color:var(--green);border-color:#fff}
.btn.on-dark:hover{background:var(--gold-lt);border-color:var(--gold-lt);color:var(--green-deep)}
.btn.ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn.ghost-dark:hover{background:#fff;color:var(--green)}
.btn[disabled],.btn.is-off{background:var(--cream-2);border-color:var(--line-lt);color:var(--muted);cursor:not-allowed}
.tlink{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--ink);padding:6px 0;border-bottom:1px solid var(--line-lt);transition:border-color .25s,color .25s}
.tlink:hover{border-bottom-color:var(--gold);color:var(--gold)}
.tlink.on-dark{color:#fff;border-bottom-color:rgba(255,255,255,.3)}
.tlink.on-dark:hover{color:var(--gold-lt);border-bottom-color:var(--gold-lt)}
.tlink svg{transition:transform .25s}
.tlink:hover svg{transform:translateX(4px)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;width:100%;z-index:60;color:#fff;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.stuck,.nav.solid{background:var(--green-deep);border-bottom-color:var(--line-dk)}
.nav-in{max-width:var(--maxw);margin:0 auto;height:74px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.logo{font-family:"DM Serif Display",Georgia,serif;font-size:25px;letter-spacing:.09em;line-height:1}
.logo i{font-style:normal;font-family:"DM Sans",sans-serif;font-size:.5em;letter-spacing:.22em;opacity:.7;vertical-align:2px}
.navlinks{display:flex;gap:32px;font-size:13px;letter-spacing:.15em;text-transform:uppercase;font-weight:500}
.navlinks a{padding:6px 0;border-bottom:1px solid transparent;transition:border-color .25s,color .25s;white-space:nowrap}
.navlinks a:hover,.navlinks a[aria-current="page"]{border-bottom-color:var(--gold-lt);color:var(--gold-lt)}
.navtools{display:flex;align-items:center;gap:var(--s2)}
.icobtn{display:grid;place-items:center;width:44px;height:44px;color:inherit;position:relative;background:none;border:0;cursor:pointer}
.icobtn:hover{color:var(--gold-lt)}
.cartdot{position:absolute;top:8px;right:6px;min-width:15px;height:15px;border-radius:999px;background:var(--gold);
  color:var(--green-deep);font-size:9px;font-weight:600;display:grid;place-items:center;padding:0 4px;font-family:"DM Sans",sans-serif}
.burger{display:none}

/* ---------- home hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;background:var(--green-deep);overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url("hero.jpg") center 64%/cover no-repeat;background-image:image-set(url("hero.webp") type("image/webp"),url("hero.jpg") type("image/jpeg"));filter:saturate(.85) contrast(1.03) brightness(.74)}
.hero-bg:after{content:"";position:absolute;inset:0;background:
  linear-gradient(101deg,rgba(4,17,12,.90) 0%,rgba(4,17,12,.72) 27%,rgba(4,17,12,.26) 60%,rgba(4,17,12,.40) 100%),
  linear-gradient(0deg,rgba(4,17,12,.60),transparent 34%)}
.hero-in{position:relative;z-index:2;width:100%;max-width:1180px;margin:0;padding:130px var(--pad) 44px;color:#fff}
.hero h1{font-size:clamp(44px,6.4vw,88px);line-height:.99;max-width:15ch;margin:20px 0 24px}
.hero p{font-size:17px;line-height:1.7;max-width:54ch;color:rgba(255,255,255,.82)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5);max-width:820px;
  border-top:1px solid var(--line-dk);padding-top:var(--s3)}
.hstat b{display:block;font-family:"DM Serif Display",Georgia,serif;font-size:32px;line-height:1;margin-bottom:6px}
.hstat span{font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.6);text-transform:uppercase}

/* ---------- interior page head ---------- */
.phead{background:var(--green-deep);color:#fff;padding:150px var(--pad) var(--s5)}
.phead-in{max-width:var(--maxw);margin:0 auto}
.phead h1{font-size:clamp(36px,5.4vw,72px);line-height:1.02;max-width:18ch;margin:18px 0 0}
.phead p{margin-top:20px;max-width:58ch;color:rgba(255,255,255,.74);line-height:1.75}
.crumb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:var(--s3)}
.crumb a:hover{color:var(--gold-lt)}

/* ---------- sections ---------- */
.sec{padding:var(--s7) var(--pad)}
.sec.tight{padding-top:var(--s6);padding-bottom:var(--s6)}
.sec.dark{background:var(--green);color:#fff}
.sec.deep{background:var(--green-deep);color:#fff}
.sec.alt{background:var(--cream-2)}
.sec-head{max-width:var(--maxw);margin:0 auto var(--s5)}
.sec-head h2{font-size:clamp(32px,4.4vw,60px);line-height:1.04;max-width:18ch;margin:18px 0 0}
.sec-head p{margin-top:20px;max-width:58ch;color:var(--ink-2);line-height:1.75}
.sec.dark .sec-head p,.sec.deep .sec-head p{color:rgba(255,255,255,.74)}
.sec-in{max-width:var(--maxw);margin:0 auto}

/* ---------- pillars ---------- */
.pillars{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--line-dk)}
.pillar{background:var(--green);padding:var(--s5) var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s3);min-height:380px}
.pillar-ico{width:36px;height:36px;color:var(--gold-lt)}
.pillar h3{font-size:30px;line-height:1.1}
.pillar p{color:rgba(255,255,255,.74);font-size:15px;line-height:1.7;flex:1}
.pillar .meta{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.pillar-links{display:flex;gap:var(--s3) var(--s4);flex-wrap:wrap}

/* ---------- product cards ---------- */
.cards{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s3)}
.card{background:#fff;display:flex;flex-direction:column;border:1px solid var(--line-lt);transition:border-color .3s}
.card:hover{border-color:var(--gold)}
.card-vis{aspect-ratio:4/3;background:#e6e2d8;display:grid;position:relative;overflow:hidden}
.mod{width:56%;aspect-ratio:2.05/1;border-radius:9px;position:relative;background:linear-gradient(155deg,#3a3d3a,#0a0d0b 68%);
  box-shadow:0 24px 44px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.13)}
.mod:before{content:attr(data-mark);position:absolute;top:19%;left:12%;font-size:10px;letter-spacing:.3em;color:#8d8f8b;font-family:"DM Sans",sans-serif}
.mod:after{content:"";position:absolute;bottom:20%;left:50%;transform:translateX(-50%);width:28px;height:2px;border-radius:2px;background:#6fc79a;box-shadow:0 0 12px #6fc79a}
.mod.lens{aspect-ratio:1.35/1;width:36%;border-radius:13px}
.mod.lens:after{width:26px;height:26px;border-radius:50%;bottom:auto;top:50%;left:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 38% 34%,#3d4a45,#05100c 66%);box-shadow:inset 0 0 0 2px #2b332f,0 0 16px rgba(0,0,0,.6)}
.card-body{padding:var(--s4) var(--s3) var(--s3);display:flex;flex-direction:column;gap:12px;flex:1}
.card-body h3{font-size:26px}
.card-body .desc{color:var(--ink-2);font-size:14.5px;line-height:1.65;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line-lt);margin-top:var(--s1)}
.price{font-family:"DM Serif Display",Georgia,serif;font-size:25px}
.stock{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stock.back{color:var(--gold)}

/* ---------- steps ---------- */
.steps{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;background:var(--line-dk)}
.step{background:var(--green);padding:var(--s3) var(--s3) var(--s4);display:flex;flex-direction:column;gap:12px;min-height:200px}
.step:first-child{background:var(--green-mid)}
.step .t{font-family:"DM Serif Display",Georgia,serif;font-size:29px;color:var(--gold-lt);line-height:1}
.step h3{font-size:19px;line-height:1.25}
.step p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.68)}

/* numbered long-form steps (how to fit) */
.bigsteps{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column}
.bigstep{display:grid;grid-template-columns:88px 1fr;gap:var(--s4);padding:var(--s4) 0;border-top:1px solid var(--line-lt)}
.bigstep:last-child{border-bottom:1px solid var(--line-lt)}
.bigstep .n{font-family:"DM Serif Display",Georgia,serif;font-size:44px;line-height:.9;color:var(--gold)}
.bigstep h3{font-size:26px;margin-bottom:12px}
.bigstep p{color:var(--ink-2);line-height:1.75;max-width:62ch}
.bigstep p+p{margin-top:12px}

/* ---------- spec table ---------- */
.specs{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column}
.spec{display:grid;grid-template-columns:250px 1fr;gap:var(--s4);padding:20px 0;border-top:1px solid var(--line-lt);align-items:baseline}
.spec:last-child{border-bottom:1px solid var(--line-lt)}
.spec dt{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:500}
.spec dd{margin:0;line-height:1.7;color:var(--ink)}
.sec.dark .spec,.sec.deep .spec{border-color:var(--line-dk)}
.sec.dark .spec dt,.sec.deep .spec dt{color:rgba(255,255,255,.5)}
.sec.dark .spec dd,.sec.deep .spec dd{color:#fff}

/* ---------- checks / fit rows ---------- */
.fitlist{display:flex;flex-direction:column}
.fitrow{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:baseline;padding:20px 0;border-top:1px solid var(--line-lt)}
.fitrow:last-child{border-bottom:1px solid var(--line-lt)}
.fitrow b{font-family:"DM Serif Display",Georgia,serif;font-size:23px;font-weight:400}
.fitrow span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.warn{background:var(--warn-bg);border-left:3px solid var(--gold);padding:var(--s3);display:flex;gap:var(--s2);align-items:flex-start}
.warn svg{flex:none;color:var(--gold);margin-top:2px}
.warn b{display:block;font-size:14px;margin-bottom:5px}
.warn p{font-size:14px;line-height:1.65;color:var(--ink-2)}
.warn p+p{margin-top:8px}
.warn a{color:var(--green);font-weight:600;border-bottom:1px solid var(--gold)}
.warn a:hover{color:var(--gold)}

.checks{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--s3)}
.check{background:#fff;border:1px solid var(--line-lt);padding:var(--s3);display:flex;flex-direction:column;gap:12px}
.check .n{width:30px;height:30px;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;
  font-size:12px;font-family:"DM Sans",sans-serif;font-weight:600;border-radius:50%}
.check h3{font-size:19px;line-height:1.3}
.check p{font-size:14px;line-height:1.65;color:var(--ink-2)}
.check .verdict{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-top:auto;padding-top:12px;border-top:1px solid var(--line-lt)}

/* ---------- two column ---------- */
.two{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s6);align-items:start}
.two.even{grid-template-columns:1fr 1fr}

/* ---------- split image ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:600px}
.split-img{background:url("hero.jpg") 38% center/cover no-repeat;background-image:image-set(url("hero.webp") type("image/webp"),url("hero.jpg") type("image/jpeg"));filter:saturate(.85) brightness(.85);min-height:320px}
.split-copy{background:var(--green-deep);color:#fff;padding:var(--s7) var(--s5);display:flex;flex-direction:column;justify-content:center;gap:20px}
.split-copy h2{font-size:clamp(30px,3.5vw,52px);line-height:1.05;max-width:15ch}
.split-copy p{color:rgba(255,255,255,.76);max-width:46ch;line-height:1.75}

/* ---------- prose (legal, articles) ---------- */
.prose{max-width:72ch;margin:0 auto;padding:var(--s6) var(--pad) var(--s7)}
.prose h2{font-size:28px;margin:var(--s5) 0 14px}
.prose h3{font-size:21px;margin:var(--s4) 0 10px}
.prose p{margin-bottom:16px;line-height:1.8;color:var(--ink-2)}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;color:var(--ink-2);line-height:1.8}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--gold)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--green);border-bottom:1px solid var(--line-lt)}
.prose a:hover{border-bottom-color:var(--gold);color:var(--gold)}
.prose .updated{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s4)}

/* ---------- FAQ ---------- */
.faq{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column}
.faq details{border-top:1px solid var(--line-lt)}
.faq details:last-of-type{border-bottom:1px solid var(--line-lt)}
.faq summary{list-style:none;cursor:pointer;padding:26px 0;display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s3);font-family:"DM Serif Display",Georgia,serif;font-size:22px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq .sign{flex:none;width:22px;height:22px;position:relative;margin-top:6px}
.faq .sign:before,.faq .sign:after{content:"";position:absolute;background:var(--gold);left:50%;top:50%;transition:transform .25s}
.faq .sign:before{width:14px;height:1.5px;transform:translate(-50%,-50%)}
.faq .sign:after{width:1.5px;height:14px;transform:translate(-50%,-50%)}
.faq details[open] .sign:after{transform:translate(-50%,-50%) scaleY(0)}
.faq .ans{padding:0 0 28px;max-width:70ch;color:var(--ink-2);line-height:1.8}
.faq .ans p+p{margin-top:14px}
.faq .ans a{color:var(--green);border-bottom:1px solid var(--line-lt)}
.faq .ans a:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* ---------- product detail ---------- */
.pdp{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s6);align-items:start}
.pdp-vis{background:linear-gradient(160deg,#123528,#04140e 70%);aspect-ratio:1/1;display:grid;place-items:center;position:relative}
.pdp-vis .mod{width:52%}
.pdp-buy{display:flex;flex-direction:column;gap:var(--s3)}
.pdp-buy h1{font-size:clamp(34px,4.2vw,54px);line-height:1.02}
.pdp-price{font-family:"DM Serif Display",Georgia,serif;font-size:38px;line-height:1}
.pdp-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.pdp-buy .lead{color:var(--ink-2);line-height:1.75}
.qty{display:flex;align-items:center;gap:var(--s2)}
.qty label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.qty input{border:1px solid var(--line-lt);background:#fff;padding:13px 14px;font-family:inherit;font-size:15px;color:var(--ink);min-height:48px}
.qty input{width:78px;text-align:center}
.pdp-buy select{width:100%}
.rating{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.stars{color:var(--gold);letter-spacing:2px;font-size:14px}
.review{background:#fff;border:1px solid var(--line-lt);padding:var(--s4);max-width:74ch}
.review .who{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:var(--s3)}
.review p{color:var(--ink-2);line-height:1.8}
.review p+p{margin-top:12px}

/* ---------- gallery ---------- */
.gal{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s3)}
.gal .shot{background:var(--cream-2);border:1px solid var(--line-lt);aspect-ratio:3/2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;color:var(--muted);text-align:center;padding:var(--s3)}
.gal .shot svg{color:var(--line-lt)}
.gal .shot span{font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* ---------- contact ---------- */
.cform{display:flex;flex-direction:column;gap:var(--s2)}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.field input,.field textarea{border:1px solid var(--line-lt);background:#fff;padding:14px;font-family:inherit;font-size:15px;color:var(--ink);min-height:48px}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
.cdetails{display:flex;flex-direction:column;gap:var(--s4)}
.cblock h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-family:"DM Sans",sans-serif;font-weight:600;margin-bottom:10px}
.cblock p,.cblock address{font-style:normal;line-height:1.8;color:var(--ink-2)}
.cblock a{color:var(--green);border-bottom:1px solid var(--line-lt)}
.cblock a:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* ---------- ship / close ---------- */
.ship{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:center}
.close{background:var(--green-deep);color:#fff;text-align:center;padding:var(--s7) var(--pad)}
.close h2{font-size:clamp(34px,5.4vw,78px);line-height:1.02;max-width:16ch;margin:18px auto var(--s4)}

/* ---------- footer ---------- */
.foot{background:#03110c;color:rgba(255,255,255,.62);padding:var(--s5) var(--pad) var(--s4)}
.foot-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.3fr 2fr;gap:var(--s5)}
.foot .logo{color:#fff;margin-bottom:14px;display:inline-block}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.foot h4{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 16px;
  font-weight:600;font-family:"DM Sans",sans-serif}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:14px}
.foot a:hover{color:var(--gold-lt)}
.foot-base{max-width:var(--maxw);margin:var(--s5) auto 0;padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s2);font-size:12px;color:rgba(255,255,255,.4)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two,.pdp{grid-template-columns:1fr;gap:var(--s5)}
  .foot-in{grid-template-columns:1fr}
  .spec{grid-template-columns:190px 1fr;gap:var(--s3)}
}
@media (max-width:860px){
  :root{--pad:clamp(18px,5vw,40px);--s7:84px;--s6:60px}
  .navlinks{display:none}
  .burger{display:grid}
  .nav.open{background:var(--green-deep)}
  .nav.open .navlinks{display:flex;position:fixed;top:74px;left:0;width:100%;height:calc(100svh - 74px);
    background:var(--green-deep);flex-direction:column;gap:0;padding:var(--s3) var(--pad);overflow-y:auto}
  .nav.open .navlinks a{padding:19px 0;border-bottom:1px solid var(--line-dk);font-size:16px;letter-spacing:.13em}
  .hero{min-height:auto}
  .hero-in{padding:118px var(--pad) var(--s4)}
  .hero-stats{grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s4)}
  .hstat{display:flex;align-items:baseline;gap:14px}
  .hstat b{font-size:26px;margin:0}
  .phead{padding:120px var(--pad) var(--s5)}
  .pillars{grid-template-columns:1fr}
  .pillar{min-height:auto}
  .steps{grid-template-columns:1fr}
  .step{min-height:auto;padding:var(--s3)}
  .split{grid-template-columns:1fr;min-height:auto}
  .split-copy{padding:var(--s6) var(--pad)}
  .ship{grid-template-columns:1fr;gap:var(--s3)}
  .foot-cols{grid-template-columns:1fr 1fr}
  .bigstep{grid-template-columns:1fr;gap:var(--s2)}
  .bigstep .n{font-size:34px}
  .spec{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .faq summary{font-size:19px}
}
@media (max-width:520px){
  .foot-cols{grid-template-columns:1fr}
  .hero-cta .btn,.pdp-buy .btn{width:100%}
}


/* ---------- real photography ---------- */
.card-vis{background:#e6e2d8}
.card-vis img,.pdp-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pdp-vis{background:#e6e2d8;aspect-ratio:1/1;overflow:hidden;display:grid}
.pdp-shots{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s2)}
.pdp-shots img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#e6e2d8}
.figure{background:#e6e2d8;overflow:hidden}
.figure img{width:100%;height:100%;object-fit:cover;display:block}
.check-img{aspect-ratio:4/3;background:#e6e2d8;overflow:hidden;margin:-24px -24px 4px}
.check-img img{width:100%;height:100%;object-fit:cover}
.check{padding-top:0}
.check .n{margin-top:var(--s3)}
/* masonry: every photo keeps its own shape */
.imgrow{max-width:var(--maxw);margin:0 auto;columns:4 260px;column-gap:var(--s3)}
.imgrow figure{margin:0 0 var(--s4);break-inside:avoid}
.imgrow img{width:100%;background:#e6e2d8}
.imgrow figcaption{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:12px}
.badge-mib{max-width:230px;height:auto}

/* ---------- video ---------- */
.vids{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:var(--s4)}
.vid{display:flex;flex-direction:column;gap:14px}
.vid .frame{position:relative;width:100%;aspect-ratio:16/9;background:#04140e;overflow:hidden}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid h3{font-size:20px}

/* ---------- segmented choice ---------- */
.seg{display:flex;flex-direction:column;gap:9px}
.seg .lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.seg .opts{display:flex;gap:10px;flex-wrap:wrap}
.seg .opts label{flex:1 1 150px;position:relative}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg span{display:block;text-align:center;border:1px solid var(--line-lt);background:#fff;padding:15px 14px;
  font-size:13px;cursor:pointer;transition:border-color .2s,background .2s,color .2s;min-height:48px}
.seg span:hover{border-color:var(--gold)}
.seg input:checked+span{border-color:var(--green);background:var(--green);color:#fff}
.seg input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- model page hero ---------- */
.mhead{position:relative;background:var(--green-deep);color:#fff;overflow:hidden}
.mhead-bg{position:absolute;inset:0;background:url("hero.jpg") center 64%/cover no-repeat;background-image:image-set(url("hero.webp") type("image/webp"),url("hero.jpg") type("image/jpeg"));filter:saturate(.85) brightness(.62)}
.mhead-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(101deg,rgba(4,17,12,.92) 0%,rgba(4,17,12,.74) 32%,rgba(4,17,12,.34) 100%)}
.mhead-in{position:relative;z-index:2;max-width:1180px;padding:150px var(--pad) var(--s5)}
.mhead h1{font-size:clamp(34px,5vw,66px);line-height:1.03;max-width:17ch;margin:18px 0 0}
.mhead p{margin-top:20px;max-width:56ch;color:rgba(255,255,255,.78);line-height:1.75}

@media (max-width:860px){
  .pdp-vis{aspect-ratio:4/3}
  .check-img{margin:-24px -24px 4px}
  .vids{grid-template-columns:1fr}
  .mhead-in{padding-top:118px}
}


/* ---------- Free Radio Codes and Buy Now in the menu ---------- */
/* The codes are the reason a lot of people arrive, so the link is filled in
   brass rather than outlined, and it sits to the left of Buy Now. */
.navlinks .freecodes{background:#b8913c;color:#1a1305;border:1px solid #b8913c;padding:9px 16px;
  margin-left:6px;font-weight:600;transition:background .25s,border-color .25s,color .25s}
.navlinks .freecodes:hover,.navlinks .freecodes[aria-current="page"]{background:#cfa54b;border-color:#cfa54b;color:#1a1305}

.navlinks .buynow{border:1px solid rgba(255,255,255,.42);padding:9px 18px;margin-left:6px;transition:background .25s,color .25s,border-color .25s}
.navlinks .buynow:hover{background:#fff;color:var(--green);border-color:#fff}
.navlinks{gap:26px;align-items:center}
@media (max-width:1240px){.navlinks{gap:18px;font-size:12.5px}.nav-in{gap:var(--s3)}}
@media (max-width:860px){
  .navlinks .buynow{border:0;padding:19px 0;margin:0;text-align:left}
  .navlinks .buynow:hover{background:none;color:var(--gold-lt)}
  /* In the slide out menu it is a row like the others, but still brass. */
  .navlinks .freecodes{background:none;border:0;padding:19px 0;margin:0;text-align:left;color:#d8b256}
  .navlinks .freecodes:hover,.navlinks .freecodes[aria-current="page"]{background:none;color:#e6c574}
}


/* ---------- reviews grid ---------- */
.reviews{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:var(--s3);align-items:start}
.reviews .review{max-width:none;padding:var(--s3) var(--s3) var(--s4)}
.review .stars{display:block;margin-bottom:14px}
.review.lead-review{grid-column:1/-1}
.reviews .review p{font-size:15px;line-height:1.75}
.sec.dark .review,.sec.deep .review{background:rgba(255,255,255,.04);border-color:var(--line-dk)}
.sec.dark .review p,.sec.deep .review p{color:rgba(255,255,255,.8)}
.sec.dark .review .who,.sec.deep .review .who{color:rgba(255,255,255,.45)}


/* ---------- click-to-load video (no third party before consent) ---------- */
.vid .frame{background:linear-gradient(160deg,#123528,#04140e 70%);display:grid;place-items:center;cursor:pointer}
.vid .frame button{background:none;border:0;color:#fff;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:14px;padding:var(--s3);font-family:inherit;width:100%;height:100%;justify-content:center}
.vid .play{width:62px;height:62px;border:1px solid rgba(255,255,255,.5);border-radius:50%;display:grid;
  place-items:center;transition:background .25s,border-color .25s}
.vid .frame button:hover .play{background:var(--gold-lt);border-color:var(--gold-lt);color:var(--green-deep)}
.vid .play svg{margin-left:3px}
.vid .note{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);
  max-width:34ch;line-height:1.7}


/* ---------- photographic section backgrounds ---------- */
.sec.photo,.split.photo{position:relative;isolation:isolate}
.sec.photo>*{position:relative;z-index:2}
.sec.photo:before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--bg);background-size:cover;background-position:center 62%;
  filter:saturate(.8) brightness(.52)}
.sec.photo:after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(4,17,12,.86),rgba(4,17,12,.93))}
.sec.photo.deep:after{background:linear-gradient(180deg,rgba(4,17,12,.90),rgba(4,17,12,.95))}

.pillars,.steps{background:transparent}
.sec.photo .pillar,.sec.photo .step{background:rgba(6,22,16,.62);backdrop-filter:blur(2px)}
.sec.photo .step:first-child{background:rgba(13,53,39,.72)}
.sec.photo .pillars,.sec.photo .steps{background:rgba(255,255,255,.12)}

/* ---------- page header with photo ---------- */
.phead.photo{position:relative;isolation:isolate;overflow:hidden}
.phead.photo>*{position:relative;z-index:2}
.phead.photo:before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--bg);background-size:cover;background-position:center 58%;filter:saturate(.82) brightness(.55)}
.phead.photo:after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(101deg,rgba(4,17,12,.92) 0%,rgba(4,17,12,.76) 34%,rgba(4,17,12,.46) 100%)}

/* ---------- worldwide map ---------- */
.mapwrap{max-width:var(--maxw);margin:0 auto}
.mapfig{margin:0;background:var(--cream-2);border:1px solid var(--line-lt);padding:clamp(14px,3vw,32px)}
.mapfig img{width:100%;height:auto}
.mapfig figcaption{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:16px;text-align:center}

/* ---------- fitting page: step with photo, alternating ---------- */
.fitsteps{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:0}
.fitstep{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;
  padding:var(--s5) 0;border-top:1px solid var(--line-lt)}
.fitstep:first-of-type{border-top:0;padding-top:0}
.fitstep:nth-child(even) .fitstep-img{order:2}
.fitstep-img{background:var(--cream-2);overflow:hidden;width:100%;max-width:560px;justify-self:center}
.fitstep-img img{width:100%}
.fitstep-copy .n{font-family:"DM Serif Display",Georgia,serif;font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:14px}
.fitstep-copy h2{font-size:clamp(26px,3.4vw,42px);line-height:1.08;margin-bottom:18px}
.fitstep-copy p{color:var(--ink-2);line-height:1.8;max-width:56ch}
.fitstep-copy p+p{margin-top:14px}
.toolist{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.toolist li{display:flex;gap:12px;align-items:baseline;color:var(--ink-2);line-height:1.6}
.toolist li:before{content:"";width:6px;height:6px;background:var(--gold);flex:none;transform:translateY(-2px)}

@media (max-width:860px){
  .fitstep{grid-template-columns:1fr;gap:var(--s3);padding:var(--s4) 0}
  .fitstep:nth-child(even) .fitstep-img{order:0}
}


/* ---------- product page: specs left, reviews right ---------- */
.specrev{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.specrev .specs{margin:0}
.revcol{display:flex;flex-direction:column;gap:var(--s2);max-height:760px;overflow-y:auto;padding-right:6px}
.revcol .review{max-width:none;padding:var(--s3)}
.revcol .review p{font-size:14.5px;line-height:1.7}
.revcol::-webkit-scrollbar{width:5px}
.revcol::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)}
.revcol::-webkit-scrollbar-track{background:rgba(255,255,255,.05)}
@media (max-width:940px){
  .specrev{grid-template-columns:1fr;gap:var(--s5)}
  .revcol{max-height:none;overflow:visible;padding-right:0}
}

/* ---------- video facade with a real poster ---------- */
.vid .frame{background-size:cover;background-position:center}
.vid .frame:after{content:"";position:absolute;inset:0;background:rgba(4,17,12,.55);transition:background .25s;z-index:1}
.vid .frame:hover:after{background:rgba(4,17,12,.38)}
.vid .frame button{position:relative;z-index:2}
.vid .play{width:76px;height:76px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.75)}
.vid .frame:hover .play{background:var(--gold-lt);border-color:var(--gold-lt);color:var(--green-deep)}
.vid .note{color:#fff;font-weight:500}


/* ================= product gallery ================= */
.gallery{display:flex;flex-direction:column;gap:12px}
.gal-main{position:relative;background:#e6e2d8;overflow:hidden;aspect-ratio:1/1;touch-action:pan-y}
.gal-track{display:flex;height:100%;transition:transform .38s cubic-bezier(.4,0,.2,1);will-change:transform}
.gal-slide{flex:0 0 100%;height:100%;position:relative}
.gal-slide img{width:100%;height:100%;object-fit:contain;cursor:zoom-in;display:block}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;cursor:pointer;
  background:rgba(4,17,12,.55);color:#fff;display:grid;place-items:center;z-index:3;transition:background .2s}
.gal-nav:hover{background:var(--gold)}
.gal-nav[hidden]{display:none}
.gal-prev{left:10px}.gal-next{right:10px}
.gal-count{position:absolute;right:12px;bottom:12px;z-index:3;background:rgba(4,17,12,.6);color:#fff;
  font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.1em;padding:6px 10px}
.gal-thumbs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.gal-thumbs::-webkit-scrollbar{display:none}
.gal-thumbs button{flex:0 0 84px;height:64px;border:1px solid var(--line-lt);background:#e6e2d8;padding:0;
  cursor:pointer;overflow:hidden;transition:border-color .2s}
.gal-thumbs button[aria-current="true"]{border-color:var(--green);border-width:2px}
.gal-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.gal-hint{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ================= lightbox ================= */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:200;background:rgba(3,12,8,.94);display:flex;align-items:center;
  justify-content:center;padding:clamp(12px,4vw,48px)}
.lb-track.no-anim{transition:none}
.gal-track.no-anim{transition:none}
.lb-viewport{position:relative;width:100%;height:100%;overflow:hidden;touch-action:pan-y}
.lb-track{display:flex;width:100%;height:100%;align-items:center;transition:transform .38s cubic-bezier(.4,0,.2,1);will-change:transform}
.lb-slide{flex:0 0 100%;height:100%;display:grid;place-items:center;padding:0 8px}
.lb-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb-btn{position:absolute;width:50px;height:50px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s;z-index:2}
.lb-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--green-deep)}
.lb-close{top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px)}
.lb-prev{left:clamp(8px,2vw,24px);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(8px,2vw,24px);top:50%;transform:translateY(-50%)}
.lb-cap{position:absolute;left:0;right:0;bottom:clamp(10px,3vw,26px);text-align:center;color:rgba(255,255,255,.75);
  font-size:12px;letter-spacing:.1em;padding:0 60px}
body.lb-open{overflow:hidden}
@media (max-width:600px){.lb-prev,.lb-next{display:none}}

/* ---------- basket ---------- */
.cartdot[data-n="0"]{display:none}
button.btn{font-family:inherit;cursor:pointer}
.btn:disabled{background:var(--cream-2);border-color:var(--line-lt);color:var(--muted);cursor:not-allowed}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,160%);background:var(--green);color:#fff;display:flex;gap:var(--s3);align-items:center;
  padding:14px 20px;font-size:14px;z-index:90;transition:transform .35s cubic-bezier(.4,0,.2,1);max-width:calc(100vw - 32px);box-shadow:0 12px 32px rgba(0,0,0,.2)}
.toast.on{transform:translate(-50%,0)}
.toast a{color:var(--gold-lt);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid currentColor}
.bk{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.4fr .9fr;gap:var(--s5);align-items:start}
.bk-row{display:grid;grid-template-columns:96px 1fr auto;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--line-lt)}
.bk-row:first-child{border-top:1px solid var(--line-lt)}
.bk-row img{width:96px;height:96px;object-fit:cover;background:#e6e2d8;display:block}
.bk-name{font-family:"DM Serif Display",Georgia,serif;font-size:23px;color:var(--ink)}
.bk-var{font-size:13px;color:var(--muted);margin-top:3px}
.bk-ctl{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s2)}
.qstep{display:inline-flex;border:1px solid var(--line-lt);background:#fff}
.qstep button{width:40px;height:40px;border:0;background:none;font-size:18px;cursor:pointer;color:var(--ink);font-family:inherit}
.qstep button:disabled{color:var(--line-lt);cursor:not-allowed}
.qstep span{min-width:34px;display:grid;place-items:center;font-size:15px}
.bk-rm{background:none;border:0;padding:0 0 2px;font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);cursor:pointer;border-bottom:1px solid var(--line-lt)}
.bk-line{font-family:"DM Serif Display",Georgia,serif;font-size:23px;text-align:right}
.bk-sum{background:#fff;border:1px solid var(--line-lt);padding:var(--s4);position:sticky;top:110px;display:flex;flex-direction:column;gap:var(--s3)}
.bk-sum[hidden]{display:none}
.bk-sum h2{font-size:30px;margin:0}
.bk-sum dl{margin:0;display:flex;flex-direction:column;gap:12px}
.bk-sum dl div{display:flex;justify-content:space-between;gap:var(--s2);font-size:15px;color:var(--ink-2)}
.bk-sum dd{margin:0;text-align:right}
.bk-sum .bk-total{border-top:1px solid var(--line-lt);padding-top:14px;color:var(--ink);align-items:baseline}
.bk-total dd{font-family:"DM Serif Display",Georgia,serif;font-size:30px}
.bk-sum .btn{width:100%}
.bk-note{font-size:13px;color:var(--muted);line-height:1.6;margin:0}
.bk-note a{color:var(--green);border-bottom:1px solid var(--line-lt)}
.bk-empty{padding:var(--s3) 0}
@media (max-width:900px){.bk{grid-template-columns:1fr;gap:var(--s4)}.bk-sum{position:static}}
@media (max-width:560px){.bk-row{grid-template-columns:72px 1fr;align-items:start}.bk-row img{width:72px;height:72px}
  .bk-line{grid-column:2;text-align:left;font-size:19px}.bk-sum{padding:var(--s3)}}

/* ---------- forms ---------- */
.field[hidden]{display:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:14px;line-height:1.6;margin:0;min-height:1.6em}
.form-status.ok{color:var(--ok)}
.form-status.err{color:#9b2c1f}
.notify{display:flex;flex-direction:column;gap:12px}
.notify-row{display:flex;gap:10px;flex-wrap:wrap}
.notify-row input{flex:1 1 220px;border:1px solid var(--line-lt);background:#fff;padding:13px 14px;font-family:inherit;font-size:15px;color:var(--ink);min-height:48px}

/* ---------- account ---------- */
.acct{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s3)}
.acct-form{max-width:460px}
.acct-note{font-size:15px;line-height:1.7;color:var(--ink-2);margin:0}
.acct-note.ok{background:#e6f0ea;border-left:3px solid var(--ok);padding:12px 16px}
.acct-note.err{background:#f6e3df;border-left:3px solid #9b2c1f;padding:12px 16px}
.acct-note a{color:var(--green);border-bottom:1px solid var(--line-lt)}
.acct-order{background:#fff;border:1px solid var(--line-lt);padding:var(--s3) var(--s4)}
.acct-order header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2);margin-bottom:var(--s2)}
.acct-order h2{font-size:26px;margin:0}
.acct-order header span{font-size:13px;color:var(--muted)}
.acct-order ul{list-style:none;margin:0 0 var(--s2);padding:0;border-top:1px solid var(--line-lt)}
.acct-order li{display:flex;justify-content:space-between;gap:var(--s2);padding:10px 0;border-bottom:1px solid var(--line-lt);font-size:15px;color:var(--ink-2)}
.acct-order li.tot{color:var(--ink);font-weight:600}
.acct-addr{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0}
.acct-track{margin:var(--s2) 0 0;font-size:15px}
.acct-track a{color:var(--green);border-bottom:1px solid var(--gold)}
.acct-out{margin-top:var(--s2)}
.pill{display:inline-block;font-size:11px;letter-spacing:.08em;padding:4px 10px;border-radius:999px;background:var(--cream-2);color:var(--ink-2);white-space:nowrap}
.pill.s-paid{background:#f6e7c8;color:#6b4d12}
.pill.s-shipped{background:#dde9f3;color:#1f4a6b}
.pill.s-delivered{background:#e1efe6;color:var(--ok)}

/* PayPal button: PayPal's own gold and blues */
.btn.bk-pp{gap:0;background:#ffc439;border-color:#ffc439;color:#003087;font-size:19px;letter-spacing:0;text-transform:none;font-weight:700;font-style:italic;padding:11px 30px;font-family:Helvetica,Arial,sans-serif}
.btn.bk-pp:hover{background:#f2ba36;border-color:#f2ba36}
.btn.bk-pp .pp2{color:#009cde}
.btn.bk-pp[hidden]{display:none}
.btn.bk-pp:disabled{background:#ffe29a;border-color:#ffe29a;color:#6b7a99;font-size:13px;font-style:normal}
.bk-alert{max-width:1200px;margin:0 auto var(--s4);background:#f6e3df;border-left:3px solid #9b2c1f;padding:18px 22px;display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.6;color:var(--ink)}
.bk-alert[hidden]{display:none}
.bk-alert strong{font-weight:600}

/* ---------- the JagBT logo ---------- */
.logo img{display:block;height:30px;width:auto}
.foot .logo img{height:34px}
@media (max-width:560px){.logo img{height:26px}}

/* ---------- dropdowns ----------
   Browsers draw their own dropdowns and Safari ignores height and padding on
   them, which is what made them look cramped. Every dropdown on the site now
   drops the native look and matches the text fields beside it. */
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;width:100%;height:50px;min-height:50px;
  padding:0 46px 0 14px;border:1px solid var(--line-lt);border-radius:0;font-family:inherit;font-size:15px;line-height:1.2;color:var(--ink);cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2308271d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 17px center/12px 8px}
select::-ms-expand{display:none}
select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.field select,.qty input,.pdp-buy select{height:50px;min-height:50px}

/* buttons inside article text keep button colours, not link colours */
.prose a.btn{color:#fff;border-bottom:1px solid var(--green)}
.prose a.btn:hover{color:#fff;border-bottom-color:var(--green-mid)}

/* ---------- speaker setup: Alpine and standard side by side ---------- */
.cmp{max-width:1200px;margin:0 auto}
.cmp-head,.cmp-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,2vw,28px);align-items:start}
.cmp-head{position:sticky;top:74px;z-index:5;background:var(--cream);padding:18px 0 14px;border-bottom:1px solid var(--line-lt)}
.cmp-col-h{display:flex;flex-direction:column;gap:6px}
.cmp-col-h span{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(20px,2vw,26px);color:var(--ink)}
.cmp-col-h a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--gold);border-bottom:1px solid var(--line-lt);align-self:flex-start;padding-bottom:3px}
.cmp-row{padding:clamp(28px,3.5vw,48px) 0;border-bottom:1px solid var(--line-lt)}
.cmp-q .n{width:30px;height:30px;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-size:12px;font-weight:600;border-radius:50%;margin-bottom:14px}
.cmp-q h2{font-size:clamp(22px,2.2vw,30px);line-height:1.15;margin:0 0 10px}
.cmp-q p{font-size:15px;line-height:1.65;color:var(--ink-2);margin:0}
.cmp-card{margin:0;background:#fff;border:1px solid var(--line-lt);display:flex;flex-direction:column}
.cmp-card img{display:block;width:100%;height:auto}
.cmp-card figcaption{padding:14px 16px;font-size:14px;line-height:1.5;color:var(--ink);border-top:1px solid var(--line-lt)}
.cmp-alp{border-top:2px solid var(--gold)}
.cmp-std{border-top:2px solid var(--green)}
.cmp-head .cmp-alp,.cmp-head .cmp-std{border:0}
.cmp-tag{display:none;padding:10px 14px 0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold)}
.cmp-std .cmp-tag{color:var(--green)}
.cmp-none{aspect-ratio:var(--ar,1/1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:repeating-linear-gradient(135deg,var(--cream) 0 12px,#ece8de 12px 24px);color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.cmp-none svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:1.2}
.cmp-foot{max-width:1200px;margin:var(--s5) auto 0;display:flex;gap:var(--s2);flex-wrap:wrap}
.cmp-foot .btn{width:auto}
@media (max-width:760px){
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .cmp-q{grid-column:1/-1;margin-bottom:6px}
  .cmp-tag{display:block}
  .cmp-card figcaption{font-size:13px;padding:10px 12px}
}

/* compatibility: two links per car */
.car-links{flex-direction:column;align-items:flex-start;gap:12px}
.car-links .stock{margin-bottom:4px}

/* how it works: three lines, both products */
.lines3{max-width:var(--maxw);margin:0 auto;overflow-x:auto}
.lines3 table{width:100%;border-collapse:collapse;min-width:640px}
.lines3 th,.lines3 td{text-align:left;vertical-align:top;padding:18px 20px;border-bottom:1px solid var(--line-dk);font-size:15px;line-height:1.65;color:rgba(255,255,255,.82)}
.lines3 thead th{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(20px,2vw,26px);color:#fff;border-bottom:1px solid var(--gold)}
.lines3 tbody th{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--gold-lt);width:18%}

/* ---------- JagBT Vision installation guide ---------- */
.vg-head-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:var(--s3)}
.vg-head-actions .btn{width:auto}
.vg-pdf{background:var(--gold);border-color:var(--gold);color:var(--green-deep)}
.vg-pdf:hover{background:#fff;border-color:#fff;color:var(--green)}
.vg-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:clamp(28px,4vw,64px);align-items:start}
.vg-tools{position:sticky;top:104px;background:#fff;border:1px solid var(--line-lt);border-top:2px solid var(--gold);padding:var(--s3)}
.vg-tools ul{list-style:none;margin:14px 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.vg-tools li{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line-lt)}
.vg-tools b{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:26px;color:var(--green);min-width:64px}
.vg-tools span{font-size:14px;color:var(--ink-2)}
.vg-tools p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}
.vg-steps{list-style:none;margin:0;padding:0;counter-reset:vg}
.vg-step{counter-increment:vg;position:relative;padding:0 0 clamp(36px,4vw,56px) 64px;margin-bottom:clamp(36px,4vw,56px);border-bottom:1px solid var(--line-lt)}
.vg-step:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.vg-step::before{content:counter(vg);position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;background:var(--green);color:var(--gold-lt);
  display:grid;place-items:center;font-family:"DM Serif Display",Georgia,serif;font-size:20px}
.vg-text h2{font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin:4px 0 14px}
.vg-text ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.vg-text li,.vg-text p{font-size:16px;line-height:1.7;color:var(--ink-2)}
.vg-text p{margin:0 0 10px}
.vg-note{margin-top:16px!important;padding:12px 16px;background:var(--warn-bg);border-left:3px solid var(--gold);font-size:14.5px!important;color:var(--ink)!important}
.vg-note a{color:var(--green);border-bottom:1px solid var(--line-lt)}
.vg-done{margin-top:14px!important;font-family:"DM Serif Display",Georgia,serif;font-size:21px!important;line-height:1.35!important;color:var(--green)!important}
.vg-pics{display:grid;grid-template-columns:minmax(0,300px);gap:12px;margin-top:20px}
/* 3-up rows: each figure grows by its aspect ratio, so every photo in the row
   is the same height and none is cropped */
.vg-pics-3{display:flex;align-items:flex-start}
.vg-pics-3 figure{flex:var(--ar,1) 1 0;min-width:0}
.vg-pics figure,.vg-car figure{margin:0;border:1px solid var(--line-lt)}
.vg-pics img,.vg-car img{display:block;width:100%;height:auto}
.vg-wiring{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:22px}
.vg-car{background:#fff;border:1px solid var(--line-lt);padding:var(--s3);display:flex;flex-direction:column;gap:16px}
.vg-car h3{font-size:24px;margin:0}
.vg-car table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.vg-car th{text-align:left;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted);padding:0 0 8px;border-bottom:1px solid var(--line-lt)}
.vg-car td{padding:10px 8px 10px 0;border-bottom:1px solid var(--line-lt);vertical-align:top;color:var(--ink)}
.vg-car td:first-child{color:var(--ink-2);width:42%}
.wire{display:inline-block;width:34px;height:10px;border-radius:5px;margin-right:9px;vertical-align:middle;background:var(--w1);box-shadow:inset 0 -2px 3px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.15)}
.wire-stripe{background:repeating-linear-gradient(115deg,var(--w1) 0 6px,var(--w2) 6px 9px)}
.vg-print-logo,.vg-print-foot{display:none}
@media (max-width:900px){
  .vg-in{grid-template-columns:minmax(0,1fr)}
  .vg-tools{position:static}
  .vg-wiring{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .vg-step{padding-left:0;padding-top:56px}
  .vg-pics-3{flex-direction:column}
  .vg-pics-3 figure{flex:none;width:100%}
}
/* ---------- how to fit: two products, two places in the car ---------- */
.hf-hero{background-color:var(--green-deep);padding-bottom:var(--s6);
  background-image:linear-gradient(rgba(195,167,110,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(195,167,110,.055) 1px,transparent 1px);
  background-size:40px 40px;background-position:center top}
.hf-hero .phead-in{text-align:center}
.hf-hero h1,.hf-hero .phead-in p{margin-left:auto;margin-right:auto}
.hf-plan{max-width:920px;margin:var(--s5) auto 0;color:var(--gold-lt);--hf-fill:var(--green-deep);--hf-glass:rgba(195,167,110,.09)}
.hf-car{display:block;width:100%;height:auto;overflow:visible}
.hf-axis{fill:none;stroke:var(--gold-lt);stroke-width:1;stroke-dasharray:6 10;opacity:.28}
.hf-reveal{animation:hfscan 1.5s cubic-bezier(.5,0,.2,1) .15s both}
.hf-scan{stroke:var(--gold-lt);stroke-width:2;opacity:0;animation:hfline 1.5s cubic-bezier(.5,0,.2,1) .15s both}
.hf-edge,.hf-lbl{font-family:"DM Sans",sans-serif;font-size:13px;letter-spacing:.24em;text-transform:uppercase;fill:var(--gold-lt);text-anchor:middle}
.hf-edge{opacity:.55}
.hf-lead{fill:none;stroke:var(--gold-lt);stroke-width:1.5;stroke-dasharray:1;animation:hfdraw .9s ease 1.5s both}
.hf-lead-2{animation-delay:1.7s}
.hf-pin{cursor:pointer;outline:none;transform-box:fill-box;transform-origin:center;animation:hfpop .5s cubic-bezier(.3,1.5,.6,1) 1.3s both}
.hf-pin-2{animation-delay:1.5s}
.hf-dot{fill:var(--gold-lt);stroke:var(--green-deep);stroke-width:3;transition:fill .2s}
.hf-ping{fill:none;stroke:var(--gold-lt);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:hfping 2.6s ease-out 2.2s infinite}
.hf-pin-t{font-family:"DM Sans",sans-serif;font-weight:600;font-size:14px;fill:var(--green-deep);text-anchor:middle}
.hf-cam{fill:var(--green-deep)}
.hf-lens{fill:var(--gold-lt)}
.hf-pin:hover .hf-dot,.hf-pin:focus-visible .hf-dot{fill:#fff}
.hf-pin:hover .hf-lens,.hf-pin:focus-visible .hf-lens{fill:#fff}
.hf-pin:focus-visible .hf-dot{stroke:var(--gold-lt);stroke-width:4}
@keyframes hfscan{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hfline{0%{transform:translateX(30px);opacity:0}8%,88%{opacity:1}100%{transform:translateX(970px);opacity:0}}
@keyframes hfdraw{from{stroke-dashoffset:1}}
@keyframes hfpop{from{opacity:0;transform:scale(.3)}}
@keyframes hfping{0%{transform:scale(1);opacity:.8}75%,100%{transform:scale(2.5);opacity:0}}

.hf-cards{display:grid;grid-template-columns:1fr 1fr;text-align:left}
.hf-card{position:relative;margin:0 12px;background:var(--cream);color:var(--ink);border-top:2px solid var(--gold);
  display:grid;grid-template-columns:112px minmax(0,1fr);gap:22px;padding:24px;align-items:start}
.hf-card:before{content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--gold-lt)}
.hf-card img{width:112px;height:112px;object-fit:cover;background:var(--cream-2)}
.hf-card h2{font-size:clamp(28px,2.6vw,34px);line-height:1.05;margin:8px 0 10px}
.hf-card p{font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.hf-facts{list-style:none;margin:16px 0 18px;padding:14px 0 0;display:flex;gap:26px;border-top:1px solid var(--line-lt)}
.hf-facts li{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hf-facts b{display:block;font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:28px;letter-spacing:0;text-transform:none;color:var(--green);line-height:1.1}

.hf-switch{position:sticky;top:74px;z-index:40;padding:12px var(--pad);background:rgba(242,239,231,.93);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-lt);transition:background .45s,border-color .45s}
.hf-switch-in{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;max-width:540px;margin:0 auto;border:1px solid var(--green);transition:border-color .45s}
.hf-switch-in:before{content:"";position:absolute;top:0;bottom:0;left:0;width:50%;z-index:-1;background:var(--green);transition:transform .45s cubic-bezier(.6,0,.2,1),background .45s}
.hf-switch a{display:flex;align-items:baseline;justify-content:center;gap:10px;padding:13px 12px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--green);transition:color .35s;white-space:nowrap}
.hf-switch small{font-size:10px;letter-spacing:.14em;font-weight:500;color:var(--muted);transition:color .35s}
.hf-switch a[aria-current]{color:#fff}
.hf-switch a[aria-current] small{color:var(--gold-lt)}
.hf-switch[data-on="vision"]{background:rgba(4,25,18,.93);border-bottom-color:var(--line-dk)}
.hf-switch[data-on="vision"] .hf-switch-in{border-color:var(--gold-lt)}
.hf-switch[data-on="vision"] .hf-switch-in:before{transform:translateX(100%);background:var(--gold-lt)}
.hf-switch[data-on="vision"] a{color:#fff}
.hf-switch[data-on="vision"] small{color:rgba(255,255,255,.5)}
.hf-switch[data-on="vision"] a[aria-current],.hf-switch[data-on="vision"] a[aria-current] small{color:var(--green-deep)}
.hf-sec{scroll-margin-top:136px}

.sec-head.hf-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s5);align-items:center}
.hf-mini{width:100%;max-width:400px;justify-self:end;overflow:visible;color:var(--green);--hf-fill:var(--cream);--hf-glass:rgba(8,39,29,.06)}
.hf-mini .hf-dot{fill:var(--gold);stroke:var(--cream)}
.hf-mini .hf-ping{stroke:var(--gold);animation-delay:.4s}
.hf-mini .hf-pin-t{font-size:18px;fill:#fff}
.hf-vis .hf-mini{color:var(--gold-lt);--hf-fill:var(--green);--hf-glass:rgba(195,167,110,.09)}
.hf-vis .hf-mini .hf-dot{fill:var(--gold-lt);stroke:var(--green)}
.hf-vis .hf-mini .hf-ping{stroke:var(--gold-lt)}
.fitstep-copy h3{font-size:clamp(26px,3.4vw,42px);line-height:1.08;margin-bottom:18px}

.hf-tools{max-width:var(--maxw);margin:0 auto var(--s5);padding-bottom:var(--s5);border-bottom:1px solid var(--line-lt);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.hf-tools-fig{margin:0;background:radial-gradient(closest-side at 50% 50%,#fff,rgba(255,255,255,0))}
.hf-tools-fig img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 58%}
.hf-tools-fig figcaption{position:relative;height:46px}
.hf-tools-fig figcaption span{position:absolute;left:var(--x);top:0;transform:translateX(-50%);padding-top:18px;white-space:nowrap;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--green)}
.hf-tools-fig figcaption span:before{content:"";position:absolute;left:50%;top:0;width:1px;height:12px;background:var(--gold)}

.hf-film{max-width:var(--maxw);margin:var(--s5) auto 0;padding-top:var(--s5);border-top:1px solid var(--line-lt);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,5vw,72px);align-items:center}
.hf-film h3{font-size:clamp(26px,3vw,38px);line-height:1.1;margin:16px 0 14px}
.hf-film p{color:var(--ink-2);line-height:1.8;max-width:46ch}
.hf-vis .hf-film{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);border-top-color:var(--line-dk)}
.hf-vis .hf-film p{color:rgba(255,255,255,.72)}

.hf-v{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.hf-chips{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line-dk)}
.hf-chips li{padding:18px 16px;border-left:1px solid var(--line-dk);display:flex;flex-direction:column;gap:6px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hf-chips li:first-child{border-left:0}
.hf-chips b{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:30px;letter-spacing:0;text-transform:none;color:var(--gold-lt);line-height:1}
.hf-v-side figure{margin:20px 0 0;border:1px solid var(--line-dk)}
.hf-v-side img{width:100%;height:auto}
.hf-inbox{margin-top:14px!important;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.6)}
.hf-v-steps{list-style:none;margin:0;padding:0;counter-reset:hv;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:clamp(20px,3vw,44px)}
.hf-v-steps li{counter-increment:hv;position:relative;padding:20px 0 20px 54px;border-top:1px solid var(--line-dk)}
.hf-v-steps li:before{content:counter(hv);position:absolute;left:0;top:20px;width:36px;height:36px;border:1px solid var(--gold-lt);border-radius:50%;
  display:grid;place-items:center;font-family:"DM Serif Display",Georgia,serif;font-size:17px;color:var(--gold-lt)}
.hf-v-steps h3{font-size:21px;line-height:1.2;margin:0 0 6px;color:#fff}
.hf-v-steps p{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.7)}

.hf-wires{max-width:var(--maxw);margin:var(--s5) auto 0;padding-top:var(--s4);border-top:1px solid var(--line-dk);
  display:grid;grid-template-columns:minmax(0,.8fr) repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,44px);align-items:start}
.hf-wires h3{font-size:clamp(24px,2.4vw,30px);margin:0 0 12px}
.hf-wires p{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.72)}
.hf-wires p a{color:var(--gold-lt);border-bottom:1px solid rgba(195,167,110,.4)}
.hf-wire{background:rgba(255,255,255,.035);border:1px solid var(--line-dk);padding:var(--s3)}
.hf-wire h4{font-size:22px;margin:0 0 10px}
.hf-wire table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.hf-wire td{padding:10px 8px 10px 0;border-top:1px solid var(--line-dk);vertical-align:top;color:#fff}
.hf-wire td:first-child{color:rgba(255,255,255,.55);width:40%}
.hf-wire .wire{box-shadow:inset 0 -2px 3px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.35)}

.hf-guide{max-width:var(--maxw);margin:var(--s5) auto 0;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) var(--s4);border:1px solid rgba(195,167,110,.45);background:rgba(195,167,110,.06)}
.hf-guide p{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(20px,2vw,25px);line-height:1.3;color:#fff;max-width:34ch}
.hf-guide-btns{display:flex;gap:14px;flex-wrap:wrap}
.hf-guide .btn,.hf-film .btn{width:auto}

@media (max-width:960px){
  .hf-v{grid-template-columns:minmax(0,1fr)}
  .hf-wires{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf-wires>div:first-child{grid-column:1/-1}
}
@media (max-width:860px){
  .sec-head.hf-head,.hf-tools,.hf-film,.hf-vis .hf-film{grid-template-columns:minmax(0,1fr)}
  .hf-mini{justify-self:start;max-width:300px}
  .hf-vis .hf-film .vid{order:2}
}
@media (max-width:760px){
  .hf-lbl,.hf-lead,.hf-edge{display:none}
  .hf-car{margin-bottom:-8%}
  .hf-cards{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:var(--s3)}
  .hf-card{margin:0}
  .hf-card:before{display:none}
  .hf-v-steps{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .hf-wires{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .hf-card{grid-template-columns:72px minmax(0,1fr);gap:16px;padding:18px}
  .hf-card img{width:72px;height:72px}
  .hf-facts{gap:18px}
  .hf-switch{padding:10px 16px}
  .hf-switch small{display:none}
  .hf-chips b{font-size:24px}
  .hf-chips li{padding:14px 12px}
  .hf-guide{padding:var(--s3)}
}
/* the PDF is printed from this page */
@media print{
  @page{size:A4;margin:14mm 13mm}
  .nav,.foot,.skip,.vg-head-actions,.vg-video,.toast,.crumb{display:none!important}
  body{background:#fff}
  .rv{opacity:1!important;transform:none!important}
  .vg-print-logo{display:block;height:13mm;width:auto;margin:0 0 6mm}
  .phead.vg-head{background:#fff!important;color:var(--ink);padding:0 0 6mm;border-bottom:1.5pt solid var(--green);margin-bottom:6mm}
  .vg-head h1{color:var(--green);font-size:30pt}
  .vg-head p{color:#333;font-size:11pt}
  .vg-head .eyebrow{color:#8a6f3e}
  .sec.vg{padding:0}
  .vg-in{display:block}
  .vg-tools{position:static;margin-bottom:6mm;box-shadow:none}
  .vg-tools ul{flex-direction:row;gap:8mm}
  .vg-tools li{border:0}
  .vg-step{break-inside:avoid;padding:0 0 6mm 13mm;margin-bottom:6mm}
  .vg-step-wide{break-inside:auto}
  .vg-step::before{width:9mm;height:9mm;font-size:13pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .vg-text h2{font-size:16pt}
  .vg-text li,.vg-text p{font-size:10.5pt}
  .vg-pics{margin-top:4mm}
  .vg-pics figure{width:fit-content}
  .vg-pics img{height:62mm;width:auto}
  .vg-pics-3{display:flex;flex-direction:row}
  .vg-pics-3 figure{flex:var(--ar,1) 1 0;width:auto}
  .vg-pics-3 img{height:auto;width:100%}
  .vg-wiring{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vg-car{break-inside:avoid}
  .vg-car figure{width:fit-content}
  .vg-car img{height:42mm;width:auto}
  .vg-step-wide .vg-text{break-inside:avoid;break-after:avoid}
  .vg-wiring{align-items:start}
  .vg-print-foot{display:block;margin:8mm 0 0;padding-top:5mm;border-top:1.5pt solid var(--green);font-size:10pt;line-height:1.6;color:#333}
  .vg-print-foot b{color:var(--green);font-weight:600}
  .vg-note,.wire,.vg-tools,.vg-car{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* delivery choices in the basket */
.bk-ship{border:0;padding:0;margin:0 0 var(--s2)}
.bk-ship legend{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:0 0 8px}
.bk-shipopt{display:flex;align-items:center;gap:12px;border:1px solid var(--line-lt);background:#fff;padding:11px 14px;margin-bottom:8px;cursor:pointer}
.bk-shipopt:has(input:checked){border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.bk-shipopt input{width:18px;height:18px;flex:none;margin:0}
.bk-shipopt b{display:block;font-weight:500;font-size:14px}
.bk-shipopt small{color:var(--muted);font-size:12px}
.bk-shipp{margin-left:auto;font-weight:600;font-size:14px;white-space:nowrap}
.price s{color:var(--muted);font-weight:400;font-size:.8em;margin-left:4px}

/* A phone draws the hero about 900px wide, so it gets a file that size. */
@media (max-width:760px){
  .hero-bg,.mhead-bg{background-image:image-set(url("hero-900.webp") type("image/webp"),url("hero.jpg") type("image/jpeg"))}
  /* The photo sits on the :before layer; a phone takes the small copy when
     the page offers one, and --bg otherwise. */
  .sec.photo:before,.phead.photo:before{background-image:var(--bg-sm,var(--bg))}
  .split-img{background-image:image-set(url("hero-900.webp") type("image/webp"),url("hero.jpg") type("image/jpeg"))}
}

/* Each photo is offered as WebP first with the JPEG behind it. The wrapper
   takes no part in the layout, so every rule still applies to the img itself. */
picture{display:contents}

/* ---------- radio codes ---------- */
/* One job on this page: type five digits, read four back. The entry is the
   only thing on screen at first, and everything else sits underneath it. */
.rc-sec{padding-top:var(--s4);padding-bottom:var(--s5)}
/* The entry and the how to find it sit beside each other: one screen, no
   scrolling to reach the part that tells you what to type. They fall into one
   column only when there is genuinely no room for two. */
.rc-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);
  gap:var(--s4) var(--s5);align-items:start}

.rc-panel{margin:0;text-align:center;position:sticky;top:96px}
.rc-lab{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px}
/* The entry borrows the look of the readout on the stereo itself. */
.rc-entry{background:#d7ddd0;border:1px solid #9aa596;box-shadow:inset 0 2px 8px rgba(8,39,29,.18)}
.rc-entry input{width:100%;box-sizing:border-box;border:0;background:none;padding:22px 12px;
  font-family:"DM Serif Display",Georgia,serif;font-size:clamp(40px,11vw,58px);line-height:1;
  text-align:center;letter-spacing:.2em;text-indent:.2em;color:#12281d}
.rc-entry input::placeholder{color:rgba(18,40,29,.24)}
.rc-entry input:focus{outline:2px solid var(--gold);outline-offset:3px}
.rc-help{font-size:13px;color:var(--muted);margin:10px 0 var(--s3)}
.rc-go{width:100%}
.rc-out{margin-top:var(--s3);font-size:15px;line-height:1.6}
.rc-out.busy{color:var(--muted)}
.rc-out.bad{color:#a4442c}
.rc-out.good{display:flex;flex-direction:column;align-items:center;gap:2px;
  border:1px solid var(--gold);background:#fff;padding:var(--s3)}
.rc-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rc-code{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(46px,13vw,64px);line-height:1.05;
  letter-spacing:.16em;text-indent:.16em;color:var(--ink)}
.rc-serial{font-size:12px;color:var(--muted)}

.rc-find{min-width:0}
.rc-find-h{font-size:clamp(20px,3vw,26px);margin:0 0 var(--s3)}
.rc-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  grid-template-rows:auto auto;gap:var(--s3) var(--s4)}
/* Each figure spans both rows and borrows them, so the photographs fill their
   whole column and the captions still begin on the same line. */
.rc-step{margin:0;display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:0}
/* The photographs sit on the page, not in boxes. The cut out one has no
   background of its own, so nothing is drawn behind it. */
/* Both pictures get a box of the same shape and size, and sit inside it whole.
   Neither is cropped and neither is stretched, so the two line up top and
   bottom however differently they were photographed. */
.rc-shot{display:flex;align-items:center;justify-content:center;aspect-ratio:19/10}
.rc-shot img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.rc-shot-cut img{filter:drop-shadow(0 10px 22px rgba(8,39,29,.18))}
.rc-num{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  margin:10px 0 6px}
.rc-step figcaption p{font-size:15px;line-height:1.7;color:var(--ink-2);margin:0}
.rc-note{font-size:14px;line-height:1.7;color:var(--muted);margin:var(--s3) 0 0;max-width:70ch}
/* The honeypot: off screen for people, irresistible to a bot. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:860px){
  .rc-in{grid-template-columns:1fr;gap:var(--s4)}
  .rc-panel{position:static;max-width:460px;margin:0 auto}
}

/* The address is printed in two halves with the @ put in by the stylesheet, so
   what a page-scraping robot reads is "infojagbt.com" and never an address. */
.eml-at:before{content:"@"}
.eml{white-space:nowrap}