/* ==========================================================================
   BLACK BELT TAPE — "RANK BAR" DESIGN SYSTEM
   Bone white (tape) · Ink black (belt) · Belt-bar red · Mat blue
   Display: Archivo condensed · Accent: Instrument Serif italic · Labels: JetBrains Mono
   ========================================================================== */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fonts/archivo.woff2) format("woff2-variations"),url(/assets/fonts/archivo.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/iserif-italic.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/iserif.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jbmono-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/jbmono-700.woff2) format("woff2")}

:root{
  --bone:#f1ece2; --paper:#faf7f1; --sand:#e6dfd1; --line:#d6cdbc;
  --ink:#121212; --ink-2:#1c1c1f; --ink-3:#2a2a2e; --ink-line:#34343a;
  --mute:#6b655b; --mute-d:#a39d92;
  --red:#d9301f; --red-2:#ef4430; --red-ink:#b3230f;
  --mat:#1f3a8f; --mat-2:#18306f;
  --ok:#2f9e5b;
  --display:"Archivo",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --pad:clamp(16px,4vw,64px);
  --max:1400px;
  --r:14px;
  --ease:cubic-bezier(.22,.8,.2,1);
  --shadow:0 1px 0 rgba(18,18,18,.04),0 18px 40px -18px rgba(18,18,18,.25);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;margin:0;padding:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:200;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:900;font-stretch:68%;text-transform:uppercase;line-height:.86;letter-spacing:-.005em;margin:0}
