/* ==========================================================================
   RECO Health - Parent Company Website
   reco.health | The RECO Treatment Network Hub
   Black & White Premium Theme
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme Overrides & Custom Properties
   -------------------------------------------------------------------------- */
:root {
  --primary: #000000;
  --primary-light: #333333;
  --primary-dark: #000000;
  --primary-rgb: 0, 0, 0;
  --off-white: #f5f0eb;
  --cream: #F4F0E6;
  --dark: #0a0a0a;

  /* Child Brand Colors */
  --brand-intensive: #f03e7c;
  --brand-institute: #10a8ca;
  --brand-immersive: #50A63C;
  --brand-island: #E87800;
  --brand-psychiatry: #6B3FA0;

  /* RECO Common */
  --off-black: #201E10;
  --lite-sand: #F4F0E6;
  --white: #ffffff;

  /* Site-specific */
  --hero-gradient: linear-gradient(180deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.7) 50%,
    rgba(0, 0, 0, 0.9) 100%);

  /* Navbar */
  --navbar-height: 88px;
}

/* --------------------------------------------------------------------------
   1b. Container Classes (Webflow-compatible)
   -------------------------------------------------------------------------- */
.w-layout-blockcontainer {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  display: block;
}

.w-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.w-container::before,
.w-container::after {
  content: " ";
  display: table;
}

.w-container::after {
  clear: both;
}

.max-container {
  max-width: 1136px;
  padding-left: 24px;
  padding-right: 24px;
}

.w-layout-grid {
  display: grid;
}

@media (max-width: 991px) {
  .w-layout-blockcontainer,
  .w-container {
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media (max-width: 767px) {
  .w-layout-blockcontainer,
  .w-container {
    padding-left: 5%;
    padding-right: 5%;
  }
}

/* --------------------------------------------------------------------------
   1c. Utility Classes (Webflow-compatible)
   -------------------------------------------------------------------------- */
.font-dm,
.dm-mono {
  font-family: 'DM Mono', monospace;
}

.font-12 {
  font-size: 12px;
  margin-bottom: 0;
  line-height: 1.4;
}

.font-14 {
  font-size: 14px;
}

.font-16 {
  font-size: 16px;
}

.font-18 {
  font-size: 18px;
  font-weight: 400;
}

.font-20 {
  font-size: 20px;
}

.font-24 {
  font-size: 24px;
  line-height: 1.2;
}

.font-48 {
  font-size: 48px;
  line-height: 1.1;
}

.font-light {
  font-weight: 300;
}

.font-semibold {
  font-weight: 500;
}

.font-white {
  color: #fff;
}

.font-black {
  color: #201E10;
}

.off-black {
  color: #201E10;
}

.font-lite-black {
  color: rgba(32, 30, 16, 0.5);
}

.font-lite-sand {
  color: rgba(244, 240, 230, 0.7);
}

.figtree {
  font-family: 'Figtree', sans-serif;
}

.opacity-60 {
  opacity: 0.6;
}

.lighter-black {
  color: rgba(32, 30, 16, 0.35);
}

/* Flex helpers */
.flex-16 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}

.flex-12 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flex-12.down {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flex-48 {
  display: flex;
  gap: 48px;
}

.flex-48.horizontal {
  flex-direction: row;
}

.flex-40 {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}

.flex-40._30-width {
  width: 30%;
  min-width: 280px;
}

.flex-auto-48 {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  flex: 1;
}

.flex-0 {
  grid-column-gap: 0;
  grid-row-gap: 0;
  flex-flow: column;
  display: flex;
  width: 100%;
}

.center-align {
  align-items: center;
}

.padding-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.padding-40.bottom-only {
  padding-top: 0;
}

._4-grid {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  display: grid;
}

@media (max-width: 767px) {
  .font-48 {
    font-size: 36px;
  }
}

/* ==========================================================================
   NAV SYSTEM (Glassmorphic - matching Island/Immersive/Psychiatry)
   ========================================================================== */
.section-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  background-color: transparent;
  transition: background-color 0.3s, backdrop-filter 0.3s;
  /* Match the hero-frame inset (16px) so the nav content visually sits
     inside the same floating-card region as the photo. */
  padding: 24px 32px;
}

@media (max-width: 991px) {
  .section-nav { padding: 16px 24px; }
}
@media (max-width: 767px) {
  .section-nav { padding: 12px 16px; }
}

/* Nav link labels never wrap (e.g. "Mental Health" was breaking onto 2 lines) */
.section-nav .nav-link-block,
.section-nav .nav-link-block .figtree,
.section-nav .nav-link-block .off-black {
  white-space: nowrap;
}

/* Header menu text — always black (was white-on-dark-hero, but the
   CTA pill behind the nav already provides contrast against the video). */
.section-nav .nav-link-block .off-black,
.section-nav .nav-link-block .figtree {
  color: #201E10;
  transition: color 0.4s ease;
}

.section-nav .logo,
.section-nav .recohomelogo.logo {
  color: #201E10;
  transition: color 0.4s ease;
}

.section-nav .div-line {
  background-color: #201E10;
  transition: background-color 0.4s ease;
}

/* Scrolled state: transparent, no background */
.section-nav.scrolled {
  background-color: transparent;
}

.section-nav.scrolled .nav-link-block .off-black,
.section-nav.scrolled .nav-link-block .figtree {
  color: #201E10;
}

.section-nav.scrolled .logo,
.section-nav.scrolled .recohomelogo.logo {
  color: #201E10;
}

.section-nav.scrolled .div-line {
  background-color: #201E10;
}

.nav-container {
  max-width: 1920px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
  position: relative;
}

.nav-div-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
  /* Minimum breathing room between logo / nav-links pill / phone CTA so they
     never visually touch even when the nav-links pill is wide. */
  gap: 24px;
}

.nav-home-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  z-index: 10;
}

/* Logo base color - overridden by .section-nav state rules for
   transparent nav on dark hero and glassmorphic scrolled state */
.recohomelogo.logo {
  color: #201E10;
}

/* Glassmorphic Nav Bar */
.nav-links-div {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: rgba(244, 240, 230, 0.5);
  border-radius: 8px;
  justify-content: flex-start;
  align-items: center;
  height: 56px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}

.nav-link-block {
  color: rgba(32, 30, 16, 0.6);
  justify-content: center;
  align-self: center;
  align-items: center;
  height: 56px;
  padding-left: 12px;
  padding-right: 12px;
  text-decoration: none;
  transition: color 0.2s;
  display: flex;
  cursor: pointer;
  font-size: 14px;
  font-family: Figtree, sans-serif;
}

.nav-link-block:hover,
.nav-link-block.w--current {
  color: #201E10;
}

.nav-link-block.has-dropdown {
  cursor: default;
}

.nav-link-block.has-dropdown.hover-active {
  color: #201E10;
}

.nav-link-block > div {
  line-height: 1;
  display: flex;
  align-items: center;
}

.nav-item-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-right-side {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  align-items: center;
  display: flex;
}

.phone-call {
  text-decoration: none;
}

/* Nav CTA Button */
.nav-cta-div {
  background-color: #201E10;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  height: 56px;
  padding: 16px 32px;
  transition: background-color 0.2s;
  display: flex;
}

.nav-cta-div:hover {
  background-color: #000;
}

