/*
Theme Name: Luho Brutalist V13 (Final Clean & Stable)
Description: 祿活 Luho 官方網站主題 - 已整合所有修復，移除重複代碼
*/

/* ==========================================================================
   1. 核心設定 (Variables & Reset)
   ========================================================================== */
@font-face {
    font-family: 'MarcheVoked';
    src: url('fonts/MARCHEVOKED-Demo.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* 核心色票 */
    --bg-color: #E85A2D;  /* 首頁橘底 */
    --text-color: #111111; /* 首頁黑字 */
    --line-color: #111111;
    --white: #ffffff;
    
    /* 內頁專用色票 */
    --luho-black: #1a1a1a;  /* 內頁黑底 */
    --luho-orange: #FF5722; /* 內頁橘字 (選單/連結) */
    --luho-text: #f0f0f0;   /* 內頁白字 */

    /* 字體設定 */
    --font-serif: 'MarcheVoked', serif;
    --font-sans: 'Space Grotesk', sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0; padding: 0;
    overflow-x: hidden;
    font-family: var(--font-sans);
    background-color: var(--bg-color);
    color: var(--text-color);
}

a { text-decoration: none; color: inherit; transition: color 0.3s; }
img { max-width: 100%; height: auto; }

/* ★ FIX: 防止 SVG 在聯絡頁面爆版 */
svg { max-width: 100%; height: auto; }

/* 佈局工具 */
.container { width: 92%; max-width: 1600px; margin: 0 auto; position: relative; height: 100%; }


/* ==========================================================================
   2. Header 基礎結構
   ========================================================================== */
.site-header {
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 99999 !important;
    padding: 20px 4%;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    transition: background-color 0.4s ease, padding 0.4s ease;
}

.custom-logo { 
    height: 40px; width: auto; display: block; 
    transition: filter 0.4s; position: relative; z-index: 100000;
}

/* 電腦版選單容器 */
.main-nav ul { 
    display: flex; gap: 30px; list-style: none; margin: 0; 
    position: relative; z-index: 100000;
}

/* 選單連結基本樣式 */
.main-nav a { 
    font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; 
    transition: all 0.3s ease;
    padding: 8px 16px; 
    border-radius: 4px;
    position: relative;
    /* 預設顏色由 body 決定，或下方覆蓋 */
}

/* 手機版 Menu 按鈕 */
.menu-trigger { 
    background: transparent; border: 1px solid currentColor; padding: 8px 20px; 
    cursor: pointer; font-family: inherit; font-weight: bold; text-transform: uppercase;
    transition: 0.3s; position: relative; z-index: 100000 !important;
}

@media (max-width: 1024px) {
    .main-nav { display: none; }
}


/* ==========================================================================
   3. 全螢幕選單 (手機版)
   ========================================================================== */
.fullscreen-menu {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: #000; color: var(--bg-color); z-index: 100001 !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding-top: 60px; opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.fullscreen-menu.active { opacity: 1; pointer-events: auto; }
.fullscreen-menu ul { width: 100%; max-height: 90vh; padding: 0; margin: 0; list-style: none; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.fullscreen-menu li { margin: 1.5vh 0 !important; }

/* FIX: 全螢幕選單字體與 Hover 反白 */
.fullscreen-menu a { 
    font-family: var(--font-serif); text-transform: uppercase; color: var(--bg-color); 
    line-height: 1.1; font-size: clamp(30px, 7vh, 80px) !important; 
    transition: all 0.3s ease; padding: 5px 20px; border-radius: 8px;
}
.fullscreen-menu a:hover {
    background-color: var(--luho-orange); color: #000 !important;
    transform: scale(1.05); text-decoration: none;
}

.close-menu {
    position: absolute; top: 40px; right: 40px;
    background: transparent; border: 1px solid var(--luho-orange); color: var(--luho-orange);
    padding: 12px 32px; border-radius: 50px;
    font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: 2px;
    cursor: pointer; transition: all 0.3s ease; z-index: 2002;
}
.close-menu:hover { background-color: var(--luho-orange); color: #000; transform: scale(1.05); }


/* ==========================================================================
   4. 首頁專屬樣式 (橘底黑字)
   ========================================================================== */
body.home { background-color: var(--bg-color); color: var(--text-color); }

/* 首頁 Header 穿透設定 */
body.home .site-header { pointer-events: none !important; }
body.home .site-header a, body.home .site-header button, body.home .site-header img { pointer-events: auto !important; }

/* 首頁 Logo 保持原色 */
body.home .custom-logo { filter: none !important; opacity: 1 !important; }

/* 首頁 Menu 顏色 (黑色) */
body.home .main-nav a { color: var(--text-color); }
body.home .menu-trigger { color: var(--text-color); border-color: var(--text-color); }

/* ★ 首頁 Menu Hover 反白 (黑底白字) */
body.home .main-nav a:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    text-decoration: none;
}
body.home .menu-trigger:hover { background: var(--text-color); color: var(--bg-color); }

/* 首頁 Hero 元素 */
.hero-section {
    height: 100vh; width: 100%; position: relative; border-bottom: 1px solid var(--line-color);
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}
#geo-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.giant-text {
    font-family: var(--font-serif); font-size: 20vw; line-height: 0.8; margin: 0;
    text-transform: uppercase; letter-spacing: -2px; color: var(--text-color);
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; pointer-events: none;
    text-align: center;
}
.giant-text .line-1 { display: block; transform: translateX(-8%); }
.giant-text .line-2 { display: block; transform: translateX(8%); }

.eyes-container { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: 220px; height: 120px; z-index: 10; pointer-events: none; }
.infinite-line { position: absolute; top: 60px; left: 50%; width: 2px; height: 300vh; background-color: #000; transform: translateX(-50%); z-index: -1; }
.eyes-wrapper { position: relative; width: 100%; height: 100%; cursor: pointer; pointer-events: auto; transition: transform 0.3s; }
.eyes-wrapper:hover { transform: scale(1.05); }

.marquee-strip { background: #000; color: var(--bg-color); padding: 15px 0; overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--line-color); }
.marquee-content { display: inline-block; font-family: var(--font-sans); font-weight: bold; font-size: 20px; text-transform: uppercase; animation: scroll 20s linear infinite; }


/* ==========================================================================
   5. 首頁服務列表
   ========================================================================== */
.service-block { 
    display: block; border-top: 1px solid var(--line-color); padding: 60px 0; 
    background-color: var(--bg-color); color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease; 
    text-decoration: none;
}

/* Hover 時，強制父層變黑 */
.service-block:hover {
    background-color: #000 !important; color: #fff !important;
}

.service-block .split-layout { 
    display: flex; justify-content: space-between; align-items: flex-start; 
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 40px; border-radius: 20px;
    border: 1px solid transparent;
}

.col-meta { width: 30%; padding-top: 10px; }
.cat-label { display: block; font-size: 14px; text-transform: uppercase; margin-bottom: 20px; font-weight: bold; letter-spacing: 1px; }
.desc-text { font-size: 16px; line-height: 1.5; margin: 0; opacity: 0.8; }
.col-impact { width: 65%; text-align: right; }
.impact-title { font-family: var(--font-serif); font-size: 8vw; line-height: 0.9; margin: 0; text-transform: uppercase; letter-spacing: -2px; color: var(--text-color); }

/* 毛玻璃特效 */
.service-block:hover .split-layout {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    transform: scale(1.02);
}
.service-block:hover .impact-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.service-block:hover .cat-label { color: var(--luho-orange); } 
.service-block:hover .desc-text { color: rgba(255, 255, 255, 0.9); }

.full-img { width: 100%; height: 60vh; background-size: cover; background-position: center; border-bottom: 1px solid var(--line-color); filter: sepia(0.2) contrast(1.1); display: block; }


/* ==========================================================================
   6. 內頁樣式 (通用黑底橘字)
   ========================================================================== */
body:not(.home) { 
    background-color: var(--luho-black) !important; 
    color: var(--luho-text) !important; 
    min-height: 80vh; 
}

/* 內頁 Logo 強制轉白 */
body:not(.home) .custom-logo { 
    filter: invert(1) brightness(2) !important; 
    opacity: 1 !important;
}

/* 內頁 Header 可點擊 */
body:not(.home) .site-header { pointer-events: auto !important; }

/* 內頁 Menu 文字顏色 (強制橘色) */
body:not(.home) .main-nav a { 
    color: var(--luho-orange) !important; 
    background-color: transparent;
}

/* ★ 內頁 Menu Hover 反白 (橘底黑字) */
body:not(.home) .main-nav a:hover {
    background-color: var(--luho-orange) !important; /* 橘底 */
    color: #000000 !important; /* 黑字 */
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(255, 87, 34, 0.6);
}

/* 內頁 Menu 按鈕 (手機版) */
body:not(.home) .menu-trigger {
    color: var(--luho-orange) !important;
    border: 1px solid var(--luho-orange) !important;
}
body:not(.home) .menu-trigger:hover {
    background-color: var(--luho-orange) !important;
    color: #000000 !important;
}

.luho-inner-page { padding-bottom: 80px; }
.page-hero { padding: 80px 0 40px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 60px; }
.hero-subtitle { display: block; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--luho-orange); margin-bottom: 16px; font-weight: 600; }
.hero-title { font-family: var(--font-serif); font-size: 5rem; line-height: 1; font-weight: 400; text-transform: uppercase; color: #fff; margin: 0; }
@media (max-width: 768px) { .hero-title { font-size: 3rem; } }

/* 內頁通用內容排版 */
.prose-content { max-width: 800px; font-size: 1.1rem; line-height: 1.8; color: #ddd; }
.prose-content h2 { font-size: 2rem; color: var(--luho-orange); margin-top: 40px; margin-bottom: 20px; }
.prose-content h3 { font-size: 1.5rem; color: #fff; margin-top: 30px; margin-bottom: 15px; }
.prose-content p { margin-bottom: 24px; }
.prose-content a { color: var(--luho-orange); border-bottom: 1px solid transparent; }
.prose-content a:hover { border-bottom: 1px solid var(--luho-orange); }


/* ==========================================================================
   7. 作品列表網格 (Grid)
   ========================================================================== */
.portfolio-list-section { padding-bottom: 80px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px 40px; }
.portfolio-item { display: block; text-decoration: none; position: relative; }

.p-img-box { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #333; margin-bottom: 20px; background-color: #111; position: relative; }
.p-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; filter: grayscale(100%); }
.portfolio-item:hover .p-img-box img { transform: scale(1.05); filter: grayscale(0%); }

.p-content .p-title { font-family: var(--font-serif); font-size: 2rem; color: #fff; margin: 0 0 10px 0; transition: color 0.3s; line-height: 1.2; }
.portfolio-item:hover .p-title { color: var(--luho-orange); }
.p-meta { font-size: 14px; color: #888; line-height: 1.5; text-transform: uppercase; letter-spacing: 1px; }

@media (max-width: 768px) { .portfolio-grid { grid-template-columns: 1fr; gap: 40px; } }


/* ==========================================================================
   8. 首頁底部聯絡區 (Contact V2)
   ========================================================================== */
.footer-section { position: relative; background-color: #000; border-top: 1px solid #222; height: 80vh; min-height: 600px; width: 100%; }
.footer-layout { display: flex; width: 100%; height: 100%; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }

.col-info { width: 40%; background: #000; color: #fff; padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #222; z-index: 2; }
.luho-brand-title { font-family: var(--font-serif); font-size: 3.5rem; line-height: 1; margin: 0 0 15px 0; color: #fff; text-transform: uppercase; }
.company-names p { margin: 0; color: #888; font-size: 14px; letter-spacing: 1px; line-height: 1.5; }
.info-body { margin: 50px 0; }
.contact-row { margin-bottom: 25px; }
.c-label { display: block; color: var(--luho-orange); font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px; }
.c-val { color: #fff; font-family: var(--font-sans); font-size: 16px; text-decoration: none; line-height: 1.6; display: block; }
.action-area { margin-top: 20px; }
.btn-capsule { display: inline-flex; align-items: center; gap: 12px; padding: 14px 32px; border: 1px solid #fff; border-radius: 100px; color: #fff; text-decoration: none; font-weight: bold; font-size: 13px; letter-spacing: 2px; transition: all 0.3s ease; text-transform: uppercase; }
.btn-capsule:hover { background: var(--luho-orange); border-color: var(--luho-orange); color: #000; padding-right: 40px; }
.btn-capsule:hover .icon-arrow svg { transform: translate(5px, -3px); stroke: #000; }

.col-map { width: 60%; height: 100%; position: relative; background: #000; overflow: hidden; }
.col-map iframe { width: 100% !important; height: 100% !important; display: block; border: none; filter: grayscale(100%) invert(92%) contrast(110%); }

.site-footer-minimal { background: #000; border-top: 1px solid #222; padding: 25px 0; text-align: center; color: #666; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }


/* ==========================================================================
   9. About Page V5 (樣式隔離)
   ========================================================================== */
.about-hero { padding: 120px 0; border-bottom: 1px solid #222; }
.about-hero .split-layout { display: flex; align-items: flex-start; gap: 80px; } 
.hero-text { width: 50%; } 
.hero-image { width: 50%; position: relative; }

.big-title { font-family: var(--font-serif); font-size: 4rem; line-height: 0.9; color: #fff; margin-bottom: 40px; text-transform: uppercase; }
.intro-lead { font-size: 1.5rem; color: #fff; font-weight: 300; margin-bottom: 20px; }
.intro-lead .highlight { color: var(--luho-orange); font-weight: bold; }
.intro-desc { color: #999; line-height: 1.8; max-width: 500px; }
.img-frame img { width: auto; height: 60%; filter: grayscale(100%) contrast(1.1); border: 1px solid #333; }
.deco-box { position: absolute; width: 20px; height: 20px; border: 2px solid var(--luho-orange); }
.deco-box.top-right { top: -10px; right: -10px; border-bottom: none; border-left: none; }
.deco-box.bottom-left { bottom: -10px; left: -10px; border-top: none; border-right: none; }

.reveal-up { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); will-change: opacity, transform; }
.reveal-up.visible { opacity: 1; transform: translateY(0); }

/* 流程圖 (Desktop) */
.workflow-container { display: flex; justify-content: space-between; align-items: flex-start; padding: 60px 0; max-width: 1400px; margin: 0 auto; position: relative; }
.flow-step { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; flex: 0 0 auto; width: 140px; }
.step-num-label { font-size: 12px; color: var(--luho-orange); font-weight: bold; margin-bottom: 10px; letter-spacing: 1px; font-family: var(--font-sans); }
.step-circle { width: 100px; height: 100px; border: 1px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 15px; font-weight: bold; letter-spacing: 1px; background: #000; transition: all 0.3s ease; line-height: 1.3; position: relative; z-index: 2; }
.flow-step:hover .step-circle { border-color: var(--luho-orange); color: var(--luho-orange); transform: scale(1.1); box-shadow: 0 0 20px rgba(255, 87, 34, 0.4); }
.step-circle.filled { background: var(--luho-orange); border-color: var(--luho-orange); color: #000; }
.step-list { margin-top: 20px; padding: 0; list-style: none; text-align: center; width: 100%; }
.step-list li { font-size: 13px; color: #888; margin-bottom: 6px; line-height: 1.4; }
.step-list::before { content: ''; display: block; width: 1px; height: 15px; background: #333; margin: 0 auto 10px auto; }
.flow-arrow { flex: 1; height: 1px; background: #333; position: relative; top: 65px; margin: 0 -10px; z-index: 1; }
.arrow-line::after { content: ''; position: absolute; right: 50%; top: -4px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #333; }

/* FIX: 品牌輔導 (實心圓) Hover 強制白字 */
.flow-step:hover .step-circle.filled {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background-color: var(--luho-orange) !important;
    box-shadow: 0 0 25px rgba(255, 87, 34, 0.8);
    transform: scale(1.1);
}

/* 服務圖示 */
.services-icon-section { padding: 100px 0; border-top: 1px solid #222; border-bottom: 1px solid #222; background: #050505; }
.services-grid-v2 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 60px; }
.svc-card { text-align: center; padding: 30px 10px; border: 1px solid transparent; transition: 0.3s; }
.svc-card:hover { border: 1px solid #222; background: #000; }
.svc-icon { width: 80px; height: 80px; margin: 0 auto 20px auto; }
.svc-card h3 { color: #fff; font-size: 1.1rem; margin-bottom: 5px; }
.svc-card p { color: #666; font-size: 0.9rem; margin: 0; }
.luho-svg .outline { stroke: #fff; } .luho-svg .pupil { fill: #fff; }
.svc-card:hover .outline { stroke: var(--luho-orange); } .svc-card:hover .pupil { fill: var(--luho-orange); }

/* Logo 牆 */
.clients-section-v2 { padding: 100px 0; background: #000; overflow: hidden; }
.marquee-wrapper { width: 100%; position: relative; display: flex; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.marquee-track { display: flex; white-space: nowrap; will-change: transform; }
.scroll-left { animation: scrollText 30s linear infinite; }
.scroll-right { animation: scrollTextReverse 30s linear infinite; }
@keyframes scrollText { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes scrollTextReverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
.logo-txt { font-family: var(--font-serif); font-size: 3rem; color: #333; margin: 0 40px; font-weight: bold; text-transform: uppercase; transition: color 0.3s; }
.logo-txt.filled { color: transparent; -webkit-text-stroke: 1px #444; }
.marquee-wrapper:hover .marquee-track { animation-play-state: paused; }
.logo-txt:hover { color: var(--luho-orange); -webkit-text-stroke: 0; text-shadow: 0 0 15px rgba(255, 87, 34, 0.6); }


/* ==========================================================================
   10. Contact Page 樣式
   ========================================================================== */
.contact-layout { display: flex; gap: 80px; padding-bottom: 80px; }
.contact-info { width: 40%; }
.contact-form-wrapper { width: 60%; }
.section-heading { font-family: var(--font-serif); font-size: 3rem; line-height: 1.1; color: #fff; margin-bottom: 30px; }
.contact-desc { font-size: 1.1rem; color: #bbb; margin-bottom: 60px; line-height: 1.6; }
.info-items .item { margin-bottom: 40px; }
.info-items .label { display: block; font-size: 12px; letter-spacing: 2px; color: var(--luho-orange); margin-bottom: 10px; font-weight: bold; }
.info-items .val { display: block; font-size: 1.5rem; color: #fff; font-family: var(--font-sans); text-decoration: none; transition: 0.3s; }

.social-links { display: flex; gap: 15px; margin-top: 10px; }
.social-btn { display: flex !important; align-items: center; justify-content: center; width: 50px; height: 50px; border: 1px solid #555; border-radius: 50%; transition: all 0.3s ease; margin-right: 0 !important; }
.social-icon { width: 20px !important; height: 20px !important; fill: #fff; transition: fill 0.3s ease; }
.social-btn:hover { border-color: var(--luho-orange); transform: translateY(-3px); }
.social-btn:hover .social-icon { fill: var(--luho-orange); }

.form-group { margin-bottom: 40px; }
.form-group label { display: block; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #888; margin-bottom: 10px; }
.contact-form-wrapper input, .contact-form-wrapper textarea, .contact-form-wrapper select { width: 100%; background: transparent; border: none; border-bottom: 1px solid #444; color: #fff; padding: 15px 0; font-size: 1.2rem; font-family: var(--font-sans); border-radius: 0; transition: 0.3s; }
.contact-form-wrapper input:focus, .contact-form-wrapper textarea:focus { outline: none; border-bottom: 1px solid var(--luho-orange); }
.submit-btn { background: transparent; border: 1px solid var(--luho-orange); color: var(--luho-orange); padding: 20px 60px; font-size: 14px; font-weight: bold; letter-spacing: 2px; cursor: pointer; transition: 0.3s; text-transform: uppercase; width: 100%; }
.submit-btn:hover { background: var(--luho-orange); color: #000; }


/* ==========================================================================
   11. RWD 手機版 (全站通用 & 修復流程圖)
   ========================================================================== */
@media (max-width: 900px) {
    /* 首頁 */
    .giant-text { font-size: 20vw !important; }
    .giant-text .line-1 { transform: translateX(-5%); }
    .giant-text .line-2 { transform: translateX(5%); }
    .split-layout { flex-direction: column; padding: 20px; }
    .col-meta, .col-impact { width: 100%; text-align: left; }
    .impact-title { font-size: 18vw; }
    
    /* Footer */
    .footer-section { height: auto; min-height: auto; }
    .footer-layout { flex-direction: column; }
    .col-info { width: 100%; padding: 60px 30px; border-right: none; border-bottom: 1px solid #222; }
    .col-map { width: 100%; height: 400px; min-height: 400px; }

    /* About */
    .about-hero .split-layout { flex-direction: column-reverse; gap: 40px; }
    .hero-text, .hero-image { width: 100%; }
    .big-title { font-size: 3rem; }
    
    /* FIX: 流程圖 RWD (置中 + 正圓形修復) */
    .workflow-container {
        flex-direction: column;
        padding: 40px 0;
        align-items: center; /* 讓整體容器置中 */
    }

    .flow-step {
        width: 100%;
        max-width: 320px; /* 限制最大寬度，讓內容集中 */
        margin: 0 auto 50px auto; /* 區塊置中，增加下方間距 */
        display: flex;
        flex-direction: row; 
        align-items: center; /* 關鍵：垂直置中 */
        justify-content: center;
        padding-left: 0;
        position: relative;
    }

    /* 編號 */
    .step-num-label {
        position: static;
        transform: none;
        writing-mode: horizontal-tb;
        font-size: 14px;
        font-weight: 800;
        color: var(--luho-orange);
        margin-right: 15px; 
        margin-bottom: 0;
        width: 25px; 
        text-align: right;
    }

    /* 圓圈 (強制正圓) */
    .step-circle {
        width: 100px;
        height: 100px;
        min-width: 100px; /* 防止擠壓 */
        min-height: 100px;
        flex-shrink: 0; 
        margin-right: 25px;
        margin-left: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.3;
        font-size: 15px;
    }

    /* 文字列表 */
    .step-list {
        text-align: left;
        margin-top: 0;
        flex: 1;
    }
    .step-list li {
        margin-bottom: 6px;
        color: #ccc;
        font-size: 13px;
        letter-spacing: 1px;
    }

    /* 隱藏裝飾 */
    .step-list::before { display: none; }
    .flow-arrow { display: none; }
    .workflow-container::before { display: none; } /* 隱藏舊線 */
    
    /* 新的串聯短線 */
    .flow-step::after {
        content: '';
        position: absolute;
        left: 90px; /* 25px+15px+50px */
        top: 100px;
        height: 50px;
        width: 1px;
        background: #333;
        z-index: 0;
    }
    .flow-step:last-child::after { display: none; }

    /* Grid 修正 (強制手機版 2 欄) */
    .services-grid-v2 { 
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 20px; 
        margin-top: 40px; 
        padding: 0 10px; 
    }
    .logo-txt { font-size: 2rem; margin: 0 20px; }
    
    /* Contact */
    .contact-layout { flex-direction: column; gap: 40px; }
    .contact-info, .contact-form-wrapper { width: 100%; }
    
    /* Portfolio */
    .portfolio-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 480px) {
    .services-grid-v2 { grid-template-columns: 1fr !important; }
}


/* ==========================================================================
   ▼ NEW: Masonry Layout (仿 Meatpacking 瀑布流風格) - 強化修復版 ▼
   ========================================================================== */

/* 1. 瀑布流容器 (CSS Columns 技術) */
.luho-masonry-grid {
    column-count: 3; /* 電腦版 3 欄 */
    column-gap: 24px; /* 欄間距 */
    padding-bottom: 60px;
    
    /* 確保寬度不會被限制 */
    width: 100%;
}

/* 2. 單個卡片項目 */
.masonry-item {
    break-inside: avoid; /* ★ 關鍵：防止卡片被切斷 */
    margin-bottom: 24px; /* 上下間距 */
    position: relative;
    border-radius: 16px; /* 圓角風格 */
    overflow: hidden;
    background-color: #222; 
    transform: translateZ(0); 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.masonry-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    color: #fff;
}

/* 3. 圖片處理 */
.m-img-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.m-img-wrapper img {
    width: 100%;
    height: auto; /* ★ 關鍵：讓高度自由流動，形成交錯感 */
    display: block;
    transition: transform 0.6s ease;
    filter: grayscale(100%); 
}

/* 遮罩漸層 */
.m-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%);
    opacity: 0.6;
    transition: opacity 0.3s;
}

/* 4. 內容層 */
.m-content {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    z-index: 2;
}

/* 標籤與圖標 */
.m-tags {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pill-tag {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    background: rgba(255,255,255,0.9); 
    color: #000;
    padding: 4px 12px;
    border-radius: 50px;
    letter-spacing: 1px;
}

.plus-icon {
    width: 24px; height: 24px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    font-weight: bold;
    opacity: 0; 
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 底部標題區 */
.m-title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    line-height: 1.1;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    transform: translateY(10px);
    transition: transform 0.3s;
}

/* --- Hover 互動特效 --- */
.masonry-item:hover {
    transform: translateY(-5px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

.masonry-item:hover img {
    transform: scale(1.08); 
    filter: grayscale(0%);  
}

.masonry-item:hover .plus-icon {
    opacity: 1; 
    transform: scale(1);
    background: var(--luho-orange);
}

.masonry-item:hover .m-title {
    transform: translateY(0); 
    color: var(--luho-orange);
}

/* RWD 響應式 */
@media (max-width: 1024px) {
    .luho-masonry-grid { column-count: 2; } /* 平板 2 欄 */
}

@media (max-width: 600px) {
    .luho-masonry-grid { column-count: 1; } /* 手機 1 欄 */
    .m-title { font-size: 1.5rem; }
}

/* ==========================================================================
   ★ FIX: Grid 錯位排版修復 (解決偏左 + 強制錯位)
   ========================================================================== */

/* 1. 改用 Grid 系統：解決作品少時偏左的問題 */
.luho-masonry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 電腦版 3 欄 */
    gap: 40px; /* 卡片間距 */
    width: 100%;
    padding-bottom: 80px; /* 預留底部空間給錯位特效，避免蓋到 Footer */
}

.masonry-item {
    width: 100%;
    margin-bottom: 0; /* Grid 不需要 margin-bottom，由 gap 控制 */
    background-color: transparent; /* 保持乾淨 */
    transition: transform 0.4s ease;
}

/* 圖片容器保持原樣 */
.m-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* 2. 人工錯位特效 (僅在電腦版生效) */
/* 原理：強制把中間那欄往下推 50px，右邊那欄往下推 20px */
@media (min-width: 1025px) {
    
    /* 針對 3 欄排列時的中間那欄 (第 2, 5, 8... 個元素) */
    .masonry-item:nth-child(3n+2) {
        transform: translateY(50px);
    }

    /* 針對 3 欄排列時的右邊那欄 (第 3, 6, 9... 個元素) */
    .masonry-item:nth-child(3n+3) {
        transform: translateY(20px);
    }
}

/* 3. RWD 手機平板適配 */

/* 平板 (1024px 以下)：改為 2 欄 */
@media (max-width: 1024px) {
    .luho-masonry-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    /* 平板錯位邏輯：只推偶數項 */
    .masonry-item:nth-child(even) {
        transform: translateY(30px);
    }
    /* 重置電腦版的設定 */
    .masonry-item:nth-child(3n+2),
    .masonry-item:nth-child(3n+3) {
        transform: none; /* 清除電腦版的推移，避免衝突 */
    }
    /* 重新套用平板邏輯 */
    .masonry-item:nth-child(2n) {
        transform: translateY(30px);
    }
}

/* 手機 (600px 以下)：改為 1 欄 */
@media (max-width: 600px) {
    .luho-masonry-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 0;
    }
    /* 手機不需要錯位 */
    .masonry-item { transform: none !important; }
}

/* ==========================================================================
   ★ FIX: About 頁面標題字體修復
   ========================================================================== */

/* 1. 修復小標籤 (例如 / SERVICE WORKFLOW) */
.sub-tag {
    display: block;
    font-family: var(--font-sans); /* 使用無襯線體 */
    color: var(--luho-orange);     /* 橘色文字 */
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* 2. 修復大標題 (例如 THE PROCESS) - 換回品牌襯線字體 */
.section-title {
    font-family: var(--font-serif); /* ★ 關鍵：換回 MarcheVoked */
    font-size: 3.5rem;             /* 放大字體 */
    color: #fff;                   /* 白色 */
    line-height: 1;
    margin: 0 0 20px 0;
    text-transform: uppercase;
}

/* 3. 修復描述文字 */
.section-desc {
    color: #999;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto; /* 讓文字區塊置中 */
}

/* 4. 修復置中對齊 (配合 page-about.php 的 .center 類別) */
.section-header.center {
    text-align: center;
    margin-bottom: 60px;
}

/* RWD 手機版微調 */
@media (max-width: 768px) {
    .section-title {
        font-size: 2.5rem; /* 手機版字體縮小 */
    }
}

/* ==========================================================================
   ★ FIX: About 頁面 - Process 區塊間距修復
   ========================================================================== */

.process-section {
    padding-top: 100px;    /* 增加頂部間距，解決貼邊問題 */
    padding-bottom: 100px; /* 增加底部間距，保持平衡 */
    position: relative;
    background-color: var(--luho-black); /* 確保背景色一致 */
}

/* 如果只想要標題往下移，也可以針對標頭加強 margin */
.process-section .section-header {
    margin-top: 20px;
}

/* 手機版適配：間距稍微縮小一點，避免留白過多 */
@media (max-width: 768px) {
    .process-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

/* ==========================================================================
   ★ FIX: About 頁面 - 手機版圖片顯示修復
   ========================================================================== */
@media (max-width: 900px) {
    /* 強制圖片填滿寬度，並維持正確比例 */
    .img-frame img {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        display: block;
    }
    
    /* 確保圖片容器有足夠空間 */
    .img-frame {
        width: 100%;
        margin-bottom: 40px; /* 增加一點底部間距，避免跟下方標題太近 */
        position: relative;  /* 讓裝飾框框能正確定位 */
    }
}