/* Everest Therapy Solutions — shared stylesheet
   Palette and type match joinmindsetevolution.com (see ets-brand-system-me-match.md). */

:root{
  --ground:#F9F4F1;
  --paper:#FEFCFB;
  --line:#E7DFD8;
  --gold:#C3AA53;
  --gold-deep:#9E8737;
  /* Gold for SMALL text only. --gold-deep measures 3.22:1 on the cream ground,
     which is fine for icons and large type but fails AA for the 12-13px
     uppercase labels (.eyebrow, .cred, .route__go, .tag--m). This one measures
     4.83:1 on cream and 4.37:1 on the tag's tinted pill (23 Sept audit).
     Icons, button hovers and the big step numerals keep --gold-deep. */
  --gold-text:#75622A;
  --hunter:#153B2B;
  --forest:#24513D;
  --ink:#1A2420;
  --stone:#3B4A41;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Avenir Next", Avenir, "Mulish", "Segoe UI", Helvetica, Arial, sans-serif;
  --maxw:1180px;
  --pad:clamp(20px,5vw,48px);
  color-scheme:light;
}
/* The site commits to one light look; keep it stable in dark mode. */
@media (prefers-color-scheme: dark){:root{color-scheme:light}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
/* The header is pinned, so anything an anchor jumps to has to clear it or the
   heading lands underneath the bar. */
[id]{scroll-margin-top:88px}
html{scroll-padding-top:96px}
@media (max-width:1040px){[id]{scroll-margin-top:70px}html{scroll-padding-top:74px}}
/* and clear of the fixed Phone / Contact Us / Book Online bar on phones */
@media (max-width:760px){html{scroll-padding-bottom:76px}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ground);color:var(--ink);
  /* Book (400) for running text, not Light. Light reads washed out at body size
     on a phone. Display type below stays Light — that is where it belongs. */
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.7;
  /* No -webkit-font-smoothing:antialiased — it thins strokes on iOS and macOS. */
}
img{max-width:100%;display:block}
a{color:var(--forest);text-underline-offset:3px}
/* Explicit underline for in-copy links, so they read as links wherever they sit. */
a.ul{text-decoration:underline;text-decoration-thickness:1px}
a.ul:hover{color:var(--hunter)}
/* Any link inside running copy is underlined, so it never reads as plain text. */
.prose a:not(.btn),.faq .a a,.schedule-note a{text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:not(.btn):hover{color:var(--hunter)}
::selection{background:rgba(195,170,83,.28)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:.005em;text-wrap:balance}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}

/* Keyboard users land on this first: 14 links sit before the content on every
   page, and there was no way past them (23 Sept audit). Invisible until focused. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--hunter);color:var(--ground);font-family:var(--sans);font-size:15px;
  font-weight:600;padding:12px 20px;border-radius:0 0 8px 0;text-decoration:none}
.skip:focus{left:0}
main:focus{outline:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.band{padding-block:clamp(56px,8vw,104px)}
/* Michael tried a soft sage here on 23 Sept 2026 to put colour at the far ends
   of a wide screen and did not like the look — bands stay near-white paper.
   Don't reoffer it. */
.band--paper{background:var(--paper)}
.band--hunter{background:var(--hunter);color:var(--ground)}
.band--hunter h2,.band--hunter h3{color:var(--ground)}
/* Links on the dark bands: --forest on --hunter is unreadable. The email address
   in the contact block was invisible before this. */
.band--hunter a{color:var(--gold)}
/* ...but not inside the white form card sitting on that band: gold on paper
   is 2.23:1, and this is the fallback link when the embed fails to load. */
.band--hunter .form a{color:var(--forest)}
.band--hunter .form a:hover{color:var(--hunter)}
.band--hunter a:hover{color:var(--ground)}
.band--hunter .btn{color:inherit}
.band--hunter .btn--gold{color:var(--hunter)}
.band--hunter .callbox{color:var(--ground)}

.eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-text);margin:0 0 14px;
}
.band--hunter .eyebrow{color:var(--gold)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.01em;
  padding:14px 28px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
  min-height:48px;
}
.btn--gold{background:var(--gold);color:var(--hunter);border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
/* A small lift on press-ready elements — enough to feel considered, not bouncy. */
.btn{transition:background-color .18s ease,color .18s ease,border-color .18s ease,
  box-shadow .18s ease,transform .18s ease}
.btn--gold{box-shadow:0 1px 2px rgba(21,59,43,.10)}
.btn:hover{transform:translateY(-1px)}
.btn--gold:hover{box-shadow:0 6px 16px rgba(21,59,43,.16)}
.btn:active{transform:translateY(0)}
.btn--line{background:transparent;color:var(--hunter);border-color:var(--hunter)}
.btn--line:hover{background:var(--hunter);color:var(--ground)}
.band--hunter .btn--line{color:var(--ground);border-color:rgba(242,244,238,.55)}
.band--hunter .btn--line:hover{background:var(--ground);color:var(--hunter);border-color:var(--ground)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.ctarow--center{justify-content:center}
/* Bio pages: the two buttons under the portrait read as one pair — matching
   width, side by side, centred under the round photo (Michael, 23 Sept 2026).
   The pair takes the width of its wider label, so neither button looks like an
   afterthought. This is the one block on those pages that stays centred on a
   phone rather than left-aligned; the portrait above it is centred too. */
.ctarow--pair{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  width:max-content;max-width:100%;margin-inline:auto}
/* Stacey's pair sits inside the prose column, where the interior-page rule
   zeroes every child's side margins; put the centring back (24 Sept audit). */
body:has(.page-head) .wrap.prose > .ctarow--pair{margin-left:auto;margin-right:auto}
/* On a phone every bio pair stacks full width, gold on the bottom — Michael
   asked for Kyra's and Abby's to match his and Alexis's ("let's stack the
   buttons like mine and Alexis", 23 Sept 2026). The wide "Call or text
   843-256-3322" pair never fitted side by side anyway. */
@media (max-width:600px){
  .ctarow--pair{grid-auto-flow:row;width:100%}
  /* The closing pair at the end of a bio stays side by side when both labels
     fit (Reach Out Now + Book Now), gold on the right. The long "Call or text
     843-256-3322" pair, inside .schedule, still stacks. (Michael, 1 Oct 2026.) */
  .ctarow--pair.ctarow--end{grid-auto-flow:column}
  .schedule .ctarow--pair.ctarow--end{grid-auto-flow:row}
  .ctarow--pair.ctarow--end .btn{padding-inline:10px;white-space:nowrap}
}

/* SimplePractice booking widget — their embed ships a small blue rectangle.
   Restyled to the brand gold pill so it matches every other button. */
.spwidget-button-wrapper{display:inline-block;text-align:left}
.spwidget-button,a.spwidget-button{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.01em;
  padding:14px 28px;min-height:48px;border-radius:999px;
  background:var(--gold);color:var(--hunter);border:1px solid var(--gold);
  text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.spwidget-button:hover,a.spwidget-button:hover{
  background:var(--gold-deep);border-color:var(--gold-deep);color:#fff;
}
/* 820, matching .person and .actions — at 840 the button went full width
   while the card was still two columns, which broke the pair (23 Sept audit). */
@media (max-width:820px){.spwidget-button-wrapper{display:block;width:100%}
  .spwidget-button,a.spwidget-button{width:100%}}

/* ---------- header ---------- */
.header{
  position:sticky;top:0;z-index:40;background:rgba(249,244,241,.94);
  backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line);
}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--maxw);margin:0 auto;padding:12px var(--pad)}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--hunter)}
.mark__img{flex:0 0 auto;width:46px;height:46px;display:block}
/* One line, not stacked. Short enough that the pinned header never needs to
   collapse — which is what made scrolling feel like the header cut in half. */
