/* =============================================================================
 * 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;
  padding-block: 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;
}

/*
 * 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".
 */
.agency-block--bg-default,
.agency-block--bg-raised {
  background-color: var(--color-bg, #ffffff);
  background-image: none;
}

.agency-block--bg-surface {
  background-color: var(--color-surface, #eef6f6);
  background-image: none;
}

/*
 * 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 + .prelect-hash-anchor + .agency-block--bg-surface {
  background-color: var(--color-bg, #ffffff);
}

.agency-block--bg-default + .agency-block--bg-default,
.agency-block--bg-default + .prelect-hash-anchor + .agency-block--bg-default,
.agency-block--bg-raised + .agency-block--bg-raised,
.agency-block--bg-raised + .prelect-hash-anchor + .agency-block--bg-raised,
.agency-block--bg-default + .agency-block--bg-raised,
.agency-block--bg-default + .prelect-hash-anchor + .agency-block--bg-raised,
.agency-block--bg-raised + .agency-block--bg-default,
.agency-block--bg-raised + .prelect-hash-anchor + .agency-block--bg-default {
  background-color: var(--color-surface, #eef6f6);
}

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

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

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

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

.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 + .prelect-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 + .prelect-hash-anchor + .agency-block--bg-gradient,
.agency-block--bg-gradient + .agency-block--bg-inverse,
.agency-block--bg-gradient + .prelect-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 {
  color: 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)));
}

.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--bg-gradient .agency-eyebrow,
.agency-block--bg-accent .agency-eyebrow,
.agency-block--bg-inverse .agency-eyebrow {
  color: inherit;
  opacity: 0.85;
}

.agency-block .agency-head__lead {
  margin: 0;
  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 for Prelect). */
.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.
   */
  --agency-logo-slot-w: 6.25rem;
  --agency-logo-slot-h: 1.7rem;

  display: flex;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  gap: clamp(1rem, 1.6vw, 1.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: center;
  inline-size: var(--agency-logo-slot-w);
  min-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;
}

.agency-logos--marquee .agency-logos__image {
  inline-size: 100%;
  block-size: 100%;
  width: 100%;
  height: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Partner strip - darkest emerald gradient; half-height elegant ribbon. */
.agency-block.agency-block--partner-strip.agency-block--bg-gradient,
.agency-block.agency-block--partner-strip {
  background-color: #031412;
  background-image: linear-gradient(
    118deg,
    #020c0b 0%,
    #041a17 22%,
    #062925 48%,
    #0a3532 72%,
    #031412 100%
  );
  color: #ffffff;
  padding-block: clamp(0.55rem, 1.1vw, 0.8rem) clamp(0.4rem, 0.8vw, 0.55rem);
}

.agency-block.agency-block--partner-strip.agency-block--space-tight {
  padding-block: clamp(0.55rem, 1.1vw, 0.8rem) clamp(0.4rem, 0.8vw, 0.55rem);
}

.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 {
  inline-size: 100%;
  block-size: 100%;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  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); }
}

.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-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;
  }
}

/* A job card carries its facts, so it needs less padding around the body. */
.agency-block .agency-card--job .agency-card__body.agency-job-row {
  gap: 0.85rem;
}

/*
 * 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: #0f1f21;
  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;
}

.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: #0f1f21;
}

.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 {
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.6rem);
  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);
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.3rem);
  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-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;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--color-primary) 55%, transparent) 35%,
    color-mix(in srgb, var(--color-primary) 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%
  );
}

.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.18);
  border: 0;
  color: #ffffff;
}

.agency-feature--overlay .agency-feature__icon-img {
  filter: brightness(0) invert(1);
}

.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;
}

.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. */
.agency-block .agency-process__step--media:nth-child(4n + 1) .agency-process__index {
  background-color: #f5c518;
  color: #0f1f21;
}

.agency-block .agency-process__step--media:nth-child(4n + 2) .agency-process__index {
  background-color: #7ec8a3;
  color: #0f1f21;
}

.agency-block .agency-process__step--media:nth-child(4n + 3) .agency-process__index {
  background-color: #3db8b0;
  color: #0f1f21;
}

.agency-block .agency-process__step--media:nth-child(4n + 4) .agency-process__index {
  background-color: #f0d56a;
  color: #0f1f21;
}

.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;
}

/*
 * Solid header sits in normal flow — banners start below chrome.
 * Extra top padding + object-position keep faces/titles out from under the sticky bar.
 */
.site-main > .agency-block.agency-page-hero:first-child:has(.agency-video--banner) {
  margin-block-start: 0;
  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;
}

/*
 * 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;
}

/* White rectangular CTA — dark emerald label (screenshot reference). */
.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: #ffffff;
  background-image: none;
  color: var(--color-primary-dark, #154850);
  font-weight: 600;
  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: #ffffff;
  background-image: none;
  color: var(--color-primary, #1d6066);
  filter: brightness(1.02);
}

@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;
    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));
    height: calc(100svh + (var(--site-header-offset, 4.25rem) * 1.05));
    height: calc(100dvh + (var(--site-header-offset, 4.25rem) * 1.05));
    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: calc(100svh + (var(--site-header-offset, 4.25rem) * 1.05));
    min-block-size: calc(100dvh + (var(--site-header-offset, 4.25rem) * 1.05));
  }

  .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) + .prelect-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;
  }
}

