/* =============================================================================
 * agency-blocks — BLOCK COMPONENT STYLES
 * =============================================================================
 * Registered as the `agency-blocks` handle in includes/Blocks/Assets.php and
 * declared in every block's metadata, so WordPress loads it only on pages where
 * a block actually renders (rules.txt §30).
 *
 * Rules this file follows:
 *   - Mobile first. The base declarations are the phone layout; wider layouts
 *     are enhancements inside `min-width` queries (§5).
 *   - No literal colours, sizes or radii. Everything resolves to the tokens in
 *     the theme's tokens.css, so a colour scheme or spacing change re-themes
 *     these components with no edit here (§14, §62).
 *   - No `!important`, no fixed pixel widths, nothing that can widen the page
 *     (§8, §27).
 *
 * WHY MOST SELECTORS ARE SCOPED TO `.agency-block`
 * ------------------------------------------------
 * Blocks render inside the theme's `.prose` wrapper, which styles bare elements:
 * `.prose h2` sets `font-size: var(--step-3)` and `margin-block-start:
 * var(--space-xl)`, and `.prose img` sets a radius. A single class selector such
 * as `.agency-head__title` has LOWER specificity than `.prose h2`, so section
 * headings silently inherited blog typography and every card title carried a
 * blog-sized top margin. Scoping with the `.agency-block` ancestor wins on
 * specificity order without `!important`, which §27 forbids.
 *
 * The JavaScript contract this file implements (`agency-motion/assets/motion.js`)
 *   - `[data-agency-reveal]` gains `.is-revealed` when it scrolls into view, and
 *     the element is fully visible when JavaScript never runs (§40).
 *   - `[data-agency-carousel-track]` is moved with `translate3d(-100% × index)`,
 *     so a slide is exactly one viewport wide — see §9 for why the per-view
 *     count is deliberately not honoured.
 *   - `.agency-chapter` gains `.is-active` while it is the chapter being read.
 *   - the play control carries `data-agency-video="<src>"`; motion.js replaces the
 *     contents of the `[data-agency-video-facade]` frame and marks it
 *     `.is-playing`, so the aspect-ratio box and the caption both survive the swap.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. SECTION SHELL — every block
 *
 * The block is the full-bleed band; the inner is the readable column. Keeping
 * them separate is what lets a background modifier paint edge to edge without
 * the copy stretching with it (§6, §8).
 * -------------------------------------------------------------------------- */

.agency-block {
  position: relative;
  /*
   * Lighter top padding (section-y-top) + full bottom (section-y). The
   * client flagged symmetric spacing as "too much space above every
   * heading"; this trims the top only so inter-section rhythm reads as
   * "the next section is beginning", not "a huge gap".
   */
  padding-block: var(--section-y-top, var(--section-y)) var(--section-y);
  background: var(--color-bg);
  color: var(--color-text);
  max-width: 100%;
  overflow-x: clip;
}

.agency-block__inner {
  display: grid;
  gap: clamp(1.15rem, 0.9rem + 1.2vw, 1.85rem);

  /* `max-width` plus `min-width: 0` is the pair that keeps a wide child (a
   * table, a long URL, a card grid) from widening the page (§8). */
  max-width: var(--container);
  min-width: 0;
  margin-inline: auto;
  /* Readable gutter on every viewport — matches theme `.container`. */
  padding-inline: clamp(1.15rem, 5vw, 2.75rem);
  box-sizing: border-box;
  width: 100%;
}

/*
 * A composed page is not an article.
 *
 * The theme wraps entry content in `.prose--wide`, which caps it at the editorial
 * measure (~82ch). A page built from blocks is a marketing layout — a hero, a
 * four-column stat row — and 82ch would squeeze it into a column, so the wrapper
 * steps aside and each block's own `max-width` takes over. Non-block content on
 * the same page keeps the measure it was designed for.
 *
 * `:has()` is a progressive enhancement: a browser without it simply keeps the
 * editorial measure, which is still perfectly readable.
 */
.prose:has(> .agency-block) {
  max-width: none;
}

/*
 * The theme's `.prose > * + *` rule would add a top margin to every block after
 * the first. Each block already carries `padding-block`, so that margin would
 * double the rhythm and make the spacing depend on the theme's editorial scale
 * rather than the block's own. (0,2,0 beats the theme's (0,1,0) without
 * `!important`.)
 */
.prose > .agency-block + .agency-block,
.prose > .agency-block:first-child {
  margin-block-start: 0;
}

/* -----------------------------------------------------------------------------
 * 2. BACKGROUND MODIFIERS
 *
 * Separate classes rather than inline styles, so a colour scheme or client
 * preference changes them in one place (§14, §61).
 * -------------------------------------------------------------------------- */

/*
 * Section bands — flat, high-contrast colour system (McKinsey pattern).
 *
 * Four tones only, so neighbouring sections always read as distinct blocks:
 *   white      → --bg-default / --bg-raised
 *   mint       → --bg-surface
 *   deep       → --bg-inverse            (deep emerald, see §27)
 *   vivid      → --bg-gradient / --bg-accent (bright teal; CTA & alternation)
 *
 * No rotating washes: a clean flat tone is what makes the palette look "HD".
 */
/*
 * KanbanN brand brief — five flat tones, every neighbour must contrast:
 *   white      → --bg-default           (#ffffff)
 *   soft cloud → --bg-surface           (#f4f7fa)
 *   ivory      → --bg-raised            (#f7f2e8, Museum Ivory warm spacer)
 *   navy       → --bg-inverse           (Corporate Navy → Midnight Abyss)
 *   steel      → --bg-gradient / --bg-accent (Steel Navy; CTA & alternation)
 */
.agency-block--bg-default {
  background-color: var(--color-bg, #ffffff);
  background-image: none;
}

/*
 * The two light tones carry a soft brand gradient (ivory → white with a brass
 * glow; soft cloud → white with a steel wash) so a page is never a run of flat
 * panels. White stays flat: it is the resting tone the gradients contrast with.
 */
.agency-block--bg-raised {
  background-color: var(--color-surface-warm, var(--color-surface, #f7f2e8));
  background-image: var(--gradient-section-warm, none);
  background-repeat: no-repeat;
  background-size: cover;
}

.agency-block--bg-surface {
  background-color: var(--color-surface, #f4f7fa);
  background-image: var(--gradient-section-tint, none);
  background-repeat: no-repeat;
  background-size: cover;
}

/*
 * Adjacency contrast. When an author places two bands of the same tone next
 * to each other the second one flips, so a page can never show two identical
 * consecutive sections. Hash anchors are zero-height spacers between blocks.
 */
.agency-block--bg-surface + .agency-block--bg-surface,
.agency-block--bg-surface + .kanbann-hash-anchor + .agency-block--bg-surface {
  background-color: var(--color-bg, #ffffff);
  background-image: none;
}

.agency-block--bg-default + .agency-block--bg-default,
.agency-block--bg-default + .kanbann-hash-anchor + .agency-block--bg-default,
.agency-block--bg-raised + .agency-block--bg-raised,
.agency-block--bg-raised + .kanbann-hash-anchor + .agency-block--bg-raised {
  background-color: var(--color-surface, #f4f7fa);
  background-image: var(--gradient-section-tint, none);
  background-repeat: no-repeat;
  background-size: cover;
}

/* Dark mode reads the dark twins of the same tokens (tokens.css §4). */
[data-theme="dark"] .agency-block--bg-default {
  background-color: var(--color-bg);
  background-image: none;
}

[data-theme="dark"] .agency-block--bg-raised {
  background-color: var(--color-surface-warm, var(--color-surface));
  background-image: var(--gradient-section-warm, none);
}

[data-theme="dark"] .agency-block--bg-surface {
  background-color: var(--color-surface);
  background-image: var(--gradient-section-tint, none);
}

[data-theme="dark"] .agency-block--bg-surface + .agency-block--bg-surface,
[data-theme="dark"] .agency-block--bg-surface + .kanbann-hash-anchor + .agency-block--bg-surface {
  background-color: var(--color-bg);
  background-image: none;
}

[data-theme="dark"] .agency-block--bg-default + .agency-block--bg-default,
[data-theme="dark"] .agency-block--bg-default + .kanbann-hash-anchor + .agency-block--bg-default,
[data-theme="dark"] .agency-block--bg-raised + .agency-block--bg-raised,
[data-theme="dark"] .agency-block--bg-raised + .kanbann-hash-anchor + .agency-block--bg-raised {
  background-color: var(--color-surface);
  background-image: var(--gradient-section-tint, none);
}

/*
 * "Upward arrow" section breaks (brand brief). A dark band that follows a light
 * band gets a subtle diagonal top edge rising left → right. Only the dark band
 * is cut, so the light tone above simply shows through the wedge — no extra
 * markup, no pseudo-element, and it never applies on phones where the band
 * height is too short for a slant to read as intentional.
 */
@media (min-width: 768px) {
  .agency-block:is(.agency-block--bg-default, .agency-block--bg-raised, .agency-block--bg-surface)
    + .agency-block:is(.agency-block--bg-inverse, .agency-block--bg-gradient, .agency-block--bg-accent),
  .agency-block:is(.agency-block--bg-default, .agency-block--bg-raised, .agency-block--bg-surface)
    + .kanbann-hash-anchor
    + .agency-block:is(.agency-block--bg-inverse, .agency-block--bg-gradient, .agency-block--bg-accent) {
    clip-path: polygon(0 var(--slant-rise, 2.5rem), 100% 0, 100% 100%, 0 100%);
    padding-block-start: calc(var(--section-y, 4rem) + var(--slant-rise, 2.5rem));
  }
}

.agency-block--bg-gradient {
  background-color: var(--color-vivid, var(--color-primary));
  background-image: var(--gradient-section-vivid, var(--gradient-hero));
  background-repeat: no-repeat;
  background-size: cover;
}

.agency-block--bg-accent {
  background-color: var(--color-vivid, var(--color-primary));
  background-image: var(--gradient-section-vivid, var(--gradient-accent));
}

/*
 * Two dark bands in a row (deep + deep, or deep + vivid variants) — the second
 * flips to the other dark tone so the page keeps its rhythm.
 */
.agency-block--bg-inverse + .agency-block--bg-inverse,
.agency-block--bg-inverse + .kanbann-hash-anchor + .agency-block--bg-inverse {
  background-color: var(--color-vivid, var(--color-primary-light));
  background-image: var(--gradient-section-vivid, var(--gradient-hero));
}

.agency-block--bg-gradient + .agency-block--bg-gradient,
.agency-block--bg-gradient + .kanbann-hash-anchor + .agency-block--bg-gradient,
.agency-block--bg-gradient + .agency-block--bg-inverse,
.agency-block--bg-gradient + .kanbann-hash-anchor + .agency-block--bg-inverse {
  background-color: var(--color-primary-dark, var(--color-primary));
  background-image: var(--gradient-section-deep, var(--gradient-hero));
}

/*
 * A gradient band is a dark treatment in every shipped scheme, so the copy on it
 * is pinned to the contrast colour rather than inheriting the page text colour.
 * Otherwise a light scheme would put dark text on a dark gradient.
 */
.agency-block--bg-gradient,
.agency-block--bg-accent {
  color: var(--color-primary-contrast);
}

/*
 * Inverse / gradient / accent bands: pin section titles + leads to contrast.
 * `.agency-block .agency-head__title { color: var(--color-primary) }` must NOT
 * win here — primary-on-primary makes “Why choose…” / CTA / testimonials invisible.
 * Do NOT require `> .agency-head` — CTA nests head under `.agency-cta`.
 */
.agency-block.agency-block--bg-inverse .agency-head__title,
.agency-block.agency-block--bg-gradient .agency-head__title,
.agency-block.agency-block--bg-accent .agency-head__title,
.agency-block.agency-block--bg-inverse .agency-head__lead,
.agency-block.agency-block--bg-gradient .agency-head__lead,
.agency-block.agency-block--bg-accent .agency-head__lead {
  color: var(--color-primary-contrast);
}

.agency-block.agency-block--bg-inverse .agency-head__lead,
.agency-block.agency-block--bg-gradient .agency-head__lead,
.agency-block.agency-block--bg-accent .agency-head__lead {
  opacity: 0.9;
}

.agency-block .agency-head__title em,
.agency-block .agency-head__title .agency-head__em {
  /* Brass ink on light bands (≈4.6:1); inverse/gradient bands below swap to bright gold. */
  color: var(--color-gold-ink, var(--color-accent));
  font-style: normal;
  font-weight: inherit;
}

.agency-block.agency-block--bg-inverse .agency-head__title em,
.agency-block.agency-block--bg-inverse .agency-head__title .agency-head__em,
.agency-block.agency-block--bg-gradient .agency-head__title em,
.agency-block.agency-block--bg-gradient .agency-head__title .agency-head__em,
.agency-block.agency-block--bg-accent .agency-head__title em,
.agency-block.agency-block--bg-accent .agency-head__title .agency-head__em,
.agency-block.agency-block--partner-strip .agency-head__title em,
.agency-block.agency-block--partner-strip .agency-head__title .agency-head__em {
  color: var(--color-gold-light, var(--color-accent));
}

/*
 * Full-bleed: breaks out of the theme container on both sides without using
 * `100vw`, which would add the scrollbar width and cause sideways movement
 * (§8). `calc()` against the container padding is the safe form.
 *
 * The emitted class is `--w-{width}`: Render::open() prefixes every width choice
 * with `w-`, so a plain `--full` selector never matched anything.
 */
.agency-block--w-full {
  margin-inline: 0;
  padding-inline: var(--space-lg);
  max-width: 100%;
}

@media (min-width: 48em) {
  .agency-block--w-full {
    margin-inline: 0;
    padding-inline: var(--space-xl);
  }
}

/*
 * BLOCK NAME HOOKS — `agency-block--jobs`, `agency-block--contact`, and so on.
 *
 * Render::open() prints `agency-block--{name}` on every block. It is a targeting
 * hook for authors and for page-level overrides, not a style: the look comes from
 * `.agency-block` plus the component's own classes. Only `--hero` carries a rule
 * here, because the hero genuinely needs a different shell. Nothing should be
 * added to this list to satisfy a report — see the contract note in §11.
 */

/* -----------------------------------------------------------------------------
 * 3. SECTION HEAD — eyebrow, title, lead
 * -------------------------------------------------------------------------- */

.agency-block .agency-head {
  display: grid;
  gap: var(--space-2xs);

  /* A heading running the full width of a 1440px screen is unreadable. */
  max-width: var(--measure-wide);
  min-width: 0;
  /* Sitewide section heads: centred like process / why-choose bands. */
  text-align: center;
  margin-inline: auto;
  margin-block-end: 0.15rem;
}

/*
 * Centring is done with `text-align` plus `margin-inline: auto` on the text
 * elements, NOT with `justify-items: center`. A grid item with `justify-self:
 * center` is sized to fit-content, which collapses the track widths of a grid or
 * card list that happens to be a sibling — cards would shrink to their longest
 * word.
 */
.agency-block .agency-head--center {
  text-align: center;
  margin-inline: auto;
}

.agency-block .agency-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--step-2), 1.05rem + 1.8vw, var(--step-4));
  font-weight: var(--weight-display, 500);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--color-primary-dark, var(--color-primary));

  /* A long unbroken word must wrap rather than widen the layout (§8). */
  overflow-wrap: anywhere;
}

/*
 * Standout small heading — gold underline rail (eyebrows sitewide).
 * Matches the About “Who We Are” kicker treatment.
 */
.agency-block .agency-eyebrow {
  display: inline-block;
  margin: 0 0 0.55rem;
  padding: 0.3rem 0.15rem 0.4rem;
  border-block-end: 3px solid var(--color-gold, var(--color-accent));
  font-size: clamp(0.78rem, 0.72rem + 0.25vw, 0.9rem);
  font-weight: 600;
  line-height: var(--leading-none);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary-mid, var(--color-primary-light, var(--color-primary)));
}

/* Steel on navy is ~2.8:1 — eyebrows switch to gold on every dark-mode band. */
[data-theme="dark"] .agency-block .agency-eyebrow,
[data-theme="dark"] .agency-block .agency-head--center .agency-eyebrow,
[data-theme="dark"] .agency-block .agency-head .agency-eyebrow,
[data-theme="dark"] .agency-mission-values__intro .agency-eyebrow {
  color: var(--color-gold, var(--color-accent, #e9c45e));
  opacity: 1;
}

.agency-block .agency-head--center .agency-eyebrow,
.agency-mission-values__intro .agency-eyebrow {
  margin-inline: auto;
  padding-inline: 0.85rem;
  color: var(--color-primary);
  text-align: center;
}

.agency-block--mission-values .agency-head--center {
  text-align: center;
}

.agency-block--mission-values .agency-head--center .agency-head__title {
  color: var(--color-primary);
}

.agency-block--mission-values .agency-head--center .agency-head__title em {
  color: var(--color-gold, var(--color-accent));
  font-style: normal;
}

/*
 * On a gradient band the accent colour may not contrast with the background, so
 * the eyebrow falls back to the inherited colour and leans on weight and
 * letterspacing instead (§14: never colour alone).
 */
.agency-block.agency-block--bg-gradient .agency-eyebrow,
.agency-block.agency-block--bg-accent .agency-eyebrow,
.agency-block.agency-block--bg-inverse .agency-eyebrow,
.agency-block.agency-block--bg-gradient .agency-head--center .agency-eyebrow,
.agency-block.agency-block--bg-accent .agency-head--center .agency-eyebrow,
.agency-block.agency-block--bg-inverse .agency-head--center .agency-eyebrow {
  /* Acceleration Gold on navy: the brand's active-indicator pairing. */
  color: var(--color-gold, var(--color-accent, #deac2b));
  opacity: 1;
}

.agency-block .agency-head__lead {
  /* `margin-inline: auto` so a lead that hits the theme-wide
   * `p { max-width: var(--measure) }` cap (base.css) still sits
   * centred under the heading. Without it the lead collapses to the
   * start edge of the grid cell and visibly skews left under a
   * centred H2 — the client flagged this on "We work with founders…"
   * on home + book pages. `max-width: min(…)` keeps the inherited
   * measure cap but allows a slightly wider reading column than the
   * default body `p`. */
  margin: 0 auto;
  max-width: min(100%, var(--measure-wide, 72rem));
  font-size: var(--step-0);
  font-weight: var(--weight-body, 400);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}



/* -----------------------------------------------------------------------------
 * 4. LOGO STRIP — agency/logos
 * -------------------------------------------------------------------------- */

/*
 * The requested column count is the author's desktop intent; a phone cannot
 * honour six marks without crushing them, so the base is two and the requested
 * count applies from tablet up. `minmax(0, 1fr)` is what keeps a wide logo from
 * stretching the grid past the viewport (§8).
 */
.agency-logos {
  --agency-logos-columns: 2;

  display: grid;
  grid-template-columns: repeat(var(--agency-logos-columns), minmax(0, 1fr));
  gap: var(--space-sm);
  align-items: center;

  margin-block-start: 0;
  padding: 0;

  list-style: none;
}

.agency-block--logos.agency-block--space-tight {
  padding-block: clamp(1.1rem, 0.85rem + 1.2vw, 1.75rem);
}

.agency-block--logos.agency-block--space-tight .agency-head:not(:has(.agency-head__title:not(:empty))) {
  display: none;
}

.agency-block--logos.agency-block--space-tight .agency-head:empty,
.agency-block--logos.agency-block--space-tight .agency-head:not(:has(*)) {
  display: none;
}

.agency-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;

  /* Without min-width the widest logo decides the width of every column. */
  min-width: 0;
  padding: 0;
}

.agency-logos__link {
  display: block;
  max-width: 100%;
  border-radius: var(--radius-sm);
}

.agency-logos__image {
  /* Larger marks inside the same tight section height. */
  max-width: 100%;
  max-height: clamp(2.85rem, 2.25rem + 1.9vw, 4rem);
  width: auto;
  height: auto;
}

/*
 * Greyscale is a class rather than an inline filter so an author — or a
 * high-contrast theme — can drop it. Colour returns on hover AND focus, so the
 * affordance is not mouse-only (§9, §10).
 */
.agency-logos--muted .agency-logos__image {
  filter: grayscale(1);
  opacity: 0.85;

  transition:
    filter var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.agency-logos--muted .agency-logos__item:hover .agency-logos__image,
.agency-logos--muted .agency-logos__link:focus-visible .agency-logos__image {
  filter: none;
  opacity: 1;
}

/* Full-colour partner strip (default). */
.agency-logos:not(.agency-logos--muted) .agency-logos__image {
  filter: none;
  opacity: 1;
}

/* Auto-scrolling partner marquee. */
.agency-logos-marquee {
  overflow: hidden;
  /* Contain paint so transform loops do not reflow the page. */
  contain: layout paint;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.agency-logos-marquee__track {
  display: flex;
  width: max-content;
  /* No track gap — a gap between the two sets breaks seamless looping. */
  gap: 0;
  /* Hold still until JS measures a pixel shift — % of a changing track width jumps. */
  animation: agency-logos-marquee var(--agency-marquee-duration, 28s) linear infinite;
  animation-play-state: paused;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.agency-logos-marquee.is-ready .agency-logos-marquee__track {
  /* Duration set in JS from measured segment width. */
  animation-duration: var(--agency-marquee-duration, 28s);
  animation-play-state: running;
}

.agency-logos-marquee.is-ready:hover .agency-logos-marquee__track,
.agency-logos-marquee.is-ready:focus-within .agency-logos-marquee__track,
.agency-logos-marquee.is-ready.is-viewport-paused .agency-logos-marquee__track {
  animation-play-state: paused;
}

.agency-logos--marquee {
  /*
   * Uniform slots — slightly compact so the partner strip stays elegant.
   * Every logo fills the same box via object-fit:contain.
   * Slot height was 1.7rem which made square marks (Aistra 33×31,
   * Prelect 985×743) render tiny next to wide marks (Atqor 300×76).
   * Taller + wider slot lets near-square logos read at full strength
   * while wide logos still fit horizontally.
   */
  /*
   * Uniform slot HEIGHT so every mark reads at the same optical weight.
   *
   * Previously the width-driven slot (7.5rem x 2.6rem) let logos use
   * their intrinsic size when it fell under the cap. Aistra ships at
   * 33 x 31 so it rendered 33 x 31 inside a slot big enough for the
   * 1439 x ? Prelect ribbon — the SVG looked like a missing icon next
   * to the full-width text marks. New rule: every logo fills the slot
   * HEIGHT (height: 100%), width follows its native aspect ratio, and
   * the item itself grows to the image. All partner logos now render
   * at the same optical height (~56px). The max-* clamp stops any
   * single mark from dominating the strip.
   */
  /*
   * Fixed-size slot — every item is the same WxH cell and the image
   * is `object-fit: contain` inside it. This is the standard logo-wall
   * pattern: visual weight stays uniform across logos even though the
   * drawn content has different aspect ratios (icon vs text mark).
   * Earlier auto-sized attempts kept Aistra's 33x31 square tiny next
   * to the 5:1 Prelect ribbon, or let aspect-ratio math overflow the
   * item vertically.
   */
  --agency-logo-slot-h: clamp(3rem, 2.4rem + 1.8vw, 3.75rem);
  --agency-logo-slot-w: clamp(9rem, 7.5rem + 5vw, 13rem);
  --agency-logo-slot-max-w: var(--agency-logo-slot-w);

  display: flex;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(1.5rem, 2.4vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  /* Trailing gap so set A → set B seam matches item spacing. */
  padding-inline-end: clamp(1rem, 1.6vw, 1.5rem);
}

.agency-logos--marquee .agency-logos__item {
  flex: 0 0 auto;
  display: grid;
  /*
   * `place-items: stretch` so the img inside grows to fill the slot
   * box instead of collapsing to its intrinsic size. `object-fit:
   * contain` on the img then scales the drawn content back inside the
   * stretched box, which gives us uniform cells + centred artwork
   * without the Aistra-SVG-stays-tiny problem that `place-items:
   * center` + `width: 100%` produced in Chromium.
   */
  place-items: stretch;
  justify-items: stretch;
  align-items: stretch;
  inline-size: var(--agency-logo-slot-w);
  min-inline-size: var(--agency-logo-slot-w);
  max-inline-size: var(--agency-logo-slot-w);
  block-size: var(--agency-logo-slot-h);
  padding: 0;
}

.agency-logos--marquee .agency-logos__link {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
}

/* Reveal stagger must not fight the track translate (keeps logos stuck). */
.has-agency-motion [data-agency-reveal] .agency-logos--marquee .agency-logos__item,
.has-agency-motion [data-agency-reveal].is-revealed .agency-logos--marquee .agency-logos__item {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

/*
 * Logo mark fits WITHIN the slot and keeps its own aspect ratio.
 *
 * `max-width: 100%` + `max-height: 100%` LOOK right but don't help here:
 * grid items with `place-items: center` are "self-sized", and a
 * percentage max-* against a self-sized grid parent resolves to `none`
 * in major browsers. That is why the earlier version left prelect's
 * 985 × 743 mark rendering 120 × 91 inside a 120 × 42 slot — the
 * aspect-ratio pulled the height out, and `max-height: 100%` wasn't
 * actually clamping it.
 *
 * Fix: cap directly against the SAME CSS variables that define the slot.
 * These are plain lengths, so they always resolve. `width: auto; height:
 * auto` lets the IMG honour its intrinsic aspect ratio and sit centred
 * inside the slot thanks to the grid's `place-items: center`.
 */
.agency-logos--marquee .agency-logos__image {
  display: block;
  /*
   * Fill the slot box and let object-fit do the aspect-ratio work.
   * Setting both width and height to 100% makes the IMG element the
   * same size as the slot; `object-fit: contain` then scales the
   * image CONTENT inside without distortion and centres it.
   *
   * `aspect-ratio: auto` is critical — without it Chromium reads the
   * intrinsic ratio from the SVG's width/height attributes (or from
   * the <img width/height> HTML attributes) and shrinks `width: 100%`
   * to match that ratio. Aistra's 33x31 SVG then only ever rendered
   * ~64px wide inside a 192px slot, which left it visibly off-centre.
   */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

/*
 * Partner strip — brand navy gradient (was prelect emerald).
 * Taller slot = taller ribbon so near-square marks (Aistra, Prelect) read.
 */
.agency-block.agency-block--partner-strip.agency-block--bg-gradient,
.agency-block.agency-block--partner-strip {
  background-color: var(--color-navy, #003366);
  background-image: var(
    --gradient-section-deep,
    linear-gradient(118deg, #0b1a33 0%, #12264f 55%, #003366 100%)
  );
  background-size: cover;
  color: #ffffff;
  padding-block: clamp(0.85rem, 1.6vw, 1.25rem) clamp(0.65rem, 1.2vw, 0.95rem);
}

.agency-block.agency-block--partner-strip.agency-block--space-tight {
  padding-block: clamp(0.85rem, 1.6vw, 1.25rem) clamp(0.65rem, 1.2vw, 0.95rem);
}

.agency-block.agency-block--partner-strip .agency-head {
  margin-block-end: 0.4rem;
  text-align: center;
}

.agency-block.agency-block--partner-strip .agency-head__title,
.agency-block.agency-block--partner-strip .agency-head__lead,
.agency-block.agency-block--partner-strip .agency-eyebrow {
  color: #ffffff;
}

.agency-block.agency-block--partner-strip .agency-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

.agency-block.agency-block--partner-strip .agency-logos__item {
  padding: 0;
}

.agency-block.agency-block--partner-strip .agency-logos__image {
  filter: none;
  opacity: 1;
}

.agency-block.agency-block--partner-strip .agency-logos--marquee .agency-logos__image {
  display: block;
  /*
   * Partner strip uses the same uniform fixed slot as any other
   * agency-logos--marquee variant now that we have a stable rule
   * above. This override exists only so the earlier --agency-logo-
   * slot-w clamp cannot resurrect itself here.
   */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

/* Partner marks on inverse bands: no white plates (those read as blank pills). */
.agency-block--bg-inverse .agency-logos__item {
  background-color: transparent;
  border-radius: 0;
  padding: var(--space-2xs);
  min-block-size: 0;
}

@keyframes agency-logos-marquee {
  from { transform: translate3d(0, 0, 0); }
  to {
    /* Exact segment width from JS — avoids blank seam when -50% ≠ one set. */
    transform: translate3d(calc(-1 * var(--agency-marquee-shift, 50%)), 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agency-logos-marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }

  .agency-logos--echo {
    display: none;
  }
}

/* A visible focus ring, never `outline: none` (§13). */
.agency-logos__link:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--space-2xs);
}

@media (prefers-reduced-motion: reduce) {
  .agency-logos--muted .agency-logos__image {
    transition: none;
  }
}

/* Two marks is a legitimate choice (one partner, one client), and the renderer
 * allows 2-6: an unhandled `2` would silently inherit the default column count
 * and read as a broken strip at every width. */
.agency-logos--2 {
  --agency-logos-columns: 2;
}

@media (min-width: 48em) {
  .agency-logos {
    gap: var(--space-md);
  }

  .agency-logos--2 { --agency-logos-columns: 2; }
  .agency-logos--3 { --agency-logos-columns: 3; }
  .agency-logos--4 { --agency-logos-columns: 4; }
  .agency-logos--5 { --agency-logos-columns: 5; }

  /* Six marks at tablet width is roughly 100px each, which is too cramped to
   * read a wordmark; four holds until there is real room. */
  .agency-logos--6 { --agency-logos-columns: 4; }
}

@media (min-width: 64em) {
  .agency-logos--6 { --agency-logos-columns: 6; }
}

/* -----------------------------------------------------------------------------
 * 5. BUTTONS — agency-btn
 *
 * Same values as the theme's `.btn` component (components.css §1), so a block
 * button and a theme button are visually identical. The block still carries its
 * own class names because blocks must render in any theme (docs/13, §61).
 * -------------------------------------------------------------------------- */

.agency-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Not body copy — never inherit theme `p { max-width: var(--measure) }`. */
  max-width: none;
}

.agency-block .agency-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);

  /* Touch target: WCAG 2.5.8 requires 24x24 CSS px; 44px is the comfortable
   * size for a primary action (§10). Mirrors the theme's `.btn`. */
  min-height: 44px;
  padding: var(--space-xs) var(--space-md);

  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: var(--leading-none);
  text-align: center;
  text-decoration: none;

  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background-size: 200% 200%;
  background-position: 0% 50%;
  z-index: 0;

  transition:
    background-color 180ms ease,
    background-position 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    filter 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

/* Fill-from-centre reveal on hover (all sides). */
.agency-block .agency-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(
    --btn-fill-gradient,
    linear-gradient(
      135deg,
      var(--color-accent) 0%,
      color-mix(in srgb, var(--color-accent) 70%, #fff) 45%,
      var(--color-accent) 100%
    )
  );
  background-color: var(--color-accent);
  transform: scale(0);
  opacity: 0.92;
  transition:
    transform var(--dur-normal) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}

.agency-block .agency-btn:hover::before,
.agency-block .agency-btn:focus-visible::before {
  transform: scale(1);
}

/* Only transform and shadow move on hover, so this stays on the compositor. */
.agency-block .agency-btn:hover {
  transform: translateY(-1px);
}

.agency-block .agency-btn:active {
  transform: translateY(0);
}

/* The ring is the keyboard affordance — never removed without a replacement (§13). */
.agency-block .agency-btn:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: 2px;
}

.agency-block .agency-btn:disabled,
.agency-block .agency-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.agency-block .agency-btn:disabled::before,
.agency-block .agency-btn[aria-disabled="true"]::before {
  display: none;
}

.agency-block .agency-btn svg {
  flex-shrink: 0;
  transition: transform var(--dur-normal) var(--ease-spring);
}

.agency-block .agency-btn::after {
  content: none;
}

.agency-block .agency-btn--primary {
  --btn-fill-gradient: linear-gradient(
    135deg,
    var(--color-gold-dark, var(--color-accent)) 0%,
    var(--color-accent) 55%,
    var(--color-gold-light, var(--color-accent)) 100%
  );
  background-image: none;
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: transparent;
  box-shadow: var(--shadow-xs);
}

.agency-block .agency-btn--primary:hover,
.agency-block .agency-btn--primary:focus-visible {
  background-color: var(--color-gold-dark, var(--color-accent));
  filter: none;
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.agency-block .agency-btn--outline:hover,
.agency-block .agency-btn--outline:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
  background-image: var(--gradient-accent);
  background-position: 100% 50%;
  box-shadow: var(--shadow-sm);
}

/*
 * Ghost hover expands the shared gold ::before fill — text must flip to
 * accent-contrast or Cancel/secondary actions become gold-on-gold.
 */
.agency-block .agency-btn--ghost:hover,
.agency-block .agency-btn--ghost:focus-visible {
  color: var(--color-accent-contrast);
  background-color: transparent;
  border-color: transparent;
}

.agency-block .agency-btn--secondary {
  background-image: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    color-mix(in srgb, var(--color-primary) 78%, var(--color-accent)) 55%,
    var(--color-primary) 100%
  );
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  border-color: transparent;
}

.agency-block .agency-btn--secondary:hover {
  background-position: 100% 50%;
  box-shadow: var(--shadow-md);
}

.agency-block .agency-btn--outline {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.agency-block .agency-btn--ghost {
  --btn-fill-gradient: linear-gradient(
    135deg,
    var(--color-gold-dark, var(--color-accent)) 0%,
    var(--color-accent) 55%,
    var(--color-gold-light, var(--color-accent)) 100%
  );
  background-color: transparent;
  border-color: transparent;
  color: var(--color-accent);
  padding-inline: var(--space-2xs);
}

.agency-block .agency-btn--gradient {
  background-image: var(--gradient-accent);
  color: var(--color-accent-contrast);
  border-color: transparent;
}

/*
 * On a dark band the outline button needs a light border and light text.
 * `currentColor` is inherited from the band, so this holds for every colour
 * scheme without hardcoding white.
 */
.agency-block--bg-gradient .agency-btn--outline,
.agency-block--bg-inverse .agency-btn--outline,
.agency-block--bg-accent .agency-btn--outline {
  color: inherit;
  border-color: color-mix(in srgb, currentColor 40%, transparent);
}

.agency-block--bg-gradient .agency-btn--outline:hover,
.agency-block--bg-inverse .agency-btn--outline:hover,
.agency-block--bg-accent .agency-btn--outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.agency-block .agency-btn--sm {
  min-height: 36px;
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--step--1);
}

.agency-block .agency-btn--lg {
  min-height: 52px;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--step-1);
}

.agency-block .agency-btn--block {
  width: 100%;
}


/* -----------------------------------------------------------------------------
 * 6. CARD GRID AND CARD SHELL — agency/cards, agency/card
 *
 * One column on a phone, always. Three service cards side by side on a 360px
 * screen is not a layout, it is a legibility problem (§5, §6).
 * -------------------------------------------------------------------------- */

.agency-cards,
.agency-grid {
  --agency-columns: 1;

  display: grid;
  grid-template-columns: repeat(var(--agency-columns), minmax(0, 1fr));
  gap: var(--space-md);

  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

@media (min-width: 48em) {
  .agency-cards--2,
  .agency-grid--2 { --agency-columns: 2; }

  .agency-cards--3,
  .agency-grid--3 { --agency-columns: 2; }

  .agency-cards--4,
  .agency-grid--4 { --agency-columns: 2; }
}

@media (min-width: 64em) {
  .agency-cards--3,
  .agency-grid--3 { --agency-columns: 3; }

  .agency-cards--4,
  .agency-grid--4 { --agency-columns: 4; }

  .agency-cards,
  .agency-grid { gap: var(--space-lg); }
}

/* -----------------------------------------------------------------------------
 * ORPHAN CENTRING — balance an incomplete last row.
 *
 * A strict `grid-template-columns: repeat(N, 1fr)` grid with a non-multiple-of-N
 * number of items leaves the final row ragged (left-aligned orphans). The
 * client flagged this on `Industries → Seven sectors` (7 cards in a 4-col
 * grid: 4 + 3 ragged) and `Services → Also from KanbanN` (5 cards in a 3-col
 * grid: 3 + 2 ragged), and wants new cards to flow correctly whether the
 * count is odd or even.
 *
 * Approach: switch the grid to twice the column count (6 or 8 tracks) with
 * every item spanning 2 tracks, then re-position only the trailing orphans
 * so they sit centred. This keeps every "full" row visually identical to
 * the previous layout — the fix is only visible when a row isn't full.
 *
 * Scoped to >=64em because below that breakpoint the grid already collapses
 * (3-col → 2-col, 4-col → 2-col) and incomplete rows look fine.
 * -------------------------------------------------------------------------- */

@media (min-width: 64em) {
  /* 3-column grids: 6 tracks, items span 2.
   * Trailing cases we need to handle (N mod 3):
   *   1 orphan  — one card alone → centre it (span 2, start col 3)
   *   2 orphans — pair → first starts col 2, second starts col 4
   */
  .agency-grid--3:has(> :nth-child(3n+1):last-child):not(:has(> :nth-child(1):last-child)) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .agency-grid--3:has(> :nth-child(3n+2):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .agency-grid--3:has(> :nth-child(3n+1):last-child):not(:has(> :nth-child(1):last-child)) > *,
  .agency-grid--3:has(> :nth-child(3n+2):last-child) > * {
    grid-column: span 2;
  }

  /* 1 orphan — centre the lone trailing card. */
  .agency-grid--3:has(> :nth-child(3n+1):last-child):not(:has(> :nth-child(1):last-child)) > :last-child {
    grid-column: 3 / span 2;
  }

  /* 2 orphans — shift inward so the pair reads as centred. */
  .agency-grid--3:has(> :nth-child(3n+2):last-child) > :nth-last-child(2) {
    grid-column: 2 / span 2;
  }

  .agency-grid--3:has(> :nth-child(3n+2):last-child) > :last-child {
    grid-column: 4 / span 2;
  }

  /* 4-column grids: 8 tracks, items span 2.
   * Trailing cases (N mod 4):
   *   1 orphan  — centre (span 2, start col 4)
   *   2 orphans — pair → col 3 + col 5
   *   3 orphans — triplet → col 2 + col 4 + col 6
   */
  .agency-grid--4:has(> :nth-child(4n+1):last-child):not(:has(> :nth-child(1):last-child)),
  .agency-grid--4:has(> :nth-child(4n+2):last-child),
  .agency-grid--4:has(> :nth-child(4n+3):last-child) {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .agency-grid--4:has(> :nth-child(4n+1):last-child):not(:has(> :nth-child(1):last-child)) > *,
  .agency-grid--4:has(> :nth-child(4n+2):last-child) > *,
  .agency-grid--4:has(> :nth-child(4n+3):last-child) > * {
    grid-column: span 2;
  }

  /* 1 orphan */
  .agency-grid--4:has(> :nth-child(4n+1):last-child):not(:has(> :nth-child(1):last-child)) > :last-child {
    grid-column: 4 / span 2;
  }

  /* 2 orphans */
  .agency-grid--4:has(> :nth-child(4n+2):last-child) > :nth-last-child(2) {
    grid-column: 3 / span 2;
  }

  .agency-grid--4:has(> :nth-child(4n+2):last-child) > :last-child {
    grid-column: 5 / span 2;
  }

  /* 3 orphans */
  .agency-grid--4:has(> :nth-child(4n+3):last-child) > :nth-last-child(3) {
    grid-column: 2 / span 2;
  }

  .agency-grid--4:has(> :nth-child(4n+3):last-child) > :nth-last-child(2) {
    grid-column: 4 / span 2;
  }

  .agency-grid--4:has(> :nth-child(4n+3):last-child) > :last-child {
    grid-column: 6 / span 2;
  }
}

.agency-block .agency-card {
  /* Anchors the title link's ::after, which extends the hit area over the
   * whole card so a phone user does not have to hit the words (§10). */
  position: relative;

  display: flex;
  flex-direction: column;
  min-width: 0;

  background-color: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);

  /* Keeps the rounded corner over a child image. */
  overflow: hidden;

  transition:
    box-shadow var(--dur-normal) var(--ease-out),
    transform var(--dur-normal) var(--ease-out),
    border-color var(--dur-normal) var(--ease-out);
}

.agency-block .agency-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  inline-size: 3px;
  background-image: var(--gradient-accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur-normal) var(--ease-out);
}

.agency-block .agency-card:hover::before,
.agency-block .agency-card:focus-within::before {
  transform: scaleY(1);
}

/* Hover AND focus-within: a keyboard user gets the same affordance (§10, §13). */
.agency-block .agency-card:hover,
.agency-block .agency-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
}

.agency-block .agency-card__media {
  /* A reserved ratio means no layout shift while the image loads. */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-surface);
}

/* Team portraits are the exception: a square crop decapitates people. */
.agency-block .agency-card__media--portrait {
  aspect-ratio: 4 / 5;
}

.agency-block .agency-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Beats `.prose img { border-radius }` on both specificity and order: the
   * card's own radius already rounds the corner. */
  border-radius: 0;

  transition: transform var(--dur-slow) var(--ease-out);
}

.agency-block .agency-card:hover .agency-card__media img {
  transform: scale(1.04);
}

.agency-block .agency-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex-grow: 1;
  padding: var(--space-md);
}

@media (prefers-reduced-motion: reduce) {
  .agency-block .agency-card,
  .agency-block .agency-card__media img,
  .agency-block .agency-feature,
  .agency-block .agency-btn::after,
  .agency-block .agency-btn svg {
    transition: none;
  }

  .agency-block .agency-card:hover,
  .agency-block .agency-card:focus-within,
  .agency-block .agency-feature:hover,
  .agency-block .agency-feature:focus-within {
    transform: none;
  }

  .agency-block .agency-card:hover .agency-card__media img {
    transform: none;
  }

  .agency-block .agency-card::before {
    transform: scaleY(1);
  }

  .agency-block .agency-btn:hover svg,
  .agency-block .agency-btn:focus-visible svg {
    transform: none;
  }
}


/* -----------------------------------------------------------------------------
 * 7. CARD INTERNALS — title, org, text, meta, facts, glyph
 *
 * Every size here resolves to a token, and every heading margin is reset: the
 * theme's `.prose h3` would otherwise give a card title a blog-sized gap above
 * it (§61).
 * -------------------------------------------------------------------------- */

.agency-block .agency-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
  color: var(--color-steel, var(--color-primary));
}

.agency-block .agency-card__title a {
  color: inherit;
  text-decoration: none;
}

/* Stretches the link over the card. No z-index is used, so nothing inside the
 * card is covered and the card stays scrollable and selectable (§10). */
.agency-block .agency-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.agency-block .agency-card__title a:focus-visible {
  outline: none;
}

/* Because the link itself is outline-free, the ring moves to the card. */
.agency-block .agency-card:has(.agency-card__title a:focus-visible) {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: 2px;
}

/* An action link inside a card needs to sit above the title link's hit area. */
.agency-block .agency-card__link {
  position: relative;
  z-index: var(--z-raised);
  margin: 0;
  font-weight: 600;
}

.agency-block .agency-card__link a {
  color: var(--color-accent);
  text-decoration: none;
}

.agency-block .agency-card__link a:hover {
  text-decoration: underline;
}

.agency-block .agency-card__org {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--color-accent);
}

.agency-block .agency-card__eyebrow {
  margin: 0;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.agency-block .agency-card__text {
  margin: 0;
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.agency-block .agency-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  font-size: var(--step--2);
  color: var(--color-muted);
}

/* The date is a <time>; keep it on the meta line rather than as a block. */
.agency-block .agency-card__meta time {
  font-variant-numeric: tabular-nums;
}

/*
 * Job facts: role, company, location, salary. A definition list because that is
 * what a label/value pair is, and because a screen reader can then announce the
 * label with the value (§13).
 */
.agency-block .agency-card__facts {
  display: grid;
  gap: var(--space-3xs);

  margin: var(--space-2xs) 0 0;
  padding-block-start: var(--space-2xs);

  border-block-start: var(--border-width) solid var(--color-border);
  font-size: var(--step--1);
}

.agency-block .agency-card__fact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  min-width: 0;
}

.agency-block .agency-card__fact dt {
  font-weight: 600;
  color: var(--color-muted);
  /* A fixed label column makes a list of job cards scannable rather than
   * ragged. Rem-based, so it scales with the user's font size. */
  min-inline-size: 5.5rem;
}

.agency-block .agency-card__fact dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The decorative icon on a service card. */
.agency-block .agency-card__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin-block-end: var(--space-2xs);

  border-radius: var(--radius-circle);
  background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
}


/* -----------------------------------------------------------------------------
 * 8. CARD VARIANTS — job, service, team, post, project, quote, muted
 * -------------------------------------------------------------------------- */

/* A job listing is an editorial row — not a marketing tile. */
.agency-block .agency-card--job {
  border-radius: 0;
  border-color: color-mix(in srgb, var(--color-border) 88%, var(--color-primary));
  background:
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--color-primary) 4%, var(--color-surface-raised)) 0%,
      var(--color-surface-raised) 42%
    );
  box-shadow: none;
}