.h1{font-size:clamp(64px,10.5vw,176px)}
.h2{font-size:clamp(46px,6.6vw,108px)}
.h3{font-size:clamp(30px,3.4vw,52px)}
.it{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em;font-stretch:100%}
.display .it{font-size:1.08em;line-height:.8}
.red{color:var(--red)}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.label--dot::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:10px;vertical-align:1px}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:#3d3933;max-width:54ch;margin:0}
.dark .lead,.mat .lead{color:#cfc9be}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:0 26px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s,transform .25s var(--ease)}
.btn:hover{background:var(--ink);color:var(--bone)}
.btn:active{transform:scale(.98)}
.btn--ink{background:var(--ink);color:var(--bone)}
.btn--ink:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn--red{background:var(--red);border-color:var(--red);color:#fff}
.btn--red:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--bone{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.btn--bone:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn--line-bone{border-color:rgba(241,236,226,.5);color:var(--bone)}
.btn--line-bone:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn .arr{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.link{font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid currentColor;padding-bottom:3px;transition:color .2s}
.link:hover{color:var(--red)}

/* ---------- belt bar (signature) ---------- */
.belt{position:relative;display:flex;align-items:stretch;height:64px;background:var(--ink);color:var(--bone);overflow:hidden}
.belt__track{flex:1;display:flex;align-items:center;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.belt__run{display:inline-flex;gap:56px;white-space:nowrap;animation:run 40s linear infinite;padding-left:56px;font-weight:900;font-stretch:70%;text-transform:uppercase;font-size:24px;letter-spacing:.02em}
.belt__run span{display:inline-flex;align-items:center;gap:56px}
.belt__run span::after{content:"";width:10px;height:10px;border:2px solid var(--red);border-radius:50%}
.belt__rank{flex:none;width:clamp(120px,14vw,200px);background:var(--red);display:flex;align-items:center;justify-content:center;gap:9px}
.belt__rank i{width:9px;height:64px;background:var(--bone)}
.belt--thin{height:14px}
.belt--thin .belt__rank i{height:14px;width:6px}
@keyframes run{to{transform:translateX(-50%)}}

/* mini rank (decoration on cards/headings) */
.rank{display:inline-flex;align-items:stretch;height:12px;width:70px;background:var(--ink);border-radius:2px;overflow:hidden}
.rank b{margin-left:auto;width:30px;background:var(--red);display:flex;justify-content:space-evenly}
.rank b i{width:3px;background:var(--bone)}

/* ---------- announcement ---------- */
.announce{background:var(--ink);color:var(--bone);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:9px var(--pad)}
.announce b{color:#ff8a7c;font-weight:700}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(241,236,226,.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:78px}
.hdr__logo{display:flex;align-items:center;gap:12px;justify-self:center}
.hdr__logo img{width:52px;height:52px;transition:transform .6s var(--ease)}
.hdr__logo:hover img{transform:rotate(-20deg)}
.hdr__logo span{font-weight:900;font-stretch:72%;text-transform:uppercase;font-size:21px;letter-spacing:.02em}
.nav{display:flex;gap:6px;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.nav a{padding:9px 13px;border-radius:999px;transition:background .2s,color .2s}
.nav a:hover{background:var(--sand)}
.nav a[aria-current=page]{background:var(--ink);color:var(--bone)}
.nav--r{justify-self:end}
.hdr__actions{display:flex;align-items:center;gap:8px;justify-self:end}
.cartbtn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 8px 0 18px;border-radius:999px;background:var(--ink);color:var(--bone);border:0;font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;transition:background .2s}
.cartbtn:hover{background:var(--red)}
.cartbtn .badge{min-width:30px;height:30px;border-radius:999px;background:var(--bone);color:var(--ink);display:grid;place-items:center;font-size:13px;padding:0 8px;transition:transform .3s var(--ease)}
.cartbtn .badge.bump{transform:scale(1.25)}
.iconbtn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:transparent}
.iconbtn svg{width:20px;height:20px}
.menu-btn{display:none}
.mnav{display:none}
@media (max-width:1080px){
  .hdr__in{grid-template-columns:auto 1fr auto;height:68px}
  .hdr__logo{justify-self:start}
  .hdr__logo img{width:44px;height:44px}
  .nav{display:none}
  .menu-btn{display:grid}
  .cartbtn span.t{display:none}
  .cartbtn{padding:0 8px}
  .mnav{display:block;position:fixed;inset:0;z-index:90;background:var(--ink);color:var(--bone);padding:96px var(--pad) 40px;transform:translateY(-100%);transition:transform .5s var(--ease);overflow:auto}
  .mnav.open{transform:none}
  .mnav a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--ink-line);font-weight:900;font-stretch:70%;text-transform:uppercase;font-size:40px;line-height:1}
  .mnav a::after{content:"→";font-size:24px;color:var(--red)}
  .mnav .iconbtn{position:absolute;top:14px;right:var(--pad);border-color:var(--bone);color:var(--bone)}
}
@media (max-width:420px){.hdr__logo span{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(28px,4vw,56px) 0 clamp(48px,6vw,88px);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(24px,4vw,72px);align-items:center}
.hero__kicker{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-bottom:clamp(18px,2.4vw,30px)}
.hero h1{font-size:clamp(70px,11.2vw,190px)}
.hero h1 .l2{display:block;margin-top:.02em}
.hero h1 .it{color:var(--red);font-size:1.06em;margin-left:-.02em}
.hero__copy{display:grid;grid-template-columns:1fr auto;gap:24px 40px;align-items:end;margin-top:clamp(24px,3vw,40px)}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px}
.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(20px,3vw,48px);margin-top:clamp(28px,4vw,52px);padding-top:22px;border-top:1.5px solid var(--ink)}
.stat b{display:block;font-weight:900;font-stretch:70%;font-size:clamp(34px,3.4vw,52px);line-height:.9}
.stat span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.hero__visual{position:relative;justify-self:center;width:min(100%,520px)}
.arch{position:relative;aspect-ratio:3/4;border-radius:999px 999px var(--r) var(--r);overflow:hidden;background:var(--ink);box-shadow:var(--shadow)}
.arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1.1s ease,transform 6.5s linear}
.arch img.on{opacity:1;transform:scale(1)}
.arch__dots{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.arch__dots button{width:34px;height:4px;border:0;padding:0;border-radius:2px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.arch__dots button.on::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:fill 6s linear forwards}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.roll{position:absolute;top:-28px;right:-34px;width:clamp(120px,12vw,168px);aspect-ratio:1;z-index:3}
.roll svg{width:100%;height:100%;animation:spin 22s linear infinite}
.roll .core{position:absolute;inset:30%;border-radius:50%;background:var(--red);display:grid;place-items:center;color:#fff;font-weight:900;font-stretch:70%;font-size:clamp(16px,1.5vw,22px);text-transform:uppercase;line-height:.9;text-align:center;box-shadow:0 0 0 6px var(--bone)}
@keyframes spin{to{transform:rotate(360deg)}}
.chipcard{position:absolute;left:-36px;bottom:42px;z-index:3;display:flex;align-items:center;gap:12px;background:var(--paper);border-radius:999px;padding:8px 10px 8px 8px;box-shadow:var(--shadow);max-width:calc(100% + 20px)}
.chipcard img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.chipcard b{display:block;font-size:14px;line-height:1.2}
.chipcard span{font-family:var(--mono);font-size:12px;color:var(--mute)}
.chipcard .add{margin-left:6px}
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr}
  .hero__visual{width:min(100%,440px);order:2}
  .hero__copy{grid-template-columns:1fr}
  .roll{right:-6px;top:-22px}
  .chipcard{left:8px}
}
@media (max-width:560px){.stats{grid-template-columns:repeat(3,1fr);gap:14px}.stat b{font-size:30px}.stat span{font-size:10px;letter-spacing:.06em}}

/* ---------- sections ---------- */
.sec{padding:clamp(80px,10vw,150px) 0}
.sec--tight{padding:clamp(56px,7vw,100px) 0}
.dark{background:var(--ink);color:var(--bone)}
.dark .label{color:var(--mute-d)}
.mat{background:var(--mat);color:var(--bone)}
.mat .label{color:#aebbe6}
.paper{background:var(--paper)}
.sec__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-bottom:clamp(36px,5vw,72px)}
.sec__head .label{display:block;margin-bottom:18px}
.sec__head .lead{max-width:44ch}

/* ---------- kit builder ---------- */
.kit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,88px);align-items:center}
.kit__stage{position:relative;aspect-ratio:1;max-width:620px;width:100%;justify-self:center}
.kit__ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,transparent 0 34%,var(--bone) 34.2% 62%,rgba(241,236,226,.2) 62.2% 63%,transparent 63.2%),repeating-radial-gradient(circle at 50% 50%,rgba(241,236,226,.12) 0 1px,transparent 1px 14px)}
.kit__img{position:absolute;inset:9%;border-radius:50%;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 10px rgba(241,236,226,.12)}
.kit__img img{width:100%;height:100%;object-fit:cover;transition:opacity .35s,transform .6s var(--ease)}
.kit__img img.swap{opacity:0;transform:scale(.96) rotate(-4deg)}
.kit__tag{position:absolute;right:2%;top:8%;background:var(--red);color:#fff;border-radius:999px;padding:10px 16px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;transform:rotate(8deg)}
.kit__tag:empty{display:none}
.step{padding:18px 0;border-top:1px solid rgba(241,236,226,.2)}
.step__h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(241,236,226,.35);background:transparent;color:var(--bone);font-weight:700;font-size:14px;transition:all .2s var(--ease)}
.seg button:hover{border-color:var(--bone)}
.seg button[aria-pressed=true]{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.seg button[disabled]{opacity:.3;pointer-events:none}
.kit__price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:22px 0 6px}
.kit__price b{font-weight:900;font-stretch:72%;font-size:clamp(48px,5vw,72px);line-height:1}
.kit__price s{color:#aebbe6;font-size:18px}
.kit__inc{list-style:none;padding:0;margin:8px 0 26px;display:grid;gap:6px;color:#dfe4f5}
.kit__inc li::before{content:"";display:inline-block;width:9px;height:9px;border:2px solid var(--red-2);border-radius:50%;margin-right:10px}
.kit__name{font-weight:800;font-size:20px;margin:0}
.kit__buy{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:900px){.kit{grid-template-columns:1fr}.kit__stage{max-width:420px}}

/* swatches */
.sw{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(0,0,0,.35);flex:none;display:inline-block}
.sw--black{background:#151515}
.sw--white{background:#f8f5ee}
.sw--black-white{background:linear-gradient(135deg,#151515 50%,#f8f5ee 50%)}
.mat .sw,.dark .sw{border-color:rgba(255,255,255,.5)}

/* ---------- sports (dark) ---------- */
.sports{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sport{position:relative;aspect-ratio:3/4.3;border-radius:var(--r);overflow:hidden;background:var(--ink-2);isolation:isolate}
.sport img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.8);transition:filter .6s,transform 1s var(--ease)}
.sport:hover img{filter:none;transform:scale(1.06)}
.sport::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,18,0) 40%,rgba(18,18,18,.92));z-index:1}
.sport__n{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--mono);font-size:12px;letter-spacing:.1em;padding:5px 9px;border-radius:999px;background:rgba(241,236,226,.14);backdrop-filter:blur(6px);color:var(--bone)}
.sport__t{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:var(--bone)}
.sport__t b{display:block;font-weight:900;font-stretch:68%;text-transform:uppercase;font-size:clamp(28px,2.6vw,40px);line-height:.9}
.sport__t span{display:block;margin-top:8px;font-size:14px;color:#cfc9be;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s}
.sport:hover .sport__t span,.sport:focus-visible .sport__t span{max-height:80px;opacity:1}
@media (max-width:900px){.sports{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin:0 calc(var(--pad)*-1);padding-left:var(--pad);padding-right:var(--pad);scrollbar-width:none}.sport{scroll-snap-align:start}.sport__t span{max-height:80px;opacity:1}}

/* ---------- product cards (families) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(14px,1.8vw,26px)}
.card{position:relative;display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card__img{position:relative;aspect-ratio:1;overflow:hidden;background:var(--sand);margin:10px 10px 0;border-radius:calc(var(--r) - 4px)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),opacity .3s}
.card:hover .card__img img{transform:scale(1.05)}
.card__badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2}
.pill{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--paper);color:var(--ink)}
.pill--red{background:var(--red);color:#fff}
.pill--ink{background:var(--ink);color:var(--bone)}
.card__body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.card__top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.card__kind{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.card__t{margin:0;font-weight:900;font-stretch:76%;text-transform:uppercase;font-size:26px;line-height:.95}
.card__t a::after{content:"";position:absolute;inset:0;z-index:1}
.card__inc{margin:0;font-size:14px;color:var(--mute);line-height:1.45}
.card__sw{display:flex;gap:6px;position:relative;z-index:2}
.card__sw button{width:30px;height:30px;border-radius:50%;border:1.5px solid transparent;background:none;padding:0;display:grid;place-items:center}
.card__sw button[aria-pressed=true]{border-color:var(--ink)}
.card__sw button .sw{width:20px;height:20px}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px}
.price{display:flex;align-items:baseline;gap:8px;font-weight:900;font-size:21px}
.price s{font-weight:500;font-size:14px;color:var(--mute)}
.add{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px 0 16px;border-radius:999px;border:0;background:var(--ink);color:var(--bone);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;transition:background .2s,transform .2s}
.add:hover{background:var(--red)}
.add:active{transform:scale(.96)}
.add svg{width:16px;height:16px}
.add--icon{width:46px;padding:0;justify-content:center}
.add[disabled]{opacity:.35;pointer-events:none}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.chip{min-height:44px;padding:0 18px;border:1.5px solid var(--line);border-radius:999px;background:transparent;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#3d3933;transition:all .2s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bone)}

/* ---------- tape school ---------- */
.school{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
.video{position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--ink);display:block;width:100%;border:0;padding:0}
.video img{width:100%;height:100%;object-fit:cover;opacity:.75;transition:opacity .4s,transform .8s var(--ease)}
.video:hover img{opacity:.9;transform:scale(1.03)}
.video__play{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 0 0 12px rgba(217,48,31,.25);transition:transform .3s var(--ease)}
.video:hover .video__play{transform:scale(1.08)}
.video__play svg{width:30px;height:30px;margin-left:5px}
.video__cap{position:absolute;left:18px;bottom:16px;color:var(--bone);text-align:left}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.methods{list-style:none;margin:0;padding:0;counter-reset:m}
.methods li{display:grid;grid-template-columns:64px 1fr;gap:6px 18px;padding:22px 0;border-top:1.5px solid var(--ink)}
.methods li:last-child{border-bottom:1.5px solid var(--ink)}
.methods li::before{counter-increment:m;content:"0" counter(m);grid-row:span 2;font-weight:900;font-stretch:68%;font-size:54px;line-height:.85;color:var(--red)}
.methods h3{margin:0;font-size:22px;font-weight:900;font-stretch:80%;text-transform:uppercase;line-height:1.1}
.methods p{margin:0;color:#4a463f;font-size:16px}
.tip{margin-top:22px;padding:18px 20px;border-radius:var(--r);background:var(--sand);font-size:16px}
.tip b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:4px;color:var(--red-ink)}
@media (max-width:900px){.school{grid-template-columns:1fr}}

/* ---------- proof ---------- */
.proof{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.proof div{padding:clamp(24px,3vw,44px) clamp(16px,2vw,32px)}
.proof div+div{border-left:1.5px solid var(--ink)}
.proof b{display:block;font-weight:900;font-stretch:66%;font-size:clamp(64px,8vw,132px);line-height:.85}
.proof b .it{color:var(--red)}
.proof span{display:block;margin-top:10px;font-size:16px;color:#4a463f;max-width:28ch}
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:clamp(36px,4vw,56px)}
.logos a{display:flex;align-items:center;gap:12px;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.logos a:hover{filter:none;opacity:1}
.logos img{height:56px;width:auto;max-width:150px;object-fit:contain;mix-blend-mode:multiply}
@media (max-width:760px){.proof{grid-template-columns:1fr}.proof div+div{border-left:0;border-top:1.5px solid var(--ink)}}

/* ---------- story ---------- */
.story{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,6vw,100px);align-items:center}
.story__img{position:relative}
.story__img img{border-radius:var(--r);aspect-ratio:4/5;object-fit:cover;width:100%}
.story__img .roll{top:auto;bottom:-30px;right:-24px}
.quote{font-family:var(--serif);font-style:italic;font-size:clamp(40px,4.6vw,76px);line-height:1;letter-spacing:-.015em;margin:18px 0 28px}
.quote em{font-style:normal;font-family:var(--display);font-weight:900;font-stretch:68%;text-transform:uppercase;font-size:.9em;color:var(--red)}
.founders{display:flex;gap:-10px;margin-top:28px;align-items:center}
.founders img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid var(--bone);margin-right:-14px}
.founders span{margin-left:28px;font-size:15px;color:var(--mute)}
@media (max-width:900px){.story{grid-template-columns:1fr}}

/* ---------- blog cards ---------- */
.posts{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(16px,2vw,32px)}
.post-card{display:flex;flex-direction:column;gap:14px}
.post-card__img{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:var(--sand)}
.posts .post-card:first-child .post-card__img{aspect-ratio:4/3.2}
.post-card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.post-card:hover .post-card__img img{transform:scale(1.05)}
.post-card h3{margin:0;font-size:24px;line-height:1.15;font-weight:800}
.post-card p{margin:0;color:var(--mute);font-size:15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--red)}
.posts--all{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){.posts,.posts--all{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.posts,.posts--all{grid-template-columns:1fr}}

/* ---------- newsletter ---------- */
.news{position:relative;overflow:hidden;border-radius:calc(var(--r) * 1.6);background:var(--red);color:#fff;padding:clamp(32px,6vw,88px);display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:end;isolation:isolate}
.news::before{content:"15%";position:absolute;right:-2%;top:-14%;font-weight:900;font-stretch:62%;font-size:clamp(200px,30vw,460px);line-height:1;color:rgba(255,255,255,.1);z-index:-1;letter-spacing:-.03em}
.news .label{color:rgba(255,255,255,.8)}
.news__form{display:flex;gap:8px;background:#fff;border-radius:999px;padding:6px}
.news__form input{flex:1;min-width:0;height:52px;border:0;background:transparent;padding:0 18px;font:inherit;color:var(--ink);outline:none}
.news__form .btn{min-height:52px}
.news__msg{margin:12px 0 0;font-weight:700;min-height:1.5em}
@media (max-width:860px){.news{grid-template-columns:1fr}}
@media (max-width:480px){.news__form{flex-direction:column;border-radius:20px}.news__form .btn{width:100%}}

/* ---------- page hero ---------- */
.phero{padding:clamp(48px,7vw,104px) 0 clamp(28px,4vw,48px)}
.phero .lead{margin-top:22px}
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:20px}
.crumbs a:hover{color:var(--red)}

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,88px);padding:clamp(20px,3vw,40px) 0 clamp(64px,8vw,120px)}
.pdp__media{position:sticky;top:100px;align-self:start}
.pdp__media .frame{position:relative;border-radius:var(--r);overflow:hidden;background:var(--sand);aspect-ratio:1}
.pdp__media img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform .25s}
.pdp__media .frame.zoom img{transform:scale(1.8);cursor:zoom-out}
.pdp__title{font-weight:900;font-stretch:70%;text-transform:uppercase;font-size:clamp(44px,5.2vw,84px);line-height:.88;margin:10px 0 18px}
.pdp__price{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:34px;font-weight:900}
.pdp__price s{font-size:18px;font-weight:500;color:var(--mute)}
.pdp__price .save{font-family:var(--mono);font-size:12px;letter-spacing:.08em;background:var(--red);color:#fff;padding:6px 12px;border-radius:999px}
.pdp__desc{color:#3d3933;margin:22px 0 8px;font-size:18px;line-height:1.6}
.opt{margin:24px 0}
.opt__label{display:flex;justify-content:space-between;margin-bottom:10px}
.opt__row{display:flex;flex-wrap:wrap;gap:8px}
.opt__btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;border:1.5px solid var(--line);border-radius:999px;font-weight:700;font-size:14px;transition:all .2s}
.opt__btn:hover{border-color:var(--ink)}
.opt__btn.on{border-color:var(--ink);background:var(--ink);color:var(--bone)}
.opt__btn.on .sw{border-color:rgba(255,255,255,.6)}
.buy{display:flex;gap:10px;margin-top:10px}
.qty{display:flex;align-items:center;border:1.5px solid var(--ink);border-radius:999px;height:56px;padding:0 4px}
.qty button{width:42px;height:100%;border:0;background:transparent;font-size:20px}
.qty input{width:40px;height:100%;border:0;background:transparent;color:inherit;text-align:center;font:inherit;font-weight:800;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{display:none}
.buy .btn{flex:1;min-height:56px}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:28px}
.specs div{background:var(--paper);padding:14px 16px}
.specs b{display:block;font-weight:900;font-stretch:72%;font-size:26px;line-height:1}
.specs span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.box{margin-top:22px;border-radius:var(--r);background:var(--paper);padding:6px 20px}
.box__h{padding:14px 0 6px}
.box ul{list-style:none;margin:0;padding:0 0 8px}
.box li{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--line);font-weight:600}
.box li:last-child{border-bottom:0}
.box li::before{content:"";width:24px;height:24px;flex:none;border-radius:50%;border:6px solid var(--ink);box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 10px var(--sand)}
.acc{margin-top:22px;border-top:1.5px solid var(--ink)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:18px 0;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:22px;line-height:1;transition:transform .3s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc details>div{padding:0 0 18px;color:#4a463f;font-size:16px}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.thumb{width:78px;height:78px;flex:none;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--sand)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.on{border-color:var(--ink)}
.stickybuy{position:fixed;left:12px;right:12px;bottom:12px;z-index:55;display:none;align-items:center;gap:12px;background:var(--ink);color:var(--bone);border-radius:999px;padding:8px 8px 8px 20px;box-shadow:0 20px 40px -10px rgba(0,0,0,.5);transform:translateY(140%);transition:transform .4s var(--ease)}
.stickybuy.on{transform:none}
.stickybuy b{flex:1;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stickybuy .btn{min-height:46px}
@media (max-width:900px){.pdp{grid-template-columns:1fr}.pdp__media{position:relative;top:0}.stickybuy{display:flex}}

/* ---------- prose / blog ---------- */
.prose{max-width:740px;font-size:19px;line-height:1.75;color:#2f2c27}
.prose h2,.prose h3{color:var(--ink);font-weight:900;line-height:1.15;margin:2em 0 .6em}
.prose h2{font-size:30px}.prose h3{font-size:23px}
.prose p{margin:0 0 1.2em}
.prose a{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.2em}
.prose li{margin-bottom:.4em}
.prose img{border-radius:var(--r);margin:2em 0}
.prose .video{margin:2em 0}
article .prose>p:first-of-type::first-letter{float:left;font-family:var(--serif);font-style:italic;font-size:4.2em;line-height:.8;padding:.06em .1em 0 0;color:var(--red)}
.post-hero{aspect-ratio:21/9;border-radius:var(--r);overflow:hidden;margin:clamp(24px,4vw,48px) 0}
.post-hero img{width:100%;height:100%;object-fit:cover}

/* ---------- team / resellers / contact / faq ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px)}
.member__img{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--sand)}
.member__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s,transform .8s var(--ease)}
.member:hover .member__img img{filter:none;transform:scale(1.04)}
.member h3{margin:16px 0 4px;font-size:30px;font-weight:900;font-stretch:72%;text-transform:uppercase;line-height:1}
@media (max-width:760px){.team{grid-template-columns:1fr}}
.resellers{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.reseller{display:flex;gap:18px;padding:22px;border-radius:var(--r);background:var(--paper)}
.reseller img{width:84px;height:84px;object-fit:contain;background:#fff;border-radius:12px;padding:8px;flex:none}
.reseller h3{margin:0 0 6px;font-size:19px;font-weight:800}
.reseller p{margin:0 0 8px;color:var(--mute);font-size:15px}
.reseller a{font-weight:700;font-size:14px;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.form{display:grid;gap:14px;max-width:640px}
.form label{display:grid;gap:6px;font-weight:700;font-size:14px}
.form input,.form textarea,.select{width:100%;min-height:52px;padding:12px 18px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);font:inherit}
.form input:focus,.form textarea:focus,.select:focus{border-color:var(--ink);outline:none}
.form textarea{min-height:160px;resize:vertical}
.hp{display:none!important}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.contact__info p{margin:0 0 22px;color:#3d3933}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.faq details{border-bottom:1.5px solid var(--ink)}
.faq details:first-child{border-top:1.5px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-weight:800;font-size:21px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:30px;line-height:.8;transition:transform .3s;color:var(--red)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 0 24px;color:#3d3933;max-width:70ch}

/* ---------- cart drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(18,18,18,.5);backdrop-filter:blur(3px);z-index:90;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:8px;right:8px;bottom:8px;z-index:100;width:min(460px,calc(100% - 16px));background:var(--bone);border-radius:20px;display:flex;flex-direction:column;transform:translateX(calc(100% + 20px));transition:transform .5s var(--ease);overflow:hidden}
.drawer.on{transform:none}
.drawer__h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px}
.drawer__h h2{margin:0;font-size:34px}
.drawer__items{flex:1;overflow:auto;padding:0 22px}
.ci{display:grid;grid-template-columns:80px 1fr auto;gap:14px;padding:14px;margin-bottom:10px;background:var(--paper);border-radius:16px}
.ci img{width:80px;height:80px;object-fit:cover;border-radius:12px}
.ci__t{font-weight:800;font-size:15px;line-height:1.25}
.ci__p{color:var(--mute);font-size:14px;margin-top:2px}
.ci .qty{height:36px;margin-top:8px;width:max-content;border-width:1px}
.ci .qty button{width:30px;font-size:16px}
.ci .qty input{width:28px;font-size:14px}
.ci__r{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;font-weight:800}
.ci__rm{border:0;background:none;color:var(--mute);font-size:12px;text-decoration:underline;padding:0}
.ci__rm:hover{color:var(--red)}
.drawer__f{padding:18px 22px 22px;display:grid;gap:10px;background:var(--paper);border-top:1px solid var(--line)}
.row{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:#4a463f}
.row--tot{font-size:22px;font-weight:900;color:var(--ink)}
.empty{padding:40px 0;text-align:center;color:var(--mute)}
.empty .display{font-size:52px;color:var(--ink);margin-bottom:12px}
.empty .btn{margin-top:14px}
.note{font-size:13px;color:var(--mute)}
.err{color:var(--red-ink);font-size:14px;font-weight:700;margin:0}
.err:empty{display:none}
.freebar{font-size:13px;color:#4a463f}

/* ---------- toast ---------- */
.toast{visibility:hidden;position:fixed;left:50%;bottom:24px;z-index:120;transform:translate(-50%,160%);background:var(--ink);color:var(--bone);padding:14px 22px;border-radius:999px;font-weight:700;display:flex;gap:10px;align-items:center;box-shadow:0 10px 40px rgba(0,0,0,.35);transition:transform .45s var(--ease)}
.toast.on{visibility:visible;transform:translate(-50%,0)}
.toast::before{content:"";width:10px;height:10px;border-radius:50%;background:#4ade80}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:var(--bone);padding:clamp(64px,8vw,110px) 0 28px;position:relative;overflow:hidden}
.ftr__top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.ftr__brand img{width:72px;height:72px;margin-bottom:18px}
.ftr__brand p{color:#bdb7ab;margin:0 0 6px;font-size:15px}
.ftr h4{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d);font-weight:400;margin:0 0 18px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftr a{transition:color .2s}
.ftr a:hover{color:#ff8a7c}
.ftr__word{font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:clamp(70px,16.5vw,290px);line-height:.8;letter-spacing:-.02em;margin:clamp(48px,7vw,96px) 0 18px;white-space:nowrap;color:var(--bone)}
.ftr__word .it{color:var(--red);font-size:1.02em}
.ftr__bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:22px;border-top:1px solid var(--ink-line);font-size:13px;color:var(--mute-d)}
.pay{display:flex;gap:6px;flex-wrap:wrap}
.pay span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;border:1px solid var(--ink-line);padding:4px 8px;border-radius:999px}
@media (max-width:860px){.ftr__top{grid-template-columns:1fr 1fr}.ftr__brand{grid-column:1/-1}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.split-in .w{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease)}
.split-in .ln{display:block;overflow:hidden;padding-bottom:.04em}
.split-in .ln.l2{padding-bottom:.24em;margin-bottom:-.2em}
.split-in.in .w{transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv,.split-in .w{opacity:1;transform:none}}

/* ---------- misc ---------- */
.center{text-align:center}
.success{min-height:72vh;display:grid;place-items:center;text-align:center;padding:60px 0}
.check{width:104px;height:104px;border-radius:50%;background:var(--red);display:grid;place-items:center;margin:0 auto 28px;box-shadow:0 0 0 14px rgba(217,48,31,.15)}
.check svg{width:46px;height:46px}
.hero__cta.center{justify-content:center}

/* ---------- refinements after review ---------- */
.cartbtn svg{width:19px;height:19px;flex:none}
.hero__copy{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px}
.hero__copy .lead{flex:1 1 340px;max-width:46ch}
.grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.price{flex-direction:column;align-items:flex-start;gap:0;line-height:1.1;white-space:nowrap}
.price s{font-size:13px}
.card__foot{align-items:flex-end}
.proof b .plus{color:var(--red)}
.logos img{height:72px;max-width:170px}
@media (max-width:700px){.grid{grid-template-columns:1fr}.logos{justify-content:center}.logos img{height:60px}}
@media (min-width:701px) and (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.announce{font-size:10.5px;letter-spacing:.08em}.announce .a1{display:none}}
@media (max-width:700px){.filters{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);padding:0 var(--pad) 4px;scrollbar-width:none}.chip{flex:none}}
.story .prose{font-size:18px}

/* ==========================================================================
   v3 — calmer landing
   ========================================================================== */
.sec{padding:clamp(72px,9vw,128px) 0}
.sec__head{align-items:flex-end;margin-bottom:clamp(28px,4vw,56px)}
.sec__head .display{margin:0}

.hero--calm{padding:clamp(24px,4vw,56px) 0 clamp(56px,7vw,96px)}
.hero--calm .hero__grid{grid-template-columns:1.15fr .85fr;align-items:center}
.hero--calm h1{font-size:clamp(78px,12.5vw,214px)}
.hero--calm .lead{margin:clamp(20px,2.4vw,32px) 0 clamp(26px,3vw,40px);font-size:clamp(18px,1.6vw,22px);max-width:30ch}
.hero--calm .hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px 28px}
.hero--calm .hero__visual{width:min(100%,480px)}
@media (max-width:960px){.hero--calm .hero__grid{grid-template-columns:1fr}.hero--calm .hero__visual{width:min(86%,400px)}}

/* cards: quieter */
.card__body{gap:6px;padding:18px 20px 20px}
.card__t{font-size:24px}
.card__inc{font-size:14px}
.card__sw{margin-top:6px}
.card__foot{padding-top:14px}

/* sports: title only */
.sport__t b{font-size:clamp(26px,2.4vw,38px)}

/* tape school, compact */
.school--calm{grid-template-columns:1.25fr 1fr;align-items:center}
.school--calm .video{aspect-ratio:16/10}
@media (max-width:900px){.school--calm{grid-template-columns:1fr}}

/* trust band */
.trust{padding:clamp(40px,5vw,64px) 0;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.trust__nums{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 40px}
.trust__nums div{display:flex;align-items:baseline;gap:14px}
.trust__nums b{font-weight:900;font-stretch:66%;font-size:clamp(56px,6vw,96px);line-height:.85}
.trust__nums .plus{color:var(--red)}
.trust__nums > div > span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.trust .logos{margin-top:clamp(28px,3.5vw,44px);justify-content:space-around}
@media (max-width:700px){.trust__nums{justify-content:flex-start;flex-direction:column;gap:10px}}

/* newsletter, compact */
.news{align-items:center;padding:clamp(32px,5vw,64px)}
.news::before{font-size:clamp(180px,24vw,360px);top:-18%}

/* smoother motion */
.rv{transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
@media (max-width:700px){
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .card{border-radius:12px}
  .card__img{margin:6px 6px 0;border-radius:9px}
  .card__body{padding:12px 12px 14px;gap:4px}
  .card__t{font-size:18px}
  .card__inc{font-size:12px;line-height:1.35}
  .card__sw button{width:26px;height:26px}.card__sw button .sw{width:16px;height:16px}
  .price{font-size:17px}.price s{font-size:11px}
  .add{width:40px;height:40px;padding:0;justify-content:center}
  .add span{display:none}
  .pill{height:22px;font-size:10px;padding:0 8px}
  .belt{height:52px}.belt__rank{width:84px;gap:6px}.belt__rank i{width:6px;height:52px}.belt__run{font-size:19px}
  .hero--calm .hero__visual{width:min(80%,360px)}
}
@media (max-width:700px){
  .trust__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .trust__nums div{flex-direction:column;gap:6px}
  .trust__nums b{font-size:44px}
  .trust__nums > div > span{font-size:10px;letter-spacing:.06em}
  .logos img{height:48px}
}

/* ==========================================================================
   v4 design pass — secondary-page polish, states, focus, consistency
   ========================================================================== */
/* the [hidden] attribute must always win over component display rules
   (fixes collection filters + empty-cart summary showing) */
[hidden]{display:none!important}

/* buttons: --solid was referenced in markup but never defined */
.btn--solid{background:var(--ink);color:var(--bone)}
.btn--solid:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn:focus-visible,.add:focus-visible,.chip:focus-visible,.opt__btn:focus-visible,.cartbtn:focus-visible,.iconbtn:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:999px}
.link{transition:color .2s,border-color .2s}
.link:hover{border-bottom-color:var(--red)}

/* ---- page heads: ruled base with a mini rank block (ties to the belt bar) ---- */
.phero{padding:clamp(40px,5.5vw,84px) 0 0}
.phero>.wrap{position:relative;padding-bottom:clamp(28px,3.6vw,48px)}
.phero>.wrap::before{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:5px;height:1.5px;background:var(--ink)}
.phero>.wrap::after{content:"";position:absolute;right:var(--pad);bottom:0;width:76px;height:12px;border-radius:2px;
  background:repeating-linear-gradient(90deg,transparent 0 6px,var(--bone) 6px 9px) right/32px 100% no-repeat,linear-gradient(90deg,var(--ink) 0 44px,var(--red) 44px)}
.phero .lead{margin-top:clamp(16px,2vw,24px)}
.phero .display.h2{font-size:clamp(46px,6.2vw,96px)}
.phero+.sec--tight{padding-top:clamp(32px,4.5vw,64px)}
.phero--post{padding-bottom:0}
.phero--post>.wrap{padding-bottom:0}
.phero--post>.wrap::before,.phero--post>.wrap::after{display:none}
.crumbs a{transition:color .2s}

/* ---- product cards ---- */
.card__img::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(18,18,18,.07);pointer-events:none}
.card:has([data-card-link]:focus-visible){box-shadow:0 0 0 2px var(--red),var(--shadow)}
.card__t a:focus-visible{outline:none}
.card__t a{transition:color .2s}
.card:hover .card__t a{color:var(--red-ink)}
.card__sw button{transition:border-color .2s,transform .2s var(--ease)}
.card__sw button:hover{transform:scale(1.08)}
.card__sw button:focus-visible{outline:2px solid var(--red);outline-offset:1px;border-radius:50%}
.pill{box-shadow:0 2px 8px -2px rgba(18,18,18,.25)}
@media (max-width:700px){.add{width:44px;height:44px}.card:hover{transform:none}}

/* ---- trust logos: equal tiles, no orphan row on mobile ---- */
.trust .logos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2vw,32px);justify-items:center}
.trust .logos a{width:100%;justify-content:center}
@media (max-width:700px){.trust .logos img{height:44px;max-width:100%}}

/* ---- PDP ---- */
.pdp__media .frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(18,18,18,.08);pointer-events:none}
.thumbs{gap:10px;margin-top:12px;padding-bottom:2px}
.thumb{border-radius:12px;border:2px solid transparent;opacity:.7;transition:opacity .2s,border-color .2s,transform .2s var(--ease)}
.thumb:hover{opacity:1;transform:translateY(-2px)}
.thumb.on{opacity:1;border-color:var(--ink)}
.pdp__price{padding-bottom:22px;border-bottom:1px solid var(--line)}
.pdp__desc{margin-top:20px}
.opt__btn{background:transparent}
.opt__btn:not(.on):hover{background:var(--paper)}
.acc summary{min-height:56px;align-items:center;padding:0;transition:color .2s}
.acc summary:hover{color:var(--red-ink)}
.acc details>div a{text-decoration-color:var(--red)!important;text-underline-offset:3px}
.qty{transition:border-color .2s}
.qty button{border-radius:999px;transition:background .2s}
.qty button:hover{background:var(--sand)}

