/* ==========================================================================
   SERENITY PEAK PSYCHIATRIC & INTEGRATIVE WELLNESS
   Shared stylesheet — index, about, services, contact, accessibility, privacy

   ACCESSIBILITY CONTRACT (WCAG 2.1 AA). Measured ratios, do not eyeball:
     --text      #2E3A36 on --cream ........................ 11.05:1
     --mute      #54615C on --cream .......................... 6.05:1
     --mute      #54615C on --sand ........................... 5.45:1
     --gold-deep #7C5F17 small gold text/links on light ...... 5.59:1
     --gold-light#EBD3A0 on --ink ........................... 11.46:1
     --on-dark   #E6E9E6 on --ink ........................... 13.70:1
     #14100A text on --gold #C7A049 (button label) ........... 7.72:1
     --gold-ui   #A57F26 as a control BORDER on cream ........ 3.46:1

   RULES:
     1. --gold (#C7A049) is DECORATIVE ONLY: ornament, rules, large fills.
        It is 2.29:1 on cream, so it can never carry meaning by itself
        and can never be the only boundary of a control.
     2. Any border that identifies a control uses --gold-ui or --line-strong.
     3. Never introduce a new gold without re-running the contrast check.
   ========================================================================== */

/* ===== 1. Tokens =========================================================== */
:root{
  /* surfaces */
  --ink:#14201C;          /* deep evergreen-black — dark sections   */
  --ink-2:#1E2C27;        /* raised panels on ink                   */
  --cream:#FAF7EF;        /* page background                        */
  --sand:#F1EBDD;         /* banded / alternate sections            */
  --white:#FFFFFF;

  /* ink & text */
  --text:#2E3A36;
  --mute:#54615C;
  --on-dark:#E6E9E6;
  --on-dark-mute:#C6CCC8;

  /* gold family — see contract above */
  --gold:#C7A049;         /* decorative only                        */
  --gold-ui:#A57F26;      /* perceivable borders, control edges     */
  --gold-deep:#7C5F17;    /* gold text & links on light             */
  --gold-light:#EBD3A0;   /* gold text & headings on dark           */

  /* lines */
  --line:#E0D8C6;
  --line-strong:#B9AE97;
  --line-dark:rgba(235,211,160,.22);

  /* type */
  --f-display:"Marcellus", "Cormorant Garamond", Georgia, serif;
  --f-ui:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* metrics */
  --wrap:76rem;
  --gutter:1.5rem;
  --r:2px;
  --shadow:0 1px 2px rgba(20,32,28,.04), 0 8px 24px -12px rgba(20,32,28,.14);

  /* rhythm — fluid, so mobile never feels padded out */
  --sp-section:clamp(3.5rem, 8vw, 7rem);
}

/* ===== 2. Reset ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:var(--f-ui);
  font-size:1.0625rem;
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0 0 .55em;line-height:1.14;font-weight:400;color:var(--ink)}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.15rem}
li{margin-bottom:.45em}
a{color:var(--gold-deep);text-underline-offset:.18em}
a:hover{color:var(--ink)}
table{border-collapse:collapse;width:100%}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

/* ===== 3. Accessibility utilities ========================================== */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
  position:fixed;left:.75rem;top:-5rem;z-index:300;
  background:var(--ink);color:var(--gold-light);
  padding:.95rem 1.4rem;border:1px solid var(--gold-ui);border-radius:var(--r);
  font-family:var(--f-ui);font-size:.8rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  transition:top .18s ease;
}
.skip:focus{top:.75rem}

/* Visible focus everywhere. Never remove without a replacement. */
:focus-visible{
  outline:3px solid var(--gold-deep);
  outline-offset:3px;
  border-radius:var(--r);
}
.on-dark :focus-visible,.dark :focus-visible{outline-color:var(--gold-light)}

