/* =========================================================
   Clinical Integrity Group — Institutional Editorial
   Stage 2 homepage prototype stylesheet.
   Token names mirror the theme.json structure planned for
   the block theme, so this converts 1:1 in Stage 4.
   ========================================================= */

@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/SourceSerif4-var.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- palette (theme.json color.palette) --- */
  --navy: #081426;
  --navy-2: #0d1f36;
  --navy-3: #16294170;
  --gold: #d6a83a;
  --gold-dim: #b78e2c;
  --gold-ink: #806117; /* small gold-family text on ivory/white — passes AA */
  --ivory: #f5f1e8;
  --ivory-2: #efeade;
  --slate: #d8dee8;
  --white: #ffffff;
  --ink: #1b2536;
  --ink-muted: #56606f;
  --ink-faint: #5f6877;
  --rule-light: #c9d1de;

  /* --- typography (theme.json typography) --- */
  --serif: 'Source Serif 4', ui-serif, Georgia, 'Times New Roman', serif;
  --sans: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.3rem, 1.35rem + 2.5vw, 3.55rem);
  --fs-h2: clamp(1.75rem, 1.15rem + 1.7vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-h4: clamp(1.02rem, 0.96rem + 0.25vw, 1.15rem);
  --fs-lead: clamp(1.06rem, 1rem + 0.35vw, 1.24rem);
  --fs-body: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.75rem;

  /* --- spacing (theme.json spacing.spacingSizes) --- */
  --sp-2xs: 0.5rem;
  --sp-xs: 0.75rem;
  --sp-s: 1.25rem;
  --sp-m: 2rem;
  --sp-l: 3rem;
  --sp-xl: 4.5rem;
  --sp-2xl: clamp(4.5rem, 3rem + 5vw, 7.5rem);

  /* --- layout (theme.json settings.layout) --- */
  --content: 68ch;
  --wide: 1240px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.011em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0 0 1.1em; max-width: var(--content); }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

/* focus — visible on navy and on ivory alike */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px;
  z-index: 200; background: var(--gold); color: var(--navy);
  padding: 0.7rem 1.1rem; font-family: var(--sans); font-size: var(--fs-small);
  font-weight: 600; text-decoration: none; transition: top .18s ease;
}
.skip-link:focus { top: 0.5rem; }

/* ---------- layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--sp-2xl); }
.section--ivory { background: var(--ivory); }
.section--navy { background: var(--navy); color: var(--slate); }
.section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }
.prose { max-width: var(--content); }

/* eyebrow + gold hairline: the recurring section marker */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--sp-s);
  display: block;
}
.eyebrow::before {
  content: "";
  display: block;
  width: 46px; height: 1px;
  background: var(--gold);
  margin-bottom: var(--sp-s);
}
.section--navy .eyebrow { color: var(--gold); }
.section--navy .eyebrow::before { background: var(--gold); opacity: .85; }

/* ---------- prototype notice (prototype only — not in final theme) ---------- */
.proto-bar {
  background: var(--slate); color: var(--ink);
  font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
  font-weight: 600; text-align: center; padding: 0.45rem var(--gutter);
  line-height: 1.4;
}
.proto-bar span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-muted); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid rgba(216, 222, 232, 0.13);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-m); min-height: 78px;
}

/* temporary typographic wordmark — placeholder for the supplied logo */
.wordmark {
  display: flex; align-items: center; gap: 0.85rem;
  text-decoration: none; color: var(--white); flex-shrink: 0;
}
.wordmark__rule { width: 2px; height: 30px; background: var(--gold); flex-shrink: 0; }
.wordmark__text {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.16rem; letter-spacing: 0.005em; line-height: 1.1;
  white-space: nowrap;
}
.wordmark__sub {
  display: block; font-family: var(--sans); font-size: 0.75rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 0.2rem + 1.6vw, 2.1rem); }
.nav a {
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.015em;
  color: var(--slate); text-decoration: none; padding: 0.4rem 0;
  border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.nav a:hover { color: var(--white); border-bottom-color: var(--gold); }
.nav a[aria-current="page"] { color: var(--white); border-bottom-color: var(--gold); }
/* the CTA is an <a> inside .nav — restore button colours over the nav-link rule */
.nav a.btn--gold, .nav a.btn--gold:hover { color: var(--navy); border-bottom-color: transparent; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.035em; text-transform: uppercase;
  padding: 0.95rem 1.6rem; border-radius: 2px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
  min-height: 46px; text-align: center;
}
.btn--gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-dim); border-color: var(--gold-dim); }
.btn--outline-light { color: var(--ivory); border-color: rgba(245, 241, 232, 0.42); background: transparent; }
.btn--outline-light:hover { border-color: var(--gold); color: var(--gold); }
.btn--outline-dark { color: var(--navy); border-color: rgba(8, 20, 38, 0.28); background: transparent; }
.btn--outline-dark:hover { border-color: var(--navy); background: var(--navy); color: var(--ivory); }
.btn--header {
  padding: 0.7rem 1.05rem; min-height: 42px; font-size: 0.75rem;
  letter-spacing: 0.06em; white-space: nowrap; flex-shrink: 0;
}

/* ---------- mobile nav ---------- */
.nav-toggle {
  display: none; background: none; border: 1px solid rgba(216,222,232,.28);
  color: var(--slate); width: 46px; height: 42px; border-radius: 2px;
  align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.nav-toggle:hover { border-color: var(--gold); color: var(--gold); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- hero ---------- */
.hero { background: var(--navy); color: var(--slate); position: relative; overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: clamp(2.25rem, 1rem + 3vw, 4rem);
  align-items: center;
  padding-block: clamp(4rem, 2.5rem + 4.5vw, 7rem);
}
.hero__eyebrow {
  font-family: var(--sans); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  display: block; margin-bottom: var(--sp-s);
}
.hero__eyebrow::before {
  content: ""; display: block; width: 46px; height: 1px;
  background: var(--gold); margin-bottom: var(--sp-s);
}
.hero h1 {
  font-size: var(--fs-hero); color: var(--white);
  line-height: 1.1; letter-spacing: -0.02em;
  max-width: 23ch; margin-bottom: var(--sp-m);
}
.hero__lead {
  font-size: var(--fs-lead); color: #b9c4d4; max-width: 54ch;
  line-height: 1.68; margin-bottom: var(--sp-l);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-s); }
.hero__body { display: flex; flex-direction: column; justify-content: center; }
.hero__figure { position: relative; margin: 0; align-self: center; }
.hero__figure img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 46%;
  border-radius: 2px; filter: saturate(0.92) contrast(1.02);
}
.hero__figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,20,38,.06), rgba(8,20,38,.24));
  border-radius: 2px;
}
.hero__rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold) 0 18%, rgba(216,222,232,.16) 18% 100%);
}

/* ---------- who we are: lede, panoramic band, two-column register ---------- */
.who__lede { max-width: 34ch; margin-bottom: var(--sp-l); }
.who__lede h2 { font-size: var(--fs-h2); }
.who__band { margin: 0 0 var(--sp-l); }
.who__band img {
  width: 100%; aspect-ratio: 21 / 8; object-fit: cover; object-position: 50% 26%;
  border-radius: 2px; filter: saturate(0.93);
}
.who__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  border-top: 1px solid var(--rule-light); padding-top: var(--sp-m);
}
.who__cols p { color: var(--ink-muted); max-width: 46ch; margin: 0; }