.mark__name{font-family:var(--serif);font-weight:400;
  font-size:clamp(17px,2.4vw,27px);line-height:1.05;letter-spacing:.045em;
  white-space:nowrap;color:var(--hunter)}
.nav{display:flex;align-items:center;gap:20px}
/* Seven links plus the button: the label must not wrap (Michael, 23 Sept). */
.nav .btn{white-space:nowrap}
.nav a.navlink{font-size:14px;font-weight:400;color:var(--ink);text-decoration:none;white-space:nowrap}
.navlink--menu{display:none} /* course link: mobile menu only */
.nav a.navlink:hover,.nav a.navlink[aria-current="page"]{color:var(--forest);text-decoration:underline;text-underline-offset:4px}
.header .btn{padding:11px 22px;min-height:42px;font-size:14px}
/* "Focus areas" drop-down (Michael, 1 Oct 2026). On a computer the six focus
   pages appear under the link on hover or keyboard focus. In the phone menu a
   tap opens them as an indented list. Markup comes from focus_menu() in
   build.py; the tap is handled in MENU_SCRIPT. */
.navgroup{position:relative}
.navgroup__top::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-3px) rotate(45deg);transition:transform .15s ease}
.navsub{display:none}
.navsub__a{display:block;color:var(--ink);text-decoration:none;white-space:nowrap}
.navsub__a:hover,.navsub__a[aria-current="page"]{color:var(--forest)}
@media (min-width:1161px){
  /* the padding keeps the pointer inside the group on its way down to the list */
  .navgroup{padding:12px 0;margin:-12px 0}
  .navsub{position:absolute;top:100%;left:-14px;min-width:220px;padding:8px;
    background:var(--ground);border:1px solid var(--line);border-radius:10px;
    box-shadow:0 12px 30px rgba(21,59,43,.14);z-index:50}
  .navgroup:hover .navsub,.navgroup:focus-within .navsub{display:block}
  .navsub__a{font-size:14px;padding:9px 12px;border-radius:6px}
  .navsub__a:hover,.navsub__a[aria-current="page"]{background:#EEF2EC}
  .navsub__all{display:none} /* the top link already goes there */
}
@media (max-width:1160px){
  .navgroup{border-bottom:1px solid var(--line)}
  .nav .navgroup a.navgroup__top{display:flex;justify-content:space-between;align-items:center;border-bottom:0}
  .navgroup__top::after{width:8px;height:8px;margin-right:6px}
  .navgroup.is-open .navgroup__top::after{transform:translateY(2px) rotate(-135deg)}
  .navgroup.is-open .navsub{display:block}
  .navsub{padding:0 0 10px 16px}
  .navsub__a{font-size:15.5px;padding:10px 2px}
  /* With the focus list open the menu is taller than a phone screen. It
     scrolls inside itself, between the header row and the bottom action bar,
     so every link stays reachable. */
  .header.nav-open .nav{max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .nav > *{flex-shrink:0}
}
/* Menu button — hidden on desktop, where the links sit inline. */
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px 6px;
  flex-direction:column;gap:5px;width:44px;align-items:flex-end}
.burger span{display:block;height:2px;width:24px;background:var(--hunter);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
.header.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.header.nav-open .burger span:nth-child(2){opacity:0}
.header.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 1160, not 1040. Media queries measure the window but layout happens inside
   the content box, and with Home added the computer row needs about 1056px of
   that box even with the tightened spacing below. Below 1160 there isn't room,
   so the hamburger takes over — which is normal at that size and beats
   shrinking the type. (23 Sept audit, and Michael seeing the logo and Home
   overlap in Safari.) */
@media (max-width:1160px){
  /* One row: mark on the left, menu on the right. The links become a panel that
     drops below, so the header itself stays about 62px whatever the page. */
  .burger{display:flex}
  .header__in{flex-wrap:wrap;padding:9px var(--pad)}
  .nav{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;
    gap:0;padding:6px 0 14px;border-top:1px solid var(--line);margin-top:9px}
  .header.nav-open .nav{display:flex}
  .nav a.navlink{font-size:16px;padding:13px 2px;border-bottom:1px solid var(--line)}
  .nav a.navlink[aria-current="page"]{text-decoration:none;color:var(--forest);font-weight:600}
  .nav a.navlink--menu{display:block}
  .nav .btn{margin-top:14px;width:100%}
}
@media (max-width:420px){.mark{gap:9px}.mark__img{width:34px;height:34px}}
/* At 320px the wordmark plus the menu button was one row too wide and wrapped,
   which put the header back up to 105px. */
@media (max-width:360px){
  .mark__name{font-size:15px;letter-spacing:.03em}
  .mark{gap:7px}
  .mark__img{width:30px;height:30px}
  .burger{width:38px;padding:10px 2px}
  .burger span{width:22px}
}

/* ---------- hero (home) ---------- */
.hero{padding-block:clamp(40px,6vw,86px) clamp(48px,7vw,92px)}
.hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero__display{
  font-family:var(--serif);font-weight:300;font-size:clamp(38px,6.4vw,68px);
  line-height:1.04;letter-spacing:-.01em;color:var(--hunter);margin:0 0 18px;
}
.hero h1{
  font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.02em;
  color:var(--stone);margin:0 0 20px;line-height:1.5;
}
.hero__lede{font-size:clamp(17px,2vw,19px);max-width:52ch;color:var(--ink);font-weight:400}
.hero__rule{height:1px;background:var(--line);margin:32px 0 20px}
.trust{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;padding:0;margin:0}
.trust li{font-size:13.5px;font-weight:400;color:var(--stone);display:flex;align-items:center;gap:8px}
.trust svg{flex:0 0 auto;color:var(--gold-deep)}
.scene{position:relative;border-radius:10px;overflow:hidden;background:var(--hunter);aspect-ratio:4/5;max-width:100%}
.scene svg{width:100%;height:100%;display:block}
.scene picture{display:block;width:100%;height:100%}
.scene__img{width:100%;height:100%;object-fit:cover;display:block}
/* No colour grade on the photo any more (Michael, 1 Oct: "the color on the
   video is better"). The still is a frame of his drone clip, in the clip's own
   colour; the warm sepia grade from 20 Sept went with the old photo. */
/* The drone glide that plays once over the still (SCENE_SCRIPT in content.py).
   It sits exactly on the photo and stays invisible until a frame is playing. */
.scene__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .6s ease;pointer-events:none}
.scene.is-live .scene__vid{opacity:1}
/* Pause / play, shown only while the clip is running. Same glass as the tag. */
.scene__pause{
  position:absolute;right:16px;bottom:16px;width:32px;height:32px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(21,59,43,.78);color:var(--ground);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
}
.scene.is-live:not(.is-done) .scene__pause{opacity:1;visibility:visible}
.scene__pause::after{content:"";position:absolute;inset:-7px}
.scene .scene__pause svg{width:13px;height:13px}
.scene .scene__pause .i-play,.scene.is-paused .scene__pause .i-pause{display:none}
.scene.is-paused .scene__pause .i-play{display:block}
.scene__pause:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Small location tag replaced the big two-line caption (Michael, 20 Sept). */
.scene__tag{
  position:absolute;left:16px;bottom:16px;margin:0;display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px 7px 11px;border-radius:999px;
  background:rgba(21,59,43,.78);color:var(--ground);
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;line-height:1;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.scene__tag svg{color:var(--gold);flex:0 0 auto;width:14px;height:14px;display:block}
@media (max-width:840px){
  .hero__grid{grid-template-columns:1fr;gap:30px}
  /* Phones: photo runs edge to edge (Michael, 20 Sept) — cancels the page
     gutter, square corners, a little taller. */
  .scene{aspect-ratio:4/3;order:-1;border-radius:0;
    margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));max-width:none}
  .scene__img,.scene__vid{object-position:50% 62%}
  /* Photo sits flush under the header on phones — no empty strip above it
     (Michael, 21 Sept). */
  .hero{padding-top:0}
  .hero .ctarow .btn{flex:1 1 100%}
}

