/* ==========================================================================
   Sterlinx Global - theme stylesheet
   Built by build/build-theme.ps1 from the approved Gate 2 prototype.
   Do not edit this file by hand: edit prototype/assets/*.css and rebuild.
   Sections: 1 fonts  2 design system  3 v2 layer  4 blog  5 WordPress
   ========================================================================== */

/* ---- 1. Self-hosted fonts ---- */

/* Generated by build/fetch-fonts.mjs - do not edit by hand.
   Self-hosted so no request leaves for fonts.googleapis.com or fonts.gstatic.com.
   Subsets limited to latin and latin-ext.

   font-display: optional, not swap. Measured on the blog, swap produced a single
   layout shift of 0.31 CLS: the fallback face is wider, so the clamped card
   titles changed line count and every grid row re-flowed when the webfont
   arrived. With the two families preloaded from the same origin they load in
   ~10ms, which is inside the optional block period, so the brand face is still
   what paints - but a slow first visit now commits to the fallback for that page
   instead of shifting the layout under the reader. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---- 2. Design system ---- */

/* ==========================================================================
   Sterlinx — Prototype Design System
   Palette derived from the live logo: #244AA9 (royal) / #83B540 (lime)
   Concept: "Ledger" — precision finance for people who sell.
   ========================================================================== */

:root {
  /* Brand */
  --royal: #244AA9;
  --royal-deep: #1B3A87;
  --royal-ink: #142A63;
  --lime: #83B540;
  --lime-deep: #6EA922;

  /* Neutrals */
  --navy: #0B1733;
  --navy-soft: #12203F;
  --ink: #101828;
  --slate: #475467;
  --slate-light: #667085;
  --line: #E4E7EC;
  --line-soft: #EFF1F4;
  --paper: #FFFFFF;
  --mist: #F7F8FA;
  --mist-blue: #F2F5FC;

  /* Type */
  --font-display: "Instrument Sans", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Space + shape */
  --wrap: 1200px;
  --gutter: 28px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --shadow: 0 4px 8px -2px rgba(16,24,40,.08), 0 12px 24px -6px rgba(16,24,40,.06);
  --shadow-lg: 0 18px 40px -12px rgba(16,24,40,.16), 0 4px 10px -4px rgba(16,24,40,.06);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--royal); text-decoration: none; }
a:hover { color: var(--royal-deep); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  /* 600, not 620: Instrument Sans loads discrete faces (400/500/600/700), and a
     desired weight above 500 resolves UP to the next face, so 620 rendered as
     700 Bold on every page (measured: 620/640/700 identical widths). */
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 .5em;
  color: var(--ink);
}

h1 { font-size: clamp(2.5rem, 5.2vw, 4.1rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.85rem, 3.2vw, 2.75rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
h4 { font-size: 1.075rem; letter-spacing: -0.015em; }

p { margin: 0 0 1.1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: 1320px; }

/* ---------- Eyebrow / labels ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-monospace, var(--font-mono));
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--lime);
  border-radius: 2px;
}
.eyebrow.on-dark { color: #A9BEF0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--royal); color: #fff; box-shadow: 0 8px 20px -8px rgba(36,74,169,.55); }
.btn-primary:hover { background: var(--royal-deep); color: #fff; box-shadow: 0 12px 26px -10px rgba(36,74,169,.6); }
.btn-lime { background: var(--lime); color: #0F1A05; box-shadow: 0 8px 20px -8px rgba(131,181,64,.6); }
.btn-lime:hover { background: #92C44E; color: #0F1A05; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--royal); color: var(--royal); background: var(--mist-blue); }

/* Guard: a ghost button placed on any dark surface must read light-on-dark.
   Prevents the dark-on-dark failure where the label becomes invisible. */
.page-hero .btn-ghost,
.cta-band .btn-ghost,
.quote-band .btn-ghost,
.site-footer .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}
.page-hero .btn-ghost:hover,
.cta-band .btn-ghost:hover,
.quote-band .btn-ghost:hover,
.site-footer .btn-ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.14);
}
.btn-on-dark { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); backdrop-filter: blur(6px); }
.btn-on-dark:hover { background: rgba(255,255,255,.16); color: #fff; }
.btn-lg { padding: 16px 32px; font-size: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
}
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand img { height: 30px; width: auto; aspect-ratio: 2880 / 652; }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: 10px;
  flex-wrap: nowrap;
}
.nav a {
  font-family: var(--font-display);
  font-size: .935rem;
  font-weight: 520;
  color: var(--slate);
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
  transition: color .15s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--lime);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav a:hover, .nav a.is-active { color: var(--ink); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }

/* ---------- Cross-border dropdown ----------
   The US pages live under one parent so the bar stays at seven items. Opens on
   hover, and on focus-within so a keyboard user reaches the children by tabbing
   off the parent link - no script involved. */
.nav-group { position: relative; display: flex; align-items: center; }
/* A disclosure button, not a link: it must look exactly like the nav anchors
   and behave like none of them. Button resets are deliberate. */
.nav-group-parent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: .935rem;
  font-weight: 520;
  line-height: inherit;
  color: var(--slate);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
/* Mirrors the anchors' underline, so the group honours the same active style. */
.nav-group-parent::after {
  content: "";
  position: absolute;
  left: 0; right: 14px; bottom: -2px;
  height: 2px;
  background: var(--lime);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav-group-parent:hover,
.nav-group-parent.is-active { color: var(--ink); }
.nav-group-parent:hover::after,
.nav-group-parent.is-active::after { transform: scaleX(1); }
.nav-chev {
  display: inline-flex;
  color: currentColor;
  opacity: .72;
  transition: transform .18s ease;
}

.nav-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: -14px;
  min-width: 244px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 22px 40px -22px rgba(16,24,40,.32);
  z-index: 60;
  /* Kept rendered rather than display:none: a menu removed from the box tree is
     also removed from the accessibility tree, so a screen-reader user browsing
     the nav would never hear the three US services. Faded and click-through
     instead, revealed on hover or as soon as focus enters the group - so a
     keyboard user always sees the link they have tabbed to. */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  /* Only the slide is animated. Opacity is switched instantly, so the panel's
     visible state never depends on a transition running to completion. */
  transition: transform .14s ease;
}
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu,
.nav-group.is-open .nav-menu {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
/* The chevron flips while the panel is open, whichever way it was opened. */
.nav-group:hover .nav-chev,
.nav-group:focus-within .nav-chev,
.nav-group.is-open .nav-chev { transform: rotate(180deg); }

/* Escape must win over hover and focus-within, otherwise the panel it just
   closed would reopen the instant focus returned to its own button. */
.nav-group.is-force-closed .nav-menu {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}
/* A hairline bridge so the pointer can cross the 12px gap without closing it. */
.nav-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -13px;
  height: 13px;
}
.nav-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: .9rem;
  line-height: 1.3;
  color: var(--slate);
}
.nav-menu a::after { content: none; }
.nav-menu a:hover,
.nav-menu a:focus-visible { background: var(--mist); color: var(--ink); }
.nav-menu a.is-active { color: var(--ink); font-weight: 590; }
/* Twelve VAT jurisdictions in one column made a 459px tall panel that ran down
   the hero. Two columns keeps the whole list visible at a glance, in the shape
   of the live site's European VAT mega-menu. Phones fall back to one column
   because the mobile panel rule below is more specific. */
.nav-menu.is-cols {
  display: grid;
  /* Column-first, so the list reads down each column like the live site's
     European VAT menu rather than zig-zagging across the two. */
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0,1fr));
  grid-template-rows: repeat(6, auto);
  gap: 2px 6px;
  min-width: 424px;
}

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.header-phone {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 560;
  color: var(--ink);
  display: flex; align-items: center; gap: 7px;
}
.header-phone svg { color: var(--lime-deep); }

.menu-toggle { display: none; }

/* Phone and CTA move into the menu panel on small screens, so the bar itself
   stays logo + one action + one icon. */
.nav-panel-foot { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1150px 620px at 78% -12%, rgba(36,74,169,.55) 0%, rgba(11,23,51,0) 62%),
    radial-gradient(760px 460px at 8% 108%, rgba(131,181,64,.20) 0%, rgba(11,23,51,0) 64%),
    linear-gradient(168deg, #0B1733 0%, #0E1B3C 52%, #122045 100%);
  color: #fff;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  column-gap: 64px;
  row-gap: 0;
  align-items: center;
  /* Keep the shared .wrap gutter: the shorthand here used to zero it, which
     put the hero copy flush against the screen edge on every viewport. */
  padding: 80px var(--gutter) 88px;
}
/* Copy and credentials stack in the left column; the panel owns the right.
   Kept as three grid children so mobile can order them copy -> graphic ->
   credentials, putting the picture above the footnotes. */
.hero-copy { grid-column: 1; grid-row: 1; }
.hero-panel { grid-column: 2; grid-row: 1 / span 2; }
.hero-trust { grid-column: 1; grid-row: 2; }
.hero h1 { color: #fff; margin-bottom: 22px; }
.hero h1 em {
  font-style: normal;
  color: var(--lime);
  position: relative;
}
.hero-lede {
  font-size: 1.155rem;
  line-height: 1.62;
  color: #B9C6E2;
  max-width: 33em;
  margin-bottom: 34px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; align-items: center; }

/* Price line that sits above the hero buttons on priced pages.
   Hero is always dark, so this is deliberately light-on-dark. */
.hero-price {
  flex-basis: 100%;
  font-size: 1.05rem;
  color: #C8D5F0;
  letter-spacing: -.01em;
  margin-bottom: 2px;
}
.hero-price strong {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.025em;
  margin-right: 3px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.11);
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  color: #93A4C7;
  font-weight: 500;
}
.hero-trust svg { color: var(--lime); flex-shrink: 0; }

/* Hero side panel — "ledger card" */
.hero-panel {
  background: linear-gradient(170deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-lg);
  padding: 30px;
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.6);
}
.hero-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 20px;
}
.hero-panel-head strong {
  font-family: var(--font-display);
  font-size: .95rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: -.01em;
}
.live-dot {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lime);
}
.live-dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(131,181,64,.22);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

