/* ============================================================
   About page — Oz's About Us copy (October 2026), in the approved
   homepage's language: dark hero, dark sections alternating with the
   lifted #0A111C band, raised cards, dark closing demo card.

   Loaded by about.html only, after site.css and theme.css. Every
   rule is scoped to body.about or an about-only ab-* class.
   ============================================================ */

/* ---------- rhythm: the homepage's section spacing. :where() keeps it
   low-specificity so the per-section trims below can win. ---------- */
.about main > :where(.section:not(.pagehero)) { padding-block: clamp(64px, 7.5vw, 104px); }
/* Grid children may shrink below their content's width. */
.about .intro > * { min-width: 0; }
/* site.css bottom-aligns the split head, which drops a short heading far
   below its eyebrow; the homepage hangs both columns from the top. */
.about main > .section:not(.pagehero) .intro { align-items: start; }
.about .on-navy .h-section, .about .on-navy .h-display { color: var(--sa-ink); }
/* Bold phrases in the copy doc read brighter than the muted text around them. */
.about .on-navy strong { color: var(--sa-ink); font-weight: 600; }

/* Shared body copy for the split sections: muted, with one pull line. */
.about .ab-copy p { font-size: 18px; line-height: 1.55; color: var(--sa-muted); }
.about .ab-copy p + p { margin-top: 16px; }
.about .ab-copy .ab-pull {
  margin-block: 28px; padding-left: 20px; border-left: 3px solid var(--gold);
  font-family: var(--sa-display); font-weight: 500; font-variation-settings: "wdth" 100;
  font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.25; letter-spacing: -0.02em;
  color: var(--sa-ink);
}

/* ---------- hero: headline left, the founding story right ---------- */
.about .ab-hero__copy .lede + .lede { margin-top: 16px; }

/* ---------- centred section head (the homepage's 708px measure) ---------- */
.ab-head { max-width: 708px; margin: 0 auto; text-align: center; }
.ab-head .label { justify-content: center; }
.about .ab-head .h-section { margin-inline: auto; }
.about .ab-head p:not(.label) { margin-top: 20px; font-size: 18px; line-height: 1.45; color: var(--sa-muted); }
.about .ab-head p + p { margin-top: 12px; }

/* ---------- raised cards (motion.js tilts .ab-panel and .stat) ---------- */
.ab-panel {
  background: var(--sa-card); border-radius: 12px;
  padding: clamp(28px, 4vw, 48px);   /* the homepage's .sa-card */
}
/* Text sits on the left; every stop under it keeps white at 7:1 or better
   (the homepage's feature-card gradient). */
