/* ==========================================================================
   Sounds Good — Responsive Overrides
   ========================================================================== */

.aboutPage,
.hearingLossPage,
.testimonialsPage,
.contactPage {
  overflow-x: clip;
}

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

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

  /* About — large tablet */
  .about-carousel__grid {
    gap: var(--space-4);
  }

  .about-touch__gallery {
    gap: var(--space-4);
  }
  /* Contact — large tablet */
  .contact-booking__card {
    gap: 20px;
    padding: 20px;
  }
  .contact-booking__hero {
    min-height: 360px;
    background-color: #3B3CB4;
  }

  .contact-booking__clinic-copy strong,
  .contact-booking__home-copy strong {
    font-size: 22px;
  }

  .contact-booking__clinic-copy p,
  .contact-booking__home-copy p {
    font-size: 16px;
  }

  .contact-branches__list-wrap {
    width: 300px;
    min-height: 0;
  }

  .contact-branches__heading {
    font-size: 26px;
  }

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

  .contact-branches__detail-title {
    font-size: 24px;
  }

  /* Hearing Loss — large tablet */
  .hl-banner__layout {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 0.85fr);
    gap: var(--space-5);
    min-height: 480px;
    padding-block: var(--space-10);
  }

  .hl-banner__aside {
    --hl-cluster-w: 360px;
    --hl-cluster-h: 306px;
    transform: scale(0.88);
    transform-origin: center right;
    margin-right: -12px;
  }

  .hl-banner__card--untreated {
    left: 128px;
    width: 232px;
    height: 160px;
    padding: 16px 12px;
  }

  .hl-banner__card--aids {
    width: 182px;
    height: 192px;
    top: 114px;
    padding: 10px 14px 18px 16px;
  }

  .hl-banner__card--prevalence {
    left: 196px;
    top: 174px;
    width: 164px;
    height: 132px;
    padding: 16px 14px;
  }

  .hl-banner__card-title {
    font-size: 17px;
  }

  .hl-banner__card-text,
  .hl-banner__card-text--single {
    font-size: 13px;
  }

  .hl-banner__card--aids .hl-banner__aid img {
    width: 60px;
  }

  .hl-understanding__title,
  .hl-check__header h2,
  .hl-challenges__header h2,
  .hl-journey__header h2,
  .hl-connect__copy h2 {
    font-size: clamp(30px, 3vw, 36px);
  }

  .hl-check__grid {
    gap: 16px;
  }

  .hl-check__card > p {
    font-size: 18px;
    line-height: 1.4;
  }

  .hl-journey__grid {
    gap: 16px;
  }

  .hl-challenges__card h3 {
    font-size: 22px;
    line-height: 1.35;
  }

  .hl-challenges__card p,
  .hl-challenges__note {
    font-size: 18px;
    line-height: 1.45;
  }
}

/* Hero — iPad landscape / large tablet image framing */
@media (min-width: 992px) and (max-width: 1024px) {
  .hero-banner__viewport,
  .hero-banner__slide {
    height: 600px;
  }

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

  .hero-banner__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .footer-location__card {
    min-height: 300px!important;
  }

}

