/* ============================================================
   CONTEXT PAGE — cp-* namespace
   Third-tier page type (context-page design language, Feb 24 2026).
   First instance: /teletherapy-dc/. Component + token source:
   dupont-circle-v2 skeleton / "Teletherapy DC v2" Design frame 1a.

   Fonts map to the theme's tokenized families (fonts.css):
   design serif → --font-display (headings) / --font-body (prose),
   design sans  → --font-ui. Tiempos Headline has no 400 upright,
   so display headings render at 500 (medium).
   ============================================================ */

.cp-page {
  /* Surfaces */
  --cp-cream: #faf8f5;
  --cp-cream-deep: #f3ede6;
  --cp-warm: #f5f0eb;
  --cp-dark: #2a2520;
  --cp-charcoal: #2c2c2c;

  /* Ink */
  --cp-ink: #2a2520;
  --cp-body: #5a5550;
  --cp-muted: #9a938b;
  --cp-ghost: #c5bfb8;

  /* Action + accents */
  --cp-orange: #fb9000;
  --cp-orange-hover: #db7a05;
  --cp-tobacco: #7f6045;
  --cp-teal: #6cc8d7;
  --cp-purple: #9b59b6;
  --cp-green: #4aae8c;
  --cp-terracotta: #e8724a;
  --cp-rose: #d94f6e;
  --cp-rainbow: linear-gradient(90deg, #fb9000, #e8724a, #d94f6e, #9b59b6, #6cc8d7, #4aae8c);

  /* Type */
  --cp-serif: var(--font-body, Georgia, serif);
  --cp-display: var(--font-display, Georgia, serif);
  --cp-sans: var(--font-ui, -apple-system, 'Segoe UI', sans-serif);

  --cp-card-border: 1px solid rgba(0, 0, 0, 0.06);

  background: var(--cp-cream);
  color: var(--cp-ink);
  font-family: var(--cp-serif);
}

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

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

/* ─── Rainbow accent bar ─── */
.cp-rainbow {
  width: 60px;
  height: 3px;
  background: var(--cp-rainbow);
  border-radius: 3px;
}
.cp-rainbow--sm { width: 50px; }

/* ─── Section label (eyebrow) ─── */
.cp-label {
  font-family: var(--cp-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cp-muted);
  margin: 0;
}

/* ─── Breadcrumb ─── */
.cp-breadcrumb {
  padding-top: 20px;
}
.cp-breadcrumb p {
  font-family: var(--cp-sans);
  font-size: 12px;
  color: var(--cp-muted);
  margin: 0;
}
.cp-breadcrumb a {
  color: var(--cp-tobacco);
  text-decoration: none;
}
.cp-breadcrumb a:hover { color: #5e4530; }

/* ─── Buttons ─── */
.cp-btn {
  display: inline-block;
  font-family: var(--cp-sans);
  font-size: 14px;
  font-weight: 600;
  background: var(--cp-orange);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 14px 32px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease;
}
.cp-btn:hover,
.cp-btn:focus {
  background: var(--cp-orange-hover);
  color: #ffffff;
  text-decoration: none;
}
.cp-btn--outline {
  background: none;
  color: var(--cp-ink);
  border: 1px solid var(--cp-ink);
  font-weight: 500;
  padding: 14px 28px;
}
.cp-btn--outline:hover,
.cp-btn--outline:focus {
  background: rgba(42, 37, 32, 0.05);
  color: var(--cp-ink);
}
/* Ghost secondary (homepage hp-btn-secondary treatment) */
.cp-btn--ghost {
  background: transparent;
  color: var(--cp-ink);
  border: 1.5px solid var(--cp-ghost);
  font-weight: 500;
  padding: 13px 24px;
  transition: border-color 0.3s ease;
}
.cp-btn--ghost:hover,
.cp-btn--ghost:focus {
  background: transparent;
  color: var(--cp-ink);
  border-color: #8e979b;
}
.cp-btn--lg {
  font-size: 15px;
  padding: 16px 40px;
}

/* ─── Hero (text-only base + photo variant per frame 2a) ─── */
.cp-hero {
  position: relative;
  overflow: hidden;
}
.cp-hero__inner {
  padding-top: 52px;
  padding-bottom: 64px;
}
.cp-hero .cp-label { margin-top: 16px; }
.cp-hero h1 {
  font-family: var(--cp-display);
  font-size: 40px;
  font-weight: 500;
  color: var(--cp-ink);
  line-height: 1.25;
  margin: 12px 0 0;
  max-width: 680px;
}
.cp-hero h1 .cp-accent { color: var(--cp-orange); }
.cp-hero__lede {
  font-family: var(--cp-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--cp-body);
  max-width: 620px;
  margin: 20px 0 0;
}
.cp-hero__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* Photo hero — homepage warm-gradient surface, text left / photo right */
.cp-hero--photo {
  background: linear-gradient(160deg, #f5f0eb 0%, #e8e0d8 40%, #f5f0eb 100%);
}
.cp-hero--photo .cp-hero__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 40px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 46%;
  gap: 48px;
  align-items: center;
}
.cp-hero--photo .cp-label {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--cp-orange);
  margin-top: 20px;
}
.cp-hero--photo h1 {
  line-height: 1.2;
  margin-top: 16px;
}
.cp-hero--photo .cp-hero__ctas {
  gap: 14px;
  margin-top: 32px;
  align-items: center;
}
.cp-hero--photo .cp-btn { font-size: 15px; padding: 14px 28px; }
.cp-hero--photo .cp-btn--ghost { font-size: 15px; padding: 13px 24px; }
.cp-hero__micro {
  font-family: var(--cp-sans);
  font-size: 13px;
  color: #6b7378;
  margin: 14px 0 0;
}
.cp-avail {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.cp-avail__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cp-sans);
  font-size: 13px;
  color: #6b7378;
}
.cp-avail__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cp-tobacco);
  flex-shrink: 0;
}
.cp-avail__item:first-child .cp-avail__dot { background: var(--cp-green); }
.cp-hero__caption {
  font-family: var(--cp-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--cp-tobacco);
  line-height: 1.6;
  margin: 20px 0 0;
}
.cp-hero__media {
  position: relative;
  height: 520px;
}
.cp-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.cp-hero__scrim {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(42, 37, 32, 0.06) 0%, rgba(42, 37, 32, 0) 30%, rgba(42, 37, 32, 0) 55%, rgba(42, 37, 32, 0.22) 100%),
    radial-gradient(ellipse 120% 100% at 50% 45%, rgba(42, 37, 32, 0) 58%, rgba(42, 37, 32, 0.16) 100%);
}

