/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,dd,ol,ul,figure,hr,fieldset,legend{margin:0;padding:0}
ol,ul{list-style:none}
a{background-color:transparent;color:inherit;text-decoration:none}
img{border-style:none;display:block;max-width:100%}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
button,[type="button"],[type="submit"]{-webkit-appearance:button;cursor:pointer}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner{border-style:none;padding:0}
textarea{overflow:auto;resize:vertical}
[hidden]{display:none}
:focus-visible{outline:2px solid #1F3D2E;outline-offset:2px}

/* ── TOKENS ── */
:root {
  --cream:        #FBFAF8;
  --cream-2:      #F4F2EE;
  --warm-white:   #FFFFFE;
  --ink:          #1A1714;
  --ink-soft:     #2C2924;
  --sage:         #1F3D2E;
  --sage-light:   #2E5742;
  --gold:         #9C8B6E;
  --gold-light:   #B8A88E;
  --text-primary: rgba(26,23,20,0.90);
  --text-body:    rgba(26,23,20,0.78);
  --text-caption: rgba(26,23,20,0.55);
  --text-ghost:   rgba(26,23,20,0.08);
  --on-dark:      #FAF8F4;
  --on-dark-soft: rgba(250,248,244,0.50);
  --on-dark-rule: rgba(250,248,244,0.08);
  --rule:         rgba(26,23,20,0.07);
  --ff-display:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-body:      'Outfit', system-ui, -apple-system, sans-serif;
  --max:          1280px;
  --pad-x:        clamp(28px, 6vw, 100px);
  --pad-section:  clamp(40px, 5vw, 72px);
  --nav-h:        72px;
}

/* ── TYPOGRAPHY ── */
body {
  font-family: var(--ff-body);
  background: var(--cream);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
}
.label {
  font-family: var(--ff-body);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--text-caption);
}
.display-md {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.display-sm {
  font-family: var(--ff-display);
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.012em;
}
.body-lg {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.85;
  font-weight: 300;
  color: var(--text-body);
}

/* ── LAYOUT ── */
.section    { padding: var(--pad-section) var(--pad-x); }
.inner      { max-width: var(--max); margin: 0 auto; }

/* When two same-background sections sit adjacent, collapse the dead zone
   between them by ~50% on the second section's top. Targets the exact
   inline-style values used in the markup. */
.section[style*="--cream)"] + .section[style*="--cream)"],
.section[style*="--cream-2)"] + .section[style*="--cream-2)"] {
  padding-top: calc(var(--pad-section) * 0.5);
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--ink);
  border-bottom: 1px solid var(--on-dark-rule);
  transition: box-shadow 0.3s;
  padding: 0 var(--pad-x);
}
nav.is-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.15); }
.nav-inner {
  max-width: var(--max); margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--on-dark);
}
.wordmark-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  line-height: 1;
}
.wm-primary {
  font-family: 'EB Garamond', Garamond, Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.005em;
  line-height: 1;
}
.wm-secondary {
  font-family: 'EB Garamond', Garamond, Georgia, serif;
  font-weight: 500;
  font-size: 8px;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 4px;
  /* Justified to match width of "Blairview" above via flex space-between
     across letter spans. Eliminates the near-match optical problem of
     fixed letter-spacing. Scale-invariant — works at every nav, footer,
     and hero scale without re-tuning. April 22, 2026. */
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.wm-secondary > span {
  display: inline-block;
}
.nav-links { display: flex; gap: 44px; align-items: center; }
.nav-links a {
  font-family: var(--ff-body);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-dark-soft); font-weight: 400; transition: color 0.3s;
}
.nav-links a:hover { color: var(--on-dark); }
.nav-cta {
  display: inline-flex; align-items: center;
  background: var(--sage); color: var(--on-dark) !important;
  padding: 11px 26px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400;
  transition: background 0.3s;
}
.nav-cta:hover { background: var(--sage-light); }
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 6px; width: 44px; height: 44px; background: none; border: none;
  padding: 11px; align-items: center;
}
.nav-hamburger span {
  display: block; width: 22px; height: 1px;
  background: var(--on-dark-soft);
  transition: transform 0.25s; transform-origin: center;
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ── MOBILE DRAWER ── */
.mobile-drawer {
  position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 99;
  background: var(--ink); padding: 40px var(--pad-x);
  display: flex; flex-direction: column; gap: 0;
  transform: translateX(100%); transition: transform 0.28s ease;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer a {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--on-dark-soft); font-weight: 400;
  padding: 22px 0; border-bottom: 1px solid var(--on-dark-rule); transition: color 0.2s;
}
.mobile-drawer a:hover { color: var(--on-dark); }
.mobile-drawer .mob-cta {
  margin-top: 32px; background: var(--sage); color: var(--on-dark) !important;
  text-align: center; padding: 18px; border: none;
}

/* ── HERO ── */
.hero {
  min-height: auto;
  padding-top: var(--nav-h);
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  background: var(--cream);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}
.hero .inner {
  position: relative; z-index: 1;
  padding: clamp(36px, 5vh, 64px) 0;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}
.hero-eyebrow {
  font-family: var(--ff-body); font-size: 10px;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--gold); font-weight: 400;
  margin-bottom: clamp(20px, 3vh, 36px);
  opacity: 0; animation: fadeUp 0.8s ease 0.2s forwards;
}
.hero-headline {
  font-family: var(--ff-display);
  font-size: clamp(52px, 7vw, 104px);
  font-weight: 300; line-height: 1.04;
  letter-spacing: -0.025em; color: var(--ink);
  max-width: 16ch;
  opacity: 0; animation: fadeUp 1s ease 0.4s forwards;
}
.hero-headline em {
  font-style: italic; font-weight: 300;
  display: block; margin-top: 0.3em;
  font-size: 0.38em; letter-spacing: 0;
  color: var(--text-body); line-height: 1.6;
}
.hero-rule {
  width: 48px; height: 1px; background: var(--gold-light);
  margin: clamp(20px, 3vh, 36px) 0;
  opacity: 0; animation: fadeUp 0.8s ease 0.7s forwards;
}
.hero-signature {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--sage);
  max-width: 36ch;
  margin-bottom: clamp(24px, 3.2vh, 40px);
  opacity: 0;
  animation: fadeUp 0.9s ease 0.75s forwards;
}

