/* ============================================================
   brand-refresh.css — 優良商行品牌改版
   疊加於 styles.css 之後載入，只覆蓋需要調整的區塊
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Noto+Serif+TC:wght@400;600;900&family=Fraunces:ital,opsz,wght@0,9..144,300;1,9..144,300;1,9..144,500&display=swap');

/* ---------- Footer：輕量版顏色輪動（不含模糊，純淡入淡出，效能負擔極低） ---------- */
#site-footer.section--ink {
  position: relative;
  overflow: hidden;
  background: #FF33CC; /* fallback，若動畫不支援時的原始桃紅 */
}
.footer-gradient-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fg {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: fgCycleFade 32s ease-in-out infinite;
  will-change: opacity;
}
.fg-pink {
  background: linear-gradient(135deg, #FF33CC, #E0189E);
  animation-delay: 0s;
}
.fg-berry {
  background: linear-gradient(135deg, #D6336C, #B32552);
  animation-delay: -8s;
}
.fg-coral {
  background: linear-gradient(135deg, #FF6F5E, #E0503F);
  animation-delay: -16s;
}
.fg-lavender {
  background: linear-gradient(135deg, #C77DC9, #A855AC);
  animation-delay: -24s;
}
@keyframes fgCycleFade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  21%  { opacity: 1; }
  27%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fg { animation: none; opacity: 0; }
  .fg-pink { opacity: 1; }
}
#site-footer .container { position: relative; z-index: 1; }
.legal-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px;
  text-align: center;
}
.legal-row .legal-links {
  display: flex;
  gap: 20px;
}
.legal-row .copyright {
  order: 2;
}

/* ---------- 取代原本廉價感的鵝黃／青色色塊，改用品牌調性的精緻配色 ---------- */
/* 「我們在做的事」：溫暖珊瑚漸層，活力但不俗豔 */
#highlights .card.media-row .pad-lg {
  background: linear-gradient(150deg, #FFD9C7, #FFB8A0) !important;
}
/* 「關於優良」：香檳金漸層，呼應精品調性 */
#about .card.media-row .pad-lg {
  background: linear-gradient(150deg, #F3E6CE, #E6CFA0) !important;
}
#highlights .card.media-row .pad-lg h2,
#about .card.media-row .pad-lg h2,
#highlights .card.media-row .pad-lg .lead,
#about .card.media-row .pad-lg .lead {
  color: #2b2320;
}

/* ---------- Footer 聯絡資訊：精品風格工整網格（取代原本雜亂的 icon+文字排列） ---------- */
.footer-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 220px));
  justify-content: center;
  gap: 32px 56px;
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.18);
  text-align: center;
}
.footer-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.fi-label {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.fi-value {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  line-height: 1.6;
  transition: opacity .2s ease;
}
.fi-value:hover { opacity: 0.75; }
@media (max-width: 640px) {
  .footer-info-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
/* ---------- Footer 聯絡資訊：精品風格工整網格 結束 ---------- */
.hero-brand-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-wordmark {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-wordmark .wm-cn {
  font-family: 'Noto Serif TC', serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.12em;
  color: #211d1a;
}
.brand-wordmark .wm-line {
  width: 1px;
  height: 18px;
  background: #C9A15D;
}
.brand-wordmark .wm-en {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: #211d1a;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(255,255,255,0.4);
}
.lang-toggle {
  margin-left: 18px;
  border: 1px solid rgba(33,29,26,0.25);
  background: transparent;
  color: #211d1a;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s ease;
}
.lang-toggle:hover { background: #211d1a; color: #fff; }

/* ============================================================
   中英文分流字體系統
   修正原始 styles.css 的 --font-serif-cjk 變數實際指向 Poppins（無襯線）
   導致英文標題/內文誤用厚重無襯線字體、排版顯得廉價不專業的問題
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

/* ---------- 標題字體：中文用書法感襯線體，英文用 Fraunces（更優雅、更有個性的精品編輯感襯線體） ---------- */
.hero-title .line-1,
.hero-title .line-2,
#hero .hero-title .line-1,
#hero .hero-title .line-2,
#highlights h2,
#about h2,
#services-title,
#contact h2,
.svc-simple-card h3 {
  font-family: 'Noto Serif TC', serif;
}
html[lang="en"] .hero-title .line-1,
html[lang="en"] .hero-title .line-2,
html[lang="en"] #hero .hero-title .line-1,
html[lang="en"] #hero .hero-title .line-2,
html[lang="en"] #highlights h2,
html[lang="en"] #about h2,
html[lang="en"] #services-title,
html[lang="en"] #contact h2,
html[lang="en"] .svc-simple-card h3 {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
}

/* ---------- 內文字體：中文用思源黑體，英文用 Poppins 細體（非粗體，避免厚重感） ---------- */
.hero-sub,
#highlights .lead,
#highlights .card.media-row .pad-lg .lead,
#about .lead,
.svc-simple-card p,
.fi-value,
.line-card h3,
.muted,
label.field .label {
  font-family: 'Noto Sans TC', sans-serif;
}
html[lang="en"] .hero-sub,
html[lang="en"] #highlights .lead,
html[lang="en"] #highlights .card.media-row .pad-lg .lead,
html[lang="en"] #about .lead,
html[lang="en"] .svc-simple-card p,
html[lang="en"] .fi-value,
html[lang="en"] .line-card h3,
html[lang="en"] .muted,
html[lang="en"] label.field .label {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

/* ---------- Hero 標題尺寸微調：英文字數較多，字級略縮小、容器加寬，避免斷字換行過於凌亂 ---------- */
html[lang="en"] .hero-content {
  width: min(760px, 90vw);
}
html[lang="en"] .hero-title .line-1,
html[lang="en"] .hero-title .line-2,
html[lang="en"] #hero .hero-title .line-1,
html[lang="en"] #hero .hero-title .line-2 {
  font-size: clamp(26px, 4.4vw, 46px);
  font-weight: 600;
  line-height: 1.25;
}
html[lang="en"] #highlights h2,
html[lang="en"] #about h2 {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 600;
}
html[lang="en"] #highlights .lead,
html[lang="en"] #highlights .card.media-row .pad-lg .lead,
html[lang="en"] #about .lead {
  font-size: 15.5px;
  line-height: 1.85;
  font-weight: 400;
}
html[lang="en"] .svc-simple-card h3 {
  font-size: 19px;
}
html[lang="en"] .svc-simple-card p {
  font-size: 14px;
  line-height: 1.8;
}
/* ---------- 中英文分流字體系統 結束 ---------- */

/* ---------- Hero 內容置中(取消原本為地球/照片版面設計的向下偏移) ---------- */
#hero { --hero-shift: 0vh !important; }

/* ---------- Hero：動態四色漸層背景，取代原本靜態圖片 ---------- */
.section-hero { background: #FFF8F5; }
.hero-bg { background: #FFF8F5; }
.hero-bg .hero-photo,
.hero-bg .hero-overlay,
.hero-bg .hero-sideShade { display: none; }

.hero-gradient-layer {
  position: absolute;
  inset: -20%;
  filter: blur(40px);
  z-index: 0;
  contain: strict;
  pointer-events: none;
}
.hg {
  position: absolute; inset: 0;
  background-size: 160% 160%;
  animation: hgCycleFade 32s ease-in-out infinite;
  opacity: 0;
  will-change: opacity;
}
.hg-pink {
  background:
    radial-gradient(circle at 25% 25%, #FF33CC 0%, transparent 55%),
    radial-gradient(circle at 75% 30%, #FF8AE0 0%, transparent 52%),
    radial-gradient(circle at 45% 82%, #FFC2EE 0%, transparent 55%),
    radial-gradient(circle at 88% 85%, #7A1F63 0%, transparent 55%),
    #FFF0FA;
  animation-delay: 0s;
}
.hg-berry {
  background:
    radial-gradient(circle at 20% 30%, #D6336C 0%, transparent 55%),
    radial-gradient(circle at 80% 20%, #E8C275 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, #F2A5C4 0%, transparent 55%),
    radial-gradient(circle at 90% 90%, #2B2320 0%, transparent 60%),
    #FFF8F5;
  animation-delay: -8s;
}
.hg-coral {
  background:
    radial-gradient(circle at 25% 25%, #FF6F5E 0%, transparent 55%),
    radial-gradient(circle at 75% 30%, #8FD3C7 0%, transparent 50%),
    radial-gradient(circle at 40% 85%, #FFD79A 0%, transparent 55%),
    radial-gradient(circle at 85% 85%, #232B38 0%, transparent 55%),
    #FFF3E0;
  animation-delay: -16s;
}
.hg-lavender {
  background:
    radial-gradient(circle at 25% 20%, #C77DC9 0%, transparent 58%),
    radial-gradient(circle at 78% 15%, #FFD98A 0%, transparent 52%),
    radial-gradient(circle at 50% 80%, #B79CF0 0%, transparent 58%),
    radial-gradient(circle at 88% 85%, #FFB8D9 0%, transparent 55%),
    #FBF3FF;
  animation-delay: -24s;
}
@keyframes hgCycleFade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  21%  { opacity: 1; }
  27%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hg { animation: none; opacity: 1; }
  .hg-pink { opacity: 1; }
  .hg-berry, .hg-coral, .hg-lavender { display: none; }
}

/* 修正定位根源：.section-hero .container 是 hero-content 實際的定位錨點，
   但原本高度是塌陷的(0px)，導致 top:50% 永遠算出 0，讓標題被推到最上方 */
.section-hero .container {
  height: 100%;
}

.hero-content {
  position: absolute !important;
  z-index: 2;
  color: #211d1a;
  font-family: 'Noto Sans TC', sans-serif;
  text-align: center;
  width: min(640px, 86vw);
  padding: 0 24px;
}
/* 覆蓋 styles.css 檔案底部的強制置中規則（原本設計給地球版面用，比一般規則優先權更高） */
#hero .hero-content {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.hero-title,
#hero .hero-title {
  text-shadow: none;
  line-height: 1.35;
}
.hero-title .line-1,
#hero .hero-title .line-1 {
  font-family: 'Noto Serif TC', serif;
  font-weight: 900;
  font-size: clamp(30px, 5.2vw, 58px);
  color: #211d1a;
  white-space: normal;
  letter-spacing: 0.02em;
}
.hero-title .line-2,
#hero .hero-title .line-2 {
  font-family: 'Noto Serif TC', serif;
  font-weight: 900;
  font-size: clamp(30px, 5.2vw, 58px);
  color: #211d1a;
  white-space: normal;
  letter-spacing: 0.02em;
  margin-top: 0.15em;
}
.hero-sub {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 16px;
  color: #4A4A47;
  max-width: 480px;
  line-height: 1.9;
  margin: 18px auto 0;
}
.hero-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: 'Jost', sans-serif; font-weight: 300; font-style: italic;
  font-size: 13px; letter-spacing: 0.22em; color: #6b625c;
  margin-bottom: 18px; text-transform: uppercase;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: ''; width: 26px; height: 1px; background: currentColor; opacity: 0.5;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .hero-eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.08em;
    gap: 0;
    line-height: 1.6;
    margin-bottom: 26px;
    white-space: normal;
    padding: 0 12px;
  }
  .hero-eyebrow::before, .hero-eyebrow::after { display: none; }
}

/* ---------- 簡化版服務三張卡（取代原本分頁 + 落落長清單） ---------- */
.svc-simple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
@media (max-width: 860px) {
  .svc-simple { grid-template-columns: 1fr; }
}
.svc-simple-card {
  background: #fff;
  border: 1px solid #eee6df;
  border-radius: 14px;
  padding: 30px 28px 34px;
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.svc-simple-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(214, 51, 108, 0.12);
}
.svc-simple-card .num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 46px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 161, 93, 0.55);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.svc-simple-card .num-rule {
  width: 28px;
  height: 1px;
  background: #C9A15D;
  margin: 14px 0 16px;
}
.svc-simple-card h3 {
  font-family: 'Noto Serif TC', serif;
  font-size: 20px; font-weight: 700; color: #211d1a;
  margin-bottom: 10px;
}
.svc-simple-card p {
  font-size: 14.5px; line-height: 1.85; color: #5a534d;
}

/* ---------- Contact：LINE 主推卡片強化 ---------- */
.line-card {
  background: linear-gradient(150deg, #FFF0FA, #FFF8F5);
  border: 1px solid #f3d9ec;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
}
.line-card h3 {
  font-family: 'Noto Serif TC', serif;
  font-size: 16px;
  letter-spacing: 0.05em;
}
.contact-phones {
  margin-top: 18px;
  font-size: 13px;
  color: #6b625c;
  line-height: 1.9;
}
.contact-phones .office-label {
  font-family: 'Jost', sans-serif;
  letter-spacing: 0.08em;
  color: #C9A15D;
  margin-right: 6px;
}