/** Shopify CDN: Minification failed

Line 1210:1 Expected "}" to go with "{"

**/

:root{
  --bg:#FBF9F5;--bg2:#F3EFE7;--card:#FFFFFF;--txt:#1B1813;--mut:rgba(27,24,19,.6);
  --signal:#FF5A1F;--ember:#FF8A5C;--deep:#E84E12;--line:rgba(27,24,19,.09);
  --logo:'Baloo 2',cursive;--disp:'Sora',sans-serif;--body:'Manrope',sans-serif;
  --mono:'JetBrains Mono',monospace;--ease:cubic-bezier(.22,1,.3,1);
  --sh:0 24px 60px -28px rgba(27,24,19,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg);color:var(--txt)}
body{font-family:var(--body);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--signal);color:#fff}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit}
button{cursor:pointer;border:none;background:none;color:inherit}

.h{font-family:var(--disp);font-weight:700;letter-spacing:-.025em;line-height:1.07}
.h1{font-size:clamp(2.6rem,6.4vw,5.2rem);letter-spacing:-.035em}
.h2{font-size:clamp(1.8rem,4vw,3.2rem)}
.h3{font-size:clamp(1.3rem,2.3vw,1.8rem)}
.mono{font-family:var(--mono);font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.sub{font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.7;color:var(--mut);max-width:36em}
.acc{color:var(--signal)}
.eyebrow{color:var(--signal);display:inline-block;margin-bottom:1rem}
.wrap{width:min(1220px,92vw);margin:0 auto}
.secpad{padding:clamp(4.5rem,11vh,8rem) 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-weight:700;font-size:.95rem;
  padding:1rem 2rem;border-radius:999px;transition:transform .25s var(--ease),box-shadow .25s var(--ease);white-space:nowrap;font-family:var(--body)}
.btn-p{background:var(--signal);color:#fff;box-shadow:0 12px 30px -12px rgba(255,90,31,.55)}
.btn-p:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 44px -12px rgba(255,90,31,.6);background:var(--deep)}
.btn-p:active{transform:translateY(1px) scaleY(.97)}
.btn-g{border:1.5px solid rgba(27,24,19,.18);color:var(--txt)}
.btn-g:hover{border-color:var(--signal);color:var(--signal)}
.btn-light{background:#fff;color:var(--txt);box-shadow:var(--sh)}
.btn .d{width:.45em;height:.45em;border-radius:50%;background:currentColor;flex:none}

/* progress bar */
#pbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:1200}
#pbar b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--signal),var(--ember))}

/* ---------- NAV : brand logo tile like the real stepprs mark ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;
  padding:.7rem clamp(1rem,4vw,2.6rem);background:rgba(251,249,245,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)}
.logo{display:inline-flex;align-items:center;background:var(--signal);border-radius:12px;padding:.42rem .95rem .5rem;
  box-shadow:0 8px 22px -8px rgba(255,90,31,.5);transition:transform .25s var(--ease)}
.logo:hover{transform:translateY(-1px) scale(1.02)}
.logo b{font-family:var(--logo);font-weight:700;font-size:1.28rem;line-height:1;color:#fff;letter-spacing:-.01em}
.logo sup{color:#fff;font-size:.5rem;margin:-.5em 0 0 .18em;font-family:var(--body)}
.nav-links{display:flex;gap:1.6rem;align-items:center}
.nav-links a{font-family:var(--body);font-weight:600;font-size:.86rem;color:var(--mut);transition:.2s;position:relative;padding:.35rem 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--signal);border-radius:2px;transition:right .35s var(--ease)}
.nav-links a:hover{color:var(--txt)}
.nav-links a:hover::after{right:0}
.nav-links .btn-p{padding:.62rem 1.3rem;font-size:.84rem}
.bagn{min-width:19px;height:19px;border-radius:999px;background:var(--txt);color:#fff;font-family:var(--mono);
  font-size:.6rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 .3em;margin-left:.4rem}
@media(max-width:820px){.nav-links{gap:.9rem}.nav-links a{font-size:.76rem}.nav-links a.hide-m{display:none}}

/* ---------- HERO : light editorial, framed video ---------- */
.hero{position:relative;padding:clamp(7.5rem,15vh,10rem) 0 0;background:
  radial-gradient(60vw 40vh at 85% 0%,rgba(255,90,31,.1),transparent 62%),var(--bg);overflow:hidden}
.hero-in{text-align:center;position:relative;z-index:2}
.hero-in>*{animation:up 1s var(--ease) both}
.hero-in>*:nth-child(2){animation-delay:.12s}.hero-in>*:nth-child(3){animation-delay:.24s}.hero-in>*:nth-child(4){animation-delay:.36s}
@keyframes up{from{opacity:0;transform:translateY(28px)}}
.hero-in .h1{max-width:13em;margin:0 auto}
.hero-in .sub{margin:1.2rem auto 2rem}
.hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center}
.hero-frame{position:relative;width:min(1080px,92vw);margin:3.2rem auto 0;border-radius:28px 28px 0 0;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(27,24,19,.35);aspect-ratio:1280/592;background:var(--bg2);will-change:transform}
.hero-frame img,.hero-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-frame video{opacity:1;z-index:1}
.hero-frame img{z-index:0}
.hero-cue{text-align:center;padding:1.1rem 0 0;color:var(--mut);animation:cue 2s var(--ease) infinite;position:relative}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}


/* ===== shock absorption diagram ===== */
#shock{background:var(--bg2);position:relative}
#shock .wrap{position:relative;z-index:1}
.shock-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:2.4rem}
.shock-stage{position:relative;width:100%;aspect-ratio:1280/592;max-width:600px;margin:0 auto;border-radius:24px;overflow:hidden;box-shadow:var(--sh);background:#F26B3A}
.shock-vid{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease)}
.shock-vid.on{opacity:1}
.shock-cap{position:absolute;left:1rem;bottom:1rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(27,24,19,.5);backdrop-filter:blur(8px);border-radius:999px;padding:.45rem .9rem}
.shock-copy .mono{color:var(--signal)}
.shock-copy h2{margin:.5rem 0 .8rem}
.shock-copy p{color:var(--mut);max-width:30em;margin-bottom:1.4rem}
.shock-list{list-style:none;display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.8rem}
.shock-list li{display:flex;gap:.8rem;align-items:flex-start;color:var(--mut)}
.shock-list li b{color:var(--txt)}
.shock-list .n{width:26px;height:26px;flex:none;border-radius:8px;background:var(--signal);color:#fff;
  font-family:var(--disp);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;margin-top:.1rem}
@media(max-width:880px){.shock-grid{grid-template-columns:1fr}.shock-stage{max-width:420px}}

/* ===== premium hero decor ===== */
.hero{isolation:isolate}
.hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(27,24,19,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(27,24,19,.045) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 78%);
  will-change:transform}
/* glitter spray canvas */
#glitter{position:fixed;inset:0;z-index:900;pointer-events:none;width:100vw;height:100vh}
/* video stage glow ring */
.hero-stage{position:relative;width:min(1080px,92vw);margin:3.2rem auto 0}
.ring-glow{position:absolute;inset:-2px;border-radius:30px 30px 0 0;z-index:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,90,31,.55),rgba(255,138,92,.15) 40%,transparent 65%);
  filter:blur(22px);opacity:.85;animation:ringpulse 5s ease-in-out infinite}
