@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');

/* ========================================
   信元電器工程有限公司
   Website Style
======================================== */


/* ---------- 基本設定 ---------- */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        "Noto Sans TC",
        "Microsoft JhengHei",
        Arial,
        sans-serif;

    color: #1c2733;
    background-color: #ffffff;

    line-height: 1.8;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}


/* ---------- Logo ---------- */

.logo {
    width: 280px;
    height: auto;
}


/* ========================================
   導覽列
======================================== */

.navbar {
    position: sticky;
    top: 0;

    z-index: 1000;

    background-color: rgba(255, 255, 255, 0.97);

    border-bottom: 1px solid #e5eaf0;

    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.navbar-inner {
    min-height: 92px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.brand {
    display: block;
    text-decoration: none;
}

.nav-menu {
    display: flex;
    align-items: center;

    gap: 28px;

    margin-left: auto;
}

.nav-menu a {
    position: relative;

    text-decoration: none;

    color: #263746;

    font-size: 15px;
    font-weight: 600;

    padding: 8px 0;

    transition: color 0.3s;
}

.nav-menu a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background-color: #0066b3;

    transition: width 0.3s;
}

.nav-menu a:hover {
    color: #0066b3;
}

.nav-menu a:hover::after {
    width: 100%;
}


/* 導覽列電話 */

.nav-phone {
    display: inline-block;

    padding: 10px 18px;

    color: #ffffff;
    background-color: #0066b3;

    text-decoration: none;

    border-radius: 5px;

    font-size: 14px;
    font-weight: 700;

    white-space: nowrap;

    transition: 0.3s;
}

.nav-phone:hover {
    background-color: #004f8a;
}


/* ========================================
   Hero 首頁主視覺
======================================== */

.hero {
    min-height: 650px;

    display: flex;
    align-items: center;

    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(3, 29, 55, 0.96) 0%,
            rgba(3, 49, 85, 0.88) 45%,
            rgba(3, 49, 85, 0.45) 100%
        ),
        linear-gradient(
            135deg,
            #005a9c,
            #0088cc
        );

    color: #ffffff;

    overflow: hidden;
}


/* 製造背景裝飾 */

.hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    top: -180px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;
}

.hero::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    right: -350px;
    bottom: -400px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}

.hero-content {
    position: relative;

    z-index: 2;
}

.hero-text {
    max-width: 700px;
}

.hero-label {
    display: inline-block;

    margin: 0 0 18px;

    padding: 6px 14px;

    border: 1px solid rgba(255, 255, 255, 0.45);

    border-radius: 30px;

    font-size: 14px;
    letter-spacing: 1px;

    background-color: rgba(255, 255, 255, 0.08);
}

.hero h1 {
    margin: 0 0 25px;

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1.25;

    letter-spacing: 2px;

    font-weight: 800;
}

.hero-description {
    max-width: 600px;

    margin: 0 0 35px;

    font-size: 18px;

    color: rgba(255, 255, 255, 0.9);
}


/* ---------- Hero 按鈕 ---------- */

.hero-buttons {
    display: flex;

    gap: 15px;

    flex-wrap: wrap;
}

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 150px;

    padding: 13px 25px;

    border-radius: 5px;

    text-decoration: none;

    font-weight: 700;

    transition: 0.3s;
}

.btn-primary {
    color: #ffffff;

    background-color: #0088d1;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
}

.btn-primary:hover {
    background-color: #00a0ed;

    transform: translateY(-2px);
}

.btn-outline {
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.6);
}

.btn-outline:hover {
    background-color: #ffffff;

    color: #0066b3;
}


/* ========================================
   區塊共同設定
======================================== */

.section {
    padding: 100px 0;
}

.section-label {
    margin: 0 0 8px;

    color: #0074b9;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;
}

.section h2 {
    margin: 0 0 25px;

    color: #142d40;

    font-size: 38px;

    line-height: 1.3;
}

.section-text {
    max-width: 800px;

    margin: 0;

    color: #5c6873;

    font-size: 17px;
}


/* ========================================
   關於信元
======================================== */

/* ========================================
   關於信元
======================================== */

.about {
    background-color: #ffffff;
}

.about .container {
    max-width: 1100px;
}

.about-content {
    display: grid;

    grid-template-columns: 1.5fr 1fr;

    gap: 70px;

    align-items: start;
}

.about-main p {
    margin: 0 0 22px;

    color: #596873;

    font-size: 16px;

    line-height: 2;
}

.about-highlight {
    padding: 10px 0;
}

.highlight-item {
    padding: 25px 0;

    border-bottom: 1px solid #dfe7ed;
}

.highlight-item:first-child {
    padding-top: 0;
}

.highlight-item strong {
    display: block;

    margin-bottom: 5px;

    color: #0066b3;

    font-size: 25px;

    line-height: 1.4;
}

.highlight-item span {
    color: #66737d;

    font-size: 15px;
}



/* ========================================
   空調服務與設備
======================================== */

.services {
    background-color: #f5f8fb;
}

.section-intro {
    max-width: 780px;

    margin: 0 0 45px;

    color: #64727d;

    font-size: 16px;

    line-height: 1.9;
}


.service-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}


.service-card {
    position: relative;

    padding: 35px 30px;

    background-color: #ffffff;

    border: 1px solid #e4ebf0;

    border-radius: 8px;

    box-shadow:
        0 8px 30px rgba(25, 55, 80, 0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.service-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 0;

    border-radius: 8px 0 0 8px;

    background-color: #0066b3;

    transition: height 0.3s ease;
}


.service-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 15px 40px rgba(25, 55, 80, 0.12);
}


.service-card:hover::before {
    height: 100%;
}


.service-icon {
    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 50%;

    background-color: #e7f5fc;

    font-size: 25px;
}


.service-card h3 {
    margin: 0 0 12px;

    color: #17374f;

    font-size: 21px;
}


.service-card p {
    margin: 0;

    color: #687580;

    font-size: 15px;

    line-height: 1.8;
}


/* ---------- 完整工程服務 ---------- */

.service-extra {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    margin-top: 55px;

    padding: 45px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #003f6b,
            #007bb8
        );

    color: #ffffff;
}


.service-extra-content {
    max-width: 750px;
}


.service-extra-label {
    margin: 0 0 8px;

    color: #9edcff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;
}


.service-extra h3 {
    margin: 0 0 12px;

    font-size: 27px;

    line-height: 1.4;
}


