/* ============================================================
   Heart Space Clinical Psychology
   Refined clinical minimalism: editorial, warm, unhurried.
   Built by SkiFi Designs.
   ============================================================ */

:root{
  /* Brand, sampled from the official logo artwork */
  --terracotta:#CF4E16;       /* official, decorative / large */
  --terracotta-btn:#B8410F;   /* fills behind white text, AA */
  --terracotta-dk:#A63A0D;    /* small text on light, AA   */
  --sage:#878C60;             /* official, decorative      */
  --sage-text:#64694A;        /* small text on cream, AA on every wash */
  --sage-lt:#AEB292;
  --sage-on-dark:#BCC0A4;  /* small text on teal, AA */
  --gold-on-dark:#C39E60;  /* large text on teal, AA */
  --teal:#14463F;
  --teal-dp:#164039;
  --teal-dk:#0D2F29;
  --gold:#B08A4A;

  --cream:#FBF7F1;
  --cream-2:#F5F0E7;
  --sage-wash:#EDF0E7;
  --blush-wash:#FAEEE6;
  --rule:#E3D9C9;
  --rule-soft:#EDE6DA;

  --ink:#2A3731;
  --ink-2:#5B675F;
  --on-dark:#EDEAE2;
  --on-dark-2:rgba(237,234,226,.74);

  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* 8pt rhythm */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  --wrap:1120px;

  /* On a desktop the whole site sits inside a margin, so the cream page
     shows down both sides and every band reads as a card rather than a
     full-bleed stripe. Zero below 1024px, where the screen has no room
     to give away. */
  --page-inset:0px;
  --narrow:760px;
  --gut:clamp(22px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* One page edge, shared by .wrap and by the full-bleed hero, so every
     left-hand element lines up on the same vertical no matter the layout. */
  --edge:max(var(--gut), calc((100vw - (var(--page-inset) * 2) - var(--wrap)) / 2 + var(--gut)));

  /* Curvature scale: nothing in this design has a sharp corner. */
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:40px;
  --r-slab:clamp(28px,4.5vw,64px);
  --slab-gap:clamp(10px,1.3vw,16px);
  --r-pill:999px;

  --lift:0 1px 2px rgba(42,55,49,.035), 0 10px 26px -14px rgba(42,55,49,.16);
  --lift-hi:0 2px 5px rgba(42,55,49,.05), 0 26px 50px -22px rgba(42,55,49,.26);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.75;font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--teal);text-underline-offset:3px}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.1;margin:0;color:var(--teal);letter-spacing:-.006em}
h1{font-size:clamp(2.5rem,4.4vw,3.7rem);line-height:1.07}
h2{font-size:clamp(2rem,3.7vw,3.05rem)}
h3{font-size:clamp(1.3rem,1.9vw,1.6rem);font-weight:500}
p{margin:0 0 1.2em}
p:last-child{margin-bottom:0}
strong{font-weight:500}

.wrap{width:100%;padding-inline:var(--edge)}
.narrow{padding-inline:var(--edge)}
.narrow > *{max-width:var(--narrow)}
.section{padding-block:clamp(64px,7.4vw,104px)}
.section--sm{padding-block:clamp(48px,5vw,68px)}
.center{text-align:center}
/* In a narrow column every child is capped at --narrow, so a centred
   section has to centre those boxes too, not just the text inside them.
   Without this the heading and eyebrow sit left while the lede, which
   has its own auto margins, sits centre. */
.narrow.center > *{margin-inline:auto}

/* ---------- Desktop page inset ----------
   Below 1024px the site runs edge to edge; above it the body carries a
   side margin so the cream shows on both flanks. Every band that used to
   bleed off-screen gets its outer corners back, since they are now
   visible edges rather than cut-offs. */
@media (min-width:1024px){
  :root{
    --page-inset:clamp(20px,2.6vw,52px);
    /* The content starts a single gutter in from the page edge, on the same
       vertical as the wordmark in the logo, instead of being centred inside
       a narrower column and leaving a band of empty cream down the left. */
    --edge:var(--gut);
  }
  body{padding-inline:var(--page-inset)}
  /* The header spans the full inset width, so the logo sits on the same
     vertical as the left page edge and Get Started finishes on the same
     vertical as the hero photograph, rather than both being tucked into
     the narrower text column. */
  .hdr__in{padding-inline:0}
  .hero{border-radius:var(--r-slab)}
  .hero__img{border-radius:var(--r-xl)}
  /* The footer keeps the side margin but runs to the bottom of the page:
     a strip of cream below it just reads as leftover space. */
  .ftr{border-radius:var(--r-slab) var(--r-slab) 0 0}
}

/* ---------- Surfaces ---------- */
.on-dark{background:var(--teal);color:var(--on-dark);border-radius:var(--r-slab);
  margin-block:var(--slab-gap)}
