:root{--ink:#17212b;--muted:#627084;--brand:#0f5f6b;--brand-dark:#083842;--brand2:#d68b2d;--bg:#f5f7f8;--card:#fff;--line:#dfe6ea;--max:1180px}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;color:var(--ink);line-height:1.75;background:#fff}img{max-width:100%;height:auto;display:block}a{color:inherit}.container{width:min(92%,var(--max));margin:auto}.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-weight:800}.brand img{height:42px;width:auto}.main-nav{display:flex;gap:22px;font-size:15px}.main-nav a{text-decoration:none;color:#26323e}.hero{background:linear-gradient(135deg,#082f3b,#0f5f6b 58%,#17444c);color:#fff;padding:86px 0}.hero-grid,.split{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--brand2);font-weight:800;font-size:13px}.hero h1,.product-hero h1{font-size:clamp(34px,5vw,62px);line-height:1.15;margin:10px 0 18px}.lead{font-size:19px;color:#e8f1f2}.dark-lead{color:#334252}.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-block;padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:800;line-height:1.3}.primary{background:var(--brand2);color:#111}.secondary{border:1px solid rgba(255,255,255,.48);color:#fff}.outline{border:1px solid var(--brand);color:var(--brand);background:#fff}.hero-media img,.card-image img,.product-card img{border-radius:24px;box-shadow:0 24px 70px rgba(0,0,0,.22);aspect-ratio:4/3;object-fit:cover;background:#e9eef0}.trust-strip{background:#fff;border-bottom:1px solid var(--line)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:24px 0}.stats div{border-left:4px solid var(--brand2);padding-left:16px}.stats strong{font-size:30px;display:block;color:var(--brand)}.stats span{color:var(--muted)}.section{padding:78px 0}.muted{background:var(--bg)}h2{font-size:clamp(28px,4vw,42px);line-height:1.25;margin:6px 0 18px}.section-head{max-width:840px;margin-bottom:32px}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.product-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:0;box-shadow:0 10px 28px rgba(20,35,50,.06);overflow:hidden;transition:.22s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(20,35,50,.12)}.product-card a{text-decoration:none;display:block;height:100%}.product-card img{box-shadow:none;border-radius:0;aspect-ratio:16/10}.product-card-body{padding:18px}.product-tag{display:inline-block;margin:0 0 8px;color:var(--brand);font-size:13px;font-weight:800}.product-card h3{font-size:21px;margin:8px 0}.product-card p{color:var(--muted);margin:0 0 10px}.text-link{display:inline-block;margin-top:8px;color:var(--brand);font-weight:900}.reverse{grid-template-columns:.95fr 1.05fr}.check-list{padding-left:0;list-style:none}.check-list li{margin:10px 0;padding-left:30px;position:relative}.check-list li:before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:900}.ai-block{background:#102f38;color:#fff}.ai-block p:last-child{max-width:880px;color:#e9f2f3;font-size:18px}details{background:#fff;border:1px solid var(--line);border-radius:16px;margin:12px 0;padding:16px 20px}summary{cursor:pointer;font-weight:800}.contact{background:linear-gradient(135deg,#f7efe4,#fff)}.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:34px;background:#fff;border-radius:28px;padding:36px;border:1px solid var(--line);box-shadow:0 16px 45px rgba(30,40,50,.09)}.site-footer{background:#101820;color:#dbe4e8;padding:26px 0}.footer-grid{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.footer-grid a{color:#fff}.contact-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}.map-btn{background:#fff;border:1px solid var(--brand);color:var(--brand)}.contact-info a{color:var(--brand);font-weight:700}.map-card{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 16px 45px rgba(30,40,50,.09)}.map-embed{position:relative}.map-embed iframe{display:block;width:100%;min-height:360px}.map-click-layer{position:absolute;inset:0;z-index:2;pointer-events:none;background:transparent}.map-note{margin:0;padding:12px 18px;color:var(--muted);font-size:14px;background:#fff}.product-hero{background:linear-gradient(135deg,#f7efe4,#fff 55%,#e9f2f3);padding:70px 0}.product-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center}.breadcrumb{font-size:14px;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;color:var(--muted)}.breadcrumb a{color:var(--brand);text-decoration:none;font-weight:700}.product-model{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:900;color:var(--brand);margin:0 0 12px}.product-main-image img{border-radius:28px;aspect-ratio:4/3;object-fit:cover;box-shadow:0 20px 60px rgba(15,95,107,.18);background:#e9eef0}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.detail-panel,.quote-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:0 12px 30px rgba(20,35,50,.06)}.spec-table{width:100%;border-collapse:collapse;background:#fff;border-radius:20px;overflow:hidden}.spec-table th,.spec-table td{border:1px solid var(--line);padding:12px 14px;text-align:left}.spec-table th{background:#102f38;color:#fff}.table-wrap{overflow-x:auto;border-radius:20px}.quote-card{background:#102f38;color:#fff}.quote-card p{color:#e8f1f2}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.mini-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}.mini-card a{text-decoration:none}.mini-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#e9eef0}.mini-card h3,.mini-card p{margin-left:18px;margin-right:18px}.mini-card p{color:var(--muted);margin-bottom:18px}@media(max-width:1080px){.product-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:860px){.main-nav{display:none}.hero-grid,.split,.reverse,.contact-card,.product-hero-grid,.detail-grid,.related-grid{grid-template-columns:1fr}.product-grid,.stats{grid-template-columns:1fr}.hero{padding:58px 0}.section{padding:54px 0}.contact-actions .btn{width:100%;text-align:center}.map-embed iframe{height:340px}.map-click-layer{pointer-events:auto}.map-note{font-size:13px}.product-hero{padding:48px 0}.spec-table{font-size:14px}}

/* Image fallback: prevents empty gray broken-image boxes when old website assets have not yet been copied. */
.image-fallback{object-fit:cover;background:#e9eef0}.hero-media,.card-image,.product-main-image,.product-card,.mini-card{overflow:hidden}

/* Product photos are full-machine shots on a clean white background (normalized to 4:3 from the old site).
   Use contain instead of cover so machines are never cropped; white letterboxing is invisible on white cards. */
.product-card img,.product-main-image img,.mini-card img{object-fit:contain;background:#fff}
.product-card img,.mini-card img{border-bottom:1px solid var(--line)}

/* Hero banner (home.jpg) and section images (com.jpg, solution.jpg) are designed
   compositions with text baked in — show them at their natural ratio instead of cropping to 4:3. */
.hero-media img,.card-image img{aspect-ratio:auto}

/* Every <img> now carries width/height attributes so the browser can reserve space before the
   file loads (avoids layout shift). Those attributes act as presentational hints that set BOTH
   width and height in pixels, so the base img rule must reset height to auto — otherwise the
   height attribute pins the box to the file's pixel height while max-width shrinks the width,
   which squashes the box and makes object-fit:cover zoom in hard. Rules that deliberately set a
   height (.brand img) or an aspect-ratio (.product-card img) are more specific and still win. */

/* The base template hid .main-nav entirely below 860px with no hamburger fallback,
   leaving narrow screens without any navigation. Keep it visible: slightly smaller and
   right-aligned on the same row as the brand; it only wraps below when truly too narrow. */
@media(max-width:860px){
  .nav-wrap{flex-wrap:wrap;padding:12px 0}
  .main-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 16px;font-size:14px;margin-left:auto}
}