/* ── CREDENTIAL STRIP ── */
.credential-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; border-top: 1px solid var(--rule);
  opacity: 0; animation: fadeUp 0.8s ease 0.9s forwards;
}
.cred-item {
  padding: clamp(24px, 3vw, 36px) 0;
  padding-right: clamp(20px, 2.5vw, 40px);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.cred-item:not(:last-child)::after {
  content: ''; position: absolute; right: 0;
  top: 24px; bottom: 24px; width: 1px;
  background: var(--rule);
}
.cred-item:not(:first-child) { padding-left: clamp(20px, 2.5vw, 40px); }
.cred-era {
  font-family: var(--ff-body); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-caption); font-weight: 400; margin-bottom: 10px;
}
.cred-title {
  font-family: var(--ff-display);
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 400; color: var(--ink);
  line-height: 1.35; margin-bottom: 8px;
}
.cred-desc {
  font-family: var(--ff-body); font-size: 12px;
  color: var(--text-body); line-height: 1.65; font-weight: 300;
}

/* ── HERO ACTIONS ── */
.hero-actions {
  display: flex; gap: 14px;
  margin-top: clamp(20px, 3vh, 32px);
  opacity: 0; animation: fadeUp 0.8s ease 1.1s forwards;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff-body);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400;
  padding: 16px 32px; transition: all 0.3s ease;
  border: 1px solid transparent; white-space: nowrap;
}
.btn-sage { background: var(--sage); color: var(--on-dark); border-color: var(--sage); }
.btn-sage:hover { background: var(--sage-light); border-color: var(--sage-light); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-outline:hover { border-color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.btn-ink:hover { background: var(--ink-soft); border-color: var(--ink-soft); }

/* ── ENGAGEMENTS ── */
.eng-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.eng-card {
  background: var(--cream);
  padding: clamp(32px, 3.5vw, 52px);
  display: flex; flex-direction: column;
  transition: background 0.3s;
  position: relative;
}
.eng-card::before {
  content: '';
  position: absolute;
  top: 0; left: clamp(32px, 3.5vw, 52px);
  width: 36px; height: 2px;
  background: var(--gold-light);
}
.eng-card:hover { background: var(--warm-white); }
.eng-num {
  font-family: var(--ff-display); font-size: 11px;
  color: var(--text-caption); margin-bottom: 18px;
}
.eng-name {
  font-family: var(--ff-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400; color: var(--ink);
  line-height: 1.2; margin-bottom: 18px;
}
.eng-body {
  font-family: var(--ff-body); font-size: 13px;
  color: var(--text-body); line-height: 1.72; font-weight: 300;
  flex: 1; margin-bottom: 24px;
}
.eng-footer {
  font-family: var(--ff-body); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-caption);
  padding-top: 18px; border-top: 1px solid var(--rule);
  margin-top: auto;
}
.eng-cta {
  display: inline-block;
  font-family: var(--ff-body); font-size: 11px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--sage); font-weight: 500;
  text-decoration: none;
  margin-top: 16px; padding-top: 14px;
  transition: color 0.2s;
}
.eng-cta:hover { color: var(--sage-light); }

/* ── PRACTICE CLOSE BAND ── */
.practice-close {
  text-align: center;
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--rule);
}
.practice-close-statement {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  color: var(--sage);
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.4;
  letter-spacing: 0.005em;
  margin: 0 0 clamp(24px, 3vw, 36px);
}
.practice-close-statement span { display: block; }

