/* ===========================================================
   Apex NeuroCare — site stylesheet
   Theme: calming purple + white, clinical but warm.
   Mobile-first; container queries kept simple for broad browser support.
   =========================================================== */

:root {
  --purple-50:  #f5f3ff;
  --purple-100: #ede9fe;
  --purple-200: #ddd6fe;
  --purple-300: #c4b5fd;
  --purple-400: #a78bfa;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --purple-700: #6d28d9;
  --purple-800: #5b21b6;
  --purple-900: #4c1d95;

  --ink-900:    #1a1530;
  --ink-700:    #3b3458;
  --ink-500:    #6b6488;
  --ink-300:    #b3aecb;

  --bg:         #ffffff;
  --bg-soft:    #fbfaff;
  --bg-tint:    var(--purple-50);
  --line:       #ebe7f6;

  --radius-sm: .375rem;
  --radius:    .75rem;
  --radius-lg: 1.25rem;
  --shadow-sm: 0 1px 2px rgba(76, 29, 149, .06);
  --shadow:    0 6px 24px -8px rgba(76, 29, 149, .18);
  --shadow-lg: 0 18px 40px -12px rgba(76, 29, 149, .28);

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;

  --measure: 70ch;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--purple-700); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--purple-900); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--ink-900);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.5rem); }
h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; max-width: var(--measure); }

.container {
  width: min(100% - 2rem, 1140px);
  margin-inline: auto;
}

.visually-hidden {
  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-link {
  position: absolute; top: .5rem; left: .5rem;
  background: var(--purple-700); color: #fff;
  padding: .5rem .75rem; border-radius: var(--radius-sm);
  z-index: 1000;
  /* Fully hidden until keyboard-focused — translate up by its own full height
     (height-independent, so it can never peek below the viewport top). */
  transform: translateY(calc(-100% - 1rem));
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.97);
  /* NOTE: no backdrop-filter. It would make this header the containing block
     for the fixed mobile drawer, which then extends the page width and causes
     horizontal scroll. Keeping it out lets the drawer be truly viewport-fixed. */
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 0;
}
.brand {
  display: inline-flex; align-items: center; gap: .65rem;
  text-decoration: none; color: var(--ink-900);
}
.brand__mark { width: 36px; height: 36px; flex: 0 0 auto; }
.brand__text { display: flex; flex-direction: column; gap: .12rem; line-height: 1.05; }
.brand__name { font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; white-space: nowrap; }
.brand__name em { font-style: normal; color: var(--purple-700); }
.brand__sub {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .6rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--purple-600);
  white-space: nowrap;
}
.brand__sub::before { content: ""; flex: 0 0 auto; width: .9rem; height: 1px; background: var(--purple-300); }

.nav-toggle {
  appearance: none; background: transparent; border: 0; padding: .5rem;
  display: inline-flex; flex-direction: column; gap: 5px; cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.nav-toggle__bar { display: block; width: 22px; height: 2px; background: var(--ink-900); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile: right-side slide-out drawer ---- */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(26, 21, 48, .5);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }
/* Stop the off-canvas drawer (parked off the right edge) from creating
   horizontal scroll. `clip` keeps the page's scroll root intact, so the
   sticky header is unaffected. */
body { overflow-x: clip; }

.primary-nav {
  position: fixed; top: 0; right: 0; z-index: 60;
  height: 100dvh; width: min(86vw, 360px);
  background: var(--bg);
  box-shadow: -16px 0 48px -16px rgba(76, 29, 149, .35);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .28s;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 1.5rem;
}
.primary-nav.is-open { transform: translateX(0); visibility: visible; transition: transform .28s cubic-bezier(.22, .61, .36, 1); }

.primary-nav__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav-close {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--ink-700);
}
.nav-close:hover { background: var(--purple-50); color: var(--purple-800); }