/* ---------- capabilities: numbered editorial index ---------- */
.cap__head { max-width: 60ch; margin-bottom: var(--sp-xl); }
.cap__head h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-s); max-width: 30ch; }
.cap__head p { color: var(--ink-muted); }

.cap__list { border-top: 1px solid var(--rule-light); }
.cap__item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.15fr) minmax(0, 1.2fr);
  gap: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
  padding-block: clamp(1.6rem, 1rem + 1.2vw, 2.35rem);
  border-bottom: 1px solid var(--rule-light);
  align-items: start;
}
.cap__num {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--gold-ink); padding-top: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.cap__item h3 { font-size: var(--fs-h3); max-width: 27ch; text-wrap: pretty; }
.cap__item p { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.7; }
.cap__flag {
  display: inline-block; font-family: var(--sans); font-size: 0.75rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-ink); border: 1px solid rgba(128, 97, 23, 0.45);
  padding: 0.2rem 0.5rem; border-radius: 2px; margin-top: var(--sp-xs);
}
/* flagship gets a wider lead cell and an ivory tint */
.cap__item--flagship { background: linear-gradient(90deg, var(--ivory-2), transparent 72%); }
.cap__item--flagship h3 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); }

/* ---------- CIG framework: one continuous measure, four ruled stages ---------- */
.fw__head { max-width: 58ch; margin-bottom: var(--sp-xl); }
.fw__head h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-s); max-width: 26ch; }
.fw__head p { color: #a9b5c6; }

.fw__track { position: relative; }
.fw__rule {
  position: relative; height: 2px; background: rgba(216, 222, 232, 0.18);
  overflow: hidden;
}
.fw__fill {
  position: absolute; inset: 0; background: var(--gold);
  transform-origin: left center; transform: scaleX(var(--fw-progress, 0));
  transition: transform 1.4s cubic-bezier(.22,.7,.25,1);
}
.fw__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fw__step {
  position: relative;
  padding: var(--sp-m) clamp(1rem, 0.5rem + 1.6vw, 2.25rem) 0 0;
  border-right: 1px solid rgba(216, 222, 232, 0.14);
}
.fw__step + .fw__step { padding-left: clamp(1rem, 0.5rem + 1.6vw, 2.25rem); }
.fw__step:last-child { border-right: 0; padding-right: 0; }
/* the tick that ties each stage to the measure above it */
.fw__tick {
  position: absolute; top: 0; left: 0; width: 1px; height: 22px;
  background: var(--gold);
}
.fw__step + .fw__step .fw__tick { left: clamp(1rem, 0.5rem + 1.6vw, 2.25rem); }
.fw__stage {
  display: block; font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  margin-bottom: var(--sp-xs);
}
.fw__step h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.6rem);
  color: var(--white); letter-spacing: -0.015em;
  margin-top: var(--sp-xs); margin-bottom: var(--sp-s);
  display: flex; align-items: baseline; gap: 0.7rem;
}
.fw__numeral {
  font-family: var(--serif); font-size: 0.92em; font-weight: 400;
  color: var(--gold); letter-spacing: 0.04em; flex-shrink: 0;
  min-width: 1.6em;
}
.fw__step p { color: #a3b0c2; font-size: var(--fs-small); line-height: 1.7; max-width: 34ch; }

/* ---------- who we serve: low-density ruled register ---------- */
.serve__head { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: var(--sp-l); align-items: end; margin-bottom: var(--sp-l); }
.serve__head h2 { font-size: var(--fs-h2); max-width: 24ch; }
.serve__head p { color: var(--ink-muted); font-size: var(--fs-small); }

.serve__list {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--rule-light);
}
.serve__item {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1rem, 0.5rem + 2vw, 3rem); align-items: baseline;
  padding-block: clamp(0.95rem, 0.7rem + 0.6vw, 1.35rem);
  border-bottom: 1px solid var(--rule-light);
}
.serve__item h3 { font-size: var(--fs-h4); margin: 0; }
.serve__item p {
  margin: 0; font-size: var(--fs-small); color: var(--ink-muted);
  line-height: 1.5; max-width: 42ch;
}
.serve__item--flag h3::after {
  content: "Flagship"; display: inline-block; margin-left: 0.6rem;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink);
  border: 1px solid rgba(128, 97, 23, 0.45); border-radius: 2px;
  padding: 0.12rem 0.42rem; vertical-align: 0.16em;
}
.serve__note {
  margin-top: var(--sp-l); font-size: var(--fs-small); color: var(--ink-muted);
  max-width: 62ch; padding-left: var(--sp-s); border-left: 2px solid var(--gold);
}

/* ---------- why cig ---------- */
.why__head { margin-bottom: var(--sp-l); }
.why__head h2 { font-size: var(--fs-h2); max-width: 24ch; }
.why__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 clamp(2rem, 1rem + 4vw, 5rem); }
.why__item { padding-block: var(--sp-s) var(--sp-m); border-top: 1px solid rgba(216,222,232,.16); }
.why__item h3 {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold);
  margin-bottom: var(--sp-xs);
}
.why__item p { color: #a9b5c6; font-size: var(--fs-small); line-height: 1.7; max-width: 44ch; }
/* the stagger: second column drops by half a step */
.why__grid > .why__item:nth-child(even) { margin-top: 0; }
@media (min-width: 900px) {
  .why__grid > .why__item:nth-child(2) { margin-top: var(--sp-m); }
  .why__grid > .why__item:nth-child(4) { margin-top: var(--sp-m); }
  /* five differentiators: 3 in the left column, 2 in the offset right column */
}

/* ---------- insights: production three-article index ---------- */
.ins__head { display: flex; flex-wrap: wrap; gap: var(--sp-m); align-items: end; justify-content: space-between; margin-bottom: var(--sp-l); }
.ins__head h2 { font-size: var(--fs-h2); max-width: 22ch; }
.ins__link {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 3px;
  white-space: nowrap;
}
.ins__link:hover { color: var(--gold-ink); }

.ins__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule-light);
}
.ins__card {
  display: flex; flex-direction: column;
  padding: var(--sp-m) clamp(1rem, 0.5rem + 2vw, 2.5rem) var(--sp-m) 0;
  border-right: 1px solid var(--rule-light);
}
.ins__card + .ins__card { padding-left: clamp(1rem, 0.5rem + 2vw, 2.5rem); }
.ins__card:last-child { border-right: 0; padding-right: 0; }
.ins__index {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; margin-bottom: var(--sp-s);
}
.ins__meta {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink);
  margin-bottom: var(--sp-2xs);
}
.ins__card h3 { font-size: var(--fs-h3); line-height: 1.28; margin-bottom: var(--sp-s); }
.ins__card h3 a { text-decoration: none; }
.ins__card h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.ins__card p { font-size: var(--fs-small); color: var(--ink-muted); line-height: 1.65; margin-bottom: var(--sp-m); }
.ins__more {
  margin-top: auto; font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted);
  border-top: 1px solid var(--rule-light); padding-top: var(--sp-xs);
}

