/* ==========================================================================
   Shared Foundation bands (analysis 5.1; AB#99009 visitor, AB#99010 content editor)

   The five bands the programme sub-home adds and the eight it borrows are drawn by two stylesheets,
   not one. The borrowed eight are already styled by foundation-programme-project.css, whose band
   selectors sit under .brand-foundation with no page wrapper and whose band roots each carry their own
   top margin, so they apply on this page exactly as they stand. This file adds only what is new.

   It also REUSES that file's tokens rather than declaring a second set. They are declared on
   .brand-foundation, so they are in scope here: the type sizes, the radii, the corner legs, the band
   gap, the cream, the pill and the screen-reader helper all come from there. Where a value is this
   file's own it is declared below with the frame measurement that justifies it.

   Every rule is scoped under .brand-foundation, the class masterFoundation.cshtml puts on the body
   element, so nothing here can reach the ASISA, ESD or Academy layouts (site-within-a-site rule,
   handover 31 Aug 2026). Loaded after main.css so its scoped overrides win.

   Provenance. Values marked "frame" were measured on
   design/foundation-programme-sub-home/reference.jpg, the HeyGuys frame of 5 August 2026, which states
   1440 px at source: its pixels are design pixels and the divide-by-0.75 conversion that applies to the
   navigation frames must NOT be applied here. Values marked "phone" were measured on
   design/foundation-programme-project/reference-mobile.png, which despite its folder is a 360 px render
   of THIS page. Values marked ESTIMATE have no frame behind them, and the tablet block is all of them.

   Never sample a colour from either reference. AB#99009's own note says the delivered frames contain
   colour errors, vertical lines and corners in the wrong colour, and that the programme colour scheme
   is the source. Colour reaches this file only through the two custom properties the service emits.
   ========================================================================== */

.brand-foundation {
  /* ---- Sustainable development ------------------------------------------ */
  /* The two column widths are expressed as fr fractions in the rule, not as these lengths: the site
     column renders about 4% narrower than the design's 1200, so a fixed pair made the panel absorb the
     whole shortfall. Kept here as the measurement the fractions came from. Frame: the copy column runs
     x 120 to 600 and the cream panel x 670 to 1318. */
  --fnd-band-goals-pad: 40px;                          /* frame: the panel is 533 tall around a 5-tile grid; ESTIMATE within it */
  --fnd-band-cluster-icon: 44px;                       /* frame: the line drawings measure 42 to 46 across */
  --fnd-band-tile: 130px;                              /* frame: a goal tile measures 129 square */

  /* ---- Sustainable development, the STRIP form (AB#100745) ---------------- */
  /* The 5.5 frame draws this band as one row rather than two columns. Measured on
     design/foundation-programme-support/reference.jpg at file y 4720, where seven tiles run
     x 133 to 1129 and the NDP block sits at x 1145 to 1300. */
  --fnd-band-strip-tile: 127px;                        /* frame: each tile measures 127 across, seven of them */
  --fnd-band-strip-tile-gap: 18px;                     /* frame: 17 to 18 between tiles */
  --fnd-band-strip-gap: 24px;                          /* frame: 16 from the last tile to the NDP heading; ESTIMATE within it */

  /* ---- Contact call to action (AB#100745) -------------------------------- */
  /* Frame: the card runs x 390 to 1156 and y 6346 to 6453, so 767 wide and 108 tall, with the
     chevron pair to its left at x 283 to 336. The one band on the page that does not use the full
     1200 column: the whole assembly is 874 wide, centred with 163 either side. */
  --fnd-band-cta-width: 874px;                         /* frame: x 283 to 1156 */
  --fnd-band-cta-height: 108px;                        /* frame: y 6346 to 6453, the same height as a collaboration button */
  --fnd-band-cta-chevrons: 54px;                       /* frame: the leg at x 283 to 336, the same 54 as a collaboration button */
  --fnd-band-cta-pad: 28px;                            /* frame: the heading starts 24 to 32 inside the card */
  --fnd-band-cta-inset: 82px;                          /* the chevron leg plus the padding, so the copy clears it */

  /* ---- Current projects -------------------------------------------------- */
  --fnd-band-project-card-ratio: 385 / 262;            /* frame: the card picture, x 119 to 503, y 3131 to 3392 */
  --fnd-band-project-gutter: 24px;                     /* frame: 23 px between cards, and the resources columns use 24 */

  /* ---- Quote bands ------------------------------------------------------- */
  --fnd-band-quote-size: 40px;                         /* frame: 44 px cap-to-descender at a 53 px pitch on the lower band */
  --fnd-band-quote-line: 1.325;                        /* frame: 53 px pitch against a 40 px size */
  --fnd-band-quote-glyph: 96px;                        /* frame: the opening pair stands about 64 px tall at x 214; ESTIMATE */
  --fnd-band-quote-width: 1000px;                      /* frame: the widest quote line runs x 214 to 1115 */
  --fnd-band-quote-pad: 72px;                          /* frame: 64 to 79 px above the first line on the two bands */

  /* ---- Partners ---------------------------------------------------------- */
  --fnd-band-logo-height: 40px;                        /* frame: a wordmark measures 32 to 40 tall */
  --fnd-band-logo-gutter: 56px;                        /* frame: eight logos across x 120 to 1300; ESTIMATE within it */

  /* ---- Scrollers -------------------------------------------------------- */
  --fnd-band-arrow-size: 32px;                         /* frame: the chevrons beside the projects row; ESTIMATE */
  --fnd-band-dot-size: 10px;                           /* frame: the dots under the projects row measure 9 to 11 */
  --fnd-band-dot-gap: 10px;
}

/* The six band roots take the same two accent tokens the borrowed eight take, declared here because a
   custom property resolves where it is declared: putting it on the body element instead resolves
   invalid, which paints the shapes black and the bands violet. That cost a debugging pass on 5.3 and it
   is the single easiest mistake to make in this file. */
