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

:root {
  --plum: #6C4F60;
  --bronze: #B7926B;
  --linen: #F6F0E7;
  --deep: #2D2430;
  --orange: #F2A25C;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  color: var(--deep);
  background: var(--linen);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  text-wrap: balance;
}

p { text-wrap: pretty; }

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

a { text-decoration: none; color: inherit; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ======================== NAVIGATION ======================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(246,240,231,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(108,79,96,0.08);
  transition: box-shadow 0.3s ease;
}
.nav.scrolled { box-shadow: 0 2px 20px rgba(45,36,48,0.08); }
.nav-inner {
  max-width: 1140px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.nav-inner > a:first-child { display: flex; align-items: center; height: 100%; }
.nav-brand picture { height: 100%; display: block; }
.nav-logo { height: 100%; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a {
  font-family: 'Outfit', sans-serif; font-size: 0.88rem; font-weight: 500;
  color: var(--deep); letter-spacing: 0.02em;
  transition: color 0.25s;
}
.nav-links a:hover { color: var(--plum); }
.nav-dropdown { position: relative; }
.nav-dropdown > a { cursor: pointer; }
.nav-dropdown > a::after {
  content: ' \25BE'; font-size: 0.7em; opacity: 0.6;
}
.dropdown-menu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  background: white; border-radius: 10px;
  box-shadow: 0 8px 30px rgba(45,36,48,0.12);
  padding: 10px 0; min-width: 220px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  transform: translateX(-50%) translateY(-6px);
}
.nav-dropdown:hover .dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dropdown-menu a {
  display: block; padding: 9px 20px; font-size: 0.85rem;
  transition: background 0.2s, color 0.2s;
}
.dropdown-menu a:hover { background: var(--linen); color: var(--plum); }
.nav-cta {
  display: inline-block; padding: 7px 18px; border-radius: 50px;
  background: var(--orange); color: white; font-size: 0.8rem;
  font-weight: 600; letter-spacing: 0.03em;
  transition: background 0.3s, transform 0.2s;
}
.nav-cta:hover { background: #e8933f; transform: translateY(-1px); }
.hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  background: none; border: none; padding: 8px;
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
}
.hamburger span {
  width: 24px; height: 2px; background: var(--deep);
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
  display: none; position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
  background: var(--linen); padding: 32px 24px; overflow-y: auto; z-index: 999;
}
.mobile-menu.active { display: block; }
.mobile-menu a {
  display: block; padding: 14px 0; font-size: 1.05rem; font-weight: 500;
  color: var(--deep); border-bottom: 1px solid rgba(108,79,96,0.1);
}
.mobile-menu .mobile-sub { padding-left: 20px; }
.mobile-menu .mobile-sub a { font-size: 0.95rem; font-weight: 400; color: var(--plum); }

/* Collapsible submenu accordion */
.mobile-menu .sub-menu { display: none; width: 100%; list-style: none; margin: 0; padding: 0; }
.mobile-menu li.menu-item-has-children {
  display: flex; flex-wrap: wrap; align-items: center;
  border-bottom: 1px solid rgba(108,79,96,0.1);
}
.mobile-menu li.menu-item-has-children > a {
  border-bottom: none; flex: 1;
}
.mobile-menu li.menu-item-has-children.open > .sub-menu { display: block; }
.mobile-menu .sub-menu li a {
  padding-left: 20px; font-size: 0.95rem;
  color: var(--plum); font-weight: 400;
}
.mobile-sub-toggle {
  background: none; border: none; cursor: pointer;
  padding: 14px 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; min-width: 44px; min-height: 44px;
}
.mobile-sub-toggle span {
  display: block; width: 8px; height: 8px;
  border-right: 2px solid var(--deep); border-bottom: 2px solid var(--deep);
  transform: rotate(45deg); transition: transform 0.2s ease;
  margin-top: -3px;
}
.menu-item-has-children.open > .mobile-sub-toggle span {
  transform: rotate(-135deg); margin-top: 3px;
}

.mobile-menu .mobile-cta {
  display: inline-block; margin-top: 20px; padding: 12px 28px;
  background: var(--orange); color: white; border-radius: 50px;
  font-weight: 600; text-align: center;
}

/* ======================== HERO ======================== */
.hero {
  position: relative; height: 85vh; min-height: 600px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hero-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  transform: scale(1.08);
  will-change: transform;
}
@media (max-width: 1024px) {
  .hero-bg { background-attachment: scroll; }
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(45,36,48,0.15) 0%,
    rgba(45,36,48,0.25) 50%,
    rgba(45,36,48,0.4) 100%
  );
}
.hero-panel {
  position: relative; z-index: 2;
  background: rgba(246,240,231,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 56px 52px;
  max-width: 680px; width: 90%;
  text-align: center;
  opacity: 0; transform: translateY(30px) scale(0.97);
  animation: panelReveal 1s ease-out 0.3s forwards;
  box-shadow: 0 20px 60px rgba(45,36,48,0.15);
}
@keyframes panelReveal {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-panel h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  color: var(--plum);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.hero-panel .subhead {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: var(--plum);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 10px;
}
.hero-panel .location {
  font-size: 0.88rem;
  color: var(--bronze);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.btn-primary {
  display: inline-block; padding: 15px 36px;
  background: var(--orange); color: white;
  font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 600;
  border-radius: 50px; border: none; cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.3s, transform 0.25s, box-shadow 0.3s;
  box-shadow: 0 4px 16px rgba(242,162,92,0.3);
}
.btn-primary:hover {
  background: #e8933f;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(242,162,92,0.4);
}

/* ======================== PAIN PANELS ======================== */
.pain-section {
  position: relative;
  padding: 0;
}
.pain-gradient-bg {
  background: linear-gradient(
    180deg,
    var(--linen) 0%,
    rgba(183,146,107,0.12) 20%,
    rgba(183,146,107,0.4) 50%,
    rgba(183,146,107,0.75) 80%,
    rgba(183,146,107,0.95) 100%
  );
}
.pain-block {
  padding: 65px 24px;
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.pain-block.align-left .pain-heading { grid-column: 1; text-align: right; padding-right: 40px; }
.pain-block.align-left .pain-copy { grid-column: 2; }
.pain-block.align-right .pain-heading { grid-column: 2; text-align: left; padding-left: 40px; order: 2; }
.pain-block.align-right .pain-copy { grid-column: 1; order: 1; }

.pain-heading h3 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.pain-copy p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1.1em;
}
.pain-copy p:last-child { margin-bottom: 0; }

.pain-block-1 .pain-heading h3 { color: var(--plum); }
.pain-block-1 .pain-copy p { color: var(--plum); }

.pain-block-2 .pain-heading h3 { color: var(--plum); }
.pain-block-2 .pain-copy p { color: rgba(108,79,96,0.9); }

.pain-block-3 .pain-heading h3 { color: rgba(255,255,255,0.95); }
.pain-block-3 .pain-copy p { color: rgba(255,255,255,0.85); }

.pain-divider {
  width: 60px; height: 2px; background: var(--orange); margin: 12px 0;
  opacity: 0.6;
}
.pain-block.align-left .pain-divider { margin-left: auto; margin-right: 40px; }
.pain-block.align-right .pain-divider { margin-left: 40px; }

/* Animations */
.slide-left {
  opacity: 0; transform: translateX(-60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.slide-right {
  opacity: 0; transform: translateX(60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.slide-up {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.scale-in {
  opacity: 0; transform: scale(0.92);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.anim-visible {
  opacity: 1 !important;
  transform: translateX(0) translateY(0) scale(1) !important;
}
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }

/* ======================== BRIDGE CTA ======================== */
.bridge-cta {
  position: relative; padding: 80px 0;
  background-image: image-set(url('../images/bridge-cta-bg.webp') type('image/webp'), url('../images/bridge-cta-bg.jpg') type('image/jpeg'));
  background-size: cover; background-position: center;
}
.bridge-cta::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(45,36,48,0.78) 0%, rgba(108,79,96,0.72) 100%);
}
.bridge-cta-inner {
  position: relative; z-index: 2; max-width: 700px; margin: 0 auto;
  padding: 0 24px; text-align: center;
}
.bridge-cta h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem); color: #F6F0E7;
  line-height: 1.2;
  margin-bottom: 24px;
}
.bridge-cta p {
  font-size: 17px; color: rgba(246,240,231,0.9); line-height: 1.8;
  margin-bottom: 36px;
}

/* ======================== BIO SECTION ======================== */
.bio-section {
  background: #F6F0E7; padding: 70px 0;
}
.bio-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center; max-width: 1040px; margin: 0 auto;
}
.bio-logo-wrap {
  display: flex; align-items: center; justify-content: center;
}
.bio-logo-wrap img {
  max-width: 340px; width: 100%; height: auto;
}
.bio-text h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem); color: #6C4F60;
  margin-bottom: 20px;
}
.bio-text .bio-quote {
  font-family: 'DM Serif Display', serif;
  font-style: italic; font-size: 18px; color: #B7926B;
  line-height: 1.65; margin-bottom: 20px;
}
.bio-text p {
  font-size: 16.5px; line-height: 1.8; margin-bottom: 24px; color: var(--plum);
}
.btn-secondary {
  display: inline-block; padding: 14px 34px;
  border: 2px solid var(--plum); color: var(--plum);
  font-family: 'Outfit', sans-serif; font-size: 0.92rem; font-weight: 600;
  border-radius: 50px; cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.3s, color 0.3s, transform 0.25s;
  background: transparent;
}
.btn-secondary:hover {
  background: var(--plum); color: white;
  transform: translateY(-2px);
}

/* ======================== SERVICES — "What We Offer" ========================
   Editorial card deck on plum stage. Each card is a window into the practice:
     - 16:10 photo with subtle desaturation at rest (saturates on hover)
     - DM Serif italic numeral 01/02/03 sitting at the image/body seam,
       half-on-image / half-on-body — same letterpress lineage as the FAQ
       and Counselor pages
     - Sharp 4px radius (not the default rounded-card look)
     - Italic serif blurb instead of small sans
     - Custom "LEARN MORE" CTA with a hairline that grows + arrow that shifts
       to give the click affordance the templated version was missing
     - Faint bronze→transparent composing-rule top-right ties the section
       to the editorial vocabulary used elsewhere on the site
============================================================ */
.services-section {
  background: var(--plum);
  padding: clamp(64px, 7.5vw, 110px) 0 clamp(76px, 9vw, 130px);
  position: relative;
  overflow: hidden;
}
.services-section::before {
  content: '';
  position: absolute;
  top: clamp(64px, 7.5vw, 110px);
  right: 0;
  width: 32vw; max-width: 460px;
  height: 1px;
  background: linear-gradient(to left, var(--orange), transparent);
  opacity: 0.55;
}
.services-header {
  text-align: center;
  margin: 0 auto clamp(48px, 6vw, 76px);
  max-width: 780px;
  padding: 0 24px;
}
.services-section h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.05;
  color: var(--linen);
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.012em;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.6vw, 36px);
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: 1fr 1fr; max-width: 760px; gap: 28px; }
}