/* ---------- final CTA ---------- */
.cta { color: var(--slate); text-align: left; }
.cta__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem,1rem+4vw,4.5rem); align-items: center; }
.cta h2 { font-size: var(--fs-h2); color: var(--white); max-width: 24ch; margin-bottom: var(--sp-s); }
.cta p { color: #a9b5c6; max-width: 56ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-s); margin-top: var(--sp-l); }
.cta__figure { margin: 0; }
.cta__figure img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px;
  filter: saturate(.9) contrast(1.02);
}

/* ---------- footer ---------- */
.site-footer { background: #050e1c; color: #8f9cae; padding-block: var(--sp-xl) var(--sp-m); font-size: var(--fs-small); }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-l); padding-bottom: var(--sp-l); border-bottom: 1px solid rgba(216,222,232,.12); }
.footer__brand .wordmark { margin-bottom: var(--sp-s); }
.footer__brand p { color: #8f9cae; font-size: var(--fs-small); max-width: 36ch; line-height: 1.65; }
.footer__col h3 {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  margin-bottom: var(--sp-s);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 0.55rem; }
.footer__col a { color: #a4b0c1; text-decoration: none; }
.footer__col a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--sp-s) var(--sp-m); justify-content: space-between; padding-top: var(--sp-m); font-size: 0.8125rem; color: #77839a; }
.footer__geo { letter-spacing: 0.04em; }

/* =========================================================
   Responsive — each section is designed, not just collapsed
   ========================================================= */

@media (max-width: 1080px) {
  .nav a { font-size: 0.82rem; }
  .cap__item { grid-template-columns: 3.5rem minmax(0,1fr) minmax(0,1.1fr); }
}

/* tablet landscape and below: mobile navigation */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 0; z-index: 90;
    background: var(--navy); flex-direction: column;
    align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 8.5rem var(--gutter) var(--sp-xl);
    transform: translateY(-100%); transition: transform .28s ease, visibility .28s ease;
    overflow-y: auto; visibility: hidden;
  }
  .nav[data-open="true"] { transform: translateY(0); visibility: visible; }
  .nav a {
    font-family: var(--serif); font-size: 1.45rem; font-weight: 600;
    color: var(--white); padding: 1rem 0; border-bottom: 1px solid rgba(216,222,232,.12);
    letter-spacing: -0.01em;
  }
  .nav a:hover { border-bottom-color: rgba(216,222,232,.12); color: var(--gold); }
  .nav .btn { margin-top: var(--sp-l); font-family: var(--sans); align-self: flex-start; }
  .nav .btn--header { padding: 1rem 1.6rem; font-size: 0.8125rem; }
  .nav .btn--gold { color: var(--navy); border-bottom-color: var(--gold); }
  .wordmark { position: relative; z-index: 95; }
  .nav-toggle { position: relative; z-index: 160; }
  body[data-nav-open="true"] { overflow: hidden; }

  .hero__grid { grid-template-columns: 1fr; padding-block: clamp(2.5rem,1.5rem+4vw,4rem); gap: var(--sp-l); align-items: start; }
  .hero h1 { max-width: 24ch; }
  .hero__figure img { aspect-ratio: 16 / 9; }

  .cta__inner { grid-template-columns: 1fr; }
  .cta__figure { order: -1; }
  .cta__figure img { aspect-ratio: 16 / 9; }
  .who__band img { aspect-ratio: 16 / 7; }
  .who__cols { grid-template-columns: 1fr; gap: var(--sp-s); }
  .serve__head { grid-template-columns: 1fr; gap: var(--sp-s); }

  /* framework: two ruled pairs, the measure becomes a rule per row */
  .fw__rule { display: none; }
  .fw__steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fw__step { border-top: 1px solid rgba(216,222,232,.16); padding-top: var(--sp-s); }
  .fw__step:nth-child(2n) { border-right: 0; padding-right: 0; }
  .fw__step:nth-child(2n+1) { padding-left: 0; }
  .fw__step:nth-child(2n+1) .fw__tick { left: 0; }

  .serve__item { grid-template-columns: 1fr; gap: 0.2rem; align-items: start; }

  .ins__list { grid-template-columns: 1fr; }
  .ins__card, .ins__card + .ins__card {
    border-right: 0; padding-left: 0; padding-right: 0;
    border-bottom: 1px solid var(--rule-light);
    padding-block: var(--sp-m);
  }
  .ins__card:last-child { border-bottom: 0; }
  .ins__more { border-top: 0; padding-top: 0; margin-top: 0; }
  .footer__top { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-l) var(--sp-m); }
}

/* mobile */
@media (max-width: 640px) {
  .header-inner { min-height: 68px; }
  .wordmark__text { font-size: 1.02rem; }
  .wordmark__sub { font-size: 0.75rem; letter-spacing: 0.1em; }

  .hero h1 { max-width: 100%; }
  .hero__lead { font-size: 1.0625rem; }
  .hero__actions .btn, .cta__actions .btn { width: 100%; }

  /* capabilities: single column, numeral inline with the title */
  .cap__item { grid-template-columns: 1fr; gap: var(--sp-2xs); }
  .cap__num { padding-top: 0; }
  .cap__item--flagship { background: none; border-left: 2px solid var(--gold); padding-left: var(--sp-s); }

  .fw__steps { grid-template-columns: 1fr; }
  .fw__step { padding-right: 0; border-right: 0; }
  .fw__step p { max-width: 100%; }

  .why__grid { grid-template-columns: 1fr; }
  .why__item p { max-width: 100%; }

  .ins__head { flex-direction: column; align-items: flex-start; gap: var(--sp-s); }

  .footer__top { grid-template-columns: 1fr; gap: var(--sp-m); }
  .footer__bottom { flex-direction: column; gap: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .fw__fill { transform: scaleX(1); }
}

/* =========================================================
   STAGE 4 — internal page components
   Class families map 1:1 to block patterns in the theme:
   cig/page-hero, cig/breadcrumb, cig/register, cig/rows,
   cig/framework-strip, cig/cross-links, cig/practice-index,
   cig/stages, cig/empty-state, cig/archive, cig/article,
   cig/contact-form, cig/legal, cig/not-found, cig/search
   ========================================================= */

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.prose--wide { max-width: 78ch; }
.prose p { margin-block: 0 var(--sp-s); }

.link-arrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--gold-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(128, 97, 23, .35);
  padding-bottom: 2px;
}
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { color: var(--navy); border-bottom-color: var(--navy); }
.section--navy .link-arrow { color: var(--gold); border-bottom-color: rgba(214,168,58,.4); }
.section--navy .link-arrow:hover { color: var(--white); border-bottom-color: var(--white); }

/* ---------- breadcrumb ---------- */
.crumbs { background: var(--navy); padding-block: var(--sp-s) 0; }
.crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: .55rem;
  margin: 0; padding: 0;
  font-family: var(--sans); font-size: 0.8125rem; letter-spacing: .02em;
}
.crumbs li + li::before { content: "/"; color: rgba(216,222,232,.45); margin-right: .55rem; }
.crumbs a { color: #c6d0de; text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs span { color: #eef1f6; }

/* ---------- page hero ---------- */
.ph { padding-block: clamp(2.75rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 3vw, 5rem); position: relative; }
.ph__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2.25rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.ph--text .ph__grid { grid-template-columns: minmax(0, 1fr); }
.ph h1 {
  font-family: var(--serif);
  font-size: var(--fs-hero);
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--white);
  margin: 0 0 var(--sp-s);
  max-width: 26ch;
  text-wrap: balance;
}
.ph--text h1 { max-width: 34ch; }
.ph__lead {
  font-family: var(--sans);
  font-size: var(--fs-lead);
  color: #c3cddb;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0;
}
.ph__figure { margin: 0; }
.ph__figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: var(--ph-ratio, 4 / 3);
  object-fit: cover;
  filter: saturate(.94) contrast(1.02);
}
.ph__rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold) 0 22%, rgba(214,168,58,.16) 22% 100%);
}