.ab-panel--grad { background: linear-gradient(110deg, #0A4F5C 0%, #0B4C7E 50%, #0B3B74 100%); }

/* The lifted band: the homepage's #0A111C, with cards raised to #121D30. */
.about .ab-band { background: #0A111C; }
.about .ab-band .ab-panel:not(.ab-panel--grad) { background: #121D30; border: 1px solid var(--sa-line); }

/* ---------- Genly is Autonomous Demand Creation: six capability cards ---------- */
.ab-caps__grid {
  list-style: none; padding: 0; margin: clamp(48px, 6vw, 72px) 0 0;
  display: grid; gap: 24px;
}
@media (min-width: 680px) { .ab-caps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ab-caps__grid { grid-template-columns: repeat(3, 1fr); } }
.about .ab-cap { padding: clamp(28px, 3vw, 36px); }
/* Each card opens on the Genly mark's three strokes, turning in sequence. */
.about .ab-cap::before {
  content: ""; display: block; width: 36px; height: 4px; border-radius: 2px;
  margin-bottom: 28px; background: #F2AE2E;
}
.about .ab-cap:nth-child(3n+2)::before { background: #1CAF69; }
.about .ab-cap:nth-child(3n)::before { background: #3382A7; }
.about .ab-cap .h-card { font-size: 22px; letter-spacing: -0.02em; color: var(--sa-ink); }
.about .ab-cap p { margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--sa-muted); }

/* ---------- You direct. Genly executes. ---------- */
.about .ab-direct .ab-lead { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.4; }
.ab-direct__pair { display: grid; gap: 24px; margin-top: clamp(48px, 6vw, 72px); }
@media (min-width: 860px) { .ab-direct__pair { grid-template-columns: 1fr 1.6fr; } }
.ab-direct__pair .ab-panel { display: flex; align-items: flex-end; }
/* Side by side, the two cards share a floor; stacked, they fit their text. */
@media (min-width: 860px) { .ab-direct__pair .ab-panel { min-height: 200px; } }
.about .ab-direct__pair p {
  font-family: var(--sa-display); font-weight: 500; font-variation-settings: "wdth" 100;
  font-size: clamp(1.375rem, 2.1vw, 1.75rem); line-height: 1.3; letter-spacing: -0.02em;
  color: var(--sa-ink);
}
.about .ab-direct__genly p { color: #FFFFFF; }
.about .ab-direct__result {
  max-width: 708px; margin: clamp(40px, 5vw, 56px) auto 0; text-align: center;
  font-size: 19px; line-height: 1.5; color: var(--sa-muted);
}

/* ---------- More than a decade of creating demand: the stats ---------- */
.ab-stats__grid { display: grid; gap: 24px; margin-top: clamp(48px, 6vw, 72px); }
@media (min-width: 760px) {
  .ab-stats__grid { grid-template-columns: repeat(3, 1fr); }
  .ab-stats__grid .stat--wide { grid-column: 1 / -1; }
}
.about .ab-stats .stat {
  background: var(--sa-card); border-radius: 12px;
  padding: clamp(28px, 3.5vw, 44px);
  border-top: 4px solid #F2AE2E;
}
.about .ab-stats .stat:nth-child(2) { border-top-color: #1CAF69; }
.about .ab-stats .stat:nth-child(3) { border-top-color: #3382A7; }
.about .ab-stats .stat__num {
  font-family: var(--sa-display);
  /* 1.15 matches motion.js's rolling cells, so 150+ sits level with its neighbours. */
  font-size: clamp(3.25rem, 6.4vw, 6rem); line-height: 1.15;
  color: var(--sa-ink);
}
.about .ab-stats .stat__label { margin-top: 12px; font-size: 18px; color: var(--sa-muted); }
/* The pipeline figure is words: the full-width gradient card, the demand
   lines rising behind it as on the homepage's .sa-stage. */
.about .ab-stats .stat--wide {
  position: relative; overflow: hidden; border-top: 0;
  background: linear-gradient(110deg, #0A4F5C 0%, #0B4C7E 50%, #0B3B74 100%);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px;
}
.about .ab-stats .stat--wide::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M0 180 C160 185 260 60 600 20'/%3E%3Cpath d='M0 192 C170 194 280 85 600 50' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.about .ab-stats .stat--wide > * { position: relative; }
.about .ab-stats .stat--wide .stat__num { color: #FFFFFF; font-size: clamp(2.5rem, 5.6vw, 5.25rem); }
.about .ab-stats .stat--wide .stat__label { color: #FFFFFF; font-size: 20px; margin-top: 0; }

/* ---------- AI execution. Human accountability. ---------- */
.about .ab-ai__panel { display: grid; gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (min-width: 900px) { .about .ab-ai__panel { grid-template-columns: 1fr 1fr; } }
.about .ab-ai__panel > * { min-width: 0; }

/* ---------- Built in Malibu, California: a typographic band ---------- */
.ab-malibu__band {
  position: relative; overflow: hidden; border-radius: 12px;
  background: linear-gradient(110deg, #0A4F5C 0%, #0B4C7E 50%, #0B3B74 100%);
  padding: clamp(40px, 7vw, 96px) clamp(28px, 6vw, 80px);
}
.ab-malibu__coast { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* The lines fade out toward the left, where the heading and copy start,
   so no stroke runs through the text; stacked on a phone they go quieter. */
.ab-malibu__coast {
  -webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 12%, #000 62%);
}
@media (max-width: 859px) { .ab-malibu__coast { opacity: 0.45; } }
.ab-malibu__band > :not(.ab-malibu__coast) { position: relative; }
.about .ab-malibu .h-display {
  color: #FFFFFF; max-width: 14ch;
  font-size: clamp(2.25rem, 5.4vw, 4.75rem); line-height: 1.02;
}
.ab-malibu__copy { display: grid; gap: 16px 48px; margin-top: clamp(40px, 6vw, 80px); }
@media (min-width: 860px) { .ab-malibu__copy { grid-template-columns: 1fr 1fr; } }
.about .ab-malibu__copy p { font-size: 18px; line-height: 1.55; color: #FFFFFF; }

/* Closing demo card: theme.css .formcard. It follows the lifted Malibu
   band, so it keeps full section padding rather than joining up. */