/* ==========================================================================
   Sounds Good — Homepage & Component Styles
   Page-specific styles only. Tokens from global.css.
   ========================================================================== */

/* ----- Header ----- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-navbar);
  background: var(--color-white);
}

.header-top {
  padding: var(--space-3) 0;
}

.header-top__item {
  font-size: var(--font-size-base);
  color: #666666;
}

.header-top__item span {
  font-family: var(--font-family-base)!important;
}

.header-top__item a {
  font-size: var(--font-size-base);
  color: #666666;
}

.header-top__item svg {
  color: var(--color-accent-dark);
}

.header-brand {
  position: relative;
  /* padding: var(--space-2) 0; */
}

.header-brand__stripe {
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
}

.header-brand__stripe--green {
  top: 14px;
  background: var(--color-accent);
}

.header-brand__stripe--navy {
  top: 44px;
  background: var(--color-secondary);
}

.header-brand__logo {
  position: relative;
  z-index: 2;
  display: inline-block;
  background: var(--color-white);
  padding: var(--space-2) var(--space-3);
  width: 150px;
  height: auto;
}

.header-nav {
  padding: var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

/* Collapse utility bar + brand after scrolling past first <h1> (JS toggles .is-past-banner) */
.site-header .header-top,
.site-header .header-brand {
  overflow: hidden;
  max-height: 160px;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height 0.35s ease,
    opacity 0.3s ease,
    transform 0.3s ease,
    padding 0.35s ease;
}

.site-header.is-past-banner .header-top,
.site-header.is-past-banner .header-brand {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

/* Compact logo in nav — only when header is minimized */
.header-nav__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 0;
  max-width: 0;
  margin-right: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-width 0.35s ease,
    opacity 0.3s ease,
    margin 0.35s ease;
}

.header-nav__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.site-header.is-past-banner .header-nav__logo {
  width: auto;
  max-width: 120px;
  margin-right: auto;
  opacity: 1;
  pointer-events: auto;
}

.site-header.is-past-banner .header-nav {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .site-header .header-top,
  .site-header .header-brand,
  .header-nav__logo {
    transition: none;
  }
}

.header-nav__link {
  display: inline-flex;
  padding: var(--space-1) var(--space-4);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  color: #666666;
  border-radius: var(--radius-pill);
  transition: color var(--transition-base), background var(--transition-base);
}

.header-nav__link:hover,
.header-nav__link.is-active {
  color: var(--color-accent);
}

.header-mobile {
  position: relative;
  height: 78px;
  overflow: hidden;
  background: #fff;
}

.header-mobile__stripe {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 13px;
  pointer-events: none;
}

.header-mobile__stripe--green {
  top: 25px;
  background: #009c43;
}

.header-mobile__stripe--navy {
  top: 38px;
  background: #2c2d88;
}

.header-mobile__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px;
  background: transparent;
}

.header-mobile__logo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 47px;
  background: #fff;
}

.header-mobile__logo img {
  display: block;
  width: 86.5px;
  height: auto;
  max-height: 42px;
  object-fit: contain;
}

.header-mobile__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.header-mobile__toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

.mobile-menu__list li a {
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--font-size-md);
  color: var(--color-dark);
  border-bottom: 1px solid var(--color-border-light);
}

.mobile-menu__contact {
  margin-top: var(--space-6);
  color: #666666;
}

.btn-outline-accent {
  background: transparent;
  color: var(--color-accent-dark);
  border: 1px solid var(--color-accent-dark);
  font-weight: var(--font-weight-medium);
}

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


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

.section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-md);
  color: var(--color-dark);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
  text-transform: none;
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-4);
}

.section-desc {
  max-width: 853px;
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.section-header {
  margin-bottom: var(--space-10);
}


/* ----- Hero Banner ----- */

.hero-banner {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.site-header {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.journey-section,
.social-section,
.brands-section,
.contact-section,
.home-moments-mobile,
.home-stats-mobile,
.home-testimonials-mobile,
.footer-location-mobile {
  overflow-x: clip;
  max-width: 100%;
}

.hero-banner__viewport {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.hero-banner__slider {
  display: flex;
  min-width: 0;
  transition: transform 0.6s ease;
  will-change: transform;
}

.hero-banner__slide {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.hero-banner__bg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

/* .hero-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
} */

.hero-banner__slide .container {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.hero-banner__content {
  max-width: 560px;
  color: var(--color-white);
}

.hero-banner__content h1 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  line-height: 1.4;
  letter-spacing: -1px;
  margin-bottom: var(--space-7);
}

.hero-banner__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(5px);
  font-size: var(--font-size-xs);
  color: #f6f6f6;
}

.hero-banner__dots {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-3);
  z-index: 3;
}

.hero-banner__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.45);
  border: 0;
  padding: 0;
  transition: background var(--transition-base), transform var(--transition-base);
}

.hero-banner__dot.is-active {
  background: var(--color-white);
  transform: scale(1.15);
}

.hero-banner__pins {
  display: none!important;
}


/* ----- About Intro ----- */

.about-intro__media {
  margin-top: var(--space-6);
}

.about-intro__video img {
  width: 100%;
  min-height: 320px;
  object-fit: cover;
}


/* ----- Stats Grid ----- */

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

.stat-card--customers,
.stat-card--trusted,
.stats-stack {
  grid-column: span 2;
}

.stat-card--branches,
.stat-card--cities {
  grid-column: span 3;
}

/* Stacked pair (30+ / Audiologists) */
.stats-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 340px;
}

.stats-stack .stat-card {
  flex: 1;
  min-height: 0;
}

.stat-card {
  position: relative;
  min-height: 300px;
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background-color: var(--color-white);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.stat-card__content {
  position: relative;
  z-index: 1;
  max-width: 55%;
}

/* Card backgrounds */
.stat-card--customers {
  background-image: url("../images/home/why-we-card1-bg.png");
  background-position: center bottom;
}

.stat-card--trusted {
  background-image: url("../images/home/why-we-card2-bg.png");
  background-position: right center;
}

.stat-card--experience {
  background-image: url("../images/home/why-we-card3-bg.png");
  background-position: right center;
  background-size: cover;
  border: 1px solid var(--color-border-light);
  min-height: auto;
}

.stat-card--audiologists {
  background-image: url("../images/home/why-we-card4-bg.png");
  background-position: right center;
  background-size: cover;
  border: 1px solid var(--color-border-light);
  min-height: auto;
  display: flex;
  align-items: flex-start;
}

.stat-card--branches {
  background-image: url("../images/home/why-we-card5-bg.png");
  background-position: right center;
}

.stat-card--cities {
  display: flex;
  flex-direction: column;
  background-image: url("../images/home/why-we-card6-bg.png");
  background-position: right center;
}

.stat-card__cities {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column;
  gap: 32px 16px;
  width: 100%;
  margin: auto 0 0;
  padding: 16px 20px;
  list-style: none;
  counter-reset: city;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.stat-card__cities li {
  counter-increment: city;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.stat-card__cities li::before {
  content: counter(city) ". ";
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.stat-card--experience .stat-card__number,
.stat-card--trusted .stat-card__number,
.stat-card--customers .stat-card__number,
.stat-card--branches .stat-card__number,
.stat-card--cities .stat-card__number {
  color: var(--color-secondary);
}

.stat-card--audiologists .stat-card__title {
  max-width: 130px;
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.stat-card__number {
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: var(--font-weight-medium);
  color: var(--color-dark);
  line-height: 1.1;
  font-family: var(--font-family-heading)!important;
}

.stat-card__label,
.stat-card__title {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.stat-card__title {
  font-weight: var(--font-weight-medium);
  color: var(--color-dark);
}

/* Stats grid — tablet / iPad: 2 cards per row */
@media (max-width: 1199.98px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .stat-card--customers,
  .stat-card--trusted,
  .stats-stack,
  .stat-card--branches,
  .stat-card--cities {
    grid-column: span 1;
  }

  .stats-stack {
    min-height: 300px;
  }

  .stat-card {
    min-height: 280px;
  }

  .stat-card__content {
    max-width: 60%;
  }
}

/* ----- Home stats mobile (carousel) ----- */

.home-stats-mobile {
  background: #fafafa;
  padding-block: 24px 32px;
}

.home-stats-mobile .container {
  padding-inline: 16px;
}

.home-stats-mobile__viewport {
  overflow: hidden;
  width: 100%;
  max-width: 362px;
  margin-inline: auto;
}

.home-stats-mobile__track {
  display: flex;
  flex-direction: row;
  gap: 16px;
  transition: transform 0.35s ease;
  will-change: transform;
}

.home-stats-mobile__slide {
  flex: 0 0 100%;
  width: 100%;
  max-width: 362px;
  min-height: 307px;
  height: 307px;
  padding: 20px;
  margin: 0;
  border: 0.9px solid #e6e6e6;
  border-radius: 18px;
  box-shadow: 0 5.4px 7.2px rgba(0, 0, 0, 0.04);
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Mobile-only card backgrounds */
.home-stats-mobile .stat-card--customers {
  background-image: url("../images/home/3lakhk-mobile.png");
  background-position: center bottom;
}

.home-stats-mobile .stat-card--trusted {
  background-image: url("../images/home/trusted-mobile.png");
  background-position: right bottom;
}

.home-stats-mobile .stat-card--experience {
  background-image: url("../images/home/30-years-mobile.png");
  background-position: right bottom;
}

.home-stats-mobile .stat-card--branches {
  background-image: url("../images/home/12-branches-mobile.png");
  background-position: center bottom;
}

.home-stats-mobile .stat-card--cities {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 307px;
  background-image: url("../images/home/9-cities-mobile.png");
  background-position: right top;
}

.home-stats-mobile .stat-card__cities {
  gap: 6px 12px;
  margin-top: 16px;
  padding: 12px 14px;
}

.home-stats-mobile .stat-card__cities li {
  font-size: 12px;
  line-height: 1.4;
}

.home-stats-mobile .stat-card__content {
  max-width: none;
}

.home-stats-mobile .stat-card__number {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.88px;
  color: var(--color-secondary);
}

.home-stats-mobile .stat-card__label {
  margin-top: 0;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.18px;
  color: #787575;
}

.home-stats-mobile__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.home-stats-mobile__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--color-secondary);
  border-radius: 300px;
  background: #fff;
  color: var(--color-secondary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.home-stats-mobile__btn--next,
.home-stats-mobile__btn.is-active {
  background: var(--color-secondary);
  color: #fff;
}

.home-stats-mobile__btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.home-stats-mobile__btn:not(:disabled):hover {
  opacity: 0.9;
}


/* ----- Moments Tabs ----- */

.moments-section {
  background: var(--color-white);
}

.moments-section .section-label {
  padding: 10px 20px;
  margin-bottom: var(--space-3);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: #333333;
  background: #f4f4f4;
  border: 1px solid #e4e4e4;
  border-radius: 30px;
}

.moments-section .section-title {
  letter-spacing: -1px;
  margin-bottom: 0;
}

.moments-section .section-header {
  margin-bottom: var(--space-8);
}

.moments-tabs__shell {
  background: #f7f7f7;
  border-radius: 20px;
  padding: 32px 20px 20px;
}

.moments-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}

.moments-tabs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: 22px;
  color: #838383;
  background: var(--color-white);
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition:
    color 0.3s ease,
    font-weight 0.3s ease,
    box-shadow 0.3s ease;
}

.moments-tabs__btn.is-active {
  color: var(--color-accent-dark);
  font-weight: var(--font-weight-medium);
}

.moments-tabs__btn:hover {
  color: var(--color-accent-dark);
}

.moments-tabs__btn:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.moments-tabs__card {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  background: var(--color-accent-dark);
  border-radius: 10px;
}

.moments-tabs__pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 78%, rgba(255, 255, 255, 0.12) 0 70px, transparent 71px),
    radial-gradient(circle at 58% 92%, rgba(255, 255, 255, 0.1) 0 90px, transparent 91px),
    radial-gradient(circle at 84% 92%, rgba(255, 255, 255, 0.1) 0 80px, transparent 81px),
    linear-gradient(135deg, transparent 42%, rgba(255, 255, 255, 0.06) 42% 58%, transparent 58%);
  opacity: 0.9;
}

.moments-tabs__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 580px);
  gap: 24px;
  align-items: stretch;
  padding: 12px 12px 12px 52px;
  min-height: 400px;
}

.moments-tabs__copy-window,
.moments-tabs__media-window {
  overflow: hidden;
  height: 376px;
}

.moments-tabs__copy-window {
  align-self: center;
}

.moments-tabs__copy-reel,
.moments-tabs__media-reel {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.moments-tabs__slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 0 0 376px;
  height: 376px;
  padding: 40px 0 24px;
  box-sizing: border-box;  
}

.moments-tabs__heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.moments-tabs__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: var(--color-white);
  border-radius: 8px;
}

.moments-tabs__slide h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-white);
}

.moments-tabs__slide p {
  max-width: 444px;
  margin: 0 0 auto;
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  line-height: 27px;
  letter-spacing: -0.2px;
  color: var(--color-white);
}

.moments-tabs__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  padding: 12px 24px;
  width: fit-content;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: var(--color-white);
  border: 1px solid var(--color-white);
  border-radius: 40px;
  background: transparent;
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.moments-tabs__cta:hover {
  background: var(--color-white);
  color: var(--color-accent-dark);
}

.moments-tabs__media-slide {
  flex: 0 0 376px;
  height: 376px;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-white);
}

.moments-tabs__media-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  mix-blend-mode: luminosity;
}

/* Moments tabs — tablet / iPad: keep image on the right */
@media (max-width: 1199.98px) {
  .moments-tabs__shell {
    padding: 28px 16px 16px;
  }

  .moments-tabs__nav {
    gap: 12px;
    margin-bottom: 20px;
  }

  .moments-tabs__btn {
    padding: 8px 12px;
    font-size: 15px;
    line-height: 1.3;
  }

  .moments-tabs__layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 48%);
    gap: 16px;
    align-items: stretch;
    padding: 12px 12px 12px 28px;
    min-height: 340px;
  }

  .moments-tabs__copy-window,
  .moments-tabs__media-window {
    order: initial;
    height: 340px;
  }

  .moments-tabs__media-window {
    min-width: 0;
  }

  .moments-tabs__slide {
    flex-basis: 340px;
    height: 340px;
    padding: 24px 0 16px;
  }

  .moments-tabs__slide h3 {
    font-size: 20px;
  }

  .moments-tabs__slide p {
    max-width: none;
    font-size: 16px;
    line-height: 1.45;
  }

  .moments-tabs__cta {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 14px;
  }

  .moments-tabs__media-slide {
    flex-basis: 340px;
    height: 340px;
  }
}

@media (max-width: 991.98px) {
  .moments-tabs__layout {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 46%);
    padding: 12px;
  }

  .moments-tabs__copy-window,
  .moments-tabs__media-window {
    height: 320px;
  }

  .moments-tabs__slide {
    flex-basis: 320px;
    height: 320px;
    padding-top: 16px;
  }

  .moments-tabs__media-slide {
    flex-basis: 320px;
    height: 320px;
  }
}

/* ----- Home moments mobile ----- */

.home-moments-mobile {
  background: #fff;
  padding-block: 52px 48px;
}

.home-moments-mobile .container {
  padding-inline: 20px;
}

.home-moments-mobile__header {
  margin-bottom: 24px;
  text-align: center;
}

.home-moments-mobile__label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  color: #333;
}

.home-moments-mobile__title {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -1px;
  color: #2c2d88;
}

.home-moments-mobile__nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.home-moments-mobile__nav::-webkit-scrollbar {
  display: none;
}

.home-moments-mobile__btn {
  flex: 0 0 auto;
  padding: 8px 15px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  white-space: nowrap;
  color: #838383;
  background: #f7f7f7;
  border: none;
  border-radius: 30px;
  cursor: pointer;
}

.home-moments-mobile__btn.is-active {
  color: #009c43;
}

.home-moments-mobile__btn:focus-visible {
  outline: 2px solid #009c43;
  outline-offset: 2px;
}

.home-moments-mobile__card {
  overflow: hidden;
  background: #009c43;
  border-radius: 10px;
}

.home-moments-mobile__viewport {
  overflow: hidden;
  width: 100%;
}

.home-moments-mobile__track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-moments-mobile__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 12px;
}

.home-moments-mobile__media {
  margin: 0;
  width: 100%;
  height: 219px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
}

.home-moments-mobile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  mix-blend-mode: luminosity;
}

.home-moments-mobile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.home-moments-mobile__heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-moments-mobile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
}

.home-moments-mobile__heading h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
}

.home-moments-mobile__body p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: #fff;
}

.home-moments-mobile__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: #009c43;
  text-decoration: none;
  background: #fff;
  border-radius: 30px;
}

.home-moments-mobile__cta:hover {
  opacity: 0.92;
  color: #009c43;
}


/* ----- Journey ----- */

#journey-heading{
  text-align: left;
}

.journey-section__media img{
filter: grayscale(100%);
}

.journey-section__media img {
  width: 100%;
  min-height: 360px;
  object-fit: cover;
}

.journey-section__divider {
  border: 0;
  border-top: 1px solid var(--color-border-light);
  margin: var(--space-6) 0;
}

.journey-section p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  line-height: var(--line-height-relaxed);
}


