/* Tailored Ideas — brand.css: the creative pass (Oct 2026, experiment).
   Loaded after main.css. Everything here draws on the brand guide's
   elements (the big mark, the field, the lattice, the arm rule, the marker,
   the corner bite). Each block is one move, so a move can be dropped by
   deleting its block. Assets: /assets/img/brand/, drawn with the brand
   build's own geometry. */

/* ------------------------------------------------------------------
   1. The hero: the big mark, quiet, cropped by the edges (guide cover).
      Arms a tone of the ground; the jacaranda arm and dot at full
      strength. On load the arms come in along their own lines and the
      dot lands last, like a stitch pulled tight.
   ------------------------------------------------------------------ */
.hero-field { background: var(--charcoal); }
.hero { --hm: clamp(34rem, 74vw, 76rem); }
.hero__viz {
  position: absolute;
  z-index: 0;
  width: var(--hm);
  aspect-ratio: 1;
  right: calc(var(--hm) * -0.2);
  top: calc(34% - var(--hm) / 2);
  pointer-events: none;
}
.hero__mark { display: block; width: 100%; height: 100%; overflow: visible; }
.hero > .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .hero__mark .m-arm { animation: m-arm-in 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .hero__mark .m-arm--2 { --mx: -220px; --my: -220px; animation-delay: 0.1s; }
  .hero__mark .m-arm--3 { --mx:  220px; --my: -220px; animation-delay: 0.28s; }
  .hero__mark .m-arm--1 { --mx: -220px; --my:  220px; animation-delay: 0.46s; }
  .hero__mark .m-arm--0 { --mx:  220px; --my:  220px; animation-delay: 0.7s; }
  .hero__mark .m-dot {
    transform-box: fill-box; transform-origin: center;
    animation: m-dot-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.35s both;
  }
}
@keyframes m-arm-in {
  from { transform: translate(var(--mx), var(--my)); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes m-dot-in {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
@media (max-width: 48rem) {
  .hero { --hm: 125vw; }
  .hero__viz { right: -58vw; top: -52vw; }
}

/* ------------------------------------------------------------------
   2. The big mark behind the page heads: cropped by the top and right
      edges, the dot whole and on the page in the band's top padding,
      the arms running down behind the content in a tone of the ground.
   ------------------------------------------------------------------ */
.page-head {
  --pm: clamp(20rem, 34vw, 34rem);
  background-repeat: no-repeat;
  background-size: var(--pm) var(--pm);
  background-position: right calc(var(--pm) * -0.3) top calc(var(--pm) * -0.36);
}
.page-head.field-light { background-image: url("/assets/img/brand/mark-quiet-light.svg"); }
.page-head.field-navy  { background-image: url("/assets/img/brand/mark-quiet-dark.svg"); }
@media (max-width: 48rem) {
  .page-head { --pm: 13rem; }
}

/* ------------------------------------------------------------------
   3. The stitched field behind the closing invitation: the mark on a
      half-drop grid, tone on tone, one in nine carrying the jacaranda
      arm and dot. A soft clearing keeps the type on plain ground.
   ------------------------------------------------------------------ */
.cta-band.field-deep {
  background:
    radial-gradient(ellipse 60% 72% at 50% 50%, var(--charcoal-deep) 58%, color-mix(in srgb, var(--charcoal-deep) 0%, transparent) 100%),
    url("/assets/img/brand/field-stitched-dark.svg") 0 0 / 420px 480px repeat,
    var(--charcoal-deep);
}

/* ------------------------------------------------------------------
   4. The lattice as a selvedge: a strip where the closing band meets
      the footer, marks tip to tip.
   ------------------------------------------------------------------ */
.site-footer { position: relative; border-top: 0; padding-top: calc(clamp(3rem, 7vw, var(--space-2xl)) + 2.25rem); }
.site-footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 2.25rem;
  background: url("/assets/img/brand/lattice-dark.svg") 0 50% / 36px 36px repeat-x;
  opacity: 0.9;
}

/* ------------------------------------------------------------------
   5. The corner bite, sized to the element: small cards keep the
      guide's 26px dot; panels take a larger one.
   ------------------------------------------------------------------ */
.science-card               { --bite-r: 30px; }
.ledger__effect             { --bite-r: 24px; }
.contrast__col--work        { --bite-r: clamp(30px, 3.2vw, 44px); }
.system__base               { --bite-r: clamp(30px, 3.4vw, 50px); }
.booking__panel             { --bite-r: clamp(30px, 3.4vw, 48px); }
.tabs.is-tabbed             { --bite-r: clamp(40px, 4.6vw, 68px); }
.tabs:not(.is-tabbed) .tabs__panel,
.tabs:not(.is-tabbed) .tabs__cta { --bite-r: 30px; }

/* ------------------------------------------------------------------
   6. The quiet mark in the tabbed panel, in place of the small brain:
      cropped by the panel's top-right corner.
   ------------------------------------------------------------------ */
@media (min-width: 56rem) {
  .tabs.is-tabbed .tabs__mark {
    display: block;
    position: absolute;
    width: clamp(16rem, 26vw, 24rem);
    right: calc(clamp(16rem, 26vw, 24rem) * -0.34);
    top: calc(clamp(16rem, 26vw, 24rem) * -0.34);
    z-index: 0;
    pointer-events: none;
  }
  .tabs.is-tabbed .tabs__mark img { display: block; width: 100%; height: auto; }
}
@media (min-width: 80rem) {
  .tabs.is-tabbed .tabs__panel-title { padding-right: 0; }
}

/* ------------------------------------------------------------------
   7. The arm rule leads the eyebrow labels: a bar ending in the cut
      around a dot, in place of the plain hairline.
   ------------------------------------------------------------------ */
.eyebrow::before {
  width: 1.9rem;
  height: 0.34rem;
  background: currentColor;
  opacity: 1;
  -webkit-mask: url("/assets/img/brand/arm-rule.svg") center / contain no-repeat;
          mask: url("/assets/img/brand/arm-rule.svg") center / contain no-repeat;
}

/* ------------------------------------------------------------------
   8. The old four-pointed stars, rebuilt from the mark.
      Quote stars become the marker (the mark at text size, as the
      guide's quote marker). Threads end in the arm rule's dot, set in
      a cut of the ground. List bullets become the dot bullet.
   ------------------------------------------------------------------ */
.rail-quote__star, .science__star, .voices__star {
  display: inline-block;
  width: 0.95em; height: 0.95em;
  color: transparent;
  overflow: hidden;
  background: url("/assets/img/brand/marker-on-light.svg") center / contain no-repeat;
  margin-top: 0.3em;
}
.field-navy .rail-quote__star, .field-navy .science__star, .field-navy .voices__star {
  background-image: url("/assets/img/brand/marker-on-dark.svg");
}

/* Thread ends: a dot in a cut of the ground (charcoal on light, jacaranda on charcoal) */
.stages::after, .ladder::after, .cascade__end::after {
  content: "";
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--charcoal);
  box-shadow: 0 0 0 0.35rem var(--mist);
  font-size: 0;
}
.cascade__end::after { right: -0.35rem; }
.ladder::after { right: 0; }
.field-navy .stages::after, .field-navy .ladder::after, .field-navy .cascade__end::after {
  background: var(--jacaranda);
  box-shadow: 0 0 0 0.35rem var(--charcoal);
}
.timeline__star {
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--charcoal);
  box-shadow: 0 0 0 0.35rem var(--mist);
  color: transparent; font-size: 0;
  margin-left: 0.6rem;
}
/* Session nodes: the dot, not the old corner square */
.timeline__node { border-radius: 50%; background: var(--jacaranda); }

