/* Peaceful Mental Health Services - design system
   Palette: deep calm teal, warm sand, soft sage. Type: Montserrat display, Nunito Sans body. */

:root {
  --ink: #2b2033;
  --ink-soft: #5c5066;
  --teal: #5e2b8a;
  --teal-dark: #3b1757;
  --teal-tint: #e9dbf6;
  --sage: #d9c2f0;
  --sand: #f1e6fa;
  --cream: #ffffff;
  --apricot: #b8279f;
  --apricot-dark: #8f1d7c;
  --white: #ffffff;
  --line: #ece3f3;
  --shadow: 0 10px 30px rgba(43, 32, 51, 0.10);
  --shadow-soft: 0 4px 14px rgba(43, 32, 51, 0.07);
  --radius: 18px;
  --radius-lg: 28px;
  --measure: 66ch;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:root { color-scheme: only light; }

html { scroll-behavior: smooth; }

body {
  font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { max-width: var(--measure); }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal-dark); }

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

.container { width: min(1120px, 92%); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--teal-dark); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */

.crisis-bar {
  background: var(--teal-dark);
  color: #ffffff;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.45rem 1rem;
}
.crisis-bar a { color: #fff; font-weight: 700; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 0.85rem; gap: 1rem;
}

.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.brand-mark {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--teal), var(--sage));
  border-radius: 50% 50% 50% 12px;
  color: #fff;
}
.brand-mark--logo { background: #fff; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.brand-mark--logo img { width: 100%; height: 100%; object-fit: cover; }
.brand-name {
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  font-size: 1.12rem; font-weight: 700; color: var(--ink); line-height: 1.15;
}
.brand-name small { display: block; font-family: "Nunito Sans", sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }

.site-nav { display: flex; align-items: center; gap: 1.4rem; }
.site-nav a {
  text-decoration: none; color: var(--ink-soft); font-weight: 700; font-size: 0.95rem;
  padding-block: 0.3rem; border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--teal-dark); border-bottom-color: var(--sage); }
.site-nav a.btn { color: #fff; border-bottom: none; padding-block: 0.8rem; }
.site-nav a.btn:hover { color: #fff; border-bottom: none; }

.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.55rem; cursor: pointer; color: var(--teal-dark); }
.nav-toggle svg { display: block; }
.nav-toggle .nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* nav dropdowns (Services, New Patients) */
.nav-item { position: relative; }
.nav-caret { display: inline-block; font-size: 0.72em; color: var(--teal); margin-left: 0.2rem; transform: translateY(-1px); transition: transform 0.15s ease; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: translateY(-1px) rotate(180deg); }
.nav-drop {
  position: absolute; top: 100%; left: -0.8rem; z-index: 130;
  min-width: 280px; padding: 0.75rem; margin-top: 0.5rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); display: none;
}
.nav-drop::before { content: ""; position: absolute; top: -0.55rem; left: 0; right: 0; height: 0.55rem; }
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { display: grid; gap: 0.15rem; }
.site-nav .nav-drop a {
  display: block; padding: 0.6rem 0.95rem; border-radius: 10px; border-bottom: none;
  font-size: 0.92rem; white-space: nowrap;
}
.site-nav .nav-drop a:hover, .site-nav .nav-drop a[aria-current="page"] { background: var(--teal-tint); color: var(--teal-dark); border-bottom: none; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block; text-decoration: none; font-weight: 800; font-size: 0.98rem;
  padding: 0.8rem 1.6rem; border-radius: 999px; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--teal); color: #fff; box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: var(--teal-dark); color: #fff; box-shadow: var(--shadow); }
