/* ===== Equipment page (extends style.css) ===== */
.page-hero{padding-top:calc(74px + clamp(50px,7vw,90px));padding-bottom:clamp(30px,4vw,50px);position:relative}
.page-hero .hero-grid{position:absolute;inset:0;z-index:0}
.crumbs{font-family:var(--mono);font-size:12px;color:var(--mut);letter-spacing:.06em;margin-bottom:22px;position:relative;z-index:2}
.crumbs a:hover{color:var(--y)}
.page-hero h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(40px,8vw,110px);line-height:.9;position:relative;z-index:2}
.page-hero .plead{font-size:clamp(16px,1.8vw,20px);color:var(--mut);max-width:58ch;margin-top:22px;position:relative;z-index:2}

/* brands */
.brands-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.brandcard{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,2.6vw,34px);position:relative;overflow:hidden;transition:transform .5s var(--E),border-color .4s;min-height:230px;display:flex;flex-direction:column}
.brandcard:hover{transform:translateY(-6px);border-color:rgba(254,197,2,.4)}
.brandcard .bc-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.28;transition:opacity .5s,transform 1.2s var(--E)}
.brandcard:hover .bc-bg{opacity:.45;transform:scale(1.07)}
.brandcard::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,var(--panel) 6%,rgba(21,21,24,.55) 52%,rgba(21,21,24,.2))}
.brandcard>*{position:relative;z-index:2}
.brandcard .bn{font-family:var(--disp);font-size:clamp(30px,3.4vw,44px);text-transform:uppercase;letter-spacing:.01em}
.brandcard .bt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--y);margin-top:6px}
.brandcard p{font-size:14px;color:var(--mut);margin-top:16px;line-height:1.55}
.brandcard .btags{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:7px}
.brandcard .btags span{font-family:var(--mono);font-size:11px;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:5px 9px}
.brands-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.subcard{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.subcard b{font-family:var(--disp);font-size:19px;text-transform:uppercase}
.subcard span{font-family:var(--mono);font-size:11px;color:var(--mut)}

/* categories */
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.catcard{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1/1;border:1px solid var(--line)}
.catcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--E)}
.catcard:hover img{transform:scale(1.06)}
.catcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.9) 8%,transparent 55%)}
.catcard .cc{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px}
.catcard .cnum{position:absolute;top:15px;left:16px;z-index:2;font-family:var(--mono);font-size:11px;color:#fff;background:rgba(0,0,0,.4);padding:4px 9px;border-radius:6px}
.catcard h4{font-family:var(--disp);font-size:23px;text-transform:uppercase;color:#fff}
.catcard .cbr{font-family:var(--mono);font-size:11px;color:var(--y);margin-top:5px}
.catcard p{font-size:12.5px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.45}

/* pricing reuse (light card) */
.priceblk{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:clamp(28px,4vw,52px)}
.priceblk h3{font-family:var(--disp);font-size:clamp(24px,3vw,36px);text-transform:uppercase;margin-bottom:8px}
.priceblk .pl{font-size:15px;color:var(--mut);line-height:1.55;max-width:44ch}

/* ===== SkillAthletic ===== */
.skill-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4vw,60px);align-items:center}
.wheel{width:100%;max-width:400px;margin:0 auto;display:block}
.wheel .seg{cursor:pointer;transition:fill .3s,opacity .3s;fill:rgba(255,255,255,.05);stroke:var(--bg);stroke-width:3}
.slide.light .wheel .seg,.light .wheel .seg{fill:rgba(20,17,9,.05)}
.wheel .seg:hover{fill:rgba(254,197,2,.2)}
.wheel .seg.act{fill:var(--y)}
.wheel .wlabel{cursor:pointer}
.wheel .wl-name{font-family:var(--disp);font-size:16px;text-transform:uppercase;fill:var(--fg);letter-spacing:.02em;transition:fill .3s}
.wheel .wl-fmt{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;fill:var(--mut2);transition:fill .3s}
.wheel .wlabel.act .wl-name{fill:var(--y)}
.wheel .wlabel.act .wl-fmt{fill:var(--y)}
.wheel .center{fill:var(--bg2)}
.light .wheel .center{fill:#fff}
.wheel .c-eyebrow{font-family:var(--mono);font-size:8px;letter-spacing:.02em;fill:var(--mut2)}
.wheel .cname{font-family:var(--disp);font-size:17px;text-transform:uppercase;fill:var(--y);transition:fill .3s}
.wpanel .weyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--y)}
.wpanel h3{font-family:var(--disp);font-size:clamp(28px,3.4vw,44px);text-transform:uppercase;margin:10px 0 14px;min-height:1.1em}
.wpanel p{font-size:15.5px;color:var(--mut);line-height:1.6;max-width:46ch;min-height:5.2em}
.wpanel .wfmt{margin-top:20px;display:inline-flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 18px}
.wpanel .wfmt .wf-l{font-family:var(--mono);font-size:11px;color:var(--mut);text-transform:uppercase}
.wpanel .wfmt .wf-v{font-family:var(--disp);font-size:22px;text-transform:uppercase;color:var(--y)}

/* formats + features */
.fmts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fmt{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;transition:transform .4s var(--E),border-color .3s}
.fmt:hover{transform:translateY(-5px);border-color:rgba(254,197,2,.4)}
.fmt .fmt-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.16;transition:opacity .5s,transform 1s var(--E)}
.fmt:hover .fmt-bg{opacity:.34;transform:scale(1.07)}
.fmt::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,var(--panel) 12%,rgba(21,21,24,.45))}
.fmt>*{position:relative;z-index:2}
.fmt .fn{font-family:var(--disp);font-size:26px;text-transform:uppercase;color:var(--y)}
.fmt p{font-size:13px;color:var(--mut);margin-top:8px;line-height:1.5}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.featc{background:var(--bg);padding:clamp(20px,2.6vw,30px)}
.light .featc{background:var(--panel)}
.featc .fv{font-family:var(--disp);font-size:clamp(30px,3.4vw,46px);color:var(--y);line-height:.9}
.featc h4{font-size:15px;font-weight:800;margin:12px 0 6px}
.featc p{font-size:12.5px;color:var(--mut)}

@media(max-width:980px){
  .brands-grid,.catgrid,.fmts,.feat{grid-template-columns:repeat(2,1fr)}
  .brands-sub{grid-template-columns:1fr}
  .skill-wrap,.priceblk{grid-template-columns:1fr}
}
@media(max-width:560px){
  .brands-grid,.catgrid,.fmts,.feat{grid-template-columns:1fr}
}