.ledger-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px dashed rgba(255,255,255,.10);
}
.ledger-row:last-child { border-bottom: 0; }
.ledger-row .k { font-size: .88rem; color: #9FB0D2; }
.ledger-row .v {
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 600; color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ledger-row .v.ok { color: var(--lime); }
.ledger-foot {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .78rem; color: #7D8FB3; line-height: 1.5;
}

/* Coverage graphic — replaces the old five-row ledger list in the hero.
   A real dotted world map (generated by build/make-worldmap.mjs) with only the
   jurisdictions we file in lit: the US in the hot accent, the UK in the home
   accent, the rest in royal. Reads as a picture first and needs one caption. */
.cov { margin: 4px 0 18px; }
.cov-map {
  display: block;
  width: 100%;
  height: auto;
  /* The map already carries its own faint land tone against the dark panel. */
  opacity: .98;
}
.cov-caption {
  margin: 0;
  font-size: .885rem;
  line-height: 1.55;
  color: #9FB0D2;
}
.cov-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  margin-bottom: 3px;
}

/* ---------- Sections ---------- */
/* Section rhythm. Was 92px top and bottom, which put 184px of white space
   between two adjacent sections and read as a gap rather than a beat. Sir:
   "gaps between sections are too much", so the scale is now 56/40: two
   adjacent bands sit 112px apart, and the separation comes from the mist/navy
   alternation rather than from empty height. Re-measure before raising these. */
.section { padding: 56px 0; }
.section-tight { padding: 40px 0; }
.section-mist { background: var(--mist); }
.section-mistblue { background: var(--mist-blue); }
.section-dark { background: var(--navy); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }

.section-head { max-width: 46em; margin-bottom: 30px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { font-size: 1.075rem; color: var(--slate); margin-bottom: 0; }
.section-dark .section-head p { color: #A9B8D6; }

/* ---------- Key facts rail ----------
   One block, four figures. The rail reads as part of the headline rather than a
   separate band: it breaks the bottom edge of the hero above it, and hairline
   dividers do the separating instead of four detached cards. */
.factrail {
  position: relative;
  z-index: 3;
  margin: 0 0 10px;
}
/* Only where the rail directly follows a dark hero. On EU country pages the
   switcher sits between the two, and a lifted rail would ride over it. */
.factrail.is-attached { margin-top: -54px; }
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.stat {
  background: var(--paper);
  padding: 24px 26px 26px;
}
.stat .n {
  font-family: var(--font-display);
  font-size: 1.9rem;
  /* 700 explicitly: 640 was written here but Instrument Sans has no face between
     600 and 700, so it always rendered Bold. No visual change, honest CSS. */
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--royal);
  line-height: 1;
  margin-bottom: 9px;
  font-variant-numeric: tabular-nums;
}
.stat .l {
  font-size: .715rem;
  font-weight: 600;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--slate);
  line-height: 1.45;
}

/* ---------- Service cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  display: flex;
  flex-direction: column;
}
.card:hover {
  border-color: #C7D3EE;
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.card-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--mist-blue);
  color: var(--royal);
  margin-bottom: 20px;
  border: 1px solid #E1E8F8;
}
.card h3 { font-size: 1.12rem; margin-bottom: 9px; }
.card p { font-size: .935rem; color: var(--slate); margin-bottom: 18px; line-height: 1.6; }
.card .card-link {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: .885rem;
  font-weight: 600;
  color: var(--royal);
  display: inline-flex; align-items: center; gap: 6px;
}
.card .card-link svg { transition: transform .18s ease; }
.card:hover .card-link svg { transform: translateX(3px); }

.card-accent { border-top: 3px solid var(--lime); }

/* ---------- Platform strip ---------- */
.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.platform {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .885rem;
  font-weight: 550;
  color: var(--slate);
  transition: border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.platform:hover { border-color: var(--royal); color: var(--royal); box-shadow: var(--shadow-sm); }
/* The country the visitor is already on. Marked, not hidden: removing the
   current pill makes the row shift and reads as a gap in coverage. */
.platform.is-current { border-color: var(--royal); color: var(--royal); background: #fff; box-shadow: inset 0 0 0 1px var(--royal); }
.platform.is-current .dot { background: var(--royal); }
.platform .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }

/* ---------- Process ---------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.step { position: relative; padding: 0 26px 0 0; }
.step:last-child { padding-right: 0; }
.step-n {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--royal);
  display: block;
  margin-bottom: 14px;
}
.step::before {
  content: "";
  position: absolute;
  top: 8px; left: 0; right: 26px;
  height: 1px;
  background: var(--line);
}
.step:last-child::before { right: 0; }
.step-n { position: relative; padding-top: 26px; }
.step-n::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(131,181,64,.16);
}
.step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { font-size: .915rem; color: var(--slate); line-height: 1.6; margin: 0; }

/* ---------- Split feature ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split-reverse .split-media { order: 2; }
.split-copy h2 { margin-bottom: 18px; }
.split-copy p { color: var(--slate); font-size: 1.02rem; }

.checklist { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 13px; }
.checklist li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .95rem;
  color: var(--ink);
  line-height: 1.55;
}
.checklist svg { flex-shrink: 0; margin-top: 2px; color: var(--lime-deep); }

/* Country coverage panel */
.coverage {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow);
}
.coverage-group { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.coverage-group:last-child { border-bottom: 0; padding-bottom: 0; }
.coverage-group:first-child { padding-top: 0; }
.coverage-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display);
  font-size: .9rem; font-weight: 600; color: var(--ink);
  margin-bottom: 9px;
}
.coverage-head .count {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--royal);
  background: var(--mist-blue);
  border-radius: 999px;
  padding: 2px 9px;
  font-weight: 600;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: .79rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--mist);
  color: var(--slate);
  border: 1px solid var(--line-soft);
  font-weight: 500;
}
.chip:hover { background: var(--mist-blue); color: var(--royal); border-color: #D8E2F7; }

/* ---------- Quote band ---------- */
.quote-band {
  background: linear-gradient(135deg, var(--royal-ink) 0%, var(--royal-deep) 55%, #2E56BB 100%);
  border-radius: var(--r-xl);
  padding: 52px 56px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.quote-band::after {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(131,181,64,.35), transparent 68%);
}
.quote-band h2 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 14px; }
.quote-band p { color: #C8D5F0; max-width: 44em; margin-bottom: 28px; }
.quote-band .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- CTA band (plain) ---------- */
.cta-band {
  background: var(--navy);
  color: #fff;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(700px 380px at 82% 20%, rgba(36,74,169,.5), transparent 68%);
}
.cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.cta-inner h2 { color: #fff; margin-bottom: 8px; font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.cta-inner p { color: #A9B8D6; margin: 0; max-width: 40em; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: #8FA0C2;
  padding: 72px 0 34px;
  font-size: .9rem;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand img { height: 28px; margin-bottom: 18px; aspect-ratio: 900 / 204; }
.footer-brand p { font-size: .875rem; line-height: 1.65; max-width: 26em; color: #8095BC; }
.footer-col h4 {
  color: #fff;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 600;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
/* The group is a <details> so it can collapse on a phone without hiding any
   link from the HTML. Above the mobile breakpoint the disclosure is inert:
   site.js opens it, and the summary is a plain heading you cannot click. */
.footer-col > summary {
  list-style: none;
  cursor: default;
  pointer-events: none;
}
.footer-col > summary::-webkit-details-marker { display: none; }
.footer-col > summary::marker { content: ''; }
.footer-col a { color: #8FA0C2; font-size: .885rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 18px 30px;
  align-items: center; justify-content: space-between;
  padding-top: 26px;
  font-size: .8rem;
  color: #6C7FA6;
}
.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-legal a { color: #6C7FA6; font-size: .8rem; }
.footer-legal a:hover { color: #fff; }

/* ---------- Footer refinement: brand, offices, single CTA ---------- */
.site-footer {
  padding: 64px 0 28px;
  background:
    radial-gradient(60% 90% at 88% 0%, rgba(131,181,64,.10) 0%, transparent 60%),
    linear-gradient(180deg, #0B1733 0%, #070F22 100%);
}
.footer-tagline {
  font-size: .895rem;
  line-height: 1.65;
  max-width: 25em;
  color: #8095BC;
  margin-bottom: 22px;
}
.footer-phone {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .93rem;
  letter-spacing: -.01em;
  color: #fff;
  text-decoration: none;
  margin-bottom: 18px;
}
.footer-phone:hover { color: #83B540; }
.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .9rem;
  font-weight: 500;
  color: #0B1733;
  background: #83B540;
  padding: 11px 18px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.footer-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(131,181,64,.65);
}
.footer-cta span { transition: transform .15s ease; }
.footer-cta:hover span { transform: translateX(3px); }

/* ---------- Offices: a proper band, not a row of loose text ----------
   Three columns separated by hairline rules, country-led, address on
   its own lines. The `fo-` prefix avoids the `.office` contact-card
   class, which previously forced a white pill and huge padding. */
.footer-offices {
  padding: 38px 0 34px;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-offices-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .675rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7385AB;
  margin-bottom: 22px;
}
.fo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.footer-office {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0 34px;
  border-left: 1px solid rgba(255,255,255,.09);
}
.footer-office:first-child { padding-left: 0; border-left: 0; }
.footer-office:last-child { padding-right: 0; }

.fo-country {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.01em;
  margin-bottom: 2px;
}
.fo-city {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .665rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7385AB;
  margin-top: 4px;
  margin-bottom: 11px;
}
.fo-address {
  font-style: normal;
  font-size: .845rem;
  line-height: 1.55;
  color: #7C8FB8;
  margin: 0;
}
/* Each line on its own row. Also covers the older `office-lines` markup
   so a stale hand-built page can never collapse the address again. */
.fo-address span,
.footer-offices address span {
  display: block;
}
.fo-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
  padding-top: 12px;
}
.fo-phone {
  font-family: 'JetBrains Mono', monospace;
  font-size: .795rem;
  color: #D3DEF3;
  text-decoration: none;
  width: fit-content;
  border-bottom: 1px solid rgba(211,222,243,.25);
  padding-bottom: 1px;
}
.fo-phone:hover { color: #fff; border-bottom-color: #fff; }

/* Stacked offices. The hairline moves from a left border to a top rule:
   stacked blocks with a left border read as three loose paragraphs hanging
   off a stray line, and the 16px inset wasted a column of space on a phone. */
@media (max-width: 900px) {
  .fo-grid { grid-template-columns: 1fr; gap: 0; }
  .footer-office {
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.09);
  }
  .footer-office:first-child { padding: 0; border-top: 0; }
  .footer-office:last-child { padding-right: 0; }
  /* Country and city share one line: the mono city label was a whole row of
     its own on a phone, which is what made three addresses cost 658px. */
  .fo-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
  .fo-city { margin: 0; }
  .fo-address { margin-top: 6px; }
  .fo-meta { padding-top: 8px; }
}

.footer-mark {
  font-family: 'JetBrains Mono', monospace;
  font-size: .775rem;
  letter-spacing: .015em;
  /* Was #61729A at 3.7:1 on the #0B1733 footer - below the 4.5:1 minimum for
     small text. #8593B0 measures 5.7:1 and still reads as a muted mark rather
     than competing with the footer links. */
  color: #8593B0;
}

@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .footer-offices { grid-template-columns: 1fr; gap: 16px; }
  .site-footer { padding: 48px 0 24px; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: linear-gradient(165deg, var(--navy) 0%, #13224A 100%);
  color: #fff;
  padding: 48px 0 50px;
  position: relative;
  overflow: hidden;
}
/* The key-facts rail rides up over this edge, so the hero keeps a deeper base
   to clear it. One rule covers every breakpoint the base padding sets. */
.page-hero.has-rail { padding-bottom: 94px; }
.hero.has-rail .hero-inner { padding-bottom: 94px; }
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 80% at 30% 0%, #000, transparent 75%);
}
.page-hero .wrap { position: relative; }
.page-hero h1 { color: #fff; font-size: clamp(2.1rem, 4vw, 3.3rem); margin-bottom: 18px; }
.page-hero p { color: #B3C1DD; font-size: 1.075rem; max-width: 44em; margin-bottom: 0; }
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .8rem; color: #7F92B8; margin-bottom: 20px;
}
.crumbs a { color: #9FB0D2; }
.crumbs a:hover { color: #fff; }
.crumbs .sep { color: #4A5C82; }

/* ---------- Contact layout ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.contact-side h2 { margin-bottom: 16px; }
.contact-side > p { color: var(--slate); }

.contact-methods { display: grid; gap: 14px; margin: 32px 0; }
.method {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.method:hover { border-color: #C7D3EE; box-shadow: var(--shadow-sm); }
.method-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--mist-blue); color: var(--royal);
  border: 1px solid #E1E8F8;
}
.method strong {
  display: block;
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--ink);
  margin-bottom: 2px;
  font-weight: 600;
}
.method span, .method a { font-size: .9rem; color: var(--slate); }
.method a:hover { color: var(--royal); }

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.form-card-head {
  padding: 28px 32px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--mist-blue), var(--paper));
}
.form-card-head h3 { margin-bottom: 6px; font-size: 1.25rem; }
.form-card-head p { margin: 0; font-size: .9rem; color: var(--slate); }
.form-embed {
  padding: 6px;
  background: var(--paper);
}
.form-embed iframe {
  width: 100%;
  height: 560px;
  border: 0;
  border-radius: 12px;
  display: block;
}
.form-foot {
  padding: 18px 32px 24px;
  border-top: 1px solid var(--line-soft);
  font-size: .8rem;
  color: var(--slate-light);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.form-foot svg { flex-shrink: 0; margin-top: 2px; color: var(--lime-deep); }

/* ---------- Office / map ---------- */
.office {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.office-details { padding: 40px; }
.office-details h3 { margin-bottom: 6px; }
.office-details .otag {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 18px;
  display: block;
}
.office-details address {
  font-style: normal;
  color: var(--slate);
  line-height: 1.75;
  margin-bottom: 22px;
}
.hours { display: grid; gap: 7px; font-size: .9rem; }
.hours div { display: flex; justify-content: space-between; gap: 20px; color: var(--slate); }
.hours div strong { color: var(--ink); font-weight: 550; }
.office-map { min-height: 340px; background: var(--mist); }
.office-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.03rem;
  font-weight: 580;
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--royal);
  transition: transform .2s ease;
  line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 14px 0 0; color: var(--slate); font-size: .95rem; max-width: 62em; }

/* ---------- Pros / cons table ---------- */
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  background: var(--paper);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.compare th, .compare td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.compare thead th {
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td:first-child { font-weight: 550; color: var(--ink); width: 34%; }
.compare td.yes { color: var(--lime-deep); }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0 } .mt-2 { margin-top: 18px } .mt-3 { margin-top: 28px } .mt-4 { margin-top: 40px }
.mb-0 { margin-bottom: 0 } .mb-2 { margin-bottom: 18px } .mb-3 { margin-bottom: 28px }
.text-center { text-align: center }
.lede { font-size: 1.09rem; color: var(--slate); }
.nowrap { white-space: nowrap }

/* ---------- Responsive ---------- */
/* Eight items now sit between the logo and the CTA (Sales tax joined 12 Nov).
   Measure first, then yield in order of least value: the phone number at 1240,
   then tighter nav spacing at 1120, then the whole nav becomes the panel. Measured
   with the eighth item in place: roughly 820px of the 1033px row at the 1081px edge. */
@media (max-width: 1240px) {
  .header-phone { display: none; }
  .nav { gap: 22px; }
}
@media (max-width: 1120px) {
  .nav { gap: 18px; margin-left: 4px; }
  .nav a { font-size: .895rem; }
  .header-inner { gap: 20px; }
}
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; row-gap: 40px; padding: 64px var(--gutter) 72px; }
  .hero-copy, .hero-panel, .hero-trust { grid-column: 1; grid-row: auto; }
  .hero-cta { margin-bottom: 0; }
  .hero-trust { padding-top: 26px; }
  .hero-panel { max-width: 520px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-reverse .split-media { order: 0; }
  .process { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .office { grid-template-columns: 1fr; }
  .nav { display: none; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 40px; height: 40px; padding: 0;
    background: #fff; border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink); cursor: pointer; margin-left: 0;
    transition: background .15s ease, border-color .15s ease;
  }
  .menu-toggle:hover { background: var(--mist); }
  .menu-toggle svg { display: block; }
  .menu-toggle .mi-close { display: none; }
  .menu-toggle[aria-expanded="true"] .mi-open { display: none; }
  .menu-toggle[aria-expanded="true"] .mi-close { display: block; }
  .menu-toggle[aria-expanded="true"] { background: var(--mist); }
  .header-actions { margin-left: auto; }
  .header-phone { display: none; }
}

/* Four figures to two, still as one enclosed block. */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factrail.is-attached { margin-top: -44px; }
  .page-hero.has-rail { padding-bottom: 86px; }
  .hero.has-rail .hero-inner { padding-bottom: 86px; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .section { padding: 40px 0; }
  .section-tight { padding: 30px 0; }
  .page-hero { padding: 36px 0 38px; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  /* Two columns, not four stacked rows: the rail stays compact under the hero. */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factrail { margin-bottom: 4px; }
  .factrail.is-attached { margin-top: -36px; }
  .page-hero.has-rail { padding-bottom: 74px; }
  .hero.has-rail .hero-inner { padding-bottom: 74px; }
  .stat { padding: 18px 16px 20px; }
  .stat .n { font-size: 1.5rem; margin-bottom: 7px; }
  .stat .l { font-size: .645rem; letter-spacing: .05em; }
  .process { grid-template-columns: 1fr; }
  .quote-band { padding: 36px 26px; }
  /* One full-width primary action; the secondary drops to a quiet inline
     link. Two stacked pills pushed the hero graphic a full screen down. */
  .hero-cta { display: grid; gap: 6px; }
  .hero-cta .btn { width: 100%; }
  .hero-cta .btn-on-dark {
    background: none;
    border: 0;
    padding: 12px 0;
    justify-content: flex-start;
    color: #C8D5F0;
    font-size: .95rem;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  /* Sir: remove the hero lede from mobile. The h1 and the primary action carry
     the hero on a phone; the paragraph only pushed the coverage graphic down.
     The h1 keeps a real bottom margin — zeroing it with the lede left the
     button flush against the headline box (measured gap: 0px). */
  .hero h1 { font-size: 2.25rem; margin-bottom: 28px; }
  /* Hero breathing room on a phone: 64px of top padding plus the grid row gap
     left the eyebrow 118px below the header, which read as a hole above the
     headline. Tightened with the rest of the vertical scale. */
  .hero-inner { padding: 40px var(--gutter) 48px; row-gap: 28px; }
  .hero-lede { display: none; }
  .hero-trust { gap: 8px 18px; }
  .hero-trust span { font-size: .82rem; }
  .footer-top { grid-template-columns: 1fr; gap: 0; padding-bottom: 24px; }
  /* Collapsed groups: three headings and a chevron instead of 21 stacked
     links. Every link is still in the HTML, so nothing is hidden from a
     crawler; site.js leaves them open above 680px. */
  .footer-col {
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .footer-col > summary {
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    min-height: 46px;
    box-sizing: border-box;
  }
  .footer-col > summary h4 { margin: 0; }
  .footer-col > summary::after {
    content: '';
    width: 9px; height: 9px;
    border-right: 2px solid #7385AB;
    border-bottom: 2px solid #7385AB;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
    flex: 0 0 auto;
  }
  .footer-col[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .footer-col > ul { padding-bottom: 6px; }
  .footer-col ul { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .footer-col h4 { margin-bottom: 8px; }
  .footer-brand p { margin-bottom: 16px; }
  .footer-brand img { margin-bottom: 12px; }
  .footer-phone { margin-bottom: 14px; }
  .site-footer { padding: 40px 0 22px; }
  .footer-offices { padding: 26px 0 24px; }
  .footer-offices-label { margin-bottom: 14px; }
  .footer-bottom { padding-top: 20px; gap: 10px 22px; }
  /* Country and its phone share the top line, address underneath. Stacking the
     phone under a three-line address added a row to each of the three offices
     for no benefit: the number belongs with the country, not the street. */
  .footer-office {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: start;
  }
  .fo-head { grid-column: 1; grid-row: 1; }
  .fo-meta { grid-column: 2; grid-row: 1; margin: 0; padding: 0; align-self: center; }
  .fo-phone { font-size: .75rem; border-bottom: 0; padding-bottom: 0; }
  .fo-address { grid-column: 1 / -1; grid-row: 2; margin-top: 5px; }
  .form-embed iframe { height: 500px; }
  .office-details { padding: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- Prototype approval banner (generated pages) ---- */

/* ============================================================
   Pricing block + price-led CTA
   Replaces the "request a quote" pattern. A published figure
   converts better than a form, and matches how we actually sell.
   ============================================================ */
.price-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 22px);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px -12px rgba(16,24,40,.12);
}
.price-main {
  padding: 44px 40px;
  background: linear-gradient(150deg, #142A63 0%, #1B3A87 55%, #244AA9 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.price-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #A9BEF0;
  margin-bottom: 10px;
}
.price-figure {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: 6px;
}
.price-period {
  font-size: .95rem;
  font-weight: 450;
  letter-spacing: -.01em;
  color: #C6D2E8;
}
.price-secondary {
  font-size: .95rem;
  color: #D6E0F5;
  margin-top: 14px;
  line-height: 1.5;
}
.price-secondary strong { color: #fff; font-weight: 600; }
.price-basis {
  font-size: .875rem;
  color: #A9BEF0;
  margin: 14px 0 0;
  line-height: 1.5;
}
.price-main .btn {
  margin-top: 26px;
  align-self: flex-start;
}
.price-includes {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.price-includes h3 {
  font-size: 1rem;
  letter-spacing: -.01em;
  margin-bottom: 4px;
  color: var(--navy);
}
.price-includes .checklist { margin-top: 16px; gap: 11px; }
.price-includes .checklist li { font-size: .915rem; color: var(--slate); }
.price-note {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--slate);
}

/* Price-led CTA band: copy left, action right. Deliberately not a centred
   wall - it reads as the next step in a transaction. */
.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding: 48px 46px;
  border-radius: var(--r-lg, 22px);
  background: linear-gradient(135deg, #0B1733 0%, #142A63 60%, #1B3A87 100%);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 120% at 92% 10%, rgba(131,181,64,.20) 0%, transparent 62%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-copy .eyebrow { color: #A9BEF0; margin-bottom: 14px; }
.cta-copy h2 {
  color: #fff;
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  margin-bottom: 12px;
  max-width: 26em;
}
.cta-copy p {
  color: #C8D5F0;
  margin: 0;
  font-size: .95rem;
  max-width: 42em;
  line-height: 1.6;
}
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-width: 236px;
}

@media (max-width: 900px) {
  .price-card { grid-template-columns: 1fr; }
  .price-main, .price-includes { padding: 34px 26px; }
  .cta-band { grid-template-columns: 1fr; gap: 26px; padding: 34px 26px; }
  .cta-actions { min-width: 0; }
} 

/* ============================================================
   Lead-form modal
   Pricing CTAs open the Zoho form in place instead of bouncing
   the visitor to another page. Hidden by default; [hidden] wins
   so the dialog never flashes before JS runs.
   ============================================================ */
.lfm {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6,12,28,.72);
  backdrop-filter: blur(6px);
  animation: lfm-fade .16s ease;
}
.lfm[hidden] { display: none !important; }

@keyframes lfm-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lfm-rise {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

.lfm-panel {
  width: min(680px, 100%);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--paper, #fff);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 32px 80px -20px rgba(6,12,28,.55);
  animation: lfm-rise .2s ease;
  outline: none;
}
.lfm-head {
  /* Title centred on the panel's own axis: two fixed 36px side tracks (the
     close button's width) make the middle track's centre the true centre,
     rather than the leftover space beside the close button. */
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 12px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--line-soft, #EEF1F6);
  background: linear-gradient(160deg, #F7F9FD 0%, #FFFFFF 100%);
}
.lfm-head h2 {
  grid-column: 2;
  justify-self: center;
  margin: 0;
  font-family: var(--font-display);
  /* 600, not the global 620: Instrument Sans loads discrete weights, and the
     browser rounds 620 UP to the 700 Bold face (620/640/700 all measure the
     same width), which is why this title read as chunky rather than brand-crisp. */
  font-weight: 600;
  font-size: 1.32rem;
  line-height: 1.25;
  /* Small display size: the global negative tracking collapses the word gaps,
     so drop it and add explicit word spacing instead. */
  letter-spacing: -.005em;
  word-spacing: .1em;
  text-align: center;
  text-wrap: balance;
  color: var(--ink, #101828);
}
.lfm-close {
  flex-shrink: 0;
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--line, #E4E7EC);
  background: #fff;
  color: var(--slate, #475467);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lfm-close:hover {
  background: var(--ink, #101828);
  border-color: var(--ink, #101828);
  color: #fff;
}
.lfm-body {
  /* Basis on content, so the panel is as tall as the form; still shrinks and
     scrolls if a step outgrows the viewport cap on .lfm-panel. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}
/* The iframe drives the height, not the panel: a fixed 540px left the leftover
   height showing as blank white under the form (Sir, 13 Nov). Zoho posts the
   real height per step and site.js applies it, so the panel simply ends where
   the form ends. If a step is taller than the viewport, this scrolls. */
.lfm-body iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

@media (max-width: 680px) {
  .lfm { padding: 0; align-items: flex-end; }
  .lfm-panel {
    max-height: 94vh;
    max-height: 94dvh;
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .lfm-head { padding: 18px 20px; }
  .lfm-head h2 { font-size: 1.15rem; }
  .lfm-body iframe { min-height: 0; }
}

/* Mobile menu: the header nav becomes a dropdown panel. */
@media (max-width: 1080px) {
  .site-header .nav.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 10px 24px 18px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 32px -18px rgba(16,24,40,.24);
    z-index: 50;
  }
  .site-header .nav.is-open > a,
  .site-header .nav.is-open > .nav-group > .nav-group-parent {
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1rem;
  }
  .site-header .nav.is-open > a:last-of-type { border-bottom: 0; }
  .site-header .nav.is-open a::after,
  .site-header .nav.is-open .nav-group-parent::after { display: none; }

  /* In the panel the group is a disclosure: the button is a full-width row with
     the chevron on the right, and the children sit indented beneath it. Without
     script the children stay visible (the rules below), so nothing is ever
     unreachable; with script the group starts closed and the button opens it. */
  .site-header .nav.is-open .nav-group { display: block; }
  .site-header .nav.is-open .nav-group-parent {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
  }
  .site-header .nav.is-open .nav-chev { display: inline-flex; }
  .site-header .nav.is-open .nav-menu {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 8px 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  /* Progressive enhancement: only a scripted page may hide a collapsed group. */
  .js .site-header .nav.is-open .nav-group:not(.is-open) .nav-menu { display: none; }
  .site-header .nav.is-open .nav-menu::before { content: none; }
  .site-header .nav.is-open .nav-menu a {
    padding: 10px 0;
    font-size: .95rem;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
  }
  .site-header .nav.is-open .nav-menu a:last-of-type { border-bottom: 0; }
  .site-header .nav.is-open .nav-group > .nav-group-parent { border-bottom: 1px solid var(--line-soft); }

  /* Contact routes that left the bar live here instead. */
  .site-header .nav.is-open .nav-panel-foot {
    display: grid;
    gap: 14px;
    padding-top: 18px;
    margin-top: 8px;
    border-top: 1px solid var(--line);
  }
  .nav-panel-cta { width: 100%; justify-content: center; }
  .nav-phone {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display);
    font-size: .95rem; font-weight: 560;
    color: var(--ink);
    padding: 4px 0;
  }
}

/* ============================================================
   Plan cards — used where several published prices sit side by
   side (homepage, hub pages). Distinct from .price-card, which
   is the single-service detail block.
   ============================================================ */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.plan:hover {
  border-color: #C9D4E8;
  box-shadow: 0 14px 34px -18px rgba(16,24,40,.22);
  transform: translateY(-2px);
}
.plan.is-featured {
  border-color: var(--royal);
  box-shadow: 0 16px 38px -18px rgba(36,74,169,.3);
  position: relative;
}
.plan-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: .655rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 10px;
  display: inline-block;
}
.plan.is-featured .plan-tag {
  background: var(--royal);
  color: #fff;
  padding: 3px 8px;
  border-radius: 5px;
  align-self: flex-start;
}
.plan h3 {
  font-size: 1.02rem;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: 4px;
}
.plan-for {
  font-size: .8rem;
  color: var(--slate);
  margin-bottom: 16px;
  line-height: 1.45;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.plan-amount {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1;
}
.plan-per {
  font-size: .785rem;
  color: var(--slate);
}
.plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 8px;
  flex: 1;
}
.plan ul li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: .845rem;
  line-height: 1.45;
  color: var(--slate);
}
.plan ul li svg { flex-shrink: 0; margin-top: 2px; color: var(--lime-deep); }
.plan .btn { width: 100%; justify-content: center; }
.plan-note {
  margin-top: 20px;
  font-size: .82rem;
  color: var(--slate);
  line-height: 1.6;
}

/* ---------- Small-phone header fit ----------
   At <=640px the brand, header CTA and menu button together exceeded the
   gutter width and pushed the button 31px past the viewport, giving every
   page a horizontal scrollbar. Tighten the gaps and controls so the row fits. */
@media (max-width: 640px) {
  .header-inner { gap: 12px; }
  .header-actions { margin-left: auto; }
  .header-actions .btn {
    padding: 9px 14px;
    font-size: .82rem;
    white-space: nowrap;
  }
  .header-actions { gap: 10px; }
  .menu-toggle { padding: 0; }
  .brand img { max-width: 118px; height: auto; }
}
@media (max-width: 400px) {
  .header-actions .btn { padding: 8px 11px; font-size: .78rem; }
  .menu-toggle { width: 36px; height: 36px; }
  .brand img { max-width: 104px; }
}

/* ============================================================
   Responsive hardening - mobile audit, 11 Nov 2026.
   Appended, not woven in: the rules above are the approved design
   and stay untouched. These only fix behaviour at small widths.
   ============================================================ */

/* 1. The open mobile menu must never exceed the screen. It previously had no
   max-height, so on a 568px-tall phone the panel ran 78px past the fold and
   its footer (the CTA and the phone number) could not be reached: the header
   is sticky, so scrolling moved the page rather than the panel. */
@media (max-width: 1080px) {
  .site-header .nav.is-open {
    max-height: calc(100vh - var(--sth-h, 77px));
    max-height: calc(100dvh - var(--sth-h, 77px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

/* 2. Touch targets. Visual weight stays as approved; only the hit area grows
   toward the 44px a finger actually covers. */
@media (max-width: 1080px) {
  .brand { padding: 10px 0; }            /* 24px logo image -> 44px target */
  .menu-toggle { width: 40px; height: 40px; }
  .chip { padding: 9px 13px; }           /* 31px -> 37px */
  .crumbs a { display: inline-block; padding: 6px 0; }
  .footer-col a { display: inline-block; padding: 7px 0; }
  .footer-legal a { display: inline-block; padding: 7px 0; }
  .footer-phone, .fo-phone, .nav-phone { padding: 8px 0; }
}

/* 3. Narrow phones (320-380px). At 320 the bar ran to the very edge - the menu
   button sat at x=284..320 with no right gutter at all. Tighten the gutter and
   the controls so logo, primary button and menu button all keep their margin. */
@media (max-width: 380px) {
  :root { --gutter: 20px; }
  .header-inner { gap: 8px; }
  .header-actions { gap: 8px; }
  .header-actions .btn { padding: 8px 12px; font-size: .76rem; }
  .menu-toggle { width: 38px; height: 38px; }
  .brand img { max-width: 96px; }
}
/* ---------- Google reviews ----------
   Social proof before the price table. The score card carries the rating at a
   size that survives a phone screen: 30px stars, a 2.6rem figure. Two quotes
   only - the listing has four, but two of them describe services we no longer
   sell, so they are deliberately not reproduced here. Everything shown is
   verbatim from the Google Business Profile. */
.reviews {
  display: grid;
  grid-template-columns: minmax(250px, 330px) 1fr;
  gap: 24px;
  align-items: start;
}
.reviews-score {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.rating-stars {
  display: flex;
  justify-content: center;
  gap: 5px;
  color: #FBBC04;
  margin-bottom: 14px;
}
.rating-stars svg { width: 30px; height: 30px; display: block; }
.rating-figure {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.rating-figure span {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--slate-light);
  margin-left: 2px;
}
.rating-meta {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--slate);
  margin: 10px 0 20px;
}
.rating-meta strong { color: var(--ink); font-weight: 600; }
.reviews-score .btn { width: 100%; justify-content: center; }

.review-list { display: grid; gap: 18px; }
.review {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px 26px;
  margin: 0;
  box-shadow: var(--shadow-sm);
}
.review-stars { display: flex; gap: 3px; color: #FBBC04; margin-bottom: 12px; }
.review-stars svg { width: 15px; height: 15px; display: block; }
.review blockquote {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
}
.review figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .845rem;
  color: var(--slate-light);
}
.review figcaption cite {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}
.review figcaption time { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .reviews { grid-template-columns: 1fr; }
  .reviews-score { text-align: center; }
  .review-list { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .rating-stars svg { width: 26px; height: 26px; }
  .rating-figure { font-size: 2.2rem; }
  .review { padding: 20px 20px; }
}

/* ---------- Price rows (scannable pricing inside a card) ----------
   Sir, 12 Nov 2026: "how someone meant to read these and understand anything?"
   Prices had been written into sentences, so a country had to be found by
   reading. This presents the same facts as label/value rows: the eye lands on
   the figure and reads the scope to its left. Used by the region cards on
   /uk-company-accounting/ and /ecommerce-accountants/. */
.price-rows {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}
.price-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .875rem;
  line-height: 1.45;
  color: var(--slate);
}
.price-rows li > span { min-width: 0; }
.price-rows li > b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
  white-space: nowrap;
  flex: 0 0 auto;
}
/* The lead row carries the registration fee, which is one-off not yearly, so
   it is separated rather than sitting in the same rhythm as the annual rows. */
.price-rows li.price-rows-lead { padding-top: 11px; }
.price-rows li.price-rows-lead > b { color: var(--royal); }

/* ---------- Mobile header alignment ----------
   Sir, 12 Nov 2026: "align mobile header properly".
   The row mixed control heights: the logo sat in a 44px padded box, the header
   CTA was roughly 31px tall, and the menu button was 40px. Three centres, so
   nothing lined up on a phone. One control height is now shared by the CTA and
   the menu button, the logo is optically centred against them, and the sticky
   header height is set here rather than left at the desktop 76px. site.js
   measures the real height into --sth-h, so the open menu clamp follows. */
@media (max-width: 1080px) {
  :root { --control-h: 40px; }
  .header-inner { height: 64px; gap: 12px; align-items: center; }
  .brand { padding: 0; }
  .brand img { height: 26px; max-width: 118px; width: auto; }
  .header-actions { margin-left: auto; gap: 10px; }
  .header-actions .btn {
    height: var(--control-h);
    padding: 0 16px;
    font-size: .85rem;
    white-space: nowrap;
  }
  .menu-toggle { width: var(--control-h); height: var(--control-h); }
}
@media (max-width: 400px) {
  .header-inner { gap: 8px; height: 60px; }
  .brand img { height: 24px; max-width: 104px; }
  .header-actions .btn { padding: 0 12px; font-size: .8rem; }
}

/* ---------- Long hero lede on phones ----------
   Sir, 12 Nov 2026: the inner-page lede is a wall of text on a phone and pushes
   the actual page content below the fold, so it is removed at <=680px. The H1
   and the hero actions carry the page on a small screen. Desktop is untouched.
   To reverse, delete this block: nothing else depends on it. */
@media (max-width: 680px) {
  .page-hero > .wrap > p { display: none; }
}

/* ---------- Card grids: content height, not stretched height ----------
   Sir, 12 Nov 2026: "so much empty spaces, solve these blocks properly site wise".
   Every card grid stretched its cards to the tallest sibling, and .card-link is
   pinned with margin-top:auto, so a short card in a tall row (the United States
   card beside the four-row European Union card) grew a 150px void above its own
   link. The void was structural, not copy: it appeared wherever a card's content
   was shorter than its neighbour's.

   align-items:start ends it. A card is now as tall as its own content, and the
   link sits directly beneath it. Cards with similar content still line up, which
   is the only place equal heights were buying anything; cards with genuinely
   different content stop pretending to match.

   Scoped to the card grids only: this is 620 cards across 133 grids, so it is
   deliberately a grid-level rule and not a per-card patch. Non-grid cards are
   untouched, and .card keeps its flex column so margin-top:auto still does its
   normal job inside a single card. */
.grid-2,
.grid-3,
.grid-4 { align-items: start; }

/* A price-rows list is the last block before the link, so its own bottom margin
   was adding to the gap. Inside a card the list closes up to the link. */
.card > .price-rows { margin-bottom: 14px; }
.card > .price-rows:last-child { margin-bottom: 0; }


/* ---- 3. v2 layer ---- */

/* ==========================================================================
   Sterlinx v2 — structural redesign on the approved Sterlinx identity
   --------------------------------------------------------------------------
   Brand is unchanged: the mark and the two logo colours define everything here.
   Royal  #244AA9  ·  Lime  #83B540  ·  Navy  #0B1733  ·  Instrument Sans.

   This file is loaded after prototype.css and supplies NEW components under
   v2-* class names. The v1 components are not reused for page structure, so
   nothing here is "the old layout in a new colour". prototype.css is present
   only for the shared shell (header, nav, footer, modal, buttons) and is
   overridden where it would break the brand.
   ========================================================================== */

:root {
  --royal: #244AA9;
  --royal-deep: #1B3A87;
  --royal-ink: #142A63;
  --lime: #83B540;
  --lime-deep: #6EA922;
  --lime-soft: #F3F8E9;
  --navy: #0B1733;
  --navy-soft: #12203F;
  --ink: #101828;
  --slate: #475467;
  --slate-2: #5A6779;
  --line: #E4E7EC;
  --line-2: #D3D8E2;
  --mist: #F7F8FA;
  --mist-blue: #F2F5FC;
  --paper: #FFFFFF;
  --font-display: "Instrument Sans", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --wrap: 1200px;
  --gutter: 28px;
  --shadow-card: 0 18px 40px -22px rgba(16,24,40,.28), 0 2px 6px -2px rgba(16,24,40,.06);
  --shadow-float: 0 40px 80px -32px rgba(6,14,36,.55), 0 8px 20px -8px rgba(6,14,36,.28);
}

html { scroll-padding-top: 96px; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
}
h1, h2, h3, h4, .v2-display { font-family: var(--font-display); }
a { color: var(--royal); }
a:hover { color: var(--royal-deep); }

/* --- shell ---------------------------------------------------------------- */
.site-header {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .nav a.is-active,
.site-header .nav a[aria-current="page"] { color: var(--royal); }
.site-header .nav a.is-active::after,
.site-header .nav a[aria-current="page"]::after { background: var(--lime); }
.btn-primary { background: var(--royal); border-color: var(--royal); }
.btn-primary:hover { background: var(--royal-deep); border-color: var(--royal-deep); }
.btn-lime { background: var(--lime); border-color: var(--lime); color: var(--royal-ink); }
.btn-lime:hover { background: var(--lime-deep); border-color: var(--lime-deep); color: #fff; }
.eyebrow { color: var(--royal); }
.eyebrow.on-dark { color: #B9CBEF; }
.btn-on-dark { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.24); }
.btn-on-dark:hover { background: rgba(255,255,255,.16); color: #fff; }

/* --- hero ----------------------------------------------------------------- */
.v2-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 420px at 82% -30%, rgba(131,181,64,.20) 0%, rgba(11,23,51,0) 62%),
    radial-gradient(620px 400px at 4% 120%, rgba(36,74,169,.55) 0%, rgba(11,23,51,0) 60%),
    linear-gradient(168deg, #0A1530 0%, #101F42 46%, #142A63 100%);
  color: #fff;
  padding: 26px 0 96px;
}
.v2-hero::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--lime) 0%, var(--lime) 22%, var(--royal) 22%, var(--royal) 100%);
}
.v2-hero-inner { position: relative; z-index: 1; }
.v2-hero .crumbs, .v2-hero .crumbs a, .v2-hero .crumbs span { color: rgba(255,255,255,.62); }
.v2-hero .crumbs a:hover { color: #fff; }
.v2-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 56px;
  align-items: start;
  margin-top: 26px;
}
.v2-hero h1 {
  color: #fff;
  font-size: clamp(2.15rem, 4.1vw, 3.35rem);
  letter-spacing: -.035em;
  line-height: 1.06;
  margin: 14px 0 18px;
  text-wrap: balance;
}
.v2-hero .v2-lede {
  color: #C8D4EA;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.62;
  max-width: 34em;
  margin: 0;
}
.v2-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.v2-hero-note {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .82rem; color: #AEBEDC;
}
.v2-hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.v2-hero-note svg { color: var(--lime); flex: none; }

/* service sheet: the hero's right-hand card, built from real price data */
.v2-sheet {
  background: #fff;
  color: var(--ink);
  border-radius: 16px;
  padding: 26px 26px 24px;
  box-shadow: var(--shadow-float);
  border-top: 4px solid var(--lime);
}
.v2-sheet-kicker {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono);
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 14px;
}
.v2-sheet-kicker span:last-child { color: var(--slate-2); letter-spacing: .1em; }
.v2-sheet-figure {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 2.6vw, 2.35rem);
  letter-spacing: -.035em; line-height: 1;
  color: var(--ink);
}
/* A from-figure is a floor, not the fee. The qualifier sits directly above the
   amount so the number is never read on its own (Sir, 13 Nov). */
.v2-sheet-from {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate-2);
  margin-bottom: 7px;
}
.v2-sheet-figure small { font-size: .82rem; font-weight: 500; color: var(--slate-2); letter-spacing: 0; }
.v2-sheet-then { font-size: .84rem; color: var(--slate); margin: 8px 0 0; }
.v2-sheet-then b { color: var(--ink); }
.v2-sheet-list {
  list-style: none; margin: 18px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: 9px;
}
.v2-sheet-list li {
  display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 10px;
  font-size: .86rem; line-height: 1.45; color: var(--slate);
}
.v2-sheet-list svg { color: var(--lime-deep); margin-top: 2px; }
.v2-sheet .btn { width: 100%; margin-top: 18px; justify-content: center; }
.v2-sheet-fine { font-size: .72rem; color: var(--slate-2); margin: 10px 0 0; text-align: center; }

/* fact rail, overlapping the hero */
.v2-factstrip { position: relative; z-index: 2; margin-top: -52px; }
.v2-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.v2-fact { padding: 22px 24px; border-left: 1px solid var(--line); }
.v2-fact:first-child { border-left: 0; }
.v2-fact .n {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.75rem; line-height: 1.1; letter-spacing: -.03em;
  color: var(--royal);
}
.v2-fact .l {
  margin-top: 5px;
  font-size: .72rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
  color: var(--slate-2); line-height: 1.4;
}

/* --- numbered editorial blocks -------------------------------------------- */
.v2-block { padding: 76px 0; border-top: 1px solid var(--line); }
.v2-block.is-mist { background: var(--mist); }
.v2-block.is-blue { background: var(--mist-blue); }
.v2-block.is-navy { background: var(--navy); border-top: 0; color: #fff; }
.v2-block-grid {
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}
.v2-block-rail { position: sticky; top: 104px; }

/* Two further block rhythms so a page is not the same 296/1fr split nine times:
   `is-flip` puts the numbered rail on the right, `is-band` lifts the heading into
   a full-width masthead above the tiles. */
.v2-block-grid.is-flip { grid-template-columns: minmax(0,1fr) 296px; }
.v2-block-grid.is-flip > .v2-block-rail { order: 2; }
.v2-block-grid.is-band { grid-template-columns: minmax(0,1fr); gap: 30px; }
.v2-block-grid.is-band .v2-block-rail {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: 18px 56px; align-items: end; position: static;
}
.v2-block-grid.is-band .v2-num { grid-column: 1 / -1; }
.v2-block-grid.is-band .v2-block-rail h2 { margin-top: 0; max-width: 24ch; }
.v2-block-grid.is-band .v2-block-lede { margin: 0; }
.v2-block-grid.is-band .v2-tiles { grid-template-columns: repeat(3, minmax(0,1fr)); }
.v2-block-grid.is-band .v2-tiles.is-one { grid-template-columns: minmax(0,1fr); }
.v2-num {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--royal);
}
.v2-num::after { content: ""; width: 34px; height: 2px; background: var(--lime); }
.v2-block-rail h2 {
  margin: 14px 0 0;
  font-size: clamp(1.45rem, 2.1vw, 1.9rem);
  line-height: 1.14; letter-spacing: -.028em;
  text-wrap: balance;
}
.v2-block.is-navy .v2-block-rail h2 { color: #fff; }
.v2-block.is-navy .v2-num { color: #B9CBEF; }
.v2-block-lede {
  color: var(--slate); font-size: .97rem; line-height: 1.62;
  margin: 16px 0 0;
}
.v2-block.is-navy .v2-block-lede { color: #C2CFE7; }

/* feature tiles */
.v2-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.v2-block.is-mist .v2-tiles { background: var(--line-2); }
.v2-tile { background: #fff; padding: 24px 24px 22px; }
.v2-tile-idx {
  display: block;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em;
  color: var(--royal); margin-bottom: 10px;
}
.v2-tile h3 { font-size: 1.01rem; letter-spacing: -.015em; margin: 0 0 8px; color: var(--ink); }
.v2-tile p { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--slate); }

/* single-column variant for long-form bullet sets */
.v2-tiles.is-one { grid-template-columns: minmax(0,1fr); }

/* checklist panel */
.v2-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime);
  border-radius: 0 14px 14px 0;
  padding: 28px 32px;
}
.v2-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.v2-checklist.is-two { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 36px; }
.v2-checklist li {
  display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 12px;
  font-size: .93rem; line-height: 1.55; color: var(--slate);
}
.v2-checklist svg { color: var(--lime-deep); margin-top: 3px; }

/* price rows inside a block */
.v2-tablerows { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.v2-tablerows caption {
  caption-side: top; text-align: left;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--slate-2); padding: 0 0 12px;
}
.v2-tablerows th, .v2-tablerows td {
  text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.v2-tablerows thead th {
  background: var(--mist); font-family: var(--font-mono);
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate-2); font-weight: 500;
}
.v2-tablerows td:last-child, .v2-tablerows th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.v2-tablerows tr:last-child td { border-bottom: 0; }
.v2-tablerows td:first-child { color: var(--slate); }
.v2-tablerows td:last-child { color: var(--ink); font-weight: 600; }
.v2-tablerows tr.is-lead td { background: var(--mist-blue); }
.v2-tablerows tr.is-lead td:first-child { color: var(--royal); font-weight: 600; }

/* --- pricing sheet -------------------------------------------------------- */
.v2-price {
  display: grid;
  grid-template-columns: 388px minmax(0, 1fr);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.v2-price-fig {
  background: linear-gradient(165deg, #0C1B3B 0%, #142A63 100%);
  color: #fff;
  padding: 40px 34px 34px;
  display: flex; flex-direction: column;
  position: relative;
}
.v2-price-fig::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--lime);
}
.v2-price-label {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; color: #AFBEDD;
}
.v2-price-figure {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.3rem, 3.4vw, 3rem); line-height: 1;
  letter-spacing: -.04em; margin: 12px 0 0; color: #fff;
}
/* Keeps "From" on the same optical line as the figure without shrinking it into
   the number, which would read as part of the amount. */
.v2-price-from {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9FB4DA;
  vertical-align: middle;
  margin-right: 10px;
  transform: translateY(-.35em);
}
.v2-price-figure small {
  display: block; font-size: .8rem; font-weight: 500; letter-spacing: 0;
  color: #AEBEDC; margin-top: 10px;
}
.v2-price-then {
  font-size: .86rem; color: #C8D4EA; margin: 14px 0 0; line-height: 1.5;
}
.v2-price-then b { color: #fff; }
.v2-price-basis {
  font-size: .78rem; color: #A9B9D9; line-height: 1.55; margin: 14px 0 0;
}
.v2-price-fig .btn { margin-top: auto; justify-content: center; }
.v2-price-fig .btn.btn-lime { margin-top: 26px; }

.v2-price-inc { padding: 40px 40px 34px; }
.v2-price-inc h3 {
  font-size: 1.05rem; letter-spacing: -.015em; margin: 0 0 18px;
  display: flex; align-items: center; gap: 10px;
}
.v2-price-inc h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.v2-inc-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 32px; list-style: none; margin: 0; padding: 0;
}
.v2-inc-grid li {
  display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px;
  font-size: .9rem; line-height: 1.5; color: var(--slate);
}
.v2-inc-grid svg { color: var(--lime-deep); margin-top: 3px; }
.v2-price-note {
  font-size: .82rem; color: var(--slate-2); line-height: 1.6;
  margin: 20px 0 0; padding-top: 16px; border-top: 1px dashed var(--line-2);
  max-width: 64ch;
}
/* Sentence-split note. A 300-character paragraph carrying several prices cannot
   be scanned; one row per sentence can. The measure is capped so lines do not run
   to 110 characters in the wide right-hand column. */
.v2-notes {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px dashed var(--line-2);
  max-width: 66ch;
}
.v2-notes-lead {
  margin: 0; font-size: .86rem; line-height: 1.55; color: var(--ink);
  font-weight: 500;
}
.v2-notes-rows { list-style: none; margin: 12px 0 0; padding: 0; }
.v2-notes-rows li {
  padding: 10px 0; border-top: 1px solid var(--line);
  font-size: .82rem; line-height: 1.55; color: var(--slate-2);
}
.v2-notes-rows li:first-child { border-top: 0; padding-top: 0; }
.v2-notes-rows li:last-child { padding-bottom: 0; }
/* Money figures inside any note get the same treatment in both shapes. */
.v2-amt { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2-price-foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center;
  background: var(--mist); border-top: 1px solid var(--line);
  padding: 15px 34px;
  font-size: .8rem; color: var(--slate);
}
.v2-price-foot span { display: inline-flex; align-items: center; gap: 8px; }
.v2-price-foot svg { color: var(--royal); }

/* --- FAQ split ------------------------------------------------------------ */
.v2-faq { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 60px; align-items: start; }
.v2-faq-aside h2 { font-size: clamp(1.45rem,2.1vw,1.85rem); margin: 12px 0 14px; }
.v2-faq-aside p { font-size: .93rem; color: var(--slate); line-height: 1.6; }
.v2-faq-card {
  margin-top: 24px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 22px;
}
.v2-faq-card strong { display: block; font-size: .95rem; margin-bottom: 6px; }
.v2-faq-card p { margin: 0 0 14px; font-size: .86rem; }
.v2-faq-list { border-top: 1px solid var(--line-2); }
.v2-faq-item { border-bottom: 1px solid var(--line-2); }
.v2-faq-item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 21px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -.014em; color: var(--ink);
}
.v2-faq-item summary::-webkit-details-marker { display: none; }
.v2-faq-item summary span.mk {
  flex: none; position: relative; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line-2); margin-top: 1px;
  transition: background .18s ease, border-color .18s ease;
}
.v2-faq-item summary span.mk::before,
.v2-faq-item summary span.mk::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--royal);
  transform: translate(-50%,-50%);
}
.v2-faq-item summary span.mk::before { width: 9px; height: 1.6px; }
.v2-faq-item summary span.mk::after { width: 1.6px; height: 9px; transition: opacity .18s ease; }
.v2-faq-item[open] summary span.mk { background: var(--royal); border-color: var(--royal); }
.v2-faq-item[open] summary span.mk::before,
.v2-faq-item[open] summary span.mk::after { background: #fff; }
.v2-faq-item[open] summary span.mk::after { opacity: 0; }
.v2-faq-item p {
  margin: 0 0 22px; padding-right: 46px;
  font-size: .95rem; line-height: 1.65; color: var(--slate);
}

/* --- closing band --------------------------------------------------------- */
.v2-cta {
  position: relative; overflow: hidden;
  background:
    radial-gradient(600px 320px at 88% 0%, rgba(131,181,64,.24) 0%, rgba(11,23,51,0) 62%),
    linear-gradient(120deg, #0A1530 0%, #16295C 58%, #1B3A87 100%);
  color: #fff;
  padding: 68px 0;
}
.v2-cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--lime);
}
.v2-cta-grid {
  display: grid; grid-template-columns: minmax(0,1.35fr) auto;
  gap: 40px; align-items: center;
}
.v2-cta h2 {
  color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  letter-spacing: -.03em; margin: 12px 0 12px; text-wrap: balance;
}
.v2-cta p { color: #C6D2E8; margin: 0; max-width: 46em; font-size: .98rem; }
.v2-cta-actions { display: flex; flex-direction: column; gap: 10px; min-width: 250px; }
.v2-cta-actions .btn { justify-content: center; }
.v2-cta-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .9rem; color: #C6D2E8; padding: 8px 0;
}
.v2-cta-tel:hover { color: #fff; }

/* --- sticky mobile action bar --------------------------------------------- */
.v2-sticky {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80;
  display: none; gap: 10px; align-items: center;
  background: rgba(255,255,255,.97);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 18px 40px -18px rgba(16,24,40,.4);
}
.v2-sticky .btn { flex: 1; justify-content: center; }
.v2-sticky .tel {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 10px; color: var(--royal);
}
.v2-sticky .tel:hover { background: var(--mist); }
body.has-v2-sticky { padding-bottom: 84px; }

/* --- reveal -------------------------------------------------------------- */
.v2-reveal { opacity: 0; transform: translateY(14px); }
.v2-reveal.is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.16,.84,.44,1); }
@media (prefers-reduced-motion: reduce) {
  .v2-reveal, .v2-reveal.is-in { opacity: 1; transform: none; transition: none; }
}

/* --- footer -------------------------------------------------------------- */
.site-footer { background: var(--navy); color: #C4CFE4; }
.site-footer h4 { color: #fff; }
.site-footer a { color: #C4CFE4; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-tagline { color: #A9B9D6; }
.site-footer .footer-phone { color: #fff; }
/* Navy on the lime pill. Inheriting the footer link colour, or v2's lime, put
   near-invisible text on the highest-contrast button in the footer. */
.site-footer .footer-cta { color: #0B1733; }
.site-footer .footer-cta span { color: inherit; }
.site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); color: #93A4C4; }
.site-footer .footer-legal a { color: #A9B9D6; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .v2-hero-grid { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .v2-sheet { max-width: 520px; }
  .v2-block-grid { grid-template-columns: 240px minmax(0,1fr); gap: 40px; }
  .v2-block-grid.is-flip { grid-template-columns: minmax(0,1fr) 240px; }
  .v2-block-grid.is-band .v2-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .v2-price { grid-template-columns: 320px minmax(0,1fr); }
  .v2-faq { grid-template-columns: 260px minmax(0,1fr); gap: 40px; }
  .v2-cta-grid { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .v2-cta-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
}

@media (max-width: 860px) {
  .v2-block { padding: 56px 0; }
  .v2-block-grid,
  .v2-block-grid.is-flip { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .v2-block-grid.is-flip > .v2-block-rail { order: 0; }
  .v2-block-grid.is-band .v2-block-rail { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .v2-block-grid.is-band .v2-tiles { grid-template-columns: minmax(0,1fr); }
  .v2-block-rail { position: static; }
  .v2-tiles { grid-template-columns: minmax(0,1fr); }
  .v2-checklist.is-two { grid-template-columns: minmax(0,1fr); }
  .v2-price { grid-template-columns: minmax(0,1fr); }
  .v2-price-inc { padding: 30px 26px; }
  .v2-price-fig { padding: 32px 26px 28px; }
  .v2-inc-grid { grid-template-columns: minmax(0,1fr); }
  .v2-price-foot { padding: 14px 26px; }
  .v2-faq { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .v2-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .v2-fact:nth-child(3) { border-left: 0; }
  .v2-fact { border-top: 1px solid var(--line); }
  .v2-fact:nth-child(-n+2) { border-top: 0; }
}

@media (max-width: 680px) {
  .v2-hero { padding: 18px 0 74px; }
  .v2-hero h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .v2-hero-cta .btn { width: 100%; justify-content: center; }
  .v2-hero-note { gap: 10px 16px; font-size: .78rem; }
  .v2-sheet { padding: 22px 20px 20px; }
  .v2-factstrip { margin-top: -44px; }
  .v2-fact { padding: 16px 18px; }
  .v2-fact .n { font-size: 1.4rem; }
  .v2-fact .l { font-size: .66rem; }
  .v2-tile { padding: 20px 18px; }
  .v2-panel { padding: 22px 20px; }
  .v2-tablerows th, .v2-tablerows td { padding: 11px 14px; font-size: .86rem; }
  .v2-faq-item summary { font-size: .97rem; padding: 18px 0; }
  .v2-faq-item p { padding-right: 0; }
  .v2-cta { padding: 48px 0; }
  .v2-cta-actions .btn { width: 100%; }
  .v2-sticky { display: flex; }
  .v2-sticky .btn { padding: 12px 14px; font-size: .9rem; }
}

/* ==========================================================================
   Page-level components used by the bespoke v2 pages (home, ecommerce hub,
   Germany, contact). Still brand-only: royal, lime, navy, mist.
   ========================================================================== */

/* hero compliance board */
.v2-board {
  background: #fff; color: var(--ink);
  border-radius: 16px; border-top: 4px solid var(--lime);
  box-shadow: var(--shadow-float);
  padding: 22px 22px 18px;
}
.v2-board-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--royal);
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.v2-board-head .live {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--slate-2); letter-spacing: .1em;
}
.v2-board-head .live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime-deep);
}
.v2-board-row {
  display: grid; grid-template-columns: 30px minmax(0,1fr) auto;
  gap: 12px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.v2-board-row:last-child { border-bottom: 0; }
.v2-board-row .ic {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 8px; background: var(--mist-blue); color: var(--royal);
}
.v2-board-row .ic svg { width: 15px; height: 15px; }
.v2-board-row b { display: block; font-size: .9rem; font-weight: 600; letter-spacing: -.01em; }
.v2-board-row small { display: block; font-size: .74rem; color: var(--slate-2); margin-top: 2px; }
.v2-board-row .st {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 7px; border-radius: 5px;
  background: var(--lime-soft); color: #3F6A1C; white-space: nowrap;
}
/* The foot carries the one claim the per-row chips no longer make. Stacked,
   because at the board's narrowest the two would otherwise fight for the same
   line and both read as broken. */
.v2-board-foot {
  margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--line-2);
  display: grid; gap: 7px;
}
.v2-board-foot .claim {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: .755rem; font-weight: 500; color: var(--ink); line-height: 1.45;
}
.v2-board-foot .claim svg {
  width: 13px; height: 13px; flex: 0 0 auto; margin-top: 2px; color: var(--lime-deep);
}
.v2-board-foot .meta {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate-2);
}

/* platform marquee */
.v2-marquee {
  overflow: hidden; position: relative;
  background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.v2-marquee::before, .v2-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 1; pointer-events: none;
}
.v2-marquee::before { left: 0; background: linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.v2-marquee::after { right: 0; background: linear-gradient(270deg,#fff,rgba(255,255,255,0)); }
.v2-marquee-track {
  display: flex; gap: 54px; width: max-content; align-items: center;
  animation: v2slide 44s linear infinite;
}
.v2-marquee:hover .v2-marquee-track { animation-play-state: paused; }
.v2-marquee-item {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: .98rem;
  color: var(--slate); white-space: nowrap; letter-spacing: -.01em;
}
.v2-marquee-item::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime);
}
.v2-marquee-kicker {
  text-align: center; font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--slate-2);
  margin: 0 0 16px;
}
@keyframes v2slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .v2-marquee-track { animation: none; } }

/* service deck */
.v2-deck { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 14px; }
.v2-deck-card {
  grid-column: span 3;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 24px 24px 22px; color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.v2-deck-card.is-wide { grid-column: span 6; }
.v2-deck-card:hover {
  border-color: var(--royal); box-shadow: var(--shadow-card); transform: translateY(-2px);
  color: var(--ink);
}
.v2-deck-num {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em;
  color: var(--royal);
}
.v2-deck-card h3 { font-size: 1.12rem; letter-spacing: -.018em; margin: 10px 0 8px; }
.v2-deck-card.is-wide h3 { font-size: 1.32rem; }
.v2-deck-card p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--slate); }
.v2-deck-go {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600; color: var(--royal); margin-top: auto;
}
.v2-deck-card:hover .v2-deck-go { color: var(--royal-deep); }

/* coverage board
   A wide map band across the top, jurisdiction chips beneath. The old layout put
   a 2:1 map in a narrow left column, so the panel padded out into a dark square
   with a small map floating inside it. Full width fixes the proportion and gives
   the map enough size for a single country to be a visible target. */
.v2-cover {
  display: grid; grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff;
}
.v2-cover-map {
  position: relative; margin: 0;
  padding: 18px 26px 22px;
  background:
    radial-gradient(760px 300px at 74% -12%, rgba(131,181,64,.16) 0%, rgba(11,23,51,0) 62%),
    linear-gradient(150deg, #0A1530 0%, #16295C 100%);
  display: grid; gap: 10px;
}
.v2-cover-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 14px;
}
.v2-cover-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: #93A6CA;
}
.v2-cover-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 0 3px rgba(131,181,64,.16);
}
.v2-cover-readout {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: #8FA3C8; text-align: right;
  transition: color .18s ease;
}
.v2-cover-readout b { color: #B4D96A; font-weight: 600; }
.v2-cover-map .v2-map {
  display: block; width: 100%; height: auto;
  /* Deliberately uncapped: the drawing is 2.5:1, so capping the height left dark
     bars either side of a centred map, which reads as a padding mistake. Full
     width keeps the band edge-to-edge. */
}
.v2-cover-map figcaption {
  font-size: .8rem; color: #C2CFE7; line-height: 1.55;
}
.v2-cover-map figcaption b { color: #fff; display: block; margin-bottom: 2px; }

/* Interactive map. The svg carries its own baseline colours so it still works as
   a plain <img>; these id-scoped rules are what let a chip light one country, and
   they win over the svg's internal class selectors on specificity. */
#v2-coverage-map .wm-land { stroke-opacity: .26; transition: stroke-opacity .22s ease; }
#v2-coverage-map .wm-c path {
  transition: stroke .2s ease, stroke-opacity .2s ease, stroke-width .2s ease;
}
#v2-coverage-map .wm-c { transition: opacity .2s ease; }
/* Hit testing belongs to the invisible .wm-shape outline inside each country
   group, so every decorative layer must stay out of the pointer's way. */
#v2-coverage-map .wm-layer,
#v2-coverage-map .wm-land { pointer-events: none; }
#v2-coverage-map.is-live .wm-land { stroke-opacity: .15; }
#v2-coverage-map.is-live .wm-c:not(.is-on) { opacity: .28; }
#v2-coverage-map .wm-c.is-on path {
  stroke: #B4D96A; stroke-opacity: 1; stroke-width: 3;
}
/* Name of the country under the pointer. Positioned from the cursor by v2.js,
   offset up and right so it never sits under the hand. */
.v2-map-tip {
  position: absolute; z-index: 3; pointer-events: none;
  transform: translate(-50%, -150%);
  padding: 5px 10px; border-radius: 7px;
  background: #fff; color: var(--ink);
  font-size: .76rem; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; opacity: 0; transition: opacity .12s ease;
  box-shadow: 0 6px 18px rgba(4,10,26,.35);
}
.v2-map-tip.is-on { opacity: 1; }
/* Radar ping on the selected jurisdiction: what makes the board read as live
   rather than as a printed map. Scaling the element rather than animating `r`
   keeps it working in every engine that supports SVG presentation attributes. */
#v2-coverage-map .wm-halo {
  fill: none; stroke: #B4D96A; stroke-width: 1.4;
  opacity: 0; pointer-events: none;
  transform-box: fill-box; transform-origin: center;
}
#v2-coverage-map.is-live .wm-halo { animation: v2-wm-ping 2.2s ease-out infinite; }
@keyframes v2-wm-ping {
  0%   { transform: scale(.25); opacity: .85; }
  100% { transform: scale(2.3);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #v2-coverage-map.is-live .wm-halo { animation: none; opacity: .4; }
}
/* The chip that owns the highlighted country, so the two stay visibly paired. */
.v2-chip.is-linked {
  border-color: var(--royal); color: var(--royal); background: var(--mist-blue);
}
.v2-cover-body {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr;
  gap: 0 28px; padding: 22px 30px 24px;
}
.v2-cover-group { padding: 8px 0 0; border-bottom: 0; border-top: 1px solid var(--line); }
.v2-cover-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate-2); margin-bottom: 12px;
}
.v2-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.v2-chip {
  display: inline-flex; align-items: center; padding: 6px 11px;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-size: .82rem; color: var(--ink); background: #fff;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.v2-chip:hover { border-color: var(--royal); color: var(--royal); background: var(--mist-blue); }

/* process rail */
.v2-rail { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 26px; position: relative; }
.v2-rail::before {
  content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px;
  background: linear-gradient(90deg, var(--lime) 0%, var(--royal) 55%, rgba(36,74,169,.15) 100%);
}
.v2-step { position: relative; padding-top: 46px; }
.v2-step::before {
  content: ""; position: absolute; top: 7px; left: 0;
  width: 17px; height: 17px; border-radius: 50%;
  background: #fff; border: 2px solid var(--royal);
}
.v2-step::after {
  content: ""; position: absolute; top: 11px; left: 4px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--lime);
}
.v2-step-n {
  display: block; font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .16em; color: var(--slate-2); margin-bottom: 8px;
}
.v2-step h3 { font-size: 1.08rem; margin: 0 0 7px; }
/* ==========================================================================
   Country index - the VAT hub links out to every country page we publish
   ==========================================================================
   The hub used to name the ten EU countries in a sentence, with no link to any
   of the pages that explain them (Sir, 13 Nov). These are links, not decoration:
   the local tax name and standard rate come from the country page itself, so a
   reader can see which country is which before clicking. The whole card is the
   target, because a 90px row should not need precise aiming on a phone. */
.v2-country-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.v2-country {
  display: grid;
  gap: 4px;
  padding: 15px 17px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.v2-country:hover { border-color: #B9C7E0; box-shadow: 0 6px 18px rgba(11,23,51,.07); transform: translateY(-1px); }
.v2-country:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.v2-country-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.v2-country-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: -.018em; color: var(--ink); line-height: 1.2;
}
.v2-country-rate {
  flex: none;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; color: var(--royal);
  background: var(--mist-blue); border-radius: 5px; padding: 3px 6px;
}
.v2-country-tax {
  font-size: .74rem; color: var(--slate-2); letter-spacing: .01em;
}
/* The annual fee this country carries. Sits directly under the tax name and
   above the prose so it reads as part of the country's identity, not a note. */
.v2-country-fee {
  display: inline-block; margin-top: 6px; padding: 2px 0;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--line); padding-top: 6px; width: 100%;
}
.v2-country-note {
  font-size: .82rem; line-height: 1.5; color: var(--slate); margin-top: 2px;
}
.v2-country-also {
  margin: 16px 0 0; font-size: .82rem; line-height: 1.6; color: var(--slate-2);
}
.v2-country-also a { color: var(--royal); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.v2-country-also a:hover { text-decoration-thickness: 2px; }
/* One column on a phone: at 390px two cards leave about 160px each, which
   breaks the local tax name and squeezes the note into four-word lines. The
   override lives here, after the base rule, so it actually wins. */
@media (max-width: 860px) {
  .v2-country-grid { grid-template-columns: minmax(0,1fr); }
  .v2-country { padding: 14px 15px 15px; }
}

.v2-step p { font-size: .89rem; line-height: 1.55; color: var(--slate); margin: 0; }

/* ==========================================================================
   Jurisdiction cards - two formation products sold from one page
   ==========================================================================
   The Formation page carries both the UK and the US company, so it cannot use
   the single-price block: that shape says "this is the price" and shows one
   figure. These are two equal offers, each with its own price, scope and CTA,
   read side by side on a desktop and stacked on a phone. */
.v2-jur {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.v2-jur-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 26px 24px;
}
.v2-jur-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.v2-jur-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.32rem;
  letter-spacing: -.022em;
  line-height: 1.15;
  color: var(--ink);
}
.v2-jur-tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-2);
}
.v2-jur-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 2.3vw, 2.1rem);
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--ink);
}
.v2-jur-price small {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--slate-2);
}
.v2-jur-basis {
  margin: 12px 0 0;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--slate);
}
.v2-jur-list {
  flex: 1;
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
}
.v2-jur-list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--slate);
}
.v2-jur-list svg { color: var(--lime-deep); margin-top: 2px; }
.v2-jur-card .btn { margin-top: 18px; justify-content: center; }
.v2-jur-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-2);
}
/* The caveats that belong to both: who bills state fees, what the registered
   office costs. A single block beneath the pair, so it is stated once. */
.v2-jur-foot {
  margin-top: 18px;
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--mist);
}
.v2-jur-foot p {
  margin: 0;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--slate-2);
  max-width: 80ch;
}
.v2-jur-foot p + p { margin-top: 10px; }
.v2-jur-foot b { color: var(--ink); font-weight: 600; }