/* ===== 4. Layout =========================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:52rem}
.section{padding-block:var(--sp-section)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.band{background:var(--sand);border-block:1px solid var(--line)}
.dark{background:var(--ink);color:var(--on-dark)}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--gold-light)}
.dark a{color:var(--gold-light)}
.dark a:hover{color:var(--white)}
.dark .lede,.dark p{color:var(--on-dark-mute)}
.measure{max-width:64ch}
.center{text-align:center}
.center .lede,.center p{margin-inline:auto}

/* ===== 5. Type ============================================================= */
/* Editorial display: all-caps, letterspaced, tight leading — the baseline look */
.display{
  font-family:var(--f-display);
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1.1;
}
h1.display{font-size:clamp(2.1rem,6.2vw,4.15rem)}
h2.display{font-size:clamp(1.65rem,4.2vw,2.9rem)}
h3.display{font-size:clamp(1.2rem,2.4vw,1.6rem);letter-spacing:.08em}
.display .line{display:block}
.display em{
  font-style:normal;color:var(--gold-deep);
}
/* On any dark surface the light gold is the only accessible one: gold-deep
   measures 2.80:1 against --ink and fails AA. Keep these selectors in sync
   with every dark section wrapper (.dark, .on-dark, .hero, .page-hero, .cta). */
.dark .display em,.on-dark .display em{color:var(--gold-light)}

.eyebrow{
  font-family:var(--f-ui);font-size:.7rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 1.1rem;
}
.dark .eyebrow,.on-dark .eyebrow{color:var(--gold-light)}

.lede{font-size:clamp(1.06rem,1.6vw,1.2rem);line-height:1.7;max-width:58ch;color:var(--text)}
.dark .lede{color:var(--on-dark-mute)}
.fine{font-size:.85rem;line-height:1.65;color:var(--mute)}

/* Hairline rule with a gold peak — the brand's signature divider */
.rule{
  display:block;width:100%;height:22px;color:var(--gold);opacity:.9;margin:0;
}
.dark .rule{color:var(--gold-light);opacity:.5}

/* ===== 6. Buttons ========================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.8rem 1.8rem;
  font-family:var(--f-ui);font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  border:1.5px solid transparent;border-radius:var(--r);
  cursor:pointer;text-align:center;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
/* gold fill + gold-ui edge: label is 7.72:1, control boundary is 3.46:1 */
.btn--primary{background:var(--gold);color:#14100A;border-color:var(--gold-ui)}
.btn--primary:hover{background:#AE8A34;color:#14100A;border-color:#7C5F17}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--gold-light)}
.dark .btn--ghost,.on-dark .btn--ghost{color:var(--gold-light);border-color:var(--gold-light)}
.dark .btn--ghost:hover,.on-dark .btn--ghost:hover{background:var(--gold-light);color:var(--ink)}
.btn--wide{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}
.center .btn-row{justify-content:center}

/* Text link with arrow — used to leave a card or block */
.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  font-family:var(--f-ui);font-size:.76rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--gold-deep);
}
.link-arrow::after{content:"\2192";font-size:1.05rem;transition:transform .2s ease}
.link-arrow:hover{color:var(--ink)}
.link-arrow:hover::after{transform:translateX(4px)}
.dark .link-arrow{color:var(--gold-light)}
.dark .link-arrow:hover{color:var(--white)}

/* ===== 7. Utility bar ====================================================== */
.utility{background:var(--ink);color:var(--on-dark-mute);font-size:.75rem}
.utility .wrap{
  display:flex;flex-wrap:wrap;gap:.1rem 1.5rem;
  align-items:center;justify-content:center;min-height:42px;padding-block:.3rem;
}
.utility a{
  color:var(--gold-light);text-decoration:none;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;
  padding:.75rem 0;display:inline-flex;align-items:center;min-height:44px;
}
.utility a:hover{color:var(--white);text-decoration:underline}
.utility span{letter-spacing:.1em;text-transform:uppercase;font-size:.7rem}
.utility .portal{
  border:1px solid var(--gold-light);padding:.35rem .9rem;border-radius:var(--r);
  min-height:34px;
}
/* On touch screens give the pill a full 44px target without making the bar
   taller on desktop: the padding grows, the visible border does not. */
@media (pointer:coarse){
  .utility .portal{padding-block:.6rem;min-height:44px}
}
.utility .portal:hover{background:var(--gold-light);color:var(--ink);text-decoration:none}