/* List bullets: the dot bullet (a dot, a cut, a short arm) */
.buyers__list li::before {
  content: "";
  top: 0.62em;
  width: 0.9em; height: 0.36em;
  font-size: inherit;
  background:
    radial-gradient(circle at 0.18em 50%, var(--charcoal) 0.17em, transparent 0.18em),
    linear-gradient(var(--charcoal), var(--charcoal)) right center / 0.42em 0.12em no-repeat;
}
.field-navy .buyers__list li::before {
  background:
    radial-gradient(circle at 0.18em 50%, var(--jacaranda) 0.17em, transparent 0.18em),
    linear-gradient(var(--white), var(--white)) right center / 0.42em 0.12em no-repeat;
}

/* ------------------------------------------------------------------
   9. House rule: no thin vertical bars beside quotes. A quote is
      marked by the marker above it.
   ------------------------------------------------------------------ */
.testimonial { border-left: 0; padding-left: 0; }
.testimonial::before {
  content: "";
  display: block;
  width: 1.4rem; height: 1.4rem;
  margin-bottom: var(--space-s);
  background: url("/assets/img/brand/marker-on-light.svg") center / contain no-repeat;
}
.field-navy .testimonial::before { background-image: url("/assets/img/brand/marker-on-dark.svg"); }

/* ------------------------------------------------------------------
   10. The 404: the seam, two grounds split at the arm's angle.
   ------------------------------------------------------------------ */
.error-page.field-navy {
  background: linear-gradient(135deg, var(--charcoal) 0 80%, var(--jacaranda) 80% 100%);
}

/* ------------------------------------------------------------------
   11. The homepage reframe (21 Oct 2026; round 2). Everything below
       is scoped to .page-home: no other page changes.
   ------------------------------------------------------------------ */

/* The brush underline (hand-drawn: one heavy stroke, two dry trailing
   strokes). It sits behind the words and breaks with them across lines.
   Underlined words match their underline where the ground allows; on
   charcoal the words stay white (no purple text on dark). */
.brush {
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.42em;
  padding: 0 0.05em 0.04em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.brush--jacaranda { background-image: url("/assets/img/brand/brush-jacaranda.svg"); }
.brush--azure     { background-image: url("/assets/img/brand/brush-azure.svg"); }
.brush--sunshine  { background-image: url("/assets/img/brand/brush-sunshine.svg"); }
.brush--lawn      { background-image: url("/assets/img/brand/brush-lawn.svg"); }
.brush--charcoal  { background-image: url("/assets/img/brand/brush-charcoal.svg"); background-size: 100% 0.32em; padding-bottom: 0.1em; }

/* Hero: the statement, its line, and the three cards, all on charcoal */
.page-home .hero { min-height: 0; align-items: flex-start; padding-block: clamp(4.5rem, 9vw, 7rem) clamp(3.5rem, 7vw, 5.5rem); }
.page-home .hero__viz { top: calc(var(--hm) * -0.3); opacity: 0.6; }
.page-home .hero__lockup { aspect-ratio: auto; }
.page-home .hero__title { position: static; font-size: clamp(2rem, 1rem + 4.4vw, 4.6rem); line-height: 1.12; }
.page-home .hero__title .brush { color: var(--on-charcoal); }
.page-home .hero__lede {
  position: relative; z-index: 2;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  margin-left: auto;
  margin-right: 7.3%;
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
  line-height: 1.4;
  color: var(--on-charcoal-soft);
  max-width: 34ch;
  text-wrap: balance;
}
@media (max-width: 60rem) { .page-home .hero__lede { margin-left: 0; margin-right: 0; } }
.page-home .hero__offers { margin-top: clamp(3.5rem, 8vw, 6.5rem); }
@media (max-width: 48rem) {
  .page-home .hero__title { white-space: normal; font-size: clamp(2rem, 9vw, 2.75rem); }
}

/* The three cards on accent grounds: Training in yesterday's sunshine,
   Systems in azure, Research in lawn, charcoal type on all three. The
   bite's dot is white; its gap is the charcoal ground showing through. */
.page-home .offer-card { --bite-dot: var(--white); color: var(--charcoal); }
.page-home .offer-card--training { background-color: var(--sunshine); }
.page-home .offer-card--systems  { background-color: var(--azure); }
.page-home .offer-card--research { background-color: var(--lawn); }
.offer-card__eyebrow {
  justify-self: start;
  align-self: start;
  width: fit-content;
  padding: 0.35em 0.75em 0.3em;
  background: var(--charcoal);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
  border-radius: 0 0.5rem 0 0.5rem;
  margin-bottom: var(--space-3xs);
}
.page-home .offer-card__title { font-size: var(--step-1); line-height: 1.25; color: var(--charcoal); }
.page-home .offer-card__summary { color: var(--charcoal); }
.page-home .offer-card .arrow-link { color: var(--charcoal); }
.page-home .offer-card__media { height: clamp(9rem, 13vw, 11.5rem); }

/* Scientists of the human mind, on Mist: the text, then Ryan and David
   as person cards. The azure brush is the section's one accent, so the
   role labels are charcoal, not azure text on Mist (2.4:1). */
.home-mind__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.home-mind__text .lead { margin-top: var(--space-m); color: var(--slate); }
.home-mind__people { display: grid; gap: var(--space-l); }
.page-home .home-mind .person__role { color: var(--charcoal); }
.page-home .home-mind .person__cred { color: var(--slate); }
@media (max-width: 60rem) { .home-mind__grid { grid-template-columns: 1fr; } }

/* Who we work with: one row per audience. The heading, body and links
   on one side; on the other a pull quote (the marker above it, as the
   guide marks quotes) and three bullets (the dot bullet). */
.segment-rows { margin-top: clamp(2rem, 5vw, 3.5rem); display: grid; }
.segment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-l) clamp(2rem, 6vw, 6rem);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.segment-row { --row: var(--sunshine); }
.segment-row:nth-child(2) { --row: var(--azure); }
.segment-row:nth-child(3) { --row: var(--lawn); }
.segment__name .brush { color: var(--on-charcoal); }   /* white words, the coloured brush beneath (Ryan, 21 Oct 2026) */
.segment-row .segment__links .arrow-link { color: var(--row); }
.segment-row__main { display: grid; gap: var(--space-s); align-content: start; }
.segment__name { font-size: var(--step-2); line-height: 1.2; }
.segment__body { color: var(--on-charcoal-soft); font-size: var(--step-0); line-height: 1.65; }
.segment__links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); margin-top: var(--space-2xs); }
.segment-row__side { display: grid; gap: var(--space-m); align-content: start; }
.segment__quote {
  position: relative;
  padding-left: 3rem;
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--row);   /* the quote takes its audience's underline colour (Ryan, 21 Oct 2026) */
  text-wrap: balance;
}
.segment__quote::before {
  content: "";
  position: absolute; left: 0; top: 0.2em;
  width: 1.75rem; height: 1.75rem;
  background: url("/assets/img/brand/marker-four.svg") center / contain no-repeat;
}
.segment__bullets { padding-left: 3rem; }
.segment__bullets { list-style: none; display: grid; gap: var(--space-s); }
.segment__bullets li {
  position: relative;
  padding-left: 1.6em;
  color: var(--on-charcoal-soft);
  font-size: var(--step--1);
  line-height: 1.6;
}
.segment__bullets li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 0.9em; height: 0.36em;
  background:
    radial-gradient(circle at 0.18em 50%, var(--white) 0.17em, transparent 0.18em),
    linear-gradient(var(--white), var(--white)) right center / 0.42em 0.12em no-repeat;
}
@media (max-width: 52rem) { .segment-row { grid-template-columns: 1fr; } }

