/* ============================================================
 * STATEMENT PAGE — shared pattern for About us + Careers
 * (was about-v2.css; renamed 29 Jul 2026 when Careers adopted
 * the same treatment. The `.ab2-*` class prefix is historical —
 * it stands for the pattern, not for the About page. Anything
 * added here shows up on BOTH pages, which is the point: they
 * are meant to read as a pair.)
 *
 * ORIGINALLY: ABOUT v2 (Rebecca, 29 Jul 2026)
 * "I love how starling have done theirs with key messaging - no
 * fluff, confident and too the point."
 *
 * The whole page is one device repeated: a big confident line,
 * one short paragraph, and at most one quiet link. No card grids
 * (she rejects those for carrying a message), no coloured section
 * bands (tried and reverted), no stat walls. Bright accents on a
 * clean white base; two dark moments only — the CEO quote and the
 * 2030 block — so the page has rhythm without going busy.
 *
 * Type scale is deliberately restrained: every heading is a step
 * down from the oversized .statement size, so the confidence comes
 * from space and brevity rather than everything shouting.
 * NB 3 Aug: About now opens with a real .statement band as well as
 * the mission, so that page carries TWO oversized lines where the
 * rule used to be one. Flagged to Rebecca — if it reads as too
 * much, soften the mission, not the opening.
 *
 * Sits on top of home-v2.css (nav, footer, .btn, .mark, .container,
 * .seam/.seam-curve, --hv2-ease). Nothing here is shared, so this
 * trial can be deleted without touching another page.
 * ============================================================ */

/* ---------- shared: the quiet inline link ---------- */
.ab2-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ge-blue, #1B367E);
}
.ab2-link:hover { color: var(--ge-navy, #0F1438); text-decoration: underline; text-underline-offset: 4px; }
.ab2-link svg { width: 16px; height: 16px; transition: transform 200ms var(--hv2-ease); }
.ab2-link:hover svg { transform: translateX(4px); }
.ab2-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 183, 241, 0.45); border-radius: 999px; }

/* ---------- opening statement — the first pair in the alternating pattern ----------
   Shares the beats' grid so the copy/image columns line up exactly down the
   page; only the type size differs (this carries the h1). */
.ab2-open { background: #fff; padding: clamp(56px, 7vw, 104px) 0 clamp(28px, 3.5vw, 48px); }
.ab2-open__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: center;
}
/* no max-width: the 44ch cap was squeezing the column to 462px of the 570px
   available, which forced the headline onto more lines than it needed. The
   lede keeps its own measure below instead. */