/* ── DIAGNOSTIC / PULLQUOTE ── */
.diagnostic-grid {
  display: grid; grid-template-columns: 55fr 45fr;
  gap: clamp(48px, 6vw, 104px); align-items: center;
}
.trigger-list { margin-top: 32px; }
.trigger-item {
  display: grid; grid-template-columns: 28px 1fr; gap: 20px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.trigger-item:first-child { border-top: 1px solid var(--rule); }
.trigger-num { font-family: var(--ff-display); font-size: 11px; color: var(--text-caption); padding-top: 1px; }
.trigger-text { font-size: 13px; color: var(--text-body); line-height: 1.65; font-weight: 300; }
.pullquote { background: var(--ink); padding: clamp(32px,3.5vw,52px); position: relative; }
.pullquote-mark { font-family: var(--ff-display); font-size: 72px; line-height: 0.8; color: rgba(250,248,244,0.06); margin-bottom: 8px; }
.pullquote-text { font-family: var(--ff-display); font-size: clamp(17px, 1.8vw, 22px); color: var(--on-dark); font-weight: 300; font-style: italic; line-height: 1.55; margin-bottom: 20px; }
.pullquote-attr { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250,248,244,0.28); }
.stat-strip {
  display: grid; grid-template-columns: repeat(3,1fr);
  border: 1px solid var(--rule); border-top: none;
}
.stat-cell { padding: 20px 18px; border-right: 1px solid var(--rule); }
.stat-cell:last-child { border-right: none; }
.stat-num { font-family: var(--ff-display); font-size: clamp(28px,3vw,40px); font-weight: 300; color: var(--ink); line-height: 1; margin-bottom: 6px; }
.stat-lbl { font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-caption); }