@media (max-width: 991px) {
  /* Hero — tablet / iPad image framing */
  .hero-banner__viewport,
  .hero-banner__slide {
    height: 560px;
  }

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

  .hero-banner__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .hero-banner__content {
    max-width: 480px;
  }

  .hero-banner__content h1 {
    font-size: clamp(30px, 4vw, 42px);
  }

  /* Social profile — Figma Rectangle 574056924 */
  .social-section .social-section__profile {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 362px;
    height: 119px;
    min-height: 119px;
    margin-inline: auto;
    margin-bottom: 28px;
    padding: 12px 14px 12px 12px;
    background: #f4f4f4;
    border-radius: 10px;
  }

  .social-section .social-section__profile-main {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    gap: 10px;
  }

  .social-section .social-section__avatar {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
  }

  .social-section .social-section__avatar img {
    width: 45px;
    max-height: 36px;
  }

  .social-section .social-section__profile-copy {
    min-width: 0;
  }

  .social-section .social-section__profile-name {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.3px;
    color: #009c43;
  }

  .social-section .social-section__profile-meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: #666;
  }

  .social-section .social-section__ig-btn {
    display: inline-flex;
    flex: 0 0 35px;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    min-width: 35px;
    max-width: 35px;
    padding: 0;
    gap: 0;
    color: #fff;
    background: #2c2d88;
    border-radius: 50%;
  }

  .social-section .social-section__ig-btn-text {
    display: none !important;
  }

  .social-section .social-section__ig-btn svg {
    display: block;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
  }

  .social-section .social-section__embed {
    width: 100%;
    max-width: 100%;
  }

  .social-section .social-section__embed iframe {
    width: 100% !important;
    height: 375px;
  }

  .brands-section__card {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: 32px 28px;
    gap: 28px;
  }

  .brands-section__title {
    flex: none;
    max-width: 320px;
  }

  .brands-section__logos {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .brands-section__row--bottom {
    max-width: none;
  }

  .brands-section__element {
    width: min(220px, 40%);
    opacity: 0.25;
  }

  .home-visit,
  .home-visit__container {
    min-height: 360px;
  }

  .home-visit__bg {
    background-size: auto 90%;
    background-position: right -40px bottom;
  }

  .home-visit__content {
    max-width: 420px;
  }

  .testimonials__slide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr) minmax(0, 1fr);
    grid-template-rows: 280px;
    gap: 16px;
  }

  .testimonials__card {
    padding: 18px 14px;
  }

  .testimonials__card > p {
    font-size: 14px;
  }

  /* About — tablet */
  .page-banner {
    min-height: 520px;
  }

  .page-banner.hl-banner {
    min-height: 0;
    align-items: stretch;
  }

  .page-banner__pin--left {
    left: 55%;
    top: 8%;
    width: 60px;
  }

  .page-banner__pin--right {
    right: 8%;
    width: 52px;
  }

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

  .about-carousel__grid {
    gap: var(--space-4);
  }

  .about-feature__pin--right {
    width: 90px;
    left: 40%;
  }

  .about-touch__gallery {
    gap: var(--space-4);
  }

  .about-story__block .row {
    --bs-gutter-y: 0.75rem;
  }

  .about-contact__inner {
    padding-inline: 0;
  }

  /* Contact page — tablet */
  .contact-booking {
    padding-top: var(--space-10);
    padding-bottom: var(--space-8);
  }

  .contact-booking__intro {
    margin-bottom: var(--space-8);
    padding-inline: 4px;
  }

  .contact-booking__title {
    font-size: clamp(26px, 4vw, 34px);
  }

  .contact-booking__lead {
    font-size: var(--font-size-base);
  }

  .contact-booking__card {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 20px;
  }

  .contact-booking__left,
  .contact-booking__forms {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
  }

  .contact-booking__hero {
    min-height: 340px;
    background-color: #3B3CB4;
  }

  .contact-booking__hero::before {
    background-size: cover;
    background-position: right bottom;
    opacity: 0.85;
  }

  .contact-booking__branches {
    max-width: min(100%, 360px);
  }

  .contact-booking__chips li {
    white-space: normal;
  }

  .contact-booking__forms {
    filter: none;
    box-shadow: none;
  }

  .contact-booking__form {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
  }

  .contact-booking__home {
    flex: 0 0 auto;
    min-height: 0;
  }

  .contact-booking__switch-btn,
  .contact-booking__submit {
    font-size: 18px;
  }

  .contact-branches {
    padding-block: var(--space-8) var(--space-10);
  }

  .contact-branches__panel {
    flex-direction: column;
    gap: 20px;
  }

  .contact-branches__list-wrap {
    flex: 1 1 auto;
    flex-shrink: 1;
    width: 100%;
    min-height: 0;
    padding: 16px 12px 20px;
  }

  .contact-branches__heading {
    font-size: 24px;
    padding: 12px 14px 16px;
  }

  .contact-branches__list {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    gap: 6px;
  }

  .contact-branches__item {
    font-size: 16px;
    min-height: 44px;
    padding: 10px 12px;
  }

  .contact-branches__detail {
    width: 100%;
    padding: 20px;
  }

  .contact-branches__detail-title {
    font-size: 22px;
  }

  .contact-branches__map iframe {
    min-height: 320px;
  }

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

  .contact-branches__meta-card {
    min-height: 0;
  }

  .contact-branches__meta-label {
    font-size: 18px;
  }

  /* Testimonials page — tablet */
  .testimonials-intro {
    padding: 72px 0 32px;
  }

  .testimonials-intro__title {
    font-size: 36px;
  }

  .testimonials-intro__lead {
    font-size: 18px;
    line-height: 1.5;
  }

  .testimonials-cta__panel {
    min-height: 280px;
    padding: 40px 40px;
    background-position: calc(100% + 40px) center;
  }

  .testimonials-cta__copy {
    max-width: 480px;
    gap: 28px;
  }

  .testimonials-cta__title {
    font-size: clamp(26px, 3.5vw, 36px);
  }

  .testimonials-cta__text {
    font-size: 18px;
  }

  .testimonials-faq__item {
    padding: 24px;
  }

  .testimonials-faq__trigger {
    align-items: flex-start;
    gap: 16px;
  }

  .testimonials-faq__icon {
    flex-shrink: 0;
    margin-top: 2px;
  }

  .hearingLossPage .hl-faq {
    padding-block: 64px;
  }

  .hearingLossPage .hl-faq .testimonials-faq__title {
    font-size: 32px;
  }

  .hearingLossPage #hearingLossFaq .hl-faq__item {
    gap: 20px;
    padding: 22px 22px 22px 0;
  }

  .hearingLossPage #hearingLossFaq .testimonials-faq__question {
    font-size: 18px;
    line-height: 1.35;
  }

  .hearingLossPage #hearingLossFaq .testimonials-faq__panel p {
    font-size: 16px;
  }

  /* Hearing Loss page — tablet */
  .hl-banner.page-banner {
    min-height: 0;
    align-items: stretch;
  }

  .hl-banner .page-banner__overlay {
    background: linear-gradient(
      180deg,
      rgba(44, 45, 136, 0.72) 0%,
      rgba(44, 45, 136, 0.42) 48%,
      rgba(0, 0, 0, 0.3) 100%
    );
  }

  .hl-banner__layout {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: var(--space-7);
    padding-block: var(--space-10) var(--space-8);
  }

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

  .hl-banner__content h1 {
    font-size: clamp(30px, 4.5vw, 40px);
  }

  .hl-banner__aside {
    --hl-cluster-w: auto;
    --hl-cluster-h: auto;
    width: 100%;
    max-width: 640px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    transform: none;
    margin: 0;
  }

  .hl-banner__card,
  .hl-banner__card--untreated,
  .hl-banner__card--aids,
  .hl-banner__card--prevalence {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .hl-banner__card--untreated {
    order: 1;
    min-height: 168px;
    padding: 20px;
  }

  .hl-banner__card--prevalence {
    order: 2;
    min-height: 168px;
    padding: 20px;
  }

  .hl-banner__card--aids {
    order: 3;
    grid-column: 1 / -1;
    min-height: 0;
    padding: 24px 28px;
    color: #353535;
    background-color: rgba(255, 255, 255, 0.9);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 17.7px;
  }

  .hl-banner__card--untreated .hl-banner__card-icon,
  .hl-banner__card--prevalence .hl-banner__people,
  .hl-banner__card--aids .hl-banner__aid {
    margin-bottom: 12px;
  }

  .hl-banner__card--aids .hl-banner__card-title,
  .hl-banner__card--aids .hl-banner__card-text,
  .hl-banner__card-text--single {
    max-width: none;
  }

  .hl-banner__card--aids .hl-banner__aid img {
    width: 64px;
  }

  .hl-banner__card-title {
    font-size: 18px;
    line-height: 1.35;
  }

  .hl-banner__card-text,
  .hl-banner__card-text--single {
    font-size: 14px;
    line-height: 1.4;
  }

  .hl-understanding {
    padding-block: 64px;
  }

  .hl-understanding__title {
    font-size: 32px;
    margin-bottom: 28px;
  }

  .hl-understanding__body {
    flex-direction: column;
    gap: 24px;
  }

  .hl-understanding__media {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 10;
    margin-inline: 0;
    border-radius: 16px;
  }

  .hl-understanding__copy {
    max-width: none;
    padding-top: 0;
  }

  .hl-understanding__copy p {
    font-size: 17px;
    line-height: 1.55;
    text-align: left;
  }

  .hl-signs {
    padding-block: 56px;
  }

  .hl-signs .section-title {
    font-size: 32px;
  }

  .hl-signs .section-desc {
    font-size: 17px;
    max-width: 540px;
  }

  .hl-signs__grid {
    gap: 16px;
  }

  .hl-signs__card {
    border-radius: 16px;
  }

  .hl-signs__controls {
    margin-top: 28px;
  }

  .hl-check {
    padding-block: 56px;
  }

  .hl-check__header {
    gap: 12px;
    margin-bottom: 28px;
  }

  .hl-check__header h2 {
    font-size: 32px;
  }

  .hl-check__header p {
    font-size: 17px;
    line-height: 1.5;
  }

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

  .hl-check__card {
    min-height: 168px;
    padding: 22px;
  }

  .hl-check__card > p,
  .hl-check__card--cta > p {
    max-width: none;
    font-size: 18px;
  }

  .hl-intervention {
    padding-block: 56px;
  }

  .hl-intervention__layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "media"
      "copy";
    gap: 24px;
  }

  .hl-intervention__media {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    border-radius: 16px;
  }

  .hl-intervention__layout > .hl-section-title {
    font-size: 32px;
    margin: 0;
  }

  .hl-intervention__copy p {
    font-size: 17px;
    line-height: 1.55;
  }

  .hl-untreated {
    padding-block: 64px;
    background-position: center right;
    background-size: cover;
  }

  .hl-untreated h2 {
    font-size: 32px;
    margin-bottom: 28px;
  }

  .hl-untreated__copy {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
  }

  .hl-untreated__copy p {
    font-size: 17px;
    line-height: 1.55;
    text-align: center;
  }

  .hl-causes {
    padding-block: 56px;
  }

  .hl-causes__layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "media"
      "lead"
      "list";
    gap: 24px;
    align-items: start;
  }

  .hl-causes__layout .hl-section-title {
    font-size: 32px;
    text-align: left;
  }

  .hl-causes__media {
    border-radius: 20px;
  }

  .hl-causes__media img {
    aspect-ratio: 1040 / 520;
  }

  .hl-causes__lead {
    max-width: none;
    font-size: 18px;
  }

  .hl-causes__list li {
    font-size: 17px;
  }

  .hl-challenges {
    padding-block: 56px;
  }

  .hl-challenges__header {
    gap: 12px;
    margin-bottom: 28px;
  }

  .hl-challenges__header h2 {
    font-size: 32px;
  }

  .hl-challenges__header p {
    font-size: 17px;
    line-height: 1.5;
  }

  .hl-challenges__body {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hl-challenges__diagram {
    min-height: 0;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    aspect-ratio: auto;
  }

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

  .hl-challenges__aside {
    gap: 20px;
  }

  .hl-challenges__card {
    padding: 18px 20px;
  }

  .hl-challenges__card h3 {
    font-size: 20px;
    line-height: 1.35;
  }

  .hl-challenges__card p,
  .hl-challenges__note {
    font-size: 16px;
    line-height: 1.5;
  }

  .hl-ear {
    padding-block: 56px;
  }

  .hl-ear__body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "media"
      "lead"
      "outro";
    gap: 20px;
    text-align: left;
    justify-items: stretch;
  }

  .hl-ear__body > .hl-section-title {
    font-size: 28px;
    margin: 0;
    text-align: left;
    max-width: none;
  }

  .hl-ear__lead,
  .hl-ear__outro {
    font-size: 16px;
    text-align: left;
    max-width: none;
  }

  .hl-ear__media {
    width: 100%;
    border-radius: 20px;
  }

  .hl-journey {
    padding-block: 56px;
  }

  .hl-journey__header {
    gap: 12px;
    margin-bottom: 28px;
  }

  .hl-journey__header h2 {
    font-size: 32px;
  }

  .hl-journey__header p {
    font-size: 17px;
  }

  .hl-journey__grid {
    gap: 14px;
  }

  .hl-journey__card {
    min-height: 270px;
    border-radius: 20px;
  }

  .hl-journey__card h3 {
    font-size: 18px;
  }

  .hl-journey__controls {
    margin-top: 28px;
  }

  /* Connect — tablet (Figma 834 × 455) */
  .hl-connect {
    position: relative;
    display: block;
    flex-direction: unset;
    align-items: unset;
    height: 455px;
    min-height: 455px;
    overflow: hidden;
    background: #2c2d88;
  }

  .hl-connect__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: auto;
    height: auto;
    flex: unset;
    background:
      url("../images/hearing-loss/connect-with-our-specialist-mobile.svg") no-repeat,
      linear-gradient(270deg, #3738b0 5.58%, #17184a 100%);
    background-size: 443px 320px, auto;
    background-position: right -30px bottom -14px, 0 0;
  }

  .hl-connect__bg::before {
    display: none;
  }

  .hl-connect__container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 455px;
    min-height: 455px;
    padding-top: 62px;
    padding-bottom: 0;
  }

  .hl-connect__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-width: 484px;
    padding-block: 0;
    text-align: left;
  }

  .hl-connect__copy h2 {
    margin: 0 0 24px;
    max-width: 391px;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -1px;
    color: #ffffff;
  }

  .hl-connect__copy p {
    max-width: 484px;
    margin: 0 0 32px;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #ffffff;
  }

  .hl-connect__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 256px;
    min-width: 256px;
    max-width: 256px;
    height: 55px;
    min-height: 55px;
    padding: 16px 30px;
    gap: 4px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: #ffffff;
    background: #3b3cb4;
    border-radius: 30px;
  }

  .hl-connect__cta:hover {
    color: var(--color-primary);
    background: var(--color-white);
    border-color: var(--color-primary);
  }

  .hearingLossPage .hl-faq {
    padding-block: 56px;
  }

  .hearingLossPage .hl-faq .testimonials-faq__title {
    font-size: 32px;
    margin-bottom: 28px;
  }

  /* Footer location — tablet: keep desktop side layout until mobile component */
  .footer-location__content {
    padding: var(--space-8) var(--space-7);
  }

  .footer-location__map {
    min-height: 320px;
  }
}