.ab2-open__copy { max-width: none; }
.ab2-open__h {
  margin: 0;
  /* Sized to the half-width column, not to the page: at 76px (the original
     full-width value) this set 6 lines, at 50px it still set 4. 46px in the
     ~570px column lands it on three (Rebecca, 29 Jul: "lets make this smaller
     so it fits on less lines"). Still the largest heading on the page — the
     beats' h2 tops out at 42px. */
  font-size: clamp(28px, 3.1vw, 46px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ge-navy, #0F1438);
}
.ab2-open__lede {
  margin: clamp(22px, 2.6vw, 32px) 0 0;
  max-width: 46ch;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ge-text-secondary, #4A5876);
}
/* the bold lead-in, exactly as Starling opens theirs */
.ab2-open__lede strong { font-weight: 600; color: var(--ge-navy, #0F1438); }

/* The .statement band used as a PAGE OPENER rather than mid-page.
   Measured 3 Aug: its 158px bottom padding plus the first beat's own 76px left
   234px of empty white with no colour change to justify it — a band edge on this
   site is ~140px at most, and that budget only applies where the background
   actually changes. The band keeps its full TOP padding (that air above the big
   line is the point) and gives up most of the bottom. */
.statement--open { padding-bottom: clamp(20px, 3vw, 44px); }

/* ---------- alternating statement beats ----------
   Each beat is copy + image, and the sides alternate down the page via
   --flip. The image is a placeholder for now; swapping it for an <img>
   needs no layout change since both occupy the same grid cell. */
/* No bottom padding: each beat already carries its own 76px padding-block, so a
   section-level bottom padding was double-counting it. Measured 3 Aug: the gap
   from the last beat to the mission line came to 366px against a 144px rhythm
   between the beats themselves — the single worst spacing on the page. Removing
   it lands that gap at ~251px, in line with the other band changes (216, 196).
   Safe on both pages: .ab2-beats is followed by .ab2-mission on About AND
   Careers, never by the footer, so nothing is left short. */
.ab2-beats { background: #fff; padding: 0; }
.ab2-beat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 76px);
}
/* flip the pair: image first, copy second. `order` rather than a reversed
   grid so the DOM keeps reading heading-then-image for screen readers. */
.ab2-beat--flip .ab2-beat__copy { order: 2; }
.ab2-beat--flip .ph,
.ab2-beat--flip .ab2-beat__img { order: 1; }
.ab2-beat__copy { max-width: 44ch; }
.ab2-beat h2 {
  margin: 0;
  font-size: clamp(25px, 2.9vw, 42px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ge-navy, #0F1438);
}
/* A beat whose heading is set in deliberate lines. The copy column's 44ch cap
   is a READING measure for the paragraph; a 37px heading inside it only gets
   ~24 characters a line, which is what orphaned "engagement" onto a line of its
   own. So the heading is allowed the full grid column and the paragraph keeps
   the 44ch measure on itself. */
.ab2-beat--lines .ab2-beat__copy { max-width: none; }
.ab2-beat--lines .ab2-beat__copy p { max-width: 44ch; }
/* Even with the cap lifted, the equal column was 572px and the longest line
   needs 603px at this heading size, so the line still broke. The heading size is
   NOT reduced — she has asked before that every beat heading match — so this one
   beat takes a slightly bigger share of the row instead. The image cell shrinks
   a little; its ratio is fixed, so nothing distorts. */
.ab2-beat--lines { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }

/* Manual line breaks in a beat heading. Hand-placed breaks look balanced at the
   width they were chosen for and awful at every other one, so they switch off
   once a line stops fitting. 480px is measured, not guessed: the heading font
   bottoms out at its 25px clamp minimum, where the longest of the three lines
   needs ~361px, and the column only drops under that below ~480px viewport.
   Above it the breaks hold — including on one column, where the copy has the
   full container width. */
@media (max-width: 480px) {
  .ab2-nobr { display: none; }
}
.ab2-beat p {
  margin: 16px 0 0;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  color: var(--ge-text-secondary, #4A5876);
}

/* ---------- mission — the ONE oversized line on the page ---------- */
body.hv2 .ab2-mission { background: var(--ge-bg-light, #F3F7FA); padding: clamp(72px, 9vw, 130px) 0; }
body.hv2 .ab2-mission__eyebrow {
  margin: 0 0 clamp(20px, 2.2vw, 30px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ge-text-secondary, #4A5876);
}
/* matches the approved .statement__line setting: 600 / -0.02em / 84px ceiling */
body.hv2 .ab2-mission__line {
  margin: 0;
  max-width: 30ch;
  /* ⚠ 46px, NOT 84px, since 6 Aug 2026 — and it is a SHARED change on purpose.
     Rebecca: "i think we should give our careers page the same treatment as the
     about us page." Once both openers came down to the Starling 46px, an 84px
     mission line was the biggest thing on either page and the hierarchy read
     backwards — the loudest moment was in the middle, not at the top.
     Same clamp as .ab2-open__h so the opener and the mission read as a pair.
     ⚠ This file is shared by About us and Careers ONLY (checked), so changing the
     base here is the correct scope — it is what "the same treatment" means. */
  font-size: clamp(28px, 3.1vw, 46px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ge-navy, #0F1438);
}
body.hv2 .ab2-mission__line .mark {
  display: inline-block;
  background: var(--ge-blue-3, #D9F4FF);
  color: var(--ge-blue, #1B367E);   /* 9.8:1 */
  border-radius: 0.24em;
  padding: 0.1em 0.18em 0.16em;
  margin-block: 0.14em 0.08em;
  line-height: 1;
}

/* ---------- CEO quote — a blue tile, not a full-width band ----------
   Was a full-bleed navy section spanning the viewport (Rebecca, 29 Jul: "on
   reflection i dont like cerys quote in a full width section. lets just put it
   in a blue tile"). Now a contained tile inside the page's normal container,
   so it reads as one object on the white page rather than as another band.
   Flat brand blue, 24px tile radius, no gradient.

   REBUILT 3 Aug: Rebecca — "is there anything we can do with the testimonial
   and job role section - seems a bit like an afterthought". Measured cause: the
   tile was 1216px wide with the quote capped at 832px, leaving 320px of dead
   blue, and Cerys was a 56px avatar cut from a 632px portrait. It now uses the
   same two-column pairing as the beats above — her photo filling one column,
   the quote on blue in the other — so the page's closing testimonial belongs to
   the page's rhythm instead of interrupting it.
   The photo column is capped at 340px on purpose: the source is only 632px, so
   anything wider would go soft on a retina screen. */
.ab2-quote { background: #fff; padding: clamp(48px, 6vw, 88px) 0; }
.ab2-quote__fig {
  position: relative;
  overflow: hidden;              /* clips the photo + ghost mark to the corners */
  margin: 0;
  padding: 0;                    /* the photo bleeds to the tile edge */
  border-radius: 24px;
  background: var(--ge-blue, #1B367E);
  color: #fff;
  text-align: left;
  display: grid;
  /* 26%/340px, not 30%/400px: the source is a TIGHT head crop, and any wider
     it stops reading as a portrait and starts reading as a giant face. */
  grid-template-columns: clamp(180px, 26%, 340px) minmax(0, 1fr);
  align-items: stretch;
}
.ab2-quote__photo { position: relative; min-height: 100%; }
.ab2-quote__photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 18%;   /* her eyeline, not the middle of the frame */
  /* NB the src is about-cerys-portrait.jpg, not the original PNG: that PNG has a
     ~55px rounded frame with TRANSPARENT corners baked in, which was invisible
     inside the old 56px circle but showed as blue notches once the photo filled
     a square column. The JPEG is cropped past the frame. */
}
/* ⚠ .ab2-quote__fig carries the blue, not __body — the card is the FIGURE and
   __body is the padded inner. Clearing only __body left the type on blue at
   1.59:1. Both have to go. */
body.hv2 .ab2-quote__fig {
  background: transparent;
  overflow: visible;
}
body.hv2 .ab2-quote__body {
  position: relative;
  z-index: 1;
  padding: clamp(32px, 4.5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.hv2 .ab2-quote__mark {
  position: absolute;
  right: -4%;
  bottom: -38%;
  width: 34%;
  opacity: 0.09;
  pointer-events: none;
}
body.hv2 .ab2-quote__mark img { width: 100%; height: auto; display: block; }
body.hv2 .ab2-quote blockquote {
  position: relative;
  z-index: 1;
  margin: 0;
  /* 34ch, up from 42ch: the measure is now the tile's SECOND column, not its
     full width, so a narrower measure is what fills it rather than starving it. */
  max-width: 34ch;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: #fff;
}
/* decorative quote marks, so they hang outside the measure */
.ab2-quote blockquote::before { content: "\201C"; }
.ab2-quote blockquote::after  { content: "\201D"; }
body.hv2 .ab2-quote figcaption {
  position: relative;
  z-index: 1;
  margin-top: clamp(24px, 2.8vw, 34px);
}
/* The tile stacks at 860px — the SAME point the beats above stack, so the whole
   page changes shape at once. Below that the two columns starve both halves: at
   390px the quote had 170px to live in, and even at 768px the photo was down to
   a 183px sliver of what is a tight head crop. 4:3 keeps 75% of the frame's
   height; a wider ratio like 16:9 clips her chin. */
@media (max-width: 860px) {
  .ab2-quote__fig { grid-template-columns: 1fr; }
  .ab2-quote__photo { aspect-ratio: 4 / 3; }
  .ab2-quote__photo img { object-position: center 25%; }
}
body.hv2 .ab2-quote__name { display: block; font-weight: 600; font-size: 16.5px; color: #fff; }
body.hv2 .ab2-quote__role { display: block; font-size: 14.5px; color: rgba(255, 255, 255, 0.75); }

/* ---------- values — a numbered list, deliberately not cards ---------- */
body.hv2 .ab2-values { background: #fff; padding: clamp(72px, 9vw, 130px) 0; }
.ab2-values__h {
  margin: 0 0 clamp(34px, 4vw, 56px);
  max-width: 26ch;
  font-size: clamp(27px, 3.2vw, 48px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ge-navy, #0F1438);
}
.ab2-values__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ab2v;
}
.ab2-values__list li {
  counter-increment: ab2v;
  display: grid;
  /* Explicit placement below. Without it the three children (::before, h3, p)
     just fill the grid in order, so the <p> wrapped onto row 2 COLUMN 1 — the
     narrow number column — and set one word per line. The number therefore
     spans both rows and the text column is addressed by name. */
  grid-template-columns: clamp(52px, 6vw, 84px) minmax(0, 1fr);
  column-gap: clamp(16px, 2.4vw, 40px);
  align-items: start;
  padding-block: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--ge-neutral-lt3, #E6ECF4);
}
.ab2-values__list li:last-child { border-bottom: 1px solid var(--ge-neutral-lt3, #E6ECF4); }
/* the number is the only bright accent in this block */
.ab2-values__list li::before {
  content: "0" counter(ab2v);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 700;               /* numbers keep 700 per the type rules */
  line-height: 1.5;               /* sits on the heading's first baseline */
  color: var(--ge-sky, #2FB7F1);
  font-variant-numeric: tabular-nums;
}
.ab2-values__list h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ge-navy, #0F1438);
}
.ab2-values__list p {
  grid-column: 2;
  grid-row: 2;
  margin: 6px 0 0;
  max-width: 52ch;
  font-size: clamp(15.5px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ge-text-secondary, #4A5876);
}

/* The 2030 band's .ab2-2030* rules were deleted 3 Aug 2026 with the section
   itself (Rebecca, from Andrew's review). About Us was the only page that used
   them. .ab2-values is deliberately KEPT below/above — careers.html still uses
   it. Removed copy is recorded in CEO-COMMENTS-andrew-batch2.md. */

/* ---------- careers close ---------- */
.ab2-jobs { background: #fff; padding: clamp(72px, 9vw, 130px) 0 clamp(80px, 10vw, 150px); }

/* About's closing block only — careers.html shares .ab2-jobs, so everything
   here is on a modifier (3 Aug: "seems a bit like an afterthought"). It was a
   heading, one line and two links adrift in white space, and it was the LAST
   thing before the footer, so the page ended on its thinnest element.
   Two fixes: it closes on colour now (sky tint, between the white above and the
   navy footer below — no two adjacent bands share a background), and the real
   vacancy sits in a white card beside the pitch instead of being alluded to.
   ⚠ NO team photo was used: the only unused team shot is the same summit photo
   now in the Cardiff beat above, and repeating it on one page looks like a
   mistake. Drop a proper team-at-work photo in place of .ab2-jobs__card's
   column when one exists. */
.ab2-jobs--close {
  background: var(--ge-blue-3, #D9F4FF);
  padding: clamp(64px, 8vw, 110px) 0;
}
.ab2-jobs__close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.ab2-jobs--close .ab2-jobs__lede { margin-bottom: clamp(26px, 3vw, 36px); }
.ab2-jobs__card {
  background: #fff;
  border-radius: 24px;
  padding: clamp(26px, 3vw, 40px);
  box-shadow: 0 8px 24px rgba(15, 20, 56, 0.08);
}
.ab2-jobs__tag {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--ge-navy, #0F1438);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ab2-jobs__rolename {
  margin: 0 0 10px;
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ge-navy, #0F1438);
}
.ab2-jobs__meta {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ge-text-secondary, #4A5876);
}
.ab2-jobs__card .ab2-link { margin-top: 20px; }
@media (max-width: 860px) {
  .ab2-jobs__close { grid-template-columns: 1fr; }
}
.ab2-jobs__h {
  margin: 0;
  max-width: 24ch;
  /* ⚠ THE SIZE IS SET BELOW, NOT HERE — see the note under this block. */
  font-size: clamp(26px, 2.9vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ge-navy, #0F1438);
}

/* ⚠ body.hv2 IS REQUIRED and the bare .ab2-jobs__h above cannot do this job.
   home-v2.css carries `.hv2 h2 { font-size: clamp(32px, 4vw, 54px) }` — that is
   (0,1,1), and a lone class is (0,1,0), so the base rule above LOSES and this
   heading rendered at 54px no matter what was written there. It had been losing
   since long before today; changing the number above alone did nothing.
   42px matches the beats and sits under both pages' 46px opener, so the top of the
   page leads. Shared by About us and Careers, which is the point — Rebecca:
   "i think we should give our careers page the same treatment as the about us page."
   6 Aug 2026. */
body.hv2 .ab2-jobs__h { font-size: clamp(26px, 2.9vw, 42px); }
.ab2-jobs__lede {
  margin: 16px 0 clamp(32px, 3.6vw, 48px);
  max-width: 50ch;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--ge-text-secondary, #4A5876);
}
.ab2-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ab2-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(24px, 3vw, 38px);
  background: var(--ge-bg-light, #F3F7FA);
  border-radius: 24px;
}
.ab2-role__info { min-width: 0; }
.ab2-role h3 {
  margin: 0;
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ge-navy, #0F1438);
}
.ab2-role__meta {
  margin: 8px 0 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ge-blue, #1B367E);
}
.ab2-role__desc {
  margin: 12px 0 0;
  max-width: 62ch;
  font-size: clamp(15.5px, 1.3vw, 17.5px);
  line-height: 1.6;
  color: var(--ge-text-secondary, #4A5876);
}
.ab2-role__cta.btn {
  flex: none;
  background: var(--ge-navy, #0F1438);
  color: #fff;
  min-height: 48px;
}
.ab2-role__cta.btn:hover { background: var(--ge-blue, #1B367E); color: #fff; }
.ab2-role__cta .btn__arrow { background: var(--ge-sky, #2FB7F1); color: var(--ge-navy, #0F1438); }
.ab2-jobs__spec {
  margin: clamp(26px, 3vw, 40px) 0 0;
  font-size: 16px;
  color: var(--ge-text-secondary, #4A5876);
}
.ab2-jobs__spec a { color: var(--ge-blue, #1B367E); font-weight: 600; }
.ab2-jobs__spec a:hover { color: var(--ge-navy, #0F1438); }

/* ---------- entrance: CSS only, never .rv (which needs deferred JS) ---------- */
@keyframes ab2-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ab2-open__h    { animation: ab2-in 460ms var(--hv2-ease) both; }
.ab2-open__lede { animation: ab2-in 460ms var(--hv2-ease) 90ms both; }

@media (prefers-reduced-motion: reduce) {
  .ab2-open__h, .ab2-open__lede { animation: none; opacity: 1; transform: none; }
  .ab2-link:hover svg { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .ab2-2030__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* single column: the number moves above the heading, so the explicit
     row/column placement set above has to be undone or it would keep
     reserving a second column that no longer exists */
  .ab2-values__list li { grid-template-columns: 1fr; row-gap: 6px; }
  .ab2-values__list li::before { grid-column: 1; grid-row: 1; }
  .ab2-values__list h3 { grid-column: 1; grid-row: 2; }
  .ab2-values__list p  { grid-column: 1; grid-row: 3; }
  .ab2-role { flex-direction: column; align-items: stretch; }
  .ab2-role__cta.btn { justify-content: center; }
}

/* ============================================================
 * PHOTO PLACEHOLDER (Rebecca, 29 Jul: "i dont have photos yet so
 * make them placeholders using our brand colours and write in the
 * shape 'photo placeholder'").
 * Brand sky tint with a dashed sky border so it reads
 * unmistakably as "not final" rather than as a design choice —
 * nobody could mistake this for finished artwork. Swap a block for
 * an <img> (same class for the frame, or drop the class) when the
 * real photography arrives.
 * aria-hidden on the markup: it carries no information for a
 * screen reader, it's a production note.
 * ============================================================ */
/* The .ph placeholder component MOVED to home-v2.css on 29 Jul (the
   Founders hero needed it, and that page does not load this sheet).
   Definitions are there now — .ph, .ph__label, .ph--c1..c4, .ph--beat.
   Only the statement-page LAYOUT rules for it remain below. */
@media (max-width: 860px) {
  .ab2-open__inner { grid-template-columns: 1fr; }
  .ab2-open__copy { max-width: none; }
  .ab2-beat { grid-template-columns: 1fr; }
  /* on one column the image always follows its heading, so the flip is undone.
     All three image forms are listed — placeholder, real photo, and the package
     graphic — or a beat whose placeholder has been replaced keeps the desktop
     order on a phone and the picture arrives before its own heading. */
  .ab2-beat--flip .ab2-beat__copy { order: 1; }
  .ab2-beat--flip .ph,
  .ab2-beat--flip .ab2-beat__img { order: 2; }
  .ab2-beat__copy { max-width: none; }
}

/* About's careers block is heading + links only (careers.html owns the role
   list), so it needs an actions row the way the role card's own CTA has one. */
.ab2-jobs__actions {
  margin-top: clamp(24px, 3vw, 36px);
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.ab2-jobs__actions .ab2-link { margin-top: 0; }
@media (max-width: 560px) {
  .ab2-jobs__actions { flex-direction: column; align-items: stretch; }
  .ab2-jobs__actions .btn { justify-content: center; }
  .ab2-jobs__actions .ab2-link { justify-content: center; }
}

/* A real photo dropped into a beat's image cell. Same geometry as the .ph
   placeholder it replaces, so swapping one for the other moves nothing else.
   object-position is biased below centre: the source photos are portrait-ish
   and the people sit in the lower half, so a centred crop of a landscape
   window would favour sky over faces. */
.ab2-beat__img,
.ab2-open__inner > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 58%;
  border-radius: clamp(18px, 2vw, 24px);
  display: block;
}

/* ---------- benefits ----------
   A two-column term + line list, not a card grid (she rejects card grids for
   carrying a section's message). Sky tick as the only accent, matching the
   2030 list's dot treatment. */
.ab2-benefits { background: var(--ge-bg-light, #F3F7FA); padding: clamp(72px, 9vw, 130px) 0; }
.ab2-benefits__h {
  margin: 0;
  font-size: clamp(27px, 3.2vw, 48px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ge-navy, #0F1438);
}
/* Heading-to-list gap lives on the LIST, not the lede — Careers dropped its
   lede on 29 Jul ("change What you get. / The basics, properly covered. to
   'Our Benefits'"), so the gap must not depend on the lede being present. */
.ab2-benefits__lede {
  margin: 14px 0 0;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ge-text-secondary, #4A5876);
}
.ab2-benefits__list {
  list-style: none;
  margin: clamp(32px, 3.6vw, 50px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 36px) clamp(32px, 4.5vw, 72px);
}
.ab2-benefits__list li { position: relative; padding-left: 34px; }
/* BULLET RULE (3 Aug 2026): "can we change all site bullet points to be navy
   with white ticks. if they are on a navy section make them white with a navy
   tick." Every list bullet below follows it. Excluded on purpose: the comparison
   matrix's Included/Not-included marks (a data cell, not a bullet) and the ticks
   drawn inside the fake app screenshots (they're product UI, not page furniture).
   */
.ab2-benefits__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--ge-navy, #0F1438);
  /* the tick, drawn rather than an icon file */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.ab2-benefits__list h3 {
  margin: 0;
  font-size: clamp(16.5px, 1.5vw, 19px);
  font-weight: 600;
  color: var(--ge-navy, #0F1438);
}
.ab2-benefits__list p {
  margin: 5px 0 0;
  font-size: clamp(15px, 1.25vw, 16.5px);
  line-height: 1.55;
  color: var(--ge-text-secondary, #4A5876);
}
@media (max-width: 700px) {
  .ab2-benefits__list { grid-template-columns: 1fr; }
}

/* ---------- solo opening (Careers) ----------
   The one section on either page with no image. Because the copy now spans the
   full container rather than a half-width column, the headline can go back up
   to the larger size the paired version had to give up — the measure is capped
   in ch so it still breaks onto 2-3 lines rather than one very long one. */
.ab2-open--solo { padding: clamp(64px, 9vw, 132px) 0 clamp(52px, 6.5vw, 92px); }
.ab2-open--solo .ab2-open__copy { max-width: none; }
.ab2-open--solo .ab2-open__h {
  max-width: 22ch;
  /* STATEMENT tier, 76px — matches Privacy / Terms / Carbon. Was 74px. */
  font-size: clamp(34px, 5.4vw, 76px);
}
.ab2-open--solo .ab2-open__lede { max-width: 56ch; font-size: clamp(17px, 1.5vw, 21px); }

/* ---------- foot-of-page note tile (no agencies) ---------- */
.ab2-note { background: #fff; padding: 0 0 clamp(72px, 9vw, 130px); }
/* Navy tile (Rebecca, 29 Jul: "can we make the note to agencies tile a
   different colour - navy"). Text colours are the on-navy pair used
   elsewhere on the site — white heading, #C9D3E6 body (both well past AA). */
.ab2-note__tile {
  padding: clamp(28px, 3.4vw, 46px);
  border-radius: 24px;
  background: var(--ge-navy, #0F1438);
}
.ab2-note__h {
  margin: 0;
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.ab2-note__tile p {
  margin: 10px 0 0;
  max-width: 76ch;
  font-size: clamp(15.5px, 1.3vw, 17px);
  line-height: 1.6;
  color: #C9D3E6;
}

/* ============================================================
 * ABOUT US + CAREERS — MODULAR TREATMENT  (5 Aug 2026)
 * Overnight brief: "amend the layout … take into consideration how the rest of
 * the site looks and think how monzos web team would."
 *
 * MEASURED FIRST: both pages were flat white top to bottom — five and seven
 * sections, not one carded band between them. Every other page on the site now
 * alternates plain white with inset colour or tint cards, so these two read as
 * belonging to a different site. Monzo does the same thing: a white page whose
 * key moments sit in a small number of rounded cards, never a wash across the
 * full width.
 *
 * Deliberately restrained — TWO cards per page, not five. The point of a card is
 * that it is the exception; card everything and you are back to a flat page with
 * extra corners.
 * ============================================================ */

/* ---- the mission line becomes the page's one dark moment ----
 * Shared by both pages ("Our mission…" on About, "How we hire…" on Careers).
 * It is the single biggest claim on either page and had no more emphasis than
 * the paragraph above it. Navy, so it reads as the same object as the home
 * page's numbers band and the product pages' tree diagram. */
/* ⚠ body.hv2 on every selector in this block. modular.css loads AFTER this file
   and lists .ab2-mission in its all-sections-are-white rule at (0,2,1), so the
   bare class lost. The colour rules below DID apply, so the first attempt left
   white type on a white band at 1:1 — invisible. Same trap as the OnSite quote
   and the product price cards. */
body.hv2 .ab2-mission {
  background: var(--ge-navy, #0F1438);
  margin-inline: var(--band-inset, 24px);
  border-radius: var(--band-radius, 64px);
  overflow: hidden;
  isolation: isolate;
  position: relative;
}
body.hv2 .ab2-mission__eyebrow { color: rgba(255, 255, 255, 0.62) !important; }
body.hv2 .ab2-mission__line { color: #fff !important; }
/* the highlight pill keeps the site-wide pale-sky / blue pairing, which reads
   correctly on navy without any change — see the highlight-pill rule */
body.hv2 .ab2-mission .mark { background: var(--ge-blue-3, #D9F4FF); color: var(--ge-blue, #1B367E); }

/* the same faint hexagon every dark card on the site carries: white at 11%,
   bleeding off the top-right, clipped by the card's own radius */
body.hv2 .ab2-mission::before {
  content: "";
  position: absolute;
  top: clamp(-110px, -7vw, -50px);
  right: clamp(-110px, -7vw, -50px);
  width: clamp(320px, 34vw, 520px);
  aspect-ratio: 175 / 193;
  background: url("../assets/images/brand/grouped-symbol-white.svg") no-repeat center / contain;
  opacity: 0.11;
  pointer-events: none;
  z-index: 0;
}
body.hv2 .ab2-mission > * { position: relative; z-index: 1; }

/* ---- the values grid becomes a neutral module (Careers only) ----
 * Five values in a row is the page's densest block; a tint holds them together
 * as one idea instead of five loose cards on white. */
body.hv2 .ab2-values {
  background: var(--ge-bg-light, #F3F7FA);
  margin-inline: var(--band-inset, 24px);
  border-radius: var(--band-radius, 64px);
  overflow: hidden;
}

/* ---- the About us testimonial goes tile-free  (5 Aug 2026) ----
 * Two reasons, and the second is the one that forced it.
 * 1. CONSISTENCY. Every testimonial on the site is now tile-free — the home
 *    page, OnSite, and all three school-type pages: no card, oversized navy type
 *    at clamp(30px, 3.9vw, 54px) on a 25ch measure, crest or name in a caption
 *    beneath. This was the last carded one left.
 * 2. ADJACENCY. Putting the mission band in a navy card (above) left this blue
 *    card immediately after it — two dark blocks back to back, which is the
 *    exact pattern she has rejected twice before. Removing the card removes the
 *    clash rather than papering over it.
 * ⚠ Every colour in here was written for a blue card, so all of it has to flip:
 *    white type on white is the trap that has caught the OnSite quote, its stat
 *    chips and the product price cards already today. */
body.hv2 .ab2-quote__body {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
}
body.hv2 .ab2-quote__mark { display: none; }        /* watermark belonged to the card */
body.hv2 .ab2-quote blockquote {
  max-width: 25ch;
  /* ⚠ 38px, DOWN FROM 54px — Rebecca, 11 Aug 2026: "lets make cerys testimonial
     smaller", in the same pass as shrinking the charter tile.
     ⚠⚠ THIS DELIBERATELY BREAKS THE SITE-WIDE TESTIMONIAL SIZE. clamp(30px, 3.9vw,
     54px) is the shared figure — home-v2.css (×2), onsite-v2.css and school-types.css
     all still carry it, and the comment above this block calls that consistency out
     as reason #1 for the tile-free treatment. `.ab2-quote` is About-only (checked:
     zero occurrences on any other page), so this changes Cerys's quote and nothing
     else. If the other four are ever brought down to match, delete this override
     rather than leaving two sizes in play. */
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  /* ⚠ 400, not 600 — Rebecca, 11 Aug 2026: "i think cerys quote can be a regular
     weight". This is display-SIZE type but it is a quotation, not a heading, so it
     is outside the headings-are-600 rule in CLAUDE.md. The size still carries it. */
  font-weight: 400;
  color: var(--ge-navy, #0F1438);
}
body.hv2 .ab2-quote figcaption { margin-top: clamp(22px, 2.4vw, 32px); }
body.hv2 .ab2-quote__name { color: var(--ge-navy, #0F1438); font-size: clamp(15px, 1.2vw, 17px); }
body.hv2 .ab2-quote__role { color: #4A5876; font-size: clamp(13px, 1.05vw, 14.5px); }

/* ---- the CEO portrait joins the caption  (5 Aug 2026) ----
 * It was a 520px square with hard corners sitting to the left of the quote,
 * top-aligned, finishing well below the attribution — the leftover of the card
 * layout, where it was one half of a two-column tile.
 * With the card gone it becomes what every other testimonial on the site uses:
 * a mark beside the name inside the caption. The difference is that this one is
 * a FACE rather than a school crest, which is the one thing Monzo's testimonials
 * have that ours do not — so it is worth keeping, just at caption scale.
 * Round, because a square photo next to a name reads as a document; a circle
 * reads as a person. */
body.hv2 .ab2-quote__fig {
  display: block;
  max-width: min(1040px, 100%);
}
body.hv2 .ab2-quote__photo {
  /* out of the two-column flow and into the caption row below */
  display: none;
}
body.hv2 .ab2-quote figcaption {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 20px);
}
/* the portrait, re-placed as a round avatar via the caption's own ::before so no
   markup has to move */
body.hv2 .ab2-quote figcaption::before {
  content: "";
  flex: none;
  width: clamp(52px, 4.4vw, 64px);
  aspect-ratio: 1;
  /* 6 Aug 2026: a SQUARE with curved corners, not a circle — "can we make the cerys
     thumbnail a square with cuved corners".
     ⚠ The comment above this block argued the opposite ("a circle reads as a
     person"); it is superseded. 14px is the site's icon-tile radius from CLAUDE.md,
     which is what makes a 64px square read as part of the system rather than as a
     cropped photo — the team photo beside it wears the larger 18-24px card radius,
     so the two are related without being identical. */
  border-radius: 14px;
  background: url("../assets/images/photos/team/about-cerys-portrait.jpg") no-repeat center / cover;
}
body.hv2 .ab2-quote figcaption > span:first-of-type { display: block; }

/* ⚠ the .ab2-jobs / .ab2-note gap rule that was here MOVED to modular.css.
   `body.hv2 main > section.ab2-note` is (0,2,3) and modular's
   `body.hv2 main > section:not(:first-child)` is also (0,2,3) — a tie that
   modular wins on load order, so the override did nothing from this file. */

/* ---- the About us hero ----
 * MOVED to styles/modular.css on 6 Aug, when Rebecca asked for the same hero on
 * Book a Demo and the Launch Deal: it is a shared component now (.statement--hero),
 * not an About us style, and it has to sit in modular.css because
 * `main > section:first-child { padding-bottom: 0 }` ties its selector at (0,2,3)
 * and wins on load order from anywhere earlier. Nothing about it lives here. */


/* ---- the quote sits UNDER a wide team photo  (6 Aug 2026) ----
 * Rebecca: "i thought we were supposed to have cerys quote under a big photo of
 * the team?"
 *
 * ⚠ READ THE BLOCK ABOVE BEFORE EDITING THIS ONE. My first attempt at this failed
 * because I styled the ORIGINAL two-column card (portrait left, blue quote right)
 * that appears at the top of this file — that design was already superseded ~500
 * lines further down, where `body.hv2 .ab2-quote__fig` becomes `display: block`
 * and `body.hv2 .ab2-quote__photo` is `display: none`, with the portrait re-placed
 * as a round avatar on `figcaption::before`. Setting grid columns and an
 * aspect-ratio on a display:none element did exactly nothing — the photo measured
 * 0x0. If you change this, grep for EVERY `.ab2-quote` rule first; there are two
 * generations of them in this file.
 *
 * So this un-hides the photo and gives it the band, rather than re-plumbing a grid.
 * The little Cerys avatar in the caption STAYS: the big photo says "this is the
 * team", the avatar says "and this is who is speaking". */
body.hv2 .ab2-quote__fig--team .ab2-quote__photo {
  /* ⚠ body.hv2 IS REQUIRED. `body.hv2 .ab2-quote__photo { display: none }` above is
     (0,2,1); a two-class selector here is (0,2,0) and LOSES, so the photo stayed
     hidden and measured 0x0. Second time this exact trap has bitten on this file. */
  display: block;                  /* ⚠ undoes the display:none above — required */
  min-height: 0;
  /* ⚠ 3:2 — THE PHOTO'S OWN FULL FRAME, not a band shape I chose. It was 1800/899
     and Rebecca corrected it: she wants the whole photograph. The rule is that the
     BAND fits the PHOTO here, not the other way round; if the image is ever
     re-exported at a different ratio, change this number to match it. */
  aspect-ratio: 1800 / 1211;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: clamp(28px, 3vw, 44px);
}
body.hv2 .ab2-quote__fig--team .ab2-quote__photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;         /* the full frame is shown, so nothing to bias */
}
@media (max-width: 700px) {
  /* a 2:1 band of twenty people is unreadable on a phone — let it get taller */
  /* already 3:2 — nothing to change on a phone now the full frame is used */
  body.hv2 .ab2-quote__fig--team .ab2-quote__photo img { object-position: center 45%; }
}

/* ============================================================
 * ABOUT US REDESIGN  (6 Aug 2026)
 * Rebecca: "design me a new about us page using the same content that we have.
 * make something that will fit in with the rest of the site."
 *
 * Not a new page — the SAME components, re-ordered and re-weighted, so it reads
 * as one shape instead of a stack of bands saying the same thing three times.
 * The page now goes: pale card (attitude) → two photo beats on a diagonal →
 * NAVY card (the procurement fact) → the whole team, huge → pale card (careers).
 * Pale, pale, dark, pale: the dark card is the pivot, and it bookends.
 *
 * ⚠ EVERY RULE BELOW IS ON AN ABOUT-ONLY MODIFIER. .ab2-mission, .ab2-beat and
 * .statement--hero are all shared with careers.html / book-a-demo.html /
 * founders-club.html. Nothing here may leak onto them.
 * ============================================================ */

/* ---- 1. the hero punchline drops to its own line ---- */
body.hv2 .statement--hero .statement__line .mark--turn { display: block; }

/* ---- 4. the ownership card: same 84px type, tighter measure ----
 * The hero and this card were both 84px across a wide measure, so they tied and
 * the page had two competing "biggest" moments. Fixed with SPACE, not size — the
 * type stays at Rebecca's signed-off setting and the measure drops to 20ch, so
 * the line breaks clause-per-line and floats in the middle of the card:
 *     "No private equity." / "Our investors are" / "social improvers."
 * ⚠ If the break lands wrong, tune between 18ch and 22ch. Do NOT insert a <br>. */
/* 18ch, not 20 — at 20 the line broke after "Our", which strands a pronoun.
   18 gives the clean clause-per-line break the card is built around. */
/* ---- the hero leads again  (6 Aug 2026) ----
 * Measured after the Starling opener went in: hero 45px, beats 42px, ownership
 * card 75px, careers close 54px. The page's LOUDEST moment was in the middle,
 * because dropping the hero from 84px to 46px left the two big cards behind on the
 * old scale. Both come down to the hero's own clamp so it reads as one system and
 * the top of the page is the top of the hierarchy.
 * ⚠ Both are About-only. .ab2-mission and .ab2-jobs__h are shared with
 * careers.html, whose hero is still 76px — leave that page alone. */
/* About's ownership card keeps only its MEASURE override now — the size moved to
   the shared base rule above, so Careers gets it too.
   26ch, not the base 30ch: "No private equity. Our investors are social improvers."
   is a longer line than Careers' "We hire for values." and needs the tighter measure
   to break clause-per-line. */
body.hv2 .ab2-mission--tight .ab2-mission__line { max-width: 26ch; }

/* ---- the careers block sits CENTRED  (6 Aug 2026) ----
 * Rebecca: "make this central". The two columns were 1fr each across the module's
 * full 1216px, so the heading hugged the far left and the vacancy card the far
 * right with a wide empty channel down the middle — the block read as two things
 * that happened to share a row rather than one closing statement.
 * Capped and centred, so the pair sits together in the middle of the pale card.
 * ⚠ .ab2-jobs__close appears only on about-us.html (checked: zero occurrences in
 * careers.html), but it is scoped to --close anyway so it stays that way. */
/* ⚠ SPECIFICITY — this needs all three element names, and here is why.
   The wrapper is `class="container ab2-jobs__close"`, and modular.css carries
   `body.hv2:not(.home) .container { max-width: none }`. That is (0,3,1) —
   :not(.home) counts as a class — and `body.hv2 .ab2-jobs--close .ab2-jobs__close`
   is ALSO (0,3,1). A tie, and modular.css always loads last, so it won and the cap
   did nothing. Adding main > section takes this to (0,3,3).
   This is the same trap the ownership card's padding hit earlier today. */
body.hv2 main > section.ab2-jobs--close > .ab2-jobs__close {
  /* ⚠ 10 Aug 2026 — WIDENED FROM 1000px, AND THE CHANNEL IS THE REAL FIX.
     Rebecca: "it looks too squished in the middle". Measured at 1440: the block
     was 1000px inside a 1312px card — 156px of dead space each side — and the two
     423px columns had a 154px channel between them. The content read as two small
     islands adrift in a big pale card.
     ⚠ Do NOT "fix" this by going full-width. That is what it was before 6 Aug and
     she rejected it ("make this central"): the heading hugged one edge and the
     vacancy card the other. Centred is right — it was just too narrow, with too
     much air in the middle. Wider block + tighter channel keeps the pair reading
     as one closing statement. */
  max-width: min(1180px, 100%);
  margin-inline: auto;
  gap: clamp(28px, 3.2vw, 56px);
}

/* ⚠ SPECIFICITY, and it is not optional. modular.css's
 *   `body.hv2 main > section:not(:first-of-type)`  is (0,2,3)
 * and sets this section's padding from --band-pad. A (0,2,3) selector here TIES
 * and loses on load order, because modular.css is always last. Naming BOTH
 * classes gets to (0,3,3) and wins.
 * (The plain `body.hv2 .ab2-mission { padding: ... }` higher up this file is dead
 * code for exactly this reason. Left alone deliberately — don't "fix" it.) */
body.hv2 main > section.ab2-mission.ab2-mission--tight {
  padding-top: clamp(80px, 10vw, 144px);
  padding-bottom: clamp(80px, 10vw, 144px);
}

/* ---- 5. the team photo goes band-scale ----
 * The 1040px cap was on the FIGURE, which capped the photograph as well as the
 * text. It moves to the body: the photo now runs the full container (1312px at
 * 1440) and the quote keeps its reading measure. */
/* the 1040 cap sits on the BODY, which is where the reading measure belongs. It
   was on the figure; that was fine while the figure held only text, and wrong the
   moment a photograph went in it. Left this way round even though the photo has
   gone — it is the correct place for it. */
body.hv2 .ab2-quote__fig  { display: block; max-width: none; }
body.hv2 .ab2-quote__body { max-width: min(1040px, 100%); }
/* ⛔ DEAD as of 6 Aug 2026 — the wide team-photo band was removed from About us
   ("then get rid of the big photo"), so nothing carries .ab2-quote__fig--team any
   more. Kept, not deleted, because the band may come back and the two traps below
   cost real time:
     · body.hv2 is load-bearing on these — `body.hv2 .ab2-quote__photo{display:none}`
       is (0,2,1) and a two-class selector loses to it, so the photo stays hidden.
     · there are TWO generations of .ab2-quote rules in this file; the two-column
       card version near line 204 is superseded ~500 lines lower. Grep them all.
body.hv2 .ab2-quote__fig--team .ab2-quote__photo { border-radius: var(--band-radius, 64px); }
*/

/* ---- 6. the vacancy card on the pale module ----
 * The shadow was a hedge for a white card on a white section. On #F3F7FA the card
 * separates on its own and the shadow just reads as grime.
 * ⚠ .ab2-jobs__card does not appear in careers.html — checked, zero occurrences —
 * so this is About-only despite the bare selector. */
.ab2-jobs__card { box-shadow: none; }

/* ⛔ REMOVED 6 Aug 2026 — "looks like a big [gap] here - on the about page".
   This set padding-top to 128px while the bottom stayed on the standard 76px
   band padding, so the module was lopsided by 52px. On top of that the left
   column (heading + two links, 180px) is much shorter than the vacancy card
   (275px) and is vertically centred, which leaves ~47px of pale above and below
   it — so the asymmetry read as a big empty patch at the bottom left.
   It now takes the site's standard 76/76 like every other section. Do not
   reintroduce a one-sided padding here.
body.hv2 main > section.ab2-jobs.ab2-jobs--close {
  padding-top: clamp(72px, 9vw, 128px);
}
*/

/* ---- the About us opener gets the eyebrow chip  (6 Aug 2026) ----
 * .ab2-open has no eyebrow of its own (Careers doesn't use one). About us does, so
 * it borrows .statement__eyebrow — but that class is styled for the PALE CARD hero,
 * where a white chip reads against #F3F7FA. On .ab2-open's white background a white
 * chip is invisible, so it drops the chip and becomes a plain uppercase label,
 * which is what Starling's opener has above its headline. */
body.hv2 .ab2-open .statement__eyebrow {
  background: none;
  box-shadow: none;
  padding: 0;
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  display: block;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ge-blue, #1B367E);
}

/* ---- the quote as a ROW, photo beside it  (6 Aug 2026) ----
 * Rebecca, after I flagged the quote was reading thin on its own: "put the team
 * photo beside it rather than above (so it's a row, not a stack)".
 *
 * ⚠ EVERY SELECTOR HERE CARRIES body.hv2 AND THE MODIFIER, and that is not
 * decoration. `body.hv2 .ab2-quote__photo { display: none }` further up is (0,2,1);
 * a two-class selector is (0,2,0) and LOSES to it, so the photo stays hidden and
 * measures 0x0. That exact mistake cost a round trip earlier today.
 * ⚠ There are TWO generations of .ab2-quote rules in this file — the original
 * two-column card near line 204 is superseded ~500 lines lower. Grep them all
 * before changing anything here. */
body.hv2 .ab2-quote__fig--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: center;
  max-width: none;
}
body.hv2 .ab2-quote__fig--row .ab2-quote__photo {
  display: block;          /* ⚠ undoes the display:none above — required */
  min-height: 0;
  min-width: 0;
  border-radius: clamp(18px, 2vw, 24px);
  overflow: hidden;
}
body.hv2 .ab2-quote__fig--row .ab2-quote__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;     /* the same slot shape the two beats above use */
  object-fit: cover;
  /* ⚠ 1500x1362 is nearly SQUARE (1.10), and the slot is 4:3 (1.33), so cover crops
     top and bottom. Biased low on purpose: the top third is sky and the group's feet
     run almost to the bottom edge, so a centred crop clipped their shoes. 68% keeps
     faces high in the frame and feet in it. Re-check this if the photo is re-exported
     at a different ratio. */
  object-position: center 68%;
  display: block;
}
/* the quote column keeps its own reading measure rather than the 1040 page cap */
body.hv2 .ab2-quote__fig--row .ab2-quote__body { max-width: none; }
@media (max-width: 860px) {
  /* stacks photo-then-quote, matching how the beats stack */
  body.hv2 .ab2-quote__fig--row { grid-template-columns: 1fr; }
}

/* ---- no vacancies: the jobs block loses its card (10 Aug 2026) --------------
 * scripts/roles.js removes .ab2-jobs__card entirely when nothing is open, rather
 * than leaving an empty white box. The two-column grid would then put the heading
 * in a half-width column with dead space beside it, so collapse to one column. */
body.hv2 main > section.ab2-jobs--close > .ab2-jobs__close--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: min(760px, 100%);
}

/* ============================================================
 * ABOUT US — Andrew's two amends  (11 Aug 2026)
 * 1. the first beat now leads with the core purpose, not pricing
 * 2. "Who owns us" became the Putting-schools-first charter
 *
 * ⚠ BOTH ARE ABOUT-ONLY. `.ab2-mission` and `.ab2-beat` are SHARED with
 *   careers.html — the convention in this file is that every About-specific
 *   change rides its own class. `.ab2-charter` and `.ab2-beat__eyebrow` are new
 *   and appear on About only, so they are safe; do not widen them.
 * ============================================================ */

/* the small label above the core-purpose heading */
body.hv2 .ab2-beat__eyebrow {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ge-text-secondary, #4A5876);
}

/* ---------- the charter ----------
   ⚠ This band is DARK (see the `body.hv2 .ab2-mission` override further up, which
   paints it navy with white type and !important). So the list has to be light on
   navy — inheriting the page's body colour would make it invisible. */
body.hv2 .ab2-mission--tight .ab2-charter {
  list-style: none;
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 1.4vw, 16px);
  max-width: 46ch;
}
body.hv2 .ab2-mission--tight .ab2-charter li {
  position: relative;
  padding-left: 34px;
  font-size: clamp(16px, 1.2vw, 18.5px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
/* the site-wide tick: a disc with a white glyph. ⚠ On this dark band the rule
   inverts to a WHITE disc with a navy glyph — that inversion is the one sanctioned
   exception in CLAUDE.md, and it is what keeps the ticks legible here. */
body.hv2 .ab2-mission--tight .ab2-charter li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff no-repeat center / 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1438' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ---------- a bigger watermark hexagon on the charter band ----------
   Rebecca, 11 Aug 2026: "can we make the water mark logo in the schools first
   charter tile bigger".
   ⚠ ON --tight, not on the base rule. The base rule (body.hv2 .ab2-mission::before,
   further up this file) is written to be shared, and careers.html DID carry a copy
   of this band ("How we hire") until it was retired — see the comment at the top of
   careers.html. So today About us is its only user and the modifier changes nothing
   else, but the base rule stays at its original size for whoever brings that band
   back: it is short, and a mark this size would swallow it.
   ⚠ The band only has room for this because the charter made it tall. If the list
   is ever cut back, shrink these two numbers with it.
   The opacity stays 0.11 — that is the site-wide ghost-mark value, and it is the
   size that changed, not the strength. */
body.hv2 .ab2-mission--tight::before {
  width: clamp(340px, 48vw, 780px);
  top: clamp(-150px, -9vw, -70px);
  right: clamp(-150px, -9vw, -70px);
}

/* ---------- the charter as full-width rows ----------
   Rebecca, 11 Aug 2026, having rejected the photo: each promise gets its own row
   across the whole band with a hairline between, so the band reads as a charter
   people sign rather than a bullet list.
   ⚠ NOT NUMBERED, deliberately. The Launch Deal's coloured 01/02/03 chips are a
   STEPS pattern — they say "do this, then this". A charter is five promises held at
   once, and numbering them would imply an order and a priority that do not exist.
   ⚠ The rules are white at 14%, not a solid colour. On navy anything stronger reads
   as a table; this is just enough to separate the rows. No rule under the last one —
   a trailing line makes the band look cut off rather than finished. */
/* ---- TWO COLUMNS (11 Aug 2026) ----
   Rebecca: "could we span the bullets over 2 columns."
   ⚠ FIVE ITEMS DO NOT HALVE. Three ways to break 5 across 2 columns and only one is
   tidy:
     · flow down (3 left, 2 right) — the right column ends a row short, so its last
       hairline is missing and the block looks unfinished
     · flow across (1|2, 3|4, 5) — item 5 sits alone in the left column with a
       half-width rule under it, which reads as a mistake
     · flow across with the LAST ITEM SPANNING BOTH — every rule runs edge to edge,
       nothing hangs. This is it.
   It also happens to be right for the content: "No private equity" is both the
   longest line and the closing point, so full width suits it. ⚠ If a sixth promise
   is ever added, drop the `grid-column: 1 / -1` — six items halve cleanly and the
   span would then leave a gap instead of filling one. */
body.hv2 .ab2-mission--tight .ab2-charter--rows {
  max-width: none;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 3.6vw, 60px);
}
body.hv2 .ab2-mission--tight .ab2-charter--rows li:last-child { grid-column: 1 / -1; }

/* ---- the supporting note under a promise (12 Aug 2026) ----
   Andrew supplied a sentence for two of the five promises. `display: block` is what
   makes it a second line rather than a run-on — the promise and the note are both
   inside the same <li> so the tick and the hairline still belong to the pair.
   ⚠ Rows in a grid row stretch to the tallest cell, so a promise WITH a note sitting
   beside one WITHOUT still shares a top border with it — the hairlines stay aligned
   across the column gap. That is why the mixed state is survivable while the other
   three notes are outstanding. */
body.hv2 .ab2-mission--tight .ab2-charter--rows .ab2-charter__note {
  display: block;
  margin-top: 6px;
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.45;
  color: var(--ge-text-secondary, #4A5876);
}
/* ⚠ THE HAIRLINES ARE GONE — Rebecca, 12 Aug 2026: "can we remove the lines".
   They were the whole point of the "charter rows" idea (rules between promises, so the
   band read like a document you sign). Without them the separation has to come from
   SPACE, so the row gap goes up as the borders come off — dropping the borders alone
   would leave the promises bunched at the old ~26px rhythm with nothing dividing them. */
body.hv2 .ab2-mission--tight .ab2-charter--rows {
  row-gap: clamp(24px, 2.6vw, 38px);
}
body.hv2 .ab2-mission--tight .ab2-charter--rows li {
  padding: 0 0 0 42px;
  font-size: clamp(16px, 1.2vw, 18.5px);
  color: var(--ge-navy, #0F1438);
}
/* ⚠ THE TICK GOES BACK TO THE FIRST LINE. While the rows had borders it was centred on
   the whole cell — right for a bordered row, wrong now: grid cells still stretch to
   match their neighbour, so on a one-line promise sitting beside a two-line one the
   centred tick floated well below its own text. Pinned to the first line it always sits
   against the promise, whatever the cell beside it does. */
body.hv2 .ab2-mission--tight .ab2-charter--rows li::before {
  top: 0.14em;
  transform: none;
  width: 24px;
  height: 24px;
  background-size: 13px 13px;
}

/* ============================================================
 * THE CHARTER BAND GOES PALE, AND SMALLER  (11 Aug 2026)
 * Rebecca: "i just dont like how big the our charter tile is. maybe try it in the
 * grey colour you have used for other modules."
 *
 * The grey is the site's NEUTRAL MODULE surface — --ge-bg-light #F3F7FA, the same
 * one `band--module` uses (CLAUDE.md, "Modules come in THREE flavours"). Matching it
 * exactly matters: a second, nearly-identical grey would read as a mistake.
 *
 * ⚠ FLIPPING THE BACKGROUND IS FOUR CHANGES, NOT ONE. Everything in this band was
 * built for navy and all of it inverts:
 *   1. type      white → navy
 *   2. ticks     white disc / navy glyph → NAVY disc / white glyph. On navy the
 *                inversion was the sanctioned exception; on a pale surface the
 *                site-wide default is correct again (CLAUDE.md, "Bullets and ticks").
 *   3. rules     white 14% → navy 12%
 *   4. watermark white SVG at 11% would be INVISIBLE on #F3F7FA — see below.
 *
 * ⚠ !important IS REQUIRED on the eyebrow and the line. The base rules further up
 * this file are `body.hv2 .ab2-mission__eyebrow { color: … !important }`, and
 * !important beats any amount of specificity — (0,3,1) does not help.
 *
 * The .mark pill is deliberately UNCHANGED. #D9F4FF on #F3F7FA is a quiet pairing,
 * but every .mark on the site is that exact pill on every surface, and the site-wide
 * one-colour rule outranks local contrast here.
 * ============================================================ */
body.hv2 main > section.ab2-mission.ab2-mission--tight {
  background: var(--ge-bg-light, #F3F7FA);
  /* down from clamp(80px, 10vw, 144px) — the band was 848px tall, which is what she
     was reacting to. With the shorter rows this lands it near 560. */
  padding-top: clamp(56px, 5.6vw, 84px);
  padding-bottom: clamp(56px, 5.6vw, 84px);
}
body.hv2 .ab2-mission--tight .ab2-mission__eyebrow { color: var(--ge-text-secondary, #4A5876) !important; }
body.hv2 .ab2-mission--tight .ab2-mission__line { color: var(--ge-navy, #0F1438) !important; }

/* the tick returns to the site-wide navy disc + white glyph */
body.hv2 .ab2-mission--tight .ab2-charter li::before {
  background: var(--ge-navy, #0F1438) no-repeat center / 13px 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ⚠ THE WATERMARK IS MASKED, NOT SWAPPED. The only hexagon files on disk are white,
   brand-blue and sky — none is navy, and a background-image cannot be recoloured.
   So the navy comes from `background` and the shape from `mask`, which is the only
   way to get a navy ghost out of the white SVG.
   4% not 11%: the ghost value was set against navy, where 11% white is barely there.
   The same 11% of navy on #F3F7FA is a solid grey shape — measured, it read as a
   second background panel rather than a watermark. */
body.hv2 .ab2-mission--tight::before {
  background: var(--ge-navy, #0F1438);
  -webkit-mask: url("../assets/images/brand/grouped-symbol-white.svg") no-repeat center / contain;
  mask: url("../assets/images/brand/grouped-symbol-white.svg") no-repeat center / contain;
  opacity: 0.04;
}

/* the big line needs air above the first rule, and the rows start where it ends */
body.hv2 .ab2-mission--tight .ab2-charter--rows { margin-top: clamp(34px, 3.6vw, 52px); }

/* ⚠ Back to ONE column well before the text gets tight. At 860 the two columns are
   ~390px each, which breaks "Whatever you need to get going, we do it." over two
   lines while its neighbour stays on one — the rows then sit at different heights
   and the hairlines stop lining up across the gap. */
@media (max-width: 860px) {
  body.hv2 .ab2-mission--tight .ab2-charter--rows { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  body.hv2 .ab2-mission--tight .ab2-charter--rows li {
    padding-left: 38px;
    font-size: 16.5px;
  }
  body.hv2 .ab2-mission--tight .ab2-charter--rows li::before { width: 22px; height: 22px; background-size: 12px 12px; }
}