.on-dark h2,.on-dark h3{color:#FBF7F1}
.on-dark p{color:rgba(237,234,226,.88)}
.on-cream2{background:var(--cream-2);border-radius:var(--r-slab);margin-block:var(--slab-gap)}
.on-sage{background:var(--sage-wash);border-radius:var(--r-slab);margin-block:var(--slab-gap)}
.on-blush{background:var(--blush-wash);border-radius:var(--r-slab);margin-block:var(--slab-gap)}

/* ---------- Section index (editorial device) ---------- */
.idx{
  display:flex;align-items:baseline;gap:var(--s2);
  font-family:var(--sans);font-size:.7rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--sage-text);
  margin:0 0 var(--s3);
}
.idx__n{font-family:var(--display);font-size:1.15rem;letter-spacing:0;color:var(--terracotta-dk);font-weight:500}
.idx::after{content:"";flex:1 1 auto;height:1px;background:var(--rule);max-width:180px}
.idx--c{justify-content:center}
.idx--c::after{display:none}
.on-dark .idx{color:#D7DBC4}
.on-dark .idx__n{color:#DCC08C}
.on-dark .idx::after{background:rgba(237,234,226,.22)}

.lede{font-size:clamp(1.1rem,1.55vw,1.28rem);line-height:1.68;color:var(--ink-2);max-width:60ch}
.center .lede{margin-inline:auto}
.on-dark .lede{color:rgba(237,234,226,.88)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:50px;padding:1rem 2.3rem;border:1px solid transparent;border-radius:var(--r-pill);
  font-family:var(--sans);font-size:.76rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease);
}
.btn svg{width:15px;height:15px;transition:transform .28s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--solid{background:var(--terracotta-btn);color:#fff}
.btn--solid:hover{background:var(--terracotta-dk)}
.btn--line{border-color:rgba(20,70,63,.3);color:var(--teal);background:transparent}
.btn--line:hover{border-color:var(--teal);background:var(--teal);color:#fff}
.btn--light{background:var(--cream);color:var(--teal)}
.btn--light:hover{background:#fff}
.btn--sm{min-height:42px;padding:.65rem 1.5rem;font-size:.68rem}

.tlink{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  font-size:.74rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  color:var(--terracotta-dk);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .28s var(--ease);
}
/* In the hero the secondary action is a button, not a text link, so the
   two calls to action read as a matched pair. */
.hero__cta .tlink{
  min-height:50px;padding:1rem 2rem;border:1px solid rgba(20,70,63,.28);
  border-radius:var(--r-pill);color:var(--teal);
  transition:background .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease);
}
.hero__cta .tlink:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.tlink svg{width:14px;height:14px;transition:transform .28s var(--ease)}
.tlink:hover{border-bottom-color:var(--terracotta)}
.tlink:hover svg{transform:translateX(3px)}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;background:rgba(251,247,241,.92);
  backdrop-filter:saturate(1.5) blur(12px);-webkit-backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease);
}
.hdr.is-stuck{border-bottom-color:var(--rule)}
.hdr__in{display:flex;align-items:center;gap:var(--s4);min-height:92px}
.hdr__logo{margin-right:auto;flex:0 0 auto}
.hdr__logo img{height:76px;width:auto}
/* The tagline tucks under the wordmark to read as one lockup, matching
   the launch poster. The logo art carries roughly 20px of transparent
   padding at its foot, so the line is pulled back through it. */
.nav{display:flex;align-items:center;gap:var(--s4)}
.nav a:not(.btn){
  position:relative;padding-block:.4rem;font-size:.84rem;letter-spacing:.04em;
  color:var(--ink);text-decoration:none;
}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:var(--terracotta);transition:right .32s var(--ease);
}
.nav a:not(.btn):hover::after{right:0}
.burger{display:none;width:48px;height:48px;background:none;border:0;cursor:pointer;color:var(--teal);
  align-items:center;justify-content:center}

@media (max-width:960px){
  .hdr__in{min-height:74px;gap:var(--s2)}
  .hdr__logo img{height:56px}
  .burger{display:inline-flex;order:3}
  .nav{
    position:fixed;inset:74px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--rule);
    padding:var(--s1) var(--gut) var(--s4);
    transform:translateY(-10px);opacity:0;pointer-events:none;transition:.3s var(--ease);
  }
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav a:not(.btn){padding:1rem 0;border-bottom:1px solid var(--rule-soft);font-size:1.02rem}
  .nav .btn{margin-top:var(--s3);width:100%}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--cream);overflow:clip}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;align-items:center;min-height:min(76vh,660px)}
.hero__copy{
  padding-block:clamp(48px,5.4vw,76px);
  padding-left:var(--edge);                      /* same vertical as the logo */
  padding-right:clamp(18px,2.2vw,40px);
  max-width:none;margin-left:0;
}
.hero__copy > *{max-width:33rem}
/* The brand tagline sits above the headline as a quiet eyebrow, set in the
   same italic serif and gold star as the master logo lockup so the two
   read as one voice. */
.hero__tag{display:flex;align-items:center;flex-wrap:wrap;gap:.85rem;
  margin:0 0 clamp(20px,2vw,28px);
  font-family:var(--display);font-style:italic;font-size:clamp(1.2rem,1.5vw,1.34rem);
  color:var(--sage-text)}
.hero__tag > span{display:flex;align-items:center;gap:.85rem}
.hero__tag > span::before{content:"\2726";font-style:normal;font-size:.7rem;
  color:var(--gold);line-height:1}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:var(--s3);
  font-size:.7rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--sage-text);
}
.hero__eyebrow svg{width:15px;height:15px;color:var(--terracotta)}
.hero h1 em{font-style:italic;color:var(--terracotta)}
.hero__sub{margin:clamp(24px,2.4vw,34px) 0 0;font-size:clamp(1.08rem,1.45vw,1.24rem);line-height:1.66;color:var(--ink-2);max-width:40ch}
.hero__note{
  margin:var(--s3) 0 0;padding-top:var(--s3);border-top:1px solid var(--rule);
  font-size:.86rem;color:var(--sage-text);max-width:40ch;
}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s4)}
/* On a phone the label "Book a Free 15-Minute Consultation" wrapped to two
   lines. Both hero buttons go full width and lose the arrow, and the label
   gives back some of its tracking, which holds it on one line down to a
   360px screen, and to 320px at the narrower step below. */
@media (max-width:820px){
  .hero__cta{gap:var(--s2)}
  .hero__cta .btn,.hero__cta .tlink{width:100%;gap:0}
  .hero__cta .btn svg,.hero__cta .tlink svg{display:none}
  .hero__cta .btn{padding-inline:.85rem;font-size:.74rem;letter-spacing:.06em}
  .hero__cta .tlink{padding-inline:.85rem;letter-spacing:.1em;justify-content:center}
}
@media (max-width:344px){
  .hero__cta .btn{font-size:.68rem;letter-spacing:.03em}
}
.hero__img{position:relative;height:100%;min-height:min(76vh,660px);
  border-radius:var(--r-xl) 0 0 var(--r-xl);overflow:hidden}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:center center}
/* The photograph dissolves into the page on its left edge rather than
   stopping at a hard border.

   Two earlier attempts failed in different ways. A short two-stop ramp put
   all the change in one place and read as a grey vertical band. Painting a
   cream gradient *over* the photo fixed the banding but the overlay was
   clipped by the panel's corner radius, so the rounded corners showed as
   faint arcs inside the faded area.

   Masking the image itself solves both: the pixels become transparent, the
   page shows through, and there is no overlay to be clipped, so no corner
   can appear. The curve is eased across nine stops and a third of the
   frame, so no single step is large enough to see. */
.hero__img img{
  -webkit-mask-image:var(--hero-fade);
          mask-image:var(--hero-fade);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
}
.hero__img{
  --hero-fade:linear-gradient(90deg,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,.015) 3%,
    rgba(0,0,0,.07)  7%,
    rgba(0,0,0,.17) 11%,
    rgba(0,0,0,.34) 15%,
    rgba(0,0,0,.54) 20%,
    rgba(0,0,0,.74) 25%,
    rgba(0,0,0,.9)  30%,
    rgba(0,0,0,1)   37%);
}
.hero__img::after{content:none}

