/* ==========================================================
   OBH REUSABLE CONTENT COMPONENTS
   Shared layout corrections for ACF-driven component renderers.

   Eyebrow appearance remains owned by 02-content.css.
   This file controls layout and spacing only.
   ========================================================== */

/* ----------------------------------------------------------
   PAGE-LEVEL SECTION RHYTHM
   ---------------------------------------------------------- */

.obh-site-page-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  gap: 36px;
}

@media (max-width: 1024px) {
  .obh-site-page-stack {
    gap: 24px;
  }
}

.obh-site-page-stack > * {
  margin: 0 !important;
}

/* ==========================================================
   CIRCULAR / CONSTELLATION LIST
   Reuses the existing Virtual Conditions constellation CSS + JS.
   ========================================================== */

.obh-component-composition {
  --virtual-inner-width: 100%;
  --virtual-inner-max: none;

  width: 100%;
  margin: 0;
  padding:
    var(--obh-section-padding-block, 36px)
    var(--obh-section-padding-inline, 36px);

  border-radius: 3px;
  box-sizing: border-box;
}

.obh-component-composition
.obh-virtual-section--conditions {
  width: 100%;
  margin: 0 !important;
  padding: 0;
}

.obh-component-composition
.obh-virtual-section--conditions
.obh-virtual-section__inner {
  width: 100%;
}

.obh-component-composition
.obh-virtual-section--conditions
.obh-virtual-section__copy {
  gap: var(--obh-section-eyebrow-gap, 24px);
}

.obh-component-circular-list__subhead,
.obh-component-circular-list__body,
.obh-component-circular-list__closing,
.obh-component-circular-list__body > :first-child,
.obh-component-circular-list__closing > :first-child {
  margin-top: 0 !important;
}

.obh-component-circular-list__subhead,
.obh-component-circular-list__body,
.obh-component-circular-list__closing,
.obh-component-circular-list__body > :last-child,
.obh-component-circular-list__closing > :last-child {
  margin-bottom: 0 !important;
}

/* ==========================================================
   TWO COLUMN + SEPARATED ITEMS
   ========================================================== */

.obh-component--separated-list {
  border-radius: 3px;
}

.obh-component--separated-list
.obh-virtual-how-we-treat__inner {
  width: 100%;
}

.obh-component--separated-list
.obh-virtual-how-we-treat__copy {
  gap: var(--obh-section-eyebrow-gap, 24px);
}

.obh-component--separated-list
.obh-virtual-how-we-treat__copy
> .obh-eyebrow,
.obh-component--separated-list
.obh-virtual-how-we-treat__copy
> .obh-type-smaller-h2,
.obh-component--separated-list
.obh-virtual-how-we-treat__copy
> .obh-virtual-how-we-treat__subhead {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.obh-component--separated-list
.obh-virtual-how-we-treat__subhead
> :first-child {
  margin-top: 0 !important;
}

.obh-component--separated-list
.obh-virtual-how-we-treat__subhead
> :last-child {
  margin-bottom: 0 !important;
}

/* Reusable separated-list layout:
   editorial copy -> item column = 80px on desktop. */
.obh-component--separated-list
.obh-virtual-how-we-treat__inner {
  column-gap: 80px;
}

/* ==========================================================
   SHARED SEPARATED-LIST ITEM HEADING TYPOGRAPHY
   ========================================================== */

.obh-component-separated-item__content
.obh-communication-point__heading {
  font-size: 1.17rem;
  font-weight: 700;
  line-height: 1.33;
}


/* ==========================================================
   TWO COLUMN + LINE BACKGROUND
   ========================================================== */

/* Full-bleed outer section.
   This is the layer that holds the decorative line background. */
.obh-component--line-background {
  position: relative;

  width: 100vw;
  max-width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  border-radius: 0;
  overflow: hidden;
}


/* Force the decorative line masks to sit flush
   against the full viewport edges. */
.obh-component--line-background::before {
  left: 0 !important;

  -webkit-mask-position: left center !important;
  mask-position: left center !important;
}

.obh-component--line-background::after {
  right: 0 !important;

  -webkit-mask-position: right center !important;
  mask-position: right center !important;
}


/* Standard centered content panel.
   The decorative background remains full viewport width,
   while the white/translucent content panel stays at 90%. */
.obh-component--line-background
.obh-virtual-program-structure__inner {
  width: 90%;
  max-width: none;

  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================
   TWO COLUMN BLUE BACKGROUND + LEFT LOGO
   Source design: Professionals Communication Standards.
   ========================================================== */

.obh-component--logo-blue {
  background: linear-gradient(
    135deg,
    #FBFEFF 0%,
    #e7eef4 100%
  );
  border-radius: 3px;
}

.obh-component--logo-blue
.obh-prof-communication__copy {
  height: 100%;
}

.obh-component--logo-blue
.obh-prof-communication__logo {
  margin: 0;
}

/* Reusable spacing contract:
   logo -> eyebrow = 56px. */
.obh-component--logo-blue
.obh-component-logo-blue__eyebrow {
  margin: 0 0 var(--obh-section-eyebrow-gap, 24px);
}

.obh-component--logo-blue
.obh-prof-communication__logo + .obh-component-logo-blue__eyebrow {
  margin-top: var(--obh-section-note-gap, 56px);
}

.obh-component-instance--obh-clinical-safety
.obh-component-logo-blue__subhead {
  width: 100%;
  max-width: 30ch;
  margin: 0 0 var(--obh-section-eyebrow-gap, 24px);
}

.obh-component-instance--obh-clinical-safety
.obh-prof-communication__intro {
  margin: 0;
}

.obh-component-instance--obh-clinical-safety
.obh-prof-communication__points {
  align-self: center;
}

/* ==========================================================
   SINGLE COLUMN EDITORIAL FEATURE
   Used when a forced two-column split would weaken short narrative copy.
   ========================================================== */

.obh-component--editorial-feature {
  width: 100%;
  margin: 0;
  padding:
    var(--obh-section-padding-block, 36px)
    var(--obh-section-padding-inline, 36px);

  color: var(--obh-navy);
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fbfe 100%
    );

  border-radius: 3px;
  box-sizing: border-box;
}

.obh-component-editorial-feature__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;

  gap: 0;
}

.obh-component-editorial-feature__subhead {
  width: min(100%, 34ch);
  margin: 0;
}

/* Reusable editorial rhythm:
   eyebrow -> serif subhead = 24px
   serif subhead -> body = 24px. */
.obh-component-editorial-feature__inner
> .obh-eyebrow + .obh-component-editorial-feature__subhead,
.obh-component-editorial-feature__inner
> .obh-eyebrow + .obh-component-editorial-feature__body,
.obh-component-editorial-feature__inner
> .obh-component-editorial-feature__subhead + .obh-component-editorial-feature__body {
  margin-top: var(--obh-section-eyebrow-gap, 24px);
}

.obh-component-editorial-feature__body {
  width: min(100%, 900px);
  margin: 0;
}

.obh-component-editorial-feature__body > :first-child {
  margin-top: 0 !important;
}

.obh-component-editorial-feature__body > :last-child {
  margin-bottom: 0 !important;
}

.obh-component-editorial-feature__supporting {
  width: min(100%, 920px);
  margin: 0;
  padding: 24px 0 0 24px;

  border-top: 1px solid rgba(32, 78, 136, 0.14);
  border-left: 3px solid rgba(39, 153, 222, 0.45);

  box-sizing: border-box;
}

/* Reusable spacing contract:
   body copy -> supporting editorial box = 56px. */
.obh-component-editorial-feature__body
+ .obh-component-editorial-feature__supporting {
  margin-top: var(--obh-section-note-gap, 56px);
}

/* Preserve the same separation if an instance intentionally
   omits the standard body-copy field. */
.obh-component-editorial-feature__subhead
+ .obh-component-editorial-feature__supporting {
  margin-top: var(--obh-section-note-gap, 56px);
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {
  .obh-component--separated-list
  .obh-virtual-how-we-treat__inner {
    column-gap: 0;
  }

  .obh-component-instance--obh-clinical-safety
  .obh-component-logo-blue__eyebrow {
    margin-top: 40px;
  }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {
  .obh-component-composition,
  .obh-component--separated-list,
  .obh-component--editorial-feature,
  .obh-component--logo-blue
  .obh-prof-section__inner {
    padding: 44px 28px;
  }

  .obh-component--separated-list
  .obh-virtual-how-we-treat__inner {
    width: 100%;
  }

  .obh-component-instance--obh-clinical-safety
  .obh-component-logo-blue__eyebrow {
    margin-top: 36px;
  }

  .obh-component-editorial-feature__subhead,
  .obh-component-editorial-feature__body,
  .obh-component-editorial-feature__supporting {
    width: 100%;
    max-width: none;
  }

  .obh-component-editorial-feature__supporting {
    padding-left: 18px;
  }
}

.obh-component--editorial-feature .obh-component-editorial-feature__inner {
  row-gap: 0 !important;
}

.obh-component--editorial-feature .obh-eyebrow {
  margin: 0 !important;
}

.obh-component--editorial-feature .obh-component-editorial-feature__subhead {
  margin: var(--obh-section-eyebrow-gap, 24px) 0 0 !important;
}

.obh-component--editorial-feature .obh-component-editorial-feature__body {
  margin: var(--obh-section-eyebrow-gap, 24px) 0 0 !important;
}

.obh-component--editorial-feature .obh-component-editorial-feature__supporting {
  margin: var(--obh-section-note-gap, 56px) 0 0 !important;
}

/* =========================================================
   REUSABLE DARK GRADIENT + WHITE LOGO SECTION

   Eyebrow visuals remain owned exclusively by:
   .obh-eyebrow
   .obh-eyebrow-light

   This component controls layout and spacing only.
   ========================================================= */

.obh-component--dark-logo-section {
  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 56px 36px;

  color: var(--obh-white);

  background:
    linear-gradient(
      121deg,
      var(--obh-navy) 0%,
      var(--obh-purple-deep) 100%
    );

  border-radius: var(--obh-section-radius);
  box-sizing: border-box;
  overflow: hidden;
}


/* =========================================================
   CENTERED SECTION INTRO
   ========================================================= */

.obh-dark-logo-section__header {
  align-items: center;

  width: 50%;
  max-width: 50%;

  margin: 0 auto;

  color: var(--obh-white);
  text-align: center;
}

.obh-dark-logo-section__header
.obh-dark-logo-section__subhead,
.obh-dark-logo-section__header
.obh-dark-logo-section__intro {
  width: 100%;
  max-width: 100%;

  color: var(--obh-white);
  text-align: center;
}

.obh-dark-logo-section__divider {
  width: 100%;

  margin: 0;
  padding: 0;
}

.obh-dark-logo-section__divider .elementor-divider {
  display: flex;
  justify-content: center;
}


/* =========================================================
   CONTENT ROW COLLECTION
   ========================================================= */

.obh-dark-logo-section__rows {
  display: grid;

  width: 100%;
  min-width: 0;

  margin-top: var(--obh-section-note-gap);
  padding: 0;

  row-gap: var(--obh-section-note-gap);
}


/* =========================================================
   INDIVIDUAL CONTENT ROW
   ========================================================= */

.obh-dark-logo-section__row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  align-items: stretch;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 36px;

  column-gap: 80px;
  row-gap: var(--obh-section-note-gap);

  border: 1px solid #4E486A;
  border-radius: 3px;

  box-sizing: border-box;
}

.obh-dark-logo-section__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  min-width: 0;
}

.obh-dark-logo-section__copy-stack {
  width: 100%;
  min-width: 0;
}

.obh-dark-logo-section__row-subhead,
.obh-dark-logo-section__row-body {
  width: 100%;
  max-width: 100%;

  color: var(--obh-white);
}

.obh-dark-logo-section__row-body {
  margin: 0;
}

.obh-dark-logo-section__row-body > :first-child {
  margin-top: 0 !important;
}

.obh-dark-logo-section__row-body > :last-child {
  margin-bottom: 0 !important;
}


/* Existing global button component owns button appearance. */

.obh-dark-logo-section__button {
  align-self: flex-start;
}

/* =========================================================
   WHITE LOGO GRID
   ========================================================= */

.obh-dark-logo-section__logos {
  display: grid;

  align-content: center;
  align-items: center;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  column-gap: 32px;
  row-gap: 32px;

  list-style: none;
}


/* Mental Health + Substance Use — 4 logos */
.obh-dark-logo-section__row:first-child
.obh-dark-logo-section__logos {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}


