@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');
:root { --ink:#552335; --muted:#806d75; --paper:#fcf8f2; --line:#e2d4d3; --accent:#f7d6c7; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:24px; } body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.8 'DM Sans','Noto Sans TC',sans-serif; } a { color:inherit; text-decoration:none; } a:focus-visible { outline:3px solid #b55c60; outline-offset:5px; }.wrap { width:min(1000px,calc(100% - 64px)); margin:auto; } .skip { position:fixed; top:-80px; }.skip:focus { top:0; padding:10px; background:white; z-index:10; } header { padding:27px 0; }.nav { display:flex; justify-content:space-between; align-items:center; }.brand { display:flex; align-items:center; gap:11px; }.brand img { width:38px; height:38px; }.brand strong { font-size:22px; letter-spacing:2px; line-height:1.2; display:block; }.brand span { font-size:10px; letter-spacing:3px; }.links { display:flex; gap:25px; font-size:12px; align-items:center; }.language { color:var(--muted); border-left:1px solid var(--line); padding-left:25px; }.intro { padding:45px 0 42px; text-align:center; border-top:1px solid var(--line); }.eyebrow { display:inline-block; font-size:10px; letter-spacing:2px; color:var(--muted); border:1px solid var(--line); padding:4px 12px; border-radius:30px; } h1 { font-size:clamp(33px,4.2vw,53px); letter-spacing:-1.7px; line-height:1.45; font-weight:500; margin:20px auto 18px; max-width:850px; } .intro p { max-width:630px; margin:0 auto; color:var(--muted); font-size:14px; }.intro .company { margin-top:19px; font-size:11px; letter-spacing:.5px; }.services { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:white; }.section-title { display:flex; align-items:center; justify-content:space-between; padding:15px 25px; background:#f3e7e5; border-bottom:1px solid var(--line); } h2 { font-size:14px; font-weight:500; margin:0; }.section-title span { font-size:10px; letter-spacing:1px; color:var(--muted); }.service { display:grid; grid-template-columns:230px 1fr; gap:40px; padding:24px 26px; border-bottom:1px solid var(--line); align-items:center; }.service:last-child { border:0; }.service h3 { font-size:20px; font-weight:500; margin:0; }.service small { font-size:10px; color:var(--muted); letter-spacing:.7px; }.service p { margin:0; color:var(--muted); font-size:13px; }.contact { margin:30px 0; background:var(--ink); color:#fff7f2; border-radius:12px; padding:30px; display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }.contact h2 { font-size:25px; letter-spacing:-.4px; }.contact p { color:#e3cbd1; font-size:12px; margin:9px 0 0; }.contact-links { display:flex; flex-direction:column; align-items:start; gap:10px; }.email-button { background:var(--accent); color:var(--ink); font-size:13px; padding:10px 18px; border-radius:6px; }.email-button:hover { background:#ffe7dc; }.phone { font-size:13px; color:#f4e5e8; padding-left:2px; }.contact small { color:#d3b5bf; font-size:10px; }.footer { padding:0 0 25px; color:var(--muted); font-size:10px; }.footer-info { display:flex; justify-content:space-between; align-items:start; gap:25px; }.footer-info p { margin:0; }.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:18px; margin-top:18px; border-top:1px solid var(--line); }.article { max-width:760px; padding:35px 0 70px; }.article h1 { font-size:34px; margin:20px 0 30px; }.article h2 { font-size:20px; margin:24px 0 10px; }.article p { color:var(--muted); font-size:14px; }.back { font-size:12px; border-bottom:1px solid var(--line); }
@media(max-width:650px) { .wrap { width:calc(100% - 36px); } header { padding:21px 0; }.brand strong { font-size:19px; }.brand img { width:34px; height:34px; }.links { gap:15px; }.links .services-link { display:none; }.language { padding-left:15px; }.intro { padding:32px 0; } h1 { font-size:34px; letter-spacing:-1px; }.intro p { font-size:13px; text-align:left; }.intro .company { font-size:10px; text-align:center; }.section-title { padding:13px 18px; }.service { grid-template-columns:1fr; gap:9px; padding:20px; }.service h3 { font-size:19px; }.service p { font-size:12px; }.contact { grid-template-columns:1fr; gap:20px; padding:24px; margin:22px 0; }.contact h2 { font-size:24px; }.footer-info { flex-direction:column; gap:10px; }.footer-bottom { font-size:9px; }.article h1 { font-size:29px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }