/* The Intentional Company — site.css
   Base: deep navy. Accents used sparingly.
   Breakpoints: 768px, 1024px. */

/* ---------- Fonts (self-hosted, from the Google Fonts API, SIL OFL) ----------
   Both families are VARIABLE fonts. One file per subset carries every weight,
   which is why there is no separate Regular / Semibold / Medium file. The
   weight RANGE in each declaration is what lets font-weight: 600 select a real
   semibold: replace the range with a single value and the browser renders 400
   and synthesises the rest, which is the fake-bold look.

   "Source Serif 4 Display" points at the same file. Source Serif carries an
   optical size axis, and font-optical-sizing (on by default) walks toward the
   display cut as type gets larger, which is what the hero and the stat
   numerals want anyway. The separate family name is kept only so the
   --serif-display token and its fallback stack do not have to change.

   Subsets are latin and latin-ext. The unicode-range on each is what stops a
   browser fetching latin-ext for a page that never needs it. To refresh,
   re-request the CSS2 API for Source+Serif+4:opsz,wght@8..60,200..900 and
   Outfit:wght@100..900 and re-download the URLs it returns.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-Variable-latin.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  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: "Source Serif 4";
  src: url("../fonts/SourceSerif4-Variable-latin-ext.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4 Display";
  src: url("../fonts/SourceSerif4-Variable-latin.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  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: "Source Serif 4 Display";
  src: url("../fonts/SourceSerif4-Variable-latin-ext.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Variable-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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: "Outfit";
  src: url("../fonts/Outfit-Variable-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --navy: #0F1E2E;
  --navy-deep: #0B1724;
  --navy-raise: #142638;
  --band: #10222F;

  --cream: #EDECEA;
  --cream-dim: rgba(237,236,234,.66);
  --cream-faint: rgba(237,236,234,.42);
  --rule: rgba(237,236,234,.16);
  --rule-soft: rgba(237,236,234,.09);

  --amber: #C8952B;      /* rules, borders, large type only */
  --clay:  #C4785F;
  --teal:  #2E6B6B;
  --amber-text: #E0B354; /* 8.6:1 on navy */
  --clay-text:  #E3A288; /* 7.9:1 on navy */
  --teal-text:  #6FBFBB; /* 8.0:1 on navy */

  --serif-display: "Source Serif 4 Display", "Source Serif 4", Georgia, "Times New Roman", serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Outfit", "Helvetica Neue", Arial, system-ui, sans-serif;

  --wrap: 1280px;
  --gutter: 24px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 260ms;
  --header-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.06; letter-spacing: -.015em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--cream); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: #fff; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
hr { border: 0; }

:focus-visible {
  outline: 2px solid var(--amber-text);
  outline-offset: 3px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--cream); color: var(--navy); padding: 10px 16px;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 16px; color: var(--navy); }

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

/* ---------- Shared type ---------- */
.eyebrow {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream-faint); font-weight: 500; margin-bottom: 20px;
}
.eyebrow--amber { color: var(--amber-text); }
.eyebrow--clay  { color: var(--clay-text); }
.eyebrow--teal  { color: var(--teal-text); }

.section-title {
  font-family: var(--serif);
  font-size: clamp(34px, 4.4vw, 60px);
}
.section-head { margin-bottom: clamp(43px, 5.4vw, 79px); }
.rule { height: 1px; background: var(--rule); width: 100%; }

/* ---------- Arrow links ---------- */
.arrow-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 500; letter-spacing: .01em;
  color: var(--cream);
}
.arrow {
  width: 26px; height: 1px; background: currentColor; position: relative;
  transition: width var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.arrow-link:hover .arrow, .btn:hover .arrow { transform: translateX(6px); }
.arrow-link--amber { color: var(--amber-text); }
.arrow-link--clay  { color: var(--clay-text); }
.arrow-link--teal  { color: var(--teal-text); }
.arrow-link--amber:hover, .arrow-link--clay:hover, .arrow-link--teal:hover { color: var(--cream); }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid var(--rule); padding: 14px 24px;
  font-size: 15px; font-weight: 500; color: var(--cream);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: rgba(237,236,234,.06); border-color: var(--cream-faint); }

/* ---------- Image placeholder slots ---------- */
.slot {
  position: relative; background: var(--navy-raise);
  border: 1px dashed rgba(237,236,234,.22);
  min-height: 120px;
}
.slot::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(237,236,234,.035) 0 12px, transparent 12px 24px);
}
.slot__path {
  position: absolute; left: 12px; bottom: 10px;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cream-faint);
}
.slot--bleed { position: absolute; inset: 0; border: 0; }
.hero__media, .door__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega__img { width: 100%; height: 120px; object-fit: cover; margin-bottom: 16px; }
img.card__media { width: 100%; object-fit: cover; }
.slot--bleed::before { opacity: .6; }

/* ---------- Progress bar ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; }
.progress span {
  display: block; height: 100%; width: 0;
  background: var(--amber);
}

/* ---------- Utility bar ---------- */
.utility {
  border-bottom: 1px solid var(--rule-soft);
  background: var(--navy-deep);
  position: relative; z-index: 90;
}
.utility__inner { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.utility__links { display: flex; gap: 22px; }
.utility__links a {
  font-size: 12px; letter-spacing: .06em; color: var(--cream-faint);
}
.utility__links a:hover { color: var(--cream); }
@media (max-width: 767px) { .utility { display: none; } }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  background: transparent;
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  transition: height var(--dur) var(--ease);
}
.header.is-stuck {
  background: rgba(11,23,36,.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--rule-soft);
}
.header.is-stuck .header__inner { height: 62px; }
.header.is-stuck .logo__img { height: 32px; }

.logo { display: flex; align-items: center; gap: 12px; }
.logo__img {
  height: 41px; width: auto; filter: invert(1);
  transition: height var(--dur) var(--ease);
}

.nav__list { display: flex; align-items: center; gap: 34px; }
.nav__link {
  position: relative; font-size: 14px; font-weight: 500; letter-spacing: .04em;
  padding: 6px 0; display: inline-block;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--cream); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after, .nav__toggle[aria-expanded="true"]::after { transform: scaleX(1); }
