/* ==========================================================================
   The Circle — thecirclecic.org.uk
   One stylesheet. Vanilla CSS, custom properties, no build step, no framework.

   Fonts are self-hosted. The comps use Figtree (display) and Source Sans 3
   (text) as open-licence stands-in for Terfens and Proxima Nova. If the
   Adobe licences allow self-hosting, drop the licensed WOFF2 files into
   /fonts/ and swap the family names in --font-display / --font-text only —
   both substitutes were chosen with matching x-heights, so the type scale
   below does not need retuning.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted WOFF2, no external CDN (a brief requirement).

   Display stands in for Terfens (warm rounded geometric); text stands in for
   Proxima Nova (humanist). To swap the licensed families in, replace these
   @font-face blocks and the two custom properties in §2. Nothing else changes.
   -------------------------------------------------------------------------- */

@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

@font-face { font-family: 'Hanken Grotesk'; src: url('../fonts/hanken-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('../fonts/hanken-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('../fonts/hanken-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('../fonts/hanken-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* --- Surfaces and ink ------------------------------------------------- */
  --paper:        #FAF8F4;  /* the page */
  --paper-2:      #F1EEE8;  /* alternating section, inset panels */
  --ink:          #1A1A18;  /* all body text and headings — 16.4:1 on paper */
  --ink-2:        #56564F;  /* captions and metadata — 6.97:1 on paper */
  --ink-inverse:  #FAF8F4;  /* text on ink and on strand fields */
  --ink-inverse-2:#E4E1DA;  /* secondary text on ink */
  --rule:         rgba(26, 26, 24, 0.16);
  --rule-strong:  rgba(26, 26, 24, 0.28);

  /* --- Strand FIELD values: what the site is built from ------------------
     Each is darkened from its logo value until white type clears AA (4.5:1).
     Never use a logo value as a field.                                    */
  --workspaces:    #be1622;  /* white text 6.31:1  AA  */
  --consultancy:   #1d71b8;  /* white text 5.11:1  AA  */
  --mobility:      #217A1E;  /* white text 5.43:1  AA  */
  --volunteering:  #662483;  /* white text 9.79:1  AAA */

  /* --- Strand TINT values: flat fields behind cutout photography -------- */
  --workspaces-tint:   #F7E6E5;
  --consultancy-tint:  #E5EFF7;
  --mobility-tint:     #E7F0E6;
  --volunteering-tint: #EFE7F3;

  /* --- Strand LOGO values: logomark and charts ONLY --------------------- */
  --logo-orange:  #f9b233;
  --logo-red:     #e6332a;
  --logo-lime:    #d9db28;
  --logo-green:   #3aaa35;
  --logo-blue:    #1d71b8;
  --logo-magenta: #b12986;
  --logo-purple:  #662483;
  --logo-deepred: #be1622;
  --logo-grey:    #575756;
  --logo-grey-2:  #9d9d9c;

  /* --- Functional ------------------------------------------------------- */
  --highlight:      #f9b233;  /* ink on orange 9.50:1 AAA. One field per page. */
  --link:           #145A94;  /* 6.78:1 on paper — darkened from brand blue   */
  --link-hover:     #1A1A18;
  --focus-ring:     #1A1A18;
  --focus-halo:     #f9b233;
  --available:      #1B6E18;  /* the word "Available", 6.0:1 on paper         */

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-text:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --type-display-xl: 700 76px/0.95 var(--font-display);
  --type-display-l:  800 52px/1.02 var(--font-display);
  --type-h2:         700 38px/1.08 var(--font-display);
  --type-h3:         700 23px/1.20 var(--font-display);
  --type-intro:      400 22px/1.55 var(--font-text);
  --type-body:       400 18px/1.65 var(--font-text);
  --type-meta:       400 15px/1.40 var(--font-text);
  --type-legal:      400 14px/1.50 var(--font-text);

  --track-display-xl: -0.035em;
  --track-display-l:  -0.030em;
  --track-h2:         -0.020em;
  --track-h3:         -0.010em;

  --measure:       66ch;  /* body copy                */
  --measure-intro: 62ch;  /* introductory paragraphs  */

  /* --- Space (4px base) -------------------------------------------------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  16px;
  --s-4:  24px;
  --s-5:  32px;
  --s-6:  48px;
  --s-7:  64px;
  --s-8:  96px;
  --s-9: 128px;

  --gutter: 80px;  /* page margin, desktop */
  --gap:    32px;  /* grid gutter          */

  /* --- Radii — 2px or nothing. No pills, no rounded cards. -------------- */
  --radius:    2px;
  --radius-0:  0;

  /* --- Motion: the one rule -------------------------------------------- */
  --motion: 150ms ease;

  /* --- Targets ---------------------------------------------------------- */
  --target:     44px;
  --target-lg:  52px;
  --field:      56px;
}

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--type-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; background: #E4E1DA; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--highlight); color: var(--ink); }

/* Focus: a designed pair — ink ring for shape, orange halo for visibility.
   Survives on paper, on ink, and on all four strand fields. Never removed. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--focus-halo);
  border-radius: var(--radius);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-3); top: -100px;
  z-index: 100;
  display: inline-flex; align-items: center;
  min-height: var(--target-lg);
  padding: 0 var(--s-4);
  background: var(--ink); color: var(--ink-inverse);
  font: 600 17px/1 var(--font-display);
  text-decoration: none;
  border-radius: var(--radius);
  transition: top var(--motion);
}
.skip-link:focus { top: var(--s-3); }

/* --------------------------------------------------------------------------
   4. Type
   -------------------------------------------------------------------------- */

.t-display-xl { font: var(--type-display-xl); font-weight: 800; letter-spacing: var(--track-display-xl); }
.t-display-l  { font: var(--type-display-l);  letter-spacing: var(--track-display-l); }
.t-h2         { font: var(--type-h2);         letter-spacing: var(--track-h2); }
.t-h3         { font: var(--type-h3);         letter-spacing: var(--track-h3); }
.t-intro      { font: var(--type-intro);      max-width: var(--measure-intro); }
.t-body       { font: var(--type-body);       max-width: var(--measure); }
.t-meta       { font: var(--type-meta);       color: var(--ink-2); }
.t-legal      { font: var(--type-legal);      color: var(--ink-2); }

.t-body + .t-body { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */

.wrap    { padding-inline: var(--gutter); }
.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-7); }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }

