/* ===========================================================
   Afresh Vitality
   Layout language adapted from mocharymethod.com:
   warm ivory canvas, editorial type hierarchy, hairline rules,
   credibility-first section order.
   =========================================================== */

/* ---------- tokens ---------- */
:root {
  /* Four anchors, nothing else: deep forest, muted sage, warm ivory, charcoal.
     Everything below is derived from them so no component invents its own hue. */
  --forest:       #234536;
  --sage:         #9aa88e;
  --sage-lt:      #a0ae94;   /* sage that clears 4.5:1 on forest */
  --sage-pale:    #e6ebdc;   /* full-width wash; --ink-2 and darker clear 4.5:1 */
  --ivory:        #f7f4ed;
  --stone:        #eae7df;   /* warm field behind the cutout portrait */
  --charcoal:     #252724;

  --page:         var(--ivory);
  --sand:         #efeade;   /* one step down from ivory, for banded sections */
  --white:        #fffdf8;

  --green:        var(--forest);
  --green-deep:   var(--forest);
  --green-mid:    #2f5a45;   /* hover only */
  --green-soft:   #d9ddd0;
  --green-tint:   #eceade;

  --ink:          var(--charcoal);
  --ink-2:        #4c4f48;
  --ink-3:        #666c60;   /* clears 4.5:1 on both ivory and sand */

  --line:         #e0dacb;
  --line-field:   #ccd3c4;   /* muted gray-green; the only border a field gets */

  /* Same pairing as mocharymethod.com: Inter for body, Gambetta for titles. */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Gambetta", "Times New Roman", Georgia, serif;

  --wrap: 1240px;
  --wrap-narrow: 820px;

  /* Near-square. Large radii read as SaaS card; hairlines do the separating. */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;

  --shadow-sm: none;
  --shadow-md: none;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-mid); }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.1;
  margin: 0;
  /* long unbroken words shouldn't push past the viewport on narrow screens */
  overflow-wrap: break-word;
}
h4 {
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0;
}
h1 { font-size: clamp(2.05rem, 4.3vw, 3.3rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.2; }
h4 { font-size: 1.0625rem; letter-spacing: -.01em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

em.hl  { font-style: normal; color: var(--green); }
strong.hl { color: var(--green); }

/* Marker-pen highlight for emphasised words. A pseudo-element sits behind the
   text so the swash can have slightly irregular, hand-drawn edges and a hair
   of rotation. Single-line phrases only — an absolute swash can't wrap. */
.mark {
  position: relative;
  display: inline-block;
  z-index: 0;
  font-style: normal;
  color: var(--ink);
}
.mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.18em;
  right: -.18em;
  bottom: .04em;
  height: .56em;
  background: rgba(154, 168, 142, .45);
  /* asymmetric radii read as a hand-drawn stroke rather than a rectangle */
  border-radius: .34em .62em .26em .52em / .58em .28em .52em .3em;
  transform: rotate(-.7deg);
}
.section--dark .mark { color: var(--ivory); }
.section--dark .mark::before { background: rgba(154, 168, 142, .32); }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding: clamp(64px, 8vw, 118px) 0; }
.section[id] { scroll-margin-top: 78px; }
.section--tight { padding: clamp(48px, 5vw, 72px) 0; }
/* the product demo; it carries more air than a normal section */
.section--feature { padding: clamp(92px, 12vw, 172px) 0; }
/* a passage that wants to be read slowly; the whitespace is the framing */
.section--air { padding: clamp(88px, 12vw, 176px) 0; }
/* One continuous page surface — only the dark bands break it, the way
   mocharymethod.com does. Cards and panels provide the separation instead. */
.section--sand { background: var(--page); }
.section--tint { background: var(--page); }
/* Lifted above the ivory page rather than dropped below it: these bands still
   separate from the body background, but read as light instead of heavy. */
.section--stone { background: var(--white); }
.section--sage { background: var(--sage-pale); }
.section--dark { background: var(--forest); color: rgba(247, 244, 237, .78); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--ivory); }
.center { text-align: center; }
.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.28rem);
  line-height: 1.55;
  color: var(--ink-2);
}
.eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-mid);
  margin: 0 0 18px;
}
.section--dark .eyebrow { color: var(--sage-lt); }
.section-head { max-width: 760px; margin: 0 0 clamp(38px, 5vw, 62px); }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head .lead { margin-top: 18px; }
/* A run of body copy that isn't inside a grid column and so has no measure of
   its own — the story passages on the About page. */
.passage { max-width: 62ch; }

/* ---------- buttons ---------- */
/* Exactly one substantial CTA treatment on the whole site: solid forest, ivory
   text, near-square. Every other action is an .arrow-link. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: .005em;
  background: var(--forest);
  color: var(--ivory);
  transition: background .18s var(--ease), color .18s, border-color .18s;
  white-space: nowrap;
}
.btn:hover, .btn:focus-visible { background: var(--green-mid); color: var(--ivory); }
/* On the dark bands the same button inverts rather than becoming a new shape. */
.section--dark .btn, .btn--light {
  background: var(--ivory);
  color: var(--forest);
}
.section--dark .btn:hover, .btn--light:hover { background: var(--white); color: var(--forest); }
.btn--sm { padding: 10px 20px; font-size: .86rem; }
.btn--lg { padding: 17px 34px; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-row.center { justify-content: center; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--forest);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.arrow-link:hover { border-bottom-color: var(--forest); }
.arrow-link span { transition: transform .2s var(--ease); }
.arrow-link:hover span { transform: translateX(4px); }
.section--dark .arrow-link { color: var(--sage-lt); }
.section--dark .arrow-link:hover { border-bottom-color: var(--sage-lt); }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(247, 244, 237, .9);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.nav.is-stuck { border-bottom-color: var(--line); }
/* Shares the content wrap so the wordmark lines up with the copy below it. */
.nav__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 74px;
}
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand img { height: 34px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--green-deep);
}
/* Part of the lockup, not a nav item: sentence case rather than tracked caps,
   so it stays roughly the width of the wordmark and reads as one unit with it.
   Sized to fit inside the existing 74px nav bar without growing it. */
