.site-header {
    position: fixed;
    z-index: 40;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--header-height);
    padding: 18px 38px;
    background: #ffffff;
    color: var(--color-navy);
    box-shadow: 0 1px 12px rgba(3, 23, 47, 0.14);
}

.site-header--front {
    background: #ffffff;
}

.site-header--home {
    min-height: 0;
    padding: 37px 38px 0;
    background: transparent;
    color: #ffffff;
    box-shadow: none;
    pointer-events: none;
}

.site-header--home .site-brand,
.site-header--home .home-menu {
    pointer-events: auto;
}

.site-brand,
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
}

.site-brand {
    position: relative;
    z-index: 42;
    flex: 0 0 auto;
    color: var(--color-navy);
}

.site-brand__logo {
    display: block;
    height: 48px;
    color: currentColor;
}

.site-brand__logo--image {
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.28));
}

.site-header--home .site-brand__logo {
    width: 45px;
    height: 45px;
}

.site-brand__text {
    font-size: 1.15rem;
    line-height: 1;
}

.site-nav {
    position: relative;
    z-index: 42;
    min-width: 0;
}

.site-nav__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__item {
    position: relative;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-navy);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.site-nav__link::after {
    width: 0;
    height: 2px;
    margin-top: 26px;
    margin-left: -100%;
    background: #08aef0;
    content: '';
    transition: width 0.18s ease;
}

.site-nav__item:hover .site-nav__link::after,
.site-nav__item:focus-within .site-nav__link::after {
    width: 100%;
}

.site-nav__dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    display: grid;
    min-width: 142px;
    padding: 12px 0;
    background: rgba(70, 95, 126, 0.9);
    box-shadow: 0 18px 36px rgba(3, 23, 47, 0.16);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    visibility: hidden;
}

.site-nav__dropdown::before {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 12px;
    content: '';
}

.site-nav__item:hover .site-nav__dropdown,
.site-nav__item:focus-within .site-nav__dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    visibility: visible;
}

.site-nav__dropdown a {
    display: block;
    padding: 7px 18px;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.site-nav__dropdown a:hover,
.site-nav__dropdown a:focus {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.home-menu {
    position: relative;
    z-index: 42;
    flex: 0 0 auto;
    margin-left: auto;
}

.home-menu__toggle,
.home-menu__close {
    display: grid;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    place-items: center;
    transition: transform 0.16s ease, filter 0.16s ease;
}

.home-menu__toggle img,
.home-menu__close img {
    display: block;
    width: 55px;
    height: 55px;
    object-fit: contain;
}

.home-menu__toggle:hover,
.home-menu__toggle:focus-visible,
.home-menu__close:hover,
.home-menu__close:focus-visible {
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
    outline: none;
    transform: translateY(-1px);
}

.home-menu__toggle:active,
.home-menu__close:active {
    transform: scale(0.97);
}

.home-menu__panel {
    position: fixed;
    top: 27px;
    left: 50%;
    width: calc(100vw - 90px);
    min-height: clamp(236px, 28vw, 405px);
    max-height: calc(100vh - 44px);
    padding: clamp(78px, 8vw, 100px) clamp(78px, 10vw, 168px) clamp(52px, 6vw, 76px) clamp(260px, 28vw, 470px);
    overflow: auto;
    background: rgba(255, 255, 255, 0.88);
    color: #111111;
    box-shadow: 0 1px 8px rgba(6, 16, 22, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.home-menu.is-open .home-menu__panel {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.home-menu__close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.home-menu__close img {
    width: 43px;
    height: 43px;
}

.home-menu__nav {
    display: grid;
    grid-template-columns: repeat(5, max-content);
    align-items: start;
    justify-content: end;
    gap: clamp(22px, 3.5vw, 58px);
}

.home-menu__group {
    display: grid;
    gap: 10px;
}

.home-menu__group:last-child {
    padding-bottom: 0;
}

.home-menu__group-title {
    color: #052b5d;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.25;
    white-space: nowrap;
}

.home-menu__links {
    display: grid;
    gap: 8px;
}

.home-menu__links a {
    display: flex;
    align-items: flex-start;
    color: #052b5d;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    transition: color 0.16s ease;
}

.home-menu__links a::before {
    content: '-';
    margin-right: 4px;
}

.home-menu__group-title:hover,
.home-menu__group-title:focus,
.home-menu__links a:hover,
.home-menu__links a:focus {
    color: #08aef0;
}

/* 手機版子頁 header：置中 Logo2-m 與漢堡選單按鈕（桌機版隱藏，於 rwd.css 啟用） */
.site-brand__logo--mobile {
    display: none;
}

.home-menu--sub {
    display: none;
}

.home-menu__bars,
.home-menu__bars::before,
.home-menu__bars::after {
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-navy);
}

.home-menu__bars {
    position: relative;
}

.home-menu__bars::before,
.home-menu__bars::after {
    position: absolute;
    left: 0;
    content: '';
}

.home-menu__bars::before {
    top: -9px;
}

.home-menu__bars::after {
    top: 9px;
}

.about-hero {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 58px) 48px 74px;
    overflow: hidden;
    background-image: var(--about-hero-image);
    background-position: center;
    background-size: cover;
    place-items: start start;
}

/* 手機版第一屏改用內含文字的 banner-m 圖片（桌機版隱藏） */
.about-hero__banner-m,
.sustainability-hero__banner-m,
.energy-intelligence-hero__banner-m,
.civil-mechanical-electrical-hero__banner-m,
.building-information-modeling-hero__banner-m,
.construction-management-hero__banner-m,
.project-evaluation-hero__banner-m,
.project-portfolio-hero__banner-m,
.customer-service-hero__banner-m,
.benefits-hero__banner-m,
.latest-news-hero__banner-m {
    display: none;
}

/* 桌機版第一屏文字留白基準（以「關於元順」為準）：
   上方 = hero padding-top + clamp(8px, 4vh, 52px)
   左/右側 = hero padding 48px + clamp(0px, 2.4vw, 40px)
   其餘內頁第一屏一律沿用同一組數值（靠右版型改用 margin-right 鏡射） */
.about-hero__content {
    width: min(640px, 100%);
    margin-top: clamp(8px, 4vh, 52px);
    margin-left: clamp(0px, 2.4vw, 40px);
}

/* 桌機版第一屏改採「白色標題直接壓在圖上」的排版，品牌 LOGO 隱藏（參考主視覺稿） */
.about-hero__brand {
    display: none;
}

.about-hero__title {
    display: block;
    margin: 0 0 26px;
    padding: 0;
    background: none;
    color: #ffffff;
    font-size: clamp(2.1rem, 3.6vw, 3.2rem);
    font-weight: 900;
    line-height: 1.32;
    letter-spacing: 0.02em;
    text-shadow: 0 4px 26px rgba(0, 0, 0, 0.42);
}

.about-hero__english {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(0.95rem, 1.55vw, 1.28rem);
    font-weight: 100;
    line-height: 1.5;
    letter-spacing: 0.14em;
    white-space: nowrap;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.34);
}

.front-banner-bottom {
    display: block;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.front-banner-bottom__image {
    display: block;
    width: 100%;
    height: auto;
}

.sustainability-hero {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 58px) 48px 74px;
    overflow: hidden;
    background-image: var(--sustainability-hero-image);
    background-position: center;
    background-size: cover;
    place-items: start end;
}

.sustainability-hero__content {
    width: min(620px, 100%);
    margin-top: clamp(8px, 4vh, 52px);
    margin-right: clamp(0px, 2.4vw, 40px);
    text-align: right;
}

.sustainability-hero__title {
    display: block;
    margin: 0 0 20px;
    padding: 0;
    background: none;
    color: #ffffff;
    font-size: clamp(2.1rem, 3.6vw, 3.2rem);
    font-weight: 900;
    line-height: 1.32;
    letter-spacing: 0.02em;
    text-shadow: 0 4px 26px rgba(0, 0, 0, 0.42);
}

.sustainability-hero__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(0.95rem, 1.55vw, 1.28rem);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.14em;
    white-space: nowrap;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.34);
}

.energy-intelligence-hero {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 58px) 48px 74px;
    overflow: hidden;
    background-image: var(--energy-intelligence-hero-image);
    background-position: center;
    background-size: cover;
    place-items: start start;
}

.energy-intelligence-hero__content {
    width: min(560px, 100%);
    margin-top: clamp(8px, 4vh, 52px);
    margin-left: clamp(0px, 2.4vw, 40px);
}

/* 桌機版第一屏改採「白色粗體標題直接壓在圖上」的排版，品牌 LOGO 隱藏（參考主視覺稿） */
.energy-intelligence-hero__brand {
    display: none;
}

.energy-intelligence-hero__title {
    display: block;
    margin: 0 0 14px;
    padding: 0;
    background: none;
    color: #ffffff;
    font-size: clamp(2.2rem, 3.9vw, 3.4rem);
    font-weight: 900;
    line-height: 1.34;
    letter-spacing: 0.04em;
    text-shadow: 0 4px 26px rgba(0, 0, 0, 0.42);
}

.energy-intelligence-hero__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: clamp(0.95rem, 1.55vw, 1.4rem);
    font-weight: 100;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

.energy-intelligence-platform {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 44px) 48px 132px;
    overflow: hidden;
    background-image: var(--energy-intelligence-platform-bg-image);
    background-position: center;
    background-size: cover;
    place-items: center;
}
.energy-intelligence-platform::before,
.energy-intelligence-platform::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: clamp(72px, 9vw, 112px);
    content: '';
    pointer-events: none;
}

.energy-intelligence-platform::after {
    z-index: 0;
    background: #edf0f2;
}

.energy-intelligence-platform::before {
    z-index: 1;
    background: #ffffff;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.energy-intelligence-platform__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(1040px, 100%);
}

.energy-intelligence-platform__heading {
    align-self: stretch;
    margin: 0 0 clamp(54px, 7vw, 94px);
    text-align: center;
}

.energy-intelligence-platform__title {
    margin: 0 0 12px;
    color: var(--color-navy);
    font-size: clamp(3rem, 5.7vw, 5.8rem);
    font-weight: 100;
    line-height: 1;
    letter-spacing: -0.05em;
}

.energy-intelligence-platform__subtitle {
    margin: 0;
    color: #08aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}

.energy-intelligence-platform__dashboard-figure {
    width: min(780px, 100%);
    margin: 0;
}

.energy-intelligence-platform__dashboard,
.energy-intelligence-platform__diagram {
    display: block;
    max-width: 100%;
    height: auto;
}

.energy-intelligence-platform__dashboard {
    width: 100%;
    filter: drop-shadow(0 18px 28px rgba(17, 24, 39, 0.14));
}

.energy-intelligence-platform__caption {
    margin-top: 18px;
    color: #111111;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.45;
    text-align: center;
}

.energy-intelligence-platform__diagram {
    width: min(620px, 92%);
    margin-top: clamp(54px, 7vw, 86px);
    filter: drop-shadow(0 16px 24px rgba(17, 24, 39, 0.08));
}

/* 中央監控畫面平移容器：電腦版為透明外層，圖片照舊貼齊（平移僅手機版啟用） */
.energy-intelligence-platform__pan {
    position: relative;
    width: 100%;
}

.energy-intelligence-platform__pan-viewport {
    position: relative;
    width: 100%;
}

/* 平移方向按鈕與向下三角形分隔：僅手機版顯示 */
.energy-intelligence-platform__pan-btn,
.energy-intelligence-platform__divider {
    display: none;
}

.energy-intelligence-architecture {
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 54px) 48px 110px;
    overflow: hidden;
    background-color: #edf0f2;
    background-image: var(--energy-intelligence-architecture-bg-image);
    background-position: center;
    background-size: cover;
    place-items: center;
}

.energy-intelligence-architecture__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(1040px, 100%);
}

.energy-intelligence-architecture__system-heading {
    width: 100%;
    margin: 0 0 54px;
    text-align: center;
}

.energy-intelligence-architecture__system-title,
.energy-intelligence-architecture__interface-title {
    margin: 0 0 10px;
    color: var(--color-navy);
    font-size: clamp(2.8rem, 5vw, 5rem);
    font-weight: 100;
    line-height: 1;
    letter-spacing: -0.05em;
}

.energy-intelligence-architecture__system-subtitle,
.energy-intelligence-architecture__interface-subtitle {
    margin: 0;
    color: #08aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}

.energy-intelligence-architecture__image {
    display: block;
    width: min(740px, 100%);
    height: auto;
    margin-bottom: clamp(76px, 9vw, 116px);
}

.energy-intelligence-architecture__interface-heading {
    align-self: flex-start;
    width: min(780px, 100%);
    margin: 0 0 56px;
    text-align: left;
}

/*
 * 操作介面翻書：整組比照 /building-information-modeling 的 flipbook stage。
 * 跳出 .energy-intelligence-architecture__inner 的 1040px 上限，佔滿整個區塊寬度，
 * 書本維持左右對開的兩頁式，不是單張大圖。
 */
.energy-intelligence-interface-flipbook {
    width: min(1420px, calc(100vw - 112px));
}

.energy-intelligence-interface-flipbook__stage {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 18px;
    align-items: center;
    width: 100%;
}

.energy-intelligence-interface-flipbook__book {
    width: min(100%, 1120px);
    min-height: clamp(360px, 54vw, 720px);
    margin: 0 auto;
    filter: drop-shadow(0 18px 22px rgba(17, 24, 39, 0.18));
}

.energy-intelligence-interface-flipbook__page {
    /* isolation 讓內頁圖的 mix-blend-mode 只跟這一頁的紙張底紋相乘，不會吃到書本外的背景 */
    isolation: isolate;
    overflow: hidden;
    padding: 22px 20px;
    background-color: #ffffff;
    background-image: var(--flipbook-page-bg-image);
    background-position: center center;
    background-size: cover;
    box-shadow: inset 0 0 28px rgba(9, 24, 38, 0.08);
}

/* 橫式操作介面圖：用 contain 讓圖片吃滿頁面寬度、完整不裁切，上下留白 */
.energy-intelligence-interface-flipbook__page img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* multiply：圖檔白底處讓紙張底紋透出來，深色介面截圖幾乎不受影響 */
    mix-blend-mode: multiply;
}