/* Context switcher pill — signature slot on every context page */
.cp-switcher {
  position: absolute;
  right: 40px;
  top: 72px;
  display: inline-flex;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--cp-ghost);
  border-radius: 999px;
  padding: 4px;
  z-index: 2;
}
.cp-switcher__seg {
  font-family: var(--cp-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cp-ink);
  background: #ffffff;
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: 0 1px 4px rgba(42, 37, 32, 0.12);
  display: flex;
  align-items: center;
  gap: 7px;
}
.cp-switcher__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cp-orange);
}
.cp-switcher__link {
  font-family: var(--cp-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: #6b7378;
  padding: 7px 16px;
  text-decoration: none;
}
.cp-switcher__link:hover { color: var(--cp-ink); }

/* ─── Section wrapper ─── */
.cp-section {
  padding: 72px 0;
}
.cp-section--white { background: #ffffff; }
.cp-section--cream { background: var(--cp-cream); }
.cp-section--warm  { background: var(--cp-warm); }
/* Dark bands: charcoal surface + butterfly-rainbow hairline across the top
   (blog-curtain pattern) — signature slot on context pages */
.cp-section--dark {
  background: var(--cp-charcoal);
  padding: 56px 0;
  position: relative;
}
.cp-section--dark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cp-rainbow);
}

/* In-body links: tobacco with soft underline (kills default blue).
   Scoped to the whole page wrapper so links inside cards, hub cards,
   timeline steps, FAQ answers, and section prose all match; :not([class])
   leaves buttons, card/switcher/chip links and other classed anchors alone.
   .tgdc-auto-link is the site-wide keyword auto-linker (adds a class, so it
   needs an explicit selector) — style it the same as a hand-placed link. */