/* Column spans and offsets.
   NOTE: .c-N MUST use the grid-column-END longhand, not the `grid-column`
   shorthand. `grid-column: span 7` puts `span 7` on the START longhand, so a
   later `.start-6 { grid-column-start: 6 }` overwrites it and leaves
   grid-column-end:auto — every offset item then spans a single column and the
   12-track grid is silently abandoned. Keeping span on the end longhand lets
   the two utilities compose. */
.c-1  { grid-column-end: span 1; }  .c-2  { grid-column-end: span 2; }
.c-3  { grid-column-end: span 3; }  .c-4  { grid-column-end: span 4; }
.c-5  { grid-column-end: span 5; }  .c-6  { grid-column-end: span 6; }
.c-7  { grid-column-end: span 7; }  .c-8  { grid-column-end: span 8; }
.c-12 { grid-column-end: span 12; }

.start-6 { grid-column-start: 6; }
.start-8 { grid-column-start: 8; }
.start-9 { grid-column-start: 9; }

/* Section heading: a hairline, generous air, and a big heading in the left
   six columns with support text in the right five. No eyebrow labels. */
.section-head {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  margin-bottom: var(--s-6);
}
.section-head > h2 { grid-column: 1 / span 6; font: var(--type-h2); letter-spacing: var(--track-h2); }
.section-head > p  { grid-column: 8 / span 5; align-self: end; color: var(--ink-2); }

/* The dashed connector — an echo of the logomark's arc. Two or three per
   page at most, marking genuine movements. Never decorative. */
.connector { border: 0; border-top: 2px dashed var(--rule-strong); margin-block: var(--s-8); }

/* --------------------------------------------------------------------------
   6. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6);
  padding: 20px var(--gutter);
}
.masthead__logo {
  display: flex; align-items: center; gap: 14px;
  color: var(--ink); text-decoration: none; flex: none;
}
.masthead__wordmark { font: 800 25px/1 var(--font-display); letter-spacing: -0.025em; }

.nav {
  display: flex; align-items: center; gap: 26px;
}
.nav__link {
  display: flex; flex-direction: column; justify-content: center;
  min-height: var(--target);
  padding-top: 3px;
  font: 500 17px/1.2 var(--font-display);
  white-space: nowrap;
  color: var(--ink); text-decoration: none;
  transition: color var(--motion);
}
.nav__link:hover { color: var(--link); }
/* Current page: weight + rule + aria-current. Three signals, none colour. */
.nav__link[aria-current='page'] { font-weight: 700; }
.nav__link[aria-current='page']::after {
  content: ''; display: block; height: 3px; margin-top: 7px; background: var(--ink);
}

.nav__toggle { display: none; }

/* --------------------------------------------------------------------------
   7. Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target-lg);
  padding: 0 26px;
  font: 600 17px/1 var(--font-display);
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--motion), color var(--motion), border-color var(--motion);
}
.btn--primary   { background: var(--ink); color: var(--ink-inverse); }
.btn--primary:hover { background: #000; color: var(--ink-inverse); }
.btn--secondary { background: none; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--ink-inverse); }
/* On a strand field, the button inverts to paper. */
.btn--on-field  { background: var(--paper); color: var(--ink); font-weight: 700; }
.btn--lg        { min-height: 58px; font-size: 19px; }
.btn--block     { display: flex; width: 100%; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

.link {
  display: inline-flex; align-items: center;
  min-height: var(--target);
  font-weight: 600;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color var(--motion);
}
.link:hover { color: var(--link-hover); }

/* --------------------------------------------------------------------------
   8. Page header band — the strand's flat field. Once per page, at the top.
      The strand name is ALWAYS spelled out; colour never carries meaning.
   -------------------------------------------------------------------------- */

.band {
  padding: 56px var(--gutter);
  background: var(--ink);
  color: var(--ink-inverse);
}
.band--workspaces   { background: var(--workspaces); }
.band--consultancy  { background: var(--consultancy); }
.band--mobility     { background: var(--mobility); }
.band--volunteering { background: var(--volunteering); }
/* A page with no strand keeps the pattern and drops the colour. */
.band--plain {
  background: var(--paper); color: var(--ink);
  padding-block: var(--s-7) var(--s-6);
  border-bottom: 1px solid var(--rule);
}

.band__inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; }
.band__main  { grid-column: 1 / span 7; }
.band__aside { grid-column: 9 / span 4; }
.band__strand { font: 700 18px/1.3 var(--font-display); margin-bottom: 14px; }
.band__title  { font: var(--type-display-xl); font-weight: 800; letter-spacing: var(--track-display-xl); }
.band__lede   { font: 400 21px/1.5 var(--font-text); margin-top: 22px; max-width: 46ch; }

/* --------------------------------------------------------------------------
   9. Service band — flat colour beside full-bleed photography, alternating.
   -------------------------------------------------------------------------- */

