/* DJM Advisors — site styles
   Design (D-021 / D-022, colour balance 1): A2 header and footer; navy title areas; B1 sections
   (hairlines, small nodes, spaced-capital labels); paper for the Home services section and the
   endings; white elsewhere. The Home hero is unchanged.

   Colour rules (D-006): navy text on light backgrounds; gold is decoration only on white and
   paper (2.56:1 / 2.35:1) and may be text only on navy (4.84:1). Text on navy is white or
   --on-navy. Buttons are navy/white-text or gold/navy-text, never white on gold.
   Measured, WCAG 2.x:
     navy on white 12.36 · on paper 11.35 · ink-muted on white 7.53 · on paper 6.91
     white on navy 12.36 · on navy-deep 14.61 · on-navy on navy 10.50 · on navy-deep 12.41
     gold on navy 4.84 (rings, threads, focus ring) · on navy-deep 5.72 (footer tagline text, focus ring)
     navy rings, threads and rules on white 12.36 / on paper 11.35 (graphics, need 3:1)
   Decorative only (no information): --line hairline on white 1.35 / on paper 1.24;
     rgba(255,255,255,.4) rule on navy 3.33; rgba(255,255,255,.25) hairline on navy 2.16;
     rgba(232,237,243,.75) dotted line on navy 6.65; gold dots and node centres on white/paper.
   No weight above 600 (D-018). */