@media (max-width: 767px) {
  .testimonials__viewport::before {
    display: none;
  }

  .testimonials__slide {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 16px;
  }

  .testimonials__card {
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  .testimonials__card > p {
    font-size: 16px;
  }

  .testimonials__video-wrap {
    order: -1;
    height: auto;
    aspect-ratio: 16 / 10;
    max-height: 220px;
  }

  .testimonials__video {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  .testimonials__controls {
    margin-top: 28px;
  }

  .brands-section__card {
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 32px 20px 40px;
    background: #f3f3f3;
    border-radius: 20px;
  }

  .brands-section__title {
    flex: unset!important;
    max-width: 100%;
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.5px;
    text-align: center;
    color: #2c2d88;
  }

  .brands-section__logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: none;
    margin-left: 0;
    flex: unset!important;
  }

  .brands-section__row{
    grid-template-columns: repeat(2, minmax(0, 1fr))!important;
  }

  .brands-section__row,
  .brands-section__row--bottom {
    display: contents;
    max-width: unset!important;
  }

  .brands-section__row--bottom .brands-section__logo:last-child {
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
  }

  .brands-section__logo {
    min-height: 72px;
    padding: 12px 10px;
    background: #fff;
    border-radius: 6px;
  }

  .brands-section__logo img {
    max-height: 48px;
  }

  .brands-section__element {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%!important ;
    transform: none;
    opacity: 1!important;
  }

  .contact-form__grid {
    grid-template-columns: 1fr!important;
    gap: 16px;
  }

  .contact-section__title {
    margin-bottom: 28px;
  }

  .contact-form__actions {
    margin-top: 24px;
  }

  .contact-form__submit {
    width: 100%;
  }

  .hero-banner__viewport,
  .hero-banner__slide {
    height: 600px;
  }

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

  .hero-banner__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }

  .hero-banner__overlay {
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    background:unset!important;
  }

  .hero-banner__pins {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  .hero-banner__pin {
    position: absolute;
    height: auto;
  }

  .hero-banner__pin--left {
    transform: scaleX(-1);
  }

  .hero-banner__slide[data-slide="0"] .hero-banner__pin--left {
    left: 24px;
    top: 290px;
    width: 78px;
  }

  .hero-banner__slide[data-slide="0"] .hero-banner__pin--right {
    left: auto;
    right: 14px;
    top: 318px;
    width: 49px;
  }

  .hero-banner__slide[data-slide="1"] .hero-banner__pin--left {
    left: 29px;
    top: 295px;
    width: 56px;
  }

  .hero-banner__slide[data-slide="1"] .hero-banner__pin--right {
    left: auto;
    right: 14px;
    top: 251px;
    width: 74px;
  }

  .hero-banner__slide[data-slide="2"] .hero-banner__pin--left {
    left: 82px;
    top: 282px;
    width: 55px;
  }

  .hero-banner__slide[data-slide="2"] .hero-banner__pin--right {
    left: auto;
    right: 24px;
    top: 234px;
    width: 79px;
  }

  .hero-banner__slide .container {
    display: block!important;
  }

  .hero-banner__content {
    max-width: 100%;
    margin-top: 2rem;
  }

  .hero-banner__badge {
    gap: 6px;
    padding: 6px 10px;
    margin-bottom: 8px;
    border-top: 0.4px solid #fff;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 16px;
    backdrop-filter: blur(3.3px);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.2px;
    color: #f6f6f6;
  }

  .hero-banner__badge img {
    width: 49px;
    height: auto;
  }

  .hero-banner__content h1 {
    max-width: 340px;
    margin-bottom: 16px;
    font-size: 32px;
    line-height: 1.4;
    letter-spacing: -1px;
  }

  .hero-banner__content .btn-pill {
    padding: 10px 20px;
    font-size: 15px;
    line-height: 1.5;
    border-radius: 30px;
  }

  .hero-banner__dots {
    bottom: 20px;
  }

  .section {
    padding-block: var(--space-10);
  }

  .site-footer__cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* About — mobile */
  .page-banner {
    min-height: 420px;
    align-items: flex-start;
  }

  .page-banner.hl-banner {
    min-height: 0;
    align-items: stretch;
  }

  .page-banner__overlay {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.15) 45%,
      rgba(0, 0, 0, 0.05) 100%
    );
  }

  .page-banner__content {
    max-width: 100%;
    padding: var(--space-10) 0 var(--space-8);
  }

  .page-banner__content h1 {
    font-size: clamp(26px, 7vw, 32px);
    margin-bottom: var(--space-5);
  }

  .page-banner__content .btn {
    width: auto;
    max-width: 100%;
  }

  .page-banner__pin {
    display: none;
  }

  .about-bringing {
    padding-block: var(--space-8);
  }

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

  .about-bringing__intro .section-title {
    font-size: clamp(24px, 6vw, 30px);
  }

  .about-bringing__intro p {
    font-size: var(--font-size-base);
  }

  .about-carousel__grid {
    gap: var(--space-3);
  }

  .about-carousel__item {
    border-radius: var(--radius-lg);
  }

  .about-carousel__controls {
    margin-top: var(--space-5);
  }

  .about-feature {
    padding-block: var(--space-7);
  }

  .about-feature .rounded-xl {
    border-radius: var(--radius-lg);
  }

  .about-feature img {
    width: 100%;
    height: auto;
    display: block;
  }

  .about-feature__pin {
    display: none;
  }

  .about-story {
    padding-block: var(--space-8);
  }

  .about-story__title {
    margin-bottom: var(--space-3);
    font-size: clamp(24px, 6vw, 28px);
  }

  .about-story__text {
    font-size: var(--font-size-base);
  }

  .about-story__divider {
    margin: var(--space-7) 0;
  }

  .about-touch__gallery {
    display: flex;
    gap: 12px;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .about-touch__item--side,
  .about-touch__item--center {
    display: block;
    flex: 0 0 min(280px, 78vw);
    aspect-ratio: 364 / 380;
    scroll-snap-align: start;
  }

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

  .about-touch__footer-text {
    font-size: var(--font-size-base);
    text-align: center;
    padding-inline: 4px;
  }

  .about-touch .section-desc {
    font-size: var(--font-size-base);
  }

  .about-contact {
    padding-block: var(--space-8);
  }

  .about-contact__title {
    font-size: clamp(24px, 6vw, 30px);
    margin-bottom: var(--space-6);
  }

  .about-contact__submit {
    min-width: 100%;
    width: 100%;
  }

  /* Contact page — mobile */
  .contact-booking,
  .contact-branches {
    overflow-x: clip;
  }

  .contact-booking {
    padding-top: var(--space-8);
    padding-bottom: var(--space-6);
  }

  .contact-booking__intro {
    margin-bottom: var(--space-6);
    padding-inline: 4px;
  }

  .contact-booking__title {
    font-size: 24px;
    letter-spacing: -0.4px;
    line-height: 1.3;
  }

  .contact-booking__lead {
    font-size: 14px;
    line-height: 1.55;
  }

  /* Flatten outer card — nested cards get full width */
  .contact-booking__card {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .contact-booking__left {
    gap: 16px;
    width: 100%;
  }

  .contact-booking__clinic,
  .contact-booking__home,
  .contact-booking__form {
    width: 100%;
    border-radius: 16px;
  }

  /* Hero: auto height, full-width chips, readable text */
  .contact-booking__hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-height: 0;
    height: auto;
    padding: 18px 16px 20px;
    background-color: #3B3CB4;
  }

  .contact-booking__hero::before {
    background-size: cover;
    background-position: right bottom;
    opacity: 0.28;
  }

  .contact-booking__hero::after {
    background: linear-gradient(
      105deg,
      #3B3CB4 0%,
      #3B3CB4 58%,
      rgba(59, 60, 180, 0.5) 82%,
      rgba(27, 30, 98, 0.7) 100%
    );
  }

  .contact-booking__badge {
    padding: 6px 12px;
    font-size: 13px;
    gap: 8px;
  }

  .contact-booking__branches {
    max-width: 100%;
    width: 100%;
    gap: 10px;
  }

  .contact-booking__aside-label {
    font-size: 16px;
  }

  .contact-booking__chips {
    gap: 8px;
  }

  .contact-booking__chips li {
    padding: 5px 10px;
    font-size: 11px;
    line-height: 1.35;
    white-space: normal;
    max-width: 100%;
  }

  .contact-booking__aside-headline {
    max-width: 100%;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
  }

  .contact-booking__clinic-copy {
    gap: 8px;
    padding: 16px;
  }

  .contact-booking__home {
    flex: 0 0 auto;
    min-height: 0;
    gap: 16px;
    padding: 0;
    justify-content: flex-start;
  }

  .contact-booking__home-copy {
    gap: 8px;
    padding: 18px 16px 0;
  }

  .contact-booking__card[data-mode="home"] .contact-booking__home-copy {
    padding: 0 16px;
  }

  .contact-booking__switch-btn {
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    font-size: 16px;
    min-height: 48px;
  }

  .contact-booking__card[data-mode="home"] .contact-booking__switch-btn--clinic {
    width: 100%;
    margin: 8px 0 0;
  }

  .contact-booking__home-media img {
    height: 240px;
  }

  .contact-booking__card[data-mode="home"] .contact-booking__home-media {
    max-height: 280px;
  }

  .contact-booking__form {
    padding: 16px;
    gap: 18px;
  }

  .contact-booking__address-head {
    flex-wrap: wrap;
    gap: 8px;
  }

  .contact-booking__locate {
    font-size: 14px;
    white-space: normal;
    text-align: left;
  }

  .contact-booking__clinic-copy strong,
  .contact-booking__home-copy strong {
    font-size: 18px;
    line-height: 1.35;
  }

  .contact-booking__clinic-copy p,
  .contact-booking__home-copy p {
    font-size: 14px;
    line-height: 1.5;
  }

  .contact-booking__switch-btn,
  .contact-booking__submit {
    max-width: none;
    height: 48px;
    padding: 12px 16px;
    font-size: 16px;
  }

  .contact-booking__form {
    gap: 16px;
    width: 100%;
  }

  .contact-booking__field {
    width: 100%;
  }

  .contact-booking__row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .contact-booking__row > .contact-booking__field {
    width: 100%;
    flex: 1 1 auto;
  }

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

  .contact-booking__input {
    width: 100%;
    height: 48px;
    padding: 12px 14px;
    font-size: 16px;
  }

  .contact-booking__textarea {
    height: 96px;
    min-height: 96px;
  }

  .contact-booking__select {
    background-position: right 14px center;
    padding-right: 40px;
  }

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

  .contact-booking__field-icon svg {
    width: 20px;
    height: 20px;
    right: 12px;
  }

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

  .contact-booking__appt {
    gap: 14px;
    width: 100%;
  }

  .contact-booking__appt-title {
    font-size: 16px;
  }

  /* Branches locator — mobile */
  .contact-branches {
    padding-block: var(--space-7) var(--space-8);
  }

  .contact-branches__panel {
    flex-direction: column;
    gap: 14px;
    width: 100%;
  }

  .contact-branches__list-wrap {
    flex: 1 1 auto;
    flex-shrink: 1;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 16px 12px;
    border-radius: 16px;
  }

  .contact-branches__heading {
    font-size: 22px;
    padding: 4px 8px 12px;
  }

  .contact-branches__list {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    gap: 4px;
  }

  .contact-branches__item {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.35;
    gap: 10px;
  }

  .contact-branches__item-label {
    flex: 1 1 auto;
    min-width: 0;
  }

  .contact-branches__item-icon img {
    width: 22px;
    height: 22px;
  }

  .contact-branches__detail {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 16px 12px;
    border-radius: 16px;
  }

  .contact-branches__detail-title {
    text-align: center;
    font-size: 17px;
    margin-bottom: 12px;
    line-height: 1.35;
    padding-inline: 4px;
  }

  .contact-branches__map {
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .contact-branches__map iframe {
    width: 100%;
    min-height: 220px;
  }

  .contact-branches__meta {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .contact-branches__meta-card {
    min-height: 0;
    width: 100%;
    padding: 16px;
    gap: 10px;
  }

  .contact-branches__meta-label {
    font-size: 16px;
  }

  .contact-branches__meta-body p,
  #branchDetailAddress,
  .contact-branches__meta-body a {
    font-size: 13px;
    word-break: break-word;
  }

  /* Testimonials page — mobile */
  .testimonials-intro {
    padding: 56px 0 28px;
  }

  .testimonials-intro__content {
    gap: 12px;
    padding-inline: 4px;
  }

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

  .testimonials-intro__title {
    font-size: 28px;
  }

  .testimonials-intro__lead {
    font-size: 16px;
    line-height: 1.5;
  }

  .testimonials-grid {
    padding-top: var(--space-6);
    padding-bottom: var(--space-8);
  }

  .testimonials-card {
    padding: 24px;
    gap: 32px;
  }

  .testimonials-card__top {
    gap: 24px;
  }

  .testimonials-card__avatar {
    width: 52px;
    height: 52px;
  }

  .testimonials-card__quote p {
    font-size: 17px;
  }

  .testimonials-card__footer {
    gap: 16px;
  }

  .testimonials-cta {
    padding-block: var(--space-6) var(--space-8);
  }

  .testimonials-cta__panel {
    min-height: 0;
    padding: 28px 20px 0;
    border-radius: 16px;
    background-position: right -20px bottom;
    background-size: cover;
    flex-direction: column;
    align-items: stretch;
  }

  .testimonials-cta__copy {
    max-width: 100%;
    gap: 20px;
    padding-bottom: 24px;
  }

  .testimonials-cta__title {
    font-size: 26px;
  }

  .testimonials-cta__text {
    font-size: 15px;
  }

  .testimonials-cta__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .testimonials-cta__btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .testimonials-faq {
    padding-top: var(--space-7);
    padding-bottom: var(--space-10);
  }

  .testimonials-faq__title {
    font-size: clamp(24px, 6vw, 28px);
    margin-bottom: var(--space-6);
  }

  .testimonials-faq__list {
    gap: 12px;
  }

  .testimonials-faq__item {
    padding: 18px 16px;
  }

  .testimonials-faq__trigger {
    gap: 12px;
    align-items: flex-start;
  }

  .testimonials-faq__question {
    font-size: 16px;
    line-height: 1.4;
    padding-right: 4px;
  }

  .testimonials-faq__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

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

  .testimonials-faq__panel p {
    font-size: 15px;
  }

  /* Hearing Loss FAQ — keep Figma structure on mobile */
  .hearingLossPage .hl-faq {
    padding-block: 56px;
  }

  .hearingLossPage .hl-faq .testimonials-faq__title {
    font-size: clamp(26px, 6vw, 32px);
    margin-bottom: 24px;
  }

  .hearingLossPage #hearingLossFaq {
    gap: 14px;
  }

  .hearingLossPage #hearingLossFaq .hl-faq__item {
    gap: 14px;
    padding: 18px 16px 18px 0;
  }

  .hearingLossPage #hearingLossFaq .hl-faq__trigger {
    gap: 12px;
  }

  .hearingLossPage #hearingLossFaq .testimonials-faq__question {
    font-size: 16px;
    line-height: 1.35;
  }

  .hearingLossPage #hearingLossFaq .hl-faq__icon {
    width: 32px;
    height: 32px;
    padding: 6px;
  }

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

  .hearingLossPage #hearingLossFaq .testimonials-faq__panel {
    padding-right: 0;
  }

  .hearingLossPage #hearingLossFaq .testimonials-faq__panel p {
    font-size: 15px;
  }

  /* Hearing Loss page — mobile */
  .hl-banner__layout {
    padding-block: var(--space-9) var(--space-6);
    gap: var(--space-5);
  }

  .hl-banner__content h1 {
    font-size: clamp(26px, 7vw, 30px);
    margin-bottom: var(--space-5);
  }

  .hl-banner__content .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  .hl-banner__aside {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: none;
  }

  .hl-banner__card--untreated,
  .hl-banner__card--prevalence,
  .hl-banner__card--aids {
    order: initial;
    grid-column: auto;
    min-height: 0;
  }

  .hl-banner__card--untreated,
  .hl-banner__card--prevalence {
    padding: 18px;
  }

  .hl-banner__card--aids {
    min-height: 0;
    padding: 18px;
    color: #353535;
    background-color: rgba(255, 255, 255, 0.9);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 17.7px;
  }

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

  .hl-banner__card--prevalence .hl-banner__people,
  .hl-banner__card--aids .hl-banner__aid {
    margin-bottom: 12px;
  }

  .hl-banner__card--aids .hl-banner__aid img {
    width: 56px;
  }

  .hl-banner__card-title {
    font-size: 17px;
  }

  .hl-banner__card-text,
  .hl-banner__card-text--single {
    font-size: 14px;
    line-height: 1.45;
  }

  .hl-understanding {
    padding-block: 56px;
  }

  .hl-understanding__title {
    font-size: clamp(24px, 6vw, 28px);
    margin-bottom: 24px;
  }

  .hl-understanding__media {
    width: 100%;
  }

  .hl-understanding__copy p {
    font-size: 16px;
    line-height: 1.5;
  }

  .hl-section-title {
    font-size: clamp(24px, 6vw, 28px);
    margin-bottom: var(--space-4);
  }

  .hl-intervention__copy p,
  .hl-ear__lead,
  .hl-ear__outro {
    font-size: 15px;
  }

  .hl-signs__grid {
    gap: var(--space-3);
  }

  .hl-signs__card-body {
    padding: var(--space-5);
  }

  .hl-signs__card-body h3 {
    font-size: 17px;
  }

  .hl-signs__controls {
    margin-top: 28px;
  }

  .hl-check {
    padding-block: 48px;
  }

  .hl-check__header h2 {
    font-size: clamp(24px, 6vw, 28px);
  }

  .hl-check__header p {
    font-size: 16px;
  }

  .hl-check__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hl-check__card {
    min-height: 0;
    padding: 18px 16px;
  }

  .hl-check__card > p {
    max-width: none;
    font-size: 16px;
    line-height: 1.4;
  }

  .hl-check__card--cta > p {
    font-size: 15px;
    line-height: 1.4;
  }

  .hl-check__cta {
    max-width: none;
    min-height: 42px;
    font-size: 14px;
  }

  .hl-untreated {
    padding-block: 56px;
    background-position: right center;
    background-size: cover;
  }

  .hl-untreated h2 {
    font-size: clamp(22px, 5.5vw, 26px);
    margin-bottom: 28px;
    padding-bottom: 16px;
  }

  .hl-untreated__copy {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hl-untreated__copy p {
    text-align: left;
    font-size: 15px;
  }

  .hl-causes__media,
  .hl-intervention__media {
    border-radius: 16px;
  }

  .hl-causes__layout .hl-section-title {
    text-align: left;
    font-size: clamp(22px, 6vw, 28px);
  }

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

  .hl-causes__list {
    gap: 14px;
  }

  .hl-intervention__layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "media"
      "copy";
    gap: 20px;
  }

  .hl-intervention__layout > .hl-section-title {
    font-size: clamp(24px, 6vw, 28px);
  }

  .hl-ear {
    background: #f7f7f7;
    padding-block: 48px;
  }

  .hl-ear__body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "lead"
      "media"
      "outro";
    gap: 20px;
    text-align: center;
    justify-items: center;
  }

  .hl-ear__body > .hl-section-title {
    font-size: clamp(24px, 6vw, 28px);
    text-align: left;
  }

  .hl-ear__lead,
  .hl-ear__outro {
    max-width: 34rem;
    text-align: left;
    font-size: 16px;
    line-height: 1.55;
  }

  .hl-ear__media {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    border-radius: 20px;
  }

  .hl-ear__media picture,
  .hl-ear__media img {
    width: 100%;
    height: auto;
  }

  .hl-challenges {
    padding-block: 48px;
  }

  .hl-challenges__header h2 {
    font-size: clamp(24px, 6vw, 28px);
  }

  .hl-challenges__header p {
    font-size: 16px;
  }

  .hl-challenges__diagram {
    min-height: 260px;
    border-radius: 16px;
  }

  .hl-challenges__card {
    padding: 16px;
  }

  .hl-challenges__card-top {
    align-items: flex-start;
  }

  .hl-challenges__card h3 {
    font-size: 18px;
    line-height: 1.35;
  }

  .hl-challenges__card p,
  .hl-challenges__note {
    font-size: 15px;
  }

  .hl-causes__list li {
    font-size: 15px;
  }

  .hl-journey {
    padding-block: 48px;
  }

  .hl-journey__header h2 {
    font-size: clamp(24px, 6vw, 28px);
  }

  .hl-journey__header p {
    font-size: 16px;
  }

  .hl-journey__grid {
    gap: 14px;
  }

  .hl-journey__card {
    min-height: 240px;
    padding: 20px;
  }

  .hl-journey__card h3 {
    font-size: 18px;
    max-width: none;
  }

  .hl-journey__controls {
    margin-top: 28px;
  }

  .hl-connect {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #2f318f 0%, #1b1c62 55%, #17184a 100%);
  }

  .hl-connect__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    height: clamp(220px, 58vw, 280px);
    flex: 0 0 auto;
    background:
      url("../images/hearing-loss/connect-with-our-specialist-mobile.svg") center bottom / contain no-repeat;
      margin-bottom: 20px;
  }

  .hl-connect__bg::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -18%;
    width: 70%;
    height: 90%;
    border-radius: 50%;
    border: 48px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
  }

  .hl-connect__container {
    position: relative;
    z-index: 1;
    display: block;
    height: auto;
    min-height: 0;
    padding: 8px 20px 40px;
  }

  .hl-connect__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: none;
    padding-block: 0;
    text-align: center;
  }

  .hl-connect__copy h2 {
    font-size: clamp(26px, 7vw, 32px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
    color: #ffffff;
  }

  .hl-connect__copy p {
    max-width: 22rem;
    margin: 0 0 24px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: #ffffff;
  }

  .hl-connect__cta {
    width: auto;
    min-width: 188px;
    max-width: none;
    min-height: 50px;
    padding: 14px 36px;
    font-size: 15px;
    font-weight: 500;
    color: #2c2d88;
    background: #ffffff;
    border-radius: 40px;
  }

  .hl-connect__cta:hover {
    color: var(--color-primary);
    background: var(--color-white);
    border-color: var(--color-primary);
  }

  /* Footer location — mobile (Figma stacked curve card) */
  .footer-location {
    padding-top: var(--space-7);
    padding-bottom: var(--space-8);
  }

  .footer-location__card {
    border-radius: 20px;
  }

  .footer-location__content {
    padding: 32px 32px 88px;
    margin-bottom: -48px;
    border-radius: 17px 17px 50% 50% / 17px 17px 90px 90px;
  }

  .footer-location__content h2 {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    letter-spacing: -1px;
    margin-bottom: var(--space-4);
  }

  .footer-location__content p {
    font-size: var(--font-size-md);
    line-height: 1.5;
  }

  .footer-location__map {
    min-height: 280px;
    padding: var(--space-10) var(--space-4) var(--space-8);
  }

  .footer-location__map-stage {
    width: min(100%, 360px);
    margin-inline: auto;
  }

  .footer-location__pin img {
    width: 32px;
    height: 32px;
  }

  .footer-location__tab {
    font-size: 12px;
    padding: var(--space-1) var(--space-3);
  }

  .site-footer__main {
    padding-top: var(--space-12);
  }

  .site-footer__logo {
    margin-top: 0;
  }

  .home-stats-mobile .stat-card__cities li{
    font-size: 10px;
  }

  .stat-card__cities{
    grid-auto-flow: unset!important;
  }

  #journey-heading{
    text-align: center!important;
  }

  .stat-card__cities li a{
    font-size: 12px;
  }
}