.strip { display: grid; grid-template-columns: repeat(12, 1fr); align-items: stretch; }
.strip__field {
  grid-column: 1 / span 5;
  padding: var(--s-7) var(--s-6) var(--s-7) var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--ink-inverse);
}
.strip__media { grid-column: 6 / span 7; min-height: 400px; }
.strip__media > img { width: 100%; height: 100%; object-fit: cover; }
/* Reversed: photography left, field right. */
.strip--rev .strip__media { grid-column: 1 / span 7; }
.strip--rev .strip__field {
  grid-column: 8 / span 5;
  padding: var(--s-7) var(--gutter) var(--s-7) var(--s-6);
}
.strip__field--workspaces  { background: var(--workspaces); }
.strip__field--consultancy { background: var(--consultancy); }
.strip__field--mobility    { background: var(--mobility); }
.strip__title { font: 800 46px/1 var(--font-display); letter-spacing: -0.03em; }
.strip__body  { font: 400 20px/1.55 var(--font-text); margin-top: 20px; max-width: 34ch; }

/* --------------------------------------------------------------------------
   10. Photography — four ratios, no fifth. No duotone, no filters.
   -------------------------------------------------------------------------- */

.media-hero { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius-0); }
.media-3-2  { width: 100%; aspect-ratio: 3 / 2;  object-fit: cover; border-radius: var(--radius); }
.media-4-3  { width: 100%; aspect-ratio: 4 / 3;  object-fit: cover; border-radius: var(--radius); }
.media-1-1  { width: 100%; aspect-ratio: 1 / 1;  object-fit: cover; border-radius: var(--radius); }

/* Cutouts on plain backgrounds sit on a flat strand tint. This is what makes
   eleven inconsistently photographed vehicles read as one set. */
.cutout {
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  padding: 26px;
  background: var(--paper-2);
  border-radius: var(--radius);
}
.cutout--mobility    { background: var(--mobility-tint); }
.cutout--workspaces  { background: var(--workspaces-tint); }
.cutout--consultancy { background: var(--consultancy-tint); }
.cutout > img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; background: none; }

.caption { font: var(--type-meta); color: var(--ink-2); margin-top: var(--s-2); max-width: 70ch; }

/* Video: a poster and a real button. Never autoplays with sound, and under
   reduced-motion never autoplays at all. */
.video { position: relative; background: var(--ink); }
.video__play {
  position: absolute; inset: auto auto 0 0;
  display: flex; align-items: center; gap: var(--s-3);
  padding: 14px 22px 14px 16px;
  background: var(--ink); color: var(--ink-inverse);
  border: 0; cursor: pointer;
  font: 600 17px/1 var(--font-display);
}
.video__play::before {
  content: ''; flex: none;
  width: 46px; height: 46px;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   11. Logo wall — a print contact sheet, ruled, not a row of cards.
   -------------------------------------------------------------------------- */

.logo-wall {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.logo-wall__cell {
  display: grid; place-items: center;
  aspect-ratio: 3 / 2;
  padding: 18px;
  background: var(--paper);
}
.logo-wall__cell > img { max-height: 100%; width: auto; object-fit: contain; background: none; }

.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 44px 56px; }
.logo-row > img { height: 62px; width: auto; object-fit: contain; background: none; }

/* --------------------------------------------------------------------------
   12. Statistics — a hairline grid and a very large numeral.
       No card, no coloured top border.
   -------------------------------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--rule); }
.stats--2 { grid-template-columns: repeat(2, 1fr); }
.stats--3 { grid-template-columns: repeat(3, 1fr); }
.stat { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: 0; }
.stat__n { font: 800 56px/1 var(--font-display); letter-spacing: -0.04em; }
.stat__l { font: 400 17px/1.4 var(--font-text); color: var(--ink-2); margin-top: 10px; }

/* --------------------------------------------------------------------------
   13. Quote — display type between dashed rules. No quote marks in boxes.
   -------------------------------------------------------------------------- */

.quote { padding-top: var(--s-4); border-top: 2px dashed var(--rule-strong); }
.quote--rules { padding-block: var(--s-4); border-bottom: 2px dashed var(--rule-strong); }
.quote__p { font: 600 34px/1.18 var(--font-display); letter-spacing: -0.022em; }
.quote__cite { display: block; font: 400 18px/1.5 var(--font-text); color: var(--ink-2); margin-top: 18px; font-style: normal; }

/* --------------------------------------------------------------------------
   14. The dot bullet — the logomark's dot, doing a job.
   -------------------------------------------------------------------------- */

.dots > li {
  display: flex; gap: 14px;
  padding-block: var(--s-2);
  font: 400 19px/1.55 var(--font-text);
}
.dots > li::before {
  content: ''; flex: none;
  width: 11px; height: 11px; margin-top: 10px;
  background: var(--ink); border-radius: 50%;
}
.dots--workspaces  > li::before { background: var(--workspaces); }
.dots--consultancy > li::before { background: var(--consultancy); }
.dots--mobility    > li::before { background: var(--mobility); }

/* A category or status marker. The dot NEVER appears without its word. */
.marker { display: inline-flex; align-items: center; gap: 9px; font: 700 15px/1.4 var(--font-display); color: var(--ink-2); }
.marker::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.marker--news        { --m: var(--consultancy); }
.marker--case-studies{ --m: var(--workspaces); }
.marker--opportunities { --m: var(--volunteering); }
.marker--team-circle { --m: var(--mobility); }
.marker[class*='marker--']::before { background: var(--m, currentColor); }
.marker--available { color: var(--available); }
.marker--available::before { background: var(--mobility); }

/* --------------------------------------------------------------------------
   15. News card — a photograph, a marker, a headline. No box.
   -------------------------------------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px var(--gap); }
.cards--4 { grid-template-columns: repeat(4, 1fr); gap: var(--gap); }

.card__title { font: var(--type-h3); letter-spacing: var(--track-h3); margin-block: 14px var(--s-2); }
.card__title > a { color: var(--ink); text-decoration: none; }
.card__title > a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.card__excerpt { font: 400 18px/1.55 var(--font-text); color: #2E2E2A; margin-bottom: var(--s-2); }

/* The lead story runs double width. A flat grid of identical cards is the
   pattern this redesign exists to remove. */
.lead { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-6); padding-bottom: var(--s-6); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-6); }
.lead__media { grid-column: 1 / span 7; }
.lead__body  { grid-column: 8 / span 5; display: flex; flex-direction: column; justify-content: center; }
.lead__title { font: 800 44px/1.04 var(--font-display); letter-spacing: -0.03em; margin-block: 0 var(--s-3); }
.lead__title > a { color: var(--ink); text-decoration: none; }

