@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&family=Roboto:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.cdnfonts.com/css/gill-sans-mt-2");
@import url("https://fonts.cdnfonts.com/css/adobe-garamond-pro-2");
@font-face {
  font-family: 'jf-openhuninn';
  src: url('../fonts/jf-openhuninn-2.1.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
    --primary-color: #2c3e50;
    --secondary-color: #bfa67a;
    --background-color: #f4f6f7;

    --bg-main: #f8f9fa;       /* 全站統一的當代美術館淺灰白底 */
    --bg-card: #ffffff;       /* 卡片與特殊區塊的純白 */
    --text-primary: #1a1a1a;  /* 主文字黑 */
    --text-muted: #666666;     /* 說明文字灰 */
    --accent-color: #bfa67a;   /* 優雅的古銅金（點綴色） */
    --site-max-width: 1440px; /* 全站統一最大對齊寬度 */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family:'jf-openhuninn',"Noto Sans TC","HEITI TC","黑體-繁","微軟正黑體","黑體",sans-serif;
    line-height: 1.6;
    
    margin: 0;
    padding: 0;
    background-color: var(--bg-main);
    /* font-family: 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif; */
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 導航樣式 */
.navbar {
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    position: relative;
    height: 100px;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: 100%;
}

.Stage_logo_id {
    width: 50px;
    height: 44px;
}
.Stage_logo_id img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.text-group {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

/* ==========================================
   🎯 瘦身優化版：徹底解決陰影重疊與程式碼重複
   ========================================== */

/* --- 1. 中文區塊外殼 --- */
.Stage_logo01 {
    display: flex;
    margin: 0px;
    opacity: 1;
    width: auto;
    height: auto;
    /* 💡 移除：無效的 position: static, left */
    /* 💡 移除：重複的 font-family，統一由子層控制 */
    /* 💡 移除：這裡的 drop-shadow 拿掉，改由子層統一掌控，陰影才不會疊加變黑！ */
}

/* --- 2. 中文字本體 (100% 繼承你原廠的粗體大字) --- */
.chinese-name {
    margin: 0px;
    font-family: Arial, '文泉驛正黑', 'WenQuanYi Zen Hei', '儷黑 Pro', 'LiHei Pro', Meiryo, 'Microsoft JhengHei', sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: rgb(0, 0, 0);
    letter-spacing: 3px;
    line-height: normal;
    text-align: left;
    
    /* 💡 統一在這裡開啟乾淨、微幅的軟陰影（透明度 0.15 剛剛好） */
    filter: drop-shadow(rgba(0, 0, 0, 0.3) 1px 1px 2px);
}

/* --- 3. 英文區塊外殼 --- */
.Stage_logo02 {
    margin: 0px;
    opacity: 1;
    width: auto;
    height: auto;
    /* 💡 移除：無效的 left, top, position */
}

/* --- 4. 英文字本體 (100% 復刻打字機細緻風) --- */
.english-name {
    margin: 0px;
    margin-top: 4px; /* 保持跟上方的間距 */
    font-family: Courier, 'Courier New', monospace;
    font-size: 17px;
    font-weight: 500;
    word-spacing: 3px;
    color: rgb(0, 0, 0);
    
    /* 💡 統一在這裡開啟跟中文一模一樣的軟陰影，絕不重複疊加！ */
    filter: drop-shadow(rgba(0, 0, 0, 0.3) 1px 1px 2px);
}
/* ==========================================
   🎯 Logo Hover 變黑、加深立體感特效
   ========================================== */

/* 1. 先為原本的字體與陰影加上「滑順過渡時間」，變黑時才不會太生硬 */
.chinese-name,
.english-name,
.Stage_logo_id img {
    /* 讓陰影和透明度的變化在 0.3 秒內絲滑完成 */
    transition: filter 0.3s ease, opacity 0.3s ease; 
}

/* 2. 當滑鼠懸停 (Hover) 在超連結外殼時，裡面的元件同步變黑加深 */
.logo-link-wrapper:hover .chinese-name {
    /* 🎯 陰影變黑：從原本的 15% 透明度 (0.15) 瞬間加深到 60% (0.6)！
       偏移量也稍微加大 (2px 2px 4px)，讓黑色的厚重感與立體感完全顯現 */
    filter: drop-shadow(rgba(0, 0, 0, 0.6) 2px 2px 4px);
}
.logo-link-wrapper:hover .english-name {
    /* 🎯 陰影變黑：從原本的 15% 透明度 (0.15) 瞬間加深到 60% (0.6)！
       偏移量也稍微加大 (2px 2px 4px)，讓黑色的厚重感與立體感完全顯現 */
    filter: drop-shadow(rgba(0, 0, 0, 0.9) 3px 3px 4px);
}

/* 3. 左邊的三角圖騰也同步讓陰影變黑加深 */
.logo-link-wrapper:hover .Stage_logo_id img {
    filter: drop-shadow(rgba(0, 0, 0, 0.6) 2px 2px 4px);
}
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 16px;
    border: none;
    cursor: pointer;
    font-size: 24px;
    transition: background-color 0.3s;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.nav-links {
    display: flex;
    gap: 20px;
}

.nav-links a:hover {
    color: var(--secondary-color);
}

.nav-links a {
    display: inline-block;
    text-align: center;
    margin: 10px 0;
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s;
}

.nav-links .chinese-text {
    display: inline-block;
    font-size: 16px;
    white-space: nowrap;
}

.nav-links .english-text {
    display: inline-block;
    font-size: 16px;
    white-space: nowrap;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    padding: 5px;
}

/* 內容區域 */
.content {
    margin-top: 90px;
    padding: 10px;
}

.section {
    display: none;
    padding: 10px 0;
}
.section.active {
    display: block;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: white;
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        text-align: center;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        padding: 10px 0;
        width: 100%;
    }

    .nav-links a:hover {
        background-color: #f5f5f5;
    }
}
/* ==========================================
   ✨ 金唐山品牌高奢進場 Loading 樣式表
   ========================================== */
#site-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff; /* 純淨白底 */
    z-index: 99999;           /* 確保壓在最上層，高於導覽列與所有內容 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 轉場動畫：1.2秒的極致優雅淡出 */
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                visibility 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 1;
    visibility: visible;
}

/* 當 JS 偵測載入完成後，加上 .fade-out 類名 */
#site-loading-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 隱形後滑鼠可穿透，完全不影響網頁後續操作 */
}