@media (max-width: 1023px) { .nav { display: none; } }

.burger { display: none; padding: 10px; margin-right: -10px; }
.burger__bars { display: block; width: 24px; }
.burger__bars i { display: block; height: 1px; background: var(--cream); transition: transform var(--dur) var(--ease); }
.burger__bars i + i { margin-top: 6px; }
.burger[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 1023px) { .burger { display: block; } }

/* ---------- Mega menu ---------- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--navy-deep);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mega.is-open { opacity: 1; transform: none; }
.mega__inner {
  display: grid; grid-template-columns: 1fr 1.4fr .9fr; gap: 56px;
  padding-top: 52px; padding-bottom: 56px;
}
.mega__title { font-family: var(--serif); font-size: 30px; margin-bottom: 14px; }
.mega__desc { color: var(--cream-dim); font-size: 15px; margin-bottom: 24px; max-width: 30ch; }
.mega__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.mega__colhead {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cream-faint);
  padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 14px;
}
.mega__list { display: grid; gap: 10px; }
.mega__list a { font-size: 14px; color: var(--cream-dim); }
.mega__list a:hover { color: var(--cream); }
.mega__flabel {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream-faint); margin-bottom: 8px;
}
.mega__ftitle { font-family: var(--serif); font-size: 19px; line-height: 1.3; margin-bottom: 16px; }
.mega[data-accent="amber"] .mega__colhead { border-bottom-color: rgba(200,149,43,.45); }
.mega[data-accent="clay"] .mega__colhead { border-bottom-color: rgba(196,120,95,.45); }

/* ---------- Mobile drawer ---------- */
.drawer {
  position: fixed; inset: 0; z-index: 95;
  background: var(--navy-deep);
  padding: calc(var(--header-h) + 16px) 0 40px;
  overflow-y: auto;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.drawer.is-open { opacity: 1; }
.drawer__inner { padding: 0 var(--gutter); max-width: var(--wrap); margin: 0 auto; }
.acc { border-bottom: 1px solid var(--rule); }
.acc__head {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0; font-family: var(--serif); font-size: 26px; font-weight: 600;
}
.acc__sign { width: 14px; height: 14px; position: relative; }
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px; background: var(--cream);
  transition: transform var(--dur) var(--ease);
}
.acc__sign::after { transform: rotate(90deg); }
.acc__head[aria-expanded="true"] .acc__sign::after { transform: rotate(0deg); }
.acc__list { display: grid; gap: 14px; padding-bottom: 24px; }
.acc__list a { font-size: 15px; color: var(--cream-dim); }
.drawer__links { display: grid; gap: 18px; padding-top: 28px; }
.drawer__links a { font-size: 16px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 140px 0 clamp(64px, 9vh, 120px);
  margin-top: calc(-1 * var(--header-h) - 36px);
  overflow: hidden;
}
.hero__media { z-index: 0; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(15,30,46,.96) 8%, rgba(15,30,46,.72) 48%, rgba(15,30,46,.55) 100%);
}
.hero__inner { position: relative; z-index: 2; }
.hero__title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 102px);
  line-height: .98; letter-spacing: -.025em;
  margin-bottom: 32px;
}
.hero__sub {
  font-size: clamp(17px, 1.5vw, 21px); color: var(--cream-dim);
  max-width: 54ch; margin-bottom: 44px;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 40px; }

/* ---------- Two-door split ---------- */
.doors { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.door {
  position: relative; overflow: hidden;
  min-height: 62vh;
  padding: clamp(48px, 5vw, 84px) clamp(28px, 3.6vw, 64px);
  display: flex; align-items: flex-end;
  border-left: 1px solid var(--rule);
  transition: opacity var(--dur) var(--ease);
}
.door:first-child { border-left: 0; }
.door__media { z-index: 0; transition: transform 300ms var(--ease); }
.door::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(11,23,36,.94) 20%, rgba(11,23,36,.78) 70%, rgba(11,23,36,.7) 100%);
  transition: background var(--dur) var(--ease);
}
.door__body { position: relative; z-index: 2; max-width: 46ch; }
.door__title { font-family: var(--serif); font-size: clamp(28px, 3.1vw, 44px); margin-bottom: 22px; }
.door__copy { color: var(--cream-dim); margin-bottom: 28px; }
.door__list { display: grid; gap: 10px; margin-bottom: 34px; }
.door__list li {
  font-size: 14px; letter-spacing: .02em; color: var(--cream);
  padding: 10px 0 0; border-top: 1px solid var(--rule);
}
.doors:hover .door { opacity: .62; }
.doors:hover .door:hover { opacity: 1; }
.door:hover .door__media { transform: scale(1.04); }
.door--amber:hover::after { background: linear-gradient(to top, rgba(11,23,36,.94) 20%, rgba(38,27,10,.7) 100%); }
.door--amber:hover .door__list li { border-top-color: rgba(200,149,43,.5); }
.door--clay:hover::after { background: linear-gradient(to top, rgba(11,23,36,.94) 20%, rgba(40,20,14,.7) 100%); }
.door--clay:hover .door__list li { border-top-color: rgba(196,120,95,.5); }

/* ---------- Philosophy ---------- */
.philosophy { padding: clamp(86px, 11.7vw, 171px) 0; }
.philosophy__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.quote { margin: 0; padding: clamp(40px, 4.5vw, 65px) 0; }
.quote p {
  font-family: var(--serif-display); font-weight: 400;
  font-size: clamp(26px, 3.6vw, 48px); line-height: 1.22; letter-spacing: -.015em;
}
.philosophy__note {
  color: var(--cream-dim); max-width: 62ch; margin: 36px auto 0;
}

/* ---------- How we work ---------- */
.how { padding: clamp(72px, 9vw, 135px) 0; border-top: 1px solid var(--rule); }
.how__row {
  display: grid; grid-template-columns: 160px 1fr; gap: 40px;
  padding: clamp(38px, 4vw, 56px) 0; border-top: 1px solid var(--rule);
  align-items: start;
}
.how__row:last-child { border-bottom: 1px solid var(--rule); }
.how__num {
  font-family: var(--serif-display); font-weight: 400;
  font-size: clamp(46px, 5vw, 76px); line-height: .9; color: var(--cream-faint);
}
.how__title { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); margin-bottom: 16px; }
.how__body p { color: var(--cream-dim); max-width: 66ch; }

