/* =========================================================
   LEAN EDGE SPORTS — ABOUT PAGE V3
   Clean, lightweight inner-page treatment.
   Shared nav/footer remain untouched.
   ========================================================= */

body.about-page-body {
  background: var(--les-inner-page-bg, #051227);
}

.about-v2 {
  position: relative;
  overflow: hidden;
  color: var(--white, #fff);
  font-family: 'Barlow', sans-serif;
  background: transparent;
}

/* Use the site's shared watermark/background rather than creating a second
   page-specific opaque/oversized treatment. */
.about-v2::before {
  content: none;
}

.about-v2 > * {
  position: relative;
  z-index: 1;
}

.about-shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

/* ---------- HERO ---------- */

.about-hero {
  padding: 18px 0 42px;
  border-bottom: 1px solid rgba(91,126,173,.14);
}

.about-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 30px;
  font-size: 13px;
  font-weight: 600;
  color: #8290a7;
}

.about-breadcrumb a {
  color: #fff;
  text-decoration: none;
}

.about-breadcrumb a:hover {
  color: #f2b84b;
}

.about-breadcrumb span {
  color: #667795;
}

.about-breadcrumb strong {
  color: #aeb9ca;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(320px, .78fr);
  gap: 54px;
  align-items: start;
}

.about-hero-copy {
  padding: 4px 0 8px;
}

.about-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #ef4b55;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Main page title matches the shared Lean Edge title language. */
.about-hero h1 {
  margin: 0;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.about-lead {
  max-width: 760px;
  margin: 22px 0 0;
  color: #cbd4e2;
  font-size: 17px;
  line-height: 1.65;
}

.about-lead strong {
  color: #fff;
  font-weight: 800;
}

.about-intro {
  max-width: 760px;
  margin: 14px 0 0;
  color: #93a2b7;
  font-size: 14px;
  line-height: 1.72;
}

.about-intro strong {
  color: #fff;
}

.about-hero-actions,
.about-founder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.about-btn:hover {
  transform: translateY(-1px);
}

.about-btn-primary {
  background: #c41230;
  color: #fff;
  border-color: #d83a54;
}

.about-btn-primary:hover {
  background: #d21d3d;
}

.about-btn-secondary {
  background: transparent;
  color: #d8e2f0;
  border-color: rgba(120,147,181,.36);
}

.about-btn-secondary:hover {
  border-color: rgba(122,183,246,.65);
  background: rgba(72,120,178,.08);
}

/* Principles are intentionally light and open rather than a heavy opaque card. */
.about-principles {
  padding: 6px 0 0 28px;
  border-left: 1px solid rgba(78,123,179,.32);
  background: transparent;
  box-shadow: none;
}

.about-principles-head {
  padding-bottom: 16px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(138,165,200,.12);
}

.about-principles h2,
.about-section h2,
.about-pro-card h2,
.about-founder-card h2 {
  margin: 0;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.about-principles h2 {
  font-size: 22px;
}

.about-principle-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(138,165,200,.10);
}

.about-principle-row:last-child {
  border-bottom: 0;
}

.about-principle-row > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(89,141,199,.32);
  border-radius: 8px;
  background: rgba(44,83,126,.10);
  color: #66a9f2;
  font-size: 18px;
}

.about-principle-row strong,
.about-principle-row span {
  display: block;
}

.about-principle-row strong {
  margin-bottom: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.about-principle-row span {
  color: #94a4b9;
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---------- SHARED SECTIONS ---------- */

.about-section {
  padding: 48px 0;
}

.about-section + .about-section {
  border-top: 1px solid rgba(91,126,173,.10);
}

.about-section-tight {
  padding-top: 38px;
}

.about-section-heading {
  max-width: 780px;
  margin-bottom: 24px;
}

.about-section-heading-centred {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.about-section h2 {
  font-size: 24px;
}

.about-section-heading p {
  margin: 13px 0 0;
  color: #95a5ba;
  font-size: 14px;
  line-height: 1.68;
}

/* ---------- COVERAGE STRIP ---------- */

.about-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(74,115,163,.24);
  border-bottom: 1px solid rgba(74,115,163,.24);
  background: transparent;
}

.about-stat {
  min-height: 108px;
  padding: 22px 24px;
  border-right: 1px solid rgba(74,115,163,.20);
}

.about-stat:last-child {
  border-right: 0;
}

.about-stat strong,
.about-stat span {
  display: block;
}

.about-stat strong {
  margin-bottom: 7px;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: .025em;
}

.about-stat span {
  color: #899ab0;
  font-size: 12px;
  line-height: 1.5;
}

/* ---------- EXPLORE GRID ---------- */

.about-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.about-feature-card {
  display: flex;
  flex-direction: column;
  min-height: 214px;
  padding: 20px;
  border: 1px solid rgba(69,105,150,.22);
  border-radius: 10px;
  background: rgba(18,35,63,.20);
  color: inherit;
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.about-feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(82,142,211,.50);
  background: rgba(25,48,83,.28);
}

.about-feature-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 15px;
  border: 1px solid rgba(83,130,185,.30);
  border-radius: 8px;
  background: rgba(37,75,120,.10);
  color: #66a9f2;
  font-size: 19px;
}

.about-feature-card:nth-child(3n+2) .about-feature-icon {
  color: #ef5961;
}

.about-feature-card:nth-child(3n) .about-feature-icon {
  color: #64c685;
}

.about-feature-card h3 {
  margin: 0 0 8px;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.about-feature-card p {
  flex: 1;
  margin: 0;
  color: #91a2b8;
  font-size: 12.5px;
  line-height: 1.62;
}

.about-feature-card > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: #dce7f5;
  font-size: 11px;
  font-weight: 800;
}

/* ---------- DATA / GUARDRAILS ---------- */

.about-data-section {
  background: transparent;
}

.about-data-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 54px;
  align-items: start;
}

.about-text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: #79b7fa;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.about-text-link:hover {
  color: #fff;
}

