/* ============================================================
   bare. — website styles
   strict-minimal direction · bone ground · ink · warm accent
   ============================================================ */

:root{
  --bg:   #f3efe7;
  --bg2:  #ebe6db;
  --ink:  #15120e;
  --muted: rgba(21,18,14,0.55);
  --faint: rgba(21,18,14,0.40);
  --line: rgba(21,18,14,0.13);
  --line2: rgba(21,18,14,0.22);
  --accent: #a4654b;

  --grotesk: 'Inter Tight', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif: 'Instrument Serif', 'Times New Roman', serif;

  --wrap: 1280px;
  --pad: 56px;
  --header-h: 64px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 96px; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--grotesk);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.lc :where(h1,h2,h3,h4,p,a,span,button,li,div,th,td,input,em){ text-transform: lowercase; }
body.lc .keepcase, body.lc .keepcase *{ text-transform: none; }
/* mono labels are already lowercased by default in this brand */

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }

::selection{ background: var(--ink); color: var(--bg); }

/* ---------- shared atoms ---------- */
.wrap{ max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

.eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.mono{ font-family: var(--mono); }

.disp{
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 0;
  text-wrap: balance;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; letter-spacing:0.01em;
  padding: 15px 26px; border:0; cursor:pointer;
  background: var(--ink); color: var(--bg);
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.btn:hover{ background:#000; transform: translateY(-1px); }
.btn--ghost{
  background: transparent; color: var(--ink);
  border: 0.5px solid var(--line2);
}
.btn--ghost:hover{ background: var(--ink); color: var(--bg); transform: translateY(-1px); }
.btn--block{ width:100%; justify-content:center; }
.btn--light{ background: var(--bg); color: var(--ink); }
.btn--light:hover{ background:#fff; }

.rule{ height:0; border:0; border-top: 0.5px solid var(--line); margin:0; }

/* striped image placeholder */
.ph{
  position: relative;
  background: var(--bg2);
  background-image: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 13px);
  border: 0.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
}
.ph > span{
  position:relative; z-index:1;
  font-family: var(--mono); font-size:10px; letter-spacing:0.16em;
  text-transform: uppercase; color: var(--muted);
  white-space: pre-line; line-height:1.7; padding:14px;
}
.ph i{ position:absolute; width:9px; height:9px; opacity:.5; }
.ph i.tl{ top:8px; left:8px; border-top:1px solid var(--muted); border-left:1px solid var(--muted); }
.ph i.tr{ top:8px; right:8px; border-top:1px solid var(--muted); border-right:1px solid var(--muted); }
.ph i.bl{ bottom:8px; left:8px; border-bottom:1px solid var(--muted); border-left:1px solid var(--muted); }
.ph i.br{ bottom:8px; right:8px; border-bottom:1px solid var(--muted); border-right:1px solid var(--muted); }
.ph.dark{ background:#0e0c0a; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 13px); border-color: rgba(255,255,255,.12); }
.ph.dark > span, .ph.dark i{ color: rgba(255,255,255,.42); }
.ph.dark i{ border-color: rgba(255,255,255,.42); }

/* user-fillable image slots (drag & drop product photos) */
image-slot{ display:block; width:100%; }
image-slot::part(frame){ background: var(--bg2); }
image-slot::part(empty){ font-family: var(--mono); color: var(--muted);
  letter-spacing:0.08em; text-transform:uppercase; }

/* ============================================================
   announcement ticker
   ============================================================ */
.topbar{
  background: var(--ink); color: var(--bg);
  overflow: hidden; height: 34px;
  display:flex; align-items:center;
}
.topbar .track{
  display:flex; gap:64px; white-space:nowrap;
  font-family: var(--mono); font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase;
  animation: ticker 34s linear infinite;
  padding-left: 64px;
}
.topbar .track span{ opacity:.85; }
.topbar .track b{ color: var(--bg); font-weight:400; }
.topbar .track .dot{ color: var(--accent); }
@keyframes ticker{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .topbar .track{ animation:none; } }

/* ============================================================
   header / nav
   ============================================================ */
.hdr{
  position: sticky; top:0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 0.5px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.hdr.stuck{ border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); }
.hdr .bar{
  height: var(--header-h);
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
}
.brand{
  font-weight:500; font-size:26px; letter-spacing:-0.06em; line-height:1;
  font-feature-settings:"ss01"; user-select:none;
}
.brand .dot{ color: var(--accent); }
.nav{
  display:flex; gap:34px; justify-self:center;
  font-family: var(--mono); font-size:11px; letter-spacing:0.13em; text-transform:uppercase;
}
.nav a{ position:relative; padding:6px 0; color: var(--ink); opacity:.78; transition: opacity .15s; white-space:nowrap; }
.nav a:hover{ opacity:1; }
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--ink); transition: right .25s ease;
}
.nav a:hover::after{ right:0; }
.nav a.accent{ color: var(--accent); opacity:1; }
.hdr-right{ display:flex; align-items:center; gap:20px; justify-self:end;
  font-family: var(--mono); font-size:11px; letter-spacing:0.13em; text-transform:uppercase; }
.cart-btn{ background:transparent; border:0; cursor:pointer; color:var(--ink);
  font-family: var(--mono); font-size:11px; letter-spacing:0.13em; text-transform:uppercase;
  display:flex; align-items:center; gap:7px; padding:6px 0; }
.cart-btn .count{
  min-width:17px; height:17px; padding:0 4px; border-radius:999px;
  background: var(--accent); color:#fff; font-size:10px; letter-spacing:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .2s cubic-bezier(.3,1.4,.5,1);
}
.cart-btn.bump .count{ transform: scale(1.35); }
.hamburger{ display:none; background:transparent; border:0; cursor:pointer; padding:6px; }
.hamburger span{ display:block; width:22px; height:1.5px; background:var(--ink); margin:4px 0; transition:.2s; }

/* ============================================================
   hero
   ============================================================ */
.hero{ border-bottom: 0.5px solid var(--line); padding: 76px 0 64px; }
.hero-head{
  display:grid; grid-template-columns: 1.32fr 1fr; gap: 40px 56px; align-items:end;
  padding: 0 var(--pad) 52px;
}
.hero .eyebrow{ display:block; margin-bottom: 24px; }
.hero h1{ font-size: clamp(50px, 6.2vw, 98px); }
.hero .lede{ font-size: 18px; line-height:1.55; color: var(--muted); max-width: 440px; }
.hero .actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top: 30px; }
.hero-figure{
  position:relative; margin: 0 auto; max-width: 1140px;
  padding: 0 var(--pad);
}
.hero-figure img{ display:block; width:100%; height:auto; border: 0.5px solid var(--line); }
.hero-figure figcaption{
  position:absolute; left: calc(var(--pad) + 18px); bottom: 16px;
  font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--ink); background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding:7px 11px;
}
/* dark hero variant */
.hero.dark{ background: var(--ink); border-color: rgba(255,255,255,.14); }
.hero.dark h1{ color: var(--bg); }
.hero.dark .lede{ color: rgba(255,255,255,.6); }
.hero.dark .eyebrow{ color: rgba(255,255,255,.55); }
.hero.dark .btn--ghost{ color: var(--bg); border-color: rgba(255,255,255,.3); }
.hero.dark .btn--ghost:hover{ background: var(--bg); color: var(--ink); }
.hero.dark .btn{ background: var(--bg); color: var(--ink); }
.hero.dark .hero-figure img{ border-color: rgba(255,255,255,.16); }
.hero.dark figcaption{ color: var(--bg); background: color-mix(in srgb, var(--ink) 70%, transparent); }

