/* ===========================================================
   StarBrook Therapy, v2.

   The name is star + brook, so the design finally uses it: one
   flowing hairline recurs as a divider, and the hero is water
   under a last star before dawn. Used sparingly on purpose, so
   it reads as a signature rather than decoration.

   Also here: Fraunces instead of Lora, a paper grain so the flat
   sections stop looking like a template, borderless cards, and a
   gentler crisis panel.
   =========================================================== */

:root{
  --ink:#1C2A2C;
  --ink-2:#4B5E60;
  --muted:#7B8C8E;
  --teal:#2F5D62;
  --teal-d:#234A4E;
  --teal-deep:#1F2E2E;
  --sage:#A7C4BC;
  --sage-l:#D9E6E3;
  --sand:#F7F2E9;
  --sand-2:#F1EADD;
  --cream:#FDFBF6;
  --clay:#B96A48;
  --clay-l:#D9A085;
  --line:#E6E0D3;

  --rad:16px;
  --rad-lg:26px;
  --shadow:0 1px 2px rgba(28,42,44,.04), 0 14px 40px -20px rgba(28,42,44,.22);
  --maxw:1120px;

  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  color-scheme: light;
}

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

html{scroll-behavior:smooth; scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Paper grain. The single cheapest fix for "this looks like a template":
   a barely-there noise field over everything, fixed so it doesn't swim
   while scrolling. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print{ body::after{display:none} }

img,svg{max-width:100%; height:auto; display:block}

h1,h2,h3{
  font-family:var(--serif); font-weight:500; line-height:1.14;
  letter-spacing:-.012em; margin:0 0 .5em;
  font-variation-settings:'SOFT' 28, 'WONK' 0;
}
h1{font-size:clamp(2.2rem,5.4vw,3.6rem); letter-spacing:-.025em; font-weight:500}
h2{font-size:clamp(1.6rem,3.3vw,2.4rem)}
h3{font-size:1.12rem; line-height:1.34; font-weight:600}
p{margin:0 0 1.15em}
a{color:var(--teal); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--teal-d)}
:focus-visible{outline:2.5px solid var(--clay); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 26px}
.narrow{max-width:780px}
.muted{color:var(--muted)}
.sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--teal); color:#fff; padding:12px 18px; border-radius:0 0 var(--rad) 0}
.skip:focus{left:0}

.eyebrow{
  font-size:.73rem; font-weight:650; letter-spacing:.19em; text-transform:uppercase;
  color:var(--clay); margin:0 0 .9em;
}
.h-quiet{font-size:clamp(1.3rem,2.5vw,1.7rem)}

/* ─────────────── The brook ───────────────
   One hairline that flows. Used three times on the page, never more. */
.brook{color:var(--sage); line-height:0; margin:0 auto; max-width:var(--maxw); padding:0 26px}
.brook svg{width:100%; height:36px; display:block; overflow:visible}
.brook path{fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round}
.brook--tight svg{height:26px}
.brook--onTeal{color:rgba(167,196,188,.5)}

/* ─────────────── Buttons ─────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font:inherit; font-weight:600; line-height:1;
  padding:16px 28px; border:1.5px solid var(--teal); border-radius:999px;
  background:var(--teal); color:#fff; text-decoration:none; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .14s ease, box-shadow .18s ease;
}
.btn:hover{background:var(--teal-d); border-color:var(--teal-d); color:#fff; box-shadow:0 10px 24px -14px rgba(31,46,46,.8)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent; color:var(--teal); border-color:rgba(47,93,98,.3)}
.btn-ghost:hover{background:rgba(47,93,98,.06); color:var(--teal-d); border-color:var(--teal)}
.btn-sm{padding:11px 20px; font-size:.92rem}
.btn-wide{width:100%; padding:17px 28px}

/* ─────────────── Header ─────────────── */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(253,251,246,.84);
  backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.site-head.is-stuck{border-bottom-color:var(--line); box-shadow:0 8px 30px -24px rgba(28,42,44,.6)}
.head-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:76px}

