/* ==========================================================================
   DC Clinic — Homepage Landing Styles
   Sections: Clinic Intro, Why Us, Review (Surgery), Review (Wellness),
   Promotion, Clip Review, Services+Guide+AfterCare, Campaign, Articles
   ========================================================================== */

/* ===== Variables ===== */
:root {
  --dc-home-navy: #2a2a2a;
  --dc-home-olive: #3E4D35;
  --dc-home-gold: #AC8D62;
  --dc-home-cream: #F7F4EF;
  --dc-home-cream-dark: #EDE7DC;
  --dc-home-charcoal: #333;
  --dc-home-text: #444;
  --dc-home-text-light: #666;
  --dc-home-border: rgba(99, 89, 67, 0.1);
  --dc-home-radius: 12px;
  --dc-home-radius-lg: 20px;
  --dc-home-container: 1280px;
  --dc-home-section-py: 80px;
  --dc-home-section-py-mobile: 48px;
}

/* ===== Container ===== */
.dc-home-container {
  max-width: var(--dc-home-container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== Section Base ===== */
.dc-home-section {
  padding-top: var(--dc-home-section-py);
  padding-bottom: var(--dc-home-section-py);
}

body.home #main-content,
body.page-template-front-page #main-content {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .dc-home-section {
    padding-top: var(--dc-home-section-py-mobile);
    padding-bottom: var(--dc-home-section-py-mobile);
  }
}

/* Doctor profile CTAs: an auto-width pair sitting under the bio, lifted off the
   glass card's bottom edge so they don't crowd the rounded corner on desktop. */
.dc-doctor-profile__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.dc-doctor-profile__actions > .btn-dc-gold,
.dc-doctor-profile__actions > .btn-dc-outline-gold {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 50px;
  padding: 14px 30px;
  justify-content: center;
  text-align: center;
  line-height: 1.35;
  white-space: normal;
}

/* Real breathing room below the CTAs on tablet/desktop. */
@media (min-width: 576px) {
  .dc-doctor-profile__card {
    padding-bottom: 56px;
  }
}

@media (max-width: 575px) {
  .dc-doctor-profile__card {
    padding-bottom: 24px !important;
  }

  .dc-doctor-profile__actions {
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
  }

  .dc-doctor-profile__actions > .btn-dc-gold,
  .dc-doctor-profile__actions > .btn-dc-outline-gold {
    width: 100%;
    min-height: 46px !important;
    padding: 11px 18px !important;
    font-size: 14px !important;
  }
}

/* ===== Section Header ===== */
.dc-home-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
}

.dc-home-section-header__left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dc-home-section-header__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dc-home-gold);
}

.dc-home-section-header__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--dc-home-olive);
  margin: 0;
  line-height: 1.2;
}

.dc-home-section-header__subtitle {
  font-size: 14px;
  color: var(--dc-home-text-light);
  margin: 0;
}

.dc-home-section-header__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--dc-home-gold);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: gap 0.2s ease;
}

.dc-home-section-header__link:hover {
  gap: 8px;
}

.dc-home-section-header__link .material-symbols-outlined {
  font-size: 18px;
}

@media (max-width: 768px) {
  .dc-home-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .dc-home-section-header__title {
    font-size: 22px;
  }
}

/* ==========================================================================
   1. CLINIC INTRO
   ========================================================================== */
.dc-home-intro {
  padding-top: 60px;
  padding-bottom: 40px;
  text-align: center;
}