/* ---- FAQ (shipping) ---- */
.faqwrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(32px,5vw,88px);align-items:start}
.faq summary{transition:color .2s;align-items:center}
.faq summary:hover{color:var(--red-ink)}
.faq details>div p{margin:0 0 14px}
.facts{position:sticky;top:110px;background:var(--paper);border-radius:var(--r);padding:26px 26px 24px;box-shadow:inset 0 0 0 1px var(--line)}
.facts dl{margin:14px 0 22px}
.facts dl>div{display:grid;grid-template-columns:88px 1fr;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line)}
.facts dl>div:last-child{border-bottom:0}
.facts dt{font-weight:900;font-stretch:66%;font-size:44px;line-height:.9;color:var(--ink)}
.facts dd{margin:0;font-size:15px;line-height:1.4;color:#4a463f}
.facts .btn{min-height:50px;font-size:13px}
@media (max-width:900px){.faqwrap{grid-template-columns:1fr}.facts{position:static}}

/* ---- contact ---- */
.contact{align-items:start}
.contact__info{background:var(--paper);border-radius:var(--r);padding:8px 28px;box-shadow:inset 0 0 0 1px var(--line)}
.cinfo__row{padding:20px 0;border-bottom:1px dashed var(--line)}
.cinfo__row:last-child{border-bottom:0}
.cinfo__row p{margin:8px 0 0;color:#3d3933}
.cinfo__big{font-weight:800;font-stretch:84%;font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.01em;color:var(--ink);transition:color .2s;overflow-wrap:anywhere}
.cinfo__big:hover{color:var(--red)}
.cinfo__social{display:flex;flex-wrap:wrap;gap:8px}
.cinfo__social a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;font-weight:700;font-size:14px;transition:border-color .2s,background .2s}
.cinfo__social a:hover{border-color:var(--ink);background:var(--bone)}
.form label{color:var(--ink)}
.form input,.form textarea,.select{transition:border-color .2s,box-shadow .2s}
.form input:hover,.form textarea:hover,.select:hover{border-color:#b9ad97}
.form input:focus,.form textarea:focus,.select:focus,.select:focus-visible{border-color:var(--ink);box-shadow:0 0 0 4px rgba(217,48,31,.14);outline:none}
.form__check{display:flex!important;grid-template-columns:none;gap:12px;align-items:center;font-weight:500!important;min-height:44px}
.form__check input{width:20px!important;height:20px;min-height:0!important;padding:0!important;margin:0;accent-color:var(--red);flex:none}
.form__check a{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.news__form{transition:box-shadow .2s}
.news__form:focus-within{box-shadow:0 0 0 4px rgba(18,18,18,.25)}

/* ---- cart page: items + sticky summary ---- */
.cartpage{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(20px,3vw,40px);align-items:start}
.cartpage:has(>[data-cart-foot][hidden]){grid-template-columns:1fr}
.cartpage .drawer__f{position:sticky;top:110px;border:0;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);padding:22px}
.cartpage .ci{margin-bottom:12px}
.cartpage .empty{padding:clamp(24px,5vw,72px) 0}
@media (max-width:860px){.cartpage{grid-template-columns:1fr}.cartpage .drawer__f{position:static}}
.ci{transition:box-shadow .2s}
.ci:hover{box-shadow:inset 0 0 0 1px var(--line)}
.drawer__h{border-bottom:1px solid var(--line);margin-bottom:14px}
.empty .display{font-size:clamp(44px,5vw,64px)}

/* ---- blog index + posts ---- */
.post-card{gap:12px}
.post-card__img{position:relative}
.post-card__img::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(18,18,18,.07);pointer-events:none}
.post-card h3{font-size:clamp(20px,1.7vw,24px);transition:color .2s}
.post-card:hover h3{color:var(--red-ink)}
.post-card:focus-visible{outline:2px solid var(--red);outline-offset:6px;border-radius:var(--r)}
.posts--all{column-gap:clamp(16px,2vw,32px);row-gap:clamp(36px,4vw,56px)}
.posts--all .post-card .post-card__img,.posts .post-card:first-child .post-card__img{aspect-ratio:4/3}
@media (min-width:961px){
  .posts--index .post-card:first-child,.posts--index .post-card:last-child:nth-child(3n+2){grid-column:1/-1;display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr auto auto auto 1fr;column-gap:clamp(28px,4vw,64px);row-gap:14px}
  .posts--index .post-card:first-child{padding-bottom:clamp(28px,3vw,44px);border-bottom:1.5px solid var(--ink)}
  .posts--index .post-card:first-child .post-card__img,.posts--index .post-card:last-child:nth-child(3n+2) .post-card__img{grid-row:1/-1;aspect-ratio:16/10}
  .posts--index .post-card:first-child>.label,.posts--index .post-card:last-child:nth-child(3n+2)>.label{grid-row:2}
  .posts--index .post-card:first-child h3,.posts--index .post-card:last-child:nth-child(3n+2) h3{grid-row:3;font-weight:900;font-stretch:70%;text-transform:uppercase;font-size:clamp(40px,4vw,64px);line-height:.92}
  .posts--index .post-card:first-child p,.posts--index .post-card:last-child:nth-child(3n+2) p{grid-row:4;font-size:17px;-webkit-line-clamp:4}
  .posts--index .post-card:last-child:nth-child(3n+2){padding-top:clamp(28px,3vw,44px);border-top:1.5px solid var(--ink)}
}
@media (max-width:560px){.facts dl>div{grid-template-columns:72px 1fr}.facts dt{font-size:38px}}
/* article */
.phero--post h1{text-wrap:balance}
article .prose>p:first-of-type::first-letter{font-size:3.4em;line-height:.78;padding:.08em .08em 0 0;margin-right:.04em}
.prose>:first-child{margin-top:0}
.prose .video{border-radius:var(--r);box-shadow:var(--shadow)}
.post-hero{position:relative;box-shadow:var(--shadow)}

/* ---- legal ---- */
.legal{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:start}
.legal__nav{position:sticky;top:110px;display:grid;gap:2px}
.legal__nav .label{margin-bottom:10px}
.legal__nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;font-weight:700;font-size:15px;color:#3d3933;transition:background .2s,color .2s}
.legal__nav a:hover{background:var(--sand);color:var(--ink)}
.legal__nav a[aria-current=page]{background:var(--ink);color:var(--bone)}
.legal .prose h2{font-size:clamp(24px,2.2vw,30px);padding-top:1.4em;border-top:1px solid var(--line)}
.legal .prose>h2:first-child{padding-top:0;border-top:0}
@media (max-width:860px){.legal{grid-template-columns:1fr}.legal__nav{position:static;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:0 calc(var(--pad)*-1);padding:0 var(--pad) 4px;scrollbar-width:none}.legal__nav .label{display:none}.legal__nav a{flex:none;border:1.5px solid var(--line);border-radius:999px;font-size:14px}}

/* ---- team / resellers ---- */
.member h3{margin-top:18px}
.member__img{position:relative}
.member__img::after{content:"";position:absolute;left:14px;bottom:14px;width:70px;height:12px;border-radius:2px;background:repeating-linear-gradient(90deg,transparent 0 6px,var(--bone) 6px 9px) right/30px 100% no-repeat,linear-gradient(90deg,var(--ink) 0 40px,var(--red) 40px);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ease)}
.member:hover .member__img::after{opacity:1;transform:none}
.reseller{box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .25s,transform .4s var(--ease)}
.reseller:hover{box-shadow:inset 0 0 0 1px var(--line),var(--shadow);transform:translateY(-3px)}
.reseller img{box-shadow:inset 0 0 0 1px var(--line)}
.reseller a{white-space:nowrap}