/* ===== 8. Masthead & navigation ============================================ */
.masthead{
  position:sticky;top:0;z-index:120;
  background:rgba(250,247,239,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.masthead .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:72px;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;padding:.35rem 0}
/* The practice emblem, used as an image so the gold gradient is preserved.
   Logotypes are exempt from WCAG contrast minimums (1.4.11), and the wordmark
   beside it carries the actual name for assistive tech. */
.brand-mark{width:58px;height:auto;aspect-ratio:656/372;flex:none;border:0}
.brand-name{
  font-family:var(--f-display);font-size:1.02rem;line-height:1.15;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.brand-sub{
  display:block;font-family:var(--f-ui);font-size:.52rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-top:.25rem;
}

.nav-desktop{display:none}
.nav-desktop ul{display:flex;align-items:center;gap:1.75rem;list-style:none;margin:0;padding:0}
.nav-desktop li{margin:0}
.nav-desktop a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);text-decoration:none;border-bottom:2px solid transparent;
}
.nav-desktop a:hover{color:var(--ink);border-bottom-color:var(--gold-ui)}
/* current page is marked by aria-current AND weight, never colour alone */
.nav-desktop a[aria-current="page"]{color:var(--ink);font-weight:700;border-bottom-color:var(--gold-ui)}
.nav-desktop .btn,.nav-desktop .btn[aria-current="page"]{border-bottom:1.5px solid var(--gold-ui)}

.menu-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;min-width:44px;padding:.5rem .85rem;
  background:transparent;border:1.5px solid var(--line-strong);border-radius:var(--r);
  font-family:var(--f-ui);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);cursor:pointer;
}
.menu-btn:hover{border-color:var(--gold-ui)}
.menu-btn svg{width:18px;height:18px}

/* Mobile drawer */
.nav-mobile{
  display:none;position:fixed;inset:0;z-index:200;
  background:var(--ink);color:var(--on-dark);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.nav-mobile[data-open="true"]{display:block}
.nav-mobile .drawer-top{
  display:flex;align-items:center;justify-content:space-between;
  min-height:72px;border-bottom:1px solid var(--line-dark);
}
.nav-mobile .drawer-title{
  font-family:var(--f-display);font-size:.95rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-light);
}
.drawer-close{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;min-width:44px;padding:.5rem .85rem;
  background:transparent;border:1.5px solid var(--gold-light);border-radius:var(--r);
  color:var(--gold-light);font-family:var(--f-ui);font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
}
.drawer-close svg{width:16px;height:16px}
.nav-mobile ul{list-style:none;margin:0;padding:1rem 0 0}
.nav-mobile li{margin:0}
.nav-mobile ul a{
  display:block;padding:1.05rem .2rem;min-height:48px;
  font-family:var(--f-display);font-size:1.15rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark);text-decoration:none;border-bottom:1px solid var(--line-dark);
}
.nav-mobile ul a:hover{color:var(--gold-light)}
.nav-mobile ul a[aria-current="page"]{color:var(--gold-light);font-weight:400}
.nav-mobile ul a[aria-current="page"]::before{content:"\2014\00a0";color:var(--gold-light)}
.nav-mobile .drawer-cta{padding:2rem 0 3rem;display:grid;gap:.85rem}
.nav-mobile .drawer-meta{font-size:.85rem;color:var(--on-dark-mute)}
.nav-mobile .drawer-meta a{color:var(--gold-light);font-weight:600}
body.is-locked{overflow:hidden}

/* ===== 9. Hero ============================================================= */
.hero{position:relative;background:var(--ink);color:var(--on-dark);overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover}
/* Scrim guarantees text contrast regardless of which photo is dropped in */
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(20,32,28,.94) 0%,rgba(20,32,28,.88) 45%,rgba(20,32,28,.62) 100%);
}
.hero .wrap{position:relative;padding-block:clamp(4rem,12vw,8.5rem)}
.hero-inner{max-width:46rem}
.hero h1{color:var(--gold-light);margin-bottom:.4em}
.hero .lede{color:var(--on-dark-mute);max-width:46ch;font-size:clamp(1.02rem,1.5vw,1.18rem)}
.hero .btn-row{margin-top:2.25rem}
.hero-meta{
  margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:.5rem 2.25rem;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-mute);
}