/* 💡 置中內容容器：套用 3D 呼吸動畫 */
.loading-center-content {
    /* 強制啟用顯示卡硬體加速，防止縮放時文字與幾何圖騰邊緣產生毛邊或卡頓 */
    will-change: transform, opacity;
    backface-visibility: hidden;
    
    /* 核心魔法：讓整組 Logo 帶有極其細緻、大器的空間呼吸燈效果（2.4秒起伏一次） */
    animation: logoElegantPulse 2.4s ease-in-out infinite;
}

/* 🎯 確保 Logo 在 Loading 畫面中的排版與比例完美（圖在左、字在右） */
.loading-center-content .logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* 💡 圖與字體之間的精緻間距，可依喜好微調 */
}

/* 限制左邊圖騰的大小，使其精緻大氣 */
.loading-center-content .Stage_logo_id img {
    display: block;
    width: 60px; /* 💡 調整你左邊三角圖騰的完美高度/寬度 */
    height: auto;
}

/* 右側文字排版 */
.loading-center-content .text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

/* 中文字體微調（可依原站樣式微調） */
.loading-center-content .chinese-name {
    font-size: 28px;
    font-weight: bold;
    color: #000000;
    margin: 0;
    letter-spacing: 0.1em;
}

/* 英文字體微調 */
.loading-center-content .english-name {
    font-size: 14px;
    color: #333333;
    margin: 0;
    letter-spacing: 0.15em;
}

/* ===== 🎬 金唐山 Logo 專屬 3D 呼吸軌跡 ===== */
@keyframes logoElegantPulse {
    0%, 100% {
        transform: scale3d(0.97, 0.97, 1);
        opacity: 0.4;
    }
    50% {
        transform: scale3d(1.03, 1.03, 1); /* 微微向前膨脹放大，創造立體空氣感 */
        opacity: 0.95;
    }
}
/* ==========================================
   ⚡ 智慧型防閃爍機制：二次進站直接隱形
   ========================================== */
html.skip-loading-instantly #site-loading-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* ========================================== */
/* GALLERY SECTION (與 ABOUT 一致的高階藝廊風)  */
/* ========================================== */

