/* Layered refinements loaded by script.js so the original design system stays small. */

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid #d28a68;
  outline-offset: 4px;
  border-radius: 6px;
}

.site-nav a[aria-current="page"]:not(.button)::after { right: 0; }

.brand:focus-visible,
.button:focus-visible,
.text-link:focus-visible,
.condition-card:focus-visible { border-radius: 999px; }
.condition-card:focus-visible { border-radius: 18px; }

/* Official Back to Life Mental Health logo */
.brand-logo-link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.brand-logo-image {
  display: block;
  width: clamp(190px, 18vw, 260px);
  height: auto;
  max-height: 62px;
  object-fit: contain;
  object-position: left center;
}
.brand-footer.brand-logo-link {
  width: fit-content;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
}
.brand-footer .brand-logo-image {
  width: min(240px, 100%);
  max-height: 68px;
}

.simple-list-link {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: white;
  transition: padding-left .2s ease, color .2s ease;
}
.simple-list-link:hover { padding-left: 6px; color: #e8d6bd; }

.insurance-logos img {
  display: block;
  max-width: 130px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.insurance-logo-card {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}

/* The homepage hero uses a true HTML image for better accessibility, image
   discovery, and loading behavior while retaining the original art direction. */
.hero-photo-frame {
  position: absolute;
  inset: 0 26px 34px 0;
  overflow: hidden;
  border-radius: 180px 28px 180px 28px;
  background: linear-gradient(135deg, #dce7df, #d8c0a4);
  box-shadow: var(--shadow);
}
.hero-photo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(23,50,58,.14));
  pointer-events: none;
}
.hero-photo-frame::after {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: inherit;
  pointer-events: none;
}
.hero-photo-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

/* Keep the homepage provider portrait open and approachable by ensuring the
   callout does not cover the provider's hands, with enough room below the
   lowered card that it still feels attached to the hero rather than cramped
   against the trust strip. */
@media (min-width: 821px) {
  .hero { padding-bottom: 130px; }
  .hero .floating-card { bottom: -75px; }
}

/* Branded patient-path motif: a subtle visual signature that echoes the
   practice name without resorting to stock medical icons. */
.brand-path-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 12%, rgba(232,214,189,.52), transparent 28%),
    linear-gradient(180deg, #fffdf9, #f7f3eb);
}
.brand-path-section::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 240px;
  right: -90px;
  bottom: -145px;
  border: 1px solid rgba(85,114,99,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(85,114,99,.025), 0 0 0 108px rgba(85,114,99,.018);
}
.brand-path-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: 64px;
  align-items: end;
  margin-bottom: 58px;
}
.brand-path-heading h2 { max-width: 760px; }
.brand-path-heading > p {
  max-width: 560px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
}
.care-path {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.care-path::before {
  content: "";
  position: absolute;
  top: 29px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, rgba(181,111,80,.18), rgba(85,114,99,.42), rgba(181,111,80,.18));
}
.care-path-step {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 292px;
  padding: 0 18px 26px;
}
.care-path-number {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 30px;
  border: 1px solid rgba(23,50,58,.12);
  border-radius: 50%;
  background: #fffdf9;
  color: var(--terracotta);
  box-shadow: 0 8px 24px rgba(23,50,58,.06);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}