.service-card {
  position: relative;
  display: block;
  background: #FAF5ED;
  border-radius: 4px;
  overflow: visible; /* image-pop on hover breaks the card boundary */
  text-decoration: none;
  color: inherit;
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(.2,.7,0,1),
              box-shadow 0.6s cubic-bezier(.2,.7,0,1);
}
.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-12px);
  box-shadow: 0 32px 64px rgba(0,0,0,0.36);
  outline: none;
}

/* Printer's crop mark — small orange L-shape behind the image's top-left
   corner. Partially visible at rest; fully revealed when the photo pops
   up on hover. Editorial detail that anchors the card to the rest of
   the site's letterpress vocabulary. */
.service-card-cropmark {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 28px;
  height: 28px;
  border-top: 2px solid var(--orange);
  border-left: 2px solid var(--orange);
  z-index: 1;
  opacity: 0.7;
  transition: top 0.6s cubic-bezier(.2,.7,0,1),
              left 0.6s cubic-bezier(.2,.7,0,1),
              opacity 0.5s ease;
}
.service-card:hover .service-card-cropmark,
.service-card:focus-visible .service-card-cropmark {
  top: -12px;
  left: -12px;
  opacity: 1;
}

/* Image wrapper has its own transform so the photo "pops" up + scales
   beyond the card frame on hover — instead of the conventional inside
   the-frame zoom. Card overflow:visible above lets the lifted image
   break out of the rounded card edges. */
.service-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  transform: translateY(0) scale(1);
  transition: transform 0.7s cubic-bezier(.2,.7,0,1),
              box-shadow 0.6s cubic-bezier(.2,.7,0,1),
              border-radius 0.5s ease;
  z-index: 2;
}
.service-card:hover .service-card-image,
.service-card:focus-visible .service-card-image {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 24px 40px rgba(0,0,0,0.28);
  border-radius: 4px;
}
.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.02);
  transition: filter 0.6s ease;
}
.service-card:hover .service-card-image img,
.service-card:focus-visible .service-card-image img {
  filter: saturate(1.08) contrast(1.04);
}
.service-card-image-tone {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(45,36,48,0) 60%, rgba(45,36,48,0.22) 100%);
  pointer-events: none;
}

.service-card-body {
  padding: clamp(26px, 3vw, 36px) clamp(24px, 3vw, 32px) clamp(34px, 4vw, 46px);
  border-top: 1px solid rgba(108,79,96,0.1);
  position: relative;
  z-index: 1;
}

/* Title is a wordmark composition: roman lead + italic orange remainder.
   "Individual Therapy" → "Individual *Therapy*". Creates a designed
   typographic phrase rather than a plain heading. */
.service-card-body h3 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.4rem, 1.95vw, 1.75rem);
  line-height: 1.1;
  color: var(--plum);
  margin: 0 0 14px;
  font-weight: 400;
  letter-spacing: -0.008em;
}
.service-card-title-lead { font-style: normal; }
.service-card-title-italic {
  font-style: italic;
  color: var(--orange);
  margin-left: 0.18em;
}

.service-card-body p {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  line-height: 1.5;
  color: var(--plum);
  opacity: 0.78;
  margin: 0 0 26px;
  max-width: 38ch;
}

.service-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--plum);
  transition: color 0.45s cubic-bezier(.2,.7,0,1);
}
.service-card-cta-rule {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--orange);
  transition: width 0.6s cubic-bezier(.2,.7,0,1),
              background 0.4s ease;
  flex-shrink: 0;
}
.service-card:hover .service-card-cta,
.service-card:focus-visible .service-card-cta {
  color: var(--orange);
}
.service-card:hover .service-card-cta-rule,
.service-card:focus-visible .service-card-cta-rule {
  width: 44px;
}
.service-card-cta-arrow {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(.2,.7,0,1);
}
.service-card:hover .service-card-cta-arrow,
.service-card:focus-visible .service-card-cta-arrow {
  transform: translateX(8px);
}

/* Bottom hairline that draws across the card on hover — mark of
   selection. Subtle at rest (invisible), grows left-to-right when the
   user engages. */
.service-card-underline {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.75s cubic-bezier(.2,.7,0,1);
  z-index: 3;
  border-radius: 0 0 4px 4px;
}
.service-card:hover .service-card-underline,
.service-card:focus-visible .service-card-underline {
  transform: scaleX(1);
}

/* ======================== FINAL CTA ======================== */
.final-cta {
  position: relative;
  padding: 70px 24px;
  min-height: 500px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  margin-top: 60px;
}
.final-cta-bg {
  position: absolute; inset: 0;
  background-image: image-set(url('../images/final-cta-bg.webp') type('image/webp'), url('../images/final-cta-bg.jpg') type('image/jpeg'));
  background-size: cover; background-position: center top;
}
.final-cta-bg::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(108,79,96,0.65);
}
.final-cta-content {
  position: relative; z-index: 2;
  max-width: 680px;
}
.final-cta h2 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  color: white;
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.final-cta p {
  color: rgba(255,255,255,0.88);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 36px;
}
.btn-light {
  display: inline-block; padding: 15px 36px;
  background: var(--orange); color: white;
  font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 600;
  border-radius: 50px; border: none; cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.3s, transform 0.25s, box-shadow 0.3s;
  box-shadow: 0 4px 16px rgba(242,162,92,0.3);
}
.btn-light:hover {
  background: #e8933f; transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(242,162,92,0.4);
}

