/*
 * Module layer — the Figma Website Module Library.
 *
 * Every colour paints from a colourway custom property, never from a brand
 * token directly. That is what makes the CMS colour select repaint a whole
 * block, and it is why no rule below names a hex.
 *
 * MOBILE FIRST. The source wireframe was desktop-first with one override; the
 * two layout defects that caused are fixed here and stay fixed.
 */

/* ── Shared shell ─────────────────────────────────────────────────────── */

/*
 * THE SHARED MODULE HEAD (#82, #83). Eyebrow left, title and intro right, on
 * module 3's 824 / 804 split — but only where the head is the module's own
 * child. Inside the form block or the FAQ the head is already in a right-hand
 * column, and splitting it again would indent it twice.
 */
.ema-module__head { max-width: none; margin: 0 0 var(--gap); }

/* 50px under the heading — the same rhythm as the columns — so the cards or
   rows below do not crowd the intro (#87). */
.ema-module > .ema-module__head { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 50px; }
@media (min-width: 760px) {
  .ema-module > .ema-module__head { grid-template-columns: 824fr 804fr; gap: 0; }
}
.ema-module__head-aside > * { margin: 0; }
/* Space between the headline and the intro under it (#81). */
.ema-module__head-main { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.ema-module__head-main > * { margin: 0; }

/* An empty head — a module with no heading at all — takes no room, so what
   follows lines up with the eyebrow beside it (#79). */
.ema-module__head:not(:has(.ema-eyebrow, .ema-module__title, .ema-module__intro)) { display: none; }

/*
 * ⚠️ CORRECTED against the frames. The eyebrow is Figtree Light at 20px in the
 * ink colour — NOT the uppercase, letterspaced, accent-coloured micro-label I
 * had built. It reads as a quiet line of normal text, and it sits in the left
 * column rather than above the title on the modules that are two-column.
 */
.ema-eyebrow {
  margin: 0 0 .75rem;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cw-ink);
}

.ema-module__title { margin: 0 0 .5rem; font-size: var(--t-h2); }
.ema-module__intro { margin: 0; color: var(--cw-ink-soft); max-width: 46rem; font-size: var(--t-intro); line-height: 1.4; }

.ema-module__actions {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: center; margin: var(--gap) 0 0;
}

/* Editor-facing only — never rendered for a visitor. */
.ema-module__empty {
  border: 1px dashed var(--cw-rule);
  color: var(--cw-ink-soft);
  padding: .75rem 1rem;
  font-size: var(--t-small);
}

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

/* ── Buttons ──────────────────────────────────────────────────────────── */

/* Exact from the frames: 15px padding, 1.5px border, 5px radius, 18px light. */
.ema-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: var(--btn-pad);
  border: var(--border-w) solid var(--cw-ink);
  border-radius: var(--r-button);
  background: none;
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--fw-light);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  color: var(--cw-ink);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

/*
 * EVERY button starts as a key-line and FILLS on hover (#67, #68) — the solid
 * variant used to start filled and empty out, which read backwards against the
 * rest of the site. The class stays so existing content keeps working.
 */
.ema-btn:hover,
.ema-btn:focus-visible,
.ema-btn--solid:hover,
.ema-btn--solid:focus-visible,
.ema-btn--outline:hover,
.ema-btn--outline:focus-visible { background: var(--cw-ink); color: var(--cw-bg); }
.ema-btn--text:hover, .ema-btn--text:focus-visible { background: none; color: var(--cw-ink); }

/* A card-sized button (#74) — a full-height one would dominate a card. */
.ema-btn--small { padding: 5px 12px; font-size: var(--tag-size); border-width: 1px; }

/*
 * Underlined text links (BugHerd #13). The underline is drawn, not a text
 * decoration: on hover it redraws from left to right, ease-in-out, instead of
 * getting thicker. Applies to every underlined text link — the secondary link,
 * "Read more", and links inside body copy.
 */
.ema-btn--text {
  padding: 0; border: 0;
}
.ema-btn--text,
.ema-section__body a,
.ema-article__body a,
.ema-faq__answer a,
.ema-accordion__panel a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: .12em;
}
.ema-btn--text:hover,
.ema-btn--text:focus-visible,
.ema-section__body a:hover,
.ema-article__body a:hover,
.ema-faq__answer a:hover,
.ema-accordion__panel a:hover {
  animation: ema-underline-draw .5s ease-in-out;
}
@keyframes ema-underline-draw {
  from { background-size: 0 1px; }
  to   { background-size: 100% 1px; }
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--cw-accent);
  outline-offset: 3px;
}

/* ── Chips ────────────────────────────────────────────────────────────── */

.ema-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  /* The lozenge tokens, so every tag on the site is the same 30px pill (#69). */
  padding: var(--tag-pad);
  margin: 0;
  border: 1px solid var(--cw-rule);
  border-radius: var(--r-pill);
  font-size: var(--tag-size);
  line-height: 1.3;
  color: var(--cw-ink-soft);
  text-decoration: none;
}

/*
 * ⚠️ A chip is a flex CHILD of the card body, which is a column — so on its own
 * it stretches the full width of the card and a second one lands underneath the
 * first (#66, #69). Chips that belong together go in this row; a lone chip
 * shrinks to its own text.
 */
/* A lozenge row sits clear of the title under it (#102). */
.ema-card__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.ema-card__body > .ema-chip { align-self: flex-start; margin-bottom: 8px; }

/*
 * ⚠️ THE OUTCOME PILL NO LONGER CARRIES THE OUTCOME'S COLOUR (#76, #77).
 * Collective Objective asked for one treatment everywhere: white fill, purple
 * key-line, purple copy. The outcome palette stays defined — the outcome is
 * still data, and the card and chip classes still carry it — but it is not what
 * paints this pill.
 */
.ema-chip--outcome {
  border-color: var(--c-primary-purple);
  background: var(--c-white);
  color: var(--c-primary-purple);
}
.ema-chip--outcome .ema-chip__qualifier { color: var(--c-primary-purple); }


/* ── Grid ─────────────────────────────────────────────────────────────── */

/*
 * ⚠️ THREE ACROSS, not an auto-fill. Every Card Collection frame — Project
 * (680:1253), News (680:1255), Audiences (680:1359) — draws three cards of
 * 530.8px on a 20px gap across the 1628 measure. auto-fill was producing four
 * or five at full width, which is why the cards read smaller than the design.
 *
 * ⚠️ This block was DEFINED TWICE, forty lines apart, with different values.
 * The second silently won. One definition now.
 */