/* Interior page hero */
.page-hero{position:relative;background:var(--ink);color:var(--on-dark);overflow:hidden;isolation:isolate}
.page-hero .hero-media::after{
  background:linear-gradient(105deg,rgba(20,32,28,.94) 0%,rgba(20,32,28,.86) 55%,rgba(20,32,28,.68) 100%);
}
.page-hero .wrap{position:relative;padding-block:clamp(3rem,7vw,5rem)}
.page-hero h1{color:var(--gold-light)}
.page-hero p{color:var(--on-dark-mute);max-width:54ch;margin-bottom:0}

/* ===== 10. Goal row (the "what are you here for" quick nav) ================ */
.goals{background:var(--ink-2);border-block:1px solid var(--line-dark)}
/* Dividers are 1px grid gaps showing the list's background through, not
   per-item borders. nth-child border rules broke whenever the column count
   changed at a breakpoint; this is correct at any number of columns. */
.goals ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--line-dark);
}
.goals li{margin:0;background:var(--ink-2)}
.goals a{
  display:flex;flex-direction:column;gap:.3rem;justify-content:center;
  min-height:88px;padding:1.1rem .9rem;text-decoration:none;
  text-align:center;color:var(--gold-light);
}
.goals a:hover{background:rgba(235,211,160,.09)}
.goals .goal-word{
  font-family:var(--f-display);font-size:1rem;letter-spacing:.16em;text-transform:uppercase;
}
.goals .goal-sub{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mute)}

/* ===== 11. Alternating feature blocks ====================================== */
.feature{display:grid;gap:2.25rem;align-items:center}
.feature + .feature{margin-top:clamp(3rem,7vw,5.5rem)}
/* Long text column: top-align so the photo doesn't float in dead space. */
.feature--top{align-items:start}
.feature-media{position:relative}
.feature-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line)}
/* A cream frame on an ink section reads as a stray bright box. */
.dark .feature-media img,.on-dark .feature-media img{border-color:var(--line-dark)}
.feature-media--wide img{aspect-ratio:3/2}
/* Real photograph at its native ratio — no forced crop through a face. */
.feature-media--photo img{aspect-ratio:auto;object-fit:contain;background:var(--sand)}
.feature-eyebrow{margin-bottom:.9rem}
.feature h2,.feature h3{margin-bottom:.5em}
.feature .btn-row{margin-top:1.6rem}

/* Pull quote — the clinician's own words, set apart from body copy.
   (Was previously lost when the unused .ph placeholder block was removed;
   it lived between that block and the Cards section.) */
.pull{
  margin:2rem 0;padding:.4rem 0 .4rem 1.6rem;
  border-left:2px solid var(--gold-ui);
  font-family:var(--f-display);font-size:1.3rem;line-height:1.5;color:var(--ink);
}
.pull p{margin:0}
.dark .pull,.on-dark .pull{border-left-color:var(--gold-light);color:var(--gold-light)}
.dark .pull p,.on-dark .pull p{color:var(--gold-light)}

/* Full-width feature band — artwork behind, copy over it. Reuses .hero-media
   so the scrim keeps its contrast guarantee regardless of the image. */
.band-feature{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--ink);color:var(--on-dark);
}
.band-feature .hero-media::after{
  background:linear-gradient(100deg,rgba(20,32,28,.96) 0%,rgba(20,32,28,.92) 38%,
                             rgba(20,32,28,.72) 72%,rgba(20,32,28,.55) 100%);
}
.band-feature .wrap{position:relative;padding-block:clamp(3.5rem,8vw,6.5rem)}
.band-feature-inner{max-width:44rem}
.band-feature h2{color:var(--gold-light)}
.band-feature p,.band-feature .lede{color:var(--on-dark-mute)}
.band-feature .btn-row{margin-top:1.75rem}

/* ===== 12. Cards =========================================================== */
.cards{display:grid;gap:1.25rem;margin-top:2.75rem}
.card{
  background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);
  padding:1.9rem 1.6rem;display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.card h3{font-size:1.25rem;letter-spacing:.03em;margin-bottom:.5em}
.card p{font-size:.97rem;color:var(--text);margin-bottom:1.2em}
.card ul{font-size:.94rem;margin-bottom:1.2em}
.card .link-arrow{margin-top:auto}