/* --- 標題區塊優化 --- */
.gallery-header {
    text-align: left; /* 保持與 About 的左對齊風格 */
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.gallery-title-en {
    font-family: 'Playfair Display', serif;
    font-size: 13px;
    letter-spacing: 3px;
    color: #bfa67a; /* 經典古銅金 */
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

.gallery-title-main {
    font-family: 'Noto Serif TC', serif;
    font-size: 36px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 20px;
}

.gallery-title-line {
    width: 60px;
    height: 1px;
    background-color: #bfa67a;
    margin: 20px 0;
}

/* --- Tab 切換鈕全新洗鍊設計 --- */
.gallery-tabs-container {
    border-bottom: 1px solid #eaeaea; /* 下方墊一條極細的底線 */
    margin-bottom: 50px;
}

.gallery-tabs {
    display: flex;
    gap: 40px; /* 拉開選項之間的距離 */
}

.gallery-tab {
    background: none;
    border: none;
    padding: 0 0 16px 0; /* 用 padding 撐出底線距離 */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    outline: none;
}

.gallery-tab-zh {
    font-family: 'Noto Serif TC', serif;
    font-size: 16px;
    font-weight: 500;
    color: #666666;
    transition: color 0.3s ease;
}

.gallery-tab-en {
    font-family: 'Playfair Display', serif;
    font-size: 11px;
    letter-spacing: 1px;
    color: #aaaaaa;
    margin-top: 2px;
    transition: color 0.3s ease;
}

/* 💡 滑鼠懸停時的文字微亮 */
.gallery-tab:hover .gallery-tab-zh {
    color: #111111;
}

/* 💡 當前選中狀態 (Active)：文字變黑，且下方優雅長出古銅金色的底線 */
.gallery-tab-active .gallery-tab-zh {
    color: #111111;
    font-weight: 600;
}

.gallery-tab-active .gallery-tab-en {
    color: #bfa67a;
}

.gallery-tab::after {
    content: '';
    position: absolute;
    bottom: -1px; /* 完美壓在 container 的灰線上 */
    left: 0;
    width: 0;
    height: 2px;
    background-color: #bfa67a; /* 品牌金線 */
    transition: width 0.3s ease;
}

.gallery-tab-active::after {
    width: 100%; /* 選中時金線滑出滿版 */
}

/* --- 內容與動態網格調校 --- */
.tab-content-panel {
    animation: fadeInGallery 0.5s ease-in-out;
}

/* 讓作品網格的間距比原本稍微寬鬆（gap-6 升級為 gap-8），更有看展的呼吸空間 */
#artworkGrid, #projectGrid {
    margin-bottom: 80px;
}

/* 💡 未找到作品時的極簡文字提示 */
.gallery-no-results {
    font-family: 'Noto Serif TC', serif;
    font-size: 15px;
    color: #999999;
    padding: 80px 0;
    letter-spacing: 1px;
}
/* ========================================== */
/* GALLERY PAGINATION STYLE (當代極簡分頁)     */
/* ========================================== */

.gallery-pagination-container {
    max-width: 1100px;
    margin: 60px auto 100px auto;
    padding-top: 30px;
    border-top: 1px solid #eaeaea; /* 上方墊一條洗鍊的底線與作品網格做區隔 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Noto Serif TC', 'Playfair Display', serif;
}

/* 左側文字資訊 */
.pagination-info {
    font-size: 14px;
    color: #888888;
    letter-spacing: 0.5px;
}

.pagination-info span {
    color: #111111;
    font-weight: 500;
}

/* 右側控制群組 */
.pagination-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* 頁碼與箭頭按鈕通用基礎設定 */
.page-arrow, .page-num {
    background: none;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

/* 前後箭頭樣式 */
.page-arrow {
    font-family: 'Playfair Display', serif;
    font-size: 13px;
    font-weight: 500;
    color: #666666;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.page-arrow:hover:not(:disabled) {
    color: #bfa67a; /* 懸停時亮起古銅金 */
}

.page-arrow:disabled {
    color: #cccccc;
    cursor: not-allowed;
}

/* 頁碼容器 */
.page-numbers {
    display: flex;
    gap: 8px;
}

/* 數字按鈕本體 */
.page-num {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    color: #999999;
    position: relative;
    min-width: 36px;
}

.page-num:hover {
    color: #111111;
}

/* 💡 選中狀態：數字變黑，且下方像藝廊 Tab 一樣優雅地長出古銅金細線 */
.page-num-active {
    color: #111111;
    font-weight: 600;
}

.page-num::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 0;
    height: 1.5px;
    background-color: #bfa67a;
    transition: width 0.3s ease, left 0.3s ease;
}

.page-num-active::after {
    width: 50%; /* 啟用時，中間 50% 寬度長出金線 */
}

/* --- 手機版響應式 RWD 最佳化 --- */
@media (max-width: 768px) {
    .gallery-pagination-container {
        flex-direction: column; /* 手機上切換為上下排列 */
        gap: 20px;
        text-align: center;
        margin-bottom: 60px;
    }
    
    .pagination-controls {
        width: 100%;
        justify-content: center;
        gap: 10px;
    }
}

/* 漸顯動畫，讓 Tab 切換時更流暢高雅 */
@keyframes fadeInGallery {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 手機版響應式 RWD 最佳化 --- */
@media (max-width: 768px) {
    .gallery-header {
        margin-bottom: 40px;
    }
    
    .gallery-tabs {
        gap: 25px; /* 手機上適度縮小選項間距 */
    }
    
    .gallery-tab-zh {
        font-size: 15px;
    }
    
    .gallery-tab {
        padding-bottom: 12px;
    }
}
/* 卡片樣式 */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.card {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
}

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

.card-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* 作品詳情樣式 */
.detail-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    z-index: 2000;
    overflow-y: auto;
}

.detail-content {
    background-color: #EBEBEB;
    max-width: 900px;
    margin: 50px auto;
    padding: 30px;
    border-radius: 10px;
    position: relative;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #555555;
    font-size: 40px; /* 建議電腦版先降到 40px~50px 左右比較精緻 */
    cursor: pointer;
    line-height: 1;  /* 確保高度不會被文字行高撐大，方便定位 */
}

/* 手機版樣式 (螢幕寬度在 768px 以下時生效) */
@media (max-width: 768px) {
    .close-btn {
        top: 20px;    /* 減少上方的負位移，避免在小螢幕飛出邊界 */
        right: 15px;   /* 稍微往內縮一點 */
        font-size: 32px; /* 縮小字體，適合手機點擊 */
    }
}
/* <button class="close-btn" onclick="closeArtworkDetail()">關閉</button> */
.close-btn:hover {
    transform: rotate(90deg) scale(1.2);
}
.detailTxt {
    color: #555555;
    font-size: 18px;
    width: min(calc(500 / var(--vw-min) * 100vw),500px);
    border-top: min(calc(1 / var(--vw-min) * 100vw),1px) solid #fff;
    border-bottom: min(calc(1 / var(--vw-min) * 100vw),1px) solid #fff;
    /* font-size: min(calc(17 / var(--vw-min) * 100vw),17px); */
    line-height: 2.0588;
    padding: min(calc(32 / var(--vw-min) * 100vw),32px) 0;
}
.detailname {
    color: #555555;
    font-size: 50px;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    display: block;
}
.detailname::after {
    background: white;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    margin: 1rem 0;
}
/* 作品集篩選器樣式 */
.filters {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.filter-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* 圖片查看器樣式 */
.image-viewer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.9);
    z-index: 2000;

    display: flex;
    justify-content: center;
    align-items: center;
}