.ema-grid {
  display: grid;
  grid-template-columns: 1fr;      /* one column at 320px — no sideways scroll */
  gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 480px)  { .ema-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ema-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/*
 * THE WHOLE CARD IS CLICKABLE (#96, #97, #101). The title keeps the real link —
 * one link per card, so a screen reader still hears one destination and the
 * card is not a pile of duplicates — and that link's ::after covers the card.
 * Anything else that is itself a link or a button sits above the overlay, so a
 * chip, a "Visit website" button or the image's own link still work.
 */
.ema-card { position: relative; }
.ema-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ema-card :is(.ema-card__actions, .ema-card__chips, .ema-chip--link, .ema-btn, .ema-card__media) { position: relative; z-index: 2; }

/* Hovering anywhere on the card draws the title's underline, so it reads as a
   single target rather than a page of text with one live word in it. */
.ema-card:hover .ema-card__title a,
.ema-card:focus-within .ema-card__title a { background-size: 100% 1px; }
.ema-card:hover { cursor: pointer; }

.ema-card {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 20px 20px 50px;
  border-radius: var(--r-card);
  background: var(--card-bg, var(--c-light-blue));
  /*
   * ⚠️ ONE INK PER CARD (BugHerd #88–#92, #104). Every element inside a card
   * used to name the purple itself, so a dark card had to re-state white for
   * each one — and whatever was added later (the SDG line, the credits badge,
   * the body copy) stayed purple and disappeared into the ground. The card sets
   * --card-ink once; children inherit it or read the variable.
   */
  color: var(--card-ink, var(--c-primary-purple));
  min-width: 0;
}

/* The dark grounds. Anything listed here takes white type throughout. */
.ema-card.is-dark,
.ema-m-cards:is(.ema-cards--colour-blue, .ema-cards--colour-purple, .ema-cards--colour-teal, .ema-cards--colour-maroon, .ema-cards--colour-brown) .ema-grid > .ema-card,
.ema-m-directory .ema-grid > .ema-card:nth-child(3n+2) { --card-ink: var(--c-white); }

/*
 * ⚠️ FILL IS PER SOURCE. This was one universal four-step rotation on every
 * card grid, which is wrong twice over: Project rotates through THREE tints,
 * and News and Audiences do not rotate at all — every card is Light Blue.
 *
 *   Project    (680:1253)  light blue → light maroon → light brown
 *   News       (680:1255)  light blue throughout
 *   Audiences  (680:1359)  light blue throughout
 *
 * ⚠️ The other three sources — Standards, Credit types, Documents, People —
 * are NOT DRAWN. They inherit the Project rotation as a working assumption.
 */
.ema-grid > .ema-card { --card-bg: var(--c-light-blue); }

.ema-cards--projects .ema-grid > .ema-card:nth-child(3n+1),
.ema-grid > .ema-card:nth-child(3n+1) { --card-bg: var(--c-light-blue); }
.ema-cards--projects .ema-grid > .ema-card:nth-child(3n+2),
.ema-grid > .ema-card:nth-child(3n+2) { --card-bg: var(--c-light-maroon); }
.ema-cards--projects .ema-grid > .ema-card:nth-child(3n+3),
.ema-grid > .ema-card:nth-child(3n+3) { --card-bg: var(--c-light-brown); }

/*
 * An editor's card colour (BugHerd #19, #24, #30) overrides the per-source
 * default. The extra :nth-child(n) lifts these above the source rules without
 * reaching for !important. Blue and Purple cards take white text.
 */
.ema-m-cards.ema-cards--colour-light-blue   .ema-grid > .ema-card:nth-child(n) { --card-bg: var(--c-light-blue); }
.ema-m-cards.ema-cards--colour-light-teal   .ema-grid > .ema-card:nth-child(n) { --card-bg: var(--c-light-teal); }
.ema-m-cards.ema-cards--colour-light-maroon .ema-grid > .ema-card:nth-child(n) { --card-bg: var(--c-light-maroon); }
.ema-m-cards.ema-cards--colour-light-brown  .ema-grid > .ema-card:nth-child(n) { --card-bg: var(--c-light-brown); }
.ema-m-cards.ema-cards--colour-blue         .ema-grid > .ema-card:nth-child(n) { --card-bg: var(--c-blue); }
.ema-m-cards.ema-cards--colour-purple       .ema-grid > .ema-card:nth-child(n) { --card-bg: var(--c-primary-purple); }
/* The rest of the dark palette (#105). The chooser offered only Blue and
   Purple, so Teal, Maroon and Brown could not be picked even though the
   dark-ink rule above already accounted for them. */
.ema-m-cards.ema-cards--colour-teal         .ema-grid > .ema-card:nth-child(n) { --card-bg: var(--c-teal); }
.ema-m-cards.ema-cards--colour-maroon       .ema-grid > .ema-card:nth-child(n) { --card-bg: var(--c-maroon); }
.ema-m-cards.ema-cards--colour-brown        .ema-grid > .ema-card:nth-child(n) { --card-bg: var(--c-brown); }
.ema-m-cards.ema-cards--colour-rotate .ema-grid > .ema-card:nth-child(3n+1) { --card-bg: var(--c-light-blue); }
.ema-m-cards.ema-cards--colour-rotate .ema-grid > .ema-card:nth-child(3n+2) { --card-bg: var(--c-light-maroon); }
.ema-m-cards.ema-cards--colour-rotate .ema-grid > .ema-card:nth-child(3n+3) { --card-bg: var(--c-light-brown); }

/* Card text, lozenges and badges all read from --card-ink now, so a dark
   ground needs no per-element rules. */

/* News and Audiences hold one tint the whole way along. */
.ema-cards--news .ema-grid > .ema-card,
.ema-cards--audiences .ema-grid > .ema-card { --card-bg: var(--c-light-blue); }

.ema-card__media { display: block; margin: 0; border-radius: var(--r-media); overflow: hidden; }
.ema-card__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 493 / 355; }

.ema-card__placeholder {
  display: block; aspect-ratio: 493 / 355; border-radius: var(--r-media);
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--c-primary-purple) 7%, transparent) 0 10px,
    color-mix(in srgb, var(--c-primary-purple) 12%, transparent) 10px 20px);
}

.ema-card__body { display: flex; flex-direction: column; gap: .5rem; padding: 0; }

/* Figtree, 30px — not the display face. */
/* A row of buttons inside a card (#74). */
.ema-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ema-card__actions .ema-btn { border-color: currentColor; color: inherit; }
.ema-card__actions .ema-btn:hover,
.ema-card__actions .ema-btn:focus-visible { background: var(--card-ink, var(--c-primary-purple)); color: var(--card-bg, var(--c-light-blue)); }

.ema-card__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 30px;
  line-height: 1.15;
  color: inherit;
}
/* The underline DRAWS in on hover, like every other text link (#13, #66). */
.ema-card__title a {
  text-decoration: none;
  color: inherit;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  padding-bottom: .08em;
  transition: background-size .5s ease-in-out;
}
.ema-card__title a:hover,
.ema-card__title a:focus-visible { background-size: 100% 1px; }
.ema-card__qualifier { color: color-mix(in srgb, currentColor 70%, transparent); }

/* ⚠️ These two named the purple themselves, which is the very thing #92 set out
   to remove: an explicit colour here beats the card's inherited --card-ink, so
   a person's biography stayed purple on a dark blue card (#104, reopened).
   Nothing inside a card sets its own colour — the card owns the ink. */
.ema-card__meta,
.ema-card__body-copy {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.45;
  color: inherit;
  max-width: 26rem;
}

.ema-card__credits { margin: 0; }
.ema-card__more { margin: 0; font-size: var(--t-body); }
/* Lozenges inside a card: one line weight everywhere and a clear ground, so a
   tag reads the same as the credits badge beside it (#91). */
.ema-card .ema-chip { border-color: currentColor; background: transparent; color: inherit; }

/* The card's one action, drawn as a small lozenge tag. */
.ema-card__badge {
  align-self: flex-start;
  margin: 0;
  padding: var(--tag-pad);
  font-size: var(--tag-size);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  line-height: 1.3;
  color: inherit;
}

/* One line — "SDG 6, 13, 14, 15" (#66). */
.ema-sdg {
  margin: 0;
  font-size: var(--t-small);
  /* Follows the card it sits in, so it stays legible on a dark ground (#90). */
  color: color-mix(in srgb, currentColor 80%, transparent);
}
.ema-sdg abbr { text-decoration: none; }

.ema-card--door-invest      { --card-bg: var(--c-light-teal); }
.ema-card--door-participate { --card-bg: var(--c-light-maroon); }

/* Text-only display · one of the three display toggles, one pattern. */
.ema-m-cards--text .ema-card__media { display: none; }

/* ── 1 · Hero ─────────────────────────────────────────────────────────── */
/*
 * THE HERO STATEMENT IS FIGTREE LIGHT, NOT THE DISPLAY FACE — the display face
 * is kept for section titles and the wordmark.
 *
 * ⚠️ REWORKED FROM BUGHERD #1, #2, #6, #36, #39 (15 Sep 2026).
 *
 *  · THE KEY-LINE AND THE BLUR. Collective Objective's rule: "when there is a
 *    key-line on an image, any part of the image under the key-line should be
 *    blurred". So the statement and buttons sit in a band that runs the full
 *    width of the image, the band blurs whatever is behind it with
 *    backdrop-filter, and its top edge IS the key-line. Because the blur is
 *    applied to what is behind the band rather than baked into a second copy
 *    of the photograph, it works automatically over any image — and over
 *    video. This is what the second image layer in the Figma framed frame was
 *    doing; it replaces the gradient scrim.
 *
 *  · FULL BLEED IS EDGE TO EDGE at any width. The statement, buttons and badge
 *    still line up with the logo and the Enquire button, via --edge.
 *
 *  · FRAMED sits on the page's content width, so the image itself lines up
 *    with the logo (#36), with the colour version painting the band around it.
 */

.ema-m-hero { padding: 0; }
.ema-m-hero > * { max-width: none; padding-inline: 0; }


.ema-hero--framed .ema-hero__frame {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--frame-inset) var(--gutter);
  background: var(--cw-bg);
}
/* Inside a framed image the content insets from the image's own edge, and the
   key-line sits at the image's midpoint. */
.ema-hero--framed { --edge: var(--gutter); }
.ema-hero--framed .ema-hero__content { min-height: 50%; }

/*
 * ⚠️ width: 100% IS LOAD-BEARING. On a phone the 60vw minimum height beats the
 * aspect ratio, and with no definite width the browser widens the box to keep
 * the ratio — the hero came out wider than the screen and every page with one
 * scrolled sideways. A definite width makes the ratio set the height instead,
 * and the minimum height can only make it taller.
 */
.ema-hero__media { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1728 / 880; min-height: 60vw; background: var(--cw-bg); }
/* The framed hero is a different shape: 1628 x 722 against 1728 x 880. */
.ema-hero--framed .ema-hero__media { aspect-ratio: 1628 / 722; }
@media (min-width: 760px) { .ema-hero__media { min-height: 0; } }

/*
 * THE HERO FITS THE SCREEN (#43). On a laptop the 1728 x 880 shape plus the
 * header ran past the bottom of the window, taking the statement and buttons
 * with it. The height is capped at the screen height less whatever sits above
 * the hero (header, admin bar), measured by hero-gallery.js into --ema-hero-top.
 * The image crops rather than squashes. The 520px floor keeps the band's text
 * from outgrowing the image on a very short window.
 */
@media (min-width: 760px) {
  .ema-hero--full-bleed .ema-hero__media {
    max-height: max(520px, calc(100svh - var(--ema-hero-top, 100px)));
  }
  .ema-hero--framed .ema-hero__media {
    max-height: max(520px, calc(100svh - var(--ema-hero-top, 100px) - 2 * var(--frame-inset)));
  }
}

.ema-hero__track { display: flex; margin: 0; padding: 0; list-style: none; transition: transform .4s ease; height: 100%; }
.ema-hero__slide { flex: 0 0 100%; min-width: 0; }
.ema-hero__image,
.ema-hero__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ema-hero__placeholder { display: block; width: 100%; height: 100%; background: color-mix(in srgb, var(--c-primary-purple) 12%, var(--c-white)); }

/* The old gradient scrim is retired — the blurred band does its job. */
.ema-hero__scrim { display: none; }

/* The band: blurs what is behind it; its top border is the key-line. */
.ema-hero__content {
  position: absolute; inset: auto 0 0 0;
  /* Where the line sits is part of the design, not a by-product of how much
     text there is: about a third of the way up on full bleed (Collective
     Objective's reference for #1), halfway on framed (683:104). A short
     statement still gets a band that tall, with its text at the bottom. */
  min-height: 36%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 50px var(--edge) 50px;
  color: var(--c-white);
  border-top: 1px solid rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(22px) saturate(1.05);
          backdrop-filter: blur(22px) saturate(1.05);
  /* A light tint under the blur, so white type keeps its contrast even over a
     pale sky. The blur alone does not guarantee that. */
  background: rgba(28, 18, 10, .22);
}
/* Where backdrop-filter is unsupported, a firmer tint keeps the text legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ema-hero__content { background: rgba(28, 18, 10, .55); }
}

/* A lozenge inside any hero — a project's "Credits-for-sale", for instance —
   is white and sized to its own text, rather than stretched the width of the
   image by the column it sits in (#88, #89). */
.ema-hero__content > .ema-chip {
  align-self: flex-start;
  width: fit-content;
  margin: 0 0 16px;
  border-color: var(--c-white);
  background: transparent;
  color: var(--c-white);
}

/*
 * The audience header's tag: a white key-line pill above the title, sized to
 * its own text (#84). #80 took the pill away because it was stretching the
 * full width of the header — the stretch was the fault, not the pill.
 */
.ema-hero__eyebrow {
  align-self: flex-start;
  width: fit-content;
  margin: 0 0 16px;
  padding: var(--tag-pad);
  border: 1px solid var(--c-white);
  border-radius: var(--r-pill);
  font-size: var(--tag-size);
  line-height: 1.3;
  color: var(--c-white);
}

.ema-hero__statement {
  max-width: 1014px;
  margin: 0 0 30px;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--t-h2);
  line-height: var(--lh-display);
  color: var(--c-white);
}
.ema-hero__content > :last-child { margin-bottom: 0; }

/* The ENVOMARK Assured ribbon, hung from the top edge — HALF its former size
   (#2): 78 x 124 at full width, still aligned to the content edge. */
.ema-hero__badge {
  position: absolute; top: 0; right: var(--edge); z-index: 2;
  margin: 0; width: clamp(48px, 4.5vw, 78px);
}
.ema-hero__badge img { display: block; width: 100%; height: auto; }

/* Hero buttons are a white KEY-LINE that fills white on hover (#6). */
.ema-hero__content .ema-btn {
  border-color: var(--c-white); color: var(--c-white); background: transparent;
  transition: background-color .25s ease, color .25s ease;
}
.ema-hero__content .ema-btn:not(.ema-btn--text):hover,
.ema-hero__content .ema-btn:not(.ema-btn--text):focus-visible { background: var(--c-white); color: var(--c-primary-purple); }
.ema-hero__content .ema-btn--text { border: 0; padding: 8px 0; }

/*
 * TWO-THIRDS (BugHerd #56) — the sub-page hero. The image fills the top two
 * thirds of the screen and the heading sits under it on the module's colour,
 * so every light and dark colourway works with no extra rules: the band takes
 * --cw-bg and --cw-ink like any other module ground. The key-line is the
 * band's top border in the ink colour, which is what runs along the bottom
 * edge of the image.
 *
 * The band is NOT overlaid, so there is no blur here — the type sits on a flat
 * ground and the contrast is the colourway's own.
 */
/*
 * THE WHOLE MODULE FILLS THE SCREEN, and the split inside it is two thirds
 * image to one third colour. The band is sized by the SCREEN, not by how many
 * lines the heading runs to (Collective Objective, #56) — so the colour always
 * reaches the bottom of the window, and a long heading grows the band beyond
 * its third rather than leaving a gap under it.
 */
.ema-hero--two-thirds .ema-hero__frame {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--ema-hero-top, 100px));
}
/* The image is a fixed two thirds of the screen… */
.ema-hero--two-thirds .ema-hero__media {
  aspect-ratio: auto;
  flex: 0 0 auto;
  height: max(240px, calc((100svh - var(--ema-hero-top, 100px)) * 2 / 3));
}
/* …and the band takes the remaining third, whatever the heading runs to. A
   heading long enough to need more grows the band rather than being cramped. */