/* Nav CTA: solid white on dark hero, solid dark on scroll */
.nav-cta-div.health-cta {
  background-color: #ffffff;
  border: 1px solid #ffffff;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.nav-cta-div.health-cta .number,
.nav-cta-div.health-cta .call-us {
  color: #201E10;
  transition: color 0.4s ease;
}

.nav-cta-div.health-cta:hover {
  background-color: rgba(255, 255, 255, 0.85);
}

.section-nav.scrolled .nav-cta-div.health-cta {
  background-color: #201E10;
  border-color: #201E10;
}

.section-nav.scrolled .nav-cta-div.health-cta:hover {
  background-color: #000;
}

.section-nav.scrolled .nav-cta-div.health-cta .number,
.section-nav.scrolled .nav-cta-div.health-cta .call-us {
  color: #ffffff;
}

.nav-cta-div .call-us {
  display: none;
}

/* Dropdown Containers */
.desktop-nav-dropdown-container {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: #fff;
  border: 1px solid rgba(143, 142, 132, 0.3);
  border-radius: 16px;
  justify-content: space-between;
  align-items: stretch;
  width: 704px;
  max-width: 704px;
  padding: 12px;
  display: flex;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 2px 20px rgba(32, 30, 16, 0.1);
}

.desktop-nav-dropdown-container.about,
.desktop-nav-dropdown-container.treatment {
  z-index: 99;
  opacity: 0;
  height: auto;
  min-height: 350px;
  transition: opacity 0.2s;
  display: none;
  position: fixed;
  top: 64px;
}

.desktop-nav-dropdown-container.admissions,
.desktop-nav-dropdown-container.resources {
  z-index: 99;
  opacity: 0;
  flex-flow: row-reverse;
  height: auto;
  min-height: 350px;
  max-height: 80vh;
  overflow-y: auto;
  transition: opacity 0.2s;
  display: none;
  position: fixed;
  top: 64px;
}

.dropdown-spacer {
  width: 100%;
  height: 12px;
  position: absolute;
  top: -12px;
}

.nav-dropdown-links-div {
  flex-flow: column;
  width: 50%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.nav-dropdown-links-div.treatment {
  width: 50%;
}

.nav-dropdown-link {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  padding: 12px;
  text-decoration: none;
  display: flex;
  color: #201E10;
  border-radius: 12px;
  width: 100%;
  transition: background-color 0.2s;
}

.nav-dropdown-link:hover {
  background-color: #f5f0eb;
}

.nav-special-side-div {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  align-self: stretch;
  width: 50%;
  height: 100%;
  display: flex;
  position: relative;
}

/* Cross-site links in nav */
.reco-other-div {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: var(--white);
  background-color: #1a1a1a;
  background-image: linear-gradient(#0000, #00000080), linear-gradient(#00000080, #00000080);
  background-position: 0 0, 0 0, 50%;
  background-repeat: repeat, repeat, no-repeat;
  background-size: auto, auto, cover;
  border-radius: 8px;
  flex-flow: column;
  height: 100%;
  padding: 8px 8px 14px 16px;
  display: flex;
  justify-content: space-between;
}

.reco-other-div .w-embed {
  display: flex;
  align-items: center;
}

.reco-other-div .w-embed svg {
  color: #ffffff;
  max-height: 28px;
  width: auto;
}

/* Facility card description text: prevent wrapping */
.reco-other-div .font-18.font-semibold {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  line-height: 1.3;
}

.reco-link {
  text-decoration: none;
  display: block;
  height: 100%;
}

.number-div {
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
  color: #ffffff;
}

.number-div .font-dm {
  color: #ffffff;
}

.number-div.pink { background-color: #f03e7c; }
.number-div.blue,
.number-div.teal { background-color: #10a8ca; }
.number-div.green { background-color: #50A63C; }
.number-div.orange { background-color: #E87800; }
.number-div.purple { background-color: #6B3FA0; }

/* Insurance CTA in dropdown */
.veryify-insurance-link-block {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: var(--white);
  background-image: url("https://cdn.prod.website-files.com/67b26bbd280aed77b1cbf923/67bb4557ad62bdfb0ddc104f_Blog%20Group.webp");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 8px;
  flex-flow: column-reverse;
  height: 100%;
  padding: 12px;
  text-decoration: none;
  display: flex;
  transition: opacity 0.2s;
}

.veryify-insurance-link-block:hover {
  opacity: 0.9;
}

/* Nav dropdown background images (paths relative to CSS file) */
.veryify-insurance-link-block.nav-bg-programs {
  background-image: url('../images/nav-programs.webp');
}
.veryify-insurance-link-block.nav-bg-admissions {
  background-image: url('../images/nav-admissions.webp');
}
.veryify-insurance-link-block.nav-bg-mental {
  background-image: url('../images/nav-mental-health.webp');
}
.veryify-insurance-link-block.nav-bg-resources {
  background-image: url('../images/nav-resources.webp');
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  cursor: pointer;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #f4f0e680;
  border-radius: 8px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  position: relative;
  z-index: 1001;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.menu-x-wrapper {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 100%;
  display: flex;
  position: relative;
}

.div-line {
  background-color: #030326;
  flex-flow: column;
  width: 100%;
  height: 2px;
  display: flex;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.div-line.top {
  margin-bottom: 6px;
  position: absolute;
}

.div-line.bottom {
  margin-top: 6px;
  position: absolute;
  transform: translate(0);
}

.mobile-menu-toggle.is-open .div-line.top {
  transform: translateY(5px) rotate(45deg);
}

.mobile-menu-toggle.is-open .div-line.bottom {
  transform: translateY(-5px) rotate(-45deg);
}

/* Mobile Menu — Glass Translucent Effect (like Island/Immersive) */
.mobile-menu {
  z-index: 998;
  opacity: 0;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  background-color: rgba(244, 240, 230, 0.85) !important;
  background: rgba(244, 240, 230, 0.85) !important;
  flex-flow: column;
  width: 100vw;
  height: 100vh;
  display: none;
  position: fixed;
  inset: 0%;
  overflow: scroll;
  /* Override reco-base.css transform: translateX(100%) -- Health uses display/opacity approach */
  transform: none;
  transition: opacity 0.3s ease-in-out;
}

.mobile-menu-container {
  width: 100%;
  padding-left: 56px;
  padding-right: 56px;
}

.mobile-menu-links-div {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  margin-top: 120px;
  margin-bottom: 160px;
  display: flex;
}

.menu-links-section-div {
  padding: 0;
}

.menu-links-section-div .font-24 {
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 16px;
  color: #201E10;
}

.menu-links-section-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-nav-link {
  color: var(--off-black);
  font-size: 18px;
  text-decoration: none;
  transition: color 0.2s;
}

.mobile-nav-link:hover {
  color: #201E10;
}

.separator-line {
  width: 100%;
  height: 1px;
  background-color: rgba(143, 142, 132, 0.3);
}

/* Social Circles */
.social-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(32, 30, 16, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #201E10;
  transition: all 0.2s;
  text-decoration: none;
}

.social-circle:hover {
  background-color: #201E10;
  color: #fff;
  border-color: #201E10;
}

.social-circle svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   FOOTER SYSTEM (matching Island/Immersive/Psychiatry)
   ========================================================================== */
.footer.section {
  position: relative;
  background-color: #F4F0E6;
}

.footer-container {
  max-width: 1920px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}

/* Soft pastel "RECO timeline rainbow" — five brand-colored radial glows
   bleeding over a cream base. Light enough to keep dark footer text readable. */
.footer .footer-container {
  position: relative;
  background-color: #f4f0e6;
  background-image:
    radial-gradient(60% 70% at 8% 15%,  rgba(232, 120, 0, 0.45) 0%, transparent 70%),
    radial-gradient(55% 65% at 35% 85%, rgba(240, 62, 124, 0.40) 0%, transparent 70%),
    radial-gradient(50% 60% at 60% 25%, rgba(80, 166, 60, 0.35)  0%, transparent 70%),
    radial-gradient(55% 65% at 80% 80%, rgba(107, 63, 160, 0.40) 0%, transparent 70%),
    radial-gradient(60% 70% at 96% 20%, rgba(16, 168, 202, 0.40) 0%, transparent 70%);
}

.footer-padding {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  padding-top: 96px;
  padding-bottom: 32px;
  display: flex;
}

.footer a {
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer a:hover {
  opacity: 0.7;
}

/* Footer Flex Layout */
.flex-48.horizontal.footer-flex {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.flex-0 {
  grid-column-gap: 0;
  grid-row-gap: 0;
  flex-flow: column;
  display: flex;
}

.flex-40._30-width {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  width: 30%;
  min-width: 300px;
  display: flex;
}

.flex-12.down {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.mt-footer-cta {
  margin-top: 8px;
}

.footer-social {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(143, 142, 132, 0.3);
  margin-top: 8px;
}

.footer-legal-links {
  display: flex;
  gap: 16px;
}

.footer-address {
  margin-top: 8px;
}

/* Footer Grid Layouts */
._4-grid {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

._2-grid {
  grid-column-gap: 40px;
  grid-row-gap: 8px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.grid-5 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.grid-5 img {
  width: 100%;
  max-height: 48px;
  object-fit: contain;
}

/* Footer Spacing */
.padding-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.padding-40.bottom-only {
  padding-top: 0;
}

.flex-16 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}

.flex-24 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.flex-24.left-align {
  justify-content: flex-start;
  align-items: flex-start;
}

.flex-24.left-align.full-width {
  width: 100%;
}

.flex-8 {
  display: flex;
  gap: 8px;
}

/* Footer Form Styles */
.w-form {
  margin: 0 0 15px;
}

.w-form-done {
  text-align: center;
  background-color: #ddd;
  padding: 20px;
  display: none;
}

.w-form-fail {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
  display: none;
}

.w-input {
  color: #333;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
}

.w-input::placeholder {
  color: #999;
}

.w-input:focus {
  border-color: #3898ec;
  outline: 0;
}

.form-field {
  color: #201E10;
  background-color: rgba(143, 142, 132, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  margin-bottom: 0;
}

.form-field:focus {
  border-color: rgba(0, 0, 0, 0.3);
}

.form-field::placeholder {
  color: rgba(32, 30, 16, 0.5);
}

.w-button {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}

input.w-button {
  -webkit-appearance: button;
}

.black-submit {
  background-color: #201E10;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
  width: 100%;
}

.black-submit:hover {
  opacity: 0.85;
}

/* Footer Flex Helpers */
.flex-16-auto {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.flex-16-auto.full-width {
  width: 100%;
}

.full-width {
  width: 100%;
}

.left-align {
  text-align: left;
}

/* Accreditations */
.accreditations-div {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}

/* Center-align footer bottom helper */
.flex-auto.center-align {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
}

/* Responsive: Nav + Footer */
@media (max-width: 991px) {
  .nav-links-div {
    display: none;
  }
  .mobile-menu-toggle {
    display: flex;
  }
  .nav-cta-div .number {
    display: none;
  }
  .nav-cta-div .call-us {
    display: block;
  }
  .flex-48.horizontal.footer-flex {
    flex-direction: column-reverse;
  }
  .flex-40._30-width {
    width: 100%;
    min-width: unset;
  }
  .footer-container {
    padding-left: 5%;
    padding-right: 5%;
  }
  .footer-padding {
    padding-top: 48px;
  }
  ._2-grid {
    grid-template-columns: 1fr;
  }
  .flex-auto.center-align {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .nav-container {
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media (max-width: 767px) {
  .section-nav {
    min-height: 72px;
    height: auto;
  }
  ._4-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
  }
  .grid-5 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .footer-container {
    padding-left: 5%;
    padding-right: 5%;
  }
  .nav-cta-div {
    height: 44px;
    padding: 12px 20px;
  }
}

/* --------------------------------------------------------------------------
   1d. Button Variants
   -------------------------------------------------------------------------- */
.btn--outline {
  background-color: transparent;
  color: #201E10;
  border: 2px solid rgba(32, 30, 16, 0.2);
}

.btn--outline:hover {
  background-color: #201E10;
  color: #fff;
  border-color: #201E10;
  transform: translateY(-1px);
}

.btn--outline-white {
  background-color: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn--outline-white:hover {
  background-color: #fff;
  color: #201E10;
  border-color: #fff;
}

/* --------------------------------------------------------------------------
   2. Global Enhancements
   -------------------------------------------------------------------------- */
::selection {
  background-color: rgba(0, 0, 0, 0.15);
  color: #201E10;
}

body {
  background-color: #fff;
}

/* Premium section headings */
.section-label {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: var(--space-4);
  display: block;
}

.section-heading {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-6);
  line-height: 1.15;
}

.section-subheading {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 640px;
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   3. Navbar - Dark Mode Premium
   -------------------------------------------------------------------------- */
.reco-navbar.dark-hero {
  background-color: transparent;
}

.reco-navbar.dark-hero .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

.reco-navbar.dark-hero .nav-link:hover {
  color: var(--white);
}

.reco-navbar.dark-hero .navbar-phone {
  color: rgba(255, 255, 255, 0.85);
}

.reco-navbar.dark-hero .navbar-toggle span {
  background-color: var(--white);
}

.reco-navbar.dark-hero.scrolled {
  background-color: rgba(10, 10, 10, 0.95);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.reco-navbar.dark-hero.scrolled .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

.reco-navbar.dark-hero.scrolled .navbar-phone {
  color: rgba(255, 255, 255, 0.85);
}

/* Logo SVG + label */
.reco-logo {
  height: 32px;
  width: auto;
  color: var(--white);
  transition: color 0.3s ease;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.navbar-logo-label {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--white);
  opacity: 0.6;
  letter-spacing: var(--tracking-tight);
}

/* Legacy text logo fallback */
.navbar-logo-text {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--white);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}

.navbar-logo-text span {
  font-weight: 300;
  opacity: 0.6;
  margin-left: 2px;
}

/* Mega Menu - Network */
.network-mega {
  padding: var(--space-10) 0;
}

.network-mega .mega-inner {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 220px;
  gap: var(--space-6);
}

.mega-program-card {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast);
}

.mega-program-card:hover {
  background-color: var(--gray-50);
}

.mega-program-card .program-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: var(--space-2);
}

.mega-program-card h5 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.mega-program-card p {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.mega-cta-panel {
  background: var(--off-white);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mega-cta-panel h5 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.mega-cta-panel p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

/* CTA button in nav */
.btn--nav-cta {
  background-color: var(--white);
  color: var(--dark);
  border-color: var(--white);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-5);
}

.btn--nav-cta:hover {
  background-color: transparent;
  color: var(--white);
  border-color: var(--white);
}

.scrolled .btn--nav-cta {
  background-color: var(--dark);
  color: var(--white);
  border-color: var(--dark);
}

.scrolled .btn--nav-cta:hover {
  background-color: transparent;
  color: var(--white);
  border-color: var(--white);
}

/* --------------------------------------------------------------------------
   4. Hero Section
   --------------------------------------------------------------------------
   Layout pattern (matches reco-immersive's floating-card hero):
     .hero--home          full-bleed wrapper, white bg (page color)
     .hero-frame          inset 16px, border-radius 32px, overflow:hidden
                          contains the photo bg, gradient overlay, grain,
                          AND the centered text content. Photo is clipped
                          to the rounded shape so nothing bleeds past.
   The 16px gap reveals the white page bg around the photo card.
   Nav stays full-width as before; it overlays the hero on top.
   -------------------------------------------------------------------------- */
.hero--home {
  min-height: 100vh;
  background-color: #fff;
  position: relative;
  /* No flex on the outer wrapper - the .hero-frame handles its own centering */
  padding-top: 0;
}

.hero-frame {
  position: absolute;
  inset: 16px;
  border-radius: 32px;
  overflow: hidden;
  background-color: var(--dark);
  display: flex;
  flex-direction: column;
  /* Push the headline content into the upper third so it never collides
     with the absolutely positioned .hero__bottom-bar. */
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding-top: calc(var(--navbar-height) + 80px);
  padding-bottom: 200px;
  /* Force a stacking context so children with transforms / hardware-accelerated
     video respect the rounded corners (WebKit/Chromium border-radius bug). */
  transform: translateZ(0);
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  will-change: transform;
}
/* Inherit the rounded mask down to the video wrapper + video itself so
   nothing bleeds past the frame edges. */
.hero-frame .hero__bg,
.hero-frame .hero__bg video,
.hero-frame .hero__bg::after {
  border-radius: inherit;
}
@media (max-width: 768px) {
  /* Move hero content UP (reduce top padding) so there's noticeable space
     between "real outcomes since 2014." and the bottom-bar tagline below it,
     without pushing the hero below the fold. */
  .hero-frame {
    padding-top: calc(var(--navbar-height) + 32px);
    padding-bottom: 240px;
  }
  .hero--home .hero__content { gap: 18px; }
  .hero__bottom-bar { gap: 14px; padding-top: 8px; }
}

@media (max-width: 991px) {
  .hero-frame { inset: 12px; border-radius: 24px; }
}
@media (max-width: 767px) {
  .hero-frame { inset: 8px;  border-radius: 18px; }
}

.hero--home .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero--home .hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-gradient);
  z-index: 1;
}

/* Animated grain texture overlay */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
}

.hero--home .hero__content {
  position: relative;
  z-index: 3;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.hero--home .hero__tag {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-xs);
  margin-bottom: var(--space-6);
}

.hero--home .hero__title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  color: var(--white);
  margin-bottom: var(--space-6);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.hero--home .hero__subtitle {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.6);
  max-width: 640px;
  margin: 0 auto var(--space-10);
  line-height: var(--leading-relaxed);
}

.hero--home .hero__actions {
  justify-content: center;
  gap: var(--space-4);
}

.hero__actions .btn--white {
  background-color: var(--white);
  color: var(--dark);
  border-color: var(--white);
}

.hero__actions .btn--white:hover {
  background-color: transparent;
  color: var(--white);
}

.hero__actions .btn--outline-white {
  background-color: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.hero__actions .btn--outline-white:hover {
  background-color: var(--white);
  color: var(--dark);
  border-color: var(--white);
}

/* Brand bar beneath hero */
.hero-brands {
  position: relative;
  z-index: 3;
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-brands__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  flex-wrap: wrap;
}

.hero-brand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  opacity: 0.5;
  transition: opacity var(--duration-base) var(--ease-out);
  cursor: pointer;
  text-decoration: none;
}

.hero-brand-item:hover {
  opacity: 1;
}

.hero-brand-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--white);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.hero-brand-item:hover .hero-brand-icon {
  transform: scale(1.1);
  box-shadow: 0 0 24px rgba(var(--primary-rgb), 0.3);
}

.hero-brand-name {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

.hero-brand-item:hover .hero-brand-name {
  color: rgba(255, 255, 255, 0.8);
}

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-accent);
  font-size: 10px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  animation: float-down 2s ease-in-out infinite;
}

.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
}

@keyframes float-down {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* --------------------------------------------------------------------------
   5. Network Overview Section
   -------------------------------------------------------------------------- */
.network-section {
  background-color: var(--white);
  padding: var(--space-24) 0;
}

.network-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.network-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  text-align: left;
  transition: all var(--duration-base) var(--ease-out);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.network-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--card-brand-color);
  transform: scaleX(0);
  transition: transform var(--duration-base) var(--ease-out);
  z-index: 2;
}

.network-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-xl);
  transform: translateY(-6px);
}

.network-card:hover::before {
  transform: scaleX(1);
}

.network-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.network-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.network-card:hover .network-card__image img {
  transform: scale(1.05);
}

.network-card__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.network-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-bottom: var(--space-3);
}

.network-card__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--white);
  transition: transform var(--duration-base) var(--ease-out);
}

.network-card:hover .network-card__icon {
  transform: scale(1.08);
}

.network-card__name {
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}

.network-card__name em {
  font-style: normal;
  color: var(--card-brand-color);
}

.network-card__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
  flex-grow: 1;
}

.network-card__link {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--card-brand-color);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: gap var(--duration-fast);
}

.network-card:hover .network-card__link {
  gap: var(--space-3);
}

.network-card__link::after {
  content: '';
}

/* --------------------------------------------------------------------------
   6. Mission Section
   -------------------------------------------------------------------------- */
.mission-section {
  background-color: var(--off-white);
  padding: var(--space-24) 0;
  overflow: hidden;
}

.mission-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.mission-heading {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-8);
  color: var(--text-primary);
}

.mission-heading em {
  font-style: italic;
  display: block;
}

.mission-text {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

.mission-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.mission-stat {
  padding: 24px 32px;
  background: #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid rgba(32, 30, 16, 0.06);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mission-stat:hover {
  transform: translateX(4px);
  box-shadow: 4px 4px 5px #553d001a, 0 8px 32px rgba(32, 30, 16, 0.06);
}

.mission-stat__number {
  font-family: 'Figtree', sans-serif;
  font-size: 48px;
  font-weight: 300;
  color: #201E10;
  white-space: nowrap;
  min-width: 80px;
  letter-spacing: -0.03em;
}

.mission-stat__label {
  font-size: 15px;
  color: rgba(32, 30, 16, 0.5);
  font-weight: 400;
}

.mission-stat__divider {
  width: 1px;
  height: 40px;
  background: rgba(32, 30, 16, 0.1);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   7. Scroll Timeline - Continuum of Care
   -------------------------------------------------------------------------- */
.timeline-section {
  background-color: var(--dark);
  color: var(--white);
  padding: 0;
  position: relative;
  overflow: hidden;
}

.timeline-section .section-label {
  color: var(--gray-500);
}

.timeline-section .section-heading {
  color: var(--white);
}

.timeline-section .section-subheading {
  color: var(--gray-400);
}

/* Sticky container for scroll-linked animation */
.timeline-sticky-wrap {
  position: relative;
}

.timeline-header {
  padding: var(--space-24) 0 var(--space-16);
  text-align: center;
}

/* The timeline track */
.timeline-track {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--container-padding) var(--space-24);
}

/* Central vertical line */
.timeline-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.06);
  z-index: 0;
}

/* Animated fill of the line - grows on scroll */
.timeline-line__fill {
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg,
    var(--brand-island),
    var(--brand-intensive),
    var(--brand-immersive),
    var(--brand-psychiatry),
    var(--brand-institute));
  border-radius: 2px;
  transition: height 0.15s linear;
}

/* Individual timeline step */
.timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: start;
  gap: 0;
  margin-bottom: var(--space-16);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-step.visible {
  opacity: 1;
  transform: translateY(0);
}

.timeline-step:last-child {
  margin-bottom: 0;
}

/* Alternate sides */
.timeline-step:nth-child(odd) .timeline-step__content {
  grid-column: 1;
  text-align: right;
  padding-right: var(--space-8);
}

.timeline-step:nth-child(odd) .timeline-step__visual {
  grid-column: 3;
}

.timeline-step:nth-child(even) .timeline-step__content {
  grid-column: 3;
  text-align: left;
  padding-left: var(--space-8);
}

.timeline-step:nth-child(even) .timeline-step__visual {
  grid-column: 1;
  text-align: right;
  padding-right: var(--space-8);
}

/* Center dot column */
.timeline-step__dot-col {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  z-index: 2;
}

/* The brand-colored dot */
.timeline-step__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--step-color, var(--white));
  position: relative;
  flex-shrink: 0;
  margin-top: 4px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-step.visible .timeline-step__dot {
  transform: scale(1);
  box-shadow: 0 0 20px rgba(var(--step-color-rgb, 255,255,255), 0.4),
              0 0 40px rgba(var(--step-color-rgb, 255,255,255), 0.15);
}

/* Pulse ring on the dot */
.timeline-step__dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--step-color, rgba(255,255,255,0.3));
  opacity: 0;
  animation: none;
}

.timeline-step.visible .timeline-step__dot::after {
  animation: dotRing 2s ease-out infinite;
}

