/*
Theme Name: Habitus
Description: Habitus Design Group Theme
Version: 1.0
*/

/* ===== KILL PARENT BLOCK THEME INTERFERENCE ===== */
body.wp-custom-logo,
body.page,
body.home,
body {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.home .wp-site-blocks,
body.home .is-layout-flow,
body.home .is-layout-constrained,
body.home .has-global-padding,
body.home .wp-block-group,
body.home .entry-content,
body.page-about .entry-content,      /* 需要嘅 template 逐個加 */
body.page-work .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    display: block !important;
}

/* body img 嗰句直接刪，或者改做正路寫法： */
body img {
    max-width: 100%;
}


/* ===== END KILL ===== */

:root {
    /* ===== La Palette 2026 — Menu Panel Colors ===== */
    --peony: #FAD2E1;
    --pistachio: #D0D996;
    --wasabi: #E9F056;
    --vert-sauge: #AEB8A0;
    --cool-blue: #D7EFFF;
    --orange-topaze: #FF5C34;
    --blood-orange: #DD4E28;
    --petrol: #025054;
    --cassis: #351E28;
    --sage-grey: #99A094;
    --umber-brown: #5A2418;
    --mulberry: #863C57;   

    /* Landing Page Colors — 米色轉白色 */
    --beige: #FFFFFF;
    --beige-light: #FFFFFF;
    --beige-dark: #EAEAEA;
    --cream: #FFFFFF;
    --burgundy: #770523;        /* 跟色板 Burgundy */
    --burgundy-dark: #4A0316;
    --olive: #4A5A3C;
    --slate: #5A6B6B;
    --text-dark: #2A1A1F;
    --text-muted: #7A6B6B;

  
/* ===== Menu 色板 2026 — 跟新圖片 ===== */
--m-taupe: #C9B3A6;        /* 1 奶茶米 */
--m-blue-grey: #868DA1;    /* 2 藍灰紫 */
--m-terracotta: #9C5330;   /* 3 磚橙 */
--m-dark-plum: #2A1019;    /* 4 深梅黑 */
--m-olive-gold: #AD9C55;   /* 5 橄欖金 */
--m-sage: #9FAFAD;         /* 6 灰綠 */
--m-dusty-pink: #DBBEC8;   /* 7 灰粉紅 */
--m-maroon: #48100C;       /* 8 深棗紅 */

/* ===== Menu 色板 2026 v4 — 跟直條排列 ===== */
--m-eggshell: #EDE6D6;     /* 1 米白 Eggshell */
--m-blue-mist: #A9B5BF;    /* 2 藍灰 Mist */
--m-sand: #C9BFA8;         /* 3 沙杏 Sand */
--m-quartz: #D2AF8E;       /* 4 奶茶 Quartz */
--m-sage-olive: #75703C;   /* 5 橄欖綠 Earthy Sage */
--m-terracotta: #965F48;   /* 6 磚紅 Terracota */
--m-navy: #283044;         /* 7 深海軍藍 Navy */
--m-wine: #3A060C;         /* 8 深酒紅 Wine */

--m-cream: #EDE6D6;        /* 深底淺字用 */

/* ===== Menu 色板 2026 v5 — 跟新直條排列 ===== */
--m-eggshell: #EFE3D0;     /* 1 米白 — Home */
--m-camel:    #B18A64;     /* 2 駝棕 Camel — About */
--m-rose:     #D0A9B4;     /* 3 灰玫瑰粉 Rose — Work */
--m-plum:     #473340;     /* 4 深梅紫 Plum — Expertise */
--m-olive:    #A59853;     /* 5 橄欖金 Olive Gold — People */
--m-mist:     #C2D0D9;     /* 6 淺藍灰 Mist — Kuration */
--m-umber:    #7C4A33;     /* 7 深啡 Umber — Press */
--m-terra:    #C36C51;     /* 8 磚橙 Terracotta — Contact */

--m-cream:    #EFE3D0;     /* 深底淺字用 */
--m-ink:      #3D2B33;     /* 淺底深字用（深梅調） */


/* ===== Menu 色板 2026 v6 — Pantone Apricot→Rust ===== */

    --m-egret:     #eee2d4;   /* 1 Pantone 11-0103 TCX Egret — Home */
    --m-vanilla:   #ebd3bf;   /* 2 Pantone 12-1009 TCX Vanilla Cream — About */
    --m-coral:     #e5b394;   /* 3 Pantone 14-1318 TCX Coral Pink — Work */
    --m-peachpink: #d2876b;   /* 4 Pantone 15-1530 TCX Peach Pink — Expertise */
    --m-tangerine: #d88f5e;    /* 5 Pantone 15-1247 TCX Tangerine — People */
    --m-orangepeel:#c17d48;    /* 6 Pantone 16-1359 TCX Orange Peel — Kuration */
    --m-pumpkin:   #a3543a;     /* 7 Pantone 17-1449 TCX Pureed Pumpkin — Press */
    --m-rooibos:   #7c3723;     /* 8 Pantone 18-1355 TCX Rooibos Tea — Contact */

    --m-cream2026: rgb(243, 236, 224);   /* 深底淺字 — 直接用 Egret 做米白 */
    --m-ink2026:   rgb(74, 26, 12);      /* 淺底深字 — 深棗紅調，襯個暖色系 */


}

/* ===== FONT — Altone webfont (licensed) =====
   100–400 → Thin（heading / 大字）
   500–900 → Light（內文 / label / 細字） */
@font-face {
    font-family: 'Altone';
    src: url('fonts/altone-thin-webfont.woff2') format('woff2'),
         url('fonts/altone-thin-webfont.woff')  format('woff');
    font-weight: 100 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Altone';
    src: url('fonts/altone-light-webfont.woff2') format('woff2'),
         url('fonts/altone-light-webfont.woff')  format('woff');
    font-weight: 500 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-synthesis: none;
}

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

html {
    font-size: 16px;
}

body {
    background: var(--cream);
    color: var(--text-dark);
    font-family: 'Altone', sans-serif;
    font-weight: 500;
    overflow-x: hidden;
}

/* ========== NAVIGATION — 負片效果 ========== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background: transparent;          /* 一定要透明，blend mode 先生效 */
    mix-blend-mode: difference;       /* 負片核心 */
    pointer-events: none;             /* nav 本身唔阻擋下面內容 */
    transition: padding 0.4s ease;
}

.nav.scrolled {
    padding: 1rem 4rem;
}

.nav.hidden {
    pointer-events: none;
    opacity: 0;
}

.nav-logo {
    display: block;
    pointer-events: auto;             /* logo 可以 click */
}

.nav-logo img {
    display: block;
    height: 120px;                     /* 初始大 size，自己調 */
    width: auto;
    filter: invert(1);                /* 黑 logo → 白，配合 difference */
    transition: height 0.4s ease;
    margin-left: 0px;
  
}

/* Scroll 時由大變細 */
.nav.scrolled .nav-logo img {
    height: 60px;
}

/* Hamburger — 白色線，一樣負片 */
.hamburger {
    width: 32px;
    height: 20px;
    position: relative;
    cursor: pointer;
    pointer-events: auto;
    z-index: 1001;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: #fff;                 /* 白色 + difference = 自動負片 */
    position: absolute;
    left: 0;
    transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0; }

/* ========== PANEL MENU ========== */
.panel-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.panel-menu.active {
    opacity: 1;
    pointer-events: all;
}

/* Close button */
.panel-menu-close {
    position: fixed;
    top: 1.5rem;
    right: 1.2rem;
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    transition: transform 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.panel-menu.active .panel-menu-close {
    opacity: 1;
    pointer-events: all;
}

.panel-menu-close:hover {
    transform: rotate(90deg);
}

/* Close button — 用粉紅色，襯最右邊 Cassis 深色 panel */
.panel-menu-close::before,
.panel-menu-close::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 1.5px;
    background: var(--m-cream);
}

.panel-menu-close::before { transform: rotate(45deg); }
.panel-menu-close::after { transform: rotate(-45deg); }

.menu-panel {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    cursor: pointer;
    transition: flex 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.4s;
    transform: translateY(100%);
    opacity: 0;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3), -2px 0 8px rgba(0, 0, 0, 0.15);
}

.panel-menu.active .menu-panel {
    transform: translateY(0);
    opacity: 1;
}

/* ===== Panel colors — 2026 v6 (Pantone) ===== */
.menu-panel:nth-child(2) { background: var(--m-egret); }       /* Home */
.menu-panel:nth-child(3) { background: var(--m-vanilla); }     /* About */
.menu-panel:nth-child(4) { background: var(--m-coral); }       /* Work */
.menu-panel:nth-child(5) { background: var(--m-peachpink); }   /* Expertise */
.menu-panel:nth-child(6) { background: var(--m-tangerine); }   /* People */
.menu-panel:nth-child(7) { background: var(--m-orangepeel); }  /* Kuration */
.menu-panel:nth-child(8) { background: var(--m-pumpkin); }     /* Press */
.menu-panel:nth-child(9) { background: var(--m-rooibos); }     /* Contact */

/* ===== 淺底（Home / About / Work / Expertise）→ 深字 ===== */
.menu-panel:nth-child(2) .panel-title,
.menu-panel:nth-child(2) .panel-sub-item,
.menu-panel:nth-child(2) .panel-arrow,
.menu-panel:nth-child(2) .panel-content-text,
.menu-panel:nth-child(3) .panel-title,
.menu-panel:nth-child(3) .panel-sub-item,
.menu-panel:nth-child(3) .panel-arrow,
.menu-panel:nth-child(3) .panel-content-text,
.menu-panel:nth-child(4) .panel-title,
.menu-panel:nth-child(4) .panel-sub-item,
.menu-panel:nth-child(4) .panel-arrow,
.menu-panel:nth-child(4) .panel-content-text,
.menu-panel:nth-child(5) .panel-title,
.menu-panel:nth-child(5) .panel-sub-item,
.menu-panel:nth-child(5) .panel-arrow,
.menu-panel:nth-child(5) .panel-content-text {
    color: var(--m-ink2026);
}

/* ===== 深底（People / Kuration / Press / Contact）→ 米白字 ===== */
.menu-panel:nth-child(6) .panel-title,
.menu-panel:nth-child(6) .panel-sub-item,
.menu-panel:nth-child(6) .panel-arrow,
.menu-panel:nth-child(7) .panel-title,
.menu-panel:nth-child(7) .panel-sub-item,
.menu-panel:nth-child(7) .panel-arrow,
.menu-panel:nth-child(8) .panel-title,
.menu-panel:nth-child(8) .panel-sub-item,
.menu-panel:nth-child(8) .panel-arrow,
.menu-panel:nth-child(9) .panel-title,
.menu-panel:nth-child(9) .panel-sub-item,
.menu-panel:nth-child(9) .panel-arrow {
    color: var(--m-cream2026);
}

.menu-panel:nth-child(6) .panel-content-text,
.menu-panel:nth-child(7) .panel-content-text,
.menu-panel:nth-child(8) .panel-content-text,
.menu-panel:nth-child(9) .panel-content-text {
    color: rgba(243, 236, 224, 0.88);
}

/* Close button × — 最右 Rooibos 深底，米白啱用 */
.panel-menu-close::before,
.panel-menu-close::after {
    background: var(--m-cream2026);
}

.menu-panel:hover {
    flex: 2;
}

.panel-title {
    font-family: 'Altone', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.panel-arrow {
    font-size: 1.2rem;
    transition: transform 0.3s;
}

.menu-panel:hover .panel-arrow {
    transform: translateX(-3px);
}

.panel-sub-items {
    margin-top: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.panel-sub-item {
    font-family: 'Altone', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.panel-sub-item:hover {
    opacity: 0.7;
}

.panel-sub-item .panel-arrow {
    font-size: 1.2rem;
}

.panel-content {
    margin-top: 3rem;
    opacity: 0;
    transition: opacity 0.4s ease 0.2s;
}

.menu-panel:hover .panel-content {
    opacity: 1;
}

.panel-content-text {
    font-family: 'Altone', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.5;
    max-width: 200px;
}

/* ========== HERO ========== */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: none;
    transition: filter 1.5s ease;
}

.hero-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* Toggle switch and scroll area */
.hero-bottom-controls {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    z-index: 3;
}

.hero-scroll {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--beige);
    opacity: 0;
    z-index: 2;
}

.hero-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}


.hero-title {
    font-family: 'Altone', sans-serif;
    font-size: clamp(2.5rem, 7vw, 6rem);
    font-weight: 400;
    color: var(--beige);
    text-align: center;
    letter-spacing: 0.05em;
    line-height: 1.2;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.hero-title .line {
    display: block;
    transform: translateY(120%);
    opacity: 0;
}

.hero-subtitle {
    font-size: 0.85rem;
    color: var(--beige);
    opacity: 0;
    margin-top: 2rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

/* ========== SECTIONS ========== */
section {
    padding: 10rem 4rem;
}

/* ========== ABOUT ========== */
.about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
    min-height: 100vh;
    background: #eee2d4; 
}

.about-label {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #000000;
    margin-bottom: 2rem;
    opacity: 0;
}

.about-text {
    font-family: 'Altone', sans-serif;
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-dark);
}

.about-text .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
}

.about-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    background: var(--m-olive);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2);
    transition: transform 0.1s;
}

@media (max-width: 768px) {
    .about-image {
        aspect-ratio: 3 / 4;
        max-height: 80vh;

    }
}

/* ========== SPECIALTIES ========== */
.specialties {
    background: var(--cream);
    padding: 10rem 4rem;
}

.section-heading {
    font-family: 'Altone', sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 400;
     color: #000000; 
    margin-bottom: 5rem;
    overflow: hidden;
}

.section-heading .line {
    display: block;
    transform: translateY(100%);
}

.specialty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
}

.specialty-item {
    opacity: 0;
    transform: translateY(60px);
}