.agency-block .agency-card--job:hover,
.agency-block .agency-card--job:focus-within {
  transform: none;
  border-color: color-mix(in srgb, var(--color-gold, var(--color-accent)) 45%, var(--color-border));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.agency-block .agency-card--job::before {
  inline-size: 3px;
  background-image: linear-gradient(
    180deg,
    var(--color-gold, var(--color-accent)) 0%,
    var(--color-primary) 100%
  );
  transform: scaleY(1);
  opacity: 0.55;
}

.agency-block .agency-card--job:hover::before,
.agency-block .agency-card--job:focus-within::before {
  opacity: 1;
}

.agency-block .agency-card--job .agency-card__body {
  gap: 0;
  padding: 0;
}

.agency-block .agency-job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1.1rem 1.15rem 1.15rem 1.25rem;
  min-width: 0;
}

@media (min-width: 768px) {
  .agency-block .agency-job-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(11rem, 0.85fr) auto;
    align-items: center;
    gap: 1.25rem 1.5rem;
    padding: 1.25rem 1.35rem 1.25rem 1.5rem;
  }
}

.agency-block .agency-job-row__main {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.agency-block .agency-card--job .agency-card__title {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  letter-spacing: -0.01em;
}

.agency-block .agency-card--job .agency-card__org {
  margin: 0;
  color: var(--color-primary-mid, var(--color-primary));
  font-size: var(--step--1);
  font-weight: 600;
}

.agency-block .agency-card--job .agency-card__text {
  margin: 0.15rem 0 0;
  max-width: 42rem;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.45;
}

.agency-block .agency-job-row__chips {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

@media (min-width: 480px) and (max-width: 767.98px) {
  .agency-block .agency-job-row__chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.agency-block .agency-job-row__chip {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 90%, transparent);
  background: color-mix(in srgb, var(--color-bg, #fff) 55%, transparent);
}

.agency-block .agency-job-row__chip-label {
  color: var(--color-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agency-block .agency-job-row__chip-value {
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.agency-block .agency-job-row__cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  min-height: 2.75rem;
  color: var(--color-gold, var(--color-accent));
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .agency-block .agency-job-row__cta {
    justify-content: flex-end;
    padding-inline-end: 0.15rem;
  }
}

.agency-block .agency-job-row__cta-arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}

.agency-block .agency-card--job:hover .agency-job-row__cta-arrow,
.agency-block .agency-card--job:focus-within .agency-job-row__cta-arrow {
  transform: translateX(0.2rem);
}

.agency-cards--jobs {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .agency-cards--jobs {
    gap: 0.85rem;
  }
}

/*
 * Job row IS the card body — the zero padding on `.agency-card__body` must not
 * win here or title/chips/CTA sit flush and clip under overflow:hidden.
 */
.agency-block .agency-card--job .agency-card__body.agency-job-row {
  gap: 0.85rem;
  padding: 1.1rem 1.2rem 1.15rem 1.35rem;
  box-sizing: border-box;
  overflow: visible;
}

@media (min-width: 768px) {
  .agency-block .agency-card--job .agency-card__body.agency-job-row {
    padding: 1.25rem 1.5rem 1.25rem 1.6rem;
  }
}

.agency-block .agency-card--job {
  overflow: visible;
}

/*
 * An expired job is de-emphasised AND carries a "Closed" badge, so the state is
 * never communicated by opacity alone (§14).
 */
.agency-block .agency-card--muted {
  opacity: 0.72;
}

.agency-block .agency-card--muted .agency-card__title a {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-muted);
}

/* The service glyph already provides visual interest: no media needed. */
.agency-block .agency-card--service .agency-card__body {
  padding-block-start: var(--space-lg);
}

.agency-block .agency-card--team {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}

.agency-block .agency-card--team .agency-card__media--portrait {
  flex: 0 0 min(42%, 11rem);
  max-width: 11rem;
  aspect-ratio: 3 / 4;
}

.agency-block .agency-card--team .agency-card__media--portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agency-block .agency-card--team .agency-card__body {
  flex: 1 1 auto;
  justify-content: center;
  padding: var(--space-md) var(--space-lg);
  gap: var(--space-2xs);
}

.agency-block .agency-card--team .agency-card__org {
  color: var(--color-accent);
  font-weight: 600;
  margin: 0;
}

.agency-block .agency-card--team .agency-card__text {
  margin: var(--space-xs) 0 0;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
}

@media (max-width: 47.99em) {
  .agency-block .agency-card--team {
    flex-direction: column;
  }

  .agency-block .agency-card--team .agency-card__media--portrait {
    flex-basis: auto;
    max-width: none;
    aspect-ratio: 16 / 10;
  }
}

/* A post card's date leads, so it sits above the title without a gap. */
.agency-block .agency-card--post .agency-card__meta {
  margin-block-end: var(--space-3xs);
}

/* -----------------------------------------------------------------------------
 * 9. QUOTE CARD — the testimonial figure inside a carousel slide
 * -------------------------------------------------------------------------- */

.agency-block .agency-card--quote {
  position: relative;
  padding: var(--space-lg);
  background-color: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* A decorative quote mark, drawn by CSS so it is invisible to assistive tech
 * and to text selection. Scales in on reveal (references/testimonial-design.png). */
.agency-block .agency-card--quote::before {
  content: "\201C";
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-end: var(--space-md);

  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-accent);

  opacity: 0.18;
  pointer-events: none;
  transform: scale(0.85);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-spring);
}

.has-agency-motion [data-agency-reveal].is-revealed .agency-card--quote::before,
.agency-block .agency-card--quote:hover::before {
  opacity: 0.28;
  transform: scale(1);
}

.agency-block .agency-quote__text {
  position: relative; /* Above the decorative mark. */
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}

.agency-block .agency-quote__text p {
  margin: 0;
}

.agency-block .agency-quote__author,
.agency-block .agency-quote__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: var(--space-md);
  transform: translate3d(0, 8px, 0);
  opacity: 0.85;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.has-agency-motion [data-agency-reveal].is-revealed .agency-quote__author,
.has-agency-motion [data-agency-reveal].is-revealed .agency-quote__caption,
.agency-block .agency-card--quote:hover .agency-quote__author,
.agency-block .agency-card--quote:hover .agency-quote__caption {
  opacity: 1;
  transform: none;
}

.agency-block .agency-quote__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.agency-block .agency-quote__avatar {
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--radius-circle);
  object-fit: cover;
  flex-shrink: 0;
}

.agency-block .agency-quote__name {
  font-size: var(--step--1);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.agency-block .agency-quote__role {
  font-size: var(--step--2);
  color: var(--color-muted);
}

/*
 * Stars are supplementary: the numeric rating is in the visally-hidden text
 * next to them, so the value is never carried by glyphs alone (§14).
 */
.agency-block .agency-rating,
.agency-block .agency-quote__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  margin: 0;
  color: var(--color-accent);
}

/*
 * Collage-style testimonials on an inverse band
 * (references/testimonial-design.png): raised white/accent quote cards, slight
 * rotation stagger, stronger quote mark.
 */
.agency-block--bg-inverse .agency-card--quote {
  background-color: #ffffff;
  color: var(--color-text, #0b1a33);
  border: 0;
  box-shadow: var(--shadow-lg, 0 18px 40px rgba(0, 0, 0, 0.22));
}

.agency-block--bg-inverse .agency-grid > .agency-card--quote:nth-child(odd) {
  transform: rotate(-1.25deg);
}

.agency-block--bg-inverse .agency-grid > .agency-card--quote:nth-child(even) {
  transform: rotate(1.25deg);
  background-color: color-mix(in srgb, var(--color-accent) 14%, #ffffff);
}

.agency-block--bg-inverse .agency-card--quote::before {
  opacity: 0.35;
  color: var(--color-accent);
  font-size: 6rem;
}

/*
 * Wire testimonials-quotes.svg when Assets injects --agency-quotes-decor.
 * Collage band gets a soft watermark of the client's quote mark artwork.
 */
.agency-block--testimonials.agency-block--bg-inverse {
  position: relative;
  isolation: isolate;
  /* Allow tilted collage cards to paint past the band edge. */
  overflow-x: visible;
}

.agency-block--testimonials.agency-block--bg-inverse::before {
  content: "";
  position: absolute;
  inset-block-start: 8%;
  inset-inline-end: 4%;
  inline-size: min(28vw, 14rem);
  block-size: min(28vw, 14rem);
  background-image: var(--agency-quotes-decor, none);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}

.agency-block--testimonials.agency-block--bg-inverse > .agency-block__inner {
  position: relative;
  z-index: 1;
}

.agency-block--bg-inverse .agency-quote__text,
.agency-block--bg-inverse .agency-quote__name {
  /* White quote cards always need dark ink — never inherit light --color-text. */
  color: var(--color-text, #0b1a33);
}

.agency-block--bg-inverse .agency-quote__role {
  color: #4b6467;
}

.agency-block--bg-inverse .agency-logos--muted .agency-logos__image {
  /* Keep greyscale readable on navy — never invert to white ghosts. */
  filter: grayscale(1) brightness(1.15);
  opacity: 0.9;
}

.agency-block--bg-inverse .agency-logos:not(.agency-logos--muted) .agency-logos__image {
  /* Full-colour marks, no white plate behind them. */
  filter: none;
  opacity: 1;
}

.agency-block--bg-inverse .agency-logos--muted .agency-logos__item:hover .agency-logos__image,
.agency-block--bg-inverse .agency-logos--muted .agency-logos__link:focus-visible .agency-logos__image {
  filter: none;
  opacity: 1;
}

/* A standalone pull-quote: no card chrome, just the words. */
.agency-block .agency-quote--standalone {
  margin: 0;
  padding-inline-start: var(--space-md);
  border-inline-start: calc(var(--border-width) * 3) solid var(--color-accent);
}

.agency-block .agency-quote--center {
  text-align: center;
  padding-inline-start: 0;
  border-inline-start: 0;
  margin-inline: auto;
  max-width: var(--measure);
}


/* -----------------------------------------------------------------------------
 * 10. BADGES, ICONS, EMPTY STATES, ACTION LINKS, UTILITIES
 *
 * Shared primitives used by several blocks, so they are defined once (§60).
 * -------------------------------------------------------------------------- */

.agency-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);

  padding: 0.25em 0.7em;
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1.6;

  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-muted);
}

/*
 * Badge colours are tints, not fills, and the badge always carries a word
 * ("New", "Closed", "Contract"), so state is never signalled by colour alone
 * (§14). Same palette as the theme's `.badge--*`.
 */
.agency-badge--accent {
  background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  color: var(--color-accent);
}

.agency-badge--success {
  background-color: color-mix(in srgb, var(--color-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
  color: var(--color-success);
}

.agency-badge--warning {
  background-color: color-mix(in srgb, var(--color-warning) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
  color: var(--color-text);
}

.agency-badge--danger {
  background-color: color-mix(in srgb, var(--color-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
  color: var(--color-danger);
}

.agency-icon {
  display: block;
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
}

/* An icon is never the only clickable area and never the only label (§10, §14). */
.agency-block svg {
  max-width: 100%;
}

.agency-empty {
  padding: var(--space-lg);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--color-muted);
}

.agency-empty__hint {
  margin-block-start: var(--space-2xs);
  font-size: var(--step--1);
}

.agency-action {
  margin: 0;
}

.agency-action__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.agency-action__link:hover {
  text-decoration: underline;
}

.agency-action__link:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Nudges the arrow on hover; the link text carries the meaning, not the icon. */
.agency-action__arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}

.agency-action__link:hover .agency-action__arrow {
  transform: translateX(2px);
}

.agency-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .agency-action__arrow {
    transition: none;
  }

  .agency-action__link:hover .agency-action__arrow {
    transform: none;
  }
}


/* -----------------------------------------------------------------------------
 * 11. HERO — agency/hero
 *
 * Three shapes share one grid: `--split` (copy beside media), `--text-only`, and
 * the media side chosen by `--media-start` / `--media-end`. The stack is the
 * default because a phone cannot show a headline and a photo side by side (§5).
 * -------------------------------------------------------------------------- */

.agency-block .agency-hero {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.agency-block .agency-hero__content {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

/* The hero is the one place a display size that large is justified.
 * Aquent-tier oversized statement type on text-only heroes. */
.agency-block .agency-hero .agency-head__title {
  font-size: clamp(var(--step-4), 1.6rem + 4vw, var(--step-6));
  letter-spacing: -0.03em;
}

.agency-block .agency-hero--text-only .agency-head__title {
  /* Was 3.6rem — reduced ~15% so the headline reads as corporate, not shouty. */
  font-size: clamp(1.85rem, 1.25rem + 2.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 18ch;
}

.agency-block .agency-hero__media {
  min-width: 0;
}

.agency-block .agency-hero__image {
  display: block;
  inline-size: 100%;
  block-size: auto;

  /* A reserved ratio prevents the hero from reflowing as the photo arrives —
   * the single most common cause of a bad CLS score on a landing page. */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Centred hero copy (used by the FAQ and contact intros). */
.agency-block .agency-hero--align-center {
  text-align: center;
}

.agency-block .agency-hero--align-center .agency-head {
  margin-inline: auto;
}

.agency-block .agency-hero--align-center .agency-btns {
  justify-content: center;
}

.agency-block .agency-hero--text-only .agency-hero__content {
  max-width: var(--measure-wide);
}

.agency-block .agency-hero--align-center .agency-hero__content {
  margin-inline: auto;
}

/*
 * The renderer prints an alignment and a media side on every hero, defaults
 * included, so both defaults are declared rather than left to inheritance: an
 * author who switches a centred hero back to the left gets that change from their
 * own setting, not from source order.
 *
 * CONTRACT — every value the editor can pick has a rule.
 *
 * `--media-end` is the natural source order and is declared anyway: relying on the
 * absence of a rule is how a later `order` on the base class silently breaks the
 * swap. The only intentional no-ops in this file are the `agency-block--{name}`
 * name hooks (§2) and the carousel's `agency-carousel__slide--{n}` count (§26).
 */
.agency-block .agency-hero--align-start {
  text-align: start;
}

.agency-block .agency-hero--align-start .agency-btns {
  justify-content: flex-start;
}

/*
 * Image below the copy: a measure of text, then the photo across the container.
 * The wider crop from tablet up stops a full-column 16/10 photo turning a hero
 * into a slideshow taller than the viewport.
 */
.agency-block .agency-hero--image-below .agency-hero__content {
  max-width: var(--measure-wide);
}

@media (min-width: 48em) {
  .agency-block .agency-hero--image-below .agency-hero__image {
    aspect-ratio: 21 / 9;
  }
}

/*
 * Side-by-side from 64em only. Below that the copy and the photo stack, which is
 * the layout a phone actually wants.
 */
@media (min-width: 64em) {
  .agency-block .agency-hero--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
  }

  /* Source order is copy-then-media; the modifier swaps the visual order
   * without touching the DOM order, so the heading is always read first (§34). */
  .agency-block .agency-hero--split.agency-hero--media-start .agency-hero__content {
    order: 2;
  }

  .agency-block .agency-hero--split.agency-hero--media-start .agency-hero__media {
    order: 1;
  }

  /* The other side of that swap, spelled out rather than left to the absence of
   * a rule above (§48). */
  .agency-block .agency-hero--split.agency-hero--media-end .agency-hero__content {
    order: 1;
  }

  .agency-block .agency-hero--split.agency-hero--media-end .agency-hero__media {
    order: 2;
  }
}


/* -----------------------------------------------------------------------------
 * 12. STATS AND COUNTERS — agency/stats, agency/stat, agency/counter
 *
 * `auto-fit` with a floor rather than a fixed column count: four figures sit in
 * a row on a desktop, the same markup stacks on a phone, and no breakpoint has
 * to know how many there are (§6, §7). When an editor states a column count it
 * is honoured from tablet up, where a stated count is actually legible.
 * -------------------------------------------------------------------------- */

.agency-block .agency-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-md);

  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.agency-block .agency-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}

/*
 * The counting element. `tabular-nums` stops the layout from jittering while
 * the digits change width mid-count, and the final value is already in the
 * markup for the no-JavaScript case (§40).
 */
.agency-block .agency-counter,
.agency-block .agency-counter__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(var(--step-4), 1.5rem + 3vw, var(--step-6));
  font-weight: 600;
  line-height: var(--leading-none);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
  color: var(--color-primary-bright, var(--color-primary-mid, var(--color-primary)));
}

/*
 * The size scale the counter block actually offers is md | lg | xl. `lg` is the
 * block default, so it keeps the same clamp the unsized figure in a stats row
 * gets; md steps down, xl steps up to the largest token in the scale.
 */
.agency-block .agency-counter--md .agency-counter__value,
.agency-block .agency-counter--md {
  font-size: var(--step-4);
}

.agency-block .agency-counter--lg .agency-counter__value,
.agency-block .agency-counter--lg {
  font-size: clamp(var(--step-4), 1.5rem + 3vw, var(--step-6));
}

.agency-block .agency-counter--xl .agency-counter__value,
.agency-block .agency-counter--xl {
  font-size: var(--step-6);
}

.agency-block .agency-counter__label {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-muted);
}

.agency-block .agency-stat__label {
  font-size: var(--step-0);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.agency-block .agency-stat__note,
.agency-block .agency-stat__desc {
  margin: 0;
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.agency-block .agency-stats__footnote {
  margin: var(--space-md) 0 0;
  font-size: var(--step--1);
  color: var(--color-muted);
}

/*
 * A card treatment for the highlighted band. The figures are the content, so
 * they never become an image or a chart that a screen reader cannot read.
 */
.agency-block .agency-stats--highlight .agency-stat {
  padding: var(--space-md);
  background-color: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* McKinsey-scale numerals on inverse highlighted bands. */
.agency-block--bg-inverse .agency-stats--highlight .agency-stat {
  background-color: #ffffff;
  border-color: transparent;
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}

.agency-block--bg-inverse .agency-stats--highlight .agency-stat .agency-counter,
.agency-block--bg-inverse .agency-stats--highlight .agency-stat .agency-counter__value,
.agency-block--bg-inverse .agency-stats--highlight .agency-stat__value {
  color: var(--color-primary);
  /* Dialled down from 3.3rem — numerals were visually overpowering. */
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.agency-block--bg-inverse .agency-stats--highlight .agency-stat__label,
.agency-block--bg-inverse .agency-stats--highlight .agency-stat__note,
.agency-block--bg-inverse .agency-stats--highlight .agency-stat__desc {
  color: var(--color-text);
  opacity: 1;
}

/*
 * The column count the editor picked (1-4). Below 48em the auto-fit floor above
 * still wins, because two or three figures side by side on a phone is unreadable;
 * from tablet up the choice is honoured exactly, and three and four only get all
 * their columns once there is real room for them (§6, §51).
 */
@media (min-width: 48em) {
  .agency-block .agency-stats--1 { grid-template-columns: minmax(0, 1fr); }
  .agency-block .agency-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agency-block .agency-stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agency-block .agency-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .agency-block .agency-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agency-block .agency-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.agency-block--bg-gradient .agency-stat__label,
.agency-block--bg-gradient .agency-stat__note,
.agency-block--bg-inverse .agency-stat__label,
.agency-block--bg-inverse .agency-stat__note {
  color: inherit;
  opacity: 0.85;
}


/* -----------------------------------------------------------------------------
 * 13. FEATURES — agency/features (a list of agency-feature items)
 * -------------------------------------------------------------------------- */

.agency-block .agency-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;

  padding: var(--space-md);
  background-color: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);

  transition:
    transform var(--dur-normal) var(--ease-out),
    box-shadow var(--dur-normal) var(--ease-out),
    border-color var(--dur-normal) var(--ease-out);
}

.agency-block .agency-feature::before {
  content: "";
  display: block;
  inline-size: 2.5rem;
  block-size: 3px;
  margin-block-end: var(--space-2xs);
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: transform var(--dur-normal) var(--ease-out);
}

.agency-block .agency-feature:hover::before,
.agency-block .agency-feature:focus-within::before {
  transform: scaleX(1);
}

.agency-block .agency-feature:hover,
.agency-block .agency-feature:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
}

.agency-block .agency-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  inline-size: clamp(4.5rem, 3rem + 6vw, 7rem);
  block-size: clamp(4.5rem, 3rem + 6vw, 7rem);
  margin-block-end: var(--space-sm);

  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  color: var(--color-accent);
}

.agency-block .agency-feature__icon--media {
  padding: var(--space-sm);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--color-primary) 6%, #fff) 0%,
    color-mix(in srgb, var(--color-accent) 8%, #fff) 100%
  );
  border: var(--border-width) solid var(--color-border);
}

.agency-block .agency-feature__icon-img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.agency-block .agency-feature__title {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-steel, var(--color-primary));
}

.agency-block .agency-feature__body {
  margin: 0;
  font-size: var(--step--1);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
}

/*
 * Recrute / references/why-choose — photo cards with curved accent overlay on hover.
 */
.agency-features--overlay {
  align-items: stretch;
}

.agency-feature--overlay {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-block-size: clamp(18rem, 40vw, 26rem);
}

.agency-feature--overlay::before {
  display: none !important;
}

.agency-feature--overlay:hover,
.agency-feature--overlay:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg) !important;
}