/* The cards' photos tinted to their card, subtly: a wash of the card's
   accent multiplied over the black-and-white photo at partial strength,
   so the photo stays light and the colour only warms it (Ryan, 21 Oct 2026). */
.page-home .offer-card { --tint: var(--sunshine); }
.page-home .offer-card--systems  { --tint: var(--azure); }
.page-home .offer-card--research { --tint: var(--lawn); }
.page-home .offer-card::before {
  content: "";
  position: absolute; z-index: 1;
  left: 0; right: 0; top: 0;
  height: clamp(9rem, 13vw, 11.5rem);   /* the photo's height */
  background: var(--tint);
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
}

/* ------------------------------------------------------------------
   12. The homepage, light lead (locked in by Ryan, 21 Oct 2026): its grounds reversed
       from the dark first version. Hero on Mist, scientists on
       charcoal, who we work with on white, so it parts from the Mist
       logo band that follows.
   ------------------------------------------------------------------ */
.page-home--reversed .hero__title .brush { color: var(--charcoal); }
.page-home--reversed .hero__lede { color: var(--slate); }
.page-home--reversed .hero__viz { opacity: 1; }
/* On Mist a white dot would vanish, so the bite's dot turns charcoal */
.page-home--reversed .offer-card { --bite-dot: var(--charcoal); }

.page-home--reversed .home-mind__text .lead { color: var(--on-charcoal-soft); }
.page-home--reversed .home-mind .person__role { color: var(--azure); }
.page-home--reversed .home-mind .person__cred { color: var(--on-charcoal-soft); }

.page-home--reversed .home-who { background: var(--white); }
.page-home--reversed .segment__name .brush { color: var(--charcoal); }
.page-home--reversed .segment__body { color: var(--slate); }
/* The accents fail as text on white (sunshine 1.7:1, azure 2.4:1, lawn
   2.6:1), so the quotes go charcoal and the links deep jacaranda */
.page-home--reversed .segment__quote { color: var(--charcoal); }
.page-home--reversed .segment-row .segment__links .arrow-link { color: var(--deep-jacaranda); }
.page-home--reversed .segment__bullets li { color: var(--slate); }
.page-home--reversed .segment__bullets li::before {
  background:
    radial-gradient(circle at 0.18em 50%, var(--charcoal) 0.17em, transparent 0.18em),
    linear-gradient(var(--charcoal), var(--charcoal)) right center / 0.42em 0.12em no-repeat;
}

/* The homepage (light lead): the pull quote inside a horizontal arm (Ryan, 21 Oct 2026).
   A small dot leads; a curved gap is cut around it; the arm runs on as the
   quote's ground, in its audience's colour, charcoal type inside (9.8, 6.9
   and 6.4 to 1). One element: the mask keeps the dot's disc and cuts the
   ellipse around it, so the dot and the arm are always the same colour. */