.viewer-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
}

#imageViewer #expandedImg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.close-viewer {
    position: absolute;
    right: 35px;
    top: 15px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2001;
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

#artworkDetailImages img {
    cursor: zoom-in;
    transition: opacity 0.3s;
}

#artworkDetailImages img:hover {
    opacity: 0.8;
}


/* ============================================
   About Section — 重新設計樣式
   ============================================ */

/* --- 全站一體化通用區塊樣式 --- */
.site-wrapper {
    width: 100%;
}

.main-section {
    width: 100%;
    /* max-width: var(--site-max-width); */
    margin: 0 auto;
    padding: 60px 6%; /* 統一全站左、右、上、下的內邊距，消除鋸齒感 */
    background-color: var(--bg-main); /* 確保背景完全連貫 */
}

#about {
    background-color: #ffffff;
    color: var(--text-main-dark);
}

#stats {
    background-color: F2F2F2;
    color: var(--text-main-light);
}

#philosophy {
    background-color: #ffffff;
    color: var(--text-main-dark);
}

#services {
    background-color:F2F2F2;
    color: var(--text-main-dark);
}
/* 統一的頂部小標 (ABOUT US / OUR SERVICES) */
.section-kicker {
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--accent-color);
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 20px 0;
}

/* 統一的主標題字體與大小 */
.section-main-title {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 0 0 30px 0;
    letter-spacing: 1px;
}

/* --- 01. HERO ABOUT 區塊修復 --- */
.about-hero {
    margin: 80px 6% 0 6%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

.about-title-block {
    flex: 1;
}

.about-tagline {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-muted);
    border-left: 2px solid var(--accent-color);
    padding-left: 15px;
    margin-top: 30px;
}

.about-hero-divider {
    width: 1px;
    height: 180px;
    background-color: rgba(0, 0, 0, 0.08);
    align-self: center;
}

.about-intro-block {
    flex: 1.2;
}

.about-intro-text {
    font-size: 16px;
    line-height: 1.9;
    color: #333333;
    margin: 30px 0;
    text-align: justify;
}

.about-intro-text:last-child {
    margin-bottom: 0;
}

/* --- 02. STATS SHOWCASE 區塊修復（半版貓咪） --- */
.main-section.no-padding-right {
    padding-right: 0; /* 讓右側圖片能完美貼至螢幕最右邊，創造高端視覺 */
    max-width: 100%;
}

.stats-showcase {
    display: flex;
    width: 100%;
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding-right: 0;
}

.stats-left {
    flex: 1;
    padding-right: 6%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stats-description {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 45px;
}

.stats-list {
    display: flex;
    gap: 50px;
}

.stats-item {
    display: flex;
    align-items: center;
}

.stats-number {
    font-family: 'Times New Roman', serif;
    font-size: 52px;
    font-weight: bold;
    color: var(--text-primary);
    margin-right: 15px;
}

.stats-number::after {
    content: "+";
    font-size: 0.45em;
    margin-left: 2px;
}

.stats-info {
    font-size: 11px;
    line-height: 1.4;
}

.stats-en {
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.stats-zh {
    font-weight: bold;
    color: var(--text-primary);
    font-size: 12px;
}

.stats-right {
    flex: 1.2;
    height: 480px;
    overflow: hidden;
}

.stats-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ========================================================
    照片堆疊與輪播的 CSS 核心樣式
    ======================================================== */
.photo-stack-container {
    position: relative;
    width: 100%;
    max-width: 650px;  /* 可依據需求調整相片最大寬度 */
    height: 420px;     /* 可依據需求調整整體高度 */
    
}

/* 每一張照片的相框基底 */
.photo-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width:90%;       /* 稍微縮小寬度比例，留出旋轉緩衝區 */
    height: 85%;      /* 稍微縮小高度比例，留出旋轉緩衝區 */
    background-color: #eae5d9; /* 相片白邊 */
    padding: 15px 15px 40px 15px; /* 模擬拍立得，底部留白較多 */
    box-sizing: border-box;
    border: 1px solid #c5beae;
    outline: 1px solid #f5f2eb;
    outline-offset: -2px;
    object-position:left center;
    object-fit: cover; 
    box-shadow: 
        0 4px 15px rgba(40, 35, 30, 0.2), 
        0 1px 4px rgba(0, 0, 0, 0.25);
    
    opacity: 0.9;
    z-index: 1;
    
    /* 修正核心：設定旋轉基準點為正中心，並加入置中的 translate */
    transform-origin: center center;
    /* 預設位置：所有人都在正中心，角度回正 (0deg) */
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    transition: opacity 1.2s ease-in-out, transform 0.6s ease-out;
}

/* 透過 CSS 讓底部的照片產生微歪斜，複製圖片中的手工堆疊感 */
/* 第一張照片：往左微旋轉 */
/* 墊在下面、即將出現的照片：與預設一樣，保持在正中心完全不轉 */
.photo-frame.next-up {
    opacity: 1;
    z-index: 5;
    /* 確保這張照片也是正的 (0deg) */
    /* transform: translate(-50%, -50%) rotate(0deg) scale(1); */
}

/* 當前顯示的最上層照片 (主角) */
.photo-frame.active {
    opacity: 1;
    z-index: 10;
    /* JS 會在這裡隨機加入 rotate(Xdeg) 並保持微幅放大 */
    /* 預設維持大陰影突顯主角 */
}

/* ==========================================
   🎯 理念區塊：硬朗純線性打字機特效
   ========================================== */
/* --- 03. QUOTE PHILOSOPHY 區塊修復（核心理念） --- */
.quote-container {
    text-align: center;
}
/* 💡 只有當前正在打字（被加上 .typing 類名）的區塊，後面才會出現粗線游標 */
#typewriter-text.typing::after,
#typewriter-author.typing::after {
    content: '|';
    font-weight: normal;
    color: #000000;
    margin-left: 2px;
    animation: typewriterCursor 0.8s linear infinite;
}