.service-extra p {
    margin: 0;

    color: rgba(255, 255, 255, 0.86);

    font-size: 15px;
}


.service-extra-btn {
    flex-shrink: 0;

    background-color: #ffffff;

    color: #0066b3;
}


.service-extra-btn:hover {
    background-color: #e9f7ff;

    color: #004f8a;
}


.services {
    background-color: #f5f8fb;
}

.service-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;

    margin-top: 45px;
}

.service-card {
    padding: 35px 30px;

    background-color: #ffffff;

    border: 1px solid #e7edf2;

    border-radius: 8px;

    box-shadow: 0 8px 30px rgba(25, 55, 80, 0.06);

    transition:
        transform 0.3s,
        box-shadow 0.3s;
}

.service-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 15px 35px rgba(25, 55, 80, 0.12);
}

.service-icon {
    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 50%;

    background-color: #e7f5fc;

    font-size: 25px;
}

.service-card h3 {
    margin: 0 0 10px;

    color: #17374f;

    font-size: 21px;
}

.service-card p {
    margin: 0;

    color: #687580;

    font-size: 15px;
}


/* ========================================
   工程案例
======================================== */

.projects {
    background-color: #ffffff;

    text-align: center;
}

.projects .section-text {
    margin: 0 auto;
}


/* ========================================
   服務流程
======================================== */

.process {
    background-color: #f5f8fb;
}

.process-grid {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 15px;

    margin-top: 50px;
}

.process-item {
    position: relative;

    text-align: center;

    padding: 20px 10px;
}

.process-item span {
    display: flex;

    width: 55px;
    height: 55px;

    margin: 0 auto 20px;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background-color: #0066b3;

    color: #ffffff;

    font-weight: 800;
}

.process-item h3 {
    margin: 0 0 8px;

    font-size: 18px;

    color: #17374f;
}

.process-item p {
    margin: 0;

    color: #687580;

    font-size: 14px;
}


/* ========================================
   聯絡我們
======================================== */

.contact {
    background:
        linear-gradient(
            135deg,
            #003d68,
            #006eaa
        );

    color: #ffffff;
}

.contact .section-label {
    color: #9ddcff;
}

.contact h2 {
    color: #ffffff;
}

.contact-info {
    margin-top: 35px;
}

.contact-info p {
    margin: 12px 0;

    font-size: 18px;
}

.contact-info a {
    color: #ffffff;

    font-weight: 700;

    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}


/* ========================================
   Footer
======================================== */

.footer {
    padding: 25px 0;

    background-color: #102331;

    color: rgba(255, 255, 255, 0.65);

    text-align: center;

    font-size: 14px;
}


/* ========================================
   手機底部固定按鈕
======================================== */

.mobile-contact {
    display: none;
}


/* ========================================
   平板
======================================== */

