/* /about (nav: Company): page composition only. Components keep their one definition in components.css (Hero · Page,
   KeyFacts · Thirds, InsightCard · Wide, TeamGrid + TeamGrid/Member, TrustStrip · Line + body, CTABand with its
   secondary slot). BRIEF §0f: the six columns are the backdrop, every block starts and ends on a line, text sits
   --cell-pad in from the line it starts at; the splits change from section to section (§0f.2):
      Hero          Split 4+2: the statement (shared hero-title scale) + lead + CTA | the square photo
      Team          fifteen stipple portraits on paper cards, the TrustStrip tile closing the last row
      Values        Cards 2+2+2 on one Sky panel, icon-row + aligned value copy
      Announcement  the paper-2 editorial band: image | tag + title + excerpt + Read more on a paper plate
   Surfaces (R2-F13): paper hero with the photo and the one dark-blue solid (the CTA); Sky for the facts (values,
   trust); paper-2 once, for the announcement + team band (paper plates and cards on it); no Roger Blue field: the team is the subject. Type: role tokens only. */

/* ---------- Hero: Split 4+2, the statement + lead + CTA | the square ---------- */
/* Keep the page-specific line choices while the title uses the shared service-H1 hero type token. */
.ab-br-stack { display: none; }
@media (max-width: 599px), (min-width: 840px) and (max-width: 923px) { .ab-br-stack { display: inline; } }
/* the lead: a reading measure of three columns that ends --clear before the third column line (tokens.css --bay),
   so its full lines end between lines 2 and 3 at every width from 768 up (about 65 characters at 1440) */
@media (min-width: 768px) { .ab-hero__sub { max-width: calc(3 * var(--bay) - var(--gutter) / 2 - var(--cell-pad) - var(--clear) - 1px); } }

/* from 1024 the square's top is the plate line, the accent band's (Oct 8 round 3: set on the CTA's foot, its top
   landed on nothing, 32 px under the band at 1440 and between band and H1 at 1280), and the words read top down from
   it: head and lead one stack, then the CTA at least one step (32) under the square's base line, so the button always
   starts clear of the photo's foot: exactly 32 under it where head + lead fit beside the square (from about 1220),
   further where they run longer (the stack's own 32 under the lead). The text column is at least the square + 32 +
   the button tall, its foot takes the slack; the plate grows to hold it. The row is a size container: the square is
   (row - 2 gutters) / 3 */
@media (min-width: 1024px) {
  .ab-hero { container-type: inline-size; }
  .ab-hero > .hero__text { justify-content: flex-start; min-height: calc(100cqw / 3 - var(--gutter) / 6 + var(--s-32) + var(--control-h)); }
  .ab-hero .hero__foot { flex: 1 1 auto; justify-content: flex-end; }
  .ab-hero > .hero__photo { align-self: flex-start; }
}

/* Soften Josh's denser original dots against the paper without modifying the portrait asset. */
.ab-team .portrait__img--josh { opacity: 0.75; }

/* ---------- Values: Cards 2+2+2 on the Sky panel ----------
   Equal padding above and below (64 / 48 / 32, as the warranty certificate); the panel is positioned so its two
   Sky-line rules (the page's lines 4 and 8) run its full height. */
.ab-values__panel { position: relative; z-index: 0; padding: var(--s-64) 0; }
.ab-values__list { --cols-gap: var(--s-32); }
@media (min-width: 1024px) { .ab-values > .container { padding-top: var(--s-48); } }
@media (max-width: 1023px) { .ab-values__panel { padding: var(--s-48) 0; } }
@media (max-width: 767px) { .ab-values__panel { padding: var(--s-32) 0; } .ab-values__list { --cols-gap: var(--s-24); } }
/* All three text groups start below the icon row; the fraction belongs to the sentence. */
.ab-value { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-24); min-width: 0; }
.ab-value__head { display: flex; flex-direction: row; align-items: center; gap: var(--s-16); min-height: 48px; }
.ab-value__fraction { font-variant-numeric: normal; letter-spacing: 0; line-height: inherit; white-space: nowrap; }
.ab-value__text { max-width: 100%; }
@media (max-width: 767px) { .ab-value { gap: var(--s-16); } }

/* ---------- Announcement: Split 2+4 on the paper-2 band, below the team and values.
   The card holds the /insights card's levels (Oct 8 round 3: tag, a four-line title and Read more left columns 5-6 of
   the plate blank): the tag, the title (its two sentences a line each from 768, on the plate's full width), the
   excerpt, Read more (InsightCard · Wide, components.css). On phones the title keeps its four short lines. ---------- */
@media (min-width: 768px) { .ab-br-col { display: none; } }
.ab-news > .container { padding-bottom: var(--s-48); }
@media (max-width: 767px) { .ab-news > .container { padding-bottom: var(--s-32); } }

/* ---------- Team: directly after the hero; the following values section supplies the transition spacing. ---------- */
.ab-team > .container { padding-top: var(--s-48); padding-bottom: 0; }