/* About page.
   Jase, 2026-08-06, after rejecting a green-and-gold banded version ("Its aweful"):
   "make it centralised as before, just plain back and white, no Green and Yellow."

   So: one centred column, black on white, nothing else. The Alice typefaces stay -
   Jase asked for those earlier ("I want consistant fonts as well, not documentation
   style font") - but every colour band, card and decorative graphic is gone.

   ⛔ No buttons in <main>. The footer carries the calls to action.
   ⛔ No brand colour on this page. Black, white, and one hairline grey. */

.about-page {
  background: var(--white);
  color: var(--black);
}

/* One measure for the whole page. Every section drops into it, so the column
   never shifts as you scroll. */
.ab-inner {
  width: min(720px, 100%);
  margin: 0 auto;
}

.ab-eyebrow {
  margin: 0 0 24px;
  font: 500 12px/1.2 var(--mono);
  letter-spacing: .07em;
  opacity: .55;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ hero ---- */

.ab-hero {
  padding:
    calc(var(--header-height) + clamp(72px, 8vw, 132px))
    var(--page-pad)
    clamp(56px, 6vw, 88px);
}

.ab-hero h1 {
  margin: 0;
  font-size: clamp(38px, 4.6vw, 68px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.ab-lead {
  margin: 28px 0 0;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.45;
  text-wrap: pretty;
}

/* --------------------------------------------------------------- sections --- */

.ab-section {
  padding: clamp(48px, 5vw, 76px) var(--page-pad);
}

/* A hairline between sections instead of a colour change. */
.ab-section .ab-inner,
.ab-company .ab-inner {
  padding-top: clamp(44px, 5vw, 72px);
  border-top: 1px solid var(--line-dark);
}

.ab-section h2,
.ab-company h2 {
  margin: 0 0 24px;
  font-size: clamp(28px, 2.9vw, 42px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.ab-prose p {
  margin: 0 0 18px;
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.62;
  text-wrap: pretty;
}

.ab-prose p:last-child {
  margin-bottom: 0;
}

.ab-prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ab-prose strong {
  font-weight: 800;
}

/* ---------------------------------------------------------------- lists ----- */

/* Both list blocks - what Alice does, and the Australian details - use one
   pattern: a mono label, a bold line, a plain line. No cards, no fills. */
.ab-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ab-list li + li {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line-dark);
}

.ab-list-label {
  display: block;
  margin-bottom: 8px;
  font: 500 11px/1.2 var(--mono);
  letter-spacing: .07em;
  opacity: .55;
  text-transform: uppercase;
}

.ab-list h3 {
  margin: 0 0 6px;
  font-size: clamp(18px, 1.35vw, 21px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.ab-list p {
  margin: 0;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.55;
}

/* -------------------------------------------------------------- company ----- */

.ab-company {
  padding: clamp(48px, 5vw, 76px) var(--page-pad) clamp(80px, 9vw, 128px);
}

.ab-company p {
  margin: 0 0 28px;
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.62;
}

.ab-details {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 10px 30px;
  font: 500 13px/1.4 var(--mono);
  list-style: none;
}

.ab-details a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------ responsive ---- */

@media (max-width: 640px) {
  .ab-details {
    flex-direction: column;
    gap: 10px;
  }
}