.brand__sub {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1.25;
  color: var(--ink-3);
  margin-top: 5px;
  white-space: nowrap;
}

.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
/* :not(.btn) keeps these off the CTA — otherwise `.nav__links a` (0,1,1)
   outranks `.btn--primary` (0,1,0) and the button loses its white text. */
.nav__links a:not(.btn) {
  padding: 9px 13px;
  border-radius: var(--r-sm);
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .16s, color .16s;
}
.nav__links a:not(.btn):hover { background: var(--green-tint); color: var(--green-deep); }
.nav__links a:not(.btn).is-active { color: var(--green); font-weight: 600; }
.nav__cta { margin-left: 12px; }
.nav__toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  position: relative;
}
.nav__toggle i {
  position: absolute; left: 11px; right: 11px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s;
}
.nav__toggle i:nth-child(1) { top: 14px; }
.nav__toggle i:nth-child(2) { top: 20px; }
.nav__toggle i:nth-child(3) { top: 26px; }
.nav__toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- hero ---------- */
/* The deeper bottom pad holds the ivory a little further down the page before
   the first white band starts. */
.hero { padding: clamp(56px, 8vw, 104px) 0 clamp(60px, 7vw, 96px); }
.hero__inner { max-width: 900px; margin: 0 auto; text-align: center; }

/* Editorial split, deliberately unbalanced: the headline takes ~58% and the
   portrait sits lower than centre so the two columns don't mirror each other. */
.hero--split .hero__inner {
  /* beats the 900px cap on the base .hero__inner so this aligns with the nav */
  max-width: var(--wrap);
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: start;
}
/* Stepped down from 4.15rem: the headline is now a full sentence rather than a
   four-word phrase, and at the old size its second line outran the column —
   which would have wrapped the .mark swash, something it can't survive.
   Still clears the 2.5rem h2 ceiling, so the hero keeps the top of the scale. */
.hero--split h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.06; }
.hero--split .lead {
  margin: 28px 0 30px;
  /* The positioning sentence is longer than a tagline, so the measure opens up
     to keep it a few lines rather than nine — the hero stays short. */
  max-width: 54ch;
  font-size: clamp(1rem, 1.15vw, 1.09rem);
  color: var(--ink-2);
}
.hero--split .btn-row { justify-content: flex-start; }
.hero--split .hero__meta { margin-top: 30px; }
/* No panel, no frame — the cut-out sits directly on the page surface. */
.hero__media { position: relative; text-align: center; margin-top: 0; }
.hero__media img {
  height: clamp(320px, 32vw, 430px);
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  /* the cut-out is cropped flat at the torso — dissolve that edge into the page */
  mask-image: linear-gradient(to bottom, #000 72%, transparent 99%);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 99%);
}
/* The portrait is a masked cut-out that fades out at the bottom, so the caption
   needs its own clear space and enough contrast to read against the ivory. */
.hero__caption { margin-top: 18px; text-align: center; }
.hero__caption strong { display: block; color: var(--ink); font-size: .95rem; font-weight: 650; }
.hero__caption span {
  display: block;
  margin-top: 3px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* ---------- careflow: the hero visual ----------
   A single path drawn once on load, three service nodes fading in behind the
   line as it reaches them, and a spark that keeps travelling the route. All
   motion is decorative and switches off under prefers-reduced-motion, which
   leaves the finished, fully-drawn state. */
.careflow { width: 100%; max-width: 380px; margin: 0 auto; }
.careflow__svg { width: 100%; height: auto; display: block; }

.careflow__blob {
  fill: var(--sage);
  opacity: .1;
  /* SVG shapes have no layout box, so transforms need one to scale about their
     own centre rather than the origin of the viewBox */
  transform-box: fill-box;
  transform-origin: center;
  animation: cf-drift 19s var(--ease) infinite;
}
.careflow__blob--b { opacity: .07; animation-duration: 23s; animation-direction: reverse; }

.careflow__path {
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: cf-draw 2.4s var(--ease) .45s forwards;
}

/* The spark rides the same `d` as the path above — keep the two in sync.
   Guarded by @supports so browsers without offset-path simply omit it rather
   than parking a dot in the corner. */
.careflow__spark { display: none; fill: var(--forest); }
@supports (offset-path: path("M0 0 L1 1")) {
  .careflow__spark {
    display: block;
    offset-path: path("M40 0 L40 58 C40 118 62 142 104 184 C146 226 168 250 168 310 L168 380");
    offset-rotate: 0deg;
    animation: cf-travel 7s linear 2.6s infinite;
  }
}

/* --cf-i is the node's index, set inline, and stages both the entrance and the
   pulse so the three never breathe in unison */
.careflow__node {
  opacity: 0;
  animation: cf-in .7s var(--ease) forwards;
  animation-delay: calc(.9s + var(--cf-i) * .55s);
}
.careflow__disc { fill: var(--white); stroke: var(--sage); stroke-width: 1.4; }
.careflow__halo {
  fill: var(--sage);
  opacity: .18;
  transform-box: fill-box;
  transform-origin: center;
  animation: cf-pulse 4.2s var(--ease) infinite;
  animation-delay: calc(var(--cf-i) * 1.1s);
}
.careflow__icon {
  fill: none;
  stroke: var(--forest);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.careflow__n {
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: .07em;
  fill: var(--green-mid);
}
.careflow__t {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  fill: var(--ink);
}
/* The stop's caption. No panel and no arrow — it's a muted line of the site's
   own type that fades in under the label, the way .hero__meta sits under the
   copy. Transparent (not fill:none) so the rect still takes pointer events. */
.careflow__hit { fill: transparent; }
.careflow__d {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  fill: var(--ink-3);
  opacity: 0;
  transition: opacity .28s var(--ease);
}
.careflow__node:hover .careflow__d { opacity: 1; }
.careflow__node:hover .careflow__disc { stroke: var(--green-mid); }
/* Touch devices have no hover to reveal them, so they simply stay visible. */
@media (hover: none) {
  .careflow__d { opacity: 1; }
}

@keyframes cf-draw { to { stroke-dashoffset: 0; } }
@keyframes cf-in   { to { opacity: 1; } }
@keyframes cf-pulse {
  0%, 100% { transform: scale(1); opacity: .18; }
  50%      { transform: scale(1.5); opacity: .06; }
}
@keyframes cf-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(10px, -12px) scale(1.06); }
}
@keyframes cf-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 26px;
}
.pill b { color: var(--green); font-weight: 600; }
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(35, 69, 54, .14);
}
.hero h1 { margin-bottom: 24px; }
.hero .lead { max-width: 660px; margin: 0 auto 32px; }
.hero__meta {
  margin-top: 26px;
  font-size: .875rem;
  color: var(--ink-3);
}
.hero__meta b { color: var(--ink); font-weight: 600; }
/* one-line summary of what is actually being bought */
.capline {
  margin: 0 0 30px;
  font-size: .89rem;
  font-weight: 600;
  color: var(--green);
  letter-spacing: .005em;
  line-height: 1.7;
}
.capline span { color: var(--ink-3); font-weight: 400; margin: 0 7px; }
.hero--split .capline { max-width: 470px; }
/* the lead's own bottom margin is sized to butt against the buttons; with the
   capline in between it opens too wide a gap */