.about-data-list {
  border-top: 1px solid rgba(79,118,166,.26);
}

.about-data-item {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(79,118,166,.20);
}

.about-data-item > span {
  color: #6380a3;
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
}

.about-data-item strong {
  display: block;
  margin-bottom: 5px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.about-data-item p {
  margin: 0;
  color: #91a2b8;
  font-size: 12.5px;
  line-height: 1.62;
}

/* ---------- PRO ---------- */

.about-pro-card {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 34px;
  padding: 30px;
  border: 1px solid rgba(242,184,75,.42);
  border-radius: 12px;
  background:
    radial-gradient(circle at 90% 20%, rgba(242,184,75,.07), transparent 36%),
    rgba(16,27,47,.22);
}

.about-pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 13px;
  color: #f2b84b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.about-pro-card h2 {
  max-width: 670px;
  font-size: 23px;
}

.about-pro-card p {
  max-width: 690px;
  margin: 12px 0 0;
  color: #9baabd;
  font-size: 13.5px;
  line-height: 1.65;
}

.about-btn-pro {
  margin-top: 22px;
  border-color: rgba(242,184,75,.68);
  background: rgba(242,184,75,.06);
  color: #f2c665;
}

.about-btn-pro:hover {
  background: rgba(242,184,75,.12);
}

.about-pro-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: center;
}

.about-pro-features span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(242,184,75,.13);
  color: #d8dce4;
  font-size: 11.5px;
  font-weight: 700;
}

/* ---------- CLOSING ---------- */

.about-founder-section {
  padding: 34px 0 38px;
}