/* ---------- section heads ---------- */
.sec-head{max-width:640px;margin:0 0 clamp(28px,4vw,44px)}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center;max-width:760px}
.sec-head h2{font-size:clamp(30px,4vw,42px);line-height:1.12;color:var(--hunter)}
.sec-head p{margin-top:14px;font-weight:400;color:var(--stone)}
.band--hunter .sec-head p{color:rgba(242,244,238,.78)}

/* ---------- routing rows ---------- */
.routes{border-top:1px solid var(--line)}
.route{
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  padding:24px 4px;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);transition:background-color .16s ease,padding-left .16s ease;
}
.route:hover,.route:focus-visible{background:rgba(195,170,83,.10);padding-left:14px}
.route__txt{font-family:var(--serif);font-size:clamp(19px,2.3vw,23px);line-height:1.35;max-width:44ch}
.route__go{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-text);white-space:nowrap;
}
.routes__close{
  font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.4vw,24px);
  color:var(--forest);margin-top:30px;max-width:40ch;line-height:1.4;
}
@media (max-width:620px){
  .route{grid-template-columns:1fr;gap:8px;padding:20px 2px}
  .route:hover,.route:focus-visible{padding-left:8px}
}

/* ---------- promise ---------- */
.promise{text-align:center;max-width:820px;margin:0 auto}
.promise__q{font-family:var(--serif);font-weight:300;font-size:clamp(28px,4.6vw,48px);
  line-height:1.24;color:var(--ground);margin:0}
.promise__q em{font-style:italic;color:var(--gold)}
.promise__by{margin-top:26px;font-size:14px;letter-spacing:.06em;color:rgba(242,244,238,.72)}

/* ---------- two-column ---------- */
.two{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,5vw,72px);align-items:start}
.two h2{font-size:clamp(28px,3.6vw,38px);line-height:1.14;color:var(--hunter)}
.two__close{font-family:var(--serif);font-size:clamp(20px,2.4vw,25px);color:var(--forest);line-height:1.4;margin-top:22px}
@media (max-width:840px){.two{grid-template-columns:1fr;gap:22px}}

/* ---------- focus cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 1px 2px rgba(21,59,43,.04);
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  transition:border-color .18s ease;
}
.card:hover{border-color:var(--gold)}
.card__img{aspect-ratio:3/2;background:var(--hunter);position:relative;max-width:100%}
.card__img svg{width:100%;height:100%}
.card__img picture{display:block;width:100%;height:100%}
.card__photo{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s ease}
.card:hover .card__photo{transform:scale(1.035)}
.card__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card h3,.card h2{font-size:24px;color:var(--hunter);margin-bottom:8px;line-height:1.2}
.card p{font-size:15.5px;font-weight:400;color:var(--stone);line-height:1.62}
/* The card's link reads as a button, not a caption (Michael, 20 Sept): outline
   pill with an arrow that fills when the card is hovered or pressed. The whole
   card is still the link. */
.card__link{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.5em;
  margin-top:auto;font-size:14.5px;font-weight:600;letter-spacing:.01em;color:var(--hunter);
  border:1px solid var(--hunter);border-radius:999px;padding:10px 20px;min-height:44px;
  transition:background-color .18s ease,color .18s ease}
