/* =============================================== */
/*  SECTIONS.CSS                                   */
/*  10 個區段的專屬視覺實作                          */
/*  桌機優先 — 手機版規則統一放 responsive.css       */
/* =============================================== */


/* =============================================== */
/*  1. HERO (X-C 沉浸式 + X-B 按鈕)                 */
/* =============================================== */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;            /* 舊瀏覽器備援 */
  height: 100dvh;           /* 現代瀏覽器：自動扣掉瀏覽器 UI 條 */
  min-height: 600px;
  max-height: 900px;
  overflow: hidden;
  background-color: var(--navy-d);
}

/* 背景圖層 */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../assets/images/hero-meat.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* 深藍 Overlay (左深右淡 + 上下微暗) */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(15, 37, 72, 0.92) 0%,
      rgba(15, 37, 72, 0.7)  35%,
      rgba(15, 37, 72, 0.15) 65%,
      rgba(15, 37, 72, 0)    90%),
    linear-gradient(180deg,
      rgba(15, 37, 72, 0.35) 0%,
      rgba(15, 37, 72, 0)    25%,
      rgba(15, 37, 72, 0)    70%,
      rgba(15, 37, 72, 0.5)  100%);
}

/* 左下 RENOS Watermark — 白色淡浮水印 */
.hero-watermark {
  position: absolute;
  bottom: -0.1em;
  left: -0.03em;
  z-index: 1;
  font-family: var(--ff-serif-en);
  font-size: clamp(6rem, 18vw, 18rem);
  font-weight: var(--fw-bold);
  color: var(--white);
  opacity: 0.04;
  letter-spacing: 0.05em;
  line-height: 0.85;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}

/* 主要內容區 */
.hero-content {
  position: absolute;
  left: var(--sp-9);
  right: var(--sp-9);
  bottom: var(--sp-11);
  z-index: 2;
  color: var(--white);
  max-width: 720px;
}

/* Eyebrow — 紅色短線 + 全大寫英文 */
.hero-eyebrow {
  display: inline-block;
  font-family: var(--ff-sans-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.4em;
  color: var(--red);
  margin-bottom: var(--sp-5);
}

.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: var(--red);
  vertical-align: middle;
  margin-right: 12px;
}

/* 主標題群組 */
.hero-title {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  position: relative;
  z-index: 2;
}

/* 主標 (大、白色、粗體) — 預設英文版 */
.hero-title .title-main {
  font-family: var(--ff-serif-en);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--white);
}

/* 副標 (英文紅色斜體) — 預設英文版 */
.hero-title .title-accent {
  font-family: var(--ff-serif-en);
  font-style: italic;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: #f0c5c5;
}

/* 中文版字級／字體調整 */
:lang(zh-Hant) .hero-title .title-main,
html[lang="zh-Hant"] .hero-title .title-main {
  font-family: var(--ff-serif-tc);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  letter-spacing: 0.06em;
}

:lang(zh-Hant) .hero-title .title-accent,
html[lang="zh-Hant"] .hero-title .title-accent {
  font-family: var(--ff-serif-tc);
  font-style: normal;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
  color: #f0c5c5;
}

/* 中文描述段 */
.hero-desc {
  font-family: var(--ff-sans-tc);
  font-size: var(--fs-md);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--sp-7);
  max-width: 480px;
}

/* CTA 按鈕區 */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* Hero 專用淺色按鈕 (不影響其他區塊的 .btn) */
.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.85rem;
  font-family: var(--ff-sans-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1.5px solid var(--white);
  cursor: pointer;
  transition: background-color var(--t), color var(--t), transform var(--t-fast);
  white-space: nowrap;
}

.hero-btn:active {
  transform: translateY(1px);
}

.hero-btn-primary {
  background-color: var(--white);
  color: var(--navy-d);
}

.hero-btn-primary:hover {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.hero-btn-outline {
  background-color: transparent;
  color: var(--white);
}

.hero-btn-outline:hover {
  background-color: var(--white);
  color: var(--navy-d);
}

/* 右下 SCROLL 提示 */
.hero-scroll {
  position: absolute;
  right: var(--sp-9);
  bottom: var(--sp-7);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-sans-en);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.55);
  font-weight: var(--fw-semibold);
  pointer-events: none;
}

.hero-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
  animation: hero-scroll-pulse 2.5s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes hero-scroll-pulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%      { transform: scaleY(0.4); opacity: 0.3; }
}



