/* 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 { font-family: var(--im-font-display); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--im-text-muted); margin-bottom: var(--im-space-3); }
.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; }
}

/* ---- Prose primitive (.im-prose) — the shared long-form/article style.
 * Aligned with the blog's existing .im-blog-content treatment; blog adopts
 * .im-prose in surface 3. Tokens only. ---- */
.im-prose { max-width: 73ch; font-family: var(--im-font-body, "Hanken Grotesk", system-ui, -apple-system, sans-serif); }
.im-prose > * + * { margin-top: var(--im-space-4); }
.im-prose p { font-size: 15.5px; line-height: 1.7; color: var(--im-text-200); }
/* h2 is serif, h3 is sans — the face change IS the hierarchy signal, so h3 does
   not need to shout with weight. Matches Harvey (serif h1-h3, sans from h4); we
   break one level earlier because h3 is where our service pages turn into
   per-requirement detail and lists, which read better in the grotesque. */
.im-prose h2 { font-family: var(--im-font-serif); font-weight: 400; font-size: 26px;
  line-height: 1.15; letter-spacing: var(--im-track-head); color: var(--im-ink);
  padding-left: var(--im-space-4); border-left: 3px solid var(--im-accent-200);
  text-wrap: balance; }
/* Display-face h2, opt-in per call site via the block's `modifier` param. Same
   move as .im-cta-band--display: one block, two type voices, chosen by the
   caller. The Sponsor Licence page asks for it because its education block now
   leads the page directly under the hero (2026-08-09) rather than sitting mid-
   article, so the h2 reads as a section head among display headings rather than
   as article prose. Weight 500, not the h3's 600 — the sans section-head value
   this file already settled on at .im-svc (medium, "editorial, not shouty"), and
   the step the grotesque needs to hold the same presence the serif had at 400.
   Size is untouched: it stays the base 26px. */
.im-prose--display-head h2 { font-family: var(--im-font-display); font-weight: 500; }
.im-prose h3 { font-family: var(--im-font-display); font-weight: 600; font-size: 21px;
  letter-spacing: var(--im-track-head); color: var(--im-ink); text-wrap: balance; }
.im-prose a { color: var(--im-accent-200); text-decoration: underline; text-underline-offset: 2px; }
.im-prose ul { list-style: none; padding: 0; }
.im-prose ul li { position: relative; padding-left: var(--im-space-5); font-size: 15px;
  line-height: 1.65; color: var(--im-text-200); }
.im-prose ul li + li { margin-top: var(--im-space-2); }
.im-prose ul li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px;
  background: var(--im-accent-200); border-radius: 2px; }
.im-prose blockquote { border-left: 3px solid var(--im-ink); background: var(--im-band);
  padding: var(--im-space-4) var(--im-space-5); border-radius: 0 var(--im-radius-control) var(--im-radius-control) 0;
  font-family: var(--im-font-display); font-size: 18px; color: var(--im-ink); }
.im-prose img { max-width: 100%; height: auto; border-radius: var(--im-radius-card); }
.im-inset { border-left: 3px solid var(--im-accent-200); background: var(--im-card-bg);
  padding: var(--im-space-4) var(--im-space-5); border-radius: 0 var(--im-radius-control) var(--im-radius-control) 0;
  font-size: 13.5px; color: var(--im-text-200); line-height: 1.6; }
.im-inset b { font-family: var(--im-font-display); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--im-accent-200); display: block; margin-bottom: var(--im-space-1); }

/* ---- Fee / figures table (label -> teal mono value, hairline rows, sourced note) ---- */
.im-fee { margin-top: var(--im-space-8); max-width: 640px; border-top: 1px solid var(--im-hairline); }
.im-fee__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--im-space-6);
  padding: var(--im-space-3) 0; border-bottom: 1px solid var(--im-hairline); }
.im-fee__label { font-family: var(--im-font-body, "Hanken Grotesk", system-ui, -apple-system, sans-serif);
  font-size: 14px; color: var(--im-text-200); margin: 0; }