/* ----- Location CTA (legacy page usage) ----- */

.location-cta__inner {
  padding: var(--space-12) 0;
  background: linear-gradient(135deg, var(--color-secondary) 0%, #1a1b5e 100%);
  color: var(--color-white);
}

.location-cta__content {
  max-width: 520px;
}

.location-cta__tag {
  display: inline-flex;
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-pill);
}

.location-cta__content h2 {
  font-size: clamp(28px, 4vw, 40px);
  color: var(--color-white);
  text-transform: none;
  margin-bottom: var(--space-4);
}

.location-cta__content p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-6);
}


/* ----- Footer Location CTA (1225) ----- */

.footer-location {
  position: relative;
  padding: var(--space-10) 0 var(--space-10);
  background: linear-gradient(
    to bottom,
    var(--color-white) 0%,
    var(--color-white) 50%,
    var(--color-bg-pale) 50%,
    var(--color-bg-pale) 100%
  );
}

.footer-location .container {
  position: relative;
  z-index: 1;
}

.footer-location__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.15fr);
  align-items: center;
  min-height: 370px;
  margin-bottom: 0;
  overflow: hidden;
  background: var(--color-secondary);
  border-radius: var(--radius-xl);
}

.footer-location__content {
  position: relative;
  z-index: 2;
  padding: var(--space-11) var(--space-10);
  max-width: 480px;
}

.footer-location__content h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  text-transform: none;
  line-height: 1.25;
  letter-spacing: -1px;
  margin-bottom: var(--space-4);
}

.footer-location__content p {
  font-size: var(--font-size-md);
  color: rgba(255, 255, 255, 0.9);
  line-height: var(--line-height-relaxed);
  margin-bottom: 0;
}

.footer-location__map {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 370px;
  /* padding: var(--space-6); */
}

/* Large clipped circle covering the CTA right side */
.footer-location__map-glow {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -25%;
  width: 78%;
  aspect-ratio: 1;
  min-width: 640px;
  min-height: 640px;
  transform: translateY(-50%);
  border-radius: var(--radius-full);
  background: #e5ebfa;
  pointer-events: none;
}

.footer-location__map-stage {
  position: relative;
  z-index: 2;
  /* width: min(100%, 460px);
  aspect-ratio: 460 / 290; */
}

.footer-location__map-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Interactive map pins — upright, spin on vertical axis only */
.footer-location__pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  z-index: 2;
  display: flex;
  align-items: center;
  transform: translate(-50%, -85%);
  perspective: 280px;
  perspective-origin: 50% 40%;
  text-decoration: none;
  color: var(--color-secondary);
}

.footer-location__pin-spin {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  transform-style: preserve-3d;
  transform-origin: center center;
  animation: footer-pin-spin 5s linear infinite;
  animation-direction: normal;
}

.footer-location__pin-icon {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.footer-location__pin-icon--back {
  transform: rotateY(180deg);
}

.footer-location__pin.is-active {
  z-index: 5;
}

.footer-location__tab {
  position: absolute;
  left: calc(100% - 6px);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  white-space: nowrap;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
  background: var(--color-white);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

/* Theni — tab opens left so it stays on map */
.footer-location__pin3 .footer-location__tab {
  left: auto;
  right: calc(100% - 6px);
}

.footer-location__tab svg {
  color: #adadad;
  flex-shrink: 0;
}

.footer-location__pin:hover .footer-location__tab,
.footer-location__pin:focus-visible .footer-location__tab,
.footer-location__pin.is-active .footer-location__tab {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.footer-location__pin:focus-visible {
  outline: none;
}

.footer-location__pin:focus-visible .footer-location__pin-spin {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
  border-radius: var(--radius-full);
}

.footer-location__tab:hover {
  color: var(--color-primary);
}

/* Vertical-axis spin only — pin stays upright, no flat tumble */
@keyframes footer-pin-spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-location__pin-spin {
    animation: none;
  }
}

.is-pins-paused .footer-location__pin-spin {
  animation-play-state: paused;
}

/* ----- Footer location CTA (mobile) ----- */
.footer-location-mobile {
  padding: 30px 0 30px;
  background: #fff;
}

.footer-location-mobile .container {
  padding-inline: 20px;
}

.footer-location-mobile__map {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 2.75rem;
  background: #e5ebfa;
  border-radius: 50% 50% 0 0 / 120px 120px 0 0;
  overflow: hidden;
}

.footer-location-mobile__card {
  display: flex;
  flex-direction: column;
  max-width: 362px;
  min-height: 514px;
  margin-inline: auto;
  overflow: visible;
  background: #2c2d88;
  border: 3px solid #fff;
  border-radius: 20px;
}

.footer-location-mobile__map .footer-location__map-stage {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  margin-top: -24px;
  overflow: visible;
}

.footer-location-mobile__map .footer-location__pin-spin {
  width: 32px;
  height: 32px;
}

.footer-location-mobile__map .footer-location__tab {
  display: inline-flex;
  left: 50%;
  top: auto;
  bottom: calc(100% + 6px);
  transform: translate(-50%, 4px);
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: #666;
  border: 0.8px solid #c8c9ec;
  border-radius: 8px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
}

.footer-location-mobile__map .footer-location__pin.is-active .footer-location__tab,
.footer-location-mobile__map .footer-location__pin:focus-visible .footer-location__tab {
  transform: translate(-50%, 0);
}

.footer-location-mobile__map .footer-location__tab svg {
  width: 12px;
  height: 12px;
  color: #5c5dbc;
}

.footer-location-mobile__content {
  flex: 0 0 auto;
  padding: 32px 32px 8px;
}

.footer-location-mobile__content h2 {
  max-width: 270px;
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -1px;
  color: #fff;
  text-transform: none;
}

.footer-location-mobile__content p {
  max-width: 306px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #fff;
}


/* ----- Home Visit ----- */

.home-visit {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  background: #2c2d88;
}

.home-visit__bg {
  position: absolute;
  inset: 0;
  background:
    url("../images/home/hearing-care-cta.webp") right bottom / auto 100% no-repeat,
    linear-gradient(270deg, #3738b0 5.58%, #17184a 100%);
  pointer-events: none;
}

.home-visit__container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 400px;
}

.home-visit__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 530px;
  padding-block: var(--space-8);
}

.home-visit__content h2 {
  margin: 0 0 24px;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  letter-spacing: -1px;
  color: var(--color-white);
}

.home-visit__content > p {
  margin: 0 0 32px;
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-white);
}

.home-visit__cta {
  gap: 8px;
  padding: 16px 30px;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

.home-visit__cta:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

.home-visit__cta svg {
  flex-shrink: 0;
}


/* ----- Home visit mobile ----- */

.home-visit-mobile {
  background: linear-gradient(270deg, #3738b0 5.58%, #17184a 100%);
  padding: 50px 0;
}

.home-visit-mobile__media {
  position: relative;
  overflow: hidden;
}

.home-visit-mobile__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  margin-inline: auto;
  object-fit: contain;
  object-position: center bottom;
}

.home-visit-mobile__body {
  padding: 28px 0 44px;
  padding-bottom: 0!important;
}

.home-visit-mobile__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 362px;
  margin-inline: auto;
  text-align: center;
}

.home-visit-mobile__content h2 {
  margin: 0 0 16px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -1px;
  color: #fff;
}

.home-visit-mobile__content > p {
  margin: 0 0 26px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -1px;
  color: #fff;
}

.home-visit-mobile__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 356px;
  min-height: 55px;
  padding: 16px 30px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: #3b3cb4;
  text-decoration: none;
  background: #fff;
  border-radius: 30px;
}

.home-visit-mobile__cta:hover {
  color: #3b3cb4;
  opacity: 0.94;
}

.home-visit-mobile__cta svg {
  flex-shrink: 0;
}

.home-visit-mobile__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 356px;
}

.home-visit-mobile__cta--outline {
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.home-visit-mobile__cta--outline:hover {
  color: #3b3cb4;
  background: #ffffff;
  border-color: #ffffff;
  opacity: 1;
}


/* ----- Testimonials ----- */

.testimonials-section {
  background: #f9f9f9;
}

.testimonials-section > .container {
  max-width: min(1400px, calc(100% - 48px));
  width: 100%;
}

.testimonials-section .section-label {
  padding: 10px 20px;
  margin-bottom: var(--space-3);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: #333333;
  background: #f4f4f4;
  border: 1px solid #e4e4e4;
  border-radius: 30px;
}

.testimonials-section .section-title {
  letter-spacing: -1px;
  margin-bottom: 0;
}

.testimonials-section .section-header {
  margin-bottom: var(--space-8);
}

.testimonials__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.testimonials__track {
  display: flex;
  will-change: transform;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonials__slide {
  display: grid;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.05fr) minmax(0, 1fr);
  grid-template-rows: 340px;
  gap: clamp(16px, 1.4vw, 24px);
  align-items: stretch;
}

@media (min-width: 1400px) {
  .testimonials-section > .container {
    max-width: min(1520px, calc(100% - 64px));
  }

  .testimonials__slide {
    grid-template-rows: 360px;
    gap: 24px;
  }
}

.testimonials__video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #111 url("../images/home/video-thumbnail.png") center / cover no-repeat;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.testimonials__card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 24px 20px;
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.testimonials__stars {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.testimonials__card > p {
  flex: 1;
  margin: 0;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.5;
  color: #444444;
}

.testimonials__card footer {
  margin-top: auto;
  padding-top: 20px;
}

.testimonials__card footer strong {
  display: block;
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  line-height: 22px;
  letter-spacing: -0.4px;
  color: #333333;
}

.testimonials__card footer span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #666666;
}

.testimonials__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  background: #111;
}

.testimonials__mute-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.testimonials__mute-btn:hover,
.testimonials__mute-btn:focus-visible {
  background: rgba(0, 0, 0, 0.75);
  outline: none;
}

.testimonials__mute-btn-icon {
  display: none;
  line-height: 0;
}

.testimonials__mute-btn:not(.is-muted) .testimonials__mute-btn-icon--on,
.testimonials__mute-btn.is-muted .testimonials__mute-btn-icon--off {
  display: block;
}

.testimonials__controls {
  margin-top: 40px;
  padding: 5px;
  min-width: 165px;
  background: #f0f0f0;
  border-radius: 30px;
  gap: 8px;
}

.testimonials__controls .about-carousel__btn:disabled {
  background: var(--color-white);
  color: #666666;
}

.testimonials__controls .about-carousel__btn:not(:disabled) {
  background: var(--color-secondary);
  color: var(--color-white);
}


/* ----- Home testimonials mobile ----- */

.home-testimonials-mobile {
  background: #fafafa;
  padding-block: 62px 48px;
}

.home-testimonials-mobile .container {
  padding-inline: 20px;
}

.home-testimonials-mobile__header {
  margin-bottom: 32px;
  text-align: center;
}

.home-testimonials-mobile__label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  color: #333;
}

.home-testimonials-mobile__title {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -1px;
  color: #2c2d88;
}

.home-testimonials-mobile__viewport {
  overflow: hidden;
  width: 100%;
  max-width: 362px;
  margin-inline: auto;
}

.home-testimonials-mobile__track {
  display: flex;
  flex-direction: row;
  gap: 30px;
  transition: transform 0.35s ease;
  will-change: transform;
}

.home-testimonials-mobile__slide {
  flex: 0 0 100%;
  width: 100%;
  max-width: 362px;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  box-sizing: border-box;
}

.home-testimonials-mobile__slide--video {
  height: 260px;
  background: #111;
  padding: 0;
}

.home-testimonials-mobile__video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.home-testimonials-mobile__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-testimonials-mobile__video-wrap .testimonials__mute-btn {
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
}

.home-testimonials-mobile__slide--card {
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.home-testimonials-mobile__stars {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
}

.home-testimonials-mobile__slide--card > p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #666;
}

.home-testimonials-mobile__slide--card footer {
  margin-top: auto;
}

.home-testimonials-mobile__slide--card footer strong {
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: #333;
}

.home-testimonials-mobile__slide--card footer span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: #666;
}

.home-testimonials-mobile__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

.home-testimonials-mobile__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #2c2d88;
  border-radius: 300px;
  background: #fff;
  color: #2c2d88;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.home-testimonials-mobile__btn--next,
.home-testimonials-mobile__btn.is-active {
  background: #2c2d88;
  color: #fff;
}

.home-testimonials-mobile__btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.home-testimonials-mobile__btn:not(:disabled):hover {
  opacity: 0.9;
}

/* Testimonials mobile slider — iPad: 2 slides visible */
@media (min-width: 768px) and (max-width: 991.98px) {
  .home-testimonials-mobile .container {
    padding-inline: 32px;
  }

  .home-testimonials-mobile__viewport {
    max-width: 100%;
  }

  .home-testimonials-mobile__slide {
    max-width: none;
  }

  .home-testimonials-mobile__slide--video {
    height: 300px;
  }

  .home-testimonials-mobile__slide--card {
    height: 300px;
    padding: 40px 36px;
  }

  .home-testimonials-mobile__slide--card > p {
    font-size: 18px;
  }
}


/* ----- Social ----- */

.social-section {
  background: #fff;
}

.social-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 52px;
}

.social-section__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #333;
  text-transform: uppercase;
  background: #f4f4f4;
  border: 1px solid #e4e4e4;
  border-radius: 30px;
}

.social-section__title {
  margin: 0;
  max-width: 603px;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -1px;
  color: #2c2d88;
  text-align: center;
}

.social-section__profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  max-width: 1114px;
  min-height: 126px;
  margin: 0 auto 32px;
  padding: 13px 30px;
  background: rgba(217, 217, 217, 0.3);
  border-radius: 300px;
}

.social-section__profile-main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.social-section__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  background: #fff;
  border-radius: 50%;
}

.social-section__avatar img {
  width: 68px;
  height: auto;
  max-height: 38px;
  object-fit: contain;
}

.social-section__profile-name {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.5px;
  color: #009c43;
}

.social-section__profile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  line-height: 30px;
  letter-spacing: -0.5px;
  color: #666;
}

.social-section__ig-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 222px;
  height: 52px;
  padding: 0 22px;
  font-size: 16px;
  line-height: 22px;
  color: #fff;
  background: #2c2d88;
  border-radius: 40px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.social-section__ig-btn:hover {
  color: #fff;
  opacity: 0.92;
}

.social-section__slider {
  max-width: 1141px;
  margin-inline: auto;
  overflow: hidden;
}

.social-section__viewport {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  touch-action: pan-y;
}

.social-section__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  width: max-content;
  max-width: none;
  padding: 20px 0;
  transition: transform 0.4s ease;
  will-change: transform;
}

.social-section__slide {
  flex: 0 0 271px;
  width: 271px;
  max-width: 271px;
  min-width: 271px;
}

.ig-post {
  width: 271px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ededed;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.07);
}

.ig-post__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 39px;
  padding: 0 10px 0 7px;
  background: #fff;
  border-bottom: 1px solid #ededed;
  box-shadow: 0 0.24px 0 rgba(60, 60, 67, 0.29);
}

.ig-post__user-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ig-post__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 50%;
  overflow: hidden;
}

.ig-post__avatar img {
  width: 16px;
  height: auto;
}

.ig-post__user {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 9.4px;
  font-weight: 600;
  line-height: 13px;
  color: #262626;
}

.ig-post__loc {
  margin: 0;
  font-size: 8px;
  line-height: 9px;
  color: #262626;
}

.ig-post__more {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ig-post__more::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  background: #262626;
  border-radius: 50%;
  box-shadow: -5px 0 0 #262626, 5px 0 0 #262626;
}

.ig-post__media {
  position: relative;
  width: 271px;
  height: 271px;
  overflow: hidden;
  background: #f4f4f4;
}

.ig-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-post__count {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 7px;
  font-size: 8.7px;
  line-height: 10px;
  color: #f9f9f9;
  background: rgba(18, 18, 18, 0.7);
  border-radius: 9px;
}

.ig-post__foot {
  padding: 10px 11px 12px;
  background: #fff;
  border-top: 1px solid #ededed;
}

.ig-post__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ig-post__actions-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ig-post__likes {
  margin: 0 0 6px;
  font-size: 9.4px;
  line-height: 13px;
  color: #262626;
}

.ig-post__likes strong {
  font-weight: 600;
}

.ig-post__caption {
  margin: 0 0 8px;
  font-size: 9.4px;
  font-weight: 600;
  line-height: 13px;
  color: #262626;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ig-post__caption strong {
  font-weight: 600;
}

.ig-post__date {
  display: block;
  font-size: 8px;
  line-height: 9px;
  letter-spacing: 0.04px;
  color: rgba(0, 0, 0, 0.4);
}

.social-section__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 28px;
}

.social-section__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #d9d9d9;
  cursor: pointer;
}

.social-section__dot.is-active {
  background: #2c2d88;
}


/* ----- Trusted Brands ----- */

.brands-section {
  background: var(--color-white);
}

.brands-section__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  min-height: 284px;
  padding: 40px clamp(24px, 4vw, 56px);
  overflow: hidden;
  background: #f3f3f3;
  border-radius: 20px;
}

