/* =================================================================
   SEFBO Construction - Refactored Stylesheet
   =================================================================
   目錄 (Table of Contents):
   1.  全域與基礎設定 (Global & Base Styles)
   2.  通用佈局與元件 (Layout & Reusable Components)
   3.  網站區塊 (Header, Footer, Hero)
   4.  頁面專屬樣式 (Page-Specific Styles)
       4.1 首頁 (Homepage)
       4.2 專案頁 (Projects Page)
       4.3 服務頁 (Services Page)
       4.4 專業技術頁 (Expertise Page)
       4.5 團隊頁 (People Page)
       4.6 聯絡頁 (Contact Page)
   5.  動畫效果 (Animations)
   6.  響應式設計 (Responsive Styles)
   ================================================================= */

/* --- 1. 全域與基礎設定 (Global & Base Styles) --- */
:root {
    --color-primary: #D93A3A;
    --color-dark: #151515;
    --color-light: #ffffff;
    --color-grey: #f5f5f5;
    --font-primary: 'Raleway', 'Helvetica Neue', Arial, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    margin: 0;
    padding: 0;
    background-color: var(--color-light);
    color: var(--color-dark);
    line-height: 1.7;
    font-size: 16px;
    padding-top: 80px; /* 為 fixed Header 預留空間 */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

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

h1, h2, h3, h4 {
    font-weight: 900;
    line-height: 1.2;
    margin: 0;
}

h1 { font-size: clamp(3rem, 5vw, 4.5rem); }
h2 { font-size: clamp(2.2rem, 4vw, 3rem); margin-bottom: 20px; }
h3 { font-size: 1.8rem; font-weight: 700; margin-top: 20px; margin-bottom: 10px; }
h4 { font-size: 1.1rem; margin-top: 0; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;}
p { font-size: 1.1rem; max-width: 65ch; margin-bottom: 1rem; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding-left: 0; }


/* --- 2. 通用佈局與元件 (Layout & Reusable Components) --- */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

section.content-section {
    padding: 50px 0;
}

.button {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-light);
    padding: 15px 35px;
    font-weight: 700;
    transition: background-color 0.3s ease;
}
.button:hover {
    background-color: #b02a2a;
}

.separator {
    width: 85%;
    max-width: 900px;
    height: 1px;
    background-color: #e0e0e0;
    margin: 100px auto;
    border: none;
}

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

.two-column-layout {
    display: flex;
    align-items: center;
    gap: 60px;
}

.column-image,
.column-text {
    margin-top: 30px;
    flex: 1;
    min-width: 0;
    /* --- 新增以下兩行，讓欄位內的項目置中 --- */
    justify-content: center;
}
.column-image {
    display: flex;           /* 關鍵：將此容器設為 Flex 佈局 */
    justify-content: center; /* 關鍵：讓容器內的項目(圖片)水平置中 */
}

/* --- 2.X 回到最上方 (Back to Top) 按鈕 --- */
#back-to-top-btn {
    position: fixed;         /* 關鍵：固定在視窗位置 */
    bottom: 25px;            /* 離底部 25px */
    right: 25px;             /* 離右側 25px */
    z-index: 999;            /* 確保在最上層 */

    /* 外觀 */
    width: 50px;
    height: 50px;
    background-color: var(--color-primary);
    color: var(--color-light);
    border-radius: 50%;      /* 圓形 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);

    /* 圖示置中 */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 預設隱藏 (動畫效果) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

#back-to-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#back-to-top-btn:hover {
    background-color: #b02a2a; /* 顏色加深 */
    transform: translateY(-3px); /* 輕微上移 */
}


/* --- 3. 網站區塊 (Header, Footer, Hero) --- */

