/* blocks.css — editorial page-engine blocks. Tokens only. Loaded on use_editorial
 * pages (header.html). Body/nav text uses var(--im-font-body,"Hanken Grotesk",...) because
 * --im-font-body is editorial-scoped; ink uses --im-ink (never --im-text-100). */

/* ---- Section + container scaffolding ---- */
.im-block-section { padding: clamp(var(--im-space-12), 7vw, var(--im-space-24)) 0; background: var(--im-paper); }
/* --band sections no longer paint the mid tint (ADR-012 am. 4: the mid is
   furniture, not page rhythm). They read as paper framed by hairlines; the
   dark rhythm element is .im-feature-band. */
.im-block-section--band { background: var(--im-paper);
  border-top: 1px solid var(--im-hairline); border-bottom: 1px solid var(--im-hairline); }
.im-block-section--band + .im-block-section--band { border-top: 0; }
.im-block-section--tight { padding-top: var(--im-space-10); padding-bottom: var(--im-space-10); }
/* One-sided counterparts to --tight, for two sections that read as a single unit
   (a block and the CTA that answers it). Only the edge BETWEEN them tightens; each
   section keeps the page's default rhythm on its outer edge, so the pair does not
   pull away from the band above or below it. --tight cannot express this: it moves
   both edges, which on a section following a --band drags the copy up against that
   band's hairline. */
.im-block-section--pad-t-tight { padding-top: var(--im-space-10); }
.im-block-section--pad-b-tight { padding-bottom: var(--im-space-10); }
/* Clears the fixed navbar on editorial pages. The engine owns its own clearance
   (the use_editorial stack does not load navbar-country.css) or the first
   section renders under the nav. Height comes from the --im-nav-h token so the
   clearance tracks the real bar height (86px desktop / 64px phone) plus one
   space step — a consistent ~102px trail, never a 50px void, never under the
   nav. Placed after --tight so it wins the top-padding on the first section. */
.im-navbar-offset { padding-top: calc(var(--im-nav-h) + var(--im-space-4)); }
/* Page masthead clearance: a listing/legal page whose big title leads directly
   under the fixed pill nav (no small breadcrumb line to buffer it). Gives the
   title comfortable air below the nav — more than the bare .im-navbar-offset used
   where a breadcrumb leads. Defined after --navbar-offset so it wins the padding.
   space-16 (not -12) so a title leading a dense stack (tools: title+lede+cards)
   doesn't read top-heavy — ~72px of air below the nav. */
.im-block-section--masthead { padding-top: calc(var(--im-nav-h) + var(--im-space-16)); }
.im-wrap { max-width: var(--im-wrap-max, 1280px); margin: 0 auto; padding: 0 var(--im-space-8); }
/* .im-seclab moved to design-system/prose.css: blocks.css
   and prose.css are always loaded together (parts/header.html links both
   only under use_editorial), so every existing consumer is unaffected, and
   the guide reading page (which loads prose.css alone) now gets the rule
   its own "On this page" label (parts/blocks/service_toc.html) needs. */
.im-sech { font-family: var(--im-font-display); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.08; letter-spacing: -.015em;
  color: var(--im-ink); max-width: 20ch; }
.im-secsub { font-family: var(--im-font-body, "Hanken Grotesk", system-ui, -apple-system, sans-serif);
  font-size: 15px; color: var(--im-text-muted); line-height: 1.55; max-width: 56ch; margin-top: var(--im-space-3); }

/* ---- Scroll reveal (pronounced; toggled by reveal.js; JS-off = visible) ---- */
.im-js [data-reveal] { opacity: 0; transform: translateY(26px);
  transition: opacity .62s cubic-bezier(.2,.7,.2,1), transform .62s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform; }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Ledger (parts/blocks/ledger.html): the one ruled table. Hairline rows
   of label | detail | figure; the figure right-aligned in tabular numerals.
   Replaced .im-fee, .im-reqlist and .im-doclist (2026-09-27). ---- */
.im-ledger { width: 100%; max-width: 760px; margin-top: var(--im-space-8); border-collapse: collapse;
  border-top: 1px solid var(--im-hairline); font-family: var(--im-font-body, "Hanken Grotesk", system-ui, -apple-system, sans-serif); }
.im-ledger__row { border-bottom: 1px solid var(--im-hairline); }
.im-ledger__label, .im-ledger__detail, .im-ledger__figure { padding: var(--im-space-4) 0; vertical-align: baseline; text-align: left; }
.im-ledger__label { font-family: var(--im-font-display); font-weight: 500; font-size: 15.5px; line-height: 1.45; color: var(--im-ink);
  padding-right: var(--im-space-6); width: 38%; }
.im-ledger__detail { font-size: 14.5px; line-height: 1.55; color: var(--im-text-200); padding-right: var(--im-space-6); }
.im-ledger__detail:empty { display: none; }
.im-ledger__detail:empty ~ .im-ledger__figure, .im-ledger__label:only-child { width: auto; }
/* The figure wraps, bounded rather than unbreakable. It was once nowrap, and a
   96-character processing-time sentence in a fee value (germany/eu-blue-card)
   pushed the page 434px sideways at 390px; then `overflow-wrap: anywhere` let
   a long label starve it until "£480" broke as "£4" over "80". max-width caps a
   runaway sentence at a little over half the row; break-word fires only for a
   token too long for its own box, which a currency figure never is. */
.im-ledger__figure { font-family: var(--im-font-display); font-weight: 500; font-size: 15.5px; color: var(--im-ink);
  font-variant-numeric: tabular-nums; text-align: right; max-width: 55%; overflow-wrap: break-word; }
.im-ledger__n { display: inline-block; min-width: 2.4em; font-weight: 600; font-size: 12.5px; letter-spacing: .04em;
  color: var(--im-key-route); font-variant-numeric: tabular-nums; }
.im-ledger__ic { display: inline-block; vertical-align: -4px; margin-right: var(--im-space-3); color: var(--im-key-route); }
.im-ledger__ic .im-ic { width: 20px; height: 20px; }
.im-ledger__lk { color: var(--im-ink); text-decoration: none; transition: color var(--im-dur) var(--im-ease); }
.im-ledger__lk:hover, .im-ledger__lk:focus-visible { color: var(--im-key-route); text-decoration: underline; text-underline-offset: 3px; }
.im-ledger__note { font-size: 12.5px; color: var(--im-text-muted); line-height: 1.55; margin-top: var(--im-space-4); max-width: 640px; }
.im-ledger__note a { color: var(--im-accent-200); text-decoration: underline; text-underline-offset: 2px; }
/* A chapter index (numbered, linked rows) runs the full measure. */
.im-ledger--index { max-width: none; }
.im-ledger--index .im-ledger__label { width: 44%; font-size: 17px; }
/* A row with no detail gives the label the room: a fee table is label | figure. */
.im-ledger__row:has(> .im-ledger__detail:empty) .im-ledger__label { width: auto; }
/* Consecutive ledgers (a guide hub's chapter groups) stand apart as groups. */
.im-wrap:has(> .im-ledger) + .im-wrap:has(> .im-ledger) { margin-top: var(--im-space-12); }
.im-seclab + .im-ledger { margin-top: var(--im-space-4); }
/* Inside article prose (the route page), prose.css styles every table as a
   scrolling block with small-caps header cells; the ledger is not that table.
   Two classes so it outranks .im-prose table / th / td whatever the load order,
   and the ledger's own wrap does not re-indent inside the article column. */
.im-prose .im-ledger { display: table; margin: var(--im-space-6) 0 0; font-size: inherit; overflow: visible; }
.im-prose .im-ledger th, .im-prose .im-ledger td { padding: var(--im-space-4) 0; border-bottom: 0; }
.im-prose .im-ledger th { font-size: 15.5px; letter-spacing: normal; text-transform: none; color: var(--im-ink); padding-right: var(--im-space-6); }
.im-prose .im-ledger .im-ledger__figure { text-align: right; }
.im-prose .im-wrap:has(> .im-ledger) { max-width: none; margin: 0; padding: 0; }
@media (max-width: 640px) {
  .im-ledger, .im-ledger tbody, .im-ledger__row { display: block; }
  .im-ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--im-space-4); padding: var(--im-space-3) 0; }
  .im-ledger__label, .im-ledger__detail, .im-ledger__figure { display: block; width: auto; padding: 0; }
  .im-ledger__detail { grid-column: 1 / -1; order: 3; margin-top: var(--im-space-1); }
  .im-ledger__figure { max-width: none; }
}

/* ---- Pricing / transparency (two-column: headline figure + ledger detail).
   Mirrors the .im-trust-band__inner grid rhythm. ---- */
.im-pricing2col { display: grid; grid-template-columns: minmax(0, 320px) 1fr;
  gap: var(--im-space-12); align-items: start; margin-top: var(--im-space-8); }
/* ledger carries its own .im-wrap; unspool it inside the grid track so it does
   not re-apply the page max-width and side padding within the column. */
.im-pricing2col__detail > .im-wrap { max-width: none; margin: 0; padding: 0; }
.im-pricing2col__detail .im-ledger { margin-top: 0; }
.im-pricing2col__figure { display: block; font-family: var(--im-font-display); font-weight: 600;
  font-variant-numeric: tabular-nums; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.02em; color: var(--im-ink); }
.im-pricing2col__label { display: block; color: var(--im-text-200); margin-top: var(--im-space-2); }
.im-pricing2col__sub { display: block; color: var(--im-text-muted); font-size: 13px; margin-top: var(--im-space-1); }
@media (max-width: 760px) { .im-pricing2col { grid-template-columns: 1fr; gap: var(--im-space-8); } }

/* ---- Breadcrumb ---- */
.im-breadcrumb { padding-top: var(--im-space-6); }
.im-breadcrumb .im-wrap { font-family: var(--im-font-display); font-size: 11px; letter-spacing: .05em; color: var(--im-text-muted); }
.im-breadcrumb a { color: var(--im-text-muted); text-decoration: none; }
.im-breadcrumb a:hover { color: var(--im-accent-200); }
.im-crumb-sep { margin: 0 6px; }
/* Thin breadcrumb bar that leads a page above a hero (country home): keeps the
   nav clearance from .im-navbar-offset but drops the --tight bottom padding, so
   the gap to the hero below is owned once, by the hero's own top padding. */
.im-crumbbar { padding-bottom: 0; }

/* A crumbbar leading a compact strands hero (country / business country home)
   needs no horizontal override: the hero copy is now contained to the same centred
   .im-wrap spine (see `.st-hero--compact .st-hero__content` in strands.css), so the
   breadcrumb's default centred .im-wrap already shares the hero H1's left edge at
   every width. Both move together past the 1280px column instead of drifting apart. */

/* Phones: one line, never a two-line wrap that collides with the fixed nav.
   Intermediate crumbs and their separators are hidden, leaving a truncated
   `first / … / current` trail. The ellipsis is CSS-generated on the first
   crumb and only when the trail actually collapsed (>2 crumbs → .has-collapsed),
   so a 2-crumb trail renders `first / current` with no stray ellipsis.
   The one remaining link gets a ≥44px tap area. */
@media (max-width: 575.98px) {
  .im-breadcrumb .im-wrap { display: flex; flex-wrap: nowrap; align-items: center;
    white-space: nowrap; overflow: hidden; }
  .im-crumb { overflow: hidden; text-overflow: ellipsis; }
  .im-crumb:not(.im-crumb--first):not(.im-crumb--current) { display: none; }
  .im-crumb-sep { display: none; }
  .im-breadcrumb .has-collapsed .im-crumb--first::after { content: " / …"; }
  .im-crumb--current::before { content: "/ "; margin-left: 2px; }
  .im-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---- Hero (light editorial + drifting warm mesh) ----
 * Named .im-hero-block (not .im-hero) to avoid a collision with the legacy
 * mvp/hero-v2.css .im-hero rule, which loads AFTER blocks.css in header.html and
 * would otherwise override overflow:hidden with overflow:visible (hero mesh
 * un-clipped -> horizontal page overflow). Keep this distinct from hero-v2.css. */
/* Content-page hero: a tighter masthead than the world-home landing hero.
   These pages lead with a breadcrumb, so the hero content top-aligns just
   below it (flex-start + measured padding) instead of centring in a near
   full-height block — which left a large void between breadcrumb and title. */
/* Height is content-driven (min-height:auto), not a fixed 60vh — a sparse legal
   masthead (privacy/terms: just a title + subtitle) otherwise reserved ~60vh and
   left a large empty band before the content. padding defines the breathing room;
   the content section below adds the rest. */
.im-hero-block { position: relative; overflow: hidden; min-height: auto; display: flex;
  flex-direction: column; justify-content: flex-start; background: var(--im-paper);
  padding-top: var(--im-space-10); padding-bottom: var(--im-space-12); }
.im-hero-block__mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.im-hero-block__mesh::before, .im-hero-block__mesh::after { content: ""; position: absolute; border-radius: 50%;
  filter: blur(66px); opacity: .30; }
.im-hero-block__mesh::before { width: 40vw; height: 40vw; left: -6vw; top: -8vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--im-band) 85%, var(--im-accent-100)), transparent 68%);
  animation: im-mesh-a 34s ease-in-out infinite alternate; }
.im-hero-block__mesh::after { width: 34vw; height: 34vw; right: -4vw; bottom: -10vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--im-band) 80%, var(--im-accent-100)), transparent 68%);
  animation: im-mesh-b 40s ease-in-out infinite alternate; }
@keyframes im-mesh-a { to { transform: translate(3vw, 2vw) scale(1.06); } }
@keyframes im-mesh-b { to { transform: translate(-2.5vw, -1.5vw) scale(1.05); } }
/* width:100% is load-bearing: .im-hero-block is a flex column, and .im-wrap's
   `margin:0 auto` on a flex item shrink-wraps the body to its content and centres
   it (title floats in from mid-page). width:100% makes it fill the 1280 wrap so the
   copy left-aligns on the content spine, sharing the breadcrumb's edge. */
.im-hero-block__body { position: relative; z-index: 1; width: 100%; }
/* Small static country emblem above the kicker on deeper (category/detail) pages
   (parts/blocks/region_medallion.html). Left-aligned to match the hero. */
.region-medallion { display: block; width: 84px; height: 84px; margin: 0 0 var(--im-space-4); }
.region-medallion svg { display: block; width: 100%; height: 100%; }

/* Class-B marketing imagery (parts/blocks/marketing_image.html, rendered by the
   {% marketing_image %} tag). Responsive via srcset; CLS held by aspect-ratio
   (--im-marketing-ratio, set inline per call). Band fill shows while loading. */
.im-marketing-img { display: block; width: 100%; height: auto; object-fit: cover;
  aspect-ratio: var(--im-marketing-ratio, 16 / 9); background: var(--im-band); }

/* Country-home dark feature band (navy, copy + Class-A static image). */
.im-feature-band { background: var(--im-dark-navy); color: #eef2f6; padding: var(--im-space-16) 0; }
.im-feature-band__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--im-space-12); align-items: center; }
.im-feature-band__kicker { font-family: var(--im-font-display); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--im-accent-100); margin-bottom: var(--im-space-4); }
/* Explicit colour, not inherited: the same hazard .im-trust-band__title
   documents. A legacy heading rule was painting this ink on navy (2026-09-13). */
.im-feature-band__title { font-family: var(--im-font-display); font-weight: 600; color: #eef2f6;
  font-size: clamp(26px, 3.2vw, 34px); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 var(--im-space-4); }
/* Ledger treatment (2026-08-30): the employer feature pages' primary
   moment — serif, one size step up, same face/tracking as
   .im-trust-band__title's own Ledger upgrade, reused rather than a third
   navy-band type system. Opt-in via modifier="im-feature-band--ledger"
   (education.html / cta_band.html's convention): .im-feature-band also
   carries the global home's feature band, which keeps its display-face
   title untouched. */
.im-feature-band--ledger .im-feature-band__title {
  font-family: var(--im-font-serif); font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.08;
  letter-spacing: var(--im-track-title);
}
.im-feature-band__body { color: #c4cdd8; max-width: 46ch; margin: 0 0 var(--im-space-5); }
.im-feature-band__link { font-family: var(--im-font-display); font-size: 13px; color: var(--im-accent-100);
  border-bottom: 1px solid var(--im-accent-100); padding-bottom: 2px; text-decoration: none; }
.im-feature-band__img { display: block; width: 100%; height: auto; object-fit: cover;
  aspect-ratio: 16 / 9; border-radius: var(--im-radius-card); }


/* ---- Motion: the ending band (parts/motion/ending_band.html, drawn by
   assets/js/motion/ending-band.js). A layer behind every closing CTA:
   paper ground, the canvas fills the section, the grain is a static SVG noise
   over it, and the copy sits above both. The section grows so the threads
   have room to comb together beside and below the copy. ---- */
.im-closing-section { position: relative; isolation: isolate; overflow: hidden; background: var(--im-paper);
  padding-top: clamp(72px, 10vw, 128px); padding-bottom: clamp(120px, 14vw, 176px); }
.im-closing-section .im-closing { position: relative; z-index: 2; }
.im-eb { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.im-eb__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.im-eb__grain { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .1; filter: invert(1); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.9 0 0 0 -0.92'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 240px 240px; }

/* Groundwork punch-through band (category hub) — a full-bleed section break in
   the category's concept hue, with the section's own heading punched through
   the middle on a paper plate. This is a large FLAT surface, not a small
   engraved mark, so it does not reuse the material-band/route-plate wash
   recipe (raw hue at fixed pale wash-a/wash-b lightness, meant for a small
   radial bloom): stretched across a full-bleed band a raw tint of CONCEPT_HUES
   drifts grey-lilac, because every neutral here is green-cast (--im-ink is "in
   family with the stone ramp") and an unmixed hue has no green in it. Mixed
   INTO --im-band instead, same formula .im-fork__half uses for its half-
   viewport surface. background-color/background-image split: --im-punch-h is empty for an unmapped concept, which
   only invalidates the background-image mix, never the band's solid fill. */
.im-punch { position: relative; overflow: hidden; display: flex;
  align-items: center; justify-content: center;
  min-height: clamp(260px, 32vw, 380px); }
.im-punch__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.im-punch__ph { position: absolute; inset: 0;
  background-color: var(--im-band);
  background-image: linear-gradient(
      color-mix(in srgb, hsl(var(--im-punch-h) 52% 62%) 20%, var(--im-band)),
      color-mix(in srgb, hsl(var(--im-punch-h) 52% 62%) 20%, var(--im-band))); }
.im-punch .im-wrap { position: relative; z-index: 1; display: flex; justify-content: center; }
.im-punch__plate { background: var(--im-card-bg); border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card); box-shadow: var(--im-shadow-2);
  padding: var(--im-space-8) var(--im-space-10); max-width: 62ch; text-align: center; }
.im-punch__plate .im-sech { max-width: none; }
@media (max-width: 600px) {
  .im-punch__plate { padding: var(--im-space-6) var(--im-space-6); }
}


/* Sticky bottom CTA bar (service leaf) — carries the page's own primary CTA
   while the reader scrolls. Hidden by default (visibility, not display: an
   invisible element stays out of the tab order and off screen-reader output,
   and becomes reachable the instant JS reveals it, with no extra ARIA
   plumbing needed either way). assets/js/marketing/sticky-cta.js toggles
   --visible once the reader is past the hero's own CTA and hides it again
   once the footer is in view, so it never sits over page content or the
   footer. */
.im-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  visibility: hidden; opacity: 0; transform: translateY(100%);
  transition: transform var(--im-dur) var(--im-ease), opacity var(--im-dur) var(--im-ease);
  background: var(--im-ink); border-top: 1px solid var(--im-ink-soft); }
.im-sticky-cta--visible { visibility: visible; opacity: 1; transform: translateY(0); }
.im-sticky-cta__inner { display: flex; align-items: center; justify-content: center;
  gap: var(--im-space-4); padding: var(--im-space-3) 0; }
.im-sticky-cta__dismiss { flex: none; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--im-radius-control);
  color: var(--im-paper); font-size: 22px; line-height: 1; cursor: pointer; }
.im-sticky-cta__dismiss:hover, .im-sticky-cta__dismiss:focus-visible { background: var(--im-ink-soft); }
.im-sticky-cta__dismiss:focus-visible { outline: 2px solid var(--im-accent-100); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .im-sticky-cta { transition: none; } }
@media print { .im-sticky-cta { display: none !important; } }

/* Country-home regulated-partner trust band. Two shapes, one grid: our own
   practice with a portrait (UK), or an independent local professional with a
   credential plate (the eight partner markets). Track 1 is never empty; see
   trust_band.html on why that is a single gate and not two. */
/* Navy, not the mid tint (Rohan, 2026-08-10). It is the same deep ground
   .im-feature-band carries on the global home, and it is the right one for this
   band under ADR-012 am. 4: page rhythm is paper against dark and the mid is
   furniture, so a full-bleed section painted --im-band was the one thing that
   rule says a full-bleed strip may not be. Named colours rather than tokens
   below because that is what .im-feature-band established for this ground; a
   token pair for it is worth having but is a wider change than this band.
   NO HAIRLINES: the colour change is the edge, and .im-feature-band draws none
   for the same reason. */
.im-trust-band { background: var(--im-dark-navy); color: #eef2f6; padding: var(--im-space-16) 0; }
/* The closing CTA follows this band on the country home and draws its own top
   hairline. Navy meeting paper is already a hard edge, so the line would be a
   sage thread laid across it. Same collapse idiom as --band + --closing. */
.im-trust-band + .im-closing-section { border-top: 0; }
.im-trust-band__inner { display: grid; grid-template-columns: minmax(0, 320px) 1fr;
  gap: var(--im-space-12); align-items: center; }
/* The same 320px cap as the credential plate below, for the same reason: the
   grid track holds the width on desktop, but below 861px it collapses to 1fr and
   an uncapped width:100% grew this square to 796px at a 860px viewport while the
   plate stayed at 320. Both shapes of the band share one rhythm or neither does. */
.im-trust-band__img { display: block; width: 100%; max-width: 320px; height: auto; object-fit: cover;
  aspect-ratio: 1 / 1; border-radius: var(--im-radius-card); }
/* Kicker: the LIGHT teal, not accent-200. accent-200 (#00668c) against navy is
   about 1.9:1 and unreadable — the token comment on --im-dark-navy says this
   ground carries white text only, and accent-100 is what .im-feature-band__kicker
   uses on the same ground. The UK branch renders no kicker at all now
   (trust_band.html); this dresses the partner and bloc labels. */
.im-trust-band .im-seclab { color: var(--im-accent-100); }
/* Explicit, not inherited. The band sets `color` on itself, but a heading that
   relies on inheritance is one legacy `h2 {color}` away from going ink-on-navy,
   which is the ~1.06:1 the token comment warns about. */
/* The Ledger treatment (2026-08-30): serif, not the display sans this line
   used before, and one size step up — the band's job is a confident claim,
   not a section label. Same face and tracking token as .im-hero-block__title
   (Spectral, --im-track-title), one clamp step below it because this title
   still shares the screen with its own body copy and attribution rather than
   leading a page. */
.im-trust-band__title { font-family: var(--im-font-serif); font-weight: 400; color: #eef2f6;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.08; letter-spacing: var(--im-track-title);
  margin: var(--im-space-3) 0 var(--im-space-4); }
/* Body and attribution: the same two steps down from white that
   .im-feature-band__body takes on this ground, rather than the paper-mixed
   --im-text-200 / --im-text-muted, which are near-black. */
.im-trust-band__body { color: #c4cdd8; max-width: 52ch; margin: 0 0 var(--im-space-3); }
.im-trust-band__who { font-family: var(--im-font-display); font-size: 12px; color: rgba(255, 255, 255, .66); }
/* The partner band has no attribution line (the plate carries the regulator), so
   the trailing margin would push the copy off the square's optical centre. */
.im-trust-band__copy > :last-child { margin-bottom: 0; }

/* ---- Straddling fact row (the "Ledger" treatment, dormant — trust_band.html's
 * docstring is the source of truth for why no view feeds it yet). Two existing
 * primitives, combined rather than a third invented: the figure+label shape is
 * .im-expertise-band__stats' (tabular-nums serif-weight figure over a muted
 * uppercase label), and the straddle itself is .im-overlap's technique (a
 * negative margin + relative position + raised z-index), applied to the
 * trailing edge instead of the leading one — margin does not affect a box's
 * own painted height, only the flow-height the next box measures from, so the
 * cards paint their full height while the band around them shrinks to make
 * room, and the bottom half lands on the paper section below. ---- */
.im-trust-band__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--im-space-5);
  margin-top: var(--im-space-10);
  /* Half the card's own rendered height, so half of it paints past the band's
     bottom edge. Approximate by nature (CSS has no "half of a sibling"), so
     it is pinned to the nearest space token rather than a bespoke pixel value. */
  margin-bottom: calc(-1 * var(--im-space-10));
  position: relative;
  z-index: 2;
}
.im-trust-band__fact {
  background: var(--im-paper);
  border-radius: var(--im-radius-card);
  box-shadow: var(--im-shadow-2);
  padding: var(--im-space-5) var(--im-space-5) var(--im-space-6);
  text-align: center;
}
.im-trust-band__fact-figure { display: block; font-family: var(--im-font-serif); font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1; color: var(--im-ink); font-variant-numeric: tabular-nums; }
.im-trust-band__fact-label { display: block; font-family: var(--im-font-display); font-size: 12px;
  letter-spacing: .04em; color: var(--im-text-muted); margin-top: var(--im-space-2); }
@media (max-width: 860px) {
  /* Degrades to a plain stacked row: the straddle is a desktop flourish, and a
     clipped card on a narrow viewport (where the band's own media/copy grid
     already stacks) would read as broken rather than bold. */
  .im-trust-band__facts { grid-template-columns: 1fr; margin-bottom: 0; position: static; }
  .im-trust-band__fact { box-shadow: none; border: 1px solid var(--im-hairline); }
}

/* ---- Credential plate: the partner-market stand-in for the UK portrait ----
 * Same 320px track and the same square, so both shapes of the band keep one
 * rhythm. Typographic and not pictorial: trust_band.html sets out why no firm
 * logo and no regulator crest may sit here. The inset hairline is the only
 * ornament, and it is what makes the panel read as a plate rather than as an
 * image that failed to load. */
.im-trust-band__plate {
  position: relative;
  /* The grid track caps the width on desktop. This keeps it a 320px square once
     the track collapses to 1fr below 861px, instead of a 700px one. */
  max-width: 320px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card);
  background: var(--im-paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--im-space-8);
  text-align: center;
}
.im-trust-band__plate::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--im-hairline);
  border-radius: calc(var(--im-radius-card) - 4px);
  pointer-events: none;
}
.im-trust-band__plate-title {
  font-family: var(--im-font-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: var(--im-track-title);
  color: var(--im-ink);
  text-wrap: balance;
}
/* Romanisation, so a reader can say 行政書士 and փաստաբան out loud. Renders only
   where the registry has one, and hugs the title it belongs to. */
.im-trust-band__plate-say {
  font-family: var(--im-font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--im-text-muted);
  margin-top: var(--im-space-1);
}
.im-trust-band__plate-rule { width: 42px; height: 1px; background: var(--im-accent-200);
  margin: var(--im-space-4) 0; }
/* The regulator keeps its own capitalisation. Uppercasing a proper noun in
   another language gets it wrong (Türkiye Barolar Birliği needs a dotted capital
   İ, which text-transform only produces under a lang attribute this line cannot
   carry: the regulator's language is not always the title's, and Armenia's
   regulator is named in English). */
.im-trust-band__plate-reg {
  font-family: var(--im-font-display);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--im-text-200);
  max-width: 26ch;
}
.im-trust-band__plate-place {
  font-family: var(--im-font-display);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--im-text-muted);
  margin-top: var(--im-space-3);
}
@media (max-width: 860px) {
  .im-feature-band__inner, .im-trust-band__inner { grid-template-columns: 1fr; }
}
.im-hero-block__kicker { font-family: var(--im-font-display); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--im-accent-200); margin-bottom: var(--im-space-5); }
/* Tier 2 · Page-hero title (privacy/terms, guides hubs, service/category heroes,
   and — unified below — the blog article header). One scale ~52px, display
   tracking, lh 1.05. Sits under Tier 1 (.st-hero__title masthead ~64px) and above
   Tier 3 (.im-feed-title feed/index header ~40px). Tracking follows size per the
   tokens.css ramp (>=2.5rem -> display). */
.im-hero-block__title { font-family: var(--im-font-serif); font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.25rem); line-height: 1.05; letter-spacing: var(--im-track-display);
  color: var(--im-ink); max-width: 18ch; margin: 0; text-wrap: balance; }
/* Tool-page title cap. The global home hero tops out at 50px
   (.wm-hero__title, mvp/worldmap_hero.css), and the default hero title above
   reaches 52px — so the salary calculator and the processing-times tracker were
   both rendering LARGER than the front door. A tool is subordinate to the home
   page, so its title caps one step below it. A BEM modifier rather than a
   standalone name: .im-tool-title is already the nav Tools-menu link label
   (parts/nav.html), and two unrelated components sharing one class name is a
   collision waiting for whichever is edited second. */
.im-hero-block__title--tool { font-size: clamp(2.1rem, 3.6vw, 3rem); max-width: 20ch; }

.im-hero-block__lede { font-family: var(--im-font-body); font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  color: var(--im-text-200); line-height: 1.45; max-width: 52ch; margin-top: var(--im-space-5); }
.im-hero-block__ctas { display: flex; gap: var(--im-space-3); margin-top: var(--im-space-8); flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .im-hero-block__mesh::before, .im-hero-block__mesh::after { animation: none; } }

/* Partner-attribution note under the hero CTA (IAA — regulated-adviser wording). */
.im-cta-note { font-size: 12.5px; color: var(--im-text-muted); margin: 8px 0 0; }

/* ---- Buttons reuse primitives .im-btn / .im-btn--ghost; add an on-ink variant ---- */
.im-btn--on-ink { background: var(--im-paper); color: var(--im-ink); border-color: var(--im-paper); }
.im-btn--on-ink:hover { background: var(--im-band); border-color: var(--im-band); color: var(--im-ink); }
.im-btn--on-ink:active { background: var(--im-paper); border-color: var(--im-paper); color: var(--im-ink); }

/* ---- Pillars (editorial rows, teal serif numerals) ---- */
.im-pillars { margin-top: var(--im-space-8); }
.im-pillar { display: grid; grid-template-columns: 80px 1fr; gap: var(--im-space-6); align-items: baseline;
  padding: var(--im-space-6) 0; border-top: 1px solid var(--im-hairline); }
.im-pillar:first-child { border-top: 0; }
.im-pillar__no { font-family: var(--im-font-serif); font-weight: 500; font-size: 42px; color: var(--im-accent-200); line-height: 1; }
/* Unnumbered rows for a list that is not a sequence (pillars.html plain=True). */
.im-pillars--plain .im-pillar { grid-template-columns: minmax(0, 1fr); }
.im-pillar__title { font-family: var(--im-font-display); font-weight: 600; font-size: 25px; color: var(--im-ink); margin: 0; }
.im-pillar__body { font-family: var(--im-font-body, "Hanken Grotesk", system-ui, -apple-system, sans-serif);
  font-size: 14.5px; color: var(--im-text-muted); line-height: 1.6; margin-top: var(--im-space-2); max-width: 64ch; }

/* ---- How-it-works timeline (horizontal, ringed teal numbers + connector) ---- */
.im-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--im-space-8); }
.im-timeline--4 { grid-template-columns: repeat(4, 1fr); }
.im-step { padding-right: var(--im-space-6); position: relative; }
.im-step:not(:last-child)::after { content: ""; position: absolute; top: 15px; right: 13px; left: 46px; height: 1px; background: var(--im-hairline); }
.im-step__no { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--im-accent-200);
  color: var(--im-accent-200); font-family: var(--im-font-display); font-size: 12px; display: grid; place-items: center;
  background: var(--im-paper); position: relative; z-index: 1; }
.im-block-section--band .im-step__no { background: var(--im-band); }
.im-step__title { font-family: var(--im-font-display); font-weight: 600; font-size: 20px; margin: var(--im-space-4) 0 var(--im-space-2); }
.im-step__body { font-size: 13px; color: var(--im-text-muted); line-height: 1.55; }
@media (max-width: 760px) { .im-timeline { grid-template-columns: 1fr; gap: var(--im-space-5); } .im-step:not(:last-child)::after { display: none; } }

/* ---- Module grid ---- */
.im-modgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--im-space-4); margin-top: var(--im-space-8); }
.im-modcard { border: 1px solid var(--im-hairline); border-radius: var(--im-radius-card); padding: var(--im-space-6);
  background: var(--im-paper); text-decoration: none; color: var(--im-ink); display: block;
  transition: transform var(--im-dur) var(--im-ease), box-shadow var(--im-dur) var(--im-ease), border-color var(--im-dur) var(--im-ease); }