/* ======================== CONTACT FORM ======================== */
.contact-form-section {
  background: var(--plum);
  padding: 36px 24px;
  display: flex; justify-content: center;
}
.contact-form {
  max-width: 500px; width: 100%;
}
.contact-form h3 {
  font-size: 1.1rem;
  color: rgba(246,240,231,0.95);
  text-align: center;
  margin-bottom: 14px;
}
.form-group {
  margin-bottom: 8px;
}
.form-group label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(246,240,231,0.7);
  margin-bottom: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 7px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(246,240,231,0.2);
  border-radius: 6px;
  color: rgba(246,240,231,0.95);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  transition: border-color 0.3s, background 0.3s;
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--orange);
  background: rgba(255,255,255,0.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(246,240,231,0.3);
}
.form-group textarea { resize: vertical; min-height: 56px; }
.captcha-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.captcha-label {
  font-size: 0.82rem; font-weight: 500;
  color: rgba(246,240,231,0.85);
  white-space: nowrap;
}
.captcha-input {
  width: 60px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(246,240,231,0.2);
  border-radius: 6px;
  color: rgba(246,240,231,0.95);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  text-align: center;
  outline: none;
  transition: border-color 0.3s;
}
.captcha-input:focus { border-color: var(--orange); }
.form-submit {
  width: 100%; padding: 9px;
  background: var(--orange); color: white;
  font-family: 'Outfit', sans-serif; font-size: 0.85rem; font-weight: 600;
  border: none; border-radius: 50px; cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.3s, transform 0.2s;
}
.form-submit:hover { background: #e8933f; transform: translateY(-1px); }

/* ======================== FOOTER ======================== */
.footer {
  background: var(--plum);
  padding: 36px 24px;
  text-align: center;
  border-top: 1px solid rgba(246,240,231,0.08);
}
.footer-brand {
  font-family: 'DM Serif Display', serif;
  font-size: 1.15rem;
  color: rgba(246,240,231,0.9);
  margin-bottom: 16px;
}
.footer-socials {
  display: flex; justify-content: center; gap: 20px;
  margin-bottom: 16px;
}
.footer-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(246,240,231,0.08);
  color: rgba(246,240,231,0.7);
  transition: background 0.3s, color 0.3s;
  font-size: 0.85rem;
}
.footer-socials a:hover { background: var(--orange); color: white; }
.footer-socials svg { width: 18px; height: 18px; fill: currentColor; }
.footer-links {
  display: flex; justify-content: center; gap: 20px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.footer-links a {
  font-size: 0.8rem; color: rgba(246,240,231,0.5);
  transition: color 0.25s;
}
.footer-links a:hover { color: var(--orange); }
.footer-copy {
  font-size: 0.78rem;
  color: rgba(246,240,231,0.35);
}

/* ======================== ANNOTATION BAR ======================== */
.annotation-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: var(--deep);
  color: rgba(246,240,231,0.6);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
}

/* ======================== RESPONSIVE ======================== */
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-links > li { white-space: normal; }
  .hamburger { display: flex; }
  .hero-panel { padding: 40px 28px; }
  .pain-block { grid-template-columns: 1fr; gap: 16px; padding: 50px 24px; }
  .pain-block.align-left .pain-heading,
  .pain-block.align-right .pain-heading { text-align: left; padding: 0; grid-column: auto; }
  .pain-block.align-left .pain-copy,
  .pain-block.align-right .pain-copy { grid-column: auto; }
  .pain-block.align-left .pain-divider,
  .pain-block.align-right .pain-divider { margin-left: 0; margin-right: 0; }
  .pain-block.align-right .pain-heading { order: -1; }
  .pain-block.align-right .pain-copy { order: 0; }
  .bio-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .bio-logo-wrap img { max-width: 260px; }
  .services-grid { grid-template-columns: 1fr; max-width: 460px; }
  .final-cta { margin-top: 30px; }
}

@media (max-width: 600px) {
  .hero { height: 90vh; min-height: 550px; }
  .hero-panel { padding: 32px 20px; }
  .hero-panel h1 { font-size: 2.2rem; }

}

/* ============================================================
   FORCE-VISIBLE SAFETY NET
   If JS or IntersectionObserver fails, ensure all opacity:0
   reveal states animate in after 1.2s so content is never lost.
   Also ensures the hero panel reveal completes regardless.
   ============================================================ */
@keyframes forceVisible {
  to { opacity: 1; transform: none; }
}
.slide-left,
.slide-right,
.slide-up,
.scale-in {
  animation: forceVisible 0.8s ease-out 1.2s forwards;
}
.slide-left.anim-visible,
.slide-right.anim-visible,
.slide-up.anim-visible,
.scale-in.anim-visible {
  opacity: 1;
  transform: none;
}
/* Hero panel already animates via panelReveal -- safety net in case it stalls. */
.hero-panel {
  animation: panelReveal 1s ease-out 0.3s forwards, forceVisible 0.4s ease-out 1.6s forwards;
}

/* ======================================================================
   PHASE 2 ADDITIONS — WordPress integration
   ====================================================================== */

/* ---------- Mobile bg-fixed override (Rule: never on mobile) ---------- */
@media (max-width: 1024px) {
  .hero, .bridge-cta, .final-cta { background-attachment: scroll !important; }
}

/* ---------- Brand logo sizing in nav ----------
   Logo fills the full nav-inner height (76px) edge-to-edge: align-self
   overrides the parent's align-items:center so this anchor stretches,
   then height:100% inside it fills. No padding/margin anywhere. */
.nav-brand {
  display: flex; align-items: stretch; align-self: stretch;
  flex-shrink: 0;
  padding: 0; margin: 0;
}
.nav-logo {
  height: 100%; width: auto; display: block;
  padding: 0; margin: 0;
}

/* ---------- Nav baseline alignment (Critical Lesson #12) ---------- */
.nav-links {
  display: flex; align-items: center; gap: 28px; list-style: none;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin: 0; padding: 0;
}
.nav-links > li {
  display: flex; align-items: center; position: relative;
  height: 40px;
  list-style: none;
}
.nav-links > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  white-space: nowrap;
  padding: 0;
}

/* ---------- Dropdown CSS targeting walker output (.dropdown / .dropdown-menu) ---------- */
.nav-links .dropdown { position: relative; }
.nav-links .dropdown > a::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 0.3s ease, border-color 0.3s;
  flex-shrink: 0;
}
.nav-links .dropdown:hover > a::after {
  transform: rotate(-135deg);
  margin-top: 2px;
  border-color: var(--plum);
}

.nav-links .dropdown-menu {
  position: absolute;
  top: 100%;
  left: -12px;
  min-width: 220px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(45,36,48,0.12);
  padding: 10px 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  /* Override the unmatched .nav-dropdown:hover rule from the legacy block
     above, which leaves pointer-events permanently `none` on the walker
     output. Without this the menu cannot receive mouse events even when
     visible, so hovering it does not keep the parent :hover active. */
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease 0.35s;
}
/* Hover bridge: nav-inner is 76px tall but each <li> is only 40px, leaving
   ~18px of empty nav space below the link before the dropdown begins. Without
   this invisible bridge the cursor leaves .dropdown:hover while crossing that
   gap and the menu vanishes before it can be clicked. The bridge is a child
   of .dropdown-menu, which is inside .dropdown, so hovering it keeps
   .dropdown:hover true. */
.nav-links .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -32px;
  left: -16px;
  right: -16px;
  height: 36px;
  background: transparent;
  pointer-events: auto;
}
.nav-links .dropdown:hover > .dropdown-menu,
.nav-links .dropdown:focus-within > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s ease 0s;
}
.nav-links .dropdown-menu li {
  list-style: none;
  height: auto;
  display: block;
}
.nav-links .dropdown-menu a {
  display: block;
  padding: 9px 20px;
  font-size: 0.85rem;
  height: auto;
  color: var(--deep);
  transition: background 0.2s, color 0.2s;
}
.nav-links .dropdown-menu a:hover { background: var(--linen); color: var(--plum); }
.nav-links .dropdown-menu a::after { display: none; }

/* ---------- Nav CTA cascade fix (Critical Lesson #14) ---------- */
.nav-links .nav-cta-item { height: 40px; }
.nav-links .nav-cta-item > a,
.nav-links .nav-cta,
.nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  padding: 9px 20px !important;
  border-radius: 50px !important;
  background: var(--orange) !important;
  color: white !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  height: auto !important;
  transition: background 0.3s, transform 0.2s !important;
}
.nav-links .nav-cta-item > a::after,
.nav-links .nav-cta::after,
.nav-cta::after { display: none !important; }
.nav-links .nav-cta-item > a:hover,
.nav-links .nav-cta:hover,
.nav-cta:hover {
  background: #e8933f !important;
  transform: translateY(-1px) !important;
  color: white !important;
}

/* ---------- Mobile menu (custom div) ---------- */
.mobile-menu .mobile-menu-list {
  list-style: none; padding: 0; margin: 0;
}
.mobile-menu .mobile-menu-list li {
  list-style: none;
  border-bottom: 1px solid rgba(108,79,96,0.1);
}
.mobile-menu .mobile-menu-list a {
  display: block; padding: 14px 0; font-size: 1.05rem; font-weight: 500;
  color: var(--deep);
}
.mobile-menu .mobile-menu-list .sub-menu {
  list-style: none;
  padding: 0 0 8px 20px;
  margin: 0;
}
.mobile-menu .mobile-menu-list .sub-menu li { border-bottom: none; list-style: none; }
.mobile-menu .mobile-menu-list .sub-menu a {
  font-size: 0.95rem; font-weight: 400; color: var(--plum);
  padding: 8px 0;
}
.mobile-phone {
  display: block; padding: 14px 0; margin-top: 12px;
  font-size: 0.95rem; color: var(--plum); font-weight: 500;
}
.mobile-cta {
  display: inline-block; margin-top: 12px; padding: 12px 28px;
  background: var(--orange); color: white !important; border-radius: 50px;
  font-weight: 600; text-align: center;
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
}