.card__body p{margin-bottom:20px}
.card__link::after{content:"\2192";transition:transform .18s ease}
.card{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.card:hover,.card:focus-visible{box-shadow:0 10px 26px rgba(21,59,43,.12);transform:translateY(-2px)}
.card:hover .card__link,.card:active .card__link,.card:focus-visible .card__link{
  background:var(--hunter);color:var(--ground)}
.card:hover .card__link::after{transform:translateX(3px)}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
.card__img svg{width:100%;height:100%}
.card__img picture{display:block;width:100%;height:100%}
.card__photo{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  /* One card per row means a 3:2 image is ~260px of picture before any words.
     Wider and shorter keeps the section scannable — and matches the proportion
     of the lifestyle photos that replace these placeholders. */
  .card__img{aspect-ratio:5/2}
}

/* ---------- numbered steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);counter-reset:s}
.step{counter-increment:s;padding-top:22px;border-top:2px solid var(--gold)}
.step::before{content:counter(s);font-family:var(--serif);font-size:30px;color:var(--gold-deep);
  display:block;line-height:1;margin-bottom:10px}
.step h3{font-size:22px;color:var(--hunter);margin-bottom:6px}
.step p{font-size:15.5px;font-weight:400;color:var(--stone)}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:26px}}

/* ---------- article / interior pages ---------- */
.page-head{padding-block:clamp(38px,6vw,72px) clamp(20px,3vw,30px)}
.page-head h1{font-size:clamp(32px,5vw,50px);line-height:1.1;color:var(--hunter);max-width:20ch}
.page-head .kicker{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--stone);
  margin:14px 0 0;letter-spacing:.01em}
.page-head .lede{margin-top:18px;max-width:58ch;font-size:clamp(17px,2vw,19px)}

/* Bio page head — centred stack at every width: name, credentials, round
   portrait, buttons. Same framing as the live site rather than a desktop
   variant, which is what Michael asked for. */
.bio-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.bio-head h1{max-width:none}
.bio__pic{display:block;margin-top:26px}
.bio__pic img{width:clamp(260px,84vw,340px);height:clamp(260px,84vw,340px);
  border-radius:50%;object-fit:cover;display:block}
.bio-head .ctarow{justify-content:center;margin-top:30px}
/* Tighter joins on the bio pages (Michael, 1 Oct, reading Kyra's page on his
   phone): the bio starts closer under the buttons, and the closing green band
   with its buttons sits closer to the bio's last line ("Reach out now…"). */
.bio-head + .band--paper{padding-top:clamp(26px,4vw,52px)}
.bio-head + .band--paper:has(+ .band--hunter){padding-bottom:clamp(26px,4vw,52px)}
.bio-head + .band--paper:has(+ .band--hunter) .prose > :last-child{margin-bottom:0}
/* The closing buttons now sit at the end of the bio text, right under its last
   line and above the green band (Michael, 1 Oct). The green band is then only
   the promise, so it gets even padding top and bottom. */
.prose > .ctarow--end{margin-top:4px}
.prose > .schedule--end .schedule-note{margin-top:0}
.bio-head + .band--paper + .band--hunter{padding-block:clamp(40px,6vw,76px)}

.prose{max-width:68ch}
/* When .prose shares an element with .wrap, the 68ch cap would win and centre the
   whole column, leaving the page head and the body text on different left edges.
   Hold the container at full width and cap the measure on the children instead. */
.wrap.prose{max-width:var(--maxw)}
.wrap.prose > *{max-width:64ch}
.prose h2{font-size:clamp(25px,3.2vw,33px);line-height:1.18;color:var(--hunter);margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(20px,2.4vw,23px);color:var(--forest);margin:30px 0 10px}
.prose ul{margin:0 0 1.2em;padding-left:1.15em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--gold-deep)}
.prose .pull{font-family:var(--serif);font-size:clamp(20px,2.5vw,26px);line-height:1.38;
  color:var(--forest);margin:30px 0;padding-left:20px;border-left:2px solid var(--gold)}
.prose .note{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:20px 22px;margin:28px 0;font-size:16px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:70ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  font-family:var(--serif);font-size:clamp(19px,2.2vw,22px);line-height:1.35;color:var(--hunter);
  padding:20px 34px 20px 0;cursor:pointer;position:relative;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
/* The question is a heading inside the summary (see faq_html). It must render
   exactly as the plain summary text did, so it inherits everything and sits
   inline rather than forming its own block. */
.faq summary > :is(h2,h3){font:inherit;color:inherit;letter-spacing:inherit;
  margin:0;display:inline;text-wrap:inherit}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-6px;
  border-right:1.5px solid var(--gold-deep);border-bottom:1.5px solid var(--gold-deep);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq summary:hover{color:var(--forest)}
.faq details{transition:background-color .16s ease}
.faq summary{padding-left:14px;padding-right:44px;border-radius:8px}
.faq summary::after{right:16px}
.faq details:hover{background:rgba(195,170,83,.06)}
.faq details[open]{background:rgba(195,170,83,.07)}
.faq .a{padding:0 14px 22px}
.faq .a{padding:0 0 22px;font-weight:400;color:var(--stone)}
.faq .a p{margin-bottom:.9em}

/* ---------- therapist list ---------- */
.list{display:grid;gap:clamp(16px,2.4vw,22px);max-width:940px}
.person{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 1px 2px rgba(21,59,43,.04);
  display:grid;grid-template-columns:232px 1fr;overflow:hidden}
.person[hidden]{display:none}
.portrait{background:var(--hunter);position:relative;min-height:230px}
.portrait svg{position:absolute;inset:0;width:100%;height:100%}
/* A real photo sets the card's height rather than being stretched to fill a
   fixed column — nothing gets cropped, heads included. The initials fallback
   still fills its block as before. */
.portrait--photo{min-height:0;align-self:start;background:none}
.portrait--photo .portrait__img{position:static;width:100%;height:auto;display:block}
.portrait picture{display:block}
.portrait span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:62px;color:var(--gold);opacity:.85}
.person__body{padding:clamp(20px,3vw,30px)}
.name{font-size:clamp(25px,3vw,31px);color:var(--hunter);line-height:1.15}
.cred{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-text);margin:6px 0 0}
.pitch{font-family:var(--serif);font-size:clamp(18px,2.2vw,21px);line-height:1.45;
  color:var(--ink);margin:14px 0 18px;max-width:52ch}
.meta{display:grid;grid-template-columns:96px 1fr;gap:6px 14px;align-items:start;margin-bottom:8px}
.meta__k{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--stone);padding-top:7px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:13px;color:var(--forest);background:rgba(36,81,61,.07);
  border-radius:999px;padding:4px 12px;line-height:1.5}