.brand{display:inline-flex; align-items:center; gap:11px; color:var(--teal); text-decoration:none}
.brand-mark{width:30px; height:30px; flex:0 0 auto}
img.brand-mark{object-fit:contain}
.brand-text{font-family:var(--serif); font-size:1.26rem; font-weight:500; white-space:nowrap; font-variation-settings:'SOFT' 40}
.brand-text-2{color:var(--ink-2); font-weight:400}

.nav-list{display:flex; align-items:center; gap:27px; list-style:none; margin:0; padding:0}
.nav-list a:not(.btn){
  color:var(--ink-2); text-decoration:none; font-size:.95rem; font-weight:500;
  padding:6px 0; border-bottom:1.5px solid transparent; transition:color .15s ease, border-color .15s ease;
}
.nav-list a:not(.btn):hover{color:var(--teal); border-bottom-color:var(--sage)}
.nav-toggle{display:none}

/* ─────────────── Hero ─────────────── */
.hero{padding:clamp(44px,7vw,84px) 0 clamp(30px,4vw,48px)}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,70px); align-items:center}
.lede{font-size:clamp(1.09rem,1.6vw,1.24rem); color:var(--ink-2); max-width:34em; line-height:1.68}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin:1.7em 0 1.1em}
.hero-note{font-size:.93rem; color:var(--muted); margin:0; line-height:1.9}
.hero-art{max-width:430px; margin-inline:auto}
/* An inline SVG with only a viewBox collapses to zero height inside a grid
   item in Chrome, so size it explicitly rather than relying on intrinsic ratio. */
.hero-art svg{width:100%; height:auto; display:block}

/* ─────────────── Recognition band ───────────────
   The most emotionally effective lines on the page. Given room,
   set larger, and spaced like verse rather than a bullet list. */
.band{
  background:var(--teal-deep); color:#E4EDEA;
  padding:clamp(58px,8vw,96px) 0;
  position:relative; overflow:hidden;
}
.band::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(120% 90% at 78% 8%, rgba(167,196,188,.14), transparent 60%);
}
.band .wrap{position:relative}
.band h2{color:#fff; opacity:.72; font-size:clamp(1.05rem,1.8vw,1.2rem); font-weight:500; letter-spacing:.01em; margin-bottom:1.5em}
.tick-list{list-style:none; margin:0 0 1.9em; padding:0; display:grid; gap:1.15em}
.tick-list li{
  position:relative; padding-left:34px; color:#DCE8E5;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.12rem,2.1vw,1.46rem); line-height:1.42;
  font-variation-settings:'SOFT' 30;
}
.tick-list li::before{
  content:""; position:absolute; left:2px; top:.72em;
  width:16px; height:1.5px; background:var(--clay-l); border-radius:2px; opacity:.85;
}
.band-close{
  font-family:var(--serif); font-style:italic; color:#fff; margin:0;
  font-size:clamp(1.02rem,1.7vw,1.18rem); opacity:.88;
}

/* ─────────────── Sections ─────────────── */
.section{padding:clamp(60px,8vw,104px) 0}
.section.alt{background:var(--sand)}
.sec-head{max-width:62ch; margin-bottom:clamp(30px,4vw,50px)}
.sec-sub{color:var(--ink-2); margin:0}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:start}
.prose{max-width:58ch}
.prose p{color:var(--ink-2)}
.prose-wide{max-width:none}
.prose-wide p{font-size:1.08rem; line-height:1.78; max-width:66ch}

.creds{
  display:grid; gap:16px; margin:2.2em 0 0; padding:26px 28px;
  background:var(--sand); border-radius:var(--rad);
}
.section.alt .creds{background:var(--cream)}
.creds dt{font-size:.72rem; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.creds dd{margin:0; color:var(--ink)}
.creds-row{grid-template-columns:repeat(3,1fr); gap:28px}
.creds-row>div{display:block}
.creds-row dt{margin-bottom:7px}
.creds-row dd{line-height:1.55}

/* Cards: borders removed. Ground and space do the separating now. */
.cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.cards-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--cream); border:0; border-radius:var(--rad);
  padding:28px 26px 24px;
  box-shadow:0 1px 2px rgba(28,42,44,.03);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.card h3{color:var(--teal); margin-bottom:.45em}