@keyframes dotRing {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Step number */
.timeline-step__number {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gray-600);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

/* Step icon – RECO brand mark (fill-based SVG) */
.timeline-step__icon {
  width: 80px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--step-color-rgb, 255,255,255), 0.04);
  border: 1px solid rgba(var(--step-color-rgb, 255,255,255), 0.08);
  margin-bottom: var(--space-4);
  padding: 8px 12px;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-step.visible .timeline-step__icon {
  background: rgba(var(--step-color-rgb, 255,255,255), 0.08);
  border-color: rgba(var(--step-color-rgb, 255,255,255), 0.15);
  box-shadow: 0 0 24px rgba(var(--step-color-rgb, 255,255,255), 0.06);
  transform: translateY(-4px);
}

.timeline-step__icon svg {
  width: auto;
  height: 28px;
  max-width: 100%;
  fill: currentColor;
  stroke: none;
}

/* RECO Health text logo in timeline */
.timeline-step__icon .reco-text-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  white-space: nowrap;
  line-height: 1;
}

/* Step content card */
.timeline-step__content {
  grid-row: 1;
}

.timeline-step__title {
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--white);
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}

.timeline-step__desc {
  font-size: var(--text-sm);
  color: var(--gray-400);
  line-height: 1.6;
  margin-bottom: var(--space-3);
  max-width: 320px;
}

.timeline-step:nth-child(odd) .timeline-step__desc {
  margin-left: auto;
}

.timeline-step__brand {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--step-color, var(--gray-500));
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.timeline-step__brand::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--step-color, var(--gray-500));
}

/* Visual side (icon or image) */
.timeline-step__visual {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: var(--space-8);
}

.timeline-step:nth-child(even) .timeline-step__visual {
  align-items: flex-end;
}

/* Background glow */
.timeline-track::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 40%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 120, 0, 0.04) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(60px);
}

.timeline-track::after {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 35%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 63, 160, 0.04) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(60px);
}

/* Responsive: Tablet */
@media (max-width: 991px) {
  .timeline-step {
    grid-template-columns: 60px 1fr;
    gap: 0;
  }

  .timeline-line {
    left: 30px;
  }

  .timeline-step__dot-col {
    grid-column: 1;
  }

  .timeline-step:nth-child(odd) .timeline-step__content,
  .timeline-step:nth-child(even) .timeline-step__content {
    grid-column: 2;
    text-align: left;
    padding-left: var(--space-6);
    padding-right: 0;
  }

  .timeline-step:nth-child(odd) .timeline-step__desc,
  .timeline-step:nth-child(even) .timeline-step__desc {
    margin-left: 0;
  }

  .timeline-step:nth-child(odd) .timeline-step__visual,
  .timeline-step:nth-child(even) .timeline-step__visual {
    display: none;
  }

  .timeline-step__icon {
    display: none;
  }
}

/* Responsive: Mobile */
@media (max-width: 767px) {
  .timeline-step {
    grid-template-columns: 40px 1fr;
    margin-bottom: var(--space-12);
  }

  .timeline-line {
    left: 20px;
  }

  .timeline-step__dot {
    width: 14px;
    height: 14px;
  }

  .timeline-step__dot::after {
    inset: -4px;
  }

  .timeline-step__title {
    font-size: var(--text-lg);
  }

  .timeline-header {
    padding: var(--space-16) 0 var(--space-12);
  }
}

/* --------------------------------------------------------------------------
   7b. Scroll-Driven Timeline Enhancements
   -------------------------------------------------------------------------- */

/* Position the timeline-steps as a relative container for the line */
.timeline-steps {
  position: relative;
}

/* Override base opacity/transform -- scroll JS controls visibility now */
.timeline-step {
  opacity: 0;
  will-change: opacity, transform;
}

/* Directional slide-in: odd steps (left content) slide from left */
.timeline-step[data-direction="left"] {
  transform: translateX(-60px) translateY(20px);
}

/* Even steps (right content) slide from right */
.timeline-step[data-direction="right"] {
  transform: translateX(60px) translateY(20px);
}