.cp-page a:not([class]),
.cp-page a.tgdc-auto-link {
  color: var(--cp-tobacco);
  text-decoration: underline;
  text-decoration-color: rgba(127, 96, 69, 0.35);
  text-underline-offset: 3px;
}
.cp-page a:not([class]):hover,
.cp-page a.tgdc-auto-link:hover {
  color: #5e4530;
}
/* Dark bands: keep any bare inline link legible on the charcoal ground */
.cp-section--dark a:not([class]),
.cp-section--dark a.tgdc-auto-link,
.cp-cta a:not([class]),
.cp-cta a.tgdc-auto-link {
  color: var(--cp-teal);
  text-decoration-color: rgba(108, 200, 215, 0.4);
}
.cp-section--dark a:not([class]):hover,
.cp-section--dark a.tgdc-auto-link:hover,
.cp-cta a:not([class]):hover,
.cp-cta a.tgdc-auto-link:hover {
  color: #8fd8e4;
}

.cp-section__rainbow { margin-bottom: 16px; }

.cp-section h2 {
  font-family: var(--cp-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--cp-ink);
  line-height: 1.3;
  margin: 12px 0 0;
}
.cp-section__body > p {
  font-family: var(--cp-serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--cp-body);
  max-width: 620px;
  margin: 12px 0 36px;
}
/* Frame 1a steps framing type down in the grid-heavy sections:
   therapist grid (cream) 15px/mb32, cross-hub (warm) 15px/mb36 */
.cp-section--cream .cp-section__body > p {
  font-size: 15px;
  margin-bottom: 32px;
}
.cp-section--warm .cp-section__body > p {
  font-size: 15px;
}

/* Dark section overrides */
.cp-section--dark .cp-label { color: rgba(255, 255, 255, 0.4); }
.cp-section--dark h2 {
  font-size: 32px;
  color: #ffffff;
}
.cp-section--dark h2 .cp-accent { color: var(--cp-teal); }
.cp-section--dark .cp-section__body > p { color: rgba(255, 255, 255, 0.7); }

/* ─── Card grids (Differentiation / Geographic) ─── */
.cp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cp-card {
  background: var(--cp-cream);
  border-radius: 12px;
  padding: 28px 24px;
  border: var(--cp-card-border);
  border-top: 4px solid var(--cp-muted);
}
.cp-card--orange     { border-top-color: var(--cp-orange); }
.cp-card--teal       { border-top-color: var(--cp-teal); }
.cp-card--purple     { border-top-color: var(--cp-purple); }
.cp-card--green      { border-top-color: var(--cp-green); }
.cp-card--rose       { border-top-color: var(--cp-rose); }
.cp-card--terracotta { border-top-color: var(--cp-terracotta); }
.cp-card h3 {
  font-family: var(--cp-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--cp-ink);
  margin: 0 0 8px;
}
.cp-card p {
  font-family: var(--cp-serif);
  font-size: 14px;
  line-height: 1.65;
  color: var(--cp-body);
  margin: 0;
}

/* Dark (translucent) card variant — Geographic section */
.cp-section--dark .cp-cards {
  gap: 16px;
  margin-bottom: 32px;
}
.cp-section--dark .cp-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-width: 3px;
  border-top-style: solid;
  border-radius: 10px;
  padding: 20px 24px;
}
.cp-section--dark .cp-card--orange     { border-top-color: var(--cp-orange); }
.cp-section--dark .cp-card--teal       { border-top-color: var(--cp-teal); }
.cp-section--dark .cp-card--green      { border-top-color: var(--cp-green); }
.cp-section--dark .cp-card h3 {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}
.cp-section--dark .cp-card p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

/* ─── Link box (sibling context page pointer, dark section) ─── */
.cp-linkbox {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 20px 24px;
  max-width: 680px;
}
.cp-linkbox p {
  font-family: var(--cp-serif);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}
.cp-linkbox__lead {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}
.cp-linkbox a {
  color: var(--cp-teal);
  text-decoration: none;
  border-bottom: 1px solid var(--cp-teal);
}
.cp-linkbox a:hover { opacity: 0.8; }