/* ---------- full-measure band ---------- */
.band { margin: 0 0 var(--sp-xl); }
.band img {
  display: block; width: 100%; height: auto;
  aspect-ratio: var(--band-ratio, 21 / 8);
  object-fit: cover;
  object-position: 50% 38%;
  filter: saturate(.94) contrast(1.02);
}

/* ---------- context section ---------- */
.ctx__head { margin-bottom: var(--sp-m); }
.ctx__head h2 { font-size: var(--fs-h2); max-width: 30ch; margin: 0; }
.ctx__prose { margin-bottom: var(--sp-xl); }
.ctx__prose p { color: var(--ink-muted); }

/* ---------- ruled register ---------- */
.reg { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.reg__item {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 var(--sp-s);
  padding-block: var(--sp-s) var(--sp-m);
  border-top: 1px solid var(--rule-light);
}
.reg--plain .reg__item { grid-template-columns: minmax(0, 1fr); }
.reg__item:last-child { border-bottom: 1px solid var(--rule-light); }
.reg__num {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--gold-ink);
  letter-spacing: .06em;
  padding-top: .25rem;
}
.reg__h {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 .4rem;
  max-width: 34ch;
}
.reg__p { margin: 0; color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.7; max-width: 62ch; }
.section--navy .reg__item { border-color: rgba(216,222,232,.18); }
.section--navy .reg__num { color: var(--gold); }
.section--navy .reg__p { color: #b3bfcf; }

/* ---------- one-line ruled rows ---------- */
.rows { list-style: none; margin: 0; padding: 0; }
.rows__item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--sp-s);
  align-items: baseline;
  padding-block: var(--sp-s);
  border-top: 1px solid var(--rule-light);
}
.rows__item:last-child { border-bottom: 1px solid var(--rule-light); }
.rows__label { font-family: var(--serif); font-size: var(--fs-h4); }
.rows__desc { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.65; }

/* ---------- generic light content block ---------- */
.blk__head { margin-bottom: var(--sp-l); }
.blk__head h2 { font-size: var(--fs-h2); max-width: 28ch; margin: 0 0 var(--sp-xs); }

/* ---------- engagement forms ---------- */
.eng__head { margin-bottom: var(--sp-l); }
.eng__head h2 { font-size: var(--fs-h2); max-width: 26ch; margin: 0; }
.eng__note, .empty__note, .arch__note {
  margin: var(--sp-m) 0 0;
  font-size: var(--fs-small);
  color: var(--ink-faint);
  max-width: 72ch;
  border-left: 2px solid var(--rule-light);
  padding-left: var(--sp-s);
}

/* ---------- image + text aside ---------- */
.ph__aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.ph__aside--flip .aside__figure { order: 2; }
.aside__figure { margin: 0; }
.aside__figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(.94) contrast(1.02);
}
.aside__body p { color: var(--ink-muted); }
.aside__body .eyebrow { margin-bottom: var(--sp-xs); }

/* ---------- west africa module ---------- */
.wa__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}
.wa__body h2 { font-size: var(--fs-h2); max-width: 26ch; margin: 0 0 var(--sp-s); }
.wa__body p { color: var(--ink-muted); max-width: 62ch; }
.wa__figure { margin: 0; position: sticky; top: 7rem; }
.wa__figure img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; filter: saturate(.94) contrast(1.02);
}

/* ---------- framework strip ---------- */
.strip { padding-block: var(--sp-xl); }
.strip__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.strip__body p { margin: 0 0 var(--sp-xs); color: var(--ink-muted); max-width: 54ch; }
.strip__link { margin: var(--sp-xs) 0 0; }
.strip__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--gold);
}
.strip__stage {
  padding: var(--sp-s) var(--sp-xs) 0 0;
  font-family: var(--serif);
  font-size: var(--fs-small);
  color: var(--ink-faint);
  display: flex; flex-direction: column; gap: .35rem;
}
.strip__num { font-size: 0.75rem; letter-spacing: .12em; color: var(--gold-ink); }
.strip__stage.is-active { color: var(--ink); font-size: var(--fs-h4); }

/* ---------- cross links ---------- */
.xlinks { padding-block: var(--sp-xl); }
.xl__head {
  font-family: var(--sans); font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-faint); font-weight: 600;
  margin: 0 0 var(--sp-s);
}
.xl__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xl__list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xl__list li { border-top: 1px solid var(--rule-light); }
.xl__list a {
  display: flex; gap: var(--sp-xs); align-items: baseline;
  padding: var(--sp-s) var(--sp-m) var(--sp-s) 0;
  text-decoration: none; color: var(--ink);
}
.xl__list a:hover .xl__label { color: var(--gold-ink); }
.xl__num { font-family: var(--serif); font-size: .8125rem; color: var(--gold-ink); letter-spacing: .08em; }
.xl__label { font-family: var(--serif); font-size: var(--fs-h4); line-height: 1.3; }
.xl__label em { display: block; font-style: normal; font-family: var(--sans); font-size: var(--fs-small); color: var(--ink-muted); margin-top: .3rem; }

/* ---------- practice index ---------- */
.pa__list { list-style: none; margin: 0; padding: 0; }
.pa__item {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr);
  gap: 0 var(--sp-s);
  padding-block: var(--sp-m);
  border-top: 1px solid var(--rule-light);
}
.pa__item:last-child { border-bottom: 1px solid var(--rule-light); }
.pa__num { font-family: var(--serif); font-size: 1.05rem; color: var(--gold-ink); letter-spacing: .06em; padding-top: .35rem; }
.pa__h { font-family: var(--serif); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.95rem); font-weight: 400; line-height: 1.18; margin: 0 0 .5rem; }
.pa__h a { color: var(--ink); text-decoration: none; }
.pa__h a:hover { color: var(--gold-ink); }
.pa__text p { margin: 0 0 .7rem; color: var(--ink-muted); font-size: var(--fs-small); max-width: 62ch; }
.pa__item--flagship { background: linear-gradient(90deg, rgba(214,168,58,.07), transparent 62%); }
.pa__h .cap__flag { margin-left: .6rem; vertical-align: middle; }