.im-modcard:hover { transform: translateY(-3px); box-shadow: var(--im-shadow-2); border-color: var(--im-ink); }
.im-modcard:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 2px; }
.im-modcard__kicker { font-family: var(--im-font-display); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--im-accent-200); }
.im-modcard__title { font-family: var(--im-font-display); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: var(--im-track-head); margin: var(--im-space-2) 0 var(--im-space-1); }
.im-modcard__body { font-size: 13px; color: var(--im-text-muted); line-height: 1.5; }
/* Optional Class-B category tile image: bleeds to the card edges, top-rounded. */
.im-modcard__media { margin: calc(-1 * var(--im-space-6)) calc(-1 * var(--im-space-6)) var(--im-space-5);
  border-radius: var(--im-radius-card) var(--im-radius-card) 0 0; overflow: hidden; }
.im-modcard__media .im-modcard__img { border-radius: 0; }
.im-modcard__lk { font-family: var(--im-font-display); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--im-ink); border-bottom: 1px solid var(--im-accent-200); padding-bottom: 2px; display: inline-block; margin-top: var(--im-space-4); }
/* Not-yet-available tool card: muted, non-interactive (no link, no hover lift). */
.im-modcard--soon { opacity: .6; pointer-events: none; }
.im-modcard--soon:hover { transform: none; box-shadow: none; border-color: var(--im-hairline); }
@media (max-width: 760px) { .im-modgrid { grid-template-columns: 1fr; } }
/* A hub loops this block once per spoke group, so groups met edge to edge with 0px
   between them and each group's label read as a footer to the cards above rather
   than a heading for the cards below. The label sits ~6px above its own grid, so
   the separation has to come from outside the block. Adjacent-sibling, not
   :not(:first-child): the single-grid call sites (feature shell, compliance
   platform) must keep their existing spacing. */
.im-modgroup + .im-modgroup { margin-top: var(--im-space-12); }

/* ---- Mid-CTA band (contained rounded ink) ---- */
.im-midcta { background: var(--im-ink); color: var(--im-paper); border-radius: var(--im-radius-card);
  padding: var(--im-space-10) var(--im-space-10); display: flex; align-items: center; justify-content: space-between;
  gap: var(--im-space-6); flex-wrap: wrap; }
.im-midcta__title { font-family: var(--im-font-display); font-weight: 600; font-size: 28px; line-height: 1.12; color: var(--im-paper); max-width: 22ch; margin: 0; }
.im-midcta__body { font-family: var(--im-font-body, "Hanken Grotesk", system-ui, -apple-system, sans-serif); font-size: 15px;
  line-height: 1.6; color: var(--im-paper); opacity: .82; margin: var(--im-space-2) 0 0; max-width: 52ch; }
.im-midcta__ctas { display: flex; gap: var(--im-space-3); flex-wrap: wrap; }

/* ---- FAQ (native details) ---- */
.im-faq { margin-top: var(--im-space-6); max-width: 820px; }
.im-faq__item { border-top: 1px solid var(--im-hairline); }
.im-faq__item:first-child { border-top: 0; }
.im-faq__q { font-family: var(--im-font-display); font-weight: 600; font-size: 19px; color: var(--im-ink);
  padding: var(--im-space-4) 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--im-space-4); }
.im-faq__q::after { content: "+"; font-family: var(--im-font-display); color: var(--im-accent-200); font-size: 18px; }
.im-faq__item[open] .im-faq__q::after { content: "\2013"; }
.im-faq__q::-webkit-details-marker { display: none; }
.im-faq__q:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 2px; }
.im-faq__a { font-size: 14px; color: var(--im-text-muted); line-height: 1.65; padding: 0 0 var(--im-space-4); max-width: 70ch; }

/* ---- Closing CTA ---- */
/* The block is a hairline-framed zone, and it owns both lines rather than
   borrowing them. The footer's border-top closes it below on every page; this
   opens it above. Before this rule the top line came from a preceding
   .im-block-section--band, so the CTA was framed on the pages that happened to
   end with a band and floated on the rest (About, all six category hubs). */
.im-closing-section { border-top: 1px solid var(--im-hairline); }
/* Never two lines where a band already drew one — the borders would touch and
   read as 2px. Same collapse idiom as --band + --band above. */
.im-block-section--band + .im-closing-section { border-top: 0; }
.im-closing { text-align: center; }
.im-closing__title { font-family: var(--im-font-display); font-weight: 600; font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05; letter-spacing: -.015em; color: var(--im-ink); }
.im-closing__lede { font-size: 15px; color: var(--im-text-muted); margin: var(--im-space-3) auto var(--im-space-6); max-width: 48ch; }
.im-closing__ctas { display: flex; justify-content: center; gap: var(--im-space-3); flex-wrap: wrap; }

/* ---- Wall-breaking accent utilities (opt-in, use <=1-2 per page) ---- */
.im-overlap { margin-top: calc(-1 * var(--im-space-16)); position: relative; z-index: 2; }
.im-block-section--pad-b { padding-bottom: calc(var(--im-space-16) + var(--im-space-12)); }

/* ---- About page (Phase E) — mission bullets, founder module, value cards. Tokens only. ---- */
.im-about-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--im-space-3) var(--im-space-6); }
.im-about-bullets li { position: relative; padding-left: var(--im-space-5); font-family: var(--im-font-display);
  font-size: 13px; letter-spacing: .01em; color: var(--im-text-200); }
.im-about-bullets li::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px;
  background: var(--im-accent-200); border-radius: 50%; }

.im-about-founder { display: grid; grid-template-columns: 1fr; gap: var(--im-space-8); align-items: center; }
@media (min-width: 768px) { .im-about-founder { grid-template-columns: 320px minmax(0, 1fr); gap: var(--im-space-12); } }
.im-about-founder__media img { display: block; width: 100%; max-width: 360px; height: auto; border-radius: var(--im-radius-card); }
.im-about-founder__name { font-family: var(--im-font-display); font-size: 30px; font-weight: 600; color: var(--im-ink); margin: var(--im-space-2) 0 0; }
.im-about-founder__role { font-family: var(--im-font-display); font-size: 13px; color: var(--im-text-200); margin: var(--im-space-1) 0 var(--im-space-3); }
.im-about-founder__note { font-size: 13.5px; line-height: 1.6; color: var(--im-text-200); max-width: 46ch; }
.im-about-founder__quote { margin: var(--im-space-5) 0 0; padding: var(--im-space-2) 0 var(--im-space-2) var(--im-space-5);
  border-left: 3px solid var(--im-accent-200); font-family: var(--im-font-display); font-size: 20px; line-height: 1.5; color: var(--im-ink); }

.im-about-values { display: grid; grid-template-columns: 1fr; gap: var(--im-space-6); margin-top: var(--im-space-8); }
@media (min-width: 640px) { .im-about-values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .im-about-values { grid-template-columns: repeat(3, 1fr); } }
.im-about-values__card { background: var(--im-paper); border: 1px solid var(--im-hairline); border-radius: var(--im-radius-card); padding: var(--im-space-6); }
.im-about-values__card h3 { font-family: var(--im-font-display); font-size: 18px; font-weight: 600; color: var(--im-ink); margin: 0 0 var(--im-space-2); }
.im-about-values__card p { font-size: 14.5px; line-height: 1.65; color: var(--im-text-200); margin: 0; }

/* ---- Surface 2 content blocks (permitted-not). Info-only; no verdict-by-colour. Tokens only. ---- */
.im-permnot { display: grid; grid-template-columns: 1fr; gap: var(--im-space-6); margin-top: var(--im-space-6); }
@media (min-width: 700px) { .im-permnot { grid-template-columns: 1fr 1fr; gap: var(--im-space-8); } }
.im-permnot__head { font-family: var(--im-font-display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--im-text-muted); margin: 0 0 var(--im-space-3); padding-bottom: var(--im-space-2); border-bottom: 1px solid var(--im-hairline); }
.im-permnot__col ul { list-style: none; margin: 0; padding: 0; }
.im-permnot__col li { position: relative; padding-left: var(--im-space-5); margin-bottom: var(--im-space-2);
  font-size: 14.5px; line-height: 1.55; color: var(--im-ink); }
.im-permnot__col li::before { position: absolute; left: 0; top: 0; font-family: var(--im-font-display); font-size: 14px; }
.im-permnot__col--yes li::before { content: "+"; color: var(--im-accent-200); }
.im-permnot__col--no li::before { content: "\2013"; color: var(--im-text-muted); }

/* ---- Individual service key-facts grid — restyle of the DB `features` HTML (.col > h2 label > ul).
 * The DB HTML bakes in Bootstrap utility classes (.fs-base/.fw-normal/.text-muted on the <h2>,
 * .fs-lg/.fw-semibold/.text-dark on the <ul>) and the theme ships those utilities as !important,
 * so `!important` is required here to win the size/weight/colour props (specificity alone loses to
 * an !important utility). We cannot strip the classes without editing DB content. Tokens only. ---- */
.im-service-facts { display: grid; grid-template-columns: 1fr; gap: var(--im-space-6) var(--im-space-8); }
@media (min-width: 640px) { .im-service-facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .im-service-facts { grid-template-columns: repeat(4, 1fr); } }
.im-service-facts .col { min-width: 0; }
.im-service-facts h2 { font-family: var(--im-font-display); font-size: 11px !important; letter-spacing: .12em; text-transform: uppercase;
  color: var(--im-text-muted) !important; font-weight: 400 !important; margin: 0 0 var(--im-space-2); }
.im-service-facts ul { list-style: none; margin: 0; padding: 0; }
.im-service-facts li { font-family: var(--im-font-serif); font-weight: 500 !important; font-size: 15px !important; line-height: 1.4;
  color: var(--im-ink) !important; padding: var(--im-space-1) 0; border-top: 1px solid var(--im-hairline); }
.im-service-facts li:first-child { border-top: 0; }

/* ---- Surface 2 listing: multi-service link-list card variant (non-link card holding service links). Tokens only. ---- */
.im-modcard--static { cursor: default; }
.im-modcard--static:hover { transform: none; box-shadow: none; border-color: var(--im-hairline); }
.im-modcard__links { list-style: none; margin: var(--im-space-3) 0 0; padding: 0; }
.im-modcard__links a { display: flex; justify-content: space-between; gap: var(--im-space-3); align-items: baseline;
  color: var(--im-ink); text-decoration: none; font-size: 14px; line-height: 1.5;
  padding: var(--im-space-2) 0; border-top: 1px solid var(--im-hairline); }
.im-modcard__links li:first-child a { border-top: 0; }
.im-modcard__links a:hover, .im-modcard__links a:focus-visible { color: var(--im-accent-200); }

/* ---- Blog: article header + byline ---- */
/* Tier 2 · Page-hero title — unified with .im-hero-block__title (same scale,
   display tracking, lh) so a blog article and a guides/legal hero read as one
   tier. Was clamp(2rem,4.5vw,3.25rem) with the looser title tracking, which drifted
   from the same-size hero-block titles. */
.im-article-head__title { font-family: var(--im-font-serif); font-weight: 400; font-size: clamp(2.2rem, 4vw, 3.25rem);
  line-height: 1.05; letter-spacing: var(--im-track-display); color: var(--im-ink); margin: var(--im-space-3) 0 0;
  text-wrap: balance; }
.im-article-head__standfirst { font-family: var(--im-font-body); font-size: 20px; line-height: 1.5; color: var(--im-text-200);
  margin: var(--im-space-4) 0 0; max-width: 62ch; }
/* Consolidated blog author section (byline + credentials + share in one). */
.im-author { display: flex; align-items: center; gap: var(--im-space-4); margin-top: var(--im-space-6);
  padding-top: var(--im-space-5); border-top: 1px solid var(--im-hairline); flex-wrap: wrap; }
.im-author__avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.im-author__meta { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.im-author__name { font-weight: 600; font-size: 15px; color: var(--im-ink); text-decoration: none; }
.im-author__name:hover { color: var(--im-accent-200); }
.im-author__sub { font-family: var(--im-font-display); font-size: 12px; color: var(--im-text-muted); }
.im-author__links { display: flex; align-items: center; gap: var(--im-space-4); }
.im-author__share { display: inline-flex; align-items: center; gap: var(--im-space-3); font-size: 16px; }
.im-author__share a { color: var(--im-text-muted); }
.im-author__share a:hover { color: var(--im-accent-200); }

/* ---- Blog: spoke -> hub link (a post that belongs to a content guide) ---- */
.im-hublink { display: inline-flex; align-items: center; gap: var(--im-space-3); min-height: 44px;
  padding: var(--im-space-3) var(--im-space-5); border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-pill); text-decoration: none;
  transition: border-color var(--im-dur) var(--im-ease); }
.im-hublink:hover { border-color: var(--im-accent-200); }
.im-hublink:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 1px; }
.im-hublink__label { font-family: var(--im-font-display); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--im-text-muted); }
.im-hublink__title { font-family: var(--im-font-display); font-weight: 600; font-size: 14px; color: var(--im-ink); }
.im-hublink__arrow { font-size: 13px; color: var(--im-accent-200); }
/* Cross-audience chip: the same pill pointing at the OTHER audience's surface
   ("Starting a business instead?" on the employer home). Sits on its own line
   under a card grid rather than inline after prose, so all it needs is the top
   margin — the base .im-hublink is already inline-flex, and re-declaring it here
   said the modifier changed the box when it does not. Tokens only. */
.im-hublink--cross { margin-top: var(--im-space-6); }
/* After-approval bridge chip (parts/blocks/after_approval_bridge.html): the same
   pill on its own line under a reassurance line rather than under a card grid.
   Identical rule to --cross and deliberately not that class: --cross means "the
   other audience's surface", this one is a same-audience hand-off, and a shared
   name would make the next reader think one of the two was miscategorised.
   Tokens only. */
.im-bridge__link { margin-top: var(--im-space-6); }

/* ---- Blog: quick-answer ---- */
.im-quickans { border-left: 3px solid var(--im-accent-200); background: var(--im-band); border-radius: var(--im-radius-card);
  padding: var(--im-space-5) var(--im-space-6); margin-top: var(--im-space-6); }
.im-quickans__label { font-family: var(--im-font-display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--im-accent-200); }
.im-quickans__q { font-family: var(--im-font-display); font-weight: 600; font-size: 18px; color: var(--im-ink); margin: var(--im-space-2) 0 var(--im-space-1); }
.im-quickans__a { font-size: 16px; line-height: 1.6; color: var(--im-text-200); margin: 0; }

/* ---- Blog: post cards (feed / grid / related) ---- */
.im-postgrid { display: grid; grid-template-columns: 1fr; gap: var(--im-space-8); }
@media (min-width: 640px) { .im-postgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .im-postgrid { grid-template-columns: repeat(3, 1fr); } }
.im-postcard { display: flex; flex-direction: column; }
.im-postcard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--im-radius-card); background: var(--im-band); }
.im-postcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--im-dur) var(--im-ease); }
.im-postcard:hover .im-postcard__media img { transform: scale(1.04); }
.im-postcard__kicker { display: inline-block; font-family: var(--im-font-display); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--im-accent-200); text-decoration: none; margin-top: var(--im-space-3); }
.im-postcard__title { font-family: var(--im-font-display); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: var(--im-track-head); margin: var(--im-space-1) 0 0; }
.im-postcard__title a { color: var(--im-ink); text-decoration: none; }
.im-postcard__title a:hover { color: var(--im-accent-200); }
.im-postcard__excerpt { font-size: 14px; line-height: 1.6; color: var(--im-text-muted); margin: var(--im-space-2) 0 0; }
.im-postcard__meta { display: flex; gap: var(--im-space-3); font-family: var(--im-font-display); font-size: 11px;
  color: var(--im-text-muted); margin-top: var(--im-space-3); }
.im-postcard--featured { grid-column: 1 / -1; }
@media (min-width: 768px) { .im-postcard--featured { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--im-space-8); align-items: center; }
  .im-postcard--featured .im-postcard__title { font-size: clamp(1.6rem, 3vw, 2.4rem); }
  .im-postcard--featured .im-postcard__excerpt { font-size: 16px; } }

/* ---- Blog: feed header + empty state ---- */
/* Tier 3 · Feed / index header (blog list, /tools/) — the smallest page-title
   tier, ~40px, display tracking to match Tiers 1–2 (was 2.6rem/title-track, lh
   1.15). Sits below the Tier 2 page hero. */
.im-feed-title { font-family: var(--im-font-serif); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.1; letter-spacing: var(--im-track-display); color: var(--im-ink); margin: var(--im-space-2) 0 0;
  text-wrap: balance; }
.im-empty { text-align: center; padding: var(--im-space-16) var(--im-space-4); }
.im-empty__icon { font-size: 48px; color: var(--im-text-muted); }
.im-empty__title { font-family: var(--im-font-display); font-weight: 600; font-size: 22px;
  color: var(--im-ink); margin: var(--im-space-4) 0 var(--im-space-2); }
.im-empty__text { color: var(--im-text-muted); margin: 0; }

/* ---- Blog: featured image ---- */
.im-article-figure { margin: var(--im-space-8) 0; }
.im-article-figure img { width: 100%; height: auto; border-radius: var(--im-radius-card); }

/* ---- Blog: relevant tags ---- */
.im-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--im-space-3);
  margin-top: var(--im-space-10); padding-top: var(--im-space-5); border-top: 1px solid var(--im-hairline); }
.im-tags__tag { font-family: var(--im-font-display); font-size: 12px; color: var(--im-text-200);
  text-decoration: none; padding: var(--im-space-1) var(--im-space-3); border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-pill); transition: border-color var(--im-dur) var(--im-ease), color var(--im-dur) var(--im-ease); }
.im-tags__tag:hover { border-color: var(--im-accent-200); color: var(--im-accent-200); }
.im-tags__hash { color: var(--im-accent-200); }

/* ---- Blog: comments ---- */
.im-comments { margin-top: var(--im-space-12); }
.im-comments__title { font-family: var(--im-font-display); font-weight: 600; font-size: 24px;
  color: var(--im-ink); margin: 0 0 var(--im-space-6); }
.im-comment { padding: var(--im-space-5) 0; border-top: 1px solid var(--im-hairline); }
.im-comment__head { display: flex; align-items: baseline; gap: var(--im-space-3); }
.im-comment__name { font-weight: 600; font-size: 14px; color: var(--im-ink); margin: 0; }
.im-comment__date { font-family: var(--im-font-display); font-size: 12px; color: var(--im-text-muted); }
.im-comment__body { font-size: 15px; line-height: 1.65; color: var(--im-text-200); margin: var(--im-space-2) 0 0; }
.im-comment__reply { margin-top: var(--im-space-4); padding-left: var(--im-space-5);
  border-left: 3px solid var(--im-accent-200); }

/* ---- Blog: leave-a-comment form ---- */
.im-comment-form { margin-top: var(--im-space-10); padding-top: var(--im-space-6); border-top: 1px solid var(--im-hairline); }

/* .im-btn--block moved to primitives.css — the navbar uses it on every page,
   and blocks.css only loads on editorial ones. */

/* ---- Fact tiles (service page at-a-glance band) ----
   One track for every caller, the country-home glance strip below (.im-glance)
   included. auto-fit rather than a fixed 4-up because tile counts vary: 79 of
   the 107 pages carrying a facts block hold a count that is not a multiple of
   four, so a fixed row left 30 pages with a single orphan tile and 24 with two.
   The 220px floor is load-bearing. A bare `1fr` takes its minimum from the
   item's min-content, and one long word in the 30px value slot is wider than a
   phone, which is how a 5-tile row overflowed its container by 110px at 390px; a
   fixed minimum caps the track and min-width:0 stops the tile's own automatic
   minimum re-inflating it. No breakpoint override at any width, because the
   `repeat(2, 1fr)` one that used to sit at max-width:860px is what re-created
   that overflow on a phone.

   min-width:0 has a price, and overflow-wrap is how it is paid. A tile that may
   shrink below its content lets a long unbroken run of characters escape the
   card instead of widening it: measured at 1440px on turkey/work-permit, the 30px
   value slot pushed 75px of "1 year (not exceeding the employment/service
   contract)" past the tile's right edge. Breaking mid-word is the graceful
   degradation, and it stays needed until the content is rewritten: the slot holds
   14 characters and the current median authored value is 20
   (.claude/skills/content-update/references/at-a-glance.md). Inherited from the
   tile so the label and the source note are covered by the same declaration.

   No `hyphens: auto` alongside it. The page is lang="en" and a good half of these
   values are proper nouns in another language (Rechtsanwaltskammer, wojewoda), so
   English hyphenation rules would insert breaks in the wrong places and print a
   hyphen that is not in the source text. ---- */
.im-facttiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--im-space-3, 12px); }
.im-facttile { min-width: 0; overflow-wrap: anywhere; background: var(--im-paper);
  border: 1px solid var(--im-hairline, #E4DFD2);
  border-radius: var(--im-radius-card, 6px); padding: var(--im-space-5, 20px); }
.im-facttile__label { font-family: var(--im-font-display); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--im-text-muted); margin: 0 0 var(--im-space-2, 8px); }
.im-facttile__value { font-family: var(--im-font-serif); font-size: 30px; font-weight: 500;
  line-height: 1.05; margin: 0; color: var(--im-ink); font-variant-numeric: tabular-nums; }
.im-facttile__src { font-size: 11.5px; color: var(--im-text-muted); margin: var(--im-space-2, 8px) 0 0; }

/* ---- Reviewer seal (E-E-A-T): restyle of the byline as a badge + name/role +
   source chips, hairline above and below, no page band of its own. The base
   .im-byline line lives in prose.css; inside the seal the hairlines and padding
   move to .im-seal (the outer box), so the line itself is reset here. Gating
   is entirely server-side (parts/blocks/byline.html) — this is presentation
   only, so a page that named no reviewer and cited no source renders none of
   this, exactly as it rendered no byline before the restyle. ---- */
.im-seal { display: flex; align-items: flex-start; gap: var(--im-space-3);
  padding: var(--im-space-3) 0;
  border-top: 1px solid var(--im-hairline); border-bottom: 1px solid var(--im-hairline); }
.im-seal__badge { flex: none; width: 34px; height: 34px; border-radius: var(--im-radius-pill);
  background: var(--im-ink); color: var(--im-paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--im-font-display); font-weight: 700; font-size: 12.5px;
  letter-spacing: .02em; }
.im-seal__body { min-width: 0; }
.im-seal .im-byline { padding: 0; border: 0; }
.im-seal__sources { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--im-space-2); list-style: none; margin: var(--im-space-2) 0 0; padding: 0; }
.im-seal__sources-label { font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--im-text-muted); }
.im-seal__chip { font-size: 12.5px; line-height: 1.4; color: var(--im-text-200);
  background: var(--im-band); border-radius: var(--im-radius-pill);
  padding: 2px var(--im-space-3); }

/* ---- Related-route cards ---- */
.im-relroutes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--im-space-4, 16px); }
.im-relroute { display: block; background: var(--im-paper);
  border: 1px solid var(--im-hairline, #E4DFD2); border-radius: var(--im-radius-card, 6px);
  overflow: hidden; text-decoration: none; color: var(--im-ink);
  transition: transform .18s ease, box-shadow .18s ease; }
.im-relroute:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(25, 27, 22, .10); }
.im-relroute__bd { padding: var(--im-space-4, 16px) var(--im-space-5, 20px) var(--im-space-5, 20px); }
.im-relroute__title { font-family: var(--im-font-display); font-weight: 500; font-size: 20px; margin: 0 0 6px; }
.im-relroute__short { font-size: 13.5px; color: var(--im-text-muted); margin: 0 0 var(--im-space-3, 12px); }
.im-relroute__lk { font-family: var(--im-font-display); font-size: 12px; color: var(--im-accent-200, #00668c); }
@media (max-width: 860px) { .im-relroutes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .im-relroute { transition: none; } }

/* ---- Section band: the audience divider inside a route's reading column ----
   A hairline with a label sitting under it, marking where the page stops
   addressing the worker and starts addressing the employer. Deliberately quiet:
   it is a signpost between two halves of one document, not a new page section,
   so it borrows .im-seclab's typography rather than introducing a heading rank
   that would compete with the H2s on either side of it. Renders only on routes
   carrying an employer block. */
.im-secband { border-top: 1px solid var(--im-hairline);
  margin: var(--im-space-10) 0 var(--im-space-6); padding-top: var(--im-space-4); }
/* A band opens its region, so it takes no leading void — the gap between the two
   regions supplies one (see .im-prose > section + section in design-system/prose.css). */
.im-secband:first-child { margin-top: 0; }
.im-secband .im-seclab { display: block; margin-bottom: 0; }

/* ---- Detail-page split hero (mockup v2 tab 1): text left, editorial image right ---- */
.im-hero-block--split { min-height: auto; }
.im-hero-block__body--split { display: grid; grid-template-columns: 1.15fr .85fr;
  gap: var(--im-space-12, 48px); align-items: center; }
.im-hero-block__media { border-radius: var(--im-radius-card, 6px); overflow: hidden; }
@media (max-width: 900px) {
  .im-hero-block__body--split { grid-template-columns: 1fr; gap: var(--im-space-8, 32px); }
}

/* ---- Split-hero media slot with no photograph: the country-inked panel ----
 * The split layout no longer waits for an image (hero.html), so this fills the
 * identical 4:3 slot until one is uploaded: same box, same page height, same
 * rhythm as a market that has its art. Two pale washes keyed on the country's
 * own hue angles (--im-ph-h1 / --im-ph-h2, set inline per page from
 * destinations/services/strand_ink.py). HUE ANGLE ONLY, low chroma, high
 * lightness. A wash on warm paper, not national livery, the same rule the
 * strands hero follows. Teal (196deg +/- 20) stays reserved for accent and
 * focus, and strand_ink.hue_pair() re-tests that after its per-page rotation.
 *
 * The panel is opaque and sits inside .im-hero-block__body (z-index 1), so it
 * covers the hero's drifting blur (.im-hero-block__mesh, z-index 0) across its
 * own column. On an imageless hero that blur was the only thing on the page and
 * the only thing moving, which read as unfinished rather than as composition.
 *
 * background-color is a SEPARATE declaration from background-image so that a
 * caller who renders a split hero with no hues degrades to a plain band-coloured
 * panel: an unresolvable hsl() makes background-image invalid at computed-value
 * time, and a lone `background:` shorthand would take the fill down with it.
 *
 * The two hue vars deliberately carry NO var() fallback. They used to fall back
 * to 223 and 30, which is the UK / Netherlands / Armenia blue, so a caller that
 * forgot to set them painted a different market's colour and looked entirely
 * finished doing it. Wrong and plausible is the worst of the three outcomes. With
 * no fallback the whole background-image is invalid at computed-value time and
 * the panel shows the plain band fill above: unmistakably unfinished, which is
 * the truth, and the degradation this comment already promised. */
/* The wash itself, as two "saturation lightness" pairs. Named so the values
   sit in one place instead of inside gradient functions, and SHARED by the
   placeholders in this group so a future dark palette restates two short
   values rather than two rules' geometry.
   Dark-palette values, recorded but NOT applied: 22% 19% / 24% 17%. A live
   @media (prefers-color-scheme: dark) block would not be inert. The
   editorial system has no dark palette at all (this file has no other
   prefers-color-scheme rule), so it would fire on OS preference alone and
   paint near-black washes inside an otherwise cream page. */
.im-hero-block__media--ph, .im-fork__media-ph {
  --im-ph-wash-a: 26% 93%;
  --im-ph-wash-b: 30% 89%;
}
.im-hero-block__media--ph {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card);
  overflow: hidden;
  display: grid;
  place-items: center;
  background-color: var(--im-band);
  background-image:
    radial-gradient(118% 92% at 78% 16%,
      hsl(var(--im-ph-h2) var(--im-ph-wash-a)) 0%, transparent 64%),
    radial-gradient(122% 96% at 16% 84%,
      hsl(var(--im-ph-h1) var(--im-ph-wash-b)) 0%, transparent 62%);
}
/* Hairline field, masked to a soft centre, so the panel reads as drawn paper
   rather than as an image that failed to load. 44px matches nothing in
   particular; it is simply below the size at which it becomes a pattern. */
.im-hero-block__media--ph::before,
.im-hero-block__media--mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--im-ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--im-ink) 7%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(78% 72% at 50% 46%, #000 24%, transparent 100%);
          mask-image: radial-gradient(78% 72% at 50% 46%, #000 24%, transparent 100%);
}
/* Scale the shared emblem up from its 84px badge size to carry a masthead, the
   same move .im-credentials-hero__globeframe makes. 42% of the width equals 56%
   of the height in a 4:3 box, so it stays square. position:relative is load-
   bearing, not tidiness: the hairline field above is an absolutely positioned
   pseudo-element, and an in-flow child would paint under it. */
.im-hero-block__media--ph .region-medallion {
  position: relative;
  width: 42%;
  height: 56%;
  margin: 0;
}
/* ---- Split-hero media slot carrying the map and the service rail -----------
 * The individual-visa masthead: the dotted map focused on this destination as a
 * decorative ground, the six journey steps as content on top of it.
 *
 * Unlike the other three media states this slot does NOT take the 4:3 box —
 * six steps do not fit a 4:3 crop at a readable size. --im-srail-min is the
 * floor that keeps page height identical across routes instead, which is the
 * same invariant the 4:3 box buys the others.
 *
 * Nothing here reveals, stages or animates. The rail is complete and lit at
 * first paint, so it cannot reproduce the height-swing the world hero's card
 * was rebuilt to fix (worldmap_hero.html: the headline moved 21px on a phone
 * every 2.8s), and there is no motion for prefers-reduced-motion to suppress. */
/* The body owns a stacking context ABOVE the map's layers (map 1, fx 2, labels
   3) so its wash can sit at -1: behind the words, in front of the dots. Same
   arrangement .st-hero__content uses in map-canvas.css. */
.im-hero-block--map .im-hero-block__body { position: relative; z-index: 4; }
/* Legibility over the dot field, measured once already in map-canvas.css: the
   headline (10.1:1) and the lede (6.5:1) clear AA over a dot unaided, and only
   MUTED text failed, at 3.4:1 on desktop and 3.1:1 on a phone. So this wash is
   deliberately light. It steadies the text; it is not there to hide the map the
   hero is now built on, and spending 72% paper across the whole hero would do
   exactly that. The rail's detail lines separately take the body colour rather
   than the muted one, which is what keeps them legible without more wash here.

   RADIAL, not the left-to-right ramp map-canvas.css uses: that ramp works
   because the strands hero has one column of copy and a quiet side to fade
   towards. A split hero has text in BOTH columns and no quiet side, which is
   the same reason that file had to ship a second wash shape for narrow
   viewports. One radial serves both widths here. */
.im-hero-block--map .im-hero-block__body::before {
  content: "";
  position: absolute;
  inset: -30px -56px;
  z-index: -1;
  background: radial-gradient(116% 126% at 50% 48%,
    color-mix(in srgb, var(--im-paper) 82%, transparent) 0%,
    color-mix(in srgb, var(--im-paper) 56%, transparent) 54%,
    color-mix(in srgb, var(--im-paper) 16%, transparent) 84%,
    transparent 100%);
}
/* No card. Whatever stands in the media slot stands directly ON the map: no
   border, no panel ground, no fixed ratio. The mark keeps its box everywhere
   else — over a plain hero it needs a ground to read against — but over the map
   a panel would punch an opaque hole in the thing the hero is built on. */
.im-hero-block__media--rail,
.im-hero-block--map .im-hero-block__media--mark {
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
}
.im-hero-block--map .im-hero-block__media--mark::before { content: none; }

/* ---- The journey rail ------------------------------------------------------
 * One accent flows down the spine forever, and each step lights as it passes.
 * The flow is the ONLY motion, it is decorative, and it changes nothing about
 * layout: the rail is complete and lit at first paint, every step is always in
 * the accessibility tree, and prefers-reduced-motion stops the accent dead
 * without hiding a word. That is what keeps this clear of the height swing the
 * world hero's card had to be rebuilt to fix. */
.im-srail { --im-srail-cycle: 7.2s; }
.im-srail__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
}
/* The track, inset so it starts and ends at the first and last dot. */
.im-srail__list::before,
.im-srail__list::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 2px;
}
.im-srail__list::before { background: var(--im-hairline); }
/* The accent. A gradient swept by background-position rather than a translated
   node: the element is 2px wide so the per-frame paint is trivial, and the
   travel is expressed against the track's own height, so a seventh step would
   not silently need a new magic number. */