/* 3.1 Header & Navigation */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 1);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e0e0e0;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    position: relative; /* 【新增】為絕對定位的導覽列提供基準 */
}
.logo-img {
    max-height: 60px;
}
.main-nav a {
    color: var(--color-dark);
    margin: 0 18px;
    font-weight: 700;
    position: relative;
    padding-bottom: 5px;
}
.main-nav a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width 0.3s ease;
}
.main-nav a:hover:after,
.main-nav a.active-link:after {
    width: 100%;
}
.main-nav a.active-link {
    color: var(--color-primary);
}
.menu-toggle { display: none; } /* 手機版樣式在 RWD 區塊 */

/* 3.2 Page Hero (通用頁首橫幅) */
.page-hero-section {
    position: relative;
    height: 95vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    color: var(--color-light);
    overflow: hidden;
}
.page-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}
.page-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: -1;
}
.page-hero-content {
    max-width: 700px;
}
.page-hero-content h1 {
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}
.page-hero-content p {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    max-width: 100%;
    margin-top: 15px;
}

/* 3.3 向下滾動按鈕 */
.scroll-down-prompt {
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 3;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    border-radius: 50px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    transition: background-color 0.3s ease;
}
.scroll-down-prompt:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* 3.4 Footer */
.site-footer {
    background-color: #1a1a1a;
    color: #fbfbfb;
    padding: 60px 0 25px 0;
    margin-top: auto;
}
.footer-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    gap: 60px;
}
.footer-column h4 {
    color: var(--color-light);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.footer-column .footer-logo {
    font-size: 1.5rem;
    font-weight: 900;
}
.footer-column .footer-logo {
    color: var(--color-light); /* 或者直接寫 #ffffff */
}
.footer-column p {
    margin-bottom: 0;
    font-size: 0.9rem;
}
.footer-column a {
    color: #a0a0a0;
    display: block;
    margin-bottom: 10px;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}
.footer-column a:hover {
    color: var(--color-light);
}
.footer-column .margin-top-large { margin-top: 30px; }
.footer-column .margin-top-small { margin-top: 15px; }
.footer-column .office-email { margin-bottom: 0; }
.footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid #333;
    font-size: 0.75rem;
}

/* 【新增】讓版權文字在剩餘空間置中 */
.copyright-text {
    position: static;        /* 移除 absolute */
    transform: none;         /* 移除 transform */
}




/* --- 4. 頁面專屬樣式 (Page-Specific Styles) --- */

/* 4.1 首頁 (Homepage) */
.hero { height: calc(100vh - 80px); }
.hero-slider {
    width: 100%; height: 100%;
    --swiper-navigation-color: #FFFFFF;
    --swiper-pagination-color: #FFFFFF;
}
.hero-slider .swiper-pagination-bullet {
    background-color: #FFFFFF;
    opacity: 0.6;
}
.hero-slider .swiper-slide {
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-slider .swiper-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--color-light);
}
.hero-content p {
    font-size: 1.5rem;
    max-width: 500px;
    margin: 0 auto;
}

.about-summary-section {
    background-color: var(--color-light);
    text-align: center;
    margin-top: -20px;
    padding-top: 100px;
}
.about-summary-content h3 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.about-summary-content p {
    max-width: 700px;
    margin: 20px auto 60px auto;
    font-size: 1.2rem;
    color: #555;
}
.services-grid {
    display: grid;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    grid-template-columns: 1fr; /* 手機版預設 */
}
.service-item {
    background-color: var(--color-light);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: center;
}
.service-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: var(--color-primary);
    color: var(--color-light);
    border-radius: 50%;
    margin-bottom: 20px;
    transition: transform 0.3s ease-in-out;
}
.service-item:hover .service-icon {
    transform: rotate(15deg) scale(1.15);
}
.service-item h4 {
    overflow: hidden;
    text-overflow: ellipsis;
}
.about-summary-cta {
    margin-top: 60px;
    text-align: center;
}
.what-we-do-combined-section {
    background-color: var(--color-light);

}