/* --------------------------------------------------------------------------
   16. Article typography
   -------------------------------------------------------------------------- */

.article__body > p  { font: 400 20px/1.7 var(--font-text); max-width: var(--measure); margin-bottom: 22px; }
.article__body > h2 { font: 700 32px/1.12 var(--font-display); letter-spacing: -0.02em; margin-block: var(--s-6) var(--s-3); }
.article__body > .lede { font: 400 24px/1.45 var(--font-text); margin-bottom: 28px; max-width: var(--measure-intro); }
.article__body > ul { max-width: var(--measure); margin-bottom: 28px; }
.article__body a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: var(--type-meta); }
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb__sep { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   17. Forms — 56px, a real border, labels above. Never a placeholder label.
   -------------------------------------------------------------------------- */

.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field--full { grid-column: span 2; }

.label { display: block; font: 700 18px/1.3 var(--font-display); margin-bottom: 7px; }
.label__hint { font-weight: 400; color: var(--ink-2); }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--field);
  padding: 0 16px;
  font: 400 18px/1.5 var(--font-text);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  transition: border-color var(--motion);
}
.textarea { padding: 14px 16px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-2); }

.checkbox-row { display: flex; align-items: flex-start; gap: 14px; }
.checkbox { width: 26px; height: 26px; margin-top: 2px; flex: none; accent-color: var(--ink); }

/* --------------------------------------------------------------------------
   18. Download link — a ruled list, with type and size stated in text.
   -------------------------------------------------------------------------- */

.downloads > li > a {
  display: flex; align-items: center; gap: 18px;
  padding-block: 15px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink); text-decoration: none;
  transition: background var(--motion);
}
.downloads > li > a:hover { background: var(--paper-2); }
.download__icon { flex: none; }
.download__name { flex: 1; font: 700 18px/1.3 var(--font-display); }
.download__meta { flex: none; font: var(--type-meta); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   19. Pagination
   -------------------------------------------------------------------------- */

.pagination { display: flex; align-items: center; gap: var(--s-2); }
.pagination__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--target-lg); min-height: var(--target-lg);
  padding: 0 14px;
  font: 700 19px/1 var(--font-display);
  color: var(--ink); text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}
.pagination__n[aria-current='page'] { background: var(--ink); color: var(--ink-inverse); }
.pagination__gap { padding-inline: 10px; color: var(--ink-2); }
.pagination__count { margin-left: auto; font: 400 17px/1.4 var(--font-text); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   20. Footer — a flat ink field. Not a rounded gradient CTA band.
   -------------------------------------------------------------------------- */

.footer { background: var(--ink); color: var(--ink-inverse); }
.footer__inner { padding: var(--s-7) var(--gutter) var(--s-6); }
.footer a { color: var(--ink-inverse-2); text-decoration: underline; text-underline-offset: 4px; }
.footer a:hover { color: var(--ink-inverse); }
.footer__col h2 { font: 700 19px/1.3 var(--font-display); letter-spacing: -0.01em; margin-bottom: 14px; }
.footer__col li > a { display: flex; align-items: center; min-height: var(--target); font-size: 17px; }
.footer__legal {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-5);
  margin-top: var(--s-7); padding-top: var(--s-4);
  border-top: 1px solid rgba(250, 248, 244, 0.22);
  font: var(--type-meta); color: #B8B4AC;
}


/* --------------------------------------------------------------------------
   23. Page-level compositions
   -------------------------------------------------------------------------- */

/* Split hero: type on paper beside full-bleed media. Asymmetric, edge-aligned.
   Not an image with type on top of it. */