.brands-section__element {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(225px, 32%);
  height: auto;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.brands-section__title {
  position: relative;
  z-index: 1;
  flex: 0 1 284px;
  margin: 0;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  letter-spacing: -1px;
  color: var(--color-secondary);
}

.brands-section__logos {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 613px;
  max-width: 613px;
  margin-left: auto;
}

.brands-section__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.brands-section__row--bottom {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: calc(75% + 5px);
}

.brands-section__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 0;
  overflow: hidden;
  background: var(--color-white);
  border-radius: 6px;
}

.brands-section__logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 76px;
  object-fit: contain;
}


/* ----- Contact ----- */

.contact-section {
  background: var(--color-white);
}

.contact-section__inner {
  max-width: 737px;
  margin-inline: auto;
}

.contact-section__title {
  margin: 0 0 40px;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  letter-spacing: -1px;
  text-align: center;
  color: var(--color-secondary);
}

.contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form__field--full {
  grid-column: 1 / -1;
}

.contact-form__label {
  margin: 0;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: #333333;
}

.contact-form__input {
  width: 100%;
  height: 40px;
  padding: 0 13px;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  color: #495057;
  background: rgba(244, 244, 244, 0.5);
  border: 1px solid #d2d6da;
  border-radius: 8px;
  appearance: none;
}

.contact-form__input::placeholder {
  color: #495057;
  opacity: 0.5;
}

.contact-form__input:focus {
  outline: 1px solid var(--color-primary);
  border-color: var(--color-primary);
}

.contact-form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23495057' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.contact-form__select:invalid {
  color: rgba(73, 80, 87, 0.5);
}

.contact-form__textarea {
  height: 106px;
  padding: 15px 13px;
  resize: vertical;
  line-height: 1.5;
}

.contact-form__actions {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.contact-form__submit {
  min-width: 120px;
  padding: 16px 30px;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
}


/* ----- Footer ----- */

.site-footer {
  background:#F2F5FC;
}

.site-footer__main {
  position: relative;
  padding: var(--space-13) 0 var(--space-10);
  background: #F2F5FC;
}

.site-footer__stripe {
  position: absolute;
  left: 0;
  right: 0;
  height: 25px;
}

.site-footer__stripe--green {
  top: 0;
  background: var(--color-accent);
}

.site-footer__stripe--navy {
  top: 25px;
  background: var(--color-secondary);
}

.site-footer__grid {
  padding-top: var(--space-8);
}

.footer_logo_wrapper{
  width:220px;
}

.site-footer__logo {
  display: inline-block;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-white);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  width:100%;
  height:100%;
}

.site-footer__logo img{
  height:100px;
}

.site-footer__links li,
.site-footer__contact li {
  margin-bottom: var(--space-3);
}

.site-footer__links a,
.site-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: #2C2D88;
}

.site-footer__links a:hover,
.site-footer__contact a:hover {
  color: var(--color-primary);
}

.site-footer__contact svg {
  flex-shrink: 0;
  color: var(--color-secondary);
}

.site-footer__bottom {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border-light);
}

.site-footer__bottom p {
  font-size: var(--font-size-sm);
  color: #2C2D88;
  text-align: start;
  margin: 0;
}

/* ----- Floating WhatsApp ----- */

.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  color: #fff;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wa-float:hover {
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.5);
}

.wa-float:focus-visible {
  outline: 3px solid #128c7e;
  outline-offset: 3px;
}

.wa-float__icon {
  position: relative;
  z-index: 2;
  display: block;
  flex-shrink: 0;
}

.wa-float__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  animation: wa-float-pulse 2s ease-out infinite;
  pointer-events: none;
}

.wa-float__pulse--delay {
  animation-delay: 1s;
}

@keyframes wa-float-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.75);
    opacity: 0;
  }
  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float__pulse {
    animation: none;
    display: none;
  }
}

@media (max-width: 767.98px) {
  .wa-float {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
  }

  .wa-float__icon {
    width: 24px;
    height: 24px;
  }
}


/* ==========================================================================
   About Page
   ========================================================================== */

/* ----- Page Banner ----- */

.page-banner {
  position: relative;
  min-height: 650px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #1f262c;
}

.about-feature img,
.hl-intervention__media img,
.hl-causes__media img,
.hl-ear__media img,
.hl-challenges__diagram img {
  max-width: 100%;
  height: auto;
  width: 100%;
}

.page-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-banner > picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.page-banner > picture .page-banner__bg {
  position: absolute;
  inset: 0;
}

.page-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(70, 62, 41, 0.7) 0%,
    rgba(70, 62, 41, 0) 72%
  );
  z-index: 1;
}

.page-banner__pin {
  position: absolute;
  z-index: 2;
  width: 73px;
  height: auto;
  pointer-events: none;
}

.page-banner__pin--left {
  top: 12%;
  left: 54%;
  transform: scaleX(-1);
}

.page-banner__pin--right {
  top: 10%;
  right: 6%;
}

.page-banner__content {
  position: relative;
  z-index: 3;
  max-width: 635px;
  padding: var(--space-12) 0;
}

.page-banner__content h1 {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  line-height: 1.3;
  letter-spacing: -1px;
  margin-bottom: var(--space-7);
}


/* ----- Bringing Life Back ----- */

.about-bringing__intro {
  margin-bottom: var(--space-10);
}

.about-bringing__intro .section-title {
  color: var(--color-secondary);
  max-width: 640px;
  margin-bottom: var(--space-6);
}

.about-bringing__intro p {
  font-size: var(--font-size-lg);
  color: #444444;
  line-height: 1.5;
  margin-bottom: var(--space-4);
  max-width: 1240px;
}

.about-bringing__intro p:last-child {
  margin-bottom: 0;
}


/* ----- About Gallery Carousel ----- */

.about-carousel {
  position: relative;
}

.about-carousel__track {
  overflow: hidden;
  width: 100%;
}

.about-carousel__grid {
  display: flex;
  gap: var(--space-4);
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}

.about-carousel__item {
  flex: 0 0 auto;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 406 / 290;
  background: var(--color-gray-200);
}

.about-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  width: fit-content;
  margin-inline: auto;
  padding: var(--space-1) var(--space-2);
  background: var(--color-white);
  border-radius: var(--radius-pill);
  min-height: 40px;
}

.about-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-pale);
  color: var(--color-text-secondary);
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    opacity var(--transition-base);
}

.about-carousel__btn:not(:disabled) {
  background: var(--color-secondary);
  color: var(--color-white);
}

.about-carousel__btn:not(:disabled):hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.about-carousel__btn:disabled {
  opacity: 1;
  cursor: not-allowed;
  background: var(--color-bg-pale);
  color: var(--color-text-secondary);
}

.about-carousel__status {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: #666666;
  min-width: 3.5rem;
  text-align: center;
}


/* ----- About Feature Image ----- */

.about-feature__media {
  position: relative;
  min-height: 320px;
}

.about-feature__media img:first-child {
  width: 100%;
  min-height: 320px;
  max-height: 550px;
  object-fit: cover;
  filter: grayscale(1);
}

.about-feature__pin {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.about-feature__pin--left {
  top: 30%;
  left: 10%;
  width: 74px;
  height: auto;
}

.about-feature__pin--right {
  top: 5%;
  left: 44%;
  width: 133px;
  height: auto;
}


/* ----- Our Story & Philosophy ----- */

.about-story__title {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
  text-transform: none;
  line-height: var(--line-height-tight);
  letter-spacing: -0.5px;
  margin-bottom: 0;
}

.about-story__text {
  font-size: var(--font-size-lg);
  color: #444444;
  line-height: 1.5;
}

.about-story__divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-9) 0;
  opacity: 1;
}


/* ----- Don’t Miss a Beat / Get in Touch ----- */

.about-touch .section-title {
  color: var(--color-secondary);
}

.about-touch .section-desc {
  color: #444444;
}

.about-touch__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: end;
  max-width: 1156px;
  margin-inline: auto;
}

.about-touch__item {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-gray-200);
}

.about-touch__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-touch__item--side {
  aspect-ratio: 364 / 367;
}

.about-touch__item--center {
  aspect-ratio: 364 / 401;
}

.about-touch__divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-10) 0 var(--space-7);
  opacity: 1;
}

.about-touch__footer-text {
  max-width: 661px;
  margin-inline: auto;
  font-size: var(--font-size-lg);
  color: #444444;
  line-height: 1.5;
}


/* ----- About Contact Form (Section 9) ----- */

.about-contact {
  background: var(--color-white);
}

.about-contact__inner {
  max-width: 737px;
  margin-inline: auto;
}

.about-contact__title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
  text-transform: none;
  text-align: center;
  line-height: 1.4;
  letter-spacing: -1px;
  margin-bottom: var(--space-10);
}

.about-contact__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: #333333;
  line-height: var(--line-height-base);
}

.about-contact__input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  background: rgba(244, 244, 244, 0.5);
  border: 1px solid #D2D6DA;
  border-radius: var(--radius-sm);
  outline: none;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
  -webkit-appearance: none;
  appearance: none;
}

.about-contact__input::placeholder {
  color: #495057;
  opacity: 0.5;
}

.about-contact__input:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}

.about-contact__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23495057' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: var(--space-9);
  cursor: pointer;
}

.about-contact__select:invalid,
.about-contact__select option[value=""] {
  color: #495057;
  opacity: 0.5;
}

.about-contact__select option {
  color: var(--color-text);
  opacity: 1;
}

.about-contact__textarea {
  height: 106px;
  padding: var(--space-3);
  resize: vertical;
  line-height: var(--line-height-base);
}

.about-contact__submit {
  margin-top: var(--space-4);
  min-width: 334px;
  padding: var(--space-3) var(--space-8);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
}


/* ==========================================================================
   Contact Page
   ========================================================================== */

/* ----- Contact Booking Hero ----- */

.contact-booking {
  background: var(--color-white);
  padding-top: var(--space-12);
  padding-bottom: var(--space-10);
}

.contact-booking__intro {
  max-width: 760px;
  margin: 0 auto var(--space-10);
}

.contact-booking__title {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
  line-height: 1.25;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: var(--space-4);
}

.contact-booking__lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: 0;
}

/* Frame 2147240466 — outer card */
.contact-booking__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 28px;
  width: 100%;
  margin-inline: auto;
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid #EEEEEE;
  border-radius: 20px;
}

/* Frame 2147240485 — left column */
.contact-booking__left {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  width: 100%;
}

/* Frame 2147240488 — clinic panel */
.contact-booking__clinic {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #F9F9FF;
  border: 1px solid #E1E2FF;
  box-shadow: 0 0 24px rgba(44, 45, 136, 0.1);
  border-radius: 20px;
  overflow: hidden;
}

/* Purple hero — doctor.webp fills panel */
.contact-booking__hero {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-height: 381px;
  padding: 24px;
  color: #FFFFFF;
  overflow: hidden;
  isolation: isolate;
}

.contact-booking__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/contact/doctor.webp") right bottom / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.95;
  pointer-events: none;
}

.contact-booking__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(55, 61, 200, 0) 45%, #1B1E62 100%);
  pointer-events: none;
}

.contact-booking__badge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: #000000;
  background: #FFFFFF;
  box-shadow: 0 0 29.9px rgba(50, 185, 91, 0.12);
  border-radius: 50px;
}

.contact-booking__badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #009C43;
  flex-shrink: 0;
}

.contact-booking__branches {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 345px;
  width: 100%;
}

.contact-booking__aside-label {
  margin: 0;
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: #FFFFFF;
}

.contact-booking__chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 12px 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-booking__chips li {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  border-radius: 30px;
  white-space: nowrap;
}

.contact-booking__aside-headline {
  position: relative;
  z-index: 2;
  margin: auto 0 0;
  max-width: 280px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: #FFFFFF;
}

/* Visit Our Clinic copy under hero */
.contact-booking__clinic-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 24px 24px;
  background: #FFFFFF;
}

.contact-booking__clinic-copy strong {
  font-size: 24px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: #000000;
}

.contact-booking__clinic-copy p {
  margin: 0;
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: #666666;
}

/* Frame 2147240489 — doorstep panel */
.contact-booking__home {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: 1 1 auto;
  width: 100%;
  min-height: 180px;
  padding: 24px;
  background: #F9F9FF;
  border: 1px solid #E1E2FF;
  border-radius: 20px;
}

.contact-booking__home-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: center;
}

.contact-booking__home-copy strong {
  font-size: 24px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: #000000;
}

.contact-booking__home-copy p {
  margin: 0;
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: #666666;
}

.contact-booking__home-btn {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 534px;
  height: 48px;
  padding: 16px 30px;
  font-family: var(--font-family-base);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: #3B3CB4;
  text-decoration: none;
  background: transparent;
  border: 1px solid #3B3CB4;
  border-radius: 12px;
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

.contact-booking__home-btn:hover {
  background: #3B3CB4;
  color: #FFFFFF;
}

/* Frame 2147240483 — form card */
.contact-booking__form-wrap {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  width: 100%;
  padding: 24px;
  background: #FFFFFF;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  filter: drop-shadow(0 0 24px rgba(44, 45, 136, 0.1));
}

.contact-booking__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.contact-booking__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.contact-booking__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 19px;
  width: 100%;
}

.contact-booking__row > .contact-booking__field {
  flex: 1 1 0;
  min-width: 0;
}

.contact-booking__label {
  display: block;
  margin: 0;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: #444444;
}

.contact-booking__input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 48px;
  padding: 12px 20px;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-text);
  background: #FFFFFF;
  border: 1px solid #D8D8D8;
  border-radius: 12px;
  outline: none;
  transition: border-color var(--transition-base);
  -webkit-appearance: none;
  appearance: none;
}

.contact-booking__input::placeholder {
  color: #ADADAD;
}

.contact-booking__input:focus {
  border-color: var(--color-primary);
}

.contact-booking__textarea {
  height: 98px;
  resize: vertical;
}

.contact-booking__select {
  color: #444444;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%232C2D88' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 48px;
  cursor: pointer;
}

.contact-booking__appt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.contact-booking__appt-title {
  margin: 0;
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: #434343;
}

.contact-booking__field-icon {
  position: relative;
  width: 100%;
}

.contact-booking__field-icon svg {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #444444;
  pointer-events: none;
}

.contact-booking__field-icon .contact-booking__input {
  padding-right: 48px;
}

.contact-booking__submit {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 16px 30px;
  font-family: var(--font-family-base);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: #FFFFFF;
  background: #3B3CB4;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.contact-booking__submit:hover {
  background: var(--color-primary-hover);
  color: #FFFFFF;
}


/* ----- Contact Branches Locator ----- */

.contact-branches {
  background: #fff;
  padding-block: var(--space-10) var(--space-12);
}

/* Two-column row with visible gutter between cards */
.contact-branches__panel {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
}

/* Left column — Figma Frame 2147240541 */
.contact-branches__list-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  flex: none;
  flex-grow: 0;
  flex-shrink: 0;
  width: 350px;
  min-height: 596px;
  padding: 0;
  gap: 4px;
  background: #F9F9FF;
  border-radius: var(--radius-lg);
  box-sizing: border-box;
}

.contact-branches__heading {
  font-size: 32px;
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  text-transform: none;
  margin: 0;
  padding: 20px 15px 20px 18px;
  line-height: 1.3;
  width: 100%;
  box-sizing: border-box;
}

.contact-branches__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 0 15px 0 15px;
  list-style: none;
}

.contact-branches__list > li {
  width: 100%;
}

.contact-branches__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  text-align: left;
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  color: #333333;
  background: transparent;
  border: 0;
  border-radius: 12px;
  transition:
    background-color var(--transition-base),
    font-weight var(--transition-base);
}

.contact-branches__item-icon {
  display: none;
  flex-shrink: 0;
  color: var(--color-secondary);
  line-height: 0;
}

.contact-branches__item-icon img {
  display: block;
  width: 24px;
  height: 24px;
}

.contact-branches__item.is-active {
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  background: #FFFFFF;
}

.contact-branches__item.is-active .contact-branches__item-icon {
  display: inline-flex;
}

.contact-branches__item:hover:not(.is-active) {
  background: #F2F5FC;
}

.contact-branches__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Right white card */
.contact-branches__detail {
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px;
  background: #F9F9FF;
  border-radius: var(--radius-lg);
}

.contact-branches__detail-title {
  font-size: 28px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  text-transform: none;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.3;
}

.contact-branches__map {
  overflow: hidden;
  border-radius: 16px;
  background: #F2F5FC;
  margin-bottom: 20px;
}

.contact-branches__map iframe {
  display: block;
  width: 100%;
  min-height: 400px;
  border: 0;
}

.contact-branches__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

/* Figma Frame 2147240543 — column card */
.contact-branches__meta-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 205px;
  padding: 20px;
  background: #FFFFFF;
  border-radius: 12px;
  box-sizing: border-box;
}

.contact-branches__meta-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #111111;
  line-height: 0;
}

.contact-branches__meta-icon svg {
  width: 24px;
  height: 24px;
}

.contact-branches__meta-label {
  display: block;
  margin: 0;
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  line-height: 1.3;
}

.contact-branches__meta-body {
  width: 100%;
}

.contact-branches__meta-body p,
#branchDetailAddress {
  margin: 0;
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  color: #555555;
  line-height: 1.55;
}

.contact-branches__meta-body a {
  display: block;
  font-size: 20px;
  color: #555555;
  line-height: 1.55;
}

.contact-branches__meta-body a:hover {
  color: var(--color-primary);
}


/* ==========================================================================
   Testimonials Page
   ========================================================================== */