.what-we-do-combined-section .two-column-layout {

    justify-content: center;
    align-items: flex-start;
    gap: 50px;
}
.what-we-do-combined-section .column-image { flex: 0 0 45%; }
.what-we-do-combined-section .column-text { flex: 0 0 50%; }
.what-we-do-image {
    width: 80%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.what-we-do-combined-section .main-text-block h3 {
    font-size: 1.5rem;
    font-style: normal;
}
.what-we-do-combined-section .mission-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
.what-we-do-combined-section .mission-item {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 20px;
    padding: 10px;
    background-color: var(--color-grey);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.what-we-do-combined-section .mission-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    color: var(--color-primary);
}
.what-we-do-combined-section .mission-icon svg { width: 40px; height: 40px; }
.what-we-do-combined-section .mission-item h3 { font-size: 1.2rem; margin-bottom: 5px; }
.what-we-do-combined-section .mission-item p { margin: 0; color: #666; max-width: none; }

.trust-section {
    background-color: var(--color-light);
}
.trust-section .column-image img {
    width: 85%;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

}
.trust-section .column-text h3 { margin-top: 0; }
.trust-section .button { margin-top: 20px; }


/* --- 4.2 專案頁 (Projects Page) - 新的網格卡片佈局 --- */

.project-grid {
    /* 設定最大寬度為 1100px，小於外層 container 的寬度 */
    max-width: 1100px; 
    /* 透過 margin: auto 讓網格本身在容器內水平置中 */
    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 50px;
}

.project-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden; /* 確保圖片圓角生效 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* 讓卡片內容垂直排列 */
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.project-card-image {
    width: 100%;
    height: 190px; /* 給圖片一個固定的高度，讓網格對齊 */
    overflow: hidden;
}

.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 讓圖片填滿容器且不變形 */
    transition: transform 0.4s ease;
}

.project-card:hover .project-card-image img {
    transform: scale(1.05); /* 滑鼠移上去時圖片輕微放大 */
}

.project-card-content {
    padding: 25px;
    flex-grow: 1; /* 讓內容區塊填滿剩餘空間 */
    display: flex;
    flex-direction: column;
}

.project-card-content .project-category {
    font-size: 0.9rem;
    font-weight: 700;
    color: #555;
}

/* --- 修改這一段 --- */
.project-card-content p {
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 10px;
    margin-bottom: 15px; /* 【新增】給下方按鈕留出空間 */
    color: #333;
    flex-grow: 1;

    /* 【移除】舊的文字截斷規則，我們將改用 class 控制 */
    /* display: -webkit-box; */
    /* -webkit-line-clamp: 3; */
    /* -webkit-box-orient: vertical;   */
    /* overflow: hidden; */
}

/* --- 新增這兩個 class --- */

/* 用於截斷文字的輔助 class */
.project-card-content p.is-truncated {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 限制 3 行 */
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* 「閱讀更多」按鈕的樣式 */
.read-more-btn {
    background: none;
    border: none;
    color: var(--color-primary);
    font-weight: 700;
    font-family: var(--font-primary);
    padding: 5px 0;
    cursor: pointer;
    margin-top: auto; /* 【關鍵】將按鈕推到卡片最底部 */
    align-self: flex-start; /* 讓按鈕靠左 */
    font-size: 0.9rem;
}

/* 移除舊的分隔線樣式 (如果還有的話) */
.separator {
    display: none;
}


/* --- 專案頁 - 隱藏多餘的專案 --- */
.hidden-project {
    display: none; /* 預設隱藏 */
}

/* 4.3 服務頁 (Services Page) */

.service-intro-content,.service-feature-content{
    text-align: center;

}
.service-feature-section {
    display: flex;
    /* 【修改】align-items: stretch -> align-items: center */
    /* 讓項目在垂直方向上置中對齊 */
    align-items: center; 
    gap: 60px;
    max-width:1100px;

    /* 2. 透過 margin: auto 讓這個區塊本身水平置中 */
    margin-left: auto;
    margin-right: auto;
}
/* 1. 設定圖片容器佔用 35% 的基礎寬度 */
.service-feature-image {
    flex: 0 1 35%; 
    min-width: 0;
}

.service-feature-section .feature-list {
    flex: 0.8; /* 這行會讓文字自動填滿圖片右邊剩下的所有空間 */
    min-width: 0;

    /* 【新增】覆蓋 4.4 節的置中樣式 */
    max-width: none;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}
.service-feature-image img {
    width:100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.service-feature-section.reverse {
    flex-direction: row-reverse;
    text-align: center;
}

.planning-faq {
    margin-top: 40px;
    text-align: left;
}
.faq-item:not(:last-child) {
    margin-bottom: 30px;
}
.faq-item h4 {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 8px;
}
.faq-item p {
    color: #555;
    max-width: none;
    font-size: 1rem;
    margin-bottom: 0;
}

.maintenance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}
.maintenance-item {
    background-color: var(--color-grey);
    padding: 30px;
    border-radius: 8px;
    text-align: center;
}
.maintenance-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    color: var(--color-primary);
}
.maintenance-icon svg {
    width: 40px;
    height: 40px;
    stroke-width: 1.5px;
}
.maintenance-item h4 {
    margin-bottom: 15px;
}
.maintenance-item p {
    color: #555;
    max-width: none;
    font-size: 1rem;
}
.image-extra-content {
    margin-top: 20px;
    padding: 20px;
    background-color: var(--color-grey);
    border-radius: 8px;
}
.image-extra-content h4 {
    margin-bottom: 15px;
    text-transform: none;
}
.image-extra-content ul {
    text-align: left;
    font-size: 0.95rem;
    color: #333;
}
.image-extra-content ul li {
    margin-bottom: 8px;
}

/* 4.4 專業技術頁 (Expertise Page) */
.feature-list { margin-top: 40px;text-align: left;; max-width: 800px; margin-left: auto; margin-right: auto; }
.feature-list h4 { font-size: 1.5rem; margin-bottom: 20px; }
.feature-list ul {
  padding-left: 0;  /* 移除 ul 的預設內距，我們改由 li 控制縮排 */
}
.feature-list ul li {
  position: relative; /* 讓 ::before 可以相對於 li 定位 */
  padding-left: 30px; /* 設定文字的起始位置 (可依需求調整) */
  margin-bottom: 8px; /* (可選) 增加一點項目間距 */
}
/* 3. 建立 ::before 虛擬元素作為打勾 */
.feature-list ul li::before {
  content: '✓'; /* 你要的打勾符號 (Unicode) */
  position: absolute; /* 絕對定位 */
  left: 0;      /* 對齊到 li 的最左邊 */
  top: 0;       /* 對齊到 li 的最上面 (你可能需要微調 1px 或 2px 來完美對齊文字) */
  color:var(--color-primary);
}
.analysis-grid {   display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-top: 60px; }
.analysis-item { background-color: #f9f9f9; padding: 30px; border-radius: 8px; border-bottom: 4px solid var(--color-primary); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.analysis-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); }
.analysis-item h3 { margin-top: 0 }

.feature-list {
    text-align: left;
}
.analysis-item {
    text-align: left;
}
.analysis-item p {
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
}
.expertise-hero-image {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}


/* 4.5 團隊頁 (People Page) */
.team-profile-container {
    max-width: 800px;
    margin: 0 auto;
}
.team-profile {
    text-align: center;
    padding: 50px 0;
}
.team-profile:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
}
.team-profile-header {
    display: flex;           /* 關鍵：啟用 Flexbox 佈局 */
    flex-direction: column;  /* 將排列方向設為垂直 */
    align-items: center;     /* 【真正】讓項目水平置中的屬性 */
    gap: 5px;                /* 設定垂直間距 */
}
.team-profile-header h3,
.team-profile-header .title {
    margin: 0;
}
.team-profile .title {
    color: var(--color-primary);
    font-weight: 700;
}
.team-profile .bio {
    max-width: 65ch;
    margin: 20px auto 0 auto;
    text-align: left;
}


/* 4.6 聯絡頁 (Contact Page) */
/* --- 4.6 聯絡頁 (Contact Page) - 新的浮動標籤樣式 --- */
/* --- 4.6 聯絡頁 (Contact Page) - 最終整合版 --- */

.contact-form-layout {
    max-width: 800px;
    margin: 0 auto;
}
.contact-form-intro {
    text-align: center;
    margin-bottom: 50px;
    margin-top:10px;
}

.floating-label-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.floating-label-form .form-group {
    position: relative;
    margin-bottom: 0;
}

.floating-label-form .form-group.full-width {
    grid-column: 1 / -1;
    margin-top: 30px;
}

.floating-label-form input,
.floating-label-form textarea {
    width: 100%;
    padding: 24px 15px 10px 15px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    border-radius: 6px;
    box-sizing: border-box;
}

.floating-label-form label {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #484848;
    font-size: 1rem;
    pointer-events: none;
    transition: all 0.2s ease-in-out;
}

/* 1. 設定標籤在何時「浮動到上方」 */
.floating-label-form input:focus + label,
.floating-label-form input:not(:placeholder-shown) + label,
.floating-label-form textarea:focus + label,
.floating-label-form textarea:not(:placeholder-shown) + label,
.floating-label-form .form-group.has-error label {
    top: 1px;                 /* 【修改】向上移動更多，從 8px 改為 6px */
    transform: translateY(0);
    font-size: 0.6rem;        /* 【修改】讓字體更小，從 0.75rem 改為 0.7rem */
    letter-spacing: 0.5px;    /* (可選) 增加一點字距，讓小字更清晰 */
}
/* 2. 設定標籤在不同狀態下的「顏色」 */
.floating-label-form input:not(:placeholder-shown):not(:focus) + label,
.floating-label-form textarea:not(:placeholder-shown):not(:focus) + label {
    color: #555; /* 已填寫但未聚焦時的顏色 */
}

.floating-label-form input:focus + label,
.floating-label-form textarea:focus + label,
.floating-label-form .form-group.has-error label {
    color: var(--color-primary); /* 聚焦中或錯誤時的顏色 */
}

.floating-label-form .required-asterisk {
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: 700;
    margin-left: 2px;
}

.floating-label-form input:focus,
.floating-label-form textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(217, 58, 58, 0.15);
}