/* Eating Disorder Treatment — 3 logos */
.obh-dark-logo-section__row:nth-child(2)
.obh-dark-logo-section__logos {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

.obh-dark-logo-section__logo-item {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-width: 0;
  min-height: 120px;

  margin: 0;
  padding: 12px;

  list-style: none;

  box-sizing: border-box;
}

.obh-dark-logo-section__logo-card {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  color: inherit;
  background: transparent;

  border: 0;
  border-radius: 0;
  box-shadow: none;

  text-decoration: none;
}

a.obh-dark-logo-section__logo-card:hover,
a.obh-dark-logo-section__logo-card:focus-visible {
  background: transparent;
}

a.obh-dark-logo-section__logo-card:focus-visible {
  outline: 2px solid var(--obh-accent);
  outline-offset: 6px;
}

.obh-dark-logo-section__logo {
  display: block;

  width: auto !important;
  max-width: 88% !important;

  height: auto !important;
  max-height: 88px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  object-fit: contain;
  object-position: center center;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

  .obh-dark-logo-section__row {
    grid-template-columns: minmax(0, 1fr);

    column-gap: 0;
    row-gap: 48px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .obh-component--dark-logo-section {
    padding: 44px 28px;
  }

  .obh-dark-logo-section__header {
    width: 90%;
    max-width: 90%;
  }

  .obh-dark-logo-section__rows {
    row-gap: 44px;
  }

  .obh-dark-logo-section__row {
    grid-template-columns: minmax(0, 1fr);

    padding: 28px;

    column-gap: 0;
    row-gap: 44px;
  }

  .obh-dark-logo-section__row:first-child
  .obh-dark-logo-section__logos,
  .obh-dark-logo-section__row:nth-child(2)
  .obh-dark-logo-section__logos {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    column-gap: 24px;
    row-gap: 28px;
  }

  .obh-dark-logo-section__logo {
    max-height: 72px !important;
  }

}
/* ==========================================================
   THE ODYSSEY WAY — SIX CORE VALUES

   Desktop: 3 columns / 2 rows
   Tablet: 2 columns / 3 rows
   Mobile: 1 column
   ========================================================== */


/* ----------------------------------------------------------
   SECTION HEADING + INTRO
   ---------------------------------------------------------- */

.obh-component-instance--obh-way-values
.obh-about-numbers__heading {
  margin-bottom: var(--obh-section-eyebrow-gap);
}

.obh-component-instance--obh-way-values
.obh-component-stats__intro {
  width: min(100%, 760px);

  margin:
    0
    0
    var(--obh-section-row-gap);
}


/* ----------------------------------------------------------
   VALUES GRID
   ---------------------------------------------------------- */

.obh-component-instance--obh-way-values
.obh-about-stats {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  column-gap: 48px;
  row-gap: 48px;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ----------------------------------------------------------
   INDIVIDUAL VALUE GROUP
   ---------------------------------------------------------- */

.obh-component-instance--obh-way-values
.obh-about-stat,
.obh-component-instance--obh-way-values
.obh-about-stat:first-child,
.obh-component-instance--obh-way-values
.obh-about-stat:last-child,
.obh-component-instance--obh-way-values
.obh-about-stat:nth-child(3),
.obh-component-instance--obh-way-values
.obh-about-stat:nth-child(4) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
}


/* ----------------------------------------------------------
   VALUE TYPOGRAPHY
   Respect / Service / Flexibility / etc.
   ---------------------------------------------------------- */

.obh-component-instance--obh-way-values
.obh-about-stat__value {
  margin: 0 !important;

  max-width: 100%;

  font-family:
    var(--obh-type-smaller-h2-family) !important;

  font-size: 2rem !important;

  font-weight:
    var(--obh-type-smaller-h2-weight) !important;

  line-height:
    var(--obh-type-smaller-h2-line-height) !important;

  letter-spacing:
    var(--obh-type-smaller-h2-letter-spacing) !important;

  overflow-wrap: normal;
  word-break: normal;

  background:
    linear-gradient(
      90deg,
      var(--obh-primary),
      var(--obh-purple)
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent !important;
  -webkit-text-fill-color: transparent;
}


/* ----------------------------------------------------------
   VALUE DESCRIPTION
   ---------------------------------------------------------- */

.obh-component-instance--obh-way-values
.obh-about-stat__label {
  margin: 12px 0 0 !important;

  max-width: 38ch;

  color: var(--obh-navy) !important;

  font-family:
    var(--obh-font-body) !important;

  font-size: 1.05rem !important;

  font-weight: 400 !important;

  line-height: 1.55 !important;

  letter-spacing: -0.1px !important;

  text-align: left;
}


/* Any editor-created spans inside the label should inherit
   the intended label typography. */

.obh-component-instance--obh-way-values
.obh-about-stat__label span {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}


/* ----------------------------------------------------------
   ROW SEPARATION

   Add a subtle divider above the second row only.
   ---------------------------------------------------------- */

.obh-component-instance--obh-way-values
.obh-about-stat:nth-child(n+4) {
  padding-top: 32px !important;

  border-top:
    1px solid
    rgba(16, 42, 77, 0.14) !important;
}


/* ==========================================================
   TABLET — TWO COLUMNS
   ========================================================== */

@media (max-width: 1024px) {

  .obh-component-instance--obh-way-values
  .obh-about-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    column-gap: 36px;
    row-gap: 40px;
  }

  .obh-component-instance--obh-way-values
  .obh-about-stat:nth-child(n+3) {
    padding-top: 28px !important;

    border-top:
      1px solid
      rgba(16, 42, 77, 0.14) !important;
  }

}


/* ==========================================================
   MOBILE — ONE VALUE PER ROW
   ========================================================== */

@media (max-width: 767px) {

  .obh-component-instance--obh-way-values
  .obh-about-stats {
    grid-template-columns: 1fr;

    gap: 0;
  }

  .obh-component-instance--obh-way-values
  .obh-about-stat,
  .obh-component-instance--obh-way-values
  .obh-about-stat:first-child,
  .obh-component-instance--obh-way-values
  .obh-about-stat:last-child,
  .obh-component-instance--obh-way-values
  .obh-about-stat:nth-child(3),
  .obh-component-instance--obh-way-values
  .obh-about-stat:nth-child(4) {
    width: 100%;

    padding:
      28px
      0 !important;

    border: 0 !important;
  }

  .obh-component-instance--obh-way-values
  .obh-about-stat + .obh-about-stat {
    border-top:
      1px solid
      rgba(16, 42, 77, 0.14) !important;
  }

  .obh-component-instance--obh-way-values
  .obh-about-stat:first-child {
    padding-top: 0 !important;
  }

  .obh-component-instance--obh-way-values
  .obh-about-stat:last-child {
    padding-bottom: 0 !important;
  }

  .obh-component-instance--obh-way-values
  .obh-about-stat__label {
    max-width: none;
  }

}

/* ----------------------------------------------------------
   THREE GUIDING PILLARS
   Use the global Shippori subhead styling for this section's
   intro only.
   ---------------------------------------------------------- */

.obh-component-instance--obh-way-pillars
.obh-prof-serif-lead {
  font-family: var(--obh-type-shippori-subhead-family) !important;
  font-size: var(--obh-type-shippori-subhead-size) !important;
  font-weight: var(--obh-type-shippori-subhead-weight) !important;
  line-height: var(--obh-type-shippori-subhead-line-height) !important;
  letter-spacing: var(--obh-type-shippori-subhead-letter-spacing) !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .obh-component-instance--obh-way-values
  .obh-about-stats {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
}

/* ----------------------------------------------------------
   ODYSSEY WAY — SIX CORE VALUE TYPOGRAPHY

   Use the global Smaller H2 typography and Odyssey
   primary → purple gradient for this component only.
   ---------------------------------------------------------- */

.obh-component-instance--obh-way-values
.obh-about-stat__value {
  margin: 0;

  font-family: var(--obh-type-smaller-h2-family) !important;
  font-size: var(--obh-type-smaller-h2-size) !important;
  font-weight: var(--obh-type-smaller-h2-weight) !important;
  line-height: var(--obh-type-smaller-h2-line-height) !important;
  letter-spacing: var(--obh-type-smaller-h2-letter-spacing) !important;

  background: linear-gradient(
    90deg,
    var(--obh-primary),
    var(--obh-purple)
  );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================
   LEVELS OF CARE — FULL-WIDTH INTRO + FULL-WIDTH LIST
   Instance: obh_levels_list
   ========================================================== */

.obh-component-instance--obh-levels-list
.obh-virtual-how-we-treat__inner {
  display: grid;

  grid-template-columns: minmax(0, 1fr);

  row-gap: var(--obh-section-row-gap);
}


/* Intro / eyebrow / subhead block */

.obh-component-instance--obh-levels-list
.obh-virtual-how-we-treat__copy {
  width: 100%;
  max-width: none;
}


/* Keep the intro text from becoming excessively wide */

.obh-component-instance--obh-levels-list
.obh-virtual-how-we-treat__copy
> .obh-type-smaller-h2 {
  width: min(100%, 760px);
  max-width: none;
}


/* List now sits beneath the intro and uses the full section width */

.obh-component-instance--obh-levels-list
.obh-virtual-how-we-treat__modalities {
  width: 100%;
  max-width: none;
}


/* Two-column list across the full available width */

.obh-component-instance--obh-levels-list
.obh-virtual-how-we-treat__list {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap: 44px;
  row-gap: 0;

  width: 100%;
}


/* Tablet / mobile */

@media (max-width: 767px) {

  .obh-component-instance--obh-levels-list
  .obh-virtual-how-we-treat__list {
    grid-template-columns: minmax(0, 1fr);

    column-gap: 0;
  }

}
/* ----------------------------------------------------------
   LEVELS OF CARE — SUPPORTING LINE
   ---------------------------------------------------------- */

.obh-component-instance--obh-levels-list
.obh-component-item-supporting {
  color: var(--obh-purple);

  font-size: 1.03rem;
  line-height: 1.35;
  font-weight: 500

  margin-top: 20px;
  margin-bottom: 28px
}

/* ----------------------------------------------------------
   LEVELS OF CARE — BLOCK SEPARATION
   ---------------------------------------------------------- */

.obh-component-instance--obh-levels-list
.obh-virtual-how-we-treat__list {
  column-gap: 64px;
  row-gap: 44px;
}

.obh-component-instance--obh-levels-list
.obh-virtual-how-we-treat__list > li {
  padding: 24px 0 28px;

  border-top: 0;
  border-bottom: 1px solid rgba(23, 54, 95, 0.16);
}

.obh-component-instance--obh-levels-list
.obh-virtual-how-we-treat__list > li:last-child {
  border-bottom: 0;
}


/* ==========================================================
   LEVELS OF CARE PAGE
   List -> How Odyssey Matches Clients section
   ========================================================== */


/* ----------------------------------------------------------
   1. STANDARD 56PX SPACE BETWEEN THE TWO SECTIONS
   ---------------------------------------------------------- */

.obh-component-instance--obh-levels-list
+ .obh-component--line-background {
  margin-top: var(--obh-section-row-gap) !important;
}


/* ----------------------------------------------------------
   2. LEFT COLUMN INTERNAL SPACING

   The generic Line Background component normally uses a
   flex gap between every child. For this specific section,
   control those relationships individually instead.
   ---------------------------------------------------------- */

.obh-component-instance--obh-levels-list
+ .obh-component--line-background
.obh-virtual-program-structure__intro {
  gap: 0;
}


/* Eyebrow -> Shippori subhead = standard 24px */

.obh-component-instance--obh-levels-list
+ .obh-component--line-background
.obh-virtual-program-structure__heading
+ .obh-virtual-program-structure__subhead {
  margin-top: var(--obh-section-eyebrow-gap) !important;
}


/* Shippori subhead -> body copy = 24px */

.obh-component-instance--obh-levels-list
+ .obh-component--line-background
.obh-virtual-program-structure__subhead
+ .obh-body-copy {
  margin-top: 24px !important;
}


/* Prevent the paragraph inside the body-copy wrapper from
   adding another top margin on top of that 24px. */

.obh-component-instance--obh-levels-list
+ .obh-component--line-background
.obh-body-copy > :first-child {
  margin-top: 0 !important;
}

/* ==========================================================
   TREATMENT PAGE COMPONENTS
   Shared by Mental Health, Substance Use, Co-Occurring,
   Eating Disorders, and future treatment page builds.
   ========================================================== */


/* ----------------------------------------------------------
   LINE BACKGROUND — TRUE FULL-BLEED CENTERING

   The component was previously width:100vw plus compensating
   margins. Inside the constrained page-content wrapper that
   can shift the entire section horizontally.

   Let the negative margins define the full-bleed width instead.
   ---------------------------------------------------------- */

.obh-component--line-background {
  width: auto;
  max-width: none;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* Keep the actual content centered inside the full-width bg. */
.obh-component--line-background
.obh-virtual-program-structure__inner {
  width: 90%;
  max-width: none;

  margin-left: auto;
  margin-right: auto;
}


/* ----------------------------------------------------------
   CONDITIONS — HEADING ROW + CONTENT GRID

   Instance naming convention means this automatically applies
   to MH, SUD and future treatment prefixes ending -conditions.
   ---------------------------------------------------------- */

.obh-component--line-background[class*="obh-component-instance--obh-"][class*="-conditions"]
.obh-virtual-program-structure__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--obh-section-row-gap, 56px);
}


.obh-component--line-background[class*="obh-component-instance--obh-"][class*="-conditions"]
.obh-virtual-program-structure__intro {
  width: 100%;
  max-width: 760px;
}


.obh-component--line-background[class*="obh-component-instance--obh-"][class*="-conditions"]
.obh-virtual-program-structure__details {
  width: 100%;
  min-width: 0;
}


/* ----------------------------------------------------------
   LEVELS OF CARE — BOLD LABEL
   ---------------------------------------------------------- */

.obh-component--line-background[class*="obh-component-instance--obh-"][class*="-levels"]
.obh-virtual-program-structure__item-label {
  font-weight: 600;
}


/* ----------------------------------------------------------
   TREATMENT BRANDS — LINK LIST
   Plus markers + Shippori link typography
   ---------------------------------------------------------- */

/* List container */
.obh-component--three-column[class*="obh-component-instance--obh-"][class*="-brands"]
.obh-referral-step__copy > ul {
  margin: 24px 0 0;
  padding: 0;

  list-style: none;
}


/* Individual linked brand item */
.obh-component--three-column[class*="obh-component-instance--obh-"][class*="-brands"]
.obh-referral-step__copy > ul > li {
  position: relative;

  margin: 0;
  padding-left: 22px;

  font-family: var(--obh-font-heading);
  font-weight: 700;

  /* Adjust these three values whenever you want */
  color: var(--obh-primary);
  letter-spacing: -0.4px;
  line-height: 1.35;
}


/* 16px between linked items */
.obh-component--three-column[class*="obh-component-instance--obh-"][class*="-brands"]
.obh-referral-step__copy > ul > li + li {
  margin-top: 16px;
}


/* Same + marker treatment as Conditions */
.obh-component--three-column[class*="obh-component-instance--obh-"][class*="-brands"]
.obh-referral-step__copy > ul > li::before {
  content: "+";

  position: absolute;
  top: 0;
  left: 0;

  color: #2799DE;
  font-family: var(--obh-font-body);
  font-weight: 600;
  line-height: inherit;
}


/* Link inherits the typography from the LI */
.obh-component--three-column[class*="obh-component-instance--obh-"][class*="-brands"]
.obh-referral-step__copy > ul > li > a {
  color: inherit;
  font-family: inherit;
  font-size: 0.95rem
  font-weight: inherit;
  letter-spacing: -0.85;
  line-height: inherit;

  text-decoration: none;
}

/* ----------------------------------------------------------
   RESPONSIVE CONDITIONS GRID
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

}


@media (max-width: 767px) {

  .obh-component--line-background[class*="obh-component-instance--obh-"][class*="-conditions"]
  .obh-virtual-program-structure__inner {
    gap: 44px;
  }

}
/* ==========================================================
   TREATMENT BRANDS — RESPONSIVE CARD COLUMNS

   3 brands = 3 columns
   4 brands = 4 columns
   ========================================================== */

/* A Treatment Brands section containing a fourth card
   automatically switches to four columns. */
.obh-component--three-column[class*="obh-component-instance--obh-"][class*="-brands"]
.obh-referral-steps:has(> .obh-referral-step:nth-child(4)) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* Tablet */
@media (max-width: 1024px) {

  .obh-component--three-column[class*="obh-component-instance--obh-"][class*="-brands"]
  .obh-referral-steps:has(> .obh-referral-step:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* Mobile */
@media (max-width: 767px) {

  .obh-component--three-column[class*="obh-component-instance--obh-"][class*="-brands"]
  .obh-referral-steps:has(> .obh-referral-step:nth-child(4)) {
    grid-template-columns: minmax(0, 1fr);
  }

}

/* ==========================================================
   TREATMENT BRANDS — RESPONSIVE CARD COLUMNS

   3 brands = 3 columns
   4 brands = 4 columns
   ========================================================== */

/* A Treatment Brands section containing a fourth card
   automatically switches to four columns. */
.obh-component--three-column[class*="obh-component-instance--obh-"][class*="-brands"]
.obh-referral-steps:has(> .obh-referral-step:nth-child(4)) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* Tablet */
@media (max-width: 1024px) {

  .obh-component--three-column[class*="obh-component-instance--obh-"][class*="-brands"]
  .obh-referral-steps:has(> .obh-referral-step:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* Mobile */
@media (max-width: 767px) {

  .obh-component--three-column[class*="obh-component-instance--obh-"][class*="-brands"]
  .obh-referral-steps:has(> .obh-referral-step:nth-child(4)) {
    grid-template-columns: minmax(0, 1fr);
  }

}


/* ==========================================================
   TWO COLUMN BLUE BACKGROUND WITH LEFT LOGO
   MOBILE: STACK TO ONE COLUMN
   ========================================================== */

@media (max-width: 767px) {

  .obh-component--logo-blue
  .obh-prof-communication__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .obh-component--logo-blue
  .obh-prof-communication__copy,
  .obh-component--logo-blue
  .obh-prof-communication__points {
    grid-column: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

}
/* EDITORIAL FEATURE SUPPORTING HEADING
   Extends the established Odyssey editorial-feature treatment.
   Eyebrow styling remains owned exclusively by .obh-eyebrow.
   ---------------------------------------------------------- */

.obh-component-editorial-feature__supporting-heading {
  margin: 0 0 16px;
  color: var(--obh-navy);
  font-size: 1.4rem;
}

.obh-component-editorial-feature__supporting-copy {
  margin: 0;
  font-size: 1.2rem !important;
  line-height: 1.4 !important;
  letter-spacing: -0.8px !important;
}

/* Versatile Nutrition — instance-specific typography */

.obh-component-instance--obh-ed-nutrition
.obh-component-editorial-feature__supporting-heading {
  color: var(--obh-purple);
  font-size: 1.5rem;
}

.obh-component-instance--obh-ed-nutrition
.obh-component-editorial-feature__supporting-copy {
  color: var(--obh-primary-deep);
  font-size: 1.15rem !important;
}

/* =========================================================
   EATING DISORDERS — TREATMENT BRAND LINKS
   Instance-specific CTA/link styling.
   ========================================================= */

.obh-component-instance--obh-ed-brands
.obh-referral-step__copy a {
  font-family: var(--obh-font-heading) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.9px;

  color: var(--obh-purple);
}

/* ==========================================================
   OBH STANDARD CONTENT SECTION
   Standard semantic H2 + narrative body content.
   Intentionally does not use .obh-eyebrow.
   ========================================================== */

.obh-component--standard-content {
  width: 100%;
  margin: 0;

  padding:
    var(--obh-section-padding-block, 36px)
    var(--obh-section-padding-inline, 36px);

  color: var(--obh-navy);
  background: var(--obh-white);
  border-radius: 3px;
  box-sizing: border-box;
}

.obh-component-standard-content__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;
}

.obh-component-standard-content__heading {
  width: min(100%, 34ch);
  margin: 0;
}

.obh-component-standard-content__body {
  width: min(100%, 900px);

  margin:
    var(--obh-section-eyebrow-gap, 24px)
    0
    0;
}

.obh-component-standard-content__body > :first-child {
  margin-top: 0 !important;
}

.obh-component-standard-content__body > :last-child {
  margin-bottom: 0 !important;
}

.obh-component-standard-content__button {
  margin-top: var(--obh-section-button-gap, 36px);
}

@media (max-width: 767px) {
  .obh-component--standard-content {
    padding: 44px 28px;
  }

  .obh-component-standard-content__heading,
  .obh-component-standard-content__body {
    width: 100%;
    max-width: none;
  }
}

/* ==========================================================
   TWO COLUMN + LINE BACKGROUND
   Program-structure label typography
   ========================================================== */

.obh-component--line-background
.obh-virtual-program-structure__label,
.obh-component--line-background
.obh-virtual-program-structure__label strong {
  font-size: 1.17rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.1px;
}

/* ==========================================================
   REUSABLE TIMELINE
   Editorial vertical milestone treatment
   ========================================================== */

.obh-component--timeline {
  --obh-timeline-year-width: 112px;
  --obh-timeline-gap: 72px;
  --obh-timeline-line-x: 148px;

  width: 100%;
  margin: 0;

  padding:
    var(--obh-section-padding-block, 36px)
    var(--obh-section-padding-inline, 36px);

  color: var(--obh-navy);

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fbfe 100%
    );

  border-radius: 3px;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   INNER
   ---------------------------------------------------------- */

.obh-component-timeline__inner {
  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;
}


/* ----------------------------------------------------------
   SECTION INTRO
   ---------------------------------------------------------- */

.obh-component-timeline__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: min(100%, 900px);

  margin: 0 0 var(--obh-section-row-gap, 56px);
  padding: 0;

  gap: var(--obh-section-eyebrow-gap, 24px);
}

.obh-component-timeline__intro > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.obh-component-timeline__intro
.obh-body-copy {
  width: min(100%, 820px);
}


/* ----------------------------------------------------------
   TIMELINE TRACK
   ---------------------------------------------------------- */

.obh-component-timeline__items {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  gap: var(--obh-section-row-gap, 56px);

  list-style: none;
}


/* Continuous Odyssey gradient spine */

.obh-component-timeline__items::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: 10px;
  bottom: 10px;
  left: var(--obh-timeline-line-x);

  width: 2px;

  background:
    linear-gradient(
      180deg,
      var(--obh-primary) 0%,
      #2799DE 45%,
      var(--obh-purple) 100%
    );

  border-radius: 999px;

  opacity: 0.75;
}


/* ----------------------------------------------------------
   INDIVIDUAL MILESTONE
   ---------------------------------------------------------- */

.obh-component-timeline__item {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    var(--obh-timeline-year-width)
    minmax(0, 1fr);

  column-gap: var(--obh-timeline-gap);
  align-items: start;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  list-style: none;
}


/* Gradient milestone node */

.obh-component-timeline__item::before {
  content: "";

  position: absolute;

  top: 7px;
  left: calc(var(--obh-timeline-line-x) - 8px);

  width: 18px;
  height: 18px;

  background:
    linear-gradient(
      135deg,
      var(--obh-primary),
      var(--obh-purple)
    );

  border: 4px solid #ffffff;
  border-radius: 50%;

  box-shadow:
    0 0 0 1px rgba(32, 78, 136, 0.16),
    0 4px 14px rgba(32, 78, 136, 0.14);

  box-sizing: border-box;
}


/* ----------------------------------------------------------
   YEAR
   ---------------------------------------------------------- */

.obh-component-timeline__year {
  margin: 0;
  padding: 0;

  color: var(--obh-primary);

  font-family: var(--obh-font-heading);
  font-size: clamp(1.75rem, 2.2vw, 2.35rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.8px;
}


/* ----------------------------------------------------------
   MILESTONE CARD
   ---------------------------------------------------------- */

.obh-component-timeline__copy {
  position: relative;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 28px 32px;

  color: var(--obh-navy);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(248, 251, 254, 0.96) 100%
    );

  border:
    1px solid
    rgba(32, 78, 136, 0.12);

  border-radius: 3px;

  box-shadow:
    0 10px 30px
    rgba(16, 42, 77, 0.055);

  box-sizing: border-box;
}


/* Small horizontal connector from spine to card */

.obh-component-timeline__copy::before {
  content: "";

  position: absolute;

  top: 15px;
  left: calc(-1 * var(--obh-timeline-gap) + 38px);

  width: 34px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(39, 153, 222, 0.55),
      rgba(32, 78, 136, 0.18)
    );
}


/* Normalize WYSIWYG output */

.obh-component-timeline__copy > :first-child {
  margin-top: 0 !important;
}

.obh-component-timeline__copy > :last-child {
  margin-bottom: 0 !important;
}


/* The renderer intentionally uses the Shippori subhead utility.
   Bring the milestone narrative down slightly so longer entries
   remain readable while preserving the editorial serif treatment. */

.obh-component-timeline__copy.obh-type-shippori-subhead {
  font-size: clamp(1.08rem, 1.35vw, 1.25rem);
  line-height: 1.5;
}


/* ----------------------------------------------------------
   LINKS INSIDE MILESTONES
   ---------------------------------------------------------- */

.obh-component-timeline__copy a {
  color: var(--obh-purple);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.obh-component-timeline__copy a:hover,
.obh-component-timeline__copy a:focus-visible {
  color: var(--obh-primary);
}


/* ----------------------------------------------------------
   OPTIONAL SECTION BUTTON
   ---------------------------------------------------------- */

.obh-component-timeline__button {
  margin-top: var(--obh-section-row-gap, 56px);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

  .obh-component--timeline {
    --obh-timeline-year-width: 96px;
    --obh-timeline-gap: 56px;
    --obh-timeline-line-x: 122px;
  }

  .obh-component-timeline__copy {
    padding: 26px 28px;
  }

  .obh-component-timeline__copy::before {
    left: calc(-1 * var(--obh-timeline-gap) + 30px);
    width: 28px;
  }
}


/* ==========================================================
   MOBILE
   Compact left-rail timeline
   ========================================================== */

@media (max-width: 767px) {

  .obh-component--timeline {
    --obh-timeline-line-x: 9px;

    padding: 44px 28px;
  }

  .obh-component-timeline__intro {
    width: 100%;
    margin-bottom: 44px;
  }

  .obh-component-timeline__items {
    gap: 36px;

    padding-left: 34px;
  }

  .obh-component-timeline__items::before {
    left: var(--obh-timeline-line-x);
  }

  .obh-component-timeline__item {
    grid-template-columns: minmax(0, 1fr);

    row-gap: 16px;
  }

  .obh-component-timeline__item::before {
    top: 3px;
    left: calc(var(--obh-timeline-line-x) - 8px - 34px);
  }

  .obh-component-timeline__year {
    font-size: 1.6rem;
  }

  .obh-component-timeline__copy {
    padding: 22px 24px;
  }

  .obh-component-timeline__copy::before {
    display: none;
  }

  .obh-component-timeline__copy.obh-type-shippori-subhead {
    font-size: 1.05rem;
    line-height: 1.5;
  }
}

/* ==========================================================
   TIMELINE
   Preserve Shippori subhead weight inside WYSIWYG markup
   ========================================================== */

.obh-component-timeline__copy.obh-type-shippori-subhead,
.obh-component-timeline__copy.obh-type-shippori-subhead p,
.obh-component-timeline__copy.obh-type-shippori-subhead span {
  font-weight: var(--obh-type-shippori-subhead-weight) !important;
}

/* ==========================================================
   OUR STORY
   Timeline milestone copy size
   ========================================================== */

.obh-site-page-stack--our-story
.obh-component-timeline__copy.obh-type-shippori-subhead {
  font-size: 1.25rem !important;
}

/* ==========================================================
   TREATMENT LEVELS OF CARE — SHARED LAYOUT

   Treatment Levels use the standard Line Background component,
   but place the intro content above the full-width levels list.
   ========================================================== */

.obh-component--line-background[class*="obh-component-instance--obh-"][class*="-levels"]
.obh-virtual-program-structure__inner {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  row-gap: var(--obh-section-row-gap, 56px);
}

.obh-component--line-background[class*="obh-component-instance--obh-"][class*="-levels"]
.obh-virtual-program-structure__intro,
.obh-component--line-background[class*="obh-component-instance--obh-"][class*="-levels"]
.obh-virtual-program-structure__details {
  grid-column: 1;
  width: 100%;
  min-width: 0;
}


/* ==========================================================
   LINE BACKGROUND — CONSISTENT LABEL / DESCRIPTION ALIGNMENT

   Applies globally to reusable Line Background sections.
   - Label always occupies row 1
   - Description always occupies row 2
   - Description begins a consistent distance below the label
   - Description aligns beneath the item label with a 12px gap
   ========================================================== */

.obh-component--line-background
.obh-virtual-program-structure__list > li {
  position: relative;

  align-self: start !important;
  align-items: start !important;
  align-content: start !important;

  grid-template-columns:
    34px
    minmax(0, 1fr) !important;

  grid-template-rows:
    auto
    auto !important;

  column-gap: 12px !important;
  row-gap: 12px !important;

  min-height: 0 !important;
  height: auto !important;
}


/* Plus icon stays visually at top left, but is removed from
   grid flow so its 34px height cannot enlarge the title row. */
.obh-component--line-background
.obh-virtual-program-structure__list > li::before {
  position: absolute !important;
  top: 18px;
  left: 0;

  grid-column: auto;
  grid-row: auto;
}


/* Label occupies the first content row. */
.obh-component--line-background
.obh-virtual-program-structure__item-label {
  grid-column: 2;
  grid-row: 1;

  align-self: start !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* Description occupies the second content row.
   The parent grid row-gap now provides the true 12px spacing. */
.obh-component--line-background
.obh-virtual-program-structure__list > li > span {
  grid-column: 2;
  grid-row: 2;

  display: block !important;

  width: 100%;
  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;

  font-weight: 400;
}


/* Line Background descriptions are supporting copy, not
   expandable accordion controls. Do not show a dash marker. */
.obh-component--line-background
.obh-virtual-program-structure__list > li > span::before {
  content: none !important;
  display: none !important;
}


/* Normalize paragraph spacing inside the description. */
.obh-component--line-background
.obh-virtual-program-structure__list > li > span > p {
  margin: 0 !important;
  padding: 0 !important;
}


/* Normalize editor-generated nested spans. */
.obh-component--line-background
.obh-virtual-program-structure__list > li > span > p > span {
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================
   CAREERS — WHY ODYSSEY CONSTELLATION GRID

   Careers-only variation of the reusable circular-list
   component.

   Keeps:
   - two-column section composition
   - atmospheric center orb
   - segmented orbit
   - circular + markers
   - staggered label entrance motion

   Changes only:
   - list-item placement from radial/clock positioning
     to a readable two-column grid on larger screens
   - one-column stack on smaller screens
   ========================================================== */


/* ----------------------------------------------------------
   RIGHT-HAND LIST CANVAS
   Do not depend on .is-clock — the runtime Careers markup
   keeps .obh-clock-ready and .is-entering but not .is-clock.
   ---------------------------------------------------------- */

:is(
  .obh-component-instance--obh-careers-why,
  .obh-component-instance--obh-clinical-quality
)
.obh-virtual-section__list {
  position: relative !important;
  isolation: isolate;

  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  align-content: center;
  align-items: start;

  column-gap: clamp(44px, 5vw, 72px);
  row-gap: clamp(28px, 3vw, 40px);

  width: 100% !important;
  min-width: 0;

  /*
   * Gives the orb/orbit enough visual space while allowing
   * the grid to sit naturally through the artwork.
   */
  min-height: clamp(500px, 36vw, 620px);

  margin: 0 !important;

  padding:
    clamp(64px, 7vw, 96px)
    clamp(28px, 4vw, 54px) !important;

  columns: 1 !important;

  box-sizing: border-box;
}


/* ----------------------------------------------------------
   ATMOSPHERIC CENTER ORB
   Recreates the existing Editorial Constellation artwork
   independently of the .is-clock runtime class.
   ---------------------------------------------------------- */

:is(
  .obh-component-instance--obh-careers-why,
  .obh-component-instance--obh-clinical-quality
)
.obh-virtual-section__list::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: 50%;
  left: 50%;

  width: clamp(170px, 31%, 240px);
  aspect-ratio: 1;

  transform: translate(-50%, -50%);

  border:
    1px solid
    rgba(255, 255, 255, 0.78);

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      rgba(37, 143, 232, 0.16) 0%,
      rgba(111, 211, 255, 0.10) 38%,
      rgba(176, 90, 203, 0.17) 100%
    );

  box-shadow:
    0 0 0 34px rgba(37, 143, 232, 0.025),
    0 0 0 68px rgba(176, 90, 203, 0.018),
    0 24px 70px rgba(23, 54, 95, 0.08);

  pointer-events: none;
}


/* ----------------------------------------------------------
   SEGMENTED CONSTELLATION ORBIT
   ---------------------------------------------------------- */

:is(
  .obh-component-instance--obh-careers-why,
  .obh-component-instance--obh-clinical-quality
)
.obh-virtual-section__list::after {
  content: "";

  position: absolute;
  z-index: 0;

  top: 50%;
  left: 50%;

  /*
   * Fixed responsive visual size rather than tying this to
   * --clock-label-width, since Careers is no longer radial.
   */
  width: clamp(330px, 62%, 520px);
  aspect-ratio: 1;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    conic-gradient(
      from -72deg,
      rgba(37, 143, 232, 0.34) 0deg 52deg,
      transparent 52deg 76deg,
      rgba(86, 149, 230, 0.24) 76deg 145deg,
      transparent 145deg 172deg,
      rgba(176, 90, 203, 0.30) 172deg 236deg,
      transparent 236deg 265deg,
      rgba(111, 134, 235, 0.25) 265deg 330deg,
      transparent 330deg 360deg
    );

  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 1.25px),
      #000 calc(100% - 1px)
    );

  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 1.25px),
      #000 calc(100% - 1px)
    );

  opacity: 0.8;

  pointer-events: none;
}


/* ----------------------------------------------------------
   GRID ITEMS
   Override the JS inline clock coordinates.
   ---------------------------------------------------------- */

:is(
  .obh-component-instance--obh-careers-why,
  .obh-component-instance--obh-clinical-quality
)
.obh-virtual-section__list
> li {
  position: relative !important;
  z-index: 2;

  top: auto !important;
  left: auto !important;

  display: grid !important;

  grid-template-columns:
    34px
    minmax(0, 1fr);

  align-items: start;

  width: 100% !important;
  max-width: none !important;

  gap: 14px;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  text-align: left !important;

  list-style: none;
}


/* ----------------------------------------------------------
   CIRCULAR + MARKER
   Preserve the refined constellation marker.
   ---------------------------------------------------------- */

:is(
  .obh-component-instance--obh-careers-why,
  .obh-component-instance--obh-clinical-quality
)
.obh-virtual-section__list
> li::before {
  content: "+" !important;

  position: static !important;

  top: auto !important;
  left: auto !important;

  display: grid !important;
  place-items: center;

  grid-column: 1;

  width: 34px !important;
  height: 34px !important;

  margin: 0 !important;

  border:
    1px solid
    rgba(74, 126, 214, 0.20);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.86) !important;

  -webkit-mask: none !important;
  mask: none !important;

  color: #258FE8 !important;

  font-family: var(--obh-font-body);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;

  box-shadow:
    0 8px 24px rgba(23, 54, 95, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}


/* ----------------------------------------------------------
   LABEL
   Keep .obh-condition-label intact because the existing
   JS/CSS motion system animates this exact element.
   ---------------------------------------------------------- */

:is(
  .obh-component-instance--obh-careers-why,
  .obh-component-instance--obh-clinical-quality
)
.obh-virtual-section__list
.obh-condition-label {
  grid-column: 2;

  display: block;

  width: 100%;
  max-width: none;

  padding-top: 2px;

  color: var(--obh-navy);

  font-family: var(--obh-font-body);
  font-size: clamp(1.17rem, 1.15vw, 1.24rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.3px;

  text-align: left;

  overflow-wrap: normal;
  word-break: normal;
}


/* ----------------------------------------------------------
   STAGGERED ENTRANCE MOTION
   Preserve existing --condition-delay values added by JS.
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  :is(
  .obh-component-instance--obh-careers-why,
  .obh-component-instance--obh-clinical-quality
)
  .obh-virtual-section__list.obh-clock-ready.is-entering
  > li
  > .obh-condition-label {
    animation:
      obh-clock-label-enter
      550ms
      ease-out
      both;

    animation-delay:
      var(--condition-delay, 0ms);
  }

}


/* ==========================================================
   TABLET
   One readable column while keeping orb + orbit behind it.
   ========================================================== */

@media (max-width: 1024px) {

  .obh-component-instance--obh-careers-why
  .obh-virtual-section__list {
    grid-template-columns:
      minmax(0, 1fr);

    row-gap: 24px;

    min-height: 520px;

    padding:
      64px
      clamp(40px, 8vw, 84px) !important;
  }


  .obh-component-instance--obh-careers-why
  .obh-virtual-section__list::after {
    width: clamp(320px, 58vw, 460px);
  }


  .obh-component-instance--obh-careers-why
  .obh-virtual-section__list
  > li {
    width: min(100%, 620px) !important;

    margin-inline: auto !important;
  }

}


/* ==========================================================
   MOBILE
   Single-column constellation stack.
   ========================================================== */

@media (max-width: 767px) {

  .obh-component-instance--obh-careers-why
  .obh-virtual-section__list {
    grid-template-columns:
      minmax(0, 1fr);

    row-gap: 24px;

    min-height: 0;

    width: calc(100% + 56px) !important;

    margin-left: -28px !important;
    margin-right: -28px !important;

    padding:
      52px
      28px
      60px !important;
  }


  .obh-component-instance--obh-careers-why
  .obh-virtual-section__list::before {
    width: clamp(220px, 74vw, 310px);

    opacity: 0.9;
  }


  .obh-component-instance--obh-careers-why
  .obh-virtual-section__list::after {
    width: clamp(285px, 94vw, 390px);
  }


  .obh-component-instance--obh-careers-why
  .obh-virtual-section__list
  > li {
    grid-template-columns:
      32px
      minmax(0, 1fr);

    width: calc(100% - 18px) !important;

    gap: 12px;

    margin-inline: 0 !important;
  }


  .obh-component-instance--obh-careers-why
  .obh-virtual-section__list
  > li:nth-child(even) {
    margin-left: 18px !important;
  }


  .obh-component-instance--obh-careers-why
  .obh-virtual-section__list
  > li::before {
    width: 32px !important;
    height: 32px !important;

    font-size: 1.2rem;
  }


  .obh-component-instance--obh-careers-why
  .obh-virtual-section__list
  .obh-condition-label {
    padding-top: 3px;

    font-size: 1.1rem;
    line-height: 1.3;
    letter-spacing: -0.45px;
  }

}

/* ==========================================================
   CAREERS — AREAS OF OPPORTUNITY
   Two-column opportunity list on larger screens.
   Scoped only to obh_careers_opportunities.
   ========================================================== */

.obh-component-instance--obh-careers-opportunities
.obh-virtual-program-structure__details
.obh-body-copy
> ul {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap: 48px;
  row-gap: 14px;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;
}


/* Each item occupies one grid cell. */
.obh-component-instance--obh-careers-opportunities
.obh-virtual-program-structure__details
.obh-body-copy
> ul
> li {
  margin: 0 !important;

  min-width: 0;
}


/* Tablet: keep two columns while there is enough room. */
@media (max-width: 1024px) {

  .obh-component-instance--obh-careers-opportunities
  .obh-virtual-program-structure__details
  .obh-body-copy
  > ul {
    column-gap: 36px;
    row-gap: 14px;
  }

}


/* Mobile: stack into one readable column. */
@media (max-width: 767px) {

  .obh-component-instance--obh-careers-opportunities
  .obh-virtual-program-structure__details
  .obh-body-copy
  > ul {
    grid-template-columns:
      minmax(0, 1fr);

    row-gap: 14px;
  }

}

/* ==========================================================
   ACCREDITATIONS PAGE
   Reuse established component systems with minimal
   instance-specific overrides only.
   ========================================================== */


/* ----------------------------------------------------------
   PRIMARY ACCREDITATIONS
   White Background Intro + Three Column -> two-column variant
   ---------------------------------------------------------- */

.obh-component-instance--obh-accreditations-primary
.obh-referral-steps {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}


/* Global Site Settings accreditation badges */

.obh-component-instance--obh-accreditations-primary
.obh-accreditation-card__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;
  height: 88px;

  margin: 0 0 24px;
}


.obh-component-instance--obh-accreditations-primary
.obh-accreditation-card__logo img {
  display: block;

  width: auto !important;
  height: auto !important;

  max-width: 88px !important;
  max-height: 84px !important;

  margin: 0;

  object-fit: contain;
}


/*
 * Preserve the existing Referral Process H3 typography.
 * No font-family / size / weight overrides here.
 */


/* ----------------------------------------------------------
   CERTIFICATIONS
   Reuse Two Column List with Separators
   ---------------------------------------------------------- */

.obh-component-instance--obh-accreditations-certifications
.obh-accreditation-list__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;
  height: 72px;

  margin: 0 0 20px;
}