.care-path-step > div {
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.care-path-label {
  display: block;
  margin-top: 20px;
  color: var(--sage-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.care-path-step h3 {
  margin-top: 10px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 27px;
}
.care-path-step p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 14px;
}
.brand-path-signoff {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 26px;
  padding: 24px 28px;
  border: 1px solid rgba(23,50,58,.1);
  border-radius: 20px;
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(10px);
}
.brand-path-signoff > span {
  width: 52px;
  height: 2px;
  display: block;
  background: linear-gradient(90deg, var(--terracotta), var(--sage));
}
.brand-path-signoff p {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
}

.home-about {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 64px;
  align-items: center;
}

/* About-page provider introduction */
.provider-video-card {
  aspect-ratio: 6 / 5;
  min-height: 0;
  border-radius: 32px;
  background: linear-gradient(145deg, #d8e4dc, #dcc7aa);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.provider-video-card::before,
.provider-video-card::after { display: none; }
.provider-intro-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  background: #10272e;
  /* The source footage is strongly backlit. Lift midtones enough for the
     provider's face to read naturally against the bright page while slightly
     reducing contrast so the window does not dominate the frame. */
  filter: brightness(1.32) contrast(.92) saturate(1.05);
}
.provider-video-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 14px;
  background: rgba(255,253,249,.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(23,50,58,.12);
  pointer-events: none;
}
.provider-video-badge span {
  color: var(--terracotta);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.provider-video-badge strong {
  color: var(--ink);
  font-size: 12px;
}
.provider-video-card.video-unavailable .provider-intro-video { opacity: 0; }
.provider-video-card.video-unavailable::before {
  content: "Introduction video unavailable";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 32px;
  color: var(--ink-soft);
  background: radial-gradient(circle at 24% 20%, rgba(255,255,255,.72), transparent 30%), linear-gradient(145deg, #d8e4dc, #dcc7aa);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  text-align: center;
}

.credential-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.credential-row span {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
}

.footer-conditions { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 12px !important; }
.footer-conditions h3 { grid-column: 1 / -1; }

/* A compact, app-like action bar gives mobile visitors a clear next step
   without adding a popup or covering desktop content. */
.mobile-contact-bar { display: none; }

.migration-note {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--cream);
  color: var(--ink-soft);
  font-size: 13px;
}

.error-page { min-height: 70vh; display: grid; place-items: center; padding: 80px 0; background: var(--cream); }
.error-card { width: min(760px, 100%); padding: 52px; border-radius: 28px; background: white; box-shadow: var(--shadow); text-align: center; }
.error-card .error-code { display: block; margin-bottom: 12px; color: var(--terracotta); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.error-card p { color: var(--ink-soft); font-size: 18px; }
.error-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

@media (max-width: 1080px) {
  .brand-logo-image { width: 205px; }
  .care-path { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .care-path::before { display: none; }
  .care-path-step { min-height: 0; padding-inline: 8px; }
}

@media (max-width: 820px) {
  body.has-mobile-contact-bar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .brand-logo-image { width: 190px; max-height: 54px; }
  .hero-photo-frame { inset: 0 18px 34px 0; border-radius: 140px 26px 140px 26px; }
  .home-about { grid-template-columns: 1fr; gap: 40px; }
  .provider-video-card { min-height: 0; aspect-ratio: 16 / 9; }
  .brand-path-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 42px; }
  .brand-path-heading > p { max-width: 680px; }
  .brand-path-signoff { grid-template-columns: 42px 1fr; }
  .brand-path-signoff .text-link { grid-column: 2; justify-self: start; }
  .mobile-contact-bar {
    position: fixed;
    z-index: 80;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 18px;
    background: rgba(16,39,46,.94);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 42px rgba(16,39,46,.28);
    transition: opacity .2s ease, transform .2s ease;
  }
  .mobile-contact-bar a {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
  }
  .mobile-contact-bar-call { color: white; border: 1px solid rgba(255,255,255,.2); }
  .mobile-contact-bar-book { color: var(--ink); background: white; }
  body.menu-open .mobile-contact-bar { opacity: 0; transform: translateY(12px); pointer-events: none; }
}
@media (max-width: 560px) {
  .brand-logo-image { width: 170px; max-height: 48px; }
  .brand-footer .brand-logo-image { width: 205px; max-height: 58px; }
  .hero-photo-frame { inset: 0 8px 34px 0; border-radius: 110px 22px 110px 22px; }
  .hero-photo-frame::after { inset: 12px; }
  .provider-video-badge { top: 12px; left: 12px; padding: 8px 10px; }
  .provider-video-badge strong { font-size: 11px; }
  .care-path { grid-template-columns: 1fr; gap: 22px; }
  .care-path-step { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 0; }
  .care-path-step > div { padding-top: 0; }
  .care-path-number { margin-bottom: 0; }
  .care-path-step h3 { font-size: 24px; }
  .brand-path-signoff { grid-template-columns: 1fr; padding: 22px; }
  .brand-path-signoff > span { width: 42px; }
  .brand-path-signoff .text-link { grid-column: auto; }
  .error-card { padding: 34px 22px; }
  .footer-conditions { grid-template-columns: 1fr; }
  .footer-conditions h3 { grid-column: auto; }
}