/* ==============================================
   SERVICE PAGE CSS — sp-* namespace — v3.3
   Standalone styles for page-service.php template.
   
   ZERO collision with theme CSS.
   
   v3.3 CHANGES:
   - Added related articles section (3-column card grid, single column mobile)
   - Used background-color instead of background shorthand for thumb fallback
   v3.2 CHANGES:
   - Strip photos 90px with 28px gap, names 12px
   - Responsive: 72px at tablet, 60px at mobile
   v3.1 CHANGES:
   - Therapist strip redesigned: centered layout, photos, names
   - Pricing signal redesigned: card-style with prominent price
   ============================================== */


/* ─── VIDEO HERO: DARK SCRIM (matches Payment page) ─── */

.hero.video {
  min-height: 500px;
  height: 500px;
  padding: 0;
  align-items: center;
  display: flex;
}

.hero.video::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #fb9000 0%, #e8724a 20%, #d94f6e 40%,
    #9b59b6 60%, #6cc8d7 80%, #4aae8c 100%);
  z-index: 3;
}

.hero.video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(35, 30, 25, 0.92) 0%,
    rgba(35, 30, 25, 0.78) 45%,
    rgba(35, 30, 25, 0.45) 100%);
  z-index: 1;
}

.hero.video .video-bg {
  background: none;
  background-color: transparent;
  box-shadow: none;
  border: none;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* Rainbow accent line at top of hero content */
.hero.video .hero-rainbow {
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg,
    #fb9000 0%, #e8724a 20%, #d94f6e 40%,
    #9b59b6 60%, #6cc8d7 80%, #4aae8c 100%);
  margin: 0;
}

/* Label above heading */
.hero.video .hero-label {
  font-family:var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fb9000;
  margin: 16px 0 0;
}

.hero.video .hero-heading {
  font-family:var(--font-display);font-size-adjust:var(--display-optical-size,none);
  font-weight: var(--display-weight);
  font-size: 34px;
  line-height: 1.2;
  color: #fff;
  max-width: 550px;
  margin: 12px 0 12px;
  text-transform: none;
}

.hero.video .hero-subheading {
  font-family:var(--font-body);font-size-adjust:var(--body-optical-size,none);
  font-style: italic;
  font-weight: 400;
  font-size: 17.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  max-width: 500px;
  margin: 0 0 20px;
}
/* ─── HERO: MOBILE IMAGE FALLBACK + RESPONSIVE ─── */
.sp-hero-mobile-bg {
  display: none;
}

@media (max-width: 900px) {
  .hero.video {
    min-height: 440px;
    height: 440px;
  }
}

@media (max-width: 624px) {
  .hero.video {
    min-height: auto;
    height: auto;
    padding: 60px 0 48px;
  }
  .hero.video::after {
    background: linear-gradient(90deg,
      rgba(35, 30, 25, 0.97) 0%,
      rgba(35, 30, 25, 0.85) 60%,
      rgba(35, 30, 25, 0.52) 100%);
  }
  .hero.video video,
  .hero.video .sp-hero-video {
    display: none !important;
  }
  .sp-hero-mobile-bg {
    display: block !important;
  }
  .hero.video .video-bg {
    padding: 0 20px;
  }
  .hero.video .hero-heading {
    font-size: 26px;
    max-width: 100%;
  }
  .hero.video .hero-subheading {
    font-size: 15.5px;
    max-width: 100%;
  }
}

/* Stat callout — dark frosted glass (matches Payment hero) */
.hero.video .hero-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 16px 24px;
  max-width: 420px;
  margin: 0;
}

.hero.video .hero-stat__number {
  font-family:var(--font-display);font-size-adjust:var(--display-optical-size,none);
  font-weight: var(--display-weight);
  font-size: 28px;
  color: #fb9000;
  line-height: 1;
  flex-shrink: 0;
}

.hero.video .hero-stat__text {
  font-family:var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  line-height: 1.4;
}

/* Stat + CTA row */
.hero.video .hero-stat-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