/* ---- about: keep the roll badge inside the viewport on small screens ---- */
@media (max-width:900px){.story__img .roll{right:10px;bottom:-26px;width:116px}.story .prose{margin-top:24px}}

/* ---- success / cancel / 404 ---- */
.success .lead{max-width:46ch}
.e404{display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.5vw,20px);margin:0;font-weight:900;font-stretch:62%;font-size:clamp(150px,24vw,300px);line-height:.8;color:var(--ink)}
.e404 .roll{position:relative;top:auto;right:auto;width:clamp(120px,19vw,240px)}
.e404 .roll .core{font-size:clamp(20px,2.4vw,30px)}

/* ---- footer: rank block sits on the top edge, links get a slide ---- */
.ftr ul a{display:inline-block;transition:color .2s,transform .25s var(--ease)}
.ftr ul a:hover{transform:translateX(3px)}
.ftr a:focus-visible{outline-color:#ff8a7c}
.ftr__brand a{transition:color .2s}

/* ---- mobile menu: staggered entrance + sign-off ---- */
@media (max-width:1080px){
  .mnav a{opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease),color .2s}
  .mnav.open a{opacity:1;transform:none}
  .mnav.open a:nth-of-type(2){transition-delay:.04s}.mnav.open a:nth-of-type(3){transition-delay:.08s}.mnav.open a:nth-of-type(4){transition-delay:.12s}
  .mnav.open a:nth-of-type(5){transition-delay:.16s}.mnav.open a:nth-of-type(6){transition-delay:.2s}.mnav.open a:nth-of-type(7){transition-delay:.24s}
  .mnav.open a:nth-of-type(8){transition-delay:.28s}.mnav.open a:nth-of-type(9){transition-delay:.32s}
  .mnav a:hover,.mnav a:focus-visible{color:#ff8a7c}
  .mnav::after{content:"Do you even tape, bro?";display:block;margin-top:28px;font-family:var(--serif);font-style:italic;font-size:28px;color:var(--red-2)}
  .mnav::before{content:"";position:absolute;top:0;left:0;width:clamp(96px,30vw,160px);height:10px;background:var(--red)}
}
@media (prefers-reduced-motion:reduce){.mnav a{opacity:1;transform:none}}
.legal .prose{font-size:17px;line-height:1.7}

/* ==========================================================================
   v5 UX pass — drawer/menu a11y, touch targets, cart feedback, PDP clarity,
   filter states, form states
   ========================================================================== */
html.is-locked,html.is-locked body{overflow:hidden}
/* closed drawer + closed mobile menu are not focusable / not read out */
.drawer:not(.on){visibility:hidden;transition:transform .5s var(--ease),visibility 0s linear .5s}
.drawer.on{visibility:visible}
.drawer:focus{outline:none}
.mnav:not(.open){visibility:hidden;transition:transform .5s var(--ease),visibility 0s linear .5s}
.mnav.open{visibility:visible}

/* cart lines — 44px touch targets */
.ci .qty{height:44px;border-width:1.5px}
.ci .qty button{width:42px;font-size:18px}
.ci .qty input{width:34px;font-size:15px}
.qty button:disabled{opacity:.3;cursor:not-allowed}
.qty button:disabled:hover{background:transparent}
.qty button:focus-visible,.qty input:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.qty:focus-within{border-color:var(--ink)}
.ci__rm{min-height:44px;min-width:44px;padding:0 2px;font-size:13px;font-weight:700;text-underline-offset:3px}
.ci__rm:focus-visible,.undo button:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:6px}
.ci__t:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
.ci__max{margin-top:6px;font-size:12px;font-weight:700;color:var(--red-ink)}
.ci--new{animation:ciNew 1.4s var(--ease)}
@keyframes ciNew{0%{box-shadow:0 0 0 2px var(--red)}100%{box-shadow:0 0 0 2px transparent}}
@media (max-width:480px){
  .drawer__h{padding:14px 16px}
  .drawer__items{padding:0 14px}
  .ci{grid-template-columns:64px 1fr auto;gap:12px;padding:12px}
  .ci img{width:64px;height:64px}
  .ci__t{font-size:14px}
  .drawer__f{padding:14px 16px 16px}
}
.undo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding:4px 6px 4px 14px;border:1.5px dashed var(--line);border-radius:14px;font-size:14px;color:var(--mute)}
.undo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.undo button{min-height:44px;padding:0 12px;border:0;background:none;font-weight:800;color:var(--ink);text-decoration:underline;text-underline-offset:3px;flex:none}
.eta{display:block;font-size:12px;color:var(--mute);font-weight:500;margin-top:1px}
.err a{text-decoration:underline}