.dc-home-intro__image {
  width: 100%;
  max-width: var(--dc-home-container);
  margin: 0 auto 28px;
  border-radius: var(--dc-home-radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 7;
}

.dc-home-intro__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dc-home-intro__name {
  font-size: 24px;
  font-weight: 700;
  color: var(--dc-home-olive);
  margin: 0 0 4px;
}

.dc-home-intro__role {
  font-size: 14px;
  color: var(--dc-home-gold);
  font-weight: 600;
  margin: 0 0 12px;
}

.dc-home-intro__text {
  font-size: 15px;
  color: var(--dc-home-text);
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .dc-home-intro {
    padding-top: 32px;
    padding-bottom: 24px;
  }
  .dc-home-intro__image {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    margin-bottom: 20px;
  }
  .dc-home-intro__name {
    font-size: 20px;
  }
  .dc-home-intro__text {
    font-size: 14px;
  }
}

/* ==========================================================================
   2. WHY US
   ========================================================================== */
.dc-home-whyus {
  background: var(--dc-home-cream);
}

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

.dc-home-whyus__card {
  background: #fff;
  border-radius: var(--dc-home-radius);
  padding: 32px 24px;
  text-align: center;
  border: 1px solid var(--dc-home-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dc-home-whyus__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(99, 89, 67, 0.1);
}

.dc-home-whyus__card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--dc-home-cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.dc-home-whyus__card-icon .material-symbols-outlined {
  font-size: 28px;
  color: var(--dc-home-gold);
}

.dc-home-whyus__card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dc-home-olive);
  margin: 0 0 8px;
}