/* ----- Intro ----- */

.testimonials-intro {
  background: #F7F7F7;
  padding: 100px 0 40px;
}

.testimonials-intro__content {
  max-width: 775px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  text-align: center;
}

.testimonials-intro__eyebrow {
  margin: 0;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  color: #333333;
}

.testimonials-intro__title {
  margin: 0;
  width: 100%;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -1px;
  text-align: center;
  text-transform: none;
  color: #2C2D88;
}

.testimonials-intro__lead {
  margin: 0;
  max-width: 559px;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  text-align: center;
  color: #444444;
}

/* ----- Cards grid ----- */

.testimonials-grid {
  background: var(--color-bg-pale);
  padding-top: var(--space-8);
  padding-bottom: var(--space-10);
}

.testimonials-grid__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-10);
}

.testimonials-grid__more[hidden] {
  display: none !important;
}

.testimonials-grid__load-more {
  min-width: 148px;
  min-height: 48px;
  padding: 12px 32px;
  border: 0;
  background: var(--color-primary);
  color: #fff;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

.testimonials-grid__load-more:hover,
.testimonials-grid__load-more:focus-visible {
  background: var(--color-secondary);
  color: #fff;
}

.testimonials-grid [data-testimonial-item].is-hidden,
.testimonials-grid [data-testimonial-item][hidden] {
  display: none !important;
}

.testimonials-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 100%;
  padding: 32px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.testimonials-card__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.testimonials-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: #EDEDED;
  flex-shrink: 0;
}

.testimonials-card__quote {
  margin: 0;
}

.testimonials-card__quote p {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.testimonials-card__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.testimonials-card__stars {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 0;
}

.testimonials-card__author {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.testimonials-card__name {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 22px;
  letter-spacing: -0.4px;
  color: #333333;
}

.testimonials-card__place {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ----- Success CTA card ----- */

.testimonials-cta {
  padding-block: var(--space-8) var(--space-10);
  background: #F7F7F7;
}

.testimonials-cta__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 316px;
  padding: 48px 60px;
  overflow: hidden;
  border-radius: 20px;
  background-color: #17184A;
  background-image: url("../images/testimonials/testimonials-bg.svg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

.testimonials-cta__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  max-width: 625px;
  text-align: left;
}

.testimonials-cta__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.testimonials-cta__title {
  margin: 0;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -1px;
  text-transform: none;
  color: #ffffff;
}

.testimonials-cta__text {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
}

.testimonials-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.testimonials-cta__btn {
  min-height: 55px;
  padding: 16px 30px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.testimonials-cta__btn--solid {
  background: #ffffff;
  color: #3B3CB4;
  border-color: #ffffff;
}

.testimonials-cta__btn--solid:hover {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

.testimonials-cta__btn--outline {
  background: #3B3CB4;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
}

.testimonials-cta__btn--outline:hover {
  background: #ffffff;
  color: #3B3CB4;
  border-color: #ffffff;
}

/* ----- FAQ ----- */

.testimonials-faq {
  background: var(--color-white);
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
}

.testimonials-faq__title {
  margin: 0 auto var(--space-8);
  max-width: 640px;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  letter-spacing: -1px;
  text-transform: none;
  color: var(--color-secondary);
}

.testimonials-faq__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1030px;
  margin-inline: auto;
}

.testimonials-faq__item {
  background: #F7F7F7;
  border-radius: var(--radius-lg);
  padding: 32px;
}

.testimonials-faq__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  padding: 0;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.testimonials-faq__trigger * {
  pointer-events: none;
}

.testimonials-faq__question {
  flex: 1 1 auto;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: #666666;
}

.testimonials-faq__item.is-open .testimonials-faq__question {
  color: var(--color-accent);
}

.testimonials-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 4px;
  border-radius: var(--radius-full);
  background: var(--color-secondary);
}

.testimonials-faq__icon-minus {
  display: none;
}

.testimonials-faq__item.is-open .testimonials-faq__icon-plus {
  display: none;
}

.testimonials-faq__item.is-open .testimonials-faq__icon-minus {
  display: block;
}

.testimonials-faq__panel {
  margin-top: 27px;
}

.testimonials-faq__panel[hidden] {
  display: none !important;
}

.testimonials-faq__panel p {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.testimonials-faq__trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 4px;
}


/* ==========================================================================
   Hearing Loss Page
   ========================================================================== */

.hl-section-title {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: -1px;
  text-transform: none;
  color: var(--color-secondary);
  margin-bottom: var(--space-6);
}

.hl-banner .page-banner__overlay {
  background: linear-gradient(
    90deg,
    rgba(44, 45, 136, 0.55) 0%,
    rgba(44, 45, 136, 0.2) 42%,
    rgba(0, 0, 0, 0.08) 70%,
    rgba(0, 0, 0, 0.05) 100%
  );
}

.hl-banner > .container {
  position: relative;
  z-index: 3;
  width: 100%;
}

.hl-banner__layout {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 0.95fr);
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  min-height: 560px;
  padding-block: var(--space-11);
}

.hl-banner__content {
  max-width: 520px;
}

.hl-banner__content h1 {
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  line-height: 1.25;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: var(--space-7);
}

.hl-banner__aside {
  /* Figma cluster: 412 × 351 (from left 975 / top 252) */
  --hl-cluster-w: 412px;
  --hl-cluster-h: 351px;
  position: relative;
  width: var(--hl-cluster-w);
  height: var(--hl-cluster-h);
  margin-left: auto;
  flex-shrink: 0;
}

.hl-banner__card {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  margin: 0;
}

.hl-banner__card--glass {
  color: var(--color-white);
  background: linear-gradient(
    122.22deg,
    rgba(0, 0, 0, 0.4) 7.36%,
    rgba(102, 102, 102, 0.4) 92.64%
  );
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8.85px);
  -webkit-backdrop-filter: blur(8.85px);
  border-radius: 17.7px;
  box-shadow: none;
}

/* Untreated — Figma: 266×183 at (146, 0) */
.hl-banner__card--untreated {
  left: 146px;
  top: 0;
  width: 266px;
  height: 183px;
  padding: 20px 10px 20px 10px;
  gap: 0;
  z-index: 3;
}

.hl-banner__card--untreated .hl-banner__card-icon {
  margin-bottom: 23px;
}

.hl-banner__card--untreated .hl-banner__card-title {
  margin-bottom: 12px;
}

/* Aids — Figma: 208×219 at (0, 132) */
.hl-banner__card--aids {
  left: 0;
  top: 132px;
  width: 208px;
  height: 219px;
  padding: 10px 18px 22px 21px;
  gap: 0;
  z-index: 2;
  color: #353535;
  background-color: transparent;
  background-image: url("../images/hearing-loss/hl-hearing-aid-bg.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.hl-banner__card--aids .hl-banner__aid {
  margin-bottom: 8px;
}

.hl-banner__card--aids .hl-banner__aid img {
  width: 72px;
  height: auto;
  display: block;
}

.hl-banner__card--aids .hl-banner__card-title {
  margin-bottom: 10px;
  max-width: 142px;
}

.hl-banner__card--aids .hl-banner__card-text {
  max-width: 154px;
}

/* Prevalence — Figma: 188×152 at (224, 199) */
.hl-banner__card--prevalence {
  left: 224px;
  top: 199px;
  width: 188px;
  height: 152px;
  padding: 21px 17px 18px;
  gap: 0;
  z-index: 3;
}

.hl-banner__card--prevalence .hl-banner__people {
  margin-bottom: 14px;
}

.hl-banner__card-icon,
.hl-banner__aid,
.hl-banner__people {
  flex-shrink: 0;
  display: inline-flex;
  line-height: 0;
}

.hl-banner__card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  color: var(--color-white);
}

.hl-banner__card-title--dark {
  color: #353535;
}

.hl-banner__card-text {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-white);
}

.hl-banner__card-text--dark {
  color: #353535;
}

.hl-banner__card-text--single {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  max-width: 134px;
}

/* ----- Understanding ----- */

.hl-understanding {
  background: #F7F7F7;
  padding-block: 100px;
}

.hl-understanding__title {
  max-width: 835px;
  margin: 0 auto 42px;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -1px;
  text-align: center;
  text-transform: none;
  color: var(--color-secondary);
}

.hl-understanding__body {
  display: flex;
  align-items: flex-start;
  gap: 38px;
}

.hl-understanding__media {
  flex: 0 0 400px;
  width: 400px;
  max-width: 100%;
  height: 272px;
  margin: 0;
  overflow: hidden;
  border-radius: 13.5px;
  background: rgba(183, 252, 204, 0.2);
}

.hl-understanding__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* mix-blend-mode: luminosity; */
}

.hl-understanding__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 802px;
  padding-top: 7px;
}

.hl-understanding__copy p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  color: #444444;
  text-align: justify;
}

.hl-understanding__rule {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid rgba(102, 102, 102, 0.2);
}

/* ----- Early signs carousel ----- */

.hl-signs .section-title {
  color: var(--color-secondary);
}

.hl-signs__track {
  overflow: hidden;
  width: 100%;
}

.hl-signs__grid {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}

.hl-signs__item {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  align-self: stretch;
  height: auto;
}

.hl-signs__card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #F7F7F7;
}

.hl-signs__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
  padding: var(--space-7);
}

.hl-signs__card-body h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  color: var(--color-secondary);
  text-transform: none;
}

.hl-signs__card-body p {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.hl-signs__card-media {
  margin: 0;
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.hl-signs__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hl-signs__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 165px;
  height: 40px;
  margin: 40px auto 0;
  padding: 5px;
  box-sizing: border-box;
  background: #f3f3f3;
  border-radius: 30px;
}

.hl-signs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 30px;
  padding: 0;
  color: #666666;
  background: #ffffff;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

.hl-signs__btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.hl-signs__btn--next:not(:disabled) {
  background: #2c2d88;
  color: #ffffff;
}

.hl-signs__btn--prev:not(:disabled) {
  background: #ffffff;
  color: #666666;
}

.hl-signs__btn--prev:not(:disabled):hover {
  background: #ffffff;
  color: #2c2d88;
}

.hl-signs__btn--next:not(:disabled):hover {
  background: #23246e;
  color: #ffffff;
}

.hl-signs__btn:disabled {
  background: #ffffff;
  color: #666666;
  opacity: 1;
  cursor: not-allowed;
}

.hl-signs__status {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: #666666;
}

/* ----- Check Your Hearing ----- */

.hl-check {
  background: #f7f7f7;
  padding-block: 72px;
}

.hl-check__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 42px;
  text-align: center;
}

.hl-check__header h2 {
  margin: 0;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -1px;
  text-transform: none;
  color: var(--color-secondary);
}

.hl-check__header p {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: #444444;
}

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

.hl-check__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-height: 183px;
  padding: 24px;
  background: #ffffff;
  border-left: 2px solid #009c43;
  border-radius: 10px;
}

.hl-check__icon img {
  width: 42px;
  height: 42px;
  display: block;
}

.hl-check__card > p {
  margin: 0;
  max-width: 198px;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #444444;
}

.hl-check__card--cta {
  justify-content: space-between;
  gap: 16px;
  background: #009c43;
  border-left: none;
}

.hl-check__card--cta > p {
  max-width: 237px;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.hl-check__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: #009c43;
  text-decoration: none;
  background: #ffffff;
  border-radius: 40px;
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

.hl-check__cta:hover {
  color: #009c43;
  background: #f3fff7;
}

/* ----- Intervention ----- */

.hl-intervention__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-areas:
    "media title"
    "media copy";
  gap: 20px 48px;
  align-items: center;
}

.hl-intervention__layout > .hl-section-title {
  grid-area: title;
  margin: 0 0 8px;
}

.hl-intervention__media {
  grid-area: media;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.hl-intervention__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.hl-intervention__copy {
  grid-area: copy;
}

.hl-intervention__copy p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}

.hl-intervention__copy p:last-child {
  margin-bottom: 0;
}

/* ----- Untreated green band ----- */

.hl-untreated {
  position: relative;
  overflow: hidden;
  padding-block: 80px;
  background-color: #009c43;
  background-image: url("../images/hearing-loss/what-happens-if-hearing-loss.svg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

.hl-untreated__inner {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin-inline: auto;
  text-align: center;
  color: var(--color-white);
}

.hl-untreated h2 {
  position: relative;
  margin: 0 auto 42px;
  padding-bottom: 20px;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -1px;
  text-transform: none;
  color: var(--color-white);
}

.hl-untreated h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 1px;
  background: rgba(255, 255, 255, 0.85);
  transform: translateX(-50%);
}

.hl-untreated__copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 48px;
  text-align: left;
}

.hl-untreated__copy p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
}

/* ----- Causes ----- */

.hl-causes__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "title media"
    "lead media"
    "list media";
  gap: 20px 48px;
  align-items: center;
}

.hl-causes__layout .hl-section-title {
  grid-area: title;
  margin: 0;
  color: var(--color-secondary);
}

.hl-causes__lead {
  grid-area: lead;
  margin: 0;
  max-width: 520px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #222222;
}

.hl-causes__list {
  grid-area: list;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hl-causes__list li {
  position: relative;
  padding-left: 28px;
  font-size: 18px;
  line-height: 1.5;
  color: #555555;
}

.hl-causes__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: #555555;
}

.hl-causes__media {
  grid-area: media;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #e8e8f0;
}

.hl-causes__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 420;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(1);
}

/* ----- Types of Auditory Challenges ----- */

.hl-challenges {
  background: #f5f7fd;
  padding-block: 80px;
}

.hl-challenges__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 702px;
  margin: 0 auto 44px;
  text-align: center;
}

.hl-challenges__header h2 {
  margin: 0;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -1px;
  text-transform: none;
  color: var(--color-secondary);
}

.hl-challenges__header p {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #444444;
}

.hl-challenges__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: stretch;
}

.hl-challenges__diagram {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #dae1f9;
  border-radius: 20px;
}

.hl-challenges__diagram img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hl-challenges__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.hl-challenges__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
}

.hl-challenges__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  background: #ffffff;
  border-left: 1.5px solid #009c43;
  border-radius: 20px;
}

.hl-challenges__card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hl-challenges__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: #e5f5ec;
  border-radius: 10px;
}

.hl-challenges__icon img {
  width: 28px;
  height: 28px;
  display: block;
}

.hl-challenges__card h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: #222222;
}

.hl-challenges__card p {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #444444;
}

.hl-challenges__note {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: #444444;
}

/* ----- Understanding Tinnitus ----- */

.hl-ear {
  background: var(--color-white);
}

.hl-ear__body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    "title media"
    "lead media"
    "outro media";
  gap: 16px 48px;
  align-items: center;
}

.hl-ear__body > .hl-section-title {
  grid-area: title;
  margin: 0;
}

.hl-ear__lead {
  grid-area: lead;
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.hl-ear__outro {
  grid-area: outro;
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.hl-ear__media {
  grid-area: media;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  line-height: 0;
}

.hl-ear__media picture,
.hl-ear__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ----- Protecting Your Hearing ----- */

.hl-journey {
  background: #fafafa;
  padding-block: 72px;
}

.hl-journey__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 640px;
  margin: 0 auto 42px;
  text-align: center;
}

.hl-journey__header h2 {
  margin: 0;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -1px;
  text-transform: none;
  color: var(--color-secondary);
}

.hl-journey__header p {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: #444444;
}

.hl-journey__carousel {
  width: 100%;
}

.hl-journey__track {
  overflow: hidden;
  width: 100%;
}

.hl-journey__grid {
  display: flex;
  align-items: stretch;
  gap: 20px;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}

.hl-journey__item {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  align-self: stretch;
  height: auto;
}

.hl-journey__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 auto;
  width: 100%;
  min-height: 284px;
  height: 100%;
  padding: 20px 21px 28px;
  overflow: hidden;
  border-radius: 20px;
  color: var(--color-white);
}

.hl-journey__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 165px;
  height: 40px;
  margin: 40px auto 0;
  padding: 5px;
  box-sizing: border-box;
  background: #f3f3f3;
  border-radius: 30px;
}

.hl-journey__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #2c2d88;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    opacity var(--transition-base);
}

.hl-journey__btn svg {
  display: block;
  width: 20px;
  height: 20px;
}

.hl-journey__btn--next:not(:disabled) {
  color: #ffffff;
  background: #2c2d88;
}

.hl-journey__btn--prev:not(:disabled) {
  color: #2c2d88;
  background: rgba(44, 45, 136, 0.08);
}

.hl-journey__btn--prev:not(:disabled):hover {
  background: rgba(44, 45, 136, 0.14);
}

.hl-journey__btn--next:not(:disabled):hover {
  background: #23246e;
}

.hl-journey__btn:disabled {
  color: #b0b0b0;
  background: transparent;
  cursor: default;
  opacity: 1;
}

.hl-journey__status {
  min-width: 52px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: #444444;
}

.hl-journey__controls.is-hidden {
  display: none;
}

.hl-journey__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hl-journey__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.hl-journey__overlay-layer {
  position: absolute;
  border-radius: 20px;
}