/* =============================================== */
/*  2. ABOUT (滿版背景 + 右側漸層 + 文字疊在右)     */
/* =============================================== */

.about {
  background-color: var(--white);
  position: relative;
  overflow: hidden;
  padding-block: 0;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 720px;
  max-width: 100%;
}

/* 左側圖片區 — 貼到頁面左邊緣，右側用 mask 羽化淡出 */
.about-image {
  position: relative;
  overflow: hidden;
  align-self: stretch;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% top;  /* 60% 讓中間兩位人物往左移到左半邊畫面中央 */
  /* 右側羽化淡出 — 圖片本身變透明，柔和融入白底 (方案 A：只羽化右側) */
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 55%,
    rgba(0, 0, 0, 0.6) 78%,
    rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 55%,
    rgba(0, 0, 0, 0.6) 78%,
    rgba(0, 0, 0, 0) 100%);
}

/* 右側文字內容 — 靠上垂直堆疊 (呼應 Hero 排版節奏) */
.about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-10) var(--sp-9);
  padding-right: max(var(--sp-9), calc((100vw - var(--container-max)) / 2 + var(--sp-9)));
  background-color: var(--white);
  position: relative;
  z-index: 1;
}

/* About 專屬 eyebrow — 紅色短線 + 中文 */
.about .section-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-sans-tc);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.3em;
  color: var(--red);
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: var(--sp-5);
}

.about .section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: var(--red);
  margin-right: 14px;
}

/* About 專屬 section-title — 整句深藍粗體 */
.about .section-title {
  font-family: var(--ff-serif-tc);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin-bottom: var(--sp-6);
}

/* 內文兩段之間留間距 */
.about .section-lead + .section-lead {
  margin-top: var(--sp-4);
}

/* 三個數據 */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: var(--bw) solid var(--line);
}


/* =============================================== */
/*  3. PHILOSOPHY (深藍底)                          */
/* =============================================== */

.philosophy {
  position: relative;
  overflow: hidden;
}

/* 裝飾元素 — 右上淡圓 */
.philosophy::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  border: var(--bw) solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  pointer-events: none;
}

.philosophy-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-10);
  align-items: start;
  position: relative;
}

.philosophy-intro {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
}

/* Philosophy 專屬 eyebrow — 紅色短線 + 中文 (呼應 About) */
.philosophy .section-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-sans-tc);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.3em;
  color: var(--red);
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: var(--sp-5);
}

.philosophy .section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: var(--red);
  margin-right: 14px;
}

/* Philosophy 專屬 section-title — 整句白色大字 */
.philosophy .section-title {
  font-family: var(--ff-serif-tc);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--white);
  margin-bottom: var(--sp-6);
}

.philosophy-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

/* 單張理念卡 */
.philo-card {
  position: relative;
  padding: var(--sp-7) var(--sp-5);
  background-color: rgba(255, 255, 255, 0.02);
  border: var(--bw) solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  transition: border-color var(--t), background-color var(--t);
  overflow: hidden;
}

/* 紅色底線 — hover 滑入 */
.philo-card::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-slow);
}

.philo-card:hover {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
}

.philo-card:hover::after {
  transform: scaleX(1);
}

.philo-num {
  display: block;
  font-family: var(--ff-serif-en);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  font-style: italic;
  color: rgba(255, 255, 255, 0.12);
  line-height: 1;
  margin-bottom: var(--sp-5);
}

.philo-title {
  font-family: var(--ff-serif-tc);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--white);
  margin-bottom: var(--sp-3);
}

.philo-desc {
  font-family: var(--ff-sans-tc);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: rgba(255, 255, 255, 0.7);
}


/* =============================================== */
/*  4. BUSINESS (七張業務卡)                        */
/* =============================================== */

.business {
  background-color: var(--off);
}

/* Business 專屬 eyebrow — 紅色短線 + 中文 (與 About / Philosophy 一致) */
.business .section-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-sans-tc);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.3em;
  color: var(--red);
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: var(--sp-5);
}

.business .section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: var(--red);
  margin-right: 14px;
}

/* Business 專屬 section-title — 整句深藍粗體 */
.business .section-title {
  font-family: var(--ff-serif-tc);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin-bottom: var(--sp-5);
}

.business-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-4);
}

.biz-card {
  background-color: var(--white);
  padding: var(--sp-6) var(--sp-4);
  border: var(--bw) solid transparent;
  border-radius: var(--radius-md);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  display: flex;
  flex-direction: column;
  position: relative;
}

