/* THE BIKEPACK — About page. Builds on site.css. Linked only on about.html. */

/* ---- Story split (text + image) ---- */
.ab-story{padding:clamp(56px,6vw,72px) 0}
.ab-story-grid{max-width:1200px;margin:0 auto;padding:0 var(--sp-6, 40px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:center}
.ab-story-text .eyebrow{margin:0}
.ab-story-text h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(2rem,3.6vw,3rem);line-height:.98;color:var(--ink);margin:16px 0 0}
.ab-story-text p{font-family:var(--font-serif);font-size:1.18rem;line-height:1.66;color:var(--ink);margin:22px 0 0;max-width:54ch}
.ab-story-text .sig{font-family:var(--font-serif);font-style:italic;color:var(--muted);margin-top:24px;font-size:1.05rem}
.ab-story-media{position:relative}
.ab-story-media img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;object-position:center 58%;border-radius:var(--r-md);box-shadow:var(--shadow-img)}
.ab-story.flip .ab-story-grid{grid-template-columns:.95fr 1.05fr}
.ab-story.flip .ab-story-media{order:-1}

/* ---- Riders ---- */
.ab-riders{padding:clamp(56px,6vw,72px) 0}
.ab-riders-wrap{max-width:1200px;margin:0 auto;padding:0 var(--sp-6, 40px)}
.ab-riders-head{text-align:center;margin:0 0 clamp(36px,4vw,52px)}
.ab-riders-head .eyebrow{margin:0}
.ab-riders-head h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;color:var(--ink);margin:14px 0 0}
.rider-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px)}
.rider{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card)}
.rider-img{aspect-ratio:4/3;overflow:hidden}
.rider-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.rider:hover .rider-img img{transform:scale(1.04)}
.rider-body{padding:28px 30px 32px}
.rider-body .r-name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.5rem;line-height:1;color:var(--ink)}
.rider-body .r-role{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--act);margin-top:8px}
.rider-body .r-bio{font-family:var(--font-serif);font-size:1.05rem;line-height:1.55;color:var(--ink-soft);margin-top:16px}
.rider-body .r-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.rider-body .r-tag{font-family:var(--font-ui);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--hairline-strong);border-radius:var(--r-pill);padding:6px 13px}

/* ---- By the numbers ---- */
.ab-stats{background:var(--char);color:var(--on-dark);padding:clamp(70px,8vw,100px) 0}
.ab-stats-wrap{max-width:1100px;margin:0 auto;padding:0 var(--sp-6, 40px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px;text-align:center}
.ab-stat .v{font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,4.5vw,3.6rem);line-height:1;color:#fff}
.ab-stat .v .u{color:var(--act);font-size:.5em;margin-left:3px}
.ab-stat .k{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-muted);margin-top:12px}

/* ---- Supported by ---- */
.ab-support{padding:clamp(56px,6vw,72px) 0;text-align:center}
.ab-support-wrap{max-width:1100px;margin:0 auto;padding:0 var(--sp-6, 40px)}
.ab-support .eyebrow{margin:0}
.ab-support h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;color:var(--ink);margin:14px 0 0}
.ab-support .sub-line{font-family:var(--font-serif);font-style:italic;color:var(--muted);font-size:1.1rem;
  margin:16px auto 0;max-width:52ch;line-height:1.5}
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:clamp(40px,5vw,60px) 0 0}
.partner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);padding:34px 24px;min-height:132px;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.partner:hover{border-color:var(--act);transform:translateY(-2px)}
.partner .p-name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  font-size:1.3rem;color:var(--ink);line-height:1.12;text-align:center}
.partner .p-kind{font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ab-support .indep{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin:clamp(34px,4vw,46px) 0 0;display:inline-flex;align-items:center;gap:10px}
.ab-support .indep:before,.ab-support .indep:after{content:"";width:30px;height:1px;background:var(--hairline-strong)}

/* ---- Contact ---- */
.ab-contact{background:var(--cream-2, #efe9e3);padding:clamp(56px,6vw,72px) 0}
.ab-contact-grid{max-width:1100px;margin:0 auto;padding:0 var(--sp-6, 40px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start}
.ab-contact-text .eyebrow{margin:0}
.ab-contact-text h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.9rem,3.2vw,2.8rem);line-height:.98;color:var(--ink);margin:14px 0 0}
.ab-contact-text p{font-family:var(--font-serif);font-size:1.15rem;line-height:1.6;color:var(--ink-soft);margin:20px 0 0;max-width:46ch}
.contact-rows{display:flex;flex-direction:column;gap:2px}
.contact-row{display:flex;align-items:center;gap:18px;padding:22px 4px;border-bottom:1px solid var(--hairline)}
.contact-row:first-child{border-top:1px solid var(--hairline)}
.contact-row svg{width:22px;height:22px;stroke:var(--act);fill:none;stroke-width:1.7;flex-shrink:0}
.contact-row .cr-k{font-family:var(--font-ui);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.contact-row .cr-v{font-family:var(--font-serif);font-size:1.12rem;color:var(--ink);margin-top:2px}
.contact-row a.cr-v{text-decoration:none}
.contact-row a.cr-v:hover{color:var(--act)}

@media (max-width:860px){
  .ab-story-grid,.ab-contact-grid{grid-template-columns:1fr;gap:40px}
  .ab-story.flip .ab-story-media{order:0}
  .rider-grid{grid-template-columns:1fr}
  .ab-stats-wrap{grid-template-columns:1fr 1fr;gap:44px 20px}
  .partner-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .partner-grid{grid-template-columns:1fr 1fr}
}