.dc-home-whyus__card-desc {
  font-size: 13px;
  color: var(--dc-home-text-light);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .dc-home-whyus__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .dc-home-whyus__card {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   3. REVIEW SECTIONS (Surgery + Wellness)
   ========================================================================== */
.dc-home-reviews--surgery {
  background: linear-gradient(180deg, #F5F0E8 0%, #FAF7F2 100%);
}

.dc-home-reviews--wellness {
  background: linear-gradient(180deg, #EFF3ED 0%, #F5F8F3 100%);
}

.dc-home-reviews__scroll {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.dc-home-reviews__scroll.owl-loaded {
  display: block;
}

/* --- Owl nav / dots for review carousels (surgery + wellness) --- */
.dc-home-reviews__scroll.owl-theme .owl-nav {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.dc-home-reviews__scroll.owl-theme .owl-nav button.owl-prev,
.dc-home-reviews__scroll.owl-theme .owl-nav button.owl-next {
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--dc-home-border);
  color: var(--dc-home-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  box-shadow: 0 6px 18px rgba(99, 89, 67, 0.12);
}

.dc-home-reviews__scroll.owl-theme .owl-nav button.owl-prev:hover,
.dc-home-reviews__scroll.owl-theme .owl-nav button.owl-next:hover {
  background: var(--dc-home-gold);
  color: #fff;
  border-color: var(--dc-home-gold);
  transform: translateY(-2px);
}

.dc-home-reviews__scroll.owl-theme .owl-nav button.disabled {
  opacity: 0.35;
  cursor: default;
}

.dc-home-reviews__scroll.owl-theme .owl-nav button.disabled:hover {
  background: #fff;
  color: var(--dc-home-gold);
  border-color: var(--dc-home-border);
  transform: none;
}

.dc-home-reviews__scroll.owl-theme .owl-nav button span {
  font-size: 26px;
  line-height: 1;
}

.dc-home-reviews__scroll.owl-theme .owl-dots {
  margin-top: 16px;
  text-align: center;
}

.dc-home-reviews__scroll.owl-theme .owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  margin: 4px;
  background: var(--dc-home-border);
  transition: background 0.25s ease, transform 0.25s ease;
}

.dc-home-reviews__scroll.owl-theme .owl-dots .owl-dot.active span,
.dc-home-reviews__scroll.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--dc-home-gold);
  transform: scale(1.15);
}

@media (max-width: 768px) {
  .dc-home-reviews__scroll.owl-theme .owl-nav button.owl-prev,
  .dc-home-reviews__scroll.owl-theme .owl-nav button.owl-next {
    width: 36px;
    height: 36px;
  }
}

.dc-home-review-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.dc-home-review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(99, 89, 67, 0.12);
  border-color: rgba(172, 141, 98, 0.3);
}

.dc-home-review-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.dc-home-review-card__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.dc-home-review-card__heading {
  flex: 1;
  text-align: right;
}

.dc-home-review-card__cat {
  font-size: 22px;
  font-weight: 700;
  color: #2B2B2B;
  margin: 0;
  line-height: 1.2;
}

.dc-home-review-card__subcat {
  font-size: 10px;
  color: #AC8D62;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.dc-home-review-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #F9F7F2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-home-review-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.dc-home-review-card:hover .dc-home-review-card__img img {
  transform: scale(1.05);
}

.dc-home-review-card__ba {
  position: absolute;
  bottom: 12px;
  background: rgba(107, 91, 69, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 100px;
  letter-spacing: 0.05em;
}

.dc-home-review-card__ba--before {
  left: 12px;
}

.dc-home-review-card__ba--after {
  right: 12px;
}

.dc-home-review-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px 0;
}

.dc-home-review-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #2B2B2B;
  background: #F9F7F2;
  padding: 6px 10px;
  border-radius: 100px;
}

.dc-home-review-card__tag .material-symbols-outlined {
  font-size: 14px;
  color: #AC8D62;
}

.dc-home-review-card__id {
  font-size: 22px;
  font-weight: 700;
  color: #2B2B2B;
  padding: 12px 16px 0;
}

.dc-home-review-card__title {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  padding: 4px 16px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dc-home-review-card__meta {
  padding: 10px 16px 16px;
}

.dc-home-review-card__meta-row {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 13px;
}

.dc-home-review-card__meta-row:last-child {
  border-bottom: none;
}

.dc-home-review-card__meta-label {
  color: #8B8B8B;
  min-width: 70px;
  flex-shrink: 0;
}

.dc-home-review-card__meta-value {
  color: #2B2B2B;
  font-weight: 500;
}

@media (max-width: 768px) {
  .dc-home-reviews__scroll:not(.owl-carousel) {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin: 0 -20px;
    padding: 0 20px 8px;
  }
  .dc-home-reviews__scroll:not(.owl-carousel) .dc-home-review-card {
    flex: 0 0 260px;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   4. PROMOTION
   ========================================================================== */

/* Promotion section sub-headers (e.g., "PROMOTION", "ARTICLES") */
.dc-home-promo .dc-home-section-header {
  margin-top: 24px;
  margin-bottom: 24px;
}

.dc-home-promo .dc-home-section-header:first-of-type {
  margin-top: 0;
  margin-bottom: 32px;
}

/* Articles sub-header in promotion section */
.dc-home-promo .dc-home-section-header[style*="margin-top: 40px"] {
  margin-top: 40px !important;
}

.dc-home-promo .dc-home-section-header__title {
  font-size: 1.25rem;
  color: var(--dc-home-olive);
}

.dc-home-promo__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.dc-home-promo__grid.owl-loaded {
  display: block;
}

/* Once Owl takes over, each card must fill its slide — the mobile
   `flex: 0 0 280px` below is only for the pre-Owl native scroll fallback and
   otherwise leaves the card hugging the left with a gap on the right. */
.dc-home-promo__grid.owl-loaded .dc-home-promo__card {
  flex: 1 1 auto;
  width: 100%;
}

.dc-home-promo__card {
  display: flex;
  flex-direction: column;
  border-radius: var(--dc-home-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--dc-home-border);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dc-home-promo__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(99, 89, 67, 0.12);
}

.dc-home-promo__card-img {
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
}

.dc-home-promo__card-title a {
  color: inherit;
  text-decoration: none;
}

.dc-home-promo__card-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
}

.dc-home-promo__card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.dc-home-promo__card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dc-home-olive);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

.dc-home-promo__card-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 0 0;
}

.dc-home-promo__card-price-old {
  font-size: 13px;
  font-weight: 500;
  color: var(--dc-home-text-light);
  text-decoration: line-through;
  margin: 0;
}

.dc-home-promo__card-price-new {
  font-size: 18px;
  font-weight: 700;
  color: var(--dc-home-gold);
  margin: 0;
}

.dc-home-promo__card-description {
  font-size: 12px;
  color: var(--dc-home-text-light);
  line-height: 1.5;
  margin: 4px 0 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.8em;
}

.dc-home-promo__card-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--dc-home-border);
}

.dc-home-promo__card-details {
  font-size: 12px;
  font-weight: 600;
  color: var(--dc-home-olive);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.dc-home-promo__card-details:hover {
  color: var(--dc-home-gold);
}

.dc-home-promo__card-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--dc-home-gold);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease;
}

.dc-home-promo__card-cta:hover {
  color: var(--dc-home-olive);
}

.dc-home-promo__card-cta .material-symbols-outlined {
  font-size: 18px;
}

.dc-home-promo__empty {
  padding: 32px;
  text-align: center;
  color: var(--dc-home-text-light);
}