/* This slot wraps. It held `white-space: nowrap`, to keep a two-part fee range
   from breaking at the en-dash between its figures, and the price of that was an
   unbreakable box as wide as its longest value: germany/eu-blue-card carries a
   96-character processing-time sentence in a fee value, and it pushed the whole
   PAGE 434px sideways at 390px. A range that wraps is untidy; a
   page that scrolls sideways on a phone is broken, and no grid track above can
   contain a child that refuses to wrap (minmax(0, 1fr) on .im-tocgrid stops the
   track inflating, not the child overflowing). min-width:0 because the row is a
   flexbox and a flex item's automatic minimum is its content. */
.im-fee__val { font-family: var(--im-font-display); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--im-accent-200);
  text-align: right; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.im-fee__note { font-family: var(--im-font-body, "Hanken Grotesk", system-ui, -apple-system, sans-serif);
  font-size: 12.5px; color: var(--im-text-muted); line-height: 1.55; margin-top: var(--im-space-4); max-width: 640px; }
.im-fee__note a { color: var(--im-accent-200); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Pricing / transparency (two-column: headline figure + fee_table 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); }
/* fee_table 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-fee { 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); }
.im-feature-band__title { font-family: var(--im-font-display); font-weight: 600;
  font-size: clamp(26px, 3.2vw, 34px); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 var(--im-space-4); }
.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); }

/* 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. */
.im-trust-band { background: var(--im-band); border-top: 1px solid var(--im-hairline);
  border-bottom: 1px solid var(--im-hairline); padding: var(--im-space-16) 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); }
/* The kicker here is the teal accent, not the default muted stone (which reads
   green against this band). Scoped to the trust band so it does not repaint every
   other .im-seclab; the token comment already reserves accent-200 for kickers.
   Covers all country pages ("Our immigration practice" on UK, "Regulated local
   partner" on partner markets — the same block). */
.im-trust-band .im-seclab { color: var(--im-accent-200); }
.im-trust-band__title { font-family: var(--im-font-display); font-weight: 600;
  font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -.01em; margin: var(--im-space-3) 0 var(--im-space-4); }
.im-trust-band__body { color: var(--im-text-200); max-width: 52ch; margin: 0 0 var(--im-space-3); }
.im-trust-band__who { font-family: var(--im-font-display); font-size: 12px; color: var(--im-text-muted); }
/* 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; }

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

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

/* ---- Prose meta line (last-updated / contact) ---- */
.im-prose__meta { font-family: var(--im-font-display); font-size: 12px; letter-spacing: .02em; color: var(--im-text-200); }

/* ---- Prose with sticky table of contents (legal docs: tc/pc). Tokens only. ---- */
.im-prose-toc { display: grid; grid-template-columns: 1fr; gap: var(--im-space-8); }
@media (min-width: 768px) {
  .im-prose-toc { grid-template-columns: 210px minmax(0, 1fr); gap: var(--im-space-12); }
  .im-prose-toc__nav { position: sticky; top: 7rem; align-self: start; }
}
.im-prose-toc__list { list-style: none; margin: var(--im-space-3) 0 0; padding: 0; }
.im-prose-toc__list li + li { margin-top: var(--im-space-2); }
.im-prose-toc__list a { display: block; padding-left: var(--im-space-3); border-left: 2px solid var(--im-hairline);
  color: var(--im-text-200); text-decoration: none; font-size: 14px; line-height: 1.45; }
.im-prose-toc__list a:hover, .im-prose-toc__list a:focus-visible { color: var(--im-ink); border-left-color: var(--im-accent-200); }
.im-prose-toc .im-prose { max-width: none; }
.im-prose-toc .im-prose h2 { scroll-margin-top: 7rem; }

/* ---- 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 dormant content blocks (requirement / permitted-not / doc). Info-only; no verdict-by-colour. Tokens only. ---- */
.im-reqlist, .im-doclist { list-style: none; margin: var(--im-space-6) 0 0; padding: 0; max-width: 70ch; }
.im-reqlist__item, .im-doclist__item { position: relative; padding-left: var(--im-space-6);
  padding-bottom: var(--im-space-3); margin-bottom: var(--im-space-3); border-bottom: 1px solid var(--im-hairline); }
.im-reqlist__item::before, .im-doclist__item::before { content: ""; position: absolute; left: 2px; top: 6px;
  width: 8px; height: 8px; border: 2px solid var(--im-accent-200); border-radius: 2px; }