.hero { display: grid; grid-template-columns: repeat(12, 1fr); align-items: stretch; }
.hero__body {
  grid-column: 1 / span 5;
  padding: var(--s-8) var(--s-6) var(--s-8) var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__media { grid-column: 6 / span 7; position: relative; background: #E4E1DA; }
.hero__media > img { width: 100%; height: 100%; object-fit: cover; }

/* The one highlight field per page. Ink on orange, 9.5:1. */
.highlight { background: var(--highlight); color: var(--ink); padding: var(--s-6) var(--gutter); }
.highlight--inset { padding: 52px 56px; border-radius: var(--radius); }

/* Workspace finder: two selects and a submit, at 56px. The minmax floor stops
   the auto-width submit button squeezing the selects into uselessness. */
.finder { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) auto; gap: var(--s-3); align-items: end; }

/* Feature row: text beside photography, both on paper, alternating side. */
.feature { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; }
.feature__body { grid-column: 1 / span 5; padding-right: var(--s-6); }
.feature__media { grid-column: 6 / span 7; }
.feature--rev .feature__media { grid-column: 1 / span 7; }
.feature--rev .feature__body { grid-column: 8 / span 5; padding: 0 0 0 var(--s-6); }

/* A flat tint panel. Not a card: no shadow, no border, no icon. */
.panel { padding: 28px; border-radius: var(--radius); background: var(--paper-2); }
.panel--workspaces  { background: var(--workspaces-tint); }
.panel--consultancy { background: var(--consultancy-tint); }
.panel--mobility    { background: var(--mobility-tint); }

/* Strand promo tile — used on Social Impact where all four appear together. */
.tile {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 230px; padding: 36px;
  border-radius: var(--radius);
  color: var(--ink-inverse);
}
.tile--workspaces   { background: var(--workspaces); }
.tile--consultancy  { background: var(--consultancy); }
.tile--mobility     { background: var(--mobility); }
.tile--volunteering { background: var(--volunteering); }
.tile__title { font: 800 32px/1.05 var(--font-display); letter-spacing: -0.025em; margin-bottom: 14px; }

/* Impact highlight: a very large numeral against its sentence, on a rule. */
.impact { border-top: 1px solid var(--rule); }
.impact > li {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap);
  align-items: baseline;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.impact__n { grid-column: 1 / span 3; font: 800 64px/1 var(--font-display); letter-spacing: -0.04em; }
.impact__l { grid-column: 4 / span 8; font: 400 23px/1.45 var(--font-text); }

/* Numbered steps. Two per row, an enormous numeral, no circles or badges. */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.step { display: flex; gap: 28px; align-items: flex-start; }
.step__n { flex: none; font: 800 96px/0.8 var(--font-display); letter-spacing: -0.05em; }

/* Income chart. Charts are the ONE place the wider palette is licensed.
   Only the percentage goes inside the bar: a 21% segment is ~80px wide on a
   laptop and can never hold "21% grants" at display size. The names go in a
   key beneath, which also gives the colours their required text label. */
.chart { display: flex; height: 76px; border-radius: var(--radius); overflow: hidden; }
.chart__seg { display: flex; align-items: center; padding-left: 18px; }
.chart__seg--trading { background: var(--logo-lime); }
.chart__seg--grants  { background: var(--logo-orange); }
.chart__label { font: 800 28px/1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.chart-key { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); }
.chart-key > li { display: flex; align-items: center; gap: 10px; font: 400 18px/1.4 var(--font-text); }
.chart-key__swatch { flex: none; width: 15px; height: 15px; border-radius: var(--radius); }

.stats--5 { grid-template-columns: repeat(5, 1fr); }

/* Sticky article/legal aside. */
.aside-sticky { position: sticky; top: var(--s-8); }


/* --------------------------------------------------------------------------
   21. Category filters — real links to real category URLs, so the page works
       with JavaScript off. Specified exactly like the masthead nav, and
       deliberately not sharing its class: the rules the nav picks up at 1180px
       are about becoming a disclosure menu, and a filter row never does that.
   -------------------------------------------------------------------------- */

.filters {
  display: flex; flex-wrap: wrap; gap: 4px 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.filter {
  display: flex; flex-direction: column; justify-content: center;
  min-height: var(--target);
  padding-top: 3px;
  font: 500 19px/1.2 var(--font-display);
  color: var(--ink); text-decoration: none;
  transition: color var(--motion);
}
.filter:hover { color: var(--link); }
/* Current filter: weight + rule + aria-current. Not a filled pill. */
.filter[aria-current='page'] { font-weight: 700; }
.filter[aria-current='page']::after {
  content: ''; display: block; height: 3px; margin-top: 7px; background: var(--ink);
}

/* --------------------------------------------------------------------------
   22. Archive article content — the elements 186 published articles contain
       that one comp article does not. Same measure, same rules, same dot.
   -------------------------------------------------------------------------- */

.article__body > h3 { font: 700 25px/1.22 var(--font-display); letter-spacing: -0.015em; margin-block: var(--s-5) var(--s-2); }
.article__body > h4 { font: 700 21px/1.25 var(--font-display); margin-block: var(--s-5) var(--s-2); }
.article__body > p:last-child { margin-bottom: 0; }

/* Lists reuse the dot bullet rather than inventing a second one. */
.article__body > ul, .article__body > ol { max-width: var(--measure); margin-bottom: 22px; }
.article__body > ul > li, .article__body > ol > li {
  display: flex; gap: 14px;
  padding-block: 4px;
  font: 400 20px/1.7 var(--font-text);
}
.article__body > ul > li::before {
  content: ''; flex: none;
  width: 11px; height: 11px; margin-top: 13px;
  background: var(--ink); border-radius: 50%;
}
.article__body > ol { counter-reset: item; }
.article__body > ol > li::before {
  counter-increment: item; content: counter(item) '.';
  flex: none; min-width: 22px;
  font: 700 20px/1.7 var(--font-display);
}

.article__body img { width: 100%; height: auto; border-radius: var(--radius); margin-block: var(--s-4); }
/* An article whose featured image is a logo or a portrait rather than a wide
   photograph opens on the measure at its own ratio. A 21:9 crop would cut the
   mark in half, and the four ratios are for placed photography, not artwork. */
.article__open { margin-top: 0; margin-bottom: var(--s-5); }
.article__body figure { margin-block: var(--s-4); }
.article__body figcaption { font: var(--type-meta); color: var(--ink-2); margin-top: var(--s-2); max-width: 70ch; }
.article__body > hr { border: 0; border-top: 1px solid var(--rule); margin-block: var(--s-6); }

/* A quote inside archive copy takes the same dashed rules as a designed one. */
.article__body > blockquote {
  margin-block: var(--s-5);
  padding-block: var(--s-4);
  border-top: 2px dashed var(--rule-strong);
  border-bottom: 2px dashed var(--rule-strong);
}
.article__body > blockquote p {
  font: 600 26px/1.25 var(--font-display); letter-spacing: -0.02em;
  max-width: var(--measure-intro);
}
.article__body > blockquote p + p { margin-top: var(--s-3); }

/* Fixed layout and wrapping keep a wide archive table inside the measure
   instead of pushing the whole page sideways. */
.article__body table {
  width: 100%; max-width: 100%;
  table-layout: fixed; border-collapse: collapse;
  margin-block: var(--s-4);
  font: 400 17px/1.5 var(--font-text);
  overflow-wrap: break-word;
}
.article__body th, .article__body td {
  padding: 12px 16px 12px 0;
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.article__body th { font-family: var(--font-display); font-weight: 700; }

/* Embeds inside archive articles: nocookie, lazy, and never wider than the
   measure. The one testimonial the design places by hand is click-to-load. */
.embed { position: relative; aspect-ratio: 16 / 9; margin-block: var(--s-5); max-width: var(--measure); }
.embed > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius); }

/* The played video takes the frame its poster occupied. */
.video > video, .video > iframe { width: 100%; height: 100%; border: 0; object-fit: cover; }
.hero__media > video { aspect-ratio: 21 / 9; }

/* --------------------------------------------------------------------------
   23b. Grid safety and the composition modifiers the comps set inline.

   A grid item's automatic minimum is its content's intrinsic width, so one
   1200px logo in an 8-up wall drags the whole track past the viewport and the
   page scrolls sideways. The comps never hit it because they pointed at the
   CDN's pre-sized derivatives; real assets are not always pre-sized, so the
   floor is set here once rather than depended on per image.

   The modifier classes replace inline grid-template-columns declarations in
   the comps. An inline style beats a media query, so a composition set inline
   never collapsed at 900px — twelve headshots stayed six-up on a phone and
   the page scrolled sideways. Same layouts, now on classes that fold.
   -------------------------------------------------------------------------- */

.grid > *, .cards > *, .logo-wall > *, .stats > *, .band__inner > *,
.strip > *, .hero > *, .feature > *, .lead > *, .steps > *, .impact > li > * { min-width: 0; }
.logo-wall__cell > img, .logo-row > img { max-width: 100%; }

.grid--2, .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.logo-wall--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* The tile is wider than it is tall, so what the wall shares across a row is
   logo HEIGHT — a wide mark and a square one then read as the same size. The
   floor is what makes that true: without it a 177px logo pushes its cell square
   and every mark that is not square sits in a half-empty box. */
/* The tenant wall, without its boxes: logos on paper with air around them, the
   way the funders below it read. The grid stays, so rows still line up.
   A percentage height against a cell sized by aspect-ratio does not resolve, so
   each logo is positioned into its cell — that is what makes a wide mark and a
   square one read as the same size. */
.logo-wall { background: none; border: 0; gap: var(--s-5) var(--s-4); }
.logo-wall__cell { position: relative; min-height: 0; padding: 0; background: none; }
.logo-wall__cell > img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  background: none;
}
.logo-wall__cell > a { position: absolute; inset: 0; display: block; }
.logo-wall__cell > a > img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  background: none;
  transition: opacity var(--motion);
}
.logo-wall__cell > a:hover > img { opacity: 0.6; }