@media (max-width: 768px) {
  .dc-home-promo .dc-home-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .dc-home-promo .dc-home-section-header__title {
    font-size: 1.1rem;
  }
  
  .dc-home-promo__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin: 0 -20px;
    padding: 0 20px 8px;
  }
  .dc-home-promo__card {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }
}

/* --- Owl nav / dots for promo grid + articles carousel --- */
.dc-home-promo__grid.owl-theme .owl-nav,
.dc-home-articles__carousel.owl-theme .owl-nav {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.dc-home-promo__grid.owl-theme .owl-nav button.owl-prev,
.dc-home-promo__grid.owl-theme .owl-nav button.owl-next,
.dc-home-articles__carousel.owl-theme .owl-nav button.owl-prev,
.dc-home-articles__carousel.owl-theme .owl-nav button.owl-next {
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--dc-home-border);
  color: var(--dc-home-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  box-shadow: 0 6px 18px rgba(99, 89, 67, 0.12);
}

.dc-home-promo__grid.owl-theme .owl-nav button.owl-prev:hover,
.dc-home-promo__grid.owl-theme .owl-nav button.owl-next:hover,
.dc-home-articles__carousel.owl-theme .owl-nav button.owl-prev:hover,
.dc-home-articles__carousel.owl-theme .owl-nav button.owl-next:hover {
  background: var(--dc-home-gold);
  color: #fff;
  border-color: var(--dc-home-gold);
  transform: translateY(-2px);
}

.dc-home-promo__grid.owl-theme .owl-nav button.disabled,
.dc-home-articles__carousel.owl-theme .owl-nav button.disabled {
  opacity: 0.35;
  cursor: default;
}

.dc-home-promo__grid.owl-theme .owl-nav button.disabled:hover,
.dc-home-articles__carousel.owl-theme .owl-nav button.disabled:hover {
  background: #fff;
  color: var(--dc-home-gold);
  border-color: var(--dc-home-border);
  transform: none;
}

.dc-home-promo__grid.owl-theme .owl-nav button span,
.dc-home-articles__carousel.owl-theme .owl-nav button span {
  font-size: 26px;
  line-height: 1;
}

.dc-home-promo__grid.owl-theme .owl-dots,
.dc-home-articles__carousel.owl-theme .owl-dots {
  margin-top: 16px;
  text-align: center;
}

.dc-home-promo__grid.owl-theme .owl-dots .owl-dot span,
.dc-home-articles__carousel.owl-theme .owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  margin: 4px;
  background: var(--dc-home-border);
  transition: background 0.25s ease, transform 0.25s ease;
}

.dc-home-promo__grid.owl-theme .owl-dots .owl-dot.active span,
.dc-home-promo__grid.owl-theme .owl-dots .owl-dot:hover span,
.dc-home-articles__carousel.owl-theme .owl-dots .owl-dot.active span,
.dc-home-articles__carousel.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--dc-home-gold);
  transform: scale(1.15);
}

@media (max-width: 768px) {
  .dc-home-promo__grid.owl-theme .owl-nav button.owl-prev,
  .dc-home-promo__grid.owl-theme .owl-nav button.owl-next,
  .dc-home-articles__carousel.owl-theme .owl-nav button.owl-prev,
  .dc-home-articles__carousel.owl-theme .owl-nav button.owl-next {
    width: 36px;
    height: 36px;
  }
}


/* ==========================================================================
   5. CLIP REVIEW
   ========================================================================== */
.dc-home-clips__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.dc-home-clips__grid.owl-loaded {
  display: block;
}

.dc-home-clip-card__img-wrap {
  position: relative;
}

.dc-home-clip-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
  pointer-events: none;
}

.dc-home-review-card:hover .dc-home-clip-card__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: #fff;
}

.dc-home-clip-card__play .material-symbols-outlined {
  font-size: 24px;
  color: var(--dc-home-olive);
}

.dc-home-clip-card {
  position: relative;
  border-radius: var(--dc-home-radius);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  aspect-ratio: 4 / 3;
  background: #000;
}

.dc-home-clip-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease, opacity 0.3s ease;
}

.dc-home-clip-card:hover .dc-home-clip-card__thumb {
  transform: scale(1.05);
  opacity: 0.85;
}

