:root {
  --bg: #ffffff;
  --text: #111111;
  --navy: #006FD0;
  --muted: rgba(17, 17, 17, 0.6);
  --faint: rgba(17, 17, 17, 0.14);
  --soft: rgba(17, 17, 17, 0.035);
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  line-height: 1.55;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3 {
  margin: 0;
}

.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;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 0.5px solid var(--faint);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
}

.nav-shell {
  width: min(1180px, calc(100% - 40px));
  min-height: 64px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  letter-spacing: 0;
  white-space: nowrap;
}

.brand-logo {
  display: block;
  height: 62px;
  width: auto;
}

.nav-tagline {
  flex: 1;
  margin: 0;
  text-align: center;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-tagline sup {
  font-size: 0.7em;
  vertical-align: super;
}

/* On wide screens both header buttons share one width (>= the CTA's), so the
   phone number sits in an equal black button with the row symmetric + centered. */
@media (min-width: 1160px) {
  .nav-cta {
    min-width: 270px;
  }
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
}

.nav-menu a {
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.nav-menu a:hover {
  color: var(--text);
}

.nav-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 0.5px solid var(--navy);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.nav-cta {
  background: var(--navy);
  color: var(--bg);
  border-color: var(--navy);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.03em;
}

.cta-short {
  display: none;
}

.button.primary {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--bg);
}

.button.full {
  width: 100%;
}

.mobile-first,
.menu-toggle {
  display: none;
}

.section-inner {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  text-align: center;
}

.section-pad {
  padding: 76px 0;
}

.hero {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  border-bottom: 0.5px solid var(--faint);
}

.hero-inner {
  padding-bottom: 8vh;
}

.hero-logo {
  display: block;
  height: clamp(130px, 20vw, 210px);
  width: auto;
  margin: 0 auto 32px;
}

/* NYT pull-quote above the logo */
.hero-quote {
  max-width: 660px;
  margin: 0 auto 40px;
}

.hero-quote blockquote {
  max-width: none;
  margin: 0;
  font-family: var(--serif);
  font-size: 21px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
}

.hero-quote-credit {
  display: block;
  height: 24px;
  width: auto;
  margin: 20px auto 0;
}

.eyebrow {
  margin-bottom: 22px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2 {
  max-width: 930px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(28px, 4.5vw, 50px);
}

h1 em {
  display: block;
  font-style: italic;
}

h2 {
  font-size: clamp(38px, 5vw, 68px);
}

.hero-copy {
  max-width: 720px;
  margin: 30px auto 28px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
}

.under-note {
  margin-top: 16px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
}

.stats {
  border-bottom: 0.5px solid var(--faint);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.stats article {
  min-height: 220px;
  padding: 42px 34px;
  border-left: 0.5px solid var(--faint);
}

.stats article:last-child {
  border-right: 0.5px solid var(--faint);
}

.stats strong {
  display: block;
  margin-bottom: 18px;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  line-height: 1;
}

.stats span {
  display: block;
  max-width: 260px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
}

.narrow {
  max-width: 940px;
}

.body-stack {
  display: grid;
  gap: 18px;
  max-width: 760px;
  margin: 26px auto 0;
}

.body-stack p,
.pillar-list p,
.process-grid p {
  color: var(--muted);
  font-size: 20px;
  line-height: 1.6;
}

.quote-band,
.cta-band,
.final-section {
  padding: 64px 0;
  border-top: 0.5px solid var(--faint);
  border-bottom: 0.5px solid var(--faint);
  background: var(--soft);
}

blockquote {
  max-width: 980px;
  margin: 0 auto;
  font-size: clamp(31px, 4vw, 58px);
  font-style: italic;
  line-height: 1.12;
}

cite {
  display: block;
  margin-top: 26px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  font-style: normal;
  font-weight: 300;
  text-transform: uppercase;
}

.section-heading {
  display: grid;
  gap: 0;
  margin-bottom: 34px;
}

.storm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 0.5px solid var(--faint);
  border-left: 0.5px solid var(--faint);
}

.storm-grid div {
  min-height: 148px;
  padding: 28px;
  border-right: 0.5px solid var(--faint);
  border-bottom: 0.5px solid var(--faint);
  font-size: 28px;
  line-height: 1.25;
}

.storm-grid span {
  display: block;
  margin-bottom: 24px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
}

.cta-inner {
  display: grid;
  justify-items: center;
  gap: 36px;
}

.final-grid {
  display: grid;
  justify-items: center;
  gap: 40px;
}

.dual-grid article {
  min-width: 0;
}

.pillar-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 0;
  border-top: 0.5px solid var(--faint);
  border-left: 0.5px solid var(--faint);
}

.pillar-list section {
  padding: 32px 30px;
  border-right: 0.5px solid var(--faint);
  border-bottom: 0.5px solid var(--faint);
}

.pillar-list h3 {
  margin-bottom: 14px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
}

.pillar-list p {
  font-size: 16px;
}

h3 {
  margin-bottom: 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: uppercase;
}

.credentials {
  display: grid;
  gap: 10px;
  margin: 34px 0 0;
  padding: 26px 0 0;
  border-top: 0.5px solid var(--faint);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  list-style: none;
}

.process-section {
  border-top: 0.5px solid var(--faint);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 0.5px solid var(--faint);
  border-left: 0.5px solid var(--faint);
}

.process-grid article {
  min-height: 350px;
  padding: 30px;
  border-right: 0.5px solid var(--faint);
  border-bottom: 0.5px solid var(--faint);
}

.process-grid span {
  display: block;
  margin-bottom: 78px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
}

.process-grid h3 {
  margin-bottom: 22px;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  text-transform: none;
}

.process-grid p {
  font-size: 16px;
}

.final-section {
  padding-bottom: 46px;
}

.booking-block {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 34px;
  border: 0.5px solid var(--faint);
}

.booking-block p {
  display: grid;
  gap: 4px;
  margin-top: 28px;
  color: var(--text);
  font-size: 22px;
}

.booking-block span {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
}

.booking-block small {
  display: block;
  margin-top: 28px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

/* Name + email lead form (replaces the email address) */
.lead-form {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.lead-form .form-label {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lead-form input:not(.form-hp) {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 0.5px solid rgba(17, 17, 17, 0.28);
  background: #fff;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
}

.lead-form input::placeholder {
  color: var(--muted);
}

.lead-form input:focus {
  outline: none;
  border-color: var(--text);
}

.lead-form button {
  margin-top: 4px;
}

.form-hp {
  display: none;
}

.disclaimer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 0.5px solid var(--faint);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.55;
}

.site-footer {
  padding: 44px 0;
}

.footer-inner {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
}

.footer-logo {
  height: 78px;
  width: auto;
  margin-bottom: 6px;
}

@media (max-width: 920px) {
  .menu-toggle {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    gap: 5px;
    border: 0.5px solid var(--faint);
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }

  .menu-toggle span:not(.sr-only) {
    width: 18px;
    height: 1px;
    display: block;
    background: var(--text);
  }

  .nav-menu {
    position: fixed;
    inset: 76px 0 auto 0;
    display: none;
    min-height: calc(100vh - 76px);
    padding: 26px 20px;
    background: var(--bg);
    border-top: 0.5px solid var(--faint);
  }

  .nav-menu.is-open {
    display: grid;
    align-content: start;
    gap: 18px;
  }

  .nav-menu a:not(.nav-cta) {
    padding: 18px 0;
    border-bottom: 0.5px solid var(--faint);
    font-size: 13px;
  }

  .desktop-only {
    display: none;
  }

  /* Header wraps: the two buttons sit on row 1, the tagline drops to a
     full-width row beneath them (order:1 pushes it after both buttons). */
  .nav-shell {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 14px;
    padding: 12px 0;
  }

  .nav-tagline {
    order: 1;
    flex: 0 0 100%;
    width: 100%;
    white-space: normal;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: var(--text);
  }

  .mobile-first {
    display: inline-flex;
    width: 100%;
    margin-bottom: 14px;
  }

  .section-pad,
  .quote-band,
  .cta-band,
  .final-section {
    padding: 54px 0;
  }

  .hero {
    min-height: auto;
    padding-top: 22px;
    padding-bottom: 28px;
  }

  .hero-inner {
    padding-top: 6px;
    padding-bottom: 24px;
  }

  .stats-grid,
  .storm-grid,
  .cta-inner,
  .dual-grid,
  .process-grid,
  .final-grid,
  .pillar-list,
  .value-grid {
    grid-template-columns: 1fr;
  }

  .stats article {
    min-height: 168px;
    border-right: 0.5px solid var(--faint);
    border-bottom: 0.5px solid var(--faint);
  }

  .cta-inner {
    align-items: start;
    gap: 34px;
  }

  .cta-inner .button {
    width: 100%;
  }

  .dual-grid {
    gap: 74px;
  }

  .process-grid article {
    min-height: auto;
  }

  .process-grid span {
    margin-bottom: 48px;
  }

  .footer-inner {
    display: grid;
  }
}

@media (max-width: 560px) {
  .nav-shell,
  .section-inner {
    width: min(100% - 28px, 1180px);
  }

  .nav-shell {
    min-height: 68px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
  }

  .nav-cta {
    font-size: 12px;
    letter-spacing: 0.02em;
    padding: 0 14px;
    min-height: 42px;
    min-width: 132px;
  }

  .cta-long {
    display: none;
  }

  .cta-short {
    display: inline;
  }

  .nav-menu {
    inset: 68px 0 auto 0;
    min-height: calc(100vh - 68px);
  }

  h1 {
    font-size: 30px;
  }

  h2 {
    font-size: 38px;
  }

  .hero-copy,
  .body-stack p,
  .pillar-list p {
    font-size: 18px;
  }

  .storm-grid div {
    font-size: 23px;
  }

  .booking-block {
    padding: 24px;
  }
}

/* Divorce-settlement ledger ("A Short History of Divided Fortunes") */
.ledger-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 0.5px solid var(--faint);
  border-left: 0.5px solid var(--faint);
}

.ledger-grid article {
  min-height: 232px;
  padding: 34px 30px;
  border-right: 0.5px solid var(--faint);
  border-bottom: 0.5px solid var(--faint);
}

.ledger-grid strong {
  display: block;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 400;
  line-height: 1;
}

.ledger-grid .case-name {
  display: block;
  margin: 16px 0 14px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
}

.ledger-grid p {
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
}

.ledger-note {
  max-width: 760px;
  margin: 40px 0 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
}

@media (max-width: 920px) {
  .ledger-grid {
    grid-template-columns: 1fr;
  }
}

/* Stat strip — centered eyebrow above the 3 columns */
.eyebrow.center {
  text-align: center;
}

/* Case-study cards — "years married" meta line */
.ledger-grid .meta {
  display: block;
  margin: 0 0 16px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  font-style: italic;
}

/* About — headshot + coach name */
.about-headshot {
  display: block;
  width: 150px;
  height: 150px;
  margin-bottom: 22px;
  border-radius: 50%;
  border: 0.5px solid var(--faint);
  object-fit: cover;
  filter: grayscale(1) contrast(1.03);
}

.coach-name {
  margin-bottom: 18px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* "Inside the Engagement" — value/deliverables grid */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 0.5px solid var(--faint);
  border-left: 0.5px solid var(--faint);
}

.value-grid article {
  padding: 34px 30px;
  border-right: 0.5px solid var(--faint);
  border-bottom: 0.5px solid var(--faint);
}

.value-grid h3 {
  margin-bottom: 14px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
}

.value-grid p {
  margin: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

/* Collapse to one column on mobile. Defined AFTER the base rule above so it
   wins the cascade (the shared collapse block earlier in the file is overridden
   by this rule's later source position). */
@media (max-width: 920px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}

/* Founder headshot — center within the centered section (overrides the
   earlier margin-bottom-only rule via later source position). */
.about-headshot {
  margin: 34px auto 22px;
}

/* Note under the How-It-Works grid */
.process-note {
  margin-top: 30px;
}

/* FAQ — single-column list of Q&A with hairline dividers */
.faq-list {
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
  border-top: 0.5px solid var(--faint);
}

.faq-item {
  padding: 26px 4px;
  border-bottom: 0.5px solid var(--faint);
}

.faq-item h3 {
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

.faq-item p {
  margin: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
}