:root{
  --brand:#2b7be4;
  --brand-2:#66a3ff;
  --ink:#223;
  --muted:#6c7683;
  --bg:#ffffff;
  --soft:#e9f5ff;
  --cta:#3c86f0;
  --cta-text:#fff;
  --line:#e6e9ee;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}

.container{ width:min(1200px, 92%); margin-inline:auto; }

/* Top search bar */
.topbar{
  background:var(--brand);
  color:#fff;
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
}
.search{
  position:relative; width:min(520px, 60%);
}
.search input{
  width:100%; padding:12px 44px 12px 16px; border:0; border-radius:24px;
  outline:none; font:500 14px/1 "Poppins", sans-serif;
  background:#fff; color:#333;
}
.search button{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:0; background:#fff; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; color:var(--brand); cursor:pointer;
}
.social a{
  display:inline-grid; place-items:center; width:28px; height:28px;
  margin-left:12px; color:#fff; opacity:.95;
}
.social a:hover{ opacity:1; }

/* ===== Header (clean version) ===== */
.site-header{
  background:#d6eef8;
  border-bottom:1px solid var(--line);
  padding:14px 0;
}

.header-inner{
  display:flex;
  align-items:center;
  gap:28px;
}

@media (max-width: 960px){
  .header-inner{ grid-template-columns: 1fr auto; grid-auto-flow: row; gap:10px;}
  .nav{ order: 3; }
  .cta{ order:2; justify-self:start; }
}

/* Hero / Carousel */
.hero{ background:#fff; }
.hero-frame{
  position:relative;
  margin:24px auto 18px;
  padding:0; 
  border-radius:6px;
  overflow:hidden;
}
.slides{ position:relative; height:520px; }
@media (max-width: 780px){ .slides{ height:360px; } }

.slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity .6s ease;
  display:grid; place-items:center;
}
.slide.is-active{ opacity:1; }

.slide-bg{ position:absolute; inset:0; }

.slide-bg img{
  width:100%;
  height:100%;
  object-fit:contain;   /* 想完整顯示不裁切就改 contain */
  display:block;
}

.bg1{
  background:linear-gradient(90deg,#b9cbb5 0%, #efe0c9 100%);
  filter:contrast(98%) saturate(85%) brightness(102%);
}
.bg2{
  background:linear-gradient(90deg,#b9d9ff 0%, #e1f3ff 100%);
}
.bg3{
  background:linear-gradient(90deg,#ffd6c4 0%, #fff0d6 100%);
}

.slide-content{
  position:relative; text-align:center; padding:20px;
}
.slide-content h2{
  font-size:48px; margin:0 0 10px; letter-spacing:1px;
}
.slide-content p{ color:#666; margin:0; }

/* Arrows */
.arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:6px; border:1px solid #cfcfcf;
  background:#fff; color:#444; display:grid; place-items:center;
  cursor:pointer; z-index:5;
}
.arrow span{ font-size:30px; line-height:1; margin-top:-3px;}
.arrow.prev{ left:18px; }
.arrow.next{ right:18px; }
.arrow:hover{ box-shadow:0 4px 12px rgba(0,0,0,.08); }

/* Featured title line */
.featured{ padding:10px 0 40px; }
.section-title{
  display:flex; align-items:center; justify-content:center; gap:18px;
  font-size:28px; letter-spacing:.5px; margin:8px 0 0;
}
.section-title .rule{
  display:inline-block; width:160px; height:4px; background:linear-gradient(90deg,var(--brand) 0%, var(--brand-2) 100%);
  border-radius:2px;
}

/* Utilities */
hr{ border:none; border-top:1px solid var(--line); }


/* Left: logo + name */
.brand{
  width:320px;                 /* 控制 nav 在中間偏左/偏右 */
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  text-decoration:none;
  color:inherit;
}

.brand .mark{
  display:block;               /* 不要用 flex + width:100% 亂撐 */
}

.brand .mark img{
  height:70px;                 /* 你想再大：80；再小：64 */
  width:auto;
  display:block;
}

.brand-line2{
  font-size:18px;
  font-weight:700;
  color:#1a57a8;
  line-height:1.2;
}

/* Middle: nav */
.nav{
  margin:0 auto;               /* 真正置中 */
}

.nav ul{
  list-style:none;
  display:flex;
  gap:34px;
  margin:0;
  padding:0;
}

.nav a{
  text-decoration:none;
  color:#2d2d2d;
  font-weight:600;
  font-size:1.3rem;
  letter-spacing:.4px;
}

.nav a.active{ color:var(--brand); }
.nav a:hover{ color:#000; }

/* Right: CTA (如果你已刪掉 CTA，這段不影響) */
.cta{
  margin-left:auto;
  text-decoration:none;
  font-weight:600;
  color:var(--cta-text);
  background:var(--cta);
  padding:10px 18px;
  border-radius:24px;
}
/* Dickson product gallery */
.product-gallery {
  padding: 40px 0;
}

.pg-title {
  font-size: 32px;
  text-align: center;
  margin-bottom: 30px;
  font-weight: 700;
}

.pg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 26px;
}

.pg-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  text-align: center;
}

.pg-img {
  width: 100%;
  height: 160px;         /* 固定高度，不會拉爆 */
  object-fit: contain;   /* 保持比例，不裁切 */
  margin-bottom: 10px;
}

.pg-caption {
  font-size: 15px;
  color: var(--ink);
  margin: 0;
  padding: 8px 6px 0;
  text-align: center;
  /* 關鍵：就算沒有空格也要換行 */
  word-break: break-all;        /* 或 overflow-wrap: anywhere; 也可以 */
}

.page-wrap{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content{
  flex: 1;   /* ✅ 這行就是把 footer 推到底的關鍵 */
}

.site-footer{
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
  color:#fff;
  text-align:center;
  padding:14px 10px;
  font-size:14px;
}

.contact-lines{
  display: flex;
  flex-direction: column;  /* 讓兩行上下排列 */
  gap: 6px;                /* 行距，可調 */
}


/* -------- RWD --------- */

/* ===== Global RWD base ===== */
*{ box-sizing:border-box; }
img{ max-width:100%; height:auto; display:block; }
.container{ width:min(1100px, 100% - 32px); margin-inline:auto; }

/* 避免長連結/長字把版面撐爆 */
a, p, li, span{ overflow-wrap:anywhere; word-break:break-word; }

/* page-wrap 做 sticky footer（你之前藍色底條會跑上來就是這個類型問題） */
.page-wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  max-width: none;
}
.page-content{ flex:1; }

/* ===== Header / Nav RWD ===== */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap; /* 小螢幕會自動換行 */
}

.nav ul{
  display:flex;
  gap:22px;
  flex-wrap:wrap;          /* 小螢幕自動換行 */
  justify-content:center;  /* 換行後好看 */
  padding:0;
  margin:0;
  list-style:none;
}

@media (max-width: 768px){

  .header-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* ✅ 導覽區塊吃滿寬，避免被桌機定位影響 */
  .nav{ width: 100%; }

  /* ✅ 把 ul 的預設縮排 & 任何位移全部清掉 */
  .nav ul{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    margin: 0;
    padding: 0;          /* 關鍵：不要讓 ul 自帶縮排 */
    list-style: none;

    position: static;    /* 關鍵：清掉 position/left */
    left: auto;
    transform: none;     /* 關鍵：清掉 translate 之類的 */
  }

  .nav li{ margin: 0; }

  /* 可選：讓 header 內側留一點 padding，避免貼邊 */
  .site-header .container{
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ===== Cards / Grid RWD ===== */
.pg-grid,
.cust-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:22px;
}

@media (max-width: 1024px){
  .pg-grid,
  .cust-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px){
  .pg-grid,
  .cust-grid{ grid-template-columns:1fr; }
}

/* ===== Project / Gallery RWD (你 proj2-media 那種) ===== */
.proj2-gallery{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;               /* 圖片間距 */
  align-items:start;
}

.proj2-media{
  width:100%;
  height:auto;            /* 不要硬卡高度，RWD 才不會怪 */
}

.proj2-media img{
  width:100%;
  aspect-ratio: 16 / 9;   /* 讓並排時視覺一致 */
  object-fit:cover;       /* 想完整顯示用 contain，但視覺會不齊 */
  border-radius:12px;
}

@media (max-width: 768px){
  .proj2-gallery{ grid-template-columns:1fr; }
  .proj2-media img{ aspect-ratio: 4 / 3; }
}

/* ===== Two-column layout on contact/customer page (有 sidebar 那種) ===== */
.two-col{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:28px;
  align-items:start;
}

@media (max-width: 960px){
  .two-col{ grid-template-columns: 1fr; }
}

.site-header,
.site-footer{
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* 防止手機套用 EXIF 自動旋轉 */
img{
  image-orientation: from-image; /* 預設，但明確指定 */
}

/* 如果某些圖片一定被轉 90 度，可強制 */
.no-rotate{
  transform: rotate(0deg) !important;
}