/* ---------- Coaching band ---------- */
.band {
  background: var(--band);
  border-top: 1px solid rgba(46,107,107,.45);
  border-bottom: 1px solid rgba(46,107,107,.45);
  padding: clamp(58px, 7.2vw, 99px) 0;
}
.band__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.band__title { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 46px); max-width: 16ch; }
.band__side { display: grid; gap: 30px; justify-items: start; }
.band__side p { color: var(--cream-dim); max-width: 52ch; }

/* ---------- Insights ---------- */
.insights { padding: clamp(72px, 9vw, 135px) 0; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule-soft);
  background: var(--navy-raise);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card__media { border: 0; height: 190px; }
.card--tall { grid-row: span 2; }
.card--tall .card__media { height: 340px; }
.card--wide { grid-column: span 2; }
.card--wide .card__media { height: 150px; }
.card__body { padding: 26px 26px 30px; }
.card__label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream-faint); margin-bottom: 14px;
}
.card__title { font-family: var(--serif); font-size: clamp(20px, 1.7vw, 26px); line-height: 1.24; margin-bottom: 14px; }
.card__meta { font-size: 13px; color: var(--cream-faint); }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.card--amber:hover { border-color: rgba(200,149,43,.6); }
.card--clay:hover  { border-color: rgba(196,120,95,.6); }
.card--teal:hover  { border-color: rgba(46,107,107,.85); }
.insights__all { margin-top: 48px; }

/* ---------- Contact ---------- */
.contact { padding: clamp(72px, 9vw, 135px) 0; border-top: 1px solid var(--rule); }
.contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 100px); }
.contact__note { color: var(--cream-dim); max-width: 46ch; margin-top: 28px; }
.form { display: grid; gap: 22px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-faint);
}
.req { text-transform: none; letter-spacing: .02em; color: var(--clay-text); font-size: 11px; }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; color: var(--cream);
  border: 0; border-bottom: 1px solid var(--rule);
  padding: 12px 0; font: inherit; font-size: 16px; border-radius: 0;
  transition: border-color var(--dur) var(--ease);
}
.field select { appearance: none; padding-right: 24px; }
.field select option { background: var(--navy-deep); color: var(--cream); }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--amber-text);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: var(--clay-text); }
.err { font-size: 13px; color: var(--clay-text); }
.form .btn { justify-self: start; margin-top: 8px; }
.form__success {
  font-size: 15px; color: var(--teal-text);
  border-top: 1px solid rgba(46,107,107,.5); padding-top: 18px;
}
/* Send failure. Focused programmatically, so kill the focus ring it would
   otherwise draw — role="alert" already announces it. */
.form__error { font-size: 15px; margin-top: 12px; }
.form__error:focus { outline: none; }
.form__error a { color: inherit; border-bottom: 1px solid currentColor; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-deep); border-top: 1px solid var(--rule); padding-top: clamp(56px, 6vw, 88px); }
.footer__inner {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 64px;
}
.footer__head {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream); margin-bottom: 18px;
}
.footer__head--amber { color: var(--amber-text); }
.footer__head--clay { color: var(--clay-text); }
.footer__note { color: var(--cream-dim); font-size: 14px; max-width: 38ch; margin-bottom: 22px; }
.news { display: flex; flex-wrap: wrap; gap: 12px; max-width: 400px; }
.news input {
  flex: 1 1 200px; background: transparent; color: var(--cream);
  border: 0; border-bottom: 1px solid var(--rule); padding: 10px 0; font: inherit; font-size: 15px;
  border-radius: 0;
}
.news input:focus { outline: none; border-bottom-color: var(--amber-text); }
.news button {
  border: 1px solid var(--rule); padding: 10px 18px; font-size: 14px;
  transition: background var(--dur) var(--ease);
}
.news button:hover { background: rgba(237,236,234,.06); }
.news .err, .news .form__success { flex: 1 1 100%; }
.footer__col ul { display: grid; gap: 12px; }
.footer__col a { font-size: 14px; color: var(--cream-dim); }
.footer__col a:hover { color: var(--cream); }
.footer__fine {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--rule-soft); padding-top: 24px; padding-bottom: 32px;
}
.footer__fine p, .footer__fine a { font-size: 12px; color: var(--cream-faint); letter-spacing: .04em; }
.footer__fine ul { display: flex; flex-wrap: wrap; gap: 24px; }
.footer__fine a:hover { color: var(--cream); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
  transition-delay: var(--d, 0ms);
}

/* ---------- Stub / 404 pages ---------- */
.stub { padding: clamp(120px, 16vh, 220px) 0 clamp(96px, 12vw, 170px); }
.stub__title { font-family: var(--serif-display); font-weight: 400; font-size: clamp(42px, 7vw, 96px); line-height: 1; letter-spacing: -.025em; margin-bottom: 28px; }
.stub__copy { color: var(--cream-dim); max-width: 52ch; font-size: 19px; margin-bottom: 44px; }