/* credential strip */
.creds{ border-bottom: 0.5px solid var(--line); }
.creds .row{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding: 15px var(--pad);
  font-family: var(--mono); font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color: var(--muted);
}

/* ============================================================
   section scaffold
   ============================================================ */
.section{ padding: 116px 0; border-bottom: 0.5px solid var(--line); }
.section-head{
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
  margin-bottom: 56px;
}
.section-head h2{ font-size: clamp(40px, 5vw, 66px); max-width: 720px; order:2; }
.section-head .meta{ text-align:left; order:1; white-space:nowrap; }

/* ---------- method ---------- */
.method-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 30px; }
.step{ display:flex; flex-direction:column; border-top: 0.5px solid var(--line2); padding-top: 18px; }
.step .n{ font-family: var(--mono); font-size:11px; letter-spacing:0.2em; color: var(--muted); }
.step .ph{ aspect-ratio: 4/5; margin: 14px 0 18px; }
.step h3{ font-size: 23px; letter-spacing:-0.02em; line-height:1.1; margin:0; font-weight:500; }
.step p{ font-size: 14px; line-height:1.55; color: var(--muted); margin: 8px 0 0; }
.timeline{ position:relative; height:1px; background: var(--line2); margin-top: 56px; }
.timeline .node{ position:absolute; top:-3.5px; width:8px; height:8px; border-radius:50%; background: var(--ink); }
.timeline .cap{ position:absolute; top:16px; font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color: var(--muted); }

