/* ==========================================================================
   DC Clinic — Mobile-Only Redesign v2
   Scoped to max-width: 768px — desktop is completely untouched
   Premium Korean clinic mobile UX inspired by Doctor Beam
   ========================================================================== */

/* ==========================================================================
   1. ROOT VARIABLES — Mobile overrides
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --dc-header-height: 60px;
    --dc-bottom-nav-height: 60px;
    --dc-section-lux: 32px;
    --dc-section-lux-cta: 32px;
    --dc-section-lux-footer: 48px;
    --dc-space-section: 24px;
    --dc-text-display: 32px;
    --dc-text-headline-lg: 30px;
    --dc-text-headline-md: 18px;
    --dc-text-body-lg: 16px;
    --dc-text-body: 16px;
    --dc-gutter: 16px;
    --dc-mr-radius: 20px;
    --dc-mr-card-radius: 20px;
    --dc-mr-gap: 16px;
    --dc-mr-shadow: 0 2px 16px rgba(99, 89, 67, 0.06);
    --dc-mr-shadow-hover: 0 8px 28px rgba(99, 89, 67, 0.12);
    --dc-mr-border: 1px solid rgba(172, 141, 98, 0.12);
    --dc-mr-transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --dc-safe-bottom: calc(var(--dc-bottom-nav-height) + env(safe-area-inset-bottom));
  }

  /* ==========================================================================
     2. BODY & GLOBAL — no overflow, smooth scroll
     ========================================================================== */
  body {
    padding-top: var(--dc-header-height) !important;
    padding-bottom: calc(var(--dc-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
    font-size: var(--dc-text-body) !important;
    line-height: 1.6 !important;
  }

  html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
  }

  /* ==========================================================================
     3. HEADER — 60px, white, shadow on scroll
     ========================================================================== */
  .dc-header {
    height: var(--dc-header-height) !important;
    min-height: var(--dc-header-height) !important;
    padding: 0 16px !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04) !important;
    transition: box-shadow 0.3s ease !important;
  }

  .dc-header.is-scrolled {
    box-shadow: 0 2px 12px rgba(99, 89, 67, 0.10) !important;
  }

  .dc-header--transparent {
    background: #FFFFFF !important;
    position: fixed !important;
  }

  .dc-header__inner {
    height: var(--dc-header-height) !important;
  }

  .dc-logo__img,
  .dc-header__logo img {
    max-height: 36px !important;
    height: 36px !important;
    width: auto !important;
  }

  .dc-menu-toggle {
    width: 44px !important;
    height: 44px !important;
  }

  .dc-header__icon-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .dc-header__icon-btn .material-symbols-outlined {
    font-size: 20px !important;
  }

  /* Hide CTA button text on mobile — keep icon only */
  .dc-header__cta .btn-dc-primary {
    display: none !important;
  }

  /* ==========================================================================
     4. ANNOUNCEMENT BAR — compact, auto-hide on scroll
     ========================================================================== */
  .dc-announcement {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    transition: transform 0.3s ease, opacity 0.3s ease, height 0.3s ease !important;
    overflow: hidden;
  }

  .dc-announcement.is-hidden {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  .dc-announcement__text {
    font-size: 11px !important;
  }

  .dc-announcement__cta {
    font-size: 11px !important;
    padding: 4px 12px !important;
  }

  /* ==========================================================================
     5. HERO — 30-35vh, min 220px, max 300px
     ========================================================================== */
  .dc-hero-building {
    height: 30vh !important;
    min-height: 200px !important;
    max-height: 320px !important;
    margin-top: 0 !important;
    position: relative;
    overflow: hidden;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

  .dc-hero-building__bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
  }

  .dc-hero-building__bg video,
  .dc-hero-building__bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .dc-hero-building__overlay {
    background: linear-gradient(180deg,
      rgba(43, 43, 43, 0.02) 0%,
      rgba(43, 43, 43, 0.15) 100%) !important;
  }

  /* Mobile-only hero content (injected via JS) */
  .dc-mr-hero__inner {
    position: absolute !important;
    bottom: 20px !important;
    left: 16px !important;
    right: 16px !important;
    z-index: 2 !important;
  }

  .dc-mr-hero__headline {
    font-size: 22px !important;
    line-height: 1.2 !important;
    color: #FFFFFF !important;
    margin: 0 0 6px 0 !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }

  .dc-mr-hero__sub {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 0 12px 0 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  }

  .dc-mr-hero__ctas {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .dc-mr-hero__cta-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 18px !important;
    background: linear-gradient(135deg, #AC8D62 0%, #AC8D62 100%) !important;
    color: #FFFFFF !important;
    border-radius: 100px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    min-height: 40px !important;
    border: none !important;
  }

  .dc-mr-hero__cta-secondary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 16px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    border-radius: 100px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    min-height: 40px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  /* ==========================================================================
     6. SECTION SPACING — 24px padding, 16px sides, 32px between sections
     ========================================================================== */
  .dc-section,
  .dc-section--tight {
    padding-top: var(--dc-space-section) !important;
    padding-bottom: var(--dc-space-section) !important;
  }

  .dc-service-editorial,
  .dc-facilities-showcase,
  .dc-before-after,
  .dc-gallery,
  .dc-doctor-intro {
    padding-top: var(--dc-space-section) !important;
    padding-bottom: var(--dc-space-section) !important;
  }

  .dc-container,
  .dc-doctor-intro__container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Section headers — compact, left-aligned */
  .section-header,
  .section-header--center {
    margin-bottom: 16px !important;
    text-align: left !important;
  }

  .section-header h2,
  .section-header--center h2 {
    font-size: var(--dc-text-headline-lg) !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
    font-weight: 600 !important;
  }

  .section-header p,
  .section-header--center p {
    font-size: var(--dc-text-body) !important;
    line-height: 1.5 !important;
    margin-top: 4px !important;
  }

  .section-header .label-caps,
  .section-header--center .label-caps {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 4px !important;
  }

  /* ==========================================================================
     7. TYPOGRAPHY — premium hierarchy
     ========================================================================== */
  h1 {
    font-size: var(--dc-text-display) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    font-weight: 600 !important;
  }

  h2 {
    font-size: var(--dc-text-headline-lg) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
    font-weight: 600 !important;
  }

  h3 {
    font-size: var(--dc-text-headline-md) !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }

  p {
    line-height: 1.6 !important;
  }

  .btn-dc-gold {
    padding: 10px 20px !important;
    font-size: 14px !important;
    border-radius: 100px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* ==========================================================================
     8. DOCTOR SECTION — editorial, portrait-dominant, no card
     ========================================================================== */
  .dc-doctor-intro {
    position: relative;
    overflow: visible !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: #fff !important;
  }

  .dc-doctor-intro::after {
    display: none !important;
  }

  .dc-doctor-intro__bg {
    display: none !important;
  }

  .dc-doctor-intro__container {
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .dc-doctor-profile {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
  }

  /* Large portrait — full width */
  .dc-doctor-profile__image {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    background: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    z-index: 2 !important;
  }

  .dc-doctor-profile__image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: bottom center !important;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.1));
  }

  /* Card below image */
  .dc-doctor-profile__card {
    position: relative !important;
    z-index: 10 !important;
    background: #FFFFFF !important;
    padding: 30px 24px 0 !important;
    border-radius: 24px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    width: 100% !important;
    margin: 20px 0 0 !important;
  }

  .dc-doctor-profile__eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    color: var(--dc-gold, #AC8D62) !important;
    font-weight: 600 !important;
  }

  .dc-doctor-profile__name {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
    font-weight: 600 !important;
    color: #2B2B2B !important;
  }

  .dc-doctor-profile__title {
    font-size: 12px !important;
    line-height: 1.5 !important;
    display: block !important;
    margin-bottom: 12px !important;
    color: #635943 !important;
    font-weight: 400 !important;
  }

  /* Show bio — 4-5 lines editorial intro */
  .dc-doctor-profile__bio {
    display: block !important;
    margin-bottom: 16px !important;
  }

  .dc-doctor-profile__bio p {
    font-size: 13px !important;
    line-height: 1.7 !important;
    color: #555 !important;
    margin-bottom: 0 !important;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .dc-doctor-profile__bio p:last-child {
    display: none !important;
  }

  /* Show credentials on mobile */
  .dc-doctor-profile__creds {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .dc-doctor-profile__cred {
    background: #F9F7F2 !important;
    padding: 8px 16px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .dc-doctor-profile__card .btn-dc-gold {
    padding: 10px 24px !important;
    font-size: 13px !important;
    border-radius: 100px !important;
    min-height: 40px !important;
  }

  /* Certificate Gallery mobile */
  .dc-certificate-gallery {
    display: block !important;
    padding: 0 !important;
    margin-top: 32px !important;
  }

  .dc-certificate__grid .owl-item {
    padding: 0 8px !important;
  }

  .dc-certificate__card {
    padding: 8px !important;
  }

  .dc-certificate__frame {
    aspect-ratio: 4 / 3 !important;
    border-radius: 12px !important;
  }

  .dc-certificate__title {
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }

  .dc-certificate__desc {
    font-size: 13px !important;
  }

  .dc-certificate__cta {
    margin-top: 24px !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    border-radius: 100px !important;
  }

  /* ==========================================================================
     9. SERVICE EDITORIAL — vertical stack (remains same)
     ========================================================================== */
  .dc-editorial-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    min-height: auto !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .dc-editorial-feature {
    width: 100% !important;
    height: 280px !important;
    border-radius: var(--dc-mr-card-radius) !important;
  }

  .dc-editorial-feature__overlay {
    padding: 24px 20px !important;
  }

  .dc-editorial-feature__eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 8px !important;
  }

  .dc-editorial-feature__title {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
  }

  .dc-editorial-feature__desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
  }

  .dc-editorial-feature__overlay .btn-dc-gold {
    padding: 8px 16px !important;
    font-size: 12px !important;
    border-radius: 100px !important;
  }

  .dc-editorial-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  .dc-editorial-card {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    border-radius: var(--dc-mr-card-radius) !important;
    min-height: auto !important;
    overflow: hidden !important;
    border: var(--dc-mr-border) !important;
  }

  .dc-editorial-card__img {
    order: 1 !important;
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
  }

  .dc-editorial-card__body {
    order: 2 !important;
    padding: 20px !important;
  }

  .dc-editorial-card__eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 6px !important;
    color: #AC8D62 !important;
    font-weight: 700 !important;
  }

  .dc-editorial-card__title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
    color: #2B2B2B !important;
  }

  .dc-editorial-card__desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
  }

  .dc-editorial-card__body a {
    font-size: 11px !important;
  }

  /* ==========================================================================
     10. FACILITIES — Owl Carousel adjustment
     ========================================================================== */
  .dc-home-facilities__grid {
    display: block !important;
    overflow: visible !important;
    padding: 0 0 30px !important; /* Space for dots */
    margin: 0 !important;
  }

  .dc-home-facilities__grid.owl-theme .owl-dots {
    margin-top: 15px !important;
  }

  .dc-home-facilities__grid.owl-theme .owl-dots .owl-dot span {
    background: rgba(172, 141, 98, 0.2);
    width: 8px;
    height: 8px;
    transition: all 0.3s ease;
  }

  .dc-home-facilities__grid.owl-theme .owl-dots .owl-dot.active span {
    background: #AC8D62;
    width: 24px;
  }

  .dc-facilities-grid {
    display: block !important;
    overflow: visible !important;
    padding: 0 0 30px !important; /* Space for dots */
    margin: 0 !important;
  }

  .dc-facility-item {
    width: 100% !important;
    height: 280px !important;
    border-radius: var(--dc-mr-card-radius) !important;
    border: var(--dc-mr-border) !important;
  }

  .dc-facilities-grid.owl-theme .owl-dots {
    margin-top: 15px !important;
  }

  .dc-facilities-grid.owl-theme .owl-dots .owl-dot span {
    background: rgba(172, 141, 98, 0.2);
    width: 8px;
    height: 8px;
    transition: all 0.3s ease;
  }

  .dc-facilities-grid.owl-theme .owl-dots .owl-dot.active span {
    background: #AC8D62;
    width: 24px;
  }

  .dc-facility-item__overlay {
    padding: 24px 20px !important;
  }

  .dc-facility-item__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    transform: translateY(0) !important;
  }

  .dc-facility-item__label {
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
    transform: translateY(0) !important;
  }

  /* ==========================================================================
     11. BEFORE & AFTER — Grid Layout (Carousel disabled)
     ========================================================================== */
  .dc-ba-grid,
  .dc-before-after .dc-ba-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .dc-ba-grid .dc-ba-card,
  .dc-before-after .dc-ba-grid .dc-ba-card {
    width: 100% !important;
    max-width: none !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
    border: var(--dc-mr-border) !important;
    overflow: hidden !important;
  }

  .dc-ba-card__img img,
  .dc-before-after .dc-ba-card__img img {
    height: 120px !important; /* Smaller height for 2-column grid */
    border-radius: 12px 12px 0 0 !important;
  }

  .dc-ba-card__body,
  .dc-before-after .dc-ba-card__body {
    padding: 14px !important;
  }

  .dc-ba-card__name {
    font-size: 14px !important;
  }

  .dc-ba-card__stars .material-symbols-outlined {
    font-size: 12px !important;
  }

  .dc-ba-card__text {
    font-size: 13px !important;
    line-height: 1.5 !important;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .dc-ba-card__tag,
  .dc-before-after .dc-ba-card__tag {
    font-size: 10px !important;
  }

  .dc-ba-card__meta span .material-symbols-outlined {
    font-size: 12px !important;
  }

  .dc-social-proof {
    margin-top: 12px !important;
  }

  .dc-load-more {
    margin-top: 12px !important;
  }

  .dc-load-more__btn {
    min-height: 44px !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
  }

  /* ==========================================================================
     12. VIDEO GALLERY — Owl Carousel adjustment
     ========================================================================== */
  .dc-gallery__grid {
    display: block !important;
    overflow: visible !important;
    padding: 0 0 30px !important;
    margin: 0 !important;
  }

  .dc-gallery__item {
    width: 100% !important;
    aspect-ratio: 9 / 12 !important;
    border-radius: var(--dc-mr-card-radius) !important;
    border: var(--dc-mr-border) !important;
  }

  /* Reduce overlay opacity — vivid thumbnails */
  .dc-gallery__item--video::after {
    background: linear-gradient(to top,
      rgba(99, 89, 67, 0.55) 0%,
      rgba(99, 89, 67, 0.10) 40%,
      transparent 70%) !important;
    opacity: 0.8 !important;
  }

  /* Increase brightness on video thumbnails */
  .dc-gallery__item img,
  .dc-gallery__item video {
    filter: brightness(1.08) contrast(1.05) saturate(1.02) !important;
  }

  .dc-gallery__item-label {
    font-size: 11px !important;
    bottom: 10px !important;
    left: 10px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
  }

  .dc-video-play {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .dc-video-play .material-symbols-outlined {
    font-size: 20px !important;
  }

  /* ==========================================================================
     13. FLOATING CONTACT — LINE, FB, WhatsApp, Phone, Book
     ========================================================================== */
  .dc-mobile-nav {
    height: var(--dc-bottom-nav-height) !important;
    max-height: 64px !important;
    padding: 6px 12px !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
    background: rgba(43, 38, 32, 0.92) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid rgba(172, 141, 98, 0.20) !important;
  }

  .dc-mobile-nav__item {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 4px 8px !important;
    gap: 2px !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }

  .dc-mobile-nav__item:active,
  .dc-mobile-nav__item.active {
    color: var(--dc-gold-soft, #AC8D62) !important;
  }

  .dc-mobile-nav__item .material-symbols-outlined,
  .dc-mobile-nav__item i {
    font-size: 22px !important;
    color: inherit !important;
  }

  .dc-mobile-nav__item span:last-child {
    font-size: 9px !important;
    color: inherit !important;
  }

  /* ==========================================================================
     14. CHAT WIDGET — bottom-right, no overlap with nav
     ========================================================================== */

  .dc-chat-widget {
    bottom: calc(var(--dc-bottom-nav-height) + 8px + env(safe-area-inset-bottom)) !important;
    right: 12px !important;
  }

  .dc-chat-widget__fab {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    bottom: auto !important;
    right: auto !important;
  }

  .dc-chat-widget__fab .material-symbols-outlined {
    font-size: 24px !important;
  }

  .dc-chat-widget__pulse {
    display: none !important;
  }

  /* ==========================================================================
     15. SOCIAL BAR — hide on mobile (replaced by bottom nav)
     ========================================================================== */
  .dc-social-bar {
    display: none !important;
  }

  /* ==========================================================================
     16. BACK TO TOP — above bottom nav
     ========================================================================== */
  .dc-back-to-top {
    bottom: calc(var(--dc-bottom-nav-height) + 8px + 48px + 12px + env(safe-area-inset-bottom)) !important;
    right: 12px !important;
    left: auto !important;
    width: 40px !important;
    height: 40px !important;
  }

  /* ==========================================================================
     17. TOUR TRIGGER — hide on mobile
     ========================================================================== */
  .dc-tour-trigger {
    display: none !important;
  }

  /* Customizer — hide on mobile */
  .dc-customizer {
    display: none !important;
  }

  /* ==========================================================================
     18. FOOTER — compact
     ========================================================================== */
  .dc-footer {
    padding-top: 32px !important;
  }

  .dc-footer__logo-img {
    max-height: 48px !important;
    margin-bottom: 12px !important;
  }

  .dc-footer__bottom-info {
    padding: 16px 0 !important;
    gap: 16px !important;
  }

  .dc-footer__copyright-bar {
    padding: 12px 0 !important;
  }

  .dc-footer__copyright {
    font-size: 11px !important;
  }

  .dc-footer__legal a {
    font-size: 11px !important;
  }

  /* ==========================================================================
     19. COOKIE CONSENT — compact, above bottom nav
     ========================================================================== */
  .dc-cookie-consent {
    padding: 12px !important;
    bottom: calc(var(--dc-bottom-nav-height) + 8px + env(safe-area-inset-bottom)) !important;
  }

  .dc-cookie-consent__title {
    font-size: 13px !important;
  }

  .dc-cookie-consent__text {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  .dc-cookie-consent__btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
    min-height: 40px !important;
  }

  /* ==========================================================================
     20. DEMO NOTIFY — compact, above bottom nav
     ========================================================================== */
  .dc-demo-notify {
    bottom: calc(var(--dc-bottom-nav-height) + 64px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    right: auto !important;
    max-width: 260px !important;
  }

  /* ==========================================================================
     21. PAGE LOADER — compact
     ========================================================================== */
  .dc-page-loader {
    min-height: 120px !important;
  }

  .dc-page-loader__text {
    font-size: 14px !important;
  }

  /* ==========================================================================
     22. ANIMATIONS — subtle fade-up on scroll
     ========================================================================== */
  .dc-mr-fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .dc-mr-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Card hover/touch — subtle scale */
  .dc-ba-card,
  .dc-facility-item,
  .dc-editorial-feature,
  .dc-editorial-card,
  .dc-feature-minimal {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  }

  .dc-ba-card:active,
  .dc-facility-item:active,
  .dc-editorial-feature:active,
  .dc-editorial-card:active,
  .dc-feature-minimal:active {
    transform: scale(1.02) !important;
  }

  /* ==========================================================================
     23. MISC — hide carousel arrows on mobile
     ========================================================================== */
  .dc-carousel__arrow,
  .dc-carousel__arrow--prev,
  .dc-carousel__arrow--next {
    display: none !important;
  }

  /* Ensure images don't cause overflow */
  img {
    max-width: 100% !important;
    height: auto;
  }

  /* ==========================================================================
     24. TREATMENT JOURNEY — horizontal step carousel (injected via JS)
     ========================================================================== */
  .dc-mr-journey {
    padding-top: var(--dc-space-section) !important;
    padding-bottom: var(--dc-space-section) !important;
  }

  .dc-mr-journey__track {
    display: block !important;
    overflow: visible !important;
    padding: 0 0 30px !important;
    margin: 0 !important;
  }

  .dc-mr-journey__step {
    width: 100% !important;
    min-width: auto !important;
    background: #fff !important;
    border-radius: var(--dc-mr-card-radius) !important;
    padding: 24px 20px !important;
    border: var(--dc-mr-border) !important;
  }

  .dc-mr-journey__num {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--dc-gold, #AC8D62) !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 8px !important;
  }

  .dc-mr-journey__icon {
    font-size: 28px !important;
    color: var(--dc-gold, #AC8D62) !important;
    margin-bottom: 8px !important;
    display: block !important;
  }

  .dc-mr-journey__step h3 {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }

  .dc-mr-journey__step p {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #666 !important;
    margin: 0 !important;
  }

  /* ==========================================================================
     25. ARTICLES — horizontal card carousel (injected via JS)
     ========================================================================== */
  .dc-mr-articles {
    padding-top: var(--dc-space-section) !important;
    padding-bottom: var(--dc-space-section) !important;
  }

  .dc-mr-articles__track {
    display: flex !important;
    gap: var(--dc-mr-gap) !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px !important;
  }

  .dc-mr-articles__track::-webkit-scrollbar {
    display: none !important;
  }

  .dc-mr-article-card {
    flex-shrink: 0 !important;
    width: 240px !important;
    scroll-snap-align: start !important;
    background: #fff !important;
    border-radius: var(--dc-mr-card-radius) !important;
    box-shadow: var(--dc-mr-shadow) !important;
    border: var(--dc-mr-border) !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  }

  .dc-mr-article-card:active {
    transform: scale(1.02) !important;
  }

  .dc-mr-article-card__img {
    width: 100% !important;
    height: 140px !important;
    overflow: hidden !important;
  }

  .dc-mr-article-card__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .dc-mr-article-card__body {
    padding: 12px 0 0 0 !important;
  }

  .dc-mr-article-card__tag {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--dc-gold, #AC8D62) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
  }

  .dc-mr-article-card__body h3 {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
    color: #2B2B2B !important;
  }

  .dc-mr-article-card__date {
    font-size: 11px !important;
    color: #999 !important;
  }

  /* ==========================================================================
     26. B&A EDGE-TO-EDGE — first card starts at screen edge
     ========================================================================== */
  .dc-before-after .dc-ba-grid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ==========================================================================
     27. SECTION HEADER — compact label + title
     ========================================================================== */
  .dc-mr-journey .section-header,
  .dc-mr-articles .section-header,
  .dc-mr-reviews .section-header {
    padding: 0 16px !important;
    margin-bottom: 12px !important;
  }

  /* ==========================================================================
     28. TRUST HIGHLIGHTS — row of icons with labels
     ========================================================================== */
  .dc-mr-trust {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    background: #fff !important;
  }

  .dc-mr-trust__track {
    display: flex !important;
    gap: 0 !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px !important;
    justify-content: flex-start !important;
  }

  .dc-mr-trust__track::-webkit-scrollbar {
    display: none !important;
  }

  .dc-mr-trust__card {
    flex: 1 0 auto !important;
    min-width: 70px !important;
    max-width: 90px !important;
    scroll-snap-align: start !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .dc-mr-trust__icon {
    font-size: 24px !important;
    color: var(--dc-gold, #AC8D62) !important;
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    text-align: center !important;
    border-radius: 50% !important;
    background: rgba(172, 141, 98, 0.08) !important;
  }

  .dc-mr-trust__card h3 {
    font-size: 10px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: #2B2B2B !important;
    line-height: 1.3 !important;
  }

  .dc-mr-trust__card p {
    display: none !important;
  }

  /* ==========================================================================
     28. PATIENT REVIEWS — one large card, next partially visible
     ========================================================================== */
  .dc-mr-reviews {
    padding-top: var(--dc-space-section) !important;
    padding-bottom: var(--dc-space-section) !important;
    background-color: #967D59 !important; /* Dark Gold Tone */
  }

  .dc-mr-reviews .section-header {
    text-align: center !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
  }

  .dc-mr-reviews .section-header h2 {
    font-size: 2.5rem !important;
    color: #FFFFFF !important; /* White for better contrast on dark gold */
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
  }

  .dc-mr-header-line {
    width: 40px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.6);
    margin: 0 auto;
  }

  .dc-mr-reviews__track {
    display: block !important;
    padding: 0 20px !important;
  }

  .dc-mr-ba-card {
    background: #F1F2F0 !important; /* Off-white from screenshot */
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    margin-bottom: 20px;
  }

  .dc-mr-ba-card__images {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
    padding: 12px !important;
  }

  .dc-mr-ba-card__images img {
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  .dc-mr-ba-card__content {
    padding: 20px 24px 30px !important;
  }

  .dc-mr-ba-card__id {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin-bottom: 20px !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
  }

  .dc-mr-ba-card__row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
    font-size: 20px !important;
    color: #777 !important;
  }

  .dc-mr-ba-card__row span {
    font-weight: 400 !important;
    min-width: 70px;
  }

  .dc-mr-ba-card__row strong {
    font-weight: 600 !important;
    color: #333 !important;
  }

  .dc-mr-reviews__track.owl-theme .owl-nav {
    display: block !important;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
  }

  .dc-mr-reviews__track.owl-theme .owl-nav [class*='owl-'] {
    width: 44px;
    height: 44px;
    background: rgba(43, 77, 53, 0.7) !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 24px !important;
    pointer-events: auto;
    position: absolute;
    transition: all 0.3s ease;
  }

  .dc-mr-reviews__track.owl-theme .owl-nav .owl-prev {
    left: -10px;
  }

  .dc-mr-reviews__track.owl-theme .owl-nav .owl-next {
    right: -10px;
  }

  .dc-mr-reviews__track.owl-theme .owl-dots {
    margin-top: 20px !important;
  }

  /* ==========================================================================
     29. IMAGE ZOOM — subtle zoom on card images
     ========================================================================== */
  .dc-ba-card__img img,
  .dc-facility-item__img,
  .dc-mr-article-card__img img,
  .dc-editorial-feature__img {
    transition: transform 0.5s ease !important;
  }

  .dc-ba-card:active .dc-ba-card__img img,
  .dc-facility-item:active .dc-facility-item__img,
  .dc-mr-article-card:active .dc-mr-article-card__img img {
    transform: scale(1.04) !important;
  }
}

/* ==========================================================================
   24. VERY SMALL DEVICES (≤375px) — extra compact
   ========================================================================== */
@media (max-width: 375px) {
  :root {
    --dc-text-display: 28px;
    --dc-text-headline-lg: 26px;
  }

  .dc-doctor-profile__name {
    font-size: 14px !important;
  }
}

/* ==========================================================================
   25. EXTRA SMALL (≤360px)
   ========================================================================== */
@media (max-width: 360px) {
  :root {
    --dc-text-display: 26px;
    --dc-text-headline-lg: 24px;
  }
}

/* ==========================================================================
   26. TINY (≤320px)
   ========================================================================== */
@media (max-width: 320px) {
  :root {
    --dc-text-display: 24px;
    --dc-text-headline-lg: 22px;
    --dc-text-headline-md: 16px;
  }
}