/* ==========================================================================
   Vervy Lin — design system
   1. Tokens & reset
   2. Typography
   3. Layout primitives
   4. Header & navigation
   5. Hero
   6. Sections & components
   7. Shortcode components
   8. Forms
   9. Editorial (posts, prose)
   10. Footer
   11. Utilities, motion, print
   ========================================================================== */

/* 1. Tokens & reset ------------------------------------------------------- */
:root {
  --bone: #f6f1e8;
  --paper: #fbf8f2;
  --ink: #16181a;
  --ink-soft: #3d4145;
  --muted: #6b6760;
  --line: #ded6c8;
  --line-strong: #c9bfae;
  --green: #1b3029;
  --green-deep: #16261f;
  --green-soft: #2c463c;
  --clay: #a2643f;
  --clay-soft: #f0e2d4;
  --sand: #e9e0d0;

  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
  --step-2: clamp(1.375rem, 1.28rem + 0.5vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.55rem + 0.9vw, 2.25rem);
  --step-4: clamp(2.125rem, 1.75rem + 1.7vw, 3.125rem);
  --step-5: clamp(2.5rem, 1.9rem + 2.8vw, 4.25rem);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 66ch;
  --radius: 2px;
  --shadow-sm: 0 1px 2px rgba(22, 24, 26, 0.05), 0 8px 24px -18px rgba(22, 24, 26, 0.4);
  --shadow-md: 0 2px 6px rgba(22, 24, 26, 0.06), 0 24px 60px -40px rgba(22, 24, 26, 0.55);
  --ease: cubic-bezier(0.2, 0.7, 0.25, 1);
}

/* Per-market colour tone. The active market (region-* on <body>) remaps the
   brand tokens so every region reads as its own premium palette while the
   structural design stays identical. GB is intentionally left at the original
   tokens, so the UK view is unchanged. */