.energy-intelligence-interface-flipbook__button {
    display: grid;
    width: 52px;
    height: 180px;
    border: 0;
    background: transparent;
    color: rgba(17, 24, 39, 0.36);
    cursor: pointer;
    place-items: center;
    transition: color 0.16s ease, transform 0.16s ease;
}

.energy-intelligence-interface-flipbook__button:hover,
.energy-intelligence-interface-flipbook__button:focus {
    color: #08aef0;
}

.energy-intelligence-interface-flipbook__button:active {
    transform: scale(0.97);
}

.energy-intelligence-interface-flipbook__button span {
    display: block;
    font-size: 4.8rem;
    font-weight: 100;
    line-height: 1;
}

.energy-intelligence-interface-flipbook__controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    /* 對齊書本寬度，比照 BIM 的進度控制列 */
    width: min(100%, 1120px);
    margin: 28px auto 0;
    padding: 0 4px;
}

.energy-intelligence-interface-flipbook__counter {
    color: #111111;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
}

.energy-intelligence-interface-flipbook__range {
    width: 100%;
    accent-color: #111111;
}

.sustainability-continuous-background {
    background-image: var(--sustainability-continuous-bg-image);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

.sustainability-intro {
    position: relative;
    display: grid;
    min-height: 100vh;
    /* 下緣留白縮小，讓介紹文字區與下方 ESG 三面向靠近 */
    padding: calc(var(--header-height) + 72px) 48px clamp(32px, 4vw, 56px);
    overflow: hidden;
    background: transparent;
    /* 內容靠下對齊：維持 100vh（背景橫幅與 ESG 浮水印位置不變），
       但移除垂直置中在文字框下方留下的大片空白 */
    place-items: end start;
}

.sustainability-intro::before {
    position: absolute;
    top: 28%;
    right: 0;
    left: 0;
    height: min(38vh, 360px);
    /* ?v= 是快取版本號，換掉 banner2.png 後請把數字改掉（例如改成當天日期），否則瀏覽器會續用舊圖 */
    background-image: linear-gradient(90deg, rgba(50, 124, 137, 0.38), rgba(50, 124, 137, 0.18)), url('../images/sustainability/banner2.png?v=20260518');
    background-position: center;
    background-size: cover;
    content: '';
}

.sustainability-intro__mark {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: clamp(-86px, -5vw, -24px);
    width: min(44vw, 520px);
    max-width: none;
    opacity: 0.9;
    pointer-events: none;
    transform: translateY(-50%);
}

.sustainability-intro__content {
    position: relative;
    z-index: 2;
    width: min(530px, 100%);
    margin-left: clamp(18px, 3.8vw, 66px);
    /* 靠下對齊後這裡只當作與上緣的最小間距，螢幕變矮時才不會被 overflow:hidden 切掉 */
    margin-top: clamp(24px, 4vw, 56px);
    padding: 36px 32px 38px;
    background: rgba(45, 120, 133, 0.96);
    color: #ffffff;
}

.sustainability-intro__english {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: clamp(3.2rem, 5.8vw, 5.3rem);
    font-weight: 100;
    line-height: 1;
    letter-spacing: 0;
}

.sustainability-intro__title {
    margin: 0 0 24px;
    color: #ffffff;
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0;
}

.sustainability-intro__copy {
    margin: 0;
    color: #ffffff;
    font-size: clamp(0.82rem, 1vw, 0.98rem);
    font-weight: 500;
    line-height: 2.15;
    letter-spacing: 0;
}

/* 行動版專用的內文斷行（桌機預設隱藏，靠自然換行排版） */
.sustainability-intro__copy-br {
    display: none;
}

.sustainability-pillars {
    display: grid;
    /* ESG00.png 本身就有 737px 高，不需要再撐滿一屏；撐滿只會多出置中留白 */
    min-height: auto;
    /* 這一屏不在固定表頭底下（表頭只蓋到 intro），不需要預留 header 高度 */
    padding: clamp(20px, 2.4vw, 34px) 48px 92px;
    background: transparent;
    color: var(--color-navy);
    place-items: center;
}

.sustainability-pillars__carousel {
    /* ESG00.png 原生 1446px 寬，1240 以內都不會放大失真 */
    width: min(1240px, 100%);
}

/* 電腦版：ESG 三面向改用單張整合圖 ESG00.png 呈現（未來會切成三張），隱藏卡片輪播 */
.sustainability-pillars__desktop-image {
    display: block;
    width: 100%;
    height: auto;
}

.sustainability-pillars__stage,
.sustainability-pillars__arrow,
.sustainability-pillars__dots {
    display: none;
}

.sustainability-pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 42px);
    width: 100%;
    align-items: stretch;
}

.sustainability-pillars-card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    min-height: 720px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 8px;
    box-shadow: 0 22px 54px rgba(8, 33, 54, 0.08);
}

.sustainability-pillars-card__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.sustainability-pillars-card__header {
    position: relative;
    display: grid;
    min-height: 138px;
    padding: 16px 18px 34px;
    background: #13ada2;
    color: #ffffff;
    place-items: start center;
}

.sustainability-pillars-card__header::after {
    position: absolute;
    right: -12%;
    bottom: -40px;
    left: -12%;
    height: 82px;
    background: inherit;
    border-radius: 0 0 50% 50%;
    content: '';
}

.sustainability-pillars-card--social .sustainability-pillars-card__header {
    background: #3399a9;
}

.sustainability-pillars-card--governance .sustainability-pillars-card__header {
    background: #0583a6;
}

.sustainability-pillars-card__letter {
    position: relative;
    z-index: 1;
    display: grid;
    width: 72px;
    height: 72px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    place-items: center;
}

.sustainability-pillars-card__title {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
}

.sustainability-pillars-card__title span {
    font-size: 0.74rem;
    font-weight: 400;
    opacity: 0.68;
}

.sustainability-pillars-card__body {
    display: grid;
    gap: 0;
    padding: 30px 34px 32px;
}

.sustainability-pillars-card__item {
    display: grid;
    align-content: center;
    min-height: 128px;
    padding: 18px 0;
    border-bottom: 3px solid currentColor;
    color: #0faea5;
    text-align: center;
}

.sustainability-pillars-card__item:first-child {
    min-height: 96px;
}

.sustainability-pillars-card__item:last-child {
    border-bottom: 0;
}

.sustainability-pillars-card--social .sustainability-pillars-card__item {
    color: #3399a9;
}

.sustainability-pillars-card--governance .sustainability-pillars-card__item {
    color: #0583a6;
}

.sustainability-pillars-card__item h3 {
    margin: 0 0 10px;
    color: var(--color-navy);
    font-size: clamp(0.78rem, 0.92vw, 0.94rem);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0;
}

.sustainability-pillars-card__item strong {
    display: block;
    color: currentColor;
    font-size: clamp(1.95rem, 2.6vw, 3rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
}

.sustainability-pillars-card__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.sustainability-pillars-card__metrics strong {
    font-size: clamp(1.7rem, 2.2vw, 2.55rem);
}

.sustainability-pillars-card__item p {
    margin: 7px 0 0;
    color: currentColor;
    font-size: clamp(0.58rem, 0.66vw, 0.68rem);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;
}

.media-hero {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 58px) 48px 74px;
    overflow: hidden;
    background-image: var(--media-hero-image);
    background-position: center;
    background-size: cover;
    place-items: start start;
}

.media-hero__content {
    width: min(560px, 100%);
    margin-top: clamp(8px, 4vh, 52px);
    margin-left: clamp(0px, 2.4vw, 40px);
}

.media-hero__brand {
    display: block;
    width: clamp(72px, 8vw, 106px);
    height: clamp(72px, 8vw, 106px);
    margin: 0 0 32px;
    color: #ffffff;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.26));
}

.media-hero__title {
    display: inline-block;
    margin: 0 0 38px;
    padding: 12px 26px 16px;
    background: #ffffff;
    color: var(--color-navy);
    font-size: clamp(2rem, 3.1vw, 2.82rem);
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: 0;
}

.media-hero__subtitle {
    margin: 0;
    color: #ffffff;
    font-size: clamp(3rem, 5.3vw, 5.7rem);
    font-weight: 100;
    line-height: 1.16;
    letter-spacing: 0;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.36);
}

.latest-news-hero {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 58px) 48px 74px;
    overflow: hidden;
    background-image: var(--latest-news-hero-image);
    background-position: center;
    background-size: cover;
    place-items: start start;
}

.latest-news-hero__content {
    width: min(560px, 100%);
    margin-top: clamp(8px, 4vh, 52px);
    margin-left: clamp(0px, 2.4vw, 40px);
}

.latest-news-hero__title {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(2rem, 3.1vw, 2.82rem);
    font-weight: 900;
    line-height: 1.32;
    letter-spacing: 0.02em;
    text-shadow: 0 4px 22px rgba(0, 0, 0, 0.45);
}

.latest-news-hero__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1rem, 1.5vw, 1.6rem);
    font-weight: 100;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.32);
}

.latest-news-list {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: clamp(78px, 9vh, 116px) 48px clamp(60px, 8vh, 96px);
    overflow: hidden;
    background-color: #edf0f2;
    background-image: var(--latest-news-list-bg-image);
    background-position: center top;
    background-size: cover;
    place-items: center;
}

.latest-news-list__inner {
    width: min(980px, 100%);
}

.latest-news-list__heading {
    margin: 0 auto clamp(58px, 7vh, 84px);
    text-align: center;
}

.latest-news-list__title {
    margin: 0 0 8px;
    color: #0f2d5b;
    font-size: clamp(3.3rem, 5.4vw, 5.4rem);
    font-weight: 100;
    line-height: 0.9;
    letter-spacing: 0;
}

.latest-news-list__heading h2 {
    margin: 0;
    color: #08aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0;
}

.latest-news-list__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 2.6vw, 40px);
    align-items: stretch;
}

.latest-news-list__empty {
    grid-column: 1 / -1;
    margin: 0;
    color: #333333;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

.latest-news-card {
    --card-pad: clamp(20px, 2vw, 32px);
    --card-edge-gap: clamp(8px, 0.9vw, 12px);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #eef1f3;
    border: 1px solid #141414;
    border-radius: 3px;
    box-shadow: 0 12px 30px rgba(30, 43, 55, 0.16);
    scroll-margin-top: calc(var(--header-height) + 24px);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.latest-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(30, 43, 55, 0.24);
}

.latest-news-card__link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
}

.latest-news-card__header {
    padding: clamp(12px, 1.2vw, 18px) clamp(18px, 1.8vw, 26px);
    background-color: #14345c;
    color: #ffffff;
    font-size: clamp(1.05rem, 1.25vw, 1.3rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

/* 媒體報導 */
.latest-news-card--media .latest-news-card__header,
.latest-news-detail__banner--media {
    background-color: #006c13;
}

/* 工程進度 */
.latest-news-card--progress .latest-news-card__header,
.latest-news-detail__banner--progress {
    background-color: #009db6;
}

/* 活動花絮 */
.latest-news-card--event .latest-news-card__header,
.latest-news-detail__banner--event {
    background-color: #026cb6;
}

/* 個案資訊 */
.latest-news-card--hot .latest-news-card__header,
.latest-news-detail__banner--hot {
    background-color: #026e8b;
}

/* 未對應到的類別 */
.latest-news-detail__banner--default {
    background-color: #14345c;
}

.latest-news-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--card-pad);
    padding-bottom: var(--card-edge-gap);
}

.latest-news-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    margin-bottom: 14px;
}

.latest-news-card__title {
    margin: 0;
    color: #111111;
    font-size: clamp(1.2rem, 1.5vw, 1.55rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

.latest-news-card__date {
    color: #5a5f63;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(0.9rem, 1vw, 1.05rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1;
}

.latest-news-card__content {
    margin-bottom: clamp(16px, 1.6vw, 22px);
    color: #2c2f33;
    font-size: clamp(0.82rem, 0.9vw, 0.95rem);
    font-weight: 500;
    line-height: 1.85;
    letter-spacing: 0;
}

.latest-news-card__content > * {
    margin: 0 0 12px;
}

.latest-news-card__content > :last-child {
    margin-bottom: 0;
}

.latest-news-card__content a {
    position: relative;
    z-index: 3;
    color: #14345c;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.latest-news-card__media {
    margin: auto calc(-1 * (var(--card-pad) - var(--card-edge-gap))) 0;
}

.latest-news-card__media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 10px;
}

/* 客戶指定：圖片高度統一 300px（不論原圖比例），超出畫面的部分接受被裁切 */
.latest-news-card__media img,
.latest-news-card__media video {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* 整張卡片是連結（.latest-news-card__link 蓋在 z-index: 2），影片要墊得比它高，
   否則點播放鍵只會被那層透明連結吃掉而跳去明細頁，看起來就是「轉一轉沒動作」 */
.latest-news-card__video {
    position: relative;
    z-index: 3;
}

/* 「了解更多」按鈕只在手機版出現（見 rwd.css max-width: 767px），桌機版整張卡片本身即為連結 */
.latest-news-card__button {
    display: none;
}

.latest-news-list__divider {
    grid-column: 1 / -1;
    height: 2px;
    margin: clamp(4px, 0.8vw, 12px) 0;
    background-color: #111111;
}

/* 手機版單欄需要每張卡片之間都有分隔線，桌機版兩欄排版不使用 */
.latest-news-list__divider--mobile {
    display: none;
}

.latest-news-pagination {
    display: flex;
    gap: 22px;
    align-items: center;
    justify-content: center;
    margin-top: 76px;
    color: #111111;
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1;
}

.latest-news-pagination a {
    display: inline-grid;
    min-width: 18px;
    min-height: 28px;
    place-items: center;
    color: inherit;
}

.latest-news-pagination a[aria-current='page'] {
    border-bottom: 1px solid currentColor;
}

/* 最新消息明細 */
/* 從列表點進來會帶 #news-detail，扣掉固定頁首高度才不會壓到區塊上緣 */
.latest-news-list--detail {
    scroll-margin-top: var(--header-height);
}

.latest-news-list--detail .latest-news-list__inner {
    width: min(1180px, 100%);
}

/* 類別色條只在手機版出現（見 rwd.css max-width: 767px），桌機版維持原本排版 */
.latest-news-detail__banner {
    display: none;
    margin: 0;
}

.latest-news-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 88px);
    align-items: start;
}