.brand-foundation .fnd-band-sustainable,
.brand-foundation .fnd-band-content,
.brand-foundation .fnd-band-named,
.brand-foundation .fnd-band-projects,
.brand-foundation .fnd-band-quote,
.brand-foundation .fnd-band-partners,
.brand-foundation .fnd-band-cta {
  --fnd-project-accent: var(--programme-accent, var(--foundation, #A137B7));
  --fnd-project-accent-ink: var(--programme-accent-ink, var(--foundation, #A137B7));

  margin-top: var(--fnd-project-band-gap);
  font-family: var(--fnd-project-font);
  color: var(--fnd-project-text);
  font-size: var(--fnd-project-body-size);
  line-height: var(--fnd-project-line-height);
}

/* main.css sets a colour on h1 to h6 as ELEMENT rules, so a colour on a band's own section does not
   beat them and every heading renders in the estate's plum until it sets its own. Sizes set on a class
   do win; only colour is affected. */
.brand-foundation .fnd-band-sustainable__heading,
.brand-foundation .fnd-band-sustainable__clusters-heading,
.brand-foundation .fnd-band-sustainable__goals-heading,
.brand-foundation .fnd-band-content__heading,
.brand-foundation .fnd-band-named__heading,
.brand-foundation .fnd-band-projects__heading,
.brand-foundation .fnd-band-partners__heading {
  color: var(--fnd-project-text);
  font-family: var(--fnd-project-font);
  margin: 0;
}

.brand-foundation .fnd-band-sustainable__heading,
.brand-foundation .fnd-band-content__heading,
.brand-foundation .fnd-band-named__heading,
.brand-foundation .fnd-band-projects__heading,
.brand-foundation .fnd-band-partners__heading {
  font-size: var(--fnd-project-h2-size);
  line-height: 1.15;
  font-weight: 700;
}

.brand-foundation .fnd-band-sustainable__clusters-heading,
.brand-foundation .fnd-band-sustainable__goals-heading {
  font-size: var(--fnd-project-h3-size);
  line-height: 1.2;
  font-weight: 700;
}

/* Rich text an editor writes keeps the estate's own body-copy link, deliberately: a link inside a
   paragraph should look like every other link on the site. This class exists only to give the block a
   predictable first and last margin. */
.brand-foundation .fnd-band__rte > :first-child {
  margin-top: 0;
}

.brand-foundation .fnd-band__rte > :last-child {
  margin-bottom: 0;
}

/* List markers in a band's rich text, and the programme colour that has to travel with them.

   The rich text feature suppresses main.css's generated bullet in favour of the native marker, and it
   does that for "#pageBody" only. Each band wrapper that receives editor HTML therefore carries BOTH
   id="pageBody" and this class, and the two do different jobs. The id is what brings
   foundation-rich-text.css: the native marker, the body-copy link at its proper size without the 2px
   rule, and the rounded picture corners. The class is what carries the marker's PROGRAMME colour,
   which that stylesheet deliberately leaves to the view, and which is the whole reason these two rules
   exist.

   Take the id off and the copy silently falls back to main.css. Take the class off and the bullets
   silently go the default text colour. FoundationBandsEditorCopyTests holds both halves.

   Two rules in a stylesheet rather than an inline block, which is what the handover asked for
   ("never per-page fixes", part 1 [1:33:34]), and the colour comes from the accent token rather than
   an interpolated hex, so nothing unvalidated reaches the markup. Scoped to a band's rich text, so it
   cannot reach a navigation or a footer list.

   Ordered lists are deliberately not coloured, for the reason the rich text stylesheet gives: their
   numbers render in the default colour today, and colouring them now would be a new decision rather
   than a rescue.

   The eight bands this page borrows had the same gap. Lonwabo Mnyaiza's review of PR 53951 answered it
   in the programme project feature on 9 Sep 2026, with the same id on the same kind of wrapper, so the
   two features now agree and neither needs an inline block. */
.brand-foundation .fnd-band__rte ul li::before,
.brand-foundation .fnd-band__rte ol li::before {
  content: none;
}

.brand-foundation .fnd-band__rte ul li::marker {
  color: var(--fnd-project-accent-ink);
}

/* ==========================================================================
   Sustainable development
   ========================================================================== */

/* The two columns as FRACTIONS of the frame's widths, not as those widths. The site column renders
   about 4% narrower than the design's 1200, which the programme project stylesheet's header records,
   so fixed widths made the copy column keep its 480 and the panel absorb the whole shortfall. */
.brand-foundation .fnd-band-sustainable__inner {
  display: grid;
  grid-template-columns: minmax(0, 480fr) minmax(0, 650fr);
  gap: 70px;                                           /* frame: 600 to 670 between the two columns */
  align-items: start;
}

/* One half filled and not the other is a real case, so the copy takes the row. */
.brand-foundation .fnd-band-sustainable__inner--wide {
  grid-template-columns: minmax(0, 1fr);
}

.brand-foundation .fnd-band-sustainable__text {
  margin-top: var(--fnd-project-heading-gap);
}

.brand-foundation .fnd-band-sustainable__clusters-heading {
  margin-top: var(--fnd-project-header-to-body);
}

.brand-foundation .fnd-band-sustainable__clusters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;                                      /* frame: the two-by-two grid at y 2860 and y 2960 */
  margin: var(--fnd-project-heading-gap) 0 0;
  padding: 0;
  list-style: none;
}

.brand-foundation .fnd-band-sustainable__cluster {
  display: flex;
  align-items: center;
  gap: 14px;                                           /* frame: 12 to 16 between a drawing and its name */
}

.brand-foundation .fnd-band-sustainable__cluster-icon {
  flex: 0 0 auto;
  width: var(--fnd-band-cluster-icon);
  height: var(--fnd-band-cluster-icon);
  /* A line drawing is shown whole and never cropped, so it is contained rather than covered. */
  object-fit: contain;
}

.brand-foundation .fnd-band-sustainable__cluster-label {
  font-size: var(--fnd-project-small-size);
  font-weight: 700;
  line-height: 1.25;
}

/* The goals panel: three corners rounded, the top right one squared and carrying a triangle in the
   programme's colour. The same treatment as every picture on the page, so it reads as one system. */
.brand-foundation .fnd-band-sustainable__goals {
  position: relative;
  overflow: hidden;
  padding: var(--fnd-band-goals-pad);
  border-radius: var(--fnd-project-radius-lg) 0 var(--fnd-project-radius-lg) var(--fnd-project-radius-lg);
  background: var(--fnd-project-panel-bg);
}

.brand-foundation .fnd-band-sustainable__corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  /* Border triangles on an element of no size, not a pair of gradients: two diagonal gradients can only
     draw the halves of a box, which comes out as an upward peak rather than a corner. */
  border-top: var(--fnd-project-corner-lg) solid var(--fnd-project-accent);
  border-left: var(--fnd-project-corner-lg) solid transparent;
}

.brand-foundation .fnd-band-sustainable__tiles {
  display: grid;
  grid-template-columns: repeat(3, var(--fnd-band-tile));
  gap: 24px;                                           /* frame: 129 px tiles at a 153 px pitch */
  margin: var(--fnd-project-header-to-body) 0 0;
  padding: 0;
  list-style: none;
  justify-content: center;
}

.brand-foundation .fnd-band-sustainable__tile-image {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   The STRIP form of the same band (AB#100745).

   The 5.5 frame draws this band as one horizontal row: an "SDG" label, seven tiles beside it, and the
   NDP clusters as a plain list of names at the right with no icons. The 5.1 frame draws two columns
   with the clusters carrying icons. One band, two shapes, chosen by the editor's switch, because two
   delivered frames disagree and deriving the shape from the page type would put page identity into
   shared band code.

   Same markup, different CSS. The goals half comes FIRST in the strip and the copy half second, which
   is a CSS order rather than a second markup path: neither half holds anything focusable, so the
   reorder costs nothing in focus order.

   The strip carries NO panel of its own. The 5.5 frame runs one unbroken cream field from file y 4244
   to 4895 carrying the statistics heading, the three figures and this strip, with no seam between the
   statistics band and this one. So the goals half drops its cream, its radius and its corner triangle,
   and the band drops its top margin, and the two read as one field. Measured in
   design/foundation-programme-support/SOURCE.md.
   -------------------------------------------------------------------------- */

.brand-foundation .fnd-band-sustainable--strip {
  /* No gap to the statistics band above: the frame draws one continuous cream field. */
  margin-top: 0;
  background: var(--fnd-project-panel-bg);
  padding-bottom: var(--fnd-project-band-gap);
}

.brand-foundation .fnd-band-sustainable--strip .fnd-band-sustainable__inner {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--fnd-band-strip-gap);
  align-items: center;
}

/* The tiles lead and the clusters follow, which is the frame's order and the reverse of the
   two-column shape's. */
.brand-foundation .fnd-band-sustainable--strip .fnd-band-sustainable__goals {
  order: 1;
  padding: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

.brand-foundation .fnd-band-sustainable--strip .fnd-band-sustainable__copy {
  order: 2;
}

/* The corner triangle belongs to the cream panel, and the strip has no panel. */
.brand-foundation .fnd-band-sustainable--strip .fnd-band-sustainable__corner {
  display: none;
}

/* "SDG" sits above the row at the left, at heading size rather than the panel heading's. */
.brand-foundation .fnd-band-sustainable--strip .fnd-band-sustainable__goals-heading {
  margin-bottom: var(--fnd-project-heading-gap);
}

/* Seven across on the frame, at their measured size, and they wrap rather than shrink: a goal tile
   carries its number and its name in the artwork, so scaling it down is what makes it unreadable. */
.brand-foundation .fnd-band-sustainable--strip .fnd-band-sustainable__tiles {
  grid-template-columns: repeat(auto-fit, var(--fnd-band-strip-tile));
  gap: var(--fnd-band-strip-tile-gap);
  margin-top: 0;
  justify-content: start;
}

/* The clusters become a plain list of names in one column. The icons are HIDDEN rather than left
   unrendered, so switching the band back to two columns brings them straight back: the strip is a
   layout that does not draw them, not a layout that deletes them. */
.brand-foundation .fnd-band-sustainable--strip .fnd-band-sustainable__clusters {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: var(--fnd-project-heading-gap);
}

.brand-foundation .fnd-band-sustainable--strip .fnd-band-sustainable__cluster-icon {
  display: none;
}

.brand-foundation .fnd-band-sustainable--strip .fnd-band-sustainable__cluster-label {
  font-weight: 400;                                    /* frame: the cluster names are set regular, not bold */
  text-transform: uppercase;                           /* frame: EDUCATION, ECONOMY, EQUALITY, PARTNERSHIPS */
  line-height: 1.45;                                   /* frame: a 26 px pitch on a 18 px name */
}

/* ==========================================================================
   Contact call to action (AB#100745 visitor, AB#100746 content editor)

   The Foundation's own band, not the estate's Views/Partials/CallToAction.cshtml, which serves all
   four ASISA sites from one solution: standing rule B1 duplicates a shared component before changing
   it. Drawn as a collaboration button is drawn, because the frame draws them identically: the same
   grey, the same 108 px height, the same 54 px chevron leg.

   Frame: design/foundation-programme-support/bands/15.jpg, file y 6346 to 6453.
   ========================================================================== */

.brand-foundation .fnd-band-cta__inner {
  display: flex;
  justify-content: center;
}

/* The one band on this page that does not fill the body column: 874 of the 1200, centred. */
.brand-foundation .fnd-band-cta__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: var(--fnd-band-cta-width);
  min-height: var(--fnd-band-cta-height);
  padding: var(--fnd-band-cta-pad) var(--fnd-band-cta-pad) var(--fnd-band-cta-pad) var(--fnd-band-cta-inset);
  border-radius: 0 var(--fnd-project-radius-md) var(--fnd-project-radius-md) 0;
                                                       /* frame: the left edge is square and the right is rounded */
  background: var(--fnd-project-button-bg);
}

/* The same pair of downward chevrons the collaboration buttons carry, in the card's own tone: the
   5.5 frame reads chevron and card at one colour, where the 5.3 frame draws the chevrons darker. */
.brand-foundation .fnd-band-cta__chevron {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--fnd-band-cta-chevrons);
  height: 100%;
  overflow: hidden;
}

.brand-foundation .fnd-band-cta__chevron::before,
.brand-foundation .fnd-band-cta__chevron::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-left: 23px solid transparent;
  border-right: 23px solid transparent;
  border-top: 40px solid var(--fnd-project-button-bg);
                                                       /* frame: 46 px wide, 40 px deep, hanging from the top */
}

.brand-foundation .fnd-band-cta__chevron::before {
  left: 0;
}

.brand-foundation .fnd-band-cta__chevron::after {
  left: 46px;
}

.brand-foundation .fnd-band-cta__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.brand-foundation .fnd-band-cta__heading {
  font-size: var(--fnd-project-h2-size);
  color: var(--fnd-project-text);
}

.brand-foundation .fnd-band-cta__text {
  margin-top: 8px;                                     /* frame: 8 px from the heading's baseline box to the line below */
}

.brand-foundation .fnd-band-cta__link {
  flex: 0 0 auto;
}

/* ==========================================================================
   General content block
   ========================================================================== */

/* The columns were an ESTIMATE of 1fr and 587px until 10 September 2026, because no delivered frame
   drew this band. The 5.6 frame draws it, between the reach map and the statistics band, and measures
   the picture at x 120..572 in the 1200 px column: 453 px, the same width as every other
   picture-and-copy block on the site, not 587. Corrected here and expressed the way the named blocks
   are, as fr fractions and a percentage gap, because the site's container is 1150 px against the
   design's 1200 and a length would not scale with it.

   The gap stays 60. This frame draws 42 px between this band's picture and its copy and 60 px on the
   named block 1500 px above it, which are the same two components drawn 18 px apart. Two bands that
   read as one component landing their copy on different left edges would read as a defect rather than
   as a design, so both use the named blocks' measured 62 (5.17%). Recorded in
   design/foundation-programme-impact/SOURCE.md. */
.brand-foundation .fnd-band-content__inner {
  display: grid;
  grid-template-columns: minmax(0, 685fr) minmax(0, 453fr);
  gap: 5.17%;                                          /* frame: 62 of 1200 */
  /* The whole text block sits centred against the picture and the picture anchors the block, which is
     the handover's own instruction (Cathy Harrison 1:23:16 to 1:23:41). */
  align-items: center;
}

/* The picture on the left, which is what the 5.6 frame draws (AB#100747). The copy stays FIRST in the
   document whichever side its picture is on, so the reading order and the tab order never depend on
   the layout. The two cells are placed explicitly rather than reordered with `order`, which would move
   the flow as well and is what makes a keyboard user's focus jump about. The named blocks band solves
   the same problem the same way. */
.brand-foundation .fnd-band-content__inner--picture-left {
  grid-template-columns: minmax(0, 453fr) minmax(0, 685fr);
}

.brand-foundation .fnd-band-content__inner--picture-left .fnd-band-content__copy {
  grid-column: 2;
  grid-row: 1;
}

.brand-foundation .fnd-band-content__inner--picture-left .fnd-band-content__media {
  grid-column: 1;
  grid-row: 1;
}

/* A block with no picture: the copy takes the column.

   This comment used to claim --wide "wins over the picture-left rule above because it is declared
   after it, which is why the two modifiers can sit on the same element". That is true of
   grid-template-columns on THIS element and false of the picture-left rule's descendant declarations:
   grid-column: 2 on the copy is a different declaration on a different element and nothing here
   overrides it, so the pair put the copy in an implicit second column. Found by Lonwabo Mnyaiza
   reviewing PR 54012.

   Fixed in the MODEL, which no longer reports a side for a block with no picture, so the two
   modifiers never meet. FoundationBandsBuilderTests pins that, and both of its cases fail without it.

   Do NOT scope these rules with :not(--wide) instead. It was tried and reverted: it takes the
   selector from three classes to four, which outweighs the collapse query's three-class reset and
   leaves the copy beside the picture at 360px. The acceptance suite caught that; nothing in this
   file did. A guard here has to hold the specificity budget, which is why the fix is in the model. */
.brand-foundation .fnd-band-content__inner--wide {
  grid-template-columns: minmax(0, 1fr);
}

/* ==========================================================================
   Named content blocks (analysis 5.2's overview section)
   ========================================================================== */

/* Three rows of copy beside a picture, the picture changing side each row.

   Measured on design/foundation-programme-about/reference.jpg: the 1200 px column splits into copy 685,
   gutter 62 and picture 453. Written as fr fractions and a percentage gutter rather than lengths,
   because the site's container is 1150 px, 4% narrower than the design's column, so lengths would
   overflow it. */
.brand-foundation .fnd-band-named__inner {
  display: grid;
  gap: var(--fnd-project-band-gap);
}

.brand-foundation .fnd-band-named__row {
  display: grid;
  grid-template-columns: minmax(0, 685fr) minmax(0, 453fr);
  gap: 5.17%;                                          /* frame: 62 of 1200 */
}

.brand-foundation .fnd-band-named__row--picture-left {
  grid-template-columns: minmax(0, 453fr) minmax(0, 685fr);
}

/* The copy stays FIRST in the document whichever side its picture is on, so the reading order and the
   tab order never depend on the layout. The two cells are placed explicitly rather than reordered with
   `order`, which would move the flow as well and is what makes a keyboard user's focus jump about. */
.brand-foundation .fnd-band-named__row--picture-left .fnd-band-named__copy {
  grid-column: 2;
  grid-row: 1;
}

.brand-foundation .fnd-band-named__row--picture-left .fnd-band-named__media {
  grid-column: 1;
  grid-row: 1;
}

/* A block with no picture: the copy takes the column, as the single general content block does. */
.brand-foundation .fnd-band-named__row--wide {
  grid-template-columns: minmax(0, 1fr);
}

/* The row's height is its taller column, and the picture fills whatever that is.

   That is the frame: the middle block's picture is 453 x 671 while the other two are 453 x 351, because
   its copy carries a sub-heading, two more paragraphs and a button. So there is deliberately NO
   aspect-ratio here. The picture keeps its own ratio when the copy is short (the media item is already
   width:100%, height:100%, object-fit:cover from the shared rules), and is cropped by cover when the
   copy is tall. Setting a ratio would letterbox the tall case, and setting a height would fight the
   stretch: an explicit height beat an aspect-ratio on the 5.1 card thumbnail and cost a pass. */
.brand-foundation .fnd-band-named__media {
  align-self: stretch;
}

/* The whole copy block sits centred against the picture, which is the handover's own instruction
   (Cathy Harrison [1:23:16] to [1:23:41]). align-self rather than align-items on the row, so the
   picture still stretches. */
.brand-foundation .fnd-band-named__copy {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;                                           /* frame: 24 px from a heading to its first line */
}

.brand-foundation .fnd-band-named__text {
  /* Nothing but the margin reset the shared .fnd-band__rte class gives it. The copy's own size and
     colour come from the band root. */
  width: 100%;
}

/* A sub-heading an editor writes INSIDE the block's rich text, which the frame's middle block uses at
   H4 and draws in the same near-black as the block's own heading.

   main.css sets a colour on h1 to h6 as ELEMENT rules, so the band root's colour does not beat them,
   which is the trap the note above .fnd-band-named__heading already records. That note fixed it for the
   heading the TEMPLATE renders and not for the headings an EDITOR writes, so a sub-heading came out in
   the estate's plum, #420535, against the frame's near-black. Measured on the seeded page: the block
   heading and the body copy both compute rgb(38, 38, 38) and the H4 computed rgb(66, 5, 53).

   Deliberately scoped to THIS band rather than to the shared .fnd-band__rte class. The same defect is
   almost certainly in every other band that takes editor rich text, but those bands belong to 5.1 and
   their frames have not been read for it, and 5.1 is in an open pull request. Recorded as divergence 12
   in design/foundation-programme-about/SOURCE.md so the band's owner can settle it once for all of
   them. */
.brand-foundation .fnd-band-named__text h1,
.brand-foundation .fnd-band-named__text h2,
.brand-foundation .fnd-band-named__text h3,
.brand-foundation .fnd-band-named__text h4,
.brand-foundation .fnd-band-named__text h5,
.brand-foundation .fnd-band-named__text h6 {
  color: var(--fnd-project-text);
}

.brand-foundation .fnd-band-content__text {
  margin-top: var(--fnd-project-heading-gap);
}

.brand-foundation .fnd-band-content__link {
  margin-top: var(--fnd-project-header-to-body);
}

/* The variant on the programme colour. Full bleed, because a coloured block inside the site column
   would read as a card rather than as a band, and every other coloured band on this page is full
   bleed. */
.brand-foundation .fnd-band-content--accent {
  padding: var(--fnd-project-band-pad-y) 0;
  background: var(--fnd-project-accent);
  color: #FFFFFF;
}

/* The heading AND the paragraphs. main.css colours p as an element rule just as it colours h1 to h6,
   so a colour on the section is inherited by the block and then overridden inside it: the copy came
   out in the estate's dark grey on the programme's colour, which is the same trap as the headings and
   is just as invisible until something renders.

   The h1 to h6 entries cover a heading an EDITOR writes inside the rich text, which the list used to
   stop short of: it ended at `li`, so `__heading` (the template's) and the paragraphs turned white and
   an editor's own heading kept the estate's plum, #420535, on the programme's colour. On WageWise
   green, #5D744F, that measures 3.12:1, against the 4.5:1 WCAG 2.2 AA asks for normal text. White is
   5.15:1 on the same ground. It is reachable content, not a theoretical case: the Foundation editor
   offers "Section header" (h2) and "Subsection header" (h3), and "Show it on the programme colour" is
   an editor switch on the band. Found by Lonwabo Mnyaiza in review of pull request 54002, as the same
   defect the named content band had one wrapper over.

   STILL OPEN, and raised on that thread rather than guessed at here: a LINK an editor writes in this
   band is not covered. main.css colours "p a, h1 a, h2 a, h3 a, li a" with var(--text), #262626, at
   (0,0,2), so a link in the copy or in a heading stays 85% black on the programme colour, which is
   2.94:1 on WageWise green. One more entry on this list would whiten it, and specificity is not the
   obstacle. What stops it is that white is a DESIGN choice for a link rather than a mechanical one: a
   heading should match the body colour the list already sets, and a link may be meant to stand apart.
   No delivered frame draws a link on an accent band. The band belongs to 5.1, so the call is its
   owner's.

   h1 to h6 rather than h2 and h3 alone, because the editor's format list is configuration and pasted
   content can carry any level. A rule that matched only what the toolbar offers today would quietly
   stop covering the case the day that list changed. */
.brand-foundation .fnd-band-content--accent .fnd-band-content__heading,
.brand-foundation .fnd-band-content--accent .fnd-band-content__text,
.brand-foundation .fnd-band-content--accent .fnd-band-content__text p,
.brand-foundation .fnd-band-content--accent .fnd-band-content__text li,
.brand-foundation .fnd-band-content--accent .fnd-band-content__text h1,
.brand-foundation .fnd-band-content--accent .fnd-band-content__text h2,
.brand-foundation .fnd-band-content--accent .fnd-band-content__text h3,
.brand-foundation .fnd-band-content--accent .fnd-band-content__text h4,
.brand-foundation .fnd-band-content--accent .fnd-band-content__text h5,
.brand-foundation .fnd-band-content--accent .fnd-band-content__text h6 {
  color: #FFFFFF;
}

/* The pill is Foundation magenta on a white ground, and magenta on the programme's colour would be
   unreadable, so on this variant it inverts to white. */
.brand-foundation .fnd-band-content--accent .fnd-project__pill {
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* ==========================================================================
   Current projects
   ========================================================================== */

.brand-foundation .fnd-band-projects__heading,
.brand-foundation .fnd-band-partners__heading {
  text-align: center;
}

.brand-foundation .fnd-band-projects__text,
.brand-foundation .fnd-band-partners__text {
  max-width: var(--fnd-project-intro-width);
  margin: var(--fnd-project-heading-gap) auto 0;
  text-align: center;
}

/* The arrows sit OUTSIDE the site column on the frame, at about x 75 and x 1365 of 1440, so they are
   positioned rather than laid out beside the row. As flex siblings they took their width and their gap
   out of the row, which made every card narrower than the frame draws it. */
.brand-foundation .fnd-band-projects__viewport,
.brand-foundation .fnd-band-partners__viewport {
  position: relative;
  margin-top: var(--fnd-project-header-to-body);
}

.brand-foundation .fnd-band-projects__viewport .fnd-band__arrow,
.brand-foundation .fnd-band-partners__viewport .fnd-band__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.brand-foundation .fnd-band-projects__viewport .fnd-band__arrow--prev,
.brand-foundation .fnd-band-partners__viewport .fnd-band__arrow--prev {
  right: calc(100% + 12px);
}

.brand-foundation .fnd-band-projects__viewport .fnd-band__arrow--next,
.brand-foundation .fnd-band-partners__viewport .fnd-band__arrow--next {
  left: calc(100% + 12px);
}

.brand-foundation .fnd-band-projects__row {
  grid-auto-columns: calc((100% - (2 * var(--fnd-band-project-gutter))) / 3);
  gap: var(--fnd-band-project-gutter);
}

/* The card is the programme project feature's, so its own rules already draw the corner, the title and
   the pill. What this band decides is the row: a picture above the words at column width, rather than
   the thumbnail beside them that the overview and learning rows use. */
.brand-foundation .fnd-band-projects .fnd-project-card {
  display: block;
}

/* height: auto matters. The card's own rule gives the thumbnail a fixed 130 px square, which an
   aspect-ratio cannot override on its own: an explicit height simply wins, so the picture came out 130
   tall in a 349 wide box. */
.brand-foundation .fnd-band-projects .fnd-project-card__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--fnd-band-project-card-ratio);
}