.region-us  { --green: #1f2a3a; --green-deep: #18222f; --clay: #b8502f; --clay-soft: #f2ddd4; }
.region-eu  { --green: #16323a; --green-deep: #102a31; --clay: #9c6f1a; --clay-soft: #f0e7d2; }
.region-me  { --green: #112e33; --green-deep: #0c2529; --clay: #9e6f1c; --clay-soft: #f1e6cf; }
.region-sea { --green: #2a1d33; --green-deep: #211828; --clay: #9c3f6b; --clay-soft: #f3dde6; }
/* GB keeps the original tokens (no override needed). */


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

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--green); }
button { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
::selection { background: var(--green); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--green);
  color: var(--paper);
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* 2. Typography ----------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 0.6em;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
h1, h2 { font-family: var(--font-display); }
h1 { font-size: var(--step-5); letter-spacing: -0.02em; }
h2 { font-size: var(--step-4); }
h3 {
  font-family: var(--font-body);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.28;
}
h4 {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
small { font-size: var(--step--1); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
.section--dark .eyebrow { color: #c9a488; }

.lead {
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 60ch;
  text-wrap: pretty;
}
.lead--lg { font-size: var(--step-2); line-height: 1.5; max-width: 52ch; }
.serif-italic { font-family: var(--font-display); font-style: italic; }
.num {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* 3. Layout primitives ---------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 900px; }
.section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.section--flush { padding-block: 0; }
.section--paper { background: var(--paper); }
.section--sand { background: var(--sand); }
.section--dark {
  background: var(--green);
  color: #efe8da;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #faf6ec; }
.section--dark .lead, .section--dark p { color: #d3d8cd; }
.section--dark .prose a,
.section--dark p a,
.section--dark li a { color: #f2ead9; }
.section--dark .btn { color: var(--paper); }
.section--dark .btn--light { color: var(--green-deep); border-color: var(--paper); }
.section--dark .btn--light:hover { color: var(--green-deep); }
.section--dark .btn--ghost { color: #f2ead9; border-color: rgba(239, 232, 218, 0.45); }
.section--dark .btn--ghost:hover { background: rgba(250, 246, 236, 0.08); color: #fff; }
/* v1.6.0: pull-quotes inherit the dark ink colour by default, which is
   unreadable on the dark green. Force the light palette inside dark sections. */
.section--dark .vl-pullquote { color: #faf6ec; }
.section--dark .vl-pullquote::before { color: #c9a488; }
.section--dark .vl-pullquote cite { color: #b9c3b8; }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse .split__media { order: -1; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section-head > div { max-width: 62ch; }
.section-head h2 { margin-bottom: 0; }
.section-head p { margin-top: 0.9rem; color: var(--muted); max-width: 52ch; }
.section--dark .section-head p { color: #b9c3b8; }

.rule-top { border-top: 1px solid var(--line); }
.section--dark .rule-top { border-color: rgba(239, 232, 218, 0.22); }

/* 4. Header & navigation -------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(246, 241, 232, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 1.75rem);
  min-height: 5.25rem;
  max-width: 1360px;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}
.brand__suffix {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--muted);
	position: relative;
	top: 0.04em;
}
.brand:hover { color: var(--ink); }

.nav { display: flex; align-items: center; gap: 1rem; }
.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.25vw, 1.35rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav li { position: relative; }
.nav a {
  display: inline-block;
  padding: 0.55rem 0;
  font-size: 0.9375rem;
  white-space: nowrap;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: color 0.18s var(--ease);
}
.nav a:hover { color: var(--green); }
.nav .current-menu-item > a,
.nav .current-menu-parent > a,
.nav .current_page_parent > a {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--ink);
}
.nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  margin-left: 0.45rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}
.nav .sub-menu {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: -1rem;
  min-width: 16rem;
  display: block;
  padding: 0.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
  z-index: 20;
}
.nav .sub-menu li { display: block; }
.nav .sub-menu a {
  display: block;
  padding: 0.65rem 0.8rem;
  font-size: 0.9375rem;
  line-height: 1.35;
  white-space: normal;
}
.nav .sub-menu a:hover { background: var(--bone); color: var(--ink); }
.nav .sub-menu .menu-item-has-children > a::after { display: none; }
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.header-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Region switcher: a clearly visible market picker. The accent border and
   colour make it read as a deliberate control rather than a faint utility. */
.region-switcher {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.55rem 0.28rem 0.7rem;
  border: 1.5px solid var(--clay);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.region-switcher__icon { color: var(--clay); display: inline-flex; }
.region-switcher__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--clay);
  white-space: nowrap;
}
.region-switcher__field { position: relative; display: inline-flex; align-items: center; }
.region-switcher__field::after {
  content: "";
  position: absolute;
  right: 0.2rem;
  width: 6px; height: 6px;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg) translateY(-1px);
  pointer-events: none;
}
.region-switcher__select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 0.2rem 1.4rem 0.2rem 0.1rem;
  cursor: pointer;
  max-width: 13rem;
}
.region-switcher__select:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
/* Brief attention pulse when "Change market" in the confirmation bar points
   the visitor at this control. */
.region-switcher--attention { animation: vlSwitcherPulse 0.9s ease-in-out 2; }
@keyframes vlSwitcherPulse {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50%      { box-shadow: 0 0 0 4px var(--clay-soft), 0 0 0 5px var(--clay); }
}
@media (prefers-reduced-motion: reduce) {
  .region-switcher--attention { animation: none; outline: 2px solid var(--clay); outline-offset: 3px; }
}

/* Region confirmation bar: rendered in normal flow at the top, so it never
   overlaps content. It confirms the edition already on screen. */
.region-notice {
  background: var(--green);
  color: #f2ead9;
}
.region-notice__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  flex-wrap: wrap;
}
.region-notice__text { margin: 0; font-size: 0.9rem; line-height: 1.4; flex: 1 1 18rem; }
.region-notice__actions { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; }
/* A compact, self-contained button: reusing .btn here lets its nowrap text
   overflow onto the dismiss link when the flex row is squeezed. */
.region-notice__change {
  flex: 0 0 auto;
  background: #f2ead9;
  color: var(--green);
  border: 1px solid #f2ead9;
  border-radius: var(--radius);
  padding: 0.36rem 0.8rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.region-notice__change:hover { background: #fff; }
.region-notice__change:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.region-notice__dismiss {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: #d7e0d4;
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.region-notice__dismiss:hover { color: #fff; }
.header-phone {
  font-size: 0.875rem;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.02em;
}

/* Contact details live inside the mobile drawer, not crammed into the
   desktop nav row. Shown only at the drawer breakpoint. */
.nav__contact {
  display: none;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.nav__contact-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
}
.nav__contact a {
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
}
.nav__contact a:hover { color: var(--green); }
.nav-toggle__label {
  margin-right: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.35rem;
  border: 1px solid var(--green);
  border-radius: var(--radius);
  background: var(--green);
  color: var(--paper);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { background: var(--green-deep); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.btn--light {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--green);
}
.btn--light:hover { background: #fff; color: var(--green-deep); }
.btn--sm { padding: 0.72rem 1.15rem; font-size: 0.875rem; }
.btn .arrow { transition: transform 0.2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.nav-toggle {
  display: none;
  width: auto;
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: 0.8rem;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle__icon {
  position: relative;
  width: 1rem;
  height: 1px;
  background: var(--ink);
  display: block;
}
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1rem;
  height: 1px;
  background: var(--ink);
  transition: transform 0.2s var(--ease), top 0.2s var(--ease);
}
.nav-toggle__icon::before { top: -5px; }
.nav-toggle__icon::after { top: 5px; }
.is-open .nav-toggle__icon { background: transparent; }
.is-open .nav-toggle__icon::before { top: 0; transform: rotate(45deg); }
.is-open .nav-toggle__icon::after { top: 0; transform: rotate(-45deg); }

/* 5. Hero ----------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 6rem);
}
.hero__copy { max-width: 34rem; }
.hero h1 { margin-bottom: 1.1rem; }
.hero h1 em {
  font-style: italic;
  color: var(--green);
}
.hero__lead {
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 40ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.hero__media { position: relative; }
/* A soft region-toned vignette ties the hero photo to the active market's
   palette (the deep colour shifts per region). Purely decorative. */
.hero__media::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  z-index: 2;
  background: linear-gradient(to top, var(--green), transparent);
  opacity: 0.26;
  pointer-events: none;
}
.hero__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.02);
}
.hero__caption {
  position: relative;
  z-index: 2;
  margin-top: 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__note {
  margin: 1.75rem 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.hero__disciplines {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.25rem;
  margin-top: 2.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line-strong);
}
.hero__disciplines-label {
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
}
.hero__disciplines-list {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}
.hero__disciplines-list strong { color: var(--ink); font-weight: 600; }

/* Region-aware market band: reflects what each market looks for and how we
   approach it. The accent colour comes from the active region's palette. */
.market-band {
  background: var(--clay-soft);
  border-block: 1px solid var(--line);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
.market-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.market-band .eyebrow { color: var(--clay); }
.market-band h2 { margin-bottom: 0.75rem; }
.market-band__lead { color: var(--ink-soft); max-width: 52ch; margin: 0 0 1.5rem; }
.market-band__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.market-band__points li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-soft);
}
.market-band__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.7rem; height: 0.7rem;
  border: 1.5px solid var(--clay);
  border-radius: 2px;
  transform: rotate(45deg);
}
.market-band__aside {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--clay);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow-sm);
}
.market-band__note-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 0.6rem;
}
.market-band__note { margin: 0; color: var(--ink); font-size: 1.0625rem; line-height: 1.6; }
@media (max-width: 900px) {
  .market-band__inner { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   v2.0.0 — unified global site. All five markets live on ONE page. Each card
   and jump chip carries its market colour as a LOCAL token, so the page reads
   as international without splitting into separate editions.
   ------------------------------------------------------------------------ */
.market-jump {
  background: var(--green);
  color: #f3ede2;
  padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.market-jump .eyebrow { color: #d9c9a8; }
.market-jump__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: #fff;
}
.market-jump__text { color: #d9e0d7; max-width: 68ch; margin: 0 0 1.5rem; }
.market-jump__chips { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.market-jump__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #f7f3ea;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.market-jump__chip:hover,
.market-jump__chip:focus-visible {
  background: var(--card-accent, var(--clay));
  border-color: var(--card-accent, var(--clay));
  color: #fff;
  transform: translateY(-2px);
}
.market-jump__short { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; opacity: 0.8; }
.market-jump__name { font-size: 0.9rem; font-weight: 600; }

.global-markets { background: var(--bone); padding-block: clamp(3rem, 7vw, 5.5rem); }
.global-markets__header { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.global-markets__header h2 { margin: 0 0 0.9rem; }
.global-markets__intro { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.7; margin: 0; }
.global-markets__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2rem);
}
.market-card {
  --card-deep: var(--green);
  --card-accent: var(--clay);
  --card-soft: var(--clay-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--card-accent);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 6rem;
  display: flex;
  flex-direction: column;
}
.market-card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--card-soft); }
.market-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
  transition: transform 0.5s ease;
}
.market-card:hover .market-card__img { transform: scale(1.035); }
.market-card__badge {
  position: absolute; left: 1rem; top: 1rem;
  background: var(--card-deep); color: #fff;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
  padding: 0.35rem 0.65rem; border-radius: 3px;
}
.market-card__body { padding: clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-direction: column; flex: 1; }
.market-card__index { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--card-accent); font-weight: 700; margin: 0 0 0.5rem; }
.market-card__title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 0.6rem; color: var(--card-deep); }
.market-card__framework { font-size: 0.86rem; color: var(--muted); line-height: 1.55; margin: 0 0 1.2rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.market-card__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--card-accent); margin: 0 0 0.7rem; }
.market-card__points { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: 0.6rem; }
.market-card__points li { position: relative; padding-left: 1.35rem; font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); }
.market-card__points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.55rem; height: 0.55rem; border: 1.5px solid var(--card-accent); border-radius: 2px; }
.market-card__tone { font-size: 0.86rem; line-height: 1.6; color: var(--ink-soft); font-style: italic; background: var(--card-soft); border-left: 3px solid var(--card-accent); padding: 0.8rem 1rem; margin: auto 0 1.2rem; }
.market-card__cta { align-self: flex-start; font-size: 0.88rem; font-weight: 600; color: var(--card-deep); text-decoration: none; border-bottom: 1px solid var(--card-accent); padding-bottom: 0.15rem; }
.market-card__cta:hover { color: var(--card-accent); }
.market-card__cta svg { width: 14px; height: 14px; vertical-align: -2px; }

.global-compliance { background: var(--paper); padding-block: clamp(3rem, 6vw, 4.5rem); border-block: 1px solid var(--line); }
.global-compliance h2 { margin: 0 0 0.8rem; }
.global-compliance__intro { max-width: 70ch; color: var(--ink-soft); line-height: 1.7; margin: 0 0 1.8rem; }
.global-compliance__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: inset -18px 0 20px -18px rgba(27, 48, 41, 0.45);
}
.global-compliance__table { width: 100%; border-collapse: collapse; min-width: 860px; font-size: 0.9rem; }
.global-compliance__table th,
.global-compliance__table td { text-align: left; vertical-align: top; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); line-height: 1.55; }
.global-compliance__table thead th { background: var(--green); color: #fff; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 0; white-space: nowrap; }
.global-compliance__table tbody th { font-weight: 650; color: var(--green); white-space: nowrap; }
.global-compliance__table tbody tr:last-child th,
.global-compliance__table tbody tr:last-child td { border-bottom: 0; }
.global-compliance__table tbody tr:nth-child(even) { background: #faf7f1; }
.global-compliance__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.55rem; vertical-align: 1px; }
.global-compliance__note { font-size: 0.86rem; color: var(--muted); margin: 1.2rem 0 0; }

@media (max-width: 900px) {
  .global-markets__grid { grid-template-columns: minmax(0, 1fr); }
  .market-card__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .market-jump__chips { gap: 0.45rem; }
  .market-jump__chip { padding: 0.45rem 0.75rem; }
  .market-jump__name { font-size: 0.82rem; }
}

/* v2.0.0: "Global markets" is a longer header label than the old "Market".
   Below 1500px the CTA falls back to its short label so neither the button
   nor the market picker is clipped; above that width everything fits. */
@media (max-width: 1500px) {
  .header-actions .btn--sm .btn__label-full { display: none; }
  .header-actions .btn--sm .btn__label-short { display: inline; }
  .header-actions { gap: 0.55rem; }
}
@media (min-width: 621px) and (max-width: 1500px) {
  .region-switcher__select { min-width: 7.5rem; }
}

/* Region-aware "what brands here ask us about" — sits right under the market
   band and carries the active region's accent so the block reads as local. */
.market-priorities {
  background: var(--paper);
  border-block: 1px solid var(--line);
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
}
.market-priorities__inner { max-width: 72rem; }
.market-priorities .eyebrow { color: var(--clay); margin-bottom: 1.25rem; }
.market-priorities__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.75rem;
}
.market-priorities__item {
  position: relative;
  padding: 0.9rem 1.1rem 0.9rem 2.6rem;
  background: var(--clay-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--clay);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.45;
}
.market-priorities__item::before {
  content: "";
  position: absolute;
  left: 1rem; top: 1.15rem;
  width: 0.6rem; height: 0.6rem;
  background: var(--clay);
  border-radius: 50%;
}
@media (max-width: 640px) {
  .market-priorities__list { grid-template-columns: minmax(0, 1fr); }
}

/* 6. Sections & components ------------------------------------------------ */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: 1.6rem clamp(0.75rem, 1.5vw, 1.5rem) 1.6rem 0;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 0.55rem;
}
.stat__label {
  display: block;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 22ch;
}
.section--dark .stat { border-color: rgba(239, 232, 218, 0.2); }
.section--dark .stat__label { color: #aab6a9; }

.card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
  height: 100%;
}
a.card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
  color: inherit;
}
.card__index {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--clay);
  letter-spacing: 0.04em;
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0;
}
.card__body { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.62; }
.card__more {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.section--dark .card {
  background: rgba(250, 246, 236, 0.04);
  border-color: rgba(239, 232, 218, 0.2);
  color: #efe8da;
}
.section--dark .card__body { color: #c3cbbf; }
.section--dark .card__title { color: #faf6ec; }
.section--dark .card__more { color: #e6d6bd; }

.card--plain { background: transparent; border: 0; border-top: 1px solid var(--line); padding-left: 0; padding-right: 0; }
.card--plain:hover { transform: none; }

.pill-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.pill {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.section--dark .pill { border-color: rgba(239, 232, 218, 0.3); color: #cfd7cb; }

.ledger { border-top: 1px solid var(--line); margin: 0; }
.ledger__row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.25rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.ledger__num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--clay);
  padding-top: 0.15rem;
}
.ledger__title { font-size: var(--step-1); font-weight: 500; margin: 0; line-height: 1.3; }
.ledger__desc { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
.section--dark .ledger, .section--dark .ledger__row { border-color: rgba(239, 232, 218, 0.2); }
.section--dark .ledger__desc { color: #b3c0b0; }

.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1.4rem, 2.5vw, 2rem) 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  line-height: 1;
  color: var(--line-strong);
}
.step__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 0.45rem;
}
.step__title { font-size: var(--step-1); font-weight: 500; margin: 0; line-height: 1.3; }
.step__time {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  white-space: nowrap;
}
.step__body { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.65; max-width: 62ch; }

.callout {
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border-left: 2px solid var(--clay);
  background: var(--paper);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.callout p:last-child { margin-bottom: 0; }
.callout__title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 0.6rem;
}
.section--dark .callout { background: rgba(250, 246, 236, 0.05); }

.quote {
  max-width: 46rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.quote cite {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

figure.media { position: relative; }
figure.media img { width: 100%; object-fit: cover; }
figure.media figcaption {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.media--tall img { aspect-ratio: 4 / 5; }
.media--wide img { aspect-ratio: 16 / 10; }

/* v2.4.0 — founder portraits are full-body compositions with generous headroom
   but only a thin margin below the shoes. The 4:5 frame uses object-fit: cover,
   which would otherwise crop the feet. Anchoring to the bottom (slightly short
   of 100% so the head is not pushed flush to the top edge) keeps the whole
   figure — head to shoes — inside the frame while only trimming background
   above the head. Applied to the hero split (.media--tall) and any portrait
   figure (.vl-figure--portrait), both of which hold founder imagery. */
.media--tall img,
.vl-figure--portrait img { object-position: 50% 92%; }

.tag {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
}
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.meta-row span:not(:last-child)::after {
  content: "·";
  margin-left: 1.25rem;
  color: var(--line-strong);
}

.breadcrumbs {
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--muted);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--line-strong); }

.page-head { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 3.5vw, 3rem); }
.page-head h1 { max-width: 22ch; }
.page-head .lead { margin-top: 1.25rem; }
.page-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}
.page-head__meta {
  display: grid;
  gap: 0.85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.page-head__meta div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.page-head__meta dt { color: var(--muted); }
.page-head__meta dd { margin: 0; color: var(--ink); text-align: right; }

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--green);
  color: #f4eee1;
}
.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.cta-band h2 { color: #faf6ec; margin-bottom: 0.75rem; }
.cta-band p { color: #c8d1c5; max-width: 46ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.cta-band__aside {
  border-left: 1px solid rgba(239, 232, 218, 0.25);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  gap: 1.1rem;
}
.cta-band__aside p { font-size: 0.875rem; margin: 0; }
.cta-band__aside strong { color: #faf6ec; display: block; font-weight: 500; }

/* 7. Shortcode components ------------------------------------------------- */
.vl-cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.vl-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vl-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vl-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.vl-steps { counter-reset: vl-step; }
.vl-step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}
.vl-step:last-child { border-bottom: 1px solid var(--line); }
.vl-step__num { font-family: var(--font-display); font-size: 1.5rem; color: var(--clay); line-height: 1; }
.vl-step__title { font-size: var(--step-1); font-weight: 500; margin: 0 0 0.35rem; line-height: 1.3; }
.vl-step__body { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.65; }
.vl-step__time {
  display: inline-block;
  margin-left: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.vl-faq { border-top: 1px solid var(--line); }
.vl-faq details {
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0;
}
.vl-faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.4;
}
.vl-faq summary::-webkit-details-marker { display: none; }
.vl-faq summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  color: var(--clay);
  flex: none;
  transition: transform 0.2s var(--ease);
}
.vl-faq details[open] summary::after { transform: rotate(45deg); }
.vl-faq__answer { margin-top: 0.9rem; max-width: var(--measure); color: var(--ink-soft); font-size: 0.9375rem; }

.vl-table-wrap { overflow-x: auto; }
/* U4: mobile horizontal-scroll affordance for wide comparison tables.
   A subtle shadow gradient is painted on the scroll container's own background,
   so it stays pinned to the visible right edge and signals "more content →".
   The tone must contrast with the section background to be perceptible. */
@media (max-width: 620px) {
  .vl-table-wrap {
    background-image: linear-gradient(to left, rgba(22, 24, 26, 0.14), rgba(22, 24, 26, 0) 1.5rem);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1.5rem 100%;
  }
  .section--dark .vl-table-wrap {
    background-image: linear-gradient(to left, rgba(239, 232, 218, 0.22), rgba(239, 232, 218, 0) 1.5rem);
  }
}
.vl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 34rem;
}
.vl-table caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.vl-table th, .vl-table td {
  padding: 0.85rem 1rem 0.85rem 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.vl-table th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--line-strong);
  white-space: normal;
  vertical-align: bottom;
  line-height: 1.3;
  padding-right: 1.1rem;
}
.vl-table th:first-child,
.vl-table td:first-child { white-space: normal; }
.vl-table th:first-child { min-width: 6.5rem; }
.vl-table td:first-child { font-weight: 500; }
.section--dark .vl-table th, .section--dark .vl-table td { border-color: rgba(239, 232, 218, 0.2); }

/* Contact block — [vl_contact]: labelled, scannable, friendly */
.vl-contact { margin: 0; border-top: 1px solid var(--line); }
.vl-contact__row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) 1fr;
  gap: 0.2rem 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.vl-contact__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
  padding-top: 0.25rem;
}
.vl-contact__value { margin: 0; color: var(--ink); font-size: var(--step-1); line-height: 1.45; }
.vl-contact__value a {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.18em;
}
.vl-contact__value a:hover { color: var(--green); text-decoration-color: var(--green); }
.vl-contact--card { border-top: 0; }
.vl-contact--card .vl-contact__row:first-child { padding-top: 0; }
.vl-contact--card .vl-contact__value { font-size: var(--step-0); }
@media (max-width: 30rem) {
  .vl-contact__row { grid-template-columns: 1fr; gap: 0.1rem; }
  .vl-contact__label { padding-top: 0; }
}