.specialty-item h3 {
    font-family: 'Altone', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #000000;
    margin-bottom: 1rem;
}

.specialty-item p {
    font-size: 0.9rem;
    font-weight: 500;           /* 或 700 */
    letter-spacing: 0.01em;     /* 字變粗後抖返少少空間 */
    line-height: 1.8;
    color: var(--text-muted);
}

.specialty-item .line-accent {
    width: 30px;
    height: 1px;
    background: #000000;
    margin-bottom: 1.5rem;
}

/* ========== PORTFOLIO ========== */
.portfolio {
    padding: 0;
}

.portfolio-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.portfolio-row.reverse .portfolio-image-block {
    order: 2;
}

.portfolio-row.reverse .portfolio-desc-block {
    order: 1;
}

.portfolio-image-block {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

.portfolio-image-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.05);
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.portfolio-image-block:hover img {
    transform: scale(1);
}

.portfolio-image-block .portfolio-overlay-heading {
    position: absolute;
    top: 3rem;
    left: 3rem;
    z-index: 3;
    font-family: 'Altone', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.1;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

/* ========== PORTFOLIO DESC BLOCKS — La Palette 配色 ========== */

.portfolio-desc-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 3rem 4rem;
    position: relative;
}

/* 原本 burgundy → Cassis 深紫 */
.portfolio-desc-block.bg-burgundy {
    background: var(--m-plum);
}

/* 原本 olive → Pistachio 淺綠 */
.portfolio-desc-block.bg-olive {
    background: var(--m-olive);
}

.portfolio-desc-block.bg-slate {
    background: var(--slate);
}

/* ===== 預設文字（深色底用） ===== */
.portfolio-desc-block .portfolio-category {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.895);
    margin-bottom: 1rem;
}

.portfolio-desc-block .portfolio-title {
    font-family: 'Altone', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.portfolio-desc-block .portfolio-description {
    font-size: 0.9rem;
    font-weight: 500;           /* 或 700 */
    letter-spacing: 0.01em;     /* 字變粗後抖返少少空間 */
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.75);
    max-width: 450px;
}

/* ===== Plum 深梅底 → 米白字 ===== */
.portfolio-desc-block.bg-burgundy .portfolio-category {
    color: rgba(239, 227, 208, 0.6);
}

.portfolio-desc-block.bg-burgundy .portfolio-title {
    color: var(--m-cream);
}

.portfolio-desc-block.bg-burgundy .portfolio-description {
    color: rgba(239, 227, 208, 0.85);
}

/* ===== Olive 橄欖金底 → 米白字（跟 menu People 配搭） ===== */
.portfolio-desc-block.bg-olive .portfolio-category {
    color: rgba(239, 227, 208, 0.999);
}

.portfolio-desc-block.bg-olive .portfolio-title {
    color: var(--m-cream);
}

.portfolio-desc-block.bg-olive .portfolio-description {
    color: rgba(239, 227, 208, 0.9);
}
/* ========== PORTFOLIO FULL WIDTH ROW ========== */
.portfolio-row-full {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.portfolio-row-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.03);
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.portfolio-row-full:hover img {
    transform: scale(1);
}

.portfolio-row-full::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom right,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.3) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
}

.portfolio-full-overlay {
    position: absolute;
    top: 60px;
    left: 60px;
    bottom: auto;
    z-index: 2;
    background: none;
    padding: 0;
    max-width: 600px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.portfolio-full-overlay .portfolio-category {
    font-size: 0.75rem;
    font-weight: 700; 
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    margin-bottom: 0.5rem;
}

.portfolio-full-overlay .portfolio-title {
    font-family: 'Altone', sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
}

.portfolio-full-overlay .portfolio-description {
    font-size: 0.9rem;
    font-weight: 500;           /* 或 700 */
    letter-spacing: 0.01em;     /* 字變粗後抖返少少空間 */
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.75);
    max-width: 550px;
    margin-top: 1rem;
}

.portfolio-footer {
    padding: 3rem 4rem 8rem;
    text-align: center;
}

.portfolio-view-all {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--burgundy);
    text-decoration: none;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--burgundy);
    padding-bottom: 2px;
    transition: opacity 0.3s;
}

.portfolio-view-all:hover {
    opacity: 0.6;
}

/* ========== SERVICES SLIDER ========== */
/* ========== SERVICES SLIDER — Plum + Cream（跟 menu v5） ========== */
.services-slider-section {
    padding: 8rem 0;
    background: var(--m-plum);
    overflow: hidden;
}

.services-slider-header {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    padding: 0 4rem 4rem;
    border-bottom: 1px solid rgba(239, 227, 208, 0.25);
    margin-bottom: 4rem;
}

.services-slider-label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(239, 227, 208, 0.7);
}

.services-slider-desc {
    font-family: 'Altone', sans-serif;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--m-cream);
    max-width: 650px;
}

.services-slider-wrapper {
    position: relative;
    padding: 0 4rem;
}

.services-slider-track {
    display: flex;
    gap: 2.5rem;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: grab;
}

.services-slider-track:active {
    cursor: grabbing;
}

.service-slide {
    min-width: 340px;
    flex-shrink: 0;
}

.service-slide-image {
    width: 340px;
    height: 480px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.service-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.service-slide:hover .service-slide-image img {
    transform: scale(1.05);
}

.service-slide-title {
    font-family: 'Altone', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--m-cream);
    margin-top: 1.5rem;
}

.service-slide-title sup {
    font-family: 'Altone', sans-serif;
    font-size: 0.7rem;
    margin-left: 0.3rem;
    vertical-align: super;
    color: rgba(239, 227, 208, 0.5);
}

.services-slider-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3rem 4rem 0;
}

.slider-view-all {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--m-cream);
    text-decoration: none;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(239, 227, 208, 0.6);
    padding-bottom: 2px;
    transition: opacity 0.3s;
}

.slider-view-all:hover {
    opacity: 0.6;
}

.slider-arrows {
    display: flex;
    gap: 1rem;
}

.slider-arrow {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(239, 227, 208, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    background: transparent;
}

.slider-arrow:hover {
    background: var(--m-cream);
}

.slider-arrow:hover svg {
    stroke: var(--m-plum);
}

.slider-arrow svg {
    width: 20px;
    height: 20px;
    stroke: var(--m-cream);
    stroke-width: 1.5;
    fill: none;
}




/* ========== VIDEO SECTION ========== */
.video-section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 4rem;
}

.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.video-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(42, 26, 31, 0.6);
}

.video-container {
    position: relative;
    z-index: 2;
    width: 65%;
    max-width: 900px;
    aspect-ratio: 16/9;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(42, 26, 31, 0.5);
    opacity: 0;
    transform: translateY(40px);
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.video-section-label {
    position: absolute;
    top: 4rem;
    left: 4rem;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    z-index: 2;
}



/* ========== CONTACT / GET IN TOUCH ========== */
.contact {
    padding: 8rem 4rem;
    background: var(--cream);
}

.contact-heading {
    font-family: 'Altone', sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    color: #000000;
    margin-bottom: 5rem;
    text-align: center;
    opacity: 1;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    border-top: 1px solid rgba(107, 29, 46, 0.2);
    padding-top: 4rem;
}

.contact-brand-name {
    font-family: 'Altone', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    color: #000000;
    margin-bottom: 1.5rem;
}

.contact-social {
    display: flex;
    gap: 0.8rem;
}

.contact-social a {
    width: 34px;
    height: 34px;
    border: 1px solid #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    text-decoration: none;
    color: #000000;
}

.contact-social a:hover {
    background: #000000;
    border-color: #000000;
    color: var(--beige);
}

.contact-social a.icon-fill svg {
    width: 14px;
    height: 14px;
    fill: #000000;
    stroke: none;
    transition: all 0.3s;
}

.contact-social a.icon-fill:hover svg {
    fill: var(--beige);
}

.contact-social a.icon-stroke svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #000000;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.3s;
}

.contact-social a.icon-stroke:hover svg {
    stroke: var(--beige);
}

.contact-office-title {
    font-family: 'Altone', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: #000000;
    margin-bottom: 1.2rem;
}

.contact-office-address {
    font-size: 0.8rem;
    line-height: 2;
    color: var(--text-muted);
    font-weight: 400;
}

.contact-office-address a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

.contact-office-address a:hover {
    color: #000000;
}

/* ========== CONTACT HEADING — 靠右 ========== */
.contact {
    padding: 8rem 4rem 4rem;
    background: var(--cream);
}

.contact-heading {
    text-align: right;
    margin-bottom: 0;
}

/* ========== FOOTER ========== */
.footer-gosplan {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr auto;
    gap: 2rem;   /* 原本 3rem，6 欄會逼啲，建議收窄少少 */
    align-items: start;
    padding: 5rem 4rem 3rem;
    background: var(--cream);
    font-family: 'Altone', sans-serif;
    border-top: 1px solid var(--beige-dark);
}

.footer-brand-name {
    font-size: 1.3rem;
    font-weight: 400;
    color: #000000;
    margin-bottom: 1.5rem;
}

.footer-office-title {
    font-size: 1rem;
    font-weight: 500;
    color: #000000;
    margin-bottom: 1rem;
}

.footer-office-address {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 2;
    color: var(--text-muted);
}

.footer-office-address a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-office-address a:hover {
    color: #000000;
}

/* Locations + Copyright — 靠右 */
.footer-credits {
    text-align: right;
    align-self: end;
}

.footer-credits p {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.8;
    color: var(--text-dark);
    margin: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .footer-gosplan {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
    .footer-credits {
        text-align: left;
        align-self: start;
    }
}

@media (max-width: 768px) {
    .contact {
        padding: 6rem 2rem 3rem;
    }
    .footer-gosplan {
        grid-template-columns: 1fr;
        padding: 4rem 2rem 2.5rem;
    }
}

/* ========== RESPONSIVE ========== */

/* Tablet only (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .menu-panel {
        padding: 1.5rem 1rem;
        flex: 0.85;
    }
    .menu-panel:last-child {
        flex: 1.8;
        padding-right: 4rem;
    }
    .panel-title { font-size: 0.75rem; }
    .panel-sub-item { font-size: 0.75rem; }
    .contact-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }

    /* Tablet portfolio: image fills to match description height */
    .portfolio-image-block {
        aspect-ratio: unset;
        min-height: 500px;
    }
}

/* Tablet and below */
@media (max-width: 1024px) {
    .panel-title { font-size: 0.75rem; }
    .panel-sub-item { font-size: 0.75rem; }

    /* Tablet: logo 細啲 */
    .nav-logo img {
        height: 70px;
        margin-left: -15px;
    }

    .nav.scrolled .nav-logo img {
        height: 50px;
    }
}

@media (max-width: 768px) {
   .nav {
    padding: 1.2rem 2rem;
    transition: none;          /* mobile 完全唔要 padding animation */
}

    .nav.scrolled {
        padding: 1.2rem 2rem;
        box-shadow: none;
    }

    /* Mobile: logo 固定細 size，唔玩放大縮細 */
    .nav-logo img {
        height: 44px;              /* 想大啲/細啲自己調 */
        margin-left: 0;            /* 取消 desktop 嘅 -25px 偏移 */
        transition: none;          /* 取消縮放動畫 */
    }

    .nav.scrolled .nav-logo img {
        height: 44px;              /* scroll 前後一樣 */
    }

    .nav-links { display: none; }
    section { padding: 6rem 2rem; }
    .about { grid-template-columns: 1fr; gap: 3rem; }
    .specialty-grid { grid-template-columns: 1fr; }
    .portfolio-row { grid-template-columns: 1fr; }
    .portfolio-row.reverse .portfolio-image-block { order: 1; }
    .portfolio-row.reverse .portfolio-desc-block { order: 2; }
    .portfolio-image-block { aspect-ratio: 3/4; }
    .portfolio-image-block img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .portfolio-desc-block { padding: 3rem 2rem; }
    .services-slider-header { grid-template-columns: 1fr; padding: 0 2rem 3rem; }
    .services-slider-wrapper { padding: 0 2rem; }
    .services-slider-footer { padding: 2rem 2rem 0; }
    .service-slide { min-width: 280px; }
    .service-slide-image { width: 280px; height: 400px; }
    .video-container { width: 100%; border-radius: 0; }
    .video-section { padding: 8rem 0; }
    .contact { padding: 6rem 2rem; }
    .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .portfolio-footer { padding: 3rem 2rem 6rem; }
    .portfolio-image-block .portfolio-overlay-heading { font-size: 2rem; left: 2rem; top: 2rem; }

    /* Full-width portfolio row - mobile layout */
    .portfolio-row-full {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
    }
    .portfolio-row-full::after {
        display: none;
    }
    .portfolio-row-full img {
        position: relative;
        aspect-ratio: 3 / 4;
        width: 100%;
        height: auto;
    }
    .portfolio-full-overlay {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        background: var(--petrol);
        padding: 3rem 2rem;
        max-width: 100%;
        text-shadow: none;
    }

    /* Panel menu mobile */
    .panel-menu {
        flex-direction: column;
        overflow-y: auto;
    }
    .menu-panel {
        flex: none !important;
        height: auto;
        min-height: 60px;
        padding: 1.5rem 2rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }
    .menu-panel:hover { flex: none !important; }
    .panel-content { display: none; }
    .panel-menu-close {
        top: 1rem;
        right: 2rem;
    }
}

/* ========== PORTFOLIO LISTING PAGE ========== */

.portfolio-listing-page {
    padding: 0;
    margin: 0;
}

/* ===== STICKY LEFT / SCROLLING RIGHT SPLIT LAYOUT ===== */
.portfolio-listing-content {
    display: flex;
    align-items: flex-start;
    padding: 0;
    margin: 0;
}