.about-founder-card {
  display: block;
  max-width: 760px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.about-founder-card h2 {
  max-width: 720px;
  font-size: 21px;
}

.about-founder-card p {
  max-width: 680px;
  margin: 10px 0 0;
  color: #98a8bc;
  font-size: 13.5px;
  line-height: 1.6;
}

.about-founder-actions {
  margin-top: 20px;
  justify-content: flex-start;
}

/* ---------- LIGHT MODE ---------- */

html[data-les-theme="light"] body.about-page-body,
html[data-les-theme="light"] .about-v2 {
  background: transparent;
  color: #10213a;
}

html[data-les-theme="light"] .about-hero h1,
html[data-les-theme="light"] .about-section h2,
html[data-les-theme="light"] .about-principles h2,
html[data-les-theme="light"] .about-feature-card h3,
html[data-les-theme="light"] .about-data-item strong,
html[data-les-theme="light"] .about-pro-card h2,
html[data-les-theme="light"] .about-founder-card h2,
html[data-les-theme="light"] .about-stat strong {
  color: #10213a;
}

html[data-les-theme="light"] .about-lead,
html[data-les-theme="light"] .about-intro,
html[data-les-theme="light"] .about-section-heading p,
html[data-les-theme="light"] .about-feature-card p,
html[data-les-theme="light"] .about-data-item p,
html[data-les-theme="light"] .about-pro-card p,
html[data-les-theme="light"] .about-founder-card p {
  color: #556a82;
}

html[data-les-theme="light"] .about-feature-card,
html[data-les-theme="light"] .about-pro-card {
  background: rgba(255,255,255,.42);
  border-color: rgba(94,128,164,.28);
}

html[data-les-theme="light"] .about-principles {
  border-left-color: rgba(70,107,149,.30);
}

/* ---------- TABLET ---------- */

@media (max-width: 980px) {
  .about-hero-grid,
  .about-data-grid,
  .about-pro-card {
    grid-template-columns: 1fr;
  }

  .about-hero-grid {
    gap: 34px;
  }

  .about-principles {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(78,123,179,.28);
    padding-top: 24px;
  }

  .about-stat-strip {
    grid-template-columns: 1fr 1fr;
  }

  .about-stat:nth-child(2) {
    border-right: 0;
  }

  .about-stat:nth-child(-n+2) {
    border-bottom: 1px solid rgba(74,115,163,.20);
  }

  .about-feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  .about-founder-actions {
    justify-content: flex-start;
  }
}

/* ---------- MOBILE ---------- */

@media (max-width: 768px) {
  .about-shell {
    width: min(100% - 28px, 1180px);
  }

  .about-hero {
    padding: 16px 0 26px;
  }

  .about-breadcrumb {
    margin-bottom: 20px;
    font-size: 12px;
  }

  .about-hero h1 {
    font-size: 26px;
    text-align: center;
  }

  .about-kicker {
    display: block;
    text-align: center;
  }

  .about-hero-copy {
    text-align: center;
  }

  .about-lead {
    font-size: 16px;
  }

  .about-intro {
    font-size: 13.5px;
  }

  .about-hero-actions {
    justify-content: center;
  }

  .about-principles {
    text-align: left;
  }

  .about-section {
    padding: 38px 0;
  }

  .about-section h2,
  .about-pro-card h2,
  .about-founder-card h2 {
    font-size: 21px;
  }

  .about-stat-strip,
  .about-feature-grid,
  .about-pro-features {
    grid-template-columns: 1fr;
  }

  .about-stat,
  .about-stat:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid rgba(74,115,163,.20);
  }

  .about-stat:last-child {
    border-bottom: 0;
  }

  .about-feature-card {
    min-height: 0;
  }

  .about-data-grid {
    gap: 24px;
  }

  .about-pro-card {
    padding: 22px 18px;
  }

  .about-hero-actions,
  .about-founder-actions {
    flex-direction: column;
  }

  .about-btn {
    width: 100%;
  }
}


/* ABOUT V3 — FINAL SECTION ORDER / SIGN-OFF TIGHTENING */
.about-founder-section + .about-section {
  border-top: 1px solid rgba(91,126,173,.10);
}

.about-v2 > .about-section[aria-labelledby="pro-title"] {
  padding-bottom: 54px;
}

@media (max-width: 768px) {
  .about-founder-section {
    padding: 30px 0 32px;
  }

  .about-founder-card h2 {
    font-size: 20px;
  }

  .about-founder-actions {
    margin-top: 18px;
  }

  .about-v2 > .about-section[aria-labelledby="pro-title"] {
    padding-bottom: 42px;
  }
}

/* ABOUT V3 — DESKTOP TOP SPACING FINE-TUNE
   Keep breadcrumb safely below the header while preserving the tighter hero. */
@media (min-width: 769px) {
  .about-breadcrumb {
    margin-bottom: 6px;
  }
}


/* =========================================================
   ABOUT V3 — PHONE-ONLY COMPACT PASS
   Desktop/tablet above 768px intentionally untouched.
   ========================================================= */