/* ---------- Footer (real footer, not mockup annotation bar) ---------- */
.footer { background: var(--plum); padding: 40px 24px 28px; text-align: center; border-top: 1px solid rgba(246,240,231,0.08); }
.footer-inner { max-width: 1140px; margin: 0 auto; }
.footer-brand { font-family: 'DM Serif Display', serif; font-size: 1.15rem; color: rgba(246,240,231,0.92); margin-bottom: 16px; }
.footer-logo-link { display: inline-block; margin-bottom: 18px; line-height: 0; }
.footer-logo { width: 300px; height: auto; max-width: 100%; display: block; }
.footer-pt-badge { display: inline-block; text-decoration: none; opacity: 0.9; margin: 14px 0; transition: opacity .3s; }
.footer-pt-badge:hover { opacity: 1; }
.footer-pt-badge img { height: 44px; width: auto; display: block; margin: 0 auto; }
.footer-legal { display: flex; justify-content: center; gap: 22px; margin: 14px 0 8px; flex-wrap: wrap; }
.footer-legal a { font-size: 0.8rem; color: rgba(246,240,231,0.55); transition: color .25s; }
.footer-legal a:hover { color: var(--orange); }
.footer-copy { font-size: 0.78rem; color: rgba(246,240,231,0.4); margin-top: 6px; }

/* ---------- Inner hero (about, contact, faq, service, blog) ---------- */
.inner-hero {
  position: relative;
  height: 50vh; min-height: 360px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  margin-top: 76px; /* offset fixed nav */
}
.inner-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
body.blog .inner-hero-bg { background-position: center 70%; }
body.page-id-19 .inner-hero-bg { background-position: center 70%; }
.inner-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(45,36,48,0.35) 0%, rgba(45,36,48,0.55) 100%);
}
.inner-hero-content {
  position: relative; z-index: 2; width: 100%; text-align: center;
  color: var(--linen);
}
.inner-hero-content h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: white;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* ---------- Inner content shell ---------- */
.inner-content { padding: 70px 0; background: var(--linen); }
.inner-content p { font-size: 1.08rem; line-height: 1.85; color: var(--deep); margin-bottom: 18px; }
.inner-content h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); color: var(--plum); margin: 32px 0 18px; }
.inner-content h3 { font-size: 1.4rem; color: var(--plum); margin: 24px 0 12px; }
.inner-content em { font-style: italic; }
.inner-content a { color: var(--bronze); text-decoration: underline; }
.inner-content a:hover { color: var(--plum); }

/* Service / specialty page body — proper editorial subheadline treatment.
   Same pattern used on bio pages: italic DM Serif at large scale, with a
   small orange composing-rule above each H2. Generous top margin gives
   each section a real start. The first paragraph of the body gets a
   larger italic lede treatment. */
/* ============================================================
   LANDING PAGE — overrides specific to tpa-edlizvazquez
   ============================================================ */

/* LP header — brand is rendered by template-parts/lp-brand.php (which
   mirrors the main-site .nav-brand markup, using class .lp-brand-logo
   on the img to bypass the parent LP base CSS's .lp-logo-img sizing).
   Sets the inner row height to 76px to match the main site's .nav-inner
   so the logo fills the same vertical space. Nav links and phone keep
   their default align-items:center from the LP base CSS. */
body.landing-page .lp-header { padding: 0; }
body.landing-page .lp-header-inner {
  height: 76px;
}
body.landing-page .lp-brand {
  display: inline-flex;
  align-items: stretch;
  align-self: stretch;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
body.landing-page .lp-brand-logo {
  height: 100%;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
  display: block;
  object-fit: contain;
}

/* Footer logo: static, full opacity, no hover effect. Logo is not
   wrapped in an anchor in the template, so the prior 0.65→1 opacity
   fade was misleading users into thinking it was clickable. */
body.landing-page .lp-footer-logo img,
body.landing-page .lp-footer-logo img:hover {
  opacity: 1;
  filter: none;
  transition: none;
  cursor: default;
}

/* CTA Band 1 — restore breathing room between the body sentence and
   the CTA button. The default lp-cta-band rules collapse them too
   tightly when the body is a single line. */
body.landing-page .lp-cta-band .lp-cta-body {
  margin-bottom: clamp(22px, 2.6vw, 32px);
}

/* "Therapy helps your child" section between the lp-cta-band and
   authority. Uses the LP font stack (Raleway + Overpass) but pulls
   accent colors from the brand palette so it reads as part of the
   same world. Custom orange tick marker on the bullet list keeps it
   from feeling like a generic <ul>. */
.lp-helps {
  padding: 40px 0;
  background: #FAF5ED;
}
.lp-helps .lp-container { max-width: 760px; }
.lp-helps-intro {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  line-height: 1.65;
  color: var(--deep);
  margin: 0 0 clamp(28px, 3vw, 36px);
  max-width: 64ch;
}
.lp-helps-cue {
  font-family: 'Overpass', 'Raleway', sans-serif;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  color: var(--plum);
  margin: 0 0 18px;
  letter-spacing: 0.005em;
}
.lp-helps-cue strong {
  font-weight: 700;
  color: var(--plum);
}
.lp-helps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(12px, 1.4vw, 16px);
}
.lp-helps-list li {
  position: relative;
  padding-left: 30px;
  font-family: 'Raleway', sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.6;
  color: var(--deep);
  max-width: 64ch;
}
.lp-helps-list li::before {
  /* Custom orange tick: a small angled stem rather than a dot — feels
     more deliberate than a generic bullet. */
  content: '';
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 14px; height: 2px;
  background: var(--orange);
  transform: translateY(-50%) rotate(0deg);
  box-shadow: -6px 0 0 var(--orange);
  border-radius: 2px;
}
.lp-helps-list li em { font-style: italic; }

@media (max-width: 768px) {
  .lp-helps-list li { padding-left: 26px; }
}

/* Canonical inner-page content width (--inner-content-max). Same width
   used on About, About-bio, FAQ, Contact, and all service/specialty
   pages so every interior page has matching visual rhythm. Paragraph
   max-width (64ch) still caps reading column for comfort. */
:root { --inner-content-max: 980px; }
.service-content { max-width: var(--inner-content-max); margin: 0 auto; }
.service-content > p:first-of-type {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.5;
  color: var(--plum);
  font-style: italic;
  font-weight: 400;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.service-content h2 {
  position: relative;
  margin: clamp(54px, 6.4vw, 84px) 0 clamp(22px, 2.6vw, 32px);
  padding-top: clamp(28px, 3.4vw, 42px);
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(1.7rem, 3.1vw, 2.4rem);
  line-height: 1.22;
  color: var(--plum);
  letter-spacing: -0.012em;
  font-weight: 400;
  max-width: 32ch;
}
.service-content h2::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: clamp(44px, 5.4vw, 72px);
  height: 2px;
  background: var(--orange);
}
.service-content h2:first-child {
  /* if the first node is a heading (no lede above), tighten its top margin */
  margin-top: 0;
}
.service-content p {
  font-size: 1.08rem;
  line-height: 1.82;
  color: var(--deep);
  margin-bottom: 18px;
  max-width: 64ch;
}
.service-content p:last-child { margin-bottom: 0; }
.service-content strong { font-weight: 600; color: var(--plum); }

/* svc-img-section pattern (Rule #7) */
.svc-img-section {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: stretch; margin: 36px 0;
}
.svc-img-section .svc-img-col img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
  display: block;
}
.svc-text-col h2 { margin-top: 0; }
@media (max-width: 768px) {
  .svc-img-section { grid-template-columns: 1fr; gap: 22px; }
  .svc-img-section .svc-img-col img { height: auto; }
}

/* ---------- Final CTA (override mockup section to be a true template-part) ---------- */
.final-cta {
  position: relative;
  padding: 90px 24px;
  min-height: 480px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  margin-top: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.final-cta-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(108,79,96,0.6) 0%, rgba(45,36,48,0.7) 100%);
  z-index: 1;
}
.final-cta-content { position: relative; z-index: 2; max-width: 720px; }
.final-cta-content h2 { color: white; }
.final-cta-body p { color: rgba(255,255,255,0.92); font-size: 1.05rem; line-height: 1.8; margin-bottom: 16px; }
.final-cta-body p:last-child { margin-bottom: 36px; }

/* ---------- Inline contact form below final CTA ---------- */
.contact-form-section {
  background: var(--plum);
  padding: 50px 24px;
  display: flex; justify-content: center;
}
.contact-form-wrap {
  max-width: 560px; width: 100%;
  background: rgba(45,36,48,0.18);
  padding: 32px;
  border-radius: 12px;
}
.contact-form-wrap h3 {
  font-size: 1.4rem;
  color: var(--linen);
  text-align: center;
  margin-bottom: 18px;
}