/* Left Column: Sticky */
.portfolio-accordion-col {
    position: sticky;
    top: 0;
    width: 50%;
    height: 100vh;
    background: var(--beige);
    border-right: 1px solid var(--beige-dark);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

/* Inline Header (inside left column) */
.portfolio-listing-header-inline {
    padding: 7rem 4rem 1.5rem;
}

.portfolio-listing-label {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.portfolio-listing-title {
    font-family: 'Altone', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1.1;
    margin-bottom: 1rem;
}

.portfolio-listing-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    font-weight: 400;
}

/* ===== REGION GRID LAYOUT (Desktop: 3 columns) ===== */
.portfolio-region-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 1.5rem 4rem 4rem;
    gap: 0;
    column-gap: 2.5rem;
}

.region-grid-item {
    padding: 0;
    cursor: pointer;
    border-bottom: 1px solid var(--beige-dark);
}

.region-grid-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 0;
    transition: opacity 0.3s ease;
}

.region-grid-header:hover {
    opacity: 0.6;
}

.region-grid-name {
    font-family: 'Altone', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dark);
    white-space: nowrap;
    transition: color 0.3s ease;
}

.region-grid-count {
    font-family: 'Altone', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.region-grid-item.active .region-grid-name {
    color: var(--burgundy);
}

.region-grid-item.active .region-grid-count {
    color: var(--burgundy);
}

/* Toggle Button — Circular with border (Desktop: smaller) */
.region-grid-toggle {
    width: 22px;
    height: 22px;
    border: 1px solid var(--text-dark);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    margin-left: auto;
    transition: border-color 0.3s ease;
}

.region-grid-item.active .region-grid-toggle {
    border-color: var(--burgundy);
}

.region-toggle-icon {
    position: relative;
    width: 9px;
    height: 9px;
}

.region-toggle-icon::before,
.region-toggle-icon::after {
    content: '';
    position: absolute;
    background: var(--text-dark);
    transition: all 0.3s ease;
}

/* Horizontal line */
.region-toggle-icon::before {
    width: 9px;
    height: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Vertical line (forms the +) */
.region-toggle-icon::after {
    width: 1px;
    height: 9px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Active state: show — instead of + */
.region-grid-item.active .region-toggle-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.region-grid-item.active .region-toggle-icon::before,
.region-grid-item.active .region-toggle-icon::after {
    background: var(--burgundy);
}

/* ===== ACCORDION CONTENT (Hidden on Desktop) ===== */
.region-accordion-content {
    display: none;
}

/* ========== RIGHT COLUMN: Scrolling Project List (Desktop) ========== */

.portfolio-preview-col {
    width: 50%;
    min-height: 100vh;
    background: var(--burgundy);
    padding: 7rem 3rem 4rem;
    position: relative;
}

/* Region Project List */
.region-project-list {
    display: none;
}

.region-project-list.active {
    display: block;
}

.region-project-list-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(245, 240, 235, 0.2);
}

.region-project-list-title {
    font-family: 'Altone', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #fff;
    margin-bottom: 0.5rem;
}

.region-project-list-count {
    font-size: 0.75rem;
    color: rgba(245, 240, 235, 0.6);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.region-project-list-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.region-project-list-item {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(245, 240, 235, 0.1);
    transition: all 0.2s ease;
}

.region-project-list-item:last-child {
    border-bottom: none;
}

.region-project-list-item:hover {
    padding-left: 0.8rem;
}

.region-project-list-item:hover .region-project-name {
    color: var(--beige);
}

.region-project-name {
    font-family: 'Altone', sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: rgba(245, 240, 235, 0.85);
    line-height: 1.4;
    transition: color 0.2s ease;
    cursor: default;
}

/* Left column scrollbar */
.portfolio-accordion-col::-webkit-scrollbar {
    width: 4px;
}

.portfolio-accordion-col::-webkit-scrollbar-track {
    background: transparent;
}

.portfolio-accordion-col::-webkit-scrollbar-thumb {
    background: var(--beige-dark);
    border-radius: 2px;
}

/* ========== PORTFOLIO PAGE CONTACT SECTION ========== */
.portfolio-contact-section {
    padding: 8rem 4rem;
    background: var(--cream);
}

.portfolio-contact-section .contact-heading {
    opacity: 1;
}

/* ========== PORTFOLIO LISTING RESPONSIVE ========== */

/* ===== TABLET & MOBILE (≤1024px): Accordion Layout ===== */
@media (max-width: 1024px) {
    .portfolio-listing-content {
        flex-direction: column;
    }

    .portfolio-accordion-col {
        position: relative;
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: none;
    }

    /* Hide right column on tablet/mobile */
    .portfolio-preview-col {
        display: none;
    }

    .portfolio-listing-header-inline {
        padding: 6rem 2.5rem 2rem;
    }

    /* Single column accordion */
    .portfolio-region-grid {
        display: flex;
        flex-direction: column;
        padding: 0 0 2rem;
        gap: 0;
        column-gap: 0;
    }

    .region-grid-item {
        border-bottom: 1px solid var(--beige-dark);
    }

    .region-grid-item:first-child {
        border-top: 1px solid var(--beige-dark);
    }

    .region-grid-header {
        padding: 1.4rem 2.5rem;
        gap: 0.5rem;
    }

    .region-grid-name {
        font-size: 0.8rem;
    }

    .region-grid-count {
        font-size: 0.75rem;
    }

    /* Toggle: larger on tablet/mobile */
    .region-grid-toggle {
        width: 28px;
        height: 28px;
    }

    .region-toggle-icon {
        width: 11px;
        height: 11px;
    }

    .region-toggle-icon::before {
        width: 11px;
    }

    .region-toggle-icon::after {
        height: 11px;
    }

    /* Show accordion content when active — burgundy background */
    .region-accordion-content {
        display: none;
        background: var(--burgundy);
        padding: 1.5rem 2.5rem;
    }

    .region-grid-item.active .region-accordion-content {
        display: block;
    }

    .region-accordion-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .region-accordion-list-item {
        padding: 0.9rem 0;
        border-bottom: 1px solid rgba(245, 240, 235, 0.1);
    }

    .region-accordion-list-item:last-child {
        border-bottom: none;
    }

    .region-accordion-list-item .region-project-name {
        font-family: 'Altone', sans-serif;
        font-size: 1.05rem;
        font-weight: 400;
        color: rgba(245, 240, 235, 0.85);
        line-height: 1.4;
    }

    .portfolio-contact-section {
        padding: 6rem 2.5rem;
    }
}

@media (max-width: 768px) {
    .portfolio-listing-header-inline {
        padding: 5rem 2rem 2rem;
    }

    .region-grid-header {
        padding: 1.4rem 2rem;
    }

    .region-accordion-content {
        padding: 1.5rem 2rem;
    }

    .portfolio-contact-section {
        padding: 6rem 2rem;
    }

    .portfolio-contact-section .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== 移除 Nav Menu 預設樣式 ===== */
nav ul,
.main-nav ul,
#mainNav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li,
.main-nav ul li,
#mainNav ul li {
    list-style: none;
}

nav ul li::marker,
#mainNav ul li::marker {
    content: none;
}

nav a,
.main-nav a,
#mainNav a {
    text-decoration: none;
    color: inherit;
}


.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li::marker {
    content: none;
}


.hero h1,
.hero-title {
    font-size: clamp(2rem, 4.5vw, 3.5rem);  /* 想再細就調細啲數值 */
    letter-spacing: 0.02em;
}

/* Nav 同 Contact 用同一個左邊 padding（desktop only） */
@media (min-width: 769px) {
    .nav {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

.contact {
    padding-left: 4rem;
    padding-right: 4rem;
}

/* ===== KURATION SECTION ===== */
.kuration-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--umber-brown);
    padding: 0;                       /* 覆蓋全局 section padding */
}

/* 防止內容撐爆 grid column */
.kuration-section > * {
    min-width: 0;
}

/* ---------- 左邊 column ---------- */
.kuration-intro-col {
    position: relative;
}

/* Sticky 容器 — logo + 文字 + link 成組釘住 */
.kuration-intro-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 10rem 4.5vw 8vw;           /* top padding 避開 fixed nav */
}

/* Logo — 正常 flow 企喺頂 */
.kuration-logo {
    display: block;
    width: 350px;
    height: auto;
    filter: invert(1);
    padding: 2rem;
    margin-left: -2rem;
}

.kuration-logo-text {
    display: block;
    font-family: 'Altone', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.5em;
    color: #fff;
}

/* 文字 — 喺剩餘空間垂直置中 */
.kuration-intro-text {
    margin-top: auto;
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    line-height: 1.7;
    color: #fff;
    max-width: 30em;
}

/* Link — 強制實色 */
.kuration-section .kuration-link,
.kuration-section .kuration-link:link,
.kuration-section .kuration-link:visited,
.kuration-section .kuration-link:active {
    margin-top: 2.5rem;
    margin-bottom: auto;
    color: #fff !important;
    opacity: 1 !important;
    text-decoration: underline;
    font-weight: 500;
    text-decoration-color: #fff;
    text-underline-offset: 6px;
    width: fit-content;
    transition: opacity 0.3s;
}

.kuration-section .kuration-link:hover {
    opacity: 0.7 !important;
}

/* ---------- 右邊 column（scroll 圖片）---------- */
.kuration-images-col {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    padding: 8vw 0 8vw 6vw;           /* 右邊 0 = 圖片貼右邊界 */
}

.kuration-images-col img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .kuration-section {
        grid-template-columns: 1fr;
    }

    .kuration-intro-sticky {
        position: relative;           /* mobile 唔 sticky */
        height: auto;
        padding: 8rem 6vw 10vw;
    }

    .kuration-logo,
    .kuration-logo-text {
        width: 400px;
        margin-bottom: 2.5rem;
    }

    .kuration-intro-text {
        margin-top: 0;
    }

    .kuration-link {
        margin-bottom: 0;
    }

    .kuration-images-col {
        padding: 0 6vw 8vw;           /* 想 full-bleed 就改 0 0 8vw */
        gap: 5vw;
    }
}

/* ========== ABOUT PAGE ========== */

/* ---------- 頂部大字 Intro ---------- */
.about-hero {
    padding: 14rem 4rem 6rem;
    background: var(--beige);
}

.about-hero-intro {
    font-family: 'Altone', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.2rem);
    color: #7b4b31 !important;
    font-weight: 500 !important;
    line-height: 1.4;
    color: var(--text-dark);
    max-width: 26em;
}

/* ---------- 3 Column 主體 ---------- */
.about-page {
    display: grid;
    grid-template-columns: 30% 40% 30%;
    padding: 0;
    align-items: start;
    background: var(--beige);
}

.about-page > * {
    min-width: 0;
}

/* ---------- 左邊：打直 Sticky 圖 ---------- */
.about-page-left {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.about-page-left img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- 中間：Scroll 文字 ---------- */
.about-page-middle {
    padding: 10rem 4rem 8rem;
    background: var(--m-camel);
}

.about-page-label {
    font-size: 1rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-align: center;
    color: var(--m-cream);
    margin-bottom: 3rem;
}

.about-page-content p {
    font-family: 'Altone', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.9;
    color: var(--m-cream);
    margin-bottom: 1.8rem;
}

.about-page-content h2,
.about-page-content h3 {
    font-family: 'Altone', sans-serif;
    font-weight: 400;
    color: var(--text-dark);
    margin: 3rem 0 1.5rem;
}

/* ---------- 右邊：無限 loop 圖片（黑白） ---------- */
.about-page-right {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.about-loop-track {
    display: flex;
    flex-direction: column;
    animation: aboutLoop 40s linear infinite;   /* 速度自己調 */
}

.about-loop-track img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    filter: grayscale(100%);                    /* 黑白 */
}



@keyframes aboutLoop {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }       /* 圖出兩次，-50% = 無縫 */
}

/* Hover 暫停 */
.about-page-right:hover .about-loop-track {
    animation-play-state: paused;
}


/* ---------- ABOUT FULL PAGE SLIDER ---------- */
.about-slider {
    position: relative;
    aspect-ratio: 3/2;
    overflow: hidden;
    background: var(--cassis);
    padding: 0; 
}

.about-slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.about-slide {
    min-width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.about-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);       /* 黑白，唔要就刪 */
}

/* Arrows — 跟 services slider 風格 */
.about-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s;
}

.about-slider-arrow.prev { left: 2rem; }
.about-slider-arrow.next { right: 2rem; }

.about-slider-arrow svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
    stroke-width: 1.5;
    fill: none;
}

.about-slider-arrow:hover {
    background: #fff;
}

.about-slider-arrow:hover svg {
    stroke: var(--cassis);
}

/* Dots */
.about-slider-dots {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.8rem;
    z-index: 2;
}

.about-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s;
}

.about-slider-dot.active {
    background: #fff;
    transform: scale(1.3);
}

/* ---------- ABOUT PAGE MOBILE ---------- */
@media (max-width: 1024px) {

    /* 3 column → 打直 1 column */
    .about-page {
        grid-template-columns: 1fr;
    }

    /* 左圖：唔 sticky，變一張正常圖 */
    .about-page-left {
        position: relative;
        height: auto; 
        aspect-ratio: 16 / 10;              /* 想高啲/矮啲自己調 */
    }

    /* 中間文字：正常 padding */
    .about-page-middle {
        padding: 4rem 2rem;
    }

    .about-page-label {
        margin-bottom: 2rem;
    }

    /* 右邊 loop 圖：唔 sticky，固定高度繼續 loop */
    .about-page-right {
        position: relative;
        height: 100vh;  
        display: none;            /* 唔想 mobile 出呢欄就改 display: none */
    }

    /* Hero intro 收窄 padding */
    .about-hero {
        padding: 5rem 2rem 4rem;
        
    }

   /* ===== ABOUT SLIDER — MOBILE ===== */

    /* 唔逼任何比例，高度由圖片決定 */
    

    /* Arrows */
    .about-slider-arrow {
        width: 38px;
        height: 38px;
    }

    .about-slider-arrow.prev { left: 1rem; }
    .about-slider-arrow.next { right: 1rem; }

    /* Dots */
    .about-slider-dots {
        bottom: 1rem;
    }
}