/* ===== 🎬 游標純線性均速閃爍 ===== */
@keyframes typewriterCursor {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
.quote-text {
    font-size: 18px;
    line-height: 2;
    color: var(--text-primary);
    letter-spacing: 1px;
    font-weight: 400;
}

.quote-author {
    margin-top: 25px;
    font-size: 14px;
    color: var(--accent-color);
    font-weight: 500;
}

/* --- 04. SERVICES 區塊修復（服務項目） --- */
.services-header {
    position: relative;
    text-align: center;
    margin-bottom: 50px;
}

.about-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.about-service-card {
    position: relative;
    height: 260px;
    background-color: #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
    z-index: 1;
}

/* 確保文字絕對清晰的可視遮罩 */
.about-service-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 70%);
    z-index: 2;
}

.card-content {
    position: relative;
    z-index: 3;
    color: #ffffff !important; /* 強制設定為白色，解決您之前字體變黑的問題 */
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.5px;
}

.card-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
    display: block;
    margin-top: 4px;
}

/* 滑鼠懸停動態效果 */
.about-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.about-service-card:hover .card-bg-img {
    transform: scale(1.06);
}

/* --- 響應式佈局（RWD）行動裝置最佳化 --- */
@media (max-width: 992px) {
    .about-hero {
        flex-direction: column;
        gap: 30px;
    }
    .about-hero-divider {
        width: 100%;
        height: 1px;
    }
    .stats-showcase {
        flex-direction: column;
    }
    .main-section.no-padding-right {
        padding-right: 6%;
    }
    .stats-left {
        padding-right: 0;
        margin-bottom: 40px;
    }
    .about-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .main-section {
        padding: 80px 6%;
    }
    .section-main-title {
        font-size: 30px;
    }
    .about-services-grid {
        grid-template-columns: 1fr;
    }
    .quote-text {
        font-size: 15px;
    }
}
/* ==========================================
   🎯 金宇設計終極版：3D 翻轉空間彈出（純 JS 控時）
   ========================================== */

/* 父層網格 */
.about-services-grid {
    perspective: 1200px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* 1. 初始狀態：形狀 1:1 絕不變形，深處 3D 隱形等待 */
.about-service-card {
    opacity: 0.01;
    transform: translate3d(0, 220px, 300px) rotateX(-75deg); 
    transform-origin: 50% 100%;
    
    /* 告訴顯示卡提早開闢記憶體通道，絕不卡頓 */
    will-change: transform, opacity; 
    backface-visibility: hidden;

    /* 💡 動態時間軸：原廠最奢華的 1.1 秒極致減速曲線 */
    transition: opacity 1.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),
                transform 1.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),
                box-shadow 0.4s ease;
}

/* 2. 觸發狀態：當卡片自己被加上 .is-in-view 時，才完美歸位 */
.about-service-card.is-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg);
}

/* 3. 滑鼠懸停 (Hover) 特效 */
@media (hover: hover) {
    .about-service-card:hover {
        transform: translate3d(0, -6px, 0) rotateX(0deg) !important;
        box-shadow: 0 16px 35px rgba(0, 0, 0, 0.06);
    }
}

/* --- 05. SITE FOOTER 頁尾一體化樣式 --- */
.site-footer {
    background-color: #161412; /* 💡 採用深沉奢華的黑褐色，完美壓軸 */
    color: #e5e5e5;
    padding: 70px 0 0 0; /* 底部靠版權宣告線撐開 */
    font-size: 14px;
    width: 100%;
}

.footer-container {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 4% 50px 4%; /* 下方留空隙給版權線 */
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr; /* 三欄式排版 */
    gap: 50px;
}

/* 第一欄品牌特殊樣式 */
.footer-column.brand-col {
    padding-right: 30px;
}

.footer-logo {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.footer-brand-desc {
    color: #a0a0a0;
    line-height: 1.7;
    margin-bottom: 25px;
    text-align: justify;
}

/* 欄位標題與斜線設計（致敬 Nova Design 質感） */
.footer-title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 25px 0;
    position: relative;
}