/* ---------- approach stages ---------- */
.stages { padding-top: 0; }
.stage {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0 var(--sp-m);
  padding-block: var(--sp-l);
  border-top: 1px solid var(--rule-light);
}
.stage:last-child { border-bottom: 1px solid var(--rule-light); }
.stage__mark { position: relative; }
.stage__num {
  font-family: var(--serif); font-size: 1.5rem; color: var(--gold-ink);
  letter-spacing: .06em; position: sticky; top: 7rem; display: block;
}
.stage__body h2 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400; margin: 0 0 .4rem; }
.stage__lead { font-size: var(--fs-lead); color: var(--ink); max-width: 52ch; margin: 0 0 var(--sp-m); }
.stage__body h3 {
  font-family: var(--sans); font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-faint); font-weight: 600; margin: 0 0 .6rem;
}
.stage__body ul { margin: 0 0 var(--sp-m); padding-left: 1.1rem; max-width: 62ch; }
.stage__body li { color: var(--ink-muted); font-size: var(--fs-small); margin-bottom: .35rem; }
.stage__keep { margin: 0; max-width: 62ch; font-size: var(--fs-small); color: var(--ink-muted); border-left: 2px solid var(--gold); padding-left: var(--sp-s); }

/* ---------- key/value ---------- */
.kv__head { margin-bottom: var(--sp-m); }
.kv__head h2 { font-size: var(--fs-h2); margin: 0; }
.kv__list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-l); }
.kv__list > div { padding-block: var(--sp-s); border-top: 1px solid var(--rule-light); }
.kv__list dt {
  font-family: var(--sans); font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-faint); font-weight: 600; margin-bottom: .35rem;
}
.kv__list dd { margin: 0; font-family: var(--serif); font-size: var(--fs-h4); }

/* ---------- empty state (Our Work) ---------- */
.empty__panel {
  border: 1px solid var(--rule-light);
  border-top: 2px solid var(--gold);
  padding: clamp(2rem, 1.25rem + 3vw, 4rem);
  max-width: 78ch;
  position: relative;
}
.empty__mark {
  display: block; width: 2.5rem; height: 1px; background: var(--gold); margin-bottom: var(--sp-m);
}
.empty__panel h2 { font-size: var(--fs-h2); margin: 0 0 var(--sp-s); max-width: 26ch; }
.empty__panel p { color: var(--ink-muted); max-width: 60ch; margin: 0 0 var(--sp-m); }
.empty__actions { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }

/* ---------- insights archive ---------- */
.arch__bar { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--navy); padding-bottom: var(--sp-xs); margin-bottom: var(--sp-m); }
.arch__head { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; margin: 0; }
.arch__count { margin: 0; font-size: var(--fs-small); color: var(--ink-faint); }
.arch__list { list-style: none; margin: 0; padding: 0; }
.arch__item {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 var(--sp-s); padding-block: var(--sp-m);
  border-bottom: 1px solid var(--rule-light);
}
.arch__num { font-family: var(--serif); font-size: 1rem; color: var(--gold-ink); letter-spacing: .06em; padding-top: .3rem; }
.arch__meta { margin: 0 0 .5rem; display: flex; flex-wrap: wrap; row-gap: .35rem; gap: var(--sp-s); font-family: var(--sans); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); font-weight: 600; }
.arch__h { font-family: var(--serif); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.95rem); font-weight: 400; line-height: 1.2; margin: 0 0 .5rem; max-width: 34ch; }
.arch__h a { color: var(--ink); text-decoration: none; }
.arch__h a:hover { color: var(--gold-ink); }
.arch__standfirst { margin: 0 0 .7rem; color: var(--ink-muted); font-size: var(--fs-small); max-width: 60ch; }

/* ---------- article ---------- */
.art { padding-top: var(--sp-xl); }
.art__head { max-width: 74ch; }
.art__flag {
  font-family: var(--sans); font-size: 0.8125rem; letter-spacing: .04em;
  color: #6b4d05; background: rgba(214,168,58,.18);
  border-left: 3px solid var(--gold); padding: .55rem var(--sp-s);
  margin: 0 0 var(--sp-m);
}
.art__meta { margin: 0 0 var(--sp-s); display: flex; flex-wrap: wrap; gap: var(--sp-s); font-family: var(--sans); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); font-weight: 600; }
.art h1 { font-family: var(--serif); font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 var(--sp-s); max-width: 30ch; }
.art__standfirst { font-size: var(--fs-lead); color: var(--ink-muted); max-width: 56ch; margin: 0 0 var(--sp-s); }
.art__byline { font-family: var(--sans); font-size: var(--fs-small); color: var(--ink-faint); margin: 0 0 var(--sp-l); }
.art .band { margin-bottom: var(--sp-xl); }
.art__body { max-width: 68ch; }
.art__body p { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.72; margin: 0 0 var(--sp-s); }
.art__body h2 { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 600; margin: var(--sp-l) 0 var(--sp-xs); max-width: 34ch; }
.art__body h3 { font-family: var(--serif); font-size: var(--fs-h4); font-weight: 600; margin: var(--sp-m) 0 var(--sp-2xs); }
.art__body ul { margin: 0 0 var(--sp-s); padding-left: 1.2rem; }
.art__body li { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.7; margin-bottom: .4rem; color: var(--ink-muted); }
.art__quote { margin: var(--sp-l) 0; padding-left: var(--sp-s); border-left: 2px solid var(--gold); }
.art__quote p { font-size: 1.35rem; line-height: 1.45; color: var(--ink); margin: 0; }
.art__dropcap::first-letter { initial-letter: 2; font-weight: 600; color: var(--navy); }
.art__cta { font-family: var(--sans); font-size: 1rem; line-height: 1.65; color: var(--ink-muted); border-top: 1px solid var(--rule-light); margin-top: var(--sp-m); padding-top: var(--sp-s); }
.art__cta a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.art__cta a:hover { color: var(--gold-ink); }
.art__note { font-family: var(--sans); font-size: var(--fs-small); line-height: 1.6; color: var(--ink-muted); border-left: 2px solid var(--rule-light); padding-left: var(--sp-xs); margin: var(--sp-m) 0 0; }
.art__body .art__note, .art__body .art__cta { font-family: var(--sans); }
.art__foot { max-width: 68ch; margin-top: var(--sp-xl); border-top: 1px solid var(--rule-light); padding-top: var(--sp-m); }
.art__about h2 { font-family: var(--sans); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); font-weight: 600; margin: 0 0 var(--sp-xs); }
.art__about p { font-size: var(--fs-small); color: var(--ink-muted); margin: 0 0 var(--sp-xs); max-width: 62ch; }