.biz-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--red);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t);
}

.biz-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line);
}

.biz-card:hover::before {
  transform: scaleX(1);
}

.biz-icon {
  font-size: 2rem;
  margin-bottom: var(--sp-4);
  line-height: 1;
}

.biz-title {
  font-family: var(--ff-serif-tc);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-bottom: var(--sp-2);
  line-height: var(--lh-snug);
}

.biz-desc {
  font-family: var(--ff-sans-tc);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--gtext);
}


/* =============================================== */
/*  5. CLIENTS (五張滿版直式圖卡)                   */
/* =============================================== */

.clients {
  background-color: var(--white);
  padding-bottom: 0;
}

.clients .section-head {
  margin-bottom: var(--sp-8);
}

/* Clients 專屬 eyebrow — 置中、紅色短線在文字兩側 */
.clients .section-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-sans-tc);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.3em;
  color: var(--red);
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: var(--sp-5);
}

.clients .section-eyebrow::before,
.clients .section-eyebrow::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: var(--red);
}

.clients .section-eyebrow::before {
  margin-right: 14px;
}

.clients .section-eyebrow::after {
  margin-left: 14px;
}

/* Clients 專屬 section-title — 整句深藍粗體、置中 */
.clients .section-title {
  font-family: var(--ff-serif-tc);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin-bottom: 0;
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  width: 100%;
}

.client-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: pointer;
}

.client-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.client-card:hover img {
  transform: scale(1.06);
}

/* 深藍 gradient overlay */
.client-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 37, 72, 0.10) 0%,
    rgba(15, 37, 72, 0.40) 50%,
    rgba(15, 37, 72, 0.95) 100%
  );
  z-index: 1;
  transition: opacity var(--t);
}

.client-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-6) var(--sp-5);
  color: var(--white);
  z-index: 2;
}

.client-eng {
  display: block;
  font-family: var(--ff-sans-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--sp-2);
}

.client-name {
  font-family: var(--ff-serif-tc);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--white);
  line-height: var(--lh-snug);
}


/* =============================================== */
/*  6. PROCESS (五步驟 + 圖片卡)                    */
/* =============================================== */

.process {
  background-color: var(--off);
}

/* Process 專屬 eyebrow — 紅色短線 + 中文 (與其他區塊一致) */
.process .section-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-sans-tc);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.3em;
  color: var(--red);
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: var(--sp-5);
}

.process .section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: var(--red);
  margin-right: 14px;
}

/* Process 專屬 section-title — 整句深藍粗體 */
.process .section-title {
  font-family: var(--ff-serif-tc);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin-bottom: var(--sp-5);
}

.process-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-5);
  position: relative;
}

/* 單一步驟卡片 */
.process-step {
  position: relative;
  background-color: var(--white);
  border-radius: var(--radius-md);
  border: var(--bw) solid var(--line);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.process-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--navy);
}

/* 圖片區 — 固定 4:3，overflow 包住圖片 hover 放大 */
.step-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--navy-xl);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.step-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--t-slow);
}

.process-step:hover .step-media img {
  transform: scale(1.05);
}

/* 數字徽章 — 深藍底 + 白線圈 + 白數字，騎在圖片底部交界 (無陰影)
   放在 step-body 開頭，用負 margin-top 往上騎到交界。
   不依賴圖片高度，任何斷點/圖片比例都精準對齊，不受 overflow 影響 */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-top: -48px;            /* 徽章高度的負值，整個往上騎到圖片底部 */
  margin-bottom: var(--sp-3);
  font-family: var(--ff-serif-en);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  font-style: italic;
  color: var(--white);
  background-color: var(--navy);
  border-radius: 50%;
  border: 1.5px solid var(--white);
  position: relative;
  z-index: 3;
}

.process-step:hover .step-num {
  background-color: var(--red);
}

/* 文字區 */
.step-body {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.step-title {
  font-family: var(--ff-serif-tc);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-bottom: var(--sp-3);
}

.step-desc {
  font-family: var(--ff-sans-tc);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--gtext);
}


/* =============================================== */
/*  7. SOURCING (採購國家 — 單地圖 + 圖例)          */
/* =============================================== */

.sourcing {
  background-color: var(--white);
}

/* Sourcing 專屬 eyebrow — 紅色短線 + 中文 */
.sourcing .section-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-sans-tc);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.3em;
  color: var(--red);
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: var(--sp-5);
}