.page-home--reversed .segment__quote {
  --qd: 0.7rem;                      /* the dot's radius */
  --qc: calc(var(--qd) * 2.3);       /* the cut, measured across from the dot's centre */
  padding: 1.1rem 1.6rem 1.15rem calc(var(--qd) + var(--qc) + 1.1rem);
  background: var(--row);
  color: var(--charcoal);
  -webkit-mask:
    radial-gradient(circle var(--qd) at var(--qd) 50%, #000 98%, transparent 100%),
    radial-gradient(ellipse var(--qc) 64% at var(--qd) 50%, transparent 98%, #000 100%);
          mask:
    radial-gradient(circle var(--qd) at var(--qd) 50%, #000 98%, transparent 100%),
    radial-gradient(ellipse var(--qc) 64% at var(--qd) 50%, transparent 98%, #000 100%);
}
.page-home--reversed .segment__quote::before { content: none; }
.page-home--reversed .segment__bullets { padding-left: calc(0.7rem + 1.61rem + 1.1rem); }
/* The homepage (light lead): the bullets' dot and arm take their audience's colour (Ryan, 21 Oct 2026) */
.page-home--reversed .segment__bullets li::before {
  background:
    radial-gradient(circle at 0.18em 50%, var(--row) 0.17em, transparent 0.18em),
    linear-gradient(var(--row), var(--row)) right center / 0.42em 0.12em no-repeat;
}
/* The homepage (light lead): bullets a step larger, and the mark larger against the type (Ryan, 21 Oct 2026) */
.page-home--reversed .segment__bullets li { font-size: var(--step-0); padding-left: 2.1em; }
.page-home--reversed .segment__bullets li::before {
  top: 0.5em;
  width: 1.4em; height: 0.6em;
  background:
    radial-gradient(circle at 0.3em 50%, var(--row) 0.29em, transparent 0.3em),
    linear-gradient(var(--row), var(--row)) right center / 0.62em 0.2em no-repeat;
}

/* ------------------------------------------------------------------
   13. Site-wide: the menu (21 Oct 2026). Training is a link to its
       landing page with its own caret button for the formats: hover or
       focus opens the panel on desktop; on touch and in the phone
       drawer the caret toggles it and the word goes to the page.
   ------------------------------------------------------------------ */
.nav__item--split { display: inline-flex; align-items: center; gap: 0.15rem; }
.nav__caret-btn {
  background: transparent; border: 0; cursor: pointer;
  color: var(--on-charcoal);
  padding: 0.4em 0.3em;
  display: inline-flex; align-items: center;
}
.nav__link.is-section-active::after { transform: scaleX(1); }
.nav__link.is-section-active { color: var(--white); }
@media (max-width: 48rem) {
  .nav__item--split { display: flex; flex-wrap: wrap; align-items: center; }
  .nav__item--split .nav__submenu { flex-basis: 100%; }
  .nav__caret-btn { padding: 0.5em 0.7em; font-size: var(--step-1); }
}

/* ------------------------------------------------------------------
   14. The training landing page (/training/): the three format cards
       in the homepage's treatment. Accent grounds in the homepage's
       order, charcoal type, the photo in monochrome under a wash of its
       card's colour, and the corner bite (its dot charcoal here, since
       the gap shows the Mist ground and a white dot would vanish).
   ------------------------------------------------------------------ */
.page-training .ladder .offer-card {
  --bite-dot: var(--charcoal);
  --tint: var(--sunshine);
  background-color: var(--sunshine);
  color: var(--charcoal);
}
.page-training .ladder .offer-card[href*="/one-to-one/"] { --tint: var(--azure); background-color: var(--azure); }
.page-training .ladder .offer-card[href*="/talks/"]      { --tint: var(--lawn);  background-color: var(--lawn); }
.page-training .ladder .offer-card__media { filter: grayscale(1) contrast(1.08); }
.page-training .ladder .offer-card::before {
  content: "";
  position: absolute; z-index: 1;
  left: 0; right: 0; top: 0;
  height: clamp(7.5rem, 10vw, 9.5rem);   /* the photo's height */
  background: var(--tint);
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
}
.page-training .ladder .offer-card__title,
.page-training .ladder .offer-card__summary,
.page-training .ladder .offer-card .arrow-link { color: var(--charcoal); }

/* ------------------------------------------------------------------
   15. The training banners and the Automation and Research heads: the
       card's colour as the ground, the big mark over it in a tone of
       that colour, cropped by the top and right edges as in the hero.
       The banner photos are hidden, not removed: deleting the two
       .banner--accent .banner__media lines brings them back.
   ------------------------------------------------------------------ */
.banner--sunshine, .page-head--sunshine { --accent: var(--sunshine); }
.banner--azure,    .page-head--azure    { --accent: var(--azure); }
.banner--lawn,     .page-head--lawn     { --accent: var(--lawn); }
.banner--accent, .page-head--accent {
  --bm: clamp(26rem, 48vw, 46rem);
  position: relative;
  overflow: hidden;
  background: var(--accent);
  color: var(--charcoal);
}
.banner--accent::before, .page-head--accent::before {
  content: "";
  position: absolute; z-index: 1;
  width: var(--bm); height: var(--bm);
  right: calc(var(--bm) * -0.18);
  top: calc(var(--bm) * -0.34);
  background: url("/assets/img/brand/mark-mono.svg") center / contain no-repeat;
  opacity: 0.1;
  pointer-events: none;
}
.banner--accent .banner__media,
.banner--accent::after { display: none; }   /* the photo and its fade to Mist */
.banner.banner--accent { min-height: clamp(14rem, 22vw, 20rem); background: var(--accent); }
.banner--accent + .section--after-banner { padding-top: clamp(3rem, 7vw, 5.5rem); }
.page-head.page-head--accent { background-image: none; background-color: var(--accent); }
.page-head--accent > .container { position: relative; z-index: 2; }
.page-head--accent .page-head__intro { color: var(--charcoal); }
.page-head--accent .placeholder { background-color: color-mix(in srgb, var(--white) 55%, transparent); border-color: rgba(28, 33, 40, 0.25); color: var(--charcoal); }
@media (max-width: 48rem) { .banner--accent, .page-head--accent { --bm: 22rem; } }

/* ------------------------------------------------------------------
   16. Site-wide: with Training, Automation and Research and evaluation
       in the menu, the bar no longer fits one line below about 1090px,
       so the phone drawer takes over up to 68rem (the drawer's own
       rules from main.css, at the wider breakpoint).
   ------------------------------------------------------------------ */
@media (max-width: 76rem) {
  /* A blurred header would be the fixed drawer's containing block; go solid on phones. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--charcoal); }
  .nav__toggle { display: grid; place-items: center; }
  .nav__menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(20rem, 82vw);
    flex-direction: column;
    align-items: flex-start;
    /* Top-aligned: a centred column taller than the viewport is unreachable at the top. */
    justify-content: flex-start;
    gap: var(--space-l);
    padding: 6rem var(--space-xl) var(--space-2xl);
    margin: 0;
    background: var(--charcoal-deep);
    border-left: 1px solid var(--rule-on-charcoal);
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    overflow-y: auto;
  }
  .nav__menu.is-open { transform: translateX(0); }
  .nav__link { font-size: var(--step-1); }
  .nav__parent { font-size: var(--step-1); }
  /* No hover on touch: the panel expands in flow when tapped. */
  .nav__submenu {
    position: static;
    transform: none;
    margin: var(--space-s) 0 0;
    padding: 0 0 0 var(--space-s);
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    gap: var(--space-m);
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .nav__submenu.is-open { display: flex; }
  .nav__sublink { padding: 0; white-space: normal; line-height: 1.35; }
  .nav__actions { margin-left: auto; gap: var(--space-xs); }
  .nav__book { padding: 0.55em 0.85em; font-size: var(--step--1); }
  body.nav-open { overflow: hidden; }
  /* Backdrop */
  .nav__scrim {
    position: fixed; inset: 0;
    background: rgba(8,10,13,.5);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
    z-index: 90;
  }
  .nav__scrim.is-open { opacity: 1; visibility: visible; }
  .nav__item--split { display: flex; flex-wrap: wrap; align-items: center; }
  .nav__item--split .nav__submenu { flex-basis: 100%; }
  .nav__caret-btn { padding: 0.5em 0.7em; font-size: var(--step-1); }
}

/* ------------------------------------------------------------------
   17. Site-wide: the homepage's decisions carried across the developed
       pages (21 Oct 2026).
   ------------------------------------------------------------------ */

/* A white ground, so light sections can alternate Mist and white as on the homepage */
.field-white { background: var(--white); }

/* The page's colour. Organisation training yellow, One-to-one azure,
   Talks lawn: shapes and accent text on charcoal take it; accent text on
   light grounds goes charcoal, since none of the three reads as text on
   Mist or white. Pages without one keep jacaranda shapes, deep
   jacaranda text on light and azure on charcoal. */
.page-sunshine { --page: var(--sunshine); }
.page-azure    { --page: var(--azure); }
.page-lawn     { --page: var(--lawn); }
body.page-accent {
  --jacaranda: var(--page);
  --link-on-charcoal: var(--page);
  --deep-jacaranda: var(--charcoal);
  --rule-jacaranda: color-mix(in srgb, var(--page) 70%, transparent);
}

/* Pull quotes in the homepage's arm: a dot, the cut, then the quote
   inside the arm in the page's colour (jacaranda where a page has none),
   charcoal italic. Jacaranda takes charcoal only as large type (4.4:1),
   so these stay large. */
:is(.field-light, .field-navy, .field-deep) .payoff-line,
:is(.field-light, .field-navy, .field-deep) .rail-quote {
  --qd: 0.65rem;
  --qc: calc(var(--qd) * 2.3);
  display: block;
  width: fit-content;
  max-width: min(100%, 32rem);
  padding: 1rem 1.5rem 1.05rem calc(var(--qd) + var(--qc) + 1rem);
  background: var(--page, var(--jacaranda));
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.35;
  text-wrap: balance;
  -webkit-mask:
    radial-gradient(circle var(--qd) at var(--qd) 50%, #000 98%, transparent 100%),
    radial-gradient(ellipse var(--qc) 64% at var(--qd) 50%, transparent 98%, #000 100%);
          mask:
    radial-gradient(circle var(--qd) at var(--qd) 50%, #000 98%, transparent 100%),
    radial-gradient(ellipse var(--qc) 64% at var(--qd) 50%, transparent 98%, #000 100%);
}
:is(.field-light, .field-navy, .field-deep) .rail-quote { font-size: var(--step-1); }
.rail-quote .rail-quote__star { display: none; }
.rail-quote p, .rail-quote em { color: inherit; font-style: inherit; }

/* Bullets: the homepage's dot-and-arm, in the page's colour, larger against the type */
.buyers__list li::before,
.audiences .segment__bullets li::before {
  content: "";
  top: 0.5em;
  width: 1.4em; height: 0.6em;
  background:
    radial-gradient(circle at 0.3em 50%, var(--jacaranda) 0.29em, transparent 0.3em),
    linear-gradient(var(--jacaranda), var(--jacaranda)) right center / 0.62em 0.2em no-repeat;
}
.buyers__list li { padding-left: 2em; }
/* The checklist ticks in "This work" become the same mark; the alternative keeps its empty rings */
.checklist__tick {
  width: 1.4em; height: 0.6em;
  margin-top: 0.5em;
  border-radius: 0;
  background:
    radial-gradient(circle at 0.3em 50%, var(--jacaranda) 0.29em, transparent 0.3em),
    linear-gradient(var(--jacaranda), var(--jacaranda)) right center / 0.62em 0.2em no-repeat;
}
.checklist__tick svg { display: none; }

/* One-to-one: the three audiences shown at once, as the homepage's rows, on Mist */
.audiences { margin-top: clamp(1.5rem, 4vw, 3rem); }
.audiences .segment-row { padding-block: clamp(1.75rem, 3.5vw, 2.5rem); }
.audiences .segment__body { color: var(--slate); }
.audiences .segment__bullets { padding-left: 0; }
.audiences .segment__bullets li { color: var(--on-light); font-size: var(--step-0); padding-left: 2.1em; }
.audiences__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-m) var(--space-l);
  margin-top: var(--space-m);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--charcoal);
  color: var(--on-charcoal);
  border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
}
.audiences__cta-lead { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25; }

/* Photo cards everywhere get the homepage's treatment: accent grounds keyed
   to the offering, monochrome photo under a 40% wash, charcoal type, and
   the bite with a charcoal dot (these sit on light grounds). */
body:not(.page-home) .offer-card {
  --bite-dot: var(--charcoal);
  --tint: var(--sunshine);
  background-color: var(--sunshine);
  color: var(--charcoal);
}
body:not(.page-home) .offer-card[href*="/one-to-one/"] { --tint: var(--azure); background-color: var(--azure); }
body:not(.page-home) .offer-card[href*="/talks/"]      { --tint: var(--lawn);  background-color: var(--lawn); }
body:not(.page-home) .offer-card__media { filter: grayscale(1) contrast(1.08); }
body:not(.page-home) .offer-card::before {
  content: "";
  position: absolute; z-index: 1;
  left: 0; right: 0; top: 0;
  height: clamp(7.5rem, 10vw, 9.5rem);
  background: var(--tint);
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
}
body:not(.page-home) .offer-card__title,
body:not(.page-home) .offer-card__summary,
body:not(.page-home) .offer-card .arrow-link { color: var(--charcoal); }

/* The Science cards: the same treatment, in order yellow, azure, lawn,
   then yellow again (jacaranda takes charcoal only as large type) */
.science-grid { filter: none; }
.science-card { --bite-dot: var(--charcoal); --tint: var(--sunshine); background-color: var(--sunshine); color: var(--charcoal); }
.science-grid > :nth-child(2) { --tint: var(--azure); background-color: var(--azure); --bite-dot: var(--charcoal); }
.science-grid > :nth-child(3) { --tint: var(--lawn);  background-color: var(--lawn);  --bite-dot: var(--charcoal); }
.science-grid > :nth-child(4) { --tint: var(--sunshine); background-color: var(--sunshine); --bite-dot: var(--charcoal); }
.science-card__media { filter: grayscale(1) contrast(1.08); }
.science-card::before {
  content: "";
  position: absolute; z-index: 1;
  left: 0; right: 0; top: 0;
  height: clamp(9rem, 13vw, 12rem);
  background: var(--tint);
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
}
.science-card__meta, .science-card__title, .science-card__hook, .science-card .arrow-link { color: var(--charcoal); }
/* The kicker is the card's one-word-style label: the homepage card tag */
.science-card__kicker {
  justify-self: start; align-self: start; width: fit-content;
  padding: 0.35em 0.75em 0.3em;
  background: var(--charcoal); color: var(--white);
  border-radius: 0 0.5rem 0 0.5rem;
}
.field-light .article-head__sub { color: var(--deep-jacaranda); }

/* Components first built for charcoal, now on light grounds */
.field-light .prose p { color: var(--on-light); }
.field-light .creed__prose a { color: var(--deep-jacaranda); }
.field-light .bignum__label, .field-light .bignum__unit { color: var(--slate); }
.field-light .bignum__value { color: var(--on-light); }
.field-light .bignum__note { color: var(--slate); }
.field-light .article-head__meta { color: var(--slate); }
.field-light .article-head__meta strong { color: var(--on-light); }
.field-light .direct__label,
.field-light .direct__row dt { color: var(--slate); }
.field-light .direct .person__role { color: var(--charcoal); }
.field-light .direct .person__cred { color: var(--slate); }
.field-light .direct__row { border-color: var(--rule-on-light); }
.field-light .direct__row:last-child { border-bottom-color: var(--rule-on-light); }
.field-light .direct__row dd, .field-light .direct__row dd a { color: var(--on-light); }
.audiences .segment__name .brush { color: var(--on-light); }
.page-head.page-head--accent .placeholder { color: var(--charcoal); }

/* Arm quotes never drop below 24px, so charcoal on jacaranda (4.4:1) is always large type */
:is(.field-light, .field-navy, .field-deep) .payoff-line { font-size: max(1.5rem, var(--step-2)); }
:is(.field-light, .field-navy, .field-deep) .rail-quote  { font-size: max(1.5rem, var(--step-1)); }
/* On a page with its own colour, every corner bite's dot takes that colour */
body.page-accent :is(.system__base, .ledger__effect, .contrast__col--work, .ledger__row .ledger__effect) { --bite-dot: var(--page); }
/* Team: the role above each name, as on the homepage's person cards (charcoal on light, azure on charcoal) */
.bio__role { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.field-light .bio__role { color: var(--charcoal); }
.field-navy .bio__role { color: var(--azure); }

/* ------------------------------------------------------------------
   18. Content v2 (22 Oct 2026): who we work with, the audience pages,
       the full Automation and Research pages. Built from the existing
       parts: the accent heads, the corner bite, the arm quote, the
       dot-and-arm bullet, the stages, the creed.
   ------------------------------------------------------------------ */

/* The charcoal head: the big mark in charcoal-raised, cropped as on the accent heads */
.page-head--charcoal { --accent: var(--charcoal); color: var(--on-charcoal); }
.page-head--charcoal::before {
  background: var(--charcoal-raised);
  -webkit-mask: url("/assets/img/brand/mark-mono.svg") center / contain no-repeat;
          mask: url("/assets/img/brand/mark-mono.svg") center / contain no-repeat;
  opacity: 1;
}
.page-head--charcoal .page-head__title { color: var(--on-charcoal); }
.page-head--charcoal .page-head__intro { color: var(--on-charcoal-soft); }
.page-head--accent .page-head__title { max-width: 22ch; }
.page-audience .page-head--accent, .page-offer .page-head--accent { padding-bottom: clamp(3rem, 7vw, 5rem); }

/* A section's opening: the heading, and a lead beneath where there is one */
.v2-head { display: grid; gap: var(--space-m); margin-bottom: clamp(2rem, 4.5vw, 3.25rem); }
.v2-head .display-m { max-width: 26ch; }
.section-lead { max-width: 58ch; }
.field-light .section-lead { color: var(--slate); }

/* The weighted cards. Size follows importance: not-for-profits across the
   full width in yellow; organisations at half width in charcoal;
   professionals and schools at a quarter each in white. All on Mist. */
.aud-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.aud-card,
.panel-card {
  --bite-r: 28px;
  --bite-cut: calc(var(--bite-r) * 1.45);
  --bite-dot: var(--charcoal);
  position: relative;
  overflow: clip;
  -webkit-mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px));
          mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px));
  border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
}
.aud-card::after,
.panel-card::after {
  content: "";
  position: absolute;
  right: calc(var(--bite-r) * -1);
  bottom: calc(var(--bite-r) * -1);
  width: calc(var(--bite-r) * 2);
  height: calc(var(--bite-r) * 2);
  border-radius: 50%;
  background: var(--bite-dot);
  pointer-events: none;
}
.aud-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: clamp(1.5rem, 2.8vw, 2.5rem) clamp(1.5rem, 2.8vw, 2.5rem) clamp(2.25rem, 3.6vw, 3rem);
  background: var(--white);
  color: var(--charcoal);
  text-decoration: none;
  transition: transform 0.35s var(--ease);
}
.aud-card:hover { transform: translateY(-6px); }
.aud-card__title { font-size: var(--step-1); line-height: 1.22; color: inherit; }
.aud-card__body { color: var(--slate); font-size: var(--step--1); line-height: 1.6; }
.aud-card__more { margin-top: auto; padding-top: var(--space-s); color: inherit; }

.aud-card--lead {
  grid-column: 1 / -1;
  --bite-r: clamp(30px, 3.4vw, 46px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-l) clamp(2rem, 6vw, 6rem);
  padding: clamp(2rem, 4.5vw, 4rem);
  background: var(--sunshine);
}
.aud-card--lead .aud-card__main { display: flex; flex-direction: column; gap: var(--space-m); }
.aud-card--lead .aud-card__title { font-size: var(--step-3); line-height: 1.12; }
.aud-card--lead .aud-card__body { color: var(--charcoal); font-size: var(--step-0); line-height: 1.65; }
.aud-card__side { display: grid; gap: var(--space-m); align-content: start; }

.aud-card--mid {
  grid-column: span 2;
  --bite-r: clamp(28px, 3vw, 38px);
  padding: clamp(1.75rem, 3.4vw, 3rem);
  background: var(--charcoal);
  color: var(--on-charcoal);
}
.aud-card--mid .aud-card__title { font-size: var(--step-2); }
.aud-card--mid .aud-card__body { color: var(--on-charcoal-soft); font-size: var(--step-0); line-height: 1.65; }

/* The arm quote inside a card: white arm, charcoal italic, as the homepage
   arm with the grounds turned round (the card is the colour, the arm white) */
.aud-card__quote {
  --qd: 0.6rem;
  --qc: calc(var(--qd) * 2.3);
  width: fit-content;
  max-width: 100%;
  padding: 0.95rem 1.4rem 1rem calc(var(--qd) + var(--qc) + 1rem);
  background: var(--white);
  color: var(--charcoal);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.35;
  text-wrap: balance;
  -webkit-mask:
    radial-gradient(circle var(--qd) at var(--qd) 50%, #000 98%, transparent 100%),
    radial-gradient(ellipse var(--qc) 64% at var(--qd) 50%, transparent 98%, #000 100%);
          mask:
    radial-gradient(circle var(--qd) at var(--qd) 50%, #000 98%, transparent 100%),
    radial-gradient(ellipse var(--qc) 64% at var(--qd) 50%, transparent 98%, #000 100%);
}
.aud-card--lead .aud-card__quote { font-size: var(--step-2); }
.aud-card--mid .aud-card__quote { margin-top: var(--space-2xs); }
.aud-card__bullets {
  list-style: none; display: grid; gap: var(--space-s);
  padding-left: calc(0.6rem + 1.38rem + 1rem);
}
.aud-card__bullets li { position: relative; padding-left: 2.1em; color: var(--charcoal); line-height: 1.55; }
.aud-card__bullets li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 1.4em; height: 0.6em;
  background:
    radial-gradient(circle at 0.3em 50%, var(--charcoal) 0.29em, transparent 0.3em),
    linear-gradient(var(--charcoal), var(--charcoal)) right center / 0.62em 0.2em no-repeat;
}
@media (max-width: 64rem) {
  .aud-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aud-card--small { grid-column: span 1; }
}
@media (max-width: 52rem) {
  .aud-card--lead { grid-template-columns: 1fr; }
  .aud-card__bullets { padding-left: 0; }
}
@media (max-width: 40rem) {
  .aud-cards { grid-template-columns: 1fr; }
  .aud-card--mid, .aud-card--small { grid-column: auto; }
}

/* The homepage: the cards sit on Mist, so the logo band after them takes white */
.page-home--reversed .home-who--v2 { background: var(--mist); }

/* Automation, who it's for: the four as one row, not-for-profits leading */
.aud-cards--row { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
.aud-cards--row .aud-card--lead {
  grid-column: auto;
  display: flex; flex-direction: column; gap: var(--space-s);
  padding: clamp(1.5rem, 2.8vw, 2.5rem) clamp(1.5rem, 2.8vw, 2.5rem) clamp(2.25rem, 3.6vw, 3rem);
  --bite-r: 28px;
}
.aud-cards--row .aud-card--lead .aud-card__title { font-size: var(--step-2); }
.aud-cards--row .aud-card--small { background: var(--mist); }
.aud-cards--row .btn__arrow { font-size: var(--step-1); }
@media (max-width: 64rem) { .aud-cards--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .aud-cards--row .aud-card--lead { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .aud-cards--row { grid-template-columns: 1fr; } }

/* The offer blocks on the audience pages: one row per offer, each in its
   offer's colour (the tag, the brush), linking to the offer page */
.offer-blocks { display: grid; }
.offer-block {
  --offer: var(--sunshine);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-m) clamp(2rem, 6vw, 6rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--rule-on-light);
}
.offer-block:last-child { border-bottom: 1px solid var(--rule-on-light); }
.offer-block--automation { --offer: var(--azure); }
.offer-block--research   { --offer: var(--lawn); }
.offer-block__head { display: grid; gap: var(--space-s); align-content: start; }
.offer-block__tag {
  width: fit-content;
  padding: 0.35em 0.75em 0.3em;
  background: var(--offer);
  color: var(--charcoal);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
  border-radius: 0 0.5rem 0 0.5rem;
}
.offer-block__title { font-size: var(--step-2); line-height: 1.2; }
.offer-block__title .brush { color: var(--on-light); }
.offer-block__body { display: grid; gap: var(--space-s); align-content: start; }
.offer-block__body p { color: var(--on-light); font-size: var(--step-0); line-height: 1.65; }
.offer-block__links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); }
.offer-block__links .arrow-link { color: var(--charcoal); }
.offer-block__links .arrow-link .btn__arrow { color: var(--charcoal); }
@media (max-width: 52rem) { .offer-block { grid-template-columns: 1fr; } }

/* Heading on one side, a list on the other */
.v2-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-l) clamp(2rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 52rem) { .v2-split { grid-template-columns: 1fr; } }

/* The dot-and-arm list, in the page's colour */
.dot-list { list-style: none; display: grid; gap: var(--space-m); }
.dot-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) var(--space-xl); }
@media (max-width: 40rem) { .dot-list--2 { grid-template-columns: 1fr; } }
.dot-list li { position: relative; padding-left: 2.1em; font-size: var(--step-0); line-height: 1.6; color: var(--on-light); }
.field-navy .dot-list li { color: var(--on-charcoal-soft); }
.field-navy .dot-list strong { color: var(--on-charcoal); }
.dot-list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 1.4em; height: 0.6em;
  background:
    radial-gradient(circle at 0.3em 50%, var(--page, var(--jacaranda)) 0.29em, transparent 0.3em),
    linear-gradient(var(--page, var(--jacaranda)), var(--page, var(--jacaranda))) right center / 0.62em 0.2em no-repeat;
}

