@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Serif+TC:wght@500;600;700&display=swap');

:root { --ink:#1d3538; --teal:#12636b; --deep:#103f43; --muted:#6c7a7c; --paper:#f6f7f4; --line:#e1e6e3; --warm:#efeee8; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; color:var(--ink); background:var(--white); font-family:'Noto Sans TC',sans-serif; font-size:15px; line-height:1.85; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid #e4b567; outline-offset:5px; }
img { max-width:100%; display:block; }
svg { width:24px; height:24px; flex-shrink:0; }
.container { width:min(1200px,calc(100% - 100px)); margin:0 auto; }
.skip-link { position:fixed; top:-100px; left:20px; padding:10px 16px; background:var(--deep); color:white; z-index:100; }
.skip-link:focus { top:10px; }
.utility { background:var(--deep); color:#dbe8e5; font-size:11px; letter-spacing:1px; }
.utility-inner { display:flex; justify-content:space-between; align-items:center; min-height:32px; }
.utility a { display:flex; align-items:center; gap:8px; }
.utility svg { width:13px; height:13px; }
.header { position:sticky; top:0; background:rgba(255,255,255,.98); z-index:30; border-bottom:1px solid rgba(225,230,227,.7); }
.header-inner { display:flex; justify-content:space-between; align-items:center; height:89px; gap:25px; }
.brand { display:flex; gap:12px; align-items:center; line-height:1.35; }
.brand img { width:45px; height:45px; border-radius:50%; }
.brand strong { font-size:20px; font-weight:700; letter-spacing:2px; display:block; }
.brand span { font-size:10px; display:block; letter-spacing:1.4px; color:var(--muted); margin-top:5px; }
.main-nav { display:flex; align-items:center; gap:30px; font-size:13px; font-weight:500; }
.main-nav a:not(.nav-cta) { padding:12px 0; position:relative; }
.main-nav a:not(.nav-cta)::after { content:''; position:absolute; bottom:5px; left:0; height:2px; width:0; background:var(--teal); transition:width .2s; }
.main-nav a:hover::after,.main-nav a.active::after { width:100%; }
.nav-cta { background:var(--teal); color:white; padding:11px 18px; display:flex; align-items:center; gap:8px; }
.nav-cta svg { width:17px; height:17px; }
.menu-toggle { display:none; background:none; border:0; color:var(--ink); padding:8px; }
.hero { background:var(--warm); position:relative; overflow:hidden; }
.hero-layout { display:flex; min-height:610px; }
.hero-copy { width:48%; padding:72px 42px 70px 0; position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; }
.eyebrow { color:var(--teal); font-size:11px; font-weight:600; letter-spacing:2.2px; display:flex; align-items:center; gap:10px; line-height:1.5; margin-bottom:22px; }
.eyebrow::before { content:''; width:26px; height:1px; background:currentColor; }
h1,h2,h3,p { margin-top:0; }
h1 { font-family:'Noto Serif TC',serif; font-size:clamp(40px,4.1vw,61px); font-weight:600; line-height:1.3; letter-spacing:3px; margin-bottom:26px; }
h1 em { color:var(--teal); font-style:normal; }
.hero-description { color:var(--muted); line-height:2; max-width:420px; margin-bottom:28px; }
.actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:13px 23px; font-size:13px; font-weight:500; border:1px solid transparent; transition:background .2s,transform .2s; min-height:48px; }
.btn svg { width:18px; height:18px; }
.btn-primary { background:var(--teal); color:white; }
.btn-primary:hover,.nav-cta:hover { background:var(--deep); }
.btn-outline { border-color:#b7c4bf; color:var(--ink); background:transparent; }
.btn-outline:hover { background:#ffffff70; }
.hero-note { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; margin-top:25px; }
.hero-note svg { width:15px; height:15px; color:var(--teal); }
.hero-image { width:52%; position:relative; }
.hero-image > img { width:100%; height:100%; object-fit:cover; object-position:center; position:absolute; }
.hero-image::before { content:''; position:absolute; inset:20px; border:1px solid #ffffff50; z-index:1; pointer-events:none; }
.image-caption { position:absolute; right:29px; bottom:25px; color:white; background:#173d4359; padding:2px 8px; font-size:10px; z-index:2; }
.hero-stamp { position:absolute; bottom:38px; left:-34px; background:white; padding:19px 26px; box-shadow:0 8px 28px #183d4312; display:flex; align-items:center; gap:14px; z-index:2; }
.hero-stamp svg { width:29px; height:29px; color:var(--teal); }
.hero-stamp strong { display:block; font-size:14px; letter-spacing:1px; }
.hero-stamp small { display:block; font-size:10px; color:var(--muted); letter-spacing:1px; }
.service-strip { border-bottom:1px solid var(--line); }
.strip-inner { display:flex; padding:23px 0; justify-content:space-between; align-items:center; }
.strip-item { display:flex; gap:13px; align-items:center; font-size:13px; color:#506466; }
.strip-item svg { color:var(--teal); width:23px; height:23px; }
.strip-divider { height:25px; width:1px; background:var(--line); }
.section { padding:90px 0; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:25px; margin-bottom:35px; }
.section-head .eyebrow { margin-bottom:12px; }
h2 { font-family:'Noto Serif TC',serif; font-size:32px; font-weight:600; letter-spacing:2px; line-height:1.5; margin-bottom:0; }
.section-intro { color:var(--muted); font-size:13px; margin:15px 0 0; max-width:570px; }
.text-link { display:inline-flex; align-items:center; gap:15px; color:var(--teal); font-size:12px; padding:7px 0; white-space:nowrap; border-bottom:1px solid #c8d7d2; }
.text-link svg { width:17px; height:17px; transition:transform .2s; }
.text-link:hover svg { transform:translateX(4px); }
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:19px; }
.service-card { padding:28px 25px 24px; border:1px solid var(--line); display:flex; flex-direction:column; align-items:start; min-height:270px; transition:border .2s,background .2s,transform .2s; position:relative; }
.service-card:hover { border-color:#82aaa5; background:var(--paper); transform:translateY(-4px); }
.service-card .service-icon { padding:12px; background:#eef4f0; color:var(--teal); margin-bottom:25px; }
.service-card .service-icon svg { width:27px; height:27px; }
.service-card .num { position:absolute; top:27px; right:25px; color:#a3b4b0; font-size:10px; letter-spacing:1px; }
.service-card h3 { font-size:18px; letter-spacing:1px; margin-bottom:12px; font-weight:600; }
.service-card p { font-size:12px; color:var(--muted); line-height:1.9; margin-bottom:23px; }
.service-card .text-link { margin-top:auto; font-size:11px; border:0; gap:24px; }
.cases { background:var(--paper); }
.case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.case-card { min-width:0; }
.case-picture { position:relative; width:100%; height:250px; overflow:hidden; display:block; background:#e6eae4; border:0; padding:0; }
.case-picture img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.case-picture:hover img { transform:scale(1.04); }
.case-picture .photo-hint { position:absolute; right:12px; bottom:12px; background:white; width:29px; height:29px; display:grid; place-items:center; color:var(--ink); }
.photo-hint svg { width:16px; height:16px; }
.case-meta { display:flex; gap:9px; align-items:center; font-size:10px; margin:21px 0 12px; color:var(--muted); }
.tag { background:#e3ece7; color:var(--teal); padding:3px 8px; font-size:10px; }
.case-card h3 { font-size:18px; font-weight:600; letter-spacing:.7px; margin-bottom:10px; }
.case-card p { color:var(--muted); font-size:12px; margin-bottom:13px; }
.case-card .text-link { border:0; font-size:11px; }
.source-note { color:#83918b; font-size:10px; margin:25px 0 0; }
.case-feature { display:flex; background:white; }
.case-feature-images { display:flex; width:62%; min-height:370px; gap:4px; background:var(--paper); }
.case-feature-images .case-picture { height:370px; }
.case-feature-images .case-picture:first-child { width:65%; }
.case-feature-images .case-picture:nth-child(2) { width:35%; }
.case-feature-copy { width:38%; padding:40px; }
.case-feature-copy h3 { font-family:'Noto Serif TC',serif; font-size:25px; line-height:1.5; }
.case-feature-copy p { font-size:13px; color:var(--muted); }
.about-layout { display:flex; align-items:center; gap:75px; }
.about-image { width:51%; position:relative; }
.about-image img { width:100%; height:auto; }
.about-image::after { content:''; position:absolute; right:-15px; bottom:-15px; width:70%; height:80%; border:1px solid #b6c5bb; z-index:-1; }
.about-copy { width:49%; }
.about-copy .eyebrow { margin-bottom:12px; }
.about-copy h2 { margin-bottom:22px; }
.about-copy p { color:var(--muted); font-size:13px; line-height:2; }
.about-values { display:flex; border-top:1px solid var(--line); margin:25px 0; padding-top:22px; gap:28px; }
.about-values span { display:flex; gap:7px; align-items:center; font-size:12px; }
.about-values svg { width:17px; height:17px; color:var(--teal); }
.process { padding:45px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.process-inner { display:flex; justify-content:space-between; align-items:center; gap:25px; }
.process-label { font-family:'Noto Serif TC',serif; font-size:20px; letter-spacing:2px; }
.process-step { display:flex; align-items:center; gap:13px; }
.process-step span { color:#91aaa4; font-family:serif; font-size:25px; }
.process-step strong { display:block; font-size:13px; font-weight:500; }
.process-step small { display:block; font-size:10px; color:var(--muted); }
.process-arrow { width:17px; color:#b7c6bf; }
.contact { background:var(--deep); color:white; }
.contact-layout { display:flex; gap:85px; }
.contact-copy { width:48%; }
.contact .eyebrow { color:#a4c7bf; }
.contact h2 { color:white; font-size:35px; margin-bottom:18px; }
.contact-copy > p { color:#b8ceca; font-size:13px; max-width:390px; }
.phone-large { display:flex; gap:12px; font-size:31px; font-weight:500; letter-spacing:2px; align-items:center; margin:27px 0 15px; }
.phone-large svg { width:27px; height:27px; color:#a4c7bf; }
.contact-address { color:#b8ceca; font-size:12px; display:flex; gap:9px; align-items:start; margin:13px 0 24px; }
.contact-address svg { width:16px; height:16px; margin-top:5px; }
.contact-links { display:flex; gap:24px; }
.contact-links a { display:inline-flex; gap:8px; align-items:center; font-size:12px; border-bottom:1px solid #61817e; padding-bottom:5px; }
.contact-links svg { width:16px; height:16px; }
.enquiry { width:52%; background:#ffffff07; border:1px solid #ffffff20; padding:28px; }
.enquiry label { font-size:12px; display:block; margin-bottom:8px; color:#dce9e6; }
.enquiry select,.enquiry input,.enquiry textarea { display:block; width:100%; border:1px solid #547473; border-radius:0; background:#ffffff08; color:white; padding:11px 12px; font-size:12px; }
.enquiry input::placeholder,.enquiry textarea::placeholder { color:#a0bab6; }
.enquiry select option { background:var(--deep); }
.form-row { display:flex; gap:16px; margin-bottom:17px; }
.form-row > div { flex:1; min-width:0; }
.enquiry textarea { resize:vertical; min-height:95px; }
.enquiry .btn { margin-top:20px; background:#ecf1e9; color:var(--deep); width:100%; }
.enquiry .btn:hover { background:white; }
.form-note { color:#98b6af; font-size:10px; margin:12px 0 0; }
.footer { background:white; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; padding:32px 0; gap:20px; }
.footer .brand img { width:36px; height:36px; }
.footer .brand strong { font-size:16px; }
.footer .brand span { font-size:9px; }
.footer-links { display:flex; gap:21px; color:var(--muted); font-size:11px; }
.footer-bottom { border-top:1px solid var(--line); padding:15px 0; display:flex; justify-content:space-between; font-size:10px; color:#8a9793; gap:20px; }
.whatsapp-float { position:fixed; right:25px; bottom:25px; z-index:40; color:white; background:#25b667; border-radius:50%; width:58px; height:58px; display:grid; place-items:center; box-shadow:0 5px 20px #00482028; transition:transform .2s,background .2s; }
.whatsapp-float svg { width:30px; height:30px; }
.whatsapp-float:hover { transform:translateY(-3px); background:#189453; }
.whatsapp-tooltip { position:absolute; right:72px; white-space:nowrap; background:white; padding:7px 13px; font-size:11px; color:var(--deep); border:1px solid var(--line); opacity:0; visibility:hidden; transition:opacity .2s; box-shadow:0 2px 10px #00000005; }
.whatsapp-float:hover .whatsapp-tooltip,.whatsapp-float:focus-visible .whatsapp-tooltip { opacity:1; visibility:visible; }
dialog { border:0; padding:24px; background:var(--paper); width:min(950px,calc(100% - 35px)); max-height:90vh; color:var(--ink); }
dialog::backdrop { background:#071d20cc; }
.dialog-top { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-bottom:15px; gap:15px; }
.dialog-top p { margin:0; }
.dialog-top button,.dialog-controls button { background:transparent; border:1px solid #c2d0ca; color:var(--ink); padding:8px; display:flex; gap:10px; align-items:center; font-size:12px; }
#dialog-photo { margin:auto; width:auto; max-width:100%; max-height:65vh; object-fit:contain; }
.dialog-controls { display:flex; justify-content:space-between; margin-top:16px; }
.page-heading { background:var(--warm); padding:55px 0; }
.breadcrumb { display:flex; gap:10px; color:var(--muted); font-size:11px; margin-bottom:20px; }
.page-heading h1 { font-size:43px; margin-bottom:15px; }
.page-heading p { color:var(--muted); font-size:13px; max-width:610px; margin-bottom:0; }
.service-detail { display:flex; gap:70px; padding:55px 0; border-bottom:1px solid var(--line); }
.service-detail:last-child { border:0; }
.detail-title { width:34%; display:flex; align-items:start; gap:20px; }
.detail-title > svg { width:36px; height:36px; color:var(--teal); margin-top:6px; }
.detail-title h2 { font-size:26px; margin-bottom:8px; }
.detail-title span { color:#819a92; font-size:10px; letter-spacing:1.4px; }
.detail-body { flex:1; }
.detail-body p { color:var(--muted); font-size:14px; }
.detail-points { padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:12px 24px; margin:22px 0; }
.detail-points li { display:flex; gap:8px; font-size:12px; align-items:center; }
.detail-points svg { width:15px; height:15px; color:var(--teal); }
.service-info { padding:18px 22px; font-size:12px; background:var(--paper); color:var(--muted); margin-bottom:25px; }

@media(min-width:1450px) { .hero-layout { min-height:670px; } }
@media(max-width:1100px) { .container { width:calc(100% - 60px); } .main-nav { gap:19px; } .brand strong { font-size:18px; } .hero-copy { padding-right:25px; } .hero-layout { min-height:560px; } .hero-description { font-size:13px; } .service-card { padding:23px 20px; } .service-card h3 { font-size:16px; } .about-layout { gap:45px; } .contact-layout { gap:45px; } .case-picture { height:210px; } .case-feature-copy { padding:28px; } }
@media(max-width:850px) { .container { width:calc(100% - 40px); } .header-inner { height:75px; } .menu-toggle { display:block; } .main-nav { display:none; position:absolute; top:75px; left:0; right:0; padding:22px; background:white; box-shadow:0 10px 18px #183d4312; border-top:1px solid var(--line); } .main-nav.is-open { display:flex; flex-direction:column; align-items:stretch; gap:8px; } .main-nav a:not(.nav-cta) { padding:10px 0; } .nav-cta { justify-content:center; margin-top:8px; } .hero-layout { min-height:510px; } .hero-copy { padding:45px 25px 50px 0; width:50%; } h1 { font-size:40px; letter-spacing:2px; } .hero-image { width:50%; } .hero-stamp { left:-18px; bottom:30px; padding:15px; } .hero-stamp strong { font-size:12px; } .hero-stamp small { font-size:8px; } .actions .btn { padding:12px 16px; font-size:12px; } .strip-item { font-size:11px; gap:8px; } .strip-item svg { width:19px; } .section { padding:65px 0; } .services-grid { grid-template-columns:repeat(2,1fr); gap:17px; } .service-card { min-height:245px; } .case-grid { gap:18px; } .case-picture { height:190px; } .case-card h3 { font-size:16px; } .case-meta { flex-wrap:wrap; } .about-layout { gap:32px; } .about-copy h2 { font-size:27px; } .about-values { gap:13px; flex-wrap:wrap; } .process-inner { flex-wrap:wrap; gap:20px; } .process-label { width:100%; } .process-arrow { display:none; } .process-step { flex:1; } .contact-layout { gap:30px; } .contact-copy { width:45%; } .enquiry { width:55%; padding:24px; } .phone-large { font-size:25px; } .form-row { flex-direction:column; } .footer-inner { align-items:start; } .footer-links { flex-wrap:wrap; max-width:240px; gap:14px 23px; } .case-feature-images { width:55%; } .case-feature-copy { width:45%; } .case-feature-copy h3 { font-size:22px; } .service-detail { gap:35px; } }
@media(max-width:600px) { html { scroll-padding-top:85px; } .container { width:calc(100% - 36px); } .utility { font-size:9px; letter-spacing:.4px; } .utility-inner { min-height:29px; } .brand strong { font-size:17px; letter-spacing:1.2px; } .brand img { width:40px; height:40px; } .brand span { font-size:8px; letter-spacing:1.1px; } .header-inner { height:72px; } .main-nav { top:72px; } .hero-layout { flex-direction:column; } .hero-copy { width:100%; padding:45px 0 42px; } .hero h1 { font-size:43px; margin-bottom:20px; line-height:1.34; } .eyebrow { font-size:10px; margin-bottom:20px; } .hero-description { max-width:100%; font-size:13px; margin-bottom:24px; } .hero-note { margin-top:20px; } .hero-image { width:calc(100% + 36px); margin-left:-18px; height:355px; } .hero-image > img { object-position:center 48%; } .hero-image::before { inset:15px; } .hero-stamp { left:18px; bottom:23px; } .image-caption { right:20px; bottom:21px; } .strip-inner { padding:20px 0; display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; } .strip-divider { display:none; } .strip-item { font-size:11px; } .section { padding:55px 0; } .section-head { gap:16px; align-items:start; flex-direction:column; margin-bottom:28px; } h2 { font-size:27px; letter-spacing:1px; } .section-head .text-link { font-size:11px; } .section-intro { font-size:12px; } .services-grid { gap:12px; } .service-card { padding:22px 17px; min-height:257px; } .service-card .service-icon { padding:9px; margin-bottom:20px; } .service-card .num { top:24px; right:17px; } .service-card h3 { font-size:16px; letter-spacing:.3px; } .service-card p { font-size:11px; margin-bottom:18px; } .service-card .text-link { gap:10px; } .case-grid { grid-template-columns:1fr; gap:30px; } .case-picture { height:260px; } .case-card h3 { font-size:19px; } .case-meta { margin:17px 0 10px; } .case-card p { font-size:12px; } .source-note { font-size:9px; } .about-layout { flex-direction:column; gap:42px; } .about-image,.about-copy { width:100%; } .about-image::after { right:-9px; bottom:-10px; } .about-copy h2 { font-size:28px; } .about-values { justify-content:space-between; gap:9px; } .about-values span { font-size:11px; } .process { padding:32px 0; } .process-inner { display:grid; grid-template-columns:1fr; gap:20px; } .process-label { margin-bottom:2px; } .process-step { gap:20px; } .process-step span { font-size:26px; } .process-step strong { font-size:14px; } .process-step small { font-size:11px; } .contact-layout { flex-direction:column; gap:30px; } .contact-copy,.enquiry { width:100%; } .contact h2 { font-size:31px; } .contact-copy > p { font-size:12px; } .phone-large { font-size:30px; } .enquiry { padding:23px 20px; } .form-row { flex-direction:row; } .footer-inner { flex-direction:column; gap:25px; padding:30px 0; } .footer-links { max-width:none; gap:20px; } .footer-bottom { flex-direction:column; gap:4px; padding:17px 65px 22px 0; font-size:9px; } .whatsapp-float { right:18px; bottom:18px; width:54px; height:54px; } .whatsapp-float svg { width:28px; height:28px; } .case-feature { flex-direction:column; } .case-feature-images { width:100%; min-height:280px; } .case-feature-images .case-picture { height:280px; } .case-feature-copy { width:100%; padding:27px; } .page-heading { padding:35px 0; } .page-heading h1 { font-size:34px; } .service-detail { flex-direction:column; padding:35px 0; gap:22px; } .detail-title { width:100%; } .detail-title h2 { font-size:24px; } .detail-body p { font-size:13px; } .detail-points { gap:10px 18px; } .detail-points li { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.case-grid.two { grid-template-columns:repeat(2,1fr); gap:30px; }
.case-grid.two .case-picture { height:300px; }
.strip-divider:last-child { display:none; }
.process-inner > svg { width:17px; color:#b7c6bf; }
.dialog-controls [data-prev] svg { transform:rotate(180deg); }
@media(max-width:850px) { .case-grid.two .case-picture { height:245px; } .process-inner > svg { display:none; } }
@media(max-width:600px) { .case-grid.two { grid-template-columns:1fr; } .case-grid.two .case-picture { height:260px; } }