:root { --navy:#091d2c; --blue:#0f3f5a; --teal:#1d8c90; --coral:#ee896f; --paper:#f5f5f1; --ink:#102431; --muted:#62727b; --line:#d8dedb; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei", Inter, Arial, sans-serif; line-height:1.65; } a { color:inherit; text-decoration:none; }
.site-header { height:76px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,80px); border-bottom:1px solid #e7ebe8; position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; } .brand-mark { width:31px; height:31px; display:grid; place-items:center; background:var(--navy); color:#fff; font-family:Georgia,serif; font-size:16px; }
.nav { display:flex; gap:29px; color:#53636c; font-size:13px; }.nav a:hover { color:var(--teal); }.menu-button { display:none; border:0; background:transparent; color:var(--ink); }
.hero { min-height:670px; position:relative; overflow:hidden; background:var(--navy); color:#fff; display:flex; align-items:center; padding:clamp(76px,10vw,135px) clamp(24px,10vw,160px); }.hero-image { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,18,30,.97) 0%,rgba(4,18,30,.83) 37%,rgba(4,18,30,.18) 72%),url("company-site-hero-web.jpg") center/cover no-repeat; }.hero-copy { position:relative; max-width:670px; }.eyebrow { margin:0 0 14px; color:var(--teal); font-weight:700; font-size:11px; letter-spacing:1.7px; }.hero .eyebrow { color:#8fdbd4; }.hero h1 { margin:0; font-family:Georgia,"Microsoft YaHei",serif; font-size:clamp(42px,5.2vw,76px); font-weight:500; line-height:1.18; letter-spacing:0; }.hero-intro { color:#d1dbdf; max-width:510px; margin:25px 0 31px; font-size:16px; }.button { display:inline-flex; gap:16px; align-items:center; background:#fff; color:var(--navy); padding:12px 17px; font-size:13px; font-weight:700; }.button:hover { background:#cfece8; }.hero-note { display:flex; flex-direction:column; gap:7px; position:absolute; bottom:30px; right:clamp(24px,5vw,80px); color:#b8c4c9; font-size:11px; text-align:right; }.hero-note span:first-child { color:var(--coral); font-weight:700; }
.statement,.focus,.scope,.contact { padding:clamp(65px,9vw,125px) clamp(24px,10vw,160px); }.statement { background:#fff; }.statement-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); gap:clamp(35px,10vw,140px); }.statement h2,.scope h2,.contact h2 { font-family:Georgia,"Microsoft YaHei",serif; font-size:clamp(29px,3.4vw,49px); line-height:1.3; font-weight:500; margin:0; }.statement-grid p { color:var(--muted); margin:8px 0 0; font-size:15px; }
.focus { background:var(--paper); }.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:38px; }.section-heading h2 { margin:0; font-family:Georgia,"Microsoft YaHei",serif; font-size:38px; font-weight:500; }.focus-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.focus-grid article { padding:28px 30px 20px 0; min-height:210px; border-right:1px solid var(--line); margin-right:30px; }.focus-grid article:last-child { border:0; margin:0; }.focus-grid span { color:var(--coral); font:700 12px Georgia,serif; }.focus-grid h3 { font-size:19px; margin:25px 0 9px; }.focus-grid p { color:var(--muted); font-size:13px; margin:0; }
.scope { background:var(--blue); color:#fff; display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(40px,10vw,130px); }.scope .eyebrow { color:#8fdbd4; }.scope h2 { color:#fff; }.scope-list { border-top:1px solid rgba(255,255,255,.28); }.scope-list span { display:block; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.18); font-size:14px; }
.contact { background:#e5eeea; display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:end; }.contact p:last-child { color:#53636c; font-size:15px; max-width:460px; margin:0; }.email { display:inline-block; margin-top:13px; color:var(--teal); font-size:17px; font-weight:700; border-bottom:1px solid currentColor; } footer { padding:23px clamp(24px,5vw,80px); background:var(--navy); color:#aebcc0; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:11px; }
@media (max-width:720px) { .site-header{height:66px}.menu-button{display:block}.nav{display:none;position:absolute;top:66px;right:0;left:0;padding:16px 24px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;gap:10px}.nav.open{display:flex}.hero{min-height:620px}.hero-note{display:none}.statement-grid,.scope,.contact{grid-template-columns:1fr}.focus-grid{grid-template-columns:1fr}.focus-grid article{border-right:0;border-bottom:1px solid var(--line);margin:0;padding-right:0;min-height:auto}.focus-grid article:last-child{border-bottom:0}.section-heading h2{font-size:31px}footer{flex-direction:column;gap:5px} }