/* ============================================
Session — main.css
Brand tokens: Vellum → Ink neutral ramp
Typography: Reckless (headlines) + Matter (body)
============================================ */

@font-face {
  font-family: "Reckless";
  src: url("/fonts/RecklessStandardS-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Matter";
  src: url("/fonts/Matter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Matter";
  src: url("/fonts/Matter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* .site-header has no fixed height: it's its tallest item plus
  --header-padding above and below. --header-height mirrors that for the
  things positioned against the header (care dropdown, backdrop, mobile
  menu, homepage hero). The tallest item is the 20px logo, or the 24px
  menu icon on small screens. Change either value if they change. */
  --header-padding: 20px;
  --header-content-height: 20px;
  --header-height: calc(var(--header-content-height) + var(--header-padding) * 2);
  --vellum: #F2F0ED;
  --parchment: #CFC9BF;
  --kraft: #A79C8B;
  --graphite: #736959;
  --charcoal: #3F3A31;
  --ink: #1E1B17;
  --content-inset: calc(100px + (100vw - 380px) / 12);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Matter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  background-color: #fff;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow-y: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

a,
a:visited {
  color: inherit;
}

/* ---- Type scale ---- */

.display-large {
  font-family: "Reckless", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 80px;
  line-height: 84px;
}

@media (max-width: 1080px) {
  .display-large {
    font-size: 64px;
    line-height: 48px;
  }
}

@media (max-width: 720px) {
  .display-large {
    font-size: 48px;
    line-height: 52px;
  }
}

.display-medium {
  font-family: "Reckless", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 64px;
  line-height: 68px;
}

@media (max-width: 1080px) {
  .display-medium {
    font-size: 48px;
    line-height: 52px;
  }
}

@media (max-width: 720px) {
  .display-medium {
    font-size: 40px;
    line-height: 44px;
  }
}

.display-small {
  font-family: "Reckless", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 52px;
}

@media (max-width: 1080px) {
  .display-small {
    font-size: 40px;
    line-height: 44px;
  }
}

@media (max-width: 720px) {
  .display-small {
    font-size: 32px;
    line-height: 36px;
  }
}

.headline-large {
  font-family: "Reckless", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 44px;
}

@media (max-width: 1080px) {
  .headline-large {
    font-size: 32px;
    line-height: 36px;
  }
}

@media (max-width: 720px) {
  .headline-large {
    font-size: 28px;
    line-height: 32px;
  }
}

.headline-medium {
  font-family: "Reckless", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 32px;
  line-height: 36px;
}

@media (max-width: 1080px) {
  .headline-medium {
    font-size: 28px;
    line-height: 32px;
  }
}

@media (max-width: 720px) {
  .headline-medium {
    font-size: 24px;
    line-height: 28px;
  }
}

.headline-small {
  font-family: "Reckless", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
}

@media (max-width: 1080px) {
  .headline-small {
    font-size: 20px;
    line-height: 24px;
  }
}

.quote {
  font-family: "Reckless", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
}

@media (max-width: 1080px) {
  .quote {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 720px) {
  .quote {
    font-size: 24px;
    line-height: 32px;
  }
}

.body-large {
  font-family: "Matter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
}

@media (max-width: 720px) {
  .body-large {
    font-size: 18px;
    line-height: 22px;
  }
}

.body-medium {
  font-family: "Matter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.body-medium-medium {
  font-family: "Matter", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.body-small {
  font-family: "Matter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}

.body-small-medium {
  font-family: "Matter", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
}

.caption-large {
  font-family: "Matter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}

.caption-medium {
  font-family: "Matter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 14px;
}

.caption-small {
  font-family: "Matter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 8px;
  line-height: 12px;
}

/* ---- Layout helpers ---- */

/* Base grid: every .wrap is a 12-column grid, full viewport width,
80px side padding, 20px gaps. Sections that need a different
arrangement (flex header, flex footer-bottom) override display
with a more specific selector below — direct children of a .wrap
that aren't explicitly spanned fall back to the browser's grid
auto-placement, so give every direct child a grid-column span. */

.wrap {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 120px;
  padding-inline: 80px;
}

@media (max-width: 1080px) {
  .wrap {
    row-gap: 80px;
    padding-inline: 120px;
  }
}

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

@media (max-width: 720px) {
  .wrap {
    padding-inline: 40px;
  }
}

.section {
  padding-block: 6.5rem;
}

.section-tight {
  padding-block: 4rem;
}

/* Grid utilities — apply directly to any element inside a .wrap to
set how many of the 12 columns it spans and/or which column it
starts on. Combine both on the same element as needed, e.g.
class="col-span-4 col-start-3". Omitting col-start lets the grid
auto-place the element in the next open track. */

/* width: 100% is set explicitly (not relying on implicit grid
stretch) because Safari/WebKit can fail to stretch a grid item
to its full track width when a descendant uses aspect-ratio with
a percentage width — the item collapses toward content size instead. */

.col-span-1 {
  grid-column-end: span 1;
  width: 100%;
}

.col-span-2 {
  grid-column-end: span 2;
  width: 100%;
}

.col-span-3 {
  grid-column-end: span 3;
  width: 100%;
}

.col-span-4 {
  grid-column-end: span 4;
  width: 100%;
}

.col-span-5 {
  grid-column-end: span 5;
  width: 100%;
}

.col-span-6 {
  grid-column-end: span 6;
  width: 100%;
}

.col-span-7 {
  grid-column-end: span 7;
  width: 100%;
}

.col-span-8 {
  grid-column-end: span 8;
  width: 100%;
}

.col-span-9 {
  grid-column-end: span 9;
  width: 100%;
}

.col-span-10 {
  grid-column-end: span 10;
  width: 100%;
}

.col-span-11 {
  grid-column-end: span 11;
  width: 100%;
}

.col-span-12 {
  grid-column-end: span 12;
  width: 100%;
}

.col-start-1 {
  grid-column-start: 1;
}

.col-start-2 {
  grid-column-start: 2;
}

.col-start-3 {
  grid-column-start: 3;
}

.col-start-4 {
  grid-column-start: 4;
}

.col-start-5 {
  grid-column-start: 5;
}

.col-start-6 {
  grid-column-start: 6;
}

.col-start-7 {
  grid-column-start: 7;
}

.col-start-8 {
  grid-column-start: 8;
}

.col-start-9 {
  grid-column-start: 9;
}

.col-start-10 {
  grid-column-start: 10;
}

.col-start-11 {
  grid-column-start: 11;
}

.col-start-12 {
  grid-column-start: 12;
}

@media (max-width: 1080px) {
  /* Below the stack breakpoint .wrap drops to a single column, and
  every item claims the full width — so side-by-side layouts (hero,
  cost-section, etc.) stack vertically. */

  [class*="col-span-"], [class*="col-start-"] {
    grid-column: span 12;
  }
}

/* ---- Header / nav ---- */

.site-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  width: 100%;
  padding-block: var(--header-padding);
  background-color: #fff;
  transition: transform 0.5s ease, background-color 0.3s ease;
  will-change: transform;
  z-index: 9999;
}

/* Homepage only: the hero sits underneath the header (see .home-hero's
negative margin below), so the header starts transparent and only
regains its solid background once scrolled — .is-scrolled is toggled
by header-scroll.js. */
body.home .site-header {
  background-color: transparent;
}

body.home .site-header.is-scrolled {
  background-color: #fff;
}

/* The care dropdown sits directly under the header, so even at scroll
position 0 the header needs to be solid while it's open — otherwise
whatever's behind it (e.g. the homepage hero photos) shows through. */
body.home.care-menu-open .site-header {
  background-color: #fff;
}

.site-header.header-locked {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

@media (max-width: 1080px) {
  .site-header .wrap {
    padding-inline: 40px;
  }
}

body.care-menu-open main {
  padding-top: var(--header-height);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header nav a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-nav-menu {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-toggle {
  display: none;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

.nav-toggle-icon {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.5px;
}

.nav-toggle-line {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line-top {
  transform: translateY(4px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line-bottom {
  transform: translateY(-4px) rotate(-45deg);
}

@media (max-width: 720px) {
  :root {
    --header-content-height: 24px;
  }
}

@media (max-width: 720px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-height));
    padding: 80px;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    pointer-events: none;
  }

  .site-nav-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-nav-menu.is-open ul {
    flex-direction: column;
    align-items: center;
    margin: 0;
  }
}

.site-header nav ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  /* Clear the browser's default list margins, which the old fixed
  height used to hide and would otherwise pad the header out. */
  margin: 0;
}

.site-header nav ul li {
font-family: "Matter", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
line-height: 16px;
list-style: none;
}

@media (max-width: 720px) {
  .site-header nav ul li {
    font-size: 24px;
    line-height: 28px;
  }
}

.site-header nav .caret {
  width: 16px;
  height: 16px;
}

@media (max-width: 720px) {
  .site-header nav .caret {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
  }
}

.site-header nav .caret::after {
  content: "";
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpolyline%20points%3D%2219%208.5%2011.5%2016%204%208.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpolyline%20points%3D%2219%208.5%2011.5%2016%204%208.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  transition: transform 0.25s ease;
}

@media (max-width: 720px) {
  .site-header nav .caret::after {
    width: 20px;
    height: 20px;
  }
}

.nav-dropdown {
  position: relative;
}

@media (max-width: 720px) {
  .nav-dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.nav-dropdown-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font-family: "Matter", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
}

@media (max-width: 720px) {
  .nav-dropdown-toggle {
    font-size: 24px;
    line-height: 28px;
  }
}

.nav-dropdown-toggle[aria-expanded="true"] .caret::after {
  transform: rotate(-180deg);
}

.nav-dropdown .care-mobile-list {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 720px) {
  .nav-dropdown .care-mobile-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
  }

  .nav-dropdown-toggle[aria-expanded="true"] ~ .care-mobile-list {
    max-height: 400px;
    margin-top: 16px;
    opacity: 1;
  }

  .care-mobile-list a {
    font-family: "Matter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--graphite);
    text-decoration: none;
    text-align: center;
  }
}

.nav-dropdown-backdrop {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(30, 27, 23, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 9998;
}

.nav-dropdown-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 720px) {
  .site-nav-menu ul {
    padding: 0;
  }
}


#care-dropdown.nav-dropdown-panel {
  z-index: 9999;
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  align-items: start;
  padding-block: 80px;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  pointer-events: none;
}

#care-dropdown.nav-dropdown-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.care-preview-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.care-preview-list li {
  margin: 0;
  font-family: "Matter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}

.care-preview-list li:first-of-type {
  margin-bottom: 8px;
  font-weight: 500;
}

/* Concentrations and Conditions share one column, stacked. */
.care-preview-column {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Condition links share the hover color but carry no description or
image, so they use their own class and nav.js leaves them alone. */
#care-dropdown .care-preview-link,
#care-dropdown .care-condition-link {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}

#care-dropdown .care-preview-link.is-active,
#care-dropdown .care-preview-link:hover,
#care-dropdown .care-preview-link:focus-visible,
#care-dropdown .care-condition-link:hover,
#care-dropdown .care-condition-link:focus-visible {
  color: var(--graphite);
}

.care-preview-description {
  color: var(--ink);
}

.care-preview-image {
  opacity: 0;
}

.care-preview-image.is-active {
  opacity: 1;
  transition: opacity 0.15s ease;
}

.care-preview-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}

.logo-mark {
  height: 20px;
  width: auto;
  display: block;
  fill: currentColor;
}

/* ---- Buttons ---- */

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: 48px;
  padding: 8px 24px;
  text-decoration: none;
  font-family: "Matter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  border: none;
  border-radius: 999px;
}

/* Charcoal at rest, one step lighter on hover, one step darker when
pressed. White on Graphite still clears 5:1 contrast. */
.btn-solid {
  background: var(--charcoal);
  color: #fff !important;
}

.btn-solid:hover {
  background: var(--graphite);
}

.btn-solid:active {
  background: var(--ink);
}

/* Same steps as .btn-solid: Charcoal at rest, Graphite on hover,
Ink when pressed. */
.btn-outline {
  background: transparent;
  color: var(--charcoal);
  border: 1px solid var(--charcoal);
}

.btn-outline:hover {
  color: var(--graphite);
  border-color: var(--graphite);
}

.btn-outline:active {
  color: var(--ink);
  border-color: var(--ink);
}

.btn-outline-dark {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}

.btn-outline-dark:hover {
  color: var(--parchment);
  border-color: var(--parchment);
}

.btn-outline-dark:active {
  color: var(--kraft);
  border-color: var(--kraft);
}

.btn-medium {
  height: 32px;
  padding: 8px 16px;
  font-family: "Matter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}

.btn-sm {
  height: 32px;
  padding: 8px 16px;
  font-size: 12px;
  line-height: 16px;
}

/* ---- Hero (service page) ---- */

.hero {
  align-items: center;
  padding-block: 160px;
}

@media (max-width: 720px) {
  .hero {
    padding-block: 80px;
  }
}

.clinician-hero {
  align-items: start;
  padding-block: 160px;
}

@media (max-width: 720px) {
  .clinician-hero {
    padding-block: 80px;
  }
}

.violator {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 24px;
  height: 24px;
  border: 1px solid var(--ink);
  border-radius: 12px;
  font-family: "Matter", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
}

/* Plain eyebrow above a section heading: the violator's type without
the pill. Graphite on light backgrounds, Kraft on dark ones. */
.eyebrow {
  display: block;
  margin-bottom: 24px;
  font-family: "Matter", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}

.concentrations-section .eyebrow,
.callout-section-dark .eyebrow {
  color: var(--kraft);
}

.hero-copy h1 {
  margin-bottom: 24px;
}

.hero-copy .btn {
  margin-top: 48px;
}

.bio-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.bio-more-inner {
  min-height: 0;
  overflow: hidden;
}

.bio-more.is-open {
  grid-template-rows: 1fr;
}

.bio-more p {
  margin-top: 16px;
}

.bio-toggle {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  margin-top: 16px;
  color: inherit;
  font-family: "Matter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-decoration: underline;
  cursor: pointer;
}

.bio-toggle[aria-expanded="true"] .caret::after {
  transform: rotate(180deg);
}

.hero-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  object-fit: cover;
}

/* ---- Homepage hero: scattered clinician collage ---- */

.home-hero {
  position: relative;
  margin-top: calc(var(--header-height) * -1);
  /* Photos run past the window's left and right edges. Clip them there
  without clipping vertically, so the top photo can still rise above
  the page and nothing adds a horizontal scrollbar. */
  overflow-x: clip;
}

/* The copy sits at the center of the viewport and each photo is pinned
to the part of the viewport it occupies in the mockup (1680 x 1050 to
the fold): photo 1 to the top edge, photo 2 to the left, photo 3 to the
right, photo 4 to the bottom. --u is one mockup pixel, scaled to
whichever viewport dimension is tighter and capped at 1px, and sets
each photo's size.

Photos 1 and 4 don't scale their position. Each breakpoint sets how
much of them shows (--top-show below the top of the window, --bottom-show
above the fold), so on shorter windows they come in to stay visible
rather than sliding off under the header or below the fold. They also
never come closer than --copy-gap to the copy, which is --copy-half
tall above and below the center. The collage's height runs to the
bottom of photo 4. */
.home-hero-collage {
  --u: min(100vw / 1680, 100vh / 1050, 1px);
  --copy-half: 154px;
  --copy-gap: 40px;
  --top-show: 150px;
  --bottom-show: 134px;
  --photo-1-bottom: min(var(--top-show), 50vh - var(--copy-half) - var(--copy-gap));
  --photo-4-top: max(100vh - var(--bottom-show), 50vh + var(--copy-half) + var(--copy-gap));
  position: relative;
  width: 100%;
  height: calc(var(--photo-4-top) + 316 * var(--u));
  max-width: 1680px;
  margin-inline: auto;
}

.home-hero-copy {
  position: absolute;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  /* An explicit width, not just max-width: an absolutely positioned box
  at left: 50% otherwise shrinks to half the window on narrow screens. */
  width: min(34rem, 100% - 80px);
  text-align: center;
}

.home-hero-copy .btn {
margin-right: auto;
margin-left: auto;
}

.home-hero-copy h1 {
  margin-bottom: 80px;
}

/* The hero line sits between display-small and display-medium in the
mockup (56/60). Desktop only; smaller breakpoints fall back to
display-small's own sizes. */
@media (min-width: 1081px) {
  .home-hero-copy h1 {
    font-size: 56px;
    line-height: 60px;
  }
}

/* --scroll-progress comes from scroll-progress.js: 0 at the top of the
page, 1 once the collage has scrolled fully out of view. Each photo
shrinks toward its own center and fades as it goes. */
.home-hero-photo {
  position: absolute;
  transform: scale(calc(1 - var(--scroll-progress, 0) * 0.5));
  opacity: calc(1 - var(--scroll-progress, 0) * 1.25);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-photo {
    transform: none;
    opacity: 1;
  }
}

.home-hero-photo picture {
  display: block;
  height: 100%;
}

.home-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Widths and edge overflow are in mockup pixels. Positions along an
edge are percentages of the viewport, so each photo stays in the same
relative spot. Each keeps its full aspect ratio; the first three run
past the edges of the window rather than being cropped. */

/* Pinned to the top edge, just right of center. */
.home-hero-photo-1 {
  top: calc(var(--photo-1-bottom) - 316 * var(--u));
  left: calc(50% + 10 * var(--u));
  width: calc(237 * var(--u));
  aspect-ratio: 3 / 4;
}

/* Pinned to the left edge, 26.8% of the way down. */
.home-hero-photo-2 {
  top: 26.8vh;
  left: calc(-48 * var(--u));
  width: calc(365 * var(--u));
  aspect-ratio: 3 / 4;
}

/* Pinned to the right edge, 59% of the way down. */
.home-hero-photo-3 {
  top: 59vh;
  left: calc(100% - 317 * var(--u));
  width: calc(444 * var(--u));
  aspect-ratio: 3 / 2;
}

/* Pinned to the bottom of the viewport, centered. */
.home-hero-photo-4 {
  top: var(--photo-4-top);
  left: calc(50% - 118 * var(--u));
  width: calc(237 * var(--u));
  aspect-ratio: 3 / 4;
}

/* Below 1080px the headline drops to 40px, so the copy block is shorter
and the photos are smaller; each breakpoint sets its own starting point. */
@media (max-width: 1080px) {
  .home-hero-collage {
    --copy-half: 130px;
    --top-show: 128px;
    --bottom-show: 120px;
    min-height: calc(100vh - var(--header-height));
  }
}

/* From 1080px down to 721px, narrower copy keeps clear space between the
headline and photos 2 and 3, which sit close to the sides at these widths.
Below 720px the crossfade hero sets its own width. */
@media (min-width: 721px) and (max-width: 1080px) {
  .home-hero-copy {
    width: min(25rem, 100% - 80px);
  }
}

/* ---- Homepage hero below 720px: full-bleed crossfade ---- */

/* A phone has no room for the collage, so the four photos stack into
one full-window background and dissolve from one to the next. A 40%
black hard-light layer keeps the white headline readable over them.

Timing: each photo holds for 5s with a 1.5s dissolve into the next,
on a 20s loop. The negative first delay means photo 1 is already
showing when the page loads. With reduced motion on, photo 1 stays. */
@media (max-width: 720px) {
  .home-hero-collage {
    height: 100vh;
    min-height: 0;
  }

  .home-hero-collage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000;
    opacity: 0.4;
    mix-blend-mode: hard-light;
    pointer-events: none;
  }

  .home-hero-photo {
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    transform: none;
    opacity: 0;
    animation: home-hero-crossfade 20s linear infinite both;
  }

  .home-hero-photo-1 {
    animation-delay: -1.5s;
  }

  .home-hero-photo-2 {
    animation-delay: 3.5s;
  }

  .home-hero-photo-3 {
    animation-delay: 8.5s;
  }

  .home-hero-photo-4 {
    animation-delay: 13.5s;
  }

  /* Portrait crops of landscape photos lose the most, so photo 3 keeps
  its subject in frame. Adjust per photo once the final images are in. */
  .home-hero-photo-3 img {
    object-position: 65% 50%;
  }

  .home-hero-copy {
    z-index: 2;
    width: min(20rem, 100% - 112px);
    color: #fff;
  }

  .home-hero-copy h1 {
    margin-bottom: 40px;
  }

  /* Reversed solid button: white at rest, then the same one-step-per-state
  pattern as .btn-solid, just from the light end of the ramp. */
  .home-hero-copy .btn-solid {
    background: #fff;
    color: var(--ink) !important;
  }

  .home-hero-copy .btn-solid:hover {
    background: var(--vellum);
  }

  .home-hero-copy .btn-solid:active {
    background: var(--parchment);
  }

  /* The header sits over the photo until the page scrolls (header-scroll.js
  adds .is-scrolled), so the logo and menu icon go white. Once the menu
  opens, the header turns solid white to join the white menu panel below
  it, and the logo and icon go back to Ink. The open state is read from
  the toggle's aria-expanded as well as body.menu-open, so it holds
  whichever one nav.js sets first. */
  body.home:not(.menu-open) .site-header:not(.is-scrolled):not(:has(.nav-toggle[aria-expanded="true"])) .logo,
  body.home:not(.menu-open) .site-header:not(.is-scrolled):not(:has(.nav-toggle[aria-expanded="true"])) .nav-toggle {
    color: #fff;
  }

  body.home.menu-open .site-header,
  body.home .site-header:has(.nav-toggle[aria-expanded="true"]) {
    background-color: #fff;
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .home-hero-photo-1 {
    opacity: 1;
  }
}

@keyframes home-hero-crossfade {
  0% {
    opacity: 0;
  }

  7.5% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  32.5% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* ---- Infinite-loop carousel (reusable) ---- */

.carousel,
.carousel-frame {
  /* Width of an 8-column span within .wrap's 12-column grid:
  80px padding each side, 20px gaps between columns (11 gaps
  across 12 columns, 7 of them inside an 8-column span).
  Also set on .carousel-frame so the overlay controls can
  line up with the edges of the centered slide. */
  --slide-width: calc((100vw - 380px) * 2 / 3 + 140px);
}

.carousel {
  display: flex;
  flex-direction: row;
  gap: 80px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: calc((100vw - var(--slide-width)) / 2);
  scroll-padding-inline: calc((100vw - var(--slide-width)) / 2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  width: var(--slide-width);
  flex-shrink: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.carousel-slide img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.practice-section .carousel-slide img {
  border-radius: 0;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--parchment);
  cursor: pointer;
}

.carousel-dot.is-active {
  background: var(--ink);
}

@media (max-width: 1080px) {
  .carousel,
  .carousel-frame {
    /* .wrap collapses to a single column below this breakpoint, so
    an "8 columns" width no longer means anything — fall back to a
    simple near-full-width slide. */
    --slide-width: calc(100vw - 160px);
  }
}

@media (max-width: 720px) {
  .carousel,
  .carousel-frame {
    --slide-width: calc(100vw - 80px);
  }
}

/* Flush variant: slides sit edge to edge at 16:10, and every slide
except the centered one is washed back. .is-ready and .is-current
come from carousel-controls.js, so nothing fades before it runs. */

.carousel-flush {
  gap: 0;
}

.carousel-frame.is-ready .carousel-flush .carousel-slide {
  opacity: 0.5;
}

.carousel-frame.is-ready .carousel-flush .carousel-slide.is-current {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Each slide carries its own caption, shown only while that slide is
centered. Hidden captions use visibility too, so screen readers skip
them and the looped clones aren't read twice. Fade-in only; the old
caption disappears immediately. */

/* Captions sit in one spot below the carousel, stacked in a single grid
cell, so they dissolve into each other in place while the slides move.
The cell is as tall as the longest caption, so nothing below shifts.
Both directions transition (a true crossfade), and visibility follows
opacity so hidden captions drop out of the accessibility tree. */

.carousel-captions {
  display: grid;
  /* Four grid columns and the three gaps inside them. */
  max-width: calc((100vw - 380px) / 3 + 60px);
  margin: 80px auto 0;
}

.carousel-caption {
  grid-area: 1 / 1;
  color: var(--ink);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}

.carousel-caption.is-current {
  opacity: 1;
  visibility: visible;
}

.carousel-caption strong {
  font-weight: 500;
}

@media (max-width: 1080px) {
  .carousel-captions {
    max-width: none;
    padding-inline: 20px;
  }
}


.carousel-frame {
  position: relative;
}

.carousel-overlay-controls {
  position: absolute;
  /* Cover the image only, not the captions beneath it. */
  inset: 0 0 auto 0;
  height: calc(var(--slide-width) * 2 / 3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: calc((100vw - var(--slide-width)) / 2 + 40px);
  pointer-events: none;
}

.carousel-overlay-controls button {
  pointer-events: auto;
}

@media (max-width: 720px) {
  .carousel-overlay-controls {
    padding-inline: calc((100vw - var(--slide-width)) / 2 + 16px);
  }
}

/* ---- Carousel prev/next buttons (reusable) ---- */

.carousel-controls {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 80px;
}

/* carousel-controls.js adds .is-scrollable to the wrapper only while the
track overflows, so the buttons disappear when everything already fits. */
[data-carousel]:not(.is-scrollable) .carousel-controls {
  display: none;
}

/* The section's 40px row gap already sits above the buttons. */
.callout-section-light .carousel-controls,
.callout-section-plain .carousel-controls,
.callout-section-dark .carousel-controls {
  margin-top: 40px;
}

.carousel-controls button,
.carousel-overlay-controls button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--parchment);
  color: var(--ink);
  cursor: pointer;
}

.carousel-controls button:hover:not(:disabled) {
  background: var(--kraft);
}

/* Over a photo the buttons are translucent white, flipping to Ink with
white arrows on hover. The arrows use currentColor, so setting color
is enough to recolor them. */
.carousel-overlay-controls button {
  background: rgba(255, 255, 255, 0.8);
}

.carousel-overlay-controls button:hover:not(:disabled) {
  background: var(--ink);
  color: #fff;
}

.carousel-controls button:disabled,
.carousel-overlay-controls button:disabled {
  opacity: 0.4;
  cursor: default;
}

.carousel-controls button svg,
.carousel-overlay-controls button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Full-width band image ---- */

/* A 16:9 band cut from a taller photo. To keep a face in frame, set
--focus-y on the section to how far down the photo the face sits, as a
fraction (0.35 is 35% from the top), e.g. style="--focus-y: 0.35".
--focus-anchor is where in the band the face lands, as a fraction from
the top (0.5 is the middle). parallax.js reads both, works out the crop
from the photo's real size, and sets --focus-position as a plain
percentage. (Safari won't resolve the same math written in CSS, so the
script does it.) Without --focus-y, or without the script, the photo
centers. */
.full-width-image {
  --focus-anchor: 0.5;
}

/* The photo is positioned absolutely inside the 16:9 frame. A plain
percentage height on an image inside an aspect-ratio box can be ignored
in Safari, which then shows the photo at its full natural height. */
.full-width-image picture {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.full-width-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--focus-position, 50%);
  border-radius: 0;
}

/* Parallax: the photo is a quarter taller than its frame and drifts
down by that quarter as the band scrolls through the window, so it moves
slower than the page. parallax.js sets --parallax-shift: the full shift
up with the page at the top, a tenth of the photo's height (the face at
--focus-anchor) as the whole band comes into view, and none as it leaves.
Before the script runs, the photo rests at that middle point. Anyone
with reduced motion on gets the still crop above. */
@media (prefers-reduced-motion: no-preference) {
  .full-width-image img {
    height: 125%;
    transform: translateY(var(--parallax-shift, -10%));
    will-change: transform;
  }
}

/* ---- Homepage: intro copy ---- */

.intro-section {
  padding-block: 240px;
}

@media (max-width: 720px) {
  .intro-section {
    padding-block: 80px;
  }
}

.intro-section h2 {
  margin-bottom: 24px;
}

.intro-section .btn {
  margin-top: 48px;
}

/* ---- Homepage: care cards ---- */

.care-section {
  padding-block: 160px;
}

@media (max-width: 720px) {
  .care-section {
    padding-block: 80px;
  }
}

.care-section-intro {
  text-align: center;
}

.card-carousel {
  margin-top: 120px;
}

.card-carousel-track {
  /* Two and a half grid columns plus the gaps inside them. */
  --card-width: calc((100vw - 380px) * 5 / 24 + 30px);
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding-inline: var(--content-inset);
  scroll-padding-inline: var(--content-inset);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.card-carousel-track::-webkit-scrollbar {
  display: none;
}

/* Ways to work with us: when the cards don't fill the row, they sit
centered. "safe" falls back to start once the track overflows, so a
full carousel still scrolls from the first card. */
.ways-section .card-carousel-track {
  justify-content: safe center;
}

@media (max-width: 1080px) {
  .card-carousel-track {
    --card-width: 300px;
    padding-inline: 120px;
    scroll-padding-inline: 120px;
  }
}

@media (max-width: 720px) {
  .card-carousel-track {
    --card-width: 75vw;
    padding-inline: 40px;
    scroll-padding-inline: 40px;
  }
}

.care-card {
  flex: 0 0 var(--card-width);
  scroll-snap-align: start;
  color: var(--ink);
  text-decoration: none;
}

.care-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 20px;
}

.care-card-copy {
  padding: 24px 40px 0 10px;
}

.care-card-description {
  font-family: "Matter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--charcoal);
}

/* ---- Our Practice: hero ---- */

/* The headline spans five columns and the paragraph four of them. */
@media (min-width: 1081px) {
  .practice-hero .hero-copy p {
    max-width: calc((100% - 80px) * 4 / 5 + 60px);
  }
}

/* ---- Our Practice: kinds of care ---- */

/* An image above a row of tabs and a description below, both switched
by tabs.js. The images stack in one grid cell and so do the
descriptions, so each set crossfades in place and the cell is as tall as
its tallest item. Hidden items use visibility too, so screen readers
skip them. */

.care-groups-section {
  row-gap: 80px;
  padding-block: 160px;
}

@media (max-width: 720px) {
  .care-groups-section {
    padding-block: 80px;
  }
}

.care-groups-images,
.care-groups-panels {
  display: grid;
}

.care-groups-images > *,
.care-groups-panels > * {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}

.care-groups-images > .is-current,
.care-groups-panels > .is-current {
  opacity: 1;
  visibility: visible;
}

.care-groups-images img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 20px;
}

.care-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 80px;
}

/* Unselected tabs sit on Vellum, one step darker on hover. The selected
tab takes .btn-solid's Charcoal. */
.care-tabs .btn {
  background: var(--vellum);
  color: var(--ink);
  cursor: pointer;
}

.care-tabs .btn:hover {
  background: var(--parchment);
}

.care-tabs .btn[aria-selected="true"] {
  background: var(--charcoal);
  color: #fff;
}

/* Four of the eight columns, centered. */
.care-groups-panels {
  max-width: calc((100% - 140px) / 2 + 60px);
  margin: 40px auto 0;
  text-align: center;
}

@media (max-width: 1080px) {
  .care-groups-panels {
    max-width: none;
  }
}

.care-groups-panels a {
  text-underline-offset: 3px;
}

.care-groups-panels a:hover {
  color: var(--graphite);
}

/* ---- Homepage: concentrations ---- */

/* Reuses the Our Practice tabs layout (.care-groups-section), reversed onto
Ink. Unselected tabs sit on Charcoal, one step lighter on hover; the
selected tab flips to white. */

.concentrations-section {
  background: var(--ink);
  color: #fff;
}

.concentrations-section .violator {
  border-color: #fff;
  color: #fff;
}

.concentrations-section .care-groups-images img {
  aspect-ratio: 3 / 2;
}

.concentrations-section .care-tabs .btn {
  background: var(--charcoal);
  color: #fff;
}

.concentrations-section .care-tabs .btn:hover {
  background: var(--graphite);
}

.concentrations-section .care-tabs .btn[aria-selected="true"] {
  background: #fff;
  color: var(--ink);
}

.concentrations-section a:focus-visible,
.concentrations-section button:focus-visible {
  outline-color: #fff;
}

.concentrations-link {
  margin-top: 80px;
}

.concentrations-link a:hover {
  color: var(--parchment);
}

/* ---- Standalone link ---- */

/* A link on its own line ("Learn about…"), not underlined, with a
filled arrow-in-a-circle at the end. The icon is filled with
currentColor, so it always matches the link, hover included. */
.standalone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.standalone-link svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ---- Our Practice: a practice, not a platform ---- */

.practice-section {
  padding-block: 160px;
  background: var(--vellum);
}

@media (max-width: 720px) {
  .practice-section {
    padding-block: 80px;
  }
}

.practice-section h2 {
  margin-bottom: 24px;
}

.practice-section .carousel-frame {
  margin-top: 120px;
}

/* ---- Homepage: what to expect ---- */

.expect-section {
  row-gap: 80px;
  padding-block: 160px;
  background: var(--vellum);
}

.expect-section .three-col-row {
  display: flex;
  flex-direction: row;
  gap: 80px;
}

.expect-section .three-col-row > div {
  flex: 1;
}

@media (max-width: 720px) {
  .expect-section .three-col-row {
    flex-direction: column;
    gap: 40px;
  }
}

.expect-section h3 {
  margin-bottom: 4px;
}

/* ---- Clinician page: logistics row ---- */

.clinician-logistics {
  row-gap: 0;
  padding: 0 160px 160px 160px;
}

@media (max-width: 1080px) {
  .clinician-logistics {
    row-gap: 40px;
    padding: 0 120px 160px 120px;
  }
}

@media (max-width: 720px) {
  .clinician-logistics {
    padding: 0 40px 160px 40px;
  }
}

.clinician-logistics a:link {
  text-decoration: none;
}

.clinician-logistics a:hover {
  text-decoration: underline;
}

.clinician-logistics-keyline {
  height: 1px;
  background: var(--parchment);
  margin-bottom: 48px;
}

.clinician-logistics-col h3 {
  margin-bottom: 2px;
}

.clinician-logistics-col p {
  color: var(--ink);
}

/* ---- Dark triptych section: "The shape of it" ---- */

.callout-section-dark {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  padding-block: 160px;
  padding-inline: var(--content-inset);
  background: var(--ink);
  color: #fff;
}

@media (max-width: 720px) {
  .callout-section-dark {
    padding-block: 80px;
    padding-inline: 40px;
  }
}

.callout-section-light,
.callout-section-plain {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  padding-block: 160px;
  padding-inline: var(--content-inset);
  color: var(--ink);
}

.callout-section-light {
  background: var(--vellum);
}

@media (max-width: 720px) {
  .callout-section-light,
  .callout-section-plain {
    padding-block: 80px;
    padding-inline: 40px;
  }
}


.the-shape-of-it-carousel,
.clinician-grid {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.the-shape-of-it-carousel::-webkit-scrollbar,
.clinician-grid::-webkit-scrollbar {
  display: none;
}

.the-shape-of-it-carousel {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: auto;
  min-width: 0;
  margin-inline: calc(var(--content-inset) * -1);
  padding-inline: var(--content-inset);
  scroll-padding-inline: var(--content-inset);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.triptych-card {
  width: 622px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

@media (max-width: 1080px) {
  .triptych-card {
    width: 100%;
  }
}

.triptych-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 20px;
}

.triptych-card-copy {
  margin-top: 32px;
  padding-right: 80px;
}

/* ---- Section backgrounds ---- */

.section-vellum {
  background: var(--vellum);
}

/* ---- Service page: centered hero ---- */

/* Eyebrow, sentence headline, short paragraph and button, centered over
the full-bleed image that follows (.full-width-image). */
.hero-centered {
  padding-block: 160px;
  text-align: center;
}

@media (max-width: 720px) {
  .hero-centered {
    padding-block: 80px;
  }
}

.hero-centered-copy h1 {
  margin-bottom: 24px;
}

/* Four of the six columns, centered. */
.hero-centered-copy p {
  max-width: calc((100% - 100px) / 6 * 4 + 60px);
  margin-inline: auto;
}

@media (max-width: 1080px) {
  .hero-centered-copy p {
    max-width: none;
  }
}

.hero-centered-copy .btn {
  margin: 48px auto 0;
}

/* ---- Service page: offerings ---- */

/* The offerings sit in a Vellum panel that spans ten columns, with the
section's centered heading inside it and 120px above the cards. The
heading spans four columns, and the track is inset one column, so two
cards fill the middle eight and a third peeks in from the right. */
/* No bottom padding: the next section's top padding sets the gap. */
.offerings-section {
  padding-top: 160px;
}

@media (max-width: 720px) {
  .offerings-section {
    padding-top: 80px;
  }
}

.offerings-intro {
  max-width: calc((100vw - 380px) / 3 + 60px);
  margin: 0 auto 120px;
  text-align: center;
}

@media (max-width: 1080px) {
  .offerings-intro {
    max-width: none;
    padding-inline: 40px;
  }
}

@media (max-width: 720px) {
  .offerings-intro {
    margin-bottom: 80px;
  }
}

.offerings-panel {
  padding-block: 120px;
  overflow: hidden;
  border-radius: 40px;
  background: var(--vellum);
}

@media (max-width: 720px) {
  .offerings-panel {
    padding-block: 80px;
  }
}

.offerings-track {
  --offering-inset: calc((100vw - 380px) / 12 + 20px);
  display: flex;
  justify-content: safe center;
  gap: 20px;
  padding-inline: var(--offering-inset);
  scroll-padding-inline: var(--offering-inset);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.offerings-track::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1080px) {
  .offerings-track {
    --offering-inset: 40px;
  }
}

@media (max-width: 720px) {
  .offerings-track {
    --offering-inset: 40px;
  }
}

/* Four grid columns and the three gaps inside them. */
.offering-card {
  flex: 0 0 calc((100vw - 380px) / 3 + 60px);
  scroll-snap-align: start;
}

@media (max-width: 1080px) {
  .offering-card {
    flex-basis: 300px;
  }
}

@media (max-width: 720px) {
  .offering-card {
    flex-basis: 64vw;
  }
}

.offering-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 20px;
}

.offering-card-copy {
  padding: 24px 40px 0 10px;
}

.offering-btn {
  margin-top: 24px;
  background: var(--parchment);
  color: var(--ink);
}

.offering-btn:hover {
  background: var(--kraft);
}

/* ---- Service page: offering list ---- */

/* Used on Assessments, Intensives and Workshops. A centered grid of
offerings across the middle eight columns, three to a row, two below
1080px and one at 720px. Each offering spans three rows of its row
group through subgrid, so titles, descriptions and links line up across
a row even when one title or description runs longer. A keyline across
ten columns closes the section, 160px below the last row (80px below
1080px). */
/* The space between rows of offerings is padding on every offering past
the first row rather than a row gap, since a row gap on the list would
also open up inside each offering. */
.offering-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.offering-item:nth-child(n+4) {
  padding-top: 80px;
}

@media (max-width: 1080px) {
  .offering-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offering-item:nth-child(n+3) {
    padding-top: 80px;
  }
}

@media (max-width: 720px) {
  .offering-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .offering-item:nth-child(n+2) {
    padding-top: 48px;
  }
}

/* A lone offering sits in the middle column rather than the first. */
@media (min-width: 1081px) {
  .offering-item:only-child {
    grid-column: 2;
  }
}

.offering-item {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  justify-items: center;
  padding-inline: 40px;
  text-align: center;
}

@media (max-width: 720px) {
  .offering-item {
    padding-inline: 0;
  }
}

.offering-item-title {
  font-family: "Matter", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
}

.offering-item-description {
  margin-top: 8px;
}

.offering-item .offering-btn,
.offering-item .text-link {
  align-self: start;
  margin-top: 12px;
}

.offering-item .text-link {
  font-size: 14px;
  line-height: 22px;
}

.offering-item .text-link svg {
  width: 14px;
  height: 14px;
}

.offerings-keyline {
  height: 1px;
  margin-top: 40px;
  background: rgba(0, 0, 0, 0.15);
}

@media (max-width: 1080px) {
  .offerings-keyline {
    margin-top: 0;
  }
}

/* A text link with a filled circular arrow, for offerings that have a
page of their own. The arrow takes the link's color. */
.text-link {
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}

.text-link:hover {
  color: var(--graphite);
}

.text-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ---- Service page: clinicians ---- */

/* Same cards and track as the homepage service carousel, centered when
the row isn't full. The picture holds the 3:4 shape and a Vellum fill,
so a card without a photo yet still reads as a card. */
.clinicians-section .care-section-intro p {
  max-width: calc((100% - 100px) / 6 * 4 + 60px);
  margin: 24px auto 0;
}

@media (max-width: 1080px) {
  .clinicians-section .care-section-intro p {
    max-width: none;
  }
}

.clinicians-section .card-carousel-track {
  justify-content: safe center;
}

.clinicians-section .care-card picture {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 20px;
  background: var(--vellum);
}

.clinicians-section .care-card img {
  height: 100%;
}

/* ---- Footer after a dark section ---- */

/* When a page ends on the Ink concentrations band, the footer flips to
white so the two dark blocks don't run together. */
main:has(> .concentrations-section:last-child) ~ .site-footer {
  background: #fff;
  color: var(--ink);
}

main:has(> .concentrations-section:last-child) ~ .site-footer .footer-top h4,
main:has(> .concentrations-section:last-child) ~ .site-footer .footer-top p,
main:has(> .concentrations-section:last-child) ~ .site-footer .footer-top address {
  color: var(--ink);
}

main:has(> .concentrations-section:last-child) ~ .site-footer .footer-top a:hover,
main:has(> .concentrations-section:last-child) ~ .site-footer .footer-legal a:hover {
  color: var(--graphite);
}

main:has(> .concentrations-section:last-child) ~ .site-footer .footer-bottom::before {
  border-top-color: var(--parchment);
}

/* ---- What to Expect: frequently asked ---- */

/* A centered intro, then one question per row: the question in Reckless
across three columns, a short answer in Matter across five, with a
keyline between rows. Rows stack below 1080px. */
.faq-section {
  padding-block: 160px;
}

@media (max-width: 720px) {
  .faq-section {
    padding-block: 80px;
  }
}

.faq-intro {
  text-align: center;
}

.faq-list {
  margin-top: 120px;
}

@media (max-width: 720px) {
  .faq-list {
    margin-top: 80px;
  }
}

.faq-item {
  row-gap: 80px;
}

.faq-item + .faq-item {
  margin-top: 80px;
}

@media (max-width: 1080px) {
  .faq-item {
    row-gap: 24px;
  }

  .faq-item + .faq-item {
    margin-top: 48px;
  }

  .faq-keyline {
    margin-bottom: 24px;
  }
}

.faq-keyline {
  height: 1px;
  background: var(--parchment);
}

.faq-answer p + p {
  margin-top: 12px;
}

/* ---- Offering page: details ---- */

/* Same rows as the FAQ: a heading in Reckless across three columns,
copy in Matter across five, keylines between. The hero above sets the
top spacing. Rows stack below 1080px. */
.detail-section {
  padding-bottom: 160px;
}

@media (max-width: 720px) {
  .detail-section {
    padding-bottom: 80px;
  }
}

.detail-item {
  row-gap: 80px;
}

.detail-item + .detail-item {
  margin-top: 80px;
}

@media (max-width: 1080px) {
  .detail-item {
    row-gap: 24px;
  }

  .detail-item + .detail-item {
    margin-top: 48px;
  }

  .detail-keyline {
    margin-bottom: 24px;
  }
}

.detail-keyline {
  height: 1px;
  background: var(--parchment);
}

.detail-body > * + * {
  margin-top: 16px;
}

.detail-body ul,
.detail-body ol {
  padding-left: 24px;
}

.detail-body ul {
  list-style: disc;
}

.detail-body ol {
  list-style: decimal;
}

.detail-body li + li {
  margin-top: 8px;
}

.detail-body strong {
  font-weight: 500;
}

.detail-body a {
  color: inherit;
  text-underline-offset: 3px;
}

.detail-body a:hover {
  color: var(--graphite);
}

/* ---- Offering page: closing ---- */

/* A centered ask in a Vellum panel across the middle eight columns, with
its content inset two columns on each side to measure the middle four. */
.closing-section {
  padding-bottom: 160px;
}

@media (max-width: 720px) {
  .closing-section {
    padding-bottom: 80px;
  }
}

.closing-panel {
  padding: 120px calc((100vw - 380px) / 6 + 40px);
  border-radius: 40px;
  background: var(--vellum);
  text-align: center;
}

@media (max-width: 1080px) {
  .closing-panel {
    padding-inline: 40px;
  }
}

@media (max-width: 720px) {
  .closing-panel {
    padding-block: 80px;
  }
}

.closing-panel p {
  margin-top: 16px;
}

.closing-panel .btn {
  margin: 48px auto 0;
}

.expect-closing {
  padding-bottom: 160px;
  text-align: center;
}

@media (max-width: 720px) {
  .expect-closing {
    padding-bottom: 80px;
  }
}

.expect-closing h2 {
  margin-bottom: 24px;
}

.expect-closing .btn {
  margin: 48px auto 0;
}

/* ---- Meet the clinicians ---- */

.clinicians-intro {
  text-align: center;
  padding-block: 160px;
}

.clinicians-intro .wrap {
  display: block;
  max-width: 42rem;
  margin-inline: auto;
  padding-inline: 24px;
}

.clinicians-intro h2 {
  margin-bottom: 24px;
}

.clinicians-intro .btn {
  margin-top: 48px;
  margin-right: auto;
  margin-left: auto;
}

.clinician-grid {
  display: flex;
  flex-direction: row;
  justify-content: safe center;
  gap: 20px;
  width: auto;
  min-width: 0;
  margin-inline: calc(var(--content-inset) * -1);
  padding-inline: var(--content-inset);
  scroll-padding-inline: var(--content-inset);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.clinician-grid a {
  color: var(--ink);
  text-decoration: none;
}

.clinician-card {
  width: 365px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* The picture holds the 3:4 shape and a Vellum fill, so a card whose
photo hasn't been added yet still reads as a blank card. A missing img
drops its aspect ratio on its own, which is why the shape lives here. */
.clinician-card picture {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 20px;
  background: var(--vellum);
}

.clinician-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Name and credential, then where they see people. Same inset as the
care cards on the homepage. */
.clinician-card-copy {
  padding: 24px 40px 0 10px;
  text-align: left;
}

.clinician-card-copy p {
  margin-top: 12px;
  color: var(--graphite);
}

/* ---- Our Clinicians: full directory grid ---- */

.directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 80px;
  padding-bottom: 160px;
}

@media (max-width: 1080px) {
  .directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.directory-card {
  position: relative;
  display: block;
}

.directory-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* ---- What it costs ---- */

.cost-section {
  padding-block: 160px;
  background: var(--vellum);
}

.cost-section h2 {
  margin-bottom: 24px;
}

.cost-section .btn {
  margin-top: 48px;
}

.cost-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---- Contact: alternating location blocks ---- */

.contact-location {
  align-items: flex-start;
  padding-block: 160px;
}

@media (max-width: 720px) {
  .contact-location {
    padding-block: 80px;
  }
}

.contact-location-info h2 {
  margin-bottom: 24px;
}

.contact-location-info p {
  margin-bottom: 8px;
}

.contact-location-info a {
  text-decoration: none;
}

.contact-location-info a:hover {
  text-decoration: underline;
}

.contact-location-info address {
  margin-bottom: 24px;
  font-style: normal;
  font-family: "Matter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: inherit;
}

.contact-location-directions {
  display: flex;
  gap: 12px;
  margin-top: 48px;
}

.contact-location-image img {
  width: 100%;
  object-fit: cover;
}

.contact-location-image-wide img {
  aspect-ratio: 16 / 10;
}

.contact-location-image-tall img {
  aspect-ratio: 3 / 4;
}

/* ---- Service body sections (What it looks like / Who it's for / How it starts) ---- */

.service-section {
  padding-block: 2.5rem;
  border-top: 1px solid var(--parchment);
}

.service-section h2 {
  color: var(--graphite);
  font-family: "Matter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 1rem;
}

/* ---- Legal pages: privacy notice and Good Faith Estimate ---- */

/* A short hero, then the text in one six-column measure. Section
headings in Reckless, everything else in Matter. */
.legal-hero {
  padding-bottom: 80px;
}

.legal-hero .hero-copy p {
  margin-top: 24px;
}

.legal-section {
  padding-bottom: 160px;
}

@media (max-width: 720px) {
  .legal-hero {
    padding-bottom: 40px;
  }

  .legal-section {
    padding-bottom: 80px;
  }
}

.legal-body h2 {
  margin-top: 64px;
  margin-bottom: 24px;
}

.legal-body > :first-child {
  margin-top: 0;
}

.legal-body p + p,
.legal-body p + ul,
.legal-body p + ol,
.legal-body ul + p,
.legal-body ol + p {
  margin-top: 16px;
}

.legal-body ul,
.legal-body ol {
  margin-block: 0;
  padding-left: 24px;
}

.legal-body li + li {
  margin-top: 12px;
}

.legal-body li ul {
  margin-top: 12px;
}

.legal-body strong {
  font-weight: 500;
}

/* ---- Footer ---- */

.site-footer {
  background: var(--ink);
  color: #fff;
}

.footer-top {
  padding-block: 40px 32px;
}

.footer-top h4 {
  margin-bottom: 8px;
  font-family: "Matter", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
}

.footer-top address,
.footer-top p {
  margin-bottom: 8px;
  font-family: "Matter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
}

.footer-top ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-top li {
  margin-bottom: 8px;
  font-family: "Matter", sans-serif;
  font-size: 12px;
  line-height: 16px;
}

.footer-top a {
  text-decoration: none;
}

.footer-top a:hover {
  color: var(--vellum);
}

/* Both offices share one column, Park Slope above Grand Central. */
.footer-location + .footer-location {
  margin-top: 24px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  padding-block: 20px 40px;
  font-family: "Matter", sans-serif;
  font-size: 12px;
  line-height: 16px;
}

/* The keyline stops at the page margins, matching the grid's padding
at each breakpoint. */
.footer-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 80px;
  right: 80px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 1080px) {
  .footer-bottom::before {
    left: 120px;
    right: 120px;
  }
}

@media (max-width: 720px) {
  .footer-bottom::before {
    left: 40px;
    right: 40px;
  }
}

/* Legal links sit on the right, divided by a thin bar. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-legal li + li::before {
  content: "|";
  margin-inline: 8px;
}

.footer-legal a {
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--vellum);
}

@media (max-width: 720px) {
  .footer-bottom {
    flex-direction: column;
  }
}

/* ---- Accessibility ---- */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation: none !important;
    transition: none !important;
  }
}