/* ============================================================
   Meg Simmons, LCSW — megsimmons.com redesign
   World: modern therapy studio, played straight at high craft.
   Ground: warm paper. Carry: office teal. Warmth: logo terracotta.
   ============================================================ */

:root {
  --paper: #FBF9F5;
  --paper-deep: #F4F0E8;
  --ink: #24312F;
  --ink-soft: #5A6B67;
  --teal: #33686B;
  --teal-deep: #234E50;
  --teal-tint: #E7EFEC;
  --terra: #DE9163;
  --terra-tint: #F7E9DC;
  --terra-text: #96521F;
  --gold: #B98A38;
  --line: #E5DFD3;
  --radius: 20px;
  --shadow-soft: 0 18px 44px -20px rgba(35, 78, 80, 0.35);
  --shadow-lift: 0 10px 24px -12px rgba(35, 78, 80, 0.4);
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1120px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "Figtree", system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

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

::selection { background: var(--teal-tint); color: var(--teal-deep); }

html { scrollbar-color: var(--line) var(--paper); }
input, textarea { caret-color: var(--teal); }

h1, h2, h3, .display {
  font-family: "Prata", Georgia, serif;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.002em;
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: clamp(2.15rem, 4.8vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.24; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.35; }

p, li { max-width: 68ch; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

.lead { font-size: clamp(1.125rem, 1.8vw, 1.3rem); line-height: 1.65; color: var(--ink-soft); }

.kicker {
  display: inline-block;
  margin-top: -0.2em;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra-text);
  margin-bottom: 1.1rem;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Figtree", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.25s var(--ease-settle), box-shadow 0.25s var(--ease-settle), background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.btn-primary { background: var(--teal-deep); color: #fff; }
.btn-primary:hover { background: var(--teal); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-lift); }

.btn-secondary { background: transparent; color: var(--teal-deep); border-color: var(--teal); }
.btn-secondary:hover { background: var(--teal-tint); transform: translateY(-1px); }

.btn-large { font-size: 1.0625rem; padding: 1.05rem 2rem; }

.btn .arrow { transition: transform 0.25s var(--ease-settle); }
.btn:hover .arrow { transform: translateX(3px); }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--teal-deep);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 10px 0;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus { left: 0; color: #fff; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 249, 245, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background 0.5s var(--ease-settle), box-shadow 0.5s var(--ease-settle);
}

.site-header.scrolled {
  background: rgba(251, 249, 245, 0.94);
  box-shadow: 0 10px 30px -24px rgba(35, 78, 80, 0.55);
}

/* Height stays constant: the header is sticky and therefore in flow, so
   animating its height drags the whole document up under the reader. The
   condense reads through transform and background instead. */
.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 76px;
}

.brand { flex-shrink: 0; display: flex; align-items: center; }
.brand img { height: 34px; width: auto; }

.site-nav { display: flex; gap: 1.35rem; margin-left: auto; }

.site-nav a {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 0.35rem 0;
  white-space: nowrap;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--terra);
  border-radius: 2px;
  transition: right 0.3s var(--ease-settle);
}

.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { right: 0; }
.site-nav a[aria-current="page"] { color: var(--teal-deep); font-weight: 600; }

.header-cta { flex-shrink: 0; padding: 0.72rem 1.35rem; font-size: 0.95rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
}

.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 0 auto; border-radius: 2px; transition: transform 0.3s var(--ease-settle), opacity 0.2s ease; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1280px) {
  .brand img { height: 28px; }
  .site-nav { gap: 1.05rem; }
  .site-nav a { font-size: 0.9rem; }
  .header-cta { padding: 0.65rem 1.1rem; font-size: 0.9rem; }
}

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

.divider-terra { height: 5px; background: var(--terra); }