.dc-home-clip-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
}

.dc-home-clip-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
}

.dc-home-clip-card:hover .dc-home-clip-card__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: #fff;
}

.dc-home-clip-card__play .material-symbols-outlined {
  font-size: 28px;
  color: var(--dc-home-olive);
}

.dc-home-clip-card__title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

@media (max-width: 768px) {
  .dc-home-clips__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin: 0 -20px;
    padding: 0 20px 8px;
  }
  .dc-home-clip-card {
    flex: 0 0 240px;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   6. SERVICES + VISIT GUIDE + AFTER CARE
   ========================================================================== */
.dc-home-services {
  background: var(--dc-home-cream);
}

.dc-home-services__grid {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 20px;
}

.dc-home-services__main {
  border-radius: var(--dc-home-radius);
  overflow: hidden;
  position: relative;
  min-height: 320px;
  text-decoration: none;
  display: block;
}

.dc-home-services__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.dc-home-services__main-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.65) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

.dc-home-services__main-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dc-home-gold);
  margin: 0 0 4px;
}

.dc-home-services__main-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}

.dc-home-services__main-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  margin: 0 0 12px;
}

.dc-home-services__main-link {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dc-home-services__main-link .material-symbols-outlined {
  font-size: 18px;
}

.dc-home-services__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dc-home-services__sub-card {
  display: flex;
  align-items: stretch;
  border-radius: var(--dc-home-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--dc-home-border);
  text-decoration: none;
  flex: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dc-home-services__sub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99, 89, 67, 0.1);
}

.dc-home-services__sub-body {
  padding: 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dc-home-services__sub-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--dc-home-gold);
  letter-spacing: 0.1em;
  margin: 0 0 4px;
}

.dc-home-services__sub-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dc-home-olive);
  margin: 0 0 6px;
}

.dc-home-services__sub-desc {
  font-size: 13px;
  color: var(--dc-home-text-light);
  line-height: 1.5;
  margin: 0 0 10px;
}

.dc-home-services__sub-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--dc-home-gold);
  display: flex;
  align-items: center;
  gap: 4px;
}

.dc-home-services__sub-link .material-symbols-outlined {
  font-size: 16px;
}

.dc-home-services__sub-img {
  width: 140px;
  flex-shrink: 0;
  object-fit: cover;
}

@media (max-width: 768px) {
  .dc-home-services__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .dc-home-services__main {
    min-height: 240px;
  }
  .dc-home-services__sub-img {
    width: 100px;
  }
  .dc-home-services__sub-body {
    padding: 16px 18px;
  }
}

/* ==========================================================================
   7. CAMPAIGN BANNER
   ========================================================================== */
.dc-home-campaign {
  padding-top: 10;
  padding-bottom: var(--dc-home-section-py);
}

.dc-home-campaign__banner {
  width: 100%;
  border-radius: var(--dc-home-radius-lg);
  overflow: hidden;
  position: relative;
  display: block;
  text-decoration: none;
}

.dc-home-campaign__banner img {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  display: block;
  transition: transform 0.4s ease;
}

.dc-home-campaign__banner:hover img {
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .dc-home-campaign {
    padding-bottom: var(--dc-home-section-py-mobile);
  }
  .dc-home-campaign__banner {
    border-radius: 12px;
  }
  .dc-home-campaign__banner img {
    max-height: 220px;
  }
}

/* ==========================================================================
   8. ARTICLES (Owl Carousel)
   ========================================================================== */
.dc-home-articles {
  background: linear-gradient(180deg, #EFF3ED 0%, #F5F8F3 100%);
}

.dc-home-articles__carousel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.dc-home-articles__carousel.owl-loaded {
  display: block;
}

.dc-home-article-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--dc-home-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--dc-home-border);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dc-home-article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(99, 89, 67, 0.1);
}

.dc-home-article-card__img {
  width: 100%;
  overflow: hidden;
}

.dc-home-article-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.dc-home-article-card:hover .dc-home-article-card__img img {
  transform: scale(1.05);
}

.dc-home-article-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.dc-home-article-card__cat {
  font-size: 11px;
  font-weight: 600;
  color: var(--dc-home-gold);
}