.brand-foundation .fnd-band-projects .fnd-project-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-foundation .fnd-band-projects .fnd-project-card__body {
  padding-top: 20px;                                   /* frame: 3524 to 3545 from the picture to the title */
}

/* ==========================================================================
   Quote bands
   ========================================================================== */

.brand-foundation .fnd-band-quote {
  padding: var(--fnd-band-quote-pad) 0;
  background: var(--fnd-project-accent);
  color: #FFFFFF;
}

.brand-foundation .fnd-band-quote__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-foundation .fnd-band-quote__item {
  display: flex;
  justify-content: center;
}

.brand-foundation .fnd-band-quote__figure {
  position: relative;
  max-width: var(--fnd-band-quote-width);
  margin: 0;
  padding-left: 0;
  text-align: center;
}

.brand-foundation .fnd-band-quote__text {
  margin: 0;
  border: 0;
  padding: 0;
  color: #FFFFFF;
  font-size: var(--fnd-band-quote-size);
  font-weight: 700;
  line-height: var(--fnd-band-quote-line);
}

/* The opening pair of quotation marks the frame draws at the start of the first line.
   Decorative: the blockquote element already says this is a quotation, so the glyph is generated
   content and is left out of the accessibility tree rather than read aloud as punctuation.

   INLINE, not positioned. Absolutely positioned at the left of a centred block it landed on top of the
   first word, because the block is centred and its text starts well inside it. Inline it takes part in
   the first line, so the line centres with the glyph in it and the lines beneath centre without it,
   which is exactly what the frame draws. line-height: 0 keeps a glyph two and a half times the type
   size from stretching the first line. */
