/* ==========================================================================
   IBSL — site stylesheet
   Tokens, type and components transcribed from the design handoff
   (IBSL Site.dc.html). Layout values are pixel-matched at 1280px and fluid
   below that. Box-sizing follows the prototype element by element, so do not
   add a global border-box reset.

   Type departs from the handoff: Outfit (display) and Nunito (text) replace
   the Cormorant/Jakarta pairing. Sizes stay at the handoff's values; only the
   line-heights are opened slightly, since the rounded sans carries a larger
   x-height than the serif it replaces and will not set as tight.
   ========================================================================== */

:root {
  --green: #1F4D3A;
  --green-dark: #12261D;
  --ink: #1B2A22;
  --body: #3E4E46;
  --muted: #5A6862;
  --cream: #F6F3EC;
  --sand: #F1EEE6;
  --brass: #B08D57;
  --brass-on-green: #C9A96E;
  --error: #B04A3A;
  --hairline: rgba(27, 42, 34, .14);
  --hairline-card: rgba(27, 42, 34, .12);
  --hairline-footer: rgba(27, 42, 34, .1);
  --display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sans: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --pad-x: 56px;
}

html { -webkit-text-size-adjust: 100%; }
/* In-page anchors (the hero's "Explore the programmes") glide rather than
   jump, so the reader keeps their place on the way down. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Selection tints rather than blocks: the ink reads through the wash, so no
   colour is forced on the text. */
::selection { background: rgba(31, 77, 58, .22); }
::-moz-selection { background: rgba(31, 77, 58, .22); }

/* On the green panels a green wash is invisible, so it warms to brass. */
.dig__card--green ::selection, .cta ::selection, .prog-brief__quote ::selection,
.pact__card--green ::selection, .prog-row--green ::selection {
  background: rgba(201, 169, 110, .32);
}
.dig__card--green ::-moz-selection, .cta ::-moz-selection, .prog-brief__quote ::-moz-selection,
.pact__card--green ::-moz-selection, .prog-row--green ::-moz-selection {
  background: rgba(201, 169, 110, .32);
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--brass); }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font-family: inherit; }

.skip-link {
  position: absolute; left: -999px; top: 8px;
  background: #fff; color: var(--green); padding: 8px 12px; border-radius: 8px; z-index: 100;
}
.skip-link:focus { left: 8px; }

/* Page frame -------------------------------------------------------------- */

.site { min-height: 100vh; display: flex; flex-direction: column; }
.site__main { flex: 1; }
.page { max-width: 1280px; margin: 0 auto; }

/* Type -------------------------------------------------------------------- */

.kicker {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass); font-weight: 600;
}
.kicker--on-green { color: var(--brass-on-green); }
.kicker--mb { margin-bottom: 16px; }

/* pretty, not balance, across the display type. balance equalises line
   lengths, which on a headline pulls each line short of its measure and
   leaves a wedge of dead space to the right — it reads as a layout fault
   rather than as composition. pretty leaves the lines long and only guards
   the last one against an orphan. .h2 and .lead already set it; this keeps
   .h1 consistent with them. */
.h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(48px, 5vw, 76px); line-height: 1.04; letter-spacing: -.025em;
  text-wrap: pretty; font-variant-numeric: lining-nums;
}
/* Full width, like every other stacked hero headline. The old 1040px cap
   stopped it short of the gutter for no reason the eye could read. */
.h1--home { font-size: clamp(46px, 6.4vw, 86px); max-width: none; }
/* The italic's slant eats the word space that follows it, so the emphasised
   word runs into the next one at display sizes. A small trailing pad gives
   the space back without touching the tracking. */
.h1 em { color: var(--green); padding-right: .08em; }

.h2 {
  font-family: var(--display); font-weight: 600;
  font-size: 56px; line-height: 1.06; letter-spacing: -.02em; text-wrap: pretty;
  font-variant-numeric: lining-nums;
}
.h2--54 { font-size: 54px; }
.h2--52 { font-size: 52px; }
.h2--50 { font-size: 50px; }
.h2--team { margin: 0 0 48px; }