/* ---------- Breakpoints ---------- */
@media (max-width: 1023px) {
  .mega { display: none; }
  .mega__inner { grid-template-columns: 1fr; }
  .doors { grid-template-columns: 1fr; }
  .door { border-left: 0; border-top: 1px solid var(--rule); min-height: 0; }
  .doors:hover .door { opacity: 1; }
  .band__inner { grid-template-columns: 1fr; gap: 32px; }
  .contact__inner { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card--tall { grid-row: span 1; }
  .card--tall .card__media { height: 190px; }
  .card--wide { grid-column: span 2; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 767px) {
  :root { --header-h: 64px; --gutter: 20px; }
  body { font-size: 16px; }
  .hero { margin-top: calc(-1 * var(--header-h)); padding-top: 120px; }
  .hero__ctas { flex-direction: column; gap: 22px; align-items: flex-start; }
  .how__row { grid-template-columns: 1fr; gap: 14px; }
  .cards { grid-template-columns: 1fr; }
  .card--wide { grid-column: span 1; }
  .form__row { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
}

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


/* =========================================================================
   PRACTICE PAGES (added for /business/, reused by /personal/ and /coaching/)
   Accent is set per page with the --accent / --accent-text pair below.
   ========================================================================= */
.hero--page { min-height: 70vh; min-height: 70svh; margin-top: calc(-1 * var(--header-h)); }
.hero__title--page { font-size: clamp(38px, 5.6vw, 82px); max-width: 17ch; }
.hero__sub--tight { max-width: 560px; }

/* Problem columns */
.problem { padding: clamp(72px, 9vw, 135px) 0; border-top: 1px solid var(--rule); }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px); }
.col3 { border-top: 1px solid var(--rule); padding-top: 24px; }
.col3__title { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.25; margin-bottom: 16px; }
.col3 p { color: var(--cream-dim); font-size: 15px; }

/* Service blocks */
.services { padding: clamp(72px, 9vw, 135px) 0; border-top: 1px solid var(--rule); }
.svcs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.svc {
  scroll-margin-top: calc(var(--header-h) + 32px);
  background: var(--navy);
  padding: clamp(32px, 3.4vw, 56px);
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.svc:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.35); border-color: rgba(200,149,43,.6); background: var(--navy-raise); }
.svc__title { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 32px); margin-bottom: 18px; }
.svc__copy { color: var(--cream-dim); font-size: 15px; margin-bottom: 26px; }
.svc__list { display: grid; gap: 10px; }
.svc__list li { font-size: 14px; color: var(--cream-dim); border-top: 1px solid var(--rule-soft); padding-top: 10px; transition: border-color var(--dur) var(--ease); }
.svc:hover .svc__list li { border-top-color: rgba(200,149,43,.45); }

.how__num--amber { color: var(--amber); }

/* Proof band */
.proof { background: var(--band); border-top: 1px solid var(--rule); padding: clamp(72px, 9vw, 130px) 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.5vw, 56px); margin-bottom: clamp(56px, 6vw, 90px); }
.stat__num {
  font-family: var(--serif-display); font-weight: 400;
  font-size: clamp(44px, 5.4vw, 82px); line-height: 1; letter-spacing: -.02em;
  color: var(--amber-text); margin-bottom: 16px;
}
.stat__label { font-size: 14px; color: var(--cream-dim); max-width: 26ch; border-top: 1px solid var(--rule); padding-top: 14px; }
.proof__quote { text-align: left; }
.proof__attr {
  margin-top: 28px; font-family: var(--sans); font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cream-faint);
}

/* Fit / not fit */
.fit { padding: clamp(72px, 9vw, 135px) 0; border-top: 1px solid var(--rule); }
.fit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); }
.fit__col + .fit__col { border-left: 1px solid var(--rule); padding-left: clamp(40px, 5vw, 80px); }
.fit__head { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); margin-bottom: 28px; }
.fit__list { display: grid; gap: 18px; }
.fit__list li { position: relative; padding-left: 34px; color: var(--cream-dim); font-size: 15px; }
.fit__list li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 14px; height: 8px;
}
.fit__list--yes li::before {
  border-left: 1px solid var(--amber-text); border-bottom: 1px solid var(--amber-text);
  transform: rotate(-45deg);
}
.fit__list--no li::before {
  height: 1px; top: 12px; background: var(--cream-faint); border: 0;
}

/* FAQ (reuses .acc from the drawer) */
.faq { padding: clamp(72px, 9vw, 135px) 0; border-top: 1px solid var(--rule); }
.faq__inner { max-width: 900px; }
.faq__list .acc:first-child { border-top: 1px solid var(--rule); }
.faq__h, .acc__h { margin: 0; font-size: inherit; font-weight: inherit; }
.faq__list .acc__head { font-size: clamp(19px, 1.7vw, 25px); gap: 32px; text-align: left; font-weight: 600; }
.faq__list .acc__head:hover { color: var(--amber-text); }
.acc__panel--prose { padding-bottom: 28px; max-width: 68ch; }
.acc__panel--prose p { color: var(--cream-dim); font-size: 15px; }

/* =========================================================================
   WHAT WE DO — home page. Prose column + capability list, no step numbers.
   Replaced the numbered .how list on the home page 17 August 2026; .how is
   still live on /about/ and the practice pages, so it stays defined above.
   ========================================================================= */
.what { padding: clamp(72px, 9vw, 135px) 0; border-top: 1px solid var(--rule); }
.what__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 5.5vw, 90px); align-items: start; }
.what__intro p { color: var(--cream-dim); max-width: 54ch; }
.what__intro p + p { margin-top: 22px; }
.what__list { display: grid; }
.what__list li {
  position: relative; padding: 20px 0 20px 34px;
  border-top: 1px solid var(--rule);
  color: var(--cream-dim); font-size: 15.5px; line-height: 1.55;
}
.what__list li:last-child { border-bottom: 1px solid var(--rule); }
.what__list li::before {
  content: ""; position: absolute; left: 0; top: 30px;
  width: 18px; height: 1px; background: var(--amber);
}