.latest-news-detail__body {
    display: flex;
    flex-direction: column;
}

.latest-news-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 0 0 clamp(14px, 1.6vw, 22px);
    font-size: clamp(0.85rem, 0.95vw, 1rem);
    font-weight: 600;
}

.latest-news-detail__meta time {
    color: #111111;
    letter-spacing: 0.01em;
}

.latest-news-detail__category {
    color: #4a4f53;
    font-weight: 500;
}

.latest-news-detail__title {
    margin: 0 0 clamp(22px, 2.4vw, 34px);
    color: #1a6fc9;
    font-size: clamp(1.55rem, 2.3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.latest-news-detail__content {
    color: #2f3235;
    font-size: clamp(0.86rem, 0.95vw, 1rem);
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.01em;
}

.latest-news-detail__content > * {
    margin: 0 0 6px;
}

.latest-news-detail__content > :last-child {
    margin-bottom: 0;
}

.latest-news-detail__content a {
    color: #1a6fc9;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.latest-news-detail__media {
    margin: 0;
}

/* 明細頁比照列表：高度統一 300px，可被裁切 */
.latest-news-detail__media img,
.latest-news-detail__media video {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
    box-shadow: 0 18px 40px rgba(30, 43, 55, 0.16);
}

/* ===== 明細頁媒體輪播（最新消息、工程實績兩個明細頁共用）=====
   後台一筆資料可以上傳多個檔案，列表與首頁只放第一張（首圖），
   其餘的圖片與影片都在這裡左右輪播。單張時 --single 會把控制項收掉。
   JS 一律委派在 document（admin.js 的 data-news-carousel-*），所以兩頁都不用額外初始化。 */
.news-carousel {
    position: relative;
}

.news-carousel__viewport {
    position: relative;
    overflow: hidden;
    /* 投影改掛在外框：掛在每張 slide 上會被 overflow: hidden 裁掉 */
    box-shadow: 0 18px 40px rgba(30, 43, 55, 0.16);
}

.news-carousel__track {
    display: flex;
    transition: transform 0.35s ease;
}

.news-carousel__slide {
    flex: 0 0 100%;
    min-width: 0;
}

.latest-news-detail__media .news-carousel__slide img,
.latest-news-detail__media .news-carousel__slide video {
    box-shadow: none;
}

.news-carousel__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(17, 17, 17, 0.55);
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.2s ease;
}

.news-carousel__nav:hover,
.news-carousel__nav:focus-visible {
    background-color: rgba(17, 17, 17, 0.82);
}

.news-carousel__nav--prev {
    left: 12px;
}

.news-carousel__nav--next {
    right: 12px;
}

/* 放右上角：影片的原生控制列在下緣，張數放下面會壓到全螢幕／更多選項那幾顆按鈕 */
.news-carousel__counter {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    margin: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: rgba(17, 17, 17, 0.55);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.news-carousel__dots {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
}

.news-carousel__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid #14345c;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.news-carousel__dot.is-active {
    background-color: #14345c;
    transform: scale(1.2);
}

/* 只有一個檔案時輪播退化成單純一張圖，控制項不出現（PHP 也不會輸出，這裡是保險） */
.news-carousel--single .news-carousel__nav,
.news-carousel--single .news-carousel__counter,
.news-carousel--single .news-carousel__dots {
    display: none;
}

.latest-news-detail__nav {
    display: flex;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    justify-content: center;
    margin-top: clamp(48px, 6vh, 84px);
}

.latest-news-detail__nav-button {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: #111111;
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: color 0.2s ease;
}

.latest-news-detail__nav-button:hover {
    color: #1a6fc9;
}

.latest-news-detail__nav-arrow {
    font-size: 0.85em;
}

.latest-news-detail__nav-button.is-disabled {
    color: #b3b8bc;
    pointer-events: none;
}

.civil-mechanical-electrical-hero {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 58px) 48px 74px;
    overflow: hidden;
    background-image: var(--civil-mechanical-electrical-hero-image);
    background-position: center;
    background-size: cover;
    place-items: start end;
}

/* 寬度放寬到能容納單行的英文副標題（約 910px @1920），標題靠右對齊不受影響 */
.civil-mechanical-electrical-hero__content {
    width: min(1020px, 100%);
    margin-top: clamp(8px, 4vh, 52px);
    margin-right: clamp(0px, 2.4vw, 40px);
    text-align: right;
}

/* 桌機版第一屏改採「純白標題直接壓在圖上、靠右」的排版（參考主視覺稿），品牌 LOGO 隱藏 */
.civil-mechanical-electrical-hero__brand {
    display: none;
}

.civil-mechanical-electrical-hero__title {
    display: block;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 24px;
    padding: 0;
    background: none;
    color: #ffffff;
    font-size: clamp(2.1rem, 3.6vw, 3.2rem);
    font-weight: 900;
    line-height: 1.32;
    letter-spacing: 0.02em;
    text-shadow: 0 6px 26px rgba(0, 0, 0, 0.42);
}

.civil-mechanical-electrical-hero__subtitle {
    min-height: 1em;
    margin: 0;
    color: #ffffff;
    font-size: clamp(1rem, 1.7vw, 1.62rem);
    font-weight: 100;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.34);
    /* 英文副標題維持單行，不換行 */
    white-space: nowrap;
}

.civil-mechanical-electrical-cladding {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 54px) 48px 70px;
    overflow: hidden;
    background-color: #edf0f2;
    background-image: var(--civil-mechanical-electrical-cladding-bg-image);
    background-position: center;
    background-size: cover;
    color: #111111;
    place-items: center;
}

.civil-mechanical-electrical-cladding__inner {
    display: grid;
    width: min(1180px, 100%);
}

.civil-mechanical-electrical-cladding__heading {
    margin-bottom: 72px;
    text-align: center;
}

.civil-mechanical-electrical-cladding__title {
    margin: 0 0 8px;
    color: var(--color-navy);
    font-size: clamp(3rem, 5.3vw, 5.8rem);
    font-weight: 100;
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.civil-mechanical-electrical-cladding__subtitle {
    margin: 0;
    color: #08aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
}

.civil-mechanical-electrical-cladding__layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(260px, 2fr);
    align-items: end;
    gap: clamp(42px, 6vw, 92px);
}

.civil-mechanical-electrical-cladding__media {
    margin: 0;
}

.civil-mechanical-electrical-cladding__image {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.civil-mechanical-electrical-cladding__text {
    max-width: 340px;
}

.civil-mechanical-electrical-cladding__copy-title {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #8da2b4;
    color: #1e3859;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: 0;
}

.civil-mechanical-electrical-cladding__copy {
    margin: 0;
    color: #1c2834;
    font-size: 1rem;
    font-weight: 500;
    line-height: 2.08;
    letter-spacing: 0;
}

.civil-mechanical-electrical-special-drain {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 54px) 48px 70px;
    overflow: hidden;
    background: #edf0f2;
    color: #111111;
    place-items: center;
}

.civil-mechanical-electrical-special-drain__inner {
    display: grid;
    width: min(1180px, 100%);
}

.civil-mechanical-electrical-special-drain__heading {
    margin-bottom: 72px;
    text-align: center;
}

.civil-mechanical-electrical-special-drain__title {
    margin: 0 0 8px;
    color: var(--color-navy);
    font-size: clamp(3rem, 5.3vw, 5.8rem);
    font-weight: 100;
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.civil-mechanical-electrical-special-drain__subtitle {
    margin: 0;
    color: #08aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
}

.civil-mechanical-electrical-special-drain__layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(260px, 2fr);
    align-items: end;
    gap: clamp(42px, 6vw, 92px);
}

.civil-mechanical-electrical-special-drain__media {
    margin: 0;
}

.civil-mechanical-electrical-special-drain__image {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.civil-mechanical-electrical-special-drain__text {
    max-width: 340px;
}

.civil-mechanical-electrical-special-drain__copy-title {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #8da2b4;
    color: #1e3859;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: 0;
}

.civil-mechanical-electrical-special-drain__copy {
    margin: 0;
    color: #1c2834;
    font-size: 1rem;
    font-weight: 500;
    line-height: 2.08;
    letter-spacing: 0;
}

.civil-mechanical-electrical-penetration {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 54px) 48px 90px;
    overflow: hidden;
    background-color: #edf0f2;
    background-image: var(--civil-mechanical-electrical-penetration-bg-image);
    background-position: center;
    background-size: cover;
    color: #111111;
    place-items: center;
}

.civil-mechanical-electrical-penetration__inner {
    display: grid;
    width: min(1180px, 100%);
}

.civil-mechanical-electrical-penetration__heading {
    margin-bottom: 72px;
    text-align: center;
}

.civil-mechanical-electrical-penetration__title {
    margin: 0 0 8px;
    color: var(--color-navy);
    font-size: clamp(3rem, 5.3vw, 5.8rem);
    font-weight: 100;
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.civil-mechanical-electrical-penetration__subtitle {
    margin: 0;
    color: #08aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
}

.civil-mechanical-electrical-penetration__layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(260px, 2fr);
    align-items: end;
    gap: clamp(42px, 6vw, 92px);
}

.civil-mechanical-electrical-penetration__media {
    margin: 0;
}

.civil-mechanical-electrical-penetration__image {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.civil-mechanical-electrical-penetration__text {
    max-width: 340px;
}

.civil-mechanical-electrical-penetration__copy-title {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #8da2b4;
    color: #1e3859;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: 0;
}

.civil-mechanical-electrical-penetration__copy {
    margin: 0;
    color: #1c2834;
    font-size: 1rem;
    font-weight: 500;
    line-height: 2.08;
    letter-spacing: 0;
}

/* 土建機電第二屏：給水管披覆／特殊地排／外牆篇新管 三頁工法輪播 */
.cme-carousel {
    position: relative;
    background: #edf0f2;
}

.cme-carousel__stage {
    position: relative;
}

.cme-carousel__viewport {
    overflow: hidden;
}

.cme-carousel__track {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform 0.55s ease;
}

.cme-carousel__slide {
    flex: 0 0 100%;
    min-width: 0;
}

.cme-carousel__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.cme-carousel__arrow:hover {
    background: transparent;
}

.cme-carousel__arrow--prev {
    left: clamp(12px, 2vw, 34px);
}

.cme-carousel__arrow--next {
    right: clamp(12px, 2vw, 34px);
}

.cme-carousel__arrow img {
    display: block;
    width: 22px;
    height: auto;
}

.cme-carousel__dots {
    position: absolute;
    right: 0;
    bottom: clamp(20px, 4vh, 46px);
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.cme-carousel__dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(30, 56, 89, 0.32);
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.cme-carousel__dot.is-active {
    background: var(--color-navy);
    transform: scale(1.25);
}

.building-information-modeling-hero {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 58px) 48px 74px;
    overflow: hidden;
    background-image: var(--building-information-modeling-hero-image);
    background-position: center;
    background-size: cover;
    place-items: start end;
}

.building-information-modeling-hero__content {
    width: min(760px, 100%);
    margin-top: clamp(8px, 4vh, 52px);
    margin-right: clamp(0px, 2.4vw, 40px);
    text-align: right;
}

.building-information-modeling-hero__title {
    margin: 0 0 20px;
    color: #ffffff;
    font-size: clamp(2.2rem, 3.5vw, 3.2rem);
    font-weight: 500;
    line-height: 1.34;
    letter-spacing: 0.04em;
    text-shadow: 0 4px 22px rgba(0, 0, 0, 0.42);
}

.building-information-modeling-hero__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: clamp(0.95rem, 1.5vw, 1.5rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.2em;
    white-space: nowrap;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34);
}

.construction-management-hero {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 58px) 48px 74px;
    overflow: hidden;
    background-image: var(--construction-management-hero-image);
    background-position: center;
    background-size: cover;
    place-items: start start;
}

.construction-management-hero__content {
    width: min(760px, 100%);
    margin-top: clamp(8px, 4vh, 52px);
    margin-left: clamp(0px, 2.4vw, 40px);
    text-align: left;
}

.construction-management-hero__title {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: clamp(2.1rem, 3.8vw, 3.3rem);
    font-weight: 700;
    line-height: 1.36;
    letter-spacing: 0.04em;
    text-shadow: 0 4px 26px rgba(0, 0, 0, 0.42);
}

.construction-management-hero__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: clamp(1rem, 1.9vw, 1.85rem);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.1em;
    white-space: nowrap;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

/* 第二屏：三段制度（左 / 右 / 左 交錯），圖片一律水平置中 */
.construction-management-methods {
    padding: clamp(64px, 9vw, 132px) 48px;
    background: #ffffff;
}

.construction-management-methods__inner {
    width: min(1080px, 100%);
    margin: 0 auto;
}

.construction-management-methods__divider {
    width: 100%;
    height: 0;
    margin: clamp(40px, 6vw, 84px) 0;
    border: 0;
    border-top: 1px solid #dfe4e8;
}

.construction-management-method {
    text-align: left;
}

.construction-management-method--right {
    text-align: right;
}

.construction-management-method__heading {
    margin: 0 0 clamp(14px, 1.6vw, 22px);
}

.construction-management-method__title {
    margin: 0 0 6px;
    color: #b6c0c9;
    font-size: clamp(2.2rem, 4.6vw, 4.2rem);
    font-weight: 100;
    line-height: 1.04;
    letter-spacing: 0.01em;
}