/* ===== People Intro ===== */
.people-intro {
    padding: 14rem 4rem 6rem;
    
}

/* ===== Marquee ===== */
.people-marquee-section {
    padding: 4rem 0 8rem;
    overflow: hidden;
}

.people-marquee {
    overflow: hidden;
    width: 100%;
    cursor: grab;
}

.people-marquee.dragging {
    cursor: grabbing;
}

.people-marquee-track {
    display: flex;
    gap: 3rem;
    width: max-content;
    will-change: transform;
}

/* drag 時唔好意外 highlight / 開 link */
.people-marquee.dragging .person-card {
    pointer-events: none;
    user-select: none;
}



@keyframes people-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* 因為印咗兩次，捲一半就接返頭 */
}

/* ===== Card ===== */
.person-card {
    flex: 0 0 auto;
    width: 380px;
    text-decoration: none;
    color: inherit;
}

.person-card-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.person-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: transform 0.6s ease, filter 0.6s ease;
}

.person-card:hover .person-card-image img {
    transform: scale(1.04);
    /* 想 hover 變返彩色可以加: filter: grayscale(0); */
}

.person-card-name {
    margin-top: 1.5rem;
    font-size: 1.4rem;
    font-weight: 400;
}

.person-card-role {
    margin-top: 0.3rem;
    font-size: 0.9rem;
    opacity: 0.6;
}

/* 手機細啲 */
@media (max-width: 768px) {
    .person-card { width: 260px; }
    .people-intro {
        padding: 2rem 2rem 2rem;    /* 同 about-hero mobile 一樣 */
    }
    
  .people-intro p {
        font-family: 'Altone', sans-serif;
        font-size: clamp(1.8rem, 3.5vw, 2.2rem);
        font-weight: 400;
        line-height: 1.4;
        color: var(--text-dark);
        /* padding 刪走，spacing 由 .people-intro 控制 */
    }
}

/* ---------- Single Person ---------- */
.person-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    min-height: 100vh;
    margin-top: 8rem;                  /* 推低成個 block，避開 nav */
    border-top: 1px solid #1a1a1a;     /* 橫線 — 直線由呢度起步 */
    border-bottom: 1px solid #1a1a1a;   /* 加呢行 — 隔開 Get in Touch */
}

/* 左邊 sticky */
.person-sidebar {
    border-right: 1px solid #1a1a1a;   /* 中間直線 */
}

.person-sidebar__inner {
    position: sticky;
    top: 4rem;                         /* scroll 時距離 viewport 頂嘅位置 */
    padding: 2rem 4rem;     /* 左右 4rem，同 nav logo 對齊 */
}

.person-photo img {
    width: 100%;
    height: auto;
    display: block;
}

.person-name {
    font-size: 2rem;
    font-weight: 400;
    margin: 0 0 0.5rem; 
}

.person-title {
    margin: 0 0 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
}

/* 右邊 content */
.person-content {
    padding: 2rem 2rem 4rem; 
}

.person-content > *:empty {
    display: none;
}

.person-intro p {
    font-size: 2.2rem;
    line-height: 1.35;
    font-weight: 400;
    margin: 0;
}

.person-bio {
    margin-top: 4rem;
    padding-top: 2rem;
    max-width: 65ch;
    line-height: 1.6;
}

/* Project Highlights — override global section padding */
.person-highlights {
    padding: 2rem 0 0;                 /* 抵消 global section 嘅 10rem 4rem */
    margin-top: 4rem;
    border-top: 1px solid #1a1a1a;
}

.person-highlights__list {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    line-height: 2;
}

/* More People — override global section padding */
.more-people {
    padding: 2rem 0 0;
    margin-top: 4rem;
    border-top: 1px solid #1a1a1a;
}

.more-people__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
    max-width: 700px;    /* 限制成個 grid 闊度，卡自然細張啲 */
}

/* Image wrapper 鎖死 3:4 */
.more-people .people-card__image {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.more-people .people-card {
    text-decoration: none;
    color: inherit;
}

.more-people .people-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 人名 + title 喺圖上面 */
.more-people .people-card h3 {
    font-size: 1rem;
    font-weight: 400;
    margin: 1rem 0 0.25rem;
}

.more-people .people-card p {
    font-size: 0.85rem;
    margin: 0; 
}

/* Responsive */
@media (max-width: 900px) {
    .person-page {
        grid-template-columns: 1fr;
        margin-top: 3rem;              /* mobile nav 冇咁高，減少少 */
        padding: 0rem;      /* mobile nav 係 2rem padding */
    }

    .person-sidebar {
        border-right: none;
        border-bottom: 1px solid #1a1a1a;
    }

    .person-content {
        min-width: 0;        /* 唔准 more-people 撐闊個 column */
        max-width: 100%;
        overflow: hidden;    /* 保險：超出嘅嘢唔會影響 layout */
    }

    .person-sidebar__inner {
        position: static;              /* mobile 唔 sticky */
        padding: 2rem;          /* 左右 2rem，同 mobile nav logo 對齊 */
    }

    .person-intro p {
        font-size: 1.05rem;   /* 或者你想要嘅大小，e.g. 17px */
        line-height: 1.6;
    }
    .more-people__grid {
        display: flex;                 /* grid → flex 打橫排 */
        gap: 1rem;
        overflow-x: auto;              /* 打橫 scroll */
        max-width: none;
        margin-top: 1.5rem;

        /* scroll 手感 */
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;

        /* 出血位：卡可以碌到貼住螢幕邊 */
        margin-left: 0rem;
        margin-right: -2rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* 收埋 scrollbar（想見到就刪呢兩段） */
    .more-people__grid::-webkit-scrollbar {
        display: none;
    }
    .more-people__grid {
        scrollbar-width: none;
    }

    /* 卡固定細 size */
    .more-people .people-card {
        flex: 0 0 auto;
        width: 180px;                  /* 想再細/大自己調 */
        scroll-snap-align: start;
    }

    .more-people .people-card h3 {
        font-size: 0.9rem;
    }

    .more-people .people-card p {
        font-size: 0.75rem;
    }

}

/* ============ WORK HERO（背景大圖 + label + intro）============ */
.work-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    padding: 14rem 4rem 8rem;
    overflow: hidden;
}

.work-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.work-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(133, 133, 133, 0.1) 100%,
        rgba(15, 6, 6, 0.186) 100%
    );
}

.work-hero-inner {
    position: relative;
    z-index: 2;
}

.work-hero-label {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
}

.work-hero-intro {
    font-family: 'Altone', sans-serif;
    font-size: clamp(1.2rem, 2.0vw, 1.4rem);
    font-weight: 500;
    line-height: 1.1;
    color: #fff;
    max-width: 25em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    margin-bottom: 25rem;               /* desktop 推高文字 */
}

/* 後台冇上圖 → 白底深色字 fallback */
.work-hero.no-image {
    background: var(--beige);
    min-height: auto;
}
.work-hero.no-image .work-hero-label {
    color: var(--burgundy);
}
.work-hero.no-image .work-hero-intro {
    color: var(--text-dark);
    text-shadow: none;
}

/* ============ WORK PAGE ============ */
/* ⭐ 左右 padding 統一用呢個變數，filter 同 grid 必定對齊 */
.work-page {
    --work-pad: 4rem;
    padding: 5rem var(--work-pad) 80px;
    max-width: none;
    margin: 0;
}

/* ⭐ 唔准 filter / grid 自己有任何左右 margin、padding、max-width */
.work-page .work-filter,
.work-page .work-grid {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: none;
    width: 100%;
}

/* ---- Filter ---- */
.work-filter {
    margin-bottom: 50px;
}

.work-filter-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.work-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0;
    padding: 0;
}

.work-filter-btn,
.work-filter-btn:link,
.work-filter-btn:visited {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-dark);
    text-decoration: none;
    cursor: pointer;
    padding: 2px 0;
    opacity: 0.55;
    transition: opacity 0.25s;
}

.work-filter-btn:hover,
.work-filter-btn.is-active {
    opacity: 1;
    color: var(--text-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---- Grid ---- */
.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 90px 24px;
}

/* ⭐ 每格唔准縮埋一角，一定填滿成個 cell */
.work-grid > * {
    min-width: 0;
    width: 100%;
}

/* ---- ITEM 預設（mobile / touch）：16:9 圖 + caption 喺下面 ---- */
.work-item {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.work-item.is-hidden { display: none; }

/* ⭐ 清走 WordPress 自動加喺 figure / image block 嘅 margin */
.work-item figure,
.work-item .wp-block-image,
.work-item p {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
}

.work-item-media {
    width: 100%;
    aspect-ratio: 16 / 9;               /* project 圖 16:9 */
    overflow: hidden;
}

.work-item-media img {
    width: 100% !important;             /* ⭐ 逼張圖填滿，唔准跟 WP 原生闊度 */
    max-width: 100% !important;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    transition: transform 0.6s ease;
}

.work-item-placeholder {
    width: 100%;
    height: 100%;
    background: #d9d2cb;
}

/* Caption — 手機常駐，喺圖正下方 */
.work-item-overlay {
    display: flex;
    flex-direction: column;
    padding: 14px 0 0;
    color: var(--text-dark);
}

.work-item-category {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 4px;
}
.work-item-title {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
}
.work-item-location {
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 2px;
    opacity: 0.7;
}
.work-item-status {
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    font-style: italic;
    opacity: 0.7;
}
.work-item-excerpt {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: 8px;
    opacity: 0.85;
}

/* ---- Desktop（有 mouse）：金色 hover overlay ---- */
@media (hover: hover) and (pointer: fine) {
    .work-item {
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }
    .work-item-media {
        aspect-ratio: auto;
        height: 100%;
    }
    .work-item-overlay {
        position: absolute;
        inset: 0;
        padding: 24px 28px;
        background: #a3543a;
        color: #fff;
        opacity: 0;
        transition: opacity 0.35s ease;
        justify-content: flex-start;
    }
    .work-item-category { opacity: 1; }
    .work-item-location { opacity: 0.9; }
    .work-item-status {
        margin-top: auto;
        opacity: 0.8;
    }
    .work-item:hover .work-item-media img {
        transform: scale(1.04);
    }
    .work-item:hover .work-item-overlay,
    .work-item:focus .work-item-overlay {
        opacity: 1;
    }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .work-hero {
        padding: 10rem 2.5rem 4rem;
        min-height: 70vh;
    }
    .work-hero-intro {
        margin-bottom: 4rem;
    }
    .work-page {
        --work-pad: 2.5rem;             /* ⭐ iPad：filter + grid 一齊變 2.5rem */
        padding: 4rem var(--work-pad) 60px;
    }
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 60px 20px;
    }
}

@media (max-width: 640px) {
    .work-hero {
        min-height: auto;
        aspect-ratio: 2 / 3.5;          /* 保留你調嘅直度比例 */
        align-items: flex-start;        /* 保留你調嘅文字位置 */
        padding: 2rem;
    }
    .work-hero-label {
        margin-top: 3rem;
        margin-bottom: 1rem;
    }
    .work-hero-intro {
        margin-bottom: 0;
        font-size: 1.15rem;
        line-height: 1.5;
    }
    .work-page {
        --work-pad: 2rem;               /* ⭐ 手機：filter + grid 一齊變 2rem */
        padding: 3rem var(--work-pad) 60px;
    }
    .work-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .work-hero-bg::after {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.1) 0%,      /* 上面幾乎透明 */
            rgba(0, 0, 0, 0.35) 100%    /* 下面淺淺哋，夠襯字就得 */
        );
    }
}

/* ============ SINGLE PROJECT ============ */

/* ---- Hero ---- */
.project-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    padding: 14rem 4rem 6rem;
    overflow: hidden;
}

.project-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.project-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.55) 100%);
}

.project-hero-inner {
    position: relative;
    z-index: 2;
    color: #fff;
}

.project-hero-category {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: .5rem;
}

.project-hero-title {
    font-family: 'Altone', sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    line-height: 1.1;
}

.project-hero-location {
    margin-top: 0.5rem;
    font-size: 1rem;
    opacity: 0.85;
}

/* 冇 featured image → 白底 fallback */
.project-hero.no-image {
    background: var(--beige);
    min-height: auto;
    padding-top: 12rem;
}
.project-hero.no-image .project-hero-inner { color: var(--text-dark); }
.project-hero.no-image .project-hero-category { color: var(--burgundy); }

/* ---- Intro 大字 ---- */
.project-intro {
    padding: 8rem 4rem 4rem;
    background: var(--beige);
}

.project-intro p {
    font-family: 'Altone', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-dark);
    max-width: 26em;
}

/* ---- Details：credits 左 sticky / 文右 ---- */
.project-details {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 6rem;
    padding: 4rem 4rem 8rem;
    align-items: start;
    background: var(--beige);
}

.project-credits {
    position: sticky;
    top: 8rem;
    border-top: 1px solid var(--text-dark);
}

.credit-row {
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--beige-dark);
}

.credit-label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.credit-value {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-dark);
}