.hero__grid{position:relative;z-index:1}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;min-height:0}
  .hero__copy{margin-left:0;max-width:none;padding-inline:var(--gut);padding-block:var(--s5) var(--s6)}
  .hero__copy > *{max-width:none}
  .hero__img{min-height:0;aspect-ratio:5/4;order:-1;border-radius:0 0 var(--r-lg) var(--r-lg)}
  .hero__img img{object-position:58% 28%}
  /* Stacked on a phone the copy sits directly beneath the photo, so it is
     the bottom edge that dissolves. */
  .hero__img{
    --hero-fade:linear-gradient(0deg,
      rgba(0,0,0,0)    0%,
      rgba(0,0,0,.02)  4%,
      rgba(0,0,0,.1)   9%,
      rgba(0,0,0,.26) 14%,
      rgba(0,0,0,.5)  20%,
      rgba(0,0,0,.74) 26%,
      rgba(0,0,0,.92) 32%,
      rgba(0,0,0,1)   40%);
  }
  .hero__sub,.hero__note{max-width:none}
}

/* ---------- Marquee of assurances ---------- */
.assure{background:transparent;padding-block:var(--s5)}
.assure__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.assure__i{
  display:flex;gap:var(--s2);align-items:flex-start;padding:clamp(22px,2.4vw,30px);
  background:var(--cream-2);border:1px solid var(--rule-soft);border-radius:var(--r-md);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.assure__i:hover{transform:translateY(-3px);box-shadow:var(--lift)}
.assure__i svg{flex:0 0 22px;width:22px;height:22px;color:var(--terracotta);margin-top:4px}
.assure__i b{display:block;font-family:var(--display);font-size:1.22rem;font-weight:500;color:var(--teal);line-height:1.25}
.assure__i span{display:block;margin-top:4px;font-size:.88rem;line-height:1.6;color:var(--ink-2)}
@media (max-width:820px){
  .assure__grid{grid-template-columns:1fr}
}

/* ---------- Pull statement ---------- */
.statement{max-width:24ch;margin-inline:auto;font-family:var(--display);
  font-size:clamp(1.85rem,3.6vw,2.9rem);line-height:1.22;color:var(--teal)}
.statement em{font-style:italic;color:var(--terracotta)}

/* ---------- Who we work with ---------- */
.who{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s1) var(--s2);
  margin:var(--s5) 0 0;padding:0}
.who li{
  display:inline-flex;align-items:center;gap:.55rem;list-style:none;
  padding:.62rem 1.25rem;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--cream-2);
  font-size:.9rem;color:var(--teal);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.who li:hover{background:#fff;border-color:var(--sage-lt);transform:translateY(-2px)}
.who svg{width:16px;height:16px;color:var(--sage-text);flex:0 0 16px}

/* ---------- Split (image + text) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:center}
/* The About grid now has three children, so `order` no longer places them:
   it pushed the photograph past the credentials into a third row. Explicit
   column and row placement instead, with the photo on the right, the bio on
   the left and the credentials spanning both underneath. */
.split--flip > .split__media{grid-column:2;grid-row:1}
.split--flip > div:not(.split__media):not(.creds){grid-column:1;grid-row:1}
/* .creds sets two columns and is declared later in this file, so the row
   variant needs the extra specificity to win. */
.creds--row{grid-column:1 / -1;grid-row:2}
.creds.creds--row{grid-template-columns:repeat(3,1fr);gap:clamp(26px,2.6vw,44px)}
@media (max-width:1100px){.creds.creds--row{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.creds.creds--row{grid-template-columns:1fr}}
/* In the About section the copy column is much taller than the portrait.
   Centring left the photo floating low, so it top-aligns with the heading
   instead and ends near the last line of the bio. */
.split--flip{align-items:stretch}
/* Arch-topped portraits, a dome rather than a rectangle, so the imagery
   feels like a window into the room instead of a stock photo grid. */
.split__media img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:50% 50% var(--r-lg) var(--r-lg) / 34% 34% var(--r-lg) var(--r-lg);
  position:relative;z-index:1;
}
.split__media{position:relative;isolation:isolate}
.split__media::before{
  content:"";position:absolute;z-index:0;inset:-16px -16px auto auto;
  width:100%;height:100%;border:1px solid var(--sage-lt);opacity:.45;
  border-radius:50% 50% var(--r-lg) var(--r-lg) / 34% 34% var(--r-lg) var(--r-lg);
}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:var(--s5)}
  .split--flip > .split__media,
  .split--flip > div:not(.split__media):not(.creds),
  .creds--row{grid-column:auto;grid-row:auto}
  .split__media::before{display:none}
}

/* About: the portrait stretches to the height of the bio beside it, and
   the credentials run the full width underneath as two columns. Stacking
   them in the right-hand rail instead left the lower half of the left
   column empty. */
/* height:100% on the image resolves against an auto-height parent, which
   collapses it to nothing. Taking the image out of flow lets the row
   height come from the bio column and the photograph fill whatever that
   turns out to be. */
.split--flip .split__media{position:relative;min-height:440px}
.split--flip .split__media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:52% 22%;aspect-ratio:auto}

/* With the content column now running the full page width, prose needs its
   own ceiling: a 140-character line is unreadable however much room there
   is for it. Grids and cards still use the whole width. */
.split > div > p,
.split > div > .about__suf{max-width:62ch}
/* The 96ch measure left the crisis note three short lines inside a very
   wide box. Above the stacking breakpoint it uses the box, which lands it
   on two. */
.crisis p{max-width:96ch}
@media (min-width:1024px){.crisis p{max-width:none}}
.based span{max-width:80ch}

/* ---------- Services (dark band, template DNA) ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px);margin-top:clamp(40px,5vw,68px)}
/* The service cards sat at 1.13:1 against the band behind them and the
   modality line was the lowest-contrast text on the site. Lighter card,
   brighter border, and off-white in place of sage throughout. */
