:root { --navy:#1b315c; --muted:#5d6574; --line:#e6dfd2; --paper:#fbf9f5; --gold:#b08b45; --white:#fffcf8; --serif:"Fraunces","Noto Serif TC",serif; --sans:"Outfit","Noto Sans TC","PingFang HK",sans-serif; --max:1160px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--navy); font-family:var(--sans); font-size:16px; line-height:1.6; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
.wrap { width:min(var(--max), calc(100% - 48px)); margin:0 auto; }
.nav { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; padding:18px 32px; background:rgba(251,249,245,.94); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:10px; }
.brand img { width:76px; height:76px; border-radius:50%; object-fit:cover; object-position:center; background:transparent; }
@media (max-width:860px) {
  .nav { display:flex; justify-content:space-between; padding:14px 16px; }
  .brand { min-width:0; }
  .brand img { width:58px; height:58px; }
  .brand-name { font-size:16px; }
  .brand-name small { font-size:8px; letter-spacing:.12em; }
  .nav-actions { margin-left:12px; flex:0 0 auto; }
}
.brand-name { font-family:var(--serif); letter-spacing:.12em; font-size:18px; }
.brand-name small { display:block; margin-top:2px; font-family:var(--sans); letter-spacing:.18em; font-size:9px; color:var(--gold); }
.nav-links { display:flex; gap:28px; justify-self:center; }
.nav-actions { justify-self:end; display:flex; align-items:center; gap:10px; }
.nav-links a { font-size:15px; padding-bottom:6px; border-bottom:2px solid transparent; }
.nav-links a.active, .nav-links a:hover { border-bottom-color:var(--gold); }
.lang,.menu-btn { border:0; background:transparent; cursor:pointer; }
.menu-btn { display:none; border:1px solid var(--line); border-radius:999px; padding:8px 12px; }
.hero { display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:center; padding:28px 0 18px; }
h1,h2,h3 { font-family:var(--serif); font-weight:520; letter-spacing:-.03em; }
h1 { font-size:clamp(42px,5vw,64px); line-height:1; margin:0 0 16px; }
.vision { font-size: clamp(42px, 5vw, 58px); margin-bottom: 0; }
.vision::after { content: ""; display: block; width: 220px; height: 2px; background: var(--gold); margin-top: 16px; }
.vision-sub { margin: 18px 0 0; color: var(--muted); font-size: 18px; }
h3 { font-size:26px; margin:0 0 8px; }
.hero-sub,.kicker { color:var(--gold); }
.hero-sub { font-size:20px; margin:0 0 16px; }
.kicker { letter-spacing:.14em; text-transform:uppercase; font-size:12px; }
.rule { width:92px; height:1px; background:var(--gold); margin:0 0 26px; }
.btn { display:inline-flex; justify-content:flex-start; align-items:center; width:auto; min-width:180px; margin:8px 0 0; background:var(--navy); color:#fff; border:0; border-radius:8px; padding:12px 28px; letter-spacing:.06em; font-size:14px; cursor:pointer; text-align:left; box-shadow:0 8px 18px rgba(27,49,92,.18); }
form .btn { align-self:flex-start; }
.hero-figure img,.split img { width:100%; height:440px; object-fit:cover; border-radius:16px; }
.trust { display:flex; gap:14px; align-items:center; padding:28px 0 64px; }
.trust-mark { width:52px; height:52px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold); }
.trust span,.card p,.note { color:var(--muted); }
.trust b { margin-right: 16px; }
.page { padding:48px 0 80px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; }
.trio,.pillars,.services,.products { display:grid; gap:14px; }
.pillars { grid-template-columns:repeat(2,1fr); margin:22px 0; }
.services,.products { grid-template-columns:repeat(2,1fr); }
.trio img { width:100%; height:220px; object-fit:cover; border-radius:16px; }
.pillar,.card { background:var(--white); border:1px solid var(--line); border-radius:16px; padding:22px; }
.pillar { min-height: 148px; display:flex; flex-direction:column; justify-content:center; }
.pillar b { display:block; color:var(--gold); letter-spacing:.12em; font-size:12px; margin-bottom:8px; }
.card img { width:100%; height:200px; object-fit:cover; border-radius:12px 12px 0 0; margin:-22px -22px 16px; width:calc(100% + 44px); }
.contact { display:grid; grid-template-columns:.9fr 1.1fr; gap:32px; }
form { display:grid; gap:12px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; }
label { display:grid; gap:6px; font-size:13px; }
input,select,textarea { border:1px solid var(--line); background:var(--paper); border-radius:10px; padding:12px; }
textarea { min-height:110px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.offices { display:grid; gap:4px; margin-top:14px; }
.office { margin:0; line-height:1.45; }
.office b { color:var(--gold); letter-spacing:.04em; font-size:15px; font-weight:500; }
.success { display:none; background:var(--navy); color:#fff; border-radius:16px; padding:28px; }
.success.show { display:block; }
form.hide { display:none; }
footer { background:var(--navy); color:#f7f4ee; padding:42px 0 24px; }
.foot { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:20px; }
footer a { color:#f7f4ee; }
.fine { margin-top:28px; padding-top:16px; border-top:1px solid rgba(247,244,238,.18); font-size:13px; color:rgba(247,244,238,.72); }
@media (max-width:860px) {
  .nav-links { display:none; }
  .nav-links.open { display:flex; flex-direction:column; position:absolute; top:78px; left:0; right:0; background:var(--paper); padding:16px 24px; }
  .menu-btn { display:inline-flex; }
  .hero,.split,.contact,.services,.products,.foot,.trio,.pillars,.form-row { grid-template-columns:1fr; }
  .hero-figure img,.split img { height:240px; }
}