/* add-to-cart confirmation on the button itself */
.add.is-added,.btn.is-added{background:var(--red)!important;color:#fff!important;border-color:var(--red)!important}
.btn--red.is-added{background:var(--ink)!important;border-color:var(--ink)!important}
.is-added svg{width:16px;height:16px;flex:none}
.btn.is-added{gap:8px}

/* PDP: total on the button, shipping cost before the cart */
.btn__sum{margin-left:12px;padding-left:12px;border-left:1px solid rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
.shipnote{margin:14px 0 0;font-size:13px;color:var(--mute)}
.shipnote a{text-decoration:underline;text-underline-offset:2px}
.stock-low{margin:12px 0 0;color:var(--red-ink);font-weight:700}
.stickybuy b{display:grid;min-width:0;line-height:1.2}
.stickybuy .sb__t{font-size:12px;font-weight:600;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stickybuy .sb__p{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.stickybuy .btn{flex:none}
html.is-locked .stickybuy{transform:translateY(140%)}
@media (max-width:900px){.has-stickybuy .ftr{padding-bottom:96px}}
.thumb:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* card swatches: 44px hit area, same look */
.card__sw button{position:relative}
.card__sw button::after{content:"";position:absolute;inset:-7px}
@media (max-width:700px){.card__sw{gap:10px}.card__sw button::after{inset:-9px}}

/* collection filters: count + empty state */
.filters{margin-bottom:14px}
.filters__count{margin:0 0 22px;color:var(--mute);min-height:1.4em}
.filters__empty{padding:48px 0;text-align:center}
.filters__empty .btn{margin-top:18px}

/* forms */
.news__msg.is-err,.form [data-msg].is-err{color:var(--red-ink)}
.news__msg.is-ok::before,.form [data-msg].is-ok::before{content:"✓ ";color:var(--red)}
.news__msg a,.form [data-msg] a{text-decoration:underline}
form[aria-busy=true] button[type=submit]{opacity:.7;cursor:progress}
.form .opt-tag{font-weight:500;color:var(--mute)}
.form input:user-invalid,.form textarea:user-invalid{border-color:var(--red-ink)}

/* success page order line */
.order-line{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:0 auto 28px;font-size:15px}
.buy .btn{min-width:0;overflow:hidden}
.btn__sum{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){
  .buy .qty button{width:38px}
  .buy .qty input{width:34px}
  .buy .btn{padding:0 14px;letter-spacing:.04em;gap:0;font-size:13px}
  .btn__sum{margin-left:8px;padding-left:8px}
}

/* ==========================================================================
   v7 — creative details (no frames): taped photo, tape stickers,
   hand-drawn underline, cursor badge, counting numbers, staggered reveal
   ========================================================================== */
/* hero photo "taped" to the page */
.hero__visual::before,.hero__visual::after{content:"";position:absolute;z-index:4;width:132px;height:34px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 40%,rgba(0,0,0,.04)),repeating-linear-gradient(90deg,rgba(241,236,226,.92) 0 3px,rgba(232,225,212,.92) 3px 6px);
  box-shadow:0 6px 14px -6px rgba(18,18,18,.35);
  clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,16% 8%,20% 0,80% 0,84% 9%,88% 0,92% 10%,96% 0,100% 8%,100% 92%,96% 100%,92% 90%,88% 100%,84% 91%,80% 100%,20% 100%,16% 92%,12% 100%,8% 90%,4% 100%,0 92%)}
.hero__visual::before{left:-30px;bottom:54px;transform:rotate(-28deg)}
.hero__visual::after{right:-28px;bottom:-8px;transform:rotate(24deg)}
@media (max-width:560px){.hero__visual::before{left:-18px;width:100px}.hero__visual::after{right:-14px;width:100px}}

/* discount = a torn strip of red tape */
.pill--red{border-radius:0;transform:rotate(-4deg);padding:0 12px;letter-spacing:.06em;
  clip-path:polygon(0 10%,5% 0,10% 12%,15% 0,85% 0,90% 12%,95% 0,100% 10%,100% 90%,95% 100%,90% 88%,85% 100%,15% 100%,10% 88%,5% 100%,0 90%);
  box-shadow:none}
.pdp__price .save{border-radius:0;transform:rotate(-3deg);clip-path:polygon(0 10%,5% 0,10% 12%,15% 0,85% 0,90% 12%,95% 0,100% 10%,100% 90%,95% 100%,90% 88%,85% 100%,15% 100%,10% 88%,5% 100%,0 90%)}

/* hand-drawn underline under "fingers." */

/* product grid: staggered entrance */
.grid .rv:nth-child(3n+2){transition-delay:.08s}
.grid .rv:nth-child(3n+3){transition-delay:.16s}

/* custom "View" cursor badge over product photos (desktop) */
.cursor-badge{position:fixed;left:0;top:0;z-index:80;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;transform:scale(0);transition:transform .25s var(--ease);will-change:transform,left,top}
.cursor-badge.on{transform:scale(1)}
@media (hover:none),(pointer:coarse){.cursor-badge{display:none}}

/* counting numbers keep width steady */
.trust__nums b,.stat b{font-variant-numeric:tabular-nums}

/* belt marquee pauses on hover */
.belt:hover .belt__run{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.cursor-badge{display:none}}

/* v7b — softer masking-tape strips */
.hero__visual::before,.hero__visual::after{width:120px;height:30px;
  background:linear-gradient(180deg,rgba(255,253,247,.86),rgba(239,232,218,.86));
  box-shadow:0 2px 6px -2px rgba(18,18,18,.25);backdrop-filter:blur(1px);
  clip-path:polygon(1% 0%,99% 0%,98.5% 7.1%,95.9% 14.3%,99.1% 21.4%,97.1% 28.6%,96.8% 35.7%,98.1% 42.9%,97.3% 50.0%,99.7% 57.1%,99.7% 64.3%,99.0% 71.4%,96.6% 78.6%,97.9% 85.7%,98.4% 92.9%,99% 100%,1% 100%,2.9% 92.9%,2.3% 85.7%,1.5% 78.6%,4.0% 71.4%,3.5% 64.3%,1.2% 57.1%,2.9% 50.0%,2.6% 42.9%,4.4% 35.7%,3.6% 28.6%,1.4% 21.4%,4.9% 14.3%,0.6% 7.1%)}
.hero__visual::before{left:-26px;bottom:60px;transform:rotate(-32deg)}
.hero__visual::after{right:-24px;bottom:-4px;transform:rotate(28deg)}

/* ==========================================================================
   v8 — creative polish (no frames, no textures): earned belt stripes,
   tape-strip highlight on headings, add-to-cart check, badge bump,
   card hover, low-stock hint, link wipe, footer wordmark rise,
   slide-progress ring on the roll badge, empty-cart roll, success check.
   Every hidden start state lives inside (prefers-reduced-motion:no-preference).
   ========================================================================== */
/* low-stock hint on cards */
.card__low{display:inline-flex;align-items:center;gap:7px;margin:0;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red-ink)}
.card__low::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.card__low[hidden]{display:none}
@media (max-width:700px){.card__low{font-size:10px;letter-spacing:.04em}}

/* price: struck-through "was" price gets a red strike */
.price s{text-decoration-color:var(--red);text-decoration-thickness:1.5px}

/* swatches: gentle lift on hover */
.card__sw button .sw{transition:transform .25s var(--ease)}
.card__sw button:hover .sw{transform:scale(1.14)}
.card__sw button{transition:border-color .2s}

/* links: red tape wipes over the underline */
.link{position:relative}
.link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.link:hover::after,.link:focus-visible::after{transform:scaleX(1);transform-origin:left}

.hero .roll{will-change:transform}

/* empty cart: a little roll of tape */
.empty::before{content:"";display:block;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;
  background:radial-gradient(circle,var(--bone) 0 30%,var(--red) 31% 38%,transparent 39%),conic-gradient(from 20deg,transparent 0 336deg,rgba(241,236,226,.35) 336deg 339deg,transparent 339deg),var(--ink);
  box-shadow:0 10px 18px -10px rgba(18,18,18,.45)}

@media (prefers-reduced-motion:no-preference){
  /* belt: the four degree stripes get "earned" one by one */
  .v8 .belt__rank i{transform:scaleY(0);transform-origin:top;transition:transform .55s cubic-bezier(.3,1.4,.5,1)}
  .v8 .belt__rank i:nth-child(2){transition-delay:.14s}
  .v8 .belt__rank i:nth-child(3){transition-delay:.28s}
  .v8 .belt__rank i:nth-child(4){transition-delay:.42s}
  .v8 .belt.is-earned .belt__rank i{transform:none}

  /* section headings: a translucent strip of tape behind the italic word */
  .rv .h2 .it.red{position:relative;isolation:isolate}
  .rv .h2 .it.red::before{content:"";position:absolute;z-index:-1;left:-.08em;right:-.1em;top:.5em;height:.32em;background:rgba(217,48,31,.13);
    transform:rotate(-1.5deg) scaleX(0);transform-origin:left center;transition:transform .8s var(--ease) .45s;
    clip-path:polygon(0 8%,2% 0,98% 4%,100% 0,99% 50%,100% 100%,2% 96%,0 100%,1% 50%)}
  .dark .rv .h2 .it.red::before{content:none}
  .rv.in .h2 .it.red::before{transform:rotate(-1.5deg) scaleX(1)}

  /* add to cart: the check draws itself as the icon rolls in */
  .is-added svg{animation:v8roll .5s var(--ease)}
  .is-added svg path{stroke-dasharray:22;stroke-dashoffset:22;animation:v8draw .4s .15s var(--ease) forwards}
  @keyframes v8roll{from{transform:rotate(-200deg) scale(.3)}to{transform:none}}
  @keyframes v8draw{to{stroke-dashoffset:0}}

  /* cart badge: springier bump with a red flash */
  .cartbtn .badge.bump{transform:none;animation:v8bump .3s var(--ease)}
  @keyframes v8bump{0%{transform:scale(1)}40%{transform:scale(1.32) rotate(-8deg);background:var(--red);color:#fff}100%{transform:scale(1)}}

  /* product photos: slow zoom with a slight tilt */
  @media (hover:hover){.card:hover .card__img img{transform:scale(1.07) rotate(-1.2deg)}}

  /* footer wordmark: letters rise in */
  .v8 .ftr__word .ch{display:inline-block;opacity:0;transform:translateY(.32em);transition:opacity .6s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * 55ms)}
  .v8 .ftr__word.is-in .ch{opacity:1;transform:none}

  /* empty cart roll rolls in */
  .empty::before{animation:v8rollin .9s var(--ease) both}
  @keyframes v8rollin{from{opacity:0;transform:translateX(-60px) rotate(-240deg)}to{opacity:1;transform:none}}

  /* success: badge pops, check draws */
  .check{animation:v8pop .6s var(--ease) both}
  .check svg path{stroke-dasharray:22;stroke-dashoffset:22;animation:v8draw .5s .35s var(--ease) forwards}
  @keyframes v8pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
}

/* ============ v9 trust band: rank stats + taped gym stickers ============ */
.trust{position:relative;overflow:hidden}
.trust .trust__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:0;align-items:end}
.trust .trust__nums>div{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:4px clamp(16px,3vw,48px) 0}
.trust .trust__nums>div:first-child{padding-left:0}
.trust .trust__nums>div+div{border-left:1px solid rgba(18,18,18,.14)}
.trust .trust__nums small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.trust .trust__nums b{font-size:clamp(64px,7.4vw,124px);line-height:.82}
.trust .trust__nums>div>span{font-family:var(--sans,inherit);font-size:17px;letter-spacing:0;text-transform:none;color:#3d3a34;margin-top:16px}
.trust .trust__nums>div>span .it{color:var(--red);font-size:1.25em;line-height:1}
/* mini belt under each number: black belt with red rank block + white stripes */
.trust .trust__nums b{position:relative;padding-bottom:22px}
.trust .trust__nums b::after{content:"";position:absolute;left:0;bottom:0;height:9px;width:clamp(90px,10vw,150px);border-radius:2px;
  background:linear-gradient(90deg,var(--ink) 0 62%,var(--red) 62% 100%);transform:scaleX(0);transform-origin:left;transition:transform 1s .25s var(--ease)}
.trust .trust__nums b::before{content:"";position:absolute;bottom:0;height:9px;left:calc(clamp(90px,10vw,150px)*.68);width:calc(clamp(90px,10vw,150px)*.26);z-index:1;
  background:repeating-linear-gradient(90deg,#fff 0 3px,transparent 3px 9px);opacity:0;transition:opacity .4s 1.1s}
.trust .trust__nums.in b::after{transform:none}
.trust .trust__nums.in b::before{opacity:1}
.trust .trust__nums>div:nth-child(2) b::after{transition-delay:.4s}
.trust .trust__nums>div:nth-child(3) b::after{transition-delay:.55s}

/* gyms: logos as stickers taped to the page */
.mats{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-top:clamp(44px,5vw,72px);padding-top:clamp(28px,3vw,40px);border-top:1px dashed rgba(18,18,18,.22)}
.mats__t{margin:0;font-weight:900;font-stretch:70%;text-transform:uppercase;font-size:clamp(26px,2.6vw,38px);line-height:1;letter-spacing:.005em}
.mats__t .label{display:block;font-family:var(--mono);font-weight:400;font-stretch:100%;font-size:11px;letter-spacing:.14em;color:var(--mute);margin-bottom:10px}
.mats__t .it{color:var(--red);font-size:1.15em;text-transform:none}
.trust .mats .logos{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,34px);margin:0;justify-content:flex-end;align-items:center}
.trust .mats .logos a.stk{position:relative;display:flex;align-items:center;justify-content:center;width:auto;height:96px;min-width:96px;padding:10px;background:#fff;border-radius:3px;
  filter:none;opacity:1;box-shadow:0 1px 0 rgba(0,0,0,.05),0 14px 26px -16px rgba(30,20,10,.45);transform:rotate(-3deg);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.trust .mats .logos a.stk:nth-child(2){transform:rotate(2.5deg) translateY(6px)}
.trust .mats .logos a.stk:nth-child(3){transform:rotate(-1.5deg) translateY(-4px)}
.trust .mats .logos a.stk:nth-child(4){transform:rotate(3deg) translateY(4px)}
.trust .mats .logos a.stk::before{content:"";position:absolute;top:-9px;left:50%;width:48px;height:17px;margin-left:-24px;transform:rotate(-4deg);
  background:rgba(232,222,196,.88);box-shadow:0 1px 2px rgba(0,0,0,.08);clip-path:polygon(3% 0,97% 4%,100% 50%,96% 100%,4% 96%,0 50%)}
.trust .mats .logos a.stk:nth-child(even)::before{transform:rotate(5deg)}
.trust .mats .logos a.stk:hover{transform:rotate(0) translateY(-6px) scale(1.04);box-shadow:0 1px 0 rgba(0,0,0,.05),0 22px 34px -18px rgba(30,20,10,.5)}
.trust .mats .logos a.stk img{height:76px;width:auto;max-width:180px;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.05);transition:filter .3s}
.trust .mats .logos a.stk:hover img{filter:none}
@media (max-width:900px){.mats{flex-direction:column;align-items:flex-start}.trust .mats .logos{justify-content:flex-start}}
@media (max-width:700px){
  .trust .trust__nums{align-items:start}.trust .trust__nums>div{padding:0 10px}
  .trust .trust__nums>div:first-child{padding-left:0}
  .trust .trust__nums small{font-size:9px;letter-spacing:.08em;margin-bottom:8px}
  .trust .trust__nums b{font-size:clamp(36px,11vw,52px);padding-bottom:14px}
  .trust .trust__nums b::after,.trust .trust__nums b::before{height:6px}
  .trust .trust__nums b::after{width:56px}.trust .trust__nums b::before{left:38px;width:15px}
  .trust .trust__nums>div>span{font-size:13px;margin-top:10px}
  .trust .mats .logos{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 18px;width:100%}
  .trust .mats .logos a.stk{height:84px}.trust .mats .logos a.stk img{height:64px;max-width:100%}
}
@media (prefers-reduced-motion:reduce){.trust .trust__nums b::after{transform:none}.trust .trust__nums b::before{opacity:1}}

/* ============ v11 footer belt: a real tied black belt (band + knot + tails with the red rank bar) ============ */
.ftr{padding-top:clamp(150px,13vw,190px)}
.ftr__belt{position:absolute;left:0;right:0;top:0;height:44px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#2c2c2c 0,#1b1b1b 38%,#0e0e0e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 22px -10px rgba(0,0,0,.85)}
/* woven fabric: very fine lengthwise ribs */
.ftr__belt::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);mix-blend-mode:screen}
.ftr__belt-tag{position:absolute;left:clamp(16px,5vw,80px);top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:#d6b25e;opacity:.85;text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 0 rgba(255,235,180,.15);white-space:nowrap}
.ftr__belt-tag i{font-style:normal;color:var(--red);opacity:1}
.ftr__word{padding-bottom:.2em;margin-bottom:0}
@media (max-width:700px){
  .ftr{padding-top:132px}
  .ftr__belt{height:34px}
  .ftr__belt-tag{font-size:9px;letter-spacing:.22em}
  .ftr__belt-tag .opt{display:none}
  }


/* ==========================================================================
   ===== v10 visual polish =====
   Refinement over decoration: type rhythm, page heads, panels with a belt cap,
   blog reading measure, cart/PDP/contact/shipping/resellers polish, mobile.
   No frames around photos. Every hidden start state sits inside
   (prefers-reduced-motion:no-preference).
   ========================================================================== */
:root{--measure:700px;--belt-cap:linear-gradient(90deg,var(--ink) 0 calc(100% - 64px),var(--red) calc(100% - 64px))}

/* ---- 1. typography: balanced headings, no widows in running text ---- */
h1,h2,h3,.display,.pdp__title,.card__t,.post-card h3,.quote{text-wrap:balance}
p,li,.lead,dd{text-wrap:pretty}
.lead{color:#3a362f}

/* ---- 2. page heads: title left, lead right, rule draws in ---- */
.phero .display.h1{font-size:clamp(60px,9vw,148px)}
.phero .display.h2{font-size:clamp(46px,6.8vw,112px)}
.phero .crumbs{margin-bottom:clamp(16px,1.8vw,24px)}
@media (min-width:861px){
  .phero>.wrap:has(>.lead){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34ch);column-gap:clamp(32px,5vw,96px);align-items:end}
  .phero>.wrap:has(>.lead)>.crumbs{grid-column:1/-1}
  .phero>.wrap:has(>.lead)>.lead{margin:0 0 .5em;max-width:34ch;font-size:clamp(17px,1.3vw,20px)}
}
@media (prefers-reduced-motion:no-preference){
  .phero:not(.phero--post)>.wrap::before{transform-origin:left;animation:v10draw 1.1s var(--ease) .1s both}
  .phero:not(.phero--post)>.wrap::after{animation:v10tip .5s var(--ease) .9s both}
  .phero .display,.phero>.wrap>.lead,.post-head{animation:v10rise .9s var(--ease) both}
  .phero>.wrap>.lead{animation-delay:.12s}
  @keyframes v10draw{from{transform:scaleX(0)}to{transform:none}}
  @keyframes v10tip{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
  @keyframes v10rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  /* translucent strip of red tape behind the italic word (same detail as home section heads) */
  .phero h1 .it.red{position:relative;isolation:isolate}
  .phero h1 .it.red::before{content:"";position:absolute;z-index:-1;left:-.06em;right:-.08em;top:.52em;height:.3em;background:rgba(217,48,31,.13);
    transform:rotate(-1.5deg);transform-origin:left center;animation:v10strip .8s var(--ease) .55s both;
    clip-path:polygon(0 8%,2% 0,98% 4%,100% 0,99% 50%,100% 100%,2% 96%,0 100%,1% 50%)}
  @keyframes v10strip{from{transform:rotate(-1.5deg) scaleX(0)}to{transform:rotate(-1.5deg) scaleX(1)}}
}

/* ---- 3. panels (cart summary, contact info, shipping facts) share a belt cap ---- */
.contact__info{position:relative}
.cartpage .drawer__f,.contact__info,.facts{overflow:hidden}
.cartpage .drawer__f::before,.contact__info::before,.facts::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;
  background:repeating-linear-gradient(90deg,transparent 0 6px,var(--paper) 6px 9px) right 14px top 0/34px 100% no-repeat,var(--belt-cap)}
.cartpage .drawer__f{padding-top:30px}
.contact__info{padding-top:16px}
.facts{padding-top:34px}
@media (max-width:900px){.facts{position:relative;top:auto}}
@media (max-width:860px){.cartpage .drawer__f{position:relative;top:auto}}

/* ---- 4. collection ---- */
.phero+.sec--tight .filters{margin-top:4px}
.chip{min-height:42px}
@media (max-width:700px){
  .filters{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);padding-right:44px}
}
.price s{color:#6f695f}

/* ---- 5. PDP ---- */
.pdp__title{text-wrap:balance}
.pdp .crumbs a{transition:color .2s}
.specs b{white-space:nowrap}
.box li{font-weight:600;color:#26231f}
@media (max-width:560px){
  .pdp__title{font-size:clamp(40px,12vw,56px)}
  .pdp__price{font-size:30px;gap:10px 12px}
  .pdp__price s{font-size:16px}
  .pdp__price .save{font-size:11px;padding:5px 10px}
  .specs b{font-size:21px}
  .specs div{padding:12px 12px}
  .specs span{font-size:9.5px}
}

/* ---- 6. cart page ---- */
.cartpage .ci{grid-template-columns:104px 1fr auto;gap:18px;padding:16px;border-radius:var(--r);align-items:center}
.cartpage .ci img{width:104px;height:104px;border-radius:10px}
.cartpage .ci__t{font-weight:900;font-stretch:76%;text-transform:uppercase;font-size:22px;line-height:1;letter-spacing:.005em;transition:color .2s}
.cartpage .ci__t:hover{color:var(--red-ink)}
.cartpage .ci__p{margin-top:6px}
.cartpage .ci__r{align-self:stretch;font-size:18px;font-variant-numeric:tabular-nums}
.row--tot{margin-top:4px;padding-top:14px;border-top:1px dashed var(--line);align-items:baseline}
.drawer .ci__t{font-weight:900;font-stretch:76%;text-transform:uppercase;font-size:18px;line-height:1.02;letter-spacing:.005em;transition:color .2s}
.drawer .ci__t:hover{color:var(--red-ink)}
.drawer .ci__p{margin-top:5px}
.cartpage .drawer__f .note{line-height:1.5}
@media (max-width:480px){
  .cartpage .ci{grid-template-columns:76px 1fr auto;gap:12px;padding:12px}
  .cartpage .ci img{width:76px;height:76px}
  .cartpage .ci__t{font-size:18px}
  .cartpage .ci__r{font-size:15px}
}
.row--tot span:last-child,.row span:last-child{font-variant-numeric:tabular-nums}

/* ---- 7. blog index ---- */
.post-card>.label{display:flex;align-items:center;gap:10px}
.post-card>.label::before{content:"";width:16px;height:3px;border-radius:1px;background:var(--red);flex:none;transition:width .4s var(--ease)}
.post-card:hover>.label::before{width:30px}
.post-card h3{letter-spacing:-.005em}
.post-card p{line-height:1.55}
@media (max-width:620px){
  .posts--all .post-card .post-card__img,.posts .post-card:first-child .post-card__img{aspect-ratio:16/10}
  .posts--all{row-gap:40px}
}

/* ---- 8. blog post: one reading axis, readable measure, real subheads ---- */
.post-head{max-width:var(--measure);margin:0 auto}
.post-head .crumbs{margin-bottom:28px}
.post-head h1{margin:14px 0 0;font-size:clamp(40px,5.2vw,80px);line-height:.9}
.post-hero{aspect-ratio:2.2/1;margin:clamp(28px,4vw,56px) 0 clamp(36px,5vw,72px)}
.prose--post{max-width:var(--measure);margin:0 auto;font-size:clamp(17px,1.25vw,19px);line-height:1.75}
article .prose>p:first-of-type::first-letter{float:left;font-size:4.5em;line-height:.74;padding:.1em .1em 0 0;margin:0 .02em 0 -.04em}
/* "<p><strong>1. Heading</strong><br>…" pattern from the old blog becomes a proper subhead */
.prose--post p>strong:first-child:has(+br){display:block;margin:1.9em 0 .45em;font-weight:900;font-stretch:72%;text-transform:uppercase;font-size:clamp(23px,2vw,28px);line-height:1;letter-spacing:.005em;color:var(--ink)}
.prose--post p>strong:first-child+br{display:none}
.prose--post ul{list-style:none;padding-left:0}
.prose--post ul>li{position:relative;padding-left:28px}
.prose--post ul>li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:5px;border-radius:1px;background:var(--red);transform:rotate(-6deg)}
.prose blockquote{margin:2em 0;padding:0 0 0 24px;border-left:4px solid var(--red);font-family:var(--serif);font-style:italic;font-size:1.45em;line-height:1.25;color:var(--ink)}
.prose figure{margin:2em 0}.prose figcaption{margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mute)}
.prose--post .video{margin:2.4em 0}
/* end mark: a short black belt with its red rank tip */
.prose--post::after{content:"";display:block;width:132px;height:10px;margin:clamp(40px,5vw,64px) auto 0;border-radius:2px;
  background:repeating-linear-gradient(90deg,transparent 0 5px,var(--bone) 5px 8px) right 6px top 0/24px 100% no-repeat,linear-gradient(90deg,var(--ink) 0 68%,var(--red) 68%)}
@media (max-width:620px){.post-hero{aspect-ratio:16/10}.post-head .crumbs{margin-bottom:20px}}

/* ---- 9. about ---- */
@media (min-width:901px){
  .story{align-items:start}
  .story__img{position:sticky;top:110px}
}
.story .quote{margin-top:0}
.story .prose p:has(>strong:only-child){position:relative;margin-top:2em;padding-top:22px;font-family:var(--serif);font-style:italic;font-size:clamp(26px,2.2vw,32px);line-height:1.15}
.story .prose p:has(>strong:only-child)>strong{font-weight:400}
.story .prose p:has(>strong:only-child)::before{content:"";position:absolute;left:0;top:0;width:56px;height:6px;border-radius:1px;background:linear-gradient(90deg,var(--ink) 0 62%,var(--red) 62%)}

/* ---- 10. team ---- */
.member .label{display:inline-flex;align-items:center;gap:8px}
.member .label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.member__img img{object-position:center 22%}
@media (min-width:761px){.team .member:nth-child(2){margin-top:clamp(32px,5vw,72px)}}
@media (max-width:760px){.team{gap:36px}.member__img{aspect-ratio:1/1.05}}

/* ---- 11. resellers ---- */
.country{display:flex;align-items:baseline;gap:18px;margin:0 0 22px}
.country .label{order:2;font-weight:400;font-stretch:100%;text-transform:uppercase;white-space:nowrap}
.country::after{content:"";order:1;flex:1;height:1.5px;align-self:center;background:var(--ink);opacity:.85}
.resellers{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:18px;margin-bottom:clamp(48px,6vw,80px)}
.resellers:last-child{margin-bottom:0}
.reseller{align-items:center;gap:22px;padding:24px 26px}
.reseller img{width:96px;height:96px}
.reseller h3{font-weight:900;font-stretch:74%;text-transform:uppercase;font-size:clamp(22px,1.9vw,26px);line-height:1;letter-spacing:.005em;margin:0 0 10px}
.reseller p{line-height:1.5;margin-bottom:12px}
.reseller a{display:inline-flex;align-items:center;min-height:32px}
.reseller a:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
@media (max-width:480px){.reseller{align-items:flex-start;padding:18px;gap:16px}.reseller img{width:72px;height:72px}}

/* ---- 12. contact ---- */
.contact{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.form{gap:18px}
.form label{font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);gap:8px}
.form label .opt-tag{letter-spacing:.06em;text-transform:none}
.form label.form__check{font-family:var(--display);font-size:14px;letter-spacing:0;text-transform:none}
.form input,.form textarea{font-family:var(--display);font-size:16px;letter-spacing:0;text-transform:none;font-weight:500}
.form textarea{min-height:180px}
.form .btn{margin-top:4px}
.cinfo__social a{min-height:44px}
@media (max-width:860px){.contact{grid-template-columns:1fr}}

/* ---- 13. shipping FAQ: numbered questions ---- */
.faq{counter-reset:q}
.faq summary{font-size:clamp(19px,1.6vw,22px);font-stretch:92%;letter-spacing:-.005em;line-height:1.3;padding:24px 0}
.faq summary::before{counter-increment:q;content:counter(q,decimal-leading-zero);flex:none;width:44px;align-self:flex-start;padding-top:.35em;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--red)}
.faq summary{justify-content:flex-start}
.faq summary::after{margin-left:auto}
.faq details>div{padding-left:44px}
@media (max-width:560px){.faq summary::before{width:34px}.faq details>div{padding-left:34px}}

/* ---- 14. 404 / success ---- */
.success h1{text-wrap:balance}

/* ---- 15. consistent interaction states ---- */
.opt__btn,.chip,.cinfo__social a,.btn{-webkit-tap-highlight-color:transparent}
.chip:active,.opt__btn:active,.cinfo__social a:active{transform:scale(.97)}
.legal__nav a:focus-visible,.cinfo__social a:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---- 16. mobile rhythm ---- */
@media (max-width:700px){
  .phero{padding-top:28px}
  .phero>.wrap{padding-bottom:26px}
  .phero .lead{font-size:17px}
  .phero+.sec--tight{padding-top:28px}
  .sec--tight{padding-bottom:64px}
}
@media (prefers-reduced-motion:reduce){
  .phero .display,.phero>.wrap>.lead,.post-head{animation:none}
}

/* ===== v11 small refinements: belts share the woven fabric look; sport cards earn a rank bar on hover ===== */
.belt{background:linear-gradient(180deg,#2a2a2a 0,#181818 40%,#0e0e0e 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.belt::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px);z-index:0}
.belt__track,.belt__rank{position:relative;z-index:1}
.belt__rank{background:linear-gradient(180deg,#e5422d,#b8261a)}
.sport::before{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;z-index:3;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);
  background:linear-gradient(90deg,var(--ink) 0 62%,var(--red) 62% 100%)}
.sport:hover::before,.sport:focus-visible::before{transform:none}
@media (prefers-reduced-motion:reduce){.sport::before{transition:none}}

/* ===== v12 announcement bar = a black belt (woven band, gold embroidery, tied knot, red rank bar earning its stripes, light glint) ===== */
.announce{position:relative;z-index:70;display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 var(--pad);overflow:visible;
  background:linear-gradient(180deg,#2d2d2d 0,#1a1a1a 42%,#0c0c0c 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.6)}
.announce::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px)}
.announce__msg{position:relative;margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#d9b866;
  text-shadow:0 1px 0 rgba(0,0,0,.75),0 -1px 0 rgba(255,232,170,.12)}
.announce__msg i{font-style:normal;color:var(--red);margin:0 .5em;font-size:.8em;vertical-align:1px}
.announce__msg b{color:var(--bone);font-weight:700}
/* red rank bar near the belt end, stripes are "earned" one by one */
.announce__rank{position:absolute;top:0;bottom:0;right:clamp(28px,5vw,72px);width:clamp(84px,9vw,128px);display:flex;align-items:stretch;justify-content:flex-end;gap:7px;padding-right:16px;
  background:linear-gradient(180deg,#e5422d,#b3241a);box-shadow:-1px 0 0 rgba(0,0,0,.45),1px 0 0 rgba(0,0,0,.45)}
.announce__rank i{flex:none;width:6px;background:var(--bone);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15)}
@media (prefers-reduced-motion:no-preference){
  .announce__rank i{transform:scaleY(0);animation:earn .45s cubic-bezier(.2,.8,.2,1.2) forwards}
  .announce__rank i:nth-child(1){animation-delay:.5s}.announce__rank i:nth-child(2){animation-delay:.68s}
  .announce__rank i:nth-child(3){animation-delay:.86s}.announce__rank i:nth-child(4){animation-delay:1.04s}
  .announce__sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none}
  .announce__sheen::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:22%;transform:skewX(-20deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);animation:sheen 9s ease-in-out 1.6s infinite}
}
@keyframes earn{to{transform:none}}
@keyframes sheen{0%{left:-30%}35%,100%{left:130%}}
@media (max-width:560px){
  .announce{justify-content:flex-start;min-height:36px}
  .announce__msg{font-size:10px;letter-spacing:.1em;white-space:nowrap}
  .announce__rank{width:62px;right:14px;gap:5px;padding-right:10px}.announce__rank i{width:4px}
}

/* ===== v13 footer belt matches the header belt: woven band, gold embroidery, red rank bar earning stripes, glint ===== */
.ftr{padding-top:clamp(110px,10vw,150px)}
.ftr__belt{height:44px}
.ftr__belt-tag{font-size:11.5px;letter-spacing:.2em;color:#d9b866}
.ftr__rank{position:absolute;top:0;bottom:0;right:clamp(28px,5vw,72px);width:clamp(84px,9vw,128px);display:flex;align-items:stretch;justify-content:flex-end;gap:7px;padding-right:16px;
  background:linear-gradient(180deg,#e5422d,#b3241a);box-shadow:-1px 0 0 rgba(0,0,0,.45),1px 0 0 rgba(0,0,0,.45)}
.ftr__rank i{flex:none;width:6px;background:var(--bone);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15)}
.ftr__belt-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .v8 .ftr__rank i{transform:scaleY(0);transition:transform .45s cubic-bezier(.2,.8,.2,1.2)}
  .ftr.is-earned .ftr__rank i{transform:none}
  .ftr.is-earned .ftr__rank i:nth-child(2){transition-delay:.18s}.ftr.is-earned .ftr__rank i:nth-child(3){transition-delay:.36s}.ftr.is-earned .ftr__rank i:nth-child(4){transition-delay:.54s}
  .ftr__belt-sheen::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:22%;transform:skewX(-20deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);animation:sheen 9s ease-in-out 4s infinite}
}
@media (max-width:700px){.ftr{padding-top:96px}.ftr__belt{height:36px}.ftr__rank{width:62px;right:14px;gap:5px;padding-right:10px}.ftr__rank i{width:4px}}

/* ===== v14 aesthetics =====
   Quiet, on-brand refinements: paper grain on bone, rank-bar accents that draw in,
   masking-tape strips where a photo is "taped" to the page, belt-glint on primary buttons,
   mat-blue as a secondary accent, gold embroidery used sparingly, smoother drawer/filter motion.
   No frames around photos, no new copy. Hidden start states live inside (prefers-reduced-motion:no-preference).
   ========================================================================== */
:root{
  --gold:#d9b866;
  --tape-strip:linear-gradient(180deg,rgba(255,253,247,.88),rgba(236,229,214,.88));
  --tape-clip:polygon(1% 0%,99% 0%,98.5% 7%,95.9% 14%,99.1% 21%,97.1% 29%,96.8% 36%,98.1% 43%,97.3% 50%,99.7% 57%,99.7% 64%,99% 71%,96.6% 79%,97.9% 86%,98.4% 93%,99% 100%,1% 100%,2.9% 93%,2.3% 86%,1.5% 79%,4% 71%,3.5% 64%,1.2% 57%,2.9% 50%,2.6% 43%,4.4% 36%,3.6% 29%,1.4% 21%,4.9% 14%,.6% 7%);
  --rank-tip:repeating-linear-gradient(90deg,transparent 0 5px,var(--paper) 5px 8px) right 7px top 0/23px 100% no-repeat,linear-gradient(90deg,var(--ink) 0 calc(100% - 44px),var(--red) calc(100% - 44px));
}

/* ---- 1. paper grain on bone (one tiny tiled SVG, painted once; cards stay clean paper) ---- */
body{background-color:var(--bone);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px;background-blend-mode:soft-light}
.dark{background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px)}

/* ---- 2. product cards: a rank bar draws along the base on hover; the + turns; woven placeholder while photos load ---- */
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;pointer-events:none;background:var(--rank-tip);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.card:hover::after,.card:focus-within::after{transform:none}
.card__img{background:repeating-linear-gradient(135deg,rgba(18,18,18,.035) 0 2px,transparent 2px 6px),var(--sand)}
.add svg{transition:transform .45s var(--ease)}
.add:hover svg,.add:focus-visible svg{transform:rotate(90deg)}
.add.is-added svg{transform:none}
.price{font-variant-numeric:tabular-nums}
@media (hover:none){.card::after{display:none}}

/* ---- 3. primary buttons: the same light glint that runs along the belts ---- */
.btn--red,.btn--ink,.btn--solid,.add{overflow:hidden;isolation:isolate}
.btn--red::after,.btn--ink::after,.btn--solid::after,.add::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;pointer-events:none;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);opacity:0}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .btn--red:hover::after,.btn--ink:hover::after,.btn--solid:hover::after,.add:hover::after{opacity:1;animation:v14glint .8s var(--ease) forwards}
}
@keyframes v14glint{from{left:-60%}to{left:130%}}
.btn--red:active,.btn--ink:active,.btn--solid:active{transform:scale(.975)}