/* Social embed — phone */
@media (max-width: 767.98px) {
  .social-section__embed {
    border-radius: 10px;
  }

  .social-section__embed iframe {
    width: 100% !important;
    height: 760px;
  }
}

@media (max-width: 575px) {
  .social-section__header {
    margin-bottom: 32px;
  }

  .social-section__label {
    font-size: 14px;
    padding: 8px 16px;
  }

  .social-section__embed iframe {
    height: 680px;
  }

  .footer-location-mobile .footer-location__pin1 {
    left: 22% !important;
    top: 40% !important;
  }

  .footer-location-mobile .footer-location__pin2 {
    left: 30% !important;
    top: 30% !important;
  }

  .footer-location-mobile .footer-location__pin3 {
    left: 30% !important;
    top: 53% !important;
  }

  .footer-location-mobile .footer-location__pin4 {
    left: 45% !important;
    top: 50% !important;
  }

  .footer-location-mobile .footer-location__pin5 {
    left: 63% !important;
    top: 62% !important;
  }

  .footer-location-mobile .footer-location__pin6 {
    left: 45% !important;
    top: 70% !important;
  }

  .footer-location-mobile .footer-location__pin7 {
    left: 30% !important;
    top: 75% !important;
  }

  .footer-location-mobile .footer-location__pin8 {
    left: 30% !important;
    top: 88% !important;
  }

  /* About — small phones */
  .page-banner {
    min-height: 380px;
  }

  .page-banner.hl-banner {
    min-height: 0;
  }

  .page-banner__content {
    padding: var(--space-9) 0 var(--space-7);
  }

  .page-banner__content h1 {
    font-size: 24px;
  }

  .about-touch__item--side,
  .about-touch__item--center {
    flex-basis: min(260px, 82vw);
  }

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

  .about-contact__input {
    font-size: 16px;
    min-height: 48px;
  }

  /* Contact — small phones */
  .contact-booking__title {
    font-size: 22px;
  }

  .contact-booking__lead {
    font-size: 13px;
  }

  .contact-booking__card {
    gap: 12px;
  }

  .contact-booking__hero {
    padding: 16px 14px 18px;
    gap: 12px;
  }

  .contact-booking__hero::before {
    display: none;
  }

  .contact-booking__chips li {
    font-size: 10px;
    padding: 4px 8px;
  }

  .contact-booking__clinic-copy,
  .contact-booking__home-copy,
  .contact-booking__form {
    padding: 14px;
  }

  .contact-booking__clinic-copy strong,
  .contact-booking__home-copy strong {
    font-size: 17px;
  }

  .contact-booking__clinic-copy p,
  .contact-booking__home-copy p {
    font-size: 13px;
  }

  .contact-booking__switch-btn,
  .contact-booking__submit {
    font-size: 15px;
  }

  .contact-branches__list-wrap,
  .contact-branches__detail {
    padding: 12px 10px;
  }

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

  .contact-branches__item {
    font-size: 13px;
    padding: 9px 10px;
  }

  .contact-branches__detail-title {
    font-size: 15px;
  }

  .contact-branches__map iframe {
    min-height: 200px;
  }

  .contact-branches__meta-card {
    padding: 14px;
  }

  /* Testimonials — small phones */
  .testimonials-intro__title {
    font-size: 26px;
  }

  .testimonials-card {
    padding: 20px;
    gap: 28px;
  }

  .testimonials-card__quote p {
    font-size: 16px;
  }

  .testimonials-cta__panel {
    padding: 24px 16px 0;
  }

  .testimonials-cta__title {
    font-size: 24px;
  }

  .testimonials-faq__item {
    padding: 16px 14px;
  }

  .testimonials-faq__question {
    font-size: 15px;
  }

  .hearingLossPage #hearingLossFaq .hl-faq__item {
    padding: 16px 14px 16px 0;
  }

  /* Hearing Loss — small phones */
  .hl-banner__content h1 {
    font-size: 24px;
  }

  .hl-banner__content .btn {
    max-width: none;
  }

  .hl-banner__aside {
    gap: 10px;
  }

  .hl-banner__card--untreated,
  .hl-banner__card--prevalence,
  .hl-banner__card--aids {
    padding: 16px;
  }

  .hl-banner__card--aids {
    min-height: 0;
    padding: 16px;
  }

  .hl-banner__card-title {
    font-size: 16px;
  }

  .hl-banner__card-text,
  .hl-banner__card-text--single {
    font-size: 13px;
  }

  .hl-understanding__title,
  .hl-check__header h2,
  .hl-challenges__header h2,
  .hl-journey__header h2,
  .hl-connect__copy h2,
  .hl-section-title {
    font-size: 24px;
  }

  .hl-untreated h2 {
    font-size: 22px;
  }

  .hl-challenges__diagram {
    min-height: 220px;
  }

  .hl-journey__card {
    min-height: 220px;
  }

  .hl-connect__cta {
    max-width: none;
  }

  .footer-location__content {
    padding: 28px 24px 80px;
  }

  .footer-location__content h2 {
    font-size: 22px;
  }
}