.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-block-start: 0.1rem;
  color: var(--color-accent);
  flex-shrink: 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-body {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.agency-block .agency-contact__row a {
  color: var(--color-accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}

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

.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-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);

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

.agency-block .agency-tabs__panel .agency-tabs__body {
  margin: 0;
  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__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);
  background-color: transparent;
  box-shadow: none;
  font-weight: 600;
}

.agency-block .agency-tabs.is-enhanced .agency-tabs__tab:hover {
  background-color: 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;
  background-color: var(--color-primary);
  background-image: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    color-mix(in srgb, var(--color-accent) 55%, 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;
}

.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;
}

.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;
}

@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;
}

.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-left {
    transform: rotate(-1.25deg);
  }

  .agency-testimonial-pair > .agency-card--collage.is-active.agency-card--enter-right {
    transform: rotate(1.25deg);
    margin-block-start: var(--space-md);
  }

  /* Keep tilt after entrance animation ends (fill mode alone was dropping it). */
  .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;
  }
}

.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: #0f1f21;
}

.agency-card--tone-sky {
  background-color: #9ed7ea;
  color: #0f1f21;
}

.agency-card--tone-mint {
  background-color: #b8e0d2;
  color: #0f1f21;
}

.agency-card--tone-cream {
  background-color: #f3e7d3;
  color: #0f1f21;
}

.agency-card--tone-white {
  background-color: #ffffff;
  color: #0f1f21;
}

.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;
  color: 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-primary, #1d6066) 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%
    );
}

.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; the padding above is all the gutter left. */
.agency-block__inner--full { max-width: none; }

/* --- 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 `+ .prelect-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) + .prelect-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) + .prelect-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) + .prelect-hash-anchor + .agency-block::before,
.agency-block.agency-block--inner-hero + .agency-block::before,
.agency-block.agency-block--inner-hero + .prelect-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) + .prelect-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) + .prelect-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) + .prelect-hash-anchor + .agency-block {
    padding-block-start: calc(var(--section-y, 4rem) + 2rem);
  }

  /* Inner banners: same full-viewport cover as homepage. */
  .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: calc(100svh + (var(--site-header-offset, 4.25rem) * 1.05));
    min-block-size: calc(100dvh + (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));
    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: 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-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: 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;
    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);
  background-image: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-primary) 92%, #061018) 0%,
    color-mix(in srgb, var(--color-accent) 48%, var(--color-primary)) 100%
  );
  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 {
  /* 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% - 2rem, var(--measure-wide, 72rem));
  max-width: min(100% - 2rem, 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 {
  font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.85rem);
  font-weight: 600;
  line-height: 1.12;
  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 + .prelect-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) + .prelect-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: calc(100svh + (var(--site-header-offset, 4.25rem) * 1.05));
    min-block-size: calc(100dvh + (var(--site-header-offset, 4.25rem) * 1.05));
  }

  .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 + .prelect-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% - 1.5rem, var(--measure-wide, 72rem));
    max-width: min(100% - 1.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: 0.25rem;
  }

  .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;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    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 {
    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%
      );
  }

  .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);
  font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2.15rem);
  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 {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary) 72%, var(--color-accent)) 0%,
    var(--color-primary) 100%
  );
  color: #ffffff;
}

.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);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem);
  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 {
  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);
}

[data-theme="dark"] .agency-block--bg-raised {
  background: var(--color-surface-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;
  margin-inline: auto;
  font-size: var(--step-0);
  line-height: 1.65;
  text-align: start;
}

.agency-legal-copy p {
  margin: 0;
}

.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;
}

.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);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  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: #0f1f21;
}

[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: #0f1f21;
  }

  [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.
 */
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat {
  background-color: #ffffff;
  color: #0f1f21;
  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-primary, #1d6066);
}

[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: #0f1f21;
  opacity: 1;
}

/* Showcase cards stay light in dark mode; titles use emerald, not light ink. */
[data-theme="dark"] .agency-showcase__copy {
  background: #ffffff;
  color: #0f1f21;
}

[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-primary-dark, #154850);
}

[data-theme="dark"] .agency-showcase__copy .agency-showcase__body {
  color: #4b6467;
}

[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;
}

/*
 * 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% cover; hover/focus/active expand + gold wash.
   * Overrides the global (hover:none) always-expanded rule on small viewports.
   */
  .agency-feature--overlay .agency-feature__overlay {
    transform: none;
    inset-block-start: auto;
    inset-block-end: 0;
    max-block-size: 45%;
    clip-path: none;
    align-content: end;
    overflow: hidden;
    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:
      max-block-size 500ms var(--ease-out, ease),
      background 500ms var(--ease-out, ease);
  }

  .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 {
    max-block-size: 82%;
    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__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;
  }
}