.im-srail__list::after {
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--im-accent-200) 45%, transparent) 34%,
    var(--im-accent-200) 50%,
    color-mix(in srgb, var(--im-accent-200) 45%, transparent) 66%,
    transparent 100%);
  background-size: 100% 88px;
  background-repeat: no-repeat;
  animation: im-srail-flow var(--im-srail-cycle) linear infinite;
}
@keyframes im-srail-flow {
  from { background-position: 0 -88px; }
  to   { background-position: 0 calc(100% + 88px); }
}
.im-srail__step { position: relative; padding-bottom: var(--im-space-4, 16px); }
.im-srail__step:last-child { padding-bottom: 0; }
.im-srail__dot {
  position: absolute;
  left: -30px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--im-paper);
  border: 2px solid var(--im-stone-400);
  animation: im-srail-dot var(--im-srail-cycle) linear infinite;
  animation-delay: calc(var(--im-srail-i, 0) * (var(--im-srail-cycle) / 7));
}
.im-srail__dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--im-stone-400);
  animation: im-srail-dotfill var(--im-srail-cycle) linear infinite;
  animation-delay: calc(var(--im-srail-i, 0) * (var(--im-srail-cycle) / 7));
}
@keyframes im-srail-dot {
  0%, 4%    { border-color: var(--im-stone-400); }
  9%, 15%   { border-color: var(--im-accent-200); }
  24%, 100% { border-color: var(--im-stone-400); }
}
@keyframes im-srail-dotfill {
  0%, 4%    { background-color: var(--im-stone-400); }
  9%, 15%   { background-color: var(--im-accent-200); }
  24%, 100% { background-color: var(--im-stone-400); }
}
.im-srail__name {
  display: block;
  font-family: var(--im-font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--im-ink);
}
/* Body colour, NOT --im-text-muted. Muted is the one token map-canvas.css
   measured failing over the dot field (3.4:1 desktop, 3.1:1 phone); the body
   colour cleared it at 6.5:1. Choosing the token is what lets the wash above
   stay light enough to keep the map visible. */
.im-srail__detail {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--im-text-200);
  max-width: 34ch;
}

@media (max-width: 600px) {
  /* The names carry the message on a phone; the detail lines are what push the
     rail past a screen. They go, the six steps stay. The rail is CONTENT, so it
     compacts here rather than being hidden the way the world hero's decorative
     rail may be. */
  .im-srail__detail { display: none; }
  .im-srail__step { padding-bottom: var(--im-space-3, 12px); }
}

@media (prefers-reduced-motion: reduce) {
  /* The accent stops and stands down; the rail keeps every step, lit and
     legible. Nothing is hidden, because nothing was revealed. */
  .im-srail__list::after { animation: none; opacity: 0; }
  .im-srail__dot,
  .im-srail__dot::after { animation: none; }
}

/* ---- Split-hero media slot carrying an engraved concept mark ----------------
 * Category pages pass hero_mark and get their own card mark at masthead scale,
 * replacing the tile photograph (the retired category-CARD image, which is the
 * postcard register the cards were redesigned away from).
 *
 * The box is the placeholder panel's box, restated rather than shared because
 * the two carry different grounds: 4:3, hairline, radius, centred. That
 * sameness is load-bearing, not tidiness — page height must not move between a
 * category with a mark, one with a photograph and one with neither.
 *
 * The ink is .im-markcard__mark's technique: a CSS mask so the stylesheet owns
 * the Quarry colour, which an <img> cannot inherit. Three consumers of
 * --im-mark now — the shared mask plumbing lives with .im-markcard__mark. */
.im-hero-block__media--mark {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card);
  overflow: hidden;
  display: grid;
  place-items: center;
  background-color: var(--im-band);
}
.im-hero-block__mark {
  /* position:relative for the same reason the emblem needs it: the hairline
     field is an absolutely positioned pseudo-element and an in-flow child
     would paint under it. Mask plumbing comes from the shared rule beside
     .im-markcard__mark. */
  position: relative;
  width: 52%;
  aspect-ratio: 1;
  pointer-events: none;
  background-color: var(--im-stone-400);
  opacity: .82;
}

@media (max-width: 900px) {
  /* Stacked under the copy here, and decorative, so it takes a band rather than
     a 270px block a reader has to scroll past to reach the page. The emblem goes
     back to its badge size: a percentage of a short band would shrink it below
     the point where the dots read. */
  .im-hero-block__media--ph { aspect-ratio: 16 / 6; }
  .im-hero-block__media--ph .region-medallion { width: 84px; height: 84px; }
  /* Same band, and the mark takes a fixed height for the same reason: 52% of a
     16:6 band is a fraction of the drawing it is at 4:3, and an engraving that
     small stops reading as a drawing. */
  .im-hero-block__media--mark { aspect-ratio: 16 / 6; }
  .im-hero-block__mark { width: auto; height: 84px; }
}

/* ---- Mid-CTA portrait variant (UK regulated-partner rhythm-breaker) ---- */
.im-midcta__copy { flex: 1; min-width: 260px; }
.im-midcta__img { width: 132px; height: 132px; object-fit: cover;
  border-radius: var(--im-radius-card, 6px); flex-shrink: 0; }
@media (max-width: 700px) { .im-midcta--portrait { flex-direction: column; align-items: flex-start; } }

/* ---- Category-hub route summaries (rich per-route sections, mockup v2 tab 2) ---- */
.im-routesec { display: grid; grid-template-columns: 1fr 300px; gap: var(--im-space-10, 40px);
  align-items: start; padding: var(--im-space-8, 32px) 0; border-top: 1px solid var(--im-hairline); }
/* The media column is optional (the template omits it when a route has no
   image), and a summary without one used to leave 300px plus a 40px gap of dead
   track with the prose crammed into the remainder. Collapse to one column so the
   prose takes the full measure. */
.im-routesec:not(:has(.im-routesec__media)) { grid-template-columns: 1fr; }
.im-routesec:first-of-type { border-top: 0; }
.im-routesec__title { font-family: var(--im-font-display); font-weight: 600; font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -.01em; margin: 0 0 var(--im-space-3, 12px); color: var(--im-ink); }
.im-routesec__lk { display: inline-block; margin-top: var(--im-space-3, 12px); font-family: var(--im-font-display);
  font-size: 13px; color: var(--im-accent-200, #00668c); border-bottom: 1px solid var(--im-accent-200, #00668c);
  padding-bottom: 2px; text-decoration: none; }
.im-routesec__media img { border-radius: var(--im-radius-card, 6px); }
@media (max-width: 900px) { .im-routesec { grid-template-columns: 1fr; gap: var(--im-space-5, 20px); } }

/* ============================================================================
   Service + category-hub cleanup layer (scope: .im-svc on <main>).
   Same platform language (Spectral/Hanken/teal, same blocks) — just a calmer,
   more contained composition for these reading-heavy pages. Scoped so the
   country home / business / blog surfaces (deliberately 1280-wide broadsheet)
   are untouched. Direction: keep the style, make it cleaner.
   ============================================================================ */
/* Full platform width for the frame (hero, fact tiles, bands, TOC, cards) —
   only the reading prose stays contained, by its own 73ch measure. The frame
   uses the full width; only the content is held to a measure. */
.im-svc .im-tocgrid { grid-template-columns: 232px minmax(0, 1fr); gap: var(--im-space-12); }
/* Collapse the two-column body to a single column so the 232px rail never
   crushes the article prose to a sliver beside it. Wins over the .im-svc
   two-column rule above (later + equal specificity within the scope).
   minmax(0, 1fr) for the same reason as the base rule: a single bare `1fr`
   track still floors at the column's min-content, which is where the 434px of
   phone-width sideways scroll came from.

   900px, NOT 575.98px, and the number has to match .im-toc's own breakpoint
   above. The rail's contents restyle at <=900px: the list goes horizontal
   flex-wrap, loses its left borders and stops being sticky, because at that
   width it is meant to be a strip across the top of the article. But
   `.im-svc .im-tocgrid` (0,2,0) outranks the generic `.im-tocgrid` (0,1,0)
   collapse regardless of media query, so with this rule at 575.98px the grid
   kept a 232px column from 576 to 900 while the list inside it had already
   become the horizontal strip — a wrapped two-per-row tangle in a narrow rail,
   with the prose squeezed to 424px beside it at 768px. Two breakpoints
   describing one decision have to be one number. */
@media (max-width: 900px) { .im-svc .im-tocgrid { grid-template-columns: minmax(0, 1fr); } }
.im-svc .im-prose { max-width: 76ch; }
/* Every TOC link on this page targets one of these H2s, and the nav is fixed, so
   without the clearance the heading a reader just clicked lands underneath it.
   Same idiom as .im-prose-toc .im-prose h2 on the legal-doc surface; the value
   comes from the nav token rather than a literal so it follows the 86px/64px
   breakpoint the nav actually uses. */
.im-svc .im-prose h2 { scroll-margin-top: calc(var(--im-nav-h) + var(--im-space-4)); }
/* Calmer vertical rhythm — the shared clamp opens to 96px voids; cap it. */
.im-svc .im-block-section { padding: clamp(var(--im-space-10), 4.5vw, var(--im-space-16)) 0; }
.im-svc .im-block-section--tight { padding-top: var(--im-space-8); padding-bottom: var(--im-space-8); }
/* First-section nav clearance INSIDE the .im-svc scope. The two rules above are
   both specificity 0-2-0 and beat the global .im-navbar-offset (0-1-0) — the base
   one alone collapsed the top pad to a 4.5vw clamp (~58px), dropping the
   breadcrumb under the 86px nav. Re-assert the clearance at 0-2-0, placed AFTER
   both, so the first section clears the nav; the --tight rule still owns the
   (tight) bottom padding. */
.im-svc .im-navbar-offset { padding-top: calc(var(--im-nav-h) + var(--im-space-4)); }
/* SANS section heads at medium (500), not semibold (600) — more editorial, less
   shouty. Scoped to the two grotesque headings ONLY. The serif display titles
   (.im-hero-block__title, .im-prose h2) used to be listed here too, back when
   the base was 600 and 500 was the calmer option; they now sit at 400 in the
   base rules — the weight every reference face uses for display serif — and
   this override would otherwise raise them back to 500 on exactly the pages
   that matter most. Weight is face-dependent: serif display wants 400, Hanken
   wants 500-600 or it stops reading as a heading. Do not re-merge these lists. */
.im-svc .im-sech,
.im-svc .im-routesec__title { font-weight: 500; }
/* Right-size the hero — the shared clamp reaches 83px; hold it to a confident 52px. */
/* .im-hero-block sizing now matches this scope's needs at the base rule (min-height
   auto, space-10/space-12 padding), so no .im-svc override is needed for it. */
.im-svc .im-hero-block__title { font-size: clamp(2.3rem, 4vw, 3.25rem); line-height: 1.05; max-width: 15ch; }
.im-svc .im-hero-block__lede { font-size: 17px; line-height: 1.55; max-width: 54ch; margin-top: var(--im-space-4); }
/* Prose headings: keep the teal rule but let it breathe (more space above). */
.im-svc .im-prose h2 { font-size: 25px; margin-top: var(--im-space-10); }
.im-svc .im-prose h2:first-child { margin-top: 0; }
.im-svc .im-prose p { font-size: 16px; color: var(--im-text-200); }
/* Section headings a touch smaller so blocks read as sub-sections, not banners. */
.im-svc .im-sech { font-size: clamp(1.6rem, 2.6vw, 2.05rem); }

/* ============================================================================
   Service-page enrichment (spec 2026-07-22): monoline icons, connected stepper,
   lead, stagger. Icon marks scoped nowhere (harmless globally); layout/stepper
   scoped to .im-svc. IAA: icons are neutral marks, never verdict-coloured.
   ============================================================================ */
.im-ic { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none;
  stroke-width: 1.5; flex: none; display: inline-block; vertical-align: middle; }

/* Fact tiles — teal icon above the label */
.im-facttile__ic { display: block; color: var(--im-accent-200); margin-bottom: var(--im-space-3); }
.im-facttile__ic .im-ic { width: 22px; height: 22px; }

/* Connected vertical "how to apply" stepper (scope .im-svc) — restyles the
   horizontal timeline; other timeline uses (country home) keep the grid.
   The connector is drawn per-step BELOW each badge (never behind it), so the
   teal line can never cross a number. */
/* Vertical connected stepper — the teal connector runs BETWEEN badges (never
   through a number). Shared by the service page (.im-svc scope) and the country
   home (.im-timeline--vertical modifier, passed to timeline.html). One source. */
.im-svc .im-timeline, .im-timeline--vertical { display: block; position: relative; margin-top: var(--im-space-8); max-width: 660px; }
.im-svc .im-step, .im-timeline--vertical .im-step { display: grid; grid-template-columns: 34px 1fr; column-gap: var(--im-space-5);
  padding: 0 0 var(--im-space-6); position: relative; }
.im-svc .im-step:last-child, .im-timeline--vertical .im-step:last-child { padding-bottom: 0; }
.im-svc .im-step::after, .im-timeline--vertical .im-step::after { display: none; }  /* kill the horizontal-grid connector */
.im-svc .im-step:not(:last-child)::before, .im-timeline--vertical .im-step:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 38px;
  bottom: -2px; width: 2px; background: var(--im-accent-200); }
.im-svc .im-step__no, .im-timeline--vertical .im-step__no { grid-column: 1; grid-row: 1 / 4; position: relative; z-index: 1;
  margin: 0; background: var(--im-paper); width: 34px; height: 34px; }
.im-svc .im-step__title, .im-timeline--vertical .im-step__title { grid-column: 2; margin: var(--im-space-1) 0; font-weight: 500; }
.im-svc .im-step__body, .im-timeline--vertical .im-step__body { grid-column: 2; font-size: 14.5px; color: var(--im-text-200); }

/* Lead — the quick answer set as a confident drop-in, not body text. */
.im-svc .im-quickans__a { font-size: 18px; line-height: 1.55; color: var(--im-ink);
  max-width: 60ch; margin-top: var(--im-space-3); }

/* Staggered reveal for the fact-tile row (cascade rather than all-at-once).
   Runs to 5 because the auto-fit track above makes a 5-tile row the natural
   default; a 5th tile on delay 0 arrives with the 1st and breaks the cascade. */
.im-svc .im-facttile:nth-child(2) { transition-delay: .06s; }
.im-svc .im-facttile:nth-child(3) { transition-delay: .12s; }
.im-svc .im-facttile:nth-child(4) { transition-delay: .18s; }
.im-svc .im-facttile:nth-child(5) { transition-delay: .24s; }

/* Permitted / not-permitted as two calm cards (scope .im-svc) — nicer than the
   bare two-column list. Markers stay neutral (+ / en-dash); NO verdict colour or
   tick against the reader (IAA). */
.im-svc .im-permnot { gap: var(--im-space-5); margin-top: var(--im-space-6); }
.im-svc .im-permnot__col { border: 1px solid var(--im-hairline); border-radius: var(--im-radius-card);
  padding: var(--im-space-6) var(--im-space-6) var(--im-space-4); background: var(--im-paper); }
.im-svc .im-permnot__col--yes { background: color-mix(in srgb, var(--im-band) 65%, var(--im-paper)); }
.im-svc .im-permnot__head { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--im-space-4); }
.im-svc .im-permnot__col li { margin-bottom: var(--im-space-3); line-height: 1.5; }

/* "How this route is decided" — the five decision conditions, count first, then
   every condition with the word that says whether it applies
   (parts/blocks/complexity_factors.html).

   No red/green anywhere, and the applies/does-not-apply distinction is carried by
   the .im-cxf__state WORD in the markup. The marker and the row weight below are
   redundant reinforcement, so nothing is lost to a colour-blind reader or a
   forced-colours mode (WCAG 2.2 SC 1.4.1). Two ink weights of one hue, never a
   hue change, because a hue change would read as a verdict on the reader. */
/* The `.im-prose > .im-cxf` half exists only to win the margin-top tie against
   `.im-prose > * + *` in design-system/prose.css, which loads after this file:
   the two selectors were equal specificity and used to be decided by order
   inside this one file, and that tie breaks the wrong way once the prose rule
   lives in a file loaded later. Scoped to the direct-child case on purpose:
   when an employer_block wraps this element in a <section>, the plain
   `.im-cxf` selector below is what matches, and it must stay lower than
   `.im-prose > section > * + *` so that rule keeps deciding the margin there. */
.im-cxf { margin-top: var(--im-space-6); border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card); background: var(--im-paper);
  padding: var(--im-space-6); }
.im-prose > .im-cxf { margin-top: var(--im-space-6); }
.im-cxf__count { display: flex; align-items: baseline; gap: var(--im-space-3);
  flex-wrap: wrap; margin: 0; }
.im-cxf__num { font-family: var(--im-font-display); font-variant-numeric: tabular-nums;
  font-weight: 500; font-size: 34px; line-height: 1; color: var(--im-ink); }
.im-cxf__of { font-family: var(--im-font-body); font-size: 15px; color: var(--im-text-200); }
.im-cxf__why { font-family: var(--im-font-body); font-size: 14.5px; line-height: 1.55;
  color: var(--im-text-muted); margin: var(--im-space-3) 0 0; max-width: 56ch; }
.im-cxf__list { list-style: none; margin: var(--im-space-5) 0 0; padding: 0; }
.im-cxf__row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--im-space-3); padding: var(--im-space-3) 0;
  border-top: 1px solid var(--im-hairline); font-size: 14.5px; }
/* The marker is a square, not a tick: a tick against a condition reads as
   "you meet this", which is a verdict on the reader and not what the row says. */
.im-cxf__mark { width: 10px; height: 10px; border-radius: 2px; align-self: center;
  border: 1.5px solid var(--im-text-muted); background: transparent; }
.im-cxf__row.is-on .im-cxf__mark { background: var(--im-accent-200);
  border-color: var(--im-accent-200); }
.im-cxf__legend { color: var(--im-text-muted); line-height: 1.45; }
.im-cxf__row.is-on .im-cxf__legend { color: var(--im-ink); font-weight: 600; }
.im-cxf__state { font-family: var(--im-font-display); font-size: 12px;
  letter-spacing: .04em; color: var(--im-text-muted); white-space: nowrap; }
.im-cxf__row.is-on .im-cxf__state { color: var(--im-accent-200); }
@media (max-width: 575.98px) {
  /* The state word wraps under the legend rather than squeezing it to a sliver. */
  .im-cxf { padding: var(--im-space-5); }
  .im-cxf__row { grid-template-columns: 14px minmax(0, 1fr); }
  .im-cxf__state { grid-column: 2; }
}

/* ============================================================
   COUNTRY HOME (spec 2026-07-22) — at-a-glance strip, the
   "Why {country}" band, and the vertical how-it-works stepper.
   Global .im-* blocks, tokens only. Reuses .im-facttiles /
   .im-seclab / .im-sech. Information-only: no verdict, no
   verdict colour. (The split process-complexity meter that used
   to live here was retired 2026-07-29 — a country cannot average
   "which of these five conditions apply" across its routes.)
   ============================================================ */

/* Anchor offset so the hero "Explore the visas" jump lands below the sticky header. */
/* Jump-target clearance: a hash link must land the section below the fixed nav,
   not behind it. Derived from the nav-height token rather than the 88px literal
   it used to carry, so it self-corrects at the mobile breakpoint where
   --im-nav-h drops to 64px (the literal overshot by 24px there, and #visas on
   every country home had the same problem). */
.im-anchor { scroll-margin-top: calc(var(--im-nav-h) + var(--im-space-4)); }

/* At-a-glance strip. The even distribution of its 2 to 4 derived tiles is now
   the .im-facttiles default, so this only owns the strip's vertical rhythm. */
.im-glance { padding-top: var(--im-space-10); padding-bottom: var(--im-space-10); }

/* "Why {country}" band. */
.im-why { padding-top: var(--im-space-10); padding-bottom: var(--im-space-10); }
.im-why__hd { max-width: 60ch; }
.im-why__lede { font-family: var(--im-font-body); font-size: 18px; color: var(--im-text-muted);
  line-height: 1.6; margin-top: var(--im-space-4); max-width: 52ch; }
.im-why__grid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--im-space-8); margin-top: var(--im-space-10); }
.im-why__c { display: flex; flex-direction: column; gap: var(--im-space-3); }
.im-why__ic { display: block; color: var(--im-accent-200); }
.im-why__ic .im-ic { width: 28px; height: 28px; }
.im-why__t { font-family: var(--im-font-display); font-weight: 600; font-size: 20px; margin: 0; }
.im-why__b { font-family: var(--im-font-body); font-size: 15px; color: var(--im-text-muted);
  line-height: 1.6; margin: 0; }
@media (max-width: 860px) { .im-why__grid { grid-template-columns: 1fr; gap: var(--im-space-6); } }
/* The vertical stepper (.im-timeline--vertical) shares its rules with the
   service page's .im-svc .im-step block above — one source, no fork. */


/* ============================================================
   Global-home + About redesign blocks (2026-07-24)
   Batches A/B/C — trust marquee, audience split, destinations picker,
   expertise band, why-bento, tools showcase, process journey,
   testimonials; credentials hero, people/network, how-it-works, mission.
   ============================================================ */

/* --- batch A: trust_marquee / destinations_picker --- */
/* ==========================================================================
   Batch A — global-home blocks: trust_marquee,
   destinations_picker (spec 2026-07-24-global-home-about-rebuild.md).
   Tokens only (design-system/tokens.css). Namespaced under each block's
   root class. Append into design-system/blocks.css — not edited directly
   here (orchestrator integrates).
   ========================================================================== */

/* ---- Trust marquee (moving logo strip) ---- */
.im-trust-marquee {
  position: relative;
  padding: var(--im-space-6) 0;
  border-top: 1px solid var(--im-hairline);
  border-bottom: 1px solid var(--im-hairline);
  background: var(--im-paper);
  overflow: hidden;
}
.im-trust-marquee__toggle {
  position: absolute;
  top: var(--im-space-3);
  right: var(--im-space-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--im-text-muted);
  background: var(--im-card-bg);
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-pill);
  cursor: pointer;
  transition: color var(--im-dur) var(--im-ease), border-color var(--im-dur) var(--im-ease);
}
.im-trust-marquee__toggle:hover { color: var(--im-ink); border-color: var(--im-ink); }
.im-trust-marquee__toggle:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 2px; }
.im-trust-marquee__toggle-ic { position: relative; display: inline-block; width: 10px; height: 12px; }
.im-trust-marquee__toggle-ic::before,
.im-trust-marquee__toggle-ic::after {
  content: "";
  position: absolute;
  top: 0;
  width: 3px;
  height: 12px;
  background: currentColor;
}
.im-trust-marquee__toggle-ic::before { left: 1px; }
.im-trust-marquee__toggle-ic::after { right: 1px; }
.im-trust-marquee.is-paused .im-trust-marquee__toggle-ic::before {
  left: 2px;
  width: 0;
  height: 0;
  background: none;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
}
.im-trust-marquee.is-paused .im-trust-marquee__toggle-ic::after { display: none; }
.im-trust-marquee.is-paused .im-trust-marquee__track { animation-play-state: paused; }
.im-trust-marquee__lab { text-align: center; margin-bottom: var(--im-space-4); }
.im-trust-marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.im-trust-marquee__track {
  display: flex;
  width: max-content;
  animation: im-trust-marquee-scroll 34s linear infinite;
}
.im-trust-marquee__track:hover,
.im-trust-marquee__track:focus-within { animation-play-state: paused; }
.im-trust-marquee__set {
  display: flex;
  align-items: center;
  gap: var(--im-space-16);
  padding-right: var(--im-space-16);
  flex: none;
}
.im-trust-marquee__logo {
  font-family: var(--im-font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--im-ink);
  opacity: .42;
  filter: grayscale(1);
  white-space: nowrap;
  transition: opacity var(--im-dur) var(--im-ease);
}
.im-trust-marquee__logo:hover { opacity: .85; }
@keyframes im-trust-marquee-scroll { to { transform: translateX(-50%); } }
@media (max-width: 900px) {
  .im-trust-marquee__set { gap: var(--im-space-10); padding-right: var(--im-space-10); }
  .im-trust-marquee__logo { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .im-trust-marquee__track { animation: none; }
  .im-trust-marquee__set[aria-hidden] { display: none; }
  .im-trust-marquee__logo { transition: none; }
  .im-trust-marquee__toggle { display: none; }
}

/* ---- Audience fork (global home only; retired from `/` 2026-09-13, kept
   until the Groundwork order is confirmed) ----
 * A wayline diagram (stem -> node -> two curved branches, static inline SVG,
 * no motion) sits above two full-height, full-width hued halves. Each half's
 * tint AND its media placeholder's wash key off the SAME --im-mark-h the
 * ink formula below already uses for the tile field and the mark cards — one
 * hue variable driving three surfaces, never a left/right special case. The
 * wayline's own two curves are the one deliberately fixed exception: their
 * colour is the section's identity, not a card's data, so they carry the
 * individuals/employers hues as literals rather than reading --im-mark-h. */
.im-fork { position: relative; background: var(--im-paper);
  padding-top: clamp(var(--im-space-12), 6vw, var(--im-space-20)); overflow: hidden; }
.im-fork__way { position: relative; z-index: 2; display: flex; justify-content: center; }
.im-fork__way svg { display: block; overflow: visible; }
.im-fork__stem { stroke: var(--im-text-muted); }
.im-fork__node { fill: var(--im-ink); }
.im-fork__curve { fill: none; }
/* Fixed hues, not --im-mark-h: the branch that leads to the individuals half
   is always warm and the branch to the employers half is always cool,
   independent of card order. */
.im-fork__curve--left { stroke: hsl(18 42% 44%); }
.im-fork__curve--right { stroke: hsl(223 42% 44%); }
.im-fork__halves { display: grid; grid-template-columns: 1fr 1fr; }
/* The half's surface colour is MIXED INTO --im-band, not a flat hsl() of the
   concept hue. The ink hue system (CONCEPT_HUES) was tuned for engraved marks
   — small, dark, on paper. Stretched flat across a half-viewport surface a raw
   tint of it reads wrong against the rest of the site, because every neutral
   here is green-cast (--im-ink is literally "in family with the stone ramp")
   and an unmixed 223 has no green in it, so it drifts grey-lilac. Mixing a
   saturated sample of the hue INTO the stone band keeps large surfaces in the
   stone family while still reading as real colour, and keeps the split
   data-driven off --im-mark-h rather than special-casing left and right.
   --im-fork-tint is the single dial: raise it for more colour, lower it for
   more paper. */
.im-fork__half { display: flex; flex-direction: column;
  --im-fork-tint: 15%;
  min-height: clamp(440px, 60vh, 660px);
  padding: var(--im-space-16) var(--im-space-10) var(--im-space-12);
  background-color: color-mix(in srgb,
    hsl(var(--im-mark-h) 52% 62%) var(--im-fork-tint), var(--im-band)); }
.im-fork__col { max-width: 46ch; margin-bottom: var(--im-space-8); }
.im-fork__k { font-family: var(--im-font-display); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--im-text-muted); }
/* Large Spectral display heading — bigger than .im-sech (2.6rem ceiling): the
   fork is meant to read as one bold decision, not a restyled card. */
.im-fork__t { font-family: var(--im-font-serif); font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.75rem); line-height: 1.04; letter-spacing: -.01em;
  color: var(--im-ink); margin: var(--im-space-2) 0 0; }
.im-fork__b { font-size: 16px; line-height: 1.65; color: var(--im-text-200);
  margin: var(--im-space-4) 0 0; }
.im-fork__lk { font-family: var(--im-font-display); font-size: 14px; letter-spacing: .03em;
  color: var(--im-accent-200); text-decoration: none; display: inline-flex;
  align-items: center; gap: var(--im-space-2); margin-top: var(--im-space-5); }
.im-fork__lk:hover, .im-fork__lk:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.im-fork__lk:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 3px; }
.im-fork__lk-ar { display: inline-block; transition: transform var(--im-dur) var(--im-ease); }
.im-fork__lk:hover .im-fork__lk-ar { transform: translateX(4px); }
.im-fork__media { flex: 1; min-height: 260px; }
.im-fork__media-img { display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--im-radius-card); }
/* Placeholder: a hue-tinted painterly wash carrying a small standing crowd —
   the client asked specifically for people in the placeholder rather than an
   empty scene. Figures and ground line share the ink formula .im-tilefield
   already uses (hsl(var(--im-mark-h) 42% 44%)), just deepened in lightness so
   they read as ink standing on the wash rather than as the wash itself. */
.im-fork__media-ph { position: relative; width: 100%; height: 100%;
  border-radius: var(--im-radius-card); overflow: hidden;
  background-color: color-mix(in srgb,
    hsl(var(--im-mark-h) 52% 62%) 26%, var(--im-band));
  background-image:
    radial-gradient(120% 100% at 18% 18%, hsl(var(--im-mark-h) var(--im-ph-wash-b)) 0%, transparent 60%),
    radial-gradient(130% 110% at 86% 88%, hsl(var(--im-mark-h) var(--im-ph-wash-a)) 0%, transparent 62%); }
.im-fork__ground { position: absolute; left: 8%; right: 8%; bottom: 18%; height: 2px;
  background-color: hsl(var(--im-mark-h) 42% 44%); opacity: .35; }
.im-fork__figure { position: absolute; bottom: 18%; width: 11%; max-width: 34px;
  aspect-ratio: 1 / 2.6; border-radius: 50% / 30% 30% 0 0;
  background-color: color-mix(in srgb,
    hsl(var(--im-mark-h) 42% 44%) 76%, var(--im-ink)); opacity: .55; }
.im-fork__figure::before { content: ""; position: absolute; left: 50%; top: -34%;
  width: 62%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%);
  background-color: inherit; }
.im-fork__figure--a { left: 30%; transform: scaleX(.94); }
.im-fork__figure--b { left: 48%; aspect-ratio: 1 / 2.9; opacity: .62; }
.im-fork__figure--c { left: 65%; transform: scaleX(.88); opacity: .48; }
@media (max-width: 900px) {
  .im-fork__halves { grid-template-columns: 1fr; }
  .im-fork__half { min-height: 420px; padding: var(--im-space-10) var(--im-space-6) var(--im-space-10); }
  .im-fork__way svg { width: 120px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .im-fork__lk-ar { transition: none; }
}

/* ---- Destinations picker (header + grid) ----
   The tile itself is `.im-destcard` below — the same card the Destinations hub
   renders. Only the section header and the grid are picker-specific. */
.im-destinations-picker__hd { max-width: 62ch; margin-bottom: var(--im-space-10); }
.im-destinations-picker__grid,
.im-catgrid {
  display: grid;
  /* min(320px, 100%), not a bare 320px: an auto-fill track will not shrink below
     its own floor, so on a 280-320px viewport the card sat 320px wide inside a
     narrower page and pushed the whole document sideways — 72px of horizontal
     scroll at 280, 32px at 320. A 1280px window at 400% zoom IS 320 CSS px, and
     WCAG 1.4.10 requires that to reflow without a second scroll axis. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--im-space-5);
}

/* ---- Shared mark card (destination + category) ----
   Spec: docs/superpowers/specs/2026-08-04-category-cards-design.md
   White Legal-500 card with a right-inset CSS-mask line mark in Quarry stone.
   .im-destcard adds a flag; .im-catcard adds nothing. Factored into one place
   rather than copy-pasted — see engineering-discipline.md shape #1. */
.im-markcard {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--im-card-bg);
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card);
  text-decoration: none;
  color: inherit;
  transition: transform var(--im-dur) var(--im-ease),
              box-shadow var(--im-dur) var(--im-ease),
              border-color var(--im-dur) var(--im-ease);
}
.im-markcard:hover,
.im-markcard:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--im-shadow-2);
  border-color: var(--im-accent-200);
}
.im-markcard:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 2px; }

/* Line mark. CSS mask so the stylesheet owns the Quarry colour and the hover —
   an <img> cannot inherit currentColor. --im-mark is set per card by the
   template. Whole drawing, inset, nothing clipped (see the destination spec). */
/* Engraved-mark mask plumbing, shared by the mark card and the hero mark. Ink,
   position and size stay with each consumer; both share centre/contain in the
   second rule. */
.im-markcard__mark, .im-hero-block__mark {
  -webkit-mask-image: var(--im-mark);
          mask-image: var(--im-mark);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
}
.im-markcard__mark, .im-hero-block__mark {
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
/* Groundwork ink — the resting colour for a mark that carries a hue. The
   angle arrives as --im-mark-h (imagery.CONCEPT_HUES / imagery.mark_hue,
   degrees); one fixed saturation and lightness turns every angle into the
   same weight of ink, which is what keeps nine markets and four categories
   one pen rather than nine liveries. RESTING state only — hover and focus
   behaviour is untouched, so a decorative hue can never be mistaken for the
   interaction signal (the same reservation strand_ink documents for teal). */
.im-markcard__mark--inked, .im-hero-block__mark--inked, .im-tilefield {
  background-color: hsl(var(--im-mark-h) 42% 44%);
}
/* Groundwork tile field: the primitive lives in design-system/primitives.css
   (global, because the nav promo card consumes it too); editorial hosts here
   only promote their other children above it and colour it via the shared
   --inked rule above. The card supplies --im-mark and --im-mark-h inline and
   renders the span only when it has BOTH — an angle-less field would resolve
   to no colour at all. */
.im-why-bento__card > :not(.im-tilefield) { position: relative; z-index: 1; }
.im-markcard__mark {
  position: absolute;
  top: 2.5%;
  right: 10px;
  height: 95%;
  aspect-ratio: 1;
  pointer-events: none;
  background-color: var(--im-stone-400);
  opacity: .80;
  transition: opacity var(--im-dur) var(--im-ease),
              transform var(--im-dur) var(--im-ease);
}
.im-markcard:hover .im-markcard__mark,
.im-markcard:focus-visible .im-markcard__mark {
  opacity: .96;
  transform: translateX(-4px) scale(1.03);
}

.im-markcard__body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--im-space-4);
  padding: var(--im-space-6) var(--im-space-5);
  /* Reserve the mark's column so text never sits on the Quarry stroke (WCAG
     1.4.3). Load-bearing, not padding — a long name wraps instead. */
  padding-right: 116px;
}
.im-markcard__text { min-width: 0; }
.im-markcard__name {
  display: block;
  font-family: var(--im-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: var(--im-track-head);
  color: var(--im-ink);
}
.im-markcard__lede {
  display: block;
  margin-top: var(--im-space-1);
  font-size: 14px;
  line-height: 1.45;
  color: var(--im-text-muted);
}

/* Destination-only: the flag roundel, the card's one saturated element. */
.im-destcard__flag {
  flex: 0 0 auto;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--im-radius-pill);
  box-shadow: 0 0 0 1px var(--im-hairline);
}
/* Full colour at rest. The flags were desaturated to 38% at rest with full
   colour on hover (2026-08-30) so the marks' inks could read beside them;
   reversed 2026-09-13 (Rohan): the flag is the card's one saturated element
   and the picker looked drained until hovered. */