.card p{margin:0; font-size:.96rem; color:var(--ink-2); line-height:1.65}

.approach{margin-top:clamp(30px,4vw,48px); padding:clamp(26px,3.5vw,36px); background:var(--cream); border-radius:var(--rad-lg); max-width:72ch}
.approach p{color:var(--ink-2)}
.approach p:last-child{margin-bottom:0}

.aside-note{
  margin-top:2em; padding:20px 24px;
  background:var(--sand-2); border-left:2.5px solid var(--sage); border-radius:0 12px 12px 0;
  font-size:.96rem; color:var(--ink-2);
}
.section.alt .aside-note{background:var(--cream)}

.arrow-link{font-weight:600; text-decoration:none; border-bottom:1.5px solid var(--sage)}
.arrow-link::after{content:" \2192"; display:inline-block; transition:transform .18s ease}
.arrow-link:hover::after{transform:translateX(4px)}
.arrow-link:hover{border-bottom-color:var(--teal)}

/* Steps */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,38px)}
.steps li{position:relative; padding-top:8px}
.step-n{
  display:grid; place-items:center; width:50px; height:50px; margin-bottom:18px;
  border-radius:50%; border:1.5px solid var(--sage);
  font-family:var(--serif); font-size:1.18rem; color:var(--teal); background:var(--cream);
  font-variation-settings:'SOFT' 40;
}
.section.alt .step-n{background:var(--sand-2); border-color:rgba(167,196,188,.85)}
.steps h3{color:var(--teal)}
.steps p{margin:0; color:var(--ink-2); font-size:.97rem}

/* Rate card */
.rate-card{background:var(--cream); border:0; border-radius:var(--rad-lg); padding:10px 28px; box-shadow:var(--shadow)}
.rate-card dl{margin:0}
.rate-card dl>div{display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:19px 0; border-bottom:1px solid var(--line)}
.rate-card dl>div:last-child{border-bottom:0}
.rate-card dt{color:var(--ink-2)}
.rate-card dd{margin:0; font-family:var(--serif); font-weight:600; text-align:right; color:var(--ink)}
.fineprint{font-size:.89rem; color:var(--muted); line-height:1.7}

.session-card{padding:26px 28px 24px}
.card-title{font-size:.72rem; font-weight:650; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-family:var(--sans); margin:0 0 6px}
.session-card .help{margin-top:18px}
.office{font-style:normal; font-family:var(--serif); font-size:1.12rem; line-height:1.5; color:var(--ink); padding:4px 0 18px; margin:0; border-bottom:1px solid var(--line)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:22px 46px 22px 0; position:relative;
  font-family:var(--serif); font-size:1.1rem; font-weight:500; color:var(--ink);
  font-variation-settings:'SOFT' 35; transition:color .15s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:10px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--teal); border-bottom:2px solid var(--teal);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--teal)}
.faq details p{margin:0 0 22px; color:var(--ink-2); max-width:66ch}

/* Contact */
.contact-grid{align-items:start}
.contact-list{list-style:none; margin:1.8em 0 0; padding:0; display:grid; gap:18px}
.contact-list li{display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:start; color:var(--ink-2)}
.ci{color:var(--teal); font-size:1.15rem; line-height:1.4; text-align:center}