.obh-component-instance--obh-accreditations-certifications
.obh-accreditation-list__logo img {
  display: block;

  width: auto !important;
  height: auto !important;

  max-width: 92px !important;
  max-height: 68px !important;

  margin: 0;

  object-fit: contain;
}


/*
 * Only two certification entries exist, so let them occupy
 * the right-side list cleanly without unnecessary wrapping.
 */

.obh-component-instance--obh-accreditations-certifications
.obh-virtual-how-we-treat__list {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap: 40px;
}


/* ----------------------------------------------------------
   PROFESSIONAL AFFILIATIONS

   Accreditation-style item layout:
   logo -> full-width title -> full-width description.

   Scoped to this component instance only so the shared
   Separated List system remains unchanged elsewhere.
   ---------------------------------------------------------- */

/* Each affiliation is one vertical content stack. */
.obh-component-instance--obh-accreditations-affiliations
.obh-virtual-how-we-treat__list > li {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
}


/* Content beneath the logo always occupies the full item width. */
.obh-component-instance--obh-accreditations-affiliations
.obh-component-separated-item__content {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  flex: none !important;
}


/* Affiliation logo wrapper. */
.obh-component-instance--obh-accreditations-affiliations
.obh-accreditation-list__logo {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;

  width: auto !important;
  max-width: 92px !important;
  height: auto !important;

  margin: 0 0 24px !important;
  padding: 0 !important;
}