.im-reqlist__label, .im-doclist__label { display: block; font-size: 15px; line-height: 1.5; color: var(--im-ink); }
.im-reqlist__detail, .im-doclist__note { display: block; font-size: 13px; line-height: 1.5; color: var(--im-text-muted); margin-top: 2px; }

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

/* ---- Prose convergence (Surface 3): elements the blog TinyMCE body uses that
 * the base .im-prose lacked (table / code / pre / ol / hr). Additive — the
 * already-shipped legal/about/service pages contain none of these. Tokens only. ---- */
.im-prose ol { padding-left: var(--im-space-6); }
.im-prose ol li { font-size: 15px; line-height: 1.7; color: var(--im-text-200); margin-top: var(--im-space-2); }
.im-prose hr { border: 0; border-top: 1px solid var(--im-hairline); margin: var(--im-space-8) 0; }
.im-prose code { font-family: var(--im-font-mono); font-size: 0.9em; background: var(--im-band);
  padding: 0.1em 0.35em; border-radius: var(--im-radius-control); }
.im-prose pre { background: var(--im-band); border: 1px solid var(--im-hairline); border-radius: var(--im-radius-card);
  padding: var(--im-space-4); overflow-x: auto; font-family: var(--im-font-mono); font-size: 13px; line-height: 1.6; }
.im-prose pre code { background: none; padding: 0; }
.im-prose table { width: 100%; border-collapse: collapse; margin: var(--im-space-6) 0; font-size: 14.5px; display: block; overflow-x: auto; }
.im-prose th, .im-prose td { text-align: left; padding: var(--im-space-3) var(--im-space-4); border-bottom: 1px solid var(--im-hairline); }
.im-prose th { font-family: var(--im-font-display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--im-text-muted); }

/* ---- 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 / freshness byline (E-E-A-T): one inline line under the hero,
   hairline above and below. It replaced a bordered card in its own page section
   the signal is worth keeping, a full-width panel between
   the masthead and the first substance is not. The separator is a pseudo-element
   so an absent source or date leaves no orphan middot behind. ---- */
.im-byline { display: flex; flex-wrap: wrap; margin: 0;
  padding: var(--im-space-3) 0;
  border-top: 1px solid var(--im-hairline); border-bottom: 1px solid var(--im-hairline);
  font-size: 13px; line-height: 1.5; color: var(--im-text-muted); }
.im-byline__item + .im-byline__item::before { content: "·"; margin: 0 var(--im-space-3); }
.im-byline__lk { color: var(--im-text-200); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px; }
.im-byline__lk:hover, .im-byline__lk:focus-visible { color: var(--im-ink); }

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

/* ---- Service-page two-column body with sticky TOC ----
   IMPORTANT: no ancestor of .im-tocgrid may set overflow: hidden/clip —
   that silently disables position: sticky on the rail.

   minmax(0, 1fr), never a bare `1fr`. The article column holds long unbroken
   strings and wide tabular content, and a bare `1fr` floors the track at that
   min-content: measured 434px of page-level sideways scroll on
   germany/work-visas/eu-blue-card at 390px, from a 96-character
   processing-time sentence in a fee value (.im-fee__val above). minmax(0, …)
   lets the track shrink, so a wide child scrolls inside its own overflow
   container rather than pushing the page. KEEP THIS even though the
   560px-min-width comparison table that first exposed it has been deleted: the
   floor it removes is min-content, whatever supplies it. */
.im-tocgrid { display: grid; grid-template-columns: 215px minmax(0, 1fr); gap: var(--im-space-12, 48px);
  align-items: start; }
/* max-height + scroll because the rail is sticky: a grouped rail carries two
   headings and both audiences' entries, which on a short laptop viewport runs
   past the fold with no way to reach the bottom of it. Reset in the <=900px
   branch below, where the rail is static and scrolls with the page. */
.im-toc { position: sticky; top: 72px;
  max-height: calc(100vh - var(--im-nav-h) - var(--im-space-6)); overflow-y: auto; }