@media (max-width: 1023px) {
  .cols3 { grid-template-columns: 1fr; gap: 32px; }
  .svcs { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 36px; }
  .stats--four { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .what__grid { grid-template-columns: 1fr; gap: 44px; }
  .fit__grid { grid-template-columns: 1fr; gap: 44px; }
  .fit__col + .fit__col { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 44px; }
}
@media (max-width: 600px) {
  .stats--four { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 767px) {
  .hero--page { padding-top: 110px; }
  .hero__title--page { max-width: none; }
  .svc:hover { transform: none; }
}


/* =========================================================================
   LIGHT SECTION (cream inversion) — used once per page to break the dark run.
   --amber-ink is the only accent safe for small text on cream (5.3:1).
   ========================================================================= */
:root { --amber-ink: #7E5A11; --navy-dim: rgba(15,30,46,.72); --navy-faint: rgba(15,30,46,.68); --rule-ink: rgba(15,30,46,.16); }

.section--cream { background: var(--cream); color: var(--navy); }
.section--cream .eyebrow { color: var(--amber-ink); }
.section--cream .section-title { color: var(--navy); }
.section--cream a { color: var(--navy); }
.section--cream a:hover { color: var(--amber-ink); }
.section--cream .rule { background: var(--rule-ink); }
.section--cream .arrow-link--amber { color: var(--amber-ink); }
.section--cream .arrow-link--amber:hover { color: var(--navy); }
.section--cream :focus-visible { outline-color: var(--amber-ink); }

/* Service blocks on cream */
.services.section--cream { border-top-color: var(--rule-ink); }
.section--cream .svcs { background: var(--rule-ink); border-color: var(--rule-ink); }
.section--cream .svc { background: var(--cream); }
.section--cream .svc:hover { background: #E5E3E0; box-shadow: 0 18px 40px rgba(15,30,46,.12); border-color: rgba(126,90,17,.45); }
.section--cream .svc__title { color: var(--navy); }
.section--cream .svc__copy { color: var(--navy-dim); }
.section--cream .svc__list li { color: var(--navy-dim); border-top-color: var(--rule-ink); }
.section--cream .svc:hover .svc__list li { border-top-color: rgba(126,90,17,.4); }

/* Reading list */
.reading { padding: clamp(72px, 9vw, 130px) 0; }
.reading__head { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; margin-bottom: clamp(40px, 4.5vw, 64px); }
.reading__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(40px, 4.5vw, 72px); align-items: start; }

.read-feature { display: block; }
.read-feature__media { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 26px; background: var(--rule-ink); }
.read-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-ink); margin-bottom: 14px; }
.read-feature__title { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.18; margin-bottom: 16px; }
.read-feature__sum { color: var(--navy-dim); font-size: 16px; max-width: 46ch; margin-bottom: 18px; }
.read-meta { font-size: 13px; color: var(--navy-faint); }

.read-list { display: grid; }
.read-row {
  display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: start;
  padding: 26px 0; border-top: 1px solid var(--rule-ink);
  transition: transform var(--dur) var(--ease);
}
.read-list .read-row:last-child { border-bottom: 1px solid var(--rule-ink); }
.read-row:hover { transform: translateX(4px); }
.read-row__media { width: 120px; height: 88px; object-fit: cover; background: var(--rule-ink); }
.read-row__title { font-family: var(--serif); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25; margin-bottom: 10px; }
.read-row__sum { color: var(--navy-dim); font-size: 14px; margin-bottom: 10px; }
.reading__all { margin-top: clamp(40px, 4.5vw, 64px); }

@media (max-width: 1023px) {
  .reading__grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 767px) {
  .reading__head { flex-direction: column; gap: 12px; }
  .read-row { grid-template-columns: 88px 1fr; gap: 18px; }
  .read-row__media { width: 88px; height: 66px; }
  .read-row:hover { transform: none; }
}


/* =========================================================================
   DETAIL PAGE — light theme (white / gold / teal). Header, CTA band and
   footer stay navy; everything between them inverts.
   --teal-ink is the teal safe for small text on white (7.0:1).
   ========================================================================= */
:root { --paper: #FFFFFF; --paper-soft: #F5F4F1; --teal-ink: #245B5B; }

.theme-light main { background: var(--paper); color: var(--navy); }
.theme-light main a { color: var(--navy); }
.theme-light main a:hover { color: var(--teal-ink); }
.theme-light main .eyebrow { color: var(--amber-ink); }
.theme-light main .eyebrow--teal { color: var(--teal-ink); }
.theme-light main .rule { background: var(--rule-ink); }
.theme-light main .arrow-link { color: var(--teal-ink); }
.theme-light main .arrow-link:hover { color: var(--navy); }
.theme-light main .arrow-link--amber { color: var(--amber-ink); }
.theme-light main :focus-visible { outline-color: var(--teal-ink); }
.theme-light main .cta-band { background: var(--navy-deep); color: var(--cream); }
.theme-light main .cta-band a { color: var(--navy); }

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 26px; }
.crumbs li, .crumbs a { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-faint); }
.crumbs li[aria-current] { color: var(--amber-ink); }
.crumbs span { color: var(--rule-ink); }

/* Detail hero */
.dhero { padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 68px); }
.dhero__title {
  font-family: var(--serif-display); font-weight: 400;
  font-size: clamp(38px, 5.6vw, 78px); line-height: 1.02; letter-spacing: -.025em;
  max-width: 22ch; margin-bottom: 28px;
}
.dhero__sub { font-size: clamp(17px, 1.5vw, 21px); color: var(--navy-dim); max-width: 56ch; margin-bottom: 36px; }
.dhero__strip { width: 100%; height: clamp(200px, 32vw, 400px); object-fit: cover; }
.dhero--center { text-align: center; }
.dhero--center .crumbs { justify-content: center; margin: 0 0 26px; }
.dhero--center .dhero__title, .dhero--center .dhero__sub { margin-left: auto; margin-right: auto; }
.dhero--center .hero__ctas { justify-content: center; }

/* Two-column prose */
.dintro { padding: clamp(64px, 8vw, 120px) 0; }
.dintro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 88px); }
.dintro__lead { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 31px); line-height: 1.32; color: var(--navy); }
.dintro__body { display: grid; gap: 20px; color: var(--navy-dim); font-size: 16px; }

/* Numbered pillars */
.pillars { padding: 0 0 clamp(64px, 8vw, 120px); }
.pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.4vw, 56px); }
.pillar { border-top: 1px solid var(--amber); padding-top: 22px; }
.pillar__num { font-family: var(--serif-display); font-size: 40px; line-height: 1; color: var(--amber-ink); margin-bottom: 18px; }
.pillar__title { font-family: var(--serif); font-size: clamp(21px, 1.8vw, 27px); margin-bottom: 14px; }
.pillar p { color: var(--navy-dim); font-size: 15px; }