.primary-nav > ul { list-style: none; margin: 0; padding: .5rem 0; display: flex; flex-direction: column; gap: 0; }
.primary-nav > ul > li > a {
  display: block; padding: .9rem 1.25rem; text-align: center;
  color: var(--ink-900); text-decoration: none; font-weight: 500; font-size: 1.05rem;
}
.primary-nav > ul > li > a[aria-current="page"] { background: var(--purple-50); color: var(--purple-800); font-weight: 600; }
.primary-nav > ul > li > a:hover { background: var(--purple-50); color: var(--purple-800); }
.primary-nav__cta { margin: 1rem 1.25rem 0; text-align: center; color: #fff; }
.primary-nav__call { margin: .6rem 1.25rem 0; }

/* ---- Submenu (Services) — mobile accordion ---- */
.has-submenu { position: relative; }
.submenu-toggle {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  position: absolute; top: 0; right: .35rem; height: 3.1rem;
  display: inline-flex; align-items: center; padding: .5rem; color: var(--ink-500);
}
.submenu-toggle svg { transition: transform .2s ease; }
.has-submenu.is-expanded .submenu-toggle svg { transform: rotate(180deg); }
.submenu { list-style: none; margin: 0; padding: 0; display: none; background: var(--purple-50); }
.has-submenu.is-expanded > .submenu { display: block; }
.submenu a { display: block; padding: .7rem 1.25rem; text-align: center; color: var(--ink-700); text-decoration: none; font-size: .98rem; }
.submenu a:hover { background: var(--purple-100); color: var(--purple-800); }

/* ---- Desktop: inline header nav (drawer pieces hidden) ---- */
@media (min-width: 880px) {
  .nav-toggle, .nav-close, .primary-nav__head, .nav-backdrop, .submenu-toggle { display: none; }
  /* Higher specificity than the later `.btn { display:inline-flex }` rule so the
     call button truly stays hidden on desktop. */
  .primary-nav .primary-nav__call { display: none; }
  .primary-nav {
    position: static; height: auto; width: auto; visibility: visible;
    transform: none; box-shadow: none; background: transparent;
    overflow: visible; padding-bottom: 0;
    flex-direction: row; align-items: center; gap: .25rem;
  }
  .primary-nav > ul { flex-direction: row; gap: .1rem; padding: 0; }
  .primary-nav > ul > li > a { padding: .5rem .7rem; font-size: 1rem; border-radius: var(--radius-sm); }
  .primary-nav > ul > li > a[aria-current="page"] { box-shadow: none; }
  .primary-nav__cta { margin: 0 0 0 .75rem; }

  /* Caret indicator on the Services link — clean solid down-triangle */
  .has-submenu > a { display: inline-flex; align-items: center; gap: .35rem; }
  .has-submenu > a::after {
    content: ""; width: 0; height: 0; flex: 0 0 auto;
    border-left: .28rem solid transparent;
    border-right: .28rem solid transparent;
    border-top: .32rem solid currentColor;
    opacity: .5; transition: transform .15s ease;
  }
  .has-submenu:hover > a::after, .has-submenu:focus-within > a::after { transform: rotate(180deg); opacity: .75; }
  /* Dropdown panel. Kept in the DOM (not display:none) so it can fade and so an
     invisible "bridge" can span the gap below the link. Without the bridge the
     pointer crosses dead space on the way down to the items and the menu vanishes
     before you can click — the bug being fixed here. A short hide-delay on
     `visibility` adds extra forgiveness for a slightly off-line diagonal move. */
  .submenu {
    display: block; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(.5rem);
    margin-top: .4rem;
    min-width: 260px; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .4rem;
    z-index: 70;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .28s;
  }
  /* Invisible hover bridge spanning the visual gap between link and panel. */
  .submenu::before {
    content: ""; position: absolute; left: 0; right: 0; top: -.55rem; height: .55rem;
  }
  .has-submenu:hover > .submenu, .has-submenu:focus-within > .submenu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity .16s ease, transform .16s ease;
  }
  .submenu a { text-align: left; white-space: nowrap; padding: .55rem .7rem; border-radius: var(--radius-sm); color: var(--ink-900); font-size: .92rem; }
  .submenu a:hover { background: var(--purple-50); color: var(--purple-800); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .8rem 1.25rem;
  border-radius: 999px;
  font-weight: 600; text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  font-size: 1rem;
  line-height: 1;
}
.btn--primary  { background: var(--purple-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover  { background: var(--purple-800); color: #fff; box-shadow: var(--shadow); transform: translateY(-1px); }
.btn--ghost    { background: transparent; color: var(--purple-700); border-color: var(--purple-200); }
.btn--ghost:hover { background: var(--purple-50); color: var(--purple-800); }
.btn--light    { background: #fff; color: var(--purple-800); }
.btn--light:hover { background: var(--purple-50); }

/* Button pairs in body copy (e.g. "Book a consult" + "All pricing"): match the
   .hero__cta flex/gap behavior so they keep consistent spacing on desktop and
   gain vertical breathing room when they wrap on mobile — instead of stacking
   nearly touching. Targets any paragraph holding two or more buttons. */
p:has(> .btn + .btn) { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) 0;
  background:
    radial-gradient(60% 80% at 80% 0%, var(--purple-100), transparent 60%),
    radial-gradient(50% 60% at 10% 100%, var(--purple-50), transparent 60%),
    var(--bg);
  overflow: hidden;
}
.hero__grid { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
.hero__eyebrow {
  display: inline-block;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--purple-700); font-weight: 600;
  background: var(--purple-50); border: 1px solid var(--purple-100);
  padding: .35rem .7rem; border-radius: 999px; margin-bottom: 1rem;
}
.hero__title { margin: 0 0 .6em; }
.hero__title em { color: var(--purple-700); font-style: normal; }
.hero__lede { font-size: 1.15rem; color: var(--ink-700); max-width: 36rem; }
.hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero__art {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, var(--purple-200), var(--purple-400) 60%, var(--purple-700));
  position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
}
.hero__art::after {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250'><g fill='none' stroke='white' stroke-opacity='.35' stroke-width='.5'><path d='M0 200 Q50 150 100 180 T200 160'/><path d='M0 220 Q50 170 100 200 T200 180'/><path d='M0 240 Q50 190 100 220 T200 200'/></g></svg>") center/cover no-repeat;
  mix-blend-mode: screen;
}
.hero__art-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(255,255,255,.85); font-family: var(--font-serif);
  font-size: 1.1rem; text-align: center; padding: 1rem;
}

@media (min-width: 820px) {
  .hero__grid { grid-template-columns: 1.1fr 1fr; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(3rem, 6vw, 5rem) 0; }
.section--tint { background: var(--bg-tint); }
.section--soft { background: var(--bg-soft); }
.section__header { max-width: 48rem; margin-bottom: 2.5rem; }
.section__eyebrow {
  display: inline-block;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--purple-700); font-weight: 700; margin-bottom: .75rem;
}
.section__title { margin: 0 0 .5em; }
.section__lede { color: var(--ink-700); font-size: 1.1rem; max-width: 40rem; }

/* ---------- Card grid ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Exactly two columns on desktop (clean 2x2 for the four services) */
.grid--cards2 { grid-template-columns: 1fr; }
@media (min-width: 740px) { .grid--cards2 { grid-template-columns: 1fr 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column; gap: .5rem;
  text-decoration: none; color: inherit;
}
a.card:hover, .card--linkable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--purple-200);
}
.card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--purple-100), var(--purple-300));
  display: grid; place-items: center;
  color: var(--purple-800);
  margin-bottom: .5rem;
}
.card__title { font-size: 1.15rem; margin: 0; }
.card__body { color: var(--ink-700); margin: 0; }
.card__more { color: var(--purple-700); font-weight: 600; margin-top: auto; padding-top: .5rem; }