.svc__i{
  display:flex;flex-direction:column;padding:clamp(24px,2.4vw,34px);
  background:var(--cream);border:1px solid var(--rule-soft);
  border-radius:var(--r-lg);
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.svc__i:hover{border-color:var(--rule);transform:translateY(-4px);box-shadow:var(--lift)}
.svc__ico{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-bottom:var(--s3);
  border:1px solid var(--rule);color:var(--terracotta);background:var(--cream-2);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.svc__i:hover .svc__ico{background:var(--blush-wash);border-color:rgba(207,78,22,.3)}
.svc__ico svg{width:26px;height:26px}
.svc__i h3{margin-bottom:.6rem;color:var(--teal)}
.svc__i p{font-size:.95rem;line-height:1.68;margin-bottom:var(--s3);color:var(--ink-2)}
.svc__meta{
  margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--rule-soft);
  font-size:.72rem;text-transform:uppercase;color:var(--sage-text);
}
@media (max-width:980px){
  .svc{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .svc{grid-template-columns:1fr}
}

/* ---------- Focus grid ---------- */
.focus{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,18px);
  margin-top:clamp(40px,5vw,64px)}
.focus__i{
  background:var(--cream);border:1px solid var(--rule-soft);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,38px);display:flex;gap:var(--s2);align-items:flex-start;
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.focus__i:hover{background:#fff;transform:translateY(-4px);box-shadow:var(--lift)}
.focus__i svg{flex:0 0 26px;width:26px;height:26px;color:var(--terracotta);margin-top:5px}
.focus__i b{display:block;font-family:var(--display);font-size:1.24rem;font-weight:500;color:var(--teal);line-height:1.25}
.focus__i span{display:block;margin-top:5px;font-size:.88rem;line-height:1.6;color:var(--ink-2)}
@media (max-width:900px){.focus{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.focus{grid-template-columns:1fr}}

/* ---------- Modality list ---------- */
.mods{display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  margin:clamp(36px,4vw,56px) 0 0;padding:0;max-width:840px}
.mods li{
  list-style:none;display:flex;align-items:center;gap:var(--s2);
  padding:.95rem 0;border-bottom:1px solid var(--rule-soft);font-size:.98rem;
}
.mods li:nth-child(odd){padding-right:var(--s4)}
.mods svg{flex:0 0 16px;width:16px;height:16px;color:var(--terracotta)}
.mods b{font-weight:400;color:var(--teal)}
.mods i{font-style:normal;margin-left:auto;font-size:.74rem;text-transform:uppercase;color:var(--sage-text)}
@media (max-width:700px){.mods{grid-template-columns:1fr}.mods li:nth-child(odd){padding-right:0}}

/* ---------- Credentials ---------- */
.creds{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--rule)}
.creds__h{display:flex;align-items:center;gap:.6rem;margin-bottom:var(--s3);
  font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-text)}
.creds__h svg{width:16px;height:16px;color:var(--terracotta)}
.creds ul{margin:0;padding:0;list-style:none;font-size:.93rem;line-height:1.62;color:var(--ink-2)}
.creds li{position:relative;margin-bottom:.75rem;padding-left:var(--s2)}
.creds li::before{content:"";position:absolute;left:0;top:.66em;width:5px;height:1px;background:var(--gold)}
@media (max-width:860px){
  .split--flip .split__media{position:relative;min-height:0}
  .split--flip .split__media img{position:static;height:auto;aspect-ratio:4/5}
}
@media (max-width:760px){.creds{grid-template-columns:1fr;gap:var(--s4)}}

/* ---------- Rates ---------- */
.rates{margin-top:clamp(36px,4vw,56px);background:rgba(251,247,241,.72);
  border:1px solid var(--rule);border-radius:var(--r-lg);padding:.4rem clamp(20px,3vw,34px)}
.rates__r{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:1.35rem 0;border-bottom:1px solid var(--rule-soft)}
.rates__r:last-child{border-bottom:0}
.rates__r b{font-family:var(--display);font-size:1.28rem;font-weight:500;color:var(--teal)}
.rates__r span{flex:1 1 auto;height:1px;background:var(--rule-soft);transform:translateY(-4px)}
.rates__r i{font-style:normal;font-family:var(--display);font-size:1.38rem;font-weight:500;
  color:var(--terracotta-dk);white-space:nowrap;font-variant-numeric:tabular-nums}
/* The note runs the full width of the fee card above it, which lands it
   on two lines instead of three. */
.rates__note{display:flex;gap:var(--s2);margin-top:var(--s4);
  padding:var(--s3) var(--s3) var(--s3) 0;border-radius:var(--r-md)}
.rates__note svg{flex:0 0 20px;width:20px;height:20px;color:var(--sage-text);margin-top:4px}
.rates__note p{font-size:.94rem;color:var(--ink-2)}
@media (max-width:520px){
  .rates__r{flex-wrap:wrap;gap:.35rem}
  .rates__r span{display:none}
  .rates__r b{flex:1 1 100%}
}

/* ---------- Accordion ---------- */
.acc{margin-top:clamp(36px,4vw,56px);display:grid;gap:10px}
.acc__i{
  border:1px solid var(--rule-soft);border-radius:var(--r-md);background:var(--cream-2);
  padding-inline:clamp(18px,2.4vw,26px);
  transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.acc__i:hover{border-color:var(--rule)}
.acc__i.is-open{background:#fff;border-color:var(--rule);box-shadow:var(--lift)}
.acc__btn{
  position:relative;display:flex;align-items:center;gap:var(--s2);width:100%;min-height:64px;
  padding:1.2rem 2.6rem 1.2rem 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--display);font-size:1.2rem;font-weight:500;color:var(--teal);
}
.acc__btn svg.q{flex:0 0 18px;width:18px;height:18px;color:var(--sage-text)}
.acc__btn::after,.acc__btn::before{
  content:"";position:absolute;right:2px;top:50%;background:var(--terracotta);
  transition:transform .32s var(--ease),opacity .32s var(--ease);
}
.acc__btn::before{width:14px;height:1px;transform:translateY(-50%)}
.acc__btn::after{width:1px;height:14px;right:8px;transform:translateY(-50%)}
.acc__i.is-open .acc__btn::after{transform:translateY(-50%) rotate(90deg);opacity:0}
.acc__body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.acc__in{padding:0 var(--s5) 1.5rem 0;color:var(--ink-2)}
/* The email address is a single unbreakable string; let it wrap
   inside an answer rather than widening the whole accordion. */
.acc__in p,.acc__in strong{overflow-wrap:anywhere}
.acc__in ul{margin:0;padding:0;list-style:none;columns:2;column-gap:var(--s5)}
.acc__in li{margin-bottom:.45rem;padding-left:var(--s2);position:relative;break-inside:avoid}
.acc__in li::before{content:"";position:absolute;left:0;top:.68em;width:5px;height:1px;background:var(--sage-lt)}
.acc__in p,.acc__in ul{max-width:72ch}
@media (max-width:640px){.acc__in{padding-right:var(--s3)}.acc__in ul{columns:1}}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(44px,5vw,72px);text-align:left}
.steps__i{
  padding:clamp(24px,2.6vw,32px);border:1px solid rgba(237,234,226,.16);
  border-radius:var(--r-lg);background:rgba(251,247,241,.04);
}
.steps__n{display:block;font-family:var(--display);font-size:1.6rem;color:var(--gold-on-dark);margin-bottom:.4rem;line-height:1}
.steps__i b{display:block;font-family:var(--display);font-size:1.22rem;font-weight:500;color:#FBF7F1;margin-bottom:.4rem}
.steps__i p{font-size:.93rem;line-height:1.66}
@media (max-width:760px){
  .steps{grid-template-columns:1fr}
}

/* ---------- Contact ---------- */
/* Phone, email and Based in Virginia share one row. The middle column is
   widest because the email address is a single unbreakable string, and the
   three cards stretch to a common height. */
.cx{display:grid;grid-template-columns:.92fr 1.32fr 1.06fr;gap:clamp(12px,1.5vw,18px);
  margin-top:clamp(36px,4vw,56px);align-items:stretch}
@media (max-width:1100px){.cx{grid-template-columns:repeat(2,1fr)}
  .cx > .based{grid-column:1 / -1}}
.cx__c{
  display:flex;gap:var(--s2);align-items:flex-start;background:var(--cream-2);
  border:1px solid var(--rule-soft);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,36px);text-decoration:none;color:inherit;
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.cx__c:hover{background:#fff;transform:translateY(-4px);box-shadow:var(--lift)}
.cx__c svg{flex:0 0 22px;width:22px;height:22px;color:var(--terracotta);margin-top:4px}
.cx__c b{display:block;font-family:var(--display);font-size:1.2rem;font-weight:500;color:var(--teal);
  line-height:1.35;overflow-wrap:anywhere}
.cx__c span{display:block;margin-top:3px;font-size:.87rem;color:var(--ink-2)}
@media (max-width:640px){.cx{grid-template-columns:1fr}.cx__c b{font-size:1rem}}

/* ---------- Crisis ---------- */
.crisis{display:flex;gap:var(--s3);margin-top:var(--s5);padding:clamp(24px,2.6vw,34px);
  background:var(--blush-wash);border:1px solid #EBD5C4;border-radius:var(--r-lg)}
.crisis svg{flex:0 0 44px;width:44px;height:44px;padding:10px;border-radius:50%;
  background:rgba(207,78,22,.10);color:var(--terracotta-dk);margin-top:1px}
.crisis b{display:block;font-family:var(--display);font-size:1.18rem;font-weight:500;color:var(--teal);margin-bottom:.3rem}
.crisis p{font-size:.93rem;color:var(--ink-2);margin:0}
@media (max-width:560px){.crisis{flex-direction:column;gap:var(--s2);padding:var(--s3)}}

/* ---------- Footer ---------- */
.ftr{background:var(--teal-dk);color:var(--on-dark-2);font-size:.92rem;
  padding-block:clamp(52px,5.4vw,72px) var(--s4);border-radius:var(--r-slab) var(--r-slab) 0 0;
  margin-top:var(--slab-gap)}
.ftr__top{display:grid;grid-template-columns:1.5fr 1.2fr .72fr .92fr;gap:clamp(26px,3vw,44px);
  padding-bottom:var(--s5);border-bottom:1px solid rgba(237,234,226,.14)}
.ftr__logo{height:60px;width:auto;margin-bottom:6px}
.ftr__tag{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  width:fit-content;max-width:100%;
  margin:-6px 0 var(--s2);padding-top:9px;
  border-top:1px solid rgba(195,158,94,.4);
  color:var(--on-dark);font-family:var(--display);font-style:italic;font-size:1rem}
.ftr__tag > span{display:flex;align-items:center;gap:.7rem}
.ftr__tag > span::before{content:"\2726";font-style:normal;font-size:.7rem;
  color:var(--gold-on-dark);line-height:1}
.ftr__fine{margin:0;font-size:.86rem;max-width:36ch;color:rgba(237,234,226,.6)}
.ftr h4{font-family:var(--display);font-size:1.3rem;font-weight:500;color:#FBF7F1;margin-bottom:var(--s3)}
.ftr ul{margin:0;padding:0;list-style:none}
.ftr li{margin-bottom:.65rem}
.ftr a{display:inline-flex;align-items:center;gap:.55rem;color:var(--on-dark-2);text-decoration:none;
  transition:color .25s var(--ease)}
/* The email address is one unbreakable string; the middle column is sized
   to hold it on a single line, and it only wraps once the footer stacks. */
.ftr li a{white-space:nowrap}
.ftr a svg{flex:0 0 15px;width:15px;height:15px;color:var(--sage-lt)}
.ftr a:hover{color:#fff}
.ftr__btm{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;
  padding-top:var(--s3);font-size:.82rem;color:rgba(237,234,226,.5)}
@media (max-width:1040px){.ftr__top{grid-template-columns:1fr 1fr;gap:var(--s5)}}
@media (max-width:820px){
  /* Stacked on a phone the footer is one long column, so the rhythm comes
     down: tighter gaps between the groups, tighter headings, and link rows
     sized to a 40px tap target with no extra margin on top of it. */
  .ftr{padding-block:clamp(40px,9vw,56px) var(--s3)}
  .ftr__top{grid-template-columns:1fr;gap:28px;padding-bottom:var(--s4)}
  .ftr li a{white-space:normal;overflow-wrap:anywhere}
  .ftr h4{font-size:1.18rem;margin-bottom:var(--s1)}
  .ftr li{margin-bottom:0}
  .ftr li a{min-height:36px;padding-block:.1rem}
  .ftr__logo{height:52px;margin-bottom:2px}
  .ftr__tag{font-size:.9rem;margin-bottom:8px}
  .ftr__fine{max-width:44ch}
  .ftr__btm{gap:10px var(--s3);padding-top:var(--s2)}
}

/* The client portal is for people who already have an account, so it sits
   beside Get Started as a quieter, secondary link rather than a button. */
.nav__portal{font-size:.86rem;color:var(--sage-text);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .25s var(--ease),border-color .25s var(--ease)}
.nav__portal:hover{color:var(--teal);border-bottom-color:var(--sage-lt)}

/* ---------- Based in ----------
   Heart Space is fully virtual, so the location is stated as a line of
   copy rather than a map, which would imply an office people could
   visit. */
/* Inside the contact row it matches the two link cards exactly. */
.cx > .based{margin-top:0;padding:clamp(26px,3vw,36px);border-color:var(--rule-soft)}
.cx > .based svg{flex:0 0 22px;width:22px;height:22px;margin-top:4px}
.cx > .based b{font-size:1.2rem;line-height:1.35;margin-bottom:0}
.cx > .based span{margin-top:3px;font-size:.87rem;line-height:1.55}
.based{display:flex;align-items:flex-start;gap:var(--s2);
  background:var(--cream-2);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,32px);
  margin-top:clamp(12px,1.5vw,18px)}
.based svg{flex:0 0 20px;width:20px;height:20px;color:var(--terracotta);margin-top:3px}
.based b{display:block;font-family:var(--display);font-size:1.28rem;font-weight:500;
  color:var(--teal);margin-bottom:.25rem}
.based span{display:block;font-size:.95rem;line-height:1.6;color:var(--ink-2)}

/* ---------- About: credential line under the name ---------- */
.about__suf{margin:12px 0 28px;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--sage-text)}

/* ---------- What to Expect (three steps) ----------
   Three equal cards. The step number sits in the corner as a quiet
   editorial marker rather than a heavy badge. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,18px);
  margin-top:clamp(40px,5vw,68px)}
.steps__i{position:relative;background:var(--cream);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:clamp(26px,3vw,38px);
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.steps__i:hover{transform:translateY(-3px);border-color:var(--sage-lt)}
.steps__n{position:absolute;top:clamp(20px,2.4vw,28px);right:clamp(22px,2.6vw,30px);
  font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--rule);font-weight:500}
.steps__ico{width:52px;height:52px;display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--cream-2);border:1px solid var(--rule);color:var(--terracotta);margin-bottom:var(--s3)}
.steps__ico svg{width:24px;height:24px}
.steps__i h3{font-family:var(--display);font-size:1.5rem;font-weight:500;color:var(--teal);
  margin:0 0 .6rem}
.steps__i p{margin:0;font-size:.95rem;line-height:1.65;color:var(--ink-2)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* ---------- Get Started: paired calls to action ---------- */
.start__cta{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center}
.start__alt{margin:var(--s4) 0 0;font-size:.92rem;color:var(--on-dark-2)}
.start__alt a{display:inline-block;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4);overflow-wrap:anywhere;
  /* Comfortable tap target on a phone. */
  min-height:44px;padding-block:.5rem}
.start__alt a:hover{border-bottom-color:#fff}

/* ---------- Footer policy links ----------
   Set slightly quieter than the navigation links beside them: these are
   documents people look up when they need them, not places to browse. */
.ftr__legal a{color:rgba(237,234,226,.62)}
.ftr__legal a:hover{color:#fff}

/* ---------- Legal pages ----------
   Long-form reading: one narrow column, generous leading, no decoration
   competing with the text. Same palette and type as the rest of the site
   so these pages feel part of it rather than bolted on. */
.legal{padding-block:clamp(56px,6.5vw,92px) clamp(64px,7.4vw,104px)}
.legal__back{margin:0 0 var(--s4);font-size:.86rem}
.legal__back a{color:var(--sage-text);text-decoration:none;border-bottom:1px solid var(--rule)}
.legal__back a:hover{color:var(--teal);border-bottom-color:var(--sage-lt)}
.legal h1{font-size:clamp(2.1rem,3.6vw,3rem);margin-bottom:var(--s2)}
.legal__meta{margin:0 0 var(--s5);font-size:.86rem;color:var(--sage-text)}
.legal__lead{background:var(--cream-2);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:clamp(20px,2.4vw,30px);margin-bottom:var(--s5)}
.legal__lead p{font-size:1.02rem;line-height:1.7;color:var(--ink-2)}
.legal h2{font-size:clamp(1.5rem,2.1vw,1.85rem);margin:var(--s5) 0 var(--s2);
  padding-top:var(--s3);border-top:1px solid var(--rule-soft)}
.legal h3{font-size:1.08rem;font-family:var(--sans);font-weight:500;
  color:var(--teal);margin:var(--s3) 0 .5rem}
.legal p,.legal li{font-size:.98rem;line-height:1.78;color:var(--ink-2)}
.legal ul{margin:0 0 1.2em;padding-left:0;list-style:none}
.legal li{position:relative;padding-left:var(--s3);margin-bottom:.7rem}
.legal li::before{content:"";position:absolute;left:0;top:.82em;
  width:7px;height:1px;background:var(--gold)}
.legal a{color:var(--terracotta-dk);overflow-wrap:anywhere}
.legal__table{width:100%;border-collapse:collapse;margin:var(--s3) 0 1.4em;font-size:.95rem}
.legal__table th{text-align:left;font-weight:500;color:var(--teal);
  padding:.7rem 0;border-bottom:1px solid var(--rule)}
.legal__table td{padding:.7rem 0;border-bottom:1px solid var(--rule-soft);color:var(--ink-2)}
.legal__table td:last-child,.legal__table th:last-child{text-align:right;white-space:nowrap}
.legal__note{margin-top:var(--s4);padding:var(--s3);background:var(--blush-wash);
  border-radius:var(--r-md);font-size:.92rem}
/* A legal page has no link columns above the baseline, so the bar stands alone. */
.ftr__btm--solo{border-top:0;padding-top:0}

/* ---------- Placeholder (unconfirmed copy) ---------- */
.placeholder{
  display:inline-block;background:var(--blush-wash);border:1px dashed var(--terracotta);
  border-radius:var(--r-pill);padding:.55rem 1.05rem;color:var(--terracotta-dk);font-size:.9rem;
}

/* ---------- Missing-image fallback -------------------------------
   Safety net for staging. Applied by main.js only when an image file
   fails to load, and it disappears on its own once assets/img/ is
   populated. Nothing here affects the finished site.
   ---------------------------------------------------------------- */
.img-miss{
  position:relative;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(150deg,var(--sage-wash) 0%,var(--cream-2) 60%,var(--blush-wash) 100%);
  border-radius:var(--r-lg);min-height:220px;
}
.img-miss::after{
  content:attr(data-label);font-family:var(--display);font-style:italic;
  font-size:1.05rem;line-height:1.5;color:var(--sage-text);
  padding:var(--s4);text-align:center;max-width:26ch;
}
.hero__img.img-miss{min-height:min(62vh,540px)}
.hero__img.img-miss::after{display:none}
.logo-text{font-family:var(--display);font-size:1.7rem;font-weight:500;color:var(--terracotta);line-height:1}
.logo-text small{
  display:block;margin-top:5px;font-family:var(--sans);font-size:.58rem;font-weight:500;
  letter-spacing:.24em;color:var(--teal);
}
.ftr .logo-text{color:#FBF7F1}
.ftr .logo-text small{color:var(--sage-lt)}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.is-in{opacity:1;transform:none}

/* ---------- a11y ---------- */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  background:var(--teal);color:#fff;padding:.85rem 1.4rem;border-radius:var(--r-pill);z-index:100}
.skip:focus{position:fixed;left:0;top:0;width:auto;height:auto;clip:auto;overflow:visible}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:var(--r-xs)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- 07 Rates & FAQs: side by side on desktop ---- */
.rf{margin-top:clamp(36px,4vw,56px)}
.rf__h{font-family:var(--display);font-size:1.18rem;font-weight:500;
  color:var(--teal);margin:0 0 var(--s2)}
.rf .rates,.rf .acc{margin-top:0}
.rf .rates__note{margin-top:var(--s3)}
.rf__col + .rf__col{margin-top:clamp(40px,5vw,64px)}
@media (min-width:1024px){
  /* The two columns become one grid so the fee card and the question stack
     share a row and therefore resolve to exactly the same height. The note
     sits in its own row underneath and is left out of that match. */
  .rf{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
    grid-template-rows:auto 1fr auto;column-gap:clamp(32px,3.4vw,56px);row-gap:0}
  .rf__col{display:contents}
  .rf__col:first-child > .rf__h{grid-column:1;grid-row:1}
  .rf__col:first-child > .rates{grid-column:1;grid-row:2}
  .rf__col:first-child > .rates__note{grid-column:1;grid-row:3}
  .rf__col:last-child > .rf__h{grid-column:2;grid-row:1}
  .rf__col:last-child > .acc{grid-column:2;grid-row:2}
  /* The fee card is held at the question stack's closed height (--rf-h, set
     in main.js) and sits at the top of its row, so opening an answer grows
     only that answer. Its rows share the extra space evenly. */
  .rf .rates{align-self:start;min-height:var(--rf-h,auto);
    display:flex;flex-direction:column}
  .rf .rates__r{flex:1 1 auto}
  .rf .acc{align-self:start}
  .rf__col + .rf__col{margin-top:0}
  .rf .acc__in{padding-right:var(--s3)}
  .rf .acc__in ul{columns:1}
  /* The fee rows sit in a narrower column here, so the type and the
     row padding come down just enough to keep every label on one line. */
  .rf .rates{padding:.3rem clamp(18px,1.9vw,30px)}
  .rf .rates__r{padding:1.1rem 0;gap:var(--s2)}
  .rf .rates__r b{font-size:clamp(1.02rem,1.02vw,1.24rem)}
  .rf .rates__r i{font-size:clamp(1.1rem,1.1vw,1.34rem)}
  .rf .rates__note p{font-size:.9rem}
}

/* ---- Footer credit line ---- */
.ftr__by{margin-left:.6rem;padding-left:.75rem;
  border-left:1px solid rgba(237,234,226,.22)}
.ftr__by a{color:rgba(237,234,226,.72);text-decoration:none;
  border-bottom:1px solid rgba(237,234,226,.24);padding-bottom:1px}
.ftr__by a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
@media (max-width:560px){
  .ftr__by{display:block;margin-left:0;padding-left:0;border-left:0;margin-top:.45rem}
}

/* ---------- Floating call button ----------
   A pill that reads as part of the brand rather than a bolted-on widget:
   it shows only the handset until hover or focus, then slides the number
   out beside it. On a phone it stays a circle, where a tap dials. */
.fab{position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:80;
  display:inline-flex;align-items:center;gap:0;
  height:58px;padding:0 19px;border-radius:999px;
  background:var(--teal);color:#FBF7F1;text-decoration:none;
  box-shadow:0 4px 10px -4px rgba(13,47,41,.4), 0 14px 30px -12px rgba(13,47,41,.55);
  transition:background .3s var(--ease),transform .3s var(--ease),
    box-shadow .3s var(--ease),gap .35s var(--ease)}
.fab svg{flex:0 0 21px;width:21px;height:21px}
.fab__t{max-width:0;overflow:hidden;white-space:nowrap;font-size:1rem;
  font-variant-numeric:tabular-nums;
  transition:max-width .35s var(--ease)}
.fab:hover,.fab:focus-visible{background:var(--teal-dk);transform:translateY(-2px);
  box-shadow:0 6px 14px -4px rgba(13,47,41,.45), 0 20px 40px -14px rgba(13,47,41,.6);
  gap:.6rem}
.fab:hover .fab__t,.fab:focus-visible .fab__t{max-width:11rem}
.fab:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
@media (max-width:820px){
  .fab{height:54px;width:54px;padding:0;justify-content:center}
  .fab__t{display:none}
  .fab:hover,.fab:focus-visible{gap:0}
}
@media (prefers-reduced-motion:reduce){
  .fab,.fab__t{transition:none}
  .fab:hover,.fab:focus-visible{transform:none}
}
/* On a phone the hero CTAs sit low in the first screen, right where the
   call button floats, so it stays hidden until the hero is scrolled past.
   Without JS it simply shows, which is the old behaviour. */
@media (max-width:820px){
  .fab{opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
  .fab.is-on{opacity:1;visibility:visible;transform:none}
  .fab:hover,.fab:focus-visible{transform:none}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .fab{transition:none}
}
@media print{.fab{display:none}}

/* ---------- Careers ---------- */
.careers__note{max-width:62ch;margin:var(--s3) auto 0;
  padding:var(--s2) var(--s3);border:1px solid var(--rule);border-radius:var(--r-md);
  background:var(--cream-2);font-size:.94rem;color:var(--ink-2)}
/* The careers invitation is the fourth card in the contact stack, so it
   takes the same box as Based in Virginia: same padding, same top-aligned
   icon, same gap above. The Careers button is the only addition. */
.careers__t{display:flex;align-items:flex-start;gap:var(--s2);
  background:var(--cream-2);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,32px);
  margin-top:clamp(12px,1.5vw,18px)}
.careers__t > svg{flex:0 0 20px;width:20px;height:20px;color:var(--terracotta);margin-top:3px}
.careers__t div{flex:1 1 auto}
.careers__t b{display:block;font-family:var(--display);font-size:1.28rem;font-weight:500;
  color:var(--teal);margin-bottom:.25rem}
.careers__t span{display:block;font-size:.95rem;line-height:1.6;color:var(--ink-2)}
.careers__t .btn{flex:0 0 auto;align-self:center;margin-left:var(--s2)}
@media (max-width:760px){
  /* Icon stays beside the text, as in Based in Virginia; only the button
     drops to its own line, indented to the text column. */
  .careers__t{flex-wrap:wrap}
  .careers__t div{flex:1 1 60%;min-width:0}
  .careers__t .btn{align-self:flex-start;margin:var(--s2) 0 0 calc(20px + var(--s2))}
}

/* The careers CTA sits directly above the dark footer, so it runs on the
   sage wash instead of teal. These reset the band's text colours, which
   were written for the dark version. */
.on-sage .start__alt{color:var(--ink-2)}
.on-sage .start__alt a{color:var(--teal);border-bottom-color:var(--sage-lt)}
.on-sage .start__alt a:hover{border-bottom-color:var(--teal)}

/* ---------- Final visual pass: lighter, warmer balance ----------
   Cream carries the page; teal is reserved for headings, buttons,
   icons and the footer. Terracotta does the small accent work. */

/* Section numbers and the rule beside them pick up the accent, so the
   editorial markers read as terracotta rather than sage throughout. */
.idx__n{color:var(--terracotta-dk)}
.idx::after{background:linear-gradient(90deg,rgba(207,78,22,.32),var(--rule) 62%)}

/* Cards lift toward the accent on hover instead of just darkening. */
.focus__i:hover{background:#fff;border-color:rgba(207,78,22,.22)}
.steps__i:hover{border-color:rgba(207,78,22,.22)}
.acc__i:hover{border-color:rgba(207,78,22,.24)}
.acc__btn svg.q{color:var(--terracotta)}
.cx__c:hover{border-color:rgba(207,78,22,.26)}

/* The step number in What to Expect is a quiet accent, not grey. */
.steps__n{color:rgba(207,78,22,.3)}

/* Assurance and note icons follow the same accent rule. */
.rates__note svg{color:var(--terracotta)}
.creds__h svg{color:var(--terracotta)}

/* Between these widths the middle column is just short of the address, so
   the card type eases down rather than letting it wrap. */
@media (min-width:1101px) and (max-width:1400px){.cx__c b,.cx > .based b{font-size:1.06rem}}

@media (max-width:640px){.cx > .based b{font-size:1rem}}

/* ---------- Verified Psychology Today profile ----------
   A quiet link under the bio: the same card language as the contact row,
   at a smaller weight so it supports the credentials rather than competing
   with them. */
.pt{display:inline-flex;align-items:center;gap:var(--s2);
  margin-top:clamp(20px,2.2vw,30px);padding:.72rem 1.1rem;
  background:var(--cream-2);border:1px solid var(--rule-soft);border-radius:var(--r-md);
  text-decoration:none;color:inherit;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.pt:hover{background:#fff;border-color:rgba(207,78,22,.26);transform:translateY(-2px)}
.pt > svg{flex:0 0 19px;width:19px;height:19px;color:var(--terracotta)}
.pt b{display:block;font-family:var(--display);font-size:1.02rem;font-weight:500;color:var(--teal);line-height:1.3}
.pt__a{flex:0 0 15px;width:15px;height:15px;color:var(--sage-text);
  transition:transform .28s var(--ease)}
.pt:hover .pt__a{transform:translateX(3px);color:var(--terracotta)}
@media (max-width:520px){
  .pt{display:flex;width:100%;gap:.7rem;padding:.8rem .95rem}
  .pt b{font-size:.95rem}
}

/* ---------- Psychology Today verified seal ----------
   The official badge sits in the footer, where the plain text link used to
   be, so it never doubles up with the text link beside the bio. */

.seal{display:inline-block;margin-top:clamp(16px,1.8vw,22px);line-height:0;
  text-decoration:none;border-radius:8px;
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.seal:hover{transform:translateY(-2px);opacity:.92}
.seal img{width:150px;height:auto;display:block}

/* ---------- Hero eligibility link ----------
   The PSYPACT list changes, so the page names the three home states and
   links out rather than hard-coding a count of jurisdictions. */
.hero__note a{display:inline-flex;align-items:center;gap:.34rem;
  color:var(--terracotta);text-decoration:none;
  border-bottom:1px solid rgba(207,78,22,.34);padding-bottom:1px;
  transition:border-color .3s var(--ease)}
.hero__note a svg{width:13px;height:13px;transition:transform .28s var(--ease)}
.hero__note a:hover{border-bottom-color:var(--terracotta)}
.hero__note a:hover svg{transform:translateX(3px)}

/* ---------- For Clinicians callout ----------
   Supervision serves a different audience than the three client services,
   so it sits apart from the grid at a smaller weight. */
.clin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(16px,2.4vw,34px);margin-top:clamp(28px,3vw,44px);
  padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px);
  background:var(--cream);border:1px solid var(--rule-soft);border-radius:var(--r-md)}
.clin__txt{max-width:62ch}
.clin .clin__eyebrow{margin:0;font-size:.72rem;font-weight:500;text-transform:uppercase;
  letter-spacing:0;color:var(--terracotta);line-height:1.3}
.clin h3{margin:.3rem 0 .45rem;font-family:var(--display);font-size:clamp(1.18rem,1.7vw,1.42rem);
  font-weight:500;color:var(--teal)}
.clin p{margin:0;font-size:.94rem;line-height:1.62;color:var(--ink-2)}
.clin .tlink{flex:0 0 auto}

/* ---------- About: closing note ---------- */
.about__note{font-size:.92rem;color:var(--sage-text)}

/* The tagline stays on a single line at every width: below 640px it scales
   with the viewport instead of wrapping, capped at the desktop size. */
@media (max-width:640px){
  .hero__tag{flex-wrap:nowrap;white-space:nowrap;column-gap:.5rem;row-gap:0;
    font-size:min(3.9vw,1.34rem)}
  .hero__tag > span{gap:.5rem;white-space:nowrap}
  .hero__tag > span::before{font-size:.58em}
}

/* Careers: the long button label fits one line on phones at a slightly
   smaller size rather than wrapping under its own arrow. */
@media (max-width:520px){
  #top .btn--solid,#apply .btn--solid{font-size:.72rem;letter-spacing:.06em;padding-inline:1.15rem;gap:.55rem}
}

/* Careers joins the main nav, so the row needs to hold seven items without
   any label breaking across two lines. Links never wrap, and between 1024
   and 1240px the gap and type step down just enough to fit. */
@media (min-width:1024px){
  .nav a:not(.btn),.nav .btn{white-space:nowrap}
}
@media (min-width:1024px) and (max-width:1240px){
  .nav{gap:clamp(14px,1.9vw,26px)}
  .nav a:not(.btn){font-size:.79rem;letter-spacing:.02em}
  .nav .btn{font-size:.68rem;letter-spacing:.05em;padding-inline:1.05rem}
}

/* Areas of Focus holds seven cards: the seventh spans the full row so the
   grid closes cleanly instead of leaving a single card on its own line. */
.focus__i--wide{grid-column:1 / -1}