/* reviews wall */
.v2-reviews { display: grid; grid-template-columns: 292px minmax(0,1fr); gap: 20px; align-items: stretch; }
.v2-score {
  background: linear-gradient(160deg, #0A1530 0%, #16295C 100%);
  color: #fff; border-radius: 16px; padding: 30px 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.v2-score .stars { display: flex; gap: 4px; color: #F5B324; }
.v2-score .stars svg { width: 22px; height: 22px; }
.v2-score .big {
  font-family: var(--font-display); font-weight: 700; font-size: 3.1rem;
  line-height: 1; letter-spacing: -.04em; color: #fff;
}
.v2-score .big span { font-size: 1rem; font-weight: 500; color: #AEBEDC; letter-spacing: 0; }
.v2-score p { font-size: .82rem; color: #C2CFE7; margin: 0; line-height: 1.55; }
.v2-score p b { color: #fff; }
.v2-score .btn { margin-top: auto; justify-content: center; }
.v2-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.v2-quote {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 14px; margin: 0;
}
.v2-quote .q-stars { display: flex; gap: 3px; color: #F5B324; }
.v2-quote .q-stars svg { width: 15px; height: 15px; }
.v2-quote blockquote { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--slate); }
.v2-quote figcaption { font-size: .8rem; color: var(--slate-2); margin-top: auto; }
.v2-quote figcaption cite { font-style: normal; font-weight: 600; color: var(--ink); }

/* plan comparison */
.v2-plans { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.v2-plans thead th {
  padding: 22px 20px; text-align: left; vertical-align: bottom;
  border-bottom: 1px solid var(--line); background: var(--mist);
}
.v2-plans thead th.is-featured { background: var(--royal); color: #fff; }
.v2-plans thead th .plan-name {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; letter-spacing: -.015em; margin-bottom: 4px;
}
.v2-plans thead th .plan-for { display: block; font-size: .76rem; color: var(--slate-2); margin-bottom: 12px; }
.v2-plans thead th.is-featured .plan-for { color: #C8D4EA; }
.v2-plans thead th .plan-price {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.7rem; letter-spacing: -.03em; line-height: 1;
}
.v2-plans thead th .plan-price small { display: block; font-size: .72rem; font-weight: 500; letter-spacing: 0; margin-top: 5px; color: var(--slate-2); }
.v2-plans thead th.is-featured .plan-price small { color: #C8D4EA; }
.v2-plans thead th .tagline {
  display: inline-block; margin-bottom: 10px; padding: 3px 8px; border-radius: 4px;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--lime); color: var(--royal-ink);
}
/* The corner cell heads the feature column; it is not a fourth plan card. It used
   to be a filled tile holding one bottom-aligned line, which read as an empty card
   parked beside the featured plan. It now sits on the table's own white surface,
   top-aligned, carrying the label and the tick legend: the eye reads it as the top
   of the feature list rather than as a separate block. */
.v2-plans thead th.is-label {
  width: 34%; padding-right: 26px;
  background: #fff; vertical-align: top;
  /* A hairline down the column edge runs from this cell to the last body row, so
     the label reads as the head of the feature column rather than a blank tile
     floating beside the plan cards. The body rule below continues it. */
  border-right: 1px solid var(--line);
}
.v2-plans thead th .plan-label {
  display: block;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate-2);
}
.v2-plans thead th .plan-legend {
  display: block; margin-top: 10px; font-size: .75rem; color: var(--slate-2);
}
.v2-plans thead th .plan-legend .lg-yes { color: var(--lime-deep); font-weight: 700; }
.v2-plans thead th .plan-legend .lg-no { color: #AAB3C0; font-weight: 700; margin-left: 10px; }
.v2-plans tbody th, .v2-plans tbody td {
  padding: 13px 20px; border-bottom: 1px solid var(--line); text-align: left;
  font-size: .88rem; font-weight: 400;
}
.v2-plans tbody tr:last-child th, .v2-plans tbody tr:last-child td { border-bottom: 0; }
.v2-plans tbody th { color: var(--slate); font-weight: 400; border-right: 1px solid var(--line); }
.v2-plans tbody td { color: var(--ink); }
.v2-plans tbody td.is-featured { background: var(--mist-blue); }
.v2-plans tbody td .yes { color: var(--lime-deep); display: inline-flex; }
.v2-plans tbody td .no { color: #AAB3C0; }
.v2-plans-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 16px 20px; background: var(--mist); font-size: .8rem; color: var(--slate); }
.v2-plans-wrap { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.v2-plans-wrap .v2-plans { border: 0; border-radius: 0; }
.v2-plans-cta { padding: 16px 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; }
/* Only meaningful while the table scrolls sideways; shown by the 860px query. */
.v2-plans-hint { display: none; }

/* Phone layout: one card per plan, built by v2.js from the table's own cells.
   Hidden until the script tags the wrapper, so a no-JS reader keeps the table. */
.v2-plan-cards { display: none; }
.v2-plans-wrap.is-stacked { border: 0; border-radius: 0; background: transparent; }
.v2-plans-wrap.is-stacked .v2-plans-scroll,
.v2-plans-wrap.is-stacked .v2-plans-hint,
.v2-plans-wrap.is-stacked .v2-plans-cta { display: none; }
.v2-plans-wrap.is-stacked .v2-plan-cards {
  display: grid; gap: 14px; padding: 0;
}
.v2-plan-card {
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
  padding: 0 16px 16px; overflow: hidden;
}
.v2-plan-card .plan-head {
  margin: 0 -16px 14px; padding: 16px; background: var(--mist);
  display: grid; gap: 2px;
}
.v2-plan-card.is-featured { border-color: var(--royal); box-shadow: 0 14px 34px rgba(36,74,169,.12); }
.v2-plan-card.is-featured .plan-head { background: var(--royal); color: #fff; }
.v2-plan-card .tagline {
  justify-self: start; margin-bottom: 6px; padding: 3px 8px; border-radius: 4px;
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em;
  text-transform: uppercase; background: var(--lime); color: var(--royal-ink);
}
.v2-plan-card .plan-name {
  margin: 0; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  letter-spacing: -.015em;
  /* Set explicitly: the base sheet gives every h3 a colour of its own, and a
     declaration on the element always beats inheriting from the blue head. */
  color: var(--ink);
}
.v2-plan-card.is-featured .plan-name { color: #fff; }
.v2-plan-card .plan-for { font-size: .78rem; color: var(--slate-2); }
.v2-plan-card.is-featured .plan-for { color: #C8D4EA; }
.v2-plan-card .plan-price {
  margin-top: 8px; font-family: var(--font-display); font-size: 1.55rem;
  font-weight: 700; letter-spacing: -.03em; line-height: 1;
}
.v2-plan-card .plan-price small {
  display: block; margin-top: 5px; font-size: .72rem; font-weight: 500; letter-spacing: 0;
  color: var(--slate-2);
}
.v2-plan-card.is-featured .plan-price small { color: #C8D4EA; }
.v2-plan-card .plan-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.v2-plan-card .plan-list li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px;
  font-size: .86rem; line-height: 1.45; color: var(--ink);
}
.v2-plan-card .plan-list li b { font-weight: 600; color: var(--slate); }
.v2-plan-card .plan-tick { color: var(--lime-deep); font-weight: 700; line-height: 1.45; }
.v2-plan-card .plan-excluded {
  margin: 0 0 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .78rem; line-height: 1.5; color: var(--slate-2);
}
.v2-plan-card .plan-excluded b { color: var(--slate); }
.v2-plan-card .plan-cta { display: grid; }
.v2-plan-card .plan-cta .btn { width: 100%; justify-content: center; }
/* Charges outside the plans.
   This used to be one running paragraph carrying seven different prices, which
   is unreadable and impossible to compare. As a two-column aligned list the
   amounts line up in their own column, so a reader scans the price they care
   about instead of parsing a sentence chain. The old .v2-plan-note rule is left
   in place for any page that still uses it. */
.v2-plan-note { margin: 18px 0 0; font-size: .82rem; color: var(--slate-2); line-height: 1.6; }
.v2-price-list-block {
  margin-top: 18px; padding: 18px 20px 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--mist);
}
.v2-price-list-label {
  margin: 0 0 10px; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2);
}
.v2-price-list { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) max-content; }
.v2-price-list dt {
  padding: 9px 20px 9px 0; border-top: 1px solid var(--line);
  font-size: .84rem; line-height: 1.4; color: var(--ink);
}
.v2-price-list dt span { display: block; font-size: .76rem; color: var(--slate-2); }
.v2-price-list dd {
  margin: 0; padding: 9px 0; border-top: 1px solid var(--line);
  text-align: right; white-space: nowrap;
}
.v2-price-list dd b {
  display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.v2-price-list dd small { display: block; font-size: .72rem; color: var(--slate-2); }
.v2-price-list dt:first-of-type, .v2-price-list dd:first-of-type { border-top: 0; padding-top: 0; }
.v2-price-list-note {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .78rem; line-height: 1.5; color: var(--slate-2);
}

/* Per-country rate card.
   Pan-EU VAT is a sum, not a figure: £280 registration per country plus one of
   two annual bands per country. The bands are listed with their countries, then
   worked totals by count, so a reader can price their own estate without asking
   us. Everything is tabular-numeric so the columns read straight down. */
.v2-rate-card {
  margin-top: 18px; padding: 18px 20px 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--mist);
}
.v2-band {
  display: grid; gap: 2px; padding: 12px 0;
  border-top: 1px solid var(--line);
}
.v2-band:first-of-type { border-top: 0; padding-top: 0; }
.v2-band-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.v2-band-head b {
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.v2-band-head span { font-size: .78rem; color: var(--slate-2); }
.v2-band-countries {
  margin: 0; font-size: .82rem; line-height: 1.5; color: var(--slate);
}
.v2-rate-extra {
  margin: 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .78rem; line-height: 1.55; color: var(--slate-2);
}
.v2-rate-extra b { color: var(--ink); font-variant-numeric: tabular-nums; }
.v2-rate-totals-label { margin-top: 18px; }
.v2-totals {
  width: 100%; margin: 0; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.v2-totals th, .v2-totals td {
  padding: 9px 0; border-top: 1px solid var(--line); text-align: right;
  font-size: .8rem; color: var(--ink); white-space: nowrap;
}
.v2-totals thead th {
  border-top: 0; padding-bottom: 6px;
  font-family: var(--font-mono); font-size: .58rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate-2);
}
.v2-totals th:first-child, .v2-totals td:first-child {
  text-align: left; white-space: normal; padding-right: 14px;
}
.v2-totals tbody th { font-weight: 600; color: var(--ink); }
.v2-totals tbody th span {
  display: block; font-weight: 400; font-size: .7rem; color: var(--slate-2);
  white-space: normal; line-height: 1.4; margin-top: 1px;
}
.v2-totals tbody td { color: var(--slate); }
/* The per-cell label only exists for the stacked phone layout; on desktop the
   header row already names the column. Hidden here, revealed below 620px. */
.v2-td-label { display: none; }
.v2-totals tbody tr:last-child td, .v2-totals tbody tr:last-child th { border-bottom: 1px solid var(--line); }
.v2-totals tbody td:last-child b { font-weight: 600; color: var(--ink); }
@media (max-width: 620px) {
  .v2-rate-card { padding: 16px 16px 14px; }
  /* Stacked rather than truncated: every figure survives on a phone, labelled.
     Hiding a column would quietly change what the price appears to be. */
  .v2-totals, .v2-totals tbody { display: block; width: 100%; }
  .v2-totals thead { display: none; }
  .v2-totals tbody tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 10px; padding: 11px 0; border-top: 1px solid var(--line);
  }
  .v2-totals tbody tr:last-child th, .v2-totals tbody tr:last-child td { border-bottom: 0; }
  .v2-totals tbody th, .v2-totals tbody td {
    border-top: 0; padding: 0; text-align: left; white-space: normal; font-size: .8rem;
  }
  .v2-totals tbody th { grid-column: 1 / -1; }
  .v2-td-label {
    display: block; margin-bottom: 1px;
    font-family: var(--font-mono); font-size: .54rem; letter-spacing: .09em;
    text-transform: uppercase; color: var(--slate-2);
  }
}

/* contact */
.v2-contact { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 56px; align-items: start; }
.v2-note {
  border-left: 3px solid var(--lime); background: var(--mist);
  padding: 16px 20px; font-size: .88rem; line-height: 1.6; color: var(--slate);
  margin: 22px 0 0;
}
.v2-note b { color: var(--ink); }
.v2-form { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow-card); }
.v2-form-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 24px; background: var(--mist); border-bottom: 1px solid var(--line);
}
.v2-form-head h3 { margin: 0; font-size: 1.02rem; }
.v2-form-head .sec {
  display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--slate-2);
}
/* The enquiry form is a three-step wizard, so its height changes from step to
   step. A fixed 660px left a band of blank white under the first step (Sir,
   13 Nov). The frame now starts compact and is resized from the height Zoho
   posts to the parent, so the card always ends where the form ends. */
.v2-form iframe { width: 100%; height: 420px; border: 0; display: block; }
.v2-form-foot {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 13px 20px; border-top: 1px solid var(--line);
  font-size: .76rem; line-height: 1.5; color: var(--slate-2);
}
.v2-form-foot svg { flex: none; margin-top: 2px; color: var(--royal); }

/* generic link list used by hub pages */
.v2-channel { display: flex; flex-direction: column; gap: 10px; }
.v2-channel h3 { margin: 0; font-size: 1.02rem; }
.v2-channel p { margin: 0; font-size: .89rem; color: var(--slate); line-height: 1.55; }
.v2-channel-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; }
.v2-channel-links a { font-weight: 600; }

@media (max-width: 1080px) {
  .v2-deck-card { grid-column: span 6; }
  .v2-deck-card.is-wide { grid-column: span 12; }
  /* Three chip columns cannot hold "Netherlands" and "Czechia" side by side in a
     narrow band; two is the point at which every label still fits on one line. */
  .v2-cover-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; padding: 22px 24px; }
  .v2-rail { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px 26px; }
  .v2-rail::before { display: none; }
  .v2-reviews { grid-template-columns: minmax(0,1fr); }
  .v2-contact { grid-template-columns: minmax(0,1fr); gap: 32px; }
}
@media (max-width: 860px) {
  .v2-deck-card, .v2-deck-card.is-wide { grid-column: span 12; }
  .v2-quotes { grid-template-columns: minmax(0,1fr); }
  /* Two formation cards side by side at 390px leaves each about 160px wide,
     which breaks the price line and the scope list into fragments. Stacked,
     each reads as its own offer. */
  .v2-jur { grid-template-columns: minmax(0,1fr); }
  .v2-jur-card { padding: 22px 20px 20px; }
  .v2-plans thead th { padding: 16px 12px; }
  .v2-plans thead th .plan-price { font-size: 1.25rem; }
  .v2-plans tbody th, .v2-plans tbody td { padding: 11px 12px; font-size: .82rem; }
  .v2-plans-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .v2-plans-scroll .v2-plans { min-width: 620px; }
  /* Phone-width comparison table: the feature names have to stay on screen while
     the plan columns scroll, otherwise a reader comparing plans loses the row
     label on the first swipe. The label column is narrowed so a plan column is
     still wide enough to read, and pinned with an opaque fill plus a hairline so
     the scrolled cells pass underneath cleanly. */
  .v2-plans thead th.is-label,
  .v2-plans tbody th {
    position: sticky; left: 0; z-index: 2;
    background: #fff; box-shadow: 1px 0 0 var(--line);
  }
  .v2-plans thead th.is-label { z-index: 3; background: #fff; width: 172px; padding-right: 12px; }
  .v2-plans tbody th { padding-right: 12px; }
  .v2-plans thead th .plan-legend { font-size: .72rem; margin-top: 8px; }
  .v2-plans-hint {
    display: block; margin: 10px 2px 0; font-size: .78rem; color: var(--slate-2);
  }
}
@media (max-width: 560px) {
  /* Keeps the amount column on a phone: the label and its sub-line stack in the
     first column while the price stays flush right, so every figure still lines
     up as a column. Only the padding tightens. */
  .v2-price-list-block { padding: 16px 14px 14px; }
  .v2-price-list dt { padding: 10px 12px 10px 0; }
  .v2-price-list dd { padding: 10px 0; }
  .v2-price-list dd b { font-size: .95rem; }
  .v2-price-list dd small { font-size: .68rem; }
}
@media (max-width: 680px) {
  .v2-rail { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .v2-step { padding-top: 0; padding-left: 30px; }
  .v2-step::before { top: 2px; }
  .v2-step::after { top: 6px; }
  .v2-form iframe { min-height: 0; }
  .v2-cover-map { padding: 14px 16px 18px; }
  /* The dots scale with the viewBox, so they stay crisp on a phone's 2-3x display;
     only the backdrop needs a touch more presence at 300px wide. */
  #v2-coverage-map .wm-land { stroke-opacity: .2; }
  .v2-cover-body { grid-template-columns: minmax(0,1fr); gap: 0; padding: 20px 20px 22px; }
  .v2-cover-body .v2-cover-group + .v2-cover-group { margin-top: 16px; }
  .v2-chip { font-size: .78rem; padding: 5px 10px; }
  .v2-board { padding: 18px 16px 14px; }
  .v2-board-row { grid-template-columns: 26px minmax(0,1fr) auto; gap: 10px; }
  .v2-board-row .ic { width: 26px; height: 26px; }
  .v2-board-row b { font-size: .85rem; }
  .v2-score { padding: 24px 22px; }
}

/* Below 420 the longest scope chip ("Federal + state") squeezes the country
   name onto a second line and leaves that one row visibly deeper than the
   other three. The chip drops under the description instead, so every row
   keeps a single-line name. */
@media (max-width: 420px) {
  .v2-board-row {
    grid-template-columns: 26px minmax(0,1fr);
    row-gap: 6px;
    padding: 11px 0;
    align-items: start;
  }
  .v2-board-row .ic { grid-row: 1 / span 2; }
  .v2-board-row .st { grid-column: 2; justify-self: start; }
}

/* hero without a side card, and tiles that are links */
.v2-hero-grid.is-solo { grid-template-columns: minmax(0,1fr); gap: 0; }
.v2-hero-grid.is-solo h1 { max-width: 19ch; font-size: clamp(2.35rem, 5vw, 3.9rem); }
.v2-hero-grid.is-solo .v2-lede { max-width: 50em; font-size: clamp(1.02rem, 1.4vw, 1.2rem); }
.v2-hero-grid.is-solo .v2-hero-note {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0;
  margin-top: 36px; padding-top: 22px;
}
.v2-hero-grid.is-solo .v2-hero-note span { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.14); }
.v2-hero-grid.is-solo .v2-hero-note span:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 760px) {
  .v2-hero-grid.is-solo h1 { max-width: 100%; }
  .v2-hero-grid.is-solo .v2-hero-note { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .v2-hero-grid.is-solo .v2-hero-note span { padding-left: 0; border-left: 0; }
}
a.v2-tile { color: inherit; }
a.v2-tile:hover { color: inherit; }
a.v2-tile h3 { color: var(--royal); }
a.v2-tile:hover h3 { color: var(--royal-deep); }


/* ==========================================================================
   Sterlinx v2 — Insights (archive + article)
   Loaded after prototype.css, v2.css and blog.css, scoped to body.v2-blog.
   Same brand: royal #244AA9, lime #83B540, navy #0B1733.

   v1's article head is a dark band with a floating contents list beside a
   narrow prose column and uniform three-up cards. v2 changes the structure:
   a full navy masthead, a magazine grid with a featured lead story, a contents
   card that reads as a numbered map, and prose with ruled section openings.
   ========================================================================== */

body.v2-blog { --blog-measure: 39rem; }

/* ---------- progress ---------- */
.v2-progress {
  position: fixed; top: 0; left: 0; z-index: 200;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--lime) 0%, var(--royal) 100%);
  transition: width .1s linear;
}
@media (prefers-reduced-motion: reduce) { .v2-progress { transition: none; } }

/* ---------- archive head ---------- */
body.v2-blog .archive-head {
  position: relative;
  background:
    radial-gradient(680px 360px at 84% -20%, rgba(131,181,64,.22) 0%, rgba(11,23,51,0) 62%),
    linear-gradient(165deg, #0A1530 0%, #101F42 48%, #142A63 100%);
  color: #fff;
  padding: 54px 0 46px;
}
body.v2-blog .archive-head::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--lime);
}
body.v2-blog .archive-head h1 {
  color: #fff;
  max-width: 30em;
  font-size: clamp(1.95rem, 3.4vw, 2.9rem);
  letter-spacing: -.032em;
  line-height: 1.08;
  margin: 12px 0 14px;
  text-wrap: balance;
}
body.v2-blog .archive-lede { color: #C8D4EA; font-size: 1rem; line-height: 1.62; max-width: 40em; }
body.v2-blog .archive-meta {
  color: #AEBEDC; font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 20px;
}
body.v2-blog .archive-meta .dot { width: 6px; height: 6px; background: var(--lime); opacity: 1; }
body.v2-blog .archive-head .crumbs,
body.v2-blog .archive-head .crumbs a,
body.v2-blog .archive-head .crumbs span { color: rgba(255,255,255,.62); }
body.v2-blog .archive-head .crumbs a:hover { color: #fff; }
body.v2-blog .archive-note { color: #C8D4EA; border-color: rgba(255,255,255,.14); }

/* ---------- magazine grid ---------- */
body.v2-blog .post-list {
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
body.v2-blog .post-list > li:first-child { grid-column: span 2; grid-row: span 2; }
body.v2-blog .post-list > li:first-child .post-card-media { aspect-ratio: 16 / 10; }
body.v2-blog .post-list > li:first-child .post-card-body { padding: 26px 26px 24px; }
body.v2-blog .post-list > li:first-child .post-card h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  letter-spacing: -.024em;
}
body.v2-blog .post-list > li:first-child .post-card p { font-size: .96rem; }

body.v2-blog .post-card {
  border-radius: 12px;
  border-color: var(--line);
  box-shadow: none;
}
body.v2-blog .post-card:hover {
  border-color: var(--royal);
  box-shadow: 0 18px 40px -24px rgba(16,24,40,.34);
  transform: translateY(-3px);
}
body.v2-blog .post-card-media { aspect-ratio: 16 / 10; }
body.v2-blog .post-card-cat {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--royal); font-weight: 500;
}
body.v2-blog .post-card h3 { letter-spacing: -.02em; line-height: 1.22; }
body.v2-blog .post-card p { color: var(--slate); }
body.v2-blog .post-card-meta {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate-2);
  border-top: 1px solid var(--line); padding-top: 12px;
}
body.v2-blog .post-card-meta .dot { background: var(--lime); }

/* empty media panels keep a brand tone instead of a washed neutral */
body.v2-blog .post-card-media.tone-ink,
body.v2-blog .post-card-media.tone-indigo,
body.v2-blog .post-card-media.tone-deep {
  background:
    radial-gradient(240px 140px at 82% 10%, rgba(131,181,64,.24) 0%, rgba(11,23,51,0) 64%),
    linear-gradient(150deg, #0C1B3B 0%, #1B3A87 100%);
}

/* date-grouped rows, if present */
body.v2-blog .post-row:hover { background: var(--mist-blue); }

/* ---------- pagination ---------- */
body.v2-blog .pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
body.v2-blog .pagination a,
body.v2-blog .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--ink); background: #fff;
}
body.v2-blog .pagination a:hover { border-color: var(--royal); color: var(--royal); }
body.v2-blog .pagination .is-current,
body.v2-blog .pagination span[aria-current] {
  background: var(--royal); border-color: var(--royal); color: #fff;
}

/* ---------- article masthead ---------- */
body.v2-blog .post-head {
  position: relative;
  background:
    radial-gradient(620px 320px at 88% -30%, rgba(131,181,64,.2) 0%, rgba(11,23,51,0) 62%),
    linear-gradient(165deg, #0A1530 0%, #101F42 46%, #142A63 100%);
  color: #fff;
  padding: 30px 0 44px;
  margin-bottom: 0;
}
body.v2-blog .post-head::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--lime) 0%, var(--lime) 20%, var(--royal) 20%, var(--royal) 100%);
}
body.v2-blog .post-head .wrap { max-width: 1060px; }
body.v2-blog .post-head .crumbs,
body.v2-blog .post-head .crumbs a,
body.v2-blog .post-head .crumbs span { color: rgba(255,255,255,.62); }
body.v2-blog .post-head .crumbs a:hover { color: #fff; }
body.v2-blog .post-kicker {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: #9FB4DC; margin: 18px 0 12px;
}
body.v2-blog .post-kicker a { color: var(--lime); }
body.v2-blog .post-head h1 {
  color: #fff;
  font-size: clamp(1.9rem, 3.5vw, 2.95rem);
  line-height: 1.08; letter-spacing: -.034em;
  margin: 0 0 18px; max-width: 22em; text-wrap: balance;
}
body.v2-blog .post-standfirst {
  color: #C8D4EA; font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.65; max-width: 44em; margin: 0 0 24px;
}
body.v2-blog .post-byline {
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 16px; margin: 0;
}
body.v2-blog .byline-avatar {
  background: var(--lime); color: var(--royal-ink);
  border: 0; font-weight: 700;
}
body.v2-blog .byline-name { color: #fff; }
body.v2-blog .byline-dates, body.v2-blog .byline-dates time { color: #AEBEDC; }
body.v2-blog .byline-dates .dot { background: var(--lime); }

/* ---------- article layout ---------- */
body.v2-blog .post-layout {
  grid-template-columns: 272px minmax(0, var(--blog-measure));
  gap: 56px;
  padding: 42px 0 64px;
}
body.v2-blog .post-layout--no-rail { grid-template-columns: minmax(0, var(--blog-measure)); }
body.v2-blog .post-rail { position: sticky; top: 96px; }
body.v2-blog .rail-card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--lime);
  border-radius: 0 0 12px 12px;
  background: #fff;
  padding: 18px 18px 14px;
}
body.v2-blog .rail-title {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em;
  color: var(--royal);
}
body.v2-blog .post-toc { counter-reset: toc; }
body.v2-blog .post-toc li { counter-increment: toc; }
body.v2-blog .post-toc a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0; font-size: .86rem; line-height: 1.4;
  color: var(--slate); border-bottom: 1px solid var(--line);
}
body.v2-blog .post-toc li:last-child a { border-bottom: 0; }
body.v2-blog .post-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .6rem; color: var(--royal); flex: none;
}
body.v2-blog .post-toc a:hover,
body.v2-blog .post-toc a.is-active { color: var(--royal); }