.hero--split .lead:has(+ .capline) { margin-bottom: 16px; }

/* squiggle divider */
.squiggle { display: block; margin: 0 auto; color: var(--ink); width: 148px; height: auto; }
.squiggle--sm { width: 92px; }
.squiggle--left { margin-left: 0; }

/* ---------- grids ---------- */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px;
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
  display: flex;
  flex-direction: column;
}
a.card:hover, .card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--sage);
}
.card__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--green-tint);
  border: 1px solid var(--green-soft);
  display: grid; place-items: center;
  color: var(--green);
  margin-bottom: 20px;
  flex-shrink: 0;
}
.card__icon svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: 10px; }
.card h4 { margin-bottom: 8px; }
.card p { font-size: .95rem; color: var(--ink-2); }
.card__foot { margin-top: auto; padding-top: 20px; }

/* resource / tool cards (the "frameworks" row) */
.tool {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s;
}
.tool:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tool__thumb {
  aspect-ratio: 16 / 10;
  background: var(--green-tint);
  border-bottom: 1px solid var(--line);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
}
.tool__row {
  height: 9px;
  border-radius: 3px;
  background: var(--white);
  border: 1px solid var(--green-soft);
}
.tool__row--head { height: 15px; background: var(--green-soft); border-color: transparent; width: 55%; }
.tool__row--fill { background: rgba(35, 69, 54, .18); border-color: transparent; }
.tool__row--w80 { width: 80%; }
.tool__row--w60 { width: 60%; }
.tool__row--w45 { width: 45%; }
.tool__body { padding: 18px 20px 20px; }
.tool__body h4 { margin-bottom: 5px; }
.tool__body p { font-size: .875rem; color: var(--ink-3); margin: 0; }

/* ---------- inset quote box ---------- */
.quotebox {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--r-md);
  background: var(--white);
  padding: 30px 34px;
}
.quotebox p {
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 18px;
}
.section--sand .quotebox, .section--tint .quotebox { background: var(--white); }

/* ---------- figure band (why it matters) ---------- */
/* One dominant statistic, not a row of stat cards. The other two figures are
   supporting notes set at body size. */
.figure-band {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
  margin-top: clamp(26px, 3vw, 40px);
}
.figure-band__n {
  font-family: var(--serif);
  font-size: clamp(5rem, 13vw, 10.5rem);
  font-weight: 500;
  line-height: .86;
  letter-spacing: -.04em;
  color: var(--forest);
}
.figure-band__cap {
  margin: 22px 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34ch;
}
.figure-band__src {
  display: block;
  margin-top: 14px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.figure-band__body h2 { margin-bottom: 20px; }
.figure-band__body > p { font-size: 1.08rem; color: var(--ink-2); max-width: 46ch; }

/* ---------- clinician ---------- */
.clinician {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 74px);
  align-items: center;
}
/* The portrait is a transparent cutout, so a warm stone field frames it rather
   than leaving it pasted onto the page. The unmasked original can't be used
   here: its studio blue is baked into the pixels and fights the palette. */
.clinician__media {
  background: var(--stone);
  border-radius: 5px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.clinician__media img {
  height: clamp(340px, 40vw, 500px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom;
}
.clinician__body h2 { margin-bottom: 6px; }
.clinician__body h2 span {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.clinician__role { margin: 20px 0 0; font-size: 1.05rem; color: var(--ink-2); }
.clinician__note { margin: 4px 0 0; font-size: 1.05rem; color: var(--ink-2); }
/* Most visitors never reach the About page, so the reason Afresh exists is
   spent here — in the whitespace the column already had, not a new section. */
.clinician__bio {
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 48ch;
}
.clinician__more { margin: 26px 0 0; }

/* ---------- cadence (ways to work together) ---------- */
/* Three columns of plain text. No containers, no tier pill, no price block. */
.cadence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 62px);
  border-top: 1px solid var(--line);
}
.cadence__col { padding-top: clamp(26px, 3vw, 38px); }
.cadence__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.62rem);
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.cadence__when {
  margin: 12px 0 0;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cadence__blurb { margin: 18px 0 0; font-size: .97rem; color: var(--ink-2); }
.cadence__list { display: grid; gap: 10px; margin: 22px 0 26px; }
.cadence__list li {
  font-size: .93rem;
  color: var(--ink-2);
  padding-left: 18px;
  position: relative;
}
.cadence__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 1px;
  background: var(--sage);
}
.cadence__note {
  margin: clamp(34px, 4vw, 50px) 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: .86rem;
  color: var(--ink-3);
  max-width: 70ch;
}