.dc-home-article-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--dc-home-olive);
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dc-home-article-card__excerpt {
  font-size: 13px;
  color: var(--dc-home-text-light);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dc-home-article-card__date {
  font-size: 12px;
  color: #999;
  margin-top: auto;
  padding-top: 4px;
}

.dc-home-article-card__read {
  font-size: 12px;
  font-weight: 600;
  color: var(--dc-home-gold);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.dc-home-article-card__read .material-symbols-outlined {
  font-size: 16px;
}

/* ==========================================================================
   9. FACILITIES
   ========================================================================== */
.dc-home-facilities {
  background: #fff;
}

.dc-home-facilities__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.dc-home-facilities__grid.owl-carousel {
  display: block;
}

.dc-home-facility-card {
  border-radius: var(--dc-home-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--dc-home-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dc-home-facility-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(99, 89, 67, 0.1);
}

.dc-home-facility-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.dc-home-facility-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.dc-home-facility-card:hover .dc-home-facility-card__img img {
  transform: scale(1.05);
}

.dc-home-facility-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dc-home-olive);
  margin: 0;
  padding: 16px 20px 0;
}

.dc-home-facility-card__desc {
  font-size: 13px;
  color: var(--dc-home-text-light);
  line-height: 1.5;
  margin: 8px 0 0;
  padding: 0 20px 20px;
}

@media (max-width: 768px) {
  .dc-home-facilities__grid:not(.owl-carousel) {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ===== Video Modal ===== */
.dc-home-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.dc-home-video-modal.is-open {
  display: flex;
}

.dc-home-video-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.dc-home-video-modal__close .material-symbols-outlined {
  font-size: 24px;
}

.dc-home-video-modal__video {
  max-width: 800px;
  width: 100%;
  border-radius: 12px;
}

/* ==========================================================================
   Certificate Gallery
   ========================================================================== */
/* Full-bleed white band: break out of the 1240px .dc-doctor-intro__container so
   the panel spans the viewport instead of floating as a boxed card on the
   blurred background. Inner content stays capped via .dc-certificate__grid. */
.dc-certificate-gallery {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 1px; /* 1px to avoid gap between this and the previous section */
  padding: 44px 20px 60px;
  background: #fff;
  border-top: 1px solid rgba(99, 89, 67, 0.12);
  border-radius: 0;
  text-align: center;
}

.dc-certificate__grid {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
}

.dc-certificate__grid .owl-stage-outer {
  padding: 4px 0;
}

.dc-certificate__grid .owl-item {
  padding: 0 12px;
}

/* --- Owl nav / dots for certificate gallery --- */
.dc-certificate__grid.owl-theme .owl-nav {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.dc-certificate__grid.owl-theme .owl-nav button.owl-prev,
.dc-certificate__grid.owl-theme .owl-nav button.owl-next {
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--dc-home-border);
  color: var(--dc-home-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  box-shadow: 0 6px 18px rgba(99, 89, 67, 0.12);
}

.dc-certificate__grid.owl-theme .owl-nav button.owl-prev:hover,
.dc-certificate__grid.owl-theme .owl-nav button.owl-next:hover {
  background: var(--dc-home-gold);
  color: #fff;
  border-color: var(--dc-home-gold);
  transform: translateY(-2px);
}

.dc-certificate__grid.owl-theme .owl-nav button.disabled {
  opacity: 0.35;
  cursor: default;
}

.dc-certificate__grid.owl-theme .owl-nav button.disabled:hover {
  background: #fff;
  color: var(--dc-home-gold);
  border-color: var(--dc-home-border);
  transform: none;
}

.dc-certificate__grid.owl-theme .owl-nav button span {
  font-size: 26px;
  line-height: 1;
}

.dc-certificate__grid.owl-theme .owl-dots {
  margin-top: 16px;
  text-align: center;
}

.dc-certificate__grid.owl-theme .owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  margin: 4px;
  background: var(--dc-home-border);
  transition: background 0.25s ease, transform 0.25s ease;
}

.dc-certificate__grid.owl-theme .owl-dots .owl-dot.active span,
.dc-certificate__grid.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--dc-home-gold);
  transform: scale(1.15);
}

@media (max-width: 767px) {
  .dc-certificate__grid.owl-theme .owl-nav button.owl-prev,
  .dc-certificate__grid.owl-theme .owl-nav button.owl-next {
    width: 36px;
    height: 36px;
  }
}

.dc-certificate__card {
  text-align: center;
  padding: 12px;
}

.dc-certificate__frame {
  background: #fff;
  border-radius: 8px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border: 1px solid rgba(0,0,0,0.06);
}

.dc-certificate__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}