/* The two cells left over at the end of the wall, now that there are no boxes. */
.logo-wall__cta {
  grid-column: span 2;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  background: none;
}
.logo-wall__cta > p { font: 700 19px/1.15 var(--font-display); letter-spacing: -0.015em; }
.logo-wall__cta > a { font-size: 16px; min-height: 0; }

/* Funder marks were too small to read the wordmarks in. */
.logo-row { gap: 40px 56px; }
.logo-row > img { height: 88px; }

/* The vehicles get the same treatment as the logos: one box each, so eleven
   photographs at different scales read as one set. */
.cutout { position: relative; }
.cutout > img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: auto; height: auto;
  max-width: calc(100% - 52px); max-height: calc(100% - 52px);
}

/* The service bands were as tall as whatever photograph sat in them — 498px,
   655px and 996px for the three on the home page. A fixed ratio makes them one
   size; the field still sets the floor if its text needs more room. */
.strip__media { position: relative; aspect-ratio: 16 / 9; min-height: 0; }
.strip__media > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* The home reel plays itself, muted and looping. Under reduced motion the
   script leaves it paused on its poster instead. */
.hero__media > video { width: 100%; height: 100%; object-fit: cover; }

/* Statistics: no rules, and the numeral centred over its label. The support
   cards use .stat too, and keep their left-aligned prose. */
.stats { border-top: 0; }
.stat { padding: var(--s-4) var(--s-3); }
.stat__n, .stat__l { text-align: center; }

/* The default accent, for pages that carry no strand. */
:root { --accent: var(--link); }

/* Quotes carry the page's strand colour rather than another hairline in ink. */
.quote { border-top-color: var(--accent); }
.quote--rules { border-bottom-color: var(--accent); }
.quote__cite { color: var(--accent); font-weight: 600; }

/* The strand a page belongs to, for the accents that follow it. */
.page--workspaces   { --accent: var(--workspaces); }
.page--consultancy  { --accent: var(--consultancy); }
.page--mobility     { --accent: var(--mobility); }
.page--volunteering { --accent: var(--volunteering); }

/* A rate card. Wide tables scroll inside their own box, never the page. */
.table-scroll { overflow-x: auto; margin-top: var(--s-4); }
.rates { width: 100%; min-width: 460px; border-collapse: collapse; font: 400 17px/1.4 var(--font-text); }
.rates caption { text-align: left; font: 700 19px/1.3 var(--font-display); margin-bottom: 10px; }
.rates th, .rates td { padding: 13px 12px 13px 0; text-align: left; border-bottom: 1px solid var(--rule); }
.rates thead th { font: 700 15px/1.3 var(--font-display); color: var(--ink-2); }
.rates tbody th { font: 700 17px/1.3 var(--font-display); white-space: nowrap; }
.rates td { font-variant-numeric: tabular-nums; }
.rates tbody td:first-of-type { color: var(--available); font-weight: 700; }