/* Linked logo wrapper. */
.obh-component-instance--obh-accreditations-affiliations
.obh-accreditation-logo-link {
  display: block !important;

  width: auto !important;
  max-width: 92px !important;

  line-height: 0;
}


/* Picture wrapper must never enlarge the source image. */
.obh-component-instance--obh-accreditations-affiliations
.obh-accreditation-logo {
  display: block !important;

  width: auto !important;
  max-width: 92px !important;
  height: auto !important;
}


/* Actual affiliation logo image. */
.obh-component-instance--obh-accreditations-affiliations
.obh-accreditation-list__logo img,
.obh-component-instance--obh-accreditations-affiliations
img.obh-component-item-logo,
.obh-component-instance--obh-accreditations-affiliations
.obh-accreditation-logo img {
  display: block !important;

  width: auto !important;
  max-width: 92px !important;
  height: auto !important;

  object-fit: contain;
}


/* Organization title spans the full item width. */
.obh-component-instance--obh-accreditations-affiliations
.obh-communication-point__heading {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
}


/* Organization description spans the full item width. */
.obh-component-instance--obh-accreditations-affiliations
.obh-communication-point__copy {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
}


/* ----------------------------------------------------------
   STATE LICENSURE + REGULATORY COMPLIANCE
   Existing Line Background renderer
   ---------------------------------------------------------- */