/* ---- 4. eyebrow labels on section heads carry a tiny belt (ink + red tip) ---- */
.sec__head .label{display:inline-flex;align-items:center;gap:10px}
.sec__head .label::before{content:"";width:22px;height:5px;border-radius:1px;flex:none;background:linear-gradient(90deg,var(--ink) 0 60%,var(--red) 60%)}

/* ---- 5. newsletter: the red card is taped to the page; faint rayon weave ---- */
.news{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px),repeating-linear-gradient(-45deg,rgba(0,0,0,.03) 0 2px,transparent 2px 6px);box-shadow:0 30px 60px -36px rgba(120,20,10,.55)}
.news__form{box-shadow:0 10px 24px -14px rgba(60,10,5,.6)}
.news__form input::placeholder{color:#8a8378}
.wrap:has(>.news){position:relative}
.wrap:has(>.news)::before,.wrap:has(>.news)::after{content:"";position:absolute;z-index:2;top:-12px;width:118px;height:30px;pointer-events:none;
  background:var(--tape-strip);box-shadow:0 2px 6px -2px rgba(18,18,18,.25);clip-path:var(--tape-clip)}
.wrap:has(>.news)::before{left:calc(var(--pad) + 28px);transform:rotate(-7deg)}
.wrap:has(>.news)::after{right:calc(var(--pad) + 28px);transform:rotate(6deg)}
@media (max-width:560px){.wrap:has(>.news)::before,.wrap:has(>.news)::after{width:84px;height:24px;top:-9px}.wrap:has(>.news)::before{left:calc(var(--pad) + 14px)}.wrap:has(>.news)::after{right:calc(var(--pad) + 14px)}}

/* ---- 6. tape school video: the play button breathes ---- */
@media (prefers-reduced-motion:no-preference){
  .video__play::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(217,48,31,.4);animation:v14breathe 2.8s var(--ease) infinite}
}
@keyframes v14breathe{0%{box-shadow:0 0 0 0 rgba(217,48,31,.38)}70%,100%{box-shadow:0 0 0 26px rgba(217,48,31,0)}}