/* ============================================================
   ABOUT — UMBRELLA "MEET THE TEAM" PAGE
   ============================================================
   Short intro then four large editorial clinician cards. Each
   card is a portrait photo in 4:5 aspect, text overlay at the
   bottom that progressively reveals on hover (specialty line +
   "Read about [name] →" CTA fade up). Click target is the whole
   card; entire surface lifts on hover.
============================================================ */
.about-intro {
  padding: clamp(64px, 8vw, 110px) 0 clamp(20px, 3vw, 40px);
  background: var(--linen);
}
.about-intro .container { max-width: var(--inner-content-max); }
.about-intro p { font-size: 1.08rem; line-height: 1.85; color: var(--deep); margin-bottom: 18px; }
.about-intro p:last-child { margin-bottom: 0; }
.about-intro h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); color: var(--plum); margin: 32px 0 18px; }
.about-intro h2:first-child { margin-top: 0; }

.clinicians-feature {
  padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 11vw, 130px);
  background: var(--linen);
}
.clinicians-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 3.6vw, 56px);
  max-width: 1120px;
  margin: 0 auto;
}

.clinician-card {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: rgba(108,79,96,0.06);
  transform: translateY(0);
  transition: transform 0.55s cubic-bezier(.2,.7,0,1),
              box-shadow 0.55s cubic-bezier(.2,.7,0,1);
}
.clinician-card:hover,
.clinician-card:focus-visible {
  transform: translateY(-10px);
  box-shadow: 0 28px 56px rgba(45,36,48,0.22);
  outline: none;
}

.clinician-card-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.clinician-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(.2,.7,0,1),
              filter 0.6s ease;
  filter: saturate(0.96);
}
.clinician-card:hover .clinician-card-image img,
.clinician-card:focus-visible .clinician-card-image img {
  transform: scale(1.06);
  filter: saturate(1.08);
}

.clinician-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(45,36,48,0) 35%,
    rgba(45,36,48,0.4) 70%,
    rgba(45,36,48,0.86) 100%);
  transition: background 0.6s cubic-bezier(.2,.7,0,1);
  pointer-events: none;
}
.clinician-card:hover .clinician-card-overlay,
.clinician-card:focus-visible .clinician-card-overlay {
  background: linear-gradient(180deg,
    rgba(108,79,96,0.06) 20%,
    rgba(108,79,96,0.55) 55%,
    rgba(45,36,48,0.94) 100%);
}

.clinician-card-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(22px, 3.2vw, 38px) clamp(22px, 3vw, 36px) clamp(24px, 3.4vw, 38px);
  color: white;
  z-index: 2;
  transform: translateY(0);
  transition: transform 0.55s cubic-bezier(.2,.7,0,1);
}
.clinician-card:hover .clinician-card-content,
.clinician-card:focus-visible .clinician-card-content {
  transform: translateY(-4px);
}
.clinician-card-name {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.45rem, 2.3vw, 1.85rem);
  line-height: 1.12;
  color: white;
  margin: 0 0 6px;
  font-weight: 400;
  letter-spacing: -0.008em;
}
.clinician-card-role {
  font-family: 'Outfit', sans-serif;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.92);
  margin: 0 0 14px;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.clinician-card-credential {
  font-style: italic;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.01em;
}
.clinician-card-availability {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.94);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(242,162,92,0.42);
}
.clinician-card-availability-label {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-right: 6px;
}
/* Full Bio link — visual link inside the card. The card wrapper IS
   already an <a> to the bio, so this is a styled <span> (nested
   anchors are invalid HTML). Card hover shifts the arrow right to
   reinforce the link affordance. */
.clinician-card-fullbio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(242,162,92,0.42);
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  transition: color 0.4s cubic-bezier(.2,.7,0,1);
}
.clinician-card-fullbio-arrow {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(.2,.7,0,1);
}
.clinician-card:hover .clinician-card-fullbio-arrow,
.clinician-card:focus-visible .clinician-card-fullbio-arrow {
  transform: translateX(6px);
}
.clinician-card:hover .clinician-card-fullbio,
.clinician-card:focus-visible .clinician-card-fullbio {
  color: white;
}

@media (max-width: 768px) {
  .clinicians-grid { grid-template-columns: 1fr; gap: 44px; }
  .clinician-card-content { padding: 18px 20px 22px; }
  .clinician-card-name { font-size: 1.35rem; }
}

/* ============================================================
   ABOUT BIO — INDIVIDUAL CLINICIAN PAGE
   ============================================================
   Hero is split: left column = eyebrow / title / role / tagline /
   CTA. Right column = 4:5 portrait with offset bronze accent
   block behind it. Body uses post_content with strong subheadline
   treatment: italic serif H2 + small orange accent rule above.
============================================================ */
.bio-hero {
  padding: clamp(150px, 18vh, 200px) 0 clamp(60px, 8vw, 100px);
  background: var(--linen);
  position: relative;
  overflow: hidden;
}
.bio-hero::before {
  content: '';
  position: absolute;
  top: clamp(110px, 13vh, 145px); right: 0;
  width: 26vw; max-width: 380px;
  height: 1px;
  background: linear-gradient(to left, var(--bronze), transparent);
  opacity: 0.5;
}
.bio-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
}
.bio-hero-text { max-width: 560px; }
.bio-hero-eyebrow {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 22px;
  font-weight: 500;
}
.bio-hero-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.02;
  color: var(--plum);
  letter-spacing: -0.018em;
  margin-bottom: 18px;
  font-weight: 400;
}
.bio-hero-role {
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  color: var(--bronze);
  margin-bottom: 16px;
  font-weight: 600;
  text-transform: uppercase;
}
.bio-hero-tag {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  color: var(--plum);
  opacity: 0.85;
  margin-bottom: 32px;
  line-height: 1.5;
}
.bio-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--orange);
  padding-bottom: 4px;
  border-bottom: 1.5px solid currentColor;
  transition: color 0.3s, gap 0.3s, border-color 0.3s;
}
.bio-hero-cta:hover { color: var(--plum); gap: 14px; }
.bio-hero-cta-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(.2,.7,0,1);
}
.bio-hero-cta:hover .bio-hero-cta-arrow { transform: translateX(4px); }

.bio-hero-photo {
  position: relative;
  max-width: 460px;
  margin-left: auto;
  width: 100%;
}
.bio-hero-photo-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  z-index: 2;
}
.bio-hero-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bio-hero-photo-accent {
  position: absolute;
  top: 28px;
  right: -28px;
  width: 100%;
  height: 100%;
  background: var(--orange);
  opacity: 0.18;
  z-index: 1;
}

/* Body content */
.bio-body {
  padding: clamp(48px, 7vw, 96px) 0 clamp(60px, 8vw, 120px);
  background: var(--linen);
}
.bio-body .container { max-width: var(--inner-content-max); }
.bio-content {
  font-family: 'Outfit', sans-serif;
  position: relative;
}
/* Lede — first paragraph of post_content gets the editorial lede
   treatment automatically. Authors do NOT need to add a class. */
.bio-content > p:first-of-type {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.5;
  color: var(--plum);
  margin-bottom: clamp(28px, 4vw, 44px);
  font-weight: 400;
  font-style: italic;
}
.bio-content > p:first-of-type strong {
  font-weight: 400;
  font-style: italic;
  color: var(--plum);
}

.bio-content p {
  font-size: 1.08rem;
  line-height: 1.82;
  color: var(--deep);
  margin-bottom: 18px;
  max-width: 64ch;
}
.bio-content p:last-child { margin-bottom: 0; }
.bio-content em { font-style: italic; }
.bio-content strong { font-weight: 600; color: var(--plum); }

.bio-content a {
  color: var(--bronze);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s;
}
.bio-content a:hover { color: var(--plum); }

/* SUBHEADLINE — actual editorial treatment, not a bigger paragraph.
   Italic DM Serif at large scale with a small orange composing-rule
   above. Generous top margin gives breathing room. Each H2 reads as
   a section title, not just a heavier line of body text. */
.bio-content h2 {
  position: relative;
  margin: clamp(54px, 6.4vw, 84px) 0 clamp(22px, 2.6vw, 32px);
  padding-top: clamp(28px, 3.4vw, 42px);
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(1.7rem, 3.1vw, 2.4rem);
  line-height: 1.22;
  color: var(--plum);
  letter-spacing: -0.012em;
  font-weight: 400;
  max-width: 32ch;
}
.bio-content h2::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: clamp(44px, 5.4vw, 72px);
  height: 2px;
  background: var(--orange);
}
.bio-content h2 + p,
.bio-content h2 + p strong {
  /* paragraph immediately after subheadline reads as section opener */
  font-size: 1.1rem;
}

.bio-content h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.35rem;
  color: var(--plum);
  margin: 36px 0 14px;
  letter-spacing: -0.005em;
  font-weight: 400;
}

.bio-back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(40px, 5vw, 64px);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: var(--bronze);
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.3s, gap 0.3s;
}
.bio-back-link:hover { color: var(--plum); gap: 14px; }

@media (max-width: 900px) {
  .bio-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .bio-hero-photo { max-width: 360px; margin: 0 auto; }
  .bio-hero-photo-accent { top: 18px; right: -18px; }
}