/* Panel cards: example, component and service cards, white on Mist and
   Mist on white, with the bite (its dot in the page's colour) */
.panel-cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.panel-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.panel-card {
  display: flex; flex-direction: column; gap: var(--space-s);
  padding: clamp(1.5rem, 2.8vw, 2.25rem) clamp(1.5rem, 2.8vw, 2.25rem) clamp(2.25rem, 3.6vw, 3rem);
  background: var(--white);
  color: var(--on-light);
  --bite-dot: var(--page, var(--charcoal));
}
.field-white .panel-card { background: var(--mist); }
.panel-card__title { font-size: var(--step-1); line-height: 1.25; }
.panel-card p { font-size: var(--step--1); line-height: 1.65; color: var(--slate); }
.panel-cards--1 .panel-card p, .panel-cards--2 .panel-card p { font-size: var(--step-0); color: var(--on-light); }
.panel-card .payoff-line { margin-top: var(--space-2xs); }
@media (max-width: 64rem) { .panel-cards--4, .panel-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48rem) { .panel-cards--2, .panel-cards--3, .panel-cards--4 { grid-template-columns: 1fr; } }

/* The worked example, set under the clinicians' prose at the prose column */
.v2-example { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); }
.v2-example > .panel-cards { grid-column: 2; }
.v2-example .panel-card { --bite-r: clamp(30px, 3.2vw, 44px); padding: clamp(1.75rem, 3.4vw, 3rem); --bite-dot: var(--lawn); }
@media (max-width: 60rem) { .v2-example { grid-template-columns: 1fr; } .v2-example > .panel-cards { grid-column: auto; } }