/* ---- 7. sport cards: index numbers stitched in gold, like the belt embroidery ---- */
.sport__n{color:var(--gold);background:rgba(12,12,12,.55);text-shadow:0 1px 0 rgba(0,0,0,.75),0 -1px 0 rgba(255,232,170,.12);letter-spacing:.16em}

/* ---- 8. PDP: photo taped to the page; shipping note with a mat-blue dot ---- */
.pdp__media::before,.pdp__media::after{content:"";position:absolute;z-index:3;width:116px;height:30px;pointer-events:none;
  background:var(--tape-strip);box-shadow:0 2px 6px -2px rgba(18,18,18,.25);clip-path:var(--tape-clip)}
.pdp__media::before{left:-30px;top:44px;transform:rotate(-30deg)}
.pdp__media::after{right:44px;top:-12px;transform:rotate(5deg)}
@media (max-width:560px){.pdp__media::before,.pdp__media::after{width:86px;height:24px}.pdp__media::before{left:-14px;top:28px}.pdp__media::after{right:26px;top:-10px}}
.shipnote::before{content:"";display:inline-block;width:8px;height:8px;margin-right:9px;vertical-align:1px;border-radius:50%;background:var(--mat);box-shadow:0 0 0 3px rgba(31,58,143,.14)}
.specs b{font-variant-numeric:tabular-nums}
.opt__btn{transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}

