/* Ridgeline — Page Hero (inner condition pages). rem-only. */

.rl-ph {
  position: relative;
  /* The homepage fold is not flat navy — it is a two-layer #182e96 scrim
     (a vertical depth pass plus a 90deg left-to-right fade) laid over the
     hero photo, which is why it reads as a bright, saturated blue rather
     than the near-black #0e1344 this block used to use.
     Same colour, same direction, same two-layer structure here — but the
     90deg fade bottoms out at 0.5 instead of the homepage's 0.15, because
     there the low end lets a bright photo show through, whereas here it
     would fall back to flat navy and reintroduce exactly the darkness the
     gradient is meant to fix. */
  background:
    linear-gradient(180deg, rgba(24, 46, 150, 0.25) 0%, rgba(24, 46, 150, 0.1) 35%, rgba(24, 46, 150, 0.3) 100%),
    linear-gradient(90deg, rgba(24, 46, 150, 0.92) 0%, rgba(24, 46, 150, 0.72) 45%, rgba(24, 46, 150, 0.5) 100%),
    var(--rl-navy, #0e1344);
  color: var(--rl-white, #ffffff);
  overflow: hidden;
  /* One measure for the whole fold — heading, copy, tiles and notice all
     wrap against this, so their ragged right edges line up. Set to the width
     of the copy column itself (696px at 1440), so the fold fills the space it
     has: at 38rem a long H1 like "Couples and marriage counseling in Denver"
     broke over four lines while only filling 405px of its 608px box. Intro
     copy lands at ~73 characters a line, the top of the comfortable range. */
  --ph-measure: 43.5rem;
  padding-top:    var(--ph-pt, 10rem);
  padding-bottom: var(--ph-pb, 4.5rem);
  margin-top:     var(--ph-mt, 0rem);
  margin-bottom:  var(--ph-mb, 0rem);
  /* Full-bleed */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.rl-ph__inner {
  position: relative;
  z-index: 1;
  max-width: 85rem;
  margin-inline: auto;
  padding-inline: 2.5rem;
  display: flex;
  align-items: center;
  gap: 4.5rem;
}

.rl-ph__content {
  flex: 1 1 54%;
  min-width: 0rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.rl-ph:not(.rl-ph--has-media) .rl-ph__content { flex: 1 1 auto; max-width: 56rem; }

/* ── Breadcrumb ── */
.rl-ph__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0rem;
  padding: 0rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

.rl-ph__crumbs li + li::before { content: '/'; margin-right: 0.5rem; color: rgba(255, 255, 255, 0.3); }
.rl-ph__crumbs a { color: rgba(255, 255, 255, 0.55); }
.rl-ph__crumbs a:hover { color: var(--rl-gold, #fab529); }
.rl-ph__crumbs [aria-current='page'] { color: rgba(255, 255, 255, 0.8); }

/* ── Eyebrow ── */
.rl-ph__eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09rem;
  text-transform: uppercase;
  color: var(--rl-gold, #fab529);
  margin: 0rem;
}

/* ── Headline ── */
/* Heading, copy, tiles and notice all wrap against the same measure, so the
   ragged right edge lines up instead of every block breaking at its own width. */
.rl-ph__heading,
.rl-ph__intro p,
.rl-ph__stats,
.rl-ph__notice { max-width: var(--ph-measure); }

.rl-ph__heading {
  font-family: var(--rl-font-heading);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.06rem;
  color: var(--rl-white, #ffffff);
  margin: 0rem;
  overflow-wrap: break-word;
}

.rl-ph__accent { color: var(--rl-gold, #fab529); }

.rl-ph__byline {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0rem;
}

.rl-ph__byline a { color: var(--rl-gold, #fab529); text-decoration: underline; text-underline-offset: 0.15rem; }

.rl-ph__intro p {
  font-size: 1.1875rem;
  font-weight: 300;
  line-height: 1.75rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0rem 0rem 0.75rem;
}

.rl-ph__intro p:last-child { margin-bottom: 0rem; }
.rl-ph__intro a { color: var(--rl-gold, #fab529); text-decoration: underline; text-underline-offset: 0.15rem; }

/* ── Actions ── */
.rl-ph__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  margin-top: 0.25rem;
}

.rl-ph__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--rl-gold, #fab529);
  color: var(--rl-navy, #0e1344);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.75rem 1.75rem;
  border-radius: 2.6875rem;
  text-decoration: none;
  transition: background 0.18s, transform 0.18s;
}

.rl-ph__cta:hover,
.rl-ph__cta:focus-visible { background: #000000; color: var(--rl-white, #ffffff); transform: translateY(-0.125rem); }
.rl-ph__cta-phone { font-weight: 700; }

.rl-ph__secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--rl-white, #ffffff);
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.35);
  padding-bottom: 0.25rem;
  transition: color 0.18s, border-color 0.18s;
}

.rl-ph__secondary:hover { color: var(--rl-gold, #fab529); border-color: var(--rl-gold, #fab529); }

.rl-ph__secondary-arrow {
  width: 0.4375rem;
  height: 0.4375rem;
  border-top: 0.125rem solid currentColor;
  border-right: 0.125rem solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s;
}

.rl-ph__secondary:hover .rl-ph__secondary-arrow { transform: rotate(45deg) translate(0.125rem, -0.125rem); }

/* ── Trust tiles ── */
.rl-ph__stats {
  list-style: none;
  margin: 0.75rem 0rem 0rem;
  padding: 0rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

.rl-ph__stat {
  background: rgba(255, 255, 255, 0.07);
  border: 0.0625rem solid rgba(255, 255, 255, 0.12);
  border-radius: 0.875rem;
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0rem;
}

.rl-ph__stat-value {
  font-family: var(--rl-font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rl-white, #ffffff);
}

.rl-ph__stat-label {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}

/* ── Crisis notice ── */
.rl-ph__notice {
  width: 100%;
  border-left: 0.25rem solid var(--rl-gold, #fab529);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 0rem 0.75rem 0.75rem 0rem;
  padding: 1rem 1.25rem;
}

.rl-ph__notice p {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--rl-white, #ffffff);
  margin: 0rem;
}

.rl-ph__notice a { color: var(--rl-gold, #fab529); text-decoration: underline; text-underline-offset: 0.15rem; }

/* ── Media: framed photo with a gold offset plate behind it ── */
.rl-ph__media {
  position: relative;
  flex: 1 1 40%;
  max-width: 40%;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.rl-ph__frame {
  position: relative;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.rl-ph__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Floating chip over the bottom-left of the photo. */
.rl-ph__badge {
  position: absolute;
  left: -1rem;
  bottom: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--rl-white, #ffffff);
  color: var(--rl-navy, #0e1344);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.6875rem 1.125rem;
  border-radius: 2rem;
  margin: 0rem;
  max-width: calc(100% - 1rem);
}

.rl-ph__badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--rl-gold, #fab529);
  flex-shrink: 0;
}

/* ── Large desktop ── */
@media (min-width: 93.75rem) {
  .rl-ph__heading { font-size: 4.5rem; }
}

/* ── Tablet (≤1200px) ── */
@media (max-width: 75rem) {
  .rl-ph__inner   { gap: 3rem; }
  .rl-ph__heading { font-size: 3.25rem; }
  .rl-ph__stats   { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .rl-ph__stat    { padding: 0.875rem; }
}

/* ── Stack (≤1024px): photo drops below the copy ── */
@media (max-width: 65rem) {
  .rl-ph__inner   { flex-direction: column; align-items: stretch; gap: 3rem; }
  .rl-ph__content { flex: 1 1 auto; max-width: 100%; }
  .rl-ph__media   { flex: 1 1 auto; max-width: 100%; }
  .rl-ph__frame   { aspect-ratio: 16 / 10; }
  .rl-ph__heading { font-size: 2.875rem; }
  .rl-ph__stats,
  .rl-ph__notice,
  .rl-ph__intro p { max-width: 100%; }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 48rem) {
  /* Block-to-block inside the fold on the same 2rem mobile rhythm as every
     other section (was 2.5rem, which read as a wide navy gap under the
     breadcrumb). Two classes to beat the base rule. */
  .rl-ph .rl-ph__inner { row-gap: 1.5rem; }

  .rl-ph {
    padding-top:    var(--ph-pt-m, var(--ph-pt, 6rem));
    padding-bottom: var(--ph-pb-m, var(--ph-pb, 1.40625rem));
    margin-top:     var(--ph-mt-m, var(--ph-mt, 0rem));
    margin-bottom:  var(--ph-mb-m, var(--ph-mb, 0rem));
  }
  .rl-ph__inner   { padding-inline: 1.25rem; gap: 2.5rem; }
  .rl-ph__content { gap: 1.25rem; }
  .rl-ph__heading { font-size: 2.375rem; letter-spacing: -0.03rem; }
  .rl-ph__intro p { font-size: 1.0625rem; line-height: 1.6875rem; }
  .rl-ph__frame   { aspect-ratio: 4 / 3; }
  /* Two-up tiles read better than three squeezed columns on a phone. */
  .rl-ph__stats   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-ph__stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rl-ph__badge   { left: 0.75rem; bottom: 1rem; }
}

/* ── Small mobile (≤500px) ── */
@media (max-width: 31.25rem) {
  .rl-ph__heading   { font-size: 2rem; }
  .rl-ph__actions   { gap: 0.875rem; width: 100%; }
  .rl-ph__cta       {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    padding: 0.9375rem 1.25rem;
    border-radius: 1rem;
  }
  .rl-ph__secondary { width: 100%; justify-content: center; }
}

/* ── 320px ── */
@media (max-width: 20rem) {
  .rl-ph__inner   { padding-inline: 0.75rem; }
  .rl-ph__heading { font-size: 1.75rem; }
  .rl-ph__stats   { grid-template-columns: minmax(0, 1fr); }
  .rl-ph__stat:last-child:nth-child(odd) { grid-column: auto; }
  .rl-ph__notice  { padding: 0.875rem 1rem; }
  .rl-ph__cta     { font-size: 1rem; }
  .rl-ph__badge   { font-size: 0.75rem; padding: 0.5rem 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rl-ph__cta,
  .rl-ph__secondary,
  .rl-ph__secondary-arrow { transition: none; }
  .rl-ph__cta:hover { transform: none; }
}

/* Trust strip on one line: hug the copy instead of the reading measure,
   which is sized for paragraphs. Still wraps naturally on narrow screens. */
.rl-ph--notice-wide .rl-ph__notice {
  max-width: none;
  width: fit-content;
}

/* ── Form in the fold ──
   The Gravity form takes the media column. Same navy-on-navy panel idiom as
   the closing form box, so the two read as one component. */
.rl-ph__media--form { align-self: center; }

.rl-ph__form {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 0.0625rem solid rgba(255, 255, 255, 0.16);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rl-ph__form-heading {
  font-family: var(--rl-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--rl-white, #ffffff);
  margin: 0rem;
}

.rl-ph__form-body,
.rl-ph__form-or {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0rem;
}

.rl-ph__form-or a { color: var(--rl-gold, #fab529); font-weight: 700; text-decoration: underline; text-underline-offset: 0.15rem; }
.rl-ph__form-or a:hover { text-decoration: none; }

/* Tighter rhythm than the closing form: this panel has to fit the fold. */
.rl-ph .rl-ph__form .gform_wrapper .gform_fields { gap: 0.625rem; }
.rl-ph .rl-ph__form .gform_wrapper .gfield { gap: 0.3125rem; }
.rl-ph .rl-ph__form .gform_wrapper .gfield_label { font-size: 0.875rem; }
.rl-ph .rl-ph__form .gform_wrapper .gform_fields input[type="text"],
.rl-ph .rl-ph__form .gform_wrapper .gform_fields input[type="email"],
.rl-ph .rl-ph__form .gform_wrapper .gform_fields input[type="tel"],
.rl-ph .rl-ph__form .gform_wrapper .gform_fields select { padding: 0.625rem 0.75rem; font-size: 0.9375rem; }
.rl-ph .rl-ph__form .gform_wrapper .gform_fields textarea { height: 3.75rem; min-height: 3.75rem; font-size: 0.9375rem; }
.rl-ph .rl-ph__form .gform_wrapper .gform_footer { margin-top: 0.25rem; }
/* Beats the closing form's attribute selector (0,4,1) so the pill fills the panel. */
.rl-ph .rl-ph__form .gform_wrapper .gform_footer input[type="submit"],
.rl-ph .rl-ph__form .gform_wrapper .gform_footer .gform_button { width: 100% !important; display: block; } /* !important: Gravity's id-scoped inline style sets width */
.rl-ph .rl-ph__form .rl-cf__privacy { margin: 0rem 0rem 0.625rem; font-size: 0.75rem; line-height: 1.4; }

/* Portrait beside the copy (clinician profiles). */
.rl-ph__portrait {
  width: 12rem;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.rl-ph__portrait-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

@media (max-width: 65rem) {
  .rl-ph__media--form { align-self: stretch; }
}

@media (max-width: 48rem) {
  .rl-ph__form { padding: 1.25rem; }
  .rl-ph__portrait { width: 9rem; }
  .rl-ph .rl-ph__form .gform_wrapper .gform_fields { grid-template-columns: 1fr; }
}