@keyframes ringpulse{0%,100%{opacity:.55}50%{opacity:.95}}
.hero-stage .hero-frame{margin:0;position:relative;z-index:1}
/* moving sheen sweep across the frame */
.frame-sheen{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.16) 48%,rgba(255,255,255,.04) 55%,transparent 62%);
  transform:translateX(-60%);animation:sheen 6.5s var(--ease) infinite}
@keyframes sheen{0%{transform:translateX(-60%)}55%,100%{transform:translateX(60%)}}


/* marquee */
.marquee{background:var(--signal);color:#fff;overflow:hidden;padding:.8rem 0}
.marquee .in{display:flex;gap:3rem;white-space:nowrap;width:max-content;animation:mq 26s linear infinite;
  font-weight:700;font-size:.95rem}
.marquee .in span::after{content:"●";color:rgba(255,255,255,.55);margin-left:3rem;font-size:.5em;vertical-align:.3em}
@keyframes mq{to{transform:translateX(-50%)}}

/* manifesto word scrub — dark words on cream */
#mani{background:var(--bg2);position:relative;z-index:1;isolation:isolate}
#mani .stage{min-height:100svh;display:flex;align-items:center;background:var(--bg2)}
#mani p{font-family:var(--disp);font-weight:700;letter-spacing:-.025em;line-height:1.22;
  font-size:clamp(1.6rem,4.2vw,3.4rem);max-width:24em}
#mani .w{opacity:.14;display:inline-block}
#mani .w.hot{color:var(--signal)}
#mani .count{margin-top:2.2rem;color:var(--signal)}
#mani .count b{font-variant-numeric:tabular-nums;font-weight:700}

/* zoom scene */
#zoom{background:var(--bg)}
#zoom .stage{height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
#zoom .frame{width:min(520px,72vw);aspect-ratio:4/4.2;border-radius:30px;overflow:hidden;position:relative;
  box-shadow:var(--sh);will-change:transform;background:#161412}
#zoom .frame img{width:100%;height:100%;object-fit:cover}
#zoom .frame .zoom-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;z-index:1}
#zoom .zhead{position:absolute;top:clamp(4.6rem,9vh,6rem);left:0;right:0;text-align:center;z-index:3;pointer-events:none}
#zoom .anno{position:absolute;z-index:3;display:flex;align-items:center;gap:.7rem;opacity:0;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:999px;
  padding:.6rem 1.1rem;font-family:var(--body);font-weight:700;font-size:.8rem;color:var(--txt);white-space:nowrap;
  box-shadow:var(--sh);will-change:transform,opacity}
#zoom .anno i{width:8px;height:8px;border-radius:50%;background:var(--signal);flex:none}
#zoom .a1{top:26%;left:8%}#zoom .a2{top:48%;right:7%}#zoom .a3{bottom:20%;left:14%}
@media(max-width:700px){#zoom .a1{left:4%}#zoom .a2{right:4%}#zoom .a3{left:6%}}

/* sticky showcase */
#show{background:var(--bg)}
#show .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);width:min(1220px,92vw);margin:0 auto}
#show .sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center}
#show .stack{position:relative;width:100%;aspect-ratio:4/4.3;border-radius:28px;overflow:hidden;box-shadow:var(--sh);background:#161412}
#show .stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
#show .stack img.on{opacity:1;transform:scale(1)}
#show .stack .lbl{position:absolute;left:1.2rem;bottom:1.1rem;z-index:2;font-family:var(--body);font-weight:700;font-size:.8rem;
  background:rgba(255,255,255,.92);border-radius:999px;padding:.5rem 1rem;box-shadow:var(--sh)}
#show .blocks{padding:0}
#show .blk{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:2rem 0}
#show .blk .mono{color:var(--signal)}
#show .blk h3{margin:.7rem 0}
#show .blk p{color:var(--mut);max-width:30em}
@media(max-width:880px){
  #show .grid{grid-template-columns:1fr}
  #show .sticky{top:58px;height:50svh;z-index:2;background:var(--bg)}
  #show .blk{min-height:80svh}}


/* horizontal colorways */
#colors{background:var(--bg2);overflow:hidden}
#colors .stage{height:100svh;display:flex;align-items:center;overflow:hidden}
#colors .track{display:flex;gap:clamp(1rem,3vw,2.2rem);padding:0 clamp(1.2rem,5vw,4rem);will-change:transform}
.cpanel{flex:0 0 min(78vw,540px);border-radius:28px;overflow:hidden;position:relative;aspect-ratio:4/4.7;
  background:#161412;box-shadow:var(--sh)}
.cpanel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.cpanel:hover img{transform:scale(1.04)}
.cpanel::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,12,10,.78),transparent 46%)}
.cpanel .cap{position:absolute;left:1.7rem;right:1.7rem;bottom:1.6rem;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;color:#fff}
.cpanel .cap h3{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.3rem,2.5vw,1.9rem)}
.cpanel .cap .mono{color:var(--ember)}
.cpanel .cap .pr{font-weight:700;font-size:1.1rem}
.cpanel.intro{background:none;box-shadow:none;aspect-ratio:auto;display:flex;align-items:center}
.cpanel.intro::after{display:none}
.cpanel.intro .h2,.cpanel.intro .sub,.cpanel.intro .mono{color:inherit}

/* stats — orange band, white numerals */
#stats{background:var(--signal);color:#fff;position:relative;overflow:hidden}
#stats::before{content:"";position:absolute;inset:0;background:radial-gradient(55vw 55vh at 50% 50%,rgba(255,255,255,.16),transparent 70%);animation:breathe 4.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}
#stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;position:relative}
#stats .st b{display:block;font-family:var(--disp);font-size:clamp(2.1rem,5vw,3.9rem);font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
#stats .st span{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;opacity:.85}
@media(max-width:820px){#stats .grid{grid-template-columns:repeat(2,1fr)}}

/* reveals */
html.anim .rv{opacity:0;transform:translateY(32px)}
html.anim .rv.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}

/* image frames */
.imgbox{position:relative;overflow:hidden;background:
  radial-gradient(65% 75% at 62% 34%,rgba(255,90,31,.14),transparent 72%),linear-gradient(160deg,#f0ece3,#e7e2d7)}
.imgbox::before{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(27,24,19,.4)}
.imgbox img{position:relative;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.imgbox:hover img{transform:scale(1.05)}

/* reviews : big feature layout */
.rev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-top:.4rem}
.rev-score{display:flex;align-items:center;gap:1rem;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1rem 1.4rem;box-shadow:0 14px 40px -26px rgba(27,24,19,.2)}
.rev-score b{font-family:var(--disp);font-size:2.2rem;font-weight:700;line-height:1}
.rev-score .st-row{display:flex;flex-direction:column;gap:.3rem}
.rev-score .stars i{width:9px;height:9px}
.rev-score span{font-size:.8rem;color:var(--mut)}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.quote{background:var(--card);border:1px solid var(--line);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 18px 50px -30px rgba(27,24,19,.3);transition:transform .5s var(--ease),box-shadow .5s}
.quote:hover{transform:translateY(-7px);box-shadow:var(--sh)}
.quote .ph{width:100%;aspect-ratio:16/12;position:relative;background:var(--bg2);overflow:hidden}
.quote .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.quote:hover .ph img{transform:scale(1.05)}
.quote .ph .badge{position:absolute;top:1rem;left:1rem;background:rgba(255,255,255,.92);border-radius:999px;padding:.4rem .85rem;
  font-family:var(--body);font-weight:700;font-size:.72rem;box-shadow:var(--sh);display:flex;align-items:center;gap:.4rem}
.quote .ph .badge .stars i{width:6px;height:6px}
.quote .bd{padding:1.6rem 1.7rem 1.7rem;display:flex;flex-direction:column;flex:1}
.quote q{quotes:none;display:block;font-size:1.06rem;line-height:1.6;font-weight:500;margin-bottom:1.3rem}
.quote .who{display:flex;align-items:center;gap:.8rem;margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line)}
.quote .who .nm{display:flex;flex-direction:column;line-height:1.25}
.quote .who .nm b{font-family:var(--disp);font-weight:700;font-size:.98rem}
.quote .who .nm span{font-size:.8rem;color:var(--mut)}
.quote .who .vf{margin-left:auto;font-size:.68rem;font-weight:700;color:var(--signal);display:flex;align-items:center;gap:.3rem}
@media(max-width:900px){.qgrid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}}