.lead { font-size: 19px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.note { font-size: 15px; color: var(--muted); max-width: 300px; line-height: 1.5; }
.note--320 { max-width: 320px; }
/* Outfit ships no italic, so the italic voices run on Nunito's true italic. */
.quote {
  font-family: var(--sans); font-style: italic; font-weight: 600;
  font-size: 28px; line-height: 1.35; color: var(--green);
}

/* Buttons ----------------------------------------------------------------- */

.btn {
  display: inline-block; font-size: 14px; font-weight: 600;
  padding: 16px 26px; border-radius: 999px; border: 0; cursor: pointer;
  text-align: center; transition: background .15s, color .15s;
  box-sizing: border-box;
}
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); color: #fff; }
.btn--secondary { background: var(--sand); color: var(--ink); }
.btn--secondary:hover { background: #E9E5DA; color: var(--ink); }
.btn--white { background: #fff; color: inherit; }
.btn--white:hover { color: inherit; }
.btn--sm { padding: 14px 22px; }
.btn--ghost { background: transparent; color: var(--green); padding: 14px 12px; }
.btn--ghost:hover { color: var(--brass); }
.btn--block { display: block; width: 100%; }

/* Nav --------------------------------------------------------------------- */

.site__header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
/* The frost sits on its own painted layer, never on the header itself:
   `backdrop-filter` makes an element the containing block for fixed
   descendants, which would capture the drawer and kill its hit-testing. */
.site__header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
/* Hairline appears only once the page has moved beneath the bar. */
.site__header.is-stuck {
  border-bottom-color: var(--hairline-footer);
  box-shadow: 0 6px 24px rgba(27, 42, 34, .06);
}

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px var(--pad-x); max-width: 1280px; margin: 0 auto; width: 100%;
  box-sizing: border-box; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__word { font-weight: 700; font-size: 17px; }

.logo {
  width: 46px; height: 46px; border-radius: 50%; background: var(--green);
  display: grid; place-items: center; flex: none;
}
.logo img { width: 38px; height: 38px; }
.logo--sm { width: 44px; height: 44px; }
.logo--sm img { width: 36px; height: 36px; }

.nav__links {
  display: flex; gap: 4px; background: var(--sand); padding: 6px; border-radius: 999px;
  font-size: 14px; font-weight: 500; flex-wrap: wrap;
}
.nav__link {
  display: block; padding: 9px 18px; border-radius: 999px;
  color: var(--ink); background: transparent; transition: background .15s;
}
.nav__link:hover, .nav__link.is-active { background: #fff; color: var(--ink); }

.nav__cta {
  background: var(--green); color: #fff; font-size: 14px; font-weight: 600;
  padding: 12px 22px; border-radius: 999px; transition: background .15s;
}
.nav__cta:hover { background: var(--green-dark); color: #fff; }

/* Drawer affordances: inert on desktop, activated in the 900px query. */
.nav__menu { display: contents; }

.nav__burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: none;
  background: var(--sand); border: 0; border-radius: 999px;
  color: var(--ink); cursor: pointer;
}
.nav__burger-bars { display: grid; gap: 4px; width: 18px; }
.nav__burger-bars span {
  display: block; height: 2px; border-radius: 2px; background: currentColor;
}
.nav__scrim { display: none; }

/* Home: hero and photo row ----------------------------------------------- */

/* Shares the stacked-hero principle with .hero-2 — see the About section for
   the reasoning. Same shape: headline full width, lead on a reading measure
   beneath it. Only the type scale differs, since the home headline is the
   loudest on the site. */
.hero { padding: 72px var(--pad-x) 40px; display: flex; flex-direction: column; gap: 24px; }
.hero__lead { max-width: 70ch; }

/* The home hero carries a photograph beside the headline. Text left, image
   right: the headline still lands first, and the image gives the page
   something to look at before the argument starts. The type column is the
   wider of the two so the display headline keeps its scale. */
.hero--split {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 56px; align-items: center; padding-bottom: 72px;
}
.hero--split .hero__intro { display: flex; flex-direction: column; gap: 24px; }
/* Narrower than the 70ch default: beside an image the lead would otherwise
   run to a measure that fights the headline above it. */
.hero--split .hero__lead { max-width: 52ch; }
.hero--split .h1--home { font-size: clamp(42px, 4.6vw, 68px); }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

/* A definite height for the .photo's height:100% to resolve against, the same
   arrangement .levels__media uses. */
.hero__media { position: relative; min-height: 600px; min-width: 0; }
.hero__media .photo { position: absolute; inset: 0; }

/* The two tracks ---------------------------------------------------------- */

/* Strategy Execution and AI Capability are the site's top-level split, so the
   home page states the choice as content rather than leaving it to the closing
   CTA band. Two cards, not three: an even pair reads as a fork in the road,
   where an odd row would read as a menu with a favourite in the middle. */
.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.track {
  background: #fff; border: 1px solid var(--hairline-card); border-radius: 24px;
  display: flex; flex-direction: column; overflow: hidden;
  color: var(--ink); transition: border-color .2s ease, transform .2s ease;
}
/* The photo is the card's lid: it bleeds to the rounded corners, so the card
   clips it rather than the image carrying a radius of its own. */
.track__media { height: 200px; overflow: hidden; }
.track__media .photo { height: 100%; border-radius: 0; }
/* Held above centre: both photographs carry their subject — a speaker at a
   flipchart, a table mid-discussion — in the upper half of the frame. */
.track__media img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 38%;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.track__body { padding: 32px 36px 36px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.track__name {
  font-family: var(--display); font-weight: 600; font-size: 28px;
  line-height: 1.2; color: var(--ink);
}
/* The visitor's own words, quoted, so the choice is made on the problem they
   recognise rather than on the product name above it. */
.track__need {
  font-family: var(--sans); font-style: italic; font-weight: 500;
  font-size: 16px; line-height: 1.55; color: var(--body);
}
/* Pushed to the card's foot so both cards' links sit on one line regardless of
   how long the quote above them runs. The flex gap already separates it, so
   only the extra breathing room above the link is added here. */
.track__more {
  margin-top: auto; padding-top: 10px; font-size: 15px;
  font-weight: 600; color: var(--green);
}
@media (hover: hover) {
  .track:hover { border-color: var(--green); transform: translateY(-2px); }
  .track:hover .track__more { color: var(--brass); }
  .track:hover .track__media img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .track, .track__media img { transition: none; }
}
.track:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

/* The three levels ------------------------------------------------------- */

/* Replaces the old three-column photo/photo/card row. That row put two
   near-identical photos and the level list into equal thirds, which said the
   three levels are interchangeable options. They are not: the site's argument
   is that capability is built up from the individual to the enterprise and
   breaks at whichever level cannot carry it. So the levels run as stacked
   rows — a sequence reads down a column, not across three — beside a single
   photo that no longer competes with a second one. */
/* Full top padding because the ladder now follows a cream section rather than
   the hero: against a section edge it needs the same 96px the other sections
   carry, where under the hero it only needed to clear the lead paragraph. */
.levels {
  padding: 96px var(--pad-x);
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 48px; align-items: stretch;
}
/* The photo tracks the ladder's height instead of setting its own. The grid
   item stretches, so the slot is given a definite height to fill against —
   without it the .photo's height:100% has nothing to resolve to and the
   image stops short, leaving the row visibly lopsided. */
.levels__media { min-width: 0; position: relative; min-height: 420px; }
.levels__media .photo { position: absolute; inset: 0; }
.levels__list { display: flex; flex-direction: column; min-width: 0; }
/* The kicker and intro are one header block. It has to stay a single element:
   .level__name is sized by :nth-child(2|3|4) below, so the ladder's first
   sibling must remain exactly one non-level child. */
.levels__head { margin-bottom: 28px; }
.levels__head .kicker { display: block; margin-bottom: 12px; }
.levels__intro {
  font-size: 17px; line-height: 1.6; color: var(--body);
  max-width: 46ch; margin: 0;
}

/* Each rung: the scale on the left, the capability on the right. The rules
   between them carry the stepping, so the rows need no numbering — the
   progression is in the scale labels themselves. */
.level {
  display: grid; grid-template-columns: 148px minmax(0, 1fr);
  gap: 24px; align-items: baseline;
  padding: 24px 0; border-top: 1px solid var(--hairline);
  color: var(--ink);
}
.level:last-child { border-bottom: 1px solid var(--hairline); }
.level__scale {
  font-size: 14px; font-weight: 600; color: var(--muted);
  line-height: 1.4; transition: color .15s;
}
.level__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* The three names grow as the scale grows, so the ladder is legible from the
   type alone before any of the body copy is read. */
.level__name {
  font-family: var(--display); font-weight: 600; line-height: 1.1;
  color: var(--ink); transition: color .15s;
}
.level:nth-child(2) .level__name { font-size: 26px; }
.level:nth-child(3) .level__name { font-size: 30px; }
.level:nth-child(4) .level__name { font-size: 34px; }
.level__body { font-size: 15px; line-height: 1.6; color: var(--body); }

.level:hover .level__name { color: var(--green); }
.level:hover .level__scale { color: var(--brass); }
.level:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 4px; }

/* Programme brief --------------------------------------------------------- */

/* Was photo + format card + audience card in three columns, where the photo
   got cropped to a strip and the quote — the most persuasive thing on the
   page — was boxed into a third. Now the photo runs full width with the
   quote laid over it, and the format facts sit beneath as one line. */
.prog-brief { padding: 0 var(--pad-x) 96px; }
.prog-brief__media { position: relative; margin: 0; height: 460px; }
/* Keeps the quote legible over whatever lands in the lower half of the
   photo, without dimming the whole image. The white quote needs this even
   when the photo is missing — the placeholder is a light sand gradient — so
   it is not scoped to slots carrying an image. It sits above the placeholder
   label, which centres in the upper half the scrim leaves clear. */
.prog-brief__media .photo::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background:
    linear-gradient(to right, rgba(18, 38, 29, .82) 0%, rgba(18, 38, 29, .5) 46%, rgba(18, 38, 29, .12) 72%),
    linear-gradient(to top, rgba(18, 38, 29, .7) 0%, rgba(18, 38, 29, .25) 45%, rgba(18, 38, 29, .05) 100%);
}
/* The placeholder label would otherwise centre behind the scrim. */
.prog-brief__media .photo > span { position: relative; z-index: 1; align-self: start; }
.prog-brief__quote {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 48px; color: #fff; box-sizing: border-box;
}
.prog-brief__quote blockquote {
  margin: 0; max-width: 22ch;
  font-family: var(--sans); font-style: italic; font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35;
}
.prog-brief__quote cite {
  display: block; margin-top: 14px; font-style: normal;
  font-size: 14px; font-weight: 600; color: var(--brass-on-green);
}

/* The format facts: a row of plain statements, divided rather than boxed, so
   they read as one line of specification instead of three more cards. */
.prog-facts {
  display: flex; flex-wrap: wrap; row-gap: 12px; margin-top: 24px;
  border-top: 1px solid var(--hairline); padding-top: 24px;
}
/* Sized to content rather than stretched to equal shares: a programme with
   two facts would otherwise spread them across the full width and leave its
   last divider floating in empty space. */
.prog-fact {
  display: flex; flex-direction: column; gap: 4px; padding: 0 32px;
  border-left: 1px solid var(--hairline);
}
.prog-fact:first-child { padding-left: 0; border-left: 0; }
.prog-fact__value { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.prog-fact__label {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
}


/* Cream bands ------------------------------------------------------------- */

/* The two columns rarely run to the same height, so they centre against each
   other: a short aside top-aligned beside a long headline leaves a void under
   it that reads as a layout fault rather than as alignment. Bands whose
   columns are both long, or whose aside must track the headline's first line,
   opt out with band--start. */
.band {
  padding: 96px var(--pad-x); background: var(--cream); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 64px;
  align-items: center;
}
.band--start { align-items: start; }
/* Flips the two columns visually while the intro keeps its DOM position, so
   the heading still introduces the list when stacked and to a screen reader. */
.band--flip > .band__intro { order: 2; }
.band__intro { display: flex; flex-direction: column; gap: 22px; }
.band__copy {
  display: flex; flex-direction: column; gap: 20px;
  font-size: 17px; line-height: 1.65; color: var(--body);
}
.band__copy--18 { gap: 18px; }
.band__copy .strong { font-weight: 600; color: var(--ink); }
.band__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.numbered { display: flex; flex-direction: column; font-size: 17px; line-height: 1.6; color: var(--body); }
/* The kicker labels the list, so it sits tight to the first rule rather than
   carrying its own margin on top of row 01's padding. */
.numbered > .kicker { margin-bottom: 14px; }
.numbered__row {
  padding: 20px 0; border-bottom: 1px solid var(--hairline);
  display: grid; grid-template-columns: 48px 1fr; gap: 20px;
}
/* A rule above the first row closes the list at both ends — without it the
   run of rules reads as starting mid-list. */
.numbered__row:first-of-type { border-top: 1px solid var(--hairline); }
.numbered__row span { font-weight: 700; color: var(--green); }
.numbered__close { margin: 28px 0 0; font-weight: 600; color: var(--ink); }

/* Chips and tags are read-only labels. A bordered capsule reads as a button,
   so they are bulleted list items: the bullet marks each as a list entry with
   nothing to click. */
.chips { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.chip {
  position: relative; padding-left: 20px; font-size: 16px; line-height: 1.5; color: var(--body);
}
.chip::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brass);
}

/* Sections ---------------------------------------------------------------- */

.section { padding: 96px var(--pad-x); }
.section--cream { background: var(--cream); }
.section__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 48px; gap: 32px; flex-wrap: wrap;
}
.section__head .h2 { max-width: 640px; }

/* DIG cards --------------------------------------------------------------- */

.dig { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.dig__card {
  border: 1px solid var(--hairline); border-radius: 24px; padding: 36px; background: #fff;
  display: flex; flex-direction: column; gap: 40px; min-height: 300px;
}
.dig__card--sand { background: var(--sand); border: 0; }
.dig__card--green { background: var(--green); color: #fff; border: 0; }
.dig__head { display: flex; justify-content: space-between; align-items: center; }
.dig__letter { font-family: var(--display); font-weight: 600; font-size: 88px; line-height: 1; color: var(--green); }
.dig__label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); font-weight: 600; }
.dig__title { font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.dig__body { font-size: 15px; line-height: 1.6; color: var(--body); }
.dig__card--green .dig__letter,
.dig__card--green .dig__label { color: var(--brass-on-green); }
.dig__card--green .dig__body { color: rgba(255, 255, 255, .8); }

/* CTA band ---------------------------------------------------------------- */

/* The band is a floating card, so it needs its own top margin: the preceding
   section's bottom padding sits inside that section's background and leaves
   the green edge butting straight up against it.

   The kicker heads the whole band rather than the narrative column: it names the
   choice the two columns below answer, so it spans both and the heading and the
   options read as a pair underneath it. */
.cta {
  margin: 48px var(--pad-x) 96px; background: var(--green); border-radius: 32px; padding: 72px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  column-gap: 48px; row-gap: 40px;
  align-items: center; color: #fff;
}
.cta__kicker { grid-column: 1 / -1; }
.cta--programme { margin-top: 96px; }
.cta__intro { display: flex; flex-direction: column; gap: 20px; }
.cta__rows { display: flex; flex-direction: column; gap: 14px; }
.cta__row {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 16px; padding: 24px 28px; display: flex;
  align-items: center; gap: 24px; color: #fff; transition: background .15s;
}
.cta__row:hover { background: rgba(255, 255, 255, .14); color: #fff; }
/* Title and sub are one label, so they stack with their own gap instead of
   relying on line-height to separate them. */
.cta__row-text { display: flex; flex-direction: column; gap: 6px; }
.cta__row-title { font-size: 20px; font-weight: 600; line-height: 1.3; }
.cta__row-sub { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .7); }
/* The arrow trails the text rather than being pushed to the far edge, where a
   wide row leaves it floating with no relationship to the label. */
.cta__row-arrow { font-size: 22px; line-height: 1; margin-left: auto; }
.cta__row--simple { padding: 22px 28px; font-weight: 600; font-size: 18px; }
.cta__row--simple .cta__row-arrow { font-size: inherit; }
.cta__row--white { background: #fff; color: var(--green); border: 0; }
.cta__row--white:hover { background: #fff; color: var(--green); }

/* About ------------------------------------------------------------------- */

/* Single column by default. A headline and its lead are one thought, and
   splitting them into columns forces the headline into a narrow measure that
   wraps to a ragged stack of two-word lines while the lead sits stranded in
   half-empty space. Stacked, the headline gets the full width to break on
   and the lead reads as its continuation. */
.hero-2 {
  padding: 72px var(--pad-x) 56px; display: flex;
  flex-direction: column; align-items: stretch; gap: 24px;
}
/* The headline runs the full content width, edge to edge between the page
   gutters. The size is scaled past the shared .h1 ceiling of 76px, because no
   cap can fill width the type isn't big enough to reach; it stays scoped to
   the stacked hero so headlines in narrow columns keep the shared scale.

   The lead keeps a reading measure: it is body copy at 19px, and a 1168px
   line is past the point where the eye finds the next line reliably. */
.hero-2 .h1 { max-width: none; font-size: clamp(44px, 5.8vw, 78px); }
.hero-2 .lead { max-width: 70ch; }
.hero-2--programme { padding-top: 40px; }
.hero-2__intro { display: flex; flex-direction: column; gap: 24px; }
.hero-2__aside { display: flex; flex-direction: column; gap: 24px; }

/* Two columns only where the aside carries its own weight — a lead plus a
   call to action, not a lone paragraph. */
.hero-2--split {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 48px 72px; align-items: start;
}
/* Back to the shared scale: this headline shares its row with the aside, so
   it has neither the width nor the licence for the full-bleed size. */
.hero-2--split .h1 { max-width: 18ch; font-size: clamp(40px, 4.4vw, 62px); }
/* Dropping the aside a little below the cap line reads as deliberate offset;
   flush with the first line reads as two columns that failed to align. */
.hero-2--split .hero-2__aside { padding-top: 12px; }
.hero-2__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.tagline { font-size: 20px; color: var(--green); font-family: var(--sans); font-weight: 600; font-style: italic; }

.photo-full { padding: 0 var(--pad-x) 96px; height: 520px; box-sizing: content-box; }
.photo-full--460 { height: 460px; }

.pact { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pact__card {
  border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 32px;
  min-height: 260px; background: #fff; color: var(--ink); border: 1px solid var(--hairline-card);
}
.pact__card--sand { background: var(--sand); }
.pact__card--green { background: var(--green); color: #fff; }
.pact__letter { font-family: var(--display); font-weight: 600; font-size: 80px; line-height: 1; color: var(--green); }
.pact__card--green .pact__letter { color: var(--brass-on-green); }

/* Carried over from the previous site: pointing at a value turns its card
   green and its letter brass, so the four letters read as one PACT as you move
   across them. Hover only — the cards are not interactive, so there is nothing
   to reach by keyboard and nothing is hidden behind the change. */
.pact__card { transition: background .25s ease, color .25s ease, border-color .25s ease; }
.pact__letter { transition: color .25s ease; }
@media (hover: hover) {
  .pact__card:hover { background: var(--green); color: #fff; border-color: var(--green); }
  .pact__card:hover .pact__letter { color: var(--brass-on-green); }
  /* The green card is already the hover state, so it warms to brass instead of
     staying inert while its neighbours respond. */
  .pact__card--green:hover { background: var(--brass); border-color: var(--brass); }
  .pact__card--green:hover .pact__letter { color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .pact__card, .pact__letter { transition: none; }
}
.pact__title { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.pact__body { font-size: 15px; line-height: 1.6; opacity: .85; }

.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.team__card { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.team__photo { height: 360px; }
.team__photo .photo img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.team__card:hover .photo img { transform: scale(1.06); }
.team__name { font-size: 22px; font-weight: 600; }
.team__role { font-size: 14px; color: var(--muted); }

/* Hub programme rows ------------------------------------------------------ */

/* Three levels shown side by side so they read as one comparable set. Cards
   stretch to equal height; each one stacks top-to-bottom internally. */
.prog-list {
  padding: 0 var(--pad-x) 96px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch;
}
/* The AI hub has two programmes, not three; without this they would sit in a
   three-column grid with a hole where the third card would be. */
.prog-list:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.prog-row {
  display: flex; flex-direction: column; gap: 24px;
  padding: 40px 36px; border-radius: 32px; background: #fff; color: var(--ink);
  border: 1px solid var(--hairline-card); transition: border-color .15s;
}
.prog-row:hover { border-color: var(--green); color: var(--ink); }
.prog-row--green { background: var(--green); color: #fff; }
.prog-row--green:hover { color: #fff; }
.prog-row--sand { background: var(--sand); }
.prog-row__left { display: flex; flex-direction: column; gap: 14px; }
/* The step number orders the three levels; the audience beside it says whose
   capability this builds. Number stays quieter than the programme name on the
   right, which is the row's real headline. */
.prog-row__head { display: flex; align-items: center; gap: 12px; }
.prog-row__step {
  font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1;
  color: var(--green); font-variant-numeric: tabular-nums; flex: none;
  border: 1px solid currentColor; border-radius: 999px;
  width: 34px; height: 34px; display: grid; place-items: center; opacity: .75;
}
.prog-row--green .prog-row__step { color: var(--brass-on-green); opacity: .9; }
/* "Builds capability in" is a quiet preposition; the audience under it is the
   signal a scanning visitor needs, so it carries the weight. */
.prog-row__audience { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.prog-row__need { font-family: var(--sans); font-weight: 500; font-style: italic; font-size: 16px; line-height: 1.5; opacity: .8; }
/* Grows to fill the card so the button can be pinned to the bottom, keeping
   all three buttons on one line despite uneven copy lengths. */
.prog-row__right { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.prog-row__level { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; opacity: .55; }
.prog-row__name { font-size: 23px; font-weight: 600; line-height: 1.2; }
/* Sits directly under the name it qualifies, so it pulls up tight against it
   and leans on the brass accent rather than another weight of ink. */
.prog-row__tagline { font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--brass); margin-top: -6px; }
.prog-row--green .prog-row__tagline { color: var(--brass-on-green); }
.prog-row__summary { font-size: 15px; line-height: 1.55; opacity: .85; }
/* The whole row is the <a>, so this cannot be a nested link or button. It is
   styled to read as the affordance and responds to hover on the row itself. */
.prog-row__more {
  display: inline-flex; align-items: center; gap: 8px; align-self: start;
  font-size: 14px; font-weight: 600; margin-top: auto;
  padding: 13px 22px; border-radius: 999px;
  background: var(--green); color: #fff;
  transition: background .15s, color .15s, transform .15s;
}
.prog-row__more .prog-row__more-arrow { transition: transform .15s; }
.prog-row:hover .prog-row__more { background: var(--green-dark); }
.prog-row:hover .prog-row__more .prog-row__more-arrow { transform: translateX(3px); }

/* On the green row a green button would vanish, so it inverts to brass. */
.prog-row--green .prog-row__more { background: var(--brass-on-green); color: var(--green-dark); }
.prog-row--green:hover .prog-row__more { background: #fff; color: var(--green-dark); }

/* Keyboard users get the focus ring on the row, but the button is where the
   eye goes, so mirror it there too. */
.prog-row:focus-visible { outline: none; }
.prog-row:focus-visible .prog-row__more { outline: 2px solid currentColor; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .prog-row__more, .prog-row__more .prog-row__more-arrow { transition: none; }
  .prog-row:hover .prog-row__more .prog-row__more-arrow { transform: none; }
}

/* See .chip: labels, not controls. The row inherits one of three themes, so
   the bullet takes currentColor rather than a fixed brand colour. */
.tags { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tag { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; opacity: .85; }
.tag::before {
  content: ""; position: absolute; left: 2px; top: .6em;
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}

/* Programme --------------------------------------------------------------- */

.crumbs {
  padding: 56px var(--pad-x) 0; display: flex; gap: 8px;
  font-size: 13px; color: var(--muted); align-items: center; flex-wrap: wrap;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brass); }
.crumbs__current { color: var(--ink); font-weight: 600; }

.outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.outcome {
  background: #fff; border-radius: 24px; padding: 36px;
  display: flex; flex-direction: column; gap: 28px; min-height: 240px;
}
.outcome__letter { font-family: var(--display); font-weight: 600; font-size: 72px; line-height: 1; color: var(--green); }
.outcome__title { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.outcome__body { font-size: 15px; line-height: 1.6; color: var(--body); }

/* CESI programme page ----------------------------------------------------- */

/* The shared .section__head is space-between, built for a heading + a note.
   These sections carry a kicker, heading and note, so they get a header that
   stacks predictably: every kicker, heading and note starts on the same left
   edge, section after section. */
.sec-head { margin-bottom: 48px; max-width: 760px; }
.sec-head .kicker { display: block; margin-bottom: 12px; }
.sec-head .h2 { max-width: 20ch; }
.sec-head__note { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--body); max-width: 62ch; }

/* Heading and body side by side, each centred against the other, for a
   section whose prose would otherwise leave the right half empty. */
.section--split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px; align-items: center;
}
.sec-head--split { margin-bottom: 0; }

/* Separates the two halves of section 04 without starting a new section. */
.sub-head {
  margin: 48px 0 20px; font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700; color: var(--muted);
  padding-top: 24px; border-top: 1px solid var(--hairline-card);
}

/* The site header is sticky, so anchored sections must clear it. */
#about, #who, #programme, #outcomes, #where-to-begin { scroll-margin-top: 88px; }

/* Two columns: the offer, and the intake card that acts on it. */
.cesi-hero {
  padding: 40px var(--pad-x) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: 48px; align-items: start;
}
.cesi-hero__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cesi-hero__title { max-width: 16ch; }
.cesi-hero__lead { max-width: 54ch; }

.cesi-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px;
  margin-top: 4px; padding-top: 32px; border-top: 1px solid var(--hairline-card);
}
.cesi-stat { display: flex; flex-direction: column; gap: 4px; }
.cesi-stat__value { font-family: var(--display); font-size: 40px; font-weight: 600; line-height: 1; color: var(--green); }
.cesi-stat__label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--muted); }

/* Status pill. Note .chip is a bulleted list item elsewhere, not a badge. */
.status {
  display: inline-block; align-self: start; padding: 7px 14px; border-radius: 999px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}
.status--open { background: var(--brass-on-green); color: var(--green-dark); }
.status--closed { background: rgba(27, 42, 34, .12); color: var(--ink); }

/* The intake card in the hero: the page's primary conversion point, sitting
   beside the offer it acts on. Not sticky — the site header is translucent,
   so a card scrolling under it reads as a rendering fault. */
.cohort-band {
  padding: 32px; border-radius: 28px;
  background: var(--green); color: #fff;
  display: flex; flex-direction: column; align-items: start; gap: 12px;
}
.cohort-band__name { color: #fff; font-size: 32px; line-height: 1.1; }
.cohort-band__close { font-size: 14px; opacity: .85; }
.cohort-band__note { font-size: 15px; opacity: .9; }
.cohort-band__note a { color: var(--brass-on-green); text-decoration: underline; }
.cohort-band__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 4px; }
.cohort-band__actions .btn { width: 100%; }
/* The band is green, so the primary action inverts to brass to stay visible
   and the secondary sits on a translucent white. */
.cohort-band .btn--primary { background: var(--brass-on-green); color: var(--green-dark); }
.cohort-band .btn--primary:hover { background: #fff; color: var(--green-dark); }
.cohort-band .btn--secondary { background: rgba(255, 255, 255, .14); color: #fff; }
.cohort-band .btn--secondary:hover { background: rgba(255, 255, 255, .24); color: #fff; }

/* Four equal cells that share the card's width rather than forcing it wider. */
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin-top: 6px; }
.countdown__cell {
  min-width: 0; padding: 12px 6px; border-radius: 14px; text-align: center;
  background: rgba(255, 255, 255, .1);
}
.countdown__value {
  display: block; font-family: var(--display); font-size: 28px; font-weight: 600;
  line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.countdown__label {
  display: block; margin-top: 6px; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; color: var(--brass-on-green);
}

.cesi-prose { max-width: 62ch; display: flex; flex-direction: column; gap: 18px; }
.cesi-prose p { font-size: 17px; line-height: 1.65; color: var(--body); }

/* Fixed at three: the levers are a set of three, and the six deliverables
   divide into two full rows. auto-fit gave four columns here, orphaning two
   cards on a second row. */
.lever-grid, .deliver-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
/* A 5-item grid (the masterclass outcomes) would leave two cards on the last
   row. A 6-column track lets the last pair each span 3, filling the row. */
/* Four deliverables: two rows of two, rather than a row of three with a
   stranded fourth. Must sit after .deliver-grid — same specificity. */
.deliver-grid--four { grid-template-columns: repeat(2, 1fr); }
.deliver-grid--five { grid-template-columns: repeat(6, 1fr); }
.deliver-grid--five > * { grid-column: span 2; }
.deliver-grid--five > :nth-child(4),
.deliver-grid--five > :nth-child(5) { grid-column: span 3; }
.lever, .deliver {
  background: #fff; border-radius: 24px; padding: 32px;
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--hairline-card);
}
.lever__num, .deliver__num {
  font-family: var(--display); font-size: 22px; font-weight: 600;
  color: var(--brass); line-height: 1; margin-bottom: 6px;
}
.lever__label, .deliver__label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.lever__title, .deliver__title { font-size: 20px; font-weight: 600; line-height: 1.25; }
.lever__body, .deliver__body { font-size: 15px; line-height: 1.6; color: var(--body); }

/* Six audiences over two rows of three, for the same reason as .deliver-grid. */
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.audience {
  background: var(--sand); border-radius: 24px; padding: 28px;
  display: flex; flex-direction: column; gap: 8px;
}
.audience__label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--green);
}
.audience__title { font-size: 19px; font-weight: 600; line-height: 1.25; }
.audience__body { font-size: 15px; line-height: 1.6; color: var(--body); }

.cadence {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;
  margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--hairline-card);
}
.cadence__item { display: flex; flex-direction: column; gap: 4px; }
.cadence__label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.cadence__value { font-size: 17px; font-weight: 600; }

/* Four across, but as separate cards in the same language as .audience,
   .lever and .deliver elsewhere on the page — 24px radius, hairline border,
   16px gutters — rather than the fused hard-edged block. */
.units { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.unit {
  background: #fff; padding: 28px 24px;
  border: 1px solid var(--hairline-card); border-radius: 24px;
  display: flex; flex-direction: column;
}
.unit__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
/* Same eyebrow treatment as .audience__label and .lever__label, so a unit
   card is recognisably the same object as the cards in 02 and 04. */
.unit__tag {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--green);
}
.unit__weeks { font-size: 12px; color: var(--muted); font-weight: 600; }
.unit__title { font-size: 20px; font-weight: 600; line-height: 1.25; margin: 6px 0 12px; }
.unit__modules { display: flex; flex-direction: column; gap: 8px; }
.unit__modules li { font-size: 14px; line-height: 1.45; color: var(--body); }
.unit__body { font-size: 15px; line-height: 1.6; color: var(--body); max-width: 70ch; }

/* Pushed to the foot of the card so the toggles line up across all four. */
.unit__details { margin-top: auto; padding-top: 18px; }
.unit__toggle {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--green);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 0;
}
.unit__toggle::-webkit-details-marker { display: none; }
.unit__toggle::after { content: "▾"; transition: transform .15s; }
.unit__details[open] .unit__toggle::after { transform: rotate(180deg); }
.unit__toggle:hover { color: var(--brass); }
.unit__items {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--hairline-card);
}
.unit__items li { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.45; }
.unit__item-label { font-weight: 700; color: var(--green); }
.unit__item-body { color: var(--body); }

/* Capstone and Conferral: milestones, not teaching units, so they sit in
   their own two-column row beneath the grid. */
.milestones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
.milestone {
  background: var(--green); color: #fff; border-radius: 24px; padding: 32px;
}
.milestone .unit__tag { color: var(--brass-on-green); }
.milestone .unit__weeks { color: rgba(255, 255, 255, .7); }
.milestone__title { font-size: 21px; font-weight: 600; line-height: 1.2; margin-bottom: 10px; }
.milestone .unit__body { color: rgba(255, 255, 255, .85); }

/* Connected moves (Enterprise Execution Capability) ----------------------- */

/* The live page presents the build as three numbered moves that each carry
   two paragraphs — too much copy for a card grid, and genuinely sequential.
   So they run as full-width rows: the number holds the left rail, the prose
   keeps a reading measure beside it. */
.moves { display: flex; flex-direction: column; }
.move {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 32px;
  padding: 36px 0; border-top: 1px solid var(--hairline-card);
}
.move:last-child { border-bottom: 1px solid var(--hairline-card); }
.move__marker {
  font-family: var(--display); font-size: 40px; font-weight: 600; line-height: 1;
  color: var(--brass); font-variant-numeric: tabular-nums;
}
.move__body { display: flex; flex-direction: column; gap: 14px; max-width: 68ch; }
.move__title { font-size: 26px; font-weight: 600; line-height: 1.2; }
.move__body p { font-size: 16px; line-height: 1.65; color: var(--body); }
/* The payoff line for the whole build, so it carries more weight than the
   rows above it without becoming another heading. */
.moves__close {
  margin-top: 32px; max-width: 72ch;
  font-size: 18px; line-height: 1.6; font-weight: 600; color: var(--ink);
}

/* Programme agenda (both AI pages) ---------------------------------------- */

/* Two days side by side, each a list of sessions. Every session states the
   output it produces — that is the live page's own structure and the reason
   the programme reads as a build rather than a syllabus. */
.agenda {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px; align-items: stretch;
}
/* The two days rarely hold the same number of sessions, so the cards match
   heights rather than leaving a ragged lower edge between them. */
.agenda__day {
  background: #fff; border: 1px solid var(--hairline-card); border-radius: 24px;
  padding: 36px 32px; display: flex; flex-direction: column;
}
.section--cream .agenda__day { background: #fff; }
.agenda__head { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--hairline-card); }
.agenda__label {
  display: block; margin-bottom: 8px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--brass);
}
.agenda__title { font-size: 22px; font-weight: 600; line-height: 1.25; }

.sessions { display: flex; flex-direction: column; }
.session {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px;
  padding: 16px 0; border-top: 1px solid var(--hairline-footer);
}
.sessions > .session:first-child { border-top: 0; padding-top: 0; }
.session__num {
  grid-row: span 2; font-family: var(--display); font-size: 14px; font-weight: 600;
  line-height: 1.5; color: var(--green); font-variant-numeric: tabular-nums;
}
.session__title { font-size: 16px; font-weight: 600; line-height: 1.35; }
/* The output is the point of the session, so it is labelled rather than left
   to read as a second, quieter title. */
.session__output { font-size: 14px; line-height: 1.5; color: var(--body); }
.session__output::before { content: "Output — "; color: var(--muted); font-weight: 600; }
/* Opening frames, read-outs and the showcase are not numbered sessions; they
   bracket the day, so they sit quieter than the work between them. */
.session--frame .session__title { font-weight: 500; font-style: italic; color: var(--muted); }

/* Scope options ----------------------------------------------------------- */

.scopes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.scope {
  background: var(--sand); border-radius: 24px; padding: 32px;
  display: flex; flex-direction: column; gap: 10px;
}
/* Sand on cream is almost no contrast at all, so on a cream band the scope
   cards invert to white like .day and .agenda__day do. */
.section--cream .scope { background: #fff; border: 1px solid var(--hairline-card); }
.scope__title { font-size: 20px; font-weight: 600; line-height: 1.25; }
.scope__body { font-size: 15px; line-height: 1.6; color: var(--body); }

/* Executive Labs page ----------------------------------------------------- */

/* Same two-column hero as CESI: the argument on the left, the engagement
   pathways and their CTAs on the right. */
.labs-hero {
  padding: 40px var(--pad-x) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px; align-items: start;
}
.labs-hero__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.labs-hero__title { max-width: 18ch; }
.labs-hero__title em { color: var(--green); }
.labs-hero .lead, .labs-hero__body { max-width: 60ch; }
.labs-hero__body { font-size: 17px; line-height: 1.65; color: var(--body); }
.labs-hero strong { font-weight: 700; color: var(--ink); }

.labs-meta {
  background: var(--sand); border-radius: 28px; padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
}
.labs-meta__label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin-bottom: 10px;
}
.labs-meta__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.labs-meta__chips li {
  background: #fff; border: 1px solid var(--hairline-card); border-radius: 999px;
  padding: 8px 14px; font-size: 14px; font-weight: 600;
}
.labs-meta__dig { font-size: 15px; color: var(--body); }
.labs-meta__actions { display: flex; flex-direction: column; gap: 10px; }
.labs-meta__actions .btn { width: 100%; }
/* The panel is sand, so .btn--secondary (also sand) would vanish on it. */
.labs-meta__actions .btn--secondary { background: #fff; border: 1px solid var(--hairline-card); }
.labs-meta__actions .btn--secondary:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* The three DIG days, in the same card language as .unit and .deliver. */
.days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.day {
  background: #fff; border: 1px solid var(--hairline-card); border-radius: 24px;
  padding: 32px; display: flex; flex-direction: column; gap: 8px;
}
.section--cream .day { background: #fff; }
.day__head { display: flex; align-items: center; gap: 12px; }
.day__letter {
  font-family: var(--display); font-size: 15px; font-weight: 600; line-height: 1;
  color: var(--green); border: 1px solid currentColor; border-radius: 999px;
  width: 34px; height: 34px; display: grid; place-items: center; flex: none;
}
.day__num {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.day__title { font-size: 20px; font-weight: 600; line-height: 1.25; margin-top: 2px; }
.day__body { font-size: 15px; line-height: 1.6; color: var(--body); }

/* The optional fourth day: an add-on, so it reads as a green aside rather
   than a fourth peer of the three DIG days. */
.day-extra {
  margin-top: 16px; padding: 32px; border-radius: 24px;
  background: var(--green); color: #fff;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: start;
}
.day-extra__aside { display: flex; flex-direction: column; align-items: start; gap: 6px; }
.day-extra__num {
  font-family: var(--display); font-size: 44px; font-weight: 600; line-height: 1;
  color: var(--brass-on-green);
}
.day-extra__label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: rgba(255, 255, 255, .7); margin-bottom: 4px;
}
.day-extra__title { font-size: 22px; font-weight: 600; line-height: 1.25; margin-bottom: 10px; }
.day-extra__body { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .88); }
.day-extra__foot {
  margin-top: 14px; font-size: 13px; letter-spacing: .04em;
  font-weight: 600; color: var(--brass-on-green);
}

.labs-cta { margin-top: 32px; }

/* Form extras used by the CESI application ------------------------------- */

.field__legend { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.field__static { font-size: 15px; color: var(--body); padding: 4px 0; }
.field__switch { font-size: 13px; font-weight: 600; }
.radio-row { display: flex; flex-wrap: wrap; gap: 12px; }
.radio {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 13px 18px; border-radius: 999px; border: 1px solid var(--hairline-card);
  font-size: 15px; font-weight: 500; transition: border-color .15s, background .15s;
}
.radio:hover { border-color: var(--green); }
.radio:has(input:checked) { border-color: var(--green); background: var(--sand); font-weight: 600; }
.radio input { accent-color: var(--green); }

/* Contact & forms --------------------------------------------------------- */

.contact {
  padding: 72px var(--pad-x) 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 64px; align-items: start;
}
/* The contact grid is followed by the CTA band, which carries its own 96px
   of bottom margin — the old padding here stacked a second gap on top. */
.contact + .cta { margin-top: 96px; }
.contact__intro { display: flex; flex-direction: column; gap: 32px; }
.contact__lead { font-size: 18px; line-height: 1.6; color: var(--body); max-width: 480px; }
.contact__photo { height: 280px; }

.details {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  font-size: 15px; line-height: 1.7; color: var(--body);
}
.details__label {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green); font-weight: 700; margin-bottom: 8px;
}
.details a { color: var(--body); }
.details a:hover { color: var(--brass); }

.form-card {
  background: var(--cream); border-radius: 32px; padding: 48px;
  display: flex; flex-direction: column; gap: 18px;
}
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.field--gap8 { gap: 8px; }
.input {
  padding: 14px 16px; border: 1px solid rgba(27, 42, 34, .16); border-radius: 12px;
  font: inherit; font-weight: 400; background: #fff; box-sizing: border-box;
  width: 100%; min-width: 0; color: var(--ink);
}
.input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.input.is-invalid { border-color: var(--error); }
textarea.input { resize: vertical; }
select.input { appearance: auto; }
.field__error { font-size: 13px; font-weight: 500; color: var(--error); }
.form-card .btn--submit { margin-top: 6px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer;
  background: #fff; color: var(--ink); border: 1px solid rgba(27, 42, 34, .16);
  transition: background .15s, color .15s;
}
.pill[aria-pressed="true"] { background: var(--green); color: #fff; }

.form-success {
  background: var(--cream); border-radius: 32px; padding: 48px;
  display: flex; flex-direction: column; gap: 20px;
}
.form-success p { font-size: 17px; line-height: 1.65; color: var(--body); }

/* Photo slots ------------------------------------------------------------- */

.photo {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: linear-gradient(135deg, #EAE5D9 0%, #D8D1C1 100%);
  display: grid; place-items: center; box-sizing: border-box; padding: 16px;
  color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; text-align: center;
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.photo--r24 { border-radius: 24px; }
.photo--r32 { border-radius: 32px; }
.photo--pill { border-radius: 999px; }

/* Footer ------------------------------------------------------------------ */

.footer {
  margin: 0 var(--pad-x); border-top: 1px solid var(--hairline-footer); padding: 32px 0 40px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap;
  font-size: 14px; color: var(--muted); line-height: 1.7;
  max-width: 1168px; align-self: center; width: calc(100% - 112px);
}
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__links { display: flex; gap: 28px; font-weight: 500; color: var(--ink); flex-wrap: wrap; }
.footer__links a { color: var(--ink); }
.footer__links a:hover { color: var(--brass); }
.footer__email { color: inherit; }
.contact--tight-top { padding-top: 40px; }
.field__optional { font-weight: 400; color: #5A6862; }

/* Error page -------------------------------------------------------------- */

.error-page { padding: 96px var(--pad-x) 128px; display: flex; flex-direction: column; gap: 28px; max-width: 760px; }

/* Responsive -------------------------------------------------------------- */

/* No page-level overflow guard here on purpose. `overflow-x: hidden` on
   html/body makes the body a scroll container and kills `position: sticky`
   on the header; `overflow-x: clip` on .site makes it the containing block
   for the fixed drawer and scrim, so they paint but stop hit-testing.
   Instead each offender is kept in bounds at source — see the closed drawer
   below, which is taken out of flow rather than parked offscreen. */

/* Long unbroken strings (emails, URLs) must not push the layout open. */
.lead, .band__copy, .dig__body, .pact__body, .outcome__body, .level__body,
.prog-row__summary, .details, .footer, .form-success p { overflow-wrap: break-word; }

@media (max-width: 1024px) {
  :root { --pad-x: 40px; }
  .cta { padding: 56px; }
  /* The hero's 400px intake card no longer leaves the offer enough room, so
     the two stack and the card stops sticking. */
  .cesi-hero { grid-template-columns: 1fr; gap: 32px; }
  .cohort-band { max-width: 520px; }
  .section--split { grid-template-columns: 1fr; gap: 32px; }
  .sec-head--split { margin-bottom: 0; }
  /* Four unit columns get too narrow for a module title; drop to two. */
  .units { grid-template-columns: repeat(2, 1fr); }
  .lever-grid, .deliver-grid, .audience-grid { grid-template-columns: repeat(2, 1fr); }
  /* Two agenda days no longer fit side by side; they stack in day order. */
  .agenda { grid-template-columns: 1fr; }
  /* Labs: hero stacks, and three DIG days no longer fit across. */
  .labs-hero { grid-template-columns: 1fr; gap: 32px; }
  .labs-meta { max-width: 520px; }
  .days { grid-template-columns: repeat(2, 1fr); }
  .days > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .deliver-grid--five { grid-template-columns: repeat(2, 1fr); }
  .deliver-grid--five > *,
  .deliver-grid--five > :nth-child(4),
  .deliver-grid--five > :nth-child(5) { grid-column: auto; }
  .deliver-grid--five > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Three levers over two columns leave one alone on the second row; let it
     span the full width instead of sitting as a half-width orphan. */
  .lever-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Three columns get too narrow to hold a programme name; drop to two, with
     the third card spanning the full width beneath them. */
  .prog-list { grid-template-columns: repeat(2, 1fr); }
  .prog-list > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .prog-row { padding: 36px 32px; }
}

@media (max-width: 760px) {
  .prog-list { grid-template-columns: 1fr; }
  .prog-list > :last-child:nth-child(odd) { grid-column: auto; }
}

/* Tablet and below: the five nav pills no longer fit on one row, so the
   links and the CTA move into a drawer behind the burger. */
@media (max-width: 900px) {
  .nav { flex-wrap: nowrap; gap: 12px; }
  .nav__burger { display: inline-flex; }

  /* Closed, the drawer must contribute nothing: a transform-parked box still
     widens the page, so it is taken out of hit-testing and flow until open. */
  .nav__menu {
    position: fixed; inset: 0 0 0 auto; z-index: 60;
    width: min(320px, 84vw);
    background: #fff;
    box-shadow: -18px 0 48px rgba(27, 42, 34, .18);
    padding: 88px 24px 32px;
    display: flex; flex-direction: column; align-items: stretch; gap: 24px;
    transform: translateX(100%);
    transition: transform .22s ease, visibility .22s;
    visibility: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .nav-is-open .nav__menu { transform: none; visibility: visible; }

  .nav__links {
    flex-direction: column; gap: 4px;
    background: transparent; padding: 0; border-radius: 0;
    font-size: 16px;
  }
  .nav__link { padding: 14px 16px; border-radius: 12px; }
  .nav__link:hover, .nav__link.is-active { background: var(--sand); }

  .nav__cta { display: block; text-align: center; padding: 16px 22px; }

  .nav__scrim {
    display: block;
    position: fixed; inset: 0; z-index: 50;
    background: rgba(18, 38, 29, .44);
  }
  .nav__scrim[hidden] { display: none; }

  body.nav-is-open { overflow: hidden; }
}

@media (max-width: 860px) {
  /* The photo can no longer hold its share beside the ladder, so the levels
     take the full width and the photo leads above them. */
  .levels { grid-template-columns: 1fr; gap: 32px; }
  .levels__media { min-height: 320px; }
  .levels__intro { max-width: none; }

  .prog-brief__media { height: 400px; }
  .prog-brief__quote { padding: 36px; }

  /* Too narrow to carry a display headline beside an aside: the split hero
     stacks like the default one. */
  .hero-2--split { grid-template-columns: 1fr; gap: 28px; }
  .hero-2--split .hero-2__aside { padding-top: 0; }
  .hero-2--split .h1 { max-width: none; }

  /* Text first, photo beneath: the headline should still be the first thing
     read when the two can no longer sit side by side. */
  .hero--split { grid-template-columns: 1fr; gap: 36px; padding-bottom: 56px; }
  .hero--split .hero__lead { max-width: none; }
  .hero__media { min-height: 380px; }
}

@media (max-width: 720px) {
  :root { --pad-x: 24px; }
  .band, .hero-2--split, .contact, .cta, .dig, .pact, .outcomes, .team {
    grid-template-columns: 1fr;
  }
  .hero { padding-top: 48px; gap: 28px; }

  .photo-full, .photo-full--460 { height: 300px; }
  .team__photo { height: 320px; }
  .contact__photo { height: 240px; }

  /* The scale label stops being a column and becomes an eyebrow above the
     name — 148px of track leaves the body copy nothing to sit in here. */
  .levels__media { min-height: 260px; }
  .level { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .level__scale { font-size: 13px; }
  .level:nth-child(2) .level__name { font-size: 23px; }
  .level:nth-child(3) .level__name { font-size: 26px; }
  .level:nth-child(4) .level__name { font-size: 29px; }

  .deliver-grid--four { grid-template-columns: 1fr; }

  .prog-brief { padding-bottom: 56px; }
  .prog-brief__media { height: 340px; }
  .prog-brief__quote { padding: 24px; }
  /* Stacked, the facts read as a short list rather than a divided row. */
  .prog-facts { flex-direction: column; gap: 14px; margin-top: 20px; padding-top: 20px; }
  .prog-fact { flex: none; padding: 0; border-left: 0; gap: 2px; }
  .prog-fact__value { font-size: 16px; }

  /* The move number stops holding a rail of its own and sits above the prose. */
  .move { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .move__marker { font-size: 32px; }
  .move__title { font-size: 22px; }
  .moves__close { font-size: 17px; margin-top: 24px; }

  .agenda__day { padding: 28px 24px; border-radius: 20px; }
  .agenda__title { font-size: 20px; }
  .scopes { grid-template-columns: 1fr; }
  .scope { padding: 26px; }

  .track__body { padding: 24px 24px 28px; }
  .track__name { font-size: 24px; }
  .track__media { height: 170px; }

  .hero__media { min-height: 300px; }
  .hero__actions .btn { flex: 1 1 auto; text-align: center; }

  .cta { padding: 40px 24px; border-radius: 24px; gap: 32px; }
  .cta--programme { margin-top: 64px; }
  .cta__row { padding: 20px; }
  .cta__row--simple { padding: 18px 20px; font-size: 16px; }
  .cta__row-title { font-size: 18px; }

  .form-card, .form-success { padding: 28px 20px; border-radius: 24px; }
  .details { grid-template-columns: 1fr; gap: 20px; }
  .footer { width: auto; margin: 0 var(--pad-x); align-self: stretch; }
  .footer, .section__head { gap: 24px; }

  /* .hero-2 .h1 outranks a bare .h1, so the hero scale is reset by name or
     the desktop clamp leaks onto phones. */
  .h1, .hero-2 .h1, .hero-2--split .h1 { font-size: clamp(38px, 11vw, 52px); }
  .h1--home { font-size: clamp(40px, 12vw, 58px); }
  .hero-2 .lead, .hero__lead { max-width: none; }
  .h2, .h2--54, .h2--52, .h2--50 { font-size: 34px; }
  .h2--team { margin-bottom: 32px; }
  .lead { font-size: 17px; }
  .note, .note--320 { max-width: none; }
  .quote { font-size: 24px; }

  .section, .band { padding-top: 56px; padding-bottom: 56px; }
  .levels { padding-bottom: 56px; }
  .band { gap: 32px; }
  .band--flip > .band__intro { order: 0; }
  .section__head { margin-bottom: 32px; }

  .dig__card, .outcome { padding: 28px; min-height: 0; gap: 28px; }
  .dig__letter { font-size: 64px; }
  .pact__card { padding: 26px; min-height: 0; gap: 24px; }
  .pact__letter, .outcome__letter { font-size: 60px; }

  .prog-list { padding-bottom: 56px; }
  .prog-row { padding: 28px; border-radius: 24px; gap: 24px; }
  .prog-row__name { font-size: 24px; }
  .prog-row__need { font-size: 17px; }
  .prog-row__step { font-size: 24px; }

  /* CESI hero is a single column here; the card is no longer sticky. */
  .cesi-stat__value { font-size: 32px; }
  .cohort-band { padding: 26px; border-radius: 24px; }
  .cohort-band__name { font-size: 28px; }
  .countdown__value { font-size: 26px; }
  .units, .milestones, .lever-grid, .deliver-grid, .audience-grid, .days,
  .deliver-grid--five { grid-template-columns: 1fr; }
  .days > :last-child:nth-child(odd),
  .deliver-grid--five > :last-child:nth-child(odd) { grid-column: auto; }
  .day, .day-extra { padding: 26px; }
  .day-extra { grid-template-columns: 1fr; gap: 20px; }
  .unit { padding: 24px; }
  .unit__title, .milestone__title { font-size: 20px; }
  .lever, .deliver { padding: 26px; }
  /* Full-width on narrow screens: an unmissable tap target. */
  .prog-row__more { display: flex; justify-content: center; width: 100%; padding: 15px 22px; }

  .crumbs { padding-top: 32px; }
  .error-page { padding-top: 56px; padding-bottom: 72px; }

  /* Comfortable touch targets. */
  .btn { padding: 15px 24px; }
  .pill { padding: 12px 18px; }
}

@media (max-width: 420px) {
  .h2, .h2--54, .h2--52, .h2--50 { font-size: 30px; }
  .form-row { grid-template-columns: 1fr; }
  .footer__links { gap: 16px 20px; }
}

/* Coarse pointers get the drawer regardless of the reported width. */
@media (hover: none) {
  .nav__link:hover { background: transparent; }
  .nav__link.is-active:hover { background: var(--sand); }
}