/* Figma Rectangle 574057111 */
.hl-journey__overlay-layer--1 {
  inset: 0;
  background: linear-gradient(165.63deg, #009c43 10.2%, rgba(0, 156, 67, 0) 71.55%);
}

/* Figma Rectangle 574057112 — flipped vertically */
.hl-journey__overlay-layer--2 {
  inset: 0;
  background: linear-gradient(175.6deg, #009c43 41.03%, rgba(0, 156, 67, 0) 76.54%);
  transform: matrix(1, 0, 0, -1, 0, 0);
}

/* Figma Rectangle 574057113 — transposed (left wash) */
.hl-journey__overlay-layer--3 {
  width: 100%;
  height: 61.75%;
  left: -0.9%;
  top: -7.58%;
  background: linear-gradient(164.63deg, #009c43 28.78%, rgba(0, 156, 67, 0) 90.01%);
  transform: matrix(0, 1, 1, 0, 0, 0);
  transform-origin: top left;
}

.hl-journey__icon {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  display: inline-flex;
}

.hl-journey__icon img {
  width: 52px;
  height: 52px;
  display: block;
}

.hl-journey__card h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 248px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #ffffff;
  font-family: var(--font-family-base);
}

/* ----- Connect specialists ----- */

.hl-connect {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  padding-block: 0;
  background: #2c2d88;
}

.hl-connect__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    url("../images/hearing-loss/connect-with-our-specialist.svg") right bottom / auto 100% no-repeat,
    linear-gradient(270deg, #3738b0 5.58%, #17184a 100%);
  pointer-events: none;
}

.hl-connect__container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 400px;
}

.hl-connect__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 538px;
  padding-block: 72px;
  color: var(--color-white);
}

.hl-connect__copy h2 {
  margin: 0 0 24px;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -1px;
  text-transform: none;
  color: #ffffff;
}

.hl-connect__copy p {
  margin: 0 0 31px;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #ffffff;
}

.hl-connect__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 256px;
  min-height: 55px;
  padding: 16px 30px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
  text-decoration: none;
  background: #3b3cb4;
  border-radius: 30px;
  transition: background-color var(--transition-base);
}

.hl-connect__cta:hover {
  color: #ffffff;
  background: #3233a0;
}

.hl-connect__cta:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* ----- Hearing Loss FAQ (Figma Frame 2147240457) ----- */

.hearingLossPage .hl-faq {
  background: #ffffff;
  padding-block: 80px;
}

.hearingLossPage .hl-faq .testimonials-faq__title {
  margin-bottom: 32px;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -1px;
  color: #2C2D88;
}

.hearingLossPage #hearingLossFaq {
  gap: 20px;
  max-width: 1030px;
}

.hearingLossPage #hearingLossFaq .hl-faq__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 26px;
  padding: 26px 26px 26px 0;
  background: #ffffff;
  border: 1px solid #DBDBDB;
  border-radius: 16px;
}

.hearingLossPage #hearingLossFaq .hl-faq__item.is-open {
  align-items: flex-start;
}

.hearingLossPage #hearingLossFaq .hl-faq__accent {
  flex: 0 0 4px;
  width: 4px;
  height: 25px;
  margin: 0;
  background: #797979;
  border: 0;
  border-radius: 2px;
  align-self: center;
}

.hearingLossPage #hearingLossFaq .hl-faq__item.is-open .hl-faq__accent {
  width: 4px;
  height: 25px;
  background: #009C43;
  align-self: flex-start;
  margin-top: 6px;
}

.hearingLossPage #hearingLossFaq .hl-faq__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.hearingLossPage #hearingLossFaq .hl-faq__trigger {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  width: 100%;
  padding: 0;
}

.hearingLossPage #hearingLossFaq .hl-faq__item.is-open .hl-faq__trigger {
  align-items: flex-start;
}

.hearingLossPage #hearingLossFaq .testimonials-faq__question {
  flex: 1 1 auto;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: #222222;
}

.hearingLossPage #hearingLossFaq .hl-faq__item.is-open .testimonials-faq__question {
  color: #009C43;
}

.hearingLossPage #hearingLossFaq .hl-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-top: 0;
  padding: 8px;
  color: #797979;
  background: #ffffff;
  border: 1px solid #DBDBDB;
  border-radius: 6px;
  box-sizing: border-box;
}

.hearingLossPage #hearingLossFaq .hl-faq__item.is-open .hl-faq__icon {
  color: #009C43;
  border-color: #009C43;
}

.hearingLossPage #hearingLossFaq .hl-faq__icon svg {
  width: 20px;
  height: 20px;
}

.hearingLossPage #hearingLossFaq .hl-faq__icon .testimonials-faq__icon-plus {
  display: block;
}

.hearingLossPage #hearingLossFaq .hl-faq__icon .testimonials-faq__icon-minus {
  display: none;
}

.hearingLossPage #hearingLossFaq .hl-faq__item.is-open .hl-faq__icon .testimonials-faq__icon-plus {
  display: none;
}

.hearingLossPage #hearingLossFaq .hl-faq__item.is-open .hl-faq__icon .testimonials-faq__icon-minus {
  display: block;
}

.hearingLossPage #hearingLossFaq .testimonials-faq__panel {
  margin-top: 0;
  width: 100%;
  padding-right: 62px;
}

.hearingLossPage #hearingLossFaq .testimonials-faq__panel p {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #444444;
}

.hearingLossPage #hearingLossFaq .testimonials-faq__bullets {
  margin: 12px 0 0;
  padding-left: 1.25rem;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #444444;
}

.hearingLossPage #hearingLossFaq .testimonials-faq__bullets li + li {
  margin-top: 6px;
}

/* ==========================================
   Hearing Aids Styles - Start
========================================== */

.hearingAidsPage .ha-banner {
  min-height: 650px;
}

.ha-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(270deg, rgba(29, 33, 13, 0) 0%, rgba(29, 33, 13, 0.9) 100%);
  pointer-events: none;
}

.ha-banner__content {
  max-width: 635px;
}

.ha-banner__content h1 {
  margin-bottom: 24px;
}

.ha-banner__content .btn {
  padding: 16px 30px;
  font-size: 15px;
  font-weight: 500;
}

/* Mobile-only chrome: hidden on desktop */
.ha-banner__cta-mobile,
.ha-types__cta-mobile,
.ha-generation__mobile-head,
.ha-generation__lead--mobile,
.ha-generation__advantages-label,
.ha-pager,
.ha-types__tabs,
.ha-faq__more,
.ha-steps__mobile-stepper,
.ha-steps__mobile-intro {
  display: none !important;
}

/* Compact: hide desktop-only generation device column */
@media (max-width: 991.98px) {
  .hearingAidsPage .ha-generation__device {
    display: none !important;
  }

  .hearingAidsPage .ha-generation .row > .col-lg-5 {
    display: none;
  }
}

.ha-banner__cta-desktop,
.ha-types__cta-desktop {
  display: inline;
}

.ha-generation__lead--desktop {
  display: block;
}

.ha-pager[hidden],
.ha-types__tabs[hidden],
.ha-faq__more[hidden],
.ha-steps__mobile-stepper[hidden] {
  display: none !important;
}

/* Intro */
.ha-intro {
  background: #F5F5F5;
}

.ha-intro__media {
  position: relative;
  height: 100%;
  min-height: 420px;
  border-radius: 16px;
  overflow: hidden;
  background: #DCDCDC;
}

.ha-intro__media-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 420px;
}

.ha-intro__device {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  background: #CFCFCF;
}

.ha-intro__panel {
  height: 100%;
  padding: 32px;
  border-radius: 30px;
  background: #FFFFFF;
}

.ha-intro__panel p {
  margin-bottom: 24px;
  font-size: 20px;
  line-height: 30px;
  color: #444444;
}

.ha-intro__panel .btn {
  margin-top: 8px;
  padding: 16px 30px;
  background: #2C2D88;
  border-color: #2C2D88;
  color: #fff;
  font-weight: 600;
}

.ha-intro__panel .btn:hover {
  background: transparent;
  color: #2C2D88;
}

/* Benefits — scroll-pinned storytelling */
.ha-benefits {
  background: #fff;
  --ha-benefits-header-offset: 0px;
}

.ha-benefits__pin-track {
  position: relative;
  height: var(--ha-benefits-track-height, 500vh);
}

.ha-benefits__pin-stage {
  position: sticky;
  top: var(--ha-benefits-header-offset);
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--ha-benefits-header-offset));
  padding: 48px 0;
  box-sizing: border-box;
}

.ha-benefits__layout {
  width: 100%;
}

.ha-benefits__intro .section-title {
  max-width: 457px;
  text-align: left;
  margin-bottom: 32px;
}

.ha-benefits__intro p {
  position: relative;
  max-width: 436px;
  padding-left: 28px;
  font-size: 20px;
  line-height: 30px;
  color: #444444;
}

.ha-benefits__intro p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 4px;
  height: 116px;
  background: #009C43;
}

.ha-benefits__scroller {
  position: relative;
  max-height: min(600px, calc(100vh - var(--ha-benefits-header-offset) - 96px));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.ha-benefits__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px;
  transform: translate3d(0, var(--ha-benefits-shift, 0px), 0);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.ha-benefits__card {
  position: relative;
  flex: 0 0 auto;
  min-height: 88px;
  border-radius: 16px;
  overflow: hidden;
  background: #F7F7F7;
  border: 1px solid transparent;
  transition:
    min-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.ha-benefits__card.is-active {
  min-height: 266px;
  background: #DEDEDE;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.ha-benefits__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 0.5s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.ha-benefits__card.is-active img {
  opacity: 1;
  transform: scale(1);
}

.ha-benefits__card-body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 22px 24px;
  background: transparent;
  transition: background 0.4s ease;
}

.ha-benefits__card.is-active .ha-benefits__card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  min-height: auto;
  padding: 24px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);
}

.ha-benefits__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  /* Badge circle + shadow live in the SVG asset — avoid a second CSS circle */
  background: transparent;
  border-radius: 0;
  line-height: 0;
  align-self: center;
  position: relative;
}

.ha-benefits__icon img {
  display: block;
  width: 42px;
  height: 42px;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

.ha-benefits__card h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
  color: #666666;
  transition: color 0.35s ease;
}

.ha-benefits__card.is-active h3 {
  margin-bottom: 4px;
  color: #fff;
}

.ha-benefits__card p {
  max-height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 16px;
  line-height: 27px;
  color: #fff;
  transform: translateY(8px);
  transition:
    opacity 0.4s ease 0.08s,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
    max-height 0.45s ease;
}

.ha-benefits__card.is-active p {
  max-height: 60px;
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .ha-benefits__pin-track {
    height: auto !important;
  }

  .ha-benefits__pin-stage {
    position: relative;
    top: 0;
    min-height: 0;
  }

  .ha-benefits__scroller {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ha-benefits__list {
    transform: none;
    transition: none;
    will-change: auto;
  }

  .ha-benefits__card,
  .ha-benefits__card.is-active {
    min-height: 0;
    background: #F7F7F7;
    box-shadow: none;
  }

  .ha-benefits__card img,
  .ha-benefits__card.is-active img {
    position: relative;
    inset: auto;
    height: 200px;
    opacity: 1;
    transform: none;
  }

  .ha-benefits__card-body,
  .ha-benefits__card.is-active .ha-benefits__card-body {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    align-items: flex-start;
    padding: 20px 24px 24px;
    background: transparent;
  }

  .ha-benefits__card h3,
  .ha-benefits__card.is-active h3 {
    color: #222;
  }

  .ha-benefits__card p,
  .ha-benefits__card.is-active p {
    max-height: none;
    opacity: 1;
    transform: none;
    color: #444;
  }

  .ha-benefits__card,
  .ha-benefits__card img,
  .ha-benefits__card p,
  .ha-benefits__card h3 {
    transition: none !important;
  }
}

/* Generation */
.ha-generation {
  position: relative;
  min-height: 696px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #F2F2F2;
}

.ha-generation__bg-picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
}

.ha-generation__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ha-generation__overlay {
  position: absolute;
  inset: 0;  
}

.ha-generation .container {
  position: relative;
  z-index: 2;
  padding-top: 72px;
  padding-bottom: 72px;
}

.ha-generation__device {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
}

.ha-generation__content {
  max-width: 536px;
  margin-left: auto;
  color: #fff;
}

.ha-generation__content h2 {
  margin-bottom: 24px;
  font-size: clamp(30px, 3.5vw, 42px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -1px;
  color: #fff;
  text-transform: none;
}

.ha-generation__lead {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 500;
  line-height: 27px;
  color: #fff;
}

.ha-generation__content .btn {
  padding: 10px 20px;
  background: #2C2D88;
  border-color: #2C2D88;
  color: #fff;
  margin-bottom: 2rem;
}

.ha-generation__divider {
  margin: 0 0 32px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  opacity: 1;
}

.ha-generation__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 16px;
}

.ha-generation__item {
  padding: 5px 16px;
  border-left: 5px solid #fff;
  border-radius: 10px;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.02em;
  color: #fff;
}

/* Features */
.ha-features {
  background: #FFFFFF;
}

.ha-features__header {
  position: relative;
  z-index: 2;
  max-width: 776px;
  margin-bottom: 24px;
  padding: 0;
  border: 0;
}

.ha-features__header h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -2px;
  color: #222222;
  text-transform: none;
}

.ha-features__lead {
  position: relative;
  grid-area: lead;
  align-self: start;
  max-width: 656px;
  margin: 0 0 8px;
  padding-left: 24px;
  border-left: 4px solid #009C43;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.02em;
  color: #4C4B59;
}

.ha-features__shapes,
.ha-features__shape,
.ha-features__blob {
  display: none !important;
}

.ha-features__shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr);
  grid-template-areas:
    "lead device"
    "card device";
  align-items: center;
  column-gap: 24px;
  row-gap: 28px;
  padding: 56px;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: none;
  border: 1px solid #E8E8E8;
}

.ha-features__card {
  grid-area: card;
  width: 100%;
  min-width: 0;
}

.ha-features__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 32px;
}

.ha-features__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.ha-features__icon {
  flex-shrink: 0;
  width: 32px;
  display: flex;
  justify-content: center;
  padding-top: 4px;
  line-height: 0;
}

.ha-features__icon-img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.ha-features__icon svg {
  width: 28px;
  height: 28px;
}

.ha-features__icon svg * {
  stroke: #444444;
}

.ha-features__item h3 {
  margin: 0 0 3px;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.01em;
  color: #444444;
  text-transform: none;
}

.ha-features__item p {
  margin: 0;
  max-width: 222px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.01em;
  color: #444444;
}

.ha-features__device-wrap {
  grid-area: device;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ha-features__device {
  width: min(100%, 376px);
  height: auto;
  margin: -72px 0;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.28));
}

/* Products */
.ha-products {
  background: #009C43;
}

.ha-products .row {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}

.ha-products__header {
  margin-bottom: 42px;
}

.ha-products__header h2 {
  margin: 0;
  max-width: 600px;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -1px;
  color: #fff;
  text-transform: none;
}

.ha-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 31px 23px 24px;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
}

.ha-product-card img {
  display: block;
  width: 190px;
  height: 190px;
  margin: 0 auto 38px;
  object-fit: contain;
}

.ha-product-card h3 {
  min-height: 48px;
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #444;
  text-transform: none;
}

.ha-product-card > p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #444;
}

.ha-product-card hr {
  margin: 0 0 14px;
  margin-top: auto;
  border: 0;
  border-top: 1px solid #C2C2C2;
  opacity: 1;
}

.ha-product-card__price {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: #444444;
}