/* ---------- Feature row ---------- */
.feature-row {
  display: grid; gap: 2rem; align-items: center;
  grid-template-columns: 1fr;
}
.feature-row + .feature-row { margin-top: 3rem; }
.feature-row__art {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--purple-100), var(--purple-300));
  display: grid; place-items: center;
  color: var(--purple-800); font-family: var(--font-serif);
  padding: 2rem; text-align: center;
}
@media (min-width: 820px) {
  .feature-row { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .feature-row--reverse .feature-row__art,
  .feature-row--reverse .feature-row__img { order: 2; }
}

/* ---------- Stats / pillars ---------- */
.pillars {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: 1.5rem; border-radius: var(--radius);
  background: var(--purple-50);
  border: 1px solid var(--purple-100);
}
.pillar__value { font-family: var(--font-serif); font-size: 2rem; color: var(--purple-800); }
.pillar__label { color: var(--ink-700); font-size: .95rem; }

/* ---------- Quote ---------- */
.quote {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.5vw + .75rem, 1.8rem);
  line-height: 1.4; color: var(--ink-900);
  border-left: 4px solid var(--purple-400);
  padding: .25rem 0 .25rem 1.5rem;
  max-width: 50rem;
}
.quote cite { display: block; font-style: normal; font-size: .95rem; color: var(--ink-500); margin-top: .75rem; font-family: var(--font-sans); }