.construction-management-method__subtitle {
    margin: 0;
    color: var(--color-link);
    font-size: clamp(1.25rem, 1.9vw, 1.85rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.construction-management-method__text {
    max-width: 640px;
    margin: 0;
    color: #6b7580;
    font-size: clamp(0.9rem, 1vw, 1.02rem);
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.02em;
}

.construction-management-method--left .construction-management-method__text {
    margin-right: auto;
}

.construction-management-method--right .construction-management-method__text {
    margin-left: auto;
}

.construction-management-method__figure {
    margin: clamp(30px, 4.5vw, 64px) 0 0;
    text-align: center;
}

.construction-management-method__image {
    display: block;
    width: min(980px, 100%);
    height: auto;
    margin: 0 auto;
}

.building-information-modeling-intro {
    position: relative;
    z-index: 2;
    display: grid;
    padding: 96px 24px 122px;
    background: #337283;
    color: #ffffff;
    text-align: center;
    place-items: center;
}

.building-information-modeling-intro::after {
    position: absolute;
    bottom: -136px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 180px;
    background: #337283;
    clip-path: polygon(0% 0%, 0% 25%, 50% 100%, 100% 25%, 100% 0%);
    content: '';
    pointer-events: none;
}

.building-information-modeling-intro__inner {
    position: relative;
    z-index: 2;
    width: min(920px, 100%);
}

.building-information-modeling-intro__title {
    margin: 0 0 22px;
    color: #ffffff;
    font-size: clamp(3.2rem, 5vw, 5.2rem);
    font-weight: 100;
    line-height: 1.18;
    letter-spacing: -0.05em;
}

.building-information-modeling-intro__subtitle {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.2rem, 1.8vw, 1.72rem);
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.building-information-modeling-flipbook {
    position: relative;
    z-index: 1;
    padding: 272px 28px 96px;
    overflow: hidden;
    background-color: #eeeeec;
    background-image: var(--building-information-modeling-book-bg-image);
    background-position: center top;
    background-size: cover;
    color: #123154;
}

.building-information-modeling-flipbook__inner {
    width: 100%;
    margin: 0 auto;
}

.building-information-modeling-flipbook__stage {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 58px;
    gap: 20px;
    align-items: center;
    width: 100%;
}

.building-information-modeling-flipbook__book {
    width: min(100%, 1120px);
    min-height: clamp(360px, 54vw, 720px);
    margin: 0 auto;
    filter: drop-shadow(0 20px 24px rgba(17, 32, 46, 0.3));
}

.building-information-modeling-flipbook__page {
    /* isolation 讓內頁圖的 mix-blend-mode 只跟這一頁的紙張底紋相乘，不會吃到書本外的背景 */
    isolation: isolate;
    overflow: hidden;
    padding: 22px 20px;
    background-color: #ffffff;
    background-image: var(--flipbook-page-bg-image);
    background-position: center center;
    background-size: cover;
    box-shadow: inset 0 0 28px rgba(9, 24, 38, 0.08);
}

/* 圖檔為橫式 BIM 圖說，用 contain 完整呈現不裁切 */
.building-information-modeling-flipbook__page img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* multiply：圖檔白底處讓紙張底紋透出來，線條與色塊維持原本濃度 */
    mix-blend-mode: multiply;
}

.building-information-modeling-flipbook__button {
    display: inline-grid;
    width: 44px;
    height: 160px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(18, 49, 84, 0.34);
    cursor: pointer;
    place-items: center;
    transition: color 0.16s ease, transform 0.16s ease;
}

.building-information-modeling-flipbook__button:hover,
.building-information-modeling-flipbook__button:focus {
    color: rgba(18, 49, 84, 0.68);
}

.building-information-modeling-flipbook__button:active {
    transform: scale(0.97);
}

.building-information-modeling-flipbook__button span {
    display: block;
    font-size: 5rem;
    font-weight: 100;
    line-height: 1;
}

.building-information-modeling-flipbook__controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    width: min(100%, 1120px);
    margin: 30px auto 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(64, 64, 64, 0.82);
    box-shadow: 0 12px 24px rgba(17, 32, 46, 0.16);
}

.building-information-modeling-flipbook__counter {
    min-width: 68px;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.building-information-modeling-flipbook__range {
    width: 100%;
    accent-color: #ffffff;
    cursor: pointer;
}

.building-information-modeling-process {
    display: grid;
    grid-template-rows: auto auto;
    gap: 78px;
    padding: 96px 48px 112px;
    background: linear-gradient(to bottom, #337283 0 50%, #ffffff 50% 100%);
    color: #ffffff;
}

.building-information-modeling-process__intro {
    display: grid;
    width: min(620px, 100%);
    margin: 0 auto;
    text-align: center;
    place-items: center;
}

.building-information-modeling-process__intro p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(0.84rem, 0.96vw, 1rem);
    font-weight: 500;
    line-height: 2.05;
    letter-spacing: 0;
}

/* 電腦版維持三欄並排：外層不建立版面，讓 __grid 直接成為區塊的格線項目 */
.building-information-modeling-process__stage,
.building-information-modeling-process__viewport {
    display: contents;
}

/* 左右切換箭頭僅在手機版輪播時顯示（樣式沿用同頁翻書按鈕） */
.building-information-modeling-process__arrow {
    display: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(18, 49, 84, 0.34);
    cursor: pointer;
    place-items: center;
    transition: color 0.16s ease, transform 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}

.building-information-modeling-process__arrow:hover,
.building-information-modeling-process__arrow:focus {
    color: rgba(18, 49, 84, 0.68);
}

.building-information-modeling-process__arrow:active {
    transform: scale(0.97);
}

.building-information-modeling-process__arrow span {
    display: block;
    font-size: 2.9rem;
    font-weight: 100;
    line-height: 1;
}

.building-information-modeling-process__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: min(100%, 1120px);
    margin: 0 auto;
}

.building-information-modeling-process__dots {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

.building-information-modeling-process__dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(51, 114, 131, 0.32);
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.building-information-modeling-process__dot.is-active {
    background: #337283;
    transform: scale(1.25);
}

.building-information-modeling-process-card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
}

.building-information-modeling-process-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 1.32 / 1;
}

.building-information-modeling-process-card__body {
    min-height: 232px;
    padding: 36px 42px 42px;
    background: #e9e8e4;
    color: #337283;
}

.building-information-modeling-process-card__title {
    margin: 0 0 22px;
    color: var(--color-navy);
    font-size: clamp(1.32rem, 1.55vw, 1.78rem);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
}

.building-information-modeling-process-card__list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    color: #337283;
    font-size: 0.93rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0;
    list-style: none;
}

.building-information-modeling-process-card__list li {
    position: relative;
    padding-left: 18px;
    font-weight:500;
}

.building-information-modeling-process-card__list li::before {
    position: absolute;
    top: 0.58em;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #337283;
    content: '';
    transform: translateY(-50%);
}

.project-evaluation-hero {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 58px) 48px 74px;
    overflow: hidden;
    background-image: var(--project-evaluation-hero-image);
    background-position: center;
    background-size: cover;
    place-items: start start;
}

.project-evaluation-hero__content {
    width: min(720px, 100%);
    margin-top: clamp(8px, 4vh, 52px);
    margin-left: clamp(0px, 2.4vw, 40px);
}

.project-evaluation-hero__title {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: clamp(2.4rem, 3.9vw, 3.6rem);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-shadow: 0 4px 22px rgba(0, 0, 0, 0.45);
}

.project-evaluation-hero__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    font-weight: 100;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
}

.project-private {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 35vh;
    padding: 92px 48px 142px;
    overflow: visible;
    background-color: #f4f5f6;
    background-image: var(--project-private-bg-image);
    background-position: center top;
    background-size: cover;
    color: #111111;
    place-items: start center;
}

.project-private__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(300px, 0.84fr);
    grid-template-rows: auto auto;
    column-gap: clamp(48px, 8vw, 130px);
    row-gap: 8px;
    width: min(1120px, 100%);
}

.project-private__title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    color: #1e3859;
    font-size: clamp(3.4rem, 5.6vw, 5.25rem);
    font-weight: 100;
    line-height: 0.98;
    letter-spacing: 0;
    white-space: nowrap;
}

.project-private__subtitle {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    color: #08aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
}

.project-private__copy {
    grid-column: 2;
    grid-row: 2;
    width: min(380px, 100%);
    margin: 0;
    color: #111111;
    font-size: clamp(0.78rem, 0.88vw, 0.88rem);
    font-weight: 700;
    line-height: 2;
    letter-spacing: 0;
}

.project-records {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 65vh;
    padding: clamp(88px, 9vw, 132px) 48px clamp(92px, 10vw, 150px);
    overflow: visible;
    background-color: #d7eef8;
    background-image: var(--project-records-bg-image);
    background-position: center;
    background-size: cover;
    color: #ffffff;
    place-items: center;
}

.project-records::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 10%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
    content: '';
    pointer-events: none;
}

.project-records__callout {
    position: absolute;
    top: 0;
    left: max(48px, calc((100vw - 1120px) / 2));
    z-index: 3;
    display: grid;
    width: clamp(220px, 18vw, 306px);
    aspect-ratio: 1;
    padding: clamp(28px, 3vw, 42px);
    background: rgba(48, 122, 136, 0.98);
    color: #ffffff;
    place-items: center start;
    transform: translateY(-46%);
}

.project-records__callout p {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.35rem, 1.8vw, 1.9rem);
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: 0;
}

.project-records__stats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(36px, 6vw, 86px);
    align-items: center;
    justify-items: center;
    width: min(940px, 100%);
    margin-top: clamp(30px, 4vw, 58px);
}

.project-records-stat {
    display: grid;
    align-content: center;
    justify-items: center;
    width: min(224px, 100%);
    aspect-ratio: 1;
    padding: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 26%, #096f79 0, #00565e 45%, #003d42 100%);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 18px 34px rgba(0, 56, 62, 0.22);
}

.project-records-stat__label,
.project-records-stat__unit,
.project-records-stat__value {
    margin: 0;
    letter-spacing: 0;
}

.project-records-stat__label,
.project-records-stat__unit {
    color: #ffffff;
    font-size: clamp(1rem, 1.4vw, 1.28rem);
    font-weight: 900;
    line-height: 1.25;
}

.project-records-stat__value {
    margin: 8px 0 6px;
    color: #25e8f4;
    font-size: clamp(2.18rem, 3.1vw, 3.12rem);
    font-style: italic;
    font-weight: 900;
    line-height: 1;
}

.project-gallery {
    display: grid;
    min-height: 100vh;
    padding: 72px 48px 74px;
    background-color: #e7e8e9;
    background-image: var(--project-gallery-bg-image);
    background-position: center;
    background-size: cover;
    color: #111111;
    place-items: start center;
}

.project-gallery__inner {
    display: grid;
    gap: clamp(54px, 6vw, 86px);
    width: min(1120px, 100%);
}

.project-gallery__top {
    display: grid;
    grid-template-columns: minmax(210px, 0.96fr) minmax(320px, 1.04fr);
    gap: clamp(52px, 10vw, 150px);
    align-items: start;
}

.project-gallery-filter {
    position: relative;
    width: min(260px, 100%);
    color: #ffffff;
}

.project-gallery-filter summary {
    display: grid;
    grid-template-columns: 1fr 34px;
    gap: 10px;
    align-items: center;
    min-height: 52px;
    padding: 0 7px 0 28px;
    border-radius: 999px;
    background: #2d7e8d;
    color: #ffffff;
    cursor: pointer;
    font-size: 1.28rem;
    font-weight: 900;
    line-height: 1;
    list-style: none;
}

.project-gallery-filter summary::-webkit-details-marker {
    display: none;
}

.project-gallery-filter__icon {
    position: relative;
    display: grid;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    place-items: center;
}

.project-gallery-filter__icon::before {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #2d7e8d;
    content: '';
    transform: translateX(2px);
}

.project-gallery-filter[open] .project-gallery-filter__icon::before {
    transform: translateY(2px) rotate(90deg);
}

.project-gallery-filter__menu {
    position: absolute;
    z-index: 5;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid rgba(45, 126, 141, 0.24);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 34px rgba(10, 42, 54, 0.14);
}

.project-gallery-filter__menu button {
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    color: #1e3859;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 800;
    text-align: left;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.project-gallery-filter__menu button:hover,
.project-gallery-filter__menu button:focus {
    background: rgba(8, 174, 240, 0.1);
    color: #08aef0;
}

.project-gallery__copy {
    width: min(420px, 100%);
    margin: 0;
    color: #111111;
    font-size: clamp(0.82rem, 0.92vw, 0.92rem);
    font-weight: 700;
    line-height: 2.12;
    letter-spacing: 0;
}

.project-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(38px, 4.5vw, 64px) clamp(36px, 5vw, 62px);
}

.project-gallery-card {
    display: grid;
    overflow: hidden;
    border: 1px solid #8fb8c5;
    background: #ffffff;
    color: #565656;
}

.project-gallery-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.26;
    object-fit: cover;
}

.project-gallery-card h3 {
    display: grid;
    min-height: 46px;
    margin: 0;
    padding: 8px 12px 10px;
    color: #5d666b;
    font-size: clamp(1rem, 1.2vw, 1.18rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    place-items: center;
    text-align: center;
}

.project-gallery-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
    justify-content: center;
    margin-top: -12px;
    color: #111111;
    font-size: 1.42rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1;
}

.project-gallery-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    color: #111111;
    transition: color 0.16s ease, transform 0.16s ease;
}

.project-gallery-pagination a:hover,
.project-gallery-pagination a:focus {
    color: #08aef0;
}

.project-gallery-pagination a:active {
    transform: scale(0.97);
}

.project-gallery-pagination a[aria-current='page'] {
    text-decoration: underline;
    text-underline-offset: 8px;
}

.project-portfolio-hero {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 58px) 48px 74px;
    overflow: hidden;
    background-image: var(--project-portfolio-hero-image);
    background-position: center;
    background-size: cover;
    place-items: start start;
}

.project-portfolio-hero__content {
    width: min(620px, 100%);
    margin-top: clamp(8px, 4vh, 52px);
    margin-left: clamp(0px, 2.4vw, 40px);
}

.project-portfolio-hero__brand {
    display: block;
    width: clamp(72px, 8vw, 106px);
    height: clamp(72px, 8vw, 106px);
    margin: 0 0 32px;
    color: #ffffff;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.26));
}

.project-portfolio-hero__title {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(2.2rem, 3.4vw, 3.1rem);
    font-weight: 700;
    line-height: 1.34;
    letter-spacing: 0.02em;
    text-shadow: 0 4px 22px rgba(0, 0, 0, 0.42);
}

.project-portfolio-hero__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.32);
    white-space: nowrap;
}