/* ===== 13. Pillars (on dark) =============================================== */
.pillars{display:grid;gap:1.9rem;margin-top:2.75rem}
.pillar{border-top:1px solid var(--line-dark);padding-top:1.35rem}
.pillar h3{font-size:1.05rem;letter-spacing:.1em;margin-bottom:.5em;color:var(--gold-light)}
.pillar p{font-size:.95rem;color:var(--on-dark-mute);margin:0}

/* ===== 14. Values ========================================================== */
.values{display:grid;gap:2rem;margin-top:2.75rem}
.value{border-top:2px solid var(--gold-ui);padding-top:1.35rem}
.value h3{font-size:1.12rem;letter-spacing:.06em;margin-bottom:.5em}
.value p{font-size:.97rem;margin-bottom:0}

/* ===== 15. Reviews ========================================================= */
/* Trustindex renders into this section when its script is present. The
   fallback panel is always in the markup so the section is never empty —
   if the script is blocked by a tracker blocker, this is what shows. */
.reviews-fallback{
  margin-top:2.25rem;padding:2.1rem 1.8rem;
  background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);
  box-shadow:var(--shadow);
}
.reviews-stars{
  color:var(--gold-deep);letter-spacing:.3em;font-size:1.05rem;margin-bottom:.9rem;
}
.reviews-fallback p{margin-inline:auto;max-width:46ch}
.reviews-fallback .btn-row{justify-content:center;margin-top:1.5rem}
/* Keep the third-party widget from overflowing the measure on mobile. */
.ti-widget{max-width:100%!important;overflow:hidden}

/* Service index — bridges the narrow intro and the full-width service list,
   and gives a long pricing page a jump nav. */
.svc-index ul{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.75rem;grid-template-columns:1fr;
}
.svc-index li{margin:0}
.svc-index a{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  min-height:52px;padding:.85rem 1.1rem;text-decoration:none;
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold-ui);
  transition:border-color .18s ease,background-color .18s ease;
}
.svc-index a:hover{background:var(--sand);border-left-color:var(--gold-deep)}
.svc-name{
  font-family:var(--f-display);font-size:1rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink);
}
.svc-from{
  flex:none;font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap;
}

/* ===== 16. Service detail blocks =========================================== */
.service{padding-block:clamp(2.5rem,5vw,3.75rem);border-bottom:1px solid var(--line)}
.service:last-of-type{border-bottom:none}
.service h2{font-size:clamp(1.5rem,3.6vw,2.2rem)}
.price-line{
  display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;align-items:baseline;
  border-top:1px solid var(--line);margin-top:1.75rem;padding-top:1.35rem;
}
.price-item{display:flex;flex-direction:column}
.price-amount{font-family:var(--f-display);font-size:1.55rem;color:var(--ink);line-height:1.2}
.price-unit{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

/* Price rows — a service with several tiers reads better as a list than as
   a row of big numbers.

   The amount column has a fixed min-width and is right-aligned so every
   price lands on the same edge down the whole page. Without it each amount
   sizes to its own content, and a row whose unit label ("per visit") is
   wider than its price pushes that price out of alignment with the rows
   above and below. Keep amounts short for the same reason — put any
   qualifier ("starting at") in the unit slot, not in the number. */
.price-rows{list-style:none;margin:1.6rem 0 0;padding:1.35rem 0 0;border-top:1px solid var(--line)}
.price-rows li{
  display:flex;align-items:baseline;gap:1.5rem;
  margin:0;padding:.85rem 0;border-bottom:1px dotted var(--line);
}
.price-rows li:last-child{border-bottom:none}
.pr-label{flex:1 1 auto;font-size:.97rem;color:var(--text);line-height:1.5}
.pr-note{display:block;margin-top:.2rem;font-size:.8rem;line-height:1.5;color:var(--mute);letter-spacing:.01em}
.pr-amt{
  flex:0 0 auto;min-width:7rem;text-align:right;
  font-family:var(--f-display);font-size:1.35rem;color:var(--ink);
  white-space:nowrap;line-height:1.2;
}
.pr-amt small{
  display:block;margin-top:.15rem;
  font-family:var(--f-ui);font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);text-align:right;
}
.price-note{margin-top:1.35rem;font-size:.87rem;line-height:1.65;color:var(--mute)}
.price-note strong{color:var(--text)}