/*
 * No custom structural override.
 * Existing component already provides full-bleed background
 * with centered 90% inner content panel.
 */


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .obh-component-instance--obh-accreditations-primary
  .obh-referral-steps {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 767px) {

  .obh-component-instance--obh-accreditations-primary
  .obh-referral-steps,

  .obh-component-instance--obh-accreditations-certifications
  .obh-virtual-how-we-treat__list {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .obh-component-instance--obh-accreditations-primary
  .obh-accreditation-card__logo {
    height: 72px;

    margin-bottom: 20px;
  }


  .obh-component-instance--obh-accreditations-primary
  .obh-accreditation-card__logo img {
    max-width: 72px !important;
    max-height: 68px !important;
  }


  .obh-component-instance--obh-accreditations-certifications
  .obh-accreditation-list__logo {
    height: 62px;
  }


  .obh-component-instance--obh-accreditations-certifications
  .obh-accreditation-list__logo img {
    max-width: 82px !important;
    max-height: 58px !important;
  }

}


/* ==========================================================
   THE ODYSSEY WAY — THREE GUIDING PILLARS

   Instance-specific variation of the reusable Three Column
   component.

   Desktop/tablet:
   One pillar per row; each pillar has two internal columns.

   Mobile:
   Left and right content stack vertically.
   ========================================================== */


/* ----------------------------------------------------------
   OUTER LAYOUT — 1 COLUMN / 3 ROWS
   ---------------------------------------------------------- */

.obh-component-instance--obh-way-pillars
.obh-referral-steps {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr) !important;

  gap: 0 !important;

  width: 100%;
}


/* ----------------------------------------------------------
   PILLAR ROW
   ---------------------------------------------------------- */

.obh-component-instance--obh-way-pillars
.obh-referral-step {
  width: 100%;
  min-width: 0;

  margin: 0 !important;

  padding:
    48px
    0 !important;

  border: 0 !important;
  border-top:
    1px solid
    rgba(16, 42, 77, 0.14) !important;
}

.obh-component-instance--obh-way-pillars
.obh-referral-step:last-child {
  padding-bottom: 0 !important;
}


/* ----------------------------------------------------------
   INTERNAL TWO-COLUMN LAYOUT
   ---------------------------------------------------------- */

.obh-component-instance--obh-way-pillars
.obh-referral-step--split {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(0, 0.8fr) !important;

  column-gap: var(--obh-section-column-gap);

  align-items: start;
}

.obh-component-instance--obh-way-pillars
.obh-referral-step__left,
.obh-component-instance--obh-way-pillars
.obh-referral-step__right {
  min-width: 0;
}


/* ----------------------------------------------------------
   LEFT COLUMN
   ---------------------------------------------------------- */

.obh-component-instance--obh-way-pillars
.obh-referral-step__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
	
  gap: var(--obh-content-gap);
}

.obh-component-instance--obh-way-pillars
.obh-referral-step__left
> .obh-eyebrow,
.obh-component-instance--obh-way-pillars
.obh-referral-step__left
> .obh-referral-step__heading,
.obh-component-instance--obh-way-pillars
.obh-referral-step__left
> .obh-referral-step__copy {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.obh-component-instance--obh-way-pillars
.obh-referral-step__copy {
  width: 100%;
}


/* ----------------------------------------------------------
   RIGHT COLUMN — LIST
   ---------------------------------------------------------- */

.obh-component-instance--obh-way-pillars
.obh-referral-step__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  align-self: stretch;

  width: 100%;
  min-width: 0;

  gap: var(--obh-content-gap);
}

/* Pillar logo */

.obh-component-instance--obh-way-pillars
.obh-referral-step__logo {
  width: 100%;
  min-width: 0;
}

.obh-component-instance--obh-way-pillars
.obh-referral-step__logo-image {
  display: block;

  width: auto !important;
  max-width: 38% !important;
  height: auto !important;

  margin: 0;
}

.obh-component-instance--obh-way-pillars
.obh-referral-step__right-content {
  width: 100%;
  min-width: 0;

  margin-top: auto;
}

.obh-component-instance--obh-way-pillars
.obh-referral-step__list-title {
  margin:
    0
    0
    28px;

  color: var(--obh-navy);

  font-family: var(--obh-font-body);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.1px;
}

.obh-component-instance--obh-way-pillars
.obh-referral-step__list {
  width: 100%;
}


/* Horizontal list that wraps naturally */

.obh-component-instance--obh-way-pillars
.obh-referral-step__list ul {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;

  column-gap: 28px;
  row-gap: 16px;

  margin: 0 !important;
  padding: 0 !important;
}

.obh-component-instance--obh-way-pillars
.obh-referral-step__list li {
  flex: 0 0 auto;

  width: auto;
  min-width: 0;

  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  align-self: flex-start;
}

.obh-component-instance--obh-way-pillars
.obh-referral-step__list li + li {
  margin-top: 0 !important;
}


/* Remove the final body-copy margin from each internal column. */

.obh-component-instance--obh-way-pillars
.obh-referral-step__copy > :last-child,
.obh-component-instance--obh-way-pillars
.obh-referral-step__list > :last-child {
  margin-bottom: 0 !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

  .obh-component-instance--obh-way-pillars
  .obh-referral-step--split {
    grid-template-columns:
      minmax(0, 1fr) !important;

    row-gap: 32px;
  }

  .obh-component-instance--obh-way-pillars
  .obh-referral-step {
    padding:
      36px
      0 !important;
  }

  .obh-component-instance--obh-way-pillars
  .obh-referral-step:first-child {
    padding-top: 0 !important;
  }

  .obh-component-instance--obh-way-pillars
  .obh-referral-step:last-child {
    padding-bottom: 0 !important;
  }

}
/* ----------------------------------------------------------
   CAREERS — WHY ODYSSEY LIST TITLE
   ---------------------------------------------------------- */

