/* HALL825 / Duck More Quack Less™ — look carried over from hall4x4.com/h825. Mobile first. */
@font-face{font-family:Oswald;font-style:normal;font-weight:500 700;font-display:swap;src:url(/fonts/oswald-latin.woff2) format("woff2")}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:107.4%;ascent-override:90.2%;descent-override:22.5%;line-gap-override:0%}
@font-face{font-family:"Oswald Fallback";src:local("Arial Narrow"),local("Liberation Sans Narrow"),local("Arial");size-adjust:82%;ascent-override:140%;descent-override:34%;line-gap-override:0%}
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin.woff2) format("woff2")}
:root{
  --navy:#14248a;--navy-d:#0b1552;--blue:#1d3fd6;--orange:#f0600a;--orange-d:#c94d04;--orange-dd:#a63f03;--orange-t:#bf4904;--yellow:#ffcf1f;
  --cream:#fffaf1;--paper:#fff;--ink:#141a33;--muted:#5a6078;--line:#e7e2d6;
  --r:18px;--s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.5rem;--s5:4rem;--s6:6rem;
  --wrap:1180px;--ease:cubic-bezier(.2,.8,.2,1);--hh:64px;
  /* shiny enamel tokens (from the hero H1, h825 A0 v2) */
  --shine-navy:linear-gradient(180deg,#4b5dcc 0%,#4a5ccb 5%,#495bc9 10%,#4859c7 15%,#4858c6 20%,#4354c0 25%,#3b4cb6 30%,#3343ab 35%,#2d3ca3 40%,#2a399f 45%,#25359b 50%,#1c2c92 55%,#15258b 60%,#142489 65%,#132284 70%,#12207b 75%,#101d70 80%,#0e1a65 85%,#0d185c 90%,#0b1655 95%,#0b1552 100%);
  --shine-orange:linear-gradient(180deg,#ea5b08 0%,#ea5b08 5%,#e95a08 10%,#e75a08 15%,#e65908 20%,#e65908 25%,#e55908 30%,#e25807 35%,#e05607 40%,#dd5506 45%,#dc5506 50%,#da5406 55%,#d85406 60%,#d65306 65%,#d45206 70%,#d05006 75%,#ca4e05 80%,#c44b05 85%,#be4904 90%,#ba4704 95%,#b84604 100%);
  --shine-white:linear-gradient(180deg,#ffffff 0%,#ffffff 5%,#fefeff 10%,#fdfeff 15%,#fcfdff 20%,#fbfcff 25%,#fbfcff 30%,#f9faff 35%,#f4f6ff 40%,#edf0ff 45%,#e8ecff 50%,#e6eaff 55%,#e5e9ff 60%,#e2e6fe 65%,#dde2fc 70%,#d7ddfb 75%,#d2d8f9 80%,#ccd3f8 85%,#c7cff6 90%,#c4ccf5 95%,#c3cbf5 100%);
  --shine-yellow:linear-gradient(180deg,#ffe680 0%,#ffe57c 5%,#ffe373 10%,#ffe166 15%,#ffdf5a 20%,#ffdd51 25%,#ffdc4d 30%,#ffdb48 35%,#ffd83d 40%,#ffd42f 45%,#ffd124 50%,#ffd01f 55%,#fecf1e 60%,#fccc1b 65%,#f9c817 70%,#f6c412 75%,#f2bf0d 80%,#efbb08 85%,#ecb704 90%,#eab401 95%,#e9b300 100%);
  --sheen:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0.000) 28%,rgba(255,255,255,0.012) 30%,rgba(255,255,255,0.025) 32%,rgba(255,255,255,0.046) 34%,rgba(255,255,255,0.081) 36%,rgba(255,255,255,0.131) 38%,rgba(255,255,255,0.197) 40%,rgba(255,255,255,0.276) 42%,rgba(255,255,255,0.358) 44%,rgba(255,255,255,0.431) 46%,rgba(255,255,255,0.482) 48%,rgba(255,255,255,0.500) 50%,rgba(255,255,255,0.482) 52%,rgba(255,255,255,0.431) 54%,rgba(255,255,255,0.358) 56%,rgba(255,255,255,0.276) 58%,rgba(255,255,255,0.197) 60%,rgba(255,255,255,0.131) 62%,rgba(255,255,255,0.081) 64%,rgba(255,255,255,0.046) 66%,rgba(255,255,255,0.025) 68%,rgba(255,255,255,0.012) 70%,rgba(255,255,255,0.000) 72%,transparent 100%);
  --sheen-soft:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0.000) 28%,rgba(255,255,255,0.010) 30%,rgba(255,255,255,0.020) 32%,rgba(255,255,255,0.037) 34%,rgba(255,255,255,0.065) 36%,rgba(255,255,255,0.105) 38%,rgba(255,255,255,0.158) 40%,rgba(255,255,255,0.221) 42%,rgba(255,255,255,0.286) 44%,rgba(255,255,255,0.345) 46%,rgba(255,255,255,0.385) 48%,rgba(255,255,255,0.400) 50%,rgba(255,255,255,0.385) 52%,rgba(255,255,255,0.345) 54%,rgba(255,255,255,0.286) 56%,rgba(255,255,255,0.221) 58%,rgba(255,255,255,0.158) 60%,rgba(255,255,255,0.105) 62%,rgba(255,255,255,0.065) 64%,rgba(255,255,255,0.037) 66%,rgba(255,255,255,0.020) 68%,rgba(255,255,255,0.010) 70%,rgba(255,255,255,0.000) 72%,transparent 100%);
  /* button surfaces: every stop keeps white text >= 4.6:1 */
  --surf-orange:linear-gradient(180deg,#c94d04 0%,#c84c04 10%,#c54b04 20%,#c24a04 30%,#bf4904 40%,#bb4704 50%,#b04303 60%,#ae4203 70%,#ab4103 80%,#a84003 90%,#a63f03 100%);
  --surf-navy:linear-gradient(180deg,#2d3ca1 0%,#2b3a9f 10%,#27369b 20%,#233297 30%,#1f2e93 40%,#1c2b91 50%,#14248a 60%,#132281 70%,#101c6e 80%,#0c175b 90%,#0b1552 100%);
  --surf-white:linear-gradient(180deg,#ffffff 0%,#fefeff 10%,#fcfcff 20%,#fafbfe 30%,#f8f9fe 40%,#f5f7fd 50%,#eef0fb 60%,#eceffb 70%,#e8ecfa 80%,#e5e8f8 90%,#e3e7f8 100%);
  --surf-muted:linear-gradient(180deg,#f3f1ec 0%,#f2f0eb 10%,#f0eee8 20%,#eeebe5 30%,#ece9e2 40%,#eae7df 50%,#e4e0d6 60%,#e3dfd5 70%,#e0dcd2 80%,#ddd9ce 90%,#dcd8cd 100%);
  --btn-sweep:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0.000) 25%,rgba(255,255,255,0.016) 30%,rgba(255,255,255,0.055) 35%,rgba(255,255,255,0.136) 40%,rgba(255,255,255,0.234) 45%,rgba(255,255,255,0.280) 50%,rgba(255,255,255,0.234) 55%,rgba(255,255,255,0.136) 60%,rgba(255,255,255,0.055) 65%,rgba(255,255,255,0.016) 70%,rgba(255,255,255,0.000) 75%,transparent 100%);
  --display:Oswald,"Oswald Fallback","Arial Narrow",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{font:400 1rem/1.65 Inter,"Inter Fallback",system-ui,sans-serif;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;padding-top:var(--hh)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;color:var(--navy);letter-spacing:.005em}
h1,h2{text-transform:uppercase}
h1{font-size:2.1rem}
h2{font-size:1.8rem}
h3{font-size:.95rem;font-family:Inter,"Inter Fallback",sans-serif;font-weight:600;line-height:1.35;color:var(--ink)}
p+p{margin-top:var(--s2)}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font:600 .8rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--orange-t);margin-bottom:.7rem}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--yellow);padding:.9rem 1.3rem;min-height:48px;display:inline-flex;align-items:center;border-radius:10px;font-weight:600}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.ph-copy{display:block;margin-top:var(--s2);padding:.7rem .9rem;border:2px dashed #e0aa00;border-radius:10px;background:#fff6d6;color:#6b5200;font:600 .88rem/1.4 Inter,"Inter Fallback",sans-serif}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.95rem 1.7rem;border-radius:999px;border:0;font:600 1rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),background .25s,box-shadow .25s,color .25s}
.btn-primary{background:var(--orange-d);color:#fff;box-shadow:0 8px 20px -8px rgba(201,77,4,.7)}
.btn-primary:hover{background:var(--orange-dd);transform:translateY(-2px)}
.btn-ghost{border:2px solid var(--navy);color:var(--navy);background:transparent}.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-xl{width:100%;font-size:1.35rem;padding:1.15rem 2rem;min-height:60px}
.btn .arr{transition:transform .25s var(--ease)}.btn:hover .arr{transform:translateX(4px)}
.btn[aria-disabled=true]{background:#e9e6de;color:#5a6078;box-shadow:none;cursor:not-allowed;transform:none}
.textlink{color:var(--blue);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:rgba(29,63,214,.35)}

/* glossy enamel headings (solid colors are the fallback) */
.gloss{filter:drop-shadow(0 1px 0 rgba(11,21,82,.32)) drop-shadow(0 4px 5px rgba(11,21,82,.15))}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gloss .gl,.gloss .go{-webkit-box-decoration-break:clone;box-decoration-break:clone;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-repeat:no-repeat;background-size:300% 100%,100% 100%;background-position:0 0,0 0;animation:gloss 1.9s 1.2s cubic-bezier(.45,.05,.35,1) 1 both}
  .gloss .gl{background-image:var(--sheen),var(--shine-navy)}
  .gloss .go{background-image:var(--sheen-soft),var(--shine-orange)}
  .gloss ::selection{-webkit-text-fill-color:#fff;color:#fff;background:var(--navy)}
}
.gloss .go{color:var(--orange-d)}
@keyframes gloss{from{background-position:100% 0,0 0}to{background-position:0 0,0 0}}
@media (forced-colors:active){.gloss{filter:none}.gloss .gl,.gloss .go{background:none;-webkit-text-fill-color:currentColor}}

/* header + mobile menu */
.hdr{position:fixed;inset:0 0 auto;z-index:50;background:rgba(255,250,241,.98);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);height:var(--hh)}
.logo{display:inline-flex;align-items:center;min-height:48px}
.logo img{height:34px;width:auto}
.menu-btn{width:48px;height:48px;border-radius:12px;border:1px solid var(--line);background:var(--paper);cursor:pointer;position:relative}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{position:absolute;left:13px;width:20px;height:2px;background:var(--navy);border-radius:2px;content:"";transition:.25s}
.menu-btn span{top:23px}.menu-btn span::before{left:0;top:-6px}.menu-btn span::after{left:0;top:6px}
.menu-btn[aria-expanded=true] span{background:transparent}.menu-btn[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}.menu-btn[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
.nav{list-style:none;position:fixed;inset:var(--hh) 0 auto 0;display:none;flex-direction:column;background:var(--cream);border-bottom:1px solid var(--line);padding:.4rem 1.25rem 1.2rem;box-shadow:0 20px 30px -20px rgba(11,21,82,.3);max-height:calc(100vh - var(--hh));overflow:auto}
.nav.open{display:flex}
.nav li{border-bottom:1px solid var(--line)}.nav li:last-child{border:0}
.nav a{display:flex;align-items:center;min-height:52px;font:600 1.1rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--navy);text-decoration:none}
.nav a[aria-current=page]{color:var(--navy)}   /* Jason Oct 26 (via Cole): navy text, orange tread over it */
.nav .nav-cta{margin-top:.8rem;justify-content:center;border-radius:999px;background:var(--orange-d);color:#fff}
.no-js .nav{position:static;display:flex;box-shadow:none}

/* hero — mobile: mascot + one big Shop button on the first screen */
.hero{position:relative;overflow:hidden;padding:1.1rem 0 1.6rem;text-align:center}
.hero .wrap{display:grid;gap:1rem}
.hero h1{font-size:2rem;line-height:1.04}
.hero-lede{display:none;color:var(--muted)}
.hero-art{position:relative;width:min(78vw,300px);margin:0 auto}
.hero-art .mascot{width:100%;aspect-ratio:1010/985;filter:drop-shadow(0 16px 20px rgba(11,21,82,.22))}
.hero-badge{position:absolute;right:-14px;bottom:-6px;width:84px;height:84px;filter:drop-shadow(0 10px 16px rgba(11,21,82,.3));animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.blob{position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.blob.a{width:420px;height:420px;right:-160px;top:-60px;background:radial-gradient(circle,rgba(255,207,31,.38),transparent 70%)}
.blob.b{width:360px;height:360px;left:-170px;bottom:-140px;background:radial-gradient(circle,rgba(29,63,214,.12),transparent 70%)}
.hero-cta{display:grid;gap:.6rem}

/* category tiles (3 up, always) */
.cats{padding:0 0 var(--s4)}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.cat{display:flex;flex-direction:column;text-decoration:none;border-radius:14px;background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.cat .ph{position:relative;aspect-ratio:1;background:radial-gradient(circle at 50% 60%,#fff 0,#fff 45%,transparent 70%),linear-gradient(160deg,#fff4d4,#fde7d6)}
.cat .ph img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;transition:transform .5s var(--ease)}
.cat .lbl{display:flex;align-items:center;justify-content:center;text-align:center;min-height:3.2em;padding:.45rem .3rem;font:600 .82rem/1.15 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
.cat:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(11,21,82,.45);border-color:#f5c9a8}
.cat:hover img{transform:scale(1.06) rotate(-1.5deg)}

/* sections */
.section{padding:var(--s5) 0}
.section.alt{background:var(--paper);border-block:1px solid var(--line)}
.sec-head{margin-bottom:var(--s3)}
.sec-head p{color:var(--muted);margin-top:.6rem}
.split{display:grid;gap:var(--s3);align-items:center}
.split .media{border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.split .media img{width:100%;height:auto}
.split .media.contain{padding:1.2rem;background:linear-gradient(160deg,#fff4d4,#fde7d6)}
.split p{color:var(--muted)}
.split .btn{margin-top:var(--s3)}
.feats{list-style:none;display:grid;gap:.6rem;margin:var(--s3) 0}
.feats li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;font-weight:500;line-height:1.45}

/* product cards: photo + name, never a bare price */
.dark{background:linear-gradient(180deg,var(--navy) 0,var(--navy-d) 100%);color:#fff}
.dark h2{color:#fff}.dark .eyebrow{color:var(--yellow)}.dark .sec-head p{color:#cfd5f5}
.p-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.card{display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.card .ph{aspect-ratio:1;background:#f6f4ef;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .body{display:flex;flex-direction:column;gap:.7rem;padding:.8rem .8rem .9rem;flex:1}
.card .btn{margin-top:auto;width:100%;min-height:44px;padding:.7rem .8rem;font-size:.85rem}
.shop-group+.shop-group{margin-top:var(--s5)}
.shop-group h2{font-size:1.5rem;margin-bottom:var(--s2)}
.note{margin-top:var(--s3);font-size:.9rem;color:var(--muted)}

/* band */
.band{background:linear-gradient(180deg,var(--navy) 0,var(--navy-d) 100%);color:#fff;text-align:center;padding:var(--s5) 0}
.band h2{color:#fff;font-size:2.2rem}.band h2 span{color:var(--yellow)}
.band p{max-width:36rem;margin:var(--s2) auto var(--s3);color:#dfe3fb}
.band .btn-ghost{border-color:#fff;color:#fff}.band .btn-ghost:hover{background:#fff;color:var(--navy)}
.band .acts{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* page header */
.page-hd{padding:var(--s4) 0 var(--s3)}
.page-hd p{color:var(--muted);margin-top:.8rem;max-width:42rem}
.ph-box{border:2px dashed #c9c3b4;border-radius:18px;padding:var(--s3);background:var(--paper);color:var(--muted)}
.ph-box h3{margin-bottom:.4rem;color:var(--navy)}
.ph-grid{display:grid;gap:.8rem}

/* footer */
footer{background:var(--navy-d);color:#cfd5f5;padding:var(--s5) 0 var(--s3);font-size:.93rem}
.f-grid{display:grid;gap:var(--s3)}
.f-brand img{height:40px;width:auto;background:#fff;padding:6px 10px;border-radius:10px;box-sizing:content-box}
.f-brand p{margin-top:var(--s2);max-width:22rem;color:#aab3e6}
footer h2{color:#fff;font:600 .95rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem}
footer ul{list-style:none}
footer ul a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:#cfd5f5}
footer a:hover{color:var(--yellow)}
.legal{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.12);font-size:.85rem;color:#98a1d6}

/* 404 */
.nf{text-align:center;padding:var(--s5) 0}
.nf img{width:min(60vw,240px);margin:0 auto var(--s3)}
.nf p{color:var(--muted);margin:var(--s2) auto var(--s3);max-width:30rem}

@media (min-width:600px){
  h1{font-size:2.8rem}h2{font-size:2.2rem}
  .p-grid{grid-template-columns:repeat(3,1fr);gap:1rem}
  .cat-grid{gap:1rem}.cat .lbl{font-size:1rem}
  .ph-grid{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  :root{--hh:76px}
  .logo img{height:42px}
  .menu-btn{display:none}
  .nav,.no-js .nav{position:static;display:flex;flex-direction:row;align-items:center;gap:.2rem;padding:0;background:none;border:0;box-shadow:none;max-height:none;overflow:visible}
  .nav li{border:0}
  .nav a{min-height:44px;padding:0 .85rem;border-radius:10px;font-size:.95rem}
  .nav a:hover{background:rgba(20,36,138,.07)}
  .nav .nav-cta{margin:0 0 0 .5rem;padding:0 1.3rem}.nav .nav-cta:hover{background:var(--orange-dd)}
  .hero{text-align:left;padding:var(--s4) 0 var(--s4)}
  .hero .wrap{grid-template-columns:1.05fr .95fr;gap:var(--s4);align-items:center}
  .hero h1{font-size:clamp(2.8rem,4.6vw,4.1rem)}
  .hero-lede{display:block;font-size:1.12rem;max-width:32rem;margin-top:1.2rem}
  .hero .wrap{grid-template-columns:1.05fr .95fr;grid-template-rows:auto auto;row-gap:0}.hero-copy{grid-area:1/1;align-self:end}.hero-art{grid-area:1/2/3/3;width:min(100%,400px)}.hero-cta{grid-area:2/1;align-self:start}
  .hero-cta{display:flex;margin-top:var(--s3)}
  .btn-xl{width:auto;padding:1.15rem 3rem}
  .hero-badge{width:128px;height:128px;right:-24px;bottom:-12px}
  .cat-grid{max-width:none}
  .split{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .split.rev .media{order:2}
  .p-grid{grid-template-columns:repeat(4,1fr);gap:1.25rem}
  .card .body{padding:1rem 1.1rem 1.2rem}
  .f-grid{grid-template-columns:1.6fr 1fr 1fr}
  .band h2{font-size:3rem}
  .ph-grid{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.tight{padding-top:var(--s4)}
.mt{margin-top:var(--s3)}
/* tweaks */
.cat .ph img,.split .media.contain img{mix-blend-mode:multiply}
.hero-badge{right:auto;left:-10px}
.blob.a{width:340px;height:340px;top:-100px}
.blob.b{display:none}
@media (min-width:900px){.cat .ph{aspect-ratio:4/3}.hero-badge{left:-30px;right:auto}.blob.a{width:460px;height:460px;top:-140px}}
@media (forced-colors:active){.cat .ph img,.split .media.contain img{mix-blend-mode:normal}}
/* round 2 */
.subhead{font:600 1.15rem/1.35 var(--display);letter-spacing:.02em;color:var(--navy);margin:.6rem 0 .8rem;text-transform:none}
.split .acts,.page-hd .acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--s3)}
.split .acts .btn{margin-top:0}
.hero-sub{justify-self:center;display:inline-flex;align-items:center;min-height:44px}
.closer{font:700 1.2rem/1.2 var(--display);color:var(--orange-t);text-transform:uppercase;letter-spacing:.04em}
.disp-grid{display:grid;gap:1rem}
.disp{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#f6f4ef;aspect-ratio:16/9}
.disp img{width:100%;height:100%;object-fit:cover}
.disp-ph{display:grid;place-items:center;border:2px dashed #c9c3b4;color:var(--muted);font:600 1.1rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.narrow{max-width:760px}
.lead{color:var(--muted);margin:.6rem 0 var(--s3)}
.dform{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:1.2rem;display:grid;gap:1rem}
.fgrid{display:grid;gap:.9rem}
.fld{display:grid;gap:.35rem;font-weight:600;font-size:.95rem;color:var(--ink)}
.fld b{color:var(--orange-t)}.fld i{font-style:normal;font-weight:500;color:var(--muted);font-size:.85rem}
.fld input,.fld select,.fld textarea{font:400 1rem/1.4 Inter,"Inter Fallback",sans-serif;color:var(--ink);background:#fff;border:1.5px solid #cfc8b8;border-radius:12px;padding:.75rem .85rem;min-height:48px;width:100%}
.fld textarea{resize:vertical;min-height:110px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.fld [aria-invalid=true]{border-color:#b3261e;background:#fff7f6}
.ferr{color:#b3261e;font-weight:500;font-size:.85rem}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{min-height:65px}
.fine{font-size:.85rem;color:var(--muted)}
.fmsg{padding:.9rem 1rem;border-radius:12px;font-weight:600}
.fmsg.ok{background:#e8f6ec;color:#185c2c;border:1px solid #9fd3ae}
.fmsg.err{background:#fdecea;color:#8c1d18;border:1px solid #f0b4ae}
@media (min-width:600px){.fgrid{grid-template-columns:1fr 1fr}.fld.full{grid-column:1/-1}.dform{padding:1.8rem}.disp-grid{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.hero-sub{justify-self:start}.hero-cta{align-items:center;gap:1.4rem}}
/* round 2b: photo hero modeled on hall4x4.com/h825 (copy A0 v2) */
.hero-photo-v{text-align:left;padding:1.25rem 0 2.6rem}
.hero-photo-v .wrap{display:grid;grid-template-columns:1fr;gap:1.5rem}
.hero-photo-v h1{font-size:2.05rem;line-height:1.05}
.hero-intro{color:var(--muted);font-size:.98rem;line-height:1.55;margin-top:.75rem}
.hero-intro strong{color:var(--ink);font-weight:600}
.hero-photo-v .hero-art{width:100%;max-width:560px;margin:0 auto}
.hero-photo{border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(11,21,82,.55);aspect-ratio:1072/960;transform:rotate(1.2deg);background:#1a2a5a}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo-v .hero-badge{left:auto;right:4px;bottom:-34px;width:92px;height:92px}
.home-cats{padding:var(--s4) 0;background:var(--paper);border-block:1px solid var(--line)}
.home-cats h2{margin-bottom:var(--s3)}
.cat .lbl i{font-style:normal;color:var(--orange-t);margin-left:.3em}
@media (min-width:900px){
  .hero-photo-v{padding:var(--s5) 0 var(--s6)}
  .hero-photo-v .wrap{grid-template-columns:1fr 1.08fr;grid-template-rows:auto;gap:var(--s5);align-items:center}
  .hero-photo-v .hero-copy{grid-area:auto;align-self:center}
  .hero-photo-v .hero-art{grid-area:auto;max-width:none;width:100%}
  .hero-photo-v h1{font-size:clamp(2.6rem,4.6vw,4.2rem)}
  .hero-intro{font-size:1.15rem;max-width:32rem;margin-top:var(--s3)}
  .hero-photo-v .hero-badge{right:-40px;bottom:-46px;width:clamp(110px,11vw,140px);height:auto}
  .home-cats{padding:var(--s5) 0}
}

.hero-photo-v .hero-cta{display:flex;margin-top:1.1rem}
@media (min-width:900px){.hero-photo-v .hero-cta{margin-top:var(--s4)}}
html{scroll-padding-top:calc(var(--hh) + 16px)}
.card .cline{margin:0;font-size:.9rem;color:var(--muted,#4a5160)}
.pdesc{font-size:.88rem;line-height:1.5}
.pdesc summary{cursor:pointer;font-weight:600;color:#b84604;min-height:44px;display:flex;align-items:center}
.pdesc p{margin:.5rem 0 0}
.shop-group .gline{margin:-.3rem 0 1rem;opacity:.9}

/* ===== Shiny look everywhere (Jason, Oct 24): headings + buttons reuse the hero H1 enamel tokens ===== */
/* Headings: gradient text repeated per line (1lh) so wrapped lines each get the full enamel band. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .shine,h2,h3,.cat .lbl,.closer{--lh:1.08;--shine:var(--shine-navy);--sh:var(--sheen);
    background-image:var(--sh),var(--shine);background-repeat:repeat-y;
    background-size:300% calc(var(--lh)*1em),100% calc(var(--lh)*1em);background-size:300% 1lh,100% 1lh;
    background-position:0 0,0 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:gloss 1.9s 1.4s cubic-bezier(.45,.05,.35,1) 1 both}
  h3{--lh:1.35}.cat .lbl{--lh:1.15}.closer{--lh:1.2;--shine:var(--shine-orange);--sh:var(--sheen-soft)}
  .dark h2,.band h2,footer h2{--shine:var(--shine-white);--sh:var(--sheen-soft)}
  footer h2{--lh:1}
  .band h2 span{background-image:var(--sheen-soft),var(--shine-yellow);background-repeat:no-repeat;background-size:300% 100%,100% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;
    animation:gloss 1.9s 1.4s cubic-bezier(.45,.05,.35,1) 1 both}
  .cat .lbl i{-webkit-text-fill-color:currentColor}
  h2 ::selection,h3 ::selection,h2::selection,h3::selection{-webkit-text-fill-color:#fff;color:#fff;background:var(--navy)}
}
h2,h3,.cat .lbl{filter:drop-shadow(0 1px 0 rgba(11,21,82,.28)) drop-shadow(0 3px 4px rgba(11,21,82,.12))}
.dark h2,.band h2,footer h2{filter:drop-shadow(0 1px 0 rgba(0,0,0,.45)) drop-shadow(0 3px 5px rgba(0,0,0,.25))}
.closer{filter:drop-shadow(0 1px 0 rgba(11,21,82,.22))}

/* Buttons: enamel surface (dark-to-darker orange with a gloss horizon), rim light, sweep sheen on hover/focus. */
.btn{position:relative;isolation:isolate;overflow:hidden;background-repeat:no-repeat;background-size:400% 100%,100% 100%;background-position:0 0,0 0;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-position .7s var(--ease),color .2s}
.btn-primary,.nav .nav-cta{background-color:var(--orange-d);background-image:var(--btn-sweep),var(--surf-orange);color:#fff;
  text-shadow:0 1px 0 rgba(80,25,0,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 6px rgba(60,20,0,.25),0 8px 20px -8px rgba(201,77,4,.7)}
.nav .nav-cta{background-repeat:no-repeat;background-size:400% 100%,100% 100%;transition:background-position .7s var(--ease)}
.btn-primary:hover,.btn-primary:focus-visible,.nav .nav-cta:hover,.nav .nav-cta:focus-visible{background-color:var(--orange-dd);background-image:var(--btn-sweep),var(--surf-orange);background-position:100% 0,0 0}
.btn-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 6px rgba(60,20,0,.3),0 12px 24px -10px rgba(201,77,4,.8)}
.btn-ghost{background-color:transparent;background-image:var(--btn-sweep);background-size:400% 100%;color:var(--navy);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px -10px rgba(11,21,82,.5)}
.btn-ghost:hover,.btn-ghost:focus-visible{background-color:var(--navy);background-image:var(--btn-sweep),var(--surf-navy);background-size:400% 100%,100% 100%;background-position:100% 0,0 0;color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.3)}
.band .btn-ghost{border-color:#fff;color:#fff;background-image:var(--btn-sweep)}
.band .btn-ghost:hover,.band .btn-ghost:focus-visible{background-color:#fff;background-image:var(--btn-sweep),var(--surf-white);color:var(--navy);text-shadow:none}
.btn[aria-disabled=true]{background-color:#e9e6de;background-image:var(--surf-muted);color:#4a5068;text-shadow:0 1px 0 rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 4px rgba(20,26,51,.12);cursor:not-allowed;transform:none}
.btn[aria-disabled=true]:hover{background-position:0 0,0 0;transform:none}
.btn:focus-visible,.nav .nav-cta:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.dark .btn:focus-visible,.band .btn:focus-visible{outline-color:var(--yellow)}

@media (prefers-reduced-motion:reduce){.btn,.nav .nav-cta{transition:none}.btn:hover{transform:none}}
@media (forced-colors:active){
  h2,h3,.cat .lbl,.closer,.band h2 span{background:none!important;-webkit-text-fill-color:currentColor;filter:none}
  .btn,.nav .nav-cta{background:ButtonFace!important;color:ButtonText!important;border:2px solid ButtonText;box-shadow:none;text-shadow:none}
  .btn[aria-disabled=true]{color:GrayText!important;border-color:GrayText}
}
/* inline text link (Dealers intro "Tell us about your store" -> #inquiry) */
.inline-link{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--orange-d);border-radius:3px}
.inline-link:hover{color:var(--orange-t);text-decoration-color:currentColor}
.inline-link:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media (forced-colors:active){.inline-link{color:LinkText;text-decoration-color:LinkText}}
/* ===== Home hero, art-directed (Jason, Oct 24) =====
   Phones (<=640px): unchanged photo hero (silver Jeep card + badge), "What is Jeep Ducking?" shows the cruise duck.
   Tablet/desktop (>=641px): full Duck More Quack Less banner on top (text baked in, shown whole, never cropped),
   live H1/intro/CTA below it, and the silver Jeep moves into the "What is Jeep Ducking?" media slot. */
@media (max-width:640px){.only-wide{display:none!important}}
@media (min-width:641px){
  .only-narrow{display:none!important}
  .hero-ad{padding:var(--s3) 0 var(--s5)}
  .hero-ad .blob{display:none}
  .hero-ad .wrap{grid-template-columns:1fr!important;padding-top:var(--s4)}
  .hero-ad .hero-copy{max-width:48rem}
  .banner-frame{width:calc(100% - 2.5rem);max-width:1300px;margin:0 auto;border-radius:22px;overflow:hidden;background:#2b4a8a;box-shadow:0 30px 60px -30px rgba(11,21,82,.55)}
  .banner-frame picture{display:block}
  .banner-img{display:block;width:100%;height:auto}
}
@media (min-width:900px){.hero-ad h1{font-size:clamp(2.6rem,4.2vw,3.8rem)}}
/* ===== Home "Shop by category" (Jason, Oct 24): matches hall4x4.com/h825 =====
   Flat navy heading + labels (the reference is flat, so the shiny text treatment is switched off here).
   Grid handles 3-6 tiles (.n3-.n6 from build.py): one row on desktop, 3-up on tablets, 2-up on phones;
   an odd last tile on phones spans both columns with a wide 2:1 image area (same as the reference). */
.home-cats{padding:var(--s5) 0;background:var(--paper);border-block:1px solid var(--line)}
.home-cats .eyebrow{font-size:.9rem;margin-bottom:var(--s2)}
.home-cats .eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.home-cats .cat .lbl{background:none!important;-webkit-text-fill-color:currentColor;filter:none;animation:none}
/* Shop by category heading (Jason via Cole, Oct 26): same navy enamel gradient + drop shadow as the other h2s, held static (no sweep) */
.home-cats h2{animation:none}
.home-cats h2{color:var(--navy);font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:var(--s4)}
.home-cats .cat-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(var(--n,3),minmax(0,1fr));max-width:calc(var(--n,3) * 236px)}
.home-cats .n3{--n:3}.home-cats .n4{--n:4}.home-cats .n5{--n:5}.home-cats .n6{--n:6}
.home-cats .cat{border-radius:var(--r);background:var(--cream);border:1px solid var(--line);overflow:hidden}
.home-cats .cat .ph{aspect-ratio:1;background:radial-gradient(circle at 50% 60%,#fff 0,#fff 45%,transparent 70%),linear-gradient(160deg,#fff4d4,#fde7d6)}
.home-cats .cat .ph img{inset:1.2rem;width:calc(100% - 2.4rem);height:calc(100% - 2.4rem);mix-blend-mode:normal}
.home-cats .cat .lbl{display:flex;justify-content:space-between;align-items:center;gap:.6rem;text-align:left;min-height:0;padding:.9rem 1.1rem;background:var(--paper)!important;
  font:600 1rem/1.15 var(--display);letter-spacing:.07em;text-transform:uppercase;color:var(--navy)}
.home-cats .cat .lbl i{margin:0;flex:none;font-style:normal;color:var(--orange-t);-webkit-text-fill-color:var(--orange-t);transition:transform .3s var(--ease)}
.home-cats .cat:hover{transform:translateY(-6px)}
.home-cats .cat:hover .lbl i{transform:translateX(4px)}
.home-cats .cat:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media (max-width:820px){.home-cats .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}.home-cats .cat-grid.n4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){
  .home-cats{padding:var(--s4) 0}
  .home-cats .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
  .home-cats .cat:last-child:nth-child(odd){grid-column:span 2}
  .home-cats .cat:last-child:nth-child(odd) .ph{aspect-ratio:2/1}
  .home-cats .cat .lbl{padding:.8rem .9rem;font-size:.9rem}
}
@media (forced-colors:active){.home-cats .cat{border-color:CanvasText}.home-cats .cat .lbl i{-webkit-text-fill-color:currentColor}}
.home-cats .cat{display:flex;flex-direction:column}
.home-cats .cat .lbl{flex:1 1 auto}
.home-cats .cat .lbl i{font-size:1.3em;line-height:1}
/* card price (Games/Pets imports carry an exported price) */
.card .price{margin:0;font:600 1rem/1.2 var(--display);letter-spacing:.03em;color:var(--orange-t)}
/* Home categories: centre the tile row wherever it doesn't fill the container */
.home-cats .cat-grid{margin-inline:auto}
/* tablets (561-820px), 5 tiles: 3 + 2 with the short second row centred */
@media (min-width:561px) and (max-width:820px){
  .home-cats .cat-grid.n5{grid-template-columns:repeat(6,minmax(0,1fr))}
  .home-cats .cat-grid.n5 .cat{grid-column:span 2}
  .home-cats .cat-grid.n5 .cat:nth-child(4){grid-column:2/span 2}
}
/* product-details bullets (Games/Pets A6 copy): plain list inside the card, not the boxed feature list */
.pdesc .feats{display:block;list-style:disc;margin:.5rem 0 0;padding-left:1.1rem}
.pdesc .feats li{background:none;border:0;border-radius:0;padding:0;margin:.25rem 0 0;font-weight:400}
/* ===== Dealer display lightbox (Jason, Oct 24: "enlargeable on mobile") ===== */
.disp-zoom{position:relative;display:block;width:100%;height:100%;cursor:zoom-in;color:var(--navy)}
.disp-zoom:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.zoom-ic{position:absolute;right:.6rem;bottom:.6rem;display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 4px 14px -6px rgba(11,21,82,.5);transition:transform .25s var(--ease)}
.disp-zoom:hover .zoom-ic,.disp-zoom:focus-visible .zoom-ic{transform:scale(1.1)}
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(6,10,40,.94);color:#fff;overscroll-behavior:contain}
.lb::backdrop{background:rgba(6,10,40,.94)}
.lb[open]{display:grid;place-items:center}
.lb-fig{margin:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:4rem .5rem 3.5rem}
.lb-img{max-width:100%;max-height:calc(100% - 4rem);width:auto;height:auto;object-fit:contain;border-radius:8px;background:#222}
.lb-cap{max-width:46rem;padding:0 1rem;text-align:center;font-size:.92rem;line-height:1.45;color:#e6e9fb}
.lb-count{position:absolute;top:1.1rem;left:1rem;margin:0;font:600 .9rem/1 var(--display);letter-spacing:.08em;color:#e6e9fb}
.lb-btn{position:absolute;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:999px;background:rgba(255,255,255,.95);color:var(--navy);font:600 1.9rem/1 Inter,"Inter Fallback",sans-serif;cursor:pointer;box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
.lb-btn:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.lb-close{top:.6rem;right:.6rem}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%)}
.lb-prev{left:.5rem}.lb-next{right:.5rem}
@media (max-width:640px){.lb-prev,.lb-next{top:auto;bottom:.6rem;transform:none}.lb-prev{left:calc(50% - 56px)}.lb-next{right:calc(50% - 56px)}.lb-fig{padding:3.8rem .25rem 4.4rem}}
@media (forced-colors:active){.lb-btn,.zoom-ic{border:2px solid ButtonText}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Design choice on shop cards (merged two-design listings) */
.designs .dtext{margin:0;font-size:.85rem;color:var(--muted,#4a5160)}
.dbtns{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.dbtns[hidden],.dtext[hidden]{display:none}
.dlbl{flex-basis:100%;font:600 .72rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#4a5160)}
.dopt{min-height:44px;padding:.45rem .8rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--navy);font:600 .8rem/1.1 var(--display);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.dopt[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:#fff}
.dopt:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media (forced-colors:active){.dopt[aria-pressed="true"]{border:3px solid Highlight}}
/* optional personalization text on a shop card */
.pfield{display:grid;gap:.35rem}
.pfield label{font-size:.85rem;font-weight:600;line-height:1.35;color:var(--ink)}
.pfield textarea{width:100%;min-height:64px;padding:.6rem .7rem;border:1.5px solid #8a8fa3;border-radius:10px;background:#fff;color:var(--ink);font:400 1rem/1.4 Inter,"Inter Fallback",sans-serif;resize:vertical}
.pfield textarea:focus-visible{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--navy)}
.pcount{justify-self:end;font-size:.78rem;color:var(--muted,#4a5160);font-variant-numeric:tabular-nums}
.pcount.near{color:#b84604;font-weight:600}
.phelp{margin:0;font-size:.8rem;line-height:1.4;color:var(--muted,#4a5160)}
.pdesc .psize{margin:.6rem 0 0}

/* =====================================================================================
   DESIGN SYSTEM v1 (Jason, Oct 24: visual consistency + hover pass). Loaded last: it
   unifies what the blocks above set piecemeal. Palette is LOCKED to the brand colours
   already defined in :root (navy, blue, orange family, yellow, cream/paper, ink/muted/line);
   no new brand colours.
   ===================================================================================== */
:root{
  /* type scale (mobile first; a few steps grow at >=900px) */
  --fs-xs:.78rem;--fs-sm:.88rem;--fs-base:1rem;--fs-md:1.12rem;--fs-lg:1.35rem;--fs-xl:1.8rem;--fs-2xl:2.1rem;--fs-3xl:2.6rem;
  --lh-tight:1.08;--lh-snug:1.3;--lh-body:1.65;
  /* spacing scale (aliases the existing --s1..--s6 so older rules stay in step) */
  --sp-1:.25rem;--sp-2:var(--s1);--sp-3:.75rem;--sp-4:var(--s2);--sp-5:var(--s3);--sp-6:var(--s4);--sp-7:var(--s5);--sp-8:var(--s6);
  /* radius + elevation */
  --radius-sm:10px;--radius-md:16px;--radius-lg:var(--r);--radius-pill:999px;
  --shadow-sm:0 2px 6px -2px rgba(11,21,82,.18);
  --shadow-md:0 10px 24px -14px rgba(11,21,82,.40);
  --shadow-lg:0 22px 40px -22px rgba(11,21,82,.50);
  /* motion */
  --dur:180ms;--dur-sweep:.7s;
}
body{font-size:var(--fs-base);line-height:var(--lh-body)}
h1{font-size:var(--fs-2xl);line-height:var(--lh-tight)}
h2{font-size:var(--fs-xl);line-height:var(--lh-tight)}
h3{font-size:var(--fs-base);line-height:var(--lh-snug)}
@media (min-width:900px){h1{font-size:var(--fs-3xl)}}

/* ---- buttons: ONE primary (orange enamel) + ONE secondary (navy outline) ----
   The enamel sweep on hover/focus is kept (background-position, --dur-sweep); colour,
   shadow and lift use --dur. .btn-secondary is the same style as the existing .btn-ghost. */
.btn{min-height:48px;padding:.85rem 1.6rem;border-radius:var(--radius-pill);font-size:var(--fs-base);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),color var(--dur),background-color var(--dur),border-color var(--dur),background-position var(--dur-sweep) var(--ease)}
.btn-ghost,.btn-secondary{border:2px solid var(--navy)}
.card .btn,.btn-sm{min-height:44px;padding:.65rem 1rem;font-size:var(--fs-sm)}
.btn:focus-visible,.nav a:focus-visible,.cat:focus-visible,.disp-zoom:focus-visible,.dopt:focus-visible,.lb-btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.dark .btn:focus-visible,.band .btn:focus-visible,.section.dark :focus-visible{outline-color:var(--yellow)}
/* disabled placeholder ("Coming soon"): on-brand but clearly not clickable */
.btn[aria-disabled=true],.btn[aria-disabled=true]:hover{background-color:var(--cream);background-image:none;color:var(--navy);
  border:2px dashed rgba(20,36,138,.45);box-shadow:none;text-shadow:none;opacity:1;cursor:not-allowed;transform:none}

/* ---- product cards: equal heights per row, one image ratio, price + button at the bottom ---- */
.p-grid{align-items:stretch}
.card{height:100%;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur)}
.card .ph{aspect-ratio:1/1;overflow:hidden;background:#fff}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur) var(--ease)}
.card .body{gap:var(--sp-3);padding:var(--sp-3) var(--sp-3) var(--sp-4)}
@media (min-width:900px){.card .body{padding:var(--sp-4) var(--sp-4) var(--sp-5)}}
.card .buy{margin-top:auto;display:grid;gap:var(--sp-2);padding-top:var(--sp-2)}
.card .buy .btn{margin-top:0}
.card .price{font-size:var(--fs-md)}

/* ---- hover / tap: lift + shadow + slight image zoom (pointer devices only) ---- */
.cat,.disp{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur)}
.cat img,.disp img{transition:transform var(--dur) var(--ease)}
.disp{box-shadow:var(--shadow-sm)}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#f5c9a8}
  .card:hover .ph img{transform:scale(1.04)}
  .cat:hover,.home-cats .cat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#f5c9a8}
  .cat:hover img{transform:scale(1.04)}
  .disp:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .disp:hover img{transform:scale(1.04)}
}
/* touch screens: no sticky hover states from the older rules */
@media (hover:none){
  .cat:hover,.home-cats .cat:hover,.btn-primary:hover{transform:none}
  .cat:hover img{transform:none}
  .card:active,.cat:active,.disp:active{transform:scale(.99)}
}
/* nav links: mud tire track over the text on hover and on the current page (replaces the underline; Jason, Oct 25).
   Plays once per hover as a left-to-right roll-in; no looping. Shop Now pill is excluded. */
.nav .nt{position:relative;display:inline-block}
.nav .nt::after{content:"";position:absolute;left:-.98em;right:-.98em;top:50%;height:1.35em;transform:translateY(-50%);
  background:var(--orange);-webkit-mask:url(/img/nav-tread-dots.svg) left center/auto 100% round no-repeat;mask:url(/img/nav-tread-dots.svg) left center/auto 100% round no-repeat;
  opacity:.5;pointer-events:none;clip-path:inset(0 100% 0 0);transition:clip-path .45s var(--ease)}
.nav a[aria-current=page] .nt::after{clip-path:inset(0 0 0 0)}
@media (hover:hover){.nav a:hover .nt::after,.nav a:focus-visible .nt::after{clip-path:inset(0 0 0 0)}}
@media (min-width:900px){
  .nav a:not(.nav-cta):hover{background:none}
  .nav .nav-cta{min-height:38px;padding:0 1rem}
}
@media (forced-colors:active){.nav .nt::after{display:none}.nav a[aria-current=page] .nt{text-decoration:underline}}
@media (prefers-reduced-motion:reduce){
  .card,.cat,.disp,.btn,.card .ph img,.cat img,.disp img,.nav .nt::after{transition:none!important}
  .card:hover,.cat:hover,.home-cats .cat:hover,.disp:hover,.btn:hover,.card:active,.cat:active,.disp:active{transform:none!important}
  .card:hover .ph img,.cat:hover img,.disp:hover img{transform:none!important}
}
@media (forced-colors:active){.btn[aria-disabled=true]{border-color:GrayText;color:GrayText}}

/* ===== Banner gleam (Jason, Oct 24): the H1 enamel sheen, carried across the banner =====
   Same gradient (--sheen, 100deg), same 1.9s duration, same cubic-bezier(.45,.05,.35,1), same once-per-load
   behaviour as `.gloss` (H1: 1.2s delay, 1 run). The banner sweep starts right AFTER the H1's (1.2s + 1.9s = 3.1s).
   Same 100deg band, 0-0.5 white: the --sheen band is 44% of the pseudo-element's width (~545px at 1280, vs ~470px on
   each H1 line), translated from fully off-left (-72%) to fully off-right (72%). Transform-only, so the image never repaints.
   Repeat: --gleam-iter (1 = once, like the H1). Add class "gleam-hover" to .banner-frame (BANNER_GLEAM_HOVER in
   build.py) to also replay it on hover. */
.banner-frame{--gleam-dur:1.9s;--gleam-delay:3.1s;--gleam-iter:1;--gleam-ease:cubic-bezier(.45,.05,.35,1)}
/* All widths since Oct 25 (phones get the banner too). The band exists only while it runs: opacity 0 / no transform at
   rest, "backwards" fill, 2D translate -> no permanent GPU layer (same fix as the earlier phone-hero crop issue). */
.banner-frame{position:relative;isolation:isolate}
.banner-frame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:var(--sheen) no-repeat;background-size:100% 100%;opacity:0;
  animation:hero-gleam var(--gleam-dur) var(--gleam-delay) var(--gleam-ease) var(--gleam-iter) backwards}
.banner-frame.gleam-hover:hover::after{animation:hero-gleam var(--gleam-dur) 0s var(--gleam-ease) 1 backwards}
@media (prefers-reduced-motion:reduce){.banner-frame::after{animation:none!important;display:none}}
@media (forced-colors:active){.banner-frame::after{display:none}}

/* ===== Mobile hero swap (Jason, Oct 24): on phones (single column, <=640px) the silver Jeep photo sits on top,
   right under the header, then eyebrow / H1 / intro / CTA. Pure CSS order, same markup; >=641px untouched
   (.hero-art is display:none there anyway). Extra top margin on the copy clears the spinning badge overhang. */
@media (max-width:640px){
  .hero-ad{padding-top:calc(4px + 1.875rem)}  /* header is 64px + 1px border over a 64px body offset; ~30px clear gap */
  .hero-ad .hero-art{order:-1;width:calc(100% - 12px)}  /* tilted card + badge + shadow keep >=20px from the screen edges */
  .hero-ad .hero-copy{margin-top:1rem}
}

/* ===== Mobile hero gleam (Jason, Oct 24): the banner sweep, on the phone hero's tilted Jeep card (<=640px).
   Same --sheen (100deg, 0-0.5 white), 1.9s, cubic-bezier(.45,.05,.35,1), once, starting 3.1s (right after the H1).
   Lives inside .hero-photo, which already clips to its rounded corners and carries the 1.2deg tilt, so the band
   rotates and clips with it. The badge is a later sibling of .hero-photo, so it stays above the sweep.
   Transform-only, no will-change (the compositor promotes it only while the animation runs). */
@media (max-width:640px){
  .hero-ad .hero-photo{position:relative;aspect-ratio:auto}
  .hero-ad .hero-photo img{height:auto}
  .hero-ad .hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:var(--sheen) no-repeat;background-size:100% 100%;opacity:0;
    animation:hero-gleam var(--gleam-dur,1.9s) var(--gleam-delay,3.1s) var(--gleam-ease,cubic-bezier(.45,.05,.35,1)) 1 backwards}
}
/* Crop fix (Jason, Oct 24, Chrome for Android): the sweep used to rest at translate3d(72%) for good ("both"), which kept a
   permanent GPU layer inside the tilted, rounded overflow clip; on Android that clip could be re-rastered off after a
   scroll / URL-bar resize and the photo looked low and cropped. Now the band exists only while it runs (opacity 0 and no
   transform at rest, "backwards" fill, 2D translate), and the photo sizes from its own width/height (height:auto, no
   object-fit crop), so nothing composited is left on the card once the one-time sweep ends. */
@keyframes hero-gleam{from{transform:translateX(-72%);opacity:1}to{transform:translateX(72%);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-ad .hero-photo::after{animation:none!important;display:none}}
@media (forced-colors:active){.hero-ad .hero-photo::after{display:none}}

/* ===== Branded 404 (lost duck) ===== */
.nf{text-align:center;padding:var(--sp-6,3rem) 0 var(--sp-8,5rem);background:radial-gradient(60rem 26rem at 50% 0,#fff3d6 0,transparent 70%)}
.nf .wrap{display:flex;flex-direction:column;align-items:center}
.nf-art{position:relative;width:min(60vw,260px);margin:0 auto var(--s3)}
.nf-art img{width:100%;margin:0;filter:drop-shadow(0 16px 20px rgba(11,21,82,.2))}
.nf-q{position:absolute;top:-.2em;right:-.35em;font:700 clamp(3rem,10vw,4.5rem)/1 var(--display);color:var(--orange-t);transform:rotate(12deg)}
.nf .eyebrow{justify-content:center;color:var(--orange-t);margin:0 auto .7rem}
.nf h1{font-size:clamp(2.6rem,9vw,4.2rem)}
.nf-body{color:var(--muted);margin:var(--s2) auto var(--s3);max-width:30rem}
.nf-acts{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.nf-also{margin-top:var(--s3);color:var(--muted);font-size:var(--fs-sm,.9rem)}
.nf-also a{color:var(--navy);font-weight:600;text-underline-offset:3px}

/* ===== Scroll fade-ins (site.js adds .rv only to off-screen sections, then .rv-in once; never repeats) ===== */
.rv{opacity:0;transform:translate3d(0,12px,0);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.rv-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none!important}}
@media print{.rv{opacity:1!important;transform:none!important}}

/* ===== Dealers: full-width display concepts + "How it works" ===== */
.disp-grid.disp-full{grid-template-columns:1fr!important;gap:var(--s3)}
.disp-full .disp{border-radius:var(--radius-lg,22px)}
.how h2{margin-bottom:var(--s3)}
.steps{list-style:none;display:grid;gap:var(--s2);counter-reset:none}
.steps li{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md,16px);padding:1.25rem 1.25rem 1.3rem 4.4rem;box-shadow:var(--shadow-sm)}
.step-n{position:absolute;left:1.1rem;top:1.15rem;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:999px;background:var(--surf-navy);color:#fff;font:700 1.15rem/1 var(--display)}
.steps h3{font-size:1.25rem;margin-bottom:.35rem}
.steps p{color:var(--muted);margin:0}
.how-acts{margin-top:var(--s4);display:flex;justify-content:center}
@media (min-width:820px){
  .steps{grid-template-columns:repeat(3,1fr);gap:var(--s3)}
  .steps li{padding:4.2rem 1.4rem 1.5rem}
  .step-n{left:1.4rem;top:1.3rem}
}

/* ===== Notify me (store opening) ===== */
.nform{display:grid;gap:.45rem;max-width:34rem}
.nlabel{font-weight:600;font-size:.95rem}
.nrow{display:flex;flex-wrap:wrap;gap:.6rem}
.nrow input{flex:1 1 14rem;min-height:48px;padding:.7rem 1rem;border:1.5px solid #c9c3b4;border-radius:999px;background:#fff;color:var(--ink);font:inherit}
.nrow input:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-color:var(--navy)}
.nrow input[aria-invalid=true]{border-color:#b3261e}
.nrow .btn{flex:0 0 auto}
.nrow .btn:disabled{opacity:.7;cursor:progress}
.nconsent{font-size:.85rem;color:var(--muted);margin:0}
.nmsg{min-height:1.4em;margin:0;font-weight:600;font-size:.95rem}
.nmsg.ok{color:#1d6b35}.nmsg.err{color:#b3261e}
.notify-panel{background:var(--paper);color:var(--ink);border-radius:var(--radius-lg,22px);padding:1.4rem;margin:0 0 var(--s4);box-shadow:var(--shadow-md)}
.notify-panel h2{font-size:clamp(1.4rem,4vw,1.9rem);color:var(--navy);margin-bottom:.4rem;-webkit-text-fill-color:currentColor;background:none;animation:none}
.notify-panel>p{color:var(--muted);margin-bottom:.9rem}
.card .btn-notify{min-height:44px;padding:.6rem 1rem;font-size:.85rem}
.f-notify{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.14)}
.f-notify .nlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.f-notify .nconsent{color:#cfd5f5}
.f-notify .nmsg.ok{color:#9be3b0}.f-notify .nmsg.err{color:#ffb4ab}
@media (min-width:700px){.notify-panel{padding:1.8rem 2rem}}

/* ===== Help / policy pages (tools/support.py) ===== */
.prose-sec{padding-top:var(--s2)}
.prose h2{font-size:clamp(1.35rem,3.6vw,1.75rem);margin:var(--s4) 0 var(--s2)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink);max-width:68ch}
.prose p+p{margin-top:var(--s2)}
.prose ul{margin:var(--s2) 0 var(--s2) 1.2rem;display:grid;gap:.45rem}
.prose a:not(.btn){color:var(--navy);font-weight:600;text-underline-offset:3px}
.prose .qa{padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.prose .qa h3{font:600 1.08rem/1.35 Inter,"Inter Fallback",sans-serif;color:var(--navy);margin-bottom:.35rem;letter-spacing:0;text-transform:none;background:none;-webkit-text-fill-color:currentColor;animation:none}
.prose .qa p{color:var(--muted)}
.prose .link-list{list-style:none;margin-left:0}
.prose .link-list a{display:inline-flex;align-items:center;min-height:44px}
.prose .acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--s4)}
.prose .closer{margin-top:var(--s4)}

/* ===== Live-text home banner (Jason, Oct 25) =====
   The banner image is now a clean plate; headline, tagline and badge text are real text, the sunburst is SVG, the
   HALL825.com logo and the badge duck are cutouts. Every overlay is placed in the plate's 2600x860 units:
   1cqw = 26 plate px, so the layout stays proportional at any banner width (641px up to 2600px viewports).
   Oswald metrics (upm 1000, ascent 1193, descent 289, cap 810): with line-height 1 the cap top sits 0.142em below the
   box top, so box top = cap top - 0.142 x font-size. Master: headline caps y 47-119, tagline caps y 201-264. */
.banner-frame{position:relative;container-type:inline-size}
.banner-frame .bn-mplate{display:none}
.bn-live{position:absolute;inset:0;pointer-events:none;forced-color-adjust:none;filter:drop-shadow(0 .12cqw .25cqw rgba(4,12,40,.35))}
.bn-h,.bn-t{position:absolute;pointer-events:auto;left:0;right:0;margin:0;text-align:center;font-family:var(--display);line-height:1;color:#fff;text-transform:uppercase;white-space:nowrap}
.bn-h{top:1.32cqw;font-size:clamp(14px,3.42cqw,89px);font-weight:600;letter-spacing:.012em}
.bn-t{top:7.34cqw;font-size:clamp(11px,2.62cqw,68px);font-weight:500;letter-spacing:.085em}
.bn-badge{position:absolute;left:80%;top:15.116%;width:18.077%;height:auto}
.bn-badge img{display:block;width:100%;height:auto}
/* #31 Docks4Ducks overlay (v3, Oct 26): 441x147 at (148,679) on the 2600x860 plate; under the gleam (z 2) */
.bn-anim{position:absolute;left:5.692%;top:78.953%;width:16.962%;z-index:1}
.bn-anim img{display:block;width:100%;height:auto}
.bn-logo{position:absolute;left:82.308%;top:72.674%;width:14.231%;height:auto}
@media (forced-colors:active){.bn-live{filter:none}}

/* Phones (Jason, Oct 25): the live-text banner IS the phone hero (the silver Jeep hero was removed from the markup,
   so there is nothing to flash or download). Stacked live text, Duckster's phone crop, then the badge + logo row. */
@media (max-width:640px){
  .banner-frame{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"live live" "img img" "badge logo";
    align-items:center;column-gap:.75rem;margin:0 22px;padding:1.25rem 1rem 1.1rem;border-radius:20px;overflow:hidden;
    /* the photo's own top (#1d3759) and bottom (#43678f) colours, so its edges disappear; the switch sits behind the photo */
    background:linear-gradient(180deg,#1d3759 0 50%,#43678f 50% 100%);box-shadow:0 24px 44px -26px rgba(11,21,82,.6)}
  .banner-frame .bn-plate{display:none}
  .bn-live{position:relative;z-index:1;pointer-events:auto;grid-area:live;filter:drop-shadow(0 1px 2px rgba(4,12,40,.4))}
  .bn-h,.bn-t{position:static;white-space:normal}
  .bn-h{font-size:clamp(1.45rem,7.4vw,1.85rem);line-height:1.08;letter-spacing:.01em;text-wrap:balance}
  .bn-h .nw{white-space:nowrap}
  .bn-t{font-size:clamp(.9rem,4.3vw,1.05rem);line-height:1.3;letter-spacing:.08em;margin-top:.55rem}
  /* Duckster alt crop (1200x737); its top ~33% is sky, so it tucks ~24% of its height under the text (no product is ever covered) */
  .banner-frame .bn-mplate{display:block;grid-area:img;margin:calc((100vw - 44px) * -.15) -1rem 0}
  .bn-mplate img{display:block;width:100%;height:auto}
  .bn-anim{display:none}
  .bn-badge{position:static;grid-area:badge;justify-self:end;width:min(150px,40vw);margin-top:.2rem}
  .bn-logo{position:static;grid-area:logo;justify-self:start;width:min(160px,42vw);margin-top:.2rem}
  .hero-ad .hero-copy{margin-top:1.6rem}
}

/* ===== Footer v2 (Jason, Oct 25): compact retail footer =====
   Phones: brand line, then Shop | Help side by side and Company below (2-col grid), 44px tap rows, slim signup, thin bar.
   >=900px: brand + 3 link columns on one shared top line, ~30px link rows, signup as one row, bottom bar split L/R.
   Quiet type: no enamel gradient, gleam or drop-shadow on footer headings. */
footer{padding:2.25rem 0 1rem;font-size:.875rem;line-height:1.45}
footer h2{font:600 .78rem/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 .35rem;
  background:none!important;-webkit-text-fill-color:currentColor!important;filter:none!important;animation:none!important}
.f-top{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1.25rem}
.f-brand{grid-column:1/-1}
.f-logo{display:inline-flex;min-height:44px;align-items:center}
.f-brand img{height:28px;width:auto;padding:5px 8px;border-radius:8px}
.f-brand p{margin-top:.5rem;max-width:none;color:#aab3e6}
.f-col ul{list-style:none;margin:0;padding:0}
footer .f-col ul a{min-height:44px;color:#cfd5f5;overflow-wrap:anywhere}
.f-col:first-of-type{grid-row:span 2}
.f-col:last-child{grid-column:2}
.f-notify{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.12)}
.f-notify h2{margin-bottom:.55rem}
.f-notify .nform{gap:.3rem;max-width:30rem}
.f-notify .nrow{flex-wrap:nowrap;gap:.5rem}
.f-notify .nrow input{flex:1 1 auto;min-width:0;min-height:44px;padding:.55rem .9rem;font-size:.875rem}
.f-notify .nrow .btn{min-height:44px;padding:.6rem 1.1rem;font-size:.82rem;box-shadow:none}
.f-notify .nconsent{font-size:.78rem;color:#aab3e6}
.f-notify .nmsg{min-height:0;font-size:.85rem}
.f-notify .nmsg:empty{display:none}
.f-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1.5rem;
  margin-top:1.1rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.12)}
footer .legal{margin:0;padding:0;border:0;font-size:.78rem;color:#98a1d6;text-align:left}
.legal-note{margin-left:.5rem;padding:.1rem .45rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:.7rem;white-space:nowrap}
.f-legal{display:flex;flex-wrap:wrap;gap:0 1.1rem;list-style:none;margin:0;padding:0}
.f-legal a{display:inline-flex;align-items:center;min-height:44px;font-size:.78rem;color:#cfd5f5;text-decoration:none}
footer a:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
@media (min-width:640px){.f-top{grid-template-columns:repeat(3,1fr)}.f-col:first-of-type{grid-row:auto}.f-col:last-child{grid-column:auto}}
@media (min-width:900px){
  footer{padding:2.75rem 0 1.1rem}
  .f-top{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
  .f-brand{grid-column:auto}
  .f-logo{min-height:0}
  footer .f-col ul a{min-height:0;padding:.28rem 0;display:inline-flex}
  .f-notify{display:flex;align-items:flex-start;gap:2rem;margin-top:1.75rem}
  .f-notify h2{flex:0 0 auto;margin:.85rem 0 0;width:calc((100% - 6rem) * 1.5 / 4.5)}
  .f-notify .nform{flex:1 1 auto}
  .f-legal a{min-height:0;padding:.3rem 0}
  .f-bar{margin-top:1.4rem}
}
@media (max-width:899px){.legal-note{display:table;margin:.4rem 0 0}}

/* Home "What is Jeep Ducking" (Jason, Oct 25): roundel | centered heading | roundel, like the Wix layout.
   Left roundel = off-road tire duck badge (no spin, Jason Oct 25), links to apparel; right = cruise roundel, links to cruise. Hover plays once: tire rolls, boat rocks. */
.what2-top{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"badge cruise" "head head";gap:var(--s3) var(--s3);align-items:center;justify-items:center;text-align:center}
.what2-badge{grid-area:badge;width:120px;height:120px;justify-self:end}
.what2-cruise{grid-area:cruise;justify-self:start}
.what2-cruise img{width:120px;height:120px;object-fit:contain;border-radius:50%;display:block}
.what2-head{grid-area:head;max-width:640px}
.what2-head p:last-child{margin-bottom:0}
.what2-body{max-width:760px;margin:var(--s3) auto 0}
.what2-body .feats{grid-template-columns:1fr}
.what2-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:center;margin-top:var(--s3)}
.what2-links .textlink{min-height:44px;display:inline-flex;align-items:center}
@media (min-width:900px){
  .what2-top{grid-template-columns:190px 1fr 190px;grid-template-areas:"badge head cruise";gap:var(--s4)}
  .what2-badge,.what2-cruise img{width:190px;height:190px}
  .what2-badge,.what2-cruise{justify-self:center}
  .what2-top{max-width:1000px;margin:0 auto}
}

/* Home hero: text-free silver Jeep beside the copy on tablet/desktop (Jason, Oct 25). Hidden on phones (.only-wide). */
.hero-jeep{margin:0}
.hero-jeep img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 30px 60px -30px rgba(11,21,82,.55)}
@media (min-width:641px){
  .hero-ad .wrap{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)!important;column-gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
  .hero-ad .hero-copy{grid-area:auto}
  .hero-jeep{grid-row:1/3;grid-column:2}
}
/* Hero H1 breaks as "Jeep Ducking" / "Gifts & Apparel", never after "Gifts &" (Duckster/Cole, Oct 25) */
.hero-ad h1 .gl,.hero-ad h1 .go{display:block}
@media (min-width:400px){.hero-ad h1 .go{white-space:nowrap}}
/* Gleam order (Jason, Oct 25): the banner sweep runs first (1.2s), then the hero H1 sheen (3.1s = 1.2s + 1.9s).
   Homepage only; other pages' H1s keep the 1.2s start. The phone hero-photo sweep follows the banner timing. */
.banner-frame{--gleam-delay:1.2s}
.hero-ad .hero-photo::after{animation-delay:1.2s!important}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #hero-title .gl,#hero-title .go{animation-delay:3.1s}
}
/* Pill buttons match the Shop Now pill (Jason, Oct 25): same height/padding, font sizes unchanged.
   Desktop (>=900px): 38px tall like the header pill. Phones/tablets: 44px so the tap target stays comfortable. */
.btn,.btn-xl,.card .btn,.btn-sm,.card .btn-notify{min-height:44px;padding:.55rem 1.1rem}
@media (min-width:900px){.btn,.btn-xl,.card .btn,.btn-sm,.card .btn-notify{min-height:38px;padding:.45rem 1rem}}
/* Notify rows: the email field matches its button so the row lines up at the new pill height. */
.nrow input,.nrow .btn,.f-notify .nrow input,.f-notify .nrow .btn{min-height:44px}
@media (min-width:900px){.nrow input,.nrow .btn,.f-notify .nrow input,.f-notify .nrow .btn{min-height:38px;padding-top:.45rem;padding-bottom:.45rem}}
.nrow input{height:44px;padding-top:0;padding-bottom:0}
@media (min-width:900px){.nrow input{height:38px}}
/* Blog (Oct 25): /blog/ index cards + /blog/<slug>/ prose column. Mobile first; no animation beyond the shared button hover. */
.blog-list{padding-top:0}
.post-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.post-card{display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.post-card .pc-ph{display:block;aspect-ratio:16/10;background:#f6f4ef;overflow:hidden}
.post-card .pc-ph img{width:100%;height:100%;object-fit:cover}
.pc-body{display:flex;flex-direction:column;gap:.55rem;padding:1rem 1.1rem 1.2rem;flex:1}
.pc-meta{font:600 .78rem/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.post-card h2{font-size:1.3rem;line-height:1.15}.post-card h2 a{color:inherit;text-decoration:none}.post-card h2 a:hover{color:var(--orange-t)}
.pc-ex{color:var(--muted);font-size:.95rem}
.pc-more{margin-top:auto;align-self:flex-start}
.blog-empty{background:var(--paper);border:1px dashed var(--line);border-radius:16px;padding:1.5rem 1.25rem;text-align:center;max-width:640px;margin-inline:auto}
.blog-empty p{color:var(--muted);margin-top:.5rem}.blog-empty .acts{display:flex;justify-content:center;margin-top:1.2rem}
.post-prose-w{max-width:760px}
.post-hd .eyebrow a{color:inherit;text-decoration:none}.post-hd .eyebrow a:hover{text-decoration:underline}
.post-title{font-size:clamp(1.9rem,6vw,3rem);overflow-wrap:anywhere}
.post-hd .pc-meta{margin-top:.7rem}
.post-cover{margin:0 0 var(--s3);border-radius:var(--r);overflow:hidden;background:#f6f4ef}
.post-cover img{width:100%}
.post-prose{font-size:1.05rem;line-height:1.75;overflow-wrap:break-word}
.post-prose>*+*{margin-top:1em}
.post-prose h2{font-size:1.6rem;margin-top:1.8em}.post-prose h3{font-size:1.25rem;margin-top:1.5em}
.post-prose ul,.post-prose ol{padding-left:1.3em}.post-prose li+li{margin-top:.35em}
.post-prose blockquote{border-left:4px solid var(--orange-d);padding:.2em 0 .2em 1em;color:var(--muted)}
.post-cta{margin:var(--s4) 0 var(--s5);padding:1.5rem 1.25rem;border-radius:var(--r);background:linear-gradient(180deg,var(--navy) 0,var(--navy-d) 100%);color:#fff}
.post-cta h2{color:#fff;font-size:1.6rem}.post-cta p{color:#cfd5f5;margin-top:.5rem}
.post-cta .acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.post-cta .btn-ghost{border-color:#fff;color:#fff}.post-cta .btn-ghost:hover,.post-cta .btn-ghost:focus-visible{background-color:#fff;color:var(--navy)}
.guide-hook{font-weight:600}
@media (min-width:640px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.post-cta{padding:2rem}}
@media (min-width:1100px){.post-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (forced-colors:active){.post-card,.post-cta{border:1px solid CanvasText}}
.post-fig{margin:1.6em 0}.post-fig img{width:100%;border-radius:12px;background:#f6f4ef}
.post-fig figcaption{margin-top:.5rem;font-size:.9rem;line-height:1.5;color:var(--muted)}
.post-card .pc-ph-none{background:linear-gradient(135deg,var(--navy) 0,var(--navy-d) 100%)}
.preview-bar{background:var(--yellow);color:var(--ink);font:600 .85rem/1.35 Inter,"Inter Fallback",sans-serif;padding:.55rem 0;text-align:center}
.post-fig img{width:auto;max-height:560px;margin-inline:auto;object-fit:contain}

/* Homepage roundel links (Jason, Oct 25): one-shot hover effects, never looping */
.what2 .rl{display:block;border-radius:50%;position:relative;transition:transform .35s var(--ease),filter .35s var(--ease);-webkit-tap-highlight-color:transparent}
.what2 .rl img{width:100%;height:100%;display:block;border-radius:50%}
.what2-cruise.rl{width:120px;height:120px}
.what2 .rl::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--orange);opacity:0;transform:scale(.92);transition:opacity .3s var(--ease),transform .35s var(--ease);pointer-events:none}
.what2 .rl:focus-visible{outline:3px solid var(--orange);outline-offset:6px}
@media (min-width:900px){.what2-cruise.rl{width:190px;height:190px}}
@media (hover:hover){
  .what2 .rl:hover{transform:translateY(-6px);filter:drop-shadow(0 14px 18px rgba(11,21,82,.28))}
  .what2 .rl:hover::after{opacity:1;transform:scale(1)}
  .what2 .rl-tire:hover img{animation:rl-roll .9s cubic-bezier(.3,.7,.2,1) 1}
  .what2 .rl-boat:hover img{animation:rl-rock 1.1s ease-in-out 1}
}
.what2 .rl:active{transform:scale(.96)}
@keyframes rl-roll{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes rl-rock{0%,100%{transform:rotate(0) translateY(0)}20%{transform:rotate(-8deg) translateY(-3px)}45%{transform:rotate(6deg) translateY(1px)}70%{transform:rotate(-3deg) translateY(-1px)}88%{transform:rotate(1deg)}}
@media (prefers-reduced-motion:reduce){.what2 .rl,.what2 .rl::after{transition:none}.what2 .rl:hover{transform:none}.what2 .rl img{animation:none!important}}
/* nav dropdowns for Shop and About (Jason, Oct 25: like the Wix menu). Phone: tap the caret to expand in place.
   Desktop: opens on hover, keyboard focus, or caret click; one-time fade, no looping. */
.nav .has-sub{display:grid;grid-template-columns:1fr auto;align-items:center}
.nav .sub-btn{width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:10px;background:none;color:var(--navy);cursor:pointer}
.nav .sub-btn svg{transition:transform .25s var(--ease)}
.nav .sub-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.nav .sub-btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.nav .sub{grid-column:1/-1;list-style:none;display:none;margin:0 0 .6rem;padding:0 0 0 .9rem;border-left:3px solid rgba(240,96,10,.35)}
.nav .sub.open{display:block}
.nav .sub li{border:0}
.nav .sub a{min-height:44px;font:500 .98rem/1.2 Inter,"Inter Fallback",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--ink)}
.nav .sub a[aria-current=page]{color:var(--navy);font-weight:700}
.nav a.in-sec{color:var(--navy)}
.no-js .nav .sub{display:block}.no-js .nav .sub-btn{display:none}
@media (min-width:900px){
  .nav .has-sub{display:flex;position:relative}
  .nav .has-sub>a{padding-right:.2rem}
  .nav .sub-btn{width:22px;height:44px;margin-right:.35rem}
  .nav .sub{display:block;position:absolute;top:calc(100% + 4px);left:0;min-width:230px;margin:0;padding:.45rem;border:1px solid var(--line);border-radius:14px;background:var(--paper);
    box-shadow:0 18px 36px -14px rgba(11,21,82,.35);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s;z-index:60}
  .nav .sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
  .nav .has-sub:hover>.sub,.nav .has-sub:focus-within>.sub,.nav .sub.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s}
  .nav .has-sub:hover>.sub-btn svg{transform:rotate(180deg)}
  .nav .sub a{display:flex;min-height:40px;padding:0 .8rem;border-radius:9px;font-size:.92rem;white-space:nowrap}
  .nav .sub a:hover,.nav .sub a:focus-visible{background:rgba(240,96,10,.1);color:var(--orange-t)}
  .no-js .nav .sub{display:block}
}
@media (prefers-reduced-motion:reduce){.nav .sub,.nav .sub-btn svg{transition:none!important}.nav .sub{transform:none!important}}
@media (forced-colors:active){.nav .sub{border:1px solid CanvasText}}
/* Duck Mounts header: transparent art (black "TWIST!" lettering) on a light band */
.dm-hero{background:#fff;border-block:1px solid var(--line);padding:var(--s3) 0}
.dm-hero img{display:block;width:100%;height:auto;max-width:1100px;margin:0 auto}
.card .ph .ph-hold{display:grid;place-items:center;width:100%;aspect-ratio:1;background:repeating-linear-gradient(135deg,#f3eee3 0 12px,#ece5d6 12px 24px);color:var(--muted);font-weight:600;font-size:.9rem}
.card h3 a{color:inherit}
.dm-cta{text-align:center;display:grid;gap:var(--s2);justify-items:center}