.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.section-tight { padding: clamp(3.25rem, 6vw, 5rem) 0; }
.band-teal { background: var(--teal-tint); }
.band-paper { background: var(--paper-deep); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.section-head p { margin-top: 1rem; }

/* ---------- Background shapes ---------- */

.section-shapes { position: relative; overflow: hidden; }

.section-shapes > .container { position: relative; z-index: 1; }

.shape { position: absolute; pointer-events: none; }

.shape-circle-teal {
  width: clamp(320px, 40vw, 560px);
  height: clamp(320px, 40vw, 560px);
  border-radius: 50%;
  background: var(--teal-tint);
  top: clamp(-220px, -16vw, -120px);
  right: clamp(-180px, -12vw, -100px);
}

.shape-blob-terra {
  width: clamp(240px, 28vw, 400px);
  height: clamp(220px, 26vw, 370px);
  border-radius: 47% 53% 60% 40% / 55% 44% 56% 45%;
  background: var(--terra-tint);
  bottom: clamp(-160px, -10vw, -90px);
  left: clamp(-140px, -9vw, -80px);
}

.shape-ring {
  width: clamp(140px, 16vw, 220px);
  height: clamp(140px, 16vw, 220px);
  border-radius: 50%;
  border: 1.5px solid var(--terra);
  opacity: 0.3;
  bottom: 14%;
  right: 6%;
}

.shape-circle-paper {
  width: clamp(320px, 40vw, 560px);
  height: clamp(320px, 40vw, 560px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  top: clamp(-220px, -16vw, -120px);
  right: clamp(-180px, -12vw, -100px);
}

.shape-ring--teal { border-color: var(--teal); opacity: 0.25; }

.section-shapes--compact .shape-circle-teal,
.section-shapes--compact .shape-circle-paper {
  width: clamp(220px, 26vw, 380px);
  height: clamp(220px, 26vw, 380px);
  top: clamp(-160px, -12vw, -90px);
  right: clamp(-130px, -9vw, -70px);
}

.section-shapes--compact .shape-blob-terra {
  width: clamp(170px, 20vw, 280px);
  height: clamp(160px, 18vw, 260px);
  bottom: clamp(-110px, -8vw, -70px);
  left: clamp(-100px, -7vw, -60px);
}

.section-shapes--compact .shape-ring {
  width: clamp(100px, 12vw, 160px);
  height: clamp(100px, 12vw, 160px);
  bottom: 12%;
  right: 7%;
}

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

.hero { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem); overflow: hidden; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.hero-grid .hero-media { max-width: 470px; width: 100%; justify-self: end; }

.hero-copy { padding-top: 0; }

.hero-copy h1 { margin-bottom: 1.5rem; }
.hero-copy .lead { margin-bottom: 2.25rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

.hero-note { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; gap: 0.65rem; align-items: baseline; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Plates (photo treatment) ---------- */

.plate { position: relative; margin: 0; }

.plate::before {
  content: "";
  position: absolute;
  inset: 9% -5.5% -5.5% 9%;
  background: var(--teal-tint);
  border-radius: 30px;
  z-index: 0;
  transition: transform 0.8s var(--ease-settle);
}

.plate--terra::before { background: var(--terra-tint); }

.plate img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.hero-media img { aspect-ratio: 4 / 4.8; object-fit: cover; object-position: 50% 28%; }

.hero-media--wide img { aspect-ratio: 1 / 1; object-position: 42% 62%; }

.plate figcaption {
  position: absolute;
  z-index: 2;
  left: 1.1rem;
  bottom: 1.1rem;
  background: rgba(251, 249, 245, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--teal-deep);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px -6px rgba(35, 78, 80, 0.35);
}

/* ---------- Editorial lists ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }

.dot-list { list-style: none; margin-top: 1.35rem; display: grid; gap: 0.85rem; }

.dot-list li { position: relative; padding-left: 1.7rem; }

.dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--terra);
}

.dot-list--teal li::before { background: var(--teal); }

.emphasis-line {
  font-family: "Prata", Georgia, serif;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  color: var(--teal-deep);
  line-height: 1.5;
  margin: 2.4rem 0 0;
  max-width: 34ch;
}

.emphasis-line::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--terra);
  margin-bottom: 1rem;
}

/* ---------- Feature split (image + copy) ---------- */

.feature {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2.75rem, 7vw, 5.5rem);
  align-items: center;
}

.feature--flip { grid-template-columns: 1.08fr 0.92fr; }
.feature--flip .feature-media { order: 2; }

.feature-copy h2 { margin-bottom: 1.25rem; }
.feature-copy p + p { margin-top: 1.1rem; }
.feature-copy .btn { margin-top: 2rem; }

/* ---------- Pull quote ---------- */

.pullquote { text-align: center; max-width: 44rem; margin: 0 auto; }

.pullquote blockquote {
  font-family: "Prata", Georgia, serif;
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--teal-deep);
  letter-spacing: -0.01em;
}

.pullquote blockquote::before {
  content: "\201C";
  display: block;
  font-size: 3.4rem;
  line-height: 0.6;
  color: var(--terra);
  margin-bottom: 1.1rem;
  font-style: normal;
}

.pullquote cite { display: block; margin-top: 1.5rem; font-family: "Figtree", sans-serif; font-style: normal; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Award ---------- */

.award { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }

.award-plaque { width: clamp(150px, 18vw, 200px); border-radius: 12px; box-shadow: var(--shadow-soft); }

.award-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1.5px solid var(--gold);
  color: #8A6524;
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.award-stamp::before { content: "★"; font-size: 0.9em; }

/* ---------- Accordions ---------- */

.accordion { border-top: 1px solid var(--line); }

.acc-item { border-bottom: 1px solid var(--line); }

.acc-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.45rem 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: "Prata", Georgia, serif;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 550;
  color: var(--ink);
  transition: color 0.2s ease;
}

.acc-trigger:hover { color: var(--teal-deep); }

.acc-trigger { font-weight: 400; }

.acc-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  position: relative;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.45s var(--ease-settle);
}

.acc-icon::before, .acc-icon::after {
  content: "";
  position: absolute;
  background: var(--teal-deep);
  border-radius: 2px;
  transition: background-color 0.25s ease;
}

.acc-icon::before { width: 12px; height: 2px; }
.acc-icon::after { width: 2px; height: 12px; }

.acc-trigger[aria-expanded="true"] .acc-icon { background: var(--teal-deep); border-color: var(--teal-deep); transform: rotate(90deg); }
.acc-trigger[aria-expanded="true"] .acc-icon::before { background: #fff; }
.acc-trigger[aria-expanded="true"] .acc-icon::after { opacity: 0; }

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease-settle);
}

