/* Responsive styles
   Breakpoints:
   - Large desktop: max-width 1919px
   - Existing wide-screen adjustment: max-width 1439px
   - Desktop: max-width 1023px
   - Tablet: max-width 767px
   - Mobile: max-width 575px
   - Small mobile: max-width 374px
*/
@media (max-width: 1919px) {
}

@media (max-width: 1439px) {
    .home-join__future {
        font-size: clamp(4rem, 7.4vw, 6.8rem);
    }
}

@media (max-width: 1023px) {
    .site-header {
        padding: 24px 32px;
    }

    .site-header--home {
        padding: 30px 28px 0;
    }

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

    .home-menu__toggle img {
        width: 52px;
        height: 52px;
    }

    .home-menu__panel {
        top: 22px;
        width: min(calc(100vw - 40px), 1760px);
        min-height: clamp(236px, 30vw, 292px);
        max-height: calc(100vh - 44px);
        padding: 78px clamp(60px, 8vw, 90px) 52px clamp(240px, 27vw, 300px);
    }

    .home-menu__nav {
        gap: clamp(20px, 3vw, 34px);
    }

    .site-nav__list {
        gap: 16px;
    }

    .site-nav__link {
        font-size: 0.94rem;
    }

    .about-hero {
        padding-right: 32px;
        padding-left: 32px;
        background-position: 58% center;
    }

    .about-hero__content {
        width: min(520px, 100%);
        margin-left: 0;
    }

    .sustainability-hero {
        padding-right: 32px;
        padding-left: 32px;
        background-position: 58% center;
    }

    .sustainability-hero__content {
        width: min(560px, 100%);
        margin-left: 0;
    }

    .sustainability-intro {
        padding-right: 32px;
        padding-left: 32px;
    }

    .sustainability-intro__content {
        margin-left: 0;
    }

    .sustainability-intro__mark {
        right: -110px;
        width: min(58vw, 500px);
    }

    .sustainability-pillars {
        padding-right: 32px;
        padding-left: 32px;
    }

    .sustainability-pillars__grid {
        gap: 22px;
    }

    .sustainability-pillars-card {
        min-height: 660px;
    }

    .sustainability-pillars-card__body {
        padding-right: 24px;
        padding-left: 24px;
    }

    .media-hero {
        padding-right: 32px;
        padding-left: 32px;
        background-position: 58% center;
    }

    .media-hero__content {
        width: min(520px, 100%);
        margin-left: 0;
    }

    .latest-news-hero {
        padding-right: 32px;
        padding-left: 32px;
        background-position: 58% center;
    }

    .latest-news-hero__content {
        width: min(520px, 100%);
        margin-left: 0;
    }

    .latest-news-list {
        padding-right: 32px;
        padding-left: 32px;
    }

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

    .latest-news-list__items {
        gap: 24px;
    }

    .civil-mechanical-electrical-hero {
        padding-right: 32px;
        padding-left: 32px;
        background-position: 58% center;
    }

    .civil-mechanical-electrical-hero__content {
        width: min(640px, 100%);
        margin-left: 0;
    }

    .civil-mechanical-electrical-cladding {
        padding-right: 32px;
        padding-left: 32px;
    }

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

    .civil-mechanical-electrical-cladding__layout {
        gap: 42px;
    }

    .energy-intelligence-hero {
        padding-right: 32px;
        padding-left: 32px;
        background-position: 58% center;
    }

    .energy-intelligence-hero__content {
        width: min(520px, 100%);
        margin-left: 0;
    }

    .construction-management-hero {
        padding-right: 32px;
        padding-left: 32px;
        background-position: 30% center;
    }

    .construction-management-hero__content {
        width: min(640px, 100%);
        margin-left: 0;
    }

    .energy-intelligence-platform {
        padding: calc(var(--header-height) + 48px) 32px 120px;
    }

    .energy-intelligence-platform__heading {
        margin-bottom: 64px;
    }

    .energy-intelligence-platform__title {
        font-size: clamp(3rem, 7vw, 4.4rem);
    }

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

    .energy-intelligence-platform__diagram {
        width: min(580px, 94%);
        margin-top: 62px;
    }

    .energy-intelligence-architecture {
        padding: calc(var(--header-height) + 48px) 32px 92px;
    }

    .energy-intelligence-architecture__system-title,
    .energy-intelligence-architecture__interface-title {
        font-size: clamp(2.9rem, 7vw, 4.2rem);
    }

    .energy-intelligence-architecture__image {
        width: min(660px, 100%);
        margin-bottom: 86px;
    }

    /* 平板／手機不做電腦版的跳出容器加寬，維持吃滿 __inner 的寬度 */
    .energy-intelligence-interface-flipbook {
        width: 100%;
    }

    .energy-intelligence-interface-flipbook__stage {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        gap: 12px;
    }

    .energy-intelligence-interface-flipbook__book {
        min-height: 360px;
    }

    .building-information-modeling-hero {
        padding-right: 32px;
        padding-left: 32px;
        background-position: 58% center;
    }

    .building-information-modeling-hero__content {
        width: min(560px, 100%);
        margin-left: 0;
    }

    .building-information-modeling-intro {
        padding: 88px 24px 112px;
    }

    .building-information-modeling-flipbook {
        padding: 154px 24px 82px;
    }

    .building-information-modeling-flipbook__stage {
        grid-template-columns: 46px minmax(0, 1fr) 46px;
        gap: 12px;
    }

    .building-information-modeling-process {
        gap: 62px;
        padding: 84px 32px 96px;
    }

    .building-information-modeling-process__grid {
        gap: 4px;
    }

    .building-information-modeling-process-card__body {
        padding: 30px 26px 34px;
    }

    .building-information-modeling-process-card__list {
        font-size: 0.84rem;
    }

    .project-evaluation-hero {
        padding-right: 32px;
        padding-left: 32px;
        background-position: 58% center;
    }

    .project-evaluation-hero__content {
        width: min(560px, 100%);
        margin-left: 0;
    }

    .project-private {
        padding: 82px 32px 126px;
    }

    .project-private__inner {
        grid-template-columns: minmax(0, 1.04fr) minmax(280px, 0.96fr);
        column-gap: 52px;
    }

    .project-private__title {
        font-size: 4rem;
    }

    .project-records {
        padding-right: 32px;
        padding-left: 32px;
        background-position: center bottom;
    }

    .project-records__callout {
        left: 32px;
        width: clamp(200px, 24vw, 260px);
    }

    .project-records__stats {
        gap: 30px;
    }

    .project-records-stat {
        padding: 22px;
    }

    .project-gallery {
        padding: 64px 32px 72px;
    }

    .project-gallery__top {
        grid-template-columns: minmax(210px, 0.82fr) minmax(300px, 1.18fr);
        gap: 56px;
    }

    .project-gallery__grid {
        gap: 34px 34px;
    }

    .project-gallery-card h3 {
        font-size: 1rem;
    }

    .project-portfolio-hero {
        padding-right: 32px;
        padding-left: 32px;
        background-position: 58% center;
    }

    .project-portfolio-hero__content {
        width: min(560px, 100%);
        margin-left: 0;
    }

    .project-portfolio-private {
        padding: 82px 32px 126px;
    }

    .project-portfolio-private__inner {
        grid-template-columns: minmax(0, 1.04fr) minmax(280px, 0.96fr);
        column-gap: 52px;
    }

    .project-portfolio-private__title {
        font-size: 4rem;
    }

    .project-portfolio-records {
        padding-right: 32px;
        padding-left: 32px;
        background-position: center bottom;
    }

    .project-portfolio-records__callout {
        left: 32px;
        width: clamp(200px, 24vw, 260px);
    }

    .project-portfolio-records__stats {
        gap: 30px;
    }

    .project-portfolio-records-stat {
        padding: 22px;
    }

    .project-portfolio-gallery {
        padding: 64px 32px 72px;
    }

    .project-portfolio-gallery__top {
        grid-template-columns: minmax(210px, 0.82fr) minmax(300px, 1.18fr);
        gap: 56px;
    }

    .project-portfolio-gallery__grid {
        gap: 34px 34px;
    }

    .project-portfolio-gallery-card h3 {
        font-size: 1rem;
    }

    .project-evaluation-estimating {
        padding: calc(var(--header-height) + 56px) 32px 78px;
    }

    .project-evaluation-estimating__inner {
        gap: 50px;
    }

    .project-evaluation-estimating__title {
        font-size: 4rem;
    }

    .project-evaluation-estimating__body {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .project-evaluation-estimating__intro {
        grid-template-columns: minmax(0, 0.86fr) minmax(260px, 1fr);
        gap: 28px;
        align-items: end;
        padding-top: 0;
    }

    .project-evaluation-estimating__copy,
    .project-evaluation-estimating__map {
        width: 100%;
    }

    .customer-service-hero {
        padding-right: 32px;
        padding-left: 32px;
        background-position: 58% center;
    }

    .customer-service-hero__content {
        width: min(520px, 100%);
        margin-left: 0;
    }

    .customer-service-contact {
        padding: calc(var(--header-height) + 56px) 32px 78px;
    }

    .customer-service-contact__inner {
        gap: 50px;
    }

    .customer-service-contact__title {
        font-size: 4rem;
    }

    .customer-service-contact__consultation {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .customer-service-contact__intro {
        grid-template-columns: minmax(0, 0.86fr) minmax(260px, 1fr);
        gap: 28px;
        align-items: end;
        padding-top: 0;
    }

    .customer-service-contact__copy,
    .customer-service-contact__map {
        width: 100%;
    }

    .customer-service-contact__feature {
        gap: 42px;
        width: 100%;
        margin-top: 12px;
    }

    .benefits-hero {
        padding-right: 32px;
        padding-left: 32px;
        background-position: 58% center;
    }

    .benefits-hero__content {
        width: min(560px, 100%);
        margin-left: 0;
    }

    .benefits-events {
        padding-right: 32px;
        padding-left: 32px;
    }

    .benefits-events__heading {
        margin-bottom: 52px;
    }

    .benefits-events__grid {
        gap: 38px 24px;
    }

    .about-profile {
        padding: 92px 32px 120px;
    }

    .about-profile__copy {
        width: min(720px, 100%);
    }

    .about-profile__image {
        width: min(680px, 100%);
        min-height: clamp(480px, 62vh, 720px);
    }

    .about-history {
        padding: 98px 32px 40px;
    }

    .about-history__inner {
        width: 100%;
        grid-template-columns: minmax(220px, 338px) minmax(360px, 1fr);
        column-gap: 48px;
        row-gap: 0;
    }

    .about-history__mark {
        margin-top: 0;
    }

    .about-timeline {
        padding: 0;
    }

    .about-timeline__image {
        width: 100%;
        height: clamp(260px, 32vw, 300px);
    }

    .about-timeline__item {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .about-structure {
        padding: 96px 32px 96px;
    }

    .about-structure__image {
        height: clamp(420px, 54vh, 640px);
    }

    .about-awards {
        padding: 96px 32px 64px;
    }

    .about-awards__title {
        font-size: clamp(2.8rem, 7vw, 5rem);
    }

    /* 平板/手機（≤1023）：改回原本 stage 版面，隱藏電腦版獎項牆 */
    .about-awards__gallery {
        display: none;
    }

    .about-awards__stage {
        display: grid;
        gap: 40px;
    }

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

    .about-awards__strip {
        grid-template-rows: repeat(2, clamp(86px, 9vw, 118px));
    }

    .home-about__stage {
        width: min(86vw, 920px);
    }

    .home-about__image {
        margin-top: 46px;
    }

    .home-about__card {
        top: 0;
        width: min(430px, 56%);
    }

    .home-news {
        padding: 108px 32px 72px;
        background-position: 54% center;
    }

    .home-news__inner,
    .home-news__top {
        grid-template-columns: 1fr;
    }

    .home-news__inner {
        gap: 38px;
        min-height: auto;
    }

    .home-news__top {
        gap: 26px;
    }

    .home-news__intro {
        padding-top: 0;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 28px;
    }

    .home-news__cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 26px;
    }

    .home-news-card,
    .home-news-card--offset {
        max-width: none;
    }

    .home-news-card--offset {
        margin-top: 0;
    }

    .home-news-card img,
    .home-news-card video {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .home-quality {
        padding: 112px 32px 76px;
    }

    .home-quality__inner {
        grid-template-rows: auto auto auto;
        min-height: auto;
    }

    .home-quality__body {
        --home-quality-copy-width: clamp(500px, 52vw, 620px);
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--home-quality-copy-width)) minmax(0, 1fr);
        grid-template-areas: ". copy action";
        gap: 20px;
        padding: 0;
    }

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

    .home-quality__figure {
        min-height: 220px;
    }

    .home-quality__figure img {
        height: clamp(210px, 28vw, 260px);
    }

    .home-join__future {
        font-size: clamp(4rem, 9.5vw, 6.4rem);
    }

    .home-join {
        padding: 104px 32px 76px;
    }

    .home-join__inner {
        min-height: auto;
    }

    .home-join__hero {
        width: 100%;
        grid-template-columns: minmax(0, 1.7fr) minmax(210px, 0.9fr);
        min-height: 280px;
        margin-right: 0;
        margin-bottom: 42px;
    }

    .home-join__main-image,
    .home-join__panel {
        height: 280px;
        min-height: 280px;
    }

    .home-join__content {
        grid-template-columns: minmax(0, 1fr) max-content 108px;
        gap: 34px;
        width: 100%;
        margin-left: 0;
    }

    .home-join__side-image {
        grid-column: auto;
        width: 108px;
        height: 152px;
        margin-top: 0;
        align-self: center;
    }

    .home-join__title {
        font-size: 2.6rem;
    }

    .home-news__inner {
        grid-template-rows: auto auto;
        min-height: auto;
    }
}

@media (max-width: 767px) {
    .site-header {
        align-items: flex-start;
        min-height: 118px;
        padding: 18px 20px;
        gap: 14px;
    }

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

    .site-brand__logo {
        height: 46px;
    }

    /* 子頁（非首頁）手機版 header：白色長條、Logo2-m 置中、右側漢堡選單、底部陰影 */
    .site-header--front:not(.site-header--home) {
        align-items: center;
        justify-content: flex-end;
        min-height: 64px;
        padding: 9px 18px;
        gap: 0;
        box-shadow: 0 3px 12px rgba(3, 23, 47, 0.18);
    }

    .site-header--front:not(.site-header--home) .site-brand {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .site-brand__logo--desktop {
        display: none;
    }

    .site-brand__logo--mobile {
        display: block;
        width: auto;
        height: 46px;
    }

    /* 首頁手機版隱藏品牌 Logo 圖（電腦版維持顯示） */
    .site-brand__logo--image {
        display: none;
    }

    .site-header--front .site-nav {
        display: none;
    }

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

    .home-menu--sub .home-menu__toggle {
        width: 38px;
        height: 38px;
    }

    .home-menu__panel {
        top: 18px;
        width: calc(100vw - 32px);
        min-height: auto;
        max-height: calc(100vh - 36px);
        padding: 70px 28px 34px;
    }

    .home-menu__nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        gap: 22px 28px;
    }

    .home-menu__group-title,
    .home-menu__links a {
        white-space: normal;
    }

    /* 首頁第一屏（手機版）：改用手機版影片並疊上置中文字，background.png 作為影片載入前/失敗時的底圖 */
    .home-hero {
        background-color: #2b3037;
        background-image: url('../images/home/background.webp');
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
    }

    /* 桌機版第一屏影片在手機版隱藏 */
    .home-hero__video {
        display: none;
    }

    /* 手機版第一屏影片：整支影片剛好塞滿一個視窗，不裁切 */
    /* 影片是 9:16，手機視窗通常比 9:16 更瘦長，object-fit: fill 會拉伸變形，
       但可保證影片四邊完整對齊視窗、不裁切（依需求接受失真）。 */
    .home-hero__video-m {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        /* 一般情況第一屏等於視窗高，影片即等於視窗；
           矮螢幕上疊層文字撐高第一屏時改吃 100%，避免影片下方露出底圖 */
        height: 100%;
        min-height: 100vh;
        min-height: 100svh;
        object-fit: fill;
        pointer-events: none;
    }

    /* 改為一般流排版並可隨內容增長：手機版第一屏高度可超過視窗，避免底部文字（如「築起安心的所在」）被裁切，並於底部多留白 */
    .home-hero__overlay {
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
        min-height: 100svh;
        padding: 21.5vh 24px calc(env(safe-area-inset-bottom, 0px) + 8vh);
        text-align: center;
        color: #ffffff;
        /* 影片上方的微暗漸層，維持文字可讀性（原本疊在靜態底圖上） */
        background-image: linear-gradient(180deg, rgba(18, 26, 34, 0.24) 0%, rgba(18, 26, 34, 0.04) 34%, rgba(18, 26, 34, 0.30) 100%);
        text-shadow: 0 1px 18px rgba(8, 18, 28, 0.32);
        pointer-events: none;
    }

    .home-hero__logo {
        width: 26vw;
        max-width: 152px;
        height: auto;
    }

    .home-hero__title {
        margin: 9vh 0 0;
        font-size: clamp(2rem, 11.9vw, 4.4rem);
        font-weight: 700;
        line-height: 1.42;
        letter-spacing: 0.05em;
    }

    .home-hero__title span {
        display: block;
    }

    .home-hero__lines {
        margin: 6vh 0 0;
        font-size: clamp(0.82rem, 3vw, 1.05rem);
        font-weight: 300;
        line-height: 2.4;
        letter-spacing: 0.08em;
    }

    .home-hero__tagline {
        margin: auto 0 0;
        font-size: clamp(1.5rem, 7vw, 2.6rem);
        font-weight: 600;
        letter-spacing: 0.04em;
        color: rgba(255, 255, 255, 0.32);
        text-shadow: none;
        white-space: nowrap;
    }

    /* 手機版第一屏：改用內含文字的 banner-m 圖片，隱藏電腦版文字 */
    .about-hero {
        min-height: 0;
        padding: 64px 0 0;
        /* 白底避免深色 body 背景(#101010)從圖片縮放的次像素縫隙透出而形成黑線 */
        background: #ffffff;
        overflow: hidden;
    }

    .about-hero__content {
        display: none;
    }

    .about-hero__banner-m {
        display: block;
        width: 100%;
        height: auto;
        /* 圖片下緣與下一區塊密合，避免深色背景透出 */
        margin-bottom: -1px;
        vertical-align: bottom;
    }

    /* 前台內頁手機版：隱藏第一屏下方的斜角裝飾 */
    .about-hero + .front-banner-bottom {
        display: none;
    }

    .front-banner-bottom__image {
        display: none;
    }

    /* 手機版第一屏：改用 banner-m 圖片，隱藏電腦版文字 */
    .sustainability-hero {
        min-height: 0;
        padding: 64px 0 0;
        /* 白底避免深色 body 背景從圖片縮放的次像素縫隙透出而形成黑線 */
        background: #ffffff;
        overflow: hidden;
    }

    .sustainability-hero__content {
        display: none;
    }

    .sustainability-hero__banner-m {
        display: block;
        width: 100%;
        height: auto;
        /* 圖片下緣與下一區塊密合，避免深色背景透出 */
        margin-bottom: -1px;
        vertical-align: bottom;
    }

    /* 手機版第二屏：依設計圖排版 —— 置中文字方塊在上、城市照在下、隱藏 ESG 浮水印。
       高度交給內容決定；固定 100vh 會讓文字方塊與城市照之間出現不可控的空隙。 */
    .sustainability-intro {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 0;
        padding: 56px 0 0;
        overflow: hidden;
    }

    /* ::before 改作下方城市照（banner2-m）：回到文件流並排到文字方塊之後，
       用負的上邊距讓照片上緣壓在方塊底下，重現設計圖的重疊 */
    .sustainability-intro::before {
        position: static;
        order: 2;
        align-self: stretch;
        height: 300px;
        margin-top: -80px;
        background-image: url('../images/sustainability/banner2-m.png');
        /* 偏右取景，讓裁切範圍與設計圖的天際線一致 */
        background-position: 62% center;
        background-size: cover;
    }

    /* 設計圖無 ESG 大浮水印 */
    .sustainability-intro__mark {
        display: none;
    }

    .sustainability-intro__content {
        z-index: 2;
        order: 1;
        width: min(345px, 92%);
        margin-top: 0;
        margin-left: 0;
        padding: 24px 14px 26px;
        text-align: center;
    }

    .sustainability-intro__english {
        font-size: clamp(2.4rem, 13vw, 3.4rem);
        letter-spacing: 0.06em;
    }

    .sustainability-intro__title {
        margin-bottom: 14px;
        font-size: 1.34rem;
        letter-spacing: 0.1em;
    }

    .sustainability-intro__copy {
        /* 依設計圖，五段內文各佔一行不折行；最長一行 28 字必須塞進方塊寬度內 */
        font-size: 0.7rem;
        line-height: 1.9;
    }

    /* 內文依設計圖斷成五行 */
    .sustainability-intro__copy-br {
        display: inline;
    }

    .sustainability-pillars {
        /* 改為 block，讓輪播寬度以 100% 對齊版心，不受 grid 置中收縮影響 */
        display: block;
        /* 高度由卡片決定：固定 100vh 只會在卡片下方多出留白，
           先前用 margin-top:-50pc（-800px）補償反而讓第三屏疊到第二屏上 */
        min-height: 0;
        padding: 82px 22px 40px;
        margin-top: 0;
    }

    /* 手機版：改回三張卡片輪播，隱藏電腦版整合圖 */
    .sustainability-pillars__desktop-image {
        display: none;
    }

    /* 手機版：三面向卡片改用水平捲動，與首頁最新消息相同，下一張會露出於側邊 */
    .sustainability-pillars__carousel {
        width: 100%;
    }

    .sustainability-pillars__stage {
        position: relative;
        display: block;
    }

    /* 手機版除了滑動與圓點，另外補上左右箭頭方便點選切換（樣式比照工程實績輪播） */
    .sustainability-pillars__arrow {
        position: absolute;
        z-index: 2;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        border: 0;
        background: transparent;
        cursor: pointer;
        transform: translateY(-50%);
        -webkit-tap-highlight-color: transparent;
    }

    .sustainability-pillars__arrow--prev {
        left: 0;
    }

    .sustainability-pillars__arrow--next {
        right: 0;
    }

    .sustainability-pillars__arrow img {
        display: block;
        width: 20px;
        height: auto;
    }

    .sustainability-pillars__viewport {
        max-width: none;
        margin: 0;
        overflow: visible;
    }

    /* 水平捲動容器：卡片置中對齊，左右各露出鄰卡的一小截。
       左右內距 = 卡片外的留白，讓第一、最後一張也能停在正中央（設計圖即為置中構圖） */
    .sustainability-pillars__grid {
        display: flex;
        grid-template-columns: none;
        align-items: stretch;
        gap: 16px;
        width: auto;
        margin: 0 -22px;
        padding: 4px 18% 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        transition: none;
        transform: none;
    }

    .sustainability-pillars__grid::-webkit-scrollbar {
        display: none;
    }

    .sustainability-pillars-card {
        /* 100% = 捲動容器內距後的寬度（版面寬的 64%），鄰卡在兩側各露出約一成半 */
        flex: 0 0 100%;
        min-width: 0;
        min-height: auto;
        scroll-snap-align: center;
        /* -m 圖自帶卡片底色與圓角，移除白底外框 */
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .sustainability-pillars__dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 36px;
    }

    .sustainability-pillars__dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #cdd6dc;
        cursor: pointer;
        transition: background-color 0.25s ease, transform 0.25s ease;
    }

    .sustainability-pillars__dot.is-active {
        background: #2d7e8d;
        transform: scale(1.3);
    }

    .sustainability-pillars-card__header {
        min-height: 132px;
    }

    .sustainability-pillars-card__body {
        padding: 26px 30px 28px;
    }

    .sustainability-pillars-card__item {
        min-height: 118px;
    }

    .media-hero {
        min-height: 100vh;
        padding: 164px 22px 68px;
        background-position: 58% center;
    }

    .media-hero__brand {
        margin-bottom: 24px;
    }

    .media-hero__title {
        margin-bottom: 28px;
        padding: 10px 18px 13px;
        font-size: clamp(1.62rem, 7vw, 2.22rem);
    }

    .media-hero__subtitle {
        font-size: clamp(2.25rem, 11vw, 3.8rem);
    }

    /* 手機版第一屏：改用 banner-m 圖片，隱藏電腦版文字 */
    .latest-news-hero {
        min-height: 0;
        padding: 64px 0 0;
        /* 白底避免深色 body 背景從圖片縮放的次像素縫隙透出而形成黑線 */
        background: #ffffff;
        overflow: hidden;
    }

    .latest-news-hero__content {
        display: none;
    }

    .latest-news-hero__banner-m {
        display: block;
        width: 100%;
        height: auto;
        /* 圖片下緣與下一區塊密合，避免深色背景透出 */
        margin-bottom: -1px;
        vertical-align: bottom;
    }

    /* 手機版列表頁：由上到下＝類別色條→標題／日期→內容→圖片→了解更多，卡片外框與底色全部拿掉 */
    .latest-news-list {
        padding: 102px 33px 80px;
        align-content: start;
    }

    /* 設計稿手機版列表頁不放 NEWS / 最新消息 大標，banner 下方直接接第一張卡片的類別色條 */
    .latest-news-list__heading {
        display: none;
    }

    /* 分隔線本身也是 grid item，因此卡片到卡片＝75px＋1px 線＋75px */
    .latest-news-list__items {
        grid-template-columns: 1fr;
        gap: 75px;
    }

    /* 手機版卡片沒有外框、底色與陰影，各區塊直接落在頁面底圖上 */
    .latest-news-card {
        overflow: visible;
        background-color: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .latest-news-card:hover {
        transform: none;
        box-shadow: none;
    }

    .latest-news-card__header {
        padding: 4px 22px;
        font-size: 1rem;
        line-height: 1.25;
    }

    .latest-news-card__body {
        padding: 30px 0 0;
    }

    /* 標題／日期與內文共用同一欄寬（約卡片的 7 成），標題靠左、內文置中 */
    .latest-news-card__meta {
        width: 70%;
        gap: 4px 11px;
        margin: 0 auto 5px;
    }

    .latest-news-card__title {
        font-size: 1.05rem;
    }

    .latest-news-card__date {
        color: #333333;
        font-size: 0.68rem;
    }

    .latest-news-card__content {
        width: 70%;
        margin: 0 auto 39px;
        font-size: 0.76rem;
        line-height: 2.14;
        text-align: center;
    }

    .latest-news-card__media {
        width: 95.5%;
        margin: 0 auto;
    }

    /* 統一 300px 高度由 site.css 定義，手機版只多加一層較淺的下緣投影 */
    .latest-news-card__media img,
    .latest-news-card__media video {
        box-shadow: 0 7px 13px rgba(30, 43, 55, 0.16);
    }

    .latest-news-card__button {
        display: inline-flex;
        gap: 18px;
        align-items: center;
        justify-content: center;
        min-width: 180px;
        min-height: 32px;
        margin: 19px auto 0;
        padding: 0 20px;
        background: #ffffff;
        border: 1px solid #5b6b7d;
        border-radius: 999px;
        color: #111111;
        font-size: 0.76rem;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    .latest-news-card__button span {
        font-size: 0.95rem;
        line-height: 1;
    }

    /* 手機版分隔線：細淺灰、比卡片窄一圈，每張卡片之間都要有一條 */
    .latest-news-list__divider,
    .latest-news-list__divider--mobile {
        display: block;
        width: 77%;
        height: 1px;
        margin: 0 auto;
        background-color: #b0b0b0;
    }

    /* 手機版明細頁：由上到下＝類別色條→時間→標題→內容→圖片→上一篇/下一篇（全部置中） */
    .latest-news-list--detail {
        padding: 104px 34px 112px;
        /* 內容短時 min-height:100vh 的剩餘空間全留在下方，避免整塊被垂直置中而讓上方留白飄動 */
        align-content: start;
    }

    /* 設計稿手機版明細頁不放 NEWS / 最新消息 大標，banner 下方直接接類別色條 */
    .latest-news-list--detail .latest-news-list__heading {
        display: none;
    }

    .latest-news-detail__banner {
        display: block;
        padding: 6px 18px;
        color: #ffffff;
        font-size: 0.85rem;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.04em;
    }

    /* 內文欄與圖片同寬，比類別色條窄一圈；gap 兼作「內容→圖片」的間距 */
    .latest-news-detail {
        grid-template-columns: 1fr;
        gap: 45px;
        width: 82%;
        margin: 28px auto 0;
        text-align: center;
    }

    .latest-news-detail__meta {
        justify-content: center;
        margin-bottom: 10px;
        font-size: 0.82rem;
    }

    /* 類別已顯示在上方色條，這裡只留日期 */
    .latest-news-detail__category {
        display: none;
    }

    .latest-news-detail__title {
        margin-bottom: 23px;
        color: #111111;
        font-size: 1.25rem;
    }

    .latest-news-detail__content {
        font-size: 0.76rem;
        line-height: 2.14;
    }

    /* 設計稿段落之間沒有額外空隙，整段行距等寬 */
    .latest-news-detail__content > * {
        margin-bottom: 0;
    }

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

    /* 桌機把投影掛在輪播外框上（見 site.css），手機版一樣不要投影 */
    .latest-news-detail__media .news-carousel__viewport {
        box-shadow: none;
    }

    /* 手機版畫面窄，箭頭縮小並往內縮，避免壓到照片主體 */
    .news-carousel__nav {
        width: 34px;
        height: 34px;
        font-size: 0.78rem;
    }

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

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

    .latest-news-detail__nav {
        gap: 40px;
        margin-top: 56px;
    }

    .latest-news-detail__nav-button {
        font-size: 1rem;
    }

    /* 手機版分頁：襯線斜體數字，目前頁碼下方加底線 */
    .latest-news-pagination {
        gap: 17px;
        margin-top: 75px;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 1.45rem;
        font-style: italic;
        font-weight: 500;
    }

    .latest-news-pagination a {
        min-width: 0;
        min-height: 0;
    }

    /* 設計稿的左右箭頭是窄長三角形，◀／▶ 字元本身偏寬，橫向壓縮後才吻合 */
    .latest-news-pagination__arrow span {
        display: inline-block;
        font-style: normal;
        transform: scaleX(0.45);
    }

    /* 手機版第一屏：改用 banner-m 圖片，隱藏電腦版文字 */
    .civil-mechanical-electrical-hero {
        min-height: 0;
        padding: 64px 0 0;
        /* 白底避免深色 body 背景從圖片縮放的次像素縫隙透出而形成黑線 */
        background: #ffffff;
        overflow: hidden;
    }

    .civil-mechanical-electrical-hero__content {
        display: none;
    }

    .civil-mechanical-electrical-hero__banner-m {
        display: block;
        width: 100%;
        height: auto;
        /* 圖片下緣與下一區塊密合，避免深色背景透出 */
        margin-bottom: -1px;
        vertical-align: bottom;
    }

    .civil-mechanical-electrical-cladding {
        min-height: 100vh;
        padding: 108px 4rem 68px;
    }

    .civil-mechanical-electrical-cladding__heading {
        margin-bottom: 48px;
    }

    .civil-mechanical-electrical-cladding__title {
        font-size: clamp(2.65rem, 12vw, 4.1rem);
    }

    .civil-mechanical-electrical-cladding__subtitle {
        font-size: 1.16rem;
    }

    .civil-mechanical-electrical-cladding__layout {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 28px;
    }

    .civil-mechanical-electrical-cladding__text {
        max-width: 100%;
    }

    .civil-mechanical-electrical-cladding__copy {
        font-size: 0.84rem;
        line-height: 1.95;
    }

    .civil-mechanical-electrical-cladding__divider {
        width: 100%;
        margin-top: 54px;
    }

    .civil-mechanical-electrical-special-drain {
        min-height: 100vh;
        padding: 108px 4rem 68px;
    }

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

    .cme-carousel__arrow {
        width: 44px;
        height: 44px;
    }

    .cme-carousel__arrow img {
        width: 18px;
    }

    .civil-mechanical-electrical-special-drain__title {
        font-size: clamp(2.65rem, 12vw, 4.1rem);
    }

    .civil-mechanical-electrical-special-drain__subtitle {
        font-size: 1.16rem;
    }

    .civil-mechanical-electrical-special-drain__layout {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 28px;
    }

    .civil-mechanical-electrical-special-drain__text {
        max-width: 100%;
    }

    .civil-mechanical-electrical-special-drain__copy {
        font-size: 0.84rem;
        line-height: 1.95;
    }

    .civil-mechanical-electrical-special-drain__divider {
        width: 100%;
        margin-top: 54px;
    }

    .civil-mechanical-electrical-penetration {
        min-height: 100vh;
        padding: 108px 4rem 74px;
    }

    .civil-mechanical-electrical-penetration__heading {
        margin-bottom: 48px;
    }

    .civil-mechanical-electrical-penetration__title {
        font-size: clamp(2.5rem, 11vw, 3.8rem);
    }

    .civil-mechanical-electrical-penetration__subtitle {
        font-size: 1.16rem;
    }

    .civil-mechanical-electrical-penetration__layout {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 28px;
    }

    .civil-mechanical-electrical-penetration__text {
        max-width: 100%;
    }

    .civil-mechanical-electrical-penetration__copy {
        font-size: 0.84rem;
        line-height: 1.95;
    }

    /* 手機版第一屏：改用 banner-m 圖片，隱藏電腦版文字 */
    .energy-intelligence-hero {
        min-height: 0;
        padding: 64px 0 0;
        /* 白底避免深色 body 背景從圖片縮放的次像素縫隙透出而形成黑線 */
        background: #ffffff;
        overflow: hidden;
    }

    .energy-intelligence-hero__content {
        display: none;
    }

    .energy-intelligence-hero__banner-m {
        display: block;
        width: 100%;
        height: auto;
        /* 圖片下緣與下一區塊密合，避免深色背景透出 */
        margin-bottom: -1px;
        vertical-align: bottom;
    }

    /* 手機版第一屏：改用 banner-m 圖片，隱藏電腦版文字 */
    .construction-management-hero {
        min-height: 0;
        padding: 64px 0 0;
        /* 白底避免深色 body 背景從圖片縮放的次像素縫隙透出而形成黑線 */
        background: #ffffff;
        overflow: hidden;
    }

    .construction-management-hero__content {
        display: none;
    }

    .construction-management-hero__banner-m {
        display: block;
        width: 100%;
        height: auto;
        /* 圖片下緣與下一區塊密合，避免深色背景透出 */
        margin-bottom: -1px;
        vertical-align: bottom;
    }

    /* 手機版三段制度區塊：字級與各段間距依設計圖（375px 版）逐項對齊。
       副標題維持 1.25rem —— 量到設計圖為 20.4px，與現值相同。 */
    .construction-management-methods {
        padding: 93px 22px 63px;
    }

    .construction-management-methods__divider {
        margin: 52px 0 57px;
    }

    /* 三段的英文標題與中文副標題一律水平置中，
       第二段不再整段靠右（內文與第一、三段同樣左對齊） */
    .construction-management-method--right {
        text-align: left;
    }

    .construction-management-method__heading {
        margin-bottom: 30px;
        text-align: center;
    }

    .construction-management-method__title {
        margin-bottom: 33px;
        font-size: 2.5rem;
        line-height: 1.2;
    }

    .construction-management-method__text {
        /* 設計圖的內文是置中的窄欄而非滿版：欄寬約版面的 52%（375px 時為 195px），
           搭配 0.656rem 可重現設計圖的斷行（三段分別為 5 / 3 / 3 行） */
        max-width: 52vw;
        margin: 0 auto;
        font-size: 0.656rem;
        line-height: 2.5;
    }

    .construction-management-method__figure {
        /* 設計圖中內文行框下緣與圖片框上緣幾乎相接，視覺留白來自圖檔本身的白邊 */
        margin-top: 0;
    }

    .construction-management-method__image {
        width: min(460px, 100%);
    }

    .energy-intelligence-platform {
        min-height: 100vh;
        padding: 122px 22px 112px;
        /* 手機版改用 bg2-m.png 直式背景，保留白色漸層淡出 */
        background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 1)), url('../images/energy-intelligence/bg2-m.png');
    }


    /* 手機版第二屏標題、副標題置中，並拉開兩者間距 */
    .energy-intelligence-platform__heading {
        margin-bottom: 42px;
        text-align: center;
    }

    .energy-intelligence-platform__title {
        margin-bottom: 22px;
        font-size: clamp(2.25rem, 11vw, 3.35rem);
        line-height: 1.08;
    }

    .energy-intelligence-platform__subtitle {
        font-size: 1.15rem;
    }

    .energy-intelligence-platform__caption {
        margin-top: 12px;
        font-size: 0.82rem;
    }

    /* 手機版第二屏第一張圖（01.png）：限制檢視窗大小，圖片刻意溢出可拖曳平移 */
    .energy-intelligence-platform__dashboard-figure {
        width: 100%;
    }

    /* 平移按鈕外移到 __pan 之外：以 frame 為定位基準，四周留白讓按鈕落在操作畫面外側 */
    .energy-intelligence-platform__pan-frame {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 40px 30px;
    }

    .energy-intelligence-platform__pan {
        position: relative;
        width: 100%;
        margin: 0 auto;
    }

    .energy-intelligence-platform__pan-viewport {
        position: relative;
        width: 100%;
        height: clamp(232px, 60vw, 320px);
        overflow: hidden;
        border-radius: 4px;
        background: #0b1220;
        cursor: grab;
        touch-action: none;
    }

    .energy-intelligence-platform__pan-viewport.is-grabbing {
        cursor: grabbing;
    }

    .energy-intelligence-platform__dashboard {
        position: absolute;
        top: 0;
        left: 0;
        width: 175%;
        max-width: none;
        height: auto;
        transform: translate(0, 0);
        filter: none;
        will-change: transform;
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
    }

    /* 上下左右平移按鈕：青藍色三角形，落在 frame 四周留白、操作畫面外側 */
    .energy-intelligence-platform__pan-btn {
        position: absolute;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .energy-intelligence-platform__pan-btn::before {
        width: 0;
        height: 0;
        content: '';
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
    }

    .energy-intelligence-platform__pan-btn:disabled {
        opacity: 0.25;
        cursor: default;
    }

    .energy-intelligence-platform__pan-btn--up {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .energy-intelligence-platform__pan-btn--up::before {
        border-right: 11px solid transparent;
        border-bottom: 15px solid #08aef0;
        border-left: 11px solid transparent;
    }

    .energy-intelligence-platform__pan-btn--down {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .energy-intelligence-platform__pan-btn--down::before {
        border-top: 15px solid #08aef0;
        border-right: 11px solid transparent;
        border-left: 11px solid transparent;
    }

    .energy-intelligence-platform__pan-btn--left {
        top: 50%;
        left: -10px;
        transform: translateY(-50%);
    }

    .energy-intelligence-platform__pan-btn--left::before {
        border-top: 11px solid transparent;
        border-right: 15px solid #08aef0;
        border-bottom: 11px solid transparent;
    }

    .energy-intelligence-platform__pan-btn--right {
        top: 50%;
        right: -10px;
        transform: translateY(-50%);
    }

    .energy-intelligence-platform__pan-btn--right::before {
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
        border-left: 15px solid #08aef0;
    }

    /* 第二屏底部向下三角形分隔 */
    .energy-intelligence-platform__divider {
        display: block;
        width: 0;
        height: 0;
        margin: 26px auto 12px;
        border-right: 17px solid transparent;
        border-bottom: 0;
        border-left: 17px solid transparent;
        border-top: 19px solid #08aef0;
    }

    /* 手機版第二張圖與電腦版共用 02.png，保持原大小置中 */
    .energy-intelligence-platform__diagram {
        display: block;
        width: min(620px, 100%);
        height: auto;
        margin: 8px auto 0;
    }

    .energy-intelligence-architecture {
        min-height: 100vh;
        padding: 96px 22px 74px;
    }

    .energy-intelligence-architecture__system-heading {
        margin-bottom: 38px;
    }

    .energy-intelligence-architecture__system-title,
    .energy-intelligence-architecture__interface-title {
        font-size: clamp(2.08rem, 10vw, 3.1rem);
        line-height: 1.08;
    }

    .energy-intelligence-architecture__system-subtitle,
    .energy-intelligence-architecture__interface-subtitle {
        font-size: 1.08rem;
    }

    .energy-intelligence-architecture__image {
        width: 100%;
        margin-bottom: 62px;
    }

    /* 操作介面標題：置中、標題一個單字一行（USER / INTERFACE）、與副標題保留間距 */
    .energy-intelligence-architecture__interface-heading {
        align-self: center;
        margin-bottom: 36px;
        text-align: center;
    }

    .energy-intelligence-architecture__interface-title {
        margin-bottom: 18px;
        word-spacing: 100vw;
    }

    /* 操作介面翻書：手機版比照 .building-information-modeling-flipbook */
    .energy-intelligence-interface-flipbook__stage {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 6px;
    }

    .energy-intelligence-interface-flipbook__book {
        min-height: clamp(300px, 82vw, 560px);
        filter: drop-shadow(0 20px 24px rgba(17, 32, 46, 0.3));
    }

    .energy-intelligence-interface-flipbook__page {
        box-shadow: inset 0 0 28px rgba(9, 24, 38, 0.08);
    }

    .energy-intelligence-interface-flipbook__button {
        width: 34px;
        height: 96px;
        color: rgba(18, 49, 84, 0.34);
    }

    .energy-intelligence-interface-flipbook__button:hover,
    .energy-intelligence-interface-flipbook__button:focus {
        color: rgba(18, 49, 84, 0.68);
    }

    .energy-intelligence-interface-flipbook__button span {
        font-size: 3.4rem;
    }

    .energy-intelligence-interface-flipbook__controls {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        margin-top: 22px;
        padding: 7px 11px;
        border-radius: 999px;
        background: rgba(64, 64, 64, 0.82);
        box-shadow: 0 12px 24px rgba(17, 32, 46, 0.16);
    }

    .energy-intelligence-interface-flipbook__counter {
        min-width: 58px;
        color: #ffffff;
        font-size: 0.74rem;
        font-weight: 800;
        text-align: center;
    }

    .energy-intelligence-interface-flipbook__range {
        accent-color: #ffffff;
        cursor: pointer;
    }

    /* 手機版第一屏：改用 banner-m 圖片，隱藏電腦版文字 */
    .building-information-modeling-hero {
        min-height: 0;
        padding: 64px 0 0;
        /* 白底避免深色 body 背景從圖片縮放的次像素縫隙透出而形成黑線 */
        background: #ffffff;
        overflow: hidden;
    }

    .building-information-modeling-hero__content {
        display: none;
    }

    .building-information-modeling-hero__banner-m {
        display: block;
        width: 100%;
        height: auto;
        /* 圖片下緣與下一區塊密合，避免深色背景透出 */
        margin-bottom: -1px;
        vertical-align: bottom;
    }

    .building-information-modeling-intro {
        padding: 72px 22px 92px;
    }

    .building-information-modeling-intro::after {
        bottom: -58px;
        height: 60px;
    }

    .building-information-modeling-intro__title {
        margin-bottom: 16px;
        font-size: clamp(2.5rem, 11vw, 4rem);
    }

    .building-information-modeling-intro__subtitle {
        font-size: 1.18rem;
    }

    .building-information-modeling-flipbook {
        padding: 116px 18px 68px;
    }

    .building-information-modeling-flipbook__stage {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 6px;
    }

    .building-information-modeling-flipbook__book {
        min-height: clamp(300px, 82vw, 560px);
    }

    .building-information-modeling-flipbook__page {
        padding: 12px 10px;
    }

    .building-information-modeling-flipbook__button {
        width: 34px;
        height: 96px;
    }

    .building-information-modeling-flipbook__button span {
        font-size: 3.4rem;
    }

    .building-information-modeling-flipbook__controls {
        gap: 10px;
        margin-top: 22px;
        padding: 7px 11px;
    }

    .building-information-modeling-flipbook__counter {
        min-width: 58px;
        font-size: 0.74rem;
    }

    /* 手機版第四屏：藍綠底僅包住說明文字，卡片改用輪播 */
    .building-information-modeling-process {
        display: block;
        padding: 0 0 64px;
        background: #ffffff;
    }

    .building-information-modeling-process__intro {
        width: 100%;
        margin: 0;
        padding: 56px 28px;
        background: #337283;
    }

    .building-information-modeling-process__intro p {
        font-size: 0.84rem;
        line-height: 1.95;
    }

    .building-information-modeling-process__intro br {
        display: none;
    }

    /* 手機版輪播：左右箭頭各占一欄，中間為裁切視窗 */
    .building-information-modeling-process__stage {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr) 26px;
        gap: 5px;
        align-items: center;
        width: min(420px, calc(100% - 20px));
        margin: 44px auto 0;
    }

    .building-information-modeling-process__viewport {
        display: block;
        width: 100%;
        margin: 0;
        overflow: hidden;
    }

    .building-information-modeling-process__arrow {
        display: inline-grid;
        width: 26px;
        height: 76px;
    }

    .building-information-modeling-process__grid {
        display: flex;
        flex-wrap: nowrap;
        grid-template-columns: none;
        gap: 0;
        width: 100%;
        transition: transform 0.45s ease;
    }

    .building-information-modeling-process-card {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
    }

    .building-information-modeling-process-card__image {
        aspect-ratio: 16 / 10;
    }

    .building-information-modeling-process-card__body {
        min-height: auto;
        padding: 28px 30px 32px;
    }

    .building-information-modeling-process-card__title {
        margin-bottom: 18px;
        font-size: 1.36rem;
    }

    .building-information-modeling-process-card__list {
        gap: 10px;
        font-size: 0.88rem;
    }

    .building-information-modeling-process__dots {
        display: flex;
    }

    /* 手機版第一屏：改用 banner-m 圖片，隱藏電腦版文字 */
    .project-evaluation-hero {
        min-height: 0;
        padding: 64px 0 0;
        /* 白底避免深色 body 背景從圖片縮放的次像素縫隙透出而形成黑線 */
        background: #ffffff;
        overflow: hidden;
    }

    .project-evaluation-hero__content {
        display: none;
    }

    .project-evaluation-hero__banner-m {
        display: block;
        width: 100%;
        height: auto;
        /* 圖片下緣與下一區塊密合，避免深色背景透出 */
        margin-bottom: -1px;
        vertical-align: bottom;
    }

    .project-private {
        min-height: auto;
        padding: 88px 22px 118px;
    }

    .project-private__inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 8px;
    }

    .project-private__title,
    .project-private__subtitle,
    .project-private__copy {
        grid-column: 1;
        grid-row: auto;
    }

    .project-private__title {
        font-size: clamp(2.55rem, 12vw, 3.6rem);
        white-space: normal;
    }

    .project-private__subtitle {
        font-size: 1.34rem;
    }

    .project-private__copy {
        width: min(520px, 100%);
        margin-top: 26px;
        font-size: 0.88rem;
        line-height: 1.95;
    }

    .project-records {
        min-height: auto;
        padding: 132px 22px 88px;
    }

    .project-records__callout {
        left: 22px;
        width: min(214px, calc(100vw - 44px));
        padding: 24px;
    }

    .project-records__callout p {
        font-size: 1.28rem;
    }

    .project-records__stats {
        grid-template-columns: 1fr;
        gap: 28px;
        width: min(260px, 100%);
        margin-top: 12px;
    }

    .project-records-stat {
        width: min(220px, 100%);
    }

    .project-gallery {
        min-height: auto;
        padding: 70px 22px 64px;
    }

    .project-gallery__inner {
        gap: 44px;
    }

    .project-gallery__top {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .project-gallery-filter {
        width: min(240px, 100%);
    }

    .project-gallery__copy {
        width: min(520px, 100%);
        font-size: 0.88rem;
        line-height: 1.95;
    }

    .project-gallery__grid {
        grid-template-columns: 1fr;
        gap: 26px;
        width: min(320px, 100%);
        justify-self: center;
    }

    .project-gallery-card img {
        aspect-ratio: 1 / 1.12;
    }

    .project-gallery-pagination {
        gap: 18px;
        margin-top: 0;
        font-size: 1.24rem;
    }

    /* 手機版第一屏：改用 banner-m 圖片，隱藏電腦版文字 */
    .project-portfolio-hero {
        min-height: 0;
        padding: 64px 0 0;
        /* 白底避免深色 body 背景從圖片縮放的次像素縫隙透出而形成黑線 */
        background: #ffffff;
        overflow: hidden;
    }

    .project-portfolio-hero__content {
        display: none;
    }

    .project-portfolio-hero__banner-m {
        display: block;
        width: 100%;
        height: auto;
        /* 圖片下緣與下一區塊密合，避免深色背景透出 */
        margin-bottom: -1px;
        vertical-align: bottom;
    }

    .project-portfolio-private {
        min-height: auto;
        padding: 88px 4rem 72px;
    }

    .project-portfolio-private__inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 8px;
        justify-items: center;
        text-align: center;
    }

    .project-portfolio-private__title,
    .project-portfolio-private__subtitle,
    .project-portfolio-private__copy {
        grid-column: 1;
        grid-row: auto;
    }

    .project-portfolio-private__title {
        font-size: clamp(2.55rem, 12vw, 3.6rem);
        white-space: normal;
    }

    .project-portfolio-private__subtitle {
        font-size: 1.34rem;
    }

    /* 手機版：內文改至標語下方顯示，原位置隱藏 */
    .project-portfolio-private__copy {
        display: none;
    }

    .project-portfolio-records {
        min-height: auto;
        padding: 56px 22px 80px;
    }

    /* 手機版：標語區塊改為置中的橫式色塊，文字水平置中 */
    .project-portfolio-records__callout {
        position: static;
        width: 100%;
        max-width: 420px;
        aspect-ratio: auto;
        padding: 30px 24px;
        place-items: center;
        text-align: center;
        transform: none;
    }

    .project-portfolio-records__callout p {
        font-size: 1.5rem;
        text-align: center;
    }

    /* 手機版：標語下方內文，置中顯示於工程實績區塊 */
    .project-portfolio-records__copy {
        display: block;
        width: 100%;
        max-width: 420px;
        margin: 0 0 40px;
        color: #ffffff;
        text-align: center;
        background: #709ca8;
        padding: 30px 24px;
    }

    .project-portfolio-records__copy p {
        margin: 0;
        font-size: 0.94rem;
        line-height: 2.3;
        letter-spacing: 0.04em;
        text-shadow: 0 1px 10px rgba(0, 36, 51, 0.35);
    }

    .project-portfolio-records__stats {
        grid-template-columns: 1fr;
        gap: 28px;
        width: min(260px, 100%);
        margin-top: 12px;
    }

    .project-portfolio-records-stat {
        width: min(220px, 100%);
    }

    .project-portfolio-gallery {
        min-height: auto;
        padding: 70px 22px 64px;
    }

    .project-portfolio-gallery__inner {
        gap: 44px;
    }

    .project-portfolio-gallery__top {
        grid-template-columns: 1fr;
        gap: 26px;
        justify-items: center;
        text-align: center;
    }

    /* 手機版：篩選器改成兩段式——先展開分類，點分類後才在它下方展開狀態。
       order 讓篩選器排到手機版內文（__copy-m）下方 */
    .project-portfolio-gallery-filter {
        order: 2;
        width: min(216px, 100%);
    }

    /* 按鈕比例對齊設計稿：寬高約 4.7:1、圓鈕約按鈕高的 0.74，文字上下才留得出空間 */
    .project-portfolio-gallery-filter > summary {
        grid-template-columns: 1fr 34px;
        gap: 8px;
        min-height: 46px;
        padding: 0 8px;
        text-align: center;
    }

    .project-portfolio-gallery-filter__icon {
        width: 34px;
        height: 34px;
    }

    /* 手機版：展開時三角形仍維持朝右，與設計稿一致 */
    .project-portfolio-gallery-filter[open] .project-portfolio-gallery-filter__icon::before {
        transform: translateX(2px);
    }

    /* 手機版：選單改在流內展開並與按鈕同寬，避免浮層壓住下方內文 */
    .project-portfolio-gallery-filter__menu {
        position: static;
        gap: 6px;
        margin-top: 8px;
        padding-left: 0;
        justify-items: stretch;
    }

    .project-portfolio-gallery-filter__group {
        width: 100%;
    }

    .project-portfolio-gallery-filter__type {
        min-height: 38px;
        padding: 0 14px;
        border-radius: 999px;
        font-size: 0.95rem;
        justify-content: center;
        text-align: center;
    }

    /* 第二層：狀態子選單接在分類下方，並左右內縮做出階層感；收合時用 max-height 裁掉（同時失去點擊區） */
    .project-portfolio-gallery-filter__submenu {
        position: static;
        gap: 6px;
        max-height: 0;
        padding: 0 32px;
        overflow: hidden;
        transition: max-height 0.24s ease, margin-top 0.24s ease, opacity 0.2s ease;
    }

    /* 觸控裝置沒有 hover，改由「被點開的分類」決定要不要展開狀態 */
    .project-portfolio-gallery-filter__group.is-open > .project-portfolio-gallery-filter__submenu {
        max-height: 200px;
        margin-top: 6px;
        visibility: visible;
        opacity: 1;
    }

    .project-portfolio-gallery-filter__submenu a {
        min-height: 32px;
        padding: 0 12px;
        border-radius: 999px;
        background: #0e4275;
        font-size: 0.85rem;
        font-weight: 600;
        justify-content: center;
        text-align: center;
    }

    /* 手機版：改用逐句斷行的版本，桌機版副標題＋內文整組隱藏
       （手機版 __copy-m 首行已含「日復一日，一步一築」，避免重複） */
    .project-portfolio-gallery__intro {
        display: none;
    }

    .project-portfolio-gallery__copy-m {
        order: 1;
        display: block;
        width: min(520px, 100%);
        margin: 0;
        color: #111111;
        font-size: 0.9rem;
        line-height: 2.6;
        letter-spacing: 0.02em;
        text-align: center;
    }

    /* 首行「日復一日，一步一築」對應桌機版的 __subtitle，沿用同一個藍色。
       字級比照桌機版 __subtitle 與 __copy 的比例（2.08rem / 1.38rem = 1.5 倍）：
       0.9rem × 1.5 = 1.35rem；line-height 同桌機版 1.3，避免首行行高被撐開。 */
    .project-portfolio-gallery__copy-m-lead {
        color: #08aef0;
        font-size: 1.75rem;
        font-weight: 600;
        line-height: 1.3;
    }

    /* 手機版：作品卡片改用輪播，一次顯示一張並水平置中 */
    .project-portfolio-gallery__carousel {
        width: 100%;
    }

    .project-portfolio-gallery__stage {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 卡片寬度扣掉左右 22px 內距與兩側 36px 箭頭欄位，避免整個作品區被撐寬而向右偏移 */
    .project-portfolio-gallery__viewport {
        flex: 1 1 auto;
        min-width: 0;
        max-width: min(300px, calc(100vw - 116px));
        margin: 0 36px;
        overflow: hidden;
    }

    .project-portfolio-gallery__grid {
        display: flex;
        grid-template-columns: none;
        align-items: stretch;
        gap: 0;
        width: 100%;
        transition: transform 0.45s ease;
    }

    .project-portfolio-gallery-card {
        flex: 0 0 100%;
        min-width: 0;
    }

    /* 手機版是一次一張的輪播，不套用電腦版的分頁隱藏 */
    .project-portfolio-gallery-card.is-paged-out {
        display: grid;
    }

    .project-portfolio-gallery-card img {
        aspect-ratio: 1 / 1.12;
    }

    .project-portfolio-gallery__arrow {
        position: absolute;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        border: 0;
        background: transparent;
        cursor: pointer;
        transform: translateY(-50%);
        -webkit-tap-highlight-color: transparent;
    }

    .project-portfolio-gallery__arrow--prev {
        left: 0;
    }

    .project-portfolio-gallery__arrow--next {
        right: 0;
    }

    .project-portfolio-gallery__arrow img {
        display: block;
        width: 20px;
        height: auto;
    }

    .project-portfolio-gallery__dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 22px;
    }

    .project-portfolio-gallery__dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #cdd6dc;
        cursor: pointer;
        transition: background-color 0.25s ease, transform 0.25s ease;
    }

    .project-portfolio-gallery__dot.is-active {
        background: #2d7e8d;
        transform: scale(1.3);
    }

    /* 手機版輪播以圓點導覽，隱藏原本的頁碼分頁 */
    .project-portfolio-gallery-pagination {
        display: none;
    }

    /* 工程明細：手機版改為上下堆疊，並套用與列表頁相同的灰底六角形背景 */
    .project-portfolio-detail {
        min-height: auto;
        padding: 54px 22px 70px;
        row-gap: 34px;
        background-color: #edf0f2;
        background-image: var(--project-portfolio-private-bg-image);
        background-position: center top;
        background-size: cover;
    }

    /* 手機版分類大標題／副標題，字級與顏色對齊列表頁 .project-portfolio-private */
    .project-portfolio-detail__category {
        display: grid;
        gap: 10px;
        justify-items: center;
        text-align: center;
    }

    .project-portfolio-detail__category-en {
        /* 6em 上限強制 PUBLIC / WORKS 各自成行，作法同 .project-evaluation-estimating__title */
        max-width: 6em;
        margin: 0;
        color: #1e3859;
        font-size: clamp(2.55rem, 12vw, 3.6rem);
        font-weight: 100;
        line-height: 0.98;
    }

    .project-portfolio-detail__category-zh {
        margin: 0;
        color: #08aef0;
        font-size: 1.34rem;
        font-weight: 600;
        line-height: 1.25;
    }

    .project-portfolio-detail__inner {
        grid-template-columns: 1fr;
        row-gap: 30px;
        justify-items: center;
    }

    /* 手機版上下堆疊，圖片欄不需要再跟規格表齊高；
       aspect-ratio 沿用電腦版的 1.32:1，輪播左右切換時高度才不會跳動。 */
    .project-portfolio-detail__media {
        width: min(300px, 100%);
    }

    /* 手機版圖小，圓點往內收一點避免壓到照片主體 */
    .project-portfolio-detail__media .news-carousel__dots {
        bottom: 10px;
        padding: 6px 10px;
        gap: 6px;
    }

    .project-portfolio-detail__info {
        width: 100%;
    }

    .project-portfolio-detail__title {
        font-size: clamp(1.55rem, 7vw, 2rem);
        text-align: center;
    }

    .project-portfolio-detail__specs {
        margin-top: 26px;
    }

    .project-portfolio-detail__spec {
        grid-template-columns: minmax(92px, 0.4fr) minmax(0, 0.6fr);
    }

    .project-portfolio-detail__spec dt {
        padding: 12px 8px;
        font-size: 0.82rem;
    }

    .project-portfolio-detail__spec dd {
        justify-content: center;
        padding: 12px 14px;
        font-size: 0.82rem;
        text-align: center;
    }

    .project-portfolio-detail__back {
        align-self: center;
        gap: 20px;
        margin-top: 26px;
        padding: 11px 26px;
    }

    .project-evaluation-estimating {
        padding: 112px 22px 70px;
    }

    .project-evaluation-estimating__inner {
        gap: 40px;
    }

    /* 手機版工程估價：標題、副標置中，標題一個單字一行 */
    .project-evaluation-estimating__heading {
        justify-items: center;
        text-align: center;
    }

    .project-evaluation-estimating__title {
        /* 8em 較 customer-service 的 6em 寬，容納較長的 CONSTRUCTION / ESTIMATING 單字各自成行 */
        max-width: 8em;
        font-size: clamp(2rem, 11vw, 2.85rem);
        line-height: 1.05;
        /* 解除電腦版 nowrap，並以窄寬度強制 CONSTRUCTION / ESTIMATING 各自成行 */
        white-space: normal;
    }

    .project-evaluation-estimating__subtitle {
        margin-top: 10px;
        font-size: 1.34rem;
    }

    .project-evaluation-estimating__body,
    .project-evaluation-estimating__intro {
        grid-template-columns: minmax(0, 1fr);
    }

    .project-evaluation-estimating__body {
        gap: 34px;
    }

    .project-evaluation-estimating__intro {
        gap: 22px;
        /* 內容文字與地圖整體置中 */
        justify-items: center;
    }

    .project-evaluation-estimating__copy {
        /* 解除平板斷點的滿版寬度，內容置中並留出左右留白 */
        width: min(290px, 84%);
        font-size: 0.88rem;
        line-height: 1.95;
    }

    /* 地圖：參考 energy-intelligence 的 dashboard-figure，加上青藍三角裝飾 */
    .project-evaluation-estimating__map-figure {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .project-evaluation-estimating__map-frame {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .project-evaluation-estimating__map {
        width: min(270px, 72%);
        aspect-ratio: 4 / 3;
    }

    .project-evaluation-estimating-form__fields {
        grid-template-columns: 1fr;
        gap: 15px;
        /* 欄位整體置中內縮，左右留白與上方內容、地圖一致 */
        width: min(330px, 100%);
        margin-inline: auto;
    }

    /* 手機版：標題置左、靠右對齊，輸入框占滿剩餘寬度 */
    .project-evaluation-estimating-form__field {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
    }

    .project-evaluation-estimating-form__field > span {
        text-align: right;
    }

    /* 服務項目維持多行文字框，標題對齊頂端 */
    .project-evaluation-estimating-form__field--textarea {
        align-items: start;
    }

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

    .project-evaluation-estimating-form textarea {
        min-height: 132px;
    }

    /* footer：reCAPTCHA、隱私同意、送出鈕整體置中 */
    .project-evaluation-estimating-form__footer {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 22px;
        margin-top: 30px;
        margin-left: 0;
    }

    .project-evaluation-estimating-form__robot {
        width: fit-content;
        max-width: 100%;
    }

    .project-evaluation-estimating-form__submit-area {
        align-items: center;
        width: 100%;
    }

    .project-evaluation-estimating-form__button {
        width: min(220px, 64%);
        min-height: 54px;
        font-size: 1.12rem;
    }

    /* 手機版第一屏：改用 banner-m 圖片，隱藏電腦版文字 */
    .customer-service-hero {
        min-height: 0;
        padding: 64px 0 0;
        /* 白底避免深色 body 背景從圖片縮放的次像素縫隙透出而形成黑線 */
        background: #ffffff;
        overflow: hidden;
    }

    .customer-service-hero__content {
        display: none;
    }

    .customer-service-hero__banner-m {
        display: block;
        width: 100%;
        height: auto;
        /* 圖片下緣與下一區塊密合，避免深色背景透出 */
        margin-bottom: -1px;
        vertical-align: bottom;
    }

    .customer-service-contact {
        padding: 112px 22px 70px;
    }

    .customer-service-contact__inner {
        gap: 40px;
    }

    /* 手機版客售服務：標題、副標置中，標題一個單字一行 */
    .customer-service-contact__heading {
        justify-items: center;
        text-align: center;
    }

    .customer-service-contact__title {
        max-width: 6em;
        font-size: clamp(2.2rem, 13vw, 3.3rem);
        line-height: 1.05;
        /* 解除電腦版 nowrap，並以窄寬度強制 CUSTOMER / SERVICE 各自成行 */
        white-space: normal;
    }

    .customer-service-contact__subtitle {
        margin-top: 10px;
        font-size: 1.34rem;
    }

    .customer-service-contact__consultation,
    .customer-service-contact__intro,
    .customer-service-contact__feature {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-service-contact__consultation {
        gap: 34px;
    }

    .customer-service-contact__intro {
        gap: 22px;
        /* 內容文字與地圖整體置中 */
        justify-items: center;
    }

    .customer-service-contact__copy {
        /* 解除平板斷點的滿版寬度，內容置中並留出左右留白 */
        width: min(290px, 84%);
        font-size: 0.88rem;
        line-height: 1.95;
    }

    /* 地圖：參考 energy-intelligence 的 dashboard-figure，加上青藍三角裝飾 */
    .customer-service-contact__map-figure {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .customer-service-contact__map-frame {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .customer-service-contact__map {
        width: min(270px, 72%);
        aspect-ratio: 4 / 3;
    }

    .customer-service-form__fields {
        grid-template-columns: 1fr;
        gap: 15px;
        /* 欄位整體置中內縮，左右留白與上方內容、地圖一致 */
        width: min(330px, 100%);
        margin-inline: auto;
    }

    /* 手機版：標題置左、靠右對齊，輸入框占滿剩餘寬度 */
    .customer-service-form__field {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
    }

    .customer-service-form__field > span {
        text-align: right;
    }

    /* 服務項目維持多行文字框，標題對齊頂端 */
    .customer-service-form__field--textarea {
        align-items: start;
    }

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

    .customer-service-form textarea {
        min-height: 132px;
    }

    /* footer：reCAPTCHA、隱私同意、送出鈕整體置中 */
    .customer-service-form__footer {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 22px;
        margin-top: 30px;
        /* 解除電腦版 footer 的 85px 左外距，避免手機版整欄寬度被撐破而右側溢出 */
        margin-left: 0;
    }

    .customer-service-form__robot {
        width: fit-content;
        max-width: 100%;
    }

    .customer-service-form__submit-area {
        align-items: center;
        width: 100%;
    }

    .customer-service-form__button {
        width: min(220px, 64%);
        min-height: 54px;
        font-size: 1.12rem;
    }

    .customer-service-contact__feature {
        gap: 28px;
    }

    .customer-service-contact__feature-copy {
        width: 100%;
    }

    /* 手機版第一屏：改用 banner-m 圖片，隱藏電腦版文字 */
    .benefits-hero {
        min-height: 0;
        padding: 64px 0 0;
        /* 白底避免深色 body 背景從圖片縮放的次像素縫隙透出而形成黑線 */
        background: #ffffff;
        overflow: hidden;
    }

    .benefits-hero__content {
        display: none;
    }

    .benefits-hero__banner-m {
        display: block;
        width: 100%;
        height: auto;
        /* 圖片下緣與下一區塊密合，避免深色背景透出 */
        margin-bottom: -1px;
        vertical-align: bottom;
    }

    .benefits-events {
        padding: 112px 22px 68px;
    }

    .benefits-events__heading {
        margin-bottom: 38px;
    }

    .benefits-events__title {
        font-size: clamp(2.6rem, 11vw, 4rem);
        margin-bottom: 30px;
    }

    .benefits-events__subtitle {
        margin-bottom: 30px;
        font-size: 1.34rem;
    }

    .benefits-events__copy {
        text-align: center;
    }

    .benefits-events__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 18px;
    }

    .benefits-events-card {
        gap: 10px;
    }

    .benefits-events__pagination {
        gap: 16px;
        margin-top: 48px;
        font-size: 1.1rem;
    }

    .about-profile {
        padding: 78px 22px 104px;
    }

    .about-profile__english {
        margin-bottom: 10px;
        font-size: clamp(2.35rem, 12vw, 4rem);
    }

    .about-profile__subtitle {
        margin-bottom: 18px;
        font-size: 1.35rem;
    }

    .about-profile__copy {
        /* 內文欄寬比照設計稿：約 66% 視窗寬、左右各約 17% 留白 */
        width: 66vw;
        max-width: 360px;
        margin-bottom: 30px;
        font-size: 0.88rem;
        line-height: 1.9;
    }

    /* 手機版第二屏改用直式服務循環圖 01-m.png，並追加服務輪播 */
    .about-profile {
        /* 固定單欄寬度，避免輪播 flex 軌道把 grid 欄位撐到 max-content 而溢出 */
        grid-template-columns: minmax(0, 1fr);
        /* 背景放大並上靠，把 background.png 內含的三角形（底部約 14%）裁切到區塊外，
           底部僅保留 ::before 繪製的單一向下三角形，避免出現兩個三角形 */
        background-position: top center;
        background-size: auto 105%;
        background-repeat: no-repeat;
        padding-bottom: 124px;
    }

    .about-profile__content {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-profile__image--desktop {
        display: none;
    }

    .about-profile__image--mobile {
        display: block;
        width: min(360px, 86%);
        min-height: 0;
        height: auto;
        margin: 6px auto 0;
        object-fit: contain;
    }

    .about-services {
        display: block;
        width: 100%;
        margin-top: 30px;
    }

    .about-services__stage {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .about-services__viewport {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 38px;
        overflow: hidden;
        border-radius: 14px;
    }

    .about-services__track {
        display: flex;
        align-items: stretch;
        margin: 0;
        padding: 0;
        list-style: none;
        transition: transform 0.45s ease;
    }

    .about-services-card {
        display: flex;
        flex: 0 0 100%;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        padding: 0;
        background: transparent;
        color: #ffffff;
        text-align: center;
    }

    .about-services-card__number {
        font-size: 4.4rem;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.02em;
    }

    .about-services-card__title {
        margin: 8px 0 0;
        font-size: 1.95rem;
        font-weight: 700;
        letter-spacing: 0.04em;
    }

    .about-services-card__line {
        display: block;
        width: 66%;
        height: 1px;
        margin: 16px 0 14px;
        background: rgba(255, 255, 255, 0.7);
    }

    .about-services-card__english {
        margin: 0 0 14px;
        font-size: 1.12rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        color: rgba(255, 255, 255, 0.96);
    }

    .about-services-card__copy {
        max-width: 30ch;
        margin: 0;
        font-size: 0.84rem;
        font-weight: 400;
        line-height: 1.85;
        color: rgba(255, 255, 255, 0.9);
    }

    /* 手機版卡片改用 0001-m～0005-m 整張圖片，隱藏原本的文字內容 */
    .about-services-card__image {
        display: block;
        width: 100%;
        height: auto;
    }

    .about-services-card__number,
    .about-services-card__title,
    .about-services-card__line,
    .about-services-card__english,
    .about-services-card__copy {
        display: none;
    }

    .about-services__arrow {
        position: absolute;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        border: 0;
        background: transparent;
        cursor: pointer;
        transform: translateY(-50%);
        -webkit-tap-highlight-color: transparent;
    }

    .about-services__arrow--prev {
        left: 0;
    }

    .about-services__arrow--next {
        right: 0;
    }

    .about-services__arrow img {
        display: block;
        width: 20px;
        height: auto;
    }

    .about-services__dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 22px;
    }

    .about-services__dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #cdd6dc;
        cursor: pointer;
        transition: background-color 0.25s ease, transform 0.25s ease;
    }

    .about-services__dot.is-active {
        background: #7ba6c1;
        transform: scale(1.3);
    }

    /* 手機版第三屏：標題→副標題→內文→圖片(02.png) 由上到下置中 */
    .about-history {
        min-height: 0;
        padding: 92px 22px 40px;
        place-items: start center;
        text-align: center;
    }

    /* 手機版回到單欄堆疊，取消電腦版的兩欄格線定位 */
    .about-history__inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 22px;
        width: 100%;
    }

    /* 手機版標題／副標題／內文回到 __content 內部，不再各自成為 grid 項目 */
    .about-history__content {
        display: block;
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        padding-top: 0;
        text-align: center;
    }

    .about-history__title {
        margin-bottom: 16px;
        font-size: clamp(3.25rem, 15vw, 4.4rem);
    }

    .about-history__subtitle {
        margin-bottom: 18px;
        font-size: 1.5rem;
    }

    .about-history__copy {
        /* 內文欄寬比照第二屏（66vw / max 360px），左右留白比例一致 */
        width: 66vw;
        max-width: 360px;
        margin: 0 auto;
        font-size: 0.9rem;
        line-height: 1.9;
        /* 內文寬度左右對齊 */
        text-align: justify;
    }

    .about-history__mark {
        grid-column: auto;
        grid-row: auto;
        width: min(260px, 78vw);
        margin: 8px 0 0;
        justify-self: center;
    }

    .about-timeline {
        display: grid;
        height: auto;
        min-height: 100vh;
        padding: 12px 22px 60px;
        place-items: start center;
    }

    /* 手機版第三屏底部不需要向下三角形（::before/::after 為電腦版裝飾） */
    .about-timeline::before,
    .about-timeline::after {
        display: none;
    }

    /* 手機版隱藏電腦版第三屏的左欄圖片與右欄沿革表格，沿革改由下方 .about-timeline-flow 呈現 */
    .about-timeline__inner,
    .about-timeline__image {
        display: none;
    }

    /* 手機版沿革時間軸：左側軸線＋圓點，右側「年份膠囊＋事件卡片」，資料與電腦版右欄同一份。
       原本整段用 002-m.png，圖片縮到手機寬度後字只有 9px 左右又模糊，改成真文字才能放大到可讀字級 */
    .about-timeline-flow {
        position: relative;
        display: grid;
        gap: 14px;
        width: 100%;
        /* 欄寬比第二屏主視覺（360px）略寬，讓卡片文字放大後仍有足夠行寬 */
        max-width: 420px;
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }

    .about-timeline-flow__item {
        position: relative;
        display: grid;
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 8px;
        align-items: stretch;
        min-height: 44px;
        /* 左側留給軸線與圓點 */
        padding-left: 34px;
    }

    /* 縱向軸線：逐列接續（多畫一個列距 14px 銜接下一列），left 與圓點同心
       （圓點內心 left 8px、寬 5px → 圓心 10.5px，軸線 9px 起算寬 3px 剛好對齊） */
    .about-timeline-flow__item::before {
        position: absolute;
        top: 0;
        left: 9px;
        width: 3px;
        height: calc(100% + 14px);
        background: #52616f;
        content: '';
    }

    /* 最後一列的軸線只畫到圓點圓心，收在圓點上不留線頭 */
    .about-timeline-flow__item:last-child::before {
        height: 50%;
    }

    /* 軸線上的圓點：內心 5px，外圈用 box-shadow 疊出白色留白與外環（外徑 21px），
       白色留白同時遮住穿過圓點的軸線 */
    .about-timeline-flow__item::after {
        position: absolute;
        top: 50%;
        left: 8px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #52616f;
        box-shadow: 0 0 0 5px #ffffff, 0 0 0 8px #52616f;
        transform: translateY(-50%);
        content: '';
    }

    .about-timeline-flow__year {
        display: grid;
        padding: 8px 4px;
        border-radius: 8px;
        background: #5b6b7f;
        color: #ffffff;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.3;
        place-items: center;
        text-align: center;
        /* 「1976~2013年」靠 HTML 的零寬空格在波浪號後斷行，其餘標籤不硬斷字 */
        word-break: keep-all;
    }

    .about-timeline-flow__card {
        display: grid;
        gap: 4px;
        align-content: center;
        padding: 9px 12px;
        border: 1px solid #d8dfe7;
        border-radius: 6px;
        background: #ffffff;
        box-shadow: 0 1px 2px rgba(38, 50, 66, 0.08);
    }

    .about-timeline-flow__title {
        color: #4c545c;
        font-size: 0.95rem;
        font-weight: 500;
        line-height: 1.55;
    }

    /* 後台「內容」欄位有填才出現，字級只比標題小一級，避免補充說明看不清 */
    .about-timeline-flow__note {
        color: #8a9199;
        font-size: 0.85rem;
        font-weight: 400;
        line-height: 1.5;
    }

    /* 手機版：時間軸下方補上分頁按鈕，樣式比照電腦版右欄的分頁；頁數多時可換行不爆版 */
    .about-timeline-pagination--mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 18px;
        margin-top: 30px;
        font-size: 1.14rem;
    }

    /* 手指點擊區加大，避免頁碼太小點不到 */
    .about-timeline-pagination--mobile a {
        min-width: 26px;
        min-height: 34px;
    }

    .about-structure {
        padding: 86px 22px 84px;
    }

    .about-structure__title {
        margin-bottom: 10px;
        font-size: clamp(2.25rem, 11vw, 3.8rem);
    }

    .about-structure__subtitle {
        margin-bottom: 26px;
        font-size: 1.35rem;
    }

    /* 手機版第四屏：標題 → 副標題 → 扇形示意圖(003-m.png) → 左右文字部門列表 */
    .about-structure__image--desktop {
        display: none;
    }

    .about-structure__image--mobile {
        display: block;
        width: min(340px, 92%);
        height: auto;
        margin: 0 auto;
        object-fit: contain;
    }

    .about-structure__org {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 26px;
        width: min(340px, 92%);
        margin: 30px auto 0;
    }

    .about-structure__org-col {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .about-structure__org-head {
        display: block;
        width: clamp(100px, 32vw, 124px);
        height: auto;
        margin: 0 auto 8px;
    }

    .about-structure__dept-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .about-structure__dept {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 13px 4px;
        border-bottom: 1px solid #d7dce0;
    }

    .about-structure__dept-name {
        color: #4d7079;
        font-size: 0.96rem;
        font-weight: 600;
        letter-spacing: 0.06em;
    }

    .about-awards {
        padding: 92px 32px 58px;
    }

    /* 第五屏（得獎紀錄）手機版：依設計稿由上到下重排，並改用 -m 去背圖 */
    .about-awards__title {
        font-size: clamp(2.4rem, 11vw, 4rem);
        text-align: center;
    }

    /* 標題斷成 HONORS / & / AWARDS 三行 */
    .about-awards__title-br {
        display: inline;
    }

    .about-awards__subtitle {
        margin-bottom: 24px;
        font-size: 1.35rem;
        text-align: center;
    }

    .about-awards__stage {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    /* 讓 intro 內的清單與標誌脫離左欄，直接成為 stage 的排序項目 */
    .about-awards__intro {
        display: contents;
    }

    /* 得獎條列：置中呈現，獎項名稱與類別之間以「｜」相連（設計稿為一段連續文字） */
    .about-awards__list {
        padding-top: 0;
        text-align: center;
    }

    .about-awards__list li {
        gap: 0;
        justify-content: center;
    }

    /* 只有一段文字的獎項（國家優良建商認證標章）不加分隔線 */
    .about-awards__list li span:not(:last-child)::after {
        content: '｜';
    }

    /*
     * 手機版改以下方的獎座輪播呈現獎項：
     * 四個金石獎徽章的內容已在上方得獎條列列出，兩個標誌則沿用在輪播的待補框內，故此處隱藏。
     */
    .about-awards__badges,
    .about-awards__logos {
        display: none;
    }

    /* 獎座輪播：一次呈現一座獎座＋金色說明文字，以左右箭頭與圓點切換 */
    .about-awards__carousel {
        display: block;
        /* 左右各外擴 10px 借用區塊留白，讓箭頭移到獎座照片外側後仍保有設計稿的照片寬度 */
        margin: 22px -10px 0;
    }

    .about-awards__carousel-stage {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        /* 與獎座照片同步收窄，箭頭才會貼在照片兩側而不是螢幕邊緣 */
        width: min(360px, 100%);
        margin: 0 auto;
    }

    .about-awards__carousel-viewport {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 26px;
        overflow: hidden;
    }

    .about-awards__carousel-track {
        display: flex;
        align-items: start;
        margin: 0;
        padding: 0;
        list-style: none;
        transition: transform 0.45s ease;
    }

    .about-awards__carousel-slide {
        display: flex;
        flex: 0 0 100%;
        min-width: 0;
        justify-content: center;
    }

    .about-awards__carousel-figure {
        display: grid;
        gap: 12px;
        align-content: start;
        justify-items: center;
        /* 大螢幕手機不讓獎座照片無限放大 */
        width: min(300px, 100%);
        margin: 0;
    }

    .about-awards__carousel-image {
        display: block;
        width: 100%;
        height: auto;
    }

    .about-awards__carousel-caption {
        color: #d2bd80;
        font-size: 0.84rem;
        font-weight: 500;
        line-height: 1.5;
        text-align: center;
    }

    /* 待補獎座：灰底框內放獎項標誌與「待補」字樣，比例與電腦版獎項牆一致 */
    .about-awards__carousel-figure--placeholder {
        gap: 20px;
        align-content: center;
        aspect-ratio: 172 / 250;
        background: rgba(158, 168, 168, 0.5);
    }

    .about-awards__carousel-logo {
        width: 74%;
        max-width: 156px;
        height: auto;
    }

    .about-awards__carousel-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__carousel-arrow {
        position: absolute;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        border: 0;
        background: transparent;
        cursor: pointer;
        transform: translateY(-50%);
        -webkit-tap-highlight-color: transparent;
    }

    .about-awards__carousel-arrow--prev {
        left: 0;
    }

    .about-awards__carousel-arrow--next {
        right: 0;
    }

    .about-awards__carousel-arrow img {
        display: block;
        width: 18px;
        height: auto;
        /* 箭頭素材為藍綠色，在深藍綠底色上改成白色以維持對比 */
        filter: brightness(0) invert(1);
    }

    .about-awards__carousel-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 22px;
    }

    .about-awards__carousel-dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.45);
        cursor: pointer;
        transition: background-color 0.25s ease, transform 0.25s ease;
    }

    .about-awards__carousel-dot.is-active {
        background: #d2bd80;
        transform: scale(1.3);
    }

    /* 下方工程照片改用 03-m 直式合併圖 */
    .about-awards__strip--single .about-awards__strip-img--desktop {
        display: none;
    }

    .about-awards__strip--single .about-awards__strip-img--mobile {
        display: block;
    }

    .about-awards__strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: 118px;
        margin-top: 42px;
    }

    .about-awards__strip-item--feature {
        grid-column: auto;
        grid-row: auto;
    }

    /* 首頁第二屏（手機版）：ABOUT 落在工地照片上方的藍綠底色區，標題與內文以置中白字排在照片下方，對齊設計稿 docs/mobile/首頁第二屏.png */
    .home-about {
        padding: clamp(96px, 16vh, 132px) 24px clamp(72px, 12vh, 104px);
    }

    .home-about__stage {
        width: min(100%, 560px);
        max-width: 100%;
        padding-top: clamp(92px, 23vw, 124px); /* 預留 ABOUT 標題落在照片上方的空間 */
        text-align: center;
    }

    .home-about__image {
        width: 100%;
        aspect-ratio: 1 / 1;
        margin: 0;
    }

    .home-about__card {
        position: static;
        top: auto;
        left: auto;
        width: 100%;
        margin: clamp(26px, 5vh, 38px) 0 0;
        padding: 0;
        background: transparent;
        text-align: center;
    }

    .home-about__title {
        position: absolute;
        top: clamp(8px, 3vw, 20px);
        left: 0;
        right: 0;
        margin: 0;
        color: rgba(255, 255, 255, 0.9);
        font-size: 4rem;
        font-weight: 100;
        line-height: 1;
        text-align: center;
        text-shadow: none;
    }

    .home-about__card h2 {
        margin: 0 auto clamp(16px, 3.5vh, 24px);
        color: #ffffff;
        font-size: clamp(1.4rem, 6.4vw, 1.85rem);
        font-weight: 700;
        line-height: 1.5;
    }

    .home-about__card h2 span {
        display: block;
    }

    .home-about__card p:last-child {
        margin: 0;
        color: rgba(255, 255, 255, 0.94);
        font-size: clamp(0.86rem, 3.7vw, 1rem);
        font-weight: 400;
        line-height: 2;
    }

    .home-news {
        padding: 112px 20px 68px;
        background-position: 42% center;
    }

    .home-news__inner {
        gap: 26px;
    }

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

    .home-news__title {
        font-size: 4rem;
    }

    .home-news__heading h2 {
        font-size: 1.5rem;
    }

    .home-news__intro,
    .home-news__cards {
        grid-template-columns: 1fr;
    }

    .home-news__intro {
        gap: 18px;
        justify-items: center;
        text-align: center;
    }

    .home-news__intro p {
        font-size: 1.02rem;
        line-height: 1.9;
    }

    .home-news__button {
        display: none;
    }

    .home-news__cards {
        display: flex;
        gap: 14px;
        margin: 0 -20px;
        padding: 4px 20px 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .home-news__cards::-webkit-scrollbar {
        display: none;
    }

    .home-news-card,
    .home-news-card--offset {
        flex: 0 0 86%;
        margin-top: 0;
        scroll-snap-align: center;
        box-shadow: 0 14px 30px rgba(24, 38, 52, 0.12);
    }

    .home-news-card img,
    .home-news-card video {
        aspect-ratio: 4 / 3;
    }

    .home-news-card__body {
        padding: 14px 22px 16px;
    }

    .home-news-card__body h3 {
        font-size: 1rem;
    }

    .home-news-card__body p {
        min-height: calc(1.5em * 3);
        font-size: .8rem;
        line-height: 1.5;
    }

    .home-news__dots {
        display: flex;
    }

    .home-quality {
        padding: 104px 4rem 68px;
    }

    .home-quality__inner {
        gap: 3rem;
    }

    .home-quality__body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "action";
        gap: 18px;
    }

    .home-quality__button {
        justify-self: center;
    }

    .home-quality__title {
        margin-bottom: 12px;
        font-size: 4rem;
    }

    .home-quality__heading h2 {
        font-size: 1.28rem;
    }

    .home-quality__body p {
        font-size: 0.9rem;
        line-height: 2;
    }

    /* 第四屏內文：手機版顯示逐句斷行版本，隱藏桌機逗號併行版本 */
    .home-quality__copy--desktop {
        display: none;
    }

    .home-quality__copy--mobile {
        display: block;
    }

    .home-quality__gallery {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .home-quality__figure {
        min-height: 0;
    }

    .home-quality__figure img {
        height: 100%;
    }

    .home-quality__figure-button {
        display: none;
    }

    .home-join__future {
        font-size: clamp(3.8rem, 13vw, 6rem);
    }

    /* 首頁第五屏（手機版）：JOIN US 白卡置中（播放鍵＋JOIN US＋加入元順＋人物照），下方為置中文案與膠囊按鈕，隱藏右下小圖，對齊設計稿 docs/mobile/首頁第五屏.png */
    .home-join {
        padding: clamp(72px, 12vh, 104px) 24px clamp(64px, 11vh, 84px);
    }

    .home-join__inner {
        gap: clamp(26px, 5vh, 38px);
    }

    .home-join__hero {
        width: min(420px, 86%);
        grid-template-columns: 1fr;
        min-height: 0;
        margin: 0 auto;
        box-shadow: 0 18px 36px rgba(24, 38, 52, 0.12);
    }

    .home-join__panel {
        order: 1;
        gap: clamp(10px, 2.4vh, 16px);
        min-height: 0;
        height: auto;
        padding: clamp(26px, 5vw, 34px) 24px clamp(20px, 4vw, 28px);
    }

    .home-join__play {
        display: grid;
        width: 42px;
        height: 42px;
        margin: 0 0 2px;
        font-size: 0.82rem;
    }

    .home-join__title {
        font-size: clamp(2rem, 10.5vw, 2.6rem);
        text-align: center;
    }

    .home-join__subtitle {
        display: block;
        margin: 0;
        color: #08aef0;
        font-size: clamp(1.12rem, 5.4vw, 1.32rem);
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
    }

    .home-join__main-image {
        order: 2;
        height: auto;
        aspect-ratio: 16 / 11;
    }

    .home-join__content {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: clamp(20px, 4vh, 28px);
        min-height: 0;
        text-align: center;
    }

    .home-join__copy {
        width: 100%;
    }

    .home-join__copy h2 {
        display: none;
    }

    .home-join__copy p {
        max-width: 16em;
        margin: 0 auto;
        font-size: clamp(0.86rem, 3.9vw, 0.95rem);
        line-height: 2.1;
    }

    /* 手機版：隱藏桌機整段，改用逐句斷行版本（對齊設計稿），放寬寬度避免長句再次折行 */
    .home-join__copy .home-join__copy-text--desktop {
        display: none;
    }

    .home-join__copy .home-join__copy-text--mobile {
        display: block;
        max-width: none;
    }

    .home-join__button {
        justify-self: center;
        min-height: 34px;
    }

    .home-join__side-image {
        display: none;
    }

    /* 手機版頁尾：版權自成一行、ADD 自成一行、TEL／FAX 並列同一行，全部水平置中 */
    .site-footer__contact {
        gap: 6px 16px;
    }

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

    .back-to-top {
        right: 18px;
        bottom: 18px;
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 575px) {
    .site-brand {
        gap: 8px;
    }

    .site-header--home {
        padding: 22px 20px 0;
    }

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

    .home-menu__toggle img {
        width: 46px;
        height: 46px;
    }

    .home-menu__panel {
        top: 14px;
        width: calc(100vw - 36px);
        max-height: calc(100vh - 28px);
        padding: 64px 24px 28px;
    }

    .home-menu__nav {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .home-menu__group {
        gap: 8px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(5, 43, 93, 0.14);
    }

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

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

    .home-about {
        padding: clamp(88px, 14vh, 112px) 18px clamp(64px, 10vh, 88px);
    }

    .home-about__image {
        aspect-ratio: 1 / 1;
    }

    .home-about__card {
        width: 100%;
        padding: 0;
    }

    .home-about__title {
        top: clamp(6px, 3vw, 16px);
        font-size: 4rem;
    }

    .home-about__card h2 {
        font-size: clamp(1.32rem, 6.6vw, 1.6rem);
    }

    .home-about__card p:last-child {
        font-size: clamp(0.84rem, 3.9vw, 0.94rem);
        line-height: 1.95;
    }

    .home-quality__title {
        font-size: 4rem;
    }

    .home-quality__heading h2 {
        font-size: 1.5rem;
    }

    .home-join__future {
        font-size: clamp(3.4rem, 18.5vw, 4.9rem);
    }

    .site-nav__link {
        font-size: 0.88rem;
    }

    .site-nav__dropdown a {
        font-size: 0.82rem;
    }

    .project-evaluation-estimating {
        padding-right: 18px;
        padding-left: 18px;
    }

    .project-evaluation-estimating__copy {
        font-size: 0.86rem;
        line-height: 1.9;
    }

    /* 維持標題置左、靠右對齊的水平排版（不堆疊） */
    .project-evaluation-estimating-form__field {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 10px;
    }

    .project-evaluation-estimating-form__robot .g-recaptcha {
        transform: scale(0.86);
        transform-origin: top center;
    }

    .customer-service-contact {
        padding-right: 18px;
        padding-left: 18px;
    }

    .customer-service-contact__copy,
    .customer-service-contact__feature-copy p {
        font-size: 0.86rem;
        line-height: 1.9;
    }

    /* 維持標題置左、靠右對齊的水平排版（不堆疊） */
    .customer-service-form__field {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 10px;
    }

    .customer-service-form__robot .g-recaptcha {
        transform: scale(0.86);
        transform-origin: top center;
    }

    .about-profile {
        padding-right: 18px;
        padding-left: 18px;
    }

    .about-profile__copy {
        text-align: center;
    }

    .about-history {
        padding-right: 18px;
        padding-left: 18px;
    }

    .about-history__title {
        font-size: clamp(2.85rem, 14.5vw, 3.7rem);
    }

    .about-timeline {
        padding-right: 18px;
        padding-left: 18px;
    }

    .about-timeline__image {
        width: 100%;
    }

    .about-timeline__item {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 12px;
    }

    .about-timeline__item time {
        font-size: 0.8rem;
    }

    .about-timeline__item span {
        font-size: 0.76rem;
    }

    .about-structure {
        padding-right: 18px;
        padding-left: 18px;
    }

    .about-structure__title {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .about-structure__org {
        gap: 0 18px;
    }

    .about-structure__dept-name {
        font-size: 0.9rem;
        letter-spacing: 0.04em;
    }

    .about-awards {
        padding-right: 28px;
        padding-left: 28px;
    }

    .about-awards__title {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .about-awards__list {
        font-size: 0.82rem;
    }

    .building-information-modeling-intro {
        padding-right: 18px;
        padding-left: 18px;
    }

    .building-information-modeling-intro__title {
        font-size: clamp(2.05rem, 10vw, 3rem);
    }

    .building-information-modeling-flipbook {
        padding-right: 12px;
        padding-left: 12px;
    }

    .building-information-modeling-flipbook__stage {
        grid-template-columns: 26px minmax(0, 1fr) 26px;
        gap: 4px;
    }

    .building-information-modeling-flipbook__button {
        width: 26px;
    }

    .building-information-modeling-flipbook__button span {
        font-size: 2.7rem;
    }

    .energy-intelligence-interface-flipbook__stage {
        grid-template-columns: 26px minmax(0, 1fr) 26px;
        gap: 4px;
    }

    .energy-intelligence-interface-flipbook__button {
        width: 26px;
    }

    .energy-intelligence-interface-flipbook__button span {
        font-size: 2.7rem;
    }

    .building-information-modeling-process__intro {
        padding: 48px 22px;
    }

    .building-information-modeling-process__intro p {
        font-size: 0.8rem;
    }

    .building-information-modeling-process__stage {
        width: min(420px, calc(100% - 16px));
    }

    .building-information-modeling-process-card__body {
        padding: 26px 24px 30px;
    }

    .benefits-events {
        padding-right: 4rem;
        padding-left: 4rem;
    }

    .benefits-events__grid {
        grid-template-columns: 1fr;
        width: min(360px, 100%);
    }

    .benefits-events-card__title {
        font-size: 1.16rem;
    }

    .about-awards__strip {
        grid-auto-rows: 102px;
    }

}

@media (max-width: 374px) {
    .site-brand__text {
        display: none;
    }

    .home-quality__title {
        font-size: 4rem;
    }

    .home-join__future {
        font-size: clamp(2.8rem, 17.5vw, 4.2rem);
    }

    .about-history__title {
        font-size: 2.55rem;
    }

    /* 小尺寸手機：年份膠囊與左側留白收窄，讓事件卡片保留可讀的行寬 */
    .about-timeline-flow__item {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 6px;
        padding-left: 28px;
    }

    .about-timeline-flow__year {
        font-size: 0.94rem;
    }

    .about-timeline-flow__card {
        padding: 9px 10px;
    }

    .about-structure__title {
        font-size: 2.35rem;
    }

    .about-awards__title {
        font-size: 2.34rem;
    }

    .benefits-events__title {
        font-size: 2.26rem;
    }
}

@media (max-width: 767px) {
    .benefits-lightbox {
        padding: 16px 10px;
    }

    .benefits-lightbox__close {
        top: 10px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 1.7rem;
    }

    .benefits-lightbox__image {
        max-height: calc(100vh - 150px);
    }

    .benefits-lightbox__nav {
        width: 42px;
        height: 42px;
        font-size: 1.7rem;
        background: rgba(255, 255, 255, 0.18);
    }

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

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

    .benefits-lightbox__title {
        font-size: 1rem;
    }

    .benefits-lightbox__counter {
        font-size: 0.88rem;
    }
}

/* 首頁（電腦版 ≥768px）：header 固定白底＋水平選單，與其他前台頁一致；手機版維持透明第一屏 header 與漢堡選單 */
@media (min-width: 768px) {
    .site-header--home {
        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);
        pointer-events: auto;
    }

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

    .site-header--home .home-menu {
        display: none;
    }

    /* 土建機電第二屏：電腦版恢復直條堆疊（往下捲動瀏覽），輪播僅保留於手機版 */
    .cme-carousel__viewport {
        overflow: visible;
    }

    .cme-carousel__track {
        display: block;
        transform: none !important;
    }

    .cme-carousel__slide {
        flex: none;
    }

    /* 手機版切換到電腦版時，隱藏輪播為無縫循環而複製的頭尾投影片 */
    .cme-carousel__slide[aria-hidden="true"] {
        display: none;
    }

    .cme-carousel__arrow,
    .cme-carousel__dots {
        display: none;
    }

    /* 電腦版第二屏：三工法標題改為單行（隱藏手機版斷行），並依序將標題群組靠左／靠右／靠左 */
    .cme-title-br {
        display: none;
    }

    .civil-mechanical-electrical-cladding__title,
    .civil-mechanical-electrical-special-drain__title,
    .civil-mechanical-electrical-penetration__title {
        white-space: nowrap;
    }

    .civil-mechanical-electrical-cladding__heading,
    .civil-mechanical-electrical-penetration__heading {
        text-align: left;
    }

    .civil-mechanical-electrical-special-drain__heading {
        text-align: right;
    }
}

/* 最新消息明細頁（電腦版 ≥1024px）：客戶反映明細的圖片整體看起來太小。
   媒體欄的比重由 1:1 調成 1:1.7，並把固定的 300px 高改成 aspect-ratio 8:5，
   高度才會跟著欄寬走，而不是只把畫面裁得更多；圖片會比左欄文字高，這是預期的
   （grid 是 align-items: start，左欄照樣切齊頂端）。平板與手機不受影響。 */
@media (min-width: 1024px) {
    .latest-news-detail {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    }

    .latest-news-detail__media img,
    .latest-news-detail__media video {
        height: auto;
        aspect-ratio: 8 / 5;
    }
}

/* 認識元順第三屏（電腦版 ≥1440px）：客戶反映左右留白太多。
   左欄（02.png／HISTORY／沿革事紀／內文／004.png）都是固定寬度，
   加寬後多出來的空間會全部落在右欄的沿革表格上。 */
@media (min-width: 1440px) {
    .about-history__inner {
        width: min(1400px, calc(100% - 96px));
    }

    /* 區塊變寬之後字級跟著往上一級，否則在寬版面上會顯得更小 */
    .about-history__copy,
    .about-timeline__item time {
        font-size: 0.95rem;
    }

    .about-timeline__item span {
        font-size: 0.9rem;
    }

    .about-timeline__note {
        font-size: 0.88rem;
    }
}