.im-toc__list { list-style: none; margin: var(--im-space-3, 12px) 0 0; padding: 0;
  border-left: 1px solid var(--im-hairline, #E4DFD2); }
.im-toc__list a { display: block; padding: 6px 0 6px 16px; font-size: 13.5px;
  color: var(--im-text-muted); text-decoration: none; border-left: 2px solid transparent;
  margin-left: -1.5px; line-height: 1.35; }
.im-toc__list a:hover, .im-toc__list a:focus-visible { color: var(--im-accent-200, #00668c); }
.im-toc__list a.is-current { color: var(--im-ink); border-left-color: var(--im-accent-200, #00668c);
  font-weight: 600; }
/* Audience heading inside the rail, on a route serving a worker and an employer.
   Ranks below "On this page" (.im-seclab) and above the links, so the rail reads
   as one list divided rather than as two lists stacked. */
.im-toc__group { font-family: var(--im-font-display); font-size: 12px; font-weight: 600;
  color: var(--im-ink); margin-top: var(--im-space-5); }
/* The first group sits under "On this page" and takes the smaller gap. Keyed on
   the label it follows, not on :first-of-type: the first DIV sibling in the rail
   is the .im-seclab, so :first-of-type matched nothing and the rule was dead.
   :where() holds the selector at one class of specificity so the <=900px
   override below still wins on its own. */
:where(.im-seclab) + .im-toc__group { margin-top: var(--im-space-3); }
/* Narrow: the rail stops being a rail and sits above the article, but the list
   inside it stays VERTICAL. It used to go horizontal flex-wrap here, and that
   cost more than it saved. Measured at 390px, 15 links: the strip is 304px tall
   against 563px vertical, so it buys back a third of a screen — and in exchange
   the links run together as one unpunctuated line, the tap targets fall from
   328px wide to 63px, and both border-lefts go, which is where `is-current`
   lives. Scrollspy on a phone was reduced to a colour change with no position
   marker on a page whose whole job is orienting a reader through fifteen
   sections. Vertical is the same design at both widths, and the extra 259px is
   one flick of a thumb. Sticky still goes: in one column the rail sits above
   the prose, so pinning it would cover what it points at. */
@media (max-width: 900px) {
  .im-tocgrid { grid-template-columns: minmax(0, 1fr); }
  .im-toc { position: static; max-height: none; overflow-y: visible; }
  .im-toc__group { margin-top: var(--im-space-4); }
}

/* ---- 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 below). */
.im-secband:first-child { margin-top: 0; }
.im-secband .im-seclab { display: block; margin-bottom: 0; }

/* Each half of the document is wrapped in a <section> named by its band, so a
   screen-reader user can identify and skip the half that is not addressed to
   them (WCAG 2.2 SC 1.3.1; the band alone was a visual-only signal). Those
   wrappers are SEMANTICS, not layout, and .im-prose's rhythm is the
   child-combinator `> * + *` above — which stops at the wrapper and would leave
   every section inside it flush against its neighbour. These two rules carry the
   rhythm through: the same 4-step gap inside a region, and the void the band used
   to own between them. Only the route pages that carry an employer block render
   any <section> here at all. */
.im-prose > section > * + * { margin-top: var(--im-space-4); }
.im-prose > section + section { margin-top: var(--im-space-10); }

/* ---- 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. */
.im-hero-block__media--ph {
  /* The wash itself, as two "saturation lightness" pairs. Named so the values
     sit in one place instead of inside two gradient functions, and so a future
     dark palette restates two short values rather than the whole 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-ph-wash-a: 26% 93%;
  --im-ph-wash-b: 30% 89%;
  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. Two consumers of --im-mark
 * now; if a third arrives, lift the four mask lines into a shared utility. */
.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. */
  position: relative;
  width: 52%;
  aspect-ratio: 1;
  pointer-events: none;
  background-color: var(--im-stone-400);
  opacity: .82;
  -webkit-mask-image: var(--im-mark);
          mask-image: var(--im-mark);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}

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

/* Requirement / document lists WITH icons (--ic): icon | label+detail ledger,
   the icon replacing the ::before bullet. Plain (no-icon) items unchanged. */
.im-reqlist__item--ic, .im-doclist__item--ic { padding-left: 0;
  display: grid; grid-template-columns: 26px 1fr; column-gap: var(--im-space-4); align-items: start; }
.im-reqlist__item--ic::before, .im-doclist__item--ic::before { display: none; }
.im-reqlist__ic, .im-doclist__ic { color: var(--im-accent-200); margin-top: 1px; grid-row: 1 / span 2; }
.im-reqlist__ic .im-ic, .im-doclist__ic .im-ic { width: 20px; height: 20px; }

/* 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. */
.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-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 / audience_split / destinations_picker --- */
/* ==========================================================================
   Batch A — global-home blocks: trust_marquee, audience_split,
   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 split (Individuals / Businesses hover-depth cards) ---- */
.im-audience-split__hd { max-width: 62ch; margin-bottom: var(--im-space-10); }
.im-audience-split__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--im-space-6);
}
.im-audience-split__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-8) var(--im-space-8) var(--im-space-6);
  overflow: hidden;
  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-audience-split__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--im-accent-200) 9%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity var(--im-dur) var(--im-ease);
  pointer-events: none;
}
.im-audience-split__card:hover,
.im-audience-split__card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--im-shadow-2);
  border-color: var(--im-accent-200);
}
.im-audience-split__card:hover::before,
.im-audience-split__card:focus-visible::before { opacity: 1; }
.im-audience-split__card:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 2px; }
.im-audience-split__ic {
  width: 38px;
  height: 38px;
  color: var(--im-accent-200);
  transition: transform var(--im-dur) var(--im-ease);
}
.im-audience-split__card:hover .im-audience-split__ic { transform: scale(1.08) rotate(-3deg); }
.im-audience-split__k {
  font-family: var(--im-font-display);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--im-text-muted);
}
.im-audience-split__t {
  font-family: var(--im-font-display);
  font-weight: 600;
  font-size: 26px;
  color: var(--im-ink);
  margin: 0;
}
.im-audience-split__b {
  font-size: 15px;
  color: var(--im-text-muted);
  line-height: 1.6;
  flex: 1;
  margin: 0;
}
.im-audience-split__lk {
  font-family: var(--im-font-display);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--im-accent-200);
  display: inline-flex;
  align-items: center;
  gap: var(--im-space-2);
}
.im-audience-split__lk-ar { display: inline-block; transition: transform var(--im-dur) var(--im-ease); }
.im-audience-split__card:hover .im-audience-split__lk-ar { transform: translateX(4px); }
@media (max-width: 900px) {
  .im-audience-split__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .im-audience-split__card,
  .im-audience-split__ic,
  .im-audience-split__lk-ar { transition: none; }
  .im-audience-split__card:hover,
  .im-audience-split__card:focus-visible { transform: 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). */
.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;
  -webkit-mask-image: var(--im-mark);
          mask-image: var(--im-mark);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
  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);
}