.acc-panel > div { overflow: hidden; }

.acc-item.open .acc-panel { grid-template-rows: 1fr; }

.acc-content { padding: 0.2rem 0.25rem 1.8rem; color: var(--ink-soft); }
.acc-content p + p, .acc-content ul + p, .acc-content p + ul { margin-top: 0.9rem; }
.acc-content ul { margin-left: 1.3rem; display: grid; gap: 0.55rem; }
.acc-content strong { color: var(--ink); }

/* ---------- Technique cards ---------- */

.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); align-items: stretch; }

.tech-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tech-card > img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }

.tech-card .tech-body { padding: 1.9rem 1.9rem 2.2rem; }

.tech-card h3 {
  font-family: "Figtree", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra-text);
  margin-bottom: 0.85rem;
}

.tech-card p { color: var(--ink-soft); }
.tech-card p a { color: var(--teal); }

@media (max-width: 1000px) {
  .tech-grid { grid-template-columns: 1fr; }
  .tech-card { max-width: 34rem; }
}

/* ---------- LinkedIn link ---------- */

.linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--teal-deep);
  text-decoration: none;
}

.linkedin-link:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 4px; }

.linkedin-link svg { flex-shrink: 0; }

/* ---------- Gallery ---------- */

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }

.gallery .plate::before { inset: 7% -4% -4% 7%; }

.gallery .plate img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- CTA close ---------- */

.cta-close { background: var(--teal-deep); color: #fff; text-align: center; padding: clamp(4.5rem, 9vw, 7rem) 0; }

.cta-close h2 { color: #fff; margin-bottom: 1.1rem; }

.cta-close p { color: rgba(255, 255, 255, 0.82); max-width: 44rem; margin: 0 auto 2.25rem; font-size: 1.1rem; }

.cta-close .btn-primary { background: #fff; color: var(--teal-deep); }
.cta-close .btn-primary:hover { background: var(--paper); color: var(--teal-deep); }

.cta-close .cta-contact-line { margin-top: 1.75rem; font-size: 0.98rem; color: rgba(255, 255, 255, 0.75); }
.cta-close .cta-contact-line a { color: #fff; font-weight: 600; }

.cta-close :focus-visible { outline-color: #fff; }

/* ---------- Info cards (contact / faq facts) ---------- */

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; }

.info-tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.6rem;
}

.info-tile h3 { font-family: "Figtree", sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra-text); margin-bottom: 0.8rem; }

.info-tile p { color: var(--ink); font-size: 1.02rem; }
.info-tile p + p { margin-top: 0.4rem; }
.info-tile .big { font-family: "Prata", Georgia, serif; font-size: 1.45rem; font-weight: 550; }

.notice {
  background: var(--terra-tint);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  color: var(--ink);
  font-size: 0.98rem;
}

.notice strong { color: var(--terra-text); }

.thanks-block { max-width: 42rem; }

.thanks-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-deep);
  margin-bottom: 1.75rem;
}

