/*
 * Supplement to the live compiled CSS (assets/css/live/ + live-modules.css).
 * Only contains what the compiled files legitimately DON'T include:
 *   1. .d-flex / .d-none  — Bootstrap utility classes the compiled CSS
 *      references but that were served by HubSpot's platform CSS, not the
 *      theme package.
 *   2. .hero_gradient_word colors — HubSpot injected these inline per-page
 *      (scoped to a widget id) based on each hero's accent_gradient choice,
 *      so they aren't in module_Home-Hero.min.css. Re-created here keyed off
 *      the .gradient-{name} class our hero template-parts add.
 */

.d-flex { display: flex; }
.d-none { display: none; }

/* #main-content ships "overflow-x: hidden" verbatim from the live site's
   own compiled CSS (prevents horizontal scroll from full-bleed decorative
   elements). Per the CSS Overflow spec, the *computed value* of overflow-y
   is force-converted to "auto" whenever overflow-x computes to anything
   other than "visible" — this happens at computed-value time, AFTER the
   cascade, so simply declaring "overflow-y: visible" here does not
   override it (verified: it still computes to auto even with this
   explicit declaration). That auto-computed overflow-y turns this element
   into its own independent scroll container, which breaks position:sticky
   (it sticks relative to the nearest scrolling ancestor — now this element
   instead of the real page viewport). The live site never notices because
   its scroll-linked animations use position:fixed (unaffected by ancestor
   overflow); our interactive-feature section uses position:sticky.
   Fix: use overflow-x: clip instead of hidden — clip still prevents
   horizontal overflow visually but does NOT trigger the
   overflow-y-becomes-auto spec rule (clip only applies to that rule when
   paired with visible on the other axis, and here both axes end up clip
   anyway, so no scroll container is created). */
#main-content {
  overflow-x: clip;
  overflow-y: clip;
}

/* Header logo scales to fit the 240px logo link (live renders it ~58px tall
   from a 500x121 source; without this it shows at natural height). */
.header_logo_link img {
  max-width: 100%;
  height: auto;
}

/* Announcement banner gradient — the colors were a per-instance module
   style field on the live site (green -> blue), not in the compiled CSS. */