.ema-hero--two-thirds .ema-hero__band {
  flex: 1 0 auto;
  min-height: calc((100svh - var(--ema-hero-top, 100px)) / 3);
}

.ema-hero--two-thirds .ema-hero__band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: var(--frame-inset) var(--edge);
  border-top: 1px solid var(--cw-ink);
  background: var(--cw-bg);
  color: var(--cw-ink);
}

/* The same 824 / 804 split every other two-column module uses. */
@media (min-width: 760px) {
  .ema-hero--two-thirds .ema-hero__band { grid-template-columns: 824fr 804fr; gap: 0; }
}

.ema-hero--two-thirds .ema-hero__band-main { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; min-width: 0; }
.ema-hero--two-thirds .ema-hero__band-main > * { margin: 0; }

/* The heading here is the DISPLAY face, like a section title — not the Figtree
   Light statement that sits over a full-bleed image. */
.ema-hero--two-thirds .ema-hero__statement {
  max-width: none;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-h2);
  line-height: 1.25;
  color: var(--cw-ink);
}

/* The section lozenge: a key-line pill, sized to its text. */
.ema-hero__section {
  display: inline-block;
  margin: 0;
  padding: var(--tag-pad);
  border: 1px solid var(--cw-ink);
  border-radius: var(--r-pill);
  font-size: var(--tag-size);
  line-height: 1.3;
  color: var(--cw-ink);
}

/* Buttons on the band are the page's own outline buttons, not the white
   over-image ones. */
.ema-hero--two-thirds .ema-hero__band .ema-btn { border-color: var(--cw-ink); color: var(--cw-ink); background: transparent; }
.ema-hero--two-thirds .ema-hero__band .ema-btn:not(.ema-btn--text):hover,
.ema-hero--two-thirds .ema-hero__band .ema-btn:not(.ema-btn--text):focus-visible { background: var(--cw-ink); color: var(--cw-bg); }

.ema-hero__controls { position: absolute; right: var(--edge); bottom: 1.5rem; z-index: 2; display: flex; gap: .5rem; align-items: center; }
.ema-hero__controls .ema-carousel__btn { color: var(--c-white); }
.ema-profile__location { margin: 0; color: var(--c-white); }

/* ── Key-line on a module's top edge ─────────────────────────────────── */
/* It spans the module's content box, which is already logo-to-Enquire wide. */
/*
 * BugHerd #14 reference: a 1px rule in the module's text colour, the width of
 * the content area — logo margin to Enquire margin — with the content starting
 * 50px below it. The line sits on the module's top edge, so the module above
 * keeps its full bottom spacing and the line reads as the divider between the
 * two.
 */
.ema-module.has-keyline { padding-top: 0; }
.ema-module.has-keyline::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 0 50px;
  background: currentColor;
  opacity: .9;
}

/* ── 2 · Large Type Statement ─────────────────────────────────────────── */
/*
 * ⚠️ CORRECTED FROM THE FRAME (677:1038). This was a 736px measure topping out
 * at 28px — a large paragraph. It is DISPLAY TYPE: Figtree Light 45px, the
 * same size as the hero statement, on a 1319px measure, and the frame sets it
 * on Primary Purple. The frame is labelled "A", so the colourway select is
 * exactly the control the variants need — no per-variant markup.
 *
 * 1319/1628 of the content measure, so it holds its proportion at every width
 * rather than snapping to a fixed pixel count.
 */

.ema-statement {
  max-width: 81%; margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--t-h2);
  line-height: var(--lh-display);
}

/* ── 3 · Standard Content & Image — the workhorse ─────────────────────── */
/*
 * Eyebrow left, content right, 50px between the title, body and buttons.
 * Title is PP Fragment at 45px / 1.25; body is Figtree Light 18px.
 *
 * The source sets `1fr 1.05fr` INLINE, outside its only media query, so the
 * most-used module on the site stayed two-column at 320px. Single column here
 * until the medium breakpoint, eyebrow above.
 */

/*
 * ⚠️ ALL THREE VARIANTS NOW READ FROM FRAMES — No Image (677:1092), Single
 * Image (677:1109), Double Image (677:1126). The markup was already right:
 * media nests INSIDE the right-hand column, between the body and the buttons,
 * on the same 50px rhythm as everything else in that column. The values were
 * not.
 *
 *   · the split is 824 / 804 of a 1628 measure, NOT an even half — the eyebrow
 *     column is slightly the wider of the two, and the two are flush with no
 *     gutter between them
 *   · single image is 804 x 500, the full width of the column
 *   · double is two PORTRAIT images, 392 x 496 each, on a 20px gap
 *   · no corner radius on any of them — these are square, unlike card media
 */

.ema-section { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 760px) {
  .ema-section { grid-template-columns: 824fr 804fr; gap: 0; }
}

.ema-section__main { display: flex; flex-direction: column; gap: 50px; align-items: flex-start; }
.ema-section__main > * { margin: 0; }

.ema-section__title {

  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-h2);
  line-height: 1.25;
  color: var(--cw-ink);
}

.ema-section__body { margin: 0; font-size: var(--t-body); font-weight: var(--fw-light); color: var(--cw-ink); }
/* A step larger than the body copy under it (#53). */
.ema-section__intro { margin: 0; font-size: var(--t-intro); line-height: 1.4; font-weight: var(--fw-light); color: var(--cw-ink); }
.ema-section__body > :first-child { margin-top: 0; }
.ema-section__body > :last-child { margin-bottom: 0; }

.ema-section__media { display: grid; gap: 20px; margin: 0; width: 100%; }
.ema-section__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }

/* 804 x 500 — landscape, the full width of the column. */
.ema-section--images-single .ema-section__media { grid-template-columns: 1fr; }
.ema-section--images-single .ema-section__media img { aspect-ratio: 804 / 500; }

/* 392 x 496 each — PORTRAIT, side by side on a 20px gap. They stack on a
   narrow screen, where two 392px columns cannot both fit. */
.ema-section--images-double .ema-section__media { grid-template-columns: 1fr; }
.ema-section--images-double .ema-section__media img { aspect-ratio: 392 / 496; }
@media (min-width: 480px) {
  .ema-section--images-double .ema-section__media { grid-template-columns: 1fr 1fr; }
}

.ema-section__note { margin: 0; font-size: var(--t-small); color: var(--cw-ink-soft); }

/* ── 5 · Carousel ─────────────────────────────────────────────────────── */

/*
 * ⚠️ REBUILT FROM THE FRAME (680:1385). This was three news cards side by side.
 * It is ONE full-width editorial slide: a 1628×722 image under the same warm
 * multiply scrim as the hero, then the counter and arrows, then a PP Fragment
 * title, body copy and a text link.
 *
 * Two tracks move together so the controls can sit between the image and the
 * caption, which is what the frame draws. The arrows are the drawn asset
 * (assets/design/ui/arrow.svg) carried as a mask so they take currentColor and
 * survive a dark colourway — an <img> would stay purple on purple.
 */

.ema-carousel { display: flex; flex-direction: column; gap: 20px; }
.ema-carousel__viewport { overflow: hidden; }
.ema-carousel__viewport--text { margin-top: 44px; }   /* 64px section gap, less the 20px above */

/*
 * Slides CROSSFADE rather than swipe (BugHerd #4). They stack in one grid cell,
 * so the viewport keeps the height of the tallest caption and nothing jumps as
 * the text changes.
 */
.ema-carousel__track { display: grid; margin: 0; padding: 0; list-style: none; }
.ema-carousel__slide {
  grid-area: 1 / 1; min-width: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease-in-out, visibility 0s linear .7s;
}
.ema-carousel__slide.is-active {
  opacity: 1; visibility: visible;
  transition: opacity .7s ease-in-out, visibility 0s;
}

