.page-hero__bg--contact {
  background-image: url('../img/bg/bg-contact.jpg');
}
/* 手機：照片固定 4:3（寬:高 = 4:3 → 高 = 75vw），白卡落在照片正下方 */
@media (max-width: 767.98px) {
  .page-hero--contact { min-height: 0; }
  /* bg + overlay 固定 4:3、貼頂，不跟著白卡長高 */
  .page-hero--contact .page-hero__bg,
  .page-hero--contact .page-hero__overlay {
    height: 75vw;
    bottom: auto;
  }
  .page-hero__bg--contact {
    background-image: url('../img/bg/m-bg-contact.jpg');
    background-position: top center;
    background-size: cover;
  }
  /* title 區撐滿照片高度（4:3 = 75vw，扣掉 inner padding-top 5rem），把白卡推到照片下緣 */
  .page-hero--contact .page-hero__title {
    min-height: calc(75vw - 5rem);
    position: relative;
  }
  .page-hero--contact .page-hero__h1 {
    position: absolute;
    left: 0;
    bottom: 2rem;
  }
  .page-hero--contact .hero-card { margin-top: 0; }
}
@media (min-width: 1024px) {
  /* 790px floor + 85svh 隨視窗高度等比、75rem 蓋頂避免 4K 過高 */
  .page-hero--contact { min-height: clamp(49.375rem, 70svh, 75rem); }
  /* title 往下推到中間偏上 */
  .page-hero--contact .page-hero__title { margin-top: 5%; }
}

/* ≥1280：hero 內容（title / breadcrumb / CTA）對齊置中 1366 欄；
   白卡背景貼左、內容靠 padding 對齊 1366 欄左緣（地圖照片仍滿版）*/
@media (min-width: 1280px) {
  .page-hero--contact .page-hero__inner {
    padding-left:  var(--edge-pad);
    padding-right: var(--edge-pad);
  }
  .page-hero--contact .breadcrumb {
    left: 0;
    right: 0;
    padding-left:  var(--edge-pad);
    padding-right: var(--edge-pad);
  }
  /* 白卡：背景延伸到視窗左緣，內容對齊 1366 欄左緣 */
  .page-hero--contact .hero-card { left: 0; width: 50vw; }
  .page-hero--contact .hero-card__inner {
    padding-left: var(--edge-pad);
  }
  .page-hero--contact .contact-cta {
    left: 50%;
    right: var(--edge-pad);
  }
}

/* ≥1600：contact 白卡內距底部保留 5rem（覆蓋共用元件的 0）*/
@media (min-width: 1600px) {
  .page-hero--contact .hero-card__inner {padding-top: 3rem; padding-bottom: 3rem; }
}

/* ============================================================
   Contact CTA — Call Now btn + email link
   桌機浮在 hero 右半部下方，手機跟著 hero 正常流
   ============================================================ */
.contact-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (max-width: 1023.98px) {
  .contact-cta {
    order: 1;
    background: var(--color-white, #fff);
    margin: 0 -1.5rem;
    padding: 0 1.5rem 3rem;
    gap: 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .contact-cta { margin: 0 -2.5rem; padding: 0 2.5rem 3rem; }
}
.contact-cta__email {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-navy, #262A71);
  font-family: var(--font-body, sans-serif);
  font-weight: 500;
  font-size: 1.125rem;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 0.25rem;
  transition: color .2s ease;
}
.contact-cta__email:hover { color: var(--color-navy-dark, #1B1F55); }
.contact-cta__email-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  background-color: currentColor;                      /* icon 顏色 = email link 顏色 */
  -webkit-mask: url('../img/icon/icon-mail.svg') center / contain no-repeat;
          mask: url('../img/icon/icon-mail.svg') center / contain no-repeat;
}

@media (min-width: 1024px) {
  .contact-cta__email { font-size: 1.4375rem; color: var(--color-yellow, #F0BC29); }
  .contact-cta__email:hover { color: var(--color-yellow-dark, #D4A017); }
}
@media (min-width: 1024px) {
  .contact-cta {
    position: absolute;
    left: 50%;
    right: 0;
    bottom: 3rem;
    margin: 0;
    gap: 0.875rem;
    z-index: 3;
  }
}