/* Soft band: workstreams */
.work { background: var(--paper-soft); padding: clamp(64px, 8vw, 120px) 0; }
.work__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 4vw, 64px) clamp(40px, 5vw, 88px); }
.work__item { border-top: 1px solid var(--rule-ink); padding-top: 22px; }
.work__title { font-family: var(--serif); font-size: clamp(19px, 1.6vw, 24px); margin-bottom: 12px; }
.work__item p { color: var(--navy-dim); font-size: 15px; }

/* Spec rows: what you get */
.spec { padding: clamp(64px, 8vw, 120px) 0; }
.spec__row {
  display: grid; grid-template-columns: 260px 1fr; gap: clamp(24px, 3vw, 56px);
  padding: 26px 0; border-top: 1px solid var(--rule-ink);
}
.spec__row:last-child { border-bottom: 1px solid var(--rule-ink); }
.spec__key { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink); }
.spec__val { color: var(--navy-dim); font-size: 16px; max-width: 62ch; }
.spec__val strong { color: var(--navy); font-weight: 600; }

/* Signals list */
.signals { background: var(--paper-soft); padding: clamp(64px, 8vw, 120px) 0; }
.signals--plain { background: var(--paper); }

/* Full-bleed image bar */
.imgbar { width: 100%; height: clamp(180px, 24vw, 320px); object-fit: cover; }

/* Light-theme FAQ */
.theme-light main .faq { border-top-color: var(--rule-ink); }
.theme-light main .acc { border-bottom-color: var(--rule-ink); }
.theme-light main .faq__list .acc:first-child { border-top-color: var(--rule-ink); }
.theme-light main .acc__sign::before, .theme-light main .acc__sign::after { background: var(--navy); }
.theme-light main .faq__list .acc__head:hover { color: var(--teal-ink); }
.theme-light main .acc__panel--prose p { color: var(--navy-dim); }

/* Related reading cards */
.rcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 3.4vw, 56px); }
.rcard {
  display: grid; grid-template-columns: 42% 1fr; gap: clamp(20px, 2.2vw, 32px);
  align-items: start; padding-bottom: 22px; border-bottom: 1px solid var(--rule-ink);
}
.rcard__media { width: 100%; height: 100%; min-height: 320px; object-fit: cover; background: var(--rule-ink); }
.rcard__body { display: block; }
.rcard__title { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 27px); line-height: 1.2; margin-bottom: 14px; }
.rcard__fade {
  position: relative; max-height: 168px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}
.rcard__fade p { color: var(--navy-dim); font-size: 15px; }
.rcard:hover .rcard__title { color: var(--teal-ink); }
.rcards__more { display: flex; justify-content: center; margin-top: clamp(40px, 4.5vw, 64px); }
.btn--ink { border-color: var(--rule-ink); color: var(--navy); letter-spacing: .1em; text-transform: uppercase; font-size: 13px; }
.btn--ink:hover { background: var(--paper-soft); border-color: var(--amber); color: var(--amber-ink); }
@media (max-width: 1023px) {
  .rcards { grid-template-columns: 1fr; }
  .rcard__media { min-height: 220px; }
}
@media (max-width: 599px) {
  .rcard { grid-template-columns: 1fr; }
  .rcard__media { min-height: 200px; }
}
.signals__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 5vw, 96px); align-items: start; }
.signals__list { display: grid; gap: 0; }
.signals__list li {
  border-top: 1px solid var(--rule-ink); padding: 18px 0 18px 34px;
  position: relative; color: var(--navy-dim); font-size: 16px;
}
.signals__list li:last-child { border-bottom: 1px solid var(--rule-ink); }
.signals__list li::before {
  content: ""; position: absolute; left: 0; top: 27px;
  width: 14px; height: 1px; background: var(--amber);
}

@media (max-width: 1023px) {
  .dintro__grid, .pillars__grid, .work__grid, .signals__grid { grid-template-columns: 1fr; }
  .spec__row { grid-template-columns: 1fr; gap: 10px; }
}

/* =========================================================================
   CONTACT CTA BAND (closes practice pages; full form lives at /contact/)
   ========================================================================= */
.cta-band { background: var(--navy-deep); border-top: 1px solid var(--rule); padding: clamp(56px, 6.5vw, 96px) 0; }
.cta-band__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: clamp(28px, 4vw, 64px);
}
.cta-band__title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(26px, 3.2vw, 44px); line-height: 1.15; max-width: 24ch;
}
.btn--amber {
  background: var(--amber); border-color: var(--amber); color: var(--navy);
  padding: 16px 30px; flex: none;
}
.btn--amber:hover { background: var(--amber-text); border-color: var(--amber-text); color: var(--navy); }
.btn--amber:focus-visible { outline-color: var(--cream); }
.btn__icon {
  width: 16px; height: 12px; border: 1px solid currentColor; position: relative; flex: none;
  overflow: hidden;
}
.btn__icon::before {
  content: ""; position: absolute; left: 50%; top: -5px;
  width: 10px; height: 10px; margin-left: -5px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
@media (max-width: 767px) {
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .cta-band__title { max-width: none; }
}

/* Standalone contact page */
.contact--page { border-top: 0; padding-top: clamp(56px, 8vh, 110px); }
.opt { text-transform: none; letter-spacing: .02em; color: var(--cream-faint); font-size: 11px; }

/* =========================================================================
   PROOF BAND ON A LIGHT PAGE. .proof carries its own dark background, so it
   only needs the inherited light-theme text colours reversed back out.
   ========================================================================= */
.theme-light main .proof { border-top-color: var(--rule); color: var(--cream); }
.theme-light main .proof .eyebrow { color: var(--amber-text); }
.theme-light main .proof .section-title { color: var(--cream); }
.theme-light main .proof a { color: var(--amber-text); }
.theme-light main .proof a:hover { color: var(--cream); }
.theme-light main .proof :focus-visible { outline-color: var(--amber-text); }
.proof__note { color: var(--cream-faint); font-size: 13px; max-width: 68ch; margin-top: 8px; }
.stats--two { grid-template-columns: repeat(2, 1fr); max-width: 760px; }

/* =========================================================================
   ARTICLE PAGES — the reusable blog post template. Light theme, single
   column at a reading measure, with a sticky-free simple structure.
   ========================================================================= */
.article { padding: 0 0 clamp(64px, 8vw, 120px); }
.article__inner { max-width: 720px; }
.article__meta {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
  font-size: 13px; color: var(--navy-faint);
  border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink);
  padding: 14px 0; margin-bottom: clamp(36px, 4.5vw, 56px);
}
.article__lede {
  font-family: var(--serif); font-size: clamp(20px, 1.9vw, 26px); line-height: 1.36;
  color: var(--navy); margin-bottom: clamp(32px, 4vw, 48px);
}
.article__body > * + * { margin-top: 22px; }
.article__body p { color: var(--navy-dim); font-size: 17px; line-height: 1.7; }
.article__body h2 {
  font-family: var(--serif); font-size: clamp(23px, 2.1vw, 31px);
  color: var(--navy); margin-top: clamp(44px, 5vw, 68px); padding-top: 24px;
  border-top: 1px solid var(--rule-ink);
}
.article__body h3 { font-family: var(--serif); font-size: clamp(19px, 1.6vw, 23px); color: var(--navy); margin-top: 34px; }
.article__body ul { display: grid; gap: 12px; }
.article__body ul li { position: relative; padding-left: 26px; color: var(--navy-dim); font-size: 17px; }
.article__body ul li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 12px; height: 1px; background: var(--amber);
}
.article__body strong { color: var(--navy); font-weight: 600; }
.article__body a { border-bottom: 1px solid var(--rule-ink); }
.article__body a:hover { border-bottom-color: currentColor; }
.article__pull {
  font-family: var(--serif); font-size: clamp(21px, 2vw, 28px); line-height: 1.32;
  color: var(--navy); border-left: 2px solid var(--amber);
  padding: 6px 0 6px 28px; margin: clamp(36px, 4vw, 52px) 0;
}
.article__note {
  background: var(--paper-soft); border-left: 2px solid var(--teal-ink);
  padding: 22px 26px; margin-top: 30px;
}
.article__note p { font-size: 15px; }
.article__next {
  border-top: 1px solid var(--rule-ink); margin-top: clamp(48px, 5.5vw, 76px); padding-top: 30px;
}
.article__nextlabel { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 14px; }