.brand-foundation .fnd-band-quote__text::before {
  content: "\201C\201C";
  color: #FFFFFF;
  font-size: var(--fnd-band-quote-glyph);
  line-height: 0;
  vertical-align: -0.22em;
  margin-right: 0.04em;
  opacity: 0.9;
}

.brand-foundation .fnd-band-quote__source {
  margin-top: 32px;                                    /* frame: 5010 to 5069 on the upper band, less the descenders */
  color: #FFFFFF;
  font-size: var(--fnd-project-body-size);
  font-weight: 700;
}

/* The band is full bleed on the accent, so its dots sit on the colour and cannot use the pale unset
   colour the projects row's dots use. */
.brand-foundation .fnd-band-quote__dots {
  margin-top: 40px;
}

.brand-foundation .fnd-band-quote__dots .fnd-band__dot {
  border-color: #FFFFFF;
}

.brand-foundation .fnd-band-quote__dots .fnd-band__dot[aria-selected="true"] {
  background: #FFFFFF;
}

/* ==========================================================================
   Partners, collaborators and funders
   ========================================================================== */

.brand-foundation .fnd-band-partners__row {
  grid-auto-columns: max-content;
  gap: var(--fnd-band-logo-gutter);
  align-items: center;
}

.brand-foundation .fnd-band-partners__item {
  display: flex;
  align-items: center;
}