/* ---------- prose ---------- */
body.v2-blog .post-body {
  font-size: 1.02rem;
  line-height: 1.75;
  color: #2B3648;
}
body.v2-blog .post-body > p:first-of-type {
  font-size: 1.12rem; line-height: 1.68; color: var(--ink);
}
body.v2-blog .post-body h2 {
  font-size: clamp(1.3rem, 2vw, 1.62rem);
  letter-spacing: -.026em;
  margin: 2.3em 0 .55em;
  padding-top: .85em;
  border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
}
body.v2-blog .post-body h2::before {
  content: ""; display: block; width: 26px; height: 3px;
  background: var(--lime); margin-bottom: 14px;
}
body.v2-blog .post-body h3 {
  font-size: 1.12rem; letter-spacing: -.015em; margin: 1.9em 0 .5em;
}
body.v2-blog .post-body a { text-decoration: underline; text-decoration-color: rgba(36,74,169,.35); text-underline-offset: 2px; }
body.v2-blog .post-body a:hover { text-decoration-color: var(--royal); }
body.v2-blog .post-body blockquote {
  margin: 1.8em 0; padding: 20px 24px;
  background: var(--mist);
  border-left: 3px solid var(--lime);
  border-radius: 0 12px 12px 0;
  font-size: 1.02rem; color: var(--ink);
}
body.v2-blog .post-body blockquote p:last-child { margin-bottom: 0; }
body.v2-blog .post-body ul, body.v2-blog .post-body ol { padding-left: 1.25em; }
body.v2-blog .post-body li { margin-bottom: .5em; }
body.v2-blog .post-body li::marker { color: var(--royal); }
body.v2-blog .post-body table {
  width: 100%; border-collapse: collapse; margin: 1.8em 0;
  font-size: .92rem; border: 1px solid var(--line);
}
body.v2-blog .post-body th {
  background: var(--mist); text-align: left;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate-2); font-weight: 500;
}
body.v2-blog .post-body th, body.v2-blog .post-body td {
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
body.v2-blog .post-body tr:last-child td { border-bottom: 0; }
body.v2-blog .post-body img { border-radius: 12px; }

/* inline contents for tablets */
body.v2-blog .post-toc-inline {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--mist); padding: 4px 16px; margin-bottom: 26px;
}
body.v2-blog .post-toc-inline summary {
  padding: 12px 0; font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--royal);
  cursor: pointer; list-style: none;
}
body.v2-blog .post-toc-inline summary::-webkit-details-marker { display: none; }
body.v2-blog .post-toc-inline .toc-count { color: var(--slate-2); }