/* ---------- Fonts: self-hosted Poppins, latin subset, SIL OFL 1.1 (D-015) ---------- */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallback (Arial scaled to Poppins' measured widths; vertical metrics from
   Poppins' 1050/350/100 per 1000 em, divided by size-adjust) to limit layout shift while
   the web fonts load. The bold face names Arial Bold explicitly. */
@font-face { font-family: 'Poppins Fallback'; font-weight: 400; src: local('Arial'), local('ArialMT');
  size-adjust: 112.4%; ascent-override: 93.4%; descent-override: 31.1%; line-gap-override: 8.9%; }
@font-face { font-family: 'Poppins Fallback'; font-weight: 500; src: local('Arial'), local('ArialMT');
  size-adjust: 113.6%; ascent-override: 92.4%; descent-override: 30.8%; line-gap-override: 8.8%; }
@font-face { font-family: 'Poppins Fallback'; font-weight: 600; src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 107.1%; ascent-override: 98.0%; descent-override: 32.7%; line-gap-override: 9.3%; }

:root {
  color-scheme: only light;  /* opt out of forced dark mode, which breaks the brand contrast (R-05) */
  --navy: #1C3652;
  --navy-deep: #152a40;
  --gold: #C79B4A;
  --white: #ffffff;
  --paper: #f7f5f0;          /* warm light section background */
  --ink-muted: #44566b;      /* secondary text on white/paper */
  --on-navy: #e8edf3;        /* secondary text on navy */
  --line: #d9dee5;
  --error: #a1261b;          /* 7.0:1 on white */
  --success: #1e6b3a;        /* 6.4:1 on white */

  --font: 'Poppins', 'Poppins Fallback', system-ui, 'Segoe UI', Arial, sans-serif;
  --container: 72rem;
  --radius: 6px;
  --space: clamp(3.5rem, 8vw, 6rem);
  --space-lg: clamp(4rem, 9vw, 7.5rem);
  --gap: clamp(1.5rem, 3.5vw, 3rem);
  /* Type floor (D-024): spaced capitals >= 14px, other text >= 15px, paragraphs >= 18px. */
  --label-fs: clamp(1rem, 0.7143rem + 1.4286vw, 1.25rem);  /* section labels: 16px at 320px, 20px from 600px */
  --para-fs: clamp(1.125rem, 1.5vw, 1.2rem);                /* body paragraphs: 18px, 19.2px from 1280px */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Band tokens. Light bands (white, paper): navy ink and lines. .band--navy swaps them. */
  --ground: var(--white);    /* the band's own background, used to mask lines behind labels and nodes */
  --ink: var(--navy);
  --muted: var(--ink-muted);
  --rule: var(--navy);       /* section rule (a label sits on it) */
  --thread: var(--navy);     /* index threads, flow segments, ending line */
  --ring: var(--navy);       /* node rings */
  --fill: var(--navy);       /* solid nodes, hover fill */
  --dotted: var(--ink-muted);
  --hair: var(--line);       /* quiet hairlines */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;     /* footer sits at the bottom on short pages */
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--navy);
  background: var(--white);
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Headings are Medium 500 with slightly tight tracking; only the Home hero headline is 600. */
h1, h2, h3 {
  margin: 0 0 1rem;
  line-height: 1.15;
  color: inherit;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
strong, b { font-weight: 600; }  /* browsers default to 700; 600 is the maximum (D-018) */

/* scroll-margin keeps the whole ring (3px offset + 2px) on screen when Tab scrolls an element in. */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; scroll-margin-block: 8px; }
.on-navy :focus-visible { outline-color: var(--gold); }

/* Form-control font reset (select kept deliberately for future forms). */
input, select, textarea, button { font: inherit; font-size: max(1rem, 16px); }

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

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.section { padding-block: var(--space); }

.band--paper { --ground: var(--paper); background-color: var(--paper); }
.band--navy {
  --ground: var(--navy);
  --ink: var(--white);
  --muted: var(--on-navy);
  --rule: rgba(255, 255, 255, 0.4);
  --thread: var(--gold);
  --ring: var(--gold);
  --fill: var(--gold);
  --dotted: rgba(232, 237, 243, 0.75);
  --hair: rgba(255, 255, 255, 0.25);
  background-color: var(--navy);
  color: var(--white);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Navy button (endings, form, short pages). */
.btn--primary {
  padding: 1rem 1.75rem;
  border-radius: 2px;
  background: var(--navy);
  color: var(--white);
  letter-spacing: 0.01em;
}
.btn--primary:hover { background: var(--navy-deep); }
/* Hero buttons (unchanged). */
.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: #d6ae66; }
.btn--outline-light { border-color: var(--white); color: var(--white); }
.btn--outline-light:hover { background: var(--white); color: var(--navy); }
/* Busy state ("Sending…"): 0.8 keeps white-on-navy text at 6.7:1 (0.65 gave 4.3:1). */
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.8; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

.text-link {
  display: inline-block;
  padding-block: 0.35rem;
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
}
.text-link:hover { text-decoration-thickness: 2px; }

/* ---------- Header (white bar; nav in spaced capitals beside the logo from 48rem) ----------
   Logo + nav in one row needs 655px in Poppins and 705px in the fallback font, so the switch
   sits at 48rem, where both fit and the font swap can't move the nav. */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 0.85rem;
}
.brand { display: block; flex: none; }
.brand img { height: 56px; width: auto; }

.primary-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-nav a {
  display: inline-block;
  padding: 0.35rem 0;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.primary-nav a:hover { border-bottom-color: var(--gold); }
/* Current page: navy underline (not gold — a state indicator needs 3:1 contrast). */
.primary-nav a[aria-current="page"] { border-bottom-color: var(--navy); }

@media (min-width: 48rem) {
  .header-inner { padding-block: 1.1rem; }
  .primary-nav ul { gap: 0.25rem 2.25rem; }
  .primary-nav a {
    padding-block: 0.45rem;
    font-size: 0.875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
}
@media (max-width: 47.9375rem) {
  .header-inner { justify-content: center; }
  .brand img { height: 48px; }
  .primary-nav { width: 100%; }
  .primary-nav ul { justify-content: center; gap: 0 0.7rem; }
  .primary-nav a { padding: 0.55rem 0; font-size: 0.9375rem; }
}
/* Below 375px Poppins can't fit the nav on one row (335px), while the fallback font
   (332px) sometimes can; always wrap there so the font swap doesn't move the page. */
@media (max-width: 23.375rem) {
  .primary-nav ul { max-width: 18rem; margin-inline: auto; }
}

/* Windows high-contrast / forced colours: keep only the current page underlined (R-19). */
@media (forced-colors: active) {
  .primary-nav a:not([aria-current]) { border-bottom-color: Canvas; }
  .primary-nav a:not([aria-current]):hover { border-bottom-color: LinkText; }
}

/* ---------- Home hero (unchanged) ---------- */
.hero {
  background:
    radial-gradient(ellipse at 85% 10%, rgba(255, 255, 255, 0.06), transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
  padding-block: clamp(4rem, 11vw, 7.5rem);
}
.hero h1 { max-width: none; font-weight: 600; letter-spacing: -0.01em; text-wrap: wrap; }
.hero h1 .h1-line { display: block; }   /* one sentence per line (R-06) */
.hero .lead {
  max-width: 44rem;
  font-size: clamp(1.125rem, 2vw, 1.3rem);
  color: var(--on-navy);
}
@media (max-width: 30rem) {
  .hero .actions .btn { flex: 1 1 100%; text-align: center; }
}

/* ---------- Shared section parts ---------- */
.display {
  margin: 0;
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  line-height: 1.03;
}
.heading {
  margin: 0;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.12;
}
/* Spaced-capital section label. */
.label {
  font-size: var(--label-fs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
/* "LEADERSHIP PHILOSOPHY" at 0.14em leaves little rule below ~359px in Poppins and wraps below
   ~382px in the fallback font; 0.08em keeps both fonts on one line from 353px. */
@media (max-width: 23.9375rem) {
  .label { letter-spacing: 0.08em; }
}

.split { display: grid; gap: 1.5rem var(--gap); }
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* Ruled section: a line; its label is the first stop ON the line. */
.ruled { position: relative; border-top: 1px solid var(--rule); }
.station {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  align-self: start;
  width: fit-content;
  max-width: 100%;
  margin: calc(-0.7em - 0.5px) 0 0;      /* centre the label on the rule */
  padding-right: 1rem;                   /* the band ground masks the rule behind the words */
  line-height: 1.4;
  background: var(--ground);
}
/* From 56rem a label sits in a narrow column; it keeps to one line and runs along its rule
   (the content beside it starts below the rule). */
@media (min-width: 56rem) {
  .station { max-width: none; white-space: nowrap; }
}
/* Below 56rem the ring is pinned to the label's first line, so a label that wraps in the
   fallback font (320–352px) keeps its ring on the rule; one-line labels look the same.
   At 352px and below the label also stops 1rem short of the column, leaving a stub of rule. */
@media (max-width: 55.9375rem) {
  .station { align-items: flex-start; }
  .station::before { margin-top: calc(0.7em - 6px); }
}
@media (max-width: 22rem) {
  .station { max-width: calc(100% - 1rem); }
}
.station::before {                       /* open ring = start of the section */
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 1px solid var(--ring);
  border-radius: 50%;
  background: var(--ground);
}

/* Role line in spaced capitals (Home intro, About title). */
.role {
  margin: 0.9rem 0 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* When the role line cannot fit on one line, the three roles stack (no stray pipes).
   One line needs 634px in Poppins and 727px in the fallback font. The About title area is
   in view while the font loads, so it stacks until both fonts fit; the Home intro is
   below the fold, so it only needs Poppins to fit. Accepted side effect: if Poppins never
   loads (fonts blocked or failed), the Home line wraps once from about 1050px, leaving
   "LEADERSHIP CONSULTANT |" at the end of its first line. */
@container (max-width: 40.4375rem) {
  .role > span { display: block; }
  .role > .role__sep { display: none; }
}
@container (max-width: 46.4375rem) {
  .page-title .role > span { display: block; }
  .page-title .role > .role__sep { display: none; }
}

/* ---------- Navy title area (every page but Home) ---------- */
.page-title {
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3.5rem, 8vw, 5.5rem);
}
.page-title__aside { margin-top: clamp(1rem, 2.5vw, 1.5rem); container-type: inline-size; }
.page-title .role { margin: 0; }
.page-title__note {
  margin: 0;
  max-width: 42ch;
  color: var(--muted);
  font-size: clamp(1.125rem, 1.6vw, 1.2rem);
  line-height: 1.6;
}
/* Phones: the title scales with the window (32.8px at 320px, 41.6px from ~395px), so every
   title stays on one line in both Poppins and the fallback font and the swap can't re-wrap it. */
@media (max-width: 29.9375rem) {
  .page-title .display { font-size: clamp(1.9rem, 11.76vw - 0.3rem, 2.6rem); }
}

/* ---------- Index: a vertical thread; each title is a stop with an open ring ---------- */
.toc {
  --toc-pad: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
.toc li { position: relative; }
.toc li:not(:last-child)::before {       /* thread to the next node */
  content: "";
  position: absolute;
  left: 5.5px;
  top: calc(var(--toc-pad) + 0.65em + 10px);
  bottom: calc(10px - var(--toc-pad) - 0.65em);
  border-left: 1px solid var(--thread);
}
.toc a {
  position: relative;
  display: block;
  padding: var(--toc-pad) 0 var(--toc-pad) 2.1rem;
  color: var(--ink);
  text-decoration: none;
}
.toc a::before {                         /* open ring; fills on hover and focus */
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--toc-pad) + 0.65em - 6px);
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 1px solid var(--ring);
  border-radius: 50%;
  background: var(--ground);
  transition: background-color 0.2s ease, transform 0.2s var(--ease);
}
.toc a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.toc a:hover::before,
.toc a:focus-visible::before { background: var(--fill); transform: scale(1.2); }

/* ---------- Home: purpose statement + services index, on paper (D-022, D-023) ----------
   A navy rule runs across the section. Its first stop is a ring with a gold centre, with the
   purpose statement under it (in the left column from 56rem). The "SERVICES" label is the
   second stop, directly above the index, and one thread runs from its ring into the index.
   Below 56rem the label starts its own rule under the statement. */
.home-services {
  --lead: 1.25rem;                        /* rule to statement */
  --list-lead: 1rem;                      /* label to index */
  --purpose-fs: clamp(1.45rem, 3.1vw, 2.35rem);
  --toc-fs: clamp(1.2rem, 2.3vw, 1.65rem);
  --toc-home-pad: 0.95rem;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.home-services__grid::before {            /* first stop: navy ring, gold centre */
  content: "";
  position: absolute;
  left: 0;
  top: -6.5px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 1px solid var(--ring);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: inset 0 0 0 2.5px var(--ground);
}
.purpose {
  max-width: 19em;
  margin: 0;
  padding-top: var(--lead);
  font-size: var(--purpose-fs);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.022em;
  text-wrap: pretty;
}
.home-services__list { position: relative; }
@media (max-width: 55.9375rem) {
  .home-services__list { margin-top: clamp(1rem, 4vw, 1.75rem); border-top: 1px solid var(--rule); }
}
@media (min-width: 56rem) {
  /* The statement's capitals line up with the first service's: rule -> label bottom (half its
     1.4 line box: 0.7 * label size - 0.5px) -> --list-lead -> link padding -> cap top of the
     first link, minus the statement's cap top. 0.302 / 0.252 = cap top inside a 1.3 (.toc) /
     1.2 (.purpose) line box = (lh - 1.4)/2 + 1.05 - 0.698 (Poppins ascent / cap height ≈ 0.7);
     update them if either line-height changes. */
  .home-services {
    --lead: calc(0.7 * var(--label-fs) - 0.5px + var(--list-lead) + var(--toc-home-pad)
      + 0.302 * var(--toc-fs) - 0.252 * var(--purpose-fs));
  }
}
.toc--home { --toc-pad: var(--toc-home-pad); margin-top: var(--list-lead); font-size: var(--toc-fs); letter-spacing: -0.015em; }
.toc--home li:first-child::after {        /* thread: from the label's ring to the first service */
  content: "";
  position: absolute;
  left: 5.5px;
  top: calc(10px - 0.7 * var(--label-fs) - var(--list-lead));
  height: calc(var(--toc-pad) + 0.65em + 0.7 * var(--label-fs) + var(--list-lead) - 20px);
  border-left: 1px solid var(--thread);
}

/* ---------- Home: Jennifer intro ---------- */
.intro { padding-block: var(--space-lg); }
.intro__grid { align-items: end; }
.portrait {
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 2px;
}
.intro__text { max-width: 42rem; container-type: inline-size; }
@media (min-width: 40rem) and (max-width: 55.9375rem) {
  .intro__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.bio {
  margin: 0 0 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  max-width: 34em;
}
.intro__text .text-link { margin: 0; }
@media (min-width: 56rem) {
  .portrait { max-width: none; }
  .intro__text { padding-bottom: 0.5rem; }
}

/* ---------- Testimonials (hidden until populated, D-005) ---------- */
.testimonials { padding-block: 0 var(--space-lg); }
.quotes { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .quotes { padding-top: 1.6rem; } }
.quote { margin: 0; }
.quote + .quote { padding-top: 2rem; border-top: 1px solid var(--hair); }
.quote blockquote { margin: 0 0 1rem; font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.6; }
.quote blockquote p:last-child { margin: 0; }
.quote figcaption { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ---------- Ending: heading, a line from a half node to a solid node, then the button ---------- */
.coda { padding-block: clamp(3.5rem, 8vw, 6rem); }
.coda__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 0;
}
.coda h2 {
  flex: 0 1 auto;
  margin: 0 2rem 0 0;
  font-size: clamp(1.7rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
}
.coda__line {
  position: relative;
  flex: 1 1 3rem;
  min-width: 2.5rem;
  height: 1px;
  margin-right: 1.25rem;
  background: var(--thread);
}
.coda__line::before,
.coda__line::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--ring);
}
.coda__line::before { left: 0; background: var(--gold); box-shadow: inset 0 0 0 2.5px var(--ground); }
.coda__line::after { right: 0; background: var(--fill); }
@media (max-width: 47.9375rem) {
  .coda h2 { flex-basis: 100%; margin-right: 0; }
  .coda__line { flex-basis: 100%; margin-right: 0; }
}

/* ---------- Services page ---------- */
.page-intro .split { align-items: start; }
@media (min-width: 56rem) {
  .page-intro .toc { margin-top: 0.35rem; }
}

.services { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--space-lg); }
.service {
  position: relative;
  display: grid;
  gap: 0.9rem var(--gap);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  border-top: 1px solid var(--hair);
  scroll-margin-top: 1.5rem;
}
.service::before,
.note::before {                          /* open ring on the rule; fills when you arrive or hover */
  content: "";
  position: absolute;
  left: 0;
  top: -6.5px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 1px solid var(--ring);
  border-radius: 50%;
  background: var(--ground);
  transition: transform 0.3s var(--ease), background-color 0.3s ease;
}
.service:hover::before { background: var(--fill); }
.service:target::before { background: var(--fill); transform: scale(1.25); }
.service h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  line-height: 1.18;
  letter-spacing: -0.018em;
  max-width: 16em;
}
.service p {
  margin: 0;
  max-width: 36em;
  font-size: var(--para-fs);
  line-height: 1.7;
}
@media (min-width: 56rem) {
  .service { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .service p { padding-top: 0.2rem; }
}

.capabilities .cap-label { font-size: var(--label-fs); font-weight: 500; }
.capabilities .tags-wrap { padding-top: 0.25rem; }
/* Capabilities: a short vertical thread with small gold dots (phones, and 56–75rem); two columns
   without the thread on tablets (40–56rem); running text from 75rem. */
.tags {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tags::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(0.2rem + 0.9em);
  bottom: calc(0.2rem + 0.9em);
  border-left: 1px solid var(--hair);
}
.tags li {
  position: relative;
  padding: 0.2rem 0 0.2rem 1.4rem;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.8;
}
.tags li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.2rem + 0.9em - 2.5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
@media (min-width: 40rem) and (max-width: 55.9375rem) {
  .tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: var(--gap); }
  .tags::before { content: none; }
}
@media (min-width: 56rem) {
  .capabilities { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .capabilities .tags-wrap { padding-top: 1.6rem; }
}
/* Wide screens: running text, each item kept whole, separated by small gold dots.
   The wrapper clips the dot that starts each line. */
@media (min-width: 75rem) {
  .capabilities .tags-wrap { overflow: hidden; max-width: 37.5rem; }
  .tags { display: flex; flex-wrap: wrap; gap: 0.2rem 0; margin-left: -1.9rem; }
  .tags::before { content: none; }
  .tags li { padding: 0 0 0 1.9rem; white-space: nowrap; }
  .tags li::before { left: calc(0.95rem - 2.5px); top: calc(0.9em - 2.5px); }
}

/* ---------- Approach page: title, statement and the four-stage flow on navy ---------- */
.approach { overflow: hidden; overflow: clip; padding-block: clamp(3.5rem, 8vw, 6rem) clamp(4rem, 10vw, 7.5rem); }
.approach .split { align-items: last baseline; }
.approach__lead {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--muted);
}

/* Flow: a vertical timeline on phones, a horizontal line with nodes from 60rem. */
.flow {
  --fs: clamp(1.5rem, 2.2vw, 2rem);
  --lh: 1.22;
  --node: 17px;
  display: grid;
  margin: clamp(3.5rem, 9vw, 7rem) 0 0;
  padding: 0;
  list-style: none;
  letter-spacing: -0.018em;
}
.flow li {
  position: relative;
  padding: 0 0 3rem calc(var(--node) + 1.25rem);
  color: var(--ink);
  font-weight: 500;
  font-size: var(--fs);
  line-height: var(--lh);
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.on-navy .flow li { font-weight: 400; }   /* lighter text on navy */
.flow li:last-child { padding-bottom: 0; }
.flow li::first-letter,
.flow li > span::first-letter { text-transform: uppercase; }
.flow li::after {                        /* node */
  content: "";
  position: absolute;
  left: 0;
  top: calc((var(--lh) * 1em - var(--node)) / 2);
  width: var(--node);
  height: var(--node);
  box-sizing: border-box;
  border: 1px solid var(--ring);
  border-radius: 50%;
  background: var(--ground);
}
.flow li::before {                       /* segment to the next node */
  content: "";
  position: absolute;
  left: calc(var(--node) / 2 - 0.5px);
  top: calc((var(--lh) * 1em + var(--node)) / 2 + 4px);
  bottom: calc(4px - (var(--lh) * 1em - var(--node)) / 2);
  border-left: 1px solid var(--thread);
}
.flow li:last-child::before { content: none; }
/* complexity -> clarity: the line resolves, the nodes fill */
.flow li:nth-child(1)::before { border-left: 2px dotted var(--dotted); margin-left: -0.5px; }
.flow li:nth-child(2)::before { border-left-style: dashed; }
.flow li:nth-child(2)::after { background: var(--gold); box-shadow: inset 0 0 0 calc(var(--node) * 0.27) var(--ground); }
.flow li:nth-child(3)::after { background: var(--gold); box-shadow: inset 0 0 0 1.5px var(--ground); }
.flow li:nth-child(4)::after { background: var(--fill); }
/* Narrow phones: cap the statement and the steps so they break at the same words in Poppins
   and the fallback font (no re-wrap when the font swaps). */
@media (max-width: 25rem) {
  .approach__lead { max-width: 19em; }
  .flow li > span { display: inline-block; max-width: 12.5em; }
}
@media (max-width: 22.5rem) {
  .approach__lead { max-width: 15em; }
}
@media (min-width: 40rem) and (max-width: 59.9375rem) {
  .flow { --fs: 2rem; }
}
@media (min-width: 60rem) {
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow li { padding: var(--node) 1rem 3rem 0; }
  .flow li:last-child { padding-right: 0; }
  .flow li::after { top: 0; }
  .flow li::before,
  .flow li:last-child::before {
    content: "";
    left: calc(var(--node) + 6px);
    right: 6px;
    top: calc(var(--node) / 2 - 0.5px);
    bottom: auto;
    border-left: 0;
    border-top: 1px solid var(--thread);
  }
  .flow li:nth-child(1)::before { margin: -0.5px 0 0; border-left: 0; border-top: 2px dotted var(--dotted); }
  .flow li:nth-child(2)::before { border-top-style: dashed; }
  /* after the last node the line runs on, "toward action", to the edge of the window */
  .flow li:last-child::before { right: calc(-0.5 * (100vw - min(100vw - 2.5rem, var(--container)))); border-top-width: 2px; margin-top: -0.5px; }
  /* each phrase hangs from its node on a drop line; the drops lengthen toward action */
  .flow li > span {
    position: relative;
    display: block;
    margin-left: calc(var(--node) / 2 - 0.5px);
    padding: var(--drop) 0 0 1.1rem;
  }
  .flow li > span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 0.2em;
    border-left: 1px solid var(--hair);
  }
  .flow li:nth-child(1) { --drop: 1.75rem; }
  .flow li:nth-child(2) { --drop: 3.75rem; }
  .flow li:nth-child(3) { --drop: 5.75rem; }
  .flow li:nth-child(4) { --drop: 7.75rem; }
}

/* Draw the line in once (motion only when the visitor hasn't asked for less). */
@media (prefers-reduced-motion: no-preference) {
  .flow li::before { animation: draw-y 0.6s var(--ease) both; transform-origin: top; }
  .flow li::after { animation: pop 0.45s var(--ease) both; }
  .flow li > span::before { animation: draw-y 0.5s var(--ease) both; transform-origin: top; }
  .flow li:nth-child(1)::after { animation-delay: 0.05s; }
  .flow li:nth-child(1) > span::before { animation-delay: 0.15s; }
  .flow li:nth-child(1)::before { animation-delay: 0.2s; }
  .flow li:nth-child(2)::after { animation-delay: 0.45s; }
  .flow li:nth-child(2) > span::before { animation-delay: 0.55s; }
  .flow li:nth-child(2)::before { animation-delay: 0.6s; }
  .flow li:nth-child(3)::after { animation-delay: 0.85s; }
  .flow li:nth-child(3) > span::before { animation-delay: 0.95s; }
  .flow li:nth-child(3)::before { animation-delay: 1s; }
  .flow li:nth-child(4)::after { animation-delay: 1.25s; }
  .flow li:nth-child(4) > span::before { animation-delay: 1.35s; }
  .flow li:nth-child(4)::before { animation-delay: 1.4s; }
  @media (min-width: 60rem) {
    .flow li::before { animation-name: draw-x; transform-origin: left; }
  }
}
@keyframes draw-y { from { transform: scaleY(0); } }
@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes pop { from { transform: scale(0.2); opacity: 0; } }

/* ---------- Leadership Philosophy (Approach and About) and About ---------- */
.philosophy { padding-block: var(--space-lg); }
.philosophy h3 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.6rem, 3.3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
  max-width: 18em;
}
.philosophy p {
  margin: 0;
  max-width: 36em;
  font-size: var(--para-fs);
  line-height: 1.7;
  color: var(--muted);
}
.philosophy p + p { margin-top: 1rem; }
@media (min-width: 56rem) {
  .philosophy__body { padding-top: 2.25rem; }
}

/* About: the portrait and the bio, then Philosophy and Credentials on their own rules.
   The rules separate the white sections, so there is one gap between them, not two. */
.about-bio { padding-top: var(--space-lg); }
.about-bio .intro__grid { align-items: start; }
.about-bio .bio { margin-bottom: 1rem; }
.about-bio .bio + p {
  margin: 0;
  max-width: 36em;
  font-size: var(--para-fs);
  line-height: 1.7;
}
.credentials-block { padding-bottom: var(--space-lg); }
.credentials {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 36em;
  font-size: var(--para-fs);
  line-height: 1.5;
}
.credentials li {
  --pt: 0.9rem;
  position: relative;
  padding: var(--pt) 0 0.9rem 1.4rem;
}
.credentials li:first-child { --pt: 0rem; }
.credentials li + li { border-top: 1px solid var(--hair); }
.credentials li::before {                /* small gold dot (decoration) */
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--pt) + 0.75em - 2.5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
@media (min-width: 56rem) {
  .credentials { padding-top: 1.6rem; }
}

/* ---------- Short pages (Insights, 404): a note on a hairline ---------- */
.note {
  position: relative;
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--hair);
}
.note__text {
  margin: 0;
  max-width: 24em;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.note .actions { align-items: center; gap: 0.9rem 1.75rem; }
/* Phones: the link sits under the button in both fonts (one row fits from 429px in Poppins but
   only from 431px in the fallback font); stacks up to 30rem like the hero buttons. */
@media (max-width: 30rem) {
  .note .actions { flex-direction: column; align-items: flex-start; }
}

/* ---------- Contact ---------- */
.contact-intro {
  max-width: 30em;
  font-size: var(--para-fs);
  line-height: 1.7;
  color: var(--muted);
}

.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: 0.35rem; }
.field label { font-weight: 500; }
.field input, .field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: 2px;
}
.field input:user-invalid, .field textarea:user-invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error);
}
.field textarea { min-height: 10rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 1px; }
.req { color: var(--ink-muted); font-weight: 400; }
.form-note { margin: 0; font-size: 1rem; color: var(--ink-muted); }
.hp { display: none !important; }

