/* ============================================
   style.css — 全站單一共用 CSS
   （logo、右上角選單、手機漢堡選單、reset、
    index 頁 slideshow、project detail page 樣式）
   所有頁面都 link 返呢一個 file 就夠
   ============================================ */

:root {
    --nav-text-color: #ffffff;
    --nav-icon-bg: rgba(0, 0, 0, 0.3);
    --nav-icon-border: rgba(255, 255, 255, 0.4);
    --mobile-nav-bg: rgba(0, 0, 0, 0.55);
    --mobile-nav-border: rgba(255, 255, 255, 0.15);
    --mobile-nav-hover-bg: rgba(255, 255, 255, 0.08);
    --logo-filter: none;
}

/* 淺色底頁面（例如 project detail page）用呢個 class 喺 <body> 度
   覆蓋返啱嘅色調，nav 就會自動變深色字 */
body.light-nav {
    --nav-text-color: #111111;
    --nav-icon-bg: rgba(255, 255, 255, 0.6);
    --nav-icon-border: rgba(0, 0, 0, 0.3);
    --mobile-nav-bg: rgba(255, 255, 255, 0.9);
    --mobile-nav-border: rgba(0, 0, 0, 0.1);
    --mobile-nav-hover-bg: rgba(0, 0, 0, 0.05);
    --logo-filter: invert(1);
}

/* Hero 用深色/鮮艷相片做背景時，加呢個 class 喺 .hero 度，
   等 hero 入面嘅 logo/nav 變返白色（唔理成個 page 主題係淺色）*/
.hero--dark {
    --nav-text-color: #ffffff;
    --nav-icon-bg: rgba(0, 0, 0, 0.3);
    --nav-icon-border: rgba(255, 255, 255, 0.4);
    --mobile-nav-bg: rgba(0, 0, 0, 0.55);
    --mobile-nav-border: rgba(255, 255, 255, 0.15);
    --mobile-nav-hover-bg: rgba(255, 255, 255, 0.08);
    --logo-filter: none;
}

/* Project detail page 專用：logo（左上）同 nav（右上）獨立判斷深淺色，
   因為同一張hero相入面兩個角落有機會唔同brightness */
.hero--nav-on-dark {
    --nav-text-color: #ffffff;
    --nav-icon-bg: rgba(0, 0, 0, 0.3);
    --nav-icon-border: rgba(255, 255, 255, 0.4);
    --mobile-nav-bg: rgba(0, 0, 0, 0.55);
    --mobile-nav-border: rgba(255, 255, 255, 0.15);
    --mobile-nav-hover-bg: rgba(255, 255, 255, 0.08);
}

.hero--logo-on-dark {
    --logo-filter: none;
}

/* Homepage 專用：當currently顯示緊嘅slide被偵測為淺色底，
   JS 會加呢個 class 落 body，等 logo/nav 自動轉深色 */
body.hero-light {
    --nav-text-color: #111111;
    --nav-icon-bg: rgba(255, 255, 255, 0.6);
    --nav-icon-border: rgba(0, 0, 0, 0.3);
    --mobile-nav-bg: rgba(255, 255, 255, 0.9);
    --mobile-nav-border: rgba(0, 0, 0, 0.1);
    --mobile-nav-hover-bg: rgba(0, 0, 0, 0.05);
    --logo-filter: invert(1);
}

/* Homepage 專用：logo（左上）同 nav（右上）獨立判斷深淺色，
   因為同一張相入面兩個角落有機會唔同brightness，唔可以一齊判斷 */
body.nav-light {
    --nav-text-color: #111111;
    --nav-icon-bg: rgba(255, 255, 255, 0.6);
    --nav-icon-border: rgba(0, 0, 0, 0.3);
    --mobile-nav-bg: rgba(255, 255, 255, 0.9);
    --mobile-nav-border: rgba(0, 0, 0, 0.1);
    --mobile-nav-hover-bg: rgba(0, 0, 0, 0.05);
}

body.logo-light {
    --logo-filter: invert(1);
}

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

body {
    font-family: 'Courier Prime', monospace;
    -webkit-user-select: none;
    user-select: none;
    background-color: #000;
    overflow: hidden;
}

