/* ──────────────────────────────────────────────
   Mobile-only overrides
   PC / tablet styles are untouched.
   All rules live inside max-width: 768px.
────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* ── Global overflow & safe area ── */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  body {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* ── Section spacing & side gutters ── */
  .hero,
  .problem,
  .solution,
  .before-after,
  .recovery,
  .process,
  .case-study,
  .faq,
  .doctor,
  .final-cta,
  .clinic,
  .closing-cta,
  .site-footer {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .hero {
    min-height: auto;
    padding-top: 2.5rem;
    padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
  }

  .problem,
  .solution,
  .before-after,
  .recovery,
  .process,
  .case-study,
  .faq,
  .doctor,
  .final-cta,
  .clinic {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .closing-cta {
    padding-top: 4.5rem;
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  }

  .site-footer {
    padding-top: 3rem;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* ── Inner containers ── */
  .hero__inner,
  .problem__inner,
  .solution__inner,
  .before-after__inner,
  .recovery__inner,
  .process__inner,
  .case-study__inner,
  .faq__inner,
  .doctor__inner,
  .final-cta__inner,
  .clinic__inner,
  .closing-cta__inner,
  .site-footer__inner {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── Typography: prevent overflow ── */
  h1,
  h2,
  h3,
  .hero__headline,
  .problem__title,
  .solution__title,
  .before-after__title,
  .recovery__title,
  .process__title,
  .case-study__title,
  .faq__title,
  .doctor__title,
  .final-cta__title,
  .clinic__title,
  .closing-cta__title {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: keep-all;
  }

  .hero__headline {
    font-size: clamp(1.625rem, 7vw, 2rem);
  }

  .problem__title,
  .solution__title,
  .before-after__title,
  .recovery__title,
  .process__title,
  .case-study__title,
  .faq__title,
  .doctor__title,
  .clinic__title {
    font-size: clamp(1.375rem, 6vw, 1.875rem);
  }

  .final-cta__title,
  .closing-cta__title {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
  }

  /* ── Buttons / CTAs ── */
  .hero__cta,
  .final-cta__button,
  .closing-cta__button,
  .faq__cta-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100%;
    max-width: 100%;
    min-height: 54px;
    height: auto;
    padding: 0.875rem 1.25rem;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
  }

  .hero__cta:hover,
  .final-cta__button:hover,
  .closing-cta__button:hover,
  .faq__cta-button:hover {
    transform: none;
  }

  .faq__cta {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
    text-align: center;
    opacity: 1 !important;
    transform: none !important;
  }

  .faq__cta-title,
  .faq__cta-text {
    opacity: 1 !important;
    transform: none !important;
  }

  .faq,
  .faq__inner,
  .closing-cta,
  .closing-cta__inner,
  .final-cta,
  .final-cta__inner {
    overflow: visible;
    height: auto;
    max-height: none;
  }

  .closing-cta {
    padding-top: 4.5rem;
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  }

  .closing-cta [data-animate],
  .final-cta [data-animate],
  .faq__cta[data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── Images ── */
  .hero__image,
  .problem__card-image,
  .solution__card-image,
  .recovery__card-image,
  .process__step-image,
  .case-study__card-image,
  .doctor__card-image,
  .clinic__image,
  .before-after__image img {
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
  }

  .hero__image {
    height: auto;
    max-height: 48svh;
  }

  /* Doctor portrait: keep face fully visible */
  .doctor__photo {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 28px;
  }

  .doctor__photo-image {
    display: block;
    width: 100%;
    height: 460px;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center top;
    border-radius: 28px;
  }

  .doctor__card-image {
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 26px 26px 0 0;
  }

  .case-study__card-media {
    height: auto;
  }

  .case-study__card-image {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .clinic__image {
    height: auto;
    aspect-ratio: 16 / 10;
    transform: none;
  }

  /* ── Cards: full width, no overflow ── */
  .problem__cards,
  .solution__cards,
  .recovery__cards,
  .process__steps,
  .case-study__cards,
  .doctor__cards,
  .clinic__gallery {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    gap: 1.25rem;
  }

  .problem__card,
  .solution__card,
  .recovery__card,
  .process__step,
  .case-study__card,
  .doctor__card,
  .clinic__item {
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    box-sizing: border-box;
  }

  .doctor__card {
    height: auto;
    min-height: 0;
    border-radius: 26px;
  }

  .doctor__card-media {
    border-radius: 26px 26px 0 0;
  }

  .doctor__card-body {
    padding: 24px;
  }

  .doctor__card-desc {
    min-height: 0;
  }

  .clinic__item {
    max-width: 100%;
    transform: none;
    margin-inline: 0;
  }

  .clinic__item:last-child {
    transform: none;
    margin-inline: 0;
  }

  .clinic__media {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  /* ── Flex → column where needed ── */
  .doctor__intro,
  .hero__inner,
  .before-after__compare,
  .site-footer__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

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

  /* ── Before & After ── */
  .before-after__compare {
    gap: 1.25rem;
  }

  .before-after__panel {
    width: 100%;
  }

  .before-after__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  .before-after__image {
    width: 100%;
    aspect-ratio: 3 / 4;
  }

  .before-after__arrow {
    transform: rotate(90deg);
  }

  .before-after__notice {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* ── Process arrows hidden on mobile stack ── */
  .process__step-arrow {
    display: none;
  }

  /* ── Final CTA / Closing CTA ── */
  .final-cta__description,
  .closing-cta__description {
    max-width: 100%;
  }

  .final-cta__phone,
  .closing-cta__phone {
    font-size: clamp(1.375rem, 6vw, 1.75rem);
    flex-wrap: wrap;
  }

  .final-cta__trust,
  .closing-cta__trust {
    width: 100%;
    gap: 0.75rem;
  }

  .final-cta__trust-item,
  .closing-cta__trust-item {
    max-width: 100%;
    text-align: left;
  }

  .closing-cta__phone-block {
    width: 100%;
  }

  /* ── FAQ ── */
  .faq__list,
  .faq__item {
    width: 100%;
    max-width: 100%;
  }

  /* ── Footer ── */
  .site-footer__nav {
    gap: 1rem;
  }

  .site-footer__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ── Hover off on touch devices ── */
  .problem__card:hover,
  .solution__card:hover,
  .recovery__card:hover,
  .process__step:hover,
  .case-study__card:hover,
  .doctor__card:hover,
  .clinic__item:hover,
  .before-after__story:hover {
    transform: none;
    box-shadow: inherit;
  }

  .problem__card:hover .problem__card-image,
  .solution__card:hover .solution__card-image,
  .recovery__card:hover .recovery__card-image,
  .process__step:hover .process__step-image,
  .case-study__card:hover .case-study__card-image,
  .doctor__card:hover .doctor__card-image,
  .clinic__item:hover .clinic__image {
    transform: none;
  }

  /* ── Clickable spacing ── */
  .hero__cta,
  .final-cta__button,
  .closing-cta__button,
  .faq__cta-button,
  .final-cta__phone,
  .closing-cta__phone {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }
}