/* ---------- article foot ---------- */
body.v2-blog .post-foot-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime);
  border-radius: 0 14px 14px 0;
  background: var(--mist);
  padding: 24px 26px;
}
body.v2-blog .post-foot-title { color: var(--ink); }
body.v2-blog .post-foot-text { color: var(--slate); }
body.v2-blog .post-foot-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
body.v2-blog .post-foot-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; color: var(--royal);
}
body.v2-blog .post-updated {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate-2);
}

@media (max-width: 1080px) {
  body.v2-blog .post-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
  body.v2-blog .post-list > li:first-child { grid-column: span 2; grid-row: auto; }
  body.v2-blog .post-layout { grid-template-columns: minmax(0,1fr); gap: 0; padding: 32px 0 52px; }
  body.v2-blog .post-rail { display: none; }
  body.v2-blog .post-toc-inline { display: block; }
  body.v2-blog .post-content { grid-column: 1; }
}
@media (max-width: 760px) {
  body.v2-blog .post-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  body.v2-blog .post-list > li:first-child { grid-column: span 2; }
  body.v2-blog .post-list > li:first-child .post-card-body { padding: 20px 18px; }
  body.v2-blog .archive-head { padding: 40px 0 34px; }
  body.v2-blog .post-head { padding: 22px 0 34px; }
}
@media (max-width: 560px) {
  body.v2-blog .post-list { grid-template-columns: minmax(0,1fr); }
  body.v2-blog .post-list > li:first-child { grid-column: span 1; }
  body.v2-blog .post-body { font-size: 1rem; }
}

