/* CANDIDATE 1 — CLINIC, in the house feel. Deep teal, cream and mint.
   Complete and standalone: no shared stylesheet, so a change here cannot move candidate 2 or 3.
   Phone-up from 390; every wider rule is a min-width query.

   THE FEEL, shared with candidates 2 and 3: colour bands with organic cloud edges, photography
   clipped rather than framed, a highlighter chip as the section label, pill buttons with an
   arrow disc, and entrances tied to scroll position.

   WHAT IS ITS OWN: arches instead of blobs, wide shallow scallops instead of bumpy ones, a split
   hero, the document's first two sections as a pair of cards, and a LIGHT patient-voices band
   with upright cards where candidate 2 uses a dark band with tilted ones. */

:root{
  --bg:#FBF9F4; --soft:#EDF5F2; --mint:#E3EFEA; --ink:#12211F; --muted:#4E5F5D;
  --line:#DCE6E2; --accent:#153F42; --accent-d:#0D2C2E; --accent-2:#7B3F51;
  --deep:#0F2B2C; --cream:#FBF9F4; --chip:#F0E3B8; --white:#fff;
  --serif:"Fraunces",Georgia,serif; --sans:"DM Sans",system-ui,sans-serif;
  --wrap:1160px; --pad:20px;
  --pk:82px;                      /* how far a photograph drifts inside its own mask */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16.5px/1.68 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0}
p{margin:0 0 16px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);position:relative;z-index:1}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.fine{font-size:14.5px;color:var(--muted)}

