/* =============================================================================
   HEALS page sections
   =============================================================================
   Every section widget in the design brief. As with the chrome, NOT ONE BRAND
   VALUE IS WRITTEN HERE: everything resolves through tokens.css.
   ========================================================================== */

/* ----------------------------------------------------------------- shared -- */

.heals-section { background: var(--heals-surface); }
.heals-section--alt {
  background: var(--heals-surface-alt);
  border-top: 1px solid var(--heals-line-soft);
  border-bottom: 1px solid var(--heals-line-soft);
}
/* ------------------------------------------- gradients need a solid fallback
 * NEVER put light text on a background-IMAGE alone.
 *
 * Elementor's lazy-load optimisation ships:
 *     .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),
 *     .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) *
 *       { background-image: none !important; }
 *
 * Note the `*`: it strips background-image from EVERY DESCENDANT of a container that
 * has not yet scrolled into view, with !important, so nothing we write can outrank it.
 * It is restored by JS when the observer fires.
 *
 * That means any section below the fold renders with no gradient until the user
 * scrolls, and our white headings were briefly white-on-white. The same happens
 * permanently if JS fails or is disabled.
 *
 * `background-color` is NOT stripped by that rule, so declaring both makes the text
 * legible in every case and the gradient a progressive enhancement.
 */
.heals-section--deep {
  background-color: var(--heals-ink);
  background-image: var(--heals-grad-deep);
}

.heals-shell {
  max-width: var(--heals-maxw);
  margin: 0 auto;
  padding: var(--heals-section-y) var(--heals-gutter);
}

.heals-kicker {
  font-family: var(--heals-font-heading);
  font-size: var(--heals-fs-kicker);
  font-weight: 700;
  letter-spacing: var(--heals-tracking-kicker);
  text-transform: uppercase;
  color: var(--heals-blue);
}

.heals-h1 {
  margin: 0;
  font-family: var(--heals-font-heading);
  font-size: var(--heals-fs-h1);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: var(--heals-tracking-tight);
  color: var(--heals-ink);
  text-wrap: balance;
}
.heals-h2 {
  margin: 0;
  font-family: var(--heals-font-heading);
  font-size: var(--heals-fs-h2);
  line-height: var(--heals-lh-heading);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--heals-ink);
}
.heals-h3 {
  margin: 0;
  font-family: var(--heals-font-heading);
  font-size: var(--heals-fs-h3);
  font-weight: 700;
  color: var(--heals-ink);
}

.heals-lead {
  margin: 0;
  font-size: var(--heals-fs-lead);
  line-height: var(--heals-lh-loose);
  color: var(--heals-text-lead);
  text-wrap: pretty;
}
.heals-body {
  margin: 0;
  font-size: var(--heals-fs-body);
  line-height: var(--heals-lh-body);
  color: var(--heals-text-body);
  text-wrap: pretty;
}

.heals-stack { display: flex; flex-direction: column; gap: 14px; }
.heals-actions { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 6px; }

/* The accent square that heads every card in the brief. The gradient is chosen by
   index so a repeater's rows cycle through the brand ramp without the editor
   having to pick a colour per row. */
/* Solid colour under every gradient, for the lazy-load reason documented at
   .heals-section--deep. Without it these squares are invisible until scroll, and the
   numbered badges below become white text on nothing. */
.heals-chip { width: 14px; height: 14px; border-radius: 4px; background-color: var(--heals-blue); }
.heals-chip--1 { background-image: var(--heals-grad-cyan-blue); }
.heals-chip--2 { background-image: var(--heals-grad-indigo-blue); }
.heals-chip--3 { background-image: var(--heals-grad-cyan-indigo); }
.heals-chip--4 { background-image: var(--heals-grad-blue-indigo); }
.heals-chip--5 { background-image: var(--heals-grad-indigo-cyan); }
.heals-chip--6 { background-image: var(--heals-grad-blue-cyan); }