.vl-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--clay-soft);
  border-radius: var(--radius);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.vl-note__icon {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--clay);
  color: var(--clay);
  display: grid; place-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex: none;
}
.vl-note p:last-child { margin-bottom: 0; }

/* Process flow — numbered steps joined by arrows (launch checklist sequencing). */
.vl-flow { margin: clamp(1.75rem, 3vw, 2.5rem) 0; }
.vl-flow__caption {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 0.9rem;
}
.vl-flow__list {
  counter-reset: vlf;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vl-flow__list li {
  counter-increment: vlf;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex: 1 1 0;
  padding: 0.6rem 0.95rem;
  background: var(--clay-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}
.vl-flow__list li::before {
  content: counter(vlf);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--clay);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
}
.vl-flow__list li:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  right: -1.15rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clay);
  font-weight: 700;
}
@media (max-width: 620px) {
  .vl-flow__list { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .vl-flow__list li:not(:last-child)::after { display: none; }
}

.vl-checks { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.vl-checks li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.vl-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.6rem;
  height: 0.35rem;
  border-left: 1.5px solid var(--clay);
  border-bottom: 1.5px solid var(--clay);
  transform: rotate(-45deg);
}
.section--dark .vl-checks li { color: #c8d1c5; }

/* Editorial plate: a framed, captioned image that reads as part of the
   argument rather than a decorative block. Portrait variant for interspersing
   a tall image beside text. */
.vl-figure { margin: 0; }
.vl-figure img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  filter: saturate(0.96) contrast(1.02);
}
.vl-figure--portrait img { aspect-ratio: 4 / 5; }
/* A standalone portrait plate is centred and capped so it reads as a column
   illustration; inside a split it fills the media column instead. */
.vl-figure--portrait { max-width: 34rem; margin-inline: auto; }
.split__media .vl-figure--portrait { max-width: none; margin-inline: 0; }
.vl-figure figcaption {
  margin-top: 0.65rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.vl-figure figcaption::before {
  content: "Fig.\00a0";
  font-weight: 600;
  color: var(--clay);
  letter-spacing: 0.08em;
}
.section--dark .vl-figure img { border-color: rgba(239, 232, 218, 0.26); }
.section--dark .vl-figure figcaption { color: #9aa798; }
.section--dark .vl-figure figcaption::before { color: #c9a488; }

.vl-pullquote {
  position: relative;
  margin: clamp(2rem, 4vw, 3rem) 0;
  padding: 1.5rem 0 1.5rem 1.75rem;
  border-left: 2px solid var(--clay);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.32;
  color: var(--ink);
}
.vl-pullquote::before {
  content: "\201C";
  display: block;
  margin-bottom: -0.15em;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 0.6;
  color: var(--clay);
}
/* The attribution sits on its own line, muted, never crammed after the quote. */
.vl-pullquote cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.vl-pullquote cite::before { content: "\2014\00a0"; }

/* 8. Forms ---------------------------------------------------------------- */
.form-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.field .hint { font-size: 0.75rem; color: var(--muted); }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green);
  background: #fff;
}
textarea { min-height: 8rem; resize: vertical; }
.form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.5rem;
}
.form-footer .legal { font-size: 0.75rem; color: var(--muted); max-width: 40ch; margin: 0; }
.form-notice {
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--green);
  background: var(--paper);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}