/* CTA text link */
.hero.video .hero-cta-link {
  font-family:var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

.hero.video .hero-cta-link:hover {
  text-decoration: underline;
}

@media only screen and (max-width: 900px) {
  .hero.video {
    min-height: 440px;
    height: 440px;
  }
  .hero.video .hero-heading {
    font-size: 30px;
  }
}

@media only screen and (max-width: 624px) {
  .hero.video {
    min-height: auto;
    height: auto;
    padding: 50px 0;
  }
  .hero.video::after {
    background: linear-gradient(90deg,
      rgba(35, 30, 25, 0.97) 0%,
      rgba(35, 30, 25, 0.85) 60%,
      rgba(35, 30, 25, 0.52) 100%);
  }
  .hero.video .video-bg {
    padding: 0 20px;
  }
  .hero.video .hero-heading {
    font-size: 26px;
    max-width: 100%;
  }
  .hero.video .hero-subheading {
    font-size: 16px;
    max-width: 100%;
  }
  .hero.video .hero-stat {
    max-width: 100%;
  }
}


/* ─── RESET: Kill any inherited theme styles ─── */

.sp-page {
  width: 100%;
  position: relative;
  background: #fff;
  overflow: visible !important;
  padding-bottom: 0;
}

.sp-page hr {
  display: none !important;
}
.sp-page .sp-section,
.sp-page .sp-zone,
.sp-page .sp-section__inner,
.sp-page .sp-section__narrow,
.sp-page .sp-zone--full,
.sp-page .sp-zone--intro,
.sp-page .sp-zone--full > *,
.sp-page .sp-container {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.wrapper:has(.sp-page) {
  overflow: visible !important;
}

.sp-page *,
.sp-page *::before,
.sp-page *::after {
  box-sizing: border-box;
}


/* ─── LAYOUT ─── */

.sp-container {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 30px;
}

.sp-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 50px;
  align-items: start;
}

.sp-main {
  min-width: 0;
  overflow: hidden;
}

.sp-main--full {
  max-width: 820px;
}


/* ─── SECTION ZONES ─── */

.sp-zone--intro {
  padding: 40px 0 30px;
}

.sp-zone--full {
  padding-bottom: 0;
}

.sp-zone--full > p {
  display: none !important;
}
.sp-zone--full > br {
  display: none !important;
}


/* ─── SIDEBAR (sticky on desktop) ─── */

.sp-aside {
  position: sticky;
  top: 100px;
}

/* ─── SIDEBAR CARDS ─── */
.sp-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 28px 24px;
  margin-bottom: 24px;
  border: 1px solid #e6e6e6;
}
.sp-card--stat {
  text-align: center;
  background: linear-gradient(135deg, #faf8f5 0%, #f5f0eb 100%);
  border: none;
}
.sp-card__number {
  font-family:var(--font-display);font-size-adjust:var(--display-optical-size,none);
  font-weight: var(--display-weight);
  font-size: 40px;
  color: #fb9000;
  line-height: 1;
  margin-bottom: 8px;
}
.sp-card__label {
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}
.sp-card__text {
  font-family:var(--font-body);font-size-adjust:var(--body-optical-size,none);
  font-size: 14px;
  color: #6e787c;
  line-height: 1.5;
  margin: 0;
}
.sp-card--evidence {
  border-left: 4px solid #fb9000;
}
.sp-card__tag {
  font-family:var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fb9000;
  display: block;
  margin-bottom: 12px;
}
.sp-card__source {
  font-family:var(--font-ui);
  font-size: 11px;
  color: #8e979b;
  margin-top: 10px;
  font-style: italic;
}

/* ── Related Services Card ── */
.sp-card--related {
  background: #f9f7f4;
  border-left: 4px solid #2a9d8f;
}
.sp-card--related .sp-card__tag {
  color: #2a9d8f;
}
.sp-card__related-item {
  padding: 12px 0;
  border-top: 1px solid #e8e2da;
}
.sp-card__related-item:first-child {
  border-top: none;
  padding-top: 0;
}
.sp-card__related-item:last-child {
  padding-bottom: 0;
}
.sp-card--related .sp-card__related-link {
  font-family:var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: #333 !important;
  text-decoration: none !important;
  display: block;
  transition: color 0.2s ease;
}
.sp-card--related .sp-card__related-link:hover {
  color: #2a9d8f !important;
  text-decoration: none !important;
}

/* ─── SIDEBAR WT SCHEDULING CARD (dark, matches therapist profile) ─── */

.sp-wt-card {
  background: linear-gradient(135deg, #2c2c2c 0%, #3a3a3a 100%);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 0;
}

.sp-wt-card__bar {
  height: 3px;
  background: linear-gradient(90deg,
    #fb9000 0%, #e8724a 20%, #d94f6e 40%,
    #9b59b6 60%, #6cc8d7 80%, #4aae8c 100%);
}

.sp-wt-card__body {
  padding: 24px 22px 28px;
}

.sp-wt-card__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.sp-wt-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4aae8c;
  box-shadow: 0 0 6px rgba(74, 174, 140, 0.5);
  flex-shrink: 0;
}

.sp-wt-card__status-text {
  font-family:var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.sp-page .sp-wt-card__heading {
  font-family:var(--font-body);font-size-adjust:var(--body-optical-size,none);
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  line-height: 1.4;
  margin: 0 0 8px 0;
}

.sp-page .sp-wt-card__text {
  font-family:var(--font-body);font-size-adjust:var(--body-optical-size,none);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.sp-wt-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(251, 144, 0, 0.15);
  border: 1px solid rgba(251, 144, 0, 0.3);
  border-radius: 6px;
  padding: 10px 18px;
  font-family:var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: #fb9000;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.sp-wt-card__btn:hover {
  background: rgba(251, 144, 0, 0.25);
  border-color: rgba(251, 144, 0, 0.5);
  text-decoration: none;
  color: #fb9000;
}

.sp-wt-card__btn-arrow {
  font-size: 14px;
  transition: transform 0.2s;
}

.sp-wt-card__btn:hover .sp-wt-card__btn-arrow {
  transform: translateX(2px);
}


/* ─── TYPOGRAPHY (scoped to .sp-page) ─── */

.sp-page h2 {
  font-family:var(--font-display);font-size-adjust:var(--display-optical-size,none);
  font-weight: 500;
  font-size: 28px;
  color: #fb9000;
  line-height: 1.3;
  margin: 40px 0 18px;
}

.sp-page h2:first-child {
  margin-top: 0;
}

.sp-page h3 {
  font-family:var(--font-display);font-size-adjust:var(--display-optical-size,none);
  font-weight: 500;
  font-size: 22px;
  color: #6e787c;
  line-height: 1.4;
  margin: 36px 0 16px;
  border-left: none;
  padding-left: 0;
}

.sp-page h4 {
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 17px;
  color: #333;
  margin: 28px 0 10px;
}

.sp-page p {
  font-family:var(--font-body);font-size-adjust:var(--body-optical-size,none);
  font-weight: 400;
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin: 0 0 20px;
}

.sp-page p:last-child {
  margin-bottom: 0;
}

.sp-page a:not(.btnOrange):not(.wt-embed--trigger) {
  color: #fb9000;
  text-decoration: none;
  font-weight: 500;
}

.sp-page a:not(.btnOrange):not(.wt-embed--trigger):not(.sp-service-link):not(.sp-learn-more):not(.sp-article-card):not(.sp-therapist-card):hover {
  text-decoration: underline;
}

.sp-page a.sp-service-link:hover,
.sp-page a.sp-learn-more:hover,
.sp-page a.sp-article-card:hover,
.sp-page a.sp-therapist-card:hover {
  text-decoration: none !important;
}

.sp-page strong {
  font-weight: 600;
  color: #333;
}

.sp-page blockquote {
  font-family:var(--font-body);font-size-adjust:var(--body-optical-size,none);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: #6e787c;
  border-left: 4px solid #fb9000;
  padding: 16px 0 16px 24px;
  margin: 32px 0;
  background: transparent;
}


/* ─── LISTS (Venn overlap bullets) ─── */

.sp-page ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.sp-page ul li {
  position: relative;
  padding: 8px 0 8px 38px;
  line-height: 1.6;
  color: #555;
  font-family:var(--font-body);font-size-adjust:var(--body-optical-size,none);
  font-size: 16px;
}

.sp-page ul li::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background-color: #fb9000;
  left: 5px;
  top: 16px;
  z-index: 2;
}

.sp-page ul li::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background-color: rgba(108, 200, 215, 0.35);
  left: 12px;
  top: 19px;
  z-index: 1;
}

.sp-page ol {
  padding-left: 1.5em;
  margin: 0 0 24px;
}

.sp-page ol li {
  font-family:var(--font-body);font-size-adjust:var(--body-optical-size,none);
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  padding: 6px 0;
}


/* ─── RAINBOW DIVIDER ─── */

.sp-page .tgdc-content-divider,
.sp-page .content-divider {
  height: 3px;
  background: linear-gradient(90deg,
    #fb9000 0%, #e8724a 20%, #d94f6e 40%,
    #9b59b6 60%, #6cc8d7 80%, #4aae8c 100%);
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
}


/* ─── PRACTICE INSIGHT ───
   Retired 2026-06-12 ("one semantic component, one appearance, everywhere",
   implementation map §2): service pages now inherit the blog card treatment
   verbatim from style.css — white card, 1px #ece7e0, radius 12, info icon +
   #2e7d74 practice-voice label. The latent gray-card/teal-circle variant that
   lived here never rendered (v3 !important rules suppressed it from day one). */

/* ─── INLINE CTA ─── */

.sp-page .tgdc-cta-inline {
  background: #f8f9fa;
  border-left: 4px solid #fb9000;
  padding: 28px 32px;
  margin: 40px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.sp-page .tgdc-cta-inline__content {
  flex: 1;
}

.sp-page .tgdc-cta-inline__title {
  font-family:var(--font-display);font-size-adjust:var(--display-optical-size,none);
  font-weight: var(--display-weight);
  font-size: 20px;
  color: #333;
  margin: 0 0 6px;
}

.sp-page .tgdc-cta-inline__text {
  font-size: 15px;
  color: #6e787c;
  margin: 0;
}

.sp-page .tgdc-cta-inline__button {
  display: inline-block;
  padding: 12px 28px;
  background: #fb9000;
  color: #fff;
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 6px;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
  text-decoration: none;
}

.sp-page .tgdc-cta-inline__button:hover {
  background: #e07d00;
  text-decoration: none;
  color: #fff;
}


/* ─── CENTERED CTA ─── */

.sp-page .tgdc-cta-centered {
  background: linear-gradient(135deg, #faf8f5 0%, #f5f0eb 100%);
  border-radius: 8px;
  padding: 40px;
  margin: 40px 0;
  text-align: center;
}

.sp-page .tgdc-cta-centered__title {
  font-family:var(--font-display);font-size-adjust:var(--display-optical-size,none);
  font-weight: var(--display-weight);
  font-size: 24px;
  color: #333;
  margin: 0 0 10px;
}

.sp-page .tgdc-cta-centered__text {
  font-size: 16px;
  color: #6e787c;
  margin: 0 0 20px;
}

.sp-page .tgdc-cta-centered__button {
  display: inline-block;
  padding: 14px 36px;
  background: #fb9000;
  color: #fff;
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
  text-decoration: none;
}

.sp-page .tgdc-cta-centered__button:hover {
  background: #e07d00;
  text-decoration: none;
  color: #fff;
}


/* ─── CTA BAND (full-width, orange gradient) ─── */

.sp-page .sp-section:has(.sp-cta-band),
.sp-page .sp-section:has(.sp-footer-cta) {
  padding: 0;
}
.sp-page .sp-section--flush {
  padding: 0 !important;
}

.sp-page .sp-cta-band {
  background: linear-gradient(135deg, #fb9000 0%, #e8833a 100%);
  padding: 40px 30px;
  text-align: center;
}

.sp-page .sp-cta-band__title {
  font-family:var(--font-display);font-size-adjust:var(--display-optical-size,none);
  font-weight: var(--display-weight);
  font-size: 28px;
  color: #fff;
  margin: 0 0 12px;
}

.sp-page .sp-cta-band__text {
  font-family:var(--font-body);font-size-adjust:var(--body-optical-size,none);
  font-size: 17px;
  color: rgba(255,255,255,0.9);
  margin: 0 auto 24px;
  max-width: 550px;
}

.sp-page .sp-cta-band__button {
  display: inline-block;
  padding: 14px 36px;
  background: #fff;
  color: #fb9000;
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.sp-page .sp-cta-band__button:hover {
  background: #f5f0eb;
  text-decoration: none;
}


/* ─── FULL-WIDTH SECTIONS (Zone 2) ─── */

.sp-page .sp-section {
  padding: 40px 30px;
}

.sp-page .sp-section--gray {
  background-color: #f8f9fa;
}

.sp-page .sp-section--warm {
  background: linear-gradient(135deg, #faf8f5 0%, #f5f0eb 100%);
}

.sp-page .sp-section__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.sp-page .sp-section__narrow {
  max-width: 780px;
  margin: 0 auto;
}


/* ─── APPROACH / COMPARISON CARDS ─── */

.sp-page .sp-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 2em 0;
}

.sp-page .sp-cards-grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.sp-page .sp-approach-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 28px;
  border-top: 3px solid #fb9000;
  transition: box-shadow 0.2s ease;
}

.sp-page .sp-approach-card:nth-child(2) { border-top-color: #6cc8d7; }
.sp-page .sp-approach-card:nth-child(3) { border-top-color: #9b59b6; }
.sp-page .sp-approach-card:nth-child(4) { border-top-color: #4aae8c; }

.sp-page .sp-approach-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.sp-page .sp-approach-card h3 {
  font-family:var(--font-display);font-size-adjust:var(--display-optical-size,none);
  font-weight: var(--display-weight);
  font-size: 16px;
  color: #333;
  margin: 0 0 14px;
}

.sp-page .sp-approach-card p {
  font-size: 14px;
  color: #6e787c;
  line-height: 1.6;
  margin: 0;
}

.sp-page .sp-approach-card .sp-learn-more {
  display: inline-block;
  margin-top: 14px;
  font-family:var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: #fb9000;
  text-decoration: none;
}


/* ─── SERVICE LINK CARDS ─── */

.sp-page .sp-services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 30px 0;
}

.sp-page .sp-service-link {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 24px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: block;
}

.sp-page .sp-service-link:hover {
  border-color: #fb9000;
  box-shadow: 0 2px 12px rgba(251, 144, 0, 0.1);
  text-decoration: none;
}

.sp-page .sp-service-link__title {
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  color: #fb9000;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sp-page .sp-service-link__desc {
  font-size: 14px;
  color: #6e787c;
  line-height: 1.5;
  margin: 0;
}


/* ─── NUMBERED STEP CARDS ─── */

.sp-page .sp-step-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 32px 32px 32px 90px;
  margin-bottom: 20px;
  position: relative;
}

.sp-page .sp-step-card__num {
  position: absolute;
  left: 28px;
  top: 32px;
  width: 44px;
  height: 44px;
  background: #fb9000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 20px;
  color: #fff;
}

.sp-page .sp-step-card__title {
  font-family:var(--font-display);font-size-adjust:var(--display-optical-size,none);
  font-weight: var(--display-weight);
  font-size: 18px;
  color: #333;
  margin: 0 0 10px;
}

.sp-page .sp-step-card__text {
  font-size: 15px;
  color: #555;
  line-height: 1.7;
  margin: 0;
}


/* ─── SYMPTOM / RESONANCE CHECKLIST ─── */

.sp-page .sp-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 1.5em 0;
  list-style: none;
  padding: 0;
}

.sp-page .sp-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  transition: border-color 0.2s ease;
}

.sp-page .sp-checklist li::before,
.sp-page .sp-checklist li::after {
  display: none;
}

.sp-page .sp-checklist li:hover {
  border-color: #fb9000;
}

.sp-page .sp-check-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fb9000, #e8724a);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.sp-page .sp-check-icon svg {
  width: 12px;
  height: 12px;
}


/* ─── KEY FACTS ROW ─── */

.sp-page .sp-facts-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 2em 0;
}

.sp-page .sp-fact {
  text-align: center;
  padding: 28px 20px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e6e6e6;
}

.sp-page .sp-fact__number {
  font-family:var(--font-display);font-size-adjust:var(--display-optical-size,none);
  font-weight: var(--display-weight);
  font-size: 36px;
  line-height: 1;
  margin-bottom: 8px;
}

.sp-page .sp-fact__number--orange { color: #fb9000; }
.sp-page .sp-fact__number--teal   { color: #6cc8d7; }
.sp-page .sp-fact__number--purple { color: #9b59b6; }

.sp-page .sp-fact__label {
  font-family:var(--font-ui);
  font-size: 13px;
  color: #6e787c;
  line-height: 1.4;
}

/* Optional sources line under a stats row — [sp_stats_row sources="…"] (2026-10-14).
   Same look as the Research card's .sp-card__source. The wrapper takes the row's
   outer margin so the line sits 12px under the tiles, not 2em. */
.sp-page .sp-facts--sourced { margin: 2em 0; }
.sp-page .sp-facts--sourced .sp-facts-row { margin: 0; }
.sp-page .sp-facts-sources {
  font-family: var(--font-ui);
  font-size: 11px;
  font-style: italic;
  color: #8e979b;
  line-height: 1.5;
  margin-top: 12px;
  text-align: left;
}


/* ─── "WHAT TO EXPECT" TIMELINE ─── */

.sp-page .sp-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 2em 0;
  position: relative;
  padding-left: 0;
  list-style: none;
}

.sp-page .sp-timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg, #fb9000 0%, #e8724a 33%, #9b59b6 66%, #6cc8d7 100%);
}

.sp-page .sp-timeline__step {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 24px 0;
  position: relative;
}

.sp-page .sp-timeline__step::before,
.sp-page .sp-timeline__step::after {
  display: none;
}

.sp-page .sp-timeline__dot {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #fb9000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  color: #fb9000;
  z-index: 2;
}

.sp-page .sp-timeline__step:nth-child(2) .sp-timeline__dot { border-color: #e8724a; color: #e8724a; }
.sp-page .sp-timeline__step:nth-child(3) .sp-timeline__dot { border-color: #9b59b6; color: #9b59b6; }
.sp-page .sp-timeline__step:nth-child(4) .sp-timeline__dot { border-color: #6cc8d7; color: #6cc8d7; }

.sp-page .sp-timeline__content {
  padding-top: 4px;
}

.sp-page .sp-timeline__content h3 {
  font-family:var(--font-display);font-size-adjust:var(--display-optical-size,none);
  font-weight: var(--display-weight);
  font-size: 17px;
  color: #555;
  margin: 0 0 8px;
}

.sp-page .sp-timeline__content p {
  font-size: 15px;
  color: #6e787c;
  line-height: 1.6;
  margin: 0;
}


/* ─── THERAPIST PROFILES (spoke pages — horizontal) ─── */

.sp-page .sp-therapist {
  display: flex;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid #e6e6e6;
  align-items: flex-start;
}

.sp-page .sp-therapist:last-child {
  border-bottom: none;
}

.sp-page .sp-therapist__photo {
  width: 100px;
  height: 120px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: cover;
}

.sp-page .sp-therapist__info {
  flex: 1;
}

.sp-page .sp-therapist__name {
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 17px;
  color: #333;
  margin-bottom: 2px;
}

.sp-page .sp-therapist__creds {
  font-family:var(--font-ui);
  font-size: 12px;
  color: #8e979b;
  margin-bottom: 10px;
}

.sp-page .sp-therapist__desc {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 8px;
}

.sp-page .sp-therapist__link {
  font-family:var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: #fb9000;
  text-decoration: none;
}


/* ─── THERAPIST CARDS (hub pages — grid) ─── */

.sp-page .sp-therapist-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 30px 0;
}

.sp-page .sp-therapist-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sp-page .sp-therapist-card__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  margin-bottom: 14px;
  object-fit: cover;
  object-position: top center;
}

.sp-page .sp-therapist-card__name {
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
  line-height: 1.3;
}

.sp-page .sp-therapist-card__creds {
  font-family:var(--font-ui);
  font-size: 12px;
  color: #8e979b;
  margin-bottom: 8px;
}

.sp-page .sp-therapist-card__desc {
  font-family:var(--font-body);font-size-adjust:var(--body-optical-size,none);
  font-size: 13px;
  color: #6e787c;
  line-height: 1.5;
  margin-bottom: 10px;
  max-width: 200px;
}

.sp-page .sp-therapist-card__link {
  font-family:var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: #fb9000;
  display: inline-block;
  margin-top: auto;
}

.sp-page .sp-therapist-card:hover .sp-therapist-card__link {
  text-decoration: underline;
}

/* Pair layout — [sp_therapist_grid layout="pair"], a two-clinician team
   (Charleston, whose service pages list only its own Mount Pleasant
   clinicians). Two larger centered cards with room for a sentence each.
   The tablet/mobile grid rules further down still apply (same specificity,
   later in the file), so the pair stacks on phones. */
.sp-page .sp-therapist-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 320px));
  justify-content: center;
  gap: 48px;
}

.sp-page .sp-therapist-grid--pair .sp-therapist-card__photo {
  width: 200px;
  height: 200px;
}

.sp-page .sp-therapist-grid--pair .sp-therapist-card__name {
  font-size: 16px;
}

.sp-page .sp-therapist-grid--pair .sp-therapist-card__desc {
  font-size: 14px;
  max-width: 300px;
}


/* ─── THERAPIST STRIP (team mini-preview) ─── */

.sp-page .sp-strip {
  padding: 30px 30px;
  background: #f8f9fa;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}

.sp-page .sp-strip__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.sp-page .sp-strip__header {
  margin-bottom: 24px;
}

.sp-page .sp-strip__label {
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  color: #333;
  margin-bottom: 6px;
}

.sp-page .sp-strip__desc {
  font-family:var(--font-body);font-size-adjust:var(--body-optical-size,none);
  font-size: 14px;
  color: #6e787c;
  line-height: 1.5;
}

.sp-page .sp-strip__photos {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.sp-page .sp-strip__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 120px;
}

.sp-page .sp-strip__photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sp-page .sp-strip__photo:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(251, 144, 0, 0.2);
}

.sp-page .sp-strip__name {
  font-family:var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: #555;
  line-height: 1.2;
  text-align: center;
}

.sp-page .sp-strip__footer {
  margin-top: 20px;
}

.sp-page .sp-strip__anchor {
  font-family:var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: #fb9000;
  text-decoration: none;
}

.sp-page .sp-strip__anchor:hover {
  text-decoration: underline;
}

/* Smooth scroll target for anchor link */
.sp-page [id="therapist-grid"] {
  scroll-margin-top: 80px;
}


/* ─── PRICING SIGNAL (cost transparency card) ─── */

.sp-page .sp-pricing-signal {
  padding: 40px 30px;
  background: linear-gradient(135deg, #faf8f5 0%, #f5f0eb 100%);
  text-align: center;
}

.sp-page .sp-pricing-signal__card {
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e6e6e6;
  border-top: 3px solid #fb9000;
  padding: 36px 40px 32px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}

.sp-page .sp-pricing-signal__label {
  font-family:var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #8e979b;
  margin-bottom: 10px;
}

.sp-page .sp-pricing-signal__price {
  font-family:var(--font-display);font-size-adjust:var(--display-optical-size,none);
  font-weight: var(--display-weight);
  font-size: 36px;
  color: #333;
  line-height: 1.1;
  margin-bottom: 14px;
}

.sp-page .sp-pricing-signal__note {
  font-family:var(--font-body);font-size-adjust:var(--body-optical-size,none);
  font-size: 15px;
  color: #6e787c;
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.sp-page .sp-pricing-signal__link {
  font-family:var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: #fb9000;
  text-decoration: none;
}

.sp-page .sp-pricing-signal__link:hover {
  text-decoration: underline;
}


/* ─── FAQ ACCORDION ─── */

.sp-page .sp-faq-wrap {
  margin: 0;
  padding-bottom: 24px;
}

.sp-page .sp-faq-item {
  border-bottom: 1px solid #e6e6e6;
}

.sp-page .sp-faq-item:first-child {
  border-top: 1px solid #e6e6e6;
}

.sp-page .sp-faq-item__q {
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 17px;
  color: #333;
  padding: 20px 40px 20px 0;
  margin: 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.sp-page .sp-faq-item__q::-webkit-details-marker {
  display: none;
}

.sp-page .sp-faq-item__q::marker {
  display: none;
  content: '';
}

.sp-page .sp-faq-item__q::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-right: 2px solid #fb9000;
  border-bottom: 2px solid #fb9000;
  transition: transform 0.2s ease;
}

.sp-page .sp-faq-item[open] .sp-faq-item__q::after {
  transform: translateY(-50%) rotate(-135deg);
}

.sp-page .sp-faq-item__a {
  font-size: 15px;
  color: #6e787c;
  line-height: 1.7;
  padding: 0 0 20px;
  margin: 0;
}


/* ─── RELATED ARTICLES ─── */

.sp-related-articles {
    padding: 40px 30px;
}

.sp-related-articles__inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* h2 inherits site-wide orange h2 treatment:
   Poppins 400 weight, 28px, #fb9000
   Only override if service page h2 styles differ */
.sp-page .sp-related-articles__heading {
    font-family:var(--font-display);font-size-adjust:var(--display-optical-size,none);
    font-size: 28px;
    font-weight: 500;
    color: #fb9000;
    line-height: 1.3;
    margin: 0 0 30px 0;
}

.sp-related-articles__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sp-related-articles__card {
    text-decoration: none;
    display: block;
}

.sp-related-articles__card:hover {
    text-decoration: none;
}

.sp-related-articles__thumb {
    width: 100%;
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: #e8e0d8;
    border-radius: 8px 8px 0 0;
}

.sp-related-articles__content {
    padding: 16px 0;
}

.sp-page .sp-related-articles__date {
    font-family:var(--font-ui);
    font-size: 11px;
    color: #8e979b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.sp-page .sp-related-articles__title {
    font-family:var(--font-display);font-size-adjust:var(--display-optical-size,none);
    font-size: 16px;
    font-weight: var(--display-weight);
    color: #333;
    line-height: 1.3;
    margin: 0;
}

.sp-related-articles__card:hover .sp-related-articles__title {
    color: #fb9000;
}


/* ─── TOPIC SECTIONS (population pages) ─── */

.sp-page .sp-topic {
  padding: 32px 0;
}

.sp-page .sp-topic + .sp-topic {
  border-top: 1px solid #e6e6e6;
}


/* ─── FOOTER CTA (dark background) ─── */

.sp-page .sp-footer-cta {
  background: #333;
  padding: 56px 30px;
  text-align: center;
}

.sp-page .sp-footer-cta__title {
  font-family:var(--font-display);font-size-adjust:var(--display-optical-size,none);
  font-weight: var(--display-weight);
  font-size: 30px;
  color: #fff;
  margin: 0 0 16px;
}

.sp-page .sp-footer-cta__text {
  font-family:var(--font-body);font-size-adjust:var(--body-optical-size,none);
  font-size: 17px;
  color: rgba(255,255,255,0.7);
  max-width: 550px;
  margin: 0 auto 28px;
  line-height: 1.6;
}

.sp-page .sp-footer-cta__button {
  display: inline-block;
  padding: 16px 40px;
  background: #fb9000;
  color: #fff;
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
  text-decoration: none;
}

.sp-page .sp-footer-cta__button:hover {
  background: #e07d00;
  text-decoration: none;
  color: #fff;
}


/* ─── IMAGES ─── */

.sp-page img {
  max-width: 100%;
  height: auto;
}


/* ─── ICON CALLOUT ─── */

.sp-page .tgdc-icon-callout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #f8f9fa;
  padding: 24px 28px;
  margin: 28px 0;
  border-radius: 8px;
}


/* ─── NUMBERED STEP ─── */

.sp-page .tgdc-numbered-step {
  position: relative;
  padding: 24px 24px 24px 72px;
  margin: 20px 0;
  background: #f8f9fa;
  border-radius: 8px;
}

.sp-page .tgdc-numbered-step__badge {
  position: absolute;
  left: 20px;
  top: 24px;
  width: 38px;
  height: 38px;
  background: #fb9000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
}


/* ================================================
   RESPONSIVE
   ================================================ */

@media (max-width: 900px) {

  .sp-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sp-aside {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 32px;
  }

  .sp-page h1 {
    font-size: 32px;
  }

  .sp-page .sp-cards-grid,
  .sp-page .sp-cards-grid--3,
  .sp-page .sp-services-grid,
  .sp-page .sp-facts-row,
  .sp-page .sp-checklist {
    grid-template-columns: 1fr;
  }

  .sp-page .sp-therapist-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sp-page .sp-therapist {
    flex-direction: column;
  }

  .sp-page .sp-therapist__photo {
    width: 80px;
    height: 96px;
  }

  .sp-page .tgdc-cta-inline {
    flex-direction: column;
    align-items: flex-start;
  }

  .sp-page .sp-step-card {
    padding: 72px 32px 32px 32px;
  }

  .sp-page .sp-step-card__num {
    top: 20px;
    left: 24px;
  }

  /* WT card: span full width of 2-col sidebar grid */
  .sp-wt-card {
    grid-column: 1 / -1;
  }

  /* Strip: tablet — scale down from 90px to 72px */
  .sp-page .sp-strip__photos {
    gap: 20px;
  }
  .sp-page .sp-strip__person {
    width: 100px;
  }
  .sp-page .sp-strip__photo {
    width: 90px;
    height: 90px;
  }
  .sp-page .sp-strip__name {
    font-size: 11px;
  }
}

@media (max-width: 600px) {

  .sp-aside {
    grid-template-columns: 1fr;
  }

  .sp-page .sp-section {
    padding: 32px 20px;
  }

  .sp-zone--intro {
    padding: 30px 0;
  }

  .sp-container {
    padding: 0 20px;
  }

  .sp-page h2 {
    font-size: 24px;
  }

  .sp-page .sp-therapist-grid {
    grid-template-columns: 1fr;
  }

  /* Strip: mobile — scale down from 72px to 60px */
  .sp-page .sp-strip {
    padding: 28px 20px;
  }
  .sp-page .sp-strip__photos {
    gap: 16px;
  }
  .sp-page .sp-strip__person {
    width: 80px;
  }
  .sp-page .sp-strip__photo {
    width: 72px;
    height: 72px;
  }
  .sp-page .sp-strip__name {
    font-size: 10px;
  }

  /* Related articles: single column on mobile */
  .sp-related-articles {
    padding: 32px 20px;
  }
  .sp-related-articles__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Pricing signal: tighter on mobile */
  .sp-page .sp-pricing-signal {
    padding: 40px 20px;
  }
  .sp-page .sp-pricing-signal__card {
    padding: 28px 24px 24px;
  }
  .sp-page .sp-pricing-signal__price {
    font-size: 30px;
  }
}

/* ─── Status-quo guards (2026-06-12, blog elevation) ───
   The elevation removed the v3 global !important referee rules from style.css
   (they fought the new blog component styles). Service pages share these
   components, so these scoped rules preserve the pages' previously-RENDERED
   production look until a deliberate service-page design pass. */
.sp-page .tgdc-numbered-step__badge {
  background: transparent;
  color: #fb9000;
  border: 2px solid #fb9000;
  box-shadow: none;
}
.sp-page .tgdc-icon-callout {
  background: #fafafa;
  border: none;
  border-left: 3px solid #FB9000;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  padding: 32px;
  margin: 48px 0;
}