/* 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; }

/* Photography should explain the page, not interrupt it. The three condition
   images become part of their hero treatments; the original article figures
   remain in the HTML for semantics/fallback but are not repeated visually. */
body:has(.article-photo img[src$="condition-bipolar.jpg"]) .article-photo,
body:has(.article-photo img[src$="condition-depression.jpg"]) .article-photo,
body:has(.article-photo img[src$="condition-life-transitions.png"]) .article-photo {
  display: none;
}

body:has(.article-photo img[src$="condition-bipolar.jpg"]) .condition-hero {
  min-height: 520px;
  display: flex;
  align-items: center;
  color: white;
  background:
    linear-gradient(90deg, rgba(12,31,37,.94) 0%, rgba(12,31,37,.82) 34%, rgba(12,31,37,.44) 58%, rgba(12,31,37,.08) 100%),
    url("assets/images/condition-bipolar.webp") center center / cover no-repeat;
}
body:has(.article-photo img[src$="condition-bipolar.jpg"]) .condition-hero::after { display: none; }
body:has(.article-photo img[src$="condition-bipolar.jpg"]) .condition-hero .page-hero-inner { max-width: 1180px; }
body:has(.article-photo img[src$="condition-bipolar.jpg"]) .condition-hero h1,
body:has(.article-photo img[src$="condition-bipolar.jpg"]) .condition-hero p { max-width: 620px; color: white; text-shadow: 0 2px 18px rgba(0,0,0,.18); }
body:has(.article-photo img[src$="condition-bipolar.jpg"]) .condition-hero .eyebrow { color: #efd8c8; }
body:has(.article-photo img[src$="condition-bipolar.jpg"]) .condition-hero .text-link { color: white; }
body:has(.article-photo img[src$="condition-bipolar.jpg"]) .condition-hero .button { border-color: white; background: white; color: var(--ink); }

/* Depression and life transitions work better as a split hero: copy stays
   clean on the left while the people/plant remain fully readable on the right. */
body:has(.article-photo img[src$="condition-depression.jpg"]) .condition-hero,
body:has(.article-photo img[src$="condition-life-transitions.png"]) .condition-hero {
  min-height: 500px;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #f8f5ef 0%, #f8f5ef 48%, #eef3ef 48%, #eef3ef 100%);
}
body:has(.article-photo img[src$="condition-depression.jpg"]) .condition-hero::after,
body:has(.article-photo img[src$="condition-life-transitions.png"]) .condition-hero::after { display: none; }
body:has(.article-photo img[src$="condition-depression.jpg"]) .condition-hero::before,
body:has(.article-photo img[src$="condition-life-transitions.png"]) .condition-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 50%;
  box-shadow: inset 40px 0 54px -48px rgba(23,50,58,.26);
}
body:has(.article-photo img[src$="condition-depression.jpg"]) .condition-hero::before {
  background: url("assets/images/condition-depression.webp") center center / cover no-repeat;
}
body:has(.article-photo img[src$="condition-life-transitions.png"]) .condition-hero::before {
  background: url("assets/images/condition-life-transitions.webp") center center / cover no-repeat;
}
body:has(.article-photo img[src$="condition-depression.jpg"]) .condition-hero .page-hero-inner,
body:has(.article-photo img[src$="condition-life-transitions.png"]) .condition-hero .page-hero-inner { max-width: 1180px; }
body:has(.article-photo img[src$="condition-depression.jpg"]) .condition-hero h1,
body:has(.article-photo img[src$="condition-depression.jpg"]) .condition-hero p,
body:has(.article-photo img[src$="condition-life-transitions.png"]) .condition-hero h1,
body:has(.article-photo img[src$="condition-life-transitions.png"]) .condition-hero p { max-width: 520px; }

/* The wide hand-in-hand image is naturally a banner, so make it the About
   page's opening image and remove the duplicate standalone banner lower down. */