/* ---------- reasons (why growing teams) ---------- */
/* Three columns of running text, nothing enclosing them. The rules live in the
   gutters rather than on the columns, so a heading is free to run one line or
   two — matching block heights is what made these read as cards. */
.reasons {
  --reasons-gap: clamp(30px, 4.6vw, 76px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--reasons-gap);
  margin-top: clamp(46px, 6.5vw, 92px);
}
.reasons__col { position: relative; }
.reasons__col + .reasons__col::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--reasons-gap) * -.5);
  width: 1px;
  background: var(--line);
}
.reasons__n {
  display: block;
  font-family: var(--serif);
  font-size: .95rem;
  letter-spacing: .07em;
  color: var(--green-mid);
  margin-bottom: clamp(20px, 2.6vw, 32px);
}
.reasons h3 {
  font-weight: 500;
  font-size: clamp(1.3rem, 2.1vw, 1.66rem);
  max-width: 15ch;
}
.reasons p {
  margin: 18px 0 0;
  font-size: .97rem;
  color: var(--ink-2);
  max-width: 36ch;
}

/* ---------- tenets (what you can count on) ---------- */
/* One list set at display size, not five panels. Number, statement, hairline;
   nothing encloses a row and nothing is centred. */
.tenets { max-width: 70%; margin: clamp(44px, 6vw, 78px) 0 0; }
.tenets li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(14px, 1.8vw, 24px);
  padding: clamp(22px, 2.7vw, 34px) 0;
  border-top: 1px solid rgba(247, 244, 237, .17);
}
.tenets li:first-child { border-top: 0; padding-top: 0; }
.tenets__n {
  font-family: var(--serif);
  font-size: .82rem;
  letter-spacing: .09em;
  color: var(--sage-lt);
  padding-top: .6em;
}
.tenets__t {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.34rem, 2.1vw, 1.6rem);
  line-height: 1.24;
  letter-spacing: -.014em;
  color: var(--ivory);
}
.tenets__d {
  grid-column: 2;
  margin: 11px 0 0;
  font-size: .95rem;
  color: rgba(247, 244, 237, .68);
  max-width: 54ch;
}

/* ---------- offer index (what we offer) ---------- */
/* Three peer formats, not one flagship with satellites. Equal columns, equal
   type, hairlines only — nothing here is a subset of anything else. */
/* Both rules sit on the container so they run the full width — on the items
   the closing rule broke into three segments across the gutters. */
.offer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(30px, 4.4vw, 66px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.offer__item {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px) 0;
  color: inherit;
}
.offer__n {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--green-mid);
  opacity: .7;
  margin-bottom: 14px;
}
.offer__t {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.34rem, 2vw, 1.72rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 12px;
  transition: transform .22s var(--ease);
}
/* the arrow appears on hover rather than sitting there four times over */
.offer__t::after {
  content: "\2192";
  display: inline-block;
  margin-left: .38em;
  font-family: var(--sans);
  font-size: .74em;
  color: var(--green-mid);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.offer__item:hover .offer__t { transform: translateX(3px); }
.offer__item:hover .offer__t::after { opacity: 1; transform: none; }
.offer__d { font-size: .97rem; color: var(--ink-2); margin: 0 0 16px; max-width: 36ch; }
/* margin-top:auto levels the metadata across the three columns however long the
   descriptions run, so no column reads as the taller, more important one */
.offer__m {
  display: block;
  margin-top: auto;
  padding-top: clamp(18px, 2.2vw, 26px);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: .8;
}
.offer__more { margin-top: clamp(30px, 3.5vw, 42px); }

/* ---------- process (how it works) ---------- */
/* Editorial rows, not cards. Hairline rules instead of containers, typography
   instead of chips, and the timing sits in the margin as quiet metadata. */
.process { border-top: 1px solid var(--line); }
.process__step {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 140px;
  column-gap: clamp(24px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(30px, 3.8vw, 50px) 0;
  border-bottom: 1px solid var(--line);
}
.process__n {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--green-mid);
  opacity: .7;
}
.process__t {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 14px;
}
.process__d { font-size: 1rem; color: var(--ink-2); margin: 0; max-width: 50ch; }
.process__when {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: .8;
  text-align: right;
  white-space: nowrap;
}

/* ---------- practitioner ---------- */
.people { display: grid; gap: 22px; }
.person {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 300px 1fr;
}
.person__photo {
  background: var(--page);
  position: relative;
  min-height: 340px;
  overflow: hidden;
}
.person__photo img {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom;
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
.person__body { padding: 34px 36px; display: flex; flex-direction: column; }
.person__name { font-size: 1.5rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.person__creds {
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-mid);
  margin: 8px 0 18px;
}
.person__body p { font-size: .97rem; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tag {
  font-size: .78rem;
  font-weight: 500;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--green-tint);
  border: 1px solid var(--green-soft);
  color: var(--green-deep);
}

/* collapsible bio */
.more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease); }
.more.is-open { grid-template-rows: 1fr; }
.more > div { overflow: hidden; }
.more > div > * { margin-top: 1em; }
.more-btn {
  align-self: flex-start;
  margin-top: 18px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--green);
  font-weight: 600;
  font-size: .93rem;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.more-btn svg { width: 15px; height: 15px; transition: transform .28s var(--ease); }
