/* ---------- 0. 字體（自架子集，任何電腦都能正常顯示） ----------
   昭源宋體 Chiron Sung HK — 香港字形標準的現代宋體，OFL 免費商用
   ▸ 拆成 200 / 400 / 500 / 600 / 700 五個字重，瀏覽器只下載實際用到的字重
   ▸ 每份子集覆蓋全站 901 字（含數字、標點、常用符號），新增生僻字後需重跑子集
   ▸ 自架 = 不依賴訪客是否安裝此字體（等同「引用線上字體」，且不受外部 CDN 影響） */
@font-face {
  font-family: "Chiron Sung HK";
  src: url("../fonts/chiron-sung-200.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chiron Sung HK";
  src: url("../fonts/chiron-sung-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chiron Sung HK";
  src: url("../fonts/chiron-sung-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chiron Sung HK";
  src: url("../fonts/chiron-sung-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chiron Sung HK";
  src: url("../fonts/chiron-sung-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. 設計變數 ---------- */
:root {
  /* 品牌主色 */
  --red:        #DC1220;
  --red-dk:     #B60E1A;
  --red-deep:   #9E0A0C;
  --gold:       #D79944;
  --gold-lt:    #E3B268;
  --bronze:     #B28347;
  --bronze-dk:  #8A6330;

  /* 中性色 */
  --ink:        #22252A;
  --ink-2:      #33363C;
  --text:       #55585E;
  --text-2:     #8A8D93;
  --text-3:     #AFB2B6;
  --line:       #E7E2D9;
  --line-2:     #F0ECE4;

  /* 底色 */
  --cream:      #FBF7EF;
  --cream-2:    #F6EFE3;
  --graybar:    #A9AAAD;
  --dark:       #14171C;
  --white:      #FFFFFF;

  /* 字體 */
  --serif: "Chiron Sung HK", "Songti TC", "Source Han Serif TC", "PMingLiU", "SimSun", serif;
  --sans:  "PingFang HK", "Microsoft JhengHei", "Noto Sans TC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono:  "Courier New", Courier, "Nimbus Mono PS", monospace;

  /* 佈局 */
  --wrap: 1400px;
  --pad: 20px;

  /* 陰影 */
  --sh-1: 0 2px 14px rgba(48, 34, 14, .05);
  --sh-2: 0 10px 30px rgba(48, 34, 14, .09);
  --sh-3: 0 18px 46px rgba(48, 34, 14, .15);

  /* 動效 */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. 重置 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; line-height: 1.3; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: color .3s var(--ease); }
img { display: block; max-width: 100%; border: 0; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
figure { margin: 0; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--red); color: #fff; }

/* ---------- 3. 佈局 ---------- */
.wrap {
  width: 100%;
  /* --wrap 為「內容淨寬」，實際盒寬需加上左右 padding，確保 1920 下內容正好 1400 */
  max-width: calc(var(--wrap) + var(--pad) * 2);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.section { padding: 89px 0 100px; position: relative; }
.section--cream { background: var(--cream); }
.section--tight { padding: 94px 0 0; }

/* ---------- 4. 字體工具 ---------- */
.serif { font-family: var(--serif); }
.mono { font-family: var(--mono); }

/* ---------- 5. 區塊標題（英文小標 + 紅線 + 中文小標 / 主標題） ---------- */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 46px;
}

.sec-head__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: .16em;
  line-height: 1;
  color: var(--text-2);
}

.sec-head__eyebrow b {
  font-weight: 400;
  font-family: var(--sans);
  color: var(--red);
  letter-spacing: .18em;
}

.sec-head__eyebrow i {
  display: block;
  width: 38px;
  height: 3px;
  background: var(--red);
  font-style: normal;
}

.sec-head__title {
  margin-top: 22px;
  font-family: var(--serif);
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--ink-2);
  font-weight: 700;
}

.sec-head__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 13px;
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--red);
  position: relative;
  white-space: nowrap;
}

.sec-head__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 87px;
  height: 3px;
  background: currentColor;
  opacity: .9;
  transition: width .35s var(--ease);
}

.sec-head__link svg { width: 12px; height: 12px; transition: transform .3s var(--ease); }

.sec-head__link:hover::after { width: 100%; }
.sec-head__link:hover svg { transform: translateX(4px); }

/* ---------- 6. 按鈕 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 30px;
  font-size: 16px;
  letter-spacing: .1em;
  border: 1px solid transparent;
  transition: all .32s var(--ease);
  white-space: nowrap;
}

.btn--red {
  background: var(--red);
  color: #fff;
}

.btn--red:hover {
  background: var(--red-dk);
  box-shadow: 0 10px 24px -8px rgba(220, 18, 32, .55);
  transform: translateY(-2px);
}

.btn--ghost {
  border-color: #33363C;
  background: rgba(255, 255, 255, .5);
  color: #33363C;
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, .85);
  border-color: #33363C;
  transform: translateY(-2px);
}

.btn--outline {
  height: 43px;
  padding: 0 18px;
  font-size: 16px;
  border-color: var(--red);
  color: var(--red);
  background: #fff;
}

.btn--outline:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* 文字箭頭連結 */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--red);
  position: relative;
  padding-bottom: 13px;
}

.tlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 87px;
  height: 3px;
  background: currentColor;
  opacity: .9;
  transition: width .35s var(--ease);
}

.tlink svg { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.tlink:hover::after { width: 100%; }
.tlink:hover svg { transform: translateX(4px); }

/* ---------- 7. 頂部工具條 ---------- */
.topbar {
  height: 40px;
  background: var(--graybar);
  color: #fff;
  font-size: 14px;
  letter-spacing: .04em;
}

.topbar__in {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar__addr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: .95;
}

.topbar .ico {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  opacity: .9;
}

.topbar__links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar__links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  opacity: .95;
}
.topbar__links a:hover { opacity: 1; text-decoration: underline; }
.topbar__links .sep { width: 1px; height: 11px; background: rgba(255, 255, 255, .55); }
.topbar__links i { font-style: normal; }

/* ---------- 8. 主導航 ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  height: 86px;
  background: #fff;
  transition: box-shadow .3s var(--ease), height .3s var(--ease);
}

.header.is-stuck {
  box-shadow: 0 6px 24px -12px rgba(0, 0, 0, .22);
}

.header__in {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* 品牌 */
.brand {
  display: flex;
  align-items: center;
  gap: 27px;
  flex-shrink: 0;
}

.brand__logo { width: auto; height: 40px; }

.brand__txt {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.brand__txt b {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  line-height: 1.1;
  white-space: nowrap;
}

/* 英文行：無襯線體，字號按中文字行寬度反推，確保兩行左右嚴格等寬 */
.brand__txt i {
  font-family: var(--sans);
  font-style: normal;
  font-size: 13.34px;
  letter-spacing: 0;
  color: #666666;
  line-height: 1.2;
  white-space: nowrap;
}

/* 導航 */
.nav {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-left: auto;
}

.nav ul { display: flex; align-items: center; gap: 34px; }

.nav ul a {
  display: block;
  position: relative;
  padding: 6px 0;
  font-size: 16px;
  color: var(--ink-2);
  letter-spacing: .04em;
}

.nav ul a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 4px;
  background: var(--red);
  transform: translateX(-50%);
  transition: width .3s var(--ease);
}

.nav ul a:hover { color: var(--red); }
.nav ul a:hover::after,
.nav ul a.is-on::after { width: 34px; }
.nav ul a.is-on { color: var(--red); }

.nav__cta { height: 43px; padding: 0 16px; }

/* 漢堡（移動端） */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
}

.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: all .3s var(--ease);
}

.burger.is-on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-on span:nth-child(2) { opacity: 0; }
.burger.is-on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 移動端抽屜 */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(20, 23, 28, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s var(--ease), visibility .32s;
}

.drawer__panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(320px, 84vw);
  background: #fff;
  padding: 26px 24px;
  transform: translateX(100%);
  transition: transform .38s var(--ease);
  overflow-y: auto;
}

.drawer.is-on { opacity: 1; visibility: visible; }
.drawer.is-on .drawer__panel { transform: none; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.drawer__head b { font-family: var(--serif); font-size: 18px; color: var(--ink); }

.drawer__close { font-size: 26px; line-height: 1; color: var(--text-2); }

.drawer nav a {
  display: block;
  padding: 16px 0;
  font-size: 16px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}

.drawer nav a.is-on { color: var(--red); }

.drawer .btn { width: 100%; margin-top: 24px; }

/* ---------- 9. 頁腳（米白新版 · 三欄） ---------- */
.footer {
  background: #F7F2EC;
  color: #333;
  padding-top: 52px;
}

.footer__in {
  display: grid;
  /* 比例取自參考圖：內容寬 1400 下三欄起點 0 / 700 / 1029 → 50% / 23.5% / 26.5%
     用 fr 而非固定 px，窄視口才不會把第三欄擠爆導致地址/郵箱折行 */
  grid-template-columns: 50fr 23.5fr 26.5fr;
  column-gap: 0;
  padding-bottom: 34px;
}

/* 第一欄：品牌 + 熱線 */
/* 中文與英文行同寬對齊：外層 max-content 收緊，兩行才能左右嚴格對齊 */
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; }

.footer__brand h3 {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 700;
  color: var(--ink);
  /* .034em 讓中文行寬 361.6，與英文行（15.2px）361.3 幾乎完全等寬 */
  letter-spacing: .034em;
  line-height: 1.25;
  white-space: nowrap;
}

.footer__brand .en {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 15.2px;
  letter-spacing: 0;
  line-height: 1.3;
  color: #6E6E6E;
  white-space: nowrap;
}

.footer__tel { margin-top: 58px; }

.footer__tel .lb {
  font-size: 16px;
  color: #333;
  letter-spacing: .04em;
  line-height: 1.5;
}

.footer__tel .tel {
  margin: 7px 0 27px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--red);
}

.footer__tel .tel:last-child { margin-bottom: 0; }