/* ---------- Contact form ---------- */

.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow-soft);
}

.form-card .form-title { font-size: clamp(1.35rem, 2.2vw, 1.6rem); margin-bottom: 1.5rem; }

.form-row { margin-bottom: 1.15rem; }

.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-card label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--ink);
}

.form-card label .optional { font-weight: 400; color: var(--ink-soft); }

.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-card input:focus,
.form-card textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-tint);
}

.form-card textarea { resize: vertical; min-height: 120px; }

.form-submit { width: 100%; justify-content: center; margin-top: 0.35rem; }

.form-note { margin-top: 0.9rem; font-size: 0.9rem; color: var(--ink-soft); text-align: center; }

.form-disclaimer { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.8rem; line-height: 1.55; color: var(--ink-soft); }

.hp-field { position: absolute; left: -9999px; }

@media (max-width: 640px) {
  .form-row-2 { grid-template-columns: 1fr; gap: 1.15rem; }
}

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

.site-footer { border-top: 1px solid var(--line); background: var(--paper-deep); padding: clamp(3.5rem, 7vw, 5rem) 0 2.5rem; }

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); margin-bottom: 3rem; }

.footer-brand img { height: 30px; width: auto; margin-bottom: 1.1rem; }
.footer-brand p { font-size: 0.95rem; color: var(--ink-soft); max-width: 34ch; }
.footer-brand p + p { margin-top: 0.6rem; }

.footer-col h3 { font-family: "Figtree", sans-serif; font-size: 0.83rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra-text); margin-bottom: 1rem; }

.footer-col p, .footer-col a { font-size: 0.98rem; color: var(--ink); }
.footer-col p + p { margin-top: 0.5rem; }
.footer-col a { display: inline-block; }

.footer-area { margin-top: 0.75rem; font-size: 0.88rem; color: var(--ink-soft); }

.map-embed { border: 0; border-radius: var(--radius); display: block; }

.footer-crisis { border-top: 1px solid var(--line); padding-top: 1.75rem; font-size: 0.9rem; color: var(--ink-soft); max-width: 62ch; }

.footer-bottom .credit a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--ink-soft); text-underline-offset: 3px; }
.footer-bottom .credit a:hover { color: var(--teal-deep); text-decoration-color: var(--teal-deep); }

.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; font-size: 0.88rem; color: var(--ink-soft); }

/* ---------- Scenic breather band ---------- */

.scenic { line-height: 0; overflow: hidden; }

.scenic img { width: 100%; height: clamp(220px, 36vw, 400px); object-fit: cover; }

/* ---------- Reveal motion ---------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-settle), transform 0.7s var(--ease-settle); }
.reveal.in { opacity: 1; transform: none; }

[data-stagger] > * { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-settle), transform 0.7s var(--ease-settle); }
[data-stagger].in > * { opacity: 1; transform: none; }

.hero .plate::before { transform: scale(0.97); }
.hero .plate.in::before, .hero .plate.no-motion::before { transform: scale(1); }

/* ---------- Settle system ----------
   One thesis: content settles into place. These extend it with depth (the
   photo backdrop settling behind its plate), focus (photographs resolving
   from soft to sharp), and breath (the scenic bands drifting as they pass).
   Every pre-animation state is gated on .js-motion, which script.js adds
   only when motion is allowed — so with JS off or reduced motion on,
   nothing is ever hidden, blurred, or displaced. */

.js-motion .plate::before { transform: scale(0.955); }
.js-motion .plate.in::before { transform: scale(1); }

.js-motion .plate:not(.hero-media) img,
.js-motion [data-stagger] .tech-card img {
  filter: blur(7px);
  transform: scale(1.025);
  transition: filter 1.1s var(--ease-settle), transform 1.1s var(--ease-settle);
  transition-delay: inherit;
}