/* ===== 17. Pricing table =================================================== */
/* The frame lives on the wrapper, not the table: a <caption> renders outside
   the table's border box, so a border on the table itself never lines up. */
.table-scroll{
  overflow-x:auto;margin-top:2rem;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);background:var(--white);
}
.price-table{border:0;background:transparent;min-width:32rem}
.price-table caption{
  text-align:left;padding:1.15rem 1.3rem;background:var(--sand);
  border-bottom:1px solid var(--line);
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
}
/* Let the service name take the slack; money reads right-aligned. */
.price-table th:nth-child(2),.price-table td:nth-child(2){width:34%}
.price-table th:nth-child(3),.price-table td:nth-child(3){width:18%;text-align:right}
.price-table th,.price-table td{
  text-align:left;padding:1rem 1.3rem;border-bottom:1px solid var(--line);
  font-size:.95rem;vertical-align:top;
}
.price-table thead th{
  font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
}
.price-table tbody th{font-weight:600;color:var(--ink)}
.price-table tbody tr:last-child th,.price-table tbody tr:last-child td{border-bottom:none}
.price-table td.amount{white-space:nowrap;font-weight:600;color:var(--ink)}

/* ===== 18. FAQ ============================================================= */
.faq{margin-top:2.25rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:1.25rem 3rem 1.25rem 0;min-height:48px;
  font-family:var(--f-display);font-size:1.08rem;letter-spacing:.03em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.5rem;top:50%;
  width:13px;height:13px;margin-top:-7px;
  border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--gold-deep)}
.faq-body{padding:0 0 1.4rem;max-width:68ch}
.faq-body p:last-child,.faq-body ul:last-child{margin-bottom:0}

/* ===== 19. Forms =========================================================== */
.field{margin-bottom:1.4rem}
.field label{
  display:block;font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.5rem;
}
.field .hint{
  display:block;font-size:.82rem;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--mute);margin-top:.3rem;line-height:1.5;
}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:.75rem .95rem;
  font-family:var(--f-ui);font-size:1rem;color:var(--ink);
  background:var(--white);border:1.5px solid var(--line-strong);border-radius:var(--r);
}
.field textarea{min-height:8.5rem;resize:vertical;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--gold-ui)}
.field [aria-invalid="true"]{border-color:#96301C;border-width:2px}
.field-error{
  display:block;margin-top:.4rem;font-size:.85rem;font-weight:600;color:#96301C;
}
.field-error:empty{display:none}
.req{color:#96301C;font-weight:700}
.form-note{
  background:var(--sand);border-left:3px solid var(--gold-ui);
  padding:1.1rem 1.25rem;font-size:.9rem;line-height:1.6;margin-bottom:1.85rem;
}
.form-note p:last-child{margin-bottom:0}
.form-status{
  margin-top:1.1rem;font-size:.95rem;font-weight:600;line-height:1.6;
  padding:.9rem 1.1rem;border-left:3px solid var(--gold-ui);background:var(--sand);color:var(--ink);
}
.form-status:empty{display:none}
.form-status[data-state="error"]{border-left-color:#96301C;color:#96301C;background:#FBF0EE}

/* ===== 20. Intake handoff card ============================================= */
.intake{
  margin-top:1.75rem;padding:1.9rem 1.7rem;
  background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);
  box-shadow:var(--shadow);
}
.intake-list{list-style:none;margin:0 0 1.6rem;padding:0}
.intake-list li{
  position:relative;padding-left:1.9rem;margin-bottom:.7rem;font-size:.97rem;
}
.intake-list li::before{
  content:"";position:absolute;left:.25rem;top:.62em;
  width:9px;height:5px;border-left:2px solid var(--gold-deep);
  border-bottom:2px solid var(--gold-deep);transform:rotate(-45deg);
}
.intake .btn-row{margin-bottom:1.25rem}
.intake .fine{margin:0}

/* ===== 21. Contact details ================================================= */
.contact-grid{display:grid;gap:3rem}
.contact-list{list-style:none;margin:0 0 2rem;padding:0}
.contact-list li{display:flex;gap:.85rem;margin-bottom:1.2rem;align-items:flex-start}
.contact-list svg{width:20px;height:20px;flex:none;margin-top:.35rem;color:var(--gold-deep)}
.contact-list a{display:inline-block;min-height:44px;padding:.4rem 0;font-weight:600;overflow-wrap:anywhere}
.contact-label{
  display:block;font-size:.66rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);
}

/* Two entry paths */
.paths{display:grid;gap:1.5rem;margin-top:2.5rem}
.path{
  border:1px solid var(--line);background:var(--white);
  padding:2rem 1.7rem;display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.path--lead{border-top:3px solid var(--gold)}
.path h2{font-size:1.3rem;letter-spacing:.06em;margin-bottom:.5em}
.path p{font-size:.97rem}
.path .btn{margin-top:auto;align-self:flex-start}

/* Appointment policy — the fee and notice window are contractual, so the
   lead sentence is set apart rather than buried in a paragraph. */
.policy{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold-ui);
  padding:1.9rem 1.7rem;box-shadow:var(--shadow);
}
.policy-lead{
  font-family:var(--f-display);font-size:1.2rem;line-height:1.5;color:var(--ink);
  padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line);
}
.policy-lead strong{font-family:var(--f-ui);font-weight:700;font-size:.95em}
.policy p:last-child{margin-bottom:0}