/* ---------- Legacy /our-team /about template-style team grid (kept for compat) ---------- */
.about-team { background: rgba(183,146,107,0.08); padding: 70px 0; }
.about-team-heading { text-align: center; font-size: clamp(1.8rem,3vw,2.4rem); color: var(--plum); margin-bottom: 40px; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; max-width: 980px; margin: 0 auto; }
.team-card {
  display: grid; grid-template-columns: 1fr 1.2fr;
  align-items: stretch;
  background: #FAF5ED;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(45,36,48,0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(45,36,48,0.12);
}
.team-photo-wrap {
  display: block;
  height: 100%;
  min-height: 280px;
}
.team-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-text-col { padding: 24px 22px; }
.team-text-col h3 { font-size: 1.4rem; color: var(--plum); margin-bottom: 4px; }
.team-credentials { color: var(--bronze); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; }
.team-bio p { font-size: 0.95rem; line-height: 1.75; color: var(--deep); margin-bottom: 12px; }

@media (max-width: 900px) {
  .team-grid { grid-template-columns: 1fr; max-width: 540px; }
}
@media (max-width: 600px) {
  .team-card { grid-template-columns: 1fr; }
  .team-photo-wrap { min-height: 280px; aspect-ratio: 4/3; }
}

/* ---------- Contact page: two-column ---------- */
.contact-page { padding: 70px 0; background: var(--linen); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: var(--inner-content-max); margin: 0 auto; }
.contact-info-col h2,
.contact-form-col h2 { font-size: clamp(1.6rem,2.6vw,2rem); color: var(--plum); margin-bottom: 18px; }
.contact-info-col p { font-size: 1rem; line-height: 1.8; color: var(--deep); margin-bottom: 16px; }
.contact-details { list-style: none; margin: 24px 0 0; padding: 0; }
.contact-details li { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid rgba(108,79,96,0.12); }
.contact-label { font-size: 0.72rem; color: var(--bronze); letter-spacing: 0.08em; text-transform: uppercase; }
.contact-details a { color: var(--plum); font-weight: 500; transition: color .25s; }
.contact-details a:hover { color: var(--orange); }
.contact-address { color: var(--deep); font-size: 0.98rem; line-height: 1.5; }
.contact-form-col {
  background: #FAF5ED;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(45,36,48,0.06);
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- FAQ: Editorial Index ----------
   Picks up the wood-letterpress hero photo and treats the page like the
   printed catalog those wood blocks would compose. Big serif numerals as
   anchor type, hairline composing-rules between entries, asymmetric grid,
   pilcrow ¶ as the answer marker. No cards. No drop shadows. No rotation. */

.faq-editorial {
  padding: clamp(64px, 9vw, 120px) 0 clamp(80px, 11vw, 140px);
  background: var(--linen);
  position: relative;
  overflow: hidden;
}
.faq-editorial::before {
  /* faint composing-rule decoration top-right — a printer's flourish */
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 32vw; max-width: 480px;
  height: 1px;
  background: linear-gradient(to left, var(--bronze), transparent);
  opacity: 0.5;
}

/* Frontispiece — the page's chapter title */
.faq-frontispiece {
  max-width: var(--inner-content-max);
  margin: 0 auto clamp(48px, 6vw, 80px);
  text-align: center;
  padding: 0 clamp(20px, 4vw, 40px);
}
.faq-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bronze);
  display: inline-block;
  margin-bottom: 18px;
}
.faq-display-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  line-height: 1.05;
  color: var(--plum);
  margin-bottom: 22px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.faq-display-title em {
  font-style: italic;
  color: var(--orange);
}
.faq-byline {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: var(--plum);
  opacity: 0.85;
  max-width: 620px;
  margin: 0 auto 10px;
}
.faq-byline-cta {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--bronze);
  margin: 0 auto;
}
.faq-byline-cta a {
  color: var(--orange);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.3s, border-color 0.3s;
}
.faq-byline-cta a:hover { color: var(--plum); border-color: var(--plum); }

/* The ledger — typographic index of entries.
   No horizontal padding here: the section's .container already provides
   24px gutter. Padding on .faq-entries would inset the parent border-top
   while child border-bottoms span the parent's content-box, leaving the
   first hairline visibly wider than the inter-entry hairlines. */
.faq-entries {
  list-style: none;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid rgba(108,79,96,0.18);
}
.faq-entry {
  border-bottom: 1px solid rgba(108,79,96,0.18);
  position: relative;
}
.faq-entry::before {
  /* hairline accent that grows on open — composing-rule across the bottom */
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width 0.85s cubic-bezier(.2,.7,0,1);
}
.faq-entry.is-open::before { width: 100%; }

.faq-entry-trigger {
  width: 100%;
  background: none;
  border: 0;
  padding: clamp(26px, 3.6vw, 42px) clamp(10px, 1.5vw, 20px);
  display: grid;
  grid-template-columns: 1fr clamp(36px, 4vw, 48px);
  align-items: baseline;
  gap: clamp(20px, 3vw, 44px);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.faq-entry-q {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.3rem, 2.7vw, 2rem);
  line-height: 1.28;
  color: var(--plum);
  font-weight: 400;
  letter-spacing: -0.008em;
  transition: color 0.4s cubic-bezier(.2,.7,0,1);
}
.faq-entry:hover .faq-entry-q { color: var(--deep); }
.faq-entry.is-open .faq-entry-q { color: var(--deep); }

/* + → × toggle mark */
.faq-entry-mark {
  width: 28px; height: 28px;
  position: relative;
  border-radius: 50%;
  border: 1px solid rgba(108,79,96,0.38);
  flex-shrink: 0;
  align-self: center;
  transition: background 0.5s cubic-bezier(.2,.7,0,1),
              border-color 0.5s cubic-bezier(.2,.7,0,1),
              transform 0.75s cubic-bezier(.2,.7,0,1);
}
.faq-entry:hover .faq-entry-mark { border-color: var(--bronze); }
.faq-entry.is-open .faq-entry-mark {
  background: var(--orange);
  border-color: var(--orange);
  transform: rotate(135deg);
}
.faq-entry-mark .mark-bar {
  position: absolute; top: 50%; left: 50%;
  background: var(--plum);
  transition: background 0.4s;
}
.faq-entry-mark .mark-bar-h { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-entry-mark .mark-bar-v { width: 1.5px; height: 12px; transform: translate(-50%, -50%); }
.faq-entry.is-open .mark-bar { background: white; }

/* Answer reveal */
/* Answer reveal — block layout, no decorative columns. The answer text
   sits flush in the same column as the question above it. State change
   is carried by: (1) toggle morph + → ×, (2) bottom composing-rule
   filling orange across the entry, (3) the answer fading up. */
.faq-entry-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.75s cubic-bezier(.2,.7,0,1);
}
.faq-entry.is-open .faq-entry-answer { grid-template-rows: 1fr; }
.faq-entry-answer-inner {
  overflow: hidden;
  padding: 0 clamp(10px, 1.5vw, 20px) clamp(32px, 4.4vw, 48px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s 0.22s cubic-bezier(.2,.7,0,1),
              transform 0.75s 0.22s cubic-bezier(.2,.7,0,1);
  max-width: 72ch;
}
.faq-entry.is-open .faq-entry-answer-inner {
  opacity: 1;
  transform: translateY(0);
}
.faq-entry-answer-inner p {
  font-family: 'Outfit', sans-serif;
  font-size: 1.06rem;
  line-height: 1.78;
  color: var(--deep);
  margin-bottom: 14px;
}
.faq-entry-answer-inner p:last-child { margin-bottom: 0; }
.faq-entry-answer-inner a {
  color: var(--bronze);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s;
}
.faq-entry-answer-inner a:hover { color: var(--plum); }

/* Coda — editorial closing flourish instead of generic CTA card */
.faq-coda {
  margin: clamp(56px, 8vw, 96px) auto 0;
  max-width: 980px;
  padding: 0 clamp(20px, 4vw, 40px);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(16px, 2.5vw, 32px);
  text-align: center;
}
.faq-coda-mark {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--orange);
  flex-shrink: 0;
}
.faq-coda-text {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.4;
  color: var(--plum);
  margin: 0;
}
.faq-coda-text em { color: var(--bronze); font-style: italic; }
.faq-coda-text a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.35s, border-color 0.35s;
  white-space: nowrap;
}
.faq-coda-text a:hover { color: var(--plum); border-color: var(--plum); }

/* Hero scoped to FAQ — let the wood letterpress photo carry the title */
body.page-template-page-faq .inner-hero {
  height: 56vh;
  min-height: 380px;
}
body.page-template-page-faq .inner-hero-bg::after {
  background: linear-gradient(180deg, rgba(45,36,48,0) 0%, rgba(45,36,48,0.18) 100%);
}