/* Active state -- triggered by scroll JS */
.timeline-step.tl-active {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* Staggered transition durations for content vs icon */
.timeline-step .timeline-step__content {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.timeline-step.tl-active .timeline-step__content {
  opacity: 1;
  transform: translateY(0);
}

.timeline-step .timeline-step__visual {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.timeline-step.tl-active .timeline-step__visual {
  opacity: 1;
  transform: translateY(0);
}

/* Dot enhancements for scroll-driven activation */
.timeline-step .timeline-step__dot {
  transform: scale(0.5);
  opacity: 0.3;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease;
}

.timeline-step.tl-active .timeline-step__dot {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 0 20px rgba(var(--step-color-rgb, 255,255,255), 0.5),
              0 0 40px rgba(var(--step-color-rgb, 255,255,255), 0.2),
              0 0 60px rgba(var(--step-color-rgb, 255,255,255), 0.08);
}

/* Pulse ring plays only when active */
.timeline-step .timeline-step__dot::after {
  animation: none;
  opacity: 0;
}

.timeline-step.tl-active .timeline-step__dot::after {
  animation: dotRingScroll 2s ease-out infinite;
}

@keyframes dotRingScroll {
  0% { transform: scale(0.8); opacity: 0.7; }
  50% { opacity: 0.3; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Icon glow on activation */
.timeline-step.tl-active .timeline-step__icon {
  background: rgba(var(--step-color-rgb, 255,255,255), 0.12);
  border-color: rgba(var(--step-color-rgb, 255,255,255), 0.3);
  box-shadow: 0 4px 24px rgba(var(--step-color-rgb, 255,255,255), 0.15),
              0 0 40px rgba(var(--step-color-rgb, 255,255,255), 0.08);
  transform: translateY(-4px);
}

/* Step number brightens on activation */
.timeline-step.tl-active .timeline-step__number {
  color: var(--step-color, rgba(255,255,255,0.6));
  transition: color 0.6s ease 0.2s;
}

/* Brand label glow */
.timeline-step.tl-active .timeline-step__brand {
  text-shadow: 0 0 20px rgba(var(--step-color-rgb, 255,255,255), 0.3);
  transition: text-shadow 0.6s ease 0.3s;
}

/* The progress line -- positioned absolutely within timeline-steps */
.timeline-steps > .timeline-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  z-index: 0;
  background: none;
}

/* Background track (the faint line) */
.timeline-steps > .timeline-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
}

/* The animated fill grows based on scroll position */
.timeline-steps > .timeline-line .timeline-line__fill {
  position: relative;
  width: 100%;
  height: 0%;
  border-radius: 2px;
  will-change: height;
  transition: none;
  /* Gradient transitions through each brand color */
  background: linear-gradient(180deg,
    #ffffff 0%,
    #E87800 20%,
    #f03e7c 40%,
    #50A63C 60%,
    #6B3FA0 80%,
    #10a8ca 100%);
}

/* Glow effect on the tip of the growing line */
.timeline-steps > .timeline-line .timeline-line__fill::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 20px;
  border-radius: 3px;
  filter: blur(6px);
  opacity: 0.7;
  /* Color updated by JS via custom property */
  background: var(--line-tip-color, #ffffff);
  transition: background 0.3s ease;
}

/* Reduced motion: show everything, no animation */
@media (prefers-reduced-motion: reduce) {
  .timeline-step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .timeline-step .timeline-step__content,
  .timeline-step .timeline-step__visual {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .timeline-step .timeline-step__dot {
    transform: scale(1) !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .timeline-step .timeline-step__dot::after {
    animation: none !important;
  }
  .timeline-steps > .timeline-line .timeline-line__fill {
    height: 100% !important;
  }
}

/* Responsive tablet: single-column left-aligned */
@media (max-width: 991px) {
  .timeline-steps > .timeline-line {
    left: 30px;
    transform: none;
  }

  /* On tablet/mobile, all steps slide up instead of left/right */
  .timeline-step[data-direction="left"],
  .timeline-step[data-direction="right"] {
    transform: translateX(0) translateY(30px);
  }

  .timeline-step.tl-active {
    transform: translateX(0) translateY(0);
  }
}

@media (max-width: 767px) {
  .timeline-steps > .timeline-line {
    left: 20px;
  }

  .timeline-step[data-direction="left"],
  .timeline-step[data-direction="right"] {
    transform: translateX(0) translateY(24px);
  }

  /* Smaller glow on mobile for perf */
  .timeline-step.tl-active .timeline-step__dot {
    box-shadow: 0 0 12px rgba(var(--step-color-rgb, 255,255,255), 0.4),
                0 0 24px rgba(var(--step-color-rgb, 255,255,255), 0.15);
  }
}

/* --------------------------------------------------------------------------
   BRAND-CONSISTENT SECTION SYSTEM (Island/Immersive pattern)
   -------------------------------------------------------------------------- */

/* Section eyebrow label (DM Mono, uppercase, reduced opacity) */
.section-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(32, 30, 16, 0.35);
  margin-bottom: 16px;
  display: block;
}

.section-eyebrow--light {
  color: rgba(255, 255, 255, 0.3);
}

/* Section title (Figtree 300, partial-muted text) */
.section-title {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: #201E10;
  margin-bottom: 0;
}

.section-title--light {
  color: #ffffff;
}

.text-muted {
  color: #8f8e84;
}

.text-muted-light {
  color: rgba(255, 255, 255, 0.4);
}

/* Section description */
.section-desc {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(32, 30, 16, 0.5);
  max-width: 480px;
}

.section-desc--centered {
  margin-left: auto;
  margin-right: auto;
  max-width: 560px;
}

.section-desc--light {
  color: rgba(255, 255, 255, 0.5);
  max-width: 560px;
  margin: 0 auto 40px;
}

/* Split header (used in Gallery, Blog) */
.section-split-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 60px;
}

/* Section backgrounds with gradient transitions */
.section--network {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 90%, #f4f0e6 100%);
  padding: 120px 0;
}

.section--mission {
  background: linear-gradient(180deg, #f4f0e6 0%, #f5f0eb 100%);
  padding: 120px 0;
}

.section--assessment {
  background: linear-gradient(180deg, #f5f0eb 0%, #ffffff 40%, #ffffff 100%);
  padding: 120px 0;
}

.section--timeline {
  background-color: #201E10;
  padding: 120px 0;
}

.why-section {
  background: linear-gradient(180deg, #f4f0e6 0%, #f5f0eb 50%, #ffffff 100%);
  padding: 140px 0;
  border-top: 1px solid rgba(32, 30, 16, 0.06);
  border-bottom: 1px solid rgba(32, 30, 16, 0.06);
}

.section--gallery {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  padding: 120px 0;
  border-bottom: 1px solid rgba(32, 30, 16, 0.06);
}

.section--testimonials {
  background-color: #201E10;
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}

/* Subtle grain overlay on dark testimonials */
.section--testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 0;
}

.section--testimonials > * {
  position: relative;
  z-index: 1;
}

.section--app {
  background: linear-gradient(180deg, #f5f0eb 0%, #f4f0e6 50%, #ffffff 100%);
  padding: 120px 0;
  overflow: hidden;
  border-top: 1px solid rgba(32, 30, 16, 0.06);
  border-bottom: 1px solid rgba(32, 30, 16, 0.06);
}

.section--blog {
  background: linear-gradient(180deg, #ffffff 0%, #f4f0e6 100%);
  padding: 120px 0;
  border-top: 1px solid rgba(32, 30, 16, 0.06);
}

.section--leadership {
  background-color: #201E10;
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}

.section--leadership::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.02) 0%, transparent 70%);
  pointer-events: none;
}

.section--accreditations {
  background: linear-gradient(180deg, #f4f0e6 0%, #ffffff 100%);
  padding: 80px 0;
  border-top: 1px solid rgba(32, 30, 16, 0.06);
}

.section--cta {
  background-color: #201E10;
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. Why RECO Section (Premium Redesign)
   -------------------------------------------------------------------------- */
.why-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

.why-header__subtitle {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(32, 30, 16, 0.5);
  max-width: 420px;
  flex-shrink: 0;
}

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

.why-card {
  position: relative;
  padding: 36px 32px 32px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(32, 30, 16, 0.06);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--card-delay, 0ms);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.why-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #201E10;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 16px 16px 0 0;
}

.why-card:hover::before {
  transform: scaleX(1);
}

.why-card:hover {
  border-color: transparent;
  box-shadow: 4px 4px 5px #553d001a, 0 16px 48px rgba(32, 30, 16, 0.08);
  transform: translateY(-4px);
}

.why-card__number {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: rgba(32, 30, 16, 0.2);
  margin-bottom: 24px;
}

.why-card__content {
  flex: 1;
}

.why-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #f4f0e6;
  color: #201E10;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.why-card:hover .why-card__icon {
  background: #201E10;
  color: #F4F0E6;
  transform: scale(1.05);
}

.why-card__icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.why-card__title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #201E10;
  letter-spacing: -0.02em;
}

.why-card__text {
  font-size: 14px;
  color: rgba(32, 30, 16, 0.5);
  line-height: 1.7;
}

/* Accent line at card bottom */
.why-card__accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #201E10;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.why-card:hover .why-card__accent {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   9. Leadership Section (Premium Dark Theme)
   -------------------------------------------------------------------------- */
.leadership-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

.leadership-header__desc {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.45);
  max-width: 420px;
}

.leadership-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

@media (max-width: 991px) {
  .leadership-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .leadership-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

.leader-card {
  text-align: center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--card-delay, 0ms);
}

.leader-card:hover {
  transform: translateY(-4px);
}

.leader-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}

.leader-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  filter: grayscale(0.2);
}

.leader-card:hover .leader-card__image img {
  transform: scale(1.05);
  filter: grayscale(0);
}

.leader-card__info {
  padding: 0 4px;
}

.leader-card__name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.leader-card__title {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.5px;
  line-height: 1.4;
}

/* Leader card description text (for leader pages with bios) */
.leader-card__bio {
  font-size: var(--text-sm, 14px);
  color: var(--text-secondary, #555);
  line-height: var(--leading-relaxed, 1.625);
  margin-top: var(--space-4, 16px);
  text-align: left;
}

/* Leadership section on dedicated page (light background overrides) */
.leadership-section {
  background-color: var(--white, #fff);
  padding: var(--space-24, 96px) 0;
}

.leadership-section .leadership-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-8, 32px);
}

.leadership-section .leader-card__image {
  background-color: var(--off-white, #f5f0eb);
  border: 1px solid var(--gray-200, #e7e5e4);
}

.leadership-section .leader-card__name {
  color: var(--text-primary, #1c1917);
  font-size: var(--text-lg, 18px);
  font-weight: 600;
}

.leadership-section .leader-card__title {
  color: var(--text-secondary, #57534e);
  font-size: var(--text-xs, 12px);
}

/* Program directors grid (5 columns on desktop) */
.directors-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6, 24px);
  margin-top: var(--space-12, 48px);
}

.directors-grid .leader-card {
  text-align: center;
}

.directors-grid .leader-card__name {
  color: var(--text-primary, #1c1917);
  font-size: var(--text-base, 16px);
  font-weight: 500;
}

.directors-grid .leader-card__title {
  color: var(--text-secondary, #57534e);
}

.directors-grid .leader-card__image {
  background-color: var(--off-white, #f5f0eb);
  border: 1px solid var(--gray-200, #e7e5e4);
}

@media (max-width: 991px) {
  .leadership-section .leadership-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .directors-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .leadership-section .leadership-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .directors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   10. Testimonials Section (Premium Progress Bar Layout)
   -------------------------------------------------------------------------- */
.testimonials-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}

.testimonials-left {
  display: flex;
  flex-direction: column;
}

.testimonials-subtitle {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.4);
  max-width: 400px;
  margin-bottom: 48px;
}

/* Progress bar list (left side) */
.testimonial-progress-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.testimonial-progress-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.testimonial-progress-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.testimonial-progress-item.active {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

.testimonial-progress-item__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.testimonial-progress-item__name {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.3s ease;
}

.testimonial-progress-item.active .testimonial-progress-item__name {
  color: #ffffff;
}

.testimonial-progress-item__program {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2);
  transition: color 0.3s ease;
}

.testimonial-progress-item.active .testimonial-progress-item__program {
  color: rgba(255, 255, 255, 0.4);
}

/* Progress bar */
.testimonial-progress-bar {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.testimonial-progress-item.active .testimonial-progress-bar {
  opacity: 1;
}

.testimonial-progress-bar__fill {
  height: 100%;
  width: 0%;
  background: #ffffff;
  border-radius: 2px;
  transition: none;
}

.testimonial-progress-item.active .testimonial-progress-bar__fill {
  width: 100%;
  transition: width var(--testimonial-duration, 6000ms) linear;
}

/* Right side: testimonial card */
.testimonials-right {
  position: relative;
}

.testimonial-card-wrapper {
  position: relative;
}

.testimonial-carousel {
  position: relative;
}

.testimonial-slide {
  display: none;
  text-align: left;
  padding: 48px 40px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  animation: testimonial-in 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-slide.active {
  display: block;
}

@keyframes testimonial-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.testimonial-quote-mark {
  font-size: 80px;
  line-height: 0.6;
  color: rgba(255, 255, 255, 0.06);
  font-family: Georgia, serif;
  margin-bottom: 24px;
}

.testimonial-text {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 300;
  margin-bottom: 32px;
  font-style: normal;
  letter-spacing: -0.02em;
}

.testimonial-attribution {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-attribution__name {
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
}

.testimonial-attribution__sep {
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.testimonial-attribution__program {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

/* Testimonial dots - hidden now in favor of progress bars, kept for fallback */
.testimonial-dots {
  display: none;
}

/* --------------------------------------------------------------------------
   11. Assessment Tool
   -------------------------------------------------------------------------- */
.assessment-section {
  background-color: var(--off-white);
  padding: var(--space-24) 0;
}

.assessment-container {
  max-width: 700px;
  margin: 0 auto;
  margin-top: var(--space-12);
}

.assessment-progress {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
}

.assessment-progress__step {
  flex: 1;
  height: 4px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  transition: background var(--duration-base);
}

.assessment-progress__step.active {
  background: var(--dark);
}

.assessment-progress__step.completed {
  background: var(--dark);
}

.assessment-step {
  display: none;
  animation: assessment-in var(--duration-base) var(--ease-out);
}

.assessment-step.active {
  display: block;
}

@keyframes assessment-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.assessment-question {
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--text-primary);
  margin-bottom: var(--space-8);
  text-align: center;
  letter-spacing: -0.02em;
}

.assessment-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.assessment-option {
  padding: var(--space-5) var(--space-6);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  text-align: center;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  transition: all var(--duration-fast) var(--ease-out);
}

.assessment-option:hover {
  border-color: var(--dark);
  background: var(--white);
}

.assessment-option.selected {
  border-color: var(--dark);
  background: var(--dark);
  color: var(--white);
}

.assessment-option--full {
  grid-column: 1 / -1;
}

/* Assessment result */
.assessment-result {
  display: none;
  text-align: center;
  padding: var(--space-10);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: assessment-in var(--duration-base) var(--ease-out);
}

.assessment-result.active {
  display: block;
}

.assessment-result__label {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.assessment-result__title {
  font-size: var(--text-3xl);
  font-weight: 300;
  margin-bottom: var(--space-4);
  color: var(--text-primary);
  letter-spacing: -0.03em;
}

.assessment-result__desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.assessment-result__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

.assessment-back {
  margin-top: var(--space-6);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: color var(--duration-fast);
}

.assessment-back:hover {
  color: var(--text-primary);
}

.assessment-restart {
  margin-top: var(--space-6);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: color var(--duration-fast);
}

.assessment-restart:hover {
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   12. News / Blog Section
   -------------------------------------------------------------------------- */
.news-section {
  background-color: var(--white);
  padding: var(--space-24) 0;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.news-card {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(32, 30, 16, 0.06);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: block;
}

.news-card:hover {
  border-color: transparent;
  box-shadow: 4px 4px 5px #553d001a, 0 16px 48px rgba(32, 30, 16, 0.08);
  transform: translateY(-4px);
}

.news-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.news-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.news-card:hover .news-card__image img {
  transform: scale(1.05);
}
.news-card__image svg {
  width: 48px;
  height: 48px;
  stroke: var(--gray-400);
  fill: none;
  stroke-width: 1;
}

.news-card__body {
  padding: var(--space-6);
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.news-card__category {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--dark);
  background: var(--gray-100);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.news-card__date {
  font-family: var(--font-accent);
  font-size: 11px;
  color: var(--text-secondary);
}

.news-card__title {
  font-size: 18px;
  font-weight: 500;
  color: #201E10;
  margin-bottom: 10px;
  line-height: 1.35;
}

.news-card__excerpt {
  font-size: 14px;
  color: rgba(32, 30, 16, 0.5);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   13. Community Section
   -------------------------------------------------------------------------- */
.community-section {
  background-color: var(--off-white);
  padding: var(--space-24) 0;
}

.community-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  margin-top: var(--space-12);
}

.community-image {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.community-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.community-image svg {
  width: 80px;
  height: 80px;
  stroke: var(--gray-400);
  fill: none;
  stroke-width: 1;
}

.community-content h3 {
  font-size: var(--text-3xl);
  font-weight: 300;
  margin-bottom: var(--space-6);
  color: var(--text-primary);
  letter-spacing: -0.03em;
}

.community-content p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.community-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.community-highlight {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.community-highlight__check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

/* Accreditation logos bar */
.accreditation-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
  opacity: 0.35;
  transition: opacity 0.4s ease;
}

.accreditation-logos:hover {
  opacity: 0.6;
}

.accreditation-logos img {
  height: 48px;
  width: auto;
}

/* --------------------------------------------------------------------------
   14. Final CTA Section
   -------------------------------------------------------------------------- */
.cta-section {
  background-color: var(--dark);
  color: var(--text-light);
  padding: var(--space-24) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -25%;
  width: 150%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
  pointer-events: none;
}

.cta-section .section-heading {
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
}

.cta-section .section-subheading {
  color: var(--gray-400);
  margin: 0 auto var(--space-10);
}

.cta-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

.cta-phone {
  display: block;
  margin-top: 32px;
  font-family: 'DM Mono', monospace;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 2px;
  transition: color 0.3s ease;
  text-decoration: none;
}

.cta-phone:hover {
  color: #fff;
}

/* --------------------------------------------------------------------------
   15. Footer Enhancements
   -------------------------------------------------------------------------- */
.reco-footer .footer-column h4 {
  color: var(--gray-500);
}

.footer-network-links a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-network-links .network-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.footer-logo-section {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-logo-text {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--white);
  letter-spacing: var(--tracking-tight);
}

.footer-logo-text span {
  font-weight: 300;
  opacity: 0.4;
  margin-left: 2px;
}

.footer-tagline {
  font-size: var(--text-sm);
  color: var(--gray-500);
  max-width: 300px;
}

.footer-grid--5 {
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
}

.footer-bottom__legal {
  display: flex;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   16. Responsive Adjustments
   -------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 991px) {
  .network-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .mission-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .leadership-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .leadership-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .community-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .hero-brands__inner {
    gap: var(--space-6);
  }

  .footer-grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .network-mega .mega-inner {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-logo-section {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .hero--home .hero__title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .hero-brands__inner {
    gap: var(--space-4);
    justify-content: center;
  }

  .hero-brand-icon {
    width: 40px;
    height: 40px;
    font-size: var(--text-base);
  }

  .hero-brand-name {
    font-size: 9px;
  }

  .network-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .network-card {
    flex-direction: row;
    text-align: left;
    gap: var(--space-5);
    padding: var(--space-5);
  }

  .network-card__icon {
    margin-bottom: 0;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    font-size: var(--text-lg);
  }

  .network-card__desc {
    margin-bottom: var(--space-2);
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .section-title {
    font-size: clamp(2rem, 6vw, 2.5rem);
  }

  .leadership-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .assessment-options {
    grid-template-columns: 1fr;
  }

  .testimonial-text {
    font-size: var(--text-xl);
  }

  .community-highlights {
    grid-template-columns: 1fr;
  }

  .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .footer-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-bottom__legal {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }
}

@media (max-width: 479px) {
  .hero-brands__inner {
    gap: var(--space-3);
  }

  .hero-brand-icon {
    width: 36px;
    height: 36px;
    font-size: var(--text-sm);
  }

  .hero-brands {
    margin-top: var(--space-10);
    padding-top: var(--space-6);
  }

  .leadership-grid {
    grid-template-columns: 1fr;
  }

  .section-split-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   17. App Coming Soon Section
   -------------------------------------------------------------------------- */
.app-cta-section {
  background-color: var(--white);
  padding: var(--space-24) 0;
  overflow: hidden;
}

.app-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.app-cta-content .section-label {
  color: var(--gray-500);
}

.app-cta-content h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin-bottom: var(--space-6);
  color: var(--text-primary);
}

.app-cta-content h2 em {
  font-style: italic;
  display: block;
}

.app-cta-content > p {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
  max-width: 480px;
}

/* Feature List */
.app-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.app-feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.app-feature__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--duration-base) var(--ease-out);
}

.app-feature:hover .app-feature__icon {
  background: var(--dark);
  color: var(--white);
}

.app-feature__icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.app-feature__text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

/* Store Badges */
.app-store-badges {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  transition: all var(--duration-base) var(--ease-out);
  text-decoration: none;
  cursor: default;
}

.store-badge:hover {
  background: var(--gray-800);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.store-badge svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.store-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.store-badge__text small {
  font-size: 9px;
  font-weight: 400;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.store-badge__text span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* CTA Button */
.app-cta-content .btn--notify {
  background: var(--white);
  color: var(--dark);
  border: 2px solid var(--dark);
}

.app-cta-content .btn--notify:hover {
  background: var(--dark);
  color: var(--white);
}

/* Phone Mockup */
.app-mockup-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.app-mockup {
  width: 280px;
  height: 560px;
  background: var(--dark);
  border-radius: 40px;
  position: relative;
  box-shadow:
    0 0 0 3px var(--gray-800),
    0 20px 60px rgba(0, 0, 0, 0.15),
    0 8px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Phone notch */
.app-mockup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 28px;
  background: var(--dark);
  border-radius: 0 0 20px 20px;
  z-index: 3;
}

/* Phone screen */
.app-mockup__screen {
  position: absolute;
  inset: 3px;
  border-radius: 37px;
  background: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Screen content */
.mockup-header {
  padding: 44px 20px 16px;
  text-align: center;
  background: var(--off-white);
}

.mockup-header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mockup-header__logo svg {
  height: 16px;
  width: auto;
  color: var(--dark);
}

.mockup-header__greeting {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.mockup-body {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Animated mock cards */
.mockup-card {
  background: var(--gray-50);
  border-radius: 12px;
  padding: 14px 16px;
  animation: mockupCardPulse 3s ease-in-out infinite;
}

.mockup-card:nth-child(2) { animation-delay: 0.5s; }
.mockup-card:nth-child(3) { animation-delay: 1s; }
.mockup-card:nth-child(4) { animation-delay: 1.5s; }

@keyframes mockupCardPulse {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

.mockup-card__label {
  font-family: var(--font-accent);
  font-size: 9px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.mockup-card__bar {
  height: 4px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.mockup-card__bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  animation: mockupBarGrow 2.5s var(--ease-out) forwards;
}

@keyframes mockupBarGrow {
  from { width: 0; }
}

.mockup-card__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 4px;
}

.mockup-card__value small {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* Sobriety counter in mockup */
.mockup-sobriety {
  text-align: center;
  padding: 20px 16px;
  background: var(--dark);
  border-radius: 12px;
  color: var(--white);
}

.mockup-sobriety__days {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  animation: sobrietyCount 2s var(--ease-out);
}

@keyframes sobrietyCount {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.mockup-sobriety__label {
  font-family: var(--font-accent);
  font-size: 9px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

/* Decorative floating elements around phone */
.app-mockup-wrapper::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,0.03) 0%, transparent 70%);
  top: -40px;
  right: -60px;
  pointer-events: none;
}

.app-mockup-wrapper::after {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,0.03) 0%, transparent 70%);
  bottom: -30px;
  left: -40px;
  pointer-events: none;
}

/* Coming Soon styling integrated into heading */

/* Responsive */
@media (max-width: 991px) {
  .app-cta-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .app-mockup-wrapper {
    order: -1;
  }

  .app-mockup {
    width: 240px;
    height: 480px;
    border-radius: 34px;
  }

  .app-mockup::before {
    width: 100px;
    height: 24px;
    border-radius: 0 0 16px 16px;
  }

  .app-mockup__screen {
    border-radius: 31px;
  }
}

@media (max-width: 767px) {
  .app-features {
    grid-template-columns: 1fr;
  }

  .app-store-badges {
    flex-direction: column;
    align-items: flex-start;
  }

  .app-mockup {
    width: 200px;
    height: 400px;
    border-radius: 30px;
  }

  .app-mockup::before {
    width: 80px;
    height: 20px;
    border-radius: 0 0 14px 14px;
  }

  .app-mockup__screen {
    border-radius: 27px;
  }

  .mockup-sobriety__days {
    font-size: 24px;
  }
}

/* --------------------------------------------------------------------------
   18. Assessment Teaser (homepage)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .assessment-teaser-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
}

/* --------------------------------------------------------------------------
   19. Testimonials Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .testimonials-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .testimonials-subtitle {
    margin-bottom: 32px;
  }

  .testimonial-slide {
    padding: 32px 28px;
  }
}

@media (max-width: 767px) {
  .testimonial-progress-item {
    padding: 12px 16px;
  }

  .testimonial-slide {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .testimonial-text {
    font-size: 1.1rem;
  }

  .testimonial-quote-mark {
    font-size: 60px;
    margin-bottom: 16px;
  }
}

/* --------------------------------------------------------------------------
   21. Program Cards Grid (replaces facility panels)
   -------------------------------------------------------------------------- */
.program-cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.program-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(32, 30, 16, 0.06);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
}

.program-card:hover {
  transform: translateY(-4px);
  box-shadow: 4px 4px 5px #553d001a, 0 16px 48px rgba(32, 30, 16, 0.08);
  border-color: transparent;
}

.program-card__color-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--card-color);
  z-index: 2;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.program-card:hover .program-card__color-bar {
  transform: scaleX(1);
}

.program-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.program-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.program-card:hover .program-card__image img {
  transform: scale(1.05);
}

.program-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.program-card__number {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(32, 30, 16, 0.3);
  margin-bottom: 8px;
}

.program-card__name {
  font-size: 18px;
  font-weight: 500;
  color: #201E10;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.program-card__desc {
  font-size: 14px;
  color: rgba(32, 30, 16, 0.5);
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
}

.program-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--card-color);
  transition: gap 0.3s ease;
}

.program-card:hover .program-card__link {
  gap: 10px;
}

/* Responsive: Tablet */
@media (max-width: 991px) {
  .program-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Responsive: Mobile */
@media (max-width: 767px) {
  .program-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .program-card__body {
    padding: 20px;
  }
}

/* --------------------------------------------------------------------------
   22. App Mockup Section (Real App UI)
   -------------------------------------------------------------------------- */
.app-mockup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.app-feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.app-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #201E10;
}

.app-feature-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(32, 30, 16, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #201E10;
  transition: all 0.3s ease;
}

.app-feature-item:hover .app-feature-item__icon {
  background: #201E10;
  color: #fff;
}

/* Phone Mockup */
.app-phone {
  width: 280px;
  height: 580px;
  margin: 0 auto;
  background: #0a0a0a;
  border-radius: 40px;
  position: relative;
  box-shadow:
    0 0 0 3px #333,
    0 24px 64px rgba(0, 0, 0, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.app-phone__notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 28px;
  background: #0a0a0a;
  border-radius: 0 0 20px 20px;
  z-index: 5;
}

.app-phone__screen {
  position: absolute;
  inset: 3px;
  border-radius: 37px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* App Screen Header */
.app-screen__header {
  padding: 44px 20px 14px;
  background: #f5f0eb;
  text-align: center;
}

.app-screen__logo {
  color: #201E10;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.app-screen__logo svg {
  height: 18px;
  width: auto;
}

.app-screen__greeting {
  font-size: 11px;
  color: rgba(32, 30, 16, 0.4);
}

/* App Screen Cards */
.app-screen__card {
  margin: 8px 12px 0;
  padding: 12px 14px;
  background: #f8f6f2;
  border-radius: 12px;
}

.app-screen__card-label {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(32, 30, 16, 0.35);
  margin-bottom: 6px;
}

/* Progress Card */
.app-screen__card-days {
  font-size: 22px;
  font-weight: 700;
  color: #201E10;
  line-height: 1;
  margin-bottom: 8px;
}

.app-screen__card-days small {
  font-size: 10px;
  font-weight: 400;
  color: rgba(32, 30, 16, 0.4);
  margin-left: 4px;
}

.app-screen__progress-bar {
  height: 8px;
  background: rgba(32, 30, 16, 0.08);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}

.app-screen__progress-fill {
  height: 100%;
  border-radius: 100px;
  width: 0%;
  transition: width 2.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.6s ease;
  background: linear-gradient(90deg, #e74c3c 0%, #e67e22 25%, #f1c40f 50%, #2ecc71 75%, #27ae60 100%);
  background-size: 200% 100%;
  position: relative;
}

.app-screen__progress-fill.animated {
  width: 82% !important;
  background-position: 100% 0;
}

.app-screen__progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: progressShimmer 2s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.5s ease 2s;
}

.app-screen__progress-fill.animated::after {
  opacity: 1;
}

@keyframes progressShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Progress percentage label */
.app-screen__progress-pct {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 10px;
  color: rgba(32, 30, 16, 0.4);
}

.app-screen__progress-pct-value {
  font-weight: 700;
  color: #27ae60;
  opacity: 0;
  transition: opacity 0.6s ease 2.2s;
}

.app-screen__progress-fill.animated ~ .app-screen__progress-pct .app-screen__progress-pct-value {
  opacity: 1;
}

/* Meeting Card */
.app-screen__meeting-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-screen__meeting-title {
  font-size: 13px;
  font-weight: 600;
  color: #201E10;
}

.app-screen__meeting-time {
  font-size: 11px;
  font-weight: 500;
  color: rgba(32, 30, 16, 0.5);
}

/* Mentors Card */
.app-screen__mentors-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-screen__mentor {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.app-screen__mentor-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.app-screen__mentor-info {
  flex: 1;
  min-width: 0;
}

.app-screen__mentor-name {
  font-size: 12px;
  font-weight: 600;
  color: #201E10;
  line-height: 1.2;
}

.app-screen__mentor-role {
  font-size: 9px;
  color: rgba(32, 30, 16, 0.4);
}

.app-screen__mentor-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34C759;
  flex-shrink: 0;
}

.app-screen__mentors-count {
  font-size: 10px;
  color: rgba(32, 30, 16, 0.35);
  text-align: center;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(32, 30, 16, 0.06);
}

/* Responsive */
@media (max-width: 991px) {
  .app-mockup-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }

  .app-mockup-left p {
    margin-left: auto;
    margin-right: auto;
  }

  .app-mockup-left .btn {
    margin: 40px auto 0;
  }

  .app-feature-list {
    justify-items: center;
  }

  .app-phone {
    width: 240px;
    height: 500px;
    border-radius: 34px;
  }

  .app-phone__notch {
    width: 100px;
    height: 24px;
    border-radius: 0 0 16px 16px;
  }

  .app-phone__screen {
    border-radius: 31px;
  }
}

@media (max-width: 767px) {
  .app-feature-list {
    grid-template-columns: 1fr;
    text-align: left;
    justify-items: start;
  }

  .app-phone {
    width: 220px;
    height: 460px;
    border-radius: 30px;
  }

  .app-phone__notch {
    width: 80px;
    height: 20px;
    border-radius: 0 0 14px 14px;
  }

  .app-phone__screen {
    border-radius: 27px;
  }

  .app-screen__card-days {
    font-size: 18px;
  }

  .app-screen__card {
    margin: 6px 10px 0;
    padding: 10px 12px;
  }
}

/* --------------------------------------------------------------------------
   20. Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }

  .hero__scroll {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   23. Inline Quiz Start (matching Island/Immersive card patterns)
   -------------------------------------------------------------------------- */

/* Assessment grid - tighter gap to match Island/Immersive card patterns */
.assessment-teaser-grid {
  gap: 48px;
}

.quiz-inline-start {
  width: 100%;
  max-width: 440px;
  background: #faf9f7;
  border: 1px solid rgba(32, 30, 16, 0.10);
  border-radius: 16px;
  padding: 40px 36px;
  position: relative;
  box-shadow: 4px 4px 5px #553d001a, 0 4px 24px rgba(32, 30, 16, 0.04);
}

.quiz-inline-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(32, 30, 16, 0.08);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
  cursor: pointer;
}

.quiz-inline-option:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transform: translateX(2px);
}

/* Brand-color hover borders via data-color attribute */
.quiz-inline-option[data-color="#f03e7c"]:hover {
  border-color: #f03e7c;
}
.quiz-inline-option[data-color="#50A63C"]:hover {
  border-color: #50A63C;
}
.quiz-inline-option[data-color="#E87800"]:hover {
  border-color: #E87800;
}
.quiz-inline-option[data-color="#10a8ca"]:hover {
  border-color: #10a8ca;
}
.quiz-inline-option[data-color="#6B3FA0"]:hover {
  border-color: #6B3FA0;
}

/* Brand-color radio dot on hover */
.quiz-inline-option[data-color="#f03e7c"]:hover .quiz-inline-option__radio {
  border-color: #f03e7c;
}
.quiz-inline-option[data-color="#f03e7c"]:hover .quiz-inline-option__radio::after {
  background: #f03e7c;
}
.quiz-inline-option[data-color="#50A63C"]:hover .quiz-inline-option__radio {
  border-color: #50A63C;
}
.quiz-inline-option[data-color="#50A63C"]:hover .quiz-inline-option__radio::after {
  background: #50A63C;
}
.quiz-inline-option[data-color="#E87800"]:hover .quiz-inline-option__radio {
  border-color: #E87800;
}
.quiz-inline-option[data-color="#E87800"]:hover .quiz-inline-option__radio::after {
  background: #E87800;
}
.quiz-inline-option[data-color="#10a8ca"]:hover .quiz-inline-option__radio {
  border-color: #10a8ca;
}
.quiz-inline-option[data-color="#10a8ca"]:hover .quiz-inline-option__radio::after {
  background: #10a8ca;
}
.quiz-inline-option[data-color="#6B3FA0"]:hover .quiz-inline-option__radio {
  border-color: #6B3FA0;
}
.quiz-inline-option[data-color="#6B3FA0"]:hover .quiz-inline-option__radio::after {
  background: #6B3FA0;
}

.quiz-inline-option__radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(32, 30, 16, 0.15);
  flex-shrink: 0;
  transition: border-color 0.25s ease;
  position: relative;
}

.quiz-inline-option:hover .quiz-inline-option__radio {
  border-color: rgba(0, 0, 0, 0.4);
}

.quiz-inline-option:hover .quiz-inline-option__radio::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0a0a0a;
}

.quiz-inline-option__text {
  flex: 1;
  min-width: 0;
}

@media (max-width: 991px) {
  .assessment-teaser-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .quiz-inline-start {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .quiz-inline-start {
    padding: 24px 20px;
  }
}

/* --------------------------------------------------------------------------
   24. Facility Interior Gallery
   -------------------------------------------------------------------------- */
.facility-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 8px;
}

.facility-gallery__large {
  grid-column: 1;
  grid-row: 1 / 3;
  border-radius: 16px;
  overflow: hidden;
}

.facility-gallery__large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.facility-gallery__large:hover img {
  transform: scale(1.03);
}

.facility-gallery__small {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.facility-gallery__small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.facility-gallery__small:hover img {
  transform: scale(1.03);
}

/* 2x2 grid for the right side */
.facility-gallery__small:nth-child(2) { grid-column: 2; grid-row: 1; }
.facility-gallery__small:nth-child(3) { grid-column: 2; grid-row: 2; }
.facility-gallery__small:nth-child(4) { grid-column: 1; grid-row: 3; }
.facility-gallery__small:nth-child(5) { grid-column: 2; grid-row: 3; }

@media (max-width: 767px) {
  .facility-gallery {
    grid-template-columns: 1fr;
  }
  .facility-gallery__large {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }
  .facility-gallery__small:nth-child(n) {
    grid-column: 1;
    grid-row: auto;
  }
}

/* --------------------------------------------------------------------------
   Hero CTA Button
   -------------------------------------------------------------------------- */
.hero-cta-btn {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.hero-cta-btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.8);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Spinning Coins
   -------------------------------------------------------------------------- */
@keyframes coinSpin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.hero-coins {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 64px;
  perspective: 1000px;
}

.coin {
  width: 104px;
  height: 104px;
  display: block;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.coin:hover {
  transform: scale(1.15) translateY(-4px);
}

.coin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: coinSpin 5s linear infinite;
  transform-style: preserve-3d;
}

.coin:hover img {
  animation-play-state: paused;
}

.coin-psychiatry svg {
  width: 100%;
  height: 100%;
  animation: coinSpin 5s linear infinite;
  transform-style: preserve-3d;
}
.coin-psychiatry:hover svg {
  animation-play-state: paused;
}

@media (max-width: 991px) {
  .coin { width: 88px; height: 88px; }
  .hero-coins { gap: 28px; margin-top: 56px; }
}

@media (max-width: 767px) {
  .coin { width: 72px; height: 72px; }
  .hero-coins { gap: 20px; margin-top: 48px; }
}

@media (max-width: 479px) {
  .coin { width: 60px; height: 60px; }
  .hero-coins { gap: 14px; margin-top: 40px; }
}

/* --------------------------------------------------------------------------
   Inner Page Fixes: z-index, padding, overlap prevention
   -------------------------------------------------------------------------- */

/* Ensure all page content sits below the fixed nav */
main {
  position: relative;
  z-index: 1;
}

/* Hero short sections on inner pages need guaranteed clearance */
.hero--short {
  padding-top: 168px; /* Match Island standard: clear fixed nav + breathing room */
  padding-bottom: 64px; /* Prevent CTA buttons from touching hero bottom edge */
}

/* Buttons inside hero sections need breathing room from preceding text */
.hero--short .btn,
.hero--short [class*="btn"] {
  margin-top: var(--space-4); /* 16px gap from sibling elements */
}

/* Hero subtitle needs bottom margin when followed by actions */
.hero--short .hero__subtitle {
  margin-bottom: var(--space-8); /* 32px before CTA buttons */
}

/* Ensure hero content doesn't overlap navbar */
.hero .hero__content,
.hero--short .hero__content {
  position: relative;
  z-index: 3;
}

/* Hero backgrounds must stay behind nav */
.hero .hero__bg,
.hero--short .hero__bg {
  z-index: 0;
}

.hero .hero__grain,
.hero--short .hero__grain {
  z-index: 1;
}

/* Ensure no inner-page elements overlap the fixed nav */
.section-nav {
  z-index: 1000;
}

/* Inner page sections - ensure no overlap with nav */
.section,
section[class*="section--"] {
  position: relative;
  z-index: 1;
}

/* Footer cards panel in dropdown - consistent dark background */
.nav-special-side-div .reco-other-div {
  background-color: #1a1a1a;
}

/* Ensure dropdown panels stay correctly positioned under nav */
.desktop-nav-dropdown-container {
  z-index: 999;
}

/* Quiz hero and any other non-standard hero sections need nav clearance */
.quiz-hero,
section[class*="hero"]:not(.hero--home) {
  padding-top: 168px !important; /* Match Island standard: 168px top clearance */
  padding-bottom: 64px; /* Consistent bottom spacing for CTA buttons */
}

/* ==========================================================================
   Inner Page Section Spacing - Consistent Breathing Room
   ========================================================================== */

/* Ensure all content sections on inner pages have ample vertical padding.
   The Island gold standard uses 96-120px between sections. We use 96px
   (var(--space-24)) as the baseline, matching the inline styles already set
   on most sections. This rule catches any section that lacks inline padding. */
main > .section {
  padding-top: var(--space-24); /* 96px */
  padding-bottom: var(--space-24); /* 96px */
}

/* CTA sections get extra top/bottom breathing room to feel like natural breaks */
main > .cta-section {
  padding-top: 120px;
  padding-bottom: 120px;
}

/* The first section after a hero needs no extra top padding since the hero
   already provides visual separation, but it should have strong bottom padding */
main > .hero--short + .section,
main > .hero--short + section {
  padding-top: var(--space-24); /* 96px */
}

/* Hero action buttons wrapper - consistent spacing from text */
.hero--short div[style*="display:flex"][style*="gap"] {
  margin-top: var(--space-6); /* 24px from preceding text */
}

/* Responsive: reduce inner-page hero spacing on tablet */
@media (max-width: 991px) {
  .hero--short {
    padding-top: 140px;
    padding-bottom: 56px;
  }
  .quiz-hero,
  section[class*="hero"]:not(.hero--home) {
    padding-top: 140px !important;
    padding-bottom: 56px;
  }
}

/* Responsive: reduce inner-page hero spacing on mobile */
@media (max-width: 767px) {
  .hero--short {
    padding-top: 120px;
    padding-bottom: 48px;
  }
  .quiz-hero,
  section[class*="hero"]:not(.hero--home) {
    padding-top: 120px !important;
    padding-bottom: 48px;
  }
  main > .cta-section {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
}

/* ==========================================================================
   COMPREHENSIVE MOBILE RESPONSIVE FIXES
   ========================================================================== */

/* Mobile Menu Glass Effect + Proper Transitions
   Override reco-base.css solid white background with translucent glass */
.mobile-menu {
  transition: opacity 0.3s ease-in-out;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  background-color: rgba(244, 240, 230, 0.85) !important;
  background: rgba(244, 240, 230, 0.85) !important;
}

.mobile-menu.active {
  display: flex;
  opacity: 1;
  transform: none;
}

/* Tablet breakpoint: 991px and below */
@media (max-width: 991px) {
  /* Multi-column grids become 2 columns */
  .assessment-options,
  .community-grid,
  .community-highlights,
  .app-cta-grid,
  .app-features,
  .app-mockup-grid,
  .app-feature-list {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Mission grid special case */
  .mission-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  /* Network grid stays at 3 across on tablet */
  .network-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Timeline adjustments */
  .timeline-step {
    text-align: left;
  }

  /* Process steps */
  .process-steps {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .process-step {
    text-align: left;
  }

  /* Stats grid */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  /* Team grid */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Feature cards */
  .feature-cards,
  .benefits-grid,
  .values-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* Mobile breakpoint: 768px and below */
@media (max-width: 768px) {
  /* ALL multi-column grids become single column */
  .assessment-options,
  .community-grid,
  .community-highlights,
  .app-cta-grid,
  .app-features,
  .app-mockup-grid,
  .app-feature-list,
  .mission-grid,
  .process-steps,
  .stats-grid,
  .team-grid,
  .feature-cards,
  .benefits-grid,
  .values-grid,
  .facility-gallery {
    grid-template-columns: 1fr !important;
  }

  /* Network grid goes to 2 columns on mobile */
  .network-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  /* Typography adjustments */
  h1, .h1 {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.15;
  }

  h2, .h2 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    line-height: 1.2;
  }

  h3, .h3 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  /* Text alignment - center on mobile where appropriate */
  .hero__content,
  .section-header,
  .cta-section {
    text-align: center;
  }

  /* Flex containers stack vertically */
  .flex-48.horizontal,
  .flex-auto-48 {
    flex-direction: column;
    gap: var(--space-8);
  }

  /* Card spacing */
  .card,
  .program-card,
  .facility-card,
  .treatment-card {
    margin-bottom: var(--space-6);
  }

  /* Button groups stack */
  .btn-group,
  .hero__actions,
  div[style*="display:flex"][style*="gap"] {
    flex-direction: column;
    width: 100%;
  }

  .btn-group .btn,
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Reduce section padding on mobile */
  main > .section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* Images full width */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Footer grid becomes single column */
  .footer-grid,
  .footer-grid--5 {
    grid-template-columns: 1fr !important;
    gap: var(--space-8);
  }

  /* Mobile menu spacing */
  .mobile-menu-container {
    padding-left: 5%;
    padding-right: 5%;
  }

  .mobile-menu-links-div {
    margin-top: 100px;
    margin-bottom: 100px;
  }
}

/* Extra small mobile: 480px and below */
@media (max-width: 480px) {
  /* Even tighter spacing */
  h1, .h1 {
    font-size: 1.75rem;
  }

  h2, .h2 {
    font-size: 1.5rem;
  }

  /* Network grid single column on tiny screens */
  .network-grid {
    grid-template-columns: 1fr;
  }

  /* Reduce container padding */
  .w-layout-blockcontainer,
  .w-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Section spacing */
  main > .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* Mobile nav adjustments */
  .section-nav {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .nav-cta-div {
    padding: 10px 16px;
    height: 40px;
  }

  .mobile-menu-toggle {
    width: 48px;
    height: 48px;
  }
}

/* ==========================================================================
   SPECIFIC COMPONENT MOBILE FIXES
   ========================================================================== */

/* Process Steps - Stack and Left Align */
@media (max-width: 768px) {
  .process-step {
    text-align: left;
    padding: var(--space-6);
  }

  .process-step__number {
    margin: 0 auto var(--space-4) 0;
  }

  .process-step__title {
    text-align: left;
  }

  .process-step__description {
    text-align: left;
  }
}

/* Stats - 2 columns on small tablet, 1 on mobile */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-item {
    text-align: center;
  }
}

/* Timeline - Mobile Layout */
@media (max-width: 768px) {
  .timeline-steps {
    gap: var(--space-8);
  }

  .timeline-step {
    padding: var(--space-6);
    text-align: left;
  }
}

/* Team/Staff Grid */
@media (max-width: 768px) {
  .team-grid,
  .staff-grid,
  .leadership-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .team-member,
  .staff-member {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .team-grid,
  .staff-grid {
    grid-template-columns: 1fr;
  }
}

/* Forms - Full Width on Mobile */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: var(--space-4);
  }

  .form-group {
    width: 100%;
  }

  input,
  textarea,
  select {
    width: 100%;
  }
}

/* Cards - Full Width Stack */
@media (max-width: 768px) {
  .card-grid,
  .feature-grid,
  .service-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-6);
  }

  .card {
    width: 100%;
  }
}

/* Hero CTA Buttons */
@media (max-width: 768px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .hero__actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* App Mockup Section */
@media (max-width: 768px) {
  .app-mockup-grid {
    text-align: center;
  }

  .app-mockup-left {
    order: 2;
  }

  .app-mockup-right {
    order: 1;
    margin-bottom: var(--space-8);
  }

  .app-phone {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* Assessment/Quiz Section */
@media (max-width: 768px) {
  .assessment-teaser-grid {
    grid-template-columns: 1fr !important;
  }

  .quiz-inline-start {
    padding: 24px 20px;
  }

  .quiz-inline-options {
    flex-direction: column;
    gap: var(--space-3);
  }

  .quiz-inline-option {
    width: 100%;
  }
}

/* Facility Gallery */
@media (max-width: 768px) {
  .facility-gallery {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .facility-gallery__large,
  .facility-gallery__small {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Community Highlights */
@media (max-width: 768px) {
  .community-highlight {
    text-align: center;
  }

  .community-highlight__icon {
    margin: 0 auto var(--space-4);
  }
}

/* Mission/Values Cards */
@media (max-width: 768px) {
  .mission-card,
  .value-card {
    text-align: center;
    padding: var(--space-6);
  }

  .mission-card__icon,
  .value-card__icon {
    margin: 0 auto var(--space-4);
  }
}

/* Treatment Program Cards */
@media (max-width: 768px) {
  .program-cards-grid {
    grid-template-columns: 1fr;
  }

  .program-card {
    width: 100%;
  }
}

/* Blog/Resource Cards */
@media (max-width: 768px) {
  .blog-grid,
  .resource-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* Testimonials */
@media (max-width: 768px) {
  .testimonials-layout {
    grid-template-columns: 1fr;
  }

  .testimonial-slide {
    padding: var(--space-6);
    text-align: center;
  }
}

/* Tables - Horizontal Scroll on Mobile */
@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 600px;
  }
}

/* Hide desktop-only elements */
@media (max-width: 991px) {
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }
}

/* Center text on mobile for hero and CTA sections */
@media (max-width: 768px) {
  .hero__title,
  .hero__subtitle,
  .section-heading,
  .section-subheading,
  .cta-heading,
  .cta-subheading {
    text-align: center;
  }

  /* But keep body text left-aligned */
  p, li, .body-text {
    text-align: left;
  }
}

/* ==========================================================================
   INNER PAGE HERO — Dark BG with Image Offset (Island/Psychiatry Pattern)
   ========================================================================== */

/* --- Section: Dark Background --- */
.section-dark-purple {
  color: #fff;
  background-color: #0a0a0a;
  width: 100%;
  height: auto;
  overflow: visible;
}

.section-dark-purple.section {
  background-color: #0a0a0a;
  width: 100%;
  height: auto;
  overflow: visible;
  margin-bottom: 0;
  padding-bottom: 0;
  position: relative;
  z-index: 2;
}

/* Image drops below dark bg — hero image overlaps the next section */
.section-dark-purple + section,
.section-dark-purple + .service-page,
.section.section-dark-purple + section {
  margin-top: 0;
  position: relative;
  z-index: 1;
}

/* --- Layout: Top Padding for Fixed Nav --- */
.padding-168 {
  flex-flow: column;
  padding-top: 190px;
  display: flex;
}

/* --- Layout: Two-Column Hero Flex --- */
.flex-74 {
  grid-column-gap: 74px;
  grid-row-gap: 74px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.flex-74.right-to-left {
  flex-flow: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
}

/* --- Hero Image Wrapper --- */
.video-wrapper {
  border-radius: 12px;
  width: 80%;
  height: 560px;
  position: relative;
  overflow: hidden;
  margin-bottom: -72px;
}

/* --- Full Cover Image --- */
.full-image {
  background-color: #1a1a1a;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all .3s cubic-bezier(.455, .03, .515, .955);
  position: static;
}

.full-image:hover {
  transform: scale(1.1);
}

/* --- Text Column --- */
.flex-32 {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  display: flex;
}

.flex-32.width-100 {
  width: 100%;
}

/* --- Text Alignment --- */
.flex-24.left-align {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

/* --- Font Utility Classes for Dark Hero --- */
.section-dark-purple .font-white,
.font-white {
  color: #fff;
  text-decoration: none;
}

.section-dark-purple .font-lite-black {
  color: var(--lite-black, #8F8E84);
}

.font-light {
  font-weight: 300;
}

.font-64 {
  font-size: 64px;
}

.font-64.font-light {
  font-family: Figtree, sans-serif;
  font-weight: 300;
  line-height: .9;
  letter-spacing: -2px;
  color: #fff;
}

.font-24 {
  font-size: 24px;
}

.font-24.font-light.height-90 {
  line-height: .9;
}

.font-24.font-light.font-lite-black {
  color: var(--lite-black, #8F8E84);
}

.height-90 {
  line-height: .9;
}

.width-100 {
  width: 100%;
  overflow: hidden;
}

/* --- Responsive: Tablet (max 991px) --- */
@media screen and (max-width: 991px) {
  .section-dark-purple .video-wrapper {
    height: 440px;
  }

  .section-dark-purple .font-64 {
    font-size: 48px;
  }

  .section-dark-purple .font-24 {
    font-size: 20px;
  }

  .section-dark-purple .padding-168 {
    padding-top: 140px;
  }
}

/* --- Responsive: Mobile (max 767px) --- */
@media screen and (max-width: 767px) {
  .section-dark-purple .flex-74,
  .section-dark-purple .flex-74.right-to-left {
    flex-flow: column-reverse;
    gap: 40px;
  }

  .section-dark-purple .video-wrapper {
    width: 100%;
    height: 280px;
  }

  .section-dark-purple .font-64 {
    font-size: 36px;
    line-height: 1.05;
  }

  .section-dark-purple .font-24 {
    font-size: 18px;
  }

  .section-dark-purple .padding-168 {
    padding-top: 120px;
    padding-bottom: 40px;
  }

  .section-dark-purple .video-wrapper {
    margin-bottom: 0;
  }

  .section-dark-purple + section,
  .section-dark-purple + .service-page,
  .section.section-dark-purple + section {
    margin-top: 0;
  }
}

/* --- Responsive: Small mobile (max 479px) --- */
@media screen and (max-width: 479px) {
  .section-dark-purple .font-64 {
    font-size: 28px;
  }

  .section-dark-purple .font-24 {
    font-size: 16px;
  }

  .section-dark-purple .padding-168 {
    padding-top: 100px;
    padding-bottom: 32px;
  }

  .section-dark-purple .video-wrapper {
    height: 220px;
  }
}

/* ==========================================================================
   ADDITIONAL MOBILE FIXES (2026-04-22)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fix 1: Mobile Menu Light Glass Translucent Effect (matches Island)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .mobile-menu {
    background: rgba(244, 240, 230, 0.85) !important;
    background-color: rgba(244, 240, 230, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  .mobile-menu-toggle {
    background: rgba(244, 240, 230, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(32, 30, 16, 0.1);
    border-radius: 8px;
    padding: 8px;
  }

  /* Adjust mobile menu text/link colors for light background */
  .mobile-menu .menu-links-section-div .font-24 {
    color: rgba(32, 30, 16, 0.5);
  }

  .mobile-menu .mobile-nav-link {
    color: rgba(32, 30, 16, 0.85);
  }

  .mobile-menu .mobile-nav-link:hover {
    color: #201E10;
  }

  .mobile-menu .separator-line {
    background-color: rgba(32, 30, 16, 0.12);
  }

  .mobile-menu .div-line {
    background-color: #201E10;
  }
}

/* --------------------------------------------------------------------------
   Fix 2: Multi-Column Stacking on Mobile (767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Two-column content grids stack to single column */
  .community-grid,
  .app-cta-grid,
  .app-mockup-grid,
  .testimonials-layout,
  .mission-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Two-column feature/highlight sub-grids stack to single column */
  .community-highlights,
  .app-features,
  .app-feature-list,
  .assessment-options {
    grid-template-columns: 1fr;
  }

  /* Webflow 4-column grid stacks to single column */
  ._4-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* 3-column grids stack to single column (admissions steps, etc) */
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Webflow _2-grid and _3-grid stacks to single column */
  ._2-grid,
  ._3-grid {
    grid-template-columns: 1fr !important;
  }

  /* Facility gallery stacks fully */
  .facility-gallery {
    grid-template-columns: 1fr;
  }

  .facility-gallery__large {
    grid-row: auto;
  }

  /* Flex containers that don't wrap should stack */
  .flex-74,
  .flex-auto-48 {
    flex-direction: column;
  }

  /* Footer flex stacks on mobile */
  .footer-flex.horizontal {
    flex-direction: column;
  }

  /* Reduce large paddings on mobile */
  section[style*="padding:var(--space-24)"] {
    padding: var(--space-16) 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Fix 3: Text Sizing on Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  h1, .h1 {
    font-size: clamp(1.875rem, 7vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  h2, .h2 {
    font-size: clamp(1.625rem, 5.5vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  h3, .h3 {
    font-size: clamp(1.25rem, 4.5vw, 1.75rem);
    line-height: 1.25;
  }

  h4, .h4 {
    font-size: clamp(1.125rem, 4vw, 1.5rem);
    line-height: 1.3;
  }

  /* Large display text */
  .font-48 {
    font-size: clamp(1.75rem, 6vw, 2.25rem);
  }
}

@media (max-width: 479px) {
  h1, .h1 {
    font-size: 1.625rem;
    line-height: 1.15;
  }

  h2, .h2 {
    font-size: 1.375rem;
    line-height: 1.2;
  }

  h3, .h3 {
    font-size: 1.125rem;
    line-height: 1.3;
  }

  h4, .h4 {
    font-size: 1rem;
    line-height: 1.3;
  }

  /* Large display text at extra small */
  .font-48 {
    font-size: 1.5rem;
  }

  /* Mobile menu toggle matches Island at 479px */
  .mobile-menu-toggle {
    width: 44px;
    height: 44px;
  }
}

/* --------------------------------------------------------------------------
   Fix 4: Phone Call Button - No Wrap
   -------------------------------------------------------------------------- */
.phone-call .call-us {
  white-space: nowrap;
}

.phone-call .nav-cta-div {
  white-space: nowrap;
}

.nav-cta-div .call-us {
  white-space: nowrap;
}

.nav-cta-div .number {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Fix 5: Auto-fit Grid Minmax Responsive Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Override large minmax values on auto-fit grids for mobile */
  div[style*="repeat(auto-fit, minmax(350px"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="repeat(auto-fit, minmax(320px"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="repeat(auto-fit, minmax(300px"] {
    grid-template-columns: 1fr !important;
  }

  /* Insurance provider logos grid */
  div[style*="repeat(auto-fit, minmax(280px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  /* All auto-fit grids become single column on very small screens */
  div[style*="repeat(auto-fit, minmax(280px"] {
    grid-template-columns: 1fr !important;
  }

  /* Reduce section padding further */
  section[style*="padding:var(--space-24)"],
  section[style*="padding: var(--space-24)"] {
    padding: var(--space-12) 0 !important;
  }

  section[style*="padding:var(--space-16)"],
  section[style*="padding: var(--space-16)"] {
    padding: var(--space-10) 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Fix 6: Prevent Horizontal Overflow
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Ensure body doesn't overflow */
  body {
    overflow-x: hidden;
  }

  /* Container max-width adjustments */
  .container,
  .w-container {
    max-width: 100%;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  /* Images don't overflow */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Hero title sizing on inner pages */
  .hero__title {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }

  /* Section headings responsive */
  .section-heading {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  /* Section subheadings readable */
  .section-subheading {
    font-size: clamp(1rem, 3.5vw, 1.125rem);
  }
}

/* --------------------------------------------------------------------------
   Fix 7: Card and Grid Item Sizing
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Facility cards, treatment cards stack nicely */
  .card,
  .treatment-card,
  .staff-card,
  .leadership-card {
    min-width: 0;
    width: 100%;
  }

  /* Grid gaps reduce on mobile */
  [style*="gap: var(--space-12)"],
  [style*="gap:var(--space-12)"] {
    gap: var(--space-6) !important;
  }

  [style*="gap: var(--space-10)"],
  [style*="gap:var(--space-10)"] {
    gap: var(--space-5) !important;
  }

  [style*="gap: var(--space-8)"],
  [style*="gap:var(--space-8)"] {
    gap: var(--space-4) !important;
  }
}

/* ==========================================================================
   Footer brand polish — reco-health is the umbrella; primary is black/cream.
   The submit button is class="black-submit w-button"; without the override
   below, Webflow's later .w-button rule paints it electric blue (#3898ec).
   ========================================================================== */
.black-submit,
input.black-submit,
input.black-submit.w-button {
  background-color: var(--primary, #000);
  color: var(--cream, #F4F0E6);
  border: none;
  border-radius: 100px;
  padding: 14px 32px;
  font-size: 14px;
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  width: 100%;
}

.black-submit:hover,
input.black-submit:hover {
  background-color: var(--primary-light, #333);
  transform: translateY(-1px);
}

/* Footer column headings - the small-caps eyebrow above each link list.
   These are the .font-12.font-lite-black DIVS specifically (NOT the links
   below them). Cream footer bg means they need dark text. */
.footer .font-12.font-lite-black {
  color: var(--off-black, #201E10);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Footer link styling. The bottom secondary link grid (._2-grid) has links
   that need to STACK vertically inside each column - by default <a> is
   inline so without this they wrap horizontally and look like a run-on
   sentence. Also restore proper text color on cream bg. */
.footer .font-12.font-black,
.footer .font-16.font-black {
  color: var(--off-black, #201E10);
  text-decoration: none;
  display: block;
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: normal;
}

.footer .font-12.font-black:hover,
.footer .font-16.font-black:hover {
  color: rgba(32, 30, 16, 0.65);
}

/* Make sure the footer text hierarchy reads cleanly on the cream bg */
.footer .font-12.font-lite-black:not(a) {
  margin-bottom: 12px;
  display: block;
}

/* --- mega dropdown (multi-column) --- */
.desktop-nav-dropdown-container.mega {
  width: 1040px;
  max-width: 1040px;
  z-index: 99;
  opacity: 0;
  height: auto;
  min-height: 380px;
  transition: opacity 0.2s;
  display: none;
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translate(-50%);
  padding: 16px;
  gap: 8px;
}
.nav-mega-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}
.nav-mega-col-title {
  font-family: Figtree, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8f8e84;
  padding: 8px 12px 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(143, 142, 132, 0.18);
}
@media (max-width: 1100px) {
  .desktop-nav-dropdown-container.mega {
    width: 960px;
    max-width: 960px;
  }
}

/* === Hero bottom bar (replaces the old .hero-coins on home) === */
.hero__bottom-bar {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  z-index: 5;
  pointer-events: none;
}
.hero__bottom-bar > * { pointer-events: auto; }

.hero__bottom-text {
  max-width: 480px;
  color: #fff;
  text-shadow: 0 1px 16px rgba(0,0,0,.45);
}
.hero__bottom-eyebrow {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 8px;
}
.hero__bottom-tagline {
  font-family: Figtree, sans-serif;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.35;
}

/* Match the reco-island "callusnow-div" pattern: "Call us now (561) 330-5830"
   inline on a single line, white text on the dark hero. */
.hero__bottom-call {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 16px rgba(0,0,0,.45);
  transition: opacity .2s ease;
  white-space: nowrap;
}
.hero__bottom-call:hover { opacity: .85; }
.hero__bottom-call-eyebrow {
  font-size: 22px;
  font-weight: 300;
  color: rgba(255,255,255,0.7);
}
.hero__bottom-call-number {
  font-family: 'Figtree', sans-serif;
  font-size: 24px;
  font-weight: 500;
}
@media (max-width: 768px) {
  .hero__bottom-call-eyebrow,
  .hero__bottom-call-number { font-size: 18px; }
}

@media (max-width: 768px) {
  .hero__bottom-bar {
    left: 16px; right: 16px; bottom: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .hero__bottom-text { max-width: none; }
  .hero__bottom-tagline { font-size: 18px; }
  .hero__bottom-call { justify-content: center; }
}

/* Hero secondary button — white outline on dark hero bg */
.btn--outline-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* =========================================================================
   Reco Health quiz — homepage Q1 widget + full /quiz wizard
   ========================================================================= */

/* --- Homepage Q1 widget --- */
.hp-quiz-section { padding: 80px 0; background: var(--cream, #f5f0eb); }
.hp-quiz-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 991px) { .hp-quiz-grid { grid-template-columns: 1fr; gap: 32px; } }

.hp-quiz__title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; }
.hp-quiz__desc { font-size: 17px; line-height: 1.6; color: rgba(32,30,16,0.65); margin-bottom: 32px; max-width: 480px; }
.hp-quiz__steps { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 16px; }
.hp-quiz__steps li { display: flex; gap: 14px; align-items: center; font-size: 15px; }
.hp-quiz__step-num {
  flex: 0 0 32px; height: 32px; border-radius: 50%; background: #201E10; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500;
}
.hp-quiz__privacy { font-size: 13px; color: rgba(32,30,16,0.5); }
.hp-quiz__privacy a { color: #201E10; font-weight: 600; }

.hp-quiz-card {
  background: #fff;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 12px 40px rgba(32,30,16,0.08);
  border: 1px solid rgba(32,30,16,0.06);
}
.hp-quiz__card-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(32,30,16,0.5); margin-bottom: 12px;
}
.hp-quiz__card-q { font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0 0 24px; color: #201E10; }
.hp-quiz__options { display: flex; flex-direction: column; gap: 10px; }
.hp-quiz__option {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border: 1px solid rgba(32,30,16,0.12);
  border-radius: 14px;
  background: #fff; color: #201E10; text-decoration: none;
  font-size: 15px; line-height: 1.4;
  transition: all .18s ease;
}
.hp-quiz__option:hover {
  border-color: #201E10;
  background: #f9f6f2;
  transform: translateX(2px);
}
.hp-quiz__shortcut {
  flex: 0 0 32px; height: 32px; border-radius: 8px;
  background: rgba(32,30,16,0.06);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 600;
  color: #201E10;
}
.hp-quiz__option:hover .hp-quiz__shortcut { background: #201E10; color: #fff; }
.hp-quiz__label { flex: 1 1 auto; }
.hp-quiz__arrow { color: rgba(32,30,16,0.3); font-size: 20px; transition: transform .18s ease, color .18s ease; }
.hp-quiz__option:hover .hp-quiz__arrow { color: #201E10; transform: translateX(4px); }

/* --- Full /quiz wizard --- */
.reco-quiz-section { padding: 80px 0 120px; background: #fff; }
.rq-progress { width: 100%; height: 4px; background: rgba(32,30,16,0.08); border-radius: 2px; margin-bottom: 40px; overflow: hidden; }
.rq-progress-bar { height: 100%; background: #201E10; border-radius: 2px; transition: width .35s ease; }

.rq-wizard { position: relative; }
.rq-step { animation: rqFadeIn .35s ease both; }
@keyframes rqFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.rq-step-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(32,30,16,0.5); margin-bottom: 12px;
}
.rq-step-q { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 300; line-height: 1.25; margin: 0 0 32px; color: #201E10; }
.rq-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }

.rq-option {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
  border: 1px solid rgba(32,30,16,0.12);
  border-radius: 16px;
  background: #fff; color: #201E10;
  font-size: 16px; line-height: 1.4; text-align: left;
  cursor: pointer; transition: all .18s ease;
  width: 100%;
  font-family: inherit;
}
.rq-option:hover { border-color: #201E10; background: #f9f6f2; }
.rq-option.is-selected { border-color: #201E10; background: #201E10; color: #fff; }
.rq-shortcut {
  flex: 0 0 36px; height: 36px; border-radius: 10px;
  background: rgba(32,30,16,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace; font-size: 14px; font-weight: 600;
  transition: all .18s ease;
}
.rq-option.is-selected .rq-shortcut { background: rgba(255,255,255,0.18); color: #fff; }
.rq-label { flex: 1 1 auto; }

.rq-step-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; }
.rq-back { background: none; border: none; padding: 8px 0; color: rgba(32,30,16,0.55); cursor: pointer; font-size: 14px; font-family: inherit; }
.rq-back:hover { color: #201E10; }

.rq-step-form .rq-form { display: flex; flex-direction: column; gap: 20px; max-width: 480px; }
.rq-form-desc { font-size: 15px; color: rgba(32,30,16,0.6); margin-bottom: 24px; }
.rq-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: rgba(32,30,16,0.7); font-weight: 500; }
.rq-form input {
  padding: 14px 16px; border: 1px solid rgba(32,30,16,0.18); border-radius: 12px;
  background: #fff; font-size: 16px; color: #201E10; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rq-form input:focus { outline: none; border-color: #201E10; box-shadow: 0 0 0 3px rgba(32,30,16,0.08); }
.rq-form-error {
  margin-top: 16px; padding: 12px 16px; background: #fff5f5;
  border: 1px solid #fee;  border-radius: 12px;
  color: #c53030; font-size: 14px;
}
.rq-form-error a { color: inherit; font-weight: 600; }

.rq-result-actions { flex-wrap: wrap; }
.rq-help { text-align: center; margin-top: 40px; font-size: 13px; color: rgba(32,30,16,0.5); }
.rq-help a { color: #201E10; font-weight: 600; }

/* === Quiz result step — high-conversion thank-you card === */
.rq-result-card {
  background: #fff;
  border: 1px solid rgba(32,30,16,0.08);
  border-radius: 24px;
  padding: 48px 40px;
  box-shadow: 0 16px 48px rgba(32,30,16,0.06);
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.rq-result-check {
  width: 72px; height: 72px; margin: 0 auto 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2da66a 0%, #1f8f56 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px rgba(45,166,106,0.28);
}
.rq-result-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(32,30,16,0.55);
  margin-bottom: 8px;
}
.rq-result-headline {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(32,30,16,0.5);
  margin: 0 0 12px;
}
.rq-result-brand {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 300;
  line-height: 1.15;
  color: #201E10;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.rq-result-desc {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(32,30,16,0.7);
  margin: 0 auto 32px;
  max-width: 480px;
}
.rq-result-call {
  background: #fafaf6;
  border: 1px solid rgba(32,30,16,0.06);
  border-radius: 16px;
  padding: 28px 24px;
  margin-bottom: 28px;
}
.rq-result-call-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(32,30,16,0.55);
  margin-bottom: 8px;
}
.rq-result-call-number {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 500;
  color: #201E10;
  text-decoration: none;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  transition: color .15s ease;
}
.rq-result-call-number:hover { color: #2da66a; }
.rq-result-call-meta {
  font-size: 13px;
  color: rgba(32,30,16,0.55);
}
.rq-result-actions {
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.rq-result-followup {
  font-size: 13px;
  color: rgba(32,30,16,0.5);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .rq-result-card { padding: 32px 20px; }
}

/* === App store badges (Reco Health "App" section) === */
.app-store-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.app-store-badge {
  display: inline-block;
  text-decoration: none;
  border-radius: 12px;
  padding: 2px;
  background: #201E10;
  color: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
}
.app-store-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(32,30,16,0.18);
}
.app-badge__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 11px;
}
.app-badge__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.app-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.app-badge__tagline {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .75;
  margin-bottom: 2px;
}
.app-badge__store {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.app-store-note {
  margin-top: 18px;
  font-size: 13px;
  color: rgba(32,30,16,0.5);
  line-height: 1.5;
}
.app-store-note a {
  color: #201E10;
  font-weight: 600;
  text-decoration: none;
}
.app-store-note a:hover { text-decoration: underline; }

/* === Vertical fill for nav side panel CTAs (Admissions/Resources dropdowns) === */
.section-nav .desktop-nav-dropdown-container.admissions .nav-special-side-div,
.section-nav .desktop-nav-dropdown-container.resources .nav-special-side-div {
  display: flex !important;
  align-self: stretch;
  align-items: stretch;
  min-height: 320px;
}
.section-nav .desktop-nav-dropdown-container.admissions .veryify-insurance-link-block,
.section-nav .desktop-nav-dropdown-container.resources .veryify-insurance-link-block {
  flex: 1 1 auto;
  width: 100%;
  min-height: 320px;
  height: auto;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  padding: 20px;
  justify-content: flex-end;
}
.section-nav .desktop-nav-dropdown-container.admissions .veryify-insurance-link-block::before,
.section-nav .desktop-nav-dropdown-container.resources .veryify-insurance-link-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%);
  border-radius: inherit;
  pointer-events: none;
}
.section-nav .desktop-nav-dropdown-container.admissions .veryify-insurance-link-block > *,
.section-nav .desktop-nav-dropdown-container.resources .veryify-insurance-link-block > * {
  position: relative;
  z-index: 1;
}

/* Force dropdown columns to equal-stretch — both sides match the tallest */
.section-nav .desktop-nav-dropdown-container.admissions,
.section-nav .desktop-nav-dropdown-container.resources {
  align-items: stretch !important;
}
.section-nav .desktop-nav-dropdown-container.admissions > *,
.section-nav .desktop-nav-dropdown-container.resources > * {
  align-self: stretch !important;
}
.section-nav .desktop-nav-dropdown-container.admissions .nav-special-side-div,
.section-nav .desktop-nav-dropdown-container.resources .nav-special-side-div {
  height: auto !important;
}
.section-nav .desktop-nav-dropdown-container.admissions .veryify-insurance-link-block,
.section-nav .desktop-nav-dropdown-container.resources .veryify-insurance-link-block {
  height: 100% !important;
  min-height: 100% !important;
}

/* === Hero bottom-right stack: Call CTA on top, Not Local row below.
       Each row sits on a single line. Mirrors recoisland.com pattern. === */
.hero__bottom-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}
.hero__bottom-not-local {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
  transition: opacity .2s ease;
  white-space: nowrap;
  font-size: 15px;
}
.hero__bottom-not-local:hover { opacity: .85; }
.hero__bottom-flag {
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
}
.hero__bottom-not-local-eyebrow {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
}
.hero__bottom-not-local-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero__bottom-not-local-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #fff;
}
.hero__bottom-not-local-line::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'><path d='M1 1l3 4-3 4' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 4px;
}

@media (max-width: 768px) {
  .hero__bottom-right { align-items: center; text-align: center; }
  .hero__bottom-not-local { font-size: 13px; }
}

/* ==========================================================================
   FIND YOUR PATH — Cinematic Image Gallery Section
   Sits immediately above the Assessment / hp-quiz-section
   ========================================================================== */

/* ============================================================
   WHAT WE TREAT — fashion-magazine marquee
   Clean cream background, dark scrolling type. The words are the
   show — no images, no patterns, just elegant motion. SEO-rich.
   ============================================================ */
.section--marquee {
  position: relative;
  padding: clamp(96px, 11vw, 160px) 0;
  background:
    radial-gradient(ellipse at top, #faf6ee 0%, #f4f0e6 60%, #efe9dc 100%);
  color: #201E10;
  overflow: hidden;
}

/* ── Inner content ── */
.marquee__inner { position: relative; z-index: 1; }
.marquee__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
  padding: 0 24px;
}
.marquee__eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  color: rgba(32,30,16,0.5) !important;
  letter-spacing: 0.18em !important;
}
.marquee__title {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  font-weight: 300;
  color: #201E10;
  margin: 0;
}

/* ── The marquee tracks ── */
.marquee {
  width: 100%;
  overflow: hidden;
  display: flex;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  padding: 24px 0 32px;
}
.marquee + .marquee { border-top: 1px solid rgba(32,30,16,0.10); }
.marquee:first-of-type { border-top: 1px solid rgba(32,30,16,0.10); }
.marquee:last-of-type  { border-bottom: 1px solid rgba(32,30,16,0.10); }

.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  letter-spacing: -0.01em;
  animation: marqueeScroll 50s linear infinite;
  will-change: transform;
}
.marquee--left  .marquee__track { animation-direction: normal;  }
.marquee--right .marquee__track { animation-direction: reverse; }
.marquee--slow  .marquee__track { animation-duration: 80s;       }

@keyframes marqueeScroll {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Row 1: large editorial serif-style — conditions */
.marquee__item {
  display: inline-block;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.4;
  color: #201E10;
  padding: 0 8px;
  letter-spacing: -0.02em;
  overflow: visible;
}
.section--marquee .marquee__track {
  overflow: visible;
}
/* Each row gets an explicit min-height so descenders + zap glow have
   room and never clip against the row's overflow:hidden boundary.
   Row 0 (largest, ~4rem text) needs the most. */
.section--marquee .marquee {
  min-height: clamp(110px, 11vw, 165px);
}
.section--marquee .marquee.marquee--accent {
  min-height: clamp(95px, 9vw, 130px);
}
.section--marquee .marquee.marquee--slow {
  min-height: 75px;
}
.marquee__sep {
  display: inline-block;
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  color: rgba(32,30,16,0.30);
  padding: 0 12px;
  font-family: 'DM Mono', monospace;
  font-weight: 400;
}

/* Row 2: italic accent — treatments */
.marquee--accent .marquee__item {
  font-style: italic;
  color: rgba(32,30,16,0.55);
  font-size: clamp(1.6rem, 3vw, 3rem);
}
.marquee--accent .marquee__sep { color: rgba(32,30,16,0.20); }

/* Row 3: small mono caps — values */
.marquee--slow .marquee__item {
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(32,30,16,0.55);
}
.marquee--slow .marquee__sep {
  color: rgba(32,30,16,0.18);
  padding: 0 4px;
  font-size: 0.85rem;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

/* Footer CTA */
.marquee__footer {
  text-align: center;
  margin-top: 56px;
  padding: 0 24px;
}
.marquee__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #201E10;
  text-decoration: none;
  padding: 16px 28px;
  border: 1px solid #201E10;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}
.marquee__cta:hover { background: #201E10; color: #f4f0e6; }
.marquee__cta svg { transition: transform .25s ease; }
.marquee__cta:hover svg { transform: translateX(4px); }

/* Mobile */
@media (max-width: 720px) {
  .marquee__item { font-size: 1.5rem; }
  .marquee--accent .marquee__item { font-size: 1.3rem; }
  .marquee__track { animation-duration: 38s; }
  .marquee--slow .marquee__track { animation-duration: 56s; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}.marquee__bg { animation: none; }
}}.fyp-split__accent { animation: none; }
}
}

/* Hover: pause animation and brighten slightly */
.fyp-collage__item:hover .fyp-collage__img {
  animation-play-state: paused;
  filter: brightness(1.04);
  transition: filter 0.6s ease;
}

/* Gradient overlay on each image for text legibility (if needed) */
.fyp-collage__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(32, 30, 16, 0.00) 55%,
    rgba(32, 30, 16, 0.18) 100%);
  pointer-events: none;
  border-radius: 12px;
}

/* ── Scroll-driven parallax via JS class ── */
.fyp-collage__img.js-parallax {
  /* JS will nudge translateY; the zoom animation still applies */
  transition: transform 0.1s linear;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .fyp-collage {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
  }

  .fyp-collage__item--large {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .fyp-collage__item--large .fyp-collage__img {
    min-height: 340px;
  }

  .fyp-collage__item--top-right {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .fyp-collage__item--bottom-mid {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .fyp-collage__item--bottom-right {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
  }

  .fyp-collage__item--top-right .fyp-collage__img,
  .fyp-collage__item--bottom-mid .fyp-collage__img {
    min-height: 260px;
  }

  .fyp-collage__item--bottom-right .fyp-collage__img {
    min-height: 220px;
  }
}

@media (max-width: 640px) {
  .section--find-your-path {
    padding: 72px 0 56px;
  }

  .fyp-header {
    margin-bottom: 36px;
  }

  .fyp-collage {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 10px;
  }

  .fyp-collage__item--large,
  .fyp-collage__item--top-right,
  .fyp-collage__item--bottom-mid,
  .fyp-collage__item--bottom-right {
    grid-column: 1 / 2;
    grid-row: auto;
  }

  .fyp-collage__item--large .fyp-collage__img,
  .fyp-collage__item--top-right .fyp-collage__img {
    min-height: 280px;
  }

  .fyp-collage__item--bottom-mid .fyp-collage__img,
  .fyp-collage__item--bottom-right .fyp-collage__img {
    min-height: 220px;
    display: none; /* hide 3rd/4th panel on mobile for performance */
  }
}

/* Health uses black --primary; override blog inline link color to a warm copper for legibility */
:root {
  --reco-link-color: #b8845c;
  --reco-link-hover: #8b5e3a;
}


/* ============================================================
   /blog page polish
   - Blog hero is light cream → force header logo + nav links to dark
     so they're visible (the existing JS toggle assumes dark hero).
   - Search bar needs proper top padding + luxury framing.
   ============================================================ */
.reco-blog-page ~ * .nav-link, /* fallback */
body:has(.reco-blog-page) .recohomelogo svg,
body:has(.reco-blog-page) .nav-link-block .font-14,
body:has(.reco-blog-page) .nav-link {
  color: #201E10 !important;
}
body:has(.reco-blog-page) .recohomelogo { color: #201E10 !important; }

/* Search bar — give it room from the topic cluster above + style luxury */
.reco-blog-archive__search {
  margin: 56px auto 24px !important;
  padding: 0 24px;
  max-width: 720px !important;
}
.reco-blog-archive__search-inner {
  position: relative;
  background: #fff;
  border: 1px solid rgba(32,30,16,0.10);
  border-radius: 999px;
  padding: 4px 4px 4px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 24px rgba(32,30,16,0.06);
  transition: border-color .2s, box-shadow .2s;
}
.reco-blog-archive__search-inner:focus-within {
  border-color: rgba(32,30,16,0.35);
  box-shadow: 0 8px 32px rgba(32,30,16,0.10);
}
.reco-blog-archive__search input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 16px !important;
  padding: 14px 0 !important;
  color: #201E10 !important;
}
.reco-blog-archive__search input::placeholder {
  color: rgba(32,30,16,0.45) !important;
  font-style: italic;
}
.reco-blog-archive__search button,
.reco-blog-archive__search-clear {
  background: #201E10 !important;
  color: #f4f0e6 !important;
  border: none !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: opacity .2s ease;
}
.reco-blog-archive__search button:hover { opacity: 0.85; }


/* ── Memory-flash backdrop: blurred photographs fade in/out behind marquee ── */
.marquee__frames {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.marquee__frame {
  position: absolute;
  margin: 0;
  background: transparent;
  padding: 0;
  border-radius: 8px;
  width: clamp(240px, 26vw, 360px);
  max-height: 56%;
  opacity: 0;
  will-change: transform, opacity, filter;
  animation: memoryFlash 15s cubic-bezier(.4, 0, .2, 1) infinite;
}
.marquee__frame img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 8px;
  box-shadow:
    0 30px 80px -16px rgba(32,30,16,0.20),
    0 10px 20px -10px rgba(32,30,16,0.10);
  filter: saturate(0.95) contrast(1.02);
}

/* Three scattered resting spots — each memory appears in a different place,
   all within the mid-section zone so they don't overflow into header/footer. */
.marquee__frame--1 {
  top: 26%; left: 3%;
  --rot: -4deg;
  animation-delay: 0s;
}
.marquee__frame--2 {
  top: 20%; right: 3%;
  --rot: 3deg;
  animation-delay: 5s;
}
.marquee__frame--3 {
  top: 30%; left: 38%;
  --rot: -2deg;
  animation-delay: 10s;
}

/* Slow memory fade: enters blurred & low → settles into a CLEAR, well-lit
   resting moment → drifts gently → blurs back out. Stays clear for ~2s
   in the middle so the eye can read the photo. */
/* ── Marquee word zap — random visible link sweeps a rainbow gradient
   (5 RECO timeline brand colors) horizontally across its text ── */
/* Rainbow zap — gradient + transparent text-fill applied only when .is-zapped.
   Bloom-in via opacity + blur for smoothness. */
.marquee__item.is-zapped {
  position: relative;
  z-index: 5;
  background-image: repeating-linear-gradient(
    90deg,
    #E87800 0%,    /* island orange */
    #f03e7c 20%,   /* intensive rose */
    #50A63C 40%,   /* immersive green */
    #6B3FA0 60%,   /* psychiatry purple */
    #10a8ca 80%,   /* institute teal */
    #E87800 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  animation:
    recoRainbowZap 2.6s linear infinite,
    recoZapBloom 0.55s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes recoZapBloom {
  0%   { opacity: 0.25; filter: blur(2px); }
  60%  { opacity: 1;    filter: blur(0); }
  100% { opacity: 1;    filter: blur(0); }
}
/* Marquee rows clip horizontally for the edge fade — let zapped text glow
   slightly above/below without getting clipped by row overflow. */
.section--marquee .marquee {
  overflow-y: visible;
}
@keyframes recoRainbowZap {
  0%   { background-position: 220% 50%; }
  100% { background-position: -20% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__item.is-zapped {
    animation: none !important;
    transform: none;
    filter: none;
  }
}

/* Top marquee row: items use the largest font; line-height 1 prevents the
   gradient text-fill from getting visually clipped along the descenders. */
.section--marquee .marquee:first-of-type .marquee__item { line-height: 1; }

@keyframes memoryFlash {
  0%, 100% {
    opacity: 0;
    transform: translateY(28px) scale(0.94) rotate(calc(var(--rot) - 4deg));
    filter: blur(12px) saturate(0.78);
  }
  18% {
    opacity: 0.85;
    transform: translateY(0) scale(1) rotate(var(--rot));
    filter: blur(0) saturate(1);
  }
  32% {
    opacity: 0.85;
    transform: translateY(-8px) scale(1.04) rotate(var(--rot));
    filter: blur(0) saturate(1);
  }
  42% {
    opacity: 0;
    transform: translateY(-18px) scale(1.07) rotate(calc(var(--rot) + 3deg));
    filter: blur(10px) saturate(0.82);
  }
}

/* Marquee content layers above the photo backdrop */
.section--marquee .marquee__inner { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .marquee__frame {
    animation: none;
    opacity: 0.32;
    filter: blur(4px) saturate(0.92);
    transform: rotate(var(--rot));
  }
}


/* Marquee links — kill underline + inherit color, hover shifts to brand accent */
.marquee a.marquee__item {
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
  transition: color .25s ease, opacity .25s ease;
}
.marquee a.marquee__item:hover {
  color: rgba(32,30,16,1) !important;
  opacity: 1;
}
.marquee--accent a.marquee__item:hover { color: rgba(32,30,16,0.9) !important; }
.marquee--slow a.marquee__item:hover { color: rgba(32,30,16,0.85) !important; }

/* Bottom row separator alignment — / sits visually centered with the small caps */
.marquee--slow {
  align-items: center;
}
.marquee--slow .marquee__track {
  align-items: center;
  line-height: 1;
}
.marquee--slow .marquee__item,
.marquee--slow .marquee__sep {
  display: inline-flex;
  align-items: center;
  height: 1.4em;
  line-height: 1;
  vertical-align: middle;
  padding-top: 0;
  padding-bottom: 0;
}
.marquee--slow .marquee__sep {
  font-size: 1.1em;
  color: rgba(32,30,16,0.22);
  padding: 0 8px;
}



/* ============================================================
   Marquee section — mobile + tablet polish
   ============================================================ */

/* Tablet (≤900px) */
@media (max-width: 900px) {
  .section--marquee {
    padding: clamp(72px, 11vw, 96px) 0;
  }
  .marquee__header {
    margin-bottom: 40px;
    padding: 0 20px;
  }
  .marquee__title {
    font-size: clamp(1.75rem, 5vw, 2.6rem);
  }
  .marquee__frame {
    width: clamp(220px, 36vw, 320px);
  }
  .marquee__frame--1 { top: 30%; left: 2%; }
  .marquee__frame--2 { top: 20%; right: 2%; }
  .marquee__frame--3 { top: 46%; left: 32%; }
  .marquee { padding: 14px 0; }
  .marquee__item { font-size: clamp(1.5rem, 3.6vw, 2.4rem); }
  .marquee--accent .marquee__item { font-size: clamp(1.2rem, 2.8vw, 1.9rem); }
  .marquee--slow .marquee__item { font-size: 0.85rem; letter-spacing: 0.16em; }
  .marquee__footer { margin-top: 40px; }
}

/* Phone (≤640px) */
@media (max-width: 640px) {
  .section--marquee {
    padding: 64px 0 72px;
    /* tighter top — comes after assessment block */
  }
  .marquee__header {
    margin-bottom: 32px;
    padding: 0 16px;
  }
  .marquee__eyebrow {
    font-size: 10px;
    letter-spacing: 0.20em !important;
    margin-bottom: 12px;
  }
  .marquee__title {
    font-size: clamp(1.55rem, 7vw, 2.1rem);
    line-height: 1.12;
  }
  .marquee__frame {
    width: clamp(200px, 60vw, 280px);
    border-radius: 6px;
  }
  .marquee__frame img { border-radius: 6px; }
  /* Phone: photos sit further toward edges; only one mostly-visible at a time */
  .marquee__frame--1 { top: 26%; left: -6%; }
  .marquee__frame--2 { top: 22%; right: -6%; }
  .marquee__frame--3 { top: 48%; left: 18%; }
  /* Marquee rows */
  .marquee {
    padding: 11px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .marquee__track {
    gap: 10px;
    animation-duration: 32s;
  }
  .marquee--slow .marquee__track { animation-duration: 50s; }
  .marquee__item {
    font-size: 1.35rem;
    padding: 0 4px;
    letter-spacing: -0.015em;
  }
  .marquee--accent .marquee__item {
    font-size: 1.05rem;
  }
  .marquee--slow .marquee__item {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
  }
  .marquee__sep {
    font-size: 1rem;
    padding: 0 6px;
  }
  .marquee--accent .marquee__sep { font-size: 0.95rem; }
  .marquee--slow .marquee__sep { font-size: 0.78rem; padding: 0 3px; }
  /* Footer */
  .marquee__footer { margin-top: 36px; padding: 0 16px; }
  .marquee__cta {
    padding: 13px 22px;
    font-size: 11px;
    letter-spacing: 0.16em;
  }
}

/* Very small phones (≤380px) */
@media (max-width: 380px) {
  .marquee__title { font-size: 1.45rem; }
  .marquee__frame { width: 220px; }
  .marquee__frame--1 { top: 26%; left: -10%; }
  .marquee__frame--2 { top: 22%; right: -10%; }
  .marquee__frame--3 { top: 48%; left: 14%; }
  .marquee__item { font-size: 1.2rem; }
  .marquee--accent .marquee__item { font-size: 0.95rem; }
}



/* === A11Y + PageSpeed (auto-appended) =================================== */
.reco-skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 99999;
  background: #201E10;
  color: #F4F0E6;
  padding: 12px 20px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.reco-skip-link:focus {
  position: fixed;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  outline: 3px solid #f4f0e6;
  outline-offset: -2px;
}
.reco-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}
.nav-link-block:focus-visible,
.mobile-nav-link:focus-visible,
.nav-dropdown-link:focus-visible,
.phone-call:focus-visible,
.mobile-menu-toggle:focus-visible,
.marquee__item:focus-visible {
  outline: 2px solid #201E10;
  outline-offset: 3px;
  border-radius: 4px;
}
button.mobile-menu-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}