.credit-awards .credit-value p {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.project-description p {
    font-size: 1rem;
    line-height: 1.9;
    color: var(--text-dark);
    margin-bottom: 1.8rem;
    max-width: 65ch;
}

/* ---- Content / Gallery（block editor 內容）---- */
.project-content {
    padding: 0 4rem 6rem;
    background: var(--beige);
}

.project-content .wp-block-image,
.project-content figure:not(.wp-block-gallery figure) {
    margin: 0 0 2rem;
    max-width: none !important;
}

.project-content img {
    display: block;
    width: 100%;
    height: auto;
}

.project-content .wp-block-gallery {
    gap: 2rem;
    margin-bottom: 2rem;
}

.project-content p {
    font-size: 1rem;
    line-height: 1.9;
    max-width: 65ch;
    margin: 3rem auto;
}

/* ---- Related Work ---- */
.project-related {
    padding: 6rem 4rem 8rem;
    background: var(--cream);
    border-top: 1px solid var(--beige-dark);
}

.project-related-heading {
    font-family: 'Altone', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 3rem;
}

.project-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.related-card {
    text-decoration: none;
    color: inherit;
}

.related-card-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.related-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.related-card:hover .related-card-image img {
    transform: scale(1.04);
}

.related-card-title {
    font-size: 1.15rem;
    font-weight: 400;
    margin-top: 1rem;
}

.related-card-location {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .project-details {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 3rem 2.5rem 5rem;
    }
    .project-credits { position: static; }
    .project-intro { padding: 5rem 2.5rem 2rem; }
    .project-content { padding: 0 2.5rem 4rem; }
    .project-related { padding: 4rem 2.5rem 6rem; }
    .project-related-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .project-hero { padding: 10rem 2rem 3rem; min-height: 70vh; }
    .project-intro,
    .project-details,
    .project-content,
    .project-related { padding-left: 2rem; padding-right: 2rem; }
    .project-related-grid { grid-template-columns: 1fr; }
}

/* ============ PRESS PAGE — COMPLETE ============ */

/* ---- Hero ---- */
.press-hero {
    padding: 14rem 4rem 4rem;
    background: var(--beige);
}

.press-hero-image {
    width: 100%;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.press-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.press-hero-label {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin-bottom: 1.5rem;
}

.press-hero-intro {
    font-family: 'Altone', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.2rem);
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-dark);
    max-width: 26em;
}

/* ---- Layout：左年份 / 右 accordion ---- */
.press-page {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: start;
    padding: 2rem 4rem 8rem;
    background: var(--beige);
}

.press-page > * {
    min-width: 0;
}

/* ---- 左邊年份 column（sticky）---- */
.press-years-col {
    position: sticky;
    top: 8rem;
    /* 微調呢個數，令左邊細字同右邊大年份拍齊 */
    padding-top: 0.9em;
}

.press-years-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.press-year-link {
    font-family: 'Altone', sans-serif;
    font-size: 1.05rem;
    color: var(--text-dark);
    line-height: 1;
    padding: 0.55rem 0;
    cursor: pointer;
    transition: opacity 0.25s;
    width: fit-content;
}

.press-year-link:first-child {
    padding-top: 0;
}

.press-year-link:hover {
    opacity: 0.5;
}

.press-year-link.is-active {
    color: var(--text-muted);
}

/* ---- 右邊：年份 group（accordion）---- */
.press-year-group {
    border-bottom: 1px solid var(--beige-dark);
}

.press-year-group:first-child {
    border-top: none;
}

/* Header row：大年份 + 圓形 +/− toggle */
.press-year-header {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0 1.5rem;
    font-family: 'Altone', sans-serif;
    text-align: left;
    transition: opacity 0.25s;
}

.press-year-group + .press-year-group .press-year-header {
    padding-top: 2rem;
}

.press-year-header:hover {
    opacity: 0.6;
}

.press-year-heading {
    font-family: 'Altone', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1;                     /* 頂線同左邊年份對齊 */
    margin: 0;
}

/* Toggle — 圓形 +/− */
.press-year-toggle {
    width: 28px;
    height: 28px;
    border: 1px solid var(--text-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.4em;
    transition: border-color 0.3s ease;
}

.press-toggle-icon {
    position: relative;
    width: 11px;
    height: 11px;
}

.press-toggle-icon::before,
.press-toggle-icon::after {
    content: '';
    position: absolute;
    background: var(--text-dark);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.press-toggle-icon::before { width: 11px; height: 1px; }
.press-toggle-icon::after  { width: 1px; height: 11px; }

.press-year-group.is-open .press-year-toggle {
    border-color: var(--burgundy);
}

.press-year-group.is-open .press-toggle-icon::before,
.press-year-group.is-open .press-toggle-icon::after {
    background: var(--burgundy);
}

.press-year-group.is-open .press-toggle-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

/* ---- Dropdown body（動畫）---- */
.press-year-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.press-year-group.is-open .press-year-body {
    grid-template-rows: 1fr;
}

.press-year-body-inner {
    overflow: hidden;
    min-height: 0;
}

.press-year-group.is-open .press-year-body-inner {
    padding-bottom: 3rem;
}

/* ---- Card grid：一行 3 格，3:4 圖 ---- */
.press-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.press-card {
    min-width: 0;
    width: 100%;
}

.press-card-image {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--beige-dark);
}

.press-card-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.press-card:hover .press-card-image img {
    transform: scale(1.04);
}

.press-card-placeholder {
    width: 100%;
    height: 100%;
    background: var(--beige-dark);
}

/* 底部 gradient — 令 tag 同 link 睇得清 */
.press-card-image::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    pointer-events: none;
}

/* Digital / Print tag — 圖片左下角 */
.press-card-tag {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 100px;
    padding: 0.35em 1em;
    white-space: nowrap;
}

/* View PDF — 圖片右下角 */
.press-card-link,
.press-card-link:link,
.press-card-link:visited {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    padding-bottom: 2px;
    transition: opacity 0.3s;
}

.press-card-link:hover {
    opacity: 0.6;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .press-hero {
        padding: 10rem 2.5rem 3rem;
    }

    .press-page {
        grid-template-columns: 140px 1fr;
        padding: 1rem 2.5rem 6rem;
    }

    .press-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .press-hero {
        padding: 8rem 2rem 2rem;
    }

    /* 年份變打橫 scroll bar */
    .press-page {
        grid-template-columns: 1fr;
        padding: 0 2rem 5rem;
    }

    .press-years-col {
        position: sticky;
        top: 0;
        background: var(--beige);
        z-index: 10;
        margin: 0 -2rem 1.5rem;
        padding: 1rem 2rem;
        border-bottom: 1px solid var(--beige-dark);
    }

    .press-years-list {
        display: flex;
        gap: 1.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .press-years-list::-webkit-scrollbar { display: none; }

    .press-year-link {
        padding: 0.2rem 0;
        white-space: nowrap;
    }

    .press-year-toggle {
        width: 24px;
        height: 24px;
    }

    .press-toggle-icon {
        width: 9px;
        height: 9px;
    }

    .press-toggle-icon::before { width: 9px; }
    .press-toggle-icon::after  { height: 9px; }

    .press-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .press-card-tag {
        left: 0.6rem;
        bottom: 0.6rem;
        font-size: 0.5rem;
    }

    .press-card-link {
        right: 0.6rem;
        bottom: 0.6rem;
        font-size: 0.65rem;
    }
}
/* ============ PRESS FIX — 對齊 + 收窄行距 ============ */

/* ⭐ 核心：殺走全局 section padding，group 唔准有任何 padding/margin */
.press-year-group,
section.press-year-group {
    padding: 0 !important;
    margin: 0 !important;
}

/* Header — 上下統一窄 padding，大字同 +/− 垂直置中 */
.press-year-header {
    padding: 1.4rem 0;
    align-items: center;
}

/* 第一個 group：header 唔要 top padding，先可以同左邊年份齊頂 */
.press-year-group:first-child .press-year-header {
    padding-top: 0;
}

/* 覆蓋之前嗰條 2rem 規則 — 收窄年份之間距離 */
.press-year-group + .press-year-group .press-year-header {
    padding-top: 1.4rem;
}

/* align-items: center 咗，toggle 唔使再推落 */
.press-year-toggle {
    margin-top: 0;
}

/* 開咗嘅 group：卡 grid 同條 border 之間留少少位就夠 */
.press-year-group.is-open .press-year-body-inner {
    padding-bottom: 2rem;
}

/* ⭐ 左邊年份 — 同右邊大 2021 視覺置中對齊（desktop only） */
@media (min-width: 641px) {
    .press-years-col {
        padding-top: 0.95rem;   /* 微調呢個數：大個數 = 左邊向下移 */
    }
}
/* ============ PRESS — click 年份 scroll 對齊 ============ */
/* scroll 停嘅位置 = 左邊 sticky column 個 top（8rem） */
.press-year-group {
    scroll-margin-top: 7rem;
}

@media (max-width: 640px) {
    /* mobile 左邊年份變咗打橫 sticky bar，offset 要細啲 */
    .press-year-group {
        scroll-margin-top: 5rem;
    }
}

/* ============ CONTACT PAGE — 2026 ============ */

/* ---- Nav CTA（常駐右上，配合 mix-blend-mode: difference） ---- */
.nav-right {
    display: flex;
    align-items: center;
    gap: 2rem;
    pointer-events: auto;
}

/* ---- Nav CTA（常駐右上，配合 mix-blend-mode: difference） ---- */
.nav .nav-cta,
.nav .nav-cta:link,
.nav .nav-cta:visited,
.nav .nav-cta:active {
    font-family: 'Altone', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 500;
    color: #fff !important;               /* 逼文字同邊框一齊白色 → 負片後一齊黑 */
    text-decoration: none;
    border: 1px solid #fff !important;
    border-radius: 100px;
    padding: 0.7em 1.6em;
    white-space: nowrap;
    transition: background 0.3s, color 0.3s;
    pointer-events: auto;
}

.nav .nav-cta:hover {
    background: #fff !important;
    color: #000 !important;               /* hover：實色 pill，負片後黑底白字 */
}


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

/* ---- Hero ---- */
.contact-hero {
    padding: 14rem 4rem 5rem;
    background: var(--beige);
}

.contact-hero-label {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin-bottom: 1.5rem;
}

.contact-hero-title {
    font-family: 'Altone', sans-serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--text-dark);
}

.contact-hero-title .line { display: block; }

.contact-hero-sub {
    margin-top: 2rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.8;
    color: var(--text-muted);
    max-width: 42em;
}

/* ---- Hero 有圖：左文右圖 ---- */
.contact-hero.has-image {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.contact-hero-image {
    aspect-ratio: 4 / 3;               /* 想打直啲改 3 / 4 */
    overflow: hidden;
    border-radius: 2px;
}

.contact-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1024px) {
    .contact-hero.has-image {
        grid-template-columns: 1fr;    /* mobile 打直：文上圖下 */
        gap: 2.5rem;
    }
}

/* ---- Section label（統一小標） ---- */
.contact-section-label {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin-bottom: 2.5rem;
}

/* ---- 細分電郵管道 — La Palette 三色卡 ---- */
.contact-channels {
    padding: 4rem 4rem 6rem;
    background: var(--beige);
}

.channel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.channel-card {
    display: block;
    padding: 2.5rem 2rem;
    text-decoration: none;
    border-radius: 2px;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.channel-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* 三張卡跟 panel menu 配色邏輯：淺底深字 / 深底 Peony 字 */
.channel-general  { background: var(--cool-blue); }
.channel-general .channel-tag,
.channel-general .channel-title,
.channel-general .channel-email { color: var(--petrol); }

.channel-projects { background: var(--wasabi); }
.channel-projects .channel-tag,
.channel-projects .channel-title,
.channel-projects .channel-email { color: var(--burgundy); }

.channel-careers  { background: var(--cassis); }
.channel-careers .channel-tag,
.channel-careers .channel-title { color: var(--peony); }
.channel-careers .channel-email { color: rgba(250, 210, 225, 0.85); }

.channel-tag {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 1rem;
}

.channel-title {
    font-family: 'Altone', sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 2.5rem;
}

.channel-email {
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.channel-card:hover .panel-arrow {
    transform: translateX(4px);
}

/* ---- 辦事處 + 地圖 ---- */
.contact-offices {
    padding: 6rem 4rem;
    background: var(--cream);
    border-top: 1px solid var(--beige-dark);
}

.office-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}


/* Contact page — 4 offices, no map */
.office-grid-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
}

.office-grid-4 .office-card {
    border-top: 1px solid var(--text-dark);
    padding-top: 1.5rem;
}

@media (max-width: 1024px) {
    .office-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 2rem;
    }
}

@media (max-width: 640px) {
    .office-grid-4 {
        grid-template-columns: 1fr;
    }
}

.office-card { min-width: 0; }



.office-region {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.office-city {
    font-family: 'Altone', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.office-address {
    font-style: normal;
    font-size: 0.85rem;
    line-height: 2;
    color: var(--text-muted);
}

.office-reg {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    opacity: 0.8;
}

/* ---- 表單 Section：左 intro sticky / 右表單 ---- */
.contact-form-section {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 6rem;
    padding: 8rem 4rem 10rem;
    background: var(--beige);
    align-items: start;
}

.contact-form-intro {
    position: sticky;
    top: 8rem;
}

.contact-form-heading {
    font-family: 'Altone', sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-dark);
    margin-bottom: 2rem;
}

.contact-form-note {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.8;
    color: var(--text-muted);
}

.contact-form-note a {
    color: var(--burgundy);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid var(--burgundy);
    padding-bottom: 1px;
    transition: opacity 0.3s;
}

.contact-form-note a:hover { opacity: 0.6; }

/* ---- Form fields ---- */
.form-row { margin-bottom: 2rem; }

.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.form-field label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    font-family: 'Altone', sans-serif;
    font-size: 1rem;
    color: var(--text-dark);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--beige-dark);
    padding: 0.7rem 0;
    outline: none;
    border-radius: 0;
    transition: border-color 0.3s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-bottom-color: var(--burgundy);
}

.form-field textarea { resize: vertical; }

/* ---- Concept in Mind chips（跟附圖 pill 樣式） ---- */
.concept-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.concept-legend {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dark);
    margin-bottom: 1.2rem;
}

.concept-legend span {
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    margin-left: 0.5rem;
}

.concept-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.concept-chip {
    cursor: pointer;
}