.heals-card {
  background: var(--heals-surface);
  border: 1px solid var(--heals-line);
  border-radius: var(--heals-radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.heals-card--lg { border-radius: var(--heals-radius-lg); padding: 28px 26px; gap: 14px; }
.heals-card--grad { background: var(--heals-grad-card); }
a.heals-card { text-decoration: none; }
a.heals-card:hover { border-color: var(--heals-line-hover); }

.heals-card__text {
  margin: 0;
  font-size: var(--heals-fs-card);
  line-height: 1.6;
  color: var(--heals-text-muted);
}

.heals-grid { display: grid; gap: 18px; }
.heals-grid--2 { grid-template-columns: repeat(2, 1fr); }
.heals-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.heals-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ------------------------------------------------------------------- hero -- */

.heals-hero { position: relative; overflow: hidden; background: var(--heals-wash-hero); }
.heals-hero__inner {
  max-width: var(--heals-maxw);
  margin: 0 auto;
  padding: 84px var(--heals-gutter) 92px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.heals-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.heals-hero__title {
  margin: 0;
  font-family: var(--heals-font-heading);
  font-size: var(--heals-fs-display);
  line-height: var(--heals-lh-tight);
  font-weight: 800;
  letter-spacing: var(--heals-tracking-tight);
  color: var(--heals-ink);
  text-wrap: balance;
}
.heals-hero__tagline {
  margin: 0;
  font-family: var(--heals-font-heading);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--heals-indigo);
}
.heals-hero__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}
.heals-hero__art img { position: relative; width: 280px; height: auto; }
/* The halo and ring are decorative, so they are sized against the viewport as well as
   in absolute terms. At 390px the 470px ring ran off both edges and read as a broken
   circle rather than an intentional detail. min() keeps the composition intact on a
   phone without a separate mobile rule. */
.heals-hero__halo {
  position: absolute;
  width: min(380px, 74vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--heals-cyan) 16%, transparent),
    color-mix(in srgb, var(--heals-blue) 10%, transparent));
}
.heals-hero__ring {
  position: absolute;
  width: min(470px, 90vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--heals-cyan) 40%, var(--heals-surface));
}

/* ------------------------------------------------------------ page header -- */

.heals-pagehead {
  background: var(--heals-wash-page);
  border-bottom: 1px solid var(--heals-line-soft);
}
.heals-pagehead__inner {
  max-width: var(--heals-maxw);
  margin: 0 auto;
  padding: 76px var(--heals-gutter) 70px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* -------------------------------------------------------------- numbered -- */

.heals-num {
  width: 42px; height: 42px;
  border-radius: var(--heals-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--heals-font-heading);
  font-weight: 800;
  font-size: 17px;
  color: var(--heals-surface);
  /* White numeral, so it needs a guaranteed solid behind it. The .heals-chip--N
     classes supply the gradient on top. */
  background-color: var(--heals-blue);
}

.heals-ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.heals-ticks li {
  font-size: var(--heals-fs-card);
  line-height: 1.55;
  color: var(--heals-text-body);
  display: flex;
  gap: 9px;
}
.heals-ticks li::before {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--heals-blue);
  margin-top: 6px;
}
.heals-muted { color: var(--heals-text-faint); font-style: italic; }

/* ------------------------------------------------------------ coming soon -- */

