:root {
    --font-sans: 'YS GenYoGothic', 'YS Helvetica Neue', 'YS Helvetica', 'Noto Sans TC', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --color-bg: #101010;
    --color-surface: #ffffff;
    --color-primary: #d4af37;
    --color-primary-dark: #8b6b12;
    --color-accent: #7ca08a;
    --color-navy: #052b5d;
    --color-link: #08aef0;
    --color-text: #f7f3ea;
    --color-text-dark: #111111;
    --color-text-inverse: #ffffff;
    --color-muted: #cfc7b8;
    --color-border: rgba(255, 255, 255, 0.22);

    --container-xs: 360px;
    --container-sm: 620px;
    --container-md: 760px;
    --container-lg: 960px;
    --container-xl: 1080px;
    --container-2xl: 1200px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    --header-height: 88px;
    --front-subpage-hero-min-height: max(100vh, clamp(695px, 63.6vw, 964px));
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.24);
    --shadow-panel: 0 20px 54px rgba(0, 0, 0, 0.22);
    --shadow-image: 0 22px 56px rgba(12, 26, 42, 0.16);

    --transition-fast: 0.16s ease;
    --transition-base: 0.18s ease;

    --z-floating: 18;
    --z-header: 40;
    --z-header-content: 42;

    --breakpoint-large-desktop: 1919px;
    --breakpoint-desktop: 1023px;
    --breakpoint-tablet: 767px;
    --breakpoint-mobile: 575px;
    --breakpoint-small-mobile: 374px;

    --about-hero-image: linear-gradient(90deg, rgba(4, 23, 45, 0.52), rgba(4, 23, 45, 0.16) 52%, rgba(4, 23, 45, 0.04)), url('../images/about/banner.webp');
    --sustainability-hero-image: linear-gradient(225deg, rgba(4, 23, 45, 0.36), rgba(4, 23, 45, 0.08) 46%, rgba(4, 23, 45, 0)), url('../images/sustainability/banner.jpg');
    --sustainability-continuous-bg-image: url('../images/sustainability/background3.png');
    --benefits-hero-image: linear-gradient(90deg, rgba(4, 23, 45, 0.1), rgba(4, 23, 45, 0.06) 45%, rgba(4, 23, 45, 0.22)), url('../images/benefits/banner.jpg');
    --benefits-events-bg-image: url('../images/bg4.webp');
    --latest-news-hero-image: linear-gradient(90deg, rgba(4, 23, 45, 0.58), rgba(4, 23, 45, 0.2) 52%, rgba(4, 23, 45, 0.08)), url('../images/latest-news/banner.jpg');
    --latest-news-list-bg-image:  url('../images/bg4.webp');
    --media-hero-image: linear-gradient(90deg, rgba(4, 23, 45, 0.58), rgba(4, 23, 45, 0.2) 52%, rgba(4, 23, 45, 0.08)), url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=2400&q=86');
    --civil-mechanical-electrical-hero-image: linear-gradient(270deg, rgba(4, 23, 45, 0.62), rgba(4, 23, 45, 0.24) 54%, rgba(4, 23, 45, 0.08)), url('../images/civil-mechanical-electrical/banner.jpg');
    --civil-mechanical-electrical-cladding-bg-image: url('../images/bg4.webp');
    --civil-mechanical-electrical-penetration-bg-image: url('../images/left-honey.png');
    --energy-intelligence-hero-image: linear-gradient(90deg, rgba(4, 23, 45, 0.58), rgba(4, 23, 45, 0.2) 52%, rgba(4, 23, 45, 0.08)), url('../images/energy-intelligence/banner.jpg');
    --energy-intelligence-platform-bg-image: linear-gradient(rgba(255, 255, 255,0.4), rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 1)), url('../images/energy-intelligence/bg2.png');
    --energy-intelligence-architecture-bg-image: url('../images/bg4.webp');
    --building-information-modeling-hero-image: linear-gradient(90deg, rgba(4, 23, 45, 0.04), rgba(4, 23, 45, 0.1) 52%, rgba(4, 23, 45, 0.26)), url('../images/building-information-modeling/banner.jpg');
    --building-information-modeling-book-bg-image: linear-gradient(rgba(238, 238, 236, 0.9), rgba(238, 238, 236, 0.92)), url('../images/left-honey.png');
    /* 翻書內頁紙張底紋：/energy-intelligence 與 /building-information-modeling 共用 */
    --flipbook-page-bg-image: url('../images/bookbg01.png');
    --construction-management-hero-image: linear-gradient(90deg, rgba(4, 23, 45, 0.5), rgba(4, 23, 45, 0.18) 52%, rgba(4, 23, 45, 0.06)), url('../images/construction-management/banner.jpg');
    --project-evaluation-hero-image: linear-gradient(90deg, rgba(4, 23, 45, 0.6), rgba(4, 23, 45, 0.2) 54%, rgba(4, 23, 45, 0.08)), url('../images/project-evaluation/banner.png');
    --project-private-bg-image: linear-gradient(rgba(255, 255, 255, 0.88), rgba(246, 247, 248, 0.9)), url('../images/project-evaluation/背景.png');
    --project-records-bg-image: linear-gradient(rgba(218, 245, 255, 0.1), rgba(218, 245, 255, 0.08)), url('../images/project-evaluation/banner.png');
    --project-gallery-bg-image: linear-gradient(rgba(236, 237, 238, 0.9), rgba(232, 233, 234, 0.93)), url('../images/project-evaluation/背景.png');
    --project-portfolio-hero-image: linear-gradient(90deg, rgba(4, 23, 45, 0.6), rgba(4, 23, 45, 0.2) 54%, rgba(4, 23, 45, 0.08)), url('../images/project-portfolio/banner.jpg');
    --project-portfolio-private-bg-image: url('../images/project-portfolio/background.png');
    --project-portfolio-records-bg-image: linear-gradient(rgba(218, 245, 255, 0.1), rgba(218, 245, 255, 0.08)), url('../images/project-portfolio/banner2.png');
    --project-portfolio-gallery-bg-image:  url('../images/project-portfolio/background.png');
    --project-evaluation-estimating-bg-image: url('../images/bg4.webp');
    --customer-service-hero-image: linear-gradient(90deg, rgba(4, 23, 45, 0.52), rgba(4, 23, 45, 0.16) 52%, rgba(4, 23, 45, 0.04)), url('../images/customer-service/banner.png');
    --about-profile-bg-image: url('../images/about/background.png');
    --home-about-bg-image: url('../images/home/home-about-bg.webp');
    --home-news-bg-image: url('../images/bg4.webp');
    --home-quality-bg-image: url('../images/home/home-quality-bg.webp');
    --home-join-bg-image: url('../images/bg4.webp');
}

html {
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: 1.6;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

[hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}