/* How a build runs: the training pages' stages, five across */
.stages--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 0; }
@supports (grid-template-rows: subgrid) { .stages--5 .stage { grid-row: span 3; } }
@media (max-width: 64rem) { .stages--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .stages--5 { grid-template-columns: 1fr; } }
.page-offer .stage__body { font-size: var(--step-0); color: var(--on-light); }

/* Copy that starts lower case after its label (the steps, two school
   examples) reads as a sentence: the first letter is set as a capital */
.cap-first { display: inline-block; }
.cap-first::first-letter { text-transform: uppercase; }
p.cap-first { display: block; }

/* Logos under the examples */
.v2-logos { margin-top: clamp(2.5rem, 6vw, 4rem); }

/* Charcoal bands on these pages: creed prose and accent brushes read white */
.page-audience .field-navy .creed__title .brush,
.page-offer .field-navy .creed__title .brush,
.field-navy .v2-split .brush { color: var(--on-charcoal); }

/* The menu: the audience names are long, so their panel wraps at a measure */
#who-submenu { min-width: 19rem; }
#who-submenu .nav__sublink { white-space: normal; line-height: 1.35; }
.aud-card .aud-card__more, .aud-card .aud-card__more .btn__arrow { color: var(--charcoal); }
.aud-card--mid .aud-card__more, .aud-card--mid .aud-card__more .btn__arrow { color: var(--on-charcoal); }
.panel-cards--3 .panel-card p { font-size: var(--step-0); color: var(--on-light); }
.aud-cards--row { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.aud-cards--row .aud-card--small .aud-card__title { font-size: var(--step-1); overflow-wrap: normal; hyphens: manual; }
@media (max-width: 64rem) { .aud-cards--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .aud-cards--row { grid-template-columns: 1fr; } }
/* The menu with Who we work with: labels never wrap */
.nav__link { white-space: nowrap; }
/* Between the drawer and wide screens the bar tightens its spacing so it stays on one line */
@media (max-width: 90rem) { .nav__menu { gap: clamp(0.9rem, 1.35vw, 2rem); } }

/* ------------------------------------------------------------------
   19. Not-for-profits first (28 Oct 2026): the homepage's band under
       the hero, the routes, the compact accent head, the Automation
       page rebuilt around the work. Colour means one thing per page.
   ------------------------------------------------------------------ */

/* The homepage hero ends on its line, which widens and sets right, so
   the band's heading reaches the first screen with the line whole */
.page-home .hero { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.75rem, 3vw, 2.5rem); }
.page-home .hero__lede { max-width: 42ch; margin-right: 0; }