.heals-soon {
  border: 1px solid var(--heals-line-accent);
  background: var(--heals-grad-soft);
  border-radius: var(--heals-radius-xl);
  padding: 34px 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.heals-soon__kicker {
  font-family: var(--heals-font-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--heals-indigo);
}

/* -------------------------------------------------------------- newsletter -- */

/* Solid colour first, gradient as enhancement. See the note at .heals-section--deep. */
.heals-news {
  background-color: var(--heals-ink);
  background-image: var(--heals-grad-deep);
}
.heals-news__inner {
  max-width: var(--heals-maxw);
  margin: 0 auto;
  padding: 76px var(--heals-gutter);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
}
.heals-news__title {
  margin: 0;
  font-family: var(--heals-font-heading);
  font-size: var(--heals-fs-h2-sm);
  line-height: 1.25;
  font-weight: 800;
  color: var(--heals-surface);
}
.heals-news__blurb {
  margin: 0;
  font-size: 15.5px;
  line-height: var(--heals-lh-body);
  color: var(--heals-text-on-dark);
  max-width: 52ch;
  text-wrap: pretty;
}
.heals-news .heals-optin__input { padding: 15px 20px; border: none; font-size: 14.5px; }
.heals-news .heals-optin__button {
  background: var(--heals-cyan);
  color: var(--heals-ink);
  padding: 15px 26px;
  font-size: 14.5px;
}
.heals-news .heals-optin__button:hover { background: var(--heals-cyan-200); }

/* ------------------------------------------------------------------ crisis -- */

.heals-crisispanel { background: var(--heals-surface-dark); }
.heals-crisispanel__inner {
  max-width: var(--heals-maxw);
  margin: 0 auto;
  padding: 76px var(--heals-gutter);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.heals-crisispanel__kicker { color: var(--heals-cyan-300); }
.heals-crisispanel__title {
  margin: 0;
  font-family: var(--heals-font-heading);
  font-size: var(--heals-fs-h2-sm);
  line-height: 1.25;
  font-weight: 800;
  color: var(--heals-surface);
}
.heals-crisispanel__lead {
  margin: 0;
  font-size: var(--heals-fs-sm);
  line-height: var(--heals-lh-loose);
  color: var(--heals-text-on-dark-2);
}
.heals-crisiscard {
  background: var(--heals-fill-on-dark);
  border: 1px solid var(--heals-line-on-dark);
  border-radius: var(--heals-radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* A phone number must never break across lines: "1-800-662-4357" wrapped in the 4-up
   grid, which made that card taller and knocked its label out of line with the other
   three. Fluid sizing keeps all four on one line and the same size as each other. */
.heals-crisiscard__num {
  font-family: var(--heals-font-heading);
  font-size: clamp(19px, 1.75vw, 26px);
  font-weight: 800;
  color: var(--heals-cyan-300);
  white-space: nowrap;
}
.heals-crisiscard__name { font-size: var(--heals-fs-xs); font-weight: 700; color: var(--heals-surface); }
.heals-crisiscard__text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--heals-text-on-dark-2); }

/* An alert-styled card, used for the Crisis Resources entry in a resource grid. */
.heals-card--alert { border-color: var(--heals-alert-line); background: var(--heals-alert-surface); }
a.heals-card--alert:hover { border-color: var(--heals-alert-hover); }
.heals-chip--alert { background: var(--heals-alert); }

/* --------------------------------------------------------------------- faq -- */

.heals-faq__inner {
  max-width: var(--heals-maxw);
  margin: 0 auto;
  padding: 84px var(--heals-gutter);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: start;
}
.heals-faq__aside { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 14px; }
.heals-faq__list { display: flex; flex-direction: column; gap: 14px; }
.heals-faq__item {
  background: var(--heals-surface);
  border: 1px solid var(--heals-line);
  border-radius: var(--heals-radius);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.heals-faq__q { margin: 0; font-family: var(--heals-font-heading); font-size: var(--heals-fs-body); font-weight: 700; color: var(--heals-ink); }
.heals-faq__a { margin: 0; font-size: var(--heals-fs-xs); line-height: var(--heals-lh-loose); color: var(--heals-text-body); text-wrap: pretty; }

/* ------------------------------------------------------------------- chips -- */

.heals-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.heals-chips span {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--heals-ink);
  background: var(--heals-surface-chip);
  border: 1px solid var(--heals-line-chip);
  padding: 12px 22px;
  border-radius: var(--heals-radius-pill);
}

/* ---------------------------------------------------------------- cta band -- */

.heals-cta__inner {
  max-width: var(--heals-maxw);
  margin: 0 auto;
  padding: 70px var(--heals-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.heals-cta__title {
  margin: 0;
  font-family: var(--heals-font-heading);
  font-size: 28px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--heals-surface);
  text-wrap: balance;
}
.heals-cta__blurb { margin: 0; font-size: var(--heals-fs-sm); line-height: var(--heals-lh-body); color: var(--heals-text-on-dark); text-wrap: pretty; }
.heals-btn--cyan { background: var(--heals-cyan); color: var(--heals-ink); }
.heals-btn--cyan:hover { background: var(--heals-cyan-200); color: var(--heals-ink); }

/* ---------------------------------------------------------------- timeline -- */

.heals-timeline {
  max-width: var(--heals-maxw);
  margin: 0 auto;
  padding: var(--heals-section-y) var(--heals-gutter);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
}
.heals-timeline__aside { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 16px; }
.heals-timeline__list { margin: 0; padding: 0; list-style: none; }

.heals-timeline__item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0 22px;
  padding-bottom: 32px;
  position: relative;
}
.heals-timeline__item.is-last { padding-bottom: 0; }

/* The connecting rule is drawn from the marker down, so it stops naturally at the
   last item rather than needing a hand-maintained "last" exception in markup. */
.heals-timeline__item::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: var(--heals-line-chip);
}
.heals-timeline__item.is-last::before { display: none; }

.heals-timeline__item .heals-chip { margin-top: 4px; position: relative; z-index: 1; }
.heals-timeline__body { display: flex; flex-direction: column; gap: 6px; }

/* ----------------------------------------------------------------- pillars -- */

.heals-pillars { display: flex; flex-direction: column; gap: 22px; }

.heals-pillar {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 32px;
  align-items: start;
  border: 1px solid var(--heals-line);
  border-radius: var(--heals-radius-xl);
  padding: 38px 40px;
  background: var(--heals-grad-card);
}

/* The number is a gradient clipped to the glyphs. background-clip:text needs a
   transparent fill, so the colour is transparent deliberately.

   THE SOLID background-color IS LOAD-BEARING, not decoration. If the gradient image is
   stripped (see the lazy-load note at .heals-section--deep) a transparent fill with no
   background leaves the numeral completely INVISIBLE. With a solid colour underneath,
   background-clip:text clips that instead and the number simply renders flat. */
.heals-pillar__num {
  font-family: var(--heals-font-heading);
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  background-color: var(--heals-indigo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.heals-pillar__num--1 { background-image: var(--heals-grad-cyan-blue); }
.heals-pillar__num--2 { background-image: var(--heals-grad-indigo-blue); }
.heals-pillar__num--3 { background-image: var(--heals-grad-cyan-indigo); }
.heals-pillar__num--4 { background-image: var(--heals-grad-blue-indigo); }
.heals-pillar__num--5 { background-image: var(--heals-grad-indigo-cyan); }
.heals-pillar__num--6 { background-image: var(--heals-grad-blue-cyan); }

.heals-pillar__sub {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--heals-blue);
}

/* ----------------------------------------------------------------- contact -- */

.heals-contact {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.heals-contact__form { display: flex; flex-direction: column; gap: 10px; }
.heals-contact__form .heals-optin__input { width: 100%; }
.heals-contact__form textarea.heals-optin__input {
  border-radius: var(--heals-radius);
  resize: vertical;
  font-family: var(--heals-font-body);
}
.heals-contact__form .heals-optin__button { align-self: flex-start; }

/* ------------------------------------------------------------------- prose -- */

.heals-prose { color: var(--heals-text-body); font-size: var(--heals-fs-body); line-height: var(--heals-lh-loose); }
.heals-prose.is-narrow { max-width: 68ch; }
.heals-prose h2 { font-size: var(--heals-fs-h2-sm); margin: 36px 0 12px; }
.heals-prose h3 { font-size: var(--heals-fs-h3); margin: 28px 0 10px; }
.heals-prose p  { margin: 0 0 16px; }
.heals-prose ul, .heals-prose ol { margin: 0 0 16px; padding-left: 22px; }
.heals-prose li { margin-bottom: 8px; }
.heals-prose a  { color: var(--heals-indigo); font-weight: 600; }

/* ==================================================================== mobile = */

@media (max-width: 1080px) {
  .heals-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .heals-pillar { grid-template-columns: 90px 1fr; }
  .heals-pillar > p { grid-column: 2; }
}

@media (max-width: 900px) {
  .heals-hero__inner,
  .heals-news__inner,
  .heals-faq__inner { grid-template-columns: 1fr; gap: 32px; }

  /* The emblem does NOT lead on a phone.
     It used to carry order:-1, which put a 300px logo above the fold and pushed the
     headline, the tagline and both buttons off the first screen. Someone arriving on a
     behavioral health site should meet the proposition, not the brand mark. Copy
     first, emblem after, and smaller.

     The halo and ring are absolutely positioned and centred, so they overflow the art
     box in BOTH directions if they are taller than it. At 200px tall with a 351px ring
     the dashed circle rose up through the hero buttons. Every decorative size is now
     kept under the container height so the composition stays self-contained. */
  .heals-hero__art { min-height: 300px; order: 0; }
  .heals-hero__art img { width: min(190px, 44vw); }
  .heals-hero__halo { width: min(250px, 60vw); }
  .heals-hero__ring { width: min(296px, 76vw); }
  .heals-hero__title { font-size: 38px; }
  .heals-h1 { font-size: 34px; }
  .heals-h2 { font-size: 27px; }
  .heals-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .heals-faq__aside { position: static; }
  .heals-shell { padding: 56px var(--heals-gutter); }
  .heals-timeline,
  .heals-contact { grid-template-columns: 1fr; gap: 32px; }
  .heals-timeline { padding: 56px var(--heals-gutter); }
  .heals-timeline__aside { position: static; }
  .heals-pillar { grid-template-columns: 1fr; gap: 14px; padding: 28px 24px; }
  .heals-pillar > p { grid-column: auto; }
  .heals-pillar__num { font-size: 40px; }
}

@media (max-width: 600px) {
  .heals-grid--2,
  .heals-grid--3,
  .heals-grid--4 { grid-template-columns: 1fr; }
  .heals-hero__inner { padding: 48px var(--heals-gutter) 56px; }
  .heals-soon { padding: 24px 22px; }
}