.form-notice--error { border-left-color: #8c2f2a; }
.form-notice ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* 9. Editorial ------------------------------------------------------------ */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2.2em; margin-bottom: 0.55em; font-size: var(--step-3); }
.prose h3 { margin-top: 1.8em; margin-bottom: 0.4em; font-size: var(--step-2); }
.prose h4 { margin-top: 1.6em; margin-bottom: 0.3em; }
.prose ul, .prose ol { padding-left: 1.15rem; }
.prose li { margin-bottom: 0.45em; }
.prose li::marker { color: var(--clay); }
.prose a { color: var(--green); text-decoration: underline; text-decoration-color: var(--line-strong); }
.prose a:hover { text-decoration-color: var(--green); }
.prose blockquote {
  margin: 1.8em 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--clay);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.32;
  color: var(--ink);
}
.prose table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.prose th, .prose td { padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.prose hr { margin: 2.5em 0; }
.prose > .vl-note, .prose > .vl-table-wrap { margin-top: 1.6em; }

.post-card {
  display: grid;
  gap: 1.25rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.post-card:hover { color: inherit; }
.post-card:hover h3 { color: var(--green); }
.post-card h3 { margin: 0.35rem 0 0.5rem; font-size: var(--step-2); font-family: var(--font-display); font-weight: 400; line-height: 1.2; }
.post-card p { margin: 0; color: var(--muted); font-size: 0.9375rem; max-width: 64ch; }
.post-card__foot { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; font-size: 0.75rem; color: var(--muted); }

.insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.insight {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}
.insight__media {
  display: block;
  margin: 0 0 1.1rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper-2);
}
.insight__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}
.insight:hover .insight__media img { transform: scale(1.03); }
.insight h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.18;
  margin: 0.4rem 0 0.6rem;
}
.insight p { font-size: 0.875rem; color: var(--muted); margin: 0 0 1rem; line-height: 1.6; }
.insight:hover h3 { color: var(--green); }
.insight__foot { margin-top: auto; font-size: 0.75rem; color: var(--muted); letter-spacing: 0.04em; }