/* Insights index: queued vs published */
.card--queued { opacity: .72; }
.card--queued .card__meta { color: var(--amber-text); }
.insights__group { margin-top: clamp(56px, 6vw, 88px); }
.insights__grouphead {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream-faint); border-top: 1px solid var(--rule);
  padding-top: 18px; margin-bottom: 30px;
}

/* =========================================================================
   LEGAL / STATEMENT PAGES — long-form prose on the light theme.
   Used by /privacy/ and /accessibility/. Measure is held near 68ch, the
   same measure as the FAQ answers, which are the longest prose elsewhere
   on the site. Sits inside .theme-light main, so colour comes from there.
   ========================================================================= */
.legal { padding: 0 0 clamp(64px, 8vw, 120px); }
.legal__inner { max-width: 780px; }
.legal__meta {
  font-size: 13px; letter-spacing: .04em; color: var(--navy-faint);
  border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink);
  padding: 14px 0; margin-bottom: clamp(40px, 5vw, 64px);
  display: flex; flex-wrap: wrap; gap: 8px 32px;
}
.legal__block + .legal__block { margin-top: clamp(40px, 4.6vw, 64px); }
.legal__h {
  font-family: var(--serif); font-size: clamp(21px, 1.9vw, 28px);
  margin-bottom: 18px; padding-top: 22px; border-top: 1px solid var(--rule-ink);
}
.legal__sub {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-ink); margin: 30px 0 12px;
}
.legal p, .legal li { color: var(--navy-dim); font-size: 16px; max-width: 68ch; }
.legal p + p { margin-top: 16px; }
.legal a { border-bottom: 1px solid var(--rule-ink); }
.legal a:hover { border-bottom-color: currentColor; }
.legal__list { display: grid; gap: 12px; margin-top: 18px; }
.legal__list li { position: relative; padding-left: 26px; }
.legal__list li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 12px; height: 1px; background: var(--amber);
}
.legal__list strong { color: var(--navy); font-weight: 600; }
.legal__note {
  background: var(--paper-soft); border-left: 2px solid var(--amber);
  padding: 22px 26px; margin-top: 26px;
}
.legal__note p { max-width: 62ch; }
.legal__toc { display: grid; gap: 10px; margin: 26px 0 0; }
.legal__toc a { font-size: 15px; border-bottom: 0; color: var(--teal-ink); }
.legal__toc a:hover { color: var(--navy); }

/* =========================================================================
   ABOUT — purpose, mission, values. Dark theme, reuses .how and .fit rhythm.
   The values grid is a three-cluster layout: cluster name, then the
   statements that sit under it.
   ========================================================================= */
.purpose { padding: clamp(72px, 9vw, 135px) 0; border-top: 1px solid var(--rule); }
.purpose__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.purpose__statement {
  font-family: var(--serif-display); font-weight: 400;
  font-size: clamp(28px, 3.6vw, 52px); line-height: 1.16; letter-spacing: -.02em;
  padding: clamp(32px, 4vw, 56px) 0;
}
.purpose__note { color: var(--cream-dim); max-width: 62ch; margin: 0 auto; }

.values { padding: clamp(72px, 9vw, 135px) 0; border-top: 1px solid var(--rule); }
.values__grid { display: grid; gap: clamp(40px, 4.5vw, 72px); }
.vcluster {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: clamp(28px, 4vw, 72px);
  border-top: 1px solid var(--rule); padding-top: 30px;
}
.vcluster:last-child { border-bottom: 1px solid var(--rule); padding-bottom: 44px; }
.vcluster__num { font-family: var(--serif-display); font-size: 34px; line-height: 1; color: var(--amber-text); margin-bottom: 16px; }
.vcluster__title { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); }
.vcluster__lede { color: var(--cream-dim); font-size: 15px; margin-top: 16px; max-width: 34ch; }
.vlist { display: grid; gap: 22px; }
.vlist li { border-top: 1px solid var(--rule-soft); padding-top: 18px; }
.vlist strong { display: block; font-family: var(--serif); font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; margin-bottom: 10px; }
.vlist p { color: var(--cream-dim); font-size: 15px; max-width: 62ch; }