.concept-chip input {
    /* 收埋原生 checkbox，但保留 a11y focus */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.concept-chip span {
    display: inline-block;
    font-family: 'Altone', sans-serif;
    font-size: 0.9rem;
    color: var(--text-dark);
    background: #fff;
    border: 1px solid var(--beige-dark);
    border-radius: 6px;
    padding: 0.9em 1.6em;
    transition: all 0.25s ease;
    user-select: none;
}

.concept-chip:hover span {
    border-color: var(--text-dark);
}

/* 選中 → Burgundy 實色 */
.concept-chip input:checked + span {
    background: var(--burgundy);
    border-color: var(--burgundy);
    color: var(--peony);
}

/* 鍵盤 focus ring */
.concept-chip input:focus-visible + span {
    outline: 2px solid var(--burgundy);
    outline-offset: 2px;
}

/* ---- Submit ---- */
.form-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Altone', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--peony);
    background: var(--cassis);
    border: none;
    border-radius: 100px;
    padding: 1.1em 2.4em;
    cursor: pointer;
    margin-top: 1rem;
    transition: background 0.3s, transform 0.3s;
}

.form-submit:hover {
    background: var(--burgundy);
    transform: translateY(-2px);
}

.form-submit .panel-arrow {
    color: inherit;
    transition: transform 0.3s;
}

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

/* ============ CONTACT PAGE RESPONSIVE ============ */
@media (max-width: 1024px) {
    .contact-hero { padding: 10rem 2.5rem 4rem; }
    .contact-channels { padding: 3rem 2.5rem 5rem; }
    .contact-offices { padding: 5rem 2.5rem; }

    .channel-grid,
    .office-grid { grid-template-columns: 1fr; gap: 2rem; }

    .contact-form-section {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 5rem 2.5rem 7rem;
    }

    .contact-form-intro { position: static; }
}

@media (max-width: 640px) {
    .contact-hero { padding: 8rem 2rem 3rem; }
    .contact-channels { padding: 2rem 2rem 4rem; }
    .contact-offices { padding: 4rem 2rem; }
    .contact-form-section { padding: 4rem 2rem 6rem; }

    .form-row-2col { grid-template-columns: 1fr; }

    .nav-cta {
        font-size: 0.65rem;
        padding: 0.6em 1.2em;
    }

    .concept-chip span {
        font-size: 0.85rem;
        padding: 0.8em 1.3em;
    }
}

/* ===== CF7 → Concept Chips 對接 ===== */
.concept-chips .wpcf7-checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.concept-chips .wpcf7-list-item {
    margin: 0;
}

.concept-chips .wpcf7-list-item label {
    cursor: pointer;
}

.concept-chips .wpcf7-list-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.concept-chips .wpcf7-list-item-label {
    display: inline-block;
    font-family: 'Altone', sans-serif;
    font-size: 0.9rem;
    color: var(--text-dark);
    background: #fff;
    border: 1px solid var(--beige-dark);
    border-radius: 6px;
    padding: 0.9em 1.6em;
    transition: all 0.25s ease;
    user-select: none;
}

.concept-chips .wpcf7-list-item label:hover .wpcf7-list-item-label {
    border-color: var(--text-dark);
}

/* 選中 → Burgundy 實色 */
.concept-chips input:checked + .wpcf7-list-item-label {
    background: var(--burgundy);
    border-color: var(--burgundy);
    color: var(--peony);
}

.concept-chips input:focus-visible + .wpcf7-list-item-label {
    outline: 2px solid var(--burgundy);
    outline-offset: 2px;
}

/* CF7 提交狀態訊息 */
.wpcf7-response-output {
    margin: 2rem 0 0 !important;
    padding: 1rem 1.5rem !important;
    border: 1px solid var(--burgundy) !important;
    font-size: 0.9rem;
}

/* ===== PROJECT GALLERY — 自家兩欄 layout，唔靠 WP ===== */
.project-content .wp-block-gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    margin: 0 0 2rem !important;
}

.project-content .wp-block-gallery figure.wp-block-image {
    width: calc(50% - 1rem) !important;
    max-width: calc(50% - 1rem) !important;
    margin: 0 !important;
    flex: none !important;
}

.project-content .wp-block-gallery figure.wp-block-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* 3 欄款 */
.project-content .wp-block-gallery.columns-3 figure.wp-block-image {
    width: calc(33.333% - 1.34rem) !important;
    max-width: calc(33.333% - 1.34rem) !important;
}

/* 手機單欄 */
@media (max-width: 600px) {
    .project-content .wp-block-gallery figure.wp-block-image,
    .project-content .wp-block-gallery.columns-3 figure.wp-block-image {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ===== 精準取消 WP global styles 嘅 layout 限制 ===== */
:root {
    --wp--style--root--padding-left: 0 !important;
    --wp--style--root--padding-right: 0 !important;
}

.wp-site-blocks {
    padding: 0 !important;
}

/* 只鎖住 landing page 嘅 constrained layout（唔掃 gallery） */
body .is-layout-constrained > * {
    max-width: none;
}

/* ===== Floating call button（mobile only） ===== */
.floating-call-btn {
    display: none;
}

@media (max-width: 768px) {
    .floating-call-btn {
        position: fixed;
        right: 20px;
        bottom: 24px;
        z-index: 999;

        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        border-radius: 50%;

        background: #6d1a2e;          /* 換返你個 brand 色 */
        color: #fff;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .floating-call-btn:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
}

/* ============ KURATION PAGE ============ */
.kur-page {
    /* ---- 顏色 ---- */
    --kur-bg: #FFFFFF;
    --kur-ink: #1E1B16;

    /* ---- 間距（想鬆啲/密啲改呢度就得） ---- */
    --kur-gap-lg: 6rem;     /* section 之間大距離 */
    --kur-gap-md: 4rem;     /* 中等距離 */
    --kur-pad-x: 4rem;      /* 左右 padding */

    background: var(--kur-bg);
    color: var(--kur-ink);
}

.kur-page section { padding: 0; }    /* 抵消全局 section padding */

.kur-page img { display: block; }

/* ---- Hero ---- */
.kur-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kur-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kur-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
}

.kur-hero.no-image {
    min-height: 70vh;
    background: var(--umber-brown);
}

.kur-hero-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.kur-hero-eyebrow,
.kur-hero-byline {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    opacity: 0.85;
}

.kur-hero-eyebrow { margin-bottom: 1.5rem; }
.kur-hero-byline  { margin-top: 1.5rem; }

.kur-hero-title {
    font-family: 'Altone', sans-serif;
    font-size: clamp(3rem, 8vw, 6.5rem);
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    line-height: 1;
}

/* ---- 通用：小 label / 內文 / quote ---- */
.kur-label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0.6;
    margin-bottom: 2.5rem;
}

.kur-intro p,
.kur-body-text p,
.kur-quote-body,
.kur-outro p {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 2;
    margin-bottom: 1.5rem;
}

.kur-quote,
.kur-quote-full blockquote {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    line-height: 1.4;
}

/* ---- Title + Intro ---- */
.kur-title-block {
    padding: var(--kur-gap-lg) 2rem var(--kur-gap-md);
    text-align: center;
}

.kur-heading {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.3;
    max-width: 18em;
    margin: 0 auto 3rem;
}

.kur-heading em {
    text-transform: none;
    letter-spacing: 0.02em;
}

.kur-intro {
    max-width: 620px;
    margin: 0 auto;
    text-align: left;
}

/* ---- Feature image ---- */
.kur-feature {
    padding: var(--kur-gap-md) var(--kur-pad-x) var(--kur-gap-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.kur-feature img { width: 100%; height: auto; }

.kur-feature figcaption {
    margin-top: 0.8rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-align: center;
    opacity: 0.5;
}

/* ---- Quote 1 + 圖（左右 split） ---- */
.kur-quote-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    padding: var(--kur-gap-lg) var(--kur-pad-x);
    max-width: 1300px;
    margin: 0 auto;
}

.kur-quote {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    margin: 0 0 2.5rem;
}

.kur-quote-body { max-width: 32em; }

.kur-quote-img img { width: 100%; height: auto; }

/* ---- Collage（3 張散擺圖） ---- */
.kur-collage {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    padding: var(--kur-gap-md) var(--kur-pad-x) var(--kur-gap-lg);
    max-width: 1300px;
    margin: 0 auto;
}

.kur-collage-item img { width: 100%; height: auto; }

.kur-collage-a { grid-column: 1 / 6; }
.kur-collage-b { grid-column: 7 / 13; margin-top: 7rem; }
.kur-collage-c { grid-column: 3 / 9; margin-top: -4rem; z-index: 2; }

/* ---- Body 2 ---- */
.kur-body-block {
    padding: var(--kur-gap-md) 2rem;
}

.kur-body-text {
    max-width: 620px;
    margin: 0 auto;
}

/* ---- Quote 2（full width 大字） ---- */
.kur-quote-full {
    padding: var(--kur-gap-lg) 2rem;
    text-align: center;
}

.kur-quote-full blockquote {
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    max-width: 20em;
    margin: 0 auto 2rem;
}

.kur-quote-full cite {
    font-family: 'Altone', sans-serif;
    font-style: normal;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.6;
}

/* ---- Full image ---- */
.kur-full-image {
    padding: var(--kur-gap-md) 0;
}

.kur-full-image img { width: 100%; height: auto; }

/* ---- Outro ---- */
.kur-outro {
    padding: var(--kur-gap-lg) 2rem;
    text-align: center;
}

.kur-outro p {
    max-width: 34em;
    margin: 0 auto 2rem;
}

.kur-outro-link,
.kur-outro-link:link,
.kur-outro-link:visited {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--kur-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--kur-ink);
    padding-bottom: 3px;
    transition: opacity 0.3s;
}

.kur-outro-link:hover { opacity: 0.5; }

/* ---- Product grid（4 x 2） ---- */
.kur-products {
    padding: var(--kur-gap-lg) var(--kur-pad-x) 12rem;
    max-width: 1400px;
    margin: 0 auto;
}

.kur-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6rem 4rem;
    margin-top: 3rem;
}

.kur-product-image {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.kur-product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;    /* 白底產品相自動融入背景 */
    transition: transform 0.5s ease;
}

.kur-product-card:hover .kur-product-image img {
    transform: scale(1.04);
}

.kur-product-name {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.9;
    text-align: center;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .kur-page {
        --kur-gap-lg: 6rem;
        --kur-gap-md: 4rem;
        --kur-pad-x: 2.5rem;
    }
    .kur-quote-row { grid-template-columns: 1fr; gap: 3rem; }
    .kur-product-grid { grid-template-columns: repeat(2, 1fr); gap: 4rem 2.5rem; }
}

@media (max-width: 640px) {
    .kur-page {
        --kur-gap-lg: 5rem;
        --kur-gap-md: 3rem;
        --kur-pad-x: 2rem;
    }
    .kur-hero { min-height: 70vh; }
    .kur-collage {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }
    .kur-collage-b,
    .kur-collage-c { margin-top: 0; }
    .kur-product-grid { gap: 3rem 1.5rem; }
    .kur-products { padding-bottom: 8rem; }
}

/* ============ KURATION SPACING FIX ============ */
/* 用 .kur-page 前綴提高 specificity，贏返 .kur-page section { padding: 0 } */

/* 1. Hero 之後 → Curated Objects 上方留空 */
.kur-page .kur-title-block {
    padding: var(--kur-gap-lg) 2rem var(--kur-gap-md);
}

/* 2. Feature image ↔ Quote 1 之間 */
.kur-page .kur-feature {
    padding: var(--kur-gap-md) var(--kur-pad-x) var(--kur-gap-lg);
}

.kur-page .kur-quote-row {
    padding: var(--kur-gap-lg) var(--kur-pad-x);
}

/* 3. Collage 三張圖 ↔ Body 2 之間 */
.kur-page .kur-collage {
    padding: var(--kur-gap-md) var(--kur-pad-x) var(--kur-gap-lg);
}

.kur-page .kur-body-block {
    padding: var(--kur-gap-md) 2rem;
}

/* 其他 section 一併還原 */
.kur-page .kur-quote-full {
    padding: var(--kur-gap-lg) 2rem;
}

.kur-page .kur-full-image {
    padding: var(--kur-gap-md) 0;
}

/* 4. Get in Touch ↔ The Collection 之間 */
.kur-page .kur-outro {
    padding: var(--kur-gap-lg) 2rem var(--kur-gap-md);
}

.kur-page .kur-products {
    padding: var(--kur-gap-md) var(--kur-pad-x) 12rem;
}



body {
    font-family: 'Altone', sans-serif;
}

/* ============ JOURNAL PAGE ============ */

/* ---- Hero / Intro ---- */
.journal-hero {
    padding: 14rem 4rem 4rem;
    background: var(--beige);
}

.journal-hero-label {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin-bottom: 1.5rem;
}

.journal-hero-intro {
    font-family: 'Altone', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.2rem);
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-dark);
    max-width: 26em;
}

/* ---- Listing ---- */
.journal-page {
    padding: 2rem 4rem 8rem;
    background: var(--beige);
}

.journal-list {
    padding: 0;
    max-width: 900px;          /* 內容照舊限 900px */
}

/* 每篇文：左 3:4 圖 / 右資訊 */
.journal-item {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 4rem;
    padding: 3.5rem 0;
    position: relative;        /* ⭐ 俾 full-width 線定位用 */
    border-top: none;          /* ⭐ 拆走原本嘅短線 */
}

/* ⭐ 頂線 — full width
   left: -4rem = 抵消 .journal-page 左邊 padding，
   令條線由螢幕最左邊開始，100vw 直去到最右 */
.journal-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -4rem;
    width: 100vw;
    border-top: 1px solid var(--beige-dark);
    pointer-events: none;
}

/* ⭐ 底線 — 只有最後一個 item 有，一樣 full width */
.journal-item:last-child {
    border-bottom: none;
}