:is(
  .obh-component-instance--obh-careers-why,
  .obh-component-instance--obh-clinical-quality
)
.obh-component-circular-list__list-title {
  margin: 0;

  color: var(--obh-navy);

  font-family: var(--obh-font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.8px;
	
  text-align: center;
}

/* ==========================================================
   CAREERS — FINAL SECTIONS
   Open Positions + What Team Members Say
   ========================================================== */


/* ----------------------------------------------------------
   OPEN POSITIONS
   ---------------------------------------------------------- */

.obh-careers-open-positions {
  width: 100%;
  padding: 36px;

  border-radius: var(--obh-section-radius);

  background:
    linear-gradient(
      180deg,
      #F6F7F8 0%,
      #E8EEF5 100%
    );
}

.obh-careers-open-positions__inner {
  width: 100%;
}

.obh-careers-open-positions__heading {
  margin: 0;

  color: var(--obh-navy);

  font-family: var(--obh-font-heading);
  font-size: var(--obh-type-secondary-size);
  font-weight: var(--obh-type-secondary-weight);
  line-height: var(--obh-type-secondary-line-height);
  letter-spacing: var(--obh-type-secondary-letter-spacing);
}

.obh-careers-open-positions__intro {
  margin-top: 24px;
}


/* Featured job card grid */

.obh-careers-open-positions__jobs {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  column-gap: 56px;
  row-gap: 24px;

  width: 100%;

  margin-top: 56px;
}


/* Individual featured job card */

.obh-careers-job-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  min-width: 0;

  padding: 28px;

  border: 1px solid #E8EEF5;
  border-radius: 3px;

  background: var(--obh-white);
}


/* Job location */

.obh-careers-job-card__location {
  margin: 0 !important;
  padding: 0 !important;

  color: var(--obh-primary) !important;

  font-family: var(--obh-font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  line-height: 1.15em !important;
  letter-spacing: 0.5px !important;

  text-transform: uppercase !important;
}


/* Job title — global Shippori Subhead typography */

.obh-careers-job-card__title {
  margin: 24px 0 0 !important;
  padding: 0 !important;

  color: var(--obh-navy) !important;
}


/* Card apply button */

.obh-careers-job-card__button {
  margin-top: 36px;
}


/* Section-level View Open Positions CTA */

.obh-careers-open-positions__button {
  margin-top: 36px;
}


/* ----------------------------------------------------------
   TABLET + MOBILE
   One column / three rows
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .obh-careers-open-positions__jobs {
    grid-template-columns:
      minmax(0, 1fr);

    column-gap: 0;
    row-gap: 24px;
  }

  .obh-careers-job-card {
    padding: 20px;
  }

}


/* ----------------------------------------------------------
   MOBILE SECTION PADDING
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .obh-careers-open-positions {
    padding:
      44px
      28px;
  }

}


/* ----------------------------------------------------------
   WHAT TEAM MEMBERS SAY
   Uses Editorial Feature section language.
   ---------------------------------------------------------- */

.obh-careers-testimonials__grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap: 80px;
  row-gap: 36px;

  margin-top: 56px;
}

.obh-careers-testimonial {
  margin: 0;

  padding: 32px;

  border: 1px solid #cbd2eb;
  border-radius: 3px;
}

.obh-careers-testimonial__quote {
  margin: 0 !important;

  color: var(--obh-navy) !important;
}

.obh-careers-testimonial__footer {
  margin-top: 24px;
}

.obh-careers-testimonial__name {
  margin: 0;

  color: var(--obh-navy);

  font-family: var(--obh-type-subhead-family);
  font-size: var(--obh-type-subhead-size);
  font-weight: var(--obh-type-subhead-weight);
  line-height: var(--obh-type-subhead-line-height);
  letter-spacing: var(--obh-type-subhead-letter-spacing);
}