/* .im-catcard needs no unique declarations — the shared primitive covers it. */

/* "More coming soon" placeholder tile (parts/blocks/destination_coming_soon_card.html).
   Non-interactive: a <div>, not an <a>, so it never lifts, links or focuses. Dashed
   + muted so it reads as "the next one goes here", distinct from a live market card.
   No mark, so the body reclaims the 116px column the mark otherwise reserves. */
.im-markcard--soon {
  border-style: dashed;
  background: transparent;
  cursor: default;
}
.im-markcard--soon:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--im-hairline);
}
.im-markcard--soon .im-markcard__body { padding-right: var(--im-space-5); }
.im-markcard--soon .im-markcard__name { color: var(--im-text-muted); }
.im-markcard--soon__badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--im-radius-pill);
  border: 1px dashed var(--im-hairline);
  color: var(--im-text-muted);
  font-family: var(--im-font-display);
  font-size: 24px;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .im-markcard,
  .im-markcard__mark { transition: none; }
  .im-destcard__flag { transition: none; }
  .im-markcard:hover,
  .im-markcard:focus-visible { transform: none; }
  .im-markcard:hover .im-markcard__mark,
  .im-markcard:focus-visible .im-markcard__mark { opacity: .80; transform: none; }
}

/* --- batch B: expertise_band / why_bento / tools_showcase / process_journey / testimonials --- */
/* ==========================================================================
   Batch B — global-home blocks: expertise_band, why_bento, tools_showcase,
   process_journey, testimonials (spec 2026-07-24-global-home-about-rebuild.md).
   Tokens only (design-system/tokens.css). Namespaced under each block's root
   class. Append into design-system/blocks.css — not edited directly here
   (orchestrator integrates). Base scroll-reveal fade ([data-reveal] -> .in),
   .im-wrap/.im-seclab/.im-sech/.im-secsub and fact-countup wiring already
   live in design-system/blocks.css — this file adds section-specific rules
   only (the dark band fill, bento grid, mini-visual bars, connector-draw,
   calm testimonial cards).
   ========================================================================== */

/* ---- expertise_band (dark navy proof band; shared home + About) ---- */
.im-expertise-band {
  background: var(--im-dark-navy);
  color: #eef1f5;
  position: relative;
  overflow: hidden;
  padding: clamp(var(--im-space-16), 7vw, var(--im-space-24)) 0;
}
.im-expertise-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 15% 0%, color-mix(in srgb, var(--im-accent-100) 16%, transparent), transparent 55%);
  pointer-events: none;
}
.im-expertise-band__in { position: relative; z-index: 1; }
.im-expertise-band .im-seclab { color: var(--im-accent-100); }
.im-expertise-band__hd { max-width: 62ch; }
/* One column unless a caller passes a person, so About is untouched. */
.im-expertise-band__topline--split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--im-space-8);
  align-items: center;
}
.im-expertise-band__person { display: flex; gap: var(--im-space-5); align-items: center; }
.im-expertise-band__person-img {
  width: 96px;
  height: 96px;
  flex: none;
  object-fit: cover;
  border-radius: var(--im-radius-card);
}
.im-expertise-band__person-name {
  color: #fff;
  font-family: var(--im-font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  margin: 0;
}
.im-expertise-band__person-name a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.im-expertise-band__person-name a:hover { border-bottom-color: var(--im-accent-100); }

.im-expertise-band__person-role {
  color: #b8c0cc;
  font-size: 14px;
  line-height: 1.45;
  margin: var(--im-space-2) 0 0;
  max-width: 30ch;
}
@media (max-width: 900px) {
  .im-expertise-band__topline--split { grid-template-columns: 1fr; gap: var(--im-space-8); }
}
.im-expertise-band__title {
  font-family: var(--im-font-display);
  font-weight: 600;
  color: #fff;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  max-width: 20ch;
  margin-top: var(--im-space-3);
}
.im-expertise-band__lede {
  margin-top: var(--im-space-4);
  color: #b8c0cc;
  font-size: 17px;
  line-height: 1.6;
  max-width: 56ch;
}
.im-expertise-band__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: var(--im-space-12);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.im-expertise-band__stat {
  padding: var(--im-space-6) var(--im-space-5) var(--im-space-1);
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.im-expertise-band__stat:last-child { border-right: 0; }
.im-expertise-band__stat-figure {
  font-family: var(--im-font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.im-expertise-band__stat-label { font-size: 13.5px; color: #aeb7c4; margin-top: var(--im-space-2); }
.im-expertise-band__complex {
  margin-top: var(--im-space-12);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--im-space-8);
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: var(--im-space-10);
}
.im-expertise-band__complex-title {
  color: #fff;
  font-family: var(--im-font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  margin: 0;
}
.im-expertise-band__complex-body { color: #b8c0cc; margin-top: var(--im-space-3); max-width: 46ch; }
.im-expertise-band__chips { display: flex; flex-wrap: wrap; gap: var(--im-space-3); }
/* A list of the work, not a row of controls: the chips are plain spans, so
   they carry no hover and no teal (interaction-only in the key). Outlined in
   the band's own white hairline, which is what reads as a label (2026-09-29). */
.im-expertise-band__chip {
  border: 1px solid rgba(255, 255, 255, .28);
  color: #eef1f5;
  border-radius: var(--im-radius-pill);
  padding: 10px 18px;
  font-family: var(--im-font-display);
  font-size: 13px;
}
@media (max-width: 900px) {
  .im-expertise-band__stats { grid-template-columns: 1fr 1fr; }
  .im-expertise-band__stat { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .im-expertise-band__complex { grid-template-columns: 1fr; }
}

/* ---- why_bento (product-glimpse + differentiator cards) ---- */
.im-why-bento__hd { max-width: 62ch; margin-bottom: var(--im-space-10); }
.im-why-bento__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--im-space-4);
}
.im-why-bento__card {
  position: relative;
  background: var(--im-card-bg);
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card);
  padding: var(--im-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--im-space-2);
  overflow: hidden;
  transition: transform var(--im-dur) var(--im-ease), box-shadow var(--im-dur) var(--im-ease), border-color var(--im-dur) var(--im-ease);
}
.im-why-bento__card:hover { transform: translateY(-3px); box-shadow: var(--im-shadow-2); border-color: var(--im-accent-200); }
.im-why-bento__card--big { grid-column: span 2; grid-row: span 2; }
.im-why-bento__ic { display: block; width: 30px; height: 30px; color: var(--im-accent-200); }
.im-why-bento__ic svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; }
.im-why-bento__title { font-family: var(--im-font-display); font-weight: 600; font-size: 19px; color: var(--im-ink); margin: 0; }
.im-why-bento__title--big { font-size: 26px; margin-top: var(--im-space-1); }
.im-why-bento__body {
  font-family: var(--im-font-body, "Inter", system-ui, -apple-system, sans-serif);
  font-size: 14px;
  color: var(--im-text-muted);
  line-height: 1.55;
  margin: 0;
}
.im-why-bento__body--big { font-size: 15.5px; max-width: 42ch; }
.im-why-bento__mock {
  margin-top: auto;
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-control);
  background: var(--im-band);
  padding: var(--im-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--im-space-2);
}
.im-why-bento__mock-hd {
  font-family: var(--im-font-display);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--im-text-muted);
  display: flex;
  justify-content: space-between;
}
.im-why-bento__mock-row { display: flex; align-items: center; gap: var(--im-space-2); font-size: 13px; color: var(--im-ink); }
.im-why-bento__mock-chk {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--im-accent-200);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 10px;
  flex: none;
}
.im-why-bento__mock-chk--o { background: transparent; border: 1.5px solid var(--im-text-muted); }
.im-why-bento__mock-bar { height: 7px; border-radius: 4px; background: var(--im-hairline); overflow: hidden; margin-top: var(--im-space-1); }
.im-why-bento__mock-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--im-accent-200);
  border-radius: 4px;
  transition: width 1.1s var(--im-ease) .1s;
}
.im-why-bento__card--big.in .im-why-bento__mock-bar i { width: var(--im-bento-pct, 0%); }
.im-why-bento__mock-step { font-size: 11px; color: var(--im-text-muted); display: flex; justify-content: space-between; }
@media (max-width: 900px) {
  .im-why-bento__grid { grid-template-columns: 1fr 1fr; }
  .im-why-bento__card--big { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 560px) {
  .im-why-bento__grid { grid-template-columns: 1fr; }
  .im-why-bento__card--big { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) {
  .im-why-bento__card:hover { transform: none; }
  .im-why-bento__mock-bar i { transition: none; }
  .im-why-bento__card--big .im-why-bento__mock-bar i { width: var(--im-bento-pct, 0%); }
}

/* ---- tools_showcase (icon + mini-visual: bars / chart / checklist) ---- */
.im-tools-showcase__hd { max-width: 62ch; margin-bottom: var(--im-space-10); }
.im-tools-showcase__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--im-space-5); }
.im-tools-showcase__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--im-space-3);
  background: var(--im-card-bg);
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card);
  padding: var(--im-space-6);
  text-decoration: none;
  color: var(--im-ink);
  overflow: hidden;
  transition: transform var(--im-dur) var(--im-ease), box-shadow var(--im-dur) var(--im-ease), border-color var(--im-dur) var(--im-ease);
}
.im-tools-showcase__card:hover { transform: translateY(-3px); box-shadow: var(--im-shadow-2); border-color: var(--im-accent-200); }
.im-tools-showcase__card:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 2px; }
.im-tools-showcase__top { display: flex; align-items: center; justify-content: space-between; }
.im-tools-showcase__ic {
  width: 44px;
  height: 44px;
  border-radius: var(--im-radius-control);
  background: color-mix(in srgb, var(--im-accent-200) 10%, transparent);
  color: var(--im-accent-200);
  display: grid;
  place-items: center;
  transition: transform var(--im-dur) var(--im-ease);
}
.im-tools-showcase__card:hover .im-tools-showcase__ic { transform: scale(1.08) rotate(-3deg); }
.im-tools-showcase__ic svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.im-tools-showcase__tag {
  font-family: var(--im-font-display);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--im-accent-200);
  border: 1px solid color-mix(in srgb, var(--im-accent-200) 40%, transparent);
  border-radius: var(--im-radius-pill);
  padding: 3px 10px;
}
.im-tools-showcase__title { font-family: var(--im-font-display); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: var(--im-track-head); color: var(--im-ink); margin: 0; }
.im-tools-showcase__body {
  font-family: var(--im-font-body, "Inter", system-ui, -apple-system, sans-serif);
  font-size: 14px;
  color: var(--im-text-muted);
  line-height: 1.55;
  flex: 1;
  margin: 0;
}
.im-tools-showcase__mock { border: 1px solid var(--im-hairline); border-radius: var(--im-radius-control); background: var(--im-band); padding: var(--im-space-4); }
.im-tools-showcase__mockrow { display: flex; align-items: center; gap: var(--im-space-2); font-size: 12px; color: var(--im-text-muted); margin-bottom: var(--im-space-2); }
.im-tools-showcase__mockrow:last-child { margin-bottom: 0; }
.im-tools-showcase__mockbar { flex: 1; height: 8px; border-radius: 4px; background: var(--im-hairline); overflow: hidden; }
.im-tools-showcase__mockbar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--im-accent-200);
  border-radius: 4px;
  transition: width 1s var(--im-ease) .1s;
}
.im-tools-showcase__mockbar--muted i { background: color-mix(in srgb, var(--im-accent-200) 45%, transparent); }
.im-tools-showcase__card.in .im-tools-showcase__mockbar i { width: var(--im-tool-bar, 0%); }
.im-tools-showcase__mockval { font-family: var(--im-font-display); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--im-ink); min-width: 52px; text-align: right; }
.im-tools-showcase__mock--chart { display: flex; align-items: flex-end; gap: var(--im-space-2); height: 56px; }
.im-tools-showcase__mock--chart i {
  flex: 1;
  background: color-mix(in srgb, var(--im-accent-200) 28%, transparent);
  border-radius: 3px 3px 0 0;
  height: 0;
  transition: height .8s var(--im-ease);
}
.im-tools-showcase__card.in .im-tools-showcase__mock--chart i { height: var(--im-tool-chart, 0%); }
.im-tools-showcase__mock--chart i.im-tools-showcase__bar--hi { background: var(--im-accent-200); }
.im-tools-showcase__mockck { display: flex; align-items: center; gap: var(--im-space-2); font-size: 12.5px; color: var(--im-ink); margin-bottom: var(--im-space-2); }
.im-tools-showcase__mockck:last-child { margin-bottom: 0; }
.im-tools-showcase__mockdot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--im-accent-200);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 10px;
  flex: none;
}
.im-tools-showcase__mockdot--o { background: transparent; border: 1.5px solid var(--im-text-muted); }
.im-tools-showcase__lk { font-family: var(--im-font-display); font-size: 13px; color: var(--im-accent-200); display: inline-flex; gap: var(--im-space-2); margin-top: auto; }
.im-tools-showcase__card:hover .im-tools-showcase__ar { transform: translateX(4px); }
@media (max-width: 900px) {
  .im-tools-showcase__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .im-tools-showcase__card:hover { transform: none; }
  .im-tools-showcase__card:hover .im-tools-showcase__ic { transform: none; }
  .im-tools-showcase__card:hover .im-tools-showcase__ar { transform: none; }
  .im-tools-showcase__mockbar i, .im-tools-showcase__mock--chart i { transition: none; }
  .im-tools-showcase__card .im-tools-showcase__mockbar i { width: var(--im-tool-bar, 0%); }
  .im-tools-showcase__card .im-tools-showcase__mock--chart i { height: var(--im-tool-chart, 0%); }
}

/* ---- process_journey (illustrated 4-step, connector draws on reveal) ---- */
.im-process-journey__hd { max-width: 62ch; margin-bottom: var(--im-space-10); }
.im-process-journey__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--im-space-4);
}
.im-process-journey__card {
  position: relative;
  background: var(--im-card-bg);
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card);
  padding: var(--im-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--im-space-2);
  overflow: hidden;
  transition: transform .42s var(--im-ease), box-shadow .42s var(--im-ease), border-color .42s var(--im-ease);
}
/* Irregular bento: the lead card (step 01, with the glimpse mock) spans 2x2,
   the closing card spans full width, steps 02/03 fill the third column. */
.im-process-journey__card--lead { grid-column: span 2; grid-row: span 2; }
.im-process-journey__card--wide { grid-column: span 3; }
/* Hover OR the ambient auto-cycle (.is-active, driven by global-home.js) lifts
   and highlights a card and fills its badge teal. */
.im-process-journey__card:hover,
.im-process-journey__card.is-active {
  transform: translateY(-6px);
  box-shadow: var(--im-shadow-2);
  border-color: var(--im-accent-200);
}
.im-process-journey__top { display: flex; align-items: center; justify-content: space-between; }
.im-process-journey__badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.6px solid var(--im-accent-200);
  background: color-mix(in srgb, var(--im-accent-200) 6%, var(--im-card-bg));
  color: var(--im-accent-200);
  display: grid;
  place-items: center;
  flex: none;
  transition: background .42s var(--im-ease), color .42s var(--im-ease), transform .42s var(--im-ease);
}
.im-process-journey__card:hover .im-process-journey__badge,
.im-process-journey__card.is-active .im-process-journey__badge {
  background: var(--im-accent-200);
  color: #fff;
}
.im-process-journey__badge svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.im-process-journey__num { font-family: var(--im-font-display); font-size: 12px; letter-spacing: .1em; color: var(--im-text-muted); }
.im-process-journey__title { font-family: var(--im-font-display); font-weight: 600; font-size: 19px; color: var(--im-ink); margin: var(--im-space-1) 0 0; }
.im-process-journey__body {
  font-family: var(--im-font-body, "Inter", system-ui, -apple-system, sans-serif);
  font-size: 14px;
  color: var(--im-text-muted);
  line-height: 1.55;
  margin: 0;
}
.im-process-journey__mock {
  margin-top: var(--im-space-3);
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-control);
  background: var(--im-band);
  padding: var(--im-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--im-space-2);
}
.im-process-journey__mock-hd {
  font-family: var(--im-font-display);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--im-text-muted);
  display: flex;
  justify-content: space-between;
  gap: var(--im-space-3);
}
.im-process-journey__mock-row { display: flex; align-items: center; gap: var(--im-space-2); font-size: 13px; color: var(--im-ink); }
.im-process-journey__mock-chk {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--im-accent-200);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 10px;
  flex: none;
}
.im-process-journey__mock-chk--o { background: transparent; border: 1.5px solid var(--im-text-muted); }
.im-process-journey__mock-bar { height: 7px; border-radius: 4px; background: var(--im-hairline); overflow: hidden; margin-top: var(--im-space-1); }
.im-process-journey__mock-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--im-accent-200);
  border-radius: 4px;
  transition: width 1.1s var(--im-ease) .1s;
}
.im-process-journey__card.in .im-process-journey__mock-bar i { width: var(--im-proc-pct, 0%); }
@media (max-width: 900px) {
  .im-process-journey__grid { grid-template-columns: 1fr 1fr; }
  .im-process-journey__card--lead,
  .im-process-journey__card--wide { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) {
  .im-process-journey__grid { grid-template-columns: 1fr; }
  .im-process-journey__card--lead,
  .im-process-journey__card--wide { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .im-process-journey__card:hover,
  .im-process-journey__card.is-active { transform: none; }
  .im-process-journey__card:hover .im-process-journey__badge,
  .im-process-journey__card.is-active .im-process-journey__badge { transform: none; }
  .im-process-journey__mock-bar i { transition: none; width: var(--im-proc-pct, 0%); }
}

/* ---- testimonials ---- Hover matches the other card grids (.im-markcard /
   .im-how-card): lift + shadow + border accent, so it reads as one family. */
.im-testimonials__hd { max-width: 62ch; margin-bottom: var(--im-space-10); }
.im-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--im-space-5); align-items: start; }
.im-testimonials__card {
  background: var(--im-card-bg);
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card);
  padding: var(--im-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--im-space-4);
  transition: transform var(--im-dur) var(--im-ease),
              box-shadow var(--im-dur) var(--im-ease),
              border-color var(--im-dur) var(--im-ease);
}
.im-testimonials__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--im-shadow-2);
  border-color: var(--im-accent-200);
}
/* Rating gold — the one warm accent on this card. No design-system token exists
   for a review star, and teal stars read as "not a rating", so this is a scoped
   one-off literal rather than a var(). */
.im-testimonials__stars { color: #e0a53a; font-size: 13px; letter-spacing: 3px; line-height: 1; }
.im-testimonials__quote { font-family: var(--im-font-display); font-size: 17.5px; line-height: 1.45; color: var(--im-ink); margin: 0; }
.im-testimonials__mark { color: var(--im-accent-200); font-weight: 700; margin-right: 1px; opacity: .6; }
.im-testimonials__by { display: flex; align-items: center; gap: var(--im-space-3); margin-top: auto; }
.im-testimonials__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font-family: var(--im-font-display);
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--im-accent-200), var(--im-accent-100));
}
.im-testimonials__meta { display: flex; flex-direction: column; gap: 4px; }
.im-testimonials__name { font-size: 14.5px; font-weight: 600; color: var(--im-ink); }
.im-testimonials__chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--im-font-display);
  font-size: 11px;
  color: var(--im-text-muted);
  background: var(--im-band);
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-pill);
  padding: 2px 9px;
}
.im-testimonials__note { font-family: var(--im-font-display); font-size: 11px; color: var(--im-text-muted); text-align: center; margin-top: var(--im-space-6); }
@media (max-width: 900px) {
  .im-testimonials__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .im-testimonials__card { transition: none; }
  .im-testimonials__card:hover { transform: none; }
}

/* --- batch C: credentials_hero / people_network / how_it_works_cards / mission_statement --- */
/* ============================================================
 * css-batchC.css — About-page blocks (T3): credentials_hero,
 * people_network, how_it_works_cards, mission_statement.
 * Tokens only (design-system/tokens.css). Namespaced under each block's
 * root class. Orchestrator appends into design-system/blocks.css —
 * do not @import this file directly from a template.
 * ============================================================ */

/* ============================================================
 * .im-credentials-hero — authority hero + credibility strip
 * ============================================================ */
.im-credentials-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--im-space-10);
  align-items: center;
}
.im-credentials-hero__title {
  font-family: var(--im-font-display);
  font-weight: 600;
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--im-ink);
  max-width: 15ch;
  margin-top: var(--im-space-3);
}
.im-credentials-hero__mark {
  background: linear-gradient(var(--im-accent-200), var(--im-accent-200)) no-repeat left bottom;
  background-size: 100% .1em;
  padding-bottom: 3px;
}
.im-credentials-hero__lede {
  margin-top: var(--im-space-5);
  font-size: 18px;
  line-height: 1.55;
  color: var(--im-text-muted);
  max-width: 50ch;
}
.im-credentials-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--im-space-3);
  margin-top: var(--im-space-6);
}
.im-credentials-hero__strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--im-space-8);
  margin-top: var(--im-space-8);
  padding-top: var(--im-space-6);
  border-top: 1px solid var(--im-hairline);
}
.im-credentials-hero__stat { display: flex; flex-direction: column; gap: 4px; }
.im-credentials-hero__statval {
  font-family: var(--im-font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: var(--im-ink);
  font-variant-numeric: tabular-nums;
}
.im-credentials-hero__statlabel {
  font-family: var(--im-font-display);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--im-text-muted);
  max-width: 20ch;
}
.im-credentials-hero__globe { display: flex; align-items: center; justify-content: center; }
.im-credentials-hero__globeframe {
  position: relative;
  width: clamp(200px, 24vw, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--im-hairline);
  background: var(--im-band);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: border-color var(--im-dur) var(--im-ease);
}
/* Scale the shared region-medallion emblem up from its default 84px badge
   size to fill this hero-side frame; the medallion's own SVG/JS is untouched. */
.im-credentials-hero__globeframe .region-medallion { width: 68%; height: 68%; margin: 0; }
@media (max-width: 900px) {
  .im-credentials-hero__grid { grid-template-columns: 1fr; gap: var(--im-space-8); }
  .im-credentials-hero__globe { order: -1; }
  .im-credentials-hero__globeframe { width: 180px; margin: 0 auto; }
  .im-credentials-hero__strip { gap: var(--im-space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .im-credentials-hero__globeframe { transition: none; }
}

/* ============================================================
 * .im-how-it-works — 3 model cards (Clarity / Platform / Experts on demand)
 * ============================================================ */
.im-how-it-works__hd { max-width: 64ch; margin-bottom: var(--im-space-8); }
.im-how-it-works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--im-space-6);
}
.im-how-card {
  background: var(--im-card-bg);
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card);
  padding: var(--im-space-8) var(--im-space-6);
  display: flex;
  flex-direction: column;
  transition: transform var(--im-dur) var(--im-ease), box-shadow var(--im-dur) var(--im-ease), border-color var(--im-dur) var(--im-ease);
}
.im-how-card:hover { transform: translateY(-3px); box-shadow: var(--im-shadow-2); border-color: var(--im-ink); }
.im-how-card__ic { width: 36px; height: 36px; color: var(--im-accent-200); }
.im-how-card__ic svg { width: 100%; height: 100%; }
.im-how-card__eyebrow {
  font-family: var(--im-font-display);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--im-text-muted);
  margin-top: var(--im-space-4);
}
.im-how-card__title {
  font-family: var(--im-font-display);
  font-weight: 600;
  font-size: 22px;
  margin-top: var(--im-space-1);
}
.im-how-card__body { font-size: 15px; line-height: 1.6; color: var(--im-text-200); margin-top: var(--im-space-2); }
@media (max-width: 900px) {
  .im-how-it-works__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .im-how-card { transition: none; }
  .im-how-card:hover { transform: none; }
}

/* ============================================================
 * .im-people-network — Dhruti lead card + regulated-network panel
 * ============================================================ */
/* align-items: start, not stretch. The network panel lost the SRA badge and its
   note to the regulatory band (2026-08-02) and is now materially shorter than the
   lead-person card; stretching it to match left a block of empty card under the
   market chips. Sized to content, the two columns read as two objects rather than
   one object and one padded-out box. */
.im-people-network__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--im-space-6);
  align-items: start;
}
.im-lead-person {
  background: var(--im-card-bg);
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Compact profile header, not a full-bleed banner. The source
   (dhruti_square26.jpg) is a tight 1:1 headshot, so ANY landscape crop of it
   fills the card with face — the failure the previous full-width 4/3 treatment
   produced. Square-in-square shows the whole photo at bio-card scale, and the
   sizing/radius mirrors .im-midcta__img so her portrait reads the same across
   both blocks. */
.im-lead-person__header { display: flex; align-items: center; gap: var(--im-space-6); }
.im-lead-person__ident { min-width: 0; }
.im-lead-person__img {
  width: 176px;
  height: 176px;
  object-fit: cover;
  border-radius: var(--im-radius-card, 6px);
  flex-shrink: 0;
}
.im-lead-person__body { padding: var(--im-space-6); }
.im-lead-person__name { font-family: var(--im-font-display); font-weight: 600; font-size: 24px; color: var(--im-ink); }
.im-lead-person__role {
  font-family: var(--im-font-display);
  font-size: 12px;
  color: var(--im-text-muted);
  margin-top: var(--im-space-2);
}
.im-lead-person__cred { color: var(--im-accent-200); }
.im-lead-person__bio { font-size: 14.5px; line-height: 1.6; color: var(--im-text-200); margin-top: var(--im-space-3); }
.im-lead-person__quote {
  font-family: var(--im-font-display);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--im-ink);
  border-left: 3px solid var(--im-accent-200);
  padding-left: var(--im-space-4);
  margin-top: var(--im-space-4);
}
/* Directory-recognition badge (Legal 500) on the About people card. The
   wordmark asset is solid black; the card sits on a light background so it
   reads without a chip. */
.im-cred-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--im-space-3);
  margin-top: var(--im-space-4);
  padding: var(--im-space-2) var(--im-space-3);
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-control);
  text-decoration: none;
  transition: border-color 120ms ease;
}
.im-cred-badge:hover { border-color: var(--im-accent-200); }
.im-cred-badge__logo { height: 16px; width: auto; display: block; flex: none; }
.im-cred-badge__text { font-size: 12px; line-height: 1.35; color: var(--im-text-200); }

/* Same badge on a dark surface (the expertise band's person cell). "on-ink"
   follows the existing im-btn--on-ink naming and means any dark ground, navy
   included. The wordmark is black-on-transparent, so it needs inverting to
   white rather than a second asset — verified: legal500.png is RGBA with a
   fully transparent ground, so invert() hits the glyphs and nothing else.
   --im-text-200 is a light-surface ink and would be near-invisible here, hence
   the explicit on-paper values. */
.im-cred-badge--on-ink { border-color: rgba(255, 255, 255, 0.28); }
.im-cred-badge--on-ink:hover { border-color: var(--im-accent-200); }
.im-cred-badge--on-ink .im-cred-badge__logo { filter: invert(1); }
.im-cred-badge--on-ink .im-cred-badge__text { color: rgba(255, 255, 255, 0.78); }

/* ---- Partner network — flowing node graph (worldwide home) ----
   parts/blocks/partner_network.html + partner-network-graph.js. A structured
   network — a core with squares pinwheeling off it and leaf spurs — threaded by
   one thin teal line that never stops, lighting each node teal as it passes.
   No labels, no panel, no background. The .im-network* rules further down are
   About's and are untouched. The markets list is sr-only content (statutory
   titles + regulators) backing the decoration — see the template. */
.im-block-section.im-partner-net { padding-top: var(--im-space-16); padding-bottom: var(--im-space-16); }

.im-netgraph { display: grid; grid-template-columns: 1fr; gap: var(--im-space-6); align-items: center; }
.im-netgraph.is-live { grid-template-columns: 0.9fr 1.1fr; gap: var(--im-space-10); }
.im-netgraph__intro { max-width: 52ch; }

/* The markets list is never shown — content for screen readers and search
   engines only. Self-contained sr-only so it does not depend on a utility class
   loading on this page. */
.im-netgraph__markets {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; list-style: none;
}

.im-netgraph__stage { display: none; }
.im-netgraph.is-live .im-netgraph__stage {
  display: block;
  aspect-ratio: 100 / 90;   /* roomy, near-square */
  max-height: 420px;
  margin-inline: auto;
}
.im-netgraph__svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Thin edges, a muted teal-grey. */
.im-netgraph__edges line {
  stroke: color-mix(in srgb, var(--im-accent-200) 40%, var(--im-hairline));
  stroke-width: .2;
}
/* Teal-outlined nodes; they fill teal as the line's head reaches them. */
.im-netgraph__dot {
  fill: var(--im-card-bg); stroke: var(--im-accent-200); stroke-width: .3;
  transition: fill var(--im-dur) var(--im-ease), stroke-width var(--im-dur) var(--im-ease);
}
.im-netgraph__dot.is-lit { fill: var(--im-accent-200); stroke-width: .5; }
/* The one thin flowing line. */
.im-netgraph__flow {
  stroke: var(--im-accent-200); stroke-width: .55; stroke-linecap: round;
  filter: drop-shadow(0 0 1px color-mix(in srgb, var(--im-accent-100) 70%, transparent));
}

@media (max-width: 820px) {
  .im-netgraph.is-live { grid-template-columns: 1fr; gap: var(--im-space-6); }
  .im-netgraph__stage { max-height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .im-netgraph__dot { transition: none; }
}

.im-network {
  background: var(--im-card-bg);
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card);
  padding: var(--im-space-8);
  display: flex;
  flex-direction: column;
}
.im-network__title { font-family: var(--im-font-display); font-weight: 600; font-size: 22px; color: var(--im-ink); }
.im-network__body { font-size: 14.5px; line-height: 1.6; color: var(--im-text-200); margin-top: var(--im-space-3); }
.im-network__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--im-space-2);
  margin-top: var(--im-space-5);
}
.im-network__chip {
  display: flex;
  align-items: center;
  gap: var(--im-space-2);
  border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-control);
  padding: var(--im-space-2) var(--im-space-3);
  background: var(--im-band);
}
.im-network__flag { font-size: 18px; line-height: 1; }
.im-network__chipbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.im-network__chipname { font-size: 13px; color: var(--im-ink); }
.im-network__chiptag {
  font-family: var(--im-font-display);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--im-text-muted);
}
.im-network__note {
  margin-top: auto;
  padding-top: var(--im-space-4);
  font-size: 12px;
  line-height: 1.5;
  color: var(--im-text-muted);
  border-top: 1px solid var(--im-hairline);
}
@media (max-width: 900px) {
  .im-people-network__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .im-network__grid { grid-template-columns: 1fr; }
  .im-lead-person__img { width: 132px; height: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .im-lead-person, .im-network { transition: none; }
}

/* ---- The people cards on ink (About, 2026-09-29). Drawn inside the dark
   proof band (parts/blocks/people_cards.html via expertise_band.html's
   expertise_people), so they drop the paper card: no fill, no box, the two
   halves split by the same white hairline the band's figures sit on, type in
   the band's own paper-on-navy values. Scoped to the band, so the partial
   keeps its paper treatment anywhere else. ---- */
.im-expertise-band .im-people-network__grid { margin-top: var(--im-space-10); gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .14); }
.im-expertise-band .im-lead-person,
.im-expertise-band .im-network { background: none; border: 0; border-radius: 0; }
.im-expertise-band .im-lead-person__body { padding: var(--im-space-8) var(--im-space-8) 0 0; }
.im-expertise-band .im-network { padding: var(--im-space-8) 0 0 var(--im-space-8);
  border-left: 1px solid rgba(255, 255, 255, .14); align-self: stretch; }
