/* ============================================================
   global.css — 全站共用合併包
   合併自：core.css + components.css + header.css + footer.css
   載入順序即合併順序（勿更動）。頁面專屬樣式（home/contact/area）仍獨立載入。
   ============================================================ */

:root {
  --color-navy:        #262A71;
  --color-navy-dark:   #1B1F55;
  --color-yellow:      #F0BC29;
  --color-yellow-dark: #D4A017;

  --color-bg-light:    #F5F5F5;
  --color-text-body:   #333333;
  --color-text-muted:  #666666;
  --color-white:       #FFFFFF;

  --font-display: 'Big Shoulders Display', sans-serif;
  --font-cta:     'Big Shoulders Display', sans-serif;
  --font-body:    'Montserrat', system-ui, sans-serif;

  --container-max: 85.3125rem;
  --content-max:   85.3125rem;    /* 1366 固定（= container-max，內容用） */
  --gutter-mobile: 1.5rem;
  --gutter-desktop: 3rem;
  /* 內容對齊置中 1366 欄的左右留白：≥1280 時內容貼齊 1366 欄、否則 4rem floor。
     用於 page-hero / breadcrumb / hero-card / contact-cta / area-hero 等滿版 hero 內對齊 */
  --edge-pad: max(4rem, calc((100vw - var(--content-max)) / 2));

  --radius-card: 0.75rem;
  --radius-btn:  0.625rem;

  --section-py-mobile: 3rem;
  --section-py-desktop: 5rem;
}

/* 大螢幕（≥1920）：寬版視覺區塊的內容欄長到 1800，保底左右留白 23rem
   （≈184px，對齊 header gutter，內容不會比導覽列還寬）。
   --content-max 維持 1366 不動 → 內頁閱讀寬度 / hero 對齊不受影響。
   受影響（自動變寬）：services 卡片格 / gallery / why / testimonials / footer */
@media (min-width: 1920px) {
  :root { --container-max: min(112.5rem, calc(100vw - 23rem)); }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;                    /* 擋掉全頁水平捲動（slider full-bleed 必須） */
}