/* ---------- Prose (legal, blog) ---------- */
.prose {
  max-width: var(--measure);
}
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .25em 0; }
.prose blockquote {
  margin: 1.5em 0; padding: .25em 1.25em;
  border-left: 3px solid var(--purple-300);
  color: var(--ink-700);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }

/* ---------- Page header (non-home pages) ---------- */
.page-header {
  background: linear-gradient(180deg, var(--purple-50), transparent);
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.page-header__crumbs {
  display: flex; gap: .35rem; align-items: center;
  font-size: .85rem; color: var(--ink-500);
  margin-bottom: .75rem; flex-wrap: wrap;
}
.page-header__crumbs a { color: var(--ink-500); }
.page-header__crumbs a:hover { color: var(--purple-700); }
.page-header__title { margin: 0 0 .5rem; }
.page-header__lede { color: var(--ink-700); font-size: 1.1rem; max-width: 42rem; }

/* ---------- FAQ disclosure ---------- */
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  background: #fff;
  margin-bottom: .75rem;
}
.faq details[open] { border-color: var(--purple-200); }
.faq summary {
  cursor: pointer; font-weight: 600;
  list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--purple-700);
  font-family: var(--font-serif); font-size: 1.5rem; line-height: 1;
  transition: transform .15s ease;
}
.faq details[open] summary::after { content: "−"; }
.faq details > *:not(summary) { margin-top: .75rem; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1rem; max-width: 38rem; }
.form-row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-weight: 600; font-size: .95rem; color: var(--ink-700); }
.field .req { color: var(--purple-700); }
.field input, .field textarea, .field select {
  font: inherit; color: inherit;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .7rem .85rem;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--purple-400);
  box-shadow: 0 0 0 3px var(--purple-100);
}
.field--check { flex-direction: row; align-items: flex-start; gap: .65rem; }
.field--check input { width: auto; margin-top: .25rem; }
.field-error { color: #b91c1c; font-size: .85rem; }
.honey { position: absolute; left: -10000px; }

.form-status { padding: 1rem 1.25rem; border-radius: var(--radius); border: 1px solid var(--line); }
.form-status--ok  { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.form-status--err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 4rem;
  background: linear-gradient(180deg, #fff, var(--purple-50));
  border-top: 1px solid var(--line);
}
.site-footer__grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding: 3rem 0 2rem;
}
.footer-col h2, .footer-col h3 {
  font-size: 1rem; font-family: var(--font-sans); text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-500); margin-bottom: .8rem;
}
.footer-brand-lockup { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.footer-emblem { width: 48px; height: 48px; flex: 0 0 auto; }
.footer-brand-lockup .footer-brand { margin: 0; }
.footer-brand { color: var(--ink-900) !important; font-family: var(--font-serif) !important; font-size: 1.1rem !important; text-transform: none !important; letter-spacing: 0 !important; }

/* IASIS Technologies logo — required on the IASIS service page. */
.iasis-logo { margin: 2rem 0 0; text-align: center; }
.iasis-logo img { width: 100%; max-width: 360px; height: auto; }
.iasis-logo--top { margin: 1.25rem 0 0; }       /* logo at the very top of the IASIS page */
.iasis-logo--top img { max-width: 240px; }

/* Utility: keep a phrase from breaking across lines (e.g. "Somatic Regulation"). */
.nowrap { white-space: nowrap; }
.footer-tagline { color: var(--ink-700); font-size: .95rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: .25rem 0; }
.footer-col a { color: var(--ink-700); text-decoration: none; }
.footer-col a:hover { color: var(--purple-700); }
.hours { display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; font-size: .95rem; color: var(--ink-700); }
.hours li { display: contents; }
.hours li span:first-child { white-space: nowrap; }   /* keep "Mon-Sat" on one line */
.hours span:last-child { text-align: right; }
.social { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; padding: 0; list-style: none; }
.social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--purple-50); border: 1px solid var(--purple-100); color: var(--purple-700);
  transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}