/* Mobile */
@media (max-width: 768px) {
  .faq-entry-trigger {
    grid-template-columns: 1fr 32px;
    gap: 16px;
    padding: 22px 4px;
  }
  .faq-entry-q { font-size: 1.12rem; line-height: 1.32; }
  .faq-entry-answer-inner {
    padding: 0 4px 24px;
  }
  .faq-entry-answer-inner p { font-size: 0.98rem; line-height: 1.7; }
  .faq-entry-mark { width: 24px; height: 24px; }
  .faq-coda { padding: 0 18px; }
  .faq-coda-text { font-size: 1.05rem; }
}

/* ---------- Blog index ---------- */
.blog-index { padding: 70px 0; background: var(--linen); }
.blog-lede { text-align: center; font-family: 'DM Serif Display', serif; font-size: 1.2rem; color: var(--bronze); margin-bottom: 40px; }
.blog-grid { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.blog-card {
  display: flex; gap: 24px;
  background: #FAF5ED; border-radius: 12px; padding: 26px 28px;
  box-shadow: 0 6px 18px rgba(108,79,96,0.08);
  transition: box-shadow .3s ease, transform .3s ease;
}
.blog-card:hover { box-shadow: 0 12px 30px rgba(108,79,96,0.14); transform: translateY(-2px); }
.blog-card-date {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 72px; padding: 8px 6px;
  border-right: 2px solid var(--bronze);
}
.blog-day { font-family: 'DM Serif Display', serif; font-size: 2rem; color: var(--plum); line-height: 1; }
.blog-month { font-size: .72rem; color: var(--bronze); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px; }
.blog-card-body h2 { font-size: 1.4rem; margin-bottom: 8px; }
.blog-card-body h2 a { color: var(--plum); transition: color .25s; }
.blog-card-body h2 a:hover { color: var(--orange); }
.blog-card-body p { font-size: 0.95rem; color: var(--deep); line-height: 1.75; margin-bottom: 10px; }
.blog-read-more { font-size: 0.85rem; font-weight: 600; color: var(--orange); transition: color .25s; }
.blog-read-more:hover { color: var(--plum); }
.blog-pagination { margin-top: 36px; text-align: center; }
.blog-pagination .page-numbers { list-style: none; display: inline-flex; gap: 8px; padding: 0; margin: 0; }
.blog-pagination .page-numbers li a,
.blog-pagination .page-numbers li span {
  display: inline-block; padding: 8px 14px; border-radius: 6px;
  font-size: .85rem; color: var(--plum); transition: all .25s;
}
.blog-pagination .page-numbers li span.current { background: var(--plum); color: white; }
.blog-pagination .page-numbers li a:hover { background: rgba(108,79,96,0.1); }
.blog-empty { text-align: center; color: var(--bronze); font-size: 0.95rem; padding: 40px 0; }

@media (max-width: 600px) {
  .blog-card { flex-direction: column; gap: 14px; }
  .blog-card-date { flex-direction: row; width: auto; border-right: none; border-bottom: 2px solid var(--bronze); padding-bottom: 10px; gap: 10px; }
}

/* ---------- Single post ---------- */
.single-post { padding: 70px 0; background: var(--linen); }
.single-post .container { max-width: 720px; }
.post-meta {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 32px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(108,79,96,0.15);
  flex-wrap: wrap;
}
.post-back { font-size: 0.85rem; color: var(--orange); font-weight: 600; transition: color .25s; }
.post-back:hover { color: var(--plum); }
.post-date, .post-reading-time { font-size: 0.82rem; color: var(--bronze); }
.post-reading-time::before { content: '\00b7'; margin-right: 8px; }
.post-body { font-size: 1.08rem; line-height: 1.85; color: var(--deep); }
.post-body p { margin-bottom: 18px; }
.post-body p:first-of-type::first-letter {
  float: left; font-family: 'DM Serif Display', serif;
  font-size: 3.6rem; line-height: .85; color: var(--orange);
  padding-right: 10px; padding-top: 6px;
}
.post-body h2 { font-size: 1.6rem; color: var(--plum); margin: 32px 0 14px; }
.post-body h3 { font-size: 1.3rem; color: var(--plum); margin: 24px 0 10px; }
.post-body blockquote {
  font-family: 'DM Serif Display', serif; font-style: italic;
  font-size: 1.5rem; color: var(--plum);
  border-left: 3px solid var(--orange);
  padding: 12px 0 12px 24px; margin: 28px 0;
  line-height: 1.5;
}
.post-body img { border-radius: 10px; margin: 24px 0; }
.post-body a { color: var(--orange); text-decoration: underline; }
.post-body a:hover { color: var(--plum); }
.post-footer-nav { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(108,79,96,0.15); }
@media (max-width: 480px) {
  .post-body { font-size: 0.98rem; }
  .post-body p:first-of-type::first-letter { font-size: 2.6rem; }
}

/* ---------- WPForms overrides — Final CTA inline form context ---------- */
.contact-form-wrap .wpforms-container,
.contact-form-wrap .wpforms-form { width: 100% !important; }
.contact-form-wrap .wpforms-container .wpforms-field { padding: 6px 0 !important; }
.contact-form-wrap .wpforms-container .wpforms-field-label,
.contact-form-wrap .wpforms-container label.wpforms-field-label {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: rgba(246,240,231,0.85) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  font-family: 'Outfit', sans-serif !important;
}
.contact-form-wrap .wpforms-container input.wpforms-field-medium,
.contact-form-wrap .wpforms-container input.wpforms-field-large,
.contact-form-wrap .wpforms-container input[type="text"],
.contact-form-wrap .wpforms-container input[type="email"],
.contact-form-wrap .wpforms-container input[type="tel"],
.contact-form-wrap .wpforms-container textarea {
  width: 100% !important;
  padding: 9px 13px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(246,240,231,0.22) !important;
  border-radius: 6px !important;
  color: rgba(246,240,231,0.95) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.92rem !important;
  outline: none !important;
  transition: border-color .3s, background .3s !important;
}
.contact-form-wrap .wpforms-container input:focus,
.contact-form-wrap .wpforms-container textarea:focus {
  border-color: var(--orange) !important;
  background: rgba(255,255,255,0.1) !important;
}
.contact-form-wrap .wpforms-container input::placeholder,
.contact-form-wrap .wpforms-container textarea::placeholder {
  color: rgba(246,240,231,0.4) !important;
}
.contact-form-wrap .wpforms-container .wpforms-submit-container { text-align: center !important; margin-top: 12px !important; }
.contact-form-wrap .wpforms-container button.wpforms-submit,
.contact-form-wrap .wpforms-container input[type="submit"].wpforms-submit {
  display: inline-block !important;
  padding: 12px 36px !important;
  background: var(--orange) !important;
  color: white !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 4px 16px rgba(242,162,92,0.3) !important;
  transition: background .3s, transform .25s, box-shadow .3s !important;
}
.contact-form-wrap .wpforms-container button.wpforms-submit:hover,
.contact-form-wrap .wpforms-container input[type="submit"].wpforms-submit:hover {
  background: #e8933f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(242,162,92,0.4) !important;
}

/* ---------- WPForms overrides — Contact page form (light bg) ---------- */
.contact-form-col .wpforms-container,
.contact-form-col .wpforms-form { width: 100% !important; }
.contact-form-col .wpforms-container .wpforms-field { padding: 6px 0 !important; }
.contact-form-col .wpforms-container .wpforms-field-label,
.contact-form-col .wpforms-container label.wpforms-field-label {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--bronze) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  font-family: 'Outfit', sans-serif !important;
}
.contact-form-col .wpforms-container input.wpforms-field-medium,
.contact-form-col .wpforms-container input.wpforms-field-large,
.contact-form-col .wpforms-container input[type="text"],
.contact-form-col .wpforms-container input[type="email"],
.contact-form-col .wpforms-container input[type="tel"],
.contact-form-col .wpforms-container textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  background: white !important;
  border: 1px solid rgba(108,79,96,0.22) !important;
  border-radius: 6px !important;
  color: var(--deep) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.95rem !important;
  outline: none !important;
  transition: border-color .3s, box-shadow .3s !important;
}
.contact-form-col .wpforms-container input:focus,
.contact-form-col .wpforms-container textarea:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(242,162,92,0.12) !important;
}
.contact-form-col .wpforms-container input::placeholder,
.contact-form-col .wpforms-container textarea::placeholder {
  color: rgba(108,79,96,0.45) !important;
}
.contact-form-col .wpforms-container .wpforms-submit-container { text-align: center !important; margin-top: 14px !important; }
.contact-form-col .wpforms-container button.wpforms-submit,
.contact-form-col .wpforms-container input[type="submit"].wpforms-submit {
  display: inline-block !important;
  padding: 13px 40px !important;
  background: var(--orange) !important;
  color: white !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 4px 16px rgba(242,162,92,0.3) !important;
  transition: background .3s, transform .25s, box-shadow .3s !important;
}
.contact-form-col .wpforms-container button.wpforms-submit:hover,
.contact-form-col .wpforms-container input[type="submit"].wpforms-submit:hover {
  background: #e8933f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(242,162,92,0.4) !important;
}