/* ── COACHING ── */
.coaching-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.coaching-card {
  background: var(--cream); padding: clamp(28px,3vw,44px);
  display: flex; flex-direction: column; transition: background 0.2s;
}
.coaching-card:hover { background: var(--warm-white); }
.coaching-num { font-family: var(--ff-display); font-size: 11px; color: var(--text-caption); margin-bottom: 14px; }
.coaching-title { font-family: var(--ff-display); font-size: clamp(18px,1.6vw,24px); font-weight: 400; color: var(--ink); line-height: 1.2; margin-bottom: 16px; }
.coaching-body { font-size: 13px; color: var(--text-body); line-height: 1.72; font-weight: 300; flex: 1; margin-bottom: 20px; }
.coaching-price { font-family: var(--ff-display); font-size: clamp(24px, 2.5vw, 32px); font-weight: 300; color: var(--ink); margin-top: auto; line-height: 1; }
.coaching-price-sub { font-family: var(--ff-body); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-caption); margin-top: 6px; }

/* ── CONTACT ── */
.contact-grid {
  display: grid; grid-template-columns: 4fr 6fr;
  gap: clamp(48px, 6vw, 104px); align-items: start;
}
.contact-row { margin-bottom: 22px; }
.contact-lbl { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-caption); margin-bottom: 5px; }
.contact-val { font-size: 14px; color: var(--text-body); font-weight: 300; }
.form-group { margin-bottom: 18px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-lbl {
  display: block; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-caption); font-weight: 400; margin-bottom: 8px;
}
.form-ctrl {
  display: block; width: 100%; background: var(--cream-2);
  border: 1px solid var(--rule); color: var(--ink);
  font-family: var(--ff-body); font-size: 13px; padding: 12px 14px;
  transition: border-color 0.2s; appearance: none; font-weight: 300;
}
.form-ctrl:focus { outline: none; border-color: var(--sage); }
.form-ctrl::placeholder { color: var(--text-caption); }
.is-textarea { min-height: 120px; }
.is-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.form-submit {
  width: 100%; background: var(--sage); color: var(--on-dark);
  border: none; font-family: var(--ff-body); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400;
  padding: 18px; cursor: pointer; transition: background 0.2s;
}
.form-submit:hover { background: var(--sage-light); }
.form-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.form-sub-note { font-size: 11px; color: var(--text-caption); margin-top: 14px; line-height: 1.6; font-weight: 300; }

/* ── HEADSHOT ── */
.headshot-wrap {
  margin-bottom: clamp(24px, 3vw, 36px);
}
.headshot {
  width: clamp(100px, 14vw, 152px);
  height: clamp(100px, 14vw, 152px);
  object-fit: cover;
  object-position: center top;
  filter: grayscale(15%) contrast(1.02);
  border: 1px solid var(--rule);
}
.headshot-name {
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  margin-top: 10px;
  line-height: 1.3;
}
.headshot-title {
  font-family: var(--ff-body);
  font-size: 10px;
  color: var(--text-caption);
  font-weight: 300;
  margin-top: 2px;
  letter-spacing: 0.04em;
}

/* ── HERO LAYOUT ── */

/* ── FOOTER ── */
.footer-wrap { background: var(--ink); padding: 32px var(--pad-x); }
.footer-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.footer-brand { display: inline-flex; align-items: center; color: var(--on-dark-soft); }
.wordmark-stack--footer .wm-primary { font-size: 21px; color: var(--on-dark-soft); }
.wordmark-stack--footer .wm-secondary { font-size: 7px; color: var(--on-dark-soft); margin-top: 3px; }
.footer-nav { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-nav a { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250,248,244,0.2); transition: color 0.2s; }
.footer-nav a:hover { color: var(--on-dark-soft); }
.footer-legal { font-size: 9px; letter-spacing: 0.04em; color: rgba(250,248,244,0.14); font-weight: 300; }

/* ── REVEALS ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.75s ease, transform 0.75s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── MOBILE COLLAPSE: desktop default (hide toggle, no clamp) ── */
.mobile-collapse-toggle { display: none; }
.mobile-collapse-input { display: none; }