/* ─── Experiential timeline ─── */
.cp-timeline {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}
.cp-step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  padding-bottom: 36px;
}
.cp-step:last-child { padding-bottom: 0; }
.cp-step__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cp-step__num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cp-cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cp-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--cp-tobacco);
  flex-shrink: 0;
}
.cp-step__line {
  width: 1px;
  flex-grow: 1;
  background: var(--cp-ghost);
  margin-top: 8px;
  opacity: 0.5;
}
.cp-step:last-child .cp-step__line { display: none; }
.cp-step__content { padding-top: 4px; }
.cp-step__content h3 {
  font-family: var(--cp-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--cp-ink);
  margin: 0 0 8px;
}
.cp-step__content p {
  font-family: var(--cp-serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--cp-body);
  margin: 0;
}
.cp-step__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: var(--cp-card-border);
  margin-top: 16px;
}

/* ─── Therapist grid (initial-avatar cards) ─── */
.cp-tgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.cp-tcard {
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  padding: 24px 20px;
  border: var(--cp-card-border);
  transition: border-color 0.2s ease;
}
.cp-tcard:hover { border-color: rgba(0, 0, 0, 0.18); }
.cp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cp-sans);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}
.cp-avatar--photo {
  overflow: hidden;
  padding: 0;
}
.cp-avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
/* Headshots read better a step larger than the 44px initials circle */
.cp-tcard .cp-avatar--photo {
  width: 56px;
  height: 56px;
}
.cp-avatar--orange     { background: rgba(251, 144, 0, 0.08);  border: 2px solid rgba(251, 144, 0, 0.19);  color: var(--cp-orange); }
.cp-avatar--teal       { background: rgba(108, 200, 215, 0.08); border: 2px solid rgba(108, 200, 215, 0.19); color: var(--cp-teal); }
.cp-avatar--purple     { background: rgba(155, 89, 182, 0.08);  border: 2px solid rgba(155, 89, 182, 0.19);  color: var(--cp-purple); }
.cp-avatar--green      { background: rgba(74, 174, 140, 0.08);  border: 2px solid rgba(74, 174, 140, 0.19);  color: var(--cp-green); }
.cp-avatar--rose       { background: rgba(217, 79, 110, 0.08);  border: 2px solid rgba(217, 79, 110, 0.19);  color: var(--cp-rose); }
.cp-avatar--terracotta { background: rgba(232, 114, 74, 0.08);  border: 2px solid rgba(232, 114, 74, 0.19);  color: var(--cp-terracotta); }
.cp-tcard h3 {
  font-family: var(--cp-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--cp-ink);
  margin: 0 0 2px;
}
.cp-tcard__creds {
  font-family: var(--cp-sans);
  font-size: 12px;
  color: var(--cp-muted);
  margin: 0 0 6px;
}
.cp-tcard__tagline {
  font-family: var(--cp-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--cp-body);
  line-height: 1.5;
  margin: 0;
}
.cp-tcard .cp-chips { margin-top: 12px; }