/* 幫標題上方加一條細緻的古銅金斜線裝飾 */
.footer-title::before {
    content: '/';
    color: var(--accent-color);
    margin-right: 8px;
    font-weight: bold;
}

/* 列表基本重設 */
.footer-info-list, .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-info-list li, .footer-links li {
    margin-bottom: 15px;
    line-height: 1.6;
}

/* 聯絡資訊標籤 */
.info-label {
    color: var(--accent-color);
    font-size: 12px;
    letter-spacing: 1px;
    display: inline-block;
    width: 45px;
}
.info-values {
    display: inline-block;
    vertical-align: top;  /* 確保多行內容從頂部開始排列 */
    color: #e5e5e5;       /* 頁尾文字顏色 */
    line-height: 1.8;     /* 控制信箱彼此之間的行高，看起來比較不擁擠 */
}

/* 服務項目連結樣式 */
.footer-links a {
    color: #a0a0a0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--accent-color); /* 滑鼠移上去變古銅金色 */
}

/* 社群按鈕 */
.footer-socials {
    display: flex;
    gap: 12px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    text-decoration: none;
    border-radius: 2px;
    font-size: 11px;
    font-weight: bold;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.social-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.social-icon:hover {
    transform: scale(1.1);
}

/* --- 最底部的版權宣告線 --- */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 25px 0;
    font-size: 12px;
    color: #777777;
}

.footer-bottom-container {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* --- 響應式手機版（RWD）優化 --- */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr; /* 手機版自動變成直式排列 */
        gap: 40px;
        padding-bottom: 30px;
    }
    
    .footer-column.brand-col {
        padding-right: 0;
    }

    .footer-bottom-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

}
/* ========================================== */
/* PROCESS SECTION STYLE                      */
/* ========================================== */

/* 主標題區塊 */
.process-header {
    text-align: left;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.process-title-line {
    width: 60px;
    height: 1px;
    background-color: #bfa67a;
    margin: 20px 0;
}

/* 網格主容器 */
.process-grid-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 70px;
    perspective: 1200px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* 每個流程區塊 */
.process-block {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 40px;
    border-top: 1px solid #eaeaea;
    padding-top: 40px;

    opacity: 0.01;
    /* 方塊大殼依然維持原本沉穩的立體微沉等待 */
    transform: translate3d(0, 60px, -80px) rotateX(-8deg);
    
    will-change: transform, opacity;
    backface-visibility: hidden;
    
    /* 大外殼本身的歸位曲線 */
    transition: opacity 0.6s linear;
}

/* 📍 左側標題組（Meta Box）- 第一波主角 */
.process-block .process-meta-box {
    opacity: 0;
    transform: translate3d(0, -90px, 0); /* 稍微往左偏，等下往右回正 */
    will-change: transform, opacity;
    /* 0.8秒流暢歸位 */
    transition: opacity 0.5s ,
                transform 0.5s ;
}
/* 📍 右側內容組（Content Box）- 第二波壓軸（先死等） */
.process-block .process-content-box {
    opacity: 0;
    transform: translate3d(0, -90px, 0); /* 稍微往下沉，等下往上滑出 */
    will-change: transform, opacity;
    
    /* 💡 核心關鍵：不論何時觸發，這裡強制「多死等 250毫秒 (0.25秒)」才准動！ */
    transition: opacity 0.5s  ,
                transform 0.5s  ;
}
/* --- 3. 🎯 當方塊進入視線，被 JS 加上 .is-in-view 時的全體動態 --- */

/* 外殼歸位 */
.process-block.is-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg);
}