.social a:hover { background: var(--purple-700); border-color: var(--purple-700); color: #fff; transform: translateY(-2px); }
.social svg { width: 20px; height: 20px; display: block; }

.footer-bar { border-top: 1px solid var(--line); padding: 1rem 0; background: #fff; }
.footer-bar__inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: .9rem; color: var(--ink-500); }
.footer-bar__copy { margin: 0; }
/* Pendergrass Consulting credit mark — subtle by default, full on hover. */
.footer-credit { display: inline-flex; vertical-align: middle; margin-left: .45rem; opacity: .5; transition: opacity .15s ease; }
.footer-credit:hover { opacity: 1; }
.footer-credit img { width: 17px; height: 17px; display: block; }
.footer-legal { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-legal a { color: var(--ink-500); text-decoration: none; }
.footer-legal a:hover { color: var(--purple-700); }

/* ---------- Helpers ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--purple-700), var(--purple-900));
  color: #fff; padding: 3rem 0; text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); margin-inline: auto; }
.cta-band .btn { margin-top: 1rem; }

.text-muted { color: var(--ink-500); }
.lede { font-size: 1.15rem; color: var(--ink-700); }
.center { text-align: center; }
.no-bullets { list-style: none; padding: 0; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Photo hero (home) ---------- */
.hero--photo { position: relative; overflow: hidden; isolation: isolate; padding: clamp(4rem, 10vw, 7.5rem) 0; min-height: clamp(420px, 70vh, 720px); display: grid; align-items: center; background: var(--ink-900); }
.hero--photo .hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero--photo .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(26,21,48,.25) 0%, rgba(26,21,48,.55) 60%, rgba(76,29,149,.7) 100%); }
.hero--photo .hero__content { color: #fff; max-width: 48rem; }
.hero--photo .hero__title { color: #fff; }
.hero--photo .hero__title em { color: var(--purple-200); }
.hero--photo .hero__lede { color: rgba(255,255,255,.92); font-size: 1.15rem; }
.hero--photo .hero__sub-lede { color: rgba(255,255,255,.75); margin: 0 0 1.25rem; font-size: .95rem; }
.hero--photo .hero__eyebrow { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.2); }
.hero--photo .hero__grid { display: block; }

/* Desktop: an immersive, widescreen version of the photo hero.
   Scoped to >=860px so the mobile hero (which the client loves) is untouched.
   A left-weighted scrim keeps the headline crisp while the sunrise opens up
   across the right of the frame. */
@media (min-width: 860px) {
  .hero--photo { min-height: min(88vh, 780px); padding: 6rem 0; }
  .hero--photo .hero__bg img { object-position: 50% 42%; }
  .hero--photo::after {
    background:
      linear-gradient(90deg, rgba(26,21,48,.86) 0%, rgba(26,21,48,.58) 34%, rgba(26,21,48,.14) 66%, rgba(26,21,48,0) 100%),
      linear-gradient(0deg, rgba(76,29,149,.45) 0%, rgba(76,29,149,0) 42%);
  }
  .hero--photo .hero__content { max-width: 40rem; }
  .hero--photo .hero__title { font-size: clamp(2.6rem, 3.1vw + 1.1rem, 4rem); text-shadow: 0 2px 28px rgba(13, 8, 30, .35); }
  .hero--photo .hero__lede { font-size: 1.2rem; max-width: 34rem; }
}

/* ---------- Big button variant ---------- */
.btn--lg { padding: 1.05rem 1.65rem; font-size: 1.05rem; }

/* ---------- Feature card (numbered, used for primary services) ---------- */
.card--feature { position: relative; padding-top: 1.85rem; border-color: var(--purple-200); background: linear-gradient(180deg, #fff 0%, var(--purple-50) 100%); }
.card__rank { position: absolute; top: -.7rem; right: 1rem; background: var(--purple-700); color: #fff; font-family: var(--font-serif); font-size: 1.1rem; padding: .25rem .75rem; border-radius: 999px; box-shadow: var(--shadow); }

/* ---------- Welcome ---------- */
.welcome { max-width: 56rem; }
.welcome__body p { font-size: 1.05rem; }

/* ---------- Feature row image variant ---------- */
.feature-row__img { width: 100%; max-width: 480px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); margin: 0 auto; display: block; }

/* ---------- Condition cloud (chips) ---------- */
.condition-cloud { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem .65rem; }
.condition-cloud li { background: #fff; border: 1px solid var(--purple-200); border-radius: 999px; padding: .45rem .95rem; font-size: .95rem; color: var(--ink-700); transition: background .15s ease, border-color .15s ease; }
.condition-cloud li:hover { background: var(--purple-50); border-color: var(--purple-400); color: var(--ink-900); }

/* ---------- Pricing table ---------- */
.price-table { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; font-size: 1rem; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.price-table thead { background: var(--purple-50); }
.price-table th, .price-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.price-table th { color: var(--purple-800); font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.price-table tr:last-child td { border-bottom: 0; }
.price-table .price { font-weight: 600; color: var(--purple-700); white-space: nowrap; }
.price-table .savings { color: #047857; font-size: .9rem; }

/* ---------- Testimonial card ---------- */
.testimonial { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 1rem; }
.testimonial__quote { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.55; color: var(--ink-900); margin: 0; }
.testimonial__attribution { color: var(--ink-500); font-style: normal; margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--line); }
.testimonial__attribution strong { color: var(--purple-800); font-weight: 600; }

/* ---------- Lead-magnet card (poster downloads) ---------- */
.lead-card { background: #fff; border: 1px solid var(--purple-200); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow); display: grid; gap: 1rem; }
.lead-card__title { margin: 0; font-family: var(--font-serif); font-size: 1.4rem; color: var(--ink-900); }
.lead-card__form { display: grid; gap: .75rem; }
.lead-card__form input[type="email"] { font: inherit; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lead-card__form input[type="email"]:focus { outline: none; border-color: var(--purple-400); box-shadow: 0 0 0 3px var(--purple-100); }

/* ---------- Compliance / supervisor box ---------- */
.compliance-box { background: var(--purple-50); border: 1px solid var(--purple-200); border-left: 4px solid var(--purple-700); border-radius: var(--radius); padding: 1rem 1.25rem; font-size: .95rem; color: var(--ink-700); margin: 1.5rem 0; }
.compliance-box strong { color: var(--ink-900); }

/* ---------- Pull image into prose ---------- */
.prose .figure { margin: 1.5rem 0; }
.prose .figure img { border-radius: var(--radius); box-shadow: var(--shadow-sm); width: 100%; height: auto; }
.prose .figure figcaption { color: var(--ink-500); font-size: .85rem; margin-top: .5rem; text-align: center; }

/* ---------- Footer disclaimer ---------- */
.footer-disclaimer { padding: 1.25rem 0 .5rem; }
.footer-disclaimer p { max-width: none; margin: 0 auto; font-size: .8rem; line-height: 1.6; color: var(--ink-500); }

/* ===========================================================
   v3 editorial polish — components for flowing, designed pages
   =========================================================== */

/* Larger, lighter opening paragraph */
.intro-lede { font-size: clamp(1.15rem, .6vw + 1.05rem, 1.4rem); line-height: 1.5; color: var(--ink-700); max-width: 46rem; }

/* Centered section header variant */
.section__header--center { margin-inline: auto; text-align: center; }
.section__header--center .section__lede { margin-inline: auto; }

/* Narrow / wide content rails (replaces inline max-width styles) */
.rail { max-width: 60rem; margin-inline: auto; }
.rail--narrow { max-width: 46rem; margin-inline: auto; }

/* ---- Profile hero (bio pages) ---- */
.profile-hero { display: grid; gap: 2.25rem; align-items: center; grid-template-columns: 1fr; }
.profile-hero__media { position: relative; }
.profile-hero__img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 5; object-fit: cover; }
.profile-hero__name { margin: 0 0 .15rem; }
.profile-hero__role { color: var(--purple-700); font-weight: 600; margin: 0 0 1rem; font-size: 1.05rem; }
@media (min-width: 880px) {
  .profile-hero { grid-template-columns: .82fr 1.18fr; gap: 3.5rem; }
}

/* ---- Trust / credential chips ---- */
.cred-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.25rem 0 0; }
.cred-chips li { background: var(--purple-50); border: 1px solid var(--purple-100); color: var(--purple-800); font-size: .85rem; font-weight: 500; padding: .4rem .8rem; border-radius: 999px; }

/* ---- Pull quote ---- */
.pullquote { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.45rem, 2.2vw + 1rem, 2.3rem); line-height: 1.3; color: var(--ink-900); text-align: center; max-width: 34rem; margin-inline: auto; }
.pullquote em, .pullquote b { font-style: normal; color: var(--purple-700); }
.pullquote::before { content: "\201C"; display: block; font-size: 3.2em; line-height: .2; color: var(--purple-200); margin-bottom: .25em; }
.pullquote cite { display: block; margin-top: 1rem; font-family: var(--font-sans); font-style: normal; font-size: .9rem; color: var(--ink-500); }

/* ---- Principle / belief cards ---- */
.principles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.principle { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; display: flex; flex-direction: column; gap: .55rem; box-shadow: var(--shadow-sm); }
.principle__icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--purple-100), var(--purple-300)); display: grid; place-items: center; color: var(--purple-800); }
.principle p { margin: 0; color: var(--ink-700); }
.principle strong { color: var(--ink-900); }

/* ---- Numbered steps ---- */
.steps { display: grid; gap: 1.5rem; counter-reset: step; }
.steps--row { grid-template-columns: 1fr; }
.step { position: relative; padding-left: 3.4rem; }
.step__title { margin: .15rem 0 .35rem; font-size: 1.15rem; }
.step p { margin: 0; color: var(--ink-700); }
.step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -.1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--purple-700); color: #fff; font-family: var(--font-serif); display: grid; place-items: center; font-size: 1.15rem; box-shadow: var(--shadow-sm); }
@media (min-width: 800px) {
  .steps--row { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.25rem; }
  .steps--row .step { padding-left: 0; padding-top: 3.2rem; }
  .steps--row .step::before { left: 0; top: 0; }
}

/* ---- Icon check list ---- */
.check-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; }
.check-list li { position: relative; padding-left: 2rem; color: var(--ink-700); }
.check-list li::before { content: ""; position: absolute; left: 0; top: .1em; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--purple-100); }
.check-list li::after { content: ""; position: absolute; left: .42rem; top: .42em; width: .5rem; height: .26rem; border-left: 2px solid var(--purple-700); border-bottom: 2px solid var(--purple-700); transform: rotate(-45deg); }