/* Licensure line — a credential, so it reads as a badge not body copy. */
.licensure{
  display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;
  margin:0 0 1.3rem;padding:.6rem 1rem;
  background:var(--sand);border-left:3px solid var(--gold-ui);
  font-size:.92rem;color:var(--text);
}
.licensure-label{
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);
}
.footer-addr{font-style:normal;line-height:1.5;padding:.42rem 0}

/* Pre-publication checklist box — remove once the blanks are filled. */
.policy-todo{
  background:var(--sand);border:1px solid var(--line-strong);border-left:3px solid #96301C;
  padding:1.6rem 1.6rem 1.3rem;margin-bottom:2.5rem;
}
.policy-todo h2{font-size:1.15rem;letter-spacing:.06em;margin-bottom:.6em}
.policy-todo p,.policy-todo li{font-size:.93rem}
.policy-todo p:last-child{margin-bottom:0}

/* Secure message card — the primary, HIPAA-covered route. */
.secure-msg{
  background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);
  padding:1.9rem 1.7rem;box-shadow:var(--shadow);margin-bottom:1.75rem;
}
.secure-label{
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:.7rem;
}
.secure-msg h3{font-size:1.3rem;letter-spacing:.05em;margin-bottom:.5em}
.secure-msg .btn-row{margin:1.4rem 0 1rem}
.secure-msg .fine{margin:0}
.secure-alt{border-left:3px solid var(--line-strong);padding:.2rem 0 .2rem 1.3rem}
.secure-alt h3{font-size:1.05rem;letter-spacing:.06em;margin-bottom:.5em}
.secure-alt p:last-child{margin-bottom:0}
/* Hidden until a real Spruce Link is pasted in; site.js does the swap. */
.secure-msg[hidden]{display:none}

/* ===== 22. Crisis notice =================================================== */
.crisis{background:var(--ink-2);border:1px solid var(--gold-ui);padding:1.35rem 1.5rem;margin-top:2.75rem}
.crisis h2,.crisis h3{font-size:1rem;letter-spacing:.1em;color:var(--gold-light);margin-bottom:.6em}
.crisis p{font-size:.93rem;color:var(--on-dark-mute);margin:0}
.crisis a{font-weight:700;color:var(--gold-light)}
.crisis--light{background:var(--sand);border-color:var(--gold-ui)}
.crisis--light h2,.crisis--light h3{color:var(--ink)}
.crisis--light p{color:var(--text)}
.crisis--light a{color:var(--gold-deep)}

/* ===== 23. Closing CTA ===================================================== */
.cta{position:relative;background:var(--ink);color:var(--on-dark);text-align:center;overflow:hidden;isolation:isolate}
.cta .wrap{position:relative;padding-block:clamp(3.5rem,8vw,6rem)}
.cta h2{color:var(--gold-light)}
.cta p{margin-inline:auto;max-width:50ch;color:var(--on-dark-mute)}
.cta .btn-row{justify-content:center;margin-top:2rem}