.im-expertise-band .im-lead-person__name,
.im-expertise-band .im-network__title,
.im-expertise-band .im-lead-person__quote,
.im-expertise-band .im-network__chipname { color: #eef1f5; }
.im-expertise-band .im-lead-person__role,
.im-expertise-band .im-network__chiptag { color: #b8c0cc; }
.im-expertise-band .im-lead-person__bio,
.im-expertise-band .im-network__body { color: #c4cdd8; }
/* Teal is interaction-only in the key: the credential reads in paper, and the
   quote rule is the umber key lifted for navy. */
.im-expertise-band .im-lead-person__cred { color: #eef1f5; }
.im-expertise-band .im-lead-person__quote { border-left-color: color-mix(in srgb, var(--im-key-route) 55%, #fff); }
.im-expertise-band .im-network__chip { background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .14); }
.im-expertise-band .im-lead-person .im-cred-badge { border-color: rgba(255, 255, 255, .28); }
.im-expertise-band .im-lead-person .im-cred-badge:hover { border-color: var(--im-accent-100); }
.im-expertise-band .im-lead-person .im-cred-badge__logo { filter: invert(1); }
.im-expertise-band .im-lead-person .im-cred-badge__text { color: rgba(255, 255, 255, .78); }
@media (max-width: 900px) {
  .im-expertise-band .im-lead-person__body { padding-right: 0; }
  .im-expertise-band .im-network { padding-left: 0; border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .14); margin-top: var(--im-space-8); }
}
@media (max-width: 560px) {
  /* Short country names fit two across on a phone; one column made the band
     twice as tall for no gain. */
  .im-expertise-band .im-network__grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
 * .im-mission — compressed multinational-thesis pull-quote
 * ============================================================ */
.im-mission__inner { max-width: 62ch; }
.im-mission__title {
  font-family: var(--im-font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 2.8vw, 2.35rem);
  line-height: 1.15;
  color: var(--im-ink);
  margin-top: var(--im-space-3);
}
.im-mission__body {
  margin-top: var(--im-space-5);
  font-size: 19px;
  line-height: 1.6;
  color: var(--im-ink);
  border-left: 3px solid var(--im-accent-200);
  padding-left: var(--im-space-5);
  transition: border-color var(--im-dur) var(--im-ease);
}
@media (max-width: 900px) {
  .im-mission__body { font-size: 17px; padding-left: var(--im-space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .im-mission__body { transition: none; }
}

/* ============================================================
   Blog publication redesign (2026-07-31)
   Full-bleed bands + tabs + index table for the blog landing,
   category feed and article foot. Tokens only.
   ============================================================ */

/* ---- Blog: end CTA band (full-bleed ink; .im-midcta is the contained variant) ---- */
.im-cta-band { background: var(--im-ink); color: var(--im-paper); }
.im-cta-band__in { display: grid; gap: var(--im-space-6); align-items: center; padding-block: var(--im-space-12); }
@media (min-width: 760px) { .im-cta-band__in { grid-template-columns: 1.4fr 1fr; } }
.im-cta-band__title { font-family: var(--im-font-serif); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.08; letter-spacing: var(--im-track-title); margin: 0; color: var(--im-paper); text-wrap: balance; }
/* Display-face title, for the band on a marketing/service page rather than the
   blog. The serif above is in voice with article prose; on the editorial feature
   shell the neighbouring headings are all display (.im-sech, .im-closing__title,
   and .im-midcta__title which this band replaced there), so a serif CTA read as
   a component borrowed from somewhere else. Size ramp is deliberately unchanged:
   it stays a step under .im-closing__title, which is still the page's last word. */
.im-cta-band--display .im-cta-band__title { font-family: var(--im-font-display); font-weight: 600; }
.im-cta-band__body { margin: var(--im-space-3) 0 0; color: var(--im-paper); opacity: .78; font-size: 15px; max-width: 44ch; }
.im-cta-band__actions { display: flex; gap: var(--im-space-3); flex-wrap: wrap; }
@media (min-width: 760px) { .im-cta-band__actions { justify-content: flex-end; } }
@media (max-width: 640px) { .im-cta-band__actions .im-btn { flex: 1 1 auto; justify-content: center; } }

/* Ghost button on an ink ground. Pairs with the existing .im-btn--on-ink. */
.im-btn--ghost-on-ink { background: transparent; color: var(--im-paper); border-color: var(--im-paper); opacity: .82; }
.im-btn--ghost-on-ink:hover { background: var(--im-paper); border-color: var(--im-paper); color: var(--im-ink); opacity: 1; }
.im-btn--ghost-on-ink:active { background: var(--im-band); border-color: var(--im-band); color: var(--im-ink); opacity: 1; }

/* ---- Blog: filter tabs (sticky under the fixed nav; replaces the offcanvas sidebar) ---- */
.im-tabs { position: sticky; top: var(--im-nav-h); z-index: 20;
  background: color-mix(in srgb, var(--im-paper) 92%, transparent);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--im-hairline); }
.im-tabs__in { display: flex; align-items: center; gap: var(--im-space-1); overflow-x: auto; }
.im-tabs__tab { font-family: var(--im-font-display); font-size: 13.5px; color: var(--im-text-muted);
  text-decoration: none; padding: 15px var(--im-space-4); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.im-tabs__tab:hover { color: var(--im-ink); }
.im-tabs__tab.is-active { color: var(--im-ink); border-bottom-color: var(--im-ink); font-weight: 600; }
.im-tabs__tab:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: -2px; }
.im-tabs__search { margin-left: auto; padding-left: var(--im-space-3); }
.im-tabs__searchinput { font: inherit; font-size: 13px; border: 1px solid var(--im-hairline);
  border-radius: 999px; padding: 7px var(--im-space-4); background: var(--im-card-bg);
  color: var(--im-ink); min-height: 36px; }
.im-tabs__searchinput:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 1px; }

/* ---- Blog: pagination (compact; the per-page selector was retired) ---- */
.im-pagination { display: flex; align-items: center; justify-content: center; gap: var(--im-space-4);
  margin-top: var(--im-space-10); font-family: var(--im-font-display); font-size: 13.5px; }
.im-pagination__link { text-decoration: none; color: var(--im-ink); border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-control); padding: 9px var(--im-space-4); min-height: 44px;
  display: inline-flex; align-items: center; }
.im-pagination__link:hover { border-color: var(--im-accent-200); color: var(--im-accent-200); }
.im-pagination__link:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 2px; }
.im-pagination__link.is-disabled { color: var(--im-text-muted); pointer-events: none; opacity: .55; }
.im-pagination__status { color: var(--im-text-muted); font-variant-numeric: tabular-nums; }

/* ---- Blog: indexed all-articles table ---- */
.im-index-table__wrap { overflow-x: auto; }
.im-index-table { width: 100%; border-collapse: collapse; }
.im-index-table thead th { text-align: left; font-family: var(--im-font-display); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--im-text-muted); font-weight: 600;
  padding: 0 var(--im-space-4) var(--im-space-3) 0; border-bottom: 1px solid var(--im-hairline); }
.im-index-table tbody td { padding: var(--im-space-4) var(--im-space-4) var(--im-space-4) 0;
  border-bottom: 1px solid var(--im-hairline); vertical-align: baseline; font-size: 14.5px; }
.im-index-table__date { color: var(--im-text-muted); font-size: 12.5px; white-space: nowrap;
  font-variant-numeric: tabular-nums; width: 1%; }
.im-index-table__cat { color: var(--im-accent-200); font-size: 11.5px; white-space: nowrap; width: 1%; }
.im-index-table__title a { color: var(--im-ink); text-decoration: none; font-weight: 500; }
.im-index-table__title a:hover { color: var(--im-accent-200); }
.im-index-table__title a:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 2px; }
.im-index-table__more { display: block; width: 100%; margin-top: var(--im-space-6); padding: var(--im-space-4);
  text-align: center; border: 1px solid var(--im-hairline); border-radius: var(--im-radius-control);
  color: var(--im-text-200); font-family: var(--im-font-display); font-size: 13.5px; text-decoration: none; }
.im-index-table__more:hover { border-color: var(--im-accent-200); color: var(--im-accent-200); }
/* Below 420px the date column is dropped rather than allowed to scroll sideways. */
@media (max-width: 420px) {
  .im-index-table__date, .im-index-table thead th:first-child { display: none; }
}

/* ---- Blog: newsletter capture ---- */
.im-newsletter { border-top: 1px solid var(--im-hairline); }
.im-newsletter__in { display: grid; gap: var(--im-space-6); align-items: center; padding-block: var(--im-space-12); }
@media (min-width: 760px) { .im-newsletter__in { grid-template-columns: 1fr 1fr; } }
.im-newsletter__title { font-family: var(--im-font-serif); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.1; letter-spacing: var(--im-track-title); color: var(--im-ink); margin: 0; text-wrap: balance; }
.im-newsletter__body { margin: var(--im-space-3) 0 0; font-size: 15px; color: var(--im-text-200); max-width: 42ch; }
.im-newsletter__form { display: flex; gap: var(--im-space-3); flex-wrap: wrap; }
.im-newsletter__input { flex: 1 1 220px; font: inherit; font-size: 14px; padding: 12px var(--im-space-4);
  min-height: 44px; border: 1px solid var(--im-hairline); border-radius: 999px;
  background: var(--im-card-bg); color: var(--im-ink); }
.im-newsletter__input:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 1px; }
@media (max-width: 640px) {
  .im-newsletter__form { flex-direction: column; }
  .im-newsletter__input { flex: 1 1 auto; }
  .im-newsletter__form .im-btn { justify-content: center; }
}

/* ---- Blog: section-label row + featured headline ---- */
.im-seclab-row { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--im-space-4); margin-bottom: var(--im-space-6); }
.im-seclab-row__more { font-family: var(--im-font-display); font-size: 12.5px;
  color: var(--im-accent-200); text-decoration: none; white-space: nowrap; }
.im-seclab-row__more:hover { text-decoration: underline; }
/* The featured lede headline is the deliberate serif jewel on the feed. */
.im-postcard--featured .im-postcard__title { font-family: var(--im-font-serif); font-weight: 400; }

/* ---- SRA digital badge (Yoshki embed) ----
   Sized to the 275x163 embed Yoshki publish. The iframe is third-party and
   transparent, so it takes no background of its own here: on the dark trust
   band it must sit on the band, not in a white card. `aspect-ratio` replaces
   the padding-bottom box in Yoshki's sample markup — same constraint, no nested
   absolute positioning — and the max-width alone is a sane fallback without it. */
.im-sra-badge { max-width: 275px; }
/* No `color-scheme` here. Setting it light forces the embedded document to use
   light UA styles, which paints an opaque canvas behind a badge that Yoshki
   serve on transparency — a white box on our paper ground. Their own snippet
   relies on the frame staying transparent (it carries the legacy
   `allowTransparency` attribute for the same purpose), so this does too. */
.im-sra-badge__frame { display: block; width: 100%; aspect-ratio: 275 / 163;
  border: 0; margin: 0; padding: 0; background: transparent; }
/* Static-mark variant of the badge block. Sized to the same 275px slot as the
   embed — the artwork is 480x281, a 1.708 ratio against the badge's 1.687, so
   the two are interchangeable in the layout to within 2px.
   The artwork has a pure-white background against the paper ground (#FCFBF7),
   so it needs SOMETHING or it reads as an unexplained bright rectangle.
   `mix-blend-mode: multiply` was the first attempt and does not work here:
   `.st-hero__content` sets `position: relative; z-index: 2`, which creates a
   stacking context, so the blend isolates inside it and never reaches the page
   background. Verified in the browser — the plate stayed white. Do not put it
   back without moving the element out of that ancestor.

   So the plate is deliberate instead: white card, hairline, small radius. A
   credential presented on a card reads as intentional, where the same white
   bleeding into the paper reads as a broken asset. It also leaves the SRA
   artwork untouched, which the guidance requires. */
.im-sra-badge__link { display: block; border-radius: var(--im-radius-control);
  overflow: hidden; border: 1px solid var(--im-hairline); background: #fff; }
.im-sra-badge__link:focus-visible { outline: 2px solid var(--im-accent-200);
  outline-offset: 2px; }
.im-sra-badge__img { display: block; width: 100%; height: auto; }

.im-sra-badge__label { margin: var(--im-space-2) 0 0; font-family: var(--im-font-display);
  font-size: 11.5px; letter-spacing: var(--im-track-label); color: var(--im-text-muted); }
/* In the footer's legal strip the badge follows the regulatory sentence and must
   not stretch the flex row it lands in. */
.im-footer__legal .im-sra-badge { margin-top: var(--im-space-4); }

/* ---- Regulatory band (SRA badge + its scoping sentence) ----
   Badge left, sentence right, vertically centred so the two read as ONE
   statement. That pairing is the regulatory justification for the mark being on
   a market-neutral page at all, so the layout has to make it look like a pair
   rather than a logo with a caption that happens to be nearby.
   The badge track is fixed at the artwork's published 275px, which is not
   negotiable (the SRA forbid resizing without written permission), so the copy
   takes whatever remains. Below 640px they stack, badge first. */
.im-regband { border-top: 1px solid var(--im-hairline); }
.im-regband__in { display: grid; grid-template-columns: 275px minmax(0, 1fr);
  gap: var(--im-space-8); align-items: center; padding-block: var(--im-space-10); }
.im-regband__note { margin: 0; color: var(--im-text-200); font-size: 14.5px;
  max-width: 62ch; }
@media (max-width: 639.98px) {
  .im-regband__in { grid-template-columns: 1fr; gap: var(--im-space-5);
    align-items: start; padding-block: var(--im-space-8); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Groundwork page devices (design audit, 2026-09-12; page one = global home)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- Feature band: type-only variant and the asymmetric split ----------
   With an image the band is 7/5, copy first. Nobody in the benchmark defaults
   to 6/6 for a copy-plus-media row. Without an image it is a single column
   with the title at display scale: there is no placeholder panel. */
.im-feature-band__inner { grid-template-columns: 7fr 5fr; }
.im-feature-band--type .im-feature-band__inner { grid-template-columns: minmax(0, 1fr); }
.im-feature-band--type .im-feature-band__title {
  font-size: clamp(32px, 3.6vw, 52px); line-height: 1.06; max-width: 20ch; }
.im-feature-band--type .im-feature-band__body { max-width: 56ch; font-size: 17px; }
@media (max-width: 860px) { .im-feature-band__inner { grid-template-columns: minmax(0, 1fr); } }

/* ---- Widths and air (design audit: "there is no such thing as the container
   width"). A wide measure for tables, directories and market grids; more
   vertical air for the plain sections on a page that carries the rail. ---- */
.im-wrap--wide { max-width: 1400px; }
.im-block-section--air { padding: clamp(var(--im-space-16), 9vw, 128px) 0; }

/* ---- Groundwork page scope: section heads one weight lighter, with room.
   Hierarchy from size and air rather than weight (Stripe 300, Figma 340,
   Intercom 400 at display sizes). Scoped to the page that opts in. ---- */
.im-groundwork .im-sech { font-weight: 500; }
.im-groundwork .im-secsub { font-size: 17px; }

/* ---- Destinations lattice: the same destination cards as a borderless
   hairline lattice on the wide measure. Cells draw right and bottom edges,
   the grid draws top and left, so no edge is doubled. No fill, no radius, no
   lift on hover; hover is a sand tint. The card's content contract is
   untouched (parts/blocks/destination_card.html). ---- */
.im-destinations-picker--lattice .im-destinations-picker__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--im-hairline); border-left: 1px solid var(--im-hairline); }
.im-destinations-picker--lattice .im-markcard {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-right: 1px solid var(--im-hairline); border-bottom: 1px solid var(--im-hairline); }
.im-destinations-picker--lattice .im-markcard:hover,
.im-destinations-picker--lattice .im-markcard:focus-visible {
  transform: none; box-shadow: none; background: var(--im-tint-sand);
  border-color: var(--im-hairline); }
.im-destinations-picker--lattice .im-markcard__body { padding: var(--im-space-8) var(--im-space-6); padding-right: 124px; }
@media (max-width: 980px) { .im-destinations-picker--lattice .im-destinations-picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .im-destinations-picker--lattice .im-destinations-picker__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Ground cadence: the change of ground is the rhythm (Monzo's hard
   cuts, Ghost's "never two cream bands in a row"), and the grounds are paper
   and navy only. Sand, moss and a full-bleed umber were each tried as a
   section ground and rejected (Rohan, 2026-09-13); the --im-tint-* tokens
   stay for chips, hovers and washes inside a panel, never a section. ---- */

/* ---- Journey band: the timetable (Rohan, 2026-09-27, option B of the
   journey band review). The heading holds the left column; the steps run
   down a vertical umber line on the right like the stops in a timetable, a
   hairline between them. The line past the last stop is dashed: the route
   continues and nothing arrives. Paper ground (navy and sand were rejected
   2026-09-13). One-shot motion on reveal: the line draws top to bottom, each
   stop arrives as the line reaches it. Hidden states are gated on `.im-js`
   so the band is complete without JavaScript, and off under reduced motion. */
.im-journey-band { background: var(--im-paper); color: var(--im-ink); padding: var(--im-space-24) 0; }
.im-journey-band__in { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(var(--im-space-8), 6vw, 96px); align-items: start; }
.im-journey-band__lede { color: var(--im-text-200); font-size: 17px; max-width: 44ch; margin: var(--im-space-3) 0 0; }
.im-journey-band__route { position: relative; list-style: none; margin: 0; padding: 0; }
/* One segment per stop, from its ring to the next ring (ring centres sit 40px
   into each stop). The last stop's segment is the dashed tail, so the solid
   line never runs past the final ring. */
.im-journey-band__stop::before { content: ""; position: absolute; left: 15px; top: 40px; height: 100%; width: 2px;
  background: var(--im-key-route); transform-origin: top; transition: transform .45s linear; }
.im-journey-band__stop:last-child::before { height: var(--im-space-12); background: none;
  border-left: 2px dashed var(--im-key-route); opacity: .5; transition: opacity .5s ease; }
.im-journey-band__stop { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--im-space-6);
  padding: var(--im-space-6) 0; }
.im-journey-band__stop + .im-journey-band__stop .im-journey-band__text { border-top: 1px solid var(--im-hairline);
  padding-top: var(--im-space-6); margin-top: calc(-1 * var(--im-space-6)); }
.im-journey-band__node { position: relative; z-index: 1; margin-top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  box-sizing: border-box; background: var(--im-paper); border: 2px solid var(--im-key-route); color: var(--im-key-route);
  font-family: var(--im-font-display); font-weight: 600; font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums;
  transition: background var(--im-dur) var(--im-ease), color var(--im-dur) var(--im-ease),
    transform .45s cubic-bezier(.2, .7, .2, 1), opacity .35s ease; }
.im-journey-band__stop:hover .im-journey-band__node { background: var(--im-key-route); color: var(--im-paper); }
.im-journey-band__stop-title { font-family: var(--im-font-display); font-weight: 500; font-size: 19px; line-height: 1.25;
  color: var(--im-ink); margin: 4px 0 var(--im-space-2); }
.im-journey-band__stop-body { color: var(--im-text-200); font-size: 15px; line-height: 1.6; max-width: 56ch; margin: 0; }
.im-journey-band__text { transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.im-journey-band__stop:nth-child(2) > * { transition-delay: .3s; }
.im-journey-band__stop:nth-child(3) > * { transition-delay: .6s; }
.im-journey-band__stop:nth-child(4) > * { transition-delay: .9s; }
.im-journey-band__stop:nth-child(n+5) > * { transition-delay: 1.1s; }
.im-journey-band__stop:nth-child(1)::before { transition-delay: .15s; }
.im-journey-band__stop:nth-child(2)::before { transition-delay: .45s; }
.im-journey-band__stop:nth-child(3)::before { transition-delay: .75s; }
.im-journey-band__stop:nth-child(n+4)::before { transition-delay: 1.05s; }
.im-js .im-journey-band__route:not(.in) .im-journey-band__stop::before { transform: scaleY(0); transition-delay: 0s; }
.im-js .im-journey-band__route:not(.in) .im-journey-band__stop:last-child::before { transform: none; opacity: 0; }
.im-js .im-journey-band__route:not(.in) .im-journey-band__node { transform: scale(.4); opacity: 0; }
.im-js .im-journey-band__route:not(.in) .im-journey-band__text { opacity: 0; transform: translateX(-8px); }
@media (max-width: 860px) {
  .im-journey-band { padding: var(--im-space-16) 0; }
  .im-journey-band__in { grid-template-columns: minmax(0, 1fr); gap: var(--im-space-8); }
}
@media (prefers-reduced-motion: reduce) {
  .im-journey-band__stop::before, .im-journey-band__node, .im-journey-band__text { transition: none; }
  .im-js .im-journey-band__route:not(.in) .im-journey-band__stop::before { transform: none; }
  .im-js .im-journey-band__route:not(.in) .im-journey-band__stop:last-child::before { opacity: .5; }
  .im-js .im-journey-band__route:not(.in) .im-journey-band__node { transform: none; opacity: 1; }
  .im-js .im-journey-band__route:not(.in) .im-journey-band__text { opacity: 1; transform: none; }
}

/* ---- Figures band (Groundwork scope): the expertise band led by its three
   signed-off figures at display size, hairlines between them, then the
   headline with the named person, then the chips. Same block and context as
   About, which keeps the original order; this is presentation only. The teal
   glow behind the band is off here (teal is interaction-only in the key). ---- */
.im-groundwork .im-expertise-band::before { background: none; }
.im-groundwork .im-expertise-band__in { display: flex; flex-direction: column; }
.im-groundwork .im-expertise-band__stats {
  order: -1; margin-top: 0; border-top: 0;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  margin-bottom: var(--im-space-12); }
.im-groundwork .im-expertise-band__stat { padding: 0 var(--im-space-8) var(--im-space-8) 0; }
.im-groundwork .im-expertise-band__stat + .im-expertise-band__stat { padding-left: var(--im-space-8); }
.im-groundwork .im-expertise-band__stat-figure {
  font-size: clamp(3.25rem, 7vw, 5.25rem); font-weight: 500; letter-spacing: -.035em; }
.im-groundwork .im-expertise-band__stat-label { font-size: 15px; margin-top: var(--im-space-3); }
.im-groundwork .im-expertise-band__title { font-weight: 500; }
@media (max-width: 900px) {
  .im-groundwork .im-expertise-band__stats { grid-template-columns: 1fr; }
  .im-groundwork .im-expertise-band__stat { padding: var(--im-space-5) 0; border-right: 0; }
  .im-groundwork .im-expertise-band__stat + .im-expertise-band__stat { padding-left: 0; }
}

/* ---- Tools strip (Groundwork scope): the three tool cards as one compact
   row without their mini-visuals. The tools index carries the full cards. ---- */
.im-groundwork .im-tools-showcase__mock { display: none; }
.im-groundwork .im-tools-showcase__hd { margin-bottom: var(--im-space-8); }
.im-groundwork .im-tools-showcase__card { padding: var(--im-space-5) var(--im-space-6); }
.im-tools-showcase__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--im-radius-control); margin-top: var(--im-space-2); }

/* ---- Image slot label (dev server only, parts/blocks/image_slot.html): a
   dashed panel naming the file a slot's art lands as, with a link to its
   prompt. show_image_slots follows DEBUG, so this never ships. ---- */
.im-image-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: var(--im-slot-aspect, 16 / 10); width: 100%; box-sizing: border-box; padding: var(--im-space-4);
  border: 1.5px dashed var(--im-key-route); border-radius: var(--im-radius-control); text-align: center;
  background-image: radial-gradient(rgba(25, 27, 22, .12) 1px, transparent 1.3px); background-size: 12px 12px; }
.im-image-slot__k { font-family: var(--im-font-display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--im-key-route); }
.im-image-slot__path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--im-ink);
  word-break: break-all; }
.im-image-slot__link { font-family: var(--im-font-display); font-size: 12.5px; font-weight: 500; color: var(--im-accent-200);
  text-decoration: underline; text-underline-offset: 3px; }
.im-image-slot--on-ink { border-color: rgba(252, 251, 247, .55);
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.3px); }
.im-image-slot--on-ink .im-image-slot__k { color: var(--im-key-route-soft); }
.im-image-slot--on-ink .im-image-slot__path { color: #eef2f6; }
.im-image-slot--on-ink .im-image-slot__link { color: var(--im-accent-100); }

/* ---- Category chips: the route families as colour, never an image
   (Groundwork, 2026-09-12). The swatch takes its colour from the family
   (data-concept) through the key: work umber, business tan, family leaf,
   study fern, visit terracotta, schengen coral; anything else ink. Hairline
   over each chip; hover lifts the swatch and inks the name in the route
   colour. ---- */
.im-chiprow__hd { max-width: 62ch; margin-bottom: var(--im-space-8); }
/* The row is a hairline lattice, the same idiom as the destinations picker on
   the home and the route index below it: cells draw right and bottom edges,
   the grid draws top and left, so no rule is doubled. No fill, no radius, no
   shadow; hover is the sand wash. Rohan (2026-09-13): the separation between
   the chips needed to be "cleaner / easier to see"; a drawn table does that
   without turning six families into six cards. */
.im-chiprow__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--im-hairline); border-left: 1px solid var(--im-hairline); }
/* Three across, two rows, the destinations lattice's own cell: the same
   padding, the name and lede on the left and the tile on the right where
   the destination card keeps its flag. Six narrow cells wrapped every name
   (Rohan, 2026-09-13: "not well spaced"). */
.im-chip { --im-chip: color-mix(in srgb, var(--im-ink) 72%, transparent);
  display: grid; grid-template-columns: minmax(0, 1fr) 56px; grid-template-rows: auto 1fr; column-gap: var(--im-space-5); row-gap: var(--im-space-2);
  padding: var(--im-space-8) var(--im-space-6);
  border-right: 1px solid var(--im-hairline); border-bottom: 1px solid var(--im-hairline);
  text-decoration: none; color: var(--im-ink); transition: background var(--im-dur) var(--im-ease); }
.im-chip:hover, .im-chip:focus-visible { background: var(--im-wash); }
.im-chip__swatch { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; background: var(--im-chip);
  grid-column: 2; grid-row: 1 / span 2; align-self: start; transition: transform var(--im-dur) var(--im-ease); }
/* The route glyph, knocked out in paper. Every stroke has pathLength=100, so
   one dash rule draws all of them on reveal, staggered per chip; the visit
   family's tail stays dashed (not yet travelled). Hover extends the drawing:
   the tile lifts and the glyph slides along its route. */
.im-chip__glyph { width: 40px; height: 40px; fill: none; stroke: var(--im-paper); stroke-width: 3.2;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.im-chip__glyph path, .im-chip__glyph circle { stroke-dasharray: 100; stroke-dashoffset: 0;
  transition: stroke-dashoffset .9s cubic-bezier(.2, .7, .2, 1); }
.im-chip__glyph .im-chip__dash { stroke-dasharray: 8 7; }
.im-js .im-chiprow__grid:not(.in) .im-chip__glyph path,
.im-js .im-chiprow__grid:not(.in) .im-chip__glyph circle { stroke-dashoffset: 100; }
.im-js .im-chiprow__grid:not(.in) .im-chip__glyph .im-chip__dash { stroke-dashoffset: 100; }
.im-chip:nth-child(2) .im-chip__glyph * { transition-delay: .12s; }
.im-chip:nth-child(3) .im-chip__glyph * { transition-delay: .24s; }
.im-chip:nth-child(4) .im-chip__glyph * { transition-delay: .36s; }
.im-chip:nth-child(5) .im-chip__glyph * { transition-delay: .48s; }
.im-chip:nth-child(6) .im-chip__glyph * { transition-delay: .6s; }
.im-chip:nth-child(n+7) .im-chip__glyph * { transition-delay: .72s; }
.im-chip:hover .im-chip__glyph, .im-chip:focus-visible .im-chip__glyph { transform: translateX(4px); }
.im-chip__name { grid-column: 1; font-family: var(--im-font-display); font-weight: 500; font-size: 19px; line-height: 1.25;
  letter-spacing: var(--im-track-head); transition: color var(--im-dur) var(--im-ease); }
.im-chip__lede { grid-column: 1; font-size: 15px; line-height: 1.5; color: var(--im-text-muted); max-width: 36ch; }
@media (max-width: 980px) { .im-chiprow__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .im-chiprow__grid { grid-template-columns: minmax(0, 1fr); } }
.im-chip:hover .im-chip__swatch, .im-chip:focus-visible .im-chip__swatch { transform: translateY(-3px); }
.im-chip:hover .im-chip__name, .im-chip:focus-visible .im-chip__name { color: var(--im-key-route); }
.im-chip:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .im-chip:hover .im-chip__swatch, .im-chip:hover .im-chip__glyph { transform: none; }
  .im-chip__glyph path, .im-chip__glyph circle { transition: none; }
  .im-js .im-chiprow__grid:not(.in) .im-chip__glyph path,
  .im-js .im-chiprow__grid:not(.in) .im-chip__glyph circle { stroke-dashoffset: 0; } }

/* ---- Route index: every route in the market as a hairline list in
   newspaper columns, grouped by family with the family's chip colour as a
   dot. Alphabetical within a family, never ranked; no fee or timescale
   columns until a per-route source-verified field exists. ---- */
.im-routeindex__wrap { margin-top: var(--im-space-16); }
.im-routeindex__title { margin-bottom: var(--im-space-8); }
.im-routeindex__cols { columns: 3; column-gap: var(--im-space-12); column-rule: 1px solid var(--im-hairline); }
.im-routeindex__group { --im-chip: color-mix(in srgb, var(--im-ink) 72%, transparent);
  break-inside: avoid; margin-bottom: var(--im-space-10); }
.im-routeindex__family { display: flex; align-items: center; gap: var(--im-space-3); margin: 0 0 var(--im-space-2);
  font-family: var(--im-font-display); font-weight: 500; font-size: 15px; letter-spacing: .01em; }
.im-routeindex__family a { color: var(--im-ink); text-decoration: none; }
.im-routeindex__family a:hover { color: var(--im-key-route); }
.im-routeindex__tile { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--im-chip); flex: none; }
.im-routeindex__tile .im-chip__glyph { width: 20px; height: 20px; stroke-width: 4.5; }
.im-routeindex__list { list-style: none; margin: 0; padding: 0; }
.im-routeindex__row { padding: var(--im-space-3) 0; border-top: 1px solid var(--im-hairline); }
.im-routeindex__route { font-size: 15px; color: var(--im-ink); text-decoration: none; }
.im-routeindex__route:hover { color: var(--im-key-route); text-decoration: underline; text-underline-offset: 3px; }
.im-routeindex__group .im-seclab { margin-bottom: var(--im-space-3); }
@media (max-width: 980px) { .im-routeindex__cols { columns: 2; } }
@media (max-width: 620px) { .im-routeindex__cols { columns: 1; } }

/* ---- Claims row (employer home): the market's headline claims as a ruled
   row, not numbered pillars. They are not a sequence. Same lattice idiom as
   the chip row. ---- */
.im-claims { list-style: none; margin: var(--im-space-8) 0 var(--im-space-12); padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--im-hairline); border-left: 1px solid var(--im-hairline); }
.im-claims__item { padding: var(--im-space-6) var(--im-space-6); border-right: 1px solid var(--im-hairline); border-bottom: 1px solid var(--im-hairline);
  font-family: var(--im-font-display); font-weight: 500; font-size: 21px; line-height: 1.3; color: var(--im-ink); letter-spacing: var(--im-track-head); }
@media (max-width: 860px) { .im-claims { grid-template-columns: minmax(0, 1fr); } }

/* ---- Module grid as a lattice (compliance platform): the four modules as
   ruled cells, no card chrome, sand wash on hover. Same idiom as the chip
   row. The link label is a verb in sentence case under the Groundwork
   scope, not a tracked caps tag. ---- */
.im-modgrid--lattice { gap: 0; border-top: 1px solid var(--im-hairline); border-left: 1px solid var(--im-hairline); }
.im-modgrid--lattice .im-modcard { border: 0; border-right: 1px solid var(--im-hairline); border-bottom: 1px solid var(--im-hairline);
  border-radius: 0; box-shadow: none; padding: var(--im-space-8) var(--im-space-6); }
.im-modgrid--lattice .im-modcard:hover { transform: none; box-shadow: none; border-color: var(--im-hairline); background: var(--im-tint-sand); }
.im-groundwork .im-modcard__lk { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }

/* ---- The employer offers (employer home): every registry card in one
   hairline lattice, two across, the group's heading as the cell's kicker.
   The capture sits at the top of the cell at 16:9; the feature list is a
   hairline list. ---- */
.im-offer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: var(--im-space-6); }
/* The dividing rule sits in the middle of the gutter: each column carries
   half the gutter as padding on its inner side and the rule is the second
   column's left edge. */
.im-offer__cell { display: flex; flex-direction: column; gap: var(--im-space-3); padding: var(--im-space-2) var(--im-space-10) var(--im-space-4) 0;
  text-decoration: none; color: var(--im-ink); }
.im-offer__cell + .im-offer__cell { border-left: 1px solid var(--im-hairline); padding-left: var(--im-space-10); padding-right: 0; }
.im-offer__cell:hover .im-offer__title, .im-offer__cell:focus-visible .im-offer__title { color: var(--im-key-route); }
.im-offer__cell:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 4px; }
.im-offer__media { margin-bottom: var(--im-space-3); }
.im-offer__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--im-radius-control); }
.im-offer__kicker { font-family: var(--im-font-display); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--im-text-muted); }
.im-offer__title { font-family: var(--im-font-display); font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: var(--im-track-head); margin: 0;
  transition: color var(--im-dur) var(--im-ease); }