.brand-foundation .fnd-band-partners__logo {
  height: var(--fnd-band-logo-height);
  width: auto;
  /* Black and white always, whatever the editor uploaded. The handover is explicit that the artwork is
     shown in black and white, and doing it here means one file per logo across the whole site rather
     than a greyscale copy of every wordmark in the media library. */
  filter: grayscale(1);
  opacity: 0.75;                                       /* frame: the wordmarks read as a mid grey, not black */
}

.brand-foundation .fnd-band-partners__link {
  display: block;
  width: max-content;
  margin: var(--fnd-project-header-to-body) auto 0;
}

/* ==========================================================================
   Scrollers: the shared behaviour behind the projects row, the partners row and a quote band
   ========================================================================== */

/* A snapping scroller, not a slider library. The 360 render shows one card at the gutter with the next
   peeking, which is what this looks like, and the benefits band on the programme project page already
   works this way. With no JavaScript at all the row is still a scrollable row rather than a broken
   slider, which is the whole reason not to reach for the estate's shared Slick here. */
.brand-foundation .fnd-band__scroller {
  display: grid;
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
  /* min-width: 0 is load-bearing. A grid of max-content columns is wider than its container, and
     without this the element grows to its content instead of scrolling: the partners row reached 35 px
     past the viewport and put a horizontal scrollbar on the whole page. */
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Firefox and the standards property; the WebKit pseudo-element below covers Safari and Chrome. */
  scrollbar-width: none;
}