.ema-carousel__media { position: relative; overflow: hidden; aspect-ratio: 1628 / 722; background: var(--cw-bg); }
.ema-carousel__image { width: 100%; height: 100%; object-fit: cover; }
.ema-carousel__placeholder { display: block; width: 100%; height: 100%; background: color-mix(in srgb, var(--c-primary-purple) 12%, var(--c-white)); }
.ema-carousel__scrim {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(to bottom, rgba(217,217,217,0) 40.5%, rgba(69,46,28,.6) 100%);
}

/* Counter left, arrows hard right — the frame puts them on one line. */
.ema-carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ema-carousel__counter { margin: 0; font-size: 23px; font-weight: var(--fw-light); color: var(--cw-ink); font-variant-numeric: tabular-nums; }
.ema-carousel__buttons { display: flex; align-items: center; gap: 15px; }

.ema-carousel__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;          /* 2.5.8 target size — the drawn arrow is 40×16 */
  padding: 0; border: 0; background: none;
  color: var(--cw-ink); cursor: pointer;
}
.ema-carousel__btn:focus-visible { outline: 2px solid var(--cw-ink); outline-offset: 2px; }

.ema-carousel__arrow {
  display: block; width: 40px; height: 16px; background: currentColor;
  -webkit-mask: url('../design/ui/arrow.svg') no-repeat center / contain;
          mask: url('../design/ui/arrow.svg') no-repeat center / contain;
}
.ema-carousel__btn--prev .ema-carousel__arrow { transform: scaleX(-1); }

.ema-carousel__icon { font-size: .9rem; letter-spacing: .1em; }

.ema-carousel__title {
  /* The frame stacks these by absolute offset — title at y0, body at y120 —
     which with a two-line 45px title and text-box-trim is a ~20px gap, not a
     120px one. Taking the 120 literally would have opened a hole under any
     title that did not happen to run to two lines. */
  margin: 0 0 20px; max-width: 62%;            /* 1014 of 1628 */
  font-family: var(--font-display);
  font-size: var(--t-h2); line-height: var(--lh-heading);
  color: var(--cw-ink);
}
.ema-carousel__title a { color: inherit; text-decoration: none; }
.ema-carousel__title a:hover { text-decoration: underline; }

.ema-carousel__body {
  margin: 0 0 2rem; max-width: 49%;            /* 804 of 1628 */
  font-size: var(--t-body); font-weight: var(--fw-light); color: var(--cw-ink);
}

/* ── 6 · Process Stepper ──────────────────────────────────────────────── */
/*
 * Full-height coloured panels with a chevron cut between them, per the design.
 * Panels cycle the palette and the ink flips per ground — the same colourway
 * mechanism the cards use, so nothing here names a brand colour.
 *
 * Stage count is VARIABLE: auto-fit, never four hard-coded columns.
 */

/* The panels fill the 1728px box edge to edge, so the module drops its side
   padding and the heading takes the gutter back. */
/*
 * The stepper paints its panels edge to edge inside the CONTENT width, so the
 * module clears its own gutter and each child takes it back — the diagram then
 * starts on the logo edge like everything else (#46, #59).
 */
.ema-m-stepper { padding-inline: 0; }
.ema-m-stepper > * { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }

.ema-stepper {
  display: grid;
  grid-template-columns: 1fr;
  /* A gutter between stages, with the arrow living in it (#93). */
  gap: 20px;
  /* The arrow's drawn height. The rule reads it too, so one number moves both. */
  --arrow-h: 28px;
  --arrow-w: 20px;
  /* ⚠️ margin-BLOCK and padding-BLOCK only, for the same reason. A `margin`
     or `padding` shorthand here has the same specificity as the gutter rule
     above and silently wins it — the shorthand's margin-inline: 0 left the
     diagram hard against the left of the screen on anything wider than 1728,
     which is where Collective Objective saw it (#46, #59). */
  margin-block: 0 var(--gap);
  padding-block: 0;
  list-style: none;
}

/*
 * ⚠️ The line in every panel sits at the SAME HEIGHT (BugHerd #34). Panels used
 * to push their description to the bottom, so the line above it landed wherever
 * the text length put it. The description now hangs below the line, and the
 * blocks above the line are the same height in every panel.
 */
.ema-stepper__step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /*
   * ⚠️ NO GAP side by side: the space between the numeral row and the rule is
   * set by the height of __top at the breakpoint below, which is what puts the
   * rule on the arrow (#100). A gap here would push it off that line. Stacked,
   * the panels are content-height and the gap is restored.
   */
  gap: 0;
  /* Even padding on all four sides, matching the top (#93). The arrow used to
     straddle the panel edge, which is why the sides were padded wide; it now
     sits in the gutter between panels instead. */
  padding: 20px;
  background: var(--cw-bg);
  color: var(--cw-ink);
  min-width: 0;
}

/*
 * ⚠️ THIS HEIGHT IS THE ALIGNMENT (#100). The arrow is centred on the panel,
 * and the rule has to meet its BOTTOM edge, not its middle — so the rule sits
 * half the panel down plus half the arrow's height. Both numbers come from
 * --arrow-h, so the triangle and the line cannot drift apart.
 *
 * It also keeps BugHerd #34 true by construction: every panel's rule is at the
 * same height because every panel is the same height.
 */
.ema-stepper__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/* The drawn numeral, exported from the design. */
.ema-stepper__numeral { height: 8rem; width: auto; flex: 0 0 auto; }

/* ⚠️ Only four numerals were drawn. A fifth stage falls back to type, which is
   visibly not the drawn glyph — deliberately obvious rather than a silent
   mismatch. See the note in process_stepper.php. */
.ema-stepper__numeral--type {
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: .9;
  color: var(--cw-ink);
}

.ema-stepper__pill {
  align-self: flex-start;
  padding: var(--tag-pad);
  border: 1px solid var(--cw-ink);
  border-radius: 999px;
  font-size: var(--tag-size);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  color: var(--cw-ink);
}

a.ema-stepper__pill:hover { background: var(--cw-ink); color: var(--cw-bg); }

.ema-stepper__rule { display: block; height: 1px; margin: 0 0 1.5rem; background: var(--cw-ink); }

/* A chain names real records — "Reef Credit Standard" — so its lozenge sits
   under the rule with the panel's full width to run in (#100). */
.ema-stepper--wide-pill .ema-stepper__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.ema-stepper--wide-pill .ema-stepper__rule { margin: 0; align-self: stretch; }
.ema-stepper--wide-pill .ema-stepper__pill { max-width: 100%; }
.ema-stepper__description { margin: 0; font-size: var(--t-body); color: var(--cw-ink); max-width: 24rem; }
/* Same again: block-only, so the module's centring survives (#46). */
.ema-stepper__lineage { margin-block: 0 .75rem; padding-inline: var(--gutter); font-size: var(--t-small); color: var(--cw-ink-soft); }

/* The rule is what the arrow lines up with, so it anchors it. */
.ema-stepper__bottom { position: relative; }