.js-motion .plate.in:not(.hero-media) img,
.js-motion [data-stagger].in .tech-card img { filter: blur(0); transform: none; }

.js-motion .dot-list li::before {
  transform: scale(0.25);
  opacity: 0;
  transition: transform 0.55s var(--ease-settle), opacity 0.35s linear;
  transition-delay: inherit;
}

.js-motion [data-stagger].in .dot-list li::before,
.js-motion .dot-list[data-stagger].in li::before { transform: scale(1); opacity: 1; }

.js-motion .emphasis-line::before { transform: scaleX(0); transform-origin: left center; transition: transform 0.8s var(--ease-settle) 0.2s; }
.js-motion .reveal.in .emphasis-line::before { transform: scaleX(1); }

/* ---------- Hero arrival ----------
   The first viewport is the one moment nothing has scrolled into yet, so it
   runs on load rather than on an observer. Block-level, never word-level:
   the line arrives whole, the way a sentence is spoken, not typed. */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.js-motion .hero-copy > * { animation: hero-rise 0.75s var(--ease-settle) both; }
.js-motion .hero-copy > *:nth-child(1) { animation-delay: 0.04s; }
.js-motion .hero-copy > *:nth-child(2) { animation-delay: 0.12s; }
.js-motion .hero-copy > *:nth-child(3) { animation-delay: 0.2s; }
.js-motion .hero-copy > *:nth-child(4) { animation-delay: 0.28s; }
.js-motion .hero-copy > *:nth-child(5) { animation-delay: 0.36s; }

/* The portrait is painted at full size immediately and only settles inward,
   so the largest paint is never delayed behind an animation. */
@keyframes hero-photo-settle {
  from { transform: scale(1.045); }
  to { transform: none; }
}

.js-motion .hero .hero-media img { animation: hero-photo-settle 1.7s var(--ease-settle) both; }