.project-portfolio-private {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 35vh;
    padding: 92px 48px 142px;
    overflow: visible;
    background-color: #edf0f2;
    background-image: var(--project-portfolio-private-bg-image);
    background-position: center top;
    background-size: cover;
    color: #111111;
    place-items: start center;
}

.project-portfolio-private__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(300px, 0.84fr);
    grid-template-rows: auto auto;
    column-gap: clamp(48px, 8vw, 130px);
    row-gap: 8px;
    width: min(1120px, 100%);
}

.project-portfolio-private__title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    color: #1e3859;
    font-size: clamp(3.4rem, 5.6vw, 5.25rem);
    font-weight: 100;
    line-height: 0.98;
    letter-spacing: 0;
    white-space: nowrap;
}

.project-portfolio-private__subtitle {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    color: #08aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
}

/* 右側內文與左側大標題（__title）上緣對齊，跨兩列避免撐開標題與副標題的間距 */
.project-portfolio-private__copy {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    width: min(380px, 100%);
    margin: 0;
    color: #111111;
    /* 內文字級放大 1.5 倍 */
    font-size: clamp(1.17rem, 1.32vw, 1.32rem);
    line-height: 2;
    letter-spacing: 0;
}

.project-portfolio-records {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 65vh;
    padding: clamp(88px, 9vw, 132px) 48px clamp(92px, 10vw, 150px);
    overflow: visible;
    background-color: #d7eef8;
    background-image: var(--project-portfolio-records-bg-image);
    background-position: center;
    background-size: cover;
    color: #ffffff;
    place-items: center;
}

.project-portfolio-records::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 25%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #edf0f2);
    content: '';
    pointer-events: none;
}

.project-portfolio-records__callout {
    position: absolute;
    top: 49px;
    left: max(48px, calc((100vw - 1120px) / 2));
    z-index: 2;
    display: grid;
    width: clamp(220px, 21vw, 340px);
    aspect-ratio: 1;
    padding: clamp(28px, 3vw, 42px);
    background: rgba(48, 122, 136, 0.98);
    color: #ffffff;
    /* place-items: center start; */
    transform: translateY(-46%);
}

.project-portfolio-records__callout p {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.35rem, 1.8vw, 1.9rem);
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: 0;
}

/* 標語下方內文：僅手機版顯示（電腦版維持在民間工程區塊內） */
.project-portfolio-records__copy {
    display: none;
}

.project-portfolio-records__stats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(36px, 6vw, 36px);
    align-items: center;
    justify-items: center;
    width: min(940px, 100%);
}

.project-portfolio-records-stat {
    display: grid;
    align-content: center;
    justify-items: center;
    width: min(287px, 100%);
    aspect-ratio: 1;
    padding: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 26%, #096f79 0, #00565e 45%, #003d42 100%);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 18px 34px rgba(0, 56, 62, 0.22);
    gap:20px;
}

.project-portfolio-records-stat__label,
.project-portfolio-records-stat__unit,
.project-portfolio-records-stat__value {
    margin: 0;
    letter-spacing: 0;
}

.project-portfolio-records-stat__label,
.project-portfolio-records-stat__unit {
    color: #ffffff;
    font-size: clamp(1rem, 0vw, 2rem);
    font-weight: 600;
    line-height: 1.25;
}

.project-portfolio-records-stat__value {
    margin: 8px 0 6px;
    color: #25e8f4;
    font-size: clamp(2.18rem, 3.1vw, 3.12rem);
    font-style: italic;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.project-portfolio-gallery {
    display: grid;
    min-height: 100vh;
    /* 從明細頁帶 #project-portfolio-gallery 回來時，扣掉固定頁首高度才不會被壓住 */
    scroll-margin-top: var(--header-height);
    padding: 72px 48px 74px;
    background-color: #edf0f2;
    background-image: var(--project-portfolio-gallery-bg-image);
    background-position: center;
    background-size: cover;
    color: #111111;
    place-items: start center;
}

.project-portfolio-gallery__inner {
    display: grid;
    gap: clamp(54px, 6vw, 86px);
    width: min(1120px, 100%);
}

.project-portfolio-gallery__top {
    display: grid;
    grid-template-columns: minmax(210px, 0.96fr) minmax(320px, 1.04fr);
    gap: clamp(52px, 10vw, 150px);
    align-items: start;
}

.project-portfolio-gallery-filter {
    position: relative;
    width: min(260px, 100%);
    color: #ffffff;
}

.project-portfolio-gallery-filter > summary {
    display: grid;
    grid-template-columns: 1fr 34px;
    gap: 10px;
    align-items: center;
    min-height: 52px;
    padding: 0 7px 0 28px;
    border-radius: 999px;
    background: var(--color-navy);
    color: #ffffff;
    cursor: pointer;
    font-size: 1.28rem;
    font-weight: 900;
    line-height: 1;
    list-style: none;
}

.project-portfolio-gallery-filter summary::-webkit-details-marker {
    display: none;
}

.project-portfolio-gallery-filter__icon {
    position: relative;
    display: grid;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    place-items: center;
}

.project-portfolio-gallery-filter__icon::before {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #2d7e8d;
    content: '';
    transform: translateX(2px);
}

.project-portfolio-gallery-filter[open] .project-portfolio-gallery-filter__icon::before {
    transform: translateY(2px) rotate(90deg);
}

.project-portfolio-gallery-filter__menu {
    position: absolute;
    z-index: 5;
    top: calc(100% + 12px);
    left: 0;
    display: grid;
    gap: 10px;
    padding-left: 24px;
}

.project-portfolio-gallery-filter__group {
    position: relative;
    width: min(168px, 100%);
}

.project-portfolio-gallery-filter__type {
    display: flex;
    width: 100%;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    background: var(--color-navy);
    color: #ffffff;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.04rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: left;
    transition: color 0.16s ease;
}

.project-portfolio-gallery-filter__group:hover > .project-portfolio-gallery-filter__type,
.project-portfolio-gallery-filter__group:focus-within > .project-portfolio-gallery-filter__type,
.project-portfolio-gallery-filter__group.is-active > .project-portfolio-gallery-filter__type {
    color: #08aef0;
}

/* 狀態子選單預設收起，滑鼠移入分類（或鍵盤聚焦）才在右側展開 */
.project-portfolio-gallery-filter__submenu {
    position: absolute;
    top: 0;
    left: 100%;
    display: grid;
    gap: 8px;
    /* 用 padding 讓分類與子選單之間的空隙仍在滑鼠可停留範圍內，避免移動途中收起 */
    padding-left: 8px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.16s ease, visibility 0.16s ease;
}

.project-portfolio-gallery-filter__group:hover > .project-portfolio-gallery-filter__submenu,
.project-portfolio-gallery-filter__group:focus-within > .project-portfolio-gallery-filter__submenu {
    visibility: visible;
    opacity: 1;
}

.project-portfolio-gallery-filter__submenu a {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 0 16px;
    background: var(--color-navy);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.16s ease;
}

.project-portfolio-gallery-filter__submenu a:hover,
.project-portfolio-gallery-filter__submenu a:focus {
    color: #08aef0;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 副標題＋內文包成一組，間距不受左側篩選器高度影響 */
.project-portfolio-gallery__intro {
    width: min(600px, 100%);
}

.project-portfolio-gallery__subtitle {
    margin: 0 0 8px;
    color: #08aef0;
    font-size: clamp(1.62rem, 1.95vw, 2.08rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
}

.project-portfolio-gallery__copy {
    /* 字級放大後仍要放得下原本以 <br> 排定的每一行，因此同步放寬容器 */
    width: min(600px, 100%);
    margin: 0;
    color: #111111;
    /* 內文字級放大 1.5 倍 */
    font-size: clamp(1.23rem, 1.38vw, 1.38rem);
    line-height: 2.12;
    letter-spacing: 0;
}

/* 逐句斷行版內文：僅手機版顯示 */
.project-portfolio-gallery__copy-m {
    display: none;
}

.project-portfolio-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(38px, 4.5vw, 64px) clamp(36px, 5vw, 62px);
}

.project-portfolio-gallery-card {
    display: grid;
    overflow: hidden;
    border: 1px solid #8fb8c5;
    background: #ffffff;
    color: #565656;
}

.project-portfolio-gallery-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.26;
    object-fit: cover;
}

.project-portfolio-gallery-card h3 {
    display: grid;
    min-height: 46px;
    margin: 0;
    padding: 8px 12px 10px;
    color: #5d666b;
    font-size: clamp(1rem, 1.2vw, 1.18rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    place-items: center;
    text-align: center;
}

.project-portfolio-gallery-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
    justify-content: center;
    margin-top: -12px;
    color: #111111;
    font-size: 1.42rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1;
}

.project-portfolio-gallery-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    color: #111111;
    transition: color 0.16s ease, transform 0.16s ease;
}

.project-portfolio-gallery-pagination a:hover,
.project-portfolio-gallery-pagination a:focus {
    color: #08aef0;
}

.project-portfolio-gallery-pagination a:active {
    transform: scale(0.97);
}

.project-portfolio-gallery-pagination a[aria-current='page'] {
    text-decoration: underline;
    text-underline-offset: 8px;
}

/* 只有一頁（六筆以內）時整列分頁不顯示 */
.project-portfolio-gallery-pagination[hidden] {
    display: none;
}

/* 已在第一頁／最後一頁時的上下頁箭頭 */
.project-portfolio-gallery-pagination a[aria-disabled='true'] {
    color: #b4bcc2;
    pointer-events: none;
}

.project-portfolio-gallery-pagination__gap {
    color: #8c9399;
}

/* 分頁只顯示當前頁的卡片；手機版改為輪播，會在 rwd.css 還原全部顯示 */
.project-portfolio-gallery-card.is-paged-out {
    display: none;
}

/* 工程作品輪播：電腦版維持九宮格，箭頭與圓點僅手機版顯示 */
.project-portfolio-gallery__arrow,
.project-portfolio-gallery__dots {
    display: none;
}

/* 篩選後沒有符合的工程時顯示 */
.project-portfolio-gallery__empty {
    margin: 48px 0 0;
    color: #666666;
    font-size: 1.05rem;
    text-align: center;
}

.project-portfolio-gallery__empty[hidden] {
    display: none;
}

/* 工程作品卡片：整張卡片可點擊進入工程明細 */
.project-portfolio-gallery-card {
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.project-portfolio-gallery-card:hover,
.project-portfolio-gallery-card:focus-visible {
    border-color: #08aef0;
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(15, 63, 90, 0.14);
    outline: none;
}

/* 工程明細：第二屏，左圖右資訊，對照設計稿 */
.project-portfolio-detail {
    display: grid;
    min-height: 100vh;
    padding: clamp(96px, 12vh, 150px) 48px;
    background: #ffffff;
    place-items: center;
}

/* 明細頁分類標題僅手機版顯示，電腦版維持左圖右資訊版面 */
.project-portfolio-detail__category {
    display: none;
}

.project-portfolio-detail__inner {
    display: grid;
    /* 圖片欄放大到跟資訊欄差不多寬，再用 stretch 讓兩欄同高，圖片高度就會對齊右邊的規格表 */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: clamp(40px, 4.5vw, 88px);
    align-items: stretch;
    width: min(1320px, 100%);
}

/* 圖片欄高度取「規格表高度」與「1.32:1 原比例」中的較大者：
   規格欄位填滿時跟著表格拉高，只填兩三項時圖片也不會被壓扁。 */
.project-portfolio-detail__media {
    position: relative;
    margin: 0;
    aspect-ratio: 1.32 / 1;
    min-height: 0;
}

/* 輪播用絕對定位撐滿整格，圖片才會剛好等於右欄高度 */
.project-portfolio-detail__media .news-carousel {
    position: absolute;
    inset: 0;
}

.project-portfolio-detail__media .news-carousel__viewport,
.project-portfolio-detail__media .news-carousel__track,
.project-portfolio-detail__media .news-carousel__slide {
    height: 100%;
}

/* 原本的工程明細圖就沒有投影，沒必要因為改用輪播而多出一層 */
.project-portfolio-detail__media .news-carousel__viewport {
    box-shadow: none;
}

.project-portfolio-detail__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 圓點壓在圖片下緣，不占額外高度，圖片才能跟規格表齊高 */
.project-portfolio-detail__media .news-carousel__dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    z-index: 2;
    margin: 0;
    padding: 7px 12px;
    border-radius: 999px;
    background-color: rgba(17, 17, 17, 0.45);
    transform: translateX(-50%);
}

.project-portfolio-detail__media .news-carousel__dot {
    border-color: #ffffff;
}

.project-portfolio-detail__media .news-carousel__dot.is-active {
    background-color: #ffffff;
}

