/* ============================================================
   About page — scoped styles.
   Built on the global tokens in styles.css. Reuses .section,
   .container, .eyebrow, .btn, reveal-*, media-placeholder, the
   statusquo quote shell, cta-section, footer, nav. Light pages;
   the adaptive (luminance-driven) nav flips itself.
   ============================================================ */

/* Canonical section rhythm (DESIGN.md: 120 / 80 / 64). */
.abt-sec { padding: var(--space-section-lg) 0; }

/* ---- HERO — light, editorial (ice blue) ----
   Mirrors the POV hero's type-as-event treatment: an oversized display-serif
   headline owns the top of the left column, with the eyebrow + lead sitting as
   a bottom-anchored metadata caption. Same size, ramp, and spacing as
   point-of-view.css, on a pale ice-blue surface instead of POV's dark one. */
.abt-hero {
  background: var(--brand-accent);
  color: var(--ink);
  padding: 120px 0 80px;
}
.abt-hero-grid {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  column-gap: 56px;
  align-items: stretch;
}
.abt-hero-text {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: space-between;
  min-height: 0;
}
.abt-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  /* Matches the POV display ramp (point-of-view.css .pov-hero-title): this is
     the page's loudest typographic moment. */
  font-size: clamp(44px, 6vw, 96px);
  line-height: 0.99;
  letter-spacing: -0.03em;
  margin: 0;
}
/* Bottom-anchored caption: small eyebrow above the lead, mirroring the POV
   hero caption (margin-top 48px, 14px gap under the eyebrow). */
.abt-hero-caption { margin-top: 48px; }
.abt-hero-caption .eyebrow { display: block; margin: 0 0 14px; }
.abt-hero-lead {
  margin: 0;
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--ink-muted-on-light);
  max-width: 42ch;
}
/* A single plate that fills the column. The container carries the 4:5
   composition so the image doesn't overflow into the next section. */