.more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- supporting figures (why it matters) ---------- */
/* The three secondary figures, set as peers of each other and clearly below
   the section's one dominant figure. Same serif, same forest, divided by
   gutter hairlines — no container, because a container would read as a card.
   Subgrid keeps the number and caption rows aligned across the columns, so all
   three read the same way: figure, then one sentence ending in its source. */
.figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  margin-top: clamp(40px, 5vw, 70px);
  padding-top: clamp(30px, 3.5vw, 46px);
  border-top: 1px solid var(--line);
}
.fig {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-content: start;
  padding: 0 clamp(24px, 3vw, 40px);
  border-left: 1px solid var(--line);
}
.fig:first-child { border-left: 0; padding-left: 0; }
.fig:last-child { padding-right: 0; }
.fig__n {
  grid-row: 1;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4.8vw, 3.8rem);
  font-weight: 600;
  line-height: .95;
  color: var(--green);
  letter-spacing: -.03em;
}
.fig__l {
  grid-row: 2;
  margin: 16px 0 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34ch;
}
.fig__cite {
  display: block;
  margin-top: 8px;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- agenda (what actually happens) ---------- */
.agenda { display: grid; }
.agenda__item { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.agenda__time { padding-right: 30px; text-align: right; }
.agenda__clock {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 600;
  color: var(--green);
  line-height: 1;
  display: block;
}
.agenda__dur { display: block; margin-top: 9px; font-size: .8rem; color: var(--ink-3); }
/* the rule threads the steps together; the last one has nothing to connect to */
.agenda__body {
  border-left: 1px solid var(--line);
  padding: 0 0 clamp(30px, 4vw, 44px) 34px;
  position: relative;
}
.agenda__item:last-child .agenda__body { border-left-color: transparent; padding-bottom: 0; }
.agenda__body::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px var(--page);
}
.section--stone .agenda__body::before { box-shadow: 0 0 0 5px var(--white); }
.agenda__body h3 { margin-bottom: 11px; }
.agenda__body p { font-size: .97rem; color: var(--ink-2); margin: 0; max-width: 56ch; }
/* The same timeline dropped a register, for illustrating a schedule inside a
   service block. It has to stay smaller than the service copy above it, or the
   sample agenda starts reading as the offer itself. */
.agenda--compact { margin-top: clamp(22px, 2.6vw, 30px); }
.agenda--compact .agenda__item { grid-template-columns: 92px minmax(0, 1fr); }
.agenda--compact .agenda__time { padding-right: 22px; }
.agenda--compact .agenda__clock { font-size: 1.05rem; font-weight: 600; }
.agenda--compact .agenda__dur { margin-top: 5px; font-size: .72rem; }
.agenda--compact .agenda__body { padding: 0 0 clamp(22px, 2.6vw, 30px) 26px; }
.agenda--compact .agenda__body h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.agenda--compact .agenda__body p { font-size: .9rem; max-width: 50ch; }
/* the caption that keeps the sample from reading as a fixed timetable — no
   left rule on it, the timeline beside it is already carrying one */
.agenda--sample { margin-top: clamp(34px, 4vw, 52px); max-width: 44em; }
.agenda--sample .note {
  margin-top: 18px;
  padding-left: 0;
  border-left: 0;
  font-size: .84rem;
  color: var(--ink-3);
}

.agenda-foot {
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: .95rem;
  color: var(--ink-2);
}
.agenda-foot strong { color: var(--ink); font-weight: 650; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  background: none;
  border: 0;
  padding: 24px 44px 24px 0;
  text-align: left;
  font-size: 1.06rem;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--ink);
  position: relative;
  display: block;
}
.faq__q::after {
  content: "";
  position: absolute; right: 6px; top: 50%;
  width: 13px; height: 13px;
  margin-top: -6px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a4a2e' stroke-width='2.6' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>") center / contain no-repeat;
  transition: transform .28s var(--ease);
}
.faq__item.is-open .faq__q::after { transform: rotate(135deg); }
.faq__q:hover { color: var(--green); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 26px; padding-right: 44px; font-size: .98rem; color: var(--ink-2); }
/* the same accordion, dropped a register, for pages where it isn't the point */
.faq--quiet .faq__q { font-size: .97rem; font-weight: 600; padding: 20px 44px 20px 0; }
.faq--quiet .faq__a p { padding-bottom: 22px; font-size: .94rem; }