/* 兩欄改成 stretch 之後，資訊欄內容自己再垂直置中，維持原本的對齊 */
.project-portfolio-detail__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-portfolio-detail__title {
    margin: 0;
    color: #08aef0;
    font-size: clamp(1.9rem, 2.6vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

.project-portfolio-detail__specs {
    margin: clamp(28px, 3vw, 40px) 0 0;
    border: 1px solid #dcdfe2;
    border-bottom: 0;
}

.project-portfolio-detail__spec {
    display: grid;
    grid-template-columns: minmax(118px, 0.3fr) minmax(0, 0.7fr);
    border-bottom: 1px solid #dcdfe2;
}

.project-portfolio-detail__spec dt {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 14px;
    border-right: 1px solid #dcdfe2;
    color: #6f7479;
    font-size: clamp(0.86rem, 1vw, 1rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-align: center;
}

.project-portfolio-detail__spec dd {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 15px 24px;
    color: #3c3f42;
    font-size: clamp(0.86rem, 1vw, 1rem);
    line-height: 1.5;
}

/* 基地位置這類長地址在手機版會被系統自動判定成連結（iOS 會加虛線底線），這裡一律當純文字呈現 */
.project-portfolio-detail__spec dd a {
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
}

.project-portfolio-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 26px;
    align-self: flex-end;
    margin-top: clamp(26px, 3vw, 40px);
    padding: 12px 30px;
    border: 1px solid #c7ccd0;
    border-radius: 999px;
    color: #3c3f42;
    font-size: clamp(0.9rem, 1vw, 1rem);
    letter-spacing: 0.06em;
    text-decoration: none;
    background: #ffffff;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.project-portfolio-detail__back:hover,
.project-portfolio-detail__back:focus-visible {
    border-color: #08aef0;
    color: #08aef0;
    outline: none;
}

.project-portfolio-detail__back-arrow {
    font-size: 1.15em;
    line-height: 1;
}

.project-evaluation-estimating {
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 74px) 48px 92px;
    background-color: #edf0f2;
    background-image: var(--project-evaluation-estimating-bg-image);
    background-position: center;
    background-size: cover;
    color: #111111;
    place-items: start center;
}

.project-evaluation-estimating__inner {
    display: grid;
    gap: 78px;
    width: min(1120px, 100%);
}

.project-evaluation-estimating__heading {
    display: grid;
    justify-items: start;
}

.project-evaluation-estimating__title {
    margin: 0 0 4px;
    color: #1e3859;
    font-size: clamp(3rem, 5.55vw, 5.15rem);
    font-weight: 100;
    line-height: 0.98;
    letter-spacing: -0.05em;
    white-space: nowrap;
}

.project-evaluation-estimating__subtitle {
    margin: 0;
    color: #08aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
}

.project-evaluation-estimating__body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 76px;
    align-items: start;
}

.project-evaluation-estimating__intro {
    display: grid;
    gap: 26px;
    padding-top: 8px;
}

.project-evaluation-estimating__copy {
    width: min(330px, 100%);
    margin: 0;
    color: #111111;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 2.08;
    letter-spacing: 0;
}

.project-evaluation-estimating__map-figure {
    margin: 0;
}

.project-evaluation-estimating__map {
    display: block;
    width: min(330px, 100%);
    aspect-ratio: 16 / 7;
    object-fit: cover;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(21, 42, 62, 0.12);
}

.project-evaluation-estimating-form {
    width: 100%;
    min-width: 0;
}

.project-evaluation-estimating-form__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 34px;
}

.project-evaluation-estimating-form__field {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    color: #9a9a9a;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
}

.project-evaluation-estimating-form__field--full {
    grid-column: 1 / -1;
}

.project-evaluation-estimating-form__field--textarea {
    align-items: start;
}

.project-evaluation-estimating-form__field--textarea span {
    padding-top: 9px;
}

/* 必填欄位（聯絡人／聯絡電話）：標籤後面補一個紅色星號 */
.project-evaluation-estimating-form__field--required > span::after {
    margin-left: 3px;
    color: #d0342c;
    content: '*';
    font-weight: 700;
}

.project-evaluation-estimating-form input[type='text'],
.project-evaluation-estimating-form input[type='tel'],
.project-evaluation-estimating-form input[type='email'],
.project-evaluation-estimating-form textarea {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 8px 13px;
    border: 0;
    background: rgba(255, 255, 255, 0.94);
    color: #111111;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    outline: 1px solid transparent;
    transition: outline-color 0.16s ease, box-shadow 0.16s ease;
}

.project-evaluation-estimating-form textarea {
    min-height: 86px;
    resize: vertical;
}

.project-evaluation-estimating-form input[type='text']:focus,
.project-evaluation-estimating-form input[type='tel']:focus,
.project-evaluation-estimating-form input[type='email']:focus,
.project-evaluation-estimating-form textarea:focus {
    outline-color: rgba(8, 174, 240, 0.58);
    box-shadow: 0 0 0 3px rgba(8, 174, 240, 0.12);
}

.project-evaluation-estimating-form__footer {
    display: grid;
    grid-template-columns: minmax(190px, 0.88fr) minmax(0, 1.12fr);
    gap: 18px;
    align-items: start;
    margin-top: 18px;
}

.project-evaluation-estimating-form__robot {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
    min-height: 78px;
    padding: 10px;
    background: #ffffff;
    color: #111111;
    font-size: 0.76rem;
    font-weight: 800;
    box-shadow: 0 7px 16px rgba(13, 28, 42, 0.18);
    overflow: hidden;
}

.project-evaluation-estimating-form__robot .g-recaptcha {
    max-width: 100%;
}

.project-evaluation-estimating-form__recaptcha-notice {
    max-width: 280px;
    margin: 0;
    color: #777777;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.6;
}

.project-evaluation-estimating-form__privacy input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #2c8291;
}

.project-evaluation-estimating-form__submit-area {
    display: flex;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 14px;
    align-items: start;
    flex-direction: column;
}

.project-evaluation-estimating-form__privacy {
    display: inline-flex;
    gap: 8px;
    align-items: flex-start;
    color: #8a8a8a;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.5;
}

.project-evaluation-estimating-form__privacy input {
    width: 13px;
    height: 13px;
    margin-top: 2px;
}

.project-evaluation-estimating-form__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 0;
    background: #2c8291;
    color: #ffffff;
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1;
    transition: transform 0.16s ease, background-color 0.16s ease;
    width:120px;
}

.project-evaluation-estimating-form__button:active {
    transform: scale(0.97);
}

.customer-service-hero {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 58px) 48px 74px;
    overflow: hidden;
    background-image: var(--customer-service-hero-image);
    background-position: center;
    background-size: cover;
    place-items: start start;
}

.customer-service-hero__content {
    width: min(600px, 100%);
    margin-top: clamp(8px, 4vh, 52px);
    margin-left: clamp(0px, 2.4vw, 40px);
}

/* 桌機版第一屏改採「白色標題直接壓在圖上」的排版，品牌 LOGO 隱藏（參考主視覺稿） */
.customer-service-hero__brand {
    display: none;
}

.customer-service-hero__title {
    display: block;
    margin: 0 0 22px;
    padding: 0;
    background: none;
    color: #ffffff;
    font-size: clamp(2.1rem, 3.6vw, 3.2rem);
    font-weight: 700;
    line-height: 1.34;
    letter-spacing: 0.04em;
    text-shadow: 0 4px 26px rgba(0, 0, 0, 0.42);
}

.customer-service-hero__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(0.95rem, 1.55vw, 1.28rem);
    font-weight: 100;
    line-height: 1.5;
    letter-spacing: 0.14em;
    white-space: nowrap;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.34);
}

.customer-service-contact {
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 70px) 48px 92px;
    background-color: #edf0f2;
    /* ?v= 是快取版本號，換掉 bg4.webp 後請把數字改掉（例如改成當天日期），否則瀏覽器會續用舊圖 */
    background-image: url('../images/bg4.webp?v=20260626');
    background-position: center;
    background-size: cover;
    color: #111111;
    place-items: start center;
}

.customer-service-contact__inner {
    display: grid;
    gap: 62px;
    width: min(1120px, 100%);
}

.customer-service-contact__heading {
    display: grid;
    justify-items: start;
}

.customer-service-contact__title {
    margin: 0 0 4px;
    color: var(--color-navy);
    font-size: 5.15rem;
    font-weight: 100;
    line-height: 0.98;
    letter-spacing: -0.05em;
    white-space: nowrap;
}

.customer-service-contact__subtitle {
    margin: 0;
    color: #08aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
}

.customer-service-contact__consultation {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 76px;
    align-items: start;
}

.customer-service-contact__intro {
    display: grid;
    gap: 26px;
    padding-top: 8px;
}

.customer-service-contact__copy {
    width: min(330px, 100%);
    margin: 0;
    color: #111111;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 2.08;
    letter-spacing: 0;
}

.customer-service-contact__map-figure {
    margin: 0;
}

.customer-service-contact__map {
    display: block;
    width: min(330px, 100%);
    aspect-ratio: 16 / 7;
    object-fit: cover;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(21, 42, 62, 0.12);
}

.customer-service-form {
    width: 100%;
    min-width: 0;
}

.customer-service-form__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 34px;
}

.customer-service-form__field {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    color: #9a9a9a;
    font-size: 0.82rem;
    line-height: 1.2;
}

.customer-service-form__field--full {
    grid-column: 1 / -1;
}

.customer-service-form__field--textarea {
    align-items: start;
}

.customer-service-form__field--textarea span {
    padding-top: 9px;
}

/* 必填欄位（聯絡人／聯絡電話）：標籤後面補一個紅色星號 */
.customer-service-form__field--required > span::after {
    margin-left: 3px;
    color: #d0342c;
    content: '*';
    font-weight: 700;
}

.customer-service-form input[type='text'],
.customer-service-form input[type='tel'],
.customer-service-form input[type='email'],
.customer-service-form textarea {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 8px 13px;
    border: 0;
    background: rgba(255, 255, 255, 0.94);
    color: #111111;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    outline: 1px solid transparent;
    transition: outline-color 0.16s ease, box-shadow 0.16s ease;
}

.customer-service-form textarea {
    min-height: 86px;
    resize: vertical;
}

.customer-service-form input[type='text']:focus,
.customer-service-form input[type='tel']:focus,
.customer-service-form input[type='email']:focus,
.customer-service-form textarea:focus {
    outline-color: rgba(8, 174, 240, 0.58);
    box-shadow: 0 0 0 3px rgba(8, 174, 240, 0.12);
}

.customer-service-form__footer {
    display: grid;
    grid-template-columns: minmax(190px, 0.88fr) minmax(0, 1.12fr);
    gap: 18px;
    align-items: start;
    margin-top: 18px;
    margin-left: 85px;
}

.customer-service-form__robot {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
    min-height: 78px;
    padding: 10px;
    background: #ffffff;
    color: #111111;
    font-size: 0.76rem;
    font-weight: 800;
    box-shadow: 0 7px 16px rgba(13, 28, 42, 0.18);
    overflow: hidden;
}

.customer-service-form__robot .g-recaptcha {
    max-width: 100%;
}

.customer-service-form__recaptcha-notice {
    max-width: 280px;
    margin: 0;
    color: #777777;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.6;
}

.customer-service-form__privacy input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #2c8291;
}

.customer-service-form__submit-area {
    display: flex;
    gap: 14px;
    align-items: start;
    flex-direction: column;
}

.customer-service-form__privacy {
    display: inline-flex;
    gap: 8px;
    align-items: flex-start;
    color: #8a8a8a;
    font-size: 0.68rem;
    line-height: 1.5;
}

.customer-service-form__privacy input {
    width: 13px;
    height: 13px;
    margin-top: 2px;
}

.customer-service-form__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    width:120px;
    border: 0;
    background: #2c8291;
    color: #ffffff;
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1;
    transition: transform 0.16s ease, background-color 0.16s ease;
}

.customer-service-form__button:active {
    transform: scale(0.97);
}

.customer-service-contact__feature {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 78px;
    align-items: center;
    width: min(900px, 100%);
    margin-top: 28px;
}

.customer-service-contact__feature-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 18px 34px rgba(15, 31, 46, 0.14);
}

.customer-service-contact__feature-copy {
    display: grid;
    gap: 20px;
    justify-items: start;
    width: min(360px, 100%);
}

.customer-service-contact__feature-copy p {
    margin: 0;
    color: #111111;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 2.3;
    letter-spacing: 0;
}

.customer-service-contact__feature-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 26px;
    padding: 0 18px;
    border: 1px solid #9ba9b4;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #557086;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.customer-service-contact__feature-button:active {
    transform: scale(0.97);
}

.benefits-hero {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 58px) 48px 74px;
    overflow: hidden;
    background-image: var(--benefits-hero-image);
    background-position: center;
    background-size: cover;
    place-items: start end;
}

.benefits-hero__content {
    margin-top: clamp(8px, 4vh, 52px);
    margin-right: clamp(0px, 2.4vw, 40px);
    text-align: center;
}

.benefits-hero__title {
    margin: 0 0 22px;
    color: #ffffff;
    font-size: clamp(2.2rem, 3.6vw, 3.4rem);
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 18px rgba(4, 23, 45, 0.45);
    text-align: right;
}

.benefits-hero__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: clamp(1.05rem, 1.55vw, 1.55rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-shadow: 0 1px 10px rgba(4, 23, 45, 0.3);
    text-align: right;
}

.about-hero,
.sustainability-hero,
.media-hero,
.latest-news-hero,
.civil-mechanical-electrical-hero,
.energy-intelligence-hero,
.building-information-modeling-hero,
.construction-management-hero,
.project-evaluation-hero,
.project-portfolio-hero,
.customer-service-hero,
.benefits-hero {
    min-height: var(--front-subpage-hero-min-height);
}

.benefits-events {
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 46px) 48px 76px;
    background-color: #edf0f2;
    background-image: var(--benefits-events-bg-image);
    background-position: center;
    background-size: cover;
    color: #111111;
    place-items: start center;
}

.benefits-events__inner {
    display: grid;
    justify-items: center;
    width: min(1120px, 100%);
    margin: 0 auto;
}

.benefits-events__heading {
    display: grid;
    justify-items: center;
    width: min(900px, 100%);
    margin: 0 auto 68px;
    text-align: center;
}

.benefits-events__title {
    margin: 0 0 8px;
    color: var(--color-navy);
    font-size: clamp(3.25rem, 6.2vw, 6.7rem);
    font-weight: 100;
    line-height: 0.94;
    letter-spacing: -0.05em;
}

.benefits-events__subtitle {
    margin: 0 0 46px;
    color: #08aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}

.benefits-events__intro-title {
    margin: 0 0 10px;
    color: #111111;
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: 0;
}

.benefits-events__copy {
    width: min(640px, 100%);
    margin: 0;
    color: #111111;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.95;
    text-align: center;
}

.benefits-events__empty {
    margin: 0;
    color: var(--color-navy);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.6;
    text-align: center;
}

.benefits-events__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 50px 34px;
    width: min(1050px, 100%);
}

.benefits-events-card {
    display: grid;
    gap: 14px;
    min-width: 0;
    margin: 0;
}

/* 非目前分頁的活動卡片：display: grid 會蓋掉瀏覽器預設的 [hidden]，必須顯式隱藏 */
.benefits-events-card[hidden] {
    display: none;
}

.benefits-events-card__trigger {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
    overflow: hidden;
}

.benefits-events-card__trigger:focus-visible {
    outline: 2px solid var(--color-navy);
    outline-offset: 3px;
}

.benefits-events-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    transition: transform 0.45s ease;
}

.benefits-events-card__trigger:hover img,
.benefits-events-card__trigger:focus-visible img {
    transform: scale(1.05);
}