/* ➔ 第一時間：左側標題立刻浮現回正（0ms 無延遲） */
.process-block.is-in-view .process-meta-box {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ➔ 延遲過後：右側內文與標籤隨後絲滑浮現（自動等待 250ms 後引爆） */
.process-block.is-in-view .process-content-box {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
/* ==========================================
   🎯 CTA 區塊：硬朗線性（由上往下 + 左右對撞）
   ========================================== */

/* 1. 外殼整體：由上往下灌下來（100% 均速、無淡入） */
.process-cta-nova {
    /* 初始狀態：直接從上方 -60px 的位置死等 */
    transform: translate3d(0, -60px, 0);
    will-change: transform;
    
    /* 💡 純線性無曲線，0.6秒機械式均速歸位 */
    transition: transform 0.6s linear;
}

/* 當滑到定位，外殼由上往下歸位 */
.process-cta-nova.is-in-view {
    transform: translate3d(0, 0, 0);
}


/* 2. 英文標題：從左邊硬移過來（100% 均速、無淡入） */
.process-cta-nova .cta-nova-headline-en {
    transform: translate3d(-200px, 0, 0); /* 初始在左邊外側 */
    will-change: transform;
    
    /* 💡 純線性無曲線，跟隨外殼同時啟動 */
    transition: transform 1s linear;
}

/* 觸發後英文往右歸位 */
.process-cta-nova.is-in-view .cta-nova-headline-en {
    transform: translate3d(0, 0, 0);
}


/* 3. 中文標題：從右邊硬移過來（100% 均速、無淡入） */
.process-cta-nova .cta-nova-headline-zh {
    transform: translate3d(300px, 0, 0); /* 初始在右邊外側 */
    will-change: transform;
    
    /* 💡 純線性無曲線，跟隨外殼同時啟動 */
    transition: transform 1s linear;
    /* 💡 核心排版：文字維持靠左，但整體區塊向右大跨步，寬度收緊 */
    text-align: left; 
    max-width: 550px;       /* 限制中文寬度，讓它自然折行，更有現代詩的排版感 */
    margin-left: 20%;       /* 運用百分比！把整個中文區塊往右推 20%，製造優雅的錯位 */
}

/* 觸發後中文往左歸位 */
.process-cta-nova.is-in-view .cta-nova-headline-zh {
    transform: translate3d(0, 0, 0);
}


/* 4. 右側「聯絡我們」按鈕（配合整體，純均速由上往下） */
.process-cta-nova .cta-nova-right {
    transform: translate3d(0, -40px, 0);
    will-change: transform;
    transition: transform 0.6s linear;
}

.process-cta-nova.is-in-view .cta-nova-right {
    transform: translate3d(0, 0, 0);
}
/* 左側文字與標題盒 */
.process-meta-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 💡 優化：數字改為清晰、不被遮擋、具有質感的大字體 */
.process-num {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    color: #bfa67a; /* 品牌古銅金 */
    line-height: 1;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.process-step-tag {
    display: inline-block;
    font-size: 12px;
    color: #bfa67a;
    border: 1px solid #bfa67a;
    padding: 2px 10px;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.process-step-title {
    font-family: 'Playfair Display', 'Noto Serif TC', serif;
    font-size: 22px;
    font-weight: 600;
    color: #222222;
    margin: 0;
}

/* 右側說明內文盒 */
.process-content-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.process-step-desc {
    font-size: 15px;
    color: #4a4a4a;
    line-height: 1.8;
    margin-bottom: 25px;
    text-align: justify;
}

/* 底部的技術標籤 */
.process-step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.process-tag {
    background-color: #f4f3f0;
    color: #666666;
    font-size: 13px;
    padding: 5px 14px;
    border-radius: 2px;
    letter-spacing: 0.5px;
}

/* 下方呼籲聯絡區塊 (CTA) */
.process-cta-nova {
    width: 100%;
    background-color: #f8f9fa; /* 當代極簡淺灰底 */
    padding: 100px 0;          /* 上下留白維持呼吸感 */
    box-sizing: border-box;
    overflow: hidden;
    
    opacity: 0.01;
    transform: translate3d(0, 50px, 0);
    will-change: transform, opacity;
    transition: opacity 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000),
                transform 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.process-cta-nova.is-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.cta-nova-container {
    max-width: 1100px;         /* 標準網格對齊寬度 */
    margin: 0 auto;
    padding: 0 4%;
    display: grid;
    grid-template-columns: 1.6fr 1fr; /* 非對稱式排版 */
    align-items: center;       /* 垂直居中 */
}

/* --- 左側文案區 --- */
.cta-nova-left {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
}

/* 頂部大英文字體：全新聚焦核心步驟 */
.cta-nova-headline-en {
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 46px;
    font-weight: 900;
    line-height: 1.15;
    color: #111111;
    letter-spacing: -0.5px;
    text-transform: uppercase; /* 強制大寫，帶出工業硬朗感 */
    position: relative;
}

/* 最後的 Produce 亮點色：使用品牌古銅金 */
.cta-highlight {
    color: #bfa67a; 
}

/* 下方中文主標 */
.cta-nova-headline-zh {
    font-family: 'Noto Serif TC', 'PingFang TC', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.7;
    color: #222222;
    letter-spacing: 1px;
}

/* 強化核心工藝四字訣的視覺權重 */
.cta-zh-highlight {
    font-weight: 700;
    color: #111111;
    display: inline-block;
    padding: 0 2px;
}

/* --- 右側獨立大按鈕 --- */
.cta-nova-right {
    display: flex;
    justify-content: flex-end; /* 按鈕完美靠右 */
}

.cta-nova-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0c0c0c; /* 俐落極致深黑方塊 */
    color: #ffffff;
    width: 280px;              /* 固定的黃金大比例方塊寬度 */
    height: 110px;             /* 完美的高度感 */
    text-decoration: none;
    font-family: 'PingFang TC', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* 滑鼠懸停時的微互動 */
.cta-nova-btn:hover {
    background-color: #bfa67a; /* 轉為品牌古銅金 */
    transform: translateY(-4px); /* 微幅上浮 */
    box-shadow: 0 15px 35px rgba(191, 166, 122, 0.2);
}

/* --- 手機版響應式 RWD 最佳化 --- */
@media (max-width: 992px) {
    .cta-nova-container {
        grid-template-columns: 1fr; /* 平板與手機轉為單欄直式排版 */
        gap: 40px;
    }
    
    .cta-nova-right {
        justify-content: flex-start; /* 手機版按鈕改為靠左 */
    }
    
    .cta-nova-headline-en {
        font-size: 34px; /* 手機版適度縮小英文字級防止破行 */
    }
    
    .cta-line-deco {
        width: 60px;
    }
    
    .cta-nova-headline-zh {
        font-size: 20px;
    }
    
    .cta-nova-btn {
        width: 100%; /* 手機上按鈕滿版 */
        height: 80px;
    }
}
/* 響應式 (手機版自動收合) */
@media (max-width: 768px) {
    .process-block {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 30px;
    }
    
    .process-header {
        margin-bottom: 40px;
    }
    
    .process-num {
        font-size: 38px;
        margin-bottom: 10px;
    }
    
    .process-cta {
        padding: 30px 20px;
        margin-top: 60px;
    }
}

/* ========================================== */
/* CONTACT SECTION (與 ABOUT 一致的高階藝廊風)  */
/* ========================================== */

/* --- 標題區塊優化 --- */
.contact-header {
    text-align: left; /* 保持與 About 的左對齊風格 */
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.contact-title-line {
    width: 60px;
    height: 1px;
    background-color: #bfa67a;
    margin: 20px 0;
}

/* --- 核心雙欄佈局 --- */
.contact-main-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr; /* 採用與 About 相似的非對稱不對等比例 */
    gap: 80px;
    max-width: 1100px;
    margin: 0 auto 100px auto;
}

/* --- 左欄：資訊展示區 --- */
.contact-info-panel .about-section-label {
    margin-bottom: 40px;
}

.info-list-group {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.info-item {
    border-bottom: 1px solid #eaeaea; /* 用精細的底橫線取代整顆卡片，更有洗鍊感 */
    padding-bottom: 25px;
}

.contact-info-label {
    display: block;
    font-size: 13px;
    color: #bfa67a; /* 項目名稱使用品牌金色 */
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 500;
}

.info-value {
    font-size: 18px;
    color: #222222;
    font-weight: 500;
    margin: 0;
}

.info-value-sm {
    font-size: 13px;
    color: #888888;
    line-height: 1.5;
    margin: 6px 0 0 0;
}

.info-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-link {
    font-size: 16px;
    color: #222222;
    text-decoration: none;
    transition: color 0.2s ease;
    width: fit-content;
}

.info-link:hover {
    color: #bfa67a; /* 懸停時亮起品牌色 */
}

/* --- 右欄：現代極簡表單區 --- */
.contact-form-panel .about-section-label {
    margin-bottom: 40px;
}

.about-style-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.form-row-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group-about {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label-about {
    font-size: 13px;
    color: #555555;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* 💡 高級設計：拿掉生硬的全圍繞邊框，改用乾淨優雅的下劃線（Bottom Border） */
.form-input-about,
.form-textarea-about {
    border: none;
    border-bottom: 1px solid #cccccc;
    background-color: transparent;
    padding: 10px 0;
    font-size: 15px;
    color: #111111;
    outline: none;
    transition: border-color 0.3s ease;
    border-radius: 0;
}

.form-textarea-about {
    resize: none;
}

/* 輸入時下劃線優雅變成古銅金 */
.form-input-about:focus,
.form-textarea-about:focus {
    border-bottom: 1px solid #bfa67a;
}

/* 表單底部區塊 */
.form-footer-about {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.form-note-about {
    font-size: 13px;
    color: #888888;
    margin: 0;
}

/* 黑色大方塊送出按鈕（與訂製流程結尾的 Nova 設計語言完美一體化） */
.form-submit-btn-about {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: #0c0c0c;
    color: #ffffff;
    border: none;
    padding: 0 35px;
    height: 60px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.form-submit-btn-about:hover {
    background-color: #bfa67a;
    transform: translateY(-2px);
}

.form-submit-btn-about .btn-arrow {
    transition: transform 0.2s ease;
}

.form-submit-btn-about:hover .btn-arrow {
    transform: translateX(4px);
}

/* ========================================== */
/* RWD 手機版自動響應式調校                     */
/* ========================================== */
@media (max-width: 992px) {
    .contact-main-grid {
        grid-template-columns: 1fr; /* 平板與手機版自動切回垂直單欄 */
        gap: 60px;
        margin-bottom: 60px;
    }
    
    .contact-header {
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .form-row-double {
        grid-template-columns: 1fr; /* 手機版姓名與電話拆成上下兩排 */
        gap: 30px;
    }
    
    .form-footer-about {
        flex-direction: column; /* 提示文字與按鈕改為垂直排列 */
        align-items: flex-start;
        gap: 25px;
    }
    
    .form-submit-btn-about {
        width: 100%; /* 按鈕在手機畫面上滿版，極具現代張力 */
    }
}


/* Animation */
@keyframes aboutFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.about-hero          { animation-delay: 0.05s; }
.about-section-label { animation-delay: 0.15s; }
.about-services-grid { animation-delay: 0.2s; }
.about-philosophy-quote { animation-delay: 0.25s; }
.about-timeline      { animation-delay: 0.3s; }

/* About 響應式 */
@media (max-width: 768px) {
    .about-hero {
        grid-template-columns: 1fr;
        gap: 1.5rem 0;
    }
    .about-hero-divider {
        display: none;
    }
    .about-title-main {
        font-size: 28px;
    }
    .about-services-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 400px) {
    .about-services-grid {
        grid-template-columns: 1fr;
    }
    .section#about {
        padding: 1.5rem 1rem 2rem;
    }
}