/* shop cards */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.6rem}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 14px 40px -26px rgba(27,24,19,.22);transition:transform .5s var(--ease),box-shadow .5s}
.pcard:hover{transform:translateY(-7px);box-shadow:var(--sh)}
.pcard .ph{aspect-ratio:4/4.3;position:relative}
.pcard .tag{position:absolute;top:1rem;left:1rem;z-index:2;background:rgba(255,255,255,.92);border-radius:999px;
  padding:.42rem .9rem;font-family:var(--body);font-weight:700;font-size:.72rem;box-shadow:var(--sh)}
.pcard .tag.hot{background:var(--signal);color:#fff}
.pcard .body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
.pcard .nm{font-family:var(--disp);font-weight:700;font-size:1.1rem;letter-spacing:-.015em}
.pcard .ds{font-size:.86rem;color:var(--mut)}
.pcard .row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:1rem}
.pcard .pr{font-weight:700}
.pcard .pr s{color:var(--mut);font-weight:400;font-size:.82em;margin-left:.4em}
.pcard .go{font-weight:700;font-size:.82rem;color:var(--signal)}
@media(max-width:960px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.pgrid{grid-template-columns:1fr}}

/* pdp */
.pdp{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,4vw,4rem);align-items:start;margin-top:2.4rem}
.gal-main{border-radius:26px;aspect-ratio:4/4.1;box-shadow:var(--sh)}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;margin-top:.7rem}
.thumb{border-radius:14px;overflow:hidden;border:2px solid transparent;aspect-ratio:1;cursor:pointer;transition:border-color .25s,transform .25s;box-shadow:0 8px 20px -12px rgba(27,24,19,.3)}
.thumb:hover{transform:translateY(-3px)}
.thumb.on{border-color:var(--signal)}
.rating{display:flex;align-items:center;gap:.7rem;margin:.8rem 0 .9rem}
.rating .mono{color:var(--mut)}
.pprice{font-family:var(--disp);font-weight:700;font-size:1.55rem;letter-spacing:-.02em}
.opt{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin:1.8rem 0 .75rem;display:flex;justify-content:space-between}
.opt b{color:var(--signal);font-weight:500}
.swatches{display:flex;gap:.85rem}
.swatch{width:46px;height:46px;border-radius:50%;border:2.5px solid rgba(27,24,19,.12);cursor:pointer;transition:transform .25s,border-color .25s,box-shadow .25s}
.swatch:hover{transform:scale(1.09)}
.swatch.on{border-color:var(--signal);transform:scale(1.12);box-shadow:0 0 0 4px rgba(255,90,31,.15)}
.sizes{display:flex;gap:.5rem;flex-wrap:wrap}
.size{font-family:var(--body);font-weight:600;font-size:.82rem;padding:.62rem 1rem;border:1.5px solid rgba(27,24,19,.14);border-radius:12px;transition:all .2s;background:#fff}
.size:hover{border-color:var(--signal);color:var(--signal)}
.size.on{background:var(--signal);border-color:var(--signal);color:#fff}
.qty{display:inline-flex;align-items:center;border:1.5px solid rgba(27,24,19,.14);border-radius:999px;background:#fff}
.qty button{width:44px;height:44px;font-size:1.15rem;color:var(--mut)}
.qty button:hover{color:var(--signal)}
.qty span{min-width:2.2em;text-align:center;font-weight:700}
.buy-row{margin-top:2rem}
.buy-row .btn-p{width:100%;padding:1.15rem;font-size:1rem}
.pfine{margin-top:1rem;color:var(--mut)}
details.spec{border-bottom:1px solid var(--line)}
details.spec:first-of-type{border-top:1px solid var(--line);margin-top:2.2rem}
details.spec summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:1.2rem 0;
  font-family:var(--disp);font-weight:600;font-size:.98rem;cursor:pointer}
details.spec summary::-webkit-details-marker{display:none}
details.spec summary::after{content:"+";color:var(--signal);font-size:1.3rem;font-weight:400;transition:transform .3s var(--ease)}
details.spec[open] summary::after{transform:rotate(45deg)}
details.spec p{padding:0 0 1.3rem;color:var(--mut);font-size:.93rem;max-width:42em}
@media(max-width:900px){.pdp{grid-template-columns:1fr}}

/* checkout */
.co{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,4vw,4.2rem);align-items:start;margin-top:2.4rem}
.fg{margin-bottom:1.9rem}
.fg h3{font-family:var(--disp);font-weight:600;font-size:1.05rem;margin-bottom:.95rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.frow.one{grid-template-columns:1fr}
.field{margin-bottom:.7rem}
.field input,.field select{width:100%;background:#fff;border:1.5px solid rgba(27,24,19,.12);border-radius:14px;color:var(--txt);
  padding:1rem 1.1rem;font-size:.95rem;outline:none;transition:border-color .25s,box-shadow .25s}
.field input:focus,.field select:focus{border-color:var(--signal);box-shadow:0 0 0 4px rgba(255,90,31,.13)}
.field input::placeholder{color:rgba(27,24,19,.38)}
.field.err input{border-color:#D9351A}
.pay-tabs{display:flex;gap:.6rem;margin-bottom:1rem}
.pay-tab{flex:1;border:1.5px solid rgba(27,24,19,.12);border-radius:14px;padding:.9rem;text-align:center;
  font-weight:700;font-size:.78rem;color:var(--mut);transition:all .25s;background:#fff}
.pay-tab.on{border-color:var(--signal);color:var(--signal);box-shadow:0 0 0 4px rgba(255,90,31,.1)}
.summary{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:1.8rem;position:sticky;top:88px;box-shadow:var(--sh)}
.sum-item{display:flex;gap:1rem;align-items:center;padding-bottom:1.2rem;border-bottom:1px solid var(--line);margin-bottom:1.2rem}
.sum-item .im{width:76px;height:92px;border-radius:16px;overflow:hidden;flex:none}
.sum-item .inf{flex:1}
.sum-item .inf b{font-family:var(--disp);font-weight:700;display:block}
.sum-item .inf span{font-size:.8rem;color:var(--mut);display:block;margin-top:.15rem}
.sum-item .pr{font-weight:700}
.sum-qty{display:inline-flex;align-items:center;gap:.6rem;margin-top:.5rem}
.sum-qty button{width:27px;height:27px;border:1.5px solid rgba(27,24,19,.15);border-radius:9px;line-height:1;color:var(--mut);background:#fff}
.sum-qty button:hover{color:var(--signal);border-color:var(--signal)}
.promo{display:flex;gap:.5rem;margin:1rem 0 1.2rem}
.promo input{flex:1;background:var(--bg2);border:1.5px solid rgba(27,24,19,.1);border-radius:12px;color:var(--txt);padding:.72rem 1rem;font-size:.85rem;outline:none}
.promo button{border:1.5px solid rgba(27,24,19,.16);border-radius:12px;padding:.72rem 1.05rem;font-size:.8rem;font-weight:700;background:#fff}
.promo button:hover{border-color:var(--signal);color:var(--signal)}
.trow{display:flex;justify-content:space-between;font-size:.92rem;color:var(--mut);margin-bottom:.5rem}
.trow.total{color:var(--txt);font-weight:700;font-size:1.15rem;border-top:1px solid var(--line);padding-top:1rem;margin-top:1rem}
.trow .free{color:var(--signal);font-weight:700}
.place{width:100%;margin-top:1.3rem;padding:1.15rem;font-size:1rem}
.secure{text-align:center;margin-top:.85rem;color:var(--mut)}
@media(max-width:900px){.co{grid-template-columns:1fr}.summary{position:static;order:-1}}
#success{position:fixed;inset:0;z-index:4000;background:rgba(27,24,19,.55);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:1.4rem}
#success.show{display:flex}
.suc{background:#fff;border-radius:28px;padding:3rem;max-width:460px;text-align:center;animation:pop .6s var(--ease);box-shadow:0 50px 120px -30px rgba(27,24,19,.5)}
@keyframes pop{from{transform:translateY(26px) scale(.95);opacity:0}}
.suc .ok{width:76px;height:76px;border-radius:50%;background:var(--signal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 1.4rem;animation:ring 1.6s var(--ease) infinite alternate}
@keyframes ring{from{box-shadow:0 0 0 0 rgba(255,90,31,.45)}to{box-shadow:0 0 0 24px rgba(255,90,31,0)}}
.suc p{color:var(--mut);margin:.7rem 0 1.6rem}

/* ---------- FOOTER : compact, real footer ---------- */
footer{background:#1B1813;color:#F5F3EF;margin-top:2rem}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem;width:min(1220px,92vw);margin:0 auto;padding:3.6rem 0 2.6rem}
.fgrid h5{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-bottom:.9rem}
.fgrid ul{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.fgrid ul a{opacity:.8;font-size:.9rem}
.fgrid ul a:hover{opacity:1;color:var(--ember)}
.fbrand .logo{margin-bottom:1rem}
.fbrand p{opacity:.65;font-size:.88rem;max-width:24em}
.news-form{display:flex;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.28rem;max-width:330px;margin-top:1.1rem}
.news-form input{flex:1;background:none;border:none;outline:none;color:#F5F3EF;padding:.5rem 1rem;font-size:.88rem}
.news-form input::placeholder{color:rgba(245,243,239,.45)}
.news-form button{background:var(--signal);color:#fff;border-radius:999px;padding:.5rem 1.05rem;font-weight:700;font-size:.8rem}
.flegal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;width:min(1220px,92vw);margin:0 auto;
  padding:1.2rem 0 1.4rem;border-top:1px solid rgba(255,255,255,.1);font-size:.78rem;opacity:.55}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}

/* exact brand logo */
.logo{background:none;box-shadow:none;padding:0;border-radius:14px;overflow:hidden}
.logo img{height:44px;display:block;border-radius:12px;box-shadow:0 8px 22px -8px rgba(255,90,31,.45);transition:transform .3s var(--ease)}
.logo:hover img{transform:translateY(-1px) scale(1.03)}
.flogo img{height:30px;margin-bottom:1rem}
/* rolling menu links */
.nav-links a.rl{overflow:hidden;display:inline-block}
.nav-links a.rl i{display:block;font-style:normal;transition:transform .38s var(--ease)}
.nav-links a.rl i::after{content:attr(data-t);display:block;color:var(--signal)}
.nav-links a.rl:hover i{transform:translateY(-100%)}
.nav-links a.rl::after{display:none}
/* hero upgrade: floating blobs + word reveal + tilt */
.hero .blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}
.hero .b1{width:34vw;height:34vw;background:rgba(255,90,31,.16);top:-8vw;right:-8vw;animation:drift1 11s ease-in-out infinite}
.hero .b2{width:26vw;height:26vw;background:rgba(255,138,92,.14);bottom:6vh;left:-9vw;animation:drift2 13s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,4vh) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,-4vh) scale(1.1)}}
.hero-in .h1 .wd{display:inline-block;overflow:hidden;vertical-align:top}
.hero-in .h1 .wd i{display:inline-block;font-style:normal;transform:translateY(112%);animation:wrise 1s var(--ease) forwards}
@keyframes wrise{to{transform:translateY(0)}}
.hero-frame{transition:box-shadow .4s}
.hero-frame:hover{box-shadow:0 50px 110px -30px rgba(27,24,19,.42)}
.hero-badge{position:absolute;z-index:3;background:rgba(255,255,255,.94);border-radius:999px;box-shadow:var(--sh);
  padding:.6rem 1.1rem;font-weight:700;font-size:.8rem;display:flex;align-items:center;gap:.5rem;animation:bfloat 5s ease-in-out infinite}
.hero-badge i{width:8px;height:8px;border-radius:50%;background:var(--signal)}
.hb1{top:14%;left:6%}.hb2{top:26%;right:5%;animation-delay:1.2s}.hb3{bottom:12%;left:10%;animation-delay:2.2s}
@keyframes bfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(max-width:760px){.hero-badge{display:none}}
/* zoom fix: wide frame, capped scale */
#zoom .frame{width:min(860px,92vw);aspect-ratio:16/9.2;border-radius:26px}
/* showcase: full product always visible */
#show .stack{background:#141210}
#show .stack img{object-fit:contain}
/* steps */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.6rem}
.stp{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 14px 40px -26px rgba(27,24,19,.22);transition:transform .5s var(--ease),box-shadow .5s}
.stp:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.stp .ph{aspect-ratio:4/3;position:relative}
.stp .bd{padding:1.3rem 1.4rem 1.5rem}
.stp .num{font-family:var(--disp);font-weight:700;color:var(--signal);font-size:.85rem;letter-spacing:.06em}
.stp h4{font-family:var(--disp);font-weight:700;font-size:1.12rem;margin:.3rem 0 .3rem}
.stp p{font-size:.88rem;color:var(--mut)}
@media(max-width:860px){.steps3{grid-template-columns:1fr}}
/* split feature */
.splitf{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center;margin-top:2.4rem}
.splitf .ph{border-radius:26px;overflow:hidden;box-shadow:var(--sh);aspect-ratio:4/4.6}
.splitf ul{list-style:none;margin-top:1.4rem;display:flex;flex-direction:column;gap:.85rem}
.splitf li{display:flex;gap:.8rem;align-items:flex-start;color:var(--mut)}
.splitf li b{color:var(--txt)}
.splitf li .tick{width:22px;height:22px;flex:none;border-radius:50%;background:rgba(255,90,31,.12);color:var(--signal);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;margin-top:.15rem}
@media(max-width:880px){.splitf{grid-template-columns:1fr}}
/* compare table */
.cmp{margin-top:2.4rem;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--card);box-shadow:0 14px 40px -26px rgba(27,24,19,.2)}
.cmp table{width:100%;border-collapse:collapse}
.cmp th,.cmp td{padding:1.05rem 1.3rem;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem}
.cmp th{font-family:var(--disp);font-weight:700}
.cmp th:nth-child(2){color:var(--signal)}
.cmp td:nth-child(2){font-weight:700}
.cmp tr:last-child td{border-bottom:none}
.cmp .no{color:rgba(27,24,19,.35)}
/* wide banner */
.bannerw{margin-top:2.6rem;border-radius:26px;overflow:hidden;box-shadow:var(--sh);aspect-ratio:16/6.4}
/* video band */
.vband{margin-top:2.6rem;border-radius:26px;overflow:hidden;box-shadow:var(--sh);position:relative;aspect-ratio:16/7.5;background:#141210}
.vband video,.vband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vband .cap{position:absolute;left:1.8rem;bottom:1.6rem;z-index:2;color:#fff}
.vband::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,8,6,.55),transparent 45%)}
/* faq */
.faq{max-width:820px;margin:2.2rem auto 0}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}html.anim .rv{opacity:1;transform:none}}

.nav-links a.rl{display:inline-flex;height:1.4em;overflow:hidden;padding:0;align-items:flex-start;font-weight:700;font-size:.9rem;color:var(--txt)}
.nav-links a.rl i{display:block;line-height:1.4em;transition:transform .38s var(--ease)}
.nav-links a.rl i::after{content:attr(data-t);display:block;color:var(--signal);line-height:1.4em}
.nav-links a.rl:hover i,.nav-links .dd:hover>a.rl i{transform:translateY(-100%)}
.nav-links a.rl.on i,.nav-links a.rl.on i::after{color:var(--signal)}
.dd{position:relative;display:inline-flex;align-items:center;gap:.4rem}
.dd .car{width:7px;height:7px;border-right:2px solid var(--txt);border-bottom:2px solid var(--txt);transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease),border-color .3s}
.dd:hover .car{transform:rotate(225deg) translateY(1px);border-color:var(--signal)}
.ddp{position:absolute;top:calc(100% + 1rem);left:50%;transform:translate(-50%,10px);min-width:290px;background:#fff;
  border-radius:20px;box-shadow:0 30px 70px -20px rgba(27,24,19,.3);padding:.65rem;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:100}