.benefits-events-card__count {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    gap: 5px;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(8, 16, 28, 0.62);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    pointer-events: none;
}

.benefits-events-card__count svg {
    display: block;
}

.benefits-events-card__title {
    color: var(--color-navy);
    font-size: clamp(1.18rem, 1.55vw, 1.72rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
}

.benefits-events__pagination {
    display: inline-flex;
    gap: 22px;
    align-items: center;
    justify-content: center;
    margin-top: 76px;
    color: #111111;
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1;
}

.benefits-events__pagination a {
    display: inline-grid;
    min-width: 18px;
    min-height: 28px;
    place-items: center;
    color: inherit;
}

.benefits-events__pagination a.is-active {
    border-bottom: 1px solid currentColor;
}

.benefits-events__pagination a.is-disabled {
    opacity: 0.28;
    cursor: default;
    pointer-events: none;
}

/* 只有一頁時整列分頁不顯示（inline-flex 會蓋掉預設的 [hidden]） */
.benefits-events__pagination[hidden] {
    display: none;
}

.benefits-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.benefits-lightbox.is-open {
    display: flex;
}

body.benefits-lightbox-open {
    overflow: hidden;
}

.benefits-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 12, 22, 0.92);
    cursor: zoom-out;
}

.benefits-lightbox__close {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 3;
    display: grid;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
    place-items: center;
    transition: background 0.2s ease;
}

.benefits-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.26);
}

.benefits-lightbox__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(1180px, 100%);
    max-height: 100%;
}

.benefits-lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 100%;
    margin: 0;
}

.benefits-lightbox__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 168px);
    border-radius: 4px;
    object-fit: contain;
    box-shadow: 0 26px 64px rgba(0, 0, 0, 0.5);
    user-select: none;
}

.benefits-lightbox__caption {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: baseline;
    justify-content: center;
    width: 100%;
    color: #ffffff;
    text-align: center;
}

.benefits-lightbox__title {
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: 0;
}

.benefits-lightbox__counter {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.benefits-lightbox__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    width: 54px;
    height: 54px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 2.1rem;
    line-height: 1;
    cursor: pointer;
    place-items: center;
    transform: translateY(-50%);
    transition: background 0.2s ease;
}

.benefits-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

.benefits-lightbox__nav--prev {
    left: 6px;
}

.benefits-lightbox__nav--next {
    right: 6px;
}

.benefits-lightbox__nav[hidden] {
    display: none;
}

.about-profile {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: 15rem 38px 132px;
    overflow: hidden;
    background-color: #f6f7f7;
    background-image: var(--about-profile-bg-image);
    background-position: center;
    background-size: cover;
    color: #111111;
    place-items: start center;
}
.about-profile::before,
.about-profile::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: clamp(72px, 9vw, 112px);
    content: '';
    pointer-events: none;
}

.about-profile::after {
    z-index: 0;
    background: #ffffff;
}

.about-profile::before {
    z-index: 1;
    background: #e1dfe0;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.about-profile__content {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    width: min(960px, 100%);
    margin: 0 auto;
    text-align: center;
}

.about-profile__english {
    margin: 0 0 12px;
    color: var(--color-navy);
    font-size: clamp(3rem, 6vw, 6.4rem);
    font-weight: 100;
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.about-profile__subtitle {
    margin: 0 0 22px;
    color: #08aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}

.about-profile__copy {
    width: min(560px, 100%);
    margin: 5rem 0 8rem;
    color: #111111;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 2.05;
    text-align: center;
}

.about-profile__image {
    display: block;
    width: min(850px, 100%);
    object-fit: cover;
    object-position: center;
}

/* 綜合專業營造服務輪播：僅手機版顯示（電腦版以 01.png 圖示呈現） */
.about-profile__image--mobile {
    display: none;
}

.about-services {
    display: none;
}

.about-history {
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 10px) 48px 40px;
    overflow: hidden;
    background: #ffffff;
    color: #111111;
    place-items: start center;
}

/*
 * 電腦版第三屏為左右兩欄同一個 grid：
 * 左欄（第 1 欄）由上而下為 02.png、HISTORY、沿革事紀、內文、004.png；
 * 右欄（第 2 欄）為沿革表格＋分頁，從內文那一列開始，因此表格頂端會與內文頂端切齊。
 * 列間距一律靠各元素自身的 margin 控制（row-gap: 0），才能精準對到內文那一列。
 */
.about-history__inner {
    display: grid;
    grid-template-columns: 338px minmax(0, 1fr);
    /* 最後一列吸收右欄比左欄長出來的高度，左欄各列才不會被撐開 */
    grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: 56px;
    align-items: start;
    justify-items: start;
    row-gap: 0;
    width: min(920px, calc(100% - 64px));
}

/* 電腦版讓標題／副標題／內文直接成為外層 grid 的項目，內文才有自己的列可以對齊 */
.about-history__content {
    display: contents;
}

.about-history__title {
    grid-column: 1;
    grid-row: 2;
    margin: 0 0 19px;
    color: var(--color-navy);
    font-size: clamp(4.2rem, 6vw, 5.35rem);
    font-weight: 100;
    line-height: 0.82;
    letter-spacing: -0.05em;
}

.about-history__subtitle {
    grid-column: 1;
    grid-row: 3;
    margin: 0 0 22px;
    color: #08aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0;
}

.about-history__copy {
    grid-column: 1;
    grid-row: 4;
    max-width: 338px;
    margin: 0;
    color: #111111;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 2.04;
    text-align: left;
}

.about-history__mark {
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: min(132px, 100%);
    height: auto;
    margin: 0 0 24px;
    justify-self: start;
}

/* 電腦版僅保留底部三角形分隔裝飾（內容已併入 .about-history） */
.about-timeline {
    position: relative;
    display: block;
    height: clamp(72px, 9vw, 112px);
    background: #ffffff;
    color: #111111;
}

.about-timeline::before,
.about-timeline::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: clamp(72px, 9vw, 112px);
    content: '';
    pointer-events: none;
}

.about-timeline::after {
    z-index: 0;
    background: #ededed;
}

.about-timeline::before {
    z-index: 1;
    background: #ffffff;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}

/* 沿革表格＋分頁：第三屏右欄，起始列與左欄內文同一列，頂端因此切齊內文 */
.about-timeline__inner {
    grid-column: 2;
    grid-row: 4 / -1;
    align-self: start;
    width: 100%;
}

.about-timeline__image {
    grid-column: 1;
    grid-row: 5;
    display: block;
    width: 292px;
    height: 300px;
    margin-top: 70px;
    object-fit: cover;
    object-position: center;
}

/* 手機版沿革時間軸（年份膠囊＋事件卡片）：電腦版右欄已有沿革表格，這裡隱藏 */
.about-timeline-flow {
    display: none;
}

.about-timeline__list {
    display: grid;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-timeline__item {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 61px;
    border-bottom: 1px solid #cfcfcf;
        padding: 0px 20px 0 45px;
}

.about-timeline__item time {
    color: #252525;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1.25;
    white-space: nowrap;
}

.about-timeline__item span {
    color: #6f6f6f;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.6;
}

/* 沿革事紀的「內容」欄位：後台有填才會出現，接在標題下方當補充說明。
   字級刻意只比年份（time 0.86rem）小一級，避免補充說明太小看不清 */
.about-timeline__note {
    display: block;
    margin-top: 3px;
    color: #9a9a9a;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.55;
}

/* 沿革事紀分頁：版型比照最新消息分頁（目前為假分頁，待後台完成後接上功能） */
.about-timeline-pagination {
    display: flex;
    gap: 22px;
    align-items: center;
    justify-content: center;
    margin-top: 76px;
    color: #111111;
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1;
}

.about-timeline-pagination a {
    display: inline-grid;
    min-width: 18px;
    min-height: 28px;
    place-items: center;
    color: inherit;
}

.about-timeline-pagination a[aria-current='page'] {
    border-bottom: 1px solid currentColor;
}

/* 手機版專用分頁（接在整段時間軸圖片下方）：電腦版右欄已有分頁，這裡隱藏 */
.about-timeline-pagination--mobile {
    display: none;
}

.about-structure {
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 58px) 38px 108px;
    background-color: #f6f7f7;
    background-image: var(--home-join-bg-image);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    place-items: start center;
    text-align: center;
}

.about-structure__content {
    display: grid;
    justify-items: center;
    width: min(1080px, 100%);
    margin: 0 auto;
}

.about-structure__title {
    margin: 0 0 12px;
    color: var(--color-navy);
    font-size: clamp(3rem, 6.2vw, 6.6rem);
    font-weight: 100;
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.about-structure__subtitle {
    margin: 0 0 38px;
    color: #08aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}

.about-structure__image {
    display: block;
    width: min(1040px, 100%);
    object-fit: cover;
    object-position: center;
}

/* 電腦版：完整 003.png 已含部門列表，故隱藏手機版扇形圖與文字部門列表 */
.about-structure__image--mobile {
    display: none;
}

.about-structure__org {
    display: none;
}

.about-awards {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: calc(var(--header-height) + 66px) 48px 14rem;
    overflow: hidden;
    background: #145766;
    color: #ffffff;
    place-items: start center;
}

.about-awards__content {
    position: relative;
    z-index: 1;
    width: min(1200px, 100%);
    margin: 0 auto;
}

.about-awards__title {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(3.2rem, 6vw, 6.4rem);
    font-weight: 100;
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.about-awards__subtitle {
    margin: 0 0 58px;
    color: #08aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}

/* 電腦版（≥1024）改用 .about-awards__gallery 呈現；此區塊保留給平板/手機（≤1023）使用 */
.about-awards__stage {
    display: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(44px, 7vw, 92px);
    align-items: stretch;
}

/*
 * 電腦版（≥1024）得獎徽章：左欄「得獎清單」＋右欄「獎座牆」兩欄式。
 * 獎座數量由後台決定，因此不再用固定格線位置（原本的 --1 ~ --4 寫死 grid-column／grid-row，
 * 一旦筆數不是 7 筆就會破版），改成 auto-fill 自動換行。
 */
.about-awards__gallery {
    display: grid;
    grid-template-columns: clamp(210px, 20vw, 260px) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

/* 左欄：整段得獎紀錄的文字索引（年份／獎項名稱／案名說明） */
.about-awards__gallery-list {
    display: grid;
    margin: 0;
    padding: 0;
    color: rgba(235, 248, 250, 0.88);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.5;
    list-style: none;
}

.about-awards__gallery-list li {
    display: grid;
    gap: 3px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(235, 248, 250, 0.16);
}

.about-awards__gallery-list li:first-child {
    padding-top: 0;
}

.about-awards__gallery-list li:last-child {
    border-bottom: 0;
}

.about-awards__gallery-year {
    color: #08aef0;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.about-awards__gallery-title {
    color: #ffffff;
    font-weight: 600;
}

.about-awards__gallery-note {
    color: #d2bd80;
    font-size: 0.74rem;
}

/*
 * 右欄獎座牆：auto-fill 讓每列自動塞滿（1200px 內容寬下為 4 張／列）。
 * 統一靠上對齊：有說明文字的獎座（較高）和「待補」佔位框（較矮）如果靠下對齊，
 * 圖片上緣就會落在不同高度看起來歪掉，所以改成 start，每一列的圖片上緣都對齊同一條線。
 */
.about-awards__wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 14vw, 200px), 1fr));
    column-gap: clamp(14px, 1.6vw, 26px);
    row-gap: clamp(26px, 3.2vw, 46px);
    align-items: start;
    justify-items: center;
}

.about-awards__trophy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0;
}

.about-awards__trophy img,
.about-awards__trophy video {
    display: block;
    width: 100%;
    max-width: 226px;
    height: auto;
}

/*
 * 獎座統一尺寸：後台上傳的圖片比例不一，這裡固定成同一個「直立 3:4 相框」，
 * 寬高都一致，橫式圖片會裁切成直式，數量再多也像擺在同一層架上不會參差。
 */
.about-awards__wall .about-awards__trophy img:not(.about-awards__trophy-logo),
.about-awards__wall .about-awards__trophy video {
    width: clamp(150px, 13.6vw, 190px);
    max-width: none;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center;
}

/* 獎座說明：獎座圖片已移除內嵌文字，改由此金色說明文字呈現 */
.about-awards__trophy-caption {
    color: #d2bd80;
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}

/* 待補佔位框：灰底＋獎項標誌＋「待補」字樣 */
.about-awards__trophy--placeholder {
    gap: 18px;
    width: 100%;
    max-width: 172px;
    aspect-ratio: 172 / 250;
    background: rgba(158, 168, 168, 0.5);
}

/* 獎座牆內的待補框沿用同一個直立 3:4 相框尺寸，和真實獎座完全對齊 */
.about-awards__wall .about-awards__trophy--placeholder {
    width: clamp(150px, 13.6vw, 190px);
    max-width: none;
    height: auto;
    aspect-ratio: 3 / 4;
    justify-content: center;
}

.about-awards__wall .about-awards__trophy--placeholder .about-awards__trophy-logo {
    height: auto;
    object-fit: contain;
}

.about-awards__trophy--placeholder .about-awards__trophy-logo {
    width: 80%;
    max-width: 128px;
    height: auto;
}

.about-awards__trophy-todo {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
}

.about-awards__intro {
    display: grid;
    align-content: space-between;
    min-height: 378px;
}

.about-awards__list {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    color: rgba(235, 248, 250, 0.88);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    list-style: none;
    padding-top:50px;
}

.about-awards__list li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.about-awards__logos {
    display: grid;
    gap: 24px;
    justify-items: center;
    margin-top: 56px;
}

.about-awards__logo {
    display: block;
    width: min(270px, 100%);
    height: auto;
}

.about-awards__badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 56px;
    align-items: start;
}

.about-awards__badge {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin: 0;
    min-width: 0;
    text-align: center;
}

.about-awards__badge img {
    display: block;
    width: min(220px, 100%);
    height: auto;
}

.about-awards__badge figcaption {
    color: rgba(235, 248, 250, 0.86);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.45;
}