.journal-item:last-child::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -4rem;
    width: 100vw;
    border-bottom: 1px solid var(--beige-dark);
    pointer-events: none;
}

/* 左邊圖 — 3:4 */
.journal-item-media {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.journal-item-media img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.journal-item-media:hover img {
    transform: scale(1.04);
}

.journal-item-placeholder {
    width: 100%;
    height: 100%;
    background: #d9d2cb;
}

/* 右邊資訊 */
.journal-item-info {
    display: flex;
    flex-direction: column;
    padding-top: 0.3rem;
    min-width: 0;
}

.journal-item-date {
    font-size: 0.95rem;
    color: var(--text-dark);
    margin-bottom: 0.2rem;
}

.journal-item-author {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
}

.journal-item-title {
    font-family: 'Altone', sans-serif;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 400;
    line-height: 1.35;
    max-width: 18em;
}

.journal-item-title a {
    color: var(--text-dark);
    text-decoration: none;
    transition: opacity 0.3s;
}

.journal-item-title a:hover {
    opacity: 0.6;
}

/* Read More ↗ — 推去底部 */
.journal-item-more,
.journal-item-more:link,
.journal-item-more:visited {
    margin-top: auto;
    padding-top: 2.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-dark);
    text-decoration: none;
    width: fit-content;
    transition: opacity 0.3s;
}

.journal-item-more em {
    font-style: italic;
}

.journal-item-more .journal-arrow {
    font-style: normal;
    transition: transform 0.3s ease;
}

.journal-item-more:hover {
    opacity: 0.6;
}

.journal-item-more:hover .journal-arrow {
    transform: translate(3px, -3px);
}

/* Pagination */
.journal-pagination {
    margin-top: 4rem;
    display: flex;
    gap: 1.5rem;
    font-size: 0.9rem;
}

.journal-pagination a,
.journal-pagination span {
    color: var(--text-dark);
    text-decoration: none;
}

.journal-pagination .current {
    color: var(--burgundy);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---- Single Journal ---- */
.journal-single {
    padding: 14rem 4rem 8rem;
    background: var(--beige);
}

.journal-single-header {
    max-width: 760px;
    margin: 0 auto 3rem;
}

.journal-single-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.journal-single-title {
    font-family: 'Altone', sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 400;
    line-height: 1.25;
    color: var(--text-dark);
}

.journal-single-hero {
    max-width: 1100px;
    margin: 0 auto 4rem;
}

.journal-single-hero img {
    width: 100%;
    height: auto;
    display: block;
}

.journal-single-content {
    max-width: 680px;
    margin: 0 auto;
}

.journal-single-content p {
    font-size: 1rem;
    line-height: 1.9;
    color: var(--text-dark);
    margin-bottom: 1.8rem;
}

.journal-single-content img {
    width: 100%;
    height: auto;
    margin: 2rem 0;
}

.journal-single-footer {
    max-width: 680px;
    margin: 4rem auto 0;
}

.journal-back-link,
.journal-back-link:link,
.journal-back-link:visited {
    font-size: 0.85rem;
    color: var(--burgundy);
    text-decoration: none;
    border-bottom: 1px solid var(--burgundy);
    padding-bottom: 2px;
    transition: opacity 0.3s;
}

.journal-back-link:hover { opacity: 0.6; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .journal-hero  { padding: 10rem 2.5rem 3rem; }
    .journal-page  { padding: 1rem 2.5rem 6rem; }

    .journal-item {
        grid-template-columns: 240px 1fr;
        gap: 2.5rem;
        padding: 2.5rem 0;
    }

    /* ⭐ 線嘅偏移跟返 .journal-page 左 padding (2.5rem) */
    .journal-item::before,
    .journal-item:last-child::after {
        left: -2.5rem;
    }

    .journal-single { padding: 10rem 2.5rem 6rem; }
}

@media (max-width: 640px) {
    .journal-hero { padding: 8rem 2rem 2rem; }
    .journal-page { padding: 1rem 2rem 5rem; }

    /* 手機：圖上文下 */
    .journal-item {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2.5rem 0;
    }

    /* ⭐ 線嘅偏移跟返 .journal-page 左 padding (2rem) */
    .journal-item::before,
    .journal-item:last-child::after {
        left: -2rem;
    }

    .journal-item-media {
        aspect-ratio: 3 / 4;
        max-width: 100%;
    }

    .journal-item-author { margin-bottom: 1.5rem; }

    .journal-item-more { padding-top: 1.5rem; }

    .journal-single { padding: 8rem 2rem 5rem; }
}

/* ===== Office 卡 — 用 Menu 色板 2026 v4 ===== */
:root {
    --m-sage-olive: #75703C;   /* 5 橄欖綠 Earthy Sage */
    --m-terracotta: #965F48;   /* 6 磚紅 Terracota */
    --m-navy:       #283044;   /* 7 深海軍藍 Navy */
    --m-wine:       #3A060C;   /* 8 深酒紅 Wine */
    --m-cream:      #EDE6D6;   /* 深底淺字用 */
}

/* ---- 兩欄 grid（原本 3 欄改 2 欄） ---- */
.channel-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 768px) {
    .channel-grid-2col {
        grid-template-columns: 1fr;
    }
}

/* ---- 4 張卡 — 跟 Menu 2026 v5 色板 ---- */
.office-card:nth-child(1) { background: var(--m-tangerine); }   /* Singapore  */
.office-card:nth-child(2) { background: var(--m-orangepeel); }    /* Dubai  */
.office-card:nth-child(3) { background: var(--m-pumpkin); }   /* Hong Kong  */
.office-card:nth-child(4) { background: var(--m-rooibos); }   /* Philippines  */

/* ---- 深底 → 全部文字轉淺色 ---- */
.office-card {
    color: var(--m-cream);
}

.office-card .channel-tag {
    color: var(--m-cream);
    opacity: 0.65;               /* region label 淡少少 */
}

.office-card .channel-title {
    color: var(--m-cream);
}

.office-card .office-address {
    color: var(--m-cream);
    font-weight: 500;
    opacity: 0.85;
}

/* tel / email links — 淺色 + 底線 */
.office-card .office-address a {
    color: var(--m-cream);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.office-card .office-address a:hover {
    opacity: 0.7;
}

/* ============ EXPERTISE PAGE ============ */
.exp-page {
    background: var(--beige);
}

.exp-page section { padding: 0; }    /* 抵消全局 section padding */
.exp-page img { display: block; }

/* ---- Hero（跟 kur-hero 風格，fallback 用 Plum） ---- */
.exp-hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.exp-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.exp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}

.exp-hero.no-image {
    min-height: 60vh;
    background: var(--m-plum);
}
.exp-hero.no-image::after { display: none; }

.exp-hero-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--m-cream);
}

.exp-hero-eyebrow {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 1.5rem;
}

.exp-hero-title {
    font-family: 'Altone', sans-serif;
    font-size: clamp(3rem, 8vw, 6.5rem);
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1;
}

/* ---- 通用 label ---- */
.exp-label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-dark);
    opacity: 0.6;
    margin-bottom: 4rem;
}

.exp-label-light {
    color: var(--m-cream);
    opacity: 0.7;
}

/* ---- Specialties：左右交錯圖文 ---- */
.exp-specialties {
    padding: 8rem 4rem !important;
    max-width: 1300px;
    margin: 0 auto;
}

.exp-spec-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    padding: 4rem 0;
}

.exp-spec-row.reverse .exp-spec-media { order: 2; }
.exp-spec-row.reverse .exp-spec-info  { order: 1; }

.exp-spec-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.exp-spec-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.exp-spec-row:hover .exp-spec-media img {
    transform: scale(1.04);
}

.exp-spec-placeholder {
    width: 100%;
    height: 100%;
    background: var(--beige-dark);
}

.exp-spec-num {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--m-umber);
    margin-bottom: 1.2rem;
}

.exp-spec-title {
    font-family: 'Altone', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 500;
    color: #7b4b31; 
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.exp-spec-text {
    font-size: 0.95rem;
    line-height: 1.9;
    font-weight: 500;
    color: var(--text-muted);
    max-width: 32em;
}

/* ---- Services：Plum 深底 + 圖片 grid ---- */
.exp-services {
    background: var(--m-plum);
    padding: 8rem 4rem 10rem !important;
}

.exp-services-intro {
    font-family: 'Altone', sans-serif;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--m-cream);
    max-width: 1200px;
    margin: 0 auto 5rem;
    text-align: center;
}

.exp-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem 2.5rem;
    max-width: 1300px;
    margin: 0 auto;
}

.exp-service-image {
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.exp-service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.exp-service-card:hover .exp-service-image img {
    transform: scale(1.05);
}

.exp-service-placeholder {
    width: 100%;
    height: 100%;
    background: rgba(239, 227, 208, 0.1);
}

.exp-service-name {
    font-family: 'Altone', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--m-cream);
    margin-top: 1.2rem;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .exp-specialties { padding: 6rem 2.5rem !important; }
    .exp-spec-row { gap: 3rem; padding: 3rem 0; }
    .exp-services { padding: 6rem 2.5rem 8rem !important; }
    .exp-services-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem; }
}

@media (max-width: 640px) {
    .exp-hero { min-height: 60vh; }
    .exp-specialties { padding: 5rem 2rem !important; }

    .exp-spec-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2.5rem 0;
    }
    /* mobile：全部圖上文下，唔交錯 */
    .exp-spec-row.reverse .exp-spec-media { order: 1; }
    .exp-spec-row.reverse .exp-spec-info  { order: 2; }

    .exp-services { padding: 5rem 2rem 6rem !important; }
    .exp-services-grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* ============ PEOPLE PAGE — Olive 綠底（跟 menu v5） ============ */

/* Intro + Marquee 兩個 section 一齊轉底色 */
.people-intro,
.people-marquee-section {
    background: var(--m-terra);
}

/* Intro 文字 → 米白 */
.people-intro,
.people-intro p {
    color: var(--m-cream);
    font-weight: 500;
}

/* Card 名 + 職位 → 米白 */
.person-card-name {
    color: var(--m-cream);
    font-weight: 500;
}

.person-card-role {
    color: var(--m-cream);
    font-weight: 500;
    opacity: 0.7;
}

/* ============ GLOBAL — EYEBROW LABELS 加大加粗 ============ */
.about-label,
.about-page-label,
.work-hero-label,
.press-hero-label,
.journal-hero-label,
.contact-hero-label,
.contact-section-label,
.portfolio-listing-label,
.video-section-label,
.kur-label,
.kur-hero-eyebrow,
.kur-hero-byline,
.exp-label,
.exp-hero-eyebrow,
.exp-spec-num,
.project-hero-category,
.portfolio-category,
.portfolio-desc-block .portfolio-category,
.portfolio-full-overlay .portfolio-category,
.work-item-category,
.channel-tag,
.office-region,
.credit-label,
.hero-subtitle,
.hero-scroll {
    font-size: 0.85rem !important;      /* 原本大多係 0.7rem，想再大改 0.9rem / 1rem */
    font-weight: 600 !important;        /* 加粗 */
    letter-spacing: 0.25em;             /* 字距微收，加大咗字唔會太散 */
}



.about-page-label {
    font-size: 1.1rem !important;
}

/* ============ NAV FIX — Dark gradient + 白色元素 ============ */

/* 1. 取消負片效果，加深色 gradient 背景 */
.nav {
    mix-blend-mode: normal !important;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.35) 60%,
        rgba(0, 0, 0, 0) 100%
    ) !important;
}

/* Scroll 咗都保持 gradient（想 scroll 後實色啲可以加深） */
.nav.scrolled {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.45) 70%,
        rgba(0, 0, 0, 0) 100%
    ) !important;
}

/* 2. Logo — 鎖死白色（黑色 logo 檔 invert 做白） */
.nav-logo img {
    filter: invert(1) !important;
}

/* 3. Hamburger 三條線 — 鎖死白色 */
.hamburger span {
    background: #fff !important;
}

/* 4. "Connect with us" CTA — 鎖死白字白框 */
.nav .nav-cta,
.nav .nav-cta:link,
.nav .nav-cta:visited,
.nav .nav-cta:active {
    color: #fff !important;
    border-color: #fff !important;
}

.nav .nav-cta:hover {
    background: #fff !important;
    color: #000 !important;
}


/* ============ NAV — ABOUT / PRESS / JOURNAL：黑元素 + 全透明背景 ============ */

/* 1. 背景完全透明 — scroll 前後都係 */
body.page-about .nav,
body.page-press .nav,
body.page-journal .nav,
body.page-contact .nav,
body.page-about .nav.scrolled,
body.page-press .nav.scrolled,
body.page-journal .nav.scrolled,
body.page-contact .nav.scrolled {
    background: none !important;
    box-shadow: none !important;
}

/* 2. Logo — 黑色（取消 invert，用返原本黑色 logo 檔） */
body.page-about .nav-logo img,
body.page-press .nav-logo img,
body.page-journal .nav-logo img,
body.page-contact .nav-logo img {
    filter: none !important;
}

/* 3. Hamburger 三條線 — 黑色 */
body.page-about .hamburger span,
body.page-press .hamburger span,
body.page-journal .hamburger span,
body.page-contact .hamburger span {
    background: #000 !important;
}

/* 4. "Connect with us" CTA — 黑字黑框 */
body.page-about .nav .nav-cta,
body.page-press .nav .nav-cta,
body.page-journal .nav .nav-cta,
body.page-contact .nav .nav-cta {
    color: #000 !important;
    border-color: #000 !important;
}

body.page-about .nav .nav-cta:hover,
body.page-press .nav .nav-cta:hover,
body.page-journal .nav .nav-cta:hover,
body.page-contact .nav .nav-cta:hover {
    background: #000 !important;
    color: #fff !important;
}