@media (max-width: 1000px) {

    .nav-menu {
        gap: 15px;
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

        .service-extra {
        align-items: flex-start;
    }


    .process-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ========================================
   手機
======================================== */

@media (max-width: 768px) {

        .section-intro {
        font-size: 15px;
    }

    .service-extra {
        flex-direction: column;

        padding: 30px 25px;

        gap: 25px;
    }

    .service-extra h3 {
        font-size: 23px;
    }

    .service-extra-btn {
        width: 100%;
    }


        .about-content {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .about-main p {
        font-size: 15px;
    }

    .highlight-item {
        padding: 20px 0;
    }


    .container {
        width: 92%;
    }

    .navbar-inner {
        min-height: 75px;

        justify-content: center;
    }

    .logo {
        width: 220px;
    }

    .nav-menu,
    .nav-phone {
        display: none;
    }


    /* Hero */

    .hero {
        min-height: 600px;

        text-align: center;
    }

    .hero-text {
        margin: 0 auto;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero-description {
        font-size: 16px;
    }

    .hero-buttons {
        justify-content: center;
    }


    /* 區塊 */

    .section {
        padding: 75px 0;
    }

    .section h2 {
        font-size: 32px;
    }


    /* 服務 */

    .service-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    /* 流程 */

    .process-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .process-item {
        padding: 15px;
    }


    /* Footer */

    .footer {
        padding-bottom: 85px;
    }


    /* 手機固定按鈕 */

    .mobile-contact {
        position: fixed;

        display: grid;

        grid-template-columns: 1fr 1fr;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 2000;

        background-color: #ffffff;

        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    }

    .mobile-contact a {
        padding: 14px 10px;

        text-align: center;

        text-decoration: none;

        font-weight: 700;

        color: #ffffff;

        background-color: #0066b3;
    }

    .mobile-contact a + a {
        background-color: #0088d1;
    }
}

/* ========================================
   獎項與專業認證
======================================== */
.certifications { background:#fff; }
.dealer-cert { margin:40px 0 45px; padding:28px; display:grid; grid-template-columns: .8fr 1.4fr; gap:34px; align-items:center; background:#f4f9fd; border:1px solid #dbeaf4; border-radius:14px; }
.dealer-cert-copy h3 { margin:12px 0 10px; color:#17374f; font-size:28px; }
.dealer-cert-copy p { margin:0; color:#61717d; }
.cert-badge { display:inline-block; padding:6px 12px; border-radius:30px; background:#0066b3; color:#fff; font-size:13px; font-weight:800; }
.image-button { display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.dealer-cert-image img { width:100%; border-radius:10px; box-shadow:0 10px 28px rgba(21,59,87,.12); }
.cert-tabs { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 30px; padding-bottom:15px; border-bottom:1px solid #dfe8ef; }
.cert-tab { border:1px solid #cddbe5; background:#fff; color:#345064; padding:11px 18px; border-radius:30px; font-weight:700; cursor:pointer; transition:.25s; }
.cert-tab:hover,.cert-tab.active { background:#0066b3; border-color:#0066b3; color:#fff; }
.cert-panel { display:none; }
.cert-panel.active { display:block; }
.honor-summary { margin:0 0 32px; padding:28px 32px; border-left:4px solid #0088d1; background:#f7fafc; border-radius:0 10px 10px 0; }
.honor-summary h3 { margin:0 0 14px; color:#17374f; font-size:22px; }
.honor-summary ul { margin:0; padding-left:1.3em; color:#52636f; line-height:2; }
.panel-note { margin:0 0 28px; color:#60717d; }
.cert-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.cert-grid.landscape { grid-template-columns:repeat(3,1fr); }
.cert-card { margin:0; overflow:hidden; border:1px solid #e1e9ef; border-radius:10px; background:#fff; box-shadow:0 7px 24px rgba(26,58,82,.06); }
.cert-card .image-button { height:280px; background:#f4f6f8; overflow:hidden; }
.cert-grid.landscape .cert-card .image-button { height:215px; }
.cert-card img { width:100%; height:100%; object-fit:contain; transition:transform .3s; }
.cert-card:hover img { transform:scale(1.025); }
.cert-card figcaption { padding:14px 15px; color:#284458; font-size:14px; font-weight:700; text-align:center; }
.cert-card.wide { grid-column:span 2; }

/* ========================================
   優惠與保固
======================================== */
.promotions { background:#f5f8fb; }
.promo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:40px; }
.promo-card { overflow:hidden; background:#fff; border:1px solid #e0e8ee; border-radius:12px; box-shadow:0 8px 30px rgba(25,55,80,.07); }
.promo-card .image-button { height:390px; background:#eef3f6; overflow:hidden; }
.promo-card img { width:100%; height:100%; object-fit:contain; transition:transform .3s; }
.promo-card:hover img { transform:scale(1.015); }
.promo-card > div { padding:22px 24px 25px; }
.promo-card span { color:#0074b9; font-size:12px; font-weight:800; letter-spacing:1px; }
.promo-card h3 { margin:5px 0 8px; color:#17374f; font-size:22px; }
.promo-card p { margin:0; color:#687580; font-size:14px; }

/* 圖片燈箱 */
.no-scroll { overflow:hidden; }
.lightbox { position:fixed; inset:0; z-index:5000; display:none; align-items:center; justify-content:center; padding:35px; background:rgba(5,18,28,.92); }
.lightbox.open { display:flex; }
.lightbox-inner { max-width:min(1200px,94vw); max-height:90vh; text-align:center; }
.lightbox-inner img { max-width:100%; max-height:82vh; object-fit:contain; margin:auto; box-shadow:0 15px 50px rgba(0,0,0,.35); }
.lightbox-inner p { margin:12px 0 0; color:#fff; font-weight:700; }
.lightbox-close { position:fixed; top:16px; right:22px; border:0; background:transparent; color:#fff; font-size:46px; line-height:1; cursor:pointer; }

@media (max-width:1000px) {
  .cert-grid { grid-template-columns:repeat(3,1fr); }
  .cert-grid.landscape { grid-template-columns:repeat(2,1fr); }
  .dealer-cert { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .cert-tabs { display:grid; grid-template-columns:1fr 1fr; }
  .cert-tab { padding:10px 8px; font-size:13px; }
  .cert-grid,.cert-grid.landscape { grid-template-columns:1fr 1fr; gap:12px; }
  .cert-card.wide { grid-column:span 2; }
  .cert-card .image-button,.cert-grid.landscape .cert-card .image-button { height:190px; }
  .cert-card figcaption { padding:10px; font-size:12px; }
  .honor-summary { padding:22px 20px; }
  .dealer-cert { padding:20px; gap:20px; }
  .dealer-cert-copy h3 { font-size:23px; }
  .promo-grid { grid-template-columns:1fr; }
  .promo-card .image-button { height:auto; max-height:none; }
  .promo-card img { height:auto; object-fit:contain; }
  .lightbox { padding:18px; }
}


/* ===== 多頁式網站補充樣式 ===== */
.nav-menu a.active{color:#0066b3}.nav-menu a.active::after{width:100%}.site-footer{padding:32px 0}.footer-company p{margin:5px 0;line-height:1.7}.footer-company strong{color:#fff;font-size:17px}.footer-company a{color:inherit;text-decoration:none}.home-links{background:#f5f8fb}.home-link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px}.home-link-grid a{display:flex;flex-direction:column;gap:8px;padding:28px;background:#fff;border:1px solid #e4ebf0;border-radius:8px;text-decoration:none;box-shadow:0 8px 30px rgba(25,55,80,.06);transition:.3s}.home-link-grid a:hover{transform:translateY(-4px);box-shadow:0 14px 35px rgba(25,55,80,.12)}.home-link-grid strong{color:#17374f;font-size:20px}.home-link-grid span{color:#687580;font-size:14px}@media(max-width:1000px){.navbar-inner{flex-wrap:wrap;padding:12px 0}.nav-menu{order:3;width:100%;justify-content:center;flex-wrap:wrap;margin:0}.home-link-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.navbar-inner{flex-wrap:nowrap}.home-link-grid{grid-template-columns:1fr}.site-footer{padding-bottom:95px}.footer-company p{font-size:13px}.footer-company p:nth-child(2){line-height:2}.nav-menu{display:none}}

/* ===== 2026 首頁改版 ===== */
.home-hero{min-height:620px}.home-hero .hero-content{display:flex;justify-content:space-between;align-items:center;gap:50px}.home-hero .hero-text{flex:1}.hero-proof{width:330px;display:grid;gap:12px}.hero-proof div{padding:20px 22px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(255,255,255,.08);backdrop-filter:blur(4px)}.hero-proof strong,.hero-proof span{display:block}.hero-proof strong{font-size:21px}.hero-proof span{margin-top:3px;color:rgba(255,255,255,.78);font-size:14px}.home-intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}.home-copy,.home-section-copy{color:#5d6c77;font-size:16px;line-height:2}.text-link{display:inline-block;color:#0066b3;text-decoration:none;font-weight:800}.home-dealer{padding:18px;background:#f5f8fb;border-radius:12px;text-align:center}.home-dealer img{width:100%;border-radius:7px}.home-dealer p{margin:12px 0 2px;color:#345064;font-weight:700}.home-services{background:#f5f8fb}.home-section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px}.home-section-head h2{margin-bottom:0}.home-service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.home-service-grid a{padding:30px 25px;background:#fff;border:1px solid #e1e9ef;border-radius:10px;text-decoration:none;transition:.25s}.home-service-grid a:hover{transform:translateY(-5px);box-shadow:0 14px 35px rgba(25,55,80,.1)}.home-service-grid span{font-size:30px}.home-service-grid strong{display:block;margin:15px 0 7px;color:#17374f;font-size:20px}.home-service-grid p{margin:0;color:#687580;font-size:14px;line-height:1.8}.home-credentials{background:#fff}.credential-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}.credential-grid a{overflow:hidden;border:1px solid #e1e9ef;border-radius:11px;background:#fff;text-decoration:none;box-shadow:0 8px 28px rgba(25,55,80,.06)}.credential-grid img{width:100%;height:240px;object-fit:contain;background:#f4f6f8;padding:8px}.credential-grid div{padding:18px 20px}.credential-grid strong,.credential-grid span{display:block}.credential-grid strong{color:#17374f;font-size:18px}.credential-grid span{margin-top:4px;color:#75818a;font-size:13px}.home-promo{background:#f5f8fb}.home-promo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.home-promo-grid a{display:grid;grid-template-columns:220px 1fr;align-items:center;overflow:hidden;background:#fff;border:1px solid #e0e8ee;border-radius:12px;text-decoration:none}.home-promo-grid img{width:220px;height:190px;object-fit:contain;background:#fff}.home-promo-grid div{padding:24px}.home-promo-grid span,.home-promo-grid strong{display:block}.home-promo-grid span{color:#0074b9;font-size:12px;font-weight:800}.home-promo-grid strong{margin-top:6px;color:#17374f;font-size:21px}.home-cta{padding:65px 0;background:linear-gradient(135deg,#003d68,#006eaa);color:#fff}.home-cta-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}.home-cta p{margin:0;color:#9ddcff;font-weight:800}.home-cta h2{margin:5px 0;color:#fff;font-size:34px}.home-cta span{color:rgba(255,255,255,.82)}.home-cta-inner>div:last-child{display:flex;gap:12px;flex-wrap:wrap}.btn-light{background:#fff;color:#0066b3}
@media(max-width:1000px){.home-hero .hero-content{display:block}.hero-proof{width:100%;grid-template-columns:repeat(3,1fr);margin-top:45px}.home-service-grid{grid-template-columns:repeat(2,1fr)}.home-intro-grid{gap:40px}.home-promo-grid a{grid-template-columns:170px 1fr}.home-promo-grid img{width:170px}.credential-grid img{height:210px}}
@media(max-width:768px){.home-hero{min-height:650px}.hero-proof{grid-template-columns:1fr;gap:8px;margin-top:32px}.hero-proof div{padding:12px 16px}.hero-proof strong{font-size:17px}.home-intro-grid,.credential-grid,.home-promo-grid{grid-template-columns:1fr}.home-section-head{display:block}.home-section-head .text-link{margin-top:10px}.home-service-grid{grid-template-columns:1fr 1fr;gap:10px}.home-service-grid a{padding:22px 16px}.home-service-grid strong{font-size:17px}.credential-grid img{height:220px}.home-promo-grid a{grid-template-columns:125px 1fr}.home-promo-grid img{width:125px;height:145px}.home-promo-grid div{padding:16px}.home-promo-grid strong{font-size:17px}.home-cta-inner{display:block;text-align:center}.home-cta h2{font-size:28px}.home-cta-inner>div:last-child{justify-content:center;margin-top:25px}}

/* ===== 清新簡約首頁 2026 ===== */
.home-hero{min-height:560px;background:linear-gradient(135deg,#f8fcff 0%,#eef8fc 55%,#e7f5fb 100%);color:#18384d;border-bottom:1px solid #e4eef3}
.home-hero::before,.home-hero::after{display:none}.home-hero .hero-content{padding-top:58px;padding-bottom:58px}.home-hero .hero-text{max-width:720px}.home-hero .hero-label{color:#1681b9;background:#fff;border:1px solid #d8eaf3;box-shadow:0 6px 20px rgba(33,104,139,.05)}.home-hero h1{color:#15384f;font-weight:700;letter-spacing:1px}.home-hero .hero-description{color:#5d7483;max-width:650px}.home-hero .btn-primary{background:#1687bd;box-shadow:none}.home-hero .btn-primary:hover{background:#0874aa}.home-hero .btn-outline{color:#28708f;border:1px solid #b8d6e3;background:rgba(255,255,255,.62)}.home-hero .btn-outline:hover{background:#fff;color:#176b92}.hero-proof{width:300px}.hero-proof div{padding:20px 22px;border:1px solid #dcebf2;border-radius:8px;background:rgba(255,255,255,.78);backdrop-filter:none;box-shadow:none}.hero-proof strong{color:#247da5;font-size:19px;font-weight:700}.hero-proof span{color:#78909c;font-size:13px}
.home-intro.section,.home-credentials.section{background:#fff}.home-services.section,.home-promo.section{background:#f7fafb}.section{padding:88px 0}.section-label{color:#3e91b5;font-size:12px;letter-spacing:2.4px}.section h2{color:#244455;font-size:34px;font-weight:650;letter-spacing:.5px}.home-copy,.home-section-copy{color:#6b7e88;line-height:2}.text-link{color:#2c84aa;font-weight:650}.home-dealer{padding:14px;background:#fbfdfe;border:1px solid #e5eef2;border-radius:8px}.home-dealer p{color:#607985;font-weight:600;font-size:14px}
.home-service-grid{gap:14px}.home-service-grid a{padding:28px 24px;border:1px solid #e6eef1;border-radius:7px;box-shadow:none;background:#fff}.home-service-grid a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(48,91,111,.07)}.home-service-grid span{font-size:26px;filter:saturate(.65)}.home-service-grid strong{color:#315264;font-size:18px;font-weight:650}.home-service-grid p{color:#7a8a92}.credential-grid{gap:16px}.credential-grid a{border:1px solid #e6eef1;border-radius:8px;box-shadow:none}.credential-grid img{height:225px;background:#fafcfd}.credential-grid strong{color:#315264;font-weight:650}.credential-grid span{color:#87959c}.home-promo-grid{gap:16px}.home-promo-grid a{border:1px solid #e5edef;border-radius:8px;box-shadow:none}.home-promo-grid span{color:#4a93b2}.home-promo-grid strong{color:#315264;font-weight:650}.home-cta{padding:58px 0;background:#edf7fa;color:#315264;border-top:1px solid #dfedf2}.home-cta p{color:#4e93b1}.home-cta h2{color:#244455;font-size:31px;font-weight:650}.home-cta span{color:#70838d}.home-cta .btn-primary{background:#1687bd;box-shadow:none}.home-cta .btn-light{border:1px solid #c7dce5;background:#fff;color:#357a98}.site-footer{background:#274554;color:rgba(255,255,255,.72)}.footer-company strong{font-weight:650}.navbar{box-shadow:0 1px 10px rgba(35,76,94,.04);border-bottom:1px solid #e9eff2}.nav-phone{background:#2388b3;border-radius:4px}.nav-phone:hover{background:#16769e}
@media(max-width:768px){.section{padding:68px 0}.home-hero{min-height:auto}.home-hero .hero-content{padding-top:45px;padding-bottom:45px}.home-hero h1{font-size:37px}.hero-proof div{text-align:left}.section h2{font-size:29px}.home-service-grid{grid-template-columns:1fr 1fr}.home-service-grid span{font-size:23px}}

/* ========================================
   Typography — Fresh Minimal
   Noto Sans TC + Montserrat
======================================== */

body {
    font-family: "IBM Plex Sans TC", "Microsoft JhengHei", sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6,
.hero h1,
.section h2 {
    font-family: "IBM Plex Sans TC", "Microsoft JhengHei", sans-serif;
    font-weight: 600;
}

.nav-menu a,
.nav-phone,
.btn,
.text-link,
.service-card h3,
.process-item h3,
.home-service-grid strong,
.credential-grid strong,
.home-promo-grid strong,
.footer-company strong {
    font-weight: 500;
}

.section-label,
.hero-label,
.service-extra-label,
.home-promo-grid span,
.promo-card span {
    font-family: "Manrope", "IBM Plex Sans TC", sans-serif;
    font-weight: 500;
    letter-spacing: 0.14em;
}

.hero h1,
.home-hero h1 {
    font-weight: 600;
    letter-spacing: 0.035em;
}

.section h2,
.home-cta h2 {
    font-weight: 600;
    letter-spacing: 0.025em;
}

p,
.home-copy,
.home-section-copy,
.service-card p,
.process-item p {
    font-weight: 400;
}


/* ===== 清新簡約字體系統 v2 ===== */
body {
    font-family: "IBM Plex Sans TC", "Microsoft JhengHei", sans-serif;
    font-weight: 400;
    letter-spacing: 0.018em;
}
.nav-menu a, .nav-phone, .btn { font-weight: 500; }
h1, h2, h3, .highlight-item strong {
    font-family: "IBM Plex Sans TC", "Microsoft JhengHei", sans-serif;
    font-weight: 500;
    letter-spacing: 0.035em;
}
.hero h1 { font-weight: 500; letter-spacing: 0.055em; }
.section h2 { font-weight: 500; letter-spacing: 0.045em; }
.section-label, .hero-label, .service-extra-label {
    font-family: "Manrope", "IBM Plex Sans TC", sans-serif;
    font-weight: 500;
    letter-spacing: 0.18em;
}
p { font-weight: 300; }

/* ===== 全站內頁｜清新簡約統一設計 2026 ===== */
body{background:#fff;color:#334f5e}
.nav-menu a.active{color:#1687bd}.nav-menu a.active::after{width:100%}
main>.section{min-height:520px;padding:82px 0 100px;background:#fff}
main>.section>.container{position:relative}
main>.section>.container> .section-label:first-child{margin-bottom:10px;color:#4a9bbb}
main>.section>.container> h2{margin-bottom:18px;font-size:36px;color:#294b5d}
main>.section>.container> h2::after{content:"";display:block;width:36px;height:2px;margin-top:18px;background:#9ed2e5;border-radius:2px}
.section-intro,.section-text{max-width:760px;color:#71858f;font-size:16px;line-height:2}

/* About */
.about{background:linear-gradient(180deg,#fbfdfe 0,#fff 35%)!important}
.about-content{margin-top:48px;grid-template-columns:1.45fr .8fr;gap:72px}
.about-main{padding:6px 0}.about-main p{color:#667c87;font-size:16px;line-height:2.15;margin-bottom:20px}
.about-highlight{padding:28px 32px;background:#f6fbfd;border:1px solid #e4f0f4;border-radius:12px}
.highlight-item{padding:22px 0;border-bottom:1px solid #dfebef}.highlight-item strong{color:#2787ad;font-size:23px}.highlight-item span{color:#7a8e97}

/* Services */
.services{background:#fbfdfe!important}.services .service-grid{margin-top:48px;gap:16px}
.services .service-card{padding:32px 28px;border:1px solid #e5eef2;border-radius:10px;box-shadow:none;background:#fff}
.services .service-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(45,91,111,.07)}
.services .service-card::before{display:none}.services .service-icon{width:50px;height:50px;background:#eef8fb;font-size:22px;filter:saturate(.65)}
.services .service-card h3{color:#345565;font-size:19px;font-weight:500}.services .service-card p{color:#788a93;line-height:1.9}

/* Certifications */
.certifications{background:#fbfdfe!important}.dealer-cert{margin-top:44px;padding:30px 34px;border:1px solid #e2edf1;border-radius:12px;background:#fff;box-shadow:none}
.cert-badge{background:#edf8fc;color:#3189aa;border:1px solid #d9edf4}.dealer-cert-copy h3{color:#315264;font-weight:500}.dealer-cert-copy p{color:#7a8b94}
.dealer-cert-image{border-radius:8px;overflow:hidden}.cert-tabs{margin:46px 0 28px;gap:8px;padding:6px;background:#f0f7f9;border-radius:10px;width:max-content;max-width:100%}
.cert-tab{border:0;background:transparent;color:#70838d;border-radius:7px;padding:11px 18px;font-weight:500}.cert-tab.active{background:#fff;color:#2385aa;box-shadow:0 3px 12px rgba(51,98,118,.08)}
.honor-summary,.panel-note{background:#fff;border:1px solid #e4eef2;border-radius:10px;box-shadow:none}.honor-summary h3{color:#345565;font-weight:500}.honor-summary li,.panel-note{color:#71858f}
.cert-grid{gap:16px}.cert-card{border:1px solid #e4edf1;border-radius:10px;box-shadow:none;background:#fff;overflow:hidden}.cert-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(47,91,110,.07)}.cert-card figcaption{color:#536d79;font-weight:400;background:#fff}

/* Promotions */
.promotions{background:#fbfdfe!important}.promo-grid{margin-top:44px;gap:18px}.promo-card{border:1px solid #e3edf1;border-radius:11px;box-shadow:none;background:#fff;overflow:hidden}.promo-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(45,91,111,.07)}.promo-card>div{padding:24px}.promo-card span{color:#4798b7}.promo-card h3{color:#345565;font-weight:500}.promo-card p{color:#7a8c95;line-height:1.9}

/* Process */
.process{background:#fbfdfe!important}.process-grid{margin-top:52px;gap:10px}.process-item{padding:28px 14px;background:#fff;border:1px solid #e6eef1;border-radius:10px}.process-item span{width:46px;height:46px;background:#eaf7fb;color:#2789af;font-weight:500}.process-item h3{color:#3c5c6b;font-weight:500}.process-item p{color:#84939a}

/* Projects */
.projects{background:linear-gradient(180deg,#fbfdfe,#fff)!important;text-align:left}.projects .section-text{margin:0}.projects .section-text::after{content:"工程案例整理中，後續將持續更新住宅、店面、辦公室及商業空間之實際施工成果。";display:block;margin-top:42px;padding:44px;border:1px dashed #cfe1e8;border-radius:12px;background:#f8fcfd;color:#78909b;text-align:center;line-height:2}

/* Contact */
.contact{background:linear-gradient(180deg,#f8fcfd,#fff)!important;color:#334f5e}.contact .section-label{color:#4a9bbb!important}.contact h2{color:#294b5d!important}.contact-info{max-width:760px;margin-top:44px;padding:30px 34px;background:#fff;border:1px solid #e1edf1;border-radius:12px;box-shadow:0 12px 32px rgba(50,95,115,.05)}.contact-info p{padding:14px 0;margin:0;border-bottom:1px solid #edf2f4;color:#607782;font-size:16px}.contact-info p:last-child{border-bottom:0}.contact-info a{color:#2786ab!important;font-weight:500}.contact-info a:hover{color:#176d91!important}

/* Footer */
.site-footer{padding:36px 0;background:#f4f8fa;color:#6f838d;border-top:1px solid #e4ecef}.footer-company strong{color:#3b5c6c}.footer-company a{color:#4f879f}.footer-company p{margin:5px 0;font-weight:300}

@media(max-width:1000px){.nav-menu{gap:12px}.nav-menu a{font-size:13px}.about-content{gap:38px}.cert-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap}.cert-tab{white-space:nowrap}}
@media(max-width:768px){main>.section{padding:58px 0 78px}main>.section>.container>h2{font-size:29px}.about-content{margin-top:34px}.about-highlight{padding:22px}.dealer-cert{padding:22px}.cert-tabs{margin-top:32px}.contact-info{padding:20px 22px}.projects .section-text::after{padding:32px 20px}.site-footer{text-align:center;padding-bottom:90px}.footer-company p{line-height:1.8}}

/* ===== 首頁＋關於信元精修 v3 ===== */
.navbar-inner{min-height:82px}.logo{width:245px}.nav-menu{gap:22px}.nav-menu a{font-size:14px;font-weight:400;letter-spacing:.025em}.nav-phone{padding:9px 16px;font-weight:500}
.home-hero .hero-content{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:72px}.home-hero h1{font-size:clamp(42px,4.7vw,64px);line-height:1.32}.home-hero .hero-description{font-size:17px;line-height:2}.hero-visual{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center}.air-mark{position:relative;width:330px;height:330px;display:flex;align-items:center;justify-content:center}.air-ring{position:absolute;border:1px solid #c9e4ef;border-radius:50%}.ring-1{inset:0}.ring-2{inset:38px;border-color:#b7dce9}.ring-3{inset:78px;border-color:#9fd0e2}.air-core{width:174px;height:174px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.9);border:1px solid #d7eaf1;color:#2185b0;font-family:Manrope,sans-serif;font-size:25px;font-weight:600;letter-spacing:.06em;box-shadow:0 18px 50px rgba(65,130,157,.08)}.air-core small{margin-top:6px;color:#7896a4;font-size:8px;letter-spacing:.16em}.hero-proof{position:absolute;left:-18px;right:-18px;bottom:4px;width:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.hero-proof div{padding:15px 14px;text-align:center;background:rgba(255,255,255,.9)}.hero-proof strong{font-size:15px}.hero-proof span{font-size:11px}.home-intro-grid{grid-template-columns:1.25fr .75fr}.home-section-head{border-bottom:1px solid #e7eff2;padding-bottom:18px}.home-service-grid a,.credential-grid a,.home-promo-grid a{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.home-service-grid a:hover,.credential-grid a:hover,.home-promo-grid a:hover{border-color:#cfe3eb}.home-cta{background:#f2f9fb}.btn{border-radius:4px}
.page-kicker{max-width:720px;padding:22px 0 50px}.page-kicker h1{margin:0 0 18px;color:#294b5d;font-size:48px;font-weight:500;letter-spacing:.05em}.page-kicker>p:last-child{margin:0;color:#71858f;font-size:17px;line-height:1.9}.about-refined{background:linear-gradient(180deg,#f8fcfd 0,#fff 28%)!important}.about-story{display:grid;grid-template-columns:1.2fr .8fr;gap:88px;padding:56px 0 70px;border-top:1px solid #e6eff2}.about-story .about-main h2{margin:0 0 28px;color:#315264;font-size:30px;font-weight:500}.about-story .about-main p{margin:0 0 20px;color:#667c87;font-size:16px;line-height:2.15}.about-principles{align-self:start;padding:34px 34px 24px;background:#f6fbfd;border:1px solid #e2eef2;border-radius:10px}.about-principles>span,.about-bottom-cta span{font-family:Manrope,sans-serif;color:#4798b7;font-size:11px;letter-spacing:.16em}.about-principles h3{margin:10px 0 24px;color:#365868;font-size:21px;font-weight:500;line-height:1.6}.about-principles>div{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;padding:17px 0;border-top:1px solid #e2ecef}.about-principles strong{color:#75b3ca;font-family:Manrope,sans-serif;font-size:12px;font-weight:500}.about-principles p{margin:0;color:#6f838d;font-size:14px;line-height:1.8}.about-timeline{display:grid;grid-template-columns:1fr 60px 1fr 60px 1fr;align-items:center;padding:34px 0 72px}.about-timeline>div{text-align:center}.about-timeline span,.about-timeline strong,.about-timeline p{display:block}.about-timeline span{color:#77b6cc;font-family:Manrope,sans-serif;font-size:12px;letter-spacing:.12em}.about-timeline strong{margin:8px 0 3px;color:#365868;font-size:19px;font-weight:500}.about-timeline p{margin:0;color:#83939b;font-size:13px}.about-timeline i{height:1px;background:#dbe9ee}.about-bottom-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:38px 42px;background:#f3f9fb;border:1px solid #e1edf1;border-radius:10px}.about-bottom-cta h2{margin:7px 0 0;color:#315264;font-size:25px;font-weight:500}.about-bottom-cta .btn-primary{background:#2388b3;box-shadow:none}
@media(max-width:1000px){.home-hero .hero-content{grid-template-columns:1fr}.hero-visual{min-height:370px}.air-mark{width:300px;height:300px}.hero-proof{left:0;right:0}.about-story{gap:45px}.nav-menu{gap:11px}}
@media(max-width:768px){.logo{width:215px}.home-hero .hero-content{padding-top:54px}.home-hero h1{font-size:38px}.hero-visual{min-height:335px}.air-mark{width:270px;height:270px}.air-core{width:142px;height:142px;font-size:21px}.hero-proof{grid-template-columns:1fr;position:absolute;bottom:-65px}.hero-proof div{padding:9px 12px}.hero-visual{margin-bottom:65px}.page-kicker{padding:10px 0 36px}.page-kicker h1{font-size:36px}.about-story{grid-template-columns:1fr;gap:32px;padding:38px 0 50px}.about-principles{padding:27px 24px}.about-timeline{grid-template-columns:1fr;gap:15px;padding-bottom:50px}.about-timeline i{width:1px;height:25px;justify-self:center}.about-bottom-cta{display:block;padding:30px 25px;text-align:center}.about-bottom-cta .btn{margin-top:22px}.about-bottom-cta h2{font-size:22px}}


/* ===== Final polish: clean / minimal corporate system ===== */
:root{--brand:#0072bc;--brand-dark:#075f9b;--ink:#183242;--muted:#667985;--line:#e4edf2;--ice:#f6fafc;--white:#fff}
body{background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased}
.navbar{backdrop-filter:blur(14px);background:rgba(255,255,255,.92)}
.nav-menu a.active{color:var(--brand)}
.nav-menu a.active::after{width:100%}
.inner-page-kicker{max-width:760px;margin-bottom:56px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.inner-page-kicker h1{margin:8px 0 14px;font-size:clamp(36px,5vw,56px);line-height:1.2;font-weight:600;letter-spacing:-.02em;color:#15364a}
.inner-page-kicker>p:last-child{margin:0;color:var(--muted);font-size:17px;line-height:1.9}
.services,.process,.promotions,.certifications,.projects{background:#fff}
.service-card{border:1px solid var(--line);box-shadow:none;border-radius:14px;padding:34px 28px}
.service-card:hover{box-shadow:0 14px 34px rgba(25,70,98,.07);transform:translateY(-4px)}
.service-icon{background:#edf7fc;font-size:23px}
.process-grid{position:relative}.process-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 14px}.process-item span{background:#eef7fb;color:var(--brand);font-weight:600}
.cert-tabs{position:sticky;top:92px;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);padding:14px 0}
.cert-tab{font-weight:500}.cert-card{box-shadow:none;border-radius:12px}.cert-card:hover{box-shadow:0 12px 30px rgba(24,67,94,.07)}
.promo-card{box-shadow:none!important;border:1px solid var(--line)!important;border-radius:14px!important;overflow:hidden}
.project-placeholder{max-width:760px;margin:10px auto 30px;padding:64px 48px;text-align:center;background:var(--ice);border:1px solid var(--line);border-radius:18px}
.project-placeholder-mark{font-family:"Manrope",sans-serif;font-size:12px;letter-spacing:.18em;color:var(--brand);font-weight:600}
.project-placeholder h2{margin:12px 0 14px;font-size:32px;font-weight:600}.project-placeholder p{margin:0 auto 28px;max-width:600px;color:var(--muted);line-height:1.9}
.contact{background:#fff;color:var(--ink)}.contact .section-label{color:var(--brand)}.contact h2{color:var(--ink)}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-card{display:flex;flex-direction:column;gap:7px;padding:28px;border:1px solid var(--line);border-radius:14px;text-decoration:none;background:#fff;transition:.25s}.contact-card:hover{border-color:#bcd9e9;transform:translateY(-2px)}.contact-card span{font-family:"Manrope",sans-serif;font-size:11px;letter-spacing:.16em;color:var(--brand);font-weight:600}.contact-card strong{font-size:18px;font-weight:550;color:#24485e;overflow-wrap:anywhere}.contact-card small{color:#7a8992;font-size:13px}.contact-note{margin-top:42px;padding:42px;background:var(--ice);border-radius:16px}.contact-note h2{margin:0 0 8px;font-size:28px}.contact-note p{margin:0 0 22px;color:var(--muted)}
.site-footer{margin-top:0;background:#f3f7f9;color:#647681;border-top:1px solid #e3ebef}.footer-company strong{color:#27495d;font-weight:600}.footer-company a{color:#456b81}
.lightbox{backdrop-filter:blur(5px)}
@media(max-width:768px){.inner-page-kicker{margin-bottom:34px}.inner-page-kicker h1{font-size:36px}.cert-tabs{top:74px}.contact-cards{grid-template-columns:1fr}.contact-note{padding:30px 24px}.project-placeholder{padding:44px 22px}.project-placeholder h2{font-size:27px}}

/* 空調專業證照：依技術人員分組 */
.tech-person-group{margin-top:34px;padding-top:8px}
.tech-person-group+.tech-person-group{margin-top:48px;padding-top:38px;border-top:1px solid #e4edf3}
.tech-person-heading{margin-bottom:20px}
.tech-person-heading span{display:block;margin-bottom:5px;color:#1594d2;font-family:Manrope,Arial,sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.tech-person-heading h3{margin:0;color:#18384d;font-size:1.55rem;font-weight:600;letter-spacing:.03em}
.tech-person-group .cert-grid{margin-top:0}
@media(max-width:640px){.tech-person-group+.tech-person-group{margin-top:36px;padding-top:28px}.tech-person-heading h3{font-size:1.35rem}}

/* Header logo size adjustment */
.logo{width:275px;max-width:none}
.brand{flex:0 0 auto}
@media(max-width:1100px) and (min-width:769px){.logo{width:255px}.nav-menu{gap:9px}.nav-menu a{font-size:13px}}
@media(max-width:768px){.logo{width:235px}}


/* iPhone Safari mobile navigation */
.menu-check{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.menu-toggle{display:none}
@media(max-width:768px){
  .navbar{position:sticky;top:0;z-index:2000}
  .navbar-inner{position:relative;min-height:74px;flex-wrap:nowrap;gap:10px}
  .brand{max-width:calc(100% - 58px)}
  .logo{width:235px;max-width:100%;height:auto}
  .nav-phone{display:none}
  .menu-toggle{display:flex!important;width:44px;height:44px;margin-left:auto;padding:9px;border:0;background:transparent;flex:0 0 44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;position:relative;z-index:2101}
  .menu-toggle span{display:block!important;width:25px;height:2px;min-height:2px;background:#315264;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
  .nav-menu{display:none!important;position:fixed!important;top:74px;left:0;right:0;bottom:0;z-index:2100;width:100%;height:auto;max-height:calc(100dvh - 74px);margin:0;padding:8px 20px calc(24px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e4edf2;overflow-y:auto!important;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0}
  .menu-check:checked ~ .nav-menu{display:flex!important}
  .nav-menu a{display:block;width:100%;flex:0 0 auto;padding:15px 4px;font-size:16px;line-height:1.35;text-align:left;border-bottom:1px solid #edf2f4}
  .nav-menu a:last-child{border-bottom:0}
  .nav-menu a::after{display:none}
  .menu-check:checked + .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-check:checked + .menu-toggle span:nth-child(2){opacity:0}
  .menu-check:checked + .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* iPhone Safari mobile menu stacking fix */
@media(max-width:768px){
  body{padding-top:74px}
  .navbar{position:fixed!important;top:0;left:0;right:0;width:100%;z-index:2147483000!important;isolation:isolate}
  .navbar-inner{position:relative;z-index:1}
  .nav-menu{position:fixed!important;top:74px!important;left:0!important;right:0!important;bottom:0!important;z-index:2147482999!important;background:#fff!important;opacity:1!important;transform:none!important;isolation:isolate;box-shadow:0 12px 30px rgba(0,0,0,.08)}
  .menu-toggle{z-index:2147483001!important}
  .menu-check:checked ~ .nav-menu{display:flex!important;visibility:visible!important}
  .menu-check:checked ~ .mobile-contact{display:none!important}
  main,.site-footer,.mobile-contact{position:relative;z-index:1}
  .mobile-contact{position:fixed;z-index:1900}
}

/* iPhone Safari v4: ensure mobile menu is viewport overlay, not trapped by header stacking context */
@media(max-width:768px){
  html,body{overflow-x:hidden}
  .navbar{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    transform:none!important;
    filter:none!important;
    perspective:none!important;
    contain:none!important;
    isolation:auto!important;
    overflow:visible!important;
    background:#fff!important;
  }
  .navbar-inner{
    position:static!important;
    transform:none!important;
    filter:none!important;
    perspective:none!important;
    contain:none!important;
    isolation:auto!important;
    overflow:visible!important;
  }
  .nav-menu{
    position:fixed!important;
    inset:74px 0 0 0!important;
    width:100vw!important;
    max-width:none!important;
    height:calc(100vh - 74px)!important;
    height:calc(100dvh - 74px)!important;
    max-height:none!important;
    z-index:2147483646!important;
    background:#fff!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .menu-toggle{position:relative!important;z-index:2147483647!important}
  main,.site-footer{z-index:auto!important}
}


/* iPhone Safari v5: independent half-screen dropdown overlay */
.mobile-drawer{display:none}
@media(max-width:768px){
  body>.menu-check{position:fixed!important;opacity:0!important;width:1px!important;height:1px!important;pointer-events:none!important}
  .navbar{position:sticky!important;top:0!important;z-index:10000!important;background:#fff!important}
  .navbar-inner{position:relative!important;z-index:auto!important}
  .nav-menu{display:none!important}
  .menu-toggle{display:flex!important;position:relative!important;z-index:10002!important}
  .mobile-drawer{
    display:flex!important;
    position:fixed!important;
    top:74px!important;
    left:0!important;
    right:0!important;
    z-index:10001!important;
    height:50vh!important;
    height:50dvh!important;
    max-height:50vh!important;
    max-height:50dvh!important;
    padding:8px 22px calc(18px + env(safe-area-inset-bottom))!important;
    background:#fff!important;
    box-shadow:0 14px 30px rgba(20,50,70,.22)!important;
    border-top:1px solid #e4edf2!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    transform:translateY(calc(-100% - 90px))!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .24s ease,visibility .24s ease!important;
  }
  body>.menu-check:checked ~ .mobile-drawer{
    transform:translateY(0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .mobile-drawer a{display:block!important;flex:0 0 auto!important;width:100%!important;padding:14px 4px!important;color:#315264!important;text-decoration:none!important;font-size:16px!important;line-height:1.3!important;border-bottom:1px solid #edf2f4!important;background:#fff!important}
  .mobile-drawer a:last-child{border-bottom:0!important}
  body>.menu-check:checked ~ .navbar .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)!important}
  body>.menu-check:checked ~ .navbar .menu-toggle span:nth-child(2){opacity:0!important}
  body>.menu-check:checked ~ .navbar .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important}
}


/* v6 mobile persistent header: logo + menu always stay at top while page scrolls */
@media(max-width:768px){
  body{padding-top:74px!important}
  .navbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    z-index:10000!important;
    background:#fff!important;
  }
  .mobile-drawer{
    position:fixed!important;
    top:74px!important;
    z-index:10001!important;
  }
  .menu-toggle{z-index:10002!important}
}


/* v8 typography refinement — clean Japanese/Taiwan corporate air-conditioning style */
body{
  font-weight:400;
  letter-spacing:.015em;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.nav-menu a,.mobile-drawer a{
  font-weight:500;
  letter-spacing:.055em;
}
h1,h2,h3,h4,.hero-title,.section-title{
  font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
  font-weight:600;
  letter-spacing:.035em;
}
p,li,.section-desc{
  letter-spacing:.018em;
}
.hero-title{
  font-weight:600;
  letter-spacing:.045em;
  line-height:1.32;
}
.section-title{
  line-height:1.42;
}
.eyebrow,.section-kicker,.cert-badge,.promo-card span{
  font-family:Manrope,"Noto Sans TC",sans-serif;
  font-weight:600;
  letter-spacing:.11em;
}
@media(max-width:768px){
  body{line-height:1.78}
  .mobile-drawer a{font-size:15px!important;font-weight:500!important;letter-spacing:.055em!important}
  h1,h2,h3,h4,.hero-title,.section-title{letter-spacing:.025em}
}