/* ---------- archive category chips on a phone -------------------------
   Fifteen category links, 2,100px wide in total. The inherited mobile rule
   made them one swipeable row, but nothing said so: the row ended mid-chip at
   the screen edge and thirteen of the fifteen were unreachable unless you
   happened to swipe. Three changes:

   1. A fade at the trailing edge, so the row reads as continuing rather than
      as clipped. It disappears once the row is scrolled to its end, or once
      the full list is on screen.
   2. A control that expands the row to the complete wrapped list. Built by
      v2.js, so with scripting off the row stays scrollable and every chip is
      still reachable - degraded, not broken.
   3. Chips are never narrower than their label, and the row carries scroll
      padding so the first and last pill are not half-tucked under the gutter. */
body.v2-blog .chip-row {
  scroll-padding-inline: 4px;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 60px), transparent 100%);
}
body.v2-blog .chip-row.is-at-end,
body.v2-blog .chip-row.is-expanded {
  -webkit-mask-image: none;
  mask-image: none;
}
body.v2-blog .chip-row.is-expanded {
  flex-wrap: wrap;
  overflow-x: visible;
}
body.v2-blog .chip-row.is-expanded > li { flex: 0 1 auto; }
body.v2-blog .chip-row .chip { max-width: 78vw; }

/* The expander. Sits on the dark archive head, so it is lime on navy rather
   than the page's default link colour. */
