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

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      background: #f7f5f0;
      color: #1a2332;
      line-height: 1.6;
      font-size: 15px;
    }

    /* NAV */
    nav {
      background: #1a2332;
      padding: 0 2.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 56px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .nav-logo {
      font-family: 'Playfair Display', serif;
      color: #f7f5f0;
      font-size: 17px;
      letter-spacing: 0.02em;
      text-decoration: none;
    }
    .nav-links {
      display: flex;
      gap: 2rem;
      list-style: none;
    }
    .nav-links a {
      color: #a8b4c0;
      text-decoration: none;
      font-size: 13px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      transition: color 0.15s;
    }
    .nav-links a:hover { color: #f7f5f0; }

    /* HERO */
    .hero {
      background: #1a2332;
      padding: 4.5rem 2.5rem 4rem;
      position: relative;
      overflow: hidden;
    }
    .hero-chart {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      opacity: 0.12;
    }
    .hero-eyebrow {
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #b8962e;
      margin-bottom: 1.25rem;
    }
    .hero h1 {
      font-family: 'Playfair Display', serif;
      font-weight: 400;
      font-size: 40px;
      color: #f7f5f0;
      line-height: 1.2;
      max-width: 600px;
      margin-bottom: 1.5rem;
    }
    .hero h1 em {
      font-style: italic;
      color: #d4b86a;
    }
    .hero-sub {
      color: #a8b4c0;
      font-size: 15px;
      max-width: 500px;
      line-height: 1.75;
      margin-bottom: 2.5rem;
    }
    .btn-outline-gold {
      display: inline-block;
      background: transparent;
      border: 1px solid #b8962e;
      color: #d4b86a;
      padding: 0.65rem 1.6rem;
      font-size: 13px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-decoration: none;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      transition: background 0.2s;
    }
    .btn-outline-gold:hover { background: rgba(184,150,46,0.12); }

    .divider-gold {
      height: 1px;
      background: linear-gradient(90deg, #b8962e 0%, #b8962e 30%, transparent 100%);
    }

    /* SECTIONS */
    section {
      padding: 3.5rem 2.5rem;
    }
    section + section {
      border-top: 0.5px solid #d8d4cc;
    }
    .section-label {
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #b8962e;
      margin-bottom: 1rem;
    }
    section h2 {
      font-family: 'Playfair Display', serif;
      font-weight: 400;
      font-size: 27px;
      color: #1a2332;
      margin-bottom: 1.1rem;
      line-height: 1.3;
      max-width: 640px;
    }
    section p {
      color: #3d4e5e;
      line-height: 1.8;
      max-width: 640px;
    }
    section p + p { margin-top: 0.9rem; }

    /* PULLQUOTE */
    .pullquote {
      background: #fff8e8;
      border-left: 2px solid #b8962e;
      padding: 1rem 1.25rem;
      margin-top: 2rem;
      max-width: 580px;
    }
    .pullquote p {
      font-size: 14px;
      color: #5a4010;
      line-height: 1.7;
      font-style: italic;
    }

    /* CLIENT CARDS */
    .client-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 2rem;
    }
    .client-card {
      background: #fff;
      border: 0.5px solid #d8d4cc;
      padding: 1.5rem;
    }
    .client-card h3 {
      font-family: 'Playfair Display', serif;
      font-weight: 400;
      font-size: 17px;
      color: #1a2332;
      margin-bottom: 0.75rem;
      padding-bottom: 0.75rem;
      border-bottom: 0.5px solid #d8d4cc;
    }
    .client-card ul { list-style: none; }
    .client-card li {
      font-size: 13px;
      color: #4a5a6a;
      padding: 0.35rem 0;
      border-bottom: 0.5px solid #ece9e2;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      line-height: 1.5;
    }
    .client-card li:last-child { border-bottom: none; }
    .dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #b8962e;
      margin-top: 6px;
      flex-shrink: 0;
    }

    /* APPROACH GRID */
    .approach-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem;
      margin-top: 2rem;
    }
    .approach-item h3 {
      font-family: 'Playfair Display', serif;
      font-weight: 400;
      font-size: 18px;
      color: #1a2332;
      margin-bottom: 0.6rem;
    }
    .approach-item p {
      font-size: 14px;
      color: #4a5a6a;
      line-height: 1.75;
    }
    .approach-num {
      font-size: 11px;
      color: #b8962e;
      letter-spacing: 0.08em;
      margin-bottom: 0.5rem;
    }

    /* BIO */
    .bio {
      background: #1a2332;
      padding: 3.5rem 2.5rem;
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 2rem;
      align-items: start;
    }
    .bio-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #2d3f54;
      border: 1px solid #b8962e;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Playfair Display', serif;
      font-size: 24px;
      color: #d4b86a;
      flex-shrink: 0;
    }
    .bio-name {
      font-family: 'Playfair Display', serif;
      font-weight: 400;
      font-size: 23px;
      color: #f7f5f0;
      margin-bottom: 0.25rem;
    }
    .bio-title {
      font-size: 11px;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: #b8962e;
      margin-bottom: 1.1rem;
    }
    .bio p {
      color: #a8b4c0;
      font-size: 14px;
      line-height: 1.8;
      max-width: 540px;
    }
    .bio p + p { margin-top: 0.75rem; }
    .bio-credentials {
      margin-top: 1.25rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .cred {
      background: #2d3f54;
      color: #a8b4c0;
      font-size: 11px;
      padding: 4px 10px;
      letter-spacing: 0.04em;
    }

    /* MEDIA */
    .media-strip {
      margin-top: 2rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.875rem;
      align-items: center;
    }
    .media-item {
      background: #fff;
      border: 0.5px solid #d8d4cc;
      padding: 0.5rem 1rem;
      font-size: 12px;
      color: #6a7a8a;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    /* CONTACT */
    .contact {
      background: #1a2332;
      padding: 3.5rem 2.5rem;
    }
    .contact h2 {
      font-family: 'Playfair Display', serif;
      font-weight: 400;
      font-size: 27px;
      color: #f7f5f0;
      margin-bottom: 0.5rem;
    }
    .contact-sub {
      color: #a8b4c0;
      font-size: 14px;
      margin-bottom: 2rem;
      max-width: 460px;
      line-height: 1.75;
    }
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .ei-input, .ei-textarea {
      background: #2d3f54;
      border: 0.5px solid #3d5068;
      color: #f7f5f0;
      padding: 0.65rem 0.9rem;
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      width: 100%;
      outline: none;
      transition: border-color 0.15s;
    }
    .ei-input::placeholder, .ei-textarea::placeholder { color: #5a7080; }
    .ei-input:focus, .ei-textarea:focus { border-color: #b8962e; }
    .ei-textarea { height: 110px; resize: vertical; }

    /* Formspree feedback */
    [data-fs-success] {
      display: none;
      margin-top: 1.25rem;
      padding: 1rem 1.25rem;
      background: rgba(29, 158, 117, 0.15);
      border-left: 2px solid #1D9E75;
      color: #9FE1CB;
      font-size: 14px;
      line-height: 1.6;
    }
    [data-fs-error] {
      display: none;
      margin-top: 1.25rem;
      padding: 1rem 1.25rem;
      background: rgba(226, 75, 74, 0.15);
      border-left: 2px solid #E24B4A;
      color: #F09595;
      font-size: 14px;
      line-height: 1.6;
    }
    .field-error {
      font-size: 12px;
      color: #F09595;
      margin-top: 4px;
      display: block;
    }

    footer {
      background: #111a24;
      padding: 1.25rem 2.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .footer-copy { font-size: 12px; color: #4a6070; }
    .footer-links { display: flex; gap: 1.5rem; list-style: none; }
    .footer-links a, .footer-links button {
      font-size: 12px;
      color: #4a6070;
      text-decoration: none;
      background: none;
      border: none;
      padding: 0;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
    }
    .footer-links a:hover, .footer-links button:hover { color: #a8b4c0; }

    /* LEGAL MODALS */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(17, 26, 36, 0.78);
      z-index: 1000;
      padding: 2rem 1rem;
      overflow-y: auto;
    }
    .modal-overlay.open { display: flex; align-items: flex-start; justify-content: center; }
    .modal-box {
      background: #f7f5f0;
      max-width: 760px;
      width: 100%;
      margin: 2rem auto;
      padding: 2.5rem 2.5rem 3rem;
      position: relative;
      border-top: 3px solid #b8962e;
    }
    .modal-box h2 {
      font-family: 'Playfair Display', serif;
      font-weight: 400;
      font-size: 26px;
      color: #1a2332;
      margin-bottom: 1.25rem;
    }
    .modal-box h3 {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 14px;
      color: #1a2332;
      margin-top: 1.5rem;
      margin-bottom: 0.4rem;
    }
    .modal-box p {
      font-size: 13.5px;
      color: #3d4e5e;
      line-height: 1.7;
      margin-bottom: 0.75rem;
    }
    .modal-box ul { margin: 0 0 0.75rem 1.1rem; }
    .modal-box li { font-size: 13.5px; color: #3d4e5e; line-height: 1.7; margin-bottom: 0.4rem; }
    .modal-close {
      position: absolute;
      top: 1rem;
      right: 1.25rem;
      background: none;
      border: none;
      font-size: 26px;
      line-height: 1;
      color: #6a7a8a;
      cursor: pointer;
    }
    .modal-close:hover { color: #1a2332; }

    @media (max-width: 700px) {
      nav { padding: 0 1.25rem; }
      .nav-links { gap: 1rem; }
      .nav-links a { font-size: 11px; }
      .hero, section, .bio, .contact { padding-left: 1.25rem; padding-right: 1.25rem; }
      .hero h1 { font-size: 28px; }
      .client-grid, .approach-grid, .form-row { grid-template-columns: 1fr; }
      .bio { grid-template-columns: 1fr; }
      footer { flex-direction: column; gap: 0.75rem; text-align: center; }
      .modal-box { padding: 2rem 1.25rem 2.5rem; }
    }

/* ============================================================
   Multi-page additions. Everything above is the original site's
   CSS, unchanged. These extend that vocabulary rather than
   introducing a second one.
   ============================================================ */

.nav-links a.is-active { color: #f7f5f0; }

/* --- dark header band: nav, breadcrumb and page title are ONE navy block,
   so there is no pale strip between them --- */
.page-head { background: #1a2332; padding: 0 2.5rem 3.25rem; }
.page-head .crumbs { padding: 1.25rem 0 2.5rem; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #6c7c91; }
.page-head .crumbs a { color: #8b98a8; text-decoration: none; }
.page-head .crumbs a:hover { color: #d4b86a; }
.page-head .crumbs span { margin: 0 0.5rem; color: #45536a; }
.page-head .section-label { color: #b8962e; margin-bottom: 1.1rem; }
.page-head h1 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 36px;
  color: #f7f5f0; line-height: 1.22; max-width: 720px; margin-bottom: 1.25rem; }
.page-head .standfirst { color: #a8b4c0; font-size: 16px; line-height: 1.75; max-width: 580px; }

/* --- prose: matches the rhythm of the original sections --- */
section h3 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 21px;
  color: #1a2332; margin-bottom: 0.6rem; }
section p + p { margin-top: 1.15rem; }
section p + h2, section ul + h2, section .qa + h2, section .strategy-brief + h2 { margin-top: 3.25rem; }
section p + h3, section ul + h3 { margin-top: 2.25rem; }
section h2 + p, section h3 + p { margin-top: 1rem; }

/* the original site's gold-dot list, reusable outside .client-card */
ul.dotted { list-style: none; margin: 1.25rem 0 0; max-width: 660px; }
ul.dotted li { position: relative; padding-left: 1.1rem; margin-bottom: 0.65rem;
  color: #34435a; line-height: 1.7; }
ul.dotted li::before { content: ''; position: absolute; left: 0; top: 0.68em;
  width: 5px; height: 5px; background: #b8962e; }

/* --- strategy brief: editorial, not a spec sheet --- */
.strategy-brief { border-top: 1px solid #ddd8cc; border-bottom: 1px solid #ddd8cc;
  padding: 1.75rem 0; margin: 2.25rem 0; max-width: 720px; }
.strategy-brief dl { display: grid; grid-template-columns: 168px 1fr; gap: 0.85rem 1.5rem; }
.strategy-brief dt { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #b8962e; padding-top: 0.15rem; }
.strategy-brief dd { color: #34435a; font-size: 15px; line-height: 1.6; }

/* --- navigation cards (used to move between pages, never to deliver copy) --- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1.5rem; margin-top: 2.25rem; }
.card { background: #fff; border: 1px solid #e0dcd2; padding: 1.6rem 1.75rem;
  display: flex; flex-direction: column; transition: border-color 0.15s; }
.card:hover { border-color: #b8962e; }
.card .card-kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #b8962e; margin-bottom: 0.7rem; }
.card h3 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 19px;
  color: #1a2332; margin-bottom: 0.5rem; }
.card p { font-size: 14px; color: #5c6b80; line-height: 1.65; flex-grow: 1; }
.card .card-link { margin-top: 1.2rem; font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: #1a2332; text-decoration: none;
  border-bottom: 1px solid #b8962e; align-self: flex-start; padding-bottom: 3px; }
.card .card-link:hover { color: #b8962e; }

/* --- questions --- */
.qa { max-width: 760px; margin-top: 2.25rem; }
.qa-item { border-top: 1px solid #e0dcd2; padding: 1.6rem 0; }
.qa-item:last-child { border-bottom: 1px solid #e0dcd2; }
.qa-item h3 { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500;
  color: #1a2332; margin-bottom: 0.65rem; line-height: 1.5; }
.qa-item p { font-size: 15px; color: #34435a; line-height: 1.72; }

/* --- insights --- */
.insight-list { max-width: 780px; margin-top: 2rem; }
.insight-row { border-top: 1px solid #e0dcd2; padding: 1.35rem 0; display: flex;
  gap: 1.75rem; align-items: baseline; }
.insight-row:last-child { border-bottom: 1px solid #e0dcd2; }
.insight-date { font-size: 11px; color: #8b98a8; white-space: nowrap; min-width: 88px;
  letter-spacing: 0.05em; text-transform: uppercase; }
.insight-row a { font-family: 'Playfair Display', serif; font-size: 18px; color: #1a2332;
  text-decoration: none; line-height: 1.4; }
.insight-row a:hover { color: #b8962e; }

/* --- closing call to action --- */
.cta-strip { background: #1a2332; padding: 3.5rem 2.5rem; text-align: center; }
.cta-strip h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 27px;
  color: #f7f5f0; margin-bottom: 0.9rem; }
.cta-strip p { color: #a8b4c0; max-width: 520px; margin: 0 auto 2rem; font-size: 15px;
  line-height: 1.7; }

/* --- headshot --- */
.bio-avatar.has-photo { padding: 0; overflow: hidden; background: none; border: none; }
.bio-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit; }
.portrait { float: right; width: 200px; margin: 0.4rem 0 1.75rem 2.5rem; }
.portrait img { width: 100%; height: auto; display: block; border: 1px solid #e0dcd2; }
.portrait figcaption { font-size: 11px; color: #8b98a8; padding-top: 0.7rem;
  letter-spacing: 0.03em; line-height: 1.5; }

/* --- footnote / disclosure --- */
.disclosure { max-width: 780px; margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid #e0dcd2; font-size: 12px; line-height: 1.7; color: #8b98a8; }
.disclosure strong { color: #5c6b80; }

@media (max-width: 700px) {
  .page-head { padding: 0 1.5rem 2.5rem; }
  .page-head h1 { font-size: 27px; }
  .page-head .crumbs { padding: 1rem 0 2rem; }
  .cta-strip { padding: 2.5rem 1.5rem; }
  .insight-row { flex-direction: column; gap: 0.3rem; }
  .strategy-brief dl { grid-template-columns: 1fr; gap: 0.3rem 0; }
  .strategy-brief dd { margin-bottom: 1rem; }
  .portrait { float: none; width: 100%; max-width: 220px; margin: 0 0 1.75rem; }
}

/* first element in a section should not double up on the section's own padding */
section > .strategy-brief:first-child { margin-top: 0; }
/* The original gives .pullquote a top margin only. A bottom margin helps when it
   sits mid-prose, but must not stack on the section's own padding when the
   pullquote is the last thing in the section (as on the homepage). */
section .pullquote:not(:last-child) { margin-bottom: 3rem; }

/* --- media logos: "as featured in" row, monochrome navy ink ---
   Each mark carries its own --logo-h because optical weight differs: a
   two-line lockup reads heavier than a single bold wordmark at equal height. */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 2.75rem;
  margin-top: 1.5rem;
  max-width: 820px;
}
.logo-row img {
  height: var(--logo-h, 26px);
  width: auto;
  display: block;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.logo-row img:hover { opacity: 0.88; }

section .media-strip + h2,
section .logo-row + h2,
section figure + h2 { margin-top: 3.25rem; }

@media (max-width: 700px) {
  .logo-row { gap: 1.6rem 1.9rem; }
  .logo-row img { height: calc(var(--logo-h, 26px) * 0.82); }
}

/* --- authority bar: media logos directly beneath the hero --- */
.authority-bar {
  background: #f2efe8;
  border-bottom: 1px solid #e4e0d6;
  padding: 2rem 2.5rem 2.25rem;
}
.authority-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9aa6b4;
  margin-bottom: 1.35rem;
}
/* wide enough to keep all six on one line at desktop widths; wraps cleanly below */
.authority-bar .logo-row { margin-top: 0; max-width: 1240px; gap: 1.75rem 2.5rem; }
@media (max-width: 700px) {
  .authority-bar { padding: 1.6rem 1.5rem 1.75rem; }
}

/* --- his published work, in a third column beside the bio copy ---
   Stacked beneath the text it merely lengthened the block while ~750px of the
   bio sat empty to the right, so it becomes a column of its own. --- */
.bio { grid-template-columns: 80px minmax(0, 560px) minmax(0, 1fr); }
.bio-work {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-self: start;
  max-width: 560px;   /* mirrors the text column so the block reads symmetrical */
}
.bio-work > a,
.bio-work > div {
  border: 1px solid #35455c;
  padding: 1rem 1.15rem;
  text-decoration: none;
  display: block;
  transition: border-color 0.15s, background 0.15s;
}
.bio-work > a:hover { border-color: #b8962e; background: rgba(184, 150, 46, 0.06); }
.bio-work .work-kicker {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8962e;
  margin-bottom: 0.45rem;
}
.bio-work .work-title {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  color: #f7f5f0;
  line-height: 1.35;
  margin-bottom: 0.3rem;
}
.bio-work .work-note { font-size: 12px; color: #8b98a8; line-height: 1.55; }
@media (max-width: 1080px) {
  .bio { grid-template-columns: 80px 1fr; }
  .bio-work { grid-column: 1 / -1; max-width: none;
              display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 0.5rem; }
}
@media (max-width: 700px) { .bio-work { grid-template-columns: 1fr; margin-top: 1rem; } }

/* --- light contact block, used on the homepage so the dark bio block above it
   is not followed by a second dark band. The /contact/ page keeps the dark
   treatment, where it reads as a continuation of the page header. --- */
.contact--light { background: #f2efe8; border-top: 1px solid #e4e0d6; }
.contact--light h2 { color: #1a2332; }
.contact--light .contact-sub { color: #5c6b80; }
/* The brand gold reaches 5.6:1 on navy but only 2.5:1 on a light band, below the
   3.0 WCAG asks of a control's boundary. A slightly deeper gold clears it (3.3:1)
   while staying visually the same color. Hover fills with the true brand gold. */
.contact--light .btn-outline-gold { color: #1a2332; border-color: #9c8027; }
.contact--light .btn-outline-gold:hover { background: #b8962e; color: #f7f5f0; border-color: #b8962e; }


/* The footer carries seven links now (the original had three), so it must wrap
   rather than push the page into a horizontal scroll on narrow screens. */
.footer-links { flex-wrap: wrap; }
@media (max-width: 700px) {
  .footer-links { justify-content: center; row-gap: 0.6rem; }
}

/* --- "Who we serve" flyout ---
   Progressive enhancement only. The parent is a real link to the hub page, so
   touch users (no hover) and anyone without CSS still reach the same six pages.
   Suppressed below 900px, where the nav itself becomes a scrolling strip and an
   absolutely positioned menu would be clipped by its overflow. */
.nav-links li.has-sub { position: relative; }
.nav-sub {
  position: absolute;
  top: 100%;
  left: -1.1rem;
  min-width: 246px;
  padding: 0.4rem 0;
  margin: 0;
  list-style: none;
  background: #1a2332;
  border: 1px solid #2d3f54;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  z-index: 200;
}
/* Opens on hover for pointer devices, on focus for keyboards, and on click
   (via .is-open, set by script) for touch where hover does not exist. */
.has-sub.is-open .nav-sub,
.has-sub:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
  .has-sub:hover .nav-sub { opacity: 1; visibility: visible; transform: none; }
}
.has-sub .sub-toggle::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 0.45rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s;
}
.has-sub.is-open .sub-toggle::after { transform: translateY(1px) rotate(-135deg); }
.has-sub.is-active-parent > .sub-toggle { color: #f7f5f0; }
.nav-sub li { display: block; }
.nav-sub a {
  display: block;
  padding: 0.6rem 1.25rem;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #a8b4c0;
  white-space: nowrap;
}
.nav-sub a:hover, .nav-sub a:focus { color: #f7f5f0; background: #22304a; }

/* A change of background color reads as a harder edge than a rule between two
   cream sections, so the dark band needs more padding to sit at the same optical
   rhythm. 56px there measured ~15px tighter than the light-to-light transitions. */
.bio { padding-top: 4.5rem; padding-bottom: 4.5rem; }

/* --- curated links out to the blog --- */
.reading-list { max-width: 760px; margin-top: 1.5rem; }
.reading-row { border-top: 1px solid #e0dcd2; padding: 1.15rem 0; }
.reading-row:last-child { border-bottom: 1px solid #e0dcd2; }
.reading-row a {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  color: #1a2332;
  text-decoration: none;
  line-height: 1.4;
  border-bottom: 1px solid #d8d2c4;
  padding-bottom: 1px;
}
.reading-row a:hover { color: #b8962e; border-bottom-color: #b8962e; }
.reading-row p { font-size: 13px; color: #7d8b9d; margin-top: 0.45rem; line-height: 1.6; }
.selected-group { margin-top: 2.25rem; max-width: 780px; }
.selected-group h3 {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8962e;
  margin-bottom: 0.9rem;
}
.selected-group ul { list-style: none; margin: 0; }
.selected-group li { padding: 0.5rem 0; border-top: 1px solid #e8e4da; }
.selected-group li:first-child { border-top: none; }
.selected-group a { font-size: 15px; color: #1a2332; text-decoration: none; line-height: 1.5; }
.selected-group a:hover { color: #b8962e; }

/* The contact page's form follows the dark page header directly, with no second
   heading between them. Both are navy, so they read as one block and do not need
   the full section padding stacked between the intro and the first field. */
.contact--bare { padding-top: 1.25rem; }

/* CTA inside the dark page header, matching the homepage hero button */
.page-head .head-cta { margin-top: 2rem; }

/* Attribution under a quotation. Every .pullquote on the site is now a verbatim
   line from Michael's own writing, with its source linked. */
.pullquote cite {
  display: block;
  margin-top: 0.7rem;
  font-style: normal;
  font-size: 12px;
  color: #8a7a4e;
  letter-spacing: 0.02em;
}
.pullquote cite a { color: #8a7a4e; text-decoration: none; border-bottom: 1px solid #d8c88e; }
.pullquote cite a:hover { color: #1a2332; border-bottom-color: #b8962e; }

/* --- body prose links ---
   The original CSS styles nav, footer and chip links but never links inside
   copy, so they were falling back to browser-default blue and underline, which
   is the one color that appears nowhere else on the site. */
section p a,
.qa-item p a,
.bio p a,
ul.dotted a {
  color: #1a2332;
  text-decoration: none;
  border-bottom: 1px solid #c9a227;
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
section p a:hover,
.qa-item p a:hover,
.bio p a:hover,
ul.dotted a:hover { color: #9c8027; border-bottom-color: #9c8027; }
.bio p a { color: #d4b86a; border-bottom-color: #6a5a2e; }
.bio p a:hover { color: #f7f5f0; border-bottom-color: #b8962e; }

/* headings that follow a grouped list need the same air as those after prose */
section .selected-group + h2,
section .insight-list + h2,
section .reading-list + h2 { margin-top: 3.25rem; }
.selected-group + .selected-group { margin-top: 2rem; }

/* --- mobile nav ---
   The original 5-item nav already overflowed a phone viewport; this build has
   more. Below 900px it collapses behind a menu button. Every link stays in the
   DOM and in source order, so nothing is hidden from crawlers or keyboards. */
.nav-toggle { display: none; }

@media (max-width: 900px) {
  nav { padding: 0 1.25rem; position: relative; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    height: 1.5px;
    width: 21px;
    background: #f7f5f0;
    transition: transform 0.2s, opacity 0.2s;
  }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #1a2332;
    border-top: 1px solid #2d3f54;
    padding: 0.5rem 0 1rem;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    display: none;
    z-index: 150;
  }
  body.nav-open .nav-links { display: flex; }
  .nav-links > li > a {
    display: block;
    padding: 0.85rem 1.25rem;
    font-size: 12px;
    border-bottom: 1px solid #232f43;
  }
  /* the sub-menu is simply nested and always visible inside the panel */
  .nav-sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: block;
    border: none;
    background: #16202e;
    min-width: 0;
    padding: 0;
  }
  .nav-sub a {
    padding: 0.7rem 1.25rem 0.7rem 2.25rem;
    font-size: 12px;
    border-bottom: 1px solid #1d2838;
  }
  .has-sub .sub-toggle::after { display: none; }
}

/* Skip link, revealed on focus only */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: #b8962e;
  color: #1a2332;
  padding: 0.7rem 1.25rem;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* direct contact in the footer */
.footer-copy a { color: #6b8296; text-decoration: none; border-bottom: 1px solid #2d3f54; }
.footer-copy a:hover { color: #b8962e; border-bottom-color: #b8962e; }
@media (max-width: 700px) { .footer-copy { line-height: 2; } }

.paper-year {
  display: inline-block;
  min-width: 3.2rem;
  color: #9aa6b4;
  font-variant-numeric: tabular-nums;
}

/* --- published research ---
   A band of its own, in the tan used by the authority bar, so formal research
   does not read as another list of blog posts. */
.research-band {
  background: #f2efe8;
  border-top: 1px solid #e4e0d6;
  border-bottom: 1px solid #e4e0d6;
  padding: 3.5rem 2.5rem;
}
.research-band .research-intro {
  max-width: 700px;
  color: #3d4e5e;
  line-height: 1.8;
  margin-top: 1rem;
}
.paper-group { margin-top: 2.5rem; max-width: 1000px; }
.paper-group h3 {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8962e;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #ddd8cc;
  margin-bottom: 0;
}
.paper-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
}
.paper { padding: 1.3rem 0; border-bottom: 1px solid #e4e0d6; }
.paper-title {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  line-height: 1.35;
  color: #1a2332;
}
.paper-title a {
  color: #1a2332;
  text-decoration: none;
  border-bottom: 1px solid #d8d2c4;
  padding-bottom: 1px;
}
.paper-title a:hover { color: #9c8027; border-bottom-color: #9c8027; }
.paper .paper-meta {
  margin-top: 0.4rem;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9aa6b4;
}
.paper p { margin-top: 0.5rem; font-size: 13px; color: #5c6b80; line-height: 1.65; }

@media (max-width: 820px) {
  .paper-cols { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .research-band { padding: 2.5rem 1.5rem; }
}

/* --- footer: one row, email beside the copyright --- */
footer { display: block; }
.footer-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.footer-copy a {
  color: #6b8296;
  text-decoration: none;
  border-bottom: 1px solid #2d3f54;
}
.footer-copy a:hover { color: #b8962e; border-bottom-color: #b8962e; }
@media (max-width: 700px) {
  .footer-bar { flex-direction: column; align-items: flex-start; }
  .footer-links { justify-content: flex-start; }
}

/* --- font-weight discipline ---
   Only Inter 300/400/500 and Playfair 400/600 are loaded. Asking for any other
   weight makes the browser synthesise one, which renders smeared. Two places
   were doing that:

   1. .research-band is a <div> (it needs a full-bleed background), so the
      original `section h2` rule never matched it and its heading fell back to
      the browser default — Inter at 700.
   2. <strong> defaults to 700. The original site used none; these are ours. */
.research-band h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 27px;
  color: #1a2332;
  margin-bottom: 1.1rem;
  line-height: 1.3;
  max-width: 640px;
}
strong, b {
  font-weight: 500;      /* the heaviest Inter weight actually loaded */
  color: #1a2332;        /* emphasis carried by colour rather than fake weight */
}
.bio strong, .bio b, .cta-strip strong, .page-head strong { color: #f7f5f0; }
.takeaways strong, ul.dotted strong { color: #1a2332; }

/* sub-heads inside Further reading */
.reading-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8962e;
  margin: 2rem 0 0.25rem;
}
.reading-sub:first-of-type { margin-top: 1.5rem; }
.reading-row .reading-meta {
  margin-top: 0.4rem;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9aa6b4;
}
.reading-row .reading-meta + p { margin-top: 0.35rem; }

/* Between the hamburger breakpoint and about 1100px the bar is tight enough
   that "Enduring Investments" was breaking onto two lines. Keep the wordmark
   intact and take the space out of the gaps instead. */
.nav-logo { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1100px) {
  nav { padding: 0 1.5rem; }
  .nav-links { gap: 1.15rem; }
  .nav-links a { font-size: 12px; }
}

/* ---- "Why this matters now": prose beside Ashton's inflation chart ---- */
.why-grid {
  display: grid;
  /* Columns sized to content, not fractions: the prose wraps at its own measure
     well short of a 1fr column, which opened a gulf before the chart. */
  grid-template-columns: minmax(0, 660px) 1fr;
  gap: 64px;
  align-items: start;
}
.why-prose > h2 { margin-top: 0; }
.why-prose > .pullquote:last-child { margin-bottom: 0; }

/* Optical alignment: matching box tops leaves the chart looking high against
   the larger type body of the h2. */
/* Capped at the source image's native 496px so it is never upscaled, and
   centred in its column: every other section on the page fills the container to
   the right edge, and a fixed-width figure left-aligned in a wide column left
   this one visibly short of it. */
.why-figure {
  margin: 0 auto;
  max-width: 496px;
  padding-top: 14px;
}
.why-figure img {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  /* His export ships a hard grey frame, cropped off in build/charts.py and
     replaced here so the chart sits in the site's palette rather than looking
     like a spreadsheet screenshot. */
  border: 1px solid #d8d4cc;
  border-radius: 2px;
  padding: 10px 12px;
}
.why-figure figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: #5b6472;
}
.why-figure-src {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  color: #7b8494;
}

@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; gap: 30px; }
  .why-figure { padding-top: 2px; }
}