body:has(img[src$="about-collaboration.png"]) .page-hero {
  min-height: 430px;
  display: flex;
  align-items: center;
  color: white;
  background:
    linear-gradient(90deg, rgba(15,36,43,.91) 0%, rgba(15,36,43,.75) 42%, rgba(15,36,43,.28) 70%, rgba(15,36,43,.08) 100%),
    url("assets/images/about-collaboration.webp") center center / cover no-repeat;
}
body:has(img[src$="about-collaboration.png"]) .page-hero .page-hero-inner { max-width: 1180px; }
body:has(img[src$="about-collaboration.png"]) .page-hero h1,
body:has(img[src$="about-collaboration.png"]) .page-hero p { max-width: 650px; color: white; text-shadow: 0 2px 18px rgba(0,0,0,.18); }
body:has(img[src$="about-collaboration.png"]) .page-hero .eyebrow { color: #efd8c8; }
body:has(img[src$="about-collaboration.png"]) section:has(img[src$="about-collaboration.png"]) { display: none; }

/* Carry the same visual language back to the homepage where visitors choose a
   condition. These are image headers, not full-card backgrounds, so the copy
   remains as readable as the original cards. */
a.condition-card:is([href="depression.html"], [href="/depression"]),
a.condition-card:is([href="bipolar.html"], [href="/bipolar"]),
a.condition-card:is([href="life-transitions.html"], [href="/life-transitions"]) {
  position: relative;
  overflow: hidden;
  padding-top: 124px;
  background: white;
}
a.condition-card:is([href="depression.html"], [href="/depression"])::before,
a.condition-card:is([href="bipolar.html"], [href="/bipolar"])::before,
a.condition-card:is([href="life-transitions.html"], [href="/life-transitions"])::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 102px;
  background-size: cover;
  background-repeat: no-repeat;
}
a.condition-card:is([href="depression.html"], [href="/depression"])::before {
  background-image: linear-gradient(180deg, rgba(23,50,58,.02), rgba(23,50,58,.16)), url("assets/images/condition-depression.webp");
  background-position: center 52%;
}
a.condition-card:is([href="bipolar.html"], [href="/bipolar"])::before {
  background-image: linear-gradient(180deg, rgba(23,50,58,.02), rgba(23,50,58,.16)), url("assets/images/condition-bipolar.webp");
  background-position: 72% center;
}
a.condition-card:is([href="life-transitions.html"], [href="/life-transitions"])::before {
  background-image: linear-gradient(180deg, rgba(23,50,58,.02), rgba(23,50,58,.16)), url("assets/images/condition-life-transitions.webp");
  background-position: center 48%;
}
a.condition-card:is([href="depression.html"], [href="/depression"]) > span,
a.condition-card:is([href="bipolar.html"], [href="/bipolar"]) > span,
a.condition-card:is([href="life-transitions.html"], [href="/life-transitions"]) > span {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  margin: 0;
  padding: 6px 9px;
  border-radius: 999px;
  color: white;
  background: rgba(16,39,46,.78);
  backdrop-filter: blur(8px);
}

@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: 680px) {
  body:has(.article-photo img[src$="condition-bipolar.jpg"]) .condition-hero {
    min-height: 560px;
    background:
      linear-gradient(180deg, rgba(12,31,37,.86) 0%, rgba(12,31,37,.75) 58%, rgba(12,31,37,.42) 100%),
      url("assets/images/condition-bipolar.webp") 72% center / cover no-repeat;
  }
  body:has(.article-photo img[src$="condition-depression.jpg"]) .condition-hero,
  body:has(.article-photo img[src$="condition-life-transitions.png"]) .condition-hero {
    min-height: 0;
    display: block;
    padding-bottom: 286px;
    background: #f8f5ef;
  }
  body:has(.article-photo img[src$="condition-depression.jpg"]) .condition-hero::before,
  body:has(.article-photo img[src$="condition-life-transitions.png"]) .condition-hero::before {
    inset: auto 0 0;
    height: 240px;
    box-shadow: inset 0 24px 40px -38px rgba(23,50,58,.3);
  }
  body:has(.article-photo img[src$="condition-depression.jpg"]) .condition-hero h1,
  body:has(.article-photo img[src$="condition-depression.jpg"]) .condition-hero p,
  body:has(.article-photo img[src$="condition-life-transitions.png"]) .condition-hero h1,
  body:has(.article-photo img[src$="condition-life-transitions.png"]) .condition-hero p { max-width: none; }
  body:has(img[src$="about-collaboration.png"]) .page-hero {
    min-height: 470px;
    background:
      linear-gradient(90deg, rgba(15,36,43,.88), rgba(15,36,43,.54)),
      url("assets/images/about-collaboration.webp") center center / cover no-repeat;
  }
}
@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; }
}

/* Shared crisis-resource boundary. Kept in the footer so it is visible but does
   not compete with routine appointment calls to action. */
.crisis-block {
  margin-top: 34px;
  padding-top: 24px;
  padding-bottom: 4px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.crisis-block p {
  max-width: 980px;
  margin: 0;
  color: rgba(255,255,255,.94);
  font-size: 14px;
  line-height: 1.72;
}
.crisis-block strong,
.crisis-block a {
  color: #fff;
}
.crisis-block a {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.error-page + .site-footer {
  margin-top: 0;
}
.error-page + .site-footer .crisis-block {
  margin-top: 0;
  padding-top: 28px;
  padding-bottom: 28px;
  border-top: 0;
}
@media (max-width: 680px) {
  .crisis-block {
    margin-top: 28px;
    padding-top: 20px;
  }
  .crisis-block p {
    font-size: 13px;
  }
}