/* ---------- split (image + text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split--narrow-media { grid-template-columns: .85fr 1fr; }
/* Same treatment as the hero: cut-out on the page, no frame. */
.portrait { position: relative; text-align: center; }
.portrait img {
  height: clamp(340px, 34vw, 460px);
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  mask-image: linear-gradient(to bottom, #000 72%, transparent 99%);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 99%);
}
.portrait__badge { margin-top: 14px; text-align: center; }
.portrait__badge strong { display: block; color: var(--ink); font-size: .96rem; font-weight: 650; }
.portrait__badge span { font-size: .82rem; color: var(--ink-3); }

/* ---------- callout band ---------- */
/* The dark green runs clean from the CTA into the footer — no watermark, no
   background mark, nothing behind the copy. */
.band { text-align: center; max-width: 720px; margin: 0 auto; }

/* ---------- closing CTA ----------
   Bookends the hero: same headline, same size, same marker swash. Carried by
   .section--feature's padding, so the air around it comes from the existing
   spacing scale rather than a one-off number. */
.closer { max-width: 860px; margin: 0 auto; text-align: center; }
.closer__h {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.06;
  margin-bottom: clamp(30px, 4vw, 44px);
}
.band h2 { margin-bottom: 18px; }
.band p { color: rgba(255,255,255,.74); font-size: 1.1rem; margin-bottom: 32px; }
.band__note { margin-top: 24px; font-size: .85rem; color: rgba(255,255,255,.5); }

/* ---------- footer ----------
   A closing strip, not a section. The CTA band above it does the emotional
   work, so everything here is tuned down: the type sizes are unchanged, but the
   scaffolding around them — padding, column gaps, rule offsets — is roughly a
   third tighter than the rest of the page's rhythm. */
.footer { background: var(--green-deep); color: rgba(255,255,255,.62); padding: clamp(32px, 3.8vw, 44px) 0 22px; }
.footer a { color: rgba(255,255,255,.72); font-size: .9rem; }
.footer a:hover { color: #fff; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 26px 36px; }
.brand--mark img { height: 32px; }
.footer__brand .brand--mark { display: inline-flex; }

.footer__brand img { filter: brightness(0) invert(1); opacity: .92; }
.footer__blurb { margin-top: 12px; font-size: .9rem; max-width: 300px; line-height: 1.55; }
.footer h4 {
  color: rgba(255,255,255,.5);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 11px;
}
.footer__col ul { display: grid; gap: 8px; }
.footer__social { display: flex; gap: 9px; margin-top: 16px; }
.footer__social a {
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background .18s, border-color .18s;
}
.footer__social a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.footer__social svg { width: 16px; height: 16px; }
.footer__bottom {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  font-size: .82rem;
  color: rgba(255,255,255,.42);
}
.footer__bottom nav { display: flex; gap: 22px; margin-left: auto; }
.footer__bottom a { font-size: .82rem; }
.footer__disclaimer {
  margin-top: 10px;
  font-size: .72rem;
  line-height: 1.55;
  color: rgba(255,255,255,.34);
  max-width: 780px;
}

/* ---------- page header (subpages) ---------- */
.pagehead { padding: clamp(52px, 6vw, 82px) 0 clamp(36px, 4vw, 52px); border-bottom: 1px solid var(--line); }
.pagehead h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); margin-bottom: 20px; }
.pagehead .lead { max-width: 660px; }
.crumbs { font-size: .82rem; color: var(--ink-3); margin-bottom: 20px; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--green); }

/* ---------- service detail blocks ----------
   Editorial rather than card-based: copy sits directly on the page and is
   separated by hairlines and whitespace, never by a filled, bordered box.
   A numeral rail in the left margin carries the sequence instead. */
/* Padding is tuned so a section landed on via the contents list reads in one
   screen rather than trailing below the fold. */
.svc { padding: clamp(50px, 5.5vw, 82px) 0; scroll-margin-top: 78px; }
/* An anchor a section used to carry, kept as an empty target so links already
   out in the world still land on the renamed section. */