/* 第二 / 三欄 */
.footer__col h4 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: .04em;
  line-height: 1.3;
  margin-bottom: 34px;
}

.footer__col li { margin-bottom: 18px; }

.footer__col a,
.footer__col p {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  letter-spacing: .01em;
  display: block;
}

.footer__col p { margin-bottom: 18px; }

.footer__col p a { display: inline; }
/* hover 走品牌深紅 --red-dk，仍屬同一紅色系，只是壓深一檔作回饋，
   避免與靜態色一致時看不出 hover 變化 */
.footer__col a:hover { color: var(--red-dk); }

/* margin-bottom 設 0：避免與下方二維碼的 margin-top 產生外邊距合併 */
.footer__follow { margin: 29px 0 0; }

.footer__qr {
  width: 132px;
  height: 132px;
  margin-top: 22px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.footer__qr svg { width: 108px; height: 108px; }

/* 真實微信公眾號二維碼（324px 原圖，顯示 108px = 3x，保證掃碼清晰） */
.footer__qr img {
  width: 108px;
  height: 108px;
  display: block;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

/* 底欄：上方一條全寬細線（定稿 y6343，#EAE6E3） */
.footer__bar { border-top: 1px solid #EAE6E3; }

.footer__bar-in {
  height: auto;
  padding: 12px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #90959B;
  letter-spacing: .02em;
}

/* ---------- 10. 動效 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }

/* 個性化選購的卡片：只淡入，不上滑。
   該區四張卡本身已用紅底／白底做出強對比，滑入時再位移 26px
   會讓整排卡在視窗底部來回浮動，反而干擾閱讀；
   保留 opacity 過渡，進場仍有輕微的呼吸感 */
.ccard.reveal { transform: none; }

.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }

/* 回到頂部 */
.to-top {
  position: fixed;
  right: 26px;
  bottom: 30px;
  z-index: 80;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--sh-2);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .32s var(--ease);
}

.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--red); border-color: var(--red); color: #fff; }
.to-top svg { width: 16px; height: 16px; }

/* ---------- 11. 響應式 ---------- */
@media (max-width: 1500px) {
  :root { --wrap: 1240px; }
  .sec-head__title { font-size: 44px; }
}

@media (max-width: 1240px) {
  :root { --wrap: 1080px; }
  .nav { gap: 24px; }
  .nav ul { gap: 24px; }
  .brand__txt b { font-size: 19px; }
  .brand__txt i { font-size: 11.52px; }
  .sec-head__title { font-size: 40px; }
  .footer__in { grid-template-columns: 1.5fr .8fr .9fr; }
}

@media (max-width: 1024px) {
  .header { height: 74px; }
  .brand__logo { height: 34px; }
  .brand__txt b { font-size: 17px; }
  .brand__txt i { font-size: 10.31px; }
  .nav { display: none; }
  .burger { display: flex; }
  .section { padding: 64px 0 72px; }
  .sec-head__title { font-size: 34px; }
  .footer__in { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__tel { margin-top: 30px; }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  .topbar { height: 36px; }
  .topbar__in { gap: 8px; }
  /* 改為 block 佈局，text-overflow 才會對文本節點生效（inline-flex 下無效） */
  .topbar__addr {
    display: block;
    font-size: 14px;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
  }
  .topbar__addr .ico {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 4px;
  }
  .topbar__links { font-size: 14px; gap: 6px; flex: 0 0 auto; }
  .topbar__links .sep { display: none; }
  .topbar .ico { width: 13px; height: 13px; flex: 0 0 13px; }
  .header { height: 64px; }
  .brand { gap: 14px; }
  .brand__logo { height: 26px; }
  .brand__txt { gap: 2px; }
  .brand__txt b { font-size: 14px; letter-spacing: 0; }
  .brand__txt i { display: none; }
  .section { padding: 46px 0 54px; }
  .sec-head { margin-bottom: 28px; flex-wrap: wrap; }
  .sec-head__title { font-size: 27px; margin-top: 14px; }
  .sec-head__eyebrow { font-size: 14px; }
  .sec-head__eyebrow i { width: 24px; height: 2px; }
  .sec-head__link { padding-bottom: 8px; font-size: 14px; }
  .sec-head__link::after { width: 60px; height: 2px; }
  .btn { height: 46px; padding: 0 20px; font-size: 14px; }
  .footer { padding-top: 36px; }
  .footer__in { padding-bottom: 26px; gap: 26px 18px; grid-template-columns: 1fr; }
  .footer__brand h3 { font-size: 19px; }
  .footer__tel { margin-top: 22px; }
  .footer__tel .tel { font-size: 18px; margin-bottom: 18px; }
  .footer__col h4 { font-size: 17px; margin-bottom: 14px; }
  .footer__col a, .footer__col p { font-size: 14px; }
  .footer__bar-in { font-size: 14px; padding-bottom: 18px; }
  .footer__bar-in { height: auto; padding: 16px 0; flex-direction: column; gap: 6px; font-size: 14px; }
  .to-top { right: 14px; bottom: 18px; width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}