.im-offer__body { font-size: 15.5px; line-height: 1.55; color: var(--im-text-200); margin: 0; max-width: 48ch; }
.im-offer__features { list-style: none; margin: var(--im-space-2) 0 0; padding: 0; }
.im-offer__features li { padding: var(--im-space-2) 0; border-top: 1px solid var(--im-hairline); font-size: 14px; color: var(--im-text-200); }
.im-offer__features li::before { content: ""; display: inline-block; width: 10px; height: 3px; border-radius: 2px; background: var(--im-key-route); margin: 0 10px 3px 0; }
.im-offer__lk { margin-top: auto; padding-top: var(--im-space-3); font-family: var(--im-font-display); font-weight: 500; font-size: 14px; color: var(--im-accent-200); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .im-offer { grid-template-columns: minmax(0, 1fr); row-gap: var(--im-space-8); }
  .im-offer__cell { padding-right: 0; }
  .im-offer__cell + .im-offer__cell { border-left: 0; padding-left: 0; border-top: 1px solid var(--im-hairline); padding-top: var(--im-space-8); } }

/* ---- Routes you can hire on (employer home): the country home's chip
   lattice, one per role, with the role's glyph on the tile. The tile colour
   is the employer register: umber for routes you sponsor, tan for routes
   you apply for, ink for routes needing no sponsorship. ---- */
.im-hire { margin-top: var(--im-space-8); }
/* The role heading carries the role's glyph once, on a 40px tile, and the
   glyph draws as the section reveals (the same dash rule as the chips). */
.im-hire__heading { display: flex; align-items: center; gap: var(--im-space-3); margin-bottom: var(--im-space-4); }
.im-hire__heading .im-chip__swatch { width: 40px; height: 40px; border-radius: 8px; background: var(--im-chip); }
.im-hire__heading .im-chip__glyph { width: 30px; height: 30px; stroke-width: 3.6; }
.im-js .im-hire:not(.in) .im-chip__glyph path, .im-js .im-hire:not(.in) .im-chip__glyph circle { stroke-dashoffset: 100; }
.im-js .im-hire:not(.in) .im-chip__glyph .im-chip__dash { stroke-dashoffset: 100; }
.im-hire__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--im-hairline); border-left: 1px solid var(--im-hairline); }
.im-hire { --im-chip: color-mix(in srgb, var(--im-ink) 72%, transparent); }
.im-hire[data-role="sponsored"] { --im-chip: var(--im-key-route); }
.im-hire[data-role="employer_party"] { --im-chip: var(--im-key-route-soft); }
.im-hire__cell { display: flex; flex-direction: column; gap: var(--im-space-2);
  padding: var(--im-space-6); border-right: 1px solid var(--im-hairline); border-bottom: 1px solid var(--im-hairline);
  text-decoration: none; color: var(--im-ink); transition: background var(--im-dur) var(--im-ease); }
.im-hire__cell:hover, .im-hire__cell:focus-visible { background: var(--im-wash); }
.im-hire__cell:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: -2px; }
.im-hire__title { font-family: var(--im-font-display); font-weight: 500; font-size: 18px; line-height: 1.25; margin: 0;
  transition: color var(--im-dur) var(--im-ease); }
.im-hire__cell:hover .im-hire__title { color: var(--im-key-route); }
.im-hire__body { font-size: 14px; line-height: 1.5; color: var(--im-text-muted); margin: 0; }
@media (max-width: 980px) { .im-hire__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .im-hire__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Family plate on a category hub masthead: the family's colour
   full-bleed in the hero's media slot with the route glyph drawn large,
   the "full-bleed on the destination page" half of the chip model. Colour
   keyed on data-concept like the chips; the glyph draws when the hero body
   reveals. ---- */
.im-hero-block__media--family { --im-chip: color-mix(in srgb, var(--im-ink) 72%, transparent);
  aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--im-chip); border-radius: var(--im-radius-card); }
.im-hero-block__media--family .im-chip__glyph { width: 48%; height: auto; stroke-width: 2.4; }
.im-js .im-hero-block__body:not(.in) .im-hero-block__media--family .im-chip__glyph path,
.im-js .im-hero-block__body:not(.in) .im-hero-block__media--family .im-chip__glyph circle { stroke-dashoffset: 100; }

/* ---- Destinations hub grid as the lattice (the home picker's idiom). Both
   classes in the selector: mvp/destinations.css loads after this file and its
   bare .destinations-grid (auto-fill tracks, a 20px gap) would otherwise win
   and pull the cells apart, breaking the hairlines. ---- */
.destinations-grid.destinations-grid--lattice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--im-hairline); border-left: 1px solid var(--im-hairline); }
.destinations-grid--lattice .im-markcard { background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-right: 1px solid var(--im-hairline); border-bottom: 1px solid var(--im-hairline); }
.destinations-grid--lattice .im-markcard:hover, .destinations-grid--lattice .im-markcard:focus-visible {
  transform: none; box-shadow: none; background: var(--im-tint-sand); border-color: var(--im-hairline); }
.destinations-grid--lattice .im-markcard__body { padding: var(--im-space-8) var(--im-space-6); padding-right: 124px; }
@media (max-width: 980px) { .destinations-grid.destinations-grid--lattice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .destinations-grid.destinations-grid--lattice { grid-template-columns: minmax(0, 1fr); } }

/* ---- Category hub masthead: the routes in this family as a hairline list
   under the family tile (parts/blocks/hub_route_list.html). Paper panel,
   no frame; the tile colour is the family's, keyed on data-concept. ---- */
.im-hero-block__media--routes { --im-chip: color-mix(in srgb, var(--im-ink) 72%, transparent);
  border-radius: var(--im-radius-card); overflow: visible; padding: var(--im-space-5) var(--im-space-6) var(--im-space-3);
  background: var(--im-paper); }
.im-hublist__hd { display: flex; align-items: center; gap: var(--im-space-3); margin-bottom: var(--im-space-3); }
.im-hublist__hd .im-chip__swatch { width: 40px; height: 40px; border-radius: 8px; background: var(--im-chip); }
.im-hublist__hd .im-chip__glyph { width: 30px; height: 30px; stroke-width: 3.6; }
.im-hublist__label { font-family: var(--im-font-display); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--im-text-muted); }
.im-hublist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--im-hairline); }
.im-hublist__row { border-bottom: 1px solid var(--im-hairline); }
.im-hublist__route { display: block; padding: 10px 0; font-family: var(--im-font-display); font-weight: 500; font-size: 15.5px; color: var(--im-ink); text-decoration: none;
  transition: color var(--im-dur) var(--im-ease); }
.im-hublist__route:hover, .im-hublist__route:focus-visible { color: var(--im-key-route); }
.im-js .im-hero-block__body:not(.in) .im-hero-block__media--routes .im-chip__glyph path,
.im-js .im-hero-block__body:not(.in) .im-hero-block__media--routes .im-chip__glyph circle { stroke-dashoffset: 100; }

/* ---- Route summaries as a two-up lattice on the category hub. ---- */
.im-routesec-lattice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--im-hairline); border-left: 1px solid var(--im-hairline); }
/* The whole cell is the target, like every other ruled cell on the branch:
   the guide link's ::after stretches over the cell, the cell washes sand on
   hover and the title takes the route colour. One anchor, so the link text
   stays the accessible name. */
.im-routesec--cell { display: flex; flex-direction: column; border-top: 0; padding: var(--im-space-8) var(--im-space-6);
  border-right: 1px solid var(--im-hairline); border-bottom: 1px solid var(--im-hairline);
  position: relative; transition: background var(--im-dur) var(--im-ease); }
.im-routesec--cell:hover, .im-routesec--cell:focus-within { background: var(--im-wash); }
.im-routesec--cell .im-routesec__lk::after { content: ""; position: absolute; inset: 0; }
.im-routesec--cell .im-routesec__lk:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 2px; }
.im-routesec--cell .im-routesec__title { font-weight: 500; transition: color var(--im-dur) var(--im-ease); }
.im-routesec--cell:hover .im-routesec__title { color: var(--im-key-route); }
.im-routesec--cell .im-routesec__body { flex: 1; }
.im-routesec--cell .im-routesec__media { margin-top: var(--im-space-4); }
@media (max-width: 860px) { .im-routesec-lattice { grid-template-columns: minmax(0, 1fr); } }
/* With the route list in the media slot the masthead aligns to the top, so
   the title sits level with the list's head rather than sinking beside it. */
.im-hero-block__body--split:has(.im-hero-block__media--routes) { align-items: start; }

/* ---- The hover wash is the family's own colour at a whisper (Rohan,
   2026-09-13: "should the hover tint be the same colour as the category
   icon colour"). --im-wash defaults to sand; any element carrying a family
   (data-concept) or an employer role (data-role) mixes its own --im-chip
   into paper instead, and its cells inherit it. Colour still never sits on
   a ground at rest. ---- */
.im-chip, .im-hire__cell, .im-routesec--cell { --im-wash: var(--im-tint-sand); }
[data-concept="work"], [data-concept="business"], [data-concept="family"], [data-concept="study"], [data-concept="visit"], [data-concept="schengen"],
.im-hire[data-role="sponsored"], .im-hire[data-role="employer_party"] { --im-wash: color-mix(in srgb, var(--im-chip) 12%, var(--im-paper)); }
.im-routesec-lattice[data-concept] .im-routesec--cell { --im-wash: color-mix(in srgb, var(--im-chip) 12%, var(--im-paper)); }
.im-routesec-lattice[data-concept] .im-routesec--cell:hover .im-routesec__title { color: var(--im-chip); }
.im-chip[data-concept]:hover .im-chip__name { color: var(--im-chip); }

/* ---- Person bio (/people/<slug>/) ----------------------------------------
   Reading order is NOT CV order. The hero carries identity and regulatory
   status first, then the standfirst and the ask; the body is prose on the
   left with the person's own sentence set between its paragraphs, and on the
   right a bounded panel of facts, the routes they work on, what they wrote,
   and the booking route.

   SEPARATION IS ONE VERTICAL RULE AND ONE PANEL, not a hairline per block
   (2026-09-10). The two columns are divided by a rule the full height of the
   body; the at-a-glance panel is the only boxed thing and it is allowed to
   end; section headings are sentence case. The pull quote is where the
   boldness is spent.

   THE CREDENTIAL BLOCK IS GATED ON A REGISTRATION NUMBER, NOT ON A TIER FLAG.
   `.im-person-plate` renders only where the profile carries one, because a tier
   is a label somebody typed and a registration is a fact. Solicitors Act 1974
   s.21 catches "any name, title, addition or description implying" solicitor
   status and s.24 reaches the company, so the presentation and the credential
   have to be the same decision. Do not add a rule here that shows the plate off
   anything else.

   No SRA number is printed on this page. The individual's registration is
   published on /about/ as a named carve-out (docs/REGULATORY_POSTURE.md), and
   sra_badge.html records that such an exemption "is earned per surface by
   rendering the pairing; it is not inherited by a page that merely resembles one
   that earned it". This page links to the register instead.

   The portrait column is the slot the Groundwork layer fills once it merges
   (a plate or material band in the person's concept hue). Until then it is
   the Course band with the person's initials, the same as the directory. ---- */
.im-person-hero { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--im-space-8) var(--im-space-12); align-items: start; }
.im-person-hero__portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  display: block; background: var(--im-band); }
/* Initials stand in for an absent headshot. A committed placeholder image would
   be a static asset, and static is served from S3 through the hashed manifest,
   so a missing entry 404s silently on a live page rather than failing loudly. */
.im-person-initials { display: grid; place-items: center;
  font-family: var(--im-font-display); font-size: 30px; font-weight: 600;
  color: var(--im-text-muted); letter-spacing: .02em; }
.im-person-hero__portrait.im-person-initials { font-size: clamp(56px, 8vw, 88px);
  color: var(--im-accent-200-dark); }
/* The name in the page-hero tier (serif, 400), the same tier every marketing
   page uses for its H1, so a bio reads as a page of this site. */
.im-person-hero__name { font-family: var(--im-font-serif); font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.25rem); line-height: 1.05;
  letter-spacing: var(--im-track-display); color: var(--im-ink);
  margin: 0 0 var(--im-space-2); text-wrap: balance; }
.im-person-hero__role { margin: 0; color: var(--im-text-200); font-size: 16px; }
/* The jurisdiction plate. Keystone Law puts practice rights in the slot other
   firms use for an office, and on a page read in nine markets that is the line
   worth having above the fold: it narrows the claim rather than making one. */
.im-person-plate { display: inline-block; margin-top: var(--im-space-3);
  font-family: var(--im-font-mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--im-accent-200-dark); background: var(--im-band);
  border: 1px solid var(--im-hairline); border-radius: var(--im-radius-control);
  padding: 3px 9px; }
.im-person-status { margin: var(--im-space-4) 0 0; max-width: 56ch;
  font-size: 14.5px; line-height: 1.6; color: var(--im-text-200); }
.im-person-status strong { color: var(--im-ink); font-weight: 600; }
.im-person-register-lk { display: inline-block; margin-top: var(--im-space-2);
  font-size: 14px; }
/* The registration line: the number, linked to the person's own register
   entry. Rendered only where the row carries a registration. */
.im-person-sra { margin: var(--im-space-4) 0 0; font-size: 14.5px;
  color: var(--im-text-200); }
.im-person-sra a { font-weight: 600; }
.im-person-chips { display: flex; flex-wrap: wrap; gap: var(--im-space-2);
  margin-top: var(--im-space-5); padding: 0; list-style: none; }
.im-person-chip { font-size: 13px; padding: 3px 10px; color: var(--im-text-200);
  border: 1px solid var(--im-hairline); border-radius: var(--im-radius-pill);
  background: var(--im-card-bg); }
.im-person-chip a { color: inherit; text-decoration: none; }
.im-person-chip a:hover, .im-person-chip a:focus-visible { color: var(--im-accent-200);
  text-decoration: underline; text-underline-offset: 3px; }
.im-person-cta { margin-top: var(--im-space-6); }
.im-person-hero__ident { max-width: 60ch; }
/* Three plain sentences of fact under the button, one rule above them. */
.im-person-hero__facts { margin: var(--im-space-8) 0 0; padding-top: var(--im-space-6);
  border-top: 1px solid var(--im-hairline); font-size: 15px; line-height: 1.6;
  color: var(--im-text-200); }
.im-person-hero__facts p { margin: 0 0 var(--im-space-2); }
.im-person-hero__facts p:last-child { margin-bottom: 0; }
/* Body: the prose column and, level with About, the specialities. */
.im-person__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--im-space-10) var(--im-space-12); align-items: start; }
.im-person__main { max-width: 72ch; min-width: 0; }
.im-person__aside { min-width: 0; }
.im-person-specs__list { list-style: none; margin: 0; padding: 0; font-size: 15px;
  line-height: 1.5; }
.im-person-specs__list li { padding: var(--im-space-2) 0;
  border-bottom: 1px solid var(--im-hairline); }
.im-person-specs__list li:last-child { border-bottom: 0; }
.im-person-specs__list a { color: var(--im-ink); text-decoration: none; }
.im-person-specs__list a:hover, .im-person-specs__list a:focus-visible {
  color: var(--im-accent-200); text-decoration: underline; text-underline-offset: 3px; }
/* Chapter headings: sentence case, the display face, no rule of their own. */
.im-person-sect { margin-top: var(--im-space-10); }
.im-person-sect:first-child { margin-top: 0; }
.im-person-sect__h { font-family: var(--im-font-display); font-size: 19px;
  font-weight: 600; letter-spacing: var(--im-track-head); color: var(--im-ink);
  margin: 0 0 var(--im-space-4); }
.im-person-prose { font-family: var(--im-font-serif); font-size: 17px;
  line-height: 1.65; color: var(--im-text-200); max-width: 62ch; }
.im-person-prose p { margin: 0 0 1em; }
/* The pull quote: the person's own sentence, set between the paragraphs. The
   one bold element on the page, so nothing else competes with it. */
.im-person-pull { margin: var(--im-space-7) 0 var(--im-space-8);
  padding: 0 0 0 var(--im-space-6); border-left: 3px solid var(--im-accent-200);
  max-width: 34ch; }
.im-person-pull p { margin: 0; font-family: var(--im-font-serif);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.32;
  letter-spacing: var(--im-track-title); color: var(--im-ink); }
.im-person-pull footer { margin-top: var(--im-space-3);
  font-family: var(--im-font-display); font-size: 13.5px;
  color: var(--im-text-muted); }
/* Experience as a spec-sheet list: label left, detail right, a hairline under
   each row and nothing else. */
.im-person-exp { margin: 0; max-width: 66ch; }
.im-person-exp__row { display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--im-space-2) var(--im-space-6); padding: var(--im-space-4) 0;
  border-bottom: 1px solid var(--im-hairline); }
.im-person-exp__label { font-weight: 600; color: var(--im-ink); font-size: 14.5px;
  line-height: 1.5; }
.im-person-exp__detail { margin: 0; font-size: 14.5px; line-height: 1.6;
  color: var(--im-text-200); }
.im-person-articles { margin: 0; padding: 0; list-style: none; }
.im-person-articles__item { display: flex; justify-content: space-between;
  gap: var(--im-space-4); padding: var(--im-space-3) 0; font-size: 14.5px;
  border-bottom: 1px solid var(--im-hairline); }
.im-person-articles__item:last-child { border-bottom: 0; }
.im-person-articles__d { color: var(--im-text-muted); font-size: 13px;
  white-space: nowrap; }
@media (max-width: 899.98px) {
  .im-person-hero { grid-template-columns: 1fr; gap: var(--im-space-6); }
  .im-person-hero__media { max-width: 260px; }
  .im-person__body { grid-template-columns: 1fr; }
  .im-person-exp__row { grid-template-columns: 1fr; gap: var(--im-space-1); }
}

/* ---- People directory (/people/) -----------------------------------------
   ONE REGISTER, TWO BLOCKS. Since 2026-09-10 (Rohan's decision, Dhruti's
   sign-off pending) solicitors and caseworkers render in one list with one
   layout, and the tier is carried by what each entry can SAY rather than by
   which section it sits in. Solicitors Act 1974 s.21 catches "any name, title,
   addition or description implying" that a person is a solicitor, and s.24
   reaches the company that permits it; the description on this page is the
   credential line and the jurisdiction plate, and only the solicitor block
   (.im-person-card) has a slot for either. The caseworker block
   (.im-person-row) carries the supervision line as a literal instead.

   The two root classes stay DISJOINT and the layout rules below list both
   selectors rather than giving them a shared base class in the markup: the
   markup is what a reviewer greps to answer "can a caseworker render the
   plate", and a shared class in the templates would be the first step to a
   shared slot. The template-side guard is `TIER_BLOCKS` in
   people/constants.py; the page template owns no branch on tier.

   No SRA number renders on this page, the person's own or the firm's, for the
   reason the Person bio banner above records: /people/ is one market-neutral
   URL served to nine markets, and a number cannot scope itself.

   .im-person-plate, .im-person-chip, .im-person-chips and .im-person-initials
   are the bio's, reused deliberately so the plate a reader meets in the
   directory is the plate they meet on the bio.

   The one colour on the page is a 2px rule at the top of each entry, the
   accent for now; it is the slot the Groundwork ink vocabulary fills once
   #397 lands (the person's lead specialism hue), not a place for a new hue.
   ---- */
.im-people-dir__mast { display: grid; gap: var(--im-space-4); padding-bottom: var(--im-space-2); }
.im-people-dir__lede { margin: 0; max-width: 52ch;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.5;
  color: var(--im-text-200); }

.im-people-dir__index { list-style: none; margin: var(--im-space-10) 0 0;
  padding: 0; display: grid; gap: var(--im-space-4); }
/* Each entry is its own framed row (hairline top and bottom) so the gap between
   people reads as air, and the whole entry is clickable: the name link is
   stretched over it by `::after` (below), the chips sit above that layer. */
.im-person-card, .im-person-row { position: relative; display: grid;
  grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1.05fr) 44px;
  gap: 0 var(--im-space-8); align-items: stretch;
  border-top: 1px solid var(--im-hairline);
  border-bottom: 1px solid var(--im-hairline); }
.im-person-card__link::after, .im-person-row__link::after { content: "";
  position: absolute; inset: 0; z-index: 1; }
.im-person-card .im-person-chips, .im-person-row .im-person-chips {
  position: relative; z-index: 2; }
.im-person-card__go, .im-person-row__go { align-self: center; justify-self: end;
  padding-right: var(--im-space-4); font-size: 24px; line-height: 1;
  color: var(--im-accent-200);
  transition: transform var(--im-dur) var(--im-ease); }
.im-person-card:hover .im-person-card__go, .im-person-card:focus-within .im-person-card__go,
.im-person-row:hover .im-person-row__go, .im-person-row:focus-within .im-person-row__go {
  transform: translateX(4px); }
.im-person-card:hover, .im-person-row:hover { background: var(--im-card-bg); }
.im-person-card::before, .im-person-row::before { content: ""; position: absolute;
  left: 0; top: -1px; width: 220px; height: 2px; z-index: 1;
  background: var(--im-accent-200);
  transition: width var(--im-dur) var(--im-ease); }
.im-person-card:hover::before, .im-person-card:focus-within::before,
.im-person-row:hover::before, .im-person-row:focus-within::before { width: 100%; }

/* The portrait is part of the entry, not a box inside it: flush to the rules
   above and below, square corners, on the Course band until a headshot lands. */
.im-person-card__portrait, .im-person-row__portrait { position: relative;
  width: 220px; min-height: 264px; overflow: hidden; background: var(--im-band);
  display: grid; place-items: center; }
.im-person-card__portrait img, .im-person-row__portrait img { position: absolute;
  inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.im-person-card__portrait .im-person-initials,
.im-person-row__portrait .im-person-initials { font-size: 44px;
  color: var(--im-accent-200-dark); }

.im-person-card__ident, .im-person-row__ident { min-width: 0;
  padding: var(--im-space-8) 0; }
.im-person-card__name, .im-person-row__name { margin: 0;
  font-family: var(--im-font-display); font-weight: 600;
  font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.12;
  letter-spacing: var(--im-track-head); color: var(--im-ink); }
.im-person-card__name a, .im-person-row__name a { color: inherit;
  text-decoration: none;
  background: linear-gradient(var(--im-accent-200), var(--im-accent-200))
    no-repeat 0 100% / 0 2px;
  transition: background-size var(--im-dur) var(--im-ease); }
.im-person-card:hover .im-person-card__name a,
.im-person-card:focus-within .im-person-card__name a,
.im-person-row:hover .im-person-row__name a,
.im-person-row:focus-within .im-person-row__name a { background-size: 100% 2px; }
.im-person-card__role, .im-person-row__role { margin: var(--im-space-1) 0 0;
  font-size: 14.5px; color: var(--im-text-200); }

/* Printed data under the name: the credential in words (solicitor block
   only), the supervision line (caseworker block only), languages. */
.im-person-card__data, .im-person-row__data { display: flex; flex-wrap: wrap;
  gap: var(--im-space-1) 0; margin: var(--im-space-3) 0 0; padding: 0;
  list-style: none; font-size: 12.5px; color: var(--im-text-muted); }
.im-person-card__data li + li::before, .im-person-row__data li + li::before {
  content: "\00b7"; margin: 0 9px; color: var(--im-hairline); }
.im-person-card__k, .im-person-row__k { font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--im-text-muted);
  margin-right: 4px; }
.im-person-card__cred { font-weight: 600; color: var(--im-text-200); }
/* Renders on every caseworker entry, unconditionally, and the template states
   it as a literal so an empty context cannot silence it. Never display: none. */
.im-person-row__supervision { font-weight: 600; color: var(--im-text-200); }
.im-person-card .im-person-chips, .im-person-row .im-person-chips {
  margin-top: var(--im-space-4); }

/* One sentence in the person's own words, in the serif. Empty = no column. */
.im-person-card__quote, .im-person-row__quote { margin: 0;
  padding: var(--im-space-8) 0; font-family: var(--im-font-serif);
  font-size: 17px; line-height: 1.55; color: var(--im-ink); max-width: 38ch; }

/* Beyond the UK: the partner markets, from the registry, as a two-column list. */
.im-people-abroad { display: grid; gap: var(--im-space-5) var(--im-space-12);
  align-items: start; }
.im-people-abroad__list { list-style: none; margin: 0; padding: 0;
  display: grid; border-top: 1px solid var(--im-hairline); }
.im-people-abroad__list li { display: flex; justify-content: space-between;
  gap: var(--im-space-4); padding: var(--im-space-3) 0;
  border-bottom: 1px solid var(--im-hairline); font-size: 15px;
  color: var(--im-ink); font-weight: 500; }
.im-people-abroad__with { font-size: 13px; font-weight: 400;
  color: var(--im-text-muted); }
@media (min-width: 900px) {
  .im-people-abroad { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .im-people-abroad__list { grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--im-space-10); }
}

/* The filter is one sentence, set large in the serif, with no box around it.
   Each choice is a word in that sentence: ink, bold, a chevron after it, and
   the accent only when it is not the default. The select keeps its native
   behaviour and accessible name; only its skin is replaced. With scripting on
   the sentence submits itself on change and the button is hidden; without it
   the button is the submit. */
.im-people-filter { margin-top: var(--im-space-8); padding: var(--im-space-4) var(--im-space-6);
  background: var(--im-card-bg); border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card); }
.im-people-filter__sentence { display: flex; flex-wrap: wrap;
  align-items: baseline; gap: var(--im-space-1) var(--im-space-3); margin: 0;
  font-family: var(--im-font-serif); font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.7; color: var(--im-text-200); }
.im-people-filter__lab { color: var(--im-text-200); }
.im-people-filter__sel { appearance: none; -webkit-appearance: none;
  font-family: var(--im-font-display); font-weight: 700; font-size: 15px;
  line-height: 1.3; color: var(--im-ink); background: transparent; border: 0;
  border-radius: var(--im-radius-control); padding: 2px 26px 2px 6px;
  margin: 0 -6px; max-width: 100%; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--im-ink) 50%),
    linear-gradient(135deg, var(--im-ink) 50%, transparent 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  transition: background-color var(--im-dur) var(--im-ease); }
.im-people-filter__sel:hover { background-color: var(--im-card-bg); }
.im-people-filter__sel:focus-visible { outline: 2px solid var(--im-accent-200);
  outline-offset: 2px; }
.im-people-filter__sel--on { color: var(--im-accent-200-dark);
  background-image: linear-gradient(45deg, transparent 50%, var(--im-accent-200) 50%),
    linear-gradient(135deg, var(--im-accent-200) 50%, transparent 50%); }
.im-people-filter__sel:disabled { color: var(--im-text-200); font-weight: 600;
  cursor: default; background-image: none; padding-right: 6px; }
.im-people-filter__submit { margin-left: var(--im-space-2); }
.im-js .im-people-filter__submit { display: none; }
.im-people-filter__reset { font-family: var(--im-font-display); font-size: 14px;
  font-weight: 500; margin-left: var(--im-space-2); }
.im-people-empty { font-size: 15px; color: var(--im-text-200);
  padding-top: var(--im-space-8); }
.im-people-empty p { margin: 0 0 var(--im-space-2); max-width: 62ch; }
@media (max-width: 899.98px) {
  .im-person-card, .im-person-row { grid-template-columns: 150px minmax(0, 1fr);
    gap: 0 var(--im-space-5); }
  .im-person-card::before, .im-person-row::before { width: 150px; }
  .im-person-card__portrait, .im-person-row__portrait { width: 150px;
    min-height: 180px; }
  .im-person-card__quote, .im-person-row__quote { grid-column: 2 / -1;
    padding-top: 0; }
}
@media (max-width: 559.98px) {
  .im-person-card, .im-person-row { grid-template-columns: 1fr; }
  .im-person-card::before, .im-person-row::before { width: 100%; }
  .im-person-card__portrait, .im-person-row__portrait { width: 100%;
    min-height: 0; aspect-ratio: 4 / 3; }
  .im-person-card__ident, .im-person-row__ident { padding-top: var(--im-space-5); }
  .im-person-card__quote, .im-person-row__quote { grid-column: 1; }
  .im-people-filter__sentence { line-height: 1.7; }
}

/* ---- Related routes: the route lattice (Rohan, 2026-09-27). A route is its
   family's colour and glyph, never a picture: the engraved category plates
   that stood in for a missing photo are retired here as on the hubs. Cells
   draw right and bottom, the grid top and left; hover is the family wash. A
   real per-route photo, if one is ever uploaded, still sits above the text. */
.im-relroutes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--im-hairline); border-left: 1px solid var(--im-hairline); }
.im-relroute { --im-chip: color-mix(in srgb, var(--im-ink) 72%, transparent); --im-wash: var(--im-tint-sand);
  display: flex; flex-direction: column; background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-right: 1px solid var(--im-hairline); border-bottom: 1px solid var(--im-hairline);
  transition: background var(--im-dur) var(--im-ease); }
.im-relroute[data-concept] { --im-wash: color-mix(in srgb, var(--im-chip) 12%, var(--im-paper)); }
.im-relroute:hover, .im-relroute:focus-visible { transform: none; box-shadow: none; background: var(--im-wash); }
.im-relroute__bd { flex: 1; display: flex; flex-direction: column; padding: var(--im-space-8) var(--im-space-6); }
.im-relroute__tile { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px;
  background: var(--im-chip); margin-bottom: var(--im-space-4); }
.im-relroute__tile .im-chip__glyph { width: 20px; height: 20px; stroke-width: 4.5; }
.im-js .im-relroute:not(.in) .im-chip__glyph path, .im-js .im-relroute:not(.in) .im-chip__glyph circle { stroke-dashoffset: 100; }
@media (prefers-reduced-motion: reduce) { .im-js .im-relroute:not(.in) .im-chip__glyph path, .im-js .im-relroute:not(.in) .im-chip__glyph circle { stroke-dashoffset: 0; } }
.im-relroute__title { transition: color var(--im-dur) var(--im-ease); }
.im-relroute:hover .im-relroute__title { color: var(--im-key-route); }
.im-relroute__short { flex: 1; }
@media (max-width: 860px) { .im-relroutes { grid-template-columns: minmax(0, 1fr); } }

/* ---- Salary-check card (parts/blocks/salary_check_card.html): the route
   hero's media on the calculator's routes. A navy card, the one object on the
   hero that asks for input. ---- */
.im-hero-block__media--salcheck { align-self: center; }
.im-salcheck { background: var(--im-dark-navy); color: #eef2f6; border-radius: var(--im-radius-card);
  padding: var(--im-space-8); max-width: 460px; }