body {
  margin: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body, #333);
  background: var(--color-white, #fff);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* Sticky footer：內容短時 footer 推到視窗底，內容長時自然在文件底 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1; }

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.is-menu-open { overflow: hidden; }

.container {
  width: 100%;
  max-width: var(--container-max, 85.3125rem);
  margin: 0 auto;
  padding-left: var(--gutter-mobile, 1.5rem);
  padding-right: var(--gutter-mobile, 1.5rem);
}
@media (min-width: 1024px) {
  .container {
    padding-left: var(--gutter-desktop, 3rem);
    padding-right: var(--gutter-desktop, 3rem);
  }
}

.section-title {
  margin: 0;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-navy, #262A71);
}
@media (min-width: 1920px) {
  .section-title { font-size: 5rem; }
}

.text-regular,
.text-regular > p,
.faq-item__answer,
.final-cta__sub,
.testimonials__desc,
.gallery__desc,
.service-areas__desc,
.why-feature__desc,
.services-block__cities,
.services-block__intro,
.about-story__text,
.area-intro__aside-intro,
.work-hero__desc,
.sd-precision__text {
  margin: 0;
  font-family: var(--font-body, sans-serif);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: 0.05625rem;
}
@media (max-width: 767.98px) {
  .text-regular,
  .text-regular > p,
  .faq-item__answer,
  .final-cta__sub,
  .testimonials__desc,
  .gallery__desc,
  .service-areas__desc,
  .why-feature__desc,
  .services-block__cities,
  .services-block__intro,
  .about-story__text,
  .area-intro__aside-intro,
  .work-hero__desc,
  .sd-precision__text { font-size: 1rem; }
}

.text-large,
.faq-item__question,
.services-block__footer-text {
  margin: 0;
  font-family: var(--font-body, sans-serif);
  font-weight: 500;
  font-size: 1.4375rem;
  line-height: 1.3;
  letter-spacing: 0;
}
@media (max-width: 767.98px) {
  .text-large,
  .faq-item__question,
  .services-block__footer-text { font-size: 1.25rem; }
}

.h3 {
  margin: 0;
  font-family: var(--font-cta, sans-serif);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1875rem);
  line-height: 1.2;
  letter-spacing: 0;
}

/* ============================================================
   Buttons (shared) — 防呆原則：
   text-decoration:none; cursor:pointer; color:<value>; display:inline-flex;
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-cta, sans-serif);
  font-weight: 800;
  border-radius: var(--radius-btn, 0.625rem);
  border: none;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-yellow, #F0BC29);
  color: var(--color-navy, #262A71);
}
.btn--primary:hover {
  background: var(--color-yellow-dark, #D4A017);
  color: var(--color-navy, #262A71);
}

.btn--navy {
  background: var(--color-navy, #262A71);
  color: var(--color-white, #fff);
}
.btn--navy:hover {
  background: var(--color-navy-dark, #1B1F55);
  color: var(--color-white, #fff);
}
.btn--navy img { filter: brightness(0) invert(1); }

.btn--white {
  background: var(--color-white, #fff);
  color: var(--color-navy, #262A71);
}
.btn--white:hover {
  background: #f1f1f3;
  color: var(--color-navy, #262A71);
}

.btn--sm  { padding: 0.5rem 1.25rem; font-size: 1.25rem; height: 2.5rem; }
.btn--md  { padding: 0.625rem 1.5rem; font-size: 1.25rem; height: 3rem; }
.btn--lg  { padding: 1.125rem 1.875rem; font-size: 1.6875rem; height: 4.0625rem; }

/* Icon inside button (img or svg) — 寬度固定、高度依比例 */
.btn--lg img, .btn--lg svg { width: 1.6875rem; height: auto; flex-shrink: 0; }
.btn--md img, .btn--md svg { width: 1.25rem;   height: auto; flex-shrink: 0; }
.btn--sm img, .btn--sm svg { width: 1rem;      height: auto; flex-shrink: 0; }

.link-phone {
  display: inline-flex;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  color: var(--color-yellow, #F0BC29);
  white-space: nowrap;
  transition: color .2s ease;
}
.link-phone:hover { color: var(--color-yellow-dark, #D4A017); }

.page-hero {
  position: relative;
  display: flex;
  width: 100%;
  margin-top: 4.625rem;
  min-height: 55svh;
  color: var(--color-white, #fff);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: center / cover no-repeat #000;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
              rgba(0, 0, 0, .30) 0%,
              rgba(0, 0, 0, 0)   40%,
              rgba(0, 0, 0, .45) 100%);
}
.page-hero__inner {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  gap: 1.25rem;
  padding: 5rem 1.5rem 0;                               /* 底 0 → hero-card 貼齊 hero 底 */
}
.page-hero__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 50rem;
  position: relative;
}
.page-hero__h1 {
  margin: 0;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: clamp(3.5rem, 9vw, 8rem);                 /* 40 → 128px（大螢幕封頂）*/
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-align: left;
  color: var(--color-white, #fff);
  text-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, .55);
  position: relative;
}

@media (min-width: 768px) {
  .page-hero { min-height: 32rem; }
  .page-hero__inner { padding: 6rem 2.5rem 0; }
}
@media (min-width: 1024px) {
  .page-hero { min-height: 36rem; }
  .page-hero__inner { padding: 6rem 3rem 3.5rem; }
}
@media (min-width: 1280px) {
  .page-hero { margin-top: 6.25rem; }
  .page-hero__inner { padding-left: 4rem; padding-right: 4rem; }
}
@media (min-width: 1600px) {
  .page-hero__inner { padding-left: 11.3125rem; padding-right: 11.75rem; }
}

.breadcrumb {
  position: absolute;
  top: 1.5rem;
  left: 0;
  right: 0;
  padding: 0 1.5rem;
  z-index: 2;
  font-family: var(--font-body, sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, .85);
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb__sep {
  opacity: 0.6;
  user-select: none;
}
.breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.breadcrumb a:hover { color: var(--color-yellow, #F0BC29); }
.breadcrumb__current {  font-weight: 600; }

.breadcrumb--dark {
  position: static;
  margin-top: 4.625rem;
  padding-top: 1.5rem;
  padding-bottom: 0;
  color: var(--color-navy, #262A71);
}
.breadcrumb--dark a:hover { color: var(--color-yellow-dark, #D4A017); }
@media (min-width: 1280px) {
  .breadcrumb--dark { margin-top: 8.25rem; padding-top: 2rem; }
}

@media (min-width: 768px) {
  .breadcrumb { top: 2rem; padding: 0 2.5rem; font-size: 0.875rem; }
}
@media (min-width: 1024px) {
  .breadcrumb { top: 2.5rem; padding: 0 3rem; }
}
@media (min-width: 1280px) {
  .breadcrumb { padding-left: 4rem; padding-right: 4rem; }
}
@media (min-width: 1600px) {
  .breadcrumb { padding-left: 11.3125rem; padding-right: 11.75rem; }
}
/* breadcrumb--dark(reviews / service-areas hub)：對齊下方內容欄(container-max 置中)，
   取代基礎 breadcrumb 的固定邊距，寬螢幕才不會與內容錯位 */
@media (min-width: 768px) {
  .breadcrumb--dark {
    padding-left:  max(2.5rem, calc((100vw - var(--container-max)) / 2));
    padding-right: max(2.5rem, calc((100vw - var(--container-max)) / 2));
  }
}

.hero-card {
  z-index: 2;
  /* 手機：滿版蓋掉 page-hero__inner 左右 + 底 padding，貼齊 hero 底邊 */
  margin: auto -1.5rem 0;
  margin-top: 5rem;
}
.hero-card__inner {
  padding: 2rem 1.5rem;
}
.hero-card--light { background: var(--color-white, #fff); color: var(--color-text-body, #333); }
.hero-card--navy  { background: var(--color-navy, #262A71); color: var(--color-white, #fff); }

/* Lead heading — 左側 6px 黃 bar，display font，封頂 60px */
.hero-card__lead {
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
  border-left: 0.375rem solid var(--color-yellow, #F0BC29);
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-navy, #262A71);
}
.hero-card--navy .hero-card__lead { color: var(--color-white, #fff); }

@media (min-width: 768px) {
  .hero-card { margin: auto -2.5rem 0; }
  .hero-card__inner { padding: 2.5rem 2.5rem; }
}
@media (min-width: 1024px) {
  .hero-card {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    margin: 0;
  }
  .hero-card__inner { padding: 2.5rem 3rem; }
}
@media (min-width: 1280px) {
  .hero-card__inner { padding: 2.5rem 4rem; }
}
@media (min-width: 1600px) {
  .hero-card__inner { padding: 5rem 4rem 0rem 4rem;}   /* 左對齊 site-header padding */
}

.final-cta {
  background: var(--color-yellow, #F0BC29);
  padding: 3rem 1.5rem;
  text-align: center;
}
.final-cta__inner {
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
}
.final-cta__title {
  margin: 0 0 0.75rem;
  text-align: center;
  color: var(--color-navy, #262A71);
}
.final-cta__sub {
  margin: 0 auto 1.75rem;
  color: var(--color-navy, #262A71);
  max-width: 38rem;
}
.final-cta__btn { margin: 0 auto; }

@media (min-width: 768px) {
  .final-cta { padding: 4.5rem 2.5rem; }
  .final-cta__sub { margin-bottom: 2.25rem; }
}
@media (min-width: 1024px) {
  .final-cta { padding: 5.5rem 3rem; }
}

.areas-mini {
  background: var(--color-bg-light, #F5F5F5);
  padding: 2.5rem 1.5rem;
}
.areas-mini__inner {
  width: 100%;
  max-width: var(--content-max, 85.3125rem);           /* 1366 固定，不跟 FHD 放大 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
/* 手機標題對齊 final-cta（= section-title 手機 32px，置中）*/
.areas-mini__title {
  margin: 0;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  align-self: start;                                   /* title 垂直靠上,與 pills 第一排對齊 */
  color: var(--color-navy, #262A71);
}
.areas-mini__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.areas-mini__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border-radius: 999px;
  background: var(--color-white, #fff);
  color: var(--color-navy, #262A71);
  font-family: var(--font-body, sans-serif);
  font-weight:400;
  font-size: 1.125rem;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.areas-mini__link:hover {
  background: var(--color-navy, #262A71);
  color: var(--color-yellow, #F0BC29);
}
.areas-mini__link:active { transform: translateY(1px); }

@media (min-width: 768px) {
  .areas-mini { padding: 3rem 2.5rem; }
  .areas-mini__inner { gap: 2rem; }
  .areas-mini__link  { padding: 0.75rem 1.5rem; font-size: 1.4375rem; }
}
@media (min-width: 1024px) {
  .areas-mini { padding: 3.5rem 3rem; }
  .areas-mini__inner {
    grid-template-columns: minmax(0, auto) 1fr;
    gap: 3rem;
  }
  .areas-mini__title { font-size: clamp(1.75rem, 2.5vw, 2.25rem); text-align: left; }
}
@media (min-width: 1280px) {
  .areas-mini { padding: 5.5rem 4rem; }
  .areas-mini__inner { gap: 4rem; }
}

.eyebrow-tag {
  align-self: flex-start;
  padding: 0.3125rem 0.625rem;
  background: #eee;
  font-family: var(--font-body, sans-serif);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.11375rem;
  color: var(--color-navy, #262A71);
  text-transform: uppercase;
}
@media (max-width: 767.98px) {
  .eyebrow-tag { align-self: center; margin-bottom: -0.5rem; }
}

.service-areas {
  position: relative;
  width: 100%;
  padding: 3rem 1.5rem;
  background: var(--color-white, #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.service-areas__map {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: #eaeaea;                                /* fallback 灰底 */
}
.service-areas__map-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-areas__map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, .25));
}

.service-areas__content {
  width: 100%;
  max-width: 33.125rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.service-areas__title {
  margin: 0;
}

@media (max-width: 767.98px) {
  .service-areas__content { align-items: center; text-align: center; }
  .service-areas__title   { font-size: 2.5rem; }
  .service-areas__desc,
  .service-areas__list    { align-self: stretch; text-align: left; }
}

.service-areas__desc {
  color: var(--color-text-muted);
}

.service-areas__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 0.625rem;
  margin: 0.5rem 0;
  padding: 0;
  list-style: none;
}

.area-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  height: 3.125rem;
  padding: 0 0.1875rem;
  font-family: var(--font-cta, sans-serif);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-navy, #262A71);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}
.area-link:hover { color: var(--color-yellow-dark, #D4A017); }
.area-link::after {
  content: "";
  width: 1.5rem;
  height: 1.25rem;
  flex-shrink: 0;
  background-color: currentColor;        /* 由 mask 上色，跟隨文字色（hover 變黃）*/
  -webkit-mask: url('../img/icon/arrow-right.svg') no-repeat center / contain;
          mask: url('../img/icon/arrow-right.svg') no-repeat center / contain;
  transition: transform .2s ease;
}
.area-link:hover::after { transform: translateX(0.25rem); }

.service-areas__cta {
  margin-top: 0.5rem;
  align-self: stretch;
}

@media (min-width: 768px) {
  .service-areas { padding: 5rem 2.5rem; }
  .service-areas__map { max-width: 28rem; }
  .service-areas__cta { align-self: flex-start; }
}

@media (min-width: 1024px) {
  .service-areas {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    padding: 6.75rem 3rem;
  }
  .service-areas__map {
    flex: 0 0 auto;
    width: clamp(28rem, 38vw, 41.75rem);
    max-width: none;
  }
  .service-areas__map-pin { width: 5rem; }
  .service-areas__content {
    flex: 0 1 33.125rem;
    gap: 0.5rem;
  }
}

/* 2K+ — map 等比放大、整段內容靠 container 左邊對齊 */
@media (min-width: 1920px) {
  .service-areas {
    justify-content: flex-start;
    padding-left:  max(3rem, calc((100vw - var(--container-max)) / 2));
    padding-right: max(3rem, calc((100vw - var(--container-max)) / 2));
  }
  /* 地圖隨螢幕漸進放大：1920→720px，2560→880px（封頂 55rem）*/
  .service-areas__map     { width: clamp(45rem, calc(25vw + 15rem), 55rem); }
  .service-areas__map-pin { width: 6.5rem; }
}

.floating-cta {
  --ring: 240, 188, 41;                                 /* 預設 ring 色 = 黃 (RGB) */
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-yellow, #F0BC29);
  color: var(--color-navy, #262A71);
  box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, .18);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
  animation: floating-cta-pulse 1.8s ease-out infinite;
}
.floating-cta:hover  { background: var(--color-yellow-dark, #D4A017); transform: scale(1.05); }
.floating-cta:active { transform: scale(0.95); }
.floating-cta img    {
  width: 50%;
  aspect-ratio: 1;
  transform-origin: center;
  animation: phone-ringing 3s ease-in-out infinite;
}
.floating-cta:hover img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .floating-cta img { animation: none; }
}

@keyframes floating-cta-pulse {
  0%   { box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, .18), 0 0 0 0      rgba(var(--ring), .35); }
  100% { box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, .18), 0 0 0 1.25rem rgba(var(--ring), 0);   }
}
@media (prefers-reduced-motion: reduce) {
  .floating-cta { animation: none; }
}

.floating-cta--on-yellow {
  --ring: 38, 42, 113;
  background: var(--color-navy, #262A71);
}
.floating-cta--on-yellow:hover { background: var(--color-navy-dark, #1B1F55); }
.floating-cta--on-yellow img   { filter: brightness(0) invert(1); }

.floating-cta--on-dark {
  --ring: 255, 255, 255;
  background: var(--color-white, #fff);
}
.floating-cta--on-dark:hover { background: #eee; }

/* on-light：保留預設黃底 navy icon（白/淺底已夠對比） */

@media (min-width: 1024px) {
  .floating-cta { display: none; }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .9);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox__stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
  box-sizing: border-box;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .5);
  animation: lightbox-zoom-in .25s ease-out;
}
@keyframes lightbox-zoom-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--font-body, sans-serif);
  line-height: 1;
  transition: background-color .2s ease, transform .15s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .25); }
.lightbox__close:active,
.lightbox__nav:active { transform: scale(0.95); }

.lightbox__close {
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  aspect-ratio: 1;
  font-size: 1.75rem;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  aspect-ratio: 1;
  font-size: 2.5rem;
  font-weight: 300;
}
.lightbox__nav:active { transform: translateY(-50%) scale(0.95); }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }

@media (min-width: 768px) {
  .lightbox__close { top: 1.5rem; right: 1.5rem; width: 3rem; font-size: 2rem; }
  .lightbox__nav   { width: 3.5rem; }
  .lightbox__nav--prev { left: 1.5rem; }
  .lightbox__nav--next { right: 1.5rem; }
}

.slider__track {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.slider__track.is-dragging > * { pointer-events: none; }
.slider__track img { -webkit-user-drag: none; user-select: none; }

.slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.slider__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: rgba(38, 42, 113, .25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color .2s ease, transform .2s ease;
}
.slider__dot.is-active {
  background: var(--color-navy, #262A71);
  transform: scale(1.2);
}

.trust-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.trust-bar__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}
/* Icon slot：高度固定，寬度依內容自動 */
.trust-bar__icon {
  display: inline-flex;
  align-items: center;
  height: 5.75rem;
  color: var(--color-yellow, #F0BC29);
}
.trust-bar__icon > img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.trust-bar__icon--stars { gap: 0.125rem; }
.trust-bar__icon--stars > img {
  height: auto;
  width: 1.125rem;
  aspect-ratio: 1;
}

.trust-bar__title,
.trust-bar__text {
  margin: 0;
  font-family: var(--font-body, sans-serif);
  font-weight: 600;
  font-size: 0.825rem;
  line-height: 1.2;
}
.trust-bar__title { color: var(--color-white, #fff); }
.trust-bar__text  { color: var(--color-yellow, #F0BC29); }

.trust-bar--light .trust-bar__title,
.trust-bar--light .trust-bar__text { color: var(--color-navy, #262A71); }

@media (max-width: 767.98px) {
  .trust-bar__item { gap: 0.1rem; }
  .trust-bar__icon { height: 2.8rem; }
}

@media (min-width: 768px) {
  .trust-bar { gap: 1.75rem; }
  .trust-bar__icon--stars > img { width: 1.4rem; }
  .trust-bar__title,
  .trust-bar__text { font-size: 1.125rem; font-weight: 600; }
}

@media (min-width: 1024px) {
  .trust-bar { grid-template-columns: repeat(3, max-content); }
  .trust-bar__icon--stars > img { width: 1.75rem; }
  .trust-bar__title,
  .trust-bar__text { font-size: 1.125rem; }
}

.faq {
  position: relative;
  width: 100%;
  padding: 3rem 1.5rem;
  background: var(--color-white, #fff);
}
.faq__inner {
  width: 100%;
  max-width: 56.1875rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.faq__title {
  margin: 0 0 0.5rem;
  text-align: center;
}
@media (max-width: 767.98px) {
  .faq__title { font-size: 2.5rem; }
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-item {
  position: relative;
  border-left: 0.6875rem solid var(--color-yellow, #F0BC29);
  border-bottom: 1px solid #ddd;
  background: var(--color-white, #fff);
}
@media (max-width: 767.98px) {
  .faq-item { border-left-width: 0.4rem; }
}

.faq-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 4.5625rem;
  padding: 1rem 1rem 1rem 1.5rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.faq-item__question {
  flex: 1;
  color: var(--color-text-body);
}

.faq-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.625rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-yellow, #F0BC29);
  color: var(--color-navy, #262A71);
  transition: background-color .25s ease, color .25s ease;
}
.faq-item__icon svg {
  width: 1.125rem;
  aspect-ratio: 1;
}
.faq-item__icon-h,
.faq-item__icon-v {
  transition: transform .3s ease;
  transform-origin: center;
}

.faq-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-item__answer {
  padding: 0 1.5rem 1.5rem;
  color: var(--color-text-muted);
}

.faq-item.is-open .faq-item__icon {
  background: var(--color-navy, #262A71);
  color: var(--color-yellow, #F0BC29);
}
.faq-item.is-open .faq-item__icon-v { transform: scaleY(0); }
.faq-item.is-open .faq-item__body   { max-height: 20rem; }

@media (min-width: 768px) {
  .faq { padding: 5rem 2.5rem; }
  .faq__inner { gap: 2rem; }
  .faq-item__header { padding: 1rem 1rem 1rem 2rem; }
  .faq-item__answer { padding: 0 2rem 1.5rem; }
}

@media (min-width: 1024px) {
  .faq { padding: 4rem 3rem 6rem; }
  .faq__inner { gap: 3rem; }
}

@media (min-width: 1280px) {
  .faq__inner {
    max-width: var(--content-max, 85.3125rem);          /* 1366 固定：Q&A 文字不隨大螢幕過寬 */
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    column-gap: 4rem;
    align-items: start;
  }
  .faq__title {
    text-align: left;
    margin: 0;
    grid-column: 1;
    position: sticky;
    top: 8rem;                                          /* 跟著捲動時不會離開視線 */
  }
  .faq__list { grid-column: 2; }
}

.gallery {
  position: relative;
  width: 100%;
  padding: 3rem 1.5rem;
  background: var(--color-white, #fff);
  color: var(--color-navy, #262A71);
  overflow: hidden;
}
.gallery__inner {
  width: 100%;
  max-width: var(--container-max, 85.3125rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.gallery__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.gallery__title { margin: 0; }
.gallery__desc { color: var(--color-text-muted); }

@media (max-width: 767.98px) {
  .gallery__content { align-items: center; text-align: center; }
  .gallery__title   { font-size: 2.5rem; }
  .gallery__desc    { align-self: stretch; text-align: left; }
}

.gallery__cta {
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  padding: 0.75rem 2rem;
  border: 1px solid var(--color-navy, #262A71);
  border-radius: 6.25rem;
  background: transparent;
  color: var(--color-navy, #262A71);
  font-family: var(--font-body, sans-serif);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: 0.05625rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.gallery__cta:hover {
  background: var(--color-navy, #262A71);
  color: var(--color-white, #fff);
}
.gallery__cta--mobile  { display: inline-flex; align-self: center; }
.gallery__cta--desktop { display: none; }

.gallery__slider {
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.gallery__grid {
  display: flex;
  gap: 0.625rem;
  margin: 0;
  padding: 0.25rem 0 0.25rem 2rem;
  scroll-padding-left: 2rem;                          /* snap point 跟著 padding 走 */
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gallery__grid::-webkit-scrollbar { display: none; }
.gallery__item {
  flex: 0 0 auto;
  height: 14rem;
  border-radius: 1.25rem;
  overflow: hidden;
  scroll-snap-align: start;
}
/* 每張依 Figma 桌面版比例 */
.gallery__item--lg { aspect-ratio: 398 / 272; }
.gallery__item--md { aspect-ratio: 293 / 272; }
.gallery__item--sm { aspect-ratio: 188 / 272; }

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.gallery__item:hover img { transform: scale(1.08); }

@media (min-width: 768px) {
  .gallery { padding: 5rem 2.5rem; }
}

@media (min-width: 1024px) {
  .gallery { padding: 4rem 3rem; }

  .gallery__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 4rem;
  }
  .gallery__slider  { flex: 0 1 56.25rem; order: 1; }
  .gallery__content { flex: 0 1 22rem;   order: 2; }

  .gallery__cta--mobile  { display: none; }
  .gallery__cta--desktop { display: inline-flex; align-self: flex-start; }

  .gallery__slider {
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  /* 2 rows × 3 cols flex-wrap，左對齊
     Row 1: lg(398) + sm(188) + md(293) + 2×gap(10) = 899 ≈ 900 容器
     Row 2: md(293) + sm(188) + lg(398) + 2×gap(10) = 899 ≈ 900 容器 */
  .gallery__grid {
    position: static;
    display: flex;
    flex-wrap: wrap;
    width: 56.25rem;
    height: auto;
    gap: 0.625rem;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .gallery__item {
    position: static;
    flex: 0 0 auto;
    height: 17rem;
    aspect-ratio: auto;
    scroll-snap-align: none;
    top: auto;
    left: auto;
  }
  .gallery__item--lg { width: 24.875rem; }
  .gallery__item--md { width: 18.3125rem; }
  .gallery__item--sm { width: 11.75rem;  }

  .gallery__content {
    flex: 0 1 22rem;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* Wide breakpoint — keep proportions */
@media (min-width: 1280px) {
  .gallery__inner { gap: 6rem; }
}

/* 2K+（≥1920）：container 長到 1800，gallery 改「彈性填滿」。
   slider 吃掉文字欄以外的所有空間，圖片改用 % 寬 + 原始 aspect-ratio →
   不論欄寬多少都填滿，且兩列等高（同比例放大）。取代舊的固定 1364px 寫法。 */
@media (min-width: 1920px) {
  .gallery__slider  { flex: 1 1 auto; }
  .gallery__content { flex: 0 0 22rem; }                /* 文字欄固定，不擠壓 */
  .gallery__grid    { width: 100%; }
  .gallery__item    { height: auto; }
  /* 每列 3 張：扣掉 2 個 0.625rem gap 後，依 Figma 比例 398:293:188（/879）分配 */
  .gallery__item--lg { width: calc((100% - 1.25rem) * 0.452); aspect-ratio: 398 / 272; }
  .gallery__item--md { width: calc((100% - 1.25rem) * 0.333); aspect-ratio: 293 / 272; }
  .gallery__item--sm { width: calc((100% - 1.25rem) * 0.213); aspect-ratio: 188 / 272; }
}

@media (min-width: 1024px) {
  .gallery--flip .gallery__slider  { order: 2; }
  .gallery--flip .gallery__content { order: 1; }
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  color: var(--color-navy, #262A71);
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.service-card:hover { transform: translateY(-0.25rem); }

.service-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 1.5625rem;
  overflow: hidden;
}
.service-card__bg {
  position: absolute;
  inset: 0;
  background-color: #2a2a2a;
  background-size: cover;
  background-position: center;
}
.service-card__bg[data-bg="drain"]   { background-image: url('../img/service/drain-cleaning-repairs/cover.jpg'); }
.service-card__bg[data-bg="fixture"] { background-image: url('../img/service/water-fixture-repair-installation/cover.jpg'); }
.service-card__bg[data-bg="gas"]     { background-image: url('../img/service/gas-line-services/cover.jpg'); }
.service-card__bg[data-bg="repipe"]  { background-image: url('../img/service/water-pipe-repair-replacement/cover.jpg'); }
.service-card__bg[data-bg="radiant"] { background-image: url('../img/service/hydronic-radiant-heating/cover.jpg'); }
.service-card__bg[data-bg="heater"]  { background-image: url('../img/service/water-heater-services/cover.jpg'); }

.service-card__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.25rem;
}
.service-card__title {
  margin: 0;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.15;
  color: var(--color-navy, #262A71);
  letter-spacing: -0.01em;
}
.service-card__desc,
.service-card__more {
  display: none;
}
.service-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-navy, #262A71);
  color: var(--color-white, #fff);
  transition: background-color .2s ease, transform .2s ease;
}
.service-card__arrow::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  background-color: currentColor;        /* 白色，由 mask 上色 */
  -webkit-mask: url('../img/icon/arrow-right-round.svg') no-repeat center / contain;
          mask: url('../img/icon/arrow-right-round.svg') no-repeat center / contain;
}
.service-card:hover .service-card__arrow {
  background: var(--color-navy-dark, #1B1F55);
  transform: translateX(0.125rem);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: var(--content-max, 85.3125rem);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .service-card { gap: 0; }
  .service-card__media { aspect-ratio: 3 / 2; }

  .service-card__caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.5rem;
    background: linear-gradient(180deg,
                rgba(0, 0, 0, 0)   40%,
                rgba(0, 0, 0, .80) 100%);
    border-radius: 1.5625rem;                         /* match media radius (25px) */
    overflow: hidden;
  }
  /* Hover 加深層 — 用 ::after 疊一層 opacity 漸變（避開 gradient 無法平滑插值） */
  .service-card__caption::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.85) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s cubic-bezier(.22,1,.36,1);
  }
  .service-card:hover .service-card__caption::after { opacity: 1; }
  .service-card__title,
  .service-card__desc,
  .service-card__more { position: relative; z-index: 1; }
  .service-card__title {
    font-family: var(--font-cta, sans-serif);
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--color-white, #fff);
  }
  .service-card__desc {
    display: block;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .9);
    transition: max-height .6s cubic-bezier(.22,1,.36,1) .1s,
                opacity    .5s cubic-bezier(.22,1,.36,1) .1s;
  }
  .service-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body, sans-serif);
    font-weight: 400;
    font-size: 1.125rem;
    letter-spacing: 0.05625rem;
    color: var(--color-yellow, #F0BC29);
    transition: gap .35s cubic-bezier(.22,1,.36,1) .05s;
  }
  .service-card__arrow { display: none; }

  .service-card:hover .service-card__desc {
    max-height: 8rem;
    opacity: 1;
  }
  .service-card:hover .service-card__more { gap: 0.75rem; }

}

@media (min-width: 1024px) {
  .service-grid { gap: 1.5rem; }
  .service-card__caption { padding: 1.875rem; }
  .service-card__title { font-size: 1.6875rem; }
}

.testimonials {
  position: relative;
  width: 100%;
  padding: 3rem 1.5rem 2rem;
  background: var(--color-bg-light, #F5F5F5);
  color: var(--color-navy, #262A71);
  overflow: hidden;
}
.testimonials::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35.9375rem;
  background: linear-gradient(0deg,
              #FFFFFF 4.58%,
              rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.testimonials__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max, 85.3125rem);
  margin: 0 auto;
}

.testimonials__title {
  margin: 0 0 2rem;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: clamp(2.5rem, 12vw, 9rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-navy, #262A71);
}
/* 2K+（≥1920）：container 變 1800，標題隨之放大維持比例（1552→1800 欄皆可容納）*/
@media (min-width: 1920px) {
  .testimonials__title { font-size: clamp(10rem, 9vw, 12.5rem); }
}
.testimonials__title-br { display: none; }
@media (max-width: 767.98px) {
  .testimonials__title-br { display: inline; }
  .testimonials__title {
    font-size: clamp(3rem, 15vw, 4rem);
    text-align: left;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
}

.testimonials__intro {
  max-width: 41.625rem;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.testimonials__rating {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
}
.testimonials__rating-star {
  width: 1.875rem;
  aspect-ratio: 1;
  flex-shrink: 0;
}
.testimonials__rating-text {
  font-family: var(--font-body, sans-serif);
  font-weight: 700;
  font-size: 1.4375rem;
  line-height: 1.3;
  color: var(--color-navy, #262A71);
}
.testimonials__desc {
  color: var(--color-text-body);
  padding-left: 2.5rem;                               /* 對齊「5/5...」(star 30px + gap 10px) */
}

.testimonials__slider {
  position: relative;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 2.5rem;
  padding: 0;
  overflow: hidden;
}
/* Desktop：slider 左對齊 container、右側延伸到 viewport 邊（Figma 設計）
   重點：slider 的 overflow:hidden 從 container 左緣裁切，
   所以前一張卡不會從左邊探出 → 點 dot 2/3 看到的就是「4-6」「7-9」乾淨頁面 */
@media (min-width: 1024px) {
  .testimonials__slider {
    width: auto;
    position: static;
    margin-left: 0;
    margin-right: calc(50% - 50vw);
    padding: 0;
    overflow: hidden;                                 /* 裁掉左邊溢出，cards 從 container 左起 */
  }
  .testimonials__slider .slider__track {
    padding-left: 0;
    padding-right: 0;
    scroll-padding-left: 0;
  }
  .testimonials .slider__dots {
    margin-left: 0;
    margin-right: 0;
    justify-content: center;
  }
}
.testimonials__slider .slider__track {
  padding: 1.5rem 0 1rem 2rem;                        /* 上 24 / 右 0 / 下 48 / 左 32（讓裝飾引號不被裁切） */
}
@media (max-width: 767.98px) {
  .testimonials__slider .slider__track { padding-left: 2rem; scroll-padding-left: 2rem; }
}

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 0 0 85%;
  max-width: 27.1875rem;
  min-height: 17.4375rem;
  padding: 1.875rem 2.125rem 2.125rem;
  background: var(--color-white, #fff);
  border-radius: 1.25rem;
  scroll-snap-align: start;                           /* 第一張靠 container 左緣對齊 */
}

.testimonial-card__stars {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 0.125rem;
  align-self: center;
}
.testimonial-card__star {
  width: 1.875rem;
  height: auto;
}
.testimonial-card__text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-body, sans-serif);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: 0.05625rem;
  color: var(--color-text-body);
}
@media (max-width: 767.98px) {
  .testimonial-card__text { font-size: 0.9375rem; }
}
.testimonial-card__author {
  position: relative;
  z-index: 1;
  margin: auto 0 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body, sans-serif);
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--color-text-body);
}
.testimonial-card__author-line {
  display: inline-block;
  width: 1.875rem;
  height: 1px;
  background: var(--color-text-body);
  flex-shrink: 0;
}

.testimonial-card__quote-mark {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.testimonial-card__quote-mark--open  {
  width: 42.49px;
  height: 29.2px;
  left: 22.11px;
  top:  58.07px;
}
.testimonial-card__quote-mark--close {
  width: 42.34px;
  height: 29.2px;
  right: 23.55px;
  top:   216.8px;
}

.testimonials__badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
  justify-items: center;
}
@media (max-width: 767.98px) {
  .testimonials__badges { gap: 0.5rem 0.25rem; }
  .testimonials__badge  { max-width: 100%; }
}
.testimonials__badges li {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonials__badge-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  color: inherit;
  transition: transform .2s ease, opacity .2s ease;
}
.testimonials__badge-link:hover {
  transform: translateY(-0.125rem);
  opacity: .85;
}
.testimonials__badge-link:active { transform: translateY(0); }

.testimonials__badge {
  width: 100%;
  max-width: 20rem;
  height: auto;
}

@media (min-width: 768px) {
  .testimonials { padding: 5rem 2.5rem; }
  .testimonial-card { flex: 0 0 27.1875rem; }
  .testimonials__badges {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.625rem;
  }
}

@media (min-width: 1024px) {
  .testimonials { padding: 3rem; }
  .testimonials__title { margin-bottom: 3rem; }
  .testimonials__intro { margin-bottom: 2.5rem; }
  .testimonials__slider { margin-left: 0; margin-right: 0; padding: 0; }
}

.page-reviews { background: var(--color-bg-light, #F5F5F5); }

/* ============================================================
   Testimonials — Grid variant（reviews 專頁：多欄全展，不滑動）
   手機 1 欄 / 平板 2 欄 / 寬螢幕 4 欄（8 則 = 4×2）
   ============================================================ */
.testimonials--grid .testimonials__slider {
  width: auto;
  position: static;
  margin: 0 0 2.5rem;
  padding: 0;
  overflow: visible;
}
.testimonials--grid .slider__track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 0.5rem 0;                              /* 給裝飾引號上下喘息，左右不溢出 */
  overflow: visible;
  cursor: default;        /* 網格版非拖曳，取消 slider 的 grab 手勢 */
  user-select: text;
}
.testimonials--grid .testimonial-card {
  flex: initial;
  width: auto;
  max-width: none;
}
@media (min-width: 768px) {
  .testimonials--grid .slider__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .testimonials--grid .slider__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 4.625rem;
  background: var(--color-white, #fff);
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, .12);
  transition: background-color .25s ease, box-shadow .25s ease, height .25s ease;
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 0.6875rem;
}

/* hamburger (mobile only) — 固定右側 */
.site-header__menu-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  color: var(--color-navy, #262A71);
  cursor: pointer;
}
.site-header__menu-btn svg { width: 1.75rem; height: 1.5rem; }

.site-header__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}
.site-header__logo-img {
  height: 2.5625rem;
  width: auto;
}
.site-header__logo-img--default  { display: none; }
.site-header__logo-img--scrolled { display: block; height: 2.8rem; width: auto; }
.site-header__lic {
  display: none;
  margin: 0;
  font-family: var(--font-body, sans-serif);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--color-white, #fff);
  text-align: center;
}

.site-header__right {
  display: none;
  align-items: center;
  gap: 1.5rem;
}

.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
}
.site-header__phone {
  display: none;
  font-size: 1.25rem;
}

.site-nav { display: none; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  position: relative;
  padding-bottom: 0.375rem;
  font-family: var(--font-body, sans-serif);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-white, #fff);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 0.3125rem solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.site-nav__link:hover { color: var(--color-yellow, #F0BC29); }
.site-nav__link.is-active {
  border-bottom-color: var(--color-yellow, #F0BC29);
  font-weight: 700;
}
.site-nav__caret {
  width: 0.75rem;
  height: 0.375rem;
  fill: currentColor;
  transition: transform .2s ease;
}
.site-nav__item--has-dropdown:hover .site-nav__caret,
.site-nav__item--has-dropdown:focus-within .site-nav__caret {
  transform: rotate(180deg);
}

.site-nav__item { position: relative; }
.site-nav__item--has-dropdown {  }

.site-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0.5rem);
  min-width: 22rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-white, #fff);
  border-radius: var(--radius-card, 0.75rem);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 110;
}
.site-nav__item--has-dropdown:hover .site-dropdown,
.site-nav__item--has-dropdown:focus-within .site-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
/* Invisible bridge so cursor moving from link to panel doesn't break hover */
.site-dropdown::before {
  content: "";
  position: absolute;
  top: -0.875rem;
  left: 0;
  right: 0;
  height: 0.875rem;
}

.site-dropdown__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-dropdown__list--two-col {
  grid-template-columns: 1fr 1fr;
}

.site-dropdown__link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 0.625rem 0.25rem;
  font-family: var(--font-body, sans-serif);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--color-navy, #262A71);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease;
}
.site-dropdown__link:hover {
  color: var(--color-yellow-dark, #D4A017);
}
.site-dropdown__arrow {
  display: inline-flex;
  font-family: var(--font-body, sans-serif);
  font-weight: 500;
  color: var(--color-yellow-dark, #D4A017);
  transition: transform .2s ease;
}
.site-dropdown__link:hover .site-dropdown__arrow {
  transform: translateX(0.25rem);
}

.btn-call {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.4375rem 1.25rem 0.4375rem 0.625rem;
  background: var(--color-yellow, #F0BC29);
  color: var(--color-navy, #262A71);
  border-radius: var(--radius-btn, 0.625rem);
  font-family: var(--font-cta, sans-serif);
  font-weight: 800;
  font-size: 1.25rem;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}
.btn-call:hover { background: var(--color-yellow-dark, #D4A017); }
.btn-call:active { transform: translateY(1px); }

/* Phone icon ringing wiggle — 每 3s 抖一輪，提醒可撥打 */
.btn-call__icon { transform-origin: center; }
.btn-call__icon { animation: phone-ringing 3s ease-in-out infinite; }
.btn-call:hover .btn-call__icon { animation-play-state: paused; }
@keyframes phone-ringing {
  0%, 60%, 100% { transform: rotate(0); }
  5%, 15%, 25%  { transform: rotate(-8deg); }
  10%, 20%      { transform: rotate(8deg); }
  30%           { transform: rotate(-4deg); }
  35%           { transform: rotate(4deg); }
  40%           { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-call__icon { animation: none; }
}
.btn-call__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.btn-call__icon img {
  width: 100%;
  height: 100%;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 5rem 2rem 2rem;
  background: var(--color-navy, #262A71);
  transform: translateY(-100%);
  transition: transform .3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.is-open { transform: translateY(0); }

.mobile-menu__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-white, #fff);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.mobile-menu__link {
  display: block;
  padding: 0.875rem 0;
  font-family: var(--font-body, sans-serif);
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--color-white, #fff);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mobile-menu__group {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.mobile-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 0;
  background: none;
  border: none;
  font-family: var(--font-body, sans-serif);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--color-white, #fff);
  cursor: pointer;
  text-align: left;
}
.mobile-menu__caret {
  width: 0.875rem;
  height: 0.4375rem;
  fill: var(--color-yellow, #F0BC29);
  transition: transform .25s ease;
  flex-shrink: 0;
}
.mobile-menu__toggle[aria-expanded="true"] .mobile-menu__caret {
  transform: rotate(180deg);
}

.mobile-menu__sublist {
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 0 0 1rem;
  list-style: none;
  transition: max-height .3s ease, padding .3s ease;
}
.mobile-menu__group.is-open .mobile-menu__sublist {
  max-height: 31.25rem;
  padding-bottom: 0.5rem;
}
.mobile-menu__sublink {
  display: block;
  padding: 0.625rem 0;
  font-family: var(--font-body, sans-serif);
  font-weight: 500;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  cursor: pointer;
}
.mobile-menu__sublink:hover { color: var(--color-yellow, #F0BC29); }

@media (min-width: 1280px) {
  .site-header {
    height: 12.3125rem;
    background: transparent;
  }
  .site-header.is-scrolled {
    height: 6.25rem;
    background: var(--color-white, #fff);
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, .12);
  }
  .site-header.is-scrolled .site-nav__link  { color: var(--color-text-body); font-weight: 500; }
  .site-header.is-scrolled .site-nav__link.is-active { color: var(--color-navy, #262A71); font-weight: 700; border-bottom-color: transparent; }
  .site-header.is-scrolled .site-nav__caret { fill: var(--color-text-body); }
  .site-header.is-scrolled .site-nav__link:hover { color: var(--color-yellow-dark, #D4A017); }
  .site-header.is-scrolled .site-header__phone { color: var(--color-navy, #262A71); }
  .site-header.is-scrolled .site-header__phone:hover { color: var(--color-yellow-dark, #D4A017); }
  .site-header__inner {
    max-width: 100%;
    padding: 0 2rem;                      /* 首頁原本設定；內頁由 body[data-base] 覆寫對齊內容欄 */
    align-items: center;
    justify-content: space-between;
  }
  .site-header__menu-btn { display: none; }
  .site-header__right    { display: flex; }

  /* Logo 對齊頂部（Figma 設計） */
  .site-header__logo {
    align-self: flex-start;
  }
  .site-header.is-scrolled .site-header__logo {
    align-self: center;
  }
  .site-header__logo-img {
    width: 9.5rem;
    height: auto;
    object-fit: contain;
  }

  .site-header__logo-img--default  { display: block; }
  .site-header__logo-img--scrolled { display: none; }
  .site-header.is-scrolled .site-header__logo-img--default  { display: none; }
  .site-header.is-scrolled .site-header__logo-img--scrolled {
    display: block;
    width: 16rem;
  }
  .site-header__lic {
    display: block;
    margin-top: 0.25rem;
  }
  .site-header.is-scrolled .site-header__lic { display: none; }

  .site-nav { display: block; margin-top: 0.6875rem; }  /* 11px — 底部與 Call button 對齊 */
  .btn-call { padding: 0.625rem 1.5625rem 0.625rem 0.9375rem; }
  .site-header__phone { display: inline; }
}

/* 內頁(body[data-base])header：對齊內容 1366 欄、修正各斷點斷行。
   首頁 <body> 無 data-base → 不受影響，維持原本設定 */
@media (min-width: 1280px) {
  body[data-base] .site-header__inner {
    padding: 0 max(2rem, calc((100vw - var(--content-max)) / 2));
  }
}
/* 內頁窄桌機 1280–1439：收 nav 間距 + 縮 scrolled logo，避免斷行（首頁維持原本 1rem / 16rem）*/
@media (min-width: 1280px) and (max-width: 1439.98px) {
  body[data-base] .site-nav__list { gap: 0.75rem; }
  body[data-base] .site-header.is-scrolled .site-header__logo-img--scrolled { width: 12.5rem; }
}

@media (min-width: 1440px) {
  .site-header__inner { padding: 0 4rem; }              /* 首頁原本設定 */
  .site-header__right { gap: 2rem; }
  .site-nav__list      { gap: 1.5rem; }
}

/* ≥1600px — 首頁維持 Figma 1728 比例的固定邊距；內頁已對齊內容欄（上方 body[data-base] 覆寫）*/
@media (min-width: 1600px) {
  .site-header__inner { padding: 0 11.75rem 0 11.3125rem; }
  .site-header__right { gap: 2.5rem; }
  .site-nav__list      { gap: 2rem; }
}

/* ≥1920：大解析度恢復較大字級/間距（首頁＋內頁共用）；內頁 header 放寬到 container-max 容納大字 */
@media (min-width: 1920px) {
  body[data-base] .site-header__inner {
    padding: 0 max(2rem, calc((100vw - var(--container-max)) / 2));
  }
  .site-nav__link     { font-size: 1.125rem; }
  .site-nav__list     { gap: 2.5rem; }
  .site-header__phone { font-size: 1.5rem; }
}

.site-footer {
  position: relative;
  width: 100%;
  padding: 2.5rem 1.5rem;
  background: var(--color-navy, #262A71);
  color: var(--color-white, #fff);
}

.site-footer__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--container-max, 85.3125rem);
  margin: 0 auto;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.site-footer__logo-link {
  display: inline-flex;
  cursor: pointer;
  text-decoration: none;
}
.site-footer__logo {
  width: 10rem;
  height: auto;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}
.site-footer__phone {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.site-footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  padding: 0.625rem 1.5625rem 0.625rem 0.9375rem;
  background: var(--color-yellow, #F0BC29);
  color: var(--color-navy, #262A71);
  border-radius: var(--radius-btn, 0.625rem);
  font-family: var(--font-cta, sans-serif);           /* Big Shoulders — match header .btn-call */
  font-weight: 800;
  font-size: 1.25rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, transform .15s ease;
}
.site-footer__cta:hover  { background: var(--color-yellow-dark, #D4A017); }
.site-footer__cta:active { transform: translateY(1px); }
.site-footer__cta-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.site-footer__cta-icon img {
  width: 100%;
  height: 100%;
}

.site-footer__lic {
  margin: 0;
  font-family: var(--font-body, sans-serif);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: 0.05625rem;
  color: var(--color-white, #fff);
}

.site-footer__nav { display: none; }
.site-footer__col {
  display: flex;
  flex-direction: column;
}

.site-footer__col-title {
  margin: 0 0 0.625rem;
  font-family: var(--font-body, sans-serif);
  font-weight: 700;
  font-size: 1.4375rem;
  line-height: 1.3;
  color: var(--color-white, #fff);
}

.site-footer__list {
  margin: 0;
  padding: 0 0 0 1.6875rem;
  list-style: disc;
}
.site-footer__list li {
  margin: 0;
  padding: 0.15625rem 0;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.5);
}
.site-footer__list li::marker {
  color: rgba(255, 255, 255, 0.5);
}
.site-footer__link {
  display: inline-flex;
  font-family: var(--font-body, sans-serif);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: 0.05625rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease;
}
.site-footer__link:hover { color: var(--color-yellow, #F0BC29); }

.site-footer__copyright {
  margin: 1.5rem auto 0;
  max-width: var(--container-max, 85.3125rem);
  text-align: center;
  font-family: var(--font-body, sans-serif);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.040625rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Mobile only — 必須放在所有 base 規則後面以正確覆寫 */
@media (max-width: 767.98px) {
  .site-footer       { padding-top: 1.5rem; }
  .site-footer__logo { width: 12rem; }
  .site-footer__lic  { font-size: 1rem; }
}

@media (min-width: 768px) {
  .site-footer { padding: 3rem 2.5rem; }
  .site-footer__logo { width: 11rem; }
  .site-footer__phone { font-size: 2.25rem; }
}

@media (min-width: 1024px) {

  .site-footer {
    padding: 2.5625rem 3rem 1.5rem;                   /* top 41px / sides 48px（跟 .faq 一致） */
  }

  /* Container = grid：brand 左、nav 右，互不重疊；max-width 跟 --container-max 同步 */
  .site-footer__container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 4rem;
    align-items: start;
    width: 100%;
    max-width: var(--container-max, 85.3125rem);
    margin: 0 auto;
    padding-bottom: 4rem;
    min-height: 19.625rem;
  }

  /* Brand 區塊（左欄）：用內部 grid 對齊
     - logo 左上
     - phone+CTA 右上（logo 右側）
     - CA LIC 下方靠左偏移 24px */
  .site-footer__brand {
    grid-column: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo contact"
      "lic  lic";
    column-gap: 1.5rem;
    row-gap: 1.25rem;
    align-items: start;
    justify-items: start;
    text-align: left;
  }
  .site-footer__logo-link { grid-area: logo; }
  .site-footer__logo {
    width: 12.375rem;
    height: auto;
  }
  .site-footer__contact {
    grid-area: contact;
    align-items: flex-start;
    gap: 0.75rem;
    padding-top: 4.5rem;                              /* phone 對齊 logo 中下 */
  }
  .site-footer__phone {
    font-size: 2.5rem;
    line-height: 1.1;
  }
  .site-footer__lic {
    grid-area: lic;
    padding-left: 1.5rem;
  }

  .site-footer__nav {
    grid-column: 2;
    display: flex;
    align-items: flex-start;
    gap: 4.375rem;
    margin-top: 2.8125rem;
    justify-self: end;
  }
  .site-footer__col:nth-child(1) { width: 16rem; }
  .site-footer__col:nth-child(2) { width: 11.0625rem; }
  .site-footer__col:nth-child(3) { width: 10rem;  }     /* 160px（Company，避免 Contact Us 折行）*/

  .site-footer__copyright {
    grid-column: 1 / -1;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    max-width: none;
    text-align: left;
  }
}