@media (min-width: 760px) {
  .ema-stepper { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

  /*
   * Portrait, per Collective Objective's marked-up diagram (#100): a panel is
   * taller than it is wide, and short copy simply leaves space beneath it.
   * A FLOOR, not a cap — a panel whose description runs long grows past it and
   * the grid row takes every panel with it.
   *
   * ⚠️ Side-by-side only. Stacked, a panel is the full width of the page and
   * four thirds of that would be a screen and a half of empty colour.
   */
  .ema-stepper__step { aspect-ratio: 3 / 4; }

  /*
   * ⚠️ THIS HEIGHT IS THE ALIGNMENT (#100). The arrow is centred on the panel
   * and the rule has to meet its BOTTOM edge, not its middle — so the rule
   * sits half the panel down, plus half the arrow. Both read --arrow-h, so the
   * triangle and the line cannot drift apart.
   *
   * It also keeps BugHerd #34 true by construction: every panel's rule is at
   * the same height because every panel is the same height.
   */
  .ema-stepper__top { height: calc(50% + var(--arrow-h) / 2); }

  /*
   * The arrow between panels (#93, refined #100): a triangle in the panel's
   * OWN colour, sitting in the 20px gutter with its tip just touching the next
   * block. Not drawn after the last panel.
   *
   * ⚠️ IT HANGS OFF THE PANEL, NOT THE RULE. It used to be anchored to
   * .ema-stepper__bottom, which centred it ON the rule; Collective Objective
   * want it centred on the PANEL with the rule meeting its lower edge, so the
   * panel is the thing it measures itself against.
   */
  .ema-stepper__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--arrow-w) * -1);
    z-index: 1;
    width: 0;
    height: 0;
    border-top: calc(var(--arrow-h) / 2) solid transparent;
    border-bottom: calc(var(--arrow-h) / 2) solid transparent;
    border-left: var(--arrow-w) solid var(--cw-bg);
    transform: translateY(-50%);
  }
}

/* Stacked, the arrow points down into the panel below. */
@media (max-width: 759px) {
  /* Content-height panels, so the numeral row needs its own breathing space. */
  .ema-stepper__step { gap: 3rem; }

  .ema-stepper__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    z-index: 1;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 20px solid var(--cw-bg);
    transform: translateX(-50%);
  }
}

/* ── 7 · Side-by-side / Tabs ──────────────────────────────────────────── */
/*
 * ⚠️ VALUES FROM THE FRAME (686:942). The panels were outlined boxes with a
 * small heading and dimmed body copy. They are FILLED PANELS: 50px padding,
 * 10px radius, 40px internal gap, a PP Fragment 45px title, and qualifier and
 * body both at full-strength 18px — the qualifier is a plain sentence, not an
 * uppercase accent label.
 *
 * The panel paints itself by carrying a .cw-* class, the same mechanism as the
 * module colourway select, so a dark side gets white text with no extra rules.
 * ⚠️ The frame draws these buttons at a 10px radius where every other frame
 * uses 5px. Treated as a slip and left at the 5px token — on the findings list.
 */

.ema-sbs__tablist { display: flex; gap: .5rem; margin: 0 0 var(--gap); flex-wrap: wrap; }
.ema-sbs__tab {
  padding: var(--btn-pad);
  border: var(--border-w) solid var(--cw-ink); border-radius: var(--r-button);
  background: none; color: var(--cw-ink);
  font: inherit; font-size: var(--t-body); font-weight: var(--fw-light); cursor: pointer;
}
.ema-sbs__tab[aria-selected="true"] { background: var(--cw-ink); border-color: var(--cw-ink); color: var(--cw-bg); }

.ema-sbs__panels { display: grid; grid-template-columns: 1fr; gap: 20px; }

.ema-sbs__panel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 40px;
  padding: 50px;
  border: 0; border-radius: var(--r-media);
  background: var(--cw-bg); color: var(--cw-ink);
}
.ema-sbs__panel > * { margin: 0; }

.ema-sbs__title {
  font-family: var(--font-display);
  font-size: var(--t-h2); line-height: var(--lh-heading);
  color: inherit;
}
/* Both plain 18px. The qualifier was an uppercase accent label; it is a
   sentence — "A qualifier line listing the groups this side covers". */
.ema-sbs__qualifier,
.ema-sbs__body { font-size: var(--t-body); font-weight: var(--fw-light); color: inherit; }

@media (min-width: 760px) {
  .ema-sbs__tablist { display: none; }
  .ema-sbs__panels { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: stretch; }
}

/* ── 8 · Stat Cards ───────────────────────────────────────────────────── */
/*
 * ⚠️ REBUILT FROM THE FRAME. These were rule-topped text blocks beside one
 * shared image. They are FILLED CARDS — four across, each with its own
 * landscape image, an 80px display numeral, and label/meaning/source all at
 * the same 18px. The numeral is the only place the display face appears at
 * size in this module.
 *
 * Card radius here is 10px, NOT the 15px used by Card Collection. Both values
 * are in the frames; they are genuinely different components.
 */

.ema-stats {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 560px)  { .ema-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ema-stats { grid-template-columns: repeat(4, 1fr); } }

.ema-stat {
  display: flex; flex-direction: column; gap: 30px;
  padding: 20px 20px 40px;
  border-radius: var(--r-media);
  background: var(--card-bg, var(--c-light-brown));
  color: var(--c-primary-purple);
  min-width: 0;
}

/* One tint for the whole row is the drawn default; rotation is opt-in. */
.ema-stats--light-brown  .ema-stat { --card-bg: var(--c-light-brown); }
.ema-stats--light-blue   .ema-stat { --card-bg: var(--c-light-blue); }
.ema-stats--light-maroon .ema-stat { --card-bg: var(--c-light-maroon); }
.ema-stats--light-teal   .ema-stat { --card-bg: var(--c-light-teal); }
.ema-stats--rotate .ema-stat:nth-child(4n+1) { --card-bg: var(--c-light-blue); }
.ema-stats--rotate .ema-stat:nth-child(4n+2) { --card-bg: var(--c-light-maroon); }
.ema-stats--rotate .ema-stat:nth-child(4n+3) { --card-bg: var(--c-light-brown); }
.ema-stats--rotate .ema-stat:nth-child(4n+4) { --card-bg: var(--c-light-teal); }

.ema-stat__media { margin: 0; }
.ema-stat__media img,
.ema-stat__placeholder { display: block; width: 100%; aspect-ratio: 554 / 399; object-fit: cover; }
.ema-stat__placeholder { background: color-mix(in srgb, var(--c-primary-purple) 12%, transparent); }

.ema-stat__figure {
  margin: 0;
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 1;
  color: var(--c-primary-purple);
}

/* Label, meaning and source are one text block at one size — the frame does
   not step them down. The blank line between label and meaning is real. */
.ema-stat__text { display: flex; flex-direction: column; gap: 1lh; }
.ema-stat__label,
.ema-stat__meaning,
.ema-stat__source {
  margin: 0; font-size: var(--t-body); font-weight: var(--fw-light);
  color: var(--c-primary-purple);
}

/* An unsourced figure shows a VISIBLE GAP. Every figure needs a source, and
   hiding the absence lets one ship looking finished. */
.ema-stat__source--missing {
  align-self: flex-start;
  padding: .15rem .5rem;
  border: 1px dashed currentColor;
  opacity: .7;
}

/* ── 9 · Resource Block ───────────────────────────────────────────────── */
/*
 * ⚠️ VALUES FROM THE FRAME (687:1398). Same row geometry as the methodology
 * table, and for the same reason — they are the same kind of list: 30px of row
 * depth, a 1.5px rule at full ink strength, and the title at 25px rather than a
 * heading step. The download button sits hard right on the row.
 *
 * ⚠️ The cards variant is NOT DRAWN — the frame is "9. RESOURCE BLOCK / List"
 * only. The card styling below is carried over from the wireframe and is a
 * guess; its ink follows the corrected rule that a light ground takes Primary
 * Purple, but Dean has not drawn it. On the findings list.
 */

.ema-doc-list { margin: 0; padding: 0; list-style: none; }
.ema-doc--row {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding: 30px 0; border-bottom: var(--border-w) solid var(--cw-ink);
}
.ema-doc--row:first-child { border-top: var(--border-w) solid var(--cw-ink); }
.ema-doc__title { margin: 0; font-size: 25px; font-weight: var(--fw-light); line-height: var(--lh-heading); }
.ema-doc__title a { color: inherit; text-decoration: none; }
.ema-doc__title a:hover { text-decoration: underline; }
.ema-doc__meta { margin: .5rem 0 0; font-size: var(--t-small); color: var(--cw-ink-soft); }