.about-awards__strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, clamp(94px, 8.6vw, 132px));
    gap: 2px;
    margin-top: 140px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 22px 56px rgba(4, 30, 36, 0.22);
}

.about-awards__strip-item {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.3);
}

.about-awards__strip-item--feature {
    grid-column: 5;
    grid-row: 1 / span 2;
}

.about-awards__strip-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about-awards__strip--single {
    display: block;
    overflow: hidden;
    background: transparent;
}

.about-awards__strip--single img {
    display: block;
    width: 100%;
    height: auto;
}

/* 第五屏（得獎紀錄）桌機預設：隱藏行動版專用的標題斷行與 -m 去背圖 */
.about-awards__title-br {
    display: none;
}

.about-awards__badge .about-awards__badge-img--mobile,
.about-awards__strip--single .about-awards__strip-img--mobile {
    display: none;
}

/* 獎座輪播：僅手機版（≤767）顯示，電腦版以 .about-awards__gallery 獎項牆呈現 */
.about-awards__carousel {
    display: none;
}

.home-hero {
    position: relative;
    display: block;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: #101010;
}

/* 影片是 16:9，視窗只要不是 16:9，object-fit: cover 就會裁切：
   比 16:9 瘦（如 1280x1024）裁左右，會切掉影片底部「BUILDING NEW BEGINNINGS」字樣的頭尾；
   比 16:9 寬（如 2560x1080）裁上下。改用 fill 拉伸鋪滿，任何視窗比例都完整不裁切（接受變形），
   與手機版 .home-hero__video-m 的處理一致。 */
.home-hero__video {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

/* 手機版專用第一屏影片，桌機版隱藏（手機版樣式見 rwd.css） */
.home-hero__video-m {
    display: none;
}

/* 桌機版維持影片本身的品牌動畫，文字疊層僅在手機版顯示（見 rwd.css） */
.home-hero__overlay {
    display: none;
}

.home-about {
    display: grid;
    min-height: 100vh;
    padding: clamp(68px, 10vh, 150px) 24px clamp(72px, 10vh, 112px);
    background-color: #2f7a85;
    background-image: var(--home-about-bg-image);
    background-position: center;
    background-size: cover;
    place-items: center;
}

.home-about__stage {
    position: relative;
    max-width: calc(100vw - 48px);
}

.home-about__image {
    display: block;
    width: 100%;
    aspect-ratio: 43 / 20;
    margin: clamp(48px, 7vh, 64px) 0 0 auto;
    object-fit: cover;
    object-position: center;
}

.home-about__card {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    padding: 5rem;
    background: #ffffff;
}

.home-about__title {
    margin: 0 0 10px;
    color: #b6bdc7;
    font-size: clamp(3.2rem, 6vw, 5rem);
    font-weight: 100;
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.home-about__card h2 {
    margin: 0 0 13px;
    color: #00a7ee;
    font-size: clamp(1.35rem, 2.5vw, 2.2rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
}

.home-about__card p:last-child {
    margin: 0;
    color: #585f68;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 2.1;
}

.home-news {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: clamp(56px, 7vh, 88px) 48px;
    overflow: hidden;
    background-color: #edf0f2;
    background-image: var(--home-news-bg-image);
    background-position: center;
    background-size: cover;
    place-items: center;
}

.home-news::before {
    content: none;
}

.home-news::after {
    content: '';
    display: none;
}

.home-news__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
    gap: clamp(44px, 8vh, 90px);
    width: min(1720px, 100%);
    min-height: clamp(560px, 72vh, 720px);
}

.home-news__top {
    display: grid;
    grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
    gap: clamp(70px, 9.5vw, 400px);
    align-items: start;
}

.home-news__heading {
    align-self: start;
}

.home-news__title {
    margin: 0 0 8px;
    color: #0f2d5b;
    font-size: clamp(5.2rem, 6.8vw, 7.15rem);
    font-weight: 200;
    line-height: 0.84;
    letter-spacing: -0.05em;
}

.home-news__heading h2 {
    margin: 0;
    color: #08aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.home-news__intro {
    display: grid;
    grid-template-columns: minmax(250px, 340px) max-content;
    gap: clamp(86px, 10vw, 168px);
    align-items: end;
    padding-top: 20px;
}

.home-news__intro p {
    margin: 0;
    color: #171717;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.82;
}

.home-news__button {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    min-width: 160px;
    padding: 0 22px;
    border: 1px solid #14345c;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    color: #17365b;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.home-news__button:active {
    transform: scale(0.97);
}

.home-news__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: clamp(92px, 8.5vw, 136px);
    align-items: stretch;
    align-self: end;
    justify-items: center;
}

.home-news__empty {
    grid-column: 1 / -1;
    margin: 0;
    color: #333333;
    font-weight: 800;
}

.home-news-card {
    display: grid;
    grid-template-rows: auto 1fr;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(24, 38, 52, 0.08);
    position: relative;
    z-index: 0;
    transform-origin: center center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-news-card--feature {
    justify-self: center;
}

.home-news-card--offset {
    /*margin-top: 88px;*/
    justify-self: center;
}

.home-news-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    font-size: 0;
    color: transparent;
}

.home-news-card img,
.home-news-card video {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* 同 .latest-news-card__video：卡片上蓋著一層透明連結（z-index: 1），
   影片要墊高才收得到播放鍵的點擊 */
.home-news-card__video {
    position: relative;
    z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
    .home-news-card:hover,
    .home-news-card:focus-within {
        z-index: 2;
        transform: translateY(-10px) scale(1.08);
        box-shadow: 0 26px 54px rgba(24, 38, 52, 0.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-news-card {
        transition: none;
    }

    .home-news-card:hover,
    .home-news-card:focus-within {
        transform: none;
    }
}

.home-news-card__body {
    min-height: 66px;
    padding: 12px 22px 13px;
}

.home-news-card__body h3 {
    margin: 0 0 4px;
    color: #1a1a1a;
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0;
}

.home-news-card__body p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    min-height: calc(1.42em * 3);
    margin: 0;
    overflow: hidden;
    color: #333333;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.42;
}

.home-news__dots {
    display: none;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}

.home-news__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c2cbd3;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.home-news__dot.is-active {
    background: #3f4a56;
    transform: scale(1.18);
}

.home-quality {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: clamp(46px, 6vh, 62px) 48px clamp(66px, 21vh, 155px);
    overflow: hidden;
    background-color: #303030;
    background-image: var(--home-quality-bg-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    isolation: isolate;
    place-items: center;
}

.home-quality::before {
    content: none;
}

.home-quality__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: center;
    gap: 24px;
    width: min(1160px, 100%);
    min-height: 0;
}

.home-quality__heading {
    text-align: center;
}

.home-quality__title {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 1);
    font-size: 4.8rem;
    font-weight: 100;
    line-height: 1;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.18);
}

.home-quality__heading h2 {
    margin: 0;
    color: #15aef0;
    font-size: clamp(2rem, 2.55vw, 2.72rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
}

.home-quality__body {
    --home-quality-copy-width: 620px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--home-quality-copy-width)) minmax(0, 1fr);
    grid-template-areas: ". copy action";
    column-gap: 24px;
    align-items: center;
    justify-content: stretch;
    min-height: 72px;
    padding: 0;
}

.home-quality__body p {
    grid-area: copy;
    justify-self: center;
    width: 100%;
    max-width: var(--home-quality-copy-width);
    margin: 0;
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.95;
    text-align: center;
}

/* 第四屏內文：手機版改用逐句斷行的版本，桌機維持原本的逗號併行版本 */
.home-quality__copy--mobile {
    display: none;
}

.home-quality__button {
    grid-area: action;
    justify-self: start;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    background: #ffffff;
    color: #1a1a1a;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.home-quality__button:active {
    transform: scale(0.97);
}

.home-quality__gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-self: end;
    width: 100%;
}

.home-quality__gallery-item {
    display: grid;
    gap: 14px;
    align-content: start;
    justify-items: center;
    min-width: 0;
}

.home-quality__figure {
    position: relative;
    width: 100%;
    min-height: 268px;
    margin: 0;
    overflow: hidden;
    background: #111111;
}

.home-quality__figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-quality__figure-button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-width: 152px;
    min-height: 34px;
    max-width: calc(100% - 28px);
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #17365b;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.26);
    transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.home-quality__figure-button:hover,
.home-quality__figure-button:focus-visible {
    background: #ffffff;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

.home-quality__figure-button:active {
    transform: scale(0.97);
}

.home-quality__figure figcaption {
    position: absolute;
    right: 14px;
    bottom: 12px;
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

/* 第五屏頂部置左的 BUILDING THE FUTURE 大字（原位於第四屏底部，依設計稿移至此並完整顯示） */
.home-join__future {
    position: relative;
    z-index: 1;
    align-self: center;
    width: min(1560px, 100%);
    margin: 0 0 clamp(30px, 5vh, 70px);
    padding-left: clamp(0px, 2vw, 36px);
    color: rgba(38, 38, 38, 0.17);
    font-size: clamp(4rem, 7.5vw, 9rem);
    font-weight: 100;
    line-height: 0.92;
    text-align: left;
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.04em;
    font-family: 'YS GenYoGothic';
}

.home-join {
    --home-join-notch: clamp(48px, 6vw, 100px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -1px;
    padding: calc(28px + var(--home-join-notch)) 38px 78px;
    overflow: hidden;
    background-color: #f6f7f7;
    background-image: var(--home-join-bg-image);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    color: #101010;
}

/* 第四屏深色區塊延伸進第五屏頂端的向下三角形：頂邊與深色底齊平，往中央收斂成尖端 */
.home-join::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--home-join-notch);
    background: #303030;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    pointer-events: none;
}

.home-join__inner {
    position: relative;
    z-index: 1;
    width: min(1560px, 100%);
    min-height: min(720px, calc(100vh - 114px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.home-join__hero {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(300px, 0.82fr);
    width: min(1180px, 76vw);
    min-height: clamp(340px, 20vw, 410px);
    margin: 0 clamp(0px, 3.8vw, 72px) 64px auto;
    background: #ffffff;
}

.home-join__main-image {
    display: block;
    width: 100%;
    height: clamp(340px, 20vw, 410px);
    object-fit: cover;
}

.home-join__panel {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: clamp(340px, 20vw, 410px);
    padding: 44px;
    background: #ffffff;
}

/* 播放鍵與卡片內「加入元順」副標僅手機版第五屏使用，桌機版維持原排版（見 rwd.css） */
.home-join__play {
    display: none;
    width: 32px;
    height: 32px;
    margin-bottom: 30px;
    place-items: center;
    border: 1px solid #17aef0;
    border-radius: 50%;
    color: #17aef0;
    font-size: 0.72rem;
    line-height: 1;
}

.home-join__title {
    margin: 0;
    color: #8aa0bf;
    font-size: 3.55rem;
    font-weight: 200;
    line-height: 1;
    white-space: nowrap;
}

.home-join__subtitle {
    display: none;
}

.home-join__content {
    display: grid;
    grid-template-columns: minmax(410px, 500px) max-content minmax(0, 1fr) 158px;
    column-gap: 48px;
    align-items: center;
    width: min(1350px, calc(100% - 80px));
    margin-left: clamp(32px, 4vw, 78px);
    min-height: 226px;
}

.home-join__copy h2 {
    margin: 0 0 38px;
    color: #08aef0;
    font-size: 2.3rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}

.home-join__copy p {
    margin: 0;
    color: #111111;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 2;
}

/* 第五屏文案：桌機版顯示完整段落，逐句斷行版本僅手機版顯示 */
.home-join__copy .home-join__copy-text--mobile {
    display: none;
}

.home-join__button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    min-width: 118px;
    padding: 0 18px;
    border: 1px solid #5b6b7d;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    color: #17365b;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.16s ease, background-color 0.16s ease;
}

.home-join__button span {
    display: inline-flex;
    align-items: center;
    color: #111111;
    font-size: 0.96rem;
    line-height: 1;
}

.home-join__button:active {
    transform: scale(0.97);
}

.home-join__side-image {
    display: block;
    grid-column: 4;
    width: 158px;
    height: 218px;
    margin-top: -14px;
    align-self: start;
    justify-self: end;
    object-fit: cover;
}

.back-to-top {
    position: fixed;
    z-index: 18;
    right: 34px;
    bottom: 34px;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    background: #2a7f91;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
    transition: transform 0.16s ease, background-color 0.16s ease, opacity 0.2s ease, visibility 0.2s ease;
}

/* 停在第一屏時隱藏（初始狀態寫在 front.php，捲動由 admin.js 切換），
   避免蓋住首頁第一屏影片底部的「BUILDING NEW BEGINNINGS」字樣 */
.back-to-top.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.back-to-top span {
    margin-top: 4px;
    font-size: 0.72rem;
    line-height: 1;
}

.back-to-top strong {
    margin-top: -8px;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
}

.back-to-top:active {
    transform: scale(0.97);
}

.section-kicker {
    margin: 0 0 10px;
    color: var(--color-accent);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 800;
    transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.button:active {
    transform: scale(0.97);
}

.button--primary {
    background: #ffffff;
    color: #111111;
}

.error-page {
    width: min(760px, calc(100% - 48px));
    margin: 0 auto;
    padding: 142px 0 92px;
    color: #ffffff;
}

.error-page h1 {
    margin: 0;
    color: #ffffff;
}

.site-footer {
    width: 100%;
    margin: 0;
    padding: 22px 24px 20px;
    background: #145766;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.75;
    text-align: center;
}

.page-about .site-footer {
    background: #e9e9e6;
    color: #395a78;
}

.site-footer p {
    margin: 0;
}

.site-footer__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    justify-content: center;
}

/* 關於元順頁尾：ADD 自成一行，TEL／FAX 並列於下一行（僅此頁採此排版） */
.page-about .site-footer__contact {
    gap: 6px 28px;
}

.page-about .site-footer__address {
    flex-basis: 100%;
}

/* 內頁頁尾（首頁、關於元順除外）：ADD 自成一行、TEL／FAX 並列於下一行，比照圖片牌版排版 */
body:not(.page-home):not(.page-about) .site-footer__contact {
    gap: 6px 28px;
}

body:not(.page-home):not(.page-about) .site-footer__address {
    flex-basis: 100%;
}