.tag--m{color:var(--gold-text);background:rgba(195,170,83,.15)}
.tag.on{background:var(--gold);color:var(--hunter)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
/* Shown instead of a Book button for therapists not bookable online
   (NO_ONLINE_BOOKING in content.py). */
.schedule-note{margin:20px 0 0;font-size:15px;line-height:1.55;color:var(--stone)}
.schedule-note a{color:inherit;white-space:nowrap}
.schedule-note + .actions{margin-top:12px}
.schedule--center .schedule-note{text-align:center;color:inherit}
.page-head .schedule-note + .ctarow{margin-top:14px}
@media (max-width:820px){
  /* Stacked on phones, photo full width at its own proportions — same shape as
     the live site, and nothing is cropped. A narrow side column squeezed the
     tags into six rows and made the card taller than this does. */
  .person{grid-template-columns:1fr}
  /* Portrait smaller and centred rather than edge to edge — roughly the
     proportion of the old site and of the bio pages, so the name, the pitch and
     the tags are reachable without scrolling past a screen-width photo.
     (Michael, 23 Sept 2026.) */
  .portrait{min-height:0;aspect-ratio:3/4;width:min(58%,230px);
    margin:26px auto 0;border-radius:8px;overflow:hidden}
  .portrait--photo{aspect-ratio:auto}
  .portrait span{font-size:54px}
  .meta{grid-template-columns:1fr;gap:4px}
  .meta__k{padding-top:6px}
  /* The card's two buttons are one matching-width pair, centred — same
     treatment as the bio pages (Michael, 23 Sept 2026). Side by side, with the
     gold button on the right where the thumb lands (Michael, 1 Oct 2026: "put
     these buttons side by side with book now on the right. Make it centered").
     The order comes from the markup in team_html(). */
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;
    width:100%;max-width:340px;margin-inline:auto}
  .actions .btn{width:100%;padding-inline:10px;white-space:nowrap}
}
/* On the narrowest phones the two labels need slightly smaller type to stay
   on one line each. */
@media (max-width:360px){.actions .btn{font-size:14px;padding-inline:6px}}

/* ---------- filter chips ---------- */
.filters{background:var(--ground);padding-block:16px 14px;border-bottom:1px solid var(--line)}
.filters__lab{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--stone);margin:0 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--sans);font-size:14px;font-weight:400;color:var(--hunter);
  background:transparent;border:1px solid rgba(21,59,43,.35);border-radius:999px;
  padding:8px 16px;cursor:pointer;min-height:38px;transition:background-color .16s,border-color .16s,color .16s}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--hunter);border-color:var(--hunter);color:var(--ground)}
.count{font-size:13.5px;color:var(--stone);margin:14px 0 0}
.empty{text-align:center;padding:50px 0;color:var(--stone)}
/* Divider between filter matches and everyone else — the list never empties. */
.list__more{grid-column:1/-1;margin:6px 0 2px;font-size:12.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--stone);
  border-top:1px solid var(--line);padding-top:18px}

/* ---------- coordinator band ---------- */
.coord__in{display:grid;grid-template-columns:120px 1fr;gap:clamp(20px,4vw,40px);align-items:center}
.coord__pic{width:120px;height:120px;border-radius:50%;background:var(--forest);
  object-fit:cover;display:block}
.coord__in h2{font-size:clamp(26px,3.6vw,36px);line-height:1.15;margin-bottom:10px}
.coord__in p{color:rgba(242,244,238,.85);max-width:52ch}
@media (max-width:760px){.coord__in{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:start}
.contact h2{font-size:clamp(28px,3.6vw,38px);line-height:1.14;margin-bottom:18px}
.callbox{display:block;text-decoration:none;color:var(--ground);margin:4px 0 26px}
.callbox span{display:block;font-size:13px;letter-spacing:.06em;color:rgba(242,244,238,.72)}
.callbox strong{font-family:var(--sans);font-weight:400;font-size:clamp(22px,2.8vw,28px);
  letter-spacing:.01em;display:block;line-height:1.2}
.callbox:hover strong{color:var(--gold)}
.addr{font-size:14.5px;color:rgba(242,244,238,.78);line-height:1.7;
  border-top:1px solid rgba(242,244,238,.2);padding-top:20px}
.form{background:var(--paper);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.14);padding:clamp(22px,3vw,34px);color:var(--ink)}
.form h3,.form .form__title{font-size:clamp(22px,2.6vw,27px);color:var(--hunter);line-height:1.22;margin:0 0 6px}
.form__note{font-size:14px;color:var(--stone);margin-bottom:20px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--stone);margin:0 0 5px}
input,textarea{
  width:100%;font-family:var(--sans);font-size:16px;font-weight:400;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:11px 13px;margin-bottom:13px;
}
textarea{min-height:96px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(36,81,61,.12)}
.form .btn{width:100%}
/* The SimplePractice contact form, embedded inline. It sets its own height, so
   this is a floor rather than a fixed size. */