.ha-product-card__price--single {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.ha-product-card__price-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.ha-product-card__price-stack small {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}

.ha-product-card__price-stack span {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.ha-product-card__price strong {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

/* Types */
.ha-types .section-desc {
  max-width: 920px;
}

.ha-type-card {
  height: 100%;
  border-radius: 10px;
  padding: 44px 24px 0;
  text-align: center;
  background: linear-gradient(158.11deg, #EAEAEE 29.16%, #FFFFFF 47.66%, #E1E2E5 84.65%);
}

.ha-type-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: #fff;
}

.ha-type-card h3 {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.97px;
  color: #2C2D88;
  text-transform: none;
}

.ha-type-card p {
  max-width: 331px;
  margin: 0 auto 24px;
  font-size: 18px;
  line-height: 1.5;
  color: #444;
}

.ha-type-card img {
  display: block;
  width: min(100%, 315px);
  height: auto;
  margin: 0 auto;
}

.ha-types__footer {
  margin-top: 42px;
}

.ha-types__footer p {
  max-width: 1063px;
  margin: 0 auto 24px;
  font-size: 20px;
  line-height: 30px;
  color: #444;
}

.ha-types__footer .btn {
  padding: 16px 30px;
  font-size: 15px;
  font-weight: 500;
}

/* Steps */
.ha-steps {
  background: rgba(247, 247, 247, 0.8);
}

.ha-steps__layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ha-steps__row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 24px;
  align-items: stretch;
}

.ha-steps__marker {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-top: 23px;
}

.ha-steps__marker span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid #DBDBDB;
  border-radius: 50%;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #242E39;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Continuous connector — stretches with row height as accordion opens */
.ha-steps__marker::after {
  content: "";
  position: absolute;
  top: calc(21px + 32px + 2px);
  bottom: -45px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #DBDBDB;
  transition: bottom 0.35s ease;
}

.ha-steps__row:last-child .ha-steps__marker::after {
  display: none;
}

.ha-steps__row.is-active .ha-steps__marker span {
  background: #009C43;
  border-color: #009C43;
  color: #fff;
}

.ha-steps__item {
  display: block;
  width: 100%;
  padding: 26px;
  text-align: left;
  border: 1px solid #DBDBDB;
  border-radius: 16px;
  background: #F5F5F5;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.ha-steps__title {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: #222;
  transition: color 0.3s ease;
}

.ha-steps__text {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  transition:
    grid-template-rows 0.35s ease,
    margin-top 0.35s ease,
    opacity 0.25s ease;
}

.ha-steps__text-inner {
  overflow: hidden;
  min-height: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.ha-steps__item.is-open {
  background: #009C43;
  border-color: #009C43;
}

.ha-steps__item.is-open .ha-steps__title {
  color: #fff;
}

.ha-steps__item.is-open .ha-steps__text {
  grid-template-rows: 1fr;
  margin-top: 20px;
  opacity: 1;
}

.ha-steps__media {
  --ink-x: 50%;
  --ink-y: 50%;
  --ink-r: 0%;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #d9d9d9;
  isolation: isolate;
  cursor: pointer;
}

@property --ink-r {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.ha-steps__media-img {
  display: block;
  width: 100%;
  height: auto;
}

.ha-steps__media-img--base {
  filter: grayscale(100%) contrast(0.96) brightness(1.02);
  transform: scale(1.001);
  transition: transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ha-steps__media-img--ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    circle at var(--ink-x) var(--ink-y),
    #000 0%,
    #000 max(0%, calc(var(--ink-r) - 4%)),
    rgba(0, 0, 0, 0.85) calc(var(--ink-r) + 2%),
    rgba(0, 0, 0, 0.55) calc(var(--ink-r) + 12%),
    rgba(0, 0, 0, 0.25) calc(var(--ink-r) + 24%),
    rgba(0, 0, 0, 0.08) calc(var(--ink-r) + 38%),
    transparent calc(var(--ink-r) + 52%)
  );
  mask-image: radial-gradient(
    circle at var(--ink-x) var(--ink-y),
    #000 0%,
    #000 max(0%, calc(var(--ink-r) - 4%)),
    rgba(0, 0, 0, 0.85) calc(var(--ink-r) + 2%),
    rgba(0, 0, 0, 0.55) calc(var(--ink-r) + 12%),
    rgba(0, 0, 0, 0.25) calc(var(--ink-r) + 24%),
    rgba(0, 0, 0, 0.08) calc(var(--ink-r) + 38%),
    transparent calc(var(--ink-r) + 52%)
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition:
    --ink-r 2.2s cubic-bezier(0.05, 0.7, 0.1, 1),
    transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: mask-image, -webkit-mask-image;
}

.ha-steps__media:hover .ha-steps__media-img--base,
.ha-steps__media:focus-within .ha-steps__media-img--base {
  transform: scale(1.035);
}

.ha-steps__media:hover .ha-steps__media-img--ink,
.ha-steps__media:focus-within .ha-steps__media-img--ink,
.ha-steps__media.is-ink .ha-steps__media-img--ink {
  --ink-r: 120%;
  transform: scale(1.035);
}

/* Slow retreat when leaving — color drains back into the point */
.ha-steps__media:not(:hover):not(:focus-within):not(.is-ink) .ha-steps__media-img--ink {
  transition:
    --ink-r 1.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ha-steps__media:focus-visible {
  outline: 2px solid #009C43;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ha-steps__text,
  .ha-steps__item,
  .ha-steps__title,
  .ha-steps__marker span,
  .ha-steps__media-img--base,
  .ha-steps__media-img--ink {
    transition: none;
  }

  .ha-steps__media-img--ink {
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 0;
  }

  .ha-steps__media:hover .ha-steps__media-img--ink,
  .ha-steps__media:focus-within .ha-steps__media-img--ink {
    opacity: 1;
  }

  .ha-steps__media:hover .ha-steps__media-img--base,
  .ha-steps__media:focus-within .ha-steps__media-img--base {
    transform: none;
  }
}

/* Lifestyle */
.ha-lifestyle {
  background: #F2F2F2;
}

.ha-lifestyle .section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 0;
}

.ha-lifestyle .section-title {
  margin: 0;
  width: 100%;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1px;
  color: #2C2D88;
  text-align: center;
}

.ha-lifestyle .section-desc {
  max-width: none;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: -0.02em;
  color: #444444;
  text-align: center;
}

.ha-lifestyle__rule {
  width: 100%;
  max-width: 1240px;
  margin: 42px auto;
  border: 0;
  border-top: 1px solid #DDDDDD;
  opacity: 1;
}

.ha-lifestyle__grid {
  --bs-gutter-x: 12px;
  --bs-gutter-y: 47px;
}

.ha-lifestyle__item {
  position: relative;
  padding-left: 14px;
}

.ha-lifestyle__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 25px;
  background: #009C43;
}

.ha-lifestyle__item h3 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: #222222;
  text-transform: none;
}

.ha-lifestyle__item p {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: #444444;
}

/* Care */
.ha-care__card {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 505px;
  padding: 32px;
  overflow: hidden;
  border: 1px solid #E0E0E0;
  border-radius: 18px;
  background-color: #27B062;
  background-image: var(--ha-care-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.ha-care__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 90, 50, 0.55) 0%,
    rgba(39, 176, 98, 0.28) 38%,
    rgba(39, 176, 98, 0.08) 62%,
    transparent 100%
  );
  pointer-events: none;
}

.ha-care__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.ha-care__icon-img {
  display: block;
  width: 55px;
  height: 55px;
  object-fit: contain;
}

.ha-care__card h3 {
  position: relative;
  z-index: 1;
  max-width: 284px;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: #fff;
  text-transform: none;
  font-family: var(--font-family-base);
}

/* CTA */
.ha-cta {
  position: relative;
  overflow: hidden;
  padding: 64px 0;
  background: linear-gradient(90deg, #F7F7F7 0%, #E5E5E5 100%);
}

.ha-cta .container {
  position: relative;
  z-index: 1;
}

.ha-cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: 715px;
}

.ha-cta__copy h2 {
  margin: 0 0 20px;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -1px;
  color: #2C2D88;
  text-transform: none;
}

.ha-cta__copy p {
  max-width: 707px;
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #444444;
}

.ha-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 256px;
  min-height: 55px;
  padding: 16px 30px;
  border: 0;
  border-radius: 30px;
  background: #2C2D88;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.ha-cta__btn:hover,
.ha-cta__btn:focus-visible {
  background: #24256f;
  color: #fff;
  transform: translateY(-1px);
}

.ha-cta__media {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  max-width: 442px;
}

.ha-cta__device {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 430px);
  height: auto;
  border-radius: 45px;
}

.ha-cta__media::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 18%;
  height: 90px;
  background: linear-gradient(180deg, rgba(231, 231, 231, 0) 0%, #E7E7E7 100%);
  pointer-events: none;
}

/* FAQ */
.ha-faq__list {
  max-width: 1030px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ha-faq__item {
  border: 1px solid #DBDBDB !important;
  border-radius: 16px !important;
  overflow: hidden;
  background: #fff;
}

.ha-faq__item + .ha-faq__item {
  margin-top: 0;
}

.ha-faq__button {
  position: relative;
  gap: 26px;
  padding: 26px 62px 26px 26px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: #666 !important;
  box-shadow: none !important;
  background: #fff !important;
}

.ha-faq__button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  width: 4px;
  height: 25px;
  background: #797979;
}

.ha-faq__button:not(.collapsed) {
  color: #009C43 !important;
}

.ha-faq__button:not(.collapsed)::before {
  width: 4px;
  background: #009C43;
}

.ha-faq__button::after {
  position: absolute;
  right: 26px;
  top: 26px;
  width: 36px;
  height: 36px;
  margin: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 4v12M4 10h12' stroke='%23797979' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #DBDBDB;
  border-radius: 6px;
  transform: none;
}

.ha-faq__button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10h12' stroke='%23009C43' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  border-color: #009C43;
  transform: none;
}

.ha-faq__body {
  padding: 0 62px 26px 26px !important;
  font-size: 18px;
  line-height: 1.5;
  color: #444;
}