/* The not-for-profit band: a full-bleed charcoal section (not a card),
   the page's one charcoal band. Main column: heading, body, the white
   arm, the exit to the audience page. Side: the three routes. */
.nfp-band { padding-block: clamp(2rem, 3.4vw, 3rem) clamp(2.75rem, 5vw, 4.5rem); }
.nfp-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-l) clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.nfp-band__main { display: grid; justify-items: start; }
.nfp-band__title { font-size: clamp(1.65rem, 1.20rem + 2.2vw, 3.05rem); line-height: 1.12; color: var(--on-charcoal); max-width: 22ch; }
.nfp-band__body { margin-top: var(--space-s); font-size: var(--step-1); line-height: 1.5; color: var(--on-charcoal-soft); max-width: 40ch; }
.field-navy .nfp-band__arm { margin-top: var(--space-l); background: var(--white); }
.nfp-band .nfp-band__more { margin-top: var(--space-l); color: var(--on-charcoal); }

/* The routes: each one block link, a bar in its offer's colour, the
   name in Garet with the site's arrow, its line beneath, on hairlines */
.routes { list-style: none; display: grid; }
.route {
  --offer: var(--sunshine);
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  column-gap: 0.85rem;
  row-gap: 0.35rem;
  padding-block: clamp(0.9rem, 1.4vw, 1.15rem);
  border-top: 1px solid var(--rule-on-charcoal);
  color: var(--on-charcoal-soft);
  text-decoration: none;
}
.routes li:last-child .route { border-bottom: 1px solid var(--rule-on-charcoal); }
.route--automation { --offer: var(--azure); }
.route--research   { --offer: var(--lawn); }
.route::before { content: ""; grid-row: 1; align-self: center; width: 2.1rem; height: 0.32rem; background: var(--offer); }
.route__name {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.25;
  color: var(--on-charcoal);
}
.route__label {
  text-decoration: underline 1.5px transparent;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.25s var(--ease);
}
.route__name .btn__arrow { display: inline-block; font-family: var(--font-sans); transition: transform 0.3s var(--ease); }
.route__line { grid-column: 2; font-size: var(--step-0); line-height: 1.5; max-width: 52ch; }
.route:hover .route__label, .route:focus-visible .route__label { text-decoration-color: currentColor; }
.route:hover .btn__arrow, .route:focus-visible .btn__arrow { transform: translateX(4px); }
.route:focus-visible { outline: 2px solid var(--on-charcoal); outline-offset: 4px; }