/* A marker for each strand, so a space or a service can be labelled the same
   way a news category is. The dot never appears without its word. */
.marker--workspaces   { --m: var(--workspaces); }
.marker--consultancy  { --m: var(--consultancy); }
.marker--mobility     { --m: var(--mobility); }
.marker--volunteering { --m: var(--volunteering); }

/* A hero whose subject fills the frame top to bottom cannot take the 21:9 band
   without losing the top of a head and the bottom of a wheel. */
.media-hero--tall { aspect-ratio: 4 / 3; }

/* Display type large enough to break a viewport gets a scale, not a fixed px. */
.t-display-66 { font-size: 66px; line-height: 0.98; }
.band__title, .lead__title, .t-display-xl, .t-display-l, .card__title { overflow-wrap: break-word; }

/* The article's metadata column, which the comp pinned inline to column 10. */
.meta-right { grid-column: 10 / span 3; }

/* Numbers, then the count. On a narrow viewport the count takes its own line
   rather than pushing the page sideways. */
.pagination { flex-wrap: wrap; row-gap: var(--s-3); }


/* --------------------------------------------------------------------------
   24. Responsive — ORDER MATTERS.

   Everything above is the base layer. These two blocks must be the LAST
   declarations in the file and must stay in this order: an unmediated rule
   later in the source beats a mediated rule earlier in it, so any base rule
   that appears after a media query silently wins inside that query's range.
   Two breakpoints, and they are deliberately different:

     1180px — the NAVIGATION breakpoint. Seven nav items plus the Book now
              button need ~1150px before the 80px page gutters, so the
              horizontal nav has to fold well before the layout does. A few
              compositions that also run out of room in this band fold here.
     900px  — the LAYOUT breakpoint. Twelve columns become one.

   Collapsing both at 900px leaves 901–1180px (laptop and tablet-landscape)
   with no layout that fits, and pushes Book now off the right edge.

   If you refactor: check 960, 1024 and 1180px on /the-circle-consultancy/,
   /social-impact/ and /just-enterprise/ — the home page passes even when
   this is broken — and confirm scrollWidth === innerWidth at each.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  /* An intermediate type scale, so display sizes step 76 → 56 → 46 rather
     than falling off a cliff at one breakpoint. */
  :root {
    --type-display-xl: 800 56px/0.97 var(--font-display);
    --type-display-l:  800 42px/1.02 var(--font-display);
    --type-h2:         700 32px/1.10 var(--font-display);
  }

  .masthead__inner { position: relative; }

  .nav {
    display: none;
    position: absolute; inset: 100% 0 auto 0;
    z-index: 40;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px var(--gutter) var(--s-5);
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .nav[data-open='true'] { display: flex; }
  .nav__link {
    min-height: 60px;
    font-size: 24px; font-weight: 600;
    border-bottom: 1px solid var(--rule);
  }
  .nav__link[aria-current='page']::after { display: none; }
  .nav__link[aria-current='page'] { font-weight: 800; }
  .nav .btn--primary { margin-top: var(--s-4); margin-left: 0; }
  .nav__toggle {
    display: flex; align-items: center; justify-content: center;
    width: var(--target); height: var(--target);
    background: none; border: 1px solid rgba(26, 26, 24, 0.3);
    border-radius: var(--radius); cursor: pointer;
  }

  /* A split hero has ~257px of text left in this band, which breaks the H1
     to "The / Circle". Stack it instead. */
  .hero { grid-template-columns: 1fr; }
  .hero__body, .hero__media { grid-column: 1 / -1; }
  .hero__body { padding: var(--s-7) var(--gutter); }
  .hero__media > img { aspect-ratio: 21 / 9; height: auto; }

  .finder { grid-template-columns: 1fr 1fr; }
  .finder > button { grid-column: 1 / -1; }

  .stats, .stats--5 { grid-template-columns: repeat(3, 1fr); }
  .stat { padding-right: var(--s-3); border-bottom: 1px solid var(--rule); }
  .stat:nth-child(3n) { border-right: 0; }
  .stat__n { font-size: 46px; }

  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  /* Eleven vehicles two-up is a scroll nobody finishes. */
  .vehicles { grid-template-columns: repeat(3, 1fr); }
  .logo-wall { grid-template-columns: repeat(6, 1fr); }
  .lead__title { font-size: 34px; }

  .steps { grid-template-columns: 1fr; }
  .step__n { font-size: 76px; }

  .impact > li { grid-template-columns: 1fr; gap: var(--s-2); }
  .impact__n, .impact__l { grid-column: 1 / -1; }
  .impact__n { font-size: 48px; }
  .impact__l { font-size: 20px; }
}

