/* ==========================================================================
           Base Reset & Variables
           ========================================================================== */
        :root {
            --bg-color: #000000;
            --text-color: #ffffff;
            --text-muted: #888888;
            --accent-pink: #e7aeb2;
            --accent-light: #e5e5e5;
            --font-main: 'Noto Sans KR', sans-serif;
            --spacing-lg: 15vh;
            --spacing-md: 10vh;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: var(--font-main);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }
        /* 自訂捲軸 — 與 index.html 一致。
           overflow-y: scroll 讓捲軸常駐，nav 開啟鎖捲動（body overflow:hidden）
           時不會因捲軸消失導致版面變寬「跳一下」。 */
        html {
            overflow-y: scroll;
            scrollbar-width: thin; /* Firefox */
            scrollbar-color: rgba(255, 255, 255, 0.18) #000;
        }
        html::-webkit-scrollbar,
        body::-webkit-scrollbar { width: 6px; }
        html::-webkit-scrollbar-track,
        body::-webkit-scrollbar-track { background: #000; }
        html::-webkit-scrollbar-thumb,
        body::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.18);
            border-radius: 3px;
            transition: background-color .25s ease;
        }
        html::-webkit-scrollbar-thumb:hover,
        body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); }

        /* ==========================================================================
           Grain / Noise Effect
           ========================================================================== */
        .bg--noise {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
            opacity: 0.06;
            pointer-events: none;
            transform: translateZ(0);
            will-change: opacity;
            mix-blend-mode: screen;
        }

        /* ==========================================================================
           Layout Utilities
           ========================================================================== */
        .container {
            max-width: 1600px;
            margin: 0 auto;
            /* padding: 0 4vw; */
        }

        /* Section initial hidden state for animation */
        .will__animated {
            opacity: 0;
            visibility: hidden;
        }

        /* ==========================================================================
           Text Animation Classes
           ========================================================================== */
        .anim_word {
            display: inline-block;
            overflow: hidden; /* Clip mask so characters slide up from below */
            vertical-align: top;
            padding-bottom: 0.1em; /* Prevent descenders from clipping */
            margin-right: 0.25em; /* Word spacing */
        }
        .anim_char {
            display: inline-block;
            transform: translateY(110%); /* Initially positioned below */
            will-change: transform;
        }
        .scrub-text {
            color: rgba(255, 255, 255, 0.2); /* Initially dim */
        }

        /* ==========================================================================
           Section Styles
           ========================================================================== */
        
        /* 1. Hero Section */

        .hero-bg img, .hero-bg video{
            width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
        }
        .hero {
            width: 100vw;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            height: 100vh;
            min-height: 640px;
            overflow: hidden;
            color: #ffffff;
        }
        .hero-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
        }
        .hero-bg::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                to bottom,
                rgba(0,0,0,0) 0%,
                rgba(0,0,0,0.25) 40%,
                rgba(0,0,0,0.70) 100%
            );
            z-index: 1;
        }
        .hero-bg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 20%;
            display: block;
            transform-origin: center center;
            transform: scale(1.08); /* 與 work_cont.js 視差起始值對齊，避免 load 觸發時 1.0→1.08 跳動 */
            will-change: transform;
        }
        .hero-shell {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            padding: 0;
            pointer-events: none;
            mix-blend-mode: difference;
        }

        /* ── Content wrapper: centred vertically ── */
        .hero-content-wrapper {
            position: absolute;
            top: 48%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            z-index: 5;
            display: flex;
            flex-direction: column;
            pointer-events: none;
        }
        .hero-content-wrapper > * { pointer-events: auto; }

        /* Row 1: meta tags */
        .hero-meta-row {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: baseline;
            margin-bottom: 1.8rem;
            padding: 0 4vw;
        }
        .hero-meta-row .col-left  { justify-self: start;  text-align: left; }
        .hero-meta-row .col-right { justify-self: end;    text-align: right; }
        .hero-meta-row .col-center{ justify-self: center; text-align: center; }
        .hero-col-tag {
            font-family: "DM Sans", sans-serif;
            font-size: 12px;
            letter-spacing: 0.06em;
            color: rgba(255,255,255,0.8);
        }
        .hero-col-sub {
            font-family: "DM Sans", sans-serif;
            font-size: 12px;
            letter-spacing: 0.06em;
            color: rgba(255,255,255,0.9);
        }

        /* Row 2: divider line */
        .hero-divider {
            width: 100%;
            height: 1px;
            background-color: rgba(255,255,255,0.2);
            margin-bottom: 1.5rem;
            transform: scaleX(0);
            transform-origin: left;
        }

        /* Row 3: main content */
        .hero-main-row {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: start;
                padding: 0 4vw;
        }
        .hero-main-row .col-left  { justify-self: start;  text-align: left;  padding-top: 10px; }
        .hero-main-row .col-right { justify-self: end;    text-align: right; padding-top: 10px; }
        .hero-main-row .col-center{ justify-self: center; text-align: center; }

        .hero-col-desc {
            font-family: "DM Sans", sans-serif;
            font-size: 13px;
            line-height: 1.65;
            color: rgba(255,255,255,0.85);
            max-width: 260px;
            margin: 0;
        }
        .hero-bigtitle-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .hero-bigtitle {
            margin: 0 0 0.04em;
            font-family: "Zalando Sans SemiExpanded", "PP Neue Montreal", sans-serif;
            font-size: clamp(30px, 4.2vw, 60px);
            font-weight: 600;
            line-height: 1;
            /* letter-spacing: -0.025em; */
            color: #fff;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
        }
        .hero-bigtitle .line-wrap { overflow: hidden; display: block; }
        .hero-bigtitle span.char  { display: inline-block; transform: translateY(110%); will-change: transform; }
        .hero-services-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            font-family: "DM Sans", sans-serif;
            font-size: 11px;
            letter-spacing: 0.02em;
            color: rgba(255,255,255,0.8);
        }

        /* Middle bar: SCROLL + BACK TO LIST */
        .hero-midbar {
            position: absolute;
            bottom: 14vh;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: clamp(40px, 8vw, 100px);
            pointer-events: auto;
            z-index: 6;
            white-space: nowrap;
        }
        .hero-scroll-hint {
            font-family: "DM Sans", sans-serif;
            font-size: 10px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.6);
        }
        .hero-back-link {
            font-family: "DM Sans", sans-serif;
            font-size: 10px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.6);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .hero-back-link:hover { color: rgba(255,255,255,1); }

        /* Bottom arrow bar */
        .hero-bottombar {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 3.5vh;
            pointer-events: auto;
            z-index: 6;
        }

        .ph-label {
            font-family: "DM Sans", "Noto Sans KR", sans-serif;
            font-size: 18px;
            font-weight: 500;
            color: #fff;
            /* margin: 1.5rem 0 1rem 0; */
            opacity: 0.7;
        }

        .ph-year {
            font-family: "DM Sans", "Noto Sans KR", sans-serif;
            font-size: clamp(24px, 3.5vw, 40px);
            font-weight: 400;
            color: #fff;
            margin: 0 0 1rem 0;
            letter-spacing: 0.02em;
        }

        .ph-meta-list {
            display: flex;
            gap: 1.5rem;
            margin: clamp(4rem, 8vh, 6rem) 0 3.5rem 0;
            font-family: "DM Sans", "Noto Sans KR", sans-serif;
            font-size: 14px;
            color: #fff;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            font-weight: 400;
        }
        .ph-meta-item {
            position: relative;
        }
        .ph-meta-item:not(:last-child)::after {
            content: '';
            position: absolute;
            right: -0.8rem;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 0.8em;
            background: rgba(255,255,255,0.3);
        }

        .ph-line {
            width: 100vw;
            margin-left: calc(-1 * max(0px, (100vw - 1600px) / 2));
            height: 1px;
            background: rgba(255, 255, 255, 0.25);
            transform-origin: left center;
            transform: scaleX(0);
            margin-top: 2.5rem;
            margin-bottom: 2.5rem;
            transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
        }

        /* Description row */
        .ph-desc-arrow-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            flex-direction: row;
            gap: 2rem;
        }
        .ph-desc {
            max-width: 480px;
            font-family: "DM Sans", "Noto Sans KR", sans-serif;
            font-size: 14px;
            line-height: 2;
            color: rgba(255, 255, 255, 0.75);
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
        .ph-desc p {
            margin: 0;
            font-size: 13px;
        }
        .ph-desc-video {
            width: 300px;
            aspect-ratio: 16 / 9;
            display: block;
            object-fit: cover;
        }

        /* ================================================================
           GRID LINE OVERLAY
        ================================================================ */
        .grid-overlay {
            position: fixed;
            inset: 0;
            padding: 0 var(--ui-inset, 2rem);
            pointer-events: none;
            z-index: 5;
        }
        .grid-overlay-inner {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 0.75rem;
            height: 100%;
        }
        .grid-column {
            border-left: 1px solid rgba(255, 255, 255, 0.07);
            border-right: 1px solid rgba(255, 255, 255, 0.07);
            opacity: 0;
            will-change: transform, opacity;
        }
        .ph-arrow-center {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 4vh 0 2vh;
            overflow: hidden;
        }
        .ph-arrow-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            text-decoration: none;
        }
        .ph-arrow {
            width: clamp(50px, 5vw, 50px);
            height: auto;
            opacity: 0.85;
            transform: rotate(90deg);
            transition: transform 0.55s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.3s ease;
        }
        .ph-arrow-wrap:hover .ph-arrow {
            transform: rotate(180deg);
            opacity: 1;
        }

        /* 2. Video Block */
        .ph-video-block {
            width: 100vw;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: clamp(60px, 8vw, 120px);
            background: #000000;
            display: flex;
            justify-content: center;
        }
        .ph-video-wrap {
            width: 100%;
            max-width: 1600px;
            padding: 0 4vw;
            margin: 0 auto;
            overflow: hidden;
            will-change: clip-path;
        }
        .ph-video-wrap video {
            width: 100%;
            height: auto;
            /* 基礎比例，如果有特定比例需求可以設定 aspect-ratio */
            aspect-ratio: 16 / 9;
            object-fit: cover;
            display: block;
        }

        /* 3. Two Columns Image Block */
        .ph-two-cols {
            width: 100vw;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            /* margin-bottom: clamp(60px, 8vw, 120px); */
            /* background: #000000; */
            display: flex;
            justify-content: center;
            padding: 0 2vw;
        }
        .ph-two-cols-wrap {
            width: 100%;
            /* max-width: 1600px;
            padding: 0 4vw; */
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1vw;  
        }
        .ph-col {
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        .ph-col img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            transform: scale(1.05); /* for parallax/reveal effect if needed */
            will-change: transform;
        }

        /* 4. Full Image Block */
        .ph-full-img-block {
            width: 100vw;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: clamp(60px, 8vw, 120px);
            /* background: #000000; */
            display: flex;
            justify-content: center;
        }
        .ph-full-img-wrap {
            width: 100%;
            overflow: hidden;
                padding: 1vw 2vw;
            will-change: clip-path;
        }
        .ph-full-img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* 5. Connected Grid Showcase */
        .connected-grid-section {
            width: 100vw;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            padding: clamp(72px, 10vw, 140px) 0 clamp(96px, 12vw, 180px);
            background: linear-gradient(180deg, #000000 0%, #050505 100%);
            overflow: hidden;
        }
        .connected-grid-shell {
            width: 100%;
            max-width: 1600px;
            padding: 0 4vw;
            margin: 0 auto;
        }
        .connected-grid-intro {
            display: grid;
            grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
            gap: clamp(2rem, 5vw, 6rem);
            align-items: end;
            margin-bottom: clamp(3rem, 6vw, 5.5rem);
        }
        .connected-grid-kicker {
            margin: 0 0 0.8rem;
            font-family: "DM Sans", "Noto Sans KR", sans-serif;
            font-size: 13px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.58);
        }
        .connected-grid-title {
            margin: 0;
            font-family: "Zalando Sans SemiExpanded", "PP Neue Montreal", sans-serif;
            font-size: clamp(40px, 6vw, 88px);
            line-height: 0.95;
            letter-spacing: -0.03em;
            color: #ffffff;
        }
        .connected-grid-copy {
            margin: 0;
            max-width: 460px;
            font-family: "DM Sans", "Noto Sans KR", sans-serif;
            font-size: 15px;
            line-height: 1.9;
            color: rgba(255, 255, 255, 0.7);
        }
        .cg-grid {
            width: 100%;
            display: grid;
            grid-template-columns: 100%;
            gap: clamp(1.4rem, 3vw, 2.25rem);
        }
        .cg-grid__item {
            position: relative;
            margin: 0;
        }
        .cg-grid__media {
            position: relative;
            overflow: hidden;
            width: 100%;
            aspect-ratio: var(--ratio, 1.35);
            background: #111111;
            border-radius: 1px;
        }
        .cg-grid__media-inner {
            width: 100%;
            height: 100%;
            background-position: 50% 50%;
            background-size: cover;
            background-repeat: no-repeat;
            transform-origin: 50% 50%;
            will-change: transform;
        }
        .cg-grid__caption {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 0 0;
            font-family: "DM Sans", "Noto Sans KR", sans-serif;
            font-size: 13px;
            letter-spacing: 0.04em;
            color: rgba(255, 255, 255, 0.8);
        }
        .cg-grid__caption h3 {
            margin: 0;
            font: inherit;
            font-weight: 500;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.92);
        }
        .cg-grid__caption span {
            flex-shrink: 0;
            color: rgba(255, 255, 255, 0.45);
        }

        /* 進入後的狀態 — only .ph-line uses CSS transition, text handled by GSAP */
        .work-hero-entered .ph-line {
            transform: scaleX(1);
        }
        .scroll-indicator {
            display: none;
        }
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(15px); }
        }

        /* Parallax Image Container */
        .parallax--wrapper {
            width: 100%;
            height: clamp(420px, 72vh, 820px);
            overflow: hidden;
            position: relative;
            background: #d9d6d0;
        }
        .parallax--image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* 2. Overview Text Section */
        .overview-section {
            /* background: #000; */
            padding: clamp(56px, 8vh, 110px) 2.5vw;
        }
        .overview-shell {
            max-width: 1600px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: clamp(2.5rem, 4vh, 4rem);
        }
        .overview-row {
            display: grid;
            grid-template-columns: 110px 1fr;
            gap: 2vw;
            align-items: start;
        }
        .overview-label {
            font-family: "DM Sans", sans-serif;
            font-size: 10px;
            letter-spacing: 0.18em;
            text-transform: lowercase;
            color: rgba(255,255,255,0.32);
            padding-top: 0.2em;
        }
        .overview-text {
            font-family: "DM Sans", "Noto Sans KR", sans-serif;
            font-size: 13px;
            line-height: 1.95;
            color: rgba(255,255,255,0.58);
            margin: 0;
            max-width: 520px;
        }

        /* Full Width Showcase */
        .full-width-gallery {
            width: 100vw;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            background: #050505;
            padding: 0 2vw var(--spacing-lg);
        }

        /* Single Full Image / Mockup Section */
        .single-full-image {
            width: 100vw;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: var(--spacing-lg);
            background-color: var(--accent-light);
            padding: 10vh 5vw;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        .single-img-wrap {
            width: 100%;
            max-width: 1400px;
            position: relative;

            filter: drop-shadow(0 40px 80px rgba(0,0,0,0.3));
        }
        .single-img-wrap img {
            width: 100%;
            height: auto;
            display: block;
            transform: scale(1.15); /* Pre-scaled for GSAP animation */
            will-change: transform;
        }

        /* 3. Gallery Grid Section */
        .gallery-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 100%;
            margin-bottom: var(--spacing-lg);
        }
        .gallery-item {
            position: relative;
            height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .gallery-item img {
            max-width: 60%;
            max-height: 80%;
            object-fit: contain;
            transform: scale(1.15);
            will-change: transform;
            filter: drop-shadow(10px 20px 30px rgba(0,0,0,0.5));
        }

        /* Grid background colors */
        .bg-pink { background-color: var(--accent-pink); }
        .bg-light { background-color: var(--accent-light); }
        .bg-dark { background-color: #2a2a2a; }

        /* 4. Next Project Section */
        .next-project {
            padding: var(--spacing-lg) 0;
            border-top: 1px solid rgba(255,255,255,0.1);
        }
        .next-project-label {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 2rem;
            color: var(--text-muted);
        }
        .next-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4vw;
            align-items: end;
        }
        .next-image-wrap {
            width: 100%;
            height: 50vh;
            overflow: hidden;
            position: relative;
        }
        .next-image-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .next-title {
            font-size: clamp(3rem, 6vw, 6rem);
            font-weight: 700;
            line-height: 1;
            margin-bottom: 2rem;
        }
        
        /* Dynamic Words Switcher */
        .dynamic-words-wrap {
            font-size: 1.5rem;
            letter-spacing: 0.05em;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .dyno-container {
            position: relative;
            display: inline-block;
            height: 1.5rem;
            overflow: hidden;
            min-width: 250px; /* Ensure enough width for longest word */
            vertical-align: bottom;
        }
        .dyno-word {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transform: translateY(100%);
            white-space: nowrap;
        }
        .dyno-word.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Responsive */
        @media (max-width: 768px) {

            .ph-two-cols-wrap{
                gap: 1.5rem;
            }
            .hero-layout, .gallery-grid, .next-layout {
                grid-template-columns: 1fr;
            }
            .hero-shell {
                padding: 0 4vw;
            }
            .hero-topbar {
                flex-direction: column;
                gap: 1.5rem;
                padding-top: clamp(80px, 12vh, 110px);
            }
            .hero-topbar-col.is-center { display: none; }
            .hero-topbar-col.is-right  { text-align: left; }
            .hero-services-list li { justify-content: flex-start; }
            .hero-bigtitle h1 { font-size: clamp(48px, 13vw, 90px); }
            .hero-bigtitle__sub { font-size: clamp(40px, 10.5vw, 76px); }
            .connected-grid-intro {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            .connected-grid-copy {
                max-width: none;
            }
            .cg-grid__caption {
                position: relative;
                padding-top: 0.85rem;
                font-size: 12px;
            }
            .ph-two-cols-wrap {
                grid-template-columns: 1fr;
                padding: 0 4vw !important;
            }
            .ph-desc-arrow-row { flex-direction: column; }
            .ph-desc { gap: 1.2rem; }
            
            .hero-media {
                margin-bottom: 38px;
            }
            .hero-title {
                max-width: none;
                font-size: clamp(2.9rem, 13vw, 4.2rem);
            }
            .project-meta {
                max-width: none;
            }
            .meta-item {
                grid-template-columns: 1fr;
                gap: 0.35rem;
            }
            .overview-title {
                font-size: clamp(1.8rem, 8vw, 2.5rem);
            }
            .overview-list li {
                grid-template-columns: 1fr;
                gap: 0.5rem;
            }
            .description-shell,
            .full-width-gallery {
                padding-left: 0;
                padding-right: 0;
            }
            .description-section {
                padding-bottom: 10vh;
            }
            .single-full-image {
                padding: 5vh 5vw;
            }
            .hero-info {
                gap: 3rem;
            }
            .parallax--wrapper { height: 48vh; }
            .gallery-item { height: 60vh; }
        }

        @media screen and (min-width: 53em) {
            .cg-grid {
                grid-template-columns: repeat(8, minmax(0, 1fr));
                grid-auto-rows: minmax(2rem, auto);
                gap: clamp(1rem, 1.4vw, 1.4rem);
            }
            .cg-grid__item {
                grid-column: var(--c) / span var(--s);
                grid-row: var(--r);
            }
        }

        /* ====================================================
           Hero enter animation — CSS transitions
           Mirrors work.html / project-creative-process.js pattern:
           JS adds .hero-entered after double rAF; transitions fire
           while the curtain panels are sliding out (~0.9 s).
        ==================================================== */
        .parallax--wrapper {
            opacity: 0;
            transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
        }
        .scroll-indicator {
            opacity: 0;
            transition: opacity 0.60s ease 0.72s;
        }
        /* Triggered state — added by JS */
        .hero-entered .parallax--wrapper { opacity: 1; }
        .hero-entered .scroll-indicator  { opacity: 1; }
        /* Project Image Reset */
    .ph-col img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

      /* =====================================================
         Connected Grid Section — ConnectedGrid approach
         ===================================================== */
      .grid {
          width: 100%;
          display: grid;
          grid-template-columns: 100%;
          grid-auto-rows: auto;
          grid-gap: 4rem;
          position: relative;
          margin: 10vh auto 20vh;
      }
      .grid__item {
          position: relative;
          margin: 0;
      }
      .grid__item-img {
          position: relative;
          overflow: hidden;
          display: grid;
          place-items: center;
          width: 100%;
          height: auto;
          aspect-ratio: var(--img-ratio, 1.5);
      }
      .grid__item-img-inner {
          width: 100%;
          height: 100%;
          background-position: 50%;
          background-size: cover;
          position: relative;
          display: block;
          object-fit: cover;
          object-position: center;
      }
      .grid__item-caption {
          position: absolute;
          padding: 0.5rem;
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
      }
      .grid__item-caption h3 {
          font-weight: 700;
          font-size: clamp(12px, 1.1vw, 15px);
          margin: 0;
          color: rgba(255,255,255,0.6);
          font-family: "DM Sans", sans-serif;
          letter-spacing: 0.06em;
          text-transform: uppercase;
      }
      .grid__item-caption span {
          font-weight: 400;
          color: rgba(255,255,255,0.35);
          font-family: "DM Sans", sans-serif;
          font-size: clamp(11px, 1vw, 13px);
      }
      @media screen and (min-width: 53em) {
          .grid {
              grid-template-columns: repeat(8, 1fr);
          }
          .grid__item {
              grid-column: var(--c) / span var(--s, 1);
              grid-row: var(--r);
          }
      }

      /* =====================================================
         Footer
         ===================================================== */
      .explore-full-case {
          background: #000;
          /* padding: clamp(60px, 10vh, 120px) clamp(20px, 4vw, 64px); */
          text-align: center;
          /* border-top: 1px solid #1a1a1a; */
          display: none;
      }
      .explore-full-case__heading {
          font-family: 'DM Sans', sans-serif;
          font-size: clamp(22px, 3.5vw, 48px);
          font-weight: 500;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          color: #fff;
          margin-bottom: 18px;
      }
      .explore-full-case__links {
          display: flex;
          justify-content: center;
          align-items: flex-end;
          gap: 35px;
          font-size: 13px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: #888;
      }
      .explore-full-case__links a {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 12px;
          color: #888;
          text-decoration: none;
          transition: color 0.25s ease;
          padding: 4px 0;
      }
      .explore-full-case__links a:hover { color: #fff; }
      .explore-full-case__links a img {
          width: 30px;
          height: auto;
          filter: brightness(0) invert(0.45);
          transition: filter 0.25s ease;
      }
      .explore-full-case__links a:hover img { filter: brightness(0) invert(1); }

      .site-footer {
          background: #000;
          color: #fff;
          padding: clamp(48px, 8vh, 100px) clamp(20px, 4vw, 64px) 0;
          position: relative;
      }
      .footer-brand-title {
          font-family: 'Zalando Sans SemiExpanded', 'DM Sans', sans-serif;
          font-size: clamp(28px, 5vw, 64px);
          font-weight: 600;
          letter-spacing: -0.02em;
          color: #fff;
          margin-bottom: 32px;
      }
      .footer-info-bar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-top: 1px solid #222;
          padding-top: 18px;
          margin-bottom: 40px;
          font-size: 13px;
          text-transform: uppercase;
          letter-spacing: 2px;
          color: #fff;
      }
      .footer-info-bar a {
          color: #fff;
          text-decoration: none;
          transition: opacity 0.2s ease;
      }
      .footer-info-bar a:hover { opacity: 0.5; }
      .footer-top-link {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          color: #fff;
          text-decoration: none;
          font-size: 11px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          transition: opacity 0.2s ease;
      }
      .footer-top-link:hover { opacity: 0.5; }
      .footer-top-arrow {
          width: 32px;
          height: auto;
          opacity: 0.85;
          transform: rotate(-90deg);
          transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
      }
      .footer-top-link:hover .footer-top-arrow { transform: rotate(-90deg) translateX(6px); }
      .footer-main-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          padding-bottom: clamp(48px, 8vh, 100px);
      }
      .footer-description {
          font-size: 14px;
          line-height: 1.65;
          color: #666;
          max-width: 450px;
          margin-bottom: 32px;
      }
      .footer-contact-info a {
          display: block;
          color: #fff;
          text-decoration: none;
          font-size: clamp(20px, 3.5vw, 50px);
          font-weight: 400;
          margin-bottom: 4px;
          transition: opacity 0.2s;
      }
      .footer-contact-info a:hover { opacity: 0.6; }
      .footer-contact-info span {
          color: #444;
          font-size: clamp(18px, 2.5vw, 30px);
      }
      .web_add {
          color: #444;
          font-size: 13px;
          margin-top: 16px;
          letter-spacing: 0.04em;
      }
      .footer-nav-links {
          display: flex;
          gap: 28px;
          margin-top: 38px;
          justify-content: center;
      }
      .footer-nav-links a {
          color: #fff;
          text-decoration: none;
          font-size: 13px;
          text-transform: uppercase;
          letter-spacing: 1.5px;
          transition: opacity 0.2s;
      }
      .footer-nav-links a:hover { opacity: 0.5; }
      .footer-right-panel {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: flex-start;
      }
      .footer-video-thumb {
          width: 100%;
          max-width: 340px;
          aspect-ratio: 16 / 9;
          overflow: hidden;
          position: relative;
      }
      .footer-video-thumb video {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
      }
      @media (max-width: 768px) {
          .footer-main-content { grid-template-columns: 1fr; }
          .footer-right-panel { align-items: flex-start; margin-top: 40px; }
      }

        .grid { position: relative; z-index: 1; }
        .ph-two-cols { position: relative; z-index: 1; }

        /* ============================================================
           RWD — Tablet  (769px – 1024px)
           ============================================================ */
        @media (min-width: 769px) and (max-width: 1024px) {
          .hero-col-desc {
            font-size: 12px;
            max-width: 180px;
            line-height: 1.6;
          }
          .hero-meta-row,
          .hero-main-row {
            padding: 0 3vw;
          }
          .hero-col-tag,
          .hero-col-sub {
            font-size: 11px;
          }
          .overview-row {
            grid-template-columns: 90px 1fr;
          }
          .overview-text {
            font-size: 12.5px;
          }
          .footer-info-bar {
            font-size: 12px;
            letter-spacing: 1px;
          }
          .ph-two-cols-wrap {
            gap: 1.5vw;
          }
        }

        /* ============================================================
           RWD — Mobile  (≤ 768px)  — page-specific overrides
           ============================================================ */
        @media (max-width: 768px) {
          /* — Hero: meta row 縮成 2 欄，隱藏中間副標 — */

          /* 新寫的 */
        .hero{
               min-height: 640px;
        height: auto;
        align-content: center;

        }

       
        .col-right{
            display: none;
        }
          
          .hero-content-wrapper {
            top: 50%;
          }
          .hero-meta-row {
            grid-template-columns: auto;
             justify-content: center;
            padding: 0 5vw;
            margin-bottom: 1.2rem;
          }
          .hero-meta-row .col-center {
            display: none;
          }
          .hero-divider {
            margin-bottom: 1rem;
          }

          /* — Hero: 主排版改單欄，置中 — */
          .hero-main-row {
            grid-template-columns: 1fr;
            padding: 0 5vw;
            row-gap: 1rem;
            justify-items: center;
          }
          .hero-main-row .col-left {
            display: none;     /* 手機隱藏長說明文字 */
          }
          .hero-main-row .col-center {
            order: 1;
            justify-self: center;
          }
          .hero-main-row .col-right {
            order: 2;
            justify-self: center;
            padding-top: 0.5rem;
            text-align: center;
          }

          /* — Hero 大標題：可換行，更大，置中 — */
          .hero-bigtitle {
            font-size:26px;
            white-space: normal;
            word-break: break-word;
            text-align: center;
          }
          .hero-bigtitle-wrap {
            align-items: center;
          }

          /* — Services list：改橫排 wrap — */
          .hero-services-list {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.25rem 0.65rem;
            font-size: 10px;
          }

          /* — Overview — */
          .overview-section {
            padding: clamp(36px, 6vh, 60px) 5vw;
          }
          .overview-row {
            grid-template-columns: 64px 1fr;
            gap: 1rem;
          }
          .overview-text {
            font-size: 12.5px;
            max-width: none;
            line-height: 1.85;
          }
          .overview-label {
            font-size: 9px;
            padding-top: 0.3em;
          }

          /* — Connected grid spacing — */
          .grid {
            margin: 5vh auto 8vh;
            grid-gap: 2rem;
            padding: 0 1.5rem;
          }

          /* — Full-img & video padding — */
          .ph-full-img-wrap {
            padding: 1.5rem;
          }
          .ph-video-wrap {
            padding: 1.5rem;
          }

          /* — Footer info bar — */
          .footer-info-bar {
            font-size: 11px;
            letter-spacing: 1px;
            padding-top: 14px;
            gap: 0.5rem;
          }
          .footer-main-content {
            padding-bottom: clamp(32px, 5vh, 60px);
          }
          .explore-full-case__links {
            gap: 20px;
          }

          /* — 裝飾性格線隱藏 — */
          .grid-overlay-inner {
            display: none;
          }
        }