.article-head { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.article-head h1 { max-width: 26ch; font-size: clamp(2.1rem, 3.6vw, 3.25rem); }
.article-head .lead { margin-top: 1rem; }
.article-body { padding-bottom: clamp(3rem, 6vw, 5rem); }
.article-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.article-aside {
  position: sticky;
  top: 6.5rem;
  display: grid;
  gap: 1.5rem;
  padding-top: 0.25rem;
}
.article-aside__block { border-top: 1px solid var(--line); padding-top: 1rem; }
.article-aside h2 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
.article-aside p, .article-aside li { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-soft); }
.article-aside ul { margin: 0; padding-left: 1rem; }
.founder-avatar { width: 84px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; margin: 0 0 0.85rem; }
.founder-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 3rem; }
.pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  text-decoration: none;
}
.pagination .current { background: var(--green); color: var(--paper); border-color: var(--green); }

/* 10. Footer -------------------------------------------------------------- */
.site-footer { background: var(--green-deep); color: #ccd4c9; padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.85fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.site-footer .brand { color: #f5efe2; margin-bottom: 1rem; }
.site-footer .brand__suffix { color: #93a094; }
.footer-about { font-size: 0.875rem; line-height: 1.7; color: #b3bfb0; max-width: 34ch; }
.footer-col h2 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #93a094;
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-col a { color: #d8dfd3; text-decoration: none; font-size: 0.875rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-contact { display: grid; gap: 0.55rem; font-size: 0.875rem; }
.footer-contact a { color: #e8ede4; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(239, 232, 218, 0.16);
  font-size: 0.75rem;
  color: #8f9c8d;
}
.footer-bottom nav ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.footer-bottom a { color: #a9b5a6; text-decoration: none; }
.footer-bottom a:hover { color: #f5efe2; }

/* 11. Utilities, motion, print -------------------------------------------- */
.mt-0 { margin-top: 0; }
.mt-s { margin-top: 1rem; }
.mt-m { margin-top: 1.75rem; }
.mt-l { margin-top: clamp(2rem, 4vw, 3rem); }
.mb-0 { margin-bottom: 0; }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.text-center .eyebrow { justify-content: center; }
.text-center .lead, .text-center p { margin-inline: auto; }
.hide-sm { display: initial; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 1360px) {
  .nav ul { gap: clamp(0.6rem, 1vw, 1.1rem); }
}

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-body__grid { grid-template-columns: minmax(0, 1fr); }
  .article-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * The header carries seven top-level links plus a call to action. Below
 * 1024px that stops fitting on one line, so the drawer opens earlier than the
 * rest of the layout collapses — a header that wraps is worse than a menu
 * behind a button.
 */
@media (max-width: 1280px) {
  .hide-sm { display: none; }
  .header-phone { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 5.25rem 0 auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 2rem;
    background: var(--bone);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 5.25rem);
    overflow-y: auto;
  }
  .is-open .nav { display: flex; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav li { border-bottom: 1px solid var(--line); }
  .nav a { display: block; padding: 0.95rem 0; font-size: 1.0625rem; }
  .nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 0.75rem 0.9rem;
    display: block;
    min-width: 0;
  }
  .nav .sub-menu a { padding: 0.5rem 0; font-size: 0.9375rem; color: var(--muted); }
  .nav .menu-item-has-children > a::after { display: none; }
  .nav__contact { display: flex; }
  body.is-open { overflow: hidden; }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero__media { order: -1; }
  .hero__media img { aspect-ratio: 4 / 3; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 1.25rem 1rem 1.25rem 0; }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .grid--2, .grid--3, .grid--4, .split, .vl-cards--2, .vl-cards--3, .vl-cards--4,
  .page-head--split, .cta-band__inner { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split__media { order: 0; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .cta-band__aside { border-left: 0; border-top: 1px solid rgba(239, 232, 218, 0.25); padding-left: 0; padding-top: 1.5rem; }
  .ledger__row { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .ledger__desc { grid-column: 2; }
}

@media (max-width: 620px) {
  .insight-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .article-aside { grid-template-columns: minmax(0, 1fr); }
  .brand__suffix { display: none; }
  .step { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .vl-step { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .page-head__meta div { flex-direction: column; gap: 0.15rem; }
  .page-head__meta dd { text-align: left; }
}

@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
}

/* Form validation + header states */
input.is-invalid, textarea.is-invalid, select.is-invalid {
  border-color: #8c2f2a;
  background: #fdf6f4;
}
.site-header.is-scrolled { box-shadow: 0 12px 30px -24px rgba(22, 24, 26, 0.5); }
#enquiry { scroll-margin-top: 7rem; }
.enquiry-form { padding: clamp(1.25rem, 3vw, 2rem); background: var(--paper); border: 1px solid var(--line); }
.form-grid + .form-footer { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.vl-note .callout__title { margin-bottom: .35rem; }

/* Contact — paired columns so the form never leaves an orphaned empty cell.
   The old grid--2 wrapper held five top-level children, which put the form
   alone in the left cell of a final row. Both areas now declare their own
   two-column layout: the form gets the wider column, the supporting column
   carries the pre-brief checklist, direct contact, download and privacy. */
.contact-intro,
.contact-form-layout {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.contact-intro { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
.contact-intro__copy > .lead { max-width: 56ch; }
.contact-intro__media { display: grid; gap: clamp(1.5rem, 2.5vw, 2.25rem); }
.contact-form-layout {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  margin-top: clamp(3rem, 5vw, 5rem);
  padding-top: clamp(3rem, 5vw, 5rem);
  border-top: 1px solid var(--line);
}
.contact-form-layout__form,
.contact-form-layout__aside { min-width: 0; }
.contact-form-layout__form > .eyebrow { margin-bottom: 0.6rem; }
.contact-form-layout__form h2 { margin-bottom: 1.5rem; }
.contact-form-layout__aside > .eyebrow { margin-bottom: 0.6rem; }
.contact-form-layout__aside h3 {
  margin-bottom: 1rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
}
.contact-form-layout__aside > p,
.contact-aside__block > p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
}
.contact-aside__block {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.contact-aside__block .vl-download { margin-top: 0.4rem; }
.contact-aside__block .vl-download__note { margin-top: 0.5rem; }
.contact-aside__block .vl-note { margin-top: 0; }
@media (max-width: 900px) {
  .contact-intro,
  .contact-form-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-form-layout { margin-top: 2.75rem; padding-top: 2.75rem; }
  .contact-intro__media { gap: 1.5rem; }
}
@media (max-width: 620px) {
  .contact-form-layout__form h2 { margin-bottom: 1.1rem; }
}

/* Reduce stacked whitespace when a composed page starts with a section */
.page-head + .section { padding-top: clamp(1rem, 2vw, 2rem); }
.page-head--article + .article-body { padding-top: 0; }
.section--dark .vl-table th { color: #cfd7cb; }
.section--dark .vl-table caption { color: #9aa798; }

/* Long tables inside editorial content scroll rather than break the grid */
@media (max-width: 760px) {
  .prose table { display: block; width: 100%; overflow-x: auto; }
  .prose table th, .prose table td { padding-right: 1.25rem; }
  .prose table tr { min-width: 30rem; display: table-row; }
  .prose table thead, .prose table tbody { display: table; width: 100%; border-collapse: collapse; }
}

/* Composed pages already carry their own standfirst in the first section */
.page-head--composed { padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem); }

/* ==========================================================================
   12. Editorial refinements
   ========================================================================== */

/* A sentence lead-in inside split bodies — the first paragraph reads a notch
   larger, giving the two-column feature a calmer editorial opening. */
.split__body .prose > p:first-of-type {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Drop cap for long-form introductions (applied via .prose--dropcap). */
.prose--dropcap > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 0.74;
  padding: 0.04em 0.5rem 0 0;
  color: var(--green);
}

/* Section headings read a little tighter and more deliberate. */
.section-head h2 { letter-spacing: -0.018em; }
.section-head p { line-height: 1.6; }

/* Cards: give the body a touch more air and a calmer colour. */
.card__body { line-height: 1.62; }

/* Eyebrow sits closer to its heading for a more composed masthead feel. */
.eyebrow { margin-bottom: 1rem; }

/* Refined emphasis for inline highlighted numbers in prose lists. */
.prose strong { font-weight: 600; color: var(--ink); }

/* -------------------------------------------------------------------------
 * Cookie consent banner (PECR)
 * ---------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--paper, #fbf8f1);
  border-top: 1px solid var(--line, #e4dccb);
  box-shadow: 0 -10px 30px rgba(40, 33, 22, 0.08);
  padding: clamp(0.9rem, 2vw, 1.2rem) 0;
}
.cookie-banner[hidden] { display: none; }
/* v1.6.0: slide-up entrance, and a capped height on small screens so the
   expanded "Manage preferences" panel can never cover the whole viewport
   (it previously sat fixed at the viewport bottom with no height limit). */
@keyframes vl-banner-in {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}
.cookie-banner:not([hidden]) { animation: vl-banner-in 0.35s ease both; }
@media (max-width: 620px) {
	.cookie-banner { max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.7rem 0; }
	/* Keep the collapsed banner compact so it never covers first-screen copy:
	   text on its own line, actions in a single tidy row beneath, smaller controls. */
	.cookie-banner__inner { gap: 0.5rem; }
	.cookie-banner__text { flex-basis: 100%; font-size: 0.8125rem; line-height: 1.42; max-width: none; }
	.cookie-banner__actions { width: 100%; justify-content: stretch; flex-wrap: nowrap; gap: 0.4rem; }
	.cookie-banner__actions .btn { flex: 1 1 0; min-width: 0; text-align: center; padding: 0.55rem 0.4rem; font-size: 0.74rem; white-space: nowrap; }
	.cookie-banner__manage { flex: 1 1 0; text-align: center; font-size: 0.74rem; }
}
.cookie-banner__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
}
.cookie-banner__text {
  flex: 1 1 22rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted, #6b6557);
  max-width: 60ch;
}
.cookie-banner__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* 13. Editorial plates beside section headings -----------------------------
   A section head used to leave its right-hand column empty. When a heading
   supplies an image, the two columns become copy + a framed "Fig." plate,
   keeping the quiet British editorial rhythm on long-form pages. */
.section-head--media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(1.75rem, 4.5vw, 3.75rem);
  align-items: center;
}
.section-head--media > .section-head__copy { max-width: none; }
.section-head--media > .section-head__copy > .section-head__text { max-width: 56ch; }
.section-head--media .section-head__copy .btn { margin-top: 1.6rem; }
.section-head--media .section-head__figure {
  margin: 0;
  padding: 0.5rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.38);
}
.section-head--media .section-head__figure img {
  display: block;
  width: 100%;
  height: clamp(190px, 20vw, 275px);
  object-fit: cover;
  border: 0;
  filter: saturate(0.94) contrast(1.02);
}
.section-head--media .section-head__figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.section-head--media .section-head__figure figcaption::before {
  content: "Fig.\00a0";
  font-weight: 600;
  color: var(--ink);
}
.section--dark .section-head--media .section-head__figure {
  border-color: rgba(239, 232, 218, 0.28);
  background: rgba(255, 255, 255, 0.04);
}
.section--dark .section-head--media .section-head__figure figcaption { color: #b9c3b8; }
.section--dark .section-head--media .section-head__figure figcaption::before { color: #faf6ec; }
@media (max-width: 900px) {
  .section-head--media { grid-template-columns: minmax(0, 1fr); }
  .section-head--media .section-head__figure img { height: clamp(200px, 42vw, 300px); }
}

/* Interior page heads use the same plate so a title never sits beside a void. */
.page-head--with-media .page-head__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.page-head--with-media h1 { max-width: 20ch; }
.page-head__figure {
  margin: 0;
  padding: 0.5rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.38);
}
.page-head__figure img {
  display: block;
  width: 100%;
  height: clamp(210px, 22vw, 300px);
  object-fit: cover;
  border: 0;
  filter: saturate(0.94) contrast(1.02);
}
@media (max-width: 900px) {
  .page-head--with-media .page-head__inner { grid-template-columns: minmax(0, 1fr); }
  .page-head__figure img { height: clamp(190px, 40vw, 280px); }
}


/* ==========================================================================
   14. v1.4.0 — professional polish
   ========================================================================== */
.site-header { background: rgba(246, 241, 232, 0.97); }
.footer-bottom nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.footer-cookie {
  padding: 0;
  border: 0;
  background: none;
  color: #a9b5a6;
  font-family: inherit;
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.footer-cookie:hover { color: #f5efe2; }
@media (max-width: 420px) {
  .nav-toggle__label { display: none; }
  .nav-toggle { width: 2.75rem; padding-inline: 0; }
}


/* Small screens: keep the primary CTA and the menu button on one row, and
   let the display headline wrap instead of running past the viewport. */
@media (max-width: 480px) {
  .header-bar { gap: 0.6rem; }
  .header-actions { gap: 0.5rem; }
  .header-actions .btn--sm {
    padding: 0.62rem 0.8rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }
  .hero h1 {
    font-size: clamp(1.9rem, 8.6vw, 2.6rem);
    overflow-wrap: break-word;
  }
  .hero__disciplines { gap: 0.35rem 0.9rem; }
}

/* Short CTA label on phones so the wordmark, action and menu all fit. */
.btn__label-short { display: none; }
@media (max-width: 480px) {
  .btn__label-full { display: none; }
  .btn__label-short { display: inline; }
  .brand__name { font-size: 1.6rem; }
}

/* Phones and narrow tablets (down to the 480–620px band): the compact header
   treatment has to start here, not at 480px, or the CTA crowds out the menu. */
@media (max-width: 620px) {
  .btn__label-full { display: none; }
  .btn__label-short { display: inline; }
  .nav-toggle__label { display: none; }
  .nav-toggle { width: 2.75rem; padding-inline: 0; }
  .header-bar { gap: 0.6rem; }
  .header-actions { gap: 0.5rem; }
  .header-actions .btn--sm {
    padding: 0.62rem 0.8rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }
  .brand__name { font-size: 1.6rem; }
  .region-switcher { padding: 0.22rem 0.45rem 0.22rem 0.55rem; gap: 0.35rem; }
  .region-switcher__label { font-size: 0.6rem; letter-spacing: 0.1em; }
  .region-switcher__select { padding-left: 0.1rem; padding-right: 1.3rem; max-width: 8.5rem; font-size: 0.78rem; }
}

/* Site search — used on results pages and the 404. */
.search-panel { margin: 1.75rem 0 2.25rem; max-width: 34rem; }
.search-empty { max-width: 46ch; padding: 2rem 0; }
.search-empty p { color: var(--ink-soft); font-size: var(--step-0); }
.search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; align-items: stretch; }
.search-form label { min-width: 0; margin: 0; }
.search-form .screen-reader-text { position: absolute; }
.search-field {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
}
.search-field::placeholder { color: var(--muted); }
.search-submit {
  padding: 0.8rem 1.35rem;
  border: 1px solid var(--green);
  border-radius: var(--radius);
  background: var(--green);
  color: var(--paper);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.search-submit:hover { background: var(--green-deep); }


/* ==========================================================================
   15. v1.5.0 — functional audit: search, consent, compliance, evidence
   ========================================================================== */

/* Header search ---------------------------------------------------------- */
.header-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--green);
  cursor: pointer;
}
.header-search-toggle:hover,
.header-search-toggle[aria-expanded="true"] { border-color: var(--line-strong); background: var(--paper); }
.header-search {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
  padding-block: 1.35rem 1.6rem;
}
.header-search[hidden] { display: none; }
.header-search .eyebrow { margin-bottom: 0.5rem; }
.header-search .search-form { max-width: 44rem; }
.header-search .search-field { background: #fff; }
.header-search__hint { margin: 0.65rem 0 0; font-size: 0.8125rem; color: var(--muted); }
.header-search__hint em { font-style: normal; color: var(--ink-soft); }
/* The sticky header is already the positioning context for the panel. */

/* Footer search and statutory line --------------------------------------- */
.footer-search { margin-top: 1.5rem; }
.footer-search .search-form { grid-template-columns: minmax(0, 1fr); }
.footer-search .eyebrow { color: #93a094; margin-bottom: 0.5rem; }
.footer-search .search-field { background: rgba(255,255,255,.06); border-color: rgba(239,232,218,.28); color: #f5efe2; font-size: 0.875rem; }
.footer-search .search-field::placeholder { color: #93a094; }
.footer-search .search-submit { background: transparent; border-color: rgba(239,232,218,.4); font-size: 0.75rem; }
.footer-search .search-submit:hover { background: rgba(255,255,255,.1); }
.footer-col .sub-menu { margin-top: 0.45rem; padding-left: 0.85rem; border-left: 1px solid rgba(239,232,218,.22); }
.footer-entity { margin: 0.35rem 0 0; font-size: 0.75rem; color: #8f9c8d; }
.footer-entity span { margin-inline: 0.35rem; }

/* Granular consent centre ------------------------------------------------ */
.cookie-banner__manage {
  padding: 0.55rem 0.2rem;
  border: 0;
  background: none;
  color: var(--green);
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cookie-banner__manage:hover { color: var(--clay); }
.cookie-banner__text a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.cookie-preferences {
  flex: 1 1 100%;
  margin-top: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.cookie-preferences[hidden] { display: none; }
.cookie-preferences fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 0.35rem; }
.cookie-pref {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}
.cookie-pref strong { display: block; font-size: 0.875rem; color: var(--ink); }
.cookie-pref span { display: block; font-size: 0.8125rem; color: var(--muted); }
.cookie-pref input { width: 1.15rem; height: 1.15rem; accent-color: var(--green); }
.cookie-pref input:disabled { opacity: 0.55; }
.cookie-preferences__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.9rem; }
.cookie-preferences__actions p { flex: 1 1 22rem; margin: 0; font-size: 0.75rem; color: var(--muted); }
.cookie-preferences__actions a { color: var(--green); text-decoration: underline; }

/* Legal entity, review dates, downloads ---------------------------------- */
.vl-reviewed {
  margin: 2.25rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}
.vl-reviewed__label { font-weight: 600; color: var(--ink-soft); }
.vl-reviewed__sep { margin-inline: 0.55rem; }
.vl-entity { margin: 0; border-top: 1px solid var(--line); }
.vl-entity__row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
.vl-entity dt { font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.vl-entity dd { margin: 0; color: var(--ink); }
.vl-download {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  max-width: 34rem;
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  text-decoration: none;
}
.vl-download:hover { border-color: var(--green); background: #fff; }
.vl-download__icon {
  flex: 0 0 auto;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--clay);
  color: var(--clay);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.vl-download__text { display: grid; gap: 0.1rem; }
.vl-download__text strong { font-size: 0.9375rem; }
.vl-download__text span { font-size: 0.75rem; color: var(--muted); }
.vl-download .arrow { margin-left: auto; }
.vl-download__note { font-size: 0.8125rem; color: var(--muted); max-width: 52ch; }

/* Booking and credentials ------------------------------------------------ */
.vl-booking {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin: 2rem 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line-strong);
  background: var(--paper);
}
.vl-booking h2 { margin-top: 0; font-size: var(--step-2); }
.vl-booking p { margin-bottom: 0; color: var(--ink-soft); }
.vl-booking__foot { margin-top: 0.75rem; font-size: 0.8125rem !important; color: var(--muted) !important; }
.vl-credentials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 1.75rem 0; }
.vl-credentials__item { padding: 1.25rem; border: 1px solid var(--line); background: var(--paper); }
.vl-credentials__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.65rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); }
.vl-credentials__mark { font-family: var(--font-display); font-size: 1.4rem; color: var(--green); }
.vl-credentials__meta { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.vl-credentials dl { margin: 0; }
.vl-credentials dl > div { margin-top: 0.85rem; }
.vl-credentials dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay); }
.vl-credentials dd { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--ink-soft); }

/* Lightweight client portal ---------------------------------------------- */
.vl-portal { margin: 1.5rem 0; }
.vl-portal__gate { max-width: 34rem; padding: 1.5rem; border: 1px solid var(--line-strong); background: var(--paper); }
.vl-portal__gate h2 { margin-top: 0; font-size: var(--step-2); }
.vl-portal__gate label { display: block; margin-top: 0.75rem; font-size: 0.8125rem; font-weight: 600; }
.vl-portal__gate input[type="text"], .vl-portal__gate input[type="password"] {
  width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--line-strong); background: #fff; font: inherit;
}
.vl-portal__gate .button-primary { margin-top: 1rem; padding: 0.65rem 1.2rem; border: 0; background: var(--green); color: var(--paper); cursor: pointer; }
.vl-portal__foot { margin-bottom: 0; font-size: 0.8125rem; color: var(--muted); }
.vl-portal__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); font-size: 0.875rem; }
.vl-portal__title { margin: 1.5rem 0 0.75rem; font-size: var(--step-2); }
.vl-portal__status { display: inline-block; padding: 0.15rem 0.55rem; border: 1px solid var(--line-strong); font-size: 0.75rem; letter-spacing: 0.04em; }

/* Narrow screens --------------------------------------------------------- */
@media (max-width: 900px) {
  .vl-entity__row, .vl-booking, .vl-credentials { grid-template-columns: minmax(0, 1fr); }
  .vl-entity__row { gap: 0.15rem; }
}
@media (max-width: 480px) {
  .search-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .header-search-toggle { display: none; }
  .cookie-banner__inner { gap: 0.8rem; }
  .cookie-banner__actions { width: 100%; }
  .cookie-pref { gap: 0.5rem; }
}
/* Global capability system (v2.1.0) -------------------------------------- */
.capabilities { background: var(--paper); padding-block: clamp(3rem, 6vw, 5rem); border-block: 1px solid var(--line); }
.capabilities__header { max-width: 68ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.capabilities__header h2 { margin: 0 0 0.9rem; }
.capabilities__intro { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.7; margin: 0; }
.cap-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
.cap-card {
  grid-column: span 2;
  display: flex; flex-direction: column;
  background: var(--bone); border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  overflow: hidden;
}
.cap-card:nth-child(4), .cap-card:nth-child(5) { grid-column: span 3; }
.cap-card__media { position: relative; aspect-ratio: 8 / 5; overflow: hidden; background: #dfe6e0; }
.cap-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.cap-card:hover .cap-card__img { transform: scale(1.035); }
.cap-card__index {
  position: absolute; left: 0.85rem; top: 0.85rem;
  background: var(--green); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  padding: 0.35rem 0.6rem;
}
.cap-card__body { padding: clamp(1.3rem, 2vw, 1.8rem); display: flex; flex-direction: column; flex: 1; }
.cap-card__title { font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.6rem); color: var(--green); margin: 0 0 0.65rem; line-height: 1.25; }
.cap-card__lead { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.6; margin: 0 0 1.2rem; }
.cap-card__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--clay); margin: 0 0 0.7rem; }
.cap-card__points { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: 0.55rem; }
.cap-card__points li { position: relative; padding-left: 1.25rem; font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); }
.cap-card__points li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5rem; height: 0.5rem; border: 1.5px solid var(--clay); border-radius: 2px; }
.cap-card__outcome { margin: auto 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft); }
.cap-card__outcome span { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin-bottom: 0.3rem; }
.capabilities__note { margin: 1.8rem 0 0; padding: 0.9rem 1.1rem; border-left: 3px solid var(--clay); background: var(--bone); font-size: 0.86rem; line-height: 1.6; color: var(--ink-soft); max-width: 92ch; }
.capabilities__cta { margin: 1.5rem 0 0; }
@media (max-width: 1000px) {
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-card, .cap-card:nth-child(4), .cap-card:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 620px) {
  .cap-grid { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .cookie-banner, .header-search, .header-search-toggle { display: none !important; }
}