/* Final presentation layer. Source baseline: supplied November 14 v3 ZIP.
   Charcoal, white, neutral gray and one restrained blue. */
html body {
  --surface-white: #ffffff;
  --surface-gray: #ededed;
  --surface-dark: #1c1c1e;
  --ink-accent: #34668c;
  --brand-blue: var(--ink-accent);
  --rule: rgba(28, 28, 30, .16);
  --brand-blue-wash: var(--surface-gray);
  --brand-shading: none;
  --brand-gray: var(--surface-gray);
  --brand-white: var(--surface-white);
  --brand-paper: var(--surface-white);
  --gray: var(--surface-gray);
  --paper: var(--surface-white);
  background: var(--surface-white);
}

/* White reading surfaces, with gray reserved for meaningful section changes. */
html body main :is(.premise.premise-entry, .detail-opening, .service-ledger,
  .editorial-sections, .representative-experience, .about-credentials,
  .connect-grid, .legal-copy, .podcast-cover-section) {
  background: var(--surface-white) !important;
}
html body main :is(.experience-rail, .home-pathways, .brand-slate-panel) {
  background: var(--surface-gray) !important;
  background-image: none !important;
}
html body main .experience-rail {
  border-top: 2px solid var(--ink-accent) !important;
  border-bottom: 1px solid var(--rule) !important;
}
/* A short factual proof line, not a second headline or a client-logo wall. */
html body main .experience-rail .experience-editorial p.experience-proof-line {
  margin-top: 1rem !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.65 !important;
  color: #3b3b3b !important;
}
/* Text-only routing/editorial headers need less room than portrait sections. */
html body main section.page-intro.intro-compact {
  height: auto !important;
  min-height: 0 !important;
  padding-top: clamp(40px, 4.5vw, 64px) !important;
  padding-bottom: clamp(40px, 4.5vw, 64px) !important;
}
html body main .representative-experience article {
  background: var(--surface-white) !important;
}

/* Blue indicates emphasis and action on light surfaces, not entire backgrounds. */
html body main :is(.experience-about-link, .experience-about-link span,
  .home-pathways-grid h3, .home-pathways-grid a, .eyebrow,
  .scope-note > p:first-child) {
  color: var(--ink-accent) !important;
}
html body main .experience-about-link { color: var(--ink-accent) !important; }

/* On photographs and charcoal, labels stay light. The small graphic remains blue. */
html body main section.page-intro p.eyebrow,
html body main section.practice-settings p.eyebrow {
  color: #f4f4f4 !important;
}
html body main section.practice-settings {
  background: var(--surface-dark) !important;
}

/* The italic provides the hero emphasis. Preserve the photographic layers. */
html body main section.portrait-trial .trial-thesis h1 em,
html body main section.portrait-trial .trial-thesis h1 em.marker-underline {
  background-image: none !important;
  padding-bottom: 0 !important;
  color: #f4f4f4 !important;
  -webkit-text-fill-color: #f4f4f4 !important;
  opacity: 1 !important;
}

html body main .premise-story .work-entry-lead h2 {
  font-size: clamp(2rem, 2.6vw, 2.6rem) !important;
  line-height: 1.12 !important;
  max-width: 38rem;
}
html body main .premise-story .work-entry-lead h2 em {
  font-style: italic;
  color: var(--ink-accent);
}
html body main :is(.recognition-lines p, .home-pathways-grid p,
  .premise-story .work-entry-lead p) {
  font-size: 1.0625rem !important;
  color: #2e2e2e !important;
  line-height: 1.65 !important;
}

/* Preserve the open typographic service columns rather than restoring boxes. */
html body main .home-pathways-grid {
  border: 0 !important;
  gap: clamp(2rem, 4vw, 4rem);
}
html body main .home-pathways-grid article {
  background: transparent !important;
  border: 0 !important;
  border-top: 2px solid var(--ink-accent) !important;
  padding: 1.75rem 0 0 !important;
  min-height: 0 !important;
}
html body main .home-pathways-grid article:hover { background: transparent !important; }
html body main .home-pathways-grid a {
  border-bottom: 1px solid currentColor !important;
  width: max-content !important;
  max-width: 100%;
  justify-content: flex-start !important;
}
html body main .home-pathways-heading { margin-bottom: 2.5rem; }
html body main .home-pathways-heading h2 { color: var(--surface-dark) !important; }

/* Keep the complete disclosure visible, separate from the service-card pitches. */
html body main .home-clinical-disclosure {
  border-top: 1px solid var(--rule);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
}
html body main :is(p.clinical-note, .home-clinical-disclosure p.clinical-note) {
  font-size: .875rem !important;
  line-height: 1.6 !important;
  color: #454545 !important;
  margin: 0 !important;
  max-width: 70rem;
}
html body main .service-ledger p.clinical-note { margin: .75rem 0 0 !important; }

/* A quiet, distinct ending, using the same charcoal as the portrait ground. */
html body main :is(.closing, .inquiry-band) {
  background: var(--surface-dark) !important;
  background-image: none !important;
  color: #f4f4f4 !important;
  border-top: 1px solid #ffffff26 !important;
}
html body main :is(.closing, .inquiry-band) :is(h2, p, span) {
  color: #f4f4f4 !important;
}
html body main section.inquiry-band > div > p:first-child {
  color: #f4f4f4 !important;
}
html body main :is(.circle-link, .closing .circle-link, .inquiry-band .circle-link) {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: .95rem 1.5rem !important;
  border: 1px solid #d6d6d6 !important;
  color: #f4f4f4 !important;
  background: transparent !important;
  letter-spacing: .1em !important;
  font-size: .8125rem !important;
  min-height: 44px;
}
html body main :is(.circle-link, .closing .circle-link, .inquiry-band .circle-link):hover {
  background: #f4f4f4 !important;
  color: var(--surface-dark) !important;
}
html body main :is(.closing, .inquiry-band) .circle-link:hover span {
  color: var(--surface-dark) !important;
}
html body main :is(.closing, .inquiry-band, .page-intro) :is(a, button, summary):focus-visible {
  outline-color: #f4f4f4 !important;
}
html body .site-header :is(a, summary):focus-visible,
html body .footer-simple a:focus-visible {
  outline: 2px solid #f4f4f4 !important;
  outline-offset: 4px !important;
}
html body .footer-simple {
  background: var(--surface-dark) !important;
  border-top: 1px solid #ffffff26 !important;
}
html body .footer-simple .footer-clinical {
  font-size: 14px !important;
  color: #bdbdbd !important;
}

@media (max-width: 700px) {
  html body main .portrait-trial .trial-service-line {
    flex-direction: column !important;
    gap: .35rem !important;
  }
  html body main .experience-rail { text-align: left !important; align-items: flex-start !important; }
  html body main .experience-rail .experience-editorial p { text-align: left !important; }
  html body main .experience-rail .experience-about-link { align-self: flex-start; }
  html body main .home-pathways-grid { grid-template-columns: 1fr !important; }
}