@media (max-width: 900px) {
  :root {
    --gutter: 20px;
    --gap:    20px;
    --type-display-xl: 800 46px/0.96 var(--font-display);
    --type-display-l:  800 34px/1.02 var(--font-display);
    --type-h2:         700 28px/1.10 var(--font-display);
    --type-h3:         700 21px/1.20 var(--font-display);
    --type-intro:      400 20px/1.50 var(--font-text);
    --type-body:       400 17px/1.60 var(--font-text);
    --s-8: 56px;
    --s-9: 64px;
  }

  .grid, .band__inner, .lead, .section-head, .strip { grid-template-columns: 1fr; }
  .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8,
  .band__main, .band__aside, .lead__media, .lead__body,
  .strip__field, .strip__media,
  .section-head > h2, .section-head > p { grid-column: 1 / -1; }
  .start-6, .start-8, .start-9 { grid-column-start: 1; }

  .strip--rev .strip__media { order: -1; }
  .strip__field, .strip--rev .strip__field { padding: var(--s-6) var(--gutter); }
  .strip__media { min-height: 0; }
  .strip__media > img { aspect-ratio: 16 / 9; height: auto; }

  .cards, .cards--4 { grid-template-columns: 1fr; }
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
  .logo-row > img { height: 44px; }

  /* Two-up: eleven single-column photographs is a scroll nobody finishes. */
  .vehicles { grid-template-columns: 1fr 1fr; }

  .stats, .stats--3, .stats--5 { grid-template-columns: 1fr 1fr; }
  .stat { padding-right: var(--s-3); border-bottom: 1px solid var(--rule); }
  .stat:nth-child(odd) { border-right: 1px solid var(--rule); }
  .stat:nth-child(even) { border-right: 0; padding-left: var(--s-3); }
  .stat__n { font-size: 40px; }

  .quote__p { font-size: 25px; }
  .lead__title { font-size: 29px; }
  .article__body > p { font-size: 18px; }
  .article__body > .lede { font-size: 21px; }

  .form { grid-template-columns: 1fr; }
  .field--full { grid-column: span 1; }

  .masthead__inner { padding: 14px var(--gutter); }
  .masthead__wordmark { font-size: 20px; }

  .footer__legal { flex-direction: column; gap: var(--s-3); }

  .hero, .feature { grid-template-columns: 1fr; }
  .hero__body, .hero__media, .feature__body, .feature__media { grid-column: 1 / -1; }
  .hero__body { padding: var(--s-6) var(--gutter); }
  .feature__body, .feature--rev .feature__body { padding: var(--s-5) 0 0; }
  .feature--rev .feature__media { order: -1; }
  .hero__media > img { aspect-ratio: 4 / 3; height: auto; }
  .finder, .steps { grid-template-columns: 1fr; }
  .step__n { font-size: 64px; }
  .highlight--inset { padding: var(--s-5) var(--s-4); }
  .tile { grid-template-columns: 1fr; min-height: 0; padding: var(--s-5); }
  .tile__title { font-size: 26px; }
  .impact > li { grid-template-columns: 1fr; gap: var(--s-2); }
  .impact__n, .impact__l { grid-column: 1 / -1; }
  .impact__n { font-size: 44px; }
  .impact__l { font-size: 19px; }
  .step__n { font-size: 64px; }
  .chart { height: 60px; }
  .chart__seg { padding-left: 12px; }
  .chart__label { font-size: 21px; }
  .stats--5 { grid-template-columns: 1fr 1fr; }
  .aside-sticky { position: static; }
}


/* --------------------------------------------------------------------------
   25. Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Video stays a still until the visitor presses play. */
  video[autoplay] { display: none; }
}

@media print {
  .masthead, .footer, .nav, .video__play, .skip-link { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band { background: none !important; color: #000; border-bottom: 1pt solid #000; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}


/* --------------------------------------------------------------------------
   26. Late overrides.

   These come after §24 and §25 deliberately. The responsive blocks put rules
   back on every statistic at each breakpoint, and the only way to take a rule
   off at every width is to say so after them.
   -------------------------------------------------------------------------- */

.stats, .stats--2, .stats--3, .stats--5 { border-top: 0; }
.stat, .stat:last-child, .stat:nth-child(odd), .stat:nth-child(even), .stat:nth-child(3n) {
  border: 0;
}

/* --------------------------------------------------------------------------
   27. Responsive additions for §21, §22 and §23b.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .cards--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .t-display-66 { font-size: 50px; }
}

@media (max-width: 900px) {
  .grid--2, .cards--2, .cards--3 { grid-template-columns: 1fr; }

  /* A reversed band or feature row places its media with two classes, which
     outweighs the single-class rule that collapses the grid at this width — so
     the photograph kept a seven-column placement in a one-column grid and came
     out zero pixels wide. On the home page that was the Consultancy photograph
     missing on every phone; on Workspaces, the office one. */
  .strip--rev .strip__media, .strip--rev .strip__field,
  .feature--rev .feature__media, .feature--rev .feature__body { grid-column: 1 / -1; }

  .strip__media { aspect-ratio: 16 / 9; }
  .strip__media > img { aspect-ratio: auto; height: 100%; }
  .logo-row > img { height: 62px; }
  .logo-wall { gap: var(--s-4) var(--s-3); }
  /* Headshots go two-up for the same reason the vehicles do: twelve
     single-column photographs is a scroll nobody finishes. */
  .cards--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta-right { grid-column: 1 / -1; }
  .t-display-66 { font-size: 40px; line-height: 1; }
  .filters { gap: 2px 20px; }
  .filter { font-size: 18px; }
  .article__body > h3 { font-size: 22px; }
  .article__body > ul > li, .article__body > ol > li { font: 400 18px/1.65 var(--font-text); }
  .article__body > ol > li::before { font-size: 18px; }
  .article__body > ul > li::before { margin-top: 11px; }
  .article__body > blockquote p { font-size: 21px; }
  .embed { max-width: 100%; }
}


/* --------------------------------------------------------------------------
   28. WordPress.

   The classes content edited in WordPress can carry: screen-reader text,
   the classic alignment and caption classes, and block-editor images.
   Everything else the archive uses is already covered by §22.
   -------------------------------------------------------------------------- */

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.article__body .alignleft { float: left; margin: 6px 28px 14px 0; }
.article__body .alignright { float: right; margin: 6px 0 14px 28px; }
.article__body .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.article__body .wp-caption { max-width: 100%; }
.article__body .wp-caption-text { font: var(--type-meta); color: var(--ink-2); margin-top: var(--s-2); max-width: 70ch; }
.article__body .wp-block-image img { height: auto; }

@media (max-width: 700px) {
  .article__body .alignleft, .article__body .alignright { float: none; margin: 0 0 var(--s-4); }
}