/* ---------- material / dissolve editorial ---------- */
.material{ background: var(--bg2); }
.material .grid{ display:grid; grid-template-columns: 1.35fr 0.65fr; gap: 64px; align-items:center; }
.material .serif-statement{
  font-family: var(--serif); font-weight:400; letter-spacing:-0.02em; line-height:0.9;
  font-size: clamp(72px, 9vw, 132px); margin:0;
}
.material .serif-statement em{ font-style: italic; }
.material .body{ font-size: 16px; line-height:1.6; color: var(--ink); max-width: 440px; margin-top: 30px; }
.material .body .drop{ font-family: var(--serif); font-size: 30px; line-height:1; float:left; margin: 4px 7px 0 0; }
.spec-list{ margin-top: 40px; border-top: 0.5px solid var(--line2); }
.spec-list .r{ display:flex; justify-content:space-between; gap:16px; padding: 13px 0; border-bottom: 0.5px solid var(--line); }
.spec-list .r .k{ font-family: var(--mono); font-size:12px; letter-spacing:0.04em; color: var(--muted); white-space:nowrap; }
.spec-list .r .v{ font-family: var(--mono); font-size:13px; font-variant-numeric: tabular-nums; white-space:nowrap; text-align:right; }
.material .visual .ph{ aspect-ratio: 5/6; }
.material .cap{ margin-top:14px; font-family: var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color: var(--muted); }

/* ---------- shop ---------- */
.shop-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 0.5px solid var(--line); }