/* ---------- contact ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.contact__h { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400; margin: 0 0 var(--sp-2xs); }
.contact__intro { color: var(--ink-muted); font-size: var(--fs-small); margin: 0 0 var(--sp-m); max-width: 52ch; }
.form__proto {
  font-family: var(--sans); font-size: 0.8125rem; color: #6b4d05;
  background: rgba(214,168,58,.18); border-left: 3px solid var(--gold);
  padding: .55rem var(--sp-s); margin: 0 0 var(--sp-m);
}
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-s); }
.field { margin-bottom: var(--sp-s); display: flex; flex-direction: column; }
.field label {
  font-family: var(--sans); font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: .12em; font-weight: 600; color: var(--ink); margin-bottom: .4rem;
}
.field .req { color: #8a2d1c; }
.field .opt { text-transform: none; letter-spacing: .02em; color: var(--ink-faint); font-weight: 400; margin-left: .35rem; }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: var(--fs-body); color: var(--ink);
  background: var(--white); border: 1px solid #9aa5b4; border-radius: 2px;
  padding: .7rem .8rem; width: 100%;
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--navy);
}
.field__help { margin: .45rem 0 0; font-size: var(--fs-small); color: var(--ink-muted); }
.form__legal { font-size: var(--fs-small); color: var(--ink-muted); margin: var(--sp-s) 0 var(--sp-m); max-width: 56ch; }
.form__legal a { color: var(--gold-ink); }

.contact__aside { display: grid; gap: var(--sp-s); }
.aside-card { border-top: 1px solid var(--rule-light); padding-top: var(--sp-s); }
.aside-card h3 {
  font-family: var(--sans); font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-faint); font-weight: 600; margin: 0 0 .5rem;
}
.aside-card p { margin: 0 0 .5rem; font-size: var(--fs-small); color: var(--ink-muted); }
.aside-card > p:first-of-type { font-family: var(--serif); font-size: var(--fs-h4); color: var(--ink); }
.aside-card a { color: var(--gold-ink); }
.aside-card__note { font-size: var(--fs-small); color: var(--ink-faint); }
.aside-list { list-style: none; margin: 0; padding: 0; }
.aside-list li { font-size: var(--fs-small); color: var(--ink-muted); padding-left: 1rem; position: relative; margin-bottom: .4rem; }
.aside-list li::before { content: "\2014"; position: absolute; left: 0; color: var(--gold-ink); }
.aside-card--notice { background: var(--ivory); border-top: 2px solid var(--navy); padding: var(--sp-s); }
.aside-card--notice > p:first-of-type { font-family: var(--sans); font-size: var(--fs-small); color: var(--ink); }
.contact__img { padding-top: 0; }

/* ---------- legal / privacy ---------- */
.legal__grid { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.toc { position: sticky; top: 7rem; border-top: 2px solid var(--navy); padding-top: var(--sp-xs); }
.toc__h { font-family: var(--sans); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); font-weight: 600; margin: 0 0 var(--sp-xs); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: .35rem; }
.toc a { font-size: var(--fs-small); color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.toc a:hover { color: var(--gold-ink); border-bottom-color: currentColor; }
.legal__flag {
  font-family: var(--sans); font-size: 0.8125rem; color: #6b4d05;
  background: rgba(214,168,58,.18); border-left: 3px solid var(--gold);
  padding: .55rem var(--sp-s); margin: 0 0 var(--sp-s);
}
.legal__updated { font-size: var(--fs-small); color: var(--ink-faint); margin: 0 0 var(--sp-m); }
.legal__body h2 { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 600; margin: var(--sp-l) 0 var(--sp-xs); }
.legal__body p { color: var(--ink-muted); }
.legal__body a { color: var(--gold-ink); }

/* ---------- 404 ---------- */
.nf { padding-block: clamp(4rem, 2rem + 6vw, 8rem); }
.nf__inner { max-width: 62ch; }
.nf__code { font-family: var(--serif); font-size: clamp(3rem, 2rem + 4vw, 5rem); color: var(--gold); display: block; line-height: 1; margin-bottom: var(--sp-s); }
.nf h1 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400; color: var(--white); margin: 0 0 var(--sp-s); }
.nf__lead { color: #c3cddb; margin: 0 0 var(--sp-m); }
.nf__links { list-style: none; margin: 0 0 var(--sp-l); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nf__links li { border-top: 1px solid rgba(216,222,232,.2); }
.nf__links a { display: block; padding: .7rem 0; color: var(--ivory); text-decoration: none; font-family: var(--serif); font-size: var(--fs-h4); }
.nf__links a:hover { color: var(--gold); }
.nf__search label, .srch__form label {
  display: block; font-family: var(--sans); font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
  color: var(--gold); margin-bottom: .5rem;
}
.nf__search-row, .srch__row { display: flex; gap: var(--sp-2xs); max-width: 34rem; }
.nf__search-row input, .srch__row input {
  flex: 1 1 auto; font-family: var(--sans); font-size: var(--fs-body);
  padding: .7rem .8rem; border-radius: 2px; border: 1px solid rgba(216,222,232,.5);
  background: rgba(255,255,255,.06); color: var(--white);
}
.nf__search-row input::placeholder { color: #93a1b3; }
.nf__search-row input:focus-visible, .srch__row input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nf__note { font-size: var(--fs-small); color: #adbaca; margin: var(--sp-m) 0 0; }
.nf__note a, .nf__search a { color: var(--gold); }

/* ---------- search results ---------- */
.srch__head { border-bottom: 2px solid var(--navy); padding-bottom: var(--sp-m); margin-bottom: var(--sp-m); }
.srch h1 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400; margin: 0 0 var(--sp-s); }
.srch__form label { color: var(--ink-faint); }
.srch__row input { background: var(--white); border: 1px solid #9aa5b4; color: var(--ink); }
.srch__count { font-size: var(--fs-small); color: var(--ink-faint); margin: var(--sp-s) 0 0; }
.srch__list { list-style: none; margin: 0; padding: 0; }
.srch__item { padding-block: var(--sp-s) var(--sp-m); border-bottom: 1px solid var(--rule-light); }
.srch__type { margin: 0 0 .35rem; font-family: var(--sans); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); font-weight: 600; }
.srch__item h2 { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; margin: 0 0 .4rem; }
.srch__item h2 a { color: var(--ink); text-decoration: none; }
.srch__item h2 a:hover { color: var(--gold-ink); }
.srch__item p { margin: 0; color: var(--ink-muted); font-size: var(--fs-small); max-width: 66ch; }
.srch__pager { display: flex; gap: var(--sp-xs); margin-top: var(--sp-m); font-family: var(--sans); font-size: var(--fs-small); }
.srch__pager a { color: var(--gold-ink); }
.srch__pager [aria-current="page"] { font-weight: 700; }

/* ---------- cta variant ---------- */
.cta--compact { padding-block: var(--sp-xl); }
.cta--compact .cta__inner { display: block; }
.cta--compact .cta__body { max-width: 60ch; }

/* =========================================================
   Stage 4 responsive
   ========================================================= */
@media (max-width: 1080px) {
  .xl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal__grid { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .ph__grid, .ph__aside, .wa__grid, .strip__grid,
  .contact__grid, .legal__grid { grid-template-columns: minmax(0, 1fr); }
  .ph__figure { order: -1; }
  .ph__aside--flip .aside__figure { order: -1; }
  .wa__figure, .toc, .stage__num { position: static; }
  .toc { margin-bottom: var(--sp-m); }
  .xl__list, .xl__list--two { grid-template-columns: minmax(0, 1fr); }
  .kv__list { grid-template-columns: minmax(0, 1fr); }
  .strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-s); }
  .strip__stage:nth-child(n+3) { border-top: 1px solid var(--rule-light); margin-top: var(--sp-xs); }
}

@media (max-width: 640px) {
  .reg__item { grid-template-columns: minmax(0, 1fr); }
  .reg__num { padding-top: 0; margin-bottom: .3rem; }
  .rows__item { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .pa__item, .arch__item, .stage { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .pa__num, .arch__num { padding-top: 0; }
  .stage__num { font-size: 1.15rem; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .nf__links { grid-template-columns: minmax(0, 1fr); }
  .strip__list { grid-template-columns: minmax(0, 1fr); }
  .strip__stage { border-top: 1px solid var(--rule-light); padding-block: var(--sp-xs); }
  .strip__stage:first-child { border-top: 0; }
  .nf__search-row, .srch__row { flex-wrap: wrap; }
  .nf__search-row input, .srch__row input { flex: 1 1 100%; }
  .empty__actions .btn { width: 100%; text-align: center; }
}
.nf .xl__head { color: var(--gold); margin-bottom: var(--sp-2xs); }
.who--wide .who__lede { max-width: 44rem; }
.who__cols p + p { margin-top: var(--sp-s); }
/* heading measures in rem — ch resolves against the parent sans font and reads too narrow */
.blk__head h2, .eng__head h2 { max-width: 40rem; }
.ctx__head h2 { max-width: 42rem; }
.empty__panel h2, .wa__body h2 { max-width: 34rem; }
.ph h1 { max-width: 36rem; }
.ph--text h1 { max-width: 44rem; }
.reg__h { max-width: 34rem; }
.arch__h, .art h1 { max-width: 30rem; }
.xl__num { font-size: 1rem; }
figure.band.wrap { padding-inline: var(--gutter); }
/* homepage capability rows: linked titles — approved design preserved, link styling only */
.cap__link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.cap__link:hover { color: var(--gold-ink); border-bottom-color: currentColor; }
/* homepage framework preview: link out to the dedicated Our Approach page */
.fw__more { margin: var(--sp-l) 0 0; }

/* ===============================================================
   WordPress integration layer
   Styles for the elements that only exist once the site runs on
   WordPress: form notices, the honeypot field, core query loops,
   pagination, and the site-logo swap for the final logo file.
   =============================================================== */

/* Contact form notices */
.form__notice {
  border-left: 3px solid var(--gold);
  padding: 1rem 1.25rem;
  margin: 0 0 var(--sp-m);
  background: var(--ivory);
}
.form__notice p { margin: 0; }
.form__notice--ok { border-left-color: #2f6b3f; }
.form__notice--err { border-left-color: #9a3324; }

/* Honeypot — removed from the accessibility tree and from view */
.field--hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Core search block, styled as the approved search row */
.srch__form .wp-block-search__label {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.srch__form .wp-block-search__inside-wrapper {
  display: flex;
  gap: 0.75rem;
  max-width: 34rem;
}
.srch__form .wp-block-search__input {
  flex: 1 1 auto;
  min-width: 0;
}
.srch__form .wp-block-search__button {
  background: var(--gold);
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 0;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.85rem 1.4rem;
  margin: 0;
}
.srch__form .wp-block-search__button:hover,
.srch__form .wp-block-search__button:focus-visible {
  background: var(--gold-dim);
  border-color: var(--gold-dim);
}

/* Core query loops used by Insights and search results */
.srch__query .srch__list,
.ins__grid .ins__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.srch__query .srch__item h2,
.ins__grid .ins__item .ins__title { margin-top: 0; }

/* Core pagination, in the approved pager treatment */
.srch__pager,
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: var(--sp-l);
  font-family: var(--sans);
  font-size: var(--fs-small);
}
.srch__pager a,
.pager a { text-decoration: none; border-bottom: 1px solid transparent; }
.srch__pager a:hover,
.pager a:hover { border-bottom-color: var(--gold); }
.srch__pager .current,
.pager .current { font-weight: 700; }

/* Empty states */
.empty {
  font-family: var(--sans);
  color: var(--ink-muted, #56606f);
}

/* Final logo swap: when a Site Logo image is set, the typographic wordmark
   text steps aside automatically, so the real logo needs no layout work. */
.header__brand:has(.brandmark img) .wordmark { display: none; }
/* Approved brand applications: the footer retains the primary lockup.
   The header uses the FINAL header-only reverse compact derivative directly
   on navy, at the approved dimensions. No artwork is recolored with CSS.
   Header heights, navigation spacing and breakpoints remain unchanged. */
.cig-primary-logo { flex-shrink: 0; width: 96px; max-width: 100%; }
.cig-primary-logo a { display: block; background: var(--white); }
.cig-primary-logo img { display: block; width: 100%; height: auto; }
.header__brand .cig-primary-logo { position: relative; z-index: 95; width: 116px; }
.header__brand .cig-primary-logo a { background: transparent; }
.cig-primary-logo.brandmark--footer { width: 240px; margin-bottom: var(--sp-m); }
@media (max-width: 640px) {
  .header__brand .cig-primary-logo { width: 100px; }
}
.header__brand .brandmark { display: flex; align-items: center; }
.header__brand .brandmark img { display: block; height: auto; }

/* ---------------------------------------------------------------
   Header, rendered by core blocks
   The approved header composition is preserved while the menu items,
   site name, tagline and logo all stay editable in WordPress.
   --------------------------------------------------------------- */

.header__brand { display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; }
.wordmark { gap: 0.85rem; }
.wordmark__text { display: block; }
.wordmark__name,
.wordmark__name a {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: 0.005em;
  line-height: 1.1;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  margin: 0;
}
.wordmark__name a:hover,
.wordmark__name a:focus-visible { color: var(--gold); }
.wordmark .wordmark__sub { margin: 3px 0 0; }

/* Core navigation inside the approved .nav shell */
.nav .wp-block-navigation,
.nav .nav__list { flex: 0 1 auto; }
.nav .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.2rem + 1.6vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav .wp-block-navigation-item { margin: 0; }
.nav .wp-block-navigation-item__content {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--slate);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.nav .wp-block-navigation-item__content:hover,
.nav .wp-block-navigation-item__content:focus-visible,
.nav .current-menu-item > .wp-block-navigation-item__content {
  color: var(--white);
  border-bottom-color: var(--gold);
}

/* The consultation CTA sits at the end of the nav row */
.nav .header__cta { margin: 0; flex-shrink: 0; }
.nav .header__cta .wp-block-button { margin: 0; }

@media (max-width: 960px) {
  .nav { padding-top: 8.5rem; }
  .nav .wp-block-navigation { width: 100%; }
  .nav .wp-block-navigation__container {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav .wp-block-navigation-item__content {
    display: block;
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--white);
    padding: 1rem 0;
    border-bottom: 1px solid rgba(216, 222, 232, .12);
    letter-spacing: -0.01em;
  }
  .nav .wp-block-navigation-item__content:hover,
  .nav .wp-block-navigation-item__content:focus-visible {
    color: var(--gold);
    border-bottom-color: rgba(216, 222, 232, .12);
  }
  .nav .header__cta { margin-top: var(--sp-l); align-self: flex-start; }
}

/* ---------------------------------------------------------------
   Insights, rendered by the Query Loop
   The approved list composition is preserved; entries are real
   published posts, and the empty state is what shows before the
   first article is published.
   --------------------------------------------------------------- */

/* Homepage preview */
.ins__query { margin: 0; }
.ins__list.wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-light);
  counter-reset: ins;
}
.ins__list.wp-block-post-template > li { margin: 0; }
.ins__list .ins__card { counter-increment: ins; }
.ins__list .ins__card::before {
  content: counter(ins, decimal-leading-zero);
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--gold-ink);
  margin-bottom: var(--sp-s);
}
.ins__list .wp-block-post-title { margin: 0 0 var(--sp-xs); }
.ins__list .wp-block-post-title a { color: inherit; text-decoration: none; }
.ins__list .wp-block-post-title a:hover,
.ins__list .wp-block-post-title a:focus-visible { color: var(--gold-ink); }
.ins__list .wp-block-post-excerpt { margin: 0 0 var(--sp-s); }
.ins__list .wp-block-post-excerpt__excerpt { margin: 0; }
.ins__list .wp-block-post-excerpt__more-text { display: none; }
.ins__empty {
  padding-top: 0;
  max-width: 46rem;
  color: var(--ink-muted);
  margin: 0;
}

@media (max-width: 900px) {
  .ins__list.wp-block-post-template { grid-template-columns: 1fr; }
}

/* Insights index */
.arch__query { margin: 0; }
.arch__list.wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: arch;
}
.arch__list.wp-block-post-template > li {
  counter-increment: arch;
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--sp-m);
  padding: var(--sp-l) 0;
  border-bottom: 1px solid var(--rule-light);
  margin: 0;
}
.arch__list.wp-block-post-template > li::before {
  content: counter(arch, decimal-leading-zero);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold-ink);
  padding-top: 0.45rem;
}
.arch__list .wp-block-post-title { margin: 0 0 var(--sp-xs); }
.arch__list .wp-block-post-title a { color: inherit; text-decoration: none; }
.arch__list .wp-block-post-title a:hover,
.arch__list .wp-block-post-title a:focus-visible { color: var(--gold-ink); }
.arch__list .wp-block-post-excerpt { margin: 0; }
.arch__list .wp-block-post-excerpt__excerpt { margin: 0; }
.arch__list .wp-block-post-excerpt__more-text { display: none; }
.arch__empty {
  padding-top: var(--sp-2xs);
  max-width: 52rem;
  color: var(--ink-muted);
  margin: 0;
}

@media (max-width: 700px) {
  .arch__list.wp-block-post-template > li {
    grid-template-columns: 1fr;
    gap: var(--sp-xs);
  }
  .arch__list.wp-block-post-template > li::before { padding-top: 0; }
}

/* the "view all" link is a paragraph in the block editor: keep it on the
   baseline of the section heading, as approved */
.ins__head > p { margin: 0; }
.blk__head > p:last-child,
.arch__bar > p { margin: 0; }

/* ---------------------------------------------------------------
   Overflow safety
   --------------------------------------------------------------- */

/* the process strip sits in a narrow column: long single words hyphenate
   rather than spill past the column edge */
.strip__stage { hyphens: auto; overflow-wrap: break-word; }
.strip__stage.is-active { font-size: var(--fs-body); }

/* call-to-action buttons wrap and shrink on the narrowest handsets */
.cta__actions { flex-wrap: wrap; }
.cta__actions .wp-block-button,
.cta__actions .wp-block-button__link { max-width: 100%; }

@media (max-width: 380px) {
  .btn { white-space: normal; text-align: center; }
  .cta__actions { flex-direction: column; align-items: stretch; }
  .cta__actions .wp-block-button,
  .cta__actions .wp-block-button__link { width: 100%; }
}

/* Block-editor list items carry no class of their own, so the process strip
   styling is applied through the list itself. */
.strip__list > li {
  padding: var(--sp-s) var(--sp-xs) 0 0;
  font-family: var(--serif);
  font-size: var(--fs-small);
  color: var(--ink-faint);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  hyphens: auto;
  overflow-wrap: break-word;
}
.strip__list > li:last-child { color: var(--ink); }

/* A button is an inline-flex box, so its text is an anonymous flex item that
   will not wrap. On the narrowest handsets the buttons become blocks. */
@media (max-width: 420px) {
  .btn,
  .wp-block-button__link.btn {
    display: block;
    white-space: normal;
    padding-inline: 1.15rem;
    line-height: 1.35;
    padding-block: 0.85rem;
  }
}

/* Between the desktop layout and the mobile menu the header row has to carry
   six links plus the consultation button: tighten the row rather than let it
   push the page wider than the viewport. */
@media (max-width: 1200px) {
  .header-inner { gap: clamp(0.75rem, 0.2rem + 1vw, 1.5rem); }
  .nav .wp-block-navigation__container { gap: clamp(0.7rem, 0.1rem + 0.9vw, 1.25rem); }
  .nav .wp-block-navigation-item__content { font-size: 0.8125rem; letter-spacing: 0.005em; }
  .btn--header { padding: 0.7rem 0.8rem; font-size: 0.75rem; letter-spacing: 0.03em; }
}

@media (max-width: 1040px) and (min-width: 961px) {
  .nav .wp-block-navigation__container { gap: 0.6rem; }
  .nav .wp-block-navigation-item__content { font-size: 0.76rem; }
  .wordmark__name, .wordmark__name a { font-size: 1rem; }
  .btn--header { padding: 0.6rem 0.65rem; font-size: 0.75rem; letter-spacing: 0.02em; }
}

/* The header row runs out of space a little above the old 960px threshold once
   six links and the consultation button are present, so the mobile menu now
   takes over at 1000px. Page layouts still change at 960px as approved. */
@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; position: relative; z-index: 160; }
  .nav {
    position: fixed; inset: 0; z-index: 90;
    background: var(--navy); flex-direction: column;
    align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 8.5rem var(--gutter) var(--sp-xl);
    transform: translateY(-100%); transition: transform .28s ease, visibility .28s ease;
    overflow-y: auto; visibility: hidden;
  }
  .nav[data-open="true"] { transform: translateY(0); visibility: visible; }
  .wordmark { position: relative; z-index: 95; }
  body[data-nav-open="true"] { overflow: hidden; }
  .nav .wp-block-navigation { width: 100%; }
  .nav .wp-block-navigation__container {
    flex-direction: column; align-items: stretch; gap: 0;
  }
  .nav .wp-block-navigation-item__content {
    display: block; font-family: var(--serif); font-size: 1.45rem; font-weight: 600;
    color: var(--white); padding: 1rem 0;
    border-bottom: 1px solid rgba(216, 222, 232, .12); letter-spacing: -0.01em;
  }
  .nav .wp-block-navigation-item__content:hover,
  .nav .wp-block-navigation-item__content:focus-visible {
    color: var(--gold); border-bottom-color: rgba(216, 222, 232, .12);
  }
  .nav .header__cta { margin-top: var(--sp-l); align-self: flex-start; }
  .nav .btn--header { padding: 1rem 1.6rem; font-size: 0.8125rem; letter-spacing: 0.06em; }
  .wordmark__name, .wordmark__name a { font-size: 1.16rem; }
}

/* long single-word step labels hyphenate inside their column */
.fw__step h3, .fw__step .wp-block-heading { hyphens: auto; overflow-wrap: break-word; }

/* The step heading was a flex row, which prevents its label from wrapping in a
   narrow column. Block flow with an inline numeral keeps the same appearance
   and lets long labels wrap. */
.fw__step h3,
.fw__step .wp-block-heading {
  display: block;
}
.fw__step .fw__numeral {
  display: inline-block;
  margin-right: 0.7rem;
}

/* At 12px the tagline no longer fits beside the menu button on the narrowest
   handsets, so it wraps to two lines there rather than shrinking below the
   legibility floor. Type size, colour and hierarchy are unchanged. */
@media (max-width: 420px) {
  .wordmark__sub {
    white-space: normal;
    letter-spacing: 0.05em;
    line-height: 1.3;
    max-width: 34ch;
  }
}
@media (max-width: 359px) {
  .wordmark__sub {
    max-width: 22ch;
  }
}