/* ── MOBILE-ONLY CONTACT INTRO: desktop default (hidden) ── */
.contact-intro-mobile { display: none; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .credential-strip { grid-template-columns: 1fr 1fr; }
  .cred-item:nth-child(2)::after { display: none; }
  .cred-item:nth-child(3) { padding-left: 0; }
  .cred-item:nth-child(4)::after { display: none; }
  .eng-grid { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr; }
  .practice-close-statement span { display: inline; }
  .practice-close-statement span + span::before { content: " "; }
  .contact-grid { gap: 32px; }
  .coaching-grid { grid-template-columns: 1fr 1fr; }
  .coaching-compact-outer { grid-template-columns: 1fr !important; gap: 28px !important; }
  .process-grid-wrap { grid-template-columns: 1fr !important; }
  .stat-strip { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 768px) {
  .coaching-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --pad-x: 22px; --nav-h: 62px; --pad-section: clamp(28px, 7vw, 40px); }
  .credential-strip { grid-template-columns: 1fr; }
  .cred-item::after { display: none !important; }
  .cred-item { padding-left: 0 !important; padding-right: 0 !important; }
  .hero-actions { flex-direction: column; }
  .btn { width: 100%; justify-content: center; }
  .form-row-2 { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* MOBILE FOOTER COMPACT (2026-05-22) — light cream footer for mobile so the large block doesn't dominate */
  .footer-wrap {
    background: #FBFAF8;
    padding: 22px var(--pad-x) 22px;
    border-top: 1px solid rgba(26,23,20,0.08);
  }
  .footer-brand { color: rgba(26,23,20,0.55); }
  .wordmark-stack--footer .wm-primary { font-size: 14px; color: rgba(26,23,20,0.55); }
  .wordmark-stack--footer .wm-secondary { font-size: 6px; margin-top: 2px; color: rgba(26,23,20,0.55); }
  .footer-inner { gap: 14px !important; }
  /* Nav: 2-column grid keeps it clean — no orphaned items on their own line */
  .footer-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px !important;
    width: 100%;
  }
  .footer-nav li { line-height: 1; }
  .footer-nav a { font-size: 9px; letter-spacing: 0.14em; color: rgba(26,23,20,0.55); }
  .footer-nav a:hover { color: rgba(26,23,20,0.85); }
  .footer-legal {
    font-size: 8.5px; line-height: 1.55; color: rgba(26,23,20,0.35); font-weight: 300;
    padding-top: 12px; border-top: 1px solid rgba(26,23,20,0.06); width: 100%;
  }
  .hero-actions .btn-outline { display: none; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat-cell:last-child { border-top: 1px solid var(--rule); }
  .coaching-compact-inner { grid-template-columns: 1fr !important; gap: 22px !important; }

  /* ── MOBILE COLLAPSE: long body copy ── */
  /* Clamps designated text blocks to ~3 lines, fades the bottom edge,
     and shows a "Read more" toggle. Mobile only — desktop unchanged.
     Uses checkbox sibling selector so it works without JS. */
  .mobile-collapse-wrap {
    display: flex;
    flex-direction: column;
    /* Inherit flex:1 behavior inside engagement cards so layout holds */
  }
  .eng-card .mobile-collapse-wrap { flex: 1; margin-bottom: 24px; }
  .eng-card .mobile-collapse-wrap .eng-body { margin-bottom: 0; flex: 0; }
  .mobile-collapse {
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mobile-collapse::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2.4em;
    background: linear-gradient(to bottom, transparent, var(--cream) 90%);
    pointer-events: none;
  }
  /* Engagement cards live on cream background; matches the fade.
     Diagnostic and Practice sections also use cream — consistent. */
  .mobile-collapse-toggle {
    display: inline-block;
    margin-top: 12px;
    font-family: var(--ff-body);
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--sage);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    background: none; border: none; padding: 0;
    align-self: flex-start;
  }
  .mobile-collapse-input { display: none; }
  .mobile-collapse-input:checked + .mobile-collapse {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .mobile-collapse-input:checked + .mobile-collapse::after { display: none; }
  .mobile-collapse-input:checked ~ .mobile-collapse-toggle .more-label { display: none; }
  .mobile-collapse-input:not(:checked) ~ .mobile-collapse-toggle .less-label { display: none; }

  /* ── ENGAGEMENT CARDS: opt out of mobile collapse ──
     The engagement card body is the primary sales paragraph. Clamping it
     to 3 lines behind a "Read more" tap hides the value prop on the most
     important section of the homepage. Practice page and other long-copy
     blocks keep the collapse behavior; engagement cards do not.
     Added May 18, 2026 (Website Patch Wave May-18). */
  .eng-card .mobile-collapse {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .eng-card .mobile-collapse::after { display: none; }
  .eng-card .mobile-collapse-toggle { display: none; }

  /* ── HERO CREDENTIAL STRIP: trim on mobile ── */
  /* Stack the four brand names into a compact two-column grid;
     hide the gold-dot dividers (they only make sense in a single row). */
  .hero-cred-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px !important;
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
    padding: 20px 0 !important;
    margin: 12px 0 !important;
  }
  .hero-cred-divider { display: none !important; }

  /* ──────────────────────────────────────────────────────────
     MOVE B: DIAGNOSTIC TRIGGER LIST — tighten on mobile
     ──────────────────────────────────────────────────────────
     Reduce padding and font weight; remove visual chrome.
     Saves ~150-200px. */
  .trigger-list { margin-top: 20px; }
  .trigger-item {
    padding: 10px 0;
    grid-template-columns: 22px 1fr;
    gap: 14px;
  }
  .trigger-num { font-size: 10px; }
  .trigger-text { font-size: 13px; line-height: 1.55; }
  /* Tighten the pullquote too — it's huge on mobile */
  .pullquote { padding: 28px 24px; }
  .pullquote-mark { font-size: 48px; margin-bottom: 0; }
  .pullquote-text { font-size: 16px; margin-bottom: 14px; }

  /* ──────────────────────────────────────────────────────────
     MOVE C: CONTACT SECTION — tighten on mobile
     ──────────────────────────────────────────────────────────
     Hide desktop intro paragraphs, show condensed mobile version.
     Smaller headshot. Tighter form spacing. Saves ~250px. */
  .contact-intro-desktop { display: none; }
  .contact-intro-mobile { display: block; margin-bottom: 24px !important; font-size: 16px !important; line-height: 1.55 !important; }
  .headshot {
    width: 144px !important;
    height: 144px !important;
    border: 1px solid var(--rule);
    box-shadow: none;
  }
  .headshot-wrap { margin-bottom: 28px; }
  .headshot-name { font-size: 16px; margin-top: 12px; }
  .headshot-title { font-size: 10px; }
  .form-group { margin-bottom: 12px; }
  .is-textarea { min-height: 88px; }
  /* Tighten the contact heading slightly */
  #contact .display-md { margin-bottom: 16px !important; }
  #contact .display-md span { margin-bottom: 8px !important; }
}
@media (max-width: 480px) {
  :root { --pad-x: 18px; }
  .wm-primary { font-size: 19px; }
  .wm-secondary { font-size: 7px; margin-top: 3px; }
  .coaching-price { font-size: clamp(20px, 6vw, 28px); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── PROCESS CARDS ── */
.process-num {
  font-family: var(--ff-display);
  font-size: clamp(36px,4vw,56px);
  font-weight: 300; color: var(--text-ghost);
  line-height: 1; margin-bottom: 16px;
}
.process-title {
  font-family: var(--ff-display);
  font-size: clamp(17px,1.5vw,22px);
  font-weight: 400; color: var(--ink);
  line-height: 1.25; margin-bottom: 12px;
}
.process-body {
  font-size: 13px; color: var(--text-body);
  line-height: 1.72; font-weight: 300;
}
.process-card {
  background: var(--cream);
  padding: clamp(28px,3vw,44px);
}

/* ── COACHING (light treatment, secondary visual weight) ── */
.coaching-dark-card {
  background: var(--warm-white);
  padding: clamp(28px,3vw,44px);
  display: flex; flex-direction: column;
}
.coaching-dark-num {
  font-family: var(--ff-display);
  font-size: 11px; color: var(--text-caption);
  margin-bottom: 14px;
}
.coaching-dark-title {
  font-family: var(--ff-display);
  font-size: clamp(18px,1.6vw,24px);
  font-weight: 400; color: var(--ink);
  line-height: 1.2; margin-bottom: 16px;
}
.coaching-dark-body {
  font-size: 13px; color: var(--text-body);
  line-height: 1.72; font-weight: 300;
  flex: 1; margin-bottom: 20px;
}
.coaching-dark-footer {
  font-family: var(--ff-body); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-caption);
  padding-top: 18px; border-top: 1px solid var(--rule);
  margin-top: auto;
}

/* ── RESOURCE CARDS ── */
.resource-card {
  background: var(--cream-2);
  padding: clamp(28px,3vw,44px);
  display: flex; flex-direction: column;
  transition: background 0.2s;
}
.resource-card:hover { background: var(--warm-white); }
.resource-tag {
  font-family: var(--ff-body); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); font-weight: 400; margin-bottom: 14px;
}
.resource-title {
  font-family: var(--ff-display);
  font-size: clamp(18px,1.6vw,24px);
  font-weight: 400; color: var(--ink);
  line-height: 1.25; margin-bottom: 14px;
}
.resource-body {
  font-size: 13px; color: var(--text-body);
  line-height: 1.72; font-weight: 300;
  flex: 1; margin-bottom: 20px;
}
.resource-preview {
  font-size: 11px; color: var(--text-caption);
  line-height: 1.6; font-weight: 300;
  margin-bottom: 16px; padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.resource-link {
  font-family: var(--ff-body); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage); font-weight: 400;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.2s;
}
.resource-link:hover { color: var(--ink); }
.resource-link svg { transition: transform 0.2s; }
.resource-link:hover svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .process-grid-wrap { grid-template-columns: 1fr !important; }
  .coaching-dark-grid { grid-template-columns: 1fr !important; }
  .resource-grid-wrap { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════
   MULTI-PAGE ADDITIONS (v8b)
   - .nav-active for current-page highlighting (text stays light
     on dark nav background — fixes v8 invisible-text bug)
   ═══════════════════════════════════════════════════════════ */

/* Desktop active: keep bright on-dark text, add gold underline */
.nav-links a.nav-active {
  color: var(--on-dark);
  position: relative;
}
.nav-links a.nav-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--gold);
}
/* Mobile drawer active: brighter text + gold left accent */
.mobile-drawer a.nav-active {
  color: var(--on-dark);
  font-weight: 500;
  border-left: 2px solid var(--gold);
  padding-left: 14px;
  margin-left: -16px;
}