/* the mitt — reusable premium band */
.mitt{
  margin-top: 1px; display:grid; grid-template-columns: 0.92fr 1.08fr;
  border: 0.5px solid var(--line2); background: var(--bg2);
}
.mitt-visual{ position:relative; overflow:hidden; min-height: 460px; }
.mitt-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mitt-cap{
  position:absolute; left:18px; bottom:16px; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--ink); background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding:7px 11px;
}
.mitt-body{ padding: 48px 52px; display:flex; flex-direction:column; align-items:flex-start; color: var(--ink); }
.mitt-body .tag{ font-family: var(--mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color: var(--accent); }
.mitt-body h3{ font-size: 54px; letter-spacing:-0.03em; line-height:0.95; margin: 14px 0 0; font-weight:500; }
.mitt-lede{ font-size: 16px; line-height:1.6; color: var(--muted); max-width: 430px; margin: 22px 0 0; }
.mitt-specs{ width:100%; max-width: 430px; margin: 30px 0 0; border-top: 0.5px solid var(--line2); }
.mitt-specs .ms{ display:flex; justify-content:space-between; gap:16px; padding: 12px 0; border-bottom: 0.5px solid var(--line); }
.mitt-specs .k{ font-family: var(--mono); font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color: var(--muted); }
.mitt-specs .v{ font-family: var(--mono); font-size:12.5px; color: var(--ink); }
.mitt-foot{ display:flex; align-items:center; gap:24px; margin-top: 34px; }
.mitt-foot .price{ font-size: 24px; letter-spacing:-0.02em; color: var(--ink); }
.mitt-foot .price .per{ font-family: var(--mono); font-size:11px; letter-spacing:0.04em; color: var(--faint); }
.mitt-foot .add{
  font-family: var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  background: var(--ink); color: var(--bg); border:0; cursor:pointer;
  padding: 14px 26px; transition: background .18s, transform .18s;
}
.mitt-foot .add:hover{ background:#000; transform: translateY(-1px); }
.mitt-bundle{ margin: 18px 0 0; font-family: var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color: var(--faint); }
.card{ position:relative; background: var(--bg); padding: 26px 24px 28px; display:flex; flex-direction:column; transition: background .2s; }
.card:hover{ background: var(--bg2); }
.card .thumb{ aspect-ratio: 1/1; margin-bottom: 22px; }
.card .shot, .card image-slot{ width:100%; aspect-ratio: 1/1; object-fit: cover; margin-bottom: 22px; }
.card .tag{ font-family: var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color: var(--accent); }
.card h3{ font-size: 25px; letter-spacing:-0.025em; margin: 9px 0 4px; font-weight:500; }
.card .desc{ font-size: 13.5px; line-height:1.5; color: var(--muted); margin:0 0 18px; min-height: 42px; }
.card .foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card .price{ font-family: var(--mono); font-size:15px; font-variant-numeric: tabular-nums; }
.card .price .per{ color: var(--muted); font-size:11px; }
.card .add{
  font-family: var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  background: var(--ink); color: var(--bg); border:0; padding: 11px 16px; cursor:pointer;
  transition: background .15s, transform .15s;
}
.card .add:hover{ background:#000; transform: translateY(-1px); }
.card.feature .tag{ color: var(--accent); }
.card .ribbon{
  position:absolute; top:26px; left:24px; z-index:3; white-space:nowrap;
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase;
  background: var(--accent); color:#fff; padding:5px 9px;
}

/* ---------- why better (stats) ---------- */
.why .grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 0.5px solid var(--line); }
.stat{ background: var(--bg); padding: 44px 36px; }
.stat .big{ font-size: clamp(56px, 6vw, 84px); font-weight:500; letter-spacing:-0.04em; line-height:0.92; }
.stat .lbl{ font-family: var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color: var(--muted); margin-top: 16px; }
.stat p{ font-size:14px; line-height:1.55; color: var(--muted); margin: 14px 0 0; max-width: 280px; }

/* ---------- for gyms (wholesale band) ---------- */
.gyms{ background: var(--bg2); color: var(--ink); border-bottom: 0.5px solid var(--line); position:relative; }
.gyms .regmark{ position:absolute; width:13px; height:13px; opacity:.4; }
.gyms .grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:56px; align-items:center; }
.gyms .eyebrow{ color: var(--accent); }
.gyms h2{ font-size: clamp(40px, 5.2vw, 70px); color: var(--ink); }
.gyms .sub{ color: var(--muted); font-size: 16px; line-height:1.6; max-width: 380px; }
.gyms .nums{ display:grid; grid-template-columns: repeat(2,1fr); border-top:0.5px solid var(--line2); margin-top: 40px; }
.gyms .nums .c{ padding: 22px 22px 22px 0; border-bottom:0.5px solid var(--line); }
.gyms .nums .c:nth-child(odd){ padding-left:0; }
.gyms .nums .c:nth-child(even){ padding-left:22px; border-left:0.5px solid var(--line); }
.gyms .nums .big{ font-size: 40px; font-weight:500; letter-spacing:-0.03em; }
.gyms .nums .t{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color: var(--muted); margin-top:8px; }
.gyms .cta{ margin-top: 36px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.gyms .panel{ border:0.5px solid var(--line2); padding: 30px; background: var(--bg); }
.gyms .panel .ph.dark{ aspect-ratio: 5/3; }
.gyms .panel ul{ list-style:none; margin:18px 0 0; padding:0; font-family:var(--mono); font-size:12px; line-height:1.9; color: var(--muted); }
.gyms .panel ul li::before{ content:"↳ "; color: var(--accent); }

/* ---------- reviews ---------- */
.reviews .grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.quote{ border-top: 0.5px solid var(--line2); padding-top: 22px; }
.quote .stars{ font-family: var(--mono); font-size:12px; letter-spacing:0.2em; color: var(--accent); }
.quote blockquote{ margin: 16px 0 0; font-size: 20px; line-height:1.4; letter-spacing:-0.015em; }
.quote .by{ margin-top: 20px; font-family: var(--mono); font-size:11px; letter-spacing:0.06em; color: var(--muted); }
.quote .by b{ color: var(--ink); font-weight:500; }

/* ---------- faq (the honest bit) ---------- */
.faq .grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items:start; }
.faq-intro{ position:sticky; top: 110px; }
.faq-intro h2{ font-size: clamp(40px, 5vw, 64px); line-height:0.96; letter-spacing:-0.03em; }
.faq-intro p{ color: var(--muted); font-size: 15px; line-height:1.6; max-width: 300px; margin-top: 26px; }
.faq-list{ border-bottom: 0.5px solid var(--line2); }
.qa{ border-top: 0.5px solid var(--line2); }
.qa > summary{
  list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:20px;
  padding: 24px 0; outline:none;
}
.qa > summary::-webkit-details-marker{ display:none; }
.qa .qx{ font-family: var(--mono); font-size:11px; letter-spacing:0.16em; color: var(--accent); flex:0 0 auto; padding-top:3px; }
.qa .q{ font-size: 22px; letter-spacing:-0.02em; line-height:1.2; font-weight:500; flex:1 1 auto; }
.qa .sign{ position:relative; flex:0 0 auto; width:14px; height:14px; margin-top:6px; }
.qa .sign::before, .qa .sign::after{
  content:""; position:absolute; background: var(--ink); transition: transform .2s, opacity .2s;
}
.qa .sign::before{ top:6px; left:0; width:14px; height:1.5px; }
.qa .sign::after{ left:6px; top:0; width:1.5px; height:14px; }
.qa[open] .sign::after{ transform: scaleY(0); opacity:0; }
.qa .a{
  padding: 0 38px 28px 47px; max-width: 600px;
  font-size: 15.5px; line-height:1.65; color: var(--muted);
}
.qa[open] > summary .q{ color: var(--ink); }
.faq-fine{
  margin: 28px 0 0; padding-left: 47px;
  font-family: var(--mono); font-size:10.5px; line-height:1.7; letter-spacing:0.04em;
  text-transform: uppercase; color: var(--faint); max-width: 560px;
}

/* ---------- newsletter / subscribe ---------- */
.subscribe{ text-align:center; }
.subscribe h2{ font-size: clamp(44px, 6vw, 88px); }
.subscribe .serif{ font-family: var(--serif); font-style:italic; }
.subscribe p{ color: var(--muted); font-size: 16px; max-width: 460px; margin: 22px auto 0; }
.subform{ display:flex; gap:10px; max-width: 480px; margin: 38px auto 0; }
.subform input{
  flex:1; min-width:0; background: transparent; border:0; border-bottom: 1px solid var(--line2);
  font-family: var(--grotesk); font-size:16px; color: var(--ink); padding: 12px 4px; outline:none;
}
.subform input::placeholder{ color: var(--faint); }
.subform input:focus{ border-bottom-color: var(--ink); }
.subnote{ margin-top: 18px; font-family: var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color: var(--faint); }
.subscribe.done .subform{ display:none; }
.subscribe .thanks{ display:none; margin-top: 32px; font-family: var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color: var(--accent); }
.subscribe.done .thanks{ display:block; }

/* ============================================================
   footer
   ============================================================ */
.footer{ padding: 88px 0 40px; }
.footer .logo-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; padding-bottom: 40px; border-bottom: 0.5px solid var(--line); }
.footer .logo-row .brand{ font-size: clamp(90px, 13vw, 200px); letter-spacing:-0.07em; }
.footer .def{ font-family: var(--mono); font-size:12px; color: var(--muted); max-width: 280px; text-align:right; line-height:1.7; }
.footer .cols{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding: 48px 0; }
.footer .cols h4{ font-family: var(--mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color: var(--muted); margin:0 0 16px; font-weight:400; }
.footer .cols a{ display:block; font-size:14px; color: var(--ink); opacity:.8; padding: 5px 0; transition: opacity .15s, padding-left .15s; }
.footer .cols a:hover{ opacity:1; padding-left: 5px; }
.footer .cols .lead{ font-size:15px; color: var(--muted); max-width: 320px; line-height:1.6; }
.footer .fine{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top: 28px; border-top: 0.5px solid var(--line);
  font-family: var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color: var(--faint); }

/* ============================================================
   cart drawer
   ============================================================ */
.scrim{ position:fixed; inset:0; background: rgba(21,18,14,.34); z-index: 90; opacity:0; visibility:hidden; transition: opacity .3s ease, visibility .3s; }
.scrim.open{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width: min(420px, 92vw); z-index: 100;
  background: var(--bg); border-left: 0.5px solid var(--line2);
  transform: translateX(100%); transition: transform .34s cubic-bezier(.4,.0,.1,1);
  display:flex; flex-direction:column;
}
.drawer.open{ transform: translateX(0); }
.drawer .d-hd{ display:flex; align-items:center; justify-content:space-between; padding: 24px 26px; border-bottom: 0.5px solid var(--line); }
.drawer .d-hd .ttl{ font-family: var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; }
.drawer .d-close{ background:transparent; border:0; cursor:pointer; font-size:18px; line-height:1; color: var(--muted); width:30px; height:30px; }
.drawer .d-close:hover{ color: var(--ink); }
.drawer .items{ flex:1; overflow-y:auto; padding: 8px 26px; }
.drawer .empty{ padding: 60px 26px; text-align:center; color: var(--muted); font-family: var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; }
.line-item{ display:grid; grid-template-columns: 56px 1fr auto; gap:16px; align-items:center; padding: 18px 0; border-bottom: 0.5px solid var(--line); }
.line-item .li-thumb{ width:56px; height:56px; }
.line-item .li-name{ font-size:15px; letter-spacing:-0.01em; }
.line-item .li-meta{ font-family: var(--mono); font-size:11px; color: var(--muted); margin-top:3px; }
.qty{ display:inline-flex; align-items:center; gap:0; border:0.5px solid var(--line2); margin-top:9px; }
.qty button{ width:24px; height:24px; border:0; background:transparent; cursor:pointer; color: var(--ink); font-size:13px; line-height:1; }
.qty button:hover{ background: var(--bg2); }
.qty span{ min-width:26px; text-align:center; font-family: var(--mono); font-size:12px; }
.li-price{ font-family: var(--mono); font-size:13px; font-variant-numeric: tabular-nums; }
.drawer .d-foot{ border-top: 0.5px solid var(--line2); padding: 22px 26px 26px; }
.d-foot .subtotal{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom: 8px; }
.d-foot .subtotal .s-lbl{ font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color: var(--muted); }
.d-foot .subtotal .s-val{ font-family:var(--mono); font-size:19px; font-variant-numeric: tabular-nums; }
.d-foot .ship-note{ font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color: var(--faint); margin-bottom: 18px; }

/* ============================================================
   mobile menu
   ============================================================ */
.mobile-menu{
  position:fixed; inset:0; z-index: 95; background: var(--bg);
  transform: translateY(-100%); transition: transform .36s cubic-bezier(.4,0,.1,1), visibility 0s linear .36s;
  visibility: hidden; pointer-events: none;
  display:flex; flex-direction:column; padding: 24px var(--pad);
}
.mobile-menu.open{ transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform .36s cubic-bezier(.4,0,.1,1); }
.mobile-menu .mm-top{ display:flex; align-items:center; justify-content:space-between; height: var(--header-h); }
.mobile-menu .mm-close{ background:transparent; border:0; font-size:24px; cursor:pointer; color: var(--ink); }
.mobile-menu nav{ display:flex; flex-direction:column; gap:6px; margin-top: 40px; }
.mobile-menu nav a{ font-size: 40px; letter-spacing:-0.03em; font-weight:500; padding: 8px 0; border-bottom: 0.5px solid var(--line); }
.mobile-menu .mm-foot{ margin-top:auto; font-family: var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color: var(--muted); display:flex; justify-content:space-between; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1080px){
  :root{ --pad: 36px; }
  .hero-head{ grid-template-columns: 1fr; gap: 26px; align-items:start; }
  .hero .lede{ max-width: 540px; }
  .material .grid{ grid-template-columns: 1fr; gap: 44px; }
  .faq .grid{ grid-template-columns: 1fr; gap: 36px; }
  .faq-intro{ position:static; }
  .gyms .grid{ grid-template-columns: 1fr; gap: 44px; }
  .shop-grid{ grid-template-columns: repeat(3,1fr); }
  .footer .cols{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px){
  :root{ --pad: 22px; }
  body{ font-size: 16px; }
  .nav{ display:none; }
  .hdr-right .cart-label{ display:none; }
  .hamburger{ display:block; }
  .section{ padding: 76px 0; }
  .section-head{ margin-bottom: 44px; }
  .method-grid{ grid-template-columns: repeat(2,1fr); gap: 24px 20px; }
  .why .grid{ grid-template-columns: 1fr; }
  .shop-grid{ grid-template-columns: 1fr; }
  .mitt{ grid-template-columns: 1fr; }
  .mitt-visual{ min-height: 320px; aspect-ratio: 3/2; }
  .mitt-body{ padding: 36px 26px; }
  .mitt-body h3{ font-size: 44px; }
  .reviews .grid{ grid-template-columns: 1fr; gap: 8px; }
  .quote{ padding-top:18px; }
  .gyms .nums{ grid-template-columns: 1fr 1fr; }
  .creds .row{ gap: 8px 18px; font-size: 9.5px; }
  .footer .cols{ grid-template-columns: 1fr; gap: 28px; }
  .footer .logo-row{ justify-content:flex-start; }
  .footer .def{ text-align:left; }
  .timeline{ display:none; }
}
@media (max-width: 480px){
  .shop-grid{ grid-template-columns: 1fr; }
  .method-grid{ grid-template-columns: 1fr; }
}