/* === Hero CTA 增強（維持原風格）=== */
:root{
  --ink:#62595096;         /* 暖炭灰：主文字（米色木質背景上更柔和） */
  --ink-2:#f8ecdc;       /* 次文字 */
  --brand:#f1c19394;       /* 金棕：主色（與木色同色相） */
  --brand-900:#7a5e43;   /* hover 更深一階 */
  --radius:12px;
}

/* 透明 Navbar（覆蓋在 Hero 上）使用淺色字 */
.navbar-transparent .nav-link{ color: #f8f0e6 !important; }
/* 
.navbar-custom .nav-link.active {
  color: #f8f0e6;
  text-decoration: underline;
  text-underline-offset: 6px;
} */

.hero h1, .hero p { letter-spacing: 2px; text-shadow: 0 2px 12px rgba(0,0,0,.25); } /* 提高照片上可讀性 */
.hero .hero-cta { 
  color: var(--ink); 
  margin: 8px;
}
.hero .cta-primary { 
  padding: 12px; 
  margin: 8px;
}
.hero h1 {
  letter-spacing: 4px;
}

.hero .cta-lead{
  margin-top:.75rem; 
  font-size:.95rem; 
  letter-spacing:.06em; 
  color:var(--ink-2);
}

/* 只增強互動，不覆蓋 .btn 的原有樣式 */
.hero .cta-primary, 
.hero .cta-outline{
  font-weight:700; 
  border-radius:var(--radius);
  transition:transform .18s ease, box-shadow .18s ease,
             background-color .24s ease, color .24s ease, border-color .24s ease;
  will-change:transform, box-shadow;
  backdrop-filter: blur(2px);
}

/* 主按鈕：深金棕底、白字；hover 微浮起 + 加深 */
.hero .cta-primary{
  background:var(--brand); 
  color:#fff; 
  border:0;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.hero .cta-primary:hover{
  transform:translateY(-2px);
  background:var(--brand-900);
  box-shadow:0 14px 28px rgba(0,0,0,.22);
}
.hero .cta-primary:active{ 
  transform:translateY(0); 
  box-shadow:0 8px 18px rgba(0,0,0,.18); 
}

/* 次按鈕：描邊同主色；hover 時填滿同色、文字轉白 */
.hero .cta-outline{
  color:var(--brand);
  background:transparent;
  border:1.6px solid var(--brand);
}
.hero .cta-outline:hover{
  background:var(--brand);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.hero .cta-outline:active{ 
  transform:translateY(0); 
  box-shadow:0 6px 14px rgba(0,0,0,.14); 
}

/* 使用者偏好少動態時，關閉動畫 */
@media (prefers-reduced-motion: reduce){
  .hero .cta-primary, .hero .cta-outline{ transition:none; }
}


/*精選作品 過濾*/
/* --- Filter Bar --- */
.filter-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:16px 0 24px}
.filter-bar .form-select{min-width:160px}
.filter-reset{white-space:nowrap}
.project-card.is-hidden{pointer-events:none;opacity:0;transform:scale(.98);transition:opacity .25s ease,transform .25s ease}
.project-card{transition:opacity .25s ease,transform .25s ease}
.empty-state{display:none;text-align:center;color:#6c757d;padding:24px 0}
.empty-state.show{display:block}


.about-us .eng-p {
  line-height: 1.8em;
  letter-spacing: 0.5px;
  font-size: 0.8rem;
  color: var(--text-ghost);
}

.about-us p {
  line-height: 1.9em;
  letter-spacing: 0.5px;
}

.container.top-section {
    padding: 4rem 0;
    letter-spacing: 0.06rem;
    border-bottom: 1px solid #8a8a8a34;
}

.work-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    aspect-ratio: 4 / 3; /* 強制比例 */
}

.work-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 超過就裁切 */
    transition: transform 0.5s ease;
    display: block;
}

.work-card:hover img {
    transform: scale(1.05);
}

.work-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(248, 240, 230, 0.9);
    color: #5a4a3f;
    padding: 1rem;
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
    transition: transform 0.3s ease;
    letter-spacing: 0.3rem;
}

@media (max-width: 991.98px) {
    .hero {
        padding: 0 1.25rem;
        text-align: center;
    }
    .navbar-custom .nav-link {
        color: var(--ink);
    }
    .navbar-custom .nav-link.active {
        color: var(--brand-900);
        text-decoration: underline;
    }
    .hero h1 {
        font-size: clamp(2rem, 4vw, 2.6rem);
        letter-spacing: 0.4rem;
    }
    .hero p {
        font-size: 1rem;
        letter-spacing: 0.18rem;
    }
    .hero .hero-cta {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }
    .container.top-section {
        padding: 3rem 0;
    }
    .work-info {
        font-size: 1.05rem;
        letter-spacing: 0.18rem;
    }
    .about-us .section-title,
    .about-us .brand-lead,
    .about-us p {
        text-align: center !important;
    }
    .about-us .section-title {
        margin: 0 auto 1.25rem;
    }
    .about-us .row {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: 1.75rem;
        letter-spacing: 0.22rem;
    }
    .hero p {
        letter-spacing: 0.08rem;
    }
    .work-info {
        font-size: 1rem;
        padding: 0.75rem;
        letter-spacing: 0.1rem;
    }
    .navbar-collapse {
        background-color: #f8f0e6;
        padding: 1rem;
    }
    .container.top-section {
        padding: 2.5rem 0;
    }
    .hero .hero-cta {
        gap: 0.5rem;
    }
    .about-us .section-title {
        font-size: 1.75rem;
    }
    .about-us .brand-lead,
    .about-us p {
        font-size: 0.95rem;
        line-height: 1.7;
    }
    .about-us img {
        max-width: 85%;
        margin: 0 auto;
        display: block;
    }
    .process__container {
        flex-direction: column;
        gap: 2rem;
    }
    .process__cta,
    .process__subtitle {
        text-align: center;
    }
    .process__cta {
        margin-top: 1rem;
    }
    .col-12.col-md-8.order-1.order-md-2{
      padding: 12px;
    }
}