/* ═══════════════════════════════════════════════════════════
   FIRST-SECTION TOP PADDING (v8b fix)
   On standalone pages (/about/, /writing/) the first content
   section is a regular .section (not .hero), so it has no
   built-in nav-height offset. This rule pushes it down by
   the nav height so the headline doesn't touch the nav bar.
   Homepage is unaffected because its first section is .hero
   which already has padding-top: var(--nav-h).
   ═══════════════════════════════════════════════════════════ */
main > .section:first-child {
  padding-top: calc(var(--nav-h) + var(--pad-section)) !important;
}


/* ═══════════════════════════════════════════════════════════
   ANCHOR LINK FIX (v8c)
   When clicking #engagements / #coaching / #contact in the nav,
   the sticky nav bar was hiding the section heading.
   scroll-margin-top tells the browser to leave nav-height of
   space above the target when scrolling to it.
   ═══════════════════════════════════════════════════════════ */
section[id] {
  scroll-margin-top: var(--nav-h);
}


/* ═══════════════════════════════════════════════════════════
   STICKY FOOTER + SCROLLBAR STABILITY
   (Patch 6 of WEBSITE_PATCH_WAVE_2026-06-04)
   
   Three fixes that together resolve cross-page visual drift
   that became visible when the short-content /coaching/ page
   shipped:
   
   1) STICKY FOOTER: On pages with content shorter than the
      viewport (notably /coaching/), the dark footer rendered
      directly below content with empty cream below it. Flex
      column on body with flex:1 0 auto on main pushes the
      footer to viewport bottom on short pages. On longer
      pages where content exceeds viewport (homepage, /practice/,
      /published-work/) flex behavior degrades to normal flow
      with no visual change.
   
   2) FOOTER BELOW THE FOLD: Setting min-height:100vh on main
      forces every page to be at least viewport-tall. On short
      pages this means the footer renders just past the bottom
      edge of the viewport (below the fold), requiring a scroll
      to reveal. On long pages min-height:100vh is a floor that
      content already exceeds — no regression.
   
   3) SCROLLBAR STABILITY: Pages with content taller than the
      viewport trigger a vertical scrollbar (~15-17px wide);
      shorter pages do not. The width difference caused
      horizontal layout shift in the nav wordmark and section
      content when navigating between long and short tabs.
      scrollbar-gutter:stable reserves the scrollbar lane in
      layout regardless of whether the bar is currently shown.
      Supported in Chrome 94+, Firefox 97+, Safari 15.5+.
      Older browsers fall back to prior behavior (no regression).
   
   Note on existing fixed nav: The site nav uses position:fixed
   and is removed from flex flow. The mobile drawer uses
   position:fixed similarly. Neither participates in the body
   flex layout, so no interaction conflict.
   
   Note on min-height:100vh: with main at min-height:100vh,
   short pages will show a visible cream expanse below content
   and above the footer (the empty space that brings main up to
   viewport height). This is intentional. The alternative is to
   add more content to the page itself.
   ═══════════════════════════════════════════════════════════ */