.dc-certificate__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dc-navy-deep, #2B2B2B);
  margin: 0 0 4px;
}

.dc-certificate__desc {
  font-size: 0.9rem;
  color: var(--dc-on-surface-variant, #635943);
  margin: 0;
}

.dc-certificate__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

@media (max-width: 767px) {
  .dc-certificate__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .dc-certificate-gallery {
    margin-top: 40px;
  }
  .dc-certificate__frame {
    aspect-ratio: 1 / 1;
  }
  .dc-certificate__title {
    font-size: 1rem;
  }
}

/* ==========================================================================
   Wellness Banner
   ========================================================================== */
.dc-home-wellness-banner {
  padding-top: 0;
  padding-bottom: 0;
}

.dc-home-wellness-banner__img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

/* ===== QA fix 2026-08-22 (P1-6): horizontal overflow 1280–1600px =====
   Decorative layers (.dc-doctor-intro__bg blur/scale, hero video transform)
   extend past the viewport edge. Clip them at section level. */
.dc-hero-building {
  overflow: clip;
}
.dc-hero-building__bg {
  overflow: clip;
}
.dc-doctor-intro {
  overflow: clip !important;
  /* The certificate band is full-bleed and ends the section itself — drop the
     blurred-background strip that used to sit below it. */
  padding-bottom: 0 !important;
}

@media (max-width: 768px) {
  /* Keep the full-bleed band but restore comfortable side padding
     (mobile-redesign.css zeroes it with !important). */
  .dc-certificate-gallery {
    margin-top: 16px !important;
    padding: 32px 16px 40px !important;
  }
}

/* ===== Surgery Review Summary Cards (Homepage) ===== */
.dc-surgery-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  height: 100%;
}

.dc-surgery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(99, 89, 67, 0.12);
  border-color: rgba(172, 141, 98, 0.3);
}

.dc-surgery-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-surgery-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.35s ease;
}

.dc-surgery-card:hover .dc-surgery-card__img img {
  transform: scale(1.03);
}

.dc-surgery-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}

.dc-surgery-card__title-th {
  font-size: 24px;
  font-weight: 600;
  color: #2B2B2B;
  margin: 0 0 2px;
  line-height: 1.3;
}

.dc-surgery-card__title-en {
  font-size: 13px;
  font-weight: 500;
  color: #AC8D62;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
  line-height: 1.4;
}

.dc-surgery-card__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dc-surgery-card__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.dc-surgery-card__row:last-child {
  border-bottom: none;
}

.dc-surgery-card__label {
  font-size: 13px;
  font-weight: 500;
  color: #8B8B8B;
}

.dc-surgery-card__value {
  font-size: 15px;
  font-weight: 400;
  color: #2B2B2B;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .dc-home-reviews__scroll:not(.owl-carousel) .dc-surgery-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }
  .dc-surgery-card__title-th {
    font-size: 22px;
  }
  .dc-surgery-card__body {
    padding: 14px 16px 16px;
  }
  .dc-surgery-card__row {
    padding: 6px 0;
  }
}

/* ==========================================================================
   Clip Review — play icon moved to the top-right corner of each card,
   matching the Physical Therapy "Social / Video" cards (.pt-social-card__play).
   Overrides the centred .dc-video-play only inside .dc-home-clips.
   ========================================================================== */
.dc-home-clips .dc-video-play {
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto;
  bottom: auto;
  transform: none;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 0;
  box-shadow: none;
}

.dc-home-clips .dc-video-play .material-symbols-outlined {
  font-size: 20px;
  color: #fff;
  margin-left: 1px;
}

.dc-home-clips .dc-gallery__item--video:hover .dc-video-play {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.32);
  border: 0;
  box-shadow: none;
}