.spform{width:100%;border:0;display:block;min-height:660px;border-radius:6px;background:#fff}
@media (max-width:560px){.spform{min-height:720px}}
/* SimplePractice widget mount — the embed renders its own iframe here. */
.form__fallback{text-align:center;padding:8px 0 2px}
.form__fallback .form__fine{text-align:center;margin-top:12px}

.form__fine{font-size:12.5px;color:var(--stone);margin-top:14px;line-height:1.55}
@media (max-width:840px){.contact{grid-template-columns:1fr}.row{grid-template-columns:1fr}}
/* The embedded form is far taller than the details beside it, which left a tall
   empty strip of green on computers. The waterfront photo moved out of the
   full-width band above (Michael said it looked out of place there, 23 Sept
   2026) into that column. It keeps its own 16:9 proportions so the bridge's
   whole cable fan is visible (Michael, 23 Sept: "show the entire wires") — an
   earlier version stretched it to fill the height and cropped the towers off —
   and margin-top:auto pins it to the bottom of the column so its lower edge
   lines up with the bottom of the form. */
.contact__pic{margin:26px 0 0}
.contact__pic img{display:block;width:100%;height:auto;border-radius:10px}
@media (min-width:841px){
  .contact{align-items:stretch}
  .contact > div:first-child{display:flex;flex-direction:column}
  .contact .addr{margin-bottom:0}
  /* Centred in the space left over, so it sits midway between the address
     above it and the bottom of the green band (Michael, 23 Sept). margin-block
     auto splits the free height evenly above and below. */
  .contact__pic{margin-block:auto;padding-top:0;min-height:0}
  /* Taller, with the crop taken entirely off the left (Michael, 23 Sept:
     "stretch it some but keep the wire and do away with the left side").
     7:6 against a 16:9 source keeps the right 66% of the frame, which is both
     towers and the whole cable fan; object-position pins the right edge so the
     empty water and sky on the left are what gets trimmed. Phones keep the
     full frame — there the photo is full width and does not need cropping. */
  .contact__pic img{aspect-ratio:7/6;object-fit:cover;object-position:100% 50%}
}
/* Phones: address (and email) drops below the "Find the therapist" card.
   The left column dissolves so its pieces can be reordered; desktop keeps the
   two columns as they were. Michael, 17 Sept 2026. */
@media (max-width:840px){
  .contact{display:flex;flex-direction:column;gap:0}
  .contact>div:first-child{display:contents}
  .contact .form{order:1;margin-top:10px}
  .contact .addr{order:2;margin:28px 0 0;max-width:none;align-self:stretch}
  .contact__pic{order:3}
}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:rgba(242,244,238,.72);font-size:13.5px;padding-block:44px 96px}
.footer a{color:rgba(242,244,238,.72)}
.footer a:hover{color:var(--gold)}
.footer__cols{display:grid;grid-template-columns:repeat(4,max-content);column-gap:48px;row-gap:30px;margin-bottom:34px}
.footer__cols h2{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.footer__cols ul{list-style:none;margin:0;padding:0}
.footer__cols li{margin-bottom:7px}
.footer__cols a{text-decoration:none;transition:color .16s ease}
.footer__cols a:hover{color:var(--gold)}
.footer__course{text-align:center;margin:0 0 30px}
.footer__base{border-top:1px solid rgba(242,244,238,.16);padding-top:22px;text-align:center;line-height:1.7}
.footer a[href^="tel:"]{white-space:nowrap}
@media (max-width:1040px){.footer__cols{grid-template-columns:1fr 1fr;gap:22px}}

/* ---------- mobile action bar ---------- */
/* Icon above label, matching the pattern from the live site. Brand icons rather
   than the multicoloured emoji — three unrelated hues in the corner of the
   screen is the one thing that reads as unfinished on an otherwise tight page. */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  background:var(--paper);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.bar__a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:9px 4px 10px;text-decoration:none;color:var(--hunter);
  font-size:12.5px;font-weight:600;letter-spacing:.01em;line-height:1;min-height:58px;
}
.bar__a svg{width:23px;height:23px;color:var(--forest)}
.bar__a--key svg{color:var(--gold-deep)}
.bar__a span{white-space:nowrap}
.bar__a:active{background:var(--ground)}
@media (max-width:340px){.bar__a{font-size:11.5px}.bar__a svg{width:21px;height:21px}}
@media (max-width:760px){.bar{display:flex}.footer{padding-bottom:104px}}

@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}

/* Award seals. Supplied on white and not ours to recolour, so each sits on its
   own light tile rather than floating on the near-black footer.
   NB: .badge was already taken by the pill on the hero scene — this is .seal. */
/* The seal sits in the link grid (4th column on desktop; beside "Get started"
   on mobile) rather than on its own row, so the footer stays short. */
/* Four link columns since 23 Sept (therapist bios); the badges sit on their own
   row beneath them, flush with the first column. */
.footer__badges{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-start;
  align-items:flex-start}
.seal{display:block;background:var(--paper);border-radius:8px;padding:7px 8px;
  line-height:0}
/* The seal goes to the same Readers' Choice gallery as the words in the hero
   proof strip (Michael, 23 Sept). It is an <a> now, so it needs the anchor
   defaults cleared and a visible hover/focus. */
a.seal{text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
a.seal:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(21,59,43,.18)}
a.seal:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.seal img{display:block;width:84px;height:auto}
/* Psychology Today draws its own white pill badge, so no tile around it. */
.seal--pt{background:none;padding:0;border-radius:0}
.seal--pt .sx-verified-seal{margin:0 !important}
/* Two-column footer: seal lines up under Focus areas, left edges flush. */
@media (max-width:860px){.footer__badges{justify-content:flex-start}}

/* Florida telehealth notice on Michael's bio. s.456.47(4)(c) F.S.: a registered
   out-of-state provider's website must PROMINENTLY display a link to the DOH
   telehealth page — so this is a readable, bordered note near the top, not
   fine print. Moved here from the footer 20 Sept at Michael's request; he wants it
   at the bottom of his bio. */
.fl-note{border:1px solid var(--line);border-radius:6px;background:var(--ground);
  padding:14px 18px;margin:32px auto 0;max-width:40em;font-size:15px}
.fl-note a{font-weight:600;white-space:nowrap}

/* Bio text: a centred column under the centred portrait, with the text itself
   reading left to right (Michael, 20 Sept — fully centred text was hard to read). */
.wrap.prose--center > *{max-width:36em;margin-left:auto;margin-right:auto}
.prose--center p{line-height:1.8;margin-bottom:1.35em}
.prose--center .fl-note{text-align:center}

/* Focus-area pages: long text broken into shaded panels, one per topic
   (Michael, 20 Sept). Wrappers come from chunk_prose() in build.py; the words
   are untouched. Alternates cream and a soft sage tint; key lines become a
   solid green highlight box. */
.wrap.prose--chunked > .chunk,.wrap.prose--chunked > .midcta{max-width:860px}
.wrap.prose--chunked > .pullband{max-width:none}
.prose--chunked .chunk{border-radius:10px;padding:clamp(22px,3.2vw,36px);margin:0 0 22px}
.prose--chunked .chunk > *{max-width:62ch}
.prose--chunked .chunk--intro{padding:0;margin-bottom:30px}
/* A heading with no body of its own (only /about, where the mission line
   becomes the green band directly beneath) sits plainly rather than in an
   empty shaded card. */