/* ---- the chip, the pill and the disc ------------------------------------------------------ */
.chip{display:inline-block;margin:0 0 14px;padding:5px 13px 6px;background:var(--chip);
  border-radius:18px 16px 20px 15px;font:600 11.5px/1.35 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:#4A3A12;max-width:100%}
@media (min-width:560px){ .chip{font-size:12.5px;letter-spacing:.09em;padding:5px 14px 6px} }

.pill{display:inline-flex;align-items:center;gap:11px;min-height:54px;padding:0 9px 0 24px;
  border-radius:38px;background:var(--accent);color:#fff;font:600 15.5px/1 var(--sans);
  text-decoration:none;border:1.5px solid var(--accent);transition:background .2s,border-color .2s}
.pill .disc{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:rgba(255,255,255,.2);font-size:16px;transition:transform .25s}
.pill:hover{background:var(--accent-d);border-color:var(--accent-d)}
.pill:hover .disc{transform:translateX(3px)}
.pill.ghost{background:transparent;color:var(--accent)}
.pill.ghost .disc{background:rgba(21,63,66,.12)}
.pill.ghost:hover{background:rgba(21,63,66,.07)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* .btn is what the shared header and booking partials emit; map it onto the pill look rather
   than forking the partials per candidate */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 24px;
  border-radius:38px;background:var(--accent);color:#fff;font:600 15.5px/1 var(--sans);
  text-decoration:none;cursor:pointer;border:1.5px solid var(--accent);transition:background .2s}
.btn:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn.sm{min-height:44px;padding:0 19px;font-size:14.5px}

/* ---- header ------------------------------------------------------------------------------- */
header.site{position:sticky;top:0;z-index:40;background:rgba(251,249,244,.9);
  backdrop-filter:saturate(140%) blur(9px);border-bottom:1px solid transparent;
  transition:border-color .25s,background .25s}
header.site[data-scrolled="true"]{border-bottom-color:var(--line);background:rgba(251,249,244,.97)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:72px}
header.site .brand img{width:168px}
header.site nav{display:flex;align-items:center;gap:14px}
header.site nav a:not(.pill):not(.btn){color:var(--ink);text-decoration:none;font-weight:600;
  font-size:15px;display:none}
@media (min-width:620px){ header.site nav a:not(.pill):not(.btn){display:inline} }

/* ---- clipped photography: ARCHES ----------------------------------------------------------
   .shape is the box, .shape-in carries the clip, .shape-move is what the scroll drives. The
   mover is taller than the frame by twice the travel and starts offset by one travel, so the
   picture still covers the mask at either end of its drift. Get this wrong and an edge goes bare. */
.shape{position:relative;width:100%}
.shape-in{position:relative;overflow:hidden;border-radius:200px 200px 18px 18px;aspect-ratio:4/5}
.shape-move{position:absolute;left:0;right:0;top:calc(-1 * var(--pk));height:calc(100% + var(--pk) * 2);
  will-change:transform}
.shape-move img{width:100%;height:100%;object-fit:cover;transform-origin:center center;
  will-change:transform}
@supports (clip-path: url(#sh1)){
  .shape-in{border-radius:0}
  .shape[data-sh="1"] .shape-in{clip-path:url(#sh1)}
  .shape[data-sh="2"] .shape-in{clip-path:url(#sh2)}
  .shape[data-sh="3"] .shape-in{clip-path:url(#sh3)}
}
.shape-in.awaiting{display:flex;align-items:center;justify-content:center;background:var(--mint);
  border:1px dashed var(--line)}
.shape-in.awaiting p{margin:0;text-align:center;font:600 15px/1.5 var(--sans);color:var(--muted)}

/* ---- bands and their cloud edges ----------------------------------------------------------- */
.band{position:relative;padding:60px 0;background:var(--band,var(--bg))}
.band > .edge{position:absolute;left:0;right:0;bottom:100%;width:100%;height:52px;display:block;
  color:var(--band,var(--bg));pointer-events:none}
@media (min-width:760px){ .band > .edge{height:78px} }
@media (min-width:1100px){ .band > .edge{height:96px} }
@media (min-width:860px){ .band{padding:84px 0} }

.answer{--band:var(--soft)}
.insurers{--band:var(--bg)}
.pair{--band:var(--mint)}
.services{--band:var(--bg)}
.wide{--band:var(--soft)}
.process{--band:var(--bg)}
.gallery{--band:var(--mint)}
.wide.flip{--band:var(--bg)}
.voices{--band:var(--soft)}
.provider{--band:var(--mint)}
.faqs{--band:var(--bg)}
.close{--band:var(--deep)}

/* ---- hero: type beside a tall arch ---------------------------------------------------------
   The third distinct answer to the hero across the three: candidate 2 puts type over a full-bleed
   photograph, candidate 3 puts the photograph in a band below the headline, this one sets them
   side by side. */
.hero{padding:40px 0 74px}
.hero .wrap{display:grid;gap:34px}
.hero h1{font-size:clamp(33px,8vw,54px);max-width:16ch}
.hero-pic{max-width:330px;margin:0 auto}
@media (min-width:880px){
  .hero{padding:56px 0 104px}
  .hero .wrap{grid-template-columns:1.15fr 0.85fr;gap:60px;align-items:center}
  .hero-pic{max-width:none;margin:0}
}

/* ---- overview: left-ranged under a rule, not centred --------------------------------------
   Candidate 2 centres this paragraph. Ranging it left under a rule is the clinic reading of the
   same block: it looks like a record rather than a statement. */
.answer .lede{font-size:18.5px;line-height:1.7;max-width:74ch;margin:0 0 20px;
  padding-top:22px;border-top:2px solid var(--accent)}
.answer .stand{font-family:var(--serif);font-size:21px;line-height:1.38;max-width:52ch;
  margin:0;color:var(--muted)}
@media (min-width:760px){ .answer .lede{font-size:20px} .answer .stand{font-size:24px} }

/* ---- in-network: label beside the plans ---------------------------------------------------- */
.insurers .wrap{display:grid;gap:22px}
.insurers h2{font-size:clamp(24px,5vw,32px);margin-bottom:10px}
.ins{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0}
.ins li{padding:12px 4px;border-bottom:1px solid var(--line);font-weight:600;font-size:15px}
@media (min-width:860px){
  .insurers .wrap{grid-template-columns:0.8fr 1.2fr;gap:56px;align-items:start}
  .ins{grid-template-columns:repeat(2,1fr);gap:0 40px}
  .ins li{font-size:15.5px}
}

/* ---- the document's first two sections, as a pair of cards --------------------------------- */
.pair .wrap{display:grid;gap:26px}
.pair .card{background:var(--cream);border-radius:20px;padding:26px 24px 24px;
  border:1px solid var(--line)}
.pair .card .shape{max-width:220px;margin:0 0 20px}
.pair .card h2{font-size:clamp(22px,4.6vw,27px);margin-bottom:12px}
.pair .card p{margin:0;color:var(--muted);font-size:16px}
@media (min-width:820px){
  .pair .wrap{grid-template-columns:1fr 1fr;gap:34px}
  .pair .card{padding:32px 30px 28px}
}

/* ---- services: a ruled index ---------------------------------------------------------------
   Candidate 1 is the page you scan, so the list reads down a column rather than as a cloud of
   pills — that treatment belongs to candidate 2, and the difference is the point. */
.services h2{font-size:clamp(25px,5.2vw,34px);margin-bottom:20px}
.services .index{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:1fr;
  gap:0 40px;border-top:1px solid var(--line)}
.services .index li{padding:11px 2px;border-bottom:1px solid var(--line);font-size:16px}
@media (min-width:640px){ .services .index{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .services .index{grid-template-columns:repeat(3,1fr)} }

/* ---- the wide sections --------------------------------------------------------------------- */
.wide .wrap{display:grid;gap:30px}
.wide h2{font-size:clamp(25px,5.4vw,36px);margin-bottom:16px}
.wide .t p{max-width:58ch;color:var(--muted)}
.wide .t .pill{margin-top:8px}
.wide .shape{max-width:330px;margin:0 auto}
@media (min-width:860px){
  .wide .wrap{grid-template-columns:1.15fr 0.85fr;gap:58px;align-items:center}
  .wide .shape{max-width:none;margin:0}
  .wide.flip .wrap{grid-template-columns:0.85fr 1.15fr}
  .wide.flip .shape{order:0}
}

/* ---- how care works: a connected rail ------------------------------------------------------
   Numbered markers are only honest when the content is a sequence. This one is: it is the order
   a patient goes through, so the numbers sit on a rule that joins them. */
.process h2{font-size:clamp(25px,5.2vw,34px);margin-bottom:34px}
.rail{list-style:none;margin:0;padding:0;display:grid;gap:30px;position:relative}
.rail li{position:relative;padding-left:60px}
.rail .n{position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:19px;font-weight:600}
.rail h3{font-size:19.5px;margin:6px 0 7px}
.rail p{margin:0;color:var(--muted);font-size:15.5px}
@media (min-width:860px){
  .rail{grid-template-columns:repeat(3,1fr);gap:34px}
  .rail li{padding-left:0;padding-top:62px}
  /* the rule the numbers stand on */
  .rail::before{content:"";position:absolute;top:21px;left:21px;right:21px;height:2px;
    background:var(--line)}
  .rail .n{top:0}
}

/* ---- gallery: a mosaic of arches at three heights ------------------------------------------ */
.gallery h2{font-size:clamp(25px,5.2vw,34px);margin-bottom:30px;max-width:20ch}
.mosaic{display:grid;gap:20px}
@media (min-width:760px){
  .mosaic{grid-template-columns:1.1fr 0.95fr 0.95fr;gap:24px;align-items:start}
  .mosaic .m2{margin-top:44px}
  .mosaic .m3{margin-top:18px}
}

/* ---- patient voices: LIGHT, upright ---------------------------------------------------------
   Deliberately not candidate 2's dark band with tilted cards. Same content, opposite treatment,
   so the two pages cannot be mistaken for each other at a glance. */
.voices h2{font-size:clamp(25px,5.2vw,34px);margin-bottom:12px}
.voices .pending{max-width:60ch;margin:0 0 30px;color:var(--muted);font-size:15px}
.voices .cards{display:grid;gap:20px}
.voices .card{margin:0;padding:24px 0 0;border-top:3px solid var(--accent);background:none}
.voices .card p{margin:0 0 14px;font-size:16.5px;line-height:1.6}
.voices .card cite{font-style:normal;font-weight:700;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-2)}
@media (min-width:860px){ .voices .cards{grid-template-columns:repeat(3,1fr);gap:30px} }

/* ---- the provider --------------------------------------------------------------------------- */
.provider .wrap{display:grid;gap:30px}
.provider h2{font-size:clamp(23px,5vw,32px);margin-bottom:18px}
.provider .shape{max-width:300px}
.creds{margin:0 0 16px;display:grid;grid-template-columns:auto 1fr;gap:0 18px;
  border-top:1px solid var(--line)}
.creds dt{padding:11px 0;font-weight:700;font-size:13.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.creds dd{padding:11px 0;margin:0;font-size:16px;border-bottom:1px solid var(--line)}
@media (min-width:860px){
  .provider .wrap{grid-template-columns:0.7fr 1.3fr;gap:56px;align-items:center}
  .provider .shape{max-width:none}
}

/* ---- questions ------------------------------------------------------------------------------ */
.faqs h2{font-size:clamp(25px,5.2vw,34px);margin-bottom:26px}
.faq-list{max-width:820px}
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:var(--serif);font-size:18.5px;font-weight:600;line-height:1.35}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;
  margin-top:-8px;border-right:2.2px solid var(--accent);border-bottom:2.2px solid var(--accent);
  transform:rotate(45deg);transition:transform .28s}
details.faq[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
details.faq summary:hover{color:var(--accent)}
.faq-a{overflow:hidden;transition:height .3s ease}
.faq-a p{margin:0 0 20px;color:var(--muted);max-width:70ch;font-size:16px}

/* ---- closing call to action ------------------------------------------------------------------ */
.close{color:var(--cream)}
.close .wrap{display:grid;gap:30px}
.close h2{font-size:clamp(25px,5.6vw,38px);color:var(--cream);margin-bottom:12px}
.close .close-t p{color:rgba(251,249,244,.8);max-width:44ch}
@media (min-width:920px){ .close .wrap{grid-template-columns:1fr 1fr;gap:54px;align-items:start} }
.book-card{background:var(--cream);border-radius:20px;padding:28px 24px;color:var(--ink)}
.book-card h3{font-size:21px;margin-bottom:8px}
.book-card > p{color:var(--muted);font-size:15.5px}
.book-card label{display:block;margin:0 0 14px;font-weight:600;font-size:14px}
.book-card input,.book-card textarea{display:block;width:100%;margin-top:7px;padding:12px 13px;
  border:1.5px solid var(--line);border-radius:9px;background:#fff;font:400 16px/1.5 var(--sans);
  color:var(--ink)}
.book-card input:focus,.book-card textarea:focus{outline:2px solid var(--accent);outline-offset:1px;
  border-color:var(--accent)}
.book-card [aria-invalid="true"]{border-color:#A63A2A}
.book-card .err{display:block;margin-top:6px;color:#A63A2A;font-size:13.5px;font-weight:600}
.book-card button{width:100%;border:0;cursor:pointer}
.book-card .fine{margin:13px 0 0}

/* ---- footer ---------------------------------------------------------------------------------- */
footer.site{background:var(--deep);color:var(--cream);padding:50px 0 40px;text-align:center}
footer.site .fmark{margin:0 auto 14px}
footer.site .fname{font-family:var(--serif);font-size:21px;font-weight:600;margin:0 0 6px}
footer.site .fmeta{color:rgba(251,249,244,.74);margin:0 0 16px;font-size:15px}
footer.site nav{display:flex;gap:20px;justify-content:center;margin-bottom:18px}
footer.site nav a{color:var(--cream);font-weight:600;font-size:15px}
footer.site .fine{color:rgba(251,249,244,.5);font-size:13.5px;margin:0}

/* ---- focus ------------------------------------------------------------------------------------ */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2.5px solid var(--accent);
  outline-offset:3px;border-radius:4px}
.close a:focus-visible,footer.site a:focus-visible{outline-color:var(--chip)}



/* ---- the appointment form's confirmation ----------------------------------------------------
   motion.js appends .sent and sets data-sent on the card. The form is hidden rather than left
   filled in beneath the thank-you, which is what happened while these rules were missing. */
.book-card[data-sent="true"] form,
.book-card[data-sent="true"] > p{display:none}
.book-card .sent{text-align:center;padding:10px 0 4px}
.book-card .sent .tick{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:25px;line-height:1}
.book-card .sent h3{margin:0 0 10px}
.book-card .sent p{margin:0;color:var(--muted);font-size:15.5px;max-width:42ch;
  margin-left:auto;margin-right:auto}

/* ================================================================ MOTION START STATES
   Nothing above this point hides anything. Every rule below is behind `.motion`, which the script
   adds to <html> only once it is running, so a missing or broken script leaves a complete page.
   Nothing here targets the first screenful either — the script strips `data-anim` from whatever
   is already on screen at load, which takes these rules off with it. */
.motion [data-anim]{will-change:transform,opacity}
.motion [data-anim].fade{opacity:0}
/* the wipe's start state: the block is clipped away from the bottom and uncovers downward */
.motion [data-anim].wipe{clip-path:inset(0 0 100% 0)}
.motion .band[data-anim] > .edge{transform:translate3d(0,20px,0)}
.motion .shape[data-anim]{opacity:0}

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

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   SUPPORTIVE MINDS — THE FULL SITE (6 Oct 2026), on design 1 (base.css, the old d1.css).
   The client: "Please use the colors in my logo for my website." Navy #062C59 from the hands and the
   word SUPPORTIVE; teal #15787E from MINDS (AA on white) and the lighter #46BEBD of the brain for
   tints. The arches, cloud edges, chips, pills and rail are design 1's; this file recolours them and
   adds the header lockup, the menu, the inner hero, lists, the named portrait, the footer. Phone-up.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#FFFFFF; --soft:#EEF7F7; --mint:#E2F1F1; --ink:#0E1E33; --muted:#45566A;
  --line:#D5E4E6; --accent:#062C59; --accent-d:#041E3E; --accent-2:#15787E;
  --deep:#062C59; --cream:#F6FAFA; --chip:#D3EEED; --teal:#15787E; --teal-l:#46BEBD;
  --wrap:1180px;
}
.chip{color:var(--accent);background:var(--chip)}
a{color:var(--teal)}

/* ---- header: her mark and her wordmark set as a horizontal lockup ----------------------------- */
header.site{background:rgba(255,255,255,.94)}
header.site[data-scrolled="true"]{background:rgba(255,255,255,.98)}
header.site .wrap{gap:12px;min-height:76px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
header.site .brand img{width:46px;height:auto}
.brand .word{display:flex;flex-direction:column;line-height:1;font-family:"Montserrat",var(--sans);font-weight:600}
.brand .w1{color:var(--accent);font-size:15px;letter-spacing:.06em}
.brand .w2{color:var(--teal);font-size:12px;letter-spacing:.42em;margin-top:4px}
.main-nav,.hd-phone{display:none}
header.site .btn.sm{margin-left:auto;padding:0 16px;font-size:14px;white-space:nowrap}
.burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;flex:0 0 auto}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:var(--accent);position:relative;border-radius:2px}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.drawer{border-top:1px solid var(--line);background:#fff}
.drawer .wrap{display:flex;flex-direction:column;padding-top:8px;padding-bottom:22px}
.drawer a{padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600}
.drawer .sub-a{padding-left:16px;font-weight:500}
.drawer .grp{margin:14px 0 2px;font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.drawer .btn{margin-top:18px;border-bottom:0;color:#fff}
@media (max-width:420px){ .brand .word{display:none} }
@media (min-width:1040px){
  .main-nav{display:flex;align-items:center;gap:22px;margin-left:auto}
  .main-nav > a,.has-sub > a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;display:inline-flex;align-items:center;min-height:44px}
  .main-nav a[aria-current="page"]{color:var(--teal);box-shadow:inset 0 -2px 0 var(--teal-l)}
  .hd-phone{display:inline;font-weight:700;color:var(--accent);text-decoration:none;font-size:15px;white-space:nowrap}
  header.site .btn.sm{margin-left:0}
  .burger,.drawer{display:none!important}
  .brand .w1{font-size:17px}.brand .w2{font-size:13px}
  header.site .brand img{width:52px}
}
.has-sub{position:relative}
.has-sub .sub{position:absolute;top:100%;left:-16px;min-width:260px;margin:0;padding:10px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(6,44,89,.14);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility 0s linear .2s}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sub a{display:block;padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:500;font-size:15px}
.sub a:hover,.sub a[aria-current="page"]{background:var(--soft);color:var(--accent)}

/* ---- hero: inner pages are shorter, with the trail above the heading ----------------------------- */
.hero.inner{padding:30px 0 70px}
.hero.inner h1{font-size:clamp(31px,6.6vw,48px)}
.hero.inner .hero-pic{max-width:300px}
@media (min-width:880px){ .hero.inner{padding:44px 0 96px} .hero.inner .hero-pic{max-width:420px;justify-self:end;width:100%} }
.crumbs{font-size:14px;margin:0 0 14px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px}
.crumbs li + li::before{content:"/";margin-right:10px;color:var(--line)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--teal);text-decoration:underline}
.crumbs [aria-current]{color:var(--teal);font-weight:600}
.hero.plain{padding-bottom:60px}
.siblings{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
@media (min-width:640px){ .siblings{grid-template-columns:repeat(2,1fr)} }

/* ---- grounds: alternate tints so neighbouring bands never share a colour ------------------------- */
.answer{--band:var(--soft)}
.wide{--band:var(--bg)}
.wide.alt{--band:var(--mint)}
.services{--band:var(--bg)}
.services.alt{--band:var(--soft)}
.checks-band{--band:var(--mint)}
.checks-band.alt{--band:var(--bg)}
.process{--band:var(--soft)}
.provider{--band:var(--mint)}
.faqs{--band:var(--bg)}
.related{--band:var(--soft)}
.close{--band:var(--deep)}

/* ---- prose beside an arch: lists inside the prose ------------------------------------------------- */
.wide .t p a,.services a,.checks a,.faq-a a,.lede a,.provider a{color:var(--teal);text-underline-offset:3px}
.ticks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:28px;color:var(--muted);font-size:16px;line-height:1.6}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;border-radius:50%;background:var(--teal-l);box-shadow:inset 0 0 0 4px var(--soft)}
.crisis-note{font-style:italic;color:var(--muted);font-size:15px}

/* ---- the ruled index carries a bold label and its text ------------------------------------------- */
.services .intro{max-width:70ch;color:var(--muted);margin-bottom:22px}
.services .index li{line-height:1.55}
.services .index b{color:var(--accent);font-weight:700}
.services .index.one{grid-template-columns:1fr!important;max-width:760px}
.services .after{margin-top:-6px;max-width:70ch}
@media (min-width:980px){ .services .index{grid-template-columns:repeat(2,1fr)} }

/* ---- check list ----------------------------------------------------------------------------------- */
.checks-band h2{font-size:clamp(25px,5.2vw,34px);margin-bottom:24px}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;font-size:16.5px;line-height:1.6;color:var(--muted)}
.checks b{color:var(--accent)}
.ck{width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1}
@media (min-width:760px){ .checks{grid-template-columns:repeat(2,1fr);gap:18px 40px} }
.ins-line{display:inline-block;margin:22px 0 0;padding:8px 16px;border-radius:30px;background:var(--chip);color:var(--accent);font-weight:700;font-size:15px}

/* ---- the rail with four steps --------------------------------------------------------------------- */
.rail .n{background:var(--teal)}
@media (min-width:860px){ .rail.four{grid-template-columns:repeat(4,1fr)} }

/* ---- her portrait with her name on it --------------------------------------------------------------- */
.provider .wrap{align-items:center}
.her{margin:0;position:relative;max-width:360px}
.her .shape-in{aspect-ratio:4/5}
.her figcaption{position:relative;margin:-56px 18px 0;padding:14px 18px;background:#fff;border-radius:14px;border:1px solid var(--line);box-shadow:0 14px 30px rgba(6,44,89,.12);z-index:2;display:flex;flex-direction:column;gap:3px}
.her .nm{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--accent)}
.her .cr{font-size:13.5px;font-weight:700;letter-spacing:.05em;color:var(--teal)}
@media (min-width:860px){ .her{max-width:none} }

/* ---- related pages --------------------------------------------------------------------------------- */
.related h2{font-size:clamp(23px,4.6vw,30px);margin-bottom:20px}
.rel{display:grid;gap:12px}
.rel a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 16px 20px;background:#fff;border:1px solid var(--line);border-radius:40px;color:var(--accent);font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s}
.rel a:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(6,44,89,.1)}
.rel .disc{width:34px;height:34px;border-radius:50%;background:var(--soft);display:inline-flex;align-items:center;justify-content:center}
@media (min-width:640px){ .rel{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .rel{grid-template-columns:repeat(4,1fr)} }

/* ---- the closing band and its form ------------------------------------------------------------------- */
.close a{color:#fff}
.close .crisis-note{color:rgba(255,255,255,.75)}
.close .ins-line{background:rgba(255,255,255,.14);color:#fff}
.book-card .fine a{color:var(--teal)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- footer: her full logo on a white tile, three columns --------------------------------------------- */
footer.site{text-align:left;padding:56px 0 34px}
.fgrid{display:grid;gap:32px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.16)}
.ftile{display:inline-block;background:#fff;border-radius:18px;padding:14px 18px;margin-bottom:16px}
.ftile img{width:150px;height:auto}
footer.site .fbrand p{margin:0 0 6px;color:rgba(255,255,255,.85)}
footer.site .fbrand a{color:#fff;font-weight:700;font-size:18px;text-decoration:none}
footer.site h2{font:700 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-l);margin:0 0 14px}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
footer.site ul a{color:rgba(255,255,255,.88);text-decoration:none;font-size:15px}
footer.site ul a:hover,footer.site ul a[aria-current="page"]{color:#fff;text-decoration:underline}
footer.site .crisis{margin:22px 0 6px;color:rgba(255,255,255,.8);font-size:14.5px}
footer.site .fine{color:rgba(255,255,255,.6);text-align:left}
footer.site .fine a{color:rgba(255,255,255,.8)}
@media (min-width:760px){ .fgrid{grid-template-columns:1.2fr 1fr 1fr;gap:48px} }

/* base.css styles every `header.site nav` as a flex row and shows its links from 620px; the two navs here
   need their own rules at that specificity, or the drawer shows open and the desktop menu shows on phones */
header.site nav.main-nav{display:none}
header.site nav.drawer{display:block}
header.site nav.drawer[hidden]{display:none}
header.site nav.drawer a{display:block}
header.site .has-sub{display:flex;align-items:center}
@media (min-width:1040px){
  header.site nav.main-nav{display:flex;align-items:center;gap:22px;margin-left:auto}
  header.site nav.main-nav a{display:inline-flex;align-items:center}
  header.site nav.drawer{display:none}
}

/* the menu shares the row centre with the phone and the button: base.css sets these links display:inline at
   0,3,3 specificity, so the override has to match it */
@media (min-width:1040px){ header.site .wrap{justify-content:flex-start;gap:26px} header.site nav.main-nav{margin:0 0 0 auto;align-self:center} header.site nav.main-nav a:not(.pill):not(.btn){display:inline-flex;align-items:center;min-height:44px;line-height:1} }


/* ---- her portrait, whole: her photograph at its own proportion under an arch head, no drift, the name card
   beneath it rather than over her (the user, 6 Oct: "need to make all of her be shown, it is cut off") ---- */
.her-frame{border-radius:220px 220px 18px 18px;overflow:hidden;background:#fff;box-shadow:0 18px 40px rgba(6,44,89,.12)}
.her-frame img{width:100%;height:auto;display:block}
.her figcaption{margin:16px 0 0;box-shadow:none}

/* ---- the conditions as cards: tinted grounds, a line icon in an arch badge, chips, "+N more" in place ---- */
.groups-band{--band:var(--soft)}
.groups-band.alt{--band:var(--bg)}
.groups-band h2{font-size:clamp(25px,5.2vw,34px);margin-bottom:12px}
.groups-band .intro{max-width:70ch;color:var(--muted);margin-bottom:26px}
.cgrid{display:grid;gap:18px;margin-bottom:24px}
@media (min-width:640px){ .cgrid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .cgrid{grid-template-columns:repeat(3,1fr);gap:22px} }
.ccard{position:relative;background:#fff;border:1px solid var(--line);border-radius:26px 26px 22px 22px;padding:24px 22px 20px;
  display:flex;flex-direction:column;gap:12px;transition:transform .25s ease,box-shadow .25s ease;will-change:transform}
.ccard:hover{box-shadow:0 22px 44px rgba(6,44,89,.13)}
.ccard::after{content:"";position:absolute;inset:auto 22px 0 22px;height:4px;border-radius:4px 4px 0 0;background:var(--tone);opacity:.9}
.tone0{--tone:var(--teal);--tint:#E0F2F1}
.tone1{--tone:var(--accent);--tint:#E3EAF3}
.tone2{--tone:var(--teal-l);--tint:#E6F6F6}
.cicon{width:58px;height:62px;border-radius:30px 30px 10px 10px;background:var(--tint);color:var(--tone);display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.cicon svg{width:32px;height:32px}
.ccard:hover .cicon{transform:translateY(-3px) rotate(-6deg)}
.ccard h3{font-size:21px;color:var(--accent)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:6px 12px;border-radius:20px;background:var(--tint);color:var(--ink);font-size:14.5px;line-height:1.35}
.cc-js .ccard:not(.open) .chips .extra{display:none}
.ccard.open .chips .extra{animation:chipIn .35s ease both}
@keyframes chipIn{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.cmore{display:none;align-self:flex-start;margin-top:2px;padding:7px 14px;border-radius:20px;border:1.5px solid var(--tone);background:transparent;color:var(--accent);font:700 13.5px/1 var(--sans);cursor:pointer;transition:background .2s,color .2s}
.cc-js .cmore{display:inline-block}
.cmore:hover{background:var(--tone);color:#fff}
.cmore:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion: reduce){ .ccard,.cicon{transition:none} .ccard.open .chips .extra{animation:none} }

/* trust bar (document § 02 "Trust bar"): five short proofs under the overview, wrapping as pills on a phone and
   sitting in one row from desktop; the check badge is the proof list's own */
.trust{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.trust li{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 7px;border-radius:30px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--line);color:var(--accent);font-weight:700;font-size:14.5px;line-height:1.25}
.trust .ck{width:24px;height:24px;font-size:12px;flex:none}
@media (min-width:1100px){.trust{flex-wrap:nowrap;justify-content:space-between}.trust li{font-size:14px}}