.brand-foundation .fnd-band__scroller::-webkit-scrollbar {
  display: none;
}

.brand-foundation .fnd-band__slide {
  scroll-snap-align: start;
  min-width: 0;
}

/* The scroller is focusable so a keyboard user can reach it and use the arrow keys. The shared
   stylesheet removes focus outlines globally, so this puts one back rather than leaving a keyboard user
   with no idea where they are. */
.brand-foundation .fnd-band__scroller:focus-visible {
  outline: 2px solid var(--fnd-project-accent-ink);
  outline-offset: 4px;
}

.brand-foundation .fnd-band__arrow {
  flex: 0 0 auto;
  width: var(--fnd-band-arrow-size);
  height: var(--fnd-band-arrow-size);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

/* The chevron is drawn with two borders on a rotated square, so it is one element and scales with the
   token above. */
.brand-foundation .fnd-band__arrow::before {
  content: "";
  display: block;
  width: 40%;
  height: 40%;
  margin: 0 auto;
  border-top: 2px solid var(--fnd-project-text);
  border-right: 2px solid var(--fnd-project-text);
}

.brand-foundation .fnd-band__arrow--prev::before {
  transform: rotate(-135deg);
}

.brand-foundation .fnd-band__arrow--next::before {
  transform: rotate(45deg);
}

.brand-foundation .fnd-band__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.brand-foundation .fnd-band__arrow:focus-visible {
  outline: 2px solid var(--fnd-project-accent-ink);
  outline-offset: 2px;
}

.brand-foundation .fnd-band__dots {
  display: flex;
  justify-content: center;
  gap: var(--fnd-band-dot-gap);
  margin-top: 32px;                                    /* frame: 3700 to 3745 under the projects row */
}

.brand-foundation .fnd-band__dot {
  width: var(--fnd-band-dot-size);
  height: var(--fnd-band-dot-size);
  border: 1px solid var(--fnd-project-text);
  border-radius: 50%;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.brand-foundation .fnd-band__dot[aria-selected="true"] {
  background: var(--fnd-project-text);
}

.brand-foundation .fnd-band__dot:focus-visible {
  outline: 2px solid var(--fnd-project-accent-ink);
  outline-offset: 3px;
}

/* ==========================================================================
   TABLET. Values here are ESTIMATES unless they say otherwise: no reference exists between 360 and
   1440. The named content block's stacking and spacing are the exception. They are MEASURED on the
   5.2 phone frame and carried up to this breakpoint, because a single column behaves the same at
   both widths and re-guessing a value that has a frame behind it would be a step backwards.
   ========================================================================== */

@media (max-width: 1024px) {
  .brand-foundation .fnd-band-sustainable__inner,
  .brand-foundation .fnd-band-content__inner,
  .brand-foundation .fnd-band-content__inner--picture-left {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  /* The strip stacks too, and keeps its order: tiles, then the cluster names.
     
     The column reset is repeated rather than inherited from the rule above. That rule selects
     .fnd-band-sustainable__inner with two classes and the strip's own rule selects it with three, so
     the strip's two columns win at every width whatever the source order. Left out, the cluster names
     overflowed the viewport at 390px, which the responsiveness sweep caught on 11 September 2026. */
  .brand-foundation .fnd-band-sustainable--strip .fnd-band-sustainable__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fnd-band-strip-gap);
  }

  /* The button drops under the copy rather than shrinking the heading beside it. */
  .brand-foundation .fnd-band-cta__card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  /* One column, PICTURE FIRST, then the heading and the copy, the same arrangement and for the same
     reasons as the named blocks band below.

     Measured on design/foundation-programme-impact/reference-mobile.png, the 360 frame supplied on
     10 September 2026, which is the first phone render to draw this band at all: its picture runs
     y 4304..4558, its heading starts at 4602, and the gap between them is 43 px.

     Both variants collapse to the same thing: at one column the side a picture took no longer means
     anything, so the desktop's explicit cell placement has to be undone here or the copy would be
     placed into a column that no longer exists. */
  .brand-foundation .fnd-band-content__inner .fnd-band-content__media,
  .brand-foundation .fnd-band-content__inner--picture-left .fnd-band-content__media {
    grid-column: 1;
    grid-row: 1;
  }

  .brand-foundation .fnd-band-content__inner .fnd-band-content__copy,
  .brand-foundation .fnd-band-content__inner--picture-left .fnd-band-content__copy {
    grid-column: 1;
    grid-row: 2;
  }

  /* The picture needs a ratio back the moment it stops standing beside a column of copy, for the
     reason the named blocks rule gives at length below.

     phone frame: 328 x 255 in a 328 px column, which is 1.286 to 1. Written as the desktop pair
     453 / 351 = 1.291, the same ratio the named blocks use, because one number should not exist twice
     and the two bands draw the same picture. */
  .brand-foundation .fnd-band-content__media {
    align-self: start;
    aspect-ratio: 453 / 351;
  }

  /* One column, PICTURE FIRST, then the heading and the copy.

     Measured on design/foundation-programme-about/reference-mobile.png, the 360 frame delivered on
     10 September 2026, which is what closed divergence 8. All three blocks draw the same order:
     picture, heading, copy, and block two's "View the Workshop" button at the end of its copy.

     Picture first is the one place where the visual order and the document order part company, and it
     is deliberate. The copy stays FIRST in the document at every width, so the reading order and the
     tab order never change with the layout. The picture carries no link, so nothing focusable moves;
     this is the same arrangement the desktop already uses on a picture-left row, where the picture is
     drawn before the copy and comes second in the document. Placed by grid row rather than by `order`,
     for the reason the desktop rules give.

     Both variants collapse to the same thing: at one column the side a picture took no longer means
     anything, so --picture-left is not a different layout here. */
  .brand-foundation .fnd-band-named__row,
  .brand-foundation .fnd-band-named__row--picture-left {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;                                         /* phone frame: 40 px from the picture to the
                                                          heading on blocks 2 and 3. Block 1 draws 24;
                                                          two readings of three, and 40 is on the
                                                          frame's own spacing scale. */
  }

  .brand-foundation .fnd-band-named__row .fnd-band-named__media,
  .brand-foundation .fnd-band-named__row--picture-left .fnd-band-named__media {
    grid-column: 1;
    grid-row: 1;
  }

  .brand-foundation .fnd-band-named__row .fnd-band-named__copy,
  .brand-foundation .fnd-band-named__row--picture-left .fnd-band-named__copy {
    grid-column: 1;
    grid-row: 2;
  }

  /* The picture needs a ratio back the moment it stops standing beside a column of copy: with nothing
     to match, `align-self: stretch` and an object-fit cover have no height to work from.

     phone frame: every one of the three pictures is 328 x 254 in a 328 px column, which is 1.291 to 1.
     That is the DESKTOP LANDSCAPE ratio, 453 x 351 = 1.291, so the middle block's portrait 453 x 671
     is not carried down: at one column all three blocks draw the same landscape crop. Written as the
     desktop pair rather than as 328/254, because it is the same ratio and one number should not exist
     twice. */
  .brand-foundation .fnd-band-named__media {
    align-self: start;
    aspect-ratio: 453 / 351;
  }

  /* phone frame: 32 px from block 2's button to block 3's picture. The band's own --inner gap is the
     desktop band gap, which is far too much once the blocks are stacked. */
  .brand-foundation .fnd-band-named__inner {
    gap: 32px;
  }

  .brand-foundation .fnd-band-sustainable__tiles {
    justify-content: start;
  }

  .brand-foundation .fnd-band-projects__row {
    grid-auto-columns: calc((100% - var(--fnd-band-project-gutter)) / 2);
  }
}

/* ==========================================================================
   PHONE. Measured on the 360 px render, which is a render of this page.
   ========================================================================== */

@media (max-width: 767px) {
  .brand-foundation .fnd-band-sustainable__clusters {
    /* phone: the clusters stay a two-by-two grid at 360, y 3080 to 3320 */
    gap: 20px 16px;
  }

  /* phone: the strip's tiles go THREE across and the cluster names follow below, measured on
     design/foundation-programme-support/reference-mobile.png at y 6031 to 7219, where the whole band
     sits on one cream field with the statistics above it. The tiles keep their own size and wrap;
     they are not scaled down, because a goal tile carries its number and its name in the artwork. */
  .brand-foundation .fnd-band-sustainable--strip .fnd-band-sustainable__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .brand-foundation .fnd-band-sustainable--strip .fnd-band-sustainable__clusters {
    gap: 0;
  }

  /* phone: the card runs the full content column at y 8374 to 8609, so 236 tall against the
     desktop's 108, with the button under the copy. */
  .brand-foundation .fnd-band-cta__card {
    min-height: 0;
    padding: var(--fnd-project-gutter-phone);
    border-radius: var(--fnd-project-radius-md);
  }

  /* The chevron leg is a desktop decoration. At 360 the frame draws the card without it, and keeping
     it would eat a quarter of the copy's width. */
  .brand-foundation .fnd-band-cta__chevron {
    display: none;
  }

  /* phone: the goals panel goes FULL BLEED and drops below the clusters, y 3449 to 3879, with its
     corner triangle kept. It is the only half of this band that changes shape.

     Painted outside the box rather than pulled outside it. A negative margin widened the element
     itself, so the document came out 16 px wider than the viewport and the whole page got a horizontal
     scrollbar. A ring of shadow costs no layout at all, and the clip keeps it to the horizontal: without
     the clip the ring would also paint above and below the panel. */
  .brand-foundation .fnd-band-sustainable__goals {
    padding: var(--fnd-project-gutter-phone);
    border-radius: 0;
    box-shadow: 0 0 0 100vmax var(--fnd-project-panel-bg);
    clip-path: inset(0 -100vmax);
  }

  .brand-foundation .fnd-band-sustainable__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .brand-foundation .fnd-band-sustainable__goals-heading,
  .brand-foundation .fnd-band-sustainable__heading,
  .brand-foundation .fnd-band-content__heading,
  .brand-foundation .fnd-band-projects__heading,
  .brand-foundation .fnd-band-partners__heading {
    font-size: var(--fnd-project-h2-size-mobile);
  }

  /* phone: one card at the gutter with the next peeking, x 16 to 310 of 360, y 3980 to 4560 */
  .brand-foundation .fnd-band-projects__row {
    grid-auto-columns: 295px;
  }

  /* phone: no arrows on either row, only dots. They are removed rather than hidden, because a
     display: none button is still in the tab order in some browsers. */
  .brand-foundation .fnd-band__arrow {
    display: none;
  }

  /* phone frame: 31 px from the band's top edge to the top of the glyph's ink. The desktop band sets
     72 px of padding and draws 57 px of that gap, so the glyph sits 0.79 of the padding down and 31 px
     asks for 40. */
  .brand-foundation .fnd-band-quote {
    padding: 40px 0;
  }

  /* phone frame: a 36 px line pitch, dead consistent over sixteen lines across both bands. Against
     the component's own 1.325 line-height that is a 27 px size. The pitch is the reliable reading
     here: a line's ink height swings with whichever ascenders and descenders it happens to carry.

     This replaces a 26 px estimate, so the guess was very nearly right. The same scan on the DESKTOP
     frame reads a 39 px pitch, which is a 29 px size against the same line-height, where the token
     says 40 px: that frame-versus-token gap belongs to the shared quote band and is written up in
     design/foundation-programme-about/SOURCE.md rather than changed from here. */
  .brand-foundation .fnd-band-quote__text {
    font-size: 27px;
  }

  /* phone frame: the opening pair stands 43 px tall. 96 px renders 72 px on the desktop frame, so the
     glyph draws at 0.75 of its type size and 43 px asks for 56. */
  .brand-foundation .fnd-band-quote__text::before {
    font-size: 56px;
  }

  /* phone: the logo strip scroll-snaps with the next wordmark cut at the edge, y 9700 to 9760 */
  .brand-foundation .fnd-band-partners__row {
    gap: 32px;
  }
}