.im-salcheck__kicker { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--im-key-route-soft); margin: 0 0 var(--im-space-3); }
.im-salcheck__title { font-family: var(--im-font-display); font-weight: 500; font-size: 24px; line-height: 1.2; color: #fff; margin: 0; }
.im-salcheck__lede { color: rgba(238, 242, 246, .78); font-size: 14.5px; line-height: 1.55; margin: var(--im-space-3) 0 var(--im-space-6); }
.im-salcheck__label { display: block; font-size: 13px; font-weight: 500; color: rgba(238, 242, 246, .9); margin-bottom: var(--im-space-2); }
.im-salcheck__row { display: flex; gap: var(--im-space-3); flex-wrap: wrap; }
.im-salcheck__field { position: relative; flex: 1 1 160px; }
.im-salcheck__cur { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(238, 242, 246, .6); }
.im-salcheck__input { width: 100%; height: 44px; padding: 0 14px 0 30px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06); color: #fff; font: 500 16px var(--im-font-display); font-variant-numeric: tabular-nums; }
.im-salcheck__input::placeholder { color: rgba(238, 242, 246, .4); }
.im-salcheck__input:focus-visible { outline: 2px solid var(--im-accent-100); outline-offset: 2px; border-color: transparent; }
.im-salcheck__btn { height: 44px; background: var(--im-paper); color: var(--im-ink); border-color: var(--im-paper); }
.im-salcheck__btn:hover, .im-salcheck__btn:focus-visible { background: #fff; color: var(--im-ink); }
.im-salcheck__note { font-size: 12.5px; color: rgba(238, 242, 246, .6); margin: var(--im-space-3) 0 0; }

/* ---- Groundwork type and accent pass (2026-09-27, from the mockup audit).
   One heading rule on every Groundwork page: section and article heads are
   Hanken Grotesk at 500; Spectral stays for the hero headline, the statement
   bands on navy and the closing line. Teal is interaction-only in the key
   (links, focus), so decorative numerals, rules, bullets and figures take
   umber or ink here. Scoped to .im-groundwork: the blog and the legal pages
   keep the serif prose heads. Selectors carry .im-groundwork so they outrank
   prose.css, which loads after this file. ---- */
.im-groundwork .im-prose h2 { font-family: var(--im-font-display); font-weight: 500;
  font-size: clamp(26px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -.015em;
  padding-left: 0; border-left: 0; }
.im-groundwork .im-prose h3 { font-weight: 500; }
.im-groundwork .im-feature-band__title,
.im-groundwork .im-midcta__title,
.im-groundwork .im-pillar__title,
.im-groundwork .im-step__title,
.im-groundwork .im-modcard__title,
.im-groundwork .im-cta-band--display .im-cta-band__title { font-weight: 500; }
/* The closing line: left-aligned, in the serif, as the mockups set it. Scoped
   to the closing_cta.html section rather than .im-groundwork, so it holds on
   every page that ends on the block, the blog included (2026-09-29); the
   processing-times pages hand-roll .im-closing on a band and keep centred. */
.im-closing-section .im-closing { text-align: left; }
.im-closing-section .im-closing__title { font-family: var(--im-font-serif); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; max-width: 22ch; }
.im-closing-section .im-closing__lede { margin-left: 0; margin-right: 0; }
.im-closing-section .im-closing__ctas { justify-content: flex-start; }
/* Decorative teal to the key. */
.im-groundwork .im-pillar__no { color: var(--im-key-route); }
.im-groundwork .im-step__no { color: var(--im-key-route); border-color: var(--im-key-route); }
.im-groundwork .im-svc .im-timeline .im-step:not(:last-child)::before,
.im-groundwork.im-svc .im-timeline .im-step:not(:last-child)::before { background: var(--im-key-route); }
.im-groundwork .im-prose ul li::before { background: var(--im-key-route); }
.im-groundwork .im-facttile__ic { color: var(--im-key-route); }
.im-groundwork .im-quickans, .im-groundwork .im-prose .im-inset { border-left-color: var(--im-key-route); }
/* The route hero rail animates a sweep built from --im-accent-200; point that
   token at the route colour inside the rail and its motion stays as it is. */
.im-groundwork .im-srail { --im-accent-200: var(--im-key-route); }

/* ---- Motion: the employer reel (parts/motion/employer_reel.html, drawn by
   assets/js/motion/employer-reel.js on the MotionKit engine). A 1200x900
   design canvas scaled to its slot; every inline style is written per frame by
   the engine, so nothing here transitions. One grid for every card: 880x430,
   64px padding, so content starts at x=-376, the label at 60, the title at 94
   and the body at 204. ---- */
.mk { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: var(--im-paper); }
.mk-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; font-family: var(--im-font-display);
  -webkit-font-smoothing: antialiased; color: var(--im-ink); font-feature-settings: "tnum" 1; }
.mk-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.mk-shape { position: absolute; overflow: hidden; isolation: isolate; box-shadow: 0 1px 2px rgba(20, 18, 14, .06), 0 10px 30px -8px rgba(20, 18, 14, .16); }
.mk-L { position: absolute; width: 0; height: 0; transform-origin: 0 0; }
.mk-a { position: absolute; }
.mk svg { display: block; overflow: visible; }
/* The layers are zero-width anchors, so the site-wide max-width:100% on img and
   svg would resolve to nothing inside them (the logo and route vanished). */
.mk img, .mk svg { max-width: none; }
.mk-cursor { position: absolute; left: 0; top: 0; height: auto; transform-origin: 3px 3px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); z-index: 10; }
.mk-serif { font-family: var(--im-font-serif); letter-spacing: -.025em; }
.mk-er-hook { left: -340px; top: -54px; width: 680px; text-align: center; font-size: 92px; line-height: 1.05; color: #FCFBF7; white-space: nowrap; }
.mk-er-k { position: absolute; left: -376px; top: 60px; width: 752px; font-size: 19px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.mk-er-k--on-color { color: rgba(252, 251, 247, .8); }
.mk-er-h { position: absolute; left: -376px; top: 94px; width: 752px; font-family: var(--im-font-serif); font-size: 50px; line-height: 1.05; letter-spacing: -.025em; white-space: nowrap; color: var(--im-ink); }
.mk-er-h--on-color { color: #fff; }
.mk-er-doc { left: -186px; width: 372px; }
.mk-er-doc--title { font-size: 52px; white-space: normal; }
.mk-er-av { position: absolute; top: 204px; width: 112px; height: 112px; border-radius: 50%; background: rgba(252, 251, 247, .16); border: 3px solid rgba(252, 251, 247, .92);
  display: grid; place-items: center; font: 600 32px var(--im-font-display); color: #fff; box-sizing: border-box; }
.mk-er-avl { position: absolute; top: 334px; width: 240px; text-align: center; font-size: 21px; font-weight: 500; color: rgba(255, 255, 255, .94); white-space: nowrap; }
.mk-er-box { position: absolute; top: 204px; width: 70px; height: 88px; border-radius: 14px; background: #EEF0EA; display: grid; place-items: center;
  font: 500 44px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--im-ink); }
.mk-er-chip { position: absolute; left: -376px; top: 314px; height: 52px; border-radius: 26px; padding: 0 24px; display: flex; align-items: center; font-size: 20px; font-weight: 600; white-space: nowrap; }
.mk-er-salv { left: 116px; top: 52px; width: 260px; text-align: right; font-size: 58px; color: var(--im-ink); }
.mk-er-track { left: -376px; top: 278px; width: 752px; height: 14px; border-radius: 7px; background: rgba(252, 251, 247, .5); }
.mk-er-fill { left: -376px; top: 278px; height: 14px; border-radius: 7px; background: var(--im-ink); }
.mk-er-mark { top: 250px; width: 4px; height: 70px; border-radius: 2px; background: #FCFBF7; }
.mk-er-markl { top: 330px; width: 240px; text-align: center; font-size: 19px; font-weight: 600; color: var(--im-ink); }
.mk-er-knob { top: 262px; width: 46px; height: 46px; border-radius: 50%; background: #FCFBF7; border: 5px solid var(--im-ink); box-sizing: border-box; }
.mk-er-dot { left: -262px; top: -15px; width: 30px; height: 30px; border-radius: 50%; background: #D8A06B; }
.mk-er-pilltext { left: -214px; top: -20px; font-size: 31px; font-weight: 600; color: #fff; white-space: nowrap; }
.mk-er-blk { position: absolute; top: 204px; width: 56px; height: 56px; border-radius: 12px; background: rgba(252, 251, 247, .12); }
.mk-er-blk i { position: absolute; inset: 0; border-radius: 12px; background: #D8A06B; transform-origin: 0 50%; }
.mk-er-btn { position: absolute; left: -376px; top: 302px; height: 60px; border-radius: 14px; padding: 0 26px; display: flex; align-items: center; font-size: 21px; font-weight: 600; white-space: nowrap; }
.mk-er-ln { position: absolute; left: -186px; height: 14px; border-radius: 7px; background: rgba(252, 251, 247, .24); transform-origin: 0 50%; }
.mk-er-logo { left: -424px; top: -148px; width: 214px; height: 46px; filter: brightness(0) invert(.98); }
.mk-er-final { left: -424px; top: -66px; width: 848px; font-size: 74px; line-height: 1.04; color: #FCFBF7; white-space: nowrap; }
.mk-er-final em { color: #E9C29A; }
.mk-er-route { left: -424px; top: 120px; }
.mk-er-route path { stroke: #D8A06B; stroke-width: 7; stroke-linecap: round; fill: none; }
.mk-er-route circle { fill: var(--im-ink); stroke: #D8A06B; stroke-width: 5; }
/* In the feature band the reel is the media column, square to the copy. */
.im-feature-band__media--motion { align-self: center; }

/* ---- Motion: the salary reel (parts/motion/salary_reel.html, drawn by
   assets/js/motion/salary-reel.js on the MotionKit engine). An 800x500 design
   canvas (16:10, the tools card's media slot) scaled to its slot. The slot is
   about 340px wide, so type is set large for the canvas and nothing sits under
   18 design px. Cards pad 44px: a 720 card's content starts at x=-316, the
   title at 40 and the body at 112. ---- */
.mk--wide { aspect-ratio: 16 / 10; border-radius: var(--im-radius-control); }
/* In the tools card the reel takes the plate's place: same width, same gap. */
.im-tools-showcase__motion { margin-top: var(--im-space-2); }
.mk-sr-h { position: absolute; left: -316px; top: 40px; width: 632px; font-family: var(--im-font-serif); font-size: 50px; line-height: 1.05; letter-spacing: -.025em; white-space: nowrap; color: var(--im-ink); }
.mk-sr-field { position: absolute; height: 76px; box-sizing: border-box; border: 2.5px solid rgba(10, 22, 40, .22); border-radius: 14px; background: #fff;
  display: flex; align-items: center; padding: 0 22px; font-size: 32px; font-weight: 500; color: var(--im-ink); white-space: nowrap; overflow: hidden; }
.mk-sr-field b { font-weight: 600; color: #7B4C2D; }
.mk-sr-ph { color: rgba(25, 27, 22, .42); font-weight: 400; }
.mk-sr-caret { display: inline-block; width: 3px; height: 36px; margin-left: 2px; background: #0A1628; vertical-align: middle; }
.mk-sr-row { position: absolute; left: -316px; width: 632px; height: 54px; box-sizing: border-box; border: 2px solid #E6E1D6; border-radius: 12px; background: #fff;
  display: flex; align-items: center; gap: 14px; padding: 0 18px; font-size: 25px; color: var(--im-ink); white-space: nowrap; overflow: hidden; opacity: 0; }
.mk-sr-row b { flex: none; font-weight: 600; color: #7B4C2D; }
.mk-sr-row span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mk-sr-row i { font-style: normal; font-size: 20px; color: var(--im-text-muted); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mk-sr-row i::before { content: "· "; }
.mk-sr-pt { position: absolute; left: -316px; top: 208px; width: 632px; font-size: 38px; line-height: 1.12; letter-spacing: -.02em; color: var(--im-ink); opacity: 0; }
.mk-sr-grp { position: absolute; top: 114px; }
.mk-sr-lab { font-size: 22px; font-weight: 600; color: var(--im-ink); margin-bottom: 12px; white-space: nowrap; }
.mk-sr-grp .mk-sr-field { position: relative; height: 84px; font-size: 34px; gap: 12px; }
.mk-sr-field--pre { padding-left: 0; }
.mk-sr-field--pre em { font-style: normal; align-self: stretch; display: grid; place-items: center; width: 60px; margin-right: 18px; background: #EFEAE0; color: var(--im-text-muted); font-size: 30px; }
.mk-sr-field--sel::after { content: ""; flex: none; margin-left: auto; width: 13px; height: 13px; border-right: 3.5px solid var(--im-ink); border-bottom: 3.5px solid var(--im-ink); transform: translateY(-5px) rotate(45deg); }
.mk-sr-btn { left: -300px; top: -21px; width: 600px; text-align: center; font-size: 31px; line-height: 42px; font-weight: 600; color: #FCFBF7; white-space: nowrap; }
.mk-sr-edge { position: absolute; left: -370px; top: 0; width: 740px; height: 420px; border-radius: 34px; box-shadow: inset 0 0 0 6px #327B51; opacity: 0; }
.mk-sr-track { position: absolute; left: -326px; top: 150px; width: 652px; height: 10px; border-radius: 5px; background: #E6E1D6; transform-origin: 0 50%; }
.mk-sr-ring { position: absolute; top: 137px; width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; border: 7px solid #0A1628; background: #fff; }
.mk-sr-dot { position: absolute; top: 139px; width: 32px; height: 32px; border-radius: 50%; background: #B8603F; box-shadow: 0 0 0 5px #fff; }
.mk-sr-lbl { position: absolute; top: 186px; width: 220px; text-align: center; white-space: nowrap; }
.mk-sr-lbl--up { top: 44px; }
.mk-sr-lbl small { display: block; font-size: 18px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--im-text-muted); }
.mk-sr-lbl span { display: block; margin-top: 2px; font-family: var(--im-font-serif); font-size: 44px; line-height: 1.1; color: var(--im-ink); }
.mk-sr-win { position: absolute; left: -326px; top: 296px; height: 84px; border-radius: 42px; padding: 0 16px 0 28px; display: flex; align-items: center; gap: 16px;
  background: #327B51; color: #fff; font-size: 34px; font-weight: 600; white-space: nowrap; transform-origin: 0 50%; opacity: 0;
  box-shadow: 0 10px 24px -10px rgba(50, 123, 81, .55); }
.mk-sr-win__dot { width: 16px; height: 16px; border-radius: 50%; background: #CFEBD9; box-shadow: 0 0 0 6px rgba(207, 235, 217, .28); }
.mk-sr-win b { height: 56px; border-radius: 28px; padding: 0 18px; display: flex; align-items: center; background: rgba(255, 255, 255, .18); font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Motion: the processing times reel (parts/motion/processing_times_reel.html,
   drawn by assets/js/motion/processing-times-reel.js on the MotionKit engine).
   The same 800x500 canvas and 44px card padding as the salary reel, but its
   own controls: chips and sliding switches, and a navy card for the answer. ---- */
.mk-pt-h { position: absolute; left: -316px; top: 40px; width: 632px; font-family: var(--im-font-serif); font-size: 50px; line-height: 1.05; letter-spacing: -.025em; white-space: nowrap; color: var(--im-ink); }
.mk-pt-chip { position: absolute; height: 60px; box-sizing: border-box; border: 2.5px solid #D9D3C6; border-radius: 30px; background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 500; color: var(--im-ink); white-space: nowrap; opacity: 0; }
.mk-pt-chip.is-on { background: #0A1628; border-color: #0A1628; color: #FCFBF7; opacity: 1; }
.mk-pt-grp { position: absolute; left: -316px; width: 632px; opacity: 0; }
.mk-pt-lab { font-size: 22px; font-weight: 600; color: var(--im-ink); margin-bottom: 12px; white-space: nowrap; }
.mk-pt-seg { position: relative; height: 72px; box-sizing: border-box; border: 2.5px solid rgba(10, 22, 40, .16); border-radius: 36px; background: #F6F2EA; display: flex; overflow: hidden; }
.mk-pt-seg i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 34px; background: #0A1628; }
.mk-pt-seg span { position: relative; flex: 1; display: grid; place-items: center; font-size: 25px; font-weight: 500; color: var(--im-ink); white-space: nowrap; }
.mk-pt-hd { position: absolute; left: -326px; top: 34px; width: 652px; display: flex; align-items: center; gap: 12px; white-space: nowrap; opacity: 0; }
.mk-pt-hd .mk-serif { font-size: 46px; line-height: 1.1; color: #FCFBF7; margin-right: 6px; }
.mk-pt-hd em { font-style: normal; height: 38px; border-radius: 19px; padding: 0 15px; display: flex; align-items: center; border: 2px solid rgba(252, 251, 247, .32); font-size: 18px; font-weight: 600; color: rgba(252, 251, 247, .78); letter-spacing: .06em; text-transform: uppercase; }
.mk-pt-hd strong { margin-left: auto; font-size: 21px; font-weight: 500; color: rgba(252, 251, 247, .72); }
.mk-pt-hd strong b { font-weight: 600; color: #FCFBF7; font-variant-numeric: tabular-nums; }
.mk-pt-band { position: absolute; top: 170px; height: 146px; border-radius: 10px; background: rgba(216, 160, 107, .16); transform-origin: 50% 100%; opacity: 0; }
.mk-pt-dots, .mk-pt-ticks { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.mk-pt-dots i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #FCFBF7; opacity: 0; }
.mk-pt-axis { position: absolute; left: -326px; top: 316px; width: 652px; height: 3px; border-radius: 2px; background: rgba(252, 251, 247, .3); transform-origin: 0 50%; }
.mk-pt-tick { position: absolute; top: 326px; width: 120px; text-align: center; font-size: 19px; font-weight: 500; color: rgba(252, 251, 247, .62); white-space: nowrap; opacity: 0; }
.mk-pt-med { position: absolute; top: 118px; width: 4px; height: 198px; background: #E9C29A; border-radius: 2px; transform-origin: 50% 100%; opacity: 0; }
.mk-pt-call { position: absolute; top: 100px; display: flex; align-items: center; gap: 12px; white-space: nowrap; opacity: 0; }
.mk-pt-call b { font-size: 76px; line-height: 1; font-weight: 400; color: #E9C29A; font-variant-numeric: tabular-nums; }
.mk-pt-call span { font-size: 23px; line-height: 1.2; font-weight: 500; color: rgba(252, 251, 247, .78); }
/* Figure-free (no tracker summary): the callout names the line instead of numbering it. */
.mk-pt-call--word b { font-size: 44px; }

/* ---- Motion: the requirements reel (parts/motion/requirements_reel.html,
   drawn by assets/js/motion/requirements-reel.js on the MotionKit engine).
   The same 800x500 canvas as the other two tools reels. Quiet: white, cream
   and ink, with the site's teal as the one accent (the chosen answer, the
   progress, the section icons). ---- */
.mk-rq-chip { position: absolute; top: 30px; height: 40px; border-radius: 20px; padding: 0 16px; display: flex; align-items: center; border: 2px solid #DCD6CA;
  font-size: 19px; font-weight: 600; color: var(--im-ink); white-space: nowrap; }
.mk-rq-chip--r { right: -306px; top: 48px; opacity: 0; }
.mk-rq-chip--pop { opacity: 0; transform-origin: 0 50%; }
.mk-rq-hp { position: absolute; left: -316px; top: 40px; font-size: 19px; font-weight: 600; color: var(--im-text-muted); white-space: nowrap; }
.mk-rq-bar { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: .35; }
.mk-rq-pill--sm { height: 56px; border-radius: 28px; }
.mk-rq-ct { position: absolute; right: -316px; top: 40px; opacity: 0; font-size: 19px; font-weight: 600; color: var(--im-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-rq-seg { position: absolute; top: 92px; width: 200px; height: 8px; border-radius: 4px; background: #ECE7DC; overflow: hidden; }
.mk-rq-seg i { position: absolute; inset: 0; border-radius: 4px; background: #00668C; transform-origin: 0 50%; transform: scaleX(0); }
.mk-rq-q { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.mk-rq-qt { position: absolute; left: -316px; top: 122px; width: 632px; font-size: 40px; line-height: 1.1; letter-spacing: -.02em; color: var(--im-ink); }
.mk-rq-pill { position: absolute; height: 64px; box-sizing: border-box; border: 2.5px solid #DCD6CA; border-radius: 32px; background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 25px; font-weight: 500; color: var(--im-ink); white-space: nowrap; }
.mk-rq-pill.is-on { background: #00668C; border-color: #00668C; color: #fff; }
.mk-rq-foot { position: absolute; left: -316px; top: 340px; font-size: 19px; color: var(--im-text-muted); white-space: nowrap; }
.mk-rq-ripple { position: absolute; width: 80px; height: 80px; border-radius: 50%; background: #00668C; opacity: 0; }
.mk-rq-gh { position: absolute; left: -306px; top: 40px; font-size: 44px; line-height: 1.05; letter-spacing: -.025em; color: var(--im-ink); white-space: nowrap; opacity: 0; }
.mk-rq-sec { position: absolute; left: -306px; width: 612px; height: 58px; box-sizing: border-box; border-bottom: 1.5px solid #ECE7DC; display: flex; align-items: center; gap: 16px;
  font-size: 25px; font-weight: 600; color: var(--im-ink); white-space: nowrap; opacity: 0; }
.mk-rq-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #EAF1F5; display: grid; place-items: center; }
.mk-rq-ic svg { width: 22px; height: 22px; fill: none; stroke: #00668C; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-rq-sec.is-open .mk-rq-ic { background: #00668C; }
.mk-rq-sec.is-open .mk-rq-ic svg { stroke: #fff; }
.mk-rq-chev { margin-left: auto; margin-right: 10px; width: 12px; height: 12px; border-right: 3px solid #A7A092; border-bottom: 3px solid #A7A092; transform: rotate(-45deg); }
.mk-rq-body { position: absolute; left: -306px; top: 176px; width: 612px; height: 0; overflow: hidden; }
.mk-rq-body div { position: absolute; left: 56px; font-size: 23px; font-weight: 500; color: #3A3E33; white-space: nowrap; opacity: 0; }
.mk-rq-body div::before { content: ""; position: absolute; left: -22px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #00668C; }

/* ---- The family map: one concept, one colour, on whatever element carries
   the family (chips, route index groups, hub mastheads and summaries,
   related routes). Last in the file on purpose: each host sets a neutral ink
   default for --im-chip at the same specificity, and source order is what
   lets the family win. ---- */
[data-concept="work"] { --im-chip: var(--im-key-route); }
[data-concept="business"] { --im-chip: var(--im-key-route-soft); }
[data-concept="family"] { --im-chip: var(--im-key-terrain); }
[data-concept="study"] { --im-chip: var(--im-key-terrain-soft); }
[data-concept="visit"] { --im-chip: var(--im-key-accent); }
[data-concept="schengen"] { --im-chip: var(--im-key-accent-soft); }

/* ---- Motion: the sponsor licence reel (parts/motion/sponsor_licence_reel.html,
   drawn by assets/js/motion/sponsor-licence-reel.js on the MotionKit engine).
   A 960x540 design canvas (16:9, the offer card's image slot, about 560px wide
   on desktop and full width on a phone) scaled to its slot, so no copy sits
   under 20 design px (bar the step 3 documents when step 5 shrinks them: they
   are there to be recognised, not read). One grid for every step card:
   860x460, 56px padding, so content starts at x=-374, the track at 40, the
   title at 116 and the body at 200. Umber marks progress on white; tan takes
   over on the navy close. ---- */
.mk--sponsor-licence { aspect-ratio: 16 / 9; border-radius: var(--im-radius-control); }
.mk-sl-rail { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.mk-sl-line { position: absolute; left: -352px; top: 60px; width: 704px; height: 4px; border-radius: 2px; background: #ECE7DC; }
.mk-sl-line i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: #7B4C2D; }
.mk-sl-node { position: absolute; top: 40px; width: 44px; height: 44px; box-sizing: border-box; border-radius: 50%; border: 3px solid #DCD6CA; background: #fff;
  display: grid; place-items: center; font-size: 21px; font-weight: 600; color: var(--im-text-muted); opacity: 0; }
.mk-sl-node span, .mk-sl-node svg { grid-area: 1 / 1; }
.mk-sl-node svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.mk-sl-node.is-on { border-color: #7B4C2D; background: #7B4C2D; color: #fff; box-shadow: 0 0 0 7px rgba(123, 76, 45, .14); }
.mk-sl-node.is-done { border-color: #0A1628; background: #0A1628; }
.mk-sl-node.is-done span { opacity: 0; }
.mk-sl-node.is-done svg { opacity: 1; }
.mk-sl-rail.is-dark .mk-sl-line { background: rgba(252, 251, 247, .18); }
.mk-sl-rail.is-dark .mk-sl-line i { background: #D8A06B; }
.mk-sl-rail.is-dark .mk-sl-node.is-done { border-color: #D8A06B; background: #D8A06B; }
.mk-sl-rail.is-dark .mk-sl-node.is-done svg { stroke: #0A1628; }
.mk-sl-h { position: absolute; left: -374px; top: 116px; width: 748px; font-family: var(--im-font-serif); font-size: 50px; line-height: 1.05; letter-spacing: -.025em; white-space: nowrap; color: var(--im-ink); }
.mk-sl-crit { position: absolute; left: -374px; width: 748px; height: 48px; display: flex; align-items: center; gap: 18px; font-size: 29px; font-weight: 500; color: var(--im-ink); white-space: nowrap; opacity: 0; }
.mk-sl-crit i { flex: none; width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; border: 3px solid #DCD6CA; background: #fff; }
.mk-sl-crit i.is-on { border-color: #7B4C2D; background: #7B4C2D radial-gradient(circle, #fff 0 5px, transparent 6px); }
.mk-sl-role { position: absolute; left: -374px; width: 748px; height: 54px; box-sizing: border-box; border-bottom: 2px solid #ECE7DC; display: flex; align-items: center;
  font-size: 29px; font-weight: 500; color: var(--im-ink); white-space: nowrap; opacity: 0; }
.mk-sl-role b { margin-left: auto; height: 40px; border-radius: 20px; padding: 0 18px; display: flex; align-items: center; background: #F4EFE5; color: #7B4C2D;
  font-size: 21px; font-weight: 600; transform-origin: 100% 50%; opacity: 0; }
.mk-sl-foot { position: absolute; left: -374px; top: 394px; font-size: 23px; color: var(--im-text-muted); white-space: nowrap; opacity: 0; }
.mk-sl-doc { position: absolute; top: 200px; width: 169px; height: 170px; box-sizing: border-box; border: 2.5px solid #E6E1D6; border-radius: 14px; background: #FCFBF7;
  padding: 26px 20px 0; opacity: 0; transform-origin: 50% 100%; }
.mk-sl-doc::after { content: ""; position: absolute; right: -2.5px; top: -2.5px; width: 30px; height: 30px; border-radius: 0 14px 0 10px; background: #E6E1D6; }
.mk-sl-doc i { display: block; height: 8px; border-radius: 4px; background: #E6E1D6; margin-bottom: 10px; }
.mk-sl-doc i:nth-child(1) { width: 70%; background: #D8A06B; }
.mk-sl-doc i:nth-child(3) { width: 55%; }
.mk-sl-doc span { position: absolute; left: 18px; right: 14px; bottom: 16px; font-size: 22px; line-height: 1.15; font-weight: 600; color: var(--im-ink); }
.mk-sl-btn { left: -256px; top: -32px; height: 64px; display: flex; align-items: center; gap: 22px; font-size: 31px; font-weight: 600; color: #FCFBF7; white-space: nowrap; }
.mk-sl-btn b { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #D8A06B; color: #0A1628; font-size: 28px; font-weight: 600; }
/* Step 5: the step 3 tiles again, scaled from their centre by the reel (the
   send line is that centre, y=285), and the navy dock they go into: an 80px
   port round the envelope, which the reel draws out into the chip. The JS
   clips the chip to the port, so its height and the port size move together. */
.mk-sl-doc--mini { left: -84.5px; transform-origin: 50% 50%; }
.mk-sl-dock { position: absolute; left: -374px; top: 245px; height: 80px; box-sizing: border-box; border-radius: 40px; padding: 0 34px 0 72px;
  display: flex; align-items: center; background: #0A1628; color: #FCFBF7; font-size: 28px; font-weight: 600; white-space: nowrap; opacity: 0; transform-origin: 40px 50%; }
.mk-sl-dock svg { position: absolute; left: 24px; top: 24px; width: 32px; height: 32px; fill: none; stroke: #D8A06B; stroke-width: 2; stroke-linejoin: round; }
.mk-sl-final { position: absolute; left: -374px; top: 186px; width: 748px; font-size: 72px; line-height: 1.04; color: #FCFBF7; white-space: nowrap; opacity: 0; }
.mk-sl-fsub { position: absolute; left: -374px; top: 294px; width: 748px; font-size: 27px; font-weight: 500; color: rgba(252, 251, 247, .78); white-space: nowrap; opacity: 0; }

/* ---- Motion: the compliance reel (parts/motion/compliance_reel.html, drawn
   by assets/js/motion/compliance-reel.js on the MotionKit engine). A 960x540
   design canvas (16:9, the offer card's media slot) scaled to its slot, which
   is about 560px wide, so nothing sits under 18 design px. The ledger card is
   880x480 with 40px padding: content starts at x=-400, the title at 28, rows
   of 80 from 104 and the audit-trail footer at 424. Colour lives in the chips
   and edges: tan for a deadline, navy for what was recorded, never a red or a
   green next to a person. ---- */
.mk--compliance { aspect-ratio: 16 / 9; border-radius: var(--im-radius-control); }
.mk-cr-h { position: absolute; left: -400px; top: 28px; font-size: 40px; line-height: 1.1; color: var(--im-ink); white-space: nowrap; opacity: 0; }
.mk-cr-open { position: absolute; right: -400px; top: 30px; height: 44px; border-radius: 22px; padding: 0 18px; display: flex; align-items: center; gap: 10px;
  border: 2px solid #E6E1D6; font-size: 19px; font-weight: 600; color: var(--im-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-cr-open i { width: 10px; height: 10px; border-radius: 50%; background: #C9C3B6; }
.mk-cr-open.is-open { border-color: rgba(216, 160, 107, .7); color: #7B4C2D; }
.mk-cr-open.is-open i { background: #B8603F; }
.mk-cr-row { position: absolute; left: -440px; width: 880px; height: 80px; border-top: 1.5px solid #ECE7DC; opacity: 0; }
.mk-cr-row > * { position: absolute; }
.mk-cr-wash { left: 0; top: 0; width: 880px; height: 80px; background: #F7F0E6; opacity: 0; }
.mk-cr-bar { left: 0; top: 12px; width: 6px; height: 56px; border-radius: 0 3px 3px 0; background: #7B4C2D; opacity: 0; }
.mk-cr-av { left: 40px; top: 16px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; font-weight: 600; color: #FCFBF7; letter-spacing: .02em; }
.mk-cr-name { left: 104px; top: 12px; font-size: 24px; line-height: 30px; font-weight: 600; color: var(--im-ink); white-space: nowrap; }
.mk-cr-role { left: 104px; top: 43px; font-size: 19px; line-height: 24px; color: var(--im-text-muted); white-space: nowrap; }
.mk-cr-ph { left: 306px; top: 28px; font-size: 19px; line-height: 24px; color: rgba(25, 27, 22, .4); white-space: nowrap; }
.mk-cr-chg { left: 306px; top: 12px; width: 318px; }
.mk-cr-chg b { display: block; font-size: 22px; line-height: 30px; font-weight: 600; color: var(--im-ink); white-space: nowrap; }
.mk-cr-chg span { display: block; margin-top: 1px; font-size: 19px; line-height: 24px; color: var(--im-text-muted); white-space: nowrap; }
.mk-cr-chip { right: 40px; top: 18px; height: 44px; border-radius: 22px; padding: 0 18px; display: flex; align-items: center; gap: 9px;
  font-size: 19px; font-weight: 600; white-space: nowrap; transform-origin: 100% 50%; }
.mk-cr-chip--due { background: rgba(216, 160, 107, .24); color: #7B4C2D; }
.mk-cr-chip--due::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #B8603F; }
.mk-cr-chip--done { background: #0A1628; color: #FCFBF7; }
.mk-cr-chip--done::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #D8A06B; }
.mk-cr-foot { position: absolute; left: -440px; top: 424px; width: 880px; height: 56px; border-top: 1.5px solid #ECE7DC; background: #FBF8F2; }
.mk-cr-fl { position: absolute; left: -400px; top: 441px; font-size: 18px; line-height: 22px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7B4C2D; white-space: nowrap; transform-origin: 0 50%; }
.mk-cr-tk { position: absolute; left: -240px; top: 440px; width: 640px; font-size: 19px; line-height: 24px; font-weight: 500; color: var(--im-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: 0 50%; }
.mk-cr-tk.is-empty { color: rgba(25, 27, 22, .4); font-weight: 400; }
.mk-cr-fly { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #D8A06B; box-shadow: 0 0 0 4px rgba(216, 160, 107, .25); opacity: 0; }
.mk-cr-tk2 { position: absolute; left: -340px; top: 44px; font-size: 19px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #D8A06B; white-space: nowrap; opacity: 0; }
.mk-cr-th { position: absolute; left: -340px; top: 74px; font-size: 44px; line-height: 1.1; color: #FCFBF7; white-space: nowrap; opacity: 0; }
.mk-cr-tline { position: absolute; left: -334px; top: 164px; width: 3px; height: 222px; border-radius: 2px; background: rgba(216, 160, 107, .38); transform-origin: 50% 0; transform: scaleY(0); }
.mk-cr-e { position: absolute; left: -340px; width: 680px; height: 64px; opacity: 0; }
.mk-cr-e > * { position: absolute; margin: 0; white-space: nowrap; }
.mk-cr-e i { left: -1px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: #D8A06B; box-shadow: 0 0 0 5px #0A1628; }
.mk-cr-e time { left: 36px; top: 3px; font-size: 19px; line-height: 24px; color: rgba(252, 251, 247, .62); font-variant-numeric: tabular-nums; }
.mk-cr-e p { left: 180px; top: 0; font-size: 22px; line-height: 30px; color: rgba(252, 251, 247, .86); }
.mk-cr-e p b { font-weight: 600; color: #FCFBF7; }
.mk-cr-e small { left: 180px; top: 31px; font-size: 19px; line-height: 24px; color: #E9C29A; }

/* ---- Motion: the right to work reel (parts/motion/right_to_work_reel.html,
   drawn by assets/js/motion/right-to-work-reel.js on the MotionKit engine).
   The hero media of /uk/businesses/right-to-work/: a 1200x900 design canvas
   (4:3, like the employer reel) scaled to the hero's media column, which
   renders about 500 to 560px wide, a scale near 0.45. So the smallest type is
   28 design px (about 12px on screen), values run 36 to 40 and the names and
   titles 56 to 60; the cards carry fewer lines rather than smaller ones.
   Every card is 1040 wide with 56px padding: content runs from x=-464 to 464,
   the label at 56, the title at 94. Colour lives in lines and chips (navy,
   umber, tan); the grounds stay paper and white. ---- */
.mk--rtw { aspect-ratio: 4 / 3; }
.mk-rtw-k { position: absolute; left: -464px; top: 52px; font-size: 28px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7B4C2D; white-space: nowrap; }
.mk-rtw-h { position: absolute; left: -464px; top: 94px; font-family: var(--im-font-serif); font-size: 60px; line-height: 1.05; letter-spacing: -.025em; color: var(--im-ink); white-space: nowrap; }
.mk-rtw-tile { position: absolute; left: -464px; width: 928px; height: 84px; box-sizing: border-box; border: 2.5px solid #E2DCCF; border-radius: 18px; background: #fff;
  padding: 0 28px; display: flex; align-items: center; gap: 24px; white-space: nowrap; overflow: hidden; opacity: 0; transform-origin: 50% 50%; }
.mk-rtw-tile b { flex: none; font-size: 28px; font-weight: 600; letter-spacing: .06em; color: #7B4C2D; font-variant-numeric: tabular-nums; }
.mk-rtw-tile span { font-size: 36px; font-weight: 600; letter-spacing: -.01em; color: var(--im-ink); }
.mk-rtw-tile.is-on { background: #0A1628; border-color: #0A1628; }
.mk-rtw-tile.is-on b { color: #D8A06B; }
.mk-rtw-tile.is-on span { color: #FCFBF7; }
.mk-rtw-grp { position: absolute; top: 190px; width: 450px; opacity: 0; }
.mk-rtw-lab { font-size: 28px; font-weight: 600; color: var(--im-ink); margin-bottom: 12px; white-space: nowrap; }
.mk-rtw-field { height: 96px; box-sizing: border-box; border: 2.5px solid rgba(10, 22, 40, .22); border-radius: 16px; background: #fff;
  display: flex; align-items: center; padding: 0 26px; font-size: 40px; font-weight: 500; color: var(--im-ink); white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.mk-rtw-field--code { letter-spacing: .08em; }
.mk-rtw-caret { display: inline-block; width: 3px; height: 44px; margin-left: 3px; background: #0A1628; vertical-align: middle; }
.mk-rtw-step { position: absolute; left: -464px; height: 48px; display: flex; align-items: center; gap: 20px; font-size: 32px; font-weight: 500; color: var(--im-text-muted); white-space: nowrap; opacity: 0; }
.mk-rtw-step.is-on { color: var(--im-ink); }
/* The mark is the step being done, drawn in umber: an action, not a verdict. */
.mk-rtw-mark { position: relative; flex: none; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; border: 3px solid #D9D3C6; background: #fff; }
.mk-rtw-step.is-on .mk-rtw-mark { background: #7B4C2D; border-color: #7B4C2D; }
.mk-rtw-step.is-on .mk-rtw-mark::after { content: ""; position: absolute; left: 12px; top: 6px; width: 9px; height: 17px; border-right: 3.5px solid #fff; border-bottom: 3.5px solid #fff; transform: rotate(45deg); }
.mk-rtw-btn { position: absolute; left: -464px; top: 560px; height: 76px; border-radius: 18px; padding: 0 36px; display: flex; align-items: center; background: #0A1628;
  color: #FCFBF7; font-size: 30px; font-weight: 600; white-space: nowrap; opacity: 0; }
.mk-rtw-pt { left: -260px; top: -30px; width: 520px; height: 60px; display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 42px; font-weight: 600; color: #FCFBF7; white-space: nowrap; }
.mk-rtw-pt__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #D8A06B; box-shadow: 0 0 0 7px rgba(216, 160, 107, .24); }
.mk-rtw-av { position: absolute; left: -464px; top: 44px; width: 100px; height: 100px; border-radius: 50%; background: #F3E6D8; color: #7B4C2D;
  display: grid; place-items: center; font-size: 34px; font-weight: 600; letter-spacing: .02em; opacity: 0; }
.mk-rtw-name { position: absolute; left: -338px; top: 36px; font-size: 60px; line-height: 1.1; color: var(--im-ink); white-space: nowrap; opacity: 0; }
.mk-rtw-sub { position: absolute; left: -338px; top: 108px; font-size: 28px; font-weight: 500; color: var(--im-text-muted); white-space: nowrap; opacity: 0; }
.mk-rtw-chip { position: absolute; left: 144px; top: 60px; width: 320px; height: 64px; box-sizing: border-box; border-radius: 32px; background: #0A1628; color: #FCFBF7;
  display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 28px; font-weight: 600; white-space: nowrap; opacity: 0; transform-origin: 100% 50%; }
.mk-rtw-chip .mk-rtw-pt__dot { width: 14px; height: 14px; box-shadow: 0 0 0 5px rgba(216, 160, 107, .24); }
.mk-rtw-rule { position: absolute; left: -464px; width: 928px; height: 2px; background: #ECE7DC; transform-origin: 0 50%; transform: scaleX(0); }
.mk-rtw-fld { position: absolute; top: 204px; width: 424px; white-space: nowrap; opacity: 0; }
.mk-rtw-fld small { display: block; font-size: 28px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--im-text-muted); }
.mk-rtw-fld span { display: block; margin-top: 4px; font-size: 40px; font-weight: 500; color: var(--im-ink); }
.mk-rtw-track { position: absolute; left: -464px; top: 420px; width: 928px; height: 14px; border-radius: 7px; background: #ECE7DC; transform-origin: 0 50%; transform: scaleX(0); }
.mk-rtw-fill { position: absolute; left: -464px; top: 420px; width: 0; height: 14px; border-radius: 7px; background: #D8A06B; }
.mk-rtw-dot0 { position: absolute; top: 412px; width: 30px; height: 30px; border-radius: 50%; background: #7B4C2D; box-shadow: 0 0 0 6px #fff; opacity: 0; }
.mk-rtw-ring { position: absolute; top: 406px; width: 42px; height: 42px; box-sizing: border-box; border-radius: 50%; border: 9px solid #0A1628; background: #fff; opacity: 0; }
.mk-rtw-tl { position: absolute; top: 460px; font-size: 28px; font-weight: 500; color: var(--im-text-muted); white-space: nowrap; opacity: 0; }
.mk-rtw-tl--end { left: 64px; width: 400px; text-align: right; color: var(--im-ink); }
.mk-rtw-stem { position: absolute; left: 462px; top: 388px; width: 3px; height: 20px; background: #7B4C2D; transform-origin: 50% 0; transform: scaleY(0); }
.mk-rtw-flag { position: absolute; left: -156px; top: 318px; width: 640px; height: 70px; box-sizing: border-box; border-radius: 35px; background: #7B4C2D; color: #FCFBF7;
  display: flex; align-items: center; justify-content: center; font-size: 31px; font-weight: 600; white-space: nowrap; opacity: 0; transform-origin: 95% 100%;
  box-shadow: 0 10px 22px -12px rgba(123, 76, 45, .6); }
.mk-rtw-k--trail { top: 550px; }
.mk-rtw-ev { position: absolute; left: -478px; width: 956px; height: 52px; box-sizing: border-box; padding: 0 14px; border-radius: 12px; display: flex; align-items: center; gap: 24px;
  font-size: 34px; font-weight: 500; color: var(--im-ink); white-space: nowrap; opacity: 0; }
.mk-rtw-ev b { flex: none; width: 92px; font-weight: 600; color: #7B4C2D; font-variant-numeric: tabular-nums; }

/* ---- Motion: the certificate of sponsorship reel (parts/motion/certificate_of_sponsorship_reel.html,
   drawn by assets/js/motion/certificate-of-sponsorship-reel.js on the MotionKit
   engine). The hero media of /uk/businesses/certificate-of-sponsorship/: a
   960x720 design canvas (4:3, the hero's media ratio) scaled to its slot. The
   column is about 520px wide (a 0.54 scale), so nothing sits under 24 design
   px, about 13 screen px, and values run 28 to 30; rows were cut to make room. The ledger
   and draft cards are 820x560 with 56px padding, so content starts at x=-354
   and runs 708px; the check card is 760 wide, content from x=-324. Navy
   carries the allocation, tan the check, white the draft. ---- */
.mk--cos { aspect-ratio: 4 / 3; container-type: inline-size; }
.mk-cos-k { position: absolute; left: -354px; top: 50px; font-size: 24px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.mk-cos-k--on-navy { color: #E9C29A; }
.mk-cos-k--check { left: -324px; top: 44px; color: rgba(10, 22, 40, .72); }
.mk-cos-h { position: absolute; left: -354px; top: 88px; font-family: var(--im-font-serif); font-size: 60px; line-height: 1.05; letter-spacing: -.025em; white-space: nowrap; color: var(--im-ink); }
.mk-cos-h--on-navy { color: #FCFBF7; }
.mk-cos-n { display: inline-block; font-variant-numeric: tabular-nums; }
.mk-cos-tiles { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.mk-cos-tile { position: absolute; width: 60px; height: 64px; border-radius: 12px; background: rgba(252, 251, 247, .06); box-shadow: inset 0 0 0 2.5px rgba(252, 251, 247, .26); overflow: hidden; }
.mk-cos-tile i { position: absolute; inset: 0; border-radius: 12px; background: #D8A06B; transform: scale(0); }
.mk-cos-tile.is-new i { background: #E9C29A; }
.mk-cos-rule { position: absolute; left: -354px; top: 352px; width: 708px; height: 2px; background: rgba(252, 251, 247, .16); }
.mk-cos-leg { position: absolute; left: -354px; width: 708px; height: 56px; display: flex; align-items: center; gap: 16px; font-size: 28px; color: rgba(252, 251, 247, .74); white-space: nowrap; opacity: 0; }
.mk-cos-leg b { flex: none; width: 160px; font-weight: 600; color: #FCFBF7; }
.mk-cos-sw { flex: none; width: 24px; height: 24px; border-radius: 6px; background: #D8A06B; }
.mk-cos-sw--ring { box-sizing: border-box; border-radius: 50%; background: none; border: 3.5px solid #D8A06B; }
.mk-cos-sw--new { background: #E9C29A; }
.mk-cos-chip { position: absolute; right: -354px; top: 42px; height: 46px; box-sizing: border-box; border-radius: 23px; padding: 0 18px; display: flex; align-items: center;
  border: 2px solid rgba(123, 76, 45, .42); background: #F6EEE4; color: #7B4C2D; font-size: 24px; font-weight: 600; white-space: nowrap; transform-origin: 100% 50%; opacity: 0; }
.mk-cos-grp { position: absolute; opacity: 0; }
.mk-cos-lab { font-size: 24px; font-weight: 600; color: var(--im-ink); margin-bottom: 10px; white-space: nowrap; }
.mk-cos-field { height: 68px; box-sizing: border-box; border: 2.5px solid rgba(10, 22, 40, .18); border-radius: 14px; background: #fff; display: flex; align-items: center; gap: 16px;
  padding: 0 22px; font-size: 30px; font-weight: 500; color: var(--im-ink); white-space: nowrap; overflow: hidden; }
.mk-cos-field b { font-weight: 600; color: #7B4C2D; }
.mk-cos-btn { position: absolute; left: -34px; top: 440px; width: 388px; height: 68px; border-radius: 14px; background: #0A1628; color: #FCFBF7;
  display: grid; place-items: center; font-size: 28px; font-weight: 600; white-space: nowrap; opacity: 0; }
.mk-cos-row { position: absolute; left: -324px; width: 648px; height: 56px; display: flex; align-items: center; gap: 16px; font-size: 30px; font-weight: 500; color: var(--im-ink); white-space: nowrap; opacity: 0; }
.mk-cos-row span { flex: 1; }
.mk-cos-row b { font-family: var(--im-font-serif); font-size: 44px; font-weight: 400; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mk-cos-row em { font-style: normal; height: 40px; border-radius: 20px; padding: 0 16px; display: flex; align-items: center; background: #0A1628; color: #E9C29A;
  font-size: 26px; font-weight: 600; opacity: 0; }
.mk-cos-sum { position: absolute; left: -324px; top: 232px; width: 648px; height: 3px; border-radius: 2px; background: rgba(10, 22, 40, .55); transform-origin: 0 50%; transform: scaleX(0); }
.mk-cos-res { position: absolute; left: -324px; top: 400px; height: 68px; border-radius: 34px; padding: 0 30px; display: flex; align-items: center; gap: 10px;
  background: #0A1628; color: #FCFBF7; font-size: 30px; font-weight: 600; white-space: nowrap; transform-origin: 0 50%; opacity: 0; }
.mk-cos-res span { color: #E9C29A; font-variant-numeric: tabular-nums; }
.mk-cos-pill { left: -260px; top: -22px; width: 520px; text-align: center; font-size: 32px; line-height: 44px; font-weight: 600; color: #FCFBF7; white-space: nowrap; }
.mk-cos-rec { position: absolute; left: -354px; top: 376px; width: 708px; height: 72px; box-sizing: border-box; border-radius: 16px; padding: 0 20px; display: flex; align-items: center; gap: 16px;
  background: rgba(252, 251, 247, .07); font-size: 28px; color: rgba(252, 251, 247, .8); white-space: nowrap; opacity: 0; }
.mk-cos-rec b { font-weight: 600; color: #E9C29A; }
.mk-cos-rec span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mk-cos-rec em { flex: none; font-style: normal; height: 40px; box-sizing: border-box; border-radius: 20px; padding: 0 16px; display: flex; align-items: center;
  border: 2px solid rgba(233, 194, 154, .55); color: #E9C29A; font-size: 26px; font-weight: 600; }
.mk-cos-task { position: absolute; left: -354px; top: 468px; height: 56px; border-radius: 28px; padding: 0 26px 0 22px; display: flex; align-items: center; gap: 14px;
  background: #D8A06B; color: #0A1628; font-size: 28px; font-weight: 600; white-space: nowrap; opacity: 0; }
.mk-cos-task i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #0A1628; }
/* On a phone the reel is about 330px wide (a 0.34 scale), where the 24px
   captions fall to 8 screen px. They are secondary, so they go and the
   figures, the ledger and the result carry the story on their own. */
@container (max-width: 420px) {
  .mk-cos-k, .mk-cos-chip, .mk-cos-lab, .mk-cos-leg span { display: none; }
}

/* ---- Motion: the worker records reel (parts/motion/worker_records_reel.html,
   drawn by assets/js/motion/worker-records-reel.js on the MotionKit engine).
   The hero media of the UK Worker Records page: a 960x720 design canvas (4:3)
   scaled to the hero column, about 520px wide, so a design px is about half a
   screen px there. Nothing is set under 23 design px (12 screen px), body text
   runs 25 to 30 and the name 48 to 54. The file is 880 wide with 44px padding,
   so content spans x=-396..396; the kicker sits at 28, the name at 56, the
   rule at 126 and four 108px sections start at 140, each with its title on
   the first line and its two records on the second. Each section carries its
   colour in --wr, set on the row and on its records, so a record and the place
   it lands match. The records that fly in are not inside the shape (see the
   script), so they position from the world origin. ---- */
.mk--records { aspect-ratio: 4 / 3; }
.mk-wr-pk { left: -200px; top: -44px; width: 400px; text-align: center; font-size: 23px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #D8A06B; white-space: nowrap; }
.mk-wr-pn { left: -200px; top: -14px; width: 400px; text-align: center; font-size: 54px; line-height: 1.05; color: var(--im-paper); white-space: nowrap; }
.mk-wr-k { position: absolute; left: -396px; top: 28px; font-size: 23px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7B4C2D; white-space: nowrap; opacity: 0; }
.mk-wr-h { position: absolute; left: -396px; top: 56px; font-size: 50px; line-height: 1.1; color: var(--im-ink); white-space: nowrap; opacity: 0; }
.mk-wr-status { position: absolute; left: 146px; top: 50px; width: 250px; height: 54px; box-sizing: border-box; border-radius: 27px; background: #0A1628; color: #FCFBF7;
  display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 25px; font-weight: 600; white-space: nowrap; transform-origin: 100% 50%; opacity: 0; }
.mk-wr-status i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #D8A06B; }
.mk-wr-rule { position: absolute; left: -396px; top: 126px; width: 792px; height: 2px; background: #E6E1D6; transform-origin: 0 50%; transform: scaleX(0); }
.mk-wr-row { position: absolute; left: -396px; width: 792px; height: 108px; box-sizing: border-box; border-bottom: 2px solid #EFEBE2; opacity: 0; }
.mk-wr-row > b { position: absolute; left: 0; top: 11px; font-size: 24px; line-height: 36px; font-weight: 600; letter-spacing: .04em; color: var(--wr); }
.mk-wr-row > span { position: absolute; left: 46px; top: 8px; font-size: 30px; line-height: 40px; font-weight: 500; color: var(--im-ink); white-space: nowrap; }
.mk-wr-chip { position: absolute; top: 56px; height: 46px; box-sizing: border-box; border: 2px solid var(--wr); border-radius: 23px; background: #fff;
  display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 25px; font-weight: 500; color: var(--im-ink); white-space: nowrap; opacity: 0; }
.mk-wr-chip i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--wr); }
.mk-wr-foot { position: absolute; left: -396px; top: 584px; display: flex; align-items: center; gap: 12px; font-size: 25px; font-weight: 500; color: var(--im-text-muted); white-space: nowrap; opacity: 0; }
.mk-wr-foot svg { flex: none; fill: none; stroke: #7B4C2D; stroke-width: 2; stroke-linecap: round; }
.mk-wr-slips { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.mk-wr-slip { position: absolute; left: 0; top: 0; width: 250px; height: 110px; box-sizing: border-box; padding: 30px 20px 0; border-radius: 14px; border-top: 8px solid var(--wr); background: #fff;
  box-shadow: 0 1px 2px rgba(20, 18, 14, .08), 0 14px 30px -10px rgba(20, 18, 14, .28); font-size: 27px; font-weight: 600; line-height: 1.12; color: var(--im-ink); display: none; }
.mk-wr-slip i { position: absolute; left: 20px; top: 13px; width: 96px; height: 7px; border-radius: 4px; background: #ECE7DC; }

/* ---- Motion: the audit readiness reel (parts/motion/audit_readiness_reel.html,
   drawn by assets/js/motion/audit-readiness-reel.js on the MotionKit engine).
   The hero media of /uk/businesses/audit-readiness/: a 960x720 design canvas
   (4:3, the hero's split media column) scaled to its slot. The column renders
   about 500 to 560px wide, where one design px is about 0.58 screen px once
   the camera's zoom is in, so the floor is 22 design px (about 12 screen px),
   labels run 28 to 32 and titles 54 to 60. Every card is about 860 wide and
   pads 56px, so content runs x=-374 to 374; the label sits at 50, the title at
   86 and the body from 186. Shares the .mk base with the employer reel above. ---- */
.mk--audit { aspect-ratio: 4 / 3; border-radius: 18px; }
.mk-ar-k { position: absolute; left: -374px; top: 50px; font-size: 24px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.mk-ar-h { position: absolute; left: -374px; top: 86px; width: 748px; font-family: var(--im-font-serif); font-size: 54px; line-height: 1.05; letter-spacing: -.025em; white-space: nowrap; color: var(--im-ink); }
.mk-ar-h--on-color { color: #FCFBF7; }
.mk-ar-h--fin { font-size: 60px; }
/* the questionnaire: a seven-stop stepper, then the section in hand */
.mk-ar-stline { position: absolute; left: -342px; top: 216px; width: 684px; height: 4px; border-radius: 2px; background: #ECE7DC; opacity: 0; }
.mk-ar-stline i { position: absolute; inset: 0; border-radius: 2px; background: #D8A06B; transform-origin: 0 50%; transform: scaleX(0); }
.mk-ar-st { position: absolute; top: 186px; width: 64px; height: 64px; box-sizing: border-box; border-radius: 50%; border: 3px solid #DCD6CA; background: #fff;
  display: grid; place-items: center; opacity: 0; }
.mk-ar-st b { font-size: 26px; font-weight: 600; color: var(--im-text-muted); }
.mk-ar-st svg { position: absolute; inset: 8px; opacity: 0; }
.mk-ar-st svg path, .mk-ar-tile i svg path, .mk-ar-item__tick svg path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mk-ar-st svg path { stroke: #0A1628; }
.mk-ar-st.is-on { border-color: #0A1628; }
.mk-ar-st.is-on b { color: var(--im-ink); }
.mk-ar-st.is-done { background: #D8A06B; border-color: #D8A06B; }
.mk-ar-st.is-done b { opacity: 0; }
.mk-ar-st.is-done svg { opacity: 1; }
.mk-ar-panel { position: absolute; left: -374px; top: 290px; width: 748px; height: 170px; opacity: 0; }
.mk-ar-sec { position: absolute; left: 0; top: 0; width: 748px; transform-origin: 0 0; }
.mk-ar-sec small { display: block; font-size: 24px; font-weight: 600; color: var(--im-text-muted); white-space: nowrap; }
.mk-ar-sec span { display: block; margin-top: 6px; font-size: 38px; font-weight: 600; letter-spacing: -.01em; color: var(--im-ink); white-space: nowrap; }
.mk-ar-qbar { position: absolute; left: 0; top: 128px; width: 580px; height: 12px; border-radius: 6px; background: #ECE7DC; overflow: hidden; }
.mk-ar-qbar i { position: absolute; inset: 0; border-radius: 6px; background: #D8A06B; transform-origin: 0 50%; transform: scaleX(0); }
.mk-ar-qc { position: absolute; left: 600px; top: 112px; width: 148px; text-align: right; font-size: 30px; font-weight: 600; color: var(--im-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-ar-note { position: absolute; left: -374px; top: 520px; width: 748px; font-size: 24px; color: var(--im-text-muted); white-space: nowrap; opacity: 0; }
/* the audit pack: loose tiles, then a numbered list */
.mk-ar-tile { position: absolute; left: 0; top: 0; height: 58px; box-sizing: border-box; border-radius: 14px; padding: 0 12px 0 20px; background: #FCFBF7;
  display: flex; align-items: center; gap: 16px; white-space: nowrap; font-size: 28px; font-weight: 500; color: var(--im-ink); opacity: 0;
  transform-origin: 0 50%; box-shadow: 0 6px 16px -8px rgba(20, 18, 14, .45); }
.mk-ar-tile b { font-size: 24px; font-weight: 600; color: #7B4C2D; font-variant-numeric: tabular-nums; }
.mk-ar-tile i { width: 36px; height: 36px; border-radius: 50%; background: #D8A06B; opacity: 0; }
.mk-ar-tile i svg { display: block; width: 36px; height: 36px; }
.mk-ar-tile i svg path { stroke: #0A1628; }
.mk-ar-btn { position: absolute; left: -374px; top: 512px; height: 64px; border-radius: 14px; padding: 0 28px; display: flex; align-items: center;
  background: #FCFBF7; color: #7B4C2D; font-size: 26px; font-weight: 600; white-space: nowrap; opacity: 0; }
.mk-ar-chip { position: absolute; left: -374px; height: 64px; border-radius: 32px; padding: 0 28px; display: flex; align-items: center;
  font-size: 28px; font-weight: 600; white-space: nowrap; transform-origin: 0 50%; opacity: 0; }
.mk-ar-chip--pack { top: 512px; background: rgba(216, 160, 107, .26); color: #F3D9BE; }
.mk-ar-chip--next { left: -4px; top: 378px; background: #D8A06B; color: #0A1628; }
/* the quarterly ring: four nodes, month labels inside the ring */
.mk-ar-ring { left: -374px; top: 204px; opacity: 0; }
.mk-ar-ring circle, .mk-ar-ring path { fill: none; }
.mk-ar-ring__track { stroke: rgba(252, 251, 247, .14); stroke-width: 12; }
.mk-ar-ring__arc { stroke: #D8A06B; stroke-width: 12; stroke-linecap: round; }
.mk-ar-ring__ahead { stroke: rgba(216, 160, 107, .7); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 14; opacity: 0; }
.mk-ar-ring__halo { stroke: #D8A06B; stroke-width: 3; opacity: 0; }
.mk-ar-ring .mk-ar-ring__head { fill: #FCFBF7; }
.mk-ar-ring .mk-ar-node { fill: #0A1628; stroke: rgba(252, 251, 247, .42); stroke-width: 4; }
.mk-ar-ring .mk-ar-node.is-on { fill: #D8A06B; stroke: #D8A06B; }
.mk-ar-ring text { fill: rgba(252, 251, 247, .86); font-family: var(--im-font-display); font-size: 24px; font-weight: 600; }
.mk-ar-item { position: absolute; left: -4px; top: 252px; width: 378px; display: flex; align-items: flex-start; gap: 16px; font-size: 30px; line-height: 1.2; font-weight: 500; color: #FCFBF7; opacity: 0; }
.mk-ar-item__tick { flex: none; width: 40px; height: 40px; margin-top: -2px; border-radius: 50%; background: rgba(216, 160, 107, .22); }
.mk-ar-item__tick svg { display: block; width: 40px; height: 40px; }
.mk-ar-item__tick svg path { stroke: #D8A06B; }
/* the resting ledger */
.mk-ar-fr { position: absolute; left: -374px; width: 748px; height: 110px; box-sizing: border-box; border-bottom: 1.5px solid #E6E1D6;
  display: flex; align-items: center; gap: 20px; font-size: 32px; font-weight: 600; color: var(--im-ink); white-space: nowrap; opacity: 0; }
.mk-ar-fr i { flex: none; width: 20px; height: 20px; border-radius: 50%; }
.mk-ar-fs { margin-left: auto; height: 60px; border-radius: 30px; padding: 0 24px; display: flex; align-items: center; font-size: 28px; font-weight: 600;
  transform-origin: 100% 50%; opacity: 0; }

/* ---- Motion: the skilled worker reel (parts/motion/skilled_worker_reel.html,
   drawn by assets/js/motion/skilled-worker-reel.js on the MotionKit engine).
   The hero media of /guides/skilled-worker/: a 960x720 design canvas (4:3, the
   hero's media ratio) scaled to its slot. The column is about 520px wide (a
   0.54 scale), so nothing sits under 24 design px, about 13 screen px, and
   titles run at 32. One card, 880x640 with 48px padding, so content starts at
   x=-392 and runs 784px: the kicker at 44, a rule at 92, and below it a
   512px viewport the life line scrolls through. A row is 72 tall shut and
   218 open; its node sits at x=8 and its title at 72. Umber marks progress on
   white; tan takes over on the navy close. No cursor in this reel. ---- */
.mk--sw { aspect-ratio: 4 / 3; container-type: inline-size; }
.mk--sw .mk-cursor { display: none; }
.mk-sw-k { position: absolute; left: -392px; top: 44px; font-size: 24px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: #7B4C2D; }
.mk-sw-rule { position: absolute; left: -392px; top: 92px; width: 784px; height: 2px; background: #ECE7DC; }
.mk-sw-view { position: absolute; left: -392px; top: 96px; width: 784px; height: 520px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44px, #000 440px, transparent 520px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 44px, #000 440px, transparent 520px); }
.mk-sw-list { position: absolute; left: 0; top: 0; width: 784px; }
.mk-sw-spine { position: absolute; left: 26.5px; top: 36px; width: 3px; border-radius: 2px; background: #ECE7DC; }
.mk-sw-spine i { position: absolute; left: 0; top: 0; width: 3px; border-radius: 2px; background: #7B4C2D; }
.mk-sw-row { position: absolute; left: 0; width: 784px; overflow: hidden; }
.mk-sw-node { position: absolute; left: 8px; top: 16px; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; border: 3px solid #DCD6CA; background: #fff;
  display: grid; place-items: center; }
.mk-sw-node svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.mk-sw-row.is-on .mk-sw-node { border-color: #7B4C2D; background: #7B4C2D; box-shadow: 0 0 0 7px rgba(123, 76, 45, .14); }
.mk-sw-row.is-done .mk-sw-node { border-color: #0A1628; background: #0A1628; }
.mk-sw-row.is-done .mk-sw-node svg { opacity: 1; }
.mk-sw-t { position: absolute; left: 72px; top: 0; line-height: 72px; font-size: 32px; font-weight: 600; white-space: nowrap; color: rgba(10, 22, 40, .36); }
.mk-sw-row.is-on .mk-sw-t, .mk-sw-row.is-done .mk-sw-t { color: var(--im-ink); }
.mk-sw-chip { position: absolute; right: 0; top: 14px; height: 44px; box-sizing: border-box; border-radius: 22px; padding: 0 18px; display: flex; align-items: center;
  background: #F4EFE5; color: #7B4C2D; font-size: 24px; font-weight: 600; white-space: nowrap; transform-origin: 100% 50%; opacity: 0; }
.mk-sw-d { position: absolute; left: 72px; top: 76px; width: 712px; height: 136px; opacity: 0; }
.mk-sw-l1 { position: absolute; left: 0; top: 0; display: flex; align-items: baseline; gap: 16px; font-size: 30px; font-weight: 500; color: var(--im-ink); white-space: nowrap; opacity: 0; }
.mk-sw-code { font-family: var(--im-font-serif); font-size: 48px; font-weight: 400; letter-spacing: -.02em; color: #7B4C2D; line-height: 1; }
.mk-sw-cap { position: absolute; left: 0; top: 70px; font-size: 26px; color: rgba(10, 22, 40, .62); white-space: nowrap; opacity: 0; }
.mk-sw-l1--by { left: 112px; top: 16px; }
.mk-sw-cap--by { left: 112px; top: 62px; }
.mk-sw-doc { position: absolute; left: 0; top: 0; width: 88px; height: 108px; box-sizing: border-box; border: 2.5px solid #E6E1D6; border-radius: 12px; background: #FCFBF7;
  padding: 22px 16px 0; opacity: 0; }
.mk-sw-doc i { display: block; height: 8px; border-radius: 4px; background: #E6E1D6; margin-bottom: 10px; }
.mk-sw-doc i:nth-child(1) { width: 70%; background: #D8A06B; }
.mk-sw-doc i:nth-child(3) { width: 55%; }
.mk-sw-doc--send { top: 10px; width: 88px; height: 88px; padding: 0; border: 0; border-radius: 50%; background: #0A1628; display: grid; place-items: center; }
.mk-sw-doc--send svg { width: 40px; height: 40px; fill: none; stroke: #E9C29A; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mk-sw-fig { position: absolute; left: 0; top: 0; opacity: 0; }
.mk-sw-fig--min { left: 300px; }
.mk-sw-lab { display: block; font-size: 24px; font-weight: 600; color: rgba(10, 22, 40, .62); white-space: nowrap; }
.mk-sw-fig b { display: block; margin-top: 2px; font-family: var(--im-font-serif); font-size: 44px; font-weight: 400; letter-spacing: -.02em; line-height: 1.05; color: var(--im-ink); font-variant-numeric: tabular-nums; }
.mk-sw-bar { position: absolute; left: 0; top: 108px; width: 640px; height: 14px; border-radius: 7px; background: #ECE7DC; }
.mk-sw-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 7px; background: #7B4C2D; }
.mk-sw-bar em { position: absolute; top: -10px; width: 4px; height: 34px; border-radius: 2px; background: #0A1628; opacity: 0; }
.mk-sw-pills { position: absolute; left: 0; top: 0; width: 712px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.mk-sw-pills span { height: 56px; box-sizing: border-box; border-radius: 28px; padding: 0 22px; display: flex; align-items: center; border: 2px solid rgba(123, 76, 45, .38);
  background: #F6EEE4; color: #7B4C2D; font-size: 26px; font-weight: 600; white-space: nowrap; opacity: 0; }
.mk-sw-arrow { width: 32px; height: 32px; fill: none; stroke: #7B4C2D; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* The close: the seven nodes again, ticked, in a column at the card's left,
   and the line beside them from x=-80. */
.mk-sw-fspine { position: absolute; left: -373.5px; top: 96px; width: 3px; height: 420px; border-radius: 2px; background: rgba(252, 251, 247, .18); }
.mk-sw-fspine i { position: absolute; left: 0; top: 0; width: 3px; height: 0; border-radius: 2px; background: #D8A06B; }
.mk-sw-fn { position: absolute; left: -392px; height: 40px; display: flex; align-items: center; gap: 18px; font-size: 26px; font-weight: 500; color: rgba(252, 251, 247, .8); white-space: nowrap; opacity: 0; }
.mk-sw-fn i { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #D8A06B; display: grid; place-items: center; }
.mk-sw-fn svg { width: 22px; height: 22px; fill: none; stroke: #0A1628; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mk-sw-fk { position: absolute; left: -80px; top: 110px; font-size: 24px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: #E9C29A; opacity: 0; }
.mk-sw-final { position: absolute; left: -80px; top: 154px; width: 472px; font-size: 66px; line-height: 1.04; color: #FCFBF7; opacity: 0; }
.mk-sw-fsub { position: absolute; left: -80px; top: 404px; width: 472px; font-size: 28px; line-height: 1.3; font-weight: 500; color: rgba(252, 251, 247, .78); opacity: 0; }
/* On a phone the reel is about 330px wide (a 0.34 scale), where the 24 to 28px
   captions fall under 10 screen px. They are secondary, so they go, and what
   stays grows to 34 or more (11.5 screen px): the titles, the code, the figures
   and their labels, the pills, and on the close the headline alone. */
@container (max-width: 420px) {
  .mk-sw-k, .mk-sw-chip, .mk-sw-cap, .mk-sw-fn span, .mk-sw-fk, .mk-sw-fsub { display: none; }
  .mk-sw-t, .mk-sw-l1 { font-size: 34px; }
  .mk-sw-l1--by { top: 30px; }
  .mk-sw-lab { font-size: 34px; }
  .mk-sw-fig--min { left: 320px; }
  .mk-sw-fig b { font-size: 48px; }
  .mk-sw-pills span { font-size: 34px; height: 60px; }
  .mk-sw-final { top: 170px; font-size: 76px; }
}