/* Project detail page（淺色主題）要可以正常 scroll，唔可以用返 index 嗰種 overflow:hidden */
body.light-nav {
    background-color: #fff;
    color: #111;
    overflow: visible;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ===== Logo ===== */
.logo-container {
    width: 150px;
    height: auto;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.logo-container img {
    width: 100%;
    height: auto;
    display: block;
    margin-left: -1.69%; /* 抵消 Logo.svg 本身內置嘅左邊空白 (用bounding box精準計算)，等視覺上同 footer 對齊 */
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
    filter: var(--logo-filter);
    transition: filter 0.5s ease;
}

/* Project detail page：logo 冇疊住任何要click嘅背景，可以正常click返去首頁 */
body.light-nav .logo-container,
body.light-nav .logo-container img,
body.light-nav .logo-container a {
    pointer-events: auto;
}

/* scroll down 收埋 nav 嗰陣，logo 都跟住淡出、唔可以click */
body.nav-hidden .logo-container {
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
}

/* ===== 右上角選單（桌面／平板） ===== */
.top-nav {
    position: fixed;
    top: 2.5rem;
    right: 2rem;
    z-index: 10;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

body.nav-hidden .top-nav {
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
}

.top-nav .nav-sep {
    color: var(--nav-text-color);
    opacity: 0.4;
}

.top-nav a {
    color: var(--nav-text-color);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    opacity: 0.85;
    transition: opacity 0.3s, color 0.5s ease;
    white-space: nowrap;
}

.top-nav a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* 漢堡 icon / 手機下拉選單：預設(桌面)隱藏 */
.nav-toggle {
    display: none;
}

.mobile-nav {
    display: none;
}

/* 平板 */
@media (max-width: 1024px) {
    .top-nav {
        right: 1.5rem;
        gap: 0.5rem;
    }
}

/* 中細螢幕：隱藏橫向選單，改用漢堡 icon */
@media (max-width: 768px) {
    .logo-container {
        width: 130px;
    }

    .top-nav {
        display: none;
    }

    .nav-toggle {
        display: flex;
        position: fixed;
        top: 1.75rem;
        right: 1.5rem;
        z-index: 20;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        background: var(--nav-icon-bg);
        border: 1px solid var(--nav-icon-border);
        border-radius: 50%;
        cursor: pointer;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    body.nav-hidden .nav-toggle {
        opacity: 0;
        transform: translateY(-12px);
        pointer-events: none;
    }

    .nav-toggle span {
        position: absolute;
        width: 18px;
        height: 2px;
        background: var(--nav-text-color);
        transition: transform 0.3s, opacity 0.3s, top 0.3s;
    }

    .nav-toggle span:nth-child(1) { top: 14px; }
    .nav-toggle span:nth-child(2) { top: 19px; }
    .nav-toggle span:nth-child(3) { top: 24px; }

    .nav-toggle.open span:nth-child(1) {
        top: 19px;
        transform: rotate(45deg);
    }
    .nav-toggle.open span:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle.open span:nth-child(3) {
        top: 19px;
        transform: rotate(-45deg);
    }

    .mobile-nav {
        position: fixed;
        top: 3.75rem;
        right: 1.5rem;
        z-index: 15;
        display: flex;
        flex-direction: column;
        gap: 0;
        background: var(--mobile-nav-bg);
        backdrop-filter: blur(4px);
        border: 1px solid var(--mobile-nav-border);
        border-radius: 10px;
        padding: 0.4rem 0;
        min-width: 180px;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.3s ease;
        pointer-events: none;
    }

    .mobile-nav.open {
        max-height: 320px;
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-nav a {
        display: block;
        color: var(--nav-text-color);
        font-size: 0.9rem;
        letter-spacing: 0.05em;
        padding: 0.6rem 1.25rem;
        opacity: 0.9;
        border-bottom: 1px solid var(--mobile-nav-border);
        transition: opacity 0.2s, background 0.2s;
    }

    .mobile-nav a:last-child {
        border-bottom: none;
    }

    .mobile-nav a:hover {
        opacity: 1;
        background: var(--mobile-nav-hover-bg);
    }
}

/* 手機 */
@media (max-width: 480px) {
    .logo-container {
        width: 100px;
    }
    .nav-toggle {
        top: 1.25rem;
        right: 1.25rem;
    }
    .mobile-nav {
        top: 3.5rem;
        right: 1.25rem;
    }
}

/* ============================================
   Index 頁專用（背景輪播、遮罩、內容區）
   ============================================ */

/* 背景輪播圖容器 */
.slideshow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #000; /* 防止載入間隙出現白光 */
    cursor: pointer;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    pointer-events: none;
}

/* 只有帶有 active 的圖片才會顯示 */
.slide.active {
    opacity: 1;
}

/* 深色遮罩 */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.25) 25%,
        rgba(0, 0, 0, 0) 50%
    );
    z-index: 2;
    pointer-events: none;
}

.content-wrapper {
    position: relative;
    z-index: 3;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 2.5rem 2rem 4rem;
    color: white;
    pointer-events: none;
}

@media (max-width: 768px) {
    .content-wrapper {
        padding: 2rem 1.5rem 3rem;
    }
}

@media (max-width: 480px) {
    .content-wrapper {
        padding: 1.25rem 1.25rem 2.5rem;
    }
}

.home-footer {
    position: fixed;
    left: 2rem;
    bottom: 0.75rem;
    z-index: 3;
    color: white;
    font-size: 0.8rem;
    opacity: 0.7;
    padding: 0; /* 蓋返通用 footer{} 規則嘅 padding，因為呢度用 left/bottom 定位，唔需要 padding */
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (max-width: 768px) {
    .home-footer {
        left: 1.5rem;
        bottom: 0.75rem;
    }
}

@media (max-width: 480px) {
    .home-footer {
        left: 1.25rem;
        bottom: 0.75rem;
        font-size: 0.75rem;
    }
}

/* ============================================
   Project detail page 專用
   （hero 大圖、client 區塊、圖片、更多項目、footer）
   ============================================ */

/* ===== Hero ===== */
.hero {
    position: relative;
    min-height: 70vh;
    background-color: #ececec;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 2.5rem 2rem 4rem;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero.hero-loaded {
    opacity: 1;
}

/* ===== Scroll hint（提示用戶向下scroll）===== */
.scroll-hint {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--nav-text-color);
    opacity: 0.75;
    pointer-events: none;
    z-index: 5;
    animation: scroll-hint-bounce 2s ease-in-out infinite;
}

.scroll-hint svg {
    width: 56px;
    height: 56px;
}

.scroll-hint span {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

@keyframes scroll-hint-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* Scroll咗少少就自動隱藏（跟返已有嘅 nav-hidden 邏輯），唔阻住個page */
/* 一旦scroll過一次就永久收埋，唔會scroll up返又再顯示（同 nav-hidden 唔同，呢個係單向） */
body.scroll-hint-dismissed .scroll-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-hint {
        animation: none;
    }
}

/* 尊重用戶嘅「減少動態效果」設定 */
@media (prefers-reduced-motion: reduce) {
    .hero {
        opacity: 1;
        transition: none;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 2rem 1.5rem 3rem;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 1.25rem 1.25rem 2.5rem;
    }
}

/* ===== Client 區塊 ===== */
.client-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.client-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    column-gap: 1rem;
}