.sourcing .section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: var(--red);
  margin-right: 14px;
}

/* Sourcing 專屬 section-title — 整句深藍粗體 */
.sourcing .section-title {
  font-family: var(--ff-serif-tc);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin-bottom: var(--sp-5);
}

/* 地圖外框容器 */
.sourcing-board {
  position: relative;
  padding: var(--sp-7);
  background-color: var(--navy-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* 地圖圖片區 */
.sourcing-map {
  width: 100%;
}

.sourcing-map img {
  width: 100%;
  height: auto;
  display: block;
}

/* 中英地圖切換 — 預設顯示中文，英文版隱藏 */
.sourcing-map .map-en {
  display: none;
}

html[lang="en"] .sourcing-map .map-cn {
  display: none;
}

html[lang="en"] .sourcing-map .map-en {
  display: block;
}

/* 圖例 — 採購產地 / 配送目的地 */
.map-legend {
  display: flex;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: var(--bw) solid var(--line);
}

.map-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-dot.dot-source {
  background-color: var(--navy);
}

.legend-dot.dot-dest {
  background-color: var(--red);
}

.legend-label {
  font-family: var(--ff-sans-tc);
  font-size: var(--fs-sm);
  color: var(--gtext);
  letter-spacing: 0.05em;
}


/* =============================================== */
/*  8. CONTACT                                     */
/* =============================================== */

.contact {
  background-color: var(--off);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  min-height: 600px;
}

/* 左側深藍資訊區 */
.contact-info {
  position: relative;
  background-color: var(--navy-d);
  color: var(--white);
  padding: var(--sp-10) var(--sp-9);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Contact 專屬 eyebrow — 紅色短線 + 中文 (與其他區塊一致) */
.contact-info .section-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-sans-tc);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.3em;
  color: var(--red);
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: var(--sp-5);
  position: relative;
  z-index: 1;
}

.contact-info .section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: var(--red);
  margin-right: 14px;
}

/* Contact 專屬 section-title — 整句白色粗體 */
.contact-info .section-title {
  font-family: var(--ff-serif-tc);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--white);
  margin-bottom: var(--sp-6);
  position: relative;
  z-index: 1;
}

/* 裝飾圓 */
.contact-info::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background-color: rgba(192, 34, 42, 0.06);
  pointer-events: none;
}

.contact-info::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 400px;
  height: 400px;
  border: var(--bw) solid rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  pointer-events: none;
}

.contact-lead {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-8);
  position: relative;
  z-index: 1;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: auto;
  position: relative;
  z-index: 1;
}

.contact-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ci-label {
  font-family: var(--ff-sans-en);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.ci-value {
  font-family: var(--ff-sans-tc);
  font-size: var(--fs-base);
  color: var(--white);
}

.ci-value a:hover {
  color: var(--red);
}

/* 右側表單區 */
.contact-form-wrap {
  background-color: var(--off);
  padding: var(--sp-10) var(--sp-9);
  display: flex;
  flex-direction: column;
}

.form-title {
  font-family: var(--ff-serif-en);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-bottom: var(--sp-7);
}


/* =============================================== */
/*  9. FOOTER (3 欄: Logo + 標語 + 聯絡資訊)        */
/* =============================================== */

.site-footer {
  background-color: var(--navy-d);
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  border-top: 3px solid var(--red);
}

/* 3 欄: Logo 左 / 標語 中 / 聯絡資訊 右 */
.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-8);
  align-items: center;
  padding-block: var(--sp-9);
}

/* 欄 1: Logo */
.footer-brand {
  display: flex;
  align-items: center;
}

.footer-logo {
  height: 84px;
  width: auto;
}

/* 欄 2: 兩行標語 */
.footer-tagline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer-tagline p {
  font-family: var(--ff-sans-tc);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.05em;
}

/* 欄 3: 聯絡資訊 (靠右) */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: right;
}

.footer-contact p {
  font-family: var(--ff-sans-tc);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.footer-contact p:first-child {
  color: var(--white);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-1);
}

.footer-contact a {
  color: inherit;
  transition: color var(--t-fast);
}

.footer-contact a:hover {
  color: var(--white);
}

/* 底部版權 */
.footer-bottom {
  border-top: var(--bw) solid rgba(255, 255, 255, 0.08);
  padding-block: var(--sp-5);
  text-align: center;
}

.footer-bottom small {
  font-family: var(--ff-sans-en);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: var(--ls-wide);
}