.floating-label-form textarea { 
    min-height: 150px; 
    resize: vertical; 
}

.validation-message {
    display: none;
    font-size: 0.85rem;
    color: var(--color-primary);
    margin-top: 5px;
}
.floating-label-form .form-group.has-error .validation-message {
    display: block;
}
.floating-label-form .form-group.has-error input,
.floating-label-form .form-group.has-error textarea {
    border-color: var(--color-primary);
    background-color: #fff0f0;
}
.form-meta-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}
.char-count {
    font-size: 0.85rem;
    color: #888;
}

/* --- 修正：調整 Textarea 浮動標籤的初始位置 --- */
.floating-label-form textarea + label {
    top: 26px; /* 將垂直置中改為一個固定的 top 值 */
    /* 移除 transform，或保持 transform: translateY(-50%) 以精確對齊第一行文字 */
    transform: translateY(-50%);
}
/* 送出按鈕區塊 */
.form-submit {
    display: grid;
    grid-template-columns: 1fr auto 1fr; 
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}
.form-submit .button {
    grid-column: 2 / 3;
}
.form-submit .recaptcha-notice {
    grid-column: 3 / 4;
    justify-self: start;
    font-size: 0.75rem;
    color: #777;
    max-width: 280px;
    line-height: 1.4;
    margin: 0;
}
.recaptcha-notice a {
    color: #555;
    text-decoration: underline;
}
.recaptcha-notice a:hover {
    color: var(--color-primary);
}