@media (max-width: 768px) {
  .dc-home-clips .dc-video-play {
    top: 12px;
    right: 12px;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
  .dc-home-clips .dc-video-play .material-symbols-outlined {
    font-size: 18px !important;
  }
}

/* Same top-right placement for the YouTube-facade play badge when a Clip
   Review card is backed by a YouTube video. */
.dc-home-clips .dc-ytlite__play {
  left: auto;
  top: 16px;
  right: 16px;
  transform: none;
  width: 44px;
  height: 31px;
}
.dc-home-clips .dc-ytlite__btn:hover .dc-ytlite__play,
.dc-home-clips .dc-ytlite__btn:focus-visible .dc-ytlite__play {
  transform: scale(1.06);
}
@media (max-width: 768px) {
  .dc-home-clips .dc-ytlite__play {
    top: 12px;
    right: 12px;
  }
}

/* The Clip Review card is a 9:16 box (.dc-gallery__item). The YouTube facade
   (.dc-ytlite) ships its own 16:9 aspect-ratio, so left as a normal block it
   only fills the top strip and leaves the rest of the card empty. Pin it to
   the card like the .dc-ytlite--fill variant does. */
.dc-home-clips .dc-gallery__item--video .dc-ytlite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  z-index: 1;
}

/* The decorative gradient (.dc-gallery__item::after) sits at inset:0 with no
   pointer-events rule, so it swallows clicks meant for the YouTube facade's
   play button. It is purely visual — let clicks through. */
.dc-home-clips .dc-gallery__item::after,
.dc-home-clips .dc-gallery__item--video::after {
  pointer-events: none;
}

/* Empty state — no configured clips yet. */
.dc-home-clips .dc-gallery__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 40px 0;
  text-align: center;
  color: var(--dc-text-muted, #8a8578);
  font-size: 15px;
}

/* ===== Hero video — mobile crop fix (2026-09-08) =====================
   mobile-redesign.css §5 forces .dc-hero-building to `height: 30vh;
   max-height: 320px` — an ~1.5:1 letterbox slot. The hero source is a
   16:9 (1920×1080) ambient video, so `object-fit: cover` into that slot
   scales the frame to fill width and crops ~30% off the top and bottom
   (the reported "doctor's head and feet cut off"). The prototype's
   bundled clip happens to be framed for a letterbox and hides this; the
   configured Homepage "Hero Video" is not.

   Fix: on mobile give the hero the video's native 16:9 box instead of a
   fixed 30vh. Full-bleed width, whole frame visible, no letterbox bands,
   no distortion. aspect-ratio keeps it CLS-free (reserves height before
   the video loads). Desktop/tablet are untouched — this matches the
   luxury.css hero breakpoint (max-width: 767px); at ≥768px the hero keeps
   object-fit: cover on the tall (min-height 480–760px) box, exactly as
   the prototype does. */
@media (max-width: 767px) {
  .dc-hero-building {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9;
  }
  .dc-hero-building__bg {
    position: absolute !important;
    inset: 0 !important;
  }
  .dc-hero-building__bg video,
  .dc-hero-building__bg img {
    /* 16:9 media in a 16:9 box → cover == contain, no crop, no bars.
       Drop the scale(1.04) push-in from luxury.css so nothing spills. */
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }
}

/* ===== Hero YouTube background embed (2026-09-08) ===================
   When "Hero Video (URL YouTube)" is set, front-page.php renders an
   <iframe class="dc-hero-building__yt"> instead of <video>. An iframe
   can't use object-fit, so to fill the hero with no pillar/letterbox
   bands: centre it, force it to at least the full box on both axes AND
   to a 16:9 rectangle sized off the viewport (min-height 56.25vw), and
   let .dc-hero-building__bg (overflow: clip, from the QA fix above) trim
   whichever axis overflows. The poster is painted as the iframe
   background so there is no black flash before YouTube starts playing
   (its src is attached only after window.load). */
.dc-hero-building__yt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 56.25vw; /* 16:9 of the viewport width — covers wide heroes */
  border: 0;
  pointer-events: none; /* ambient only — never capture click/scroll */
}
@media (max-width: 767px) {
  /* Mobile hero is already an exact 16:9 box (see the crop fix above),
     so the iframe fills it 1:1 with no viewport-based oversize. */
  .dc-hero-building__yt {
    min-height: 100%;
  }
}