/* ===== 24. Footer ========================================================== */
.footer{background:var(--ink);color:var(--on-dark-mute);font-size:.93rem}
.footer .wrap{padding-block:clamp(3rem,6vw,4rem) 2rem}
.footer-grid{display:grid;gap:2.5rem}
.footer h2{
  font-family:var(--f-ui);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);margin-bottom:.9rem;
}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:0}
.footer a{color:var(--on-dark-mute);text-decoration:none;display:inline-block;
  min-height:44px;padding:.62rem 0;line-height:1.45;overflow-wrap:anywhere}
.footer a:hover{color:var(--gold-light);text-decoration:underline}
.footer .brand-mark{width:84px;margin-bottom:1rem}
.footer-mission{font-size:.9rem;color:var(--on-dark-mute);max-width:36ch;line-height:1.7}
.social{display:flex;gap:.75rem;margin-top:1rem}
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;min-height:44px;padding:0;
  border:1px solid var(--gold-light);border-radius:var(--r);color:var(--gold-light);
}
.social a:hover{background:var(--gold-light);color:var(--ink)}
.social svg{width:19px;height:19px}
.legal{
  border-top:1px solid var(--line-dark);margin-top:2.5rem;padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:.4rem 1.75rem;justify-content:space-between;
  font-size:.78rem;
}
.legal ul{display:flex;flex-wrap:wrap;gap:0 1.4rem}
.legal p{margin:0}
.disclaimer{
  margin-top:1.5rem;font-size:.75rem;line-height:1.65;color:#9AA39F;max-width:78ch;
}

/* ===== 25. Sticky mobile call-to-action ==================================== */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line-strong);
  border-top:1px solid var(--line-strong);
  box-shadow:0 -6px 20px -10px rgba(20,32,28,.35);
}
.sticky-cta a{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:56px;padding:.6rem .75rem;text-decoration:none;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.sticky-cta .s-call{background:var(--cream);color:var(--ink)}
.sticky-cta .s-book{background:var(--gold);color:#14100A}
.sticky-cta svg{width:16px;height:16px;flex:none}
body{padding-bottom:56px}

/* ===== 26. Reveal on scroll ================================================ */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}

/* ===== 27. Breakpoints ===================================================== */
@media (min-width:40rem){
  .svc-index ul{grid-template-columns:repeat(2,1fr);gap:.85rem}
  .cards{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .values{grid-template-columns:repeat(2,1fr);gap:2.25rem 2.75rem}
  .paths{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:repeat(2,1fr)}
  .goals ul{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr}
}
@media (min-width:60rem){
  .svc-index ul{grid-template-columns:repeat(3,1fr)}
  .nav-desktop{display:block}
  .menu-btn{display:none}
  .nav-mobile{display:none!important}
  .sticky-cta{display:none}
  body{padding-bottom:0}

  .cards{grid-template-columns:repeat(3,1fr)}
  .pillars{grid-template-columns:repeat(4,1fr);gap:2rem}
  .quotes{grid-template-columns:repeat(3,1fr)}
  .goals ul{grid-template-columns:repeat(6,1fr)}

  .feature{grid-template-columns:1fr 1.12fr;gap:4rem}
  .feature--flip .feature-media{order:2}
  .contact-grid{grid-template-columns:1.25fr 1fr;gap:4.5rem}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.15fr;gap:3rem}
}

/* ===== 28. User preferences ================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
  .link-arrow:hover::after{transform:none}
}
@media (prefers-contrast:more){
  :root{
    --mute:#3B4642;
    --line:#8C9490;
    --line-strong:#5E6763;
    --line-dark:rgba(235,211,160,.55);
    --on-dark-mute:#EDEFED;
  }
  .hero-media::after{background:rgba(20,32,28,.94)}
  a{text-decoration:underline}
  .btn{text-decoration:none}
}
@media print{
  .utility,.masthead,.nav-mobile,.sticky-cta,.social,.btn,.hero-media,.goals{display:none!important}
  body{background:#fff;color:#000;font-size:11pt;padding-bottom:0}
  .dark,.hero,.page-hero,.cta,.footer{background:#fff!important;color:#000!important}
  .dark h1,.dark h2,.dark h3,.hero h1,.page-hero h1,.cta h2,.footer h2{color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
  .card,.quote,.path{break-inside:avoid;box-shadow:none}
}