body.v2-blog .chip-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 8px 14px 8px 12px;
  border: 1px solid rgba(131,181,64,.45);
  border-radius: 999px;
  background: rgba(131,181,64,.1);
  color: #DCEDC4;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
body.v2-blog .chip-more:hover { background: rgba(131,181,64,.2); border-color: rgba(131,181,64,.8); color: #fff; }
body.v2-blog .chip-more:focus-visible { outline: 2px solid #83B540; outline-offset: 2px; }
body.v2-blog .chip-more svg { transition: transform .18s ease; }
body.v2-blog .chip-more[aria-expanded="true"] svg { transform: rotate(180deg); }
/* A button has no place on a wide screen, where the whole set already shows. */
@media (min-width: 681px) { body.v2-blog .chip-more { display: none; } }



/* ---- 4. Blog and article layout ---- */

/* ==========================================================================
   Blog system — index, archives and article pages
   Generated by build/render-blog.mjs from build/data/posts.json.
   Deliberately built on the existing tokens so an article page reads as part of
   the same site rather than a bolted-on WordPress theme.
   ========================================================================== */

/* ---------- Index / archive head ---------- */
.archive-head { padding: 44px 0 32px; }
.archive-head h1 { max-width: 26em; }
.archive-lede {
  color: var(--slate);
  font-size: 1.075rem;
  line-height: 1.6;
  max-width: 46em;
  margin: 14px 0 0;
  text-wrap: pretty;
}
/* Count and most-recent date, immediately under the intro: the two facts that
   tell a reader whether a section is live or has gone quiet. */
.archive-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.archive-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
/* The standing description of the section. Smaller and separated, so it reads as
   editorial context rather than a second headline paragraph. */
.archive-note {
  max-width: 44em;
  margin: 22px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--line);
  color: var(--slate-light);
  font-size: .925rem;
  line-height: 1.65;
  text-wrap: pretty;
}

/* ---------- Category chips ---------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--slate);
  font-size: .845rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.chip:hover { border-color: var(--royal); color: var(--royal); }
.chip .n { color: var(--slate-light); font-family: var(--font-mono); font-size: .74rem; }
.chip[aria-current="page"] {
  background: var(--royal);
  border-color: var(--royal);
  color: #fff;
}
.chip[aria-current="page"] .n { color: rgba(255,255,255,.75); }

/* ---------- Featured post ---------- */
.featured {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.featured { grid-template-columns: 1.05fr .95fr; align-items: stretch; }
.featured:hover { border-color: #C9D2E4; box-shadow: var(--shadow); }
.featured-body { padding: 38px 38px 34px; display: flex; flex-direction: column; justify-content: center; }
/* The image is absolutely positioned inside its column. Sizing it with
   height:100% inside an auto-height column makes the browser fall back to the
   picture's intrinsic ratio, and a portrait 4:5 source then forced the whole
   hero card to 680px tall. Taking the image out of flow means the row height is
   set by the copy, which is the dimension that should decide it. */
.featured-media {
  background: var(--mist-blue);
  position: relative;
  overflow: hidden;
  min-height: 300px;
  order: 1;
}
.featured-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.featured-media.is-empty span { text-align: left; }
.featured h2 {
  font-size: clamp(1.4rem, 2.3vw, 1.95rem);
  margin: 12px 0 14px;
  letter-spacing: -.022em;
  line-height: 1.2;
  text-wrap: balance;
}
.featured p {
  color: var(--slate);
  margin: 0 0 22px;
  font-size: .98rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Sits above the category: this card is the one hand-picked slot on the index,
   so it says so rather than leaving the reader to infer it from size. */
.featured-flag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.featured .post-card-cat { display: block; }

/* Section heading above the grid. The index needs a named start: a page that
   goes straight from the featured card into nine cards has no rhythm. */
.list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 40px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.list-head h2 {
  font-size: 1.16rem;
  margin: 0;
  letter-spacing: -.015em;
}
.list-count {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--slate-light);
}

/* ---------- Post list ---------- */
.post-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Grid stretches the <li>, but a block child inside it keeps its own height, so
   cards in one row ended at different points (415px next to 460px) and the date
   line floated mid-card. Making the list item a flex container and the card
   flex:1 makes every card in a row the same height, and the meta row - which has
   margin-top:auto - then sits on the same baseline across the row. */
.post-list > li { display: flex; }
.post-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.post-card:hover {
  border-color: #C9D2E4;
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.post-card-media {
  aspect-ratio: 16 / 9;
  background: var(--mist-blue);
  overflow: hidden;
}
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Archive strip (photographed briefings) ---------- */
/* The newest briefings are text-only, so a single photograph keeps the front
   page from becoming a wall of type. Dates are printed, so nothing implies
   these are current. */
.archive-strip { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--line); }
.strip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.strip-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.strip-card:hover { border-color: #C9D2E4; box-shadow: var(--shadow-sm); }
.strip-copy { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.strip-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--mist-blue);
}
.strip-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strip-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.36;
  letter-spacing: -.012em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.strip-card .post-card-meta { margin-top: 2px; }
/* Text-only posts still get media space, but not a pale placeholder: an empty
   tinted panel repeated down the grid reads as a missing photograph, and two
   thirds of the live posts carry no picture at all. They get an ink cover
   instead — kicker, subject, ruled paper — so an image-less entry looks
   designed rather than broken. Three close navy tints keep the row cohesive. */
.post-card-media.is-empty,
.featured-media.is-empty {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px;
  overflow: hidden;
  background: linear-gradient(152deg, #0C1730 0%, #13264B 58%, #1A3466 100%);
}
.is-empty.tone-indigo { background: linear-gradient(152deg, #0F1A3D 0%, #1C2B62 58%, #2A3D80 100%); }
.is-empty.tone-deep { background: linear-gradient(152deg, #08121F 0%, #0E1C33 55%, #143259 100%); }
/* Ruled paper, fading out towards the top so the cover keeps depth. */
.post-card-media.is-empty::after,
.featured-media.is-empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(116deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 24px);
  -webkit-mask-image: linear-gradient(180deg, transparent 22%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 22%, #000 100%);
  pointer-events: none;
}
.plate-kicker {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.plate-cat {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.012em;
  color: #fff;
  text-wrap: balance;
}
.featured-media.is-empty { padding: 30px 32px; }
.featured-media.is-empty .plate-kicker { font-size: .66rem; }
.featured-media.is-empty .plate-cat { font-size: clamp(1.3rem, 2.1vw, 1.7rem); }
.post-card-media { position: relative; }
.post-card-body { padding: 22px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.post-card-cat {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--royal);
}
.post-card h3 {
  font-size: 1.065rem;
  line-height: 1.34;
  margin: 9px 0 9px;
  letter-spacing: -.015em;
  /* Three lines: card headlines are cleaned to the shape that fits (see
     cardTitle() in fetch-posts.mjs), so this clamp is a backstop for the
     occasional long one rather than the normal cut. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card p {
  color: var(--slate);
  font-size: .915rem;
  line-height: 1.55;
  margin: 0 0 16px;
  /* Four lines fits a complete sentence, which is what the summary is built
     from. Two lines cut it mid-clause and looked like a broken excerpt. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  color: var(--slate-light);
}
.post-card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

/* ---------- Archive rows ---------- */
.post-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.post-rows li { border-bottom: 1px solid var(--line); }
.post-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 4px;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.post-row:hover { background: var(--mist); }
.post-row:hover .post-row-title { color: var(--royal); }
/* 3:2 thumbnail keeps the archive scannable without turning it into a card grid. */
.post-row-thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--mist-blue);
}
.post-row-thumb.is-empty {
  background: linear-gradient(152deg, #0C1730 0%, #13264B 58%, #1A3466 100%);
}
.post-row-title {
  font-family: var(--font-display);
  font-size: 1.045rem;
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -.01em;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
  transition: color .15s ease;
  /* Two lines: full titles run past 120 characters on the live posts, which made
     rows wildly uneven. The title stays complete in the DOM (and on the article),
     so this is a visual clamp only. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-row-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .79rem;
  color: var(--slate-light);
  white-space: nowrap;
}

/* ---------- Pagination ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.pager-pages { display: flex; gap: 6px; flex-wrap: wrap; }
.pager a, .pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .9rem;
  font-weight: 500;
  color: var(--slate);
  text-decoration: none;
}
.pager a:hover { border-color: var(--royal); color: var(--royal); }
.pager [aria-current="page"] { background: var(--royal); border-color: var(--royal); color: #fff; }
.pager .is-disabled { opacity: .45; pointer-events: none; }

/* ---------- Article ---------- */
.post-head {
  background: linear-gradient(165deg, var(--navy) 0%, #13224A 100%);
  color: #fff;
  padding: 30px 0 42px;
  position: relative;
  overflow: hidden;
}
.post-head::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 80% at 25% 0%, #000, transparent 75%);
}
.post-head .wrap { position: relative; }
.post-head h1 {
  color: #fff;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -.028em;
  margin: 14px 0 0;
  max-width: 21em;
  text-wrap: balance;
}
/* Kicker: subject, then read time. On the dark header a pill would compete with
   the headline, so it is set as a quiet monospace line that names the section
   and nothing more. */
.post-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9FB2D4;
}
.post-kicker a { color: #C7E89A; text-decoration: none; }
.post-kicker a:hover { text-decoration: underline; }
.kicker-sep { width: 18px; height: 1px; background: rgba(255,255,255,.28); }

/* Standfirst. This is the article's own opening paragraph, lifted out of the
   body by fetch-posts.mjs, so it must read as prose rather than a caption. */
.post-standfirst {
  margin: 20px 0 0;
  max-width: 34em;
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.62;
  color: #C3D0E6;
  text-wrap: pretty;
}

/* Byline. Author, then published and updated dates: a reader checking whether a
   rule still applies needs the update date far more than the publish date. */
.post-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  max-width: 34em;
}
.byline-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(131,181,64,.18);
  border: 1px solid rgba(131,181,64,.4);
  color: #D2EEAA;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 600;
}
.byline-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.byline-name { color: #fff; font-size: .875rem; font-weight: 600; }
.byline-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: #93A6C8;
}
.byline-dates .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }

/* Reading progress: a 3px lime rule that fills with scroll position. It sits
   just below the sticky header, which is why it reads --header-h (set by
   blog.js) rather than top: 0, where the header's own background would hide it.
   Pure decoration, so it is hidden from assistive tech in the markup. */
.read-progress {
  position: fixed;
  top: var(--header-h, 0px);
  left: 0;
  right: 0;
  height: 3px;
  z-index: 89;
  background: transparent;
  pointer-events: none;
}
.read-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--lime);
  transform-origin: 0 50%;
}

/* Article grid: contents rail on the left, prose on the right. The pair is
   centred rather than stretched, so the measure stays readable on a 1920px
   screen instead of running to ~92 characters per line. */
.post-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 35rem);
  justify-content: center;
  gap: 60px;
  align-items: start;
  padding: 46px 0 56px;
}
/* The template above assumes two children: rail, then prose. When an article
   has no H2s there is no contents rail, .post-content becomes the only child,
   and auto-placement drops it into the 236px rail track - the prose renders as
   a ~236px column with 560px of dead space beside it. Pin the prose to its own
   track and collapse the template when the layout is marked railless. */
.post-content {
  grid-column: 2;
  min-width: 0;
}
.post-layout--no-rail { grid-template-columns: minmax(0, 35rem); }
.post-layout--no-rail .post-content { grid-column: 1; }
.post-rail { position: sticky; top: 96px; }
/* Mobile/tablet replacement for the sticky contents rail: a native <details>
   so the article still has jump links without a column that cannot stick. */
.post-toc-inline { display: none; }

/* The rail is a card, not a floating list: a 12-section article needs its
   structure to look like part of the page, and a bordered card also gives the
   active-section marker something to move along. */
.rail-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  padding: 18px 18px 14px;
}
.rail-title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.post-toc { list-style: none; margin: 0; padding: 0; }
.post-toc li { margin: 0; }
.post-toc a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 0;
  color: var(--slate);
  font-size: .845rem;
  line-height: 1.42;
  text-decoration: none;
  border-left: 0;
  transition: color .12s ease;
}
.post-toc a .n {
  font-family: var(--font-mono);
  font-size: .68rem;
  line-height: 1.7;
  color: var(--slate-light);
  transition: color .12s ease;
}
.post-toc a:hover { color: var(--royal); }
.post-toc a:hover .n { color: var(--royal); }
.post-toc a.is-active { color: var(--ink); font-weight: 600; }
.post-toc a.is-active .n { color: var(--lime-deep, #6E9A2E); }
.post-toc a.is-active span:last-child::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-top: 6px;
  background: var(--lime);
  border-radius: 2px;
}
.rail-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--slate-light);
}
.rail-foot a { color: var(--slate); text-decoration: none; }
.rail-foot a:hover { color: var(--royal); }