/*
 * The frame puts "Download all" and "Browse the full library" on ONE line, but
 * they come from two places — the module's own download-all, and the shared
 * button partial. Rather than restructure either, both action blocks flow as
 * inline boxes here so they sit side by side and still wrap on a narrow
 * screen. Scoped to this module; elsewhere an actions block stays a block.
 */
.ema-m-resources .ema-module__actions { display: inline-flex; flex-wrap: wrap; gap: 15px; margin: 30px 15px 0 0; }

.ema-doc--card {
  display: flex; flex-direction: column;
  background: var(--card-bg, var(--c-light-brown));
  color: var(--c-primary-purple);
  padding: 20px 20px 40px; border-radius: var(--r-card);
}
.ema-grid--covers > .ema-doc--card:nth-child(4n+1) { --card-bg: var(--c-light-blue); }
.ema-grid--covers > .ema-doc--card:nth-child(4n+2) { --card-bg: var(--c-light-maroon); }
.ema-grid--covers > .ema-doc--card:nth-child(4n+3) { --card-bg: var(--c-light-brown); }
.ema-grid--covers > .ema-doc--card:nth-child(4n+4) { --card-bg: var(--c-light-teal); }
.ema-doc__cover { display: block; margin: 0 0 1rem; }
.ema-doc__cover img { width: 100%; height: auto; aspect-ratio: 554 / 399; object-fit: cover; }
.ema-doc--card .ema-doc__title,
.ema-doc--card .ema-doc__meta { color: var(--c-primary-purple); }

/* ── 10 · FAQ Accordion ───────────────────────────────────────────────── */
/*
 * Two columns: eyebrow left, accordion right — the same split as module 3.
 * Question is Figtree Light 25px. The chevron is a DRAWN ASSET from the
 * design, not a CSS border trick.
 *
 * Panels animate a MEASURED height set inline by JS. The source wireframe
 * clamped at 200px and clipped a long answer; nothing here can.
 */

.ema-m-faq .ema-faq-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; }
/* The same 824 / 804 split as every other two-column module, so the questions
   start where a standard content block's copy starts (#78). */
@media (min-width: 760px) { .ema-m-faq .ema-faq-layout { grid-template-columns: 824fr 804fr; gap: 0; } }
/* Title and intro sit in the right column, the title's top level with the
   eyebrow's (#44). */
.ema-faq-layout__main { min-width: 0; }
.ema-faq-layout__aside > .ema-eyebrow,
.ema-faq-layout__main .ema-module__head > :first-child { margin-top: 0; }

.ema-accordion { border: 0; }
.ema-accordion__item { padding-top: 30px; }
.ema-accordion__item:first-child { padding-top: 0; }
.ema-accordion__heading { margin: 0; font-size: inherit; }

.ema-accordion__trigger {
  display: flex; gap: 20px; align-items: center; justify-content: space-between;
  width: 100%; padding: 0 0 30px;
  border: 0; border-bottom: 1.5px solid var(--cw-ink);
  background: none; color: var(--cw-ink);
  font-family: var(--font-body); font-weight: var(--fw-light);
  font-size: clamp(1.125rem, 2vw, 25px); line-height: 1.3;
  text-align: left; cursor: pointer;
}

.ema-accordion__question { flex: 1 1 auto; }

/* The drawn chevron, rotated by state. */
.ema-accordion__marker {
  flex: 0 0 auto;
  width: 40px; height: 16px;
  background: currentColor;
  -webkit-mask: var(--ema-arrow) center / contain no-repeat;
  mask: var(--ema-arrow) center / contain no-repeat;
  transform: rotate(90deg);
  transition: transform .18s ease;
}
.ema-accordion__trigger[aria-expanded="true"] .ema-accordion__marker { transform: rotate(-90deg); }

.ema-accordion__panel { overflow: hidden; transition: height .2s ease; }
.ema-accordion__answer {
  padding: 20px 0 0; min-height: 0; max-width: 54rem;
  font-size: var(--t-body); color: var(--cw-ink);
}

/* ── 11 · Filterable Directory ────────────────────────────────────────── */
/*
 * Pills are REAL TERMS and real links, so a filtered view has a URL.
 *
 * ⚠️ VALUES FROM THE FRAME (689:2229). The pills were small rounded chips; they
 * are the standard BUTTON — 15px padding, 1.5px border, 5px radius, 18px light
 * — and the active one is FILLED with Primary Purple, not merely outlined.
 *
 * ⚠️ The card rotation here includes a DARK card. The frame runs
 * light blue → BLUE (#001C47, white text) → light teal, where the general card
 * rotation is four light tints. That is a real difference between module 4 and
 * module 11, so it is scoped to this module rather than changed globally.
 *
 * ⚠️ The frame draws ONE row of filters and no field label. This module can
 * carry three facets, which needs a legend per group to be usable at all, so
 * the legends stay — set as plain text rather than the uppercase accent label
 * they were. On the findings list.
 */

.ema-facets { display: grid; gap: 1.25rem; margin: 0 0 30px; }
.ema-facet { border: 0; margin: 0; padding: 0; min-width: 0; }
.ema-facet__legend { padding: 0 0 .5rem; font-size: var(--t-body); font-weight: var(--fw-light); letter-spacing: 0; text-transform: none; color: var(--cw-ink); }
.ema-facet__pills { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; list-style: none; }

.ema-pill {
  display: inline-block; padding: var(--btn-pad);
  border: var(--border-w) solid var(--cw-ink); border-radius: var(--r-button);
  font-size: var(--t-body); font-weight: var(--fw-light);
  text-decoration: none; color: var(--cw-ink);
}
.ema-pill.is-active { background: var(--cw-ink); border-color: var(--cw-ink); color: var(--cw-bg); }

.ema-directory__count { margin: 0 0 1rem; font-size: var(--t-small); color: var(--cw-ink-soft); }
.ema-directory__empty { padding: var(--gap); border: var(--border-w) solid var(--cw-ink); color: var(--cw-ink-soft); }

/* The drawn three-step rotation, including the dark middle card. */
.ema-m-directory .ema-grid > .ema-card:nth-child(3n+1) { --card-bg: var(--c-light-blue); }
.ema-m-directory .ema-grid > .ema-card:nth-child(3n+2) { --card-bg: var(--c-blue); }
.ema-m-directory .ema-grid > .ema-card:nth-child(3n+3) { --card-bg: var(--c-light-teal); }

/* ── 12 · Methodology Table ───────────────────────────────────────────── */
/*
 * ⚠️ CORRECTED FROM THE FRAME (691:2703). The structure was already right —
 * four columns, status-dependent action — but every value was wrong:
 *
 *   · headers are Figtree BOLD 25px in ink, not small uppercase accent caps
 *   · body text is 18px, the same size as everywhere else
 *   · rules are 1.5px in full-strength ink, not a hairline tint
 *   · rows are 30px deep, not 16px
 *   · STATUS IS A FILLED CHIP, and the fill is SEMANTIC — see below
 *   · the document action is a BORDERED BUTTON, not a text link
 *
 * Wide content scrolls inside its OWN container; the page never does.
 */

.ema-table-scroll { overflow-x: auto; }
.ema-table { width: 100%; min-width: 52rem; border-collapse: collapse; font-size: var(--t-body); }

/* 600 / 393 / 290 / 185 of a 1632px measure. */
.ema-table th:nth-child(1), .ema-table td:nth-child(1) { width: 36.8%; }
.ema-table th:nth-child(2), .ema-table td:nth-child(2) { width: 24.1%; }
.ema-table th:nth-child(3), .ema-table td:nth-child(3) { width: 17.8%; }
.ema-table th:nth-child(4), .ema-table td:nth-child(4) { width: 11.3%; }