/* .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-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); }
.im-expertise-band__chip {
  border: 1px solid color-mix(in srgb, var(--im-accent-100) 40%, transparent);
  color: #dff0f8;
  border-radius: var(--im-radius-pill);
  padding: 10px 18px;
  font-family: var(--im-font-display);
  font-size: 13px;
  background: color-mix(in srgb, var(--im-accent-100) 7%, transparent);
  transition: transform var(--im-dur) var(--im-ease), background var(--im-dur) var(--im-ease);
}
.im-expertise-band__chip:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--im-accent-100) 15%, transparent); }
@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; }
}
@media (prefers-reduced-motion: reduce) {
  .im-expertise-band__chip:hover { transform: none; }
}

/* ---- 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__ar { transition: transform var(--im-dur) var(--im-ease); }
.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
 * ============================================================ */
.im-people-network__hd { max-width: 64ch; margin-bottom: var(--im-space-8); }
/* 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;
}
/* The source (dhruti_square.png) is a true 1:1 — 5056x5056. Cropping a square
   portrait into a 16/11 landscape box discards 31% of its height, and because
   object-position defaulted to centre it took that out of BOTH ends: the top of
   her head was clipped while a band of clothing survived at the bottom, which is
   the "wrong shape" read. 4/3 cuts a quarter instead of a third, and biasing the
   position to 30% spends what is left on the torso rather than the head, so the
   frame keeps headroom above the subject the way a portrait crop should.
   If the photo is ever replaced, replace this ratio with the new file's own. */
.im-lead-person__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
  border-bottom: 1px solid var(--im-hairline);
}
.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; }
}
@media (prefers-reduced-motion: reduce) {
  .im-lead-person, .im-network { transition: none; }
}

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