@media (max-width: 991.98px) {
  /* Shared compact safety net (mobile + tablet): kill pin-scroll without
     fighting later mobile/tablet carousel rules. */
  .ha-benefits__intro .section-title,
  .ha-benefits__intro p {
    max-width: none;
  }

  .ha-benefits__pin-track {
    height: auto !important;
  }

  .ha-benefits__pin-stage {
    position: relative !important;
    top: auto !important;
    min-height: 0 !important;
    align-items: flex-start;
    padding-top: 0;
    padding-bottom: 0;
  }

  .ha-benefits__layout {
    align-items: flex-start !important;
  }

  .ha-benefits__scroller {
    max-height: none !important;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ha-benefits__list {
    transform: none !important;
  }

  .ha-generation__content {
    margin: 0 auto;
  }

  .ha-cta__media {
    margin: 8px auto 0;
    justify-content: center;
  }

  .ha-cta__btn {
    min-width: 200px;
  }

  .ha-steps__row {
    gap: 16px;
  }
}

@media (max-width: 767.98px) {
  .hearingAidsPage {
    overflow-x: clip;
  }

  /* Shared mobile chrome */
  .hearingAidsPage .ha-banner__cta-desktop,
  .hearingAidsPage .ha-types__cta-desktop,
  .hearingAidsPage .ha-generation__overlay,
  .hearingAidsPage .ha-generation__bg-picture,
  .hearingAidsPage .ha-generation__lead--desktop,
  .hearingAidsPage .ha-generation__readmore,
  .hearingAidsPage .ha-generation__divider,
  .hearingAidsPage .ha-lifestyle__rule {
    display: none !important;
  }

  .hearingAidsPage .ha-banner__cta-mobile:not([hidden]),
  .hearingAidsPage .ha-types__cta-mobile:not([hidden]),
  .hearingAidsPage .ha-pager:not([hidden]),
  .hearingAidsPage .ha-types__tabs:not([hidden]),
  .hearingAidsPage .ha-faq__more:not([hidden]),
  .hearingAidsPage .ha-steps__mobile-stepper:not([hidden]),
  .hearingAidsPage .ha-steps__mobile-intro:not([hidden]) {
    display: flex !important;
  }

  .hearingAidsPage .ha-steps__mobile-intro:not([hidden]) {
    display: block !important;
  }

  .hearingAidsPage .ha-banner__cta-mobile:not([hidden]),
  .hearingAidsPage .ha-types__cta-mobile:not([hidden]) {
    display: inline !important;
  }

  /* Generation mobile Figma — show stacked white layout pieces */
  .hearingAidsPage .ha-generation__mobile-head {
    display: flex !important;
  }

  .hearingAidsPage .ha-generation__lead--mobile {
    display: block !important;
  }

  .hearingAidsPage .ha-generation__advantages-label {
    display: block !important;
  }

  /* Pager */
  .ha-pager {
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 165px;
    height: 40px;
    margin: 0 auto;
    padding: 5px;
    background: #F2F2F2;
    border-radius: 30px;
    position: relative;
  }

  .ha-pager--light {
    background: #FFFFFF;
  }

  .ha-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 30px;
    background: #2C2D88;
    color: #fff;
    flex-shrink: 0;
  }

  .ha-pager--light .ha-pager__btn--prev {
    background: #ECECEC;
    color: #666;
  }

  .ha-pager--features .ha-pager__btn--prev {
    background: #fff;
    color: #666;
  }

  .ha-pager__btn:disabled {
    opacity: 0.45;
  }

  .ha-pager__label {
    flex: 1;
    text-align: center;
    font-family: "Inter Display", Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: #666;
  }

  /* Banner */
  .hearingAidsPage .ha-banner {
    min-height: 600px;
    height: 600px;
  }

  .hearingAidsPage .ha-banner__overlay {
    background: linear-gradient(180deg, #010101 20.25%, rgba(1, 1, 1, 0.75) 65.35%, rgba(1, 1, 1, 0.5) 83.68%, rgba(1, 1, 1, 0.25) 92.84%, rgba(1, 1, 1, 0) 100%);
  }

  .hearingAidsPage .ha-banner__content {
    max-width: 270px;
    padding-top: 52px;
  }

  .hearingAidsPage .ha-banner__content h1 {
    margin-bottom: 16px;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #fff;
  }

  .hearingAidsPage .ha-banner__content .btn {
    padding: 10px 20px;
    background: #3B3CB4;
    border-color: #3B3CB4;
    font-size: 15px;
    font-weight: 500;
  }

  /* Intro */
  .ha-intro {
    padding: 52px 0;
    background: #F5F5F5;
  }

  .ha-intro .section-title {
    max-width: 279px;
    margin-left: auto;
    margin-right: auto;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -1px;
    color: #2C2D88;
  }

  .ha-intro__media {
    min-height: 372px;
    border-radius: 10.58px;
  }

  .ha-intro__media-bg {
    min-height: 372px;
  }

  .ha-intro__panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: 20px;
    background: #fff;
  }

  .ha-intro__panel p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: #444;
  }

  .ha-intro__panel .btn {
    width: 100%;
    margin-top: 8px;
    padding: 13px 20px;
    background: #2C2D88;
    border-color: #2C2D88;
    border-radius: 40px;
    font-size: 15px;
  }

  /* Benefits — mobile card carousel (Figma Six Ways) */
  .ha-benefits {
    padding: 40px 0 52px;
    background: #fff;
  }

  .ha-benefits .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .ha-benefits__pin-track {
    height: auto !important;
  }

  .ha-benefits__pin-stage {
    position: relative !important;
    top: auto !important;
    height: auto;
    min-height: 0 !important;
    padding: 0;
    align-items: flex-start;
  }

  .ha-benefits__layout {
    --bs-gutter-x: 0;
    --bs-gutter-y: 24px;
    align-items: stretch !important;
  }

  .ha-benefits__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  .ha-benefits__intro .section-title {
    max-width: 320px;
    margin: 0;
    font-family: "Inter Display", Inter, sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -1px;
    text-align: center;
    color: #2C2D88;
  }

  .ha-benefits__intro p {
    max-width: 340px;
    margin: 0;
    padding-left: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: #333333;
  }

  .ha-benefits__intro p::before {
    display: none;
  }

  .ha-benefits__scroller {
    height: auto;
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ha-benefits__list {
    display: flex;
    flex-direction: row !important;
    align-items: stretch;
    gap: 16px;
    transform: none !important;
    transition: none !important;
    will-change: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin: 0;
    padding: 0 4px 0 0;
    width: 100%;
  }

  .ha-benefits__list::-webkit-scrollbar {
    display: none;
  }

  .ha-benefits__card,
  .ha-benefits__card.is-active {
    position: relative;
    display: block;
    flex: 0 0 calc(100% - 28px);
    width: calc(100% - 28px);
    max-width: none;
    height: 220px;
    min-height: 0 !important;
    margin: 0;
    padding: 0;
    gap: 0;
    opacity: 1;
    transform: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    filter: none;
    overflow: hidden;
    background: #DEDEDE !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    transition: none !important;
  }

  .ha-benefits__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(182.5deg, rgba(0, 0, 0, 0) 50.83%, rgba(0, 0, 0, 0.7) 77.87%);
    pointer-events: none;
  }

  /* Photo only — do not target icon <img> inside .ha-benefits__icon */
  .ha-benefits__card > img,
  .ha-benefits__card.is-active > img {
    position: absolute !important;
    inset: 0 !important;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 1 !important;
    transform: none !important;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    pointer-events: none;
    transition: none !important;
  }

  .ha-benefits__card-body,
  .ha-benefits__card.is-active .ha-benefits__card-body {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 20px 18px;
    background: transparent !important;
    border-radius: 0;
    transition: none !important;
  }

  .ha-benefits__card-body > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }

  .ha-benefits__icon {
    width: 42px;
    height: 42px;
    margin: 0;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    align-self: flex-start;
    flex-shrink: 0;
  }

  .ha-benefits__icon img,
  .ha-benefits__card .ha-benefits__icon img,
  .ha-benefits__card.is-active .ha-benefits__icon img {
    position: relative !important;
    inset: auto !important;
    display: block;
    width: 42px !important;
    height: 42px !important;
    max-width: none;
    opacity: 1 !important;
    transform: none !important;
    object-fit: contain;
    object-position: center;
    border-radius: 0 !important;
    pointer-events: none;
  }

  .ha-benefits__card h3,
  .ha-benefits__card.is-active h3 {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
    color: #fff !important;
    transition: none !important;
  }

  .ha-benefits__card p,
  .ha-benefits__card.is-active p {
    max-height: none !important;
    margin: 0;
    overflow: visible;
    opacity: 1 !important;
    transform: none !important;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #fff !important;
    transition: none !important;
  }

  .ha-benefits .ha-pager {
    width: 165px;
    height: 40px;
    margin-top: 24px;
    padding: 5px;
    background: #F3F3F3;
  }

  .ha-benefits .ha-pager__btn--prev {
    background: #fff;
    color: #666;
  }

  .ha-benefits .ha-pager__btn--prev:not(:disabled) {
    background: #2C2D88;
    color: #fff;
  }

  .ha-benefits .ha-pager__btn--next {
    background: #2C2D88;
    color: #fff;
  }

  .ha-benefits .ha-pager__btn--next:disabled {
    background: #fff;
    color: #666;
  }

  /* Generation — phone Figma (white stacked: title, image, copy, advantages) */
  .ha-generation {
    display: block;
    min-height: 0;
    padding: 30px 0 52px;
    background: #FFFFFF;
    overflow: visible;
  }

  .ha-generation__bg-picture,
  .ha-generation__overlay {
    display: none !important;
  }

  .ha-generation .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    justify-content: flex-start;
    padding: 0 20px;
  }

  .ha-generation__mobile-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 362px;
    margin: 0;
  }

  .ha-generation__mobile-title {
    width: 100%;
    max-width: 279px;
    margin: 0;
    font-family: "Inter Display", Inter, sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -1px;
    text-align: center;
    color: #2C2D88;
  }

  .ha-generation__mobile-media {
    width: 100%;
    max-width: 362px;
    height: 339px;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #F2F2F2;
  }

  .ha-generation__mobile-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scaleX(-1);
  }

  .ha-generation .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    width: 100%;
    max-width: 362px;
    margin: 0;
  }

  .ha-generation .col-lg-7,
  .ha-generation .col-lg-5 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0;
  }

  .ha-generation__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 362px;
    margin: 0;
    color: #444444;
  }

  .ha-generation__content > #ha-generation-heading,
  .ha-generation__content h2#ha-generation-heading {
    display: none !important;
  }

  .ha-generation__lead--desktop,
  .ha-generation__readmore,
  .ha-generation__divider {
    display: none !important;
  }

  .ha-generation__lead--mobile {
    display: block !important;
    width: 100%;
    max-width: none;
    margin: 0 0 24px;
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #444444;
  }

  .ha-generation__advantages-label {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 32px 20px 0;
    font-family: "Inter Display", Inter, sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -1px;
    color: #2C2D88;
    background: #F4F5F4;
    border-radius: 16px 16px 0 0;
  }

  .ha-generation__grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 24px 16px 32px;
    background: #F4F5F4;
    border-radius: 0 0 16px 16px;
  }

  .ha-generation__item {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 16px;
    background: #FFFFFF;
    border-left: 1px solid #009C43;
    border-radius: 10px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0;
    color: #444444;
  }

  /* Features */
  .ha-features {
    padding: 52px 0 40px;
    background: #FFFFFF;
  }

  .ha-features__header {
    max-width: none;
    margin-bottom: 16px;
    padding: 0;
    border: 0;
  }

  .ha-features__header h2 {
    max-width: 279px;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -1px;
    color: #222;
  }

  .ha-features__lead {
    max-width: 322px;
    margin: 0 0 16px;
    padding-left: 20px;
    border-left: 3px solid #009C43;
    font-size: 16px;
    line-height: 1.5;
    color: #444;
  }

  .ha-features__shell {
    display: flex;
    flex-direction: column-reverse;
    gap: 24px;
    padding: 0;
    background: #FFFFFF;
    box-shadow: none;
    border: 0;
    border-radius: 0;
  }

  .ha-features__device-wrap {
    display: flex;
    justify-content: center;
    grid-area: unset;
  }

  .ha-features__device {
    width: min(288px, 100%);
    margin: 0 auto;
  }

  .ha-features__card {
    grid-area: unset;
    background: transparent;
    box-shadow: none;
  }

  .ha-features__list {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .ha-features__list::-webkit-scrollbar {
    display: none;
  }

  .ha-features__item {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    scroll-snap-align: start;
    padding: 20px;
    background: #fff;
    border-radius: 20px;
  }

  .ha-features__item h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: -0.01em;
    color: #444;
  }

  .ha-features__item p {
    max-width: none;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.01em;
    color: #444;
  }

  .ha-features .ha-pager {
    margin-top: 24px;
  }

  /* Products */
  .ha-products {
    padding: 62px 0 52px;
    background: #00A94F;
  }

  .ha-products__header h2 {
    max-width: 279px;
    margin-bottom: 32px;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -1px;
    color: #fff;
  }

  .ha-products__track {
    overflow: hidden;
  }

  .ha-products__row {
    flex-wrap: nowrap;
    gap: 20px;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .ha-products__row::-webkit-scrollbar {
    display: none;
  }

  .ha-products__row > [class*="col-"] {
    flex: 0 0 295px;
    max-width: 295px;
    padding: 0;
    scroll-snap-align: start;
  }

  .ha-product-card {
    height: 100%;
    min-height: 461px;
  }

  .ha-products .ha-pager {
    margin-top: 32px;
  }

  .ha-products .ha-pager__btn--prev {
    background: #ECECEC;
    color: #666;
  }

  .ha-products .ha-pager__btn--next {
    background: #009C43;
    color: #fff;
  }

  /* Types tabs (phone) — keep tabs; tablet slider pager stays hidden */
  .ha-types .ha-pager--types {
    display: none !important;
  }

  .ha-types {
    padding: 52px 0;
  }

  .ha-types .section-title {
    max-width: 279px;
    margin-left: auto;
    margin-right: auto;
    font-size: 28px;
  }

  .ha-types .section-desc {
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
  }

  .ha-types__tabs {
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 362px;
    height: 54px;
    margin: 0 auto 24px;
    padding: 9px;
    background: #F2F2F2;
    border-radius: 30px;
  }

  .ha-types__tab {
    flex: 1;
    height: 36px;
    padding: 4px 12px;
    border: 0;
    border-radius: 30px;
    background: transparent;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
  }

  .ha-types__tab.is-active {
    background: #2C2D88;
    color: #fff;
  }

  .ha-types__panels > [data-type-panel] {
    display: none;
  }

  .ha-types__panels > [data-type-panel].is-active {
    display: block;
  }

  .ha-types__panels {
    margin: 0;
  }

  .ha-types__panels > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .ha-type-card {
    min-height: 615px;
  }

  .ha-type-card h3 {
    font-size: 24px;
  }

  .ha-type-card p {
    font-size: 18px;
  }

  .ha-types__footer p {
    font-size: 18px;
    line-height: 1.5;
  }

  .ha-types__footer .btn {
    width: 100%;
    padding: 16px 30px;
    background: #3B3CB4;
    border-color: #3B3CB4;
    border-radius: 30px;
  }

  /* Steps */
  .ha-steps {
    padding: 20px 0 52px;
  }

  .ha-steps .section-title {
    max-width: 279px;
    margin-left: auto;
    margin-right: auto;
    font-size: 28px;
  }

  .ha-steps .row {
    flex-direction: column-reverse;
  }

  .ha-steps__media {
    margin-bottom: 24px;
    border-radius: 16px;
    overflow: hidden;
    min-height: 320px;
  }

  .ha-steps__media-img {
    height: 320px;
    object-fit: cover;
  }

  .ha-steps__layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .ha-steps__row {
    display: none;
    gap: 0;
  }

  .ha-steps__row.is-active {
    display: block;
  }

  .ha-steps__marker {
    display: none;
  }

  .ha-steps__item {
    width: 100%;
    padding: 26px;
    background: #009C43;
    border: 0;
    border-radius: 16px;
    text-align: left;
    color: #fff;
  }

  .ha-steps__title {
    display: block;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: #fff;
  }

  .ha-steps__text {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
  }

  .ha-steps__text-inner {
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
  }

  .hearingAidsPage .ha-steps__mobile-stepper {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 24px;
  }

  .ha-steps__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid #A1AEBE;
    border-radius: 50%;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #242E39;
  }

  .ha-steps__dot.is-active {
    border-color: #009C43;
    background: #009C43;
    color: #fff;
  }

  .ha-steps__trail {
    flex: 1;
    max-width: 50px;
    height: 2px;
    background: #A1AEBE;
  }

  .ha-steps__trail.is-active {
    background: #009C43;
  }

  .ha-steps .section-header {
    margin-bottom: 0;
  }

  .ha-steps__mobile-intro {
    display: block;
    margin: 24px 0 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: #444;
  }

  /* Lifestyle */
  .ha-lifestyle {
    padding: 52px 0;
    background: #FAFAFA;
  }

  .ha-lifestyle .section-header {
    text-align: left !important;
  }

  .ha-lifestyle .section-title {
    font-size: 28px;
    text-align: left;
  }

  .ha-lifestyle .section-desc {
    margin-left: 0 !important;
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
 
  }

  .ha-lifestyle__item {
    padding-left: 16px;
    border-left: 2px solid #009C43;
  }

  .ha-lifestyle__item h3 {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: #222;
  }

  .ha-lifestyle__item p {
    font-size: 16px;
    line-height: 19px;
    color: #444;
  }

  /* Care carousel */
  .ha-care {
    padding: 52px 0;
  }

  .ha-care .section-title {
    max-width: 279px;
    margin-left: auto;
    margin-right: auto;
    font-size: 28px;
  }

  .ha-care__track {
    overflow: hidden;
  }

  .ha-care__row {
    flex-wrap: nowrap;
    gap: 20px;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .ha-care__row::-webkit-scrollbar {
    display: none;
  }

  .ha-care__row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding: 0;
    scroll-snap-align: start;
  }

  .ha-care__card {
    min-height: 505px;
    border-radius: 18px;
  }

  .ha-care .ha-pager {
    margin-top: 24px;
  }

  /* CTA */
  .ha-cta {
    padding: 0 0 52px;
    background: #FAFAFA;
  }

  .ha-cta__row {
    flex-direction: column-reverse;
  }

  .ha-cta__media {
    margin-bottom: 24px;
  }

  .ha-cta__copy h2 {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -1px;
    color: #2C2D88;
  }

  .ha-cta__copy p {
    font-size: 16px;
    line-height: 19px;
    color: #444;
  }

  .ha-cta__btn {
    width: 100%;
    padding: 16px 30px;
    background: #2C2D88;
    border-color: #2C2D88;
    border-radius: 30px;
  }

  /* FAQ */
  .ha-faq {
    padding: 52px 0;
  }

  .ha-faq .section-title {
    font-size: 28px;
  }

  .ha-faq__item:nth-child(n + 5) {
    display: none;
  }

  .ha-faq.is-expanded .ha-faq__item:nth-child(n + 5) {
    display: block;
  }

  .ha-faq__more {
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 24px;
    padding: 15px 30px;
    background: #2C2D88;
    border: 1px solid #2C2D88;
    border-radius: 10px;
    font-family: "Inter Display", Inter, sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
  }

  .ha-faq__button,
  .ha-faq__body {
    padding-right: 56px !important;
  }

  .ha-faq__item.is-open .ha-faq__button {
    color: #009C43;
  }
  .ha-features__card {
    flex: 0 0 auto;
    width: 85%;
}
}


.hearing_aid_banner .hero-banner__content {
  max-width: 680px!important;
}