/* The band loads with the hero's stagger, never behind a scroll reveal */
.js .nfp-band [data-load] {
  opacity: 0;
  transform: translateY(18px);
  animation: rise-in 0.9s var(--ease) forwards;
  animation-delay: var(--load-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .js .nfp-band [data-load] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .route__label, .route .btn__arrow { transition: none; }
}

/* Phone: one column, heading, body, arm, routes, link */
@media (max-width: 60rem) {
  .nfp-band__grid { display: flex; flex-direction: column; gap: 0; }
  .nfp-band__main { display: contents; }
  .nfp-band__title { max-width: 20ch; }
  .nfp-band__routes { order: 5; margin-top: var(--space-l); width: 100%; }
  .nfp-band__more { order: 9; }
}

/* What we do: the offer cards, out of the hero, under a plain head */
.home-offers .offer-grid { margin-top: 0; }

/* Scientists of the human mind, on white (V-181): the light-ground person */
.page-home--reversed .home-mind .home-mind__text .lead { color: var(--slate); }
.page-home--reversed .home-mind .person__role { color: var(--charcoal); }
.page-home--reversed .home-mind .person__cred { color: var(--slate); }
.page-home--reversed .home-mind .person__name { color: var(--on-light); }

/* Delivered with, on Mist: the logos multiply onto it */
.page-home--reversed .evidence { background: var(--mist); }

/* Card links keep their last word and arrow together at every width */
.aud-card__more { display: block; }
.aud-card__more .btn__arrow { display: inline-block; }

/* The compact accent head (Automation, Research, Not-for-profits only):
   a smaller title across a wider measure, the lead a step up, so the
   first section shows in the first screen */
.page-head.page-head--accent:not(.page-head--charcoal),
.page-audience .page-head.page-head--accent:not(.page-head--charcoal),
.page-offer .page-head.page-head--accent:not(.page-head--charcoal) { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.page-head--accent:not(.page-head--charcoal) .page-head__title { font-size: clamp(2.2rem, 1rem + 3.4vw, 3.6rem); line-height: 1.1; max-width: 26ch; }
.page-head--accent:not(.page-head--charcoal) .page-head__intro { font-size: var(--step-1); max-width: 48ch; }

/* Automation, the work that comes round every week: the arm under the
   heading in the rail; on a phone it follows the prose as its conclusion */
.week-creed__arm { max-width: 20ch; }
@media (max-width: 52rem) {
  .week-creed { display: flex; flex-direction: column; gap: var(--space-l); }
  .week-creed .creed__rail { display: contents; }
  .week-creed .week-creed__arm { order: 9; }
}

/* What we automate: the kinds of work as ruled rows, no numerals, no
   icons. The names are the largest type in any section body; the
   closing paragraph sits under the last rule on the rows' line column.
   Nothing is drawn beneath or around the rows. */
.kinds { margin-top: 0; }
.kinds .principles__row {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(1.25rem, 2.4vw, 1.9rem);
}
.kinds .principles__name { font-size: clamp(1.6rem, 1.25rem + 1.05vw, 2.3rem); line-height: 1.15; }
.kinds .principles__line { font-size: var(--step-1); line-height: 1.5; color: var(--on-light); max-width: 48ch; }
.kinds__base {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  padding-top: var(--space-l);
  max-width: none;
}
.kinds__base span { grid-column: 2; font-size: var(--step-1); line-height: 1.55; color: var(--slate); max-width: 48ch; }
@media (max-width: 48rem) {
  .kinds .principles__row, .kinds__base { grid-template-columns: 1fr; row-gap: var(--space-2xs); }
  .kinds .principles__line, .kinds__base span { grid-column: 1; }
}

/* A human in the loop: the page's one charcoal band. The alternative
   takes the narrower column, so its two points read as deliberate. */
.loop-lead { color: var(--on-charcoal-soft); }
.contrast--narrow-alt { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
@media (max-width: 52rem) { .contrast--narrow-alt { grid-template-columns: 1fr; } }

/* How we build it: the six principles, three rows of two, on white */
.build-principles { margin-top: 0; }
.build-principles strong { color: var(--on-light); }

/* Who it's for, on Mist: compact rows at every width (V-188), the
   not-for-profit card across the top in its audience's colour, the
   three others beneath it, white on Mist. Title and arrow share a line. */
.auto-for .aud-cards--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); }
.auto-for .aud-cards--row .aud-card--lead { grid-column: 1 / -1; }
.auto-for .aud-cards--row .aud-card--small { background: var(--white); }
.auto-for .aud-cards--row .aud-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-m);
  row-gap: var(--space-2xs);
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(3.25rem, 5vw, 4rem) clamp(1.1rem, 2vw, 1.6rem) clamp(1.25rem, 2.2vw, 2rem);
  --bite-r: 20px;
}
.auto-for .aud-cards--row .aud-card__title,
.auto-for .aud-cards--row .aud-card--lead .aud-card__title,
.auto-for .aud-cards--row .aud-card--small .aud-card__title { font-size: var(--step-1); grid-column: 1; }
.auto-for .aud-cards--row .aud-card__body { grid-column: 1; grid-row: 2; color: var(--charcoal); font-size: var(--step-0); }
.auto-for .aud-cards--row .aud-card__more { grid-column: 2; grid-row: 1; margin: 0; padding: 0; }
@media (max-width: 52rem) { .auto-for .aud-cards--row { grid-template-columns: 1fr; gap: var(--space-xs); } }

/* Not-for-profits: sunshine means the audience only (V-196), so
   Training's offer block there takes a charcoal tag and brush */
.offer-block--neutral { --offer: var(--charcoal); }
.offer-block--neutral .offer-block__tag { color: var(--white); }

/* The lead card on Who we work with: on a phone it reads title, body,
   arm, bullets, then its link last, as the homepage band does (V-203) */
@media (max-width: 52rem) {
  .aud-cards > .aud-card--lead .aud-card__main { display: contents; }
  .aud-cards > .aud-card--lead .aud-card__more { order: 9; margin-top: 0; }
}

/* Who we work with: the lead is one line at desktop */
.page-head__intro--wide { max-width: 72ch; }

/* Review touches (28 Oct): the band's exit link is a comfortable tap
   target on a phone; on Automation the loop's lead aligns with the
   panel column beneath it */
@media (max-width: 60rem) { .nfp-band .nfp-band__more { padding-block: 0.8rem; margin-top: var(--space-s); } }
.loop-head { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
@media (max-width: 60rem) { .loop-head { grid-template-columns: 1fr; } }