/* ---- Two-state contrast (e.g. stuck vs regulated) ---- */
.contrast { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .contrast { grid-template-columns: 1fr 1fr; } }
.contrast__card { border-radius: var(--radius); padding: 1.5rem; }
.contrast__card h3 { margin: 0 0 .75rem; font-size: 1.1rem; }
.contrast__card ul { margin: 0; padding-left: 1.1rem; }
.contrast__card li { margin: .3rem 0; }
.contrast__card--before { background: #fbf7f7; border: 1px solid #f0dede; }
.contrast__card--before h3 { color: #9b5757; }
.contrast__card--after { background: var(--purple-50); border: 1px solid var(--purple-200); }
.contrast__card--after h3 { color: var(--purple-800); }

/* ---- Prose editorial refinements ---- */
.prose > p:first-of-type { font-size: 1.08rem; color: var(--ink-700); }
.prose h2 { margin-top: 1.8em; }
.prose h2::after { content: ""; display: block; width: 2.5rem; height: 3px; border-radius: 3px; background: var(--purple-300); margin-top: .55rem; }
.prose h2:first-child { margin-top: 0; }

/* Soft section divider */
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); border: 0; margin: 0; }

/* ---- Nervous-system state cards (Learn essays) ---- */
.states { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .states { grid-template-columns: repeat(3, 1fr); } }
.state-card { border-radius: var(--radius); padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--accent, var(--purple-400)); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .5rem; }
.state-card__tag { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--accent, var(--purple-700)); }
.state-card__title { font-size: 1.2rem; margin: 0; }
.state-card__sub { color: var(--ink-500); font-size: .95rem; margin: 0 0 .35rem; }
.state-card ul { margin: .25rem 0 0; padding-left: 1.1rem; color: var(--ink-700); }
.state-card li { margin: .25rem 0; }
.state-card--ventral    { --accent: #2f9e6f; }
.state-card--sympathetic { --accent: #d98324; }
.state-card--dorsal     { --accent: #4f7cc4; }

/* ---- Conditions index (alphabetical, scannable, professional) ---- */
.condition-panel { background: linear-gradient(180deg, #fff, var(--purple-50)); border: 1px solid var(--purple-100); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: var(--shadow-sm); }
.condition-panel__note { margin: 0 0 1.25rem; color: var(--ink-500); font-size: .9rem; }
.condition-index { columns: 2; column-gap: 2.5rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 680px) { .condition-index { columns: 3; } }
.condition-index li { break-inside: avoid; display: flex; align-items: center; gap: .7rem; padding: .6rem .5rem; border-radius: var(--radius-sm); border-bottom: 1px solid var(--line); color: var(--ink-900); font-weight: 500; transition: background .15s ease; }
.condition-index li:hover { background: #fff; }
.condition-index li::before { content: ""; flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 50%; background: linear-gradient(135deg, var(--purple-300), var(--purple-600)); box-shadow: 0 0 0 3px var(--purple-100); }
.condition-index li.is-more { color: var(--purple-700); font-style: italic; border-bottom: 0; }
.condition-index li.is-more::before { background: none; box-shadow: none; }