.agency-feature__stage {
  position: relative;
  display: grid;
  min-block-size: inherit;
  block-size: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.agency-feature__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1000ms var(--ease-out);
}

.agency-feature--overlay:hover .agency-feature__photo,
.agency-feature--overlay:focus-within .agency-feature__photo {
  transform: scale(1.02);
  object-position: center 18%;
}

.agency-feature__overlay {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-md) var(--space-lg);
  color: #ffffff;
  /* --color-navy, not --color-primary: primary is white in dark mode (bleached scrim). */
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--color-navy, #003366) 55%, transparent) 35%,
    color-mix(in srgb, var(--color-navy, #003366) 92%, #000) 100%
  );
  clip-path: ellipse(140% 100% at 50% 100%);
  transform: translate3d(0, 28%, 0);
  transition:
    transform 500ms var(--ease-out),
    background-color 500ms var(--ease-out);
}

.agency-feature--overlay:hover .agency-feature__overlay,
.agency-feature--overlay:focus-within .agency-feature__overlay {
  transform: none;
  /* Grow into the photo so full copy fits; clip-path off so text is not cropped. */
  inset-block-start: 18%;
  max-block-size: none;
  clip-path: none;
  align-content: end;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--color-accent) 70%, transparent) 18%,
    var(--color-accent) 100%
  );
}

/* Dark mode lifts the gold; pin the hover wash to brand gold so white copy holds. */
[data-theme="dark"] .agency-feature--overlay:hover .agency-feature__overlay,
[data-theme="dark"] .agency-feature--overlay:focus-within .agency-feature__overlay {
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, #deac2b 70%, transparent) 18%,
    #c99a1c 100%
  );
}