html {
  scrollbar-gutter: stable;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
  min-height: 100vh;
}
.footer-wrap {
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   WEBSITE PATCH WAVE 2026-06-07 — APPENDED RULES
   Source: Friend's UI/UX + copy review (Figma DONE/NOT STARTED markers)
   Three rules total:
     1. Hero CTA min-width 180px (visual weight on credentials strip)
     2. Contact form fields: ivory background on cream-2 section
     3. Send Message button: half-width on desktop, full-width <900px
   Card flex alignment NOT added here. The existing .eng-card rule at
   line 310 (display:flex flex-direction:column) plus .eng-footer rule
   at line 345 (margin-top:auto) plus mobile breakpoint rules at lines
   587-588 already handle footer alignment correctly across asymmetric
   card body lengths. No additional flex rules needed.
   ═══════════════════════════════════════════════════════════════ */

/* Hero CTA: width increase for visual weight against credentials strip */
.hero-actions .btn { min-width: 180px; text-align: center; }

/* Contact form fields: lighter ivory background on cream-2 section
   (was matching section bg; now reads as distinct input surface) */
#contact .form-ctrl { background: var(--cream); }

/* Send Message button: half-width on desktop, full-width below 900px.
   900px breakpoint matches existing .contact-grid single-column collapse
   at line 527. A 50% button on a single-column mobile form is too small. */
.form-submit { width: 50%; }
@media (max-width: 900px) {
  .form-submit { width: 100%; }
}