/* ===ipad-media-queries==== */
@media (min-width: 768px) and (max-width: 1024px) {
  .stat-card__cities{
    grid-auto-flow: unset!important;
  }

  .stat-card {
    background-size: contain!important;
   }

   .moments-tabs__card{
    min-height: unset!important;
   }

   .home-visit__content{
    max-width: 400px!important;
   }

   .home-visit{
    background: unset!important;
    min-height: unset!important;
   }

   .home-visit__container{
    min-height: unset!important;
   }

   .brands-section__title{
     flex:unset!important;
   }

   .brands-section__logos{
    flex:unset!important;
   }

   .brands-section__title{
    text-align: center!important;
   }

   .footer-location__map-glow{
    right:-30%!important;
   }

   .hero-banner__content {
    max-width: 360px!important;
  }

  /* Hearing Loss — iPad / tab layout (Figma Tab version) */
  .hearingLossPage .hl-understanding__media {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 10;
  }

  .hearingLossPage .hl-check__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hearingLossPage .hl-intervention__layout,
  .hearingLossPage .hl-challenges__body,
  .hearingLossPage .hl-ear__body,
  .hearingLossPage .hl-causes__layout {
    grid-template-columns: 1fr;
  }

  .hearingLossPage .hl-intervention__layout {
    grid-template-areas:
      "title"
      "media"
      "copy";
  }

  .hearingLossPage .hl-ear__body {
    grid-template-areas:
      "title"
      "media"
      "lead"
      "outro";
  }

  .hearingLossPage .hl-causes__layout {
    grid-template-areas:
      "title"
      "media"
      "lead"
      "list";
  }

  .hearingLossPage .hl-challenges__diagram {
    width: 100%;
    max-width: none;
  }

  .hearingLossPage .hl-untreated__copy {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hearingLossPage .hl-untreated__copy p {
    text-align: center;
  }

  .hearingLossPage .hl-connect {
    height: 455px;
    min-height: 455px;
    background: #2c2d88;
  }

  .hearingLossPage .hl-connect__container {
    display: flex;
    align-items: flex-start;
    height: 455px;
    min-height: 455px;
    padding-top: 62px;
  }

  .hearingLossPage .hl-connect__copy {
    max-width: 484px;
    align-items: flex-start;
    text-align: left;
  }

  .hearingLossPage .hl-connect__copy h2 {
    margin: 0 0 24px;
    font-size: 32px;
    line-height: 1.4;
    letter-spacing: -1px;
  }

  .hearingLossPage .hl-connect__copy p {
    margin: 0 0 32px;
    font-size: 18px;
    line-height: 27px;
  }

  .hearingLossPage .hl-connect__bg {
    position: absolute;
    inset: 0;
    background:
      url("../images/hearing-loss/connect-with-our-specialist-mobile.svg") no-repeat,
      linear-gradient(270deg, #3738b0 5.58%, #17184a 100%);
    background-size: 443px 320px, auto;
    background-position: right -30px bottom -14px, 0 0;
  }

  .hearingLossPage .hl-connect__cta {
    width: 256px;
    min-width: 256px;
    height: 55px;
    min-height: 55px;
    padding: 16px 30px;
    color: #ffffff;
    background: #3b3cb4;
    border-radius: 30px;
  }
}

@media(min-width:768px){
  .ha-generation__content{
    padding-left: 40px!important;
  }

  .ha-product-card span{
    display: block;
  }
}