.abt-hero-media {
  position: relative;
  aspect-ratio: 4 / 5;
  /* Keep the fixed 4:5 composition in the stretched grid rather than letting
     it stretch to the headline column's height. */
  align-self: center;
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.abt-hero-media img,
.abt-hero-media video {
  position: absolute;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.abt-hero-media__front {
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: 50% 35%;
}

/* ---- Section surfaces (POV-style tint alternation + one dark beat) ---- */
/* Light surfaces wash into each other instead of meeting as hard lines
   (same treatment as POV/homepage; strict tokens only):
   hero ice-blue -> trudell white. The steps into and out of the dark
   beliefs + leadership beat stay hard cuts on purpose. */
.abt-trudell { background: linear-gradient(180deg, var(--brand-accent) 0%, var(--white) 20%); color: var(--ink); }
.abt-careers { background: var(--cream); color: var(--ink); }
/* The shared CTA rule fades white -> gray to emerge from the homepage's white
   section; here it follows the cream careers section, so the wash starts from
   cream instead (same stops as the homepage rule). */
.abt-careers + .cta-section { background: linear-gradient(180deg, var(--cream) 0%, var(--brand-gray) 20%); }

/* ---- Beliefs + Leadership merged dark beat (POV-style) ----
   One continuous near-black section holding both rows, mirroring the
   POV "Who we serve" / "Why we exist" treatment: light ink, hairline
   rules on dark, a generous internal gap instead of a section boundary. */
.abt-context { background: var(--near-black); color: var(--ink-on-dark); }
/* .home-gap-line hard-codes ink for the homepage's light surface. */
.abt-context .home-gap-line { color: var(--ink-on-dark); }
/* Numbered hairline list recoloured for the dark surface. */
.abt-context .abt-list { --hairline-rule: var(--rule-on-dark); }
.abt-context .hairline-list__n { color: var(--ink-faint-on-dark); }
.abt-context .abt-list h3 { color: var(--ink-on-dark); }
.abt-context .abt-list p { color: var(--ink-muted-on-dark); }
/* Leadership reuses the homepage statusquo shell, which is transparent so it
   can sit on the homepage purple band — here the merged section owns the
   surface. The row keeps its own horizontal gutter (aligned with .container
   sections by design); the section owns the vertical rhythm, so the row's
   block padding collapses into an internal gap below the beliefs list. */
.abt-context .statusquo-section { padding-top: 0; padding-bottom: 0; }
.abt-leadership { margin-top: clamp(80px, 9vw, 132px); }
.abt-leadership .statusquo-media { margin-top: 0; }
.abt-leadership .statusquo-media .media-placeholder { height: 100%; }
/* Ice-blue eyebrows on the dark beat, matching the POV dark sections. */
.abt-context .eyebrow { color: color-mix(in srgb, var(--brand-accent) 70%, #3f6fd1); }
/* The beliefs head doesn't track the scroll here — it sits at the top of the
   row rather than sticking past its own list. */
.abt-context .abt-block__head { position: static; top: auto; }

/* ---- Two-column block: sticky head left, body right (pov-block voice) ---- */
.abt-block {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 80px;
  align-items: start;
}
.abt-block__head { position: sticky; top: var(--sticky-top); }
.abt-block__head .eyebrow { display: block; margin-bottom: var(--eyebrow-gap); }
.abt-block__head h2 {
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 14ch;
}

/* ---- Trudell backstory — centered editorial statement + brand row ----
   One tight statement under the headline, with the eyebrow, headline, body and
   logos reading as a single centered vertical stack. */
.abt-trudell__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
/* Generous air between the eyebrow and the headline. */
.abt-trudell__inner .eyebrow { display: block; margin-bottom: clamp(20px, 3vh, 32px); }
.abt-trudell__kicker {
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
/* Measure held tight (~540px) so centered lines stay even rather than running
   wide and ragged. */
.abt-trudell__lead {
  max-width: 540px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

/* Operating-companies — a single evenly-spaced horizontal row of brand marks
   ("family of brands" treatment). The hairline divider gets equal padding
   above and below so it reads as intentional, not floating. */
.abt-opco {
  margin-top: clamp(48px, 7vh, 72px);
  padding-top: clamp(48px, 7vh, 72px);
  border-top: 1px solid var(--rule-on-light);
  text-align: center;
}
.abt-opco__label { display: block; margin-bottom: 28px; }
.abt-opco__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  /* Break out of the 760px text column so all five marks sit on a single
     centered row instead of wrapping Jaeger onto its own line. The eyebrow
     label and hairline rule above stay at the text width. */
  width: min(1040px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
}
/* Logos are normalised to a matched OPTICAL height, not a shared bounding box:
   the all-caps Jaeger wordmark fills its box so it runs smallest, the lowercase
   Monaghan wordmark sits a touch taller, and the Trudell shield-lockup needs the
   most box height to read at the same weight. Brightness(0) renders the
   white-fill marks as ink on the light panel. */
.abt-opco__logo { display: inline-flex; align-items: center; }
.abt-opco__logo img { width: auto; filter: brightness(0); opacity: 0.7; }
.abt-opco__logo--trudell img  { height: 32px; }
.abt-opco__logo--trudell-intl img { height: 32px; }
.abt-opco__logo--trudell-hs img   { height: 32px; }
.abt-opco__logo--monaghan img { height: 28px; }
.abt-opco__logo--jaeger img   { height: 22px; }

/* ---- Numbered hairline list (beliefs, careers) — layout comes from
   .hairline-list (styles.css); this class only sets item typography. ---- */
.abt-list h3 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-lg);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.abt-list p {
  margin: 4px 0 0;
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--ink-muted-on-light);
  max-width: 52ch;
}

/* ---- Careers ---- */
.abt-careers__lead {
  margin: 12px 0 0;
  font-size: var(--text-body-lg);
  line-height: 1.45;
  color: var(--ink-muted-on-light);
  max-width: 38ch;
}
.abt-careers__cta { margin-top: 24px; }
/* Tighter connection between hero and the list — compress the gap above the label */
.abt-joining__label {
  display: block;
  margin-bottom: var(--eyebrow-gap);
  margin-top: 0;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.16em;
  color: var(--ink-faint-on-light);
}

/* Swiss-modern treatment: stack the block (head over index, no sticky), then
   promote the 01/02/03 to oversized Arizona-300 numerals anchoring each row. */
.abt-careers .abt-block { grid-template-columns: 1fr; gap: 40px; }
.abt-careers .abt-block__head { position: static; }
.abt-careers .hairline-list__item {
  grid-template-columns: minmax(80px, 160px) 1fr;
  gap: 56px;
  align-items: start;
  padding: 28px 0 32px;
}
.abt-careers .hairline-list__n {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(44px, 5.5vw, 72px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: normal;
  color: rgba(180, 210, 240, 0.55); /* lighter ghost — clearly intentional, not hovering */
}
.abt-careers .abt-list h3 {
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 600;
  margin: 0 0 6px;
}
.abt-careers .abt-list p {
  font-size: var(--text-body-sm);
  line-height: 1.45;
}
/* Up-right arrow on the "Explore open roles" link. */
.btn__arrow { width: 14px; height: 14px; margin-left: 8px; }

/* ---- Breakpoints ---- */
@media (max-width: 1024px) {
  .abt-sec { padding: var(--space-section-md) 0; }
  .abt-hero { padding: 120px 0 64px; }
  .abt-block { gap: 48px; }
}
@media (max-width: 860px) {
  .abt-hero-grid { grid-template-columns: 1fr; row-gap: 32px; align-items: start; }
  .abt-hero-caption { margin-top: 28px; }
  .abt-hero-media { max-width: 360px; align-self: start; }
  .abt-block { grid-template-columns: 1fr; row-gap: 40px; }
  .abt-block__head { position: static; }
  .abt-block__head h2 { max-width: 18ch; }
}
@media (max-width: 768px) {
  .abt-sec { padding: var(--space-section-sm) 0; }
  .abt-hero { padding: 80px 0 48px; }
  .abt-h1 { font-size: 34px; letter-spacing: -0.02em; }
  .abt-block__head h2 { font-size: 34px; letter-spacing: -0.02em; }
  .abt-careers .hairline-list__item { grid-template-columns: 56px 1fr; gap: 20px; padding: 22px 0 26px; }
  .abt-careers .hairline-list__n { font-size: 36px; }
}