/* ---- 9. cart drawer: a belt cap that earns its stripes as it opens; contents glide in ---- */
.drawer::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,#1b1b1b 0 calc(100% - 92px),#c7301e calc(100% - 92px) calc(100% - 28px),#1b1b1b calc(100% - 28px)),#1b1b1b}
.drawer::after{content:"";position:absolute;top:0;right:40px;width:40px;height:8px;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 5px,var(--bone) 5px 9px)}
.drawer__h{padding-top:24px}
@media (prefers-reduced-motion:no-preference){
  .drawer::after{transform:scaleY(0);transform-origin:top;transition:transform .45s cubic-bezier(.2,.8,.2,1.2)}
  .drawer.on::after{transform:none;transition-delay:.45s}
  .drawer.on .drawer__items{animation:v14glide .55s var(--ease) .12s both}
  .drawer.on .drawer__f{animation:v14glide .55s var(--ease) .22s both}
}
@keyframes v14glide{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- 10. collection: filtered cards settle in; chips feel tactile ---- */
.chip:not(.on):hover{background:var(--paper)}
@media (prefers-reduced-motion:no-preference){
  .card.v14-pop{animation:v14pop .55s var(--ease) both;animation-delay:calc(var(--d,0) * 45ms)}
}
@keyframes v14pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.filters__count{display:flex;align-items:center;gap:8px}
.filters__count::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mat);flex:none}

/* ---- 11. blog: mat-blue rule, editorial underline wipe on titles ---- */
.post-card>.label::before{background:var(--mat)}
.post-card:hover h3{text-decoration:none}
.post-card h3>span{background:linear-gradient(var(--red),var(--red)) 0 100%/0 2px no-repeat;transition:background-size .55s var(--ease);padding-bottom:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.post-card:hover h3>span,.post-card:focus-visible h3>span{background-size:100% 2px}
.post-head .label{display:inline-flex;align-items:center;gap:10px}
.post-head .label::before{content:"";width:16px;height:3px;border-radius:1px;background:var(--mat);flex:none}

/* reading progress: a black belt fills as you read, the red tip earns its stripes at the end */
.readbar{position:fixed;left:0;right:0;top:0;height:4px;z-index:75;pointer-events:none}
.readbar .f{position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--k,0));transform-origin:left}
.readbar b{position:absolute;top:0;left:calc(var(--k,0) * 100%);width:34px;height:4px;margin-left:-34px;background:var(--red);display:flex;justify-content:flex-end;gap:3px;padding-right:5px;opacity:0;transition:opacity .3s}
.readbar.on b{opacity:1}
.readbar b i{width:3px;background:var(--bone);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.readbar.done b i{transform:none}
.readbar.done b i:nth-child(2){transition-delay:.1s}.readbar.done b i:nth-child(3){transition-delay:.2s}

/* ---- 12. team: each portrait taped to the page with one strip ---- */
.member{position:relative}
.member::before{content:"";position:absolute;z-index:3;top:-11px;left:50%;width:96px;height:26px;margin-left:-48px;pointer-events:none;
  background:var(--tape-strip);box-shadow:0 2px 6px -2px rgba(18,18,18,.25);clip-path:var(--tape-clip);transform:rotate(-4deg)}
.member:nth-child(2)::before{transform:rotate(3deg)}
.member:nth-child(3)::before{transform:rotate(-2deg)}

/* ---- 13. forms: the field you're in lights its label ---- */
.form label{transition:color .2s}
.form label:focus-within{color:var(--red-ink)}
.cinfo__social a{transition:border-color .2s,background .2s,transform .25s var(--ease)}
.cinfo__social a:hover{transform:translateY(-2px)}

/* ---- 14. toast speaks the brand: red rank tip instead of a green dot ---- */
.toast::before{width:22px;height:8px;border-radius:1px;background:repeating-linear-gradient(90deg,transparent 0 3px,var(--bone) 3px 5px) right 3px top 0/12px 100% no-repeat,var(--red)}