@keyframes hero-caption {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

.js-motion .hero .plate figcaption { animation: hero-caption 0.7s var(--ease-settle) 0.6s both; }

/* A long, shallow drift on the tint backdrop — below conscious notice, but it
   keeps the composition from reading as a screenshot. Uses `translate` so it
   never fights the scale transition on the same pseudo-element. */
@keyframes plate-breathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

.js-motion .hero .plate::before { animation: plate-breathe 11s ease-in-out 2s infinite; }

/* The scenic strips drift as they cross the viewport. Scroll-driven, so it
   runs off the main thread; browsers without it simply get a still band. */
@supports (animation-timeline: view()) {
  .js-motion .scenic img {
    animation: scenic-drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

@keyframes scenic-drift {
  from { transform: scale(1.14) translateY(-2.6%); }
  to { transform: scale(1.14) translateY(2.6%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, [data-stagger] > * { opacity: 1; transform: none; transition: none; }
  .hero .plate::before, .js-motion .plate::before { transform: none; transition: none; }
  .js-motion .plate img, .js-motion .tech-card img { filter: none; transform: none; transition: none; }
  .js-motion .dot-list li::before { transform: none; opacity: 1; transition: none; }
  .js-motion .emphasis-line::before { transform: none; transition: none; }
  .js-motion .scenic img { animation: none; }
  .js-motion .hero-copy > *,
  .js-motion .hero .hero-media img,
  .js-motion .hero .plate figcaption,
  .js-motion .hero .plate::before { animation: none; opacity: 1; transform: none; translate: none; }
  .site-header { transition: none; }
  .btn, .acc-icon, .acc-panel { transition: none; }
}

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

@media (max-width: 1080px) {
  .header-cta { display: none; }

  .nav-toggle { display: flex; margin-left: auto; }

  .brand img { height: 30px; }

  .site-nav {
    position: fixed;
    inset: 76px 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 0.75rem 1.5rem 1.5rem;
    margin: 0;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease-settle), transform 0.3s var(--ease-settle), visibility 0.3s;
    box-shadow: 0 24px 40px -24px rgba(35, 78, 80, 0.25);
  }

  .site-nav.open { transform: none; opacity: 1; visibility: visible; }

  .site-nav a { padding: 0.85rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .site-nav a:last-child { border-bottom: none; }
  .site-nav a::after { display: none; }
}

@media (max-width: 960px) {
  .hero-grid, .feature, .feature--flip { grid-template-columns: 1fr; }
  .feature--flip .feature-media { order: 0; }
  .feature-media { max-width: 480px; }
    .hero-media { max-width: 440px; margin: 0 auto; width: 100%; }

  .split { grid-template-columns: 1fr; gap: 2rem; }

  .gallery { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }

  .award { grid-template-columns: 1fr; }
  .award-plaque { width: 160px; }

  .gallery { grid-template-columns: 1fr; }
  .gallery .plate { max-width: 480px; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }

  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ---------- Veterans note (home) ---------- */

.vets {
  max-width: 52rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.5rem, 3.5vw, 2.5rem);
}

.vets h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  margin-top: 0.9rem;
  color: var(--teal-deep);
}

.vets p { margin-top: 1.1rem; }

.vets-link a {
  font-family: "Figtree", sans-serif;
  font-weight: 600;
  text-decoration: none;
}

.vets-link a:hover { text-decoration: underline; }

/* ---------- Accordion + tile semantics ----------
   The triggers are headings so the questions carry outline weight; these
   rules keep them looking exactly as they did as bare buttons. */

.acc-heading { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }

.info-tile .tile-label {
  font-family: "Figtree", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra-text);
  margin-bottom: 0.8rem;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "Why should I consider therapy?" — the question opens the row at display
   scale, then the answer runs as two magazine columns beneath it, so a long
   answer never becomes one narrow stack pinned to the left edge. */

.why h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  max-width: 22ch;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.why h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--terra);
  margin-bottom: 1.35rem;
}

.why-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.why-cols > div > p + p { margin-top: 1.15rem; }
.why-cols p { max-width: 52ch; }

/* A drop cap opens the answer — the display face doing one piece of real
   typographic work rather than another heading. */
.why-open::first-letter {
  float: left;
  font-family: "Prata", Georgia, serif;
  font-size: 3.4em;
  line-height: 0.82;
  color: var(--terra-text);
  padding: 0.06em 0.12em 0 0;
}

/* One of her own sentences promoted to carry the turn in the argument. */
.why-turn {
  font-family: "Prata", Georgia, serif;
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  line-height: 1.45;
  color: var(--teal-deep);
  margin-top: 1.4rem !important;
}

.why-turn + p { margin-top: 1.1rem; }

.why-lede {
  font-size: 1.1rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 900px) {
  .why-cols { grid-template-columns: 1fr; gap: 1.35rem; }
}

/* ---------- Question cards (Individual Therapy) ----------
   Three parallel questions read as one row rather than three sections. Same
   white-card vocabulary as the Technique and quick-fact tiles. */

.qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.4vw, 1.75rem); align-items: stretch; }

.qa-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.6vw, 2.15rem);
}

.qa-card h2 {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.3;
  margin-bottom: 1.1rem;
}

.qa-card h2::before {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--terra);
  margin-bottom: 1.1rem;
}

.qa-card p { color: var(--ink-soft); font-size: 0.98rem; max-width: none; }
.qa-card p + p { margin-top: 0.95rem; }

@media (max-width: 1000px) {
  .qa-grid { grid-template-columns: 1fr; }
  .qa-card { max-width: 36rem; }
}

.qa-card .qa-lede {
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}

.qa-card .qa-lede + p { margin-top: 1.05rem; }

/* ---------- "What are you like" feature row ----------
   Her answer to the question a prospective client actually cares about, given
   a full row: the promise set large in the display face, the detail beside it. */

.qa-feature {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.qa-feature-lead h2 { margin-bottom: 1.4rem; }

.qa-feature-lead h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--terra);
  margin-bottom: 1.25rem;
}

.qa-statement {
  font-family: "Prata", Georgia, serif;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  color: var(--teal-deep);
  max-width: 30ch;
}

.qa-feature-body { padding-top: 0.35rem; }
.qa-feature-body p + p { margin-top: 1.2rem; }

.qa-grid--pair { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1000px) {
  .qa-feature { grid-template-columns: 1fr; gap: 1.75rem; }
  .qa-statement { max-width: none; }
  .qa-grid--pair { grid-template-columns: 1fr; }
}