/*
 * TherapyBuilt — design-presets.css
 *
 * Three coordinated visual systems. The active preset is exposed as a body
 * class by both Core and the theme. Preset rules intentionally carry enough
 * specificity to override older component CSS that still contains fixed
 * radii, borders, backgrounds, or shadows.
 */

/* -------------------------------------------------------------------------
 * Preset tokens
 * ------------------------------------------------------------------------- */
body.tb-visual-style--soft-modern {
  --tb-radius-control: 10px;
  --tb-radius-button: 10px;
  --tb-radius-card: 18px;
  --tb-radius-panel: 24px;
  --tb-radius-image: 16px;
  --tb-card-border-width: 1px;
  --tb-card-background: var(--tb-bg, #faf9f6);
  --tb-card-shadow: 0 10px 30px rgba(31,45,36,.07);
  --tb-card-hover-shadow: 0 16px 38px rgba(31,45,36,.12);
  --tb-panel-shadow: 0 22px 70px rgba(15,23,42,.16);
  --tb-button-shadow: 0 10px 24px rgba(15,23,42,.16);
  --tb-card-hover-lift: -2px;
  --tb-directory-background: linear-gradient(180deg, color-mix(in srgb, var(--tb-bg,#f6f0ec) 86%, var(--tb-surface,#f2efe9)) 0%, color-mix(in srgb, var(--tb-surface,#f6f2ee) 72%, var(--tb-bg,#faf9f6)) 100%);
  --tb-panel-background: var(--tb-bg, #faf9f6);
  --tb-panel-border: color-mix(in srgb, var(--tb-primary,#5a7a5e) 15%, rgba(0,0,0,.08));
}

body.tb-visual-style--editorial {
  --tb-radius-control: 3px;
  --tb-radius-button: 3px;
  --tb-radius-card: 0px;
  --tb-radius-panel: 0px;
  --tb-radius-image: 2px;
  --tb-card-border-width: 0px;
  --tb-card-background: transparent;
  --tb-card-shadow: none;
  --tb-card-hover-shadow: none;
  --tb-panel-shadow: none;
  --tb-button-shadow: none;
  --tb-card-hover-lift: 0px;
  --tb-directory-background: var(--tb-bg, #faf9f6);
  --tb-panel-background: transparent;
  --tb-panel-border: var(--tb-border, #dfe5e0);
}

body.tb-visual-style--framed {
  --tb-radius-control: 6px;
  --tb-radius-button: 6px;
  --tb-radius-card: 10px;
  --tb-radius-panel: 12px;
  --tb-radius-image: 8px;
  --tb-card-border-width: 1px;
  --tb-card-background: var(--tb-bg, #faf9f6);
  --tb-card-shadow: 0 2px 10px rgba(31,45,36,.05);
  --tb-card-hover-shadow: 0 5px 16px rgba(31,45,36,.09);
  --tb-panel-shadow: 0 12px 38px rgba(15,23,42,.12);
  --tb-button-shadow: 0 4px 12px rgba(15,23,42,.12);
  --tb-card-hover-lift: -1px;
  --tb-directory-background: var(--tb-surface, #f3f5f3);
  --tb-panel-background: var(--tb-bg, #faf9f6);
  --tb-panel-border: var(--tb-border-dark, var(--tb-border, #cbd4cd));
}

body[class*="tb-visual-style--"] {
  --radius-sm: var(--tb-radius-control, 6px);
  --radius-md: var(--tb-radius-control, 10px);
  --radius-lg: var(--tb-radius-card, 18px);
  --radius-xl: var(--tb-radius-card, 18px);
  --radius-2xl: var(--tb-radius-panel, 24px);
  --tb-radius-sm: var(--tb-radius-control, 6px);
  --tb-radius-md: var(--tb-radius-control, 10px);
  --tb-radius-lg: var(--tb-radius-card, 18px);
  --tb-card: var(--tb-card-background, var(--tb-bg, #faf9f6));
}

/* -------------------------------------------------------------------------
 * Shared controls and actions
 * ------------------------------------------------------------------------- */
body[class*="tb-visual-style--"] :where(
  .tb-btn,
  .tb-nav__cta,
  .tb-section-cta a,
  .tb-location-info-card__cta,
  .tb-program-single__cta,
  .tb-locations-telehealth > a,
  .tb-contact-page button,
  .tb-contact-page input[type="submit"],
  .tb-intake-form button,
  .tb-intake-form input[type="submit"],
  .tb-contact-form button,
  .tb-contact-form input[type="submit"],
  .tb-clinician-card__cta,
  .tb-attr-archive__jump-btn,
  .tb-specialty-archive__jump-btn
) {
  border-radius: var(--tb-radius-button, 10px) !important;
}


/* -------------------------------------------------------------------------
 * Canonical action system
 *
 * Every primary action uses the same geometry, palette role, hover behavior,
 * focus treatment, and icon sizing. Component classes may still control
 * placement or width, but they no longer invent a separate button design.
 * ------------------------------------------------------------------------- */
body[class*="tb-visual-style--"] .tb-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px;
  padding: 11px 22px !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--tb-radius-button, 10px) !important;
  font-size: .9375rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transform: translateY(0);
  transition:
    background-color var(--transition-fast, 160ms ease),
    border-color var(--transition-fast, 160ms ease),
    color var(--transition-fast, 160ms ease),
    box-shadow var(--transition-fast, 160ms ease),
    transform var(--transition-fast, 160ms ease) !important;
}

body[class*="tb-visual-style--"] .tb-btn svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

body[class*="tb-visual-style--"] .tb-btn--primary {
  background: var(--tb-action, var(--tb-primary, #5a7a5e)) !important;
  border-color: var(--tb-action, var(--tb-primary, #5a7a5e)) !important;
  color: var(--tb-on-action, #fff) !important;
  box-shadow: var(--tb-button-shadow, none) !important;
}

body[class*="tb-visual-style--"] .tb-btn--primary:hover,
body[class*="tb-visual-style--"] .tb-btn--primary:focus-visible {
  background: var(--tb-action-hover, var(--tb-primary-dark, #3f5941)) !important;
  border-color: var(--tb-action-hover, var(--tb-primary-dark, #3f5941)) !important;
  color: var(--tb-on-action, #fff) !important;
}

body[class*="tb-visual-style--"] .tb-btn--secondary,
body[class*="tb-visual-style--"] .tb-btn--outline {
  background: transparent !important;
  border-color: var(--tb-brand-on-bg, var(--tb-primary, #5a7a5e)) !important;
  color: var(--tb-brand-on-bg, var(--tb-primary, #5a7a5e)) !important;
  box-shadow: none !important;
}

body[class*="tb-visual-style--"] .tb-btn--secondary:hover,
body[class*="tb-visual-style--"] .tb-btn--secondary:focus-visible,
body[class*="tb-visual-style--"] .tb-btn--outline:hover,
body[class*="tb-visual-style--"] .tb-btn--outline:focus-visible {
  background: var(--tb-action, var(--tb-primary, #5a7a5e)) !important;
  border-color: var(--tb-action, var(--tb-primary, #5a7a5e)) !important;
  color: var(--tb-on-action, #fff) !important;
}

body[class*="tb-visual-style--"] .tb-btn--ghost {
  background: transparent !important;
  border-color: var(--tb-border-dark, var(--tb-border, #d4dad5)) !important;
  color: var(--tb-on-bg, var(--tb-text, #3d4039)) !important;
  box-shadow: none !important;
}

body[class*="tb-visual-style--"] .tb-btn--ghost:hover,
body[class*="tb-visual-style--"] .tb-btn--ghost:focus-visible {
  background: color-mix(in srgb, var(--tb-primary, #5a7a5e) 9%, transparent) !important;
  border-color: var(--tb-brand-on-bg, var(--tb-primary, #5a7a5e)) !important;
  color: var(--tb-brand-on-bg, var(--tb-primary, #5a7a5e)) !important;
}

body[class*="tb-visual-style--"] .tb-btn:hover {
  transform: translateY(-1px);
}

body[class*="tb-visual-style--"] .tb-btn:active {
  transform: translateY(0);
  box-shadow: none !important;
}

body[class*="tb-visual-style--"] .tb-btn:focus-visible {
  outline: 3px solid var(--tb-focus-ring, var(--tb-primary-dark, #3f5941));
  outline-offset: 3px;
}

body[class*="tb-visual-style--"] .tb-btn--sm {
  min-height: 36px;
  padding: 8px 14px !important;
  font-size: .8125rem !important;
}

body[class*="tb-visual-style--"] .tb-btn--lg {
  min-height: 50px;
  padding: 14px 28px !important;
  font-size: 1rem !important;
}

/* Context changes color role, never geometry. Primary actions remain primary
 * everywhere, but invert on dark or photographic surfaces so the hierarchy
 * stays obvious and contrast-safe. */
body[class*="tb-visual-style--"] :where(
  .tb-section--surface-emphasis,
  .tb-section--highlight,
  .tb-about--bg-brand,
  .tb-about--full-bleed,
  .tb-section-cta--contextual,
  .tb-footer-cta,
  .tb-footer--surface-emphasis,
  .tb-hero-loc
) .tb-btn--primary,
body[class*="tb-visual-style--"] .tb-hero:not(.tb-hero--split) .tb-btn--primary {
  background: var(--tb-on-emphasis, #fff) !important;
  border-color: var(--tb-on-emphasis, #fff) !important;
  color: var(--tb-emphasis-start, var(--tb-primary-dark, #3f5941)) !important;
  box-shadow: var(--tb-button-shadow, 0 10px 24px rgba(15,23,42,.16)) !important;
}

body[class*="tb-visual-style--"] :where(
  .tb-section--surface-emphasis,
  .tb-section--highlight,
  .tb-about--bg-brand,
  .tb-about--full-bleed,
  .tb-section-cta--contextual,
  .tb-footer-cta,
  .tb-footer--surface-emphasis,
  .tb-hero-loc
) .tb-btn--primary:hover,
body[class*="tb-visual-style--"] :where(
  .tb-section--surface-emphasis,
  .tb-section--highlight,
  .tb-about--bg-brand,
  .tb-about--full-bleed,
  .tb-section-cta--contextual,
  .tb-footer-cta,
  .tb-footer--surface-emphasis,
  .tb-hero-loc
) .tb-btn--primary:focus-visible,
body[class*="tb-visual-style--"] .tb-hero:not(.tb-hero--split) .tb-btn--primary:hover,
body[class*="tb-visual-style--"] .tb-hero:not(.tb-hero--split) .tb-btn--primary:focus-visible {
  background: var(--tb-on-emphasis, #fff) !important;
  border-color: var(--tb-on-emphasis, #fff) !important;
  color: var(--tb-emphasis-start, var(--tb-primary-dark, #3f5941)) !important;
}

body[class*="tb-visual-style--"] :where(
  .tb-about--bg-brand,
  .tb-about--full-bleed,
  .tb-section-cta--contextual,
  .tb-footer-cta,
  .tb-footer--surface-emphasis,
  .tb-hero-loc
) :where(.tb-btn--secondary, .tb-btn--outline),
body[class*="tb-visual-style--"] .tb-hero:not(.tb-hero--split) :where(.tb-btn--secondary, .tb-btn--outline) {
  background: transparent !important;
  border-color: color-mix(in srgb, var(--tb-on-emphasis, #fff) 78%, transparent) !important;
  color: var(--tb-on-emphasis, #fff) !important;
  box-shadow: none !important;
}

body[class*="tb-visual-style--"] :where(
  .tb-about--bg-brand,
  .tb-about--full-bleed,
  .tb-section-cta--contextual,
  .tb-footer-cta,
  .tb-footer--surface-emphasis,
  .tb-hero-loc
) :where(.tb-btn--secondary, .tb-btn--outline):hover,
body[class*="tb-visual-style--"] :where(
  .tb-about--bg-brand,
  .tb-about--full-bleed,
  .tb-section-cta--contextual,
  .tb-footer-cta,
  .tb-footer--surface-emphasis,
  .tb-hero-loc
) :where(.tb-btn--secondary, .tb-btn--outline):focus-visible,
body[class*="tb-visual-style--"] .tb-hero:not(.tb-hero--split) :where(.tb-btn--secondary, .tb-btn--outline):hover,
body[class*="tb-visual-style--"] .tb-hero:not(.tb-hero--split) :where(.tb-btn--secondary, .tb-btn--outline):focus-visible {
  background: var(--tb-on-emphasis, #fff) !important;
  border-color: var(--tb-on-emphasis, #fff) !important;
  color: var(--tb-emphasis-start, var(--tb-primary-dark, #3f5941)) !important;
}

/* Spotlight clinician panel is photographic on desktop and a light card on
 * smaller screens. The same primary action automatically follows that context. */
@media (min-width: 901px) {
  body[class*="tb-visual-style--"] .tb-hero-clin-spotlight .tb-btn--primary {
    background: var(--tb-on-emphasis, #fff) !important;
    border-color: var(--tb-on-emphasis, #fff) !important;
    color: var(--tb-emphasis-start, var(--tb-primary-dark, #3f5941)) !important;
  }

  body[class*="tb-visual-style--"] .tb-hero-clin-spotlight .tb-btn--primary:hover,
  body[class*="tb-visual-style--"] .tb-hero-clin-spotlight .tb-btn--primary:focus-visible {
    background: var(--tb-on-emphasis, #fff) !important;
    border-color: var(--tb-on-emphasis, #fff) !important;
    color: var(--tb-emphasis-start, var(--tb-primary-dark, #3f5941)) !important;
  }
}

/* Light cards placed inside emphasis sections are their own context. Do not
 * inherit the inverted action palette from the surrounding section. */
body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight)
  :where(.tb-client-start-card, .tb-home-resource-card, .tb-testimonial-card) .tb-btn--primary {
  background: var(--tb-action, var(--tb-primary, #5a7a5e)) !important;
  border-color: var(--tb-action, var(--tb-primary, #5a7a5e)) !important;
  color: var(--tb-on-action, #fff) !important;
}

body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight)
  :where(.tb-client-start-card, .tb-home-resource-card, .tb-testimonial-card) .tb-btn--primary:hover,
body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight)
  :where(.tb-client-start-card, .tb-home-resource-card, .tb-testimonial-card) .tb-btn--primary:focus-visible {
  background: var(--tb-action-hover, var(--tb-primary-dark, #3f5941)) !important;
  border-color: var(--tb-action-hover, var(--tb-primary-dark, #3f5941)) !important;
  color: var(--tb-on-action, #fff) !important;
}

/* The compact booking panel sits on a dark branded hero surface. Keep its
 * secondary action contextual and contrast-safe without inventing a new
 * geometry or interaction pattern. */
body[class*="tb-visual-style--"] .tb-hero-booknow__cta.tb-btn--secondary {
  background: color-mix(in srgb, var(--tb-on-emphasis, #fff) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--tb-on-emphasis, #fff) 72%, transparent) !important;
  color: var(--tb-on-emphasis, #fff) !important;
}

body[class*="tb-visual-style--"] .tb-hero-booknow__cta.tb-btn--secondary:hover,
body[class*="tb-visual-style--"] .tb-hero-booknow__cta.tb-btn--secondary:focus-visible {
  background: var(--tb-on-emphasis, #fff) !important;
  border-color: var(--tb-on-emphasis, #fff) !important;
  color: var(--tb-emphasis-start, var(--tb-primary-dark, #3f5941)) !important;
}

body[class*="tb-visual-style--"] .tb-btn[aria-disabled="true"],
body[class*="tb-visual-style--"] .tb-btn:disabled {
  opacity: .58;
  cursor: not-allowed;
  transform: none;
  box-shadow: none !important;
}

body[class*="tb-visual-style--"] :where(
  .tb-section--surface-emphasis,
  .tb-section--highlight,
  .tb-about--bg-brand,
  .tb-about--full-bleed,
  .tb-section-cta--contextual,
  .tb-footer-cta,
  .tb-footer--surface-emphasis,
  .tb-hero-loc,
  .tb-hero:not(.tb-hero--split)
) .tb-btn:focus-visible {
  outline-color: color-mix(in srgb, var(--tb-on-emphasis, #fff) 72%, transparent);
}

/* Compact card actions remain visually identical to the global action system.
 * On touch-sized viewports they regain a full 44px target and may span the
 * card width when that prevents cramped labels or uneven rows. */
@media (max-width: 767px) {
  body[class*="tb-visual-style--"] .tb-btn--sm {
    min-height: 44px;
    padding: 10px 16px !important;
  }
}

@media (max-width: 520px) {
  body[class*="tb-visual-style--"] :where(
    .tb-clinician-card__footer,
    .tb-section-cta__actions,
    .tb-hero__actions,
    .tb-contact-cta__inner
  ) {
    width: 100%;
  }

  body[class*="tb-visual-style--"] .tb-clinician-card__footer {
    align-items: stretch;
    flex-wrap: wrap;
  }

  body[class*="tb-visual-style--"] :where(
    .tb-clinician-card__cta,
    .tb-services__clinician-card-cta,
    .tb-section-cta__actions .tb-btn,
    .tb-contact-cta__btn
  ) {
    width: 100%;
  }
}

/* Standalone outlined actions on dark emphasis surfaces use the same button
 * geometry with the section's contrast-safe foreground. Cards within those
 * sections retain the ordinary light-surface secondary treatment. */
body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight)
  :where(.tb-btn--secondary, .tb-btn--outline) {
  border-color: var(--tb-on-emphasis, #fff) !important;
  color: var(--tb-on-emphasis, #fff) !important;
}

body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight)
  :where(.tb-btn--secondary, .tb-btn--outline):hover,
body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight)
  :where(.tb-btn--secondary, .tb-btn--outline):focus-visible {
  background: var(--tb-on-emphasis, #fff) !important;
  border-color: var(--tb-on-emphasis, #fff) !important;
  color: var(--tb-emphasis-start, var(--tb-primary-dark, #3f5941)) !important;
}

body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight)
  :where(.tb-client-start-card, .tb-home-resource-card, .tb-testimonial-card) :where(.tb-btn--secondary, .tb-btn--outline) {
  background: transparent !important;
  border-color: var(--tb-brand-on-bg, var(--tb-primary, #5a7a5e)) !important;
  color: var(--tb-brand-on-bg, var(--tb-primary, #5a7a5e)) !important;
}

body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight)
  :where(.tb-client-start-card, .tb-home-resource-card, .tb-testimonial-card) :where(.tb-btn--secondary, .tb-btn--outline):hover,
body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight)
  :where(.tb-client-start-card, .tb-home-resource-card, .tb-testimonial-card) :where(.tb-btn--secondary, .tb-btn--outline):focus-visible {
  background: var(--tb-action, var(--tb-primary, #5a7a5e)) !important;
  border-color: var(--tb-action, var(--tb-primary, #5a7a5e)) !important;
  color: var(--tb-on-action, #fff) !important;
}

body[class*="tb-visual-style--"] :where(
  .tb-form-input,
  .tb-contact-page input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  .tb-contact-page select,
  .tb-contact-page textarea,
  .tb-intake-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  .tb-intake-form select,
  .tb-intake-form textarea,
  .tb-contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  .tb-contact-form select,
  .tb-contact-form textarea
) {
  border-radius: var(--tb-radius-control, 10px) !important;
}

/* -------------------------------------------------------------------------
 * Shared cards, panels, and media
 * ------------------------------------------------------------------------- */
body[class*="tb-visual-style--"] :where(
  .tb-value-card,
  .tb-service-card,
  .tb-clinician-card,
  .tb-staff-card,
  .tb-testimonial-card,
  .tb-wte-card,
  .tb-resource-card,
  .tb-home-resource-card,
  .tb-client-start-card,
  .tb-location-card,
  .tb-location-info-card,
  .tb-location-clinician,
  .tb-location-programs li > a,
  .tb-program-card,
  .tb-program-info-card,
  .tb-fallback-card,
  .tb-contact-page__location-card,
  .tb-legal-hub__item,
  .tb-location-single__note-grid > div,
  .tb-dir-spec-card,
  .tb-services-notsure__inner
) {
  border-width: var(--tb-card-border-width, 1px) !important;
  border-style: solid;
  border-color: var(--tb-panel-border, var(--tb-border, #dfe5e0));
  border-radius: var(--tb-radius-card, 18px) !important;
  background: var(--tb-card-background, var(--tb-bg, #faf9f6));
  box-shadow: var(--tb-card-shadow, none) !important;
}

body[class*="tb-visual-style--"] :where(
  .tb-contact-form-wrap,
  .tb-contact-page__locations-panel,
  .tb-contact-page__map-panel,
  .tb-location-single__map-frame,
  .tb-locations-page__intro,
  .tb-programs-page__intro,
  .tb-legal-hub__intro,
  .tb-legal-hub__notice,
  .tb-locations-telehealth,
  .tb-resource-disclaimer,
  .tb-resource-empty,
  .tb-locations-empty,
  .tb-programs-empty
) {
  border-radius: var(--tb-radius-panel, 24px) !important;
}

body[class*="tb-visual-style--"] :where(
  .tb-clinician-card__photo,
  .tb-location-single__image,
  .tb-program-single__image,
  .tb-about-page img,
  .tb-page-content img:not(.custom-logo):not(.avatar),
  .tb-location-single__map-frame,
  .tb-location-map
) {
  border-radius: var(--tb-radius-image, 16px) !important;
}

body[class*="tb-visual-style--"] :where(
  .tb-service-card,
  .tb-clinician-card,
  .tb-resource-card,
  .tb-location-card,
  .tb-program-card,
  .tb-home-resource-card
) {
  transition: transform var(--transition-base, 250ms ease), box-shadow var(--transition-base, 250ms ease), border-color var(--transition-base, 250ms ease);
}

body[class*="tb-visual-style--"] :where(
  .tb-service-card,
  .tb-clinician-card,
  .tb-resource-card,
  .tb-location-card,
  .tb-program-card,
  .tb-home-resource-card
):hover {
  transform: translateY(var(--tb-card-hover-lift, 0));
  box-shadow: var(--tb-card-hover-shadow, var(--tb-card-shadow, none)) !important;
}

/* -------------------------------------------------------------------------
 * Clinician attribute / therapy-format directory pages
 * These templates previously used fixed values that masked the presets.
 * ------------------------------------------------------------------------- */
body[class*="tb-visual-style--"] .tb-attr-archive {
  background: var(--tb-directory-background) !important;
}

body[class*="tb-visual-style--"] .tb-attr-archive__intro,
body[class*="tb-visual-style--"] .tb-attr-archive__providers {
  border-radius: var(--tb-radius-panel, 24px) !important;
  background: var(--tb-panel-background, var(--tb-bg, #faf9f6)) !important;
  border-color: var(--tb-panel-border, var(--tb-border, #dfe5e0)) !important;
  box-shadow: var(--tb-card-shadow, none) !important;
}

body[class*="tb-visual-style--"] .tb-clinician-card {
  border-radius: var(--tb-radius-card, 18px) !important;
  border-color: var(--tb-panel-border, var(--tb-border, #dfe5e0)) !important;
  background: var(--tb-card-background, var(--tb-bg, #faf9f6)) !important;
  box-shadow: var(--tb-card-shadow, none) !important;
}

body[class*="tb-visual-style--"] .tb-specialty-archive {
  background: var(--tb-directory-background) !important;
}

body[class*="tb-visual-style--"] .tb-specialty-archive__intro,
body[class*="tb-visual-style--"] .tb-specialty-archive__providers {
  border-radius: var(--tb-radius-panel, 24px) !important;
  background: var(--tb-panel-background, var(--tb-bg, #faf9f6)) !important;
  border-color: var(--tb-panel-border, var(--tb-border, #dfe5e0)) !important;
  box-shadow: var(--tb-card-shadow, none) !important;
}

body[class*="tb-visual-style--"] .tb-dir-spec-card,
body[class*="tb-visual-style--"] .tb-services-notsure__inner {
  border-radius: var(--tb-radius-card, 18px) !important;
  border-color: var(--tb-panel-border, var(--tb-border, #dfe5e0)) !important;
  box-shadow: var(--tb-card-shadow, none) !important;
}

/* -------------------------------------------------------------------------
 * Soft Modern — welcoming, rounded, and lightly elevated.
 * ------------------------------------------------------------------------- */
body.tb-visual-style--soft-modern :where(
  .tb-service-card,
  .tb-clinician-card,
  .tb-resource-card,
  .tb-location-card,
  .tb-program-card,
  .tb-home-resource-card
) {
  overflow: hidden;
}

body.tb-visual-style--soft-modern .tb-attr-archive__intro,
body.tb-visual-style--soft-modern .tb-specialty-archive__intro {
  border-left: 5px solid var(--tb-primary, #5a7a5e) !important;
}

/* -------------------------------------------------------------------------
 * Editorial — open layouts, deliberate rules, and no floating-card effect.
 * ------------------------------------------------------------------------- */
body.tb-visual-style--editorial :where(
  .tb-value-card,
  .tb-service-card,
  .tb-clinician-card,
  .tb-staff-card,
  .tb-testimonial-card,
  .tb-wte-card,
  .tb-resource-card,
  .tb-home-resource-card,
  .tb-client-start-card,
  .tb-location-card,
  .tb-location-clinician,
  .tb-location-programs li > a,
  .tb-program-card,
  .tb-fallback-card,
  .tb-contact-page__location-card,
  .tb-legal-hub__item
) {
  border: 0 !important;
  border-bottom: 1px solid var(--tb-border, #dfe5e0) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

body.tb-visual-style--editorial :where(
  .tb-service-card,
  .tb-value-card,
  .tb-wte-card,
  .tb-resource-card,
  .tb-home-resource-card,
  .tb-client-start-card,
  .tb-location-clinician,
  .tb-location-programs li > a,
  .tb-fallback-card,
  .tb-contact-page__location-card,
  .tb-legal-hub__item
) {
  padding-left: 0;
  padding-right: 0;
}

body.tb-visual-style--editorial :where(
  .tb-service-card,
  .tb-clinician-card,
  .tb-resource-card,
  .tb-location-card,
  .tb-program-card,
  .tb-home-resource-card
):hover {
  transform: none;
  box-shadow: none !important;
  border-bottom-color: var(--tb-primary, #5a7a5e) !important;
}

body.tb-visual-style--editorial :where(
  .tb-locations-page__intro,
  .tb-programs-page__intro,
  .tb-legal-hub__intro
) {
  padding-left: 0;
  padding-right: 0;
  border: 0 !important;
  border-top: 1px solid var(--tb-border, #dfe5e0) !important;
  border-bottom: 1px solid var(--tb-border, #dfe5e0) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.tb-visual-style--editorial .tb-attr-archive__intro,
body.tb-visual-style--editorial .tb-attr-archive__providers {
  padding-left: 0;
  padding-right: 0;
  border: 0 !important;
  border-top: 1px solid var(--tb-border, #dfe5e0) !important;
  border-bottom: 1px solid var(--tb-border, #dfe5e0) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.tb-visual-style--editorial .tb-attr-archive__intro,
body.tb-visual-style--editorial .tb-specialty-archive__intro {
  border-left: 0 !important;
}

body.tb-visual-style--editorial .tb-specialty-archive__intro,
body.tb-visual-style--editorial .tb-specialty-archive__providers {
  padding-left: 0;
  padding-right: 0;
  border: 0 !important;
  border-top: 1px solid var(--tb-border, #dfe5e0) !important;
  border-bottom: 1px solid var(--tb-border, #dfe5e0) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.tb-visual-style--editorial .tb-dir-spec-card,
body.tb-visual-style--editorial .tb-services-notsure__inner {
  border: 0 !important;
  border-bottom: 1px solid var(--tb-border, #dfe5e0) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.tb-visual-style--editorial .tb-clinician-card {
  border: 0 !important;
  border-top: 1px solid var(--tb-border, #dfe5e0) !important;
  border-bottom: 1px solid var(--tb-border, #dfe5e0) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

body.tb-visual-style--editorial :where(
  .tb-clinician-card__photo-wrap,
  .tb-location-card__media,
  .tb-program-card__image-wrap
) {
  border-radius: var(--tb-radius-image, 2px) !important;
  overflow: hidden;
}

body.tb-visual-style--editorial .tb-testimonial-card__quote::before,
body.tb-visual-style--editorial .tb-testimonial-card__quote::after {
  opacity: .42;
}

/* -------------------------------------------------------------------------
 * Framed — clear structure, visible borders, and restrained elevation.
 * ------------------------------------------------------------------------- */
body.tb-visual-style--framed :where(
  .tb-value-card,
  .tb-service-card,
  .tb-clinician-card,
  .tb-staff-card,
  .tb-testimonial-card,
  .tb-wte-card,
  .tb-resource-card,
  .tb-home-resource-card,
  .tb-client-start-card,
  .tb-location-card,
  .tb-location-info-card,
  .tb-location-clinician,
  .tb-location-programs li > a,
  .tb-program-card,
  .tb-program-info-card,
  .tb-fallback-card,
  .tb-contact-page__location-card,
  .tb-legal-hub__item
) {
  border-color: var(--tb-border-dark, var(--tb-border, #d3d9d4)) !important;
}

body.tb-visual-style--framed :where(
  .tb-locations-page__intro,
  .tb-programs-page__intro,
  .tb-legal-hub__intro,
  .tb-contact-form-wrap,
  .tb-contact-page__locations-panel,
  .tb-contact-page__map-panel
) {
  border: 1px solid var(--tb-border-dark, var(--tb-border, #d3d9d4)) !important;
  border-radius: var(--tb-radius-panel, 12px) !important;
  background: var(--tb-bg, #faf9f6);
  box-shadow: var(--tb-card-shadow, none) !important;
}

body.tb-visual-style--framed .tb-attr-archive__intro,
body.tb-visual-style--framed .tb-attr-archive__providers,
body.tb-visual-style--framed .tb-specialty-archive__intro,
body.tb-visual-style--framed .tb-specialty-archive__providers {
  border: 1px solid var(--tb-border-dark, var(--tb-border, #d3d9d4)) !important;
  border-left-width: 1px !important;
  background: var(--tb-bg, #faf9f6) !important;
  box-shadow: var(--tb-card-shadow, none) !important;
}

body.tb-visual-style--framed :where(
  .tb-clinician-card,
  .tb-location-card,
  .tb-program-card,
  .tb-resource-card
) {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  body[class*="tb-visual-style--"] :where(
    .tb-service-card,
    .tb-clinician-card,
    .tb-resource-card,
    .tb-location-card,
    .tb-program-card,
    .tb-home-resource-card
  ) {
    transition: none;
  }
}




/* -------------------------------------------------------------------------
 * Component completion
 *
 * These newer homepage components previously carried their own card
 * treatments and were not included in the original preset selector map.
 * Keeping them on the same tokens makes the homepage read as one designed
 * system rather than a collection of independently styled modules.
 * ------------------------------------------------------------------------- */
body[class*="tb-visual-style--"] :where(
  .tb-services__card,
  .tb-services__detail-card,
  .tb-services__clinician-card,
  .tb-fees-home__card,
  .tb-location__office-card,
  .tb-wte__card
) {
  border-width: var(--tb-card-border-width, 1px) !important;
  border-style: solid !important;
  border-color: var(--tb-panel-border, var(--tb-border, #dfe5e0)) !important;
  border-radius: var(--tb-radius-card, 18px) !important;
  background: var(--tb-card-background, var(--tb-bg, #faf9f6)) !important;
  box-shadow: var(--tb-card-shadow, none) !important;
  color: var(--tb-on-bg, var(--tb-text, #3d4039));
  transition:
    transform var(--transition-base, 250ms ease),
    box-shadow var(--transition-base, 250ms ease),
    border-color var(--transition-base, 250ms ease);
}

body[class*="tb-visual-style--"] :where(
  .tb-services__card,
  .tb-services__detail-card,
  .tb-services__clinician-card,
  .tb-fees-home__card,
  .tb-location__office-card,
  .tb-wte__card
):hover {
  transform: translateY(var(--tb-card-hover-lift, 0));
  box-shadow: var(--tb-card-hover-shadow, var(--tb-card-shadow, none)) !important;
}

body.tb-visual-style--soft-modern :where(
  .tb-services__card,
  .tb-services__detail-card,
  .tb-services__clinician-card,
  .tb-fees-home__card,
  .tb-location__office-card,
  .tb-wte__card
) {
  overflow: hidden;
}

body.tb-visual-style--editorial :where(
  .tb-services__card,
  .tb-services__detail-card,
  .tb-services__clinician-card,
  .tb-fees-home__card,
  .tb-location__office-card,
  .tb-wte__card
) {
  border: 0 !important;
  border-bottom: 1px solid var(--tb-border, #dfe5e0) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

body.tb-visual-style--editorial :where(
  .tb-services__card,
  .tb-services__detail-card,
  .tb-services__clinician-card,
  .tb-fees-home__card,
  .tb-location__office-card,
  .tb-wte__card
):hover {
  transform: none;
  box-shadow: none !important;
  border-bottom-color: var(--tb-brand-on-bg, var(--tb-primary, #5a7a5e)) !important;
}

body.tb-visual-style--framed :where(
  .tb-services__card,
  .tb-services__detail-card,
  .tb-services__clinician-card,
  .tb-fees-home__card,
  .tb-location__office-card,
  .tb-wte__card
) {
  border-color: var(--tb-border-dark, var(--tb-border, #d3d9d4)) !important;
}

@media (prefers-reduced-motion: reduce) {
  body[class*="tb-visual-style--"] :where(
    .tb-services__card,
    .tb-services__detail-card,
    .tb-fees-home__card,
    .tb-location__office-card,
    .tb-wte__card
  ) {
    transition: none;
  }
}

/* Mini cards use the same palette and corner language without inheriting the
 * elevation of a full content card. This keeps insurer logos, badges, and
 * compact utility surfaces related to the broader system. */
body[class*="tb-visual-style--"] .tb-fees-home__logo-card {
  border-color: var(--tb-panel-border, var(--tb-border, #dfe5e0)) !important;
  border-radius: var(--tb-radius-control, 10px) !important;
  background: var(--tb-bg, #faf9f6) !important;
  box-shadow: none !important;
}

body[class*="tb-visual-style--"] a.tb-fees-home__logo-card:hover,
body[class*="tb-visual-style--"] a.tb-fees-home__logo-card:focus-visible {
  border-color: var(--tb-brand-on-bg, var(--tb-primary, #5a7a5e)) !important;
  background: color-mix(in srgb, var(--tb-primary, #5a7a5e) 5%, var(--tb-bg, #faf9f6)) !important;
  box-shadow: var(--tb-card-shadow, none) !important;
}

/* -------------------------------------------------------------------------
 * Contrast-safe semantic surfaces
 *
 * Core derives these foreground tokens from the active palette using WCAG
 * contrast math. Keeping the final overrides here ensures legacy component
 * CSS and custom visual presets cannot reintroduce unreadable combinations.
 * ------------------------------------------------------------------------- */
body[class*="tb-visual-style--"] {
  color: var(--tb-on-bg, var(--tb-text, #3d4039));
}

body[class*="tb-visual-style--"] :where(.tb-section--surface, .tb-section--surface-soft, .tb-section--even) {
  color: var(--tb-on-surface, var(--tb-text, #3d4039));
}

body[class*="tb-visual-style--"] :where(.tb-section--surface, .tb-section--surface-soft, .tb-section--even) :where(h1, h2, h3, h4, h5, h6) {
  color: var(--tb-heading-on-surface, var(--tb-heading, #2a2e2a));
}

body[class*="tb-visual-style--"] :where(.tb-section--surface, .tb-section--surface-soft, .tb-section--even) :where(p, li, address) {
  color: var(--tb-on-surface, var(--tb-text, #3d4039));
}

body[class*="tb-visual-style--"] :where(.tb-section--surface, .tb-section--surface-soft, .tb-section--even) :where(.tb-section-intro__body, small) {
  color: var(--tb-muted-on-surface, var(--tb-text-muted, #6b7069));
}

body[class*="tb-visual-style--"] .tb-section--surface-2 :where(h1, h2, h3, h4, h5, h6, p, li, address) {
  color: var(--tb-on-surface-2, var(--tb-text, #3d4039));
}

body[class*="tb-visual-style--"] .tb-section--surface-wash :where(h1, h2, h3, h4, h5, h6, p, li, address) {
  color: var(--tb-on-wash, var(--tb-text, #3d4039));
}

body[class*="tb-visual-style--"] .tb-section--surface-wash :where(.tb-section-intro__body, small) {
  color: var(--tb-muted-on-wash, var(--tb-text-muted, #6b7069));
}

body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight) {
  color: var(--tb-on-emphasis, #fff);
}

body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight) :where(h1, h2, h3, h4, h5, h6, p, li, label, address) {
  color: inherit;
}

body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight) :where(.tb-testimonials__eyebrow, .tb-testimonials__subheadline, .tb-contact__eyebrow, .tb-contact__subheadline, .tb-home-resources__eyebrow) {
  color: var(--tb-muted-on-emphasis, var(--tb-on-emphasis, #fff));
}

body[class*="tb-visual-style--"] .tb-section--surface-emphasis .tb-home-resources__intro :where(h2, p),
body[class*="tb-visual-style--"] .tb-section--highlight :where(.tb-testimonials__headline, .tb-testimonials__subheadline, .tb-testimonials__eyebrow, .tb-contact__headline, .tb-contact__subheadline, .tb-contact__eyebrow) {
  color: var(--tb-on-emphasis, #fff) !important;
}

body[class*="tb-visual-style--"] .tb-section--surface-emphasis .tb-home-resources__intro .tb-home-resources__eyebrow,
body[class*="tb-visual-style--"] .tb-section--highlight :where(.tb-testimonials__subheadline, .tb-testimonials__eyebrow, .tb-contact__subheadline, .tb-contact__eyebrow) {
  color: var(--tb-muted-on-emphasis, var(--tb-on-emphasis, #fff)) !important;
}

/* Testimonial cards must remain readable even when Editorial makes ordinary
   cards transparent. A palette surface is intentionally restored on dark
   emphasis sections. */
body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight) .tb-testimonial-card {
  background: var(--tb-bg, #faf9f6) !important;
  border: 1px solid var(--tb-border-dark, var(--tb-border, #d8d4cc)) !important;
  color: var(--tb-on-bg, var(--tb-text, #3d4039)) !important;
}

body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight) .tb-testimonial-card :where(.tb-testimonial-card__quote, .tb-testimonial-card__name) {
  color: var(--tb-on-bg, var(--tb-text, #3d4039)) !important;
}

body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight) .tb-testimonial-card .tb-testimonial-card__meta {
  color: var(--tb-muted-on-bg, var(--tb-text-muted, #6b7069)) !important;
}

body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight) .tb-testimonial-card :where(.tb-testimonial-card__quote::before, .tb-testimonial-card__rating) {
  color: var(--tb-brand-on-bg, var(--tb-primary, #5a7a5e)) !important;
  opacity: 1;
}

body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight) :where(.tb-client-start-card, .tb-home-resource-card) {
  background: var(--tb-bg, #faf9f6) !important;
  color: var(--tb-on-bg, var(--tb-text, #3d4039)) !important;
}

body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight) :where(.tb-client-start-card, .tb-home-resource-card) :where(h2, h3, p) {
  color: var(--tb-on-bg, var(--tb-text, #3d4039)) !important;
}

body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight) :where(.tb-client-start-card, .tb-home-resource-card) :where(.tb-client-start-card__eyebrow, .tb-home-resource-card__meta, a) {
  color: var(--tb-brand-on-bg, var(--tb-primary, #5a7a5e)) !important;
}

@media (forced-colors: active) {
  body[class*="tb-visual-style--"] :where(.tb-btn, .tb-testimonial-card, .tb-client-start-card, .tb-home-resource-card) {
    forced-color-adjust: auto;
  }
}

/* -------------------------------------------------------------------------
 * Site Layout
 *
 * One broad silhouette choice, intentionally without extra sub-options.
 * The full public site — announcement, header, content, CTA, and footer —
 * becomes one centered object on larger screens. All background colors come
 * from the active TherapyBuilt palette; the PHP style controller provides the
 * derived --tb-site-stage token so the result is stable even where color-mix()
 * support is limited.
 *
 * The frame lives on .tb-site-shell rather than <body>. Viewport overflow is
 * left to the browser, which preserves normal scrolling and scrollbar behavior.
 * ------------------------------------------------------------------------- */
html.tb-site-canvas-root--framed {
  --tb-site-canvas-gutter-y: clamp(34px, 3.4vw, 58px);
  --tb-site-canvas-gutter-x: clamp(18px, 3.5vw, 64px);
  --tb-site-canvas-gutter-y-double: clamp(68px, 6.8vw, 116px);
  --tb-site-canvas-max-width: 1400px;

  min-height: 100%;
  padding:
    calc(var(--tb-site-canvas-gutter-y) + env(safe-area-inset-top, 0px))
    calc(var(--tb-site-canvas-gutter-x) + env(safe-area-inset-right, 0px))
    calc(var(--tb-site-canvas-gutter-y) + env(safe-area-inset-bottom, 0px))
    calc(var(--tb-site-canvas-gutter-x) + env(safe-area-inset-left, 0px));
  overflow-x: clip;
  background-color: var(--tb-surface-2, #e8e4dc);
  background-color: var(--tb-site-stage, var(--tb-surface-2, #e8e4dc));
}

body.tb-site-canvas--framed:not(.tb-client-login-body) {
  --tb-site-canvas-radius: var(--tb-radius-panel, 24px);
  --tb-site-canvas-border: color-mix(in srgb, var(--tb-border-dark, #cfd7d0) 74%, transparent);
  --tb-site-canvas-shadow:
    0 0 0 1px color-mix(in srgb, var(--tb-bg, #faf9f6) 54%, transparent),
    0 12px 34px color-mix(in srgb, var(--tb-heading, #2a2e2a) 8%, transparent),
    0 22px 52px color-mix(in srgb, var(--tb-heading, #2a2e2a) 4%, transparent);

  min-height: calc(100vh - var(--tb-site-canvas-gutter-y-double));
  margin: 0;
  background: transparent;
}

/* Visual Style quietly determines the shell's character. Defaults live on
   the body once, and the shell inherits them; this avoids duplicate variables
   overriding the preset-specific values. */
body.tb-site-canvas--framed.tb-visual-style--soft-modern:not(.tb-client-login-body) {
  --tb-site-canvas-radius: clamp(24px, 2vw, 32px);
  --tb-site-canvas-border: color-mix(in srgb, var(--tb-border-dark, #cfd7d0) 68%, transparent);
  --tb-site-canvas-shadow:
    0 0 0 1px color-mix(in srgb, var(--tb-bg, #faf9f6) 58%, transparent),
    0 12px 36px color-mix(in srgb, var(--tb-heading, #2a2e2a) 8%, transparent),
    0 24px 56px color-mix(in srgb, var(--tb-heading, #2a2e2a) 4%, transparent);
}

body.tb-site-canvas--framed.tb-visual-style--editorial:not(.tb-client-login-body) {
  --tb-site-canvas-radius: 4px;
  --tb-site-canvas-border: color-mix(in srgb, var(--tb-border-dark, #cfd7d0) 88%, transparent);
  --tb-site-canvas-shadow:
    0 0 0 1px color-mix(in srgb, var(--tb-bg, #faf9f6) 44%, transparent),
    0 14px 38px color-mix(in srgb, var(--tb-heading, #2a2e2a) 7%, transparent);
}

body.tb-site-canvas--framed.tb-visual-style--framed:not(.tb-client-login-body) {
  --tb-site-canvas-radius: clamp(12px, 1.2vw, 18px);
  --tb-site-canvas-border: color-mix(in srgb, var(--tb-border-dark, #c4cec6) 94%, transparent);
  --tb-site-canvas-shadow:
    0 0 0 1px color-mix(in srgb, var(--tb-bg, #faf9f6) 48%, transparent),
    0 12px 34px color-mix(in srgb, var(--tb-heading, #2a2e2a) 7%, transparent);
}

body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell {
  width: min(100%, var(--tb-site-canvas-max-width));
  min-height: calc(100vh - var(--tb-site-canvas-gutter-y-double));
  margin: 0 auto;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--tb-bg, #faf9f6);
  background-clip: padding-box;
  border: 1px solid var(--tb-site-canvas-border);
  border-radius: var(--tb-site-canvas-radius);
  box-shadow: var(--tb-site-canvas-shadow);
}

/* Fine inner edge: visible enough to feel crafted, quiet enough for long pages. */
body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1000;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tb-bg, #faf9f6) 82%, var(--tb-surface-2, #e8e4dc) 18%);
  pointer-events: none;
}

/* Header stays visually connected to the shell. Static is the framed-site
   default, while an explicitly selected sticky/smart header still receives a
   restrained translucent treatment. */
body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header {
  background-color: var(--tb-bg, #faf9f6);
  border-bottom-color: color-mix(in srgb, var(--tb-border, #dfe5e0) 76%, transparent);
  box-shadow: none;
}

body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header:not(.tb-header--static) {
  top: var(--tb-site-canvas-gutter-y);
  background-color: color-mix(in srgb, var(--tb-bg, #faf9f6) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

body.admin-bar.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header:not(.tb-header--static) {
  top: calc(32px + var(--tb-site-canvas-gutter-y));
}

body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header.tb-header--transparent {
  border-bottom-color: color-mix(in srgb, var(--tb-border, #dfe5e0) 62%, transparent);
}

body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header.tb-header--scrolled {
  background-color: color-mix(in srgb, var(--tb-bg, #faf9f6) 97%, transparent);
  border-bottom-color: color-mix(in srgb, var(--tb-border-dark, #cfd7d0) 70%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--tb-heading, #2a2e2a) 6%, transparent);
}

body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header--static {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header .tb-header__inner {
  min-height: 68px;
  max-width: calc(var(--container-xl, 1280px) + 48px);
  padding: 9px clamp(20px, 2.8vw, 42px);
}

body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header .tb-nav__link {
  border-radius: var(--tb-radius-button, 10px);
}

body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header :is(
  .tb-nav__item.current-menu-item,
  .tb-nav__item.current-page-ancestor
) > .tb-nav__link {
  background: color-mix(in srgb, var(--tb-primary-light, #d4e5d6) 64%, transparent);
}

body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header :is(
  .tb-nav__sub-menu,
  .tb-nav__more-menu
) {
  background: var(--tb-bg, #faf9f6);
  background: color-mix(in srgb, var(--tb-bg, #faf9f6) 95%, transparent);
  border-color: color-mix(in srgb, var(--tb-border-dark, #cfd7d0) 76%, transparent);
  border-radius: var(--tb-radius-card, 16px);
  box-shadow: 0 16px 42px color-mix(in srgb, var(--tb-heading, #2a2e2a) 12%, transparent);
  backdrop-filter: blur(16px) saturate(1.06);
  -webkit-backdrop-filter: blur(16px) saturate(1.06);
}

body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header .tb-header__cta-wrap .tb-btn {
  box-shadow: var(--tb-button-shadow, 0 8px 20px rgba(24,35,28,.12));
}

/* Attach the first and last surfaces to the shell without adding new options. */
body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell:not(:has(> .tb-alert)) > .tb-header {
  border-radius: var(--tb-site-canvas-radius) var(--tb-site-canvas-radius) 0 0;
}

body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell:has(> .tb-alert) > .tb-alert {
  border-radius: var(--tb-site-canvas-radius) var(--tb-site-canvas-radius) 0 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tb-border-dark, #cfd7d0) 58%, transparent);
}

body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-footer {
  padding-top: clamp(48px, 6vw, 78px);
  border-top: 1px solid color-mix(in srgb, var(--tb-footer-border, var(--tb-border, #dfe5e0)) 82%, transparent);
  border-radius: 0 0 var(--tb-site-canvas-radius) var(--tb-site-canvas-radius);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tb-bg, #faf9f6) 30%, transparent);
}

body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-footer .tb-footer__inner {
  padding-inline: clamp(24px, 3.2vw, 50px);
}

/* Medium desktop / tablet landscape keeps the frame but avoids cramped nav. */
@media (min-width: 861px) and (max-width: 1120px) {
  html.tb-site-canvas-root--framed {
    --tb-site-canvas-gutter-y: 20px;
    --tb-site-canvas-gutter-x: 14px;
    --tb-site-canvas-gutter-y-double: 40px;
  }

  body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header .tb-header__inner {
    min-height: 64px;
    padding-inline: 22px;
  }
}

/* Phones and smaller tablets use the full viewport. This preserves usable
   content width, removes decorative clipping, and avoids horizontal scroll. */
@media (max-width: 860px) {
  html.tb-site-canvas-root--framed {
    padding: 0;
    overflow-x: visible;
    background: var(--tb-bg, #faf9f6);
  }

  body.tb-site-canvas--framed:not(.tb-client-login-body) {
    min-height: 100vh;
    background: var(--tb-bg, #faf9f6);
  }

  body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell::before {
    display: none;
  }

  body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > :is(
    .tb-header,
    .tb-alert,
    .tb-footer
  ) {
    border-radius: 0;
  }

  body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header .tb-header__inner {
    min-height: 58px;
    padding: 6px var(--section-padding-x, 1.5rem);
  }

  body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header:not(.tb-header--static) {
    top: 0;
  }

  body.admin-bar.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header:not(.tb-header--static) {
    top: 32px;
  }
}

@media (max-width: 782px) {
  body.admin-bar.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header:not(.tb-header--static) {
    top: 46px;
  }
}

/* Graceful fallback where overflow: clip is unavailable. */
@supports not (overflow: clip) {
  html.tb-site-canvas-root--framed {
    overflow-x: hidden;
  }

  body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell {
    overflow: hidden;
  }

  @media (max-width: 860px) {
    body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell {
      overflow: visible;
    }
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header,
  body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell > .tb-header :is(
    .tb-nav__sub-menu,
    .tb-nav__more-menu
  ) {
    background-color: var(--tb-bg, #faf9f6);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell {
    border: 1px solid CanvasText;
    box-shadow: none;
  }

  body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell::before {
    display: none;
  }
}

@media print {
  html.tb-site-canvas-root--framed {
    padding: 0;
    background: white;
  }

  body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell {
    width: 100%;
    max-width: none;
    min-height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.tb-site-canvas--framed:not(.tb-client-login-body) > .tb-site-shell::before {
    display: none;
  }
}

/* -------------------------------------------------------------------------
 * Final consistency guardrails
 * ------------------------------------------------------------------------- */

/* Section labels use one semantic palette role. Individual layouts may still
 * vary type scale and alignment, but the hierarchy no longer changes color
 * from one homepage component to the next. */
body[class*="tb-visual-style--"] :where(
  .tb-about__eyebrow,
  .tb-client-start__eyebrow,
  .tb-clinicians__eyebrow,
  .tb-contact-cta__eyebrow,
  .tb-contact__eyebrow,
  .tb-faq-section__eyebrow,
  .tb-fees-section__eyebrow,
  .tb-home-resources__eyebrow,
  .tb-location__eyebrow,
  .tb-public-documents__eyebrow,
  .tb-section-cta__eyebrow,
  .tb-section-hero__eyebrow,
  .tb-section-intro__eyebrow,
  .tb-services__eyebrow,
  .tb-testimonials__eyebrow,
  .tb-wte__eyebrow
) {
  color: var(--tb-brand-on-bg, var(--tb-primary, #5a7a5e));
}

body[class*="tb-visual-style--"] :where(.tb-section--surface-emphasis, .tb-section--highlight) :where(
  .tb-client-start__eyebrow,
  .tb-contact-cta__eyebrow,
  .tb-contact__eyebrow,
  .tb-home-resources__eyebrow,
  .tb-section-cta__eyebrow,
  .tb-testimonials__eyebrow,
  .tb-wte__eyebrow
) {
  color: var(--tb-muted-on-emphasis, var(--tb-on-emphasis, #fff)) !important;
}

/* Utility actions may be compact, but still inherit the exact same primary
 * and secondary palette, focus, radius, and interaction behavior. */
body[class*="tb-visual-style--"] :where(
  .tb-services__detail-card-cta,
  .tb-specialty-archive__jump-btn,
  .tb-attr-archive__jump-btn,
  .tb-forms-btn,
  .tb-modal__submit
) {
  font-family: inherit;
}

@media (prefers-reduced-motion: reduce) {
  body[class*="tb-visual-style--"] .tb-btn {
    transition: none !important;
    transform: none !important;
  }
}


/* -------------------------------------------------------------------------
 * Accessibility completion
 *
 * A consistent, two-tone focus treatment remains visible across light,
 * tinted, photographic, and emphasis surfaces. Prose links are not identified
 * by color alone, and compact controls retain usable touch targets.
 * ------------------------------------------------------------------------- */
body[class*="tb-visual-style--"] :is(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid var(--tb-focus-ring, var(--tb-primary-dark, #3f5941)) !important;
  outline-offset: 3px !important;
}

body[class*="tb-visual-style--"] :is(
  .tb-section--surface-emphasis,
  .tb-section--highlight,
  .tb-about--bg-brand,
  .tb-about--full-bleed,
  .tb-footer--surface-emphasis,
  .tb-footer-cta,
  .tb-hero-loc,
  .tb-hero:not(.tb-hero--split)
) :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline-color: var(--tb-on-emphasis, #fff) !important;
}

body[class*="tb-visual-style--"] .tb-main :where(p, li, dd, blockquote) a:not(.tb-btn):not([class*="card"]):not([class*="logo"]) {
  text-decoration-line: underline;
  text-decoration-thickness: .09em;
  text-underline-offset: .16em;
  text-decoration-skip-ink: auto;
}

body[class*="tb-visual-style--"] :where(
  .tb-mobile-toggle,
  .tb-nav__more-btn,
  .tb-video-modal__close,
  .tb-clinician-card__video-btn
) {
  min-width: 44px;
  min-height: 44px;
}

body[class*="tb-visual-style--"] :where(h1, h2, h3, h4, h5, h6, [id]) {
  scroll-margin-top: 7rem;
}

body[class*="tb-visual-style--"] :where(p, li, dd, address, a, button, label) {
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto !important; }
  body[class*="tb-visual-style--"] *,
  body[class*="tb-visual-style--"] *::before,
  body[class*="tb-visual-style--"] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  body[class*="tb-visual-style--"] :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid Highlight !important;
  }
  body[class*="tb-visual-style--"] .tb-btn {
    border: 2px solid ButtonText !important;
  }
}


/* -------------------------------------------------------------------------
 * Accessibility remediation — shared component semantics
 *
 * Components below previously used the raw palette's subtle-text token even
 * when placed on a tinted surface. They now consume the surface-specific
 * foreground generated by Core, so custom palettes remain readable without
 * changing the administrator's saved colors.
 * ------------------------------------------------------------------------- */
body[class*="tb-visual-style--"] .tb-portal-card__primary {
  color: var(--tb-on-primary-light, var(--tb-on-bg, #263029));
}
body[class*="tb-visual-style--"] .tb-portal-card__primary :where(.tb-portal-card__heading, .tb-portal-card__body) {
  color: inherit !important;
}
body[class*="tb-visual-style--"] .tb-portal-info-block,
body[class*="tb-visual-style--"] .tb-contact-page__details,
body[class*="tb-visual-style--"] .tb-contact-page__map-panel,
body[class*="tb-visual-style--"] .tb-fees-info-card,
body[class*="tb-visual-style--"] .tb-section-cta__shelf,
body[class*="tb-visual-style--"] .tb-dir-filter,
body[class*="tb-visual-style--"] .tb-dir-group__count,
body[class*="tb-visual-style--"] .tb-dir-spec-card__count {
  color: var(--tb-on-surface, var(--tb-text, #3d4039));
}
body[class*="tb-visual-style--"] :where(
  .tb-portal-info-block p,
  .tb-contact-page__hours-row,
  .tb-contact-page__hours-time,
  .tb-contact-page__crisis-note,
  .tb-contact-page__map-copy p,
  .tb-fees-info-card__body,
  .tb-section-cta__shelf-label,
  .tb-section-cta__shelf-back-link,
  .tb-dir-filter__prompt,
  .tb-dir-section--surface .tb-dir-section__sub,
  .tb-dir-group__count,
  .tb-dir-spec-card__count
) {
  color: var(--tb-muted-on-surface, var(--tb-on-surface, #3d4039)) !important;
}
body[class*="tb-visual-style--"] :where(
  .tb-contact-page__detail-heading,
  .tb-contact-page__map-eyebrow,
  .tb-dir-group__telehealth,
  .tb-dir-spec-card__telehealth,
  .tb-dir-spec-card__count--link,
  .tb-section-cta__shelf-pill
) {
  color: var(--tb-brand-on-surface, var(--tb-primary-dark, #3f5941)) !important;
}
body[class*="tb-visual-style--"] .tb-ph--text .tb-ph__subtitle {
  color: var(--tb-muted-on-surface, var(--tb-on-surface, #3d4039)) !important;
}
body[class*="tb-visual-style--"] .tb-section-cta--contextual {
  background: var(--tb-emphasis-start, var(--tb-primary-dark, #3f5941)) !important;
  color: var(--tb-on-emphasis, #fff);
}
body[class*="tb-visual-style--"] .tb-section-cta--contextual :where(
  .tb-section-cta__heading,
  .tb-section-cta__body,
  .tb-section-cta__prompt
) {
  color: inherit !important;
}
body[class*="tb-visual-style--"] .tb-dir-spec-card__arrow {
  pointer-events: none;
  user-select: none;
}
body[class*="tb-visual-style--"] .tb-footer__legal-links a,
body[class*="tb-visual-style--"] .tb-footer__staff-login,
body[class*="tb-visual-style--"] .tb-footer__credit a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 3px;
}
body[class*="tb-visual-style--"] :where(
  .tb-clinician-profile__back-link,
  .tb-section-cta__shelf-back-link
) {
  min-height: 24px;
  padding-block: 3px;
}


/* rc39 accessibility remediation: exact surface roles and stable CTA context. */
body[class*="tb-visual-style--"] .tb-dir-location-strip__item {
  color: var(--tb-on-primary-light, var(--tb-on-bg, #263029)) !important;
}
body[class*="tb-visual-style--"] .tb-dir-section:not(.tb-dir-section--surface) :where(.tb-dir-section__sub, .tb-dir-empty, .tb-dir-group__prose) {
  color: var(--tb-muted-on-bg, var(--tb-on-bg, #3d4039)) !important;
}
body[class*="tb-visual-style--"] .tb-dir-section--surface :where(.tb-dir-section__sub, .tb-dir-empty, .tb-dir-group__prose) {
  color: var(--tb-muted-on-surface, var(--tb-on-surface, #3d4039)) !important;
}
body[class*="tb-visual-style--"] .tb-dir-spec-card :where(.tb-dir-spec-card__desc, .tb-dir-spec-card__arrow) {
  color: var(--tb-muted-on-card, var(--tb-on-card, #3d4039)) !important;
}
body[class*="tb-visual-style--"] .tb-dir-filter__pill {
  background: var(--tb-card-bg, #fff) !important;
  color: var(--tb-muted-on-card, var(--tb-on-card, #3d4039)) !important;
}
body[class*="tb-visual-style--"] .tb-section-cta--contextual :where(.tb-btn--secondary, .tb-btn--outline) {
  background: transparent !important;
  border-color: var(--tb-on-emphasis, #fff) !important;
  color: var(--tb-on-emphasis, #fff) !important;
}
body[class*="tb-visual-style--"] .tb-section-cta--contextual :where(.tb-btn--secondary, .tb-btn--outline):is(:hover, :focus-visible) {
  background: var(--tb-on-emphasis, #fff) !important;
  border-color: var(--tb-on-emphasis, #fff) !important;
  color: var(--tb-emphasis-start, var(--tb-primary-dark, #3f5941)) !important;
}


body[class*="tb-visual-style--"] :where(.tb-fees-section__subheadline, .tb-fees-home__reassurance, .tb-clinicians__browse-label) {
  color: var(--tb-muted-on-surface, var(--tb-on-surface, #3d4039)) !important;
}