@media (max-width: 768px) {

  /* Keep the shared watermark subtle on the narrower canvas. */
  body.about-page-body::before {
    width: min(72vw, 300px) !important;
    opacity: .02 !important;
    top: 72% !important;
  }

  .about-shell {
    width: min(100% - 24px, 1180px);
  }

  /* HERO: same content, much less vertical runway. */
  .about-hero {
    padding: 10px 0 18px;
  }

  .about-breadcrumb {
    margin-bottom: 14px;
    font-size: 11px;
  }

  .about-hero-grid {
    gap: 18px;
  }

  .about-hero-copy {
    padding: 0;
  }

  .about-kicker {
    margin-bottom: 8px;
    font-size: 9.5px;
    letter-spacing: .16em;
  }

  .about-hero h1 {
    font-size: 23px;
    line-height: 1.12;
  }

  .about-lead {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.55;
  }

  .about-intro {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.55;
  }

  .about-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 18px;
  }

  .about-hero-actions .about-btn {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    font-size: 11px;
  }

  /* THE LEAN EDGE: compact editorial list, not a second full hero. */
  .about-principles {
    padding-top: 16px;
  }

  .about-principles-head {
    padding-bottom: 12px;
  }

  .about-principles h2 {
    font-size: 18px;
    line-height: 1.18;
  }

  .about-principle-row {
    grid-template-columns: 30px 1fr;
    gap: 10px;
    padding: 12px 0;
  }

  .about-principle-row > i {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  .about-principle-row strong {
    font-size: 13px;
  }

  .about-principle-row span {
    font-size: 11.5px;
    line-height: 1.45;
  }

  /* SECTIONS: reduce scroll without making them feel cramped. */
  .about-section,
  .about-founder-section {
    padding: 28px 0;
  }

  .about-section-tight {
    padding-top: 28px;
  }

  .about-section-heading {
    margin-bottom: 18px;
  }

  .about-section h2,
  .about-pro-card h2,
  .about-founder-card h2 {
    font-size: 19px;
    line-height: 1.18;
  }

  .about-section-heading p {
    margin-top: 9px;
    font-size: 12.5px;
    line-height: 1.55;
  }

  /* COVERAGE: 2 x 2 instead of four tall stacked rows. */
  .about-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .about-stat,
  .about-stat:nth-child(2) {
    min-height: 92px;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(74,115,163,.20);
  }

  .about-stat:nth-child(odd) {
    border-right: 1px solid rgba(74,115,163,.20);
  }

  .about-stat:nth-child(even) {
    border-right: 0;
  }

  .about-stat:nth-child(n+3) {
    border-bottom: 0;
  }

  .about-stat strong {
    margin-bottom: 5px;
    font-size: 19px;
  }

  .about-stat span {
    font-size: 10.5px;
    line-height: 1.4;
  }

  /* EXPLORE: convert each tall card into a compact horizontal tile. */
  .about-feature-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .about-feature-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon copy"
      "icon link";
    column-gap: 11px;
    row-gap: 4px;
    min-height: 0;
    padding: 13px 14px;
  }

  .about-feature-icon {
    grid-area: icon;
    width: 34px;
    height: 34px;
    margin: 0;
    border-radius: 8px;
    font-size: 17px;
  }

  .about-feature-card h3 {
    grid-area: title;
    margin: 0;
    font-size: 14px;
  }

  .about-feature-card p {
    grid-area: copy;
    font-size: 11.5px;
    line-height: 1.45;
  }

  .about-feature-card > span {
    grid-area: link;
    margin-top: 3px;
    font-size: 10.5px;
  }

  /* DATA: keep the numbered-list feel but tighten each row. */
  .about-data-grid {
    gap: 18px;
  }

  .about-data-item {
    grid-template-columns: 38px 1fr;
    gap: 10px;
    padding: 13px 0;
  }

  .about-data-item > span {
    font-size: 13px;
  }

  .about-data-item strong {
    font-size: 12.5px;
  }

  .about-data-item p {
    font-size: 11.5px;
    line-height: 1.5;
  }

  /* BUILT IN ENGLAND: compact sign-off, buttons on one row. */
  .about-founder-section {
    padding: 24px 0 26px;
  }

  .about-founder-card p {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
  }

  .about-founder-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 15px;
  }

  .about-founder-actions .about-btn {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    font-size: 11px;
  }

  /* PRO: retain premium emphasis, but not a huge mobile slab. */
  .about-pro-card {
    gap: 18px;
    padding: 18px 16px;
  }

  .about-pro-badge {
    margin-bottom: 9px;
    font-size: 9px;
  }

  .about-pro-card p {
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.5;
  }

  .about-btn-pro {
    margin-top: 16px;
    min-height: 38px;
  }

  .about-pro-features {
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
  }

  .about-pro-features span {
    min-height: 36px;
    padding: 8px 4px;
    font-size: 10.5px;
  }

  .about-v2 > .about-section[aria-labelledby="pro-title"] {
    padding-bottom: 30px;
  }
}

/* Very narrow phones: keep controls comfortable rather than cramped. */
@media (max-width: 360px) {
  .about-hero-actions,
  .about-founder-actions {
    grid-template-columns: 1fr;
  }

  .about-pro-features {
    grid-template-columns: 1fr;
  }
}


/* ABOUT V3 — FINAL PHONE EXPLORE CARD POLISH
   Desktop untouched. */
@media (max-width: 768px) {
  .about-feature-card {
    padding: 11px 13px;
    row-gap: 3px;
  }

  .about-feature-card h3 {
    font-size: 13px;
  }

  .about-feature-card p {
    line-height: 1.38;
  }
}