@media (max-width: 767px) {
  .vcluster { grid-template-columns: 1fr; }
  .legal__meta { flex-direction: column; gap: 6px; }
}

/* =========================================================================
   GROUPED SERVICES (/business/) — the six cards read as three categories.
   The head reuses .eyebrow for type and colour; this only adds the hairline.
   ========================================================================= */
.svc-group + .svc-group { margin-top: clamp(44px, 5vw, 76px); }
.svc-group__head { padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.section--cream .svc-group__head { border-bottom-color: var(--rule-ink); }
.proof__note + .rule { margin-top: 32px; }

/* =========================================================================
   PEOPLE (home) — the two practice leads. Portrait slots stay 4:5 whether
   they hold a .slot placeholder or a real image.
   ========================================================================= */
.people { padding: clamp(72px, 9vw, 135px) 0; border-top: 1px solid var(--rule); }
.people__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 4vw, 72px); }
.person {
  display: grid; grid-template-columns: 148px 1fr; gap: clamp(20px, 2.2vw, 32px);
  align-items: start; border-top: 1px solid var(--rule); padding-top: 26px;
}
.person__media { width: 148px; aspect-ratio: 4 / 5; object-fit: cover; }
.person__name { font-family: var(--serif); font-size: clamp(21px, 1.9vw, 28px); margin-bottom: 12px; }
.person__copy { color: var(--cream-dim); font-size: 15px; max-width: 40ch; }

/* The footer newsletter block is the target of every "Newsletter" link. */
.footer__news { scroll-margin-top: calc(var(--header-h) + 24px); }

@media (max-width: 1023px) {
  .people__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 599px) {
  .person { grid-template-columns: 120px 1fr; gap: 20px; }
  .person__media { width: 120px; }
}


/* =========================================================================
   PROOF BAND — WHITE VARIANT (home page). Added 17 August 2026.
   .proof--light inverts the band to paper so the long dark run gets a break;
   .proof--compact shrinks the padding and the numerals so the section reads
   as a strip rather than a full chapter. Appended at the end of the file on
   purpose: it has to win over the `.theme-light main .proof` rules above,
   which assume .proof stays dark.
   ========================================================================= */
/* --amber-warm is the orange the amber rules read as on navy, pulled down
   until it clears 4.5:1 on white (measured 4.50:1, so it is AA at any size).
   The literal --amber #C8952B only manages 2.70:1 on paper, which fails even
   the 3:1 large-text floor, so it cannot be used here. */
:root { --amber-warm: #A8681A; }

.proof--light { background: var(--paper); color: var(--navy); border-top: 1px solid var(--rule-ink); }
.proof--light .eyebrow,
.theme-light main .proof--light .eyebrow { color: var(--amber-warm); }
.proof--light .stat__num,
.theme-light main .proof--light .stat__num { color: var(--amber-warm); }
.proof--light .stat__label,
.theme-light main .proof--light .stat__label { color: var(--navy-dim); border-top-color: var(--rule-ink); }
.proof--light .proof__note,
.theme-light main .proof--light .proof__note { color: var(--navy-faint); }
.theme-light main .proof--light { color: var(--navy); border-top-color: var(--rule-ink); }
.theme-light main .proof--light .section-title { color: var(--navy); }
.proof--light :focus-visible,
.theme-light main .proof--light :focus-visible { outline-color: var(--amber-warm); }

.proof--compact { padding: clamp(48px, 5vw, 72px) 0; }
.proof--compact .stats { margin-bottom: clamp(28px, 3vw, 40px); }
.proof--compact .stat__num { font-size: clamp(34px, 3.4vw, 52px); margin-bottom: 12px; }
.proof--compact .stat__label { font-size: 13px; padding-top: 12px; max-width: 22ch; }
.proof--compact .eyebrow { margin-bottom: clamp(28px, 3vw, 44px); }

/* Centred variant. .stat__label carries a max-width and a top rule, so it
   needs auto side margins as well as text-align to sit under its numeral. */
.proof--center .eyebrow,
.proof--center .stats,
.proof--center .proof__note { text-align: center; }
.proof--center .stat__label { margin-left: auto; margin-right: auto; }
.proof--center .proof__note { max-width: 62ch; margin-left: auto; margin-right: auto; }

.stats--four { grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 2.6vw, 40px); }

/* =========================================================================
   FORM FIELD MEASURE — added 17 August 2026. The inputs ran the full width
   of the form column, which read as a wall. Cap the text fields; the select
   keeps full width via .field--wide so the long option labels do not clip.
   ========================================================================= */
.field input, .field textarea { max-width: 30rem; }
.field--wide select, .field--wide input { max-width: none; }
.field textarea { min-height: 96px; }

@media (max-width: 767px) {
  .field input, .field textarea { max-width: none; }
}


/* =========================================================================
   BUSINESS PAGE ADDITIONS — 17 August 2026.
   .svc-intro is the practice summary above the service groups.
   .svc--static is a service card with no detail page yet: same box, but it is
   a <div> rather than an <a>, so the hover affordance has to come off or it
   advertises a link that does not exist. Delete the modifier when the page
   ships and convert the element back to an anchor.
   ========================================================================= */
.svc-intro { max-width: 78ch; margin-bottom: clamp(44px, 5vw, 76px); }
.svc-intro p + p { margin-top: 20px; }
.section--cream .svc-intro p { color: var(--navy-dim); }

.svc--static { cursor: default; }
.svc--static:hover { transform: none; box-shadow: none; border-color: transparent; background: var(--navy); }
.svc--static:hover .svc__list li { border-top-color: var(--rule-soft); }
.section--cream .svc--static:hover { background: var(--cream); border-color: transparent; box-shadow: none; }
.section--cream .svc--static:hover .svc__list li { border-top-color: var(--rule-ink); }

/* The testimonial block returns inside .proof--light, where the cream rule is
   invisible against paper. */
.proof--light .rule { background: var(--rule-ink); }
.proof--light .proof__attr { color: var(--navy-faint); }