.form-status { min-height: 1.5rem; margin: 0; font-weight: 500; }
.form-status:focus { outline: none; }
.form-status.is-success { color: var(--success); }
.form-status.is-error { color: var(--error); }
.form-status a { color: inherit; }

/* ---------- Long-form text (privacy page) ---------- */
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); margin-top: 2.25rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.prose li { margin-bottom: 0.6rem; }

/* ---------- Footer (nav in one spaced-capital row from 48rem) ---------- */
.site-footer {
  background: var(--navy-deep);
  color: var(--on-navy);
  padding-block: clamp(2.75rem, 6vw, 4.5rem) 2rem;
  font-size: 1rem;
}
.site-footer a { color: var(--white); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;   /* wordmark left, nav right */
  align-items: flex-start;
  gap: 1.5rem 3rem;
}
.footer-brand { margin: 0; font-weight: 600; font-size: 1.2rem; color: var(--white); }
.footer-brand span { display: block; font-weight: 500; font-size: 1rem; color: var(--gold); }
.footer-nav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-bottom {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 1rem;
}
.footer-bottom p { margin: 0; }
@media (max-width: 40rem) {  /* larger tap targets on phones (R-20) */
  .footer-nav ul { gap: 0; }
  .footer-nav a { display: inline-block; padding-block: 0.6rem; }
  .footer-bottom a { display: inline-block; padding-block: 0.6rem; }
}
@media (min-width: 40.0625rem) {
  .footer-bottom a { display: inline-block; padding-block: 0.3rem; }
}
/* The wordmark and the nav share a row from 60rem, where both fonts fit (813 / 868px). */
@media (min-width: 48rem) and (max-width: 59.9375rem) {
  .footer-nav { flex-basis: 100%; }
}
@media (min-width: 48rem) {
  .footer-inner { align-items: baseline; }
  .footer-nav ul { display: flex; flex-wrap: wrap; gap: 0.4rem 2.25rem; }
  .footer-nav a {
    display: inline-block;
    padding-block: 0.3rem;
    font-size: 0.875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
}