.obh-careers-testimonial__title {
  margin:
    6px
    0
    0;

  color: var(--obh-primary);

  font-family: var(--obh-font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: 0.5px;

  text-transform: uppercase;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .obh-careers-open-positions__jobs {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .obh-careers-open-positions {
    padding:
      44px
      28px;
  }

  .obh-careers-open-positions__jobs,
  .obh-careers-testimonials__grid {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .obh-careers-open-positions__jobs,
  .obh-careers-testimonials__grid {
    margin-top: 44px;
  }

}

/* ----------------------------------------------------------
   CAREERS — TESTIMONIAL NAME + TITLE GROUP
   Force exact controlled spacing.
   ---------------------------------------------------------- */

.obh-careers-testimonial__footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.obh-careers-testimonial__footer > .obh-careers-testimonial__name,
.obh-careers-testimonial__footer > .obh-careers-testimonial__title {
  margin: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  padding: 0 !important;
}

.obh-careers-testimonial__name {
  line-height: 1.2 !important;
}

.obh-careers-testimonial__title {
  line-height: 1.2 !important;
}


/* ----------------------------------------------------------
   CAREERS — TESTIMONIAL TITLE TYPOGRAPHY
   ---------------------------------------------------------- */

.obh-careers-testimonial__title {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
}


/* ==========================================================
   THREE-COLUMN COMPONENT — COLUMN HEADING TYPOGRAPHY

   Applies consistently whether the semantic heading is H2 or H3.
   ========================================================== */

.obh-component--three-column
.obh-referral-step
.obh-referral-step__heading {
  font-size: 1.3rem;
}


/* ==========================================================
   THE ODYSSEY WAY — THREE GUIDING PILLARS
   Final instance-specific cleanup
   ========================================================== */

/* Remove pillar logos from this instance only. */
.obh-component-instance--obh-way-pillars
.obh-referral-step__logo {
  display: none !important;
}

/* With the logo removed, keep the list content at the top
   of the right column instead of pushing it downward. */
.obh-component-instance--obh-way-pillars
.obh-referral-step__right-content {
  margin-top: 0 !important;
}


/* ----------------------------------------------------------
   MOBILE
   Keep the first pillar's divider-to-heading spacing equal
   to the following pillar rows.
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .obh-component-instance--obh-way-pillars
  .obh-referral-step:first-child {
    padding-top: 48px !important;
  }

}

/* ==========================================================
   THE ODYSSEY WAY — THREE GUIDING PILLARS
   Intro typography
   ========================================================== */

.obh-component-instance--obh-way-pillars
.obh-prof-serif-lead {
  font-family: var(--obh-type-shippori-subhead-family) !important;
  font-size: var(--obh-type-shippori-subhead-size) !important;
  font-weight: var(--obh-type-shippori-subhead-weight) !important;
  line-height: var(--obh-type-shippori-subhead-line-height) !important;
  letter-spacing: var(--obh-type-shippori-subhead-letter-spacing) !important;

  color: var(--obh-primary) !important;
}

.obh-component-instance--obh-way-pillars
.obh-prof-serif-lead p,
.obh-component-instance--obh-way-pillars
.obh-prof-serif-lead span {
  color: inherit !important;
  font: inherit !important;
}



/* ==========================================================
   FOR PROFESSIONALS — REFERRAL PROCESS
   Reusable Line Background component variation
   ========================================================== */

/*
 * Referral steps read as one continuous vertical sequence
 * rather than the generic two-column item grid.
 */
.obh-component-instance--obh-prof-referral
.obh-virtual-program-structure__list {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}


/*
 * Increase only the Referral Process item labels.
 * The generic list item remains 1.08rem everywhere else.
 */
.obh-component-instance--obh-prof-referral
.obh-virtual-program-structure__item-label {
  font-family: var(--obh-font-body);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.33em;
  letter-spacing: -0.3px;
}


/*
 * Because this instance is a single-column list, each step
 * receives its own bottom divider.
 */
.obh-component-instance--obh-prof-referral
.obh-virtual-program-structure__list > li {
  border-bottom:
    1px solid
    rgba(32, 78, 136, 0.14);
}


/*
 * Normalize WYSIWYG paragraph spacing inside the existing
 * Referral Process step-copy fields.
 */
.obh-component-instance--obh-prof-referral
.obh-virtual-program-structure__list > li > span > p {
  margin: 0 !important;
}


/* Referral Process item descriptions */
.obh-component-instance--obh-prof-referral
.obh-virtual-program-structure__list > li > span {
  font-weight: 400;
  line-height: 1.45em;
}

/* ==========================================================
   CLINICAL APPROACH — CLINICAL QUALITY COUNCIL
   Circular constellation typography
   ========================================================== */

/* Right-column list title */
.obh-component-instance--obh-clinical-quality
.obh-component-circular-list__list-title {
  font-family: var(--obh-font-heading) !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.8px !important;
}

/* Constellation list-item labels */
.obh-component-instance--obh-clinical-quality
.obh-virtual-section__list
.obh-condition-label {
  font-size: 1.17rem !important;
}


/* ----------------------------------------------------------
   ACCREDITATIONS PAGE
   Remove blue plus markers from Certifications and
   Professional Affiliations list items only.
   ---------------------------------------------------------- */

.obh-component-instance--obh-accreditations-certifications
.obh-virtual-how-we-treat__list > li::before,

.obh-component-instance--obh-accreditations-affiliations
.obh-virtual-how-we-treat__list > li::before {
  content: none !important;
  display: none !important;
}


/* ----------------------------------------------------------
   ACCREDITATIONS PAGE
   Certifications + Professional Affiliations

   These instances do not use the shared blue plus marker,
   so remove the marker column from the inherited list-item
   grid and allow item content to use the full card width.
   ---------------------------------------------------------- */

.obh-component-instance--obh-accreditations-certifications
.obh-virtual-how-we-treat__list > li,

.obh-component-instance--obh-accreditations-affiliations
.obh-virtual-how-we-treat__list > li {
  display: block !important;

  grid-template-columns: none !important;
  gap: 0 !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}


/* Full-width inner content */

.obh-component-instance--obh-accreditations-certifications
.obh-component-separated-item__content,

.obh-component-instance--obh-accreditations-affiliations
.obh-component-separated-item__content {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin-left: 0 !important;
}


/* Full-width item headings */

.obh-component-instance--obh-accreditations-certifications
.obh-communication-point__heading,

.obh-component-instance--obh-accreditations-affiliations
.obh-communication-point__heading {
  display: block !important;

  width: 100% !important;
  max-width: none !important;
}


/* Full-width item descriptions */

.obh-component-instance--obh-accreditations-certifications
.obh-communication-point__copy,

.obh-component-instance--obh-accreditations-affiliations
.obh-communication-point__copy {
  display: block !important;

  width: 100% !important;
  max-width: none !important;
}


/* Paragraphs inside descriptions must also use the full width. */

.obh-component-instance--obh-accreditations-certifications
.obh-communication-point__copy > p,

.obh-component-instance--obh-accreditations-affiliations
.obh-communication-point__copy > p {
  width: 100% !important;
  max-width: none !important;
}


/* ----------------------------------------------------------
   PROFESSIONAL AFFILIATIONS
   Logo -> item title spacing
   ---------------------------------------------------------- */

.obh-component-instance--obh-accreditations-affiliations
.obh-accreditation-list__logo {
  margin-bottom: 24px !important;
}


/* ----------------------------------------------------------
   PROFESSIONAL AFFILIATIONS
   Logo -> title spacing

   The affiliation logo is rendered as a sibling immediately
   before the content wrapper, unlike Certifications.
   ---------------------------------------------------------- */

.obh-component-instance--obh-accreditations-affiliations
.obh-component-item-logo
+ .obh-component-separated-item__content,

.obh-component-instance--obh-accreditations-affiliations
.obh-accreditation-logo-link
+ .obh-component-separated-item__content,

.obh-component-instance--obh-accreditations-affiliations
.obh-accreditation-logo
+ .obh-component-separated-item__content {
  margin-top: 24px !important;
}


/* ----------------------------------------------------------
   PROFESSIONAL AFFILIATIONS
   NATSAP logo size adjustment
   ---------------------------------------------------------- */

.obh-component-instance--obh-accreditations-affiliations
.obh-virtual-how-we-treat__list > li:nth-child(6)
.obh-component-item-logo {
  width: auto !important;
  max-width: 72px !important;
  height: auto !important;
}


/* ----------------------------------------------------------
   LEVELS OF CARE — TIGHTER LIST ROW SPACING
   ---------------------------------------------------------- */

.obh-component-instance--obh-levels-list
.obh-virtual-how-we-treat__list > li {
  padding: 12px 0;
}

/* ----------------------------------------------------------
   LEVELS OF CARE — ITEM + ROW SPACING
   ---------------------------------------------------------- */

.obh-component-instance--obh-levels-list
.obh-virtual-how-we-treat__list {
  row-gap: 36px;
}

.obh-component-instance--obh-levels-list
.obh-virtual-how-we-treat__list > li {
  padding-top: 0;
  padding-bottom: 24px;
}


/* ----------------------------------------------------------
   LEVELS OF CARE — HOW ODYSSEY MATCHES CLIENTS
   Kicker -> H2 = 24px
   ---------------------------------------------------------- */

.obh-component-instance--obh-levels-matching
.obh-kicker {
  margin-bottom: 24px;
}

.obh-component-instance--obh-levels-matching
.obh-virtual-program-structure__subhead {
  margin-top: 0;
}


/* ----------------------------------------------------------
   MEDICAL DETOX — SUBSTANCES LIST
   Title + description inline, tighter list rows
   ---------------------------------------------------------- */

.obh-component-instance--obh-detox-substances
.obh-component-separated-item__content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;

  column-gap: 10px;
  row-gap: 4px;

  width: 100%;
  min-width: 0;
}

.obh-component-instance--obh-detox-substances
.obh-communication-point__heading {
  flex: 0 0 auto;

  margin: 0;
  padding: 0;
}

.obh-component-instance--obh-detox-substances
.obh-communication-point__copy {
  flex: 0 1 auto;

  margin: 0;
  padding: 0;
}

.obh-component-instance--obh-detox-substances
.obh-communication-point__copy > p {
  margin: 0;
  padding: 0;
}

.obh-component-instance--obh-detox-substances
.obh-virtual-how-we-treat__list > li {
  padding-top: 8px;
  padding-bottom: 8px;
}


/* ----------------------------------------------------------
   MEDICAL DETOX — SUBSTANCES LIST SPACING REFINEMENT

   Row:
   16px above content
   24px below content before divider

   Inline:
   4px between title and supporting description
   ---------------------------------------------------------- */

.obh-component-instance--obh-detox-substances
.obh-virtual-how-we-treat__list > li {
  padding-top: 16px;
  padding-bottom: 24px;
}

.obh-component-instance--obh-detox-substances
.obh-component-separated-item__content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;

  column-gap: 4px;
  row-gap: 0;

  width: 100%;
  min-width: 0;
}

.obh-component-instance--obh-detox-substances
.obh-communication-point__heading {
  flex: 0 0 auto;

  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

.obh-component-instance--obh-detox-substances
.obh-communication-point__copy {
  flex: 0 1 auto;

  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

.obh-component-instance--obh-detox-substances
.obh-communication-point__copy > p {
  margin: 0 !important;
  padding: 0 !important;
}



/* ==========================================================
   CLINICAL APPROACH — CLINICAL QUALITY COUNCIL
   Desktop: 60% copy / 40% constellation
   Compact Careers-style constellation treatment
   ========================================================== */

@media (min-width: 1025px) {

  /* Match the specificity of the shared Virtual Conditions
     layout so this instance can use a true 60/40 split. */
  .obh-component-instance--obh-clinical-quality
  .obh-virtual-section--conditions
  .obh-virtual-section__inner {
    grid-template-columns:
      minmax(0, 52fr)
      minmax(0, 48fr);
  }


  /* Reduce the overall constellation canvas so the title
     and list read as one tighter visual group. */
  .obh-component-instance--obh-clinical-quality
  .obh-virtual-section__list {
    min-height: clamp(400px, 30vw, 480px);

    padding:
      clamp(44px, 5vw, 64px)
      clamp(20px, 3vw, 36px) !important;

    column-gap: clamp(28px, 3vw, 44px);
    row-gap: 36px;
  }


  /* Slightly smaller outer orbit for the narrower
     40% right-hand column. */
  .obh-component-instance--obh-clinical-quality
  .obh-virtual-section__list::after {
    width: clamp(280px, 58%, 410px);
  }


  /* Slightly reduce the atmospheric center orb as well. */
  .obh-component-instance--obh-clinical-quality
  .obh-virtual-section__list::before {
    width: clamp(150px, 29%, 205px);
  }

}



/* ==========================================================
   CAREERS — WHY ODYSSEY
   Restore two-column desktop composition

   Left:
   - eyebrow
   - serif subhead
   - body copy

   Right:
   - list title
   - two-column constellation list

   Scoped to Careers only. Does not affect Odyssey Virtual.
   ========================================================== */

@media (min-width: 1025px) {

  /* --------------------------------------------------------
     TWO-COLUMN SECTION COMPOSITION
     -------------------------------------------------------- */

  .obh-component-instance--obh-careers-why
  .obh-virtual-section--conditions
  .obh-virtual-section__inner {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    align-items: center;

    column-gap: 80px;
    row-gap: 0;
  }


  /* --------------------------------------------------------
     LEFT EDITORIAL COPY
     -------------------------------------------------------- */

  .obh-component-instance--obh-careers-why
  .obh-virtual-section__copy {
    width: 100%;

    min-width: 0;

    margin: 0;

    align-items: flex-start;
    justify-content: center;
    align-self: center;

    text-align: left;
  }


  /* Eyebrow:
     preserve semantic H2 + existing .obh-eyebrow styling. */

  body
  .obh-component-instance--obh-careers-why
  .obh-virtual-section__heading {
    width: 100%;

    margin-left: 0;
    margin-right: 0;

    text-align: left;
  }


  /* Serif supporting heading */

  body
  .obh-component-instance--obh-careers-why
  .obh-component-circular-list__subhead {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;

    text-align: left;
  }


  /* Body copy */

  .obh-component-instance--obh-careers-why
  .obh-component-circular-list__body {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;

    text-align: left;
  }

  .obh-component-instance--obh-careers-why
  .obh-component-circular-list__body p {
    text-align: left;
  }


  /* --------------------------------------------------------
     RIGHT CONSTELLATION / LIST COLUMN
     -------------------------------------------------------- */

  .obh-component-instance--obh-careers-why
  .obh-component-circular-list__list-wrap {
    width: 100%;
    min-width: 0;

    align-self: center;
  }


  /* Keep the list title centered over its constellation,
     rather than centered across the whole section. */

  .obh-component-instance--obh-careers-why
  .obh-component-circular-list__list-title {
    width: 100%;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }

}



/* ==========================================================
   CAREERS — WHY ODYSSEY
   Force full-width left editorial column
   ========================================================== */

@media (min-width: 1025px) {

  /* Maintain equal desktop columns. */
  .obh-component-instance--obh-careers-why
  .obh-virtual-section--conditions
  .obh-virtual-section__inner {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;
  }


  /* Let the entire left column occupy its full grid track. */
  .obh-component-instance--obh-careers-why
  .obh-virtual-section__copy {
    width: 100% !important;
    max-width: none !important;

    min-width: 0;

    margin-left: 0 !important;
    margin-right: 0 !important;

    justify-self: stretch;
    align-self: center;

    text-align: left;
  }


  /* Remove inherited reading-width constraints from all
     editorial content inside the left column. */
  .obh-component-instance--obh-careers-why
  .obh-virtual-section__copy
  > .obh-eyebrow,

  .obh-component-instance--obh-careers-why
  .obh-component-circular-list__subhead,

  .obh-component-instance--obh-careers-why
  .obh-component-circular-list__body,

  .obh-component-instance--obh-careers-why
  .obh-component-circular-list__closing {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    text-align: left;
  }


  .obh-component-instance--obh-careers-why
  .obh-component-circular-list__body
  > *,

  .obh-component-instance--obh-careers-why
  .obh-component-circular-list__closing
  > * {
    width: 100% !important;
    max-width: none !important;
  }

}



/* ==========================================================
   CAREERS — WHY ODYSSEY
   Eyebrow alignment + compact section height
   ========================================================== */

@media (min-width: 1025px) {

  /* --------------------------------------------------------
     EYEBROW

     Restore the intrinsic width required by the global
     .obh-eyebrow gradient and align it with the left column.
     -------------------------------------------------------- */

  .obh-component-instance--obh-careers-why
  .obh-virtual-section__copy
  > h2.obh-eyebrow {
    width: fit-content !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    align-self: flex-start !important;

    text-align: left !important;
  }


  /* --------------------------------------------------------
     REDUCE EXCESS SECTION HEIGHT

     The Careers constellation does not need the taller
     reusable desktop canvas used by larger implementations.
     -------------------------------------------------------- */

  .obh-component-instance--obh-careers-why
  .obh-virtual-section__list {
    min-height: 460px;

    padding:
      36px
      clamp(28px, 4vw, 54px) !important;
  }

}



/* ==========================================================
   CAREERS — TESTIMONIAL QUOTE TYPOGRAPHY
   ========================================================== */

.obh-careers-testimonial__quote {
  font-family: var(--obh-font-body) !important;
  font-size: 1.3rem !important;
  font-weight: 500 !important;
  line-height: 1.4em !important;
  letter-spacing: -0.3px !important;
}



/* ==========================================================
   CAREERS — AREAS OF OPPORTUNITY
   List item typography
   ========================================================== */

.obh-component-instance--obh-careers-opportunities
.obh-virtual-program-structure__details
.obh-body-copy > ul > li {
  font-family: var(--obh-font-body) !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  line-height: 1.4em !important;
  letter-spacing: -0.3px !important;
}



/* ==========================================================
   LOGO BLUE
   Point heading typography
   ========================================================== */

.obh-component--logo-blue
.obh-communication-point__heading {
  margin: 0 !important;
  padding: 0 !important;

  color: var(--obh-primary-deep) !important;

  font-family: var(--obh-font-body) !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  line-height: 1.25em !important;
  letter-spacing: -0.3px !important;
}

/* Right-column points title */
.obh-component--logo-blue
.obh-component-logo-blue__points-title {
	margin: 0 0 36px !important;
	padding: 0;

	display: flex;
	align-items: center;
	gap: 16px;

	font-family: var(--obh-font-heading);
	font-size: 1.17rem;
	font-weight: 700;
	line-height: 1.33em;
	letter-spacing: -0.8px;
}

.obh-component--logo-blue
.obh-component-logo-blue__points-title::before {
	content: "";
	flex: 0 0 40px;
	width: 40px;
	height: 2px;

	background: linear-gradient(
		90deg,
		#258FE8 0%,
		#B05ACB 100%
	);

	border-radius: 999px;
}

/* Vertically center right-column points in Logo Blue components */
.obh-component--logo-blue
.obh-prof-communication__points {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
}

/* ==========================================================
   CLINICAL APPROACH — CLINICAL QUALITY COUNCIL ONLY
   Page ID: 1602
   50/50 layout + left-aligned left column
   ========================================================== */

@media (min-width: 1025px) {

	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section--conditions
	.obh-virtual-section__inner {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 1fr) !important;
	}

	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__copy {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;

		align-items: flex-start !important;
		justify-content: flex-start !important;
		align-self: start !important;

		text-align: left !important;
	}

	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__copy
	> h2.obh-eyebrow {
		width: fit-content !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		align-self: flex-start !important;
		text-align: left !important;
	}

	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-component-circular-list__subhead,
	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-component-circular-list__body,
	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-component-circular-list__closing {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		text-align: left !important;
	}

	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-component-circular-list__body p,
	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-component-circular-list__closing p {
		text-align: left !important;
	}
}


/* ==========================================================
   CLINICAL APPROACH — CLINICAL QUALITY COUNCIL ONLY
   Desktop spacing refinement
   ========================================================== */

@media (min-width: 1025px) {

	/* Restore the standard 80px space between the two columns. */
	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section--conditions
	.obh-virtual-section__inner {
		column-gap: 80px !important;
		row-gap: 0 !important;
	}

	/*
	 * Tighten the constellation canvas so it does not create
	 * excessive empty space below the section.
	 */
	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__list {
		min-height: clamp(360px, 27vw, 420px) !important;

		padding:
			36px
			clamp(20px, 3vw, 36px) !important;
	}

	/* Keep the right-hand constellation aligned to the top of its track. */
	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-component-circular-list__list-wrap {
		align-self: start !important;
	}
}

/* ==========================================================
   CLINICAL APPROACH — CLINICAL QUALITY COUNCIL ONLY
   Right-column list spacing
   ========================================================== */

@media (min-width: 1025px) {

	/* Maximum 56px between the two list columns */
	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__list {
		column-gap: min(56px, 4vw) !important;
	}

	/* 56px between list title and two-column list */
	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-component-circular-list__list-title {
		margin-bottom: 56px !important;
	}
}

/* ==========================================================
   CLINICAL APPROACH — CLINICAL QUALITY COUNCIL ONLY
   Right-column title + constellation spacing refinement
   ========================================================== */

@media (min-width: 1025px) {

	/* Smaller, centered list title at 75% width */
	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-component-circular-list__list-title {
		width: 75% !important;
		max-width: 75% !important;

		margin:
			0 auto
			56px !important;

		text-align: center !important;

		font-size: 1.2rem !important;
		line-height: 1.3 !important;
	}

	/* Tighten the actual two-column grid spacing */
	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__list {
		column-gap: 24px !important;
	}

	/*
	 * Reduce the center orbit width so the visible left/right
	 * label columns sit closer together.
	 */
	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__list::after {
		width: clamp(250px, 50%, 340px) !important;
	}

	/*
	 * Keep the center orb proportional to the smaller orbit.
	 */
	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__list::before {
		width: clamp(120px, 22%, 160px) !important;
	}
}

/* ==========================================================
   CLINICAL APPROACH — CLINICAL QUALITY COUNCIL ONLY
   Slightly enlarge constellation ring
   ========================================================== */

@media (min-width: 1025px) {

	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__list {
		--clock-ring-size: 275px !important;
	}
}

/* ==========================================================
   CLINICAL APPROACH — CLINICAL QUALITY COUNCIL ONLY
   Mobile: single-column list
   ========================================================== */

@media (max-width: 767px) {

	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__list {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;

		column-gap: 0 !important;
		row-gap: 24px !important;

		min-height: 0 !important;
		height: auto !important;

		padding: 0 !important;

		position: static !important;
	}

	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__list
	> li {
		position: static !important;

		width: 100% !important;
		max-width: none !important;

		margin: 0 !important;
	}

	/* Remove constellation artwork on mobile */
	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__list::before,
	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__list::after {
		content: none !important;
		display: none !important;
	}

	/* Keep each label aligned normally in the single-column list */
	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-condition-label {
		width: 100% !important;
		max-width: none !important;

		margin: 0 !important;

		text-align: left !important;
	}
}

/* ==========================================================
   CLINICAL APPROACH — CLINICAL QUALITY COUNCIL ONLY
   Mobile title-to-list spacing
   ========================================================== */

@media (max-width: 767px) {

	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-component-circular-list__list-title {
		margin-bottom: 44px !important;
	}
}

/* ==========================================================
   CLINICAL APPROACH — CLINICAL QUALITY COUNCIL ONLY
   Mobile list-item typography
   ========================================================== */

@media (max-width: 767px) {

	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__list
	.obh-condition-label {
		font-size: 1.15rem !important;
	}
}

/* ==========================================================
   CLINICAL APPROACH — CLINICAL QUALITY COUNCIL ONLY
   Mobile: keep constellation artwork visible
   ========================================================== */

@media (max-width: 767px) {

	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__list {
		position: relative !important;
		overflow: visible !important;
	}

	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__list::before,
	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__list::after {
		content: "" !important;
		display: block !important;
	}

	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__list::after {
		width: 260px !important;
		height: 260px !important;
	}

	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-virtual-section__list::before {
		width: 145px !important;
		height: 145px !important;
	}
}

/* ==========================================================
   CLINICAL APPROACH — CLINICAL QUALITY COUNCIL ONLY
   Integrate right-column title with constellation
   ========================================================== */

@media (min-width: 1025px) {

	.page-id-1602
	.obh-component-instance--obh-clinical-quality
	.obh-component-circular-list__list-title {
		width: 75% !important;
		max-width: 75% !important;

		margin:
			0 auto
			24px !important;

		text-align: center !important;
	}
}

/* ==========================================================
   CLINICAL APPROACH — CLINICAL TEAM DEVELOPMENT ONLY
   Right-column list item typography
   ========================================================== */

.page-id-1602
.obh-component-instance--obh-clinical-team
.obh-virtual-program-structure__item-label {
	font-size: 1.17rem !important;
	font-weight: 400 !important;
	line-height: 1.33 !important;
	letter-spacing: -0.2px !important;
}

/* ==========================================================
   CLINICAL APPROACH — CLINICAL TEAM DEVELOPMENT ONLY
   Right-column heading typography
   ========================================================== */

.page-id-1602
.obh-component-instance--obh-clinical-team
.obh-virtual-program-structure__label {
	font-family: var(--obh-font-body) !important;
	font-size: 1.2rem !important;
	font-weight: 400 !important;
	line-height: 1.33em !important;
	letter-spacing: -0.2px !important;
}

.page-id-1602
.obh-component-instance--obh-clinical-team
.obh-virtual-program-structure__label strong {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
}

/* ==========================================================
   LOGO BLUE COMPONENT
   Point Heading -> Point Body visual spacing
   ========================================================== */

.obh-component--logo-blue
.obh-communication-point__heading {
	margin: 0 !important;
}

.obh-component--logo-blue
.obh-communication-point__copy {
	margin-top: 8px !important;
	margin-bottom: 0 !important;
}

.obh-component--logo-blue
.obh-communication-point__copy > :first-child {
	margin-top: 0 !important;
}

.obh-component--logo-blue
.obh-communication-point__copy > :last-child {
	margin-bottom: 0 !important;
}

/* ==========================================================
   LOGO BLUE COMPONENT
   Space between point groups
   ========================================================== */

.obh-component--logo-blue
.obh-communication-point:not(:last-child) {
	margin-bottom: 36px !important;
}

/* ==========================================================
   CLINICAL APPROACH
   Clinical Team Development
   Temporary single-column right list test
   ========================================================== */

@media (min-width: 768px) {
	.page-id-1602
	.obh-component-instance--obh-clinical-team
	.obh-virtual-program-structure__list {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		column-gap: 0 !important;
	}
}

/* ==========================================================
   CLINICAL APPROACH
   Clinical Team Development
   Left divider for right-column label
   ========================================================== */

.page-id-1602
.obh-component-instance--obh-clinical-team
.obh-virtual-program-structure__label {
	display: flex;
	align-items: center;
	gap: 16px;
}

.page-id-1602
.obh-component-instance--obh-clinical-team
.obh-virtual-program-structure__label::before {
	content: "";
	flex: 0 0 40px;
	width: 40px;
	height: 2px;

	background: linear-gradient(
		90deg,
		#258FE8 0%,
		#B05ACB 100%
	);

	border-radius: 999px;
}

/* ==========================================================
   LOGO BLUE COMPONENT
   Lighter point-heading plus markers
   ========================================================== */

.obh-component--logo-blue
.obh-communication-point::before {
	content: "+" !important;

	display: block;

	width: auto;
	height: auto;
	padding-top: 0.08em;

	background: none !important;

	color: #258FE8;
	font-family: var(--obh-font-body);
	font-size: 1.28rem;
	font-weight: 500;
	line-height: 1;
}

/* ==========================================================
   FOR PROFESSIONALS — REFERRAL PROCESS
   Equal 50 / 50 outer columns
   ========================================================== */

@media (min-width: 768px) {

	.obh-component-instance--obh-prof-referral
	.obh-virtual-program-structure__inner {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 1fr) !important;
	}

	.obh-component-instance--obh-prof-referral
	.obh-virtual-program-structure__intro,
	.obh-component-instance--obh-prof-referral
	.obh-virtual-program-structure__details {
		min-width: 0;
		width: 100%;
	}

}

/* ==========================================================
   MENTAL HEALTH — APPROACH TO TREATMENT
   Smaller H2 color
   ========================================================== */

.obh-component-instance--obh-mh-how-we-treat
.obh-type-smaller-h2 {
	color: var(--obh-primary) !important;
}

/* ==========================================================
   MENTAL HEALTH — APPROACH TO TREATMENT
   Smaller H2 color
   ========================================================== */

.obh-component-instance--obh-mh-approach
.obh-type-smaller-h2 {
	color: var(--obh-primary) !important;
}

/* ==========================================================
   TREATMENT PAGES — APPROACH TO TREATMENT
   Smaller H2 color
   ========================================================== */

.obh-component-instance--obh-ed-approach
.obh-type-smaller-h2,
.obh-component-instance--obh-sud-approach
.obh-type-smaller-h2,
.obh-component-instance--obh-co-approach
.obh-type-smaller-h2 {
	color: var(--obh-primary) !important;
}

/* ==========================================================
   TREATMENT PAGES — SPECIALIZED POPULATIONS
   Three columns desktop/tablet; one column mobile
   ========================================================== */

@media (min-width: 768px) {
  .obh-component-instance--obh-mh-populations
  .obh-prof-communication__points.obh-communication-points,
  .obh-component-instance--obh-ed-populations
  .obh-prof-communication__points.obh-communication-points,
  .obh-component-instance--obh-sud-populations
  .obh-prof-communication__points.obh-communication-points,
  .obh-component-instance--obh-co-populations
  .obh-prof-communication__points.obh-communication-points {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 36px;
    row-gap: 36px;
    align-items: start;
  }

  .obh-component-instance--obh-mh-populations
  .obh-communication-point,
  .obh-component-instance--obh-ed-populations
  .obh-communication-point,
  .obh-component-instance--obh-sud-populations
  .obh-communication-point,
  .obh-component-instance--obh-co-populations
  .obh-communication-point {
    min-width: 0;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 767px) {
  .obh-component-instance--obh-mh-populations
  .obh-prof-communication__points.obh-communication-points,
  .obh-component-instance--obh-ed-populations
  .obh-prof-communication__points.obh-communication-points,
  .obh-component-instance--obh-sud-populations
  .obh-prof-communication__points.obh-communication-points,
  .obh-component-instance--obh-co-populations
  .obh-prof-communication__points.obh-communication-points {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 36px;
  }

  .obh-component-instance--obh-mh-populations
  .obh-communication-point,
  .obh-component-instance--obh-ed-populations
  .obh-communication-point,
  .obh-component-instance--obh-sud-populations
  .obh-communication-point,
  .obh-component-instance--obh-co-populations
  .obh-communication-point {
    margin-bottom: 0 !important;
  }
}

/* ==========================================================
   TREATMENT PAGES — LEVELS OF CARE
   Desktop/laptop intro stack
   ========================================================== */

@media (min-width: 1025px) {

  .obh-component-instance--obh-mh-levels
  .obh-virtual-program-structure__intro,
  .obh-component-instance--obh-ed-levels
  .obh-virtual-program-structure__intro,
  .obh-component-instance--obh-sud-levels
  .obh-virtual-program-structure__intro,
  .obh-component-instance--obh-co-levels
  .obh-virtual-program-structure__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--obh-content-gap, 24px);
    width: 100%;
  }

  .obh-component-instance--obh-mh-levels
  .obh-virtual-program-structure__heading,
  .obh-component-instance--obh-ed-levels
  .obh-virtual-program-structure__heading,
  .obh-component-instance--obh-sud-levels
  .obh-virtual-program-structure__heading,
  .obh-component-instance--obh-co-levels
  .obh-virtual-program-structure__heading {
    margin: 0 !important;
    align-self: flex-start;
  }

  .obh-component-instance--obh-mh-levels
  .obh-virtual-program-structure__subhead,
  .obh-component-instance--obh-ed-levels
  .obh-virtual-program-structure__subhead,
  .obh-component-instance--obh-sud-levels
  .obh-virtual-program-structure__subhead,
  .obh-component-instance--obh-co-levels
  .obh-virtual-program-structure__subhead {
    width: 50%;
    max-width: none;
    margin: 0 !important;
  }

  .obh-component-instance--obh-mh-levels
  .obh-virtual-program-structure__intro > .obh-body-copy,
  .obh-component-instance--obh-ed-levels
  .obh-virtual-program-structure__intro > .obh-body-copy,
  .obh-component-instance--obh-sud-levels
  .obh-virtual-program-structure__intro > .obh-body-copy,
  .obh-component-instance--obh-co-levels
  .obh-virtual-program-structure__intro > .obh-body-copy {
    width: 50%;
    max-width: none;
    margin: 0 !important;
  }

  .obh-component-instance--obh-mh-levels
  .obh-virtual-program-structure__intro > .obh-body-copy > :first-child,
  .obh-component-instance--obh-ed-levels
  .obh-virtual-program-structure__intro > .obh-body-copy > :first-child,
  .obh-component-instance--obh-sud-levels
  .obh-virtual-program-structure__intro > .obh-body-copy > :first-child,
  .obh-component-instance--obh-co-levels
  .obh-virtual-program-structure__intro > .obh-body-copy > :first-child {
    margin-top: 0 !important;
  }

  .obh-component-instance--obh-mh-levels
  .obh-virtual-program-structure__intro > .obh-body-copy > :last-child,
  .obh-component-instance--obh-ed-levels
  .obh-virtual-program-structure__intro > .obh-body-copy > :last-child,
  .obh-component-instance--obh-sud-levels
  .obh-virtual-program-structure__intro > .obh-body-copy > :last-child,
  .obh-component-instance--obh-co-levels
  .obh-virtual-program-structure__intro > .obh-body-copy > :last-child {
    margin-bottom: 0 !important;
  }
}

/* ==========================================================
   LINE BACKGROUND — LEVELS
   Item label typography
   ========================================================== */

.obh-component--line-background[class*="obh-component-instance--obh-"][class*="-levels"]
.obh-virtual-program-structure__item-label,
.obh-component--line-background[class*="obh-component-instance--obh-"][class*="-conditions"]
.obh-virtual-program-structure__item-label {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}