/* Prose. Capped at 38rem (~72 characters at this size): measure is the single
   biggest determinant of how tiring a 1,000-word tax article feels.

   SPACING — read this before changing any margin here. Paragraphs are split to
   ~26 words by fetch-posts.mjs, so the gap between them carries the whole
   rhythm. It must be at least one full line box (1.72 × 1.055rem ≈ 29px) or the
   column reads as continuous prose. The reset is therefore written on the
   DIRECT CHILD (`.post-body > *`), not on `p`: an earlier `.post-body p
   { margin: 0 }` had higher specificity than the sibling rule below, so it
   silently zeroed every paragraph gap (measured: computed margin-top 0px). */
.post-body {
  max-width: 100%;
  font-size: 1.06rem;
  line-height: 1.75;
  color: #26313F;
  text-wrap: pretty;
  /* A long URL, an Amazon SKU or a pasted form token is otherwise wider than
     the measure and forces the whole page into horizontal scroll. */
  overflow-wrap: break-word;
}
/* Media and code that arrive from the editor are not guaranteed to be sized
   for the column: bare <img> tags pasted into a post have no max-width, and a
   <pre> block runs to whatever width its longest line is. */
.post-body img,
.post-body iframe,
.post-body video,
.post-body embed {
  max-width: 100%;
  height: auto;
}
.post-body pre {
  overflow-x: auto;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--mist);
  font-size: .88rem;
  line-height: 1.6;
}
.post-body > * { margin: 0; }
/* One full line box of space between paragraphs: 1.7em of a 1.055rem body at
   line-height 1.72 is ~28.7px against a 29px line, so the gap reads as a real
   blank line rather than a nudge. Sir's floor was "at least one space gap". */
.post-body > * + * { margin-top: 1.7em; }
/* The opening paragraph used to be enlarged here. It should not be any more:
   the first paragraph is now the standfirst in the header, so the body starts
   mid-argument and every paragraph should carry equal reading weight. */
.post-body h2 {
  font-size: clamp(1.35rem, 2.1vw, 1.6rem);
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-top: 2.5em;
  margin-bottom: .5em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.post-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* A heading hugs the paragraph under it: that gap is what makes the heading
   belong to the text below rather than float between two blocks. */
.post-body h2 + p { margin-top: .3em; }
.post-body h3 {
  font-size: 1.16rem;
  line-height: 1.35;
  color: var(--ink);
  margin-top: 2.1em;
  margin-bottom: .35em;
  scroll-margin-top: 100px;
}
.post-body h3 + p { margin-top: .25em; }
.post-body ul, .post-body ol { padding-left: 1.35em; }
.post-body li { margin: .4em 0; }
.post-body li::marker { color: var(--royal); }
.post-body a { color: var(--royal); text-decoration: underline; text-underline-offset: 2px; }
.post-body a:hover { color: var(--royal-deep); }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body blockquote {
  margin: 1.8em 0;
  padding: 18px 24px;
  border-left: 3px solid var(--lime);
  background: var(--mist);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--slate);
}
/* Figures break the column rhythm: a picture every few paragraphs is what makes
   a 1,000-word piece scannable, so they get more air than a paragraph. */
.post-body figure {
  margin: 2em 0;
  padding: 0;
}
.post-body figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
  border: 1px solid var(--line);
  margin: 0;
}
.post-body figcaption {
  margin-top: 10px;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--slate-light);
  padding-left: 12px;
  border-left: 2px solid var(--lime);
}
.post-body > figure + p { margin-top: 1.45em; }
.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
  margin: 1.8em 0;
}
.post-body th, .post-body td {
  border: 1px solid var(--line);
  padding: 10px 13px;
  text-align: left;
  vertical-align: top;
}
.post-body th { background: var(--mist); font-weight: 600; }
/* A table from the editor is only as narrow as its columns allow. On a phone
   a four-column table is wider than the viewport, so let it scroll inside its
   own box rather than pushing the whole article sideways. Desktop keeps normal
   table layout, where the width is not a problem. */
@media (max-width: 680px) {
  .post-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Article footer: what this is and who stands behind it, as a card. A bare
   sentence under the last paragraph reads like a disclaimer no one wrote; a
   bordered block with the author mark, the review statement and a way to act on
   it reads like the publisher's note it actually is. */
.post-foot {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.post-foot-card {
  display: flex;
  gap: 14px;
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #FBFCFD;
}
.post-foot-card .byline-avatar {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  flex: none;
}
.post-foot-title {
  margin: 0 0 6px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}
.post-foot-text {
  margin: 0;
  font-size: .86rem;
  line-height: 1.62;
  color: var(--slate-light);
  max-width: 46em;
}
.post-foot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}
.post-foot-link {
  font-size: .86rem;
  font-weight: 600;
  color: var(--royal);
  text-decoration: none;
  border-bottom: 1px solid rgba(31,63,138,.25);
  padding-bottom: 1px;
}
.post-foot-link:hover { color: var(--royal-deep); border-bottom-color: var(--royal-deep); }
.post-updated { font-family: var(--font-mono); font-size: .72rem; color: var(--slate-light); }

/* ---------- Related ----------
   Deliberately rows, not cards. The index is a card grid; if the foot of every
   article were the same grid, the reader would scroll into a second index and
   lose the sense of having finished the piece. Thumbnail + title + date is a
   "next, if you want" list. */
.related { padding: 44px 0 56px; border-top: 1px solid var(--line); }
.related-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 20px;
}
.related h2 { font-size: 1.24rem; margin: 0; letter-spacing: -.015em; }
.related-all {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--slate-light);
  text-decoration: none;
}
.related-all:hover { color: var(--royal); }
.rel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rel-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 14px 12px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
}
.rel-row:hover { background: var(--mist); border-color: var(--line); }
.rel-row img, .rel-thumb-empty {
  width: 128px;
  height: 86px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--mist-blue);
}
.rel-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rel-cat {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.rel-title {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.34;
  color: var(--ink);
  letter-spacing: -.012em;
}
.rel-row:hover .rel-title { color: var(--royal); }
.rel-meta { font-family: var(--font-mono); font-size: .68rem; color: var(--slate-light); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .post-list { grid-template-columns: repeat(2, 1fr); }
  .post-layout { grid-template-columns: 1fr; gap: 0; padding: 34px 0 44px; }
  /* Single column: release the desktop track placement or the prose is pinned
     to an implicit second track and the article renders as a sliver again. */
  .post-content { grid-column: 1; }
  /* The contents rail is useless stacked above a long article on a phone, so it
     becomes a collapsed <details> — see .post-toc-inline. */
  .post-rail { display: none; }
  .post-toc-inline {
    display: block;
    margin: 24px 0 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--mist);
  }
  .post-toc-inline summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .post-toc-inline summary::-webkit-details-marker { display: none; }
  .post-toc-inline summary::after {
    content: "+";
    font-size: 1rem;
    line-height: 1;
    color: var(--slate);
  }
  .post-toc-inline[open] summary::after { content: "\2212"; }
  .post-toc-inline .toc-count {
    margin-left: auto;
    font-family: var(--font-body);
    font-size: .72rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--slate-light);
  }
  .post-toc-inline .post-toc { border-left: 0; padding: 0 16px 12px; }
  .post-toc-inline .post-toc a { padding-left: 0; border-left: 0; }
  /* (The old `.post-toc-inline + .post-layout` rule lived here. It could never
     match: the inline contents block is rendered inside .post-content, so it is
     never a sibling of .post-layout.) */
  .featured { grid-template-columns: 1fr; }
  .featured-media { min-height: 200px; order: -1; }
}

@media (max-width: 680px) {
  .strip-grid { grid-template-columns: 1fr; gap: 14px; }
  .strip-card { flex-direction: row; align-items: flex-start; gap: 14px; padding: 10px; }
  .strip-media { width: 104px; flex: 0 0 104px; margin-bottom: 0; }
  .strip-title { -webkit-line-clamp: 3; }
  /* Sixteen category pills wrapped onto nine lines on a phone, pushing the first
     article far below the fold. One swipeable row instead. */
  .chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-top: 20px;
    padding-bottom: 4px;
  }
  .chip-row::-webkit-scrollbar { display: none; }
  /* The flex item is the <li>, not the anchor: without pinning both, the row
     shrinks each item to its min-content width and every pill wraps to two lines. */
  .chip-row > li { flex: 0 0 auto; display: flex; }
  .chip { flex: 0 0 auto; scroll-snap-align: start; }
  .post-list { grid-template-columns: 1fr; gap: 18px; }
  .archive-head { padding: 32px 0 24px; }
  .post-head { padding: 24px 0 30px; }
  .post-standfirst { margin-top: 16px; font-size: 1rem; line-height: 1.6; }
  .post-byline { margin-top: 20px; padding-top: 16px; }
  .byline-dates { font-size: .68rem; }
  .post-foot-card { flex-direction: column; gap: 12px; padding: 18px; }
  .rel-row { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px 4px; }
  .rel-row img, .rel-thumb-empty { width: 96px; height: 66px; }
  .rel-title { font-size: .96rem; }
  .related-head { margin-bottom: 14px; }
  .featured-body { padding: 26px 22px; }
  .list-head { margin-top: 30px; }
  .post-body { font-size: 1.015rem; line-height: 1.7; }
  .post-body h2 { margin-top: 1.7em; }
  .pager { flex-wrap: wrap; }
  /* Page numbers wrap rather than push the document wider than the screen
     (measured 374px of content on a 360px phone before this rule). */
  .pager-pages { flex-wrap: wrap; }
  .pager a, .pager span { min-width: 34px; height: 34px; padding: 0 9px; font-size: .84rem; }
  /* Stack the row meta under the title, with the thumbnail beside both: side by
     side at 320px the title is forced into a column too narrow to read. */
  .post-row {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 4px 14px;
    padding: 14px 2px;
  }
  .post-row-thumb { grid-row: span 2; width: 72px; height: 48px; }
  .post-row-title { grid-column: 2; font-size: 1rem; }
  .post-row-meta { grid-column: 2; white-space: normal; }
}


/* ---- 5. WordPress integration ---- */

/* ==========================================================================
   WordPress integration layer
   --------------------------------------------------------------------------
   Appended to the concatenated design system by build/build-theme.ps1.

   The prototype was a static site, so it never had to satisfy WordPress
   requirements: the accessibility helper class, the editor's alignment
   classes, the admin bar offset for a sticky header, and the classic-theme
   image/caption defaults. Nothing here restyles the approved design - it only
   stops WordPress from rendering unstyled output inside it.
   ========================================================================== */

/* ---------- Accessibility helpers WordPress relies on ---------- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
  clip: auto !important;
  clip-path: none;
  color: var(--royal);
  display: block;
  font-size: .875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}
.skip-link:focus { position: fixed; }
#primary:focus-visible { outline: none; }

/* ---------- Admin bar ----------
   .site-header is position:sticky with top:0, so the WordPress admin bar would
   otherwise sit underneath it while an editor is signed in. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* ---------- Media defaults ---------- */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
}
img { height: auto; }

/* ---------- Classic editor alignment and captions ---------- */
.alignleft {
  float: left;
  margin: .4em 1.6em 1.2em 0;
}
.alignright {
  float: right;
  margin: .4em 0 1.2em 1.6em;
}
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.alignnone { margin: 0; }
.alignwide,
.alignfull {
  width: 100%;
  max-width: 100%;
}
.wp-caption {
  max-width: 100%;
  margin-bottom: 1.2em;
}
.wp-caption img { display: block; }
.wp-caption-text,
.wp-caption .wp-caption-text {
  color: var(--slate-light);
  font-family: var(--font-mono, monospace);
  font-size: .74rem;
  letter-spacing: .04em;
  margin-top: .55em;
}
.post-body .wp-caption-text { margin-top: .6em; }

/* ---------- Galleries ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 1.6em 0;
}
.gallery-item { margin: 0; }
.gallery img { display: block; }
.gallery-caption { margin-top: .5em; }

/* ---------- Editor block output that the archive already contains ---------- */
.wp-block-image figure { margin: 0; }
.wp-block-image img { display: block; }
.wp-block-quote,
.wp-block-pullquote {
  border-left: 3px solid var(--lime);
  margin: 1.6em 0;
  padding-left: 1.15em;
}
.wp-block-pullquote { border-left: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.2em 0; }
.wp-block-table { width: 100%; overflow-x: auto; }
.wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.wp-block-button__link { border-radius: 999px; }
.wp-block-group.has-background { padding: 1.5em 1.5em; border-radius: 12px; }
.wp-block-embed { margin: 1.6em 0; }
.wp-block-embed__wrapper { position: relative; }
.wp-has-aspect-ratio .wp-block-embed__wrapper::before { content: ""; display: block; padding-top: 56.25%; }
.wp-has-aspect-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
figcaption { text-align: left; }

/* ---------- Comment form (comments are closed, but never unstyled) ---------- */
.comment-respond,
.comment-list { margin-top: 2em; }
.comment-list { list-style: none; padding: 0; }
.comment-list .comment-body {
  border-top: 1px solid var(--line);
  padding: 1.1em 0;
}

/* ---------- Password-protected and paginated posts ---------- */
.post-password-form input[type="password"] {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.page-links {
  color: var(--slate-light);
  font-family: var(--font-mono, monospace);
  font-size: .8rem;
  margin-top: 2em;
}
.page-links a { color: var(--royal); }

/* ---------- Search form ---------- */
.search-form { display: flex; gap: 10px; flex-wrap: wrap; }
.search-form input[type="search"] {
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  padding: 12px 18px;
  min-width: 0;
  flex: 1 1 220px;
}

/* ---------- 404 ---------- */
.error-404 .hero-cta { margin-top: 26px; }

/* ---------- WebP picture wrapper ---------- */
/* The <picture> element is inserted around an image only when inc/media.php has
   a WebP sibling for every candidate it offers. display:contents removes the
   wrapper box so the layout is byte-for-byte the img layout it replaced - the
   element exists for the browser's format choice, not for layout. */
picture { display: contents; }