.prose--chunked .chunk--headonly{background:none;border:0;padding:0;margin:0 0 4px}
.prose--chunked .chunk--a{background:var(--ground);border:1px solid var(--line)}
.prose--chunked .chunk--b{background:#EEF2EC;border:1px solid #DCE5DA}
.prose--chunked .chunk > h2:first-child{margin-top:0}
.prose--chunked .chunk > :last-child{margin-bottom:0}
.prose--chunked ul{background:var(--paper);border-radius:8px;padding:16px 18px 16px 2.1em;
  border:1px solid var(--line)}
.prose--chunked .pull{background:var(--hunter);color:var(--ground);border-left:0;
  border-radius:8px;padding:22px 24px;margin:26px 0}
/* More green, and a clearer start to each topic (Michael, 20 Sept):
   a gold rule above each heading, a green edge on the tinted panels, and green
   tick marks in place of bullets. */
.prose--chunked .chunk--b{border-left:3px solid var(--forest)}
.prose--chunked .chunk > h2:first-child::before{
  content:"";display:block;width:44px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--forest));margin:0 0 14px}
.prose--chunked ul{list-style:none;padding:18px 20px}
.prose--chunked ul li{position:relative;padding-left:32px;margin-bottom:.6em}
.prose--chunked ul li::before{
  content:"";position:absolute;left:4px;top:.42em;width:16px;height:9px;
  border-left:2px solid var(--forest);border-bottom:2px solid var(--forest);
  transform:rotate(-45deg)}
.prose--chunked ul li::marker{content:none}
/* The key line on each focus page spans the full page as a green band, and a
   green prompt sits mid-page so nobody has to scroll to the end to act. */
.pullband{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:none;
  background:var(--hunter);padding:clamp(30px,5vw,54px) max(var(--pad),calc(50vw - 590px + var(--pad)));
  margin-block:clamp(26px,4vw,40px)}
.pullband .pull{color:var(--ground);border-left:0;padding:0;margin:0;max-width:30ch;
  font-size:clamp(23px,3.2vw,34px);line-height:1.3}
.midcta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:none;
  background:#EEF2EC;border:1px solid #DCE5DA;border-left:3px solid var(--forest);
  border-radius:10px;padding:clamp(20px,3vw,28px);margin:0 0 22px}
/* When the green band is the last thing in the panelled text (only /trauma),
   it closes the section: no white strip between it and the section below
   (Michael, 1 Oct: "the gap is too big from the green to common questions"). */
.band--paper:has(> .prose--chunked > .pullband:last-child){padding-bottom:0}
.prose--chunked > .pullband:last-child{margin-bottom:0}
/* Inside a panel the buttons belong to that block, so they have no box of
   their own (Michael, 1 Oct: "one block instead of the split"). */
.prose--chunked .chunk > .midcta--in{background:none;border:0;border-radius:0;padding:0;
  margin:26px 0 0;max-width:none;justify-content:flex-start}
@media (max-width:560px){.prose--chunked .chunk{padding:20px 18px}
  .midcta .btn{flex:1 1 100%}}

/* ---------- centred column on interior pages (Michael, 20 Sept) ----------
   Text pages share one column sized to the copy itself and centred on screen,
   so nothing drifts to the left gutter on a wide display. Alignment inside is
   unchanged. Pages built from cards or the therapist list keep their wider
   column; the home page (no .page-head) is untouched. */
body:has(.page-head):has(.wrap.prose),
body:has(.page-head):has(.faq){--col:780px}
body:has(.page-head):has(.list),
body:has(.page-head):has(.cards){--col:1000px}
body:has(.page-head) .wrap{max-width:calc(var(--col,940px) + 2 * var(--pad))}
body:has(.page-head) .wrap.prose > *,
body:has(.page-head) .faq,
body:has(.page-head) .list,
body:has(.page-head) .page-head > *{max-width:none;margin-left:0;margin-right:0}
body:has(.page-head) .page-head h1{max-width:20ch}
/* the green band still spans the whole page */
.wrap.prose--chunked > .pullband{max-width:none}
.wrap.prose--chunked > .chunk,.wrap.prose--chunked > .midcta{max-width:none}
/* bios keep their own narrower, centred column */
.wrap.prose--center > *{max-width:36em;margin-left:auto;margin-right:auto}

/* Home "How Therapy Can Help" on computers: heading and intro centred, the
   list of statements held to a centred column (Michael, 20 Sept). Phones keep
   the full-width rows. */
@media (min-width:841px){
  #help .sec-head{margin-left:auto;margin-right:auto;text-align:center;max-width:760px}
  #help .routes,#help .routes__close{max-width:860px;margin-left:auto;margin-right:auto}
  #help .routes__close{text-align:center}
  /* Same treatment for the home "Our Focus Areas" heading and blurb. */
  #focus .sec-head{margin-left:auto;margin-right:auto;text-align:center;max-width:780px}
  /* "Our Client-Centered Approach": one centred column instead of heading-left /
     text-right, so the heading stops breaking at "Client-" (Michael, 20 Sept). */
  .two{grid-template-columns:1fr;gap:22px;max-width:780px;margin-left:auto;margin-right:auto;text-align:center}
  .two h2{white-space:nowrap}
  /* Centred paragraphs: balance the lines so no one- or two-word line is left
     stranded at the bottom (Michael, 20 Sept). */
  .two p,#help .sec-head p,#focus .sec-head p,.sec-head--center p{text-wrap:balance}
}

/* Green band on the therapy pages: centred, one line where it fits, balanced
   when it doesn't (Michael, 21 Sept). Restores the full-bleed width that the
   centred interior column (body:has(.page-head) ...) had overridden. */
body:has(.page-head) .wrap.prose--chunked > .pullband{
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:clamp(30px,5vw,54px) var(--pad)}
.pullband .pull{max-width:none;text-align:center;text-wrap:balance;margin:0 auto}
@media (min-width:841px){.pullband .pull{max-width:34em;font-size:clamp(26px,2.4vw,32px)}}

/* Therapy pages on computers: every block uses the full centred column, so the
   intro paragraphs and panel text line up with the page head above them instead
   of stopping short on the left (Michael, 21 Sept). */
body:has(.page-head) .prose--chunked .chunk > *{max-width:none}

/* Home hero trust list: the Moultrie News "Haven for Mental Health" feature
   links to the article (Michael, 21 Sept — a selling point). */
.trust__link{color:var(--forest);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;font-weight:600}
.trust__link:hover{color:var(--hunter)}
.trust__link{white-space:nowrap}

/* Therapist filter: two labelled rows, and a "See N matches" button that
   appears after a tap on phones and scrolls to the results (Michael, 21 Sept). */