.form{background:var(--cream); border:0; border-radius:var(--rad-lg); padding:clamp(24px,3vw,34px); box-shadow:var(--shadow)}
.field{margin-bottom:19px}
.field label{display:block; font-size:.86rem; font-weight:600; letter-spacing:.02em; color:var(--ink); margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  padding:14px 16px; background:#fff;
  border:1.5px solid var(--line); border-radius:11px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{resize:vertical; min-height:112px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(47,93,98,.12)}
.help{font-size:.85rem; color:var(--muted); margin:.6em 0 0; line-height:1.6}

/* ─────────────── Crisis ───────────────
   Was heavy dark brown, reading like a warning label. Now a deep,
   calm green with a clay hairline: still unmistakably set apart,
   but it feels like care rather than alarm. */
.crisis{background:var(--teal-deep); color:#DDE8E4; padding:clamp(44px,6vw,68px) 0; position:relative}
.crisis .brook{margin-bottom:26px}
.crisis h2{color:#fff; font-size:clamp(1.3rem,2.4vw,1.65rem); font-weight:500}
.crisis p{color:#AFC2BE}
.crisis ul{list-style:none; margin:1.3em 0 0; padding:0; display:grid; gap:.8em}
.crisis li{color:#DDE8E4; padding-left:22px; position:relative}
.crisis li::before{content:""; position:absolute; left:0; top:.72em; width:10px; height:1.5px; background:var(--clay-l); border-radius:2px}
.crisis strong{color:#fff; font-weight:600}

/* ─────────────── Footer ─────────────── */
.site-foot{background:var(--sand); padding:48px 0 32px; font-size:.93rem}
.foot-inner{display:flex; flex-wrap:wrap; justify-content:space-between; gap:26px; padding-bottom:28px; border-bottom:1px solid var(--line)}
.foot-brand{font-family:var(--serif); font-size:1.14rem; font-weight:500; color:var(--teal); margin:0 0 .3em; font-variation-settings:'SOFT' 40}
.foot-inner p{margin:0}
.foot-links{list-style:none; display:flex; flex-wrap:wrap; gap:22px; margin:0; padding:0}
.foot-links a{color:var(--ink-2); text-decoration:none}
.foot-links a:hover{color:var(--teal); text-decoration:underline}
.foot-legal{margin:24px 0 0; font-size:.82rem; color:var(--muted); line-height:1.65; max-width:85ch}

/* ─────────────── Reveal on scroll ───────────────
   Small and slow. Anything showier would fight the tone of the site. */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* ─────────────── Responsive ─────────────── */
@media (max-width:1040px){ .cards-4{grid-template-columns:repeat(2,1fr)} }

@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr; gap:28px}
  .steps li{display:grid; grid-template-columns:50px 1fr; gap:0 20px; align-items:start}
  .step-n{grid-row:span 2; margin-bottom:0}
  .steps h3,.steps p{grid-column:2}
}

@media (max-width:820px){
  .hero-inner{grid-template-columns:1fr}
  .hero-art{order:-1; max-width:270px}
  .two-col{grid-template-columns:1fr}

  .nav-toggle{display:grid; place-items:center; width:44px; height:44px; background:transparent; border:1.5px solid var(--line); border-radius:12px; cursor:pointer}
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after{content:""; display:block; width:19px; height:1.8px; background:var(--teal); border-radius:2px; transition:transform .2s ease, opacity .15s ease}
  .nav-toggle-bars::before{position:absolute; transform:translateY(-6px)}
  .nav-toggle-bars::after{position:absolute; transform:translateY(6px)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:rotate(-45deg)}

  .nav-list{
    position:fixed; inset:76px 0 auto; z-index:55;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); border-bottom:1px solid var(--line);
    padding:8px 26px 24px; box-shadow:0 20px 44px -26px rgba(28,42,44,.55);
    display:none;
  }
  .nav-list.is-open{display:flex}
  .nav-list li{border-bottom:1px solid var(--line)}
  .nav-list li:last-child{border-bottom:0; padding-top:16px}
  .nav-list a:not(.btn){display:block; padding:15px 2px; font-size:1.05rem; border-bottom:0}
  .nav-list .btn{width:100%}
}

@media (max-width:760px){ .creds-row{grid-template-columns:1fr; gap:20px} }

@media (max-width:560px){
  body{font-size:16.5px}
  .wrap{padding:0 19px}
  .brook{padding:0 19px}
  .cards,.cards-4{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
  .rate-card dl>div{flex-direction:column; gap:3px}
  .rate-card dd{text-align:left}
}

@media print{
  .site-head,.nav,.form,.hero-art,.crisis,.brook{display:none}
  body{font-size:11pt}
  .section{padding:14pt 0}
}