.announcements_banner {
  background: linear-gradient(90deg, #02B06B, #2E74EB);
}

/* Card-Grid per-instance style (card_gap / border_radius / background_color /
   card_spacing were module style fields, compiled inline per-widget on live).
   Measured from the live homepage: 1240px inner grid, 16px gap, #1c1c1c
   cards, 20px radius, 50/40 padding. */
.cards_grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
.cards_grid__items {
  gap: 16px;
  /* Column count comes from the --card-columns custom property set inline
     per instance, so the mobile media query below can still override it
     (an inline grid-template-columns would not be overridable). */
  grid-template-columns: repeat(var(--card-columns, 3), 1fr);
}
.cards_grid__item {
  background: #1c1c1c;
  border-radius: 20px;
  padding: 50px 40px;
}
@media (max-width: 768px) {
  .cards_grid__items {
    grid-template-columns: 1fr;
  }
  .cards_grid__item {
    padding: 20px;
  }
}

/* Gradient-word text clip. Shared by Home-Hero / Inner-Hero
   (.hero_gradient_word) and Text-Animated-Gradient (.gradient_word).
   Colors are the per-accent_gradient palettes, injected inline per-widget
   on the live site. */
.hero_gradient_word,
.gradient_word {
  display: inline-block;
}

.gradient-blue_green .hero_gradient_word,
.gradient-blue_green .gradient_word {
  background: linear-gradient(90deg, #1357CD, #2E74EB, #03CA7B, #04FB98, #A0FDD8, #DDFDF0, #FFFFFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-purple .hero_gradient_word,
.gradient-purple .gradient_word {
  background: linear-gradient(90deg, #8231C9, #9650D4, #DBB3FF, #F4E5FF, #FDFAFF, #FFFFFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-orange .hero_gradient_word,
.gradient-orange .gradient_word {
  background: linear-gradient(90deg, rgba(249, 117, 28, 0.10), #F9751C, #FADDBA, #FBAB75, #FEE9DB, #FFFFFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-pink .hero_gradient_word,
.gradient-pink .gradient_word {
  background: linear-gradient(90deg, #A92356, #D8407B, #F5AFCA, #FBDAE6, #FEFBFC, #FFFFFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-blue .hero_gradient_word,
.gradient-blue .gradient_word {
  background: linear-gradient(90deg, #1253C4, #2E74EB, #D6E5FF, #F0F5FF, #FFFFFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-green .hero_gradient_word,
.gradient-green .gradient_word {
  background: linear-gradient(90deg, #037749, #03CA7B, #D8F3E9, #F9FBF9, #FFFFFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Text-Animated-Gradient: the element itself has no max-width in the module
   CSS — on live the text width is constrained by the HubSpot dnd row that
   wraps it (~930px on Home, ~960px on The Alphind Way). We don't replicate
   that grid, so the constraint must live on the element: a 960px max-width
   with auto side margins centers the text and reproduces live's line
   wrapping (without it the copy spans the full 1440px viewport and wraps
   into far fewer, much wider lines than live). */
.basic-text-gradient {
  text-align: center;
}
.basic-text-gradient__text {
  line-height: 1.12;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  /* Live uses the module's mobile_font_size (~24px) below the desktop size. */
  .basic-text-gradient__text {
    font-size: 24px !important;
  }
}

/* Inner-hero height: honor the per-instance --inner-hero-min-h vars set by
   inner-hero.php (50vh desktop / 30vh mobile on live), overriding
   module_Inner-Hero.min.css's 80vh default. Loaded after live-modules.css,
   so same-specificity later rule wins — no !important needed. */
.alph_inner_hero {
  min-height: var(--inner-hero-min-h, 80vh);
}
@media (max-width: 650px) {
  .alph_inner_hero {
    min-height: var(--inner-hero-min-h-mobile, 50vh);
  }
}

/* Alphind-Way carousel row: live constrains the .alphind_way_container to a
   1140px centered column (HubSpot dnd row max-width). The module CSS only
   sets width:100%, so without this the absolutely-positioned principle
   icons spread across the full 1440px viewport instead of the tighter
   1140px live layout. */
.alphind_way_container {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

/* First text block after any inner hero sits 60px below it on live (the
   dnd row wrapping the first content module carries 60px top padding). This
   "hero → first text" gap is consistent across inner pages (About Us, The
   Alphind Way, …), so it's applied globally rather than per-page. */
.alph_inner_hero + .basic-text-gradient {
  margin-top: 60px;
}

/* ===== The Alphind Way — inter-section vertical spacing =====
   On live these gaps come from per-row padding on the HubSpot dnd sections
   (measured directly: carousel row pt 50 / pb 100; intro-2 row pb 60). We
   don't reproduce that grid, so the same rhythm is applied here via sibling
   margins, scoped to this page's body container so no other page is
   affected. Adjacent margins collapse, so each gap equals the larger of the
   two touching margins. */
.body-container--alphind-way .alphind_way_container {
  /* min(311px,47vw) is the module's icon-overflow reserve above the ring;
     live's carousel row adds a further 50px of top padding above that. */
  margin-top: calc(min(311px, 47vw) + 50px);
  margin-bottom: 100px;
}
.body-container--alphind-way .alphind_way_container ~ .basic-text-gradient {
  margin-bottom: 60px;
}

/* ===== About Us =====
   Live's "What Drives Us" body copy is a rich_text module constrained to
   ~928px and centered (mapped to our simple_text template, which by default
   is full-width/left-aligned). The Global Leadership Team grid row carries
   60px top / 100px bottom padding on live. Scoped so other simple_text /
   team_member usages are untouched. */
.body-container--about-us .simple-text {
  max-width: 928px;
  margin-left: auto;
  margin-right: auto;
}
.body-container--about-us .simple-text p {
  text-align: center;
}
.body-container--about-us .team-member {
  padding-top: 60px;
  padding-bottom: 100px;
}

/* ===== DCI / MCI / ECI product pages =====
   The intro tagline is a full-width gradient heading on live (h2, 48px,
   page-accent gradient, ~1196px wide, 88px below the hero). Our data stores
   it as a basic_text_gradient whose whole text is the accent phrase, so it
   renders through the existing .gradient-{color} system; these rules give it
   the wider 1196px column (vs the global 960px text width) and the 88px
   hero gap (vs the global 60px). Scoped to the shared care-intelligence
   template so ordinary basic-text-gradient blocks elsewhere keep 960/60. */
.body-container--care-intelligence .alph_inner_hero + .basic-text-gradient {
  margin-top: 88px;
}
.body-container--care-intelligence .alph_inner_hero + .basic-text-gradient .basic-text-gradient__text {
  max-width: 1196px;
  line-height: 1.17;
}

/* ===== Interactive intelligence section (scroll-linked, sticky-pinned) =====
   Live pins ONE shared ring+silhouette assembly (position:fixed, managed by
   GSAP ScrollTrigger math) while the page scrolls through each section, and
   swaps the active ring/color as the section under the cursor changes (see
   module.js: checkDisplay()/updateSectionColor()). We reproduce the "pinned
   while scrolling through" part with CSS position:sticky (native, robust,
   no manual fixed-position bookkeeping) and drive the active-section swap
   with an IntersectionObserver keyed to scroll position instead of cursor
   position — a scroll-native equivalent of the same interaction. */
.intelligence__sections {
  display: flex;
  gap: 40px;
  max-width: var(--global-context-max-width);
  margin: 0 auto;
  padding: 0 22px;
  align-items: flex-start;
}
.intelligence__text_column {
  flex: 1 1 42%;
  min-width: 0;
}
.intelligence__section {
  display: flex;
  align-items: center;
  min-height: 90vh;
}
.intelligence__section_maxw {
  padding: 40px 0;
  opacity: .45;
  transition: opacity .4s ease;
}
.intelligence__section.is-active .intelligence__section_maxw {
  opacity: 1;
}

.intelligence__rings_column {
  flex: 1 1 55%;
  position: sticky;
  /* Clears the fixed 100px header + a little breathing room. */
  top: 120px;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
}
.intelligence__rings_column .alphind_animated_logo_rings {
  position: relative;
  width: 500px;
  max-width: 100%;
  height: 500px;
  min-height: 0;
  top: auto;
  left: auto;
  margin: 0;
  opacity: 1;
  transform: none;
  pointer-events: none;
}
.intelligence__rings_column .logo_ring {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  /* base rotation supplied inline per ring */
}
.intelligence__rings_column .logo_ring svg {
  width: 100%;
  height: 100%;
}
.intelligence__rings_column .patient_image {
  width: 120px;
  height: 340px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  justify-content: center;
}
.intelligence__rings_column .patient_image svg {
  width: auto;
  height: 100%;
}
.intelligence__rings_column .orbiting_point {
  filter: opacity(1);
}

@media (max-width: 1050px) {
  .intelligence__sections {
    flex-direction: column;
    padding: 0 20px;
  }
  .intelligence__section {
    min-height: auto;
  }
  .intelligence__section_maxw {
    opacity: 1; /* no room to dim inactive text on stacked mobile layout */
  }
  .intelligence__rings_column {
    position: static;
    width: 100%;
    height: 360px;
  }
  .intelligence__rings_column .alphind_animated_logo_rings {
    width: 360px;
    height: 360px;
  }
}

/* Home-hero containment: live's HubSpot DnD grid wraps the hero module in a
   max-width:1280px row + 22px-padded column, yielding a 1236px effective hero
   width centered on the page. We don't have that row/column structure, so
   replicate the constraint directly. The hero's own 10px padding is part of its
   module CSS; the 22px comes from the DnD column — combine them into 32px. */
.body-container--home .alph_home_hero,
.body-container--region-home .alph_home_hero {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* Inner-hero containment: on live the hero TEXT sits in a 1280px centered
   DnD column (22px padding), but the black backdrop and the ring graphic
   both stay full-bleed — the black is a row-level background spanning 100vw
   and .inner_hero__logo_container is a 100vw overflow box.
   So constrain the CONTENT ONLY, via padding, and leave the hero itself
   full-width. Do NOT put max-width on .alph_inner_hero: it carries the black
   background (see the .alph_inner_hero background-color rule below) and is
   the containing block for the logo container, so capping its width letterboxes
   the backdrop (white page shows through on light pages) and clips the graphic.
   padding = the DnD column's own 22px, plus whatever centers a 1280px column
   in the current width; max() keeps it at a flat 22px below 1280px. */
.alph_inner_hero {
  padding-left: max(22px, calc((100% - 1280px) / 2 + 22px));
  padding-right: max(22px, calc((100% - 1280px) / 2 + 22px));
}

/* Home-hero logo positioning: the live page injects this inline per-widget;
   our home-hero.php sets the same values via CSS custom properties. */
.home_hero__logo {
  position: absolute;
  width: var(--home-hero-logo-width, 900px);
  height: auto;
  left: var(--home-hero-logo-left, 75%);
  top: var(--home-hero-logo-top, 50%);
  transform: translate(-50%, -50%);
}
.home_hero__logo img {
  width: 100% !important;
  height: auto;
  object-fit: contain;
}
@media (max-width: 1150px) {
  .home_hero__logo {
    width: calc(var(--home-hero-logo-width, 900px) * .6);
    left: auto;
    right: -5%;
    transform: translate(0, -50%);
  }
}
@media (max-width: 650px) {
  .home_hero__logo {
    width: var(--home-hero-logo-mobile-width, 300px);
    top: 50%;
  }
}

/* Inner-hero black backdrop: on live this comes from a HubSpot dnd_area
   "row background color" setting (a scoped .dnd_area-row-N-background-color
   class generating background-image: linear-gradient(#000, #000)) on the
   row wrapping the hero — page-builder infrastructure we don't have, so we
   apply the same solid black directly to the hero instead. */
.alph_inner_hero {
  background-color: var(--brand-black, #000);
}

/* Inner-hero logo positioning: live sizes/positions this image via a
   GSAP parallax script (data-depth attrs, no static CSS) that resolves to
   roughly a fixed 800px-wide image centered around (75%, 50%) of the hero
   at rest. module_Inner-Hero.min.css only supplies a full-bleed 100vw
   overflow:hidden container (meant to give the parallax room to roam), so
   without the JS the image stretches edge-to-edge and covers the h1. This
   pins it at the JS's resting position instead. */
.inner_hero__logo_container {
  position: absolute;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.inner_hero__logo {
  position: absolute;
  width: 800px;
  max-width: 90vw;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.inner_hero__logo img {
  width: 100% !important;
  height: auto;
}
@media (max-width: 650px) {
  .inner_hero__logo {
    width: 300px;
  }
}

/* ===== Connect page =====
   Live lays this out via its classic row-fluid > span5 + span7 grid
   (heading + facility addresses on the left, form card on the right).
   We don't have that HubSpot grid system, so page-connect.php renders
   connect_form + facility_locations together in a plain 2-column flex row
   instead. The form itself was a native HubSpot form (id
   69fde441-...) with its own hs-input/hs-form-radio-display styling that
   isn't in any fetched module CSS (forms.js injects its own); these rules
   restyle Contact Form 7's equivalent markup to match live's look. */
.connect__row {
  display: flex;
  gap: 60px;
  max-width: var(--global-context-max-width, 1280px);
  margin: 0 auto;
  padding: 60px 28px;
  align-items: flex-start;
}
.connect__col--intro {
  flex: 0 0 41.6%;
}
.connect__col--form {
  flex: 1 1 0;
  min-width: 0;
}
.connect-form__intro h1 {
  color: #fff;
  font-size: 32px;
  margin-bottom: 22px;
}
.facility-locations__list {
  margin-top: 20px;
}
.facility_location__text a {
  color: inherit;
  text-decoration: none;
}
/* On live the map is a full-bleed section (full viewport width, 420px tall)
   below the 2-column row — not confined to the left column. It renders as a
   direct child of the max-width body-container here, so break it out of the
   container with the 100vw / negative-margin trick. Module CSS already sets
   height:420px. */
#map {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 60px;
}
@media (max-width: 900px) {
  .connect__row {
    flex-direction: column;
  }
  .connect__col--intro {
    flex: 1 1 auto;
  }
}

/* Contact Form 7 field styling + spacing, matched to live's HubSpot form.
   Each field is a CF7 <p>; a flat 30px bottom margin gives the ~33px
   inter-field rhythm live uses. Radio/checkbox groups get extra top space
   (live ~73px); margins collapse so the larger value wins the gap. */
.connect-form__form form > p {
  margin: 0 0 30px;
}
/* The card's own top padding is 0 (from the fetched module CSS); live's first
   field sits ~35px below the card's top edge, so add that gap above the
   first field (the message textarea) rather than flush against the border. */
.connect-form__form form > p:first-of-type {
  margin-top: 35px;
}
.connect-form__form .wpcf7-form-control-wrap {
  display: block;
}
.connect-form__form input.wpcf7-form-control,
.connect-form__form textarea.wpcf7-form-control {
  width: 100%;
  padding: 18px 30px;
  border: 0;
  border-radius: 7px;
  background-color: #404040;
  color: #fff;
  font-size: 16px;
}
.connect-form__form textarea.wpcf7-form-control {
  /* CF7 renders textareas at rows="10" (very tall); live's message box is
     ~105px. Force the height to match. */
  height: 105px;
  min-height: 105px;
}
.connect-form__form input.wpcf7-form-control::placeholder,
.connect-form__form textarea.wpcf7-form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Group heading labels above the radio / checkbox sets. */
.connect-form__form .cf-group-label {
  display: block;
  color: #fff;
  font-size: 16px;
  margin-bottom: 16px;
}
.connect-form__form form > p:has(.wpcf7-radio),
.connect-form__form form > p:has(.wpcf7-checkbox) {
  margin-top: 73px;
}
/* "Who can we get you in touch with?" — radio buttons styled as pills
   (live: 10px gap, green-bordered, filled green when selected). */
.connect-form__form .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.connect-form__form .wpcf7-radio .wpcf7-list-item {
  margin: 0;
}
.connect-form__form .wpcf7-radio .wpcf7-list-item-label {
  display: inline-block;
  border: 2px solid var(--brand-green, #02b06b);
  border-radius: 100px;
  padding: 13px 42px;
  cursor: pointer;
  color: #fff;
  transition: background-color .2s ease, color .2s ease;
}
.connect-form__form .wpcf7-radio input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.connect-form__form .wpcf7-radio input:checked ~ .wpcf7-list-item-label {
  background: var(--brand-green, #02b06b);
  color: #000;
}

/* "Product Offerings" — square checkboxes in a vertical list (NOT pills,
   which is how live renders this group). */
.connect-form__form .wpcf7-checkbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.connect-form__form .wpcf7-checkbox .wpcf7-list-item {
  margin: 0;
}
.connect-form__form .wpcf7-checkbox .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.connect-form__form .wpcf7-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid #d0d0d0;
  border-radius: 2px;
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  margin: 0;
}
.connect-form__form .wpcf7-checkbox input[type="checkbox"]:checked {
  background: var(--brand-green, #02b06b);
  border-color: var(--brand-green, #02b06b);
}
.connect-form__form .wpcf7-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* First + Last name share one row (side by side), like live. */
.connect-form__form form > p:has(input[name="first-name"]) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Privacy notice + acceptance checkbox. */
.connect-form__form .cf-privacy {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 40px 0 20px;
}
.connect-form__form .wpcf7-acceptance .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.connect-form__form .wpcf7-acceptance input {
  width: auto;
  margin-top: 3px;
}
.connect-form__form .wpcf7-acceptance .wpcf7-list-item-label {
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
}
.connect-form__form input[type="submit"] {
  background: transparent;
  border: 2px solid var(--brand-green, #02b06b);
  color: #fff;
  border-radius: 1000px;
  padding: 12px 60px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color .2s ease;
}
.connect-form__form input[type="submit"]:hover {
  background: var(--brand-green, #02b06b);
}

/* DCI/ECI/MCI "offerings_content" cards: module_DCI-Home.min.css supplies
   .dci-in-card/.btn-xealei/.dci-inview-image AND the .dci-cards padding
   (0 50px) — it only lacks the max-width container (live wraps .dci-cards in
   .wrapper.light > .container at 1196px). Set only max-width here; do NOT
   override the module's padding (an earlier 20px vertical override widened
   the between-card gap to 90px — live is 50px — and narrowed the cards). */
.dci-cards {
  max-width: 1196px;
}
.dci-in-card h2 {
  /* Live's card heading is 32px / weight 300, orange. Our default rendered
     it at 24px. */
  color: var(--dci-accent, #fa8333);
  font-size: 32px;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 16px;
}
.dci-inview-image img {
  max-width: 100%;
  height: auto;
}
/* The fetched .btn-xealei rules are all scoped to `.dci-hero .btn-xealei` /
   `.xealei-cta-box .btn-xealei`, but our cards aren't wrapped in .dci-hero,
   so the "Learn more" button rendered unstyled (plain green link). Replicate
   the base button style scoped to our card. */
.dci-in-card .btn-xealei {
  display: inline-block;
  margin-top: 24px;
  border: 1px solid #fa8333;
  border-radius: 8px;
  color: #fa8333;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  padding: 8px 24px;
  text-align: center;
  text-decoration: none;
  transition: all .35s;
}
.dci-in-card .btn-xealei:hover {
  background: #fa8333;
  color: #fff;
}

/* ===== APAC / IN regional-home intelligence cards =====
   The regional homes replace the US home's animated ring section with a
   static 3-column grid of gradient-headed cards + Learn More buttons
   (.orange/pink/blue-gradient headings + .btn-{color} buttons). The button
   classes ship in the fetched template CSS; the gradient-text heading
   classes were injected inline per-page on live, so they're defined here. */
.intelligence-cards {
  max-width: 1240px;
  margin: 0 auto;
  padding: 60px 20px 100px;
}
.intelligence-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
}
.intelligence-cards__item {
  text-align: center;
}
.intelligence-cards__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 16px;
}
.intelligence-cards__richtext {
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 24px;
}
body.light .intelligence-cards__richtext {
  color: #1c1c1c;
}
.orange-gradient {
  background: linear-gradient(90deg, #FA8332, #DB600F);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pink-gradient {
  background: linear-gradient(90deg, #D8407B, #A92356);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.blue-gradient {
  background: linear-gradient(90deg, #2E74EB, #1253C4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 900px) {
  .intelligence-cards__grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

/* Region-home (APAC/IN): the hero eyebrow is intrinsic to these pages, so
   force it visible regardless of the client-side region toggle. */
.body-container--region-home .home_hero__h4 {
  display: block !important;
}

/* ===== News listing =====
   Live's /news is the D-Blog-Listing layout: a centered max-width container
   with a 3-column, 35px-gap grid, 60px below the hero and 100px above the
   footer. Our News page renders the recent_posts widget instead, whose
   grid wrapper has no fetched CSS — these rules make it read identically to
   live's .blog-listing. The empty widget heading (live has no heading over
   the cards) is hidden. Scoped to the News body container. */
.body-container--news .recent-posts {
  padding: 60px 0 100px;
}
.body-container--news .recent-posts__heading-wrapper {
  display: none;
}
.body-container--news .recent-posts__container {
  max-width: var(--global-context-max-width);
  margin: 0 auto;
  padding: 0 22px;
}
.body-container--news .recent-posts__posts-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
}

/* ===== Home page text-section vertical rhythm =====
   On live the home's text blocks (It's time to elevate / What if healthcare
   was / This is Whole Person Care) get generous vertical padding from their
   HubSpot dnd rows (measured section heights 251 / 338-grouped / 148 vs the
   bare text heights ~121 / 40 / 43). We stripped .basic-text-gradient's
   padding for The Alphind Way (where those rows have none), so it must be
   restored here, scoped to the home container. Derived per position:
   - "It's time" (1st): 50px above, 80px below
   - "What if" (immediately before the Emp/Vis/Prag cards): tight 26px below
   - "This is" (immediately after the cards): 50/55px */
.body-container--home .basic-text-gradient {
  padding-top: 50px;
  padding-bottom: 80px;
}
.body-container--home .basic-text-gradient:has(+ .cards_grid) {
  padding-top: 0;
  padding-bottom: 26px;
}
/* General sibling (~), not adjacent (+): card-grid.php emits a <script> right
   after .cards_grid, so the "This is Whole Person Care" text isn't the
   immediate next sibling. It's the only .basic-text-gradient after the
   cards, so ~ targets it unambiguously. */
.body-container--home .cards_grid ~ .basic-text-gradient {
  padding-top: 50px;
  padding-bottom: 55px;
}

/* ===== Header submenu (flyout) hover-gap fix =====
   On live the Products flyout's top edge meets the menu item exactly (submenu
   top == item bottom, 0 gap). Our header renders the nav item ~5px shorter, so
   the flyout opens ~5px below the trigger, leaving a dead zone where neither
   the trigger nor the flyout is hovered. Moving the cursor from "Products"
   down to a submenu link crosses that zone, drops :hover, and closes the
   flyout before the link can be clicked. Pull the flyout up to overlap the
   trigger so there is no gap (matches live's flush behavior). */
.header_navigation .hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  margin-top: -6px;
}

/* ===== Connect page map (facility locations) =====
   module_Facility-Locations.min.css only carries #map's 420px box and the
   address-list styles — the marker and popup rules lived in the module's own
   per-instance CSS, which isn't part of the fetched bundle. Without them the
   markers rendered as zero-size invisible divs. Re-declared here from the
   original module.css, with the popup selectors targeting Leaflet's class
   names (the map engine is Leaflet now — see facility-locations.php for why),
   keeping the original's look: round marker badge, green title, black
   address link that turns green on hover. */
.marker {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.leaflet-popup-content {
  color: #000;
  font-size: 17px;
  font-weight: 500;
  margin: 25px 24px 20px;
}
.leaflet-popup-content h3 {
  color: var(--brand-green);
  font-weight: 600;
  margin-bottom: 14px;
}
.leaflet-popup-content h5 {
  margin-bottom: 0;
  font-weight: 400;
}
.leaflet-popup-content h5 a {
  color: #000;
  font-weight: 400;
  outline: none;
  transition: color 250ms ease-in-out;
}
.leaflet-popup-content h5 a:hover {
  color: var(--brand-green);
}
.leaflet-popup-close-button {
  font-size: 26px;
  color: #000 !important;
  outline: none !important;
}
/* Leaflet's own control/attribution chrome inherits the site's link color
   otherwise, which is unreadable on the light map tiles. */
.leaflet-container a.leaflet-popup-close-button:hover {
  color: var(--brand-green) !important;
}