/* ---------- Bridge CTA: ensure mobile bg-fixed override and content readability ---------- */
.bridge-cta { background-attachment: fixed; }
.bridge-cta-inner p { color: rgba(246,240,231,0.9); }
@media (max-width: 1024px) { .bridge-cta { background-attachment: scroll; } }

/* ---------- Responsive: 1024 / 768 / 480 ---------- */
@media (max-width: 1024px) {
  .nav-links { gap: 18px; }
}
@media (max-width: 768px) {
  .pain-block { grid-template-columns: 1fr; gap: 14px; padding: 50px 24px; }
  .services-grid { grid-template-columns: 1fr; max-width: 460px; }
  .bio-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 480px) {
  .hero-panel { padding: 28px 18px; }
  .hero-panel h1 { font-size: 2rem; }
  .inner-hero { height: 38vh; min-height: 280px; }
  .inner-hero-content h1 { font-size: 1.9rem; }
  .final-cta { padding: 60px 18px; }
}

/* ========== TOUCH DEVICE OVERRIDES (hover: none) ========== */
/* Covers: parallax disable, 14px font floor, 44px tap targets.
   Uses hover/pointer — not max-width — so iPad Pro 11 landscape (1194px) is included. */
@media (hover: none) and (pointer: coarse) {
  /* Parallax disable — background-attachment: fixed causes scroll jank on iOS */
  .hero, .bridge-cta, .final-cta { background-attachment: scroll !important; }

  /* Font floor: 0.875rem (14px) for sub-14px text */
  .footer-legal a,
  .footer-copy,
  .footer-links a,
  .dropdown-menu a,
  .nav-links .nav-cta { font-size: 0.875rem !important; }

  /* WordPress "small" font preset (13px) — must be 14px on touch */
  .has-small-font-size { font-size: 0.875rem !important; }

  /* Clinician card text floor */
  .clinician-card-role,
  .clinician-card-availability,
  .clinician-card-credential,
  .clinician-card-availability-label { font-size: 0.875rem !important; letter-spacing: 0.04em !important; }

  /* FAQ/accordion button text floor */
  .faq-entry-trigger,
  details > summary,
  [class*="accordion"] button,
  [class*="faq"] button { font-size: 0.875rem !important; }

  /* WPForms — beat 604-rule cascade */
  .wpforms-field-label,
  .contact-form-wrap .wpforms-container .wpforms-field-label,
  .contact-form-col .wpforms-container .wpforms-field-label { font-size: 0.875rem !important; }

  /* Tap targets: 44px min */
  .btn-primary,
  .btn-secondary,
  .btn-light { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* Nav links — tablet touch devices where desktop nav is visible */
  .nav-inner > a:first-child { min-height: 44px; }
  .nav-links a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* Bio page links */
  .bio-back-link,
  .bio-hero-cta { min-height: 44px; display: inline-flex; align-items: center; }

  /* Contact details links (phone, email) */
  .contact-details a { min-height: 44px; display: inline-flex; align-items: center; }

  /* FAQ trigger buttons */
  .faq-entry-trigger,
  details > summary,
  [class*="accordion"] button,
  [class*="faq"] button { min-height: 44px !important; padding-top: 10px !important; padding-bottom: 10px !important; }

  .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }

  .contact-form-wrap .wpforms-container button.wpforms-submit,
  .contact-form-wrap .wpforms-container input[type="submit"].wpforms-submit,
  .contact-form-col .wpforms-container button.wpforms-submit,
  .contact-form-col .wpforms-container input[type="submit"].wpforms-submit { min-height: 44px !important; }
}

/* ========== MOBILE RESPONSIVE INVARIANTS — DO NOT REMOVE ========== */
/* Required by tpa-scaffold Step 4.5 / validator Check 15.
   Prevents brand text from pushing the hamburger off-screen, submenu items
   from overflowing, and phantom horizontal scroll on iOS. */
html, body { overflow-x: clip; }

@media (max-width: 768px) {
  .brand { min-width: 0; flex: 1 1 auto; }
  .brand-text, .brand-text small { white-space: normal; min-width: 0; }
  .mobile-toggle { flex-shrink: 0; margin-left: auto; }
  .nav-links > li { white-space: normal; }
  .dropdown-menu,
  .dropdown-menu li,
  .dropdown-menu a { white-space: normal; }
}

/* ============================================================
   Group Program Page  (page-group-program.php)
   ============================================================ */

/* --- Intro section --- */
.gp-intro { padding: 64px 0; }

.gp-intro-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: start;
}
.gp-intro-img-col { line-height: 0; }
.gp-intro-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

.gp-intro-heading {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  color: var(--plum);
  margin-bottom: 20px;
}
.gp-intro-body p {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--deep);
  margin-bottom: 18px;
}
.gp-intro-body p:last-child { margin-bottom: 0; }

/* --- Session details — vertical stack filling text-column height --- */
.gp-details {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;                      /* grow to fill remaining space in .gp-intro-text */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 24px;
}
.gp-details li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(108,79,96,0.2);
}
.gp-details li strong {
  font-family: 'Outfit', sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bronze);
}
.gp-details li span,
.gp-details li > *:not(strong) {
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  color: var(--deep);
  line-height: 1.55;
}

/* Make text column a flex column so details can fill remaining height */
.gp-intro-text {
  display: flex;
  flex-direction: column;
}

/* Stretch grid rows so left col matches image height */
.gp-intro-grid { align-items: stretch; }

/* Still I Rise — shift hero image down to show faces */
.page-still-i-rise-group .inner-hero-bg {
  background-position: center 40%;
}

/* --- Topics accordion --- */
.gp-topics { padding: 64px 0; }

.gp-topics-heading {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--plum);
  margin-bottom: 36px;
}

.gp-entries {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(108,79,96,0.15);
}
.gp-entry {
  position: relative;
  border-bottom: 1px solid rgba(108,79,96,0.15);
}
.gp-entry::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--plum);
  transition: width 0.4s ease;
}
.gp-entry.is-open::before { width: 100%; }

.gp-entry-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.gp-entry-q {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--plum);
  transition: color 0.25s;
}
.gp-entry:hover .gp-entry-q,
.gp-entry.is-open .gp-entry-q { color: var(--deep); }

/* Reuse .gp-entry-mark — same shape as .faq-entry-mark */
.gp-entry-mark {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--plum);
  position: relative;
  transition: background 0.25s, border-color 0.25s;
}
.gp-entry:hover .gp-entry-mark { border-color: var(--bronze); }
.gp-entry.is-open .gp-entry-mark {
  background: var(--plum);
  border-color: var(--plum);
}

/* Collapse/expand via CSS grid animation */
.gp-entry-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.gp-entry.is-open .gp-entry-answer { grid-template-rows: 1fr; }

.gp-entry-answer-inner {
  overflow: hidden;
  opacity: 0;
  padding-bottom: 0;
  transition: opacity 0.25s, padding-bottom 0.35s ease;
}
.gp-entry.is-open .gp-entry-answer-inner {
  opacity: 1;
  padding-bottom: 28px;
}

.gp-entry-answer-inner p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--deep);
  margin-bottom: 14px;
}
.gp-entry-answer-inner p:last-child { margin-bottom: 0; }
.gp-entry-answer-inner ul {
  list-style: disc;
  padding-left: 20px;
  margin: 8px 0 14px;
}
.gp-entry-answer-inner li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--deep);
  margin-bottom: 6px;
}
.gp-entry-answer-inner strong { color: var(--plum); }

/* --- CTA section --- */
.gp-cta-section {
  background: var(--linen);
  padding: 56px 0 72px;
  text-align: center;
  border-top: 1px solid rgba(108,79,96,0.1);
}
.gp-cta-body {
  max-width: 680px;
  margin: 0 auto 36px;
}
.gp-cta-body p {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--deep);
  margin-bottom: 0;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .gp-intro-grid { grid-template-columns: 1fr 360px; gap: 36px; }
}
@media (max-width: 768px) {
  .gp-intro { padding: 48px 0; }
  .gp-intro-grid { grid-template-columns: 1fr; gap: 28px; }
  .gp-intro-img-col { order: -1; }
  .gp-intro-img { max-height: 320px; object-fit: cover; }
  .gp-topics { padding: 48px 0; }
  .gp-details { flex-direction: column; gap: 16px; }
  .gp-cta-section { padding: 44px 0 56px; }
}
@media (max-width: 480px) {
  .gp-intro { padding: 36px 0; }
  .gp-topics { padding: 36px 0; }
  .gp-topics-heading { margin-bottom: 24px; }
}
@media (hover: none) and (pointer: coarse) {
  .gp-entry-trigger { min-height: 44px; }
  .gp-entry-q { font-size: 1rem; }
}