/* --- 表單字體統一樣式 --- */

/* 選擇所有的 input 和 textarea 元素 */
input,
textarea {
    /* * 關鍵！
     * "inherit" 關鍵字會讓這些欄位繼承其父層容器的字體設定，
     * 通常就是你在 <body> 上設定的字體。
     * 這樣就能確保它們和頁面上其他文字的字體一致。
     */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit; /* 建議也統一 line-height */
}
/* --- 5. 動畫效果 (Animations) --- */

.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.team-profile, .project-feature {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.team-profile.is-visible, .project-feature.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.floating-label-form .form-submit {
    display: grid;
    /* 建立三欄：左側彈性空間 | 按鈕自適應寬度 | 右側彈性空間 */
    grid-template-columns: 1fr auto 1fr; 
    align-items: center; /* 垂直置中 */
    gap: 20px;           /* 設定間距 */
    margin-top: 40px;    /* 保持與上方欄位的距離 */
}

/* 2. 將按鈕明確地放在中間第二欄 */
.form-submit .button {
    grid-column: 2 / 3;
}

/* 3. 將提示文字放在右側第三欄，並讓它靠左對齊 */
.form-submit .recaptcha-notice {
    grid-column: 3 / 4;
    justify-self: start; /* 讓文字在自己的欄位內靠左 */
    font-size: 0.75rem;
    color: #777;
    max-width: 280px;
    line-height: 1.4;
    margin: 0;
}

/* (舊的 recaptcha-notice 樣式已合併至此) */

.recaptcha-notice a {
    color: #555;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.recaptcha-notice a:hover {
    color: var(--color-primary);
}

/* Style for the new reCAPTCHA notice text */
.recaptcha-notice {
    font-size: 0.75rem; /* Make the text smaller */
    color: #777;       /* Use a gray color for subtlety */
    max-width: 280px;   /* Limit the width to prevent it from being too long */
    line-height: 1.4;
    margin: 0; /* Remove default paragraph margin */
}


@media (max-width: 768px) {

    /* ▼▼▼ 【在 RWD 區塊中新增/修改這一段】 ▼▼▼ */
    .floating-label-form .form-submit {
        grid-template-columns: 1fr; /* 在手機上變為單欄 */
        justify-items: center;      /* 讓所有項目在單欄中置中 */
        text-align: center;         /* 讓文字也置中 */
    }

    .form-submit .button,
    .form-submit .recaptcha-notice {
        grid-column: 1 / 0; /* 讓按鈕和文字都佔據整個單欄 */
    }
    /* ▲▲▲ 【修改結束】 ▲▲▲ */
        /* 聯絡頁 RWD */
    .floating-label-form .form-grid {
        /* 將網格從兩欄 (1fr 1fr) 改為單欄 (1fr) */
        grid-template-columns: 1fr;
        /* 設定單欄時，項目之間的垂直間距 */
        gap: 25px;
        /* 移除之前為了推開 Message 區塊的 margin，現在由 gap 控制 */
        margin-bottom: 25px;
    }

    
}



/* --- 6. 響應式設計 (Responsive Styles) --- */

/* 6.1 平板 */
@media (min-width: 769px) and (max-width: 991px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* 1. 【解決文字被吃掉】
       將服務項目改為兩欄佈局，並允許文字換行。*/
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .service-item h4 {
        /* 如果之前沒刪掉，確保 white-space: nowrap; 在這裡不存在 */
        /* 這將允許 "STRUCTURAL ASSESSMENT" 等長標題自然換行 */
    }


    /* 2. 【解決圖片沒有置中】
       再次明確地告訴 .column-image 容器，要將其內部的圖片水平置中。*/
    .column-image {
        display: flex;
        justify-content: center;
    }
}

/* 6.2 電腦版 */
@media (min-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
    }

    .main-nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}