.client-row + .client-row {
    margin-top: 2.5rem;
}

.client-label {
    font-size: 0.85rem;
    opacity: 0.6;
    padding-top: 0.3rem;
}


.client-name {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 1rem;
}

.client-tagline {
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 700;
    opacity: 0.7;
    padding-top: 0.3rem;
}

.client-desc {
    font-size: 0.85rem;
    line-height: 1.7;
    opacity: 0.85;
}

@media (max-width: 640px) {
    .client-row {
        grid-template-columns: 1fr;
    }
    .client-label {
        padding-top: 0;
        margin-bottom: 0.5rem;
    }
}

/* ===== 圖片區塊 ===== */
.image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* 如果淨係得一張相（一個 .image-block），自動變成成行闊，唔使手動改 */
.image-grid:has(.image-block:only-child) {
    grid-template-columns: 1fr;
}

.image-block {
    display: block;
    color: rgba(0, 0, 0, 0.4);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.image-block img {
    width: 100%;
    height: auto; /* 跟返每張相自己嘅比例，唔裁唔拉 */
    display: block;
}

.image-1 { background-color: #eeeeee; }
.image-2 { background-color: #eeeeee; }

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

/* 兩張並排嗰陣，右邊（第二張）fade in 慢少少，做成前後層次感 */
.image-grid .reveal:nth-child(2) {
    transition-delay: 0.15s;
}

/* ===== More projects ===== */
.more-projects {
    padding: 4rem 2rem 2.5rem;
    text-align: center;
}

.more-projects-label {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    opacity: 0.7;
    margin-bottom: 2rem;
}

.thumb-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
}

.thumb {
    flex: 0 1 176px;
    aspect-ratio: 4 / 3;
    background-color: #eeeeee;
    background-size: cover; /* 填滿成個格仔，裁走多出嚟嘅部分，唔留白 */
    background-position: center;
    background-repeat: no-repeat;
    color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 1rem;
    overflow: hidden;
    transition: opacity 0.3s;
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 填滿成個格仔，裁走多出嚟嘅部分，唔留白 */
    display: block;
    pointer-events: none;
}

.thumb.thumb--has-image {
    padding: 0;
    font-size: 0; /* 有背景相嘅thumb唔應該有文字內容，以防萬一都唔會露出嚟 */
}

@media (max-width: 480px) {
    .thumb {
        flex-basis: 104px;
        font-size: 0.75rem;
        padding: 0.6rem;
    }
}

.thumb:hover {
    opacity: 0.75;
}


footer {
    padding: 2rem 2rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    opacity: 0.7;
    flex-wrap: wrap;
    gap: 0.75rem;
}



/* 統一 client-section / more-projects / footer 嘅左右 padding，
   跟返 .hero 一致嘅 breakpoint，等成頁喺任何螢幕闊度都對齊 */
@media (max-width: 768px) {
    .client-section,
    .more-projects,
    footer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .client-section {
        max-width: none;
        margin: 0;
    }
}

@media (max-width: 480px) {
    .client-section,
    .more-projects,
    footer {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* ============================================
   About page 專用（about / we-do / clients / contact）
   ============================================ */

.about-header {
    padding: 2.5rem 2rem;
    position: relative;
}

@media (max-width: 768px) {
    .about-header {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .about-header {
        padding: 1.25rem 1.25rem;
    }
}

/* about.html 專屬：logo fix定位、永遠顯示，唔跟住menu bar一齊淡出 */
body.about-page .logo-container {
    position: fixed;
    top: 2.5rem;
    left: 2rem;
    z-index: 10;
}

/* 置頂嘅白色漸變，等scroll上嚟嘅內容唔會同fixed logo重疊/打交叉 */
.about-top-fade {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 280px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100%);
    z-index: 5;
    pointer-events: none;
}

@media (max-width: 768px) {
    .about-top-fade {
        height: 260px;
    }
}

@media (max-width: 480px) {
    .about-top-fade {
        height: 260px;
    }
}

/* Header保留返個高度(等個logo喺fixed之後，落面section唔會俾logo疊住) */
body.about-page .about-header {
    min-height: 220px;
}

@media (max-width: 768px) {
    body.about-page .logo-container {
        top: 2rem;
        left: 1.5rem;
    }
    body.about-page .about-header {
        min-height: 170px;
    }
}

@media (max-width: 480px) {
    body.about-page .logo-container {
        top: 1.25rem;
        left: 1.25rem;
    }
    body.about-page .about-header {
        min-height: 190px;
    }
}

/* 蓋返共用嘅「scroll down 淡出」規則，等logo喺呢page保持永遠可見 */
body.about-page.nav-hidden .logo-container {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.page-section {
    max-width: 1152px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

@media (max-width: 768px) {
    .page-section {
        padding: 2.5rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .page-section {
        padding: 2rem 1.25rem;
    }
}

/* About us 段落文字限窄行寬，方便閱讀，但唔會令個section自己再置中，
   所以左邊界仍然同Clients/Talk to us對齊 */
#about.page-section {
    padding-top: 1.5rem;
}

/* Section之間嘅分隔線 */
.section-divider {
    max-width: 900px;
    margin: 0 auto;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
    .section-divider {
        margin: 0 1.5rem;
    }
}

@media (max-width: 480px) {
    .section-divider {
        margin: 0 1.25rem;
    }
}

/* ===== 大標題（ABOUT US / CLIENTS / Talk to us） ===== */
.section-title {
    font-size: clamp(2.7rem, 6vw, 3.75rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #333;
    margin-bottom: 1.5rem;
    margin-left: -0.1em; /* 抵消Courier Prime圓形字母(C/O)嘅光學內縮，等視覺上同下面文字對齊 */
}

/* ===== Subtitle（例如 CLIENTS 下面嘅 "We serve..."） ===== */
.section-subtitle {
    font-size: 1.3rem;
    opacity: 0.7;
    margin-top: -1rem;
    margin-bottom: 2rem;
}

/* ===== About us 內文 ===== */
.about-desc {
    font-size: 0.95rem;
    line-height: 1.8;
    opacity: 0.85;
    margin-bottom: 1.5rem;
}

/* ===== We do（喺 About us section 入面） ===== */
.we-do-label {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.services-list {
    list-style: none;
}

.services-list li {
    font-size: 0.95rem;
    line-height: 1.9;
    padding-left: 1.2rem;
    position: relative;
}

.services-list li::before {
    content: '-';
    position: absolute;
    left: 0;
}

/* ===== Clients ===== */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-bottom: 2rem;
}

.client-logo {
    position: relative;
    width: 100%;
    padding-top: 66.6667%; /* 3:2 比例，用返padding-top技巧,唔靠aspect-ratio */
    overflow: visible;
}

.client-logo-inner {
    position: absolute;
    inset: 0;
    color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    text-align: center;
    padding: 0.5rem;
}

.client-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .clients-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .clients-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }
}

/* Mobile版分頁顯示嘅箭嘴button，預設隱藏，JS判斷夠唔夠位先顯示 */
.clients-expand {
    display: none;
    margin: 1.5rem auto 0;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: inherit;
    transition: background 0.3s, transform 0.3s;
}

.clients-expand:hover {
    background: rgba(0, 0, 0, 0.05);
}

.clients-expand svg {
    width: 18px;
    height: 18px;
}

.clients-expand.show {
    display: flex;
}

/* ===== Talk to us / Contact ===== */
.contact-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 15rem;
}

@media (max-width: 768px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form input,
.contact-form textarea {
    font-family: inherit;
    font-size: 0.9rem;
    color: inherit;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding: 0.6rem 0.2rem;
    outline: none;
    transition: border-color 0.3s;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: inherit;
    opacity: 0.45;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: rgba(0, 0, 0, 0.6);
}

.contact-form textarea {
    resize: vertical;
    min-height: 90px;
}

.contact-submit {
    align-self: flex-start;
    margin-top: 0.5rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: #111;
    color: #fff;
    border: none;
    padding: 0.75rem 2rem;
    cursor: pointer;
    transition: opacity 0.3s;
}

.contact-submit:hover {
    opacity: 0.8;
}

.contact-info {
    font-size: 0.9rem;
    line-height: 2;
    opacity: 0.85;
}

.contact-info .contact-info-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    opacity: 0.5;
    margin-top: 1.25rem;
    margin-bottom: 0.15rem;
}

.contact-info .contact-info-label:first-child {
    margin-top: 0;
}

/* ============================================
   Our Work page 專用（全部project嘅grid）
   ============================================ */

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

.work-card {
    display: block;
}

.work-card-thumb {
    position: relative;
    width: 100%;
    padding-top: 66.6667%; /* 3:2，用返padding-top技巧，穩陣過aspect-ratio */
    background-color: #eeeeee;
    overflow: hidden;
    transition: opacity 0.3s;
}

.work-card:hover .work-card-thumb {
    opacity: 0.85;
}

.work-card-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.work-card-thumb .work-card-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.4);
    font-size: 0.9rem;
    text-align: center;
    padding: 1rem;
}

@media (max-width: 900px) {
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 560px) {
    .work-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* work.html：內容可能唔夠高填滿viewport，畀個grid section
   一個合理嘅min-height，等footer唔會停喺content中間 */
body.work-page .page-section {
    min-height: calc(100vh - 260px);
}

@media (max-width: 768px) {
    body.work-page .page-section {
        min-height: calc(100vh - 220px);
    }
}

@media (max-width: 480px) {
    body.work-page .page-section {
        min-height: calc(100vh - 180px);
    }
}

/* ============================================
   Scroll reveal（scale + fade）
   Element加咗 .reveal class，一scroll入視野就會慢慢放大+淡入顯示
   ============================================ */
/* 預設：完全顯示，唔靠JS都睇到（核心內容唔應該靠JS先顯示得到) */
.reveal {
    opacity: 1;
    transform: none;
}

/* 淨係確認咗JS真係run緊（html有 .js-enabled），先套用「先隱藏、再fade in」嘅效果 */
html.js-enabled .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

html.js-enabled .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 尊重用戶嘅「減少動態效果」設定 */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}