/* ===== KURATION — Hero title / Heading 轉圖片 ===== */
.kur-hero-title-img {
    display: block;
    width: clamp(260px, 50vw, 620px);   /* 自己調：min / 理想 / max */
    height: auto;
    margin: 0 auto;
    filter: invert(1);                   /* 黑色圖轉白，襯深色 hero；圖本身白色就刪呢行 */
}

.kur-heading-img {
    display: block;
    width: clamp(240px, 40vw, 520px);
    height: auto;
    margin: 0 auto;
}

/* heading 用圖時，拆走文字款嘅 max-width 限制 */
.kur-heading.has-image {
    max-width: none;
    margin-bottom: 3rem;
}

@media (max-width: 640px) {
    .kur-hero-title-img { width: 70vw; }
    .kur-heading-img    { width: 65vw; }
}

/* ============ NAV — PEOPLE：拆走 gradient shadow，保留白色元素 ============ */
body.page-people .nav,
body.page-people .nav.scrolled {
    background: none !important;
    box-shadow: none !important;
}
/* ============ SINGLE PROJECT — 字搬落圖下面 + 刪 gradient ============ */

/* 1. 刪走 hero 圖上面嘅 gradient */
.project-hero-bg::after {
    display: none;
}

/* 2. Hero 變純圖，唔使再預位俾文字 */
.project-hero {
    min-height: 100vh;      /* 想矮啲可以改 80vh 或者 aspect-ratio */
    padding: 0;
    display: block;
}

/* 3. 圖下面嘅 info 段 — 白底深色字 */
.project-hero-info {
    padding: 5rem 4rem 0;
    background: var(--beige);
}

.project-hero-info .project-hero-category {
    color: var(--burgundy);
    opacity: 1;
    margin-bottom: 0.5rem;
}

.project-hero-info .project-hero-title {
    font-family: 'Altone', sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--text-dark);
}

.project-hero-info .project-hero-location {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: var(--text-muted);
}

/* 冇 featured image → info 段自己推開 fixed nav */
.project-hero-info.no-image {
    padding-top: 12rem;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .project-hero { min-height: 70vh; }
    .project-hero-info { padding: 3.5rem 2.5rem 0; }
    .project-hero-info.no-image { padding-top: 10rem; }
}

@media (max-width: 640px) {
    .project-hero { min-height: 60vh; }
    .project-hero-info { padding: 3rem 2rem 0; }
    .project-hero-info.no-image { padding-top: 8rem; }
}
/* ============ FOOTER — 加闊 office 欄，Inc 唔准跌行 ============ */
.footer-gosplan {
    grid-template-columns: 1fr 1.1fr 1.1fr 1.1fr 1.1fr auto;  /* brand 欄收窄，office 欄加闊 */
    gap: 1.5rem;                                               /* gap 收細，欄位自然有多啲位 */
}

/* ============ LANDING PAGE 微調 ============ */

/* 1️⃣ About label + Our Specialties + 三個 specialty 標題 → 粗體啡色 */
.specialties .section-heading,
.specialty-item h3 {
    color: #7b4b31 !important;
    font-weight: 500 !important;
}

/* 順手：三個標題上面嗰條小橫線都轉埋啡色（唔想要就刪） */
.specialty-item .line-accent {
    background: #7b4b31;
}

/* 2️⃣ 第三個 Residential full-width 圖 — 減淡 gradient */
.portfolio-row-full::after {
    background: linear-gradient(
        to bottom right,
        rgba(0, 0, 0, 0.35) 0%,     /* 原本 0.6 */
        rgba(0, 0, 0, 0.12) 40%,    /* 原本 0.3 */
        transparent 60%             /* 原本 70%，提早收 */
    );
}

/* 3️⃣ Expertise (Our Services) intro 文字拉闊 */
.services-slider-desc {
    max-width: 900px;               /* 原本 650px，想再闊改 1000px */
}

/* 4️⃣ Kuration 啡色背景加長 */
.kuration-section {
    padding-bottom: 8rem;           /* 底部多咗一截 umber-brown */
}

.portfolio-row-full::after { display: none; }


.kuration-images-col {
    padding: 8vw 0 14vw 6vw;    /* 原本 8vw 0 8vw 6vw，bottom 加大 */
}


.about-label {
    color: #7b4b31 !important;
    font-weight: 700 !important;   /* 冇 700 字型檔 → 瀏覽器自己人工加粗 */
}

.about-text .word-bold {
    font-weight: 700;        /* → Altone-Medium */
    color: #434242;          /* 啡色，唔想要就刪呢行 */
}

/* ============ LANDING PAGE — 轉 Menu 2026 橙色系 ============ */

/* 1️⃣ Portfolio desc blocks — 原紫(plum) / 原綠(olive) → 橙系深淺有序 */
/* 原紫色 block → Pumpkin（較深） */
.portfolio-desc-block.bg-burgundy {
    background: var(--m-pumpkin);
}

/* 原綠色 block → Tangerine（較淺，同 menu People 一樣） */
.portfolio-desc-block.bg-olive {
    background: var(--m-tangerine);
}

/* 2️⃣ Expertise slider — 跟 menu Expertise 嘅 Peach Pink */
.services-slider-section {
    background: var(--m-peachpink);
}

/* ============ EXPERTISE SLIDER — 文字轉白色 ============ */
.services-slider-header {
    border-bottom-color: rgba(255, 255, 255, 0.35);
}

.services-slider-label {
    color: rgba(255, 255, 255, 0.8);
}

.services-slider-desc,
.service-slide-title {
    color: #fff;
}

.service-slide-title sup {
    color: rgba(255, 255, 255, 0.6);
}

.slider-view-all {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

.slider-arrow {
    border-color: rgba(255, 255, 255, 0.6);
}

.slider-arrow svg {
    stroke: #fff;
}

.slider-arrow:hover {
    background: #fff;
}

.slider-arrow:hover svg {
    stroke: var(--m-peachpink);   /* hover 時箭嘴轉返 section 底色 */
}

/* 3️⃣ Kuration section — 跟 menu Kuration 嘅 Orange Peel */
.kuration-section {
    background: var(--m-orangepeel);
}

/* ============ ABOUT PAGE — 中間欄轉 Menu About 底色（Vanilla） ============ */
.about-page-middle {
    background: var(--m-vanilla);
}

/* Vanilla 係淺底 → 文字轉深色（跟 menu 淺底深字邏輯） */
.about-page-label {
    color: var(--m-ink2026);
}

.about-page-content p {
    color: var(--m-ink2026);
}


/* ============ WORK HOVER OVERLAY — 轉 Menu Work 底色（Coral Pink） ============ */
@media (hover: hover) and (pointer: fine) {
    .work-item-overlay {
        background: var(--m-coral);
        color: var(--m-ink2026);        /* 淺底 → 深字，跟 menu 邏輯 */
    }
}

/* ============ EXPERTISE PAGE — Services 紫底轉 Menu Expertise 橙色 ============ */
.exp-services {
    background: var(--m-peachpink);
}
/* 文字轉純白（可選） */
.exp-services .exp-label-light {
    color: #fff;
    opacity: 0.8;
}

.exp-services-intro,
.exp-service-name {
    color: #fff;
}

/* placeholder 圖底色微調襯橙底 */
.exp-service-placeholder {
    background: rgba(255, 255, 255, 0.15);
}

/* ============ KURATION QUOTES — 轉返 Altone 內文字體（斜體） ============ */
.kur-quote,
.kur-quote-full blockquote {
    font-family: 'Altone', sans-serif;
    font-style: normal;
    font-weight: 400;

}

/* ============ PEOPLE PAGE — 轉 Menu People 底色（Tangerine） ============ */
.people-intro,
.people-marquee-section {
    background: var(--m-tangerine);
}

/* ============ PEOPLE PAGE — 文字轉純白 ============ */
.people-intro,
.people-intro p {
    color: #fff;
}

.person-card-name {
    color: #fff;
}

.person-card-role {
    color: #fff;
    opacity: 0.85;      /* 原本 0.7，調高咗令佢冇咁灰 */
}

/* ================================================================
   ===== MOBILE FIX — 一定要放喺 style.css 最底 =====
   ================================================================ */



/* ---- Tablet footer（769–1024）：兩欄 ---- */
@media (max-width: 1024px) {
    .footer-gosplan {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem 2rem;
    }
    .footer-credits {
        grid-column: 1 / -1;
        text-align: left;
        align-self: start;
    }
}

@media (max-width: 768px) {

   

    /* ---- 3. 行距收窄 ---- */
    /* 內文類（原本 1.8–2） */
    .specialty-item p,
    .about-text,
    .portfolio-desc-block .portfolio-description,
    .portfolio-full-overlay .portfolio-description,
    .services-slider-desc,
    .kuration-intro-text,
    .about-hero-intro,
    .about-page-content p,
    .work-hero-intro,
    .project-intro p,
    .project-description p,
    .project-content p,
    .credit-value,
    .press-hero-intro,
    .journal-hero-intro,
    .journal-single-content p,
    .contact-hero-sub,
    .contact-form-note,
    .kur-intro p,
    .kur-body-text p,
    .kur-quote-body,
    .kur-outro p,
    .exp-spec-text,
    .exp-services-intro,
    .person-bio,
    .person-intro p,
    .people-intro p {
        line-height: 1.55;
    }

    /* 地址類（原本 2） */
    .office-address,
    .footer-office-address,
    .contact-office-address,
    .person-highlights__list {
        line-height: 1.6;
    }

    /* 大標題 */
    .section-heading,
    .contact-heading,
    .hero-title,
    .portfolio-desc-block .portfolio-title,
    .portfolio-full-overlay .portfolio-title,
    .project-hero-info .project-hero-title,
    .contact-hero-title,
    .press-year-heading {
        line-height: 1.15;
    }

    /* 內文顏色深少少，幼字唔會咁灰（唔想要就刪） */
    .specialty-item p {
        color: var(--text-dark);
        font-size: 0.95rem;
    }

    /* ---- 4. Section 間距（Our Specialties 上面成大截白） ---- */
    .specialties {
        padding: 5rem 2rem;              /* 原本 10rem 4rem，mobile rule 打唔贏佢 */
    }
    .section-heading {
        margin-bottom: 3rem;             /* 原本 5rem */
    }
    .specialty-grid {
        gap: 3.5rem;                     /* 原本 4rem */
    }
    .specialty-item h3 {
        font-size: 1.4rem;
        margin-bottom: 0.8rem;
    }
    .specialty-item .line-accent {
        margin-bottom: 1.2rem;
    }
    .contact {
        padding: 5rem 2rem 2rem;
    }

    /* ---- 5. Footer：brand 一行、office 2x2、credits 一行 ---- */
    .footer-gosplan {
        grid-template-columns: 1fr 1fr;  /* 想單欄就改 1fr */
        gap: 2.5rem 1.5rem;
        padding: 3.5rem 2rem 2.5rem;
    }
    .footer-gosplan > *:first-child,     /* brand + social */
    .footer-credits {
        grid-column: 1 / -1;
    }
    .footer-credits {
        text-align: left;
        align-self: start;
    }
    .footer-office-title {
        font-size: 1rem;
        margin-bottom: 0.6rem;
    }
    .footer-office-address {
        font-size: 0.8rem;
        white-space: normal;             /* 任佢換行，唔准 crop */
        overflow-wrap: anywhere;
    }
    .footer-brand-name {
        margin-bottom: 1rem;
    }

    /* ---- 6. Mobile menu：字大啲、粗啲 ---- */
    .menu-panel {
        padding: 1.4rem 2rem;
        min-height: 0;
    }
    .panel-title {
        font-size: 1.15rem;              /* 原本 0.75rem */
        font-weight: 500;
        letter-spacing: 0.04em;
    }
    .panel-sub-items {
        margin-top: 0.9rem;
        gap: 0.8rem;
    }
    .panel-sub-item {
        font-size: 0.95rem;              /* 原本 0.75rem */
        font-weight: 500;
    }
    .panel-arrow {
        font-size: 1.1rem;
    }
}

/* ---- 7.（可選）Work hero 手機版文字壓住圖好難睇 → gradient 深少少 ---- */
@media (max-width: 640px) {
    .work-hero-bg::after {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.5) 0%,
            rgba(0, 0, 0, 0.2) 55%,
            rgba(0, 0, 0, 0.3) 100%
        );
    }
}

/* About + People intro：手機細粒啲 */
@media (max-width: 768px) {
  .about-hero-intro,
  .about-hero-intro p,
  .people-intro,
  .people-intro p {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }
}

/* ================================================================
   ===== FONT WEIGHT MAP — 大字 Thin(400) / 細字 Light(500) =====
   ================================================================ */

/* 大字但原本寫 500（或冇寫）→ 轉 Thin */
.about-hero-intro,
.exp-spec-title,
.specialties .section-heading,
.specialty-item h3,
.people-intro p,
.kuration-intro-text {          /* ← 加呢行 */
    font-weight: 400 !important;
}

/* 大字但原本寫 500 → 轉 Thin */
.about-hero-intro,
.exp-spec-title,
.specialties .section-heading,
.specialty-item h3,
.people-intro p {
    font-weight: 400 !important;
}

/* 細字但原本寫 400 → 轉 Light */
.panel-title,
.panel-sub-item,
.contact-office-address,
.portfolio-listing-subtitle,
.region-grid-name,
.region-grid-count,
.more-people .people-card h3 {
    font-weight: 500;
}

/* 手機：呢三段 intro 縮到 17px 左右，Thin 太幼 → 轉 Light */
@media (max-width: 768px) {
    .about-hero-intro,
    .people-intro p,
    .person-intro p {
        font-weight: 500 !important;
    }
}

/* ===== MOBILE MENU — 交叉轉深色（desktop 不變） ===== */
@media (max-width: 768px) {
    .panel-menu-close::before,
    .panel-menu-close::after {
        background: var(--m-ink2026);   /* 深棗紅，同 menu 淺底字一樣 */
    }
}