.filters__lab--2{margin-top:14px}
.jump{display:none}
@media (max-width:820px){
  .jump:not([hidden]){display:inline-flex;align-items:center;gap:.4em;margin-top:12px;
    font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ground);
    background:var(--hunter);border:0;border-radius:999px;padding:10px 20px;min-height:44px;cursor:pointer}
}

/* The hero checklist's longer line wraps evenly instead of leaving one word. */
.trust li span{text-wrap:balance}

/* ---------- phones and tablets: left-aligned text, centred column ----------
   (Michael, 21 Sept) Every block reads left to right. The column is the page
   width minus equal gutters, so it is centred by construction. Overrides the
   centred-text treatments that apply on every screen size. */
@media (max-width:840px){
  .promise,.promise__q,.promise__by,
  .pullband .pull,
  .sec-head--center,
  .fl-note,.prose--center .fl-note,
  .schedule--center .schedule-note,
  .footer__course{text-align:left}
  .pullband .pull{margin-left:0}
  .ctarow--center{justify-content:flex-start}
  .bio-head{align-items:flex-start;text-align:left}
  .bio-head .ctarow{justify-content:flex-start}
  .bio__pic{align-self:center}
  /* Phones get a smaller portrait, closer to the proportion on the old site —
     about 60% of the screen rather than 84%, so the name, the photo and the
     buttons all sit on screen together. (Michael, 23 Sept 2026.) */
  .bio__pic img{width:min(60vw,300px);height:min(60vw,300px)}
}

/* Hero checklist, tidied (Michael, 21 Sept): one item per line on phones, a
   two-column grid on computers (the long Moultrie News line spans both), each
   tick in a small gold circle so the column reads as one clean list. */
.trust{display:grid;grid-template-columns:1fr;gap:12px;list-style:none;padding:0;margin:0}
.trust li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.45;color:var(--stone)}
.trust li svg{flex:0 0 auto;box-sizing:border-box;width:22px;height:22px;padding:5px;margin-top:-1px;
  border-radius:50%;background:rgba(195,170,83,.16);color:var(--gold-deep)}
@media (min-width:841px){
  .trust{grid-template-columns:auto auto;gap:12px 28px;justify-content:start}
  .trust li:last-child{grid-column:1 / -1}
}

/* The whole computer header, every width above the hamburger. Seven links plus
   the gold button need more room than the logo was leaving them: measured
   23 Sept, the row wanted 1149px inside a 1084px content box, so the nav ran
   past the right edge and, in Safari's serif metrics, over the end of the logo
   (Michael: "Home is overlapping"). These are the tighter values that were
   already in use between 1041 and 1200px, now applied at every desktop width;
   the row then needs about 1056px and fits with room to spare. Below 1161 the
   hamburger takes over instead. */
@media (min-width:1161px){
  .nav{gap:16px}
  .nav a.navlink{font-size:13.5px}
  .header .btn{padding:10px 16px}
  .mark__name{font-size:clamp(17px,2vw,24px)}
}

/* Photo band under an interior page head (About, Contact — Michael's own
   photos, 22 Sept). Same centred column as the text; full width on phones.
   Contact's is a slim band so the form stays near the top. */
.page-photo{margin:0 auto clamp(26px,4vw,44px)}
.page-photo img{display:block;width:100%;height:auto;border-radius:10px;
  box-shadow:0 1px 2px rgba(21,59,43,.06)}
.page-photo--slim img{aspect-ratio:21/8;object-fit:cover;object-position:50% 12%}  /* keep the tower tops (Michael, 22 Sept) */
@media (max-width:840px){
  .page-photo{padding-left:0;padding-right:0;margin-bottom:0}  /* no cream strip under the photo on phones */
  .page-photo img{border-radius:0}
  .page-photo--slim img{aspect-ratio:16/9}
}

/* Phones (Michael, 22 Sept): (1) the section after a page photo starts
   closer to it — the full band padding read as an odd gap; (2) the opening
   paragraphs of a panelled page line up with the heading. The 560px panel
   padding rule was also padding the unboxed intro, indenting it. */
@media (max-width:840px){
  .page-photo + .band,.page-photo + section.band{padding-top:30px}
}
@media (max-width:560px){
  .prose--chunked .chunk--intro{padding:0}
}

/* "If one of these sounds like where you are right now, start there." reads
   as the heading's subtitle (Michael, 22 Sept): tucked up under the heading,
   display serif italic in green, a touch smaller, with a short gold rule
   between them. */
#help .sec-head h2{margin-bottom:0}
#help .sec-head p{margin-top:10px;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(21px,2.7vw,27px);line-height:1.34;color:var(--forest)}
#help .sec-head p em{font-style:italic}
#help .sec-head h2::after{content:"";display:block;width:44px;height:2px;border-radius:2px;
  background:var(--gold);margin:14px 0 0}
@media (min-width:841px){#help .sec-head h2::after{margin-left:auto;margin-right:auto}}

/* Proof strip (Michael, 22 Sept): the three credentials pulled out of the
   checklist into one compact row above it — Google rating, Best of the Best,
   Haven for Mental Health. Stacks on phones. */
.proof{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 18px;padding:0 0 18px;
  border-bottom:1px solid var(--line)}
.proof__item{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink);line-height:1.35}
.proof__item svg{flex:0 0 auto;width:18px;height:18px;color:var(--gold-deep)}
.proof__sub{color:var(--stone);font-size:13.5px}
@media (min-width:841px){.trust{display:flex;flex-wrap:wrap;gap:10px 24px}.trust li{white-space:nowrap}.trust li:last-child{grid-column:auto}}
@media (max-width:840px){.proof{flex-direction:column;gap:12px}}

/* Typing in the embedded contact form: the fixed action bar would sit over the
   fields on a phone, so it steps out of the way (Michael, 22 Sept). */
.typing .bar{display:none}

/* Phone menu order (Michael, 22 Sept): Home first, Contact Us second, then the
   rest in NAV order, with the course link last. The computer row keeps NAV
   order straight through (Home shows there too since 23 Sept); only the course
   link stays hidden above the breakpoint. 1060 to match the hamburger rule
   above — at 1041-1060 the menu is open-able, so it must be ordered too. */
@media (max-width:1160px){
  .nav a.navlink--home{order:-2}
  .nav a.navlink[href="/contact-us"]{order:-1}
  .nav a.navlink--course{order:1}
  .nav .btn{order:2}
}

/* Office hours line under the address (from the Google listing, 23 Sept). */
.addr__hours{display:inline-block;margin-top:6px;color:var(--ground)}