.ddp::before{content:"";position:absolute;top:-1rem;left:0;right:0;height:1rem}
.dd:hover .ddp{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.ddp a{display:flex;align-items:center;gap:.9rem;padding:.7rem .8rem;border-radius:14px;transition:background .25s}
.ddp a:hover{background:var(--bg2)}
.ddp .dth{width:52px;height:52px;border-radius:12px;overflow:hidden;flex:none;background:#161412}
.ddp .dth img{width:100%;height:100%;object-fit:cover}
.ddp b{display:block;font-family:var(--disp);font-weight:700;font-size:.92rem}
.ddp span.ds2{font-size:.76rem;color:var(--mut);display:block}
.ddp .all{justify-content:center;font-weight:700;color:var(--signal);border-top:1px solid var(--line);border-radius:0;margin-top:.3rem;padding-top:.8rem}
.pdp-band{border-radius:26px;overflow:hidden;box-shadow:var(--sh);aspect-ratio:16/6;position:relative;margin-top:3rem}
.pdp-band img{position:absolute;inset:0;width:110%;height:120%;object-fit:cover;top:-10%}
.ctaband{background:var(--signal);color:#fff;border-radius:28px;padding:clamp(2.2rem,5vw,3.6rem);display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;box-shadow:0 30px 70px -25px rgba(255,90,31,.5)}
.ctaband .h2{color:#fff}

/* ---------- colorway showcase (stacked panels, no pin, no gaps) ---------- */
#cw{background:var(--bg);position:relative;z-index:0}
.cw-pin{position:relative;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.cw-bg{position:absolute;inset:0;transition:background .8s var(--ease);z-index:0}
.cw-bg.c-orange{background:radial-gradient(60% 60% at 30% 45%,rgba(255,90,31,.14),transparent 70%)}
.cw-bg.c-grey{background:radial-gradient(60% 60% at 30% 45%,rgba(120,124,126,.16),transparent 70%)}
.cw-bg.c-black{background:radial-gradient(60% 60% at 30% 45%,rgba(27,24,19,.16),transparent 70%)}
.cw-inner{position:relative;z-index:2;width:min(1160px,92vw);display:grid;grid-template-columns:1.05fr .95fr;
  align-items:center;gap:clamp(2rem,5vw,5rem)}
.cw-media{position:relative;height:min(72svh,640px);display:flex;align-items:center;justify-content:center}
.cw-img{position:absolute;max-width:100%;max-height:100%;object-fit:contain;opacity:0;transform:scale(.9) translateY(20px) rotate(-4deg);
  transition:opacity .55s var(--ease),transform .7s var(--ease);filter:drop-shadow(0 40px 50px rgba(27,24,19,.22));will-change:transform,opacity}
.cw-img.on{opacity:1;transform:scale(1) translateY(0) rotate(0)}
.cw-shadow{position:absolute;bottom:2%;left:50%;width:42%;height:22px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(27,24,19,.28),transparent 72%);border-radius:50%;filter:blur(3px);z-index:-1}
.cw-copy{transition:opacity .4s var(--ease),transform .4s var(--ease)}
.cw-copy.sw{opacity:0;transform:translateY(16px)}
.cw-copy .mono{color:var(--signal)}
.cw-copy .h1{font-size:clamp(2.4rem,5.2vw,4.4rem);margin:.5rem 0 .3rem}
.cw-copy .tagl{display:block;color:var(--mut);letter-spacing:.18em;margin-bottom:1rem}
.cw-copy p{color:var(--mut);max-width:28em;margin-bottom:1.7rem}
.cw-dots{position:absolute;right:clamp(1rem,3vw,2.4rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.75rem;z-index:5}
.cw-dots i{width:10px;height:10px;border-radius:50%;background:rgba(27,24,19,.16);transition:all .3s var(--ease)}
.cw-dots i.on{background:var(--signal);transform:scale(1.4)}
.cw-hint{position:absolute;bottom:1.3rem;left:50%;transform:translateX(-50%);color:var(--mut);z-index:5;animation:cue 2s var(--ease) infinite}
@media(max-width:860px){
  .cw-inner{grid-template-columns:1fr;text-align:center;gap:1rem}
  .cw-media{height:44svh;order:0}
  .cw-copy p{margin-left:auto;margin-right:auto}
  .cw-copy .h1{font-size:clamp(2rem,9vw,3rem)}}
/* ---------- details macro sequence (pinned) ---------- */
#details{background:var(--bg)}
#details .stage{height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem}
.dt-frame{position:relative;width:min(1080px,92vw);aspect-ratio:16/8;border-radius:26px;overflow:hidden;box-shadow:var(--sh);background:var(--bg2)}
.dt-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);
  transition:opacity .5s var(--ease),transform .9s var(--ease)}
.dt-frame img.on{opacity:1;transform:scale(1)}
.dt-cap{text-align:center;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.dt-cap .mono{color:var(--signal)}
.dt-cap h3{margin-top:.35rem}
.dt-cap.sw{opacity:0;transform:translateY(12px)}
.dt-bar{display:flex;gap:.5rem}
.dt-bar i{width:34px;height:4px;border-radius:4px;background:rgba(27,24,19,.14);overflow:hidden;position:relative}
.dt-bar i b{position:absolute;inset:0;right:100%;background:var(--signal);border-radius:4px}
/* ============================================================
   STEPPRS — BEAUTIFUL MENU (paste-in CSS)
   Paste this at the very BOTTOM of assets/base.css
   Works with your existing v3 header. No HTML/JS changes needed.
   ============================================================ */

/* ---- the bar ---- */
nav {
  padding: 1.05rem clamp(1rem, 4vw, 2.4rem) !important;
  background: linear-gradient(180deg, rgba(251,249,245,.92), rgba(251,249,245,.6)) !important;
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
}

/* ---- logo lift ---- */
.logo img {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease) !important;
}
.logo:hover img {
  transform: translateY(-2px) rotate(-1.5deg) scale(1.05) !important;
  box-shadow: 0 16px 34px -14px rgba(255,90,31,.6) !important;
}

/* ---- THE CAPSULE: menu becomes a floating pill, not loose text ---- */
.nav-links {
  gap: .3rem !important;
  padding: .38rem .42rem !important;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(27,24,19,.07);
  border-radius: 999px;
  box-shadow: 0 12px 34px -22px rgba(27,24,19,.32),
              inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.nav-links:hover {
  border-color: rgba(255,90,31,.22);
  box-shadow: 0 18px 46px -22px rgba(27,24,19,.4),
              inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---- each link: roomy pill with its own dot ---- */
.nav-links a.rl {
  display: inline-flex !important;
  align-items: center;
  gap: .55rem;
  height: auto !important;
  overflow: visible !important;          /* padding no longer clips the roll */
  padding: .68rem 1.1rem !important;
  border-radius: 999px;
  font-family: var(--disp);
  font-weight: 600 !important;
  font-size: .88rem !important;
  letter-spacing: .005em;
  color: var(--txt) !important;
  white-space: nowrap;
  transition: background .35s var(--ease);
}
.nav-links a.rl:hover { background: rgba(255,90,31,.08); }

/* the dot marker — the thing that stops it reading as one sentence */
.nav-links a.rl::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  flex: none;
  background: rgba(27,24,19,.2);
  transition: background .35s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.nav-links a.rl:hover::before,
.dd:hover > a.rl::before {
  background: var(--signal);
  transform: scale(1.65);
  box-shadow: 0 0 10px 2px rgba(255,90,31,.45);
}

/* ---- letter roll (clip moved onto the label, so padding works) ---- */
.nav-links a.rl i {
  position: relative;
  display: block;
  height: 1.35em !important;
  line-height: 1.35em !important;
  overflow: hidden;
  color: transparent !important;   /* real text keeps the width, pseudos do the work */
  transform: none !important;
}
.nav-links a.rl i::before,
.nav-links a.rl i::after {
  content: attr(data-t);
  position: absolute;
  left: 0; top: 0;
  line-height: 1.35em;
  transition: transform .45s var(--ease);
}
.nav-links a.rl i::before { color: var(--txt); transform: translateY(0); }
.nav-links a.rl i::after  { color: var(--signal); transform: translateY(100%); }

.nav-links a.rl:hover i::before,
.dd:hover > a.rl i::before { transform: translateY(-100%); }
.nav-links a.rl:hover i::after,
.dd:hover > a.rl i::after  { transform: translateY(0); }

/* ---- caret ---- */
.car {
  width: 5px; height: 5px;
  border-right: 1.8px solid rgba(27,24,19,.4);
  border-bottom: 1.8px solid rgba(27,24,19,.4);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.dd:hover .car { transform: rotate(225deg) translateY(1px); border-color: var(--signal); }

/* ---- dropdown: 3D unfold + staggered rows ---- */
.ddp {
  min-width: 330px !important;
  padding: .7rem !important;
  border-radius: 22px !important;
  transform: translate(-50%, 6px) perspective(1000px) rotateX(-12deg) !important;
  transform-origin: top center;
  box-shadow: 0 40px 90px -28px rgba(27,24,19,.42), 0 0 0 1px rgba(27,24,19,.05) !important;
  transition: opacity .35s var(--ease), transform .5s var(--ease) !important;
}
.dd:hover .ddp {
  transform: translate(-50%, 0) perspective(1000px) rotateX(0) !important;
}
.ddp a {
  border-radius: 16px !important;
  padding: .78rem .8rem !important;
  opacity: 0;
  transform: translateY(10px);
  transition: background .3s var(--ease), opacity .45s var(--ease), transform .45s var(--ease);
}
.dd:hover .ddp a { opacity: 1; transform: none; }
.dd:hover .ddp a:nth-child(1) { transition-delay: .05s; }
.dd:hover .ddp a:nth-child(2) { transition-delay: .11s; }
.dd:hover .ddp a:nth-child(3) { transition-delay: .17s; }
.dd:hover .ddp a:nth-child(4) { transition-delay: .23s; }
.dd:hover .ddp a:nth-child(5) { transition-delay: .29s; }

.ddp .dth { width: 56px !important; height: 56px !important; border-radius: 14px !important; background: var(--bg2) !important; }
.ddp .dth img { transition: transform .6s var(--ease); }
.ddp a:hover .dth img { transform: scale(1.1); }
.ddp span.ds2 { color: var(--signal) !important; font-family: var(--mono); font-size: .74rem !important; }

/* arrow that slides in on each row */
.ddp a:not(.all)::after {
  content: "→";
  margin-left: auto;
  color: var(--signal);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.ddp a:not(.all):hover::after { opacity: 1; transform: translateX(3px); }
.ddp .all { border-radius: 0 0 14px 14px !important; padding-top: .9rem !important; }

/* ---- cart button: solid object with a shine sweep ---- */
.nav-links .btn-p {
  position: relative;
  overflow: hidden;
  margin-left: .35rem;
  padding: .72rem 1.3rem !important;
  border-radius: 999px !important;
  font-weight: 700;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.nav-links .btn-p:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 34px -14px rgba(255,90,31,.65);
}
.nav-links .btn-p::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg);
  transition: left .75s var(--ease);
  pointer-events: none;
}
.nav-links .btn-p:hover::before { left: 140%; }

.bagn {
  background: rgba(0,0,0,.28) !important;
  margin-left: .5rem;
  transition: transform .35s var(--ease);
}
.nav-links .btn-p:hover .bagn { transform: scale(1.15) rotate(-6deg); }

/* ---- mobile ---- */
@media (max-width: 980px) {
  .nav-links { padding: .3rem .34rem !important; gap: .1rem !important; }
  .nav-links a.rl { padding: .55rem .7rem !important; font-size: .78rem !important; gap: .38rem; }
  .nav-links a.rl::before { width: 4px; height: 4px; }
  .ddp { min-width: 270px !important; }
  .nav-links .btn-p { padding: .6rem .95rem !important; font-size: .78rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-links a.rl, .nav-links a.rl i::before, .nav-links a.rl i::after,
  .ddp, .ddp a, .nav-links .btn-p, .nav-links .btn-p::before, .logo img {
    transition: none !important;
  }
}
.pay-icons{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.9rem;
  padding:1.4rem 0 .3rem;border-top:1px solid rgba(255,255,255,.08);margin-top:1.2rem}
.pay-label{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.pay-icons ul{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.pay-icons li{display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);
  border-radius:7px;padding:.32rem .5rem;
  transition:background .3s var(--ease),transform .3s var(--ease)}
.pay-icons li:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
.pay-icons svg,.pay-icons .pay-svg{height:20px;width:auto;display:block}
@media(max-width:640px){.pay-icons{gap:.6rem}.pay-icons svg{height:17px}}
/* ============================================================
   FLOATING BADGES — bigger, bubble-like, gently alive
   ============================================================ */

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.4rem;                    /* bigger */
  border-radius:999px;
  font-family:var(--disp);
  font-weight:700;
  font-size:.86rem;                          /* was smaller */
  letter-spacing:.005em;
  white-space:nowrap;
  color:var(--txt);

  /* the bubble: glass, curved, with light on top */
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:
    0 18px 40px -18px rgba(27,24,19,.32),      /* it hovers above the page */
    inset 0 2px 5px rgba(255,255,255,.95),     /* top light  → bubble curve */
    inset 0 -6px 12px rgba(27,24,19,.05),      /* bottom shade → volume */
    0 0 0 1px rgba(27,24,19,.04);

  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  z-index:5;
}

/* glossy highlight across the top, like light on a bubble */
.hero-badge::before{
  content:"";
  position:absolute;
  top:8%; left:10%;
  width:55%; height:34%;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  pointer-events:none;
}

/* the dot: a glowing orange bead that pulses */
.hero-badge i{
  width:9px; height:9px;
  border-radius:50%;
  flex:none;
  background:radial-gradient(circle at 32% 30%, #FFB183, var(--signal) 60%);
  box-shadow:0 0 0 0 rgba(255,90,31,.5);
  animation:badgeBead 2.6s var(--ease) infinite;
}
@keyframes badgeBead{
  0%  { box-shadow:0 0 0 0 rgba(255,90,31,.5); }
  70% { box-shadow:0 0 0 10px rgba(255,90,31,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,90,31,0); }
}

/* --- the float: each badge drifts on its own rhythm --- */
@keyframes bubbleDrift{
  0%,100%{ transform:translate3d(0, 0, 0)      rotate(0); }
  33%    { transform:translate3d(3px, -7px, 0)  rotate(.5deg); }
  66%    { transform:translate3d(-2px, -3px, 0) rotate(-.4deg); }
}

.hero-badge.hb1{ animation:bubbleDrift 7s   ease-in-out infinite; }
.hero-badge.hb2{ animation:bubbleDrift 8.5s ease-in-out infinite 1.1s; }   /* offset so they never sync */
.hero-badge.hb3{ animation:bubbleDrift 9.5s ease-in-out infinite 2.3s; }

/* hover: the bubble swells and warms */
.hero-badge:hover{
  animation-play-state:paused;
  transform:translateY(-5px) scale(1.06);
  border-color:rgba(255,90,31,.35);
  box-shadow:
    0 26px 54px -18px rgba(255,90,31,.4),
    inset 0 2px 6px rgba(255,255,255,.98),
    inset 0 -6px 14px rgba(27,24,19,.06),
    0 0 0 1px rgba(255,90,31,.18);
}
.hero-badge:hover i{ animation-duration:1.2s; }   /* bead beats faster */

@media(max-width:860px){
  .hero-badge{ padding:.65rem 1rem; font-size:.74rem; gap:.45rem; }
  .hero-badge i{ width:7px; height:7px; }
}

@media(prefers-reduced-motion:reduce){
  .hero-badge, .hero-badge i{ animation:none !important; }
  .hero-badge:hover{ transform:none !important; }
}
/* ============================================================
   TECHNOLOGY CALLOUTS — same bubble language as the hero badges
   ============================================================ */

#zoom .anno{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.4rem;
  border-radius:999px;
  font-family:var(--disp);
  font-weight:700;
  font-size:.86rem;
  letter-spacing:.005em;
  white-space:nowrap;
  color:var(--txt);

  /* the bubble */
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.74));
  border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:
    0 18px 40px -18px rgba(27,24,19,.34),
    inset 0 2px 5px rgba(255,255,255,.95),
    inset 0 -6px 12px rgba(27,24,19,.05),
    0 0 0 1px rgba(27,24,19,.04);

  transition:box-shadow .5s var(--ease), border-color .5s var(--ease);
  z-index:6;
}

/* glossy top highlight */
#zoom .anno::before{
  content:"";
  position:absolute;
  top:8%; left:10%;
  width:55%; height:34%;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  pointer-events:none;
}

/* the pulsing orange bead */
#zoom .anno i{
  width:9px; height:9px;
  border-radius:50%;
  flex:none;
  background:radial-gradient(circle at 32% 30%, #FFB183, var(--signal) 60%);
  box-shadow:0 0 0 0 rgba(255,90,31,.5);
  animation:badgeBead 2.6s var(--ease) infinite;
}
#zoom .anno.a2 i{ animation-delay:.5s; }
#zoom .anno.a3 i{ animation-delay:1s; }

/* hover: swell + warm, same as the badges */
#zoom .anno:hover{
  border-color:rgba(255,90,31,.35);
  box-shadow:
    0 26px 54px -18px rgba(255,90,31,.4),
    inset 0 2px 6px rgba(255,255,255,.98),
    inset 0 -6px 14px rgba(27,24,19,.06),
    0 0 0 1px rgba(255,90,31,.18);
}
#zoom .anno:hover i{ animation-duration:1.2s; }

@media(max-width:860px){
  #zoom .anno{ padding:.6rem 1rem; font-size:.72rem; gap:.45rem; }
  #zoom .anno i{ width:7px; height:7px; }
}

@media(prefers-reduced-motion:reduce){
  #zoom .anno i{ animation:none !important; }
}
/* ============================================================
   BUBBLE BUTTONS — bigger, glossy, gently alive
   ============================================================ */

.btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:1.05rem 2.1rem;              /* bigger */
  border-radius:999px;
  font-family:var(--disp);
  font-weight:700;
  font-size:.98rem;
  letter-spacing:.01em;
  isolation:isolate;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}

/* ---- primary: an orange bubble ---- */
.btn-p{
  background:radial-gradient(120% 120% at 30% 18%, #FF8A4C 0%, var(--signal) 55%, #E8480F 100%);
  color:#fff;
  box-shadow:
    0 16px 34px -14px rgba(255,90,31,.55),
    inset 0 2px 6px rgba(255,255,255,.42),      /* top light — the bubble curve */
    inset 0 -8px 14px rgba(0,0,0,.14);          /* bottom shade — gives it volume */
  animation:bubbleFloat 5.5s ease-in-out infinite;
}

/* the glossy highlight sitting on top of the bubble */
.btn-p::before{
  content:"";
  position:absolute;
  top:5%; left:12%;
  width:58%; height:38%;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
  z-index:1;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.btn-p > *{ position:relative; z-index:2; }

/* gentle breathing float — subtle, not distracting */
@keyframes bubbleFloat{
  0%,100%{ transform:translateY(0)    scale(1); }
  50%    { transform:translateY(-3px) scale(1.012); }
}

/* hover: the bubble swells */
.btn-p:hover{
  transform:translateY(-4px) scale(1.045);
  animation-play-state:paused;
  box-shadow:
    0 26px 50px -16px rgba(255,90,31,.62),
    inset 0 2px 8px rgba(255,255,255,.5),
    inset 0 -8px 16px rgba(0,0,0,.16);
}
.btn-p:hover::before{ transform:translateY(-2px) scale(1.06); opacity:.9; }

/* press: it squashes like a real bubble */
.btn-p:active{
  transform:translateY(-1px) scale(.97);
  transition-duration:.12s;
}

/* ---- the little dot inside primary buttons becomes a pulsing bead ---- */
.btn-p .d{
  width:8px; height:8px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.55);
  animation:beadPulse 2.4s var(--ease) infinite;
}
@keyframes beadPulse{
  0%   { box-shadow:0 0 0 0 rgba(255,255,255,.5); }
  70%  { box-shadow:0 0 0 9px rgba(255,255,255,0); }
  100% { box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

/* ---- ghost / secondary: a clear glass bubble ---- */
.btn-g{
  padding:1.05rem 2.1rem;
  border-radius:999px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(27,24,19,.1);
  color:var(--txt);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:
    0 12px 30px -18px rgba(27,24,19,.3),
    inset 0 1px 0 rgba(255,255,255,.9);
  animation:bubbleFloat 6.5s ease-in-out infinite .6s;   /* offset so they don't bob in sync */
}
.btn-g:hover{
  transform:translateY(-4px) scale(1.04);
  animation-play-state:paused;
  border-color:rgba(255,90,31,.3);
  box-shadow:
    0 22px 44px -18px rgba(27,24,19,.34),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.btn-g:active{ transform:translateY(-1px) scale(.97); transition-duration:.12s; }

/* ---- light button (on the orange CTA band) ---- */
.btn-light{
  padding:1.05rem 2.1rem;
  border-radius:999px;
  box-shadow:
    0 16px 34px -16px rgba(0,0,0,.3),
    inset 0 2px 6px rgba(255,255,255,.7),
    inset 0 -6px 12px rgba(0,0,0,.07);
  animation:bubbleFloat 6s ease-in-out infinite .3s;
}
.btn-light:hover{ transform:translateY(-4px) scale(1.045); animation-play-state:paused; }
.btn-light:active{ transform:translateY(-1px) scale(.97); transition-duration:.12s; }

/* a shine that sweeps across on hover */
.btn::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:-60%;
  width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-18deg);
  transition:left .8s var(--ease);
  pointer-events:none;
  z-index:1;
}
.btn:hover::after{ left:150%; }

/* the nav cart button stays compact — don't blow it up */
.nav-links .btn-p{
  padding:.72rem 1.3rem !important;
  font-size:.86rem;
  animation:none;
}

@media(max-width:640px){
  .btn, .btn-g, .btn-light{ padding:.95rem 1.6rem; font-size:.9rem; }
}

@media(prefers-reduced-motion:reduce){
  .btn, .btn-p, .btn-g, .btn-light, .btn-p .d{ animation:none !important; }
  .btn:hover, .btn-p:hover, .btn-g:hover, .btn-light:hover{ transform:none !important; }
}
/* ============================================================
   MOBILE FIXES — bag badge, hero badges, callouts, footsteps
   ============================================================ */

/* ---------- 1. "bag 0" in the mobile menu ---------- */
/* the count is cloned as raw text, so give it its own bubble */
.mnav a.mnav-cart{
  gap:.6rem;
  font-family:var(--disp);
  font-weight:700;
  letter-spacing:.01em;
}
/* hide the stray number that gets copied into the label */
.mnav a.mnav-cart .bagn{ display:none; }


@media (max-width: 900px){

  /* ---------- 2. HERO BADGES: stop them overlapping the text ---------- */
  /* they're absolutely positioned for desktop — put them back in the flow */
  .hero-badge{
    position:static !important;
    top:auto !important; bottom:auto !important;
    left:auto !important; right:auto !important;
    transform:none !important;
    animation:none !important;
    margin:0;
  }
  /* lay them out in a neat row under the hero copy */
  .hero-in{ position:relative; }
  .hero .hero-badge{
    display:inline-flex;
    padding:.5rem .85rem;
    font-size:.7rem;
    gap:.4rem;
  }
  .hero .hero-badge i{ width:6px; height:6px; }
  /* wrap them together */
  .hero-badge.hb1{ margin-top:1.4rem; }
  .hero-badge.hb1, .hero-badge.hb2, .hero-badge.hb3{
    margin-right:.45rem;
    margin-bottom:.45rem;
  }


  /* ---------- 3. TECHNOLOGY CALLOUTS: off the video, below it ---------- */
  #zoom .stage{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.9rem;
    padding:0 1rem;
  }
  #zoom .frame{
    width:92vw !important;
    aspect-ratio:16/11 !important;
    order:1;
  }
  /* callouts stop floating on top of the video and stack under it */
  #zoom .anno{
    position:static !important;
    top:auto !important; bottom:auto !important;
    left:auto !important; right:auto !important;
    transform:none !important;
    order:2;
    width:auto;
    max-width:92vw;
    padding:.55rem .9rem !important;
    font-size:.72rem !important;
    white-space:normal !important;
  }
  #zoom .anno i{ width:6px; height:6px; }
  #zoom .zhead{ order:0; padding:0 1rem; }


@media (max-width: 900px){

  /* footsteps fill the empty right-hand space beside the footer links */
  .foot-fx{
    display:block !important;
    position:absolute !important;
    right:1.4rem !important;
    left:auto !important;
    top:auto !important;
    bottom:auto !important;

    /* sit below "contact us", in the gap next to the MENU column */
    margin:0 !important;
    transform:none !important;

    width:110px !important;
    height:250px !important;
    z-index:1 !important;
    opacity:.9;
  }

  /* anchor it to the link-columns row */
  footer{ position:relative; }
  .fgrid{ position:relative; z-index:2; }

  /* place it vertically where the empty space actually is */
  .foot-fx{
    top:26% !important;
  }

  .foot-fx-cap{
    position:absolute !important;
    bottom:-18px; right:0;
    font-size:.5rem !important;
    letter-spacing:.16em;
    white-space:nowrap;
    text-align:right;
  }
}
/* ============================================================
   THE DIFFERENCE — mobile fixes
   ============================================================ */
@media (max-width: 920px){

  #diff{
    min-height:auto !important;
    padding:3.5rem 0 !important;
    display:block !important;
  }

  /* copy FIRST, image after — heading should lead */
  .diff-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:1.6rem !important;
    max-height:none !important;
  }
  .diff-copy  { order:1; }
  .diff-stage { order:2; }

  /* labels sit ABOVE the frame, not on top of the illustration */
  .diff-labels{
    position:static !important;
    display:flex;
    justify-content:center;
    gap:.6rem;
    margin-bottom:.7rem;
    padding:0 !important;
  }
  .dlab{
    padding:.35rem .85rem !important;
    font-size:.68rem !important;
    box-shadow:none !important;
  }

  /* the frame: full width, contained, nothing cropped */
  .diff-frame{
    max-width:100% !important;
    max-height:none !important;
    aspect-ratio:1/1 !important;
    border-radius:20px !important;
  }
  .diff-img{ padding:.7rem !important; }

  /* keep the divider handle inside the frame */
  .diff-handle{ width:2px !important; }
  .diff-handle i{
    width:30px !important;
    height:30px !important;
  }

  .diff-scrub{
    margin-top:.8rem !important;
    font-size:.56rem !important;
  }

  .diff-list{ gap:.85rem !important; margin-bottom:1.5rem !important; }
  .diff-list li{ font-size:.92rem; }
  .diff-copy .btn{ width:100%; justify-content:center; }
}