/* Specialty chiclets — homepage tl-card palette, auto-cycling tints */
.cp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cp-chip {
  font-family: var(--cp-sans);
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.cp-chips .cp-chip:nth-child(4n + 1) { color: #a2703d; background: rgba(200, 149, 106, 0.14); }
.cp-chips .cp-chip:nth-child(4n + 2) { color: #4d8888; background: rgba(125, 181, 181, 0.16); }
.cp-chips .cp-chip:nth-child(4n + 3) { color: #7a6588; background: rgba(154, 131, 168, 0.16); }
.cp-chips .cp-chip:nth-child(4n)     { color: #527a5f; background: rgba(125, 168, 138, 0.16); }
/* Stretched link — whole card clickable without <a>-wrapping blocks */
.cp-tcard__link { color: inherit; text-decoration: none; }
.cp-tcard__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ─── Signpost companion panel ───
   Width must match the grid remainder: span 2 when the roster leaves a
   2-cell hole (teletherapy, 10 cards), single cell when it leaves 1
   (Dupont, 8 cards → completes the 3×3). The shortcode's span attr sets
   the modifier; never assume a fixed roster count. */
.cp-signpost {
  position: relative;
  grid-column: span 2;
  border: var(--cp-card-border);
  border-radius: 10px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--cp-warm);
}
.cp-signpost__eyebrow {
  font-family: var(--cp-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cp-tobacco);
  margin: 0 0 8px;
}
.cp-signpost p {
  font-family: var(--cp-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--cp-body);
  margin: 0;
}
.cp-signpost--span1 { grid-column: auto; }
.cp-signpost__link { color: inherit; text-decoration: none; }
.cp-signpost__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ─── Charcoal matching band ─── */
.cp-band {
  margin-top: 48px;
  background: var(--cp-charcoal);
  border-radius: 12px;
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.cp-band__title {
  font-family: var(--cp-serif);
  font-size: 18px;
  color: #ffffff;
  line-height: 1.3;
  margin: 0;
}
.cp-band__text {
  font-family: var(--cp-sans);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 8px 0 0;
}
.cp-band .cp-btn {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 14px 28px;
}

/* ─── Telehealth strip (compact horizontal cards) ─── */
.cp-substrip { margin-top: 40px; }
.cp-substrip .cp-label { letter-spacing: 1.5px; margin-bottom: 8px; }
.cp-substrip__frame {
  font-family: var(--cp-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--cp-body);
  max-width: 620px;
  margin: 0 0 16px;
}
.cp-ministrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.cp-minicard {
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  border: var(--cp-card-border);
  display: flex;
  gap: 14px;
  align-items: center;
  transition: border-color 0.2s ease;
}
.cp-minicard:hover { border-color: rgba(0, 0, 0, 0.18); }
.cp-minicard .cp-avatar {
  width: 40px;
  height: 40px;
  font-size: 12px;
  margin-bottom: 0;
  flex-shrink: 0;
}
.cp-minicard h3 {
  font-family: var(--cp-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--cp-ink);
  margin: 0 0 2px;
}
.cp-minicard__meta {
  font-family: var(--cp-sans);
  font-size: 12px;
  color: var(--cp-muted);
  margin: 0;
}
.cp-minicard__link { color: inherit; text-decoration: none; }
.cp-minicard__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ─── Cross-hub service grid ─── */
.cp-hubgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cp-hubcard {
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  padding: 20px 24px;
  border: var(--cp-card-border);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: border-color 0.2s ease;
}
.cp-hubcard__bar {
  width: 4px;
  height: 40px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 2px;
}
.cp-hubcard--orange .cp-hubcard__bar     { background: var(--cp-orange); }
.cp-hubcard--teal .cp-hubcard__bar       { background: var(--cp-teal); }
.cp-hubcard--purple .cp-hubcard__bar     { background: var(--cp-purple); }
.cp-hubcard--green .cp-hubcard__bar      { background: var(--cp-green); }
.cp-hubcard--rose .cp-hubcard__bar       { background: var(--cp-rose); }
.cp-hubcard--terracotta .cp-hubcard__bar { background: var(--cp-terracotta); }
.cp-hubcard--orange:hover     { border-color: var(--cp-orange); }
.cp-hubcard--teal:hover       { border-color: var(--cp-teal); }
.cp-hubcard--purple:hover     { border-color: var(--cp-purple); }
.cp-hubcard--green:hover      { border-color: var(--cp-green); }
.cp-hubcard--rose:hover       { border-color: var(--cp-rose); }
.cp-hubcard--terracotta:hover { border-color: var(--cp-terracotta); }
.cp-hubcard h3 {
  font-family: var(--cp-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--cp-ink);
  margin: 0 0 4px;
}
.cp-hubcard p {
  font-family: var(--cp-serif);
  font-size: 13px;
  line-height: 1.55;
  color: var(--cp-body);
  margin: 0;
}
.cp-hubcard__link { color: inherit; text-decoration: none; }
.cp-hubcard__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ─── Spoke-chips row (Every specialty travels) ─── */
.cp-chiprow { margin-top: 36px; }
.cp-chiprow .cp-label {
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}
.cp-chiprow__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cp-spoke-chip {
  font-family: var(--cp-sans);
  font-size: 12.5px;
  color: var(--cp-body);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 7px 14px;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.cp-spoke-chip:hover {
  color: var(--cp-ink);
  border-color: rgba(0, 0, 0, 0.22);
  text-decoration: none;
}

/* ─── Practice-insight card (FAQ left column) ─── */
.cp-insight {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--cp-warm);
  border: 1px solid #e5ddd2;
  border-radius: 12px;
  padding: 24px 28px;
  margin-top: 40px;
}
.cp-insight svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.cp-insight__label {
  display: block;
  font-family: var(--cp-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2e7d74;
  margin: 0 0 6px;
}
.cp-insight p {
  font-family: var(--cp-serif);
  font-size: 16px;
  line-height: 1.7;
  color: #5a5a5a;
  margin: 0;
}

/* ─── FAQ (two-column split) ─── */
.cp-faqgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.cp-faqgrid h2 {
  font-family: var(--cp-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--cp-ink);
  line-height: 1.3;
  margin: 16px 0 12px;
}
.cp-faq__lede {
  font-family: var(--cp-serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--cp-body);
  margin: 0;
}
.cp-faq {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 18px 0;
}
.cp-faq summary {
  font-family: var(--cp-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--cp-ink);
  line-height: 1.4;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  list-style: none;
  transition: color 0.2s ease;
}
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary::after {
  content: "+";
  font-family: var(--cp-sans);
  font-size: 20px;
  color: var(--cp-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.cp-faq[open] summary { color: var(--cp-orange); }
.cp-faq[open] summary::after { transform: rotate(45deg); }
.cp-faq__a {
  font-family: var(--cp-serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--cp-body);
  margin-top: 12px;
  padding-right: 32px;
}
.cp-faq__a p { margin: 0 0 12px; }
.cp-faq__a p:last-child { margin-bottom: 0; }

/* ─── Bottom CTA (charcoal, centered, curtain hairline) ─── */
.cp-cta {
  padding: 64px 0;
  background: var(--cp-charcoal);
  text-align: center;
  position: relative;
}
.cp-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cp-rainbow);
}
.cp-cta__lead {
  font-family: var(--cp-serif);
  font-size: 16px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 16px;
}
.cp-cta h2 {
  font-family: var(--cp-display);
  font-size: 32px;
  font-weight: 500;
  color: #fbf8f2;
  margin: 0 0 12px;
}
.cp-cta__body {
  font-family: var(--cp-serif);
  font-size: 16.5px;
  color: #cfc8bd;
  max-width: 460px;
  margin: 0 auto 28px;
  line-height: 1.65;
}
.cp-cta__micro {
  font-family: var(--cp-sans);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  margin: 12px 0 0;
}

/* Pay-card (homepage hp-cred__pay-card treatment) */
.cp-paycard {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  padding: 22px 30px;
  margin-top: 36px;
  text-align: left;
}
.cp-paycard__label {
  font-family: var(--cp-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}
.cp-paycard__amount {
  font-family: var(--cp-serif);
  font-size: 24px;
  font-weight: 500;
  color: #ffffff;
}
.cp-paycard__detail {
  font-family: var(--cp-serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  margin-top: 2px;
}
.cp-paycard__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}
.cp-paycard__rates {
  font-family: var(--cp-sans);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}
.cp-paycard__note {
  font-family: var(--cp-serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
  margin-top: 5px;
}

/* ============================================================
   RESPONSIVE — theme convention: grids collapse 3→2→1,
   FAQ stacks left over right.
   ============================================================ */

@media (max-width: 900px) {
  .cp-hero h1 { font-size: 34px; }
  .cp-section--dark h2 { font-size: 28px; }
  .cp-hero--photo .cp-hero__wrap {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 30px 48px;
  }
  .cp-hero__media { height: 380px; }
  .cp-switcher {
    position: static;
    margin: 20px 30px 0;
  }
  .cp-cards,
  .cp-tgrid,
  .cp-ministrip {
    grid-template-columns: 1fr 1fr;
  }
  .cp-faqgrid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 600px) {
  .cp-container { padding: 0 20px; }
  .cp-section { padding: 48px 0; }
  .cp-hero__inner { padding-top: 36px; padding-bottom: 48px; }
  .cp-hero h1 { font-size: 30px; }
  .cp-section h2 { font-size: 24px; }
  .cp-section--dark h2 { font-size: 25px; }
  .cp-cards,
  .cp-tgrid,
  .cp-ministrip,
  .cp-hubgrid {
    grid-template-columns: 1fr;
  }
  .cp-signpost { grid-column: 1 / -1; }
  .cp-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .cp-step { grid-template-columns: 52px 1fr; gap: 14px; }
  .cp-cta { padding: 48px 0; }
  .cp-hero__media { height: 300px; }
  .cp-paycard {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .cp-paycard__divider { display: none; }
}