.anchor-alias { display: block; height: 0; scroll-margin-top: 78px; }
.svc + .svc { border-top: 1px solid var(--line); }
.svc__grid {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: start;
}
/* The rail tracks alongside long copy so you always know where you are. */
.svc__rail { position: sticky; top: 104px; }
.svc__n {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 600;
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--green);
}
.svc__kicker {
  margin: 12px 0 0;
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.svc h2 { font-size: clamp(1.95rem, 4vw, 2.9rem); margin-bottom: 22px; max-width: 15ch; }
.svc__lead {
  font-size: clamp(1.12rem, 1.7vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 29em;
  margin-bottom: 22px;
}
.svc__copy { max-width: 34em; }
.svc__copy p { margin-bottom: 1.15em; }
.svc__copy p:last-child { margin-bottom: 0; }

.svc__detail {
  margin-top: clamp(38px, 5vw, 58px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 58px);
}
.svc__detail--wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.detail__h {
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 13px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
/* label / value rows — dividers do the work a card outline used to do */
.specs > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: .93rem;
}
.specs span:first-child { color: var(--ink-3); }
.specs span:last-child { color: var(--ink); font-weight: 600; text-align: right; }

.lines li {
  position: relative;
  padding: 12px 0 12px 27px;
  border-bottom: 1px solid var(--line);
  font-size: .93rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.lines li::before {
  content: "";
  position: absolute; left: 0; top: 15px;
  width: 15px; height: 15px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314201a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
}
.lines li strong { color: var(--ink); font-weight: 650; }
/* Term above its description, so the row doesn't need a dash to join them. */
.lines--term li strong { display: block; margin-bottom: 3px; }
/* Names only, two abreast — keeps a seven-item menu from eating a screen. */
.lines--compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px;
}
.lines--compact li { color: var(--ink); padding: 10px 0 10px 25px; }
.lines--compact li::before { top: 13px; width: 14px; height: 14px; }

.note {
  border-left: 1px solid var(--line);
  padding-left: 20px;
  margin-top: 18px;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 34em;
}
.svc__cta { margin-top: clamp(30px, 4vw, 44px); }

/* contents list under the page header */
.svc-index { margin-top: clamp(40px, 5vw, 58px); border-top: 1px solid var(--line); }
.svc-index a {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) minmax(0, 1.1fr) 1.1rem;
  gap: 22px;
  align-items: baseline;
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.svc-index a:last-child { border-bottom: 0; }
.svc-index a:hover { color: var(--green); }
.svc-index a:hover .svc-index__go { transform: translateY(2px); }
.svc-index__n { font-family: var(--serif); font-size: .95rem; letter-spacing: .06em; color: var(--ink-3); }
.svc-index__t {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -.015em;
}
.svc-index__d { font-size: .91rem; color: var(--ink-3); }
.svc-index__go { color: var(--ink-3); transition: transform .2s var(--ease); justify-self: end; }

.panel {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 32px;
}
.panel h4 { margin-bottom: 16px; }
.panel + .panel { margin-top: 18px; }
.meta-list { display: grid; gap: 0; }
.meta-list div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  font-size: .92rem;
}
.meta-list div:last-child { border-bottom: 0; }
.meta-list dt, .meta-list span:first-child { color: var(--ink-3); }
.meta-list span:last-child { color: var(--ink); font-weight: 600; text-align: right; }

/* ---------- booking (the contact page's first screen) ---------- */
/* The invitation sits directly on the page on the left; the form occupies the
   wider right column. Neither half is enclosed — no card, no shadow, no radius
   larger than a field's. */
/* Explicit placement rather than a wrapper div around the left column: the form
   comes second in the DOM so it is second in reading and tab order, and the
   trailing 1fr row absorbs the form's extra height instead of spreading it
   through the rows the left column sits in. */
.booking {
  display: grid;
  grid-template-columns: 38fr 62fr;
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(38px, 6vw, 90px);
  align-items: start;
}
.booking__head   { grid-area: 1 / 1; }
.booking__form   { grid-area: 1 / 2 / 4 / 3; }
.booking__direct { grid-area: 2 / 1; }
.booking__head h1 { font-size: clamp(2.05rem, 3.7vw, 2.95rem); margin-top: 4px; }
.booking__head .lead { margin-top: 20px; max-width: 34ch; }
/* the "or reach us directly" strip, folded into the column rather than given
   a section and three little cards of its own */
.booking__direct {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  font-size: .86rem;
  color: var(--ink-3);
}
.booking__direct a { color: var(--forest); font-weight: 600; }
.booking__direct a:hover { color: var(--green-mid); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- form ---------- */
form.book {
  display: grid;
  gap: 30px;
  padding: clamp(24px, 3.5vw, 38px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.form-group {
  display: grid;
  gap: 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.form-group + .form-group {
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.form-group legend {
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}
.field { display: grid; gap: 9px; }
/* Direct children only — the checkbox rows below are labels and inputs inside a
   .field too, and they want none of this. */
.field > label {
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.field > label span { color: var(--ink-3); font-weight: 400; letter-spacing: .06em; }
.field > input, .field > select, .field > textarea {
  font: inherit;
  font-size: .96rem;
  color: var(--ink);
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--line-field);
  border-radius: 7px;
  background: var(--white);
  width: 100%;
  transition: border-color .16s;
}
.field > input::placeholder, .field > textarea::placeholder { color: var(--ink-3); opacity: .8; }
.field > textarea { min-height: 104px; resize: vertical; }
/* a second green line inside the border rather than a glow around it */
.field > input:focus, .field > select:focus, .field > textarea:focus {
  border-color: var(--forest);
  outline: 1px solid var(--forest);
  outline-offset: -2px;
}
.field > input:user-invalid, .field > select:user-invalid, .field > textarea:user-invalid { border-color: #c0503f; }
.field__error { font-size: .8rem; color: #c0503f; display: none; }
.field.has-error .field__error { display: block; }
.field.has-error > input, .field.has-error > select, .field.has-error > textarea { border-color: #c0503f; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Multi-select as a ruled list, not a row of pills. */
.checks { display: grid; margin-top: 4px; border-top: 1px solid var(--line); }
.check {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .95rem;
  color: var(--ink-2);
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: color .16s;
}
.check:hover { color: var(--ink); }
.check:has(input:checked) { color: var(--ink); }
.check input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid var(--line-field);
  border-radius: 50%;
  background: var(--white);
  transition: background-color .16s, border-color .16s;
}
.check input:checked {
  border-color: var(--forest);
  background: var(--forest) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f4ed' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 11px 11px no-repeat;
}
.check input:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
/* The same button the homepage uses, with the privacy line tucked under it. */
.submit { padding-top: 0; }
.submit .form-note { margin-top: 12px; }
.form-note { font-size: .8rem; color: var(--ink-3); margin: 0; max-width: 60ch; }
.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.form-error {
  display: none;
  margin: 12px 0 0;
  font-size: .85rem;
  color: #a23d30;
}
.form-error.is-shown { display: block; }
form.book.is-submitting button[type="submit"] { opacity: .65; cursor: wait; }
/* No panel: the form's absence is the state change, so this is just text. */
.form-success {
  display: none;
  border-top: 1px solid var(--line);
  padding-top: 34px;
  max-width: 52ch;
}
.form-success.is-shown { display: block; }
.form-success .tick {
  width: 42px; height: 42px; margin: 0 0 20px;
  border-radius: 50%;
  background: var(--green);
  display: grid; place-items: center;
}
.form-success .tick svg { width: 26px; height: 26px; color: #fff; }
.form-success h3 { margin-bottom: 10px; }
form.book.is-hidden { display: none; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }

  /* the careflow's resting state is its finished state, so switching every
     animation off leaves a complete, legible graphic rather than a blank one */
  .careflow__path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .careflow__node { opacity: 1; animation: none; }
  .careflow__halo, .careflow__blob { animation: none; }
  .careflow__spark { display: none; }
  .careflow__d { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .fig { padding-left: 24px; padding-right: 24px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 860px) {
  .nav__links {
    position: fixed;
    inset: 74px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 14px 20px 24px;
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .24s var(--ease);
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { padding: 13px 12px; font-size: 1rem; }
  .nav__cta { margin: 10px 0 0; justify-content: center; }
  .nav__toggle { display: block; }

  .hero--split .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero--split .lead { margin-left: auto; margin-right: auto; }
  .hero--split .btn-row { justify-content: center; }
  /* Content-sized. A fixed height here couldn't hold the portrait plus its
     caption, so the caption overflowed into the copy stacked below it. */
  .hero__media { max-width: 320px; margin: 0 auto 30px; order: -1; }
  .hero__media img { height: clamp(300px, 62vw, 380px); }
  /* stacks under the copy rather than above it — the headline still leads */
  .careflow { max-width: 320px; margin-top: clamp(24px, 5vw, 40px); }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .split, .split--narrow-media, .svc__grid { grid-template-columns: 1fr; }
  /* one column, DOM order: invitation, form, how to reach us */
  .booking {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: clamp(36px, 5vw, 48px);
  }
  .booking__head, .booking__form, .booking__direct { grid-area: auto; }
  .booking__direct { margin-top: 0; }
  .booking__head .lead { max-width: 46ch; }
  /* rail lies down above the headline instead of sitting in the margin */
  .svc__rail { position: static; display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; }
  .svc__n { font-size: 1.9rem; line-height: 1; }
  .svc__kicker { margin: 0; }
  .svc h2 { max-width: 20ch; }
  .svc__detail, .svc__detail--wide { grid-template-columns: 1fr; }
  .svc-index a { grid-template-columns: 2.2rem minmax(0, 1fr); gap: 4px 16px; }
  .svc-index__d, .svc-index__go { display: none; }
  .split .portrait { max-width: 400px; margin: 0 auto; }
  .person { grid-template-columns: 1fr; }
  .person__photo { min-height: 300px; }
  .person__photo img { height: 300px; }
  /* the gutter rules become the rules between stacked passages */
  .reasons { grid-template-columns: 1fr; gap: 0; }
  .reasons__col + .reasons__col {
    margin-top: clamp(30px, 5vw, 42px);
    padding-top: clamp(30px, 5vw, 42px);
    border-top: 1px solid var(--line);
  }
  .reasons__col + .reasons__col::before { display: none; }
  .reasons h3, .reasons p { max-width: 44ch; }
  .tenets { max-width: none; }
  /* stacked passages, so the subgrid alignment has nothing left to align */
  .figs { grid-template-columns: 1fr; grid-template-rows: none; }
  .fig {
    display: block;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: clamp(24px, 4vw, 30px) 0;
  }
  .fig:first-child { border-top: 0; padding-top: 0; }
  .fig__l { max-width: 46ch; }
  /* the timeline rule needs a full-width column to thread, so the times move
     inline above each step instead of into a margin gutter */
  .agenda__item { grid-template-columns: 1fr; }
  /* higher specificity than the rule above, so the compact variant needs its
     own reset before the times can move inline */
  .agenda--compact .agenda__item { grid-template-columns: 1fr; }
  .agenda--compact .agenda__time { padding: 0 0 8px 26px; }
  .agenda__time { text-align: left; padding: 0 0 10px 34px; }
  .agenda__dur { display: inline; margin: 0 0 0 10px; }
  .agenda__dur::before { content: "· "; }
  .agenda__body { border-left: 0; padding-left: 34px; }
  .agenda__item::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px var(--page);
  }
  .section--stone .agenda__item::before { box-shadow: 0 0 0 5px var(--white); }
  .agenda__item { position: relative; border-left: 1px solid var(--line); }
  .agenda__item:last-child { border-left-color: transparent; }
  .agenda__body::before { display: none; }
  /* the timing moves under the number rather than into a right-hand margin
     that no longer exists */
  .process__step { grid-template-columns: 62px minmax(0, 1fr); row-gap: 6px; }
  .process__when { grid-column: 2; text-align: left; }

  .figure-band { grid-template-columns: 1fr; gap: 34px; }
  .figure-band__cap { max-width: 46ch; }
  .evidence { grid-template-columns: 1fr; gap: 20px; }
  .clinician { grid-template-columns: 1fr; }
  .clinician__media { max-width: 420px; }
  .clinician__media img { height: clamp(320px, 68vw, 440px); }
  .cadence { grid-template-columns: 1fr; gap: 0; }
  .cadence__col { padding-bottom: clamp(26px, 3vw, 34px); border-bottom: 1px solid var(--line); }
  .cadence__col:last-child { border-bottom: 0; padding-bottom: 0; }

  /* stacked, still peers: nothing gains or loses weight on the way down. The
     rules move between the items, since there are no gutters left to break. */
  .offer { grid-template-columns: 1fr; }
  .offer__item + .offer__item { border-top: 1px solid var(--line); }
  .offer__d { max-width: 46ch; }
  .offer__m { padding-top: 0; }
  .step { grid-template-columns: 56px 1fr; gap: 18px; }
  .step__num { font-size: 1.9rem; }
  .field-row { grid-template-columns: 1fr; }
  .footer__bottom nav { margin-left: 0; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }

  /* the lockup and the toggle share a narrow bar — shrink the tagline rather
     than let it push the wordmark or wrap */
  .brand { gap: 9px; }
  .brand__sub { font-size: .6rem; letter-spacing: .01em; margin-top: 4px; }
  form.book { padding: 24px 18px; }

  .hero { padding-top: 34px; }
  /* the authored line break is tuned for desktop; on a phone it forces
     "well-rested people." wider than the viewport, so let it rewrap.
     the markup keeps a space before each of these <br>s so the words
     don't run together ("caredirectly") once the break is hidden */
  .hero h1 br, .closer__h br { display: none; }
  .hero__media { max-width: 260px; margin-bottom: 24px; }
  /* simplified on a phone: the washes are the first thing to go */
  .careflow { max-width: 268px; }
  .careflow__wash { display: none; }
  .hero__media img { height: 260px; }
  .hero--split .lead { margin-bottom: 26px; }
  .hero__caption strong { font-size: .9rem; }

  .footer__top { grid-template-columns: 1fr; }
  .card, .plan, .panel { padding: 24px 22px; }
  .person__body { padding: 26px 24px; }
  .btn { width: 100%; justify-content: center; }
  .nav__toggle.btn, .btn-row .btn { width: auto; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
}

/* ---------- print ---------- */
@media print {
  .nav, .footer, .band { display: none; }
}