.ema-table th, .ema-table td {
  text-align: left; vertical-align: top;
  padding: 30px 20px 30px 0;
  border-bottom: var(--border-w) solid var(--cw-ink);
  font-weight: var(--fw-light);
}
.ema-table thead th {
  padding-top: 0;
  font-size: 25px; font-weight: var(--fw-bold);
  letter-spacing: 0; text-transform: none;
  color: var(--cw-ink);
}
.ema-table tbody a { color: inherit; }

/* The frame draws no "current" marker at all — supersession is carried by the
   note under the title. Keeping the row tint would invent an emphasis the
   design does not have, so it is a hairline weight change only. */
.ema-table tr.is-current th { font-weight: var(--fw-normal); }
.ema-table__note { display: block; margin-top: .5rem; font-size: var(--t-small); color: var(--cw-ink-soft); }

/* "Not yet available" is plain text in the frame, deliberately not a button —
   it is the honest empty state, and must not look pressable. */
.ema-table__disabled { color: var(--cw-ink); }

/*
 * Status chips. The frame gives each status its own fill behind a standard
 * bordered button — so status is READ BY COLOUR as well as by word:
 *   Approved → Light Teal · In consultation → Light Blue · Draft → Light Brown
 * Colour is never the only carrier: the word is always present.
 */
.ema-table .ema-chip {
  margin: 0;
  padding: var(--btn-pad);
  line-height: 1.3;       /* the button's, so a status tag and a Download button are the same 42px */
  border: var(--border-w) solid var(--c-primary-purple);
  border-radius: var(--r-button);
  font-size: var(--t-body);
  font-weight: var(--fw-light);
  color: var(--c-primary-purple);
  background: var(--chip-bg, transparent);
}
.ema-table .ema-chip--approved        { --chip-bg: var(--c-light-teal); }
.ema-table .ema-chip--in-consultation { --chip-bg: var(--c-light-blue); }
.ema-table .ema-chip--draft           { --chip-bg: var(--c-light-brown); }
/* ⚠️ NOT DRAWN. "Under review" is a real status in the content model but the
   frame only draws three. Light Maroon is the unused fourth tint — Dean to
   confirm, and it is on the findings list. */
.ema-table .ema-chip--under-review    { --chip-bg: var(--c-light-maroon); }

/* ── 13 · Logo Strip ──────────────────────────────────────────────────── */
/*
 * No captions and no query, by definition. Wraps to as many rows as needed —
 * the frame happens to draw two rows of six, but that is a count, not a rule.
 *
 * ⚠️ VALUES FROM THE FRAME (692:2839). Logos were capped at 48px tall on a
 * ~40px gap. The drawn marks run 52–129px tall on a 62px gap and are set
 * centre-aligned on a common baseline row, so a tall portrait mark and a wide
 * landscape one sit together without either being shrunk to nothing.
 *
 * Capping HEIGHT rather than width is what keeps mixed logo shapes even; the
 * width then follows each mark's own aspect.
 */

.ema-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 62px; margin: 0; padding: 0; list-style: none;
}
.ema-logos__item { display: flex; align-items: center; min-height: 130px; }
.ema-logos__item img { max-height: 130px; max-width: 232px; width: auto; height: auto; object-fit: contain; }

/* ── 16 · Testimonial ─────────────────────────────────────────────────── */
/*
 * ⚠️ VALUES FROM THE FRAME (698:3222). The quote was set in the DISPLAY face at
 * up to 30px. It is FIGTREE LIGHT 45px — the same treatment as the hero and the
 * large statement, and the third place the display face turned out not to be
 * used. The frame sets the whole module on Primary Purple.
 *
 * The portrait is 289×208 — LANDSCAPE, at the same 554/399 crop as every other
 * image in the design, not the tall headshot column this had. Image 289, gap
 * 226, quote 1113 across a 1628 measure.
 *
 * Attribution is three lines — name, role, organisation — not a run-on.
 */

.ema-testimonial { display: grid; grid-template-columns: 1fr; gap: 30px; margin: 0; }
@media (min-width: 760px) {
  .ema-testimonial {
    grid-template-columns: 289fr 1113fr;
    gap: clamp(2rem, 13.9vw, 226px);
    align-items: start;
  }

  /*
   * No portrait, no portrait column (#109). The quote then takes the large
   * statement's measure — 81% of the content width, the same proportion
   * .ema-statement holds — so a quote and a statement line up rather than
   * being two different widths of the same idea.
   */
  .ema-testimonial--no-portrait { grid-template-columns: 1fr; gap: 0; }
  .ema-testimonial--no-portrait .ema-testimonial__body { max-width: 81%; }
}

.ema-testimonial__portrait img { width: 100%; height: auto; aspect-ratio: 554 / 399; object-fit: cover; }

.ema-testimonial__quote {
  margin: 0 0 30px;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--t-h2);
  line-height: var(--lh-display);
  color: var(--cw-ink);
}
.ema-testimonial__quote p { margin: 0; }

.ema-testimonial__attribution {
  display: flex; flex-direction: column;
  font-size: var(--t-body); font-weight: var(--fw-light);
  color: var(--cw-ink);
}
.ema-testimonial__name { color: var(--cw-ink); }

/* ── 17 · Feature Image — caption UNDER, never over ───────────────────── */
/*
 * ⚠️ VALUES FROM THE FRAME (692:2840). The title was a small heading step and
 * the caption was dimmed small print. They are the same pair as the carousel
 * caption: PP Fragment 45px on a 1014px measure, and an 18px caption at full
 * ink strength on an 804px measure. The image runs the full 1628 at 722 tall
 * and — unlike the hero and the carousel — carries NO scrim.
 *
 * The caption stays UNDER the image. Nothing in this design sets a caption
 * over a photograph, and doing so would put text on an unknown ground.
 */

.ema-feature { margin: 0; display: flex; flex-direction: column; gap: 64px; }
.ema-feature__image { width: 100%; height: auto; aspect-ratio: 1628 / 722; object-fit: cover; }
.ema-feature__caption { margin: 0; max-width: none; }
.ema-feature__title {
  margin: 0 0 20px; max-width: 62%;            /* 1014 of 1628 */
  font-family: var(--font-display);
  font-size: var(--t-h2); line-height: var(--lh-heading);
  color: var(--cw-ink);
}
.ema-feature__text {
  margin: 0; max-width: 49%;                   /* 804 of 1628 */
  font-size: var(--t-body); font-weight: var(--fw-light); color: var(--cw-ink);
}

@media (prefers-reduced-motion: reduce) {
  .ema-carousel__track, .ema-carousel__slide, .ema-hero__track, .ema-accordion__panel,
  .ema-accordion__marker, .ema-btn { transition: none; }
  .ema-btn--text:hover, .ema-btn--text:focus-visible, .ema-section__body a:hover,
  .ema-article__body a:hover, .ema-faq__answer a:hover, .ema-accordion__panel a:hover { animation: none; }
}


/* ── Late overrides ───────────────────────────────────────────────────── */

/*
 * THE OUTCOME PILL, WHEREVER IT LANDS.
 *
 * ⚠️ This changed twice. #76/#77 (Michelle, 16 Sep) asked for a white fill with
 * purple key-line and copy, in place of the outcome's own tint. #91 (Ebony,
 * 21 Sep) asks for a CLEAR ground so every lozenge on a card reads the same as
 * the credits badge beside it. The later instruction wins, and clear also fixes
 * the dark-card case on its own: the pill now takes the card's ink, so it is
 * purple on a light ground and white on a dark one with no second rule.
 */
.ema-card .ema-chip--outcome,
.ema-card .ema-chip--outcome .ema-chip__qualifier {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}