@media (max-width: 991px) {
    .scope-image-container {
        flex-basis: auto;
        width: 60%;
        margin: 0 auto 40px auto;
    }
}

/* 在更小的手機上 (螢幕寬度 <= 576px)，可以讓它再寬一點 */
@media (max-width: 576px) {
    .scope-image-container {
        width: 85%;
    }
}
/* 6.3 手機版 */
@media (max-width: 768px) {
       /* --- RWD 文字靠左對齊調整 --- */
    .about-summary-section,
    .team-profile,
    .project-feature-content,
    .trust-section{
        text-align: left;
    }
    team-profile-header {
        align-items: flex-start; /* Flexbox 的水平對齊是 align-items */
    }
    .project-feature-content ul,
    .project-feature-content p,
    .team-profile .bio {
        display: block; /* 改回預設的 block 顯示方式 */
        margin-left: 0; /* 移除 auto 置中效果 */
        margin-right: 0;
    }

    body { padding-top: 70px; }
    .container { padding: 0 30px; }
    section.content-section { padding: 80px 0; }

    /* Header RWD */
    .header-container { height: 70px; }
    .logo-img { max-height: 50px; }
    .menu-toggle { display: block; background: none; border: none; cursor: pointer; padding: 10px; z-index: 1001; }
    .menu-toggle .bar { display: block; width: 25px; height: 3px; background-color: var(--color-dark); margin: 5px auto; transition: all 0.3s ease-in-out; }
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    
    .main-nav {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: var(--color-light);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .main-nav.is-open { display: flex; flex-direction: column; }
    .main-nav a { padding: 20px; text-align: center; border-bottom: 1px solid var(--color-grey); }
    .main-nav a:after { display: none; }

    /* Hero RWD */
    .page-hero-section { height: 60vh; min-height: 400px; }
    .scroll-down-prompt { display: none !important; }
    .hero-content {
        padding-left: 55px;
        padding-right: 55px;
        box-sizing: border-box;
    }

    /* Footer RWD */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: left;
        gap: 20px;
        margin-top:3px
    }

    .hide-on-mobile {
        display: none;
    }
    .footer-bottom {
    flex-direction: row; /* 【修改】讓手機版也維持水平排列 */
    font-size: 0.7rem; /* 可以稍微縮小字體以容納更多空間 */
    }
    .services-grid {
    }
    .service-item {
    width: 90%;
    max-width: 380px;
    box-sizing: border-box;
    margin: 0 auto; /* 【新增】讓項目自己完美置中 */
}
    
    /* 通用版面 RWD */
    .two-column-layout,
    .service-feature-section,
    .project-feature {
        flex-direction: column;
        align-items: center; /* 【新增】讓垂直排列的項目水平置中 */

    }
    .two-column-layout.reverse-on-mobile {
        flex-direction: column-reverse;
    }
    .service-feature-section.reverse,
    .project-feature:nth-of-type(even) {
        flex-direction: column;
    }

    /* 首頁 RWD */
    .what-we-do-combined-section .column-image,
    .what-we-do-combined-section .column-text {
        flex-basis: 100%;
    }
    .what-we-do-image {
        width: 60%; /* 將圖片寬度從預設的 80% 縮小為 70% */
    }
    .mission-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }


    .maintenance-grid {
        grid-template-columns: 1fr;
    }

    /* 專案頁 RWD */
    .separator {
        margin: 60px auto;
    }

    .project-feature {
        gap: 20px;
    }
    
    .project-feature-content {
        text-align: center;
    }
    
    .project-feature-content p {
        margin-left: auto;
        margin-right: auto;
    }
    
    .project-feature-content ul {
        text-align: left;
        display: inline-block;
        margin-top: 20px;
    }
    .project-feature-image {
        width: 75%; /* 關鍵：強制設定寬度 */
        flex-shrink: 0; /* 確保在 Flex 佈局中不會被縮小 */
    }

    .image-slider {
        padding-top: 56.25%; /* 設定為常見的 16:9 比例 */
    }
    .project-grid {
        /* 在手機上變為單欄顯示 */
        grid-template-columns: 1fr;
        gap: 30px;
        justify-items: center; /* 【新增】讓網格內的項目(卡片)水平置中 */
    }

    /* 2.【新增這段】設定卡片在手機上的寬度 */
    .project-card {
        width: 90%; /* 設定卡片寬度為容器的 90% */
        max-width: 400px; /*【建議】新增最大寬度，避免在較大手機上過寬 */
    }
}