.agency-feature--overlay .agency-feature__icon {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin: 0;
  padding: 0.35rem;
  background: rgb(255 255 255 / 0.22);
  border: 0;
  /* Gold at rest on every viewport (was white on desktop). */
  color: var(--color-gold, #c4a35a);
}

.agency-feature--overlay .agency-feature__icon .agency-icon {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  stroke: var(--color-gold, #c4a35a);
}

.agency-feature--overlay .agency-feature__icon-img {
  /* Gold silhouette — desktop + mobile */
  filter: brightness(0) saturate(100%) invert(72%) sepia(38%) saturate(520%)
    hue-rotate(6deg) brightness(95%) contrast(92%);
}

.agency-feature--overlay:hover .agency-feature__icon,
.agency-feature--overlay:focus-within .agency-feature__icon {
  color: var(--color-navy, #003366);
}

.agency-feature--overlay:hover .agency-feature__icon .agency-icon,
.agency-feature--overlay:focus-within .agency-feature__icon .agency-icon {
  stroke: var(--color-navy, #003366);
}

.agency-feature--overlay:hover .agency-feature__icon-img,
.agency-feature--overlay:focus-within .agency-feature__icon-img {
  /* Emerald silhouette on gold wash */
  filter: brightness(0) saturate(100%) invert(28%) sepia(42%) saturate(900%)
    hue-rotate(146deg) brightness(92%) contrast(95%);
}

.agency-feature--overlay .agency-feature__title,
.agency-feature--overlay .agency-feature__body {
  color: #ffffff;
}

.agency-feature--overlay .agency-feature__body {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0.92;
}

/* Hover / keyboard focus: reveal full body; photo remains only in the top band. */
.agency-feature--overlay:hover .agency-feature__body,
.agency-feature--overlay:focus-within .agency-feature__body {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Touch / no-hover: always show full copy (hover cannot be the only path). */
@media (hover: none) {
  .agency-feature--overlay .agency-feature__overlay {
    transform: none;
    inset-block-start: 22%;
    clip-path: none;
    align-content: end;
  }

  .agency-feature--overlay .agency-feature__body {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agency-feature__photo,
  .agency-feature__overlay {
    transition: none;
  }
}

.agency-block .agency-feature__title {
  font-family: var(--font-display);
  overflow-wrap: anywhere;
}

.agency-block .agency-feature__body {
  overflow-wrap: anywhere;
}


/* -----------------------------------------------------------------------------
 * 14. PROCESS — agency/process (an ordered list of steps)
 *
 * Michael Page pattern (references/michaepage-homepage-section.png): numbered
 * badge overlapping a slightly tilted photo, white copy card below, on an
 * inverse band. Without media the steps keep the simpler rule-and-badge layout.
 *
 * The renderer ships an EMPTY `span.agency-process__index`. The number is drawn
 * by a CSS counter instead of being hardcoded, so inserting a step in the editor
 * renumbers the rest automatically and the number is never announced twice
 * (the span is aria-hidden; the <ol> already carries the order).
 * -------------------------------------------------------------------------- */

.agency-block .agency-process {
  counter-reset: agency-process;
  list-style: none;
}

/*
 * 3+2 "honeycomb" layout when a 3-column process has exactly five cards.
 *
 * Default grid auto-fills left-to-right and the two cards on row two sit
 * flush left under cards 1 and 2, which reads as "missing third card". A
 * 6-column grid with each card spanning 2 columns lets us centre the two
 * bottom cards in the gaps of the three above them.
 *
 * Scoped to desktop (≥64em) because the mobile grid is already 2-col and
 * only to the process block (the only 3+2 case in this project today).
 */
@media (min-width: 64em) {
  .agency-process.agency-grid--3:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .agency-process.agency-grid--3:has(> :nth-child(5):last-child) > .agency-process__step {
    grid-column: span 2;
  }

  .agency-process.agency-grid--3:has(> :nth-child(5):last-child) > .agency-process__step:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .agency-process.agency-grid--3:has(> :nth-child(5):last-child) > .agency-process__step:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

.agency-block .agency-process__step {
  counter-increment: agency-process;

  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;

  padding-block-start: var(--space-md);
  border-block-start: calc(var(--border-width) * 3) solid var(--color-border);
}

.agency-block .agency-process__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin-block-end: var(--space-2xs);

  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);

  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: var(--leading-none);
}

.agency-block .agency-process__index::before {
  content: counter(agency-process);
}

.agency-block .agency-process__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.agency-block .agency-process__body {
  margin: 0;
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

/* Media steps — photo card with overlapping index (Michael Page). */
.agency-block .agency-process__step--media {
  position: relative;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.agency-block .agency-process__media {
  /* Sharp frame — tilt already gives character; rounding looked soft/childish. */
  position: relative;
  z-index: 1;
  margin-inline: var(--space-md);
  margin-block-end: calc(var(--space-md) * -1);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transform: rotate(-2deg);
  transition: transform var(--dur-normal) var(--ease-out);
}

.agency-block .agency-process__step--media:nth-child(even) .agency-process__media {
  transform: rotate(2deg);
}

.agency-block .agency-process__step--media:hover .agency-process__media,
.agency-block .agency-process__step--media:focus-within .agency-process__media {
  transform: rotate(0deg) translateY(-4px);
}

.agency-block .agency-process__image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.agency-block .agency-process__step--media .agency-process__index {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin: 0;
  font-size: var(--step-1);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

/* Cycle accent badge hues so a four-step row reads like the reference. */
/* Index badges cycle the brand palette: gold, steel navy, brass, corporate navy. */
.agency-block .agency-process__step--media:nth-child(4n + 1) .agency-process__index {
  background-color: var(--color-accent, #deac2b);
  color: #ffffff;
}

.agency-block .agency-process__step--media:nth-child(4n + 2) .agency-process__index {
  background-color: var(--color-steel, #1e4e79);
  color: #ffffff;
}

.agency-block .agency-process__step--media:nth-child(4n + 3) .agency-process__index {
  background-color: var(--color-brass, #c6a15b);
  color: #0b1a33;
}

/* --color-navy (not --color-primary) — primary flips to white in dark mode. */
.agency-block .agency-process__step--media:nth-child(4n + 4) .agency-process__index {
  background-color: var(--color-navy, #003366);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35);
}

.agency-block .agency-process__copy {
  display: grid;
  gap: var(--space-2xs);
  padding: calc(var(--space-md) + var(--space-sm)) var(--space-md) var(--space-md);
  background-color: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.agency-block .agency-process__step--media .agency-process__title {
  color: var(--color-primary-light, var(--color-primary));
}

.agency-block .agency-process__step--media .agency-process__body {
  color: var(--color-muted);
}

/* On inverse bands without media, keep muted copy readable. */
.agency-block--bg-inverse .agency-process__step:not(.agency-process__step--media) {
  border-block-start-color: color-mix(in srgb, var(--color-primary-contrast) 28%, transparent);
}

.agency-block--bg-inverse .agency-process__step:not(.agency-process__step--media) .agency-process__body {
  color: inherit;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .agency-block .agency-process__media,
  .agency-block .agency-process__step--media:nth-child(even) .agency-process__media,
  .agency-block .agency-process__step--media:hover .agency-process__media,
  .agency-block .agency-process__step--media:focus-within .agency-process__media {
    transform: none;
  }
}


/* -----------------------------------------------------------------------------
 * 15. CALL TO ACTION — agency/cta
 *
 * Almost always rendered on a gradient band (`agency-block--bg-gradient`), so the
 * copy inherits the band's contrast colour rather than the page text colour.
 * -------------------------------------------------------------------------- */

.agency-block .agency-cta {
  position: relative;
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.agency-block .agency-cta .agency-head__title {
  font-size: clamp(var(--step-2), 1.2rem + 2.6vw, var(--step-4));
}

.agency-block .agency-cta--center {
  text-align: center;
  justify-items: center;
}

.agency-block .agency-cta--center .agency-head {
  width: 100%;
}

.agency-block .agency-cta--center .agency-btns {
  width: 100%;
  max-width: none;
  justify-content: center;
}

/*
 * A CTA never sits on its own with nothing to do: if the buttons are missing the
 * block still holds its shape rather than collapsing to a bare heading.
 */
.agency-block .agency-cta .agency-btns:empty {
  display: none;
}

@media (min-width: 64em) {
  .agency-block .agency-cta {
    gap: var(--space-lg);
  }
}


/* -----------------------------------------------------------------------------
 * 16. VIDEO FACADE — agency/video
 *
 * The markup ships a poster and a real <button>; the <video>/<iframe> is only
 * created on click by motion.js, which empties the `[data-agency-video-facade]`
 * frame and marks it `.is-playing`. That is why the outer box owns the aspect
 * ratio, the frame holds nothing but the poster and the control, and the injected
 * player is told to fill the box: three videos on a page cost three images, not
 * three players (§30).
 * -------------------------------------------------------------------------- */

.agency-block .agency-video {
  position: relative;
  display: block;
  overflow: hidden;

  /* Reserves the space before the poster loads, so nothing jumps. */
  aspect-ratio: 16 / 9;

  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.agency-block .agency-video--16-9 { aspect-ratio: 16 / 9; }
.agency-block .agency-video--4-3 { aspect-ratio: 4 / 3; }
.agency-block .agency-video--1-1 { aspect-ratio: 1 / 1; }
.agency-block .agency-video--21-9 { aspect-ratio: 21 / 9; }

/* The whole poster is the button: a 56px play glyph is not a touch target (§10). */
.agency-block .agency-video__facade {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;

  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Inset ring, because an outer ring would be clipped by `overflow: hidden`. */
.agency-block .agency-video__facade:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: calc(var(--focus-width) * -3);
}

/*
 * Holds the poster and the control, and nothing else: motion.js empties this frame
 * when play is pressed, so the caption stays outside it. Absolute positioning makes
 * it exactly the size of whichever aspect-ratio box was chosen, without the frame
 * having to know the ratio.
 */
.agency-block .agency-video__frame {
  position: absolute;
  inset: 0;
}

.agency-block .agency-video__poster {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 0;
}

.agency-block .agency-video__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  inline-size: 4.5rem;
  block-size: 4.5rem;

  border-radius: var(--radius-circle);
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-lg);

  /* Decorative: the button itself carries the accessible name. */
  pointer-events: none;

  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.agency-block .agency-video__facade:hover .agency-video__play {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: var(--shadow-xl);
}

/* The injected player, once motion.js has emptied the frame and filled it in. */
.agency-block .agency-video.is-playing video,
.agency-block .agency-video.is-playing iframe,
.agency-block .agency-video__frame.is-playing video,
.agency-block .agency-video__frame.is-playing iframe {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * agency/video in `banner` mode — a full-bleed, autoplaying background loop.
 *
 * DIFFERENT SHAPE ON PURPOSE. The facade above is an inset 16:9 card inside the
 * page container; a banner is edge-to-edge and as tall as the viewport allows, so
 * the band reads as a section rather than a card (§6, §8).
 *
 * The video and its poster both fill the frame with object-fit: cover, so a 4:3
 * source does not letterbox inside a 21:9 band. The poster is a sibling <img>
 * inside the <video> element, so it disappears the instant the first frame
 * decodes — there is no flash and no second image request.
 * ------------------------------------------------------------------------ */

.agency-block .agency-video--banner {
  /* Full-bleed without 100vw — that unit includes the scrollbar and widens the
   * page (§8). Relative to the block (which is already edge-to-edge), the frame
   * just fills the band. */
  position: relative;
  display: grid;
  align-items: center;
  isolation: isolate;

  /* Fill the visible viewport on every screen size — no white band under banners. */
  /* svh last — avoid 100dvh resize jerk when mobile browser chrome toggles. */
  min-block-size: 100vh;
  min-block-size: 100svh;

  margin-inline: 0;
  inline-size: 100%;
  max-inline-size: none;
  border-radius: 0;
  overflow: hidden;
}

/*
 * Make the video block itself edge-to-edge when it is the first child of a
 * composed page. The section shell already paints full width; this only drops
 * the readable-column padding so the loop reaches the viewport edges.
 */
.agency-block.agency-block--video:has(.agency-video--banner) {
  padding-inline: 0;
}

/*
 * Inner-page video banners tuck under the sticky transparent header the same
 * way as home-banner / inner-hero. A zero margin left a white body strip
 * behind the glass header on About / Services / Book.
 */
.site-main > .agency-block.agency-page-hero:first-child:has(.agency-video--banner) {
  padding-block-start: 0;
}

.site-main > .agency-block.agency-page-hero:first-child:has(.agency-video--banner) .agency-video--banner {
  /* Overlay copy only — video media is pinned top via object-position. */
  padding-block-start: clamp(1.25rem, 2.5vw, 2rem);
  box-sizing: border-box;
}

.site-main > .agency-block.agency-block--video:first-child:has(.agency-video--banner):not(.agency-page-hero):not(.agency-block--home-banner) {
  margin-block-start: 0;
}

.site-main > .agency-block.agency-block--video:first-child:has(.agency-video--banner):not(.agency-page-hero):not(.agency-block--home-banner) .agency-video--banner {
  padding-block-start: clamp(1rem, 2vw, 1.75rem);
  box-sizing: border-box;
}

.agency-block.agency-block--video:has(.agency-video--banner) > .agency-block__inner--full {
  max-width: none;
  padding-inline: 0;
}

.agency-block .agency-video__frame--banner {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
  background-color: var(--color-primary-dark, #123f45);
}

/*
 * Gemini sparkle watermark is baked into many banner clips at bottom-right.
 * Dense emerald corner wash covers it; mosaic feature panels are excluded.
 * Also covers the raised visible corner created by the diagonal stage cut.
 */
.agency-block .agency-video__frame--banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 8.5rem 6.5rem at calc(100% - 0.25rem) calc(100% - 0.25rem),
    color-mix(in srgb, var(--color-primary-dark, #0f2f34) 78%, transparent) 0%,
    color-mix(in srgb, var(--color-primary, #1d6066) 48%, transparent) 38%,
    transparent 70%
  );
}

.agency-block .agency-video__frame--banner .agency-video__media,
.agency-block .agency-video__frame--banner .agency-video__poster {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  /* Pin the top of the artwork — cover was clipping brand/comps under the header. */
  object-position: center top;
  border: 0;
  margin: 0;
}

/* Text + CTAs sit above the loop. Without this the <video> paints over them. */
.agency-block .agency-video--banner .agency-head,
.agency-block .agency-video--banner .agency-video__caption,
.agency-block .agency-video--banner .agency-btns,
.agency-block .agency-video--banner .agency-btn {
  position: relative;
  z-index: 1;
}

.agency-block .agency-video--banner .agency-btns {
  position: relative;
  z-index: 1;
  justify-content: center;
  align-self: end;
  margin-block: auto 0;
  padding-block-end: var(--space-xl);
}

/*
 * A scrim. Without it, white type on a bright frame of the video is unreadable,
 * and that is not something a content editor can be trusted to prevent by
 * choosing the right MP4 (§14: contrast is a system requirement, not an
 * authoring choice). Two layers — a flat wash for text and a stronger bottom
 * gradient — keep the band legible over any footage.
 */
.agency-block .agency-video--banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Thin gold→emerald wash — same family as showcase media tint. */
  background: var(
    --gradient-banner-scrim,
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--color-gold, var(--color-accent)) 28%, transparent) 0%,
      color-mix(in srgb, var(--color-primary-soft, var(--color-primary)) 12%, transparent) 48%,
      color-mix(in srgb, var(--color-gold, var(--color-accent)) 22%, transparent) 100%
    )
  );
  pointer-events: none;
}

/* Copy on the band: slightly stronger bottom fade for white type, still thin. */
.agency-block .agency-video--banner:has(.agency-head)::after {
  background: var(
    --gradient-banner-scrim-copy,
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-gold, var(--color-accent)) 20%, transparent) 0%,
      color-mix(in srgb, var(--color-primary-soft, var(--color-primary)) 14%, transparent) 42%,
      color-mix(in srgb, var(--color-primary-dark, var(--color-primary)) 48%, transparent) 100%
    )
  );
}

/* Type on a banner is always light, whatever the page theme is doing. */
.agency-block .agency-video--banner .agency-head,
.agency-block .agency-video--banner .agency-video__caption {
  color: #fff;
  inline-size: min(100%, 60ch);
  margin-inline: auto;
  text-align: center;
}

/*
 * Title / lead / eyebrow set their own colors on `.agency-block .agency-head__*`
 * (primary navy / muted body). Those rules beat inheritance from `.agency-head`
 * above, so banner copy went dark over bright video frames on About /
 * Services / Book. Pin them white here — same contrast contract as home.
 */
.agency-block .agency-video--banner .agency-eyebrow,
.agency-block .agency-video--banner .agency-head__title,
.agency-block .agency-video--banner .agency-head__lead,
.agency-block .agency-video--banner .agency-head__title em,
.agency-block .agency-video--banner .agency-head__title .agency-head__em {
  color: #fff;
}

.agency-block .agency-video--banner .agency-head__lead {
  color: color-mix(in srgb, #ffffff 88%, transparent);
}

/*
 * Home cinematic hero — LA28-style left stack over the time-lapse loop.
 * Copy scraped from the prior home-page-video on-screen messaging.
 */
.agency-block.agency-block--home-banner .agency-video--banner {
  /* Top-align so short viewports do not center the stack into the header. */
  align-items: start;
  align-content: start;
  justify-items: stretch;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
  /*
   * Match the first-child negative margin (offset * 1.05) then add breathing room
   * so overlay copy clears the sticky header instead of sitting against it.
   */
  padding-block-start: calc(
    var(--site-header-offset, 5.75rem) * 1.05 + clamp(3.75rem, 8vw, 5.5rem)
  );
  padding-block-end: clamp(2.25rem, 5vw, 3.75rem);
}

/* Home — no gold/emerald tint; only a light left scrim so white type stays readable. */
.agency-block.agency-block--home-banner .agency-video--banner::before {
  display: none !important;
}

.agency-block.agency-block--home-banner .agency-video--banner:has(.agency-head)::after {
  background: linear-gradient(
    105deg,
    rgb(7 18 24 / 0.42) 0%,
    rgb(7 18 24 / 0.18) 38%,
    transparent 72%
  );
}

.agency-block.agency-block--home-banner .agency-video--banner .agency-head {
  display: grid;
  gap: 0.65rem;
  justify-items: start;
  align-content: start;
  align-self: start;
  inline-size: min(100%, 38rem);
  max-inline-size: 100%;
  margin: 0;
  margin-inline-end: auto;
  padding: 0;
  text-align: start;
  color: #ffffff;
}

.agency-block.agency-block--home-banner .agency-video--banner .agency-eyebrow {
  position: static;
  inset: auto;
  z-index: auto;
  margin: 0;
  padding: 0 0 0.35rem;
  border-block-end: 1px solid rgb(255 255 255 / 0.55);
  color: #ffffff;
  font-size: clamp(0.68rem, 0.62rem + 0.2vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.92;
  justify-self: start;
}

.agency-block.agency-block--home-banner .agency-video--banner .agency-head__title {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.85rem);
  font-weight: 600;
  line-height: 1.12;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.35);
}

.agency-block.agency-block--home-banner .agency-video--banner .agency-head__title em,
.agency-block.agency-block--home-banner .agency-video--banner .agency-head__title .agency-head__em {
  color: var(--color-gold-light, var(--color-gold, var(--color-accent)));
  font-style: normal;
}

.agency-block.agency-block--home-banner .agency-video--banner .agency-head__lead {
  margin: 0;
  max-inline-size: 36rem;
  color: rgb(255 255 255 / 0.92);
  font-size: clamp(1rem, 0.92rem + 0.45vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
  text-wrap: pretty;
}

.agency-block.agency-block--home-banner .agency-video--banner .agency-btns {
  justify-content: flex-start;
  justify-self: start;
  align-self: start;
  margin: 0.85rem 0 0;
  padding: 0;
}

/*
 * Banner CTAs — Acceleration Gold primary with white label (the blueprint's
 * primary CTA), and a white hairline outline for the secondary, so both read
 * against the dark video scrim.
 */
.agency-block.agency-block--home-banner .agency-video--banner .agency-btn--primary {
  min-height: 2.85rem;
  padding: 0.7rem 1.45rem;
  border: 0;
  border-radius: 0.15rem;
  background: var(--color-accent, #deac2b);
  background-image: none;
  color: #ffffff;
  font-weight: var(--weight-cta, 600);
  text-shadow: 0 1px 1px rgb(11 26 51 / 0.28);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.22);
}

.agency-block.agency-block--home-banner .agency-video--banner .agency-btn--primary:hover,
.agency-block.agency-block--home-banner .agency-video--banner .agency-btn--primary:focus-visible {
  background: var(--color-gold-dark, #b98c17);
  background-image: none;
  color: #ffffff;
}

/* Dark mode lifts the gold a half step; keep the brand #deac2b so white still reads. */
[data-theme="dark"] .agency-block.agency-block--home-banner .agency-video--banner .agency-btn--primary {
  background: #deac2b;
  color: #ffffff;
}

.agency-block .agency-video--banner .agency-btn--outline {
  border-color: rgb(255 255 255 / 0.75);
  color: #ffffff;
  background: transparent;
}

.agency-block .agency-video--banner .agency-btn--outline:hover,
.agency-block .agency-video--banner .agency-btn--outline:focus-visible {
  border-color: #ffffff;
  background: rgb(255 255 255 / 0.12);
  color: #ffffff;
}

@media (max-width: 47.99em) {
  .agency-block.agency-block--home-banner .agency-video--banner {
    align-items: start;
    align-content: start;
    padding-inline: var(--space-md);
    padding-block-start: calc(
      var(--site-header-offset, 5.75rem) * 1.05 + clamp(4rem, 9vw, 5rem)
    );
    padding-block-end: clamp(1.5rem, 5vw, 2.25rem);
  }

  .agency-block.agency-block--home-banner .agency-video--banner .agency-eyebrow {
    font-size: 0.65rem;
  }

  .agency-block.agency-block--home-banner .agency-video--banner .agency-head {
    inline-size: min(100%, 34ch);
  }

  .agency-block.agency-block--home-banner .agency-video--banner .agency-head__title {
    font-size: clamp(1.45rem, 1.15rem + 2.8vw, 2rem);
  }

  .agency-block.agency-block--home-banner .agency-video--banner .agency-head__lead {
    font-size: 0.95rem;
  }
}

/* The opt-in play control. `hidden` in markup, revealed only for visitors who
 * have asked for reduced motion (see below), so it is never a redundant control
 * on a page where the loop is already playing. */
.agency-block .agency-video__playToggle {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--space-md, 1rem);
  inset-inline-end: var(--space-md, 1rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius-circle);
  background-color: rgb(11 18 32 / 0.55);
  color: #fff;
  cursor: pointer;
}

.agency-block .agency-video__playToggle[hidden] {
  display: none;
}

/*
 * Reduced motion (§13).
 *
 * The autoplaying loop is suppressed and the poster — which is already in the
 * markup — becomes the finished banner. The control becomes visible so the
 * visitor can start the video themselves rather than motion being forced on them
 * or the video being unavailable outright.
 */
@media (prefers-reduced-motion: reduce) {
  .agency-block .agency-video__frame--banner .agency-video__media {
    display: none;
  }

  .agency-block .agency-video__frame--banner .agency-video__playToggle[hidden] {
    display: inline-flex;
  }
}

/*
 * Mobile banners: a tall cover band crops landscape footage on the left/right.
 * Prefer a wider aspect (shorter height) so object-fit:cover keeps more of the
 * frame, with copy padded inside the safe area.
 */
@media (max-width: 47.99em) {
  /*
   * All page banners — full-viewport cover like the homepage hero.
   * No letterbox strips; media fills the first screen under the sticky header.
   */
  .agency-block .agency-video--banner,
  .agency-block--video:has(.agency-video--banner .agency-head) .agency-video--banner,
  .agency-block.agency-page-hero:has(.agency-video--banner) .agency-video--banner,
  .agency-block.agency-page-hero--about:has(.agency-video--banner) .agency-video--banner,
  .agency-block.agency-page-hero--jobs:has(.agency-video--banner) .agency-video--banner,
  .agency-block.agency-block--home-banner .agency-video--banner,
  .agency-block.agency-page-hero--home .agency-video--banner {
    box-sizing: border-box;
    /* svh only — dvh + live --site-header-offset caused mobile scroll jump. */
    min-block-size: 100svh;
    height: 100svh;
    aspect-ratio: auto;
    max-block-size: none;
    padding-inline: var(--space-sm);
    padding-block: clamp(1.25rem, 5vw, 2rem);
  }

  .site-main > .agency-block.agency-block--home-banner:first-child,
  .site-main > .agency-block.agency-page-hero:first-child:has(.agency-video--banner),
  .agency-block.agency-block--home-banner:has(.agency-video--banner),
  .agency-block.agency-page-hero:has(.agency-video--banner),
  .agency-block.agency-block--inner-hero {
    box-sizing: border-box;
    min-block-size: 100svh;
  }

  .agency-block .agency-video__frame--banner .agency-video__media,
  .agency-block .agency-video__frame--banner .agency-video__poster,
  .agency-block .agency-video__frame--banner video,
  .agency-block .agency-video__frame--banner img,
  .agency-block.agency-block--inner-hero .agency-inner-hero__stage-media,
  .agency-block.agency-block--inner-hero .agency-inner-hero__feature-media {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
  }

  .agency-block .agency-video__frame--banner {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .agency-block.agency-block--home-banner .agency-video--banner,
  .agency-block.agency-page-hero--home .agency-video--banner {
    align-items: start;
    align-content: start;
    padding-block-start: calc(
      var(--site-header-offset, 4.25rem) * 1.05 + clamp(3.5rem, 8vw, 5rem)
    );
    padding-block-end: clamp(1.5rem, 5vw, 2.25rem);
    padding-inline: var(--space-md);
  }

  .site-main > .agency-block.agency-page-hero:first-child:has(.agency-video--banner) .agency-video--banner,
  .site-main > .agency-block.agency-block--video:first-child:has(.agency-video--banner):not(.agency-page-hero):not(.agency-block--home-banner) .agency-video--banner {
    padding-block-start: clamp(1.25rem, 5vw, 2rem);
  }

  .agency-block .agency-video--banner .agency-head,
  .agency-block .agency-video--banner .agency-video__caption {
    inline-size: min(100%, 36ch);
    padding-inline: 0.25rem;
  }

  .agency-block .agency-video--banner .agency-btns {
    padding-block-end: var(--space-md);
  }

  /* Poster-only banners still fill the viewport band. */
  .agency-block.agency-page-hero .agency-video--banner:not(:has(video)) {
    aspect-ratio: auto;
  }

  /*
   * Mobile cut/curve — match single-job banner (2rem diagonal).
   * Laptop/desktop keep their own clip rules (min-width 768).
   * Home cinematic banner stays unclipped (see home-banner rules).
   */
  .agency-block.agency-page-hero:has(.agency-video--banner):not(.agency-page-hero--home):not(.agency-block--home-banner) {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), 0 100%);
    margin-block-end: -1.5rem;
    filter: none;
  }

  .agency-block.agency-page-hero:has(.agency-video--banner)::after,
  .agency-block.agency-block--inner-hero::after {
    display: none;
  }

  .agency-block.agency-page-hero:has(.agency-video--banner):not(.agency-page-hero--home):not(.agency-block--home-banner) + .agency-block,
  .agency-block.agency-page-hero:has(.agency-video--banner):not(.agency-page-hero--home):not(.agency-block--home-banner) + .kanbann-hash-anchor + .agency-block {
    padding-block-start: calc(var(--section-y, 4rem) + 2rem);
  }
}

.agency-block .agency-video__caption {
  margin: var(--space-2xs) 0 0;
  font-size: var(--step--1);
  color: var(--color-muted);
}

@media (prefers-reduced-motion: reduce) {
  .agency-block .agency-video__play,
  .agency-block .agency-video__facade:hover .agency-video__play {
    transition: none;
    transform: translate(-50%, -50%);
  }
}


/* -----------------------------------------------------------------------------
 * 17. CONTACT — agency/contact
 *
 * Details beside the enquiry form on a desktop, stacked on a phone with the
 * details FIRST: the email address is what most visitors actually came for (§5).
 * -------------------------------------------------------------------------- */

.agency-block .agency-contact {
  display: grid;
  gap: var(--space-lg);
  min-width: 0;
}

@media (min-width: 64em) {
  .agency-block .agency-contact {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
    gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    align-items: start;
  }

  /*
   * Book-a-consultation variant: no contact details, form on the left,
   * client testimonials column on the right. Form stays wider than
   * the aside so the fields never cramp.
   */
  .agency-block .agency-contact--with-aside {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

.agency-block .agency-contact__aside {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
  padding: clamp(1rem, 0.85rem + 0.6vw, 1.35rem);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  align-self: stretch;
}

.agency-block .agency-contact__aside-heading {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-cta, 0.08em);
  color: var(--color-navy, #003366);
  text-align: center;
}

/*
 * In the compact aside the testimonial stage is already space-constrained;
 * shrink the collage so one card at a time reads instead of two.
 */
.agency-block .agency-contact__aside .agency-testimonial-stage {
  --agency-testimonial-stage-step: 1;
  padding: 0;
}

.agency-block .agency-contact__aside .agency-testimonial-pair {
  grid-template-columns: minmax(0, 1fr);
}

.agency-block .agency-contact__aside .agency-card--quote {
  min-height: 10rem;
}

.agency-block .agency-contact__details {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  min-width: 0;
}

.agency-block .agency-contact__office {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: clamp(1rem, 0.85rem + 0.8vw, 1.35rem);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: start;
}

.agency-block .agency-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  color: var(--color-accent);
  flex-shrink: 0;
  line-height: 0;
}

.agency-block .agency-contact__icon .kanbann-icon,
.agency-block .agency-contact__icon svg {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
}

.agency-block .agency-contact__office-body {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.agency-block .agency-contact__office-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-primary);
}

.agency-block .agency-contact__row {
  margin: 0;
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
  text-align: start;
}

.agency-block .agency-contact__row strong {
  display: block;
  margin-block-end: 0.15rem;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.agency-block .agency-contact__row--icon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 1rem;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.agency-block .agency-contact__row--contact-link {
  align-items: center;
}

.agency-block .agency-contact__icon-link {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 999px;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-primary);
  text-decoration: none;
  line-height: 0;
}

.agency-block .agency-contact__icon-link:hover,
.agency-block .agency-contact__icon-link:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
  opacity: 1;
  outline: none;
}

.agency-block .agency-contact__icon-link .agency-contact__icon {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.agency-block .agency-contact__icon-link .kanbann-icon,
.agency-block .agency-contact__icon-link .agency-contact__icon .kanbann-icon {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  line-height: 0;
}

.agency-block .agency-contact__icon-link svg,
.agency-block .agency-contact__icon-link .kanbann-icon svg {
  display: block;
  width: 1.15rem !important;
  height: 1.15rem !important;
  margin: 0 auto;
}

.agency-block .agency-contact__row-body {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.agency-block .agency-contact__row a {
  /* Steel navy link with a gold underline — brand gold alone is 2:1 on cloud. */
  color: var(--color-steel, var(--color-primary));
  text-decoration: none;
  overflow-wrap: anywhere;
  border-block-end: 1px solid color-mix(in srgb, var(--color-gold, var(--color-accent)) 70%, transparent);
}

.agency-block .agency-contact__row a:hover,
.agency-block .agency-contact__row a:focus-visible {
  text-decoration: none;
  opacity: 0.9;
}

.agency-block .agency-contact__address {
  margin: 0;
  color: var(--color-text);
  line-height: 1.5;
}

.agency-block .agency-contact__map {
  font-weight: 600;
  text-decoration: none;
}

.agency-block .agency-contact__map:hover,
.agency-block .agency-contact__map:focus-visible {
  text-decoration: underline;
}

.agency-block .agency-contact__form {
  display: grid;
  gap: var(--space-md);
  min-width: 0;

  padding: clamp(1.15rem, 0.9rem + 1.2vw, 1.75rem);
  background-color: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.agency-block .agency-form--enquiry {
  gap: var(--space-sm);
}

.agency-block .agency-form__row {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}

@media (min-width: 640px) {
  .agency-block .agency-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.agency-block .agency-form__field--full {
  grid-column: 1 / -1;
}

.agency-block .agency-form__disclaimer {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 0 0.25rem;
}

.agency-block .agency-form__consent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--step--1);
  line-height: 1.4;
  cursor: pointer;
}

.agency-block .agency-form__consent input {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--color-accent);
}

.agency-block .agency-form__consent > span {
  flex: 1 1 auto;
  min-width: 0;
}

.agency-block .agency-form__consent--dialog {
  align-items: center;
}

.agency-block .agency-form__disclaimer-open {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-gold-ink, var(--color-gold-dark, var(--color-accent)));
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.agency-block .agency-form__disclaimer-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  max-width: min(34rem, calc(100vw - 2rem));
  max-height: min(90vh, 40rem);
  width: calc(100% - 2rem);
  height: fit-content;
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

.agency-block .agency-form__disclaimer-dialog::backdrop {
  background: rgb(11 18 32 / 0.55);
}

.agency-block .agency-form__disclaimer-panel {
  display: grid;
  gap: 1rem;
  padding: clamp(1.15rem, 1rem + 1vw, 1.75rem);
}

.agency-block .agency-form__disclaimer-panel h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--leading-snug);
}

.agency-block .agency-form__disclaimer-body {
  display: grid;
  gap: 0.85rem;
  max-height: min(50vh, 22rem);
  overflow: auto;
  font-size: var(--step--1);
  line-height: 1.55;
}

.agency-block .agency-form__disclaimer-body p {
  margin: 0;
}

.agency-block .agency-form__disclaimer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
}

.agency-block .agency-form__actions {
  margin: 0.35rem 0 0;
}

.agency-block .agency-contact__note,
.agency-block .agency-contact__small {
  margin: 0;
  font-size: var(--step--2);
  color: var(--color-muted);
}

/* -----------------------------------------------------------------------------
 * 18. FORM CONTROLS AND FIELDS — agency/form
 *
 * Same values as the theme's `.form-field` so a block form and a theme form are
 * identical, and 16px+ type so iOS Safari does not zoom the viewport on focus.
 * -------------------------------------------------------------------------- */

.agency-block .agency-form {
  /* Theme `.agency-form` owns pill labels + control geometry. */
  gap: var(--space-md);
  min-width: 0;
}

.agency-block .agency-jobs__filter-label,
.agency-block .agency-jobs__filter > span {
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.2;
}

/* A native checkbox, tinted, at a size a thumb can hit (§10). */
.agency-block input[type="checkbox"],
.agency-block input[type="radio"] {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: none;
  accent-color: var(--color-accent);
}

/*
 * Honeypot: a field a human never sees and never fills. Positioned off-screen
 * rather than `display: none`, because a bot reading the DOM will still find it
 * while `display: none` fields are skipped by some spam scripts.
 */
.agency-block .agency-form__hp {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  margin: 0;
}


/* -----------------------------------------------------------------------------
 * 19. ACCORDION / FAQ — agency/accordion
 *
 * Native <details>/<summary>: the open/closed state, the keyboard behaviour and
 * the screen-reader announcement are all the browser's job (§40). No JavaScript
 * is involved, so a script failure cannot hide an answer.
 * -------------------------------------------------------------------------- */

.agency-block .agency-accordion {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
}

.agency-block .agency-accordion__item {
  background-color: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  /* Keeps the summary's hover tint inside the rounded corner. */
  overflow: hidden;
}

.agency-block .agency-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);

  /* 44px minimum, so the row is comfortable to tap (§10). */
  min-block-size: 44px;
  padding: var(--space-sm) var(--space-md);

  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: var(--leading-snug);
  cursor: pointer;

  /* Replace the default triangle with our own marker. */
  list-style: none;
}

.agency-block .agency-accordion__summary::-webkit-details-marker {
  display: none;
}

/*
 * The open/closed state is shown by a glyph AND by the panel being visible, so
 * it is never communicated by colour alone (§14).
 */
.agency-block .agency-accordion__summary::after {
  content: "+";
  flex: none;
  font-size: var(--step-1);
  line-height: var(--leading-none);
  color: var(--color-accent);
}

.agency-block .agency-accordion__item[open] > .agency-accordion__summary::after {
  content: "\2212";
}

.agency-block .agency-accordion__summary:hover {
  background-color: var(--color-surface);
}

.agency-block .agency-accordion__summary:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: calc(var(--focus-width) * -1);
}

.agency-block .agency-accordion__panel {
  padding: 0 var(--space-md) var(--space-md);
  font-size: var(--step--1);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.agency-block .agency-accordion__panel > *:first-child {
  margin-block-start: 0;
}

.agency-block .agency-accordion__panel > *:last-child {
  margin-block-end: 0;
}


/* -----------------------------------------------------------------------------
 * 20. TABS — agency/tabs
 *
 * ARIA tabs: the renderer emits `role="tablist"`, `role="tab"` with
 * `aria-selected`, and `role="tabpanel"` with `hidden`. The styles below only
 * have to make the selected state legible, never to invent it.
 * -------------------------------------------------------------------------- */

.agency-block .agency-tabs {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.agency-block .agency-tabs__list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);

  margin: 0;
  padding: 0 0 var(--space-2xs);

  background-color: transparent;
  border: 0;
  border-block-end: var(--border-width) solid var(--color-border);
  border-radius: 0;
}

/* Travelling underline indicator (corporate Aquent / KF). */
.agency-tabs.is-enhanced .agency-tabs__list::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  block-size: 3px;
  inline-size: var(--agency-tab-indicator-w, 0);
  transform: translateX(var(--agency-tab-indicator-x, 0));
  background: var(--color-gold, var(--color-accent));
  border-radius: var(--radius-pill);
  box-shadow: none;
  pointer-events: none;
  transition:
    transform var(--dur-normal) var(--ease-out),
    inline-size var(--dur-normal) var(--ease-out);
  z-index: 0;
}

.agency-tabs.is-enhanced .agency-tabs__tab {
  z-index: 1;
  background: transparent;
  border-radius: 0;
}

.agency-tabs.is-enhanced .agency-tabs__tab[aria-selected="true"] {
  color: var(--color-primary);
  background-color: transparent;
  box-shadow: none;
}

.agency-block .agency-tabs__panel {
  min-width: 0;
  font-size: var(--step-0);
  line-height: var(--leading-relaxed);

  /*
   * Centre the content column inside every classic tab panel. The tab
   * chrome (list + buttons) is unchanged — only the title / body / rich
   * copy below sits in a centred, measure-wide column. The client asked
   * for centred content without the collab-tabs restyle.
   */
  text-align: center;

  animation: agency-tab-in var(--dur-normal) var(--ease-out);
}

.agency-block .agency-tabs__panel .agency-tabs__title {
  margin-inline: auto;
}

.agency-block .agency-tabs__panel .agency-tabs__body {
  margin: 0 auto;
  max-width: 42rem;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
  line-height: 1.65;
  color: var(--color-text);
}

.agency-block .agency-tabs__panel .agency-tabs__rich {
  margin-inline: auto;
  max-width: 42rem;
}

/*
 * Lists inside tab panels: keep bullets left-aligned to their markers
 * even though the surrounding column is centred — the client flagged
 * centred bullet text as unreadable.
 */
.agency-block .agency-tabs__panel ul,
.agency-block .agency-tabs__panel ol {
  margin-inline: auto;
  max-width: 36rem;
  text-align: start;
}

.agency-block .agency-tabs__list {
  justify-content: center;
}

.agency-block .agency-tabs__panel--from-right {
  animation: agency-tab-from-right var(--dur-normal) var(--ease-out);
}

.agency-block .agency-tabs__panel--from-left {
  animation: agency-tab-from-left var(--dur-normal) var(--ease-out);
}

/* Without JS enhancement, stack every panel so nothing is forever-hidden. */
.agency-tabs:not(.is-enhanced) .agency-tabs__panel + .agency-tabs__panel {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-lg);
  border-block-start: var(--border-width) solid var(--color-border);
}

.agency-tabs.is-enhanced .agency-tabs__panel[hidden] {
  display: none;
}

.agency-block .agency-tabs__tab {
  /* 44px minimum target; the tab is a real button, so it is keyboard operable. */
  position: relative;
  min-block-size: 44px;
  padding: var(--space-xs) var(--space-md);

  background: none;
  border: 0;
  border-radius: var(--radius-pill);

  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;

  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.agency-block .agency-tabs__tab:hover {
  color: var(--color-primary-dark, var(--color-primary));
  background-color: var(--color-surface-raised);
}

/*
 * Selected state without JS: colour AND a filled pill AND a heavier weight.
 * Three signals, so the state survives a colour-blind viewer (§14).
 * With JS, the travelling indicator carries the fill instead.
 */
.agency-block .agency-tabs:not(.is-enhanced) .agency-tabs__tab[aria-selected="true"] {
  color: var(--color-accent-contrast);
  background-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.agency-block .agency-tabs.is-enhanced .agency-tabs__tab[aria-selected="true"] {
  color: var(--color-primary);
  /*
   * Light gold wash on the active tab button.
   *
   * The sliding `::after` underline on the list only shows if JS has
   * measured the active tab; a visitor on a cold/slow render saw the
   * active state as "slightly bolder navy text" with no visible
   * indicator (brief: "show some kind of active selection âÀæ just light not
   * too bulky"). An 8âÀÓ10% gold tint reads immediately against
   * the raised surface the tab strip sits on, without approaching the
   * bulky no-JS fill above. On dark mode the wash sits on navy so the
   * same colour-mix keeps enough contrast.
   */
  background-color: color-mix(
    in srgb,
    var(--color-gold, var(--color-accent, #deac2b)) 10%,
    transparent
  );
  box-shadow: inset 0 -2px 0 0 color-mix(
    in srgb,
    var(--color-gold, var(--color-accent, #deac2b)) 55%,
    transparent
  );
  font-weight: 600;
}

.agency-block .agency-tabs.is-enhanced .agency-tabs__tab:hover {
  background-color: color-mix(
    in srgb,
    var(--color-gold, var(--color-accent, #deac2b)) 6%,
    transparent
  );
}

.agency-block .agency-tabs.is-enhanced .agency-tabs__tab[aria-selected="true"]:hover {
  background-color: color-mix(
    in srgb,
    var(--color-gold, var(--color-accent, #deac2b)) 14%,
    transparent
  );
}

.agency-block .agency-tabs__tab:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: 2px;
}

/*
 * Collaboration process (contact) — pill tabs + card panel.
 * Must follow the enhanced-tab rules above; those use higher specificity and
 * would otherwise flatten pills back to the underline-tab look.
 */
.agency-block.agency-block--collab-tabs .agency-tabs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  gap: 0.65rem;
  padding: 0;
  border: 0;
  margin-block-end: var(--space-lg);
}

@media (min-width: 768px) {
  .agency-block.agency-block--collab-tabs .agency-tabs__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

.agency-block.agency-block--collab-tabs .agency-tabs.is-enhanced .agency-tabs__list::after {
  display: none;
}

.agency-block.agency-block--collab-tabs .agency-tabs__tab,
.agency-block.agency-block--collab-tabs .agency-tabs.is-enhanced .agency-tabs__tab {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.15rem;
  min-block-size: 3.25rem;
  width: 100%;
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  background-image: none;
  border: var(--border-width) solid var(--color-border);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  text-align: center;
  box-shadow: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.agency-block.agency-block--collab-tabs .agency-tabs__tab:hover,
.agency-block.agency-block--collab-tabs .agency-tabs.is-enhanced .agency-tabs__tab:hover {
  color: var(--color-primary);
  background: var(--color-surface);
  border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
}

.agency-block.agency-block--collab-tabs .agency-tabs.is-enhanced .agency-tabs__tab[aria-selected="true"],
.agency-block.agency-block--collab-tabs .agency-tabs:not(.is-enhanced) .agency-tabs__tab[aria-selected="true"] {
  color: #ffffff;
  /* --color-navy, not --color-primary: primary is white in dark mode. */
  background-color: var(--color-navy, var(--color-primary));
  background-image: linear-gradient(
    135deg,
    var(--color-navy, var(--color-primary)) 0%,
    color-mix(in srgb, var(--color-accent) 55%, var(--color-navy, var(--color-primary))) 100%
  );
  border-color: transparent;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.agency-block.agency-block--collab-tabs .agency-tabs__panel {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  padding: clamp(1.5rem, 1.2rem + 2vw, 2.4rem);
  background: var(--color-surface);
  border: var(--border-width) solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md, var(--shadow-sm));
  overflow: hidden;
}

.agency-block.agency-block--collab-tabs .agency-tabs__panel::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background-image: var(--gradient-accent);
}

.agency-block.agency-block--collab-tabs .agency-tabs__copy {
  display: grid;
  justify-items: center;
  text-align: center;
  width: 100%;
}

.agency-block.agency-block--collab-tabs .agency-tabs__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-primary);
  text-align: center;
}

.agency-block.agency-block--collab-tabs .agency-tabs__panel .agency-tabs__body {
  max-width: 42rem;
  margin: 0 auto;
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--color-muted);
  text-align: center;
}
.agency-block .agency-tabs__panel--split {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 48em) {
  .agency-block .agency-tabs__panel--split {
    grid-template-columns: 1fr 1fr;
  }
}

.agency-block .agency-tabs__body {
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
  font-size: var(--step-1);
  line-height: var(--leading-relaxed);
}

.agency-block .agency-tabs__media {
  min-width: 0;
}

.agency-block .agency-tabs__image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.agency-block .agency-tabs__video {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* Match showcase: ~25% shorter media for short copy panels. */
  aspect-ratio: 16 / 7.5;
  background-color: var(--color-surface);
}

.agency-block .agency-tabs__video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-gold, var(--color-accent)) 28%, transparent) 0%,
    color-mix(in srgb, var(--color-primary-soft, var(--color-primary)) 12%, transparent) 48%,
    color-mix(in srgb, var(--color-gold, var(--color-accent)) 22%, transparent) 100%
  );
}

.agency-block .agency-tabs__video-el {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

@keyframes agency-tab-in {
  from {
    opacity: 0;
    transform: translate3d(-1rem, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes agency-tab-from-right {
  from {
    opacity: 0;
    transform: translate3d(1.25rem, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes agency-tab-from-left {
  from {
    opacity: 0;
    transform: translate3d(-1.25rem, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agency-block .agency-tabs__panel,
  .agency-block .agency-tabs__panel--from-left,
  .agency-block .agency-tabs__panel--from-right {
    animation: none;
  }

  .agency-tabs.is-enhanced .agency-tabs__list::after {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
 * 20b. SHOWCASE — card slideshow (agency/tabs variant=showcase)
 *
 * Text + media card. JS advances after video `ended`, GIF dwell, or image dwell.
 * Without JS every slide stacks as readable cards (§40).
 * -------------------------------------------------------------------------- */

.agency-showcase {
  display: grid;
  grid-template-areas: "viewport";
  gap: var(--space-sm);
  min-width: 0;
  position: relative;
}

.agency-showcase__viewport {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
  grid-area: viewport;
  position: relative;
}

.agency-showcase.is-enhanced .agency-showcase__viewport {
  display: grid;
  grid-template-areas: "slide";
}

.agency-showcase.is-enhanced .agency-showcase__slide {
  grid-area: slide;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
  /* Instant swap — motion lives on copy/media so the card/video do not fade-jerk. */
}

.agency-showcase.is-enhanced .agency-showcase__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.agency-showcase.is-enhanced .agency-showcase__copy,
.agency-showcase.is-enhanced .agency-showcase__media {
  overflow: hidden;
}

.agency-showcase.is-enhanced .agency-showcase__slide.is-active .agency-showcase__copy {
  animation: agency-showcase-copy-in 1.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.agency-showcase.is-enhanced .agency-showcase__slide.is-active .agency-showcase__media {
  animation: agency-showcase-media-in 1.85s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

/* Forward (next): text slide-reveals left; video slide-reveals right. */
.agency-showcase.is-enhanced[data-agency-showcase-dir="forward"] .agency-showcase__slide.is-active .agency-showcase__copy {
  animation-name: agency-showcase-copy-in;
}

.agency-showcase.is-enhanced[data-agency-showcase-dir="forward"] .agency-showcase__slide.is-active .agency-showcase__media {
  animation-name: agency-showcase-media-in;
}

/* Back (prev): reverse directions. */
.agency-showcase.is-enhanced[data-agency-showcase-dir="back"] .agency-showcase__slide.is-active .agency-showcase__copy {
  animation-name: agency-showcase-copy-in-rev;
}

.agency-showcase.is-enhanced[data-agency-showcase-dir="back"] .agency-showcase__slide.is-active .agency-showcase__media {
  animation-name: agency-showcase-media-in-rev;
}

@keyframes agency-showcase-copy-in {
  from {
    clip-path: inset(0 0 0 100%);
    transform: translate3d(0.7rem, 0, 0);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes agency-showcase-media-in {
  from {
    clip-path: inset(0 100% 0 0);
    transform: translate3d(-0.7rem, 0, 0);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes agency-showcase-copy-in-rev {
  from {
    clip-path: inset(0 100% 0 0);
    transform: translate3d(-0.7rem, 0, 0);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes agency-showcase-media-in-rev {
  from {
    clip-path: inset(0 0 0 100%);
    transform: translate3d(0.7rem, 0, 0);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agency-showcase.is-enhanced .agency-showcase__slide.is-active .agency-showcase__copy,
  .agency-showcase.is-enhanced .agency-showcase__slide.is-active .agency-showcase__media {
    animation: none;
    clip-path: none;
    transform: none;
  }
}

.agency-showcase__card {
  display: grid;
  gap: 0;
  padding: 0;
  background: #ffffff;
  border: 0;
  border-radius: 0;
  box-shadow: var(--shadow-lg, 0 18px 40px rgb(0 0 0 / 0.22));
  min-width: 0;
  overflow: hidden;
}

.agency-showcase__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 100%;
  /* ~25% tighter — short service blurbs should not stretch the band. */
  padding: clamp(1.1rem, 0.95rem + 1.8vw, 2.05rem);
  background: #ffffff;
  color: var(--color-text);
  text-align: center;
  /* Seam track — gold progress fills along the copy/media join. */
  border-block-end: 3px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Golden progress on the border joining text card and video. */
.agency-showcase__copy::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -3px;
  z-index: 2;
  block-size: 3px;
  inline-size: 0;
  background: var(--color-gold, var(--color-accent));
  pointer-events: none;
}

/*
 * Bullet lists inside the showcase card sit left-aligned to their markers.
 *
 * `.agency-showcase__copy` is a centred flex column
 * (`align-items: center; text-align: center`) so the title and body
 * copy sit on the vertical centre line of the card. A plain `<ul>`
 * dropped by `Page_Builder::bullet_list()` therefore inherits
 * `text-align: center`, which centres the LI text relative to the
 * list marker and makes the dots look like they are floating next to
 * the sentences instead of running down a column.
 *
 * Scope: only lists inside `.agency-showcase__copy` — the surrounding
 * `.agency-showcase__title` and `.agency-showcase__body` stay centred
 * because that is the brand's slide layout.
 */
.agency-showcase__copy :is(ul, ol) {
  align-self: center;
  margin: 0;
  padding-inline-start: 1.2rem;
  max-inline-size: 42ch;
  text-align: start;
  list-style-position: outside;
}

.agency-showcase__copy :is(ul, ol) li {
  text-align: start;
}

.agency-showcase.is-enhanced .agency-showcase__slide.is-active .agency-showcase__copy::after {
  animation: agency-showcase-progress 9.5s linear forwards;
}

.agency-block--bg-inverse .agency-showcase__title,
.agency-block--bg-gradient .agency-showcase__title,
.agency-block--bg-surface .agency-showcase__title {
  color: var(--color-primary);
}

.agency-block--bg-inverse .agency-showcase__body,
.agency-block--bg-gradient .agency-showcase__body,
.agency-block--bg-surface .agency-showcase__body {
  color: var(--color-muted);
}

@media (min-width: 768px) {
  .agency-showcase__card {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .agency-showcase__copy {
    border-block-end: 0;
    border-inline-end: 3px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  }

  .agency-showcase__copy::after {
    inset-inline-start: auto;
    inset-inline-end: -3px;
    inset-block-start: 0;
    inset-block-end: auto;
    inline-size: 3px;
    block-size: 0;
  }

  .agency-showcase.is-enhanced .agency-showcase__slide.is-active .agency-showcase__copy::after {
    animation-name: agency-showcase-progress-vertical;
  }
}

@keyframes agency-showcase-progress-vertical {
  from { block-size: 0; }
  to { block-size: 100%; }
}

.agency-showcase__title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.95vw, 1.7rem);
  line-height: var(--leading-snug);
  color: var(--color-primary);
}

.agency-showcase__body {
  margin: 0;
  max-width: 36ch;
  font-size: var(--step--1);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
}

.agency-showcase__media {
  position: relative;
  min-width: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--color-primary-dark, #123f45);
}

/*
 * Thin gold→emerald wash over animated service clips (cool/blue footage).
 * Logos and people photos are out of scope — they never use this media shell.
 */
.agency-showcase__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-gold, var(--color-accent)) 28%, transparent) 0%,
    color-mix(in srgb, var(--color-primary-soft, var(--color-primary)) 12%, transparent) 48%,
    color-mix(in srgb, var(--color-gold, var(--color-accent)) 22%, transparent) 100%
  );
}

.agency-showcase__image,
.agency-showcase__video-el {
  display: block;
  width: 100%;
  height: auto;
  /* ~25% shorter media plane than the prior 28rem / 70vh cap. */
  max-height: min(21rem, 52.5vh);
  object-fit: cover;
  object-position: center;
  transition: transform 1600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.agency-showcase__slide.is-active .agency-showcase__image,
.agency-showcase__card:hover .agency-showcase__image {
  transform: scale(1.03);
}

.agency-showcase__video {
  /* 16/10 height cut ~25% → 16/7.5 */
  aspect-ratio: 16 / 7.5;
  block-size: 100%;
  background: var(--color-primary-dark, #123f45);
}

.agency-showcase__video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Controls: KF arrow pair sits on the media corner; tabs sit below. */
.agency-showcase__controls {
  display: contents;
}

.agency-showcase__nav-pair {
  grid-area: viewport;
  position: relative;
  z-index: 4;
  justify-self: end;
  align-self: end;
  margin: 0 clamp(0.75rem, 2vw, 1.5rem) clamp(0.75rem, 2vw, 1.5rem);
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  isolation: isolate;
  box-shadow: var(--shadow-md, 0 8px 24px rgb(0 0 0 / 0.28));
}

/*
 * Tab labels removed — progress lives on the card/media seam.
 * Keep markup for JS goto targets; hide from layout and pointer UI.
 */
.agency-showcase__tabs {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.agency-showcase__tab {
  display: grid;
  gap: var(--space-xs);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  text-align: center;
  justify-items: center;
  cursor: pointer;
}

.agency-showcase__tab-rail {
  display: block;
  width: 100%;
  height: 3px;
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  overflow: hidden;
}

.agency-showcase__tab-progress {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-primary-mid, var(--color-primary));
}

.agency-showcase__tab.is-active .agency-showcase__tab-progress {
  background: var(--color-gold, var(--color-accent));
  animation: agency-showcase-progress 9.5s linear forwards;
}

.agency-showcase__tab-label {
  color: var(--color-primary);
  font-size: var(--step--1);
  font-weight: 550;
  line-height: var(--leading-snug);
  opacity: 0.78;
  text-align: center;
}

.agency-showcase__tab.is-active .agency-showcase__tab-label {
  opacity: 1;
  font-weight: 600;
  color: var(--color-primary-dark, var(--color-primary));
}

.agency-block--bg-inverse .agency-showcase__tab,
.agency-block--bg-gradient .agency-showcase__tab {
  color: #ffffff;
}

.agency-block--bg-inverse .agency-showcase__tab-label,
.agency-block--bg-gradient .agency-showcase__tab-label {
  color: #ffffff;
}

.agency-block--bg-inverse .agency-showcase__tab-rail,
.agency-block--bg-gradient .agency-showcase__tab-rail {
  background: color-mix(in srgb, #ffffff 28%, transparent);
}

.agency-block--bg-inverse .agency-showcase__tab-progress,
.agency-block--bg-gradient .agency-showcase__tab-progress {
  background: var(--color-gold-light, var(--color-gold, var(--color-accent)));
}

@keyframes agency-showcase-progress {
  from { width: 0; }
  to { width: 100%; }
}

.agency-showcase__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--color-primary-dark, #123f45) 72%, transparent);
  color: #ffffff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.agency-showcase__nav-pair .agency-showcase__nav--prev {
  border-inline-end: 1px solid rgb(255 255 255 / 0.18);
}

.agency-showcase__nav:hover,
.agency-showcase__nav:focus-visible {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.agency-showcase__nav-progress {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: block;
  height: 3px;
  background: color-mix(in srgb, #000 45%, transparent);
  pointer-events: none;
}

.agency-showcase__nav-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transition: width var(--dur-normal) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .agency-showcase.is-enhanced .agency-showcase__slide {
    transition: none;
    transform: none;
  }

  .agency-showcase__tab.is-active .agency-showcase__tab-progress {
    animation: none;
    width: 100%;
  }

  .agency-showcase.is-enhanced .agency-showcase__slide.is-active .agency-showcase__copy::after {
    animation: none;
    inline-size: 100%;
    block-size: 100%;
  }

  .agency-showcase__image {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
 * 20c. TESTIMONIAL PAIR — Michael Page: 2 cards, L/R entrance, dual-tone foot
 * -------------------------------------------------------------------------- */

.agency-testimonial-stage {
  position: relative;
  margin-block-start: var(--space-lg);
  padding-inline: clamp(2.75rem, 4vw, 3.5rem);
  min-block-size: 18rem;
  overflow: visible;
}

.agency-testimonial-pair {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  align-items: stretch;
  min-width: 0;
  min-block-size: 16rem;
  /* Room for rotate() so tilted cards are not clipped on phones. */
  padding-inline: clamp(0.65rem, 2.5vw, 1.25rem);
  overflow: visible;
}

@media (min-width: 768px) {
  .agency-testimonial-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 2vw, 2.5rem);
    min-block-size: 20rem;
  }
}

.agency-testimonial-pair > .agency-card--collage {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.agency-testimonial-pair > .agency-card--collage.is-active {
  display: grid;
  opacity: 1;
  pointer-events: auto;
}

/* Resting tilt on every viewport (mobile was flat because this lived in min-width only). */
.agency-testimonial-pair > .agency-card--collage.is-active.agency-card--enter-left {
  transform: rotate(-1.25deg);
}

.agency-testimonial-pair > .agency-card--collage.is-active.agency-card--enter-right {
  transform: rotate(1.25deg);
}

.agency-testimonial-pair > .agency-card--collage.is-active.is-entering.agency-card--enter-left {
  animation: agency-testimonial-in-left 1300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.agency-testimonial-pair > .agency-card--collage.is-active.is-entering.agency-card--enter-right {
  animation: agency-testimonial-in-right 1300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes agency-testimonial-in-left {
  from {
    opacity: 0;
    transform: translate3d(-3.5rem, 0.75rem, 0) rotate(-2.5deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-1.25deg);
  }
}

@keyframes agency-testimonial-in-right {
  from {
    opacity: 0;
    transform: translate3d(3.5rem, 0.75rem, 0) rotate(2.5deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(1.25deg);
  }
}

@media (min-width: 768px) {
  .agency-testimonial-pair > .agency-card--collage.is-active.agency-card--enter-right {
    margin-block-start: var(--space-md);
  }
}

.agency-card--collage {
  position: relative;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: var(--shadow-lg, 0 18px 40px rgba(0, 0, 0, 0.22));
  background-image: var(--agency-quotes-decor, none);
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: min(5.5rem, 36%) auto;
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  padding-block-end: calc(clamp(1.25rem, 1rem + 1.2vw, 2rem) + 0.85rem);
  overflow: hidden;
  align-content: start;
}

.agency-card__dual-foot {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 0.7rem;
  background:
    linear-gradient(
      90deg,
      var(--color-accent) 0 52%,
      color-mix(in srgb, var(--color-primary) 72%, var(--color-accent)) 52% 100%
    );
}

.agency-card--tone-coral {
  background-color: #f4a48c;
  color: var(--color-text, #0b1a33);
}

.agency-card--tone-sky {
  background-color: #9ed7ea;
  color: var(--color-text, #0b1a33);
}

.agency-card--tone-mint {
  background-color: #b8e0d2;
  color: var(--color-text, #0b1a33);
}

.agency-card--tone-cream {
  background-color: #f3e7d3;
  color: var(--color-text, #0b1a33);
}

.agency-card--tone-white {
  background-color: #ffffff;
  color: var(--color-text, #0b1a33);
}

.agency-card--collage .agency-quote__text {
  margin: 0;
  font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.15rem);
  line-height: 1.45;
  color: inherit;
}

.agency-card--collage .agency-quote__text p {
  margin: 0;
}

.agency-card--collage .agency-quote__name,
.agency-card--collage .agency-quote__role {
  color: inherit;
}

.agency-card--collage .agency-quote__author {
  margin-block-start: var(--space-sm);
}

.agency-card--collage .agency-quote__role {
  opacity: 0.75;
}

.agency-card--collage::before {
  color: inherit;
  opacity: 0.22;
}

.agency-testimonial-stage__nav {
  position: absolute;
  inset-block-start: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgb(255 255 255 / 0.55);
  border-radius: var(--radius-circle);
  background: transparent;
  color: #ffffff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.agency-testimonial-stage__nav--prev {
  inset-inline-start: 0;
}

.agency-testimonial-stage__nav--next {
  inset-inline-end: 0;
}

.agency-testimonial-stage__nav:hover,
.agency-testimonial-stage__nav:focus-visible {
  background: color-mix(in srgb, #ffffff 16%, transparent);
  border-color: #ffffff;
}

.agency-block--testimonials.agency-block--bg-inverse .agency-head__title,
.agency-block--testimonials.agency-block--bg-inverse .agency-head__lead {
  color: #ffffff;
}

.agency-block--testimonials.agency-block--bg-inverse .agency-head__lead {
  opacity: 0.85;
}

.agency-block--testimonials.agency-block--bg-inverse .agency-head {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .agency-testimonial-pair > .agency-card--collage.is-active.is-entering.agency-card--enter-left,
  .agency-testimonial-pair > .agency-card--collage.is-active.is-entering.agency-card--enter-right {
    animation: none;
  }
}


/* -----------------------------------------------------------------------------
 * 21. JOBS BOARD — agency/jobs
 *
 * A plain GET form with a submit button. The island may upgrade it to inline
 * AJAX, but with JavaScript disabled the form still filters, because that is
 * what a form does (§40).
 * -------------------------------------------------------------------------- */

.agency-block .agency-jobs-island {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.agency-block .agency-jobs__filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--space-sm);

  margin: 0 0 var(--space-md);
  padding: 0.95rem 1rem;

  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--color-primary) 5%, var(--color-surface-raised)) 0%,
      var(--color-surface-raised) 60%
    );
  border: 1px solid color-mix(in srgb, var(--color-gold, var(--color-accent)) 22%, var(--color-border));
  border-radius: 0;
}

.agency-block .agency-jobs__filter {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3xs);
  min-width: 0;
}

.agency-block .agency-jobs__filter select {
  width: 100%;
  max-inline-size: 100%;
  min-block-size: 2.75rem;
}

.agency-block .agency-jobs__check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;

  /* Match the select control height for a single baseline. */
  min-block-size: 2.75rem;
  padding-block: 0.35rem;
  font-size: var(--step--1);
  line-height: 1.2;
}

.agency-block .agency-jobs__check input {
  margin: 0;
  flex-shrink: 0;
}

.agency-block .agency-jobs__filters .agency-btn {
  align-self: stretch;
  width: 100%;
  min-block-size: 2.75rem;
  margin: 0;
}

/* The action row: the submit button sits at the end of the filter bar. */
.agency-block .agency-jobs__filters .agency-btns,
.agency-block .agency-jobs__filters > p {
  margin: 0;
}

@media (min-width: 640px) {
  .agency-block .agency-jobs__filters {
    grid-template-columns: minmax(12rem, 1fr) auto auto;
    align-items: end;
  }

  .agency-block .agency-jobs__check {
    align-self: end;
    white-space: nowrap;
  }

  .agency-block .agency-jobs__filters .agency-btn {
    width: auto;
    align-self: end;
    padding-inline: 1.25rem;
  }
}


/* -----------------------------------------------------------------------------
 * 22. CHAPTERS — agency/chapters (scrollytelling)
 *
 * The index is a real in-page table of contents and the chapters are real
 * sections: with JavaScript off this reads as a long article. motion.js adds
 * `.is-active` to the chapter in the middle band of the viewport, which is the
 * only thing the styling below reacts to.
 * -------------------------------------------------------------------------- */

/* A horizontal chip list, so the index never eats a column on a phone. */
.agency-block .agency-chapters__index {
  min-width: 0;
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.agency-block .agency-chapters__index ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);

  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}

.agency-block .agency-chapters__index a {
  display: inline-flex;
  /* 44px minimum target: these are the primary way to jump into the story (§10). */
  min-block-size: 44px;
  align-items: center;

  color: var(--color-muted);
  text-decoration: none;
}

.agency-block .agency-chapters__index a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.agency-block .agency-chapters__index a:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.agency-block .agency-chapters__index a[aria-current="true"] {
  color: var(--color-accent);
  font-weight: 600;
}

.agency-block .agency-chapters {
  display: grid;
  gap: var(--space-xl);
  min-width: 0;
}

.agency-block .agency-chapter {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;

  /* Dimmed until it is the chapter being read. The transition is on opacity
   * only, so it never triggers layout. */
  opacity: 0.55;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.agency-block .agency-chapter.is-active {
  opacity: 1;
}

.agency-block .agency-chapter__era {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Small type: deeper gold ink (brand gold is 2.1:1 on white). */
  color: var(--color-gold-ink, var(--color-gold-dark, var(--color-accent)));
}

.agency-block .agency-chapter__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.agency-block .agency-chapter__image {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.agency-block .agency-chapter__body {
  font-size: var(--step-0);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

/*
 * Timeline layout — Korn Ferry Our Story: sticky imagery + vertical rail + stream.
 */
.agency-block .agency-chapters--timeline {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}

.agency-block .agency-chapters__stage {
  position: relative;
  /* Visible on all viewports so the emerald–gold corner wash is never hidden. */
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* Near-black neutral — never brand-primary blue between image crossfades. */
  background: #101418;
  min-block-size: 14rem;
  aspect-ratio: 16 / 10;
  contain: paint;
}

.agency-block .agency-chapters__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #101418;
  transition: opacity 420ms var(--ease-out);
  pointer-events: none;
}

.agency-block .agency-chapters__frame.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.agency-block .agency-chapters__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #101418;
}

/*
 * Our services timeline — emerald/gold wash that curves in from all four
 * corners (inner vignette), so photo frames read on-brand without obscuring faces.
 */
.agency-block .agency-chapters__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 72% 68% at 0% 0%,
      color-mix(in srgb, var(--color-primary-dark, #154850) 72%, transparent) 0%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 72% 68% at 100% 0%,
      color-mix(in srgb, var(--color-gold, #c4a35a) 58%, transparent) 0%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 72% 68% at 0% 100%,
      color-mix(in srgb, var(--color-gold, #c4a35a) 54%, transparent) 0%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 72% 68% at 100% 100%,
      color-mix(in srgb, var(--color-navy, #003366) 68%, transparent) 0%,
      transparent 68%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--color-primary-dark, #154850) 22%, transparent) 0%,
      transparent 38%,
      color-mix(in srgb, var(--color-gold, #c4a35a) 18%, transparent) 100%
    );
}
/* ^ --color-navy, not --color-primary: primary is white in dark mode and bleached the photo. */

.agency-block .agency-chapters__stream {
  display: grid;
  gap: var(--space-2xl);
  min-width: 0;
}

.agency-block .agency-chapters--timeline .agency-chapter {
  opacity: 1;
  padding-block: var(--space-md);
  border-block-start: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
}

.agency-block .agency-chapters--timeline .agency-chapter.is-active {
  border-inline-start: 3px solid var(--color-accent);
  padding-inline-start: var(--space-md);
}

/* Without JS, stacked chapter cards stay visible. */
@media (max-width: 1023.98px) {
  .agency-chapters:not([data-agency-chapters]) .agency-chapter,
  html:not(.has-agency-motion) .agency-block .agency-chapters--timeline .agency-chapter {
    opacity: 1;
    transform: none;
  }
}

/*
 * Phones/tablets — ONE image source (stage frames), interleaved with chapter
 * copy via display:contents. No second image column can appear.
 */
@media (max-width: 1023.98px) {
  .agency-block .agency-chapters--timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .agency-block .agency-chapters--timeline .agency-chapters__index,
  .agency-block .agency-chapters--timeline .agency-chapters__index--rail {
    display: none !important;
  }

  .agency-block .agency-chapters--timeline .agency-chapters__stage,
  .agency-block .agency-chapters--timeline .agency-chapters__stream {
    display: contents !important;
  }

  .agency-block .agency-chapters--timeline .agency-chapters__frame {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: auto !important;
    order: calc(var(--chapter-i, 0) * 2);
    width: 100%;
    min-block-size: 11rem;
    aspect-ratio: 16 / 10;
    margin: clamp(1.75rem, 5vw, 2.75rem) 0 0;
    border-radius: 0.15rem 0.15rem 0 0;
    overflow: hidden;
    background: #101418;
    box-shadow: 0 16px 40px rgb(0 0 0 / 0.16);
  }

  .agency-block .agency-chapters--timeline .agency-chapters__frame:first-child {
    margin-block-start: 0;
  }

  .agency-block .agency-chapters--timeline .agency-chapters__frame::after {
    border-radius: inherit;
  }

  .agency-block .agency-chapters--timeline .agency-chapters__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .agency-block .agency-chapters--timeline .agency-chapter {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    order: calc(var(--chapter-i, 0) * 2 + 1);
    padding: 0;
    margin: 0 0 clamp(1.75rem, 5vw, 2.75rem);
    border: 0;
    border-inline-start: 0;
    background: #ffffff;
    box-shadow: 0 16px 40px rgb(0 0 0 / 0.16);
    overflow: hidden;
    border-radius: 0 0 0.15rem 0.15rem;
  }

  .agency-block .agency-chapters--timeline .agency-chapter.is-active {
    border-inline-start: 0;
    padding-inline-start: 0;
    box-shadow: 0 18px 44px rgb(0 0 0 / 0.2);
  }

  /* Pair even chapters with their frames (0-based: 1,3,5…). */
  .agency-block .agency-chapters--timeline .agency-chapter:nth-child(even) {
    background: color-mix(in srgb, var(--color-primary-dark, #154850) 94%, #000);
  }

  .agency-block .agency-chapters--timeline .agency-chapter:nth-child(even) .agency-chapter__era,
  .agency-block .agency-chapters--timeline .agency-chapter:nth-child(even) .agency-chapter__title,
  .agency-block .agency-chapters--timeline .agency-chapter:nth-child(even) .agency-chapter__body {
    color: #ffffff;
  }

  .agency-block .agency-chapters--timeline .agency-chapter:nth-child(even) .agency-chapter__era {
    color: var(--color-gold-light, var(--color-gold, #c4a35a));
  }

  .agency-block .agency-chapters--timeline .agency-chapter__era,
  .agency-block .agency-chapters--timeline .agency-chapter__title,
  .agency-block .agency-chapters--timeline .agency-chapter__body {
    padding-inline: clamp(1.15rem, 4vw, 1.75rem);
  }

  .agency-block .agency-chapters--timeline .agency-chapter__era {
    padding-block-start: clamp(1.1rem, 3.5vw, 1.5rem);
    margin: 0;
  }

  .agency-block .agency-chapters--timeline .agency-chapter__title {
    margin: 0;
    padding-block: 0.35rem 0.65rem;
    color: var(--color-primary);
    text-align: start;
    font-size: clamp(1.35rem, 1.1rem + 1.6vw, 1.85rem);
  }

  .agency-block .agency-chapters--timeline .agency-chapter__body {
    padding-block-end: clamp(1.25rem, 4vw, 1.75rem);
    margin: 0;
  }

  /* Kill any leftover stream/media duplicates from older markup. */
  .agency-block .agency-chapters--timeline .agency-chapter__media,
  .agency-block .agency-chapters--timeline .agency-chapter > img,
  .agency-block .agency-chapters--timeline .agency-chapter .agency-chapter__image,
  .agency-block .agency-chapters--timeline .agency-chapter .agency-chapter__image--inline {
    display: none !important;
  }

  .agency-block .agency-chapters--timeline .agency-chapter {
    opacity: 0;
    transform: translate3d(0, 3.25rem, 0) scale(0.97);
    transition:
      opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 400ms var(--ease-out, ease);
  }

  .agency-block .agency-chapters--timeline .agency-chapter.is-card-inview,
  .agency-block .agency-chapters--timeline .agency-chapter.is-active.is-card-inview {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .agency-block .agency-chapters--timeline .agency-chapter {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
}

/*
 * Laptop+ — sticky stage + rail + text stream.
 * Stream has no images in the DOM (by design).
 */
@media (min-width: 1024px) {
  .agency-block .agency-chapters--timeline {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(10rem, 0.35fr) minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .agency-block .agency-chapters__stage {
    display: block !important;
    position: sticky;
    top: 5.5rem;
    order: 1;
    aspect-ratio: auto;
    min-block-size: calc(100vh - 7rem);
    max-block-size: calc(100vh - 7rem);
    overflow: hidden;
  }

  .agency-block .agency-chapters--timeline .agency-chapters__frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: auto;
    min-block-size: 0;
    order: initial;
  }

  .agency-block .agency-chapters--timeline .agency-chapters__frame.is-active {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
  }

  .agency-block .agency-chapters__index--rail {
    display: block !important;
    position: sticky;
    top: 5.5rem;
    order: 2;
    align-self: start;
    padding: 0;
    background: transparent;
    border: 0;
  }

  .agency-block .agency-chapters__index--rail ol {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
  }

  .agency-block .agency-chapters__index--rail a {
    width: 100%;
    padding-block: 0.75rem;
    padding-inline: 0.85rem;
    border-inline-start: 2px solid color-mix(in srgb, currentColor 22%, transparent);
    font-size: var(--step-0);
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);
  }

  .agency-block .agency-chapters__index--rail a:hover,
  .agency-block .agency-chapters__index--rail a:focus-visible,
  .agency-block .agency-chapters__index--rail a[aria-current="true"] {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border-inline-start-color: var(--color-accent);
    color: var(--color-accent);
    text-decoration: none;
  }

  .agency-block .agency-chapters__stream {
    display: grid !important;
    order: 3;
    gap: var(--space-2xl);
  }

  .agency-block .agency-chapters--timeline .agency-chapter {
    display: block;
    order: initial;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    opacity: 1;
    transform: none;
    margin: 0;
    padding-block: var(--space-md);
    border-block-start: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  }

  .agency-block .agency-chapters--timeline .agency-chapter:nth-child(even),
  .agency-block .agency-chapters--timeline .agency-chapter:nth-child(odd) {
    background: transparent;
  }

  .agency-block .agency-chapters--timeline .agency-chapter.is-active {
    border-inline-start: 3px solid var(--color-accent);
    padding-inline-start: var(--space-md);
    box-shadow: none;
  }

  .agency-block .agency-chapters--timeline .agency-chapter__era,
  .agency-block .agency-chapters--timeline .agency-chapter__title,
  .agency-block .agency-chapters--timeline .agency-chapter__body {
    padding-inline: 0;
    color: inherit;
  }

  .agency-block .agency-chapters--timeline .agency-chapter__era {
    padding-block-start: 0;
  }

  .agency-block .agency-chapters--timeline .agency-chapter__title {
    padding-block: 0;
    color: inherit;
    font-size: var(--step-2);
  }

  .agency-block .agency-chapters--timeline .agency-chapter__body {
    padding-block-end: 0;
    color: var(--color-muted);
  }

  /* Belt-and-suspenders: never show stream media on laptop. */
  .agency-block .agency-chapters--timeline .agency-chapter__media,
  .agency-block .agency-chapters--timeline .agency-chapter > img,
  .agency-block .agency-chapters--timeline .agency-chapter .agency-chapter__image,
  .agency-block .agency-chapters--timeline .agency-chapter .agency-chapter__image--inline {
    display: none !important;
  }
}

/*
 * With reduced motion the engine marks every chapter active (it never observes),
 * and this guarantees the same result for anyone whose browser never runs the
 * script: nothing stays dimmed.
 */
@media (prefers-reduced-motion: reduce) {
  .agency-block .agency-chapter {
    opacity: 1;
    transition: none;
  }

  .agency-block .agency-chapters__frame {
    transition: none;
  }
}



/* -----------------------------------------------------------------------------
 * 23. PARALLAX BAND — agency/parallax
 *
 * The renderer puts `data-agency-parallax` on the band itself and sets two inline
 * custom properties: `min-height` and `--agency-overlay` (the percentage of
 * darkening asked for in the editor). motion.js translates the band, so the
 * SECTION clips the movement rather than the band: clipping the moving element
 * would clip its own drift away.
 * -------------------------------------------------------------------------- */

.agency-block--parallax {
  overflow: hidden;
}

.agency-block .agency-parallax {
  position: relative;
  isolation: isolate; /* Keeps the layers below from escaping the band. */

  display: grid;
  align-content: center;
  gap: var(--space-md);

  /* min-height arrives inline from the block attribute. */
  padding: var(--space-xl) var(--space-lg);

  border-radius: var(--radius-lg);
  overflow: hidden;

  /* A photographic band: the copy always needs the contrast colour. */
  color: var(--color-primary-contrast);
}

.agency-block .agency-parallax__image {
  position: absolute;
  inset: 0;

  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 0;

  z-index: -2;
}

/*
 * The overlay is what makes white text legible over an arbitrary photograph.
 * `--agency-overlay` is the editor's percentage; the fallback keeps the band
 * readable if the inline style is ever missing.
 */
.agency-block .agency-parallax::before {
  content: "";
  position: absolute;
  inset: 0;

  background-color: color-mix(
    in srgb,
    var(--color-primary) var(--agency-overlay, 30%),
    transparent
  );

  z-index: -1;
  pointer-events: none;
}

.agency-block .agency-parallax__content {
  position: relative;
  display: grid;
  gap: var(--space-md);
  max-width: var(--measure-wide);
  min-width: 0;
}

.agency-block .agency-parallax .agency-head__title,
.agency-block .agency-parallax .agency-head__lead {
  color: inherit;
}

.agency-block .agency-parallax .agency-head__lead {
  opacity: 0.9;
}

/* The overlay is the only thing standing between the copy and the photo, so a
 * light overlay is not offered: below 35% the copy stops being reliable. */
.agency-block .agency-parallax .agency-btn--outline {
  color: inherit;
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}

.agency-block .agency-parallax .agency-btn--outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}


/* -----------------------------------------------------------------------------
 * 24. MARQUEE — agency/marquee
 *
 * Pure CSS. The renderer emits the item list twice, with the second copy marked
 * `aria-hidden`, and this translates the track by half its own width, which is
 * what makes the loop seamless (§30, §40). Same technique as the theme's
 * `.marquee`, under the block's own class name.
 * -------------------------------------------------------------------------- */

.agency-block .agency-marquee {
  overflow: hidden;

  /* Fade the edges so items enter and leave rather than appearing cut off.
   * The gradient is alpha-only, which is why a literal black is correct here —
   * it is the "fully opaque" stop, not a themed colour. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.agency-block .agency-marquee__track {
  display: flex;
  gap: var(--space-xl);
  inline-size: max-content;

  animation: agency-marquee 40s linear infinite;
}

/* Speed modifiers, so the editor's choice is visible to a visitor. */
.agency-block .agency-marquee--slow .agency-marquee__track {
  animation-duration: 60s;
}

.agency-block .agency-marquee--fast .agency-marquee__track {
  animation-duration: 24s;
}

/* Pause on hover and on focus, so a visitor can actually read an item and a
 * keyboard user is not chasing a moving target (WCAG 2.2.2). */
.agency-block .agency-marquee:hover .agency-marquee__track,
.agency-block .agency-marquee:focus-within .agency-marquee__track,
.agency-block .agency-marquee.is-viewport-paused .agency-marquee__track {
  animation-play-state: paused;
}

.agency-block .agency-marquee__set {
  display: flex;
  gap: var(--space-xl);

  margin: 0;
  padding: 0;
  list-style: none;
}

.agency-block .agency-marquee__item {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: var(--leading-none);

  /* Items must never wrap: a wrapped item makes the duplicated track jump. */
  white-space: nowrap;

  color: var(--color-muted);
}

@keyframes agency-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    /* -50% because the track is duplicated: shifting by half shows a seamless
     * loop with no visible jump. */
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agency-block .agency-marquee__track {
    animation: none;
  }

  /* Without the animation the duplicated set would show every item twice, so
   * the echo copy is hidden and the list reads once. */
  .agency-block .agency-marquee__set--echo {
    display: none;
  }
}


/* -----------------------------------------------------------------------------
 * 25. SLIDER — agency/slider
 *
 * Reuses the theme's carousel track and controls; the slides are the slider's own
 * class, so they must declare the width the track expects: the engine moves the
 * track by exactly -100%, which only works when one slide is one viewport wide.
 * -------------------------------------------------------------------------- */

.agency-block .agency-slider {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.agency-block .agency-slider__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;

  /* Matches the theme's carousel slide padding, so the focus ring of a caption
   * link is never flush against the viewport edge. */
  padding-inline: var(--space-2xs);
}

.agency-block .agency-slider__image {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.agency-block .agency-slider--16-9 .agency-slider__image { aspect-ratio: 16 / 9; }
.agency-block .agency-slider--4-3 .agency-slider__image { aspect-ratio: 4 / 3; }
.agency-block .agency-slider--1-1 .agency-slider__image { aspect-ratio: 1 / 1; }
.agency-block .agency-slider--21-9 .agency-slider__image { aspect-ratio: 21 / 9; }

/*
 * The caption sits BELOW the image rather than over it: an overlaid caption
 * needs a scrim, and a scrim over an arbitrary photo is how contrast failures
 * get shipped.
 */
.agency-block .agency-slider__caption {
  display: grid;
  gap: var(--space-3xs);
  margin-block-start: var(--space-sm);
}

.agency-block .agency-slider__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.agency-block .agency-slider__title a {
  color: inherit;
  text-decoration: none;
}

.agency-block .agency-slider__title a:hover {
  color: var(--color-accent);
}

.agency-block .agency-slider__title a:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.agency-block .agency-slider__text {
  margin: 0;
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}


/* -----------------------------------------------------------------------------
 * 26. CAROUSEL SLIDE CONTENT — the parts the theme does not own
 *
 * The theme styles the carousel chrome (`.agency-carousel`, viewport, track,
 * slide width, buttons, dots) in components.css §8, so it is NOT duplicated here.
 * What the theme cannot know is how a slide's *content* looks, which is the
 * block's job.
 *
 * PER-VIEW COUNT: the renderer adds a `--N` modifier recording the author's
 * requested columns, but the engine advances the track by exactly -100% per step.
 * A track showing two slides at once would therefore desynchronise the buttons
 * from the content, so every slide is one viewport wide. Honouring `--N` needs a
 * change in motion.js, not here; this is a deliberate, documented limitation.
 * -------------------------------------------------------------------------- */

.agency-block .agency-carousel__image {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.agency-block .agency-carousel__title {
  margin: var(--space-2xs) 0 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.agency-block .agency-carousel__title a {
  color: inherit;
  text-decoration: none;
}

.agency-block .agency-carousel__title a:hover {
  color: var(--color-accent);
}

.agency-block .agency-carousel__text {
  margin: var(--space-3xs) 0 0;
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

/* Quote slides are cards, so they must fill the slide rather than float in it. */
.agency-block .agency-carousel__slide > .agency-card--quote {
  block-size: 100%;
  margin: 0;
}

@media (min-width: 48em) {
  .agency-block .agency-carousel__slide {
    padding-inline: var(--space-sm);
  }
}

/*
 * `:focus-within` on the whole carousel is how a keyboard user pauses an
 * autoplaying track (the engine listens for the same signal).
 */
.agency-block .agency-carousel:focus-within .agency-carousel__button:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: 2px;
}


/* -----------------------------------------------------------------------------
 * 27. SHARED BLOCK MODIFIERS — emitted by Render::open() / Render::inner_open()
 *
 * The background list is completed here with the two dark variants; the light
 * ones (`--bg-surface`, `--bg-raised`, `--bg-gradient`, `--bg-accent`) are
 * defined in §2 next to the section shell.
 * -------------------------------------------------------------------------- */

/* Deep by default; the §2 adjacency rules (higher specificity) flip a repeated
 * inverse to the vivid tone. */
.agency-block--bg-inverse {
  background-color: var(--color-primary-dark, var(--color-primary));
  background-image: var(--gradient-section-deep, var(--gradient-hero));
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-primary-contrast);
}

/* Band tones are owned in §2 — do not re-paint surface/raised/gradient here. */

.agency-block--testimonials.agency-block--bg-gradient,
.agency-block--testimonials.agency-block--bg-inverse {
  position: relative;
  isolation: isolate;
}

.agency-block--testimonials.agency-block--bg-gradient .agency-head__title,
.agency-block--testimonials.agency-block--bg-gradient .agency-head__lead,
.agency-block--testimonials.agency-block--bg-inverse .agency-head__title,
.agency-block--testimonials.agency-block--bg-inverse .agency-head__lead {
  color: #ffffff;
}

.agency-block--bg-gradient {
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-primary-contrast);
}

/* Heroes and media banners keep the deep hero gradient; content bands are vivid (§2). */
.agency-block--hero.agency-block--bg-gradient,
.agency-page-hero.agency-block--bg-gradient,
.agency-block--inner-hero.agency-block--bg-gradient,
.agency-block--video.agency-block--bg-gradient {
  background-color: var(--color-primary-dark, var(--color-primary));
  background-image: var(--gradient-hero);
}

/* Soft diagonal cut under gradient heroes (Korn Ferry inner-page concept). */
.agency-block--hero.agency-block--bg-gradient,
.agency-block--hero.agency-block--bg-inverse,
.agency-block--video.agency-block--bg-gradient {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
  padding-block-end: calc(var(--section-y) + 1.5rem);
}

@media (min-width: 768px) {
  .agency-block--hero.agency-block--bg-gradient,
  .agency-block--hero.agency-block--bg-inverse,
  .agency-block--video.agency-block--bg-gradient {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4rem), 0 100%);
  }
}

/* Image hover scale — corporate photography bands. */
.agency-block img {
  transition: transform 1000ms var(--ease-out);
}

.agency-card:hover .agency-card__media img,
.agency-process__step:hover img,
.agency-block .agency-process__media:hover img {
  transform: scale(1.05);
}

.agency-block--bg-accent-gradient {
  background-image: var(--gradient-accent);
  color: var(--color-accent-contrast);
}

/*
 * On any of the dark bands the muted text colour would sit at roughly 3:1 on a
 * dark background, so muted copy falls back to the inherited contrast colour and
 * relies on opacity for hierarchy instead. This is a contrast fix, not a taste
 * decision (§14).
 */
.agency-block--bg-inverse .agency-head__lead,
.agency-block--bg-accent .agency-head__lead,
.agency-block--bg-accent-gradient .agency-head__lead {
  color: inherit;
  opacity: 0.9;
}

.agency-block--bg-inverse .agency-card__text,
.agency-block--bg-accent .agency-card__text,
.agency-block--bg-accent-gradient .agency-card__text {
  color: inherit;
  opacity: 0.9;
}

/* --- Spacing modifiers: the editor's vertical rhythm choice ------------------ */

.agency-block--space-tight { padding-block: var(--space-lg); }
.agency-block--space-loose { padding-block: var(--space-3xl); }
.agency-block--space-flush-top { padding-block-start: 0; }
.agency-block--space-flush-bottom { padding-block-end: 0; }

/* --- Style panel scales (shared attrs: paddingScale / marginScale / textAlign) */

.agency-block--align-start { text-align: start; }
.agency-block--align-center { text-align: center; }
.agency-block--align-end { text-align: end; }

.agency-block--align-center .agency-head,
.agency-block--align-center .agency-btns {
  text-align: center;
  justify-content: center;
}

.agency-block--pad-none { padding: 0; }
.agency-block--pad-sm { padding-block: var(--space-sm); padding-inline: var(--space-sm); }
.agency-block--pad-md { padding-block: var(--space-md); padding-inline: var(--space-md); }
.agency-block--pad-lg { padding-block: var(--space-lg); padding-inline: var(--space-lg); }
.agency-block--pad-xl { padding-block: var(--space-xl); padding-inline: var(--space-xl); }

.agency-block--mar-none { margin-block: 0; }
.agency-block--mar-sm { margin-block: var(--space-sm); }
.agency-block--mar-md { margin-block: var(--space-md); }
.agency-block--mar-lg { margin-block: var(--space-lg); }
.agency-block--mar-xl { margin-block: var(--space-xl); }
.agency-block--space-none { padding-block: 0; }

/* --- Width modifiers: applied to the inner container, not the band ----------- */

.agency-block__inner--narrow { max-width: var(--container-narrow); }
.agency-block__inner--wide { max-width: var(--container-wide); }
/* `full` keeps the band edge to edge (banners / full-bleed media). */
.agency-block__inner--full {
  max-width: none;
  padding-inline: 0;
}

/* --- Visibility modifiers: an editor decision, so `display: none` is correct --

/* "Hide on mobile" means the small screens, which is the base layout (§5). */
@media (max-width: 47.99em) {
  .agency-block--hide-mobile {
    display: none;
  }
}

@media (min-width: 48em) {
  .agency-block--hide-desktop {
    display: none;
  }
}


/* -----------------------------------------------------------------------------
 * 28. MOTION STATE AND PRINT
 *
 * The reveal animation itself is the theme's (components.css §5) because it is a
 * page-level concern and must apply whether or not a block is on the page: it
 * hides content ONLY once `.has-agency-motion` proves the script is running. What
 * is left for the block is the state the engine toggles on block elements.
 * -------------------------------------------------------------------------- */

/* The counting element must not reflow while the number changes. */
.agency-block [data-agency-count] {
  font-variant-numeric: tabular-nums lining-nums;
}

/*
 * Motion is opt-in per element and off below the parallax breakpoint (the engine
 * checks `parallaxMinWidth`), so no block needs a media query for it. The belt to
 * that braces: a device that asked for reduced motion never sees a translated
 * layer, whatever the engine decides.
 */
@media (prefers-reduced-motion: reduce) {
  .agency-block [data-agency-parallax] {
    transform: none;
  }

  .agency-block .agency-btn:hover,
  .agency-block .agency-btn:active {
    transform: none;
  }
}

/*
 * Printing. `.agency-block` is a full-bleed dark band on screen, which is a
 * quarter of a toner cartridge on paper and unreadable besides. The theme's print
 * rules (base.css §9) already neutralise the page; these do the same for blocks.
 */
@media print {
  .agency-block {
    padding-block: var(--space-sm);
    /* Keep a block on one page rather than splitting a card row across two. */
    break-inside: avoid;
  }

  .agency-block--bg-gradient,
  .agency-block--bg-accent,
  .agency-block--bg-accent-gradient,
  .agency-block--bg-inverse {
    background-image: none;
    background-color: transparent;
    color: #000;
  }

  /* Controls that cannot be used on paper are noise. */
  .agency-block .agency-carousel__controls,
  .agency-block .agency-carousel__dots,
  .agency-block .agency-video__play,
  .agency-block .agency-marquee__set--echo {
    display: none;
  }

  /* A facade is a poster with a play button that does nothing on paper, so the
   * poster is shown without the control. */
  .agency-block .agency-video__facade {
    position: static;
  }

  .agency-block .agency-video {
    aspect-ratio: auto;
  }

  .agency-block .agency-video__poster {
    block-size: auto;
  }
}


/* -----------------------------------------------------------------------------
 * 29. OVERFLOW GUARDS
 *
 * §8 is a hard requirement: nothing a block renders may widen the page. These are
 * the rules that make that true for the content types that would otherwise do it
 * — a long URL, an unbreakable string, an oversized image, an embedded player,
 * and the exhibit table at the end of this file.
 *
 * They are intentionally narrow: a blanket `overflow: hidden` on a block would
 * clip a focus ring, and a blanket `word-break: break-all` makes body copy ugly.
 * -------------------------------------------------------------------------- */

.agency-block img,
.agency-block video,
.agency-block iframe,
.agency-block svg {
  max-width: 100%;
}

.agency-block img,
.agency-block video {
  height: auto;
}

/*
 * Absolute / cover fill media must beat the reset above
 * (.agency-block video is 0,1,1 — class-only height:100% loses and collapses
 * to intrinsic 16:9 inside tall 100dvh stages).
 */
.agency-block .agency-inner-hero__stage-media,
.agency-block .agency-inner-hero__feature-media,
.agency-block .agency-video__frame .agency-video__media,
.agency-block .agency-video__frame .agency-video__poster,
.agency-block .agency-impact-mosaic__img,
.agency-block .agency-impact-mosaic__video,
.agency-block .agency-card__media img,
.agency-block .agency-showcase__video-el,
.agency-block .agency-chapters__image,
.agency-block .agency-feature__photo {
  height: 100%;
  max-width: none;
}

/* A pasted URL or a long compound word breaks rather than pushing the layout. */
.agency-block p,
.agency-block li,
.agency-block dd,
.agency-block h2,
.agency-block h3,
.agency-block h4 {
  overflow-wrap: anywhere;
}

/*
 * Headings and short blocks of copy do not need to break mid-word as eagerly as
 * body text; `break-word` only breaks when there is no other option, so a
 * headline still wraps at spaces first.
 */
.agency-block .agency-head__title,
.agency-block .agency-card__title,
.agency-block .agency-feature__title,
.agency-block .agency-process__title,
.agency-block .agency-chapter__title {
  overflow-wrap: break-word;
}

/* Any table inside a block scrolls rather than widening the page (§42). */
.agency-block table {
  max-width: 100%;
}

.agency-block > .agency-block__inner > table,
.agency-block .agency-table-scroll {
  display: block;
  overflow-x: auto;
}

/*
 * Text never sits on an image without an overlay, and an image never sits inside
 * a text block without breathing room.
 */
.agency-block figure {
  margin-inline: 0;
}


/* -----------------------------------------------------------------------------
 * 30. DATA EXHIBIT — agency/exhibit
 *
 * The figures are the visual treatment; the table underneath is the same data in
 * a form a screen reader and a keyboard user can work with. Both are real
 * content, which is why neither is hidden with `display: none`.
 * -------------------------------------------------------------------------- */

/*
 * `auto-fit` with a floor rather than a fixed column count: four short figures
 * sit side by side on a desktop, the same markup becomes a single stack on a
 * phone, and no breakpoint has to guess how many there are (§6, §7).
 */
.agency-exhibit__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-md);

  margin-block-start: var(--space-md);
  padding: 0;

  list-style: none;
}

.agency-exhibit__figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}

.agency-exhibit__value {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: var(--leading-none);
  /* Digits of different widths make a column of figures look crooked. */
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-primary);
  overflow-wrap: anywhere;
}

.agency-exhibit__label {
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  color: var(--color-muted);
}

/*
 * The table is the accessible form of the exhibit, so it is deliberately visible
 * rather than a visually-hidden duplicate: an oversized number is hard to
 * compare, and a sighted user reading the table is not being helped twice
 * (§13).
 */
.agency-exhibit__scroll {
  /* Safety valve for a long series on a narrow phone: this scrolls instead of
   * widening the page (§8, §42). */
  overflow-x: auto;
  margin-block-start: var(--space-lg);
}

.agency-exhibit__table {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
}

.agency-exhibit__caption {
  padding-block-end: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--color-muted);
  text-align: start;
}

.agency-exhibit__table th,
.agency-exhibit__table td {
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) 0;
  border-block-end: var(--border-width) solid var(--color-border);
  vertical-align: baseline;
}

.agency-exhibit__table th:last-child,
.agency-exhibit__table td:last-child {
  padding-inline-end: 0;
  text-align: end;
}

.agency-exhibit__table thead th {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--color-muted);
}

.agency-exhibit__table tbody th {
  font-weight: 500;
  color: var(--color-text);
}

.agency-exhibit__table tbody td {
  font-variant-numeric: tabular-nums lining-nums;
}

.agency-exhibit__source {
  margin-block-start: var(--space-sm);
  font-size: var(--step--1);
  color: var(--color-muted);
}

/* -----------------------------------------------------------------------------
 * 31. HERO LOGO WATERMARK — agency/hero, `watermark` toggle
 *
 * Decoration only: the markup is aria-hidden, the image is never a link, and it
 * sits behind the copy so it cannot intercept a tap.
 * -------------------------------------------------------------------------- */

.agency-block--hero {
  position: relative;
}

/* The copy must stay above the watermark without a magic z-index race. */
.agency-block--hero .agency-block__inner {
  position: relative;
}

.agency-hero__watermark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: clamp(0rem, 6vw, 6rem);
  /* Bounded, so it can never widen the section (§8). */
  inline-size: clamp(6rem, 28%, 20rem);
  max-inline-size: 40%;
  transform: translateY(-50%);
  opacity: 0.08;
  pointer-events: none;
  overflow: hidden;
}

.agency-hero__watermark-image {
  inline-size: 100%;
  block-size: auto;
  height: auto;
  object-fit: contain;
}

@media (min-width: 48em) {
  .agency-hero__watermark {
    opacity: 0.1;
  }
}

/* -----------------------------------------------------------------------------
 * 28b. KORN FERRY–STYLE PAGE BANNERS + SERVICES CARDS
 * -------------------------------------------------------------------------- */

/*
 * Inner-page video banners — Korn Ferry diagonal cut on the SECTION shell.
 * Clipping only the inner video left a solid rectangle under the cut; clipping
 * the whole band lets the next section colour show through the slant.
 * Negative end margin pulls the following band under the cut (clip alone only
 * reveals whatever sits behind in paint order — usually the page body).
 */
.agency-block.agency-page-hero:has(.agency-video--banner),
.agency-block.agency-block--inner-hero {
  background: transparent !important;
  background-image: none !important;
  padding-block: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.25rem), 0 100%);
  margin-block-end: -3.25rem;
  position: relative;
  z-index: 1;
}

.agency-block.agency-page-hero:has(.agency-video--banner)::after,
.agency-block.agency-block--inner-hero::after {
  content: none;
  display: none;
}

@media (min-width: 768px) {
  .agency-block.agency-page-hero:has(.agency-video--banner),
  .agency-block.agency-block--inner-hero {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5rem), 0 100%);
    margin-block-end: -5rem;
  }
}

/*
 * First content band after a hero. Hash anchors may sit between siblings, so
 * include `+ .kanbann-hash-anchor +` variants.
 */
/*
 * Clear the diagonal overhang only — no emerald fill / wash under the cut.
 * Flat overlays (Privacy) keep normal section padding.
 */
.agency-block.agency-page-hero:has(.agency-video--banner) + .agency-block,
.agency-block.agency-page-hero:has(.agency-video--banner) + .kanbann-hash-anchor + .agency-block,
.agency-block.agency-block--inner-hero:not(.agency-inner-hero--overlay-flat) + .agency-block,
.agency-block.agency-block--inner-hero:not(.agency-inner-hero--overlay-flat) + .kanbann-hash-anchor + .agency-block {
  padding-block-start: calc(var(--section-y, 4rem) + 3.25rem);
}

.agency-block.agency-page-hero:has(.agency-video--banner) + .agency-block::before,
.agency-block.agency-page-hero:has(.agency-video--banner) + .kanbann-hash-anchor + .agency-block::before,
.agency-block.agency-block--inner-hero + .agency-block::before,
.agency-block.agency-block--inner-hero + .kanbann-hash-anchor + .agency-block::before {
  content: none;
  display: none;
}

@media (min-width: 768px) {
  .agency-block.agency-page-hero:has(.agency-video--banner) + .agency-block,
  .agency-block.agency-page-hero:has(.agency-video--banner) + .kanbann-hash-anchor + .agency-block,
  .agency-block.agency-block--inner-hero:not(.agency-inner-hero--overlay-flat) + .agency-block,
  .agency-block.agency-block--inner-hero:not(.agency-inner-hero--overlay-flat) + .kanbann-hash-anchor + .agency-block {
    padding-block-start: calc(var(--section-y, 4rem) + 5rem);
  }
}

.agency-block--video:has(.agency-video--banner .agency-head) .agency-video--banner,
.agency-block.agency-page-hero:has(.agency-video--banner) .agency-video--banner {
  background-image: var(--gradient-hero);
  clip-path: none;
  padding-block-end: clamp(2.5rem, 6vw, 4.5rem);
}

.agency-block--video:has(.agency-video--banner .agency-head) .agency-video--banner::before,
.agency-block.agency-page-hero:has(.agency-video--banner) .agency-video--banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Match thin gold/emerald media tint — no heavy green veil. */
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-gold, var(--color-accent)) 24%, transparent) 0%,
    color-mix(in srgb, var(--color-primary-soft, var(--color-primary)) 10%, transparent) 48%,
    color-mix(in srgb, var(--color-gold, var(--color-accent)) 18%, transparent) 100%
  );
  pointer-events: none;
}

.agency-block--video:has(.agency-video--banner .agency-head) .agency-video--banner .agency-head,
.agency-block.agency-page-hero:has(.agency-video--banner) .agency-video--banner .agency-head {
  position: relative;
  z-index: 1;
  max-width: min(42rem, 92%);
  margin-inline: auto;
  text-align: center;
  align-self: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: #ffffff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.45);
}

/* About — overlay copy bottom-middle-left on the banner. */
.agency-block.agency-page-hero--about:has(.agency-video--banner) .agency-video--banner {
  align-items: end;
  justify-items: start;
  padding-block-end: clamp(3.5rem, 8vw, 6rem);
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.agency-block.agency-page-hero--about:has(.agency-video--banner) .agency-video--banner .agency-head {
  margin-inline: 0;
  margin-block-end: 0;
  text-align: start;
  align-self: end;
  max-width: min(36rem, 90%);
}

/*
 * Home — LA28-style left stack (scraped home-page-video copy) over time-lapse.
 * Must follow the generic centered banner-head rule above.
 */
.agency-block.agency-page-hero--home:has(.agency-video--banner) .agency-video--banner,
.agency-block.agency-block--home-banner:has(.agency-video--banner) .agency-video--banner {
  align-items: start;
  align-content: start;
  justify-items: start;
  padding-block-start: calc(
    var(--site-header-offset, 5.75rem) * 1.05 + clamp(3.75rem, 8vw, 5.5rem)
  );
  padding-block-end: clamp(2.5rem, 6vw, 4.5rem);
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.agency-block.agency-page-hero--home:has(.agency-video--banner) .agency-video--banner .agency-head,
.agency-block.agency-block--home-banner:has(.agency-video--banner) .agency-video--banner .agency-head {
  display: grid;
  gap: 0.65rem;
  justify-items: start;
  margin-inline: 0;
  margin-block-end: 0;
  text-align: start;
  align-self: start;
  justify-self: start;
  max-width: min(38rem, 92%);
}

.agency-block.agency-page-hero--home:has(.agency-video--banner) .agency-video--banner .agency-btns,
.agency-block.agency-block--home-banner:has(.agency-video--banner) .agency-video--banner .agency-btns {
  justify-content: flex-start;
  justify-self: start;
  align-self: start;
  margin: 0.85rem 0 0;
  padding: 0;
}

/* Candidates — media-only banner; title lives in the band below. */
.agency-block.agency-page-hero--candidates:has(.agency-video--banner) .agency-video--banner .agency-head {
  display: none;
}

/* Jobs — overlay copy right, middish-bottom. */
.agency-block.agency-page-hero--jobs:has(.agency-video--banner) .agency-video--banner {
  align-items: end;
  justify-items: end;
  padding-block-end: clamp(3rem, 7vw, 5.5rem);
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.agency-block.agency-page-hero--jobs:has(.agency-video--banner) .agency-video--banner .agency-head {
  margin-inline: 0;
  margin-inline-start: auto;
  margin-block-end: 0;
  text-align: end;
  align-self: end;
  justify-self: end;
  max-width: min(34rem, 88%);
}

/*
 * Final mobile banner pass — wins over page-hero padding / min-height so
 * landscape footage is not cropped left/right on phones.
 */
@media (max-width: 47.99em) {
  /*
   * Inner page-hero banners — job-detail cut on phones only.
   * !important beats the desktop shell rule that follows earlier in the file.
   */
  .agency-block.agency-page-hero:has(.agency-video--banner):not(.agency-page-hero--home):not(.agency-block--home-banner) {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), 0 100%) !important;
    margin-block-end: -1.5rem !important;
    filter: none;
  }

  .agency-block.agency-page-hero:has(.agency-video--banner)::after {
    display: none;
  }

  .agency-block.agency-page-hero:has(.agency-video--banner):not(.agency-page-hero--home):not(.agency-block--home-banner) + .agency-block,
  .agency-block.agency-page-hero:has(.agency-video--banner):not(.agency-page-hero--home):not(.agency-block--home-banner) + .kanbann-hash-anchor + .agency-block {
    padding-block-start: calc(var(--section-y, 4rem) + 2rem);
  }

  /* Inner banners: stable 100svh — no dvh / live header-offset (scroll jump). */
  .agency-block .agency-video--banner,
  .agency-block--video:has(.agency-video--banner .agency-head) .agency-video--banner,
  .agency-block.agency-page-hero:has(.agency-video--banner) .agency-video--banner,
  .agency-block.agency-page-hero--about:has(.agency-video--banner) .agency-video--banner,
  .agency-block.agency-page-hero--jobs:has(.agency-video--banner) .agency-video--banner {
    box-sizing: border-box;
    min-block-size: 100svh;
    height: 100svh;
    aspect-ratio: auto;
    max-block-size: none;
    padding-block: clamp(1.1rem, 4.5vw, 1.75rem);
    padding-inline: var(--space-sm);
  }

  .agency-block.agency-page-hero--about:has(.agency-video--banner) .agency-video--banner,
  .agency-block.agency-page-hero--jobs:has(.agency-video--banner) .agency-video--banner {
    align-items: end;
    padding-block-end: clamp(1.5rem, 5vw, 2.25rem);
  }

  /*
   * Home cinematic banner — full viewport, edge-to-edge cover (no letterbox strip).
   * Parent + frame + media all fill the first screen under the sticky header.
   */
  .site-main > .agency-block.agency-block--home-banner:first-child,
  .agency-block.agency-page-hero--home:has(.agency-video--banner),
  .agency-block.agency-block--home-banner:has(.agency-video--banner),
  .site-main > .agency-block.agency-page-hero:first-child:has(.agency-video--banner),
  .agency-block.agency-page-hero:has(.agency-video--banner),
  .agency-block.agency-block--inner-hero {
    box-sizing: border-box;
    min-block-size: 100svh;
  }

  .site-main > .agency-block.agency-block--home-banner:first-child .agency-video--banner,
  .agency-block.agency-page-hero--home:has(.agency-video--banner) .agency-video--banner,
  .agency-block.agency-block--home-banner:has(.agency-video--banner) .agency-video--banner {
    align-items: start;
    align-content: start;
    aspect-ratio: auto;
    box-sizing: border-box;
    min-block-size: 100svh;
    height: 100svh;
    max-block-size: none;
    padding-block-start: calc(
      var(--site-header-offset, 4.25rem) * 1.05 + clamp(3.5rem, 8vw, 5rem)
    );
    padding-block-end: clamp(1.5rem, 5vw, 2.25rem);
    padding-inline: var(--space-md);
  }

  .agency-block .agency-video__frame--banner .agency-video__media,
  .agency-block .agency-video__frame--banner .agency-video__poster,
  .agency-block .agency-video__frame--banner video,
  .agency-block .agency-video__frame--banner img,
  .agency-block.agency-block--inner-hero .agency-inner-hero__stage-media,
  .agency-block.agency-block--inner-hero .agency-inner-hero__feature-media {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
  }

  .agency-block.agency-page-hero--home .agency-video__frame--banner,
  .agency-block.agency-block--home-banner .agency-video__frame--banner,
  .agency-block .agency-video__frame--banner {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .agency-block.agency-page-hero--home .agency-video__frame--banner .agency-video__media,
  .agency-block.agency-page-hero--home .agency-video__frame--banner .agency-video__poster,
  .agency-block.agency-block--home-banner .agency-video__frame--banner .agency-video__media,
  .agency-block.agency-block--home-banner .agency-video__frame--banner .agency-video__poster,
  .agency-block.agency-page-hero--home .agency-video__frame--banner video,
  .agency-block.agency-block--home-banner .agency-video__frame--banner video,
  .agency-block.agency-page-hero--home .agency-video__frame--banner img,
  .agency-block.agency-block--home-banner .agency-video__frame--banner img {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
  }

  .agency-block.agency-page-hero:has(.agency-video--banner) .agency-video--banner .agency-head,
  .agency-block--video:has(.agency-video--banner .agency-head) .agency-video--banner .agency-head {
    max-width: min(36ch, 100%);
    margin-inline: auto;
    text-align: center;
  }

  .agency-block.agency-page-hero--about:has(.agency-video--banner) .agency-video--banner .agency-head,
  .agency-block.agency-page-hero--jobs:has(.agency-video--banner) .agency-video--banner .agency-head,
  .agency-block.agency-page-hero--home:has(.agency-video--banner) .agency-video--banner .agency-head,
  .agency-block.agency-block--home-banner:has(.agency-video--banner) .agency-video--banner .agency-head {
    margin-inline: 0;
    text-align: start;
    max-width: min(34ch, 100%);
  }

  .agency-block.agency-page-hero--jobs:has(.agency-video--banner) .agency-video--banner .agency-head {
    margin-inline-start: auto;
    text-align: end;
  }
}

.agency-jobs-intro .agency-head,
.agency-jobs-intro .agency-hero__content {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.agency-jobs-intro .agency-head__title,
.agency-jobs-intro .agency-hero--text-only .agency-head__title {
  max-width: 18ch;
  margin-inline: auto;
  text-align: center;
}

.agency-jobs-intro .agency-head__lead {
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 47.99em) {
  .agency-jobs-intro .agency-head__lead,
  .agency-page-intro .agency-head__lead {
    font-size: var(--step-0);
    max-width: 34ch;
    margin-inline: auto;
    padding-inline: var(--space-xs);
  }

  .agency-jobs-intro .agency-head__title,
  .agency-page-intro .agency-head__title {
    padding-inline: var(--space-xs);
  }
}

.agency-page-intro {
  padding-block: clamp(1.75rem, 4vw, 3rem);
}

.agency-page-intro .agency-head {
  max-width: 42rem;
}

.agency-page-intro .agency-head__title {
  margin-block-end: var(--space-sm);
}

/* Mission / values — clearer two-column cards under About banner. */
.agency-mission-values__intro,
.agency-split-copy__intro {
  margin-block-end: clamp(1.35rem, 3vw, 2.25rem);
}

.agency-mission-values {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 900px) {
  .agency-mission-values {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

.agency-mission-values__mission {
  display: grid;
  align-content: start;
  gap: var(--space-md);
  padding: clamp(1.5rem, 1.25rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  /* Deep navy band gradient (gold glow is radial, so no olive mid-mix). */
  background-image: var(
    --gradient-section-deep,
    linear-gradient(145deg, var(--color-navy, #003366) 0%, #0b1a33 100%)
  );
  background-size: cover;
  color: #ffffff;
  box-shadow: var(--shadow-md, var(--shadow-sm));
}

.agency-mission-values__kicker {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.78);
}

.agency-mission-values__statement {
  margin: 0;
  max-width: none;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.65rem);
  font-weight: 600;
  line-height: 1.45;
  color: #ffffff;
}

.agency-mission-values__list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
}

.agency-mission-values__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  margin: 0;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
}

.agency-mission-values__index {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent);
}

.agency-mission-values__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  font-weight: 600;
  color: var(--color-primary);
}

.agency-mission-values__body {
  margin: 0;
  max-width: none;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--color-muted);
}

.agency-split-copy--mission {
  gap: clamp(1.25rem, 3vw, 2rem);
}

.agency-split-copy--mission .agency-split-copy__col {
  padding: clamp(1.35rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.agency-split-copy--mission .agency-head__title {
  color: var(--color-text);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
}

.agency-split-copy--mission .agency-head__lead {
  color: var(--color-muted);
  margin: 0;
  max-width: none;
}
.agency-block.agency-page-hero .agency-head__title,
.agency-block.agency-page-hero .agency-head__lead,
.agency-block.agency-page-hero .agency-eyebrow {
  color: #ffffff !important;
  opacity: 1;
}

.agency-block.agency-page-hero .agency-head__lead {
  max-width: 100%;
  opacity: 0.92;
}

/* Soften poster/video under the veil so the diagonal band feels intentional. */
.agency-block.agency-page-hero .agency-video__frame--banner .agency-video__media,
.agency-block.agency-page-hero .agency-video__frame--banner .agency-video__poster {
  filter: saturate(0.85) brightness(0.72);
  transform: none;
  object-position: center top;
}

.agency-block--bg-accent-gradient {
  background-image: var(--gradient-hero);
}

.agency-block--bg-gradient.agency-block--cta {
  background-color: var(--color-vivid, var(--color-primary));
  background-image: var(--gradient-section-vivid, var(--gradient-hero));
}

/* Services cards — quieter corporate treatment. */
.agency-block .agency-card--service {
  position: relative;
  padding: var(--space-lg);
  border: 0;
  border-block-start: 3px solid transparent;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--color-surface-raised), var(--color-surface-raised)) padding-box,
    var(--gradient-accent) border-box;
  background-origin: border-box;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-normal) var(--ease-out),
    box-shadow var(--dur-normal) var(--ease-out);
}

.agency-block .agency-card--service:hover,
.agency-block .agency-card--service:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* -----------------------------------------------------------------------------
 * 29. EDITOR CHROME
 *
 * `editorStyle` is the same stylesheet as `style`, so these rules exist only for
 * the inspector chrome the generic editor bundle renders (build/editor.js). They
 * are outside `.agency-block` because the sidebar is not inside a block.
 * -------------------------------------------------------------------------- */

.agency-editor-repeater__actions {
  display: flex;
  gap: var(--space-2xs);
  margin-block-start: var(--space-2xs);
}

.agency-editor-hint {
  margin: 0;
  font-size: var(--step--1);
  opacity: 0.75;
}

/*
 * Preview HTML must not steal clicks (links/buttons/tabs). Clicks go to the
 * block wrapper from useBlockProps so the Block sidebar can select the section.
 */
.agency-editor-preview {
  position: relative;
  outline-offset: 2px;
}

.agency-editor-preview__canvas,
.agency-editor-preview__canvas * {
  pointer-events: none !important;
  cursor: default !important;
}

.agency-editor-preview__hint,
.agency-editor-preview__hint * {
  pointer-events: auto !important;
}

.block-editor-block-list__block.agency-editor-preview {
  cursor: pointer;
}

.block-editor-block-list__block.agency-editor-preview.is-selected {
  box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color, #3858e9);
}




/* -----------------------------------------------------------------------------
 * INNER HERO — overlapping copy + original-banner media panels on a curved stage
 * -------------------------------------------------------------------------- */

/*
 * Tuck first hero under the sticky header so the strip’s glass reads from load
 * (same as after a short scroll), without changing header colours.
 */
.site-main > .agency-block.agency-block--inner-hero:first-child,
.site-main > .agency-block.agency-block--home-banner:first-child,
.site-main > .agency-block.agency-page-hero:first-child:has(.agency-video--banner) {
  /* Match expanded header height at first paint. */
  margin-block-start: calc(-1 * var(--site-header-offset, 5.75rem) * 1.05);
}

.agency-block.agency-block--inner-hero {
  position: relative;
  overflow: visible;
  padding-block: 0;
  /* Curve lives on the stage so mosaic copy can hang into the next section. */
  clip-path: none !important;
  margin-block-end: 0;
  filter: none;
  /* Transparent — the cut reveals the next section, not a solid green wedge. */
  background: transparent !important;
  background-image: none !important;
}

.agency-block.agency-block--inner-hero::after {
  display: none !important;
}

.agency-inner-hero__stage {
  position: relative;
  /* Match home — fill the visible viewport on every screen size. */
  min-block-size: 100vh;
  min-block-size: 100svh;
  background: color-mix(in srgb, var(--color-primary-dark, #0f2f34) 88%, #000);
  display: grid;
  align-items: center;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.25rem), 0 100%);
  margin-block-end: -3.25rem;
}

@media (min-width: 768px) {
  .agency-inner-hero__stage {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5rem), 0 100%);
    margin-block-end: -5rem;
  }
}

.agency-inner-hero__stage-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Same Gemini corner cover on full-bleed stage banners — not mosaic panels. */
.agency-inner-hero__stage-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 8.5rem 6.5rem at calc(100% - 0.25rem) calc(100% - 0.25rem),
    color-mix(in srgb, var(--color-primary-dark, #0f2f34) 78%, transparent) 0%,
    color-mix(in srgb, var(--color-primary, #1d6066) 48%, transparent) 38%,
    transparent 70%
  );
}

.agency-block .agency-inner-hero__stage-media,
.agency-block .agency-inner-hero__feature-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  background: color-mix(in srgb, var(--color-primary) 70%, #000);
}

/* Keep the subject in-frame when cover crops a tall/wide clip. */
.agency-inner-hero--focus-left .agency-inner-hero__feature-media,
.agency-inner-hero--focus-left .agency-inner-hero__stage-media {
  object-position: left center;
}

.agency-inner-hero--focus-right .agency-inner-hero__feature-media,
.agency-inner-hero--focus-right .agency-inner-hero__stage-media {
  object-position: right center;
}

/* Soft legibility scrim + subtle Gemini corner (stage-frame ::after does the heavy lift). */
.agency-inner-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 8rem 6rem at calc(100% - 0.25rem) calc(100% - 0.25rem),
      color-mix(in srgb, var(--color-primary-dark, #0f2f34) 55%, transparent) 0%,
      transparent 68%
    ),
    linear-gradient(
      to top,
      rgb(0 0 0 / 0.28) 0%,
      transparent 48%
    );
}

/* Medium emerald–gold wash over mosaic stage banners (Services, Candidates, …). */
.agency-inner-hero--stage-tint:not(.agency-inner-hero--overlay):not(.agency-inner-hero--overlay-flat) .agency-inner-hero__veil {
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--color-primary-dark, #154850) 40%, transparent) 0%,
      color-mix(in srgb, var(--color-primary-soft, #1d827e) 28%, transparent) 42%,
      color-mix(in srgb, var(--color-gold, #c4a35a) 22%, transparent) 74%,
      color-mix(in srgb, var(--color-primary-dark, #154850) 34%, transparent) 100%
    ),
    linear-gradient(
      to top,
      color-mix(in srgb, var(--color-primary-dark, #154850) 16%, transparent) 0%,
      transparent 52%
    );
}

.agency-inner-hero--stage-tint:not(.agency-inner-hero--overlay):not(.agency-inner-hero--overlay-flat) .agency-inner-hero__stage-media {
  filter: saturate(1.12) contrast(1.04);
}

.agency-inner-hero__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: min(100% - 2.5rem, var(--measure-wide, 72rem));
  max-width: min(100% - 2.5rem, var(--measure-wide, 72rem));
  margin-inline: auto;
  /* Clear sticky header; mosaic sits mid-low so copy can hook into next section. */
  padding-block: calc(var(--site-header-offset, 5.75rem) * 1.05 + clamp(1.25rem, 3vw, 2.25rem))
    clamp(1.25rem, 3vw, 2.25rem);
  display: grid;
  align-content: end;
  justify-items: center;
  pointer-events: none;
  overflow: visible;
}

.agency-inner-hero__inner a,
.agency-inner-hero__inner button,
.agency-inner-hero__panel {
  pointer-events: auto;
}

/* Left / right mosaic placement on the stage. */
.agency-inner-hero--copy-bl .agency-inner-hero__inner,
.agency-inner-hero--copy-start .agency-inner-hero__inner {
  justify-items: start;
}

.agency-inner-hero--copy-br .agency-inner-hero__inner,
.agency-inner-hero--media-start .agency-inner-hero__inner,
.agency-inner-hero--media-end .agency-inner-hero__inner {
  justify-items: end;
}

.agency-inner-hero__mosaic {
  position: relative;
  /* +10% vs prior mosaic footprint. */
  width: min(50.6%, 33rem);
  max-width: 100%;
  /* Room for a taller copy panel that hooks 5% into the next section. */
  padding-block-end: clamp(3.5rem, 6vw, 5rem);
  overflow: visible;
}

.agency-inner-hero--copy-br .agency-inner-hero__mosaic,
.agency-inner-hero--media-start .agency-inner-hero__mosaic,
.agency-inner-hero--media-end .agency-inner-hero__mosaic {
  padding-inline: 0 clamp(1.75rem, 3.5vw, 3rem);
}

.agency-inner-hero--copy-bl .agency-inner-hero__mosaic,
.agency-inner-hero--copy-start .agency-inner-hero__mosaic {
  padding-inline: clamp(1.75rem, 3.5vw, 3rem) 0;
}

.agency-inner-hero__panel {
  min-width: 0;
  overflow: hidden;
  border-radius: 0.15rem;
  box-shadow: 0 14px 32px rgb(0 0 0 / 0.22);
}

.agency-inner-hero__panel--copy {
  background: color-mix(in srgb, var(--color-primary-dark, #0f2f34) 92%, #000);
  color: #fff;
  padding: 1.05rem 1.2rem 1.25rem;
  min-block-size: 6.25rem;
  display: grid;
  align-content: center;
  gap: 0.45rem;
}

.agency-inner-hero__title {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.4rem);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

.agency-inner-hero__lead {
  margin: 0;
  max-inline-size: 18rem;
  color: rgb(255 255 255 / 0.9);
  font-size: 0.84rem;
  line-height: 1.35;
}

/* Full-bleed banner + left-middle copy (Hire with Us). */
.agency-inner-hero--overlay .agency-inner-hero__veil {
  background:
    linear-gradient(
      105deg,
      rgb(7 18 24 / 0.58) 0%,
      rgb(7 18 24 / 0.32) 42%,
      rgb(7 18 24 / 0.12) 68%,
      transparent 100%
    ),
    linear-gradient(
      to top,
      rgb(7 18 24 / 0.42) 0%,
      transparent 48%
    );
}

/* Privacy (flat, no cut): right-side read veil. */
.agency-inner-hero--overlay-flat .agency-inner-hero__veil {
  background:
    linear-gradient(
      255deg,
      rgb(7 18 24 / 0.58) 0%,
      rgb(7 18 24 / 0.32) 42%,
      rgb(7 18 24 / 0.12) 68%,
      transparent 100%
    ),
    linear-gradient(
      to top,
      rgb(7 18 24 / 0.42) 0%,
      transparent 48%
    );
}

/* FAQ / overlay banners — same medium emerald–gold family as mosaic heroes. */
.agency-inner-hero--overlay.agency-inner-hero--stage-tint .agency-inner-hero__veil {
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--color-primary-dark, #154850) 42%, transparent) 0%,
      color-mix(in srgb, var(--color-primary-soft, #1d827e) 30%, transparent) 40%,
      color-mix(in srgb, var(--color-gold, #c4a35a) 24%, transparent) 72%,
      color-mix(in srgb, var(--color-primary-dark, #154850) 38%, transparent) 100%
    ),
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--color-primary-dark, #0f2f34) 36%, transparent) 0%,
      color-mix(in srgb, var(--color-primary, #1d6066) 16%, transparent) 46%,
      transparent 78%
    ),
    linear-gradient(
      to top,
      color-mix(in srgb, var(--color-primary-dark, #154850) 20%, transparent) 0%,
      transparent 52%
    );
}

.agency-inner-hero--overlay.agency-inner-hero--stage-tint .agency-inner-hero__stage-media {
  filter: saturate(1.14) contrast(1.05);
}

.agency-inner-hero--overlay-flat.agency-inner-hero--stage-tint .agency-inner-hero__veil {
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--color-primary-dark, #154850) 24%, transparent) 0%,
      color-mix(in srgb, var(--color-primary-soft, #1d827e) 14%, transparent) 42%,
      color-mix(in srgb, var(--color-gold, #c4a35a) 12%, transparent) 74%,
      color-mix(in srgb, var(--color-primary-dark, #154850) 18%, transparent) 100%
    ),
    linear-gradient(
      255deg,
      rgb(7 18 24 / 0.42) 0%,
      rgb(7 18 24 / 0.2) 44%,
      rgb(7 18 24 / 0.06) 70%,
      transparent 100%
    ),
    linear-gradient(
      to top,
      rgb(7 18 24 / 0.28) 0%,
      transparent 50%
    );
}

.agency-inner-hero--overlay .agency-inner-hero__inner,
.agency-inner-hero--overlay-flat .agency-inner-hero__inner {
  align-content: center;
  min-block-size: inherit;
  padding-block: calc(var(--site-header-offset, 5.75rem) * 1.05 + clamp(1rem, 2vw, 1.75rem))
    clamp(2rem, 5vw, 3.5rem);
}

.agency-inner-hero--overlay .agency-inner-hero__inner {
  justify-items: start;
}

.agency-inner-hero--overlay-flat .agency-inner-hero__inner {
  justify-items: end;
  text-align: end;
}

.agency-inner-hero__overlay {
  display: grid;
  gap: 0.65rem;
  justify-items: start;
  align-content: center;
  inline-size: min(100%, 38rem);
  max-inline-size: 100%;
  color: #fff;
}

.agency-inner-hero--overlay-flat .agency-inner-hero__overlay {
  justify-items: end;
  text-align: end;
}

.agency-inner-hero--overlay .agency-inner-hero__title,
.agency-inner-hero--overlay-flat .agency-inner-hero__title {
  /* Was 2.85rem — tuned down for inner pages (home banner stays biggest). */
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.35rem);
  font-weight: 600;
  line-height: 1.14;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.35);
}

.agency-inner-hero--overlay .agency-inner-hero__lead,
.agency-inner-hero--overlay-flat .agency-inner-hero__lead {
  max-inline-size: 36rem;
  font-size: clamp(1rem, 0.92rem + 0.45vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
  color: rgb(255 255 255 / 0.92);
  text-wrap: pretty;
}

/* Privacy: no diagonal curve cut, no under-banner wash. */
.agency-inner-hero--overlay-flat .agency-inner-hero__stage {
  clip-path: none !important;
  margin-block-end: 0;
  filter: none;
}

.agency-block.agency-block--inner-hero.agency-inner-hero--overlay-flat {
  background: transparent !important;
  background-image: none !important;
}

.agency-block.agency-block--inner-hero.agency-inner-hero--overlay-flat + .agency-block,
.agency-block.agency-block--inner-hero.agency-inner-hero--overlay-flat + .kanbann-hash-anchor + .agency-block {
  padding-block-start: var(--section-y, 4rem);
}

.agency-inner-hero__panel--media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-block-size: 0;
  background: color-mix(in srgb, var(--color-primary) 55%, #000);
}

.agency-inner-hero__panel--media .agency-inner-hero__feature-media {
  position: absolute;
  inset: 0;
}

/*
 * Mosaic clips are 16:9 — show the whole frame (no side/top cropping) and
 * centre it; the panel background fills any letterbox for non-16:9 sources.
 */
.agency-block .agency-inner-hero__panel--media video.agency-inner-hero__feature-media {
  object-fit: contain;
  object-position: center;
}

/*
 * Deep clear emerald + gold wash over mosaic panel media (same family as
 * 404 / intro cinematic scrim) so blue/grey clips read on-brand.
 */
.agency-inner-hero__panel--media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--color-primary-dark, #154850) 62%, transparent) 0%,
      color-mix(in srgb, var(--color-primary-soft, #1d827e) 34%, transparent) 38%,
      color-mix(in srgb, var(--color-gold, #c4a35a) 36%, transparent) 70%,
      color-mix(in srgb, var(--color-primary-dark, #154850) 55%, transparent) 100%
    );
}

/*
 * Outside corner overlap — copy anchored past the media corner onto the stage,
 * covering only a small bottom corner of the video so on-video text stays clear.
 */
.agency-inner-hero--copy-br .agency-inner-hero__panel--copy,
.agency-inner-hero--media-start .agency-inner-hero__panel--copy,
.agency-inner-hero--media-end .agency-inner-hero__panel--copy {
  position: absolute;
  z-index: 3;
  right: 0;
  /* Hook ~5% of mosaic height into the section below the banner. */
  bottom: -5%;
  width: min(64%, 17rem);
  box-shadow: 0 18px 36px rgb(0 0 0 / 0.28);
}

.agency-inner-hero--copy-bl .agency-inner-hero__panel--copy,
.agency-inner-hero--copy-start .agency-inner-hero__panel--copy {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: -5%;
  width: min(64%, 17rem);
  box-shadow: 0 18px 36px rgb(0 0 0 / 0.28);
}

@media (max-width: 47.99em) {
  .site-main > .agency-block.agency-block--inner-hero:first-child,
  .site-main > .agency-block.agency-block--home-banner:first-child {
    margin-block-start: calc(-1 * var(--site-header-offset, 5.75rem) * 1.05);
  }

  .agency-block.agency-block--inner-hero {
    overflow: visible;
  }

  .agency-block.agency-block--inner-hero:not(.agency-inner-hero--overlay-flat) + .agency-block,
  .agency-block.agency-block--inner-hero:not(.agency-inner-hero--overlay-flat) + .kanbann-hash-anchor + .agency-block {
    padding-block-start: calc(var(--section-y, 4rem) + 2rem);
  }

  /* Stage curve on phones — same cut as single-job banner. */
  .agency-inner-hero__stage {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), 0 100%) !important;
    margin-block-end: -1.5rem !important;
    filter: none;
    min-block-size: 100svh;
  }

  .agency-inner-hero--overlay-flat .agency-inner-hero__stage {
    clip-path: none !important;
    margin-block-end: 0 !important;
  }

  .agency-block.agency-block--inner-hero.agency-inner-hero--overlay-flat + .agency-block,
  .agency-block.agency-block--inner-hero.agency-inner-hero--overlay-flat + .kanbann-hash-anchor + .agency-block {
    padding-block-start: var(--section-y, 4rem);
  }

  .agency-block .agency-inner-hero__stage-media,
  .agency-block .agency-inner-hero__feature-media {
    object-fit: cover;
    object-position: center center;
  }

  .agency-inner-hero__inner {
    width: min(100% - 2.5rem, var(--measure-wide, 72rem));
    max-width: min(100% - 2.5rem, var(--measure-wide, 72rem));
  }

  /* Hire-with-Us-style overlay on mosaic pages for phones. */
  .agency-inner-hero--overlay .agency-inner-hero__inner,
  .agency-inner-hero--overlay-flat .agency-inner-hero__inner,
  .agency-inner-hero--copy-bl .agency-inner-hero__inner,
  .agency-inner-hero--copy-br .agency-inner-hero__inner,
  .agency-inner-hero--copy-start .agency-inner-hero__inner,
  .agency-inner-hero--media-start .agency-inner-hero__inner,
  .agency-inner-hero--media-end .agency-inner-hero__inner {
    align-content: center;
    justify-items: start;
    padding-block: calc(var(--site-header-offset, 5.75rem) * 1.05 + 1rem) 2rem;
    padding-inline: clamp(1.15rem, 5vw, 1.75rem);
  }

  .agency-inner-hero__overlay {
    inline-size: min(100%, 22rem);
    gap: 0.5rem;
  }

  .agency-inner-hero--overlay .agency-inner-hero__title,
  .agency-inner-hero--overlay-flat .agency-inner-hero__title {
    font-size: clamp(1.55rem, 1.2rem + 3.2vw, 2.15rem);
  }

  .agency-inner-hero--overlay .agency-inner-hero__lead,
  .agency-inner-hero--overlay-flat .agency-inner-hero__lead {
    font-size: clamp(0.95rem, 0.88rem + 0.6vw, 1.1rem);
    max-inline-size: 34ch;
  }

  /*
   * Mosaic layouts on phones: hide mosaic video cards entirely.
   * Banner stage stays full-bleed; intro copy overlays like Hire with Us.
   */
  .agency-inner-hero--copy-bl .agency-inner-hero__panel--media,
  .agency-inner-hero--copy-br .agency-inner-hero__panel--media,
  .agency-inner-hero--copy-start .agency-inner-hero__panel--media,
  .agency-inner-hero--media-start .agency-inner-hero__panel--media,
  .agency-inner-hero--media-end .agency-inner-hero__panel--media {
    display: none !important;
  }

  .agency-inner-hero--copy-bl .agency-inner-hero__mosaic,
  .agency-inner-hero--copy-br .agency-inner-hero__mosaic,
  .agency-inner-hero--copy-start .agency-inner-hero__mosaic,
  .agency-inner-hero--media-start .agency-inner-hero__mosaic,
  .agency-inner-hero--media-end .agency-inner-hero__mosaic {
    width: min(100%, 22rem);
    max-width: 100%;
    margin: 0;
    padding: 0 !important;
    overflow: visible;
  }

  .agency-inner-hero--copy-bl .agency-inner-hero__panel--copy,
  .agency-inner-hero--copy-br .agency-inner-hero__panel--copy,
  .agency-inner-hero--copy-start .agency-inner-hero__panel--copy,
  .agency-inner-hero--media-start .agency-inner-hero__panel--copy,
  .agency-inner-hero--media-end .agency-inner-hero__panel--copy {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    min-block-size: 0;
    /* Translucent navy plate: copy stays legible over bright frames (desks, windows). */
    padding: 0.9rem 1rem 1rem;
    background: rgb(11 26 51 / 0.58);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 0;
    border-radius: 0.15rem;
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.22);
    color: #ffffff;
  }

  .agency-inner-hero--copy-bl .agency-inner-hero__title,
  .agency-inner-hero--copy-br .agency-inner-hero__title,
  .agency-inner-hero--copy-start .agency-inner-hero__title,
  .agency-inner-hero--media-start .agency-inner-hero__title,
  .agency-inner-hero--media-end .agency-inner-hero__title {
    color: #ffffff;
    font-size: clamp(1.55rem, 1.2rem + 3.2vw, 2.15rem);
    font-weight: 600;
    line-height: 1.12;
    text-shadow: 0 2px 18px rgb(0 0 0 / 0.35);
  }

  .agency-inner-hero--copy-bl .agency-inner-hero__lead,
  .agency-inner-hero--copy-br .agency-inner-hero__lead,
  .agency-inner-hero--copy-start .agency-inner-hero__lead,
  .agency-inner-hero--media-start .agency-inner-hero__lead,
  .agency-inner-hero--media-end .agency-inner-hero__lead {
    color: rgb(255 255 255 / 0.92);
    font-size: clamp(0.95rem, 0.88rem + 0.6vw, 1.1rem);
    font-weight: 600;
    line-height: 1.4;
    max-inline-size: 34ch;
    text-wrap: pretty;
  }

  /* Readable scrim over stage when mosaic cards are hidden. */
  .agency-inner-hero--copy-bl .agency-inner-hero__veil,
  .agency-inner-hero--copy-br .agency-inner-hero__veil,
  .agency-inner-hero--copy-start .agency-inner-hero__veil,
  .agency-inner-hero--media-start .agency-inner-hero__veil,
  .agency-inner-hero--media-end .agency-inner-hero__veil {
    /*
     * Phone copy sits mid-stage over whatever the clip shows (often bright
     * desks / windows), so the navy scrim must hold through the middle band,
     * not only the bottom edge.
     */
    background:
      linear-gradient(
        105deg,
        rgb(11 26 51 / 0.62) 0%,
        rgb(11 26 51 / 0.4) 42%,
        rgb(11 26 51 / 0.18) 68%,
        transparent 100%
      ),
      linear-gradient(
        to top,
        rgb(11 26 51 / 0.74) 0%,
        rgb(11 26 51 / 0.58) 38%,
        rgb(11 26 51 / 0.3) 66%,
        transparent 100%
      );
  }

  .agency-impact-mosaic__img,
  .agency-impact-mosaic__video {
    min-block-size: 8rem;
    max-block-size: 12.5rem;
  }
}

/*
 * Home banner fills the first screen even when tucked under the sticky header.
 * Negative margin pulls the block up by ~header height; min-height must add that
 * back or a strip of the next section / body shows at the fold (light = white).
 * Prefer lvh last so mobile browser chrome show/hide cannot leave a body strip.
 * Desktop / tablet only — phones use the shorter contain-friendly rules above.
 */
@media (min-width: 48em) {
  .site-main > .agency-block.agency-block--home-banner:first-child,
  .agency-block.agency-block--home-banner:has(.agency-video--banner) {
    box-sizing: border-box;
    min-block-size: calc(100svh + (var(--site-header-offset, 4.25rem) * 1.05));
    min-block-size: calc(100dvh + (var(--site-header-offset, 4.25rem) * 1.05));
    min-block-size: calc(100lvh + (var(--site-header-offset, 4.25rem) * 1.05));
  }

  .site-main > .agency-block.agency-block--home-banner:first-child .agency-video--banner,
  .agency-block.agency-block--home-banner:has(.agency-video--banner) .agency-video--banner {
    box-sizing: border-box;
    min-block-size: calc(100svh + (var(--site-header-offset, 4.25rem) * 1.05));
    min-block-size: calc(100dvh + (var(--site-header-offset, 4.25rem) * 1.05));
    min-block-size: calc(100lvh + (var(--site-header-offset, 4.25rem) * 1.05));
    height: calc(100svh + (var(--site-header-offset, 4.25rem) * 1.05));
    height: calc(100dvh + (var(--site-header-offset, 4.25rem) * 1.05));
    height: calc(100lvh + (var(--site-header-offset, 4.25rem) * 1.05));
    max-block-size: none;
  }
}

.agency-block.agency-block--home-banner {
  clip-path: none !important;
  margin-block-end: 0;
  filter: none;
  background: var(--color-primary-dark, #0b1718);
}

.agency-block.agency-block--home-banner::after {
  display: none !important;
}

/* -----------------------------------------------------------------------------
 * 29. IMPACT MOSAIC — Korn Ferry About story grid
 * -------------------------------------------------------------------------- */

.agency-block--impact-mosaic .agency-head {
  margin-block-end: var(--space-lg);
}

.agency-impact-mosaic {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .agency-impact-mosaic {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(7.5rem, auto);
  }

  .agency-impact-mosaic__cell--cta { grid-column: 1 / span 5; grid-row: 1; }
  .agency-impact-mosaic__cell--stat-dark { grid-column: 6 / span 3; grid-row: 1; }
  .agency-impact-mosaic__cell--stat-tr { grid-column: 9 / span 4; grid-row: 1; }
  .agency-impact-mosaic__cell--media:not(.agency-impact-mosaic__cell--media-wide) { grid-column: 9 / span 4; grid-row: 1; }
  .agency-impact-mosaic__cell--stat-bl { grid-column: 1 / span 3; grid-row: 2; }
  .agency-impact-mosaic__cell--media-wide { grid-column: 4 / span 6; grid-row: 2; }
  .agency-impact-mosaic__cell--stat-br { grid-column: 10 / span 3; grid-row: 2; }
}

.agency-impact-mosaic__cell {
  min-width: 0;
  overflow: hidden;
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem);
}

.agency-impact-mosaic__cell--cta {
  background-image: var(--gradient-section-deep, var(--gradient-hero));
  color: var(--color-primary-contrast);
  display: grid;
  align-content: space-between;
  gap: var(--space-md);
  min-block-size: 10rem;
}

.agency-impact-mosaic__cta-title {
  margin: 0;
  font-family: var(--font-display);
  /* Was 2.15rem — matched to the dialled-down scale. */
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  line-height: 1.15;
}

.agency-impact-mosaic__cta-title em {
  font-style: normal;
  color: color-mix(in srgb, var(--color-accent) 85%, #fff);
}

.agency-impact-mosaic__cell--stat-dark {
  /* Steel → corporate navy; counters pinned gold so they never sink into the tile. */
  background-image: linear-gradient(
    180deg,
    var(--color-steel, #1e4e79) 0%,
    var(--color-navy, #003366) 100%
  );
  color: #ffffff;
}

.agency-block .agency-impact-mosaic__cell--stat-dark .agency-impact-mosaic__value,
.agency-block .agency-impact-mosaic__cell--stat-dark .agency-counter,
.agency-block .agency-impact-mosaic__cell--stat-dark .agency-counter__value {
  color: var(--color-gold-light, #e9c45e);
}

.agency-block .agency-impact-mosaic__cell--stat-dark .agency-impact-mosaic__label {
  color: rgb(255 255 255 / 0.9);
}

.agency-impact-mosaic__cell--stat-light {
  background-image: var(--gradient-section-tint, var(--gradient-section-soft));
  color: var(--color-text);
}

.agency-impact-mosaic__value {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  /* Was 2.9rem — reduced so the numeral matches the band it sits in. */
  font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-gold-light, var(--color-gold, var(--color-accent)));
}

.agency-impact-mosaic__cell--stat-light .agency-impact-mosaic__value {
  color: var(--color-primary);
}

.agency-impact-mosaic__cell--stat-light .agency-impact-mosaic__label {
  color: var(--color-text);
}

.agency-impact-mosaic__label {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.4;
}

.agency-impact-mosaic__cell--media {
  padding: 0;
  background: var(--color-primary-dark, #123f45);
}

.agency-impact-mosaic__img,
.agency-impact-mosaic__video {
  display: block;
  width: 100%;
  height: 100%;
  min-block-size: 7.5rem;
  max-block-size: 12rem;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 768px) {
  .agency-impact-mosaic__cell--media:not(.agency-impact-mosaic__cell--media-wide) .agency-impact-mosaic__img,
  .agency-impact-mosaic__cell--media:not(.agency-impact-mosaic__cell--media-wide) .agency-impact-mosaic__video {
    max-block-size: 10rem;
  }

  .agency-impact-mosaic__cell--media-wide .agency-impact-mosaic__img,
  .agency-impact-mosaic__cell--media-wide .agency-impact-mosaic__video {
    max-block-size: 11rem;
  }
}

[data-theme="dark"] .agency-impact-mosaic__cell--stat-light {
  color: var(--color-text);
  background-image: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-surface-raised) 92%, var(--color-primary)) 0%,
    var(--color-surface-raised) 100%
  );
}

[data-theme="dark"] .agency-impact-mosaic__cell--stat-light .agency-impact-mosaic__value,
[data-theme="dark"] .agency-block .agency-impact-mosaic__cell--stat-light .agency-counter,
[data-theme="dark"] .agency-block .agency-impact-mosaic__cell--stat-light .agency-counter__value {
  color: var(--color-gold-light, var(--color-gold, var(--color-accent)));
}

[data-theme="dark"] .agency-impact-mosaic__cell--stat-light .agency-impact-mosaic__label {
  color: var(--color-muted);
}

/* Band tone itself is owned in §2 (steel-horizon gradient); only pin the ink here. */
[data-theme="dark"] .agency-block--bg-raised {
  color: var(--color-text);
}

/* Accordion / chapter index — stay readable on dark surfaces. */
[data-theme="dark"] .agency-block .agency-accordion__summary,
[data-theme="dark"] .agency-block .agency-chapters__index a {
  color: var(--color-text);
}

[data-theme="dark"] .agency-block .agency-accordion__panel,
[data-theme="dark"] .agency-block .agency-accordion__panel p {
  color: var(--color-muted);
}

[data-theme="dark"] .agency-block .agency-chapters__index a[aria-current="true"],
[data-theme="dark"] .agency-block .agency-chapters__index a:hover,
[data-theme="dark"] .agency-block .agency-chapters__index a:focus-visible {
  color: var(--color-gold-light, var(--color-accent));
}

[data-theme="dark"] .agency-locations__tab {
  color: var(--color-muted);
}

[data-theme="dark"] .agency-locations__tab[aria-selected="true"],
[data-theme="dark"] .agency-locations__tab:hover,
[data-theme="dark"] .agency-locations__tab:focus-visible {
  color: var(--color-text);
}

[data-theme="dark"] .agency-card--team .agency-card__title,
[data-theme="dark"] .agency-card--team .agency-card__org,
[data-theme="dark"] .agency-card--team .agency-card__text {
  color: var(--color-text);
}

[data-theme="dark"] .agency-card--team .agency-card__org,
[data-theme="dark"] .agency-card--team .agency-card__text {
  color: var(--color-muted);
}

/* -----------------------------------------------------------------------------
 * 30. OUR LOCATIONS — contact map band
 * -------------------------------------------------------------------------- */

.agency-block--locations .agency-head {
  margin-block-end: var(--space-lg);
}

.agency-locations__tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin: 0 0 var(--space-md);
  padding: 0.65rem 0 0.35rem;
  border-top: 1px solid var(--color-border);
}

.agency-locations__tab {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-weight: 600;
  font-size: var(--step--1);
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  min-height: 2.75rem;
  min-inline-size: 3.25rem;
  transition:
    color 220ms var(--ease-out),
    background-color 220ms var(--ease-out),
    transform 220ms var(--ease-out);
}

.agency-locations__flag {
  display: block;
  width: 1.75rem;
  height: 1.2rem;
  border-radius: 0.15rem;
  object-fit: cover;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-border) 65%, transparent);
}

.agency-locations__tab:hover {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-border) 40%, transparent);
}

.agency-locations__tab.is-active,
.agency-locations__tab[aria-selected="true"] {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  transform: translateY(-1px);
}

.agency-locations__tab.is-active::after,
.agency-locations__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 18%;
  inset-block-end: 0.2rem;
  block-size: 2px;
  border-radius: 999px;
  background: var(--color-gold, var(--color-accent));
  animation: agency-location-tab-underline 480ms var(--ease-out);
}

.agency-locations__tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.agency-locations__panel {
  display: none;
  position: relative;
  min-block-size: 0;
  overflow: hidden;
  background: var(--color-surface-raised, #f3f5f8);
  opacity: 0;
  transform: translateY(10px);
}

.agency-locations__panel.is-active {
  display: grid;
  grid-template-columns: 1fr;
  animation: agency-location-panel-in 600ms var(--ease-out) forwards;
}

/* Phones: stack address card above a full-width map (no absolute crop). */
@media (max-width: 47.99em) {
  .agency-locations__panel {
    overflow: visible;
  }

  .agency-locations__panel.is-active {
    gap: 0;
  }

  .agency-locations__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
  }

  .agency-locations__map {
    position: relative;
    inset: auto;
    width: 100%;
    min-block-size: clamp(14rem, 58vw, 20rem);
    aspect-ratio: 4 / 3;
    background: var(--color-surface, #e8eef0);
  }

  .agency-locations__map iframe {
    width: 100%;
    height: 100%;
    min-block-size: inherit;
  }
}

@keyframes agency-location-tab-underline {
  from {
    transform: scaleX(0.35);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes agency-location-panel-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agency-locations__tab,
  .agency-locations__tab.is-active::after,
  .agency-locations__panel.is-active {
    transition: none;
    animation: none;
  }

  .agency-locations__panel.is-active {
    opacity: 1;
    transform: none;
  }
}

.agency-locations__map {
  position: relative;
  min-block-size: clamp(14rem, 42vw, 20rem);
  background: var(--color-surface, #e8eef0);
}

.agency-locations__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-block-size: inherit;
  border: 0;
}

.agency-locations__card {
  position: relative;
  z-index: 1;
  align-self: stretch;
  width: 100%;
  margin: 0;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  background: var(--color-primary-dark, #123f45);
  color: #ffffff;
  display: grid;
  align-content: start;
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .agency-locations__panel.is-active {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    min-block-size: 22rem;
    overflow: hidden;
  }

  .agency-locations__map {
    position: relative;
    min-block-size: 22rem;
    height: 100%;
    aspect-ratio: auto;
  }

  .agency-locations__card {
    width: auto;
  }
}

.agency-locations__city {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
}

.agency-locations__address {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: #d7e0ec;
}

.agency-locations__maps {
  margin-block-start: var(--space-sm);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

.agency-legal-copy {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
  width: 100%;
  margin-inline: auto;
  font-size: var(--step-0);
  line-height: 1.65;
  text-align: start;
  box-sizing: border-box;
}

.agency-legal-copy p {
  margin: 0;
}

/* Privacy / Jobs / FAQ / content bands — keep copy clear of the viewport edge. */
.agency-block--content > .agency-block__inner,
.agency-block--jobs > .agency-block__inner,
.agency-block--faq > .agency-block__inner,
.agency-block--hero.agency-jobs-intro > .agency-block__inner,
.agency-block--cta > .agency-block__inner,
body.privacy-policy .agency-block:not(.agency-block--inner-hero):not(.agency-block--video) > .agency-block__inner:not(.agency-inner-hero__inner),
body.page-id-23 .agency-block:not(.agency-block--inner-hero):not(.agency-block--video) > .agency-block__inner:not(.agency-inner-hero__inner),
body.page-id-18 .agency-block:not(.agency-block--inner-hero):not(.agency-block--video) > .agency-block__inner:not(.agency-inner-hero__inner) {
  padding-inline: clamp(1.25rem, 5.5vw, 2.75rem);
  box-sizing: border-box;
}

.agency-block--content .agency-head,
.agency-block--faq .agency-head,
.agency-jobs-intro .agency-head {
  text-align: center;
  margin-inline: auto;
}

.agency-block--content .agency-legal-copy,
.agency-legal-copy {
  text-align: start;
  margin-inline: auto;
}

/*
 * Centred content variant.
 *
 * Opt-in via `className: "agency-content--centered"` on the agency/content
 * block. Pairs with Locations::content() which flips the head to centred
 * and tags the body wrapper with `agency-content__body--center`.
 * Used by the Privacy page so the legal copy sits on the vertical centre
 * line of the section rather than hugging the left margin, matching the
 * client brief "privacy policy page content is not center aligned".
 */
.agency-block.agency-content--centered .agency-head,
.agency-block.agency-content--centered .agency-head__title,
.agency-block.agency-content--centered .agency-head__lead {
  text-align: center;
}

.agency-block.agency-content--centered .agency-content__body--center {
  text-align: center;
  margin-inline: auto;
}

.agency-block.agency-content--centered .agency-content__body--center p {
  margin-inline: auto;
  max-inline-size: min(100%, 56rem);
}

.agency-split-copy {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  text-align: start;
}

@media (min-width: 768px) {
  .agency-split-copy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
  }

  .agency-split-copy--staffing {
    grid-template-columns: minmax(12rem, 0.9fr) minmax(0, 1.4fr);
  }
}

.agency-split-copy__col .agency-head {
  margin: 0;
}

.agency-split-copy__col .agency-head__title {
  margin-block-end: var(--space-sm);
  text-align: start;
}

.agency-split-copy__col .agency-head__lead,
.agency-split-copy__col .agency-content__body {
  margin: 0;
  max-width: none;
  text-align: start;
}

/*
 * Statement band — one deck slide as a sentence pair ("The problem isn't your
 * people." / "The problem is the way the organization is structured around
 * them."). Larger title, lead sized as copy and aligned to the title baseline.
 */
.agency-split-copy--statement .agency-head__title {
  font-size: var(--step-4);
  line-height: 1.1;
  text-wrap: balance;
}

.agency-split-copy--statement .agency-head__lead {
  font-size: var(--step-1);
  line-height: 1.5;
}

@media (min-width: 768px) {
  .agency-split-copy--statement {
    align-items: end;
  }
}

/* Inline "more" link used inside rich tab / chapter copy. */
.agency-link-arrow {
  display: inline-block;
  margin-block-start: var(--space-xs);
  font-weight: var(--weight-cta, 600);
  letter-spacing: var(--tracking-cta, 0.08em);
  text-transform: uppercase;
  font-size: var(--step--1);
  color: var(--color-steel, var(--color-primary));
  text-decoration: none;
  border-block-end: 2px solid var(--color-accent, #deac2b);
}

.agency-link-arrow:hover,
.agency-link-arrow:focus-visible {
  color: var(--color-primary-dark, #0b1a33);
  border-color: var(--color-gold-dark, var(--color-accent));
}

.agency-video--image .agency-video__frame--banner .agency-video__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.agency-working {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  overflow: hidden;
}

@media (min-width: 768px) {
  .agency-working {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

.agency-working__media {
  min-block-size: 14rem;
  background: var(--color-primary-dark, #123f45);
}

.agency-working__img {
  display: block;
  width: 100%;
  height: 100%;
  min-block-size: 14rem;
  object-fit: cover;
}

.agency-working__copy {
  display: grid;
  align-content: center;
  gap: var(--space-md);
  padding: clamp(1.5rem, 1.2rem + 2vw, 2.75rem);
  background-image: var(--gradient-section-deep, var(--gradient-hero));
  color: #ffffff;
}

.agency-working__title {
  margin: 0;
  font-family: var(--font-display);
  /* Was 2.4rem — reduced to match the dialled-down scale. */
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.15;
}

.agency-working__title em {
  font-style: normal;
  color: var(--color-accent);
}

.agency-working__body {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.55;
  color: #d7e0ec;
}

.agency-working__actions {
  margin: 0;
}

.agency-join-apply {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  overflow: hidden;
}

@media (min-width: 768px) {
  .agency-join-apply {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

.agency-join-apply__form-pane {
  padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
  background: color-mix(in srgb, var(--color-primary-soft, #51c8cc) 10%, #ffffff);
}

.agency-join-apply__title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  color: var(--color-primary);
}

.agency-join-apply__form {
  display: grid;
  gap: var(--space-sm);
}

.agency-join-apply__form .agency-form__field {
  margin: 0;
}

.agency-join-apply__form select {
  width: 100%;
  border: 1.5px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  border-radius: var(--radius-sm);
  background: #ffffff;
  font: inherit;
}

.agency-join-apply__cv-note {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-muted);
}

.agency-join-apply__quote-pane {
  display: grid;
  align-content: center;
  gap: var(--space-sm);
  padding: clamp(1.5rem, 1.2rem + 2vw, 2.5rem);
  background-image: var(--gradient-section-deep, var(--gradient-hero));
  color: #ffffff;
}

.agency-join-apply__stars {
  margin: 0;
  color: var(--color-gold-light, var(--color-accent));
  letter-spacing: 0.12em;
}

.agency-join-apply__quote {
  margin: 0;
  color: #ffffff;
}

.agency-join-apply__quote p,
.agency-join-apply__quote footer,
.agency-join-apply__quote cite {
  color: #ffffff;
}

.agency-join-apply__quote p {
  margin: 0 0 var(--space-md);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.5;
  opacity: 0.95;
}

.agency-join-apply__quote cite {
  font-style: normal;
  font-weight: 600;
  color: var(--color-gold-light, var(--color-accent));
}

/* -----------------------------------------------------------------------------
 * Dark theme contrast hardening � light ink on white cards, readable hovers.
 * -------------------------------------------------------------------------- */
[data-theme="dark"] .agency-block--bg-inverse .agency-card--quote,
[data-theme="dark"] .agency-block--bg-inverse .agency-card--quote .agency-quote__text,
[data-theme="dark"] .agency-block--bg-inverse .agency-card--quote .agency-quote__name,
[data-theme="dark"] .agency-block--bg-inverse .agency-card--collage {
  color: var(--color-text, #0b1a33);
}

[data-theme="dark"] .agency-block--bg-inverse .agency-card--quote .agency-quote__role {
  color: #4b6467;
}

[data-theme="dark"] .agency-block .agency-card__title,
[data-theme="dark"] .agency-block .agency-card__title a {
  color: var(--color-text);
}

[data-theme="dark"] .agency-block .agency-head__title {
  color: var(--color-primary-light, var(--color-text));
}

[data-theme="dark"] .agency-block .agency-head__title em,
[data-theme="dark"] .agency-block .agency-head__title .agency-head__em {
  color: var(--color-gold-light, var(--color-accent));
}

[data-theme="dark"] .agency-block.agency-block--bg-inverse .agency-head__title,
[data-theme="dark"] .agency-block.agency-block--bg-gradient .agency-head__title,
[data-theme="dark"] .agency-block.agency-block--bg-accent .agency-head__title,
[data-theme="dark"] .agency-block.agency-block--bg-inverse .agency-head__lead,
[data-theme="dark"] .agency-block.agency-block--bg-gradient .agency-head__lead,
[data-theme="dark"] .agency-block.agency-block--bg-accent .agency-head__lead {
  color: var(--color-primary-contrast);
}

[data-theme="dark"] .agency-block .agency-card__text,
[data-theme="dark"] .agency-block .agency-head__lead,
[data-theme="dark"] .agency-block .agency-card__org {
  color: var(--color-muted);
}

/*
 * Accent hover for prose/heading links only. Never paint .agency-btn anchors —
 * their ::before fill is gold and accent text becomes gold-on-gold.
 */
[data-theme="dark"] .agency-block .agency-card__title a:hover,
[data-theme="dark"] .agency-block .agency-card__link a:hover,
[data-theme="dark"] .agency-block a:hover:not(.agency-btn) {
  color: var(--color-accent);
}

[data-theme="dark"] .agency-block .agency-btn--primary:hover,
[data-theme="dark"] .agency-block .agency-btn--primary:focus-visible,
[data-theme="dark"] .agency-block .agency-btn--outline:hover,
[data-theme="dark"] .agency-block .agency-btn--outline:focus-visible,
[data-theme="dark"] .agency-block .agency-btn--ghost:hover,
[data-theme="dark"] .agency-block .agency-btn--ghost:focus-visible,
[data-theme="dark"] .agency-block .agency-btn--gradient:hover,
[data-theme="dark"] .agency-block .agency-btn--gradient:focus-visible {
  color: var(--color-accent-contrast);
}

[data-theme="dark"] .agency-block .agency-btn--secondary:hover,
[data-theme="dark"] .agency-block .agency-btn--secondary:focus-visible {
  color: var(--color-primary-contrast);
}

[data-theme="dark"] .agency-split-copy--mission .agency-split-copy__col {
  background: var(--color-surface-raised);
  border-color: var(--color-border);
}

[data-theme="dark"] .agency-page-intro .agency-head__title {
  color: var(--color-primary-light, var(--color-primary-soft, #ffffff));
}

[data-theme="dark"] .agency-page-intro .agency-head__lead {
  color: var(--color-muted);
}

/* Dark mode: invert hardcoded light-theme ink on surface/raised sections. */
[data-theme="dark"] .agency-block--bg-surface .agency-showcase__body,
[data-theme="dark"] .agency-block--bg-raised .agency-showcase__body {
  color: var(--color-muted);
}

[data-theme="dark"] .agency-block .agency-chapter__title,
[data-theme="dark"] .agency-block .agency-process__title,
[data-theme="dark"] .agency-block .agency-feature__title,
[data-theme="dark"] .agency-block .agency-tabs__title,
[data-theme="dark"] .agency-mission-values__title,
[data-theme="dark"] .agency-split-copy__col .agency-head__title,
[data-theme="dark"] .agency-page-intro .agency-head__title,
[data-theme="dark"] .agency-join-apply__form-pane .agency-join-apply__title,
[data-theme="dark"] .agency-legal-copy,
[data-theme="dark"] .agency-legal-copy h2,
[data-theme="dark"] .agency-legal-copy h3,
[data-theme="dark"] .agency-block h2,
[data-theme="dark"] .agency-block h3,
[data-theme="dark"] .agency-block h4 {
  color: var(--color-text);
}

/* Dark panes with their own light ink must not inherit the global heading flip. */
[data-theme="dark"] .agency-working__copy,
[data-theme="dark"] .agency-working__copy .agency-working__title,
[data-theme="dark"] .agency-working__copy .agency-working__body,
[data-theme="dark"] .agency-join-apply__quote-pane,
[data-theme="dark"] .agency-join-apply__quote-pane p,
[data-theme="dark"] .agency-join-apply__quote-pane footer,
[data-theme="dark"] .agency-join-apply__quote-pane cite,
[data-theme="dark"] .agency-join-apply__quote-pane h2,
[data-theme="dark"] .agency-join-apply__quote-pane h3 {
  color: #ffffff;
}

[data-theme="dark"] .agency-join-apply__quote-pane cite,
[data-theme="dark"] .agency-working__copy .agency-working__title em {
  color: var(--color-gold-light, var(--color-accent));
}

[data-theme="dark"] .agency-block .agency-chapter__body,
[data-theme="dark"] .agency-mission-values__body,
[data-theme="dark"] .agency-block.agency-block--collab-tabs .agency-tabs__panel .agency-tabs__body,
[data-theme="dark"] .agency-page-intro .agency-head__lead {
  color: var(--color-muted);
}

/* Mobile services chapter cards — keep ink readable on light/dark panels. */
@media (max-width: 1023.98px) {
  [data-theme="dark"] .agency-block .agency-chapters--timeline .agency-chapter:nth-child(odd) {
    background: #ffffff;
  }

  [data-theme="dark"] .agency-block .agency-chapters--timeline .agency-chapter:nth-child(odd) .agency-chapter__title {
    color: var(--color-primary, #1d6066);
  }

  [data-theme="dark"] .agency-block .agency-chapters--timeline .agency-chapter:nth-child(odd) .agency-chapter__body,
  [data-theme="dark"] .agency-block .agency-chapters--timeline .agency-chapter:nth-child(odd) .agency-chapter__era {
    color: var(--color-text, #0b1a33);
  }

  [data-theme="dark"] .agency-block .agency-chapters--timeline .agency-chapter:nth-child(even) {
    background: color-mix(in srgb, var(--color-primary-dark, #154850) 94%, #000);
  }

  [data-theme="dark"] .agency-block .agency-chapters--timeline .agency-chapter:nth-child(even) .agency-chapter__title,
  [data-theme="dark"] .agency-block .agency-chapters--timeline .agency-chapter:nth-child(even) .agency-chapter__body {
    color: #ffffff;
  }
}

[data-theme="dark"] .agency-block.agency-block--collab-tabs .agency-tabs__tab {
  background: var(--color-surface-raised);
  color: var(--color-muted);
}

[data-theme="dark"] .agency-block.agency-block--collab-tabs .agency-tabs__panel {
  background: var(--color-surface-raised);
}

[data-theme="dark"] .agency-mission-values__item {
  background: var(--color-surface-raised);
  border-color: var(--color-border);
}

[data-theme="dark"] .agency-block--bg-gradient .agency-head__title,
[data-theme="dark"] .agency-block--bg-accent .agency-head__title,
[data-theme="dark"] .agency-block--bg-gradient .agency-card__title,
[data-theme="dark"] .agency-block--bg-accent .agency-card__title,
[data-theme="dark"] .agency-block.agency-page-hero .agency-head__title,
[data-theme="dark"] .agency-block.agency-page-hero .agency-head__lead {
  color: #ffffff;
}

/*
 * Where Scale Meets Precision — white highlight cards on inverse band.
 * Theme dark tokens make --color-text light; force dark ink on the cards.
 */
/*
 * The cards are a white ground, so their ink is pinned to literal brand navy.
 * `--color-text` is LIGHT in dark mode — using it here painted white on white.
 */
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat {
  background-color: #ffffff;
  color: #0b1a33;
  border-color: transparent;
}

[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat .agency-counter,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat .agency-counter__value,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat__value {
  color: var(--color-navy, #003366);
}

[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat__label,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat__note,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat__desc,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat p,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat li {
  color: #0b1a33;
  opacity: 1;
}

[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat__note,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat__desc {
  color: #4a5a70;
}

/* Showcase cards stay a white ground in dark mode; ink is literal navy. */
[data-theme="dark"] .agency-showcase__copy {
  background: #ffffff;
  color: #0b1a33;
}

[data-theme="dark"] .agency-showcase__copy .agency-showcase__title,
[data-theme="dark"] .agency-block--bg-surface .agency-showcase__title,
[data-theme="dark"] .agency-block--bg-raised .agency-showcase__title {
  color: var(--color-navy, #003366);
}

[data-theme="dark"] .agency-showcase__copy .agency-showcase__body,
[data-theme="dark"] .agency-showcase__copy p,
[data-theme="dark"] .agency-showcase__copy li {
  color: #4a5a70;
}

[data-theme="dark"] .agency-showcase__copy .agency-link-arrow {
  color: var(--color-steel, #1e4e79);
  border-color: var(--color-gold-dark, #b98c17);
}

[data-theme="dark"] .agency-showcase__tab,
[data-theme="dark"] .agency-showcase__tab-label {
  color: var(--color-primary-light, var(--color-primary-soft, #ffffff));
}

[data-theme="dark"] .agency-feature--overlay .agency-feature__title,
[data-theme="dark"] .agency-feature--overlay .agency-feature__body,
[data-theme="dark"] .agency-block--bg-inverse .agency-feature--overlay .agency-feature__title,
[data-theme="dark"] .agency-block--bg-inverse .agency-feature--overlay .agency-feature__body {
  color: #ffffff;
}

[data-theme="dark"] .agency-block--bg-inverse > .agency-block__inner > .agency-head .agency-head__title,
[data-theme="dark"] .agency-block--bg-inverse > .agency-block__inner > .agency-head .agency-head__lead {
  color: #ffffff;
}

[data-theme="dark"] .agency-block--bg-inverse > .agency-block__inner > .agency-head .agency-head__lead {
  opacity: 0.9;
}

/* -----------------------------------------------------------------------------
 * Dark theme contrast pass 2 — findings from a WCAG scan of every live page.
 * Each rule targets a pairing that measured below 4.5:1 (body) / 3:1 (large).
 * -------------------------------------------------------------------------- */

/* Active showcase tab used --color-primary-dark (navy) on the dark surface. */
[data-theme="dark"] .agency-showcase__tab.is-active .agency-showcase__tab-label {
  color: #ffffff;
}

/* Eyebrows on page-coloured bands used --color-primary (#1d6066) on near-black. */
[data-theme="dark"] .agency-block:not(.agency-block--bg-inverse):not(.agency-block--bg-gradient):not(.agency-block--bg-accent):not(.agency-page-hero):not(.agency-block--home-banner):not(.agency-block--partner-strip):not(.agency-block--video) .agency-eyebrow,
[data-theme="dark"] .agency-mission-values__intro .agency-eyebrow {
  color: var(--color-primary-light, #51c8cc);
}

/* Mission statement pane — darker gradient so white copy clears AA. */
[data-theme="dark"] .agency-block .agency-mission-values__mission {
  background-image: var(
    --gradient-section-vivid,
    linear-gradient(145deg, var(--color-steel, #1e4e79) 0%, var(--color-navy, #003366) 100%)
  );
  background-size: cover;
}

[data-theme="dark"] .agency-block .agency-mission-values__mission p.agency-mission-values__kicker {
  color: rgb(255 255 255 / 0.84);
}

[data-theme="dark"] .agency-block .agency-mission-values__mission p.agency-mission-values__statement {
  color: #ffffff;
}

/* Impact mosaic — dark stat cell and CTA emphasis. */
[data-theme="dark"] .agency-block .agency-impact-mosaic__cell--stat-dark {
  background-image: linear-gradient(180deg, var(--color-steel-horizon, #243b53) 0%, var(--color-primary-dark, #0b1a33) 100%);
  color: #ffffff;
}

[data-theme="dark"] .agency-block .agency-impact-mosaic__cell--stat-dark .agency-impact-mosaic__value,
[data-theme="dark"] .agency-block .agency-impact-mosaic__cell--stat-dark .agency-counter,
[data-theme="dark"] .agency-block .agency-impact-mosaic__cell--stat-dark .agency-counter__value {
  color: var(--color-gold-light, #e8d49a);
}

[data-theme="dark"] .agency-block .agency-impact-mosaic__cell--stat-dark p.agency-impact-mosaic__label {
  color: rgb(255 255 255 / 0.9);
}

[data-theme="dark"] .agency-block .agency-impact-mosaic__cta-title em {
  color: var(--color-gold-light, #e8d49a);
}

/* Join form pane — was a light pane with light ink; now a raised dark pane. */
[data-theme="dark"] .agency-block .agency-join-apply__form-pane {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
}

[data-theme="dark"] .agency-block .agency-join-apply__form-pane .agency-join-apply__title {
  color: var(--color-text);
}

[data-theme="dark"] .agency-block .agency-join-apply__form-pane p.agency-join-apply__cv-note {
  color: var(--color-muted);
}

[data-theme="dark"] .agency-block .agency-join-apply__form-pane .agency-join-apply__cv-note a {
  color: var(--color-gold-light, #e8d49a);
}

/* Collaboration tabs — active pill was white on a mid olive gradient. */
[data-theme="dark"] .agency-block.agency-block--collab-tabs .agency-tabs.is-enhanced .agency-tabs__tab[aria-selected="true"],
[data-theme="dark"] .agency-block.agency-block--collab-tabs .agency-tabs:not(.is-enhanced) .agency-tabs__tab[aria-selected="true"] {
  color: var(--color-accent-contrast, #0b1718);
  background-color: var(--color-gold, #d4b76a);
  background-image: linear-gradient(
    135deg,
    var(--color-gold-dark, #c4a35a) 0%,
    var(--color-gold-light, #e8d49a) 100%
  );
}

/*
 * Final chapters timeline split — stream never carries images; phones
 * interleave stage frames, laptop keeps the sticky stage only.
 */
@media (max-width: 1023.98px) {
  .agency-block .agency-chapters--timeline .agency-chapters__index,
  .agency-block .agency-chapters--timeline .agency-chapters__index--rail {
    display: none !important;
  }

  .agency-block .agency-chapters--timeline .agency-chapters__stage,
  .agency-block .agency-chapters--timeline .agency-chapters__stream {
    display: contents !important;
  }

  .agency-block .agency-chapters--timeline .agency-chapters__frame {
    position: relative !important;
    opacity: 1 !important;
  }

  .agency-block .agency-chapters--timeline .agency-chapter__media,
  .agency-block .agency-chapters--timeline .agency-chapter > img {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .agency-block .agency-chapters--timeline .agency-chapters__stage {
    display: block !important;
  }

  .agency-block .agency-chapters--timeline .agency-chapters__stream {
    display: grid !important;
  }

  .agency-block .agency-chapters--timeline .agency-chapter__media,
  .agency-block .agency-chapters--timeline .agency-chapter > img,
  .agency-block .agency-chapters--timeline .agency-chapter img.agency-chapter__image,
  .agency-block .agency-chapters--timeline .agency-chapter img.agency-chapter__image--inline {
    display: none !important;
  }
}

/*
 * Mobile/tablet only — section image/video overlays cover ~45% (bottom band).
 * Banners (inner-hero / video--banner) intentionally unchanged. Desktop untouched.
 */
@media (max-width: 1023.98px) {
  /* Chapters timeline photo frames */
  .agency-block .agency-chapters__frame::after {
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--color-primary-dark, #154850) 50%, transparent) 0%,
      color-mix(in srgb, var(--color-gold, #c4a35a) 30%, transparent) 48%,
      transparent 100%
    );
    transition:
      opacity var(--dur-normal, 280ms) var(--ease-out, ease),
      background var(--dur-normal, 280ms) var(--ease-out, ease);
    opacity: 0.95;
  }

  .agency-block .agency-chapters__frame:hover::after,
  .agency-block .agency-chapters__frame:focus-within::after,
  .agency-block .agency-chapters__frame:active::after {
    opacity: 1;
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--color-gold, #c4a35a) 52%, transparent) 0%,
      color-mix(in srgb, var(--color-primary, #1d6066) 38%, transparent) 55%,
      transparent 100%
    );
  }

  /* Showcase + collab-tab section videos/images (not page banners) */
  .agency-showcase__media::after,
  .agency-block .agency-tabs__video::after {
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--color-primary-dark, #154850) 44%, transparent) 0%,
      color-mix(in srgb, var(--color-gold, var(--color-accent)) 28%, transparent) 52%,
      transparent 100%
    );
    transition:
      opacity var(--dur-normal, 280ms) var(--ease-out, ease),
      background var(--dur-normal, 280ms) var(--ease-out, ease);
    opacity: 0.95;
  }

  .agency-showcase__media:hover::after,
  .agency-showcase__media:focus-within::after,
  .agency-showcase__card:hover .agency-showcase__media::after,
  .agency-showcase__card:focus-within .agency-showcase__media::after,
  .agency-showcase__card:active .agency-showcase__media::after,
  .agency-block .agency-tabs__video:hover::after,
  .agency-block .agency-tabs__video:focus-within::after,
  .agency-block .agency-tabs__video:active::after {
    opacity: 1;
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--color-gold, var(--color-accent)) 48%, transparent) 0%,
      color-mix(in srgb, var(--color-primary-soft, var(--color-primary)) 32%, transparent) 55%,
      transparent 100%
    );
  }

  /*
   * Feature photo cards — rest at ~45% green wash; hover/active expand + gold.
   * Icons always fully visible (no clip); tint inverted vs wash (gold on green,
   * green on gold).
   */
  .agency-feature--overlay .agency-feature__overlay {
    transform: none;
    inset-block-start: auto;
    inset-block-end: 0;
    max-block-size: none;
    min-block-size: 42%;
    clip-path: none;
    align-content: end;
    overflow: visible;
    gap: 0.45rem;
    padding: 0.85rem 0.85rem 1rem;
    background: linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--color-primary) 48%, transparent) 28%,
      color-mix(in srgb, var(--color-primary) 88%, #000) 100%
    );
    transition:
      background 500ms var(--ease-out, ease),
      min-block-size 500ms var(--ease-out, ease);
  }

  .agency-feature--overlay .agency-feature__icon {
    inline-size: 3.15rem;
    block-size: 3.15rem;
    min-inline-size: 3.15rem;
    min-block-size: 3.15rem;
    padding: 0.4rem;
    overflow: visible;
    flex-shrink: 0;
    background: rgb(255 255 255 / 0.22);
    color: var(--color-gold, #c4a35a);
  }

  .agency-feature--overlay .agency-feature__icon .agency-icon {
    width: 1.55rem;
    height: 1.55rem;
    stroke: var(--color-gold, #c4a35a);
  }

  .agency-feature--overlay .agency-feature__icon-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    /* Gold silhouette on teal/green wash */
    filter: brightness(0) saturate(100%) invert(72%) sepia(38%) saturate(520%)
      hue-rotate(6deg) brightness(95%) contrast(92%);
  }

  .agency-feature--overlay .agency-feature__body {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .agency-feature--overlay:hover .agency-feature__overlay,
  .agency-feature--overlay:focus-within .agency-feature__overlay,
  .agency-feature--overlay:active .agency-feature__overlay {
    min-block-size: 78%;
    background: linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--color-accent) 70%, transparent) 18%,
      var(--color-accent) 100%
    );
  }

  .agency-feature--overlay:hover .agency-feature__icon,
  .agency-feature--overlay:focus-within .agency-feature__icon,
  .agency-feature--overlay:active .agency-feature__icon {
    color: var(--color-primary, #1d6066);
  }

  .agency-feature--overlay:hover .agency-feature__icon .agency-icon,
  .agency-feature--overlay:focus-within .agency-feature__icon .agency-icon,
  .agency-feature--overlay:active .agency-feature__icon .agency-icon {
    stroke: var(--color-primary, #1d6066);
  }

  .agency-feature--overlay:hover .agency-feature__icon-img,
  .agency-feature--overlay:focus-within .agency-feature__icon-img,
  .agency-feature--overlay:active .agency-feature__icon-img {
    /* Emerald silhouette on gold wash */
    filter: brightness(0) saturate(100%) invert(28%) sepia(42%) saturate(900%)
      hue-rotate(146deg) brightness(92%) contrast(95%);
  }

  .agency-feature--overlay:hover .agency-feature__body,
  .agency-feature--overlay:focus-within .agency-feature__body,
  .agency-feature--overlay:active .agency-feature__body {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .agency-feature--overlay:hover .agency-feature__photo,
  .agency-feature--overlay:focus-within .agency-feature__photo,
  .agency-feature--overlay:active .agency-feature__photo {
    transform: scale(1.02);
    object-position: center 18%;
  }

  /* Touch-friendly: card accent bar + media scale also fire on :active */
  .agency-block .agency-card:active::before {
    transform: scaleY(1);
  }

  .agency-block .agency-card:active {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
  }

  .agency-block .agency-card:active .agency-card__media img,
  .agency-card:active .agency-card__media img,
  .agency-process__step:active img,
  .agency-block .agency-process__media:active img,
  .agency-showcase__card:active .agency-showcase__image {
    transform: scale(1.04);
  }

  .agency-block .agency-process__step--media:active .agency-process__media {
    transform: rotate(0deg) translateY(-4px);
  }

  /* Banners — keep prior mobile lighten only (do not retune coverage). */
  .agency-block--video:has(.agency-video--banner .agency-head) .agency-video--banner::before,
  .agency-block.agency-page-hero:has(.agency-video--banner) .agency-video--banner::before {
    background: linear-gradient(
      145deg,
      color-mix(in srgb, var(--color-gold, var(--color-accent)) 19%, transparent) 0%,
      color-mix(in srgb, var(--color-primary-soft, var(--color-primary)) 8%, transparent) 48%,
      color-mix(in srgb, var(--color-gold, var(--color-accent)) 14%, transparent) 100%
    );
  }

  .agency-inner-hero__stage-frame::after {
    background: radial-gradient(
      ellipse 8.5rem 6.5rem at calc(100% - 0.25rem) calc(100% - 0.25rem),
      color-mix(in srgb, var(--color-primary-dark, #0f2f34) 62%, transparent) 0%,
      color-mix(in srgb, var(--color-primary, #1d6066) 38%, transparent) 38%,
      transparent 72%
    );
  }
}

@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .agency-block .agency-chapters__frame::after,
  .agency-showcase__media::after,
  .agency-block .agency-tabs__video::after,
  .agency-feature--overlay .agency-feature__overlay,
  .agency-feature--overlay .agency-feature__photo,
  .agency-block .agency-card,
  .agency-block .agency-card__media img,
  .agency-block .agency-process__media {
    transition: none;
  }

  .agency-block .agency-card:active,
  .agency-feature--overlay:active .agency-feature__photo,
  .agency-block .agency-process__step--media:active .agency-process__media {
    transform: none;
  }
}

/* =============================================================================
 * Dark mode — readable ink on every page-coloured band (not inverse/cards
 * that keep a light plate). Headings must not use --color-primary (#1d6066).
 * ========================================================================== */
[data-theme="dark"] .agency-block:not(.agency-block--bg-inverse):not(.agency-block--bg-gradient):not(.agency-block--bg-accent):not(.agency-page-hero):not(.agency-block--home-banner):not(.agency-block--inner-hero):not(.agency-block--partner-strip):not(.agency-block--video) {
  color: var(--color-text);
}

[data-theme="dark"] .agency-block:not(.agency-block--bg-inverse):not(.agency-block--bg-gradient):not(.agency-block--bg-accent) .agency-head__title,
[data-theme="dark"] .agency-block:not(.agency-block--bg-inverse):not(.agency-block--bg-gradient):not(.agency-block--bg-accent) .agency-head__title a,
[data-theme="dark"] .agency-block--mission-values .agency-head--center .agency-head__title,
[data-theme="dark"] .agency-block .agency-feature__title,
[data-theme="dark"] .agency-block .agency-process__title,
[data-theme="dark"] .agency-block .agency-chapter__title,
[data-theme="dark"] .agency-block .agency-tabs__title,
[data-theme="dark"] .agency-block .agency-card__title,
[data-theme="dark"] .agency-block .agency-card__title a,
[data-theme="dark"] .agency-block .agency-jobs__title,
[data-theme="dark"] .agency-block .agency-accordion__summary,
[data-theme="dark"] .agency-block--content .agency-head__title,
[data-theme="dark"] .agency-jobs-intro .agency-head__title,
[data-theme="dark"] .agency-split-copy__col .agency-head__title {
  color: var(--color-text);
}

[data-theme="dark"] .agency-block:not(.agency-block--bg-inverse):not(.agency-block--bg-gradient):not(.agency-block--bg-accent) .agency-head__lead,
[data-theme="dark"] .agency-block:not(.agency-block--bg-inverse) .agency-feature__body,
[data-theme="dark"] .agency-block:not(.agency-block--bg-inverse) .agency-process__body,
[data-theme="dark"] .agency-block:not(.agency-block--bg-inverse) .agency-chapter__body,
[data-theme="dark"] .agency-block:not(.agency-block--bg-inverse) .agency-card__text,
[data-theme="dark"] .agency-legal-copy,
[data-theme="dark"] .agency-legal-copy p,
[data-theme="dark"] .agency-jobs-intro .agency-head__lead,
[data-theme="dark"] .agency-split-copy__col .agency-head__lead {
  color: var(--color-muted);
}

[data-theme="dark"] .agency-block--bg-inverse,
[data-theme="dark"] .agency-block--bg-gradient,
[data-theme="dark"] .agency-block--bg-accent,
[data-theme="dark"] .agency-block--inner-hero .agency-inner-hero__panel--copy,
[data-theme="dark"] .agency-block.agency-page-hero .agency-head,
[data-theme="dark"] .agency-block--home-banner .agency-head {
  color: #ffffff;
}

[data-theme="dark"] .agency-block--bg-inverse .agency-head__title,
[data-theme="dark"] .agency-block--bg-gradient .agency-head__title,
[data-theme="dark"] .agency-block--bg-accent .agency-head__title,
[data-theme="dark"] .agency-block--bg-inverse .agency-head__lead,
[data-theme="dark"] .agency-block--bg-gradient .agency-head__lead,
[data-theme="dark"] .agency-block--bg-accent .agency-head__lead,
[data-theme="dark"] .agency-inner-hero__title,
[data-theme="dark"] .agency-inner-hero__lead,
[data-theme="dark"] .agency-inner-hero--overlay .agency-inner-hero__title,
[data-theme="dark"] .agency-inner-hero--overlay-flat .agency-inner-hero__title,
[data-theme="dark"] .agency-inner-hero--overlay .agency-inner-hero__lead,
[data-theme="dark"] .agency-inner-hero--overlay-flat .agency-inner-hero__lead,
[data-theme="dark"] .agency-inner-hero--copy-bl .agency-inner-hero__title,
[data-theme="dark"] .agency-inner-hero--copy-br .agency-inner-hero__title,
[data-theme="dark"] .agency-inner-hero--copy-start .agency-inner-hero__title,
[data-theme="dark"] .agency-inner-hero--media-start .agency-inner-hero__title,
[data-theme="dark"] .agency-inner-hero--media-end .agency-inner-hero__title,
[data-theme="dark"] .agency-inner-hero--copy-bl .agency-inner-hero__lead,
[data-theme="dark"] .agency-inner-hero--copy-br .agency-inner-hero__lead,
[data-theme="dark"] .agency-inner-hero--copy-start .agency-inner-hero__lead,
[data-theme="dark"] .agency-inner-hero--media-start .agency-inner-hero__lead,
[data-theme="dark"] .agency-inner-hero--media-end .agency-inner-hero__lead {
  color: #ffffff;
  text-shadow: 0 2px 16px rgb(0 0 0 / 0.55);
}

/* Deepen banner veil in dark mode so smaller lead copy stays readable. */
[data-theme="dark"] .agency-inner-hero--overlay .agency-inner-hero__veil,
[data-theme="dark"] .agency-inner-hero--overlay-flat .agency-inner-hero__veil,
[data-theme="dark"] .agency-inner-hero--stage-tint .agency-inner-hero__veil,
[data-theme="dark"] .agency-inner-hero--copy-bl .agency-inner-hero__veil,
[data-theme="dark"] .agency-inner-hero--copy-br .agency-inner-hero__veil,
[data-theme="dark"] .agency-inner-hero--copy-start .agency-inner-hero__veil,
[data-theme="dark"] .agency-inner-hero--media-start .agency-inner-hero__veil,
[data-theme="dark"] .agency-inner-hero--media-end .agency-inner-hero__veil {
  background:
    linear-gradient(
      105deg,
      rgb(4 14 18 / 0.78) 0%,
      rgb(4 14 18 / 0.52) 40%,
      rgb(4 14 18 / 0.28) 68%,
      transparent 100%
    ),
    linear-gradient(
      to top,
      rgb(4 14 18 / 0.55) 0%,
      transparent 52%
    );
}

[data-theme="dark"] .agency-block .agency-jobs__filters {
  background: var(--color-surface-raised);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .agency-block .agency-jobs__filter-label,
[data-theme="dark"] .agency-block .agency-jobs__check {
  color: var(--color-muted);
}

[data-theme="dark"] .agency-block .agency-jobs__filter select {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] .agency-block .agency-accordion__panel,
[data-theme="dark"] .agency-block .agency-accordion__panel p {
  color: var(--color-muted);
}

[data-theme="dark"] .agency-block .agency-contact__office-label,
[data-theme="dark"] .agency-block .agency-contact__row {
  color: var(--color-text);
}

[data-theme="dark"] .agency-block .agency-contact__row a {
  color: var(--color-gold-light, var(--color-accent));
}

[data-theme="dark"] .agency-feature--overlay .agency-feature__title,
[data-theme="dark"] .agency-feature--overlay .agency-feature__body {
  color: #ffffff;
}

/* Restore dark ink on light plates after the heading catch-all. */
[data-theme="dark"] .agency-block--bg-inverse .agency-card--quote,
[data-theme="dark"] .agency-block--bg-inverse .agency-card--quote .agency-quote__text,
[data-theme="dark"] .agency-block--bg-inverse .agency-card--quote .agency-quote__name,
[data-theme="dark"] .agency-block--bg-inverse .agency-card--collage,
[data-theme="dark"] .agency-block--bg-inverse .agency-card--quote .agency-card__title,
[data-theme="dark"] .agency-showcase__copy,
[data-theme="dark"] .agency-showcase__copy .agency-showcase__title,
[data-theme="dark"] .agency-showcase__copy .agency-showcase__body,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat__label,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat p {
  /* Literal navy: --color-text is light in dark mode (white-on-white bug). */
  color: #0b1a33;
}

[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat .agency-counter,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat .agency-counter__value,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat__value,
[data-theme="dark"] .agency-showcase__copy .agency-showcase__title {
  color: var(--color-navy, #003366);
}

[data-theme="dark"] .agency-block--bg-inverse .agency-card--quote .agency-quote__role,
[data-theme="dark"] .agency-showcase__copy .agency-showcase__body,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat__note {
  color: #4a5a70;
}

[data-theme="dark"] .agency-block--bg-inverse p,
[data-theme="dark"] .agency-block--bg-gradient p,
[data-theme="dark"] .agency-block--bg-accent p,
[data-theme="dark"] .agency-block--bg-inverse li,
[data-theme="dark"] .agency-block--bg-gradient li,
[data-theme="dark"] .agency-block--bg-accent li {
  color: rgb(255 255 255 / 0.92);
}

/* Light testimonial plates keep dark ink — the inverse `p` rule above must not win. */
[data-theme="dark"] .agency-card--collage,
[data-theme="dark"] .agency-card--collage p,
[data-theme="dark"] .agency-card--collage .agency-quote__text,
[data-theme="dark"] .agency-card--collage .agency-quote__name,
[data-theme="dark"] .agency-card--collage .agency-quote__role,
[data-theme="dark"] .agency-card--collage li,
[data-theme="dark"] .agency-block--bg-inverse .agency-card--quote,
[data-theme="dark"] .agency-block--bg-inverse .agency-card--quote p,
[data-theme="dark"] .agency-block--bg-inverse .agency-card--quote .agency-quote__text,
[data-theme="dark"] .agency-block--bg-inverse .agency-card--quote .agency-quote__name,
[data-theme="dark"] .agency-block--bg-inverse .agency-card--quote .agency-quote__role,
[data-theme="dark"] .agency-block--bg-inverse .agency-card--quote li {
  color: var(--color-text, #0b1a33);
}

[data-theme="dark"] .agency-card--collage .agency-quote__role,
[data-theme="dark"] .agency-block--bg-inverse .agency-card--quote .agency-quote__role {
  color: #4b6467;
}

[data-theme="dark"] .agency-block--bg-inverse .agency-head__title,
[data-theme="dark"] .agency-block--bg-gradient .agency-head__title,
[data-theme="dark"] .agency-block--bg-accent .agency-head__title,
[data-theme="dark"] .agency-block.agency-page-hero .agency-head__title,
[data-theme="dark"] .agency-block--home-banner .agency-head__title {
  color: #ffffff;
}

@media (max-width: 1023.98px) {
  [data-theme="dark"] .agency-block .agency-chapters--timeline .agency-chapter:nth-child(odd) .agency-chapter__title {
    color: var(--color-primary-dark, #154850);
  }

  [data-theme="dark"] .agency-block .agency-chapters--timeline .agency-chapter:nth-child(odd) .agency-chapter__body,
  [data-theme="dark"] .agency-block .agency-chapters--timeline .agency-chapter:nth-child(odd) .agency-chapter__era {
    color: var(--color-text, #0b1a33);
  }
}