.btn-accent { background: var(--apricot); color: #fff; }
.btn-accent:hover { background: var(--apricot-dark); color: #fff; }
.btn-ghost { border: 2px solid var(--teal); color: var(--teal-dark); }
.btn-ghost:hover { background: var(--teal-tint); }

/* ---------- Hero ---------- */

.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 90% at 85% 10%, rgba(217, 194, 240, 0.35), transparent 65%),
    radial-gradient(50% 80% at 10% 90%, rgba(184, 39, 159, 0.16), transparent 60%),
    linear-gradient(170deg, #faf6fd 0%, var(--cream) 60%);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 0;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.hero-eyebrow {
  display: inline-block; background: var(--teal-tint); color: var(--teal-dark);
  font-weight: 800; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.35rem 0.9rem; border-radius: 999px; margin-bottom: 1.2rem;
}
.hero p.lede { font-size: 1.18rem; color: var(--ink-soft); margin: 1.2rem 0 1.8rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.4rem; }
.hero-note { font-size: 0.9rem; color: var(--ink-soft); }
.hero-art { position: relative; min-height: 320px; }
.hero-wave { display: block; margin-top: clamp(2rem, 5vw, 4rem); }

/* Photo hero: full-bleed background image behind white copy, like the reference site.
   The hero keeps the photo's aspect ratio so the image (and the laptop screen in it)
   scales with the viewport instead of being cropped; only a light veil sits on top
   so the photo stays clearly visible. */
.hero-photo {
  position: relative;
  background: var(--teal-dark);
  aspect-ratio: 1570 / 1002;
  min-height: 560px;
  display: flex; flex-direction: column;
}
/* rotating hero slides: stacked cover layers crossfading under the veil */
.hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  transition: opacity 1.2s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide--telehealth { background-image: url("../img/hero-telehealth-1.jpeg"); }
.hero-slide--office { background-image: url("../img/hero-office-1.jpeg"); }
.hero-slide--family { background-image: url("../img/hero-family-1.jpeg"); }
.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(40, 16, 58, 0.68) 0%, rgba(40, 16, 58, 0.44) 45%, rgba(40, 16, 58, 0.16) 72%, rgba(40, 16, 58, 0.10) 100%);
}
.hero-photo .container, .hero-photo .hero-wave { position: relative; z-index: 2; }
.hero-copy { max-width: 620px; text-shadow: 0 1px 14px rgba(40, 16, 58, 0.35); }
.hero-photo .hero-eyebrow { background: rgba(255, 255, 255, 0.16); color: #fff; backdrop-filter: blur(4px); }
.hero-photo h1 { color: #fff; }
.hero-copy .lede-strong { font-weight: 800; color: #fff; margin-bottom: 0.6rem; }
.hero-copy p.lede { margin-top: 1.1rem; margin-bottom: 0; color: #ffffff; }
.hero-copy .hero-ctas { margin-top: 1.8rem; }
.hero-photo .hero-note { color: #ffffff; }
.hero-photo .btn-ghost { border-color: #fff; color: #fff; text-shadow: none; }
.hero-photo .btn-ghost:hover { background: rgba(255, 255, 255, 0.18); }
.hero-photo .hero-wave { margin-top: auto; }
@media (max-width: 900px) {
  /* keep the subject (face + laptop) in frame on narrow screens, like the reference site:
     cover-crop anchored at 55% x, taller hero, and a top-heavy veil so the lower image shows */
  .hero-photo { aspect-ratio: auto; min-height: 580px; padding-bottom: 0.5rem; }
  .hero-slide--telehealth { background-position: 55% center; }
  .hero-photo::before {
    background: linear-gradient(180deg, rgba(40, 16, 58, 0.74) 0%, rgba(40, 16, 58, 0.5) 55%, rgba(40, 16, 58, 0.2) 100%);
  }
}

/* ---------- Sections ---------- */

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-sand { background: var(--sand); }
.section-teal { background: linear-gradient(160deg, var(--teal-dark), var(--teal)); color: #f5effa; }
.section-teal h2, .section-teal h3 { color: #fff; }
.section-teal p { color: #ffffff; }

.section-head { max-width: 720px; margin-bottom: 2.6rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center p { margin-inline: auto; }
.eyebrow {
  font-weight: 800; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--apricot-dark); margin-bottom: 0.6rem;
}
.section-teal .eyebrow { color: var(--sage); }
.section-head p { color: var(--ink-soft); margin-top: 0.8rem; }
/* keep intro copy readable on the dark teal band (this rule must follow .section-head p) */
.section-teal .section-head p { color: #ffffff; }

/* ---------- Cards ---------- */

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem 1.6rem; box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: 0.55rem; }
.card p { font-size: 0.97rem; color: var(--ink-soft); }
.card .card-link { display: inline-block; margin-top: 0.9rem; font-weight: 800; font-size: 0.92rem; text-decoration: none; color: var(--teal); }

/* whole-card links (services grid) */
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover h3 { color: var(--teal-dark); }
a.card:hover .card-link { text-decoration: underline; text-underline-offset: 3px; }

/* large photo service cards, same recipe as CuraWell's cw-topics cards:
   3-up with wide gaps, 4:5 photo panel, thin accent strip, compact centered body;
   hover = lift + slow photo zoom + gloss sweep across the image */
.svc-photos { --svc-gap: clamp(1.6rem, 4vw, 3.4rem); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--svc-gap); }
.svc-photo-card {
  flex: 0 1 calc((100% - 2 * var(--svc-gap)) / 3);
  display: block; background: var(--white); border-radius: 22px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(43, 32, 51, 0.16);
  text-decoration: none; color: inherit;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;
}
.svc-photo-card:hover { transform: translateY(-8px) scale(1.015); box-shadow: 0 28px 52px rgba(43, 32, 51, 0.24); }
.svc-photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--teal-tint); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s ease; }
.svc-photo-card:hover .svc-photo img { transform: scale(1.07); }
.svc-photo::after {
  content: ""; position: absolute; top: 0; left: -85%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg); transition: left 0.65s ease; pointer-events: none;
}
.svc-photo-card:hover .svc-photo::after { left: 135%; }
.svc-photo-body { display: block; padding: 22px 24px 26px; border-top: 3px solid var(--sage); text-align: center; }
.svc-photo-body h3 { font-size: 1.25rem; margin-bottom: 6px; line-height: 1.25; }
.svc-photo-body p { font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); margin: 0 auto; }
@media (max-width: 820px) {
  .svc-photos { flex-direction: column; align-items: center; }
  .svc-photo-card { flex-basis: auto; width: min(340px, 100%); }
  /* shorter image panels on small screens so cards stay compact */
  .svc-photo { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .svc-photo-card, .svc-photo img, .svc-photo::after { transition: none; } .svc-photo-card:hover .svc-photo img { transform: none; } }

.icon-chip {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--teal-tint); color: var(--teal-dark);
}
.card:nth-child(3n+2) .icon-chip { background: #f7e1f2; color: var(--apricot-dark); }
.card:nth-child(3n) .icon-chip { background: #f5effa; color: #7b3fa8; }

/* condition pills grid */
.pill-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pill {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.1rem 1.2rem; display: flex; gap: 0.8rem; align-items: flex-start;
  box-shadow: var(--shadow-soft); text-decoration: none; color: var(--ink);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.pill:hover { transform: translateY(-3px); border-color: var(--sage); color: var(--ink); }
.pill .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sage); margin-top: 0.55rem; }
/* insurer brand icons on the insurance page pills */
.ins-pills .pill { align-items: center; }
.ins-pills .pill .dot { margin-top: 0; margin-inline: 10px; }
.pill .ins-logo { flex: none; width: 30px; height: 30px; border-radius: 7px; overflow: hidden; }
.pill .ins-logo img { width: 100%; height: 100%; object-fit: contain; }
.pill strong { display: block; font-size: 1rem; }
.pill span { font-size: 0.88rem; color: var(--ink-soft); }

/* ---------- Split / approach ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; align-items: center; }
.split-art {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  background: linear-gradient(150deg, var(--teal-tint), var(--sand));
  min-height: 340px; display: grid; place-items: center; padding: 2rem;
}
.checklist { list-style: none; margin-top: 1.4rem; display: grid; gap: 0.9rem; }
.checklist li { display: flex; gap: 0.8rem; align-items: flex-start; color: var(--ink-soft); }
.checklist li strong { color: var(--ink); }
.check {
  flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 0.15rem;
  background: var(--teal); color: #fff; display: grid; place-items: center; font-size: 0.8rem; font-weight: 900;
}

/* ---------- Steps ---------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; counter-reset: step; }
.step {
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius); padding: 1.8rem 1.6rem;
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; font-size: 2rem; font-weight: 700;
  color: var(--sage); display: block; margin-bottom: 0.6rem;
}

/* ---------- Testimonials ---------- */

.tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.tst-card {
  position: relative; margin: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.6rem 1.7rem; box-shadow: var(--shadow-soft);
}
.tst-quote {
  position: absolute; top: 0.4rem; right: 1.1rem;
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; font-size: 4.4rem; line-height: 1; font-weight: 800;
  color: var(--teal-tint); pointer-events: none;
}
.tst-stars { color: #f2b01e; font-size: 1rem; letter-spacing: 3px; margin-bottom: 0.8rem; }
.tst-text { border: none; margin: 0 0 1.3rem; font-size: 0.97rem; color: var(--ink-soft); }
.tst-person { display: flex; align-items: center; gap: 0.8rem; }
.tst-avatar { flex: none; }
.tst-avatar img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--teal-tint); }
.tst-name { font-weight: 800; color: var(--ink); }
.tst-role { font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- CTA band ---------- */

.cta-band {
  background: linear-gradient(140deg, var(--teal-dark), var(--teal) 70%, #7b3fa8);
  border-radius: var(--radius-lg); color: #fff;
  padding: clamp(2.2rem, 5vw, 3.5rem); text-align: center;
  box-shadow: var(--shadow);
}
.cta-band h2 { color: #fff; margin-bottom: 0.7rem; }
.cta-band p { color: #ffffff; margin: 0 auto 1.6rem; }

/* ---------- Detail pages ---------- */

.page-hero {
  background:
    radial-gradient(50% 90% at 90% 0%, rgba(217, 194, 240, 0.3), transparent 60%),
    linear-gradient(170deg, #faf6fd, var(--cream));
  padding: clamp(2.8rem, 6vw, 4.5rem) 0;
  border-bottom: 1px solid var(--line);
}
.page-hero p { color: var(--ink-soft); margin-top: 0.9rem; font-size: 1.12rem; }
.breadcrumbs { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 1rem; }
.breadcrumbs a { color: var(--teal); text-decoration: none; }

.prose h2 { margin: 2.4rem 0 0.8rem; }
.prose h3 { margin: 1.8rem 0 0.5rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1rem; color: var(--ink-soft); max-width: var(--measure); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: 0.35rem; }
.prose strong { color: var(--ink); }

.service-block {
  display: grid; grid-template-columns: 64px 1fr; gap: 1.4rem;
  padding: 1.8rem 0; border-bottom: 1px solid var(--line);
}
.service-block:last-child { border-bottom: none; }
.service-block h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.service-block p { color: var(--ink-soft); }

/* ---------- Forms ---------- */

.form-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2rem; box-shadow: var(--shadow-soft);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.form-grid .full { grid-column: 1 / -1; }
label { font-weight: 700; font-size: 0.9rem; display: block; margin-bottom: 0.3rem; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 0.7rem 0.9rem; background: var(--cream);
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(94, 43, 138, 0.25); border-color: var(--teal); }

/* ---------- FAQ ---------- */

details.faq {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.1rem 1.4rem; margin-bottom: 0.9rem;
}
details.faq summary { font-weight: 800; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
details.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--teal); flex: none; }
details.faq[open] summary::after { content: "\2013"; }
details.faq p { margin-top: 0.8rem; color: var(--ink-soft); }

/* ---------- Footer ---------- */

.site-footer { background: #2e1245; color: #dccbe9; margin-top: clamp(3rem, 7vw, 5rem); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.4rem;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.site-footer h3 { color: #fff; font-size: 1rem; font-family: "Nunito Sans", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: #eadcf5; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; display: grid; gap: 0.55rem; font-size: 0.95rem; }
.footer-brand p { font-size: 0.95rem; max-width: 34ch; margin-top: 0.9rem; }
.footer-brand .brand { text-decoration: none; }
.footer-contact { margin-top: 0.9rem; }
.footer-contact a { font-weight: 700; }
.footer-crisis {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px; padding: 1rem 1.2rem; font-size: 0.9rem;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.2rem; font-size: 0.85rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .card-grid, .card-grid.cols-4, .tst-grid { grid-template-columns: repeat(2, 1fr); }
  .pill-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  /* fluid phone type: sizes track the viewport width so copy always fits,
     and the hero image stays visible behind a lighter veil */
  body { font-size: clamp(0.9rem, 3.9vw, 1rem); }
  h1 { font-size: clamp(1.45rem, 6.6vw, 1.85rem); }
  h2 { font-size: clamp(1.25rem, 5.4vw, 1.5rem); }
  h3 { font-size: clamp(1.05rem, 4.6vw, 1.25rem); }
  .crisis-bar { font-size: 0.72rem; }
  .hero-eyebrow { font-size: clamp(0.56rem, 2.6vw, 0.68rem); padding: 0.28rem 0.7rem; margin-bottom: 0.9rem; }
  .hero-copy .lede-strong { font-size: clamp(0.95rem, 4.2vw, 1.05rem); }
  .hero-copy p.lede { font-size: clamp(0.85rem, 3.8vw, 0.95rem); margin-top: 0.8rem; }
  .hero-copy .hero-ctas { margin-top: 1.2rem; gap: 0.7rem; }
  .hero-copy .btn { font-size: 0.88rem; padding: 0.68rem 1.25rem; }
  .hero-note { font-size: 0.74rem; }
  .hero-photo { min-height: 540px; }
  .hero-photo::before {
    background: linear-gradient(180deg, rgba(40, 16, 58, 0.7) 0%, rgba(40, 16, 58, 0.42) 55%, rgba(40, 16, 58, 0.14) 100%);
  }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; padding: 1.2rem 1.6rem; gap: 1rem;
  }
  .site-nav.open { display: flex; }
  .nav-toggle { display: block; }
  /* dropdowns become indented inline lists inside the open mobile menu */
  .nav-drop {
    display: block; position: static; min-width: 0; margin-top: 0.2rem; padding: 0 0 0 1rem;
    background: transparent; border: none; box-shadow: none;
  }
  .nav-drop::before { display: none; }
  .site-nav .nav-drop a { white-space: normal; padding: 0.3rem 0.4rem; }
  .card-grid, .card-grid.cols-4, .card-grid.cols-2, .pill-grid, .form-grid, .tst-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .service-block { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .pill, .btn { transition: none; }
}


/* Services showcase: tab list + large photo panel */
.svc-show { display: grid; grid-template-columns: minmax(260px, 0.9fr) 1.6fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: stretch; max-width: 1080px; margin-inline: auto; }
.svc-tabs { display: flex; flex-direction: column; gap: 0.55rem; }
.svc-tab { display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left; font: inherit; cursor: pointer; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; color: var(--ink); box-shadow: var(--shadow-soft); transition: background 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s; }
.svc-tab:hover { transform: translateX(4px); }
.svc-tab:focus-visible { outline: 3px solid var(--apricot); outline-offset: 2px; }
.svc-tab-num { font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--sage); min-width: 1.8rem; }
.svc-tab-name { flex: 1; font-weight: 800; line-height: 1.3; }
.svc-tab-arrow { opacity: 0; transform: translateX(-6px); transition: opacity 0.25s, transform 0.25s; }
.svc-tab.is-active { background: var(--teal); color: #fff; border-color: var(--teal); box-shadow: var(--shadow); transform: translateX(6px); }
.svc-tab.is-active .svc-tab-arrow { opacity: 1; transform: none; }
.svc-panels { position: relative; min-height: 420px; }
.svc-panel { position: relative; height: 100%; min-height: inherit; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--teal-dark); animation: svcFade 0.45s ease; }
.svc-panel-img { position: absolute; inset: 0; }
.svc-panel-img img { width: 100%; height: 100%; object-fit: cover; display: block; animation: svcZoom 6s ease-out forwards; }
.svc-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(59, 23, 87,0) 30%, rgba(40, 16, 58,0.88) 100%); }
.svc-panel-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(1.4rem, 3vw, 2.2rem); color: #fff; }
.svc-panel-body h3 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: 0.5rem; }
.svc-panel-body p { color: rgba(255,255,255,0.92); max-width: 38rem; margin: 0 0 1rem; }
.svc-panel-link { display: inline-flex; gap: 0.4rem; align-items: center; background: var(--apricot); color: #fff; font-weight: 800; text-decoration: none; padding: 0.6rem 1.15rem; border-radius: 999px; transition: background 0.2s; }
.svc-panel-link:hover { background: var(--apricot-dark); color: #fff; }
@keyframes svcFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes svcZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (max-width: 820px) {
  .svc-show { grid-template-columns: 1fr; }
  .svc-tabs { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.4rem; }
  .svc-tab { flex: 0 0 auto; width: auto; scroll-snap-align: start; padding: 0.7rem 1rem; }
  .svc-tab:hover, .svc-tab.is-active { transform: none; }
  .svc-tab-arrow { display: none; }
  .svc-panels { min-height: 400px; }
}
@media (prefers-reduced-motion: reduce) { .svc-panel, .svc-panel-img img { animation: none; } .svc-tab, .svc-tab-arrow { transition: none; } }

/* Testimonials carousel */
.tst-carousel { max-width: 760px; margin-inline: auto; }
.tst-viewport { overflow: hidden; border-radius: var(--radius-lg); }
.tst-track { display: flex; transition: transform 0.6s cubic-bezier(.22,.8,.3,1); }
.tst-slide { flex: 0 0 100%; margin: 0; text-align: center; padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 5vw, 3.4rem); }
.tst-slide .tst-text { font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.6; color: var(--ink); }
.tst-slide .tst-person { justify-content: center; text-align: left; }
.tst-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.4rem; }
.tst-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--teal-dark); font-size: 1.15rem; cursor: pointer; box-shadow: var(--shadow-soft); transition: background 0.2s, color 0.2s; }
.tst-btn:hover { background: var(--teal); color: #fff; }
.tst-btn:focus-visible, .tst-dot:focus-visible { outline: 3px solid var(--apricot); outline-offset: 2px; }
.tst-dots { display: flex; gap: 0.5rem; }
.tst-dot { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: none; background: var(--line); cursor: pointer; transition: width 0.3s, background 0.3s; }
.tst-dot.is-active { width: 28px; background: var(--teal); }
@media (prefers-reduced-motion: reduce) { .tst-track { transition: none; } }

/* ================= Round 3 (2026-10-02) ================= */

/* Announcement bar: who we serve, above everything */
.announce-bar { position: relative; background: var(--teal-tint); color: var(--teal-dark); text-align: center; font-size: 0.9rem; font-weight: 700; padding: 0.6rem 2.6rem; line-height: 1.45; }
.announce-bar p { margin: 0 auto; max-width: none; }
.announce-sep { color: var(--sage); margin-inline: 0.45rem; }
.announce-close { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: none; background: none; color: var(--teal-dark); font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.announce-close:hover { background: rgba(94, 43, 138, 0.12); }
.announce-close:focus-visible { outline: 3px solid var(--apricot); outline-offset: 1px; }

/* Get Care mega menu (desktop): full container width panel under the header */
.site-header .container { position: relative; }
.nav-item.nav-mega { position: static; }
.nav-mega .nav-drop { left: 0; right: 0; top: 100%; margin-top: 0; min-width: 0; padding: 1.8rem 1.6rem 1.6rem; border-radius: 0 0 20px 20px; }
.nav-mega .nav-drop::before { top: -1.2rem; height: 1.2rem; }
.nav-item.nav-mega:hover .nav-drop, .nav-item.nav-mega:focus-within .nav-drop { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 0 1.6rem; }
.mega-col + .mega-col { border-left: 1px solid var(--line); padding-left: 1.6rem; }
.site-nav .mega-title { display: block; font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--teal); padding: 0 0.95rem 0.5rem; border-bottom: none; }
.site-nav .mega-title:hover { color: var(--teal-dark); background: none; }
.mega-links { display: grid; gap: 0.1rem; }
.mega-links--two { grid-template-columns: 1fr 1fr; column-gap: 0.8rem; }

/* Hamburger: two thin lines that turn into a thin X */
.nav-toggle { border: none; padding: 0.55rem 0.4rem; border-radius: 8px; }
.nav-toggle .nav-toggle__close { display: block; }
.nav-burger { position: relative; display: block; width: 30px; height: 18px; }
.nav-burger span { position: absolute; left: 0; right: 0; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform 0.3s ease, top 0.3s ease; }
.nav-burger span:nth-child(1) { top: 4px; }
.nav-burger span:nth-child(2) { top: 13px; }
.nav-toggle[aria-expanded="true"] .nav-burger span:nth-child(1) { top: 8.5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-burger span:nth-child(2) { top: 8.5px; transform: rotate(-45deg); }

@media (max-width: 640px) {
  .announce-bar { font-size: 0.78rem; padding: 0.55rem 2.4rem; }
  .announce-sep { display: block; height: 0; overflow: hidden; }
  /* full-screen menu like the reference site: large centered links on a calm ground */
  .site-header { backdrop-filter: none; background: rgba(255, 255, 255, 0.98); }
  .site-header .brand, .site-header .nav-toggle { position: relative; z-index: 2; }
  .site-nav {
    display: flex; position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.1rem;
    padding: 14.5rem 1.6rem 3rem; overflow-y: auto;
    background: var(--cream); border: none; text-align: center;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .site-nav.open { opacity: 1; visibility: visible; }
  .site-nav > a, .site-nav .nav-item > a { font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; font-size: 1.85rem; font-weight: 500; color: var(--teal-dark); border-bottom: none; padding: 0; }
  .site-nav > a[aria-current="page"], .site-nav .nav-item > a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
  .site-nav a.btn { font-family: "Nunito Sans", sans-serif; font-size: 1rem; margin-top: 0.8rem; padding: 0.85rem 1.6rem; }
  .nav-item { display: flex; flex-direction: column; align-items: center; }
  .nav-drop, .nav-mega .nav-drop { display: none; padding: 0.6rem 0 0; }
  .nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop, .nav-item.nav-mega:hover .nav-drop, .nav-item.nav-mega:focus-within .nav-drop { display: none; }
  .nav-item.is-open .nav-drop, .nav-item.nav-mega.is-open .nav-drop { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
  .nav-item.is-open .nav-caret { transform: translateY(-1px) rotate(180deg); }
  .site-nav .nav-caret { font-size: 0.42em; vertical-align: middle; margin-left: 0.35rem; }
  .mega-col + .mega-col { border-left: none; padding-left: 0; }
  .site-nav .mega-title { font-family: "Nunito Sans", sans-serif; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); padding: 0 0 0.2rem; }
  .mega-links, .mega-links--two { grid-template-columns: 1fr; gap: 0; }
  .site-nav .nav-drop a { font-size: 1rem; padding: 0.3rem 0.6rem; text-align: center; color: var(--ink-soft); }
  body.nav-open { overflow: hidden; }
}

/* Hero: "Here, you find your ___" with a photo carousel and captions */
.hero-peace { padding: clamp(2.2rem, 5vw, 4.2rem) 0 0; }
.hero-peace-grid { display: grid; grid-template-columns: 1fr 1.1fr; grid-template-areas: "top car" "bottom car"; column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 1.6rem; align-items: center; }
.hero-peace-top { grid-area: top; align-self: end; }
.hero-peace-bottom { grid-area: bottom; align-self: start; }
.hero-carousel { grid-area: car; }
.hero-peace-title { font-size: clamp(2.2rem, 3.9vw, 3.25rem); line-height: 1.08; color: var(--ink); margin: 0; }
.hero-peace-lead { display: block; white-space: nowrap; }
.hero-word { display: inline-block; color: var(--teal); transition: opacity 0.32s ease, transform 0.32s ease; }
.hero-word.is-out { opacity: 0; transform: translateY(0.25em); }
.hero-slogan { font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--teal-dark); margin: 1rem 0 0; }
.hero-peace .hero-ctas { margin: 0 0 1rem; }
.hero-peace .hero-note { margin: 0; }
.hero-car-frame { position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--teal-tint); }
.hero-car-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s ease; }
.hero-car-slide.is-active { opacity: 1; }
.hero-car-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-car-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3.4rem 1.5rem 1.3rem; text-align: center;
  color: #fff; font-weight: 800; font-size: clamp(0.98rem, 1.5vw, 1.12rem); line-height: 1.45;
  background: linear-gradient(180deg, rgba(40, 16, 58, 0) 0%, rgba(40, 16, 58, 0.82) 100%);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}
.hero-car-dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1rem; }
.hero-car-dot { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1.5px solid var(--sage); background: transparent; cursor: pointer; transition: background 0.3s, border-color 0.3s; }
.hero-car-dot.is-active { background: var(--teal); border-color: var(--teal); }
.hero-car-dot:focus-visible { outline: 3px solid var(--apricot); outline-offset: 2px; }
@media (max-width: 900px) {
  .hero-peace-grid { grid-template-columns: 1fr; grid-template-areas: "top" "car" "bottom"; text-align: center; max-width: 620px; margin-inline: auto; }
  .hero-peace .hero-ctas { justify-content: center; }
  .hero-car-frame { aspect-ratio: 16 / 11; }
}
@media (max-width: 640px) {
  .hero-peace-title { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .hero-slogan { font-size: 1.02rem; margin-top: 0.6rem; }
  .hero-car-frame { aspect-ratio: 1 / 1; }
  .hero-car-slide figcaption { padding: 2.6rem 1.1rem 1.05rem; font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) { .hero-car-slide, .hero-word, .nav-burger span, .site-nav { transition: none; } }

/* ================= Round 4 (2026-10-02): lavender dawn theme, word colours, desktop revert ================= */

/* The changing word: italic serif, its own colour per slide, colour glides between words */
.hero-word {
  font-style: italic; font-weight: 600; color: var(--wc, var(--teal));
  transition: opacity 0.34s ease, transform 0.34s ease, color 0.7s ease;
}
.hero-slogan { margin: 0 0 1.1rem; }
.hero-lede-desktop { display: none; }
.hero-peace .hero-car-dot.is-active { background: var(--hero-accent, var(--teal)); border-color: var(--hero-accent, var(--teal)); }
.hero-peace .btn-accent { transition: background 0.7s ease; }

/* Phones and small tablets keep the InnerClarity-style hero; slogan sits under the photo */
@media (max-width: 900px) {
  .hero-peace-bottom .hero-slogan { margin-top: 0.2rem; }
}

/* Desktop: back to the full-bleed rotating photo hero with copy over a soft veil */
@media (min-width: 901px) {
  .hero-peace {
    position: relative; display: flex; flex-direction: column;
    min-height: 600px; aspect-ratio: 1570 / 900; padding: 0;
    background: var(--teal-dark);
  }
  .hero-peace .hero-carousel { position: absolute; inset: 0; z-index: 0; }
  .hero-peace .hero-car-frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .hero-peace .hero-car-frame::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgba(40, 16, 58, 0.74) 0%, rgba(40, 16, 58, 0.5) 42%, rgba(40, 16, 58, 0.16) 72%, rgba(40, 16, 58, 0.06) 100%);
  }
  .hero-peace .hero-car-slide figcaption { display: none; }
  .hero-peace .hero-car-dots { position: absolute; left: 0; right: 0; bottom: 92px; z-index: 3; margin: 0; }
  .hero-peace .hero-car-dot { border-color: rgba(255, 255, 255, 0.85); }
  .hero-peace-grid { display: flex; flex-direction: column; justify-content: center; flex: 1; padding-block: 3.5rem 5.5rem; text-align: left; }
  .hero-peace-top, .hero-peace-bottom { position: relative; z-index: 2; max-width: 640px; align-self: flex-start; text-shadow: 0 1px 14px rgba(40, 16, 58, 0.35); }
  .hero-peace-bottom { margin-top: 1.1rem; }
  .hero-peace-title { color: #fff; }
  .hero-peace .hero-word { color: var(--wcl, #d6c6ff); }
  .hero-peace .hero-slogan { color: #fff; }
  .hero-lede-desktop { display: block; color: #fff; font-size: 1.12rem; line-height: 1.6; margin: 0 0 1.6rem; max-width: 560px; }
  .hero-peace .hero-note { color: #fff; }
  .hero-peace .btn-ghost { border-color: #fff; color: #fff; text-shadow: none; }
  .hero-peace .btn-ghost:hover { background: rgba(255, 255, 255, 0.18); }
  .hero-peace .hero-wave { position: relative; z-index: 2; margin-top: auto; }
}

/* Services carousel: the original photo cards in a swipeable, snapping row */
.svc-carousel { position: relative; }
.svc-track {
  --gap: clamp(1.2rem, 2.6vw, 2.2rem);
  display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0.8rem 0.4rem 1.8rem; scrollbar-width: none;
}
.svc-track::-webkit-scrollbar { display: none; }
.svc-track .svc-photo-card { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); width: auto; scroll-snap-align: start; }
.svc-car-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.2rem; }
@media (max-width: 900px) { .svc-track .svc-photo-card { flex-basis: calc((100% - var(--gap)) / 2); } }
@media (max-width: 640px) {
  .svc-track { padding-inline: 0.2rem; }
  .svc-track .svc-photo-card { flex-basis: 84%; }
  .svc-track .svc-photo { aspect-ratio: 4 / 3; }
}

/* Find Your Story: CuraWell-style cards side by side on wider screens, carousel on phones */
@media (min-width: 641px) {
  .tst-carousel { max-width: none; }
  .tst-viewport { overflow: visible; border-radius: 0; }
  .tst-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; transform: none !important; transition: none; }
  .tst-slide { text-align: left; padding: 1.9rem 1.7rem; }
  .tst-slide .tst-text { font-family: inherit; font-size: 0.97rem; line-height: 1.7; color: var(--ink-soft); }
  .tst-slide .tst-person { justify-content: flex-start; }
  .tst-controls { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-word { transition: none; } .svc-track { scroll-behavior: auto; } }

/* ================= Round 5 (2026-10-02): Alma-inspired greens, PKI-style rise motion, Alma care box ================= */

/* PKI-style motion: hero lines rise into place one after another on load */
@keyframes pmRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.rise { opacity: 0; animation: pmRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: var(--d, 0s); }

/* the changing word: old word lifts away, new word rises up from below, colour glides */
.hero-word { transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.7s ease; }
.hero-word.is-out { opacity: 0; transform: translateY(-0.45em); }
.hero-word.is-enter { transition: none; opacity: 0; transform: translateY(0.6em); }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; opacity: 1; }
  .hero-word, .hero-word.is-out, .hero-word.is-enter { transition: none; transform: none; opacity: 1; }
}

/* Alma-style consultation box */
.care-box { background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 34px rgba(43, 32, 51, 0.09); padding: 1.6rem clamp(1.2rem, 3vw, 2.2rem) 2rem; }
.care-tabs { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1.6rem; }
.care-tab { padding: 0 0.4rem 0.55rem; color: var(--teal-dark); font-weight: 700; border-bottom: 3px solid var(--teal); }
.care-q { text-align: center; font-size: 1.2rem; color: var(--ink); margin: 0 auto 1.2rem; max-width: none; }
.care-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; max-width: 460px; margin-inline: auto; }
.care-option {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 132px; padding: 1rem; font: inherit; font-size: 0.97rem; color: var(--ink); text-align: center;
  background: var(--white); border: 1.5px solid #d8cde2; border-radius: 6px; cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.care-option svg { color: var(--teal); }
.care-option:hover { border-color: var(--teal); background: var(--teal-tint); transform: translateY(-2px); }
.care-option:focus-visible { outline: 3px solid rgba(94, 43, 138, 0.35); outline-offset: 2px; }
.care-option.is-selected { border-color: var(--teal); background: var(--teal-tint); box-shadow: inset 0 0 0 1.5px var(--teal); }
.care-chosen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--teal-tint); color: var(--teal-dark); border-radius: 10px; padding: 0.7rem 1rem; margin-bottom: 1.3rem; }
.care-back { background: none; border: none; font: inherit; font-weight: 700; color: var(--teal); text-decoration: underline; cursor: pointer; }
.care-submit { border: none; cursor: pointer; width: 100%; justify-content: center; }
.care-box input, .care-box select, .care-box textarea { background: #ffffff; border-radius: 6px; border-color: #d8cde2; }
@media (max-width: 420px) { .care-option { min-height: 112px; font-size: 0.9rem; } }

/* ================= Round 6 (2026-10-02): Alma green #5e2b8a on white, InnerClarity-style hero type, Alma care finder ================= */

body { background: #fff; }

/* Hero headline: plain sans like InnerClarity ("Find Your Inner Joy"), regular weight, the changing word bold and upright.
   No serif, so the "f" in "find" is a normal f (Fraunces joined it into an fi ligature). */
.hero-peace-title {
  font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  font-weight: 400; letter-spacing: -0.01em; line-height: 1.2;
  font-variant-ligatures: none; color: var(--teal);
}
.hero-peace-title .hero-word { font-family: inherit; font-style: normal; font-weight: 800; letter-spacing: -0.005em; }
@media (max-width: 900px) {
  .hero-peace-title { font-size: clamp(1.8rem, 7.7vw, 2.3rem); }
}
@media (min-width: 901px) {
  .hero-peace-title { font-size: clamp(2.4rem, 3.9vw, 3.4rem); color: #fff; }
}

/* ---------- Alma-style care finder ---------- */
.care-box { position: relative; padding: 0; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 10px 34px rgba(59, 23, 87, 0.08); background: #fff; }
.care-head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0.4rem 1rem 0.4rem 0.6rem; }
.care-head .care-back { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: none; border: none; color: var(--ink); cursor: pointer; text-decoration: none; }
.care-head .care-back:hover { background: var(--teal-tint); }
.care-head .care-back[hidden] { display: none; }
.care-count { margin-left: auto; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.02em; }
.care-progress { height: 3px; background: #f1ecf5; }
.care-progress span { display: block; height: 100%; width: 6%; background: var(--teal); transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.care-form { padding: 1.8rem clamp(1.1rem, 3.4vw, 2.4rem) 1.6rem; }
.care-step { animation: careIn 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes careIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.care-q { font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif; font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 700; line-height: 1.3; color: var(--ink); text-align: left; margin: 0 0 0.4rem; max-width: none; outline: none; }
.care-q span { margin-right: 0.35rem; }
.care-q2 { font-family: "Nunito Sans", sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 1.6rem 0 0.6rem; }
.care-sub { color: var(--ink-soft); font-size: 0.97rem; margin: 0 0 1.1rem; max-width: none; }
.care-suggest-note { display: block; margin-top: 0.15rem; font-size: 0.88rem; color: var(--teal); }

.care-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; max-width: none; margin: 1rem 0 0; }
.care-option {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 98px; padding: 0.9rem 0.8rem; font: inherit; font-size: 0.95rem; line-height: 1.3; color: var(--ink); text-align: center;
  background: #fff; border: 1px solid #d8cde2; border-radius: 4px; cursor: pointer;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.care-option svg { color: var(--teal); }
.care-option:hover { border-color: var(--teal); }
.care-option:focus-visible { outline: 3px solid rgba(94, 43, 138, 0.3); outline-offset: 2px; }
.care-option.is-selected { border-color: var(--teal); background: var(--teal-tint); box-shadow: inset 0 0 0 1px var(--teal); }
.care-option.is-selected::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.care-option.is-suggested::before { content: "Suggested"; position: absolute; top: 6px; left: 8px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); }
.care-option.care-more-item { min-height: 64px; }
.care-option[hidden] { display: none; }
.care-more { display: flex; align-items: center; gap: 0.35rem; margin: 1rem auto 0; background: none; border: none; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.care-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.care-other { margin-top: 1rem; }

.care-loc-wrap { position: relative; }
.care-loc-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.care-loc-wrap input { padding-left: 2.6rem; height: 52px; font-size: 1rem; }
.care-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.care-chip { font: inherit; font-size: 0.9rem; font-weight: 700; padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid #d8cde2; background: #fff; color: var(--ink); cursor: pointer; }
.care-chip:hover, .care-chip.is-selected { border-color: var(--teal); background: var(--teal-tint); color: var(--teal-dark); }
.care-loc-msg { min-height: 1.4em; margin: 0.6rem 0 0; font-size: 0.92rem; color: var(--ink-soft); max-width: none; }
.care-loc-msg.is-ok { color: var(--teal); font-weight: 700; }
.care-loc-msg.is-warn { color: #9a4a22; }
.care-radio { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1rem; border: 1px solid #d8cde2; border-radius: 4px; font-weight: 400; cursor: default; margin: 0; }
.care-radio.is-selected { border-color: var(--teal); background: var(--teal-tint); box-shadow: inset 0 0 0 1px var(--teal); }
.care-radio input { width: 18px; height: 18px; margin: 0.2rem 0 0; accent-color: var(--teal); flex: none; }
.care-radio strong { display: block; color: var(--ink); }
.care-radio small { display: block; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.5; margin-top: 0.15rem; }
.care-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.care-list { display: grid; gap: 0.6rem; }
.care-row { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.95rem 1rem; font: inherit; font-size: 1rem; color: var(--ink); text-align: left; background: #fff; border: 1px solid #d8cde2; border-radius: 4px; cursor: pointer; }
.care-row::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #a996bb; flex: none; box-sizing: border-box; }
.care-row:hover { border-color: var(--teal); }
.care-row.is-selected { border-color: var(--teal); background: var(--teal-tint); box-shadow: inset 0 0 0 1px var(--teal); }
.care-row.is-selected::before { border: 5px solid var(--teal); }
.care-plan { margin-top: 1.1rem; }
.care-hint { font-size: 0.88rem; color: var(--ink-soft); margin: 0.5rem 0 0; max-width: none; }

.care-summary { list-style: none; margin: 1rem 0 1.4rem; padding: 0; border: 1px solid var(--line); border-radius: 8px; }
.care-summary li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.9rem; }
.care-summary li + li { border-top: 1px solid var(--line); }
.care-summary small { display: block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.care-summary strong { font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.care-edit { background: none; border: none; font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--teal); text-decoration: underline; cursor: pointer; flex: none; }
.care-error { color: #9a4a22; font-weight: 700; font-size: 0.92rem; min-height: 1.2em; margin: 0.8rem 0 0; }

.care-foot { margin-top: 1.6rem; }
.care-foot[hidden] { display: none; }
.care-next { width: 100%; justify-content: center; border: none; border-radius: 4px; cursor: pointer; padding-block: 0.95rem; font-size: 1rem; }
.care-next:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.care-done { text-align: center; padding: 1rem 0 0.5rem; }
.care-done svg { color: var(--teal); margin-bottom: 0.6rem; }
.care-done .care-q { text-align: center; }
.care-done-text { margin: 0.4rem auto 0; color: var(--ink-soft); }
.care-box input, .care-box select, .care-box textarea { background: #fff; border-radius: 4px; border-color: #d8cde2; }
.care-box input:focus, .care-box select:focus, .care-box textarea:focus { border-color: var(--teal); outline: 2px solid rgba(94, 43, 138, 0.18); }

@media (max-width: 420px) {
  .care-options { gap: 0.6rem; }
  .care-option { min-height: 92px; font-size: 0.9rem; padding: 0.8rem 0.5rem; }
  .care-summary li { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .care-step { animation: none; }
  .care-progress span { transition: none; }
}
/* White grounds like Alma: no tinted washes behind the phone hero or the inner-page headers */
@media (max-width: 900px) { .hero.hero-peace { background: #fff; } }
.page-hero { background: #fff; border-bottom: 1px solid var(--line); }

/* Phones: InnerClarity-style "Request Appointment" pill beside the menu button */
.header-cta { display: none; }
@media (max-width: 640px) {
  .header-cta {
    display: inline-flex; margin-left: auto; margin-right: 0.35rem;
    padding: 0.5rem 0.95rem; font-size: 0.82rem; font-weight: 800; line-height: 1.1;
    border-radius: 999px; box-shadow: none; white-space: nowrap;
  }
  .announce-bar { font-size: 0.85rem; padding-inline: 2.2rem; }
}
@media (max-width: 370px) { .header-cta { padding: 0.45rem 0.7rem; font-size: 0.76rem; } }

/* Round 7: real photo in the philosophy panel */
.split-art.split-photo { padding: 0; min-height: 0; aspect-ratio: 16 / 11; background: var(--teal-tint); }
.split-art.split-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; display: block; }

/* Round 8: phone header wordmark, "Mental Health Services" on one short line under "Peaceful" */
@media (max-width: 640px) {
  .brand-name { font-size: 1.08rem; }
  .brand-name small { font-size: 0.5rem; letter-spacing: 0.06em; white-space: nowrap; margin-top: 0.1rem; }
}
/* Round 8: logo, pill and menu button all fit on one row on small phones */
@media (max-width: 640px) {
  .site-header .container { width: 94%; gap: 0.4rem; }
  .brand { gap: 0.45rem; min-width: 0; }
  .brand-mark { width: 36px; height: 36px; }
  .header-cta { margin-right: 0.15rem; padding: 0.45rem 0.75rem; font-size: 0.76rem; }
  .nav-toggle { padding-inline: 0.3rem; }
}
@media (max-width: 370px) {
  .brand-name { font-size: 0.98rem; }
  .brand-name small { font-size: 0.46rem; }
  .header-cta { padding: 0.4rem 0.6rem; font-size: 0.7rem; }
}

/* Round 14: Find Your Story is a sliding carousel at every width (3 cards desktop, 2 tablet, 1 phone) */
.tst-carousel { max-width: none; }
.tst-carousel .tst-viewport { overflow: hidden; border-radius: 0; padding: 0.6rem 0.3rem 1.2rem; margin: -0.6rem -0.3rem 0; }
.tst-carousel .tst-track {
  display: flex; gap: 1.4rem; align-items: stretch;
  transform: translateX(var(--tx, 0px)) !important;
  transition: transform 0.7s cubic-bezier(.22,.8,.3,1);
}
.tst-carousel .tst-slide { flex: 0 0 100%; text-align: left; padding: 1.9rem 1.7rem; }
.tst-carousel .tst-slide .tst-text { font-family: inherit; font-size: 0.97rem; line-height: 1.7; color: var(--ink-soft); }
.tst-carousel .tst-slide .tst-person { justify-content: flex-start; }
.tst-carousel .tst-controls { display: flex; }
@media (min-width: 641px) { .tst-carousel .tst-slide { flex-basis: calc((100% - 1.4rem) / 2); } }
@media (min-width: 1000px) { .tst-carousel .tst-slide { flex-basis: calc((100% - 2.8rem) / 3); } }
.tst-initials { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--teal-tint); color: var(--teal); font-weight: 800; font-size: 1rem; letter-spacing: 0.02em; border: 2px solid var(--sage); }
.tst-dot[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tst-carousel .tst-track { transition: none; } }

/* ================= Round 16 (2026-10-05): Listening Lounge type + yellow nav ================= */
:root { --pm-yellow: #f7fd05; --pm-yellow-dark: #e3e800; }

/* Wordmark like "THE LISTENING LOUNGE / FOUNDATION": heavy stacked caps, then a small tracked line */
.brand-name {
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  font-size: 1.02rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1.02; max-width: 9.5em;
}
.brand-name small {
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  font-size: 0.56rem; font-weight: 600; letter-spacing: 0.34em; margin-top: 0.28rem;
}

/* Hero headline like "A NEW VOICE IS ABOUT TO / BE HEARD...": medium caps, the changing word bold */
.hero-peace-title {
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  font-weight: 500; text-transform: uppercase; letter-spacing: 0; line-height: 1.12;
}
.hero-peace-title .hero-word { font-weight: 800; letter-spacing: 0; }
@media (min-width: 901px) { .hero-peace-title { font-size: clamp(2.2rem, 3.6vw, 3.2rem); } }
@media (max-width: 900px) { .hero-peace-title { font-size: clamp(1.6rem, 7vw, 2.1rem); } }

/* White nav bar; links carry the yellow as an underline (yellow text on white is unreadable) */
.site-header { background: #fff; }
.site-nav > a, .site-nav .nav-item > a {
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; font-weight: 600; color: var(--ink);
  border-bottom: 3px solid transparent;
}
.site-nav > a:hover, .site-nav .nav-item > a:hover,
.site-nav > a[aria-current="page"], .site-nav .nav-item > a[aria-current="page"] {
  color: var(--ink); border-bottom-color: var(--pm-yellow);
}

/* Request an Appointment buttons in the header: the yellow, dark text */
.site-nav a.btn, .site-nav a.btn-primary, .header-cta.btn-primary {
  background: var(--pm-yellow); color: #1a1a1a; border: none;
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; font-weight: 700;
}
.site-nav a.btn:hover, .header-cta.btn-primary:hover { background: var(--pm-yellow-dark); color: #1a1a1a; }

@media (max-width: 640px) {
  .brand-name { font-size: 0.82rem; max-width: 9em; }
  .brand-name small { font-size: 0.46rem; letter-spacing: 0.28em; margin-top: 0.2rem; }
  .site-nav > a, .site-nav .nav-item > a { font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; }
  .site-nav > a[aria-current="page"], .site-nav .nav-item > a[aria-current="page"] {
    text-decoration: underline; text-decoration-color: var(--pm-yellow); text-decoration-thickness: 4px;
  }
}
@media (max-width: 370px) { .brand-name { font-size: 0.74rem; } }
@media (min-width: 641px) {
  .site-nav > a, .site-nav .nav-item > a { display: inline-flex; align-items: center; line-height: 1.2; padding-block: 0.3rem; }
}

/* ================= Round 17 (2026-10-05): Listening Lounge purple theme, new logo ================= */
:root { --pm-magenta: #b8279f; }
/* Get Started / accent CTAs share the nav yellow, dark text for contrast */
.btn-accent, .hero-peace .btn-accent { background: var(--pm-yellow); color: #2b2033; }
.btn-accent:hover, .hero-peace .btn-accent:hover { background: var(--pm-yellow-dark); color: #2b2033; }
/* New logo is a full purple square: show it as a disc with no white ring */
.brand-mark--logo { background: #926ac3; box-shadow: none; }
/* Active carousel dot: magenta on white (phone), yellow on the desktop photo */
.hero-peace .hero-car-dot.is-active { background: var(--pm-magenta); border-color: var(--pm-magenta); }
@media (min-width: 901px) {
  .hero-peace .hero-car-dot.is-active { background: var(--pm-yellow); border-color: var(--pm-yellow); }
}
/* Slogan in the same Montserrat family as the headline */
.hero-slogan { font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; font-style: normal; font-weight: 600; letter-spacing: 0.02em; }
/* Magenta / white / yellow circle motif from the reference, on the hero */
.hero-peace { position: relative; }
.hero-peace::after {
  content: ""; position: absolute; right: clamp(16px, 3vw, 48px); bottom: 84px; z-index: 3;
  width: 120px; height: 44px; pointer-events: none;
  background:
    radial-gradient(circle at 22px 22px, var(--pm-magenta) 21px, transparent 22px),
    radial-gradient(circle at 60px 22px, #fff 21px, transparent 22px),
    radial-gradient(circle at 98px 22px, var(--pm-yellow) 21px, transparent 22px);
}
@media (max-width: 900px) { .hero-peace::after { display: none; } }

/* ================= Round 18 (2026-10-05): header over the hero photo, flyer-style hero type, more lavender ================= */
@media (min-width: 901px) {
  /* Header sits on top of the photo (negative margin pulls the hero up under it) */
  body.home-overlay .site-header {
    background: transparent; border-bottom: 1px solid transparent; backdrop-filter: none;
    margin-bottom: calc(-1 * var(--hdr-h, 78px)); transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  body.home-overlay .site-header .container { min-height: 78px; }
  body.home-overlay .site-header:not(.is-solid) .brand-name { color: #fff; }
  body.home-overlay .site-header:not(.is-solid) .brand-name small { color: #f1e6fa; }
  body.home-overlay .site-header:not(.is-solid) .site-nav > a:not(.btn),
  body.home-overlay .site-header:not(.is-solid) .site-nav .nav-item > a { color: #fff; text-shadow: 0 1px 10px rgba(40, 16, 58, 0.4); }
  body.home-overlay .site-header:not(.is-solid) .nav-caret { color: #fff; }
  body.home-overlay .site-header:not(.is-solid) .nav-drop a { color: var(--ink-soft); text-shadow: none; }
  body.home-overlay .site-header.is-solid { background: rgba(255, 255, 255, 0.97); border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(40, 16, 58, 0.08); }
  body.home-overlay .hero-peace .hero-car-frame::after {
    background:
      linear-gradient(180deg, rgba(40, 16, 58, 0.55) 0%, rgba(40, 16, 58, 0) 22%),
      linear-gradient(100deg, rgba(40, 16, 58, 0.7) 0%, rgba(40, 16, 58, 0.42) 40%, rgba(40, 16, 58, 0.1) 70%, rgba(40, 16, 58, 0.04) 100%);
  }

  /* Flyer-style type: short stacked caps lines, bottom-left, smaller */
  .hero-peace-grid { justify-content: flex-end; padding-block: 7rem 7.5rem; }
  .hero-peace-top, .hero-peace-bottom { max-width: 460px; }
  .hero-peace-title { font-size: clamp(1.9rem, 2.7vw, 2.55rem); line-height: 1.08; font-weight: 500; }
  .hero-peace-title .hero-peace-lead { display: block; max-width: 6.4em; white-space: normal; }
  .hero-peace-title .hero-word { display: inline-block; font-weight: 800; }
  .hero-peace-bottom { margin-top: 0.9rem; }
  .hero-peace .hero-slogan { font-size: 1rem; margin: 0 0 0.6rem; }
  .hero-lede-desktop { font-size: 0.98rem; line-height: 1.55; margin: 0 0 1.2rem; max-width: 440px; }
  .hero-peace .hero-ctas .btn { padding: 0.7rem 1.4rem; font-size: 0.92rem; }
  .hero-peace .hero-note { font-size: 0.82rem; }
}

/* Lavender theme across the rest: lavender bands and page headers, white between */
.page-hero {
  background:
    radial-gradient(55% 100% at 92% 0%, rgba(184, 39, 159, 0.10), transparent 62%),
    linear-gradient(170deg, #ead9f7 0%, #f6effc 100%);
  border-bottom: none;
}
.section-sand { background: var(--sand); }
.site-footer { background: #2e1245; color: #dccbe9; }
  /* buttons on the photo keep crisp dark text */
@media (min-width: 901px) { .hero-peace .btn, body.home-overlay .site-nav a.btn { text-shadow: none; } }

/* ================= Round 19 (2026-10-05): flyer-style edges, same wordmark size on phones ================= */
/* Laptop and up: logo hugs the left, nav hugs the right, hero copy lines up under the logo */
@media (min-width: 901px) {
  .site-header .container { width: auto; max-width: none; margin-inline: clamp(20px, 3.2vw, 56px); }
  .hero-peace .hero-peace-grid { width: auto; max-width: none; margin-inline: clamp(20px, 3.2vw, 56px); }
}
/* Phones: keep the wordmark the same size as desktop instead of shrinking it */
@media (max-width: 640px) {
  .site-header .container { width: auto; margin-inline: 14px; }
  .brand { gap: 0.5rem; }
  .brand-mark { width: 42px; height: 42px; }
  .brand-name { font-size: 1.02rem; max-width: 9.5em; }
  .brand-name small { font-size: 0.56rem; letter-spacing: 0.34em; margin-top: 0.28rem; white-space: nowrap; }
  .header-cta { padding: 0.42rem 0.7rem; font-size: 0.72rem; }
}
@media (max-width: 370px) {
  .brand-name { font-size: 0.94rem; }
  .header-cta { padding: 0.38rem 0.55rem; font-size: 0.66rem; }
}
@media (max-width: 640px) {
  .site-header .container { margin-inline: 10px; gap: 0.35rem; }
  .brand { flex: none; }
  .brand-name { white-space: nowrap; max-width: none; }
  .header-cta { flex: 0 1 auto; padding: 0.4rem 0.6rem; font-size: 0.68rem; }
  .nav-toggle { padding-inline: 0.15rem; }
}
@media (max-width: 370px) {
  .brand-mark { width: 38px; height: 38px; }
  .brand-name { font-size: 0.9rem; }
  .brand-name small { font-size: 0.5rem; letter-spacing: 0.3em; }
  .header-cta { padding: 0.36rem 0.5rem; font-size: 0.62rem; }
}
.brand-name, .pm-rev-brand { white-space: nowrap; }
.brand-l2 { display: block; }
@media (max-width: 640px) {
  .header-cta { white-space: normal; text-align: center; line-height: 1.1; max-width: 7.6em; padding: 0.35rem 0.75rem; font-size: 0.7rem; border-radius: 14px; }
  .nav-toggle { flex: none; }
}
@media (max-width: 370px) { .header-cta { font-size: 0.64rem; padding: 0.32rem 0.6rem; } }
@media (max-width: 640px) { .header-cta { margin-right: 0.5rem; } }
@media (max-width: 640px) { .header-cta { max-width: none; width: min-content; justify-content: center; } }

/* ================= Round 20 (2026-10-05): phones get the laptop hero, scaled (photo full-bleed, stacked type over it) ================= */
@media (max-width: 900px) {
  .hero.hero-peace {
    position: relative; display: flex; flex-direction: column;
    min-height: clamp(540px, 128vw, 760px); padding: 0; background: var(--teal-dark);
  }
  .hero-peace .hero-carousel { position: absolute; inset: 0; z-index: 0; margin: 0; }
  .hero-peace .hero-car-frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .hero-peace .hero-car-frame::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(0deg, rgba(40, 16, 58, 0.82) 0%, rgba(40, 16, 58, 0.55) 42%, rgba(40, 16, 58, 0.14) 72%, rgba(40, 16, 58, 0.05) 100%);
  }
  .hero-peace .hero-car-slide figcaption { display: none; }
  .hero-peace .hero-car-dots { position: absolute; left: 0; right: 0; bottom: 58px; z-index: 3; margin: 0; }
  .hero-peace .hero-car-dot { border-color: rgba(255, 255, 255, 0.85); }
  .hero-peace .hero-car-dot.is-active { background: var(--pm-yellow); border-color: var(--pm-yellow); }

  .hero-peace .hero-peace-grid {
    display: flex; flex-direction: column; justify-content: flex-end; flex: 1;
    width: auto; max-width: none; margin-inline: 16px; padding-block: 5rem 6.2rem; text-align: left;
  }
  .hero-peace-top, .hero-peace-bottom { position: relative; z-index: 2; max-width: 100%; align-self: flex-start; text-shadow: 0 1px 12px rgba(40, 16, 58, 0.4); }
  .hero-peace-bottom { margin-top: 0.8rem; }
  .hero-peace-title { color: #fff; font-size: clamp(1.7rem, 8.4vw, 2.3rem); line-height: 1.08; font-weight: 500; }
  .hero-peace-title .hero-peace-lead { display: block; max-width: 6.4em; white-space: normal; }
  .hero-peace-title .hero-word { display: inline-block; font-weight: 800; color: var(--wcl, var(--pm-yellow)); }
  .hero-peace .hero-slogan { color: #fff; font-size: 0.95rem; margin: 0 0 0.5rem; }
  .hero-lede-desktop { display: block; color: #fff; font-size: 0.92rem; line-height: 1.55; margin: 0 0 1rem; max-width: 30em; }
  .hero-peace .hero-ctas { justify-content: flex-start; gap: 0.6rem; margin: 0 0 0.8rem; }
  .hero-peace .hero-ctas .btn { padding: 0.62rem 1.15rem; font-size: 0.86rem; text-shadow: none; }
  .hero-peace .btn-ghost { border-color: #fff; color: #fff; }
  .hero-peace .hero-note { color: #fff; font-size: 0.74rem; }
  .hero-peace .hero-wave { position: relative; z-index: 2; margin-top: auto; height: 40px; }

  /* the flyer's three circles, scaled down */
  .hero-peace::after {
    display: block; right: 16px; bottom: 50px; width: 66px; height: 24px;
    background:
      radial-gradient(circle at 12px 12px, var(--pm-magenta) 11px, transparent 12px),
      radial-gradient(circle at 33px 12px, #fff 11px, transparent 12px),
      radial-gradient(circle at 54px 12px, var(--pm-yellow) 11px, transparent 12px);
  }
}

/* ================= Round 21 (2026-10-05): phone header over the photo, popup announcement, half circles, pink word ================= */
:root { --pm-pink: #f419e6; }

/* Flyer circles are half circles lined up (flat side right), not full discs */
.hero-peace::after {
  width: 66px; height: 44px;
  background:
    radial-gradient(circle at 100% 50%, var(--pm-magenta) 21.5px, transparent 22px) 0 0 / 22px 44px no-repeat,
    radial-gradient(circle at 100% 50%, #fff 21.5px, transparent 22px) 22px 0 / 22px 44px no-repeat,
    radial-gradient(circle at 100% 50%, var(--pm-yellow) 21.5px, transparent 22px) 44px 0 / 22px 44px no-repeat;
}
@media (max-width: 900px) {
  .hero-peace::after {
    width: 39px; height: 26px;
    background:
      radial-gradient(circle at 100% 50%, var(--pm-magenta) 12.5px, transparent 13px) 0 0 / 13px 26px no-repeat,
      radial-gradient(circle at 100% 50%, #fff 12.5px, transparent 13px) 13px 0 / 13px 26px no-repeat,
      radial-gradient(circle at 100% 50%, var(--pm-yellow) 12.5px, transparent 13px) 26px 0 / 13px 26px no-repeat;
  }
}

/* Rotating word in pink at every width */
.hero-peace .hero-peace-title .hero-word { color: var(--pm-pink); }

.crisis-close { display: none; }
@media (max-width: 640px) {
  /* Crisis line: dismissible on phones */
  .crisis-bar { position: relative; padding-right: 2.4rem; padding-left: 0.8rem; }
  .crisis-close {
    display: grid; place-items: center; position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border: none; background: none; color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; border-radius: 50%;
  }
  .crisis-bar.is-dismissed { display: none; }

  /* Announcement: a popup card that slides in and out (driven by nav.js) */
  .announce-bar {
    position: fixed; z-index: 300; left: 10px; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 10px);
    padding: 0.75rem 2.6rem 0.75rem 1rem; border-radius: 14px; text-align: left;
    background: #fff; color: var(--teal-dark); font-size: 0.86rem;
    box-shadow: 0 12px 34px rgba(40, 16, 58, 0.28); border-left: 5px solid var(--pm-pink);
    opacity: 0; visibility: hidden; transform: translateY(-140%);
    transition: transform 0.45s ease, opacity 0.45s ease, visibility 0.45s ease;
  }
  .announce-bar.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }

  /* Homepage: header floats over the hero photo like the laptop, solid once scrolled or menu open */
  body.home-overlay .site-header {
    background: transparent; border-bottom: 1px solid transparent;
    margin-bottom: calc(-1 * var(--hdr-h, 72px)); transition: background 0.3s ease, border-color 0.3s ease;
  }
  body.home-overlay:not(.nav-open) .site-header:not(.is-solid) .brand-name { color: #fff; text-shadow: 0 1px 10px rgba(40, 16, 58, 0.45); }
  body.home-overlay:not(.nav-open) .site-header:not(.is-solid) .brand-name small { color: #f1e6fa; }
  body.home-overlay:not(.nav-open) .site-header:not(.is-solid) .nav-toggle { color: #fff; }
  body.home-overlay .site-header.is-solid { background: rgba(255, 255, 255, 0.98); border-bottom-color: var(--line); }
  body.home-overlay .hero-peace .hero-car-frame::after {
    background:
      linear-gradient(180deg, rgba(40, 16, 58, 0.6) 0%, rgba(40, 16, 58, 0) 24%),
      linear-gradient(0deg, rgba(40, 16, 58, 0.82) 0%, rgba(40, 16, 58, 0.55) 42%, rgba(40, 16, 58, 0.14) 72%, rgba(40, 16, 58, 0.05) 100%);
  }
  body.home-overlay .hero-peace .hero-peace-grid { padding-top: calc(var(--hdr-h, 72px) + 2rem); }

  /* Hero copy lines up with the logo, closer to the left edge */
  .hero-peace .hero-peace-grid { margin-inline: 12px; }
  .hero-peace .hero-peace-grid, .hero-peace-top, .hero-peace-bottom { text-align: left; }
}

/* ================= Round 22 (2026-10-05): rotating word letters cycle pink / white / yellow; lighter pink ================= */
:root { --pm-pink: #ff7ae9; --pm-magenta: #ff7ae9; }
.hero-peace .hero-peace-title .hero-word .hw-l0 { color: var(--pm-pink); }
.hero-peace .hero-peace-title .hero-word .hw-l1 { color: #fff; }
.hero-peace .hero-peace-title .hero-word .hw-l2 { color: var(--pm-yellow); }

/* Round 23: the three colours flow slowly through the letters (each letter is one step behind the last) */
@keyframes pmLetterFlow {
  0%, 100% { color: var(--pm-pink); }
  33.333% { color: #fff; }
  66.666% { color: var(--pm-yellow); }
}
.hero-peace .hero-peace-title .hero-word .hw-l { animation: pmLetterFlow 7.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-peace .hero-peace-title .hero-word .hw-l { animation: none; } }

/* ================= Round 24 (2026-10-05): service card clips fade in over the photo once they can play ================= */
.svc-photo video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 0.6s ease, transform 0.55s ease; pointer-events: none;
}
.svc-photo.has-video video { opacity: 1; }
.svc-photo-card:hover .svc-photo video { transform: scale(1.07); }
/* Hero slide clip (Strength slide): fades in over its poster once it can play */
.hero-car-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.6s ease; }
.hero-car-slide.has-video video { opacity: 1; }

/* ================= Round 26 (2026-10-05): tighter SERVICES line like FOUNDATION; phone hero copy sits lower ================= */
.brand-name small { letter-spacing: 0.14em; margin-top: 0.2rem; }
@media (max-width: 640px) {
  .brand-name small { letter-spacing: 0.14em; }
}
@media (max-width: 370px) { .brand-name small { letter-spacing: 0.12em; } }
@media (max-width: 900px) {
  .hero-peace .hero-peace-grid { padding-bottom: 3.8rem; }
}
@media (max-width: 640px) {
  body.home-overlay .hero-peace .hero-peace-grid { padding-top: calc(var(--hdr-h, 72px) + 4.75rem); padding-bottom: 4.8rem; }
}

/* ================= Round 28 (2026-10-05): one-line PEACEFUL MENTAL HEALTH, SERVICES spread to its full width ================= */
.brand-name { display: inline-block; font-size: 0.98rem; line-height: 1.05; max-width: none; white-space: nowrap; }
.brand-name .brand-sub {
  display: flex; justify-content: space-between; width: 100%;
  font-size: 0.6rem; letter-spacing: 0; margin-top: 0.28rem; line-height: 1;
}
@media (max-width: 640px) {
  .brand-name { font-size: 0.74rem; max-width: none; }
  .brand-name .brand-sub { font-size: 0.5rem; letter-spacing: 0; margin-top: 0.22rem; }
}
@media (max-width: 370px) {
  .brand-name { font-size: 0.66rem; }
  .brand-name .brand-sub { font-size: 0.46rem; letter-spacing: 0; }
}
@media (max-width: 640px) {
  .brand-name { font-size: 0.7rem; }
  .brand-name .brand-sub { font-size: 0.5rem; font-weight: 700; }
  .brand { margin-right: 0.4rem; }
}
@media (max-width: 370px) { .brand-name { font-size: 0.64rem; } }

/* ================= Round 29 (2026-10-05): three-line lockup, all lines the width of PEACEFUL ================= */
.brand-name {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  white-space: nowrap; line-height: 1; font-size: 1.3rem; max-width: none;
}
.brand-name .bn-1 { display: block; font-size: 1em; font-weight: 800; letter-spacing: 0.01em; }
/* nav.js fits this to the exact width of PEACEFUL; 0.6em is the no-script fallback */
.brand-name .bn-2 { display: block; font-size: 0.6em; font-weight: 800; letter-spacing: 0; margin-top: 0.22em; }
.brand-name .brand-sub { align-self: stretch; font-size: 0.42em; font-weight: 700; margin-top: 0.42em; letter-spacing: 0; }
@media (max-width: 640px) {
  .brand-name { font-size: 1.08rem; }
  .brand-name .brand-sub { font-size: 0.42em; }
}
@media (max-width: 370px) { .brand-name { font-size: 0.98rem; } }

/* ================= Round 30 (2026-10-05): script "Peaceful", yellow CTA line ================= */
.brand-name .bn-1 {
  font-family: "Great Vibes", "Brush Script MT", cursive;
  font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: 1.75em; line-height: 0.9; padding-right: 0.06em;
}
.brand-name .bn-2 { margin-top: 0.1em; }
/* "New patients are welcome..." line on the purple CTA bands: in the yellow so it reads clearly */
body .cta-band p { color: var(--pm-yellow); font-weight: 600; }
.brand-name .bn-2 { margin-top: 0.32em; }

/* ================= Round 31 (2026-10-05): popup announcement + dismissible crisis line at every width; half circles on every page ================= */
.crisis-bar { position: relative; padding-right: 2.6rem; }
.crisis-close {
  display: grid; place-items: center; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: none; background: none; color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; border-radius: 50%;
}
.crisis-close:hover { background: rgba(255, 255, 255, 0.14); }
.crisis-bar.is-dismissed { display: none; }

.announce-bar {
  position: fixed; z-index: 300; left: 50%; right: auto; top: calc(env(safe-area-inset-top, 0px) + 14px);
  width: min(560px, calc(100% - 20px)); margin: 0;
  padding: 0.85rem 2.8rem 0.85rem 1.1rem; border-radius: 14px; text-align: left;
  background: #fff; color: var(--teal-dark); font-size: 0.95rem; font-weight: 700; line-height: 1.4;
  box-shadow: 0 14px 38px rgba(40, 16, 58, 0.28); border-left: 5px solid var(--pm-pink);
  opacity: 0; visibility: hidden; transform: translate(-50%, -140%);
  transition: transform 0.45s ease, opacity 0.45s ease, visibility 0.45s ease;
}
.announce-bar.is-shown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.announce-bar p { margin: 0; }
@media (max-width: 640px) { .announce-bar { font-size: 0.86rem; } }

/* The flyer's three half circles at the bottom-right of every inner page header */
.page-hero { position: relative; }
.page-hero::after {
  content: ""; position: absolute; right: clamp(16px, 3.2vw, 56px); bottom: 22px; pointer-events: none;
  width: 66px; height: 44px;
  background:
    radial-gradient(circle at 100% 50%, var(--pm-magenta) 21.5px, transparent 22px) 0 0 / 22px 44px no-repeat,
    radial-gradient(circle at 100% 50%, #fff 21.5px, transparent 22px) 22px 0 / 22px 44px no-repeat,
    radial-gradient(circle at 100% 50%, var(--pm-yellow) 21.5px, transparent 22px) 44px 0 / 22px 44px no-repeat;
}
@media (max-width: 640px) {
  .page-hero::after {
    bottom: 14px; width: 39px; height: 26px;
    background:
      radial-gradient(circle at 100% 50%, var(--pm-magenta) 12.5px, transparent 13px) 0 0 / 13px 26px no-repeat,
      radial-gradient(circle at 100% 50%, #fff 12.5px, transparent 13px) 13px 0 / 13px 26px no-repeat,
      radial-gradient(circle at 100% 50%, var(--pm-yellow) 12.5px, transparent 13px) 26px 0 / 13px 26px no-repeat;
  }
}

/* ================= Round 32 (2026-10-05): half circles on What we offer, Our philosophy, Why choose us ================= */
.has-halves { position: relative; }
.has-halves::after {
  content: ""; position: absolute; right: clamp(16px, 3.2vw, 56px); bottom: 26px; pointer-events: none;
  width: 66px; height: 44px; --pm-half-mid: #fff;
  background:
    radial-gradient(circle at 100% 50%, var(--pm-magenta) 21.5px, transparent 22px) 0 0 / 22px 44px no-repeat,
    radial-gradient(circle at 100% 50%, var(--pm-half-mid) 21.5px, transparent 22px) 22px 0 / 22px 44px no-repeat,
    radial-gradient(circle at 100% 50%, var(--pm-yellow) 21.5px, transparent 22px) 44px 0 / 22px 44px no-repeat;
}
/* on a white section the middle half is lavender so it stays visible */
.has-halves--on-white::after { --pm-half-mid: #d9c2f0; }
@media (max-width: 640px) {
  .has-halves::after {
    bottom: 16px; width: 39px; height: 26px;
    background:
      radial-gradient(circle at 100% 50%, var(--pm-magenta) 12.5px, transparent 13px) 0 0 / 13px 26px no-repeat,
      radial-gradient(circle at 100% 50%, var(--pm-half-mid) 12.5px, transparent 13px) 13px 0 / 13px 26px no-repeat,
      radial-gradient(circle at 100% 50%, var(--pm-yellow) 12.5px, transparent 13px) 26px 0 / 13px 26px no-repeat;
  }
}