/* ==========================================================================
   Hearing Aids — Tablet only (768px–991.98px)
   Mirrors mobile section behavior (sliders, tabs, steppers) with tablet
   spacing/proportions. Does not change mobile (≤767.98) or desktop (≥992).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hearingAidsPage {
    overflow-x: clip;
  }

  .hearing_aid_banner .hero-banner__content {
    max-width: 380px!important;
  }

  /* Shared compact chrome (same components as mobile) */
  .hearingAidsPage .ha-banner__cta-desktop,
  .hearingAidsPage .ha-generation__lead--mobile,
  .hearingAidsPage .ha-generation__mobile-head,
  .hearingAidsPage .ha-generation__advantages-label,
  .hearingAidsPage .ha-generation__overlay,
  .hearingAidsPage .ha-lifestyle__rule {
    display: none !important;
  }

  .hearingAidsPage .ha-banner__cta-mobile:not([hidden]),
  .hearingAidsPage .ha-pager:not([hidden]):not(.ha-pager--features),
  .hearingAidsPage .ha-faq__more:not([hidden]) {
    display: flex !important;
  }

  .hearingAidsPage .ha-banner__cta-mobile:not([hidden]) {
    display: inline !important;
  }

  /* Steps: tablet uses vertical markers + all accordion rows (not phone stepper) */
  .hearingAidsPage .ha-steps__mobile-stepper,
  .hearingAidsPage .ha-steps__mobile-intro {
    display: none !important;
  }

  /* Types: tablet uses card slider + pager, not BTE/RIC/CIC tabs */
  .hearingAidsPage .ha-types__tabs,
  .hearingAidsPage .ha-types__cta-mobile {
    display: none !important;
  }

  .hearingAidsPage .ha-types__cta-desktop {
    display: inline !important;
  }

  .hearingAidsPage .ha-features .ha-pager,
  .hearingAidsPage .ha-features #haFeaturesPager {
    display: none !important;
  }

  /* Pager */
  .ha-pager {
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 180px;
    height: 44px;
    margin: 0 auto;
    padding: 6px;
    background: #F2F2F2;
    border-radius: 30px;
    position: relative;
  }

  .ha-pager--light {
    background: #FFFFFF;
  }

  .ha-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 30px;
    background: #2C2D88;
    color: #fff;
    flex-shrink: 0;
  }

  .ha-pager--light .ha-pager__btn--prev {
    background: #ECECEC;
    color: #666;
  }

  .ha-pager--features .ha-pager__btn--prev {
    background: #fff;
    color: #666;
  }

  .ha-pager__btn:disabled {
    opacity: 0.45;
  }

  .ha-pager__label {
    flex: 1;
    text-align: center;
    font-family: "Inter Display", Inter, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: #666;
  }

  /* Banner */
  .hearingAidsPage .ha-banner {
    min-height: 520px;
    height: 520px;
  }

  .hearingAidsPage .ha-banner__overlay {
    background: linear-gradient(180deg, #010101 20.25%, rgba(1, 1, 1, 0.75) 65.35%, rgba(1, 1, 1, 0.5) 83.68%, rgba(1, 1, 1, 0.25) 92.84%, rgba(1, 1, 1, 0) 100%);
  }

  .hearingAidsPage .ha-banner__content {
    max-width: 420px;
    padding-top: 48px;
  }

  .hearingAidsPage .ha-banner__content h1 {
    margin-bottom: 20px;
    font-size: 42px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -1px;
    color: #fff;
  }

  .hearingAidsPage .ha-banner__content .btn {
    padding: 12px 24px;
    background: #3B3CB4;
    border-color: #3B3CB4;
    font-size: 15px;
    font-weight: 500;
  }

  /* Intro */
  .ha-intro {
    padding: 56px 0;
    background: #F5F5F5;
  }

  .ha-intro .section-title {
    text-align: left;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -1px;
    color: #2C2D88;
  }

  .ha-intro__media {
    min-height: 420px;
    border-radius: 14px;
  }

  .ha-intro__media-bg {
    min-height: 420px;
  }

  .ha-intro__panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    border-radius: 20px;
    background: #fff;
  }

  .ha-intro__panel p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: #444;
  }

  .ha-intro__panel .btn {
    width: auto;
    align-self: flex-start;
    margin-top: 8px;
    padding: 14px 28px;
    background: #2C2D88;
    border-color: #2C2D88;
    border-radius: 40px;
    font-size: 15px;
  }

  /* Benefits — tablet carousel (Figma Six Ways TAB) */
  .ha-benefits {
    padding: 52px 0 64px;
    background: #fff;
  }

  .ha-benefits .container {
    padding-left: 32px;
    padding-right: 32px;
  }

  .ha-benefits__pin-track {
    height: auto !important;
  }

  .ha-benefits__pin-stage {
    position: relative !important;
    top: auto !important;
    height: auto;
    min-height: 0 !important;
    padding: 0;
    align-items: flex-start;
  }

  .ha-benefits__layout {
    --bs-gutter-x: 0;
    --bs-gutter-y: 32px;
    align-items: stretch !important;
  }

  .ha-benefits__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .ha-benefits__intro .section-title {
    max-width: 632px;
    margin: 0;
    font-family: "Inter Display", Inter, sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 54px;
    letter-spacing: -1px;
    text-align: center;
    color: #2C2D88;
  }

  .ha-benefits__intro p {
    max-width: 631px;
    margin: 0;
    padding-left: 0;
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: center;
    color: #333333;
  }

  .ha-benefits__intro p::before {
    display: none;
  }

  .ha-benefits__scroller {
    height: auto;
    max-height: none !important;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ha-benefits__list {
    display: flex;
    flex-direction: row !important;
    align-items: stretch;
    gap: 20px;
    transform: none !important;
    transition: none !important;
    will-change: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .ha-benefits__list::-webkit-scrollbar {
    display: none;
  }

  .ha-benefits__card,
  .ha-benefits__card.is-active {
    position: relative;
    display: block;
    flex: 0 0 min(650px, calc(100% - 40px));
    width: min(650px, calc(100% - 40px));
    max-width: none;
    height: 266px;
    min-height: 0 !important;
    margin: 0;
    padding: 0;
    gap: 0;
    opacity: 1;
    transform: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    filter: none;
    overflow: hidden;
    background: #DEDEDE !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    transition: none !important;
  }

  .ha-benefits__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(182.5deg, rgba(0, 0, 0, 0) 50.83%, rgba(0, 0, 0, 0.7) 77.87%);
    pointer-events: none;
  }

  .ha-benefits__card > img,
  .ha-benefits__card.is-active > img {
    position: absolute !important;
    inset: 0 !important;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 1 !important;
    transform: none !important;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    pointer-events: none;
    transition: none !important;
  }

  .ha-benefits__card-body,
  .ha-benefits__card.is-active .ha-benefits__card-body {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 24px;
    background: transparent !important;
    border-radius: 0;
    transition: none !important;
  }

  .ha-benefits__card-body > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    flex: 1;
  }

  .ha-benefits__icon {
    width: 42px;
    height: 42px;
    margin: 0;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    align-self: flex-start;
    flex-shrink: 0;
  }

  .ha-benefits__icon img,
  .ha-benefits__card .ha-benefits__icon img,
  .ha-benefits__card.is-active .ha-benefits__icon img {
    position: relative !important;
    inset: auto !important;
    display: block;
    width: 42px !important;
    height: 42px !important;
    max-width: none;
    opacity: 1 !important;
    transform: none !important;
    object-fit: contain;
    object-position: center;
    border-radius: 0 !important;
    pointer-events: none;
  }

  .ha-benefits__card h3,
  .ha-benefits__card.is-active h3 {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.5;
    color: #fff !important;
    transition: none !important;
  }

  .ha-benefits__card p,
  .ha-benefits__card.is-active p {
    max-height: none !important;
    margin: 0;
    overflow: visible;
    opacity: 1 !important;
    transform: none !important;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
    color: #fff !important;
    transition: none !important;
  }

  .ha-benefits .ha-pager {
    width: 165px;
    height: 40px;
    margin-top: 32px;
    padding: 5px;
    background: #F3F3F3;
  }

  .ha-benefits .ha-pager__btn--prev {
    background: #fff;
    color: #666;
  }

  .ha-benefits .ha-pager__btn--prev:not(:disabled) {
    background: #2C2D88;
    color: #fff;
  }

  .ha-benefits .ha-pager__btn--next {
    background: #2C2D88;
    color: #fff;
  }

  .ha-benefits .ha-pager__btn--next:disabled {
    background: #fff;
    color: #666;
  }

  /* Generation — Figma tablet (834 / olive + bottom photo) */
  .ha-generation {
    display: block;
    min-height: 115vh;
    background: #433F25;
    overflow: hidden;
  }

  .ha-generation__bg-picture {
    top: auto;
    bottom: 0;
    height: calc(783 / 1012 * 100%);
    min-height: 520px;
    inset: auto 0 0 0;
  }

  .ha-generation__bg {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .ha-generation .container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 52px;
    padding-bottom: 420px;
  }

  .ha-generation .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin: 0;
    width: 100%;
  }

  .ha-generation .col-lg-7,
  .ha-generation .col-lg-5 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0;
  }

  .ha-generation__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-width: 754px;
    margin: 0;
    color: #fff;
  }

  .ha-generation__content h2 {
    display: block !important;
    width: 100%;
    max-width: 754px;
    margin: 0 0 24px;
    font-family: "Inter Display", Inter, sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -1px;
    color: #fff;
  }

  .ha-generation__lead--desktop {
    display: block !important;
    max-width: 415px;
    margin: 0 0 12px;
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 27px;
    color: #fff;
  }

  .ha-generation__readmore {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 130px;
    min-width: 118px;
    height: 43px;
    margin: 32px 0 32px;
    padding: 10px 20px;
    background: #2C2D88 !important;
    border-color: #2C2D88 !important;
    border-radius: 40px;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: #fff !important;
  }

  .ha-generation__divider {
    display: block !important;
    width: 100%;
    max-width: 754px;
    margin: 0 0 32px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    opacity: 1;
  }

  .ha-generation__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 260px));
    column-gap: 72px;
    row-gap: 60px;
    width: 100%;
    max-width: 754px;
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
  }

  .ha-generation__item {
    box-sizing: border-box;
    width: 100%;
    min-height: 58px;
    padding: 5px 16px;
    background: transparent;
    border-left: 5px solid #fff;
    border-radius: 10px;
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: #fff;
  }

  /* Features — tablet: simple white card, no union curves */
  .ha-features {
    padding: 52px 0 48px;
    background: #FFFFFF;
  }

  .ha-features .container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .ha-features__header {
    display: block;
    max-width: 536px;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
  }

  .ha-features__header h2 {
    max-width: 536px;
    margin: 0;
    font-family: "Inter Display", Inter, sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -2px;
    color: #222222;
  }

  .ha-features__shapes,
  .ha-features__shape {
    display: none !important;
  }

  .ha-features__shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
    grid-template-areas:
      "lead device"
      "card card";
    align-items: start;
    column-gap: 24px;
    row-gap: 28px;
    padding: 40px;
    border-radius: 20px;
    background: #FFFFFF !important;
    box-shadow: none;
    border: 1px solid #E8E8E8;
    overflow: hidden;
    filter: none;
  }

  .ha-features__lead {
    grid-area: lead;
    align-self: start;
    max-width: 340px;
    margin: 0;
    padding: 0 0 0 24px;
    background: transparent;
    border-left: 4px solid #009C43;
    border-radius: 0;
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: -0.02em;
    color: #4C4B59;
    box-shadow: none;
  }

  .ha-features__lead::before {
    display: none;
  }

  .ha-features__device-wrap {
    grid-area: device;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: start;
    margin: 0;
    padding: 0;
    min-height: 0;
    background: transparent;
    border-radius: 0;
  }

  .ha-features__device {
    width: 220px;
    max-width: 100%;
    height: auto;
    margin: 0;
    filter: none;
  }

  .ha-features__card {
    grid-area: card;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .ha-features__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    row-gap: 32px;
    overflow: visible;
    scroll-snap-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .ha-features__list::-webkit-scrollbar {
    display: none;
  }

  .ha-features__item {
    flex: none;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    scroll-snap-align: unset;
  }

  .ha-features__icon {
    width: 32px;
    padding-top: 6px;
  }

  .ha-features__icon-img {
    width: 28px;
    height: 28px;
  }

  .ha-features__item h3 {
    margin: 0 0 3px;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: -0.01em;
    color: #444444;
  }

  .ha-features__item p {
    max-width: 222px;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.01em;
    color: #444444;
  }

  .hearingAidsPage .ha-features .ha-pager,
  .hearingAidsPage .ha-features #haFeaturesPager,
  .ha-features .ha-pager,
  .ha-features #haFeaturesPager {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Products carousel */
  .ha-products {
    padding: 64px 0 56px;
    background: #00A94F;
  }

  .ha-products__header h2 {
    max-width: 420px;
    margin-bottom: 36px;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -1px;
    color: #fff;
  }

  .ha-products__track {
    overflow: hidden;
  }

  .ha-products__row {
    flex-wrap: nowrap;
    gap: 24px;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ha-products__row::-webkit-scrollbar {
    display: none;
  }

  .ha-products__row > [class*="col-"] {
    flex: 0 0 340px;
    max-width: 340px;
    padding: 0;
    scroll-snap-align: start;
  }

  .ha-product-card {
    height: 100%;
    min-height: 480px;
  }

  .ha-products .ha-pager {
    margin-top: 36px;
  }

  .ha-products .ha-pager__btn--prev {
    background: #ECECEC;
    color: #666;
  }

  .ha-products .ha-pager__btn--next {
    background: #009C43;
    color: #fff;
  }

  /* Types — tablet Figma slider (2 cards visible, pager, no tabs) */
  .ha-types {
    padding: 52px 0 64px;
    background: #FFFFFF;
  }

  .ha-types .section-header {
    margin-bottom: 36px;
  }

  .ha-types .section-title {
    max-width: 478px;
    margin: 0 auto;
    font-family: "Inter Display", Inter, sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 54px;
    letter-spacing: -1px;
    color: #2C2D88;
  }

  .ha-types .section-desc {
    max-width: 598px;
    margin: 16px auto 0;
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: center;
    color: #444444;
  }

  .ha-types__tabs {
    display: none !important;
  }

  .ha-types__panels {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ha-types__panels::-webkit-scrollbar {
    display: none;
  }

  .ha-types__panels > [data-type-panel],
  .ha-types__panels > [class*="col-"] {
    display: block !important;
    flex: 0 0 calc((100% - 10px) / 2);
    width: calc((100% - 10px) / 2);
    max-width: 407px;
    padding: 0;
    scroll-snap-align: start;
  }

  .ha-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 636px;
    height: 100%;
    padding: 44px 24px 0;
    border-radius: 10px;
    background: linear-gradient(158.11deg, #EAEAEE 29.16%, #FFFFFF 47.66%, #E1E2E5 84.65%);
  }

  .ha-type-card__icon {
    width: 100px;
    height: 100px;
    margin-bottom: 22px;
  }

  .ha-type-card h3 {
    max-width: 309px;
    margin: 0 0 16px;
    font-family: "Inter Display", Inter, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.97px;
    color: #2C2D88;
  }

  .ha-type-card p {
    max-width: 331px;
    margin: 0 auto 24px;
    font-size: 18px;
    line-height: 1.5;
    color: #444444;
  }

  .ha-type-card > img {
    width: min(100%, 315px);
    margin-top: auto;
  }

  .ha-types .ha-pager--types {
    display: flex;
    width: 165px;
    height: 40px;
    margin: 32px auto 0;
    padding: 5px;
    background: #F3F3F3;
  }

  .ha-types .ha-pager--types .ha-pager__btn {
    width: 46px;
    height: 30px;
  }

  .ha-types .ha-pager--types .ha-pager__btn--prev {
    background: #FFFFFF;
    color: #666666;
  }

  .ha-types .ha-pager--types .ha-pager__btn--next {
    background: #2C2D88;
    color: #fff;
  }

  .ha-types .ha-pager--types .ha-pager__label {
    font-size: 14px;
    line-height: 1.3;
    color: #666666;
  }

  .ha-types__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 637px;
    margin: 42px auto 0;
  }

  .ha-types__footer p {
    max-width: none;
    margin: 0;
    font-size: 20px;
    line-height: 30px;
    color: #444444;
  }

  .ha-types__footer .btn {
    width: auto;
    min-width: 0;
    padding: 16px 30px;
    background: #3B3CB4;
    border-color: #3B3CB4;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 500;
  }

  /* Steps — tablet Figma: image on top, vertical markers + accordion rows */
  .ha-steps {
    padding: 52px 0 64px;
    background: #F9F9F9;
  }

  .ha-steps .section-header {
    margin-bottom: 32px;
  }

  .ha-steps .section-title {
    max-width: 461px;
    margin: 0 auto;
    font-family: "Inter Display", Inter, sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 54px;
    letter-spacing: -1px;
    color: #2C2D88;
  }

  .ha-steps__mobile-intro {
    display: none !important;
  }

  .ha-steps .row {
    flex-direction: column-reverse;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    gap: 32px;
  }

  .ha-steps .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0;
  }

  .ha-steps__media {
    width: 100%;
    max-width: 754px;
    margin: 0 auto;
    min-height: 470px;
    height: 470px;
    border-radius: 15px;
    overflow: hidden;
  }

  .ha-steps__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: luminosity;
  }

  .ha-steps__mobile-stepper {
    display: none !important;
  }

  .ha-steps__layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 754px;
    margin: 0 auto;
    padding-left: 0;
  }

  .ha-steps__row {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 20px;
    align-items: stretch;
  }

  .ha-steps__marker {
    display: flex;
    justify-content: center;
    padding-top: 22px;
  }

  .ha-steps__marker span {
    width: 32px;
    height: 32px;
    border: 2px solid #DBDBDB;
    background: #FFFFFF;
    color: #242E39;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
  }

  .ha-steps__row.is-active .ha-steps__marker span {
    background: #009C43;
    border-color: #009C43;
    color: #FFFFFF;
  }

  .ha-steps__marker::after {
    top: calc(22px + 32px + 2px);
    bottom: -22px;
    background: #DBDBDB;
  }

  .ha-steps__item {
    width: 100%;
    padding: 26px;
    text-align: left;
    background: #F5F5F5;
    border: 1px solid #DBDBDB;
    border-radius: 16px;
    color: #222222;
  }

  .ha-steps__title {
    display: block;
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: #222222;
  }

  .ha-steps__text {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
  }

  .ha-steps__text-inner {
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
  }

  .ha-steps__item.is-open {
    background: #009C43;
    border-color: #009C43;
  }

  .ha-steps__item.is-open .ha-steps__title {
    color: #FFFFFF;
  }

  .ha-steps__item.is-open .ha-steps__text {
    grid-template-rows: 1fr;
    margin-top: 20px;
    opacity: 1;
  }

  /* Lifestyle */
  .ha-lifestyle {
    padding: 56px 0;
    background: #FAFAFA;
  }

  .ha-lifestyle .section-header {
    text-align: left !important;
  }

  .ha-lifestyle .section-title {
    font-size: 32px;
    text-align: left;
  }

  .ha-lifestyle .section-desc {
    margin-left: 0 !important;
    max-width: 560px;
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
    margin-bottom: 2rem;
  }

  .ha-lifestyle__item {
    padding-left: 18px;
  }

  .ha-lifestyle__item h3 {
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    color: #222;
  }

  .ha-lifestyle__item p {
    font-size: 16px;
    line-height: 1.4;
    color: #444;
  }

  /* Care carousel — tablet: 2 cards visible + peek of next */
  .ha-care {
    padding: 56px 0;
    background: #F9F9F9;
  }

  .ha-care .section-title {
    max-width: 478px;
    margin-left: auto;
    margin-right: auto;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -1px;
    color: #2C2D88;
  }

  .ha-care .section-desc {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
    line-height: 1.5;
    color: #444444;
  }

  .ha-care__track {
    overflow: hidden;
  }

  .ha-care__row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    flex-wrap: nowrap;
    gap: 20px;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ha-care__row::-webkit-scrollbar {
    display: none;
  }

  .ha-care__row > [class*="col-"] {
    flex: 0 0 calc((100% - 20px) / 2.15);
    max-width: calc((100% - 20px) / 2.15);
    width: calc((100% - 20px) / 2.15);
    padding: 0;
    scroll-snap-align: start;
  }

  .ha-care__card {
    min-height: 505px;
    border-radius: 18px;
  }

  .ha-care .ha-pager {
    display: flex;
    width: 165px;
    height: 40px;
    margin: 28px auto 0;
    padding: 5px;
    background: #F3F3F3;
  }

  .ha-care .ha-pager__btn {
    width: 46px;
    height: 30px;
  }

  .ha-care .ha-pager__btn--prev {
    background: #FFFFFF;
    color: #666666;
  }

  .ha-care .ha-pager__btn--next {
    background: #2C2D88;
    color: #fff;
  }

  /* CTA — tablet Figma: text left + device image right (side by side) */
  .ha-cta {
    padding: 48px 0;
    background: #F9F9F9;
  }

  .ha-cta__row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    --bs-gutter-x: 20px;
    --bs-gutter-y: 0;
  }

  .ha-cta__row > .col-lg-7 {
    flex: 0 0 56%;
    width: 56%;
    max-width: 56%;
    padding-right: 12px;
  }

  .ha-cta__row > .col-lg-5 {
    flex: 0 0 44%;
    width: 44%;
    max-width: 44%;
    padding-left: 12px;
  }

  .ha-cta__content {
    gap: 28px;
    max-width: none;
    align-items: flex-start;
  }

  .ha-cta__copy {
    max-width: none;
    margin: 0;
    text-align: left;
  }

  .ha-cta__copy h2 {
    margin: 0 0 16px;
    font-family: "Inter Display", Inter, sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -1px;
    color: #2C2D88;
  }

  .ha-cta__copy p {
    max-width: 420px;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #444444;
  }

  .ha-cta__btn {
    width: auto;
    min-width: 148px;
    min-height: 48px;
    padding: 14px 28px;
    background: #2C2D88;
    border-color: #2C2D88;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 500;
  }

  .ha-cta__media {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    max-width: none;
  }

  .ha-cta__media picture {
    display: block;
    width: 100%;
    max-width: 360px;
  }

  .ha-cta__device {
    width: 100%;
    max-width: 360px;
    height: auto;
    border-radius: 0;
    object-fit: contain;
  }

  /* Soft blend for tablet CTA photo into section bg */
  .ha-cta__media::after {
    left: 0;
    right: 0;
    height: 28%;
    background: linear-gradient(180deg, rgba(249, 249, 249, 0) 0%, #F9F9F9 90%);
  }

  /* FAQ */
  .ha-faq {
    padding: 56px 0;
  }

  .ha-faq .section-title {
    font-size: 32px;
  }

  .ha-faq__item:nth-child(n + 5) {
    display: none;
  }

  .ha-faq.is-expanded .ha-faq__item:nth-child(n + 5) {
    display: block;
  }

  .ha-faq__more {
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 220px;
    margin: 28px auto 0;
    padding: 15px 30px;
    background: #2C2D88;
    border: 1px solid #2C2D88;
    border-radius: 10px;
    font-family: "Inter Display", Inter, sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
  }

  .ha-faq__button,
  .ha-faq__body {
    padding-right: 56px !important;
  }

  .ha-faq__item.is-open .ha-faq__button {
    color: #009C43;
  }
}

/* 1440px container */
@media (min-width: 1500px) {
  .container {
    max-width: 1400px;
  }
}

/* 1500px container */
@media (min-width: 1600px) {
  .container {
    max-width: 1500px;
  }
}

/* 1600px container */
@media (min-width: 1700px) {
  .container {
    max-width: 1600px;
  }
}

/* ==========================================
   Hearing Aids Styles - End
========================================== */